@krizaka/ui 2.0.0-beta.6 → 2.0.0

package/README.md

@@ -112,7 +112,8 @@ peer range, because the marks and the motion still run on React 18: one `package
 12. **Motion**: `prefers-reduced-motion` is honoured (`motion-safe:`); no component animates a layout property.
 
 Colours are roles of the preset (`bg-surface-2`, `text-fg-secondary`, `border-border-default`, `text-accent`,
-`text-danger`), never a palette step nor `light:`: a theme — dark, light or a product's — is a set of tokens.
+`text-fg-danger` for an error as text, `bg-danger/10` for its tint), never a palette step nor `light:`: a theme — dark,
+light or a product's — is a set of tokens.
 
 ### Entries
 
@@ -120,7 +121,7 @@ Colours are roles of the preset (`bg-surface-2`, `text-fg-secondary`, `border-bo
 | :-- | :-- | :-- |
 | `@krizaka/ui/cn` | `cn(...classes)` — clsx + tailwind-merge (the engine `tailwind-variants` ships) | server |
 | `@krizaka/ui/slot` | `Slot`, `VisuallyHidden` (Radix) | server |
-| `@krizaka/ui/button` | `Button` (`variant` primary·secondary·outline·ghost·danger, `size` sm·md·lg·icon, `shape` rounded·pill, `loading`, `asChild`), `IconButton` (`label` required), `buttonVariants` | server |
+| `@krizaka/ui/button` | `Button` (`variant` primary·gradient·secondary·outline·ghost·danger, `size` sm·md·lg·icon, `shape` rounded·pill, `loading`, `asChild`), `IconButton` (`label` required), `buttonVariants` | server |
 | `@krizaka/ui/badge` | `Badge` (`tone` neutral·accent·success·warning·danger·scrim, `size` sm·md, `dot`, `pulse`), `badgeVariants` | server |
 | `@krizaka/ui/avatar` | `Avatar` (`src`, `alt`, `fallback`, `size` xs·sm·md·lg·xl), `Avatar.Group` (`max`) | client |
 | `@krizaka/ui/field` | `Field.Root/Label/Hint/Error`, `Input`, `Textarea`, `Select` (native, styled) — `invalid` | server |
@@ -128,7 +129,7 @@ Colours are roles of the preset (`bg-surface-2`, `text-fg-secondary`, `border-bo
 | `@krizaka/ui/skeleton` | `Skeleton` (`shape` text·circle·rect) | server |
 | `@krizaka/ui/empty-state` | `EmptyState` (`icon`, `title`, `description`, `action`) | server |
 | `@krizaka/ui/spinner` | `Spinner` (`label`, `size`) | server |
-| `@krizaka/ui/countdown` | `Countdown` (`target`, `label`, `units`, `size`, `urgentBelowMs`, `skewMs`), `useCountdown`, `splitDuration` | client |
+| `@krizaka/ui/countdown` | `Countdown` (`target`, `label`, `showLabel`, `units`, `size`, `urgentBelowMs`, `skewMs`), `useCountdown`, `splitDuration` | client |
 | `@krizaka/ui/card` | `Card.Root` (`asChild`, `reveal`, `radius` md·lg·xl, `tone` default·elevated·glass, `interactive`), `Card.Media` (`aspect` video·square·portrait·auto), `Card.Image` (`fallback`), `Card.Overlay` (`corner`), `Card.Body` (`padding`), `Card.Title` (`as`), `Card.Description`, `Card.Stat` (`label`), `Card.Footer`; `card` (the slots) | server |
 | `@krizaka/ui/dialog` | `Dialog.Root/Trigger/Content/Header/Title/Description/Body/Footer/Close` (`placement` center·bottom·right, `size` sm·md·lg, `closeLabel` required unless `hideClose`, `dismissible={false}`: no close on Escape or outside click), `Sheet` (= `placement="bottom"`), `AlertDialog` (`title`, `description`, `confirmLabel`, `cancelLabel`, `tone` danger·primary, async `onConfirm`, `trigger`) | client |
 | `@krizaka/ui/toast` | `Toaster` (sonner styled by roles: `label`, `closeLabel`, `position`, `closeButton`; `richColors` off), `toast` (`.success/.warning/.error/.info/.custom`…) | client |
@@ -248,15 +249,15 @@ const { theme, scheme, mode, setMode, radius } = useTheme(); // theme.surface1,
 | Native | Props (same names as the web unless noted) | Differences with the web |
 | :-- | :-- | :-- |
 | `Txt` | `variant` display·title·body·caption·label·mono, `tone` text·secondary·muted·accent·success·warning·danger·onAccent·onMedia | Native only (the web uses classes). `title`/`display` are headings. |
-| `Button`, `IconButton` | `variant` primary·secondary·outline·ghost·danger, `size` sm·md·lg, `shape` rounded·pill, `loading`, `disabled`, `onPress`; `IconButton`: `label` required, `icon` | The text is `label` (a string), not children; `icon` before it; no `asChild`. Haptics stay in the app's `onPress`. |
+| `Button`, `IconButton` | `variant` primary·gradient·secondary·outline·ghost·danger, `size` sm·md·lg, `shape` rounded·pill, `loading`, `disabled`, `onPress`; `IconButton`: `label` required, `icon` | The text is `label` (a string), not children; `icon` before it; no `asChild`. Haptics stay in the app's `onPress`. |
 | `Card.Root/Media/Image/Overlay/Body/Title/Description/Footer` | `tone` default·elevated, `radius`, `Media aspect`, `Image src`/`fallback`, `Overlay corner`, `Body padding` | `Root onPress` makes the card a button (the web uses `asChild` + a link). No `Stat`, no `reveal`. |
 | `Badge` | `tone` neutral·accent·success·warning·danger·scrim, `size` sm·md, `dot`, `pulse` | — |
 | `Chip`, `Chip.Group` | `selected`/`defaultSelected`/`onSelectedChange`, `value`, `size`, `removable` + `removeLabel` + `onRemove`; Group: `type` single·multiple, `value`/`defaultValue`/`onValueChange` | A toggle chip is a `checkbox` (web: a pressed button). `Group scrollable`: one horizontal row. |
-| `Avatar`, `Avatar.Group` | `src`, `alt`, `fallback`, `size` xs·sm·md·lg·xl; Group `max` | `size` also takes points; the default fallback is the initial of `alt`. |
+| `Avatar`, `Avatar.Group` | `src`, `svg`, `alt`, `fallback`, `size` xs·sm·md·lg·xl; Group `max` | `size` also takes points; the default fallback is the initial of `alt`; an SVG `src` is drawn by react-native-svg. |
 | `Skeleton` | `shape` text·circle·rect | `width`, `height` as props (no classes). |
 | `EmptyState` | `icon`, `title`, `description`, `action` | `title`/`description` are strings. |
 | `Spinner` | `label`, `size` sm·md·lg | The platform's `ActivityIndicator`. |
-| `Countdown` | `target`, `skewMs`, `units`, `urgentBelowMs`, `size`, `label` | Same clock (`countdown/core`): one interval for every countdown on screen. |
+| `Countdown` | `target`, `skewMs`, `units`, `urgentBelowMs`, `size`, `label`, `showLabel` | Same clock (`countdown/core`): one interval for every countdown on screen. |
 | `Segmented` | `options` (`value`, `label`, `disabled`), `value`, `onValueChange`, `size` | The web `Tabs variant="segmented"` (a tab list). To filter, `Chip.Group`. |
 | `Progress` | `variant` bar·ring, `size`, `value`/`max`, `label`, `valueText`, a ring's centre as children | The fill is the `accent` → `accent2` gradient (react-native-svg); it animates to each new value. |
 | `Toaster`, `toast` | `toast(title, { description, tone, icon, action, onPress, id, duration, onDismiss })`, `toast.success/warning/error/info`, `toast.dismiss(id?)`; `Toaster closeLabel position offset duration max` | No sonner: a light queue of its own. `offset` takes the safe-area inset (no safe-area dependency). |

package/dist/{button-D5aSsmxX.d.ts → button-Cgfkg_3y.d.ts}

@@ -5,6 +5,7 @@ import * as React from 'react';
 declare const buttonVariants: tailwind_variants.TVReturnType<{
     variant: {
         primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover";
+        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";
@@ -23,6 +24,7 @@ declare const buttonVariants: tailwind_variants.TVReturnType<{
 }, undefined, string, {
     variant: {
         primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover";
+        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";
@@ -41,6 +43,7 @@ declare const buttonVariants: tailwind_variants.TVReturnType<{
 }, undefined, tailwind_variants.TVReturnTypeLike<{
     variant: {
         primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover";
+        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";
@@ -60,7 +63,8 @@ declare const buttonVariants: tailwind_variants.TVReturnType<{
 type ButtonVariants = VariantProps<typeof buttonVariants>;
 type ButtonProps = React.ComponentProps<"button"> & ButtonVariants & {
     /**
-     * The look: `primary` (the accent), `secondary` (a raised surface), `outline`, `ghost`, `danger`.
+     * The look: `primary` (the accent), `gradient` (accent → accent-2), `secondary` (a raised surface), `outline`,
+     * `ghost`, `danger`.
      * @default "secondary"
      */
     variant?: ButtonVariants["variant"];

package/dist/button.d.ts

@@ -5,6 +5,7 @@ import * as React from 'react';
 declare const buttonVariants: tailwind_variants.TVReturnType<{
     variant: {
         primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover";
+        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";
@@ -23,6 +24,7 @@ declare const buttonVariants: tailwind_variants.TVReturnType<{
 }, undefined, string, {
     variant: {
         primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover";
+        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";
@@ -41,6 +43,7 @@ declare const buttonVariants: tailwind_variants.TVReturnType<{
 }, undefined, tailwind_variants.TVReturnTypeLike<{
     variant: {
         primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover";
+        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";
@@ -60,7 +63,8 @@ declare const buttonVariants: tailwind_variants.TVReturnType<{
 type ButtonVariants = VariantProps<typeof buttonVariants>;
 type ButtonProps = React.ComponentProps<"button"> & ButtonVariants & {
     /**
-     * The look: `primary` (the accent), `secondary` (a raised surface), `outline`, `ghost`, `danger`.
+     * The look: `primary` (the accent), `gradient` (accent → accent-2), `secondary` (a raised surface), `outline`,
+     * `ghost`, `danger`.
      * @default "secondary"
      */
     variant?: ButtonVariants["variant"];

package/dist/button.js

@@ -7,11 +7,13 @@ var buttonVariants = tv({
   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 danger token is invariant and too light for small text on a light surface (3.6:1): the label stays a
-      // text role, the border and the tint carry the danger.
+      // 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" },

package/dist/button.js.map

@@ -1 +1 @@
-{"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      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 danger token is invariant and too light for small text on a light surface (3.6:1): the label stays a\n      // text role, the border and the tint carry the danger.\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), `secondary` (a raised surface), `outline`, `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;AAmDlC;AAjDG,IAAM,iBAAiB,GAAG;AAAA,EAC/B,MACE;AAAA,EAGF,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,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;AA2BM,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":[]}
+{"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/dist/card.d.ts

@@ -198,9 +198,15 @@ type CardImageProps = Omit<React.ComponentProps<"img">, "src"> & {
     src?: string | null;
     /** Shown when there is no image: an icon, an illustration (decorative). */
     fallback?: React.ReactNode;
+    /**
+     * When the browser loads it: `lazy` (default, a card in a list or below the fold) or `eager` for the first cards
+     * of a page — the image that is the largest contentful paint must not wait (add `fetchPriority="high"`).
+     * @default "lazy"
+     */
+    loading?: "lazy" | "eager";
 };
 /** The image of a media, or its `fallback` when there is none. `alt` is empty by default: the title names the card. */
-declare function CardImage({ src, alt, fallback, className, ...props }: CardImageProps): React.JSX.Element;
+declare function CardImage({ src, alt, fallback, loading, className, ...props }: CardImageProps): React.JSX.Element;
 declare const CORNER: {
     readonly "top-left": "left-2.5 top-2.5";
     readonly "top-right": "right-2.5 top-2.5";

package/dist/card.js

@@ -48,11 +48,11 @@ var ASPECT = { video: "aspect-video", square: "aspect-square", portrait: "aspect
 function CardMedia({ aspect = "video", className, ...props }) {
   return /* @__PURE__ */ jsx("div", { "data-aspect": aspect, className: slots.media({ className: cn(ASPECT[aspect], className) }), ...props });
 }
-function CardImage({ src, alt = "", fallback, className, ...props }) {
+function CardImage({ src, alt = "", fallback, loading = "lazy", className, ...props }) {
   if (!src) {
     return /* @__PURE__ */ jsx("div", { "data-fallback": "", "aria-hidden": true, className: slots.fallback({ className }), children: fallback });
   }
-  return /* @__PURE__ */ jsx("img", { src, alt, loading: "lazy", decoding: "async", className: slots.image({ className }), ...props });
+  return /* @__PURE__ */ jsx("img", { src, alt, loading, decoding: "async", className: slots.image({ className }), ...props });
 }
 var CORNER = {
   "top-left": "left-2.5 top-2.5",

package/dist/card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/card/card.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\";\n\nexport const card = tv({\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\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\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, 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=\"lazy\" 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"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/card/card.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\";\n\nexport const card = tv({\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\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"],"mappings":"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","names":[]}

package/dist/{chunk-IUGBKMJC.js → chunk-FHYZSO2S.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   IconButton
-} from "./chunk-6DJ6SQY3.js";
+} from "./chunk-PESA2R4U.js";
 
 // src/dialog/dialog.tsx
 import { Dialog as DialogPrimitive } from "radix-ui";
@@ -118,4 +118,4 @@ export {
   Dialog,
   Sheet
 };
-//# sourceMappingURL=chunk-IUGBKMJC.js.map
+//# sourceMappingURL=chunk-FHYZSO2S.js.map

package/dist/{chunk-6DJ6SQY3.js → chunk-PESA2R4U.js}

@@ -9,11 +9,13 @@ var buttonVariants = tv({
   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 danger token is invariant and too light for small text on a light surface (3.6:1): the label stays a
-      // text role, the border and the tint carry the danger.
+      // 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" },
@@ -46,4 +48,4 @@ export {
   Button,
   IconButton
 };
-//# sourceMappingURL=chunk-6DJ6SQY3.js.map
+//# sourceMappingURL=chunk-PESA2R4U.js.map

package/dist/chunk-PESA2R4U.js.map

@@ -0,0 +1 @@
+{"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/dist/command.d.ts

@@ -106,13 +106,22 @@ declare function CommandInput({ className, placeholder, trailing, ...props }: Co
 type CommandListProps = React.ComponentProps<typeof Command$1.List> & {
     /** The accessible name of the list of results — passed translated ("Suggestions", "Results"). */
     label: string;
+    /**
+     * Shown when nothing matches — passed translated. Rendered after the listbox, never inside it: an empty listbox is
+     * valid, a listbox holding text is not.
+     */
+    emptyLabel?: React.ReactNode;
 };
-declare function CommandList({ className, ...props }: CommandListProps): React.JSX.Element;
+declare function CommandList({ className, emptyLabel, children, ...props }: CommandListProps): React.JSX.Element;
 type CommandEmptyProps = Omit<React.ComponentProps<typeof Command$1.Empty>, "children"> & {
     /** Shown when nothing matches — passed translated. */
     emptyLabel: React.ReactNode;
 };
-/** Shown by cmdk only when no item matches. */
+/**
+ * Shown by cmdk only when no item matches. Place it beside `Command.List` (or pass `emptyLabel` to the list), never
+ * inside it: inside, it is rendered as before but warns in development — the listbox then holds text, which axe
+ * refuses (`aria-required-children`).
+ */
 declare function CommandEmpty({ className, emptyLabel, ...props }: CommandEmptyProps): React.JSX.Element;
 /** While results load (`label` is announced). */
 declare function CommandLoading({ className, ...props }: React.ComponentProps<typeof Command$1.Loading>): React.JSX.Element;

package/dist/command.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   DialogContent
-} from "./chunk-IUGBKMJC.js";
-import "./chunk-6DJ6SQY3.js";
+} from "./chunk-FHYZSO2S.js";
+import "./chunk-PESA2R4U.js";
 import {
   cn
 } from "./chunk-5AXLA4LK.js";
@@ -10,15 +10,16 @@ import {
 // src/command/command.tsx
 import { Command as CommandPrimitive } from "cmdk";
 import { Dialog as DialogPrimitive } from "radix-ui";
+import * as React from "react";
 import { tv } from "tailwind-variants";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var command = tv({
   slots: {
     root: "flex h-full w-full flex-col overflow-hidden bg-surface-1 text-fg",
     inputWrap: "flex items-center gap-3 border-b border-border-default px-4",
     icon: "h-5 w-5 shrink-0 text-fg-secondary",
     input: "h-13 w-full min-w-0 flex-1 bg-transparent text-sm text-fg outline-hidden placeholder:text-fg-muted disabled:cursor-not-allowed disabled:opacity-50 sm:text-base",
-    list: "max-h-[min(60dvh,26rem)] scroll-py-2 overflow-y-auto overscroll-contain p-2",
+    list: "max-h-[min(60dvh,26rem)] scroll-py-2 overflow-y-auto overscroll-contain p-2 [&:not(:has([cmdk-item]))]:p-0",
     empty: "px-3 py-8 text-center text-sm text-fg-secondary",
     loading: "px-3 py-6 text-center text-sm text-fg-secondary",
     group: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:pt-3 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider [&_[cmdk-group-heading]]:text-fg-secondary",
@@ -44,10 +45,20 @@ function CommandInput({ className, placeholder, trailing, ...props }) {
     trailing
   ] });
 }
-function CommandList({ className, ...props }) {
-  return /* @__PURE__ */ jsx(CommandPrimitive.List, { className: s.list({ className }), ...props });
+var InsideList = React.createContext(false);
+function CommandList({ className, emptyLabel, children, ...props }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(CommandPrimitive.List, { className: s.list({ className }), ...props, children: /* @__PURE__ */ jsx(InsideList.Provider, { value: true, children }) }),
+    emptyLabel === void 0 ? null : /* @__PURE__ */ jsx(CommandEmpty, { emptyLabel })
+  ] });
 }
 function CommandEmpty({ className, emptyLabel, ...props }) {
+  const inside = React.useContext(InsideList);
+  React.useEffect(() => {
+    if (inside && typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+      console.warn("@krizaka/ui/command: <Command.Empty> inside <Command.List> breaks the listbox (axe aria-required-children). Pass `emptyLabel` to <Command.List> instead.");
+    }
+  }, [inside]);
   return /* @__PURE__ */ jsx(CommandPrimitive.Empty, { className: s.empty({ className }), ...props, children: emptyLabel });
 }
 function CommandLoading({ className, ...props }) {

package/dist/command.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/command/command.tsx"],"sourcesContent":["// Client. A command palette on cmdk: the combobox / listbox roles, the active option (aria-activedescendant), the\n// arrows, Home / End, Enter, and the filtering (turn it off with `shouldFilter={false}` when the server searches).\n// `CommandDialog` puts it in the platform's Dialog. Words arrive as props.\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { DialogContent, type DialogContentProps } from \"../dialog/dialog\";\n\nexport const command = tv({\n  slots: {\n    root: \"flex h-full w-full flex-col overflow-hidden bg-surface-1 text-fg\",\n    inputWrap: \"flex items-center gap-3 border-b border-border-default px-4\",\n    icon: \"h-5 w-5 shrink-0 text-fg-secondary\",\n    input:\n      \"h-13 w-full min-w-0 flex-1 bg-transparent text-sm text-fg outline-hidden placeholder:text-fg-muted disabled:cursor-not-allowed disabled:opacity-50 sm:text-base\",\n    list: \"max-h-[min(60dvh,26rem)] scroll-py-2 overflow-y-auto overscroll-contain p-2\",\n    empty: \"px-3 py-8 text-center text-sm text-fg-secondary\",\n    loading: \"px-3 py-6 text-center text-sm text-fg-secondary\",\n    group:\n      \"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:pt-3 [&_[cmdk-group-heading]]:text-xs \" +\n      \"[&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider [&_[cmdk-group-heading]]:text-fg-secondary\",\n    item:\n      \"relative flex cursor-pointer select-none items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-fg outline-hidden transition-colors \" +\n      \"before:absolute before:inset-y-2 before:left-0 before:w-0.5 before:rounded-full before:bg-transparent \" +\n      \"data-[selected=true]:bg-surface-2 data-[selected=true]:before:bg-accent data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-40\",\n    separator: \"-mx-2 my-1 h-px bg-border-subtle\",\n    shortcut: \"ml-auto text-xs tracking-widest text-fg-secondary\",\n  },\n});\nconst s = command();\n\nfunction SearchIcon({ className }: { className?: string }) {\n  return (\n    <svg viewBox=\"0 0 24 24\" className={className} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n      <circle cx=\"11\" cy=\"11\" r=\"7\" />\n      <path d=\"m20 20-3.5-3.5\" />\n    </svg>\n  );\n}\n\nexport type CommandRootProps = React.ComponentProps<typeof CommandPrimitive> & {\n  /** The accessible name of the palette — passed translated (\"Search\", \"Commands\"). */\n  label: string;\n};\n\n/** The palette: `value` / `onValueChange` (the active item), `shouldFilter`, `filter`, `loop`. */\nexport function CommandRoot({ className, ...props }: CommandRootProps) {\n  return <CommandPrimitive className={s.root({ className })} {...props} />;\n}\n\nexport type CommandInputProps = Omit<React.ComponentProps<typeof CommandPrimitive.Input>, \"placeholder\"> & {\n  /** What to type — passed translated. The input is named by the palette's `label`. */\n  placeholder: string;\n  /** After the input, inside the bar: a spinner, a clear button. */\n  trailing?: React.ReactNode;\n};\n\n/** The search field (`value` / `onValueChange` for the query), with a magnifier. */\nexport function CommandInput({ className, placeholder, trailing, ...props }: CommandInputProps) {\n  return (\n    <div className={s.inputWrap()} cmdk-input-wrapper=\"\">\n      <SearchIcon className={s.icon()} />\n      <CommandPrimitive.Input placeholder={placeholder} className={s.input({ className })} {...props} />\n      {trailing}\n    </div>\n  );\n}\n\nexport type CommandListProps = React.ComponentProps<typeof CommandPrimitive.List> & {\n  /** The accessible name of the list of results — passed translated (\"Suggestions\", \"Results\"). */\n  label: string;\n};\n\nexport function CommandList({ className, ...props }: CommandListProps) {\n  return <CommandPrimitive.List className={s.list({ className })} {...props} />;\n}\n\nexport type CommandEmptyProps = Omit<React.ComponentProps<typeof CommandPrimitive.Empty>, \"children\"> & {\n  /** Shown when nothing matches — passed translated. */\n  emptyLabel: React.ReactNode;\n};\n\n/** Shown by cmdk only when no item matches. */\nexport function CommandEmpty({ className, emptyLabel, ...props }: CommandEmptyProps) {\n  return (\n    <CommandPrimitive.Empty className={s.empty({ className })} {...props}>\n      {emptyLabel}\n    </CommandPrimitive.Empty>\n  );\n}\n\n/** While results load (`label` is announced). */\nexport function CommandLoading({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Loading>) {\n  return <CommandPrimitive.Loading className={s.loading({ className })} {...props} />;\n}\n\n/** A group of items under a `heading`. */\nexport function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return <CommandPrimitive.Group className={s.group({ className })} {...props} />;\n}\n\n/** An option: `onSelect` on Enter or click, `value` and `keywords` for the filter, `disabled`. */\nexport function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return <CommandPrimitive.Item className={s.item({ className })} {...props} />;\n}\n\n/** A line between groups. Decorative (`role=\"none\"`): cmdk's own separator is a role a listbox may not hold (axe). */\nexport function CommandSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div role=\"none\" className={s.separator({ className })} {...props} />;\n}\n\n/** A keyboard hint at the end of an item. */\nexport function CommandShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span className={s.shortcut({ className })} {...props} />;\n}\n\n/** `Command.Root/Input/List/Empty/Loading/Group/Item/Separator/Shortcut`. */\nexport const Command = {\n  Root: CommandRoot,\n  Input: CommandInput,\n  List: CommandList,\n  Empty: CommandEmpty,\n  Loading: CommandLoading,\n  Group: CommandGroup,\n  Item: CommandItem,\n  Separator: CommandSeparator,\n  Shortcut: CommandShortcut,\n};\n\nexport type CommandDialogProps = Omit<CommandRootProps, \"title\"> & {\n  /** Open or closed (controlled), with `onOpenChange`. */\n  open?: boolean;\n  /** Open at first, uncontrolled. */\n  defaultOpen?: boolean;\n  /** Called when it opens or closes (Escape, a click outside, a shortcut of the product). */\n  onOpenChange?: (open: boolean) => void;\n  /** Under the palette, inside the dialog: shortcuts, a \"see all results\" link. */\n  footer?: React.ReactNode;\n  /** Passed to `Dialog.Content`: `size`, `container`, `className` of the dialog. */\n  contentProps?: Omit<Extract<DialogContentProps, { hideClose: true }>, \"hideClose\" | \"children\" | \"placement\">;\n};\n\n/**\n * The palette in a dialog (Radix: focus trap, Escape, focus return). The dialog is named by `label`; it has no close\n * button — Escape and a click outside close it — and the input takes the focus when it opens.\n */\nexport function CommandDialog({ open, defaultOpen, onOpenChange, footer, contentProps, label, className, children, ...props }: CommandDialogProps) {\n  const { className: contentClassName, ...content } = contentProps ?? {};\n  return (\n    <DialogPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      <DialogContent\n        hideClose\n        size=\"lg\"\n        aria-describedby={undefined}\n        className={cn(\"top-[12dvh] translate-y-0 sm:top-[14dvh]\", contentClassName)}\n        {...content}\n      >\n        <DialogPrimitive.Title className=\"sr-only\">{label}</DialogPrimitive.Title>\n        <CommandRoot label={label} className={className} {...props}>\n          {children}\n        </CommandRoot>\n        {footer}\n      </DialogContent>\n    </DialogPrimitive.Root>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/command/command.tsx"],"sourcesContent":["// Client. A command palette on cmdk: the combobox / listbox roles, the active option (aria-activedescendant), the\n// arrows, Home / End, Enter, and the filtering (turn it off with `shouldFilter={false}` when the server searches).\n// `CommandDialog` puts it in the platform's Dialog. Words arrive as props.\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { DialogContent, type DialogContentProps } from \"../dialog/dialog\";\n\nexport const command = tv({\n  slots: {\n    root: \"flex h-full w-full flex-col overflow-hidden bg-surface-1 text-fg\",\n    inputWrap: \"flex items-center gap-3 border-b border-border-default px-4\",\n    icon: \"h-5 w-5 shrink-0 text-fg-secondary\",\n    input:\n      \"h-13 w-full min-w-0 flex-1 bg-transparent text-sm text-fg outline-hidden placeholder:text-fg-muted disabled:cursor-not-allowed disabled:opacity-50 sm:text-base\",\n    list: \"max-h-[min(60dvh,26rem)] scroll-py-2 overflow-y-auto overscroll-contain p-2 [&:not(:has([cmdk-item]))]:p-0\",\n    empty: \"px-3 py-8 text-center text-sm text-fg-secondary\",\n    loading: \"px-3 py-6 text-center text-sm text-fg-secondary\",\n    group:\n      \"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:pt-3 [&_[cmdk-group-heading]]:text-xs \" +\n      \"[&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider [&_[cmdk-group-heading]]:text-fg-secondary\",\n    item:\n      \"relative flex cursor-pointer select-none items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-fg outline-hidden transition-colors \" +\n      \"before:absolute before:inset-y-2 before:left-0 before:w-0.5 before:rounded-full before:bg-transparent \" +\n      \"data-[selected=true]:bg-surface-2 data-[selected=true]:before:bg-accent data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-40\",\n    separator: \"-mx-2 my-1 h-px bg-border-subtle\",\n    shortcut: \"ml-auto text-xs tracking-widest text-fg-secondary\",\n  },\n});\nconst s = command();\n\nfunction SearchIcon({ className }: { className?: string }) {\n  return (\n    <svg viewBox=\"0 0 24 24\" className={className} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n      <circle cx=\"11\" cy=\"11\" r=\"7\" />\n      <path d=\"m20 20-3.5-3.5\" />\n    </svg>\n  );\n}\n\nexport type CommandRootProps = React.ComponentProps<typeof CommandPrimitive> & {\n  /** The accessible name of the palette — passed translated (\"Search\", \"Commands\"). */\n  label: string;\n};\n\n/** The palette: `value` / `onValueChange` (the active item), `shouldFilter`, `filter`, `loop`. */\nexport function CommandRoot({ className, ...props }: CommandRootProps) {\n  return <CommandPrimitive className={s.root({ className })} {...props} />;\n}\n\nexport type CommandInputProps = Omit<React.ComponentProps<typeof CommandPrimitive.Input>, \"placeholder\"> & {\n  /** What to type — passed translated. The input is named by the palette's `label`. */\n  placeholder: string;\n  /** After the input, inside the bar: a spinner, a clear button. */\n  trailing?: React.ReactNode;\n};\n\n/** The search field (`value` / `onValueChange` for the query), with a magnifier. */\nexport function CommandInput({ className, placeholder, trailing, ...props }: CommandInputProps) {\n  return (\n    <div className={s.inputWrap()} cmdk-input-wrapper=\"\">\n      <SearchIcon className={s.icon()} />\n      <CommandPrimitive.Input placeholder={placeholder} className={s.input({ className })} {...props} />\n      {trailing}\n    </div>\n  );\n}\n\n// Set inside `Command.List`: a listbox may only hold options and groups (axe `aria-required-children`), so the empty\n// message must live beside it, not in it.\nconst InsideList = React.createContext(false);\n\nexport type CommandListProps = React.ComponentProps<typeof CommandPrimitive.List> & {\n  /** The accessible name of the list of results — passed translated (\"Suggestions\", \"Results\"). */\n  label: string;\n  /**\n   * Shown when nothing matches — passed translated. Rendered after the listbox, never inside it: an empty listbox is\n   * valid, a listbox holding text is not.\n   */\n  emptyLabel?: React.ReactNode;\n};\n\nexport function CommandList({ className, emptyLabel, children, ...props }: CommandListProps) {\n  return (\n    <>\n      <CommandPrimitive.List className={s.list({ className })} {...props}>\n        <InsideList.Provider value>{children}</InsideList.Provider>\n      </CommandPrimitive.List>\n      {emptyLabel === undefined ? null : <CommandEmpty emptyLabel={emptyLabel} />}\n    </>\n  );\n}\n\nexport type CommandEmptyProps = Omit<React.ComponentProps<typeof CommandPrimitive.Empty>, \"children\"> & {\n  /** Shown when nothing matches — passed translated. */\n  emptyLabel: React.ReactNode;\n};\n\n/**\n * Shown by cmdk only when no item matches. Place it beside `Command.List` (or pass `emptyLabel` to the list), never\n * inside it: inside, it is rendered as before but warns in development — the listbox then holds text, which axe\n * refuses (`aria-required-children`).\n */\nexport function CommandEmpty({ className, emptyLabel, ...props }: CommandEmptyProps) {\n  const inside = React.useContext(InsideList);\n  React.useEffect(() => {\n    if (inside && typeof process !== \"undefined\" && process.env.NODE_ENV !== \"production\") {\n      console.warn(\"@krizaka/ui/command: <Command.Empty> inside <Command.List> breaks the listbox (axe aria-required-children). Pass `emptyLabel` to <Command.List> instead.\");\n    }\n  }, [inside]);\n  return (\n    <CommandPrimitive.Empty className={s.empty({ className })} {...props}>\n      {emptyLabel}\n    </CommandPrimitive.Empty>\n  );\n}\n\n/** While results load (`label` is announced). */\nexport function CommandLoading({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Loading>) {\n  return <CommandPrimitive.Loading className={s.loading({ className })} {...props} />;\n}\n\n/** A group of items under a `heading`. */\nexport function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return <CommandPrimitive.Group className={s.group({ className })} {...props} />;\n}\n\n/** An option: `onSelect` on Enter or click, `value` and `keywords` for the filter, `disabled`. */\nexport function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return <CommandPrimitive.Item className={s.item({ className })} {...props} />;\n}\n\n/** A line between groups. Decorative (`role=\"none\"`): cmdk's own separator is a role a listbox may not hold (axe). */\nexport function CommandSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div role=\"none\" className={s.separator({ className })} {...props} />;\n}\n\n/** A keyboard hint at the end of an item. */\nexport function CommandShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span className={s.shortcut({ className })} {...props} />;\n}\n\n/** `Command.Root/Input/List/Empty/Loading/Group/Item/Separator/Shortcut`. */\nexport const Command = {\n  Root: CommandRoot,\n  Input: CommandInput,\n  List: CommandList,\n  Empty: CommandEmpty,\n  Loading: CommandLoading,\n  Group: CommandGroup,\n  Item: CommandItem,\n  Separator: CommandSeparator,\n  Shortcut: CommandShortcut,\n};\n\nexport type CommandDialogProps = Omit<CommandRootProps, \"title\"> & {\n  /** Open or closed (controlled), with `onOpenChange`. */\n  open?: boolean;\n  /** Open at first, uncontrolled. */\n  defaultOpen?: boolean;\n  /** Called when it opens or closes (Escape, a click outside, a shortcut of the product). */\n  onOpenChange?: (open: boolean) => void;\n  /** Under the palette, inside the dialog: shortcuts, a \"see all results\" link. */\n  footer?: React.ReactNode;\n  /** Passed to `Dialog.Content`: `size`, `container`, `className` of the dialog. */\n  contentProps?: Omit<Extract<DialogContentProps, { hideClose: true }>, \"hideClose\" | \"children\" | \"placement\">;\n};\n\n/**\n * The palette in a dialog (Radix: focus trap, Escape, focus return). The dialog is named by `label`; it has no close\n * button — Escape and a click outside close it — and the input takes the focus when it opens.\n */\nexport function CommandDialog({ open, defaultOpen, onOpenChange, footer, contentProps, label, className, children, ...props }: CommandDialogProps) {\n  const { className: contentClassName, ...content } = contentProps ?? {};\n  return (\n    <DialogPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      <DialogContent\n        hideClose\n        size=\"lg\"\n        aria-describedby={undefined}\n        className={cn(\"top-[12dvh] translate-y-0 sm:top-[14dvh]\", contentClassName)}\n        {...content}\n      >\n        <DialogPrimitive.Title className=\"sr-only\">{label}</DialogPrimitive.Title>\n        <CommandRoot label={label} className={className} {...props}>\n          {children}\n        </CommandRoot>\n        {footer}\n      </DialogContent>\n    </DialogPrimitive.Root>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/confirm-button.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { B as ButtonProps } from './button-D5aSsmxX.js';
+import { B as ButtonProps } from './button-Cgfkg_3y.js';
 import 'tailwind-variants';
 
 declare const confirmArmed = "border border-danger bg-danger/20 text-fg hover:border-danger hover:bg-danger/30";

package/dist/confirm-button.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Button
-} from "./chunk-6DJ6SQY3.js";
+} from "./chunk-PESA2R4U.js";
 import {
   cn
 } from "./chunk-5AXLA4LK.js";

package/dist/countdown.d.ts

@@ -26,24 +26,25 @@ type CountdownProps = {
     skewMs?: number;
     /** The short unit labels, passed translated. */
     units: CountdownUnits;
-    /** Below this many milliseconds it turns urgent (`text-danger`, the last segment pulses). Default 60 s. */
+    /** Below this many milliseconds it turns urgent (`text-fg-danger`, the last segment pulses). Default 60 s. */
     urgentBelowMs?: number;
-    /** sm · md · lg (the danger role is large-text safe from `md`). */
+    /** sm · md · lg — the danger text role reads at 4.5:1 at every size, in both themes. */
     size?: "sm" | "md" | "lg";
     /** Accessible name, e.g. "Ends in". */
     label: string;
+    /** Also show `label` before the segments, in the secondary text role (default: only read by screen readers). */
+    showLabel?: boolean;
     /** Classes merged last, over the primitive's. */
     className?: string;
 };
 /**
  * Time left until a moment, as segments (2d 04h 13m 09s — days only when there are some) in tabular figures. Under
- * `urgentBelowMs` it turns to the danger role and its last segment pulses (no motion under prefers-reduced-motion).
+ * `urgentBelowMs` it turns to the danger text role and its last segment pulses (no motion under prefers-reduced-motion).
  * Words come from the app: `units` are the short unit labels. `role="timer"` without live announcements — the app
  * announces what matters. State: `data-urgent`, `data-ended`.
  *
- * The danger role is large-text safe (≥ 3:1) from `size="md"`; at `size="sm"` an urgent countdown in light mode is
- * under the 4.5:1 of small text.
+ * The urgent colour is `--kz-danger-text` (≥ 4.5:1 on every surface in both themes), so `size="sm"` is safe too.
  */
-declare function Countdown({ target, skewMs, units, urgentBelowMs, size, label, className }: CountdownProps): React.JSX.Element;
+declare function Countdown({ target, skewMs, units, urgentBelowMs, size, label, showLabel, className }: CountdownProps): React.JSX.Element;
 
 export { Countdown, type CountdownProps, type CountdownUnits, countdownParts, splitDuration, useCountdown };

package/dist/countdown.js

@@ -36,20 +36,21 @@ var countdown = tv({
   slots: {
     root: "inline-flex items-baseline gap-1.5 font-display font-black tabular-nums tracking-tight text-fg",
     segment: "inline-flex items-baseline",
-    unit: "ml-0.5 text-[0.5em] font-bold uppercase text-fg-secondary"
+    unit: "ml-0.5 text-[0.5em] font-bold uppercase text-fg-secondary",
+    label: "mr-0.5 self-center font-sans text-[0.6em] font-semibold tracking-normal text-fg-secondary"
   },
   variants: {
     size: { sm: { root: "text-sm" }, md: { root: "text-xl" }, lg: { root: "text-3xl sm:text-4xl" } },
-    urgent: { true: { root: "text-danger" } }
+    urgent: { true: { root: "text-fg-danger" } }
   },
   defaultVariants: { size: "md" }
 });
-function Countdown({ target, skewMs = 0, units, urgentBelowMs = 6e4, size = "md", label, className }) {
+function Countdown({ target, skewMs = 0, units, urgentBelowMs = 6e4, size = "md", label, showLabel = false, className }) {
   const ms = useCountdown(target, skewMs);
   const urgent = ms > 0 && ms < urgentBelowMs;
   const parts = countdownParts(ms, units);
   const s = countdown({ size, urgent });
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "span",
     {
       role: "timer",
@@ -58,10 +59,13 @@ function Countdown({ target, skewMs = 0, units, urgentBelowMs = 6e4, size = "md"
       "data-ended": ms === 0 ? "" : void 0,
       suppressHydrationWarning: true,
       className: s.root({ className }),
-      children: parts.map(([value, unit], i) => /* @__PURE__ */ jsxs("span", { className: s.segment({ className: urgent && i === parts.length - 1 ? "motion-safe:animate-pulse" : void 0 }), children: [
-        String(value).padStart(2, "0"),
-        /* @__PURE__ */ jsx("span", { className: s.unit(), children: unit })
-      ] }, unit))
+      children: [
+        showLabel ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: s.label(), children: label }) : null,
+        parts.map(([value, unit], i) => /* @__PURE__ */ jsxs("span", { className: s.segment({ className: urgent && i === parts.length - 1 ? "motion-safe:animate-pulse" : void 0 }), children: [
+          String(value).padStart(2, "0"),
+          /* @__PURE__ */ jsx("span", { className: s.unit(), children: unit })
+        ] }, unit))
+      ]
     }
   );
 }

package/dist/countdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/countdown/core.ts","../src/countdown/countdown.tsx"],"sourcesContent":["// The countdown's clock, shared by the web (`@krizaka/ui/countdown`) and native renders: no DOM import.\nimport { useSyncExternalStore } from \"react\";\n\n// One clock for every countdown on the page: it ticks each second while someone listens.\nconst listeners = new Set<() => void>();\nlet timer: ReturnType<typeof setInterval> | null = null;\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  timer ??= setInterval(() => listeners.forEach((l) => l()), 1000);\n  return () => {\n    listeners.delete(listener);\n    if (listeners.size === 0 && timer) {\n      clearInterval(timer);\n      timer = null;\n    }\n  };\n}\n\nconst nowSecond = () => Math.floor(Date.now() / 1000) * 1000;\n\n/** Milliseconds left until `target` (never negative), ticking every second. `skewMs` = server clock − this clock. */\nexport function useCountdown(target: Date | string | number, skewMs = 0): number {\n  const now = useSyncExternalStore(subscribe, nowSecond, nowSecond);\n  return Math.max(0, new Date(target).getTime() - (now + skewMs));\n}\n\n/** Splits a duration into days, hours, minutes and seconds. */\nexport function splitDuration(ms: number): { d: number; h: number; m: number; s: number } {\n  const total = Math.max(0, Math.floor(ms / 1000));\n  return { d: Math.floor(total / 86400), h: Math.floor((total % 86400) / 3600), m: Math.floor((total % 3600) / 60), s: total % 60 };\n}\n\n/** The short unit labels, passed translated (e.g. `{ d: \"d\", h: \"h\", m: \"m\", s: \"s\" }`). */\nexport type CountdownUnits = { d: string; h: string; m: string; s: string };\n\n/** The three segments shown: days, hours, minutes when there are days; else hours, minutes, seconds. */\nexport function countdownParts(ms: number, units: CountdownUnits): [number, string][] {\n  const { d, h, m, s } = splitDuration(ms);\n  return d > 0 ? [[d, units.d], [h, units.h], [m, units.m]] : [[h, units.h], [m, units.m], [s, units.s]];\n}\n","// Client: the clock is a hook.\nimport { tv } from \"tailwind-variants\";\n\nimport { countdownParts, type CountdownUnits, useCountdown } from \"./core\";\n\nconst countdown = tv({\n  slots: {\n    root: \"inline-flex items-baseline gap-1.5 font-display font-black tabular-nums tracking-tight text-fg\",\n    segment: \"inline-flex items-baseline\",\n    unit: \"ml-0.5 text-[0.5em] font-bold uppercase text-fg-secondary\",\n  },\n  variants: {\n    size: { sm: { root: \"text-sm\" }, md: { root: \"text-xl\" }, lg: { root: \"text-3xl sm:text-4xl\" } },\n    urgent: { true: { root: \"text-danger\" } },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type CountdownProps = {\n  /** The moment it counts down to: a Date, an ISO string or epoch milliseconds. */\n  target: Date | string | number;\n  /** Server clock − this clock, in milliseconds. */\n  skewMs?: number;\n  /** The short unit labels, passed translated. */\n  units: CountdownUnits;\n  /** Below this many milliseconds it turns urgent (`text-danger`, the last segment pulses). Default 60 s. */\n  urgentBelowMs?: number;\n  /** sm · md · lg (the danger role is large-text safe from `md`). */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Accessible name, e.g. \"Ends in\". */\n  label: string;\n  /** Classes merged last, over the primitive's. */\n  className?: string;\n};\n\n/**\n * Time left until a moment, as segments (2d 04h 13m 09s — days only when there are some) in tabular figures. Under\n * `urgentBelowMs` it turns to the danger role and its last segment pulses (no motion under prefers-reduced-motion).\n * Words come from the app: `units` are the short unit labels. `role=\"timer\"` without live announcements — the app\n * announces what matters. State: `data-urgent`, `data-ended`.\n *\n * The danger role is large-text safe (≥ 3:1) from `size=\"md\"`; at `size=\"sm\"` an urgent countdown in light mode is\n * under the 4.5:1 of small text.\n */\nexport function Countdown({ target, skewMs = 0, units, urgentBelowMs = 60_000, size = \"md\", label, className }: CountdownProps) {\n  const ms = useCountdown(target, skewMs);\n  const urgent = ms > 0 && ms < urgentBelowMs;\n  const parts = countdownParts(ms, units);\n  const s = countdown({ size, urgent });\n  return (\n    <span\n      role=\"timer\"\n      aria-label={label}\n      data-urgent={urgent ? \"\" : undefined}\n      data-ended={ms === 0 ? \"\" : undefined}\n      suppressHydrationWarning\n      className={s.root({ className })}\n    >\n      {parts.map(([value, unit], i) => (\n        <span key={unit} className={s.segment({ className: urgent && i === parts.length - 1 ? \"motion-safe:animate-pulse\" : undefined })}>\n          {String(value).padStart(2, \"0\")}\n          <span className={s.unit()}>{unit}</span>\n        </span>\n      ))}\n    </span>\n  );\n}\n"],"mappings":";;;AACA,SAAS,4BAA4B;AAGrC,IAAM,YAAY,oBAAI,IAAgB;AACtC,IAAI,QAA+C;AAEnD,SAAS,UAAU,UAAsB;AACvC,YAAU,IAAI,QAAQ;AACtB,YAAU,YAAY,MAAM,UAAU,QAAQ,CAAC,MAAM,EAAE,CAAC,GAAG,GAAI;AAC/D,SAAO,MAAM;AACX,cAAU,OAAO,QAAQ;AACzB,QAAI,UAAU,SAAS,KAAK,OAAO;AACjC,oBAAc,KAAK;AACnB,cAAQ;AAAA,IACV;AAAA,EACF;AACF;AAEA,IAAM,YAAY,MAAM,KAAK,MAAM,KAAK,IAAI,IAAI,GAAI,IAAI;AAGjD,SAAS,aAAa,QAAgC,SAAS,GAAW;AAC/E,QAAM,MAAM,qBAAqB,WAAW,WAAW,SAAS;AAChE,SAAO,KAAK,IAAI,GAAG,IAAI,KAAK,MAAM,EAAE,QAAQ,KAAK,MAAM,OAAO;AAChE;AAGO,SAAS,cAAc,IAA4D;AACxF,QAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,GAAI,CAAC;AAC/C,SAAO,EAAE,GAAG,KAAK,MAAM,QAAQ,KAAK,GAAG,GAAG,KAAK,MAAO,QAAQ,QAAS,IAAI,GAAG,GAAG,KAAK,MAAO,QAAQ,OAAQ,EAAE,GAAG,GAAG,QAAQ,GAAG;AAClI;AAMO,SAAS,eAAe,IAAY,OAA2C;AACpF,QAAM,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,cAAc,EAAE;AACvC,SAAO,IAAI,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC;AACvG;;;ACvCA,SAAS,UAAU;AA0DX,SAEE,KAFF;AAtDR,IAAM,YAAY,GAAG;AAAA,EACnB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,MAAM,EAAE,IAAI,EAAE,MAAM,UAAU,GAAG,IAAI,EAAE,MAAM,UAAU,GAAG,IAAI,EAAE,MAAM,uBAAuB,EAAE;AAAA,IAC/F,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,EAAE;AAAA,EAC1C;AAAA,EACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;AA4BM,SAAS,UAAU,EAAE,QAAQ,SAAS,GAAG,OAAO,gBAAgB,KAAQ,OAAO,MAAM,OAAO,UAAU,GAAmB;AAC9H,QAAM,KAAK,aAAa,QAAQ,MAAM;AACtC,QAAM,SAAS,KAAK,KAAK,KAAK;AAC9B,QAAM,QAAQ,eAAe,IAAI,KAAK;AACtC,QAAM,IAAI,UAAU,EAAE,MAAM,OAAO,CAAC;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,eAAa,SAAS,KAAK;AAAA,MAC3B,cAAY,OAAO,IAAI,KAAK;AAAA,MAC5B,0BAAwB;AAAA,MACxB,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC;AAAA,MAE9B,gBAAM,IAAI,CAAC,CAAC,OAAO,IAAI,GAAG,MACzB,qBAAC,UAAgB,WAAW,EAAE,QAAQ,EAAE,WAAW,UAAU,MAAM,MAAM,SAAS,IAAI,8BAA8B,OAAU,CAAC,GAC5H;AAAA,eAAO,KAAK,EAAE,SAAS,GAAG,GAAG;AAAA,QAC9B,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,WAFxB,IAGX,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../src/countdown/core.ts","../src/countdown/countdown.tsx"],"sourcesContent":["// The countdown's clock, shared by the web (`@krizaka/ui/countdown`) and native renders: no DOM import.\nimport { useSyncExternalStore } from \"react\";\n\n// One clock for every countdown on the page: it ticks each second while someone listens.\nconst listeners = new Set<() => void>();\nlet timer: ReturnType<typeof setInterval> | null = null;\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  timer ??= setInterval(() => listeners.forEach((l) => l()), 1000);\n  return () => {\n    listeners.delete(listener);\n    if (listeners.size === 0 && timer) {\n      clearInterval(timer);\n      timer = null;\n    }\n  };\n}\n\nconst nowSecond = () => Math.floor(Date.now() / 1000) * 1000;\n\n/** Milliseconds left until `target` (never negative), ticking every second. `skewMs` = server clock − this clock. */\nexport function useCountdown(target: Date | string | number, skewMs = 0): number {\n  const now = useSyncExternalStore(subscribe, nowSecond, nowSecond);\n  return Math.max(0, new Date(target).getTime() - (now + skewMs));\n}\n\n/** Splits a duration into days, hours, minutes and seconds. */\nexport function splitDuration(ms: number): { d: number; h: number; m: number; s: number } {\n  const total = Math.max(0, Math.floor(ms / 1000));\n  return { d: Math.floor(total / 86400), h: Math.floor((total % 86400) / 3600), m: Math.floor((total % 3600) / 60), s: total % 60 };\n}\n\n/** The short unit labels, passed translated (e.g. `{ d: \"d\", h: \"h\", m: \"m\", s: \"s\" }`). */\nexport type CountdownUnits = { d: string; h: string; m: string; s: string };\n\n/** The three segments shown: days, hours, minutes when there are days; else hours, minutes, seconds. */\nexport function countdownParts(ms: number, units: CountdownUnits): [number, string][] {\n  const { d, h, m, s } = splitDuration(ms);\n  return d > 0 ? [[d, units.d], [h, units.h], [m, units.m]] : [[h, units.h], [m, units.m], [s, units.s]];\n}\n","// Client: the clock is a hook.\nimport { tv } from \"tailwind-variants\";\n\nimport { countdownParts, type CountdownUnits, useCountdown } from \"./core\";\n\nconst countdown = tv({\n  slots: {\n    root: \"inline-flex items-baseline gap-1.5 font-display font-black tabular-nums tracking-tight text-fg\",\n    segment: \"inline-flex items-baseline\",\n    unit: \"ml-0.5 text-[0.5em] font-bold uppercase text-fg-secondary\",\n    label: \"mr-0.5 self-center font-sans text-[0.6em] font-semibold tracking-normal text-fg-secondary\",\n  },\n  variants: {\n    size: { sm: { root: \"text-sm\" }, md: { root: \"text-xl\" }, lg: { root: \"text-3xl sm:text-4xl\" } },\n    urgent: { true: { root: \"text-fg-danger\" } },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type CountdownProps = {\n  /** The moment it counts down to: a Date, an ISO string or epoch milliseconds. */\n  target: Date | string | number;\n  /** Server clock − this clock, in milliseconds. */\n  skewMs?: number;\n  /** The short unit labels, passed translated. */\n  units: CountdownUnits;\n  /** Below this many milliseconds it turns urgent (`text-fg-danger`, the last segment pulses). Default 60 s. */\n  urgentBelowMs?: number;\n  /** sm · md · lg — the danger text role reads at 4.5:1 at every size, in both themes. */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Accessible name, e.g. \"Ends in\". */\n  label: string;\n  /** Also show `label` before the segments, in the secondary text role (default: only read by screen readers). */\n  showLabel?: boolean;\n  /** Classes merged last, over the primitive's. */\n  className?: string;\n};\n\n/**\n * Time left until a moment, as segments (2d 04h 13m 09s — days only when there are some) in tabular figures. Under\n * `urgentBelowMs` it turns to the danger text role and its last segment pulses (no motion under prefers-reduced-motion).\n * Words come from the app: `units` are the short unit labels. `role=\"timer\"` without live announcements — the app\n * announces what matters. State: `data-urgent`, `data-ended`.\n *\n * The urgent colour is `--kz-danger-text` (≥ 4.5:1 on every surface in both themes), so `size=\"sm\"` is safe too.\n */\nexport function Countdown({ target, skewMs = 0, units, urgentBelowMs = 60_000, size = \"md\", label, showLabel = false, className }: CountdownProps) {\n  const ms = useCountdown(target, skewMs);\n  const urgent = ms > 0 && ms < urgentBelowMs;\n  const parts = countdownParts(ms, units);\n  const s = countdown({ size, urgent });\n  return (\n    <span\n      role=\"timer\"\n      aria-label={label}\n      data-urgent={urgent ? \"\" : undefined}\n      data-ended={ms === 0 ? \"\" : undefined}\n      suppressHydrationWarning\n      className={s.root({ className })}\n    >\n      {showLabel ? (\n        <span aria-hidden className={s.label()}>\n          {label}\n        </span>\n      ) : null}\n      {parts.map(([value, unit], i) => (\n        <span key={unit} className={s.segment({ className: urgent && i === parts.length - 1 ? \"motion-safe:animate-pulse\" : undefined })}>\n          {String(value).padStart(2, \"0\")}\n          <span className={s.unit()}>{unit}</span>\n        </span>\n      ))}\n    </span>\n  );\n}\n"],"mappings":"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","names":[]}