@krizaka/ui 2.2.0 → 2.4.0

package/registry/video-trimmer.json

@@ -0,0 +1,385 @@
+{
+  "name": "video-trimmer",
+  "type": "primitive",
+  "title": "Video trimmer",
+  "summary": "The trim timeline of a video editor: two edge handles over a filmstrip frame the part kept, the outside dimmed, a playhead to scrub — every part stylable, the keyboard included.",
+  "description": "The trim timeline of a video editor: two edge handles over a filmstrip frame the part kept, the outside dimmed, a playhead to scrub — every part stylable, the keyboard included.",
+  "status": "beta",
+  "category": "media",
+  "platforms": "web",
+  "whenToUse": [
+    "To keep a part of a clip before publishing it: a story, a highlight, a reply.",
+    "To choose a segment of any timeline (a sound with a waveform as `children`, a recording)."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "For one value or a range of numbers without a media: a slider.",
+      "use": "slider"
+    },
+    {
+      "when": "To play a video: the video player.",
+      "use": "video-player"
+    }
+  ],
+  "bestPractices": [
+    "Render the preview on `onValueCommit` (the end of a drag), not on every move.",
+    "Set `minLength` to the shortest clip the product accepts, and `largeStep` to a second.",
+    "Make the filmstrip from a few frames of the clip (8 to 12), the same width each.",
+    "Restyle any part with `classNames` and the handles with `renderHandle`; the alignment stays (each handle on its value by its outer edge)."
+  ],
+  "accessibility": {
+    "keyboard": [
+      {
+        "keys": "Arrow keys",
+        "action": "Move the focused handle (or the playhead) by `step`; with Shift by `largeStep`."
+      },
+      {
+        "keys": "Page Up / Page Down",
+        "action": "Move by `largeStep`."
+      },
+      {
+        "keys": "Home / End",
+        "action": "To the start or the end, as far as the other handle allows."
+      }
+    ],
+    "notes": [
+      "Each handle is a `slider` named by a prop (“Start”, “End”), its bounds set by the other handle and `minLength`.",
+      "The values are read as times (`aria-valuetext`, `formatTime`), not as seconds.",
+      "The playhead is a slider too when `onSeek` is given; read-only otherwise."
+    ]
+  },
+  "related": [
+    "slider",
+    "video-player",
+    "audio-player"
+  ],
+  "web": {
+    "entry": "@krizaka/ui/video-trimmer",
+    "import": "import { VideoTrimmer } from \"@krizaka/ui/video-trimmer\";",
+    "props": [
+      {
+        "component": "VideoTrimmer",
+        "description": "Keeps a part of a clip between two handles over its filmstrip, with a playhead to scrub — the keyboard included.",
+        "props": [
+          {
+            "name": "duration",
+            "type": "number",
+            "default": null,
+            "description": "The length of the clip, in seconds.",
+            "required": true
+          },
+          {
+            "name": "children",
+            "type": "ReactNode",
+            "default": null,
+            "description": "Track content instead of the filmstrip (a waveform, a coloured band).",
+            "required": false
+          },
+          {
+            "name": "classNames",
+            "type": "Partial<Record<\"root\" | \"base\" | \"header\" | \"track\" | \"range\" | \"frame\" | \"kept\" | \"strip\" | \"shade\" | \"grip\" | \"handle\" | \"playhead\", string>>",
+            "default": "{}",
+            "description": "Classes per part: `root`, `header`, `kept`, `track`, `strip`, `frame`, `shade`, `range`, `handle`, `grip`, `playhead`.",
+            "required": false
+          },
+          {
+            "name": "defaultValue",
+            "type": "readonly [number, number]",
+            "default": null,
+            "description": "The part kept at first, uncontrolled. Default: the whole clip.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available (a render is running).",
+            "required": false
+          },
+          {
+            "name": "formatTime",
+            "type": "((seconds: number) => string)",
+            "default": "(seconds: number) => `${formatClock(seconds)}.${Math.floor((Math.max(0, seconds) % 1) * 10)}`",
+            "description": "A time as read and shown. Default `m:ss` with tenths.",
+            "required": false
+          },
+          {
+            "name": "frames",
+            "type": "readonly string[]",
+            "default": null,
+            "description": "Pictures of the clip, in order: the filmstrip.",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "Partial<VideoTrimmerLabels>",
+            "default": null,
+            "description": "The words, passed translated; English by default.",
+            "required": false
+          },
+          {
+            "name": "largeStep",
+            "type": "number",
+            "default": "1",
+            "description": "Shift + arrow, Page Up / Page Down, in seconds. Default 1.",
+            "required": false
+          },
+          {
+            "name": "minLength",
+            "type": "number",
+            "default": "0.5",
+            "description": "The shortest part that can be kept, in seconds. Default 0.5.",
+            "required": false
+          },
+          {
+            "name": "onSeek",
+            "type": "((time: number) => void)",
+            "default": null,
+            "description": "Called when the playhead is moved (a drag on the track, the arrows on the playhead).",
+            "required": false
+          },
+          {
+            "name": "onValueChange",
+            "type": "((value: [number, number]) => void)",
+            "default": null,
+            "description": "Called on every move of a handle.",
+            "required": false
+          },
+          {
+            "name": "onValueCommit",
+            "type": "((value: [number, number]) => void)",
+            "default": null,
+            "description": "Called once a drag or a key press ends: render a preview, save.",
+            "required": false
+          },
+          {
+            "name": "renderHandle",
+            "type": "((edge: \"start\" | \"end\") => ReactNode)",
+            "default": null,
+            "description": "The content of a handle (default: two grip lines).",
+            "required": false
+          },
+          {
+            "name": "showHeader",
+            "type": "boolean",
+            "default": "true",
+            "description": "Shows the times and the length kept above the track. Default `true`.",
+            "required": false
+          },
+          {
+            "name": "step",
+            "type": "number",
+            "default": "0.1",
+            "description": "One arrow press, in seconds. Default 0.1.",
+            "required": false
+          },
+          {
+            "name": "time",
+            "type": "number",
+            "default": null,
+            "description": "The time played, in seconds: shows the playhead.",
+            "required": false
+          },
+          {
+            "name": "value",
+            "type": "readonly [number, number]",
+            "default": null,
+            "description": "The part kept, `[start, end]` in seconds (controlled).",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "filmstrip",
+        "title": "Filmstrip",
+        "description": "A 42-second clip, 12 seconds kept, frames in the track.",
+        "path": "examples/video-trimmer/filmstrip.tsx",
+        "module": "@krizaka/ui/registry/examples/video-trimmer/filmstrip",
+        "code": "\"use client\";\n\nimport { VideoTrimmer } from \"@krizaka/ui/video-trimmer\";\nimport * as React from \"react\";\n\nconst TOUR = \"https://www.krizaka.com/assets/orochia/tour\";\nconst FRAMES = [\"alex-discover\", \"alex-story\", \"alex-bid\", \"elena-earnings\", \"elena-publish\", \"alex-unlock\", \"elena-live\", \"alex-back\"].map((n) => `${TOUR}/${n}.jpg`);\n\n// A 42-second clip: keep 12 seconds of it. Render the preview on commit, not on every move.\nexport default function VideoTrimmerFilmstrip() {\n  const [kept, setKept] = React.useState<[number, number]>([8, 20]);\n  return <VideoTrimmer duration={42} value={kept} onValueChange={setKept} frames={FRAMES} labels={{ kept: (length) => `${length} kept` }} />;\n}\n"
+      },
+      {
+        "name": "playhead",
+        "title": "With the playhead",
+        "description": "`time` and `onSeek`: the playhead stays within the part kept.",
+        "path": "examples/video-trimmer/playhead.tsx",
+        "module": "@krizaka/ui/registry/examples/video-trimmer/playhead",
+        "code": "\"use client\";\n\nimport { VideoTrimmer } from \"@krizaka/ui/video-trimmer\";\nimport * as React from \"react\";\n\nconst FRAMES = [\"alex-discover\", \"alex-story\", \"alex-bid\", \"elena-earnings\", \"elena-publish\", \"alex-unlock\"].map((n) => `https://www.krizaka.com/assets/orochia/tour/${n}.jpg`);\n\n// The playhead follows the video's time; a drag on the track (or its arrows) seeks within the part kept.\nexport default function VideoTrimmerPlayhead() {\n  const [kept, setKept] = React.useState<[number, number]>([3, 24]);\n  const [time, setTime] = React.useState(11.5);\n  return <VideoTrimmer duration={30} value={kept} onValueChange={setKept} time={time} onSeek={setTime} frames={FRAMES} minLength={2} />;\n}\n"
+      },
+      {
+        "name": "custom",
+        "title": "Custom parts",
+        "description": "`classNames` and `renderHandle`: thin handles over a waveform band.",
+        "path": "examples/video-trimmer/custom.tsx",
+        "module": "@krizaka/ui/registry/examples/video-trimmer/custom",
+        "code": "\"use client\";\n\nimport { VideoTrimmer } from \"@krizaka/ui/video-trimmer\";\n\nconst BARS = Array.from({ length: 64 }, (_, i) => 0.25 + Math.abs(Math.sin(i * 0.7)) * 0.75);\n\n// Every part takes its own classes: thin handles, a shorter track, a waveform as its content.\nexport default function VideoTrimmerCustom() {\n  return (\n    <VideoTrimmer\n      duration={180}\n      defaultValue={[42, 96]}\n      step={1}\n      largeStep={10}\n      classNames={{ track: \"h-12 bg-surface-1\", handle: \"w-3 bg-fg-accent\", range: \"border-y-2 border-fg-accent\" }}\n      renderHandle={() => <span className=\"h-5 w-0.5 rounded-full bg-surface-0\" />}\n      labels={{ start: \"Start of the extract\", end: \"End of the extract\", kept: (length) => `Extract: ${length}` }}\n    >\n      <div className=\"flex h-full w-full items-center gap-[2px] px-1\">\n        {BARS.map((peak, i) => (\n          <span key={i} className=\"flex-1 rounded-full bg-border-strong\" style={{ height: `${peak * 80}%` }} />\n        ))}\n      </div>\n    </VideoTrimmer>\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
+  "files": [
+    {
+      "path": "media.ts",
+      "content": "// Shared by the data and media primitives (client): the clock format, the reduced-motion preference, the\n// in-view observer, a debounced callback. Never an entry of its own.\nimport * as React from \"react\";\n\n/** Seconds as a clock: `75` → `1:15`, `3725` → `1:02:05`. Negative or unknown values read `0:00`. */\nexport function formatClock(seconds: number): string {\n  const s = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;\n  const h = Math.floor(s / 3600);\n  const m = Math.floor((s % 3600) / 60);\n  const rest = String(s % 60).padStart(2, \"0\");\n  return h > 0 ? `${h}:${String(m).padStart(2, \"0\")}:${rest}` : `${m}:${rest}`;\n}\n\n/** Clamps `value` between `min` and `max`. */\nexport const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nconst REDUCE = \"(prefers-reduced-motion: reduce)\";\nconst subscribeReduce = (notify: () => void) => {\n  if (typeof window === \"undefined\" || !window.matchMedia) return () => undefined;\n  const query = window.matchMedia(REDUCE);\n  query.addEventListener?.(\"change\", notify);\n  return () => query.removeEventListener?.(\"change\", notify);\n};\n\n/** `true` when the person asked for less motion (`prefers-reduced-motion: reduce`); follows a change of the setting. */\nexport function usePrefersReducedMotion(): boolean {\n  return React.useSyncExternalStore(\n    subscribeReduce,\n    () => (typeof window !== \"undefined\" && window.matchMedia ? window.matchMedia(REDUCE).matches : false),\n    () => false,\n  );\n}\n\n/** The latest value of a callback, for an effect or an event that must not re-subscribe when it changes. */\nexport function useLatest<T>(value: T) {\n  const ref = React.useRef(value);\n  React.useLayoutEffect(() => {\n    ref.current = value;\n  });\n  return ref;\n}\n\n/** Calls `onChange(visible)` when at least `threshold` of the element enters or leaves the viewport. */\nexport function useInView(ref: React.RefObject<Element | null>, onChange: (visible: boolean) => void, enabled = true, threshold = 0.25) {\n  const latest = useLatest(onChange);\n  React.useEffect(() => {\n    const element = ref.current;\n    if (!enabled || !element || typeof IntersectionObserver === \"undefined\") return;\n    const observer = new IntersectionObserver(([entry]) => entry && latest.current(entry.isIntersecting), { threshold });\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [ref, enabled, threshold, latest]);\n}\n\n/** A stable function that runs `callback` once `delay` ms have passed without a new call; `cancel()` drops the pending one. */\nexport function useDebouncedCallback<A extends unknown[]>(callback: (...args: A) => void, delay: number) {\n  const latest = useLatest(callback);\n  const [debounced] = React.useState(() => {\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    let wait = delay;\n    const run = (...args: A) => {\n      clearTimeout(timer);\n      if (wait <= 0) latest.current(...args);\n      else timer = setTimeout(() => latest.current(...args), wait);\n    };\n    return Object.assign(run, {\n      cancel: () => clearTimeout(timer),\n      setDelay: (next: number) => {\n        wait = next;\n      },\n    });\n  });\n  React.useEffect(() => debounced.setDelay(delay), [debounced, delay]);\n  React.useEffect(() => () => debounced.cancel(), [debounced]);\n  return debounced;\n}\n\n/** A value controlled by a prop when it is given, held inside otherwise; `set` calls `onChange` either way. */\nexport function useControllable<T>(value: T | undefined, defaultValue: T, onChange?: (next: T) => void) {\n  const [inner, setInner] = React.useState(defaultValue);\n  const controlled = value !== undefined;\n  const current = controlled ? value : inner;\n  const set = React.useCallback(\n    (next: T) => {\n      if (!controlled) setInner(next);\n      onChange?.(next);\n    },\n    [controlled, onChange],\n  );\n  return [current, set] as const;\n}\n\n/** Starts a media element without an unhandled rejection (autoplay refused, the source replaced meanwhile). */\nexport function playSafely(media: HTMLMediaElement | null | undefined) {\n  try {\n    const started = media?.play() as Promise<void> | undefined;\n    started?.catch?.(() => undefined);\n  } catch {\n    // Not playable here (no media support): the controls stay as they are.\n  }\n}\n"
+    },
+    {
+      "path": "meta.ts",
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"alert\"\n  | \"audio-player\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"cn\"\n  | \"combobox\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"countdown\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"dialog\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"glow-card\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"loader\"\n  | \"marquee\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page-header\"\n  | \"pagination\"\n  | \"popover\"\n  | \"progress\"\n  | \"radio-group\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"stat\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"theme\"\n  | \"toast\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/** The group of the catalogue. `media`: video, sound, camera, files, cropping. */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+    },
+    {
+      "path": "video-trimmer/index.ts",
+      "content": "/** @krizaka/ui/video-trimmer — `VideoTrimmer` (two edge handles over a filmstrip, a playhead, every part stylable), `videoTrimmer` (the slots). Client (\"use client\"). */\nexport { VideoTrimmer, videoTrimmer, type VideoTrimmerLabels, videoTrimmerLabels, type VideoTrimmerProps } from \"./video-trimmer\";\n"
+    },
+    {
+      "path": "video-trimmer/meta.ts",
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Video trimmer\",\n  summary: \"The trim timeline of a video editor: two edge handles over a filmstrip frame the part kept, the outside dimmed, a playhead to scrub — every part stylable, the keyboard included.\",\n  status: \"beta\",\n  category: \"media\",\n  platforms: \"web\",\n  whenToUse: [\n    \"To keep a part of a clip before publishing it: a story, a highlight, a reply.\",\n    \"To choose a segment of any timeline (a sound with a waveform as `children`, a recording).\",\n  ],\n  whenNotToUse: [\n    { when: \"For one value or a range of numbers without a media: a slider.\", use: \"slider\" },\n    { when: \"To play a video: the video player.\", use: \"video-player\" },\n  ],\n  bestPractices: [\n    \"Render the preview on `onValueCommit` (the end of a drag), not on every move.\",\n    \"Set `minLength` to the shortest clip the product accepts, and `largeStep` to a second.\",\n    \"Make the filmstrip from a few frames of the clip (8 to 12), the same width each.\",\n    \"Restyle any part with `classNames` and the handles with `renderHandle`; the alignment stays (each handle on its value by its outer edge).\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"Arrow keys\", action: \"Move the focused handle (or the playhead) by `step`; with Shift by `largeStep`.\" },\n      { keys: \"Page Up / Page Down\", action: \"Move by `largeStep`.\" },\n      { keys: \"Home / End\", action: \"To the start or the end, as far as the other handle allows.\" },\n    ],\n    notes: [\n      \"Each handle is a `slider` named by a prop (“Start”, “End”), its bounds set by the other handle and `minLength`.\",\n      \"The values are read as times (`aria-valuetext`, `formatTime`), not as seconds.\",\n      \"The playhead is a slider too when `onSeek` is given; read-only otherwise.\",\n    ],\n  },\n  related: [\"slider\", \"video-player\", \"audio-player\"],\n  web: {\n    imports: [\"VideoTrimmer\"],\n    examples: [\n      { name: \"filmstrip\", title: \"Filmstrip\", description: \"A 42-second clip, 12 seconds kept, frames in the track.\" },\n      { name: \"playhead\", title: \"With the playhead\", description: \"`time` and `onSeek`: the playhead stays within the part kept.\" },\n      { name: \"custom\", title: \"Custom parts\", description: \"`classNames` and `renderHandle`: thin handles over a waveform band.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+    },
+    {
+      "path": "video-trimmer/video-trimmer.tsx",
+      "content": "// Client. The trim timeline of a video editor: the clip as a filmstrip (or any track content), the part kept framed\n// between two edge handles — each a `slider` named by a prop, its value read as a time, never past the other one —\n// the outside dimmed, and a playhead to scrub. The handles sit on their value by their outer edge (the start handle\n// to the right of its value, the end handle to its left), so the frame encloses exactly what is kept. Every part\n// takes its own classes (`classNames`) and the handles their own content (`renderHandle`).\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { clamp, formatClock } from \"../media\";\n\nexport const videoTrimmer = tv({\n  slots: {\n    root: \"w-full select-none\",\n    header: \"mb-2 flex items-center justify-between font-mono text-[11px] tabular-nums text-fg-secondary\",\n    kept: \"rounded-full bg-accent-soft px-2.5 py-0.5 font-sans text-xs font-semibold text-fg\",\n    track: \"relative h-16 touch-none rounded-xl bg-surface-2 data-[disabled]:opacity-50\",\n    strip: \"pointer-events-none absolute inset-0 flex overflow-hidden rounded-xl\",\n    frame: \"h-full min-w-0 flex-1 object-cover\",\n    shade: \"pointer-events-none absolute inset-y-0 bg-scrim-strong\",\n    range: \"pointer-events-none absolute inset-y-0 border-y-[3px] border-accent\",\n    handle:\n      \"absolute inset-y-0 z-10 flex w-6 cursor-ew-resize items-center justify-center bg-accent text-on-accent shadow-md \" +\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      \"data-[edge=start]:rounded-l-xl data-[edge=end]:-translate-x-full data-[edge=end]:rounded-r-xl\",\n    grip: \"flex gap-[3px] [&>span]:h-5 [&>span]:w-[2px] [&>span]:rounded-sm [&>span]:bg-on-accent/70\",\n    playhead:\n      \"absolute -inset-y-1.5 z-20 w-[3px] -translate-x-1/2 cursor-ew-resize rounded-full bg-fg shadow-md \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n});\n\ntype Part = keyof ReturnType<typeof videoTrimmer>;\n\nexport type VideoTrimmerLabels = {\n  /** The start handle (\"Start\"). */\n  start: string;\n  /** The end handle (\"End\"). */\n  end: string;\n  /** The playhead (\"Playhead\"). */\n  playhead: string;\n  /** The length kept, above the track: `(length) => length + \" kept\"` (the length already formatted). */\n  kept: (length: string) => string;\n};\n\nexport const videoTrimmerLabels: VideoTrimmerLabels = {\n  start: \"Start\",\n  end: \"End\",\n  playhead: \"Playhead\",\n  kept: (length) => `${length} kept`,\n};\n\nexport type VideoTrimmerProps = {\n  /** The length of the clip, in seconds. */\n  duration: number;\n  /** The part kept, `[start, end]` in seconds (controlled). */\n  value?: readonly [number, number];\n  /** The part kept at first, uncontrolled. Default: the whole clip. */\n  defaultValue?: readonly [number, number];\n  /** Called on every move of a handle. */\n  onValueChange?: (value: [number, number]) => void;\n  /** Called once a drag or a key press ends: render a preview, save. */\n  onValueCommit?: (value: [number, number]) => void;\n  /** The time played, in seconds: shows the playhead. */\n  time?: number;\n  /** Called when the playhead is moved (a drag on the track, the arrows on the playhead). */\n  onSeek?: (time: number) => void;\n  /** The shortest part that can be kept, in seconds. Default 0.5. */\n  minLength?: number;\n  /** One arrow press, in seconds. Default 0.1. */\n  step?: number;\n  /** Shift + arrow, Page Up / Page Down, in seconds. Default 1. */\n  largeStep?: number;\n  /** Pictures of the clip, in order: the filmstrip. */\n  frames?: readonly string[];\n  /** Track content instead of the filmstrip (a waveform, a coloured band). */\n  children?: React.ReactNode;\n  /** A time as read and shown. Default `m:ss` with tenths. */\n  formatTime?: (seconds: number) => string;\n  /** Shows the times and the length kept above the track. Default `true`. */\n  showHeader?: boolean;\n  /** Not available (a render is running). */\n  disabled?: boolean;\n  /** Classes per part: `root`, `header`, `kept`, `track`, `strip`, `frame`, `shade`, `range`, `handle`, `grip`, `playhead`. */\n  classNames?: Partial<Record<Part, string>>;\n  /** The content of a handle (default: two grip lines). */\n  renderHandle?: (edge: \"start\" | \"end\") => React.ReactNode;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<VideoTrimmerLabels>;\n};\n\nconst tenths = (seconds: number) => `${formatClock(seconds)}.${Math.floor((Math.max(0, seconds) % 1) * 10)}`;\n\ntype Grip = \"start\" | \"end\" | \"playhead\";\n\n/** Keeps a part of a clip between two handles over its filmstrip, with a playhead to scrub — the keyboard included. */\nexport function VideoTrimmer({\n  duration,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  onValueCommit,\n  time,\n  onSeek,\n  minLength = 0.5,\n  step = 0.1,\n  largeStep = 1,\n  frames,\n  children,\n  formatTime = tenths,\n  showHeader = true,\n  disabled,\n  classNames = {},\n  renderHandle,\n  labels: given,\n}: VideoTrimmerProps) {\n  const labels = { ...videoTrimmerLabels, ...given };\n  const s = videoTrimmer();\n  const track = React.useRef<HTMLDivElement>(null);\n  const grip = React.useRef<Grip | null>(null);\n  const [inner, setInner] = React.useState<[number, number]>(() => [defaultValue?.[0] ?? 0, defaultValue?.[1] ?? duration]);\n  const [start, end] = valueProp ?? inner;\n  const total = duration > 0 ? duration : 1;\n  const pct = (seconds: number) => (clamp(seconds, 0, total) / total) * 100;\n\n  const set = (next: [number, number], commit = false) => {\n    if (!valueProp) setInner(next);\n    onValueChange?.(next);\n    if (commit) onValueCommit?.(next);\n  };\n  const move = (edge: \"start\" | \"end\", to: number, commit = false) => {\n    const next: [number, number] =\n      edge === \"start\" ? [clamp(to, 0, end - minLength), end] : [start, clamp(to, start + minLength, duration)];\n    set([Math.round(next[0] * 1000) / 1000, Math.round(next[1] * 1000) / 1000], commit);\n  };\n  const seek = (to: number) => onSeek?.(clamp(to, start, Math.max(start, end - 0.05)));\n\n  const at = (clientX: number) => {\n    const box = track.current?.getBoundingClientRect();\n    if (!box || box.width === 0) return 0;\n    return clamp(((clientX - box.left) / box.width) * duration, 0, duration);\n  };\n\n  const keys = (which: Grip) => (event: React.KeyboardEvent) => {\n    const current = which === \"start\" ? start : which === \"end\" ? end : (time ?? start);\n    const big = largeStep;\n    const small = event.shiftKey ? largeStep : step;\n    const target: Record<string, number> = {\n      ArrowLeft: current - small,\n      ArrowDown: current - small,\n      ArrowRight: current + small,\n      ArrowUp: current + small,\n      PageDown: current - big,\n      PageUp: current + big,\n      Home: 0,\n      End: duration,\n    };\n    const to = target[event.key];\n    if (to === undefined || disabled) return;\n    event.preventDefault();\n    if (which === \"playhead\") seek(to);\n    else move(which, to, true);\n  };\n\n  const handle = (edge: \"start\" | \"end\") => {\n    const own = edge === \"start\" ? start : end;\n    return (\n      <div\n        key={edge}\n        role=\"slider\"\n        tabIndex={disabled ? -1 : 0}\n        aria-label={edge === \"start\" ? labels.start : labels.end}\n        aria-valuemin={edge === \"start\" ? 0 : Math.round((start + minLength) * 10) / 10}\n        aria-valuemax={edge === \"start\" ? Math.round((end - minLength) * 10) / 10 : Math.round(duration * 10) / 10}\n        aria-valuenow={Math.round(own * 10) / 10}\n        aria-valuetext={formatTime(own)}\n        aria-disabled={disabled || undefined}\n        data-edge={edge}\n        className={s.handle({ className: classNames.handle })}\n        style={{ left: `${pct(own)}%` }}\n        onPointerDown={(event) => {\n          if (disabled) return;\n          event.stopPropagation();\n          track.current?.setPointerCapture?.(event.pointerId);\n          grip.current = edge;\n        }}\n        onKeyDown={keys(edge)}\n      >\n        {renderHandle ? (\n          renderHandle(edge)\n        ) : (\n          <span className={s.grip({ className: classNames.grip })}>\n            <span />\n            <span />\n          </span>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div className={s.root({ className: classNames.root })}>\n      {showHeader && (\n        <div className={s.header({ className: classNames.header })}>\n          <span>{formatTime(start)}</span>\n          <span className={s.kept({ className: classNames.kept })}>{labels.kept(formatTime(end - start))}</span>\n          <span>{formatTime(end)}</span>\n        </div>\n      )}\n      <div\n        ref={track}\n        className={s.track({ className: classNames.track })}\n        data-disabled={disabled ? \"\" : undefined}\n        onPointerDown={(event) => {\n          if (disabled) return;\n          track.current?.setPointerCapture?.(event.pointerId);\n          const t = at(event.clientX);\n          grip.current = onSeek ? \"playhead\" : Math.abs(t - start) < Math.abs(t - end) ? \"start\" : \"end\";\n          if (grip.current === \"playhead\") seek(t);\n          else move(grip.current, t);\n        }}\n        onPointerMove={(event) => {\n          if (!grip.current) return;\n          const t = at(event.clientX);\n          if (grip.current === \"playhead\") seek(t);\n          else move(grip.current, t);\n        }}\n        onPointerUp={() => {\n          if (grip.current && grip.current !== \"playhead\") onValueCommit?.([start, end]);\n          grip.current = null;\n        }}\n        onPointerCancel={() => {\n          grip.current = null;\n        }}\n      >\n        <div className={s.strip({ className: classNames.strip })}>\n          {children ?? frames?.map((src, i) => <img key={`${i}-${src}`} src={src} alt=\"\" draggable={false} className={s.frame({ className: classNames.frame })} />)}\n        </div>\n        <div className={s.shade({ className: classNames.shade })} style={{ left: 0, width: `${pct(start)}%`, borderRadius: \"0.75rem 0 0 0.75rem\" }} />\n        <div className={s.shade({ className: classNames.shade })} style={{ right: 0, width: `${100 - pct(end)}%`, borderRadius: \"0 0.75rem 0.75rem 0\" }} />\n        <div className={s.range({ className: classNames.range })} style={{ left: `${pct(start)}%`, right: `${100 - pct(end)}%` }} />\n        {time !== undefined && (\n          <div\n            role=\"slider\"\n            tabIndex={disabled || !onSeek ? -1 : 0}\n            aria-label={labels.playhead}\n            aria-valuemin={Math.round(start * 10) / 10}\n            aria-valuemax={Math.round(end * 10) / 10}\n            aria-valuenow={Math.round(time * 10) / 10}\n            aria-valuetext={formatTime(time)}\n            aria-readonly={!onSeek || undefined}\n            className={s.playhead({ className: classNames.playhead })}\n            style={{ left: `${pct(time)}%` }}\n            onKeyDown={onSeek ? keys(\"playhead\") : undefined}\n          />\n        )}\n        {handle(\"start\")}\n        {handle(\"end\")}\n      </div>\n    </div>\n  );\n}\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [],
+  "demo": {
+    "path": "examples/video-trimmer/filmstrip.tsx",
+    "content": "\"use client\";\n\nimport { VideoTrimmer } from \"@krizaka/ui/video-trimmer\";\nimport * as React from \"react\";\n\nconst TOUR = \"https://www.krizaka.com/assets/orochia/tour\";\nconst FRAMES = [\"alex-discover\", \"alex-story\", \"alex-bid\", \"elena-earnings\", \"elena-publish\", \"alex-unlock\", \"elena-live\", \"alex-back\"].map((n) => `${TOUR}/${n}.jpg`);\n\n// A 42-second clip: keep 12 seconds of it. Render the preview on commit, not on every move.\nexport default function VideoTrimmerFilmstrip() {\n  const [kept, setKept] = React.useState<[number, number]>([8, 20]);\n  return <VideoTrimmer duration={42} value={kept} onValueChange={setKept} frames={FRAMES} labels={{ kept: (length) => `${length} kept` }} />;\n}\n"
+  },
+  "props": [
+    {
+      "component": "VideoTrimmer",
+      "description": "Keeps a part of a clip between two handles over its filmstrip, with a playhead to scrub — the keyboard included.",
+      "props": [
+        {
+          "name": "duration",
+          "type": "number",
+          "default": null,
+          "description": "The length of the clip, in seconds.",
+          "required": true
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "default": null,
+          "description": "Track content instead of the filmstrip (a waveform, a coloured band).",
+          "required": false
+        },
+        {
+          "name": "classNames",
+          "type": "Partial<Record<\"root\" | \"base\" | \"header\" | \"track\" | \"range\" | \"frame\" | \"kept\" | \"strip\" | \"shade\" | \"grip\" | \"handle\" | \"playhead\", string>>",
+          "default": "{}",
+          "description": "Classes per part: `root`, `header`, `kept`, `track`, `strip`, `frame`, `shade`, `range`, `handle`, `grip`, `playhead`.",
+          "required": false
+        },
+        {
+          "name": "defaultValue",
+          "type": "readonly [number, number]",
+          "default": null,
+          "description": "The part kept at first, uncontrolled. Default: the whole clip.",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": null,
+          "description": "Not available (a render is running).",
+          "required": false
+        },
+        {
+          "name": "formatTime",
+          "type": "((seconds: number) => string)",
+          "default": "(seconds: number) => `${formatClock(seconds)}.${Math.floor((Math.max(0, seconds) % 1) * 10)}`",
+          "description": "A time as read and shown. Default `m:ss` with tenths.",
+          "required": false
+        },
+        {
+          "name": "frames",
+          "type": "readonly string[]",
+          "default": null,
+          "description": "Pictures of the clip, in order: the filmstrip.",
+          "required": false
+        },
+        {
+          "name": "labels",
+          "type": "Partial<VideoTrimmerLabels>",
+          "default": null,
+          "description": "The words, passed translated; English by default.",
+          "required": false
+        },
+        {
+          "name": "largeStep",
+          "type": "number",
+          "default": "1",
+          "description": "Shift + arrow, Page Up / Page Down, in seconds. Default 1.",
+          "required": false
+        },
+        {
+          "name": "minLength",
+          "type": "number",
+          "default": "0.5",
+          "description": "The shortest part that can be kept, in seconds. Default 0.5.",
+          "required": false
+        },
+        {
+          "name": "onSeek",
+          "type": "((time: number) => void)",
+          "default": null,
+          "description": "Called when the playhead is moved (a drag on the track, the arrows on the playhead).",
+          "required": false
+        },
+        {
+          "name": "onValueChange",
+          "type": "((value: [number, number]) => void)",
+          "default": null,
+          "description": "Called on every move of a handle.",
+          "required": false
+        },
+        {
+          "name": "onValueCommit",
+          "type": "((value: [number, number]) => void)",
+          "default": null,
+          "description": "Called once a drag or a key press ends: render a preview, save.",
+          "required": false
+        },
+        {
+          "name": "renderHandle",
+          "type": "((edge: \"start\" | \"end\") => ReactNode)",
+          "default": null,
+          "description": "The content of a handle (default: two grip lines).",
+          "required": false
+        },
+        {
+          "name": "showHeader",
+          "type": "boolean",
+          "default": "true",
+          "description": "Shows the times and the length kept above the track. Default `true`.",
+          "required": false
+        },
+        {
+          "name": "step",
+          "type": "number",
+          "default": "0.1",
+          "description": "One arrow press, in seconds. Default 0.1.",
+          "required": false
+        },
+        {
+          "name": "time",
+          "type": "number",
+          "default": null,
+          "description": "The time played, in seconds: shows the playhead.",
+          "required": false
+        },
+        {
+          "name": "value",
+          "type": "readonly [number, number]",
+          "default": null,
+          "description": "The part kept, `[start, end]` in seconds (controlled).",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

package/dist/chunk-FHYZSO2S.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/dialog/dialog.tsx"],"sourcesContent":["// Client (a portal). Radix does the focus trap, the scroll lock, Escape, the outside click, aria-modal, the\n// aria-labelledby / aria-describedby wiring and the focus return: this file only holds the shape.\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { IconButton } from \"../button/button\";\n\nexport const dialog = tv({\n  slots: {\n    overlay: \"kz-overlay fixed inset-0 z-50 bg-overlay backdrop-blur-xs\",\n    content:\n      \"kz-dialog fixed z-50 flex flex-col overflow-hidden border border-border-default bg-surface-1 text-fg shadow-lg focus:outline-hidden\",\n    close: \"absolute right-3 top-3 h-9 w-9\",\n    header: \"flex flex-col gap-1 px-5 pb-2 pr-14 pt-5\",\n    title: \"text-base font-bold text-fg\",\n    description: \"text-sm text-fg-secondary\",\n    body: \"min-h-0 flex-1 overflow-y-auto px-5 pb-5\",\n    footer:\n      \"flex flex-wrap items-center justify-end gap-2 border-t border-border-subtle px-5 py-4 pb-[max(1rem,env(safe-area-inset-bottom))]\",\n  },\n  variants: {\n    placement: {\n      center: { content: \"left-1/2 top-1/2 max-h-[85dvh] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl\" },\n      /* A sheet: anchored at the bottom on a phone, centred from `sm` up. */\n      bottom: {\n        content:\n          \"inset-x-0 bottom-0 max-h-[92dvh] rounded-t-[1.75rem] sm:bottom-auto sm:left-1/2 sm:top-1/2 sm:w-full \" +\n          \"sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-[1.75rem]\",\n      },\n      right: { content: \"inset-y-0 right-0 h-full w-full max-w-md rounded-none border-y-0 border-r-0\" },\n    },\n    size: { sm: { content: \"sm:max-w-sm\" }, md: { content: \"sm:max-w-md\" }, lg: { content: \"sm:max-w-2xl\" } },\n  },\n  defaultVariants: { placement: \"center\", size: \"md\" },\n});\nconst s = dialog();\n\nexport type DialogVariants = VariantProps<typeof dialog>;\n\nfunction CloseIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n      <path d=\"M18 6 6 18M6 6l12 12\" />\n    </svg>\n  );\n}\n\ntype CloseButtonProps =\n  | {\n      /** The accessible name of the close button — passed translated. */\n      closeLabel: string;\n      /** Leaves the close button out (the content brings its own way out, or none: see `dismissible`). */\n      hideClose?: false;\n    }\n  | { closeLabel?: string; hideClose: true };\n\nexport type DialogContentProps = React.ComponentProps<typeof DialogPrimitive.Content> &\n  DialogVariants &\n  CloseButtonProps & {\n    /**\n     * center · bottom (a sheet on a phone, centred from `sm` up) · right (a side panel, full height).\n     * @default \"center\"\n     */\n    placement?: DialogVariants[\"placement\"];\n    /**\n     * sm · md · lg: the width of the dialog.\n     * @default \"md\"\n     */\n    size?: DialogVariants[\"size\"];\n    /**\n     * `false`: Escape and a click outside do not close it (a gate the user must answer: age, terms). It still closes\n     * through `open` / `onOpenChange` and any `Dialog.Close` inside. Default `true`.\n     */\n    dismissible?: boolean;\n    /** The element the portal renders into (default: document.body). */\n    container?: HTMLElement | null;\n  };\n\nconst prevent = (event: Event) => event.preventDefault();\n\n/** The dialog itself, portalled over a dimmed overlay, with a close button. Give it a `Dialog.Title`. */\nexport function DialogContent({\n  placement,\n  size,\n  closeLabel,\n  hideClose,\n  dismissible = true,\n  container,\n  className,\n  children,\n  onEscapeKeyDown,\n  onPointerDownOutside,\n  onInteractOutside,\n  ...props\n}: DialogContentProps) {\n  const v = dialog({ placement, size });\n  return (\n    <DialogPrimitive.Portal container={container}>\n      <DialogPrimitive.Overlay className={v.overlay()} />\n      <DialogPrimitive.Content\n        data-placement={placement ?? \"center\"}\n        data-dismissible={dismissible ? undefined : \"false\"}\n        className={v.content({ className })}\n        onEscapeKeyDown={dismissible ? onEscapeKeyDown : chain(onEscapeKeyDown, prevent)}\n        onPointerDownOutside={dismissible ? onPointerDownOutside : chain(onPointerDownOutside, prevent)}\n        onInteractOutside={dismissible ? onInteractOutside : chain(onInteractOutside, prevent)}\n        {...props}\n      >\n        {children}\n        {!hideClose && (\n          <DialogPrimitive.Close asChild>\n            <IconButton label={closeLabel as string} variant=\"ghost\" shape=\"pill\" className={v.close()}>\n              <CloseIcon />\n            </IconButton>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  );\n}\n\nfunction chain<E extends Event>(handler: ((event: E) => void) | undefined, then: (event: E) => void) {\n  return (event: E) => {\n    handler?.(event);\n    then(event);\n  };\n}\n\nexport function DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.header({ className })} {...props} />;\n}\n\nexport function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return <DialogPrimitive.Title className={s.title({ className })} {...props} />;\n}\n\nexport function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return <DialogPrimitive.Description className={s.description({ className })} {...props} />;\n}\n\nexport function DialogBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.body({ className })} {...props} />;\n}\n\nexport function DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.footer({ className })} {...props} />;\n}\n\n/** `Dialog.Root/Trigger/Content/Header/Title/Description/Body/Footer/Close`. `open`/`defaultOpen` + `onOpenChange`. */\nexport const Dialog = {\n  Root: DialogPrimitive.Root,\n  Trigger: DialogPrimitive.Trigger,\n  Close: DialogPrimitive.Close,\n  Content: DialogContent,\n  Header: DialogHeader,\n  Title: DialogTitle,\n  Description: DialogDescription,\n  Body: DialogBody,\n  Footer: DialogFooter,\n};\n\n/** `Omit` that keeps the close-button union (`closeLabel` required unless `hideClose`). */\ntype DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;\n\nexport type SheetProps = DistributiveOmit<DialogContentProps, \"placement\">;\n\n/** A sheet is a dialog anchored at the bottom (centred from `sm` up): `Dialog.Content placement=\"bottom\"`. */\nexport function Sheet(props: SheetProps) {\n  return <DialogContent placement=\"bottom\" {...props} />;\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-PESA2R4U.js

@@ -1,51 +0,0 @@
-"use client";
-
-// src/button/button.tsx
-import { Slot } from "radix-ui";
-import { tv } from "tailwind-variants";
-import { jsx } from "react/jsx-runtime";
-var buttonVariants = tv({
-  base: "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98]",
-  variants: {
-    variant: {
-      primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover",
-      // The brand's signature: accent → accent-2 (on-accent reads on both stops, tested in @krizaka/tokens).
-      gradient: "bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110",
-      secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3",
-      outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent",
-      ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg",
-      // The border and the tint carry the danger; the label stays the primary text role, legible on the tint at rest
-      // and hovered over every surface (`text-fg-danger` is for text set directly on a surface).
-      danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20"
-    },
-    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" },
-    shape: { rounded: "rounded-lg", pill: "rounded-full" }
-  },
-  defaultVariants: { variant: "secondary", size: "md", shape: "rounded" }
-});
-function Button({ asChild, loading, variant, size, shape, className, disabled, ...props }) {
-  const Comp = asChild ? Slot.Root : "button";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      type: asChild ? void 0 : "button",
-      "aria-busy": loading || void 0,
-      "data-loading": loading ? "" : void 0,
-      "data-variant": variant ?? "secondary",
-      disabled: asChild ? void 0 : disabled || loading,
-      "aria-disabled": asChild && (disabled || loading) ? true : void 0,
-      className: buttonVariants({ variant, size, shape, className }),
-      ...props
-    }
-  );
-}
-function IconButton({ label, size = "icon", ...props }) {
-  return /* @__PURE__ */ jsx(Button, { "aria-label": label, title: label, size, ...props });
-}
-
-export {
-  buttonVariants,
-  Button,
-  IconButton
-};
-//# sourceMappingURL=chunk-PESA2R4U.js.map

package/dist/chunk-PESA2R4U.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/button/button.tsx"],"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\nexport const buttonVariants = tv({\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  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    shape: { rounded: \"rounded-lg\", pill: \"rounded-full\" },\n  },\n  defaultVariants: { variant: \"secondary\", size: \"md\", shape: \"rounded\" },\n});\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.\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    /** Disables and signals the wait (aria-busy, data-loading) — the product adds a spinner if it wants one. */\n    loading?: boolean;\n  };\n\nexport function Button({ asChild, loading, variant, size, shape, className, disabled, ...props }: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  return (\n    <Comp\n      type={asChild ? undefined : \"button\"}\n      aria-busy={loading || undefined}\n      data-loading={loading ? \"\" : undefined}\n      data-variant={variant ?? \"secondary\"}\n      disabled={asChild ? undefined : disabled || loading}\n      aria-disabled={asChild && (disabled || loading) ? true : undefined}\n      className={buttonVariants({ variant, size, shape, className })}\n      {...props}\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. */\nexport function IconButton({ label, size = \"icon\", ...props }: IconButtonProps) {\n  return <Button aria-label={label} title={label} size={size} {...props} />;\n}\n"],"mappings":";;;AACA,SAAS,YAAY;AAErB,SAAS,UAA6B;AAsDlC;AApDG,IAAM,iBAAiB,GAAG;AAAA,EAC/B,MACE;AAAA,EAGF,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA;AAAA,MAET,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA;AAAA;AAAA,MAGP,QAAQ;AAAA,IACV;AAAA,IACA,MAAM,EAAE,IAAI,oBAAoB,IAAI,qBAAqB,IAAI,qBAAqB,MAAM,YAAY;AAAA,IACpG,OAAO,EAAE,SAAS,cAAc,MAAM,eAAe;AAAA,EACvD;AAAA,EACA,iBAAiB,EAAE,SAAS,aAAa,MAAM,MAAM,OAAO,UAAU;AACxE,CAAC;AA4BM,SAAS,OAAO,EAAE,SAAS,SAAS,SAAS,MAAM,OAAO,WAAW,UAAU,GAAG,MAAM,GAAgB;AAC7G,QAAM,OAAO,UAAU,KAAK,OAAO;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,UAAU,SAAY;AAAA,MAC5B,aAAW,WAAW;AAAA,MACtB,gBAAc,UAAU,KAAK;AAAA,MAC7B,gBAAc,WAAW;AAAA,MACzB,UAAU,UAAU,SAAY,YAAY;AAAA,MAC5C,iBAAe,YAAY,YAAY,WAAW,OAAO;AAAA,MACzD,WAAW,eAAe,EAAE,SAAS,MAAM,OAAO,UAAU,CAAC;AAAA,MAC5D,GAAG;AAAA;AAAA,EACN;AAEJ;AAaO,SAAS,WAAW,EAAE,OAAO,OAAO,QAAQ,GAAG,MAAM,GAAoB;AAC9E,SAAO,oBAAC,UAAO,cAAY,OAAO,OAAO,OAAO,MAAa,GAAG,OAAO;AACzE;","names":[]}

package/registry/examples/spinner/muted.js

@@ -1,11 +0,0 @@
-"use client";
-
-// registry/examples/spinner/muted.tsx
-import { Spinner } from "@krizaka/ui/spinner";
-import { jsx } from "react/jsx-runtime";
-function SpinnerMuted() {
-  return /* @__PURE__ */ jsx(Spinner, { label: "Loading", className: "text-fg-secondary" });
-}
-export {
-  SpinnerMuted as default
-};

package/registry/examples/spinner/muted.tsx

@@ -1,6 +0,0 @@
-import { Spinner } from "@krizaka/ui/spinner";
-
-// The colour follows `className` (here a text role).
-export default function SpinnerMuted() {
-  return <Spinner label="Loading" className="text-fg-secondary" />;
-}