@krizaka/ui 3.33.0 → 3.33.1

package/dist/motion.css

@@ -690,8 +690,7 @@ svg[data-kz-icon="ExternalIcon"] {
 /* ─── Arrival and growth (the data demos of Krizaka Motion) — CSS only, held by the conductor like every loop ───
    `[data-kz-arrive]` on an element (or on a cell: its table row, `tr:has(…)`, its list item) plays an arrival once when it
    is added: `slide` (default) falls into place, `fade`, `flash` (an accent wash that fades) — chosen on any ancestor by
-   `data-kz-arrival`. `--kz-arrive-duration` sets the length. `.kz-grow` around a Sparkline (or any SVG with a stroke and
-   a fill) draws its stroke over `--kz-grow-duration` with `--kz-grow-ease`, and raises the fill. No movement of layout:
+   `data-kz-arrival`. `--kz-arrive-duration` sets the length. `.kz-grow` around a Sparkline (or any SVG chart) wipes it in from the left over `--kz-grow-duration` with `--kz-grow-ease`. No movement of layout:
    `translate`/`scale`/`opacity` only. Off screen they pause (`[data-offscreen]`), under reduced motion they rest done. */
 [data-kz-arrive], tr:has([data-kz-arrive]), li:has(> [data-kz-arrive]) {
   animation: kz-arrive-slide var(--kz-arrive-duration, 520ms) var(--kz-ease) both;
@@ -701,18 +700,11 @@ svg[data-kz-icon="ExternalIcon"] {
 @keyframes kz-arrive-slide { from { opacity: 0; translate: 0 -14px; } to { opacity: 1; translate: 0 0; } }
 @keyframes kz-arrive-fade { from { opacity: 0; } to { opacity: 1; } }
 @keyframes kz-arrive-flash { from { background: color-mix(in oklab, var(--kz-accent) 24%, transparent); } to { background: transparent; } }
-.kz-grow svg path[stroke]:not([stroke="none"]) {
-  stroke-dasharray: 1;
-  stroke-dashoffset: 1;
-  animation: kz-grow-draw var(--kz-grow-duration, 900ms) var(--kz-grow-ease, var(--kz-ease)) forwards;
+.kz-grow svg {
+  animation: kz-grow-wipe var(--kz-grow-duration, 900ms) var(--kz-grow-ease, var(--kz-ease)) backwards;
 }
-.kz-grow svg path[fill]:not([fill="none"]) {
-  transform-box: fill-box;
-  transform-origin: bottom;
-  animation: kz-grow-rise var(--kz-grow-duration, 900ms) var(--kz-grow-ease, var(--kz-ease)) backwards;
-}
-@keyframes kz-grow-draw { to { stroke-dashoffset: 0; } }
-@keyframes kz-grow-rise { from { opacity: 0; scale: 1 0.2; } to { opacity: 1; scale: 1 1; } }
+/* A wipe from the left: the whole chart (line, area, bars) is revealed as one — no per-path trick, so it works on any SVG chart. */
+@keyframes kz-grow-wipe { from { clip-path: inset(-4px 100% -4px -4px); } to { clip-path: inset(-4px -4px -4px -4px); } }
 
 @media (prefers-reduced-motion: reduce) {
   .kz-page, .kz-word, .kz-gradient-text, .kz-marquee, .kz-backdrop-drift, .kz-overlay, .kz-dialog, .kz-pop, .kz-fade, .kz-progress,
@@ -730,6 +722,5 @@ svg[data-kz-icon="ExternalIcon"] {
   .kz-count-digit > span { transition: none; }
   /* The still frame is a composed picture, not a cut animation: particles rest along their link, labels show. */
   .kz-iso-item > .kz-iso-lift, .kz-iso-tip { transition: none; }
-  [data-kz-arrive], tr:has([data-kz-arrive]), li:has(> [data-kz-arrive]), .kz-grow svg path { animation: none !important; }
-  .kz-grow svg path[stroke]:not([stroke="none"]) { stroke-dashoffset: 0; }
+  [data-kz-arrive], tr:has([data-kz-arrive]), li:has(> [data-kz-arrive]), .kz-grow svg { animation: none !important; }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/ui",
-  "version": "3.33.0",
+  "version": "3.33.1",
   "description": "The Krizaka front-end platform's components: the primitives (button, card, dialog, toast, menu, field, tabs, chip, switch, slider, command palette, theme, countdown…) on the semantic --kz-* tokens, the animated marks (Krizaka, Orazaka, Orochia, Yasakia, Yororis) and the motion signature — web and /native.",
   "keywords": [
     "krizaka",
@@ -721,7 +721,7 @@
   ],
   "peerDependencies": {
     "@krizaka/query": ">=0.2.1",
-    "@krizaka/tailwind": ">=3.33.0",
+    "@krizaka/tailwind": ">=3.33.1",
     "@maplibre/maplibre-react-native": ">=11",
     "@shopify/flash-list": ">=2",
     "expo-camera": ">=16",
@@ -2464,9 +2464,9 @@
     "radix-ui": "^1.7.0",
     "sonner": "^2.0.8",
     "tailwind-variants": "^3.3.1",
+    "@krizaka/tokens": "^3.33.1",
     "@krizaka/intl": "^0.2.1",
-    "@krizaka/pacer": "^0.1.0",
-    "@krizaka/tokens": "^3.33.0"
+    "@krizaka/pacer": "^0.1.0"
   },
   "scripts": {
     "build": "node -e \"const fs=require('node:fs');fs.rmSync('dist',{recursive:true,force:true});for(const f of fs.readdirSync('registry/examples',{recursive:true}))if(/\\.(js|d\\.ts)$/.test(f))fs.rmSync('registry/examples/'+f)\" && tsup && node -e \"require('node:fs').copyFileSync('src/motion.css','dist/motion.css');require('node:fs').copyFileSync('src/blocks.css','dist/blocks.css');require('node:fs').copyFileSync('src/story.css','dist/story.css')\" && node scripts/build-registry.mjs",

package/registry/button.json

@@ -339,7 +339,7 @@
         "description": "`sm`, `md` (default) and `lg`.",
         "path": "examples/button/sizes.tsx",
         "module": "@krizaka/ui/registry/examples/button/sizes",
-        "code": "import { Button } from \"@krizaka/ui/button\";\n\nexport default function ButtonSizes() {\n  return (\n    <div className=\"flex items-center gap-3\">\n      <Button variant=\"primary\" size=\"sm\">\n        Continue\n      </Button>\n      <Button variant=\"primary\" size=\"md\">\n        Continue\n      </Button>\n      <Button variant=\"primary\" size=\"lg\">\n        Continue\n      </Button>\n    </div>\n  );\n}\n"
+        "code": "import { Button } from \"@krizaka/ui/button\";\n\nexport default function ButtonSizes() {\n  return (\n    <div className=\"flex flex-wrap items-center gap-3\">\n      <Button variant=\"primary\" size=\"sm\">\n        Continue\n      </Button>\n      <Button variant=\"primary\" size=\"md\">\n        Continue\n      </Button>\n      <Button variant=\"primary\" size=\"lg\">\n        Continue\n      </Button>\n    </div>\n  );\n}\n"
       },
       {
         "name": "pill",

package/registry/examples/button/sizes.js

@@ -4,7 +4,7 @@
 import { Button } from "@krizaka/ui/button";
 import { jsx, jsxs } from "react/jsx-runtime";
 function ButtonSizes() {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
     /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", children: "Continue" }),
     /* @__PURE__ */ jsx(Button, { variant: "primary", size: "md", children: "Continue" }),
     /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", children: "Continue" })

package/registry/examples/button/sizes.tsx

@@ -2,7 +2,7 @@ import { Button } from "@krizaka/ui/button";
 
 export default function ButtonSizes() {
   return (
-    <div className="flex items-center gap-3">
+    <div className="flex flex-wrap items-center gap-3">
       <Button variant="primary" size="sm">
         Continue
       </Button>

package/registry/index.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/ui",
-  "version": "3.33.0",
+  "version": "3.33.1",
   "templatePurposes": {
     "convince": {
       "title": "Convince",
@@ -3017,7 +3017,7 @@
         "native": 2
       },
       "dependencies": [
-        "@krizaka/tokens@^3.33.0",
+        "@krizaka/tokens@^3.33.1",
         "@protomaps/basemaps@5.7.2",
         "tailwind-variants@^3.3.1"
       ],
@@ -3456,7 +3456,7 @@
         "native": 0
       },
       "dependencies": [
-        "@krizaka/tokens@^3.33.0",
+        "@krizaka/tokens@^3.33.1",
         "radix-ui@^1.7.0",
         "tailwind-variants@^3.3.1"
       ],
@@ -4088,7 +4088,7 @@
         "native": 0
       },
       "dependencies": [
-        "@krizaka/tokens@^3.33.0",
+        "@krizaka/tokens@^3.33.1",
         "radix-ui@^1.7.0",
         "tailwind-variants@^3.3.1"
       ],
@@ -4431,7 +4431,7 @@
         "native": 0
       },
       "dependencies": [
-        "@krizaka/tokens@^3.33.0",
+        "@krizaka/tokens@^3.33.1",
         "radix-ui@^1.7.0",
         "tailwind-variants@^3.3.1"
       ],

package/registry/map.json

@@ -1060,7 +1060,7 @@
     }
   ],
   "dependencies": [
-    "@krizaka/tokens@^3.33.0",
+    "@krizaka/tokens@^3.33.1",
     "@protomaps/basemaps@5.7.2",
     "tailwind-variants@^3.3.1"
   ],

package/registry/nav-bar.json

@@ -618,7 +618,7 @@
     }
   ],
   "dependencies": [
-    "@krizaka/tokens@^3.33.0",
+    "@krizaka/tokens@^3.33.1",
     "radix-ui@^1.7.0",
     "tailwind-variants@^3.3.1"
   ],

package/registry/rail-nav.json

@@ -342,7 +342,7 @@
     }
   ],
   "dependencies": [
-    "@krizaka/tokens@^3.33.0",
+    "@krizaka/tokens@^3.33.1",
     "radix-ui@^1.7.0",
     "tailwind-variants@^3.3.1"
   ],

package/registry/site-footer.json

@@ -329,7 +329,7 @@
     }
   ],
   "dependencies": [
-    "@krizaka/tokens@^3.33.0",
+    "@krizaka/tokens@^3.33.1",
     "radix-ui@^1.7.0",
     "tailwind-variants@^3.3.1"
   ],