Skip to content

Commit 1880249

Browse files
BlankeosBlankeos
committed
docs: better docs (made by gemini 3) + lots of tweaks from me.
1 parent 6f05140 commit 1880249

23 files changed

+2006
-248
lines changed

‎bun.lockb‎

19.6 KB
Binary file not shown.

‎dev/components/demos/base-demo.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ function Demo(props: FlowProps<Props>) {
120120
"relative px-2 py-1 font-medium text-xs/4 text-zinc-600 hover:text-primary aria-selected:text-primary dark:text-muted"
121121
)}
122122
>
123-
<Show when={active() === _props.code}>
123+
<Show when={active() === "code"}>
124124
{/* // Motion.div */}
125125
<div
126126
class="prefers-dark:!bg-white/15 -z-10 absolute inset-0 size-full bg-white shadow-sm dark:bg-white/25"
@@ -164,7 +164,12 @@ function Demo(props: FlowProps<Props>) {
164164
</div>
165165
</Tabs.Content>
166166
<Show when={_props.code}>
167-
<Tabs.Content value="code">{_props?.code}</Tabs.Content>«
167+
<Tabs.Content
168+
value="code"
169+
class="relative overflow-hidden rounded-lg border border-faint bg-zinc-950 text-sm"
170+
>
171+
{_props.code}
172+
</Tabs.Content>
168173
</Show>
169174
</Tabs>
170175
)
@@ -196,7 +201,7 @@ export function DemoTitle(props: JSX.IntrinsicElements["span"] & { children: str
196201
// {...props}
197202
// class={clsx(
198203
// class,
199-
// 'group flex h-8 items-center rounded-full px-3 text-xs shadow-sm ring ring-black/[8%] dark:shadow-none dark:ring-white/10'
204+
// 'group flex h-8 items-center rounded-full px-3 text-xs shadow-sm ring ring-black/8 dark:shadow-none dark:ring-white/10'
200205
// )}
201206
// >
202207
// {children}
@@ -214,7 +219,7 @@ export function DemoTitle(props: JSX.IntrinsicElements["span"] & { children: str
214219
// {...props}
215220
// class={clsx(
216221
// class,
217-
// 'animate-pop-in dark:ring-white/12.5 absolute left-0 top-full mt-2 min-w-full origin-top-left rounded-xl bg-white/90 p-1.5 shadow-sm ring ring-inset ring-black/[8%] backdrop-blur-xl backdrop-saturate-[140%] dark:bg-zinc-950/90 dark:shadow-none'
222+
// 'animate-pop-in dark:ring-white/12.5 absolute left-0 top-full mt-2 min-w-full origin-top-left rounded-xl bg-white/90 p-1.5 shadow-sm ring ring-inset ring-black/8 backdrop-blur-xl backdrop-saturate-140 dark:bg-zinc-950/90 dark:shadow-none'
218223
// )}
219224
// />
220225
// )
@@ -232,7 +237,7 @@ export function DemoTitle(props: JSX.IntrinsicElements["span"] & { children: str
232237
// class={clsx(
233238
// class,
234239
// props.disabled ? 'pr-2' : 'pr-4',
235-
// 'dark:data-[focus]:bg-white/12.5 flex w-full items-center gap-2 rounded-lg py-2 pl-2 text-xs font-medium data-[disabled]:cursor-default data-[focus]:bg-black/5'
240+
// 'dark:data-focus:bg-white/12.5 flex w-full items-center gap-2 rounded-lg py-2 pl-2 text-xs font-medium data-disabled:cursor-default data-focus:bg-black/5'
236241
// )}
237242
// >
238243
// {children}
@@ -249,10 +254,10 @@ export function DemoSwitch(props: ComponentProps<typeof Switch>) {
249254
<Switch.Control
250255
class={clsx(
251256
props.class,
252-
"group relative flex h-6 w-11 cursor-pointer rounded-full bg-zinc-200 p-0.5 transition-colors duration-200 ease-in-out focus:outline-none data-[checked]:bg-zinc-950 data-[focus]:outline-2 data-[focus]:outline-blue-500 dark:bg-zinc-800 dark:data-[checked]:bg-zinc-50"
257+
"group relative flex h-6 w-11 cursor-pointer rounded-full bg-zinc-200 p-0.5 transition-colors duration-200 ease-in-out focus:outline-none data-checked:bg-zinc-950 data-focus:outline-2 data-focus:outline-blue-500 dark:bg-zinc-800 dark:data-checked:bg-zinc-50"
253258
)}
254259
>
255-
<Switch.Thumb class="spring-bounce-0 spring-duration-200 pointer-events-none inline-block size-5 rounded-full bg-white shadow-lg ring-0 transition-transform group-data-[checked]:translate-x-5 dark:bg-zinc-950" />
260+
<Switch.Thumb class="spring-bounce-0 spring-duration-200 pointer-events-none inline-block size-5 rounded-full bg-white shadow-lg ring-0 transition-transform group-data-checked:translate-x-5 dark:bg-zinc-950" />
256261
</Switch.Control>
257262
<Switch.Label class="text-xs">{props.children as any}</Switch.Label>
258263
</Switch>

‎dev/components/demos/continuous.tsx‎

Lines changed: 34 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,47 @@
11
import Demo, { type DemoProps, DemoSwitch } from "dev/components/demos/base-demo"
2-
2+
import { MDXContent } from "dev/components/mdx-content"
33
import { useCycle } from "dev/hooks/use-cycle"
4-
import { continuous } from "number-flow"
4+
import { continuous } from "number-flow/plugins"
55
import { createSignal } from "solid-js"
66
import NumberFlow from "src"
77

88
const NUMBERS = [120, 140]
99

1010
export default function ContinuousDemo(props: Omit<DemoProps, "children" | "code">) {
1111
const [value, cycleValue] = useCycle(NUMBERS)
12-
const [isContinuous, setContinuous] = createSignal(false)
12+
const [isContinuous, setContinuous] = createSignal(true)
13+
14+
const code = `
15+
\`\`\`tsx
16+
import NumberFlow, { continuous } from '@number-flow/solid'
17+
18+
<NumberFlow
19+
plugins={[continuous]}
20+
value={value}
21+
/>
22+
\`\`\`
23+
`
1324

1425
return (
15-
<>
16-
<Demo
17-
{...props}
18-
title={
19-
<DemoSwitch checked={isContinuous()} onChange={setContinuous}>
20-
<code class="font-semibold">continuous</code>
21-
</DemoSwitch>
22-
}
23-
onClick={cycleValue}
24-
>
25-
<div class="~text-xl/4xl flex items-center gap-4">
26-
<NumberFlow
27-
style={{ "--number-flow-char-height": "0.85em" }}
28-
value={value()}
29-
class="font-semibold text-4xl"
30-
plugins={isContinuous() ? [continuous] : undefined}
31-
/>
32-
</div>
33-
</Demo>
34-
</>
26+
<Demo
27+
{...props}
28+
code={<MDXContent code={code} />}
29+
title={
30+
<DemoSwitch checked={isContinuous()} onChange={setContinuous}>
31+
<code class="font-semibold">continuous</code>
32+
</DemoSwitch>
33+
}
34+
onClick={cycleValue}
35+
>
36+
<div class="~text-3xl/4xl flex items-center gap-4">
37+
<NumberFlow
38+
locales="en-US"
39+
plugins={isContinuous() ? [continuous] : undefined}
40+
style={{ "--number-flow-char-height": "0.85em" }}
41+
value={value()}
42+
class="font-semibold text-4xl"
43+
/>
44+
</div>
45+
</Demo>
3546
)
3647
}

‎dev/components/demos/isolate.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import Demo, { DemoSwitch, type DemoProps } from "dev/components/demos/base-demo"
2+
import { MDXContent } from "dev/components/mdx-content"
3+
import { createSignal } from "solid-js"
4+
import NumberFlow from "src"
5+
6+
export default function IsolateDemo(props: Omit<DemoProps, "children" | "code">) {
7+
const [increased, setIncreased] = createSignal(false)
8+
const [isolate, setIsolate] = createSignal(false)
9+
10+
const code = `
11+
\`\`\`tsx
12+
<NumberFlow
13+
isolate={${isolate()}}
14+
value={${increased() ? 1.2423 : 0.4175}}
15+
format={{ style: 'percent' }}
16+
/>
17+
\`\`\`
18+
`
19+
20+
return (
21+
<Demo
22+
{...props}
23+
code={<MDXContent code={code} />}
24+
title={
25+
<DemoSwitch checked={isolate()} onChange={setIsolate}>
26+
<code class="font-semibold">isolate</code>
27+
</DemoSwitch>
28+
}
29+
onClick={() => setIncreased((o) => !o)}
30+
>
31+
<div class="~text-3xl/4xl flex items-center gap-4">
32+
{increased() && <div class="bg-zinc-200 dark:bg-zinc-800 ~w-20/40 h-[1em] rounded-sm" />}
33+
<NumberFlow
34+
locales="en-US"
35+
isolate={isolate()}
36+
style={{ "--number-flow-char-height": "0.85em" }}
37+
value={increased() ? 1.2423 : 0.4175}
38+
format={{ style: "percent" }}
39+
class="font-semibold text-4xl"
40+
/>
41+
</div>
42+
</Demo>
43+
)
44+
}

‎dev/components/demos/styling.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import Demo, { type DemoProps } from "dev/components/demos/base-demo"
2+
import { MDXContent } from "dev/components/mdx-content"
3+
import { useCycle } from "dev/hooks/use-cycle"
4+
import NumberFlow, { type Value } from "src"
5+
6+
const NUMBERS: Value[] = [3, 15, 50]
7+
8+
export default function StylingDemo(props: Omit<DemoProps, "children" | "code">) {
9+
const [value, cycleValue] = useCycle(NUMBERS)
10+
11+
const code = `
12+
\`\`\`css
13+
number-flow::part(suffix) {
14+
margin-left: .0625em;
15+
font-weight: normal;
16+
font-size: 0.75em;
17+
color: var(--muted);
18+
}
19+
\`\`\`
20+
`
21+
22+
return (
23+
<Demo {...props} code={<MDXContent code={code} />} onClick={cycleValue}>
24+
<NumberFlow
25+
locales="en-US"
26+
value={value()}
27+
format={{ style: "currency", currency: "USD", trailingZeroDisplay: "stripIfInteger" }}
28+
suffix="/mo"
29+
class="~text-3xl/4xl font-semibold text-4xl part-[suffix]:font-normal part-[suffix]:text-muted part-[suffix]:text-[0.75em] part-[suffix]:ml-[0.0625em]"
30+
style={{ "--number-flow-char-height": "0.85em" }}
31+
/>
32+
</Demo>
33+
)
34+
}

‎dev/components/demos/suffix.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import Demo, { type DemoProps } from "dev/components/demos/base-demo"
2+
import { MDXContent } from "dev/components/mdx-content"
3+
import { useCycle } from "dev/hooks/use-cycle"
4+
import NumberFlow, { type Value } from "src"
5+
6+
const NUMBERS: Value[] = [3, 15, 50]
7+
8+
export default function SuffixDemo(props: Omit<DemoProps, "children" | "code">) {
9+
const [value, cycleValue] = useCycle(NUMBERS)
10+
11+
const code = `
12+
\`\`\`tsx
13+
<NumberFlow
14+
value={value}
15+
format={{ style: 'currency', currency: 'USD', trailingZeroDisplay: 'stripIfInteger' }}
16+
suffix="/mo"
17+
/>
18+
\`\`\`
19+
`
20+
21+
return (
22+
<Demo {...props} code={<MDXContent code={code} />} onClick={cycleValue}>
23+
<NumberFlow
24+
locales="en-US"
25+
value={value()}
26+
format={{ style: "currency", currency: "USD", trailingZeroDisplay: "stripIfInteger" }}
27+
suffix="/mo"
28+
class="~text-3xl/4xl font-semibold text-4xl"
29+
style={{ "--number-flow-char-height": "0.85em" }}
30+
/>
31+
</Demo>
32+
)
33+
}

‎dev/components/demos/tabular-nums.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import Demo, { DemoSwitch, type DemoProps } from "dev/components/demos/base-demo"
2+
import { MDXContent } from "dev/components/mdx-content"
3+
import { createSignal } from "solid-js"
4+
import NumberFlow from "src"
5+
6+
export default function TabularNumsDemo(props: Omit<DemoProps, "children" | "code">) {
7+
const [value, setValue] = createSignal(10)
8+
const [tabularNums, setTabularNums] = createSignal(false)
9+
10+
const code = `
11+
\`\`\`tsx
12+
<NumberFlow
13+
style={{
14+
fontVariantNumeric: ${tabularNums() ? "'tabular-nums'" : "undefined"}
15+
}}
16+
value={value}
17+
/>
18+
\`\`\`
19+
`
20+
21+
return (
22+
<Demo
23+
{...props}
24+
code={<MDXContent code={code} />}
25+
title={
26+
<DemoSwitch checked={tabularNums()} onChange={setTabularNums}>
27+
<code class="font-semibold">tabular-nums</code>
28+
</DemoSwitch>
29+
}
30+
onClick={() => setValue((v) => v + 1)}
31+
>
32+
<div class="~text-3xl/4xl flex items-center gap-4">
33+
<NumberFlow
34+
locales="en-US"
35+
style={{
36+
"font-variant-numeric": tabularNums() ? "tabular-nums" : undefined,
37+
"--number-flow-char-height": "0.85em",
38+
}}
39+
value={value()}
40+
class="font-semibold text-4xl"
41+
/>
42+
</div>
43+
</Demo>
44+
)
45+
}

‎dev/components/demos/timings.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import Demo, { type DemoProps } from "dev/components/demos/base-demo"
2+
import { MDXContent } from "dev/components/mdx-content"
3+
import { useCycle } from "dev/hooks/use-cycle"
4+
import NumberFlow from "src"
5+
6+
const bouncySpring = {
7+
duration: 750,
8+
easing:
9+
"linear(0 0%, 0.0058021823078800595 1.1235955056179776%, 0.022019245228978974 2.247191011235955%, 0.04697426784552192 3.370786516853933%, 0.07913194654911777 4.49438202247191%, 0.11709565568904509 5.617977528089888%, 0.15960336091615873 6.741573033707866%, 0.2055225959731031 7.865168539325843%, 0.25384469405525506 8.98876404494382%, 0.30367844589280607 10.112359550561798%, 0.35424333850373657 11.235955056179776%, 0.40486251123515354 12.359550561797754%, 0.45495554931807397 13.483146067415731%, 0.5040312197589397 14.606741573033709%, 0.5516802400120898 15.730337078651687%, 0.5975681565371418 16.853932584269664%, 0.6414283980456571 17.97752808988764%, 0.6830555569725216 19.10112359550562%, 0.7222989424488457 20.224719101123597%, 0.7590564387760397 21.348314606741575%, 0.7932686950692723 22.471910112359552%, 0.8249136643114104 23.59550561797753%, 0.8540015034900891 24.719101123595507%, 0.8805698407319795 25.842696629213485%, 0.9046794103485847 26.966292134831463%, 0.9264100524147755 28.08988764044944%, 0.9458570698619917 29.213483146067418%, 0.9631279330300166 30.337078651685395%, 0.9783393191326047 31.460674157303373%, 0.9916144721023972 32.58426966292135%, 1.0030808667404794 33.70786516853933%, 1.0128681599585279 34.831460674157306%, 1.0211064111219177 35.95505617977528%, 1.0279245530378938 37.07865168539326%, 1.033449094943999 38.20224719101124%, 1.0378030389010637 39.325842696629216%, 1.0411049912474741 40.449438202247194%, 1.0434684511951837 41.57303370786517%, 1.0450012592136182 42.69662921348315%, 1.0458051885285111 43.82022471910113%, 1.0459756638345723 44.943820224719104%, 1.0456015921619513 46.06741573033708%, 1.044765291727289 47.19101123595506%, 1.0435425055235072 48.31460674157304%, 1.0420024873433105 49.438202247191015%, 1.0402081488764594 50.56179775280899%, 1.0382162574589653 51.68539325842697%, 1.0360776749738179 52.80898876404495%, 1.0338376292996567 53.932584269662925%, 1.0315360105693312 55.0561797752809%, 1.029207685329244 56.17977528089888%, 1.0268828224786164 57.30337078651686%, 1.02458722561227 58.426966292134836%, 1.022342667089039 59.55056179775281%, 1.020167219799199 60.67415730337079%, 1.0180755832077413 61.79775280898877%, 1.0160794008059388 62.921348314606746%, 1.0141875666120557 64.04494382022472%, 1.0124065188242148 65.16853932584269%, 1.0107405191458168 66.29213483146067%, 1.0091919166781451 67.41573033707866%, 1.0077613956078837 68.53932584269663%, 1.0064482062113422 69.6629213483146%, 1.005250378954478 70.78651685393258%, 1.0041649216907218 71.91011235955057%, 1.003188000149523 73.03370786516854%, 1.002315102069899 74.15730337078651%, 1.001541185467481 75.28089887640449%, 1.0008608116329931 76.40449438202248%, 1.0002682635470859 77.52808988764045%, 0.9997576504632046 78.65168539325842%, 0.9993229994588604 79.7752808988764%, 0.998958334788324 80.89887640449439%, 0.9986577458883016 82.02247191011236%, 0.9984154448944083 83.14606741573033%, 0.9982258145219031 84.26966292134831%, 0.9980834471507738 85.3932584269663%, 0.9979831759342885 86.51685393258427%, 0.9979200987229117 87.64044943820224%, 0.9978895955632022 88.76404494382022%, 0.9978873404950641 89.88764044943821%, 0.9979093083314955 91.01123595505618%, 0.9979517770636321 92.13483146067415%, 0.9980113264912046 93.25842696629213%, 0.9980848336351612 94.38202247191012%, 0.9981694654457833 95.50561797752809%, 0.9982626692766015 96.62921348314606%, 0.9983621615522535 97.75280898876404%, 0.9984659150174638 98.87640449438203%, 1 100%)"
10+
}
11+
12+
const opacityTiming = { duration: 350, easing: "ease-out" }
13+
14+
const NUMBERS = [124.23, 41.75, 2125.95]
15+
16+
export default function TimingsDemo(props: Omit<DemoProps, "children" | "code">) {
17+
const [value, cycleValue] = useCycle(NUMBERS)
18+
19+
const code = `
20+
\`\`\`tsx
21+
<NumberFlow
22+
transformTiming={{ duration: 750, easing: 'linear(...)' }}
23+
spinTiming={{ duration: 750, easing: 'linear(...)' }}
24+
opacityTiming={{ duration: 350, easing: 'ease-out' }}
25+
value={value}
26+
/>
27+
\`\`\`
28+
`
29+
30+
return (
31+
<Demo {...props} code={<MDXContent code={code} />} onClick={cycleValue}>
32+
<NumberFlow
33+
locales="en-US"
34+
value={value()}
35+
transformTiming={bouncySpring}
36+
opacityTiming={opacityTiming}
37+
class="~text-3xl/4xl font-semibold text-4xl"
38+
style={{ "--number-flow-char-height": "0.85em" }}
39+
/>
40+
</Demo>
41+
)
42+
}

0 commit comments

Comments
 (0)