docs: example for groupings (but broken).

Author: Blankeos

.prettierignore

@@ -0,0 +1,70 @@
+import Demo, { type DemoProps } from "dev/components/demos/base-demo"
+import { useCycle } from "dev/hooks/use-cycle"
+import { cn } from "dev/utils/cn"
+import NumberFlow, { NumberFlowGroup } from "src"
+
+const DATA = [
+  { value: 124.23, diff: 0.0564 },
+  { value: 2125.95, diff: 0.0029 },
+  { value: 41.75, diff: -0.3912 },
+]
+
+export default function GroupDemo(props: Omit<DemoProps, "children" | "code">) {
+  const [data, cycleData] = useCycle(DATA)
+
+  const code = `
+\`\`\`tsx
+import NumberFlow, { NumberFlowGroup } from 'solid-number-flow'
+
+<NumberFlowGroup>
+  <div
+    style={{ "--number-flow-char-height": "0.85em" }}
+    class="flex items-center gap-4 font-semibold"
+  >
+    <NumberFlow
+      value={value}
+      locales="en-US"
+      format={{ style: 'currency', currency: 'USD' }}
+      class="~text-2xl/4xl"
+    />
+    <NumberFlow
+      value={diff}
+      locales="en-US"
+      format={{ style: 'percent', maximumFractionDigits: 2, signDisplay: 'always' }}
+      class={cn(
+        "~text-lg/2xl transition-colors duration-300",
+        diff < 0 ? "text-red-500" : "text-emerald-500"
+      )}
+    />
+  </div>
+</NumberFlowGroup>
+\`\`\`
+`
+
+  return (
+    <Demo {...props} code={code} onClick={cycleData}>
+      <NumberFlowGroup>
+        <div
+          style={{ "--number-flow-char-height": "0.85em" }}
+          class="flex items-center gap-4 font-semibold"
+        >
+          <NumberFlow
+            value={data().value}
+            locales="en-US"
+            format={{ style: "currency", currency: "USD" }}
+            class="text-4xl"
+          />
+          <NumberFlow
+            value={data().diff}
+            locales="en-US"
+            format={{ style: "percent", maximumFractionDigits: 2, signDisplay: "always" }}
+            class={cn(
+              "text-2xl transition-colors duration-300",
+              data().diff < 0 ? "text-red-500" : "text-emerald-500",
+            )}
+          />
+        </div>
+      </NumberFlowGroup>
+    </Demo>
+  )
+}

.vscode/extensions.json

@@ -1,4 +1,5 @@
 import ContinuousDemo from "dev/components/demos/continuous"
+import GroupDemo from "dev/components/demos/group"
 import IsolateDemo from "dev/components/demos/isolate"
 import StylingDemo from "dev/components/demos/styling"
 import SuffixDemo from "dev/components/demos/suffix"
@@ -165,6 +166,14 @@ export default function HomePage() {
           <StylingDemo />
         </section>
 
+        <section>
+          <h2 class="mb-4 font-semibold text-2xl">Grouping</h2>
+          <p class="mb-6 text-zinc-400">
+            Sync transitions between multiple components.
+          </p>
+          <GroupDemo />
+        </section>
+
         <section>
           <h2 class="mb-4 font-semibold text-2xl">Tabular Nums</h2>
           <p class="mb-6 text-zinc-400">

bun.lockb

@@ -10,8 +10,8 @@
   "module": "./dist/index.js",
   "devDependencies": {
     "@biomejs/biome": "^2.3.8",
-    "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.27.10",
+    "@changesets/changelog-github": "^0.5.2",
+    "@changesets/cli": "^2.29.8",
     "@kobalte/core": "^0.13.11",
     "@mdx-js/mdx": "^3.1.1",
     "@shikijs/rehype": "^3.19.0",
@@ -32,6 +32,7 @@
     "tsup-preset-solid": "^2.2.0",
     "typescript": "^5.6.3",
     "vike": "^0.4.199",
+    "vike-metadata-solid": "^1.0.4",
     "vike-solid": "^0.7.6",
     "vite": "^5.4.9",
     "vite-plugin-solid": "^2.10.2",