@krizaka/ui 3.30.0 → 3.31.0

package/registry/split-view.json

@@ -136,7 +136,7 @@
         "why": "A person reads a thread and replies without leaving the list of conversations.",
         "path": "examples/split-view/messages.tsx",
         "module": "@krizaka/ui/registry/examples/split-view/messages",
-        "code": "import { Avatar } from \"@krizaka/ui/avatar\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { Field, Textarea } from \"@krizaka/ui/field\";\nimport { SplitView } from \"@krizaka/ui/split-view\";\n\nconst THREADS = [\n  { id: \"lea\", name: \"Léa M.\", last: \"Will part 3 be out before Friday?\", time: \"09:12\", unread: true },\n  { id: \"samir\", name: \"Samir K.\", last: \"Thanks for the backstage cut!\", time: \"Yesterday\" },\n  { id: \"ines\", name: \"Inès B.\", last: \"I won the auction 🎉\", time: \"Mon\" },\n];\n\n// TEMPLATE — a creator's messages (Orochia): the threads beside the open one; on a phone the open thread replaces the\n// list (`showDetail`, from the address) with the way back above it. The reply box stays at the foot of the thread.\nexport default function SplitViewMessages() {\n  return (\n    <SplitView\n      className=\"w-full\"\n      listTitle=\"Messages\"\n      showDetail\n      back={<a href=\"#messages\" className=\"text-sm font-medium text-fg-secondary\">← Messages</a>}\n      list={\n        <ul>\n          {THREADS.map((t, i) => (\n            <li key={t.id}>\n              <a href={`#${t.id}`} aria-current={i === 0 ? \"page\" : undefined} className=\"flex items-center gap-3 border-b border-border-subtle px-4 py-3 text-sm no-underline hover:bg-surface-2 aria-[current=page]:bg-accent-soft\">\n                <Avatar fallback={t.name.slice(0, 2)} size=\"sm\" />\n                <span className=\"min-w-0 flex-1\">\n                  <span className=\"flex justify-between gap-2\"><span className=\"font-semibold text-fg\">{t.name}</span><span className=\"text-xs text-fg-secondary\">{t.time}</span></span>\n                  <span className={t.unread ? \"block truncate font-medium text-fg\" : \"block truncate text-fg-secondary\"}>{t.last}</span>\n                </span>\n              </a>\n            </li>\n          ))}\n        </ul>\n      }\n      detailHead={<span className=\"text-sm font-bold text-fg\">Léa M.</span>}\n      detail={\n        <div className=\"flex h-full flex-col gap-4\">\n          <p className=\"max-w-[80%] rounded-2xl rounded-bl-md bg-surface-2 px-3.5 py-2 text-sm text-fg\">Will part 3 be out before Friday?</p>\n          <p className=\"ml-auto max-w-[80%] rounded-2xl rounded-br-md bg-accent-soft px-3.5 py-2 text-sm text-fg\">Thursday evening — you'll be the first to know.</p>\n          <form className=\"mt-auto flex items-end gap-2\">\n            <Field.Root className=\"flex-1\">\n              <Field.Label htmlFor=\"reply\" className=\"sr-only\">Reply to Léa</Field.Label>\n              <Textarea id=\"reply\" rows={2} placeholder=\"Write a reply…\" />\n            </Field.Root>\n            <Button type=\"submit\" variant=\"primary\" shape=\"cut\">Send</Button>\n          </form>\n        </div>\n      }\n    />\n  );\n}\n"
+        "code": "import { Avatar } from \"@krizaka/ui/avatar\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { Field, Textarea } from \"@krizaka/ui/field\";\nimport { SplitView } from \"@krizaka/ui/split-view\";\n\nconst THREADS = [\n  { id: \"lea\", name: \"Léa M.\", last: \"Will part 3 be out before Friday?\", time: \"09:12\", unread: true },\n  { id: \"samir\", name: \"Samir K.\", last: \"Thanks for the backstage cut!\", time: \"Yesterday\" },\n  { id: \"ines\", name: \"Inès B.\", last: \"I won the auction 🎉\", time: \"Mon\" },\n];\n\n// TEMPLATE — a creator's messages (Orochia): the threads beside the open one; on a phone the open thread replaces the\n// list (`showDetail`, from the address) with the way back above it. The reply box stays at the foot of the thread.\nexport default function SplitViewMessages() {\n  return (\n    <SplitView\n      className=\"w-full\"\n      listTitle=\"Messages\"\n      showDetail\n      back={<a href=\"#messages\" className=\"text-sm font-medium text-fg-secondary\">← Messages</a>}\n      list={\n        <ul>\n          {THREADS.map((t, i) => (\n            <li key={t.id}>\n              <a href={`#${t.id}`} aria-current={i === 0 ? \"page\" : undefined} className=\"flex items-center gap-3 border-b border-border-subtle px-4 py-3 text-sm no-underline hover:bg-surface-2 aria-[current=page]:bg-accent-soft\">\n                <Avatar fallback={t.name.slice(0, 2)} size=\"sm\" />\n                <span className=\"min-w-0 flex-1\">\n                  <span className=\"flex justify-between gap-2\"><span className=\"font-semibold text-fg\">{t.name}</span><span className=\"text-xs text-fg-secondary\">{t.time}</span></span>\n                  <span className={t.unread ? \"block truncate font-medium text-fg\" : \"block truncate text-fg-secondary\"}>{t.last}</span>\n                </span>\n              </a>\n            </li>\n          ))}\n        </ul>\n      }\n      detailHead={<span className=\"text-sm font-bold text-fg\">Léa M.</span>}\n      detail={\n        <div className=\"flex h-full flex-col gap-4\">\n          <p className=\"max-w-[80%] rounded-2xl rounded-bl-md bg-surface-2 px-3.5 py-2 text-sm text-fg\">Will part 3 be out before Friday?</p>\n          <p className=\"ml-auto max-w-[80%] rounded-2xl rounded-br-md bg-accent-soft px-3.5 py-2 text-sm text-fg\">Thursday evening — you'll be the first to know.</p>\n          <form className=\"mt-auto flex items-end gap-2\">\n            <Field.Root className=\"flex-1\">\n              <Field.Label htmlFor=\"reply\" className=\"sr-only\">Reply to Léa</Field.Label>\n              <Textarea id=\"reply\" rows={2} placeholder=\"Write a reply…\" />\n            </Field.Root>\n            <Button type=\"submit\" variant=\"primary\">Send</Button>\n          </form>\n        </div>\n      }\n    />\n  );\n}\n"
       },
       {
         "name": "empty",
@@ -195,7 +195,7 @@
   "registryDependencies": [],
   "demo": {
     "path": "examples/split-view/messages.tsx",
-    "content": "import { Avatar } from \"@krizaka/ui/avatar\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { Field, Textarea } from \"@krizaka/ui/field\";\nimport { SplitView } from \"@krizaka/ui/split-view\";\n\nconst THREADS = [\n  { id: \"lea\", name: \"Léa M.\", last: \"Will part 3 be out before Friday?\", time: \"09:12\", unread: true },\n  { id: \"samir\", name: \"Samir K.\", last: \"Thanks for the backstage cut!\", time: \"Yesterday\" },\n  { id: \"ines\", name: \"Inès B.\", last: \"I won the auction 🎉\", time: \"Mon\" },\n];\n\n// TEMPLATE — a creator's messages (Orochia): the threads beside the open one; on a phone the open thread replaces the\n// list (`showDetail`, from the address) with the way back above it. The reply box stays at the foot of the thread.\nexport default function SplitViewMessages() {\n  return (\n    <SplitView\n      className=\"w-full\"\n      listTitle=\"Messages\"\n      showDetail\n      back={<a href=\"#messages\" className=\"text-sm font-medium text-fg-secondary\">← Messages</a>}\n      list={\n        <ul>\n          {THREADS.map((t, i) => (\n            <li key={t.id}>\n              <a href={`#${t.id}`} aria-current={i === 0 ? \"page\" : undefined} className=\"flex items-center gap-3 border-b border-border-subtle px-4 py-3 text-sm no-underline hover:bg-surface-2 aria-[current=page]:bg-accent-soft\">\n                <Avatar fallback={t.name.slice(0, 2)} size=\"sm\" />\n                <span className=\"min-w-0 flex-1\">\n                  <span className=\"flex justify-between gap-2\"><span className=\"font-semibold text-fg\">{t.name}</span><span className=\"text-xs text-fg-secondary\">{t.time}</span></span>\n                  <span className={t.unread ? \"block truncate font-medium text-fg\" : \"block truncate text-fg-secondary\"}>{t.last}</span>\n                </span>\n              </a>\n            </li>\n          ))}\n        </ul>\n      }\n      detailHead={<span className=\"text-sm font-bold text-fg\">Léa M.</span>}\n      detail={\n        <div className=\"flex h-full flex-col gap-4\">\n          <p className=\"max-w-[80%] rounded-2xl rounded-bl-md bg-surface-2 px-3.5 py-2 text-sm text-fg\">Will part 3 be out before Friday?</p>\n          <p className=\"ml-auto max-w-[80%] rounded-2xl rounded-br-md bg-accent-soft px-3.5 py-2 text-sm text-fg\">Thursday evening — you'll be the first to know.</p>\n          <form className=\"mt-auto flex items-end gap-2\">\n            <Field.Root className=\"flex-1\">\n              <Field.Label htmlFor=\"reply\" className=\"sr-only\">Reply to Léa</Field.Label>\n              <Textarea id=\"reply\" rows={2} placeholder=\"Write a reply…\" />\n            </Field.Root>\n            <Button type=\"submit\" variant=\"primary\" shape=\"cut\">Send</Button>\n          </form>\n        </div>\n      }\n    />\n  );\n}\n"
+    "content": "import { Avatar } from \"@krizaka/ui/avatar\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { Field, Textarea } from \"@krizaka/ui/field\";\nimport { SplitView } from \"@krizaka/ui/split-view\";\n\nconst THREADS = [\n  { id: \"lea\", name: \"Léa M.\", last: \"Will part 3 be out before Friday?\", time: \"09:12\", unread: true },\n  { id: \"samir\", name: \"Samir K.\", last: \"Thanks for the backstage cut!\", time: \"Yesterday\" },\n  { id: \"ines\", name: \"Inès B.\", last: \"I won the auction 🎉\", time: \"Mon\" },\n];\n\n// TEMPLATE — a creator's messages (Orochia): the threads beside the open one; on a phone the open thread replaces the\n// list (`showDetail`, from the address) with the way back above it. The reply box stays at the foot of the thread.\nexport default function SplitViewMessages() {\n  return (\n    <SplitView\n      className=\"w-full\"\n      listTitle=\"Messages\"\n      showDetail\n      back={<a href=\"#messages\" className=\"text-sm font-medium text-fg-secondary\">← Messages</a>}\n      list={\n        <ul>\n          {THREADS.map((t, i) => (\n            <li key={t.id}>\n              <a href={`#${t.id}`} aria-current={i === 0 ? \"page\" : undefined} className=\"flex items-center gap-3 border-b border-border-subtle px-4 py-3 text-sm no-underline hover:bg-surface-2 aria-[current=page]:bg-accent-soft\">\n                <Avatar fallback={t.name.slice(0, 2)} size=\"sm\" />\n                <span className=\"min-w-0 flex-1\">\n                  <span className=\"flex justify-between gap-2\"><span className=\"font-semibold text-fg\">{t.name}</span><span className=\"text-xs text-fg-secondary\">{t.time}</span></span>\n                  <span className={t.unread ? \"block truncate font-medium text-fg\" : \"block truncate text-fg-secondary\"}>{t.last}</span>\n                </span>\n              </a>\n            </li>\n          ))}\n        </ul>\n      }\n      detailHead={<span className=\"text-sm font-bold text-fg\">Léa M.</span>}\n      detail={\n        <div className=\"flex h-full flex-col gap-4\">\n          <p className=\"max-w-[80%] rounded-2xl rounded-bl-md bg-surface-2 px-3.5 py-2 text-sm text-fg\">Will part 3 be out before Friday?</p>\n          <p className=\"ml-auto max-w-[80%] rounded-2xl rounded-br-md bg-accent-soft px-3.5 py-2 text-sm text-fg\">Thursday evening — you'll be the first to know.</p>\n          <form className=\"mt-auto flex items-end gap-2\">\n            <Field.Root className=\"flex-1\">\n              <Field.Label htmlFor=\"reply\" className=\"sr-only\">Reply to Léa</Field.Label>\n              <Textarea id=\"reply\" rows={2} placeholder=\"Write a reply…\" />\n            </Field.Root>\n            <Button type=\"submit\" variant=\"primary\">Send</Button>\n          </form>\n        </div>\n      }\n    />\n  );\n}\n"
   },
   "props": [
     {

package/registry/status-page.json

@@ -161,7 +161,7 @@
         "why": "A visitor learns honestly what is coming, how far it is and how to hear about it.",
         "path": "examples/status-page/building.tsx",
         "module": "@krizaka/ui/registry/examples/status-page/building",
-        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\nimport { Progress } from \"@krizaka/ui/progress\";\nimport { StatusPage } from \"@krizaka/ui/status-page\";\n\n// TEMPLATE — « under construction »: what is coming, said honestly — its state in words, its progress, how to hear\n// about it — the duck that builds beside it. Never a fake screen.\nexport default function StatusPageBuilding() {\n  return (\n    <StatusPage\n      eyebrow=\"Yasakia\"\n      title=\"On its way\"\n      lead=\"Meet by talking first. The first build reaches testers this winter.\"\n      aside={<Mascot bird=\"duck\" mood=\"thinking\" size={112} />}\n      state=\"building\"\n      stateLabel=\"In construction\"\n      checked=\"Updated this week\"\n    >\n      <div className=\"flex max-w-md flex-col gap-4\">\n        <Progress value={40} label=\"First build\" showLabel valueText=\"4 of 10 milestones\" />\n        <Button variant=\"primary\" shape=\"cut\" className=\"w-fit\">Tell me when it is ready</Button>\n      </div>\n    </StatusPage>\n  );\n}\n"
+        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\nimport { Progress } from \"@krizaka/ui/progress\";\nimport { StatusPage } from \"@krizaka/ui/status-page\";\n\n// TEMPLATE — « under construction »: what is coming, said honestly — its state in words, its progress, how to hear\n// about it — the duck that builds beside it. Never a fake screen.\nexport default function StatusPageBuilding() {\n  return (\n    <StatusPage\n      eyebrow=\"Yasakia\"\n      title=\"On its way\"\n      lead=\"Meet by talking first. The first build reaches testers this winter.\"\n      aside={<Mascot bird=\"duck\" mood=\"thinking\" size={112} />}\n      state=\"building\"\n      stateLabel=\"In construction\"\n      checked=\"Updated this week\"\n    >\n      <div className=\"flex max-w-md flex-col gap-4\">\n        <Progress value={40} label=\"First build\" showLabel valueText=\"4 of 10 milestones\" />\n        <Button variant=\"primary\" className=\"w-fit\">Tell me when it is ready</Button>\n      </div>\n    </StatusPage>\n  );\n}\n"
       },
       {
         "name": "maintenance",

package/registry/sticky-action.json

@@ -67,7 +67,7 @@
         "description": "A scrolling page with its one action stuck to the bottom edge.",
         "path": "examples/sticky-action/phone.tsx",
         "module": "@krizaka/ui/registry/examples/sticky-action/phone",
-        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { StickyAction } from \"@krizaka/ui/sticky-action\";\n\n// The last child of the page's main: on a phone it holds the bottom edge; from md up it is not drawn.\nexport default function StickyActionPhone() {\n  return (\n    <main className=\"flex h-[28rem] flex-col overflow-auto\">\n      <p className=\"m-0 h-[40rem] p-4 text-fg-secondary\">The page scrolls here…</p>\n      <StickyAction>\n        <Button size=\"lg\" shape=\"cut\" variant=\"primary\">Book</Button>\n      </StickyAction>\n    </main>\n  );\n}\n"
+        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { StickyAction } from \"@krizaka/ui/sticky-action\";\n\n// The last child of the page's main: on a phone it holds the bottom edge; from md up it is not drawn.\nexport default function StickyActionPhone() {\n  return (\n    <main className=\"flex h-[28rem] flex-col overflow-auto\">\n      <p className=\"m-0 h-[40rem] p-4 text-fg-secondary\">The page scrolls here…</p>\n      <StickyAction>\n        <Button size=\"lg\" variant=\"primary\">Book</Button>\n      </StickyAction>\n    </main>\n  );\n}\n"
       }
     ]
   },
@@ -96,7 +96,7 @@
   "registryDependencies": [],
   "demo": {
     "path": "examples/sticky-action/phone.tsx",
-    "content": "import { Button } from \"@krizaka/ui/button\";\nimport { StickyAction } from \"@krizaka/ui/sticky-action\";\n\n// The last child of the page's main: on a phone it holds the bottom edge; from md up it is not drawn.\nexport default function StickyActionPhone() {\n  return (\n    <main className=\"flex h-[28rem] flex-col overflow-auto\">\n      <p className=\"m-0 h-[40rem] p-4 text-fg-secondary\">The page scrolls here…</p>\n      <StickyAction>\n        <Button size=\"lg\" shape=\"cut\" variant=\"primary\">Book</Button>\n      </StickyAction>\n    </main>\n  );\n}\n"
+    "content": "import { Button } from \"@krizaka/ui/button\";\nimport { StickyAction } from \"@krizaka/ui/sticky-action\";\n\n// The last child of the page's main: on a phone it holds the bottom edge; from md up it is not drawn.\nexport default function StickyActionPhone() {\n  return (\n    <main className=\"flex h-[28rem] flex-col overflow-auto\">\n      <p className=\"m-0 h-[40rem] p-4 text-fg-secondary\">The page scrolls here…</p>\n      <StickyAction>\n        <Button size=\"lg\" variant=\"primary\">Book</Button>\n      </StickyAction>\n    </main>\n  );\n}\n"
   },
   "props": [
     {

package/registry/update-prompt.json

@@ -236,7 +236,7 @@
     },
     {
       "path": "update-prompt/update-prompt.tsx",
-      "content": "// Server-safe. The soft invitation to update: a dismissible banner, in the flow of the page, never a blocker.\n// Every word is a prop (the app passes them translated); the version and the store URL come from `useAppConfig`.\nimport { Button } from \"@krizaka/ui/button\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const updatePrompt = tv({\n  slots: {\n    root: \"flex w-full flex-wrap items-center gap-3 rounded-xl border border-border-default bg-surface-1 p-4 text-sm text-fg\",\n    mark: \"flex h-10 w-10 shrink-0 items-center justify-center [&>svg]:h-10 [&>svg]:w-10\",\n    content: \"flex min-w-0 flex-1 flex-col gap-0.5\",\n    title: \"font-semibold text-fg\",\n    message: \"text-fg-secondary\",\n    version: \"font-mono text-xs text-fg-tertiary\",\n    actions: \"flex shrink-0 items-center gap-2\",\n  },\n});\n\nexport type UpdatePromptProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** The headline (“A new version is available”). */\n  title: React.ReactNode;\n  /** Why update, in a sentence — the backend's localized `message`. */\n  message?: React.ReactNode;\n  /** The versions, in words and mono (“1.2.0 → 1.4.0”). */\n  versionLabel?: React.ReactNode;\n  /** The product's mark (decorative), e.g. `<OrazakaLogo />`. */\n  mark?: React.ReactNode;\n  /** The button that updates (“Update”). */\n  updateLabel: string;\n  /** Opens the store page, or reloads the app on the new version. */\n  onUpdate: () => void;\n  /** The way out (“Later”). */\n  laterLabel: string;\n  /** Called by the way out: the hook remembers it for this version. */\n  onLater: () => void;\n};\n\n/** The soft update: an invitation that can be dismissed, announced politely. */\nexport function UpdatePrompt({ title, message, versionLabel, mark, updateLabel, onUpdate, laterLabel, onLater, className, ...props }: UpdatePromptProps) {\n  const s = updatePrompt();\n  return (\n    <section role=\"region\" aria-label={typeof title === \"string\" ? title : undefined} data-kind=\"update-soft\" className={s.root({ className })} {...props}>\n      {mark && (\n        <div aria-hidden className={s.mark()}>\n          {mark}\n        </div>\n      )}\n      <div className={s.content()}>\n        <p className={s.title()}>{title}</p>\n        {message && <p className={s.message()}>{message}</p>}\n        {versionLabel && <p className={s.version()}>{versionLabel}</p>}\n      </div>\n      <div className={s.actions()}>\n        <Button variant=\"ghost\" size=\"sm\" onClick={onLater}>\n          {laterLabel}\n        </Button>\n        <Button variant=\"primary\" size=\"sm\" shape=\"cut\" onClick={onUpdate}>\n          {updateLabel}\n        </Button>\n      </div>\n    </section>\n  );\n}\n"
+      "content": "// Server-safe. The soft invitation to update: a dismissible banner, in the flow of the page, never a blocker.\n// Every word is a prop (the app passes them translated); the version and the store URL come from `useAppConfig`.\nimport { Button } from \"@krizaka/ui/button\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const updatePrompt = tv({\n  slots: {\n    root: \"flex w-full flex-wrap items-center gap-3 rounded-xl border border-border-default bg-surface-1 p-4 text-sm text-fg\",\n    mark: \"flex h-10 w-10 shrink-0 items-center justify-center [&>svg]:h-10 [&>svg]:w-10\",\n    content: \"flex min-w-0 flex-1 flex-col gap-0.5\",\n    title: \"font-semibold text-fg\",\n    message: \"text-fg-secondary\",\n    version: \"font-mono text-xs text-fg-tertiary\",\n    actions: \"flex shrink-0 items-center gap-2\",\n  },\n});\n\nexport type UpdatePromptProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** The headline (“A new version is available”). */\n  title: React.ReactNode;\n  /** Why update, in a sentence — the backend's localized `message`. */\n  message?: React.ReactNode;\n  /** The versions, in words and mono (“1.2.0 → 1.4.0”). */\n  versionLabel?: React.ReactNode;\n  /** The product's mark (decorative), e.g. `<OrazakaLogo />`. */\n  mark?: React.ReactNode;\n  /** The button that updates (“Update”). */\n  updateLabel: string;\n  /** Opens the store page, or reloads the app on the new version. */\n  onUpdate: () => void;\n  /** The way out (“Later”). */\n  laterLabel: string;\n  /** Called by the way out: the hook remembers it for this version. */\n  onLater: () => void;\n};\n\n/** The soft update: an invitation that can be dismissed, announced politely. */\nexport function UpdatePrompt({ title, message, versionLabel, mark, updateLabel, onUpdate, laterLabel, onLater, className, ...props }: UpdatePromptProps) {\n  const s = updatePrompt();\n  return (\n    <section role=\"region\" aria-label={typeof title === \"string\" ? title : undefined} data-kind=\"update-soft\" className={s.root({ className })} {...props}>\n      {mark && (\n        <div aria-hidden className={s.mark()}>\n          {mark}\n        </div>\n      )}\n      <div className={s.content()}>\n        <p className={s.title()}>{title}</p>\n        {message && <p className={s.message()}>{message}</p>}\n        {versionLabel && <p className={s.version()}>{versionLabel}</p>}\n      </div>\n      <div className={s.actions()}>\n        <Button variant=\"ghost\" size=\"sm\" onClick={onLater}>\n          {laterLabel}\n        </Button>\n        <Button variant=\"primary\" size=\"sm\" onClick={onUpdate}>\n          {updateLabel}\n        </Button>\n      </div>\n    </section>\n  );\n}\n"
     }
   ],
   "dependencies": [

package/registry/video-player.json

@@ -432,7 +432,7 @@
     },
     {
       "path": "video-player/video-player.tsx",
-      "content": "// Client. A `<video>` with its own controls, accessible from end to end: a named region the keyboard reaches (Space /\n// K, arrows, J / L, M, F, C, Home / End, 0–9), every button named by a prop, the seek and volume sliders of\n// `@krizaka/ui/slider` with the time read aloud. HLS plays natively where the browser can (Safari, iOS) and through\n// hls.js elsewhere — loaded only then, by the app's `loadHls` (`() => import(\"hls.js\")`): an optional peer, never in\n// the bundle of a page that does not play HLS. A signed address can be resolved at the last moment (`src` as a\n// function), again after an error; the video pauses when it leaves the screen; autoplay waits under reduced motion.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { CaptionsGlyph, FullscreenGlyph, PauseGlyph, PipGlyph, PlayGlyph, RetryGlyph, VolumeGlyph } from \"../glyphs\";\nimport { clamp, formatClock, playSafely, useInView, usePrefersReducedMotion } from \"../media\";\nimport { Slider } from \"../slider\";\n\nexport const videoPlayer = tv({\n  slots: {\n    root:\n      \"theme-dark group/player relative isolate w-full overflow-hidden rounded-xl bg-media text-fg-on-media \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-[idle]:cursor-none\",\n    video: \"absolute inset-0 h-full w-full object-contain\",\n    poster: \"pointer-events-none absolute inset-0 h-full w-full object-contain\",\n    big:\n      \"absolute left-1/2 top-1/2 z-10 inline-flex h-16 w-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full \" +\n      \"bg-scrim-strong text-fg-on-media shadow-lg backdrop-blur-sm transition-transform hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    bar:\n      \"absolute inset-x-0 bottom-0 z-20 flex flex-col gap-1 bg-linear-to-t from-scrim-strong via-scrim to-transparent px-3 pb-2 pt-10 \" +\n      \"transition-opacity duration-300 motion-reduce:transition-none group-data-[idle]/player:opacity-0 group-focus-within/player:opacity-100\",\n    row: \"flex items-center gap-1\",\n    button:\n      \"inline-flex h-9 min-w-9 shrink-0 items-center justify-center gap-1 rounded-md px-1.5 text-xs font-semibold text-fg-on-media \" +\n      \"transition-colors hover:bg-fg-on-media/15 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-pressed:bg-fg-on-media/20\",\n    time: \"px-1.5 font-mono text-[11px] tabular-nums text-fg-on-media\",\n    volume: \"hidden w-20 items-center sm:flex\",\n    status: \"absolute inset-0 z-30 flex flex-col items-center justify-center gap-3 bg-scrim-strong p-6 text-center text-sm\",\n    spinner: \"h-10 w-10 animate-spin rounded-full border-2 border-fg-on-media/30 border-t-fg-on-media motion-reduce:animate-none\",\n    overlay: \"absolute inset-0 z-30\",\n  },\n});\n\n/** What `loadHls` resolves to: the module of hls.js (only the members the player uses are typed). */\nexport type HlsModule = {\n  default: {\n    new (config?: Record<string, unknown>): {\n      loadSource(url: string): void;\n      attachMedia(media: HTMLMediaElement): void;\n      destroy(): void;\n      startLoad(): void;\n      recoverMediaError(): void;\n      on(event: string, listener: (event: string, data: { fatal?: boolean; type?: string }) => void): void;\n    };\n    isSupported(): boolean;\n    Events: { ERROR: string };\n    ErrorTypes: { NETWORK_ERROR: string; MEDIA_ERROR: string };\n  };\n};\n\nexport type VideoTrack = {\n  /** The WebVTT file. */\n  src: string;\n  /** Its language, BCP 47 (`\"fr\"`). */\n  srcLang: string;\n  /** Its name in the menu (\"Français\"), passed translated. */\n  label: string;\n  /** `subtitles` (default) or `captions` (with the sounds, for deaf viewers). */\n  kind?: \"subtitles\" | \"captions\";\n  /** Shown from the start. */\n  default?: boolean;\n};\n\nexport type VideoPlayerLabels = {\n  play: string;\n  pause: string;\n  mute: string;\n  unmute: string;\n  volume: string;\n  seek: string;\n  /** The speed button: `(rate) => \"Speed \" + rate + \"×\"`. */\n  speed: (rate: number) => string;\n  /** The captions button: `(track) => \"Subtitles: \" + (track ?? \"off\")`, the track's label or `null` when off. */\n  captions: (track: string | null) => string;\n  fullscreen: string;\n  exitFullscreen: string;\n  pictureInPicture: string;\n  /** Read while the video waits for data. */\n  loading: string;\n  /** The video cannot play. */\n  error: string;\n  /** Tries again (resolves a signed `src` again). */\n  retry: string;\n  /** The seek slider's value: `(time, duration) => \"1:05 of 3:20\"`. */\n  time: (time: string, duration: string) => string;\n};\n\nexport const videoPlayerLabels: VideoPlayerLabels = {\n  play: \"Play\",\n  pause: \"Pause\",\n  mute: \"Mute\",\n  unmute: \"Unmute\",\n  volume: \"Volume\",\n  seek: \"Seek\",\n  speed: (rate) => `Speed ${rate}×`,\n  captions: (track) => `Subtitles: ${track ?? \"off\"}`,\n  fullscreen: \"Full screen\",\n  exitFullscreen: \"Exit full screen\",\n  pictureInPicture: \"Picture in picture\",\n  loading: \"Loading\",\n  error: \"This video cannot be played.\",\n  retry: \"Try again\",\n  time: (time, duration) => `${time} of ${duration}`,\n};\n\nexport type VideoPlayerProps = {\n  /** The address of the video (MP4, WebM, or an HLS `.m3u8`), or a function that resolves a signed one when needed. */\n  src: string | (() => Promise<string>);\n  /** `auto` (default): HLS when the address ends in `.m3u8`. */\n  type?: \"auto\" | \"hls\" | \"file\";\n  /** Loads hls.js when the browser cannot play HLS itself: `() => import(\"hls.js\")`. Without it, HLS needs Safari. */\n  loadHls?: () => Promise<HlsModule>;\n  /** The accessible name of the player (\"Video: Sunset over Montréal\"), passed translated. */\n  title: string;\n  /** The picture shown before playback. */\n  poster?: string;\n  /** Starts playing, muted (browsers refuse sound without a gesture), once on screen and again each time it comes back — not under reduced motion. */\n  autoPlay?: boolean;\n  /** Starts muted. */\n  muted?: boolean;\n  /** Plays again from the start at the end. */\n  loop?: boolean;\n  /** How much to fetch before playback: `none` (a list of many videos), `metadata` (default), `auto`. */\n  preload?: \"none\" | \"metadata\" | \"auto\";\n  /** Subtitles or captions (WebVTT): the C key and a button cycle through them. */\n  tracks?: readonly VideoTrack[];\n  /** The speeds offered by the speed button. Default `[0.5, 1, 1.25, 1.5, 2]`. */\n  playbackRates?: readonly number[];\n  /** Pauses when less than a quarter of the player is on screen. Default `true`. */\n  pauseWhenHidden?: boolean;\n  /** Shows the controls (default). `false`: a bare video (a background loop) — give it no sound. */\n  controls?: boolean;\n  /** Covers the video and hides the controls: a gate (sign in, unlock, age check) drawn by the app. */\n  overlay?: React.ReactNode;\n  /** The width / height ratio of the frame. Default `\"16 / 9\"`; `\"9 / 16\"` for a vertical video. */\n  aspectRatio?: string;\n  /** Called when playback starts. */\n  onPlay?: () => void;\n  /** Called when playback pauses. */\n  onPause?: () => void;\n  /** Called at the end. */\n  onEnded?: () => void;\n  /** Called as the time moves, in seconds (a few times a second). */\n  onTimeUpdate?: (time: number) => void;\n  /** Called when the video cannot play (a network failure, an expired address). */\n  onError?: (error: unknown) => void;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<VideoPlayerLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\nconst RATES = [0.5, 1, 1.25, 1.5, 2] as const;\nconst isHls = (url: string, type: VideoPlayerProps[\"type\"]) => type === \"hls\" || (type !== \"file\" && /\\.m3u8(\\?|#|$)/i.test(url));\n\n/** Shows the text track `index` of a video (and hides the others); -1 hides them all. */\nfunction showTrack(element: HTMLVideoElement, index: number) {\n  const list = element.textTracks;\n  for (let i = 0; i < list.length; i += 1) list[i]!.mode = i === index ? \"showing\" : \"disabled\";\n}\n\n/** A video player with accessible controls, HLS on demand, signed sources, subtitles, speed, full screen. */\nexport function VideoPlayer({\n  src,\n  type = \"auto\",\n  loadHls,\n  title,\n  poster,\n  autoPlay,\n  muted: initiallyMuted = false,\n  loop,\n  preload = \"metadata\",\n  tracks = [],\n  playbackRates = RATES,\n  pauseWhenHidden = true,\n  controls = true,\n  overlay,\n  aspectRatio = \"16 / 9\",\n  onPlay,\n  onPause,\n  onEnded,\n  onTimeUpdate,\n  onError,\n  labels: given,\n  className,\n}: VideoPlayerProps) {\n  const labels = { ...videoPlayerLabels, ...given };\n  const s = videoPlayer();\n  const root = React.useRef<HTMLDivElement>(null);\n  const video = React.useRef<HTMLVideoElement>(null);\n  const reduce = usePrefersReducedMotion();\n  const [resolved, setResolved] = React.useState<{ attempt: number; url: string } | null>(null);\n  const [attempt, setAttempt] = React.useState(0);\n  const [wanted, setWanted] = React.useState(false);\n  const [playing, setPlaying] = React.useState(false);\n  const [time, setTime] = React.useState(0);\n  const [duration, setDuration] = React.useState(0);\n  const [volume, setVolume] = React.useState(1);\n  const [muted, setMuted] = React.useState(initiallyMuted || Boolean(autoPlay));\n  const [rate, setRate] = React.useState(1);\n  const [caption, setCaption] = React.useState(() => tracks.findIndex((t) => t.default));\n  const [fullscreen, setFullscreen] = React.useState(false);\n  const [waiting, setWaiting] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n  const [idle, setIdle] = React.useState(false);\n  // The poster is an image over the video until the first play: it loads like any image (lazy, decoded once), the\n  // same in every browser — the `poster` attribute is painted late and differently.\n  const [started, setStarted] = React.useState(false);\n  const idleTimer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const url = typeof src === \"string\" ? src : resolved?.attempt === attempt ? resolved.url : null;\n  const needSource = typeof src === \"function\" && (preload !== \"none\" || wanted || (autoPlay && !reduce));\n\n  // A signed source is resolved when it is needed, and again on \"Try again\".\n  React.useEffect(() => {\n    if (typeof src !== \"function\" || !needSource) return;\n    let live = true;\n    src().then(\n      (next) => live && setResolved({ attempt, url: next }),\n      (error: unknown) => {\n        if (!live) return;\n        setFailed(true);\n        onError?.(error);\n      },\n    );\n    return () => {\n      live = false;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- `onError` is a callback, not a reason to resolve again\n  }, [src, needSource, attempt]);\n\n  // Attaches the source: natively, or through hls.js when the browser needs it.\n  React.useEffect(() => {\n    const element = video.current;\n    if (!element || !url) return;\n    let hls: InstanceType<HlsModule[\"default\"]> | null = null;\n    let live = true;\n    const fail = (error: unknown) => {\n      if (!live) return;\n      setFailed(true);\n      onError?.(error);\n    };\n    if (isHls(url, type) && !element.canPlayType(\"application/vnd.apple.mpegurl\")) {\n      if (!loadHls) fail(new Error(\"VideoPlayer: HLS needs `loadHls` in this browser.\"));\n      else\n        loadHls().then(({ default: Hls }) => {\n          if (!live) return;\n          if (!Hls.isSupported()) return fail(new Error(\"VideoPlayer: HLS is not supported here.\"));\n          hls = new Hls({ enableWorker: true, backBufferLength: 60 });\n          hls.on(Hls.Events.ERROR, (_event, data) => {\n            if (!data.fatal) return;\n            if (data.type === Hls.ErrorTypes.NETWORK_ERROR) hls?.startLoad();\n            else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) hls?.recoverMediaError();\n            else fail(data);\n          });\n          hls.loadSource(url);\n          hls.attachMedia(element);\n        }, fail);\n    } else element.src = url;\n    return () => {\n      live = false;\n      hls?.destroy();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- `onError` and `loadHls` are callbacks\n  }, [url, type]);\n\n  // An autoplay waits for the player to be on screen (nothing is fetched before, with `preload=\"none\"`), and plays\n  // again each time it comes back: a page of loops costs only the ones in view.\n  const [inView, setInView] = React.useState(() => !pauseWhenHidden || typeof IntersectionObserver === \"undefined\");\n\n  // Plays once the source is there, when it was asked for (a click before a signed source resolved).\n  React.useEffect(() => {\n    const element = video.current;\n    if (!element || !url || !wanted) return;\n    playSafely(element);\n  }, [url, wanted]);\n\n  // An autoplay: while in view, never under reduced motion.\n  React.useEffect(() => {\n    const element = video.current;\n    if (!element || !url || !autoPlay || reduce || !inView) return;\n    playSafely(element);\n  }, [url, autoPlay, reduce, inView]);\n\n  React.useEffect(() => {\n    if (video.current) showTrack(video.current, caption);\n  }, [caption, tracks.length]);\n\n  React.useEffect(() => {\n    const change = () => setFullscreen(document.fullscreenElement === root.current);\n    document.addEventListener(\"fullscreenchange\", change);\n    return () => document.removeEventListener(\"fullscreenchange\", change);\n  }, []);\n  React.useEffect(() => () => clearTimeout(idleTimer.current), []);\n\n  useInView(\n    root,\n    (visible) => {\n      setInView(visible);\n      if (!visible && video.current && !video.current.paused) video.current.pause();\n    },\n    pauseWhenHidden,\n  );\n\n  const play = () => {\n    setWanted(true);\n    setFailed(false);\n    playSafely(video.current);\n  };\n  const toggle = () => (playing ? video.current?.pause() : play());\n  const seek = (to: number) => {\n    if (!video.current) return;\n    video.current.currentTime = clamp(to, 0, duration || video.current.duration || 0);\n    setTime(video.current.currentTime);\n  };\n  const changeVolume = (to: number) => {\n    if (!video.current) return;\n    const next = clamp(to, 0, 1);\n    video.current.volume = next;\n    video.current.muted = next === 0;\n    setVolume(next);\n    setMuted(next === 0);\n  };\n  const toggleMute = () => {\n    if (!video.current) return;\n    if (muted && volume === 0) changeVolume(0.5);\n    video.current.muted = !muted;\n    setMuted(!muted);\n  };\n  const cycleRate = () => {\n    const next = playbackRates[(playbackRates.indexOf(rate) + 1) % playbackRates.length] ?? 1;\n    if (video.current) video.current.playbackRate = next;\n    setRate(next);\n  };\n  const cycleCaption = () => tracks.length > 0 && setCaption((c) => (c + 2) % (tracks.length + 1) - 1);\n  const toggleFullscreen = () => {\n    const element = root.current;\n    if (!element) return;\n    if (document.fullscreenElement) void document.exitFullscreen();\n    else if (element.requestFullscreen) void element.requestFullscreen();\n    else (video.current as HTMLVideoElement & { webkitEnterFullscreen?: () => void })?.webkitEnterFullscreen?.();\n  };\n  const pip = () => {\n    if (document.pictureInPictureElement) void document.exitPictureInPicture();\n    else void video.current?.requestPictureInPicture?.();\n  };\n  const wake = () => {\n    setIdle(false);\n    clearTimeout(idleTimer.current);\n    if (playing) idleTimer.current = setTimeout(() => setIdle(true), 2500);\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent) => {\n    const target = event.target as HTMLElement;\n    const inControl = target.getAttribute(\"role\") === \"slider\";\n    const key = event.key.length === 1 ? event.key.toLowerCase() : event.key;\n    const now = video.current?.currentTime ?? 0;\n    const actions: Record<string, (() => void) | undefined> = {\n      \" \": target.tagName === \"BUTTON\" ? undefined : toggle,\n      k: toggle,\n      j: () => seek(now - 10),\n      l: () => seek(now + 10),\n      m: toggleMute,\n      f: toggleFullscreen,\n      c: tracks.length ? cycleCaption : undefined,\n      ArrowLeft: inControl ? undefined : () => seek(now - 5),\n      ArrowRight: inControl ? undefined : () => seek(now + 5),\n      ArrowUp: inControl ? undefined : () => changeVolume(volume + 0.1),\n      ArrowDown: inControl ? undefined : () => changeVolume(volume - 0.1),\n      Home: inControl ? undefined : () => seek(0),\n      End: inControl ? undefined : () => seek(duration),\n    };\n    const action = /^[0-9]$/.test(key) && !inControl ? () => seek((Number(key) / 10) * duration) : actions[key];\n    if (!action || event.metaKey || event.ctrlKey || event.altKey) return;\n    event.preventDefault();\n    action();\n    wake();\n  };\n\n  const showControls = controls && !overlay;\n  const pipSupported = typeof document !== \"undefined\" && \"pictureInPictureEnabled\" in document && document.pictureInPictureEnabled;\n\n  return (\n    <div\n      ref={root}\n      role=\"region\"\n      aria-label={title}\n      tabIndex={showControls ? 0 : undefined}\n      data-idle={idle && playing ? \"\" : undefined}\n      data-state={playing ? \"playing\" : \"paused\"}\n      className={s.root({ className })}\n      style={{ aspectRatio }}\n      onKeyDown={showControls ? onKeyDown : undefined}\n      onPointerMove={showControls ? wake : undefined}\n      onPointerLeave={() => playing && setIdle(true)}\n    >\n      <video\n        ref={video}\n        className={s.video()}\n        preload={preload}\n        loop={loop}\n        muted={muted}\n        playsInline\n        crossOrigin={tracks.length ? \"anonymous\" : undefined}\n        onClick={showControls ? toggle : undefined}\n        onPlay={() => {\n          setStarted(true);\n          setPlaying(true);\n          wake();\n          onPlay?.();\n        }}\n        onPause={() => {\n          setPlaying(false);\n          setIdle(false);\n          onPause?.();\n        }}\n        onEnded={() => onEnded?.()}\n        onTimeUpdate={(event) => {\n          setTime(event.currentTarget.currentTime);\n          onTimeUpdate?.(event.currentTarget.currentTime);\n        }}\n        onDurationChange={(event) => setDuration(Number.isFinite(event.currentTarget.duration) ? event.currentTarget.duration : 0)}\n        onWaiting={() => setWaiting(true)}\n        onPlaying={() => setWaiting(false)}\n        onCanPlay={() => setWaiting(false)}\n        onError={(event) => {\n          setFailed(true);\n          onError?.(event.currentTarget.error);\n        }}\n      >\n        {tracks.map((track) => (\n          <track key={track.src} src={track.src} srcLang={track.srcLang} label={track.label} kind={track.kind ?? \"subtitles\"} default={track.default} />\n        ))}\n      </video>\n\n      {poster && !started ? <img src={poster} alt=\"\" aria-hidden decoding=\"async\" className={s.poster()} /> : null}\n\n      {showControls && !playing && !failed && !waiting && (\n        <button type=\"button\" className={s.big()} aria-label={labels.play} onClick={play}>\n          <PlayGlyph className=\"ml-1 h-7 w-7\" />\n        </button>\n      )}\n\n      {waiting && !failed && (\n        <div className=\"pointer-events-none absolute inset-0 z-10 flex items-center justify-center\">\n          <span className={s.spinner()} aria-hidden />\n          <span role=\"status\" className=\"sr-only\">\n            {labels.loading}\n          </span>\n        </div>\n      )}\n\n      {failed && (\n        <div role=\"alert\" className={s.status()}>\n          <p>{labels.error}</p>\n          <button\n            type=\"button\"\n            className={s.button({ className: \"border border-fg-on-media/40 px-3\" })}\n            onClick={() => {\n              setFailed(false);\n              setAttempt((a) => a + 1);\n              video.current?.load();\n            }}\n          >\n            <RetryGlyph className=\"h-4 w-4\" />\n            {labels.retry}\n          </button>\n        </div>\n      )}\n\n      {overlay ? <div className={s.overlay()}>{overlay}</div> : null}\n\n      {showControls && (\n        <div className={s.bar()}>\n          <Slider\n            label={labels.seek}\n            min={0}\n            max={duration || 1}\n            step={0.1}\n            value={Math.min(time, duration || 1)}\n            onValueChange={seek}\n            formatValue={(v) => labels.time(formatClock(v), formatClock(duration))}\n            disabled={!duration}\n            className=\"[&_[role=slider]]:h-4 [&_[role=slider]]:w-4\"\n          />\n          <div className={s.row()}>\n            <button type=\"button\" className={s.button()} aria-label={playing ? labels.pause : labels.play} onClick={toggle}>\n              {playing ? <PauseGlyph className=\"h-5 w-5\" /> : <PlayGlyph className=\"h-5 w-5\" />}\n            </button>\n            <button type=\"button\" className={s.button()} aria-label={muted ? labels.unmute : labels.mute} onClick={toggleMute}>\n              <VolumeGlyph muted={muted} className=\"h-5 w-5\" />\n            </button>\n            <div className={s.volume()}>\n              <Slider label={labels.volume} min={0} max={1} step={0.05} value={muted ? 0 : volume} onValueChange={changeVolume} formatValue={(v) => `${Math.round(v * 100)} %`} className=\"w-full\" />\n            </div>\n            <span className={s.time()} aria-hidden>\n              {formatClock(time)} / {formatClock(duration)}\n            </span>\n            <span className=\"flex-1\" />\n            {playbackRates.length > 1 && (\n              <button type=\"button\" className={s.button()} aria-label={labels.speed(rate)} onClick={cycleRate}>\n                {rate}×\n              </button>\n            )}\n            {tracks.length > 0 && (\n              <button type=\"button\" className={s.button()} aria-pressed={caption >= 0} aria-label={labels.captions(caption >= 0 ? (tracks[caption]?.label ?? null) : null)} onClick={cycleCaption}>\n                <CaptionsGlyph className=\"h-5 w-5\" />\n              </button>\n            )}\n            {pipSupported && (\n              <button type=\"button\" className={s.button()} aria-label={labels.pictureInPicture} onClick={pip}>\n                <PipGlyph className=\"h-5 w-5\" />\n              </button>\n            )}\n            <button type=\"button\" className={s.button()} aria-label={fullscreen ? labels.exitFullscreen : labels.fullscreen} onClick={toggleFullscreen}>\n              <FullscreenGlyph exit={fullscreen} className=\"h-5 w-5\" />\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"
+      "content": "// Client. A `<video>` with its own controls, accessible from end to end: a named region the keyboard reaches (Space /\n// K, arrows, J / L, M, F, C, Home / End, 0–9), every button named by a prop, the seek and volume sliders of\n// `@krizaka/ui/slider` with the time read aloud. HLS plays natively where the browser can (Safari, iOS) and through\n// hls.js elsewhere — loaded only then, by the app's `loadHls` (`() => import(\"hls.js\")`): an optional peer, never in\n// the bundle of a page that does not play HLS. A signed address can be resolved at the last moment (`src` as a\n// function), again after an error; the video pauses when it leaves the screen; autoplay waits under reduced motion.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { CaptionsGlyph, FullscreenGlyph, PauseGlyph, PipGlyph, PlayGlyph, RetryGlyph, VolumeGlyph } from \"../glyphs\";\nimport { clamp, formatClock, playSafely, useInView, usePrefersReducedMotion } from \"../media\";\nimport { Slider } from \"../slider\";\n\nexport const videoPlayer = tv({\n  slots: {\n    root:\n      \"theme-dark group/player relative isolate w-full overflow-hidden rounded-xl bg-media text-fg-on-media \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-[idle]:cursor-none\",\n    video: \"absolute inset-0 h-full w-full object-contain\",\n    poster: \"pointer-events-none absolute inset-0 h-full w-full object-contain\",\n    big:\n      \"absolute left-1/2 top-1/2 z-10 inline-flex h-16 w-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full \" +\n      \"bg-scrim-strong text-fg-on-media shadow-lg backdrop-blur-sm transition-colors hover:bg-scrim motion-reduce:transition-none \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    bar:\n      \"absolute inset-x-0 bottom-0 z-20 flex flex-col gap-1 bg-linear-to-t from-scrim-strong via-scrim to-transparent px-3 pb-2 pt-10 \" +\n      \"transition-opacity duration-300 motion-reduce:transition-none group-data-[idle]/player:opacity-0 group-focus-within/player:opacity-100\",\n    row: \"flex items-center gap-1\",\n    button:\n      \"inline-flex h-9 min-w-9 shrink-0 items-center justify-center gap-1 rounded-md px-1.5 text-xs font-semibold text-fg-on-media \" +\n      \"transition-colors hover:bg-fg-on-media/15 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-pressed:bg-fg-on-media/20\",\n    time: \"px-1.5 font-mono text-[11px] tabular-nums text-fg-on-media\",\n    volume: \"hidden w-20 items-center sm:flex\",\n    status: \"absolute inset-0 z-30 flex flex-col items-center justify-center gap-3 bg-scrim-strong p-6 text-center text-sm\",\n    spinner: \"h-10 w-10 animate-spin rounded-full border-2 border-fg-on-media/30 border-t-fg-on-media motion-reduce:animate-none\",\n    overlay: \"absolute inset-0 z-30\",\n  },\n});\n\n/** What `loadHls` resolves to: the module of hls.js (only the members the player uses are typed). */\nexport type HlsModule = {\n  default: {\n    new (config?: Record<string, unknown>): {\n      loadSource(url: string): void;\n      attachMedia(media: HTMLMediaElement): void;\n      destroy(): void;\n      startLoad(): void;\n      recoverMediaError(): void;\n      on(event: string, listener: (event: string, data: { fatal?: boolean; type?: string }) => void): void;\n    };\n    isSupported(): boolean;\n    Events: { ERROR: string };\n    ErrorTypes: { NETWORK_ERROR: string; MEDIA_ERROR: string };\n  };\n};\n\nexport type VideoTrack = {\n  /** The WebVTT file. */\n  src: string;\n  /** Its language, BCP 47 (`\"fr\"`). */\n  srcLang: string;\n  /** Its name in the menu (\"Français\"), passed translated. */\n  label: string;\n  /** `subtitles` (default) or `captions` (with the sounds, for deaf viewers). */\n  kind?: \"subtitles\" | \"captions\";\n  /** Shown from the start. */\n  default?: boolean;\n};\n\nexport type VideoPlayerLabels = {\n  play: string;\n  pause: string;\n  mute: string;\n  unmute: string;\n  volume: string;\n  seek: string;\n  /** The speed button: `(rate) => \"Speed \" + rate + \"×\"`. */\n  speed: (rate: number) => string;\n  /** The captions button: `(track) => \"Subtitles: \" + (track ?? \"off\")`, the track's label or `null` when off. */\n  captions: (track: string | null) => string;\n  fullscreen: string;\n  exitFullscreen: string;\n  pictureInPicture: string;\n  /** Read while the video waits for data. */\n  loading: string;\n  /** The video cannot play. */\n  error: string;\n  /** Tries again (resolves a signed `src` again). */\n  retry: string;\n  /** The seek slider's value: `(time, duration) => \"1:05 of 3:20\"`. */\n  time: (time: string, duration: string) => string;\n};\n\nexport const videoPlayerLabels: VideoPlayerLabels = {\n  play: \"Play\",\n  pause: \"Pause\",\n  mute: \"Mute\",\n  unmute: \"Unmute\",\n  volume: \"Volume\",\n  seek: \"Seek\",\n  speed: (rate) => `Speed ${rate}×`,\n  captions: (track) => `Subtitles: ${track ?? \"off\"}`,\n  fullscreen: \"Full screen\",\n  exitFullscreen: \"Exit full screen\",\n  pictureInPicture: \"Picture in picture\",\n  loading: \"Loading\",\n  error: \"This video cannot be played.\",\n  retry: \"Try again\",\n  time: (time, duration) => `${time} of ${duration}`,\n};\n\nexport type VideoPlayerProps = {\n  /** The address of the video (MP4, WebM, or an HLS `.m3u8`), or a function that resolves a signed one when needed. */\n  src: string | (() => Promise<string>);\n  /** `auto` (default): HLS when the address ends in `.m3u8`. */\n  type?: \"auto\" | \"hls\" | \"file\";\n  /** Loads hls.js when the browser cannot play HLS itself: `() => import(\"hls.js\")`. Without it, HLS needs Safari. */\n  loadHls?: () => Promise<HlsModule>;\n  /** The accessible name of the player (\"Video: Sunset over Montréal\"), passed translated. */\n  title: string;\n  /** The picture shown before playback. */\n  poster?: string;\n  /** Starts playing, muted (browsers refuse sound without a gesture), once on screen and again each time it comes back — not under reduced motion. */\n  autoPlay?: boolean;\n  /** Starts muted. */\n  muted?: boolean;\n  /** Plays again from the start at the end. */\n  loop?: boolean;\n  /** How much to fetch before playback: `none` (a list of many videos), `metadata` (default), `auto`. */\n  preload?: \"none\" | \"metadata\" | \"auto\";\n  /** Subtitles or captions (WebVTT): the C key and a button cycle through them. */\n  tracks?: readonly VideoTrack[];\n  /** The speeds offered by the speed button. Default `[0.5, 1, 1.25, 1.5, 2]`. */\n  playbackRates?: readonly number[];\n  /** Pauses when less than a quarter of the player is on screen. Default `true`. */\n  pauseWhenHidden?: boolean;\n  /** Shows the controls (default). `false`: a bare video (a background loop) — give it no sound. */\n  controls?: boolean;\n  /** Covers the video and hides the controls: a gate (sign in, unlock, age check) drawn by the app. */\n  overlay?: React.ReactNode;\n  /** The width / height ratio of the frame. Default `\"16 / 9\"`; `\"9 / 16\"` for a vertical video. */\n  aspectRatio?: string;\n  /** Called when playback starts. */\n  onPlay?: () => void;\n  /** Called when playback pauses. */\n  onPause?: () => void;\n  /** Called at the end. */\n  onEnded?: () => void;\n  /** Called as the time moves, in seconds (a few times a second). */\n  onTimeUpdate?: (time: number) => void;\n  /** Called when the video cannot play (a network failure, an expired address). */\n  onError?: (error: unknown) => void;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<VideoPlayerLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\nconst RATES = [0.5, 1, 1.25, 1.5, 2] as const;\nconst isHls = (url: string, type: VideoPlayerProps[\"type\"]) => type === \"hls\" || (type !== \"file\" && /\\.m3u8(\\?|#|$)/i.test(url));\n\n/** Shows the text track `index` of a video (and hides the others); -1 hides them all. */\nfunction showTrack(element: HTMLVideoElement, index: number) {\n  const list = element.textTracks;\n  for (let i = 0; i < list.length; i += 1) list[i]!.mode = i === index ? \"showing\" : \"disabled\";\n}\n\n/** A video player with accessible controls, HLS on demand, signed sources, subtitles, speed, full screen. */\nexport function VideoPlayer({\n  src,\n  type = \"auto\",\n  loadHls,\n  title,\n  poster,\n  autoPlay,\n  muted: initiallyMuted = false,\n  loop,\n  preload = \"metadata\",\n  tracks = [],\n  playbackRates = RATES,\n  pauseWhenHidden = true,\n  controls = true,\n  overlay,\n  aspectRatio = \"16 / 9\",\n  onPlay,\n  onPause,\n  onEnded,\n  onTimeUpdate,\n  onError,\n  labels: given,\n  className,\n}: VideoPlayerProps) {\n  const labels = { ...videoPlayerLabels, ...given };\n  const s = videoPlayer();\n  const root = React.useRef<HTMLDivElement>(null);\n  const video = React.useRef<HTMLVideoElement>(null);\n  const reduce = usePrefersReducedMotion();\n  const [resolved, setResolved] = React.useState<{ attempt: number; url: string } | null>(null);\n  const [attempt, setAttempt] = React.useState(0);\n  const [wanted, setWanted] = React.useState(false);\n  const [playing, setPlaying] = React.useState(false);\n  const [time, setTime] = React.useState(0);\n  const [duration, setDuration] = React.useState(0);\n  const [volume, setVolume] = React.useState(1);\n  const [muted, setMuted] = React.useState(initiallyMuted || Boolean(autoPlay));\n  const [rate, setRate] = React.useState(1);\n  const [caption, setCaption] = React.useState(() => tracks.findIndex((t) => t.default));\n  const [fullscreen, setFullscreen] = React.useState(false);\n  const [waiting, setWaiting] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n  const [idle, setIdle] = React.useState(false);\n  // The poster is an image over the video until the first play: it loads like any image (lazy, decoded once), the\n  // same in every browser — the `poster` attribute is painted late and differently.\n  const [started, setStarted] = React.useState(false);\n  const idleTimer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const url = typeof src === \"string\" ? src : resolved?.attempt === attempt ? resolved.url : null;\n  const needSource = typeof src === \"function\" && (preload !== \"none\" || wanted || (autoPlay && !reduce));\n\n  // A signed source is resolved when it is needed, and again on \"Try again\".\n  React.useEffect(() => {\n    if (typeof src !== \"function\" || !needSource) return;\n    let live = true;\n    src().then(\n      (next) => live && setResolved({ attempt, url: next }),\n      (error: unknown) => {\n        if (!live) return;\n        setFailed(true);\n        onError?.(error);\n      },\n    );\n    return () => {\n      live = false;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- `onError` is a callback, not a reason to resolve again\n  }, [src, needSource, attempt]);\n\n  // Attaches the source: natively, or through hls.js when the browser needs it.\n  React.useEffect(() => {\n    const element = video.current;\n    if (!element || !url) return;\n    let hls: InstanceType<HlsModule[\"default\"]> | null = null;\n    let live = true;\n    const fail = (error: unknown) => {\n      if (!live) return;\n      setFailed(true);\n      onError?.(error);\n    };\n    if (isHls(url, type) && !element.canPlayType(\"application/vnd.apple.mpegurl\")) {\n      if (!loadHls) fail(new Error(\"VideoPlayer: HLS needs `loadHls` in this browser.\"));\n      else\n        loadHls().then(({ default: Hls }) => {\n          if (!live) return;\n          if (!Hls.isSupported()) return fail(new Error(\"VideoPlayer: HLS is not supported here.\"));\n          hls = new Hls({ enableWorker: true, backBufferLength: 60 });\n          hls.on(Hls.Events.ERROR, (_event, data) => {\n            if (!data.fatal) return;\n            if (data.type === Hls.ErrorTypes.NETWORK_ERROR) hls?.startLoad();\n            else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) hls?.recoverMediaError();\n            else fail(data);\n          });\n          hls.loadSource(url);\n          hls.attachMedia(element);\n        }, fail);\n    } else element.src = url;\n    return () => {\n      live = false;\n      hls?.destroy();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- `onError` and `loadHls` are callbacks\n  }, [url, type]);\n\n  // An autoplay waits for the player to be on screen (nothing is fetched before, with `preload=\"none\"`), and plays\n  // again each time it comes back: a page of loops costs only the ones in view.\n  const [inView, setInView] = React.useState(() => !pauseWhenHidden || typeof IntersectionObserver === \"undefined\");\n\n  // Plays once the source is there, when it was asked for (a click before a signed source resolved).\n  React.useEffect(() => {\n    const element = video.current;\n    if (!element || !url || !wanted) return;\n    playSafely(element);\n  }, [url, wanted]);\n\n  // An autoplay: while in view, never under reduced motion.\n  React.useEffect(() => {\n    const element = video.current;\n    if (!element || !url || !autoPlay || reduce || !inView) return;\n    playSafely(element);\n  }, [url, autoPlay, reduce, inView]);\n\n  React.useEffect(() => {\n    if (video.current) showTrack(video.current, caption);\n  }, [caption, tracks.length]);\n\n  React.useEffect(() => {\n    const change = () => setFullscreen(document.fullscreenElement === root.current);\n    document.addEventListener(\"fullscreenchange\", change);\n    return () => document.removeEventListener(\"fullscreenchange\", change);\n  }, []);\n  React.useEffect(() => () => clearTimeout(idleTimer.current), []);\n\n  useInView(\n    root,\n    (visible) => {\n      setInView(visible);\n      if (!visible && video.current && !video.current.paused) video.current.pause();\n    },\n    pauseWhenHidden,\n  );\n\n  const play = () => {\n    setWanted(true);\n    setFailed(false);\n    playSafely(video.current);\n  };\n  const toggle = () => (playing ? video.current?.pause() : play());\n  const seek = (to: number) => {\n    if (!video.current) return;\n    video.current.currentTime = clamp(to, 0, duration || video.current.duration || 0);\n    setTime(video.current.currentTime);\n  };\n  const changeVolume = (to: number) => {\n    if (!video.current) return;\n    const next = clamp(to, 0, 1);\n    video.current.volume = next;\n    video.current.muted = next === 0;\n    setVolume(next);\n    setMuted(next === 0);\n  };\n  const toggleMute = () => {\n    if (!video.current) return;\n    if (muted && volume === 0) changeVolume(0.5);\n    video.current.muted = !muted;\n    setMuted(!muted);\n  };\n  const cycleRate = () => {\n    const next = playbackRates[(playbackRates.indexOf(rate) + 1) % playbackRates.length] ?? 1;\n    if (video.current) video.current.playbackRate = next;\n    setRate(next);\n  };\n  const cycleCaption = () => tracks.length > 0 && setCaption((c) => (c + 2) % (tracks.length + 1) - 1);\n  const toggleFullscreen = () => {\n    const element = root.current;\n    if (!element) return;\n    if (document.fullscreenElement) void document.exitFullscreen();\n    else if (element.requestFullscreen) void element.requestFullscreen();\n    else (video.current as HTMLVideoElement & { webkitEnterFullscreen?: () => void })?.webkitEnterFullscreen?.();\n  };\n  const pip = () => {\n    if (document.pictureInPictureElement) void document.exitPictureInPicture();\n    else void video.current?.requestPictureInPicture?.();\n  };\n  const wake = () => {\n    setIdle(false);\n    clearTimeout(idleTimer.current);\n    if (playing) idleTimer.current = setTimeout(() => setIdle(true), 2500);\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent) => {\n    const target = event.target as HTMLElement;\n    const inControl = target.getAttribute(\"role\") === \"slider\";\n    const key = event.key.length === 1 ? event.key.toLowerCase() : event.key;\n    const now = video.current?.currentTime ?? 0;\n    const actions: Record<string, (() => void) | undefined> = {\n      \" \": target.tagName === \"BUTTON\" ? undefined : toggle,\n      k: toggle,\n      j: () => seek(now - 10),\n      l: () => seek(now + 10),\n      m: toggleMute,\n      f: toggleFullscreen,\n      c: tracks.length ? cycleCaption : undefined,\n      ArrowLeft: inControl ? undefined : () => seek(now - 5),\n      ArrowRight: inControl ? undefined : () => seek(now + 5),\n      ArrowUp: inControl ? undefined : () => changeVolume(volume + 0.1),\n      ArrowDown: inControl ? undefined : () => changeVolume(volume - 0.1),\n      Home: inControl ? undefined : () => seek(0),\n      End: inControl ? undefined : () => seek(duration),\n    };\n    const action = /^[0-9]$/.test(key) && !inControl ? () => seek((Number(key) / 10) * duration) : actions[key];\n    if (!action || event.metaKey || event.ctrlKey || event.altKey) return;\n    event.preventDefault();\n    action();\n    wake();\n  };\n\n  const showControls = controls && !overlay;\n  const pipSupported = typeof document !== \"undefined\" && \"pictureInPictureEnabled\" in document && document.pictureInPictureEnabled;\n\n  return (\n    <div\n      ref={root}\n      role=\"region\"\n      aria-label={title}\n      tabIndex={showControls ? 0 : undefined}\n      data-idle={idle && playing ? \"\" : undefined}\n      data-state={playing ? \"playing\" : \"paused\"}\n      className={s.root({ className })}\n      style={{ aspectRatio }}\n      onKeyDown={showControls ? onKeyDown : undefined}\n      onPointerMove={showControls ? wake : undefined}\n      onPointerLeave={() => playing && setIdle(true)}\n    >\n      <video\n        ref={video}\n        className={s.video()}\n        preload={preload}\n        loop={loop}\n        muted={muted}\n        playsInline\n        crossOrigin={tracks.length ? \"anonymous\" : undefined}\n        onClick={showControls ? toggle : undefined}\n        onPlay={() => {\n          setStarted(true);\n          setPlaying(true);\n          wake();\n          onPlay?.();\n        }}\n        onPause={() => {\n          setPlaying(false);\n          setIdle(false);\n          onPause?.();\n        }}\n        onEnded={() => onEnded?.()}\n        onTimeUpdate={(event) => {\n          setTime(event.currentTarget.currentTime);\n          onTimeUpdate?.(event.currentTarget.currentTime);\n        }}\n        onDurationChange={(event) => setDuration(Number.isFinite(event.currentTarget.duration) ? event.currentTarget.duration : 0)}\n        onWaiting={() => setWaiting(true)}\n        onPlaying={() => setWaiting(false)}\n        onCanPlay={() => setWaiting(false)}\n        onError={(event) => {\n          setFailed(true);\n          onError?.(event.currentTarget.error);\n        }}\n      >\n        {tracks.map((track) => (\n          <track key={track.src} src={track.src} srcLang={track.srcLang} label={track.label} kind={track.kind ?? \"subtitles\"} default={track.default} />\n        ))}\n      </video>\n\n      {poster && !started ? <img src={poster} alt=\"\" aria-hidden decoding=\"async\" className={s.poster()} /> : null}\n\n      {showControls && !playing && !failed && !waiting && (\n        <button type=\"button\" className={s.big()} aria-label={labels.play} onClick={play}>\n          <PlayGlyph className=\"ml-1 h-7 w-7\" />\n        </button>\n      )}\n\n      {waiting && !failed && (\n        <div className=\"pointer-events-none absolute inset-0 z-10 flex items-center justify-center\">\n          <span className={s.spinner()} aria-hidden />\n          <span role=\"status\" className=\"sr-only\">\n            {labels.loading}\n          </span>\n        </div>\n      )}\n\n      {failed && (\n        <div role=\"alert\" className={s.status()}>\n          <p>{labels.error}</p>\n          <button\n            type=\"button\"\n            className={s.button({ className: \"border border-fg-on-media/40 px-3\" })}\n            onClick={() => {\n              setFailed(false);\n              setAttempt((a) => a + 1);\n              video.current?.load();\n            }}\n          >\n            <RetryGlyph className=\"h-4 w-4\" />\n            {labels.retry}\n          </button>\n        </div>\n      )}\n\n      {overlay ? <div className={s.overlay()}>{overlay}</div> : null}\n\n      {showControls && (\n        <div className={s.bar()}>\n          <Slider\n            label={labels.seek}\n            min={0}\n            max={duration || 1}\n            step={0.1}\n            value={Math.min(time, duration || 1)}\n            onValueChange={seek}\n            formatValue={(v) => labels.time(formatClock(v), formatClock(duration))}\n            disabled={!duration}\n            className=\"[&_[role=slider]]:h-4 [&_[role=slider]]:w-4\"\n          />\n          <div className={s.row()}>\n            <button type=\"button\" className={s.button()} aria-label={playing ? labels.pause : labels.play} onClick={toggle}>\n              {playing ? <PauseGlyph className=\"h-5 w-5\" /> : <PlayGlyph className=\"h-5 w-5\" />}\n            </button>\n            <button type=\"button\" className={s.button()} aria-label={muted ? labels.unmute : labels.mute} onClick={toggleMute}>\n              <VolumeGlyph muted={muted} className=\"h-5 w-5\" />\n            </button>\n            <div className={s.volume()}>\n              <Slider label={labels.volume} min={0} max={1} step={0.05} value={muted ? 0 : volume} onValueChange={changeVolume} formatValue={(v) => `${Math.round(v * 100)} %`} className=\"w-full\" />\n            </div>\n            <span className={s.time()} aria-hidden>\n              {formatClock(time)} / {formatClock(duration)}\n            </span>\n            <span className=\"flex-1\" />\n            {playbackRates.length > 1 && (\n              <button type=\"button\" className={s.button()} aria-label={labels.speed(rate)} onClick={cycleRate}>\n                {rate}×\n              </button>\n            )}\n            {tracks.length > 0 && (\n              <button type=\"button\" className={s.button()} aria-pressed={caption >= 0} aria-label={labels.captions(caption >= 0 ? (tracks[caption]?.label ?? null) : null)} onClick={cycleCaption}>\n                <CaptionsGlyph className=\"h-5 w-5\" />\n              </button>\n            )}\n            {pipSupported && (\n              <button type=\"button\" className={s.button()} aria-label={labels.pictureInPicture} onClick={pip}>\n                <PipGlyph className=\"h-5 w-5\" />\n              </button>\n            )}\n            <button type=\"button\" className={s.button()} aria-label={fullscreen ? labels.exitFullscreen : labels.fullscreen} onClick={toggleFullscreen}>\n              <FullscreenGlyph exit={fullscreen} className=\"h-5 w-5\" />\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"
     }
   ],
   "dependencies": [

package/dist/chunk-6ZYRUOTA.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/button/button.tsx","../src/button/recipe.ts"],"sourcesContent":["// Server-safe: no hook, no context. `buttonVariants` styles a <Link> or a Server Component without the component.\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { LoaderGlyph } from \"../spinner/glyph\";\nimport { buttonRecipe } from \"./recipe\";\n\nexport const buttonVariants = tv(buttonRecipe);\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n\nexport type ButtonProps = React.ComponentProps<\"button\"> &\n  ButtonVariants & {\n    /**\n     * The look: `primary` (the accent), `gradient` (accent → accent-2), `secondary` (a raised surface), `outline`,\n     * `ghost`, `danger`.\n     * @default \"secondary\"\n     */\n    variant?: ButtonVariants[\"variant\"];\n    /**\n     * sm · md · lg, or `icon` (a square).\n     * @default \"md\"\n     */\n    size?: ButtonVariants[\"size\"];\n    /**\n     * rounded · pill · cut (45° corners, the Krizaka chamfer).\n     * @default \"rounded\"\n     */\n    shape?: ButtonVariants[\"shape\"];\n    /** Renders the child (e.g. a <Link>) instead of the <button>, with props, classes and ref merged. */\n    asChild?: boolean;\n    /**\n     * Disables and signals the wait (aria-busy, data-loading) and shows the Krizaka loader glyph before the label; the\n     * button keeps its colour.\n     */\n    loading?: boolean;\n    /**\n     * Between 0 and 1, while `loading`: the glyph's trace and a light fill across the button grow to the value (an\n     * upload, an export).\n     */\n    progress?: number | null;\n    /**\n     * How the action ended: `success` draws a check, `error` a cross (and the button shakes its head once); a ring of\n     * the status colour opens around it. Clear it to return to rest.\n     */\n    status?: \"success\" | \"error\" | null;\n    /** A message announced politely by assistive technology when it changes (“Saved”, “Upload failed”) — passed translated. */\n    announce?: string;\n    /**\n     * Shows the glyph while `loading` / with a `status`. `false`: you draw your own.\n     * @default true\n     */\n    indicator?: boolean;\n    /** A sheen of light crosses the button on hover — for the one action a page is about. */\n    shimmer?: boolean;\n    /** The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch). */\n    magnetic?: boolean;\n  };\n\nconst STATUS_TEXT = { success: \"text-fg-success\", error: \"text-fg-danger\" } as const;\n\nexport function Button({\n  asChild,\n  loading,\n  progress,\n  status,\n  announce,\n  indicator = true,\n  shimmer,\n  magnetic,\n  variant,\n  size,\n  shape,\n  className,\n  disabled,\n  children,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  const known = loading && typeof progress === \"number\" && Number.isFinite(progress);\n  const ratio = known ? Math.min(1, Math.max(0, progress)) : 0;\n  const glyph = indicator && !asChild && (loading || status) ? (status ?? \"loading\") : null;\n  // On a filled variant the glyph stays in the label's colour; on the others it takes the status colour.\n  const filled = variant === \"primary\" || variant === \"gradient\";\n  const button = (\n    <Comp\n      type={asChild ? undefined : \"button\"}\n      aria-busy={loading || undefined}\n      data-loading={loading ? \"\" : undefined}\n      data-variant={variant ?? \"secondary\"}\n      data-kz-status={status ?? undefined}\n      data-kz-magnetic={magnetic ? \"\" : undefined}\n      disabled={asChild ? undefined : disabled || loading}\n      aria-disabled={asChild && (disabled || loading) ? true : undefined}\n      className={buttonVariants({\n        variant,\n        size,\n        shape,\n        className: cn(known && \"relative isolate overflow-hidden\", shimmer && \"kz-sheen\", className),\n      })}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {known && (\n            <span aria-hidden className=\"absolute inset-y-0 left-0 -z-10 bg-current opacity-15 transition-[width] duration-500\" style={{ width: `${ratio * 100}%` }} />\n          )}\n          {glyph && (\n            <span\n              aria-hidden\n              data-slot=\"indicator\"\n              className=\"-my-1 grid grid-cols-[1fr] transition-[grid-template-columns,margin,opacity] duration-300 starting:-mr-2 starting:grid-cols-[0fr] starting:opacity-0\"\n            >\n              <span className=\"overflow-hidden\">\n                <LoaderGlyph state={glyph} value={known ? ratio : null} className={cn(\"h-4 w-4\", glyph !== \"loading\" && !filled && STATUS_TEXT[glyph])} />\n              </span>\n            </span>\n          )}\n          {children}\n        </>\n      )}\n    </Comp>\n  );\n  if (announce === undefined || asChild) return button;\n  return (\n    <>\n      {button}\n      <span role=\"status\" className=\"sr-only\">\n        {announce}\n      </span>\n    </>\n  );\n}\n\nexport type IconButtonProps = Omit<ButtonProps, \"size\"> & {\n  /** The accessible name (and tooltip) of the button — required, passed translated. */\n  label: string;\n  /**\n   * sm · md · lg, or `icon` (a square).\n   * @default \"icon\"\n   */\n  size?: ButtonProps[\"size\"];\n};\n\n/** An icon-only button: `label` is required, it is its accessible name. Loading or with a status, the glyph takes the icon's place. */\nexport function IconButton({ label, size = \"icon\", children, ...props }: IconButtonProps) {\n  const swap = props.indicator !== false && !props.asChild && (props.loading || props.status);\n  return (\n    <Button aria-label={label} title={label} size={size} {...props}>\n      {swap ? null : children}\n    </Button>\n  );\n}\n","// The button's variants, written once as classes of the Krizaka tokens: the web wears them with `tv(buttonRecipe)`\n// (button.tsx), React Native reads the same classes into styles (native/button.tsx, `nativeRecipe`).\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const buttonRecipe = defineRecipe({\n  base:\n    \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n    \"disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98] \" +\n    // Busy is not unavailable: a loading button keeps its colour (it is disabled only so it is not pressed twice).\n    \"[&[data-loading]]:opacity-100\",\n  variants: {\n    variant: {\n      primary: \"bg-accent text-on-accent shadow-sm hover:bg-accent-hover\",\n      // The brand's signature: accent → accent-2 (on-accent reads on both stops, tested in @krizaka/tokens).\n      gradient: \"bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110\",\n      secondary: \"border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3\",\n      outline: \"border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent\",\n      ghost: \"text-fg-secondary hover:bg-surface-2 hover:text-fg\",\n      // The border and the tint carry the danger; the label stays the primary text role, legible on the tint at rest\n      // and hovered over every surface (`text-fg-danger` is for text set directly on a surface).\n      danger: \"border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20\",\n    },\n    size: { sm: \"h-8 px-3 text-xs\", md: \"h-10 px-4 text-sm\", lg: \"h-12 px-6 text-sm\", icon: \"h-10 w-10\" },\n    // `cut`: the Krizaka chamfer — 45° corners (CSS corner-shape, where supported; rounded elsewhere). The border, the\n    // focus ring and the hover follow the cut, unlike a clip-path.\n    shape: { rounded: \"rounded-lg\", pill: \"rounded-full\", cut: \"rounded-[10px] [corner-shape:bevel]\" },\n  },\n  defaultVariants: { variant: \"secondary\", size: \"md\", shape: \"rounded\" },\n});\n"],"mappings":"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","names":[]}

package/dist/chunk-AB5D3KBG.js

@@ -1,37 +0,0 @@
-"use client";
-
-// src/pointer-light/pointer-light.tsx
-import * as React from "react";
-import { jsx } from "react/jsx-runtime";
-var POINTER_LIGHT_TARGET = "[data-kz-light]";
-function usePointerLight(ref, target = POINTER_LIGHT_TARGET) {
-  React.useEffect(() => {
-    const group = ref.current;
-    if (!group || typeof window.matchMedia !== "function" || !window.matchMedia("(hover: hover) and (prefers-reduced-motion: no-preference)").matches) return;
-    const onMove = (e) => {
-      const card = e.target?.closest(target);
-      if (!card || !group.contains(card)) return;
-      const box = card.getBoundingClientRect();
-      card.style.setProperty("--kz-pointer-x", `${Math.round(e.clientX - box.left)}px`);
-      card.style.setProperty("--kz-pointer-y", `${Math.round(e.clientY - box.top)}px`);
-    };
-    group.addEventListener("pointermove", onMove, { passive: true });
-    return () => group.removeEventListener("pointermove", onMove);
-  }, [ref, target]);
-}
-function PointerLight({ target = POINTER_LIGHT_TARGET }) {
-  const ref = React.useRef(null);
-  const parent = React.useRef(null);
-  React.useLayoutEffect(() => {
-    parent.current = ref.current?.parentElement ?? null;
-  }, []);
-  usePointerLight(parent, target);
-  return /* @__PURE__ */ jsx("span", { ref, hidden: true });
-}
-
-export {
-  POINTER_LIGHT_TARGET,
-  usePointerLight,
-  PointerLight
-};
-//# sourceMappingURL=chunk-AB5D3KBG.js.map

package/dist/chunk-AB5D3KBG.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/pointer-light/pointer-light.tsx"],"sourcesContent":["// Client. The light that follows the pointer over the cards of a group (blocks.css `.kz-block-card::after`): one passive\n// pointermove listener on the group writes the pointer's position into the card it is over (`--kz-pointer-x/y`); the\n// card's CSS draws the light. Nothing runs on a touch screen or under reduced motion, nothing loops.\nimport * as React from \"react\";\n\n/** Every card of the page blocks carries it: LinkCard, ArgumentCard. */\nexport const POINTER_LIGHT_TARGET = \"[data-kz-light]\";\n\n/** Lights the cards inside `ref` that match `target`. Returns nothing; the effect cleans itself up. */\nexport function usePointerLight(ref: React.RefObject<HTMLElement | null>, target: string = POINTER_LIGHT_TARGET) {\n  React.useEffect(() => {\n    const group = ref.current;\n    if (!group || typeof window.matchMedia !== \"function\" || !window.matchMedia(\"(hover: hover) and (prefers-reduced-motion: no-preference)\").matches) return;\n    const onMove = (e: PointerEvent) => {\n      const card = (e.target as Element | null)?.closest<HTMLElement>(target);\n      if (!card || !group.contains(card)) return;\n      const box = card.getBoundingClientRect();\n      card.style.setProperty(\"--kz-pointer-x\", `${Math.round(e.clientX - box.left)}px`);\n      card.style.setProperty(\"--kz-pointer-y\", `${Math.round(e.clientY - box.top)}px`);\n    };\n    group.addEventListener(\"pointermove\", onMove, { passive: true });\n    return () => group.removeEventListener(\"pointermove\", onMove);\n  }, [ref, target]);\n}\n\nexport type PointerLightProps = {\n  /**\n   * The cards to light, as a selector inside the parent element.\n   * @default \"[data-kz-light]\"\n   */\n  target?: string;\n};\n\n/**\n * Drop it inside any group of cards (a grid, a list) — it listens on its parent element. Renders an empty, hidden span.\n * CardGrid includes it already.\n */\nexport function PointerLight({ target = POINTER_LIGHT_TARGET }: PointerLightProps) {\n  const ref = React.useRef<HTMLSpanElement>(null);\n  const parent = React.useRef<HTMLElement | null>(null);\n  React.useLayoutEffect(() => {\n    parent.current = ref.current?.parentElement ?? null;\n  }, []);\n  usePointerLight(parent, target);\n  return <span ref={ref} hidden />;\n}\n"],"mappings":";;;AAGA,YAAY,WAAW;AAyCd;AAtCF,IAAM,uBAAuB;AAG7B,SAAS,gBAAgB,KAA0C,SAAiB,sBAAsB;AAC/G,EAAM,gBAAU,MAAM;AACpB,UAAM,QAAQ,IAAI;AAClB,QAAI,CAAC,SAAS,OAAO,OAAO,eAAe,cAAc,CAAC,OAAO,WAAW,4DAA4D,EAAE,QAAS;AACnJ,UAAM,SAAS,CAAC,MAAoB;AAClC,YAAM,OAAQ,EAAE,QAA2B,QAAqB,MAAM;AACtE,UAAI,CAAC,QAAQ,CAAC,MAAM,SAAS,IAAI,EAAG;AACpC,YAAM,MAAM,KAAK,sBAAsB;AACvC,WAAK,MAAM,YAAY,kBAAkB,GAAG,KAAK,MAAM,EAAE,UAAU,IAAI,IAAI,CAAC,IAAI;AAChF,WAAK,MAAM,YAAY,kBAAkB,GAAG,KAAK,MAAM,EAAE,UAAU,IAAI,GAAG,CAAC,IAAI;AAAA,IACjF;AACA,UAAM,iBAAiB,eAAe,QAAQ,EAAE,SAAS,KAAK,CAAC;AAC/D,WAAO,MAAM,MAAM,oBAAoB,eAAe,MAAM;AAAA,EAC9D,GAAG,CAAC,KAAK,MAAM,CAAC;AAClB;AAcO,SAAS,aAAa,EAAE,SAAS,qBAAqB,GAAsB;AACjF,QAAM,MAAY,aAAwB,IAAI;AAC9C,QAAM,SAAe,aAA2B,IAAI;AACpD,EAAM,sBAAgB,MAAM;AAC1B,WAAO,UAAU,IAAI,SAAS,iBAAiB;AAAA,EACjD,GAAG,CAAC,CAAC;AACL,kBAAgB,QAAQ,MAAM;AAC9B,SAAO,oBAAC,UAAK,KAAU,QAAM,MAAC;AAChC;","names":[]}

package/dist/chunk-APNIVNIX.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/link-card/link-card.tsx"],"sourcesContent":["// Server-safe. A card that leads somewhere (blocks.css): the whole card is the link — an icon, a title, one sentence,\n// the way in. Compact, one look for every entry point of a page (a documentation hub, the products, the next step).\nimport type * as React from \"react\";\n\nimport { BlockLink, isExternal, type LinkComponent } from \"../block-link\";\nimport { cn } from \"../cn\";\nimport { ArrowGlyph, ExternalGlyph } from \"../glyphs\";\n\nexport type LinkCardProps = Omit<React.ComponentProps<\"a\">, \"title\" | \"href\"> & {\n  /** Where the card leads. An absolute URL opens in a new tab, with the external mark. */\n  href: string;\n  /** The title: the name of the destination. */\n  title: React.ReactNode;\n  /** One sentence: what the reader finds there. */\n  description?: React.ReactNode;\n  /** The icon tile on the left (a product mark, a signature icon): decorative, the title names the link. */\n  icon?: React.ReactNode;\n  /** A short mono line above the title (a category, a version). */\n  meta?: React.ReactNode;\n  /** The way in, under the text, with an arrow: `Open`, `Read the guide`. */\n  cta?: React.ReactNode;\n  /** Under the text, before the way in: facts (`Facts`), badges. Never another link — the card is one. */\n  extra?: React.ReactNode;\n  /**\n   * The title's element: a heading when the cards are the content of a section (a hub), `span` inside a list of links.\n   * @default \"h3\"\n   */\n  titleAs?: \"h2\" | \"h3\" | \"h4\" | \"span\";\n  /**\n   * `row`: the icon beside the text (compact, the default); `stack`: the icon above it.\n   * @default \"row\"\n   */\n  layout?: \"row\" | \"stack\";\n  /**\n   * Where the facts (`extra`) and the way in (`cta`) sit when the card is taller than its text — a row of cards at one\n   * height: `bottom` pins them to the card's foot, so they share a line across the row; `top` leaves them under the text.\n   * @default \"bottom\"\n   */\n  footerAlign?: \"bottom\" | \"top\";\n  /** The app's link component for internal addresses (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: LinkComponent;\n  /**\n   * The hover of the card: `light` (the pointer's light, a coloured lift — the default) or `quiet` (no glow, a 2 px lift,\n   * one step of surface and border, the focus as a ring). Unset, a card follows its grid (`CardGrid hover`).\n   */\n  hover?: CardHover;\n};\n\n/** The hover of a card (blocks.css): the pointer's light (`light`) or the quiet hover (`quiet`). */\nexport type CardHover = \"light\" | \"quiet\";\n\n/** The class that says a card's hover; none when it is not asked (the card then follows its grid, or the default). */\nexport function cardHoverClass(hover: CardHover | undefined): string | undefined {\n  return hover === \"quiet\" ? \"kz-hover-quiet\" : hover === \"light\" ? \"kz-hover-light\" : undefined;\n}\n\n/** An entry point: the whole card is one link — icon, title, sentence, the way in. Lifts and lights under the pointer. */\nexport function LinkCard({ href, title, description, icon, meta, cta, extra, titleAs: Title = \"h3\", layout = \"row\", footerAlign = \"bottom\", linkAs, hover, className, ...props }: LinkCardProps) {\n  const external = isExternal(href);\n  return (\n    <BlockLink\n      href={href}\n      linkAs={linkAs}\n      external={external}\n      className={cn(\"kz-block-card kz-link-card\", cardHoverClass(hover), className)}\n      data-kz-light=\"\"\n      data-layout={layout === \"row\" ? undefined : layout}\n      data-footer={footerAlign === \"top\" ? \"top\" : undefined}\n      {...props}\n    >\n      {icon && (\n        <span className=\"kz-block-icon\" aria-hidden>\n          {icon}\n        </span>\n      )}\n      <div className=\"kz-link-card-body\">\n        {meta && <p className=\"kz-link-card-meta\">{meta}</p>}\n        <Title className=\"kz-link-card-title\">{title}</Title>\n        {description && <p className=\"kz-link-card-text\">{description}</p>}\n        {(extra || cta || external) && (\n          <div className=\"kz-link-card-foot\">\n            {extra && <div className=\"kz-link-card-extra\">{extra}</div>}\n            {(cta || external) && (\n              <span className=\"kz-link-card-cta\">\n                {cta}\n                {external ? <ExternalGlyph className=\"h-3.5 w-3.5\" /> : <ArrowGlyph className=\"h-3.5 w-3.5\" />}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n    </BlockLink>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAuEQ,cAYM,YAZN;AAnBD,SAAS,eAAe,OAAkD;AAC/E,SAAO,UAAU,UAAU,mBAAmB,UAAU,UAAU,mBAAmB;AACvF;AAGO,SAAS,SAAS,EAAE,MAAM,OAAO,aAAa,MAAM,MAAM,KAAK,OAAO,SAAS,QAAQ,MAAM,SAAS,OAAO,cAAc,UAAU,QAAQ,OAAO,WAAW,GAAG,MAAM,GAAkB;AAC/L,QAAM,WAAW,WAAW,IAAI;AAChC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,8BAA8B,eAAe,KAAK,GAAG,SAAS;AAAA,MAC5E,iBAAc;AAAA,MACd,eAAa,WAAW,QAAQ,SAAY;AAAA,MAC5C,eAAa,gBAAgB,QAAQ,QAAQ;AAAA,MAC5C,GAAG;AAAA,MAEH;AAAA,gBACC,oBAAC,UAAK,WAAU,iBAAgB,eAAW,MACxC,gBACH;AAAA,QAEF,qBAAC,SAAI,WAAU,qBACZ;AAAA,kBAAQ,oBAAC,OAAE,WAAU,qBAAqB,gBAAK;AAAA,UAChD,oBAAC,SAAM,WAAU,sBAAsB,iBAAM;AAAA,UAC5C,eAAe,oBAAC,OAAE,WAAU,qBAAqB,uBAAY;AAAA,WAC5D,SAAS,OAAO,aAChB,qBAAC,SAAI,WAAU,qBACZ;AAAA,qBAAS,oBAAC,SAAI,WAAU,sBAAsB,iBAAM;AAAA,aACnD,OAAO,aACP,qBAAC,UAAK,WAAU,oBACb;AAAA;AAAA,cACA,WAAW,oBAAC,iBAAc,WAAU,eAAc,IAAK,oBAAC,cAAW,WAAU,eAAc;AAAA,eAC9F;AAAA,aAEJ;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-CHOJUCVE.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/button/button.tsx","../src/button/recipe.ts"],"sourcesContent":["// Server-safe: no hook, no context. `buttonVariants` styles a <Link> or a Server Component without the component.\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { LoaderGlyph } from \"../spinner/glyph\";\nimport { buttonRecipe } from \"./recipe\";\n\nexport const buttonVariants = tv(buttonRecipe);\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n\nexport type ButtonProps = React.ComponentProps<\"button\"> &\n  ButtonVariants & {\n    /**\n     * The look: `primary` (the accent), `gradient` (accent → accent-2), `secondary` (a raised surface), `outline`,\n     * `ghost`, `danger`.\n     * @default \"secondary\"\n     */\n    variant?: ButtonVariants[\"variant\"];\n    /**\n     * sm · md · lg, or `icon` (a square).\n     * @default \"md\"\n     */\n    size?: ButtonVariants[\"size\"];\n    /**\n     * rounded · pill · cut (45° corners, the Krizaka chamfer).\n     * @default \"rounded\"\n     */\n    shape?: ButtonVariants[\"shape\"];\n    /** Renders the child (e.g. a <Link>) instead of the <button>, with props, classes and ref merged. */\n    asChild?: boolean;\n    /**\n     * Disables and signals the wait (aria-busy, data-loading) and shows the Krizaka loader glyph before the label; the\n     * button keeps its colour.\n     */\n    loading?: boolean;\n    /**\n     * Between 0 and 1, while `loading`: the glyph's trace and a light fill across the button grow to the value (an\n     * upload, an export).\n     */\n    progress?: number | null;\n    /**\n     * How the action ended: `success` draws a check, `error` a cross (and the button shakes its head once); a ring of\n     * the status colour opens around it. Clear it to return to rest.\n     */\n    status?: \"success\" | \"error\" | null;\n    /** A message announced politely by assistive technology when it changes (“Saved”, “Upload failed”) — passed translated. */\n    announce?: string;\n    /**\n     * Shows the glyph while `loading` / with a `status`. `false`: you draw your own.\n     * @default true\n     */\n    indicator?: boolean;\n    /** A sheen of light crosses the button on hover — for the one action a page is about. */\n    shimmer?: boolean;\n    /** The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch). */\n    magnetic?: boolean;\n  };\n\nconst STATUS_TEXT = { success: \"text-fg-success\", error: \"text-fg-danger\" } as const;\n\nexport function Button({\n  asChild,\n  loading,\n  progress,\n  status,\n  announce,\n  indicator = true,\n  shimmer,\n  magnetic,\n  variant,\n  size,\n  shape,\n  className,\n  disabled,\n  children,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  const known = loading && typeof progress === \"number\" && Number.isFinite(progress);\n  const ratio = known ? Math.min(1, Math.max(0, progress)) : 0;\n  const glyph = indicator && !asChild && (loading || status) ? (status ?? \"loading\") : null;\n  // On a filled variant the glyph stays in the label's colour; on the others it takes the status colour.\n  const filled = variant === \"primary\" || variant === \"gradient\";\n  const button = (\n    <Comp\n      type={asChild ? undefined : \"button\"}\n      aria-busy={loading || undefined}\n      data-loading={loading ? \"\" : undefined}\n      data-variant={variant ?? \"secondary\"}\n      data-kz-status={status ?? undefined}\n      data-kz-magnetic={magnetic ? \"\" : undefined}\n      disabled={asChild ? undefined : disabled || loading}\n      aria-disabled={asChild && (disabled || loading) ? true : undefined}\n      className={buttonVariants({\n        variant,\n        size,\n        shape,\n        className: cn(known && \"relative isolate overflow-hidden\", shimmer && \"kz-sheen\", className),\n      })}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {known && (\n            <span aria-hidden className=\"absolute inset-y-0 left-0 -z-10 bg-current opacity-15 transition-[width] duration-500\" style={{ width: `${ratio * 100}%` }} />\n          )}\n          {glyph && (\n            <span\n              aria-hidden\n              data-slot=\"indicator\"\n              className=\"-my-1 grid grid-cols-[1fr] transition-[grid-template-columns,margin,opacity] duration-300 starting:-mr-2 starting:grid-cols-[0fr] starting:opacity-0\"\n            >\n              <span className=\"overflow-hidden\">\n                <LoaderGlyph state={glyph} value={known ? ratio : null} className={cn(\"h-4 w-4\", glyph !== \"loading\" && !filled && STATUS_TEXT[glyph])} />\n              </span>\n            </span>\n          )}\n          {children}\n        </>\n      )}\n    </Comp>\n  );\n  if (announce === undefined || asChild) return button;\n  return (\n    <>\n      {button}\n      <span role=\"status\" className=\"sr-only\">\n        {announce}\n      </span>\n    </>\n  );\n}\n\nexport type IconButtonProps = Omit<ButtonProps, \"size\"> & {\n  /** The accessible name (and tooltip) of the button — required, passed translated. */\n  label: string;\n  /**\n   * sm · md · lg, or `icon` (a square).\n   * @default \"icon\"\n   */\n  size?: ButtonProps[\"size\"];\n};\n\n/** An icon-only button: `label` is required, it is its accessible name. Loading or with a status, the glyph takes the icon's place. */\nexport function IconButton({ label, size = \"icon\", children, ...props }: IconButtonProps) {\n  const swap = props.indicator !== false && !props.asChild && (props.loading || props.status);\n  return (\n    <Button aria-label={label} title={label} size={size} {...props}>\n      {swap ? null : children}\n    </Button>\n  );\n}\n","// The button's variants, written once as classes of the Krizaka tokens: the web wears them with `tv(buttonRecipe)`\n// (button.tsx), React Native reads the same classes into styles (native/button.tsx, `nativeRecipe`).\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const buttonRecipe = defineRecipe({\n  base:\n    \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n    \"disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98] \" +\n    // Busy is not unavailable: a loading button keeps its colour (it is disabled only so it is not pressed twice).\n    \"[&[data-loading]]:opacity-100\",\n  variants: {\n    variant: {\n      primary: \"bg-accent text-on-accent shadow-sm hover:bg-accent-hover\",\n      // The brand's signature: accent → accent-2 (on-accent reads on both stops, tested in @krizaka/tokens).\n      gradient: \"bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110\",\n      secondary: \"border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3\",\n      outline: \"border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent\",\n      ghost: \"text-fg-secondary hover:bg-surface-2 hover:text-fg\",\n      // The border and the tint carry the danger; the label stays the primary text role, legible on the tint at rest\n      // and hovered over every surface (`text-fg-danger` is for text set directly on a surface).\n      danger: \"border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20\",\n    },\n    size: { sm: \"h-8 px-3 text-xs\", md: \"h-10 px-4 text-sm\", lg: \"h-12 px-6 text-sm\", icon: \"h-10 w-10\" },\n    // `cut`: the Krizaka chamfer — 45° corners (CSS corner-shape, where supported; rounded elsewhere). The border, the\n    // focus ring and the hover follow the cut, unlike a clip-path.\n    shape: { rounded: \"rounded-lg\", pill: \"rounded-full\", cut: \"rounded-[10px] [corner-shape:bevel]\" },\n  },\n  defaultVariants: { variant: \"secondary\", size: \"md\", shape: \"rounded\" },\n});\n"],"mappings":"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","names":[]}

package/dist/chunk-DZU6RMYD.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/button/button.tsx","../src/spinner/glyph.tsx","../src/button/recipe.ts"],"sourcesContent":["// Server-safe: no hook, no context. `buttonVariants` styles a <Link> or a Server Component without the component.\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { LoaderGlyph } from \"../spinner/glyph\";\nimport { buttonRecipe } from \"./recipe\";\n\nexport const buttonVariants = tv(buttonRecipe);\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n\nexport type ButtonProps = React.ComponentProps<\"button\"> &\n  ButtonVariants & {\n    /**\n     * The look: `primary` (the accent), `gradient` (accent → accent-2), `secondary` (a raised surface), `outline`,\n     * `ghost`, `danger`.\n     * @default \"secondary\"\n     */\n    variant?: ButtonVariants[\"variant\"];\n    /**\n     * sm · md · lg, or `icon` (a square).\n     * @default \"md\"\n     */\n    size?: ButtonVariants[\"size\"];\n    /**\n     * rounded · pill · cut (45° corners, the Krizaka chamfer).\n     * @default \"rounded\"\n     */\n    shape?: ButtonVariants[\"shape\"];\n    /** Renders the child (e.g. a <Link>) instead of the <button>, with props, classes and ref merged. */\n    asChild?: boolean;\n    /**\n     * Disables and signals the wait (aria-busy, data-loading) and shows the Krizaka loader glyph before the label; the\n     * button keeps its colour.\n     */\n    loading?: boolean;\n    /**\n     * Between 0 and 1, while `loading`: the glyph's trace and a light fill across the button grow to the value (an\n     * upload, an export).\n     */\n    progress?: number | null;\n    /**\n     * How the action ended: `success` draws a check, `error` a cross (and the button shakes its head once); a ring of\n     * the status colour opens around it. Clear it to return to rest.\n     */\n    status?: \"success\" | \"error\" | null;\n    /** A message announced politely by assistive technology when it changes (“Saved”, “Upload failed”) — passed translated. */\n    announce?: string;\n    /**\n     * Shows the glyph while `loading` / with a `status`. `false`: you draw your own.\n     * @default true\n     */\n    indicator?: boolean;\n    /** A sheen of light crosses the button on hover — for the one action a page is about. */\n    shimmer?: boolean;\n    /** The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch). */\n    magnetic?: boolean;\n  };\n\nconst STATUS_TEXT = { success: \"text-fg-success\", error: \"text-fg-danger\" } as const;\n\nexport function Button({\n  asChild,\n  loading,\n  progress,\n  status,\n  announce,\n  indicator = true,\n  shimmer,\n  magnetic,\n  variant,\n  size,\n  shape,\n  className,\n  disabled,\n  children,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  const known = loading && typeof progress === \"number\" && Number.isFinite(progress);\n  const ratio = known ? Math.min(1, Math.max(0, progress)) : 0;\n  const glyph = indicator && !asChild && (loading || status) ? (status ?? \"loading\") : null;\n  // On a filled variant the glyph stays in the label's colour; on the others it takes the status colour.\n  const filled = variant === \"primary\" || variant === \"gradient\";\n  const button = (\n    <Comp\n      type={asChild ? undefined : \"button\"}\n      aria-busy={loading || undefined}\n      data-loading={loading ? \"\" : undefined}\n      data-variant={variant ?? \"secondary\"}\n      data-kz-status={status ?? undefined}\n      data-kz-magnetic={magnetic ? \"\" : undefined}\n      disabled={asChild ? undefined : disabled || loading}\n      aria-disabled={asChild && (disabled || loading) ? true : undefined}\n      className={buttonVariants({\n        variant,\n        size,\n        shape,\n        className: cn(known && \"relative isolate overflow-hidden\", shimmer && \"kz-sheen\", className),\n      })}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {known && (\n            <span aria-hidden className=\"absolute inset-y-0 left-0 -z-10 bg-current opacity-15 transition-[width] duration-500\" style={{ width: `${ratio * 100}%` }} />\n          )}\n          {glyph && (\n            <span\n              aria-hidden\n              data-slot=\"indicator\"\n              className=\"-my-1 grid grid-cols-[1fr] transition-[grid-template-columns,margin,opacity] duration-300 starting:-mr-2 starting:grid-cols-[0fr] starting:opacity-0\"\n            >\n              <span className=\"overflow-hidden\">\n                <LoaderGlyph state={glyph} value={known ? ratio : null} className={cn(\"h-4 w-4\", glyph !== \"loading\" && !filled && STATUS_TEXT[glyph])} />\n              </span>\n            </span>\n          )}\n          {children}\n        </>\n      )}\n    </Comp>\n  );\n  if (announce === undefined || asChild) return button;\n  return (\n    <>\n      {button}\n      <span role=\"status\" className=\"sr-only\">\n        {announce}\n      </span>\n    </>\n  );\n}\n\nexport type IconButtonProps = Omit<ButtonProps, \"size\"> & {\n  /** The accessible name (and tooltip) of the button — required, passed translated. */\n  label: string;\n  /**\n   * sm · md · lg, or `icon` (a square).\n   * @default \"icon\"\n   */\n  size?: ButtonProps[\"size\"];\n};\n\n/** An icon-only button: `label` is required, it is its accessible name. Loading or with a status, the glyph takes the icon's place. */\nexport function IconButton({ label, size = \"icon\", children, ...props }: IconButtonProps) {\n  const swap = props.indicator !== false && !props.asChild && (props.loading || props.status);\n  return (\n    <Button aria-label={label} title={label} size={size} {...props}>\n      {swap ? null : children}\n    </Button>\n  );\n}\n","// The Krizaka loader glyph, server-safe: a hexagon (the marks' shape) traced by a segment of light around a node that\n// breathes; determinate, it fills to its value; done, the trace closes and a check (or a cross) draws itself. Animated by\n// motion.css (`kz-loader-*`); still under prefers-reduced-motion — a segment at rest and the node lit, never blank.\nimport type * as React from \"react\";\n\n/** The hexagon, pointy top, radius 9 around (12, 12). */\nconst HEX = \"M12 3 19.79 7.5 19.79 16.5 12 21 4.21 16.5 4.21 7.5Z\";\n\n/** What the glyph shows: a wait (with an optional value), or how it ended. */\nexport type LoaderGlyphState = \"loading\" | \"success\" | \"error\";\n\nexport interface LoaderGlyphProps extends Omit<React.ComponentProps<\"svg\">, \"children\"> {\n  /** loading · success · error. */\n  state?: LoaderGlyphState;\n  /** Between 0 and 1: a determinate wait, the trace grows to it. Absent: indeterminate. */\n  value?: number | null;\n}\n\n/** The glyph alone (decorative): the Spinner, the Loader and the Button's `loading` draw it. */\nexport function LoaderGlyph({ state = \"loading\", value, ...props }: LoaderGlyphProps) {\n  const known = typeof value === \"number\" && Number.isFinite(value);\n  const fill = state !== \"loading\" ? 100 : known ? Math.round(Math.min(1, Math.max(0, value)) * 100) : null;\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden data-state={state} data-progress={fill === null ? undefined : fill} {...props}>\n      <path d={HEX} stroke=\"currentColor\" strokeOpacity=\"0.22\" strokeWidth=\"2.2\" strokeLinejoin=\"round\" />\n      <path\n        d={HEX}\n        pathLength={100}\n        stroke=\"currentColor\"\n        strokeWidth=\"2.2\"\n        strokeLinejoin=\"round\"\n        strokeLinecap=\"round\"\n        className=\"kz-loader-trace\"\n        strokeDasharray={fill === null ? undefined : `${fill} ${100 - fill}`}\n      />\n      {state === \"loading\" && <circle cx=\"12\" cy=\"12\" r=\"2.6\" fill=\"currentColor\" className=\"kz-loader-node\" />}\n      {state === \"success\" && <path d=\"M8.3 12.3l2.6 2.6 4.9-5.3\" pathLength={20} stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"kz-loader-mark\" />}\n      {state === \"error\" && <path d=\"M9.4 9.4l5.2 5.2M14.6 9.4l-5.2 5.2\" pathLength={20} stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" className=\"kz-loader-mark\" />}\n    </svg>\n  );\n}\n","// The button's variants, written once as classes of the Krizaka tokens: the web wears them with `tv(buttonRecipe)`\n// (button.tsx), React Native reads the same classes into styles (native/button.tsx, `nativeRecipe`).\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const buttonRecipe = defineRecipe({\n  base:\n    \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n    \"disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98] \" +\n    // Busy is not unavailable: a loading button keeps its colour (it is disabled only so it is not pressed twice).\n    \"[&[data-loading]]:opacity-100\",\n  variants: {\n    variant: {\n      primary: \"bg-accent text-on-accent shadow-sm hover:bg-accent-hover\",\n      // The brand's signature: accent → accent-2 (on-accent reads on both stops, tested in @krizaka/tokens).\n      gradient: \"bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110\",\n      secondary: \"border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3\",\n      outline: \"border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent\",\n      ghost: \"text-fg-secondary hover:bg-surface-2 hover:text-fg\",\n      // The border and the tint carry the danger; the label stays the primary text role, legible on the tint at rest\n      // and hovered over every surface (`text-fg-danger` is for text set directly on a surface).\n      danger: \"border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20\",\n    },\n    size: { sm: \"h-8 px-3 text-xs\", md: \"h-10 px-4 text-sm\", lg: \"h-12 px-6 text-sm\", icon: \"h-10 w-10\" },\n    // `cut`: the Krizaka chamfer — 45° corners (CSS corner-shape, where supported; rounded elsewhere). The border, the\n    // focus ring and the hover follow the cut, unlike a clip-path.\n    shape: { rounded: \"rounded-lg\", pill: \"rounded-full\", cut: \"rounded-[10px] [corner-shape:bevel]\" },\n  },\n  defaultVariants: { variant: \"secondary\", size: \"md\", shape: \"rounded\" },\n});\n"],"mappings":"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","names":["jsx","jsxs"]}

package/dist/chunk-HAQWKORZ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/motion/MotionObserver.tsx","../src/motion/RotatingWord.tsx"],"sourcesContent":["import { useEffect } from \"react\";\n\n/** What gets `data-offscreen` while out of view: its animations pause (motion.css). */\nconst SCOPES = \".kz-backdrop, .kz-iso, [data-motion-scope], main > section, main > header, footer\";\nconst REVEAL = \"[data-reveal]:not(.kz-in)\";\nconst MAGNETIC = \"[data-kz-magnetic]\";\n/** How long after `load` the first screen's loops wait before they start (LCP first). */\nconst SETTLE_MS = 1200;\n\nexport interface MotionObserverProps {\n  /**\n   * Hold the loops of the page (`.kz-loop`, the backdrop's drift) still until the page has loaded and settled\n   * (`html[data-motion=\"settling\"]` → `\"ready\"`, about 1.2 s after `load`): nothing repaints the first screen while it\n   * paints.\n   * @default true\n   */\n  settle?: boolean;\n  /**\n   * Pause every animation of a scope while it is off screen (`data-offscreen` on `.kz-backdrop`, `.kz-iso`,\n   * `[data-motion-scope]` and the page's sections).\n   * @default true\n   */\n  pauseOffscreen?: boolean;\n}\n\n/**\n * The Krizaka motion conductor. Mount it once at the root of the app; it renders nothing and keeps no animation frame\n * running. It reveals every `[data-reveal]` element once as it enters the viewport (including elements added later:\n * client navigation needs nothing more), pauses what is off screen, lets the first screen settle before its loops\n * start, feeds the pointer to `.kz-spotlight` cards (`--spot-x`, `--spot-y`) and to `[data-kz-magnetic]` elements\n * (`Button magnetic`). Under prefers-reduced-motion everything is revealed at once and nothing follows the pointer.\n */\nexport function MotionObserver({ settle = true, pauseOffscreen = true }: MotionObserverProps = {}): null {\n  useEffect(() => {\n    const root = document.documentElement;\n    const reduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n    let settleTimer: ReturnType<typeof setTimeout> | undefined;\n    const ready = () => (settleTimer = setTimeout(() => root.setAttribute(\"data-motion\", \"ready\"), SETTLE_MS));\n    if (settle && !reduce && root.getAttribute(\"data-motion\") !== \"ready\") {\n      root.setAttribute(\"data-motion\", \"settling\");\n      if (document.readyState === \"complete\") ready();\n      else window.addEventListener(\"load\", ready, { once: true });\n    } else root.setAttribute(\"data-motion\", \"ready\");\n\n    const revealIo = reduce\n      ? null\n      : new IntersectionObserver(\n          (entries) => {\n            for (const entry of entries) {\n              if (!entry.isIntersecting) continue;\n              entry.target.classList.add(\"kz-in\");\n              revealIo!.unobserve(entry.target);\n            }\n          },\n          { rootMargin: \"0px 0px -8% 0px\", threshold: 0.12 },\n        );\n    const scopeIo = pauseOffscreen\n      ? new IntersectionObserver(\n          (entries) => {\n            for (const entry of entries) entry.target.toggleAttribute(\"data-offscreen\", !entry.isIntersecting);\n          },\n          { rootMargin: \"120px 0px\" },\n        )\n      : null;\n\n    const reveal = (el: Element) => (revealIo ? revealIo.observe(el) : el.classList.add(\"kz-in\"));\n    const watch = (scope: ParentNode) => {\n      scope.querySelectorAll(REVEAL).forEach(reveal);\n      if (scopeIo) scope.querySelectorAll(SCOPES).forEach((el) => scopeIo.observe(el));\n    };\n    watch(document);\n    const mo = new MutationObserver((records) => {\n      for (const record of records)\n        record.addedNodes.forEach((node) => {\n          if (!(node instanceof Element)) return;\n          if (node.matches(REVEAL)) reveal(node);\n          if (scopeIo && node.matches(SCOPES)) scopeIo.observe(node);\n          watch(node);\n        });\n    });\n    mo.observe(document.body, { childList: true, subtree: true });\n\n    return () => {\n      clearTimeout(settleTimer);\n      window.removeEventListener(\"load\", ready);\n      revealIo?.disconnect();\n      scopeIo?.disconnect();\n      mo.disconnect();\n    };\n  }, [settle, pauseOffscreen]);\n\n  useEffect(() => {\n    const reduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n    const fine = window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches;\n    let magnet: HTMLElement | null = null;\n    const release = () => {\n      magnet?.style.removeProperty(\"--kz-mag-x\");\n      magnet?.style.removeProperty(\"--kz-mag-y\");\n      magnet = null;\n    };\n    const move = (e: PointerEvent) => {\n      const target = e.target as Element | null;\n      const card = target?.closest?.(\".kz-spotlight\") as HTMLElement | null;\n      if (card) {\n        const box = card.getBoundingClientRect();\n        card.style.setProperty(\"--spot-x\", `${e.clientX - box.left}px`);\n        card.style.setProperty(\"--spot-y\", `${e.clientY - box.top}px`);\n      }\n      if (reduce || !fine) return;\n      const el = target?.closest?.(MAGNETIC) as HTMLElement | null;\n      if (el !== magnet) release();\n      if (!el) return;\n      magnet = el;\n      const box = el.getBoundingClientRect();\n      // A lean of at most ~6 px, a fraction of the pointer's offset from the centre.\n      const pull = (offset: number, half: number) => `${(Math.max(-1, Math.min(1, offset / half)) * 6).toFixed(2)}px`;\n      el.style.setProperty(\"--kz-mag-x\", pull(e.clientX - box.left - box.width / 2, box.width / 2));\n      el.style.setProperty(\"--kz-mag-y\", pull(e.clientY - box.top - box.height / 2, box.height / 2));\n    };\n    document.addEventListener(\"pointermove\", move, { passive: true });\n    document.addEventListener(\"pointerleave\", release);\n    return () => {\n      document.removeEventListener(\"pointermove\", move);\n      document.removeEventListener(\"pointerleave\", release);\n      release();\n    };\n  }, []);\n\n  return null;\n}\n","import { useEffect, useState } from \"react\";\n\nexport interface RotatingWordProps {\n  /** The alternatives, passed translated; the first one is what the server renders. */\n  words: readonly string[];\n  /**\n   * Milliseconds each word stays.\n   * @default 2600\n   */\n  interval?: number;\n  /** Classes for every word (a colour, gradient text). */\n  className?: string;\n}\n\n/**\n * A word that rolls through alternatives — the Krizaka headline signature. Every word shares one grid cell from the\n * first paint, so the line keeps the width of the longest one (no layout shift); the current one rolls in. The server\n * render shows the first word; it stays put under prefers-reduced-motion and while the tab is hidden. Decorative\n * (`aria-hidden`): give the heading a stable accessible label.\n */\nexport function RotatingWord({ words, interval = 2600, className }: RotatingWordProps) {\n  const [i, setI] = useState(0);\n  useEffect(() => {\n    if (words.length < 2 || window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n    const timer = setInterval(() => {\n      if (!document.hidden) setI((k) => (k + 1) % words.length);\n    }, interval);\n    return () => clearInterval(timer);\n  }, [words.length, interval]);\n  return (\n    <span aria-hidden className=\"kz-rotating\">\n      {words.map((word, k) => (\n        <span key={word} data-active={k === i} className={className}>\n          {word}\n        </span>\n      ))}\n    </span>\n  );\n}\n"],"mappings":";;;AAAA,SAAS,iBAAiB;AAG1B,IAAM,SAAS;AACf,IAAM,SAAS;AACf,IAAM,WAAW;AAEjB,IAAM,YAAY;AAyBX,SAAS,eAAe,EAAE,SAAS,MAAM,iBAAiB,KAAK,IAAyB,CAAC,GAAS;AACvG,YAAU,MAAM;AACd,UAAM,OAAO,SAAS;AACtB,UAAM,SAAS,OAAO,WAAW,kCAAkC,EAAE;AAErE,QAAI;AACJ,UAAM,QAAQ,MAAO,cAAc,WAAW,MAAM,KAAK,aAAa,eAAe,OAAO,GAAG,SAAS;AACxG,QAAI,UAAU,CAAC,UAAU,KAAK,aAAa,aAAa,MAAM,SAAS;AACrE,WAAK,aAAa,eAAe,UAAU;AAC3C,UAAI,SAAS,eAAe,WAAY,OAAM;AAAA,UACzC,QAAO,iBAAiB,QAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAAA,IAC5D,MAAO,MAAK,aAAa,eAAe,OAAO;AAE/C,UAAM,WAAW,SACb,OACA,IAAI;AAAA,MACF,CAAC,YAAY;AACX,mBAAW,SAAS,SAAS;AAC3B,cAAI,CAAC,MAAM,eAAgB;AAC3B,gBAAM,OAAO,UAAU,IAAI,OAAO;AAClC,mBAAU,UAAU,MAAM,MAAM;AAAA,QAClC;AAAA,MACF;AAAA,MACA,EAAE,YAAY,mBAAmB,WAAW,KAAK;AAAA,IACnD;AACJ,UAAM,UAAU,iBACZ,IAAI;AAAA,MACF,CAAC,YAAY;AACX,mBAAW,SAAS,QAAS,OAAM,OAAO,gBAAgB,kBAAkB,CAAC,MAAM,cAAc;AAAA,MACnG;AAAA,MACA,EAAE,YAAY,YAAY;AAAA,IAC5B,IACA;AAEJ,UAAM,SAAS,CAAC,OAAiB,WAAW,SAAS,QAAQ,EAAE,IAAI,GAAG,UAAU,IAAI,OAAO;AAC3F,UAAM,QAAQ,CAAC,UAAsB;AACnC,YAAM,iBAAiB,MAAM,EAAE,QAAQ,MAAM;AAC7C,UAAI,QAAS,OAAM,iBAAiB,MAAM,EAAE,QAAQ,CAAC,OAAO,QAAQ,QAAQ,EAAE,CAAC;AAAA,IACjF;AACA,UAAM,QAAQ;AACd,UAAM,KAAK,IAAI,iBAAiB,CAAC,YAAY;AAC3C,iBAAW,UAAU;AACnB,eAAO,WAAW,QAAQ,CAAC,SAAS;AAClC,cAAI,EAAE,gBAAgB,SAAU;AAChC,cAAI,KAAK,QAAQ,MAAM,EAAG,QAAO,IAAI;AACrC,cAAI,WAAW,KAAK,QAAQ,MAAM,EAAG,SAAQ,QAAQ,IAAI;AACzD,gBAAM,IAAI;AAAA,QACZ,CAAC;AAAA,IACL,CAAC;AACD,OAAG,QAAQ,SAAS,MAAM,EAAE,WAAW,MAAM,SAAS,KAAK,CAAC;AAE5D,WAAO,MAAM;AACX,mBAAa,WAAW;AACxB,aAAO,oBAAoB,QAAQ,KAAK;AACxC,gBAAU,WAAW;AACrB,eAAS,WAAW;AACpB,SAAG,WAAW;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,QAAQ,cAAc,CAAC;AAE3B,YAAU,MAAM;AACd,UAAM,SAAS,OAAO,WAAW,kCAAkC,EAAE;AACrE,UAAM,OAAO,OAAO,WAAW,oCAAoC,EAAE;AACrE,QAAI,SAA6B;AACjC,UAAM,UAAU,MAAM;AACpB,cAAQ,MAAM,eAAe,YAAY;AACzC,cAAQ,MAAM,eAAe,YAAY;AACzC,eAAS;AAAA,IACX;AACA,UAAM,OAAO,CAAC,MAAoB;AAChC,YAAM,SAAS,EAAE;AACjB,YAAM,OAAO,QAAQ,UAAU,eAAe;AAC9C,UAAI,MAAM;AACR,cAAMA,OAAM,KAAK,sBAAsB;AACvC,aAAK,MAAM,YAAY,YAAY,GAAG,EAAE,UAAUA,KAAI,IAAI,IAAI;AAC9D,aAAK,MAAM,YAAY,YAAY,GAAG,EAAE,UAAUA,KAAI,GAAG,IAAI;AAAA,MAC/D;AACA,UAAI,UAAU,CAAC,KAAM;AACrB,YAAM,KAAK,QAAQ,UAAU,QAAQ;AACrC,UAAI,OAAO,OAAQ,SAAQ;AAC3B,UAAI,CAAC,GAAI;AACT,eAAS;AACT,YAAM,MAAM,GAAG,sBAAsB;AAErC,YAAM,OAAO,CAAC,QAAgB,SAAiB,IAAI,KAAK,IAAI,IAAI,KAAK,IAAI,GAAG,SAAS,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,CAAC;AAC3G,SAAG,MAAM,YAAY,cAAc,KAAK,EAAE,UAAU,IAAI,OAAO,IAAI,QAAQ,GAAG,IAAI,QAAQ,CAAC,CAAC;AAC5F,SAAG,MAAM,YAAY,cAAc,KAAK,EAAE,UAAU,IAAI,MAAM,IAAI,SAAS,GAAG,IAAI,SAAS,CAAC,CAAC;AAAA,IAC/F;AACA,aAAS,iBAAiB,eAAe,MAAM,EAAE,SAAS,KAAK,CAAC;AAChE,aAAS,iBAAiB,gBAAgB,OAAO;AACjD,WAAO,MAAM;AACX,eAAS,oBAAoB,eAAe,IAAI;AAChD,eAAS,oBAAoB,gBAAgB,OAAO;AACpD,cAAQ;AAAA,IACV;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;;;AClIA,SAAS,aAAAC,YAAW,gBAAgB;AAgC5B;AAZD,SAAS,aAAa,EAAE,OAAO,WAAW,MAAM,UAAU,GAAsB;AACrF,QAAM,CAAC,GAAG,IAAI,IAAI,SAAS,CAAC;AAC5B,EAAAA,WAAU,MAAM;AACd,QAAI,MAAM,SAAS,KAAK,OAAO,WAAW,kCAAkC,EAAE,QAAS;AACvF,UAAM,QAAQ,YAAY,MAAM;AAC9B,UAAI,CAAC,SAAS,OAAQ,MAAK,CAAC,OAAO,IAAI,KAAK,MAAM,MAAM;AAAA,IAC1D,GAAG,QAAQ;AACX,WAAO,MAAM,cAAc,KAAK;AAAA,EAClC,GAAG,CAAC,MAAM,QAAQ,QAAQ,CAAC;AAC3B,SACE,oBAAC,UAAK,eAAW,MAAC,WAAU,eACzB,gBAAM,IAAI,CAAC,MAAM,MAChB,oBAAC,UAAgB,eAAa,MAAM,GAAG,WACpC,kBADQ,IAEX,CACD,GACH;AAEJ;","names":["box","useEffect"]}

package/dist/chunk-KM6VAKIE.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/slider/slider.tsx"],"sourcesContent":["// Client. Radix Slider: role=\"slider\" on each thumb, arrows / Page Up / Page Down / Home / End, a range with two\n// thumbs, horizontal or vertical. The words arrive as props: `label` names the thumb(s), `formatValue` gives the\n// aria-valuetext and the value shown (above the track, or floating over the thumb while it is touched). `ticks` draws the\n// graduations of the steps (and `marks` their words under the track); `tone` fills with the brand's gradient or its\n// accent alone.\nimport { Slider as SliderPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { tv } from \"../tv\";\n\nexport const slider = tv({\n  slots: {\n    root: \"flex flex-col gap-2 data-[orientation=vertical]:h-full data-[orientation=vertical]:items-center\",\n    header: \"flex items-baseline justify-between gap-3 text-xs font-semibold text-fg-secondary\",\n    value: \"font-mono text-[11px] tabular-nums text-fg-secondary\",\n    control:\n      \"relative flex touch-none select-none items-center data-disabled:cursor-not-allowed data-disabled:opacity-40 \" +\n      \"data-[orientation=horizontal]:h-6 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-6 data-[orientation=vertical]:flex-col\",\n    track:\n      \"relative grow overflow-hidden rounded-full bg-surface-3 inset-shadow-well \" +\n      \"data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5\",\n    range: \"absolute rounded-full data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\",\n    thumb:\n      \"group/thumb relative block h-5 w-5 cursor-grab rounded-full border-2 border-accent bg-fg-on-media shadow-raised transition-[box-shadow,scale] duration-150 \" +\n      \"hover:scale-110 focus-visible:outline-hidden focus-visible:focus-ring active:scale-110 active:cursor-grabbing motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:active:scale-100\",\n    // The value over the thumb: shown while the thumb is hovered, focused or held.\n    bubble:\n      \"pointer-events-none absolute bottom-full left-1/2 mb-2.5 -translate-x-1/2 whitespace-nowrap rounded-lg bg-fg px-2 py-1 font-mono text-[11px] font-semibold tabular-nums text-surface-0 opacity-0 shadow-floating \" +\n      \"transition-opacity duration-150 after:absolute after:left-1/2 after:top-full after:-translate-x-1/2 after:border-4 after:border-transparent after:border-t-fg \" +\n      \"group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100 group-active/thumb:opacity-100 data-[always]:opacity-100 motion-reduce:transition-none\",\n    bubbleVertical: \"bottom-auto left-full top-1/2 mb-0 ml-3 -translate-x-0 -translate-y-1/2 after:hidden\",\n    ticks: \"pointer-events-none absolute inset-0\",\n    tick: \"absolute rounded-full bg-border-strong data-[on]:bg-on-accent/70 data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-px data-[orientation=horizontal]:-translate-x-1/2 data-[orientation=horizontal]:-translate-y-1/2 data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:h-px data-[orientation=vertical]:w-1 data-[orientation=vertical]:-translate-x-1/2 data-[orientation=vertical]:translate-y-1/2\",\n    marks: \"relative h-4 w-full text-[11px] font-medium tabular-nums text-fg-secondary\",\n    mark: \"absolute top-0 -translate-x-1/2 whitespace-nowrap first:translate-x-0 last:-translate-x-full\",\n  },\n  variants: {\n    tone: {\n      /** The brand's signature: accent → accent-2, a glow under it. */\n      gradient: { range: \"bg-linear-to-r from-accent to-accent-2 shadow-glow data-[orientation=vertical]:bg-linear-to-t\" },\n      /** The accent alone. */\n      solid: { range: \"bg-accent\" },\n    },\n    size: {\n      md: {},\n      lg: {\n        track: \"data-[orientation=horizontal]:h-2.5 data-[orientation=vertical]:w-2.5\",\n        thumb: \"h-6 w-6\",\n        control: \"data-[orientation=horizontal]:h-8 data-[orientation=vertical]:w-8\",\n      },\n    },\n  },\n  defaultVariants: { tone: \"gradient\", size: \"md\" },\n});\n\nexport type SliderValue = number | [number, number];\n\nexport type SliderMark = {\n  /** Where the mark stands. */\n  value: number;\n  /** Its words under the track (\"0\", \"50 %\", \"Max\"), passed translated. */\n  label: string;\n};\n\nexport type SliderProps<V extends SliderValue = number> = Omit<\n  React.ComponentProps<typeof SliderPrimitive.Root>,\n  \"value\" | \"defaultValue\" | \"onValueChange\" | \"onValueCommit\" | \"children\"\n> & {\n  /** One number (a thumb) or two (a range). Controlled with `onValueChange`. */\n  value?: V;\n  /** The value at first, uncontrolled: one number, or two for a range. */\n  defaultValue?: V;\n  /** Called on every move, with one number or two. */\n  onValueChange?: (value: V) => void;\n  /** Called once the drag or the key press ends. */\n  onValueCommit?: (value: V) => void;\n  /** The accessible name — of the thumb, or of both thumbs of a range — passed translated. */\n  label: string;\n  /** For a range: each thumb's own name ([\"Minimum\", \"Maximum\"]), passed translated. */\n  thumbLabels?: [string, string];\n  /** The value as words (aria-valuetext) and as shown: \"1.5×\", \"−12 %\", \"3 min\". */\n  formatValue?: (value: number) => string;\n  /** Shows the label and the value above the track. Without it, `label` only names the thumb. */\n  showLabel?: boolean;\n  /** Shows the value floating over the thumb while it is hovered, focused or held (`\"always\"`: at all times). */\n  floatingValue?: boolean | \"always\";\n  /** Fills from this value instead of the minimum (a ±range from 0: brightness, balance). One horizontal thumb only. */\n  origin?: number;\n  /** Draws a graduation at every step (`true`, up to 40 of them) or at the values given. */\n  ticks?: boolean | readonly number[];\n  /** Words under the track at some values (`[{ value: 0, label: \"0\" }, { value: 100, label: \"100\" }]`). Horizontal only. */\n  marks?: readonly SliderMark[];\n  /**\n   * `gradient` (the brand's accent → accent-2, a glow) or `solid` (the accent alone).\n   * @default \"gradient\"\n   */\n  tone?: \"gradient\" | \"solid\";\n  /**\n   * md · lg (a thicker track and thumb: a hero control, a touch screen).\n   * @default \"md\"\n   */\n  size?: \"md\" | \"lg\";\n};\n\nconst toArray = (v: SliderValue | undefined) => (v === undefined ? undefined : typeof v === \"number\" ? [v] : v);\n\n/** A slider on one value or a range: `value`/`defaultValue` + `onValueChange`, `min`, `max`, `step`, `orientation`. */\nexport function Slider<V extends SliderValue = number>({\n  value,\n  defaultValue,\n  onValueChange,\n  onValueCommit,\n  label,\n  thumbLabels,\n  formatValue = String,\n  showLabel,\n  floatingValue,\n  origin,\n  ticks,\n  marks,\n  tone,\n  size,\n  min = 0,\n  max = 100,\n  step = 1,\n  orientation = \"horizontal\",\n  className,\n  ...props\n}: SliderProps<V>) {\n  const s = slider({ tone, size });\n  const range = Array.isArray(value ?? defaultValue);\n  const vertical = orientation === \"vertical\";\n  const [inner, setInner] = React.useState(() => toArray(defaultValue) ?? [min]);\n  const current = toArray(value) ?? inner;\n  const out = (next: number[]) => (range ? next : next[0]) as V;\n  const pct = (v: number) => ((v - min) / (max - min || 1)) * 100;\n  const fill =\n    origin !== undefined && !range && !vertical\n      ? { left: `${Math.min(pct(origin), pct(current[0]!))}%`, right: `${100 - Math.max(pct(origin), pct(current[0]!))}%` }\n      : undefined;\n  const lo = range ? Math.min(...current) : (origin ?? min);\n  const hi = range ? Math.max(...current) : current[0]!;\n  const tickValues = ticks === true ? (max - min) / step <= 40 ? Array.from({ length: Math.round((max - min) / step) + 1 }, (_, i) => min + i * step) : [] : ticks ? [...ticks] : [];\n  const id = React.useId();\n  return (\n    <div className={s.root({ className })} data-range={range ? \"\" : undefined} data-orientation={orientation}>\n      {showLabel && (\n        <div className={s.header()}>\n          <span id={`${id}-label`}>{label}</span>\n          <span className={s.value()} aria-hidden>\n            {current.map(formatValue).join(\" – \")}\n          </span>\n        </div>\n      )}\n      <SliderPrimitive.Root\n        min={min}\n        max={max}\n        step={step}\n        orientation={orientation}\n        value={current}\n        onValueChange={(next) => {\n          if (value === undefined) setInner(next);\n          onValueChange?.(out(next));\n        }}\n        onValueCommit={onValueCommit && ((next) => onValueCommit(out(next)))}\n        className={s.control()}\n        {...props}\n      >\n        <SliderPrimitive.Track className={s.track()}>\n          {fill ? <span data-origin=\"\" data-orientation={orientation} className={s.range()} style={fill} /> : <SliderPrimitive.Range className={s.range()} />}\n          {tickValues.length ? (\n            <span aria-hidden className={s.ticks()}>\n              {tickValues.map((t) => (\n                <span\n                  key={t}\n                  data-orientation={orientation}\n                  data-on={t > lo && t < hi ? \"\" : undefined}\n                  className={s.tick()}\n                  style={vertical ? { bottom: `${pct(t)}%` } : { left: `${pct(t)}%` }}\n                />\n              ))}\n            </span>\n          ) : null}\n        </SliderPrimitive.Track>\n        {current.map((v, i) => (\n          <SliderPrimitive.Thumb\n            key={i}\n            aria-label={range ? (thumbLabels?.[i] ?? label) : showLabel ? undefined : label}\n            aria-labelledby={!range && showLabel ? `${id}-label` : undefined}\n            aria-valuetext={formatValue(v)}\n            className={s.thumb()}\n          >\n            {floatingValue ? (\n              <span aria-hidden data-always={floatingValue === \"always\" ? \"\" : undefined} className={s.bubble({ className: vertical ? s.bubbleVertical() : undefined })}>\n                {formatValue(v)}\n              </span>\n            ) : null}\n          </SliderPrimitive.Thumb>\n        ))}\n      </SliderPrimitive.Root>\n      {marks?.length && !vertical ? (\n        <div aria-hidden className={s.marks()}>\n          {marks.map((m) => (\n            <span key={m.value} className={s.mark()} style={{ left: `${pct(m.value)}%` }}>\n              {m.label}\n            </span>\n          ))}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-MQPC3P4T.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/card/card.tsx","../src/card/recipe.ts","../src/skeleton/skeleton.tsx"],"sourcesContent":["// Server-safe: no hook, no context. One `tv` definition with slots: each part takes its slot, and a product overrides\n// any part through `className` (merged last by tailwind-merge).\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { cardRecipe } from \"./recipe\";\n\nexport const card = tv(cardRecipe);\n\ntype CardVariants = VariantProps<typeof card>;\n/** The parts without a variant read the default slots: no context, so server-safe. */\nconst slots = card();\n\nexport type CardRootProps = React.ComponentProps<\"div\"> &\n  Pick<CardVariants, \"radius\" | \"tone\" | \"interactive\"> & {\n    /**\n     * md · lg · xl.\n     * @default \"xl\"\n     */\n    radius?: CardVariants[\"radius\"];\n    /**\n     * default (the base surface) · elevated (raised, a shadow) · glass (translucent, blurred).\n     * @default \"default\"\n     */\n    tone?: CardVariants[\"tone\"];\n    /** The spotlight that follows the pointer and the lift on hover: for a card that is a link. */\n    interactive?: CardVariants[\"interactive\"];\n    /** Renders the child (a link, an article) instead of the <div>, with props, classes and ref merged. */\n    asChild?: boolean;\n    /** Enters on scroll (MotionObserver): the index in the grid becomes the delay (50 ms a step, 8 steps at most). */\n    reveal?: number;\n  };\n\nexport function CardRoot({ asChild, reveal, radius, tone, interactive, className, style, ...props }: CardRootProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  const revealStyle =\n    reveal === undefined ? style : ({ ...style, \"--kz-delay\": `${Math.min(Math.max(reveal, 0), 8) * 50}ms` } as React.CSSProperties);\n  return (\n    <Comp\n      data-reveal={reveal === undefined ? undefined : \"\"}\n      data-interactive={interactive ? \"\" : undefined}\n      style={revealStyle}\n      className={card({ radius, tone, interactive }).root({ className })}\n      {...props}\n    />\n  );\n}\n\nconst ASPECT = { video: \"aspect-video\", square: \"aspect-square\", portrait: \"aspect-[3/4]\", auto: \"\" } as const;\nexport type CardMediaProps = React.ComponentProps<\"div\"> & {\n  /** The ratio of the media: video (16:9) · square · portrait (3:4) · auto (the content's). */\n  aspect?: keyof typeof ASPECT;\n};\n\nexport function CardMedia({ aspect = \"video\", className, ...props }: CardMediaProps) {\n  return <div data-aspect={aspect} className={slots.media({ className: cn(ASPECT[aspect], className) })} {...props} />;\n}\n\nexport type CardImageProps = Omit<React.ComponentProps<\"img\">, \"src\"> & {\n  /** The image's URL; `null` or nothing shows the `fallback`. */\n  src?: string | null;\n  /** Shown when there is no image: an icon, an illustration (decorative). */\n  fallback?: React.ReactNode;\n  /**\n   * When the browser loads it: `lazy` (default, a card in a list or below the fold) or `eager` for the first cards\n   * of a page — the image that is the largest contentful paint must not wait (add `fetchPriority=\"high\"`).\n   * @default \"lazy\"\n   */\n  loading?: \"lazy\" | \"eager\";\n};\n\n/** The image of a media, or its `fallback` when there is none. `alt` is empty by default: the title names the card. */\nexport function CardImage({ src, alt = \"\", fallback, loading = \"lazy\", className, ...props }: CardImageProps) {\n  if (!src) {\n    return (\n      <div data-fallback=\"\" aria-hidden className={slots.fallback({ className })}>\n        {fallback}\n      </div>\n    );\n  }\n  return <img src={src} alt={alt} loading={loading} decoding=\"async\" className={slots.image({ className })} {...props} />;\n}\n\nconst CORNER = {\n  \"top-left\": \"left-2.5 top-2.5\",\n  \"top-right\": \"right-2.5 top-2.5\",\n  \"bottom-left\": \"bottom-2.5 left-2.5\",\n  \"bottom-right\": \"bottom-2.5 right-2.5\",\n} as const;\nexport type CardOverlayProps = React.ComponentProps<\"div\"> & {\n  /** The corner of the media it sits in. */\n  corner?: keyof typeof CORNER;\n};\n\n/** What sits on the media (badges, a caption). `scrim` and `fg-on-media` are invariant: nothing to do for light. */\nexport function CardOverlay({ corner = \"top-left\", className, ...props }: CardOverlayProps) {\n  return <div data-corner={corner} className={slots.overlay({ className: cn(CORNER[corner], className) })} {...props} />;\n}\n\nexport type CardBodyProps = React.ComponentProps<\"div\"> & {\n  /**\n   * none · sm · md · lg.\n   * @default \"md\"\n   */\n  padding?: CardVariants[\"padding\"];\n};\n\nexport function CardBody({ padding, className, ...props }: CardBodyProps) {\n  return <div className={card({ padding }).body({ className })} {...props} />;\n}\n\nexport type CardTitleProps = React.ComponentProps<\"h3\"> & {\n  /** The heading level, to fit the page's outline. */\n  as?: \"h2\" | \"h3\" | \"h4\";\n};\n\nexport function CardTitle({ as: Tag = \"h3\", className, ...props }: CardTitleProps) {\n  return <Tag className={slots.title({ className })} {...props} />;\n}\n\nexport function CardDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return <p className={slots.description({ className })} {...props} />;\n}\n\nexport type CardStatProps = React.ComponentProps<\"div\"> & {\n  /** What the figure is, in small capitals above it (the figure is the children). */\n  label: React.ReactNode;\n};\n\n/** A figure put forward: the label in capitals, the value in tabular digits. */\nexport function CardStat({ label, className, children, ...props }: CardStatProps) {\n  return (\n    <div className={slots.stat({ className })} {...props}>\n      <p className={slots.statLabel()}>{label}</p>\n      <p className={slots.statValue()}>{children}</p>\n    </div>\n  );\n}\n\nexport function CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={slots.footer({ className })} {...props} />;\n}\n\n/** `Card.Root/Media/Image/Overlay/Body/Title/Description/Stat/Footer`. */\nexport const Card = {\n  Root: CardRoot,\n  Media: CardMedia,\n  Image: CardImage,\n  Overlay: CardOverlay,\n  Body: CardBody,\n  Title: CardTitle,\n  Description: CardDescription,\n  Stat: CardStat,\n  Footer: CardFooter,\n};\n","// The card's parts, radii, tones and paddings, written once as classes of the Krizaka tokens: the web wears them with\n// `tv(cardRecipe)`, React Native reads the same classes into styles (native/card.tsx): a part of the card that exists only\n// on the web (the media's zoom, the spotlight) is simply ignored there.\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const cardRecipe = defineRecipe({\n  slots: {\n    root:\n      \"group relative flex flex-col overflow-hidden border border-border-default bg-surface-1 text-fg transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    media: \"relative overflow-hidden bg-media\",\n    image: \"h-full w-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-105\",\n    fallback: \"flex h-full w-full items-center justify-center bg-linear-to-br from-accent/15 via-media to-accent-2/15 text-accent/60\",\n    overlay: \"absolute z-10 flex items-center gap-1.5\",\n    body: \"relative flex flex-1 flex-col gap-3\",\n    title: \"line-clamp-1 text-sm font-semibold text-fg transition-colors group-hover:text-fg-accent\",\n    description: \"line-clamp-2 text-xs text-fg-secondary\",\n    stat: \"min-w-0\",\n    statLabel: \"text-[10px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    statValue: \"font-display text-xl font-black tabular-nums text-fg\",\n    footer: \"relative mt-auto flex items-center gap-2 border-t border-border-subtle pt-3 text-xs text-fg-secondary\",\n  },\n  variants: {\n    radius: { md: { root: \"rounded-md\" }, lg: { root: \"rounded-lg\" }, xl: { root: \"rounded-xl\" } },\n    tone: { default: {}, elevated: { root: \"bg-surface-2 shadow-md\" }, glass: { root: \"bg-surface-1/70 backdrop-blur-md\" } },\n    interactive: { true: { root: \"kz-spotlight kz-lift hover:border-accent/50\" } },\n    padding: { none: { body: \"p-0\" }, sm: { body: \"p-3\" }, md: { body: \"p-4\" }, lg: { body: \"p-6\" } },\n  },\n  defaultVariants: { radius: \"xl\", tone: \"default\", padding: \"md\" },\n});\n","// Server-safe. A placeholder for content on its way: decorative, so hidden from assistive technology. One reflection of\n// the brand light crosses every skeleton of the page together (`background-attachment: fixed`), instead of each one\n// pulsing on its own; under reduced motion they rest, tinted.\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const skeletonVariants = tv({\n  base: \"kz-skeleton block bg-surface-3\",\n  variants: {\n    shape: { text: \"h-3 w-full rounded-sm\", circle: \"aspect-square h-10 rounded-full\", rect: \"h-24 w-full rounded-lg\" },\n  },\n  defaultVariants: { shape: \"text\" },\n});\n\nexport type SkeletonProps = React.ComponentProps<\"span\"> & {\n  /**\n   * text (a line) · circle (an avatar; give it a height) · rect (a media; give it a height).\n   * @default \"text\"\n   */\n  shape?: VariantProps<typeof skeletonVariants>[\"shape\"];\n};\n\n/** A shape the size of what is loading. Announce the wait elsewhere (`LoadingRegion` does it, with `aria-busy`). */\nexport function Skeleton({ shape, className, ...props }: SkeletonProps) {\n  return <span aria-hidden data-shape={shape ?? \"text\"} className={skeletonVariants({ shape, className })} {...props} />;\n}\n\nexport type SkeletonTextProps = React.ComponentProps<\"span\"> & {\n  /**\n   * How many lines.\n   * @default 3\n   */\n  lines?: number;\n};\n\n/** A paragraph on its way: `lines` lines, the last one shorter — like text that wraps. */\nexport function SkeletonText({ lines = 3, className, ...props }: SkeletonTextProps) {\n  return (\n    <span aria-hidden className={[\"flex w-full flex-col gap-2\", className].filter(Boolean).join(\" \")} {...props}>\n      {Array.from({ length: lines }, (_, i) => (\n        <Skeleton key={i} className={i === lines - 1 && lines > 1 ? \"w-3/5\" : undefined} />\n      ))}\n    </span>\n  );\n}\n\nexport type SkeletonShapeProps = React.ComponentProps<\"div\">;\n\n/**\n * The skeleton of the real thing: render your component with placeholder data inside, and its text, images and icons\n * become skeleton shapes in place — the exact layout, nothing to draw twice. Inert and hidden from assistive technology.\n */\nexport function SkeletonShape({ className, children, ...props }: SkeletonShapeProps) {\n  return (\n    <div aria-hidden inert className={[\"kz-skeleton-shape\", className].filter(Boolean).join(\" \")} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAEA,SAAS,YAAY;AAErB,SAAS,UAA6B;;;ACC/B,IAAM,aAAa,aAAa;AAAA,EACrC,OAAO;AAAA,IACL,MACE;AAAA,IAEF,OAAO;AAAA,IACP,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,IACX,QAAQ;AAAA,EACV;AAAA,EACA,UAAU;AAAA,IACR,QAAQ,EAAE,IAAI,EAAE,MAAM,aAAa,GAAG,IAAI,EAAE,MAAM,aAAa,GAAG,IAAI,EAAE,MAAM,aAAa,EAAE;AAAA,IAC7F,MAAM,EAAE,SAAS,CAAC,GAAG,UAAU,EAAE,MAAM,yBAAyB,GAAG,OAAO,EAAE,MAAM,mCAAmC,EAAE;AAAA,IACvH,aAAa,EAAE,MAAM,EAAE,MAAM,8CAA8C,EAAE;AAAA,IAC7E,SAAS,EAAE,MAAM,EAAE,MAAM,MAAM,GAAG,IAAI,EAAE,MAAM,MAAM,GAAG,IAAI,EAAE,MAAM,MAAM,GAAG,IAAI,EAAE,MAAM,MAAM,EAAE;AAAA,EAClG;AAAA,EACA,iBAAiB,EAAE,QAAQ,MAAM,MAAM,WAAW,SAAS,KAAK;AAClE,CAAC;;;ADWG,cA8FA,YA9FA;AA/BG,IAAM,OAAO,GAAG,UAAU;AAIjC,IAAM,QAAQ,KAAK;AAsBZ,SAAS,SAAS,EAAE,SAAS,QAAQ,QAAQ,MAAM,aAAa,WAAW,OAAO,GAAG,MAAM,GAAkB;AAClH,QAAM,OAAO,UAAU,KAAK,OAAO;AACnC,QAAM,cACJ,WAAW,SAAY,QAAS,EAAE,GAAG,OAAO,cAAc,GAAG,KAAK,IAAI,KAAK,IAAI,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK;AACzG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,WAAW,SAAY,SAAY;AAAA,MAChD,oBAAkB,cAAc,KAAK;AAAA,MACrC,OAAO;AAAA,MACP,WAAW,KAAK,EAAE,QAAQ,MAAM,YAAY,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC;AAAA,MAChE,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAM,SAAS,EAAE,OAAO,gBAAgB,QAAQ,iBAAiB,UAAU,gBAAgB,MAAM,GAAG;AAM7F,SAAS,UAAU,EAAE,SAAS,SAAS,WAAW,GAAG,MAAM,GAAmB;AACnF,SAAO,oBAAC,SAAI,eAAa,QAAQ,WAAW,MAAM,MAAM,EAAE,WAAW,GAAG,OAAO,MAAM,GAAG,SAAS,EAAE,CAAC,GAAI,GAAG,OAAO;AACpH;AAgBO,SAAS,UAAU,EAAE,KAAK,MAAM,IAAI,UAAU,UAAU,QAAQ,WAAW,GAAG,MAAM,GAAmB;AAC5G,MAAI,CAAC,KAAK;AACR,WACE,oBAAC,SAAI,iBAAc,IAAG,eAAW,MAAC,WAAW,MAAM,SAAS,EAAE,UAAU,CAAC,GACtE,oBACH;AAAA,EAEJ;AACA,SAAO,oBAAC,SAAI,KAAU,KAAU,SAAkB,UAAS,SAAQ,WAAW,MAAM,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACvH;AAEA,IAAM,SAAS;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,gBAAgB;AAClB;AAOO,SAAS,YAAY,EAAE,SAAS,YAAY,WAAW,GAAG,MAAM,GAAqB;AAC1F,SAAO,oBAAC,SAAI,eAAa,QAAQ,WAAW,MAAM,QAAQ,EAAE,WAAW,GAAG,OAAO,MAAM,GAAG,SAAS,EAAE,CAAC,GAAI,GAAG,OAAO;AACtH;AAUO,SAAS,SAAS,EAAE,SAAS,WAAW,GAAG,MAAM,GAAkB;AACxE,SAAO,oBAAC,SAAI,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC3E;AAOO,SAAS,UAAU,EAAE,IAAI,MAAM,MAAM,WAAW,GAAG,MAAM,GAAmB;AACjF,SAAO,oBAAC,OAAI,WAAW,MAAM,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAChE;AAEO,SAAS,gBAAgB,EAAE,WAAW,GAAG,MAAM,GAA8B;AAClF,SAAO,oBAAC,OAAE,WAAW,MAAM,YAAY,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACpE;AAQO,SAAS,SAAS,EAAE,OAAO,WAAW,UAAU,GAAG,MAAM,GAAkB;AAChF,SACE,qBAAC,SAAI,WAAW,MAAM,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC7C;AAAA,wBAAC,OAAE,WAAW,MAAM,UAAU,GAAI,iBAAM;AAAA,IACxC,oBAAC,OAAE,WAAW,MAAM,UAAU,GAAI,UAAS;AAAA,KAC7C;AAEJ;AAEO,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC/E,SAAO,oBAAC,SAAI,WAAW,MAAM,OAAO,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACjE;AAGO,IAAM,OAAO;AAAA,EAClB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AAAA,EACP,aAAa;AAAA,EACb,MAAM;AAAA,EACN,QAAQ;AACV;;;AExJA,SAAS,MAAAA,WAA6B;AAoB7B,gBAAAC,YAAA;AAlBF,IAAM,mBAAmBD,IAAG;AAAA,EACjC,MAAM;AAAA,EACN,UAAU;AAAA,IACR,OAAO,EAAE,MAAM,yBAAyB,QAAQ,mCAAmC,MAAM,yBAAyB;AAAA,EACpH;AAAA,EACA,iBAAiB,EAAE,OAAO,OAAO;AACnC,CAAC;AAWM,SAAS,SAAS,EAAE,OAAO,WAAW,GAAG,MAAM,GAAkB;AACtE,SAAO,gBAAAC,KAAC,UAAK,eAAW,MAAC,cAAY,SAAS,QAAQ,WAAW,iBAAiB,EAAE,OAAO,UAAU,CAAC,GAAI,GAAG,OAAO;AACtH;","names":["tv","jsx"]}