@krizaka/ui 1.3.0 → 2.0.0-beta.1

package/dist/button.js

@@ -0,0 +1,46 @@
+// 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",
+      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-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.
+      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 {
+  Button,
+  IconButton,
+  buttonVariants
+};
+//# sourceMappingURL=button.js.map

package/dist/button.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      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-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    /** 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  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;AAoClC;AAlCG,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;AAYM,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;AASO,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

@@ -0,0 +1,227 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as React from 'react';
+
+declare const card: tailwind_variants.TVReturnType<{
+    radius: {
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+    tone: {
+        default: {};
+        elevated: {
+            root: string;
+        };
+        glass: {
+            root: string;
+        };
+    };
+    interactive: {
+        true: {
+            root: string;
+        };
+    };
+    padding: {
+        none: {
+            body: string;
+        };
+        sm: {
+            body: string;
+        };
+        md: {
+            body: string;
+        };
+        lg: {
+            body: string;
+        };
+    };
+}, {
+    root: string;
+    media: string;
+    image: string;
+    fallback: string;
+    overlay: string;
+    body: string;
+    title: string;
+    description: string;
+    stat: string;
+    statLabel: string;
+    statValue: string;
+    footer: string;
+}, undefined, {
+    radius: {
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+    tone: {
+        default: {};
+        elevated: {
+            root: string;
+        };
+        glass: {
+            root: string;
+        };
+    };
+    interactive: {
+        true: {
+            root: string;
+        };
+    };
+    padding: {
+        none: {
+            body: string;
+        };
+        sm: {
+            body: string;
+        };
+        md: {
+            body: string;
+        };
+        lg: {
+            body: string;
+        };
+    };
+}, {
+    root: string;
+    media: string;
+    image: string;
+    fallback: string;
+    overlay: string;
+    body: string;
+    title: string;
+    description: string;
+    stat: string;
+    statLabel: string;
+    statValue: string;
+    footer: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    radius: {
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+    tone: {
+        default: {};
+        elevated: {
+            root: string;
+        };
+        glass: {
+            root: string;
+        };
+    };
+    interactive: {
+        true: {
+            root: string;
+        };
+    };
+    padding: {
+        none: {
+            body: string;
+        };
+        sm: {
+            body: string;
+        };
+        md: {
+            body: string;
+        };
+        lg: {
+            body: string;
+        };
+    };
+}, {
+    root: string;
+    media: string;
+    image: string;
+    fallback: string;
+    overlay: string;
+    body: string;
+    title: string;
+    description: string;
+    stat: string;
+    statLabel: string;
+    statValue: string;
+    footer: string;
+}>>;
+type CardVariants = VariantProps<typeof card>;
+type CardRootProps = React.ComponentProps<"div"> & Pick<CardVariants, "radius" | "tone" | "interactive"> & {
+    /** Renders the child (a link, an article) instead of the <div>, with props, classes and ref merged. */
+    asChild?: boolean;
+    /** Enters on scroll (MotionObserver): the index in the grid becomes the delay (50 ms a step, 8 steps at most). */
+    reveal?: number;
+};
+declare function CardRoot({ asChild, reveal, radius, tone, interactive, className, style, ...props }: CardRootProps): React.JSX.Element;
+declare const ASPECT: {
+    readonly video: "aspect-video";
+    readonly square: "aspect-square";
+    readonly portrait: "aspect-[3/4]";
+    readonly auto: "";
+};
+type CardMediaProps = React.ComponentProps<"div"> & {
+    aspect?: keyof typeof ASPECT;
+};
+declare function CardMedia({ aspect, className, ...props }: CardMediaProps): React.JSX.Element;
+type CardImageProps = Omit<React.ComponentProps<"img">, "src"> & {
+    src?: string | null;
+    /** Shown when there is no image: an icon, an illustration (decorative). */
+    fallback?: React.ReactNode;
+};
+/** 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 const CORNER: {
+    readonly "top-left": "left-2.5 top-2.5";
+    readonly "top-right": "right-2.5 top-2.5";
+    readonly "bottom-left": "bottom-2.5 left-2.5";
+    readonly "bottom-right": "bottom-2.5 right-2.5";
+};
+type CardOverlayProps = React.ComponentProps<"div"> & {
+    corner?: keyof typeof CORNER;
+};
+/** What sits on the media (badges, a caption). `scrim` and `fg-on-media` are invariant: nothing to do for light. */
+declare function CardOverlay({ corner, className, ...props }: CardOverlayProps): React.JSX.Element;
+type CardBodyProps = React.ComponentProps<"div"> & Pick<CardVariants, "padding">;
+declare function CardBody({ padding, className, ...props }: CardBodyProps): React.JSX.Element;
+type CardTitleProps = React.ComponentProps<"h3"> & {
+    as?: "h2" | "h3" | "h4";
+};
+declare function CardTitle({ as: Tag, className, ...props }: CardTitleProps): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+type CardStatProps = React.ComponentProps<"div"> & {
+    label: React.ReactNode;
+};
+/** A figure put forward: the label in capitals, the value in tabular digits. */
+declare function CardStat({ label, className, children, ...props }: CardStatProps): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** `Card.Root/Media/Image/Overlay/Body/Title/Description/Stat/Footer`. */
+declare const Card: {
+    Root: typeof CardRoot;
+    Media: typeof CardMedia;
+    Image: typeof CardImage;
+    Overlay: typeof CardOverlay;
+    Body: typeof CardBody;
+    Title: typeof CardTitle;
+    Description: typeof CardDescription;
+    Stat: typeof CardStat;
+    Footer: typeof CardFooter;
+};
+
+export { Card, CardBody, type CardBodyProps, CardDescription, CardFooter, CardImage, type CardImageProps, CardMedia, type CardMediaProps, CardOverlay, type CardOverlayProps, CardRoot, type CardRootProps, CardStat, type CardStatProps, CardTitle, type CardTitleProps, card };

package/dist/card.js

@@ -0,0 +1,108 @@
+import {
+  cn
+} from "./chunk-CPMZS4XA.js";
+
+// src/card/card.tsx
+import { Slot } from "radix-ui";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var card = tv({
+  slots: {
+    root: "group relative flex flex-col overflow-hidden border border-border-default bg-surface-1 text-fg transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+    media: "relative overflow-hidden bg-media",
+    image: "h-full w-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-105",
+    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",
+    overlay: "absolute z-10 flex items-center gap-1.5",
+    body: "relative flex flex-1 flex-col gap-3",
+    title: "line-clamp-1 text-sm font-semibold text-fg transition-colors group-hover:text-accent",
+    description: "line-clamp-2 text-xs text-fg-secondary",
+    stat: "min-w-0",
+    statLabel: "text-[10px] font-semibold uppercase tracking-wider text-fg-secondary",
+    statValue: "font-display text-xl font-black tabular-nums text-fg",
+    footer: "relative mt-auto flex items-center gap-2 border-t border-border-subtle pt-3 text-xs text-fg-secondary"
+  },
+  variants: {
+    radius: { md: { root: "rounded-md" }, lg: { root: "rounded-lg" }, xl: { root: "rounded-xl" } },
+    tone: { default: {}, elevated: { root: "bg-surface-2 shadow-md" }, glass: { root: "bg-surface-1/70 backdrop-blur-md" } },
+    interactive: { true: { root: "kz-spotlight kz-lift hover:border-accent/50" } },
+    padding: { none: { body: "p-0" }, sm: { body: "p-3" }, md: { body: "p-4" }, lg: { body: "p-6" } }
+  },
+  defaultVariants: { radius: "xl", tone: "default", padding: "md" }
+});
+var slots = card();
+function CardRoot({ asChild, reveal, radius, tone, interactive, className, style, ...props }) {
+  const Comp = asChild ? Slot.Root : "div";
+  const revealStyle = reveal === void 0 ? style : { ...style, "--kz-delay": `${Math.min(Math.max(reveal, 0), 8) * 50}ms` };
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-reveal": reveal === void 0 ? void 0 : "",
+      "data-interactive": interactive ? "" : void 0,
+      style: revealStyle,
+      className: card({ radius, tone, interactive }).root({ className }),
+      ...props
+    }
+  );
+}
+var ASPECT = { video: "aspect-video", square: "aspect-square", portrait: "aspect-[3/4]", auto: "" };
+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 }) {
+  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 });
+}
+var CORNER = {
+  "top-left": "left-2.5 top-2.5",
+  "top-right": "right-2.5 top-2.5",
+  "bottom-left": "bottom-2.5 left-2.5",
+  "bottom-right": "bottom-2.5 right-2.5"
+};
+function CardOverlay({ corner = "top-left", className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-corner": corner, className: slots.overlay({ className: cn(CORNER[corner], className) }), ...props });
+}
+function CardBody({ padding, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: card({ padding }).body({ className }), ...props });
+}
+function CardTitle({ as: Tag = "h3", className, ...props }) {
+  return /* @__PURE__ */ jsx(Tag, { className: slots.title({ className }), ...props });
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx("p", { className: slots.description({ className }), ...props });
+}
+function CardStat({ label, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: slots.stat({ className }), ...props, children: [
+    /* @__PURE__ */ jsx("p", { className: slots.statLabel(), children: label }),
+    /* @__PURE__ */ jsx("p", { className: slots.statValue(), children })
+  ] });
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: slots.footer({ className }), ...props });
+}
+var Card = {
+  Root: CardRoot,
+  Media: CardMedia,
+  Image: CardImage,
+  Overlay: CardOverlay,
+  Body: CardBody,
+  Title: CardTitle,
+  Description: CardDescription,
+  Stat: CardStat,
+  Footer: CardFooter
+};
+export {
+  Card,
+  CardBody,
+  CardDescription,
+  CardFooter,
+  CardImage,
+  CardMedia,
+  CardOverlay,
+  CardRoot,
+  CardStat,
+  CardTitle,
+  card
+};
+//# sourceMappingURL=card.js.map

package/dist/card.js.map

@@ -0,0 +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-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    /** 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\"> & { aspect?: keyof typeof ASPECT };\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  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\"> & { corner?: keyof typeof CORNER };\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\"> & Pick<CardVariants, \"padding\">;\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\"> & { as?: \"h2\" | \"h3\" | \"h4\" };\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\"> & { label: React.ReactNode };\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-CPMZS4XA.js

@@ -0,0 +1,11 @@
+// src/cn.ts
+import { clsx } from "clsx";
+import { cn as merge } from "tailwind-variants";
+function cn(...inputs) {
+  return merge(clsx(inputs)) ?? "";
+}
+
+export {
+  cn
+};
+//# sourceMappingURL=chunk-CPMZS4XA.js.map

package/dist/chunk-CPMZS4XA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/cn.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { cn as merge } from \"tailwind-variants\";\n\nexport type { ClassValue };\n\n/**\n * Merges Tailwind classes: the last one wins — a product's `className` overrides the primitive's. The merge engine is\n * tailwind-merge as tailwind-variants ships it (the one `tv` uses), so the platform carries a single copy of it.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return merge(clsx(inputs)) ?? \"\";\n}\n"],"mappings":";AAAA,SAA0B,YAAY;AACtC,SAAS,MAAM,aAAa;AAQrB,SAAS,MAAM,QAA8B;AAClD,SAAO,MAAM,KAAK,MAAM,CAAC,KAAK;AAChC;","names":[]}

package/dist/chunk-J3NC6ER4.js

@@ -0,0 +1,9 @@
+"use client";
+
+// src/floating.ts
+var floating = "kz-pop z-50 rounded-lg border border-border-default bg-surface-2 text-fg shadow-lg outline-hidden";
+
+export {
+  floating
+};
+//# sourceMappingURL=chunk-J3NC6ER4.js.map

package/dist/chunk-J3NC6ER4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/floating.ts"],"sourcesContent":["// The one surface of everything that floats next to its trigger (popover, menu, tooltip): a raised surface, a border,\n// the large shadow and the `kz-pop` entrance from the side Radix measured (`--radix-*-transform-origin`).\nexport const floating =\n  \"kz-pop z-50 rounded-lg border border-border-default bg-surface-2 text-fg shadow-lg outline-hidden\";\n"],"mappings":";;;AAEO,IAAM,WACX;","names":[]}

package/dist/chunk-QRG5RYEI.js

@@ -0,0 +1,49 @@
+"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",
+      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-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.
+      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-QRG5RYEI.js.map

package/dist/chunk-QRG5RYEI.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      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-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    /** 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  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;AAoClC;AAlCG,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;AAYM,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;AASO,SAAS,WAAW,EAAE,OAAO,OAAO,QAAQ,GAAG,MAAM,GAAoB;AAC9E,SAAO,oBAAC,UAAO,cAAY,OAAO,OAAO,OAAO,MAAa,GAAG,OAAO;AACzE;","names":[]}

package/dist/chunk-RLOXWF2G.js

@@ -0,0 +1,13 @@
+"use client";
+
+// src/cn.ts
+import { clsx } from "clsx";
+import { cn as merge } from "tailwind-variants";
+function cn(...inputs) {
+  return merge(clsx(inputs)) ?? "";
+}
+
+export {
+  cn
+};
+//# sourceMappingURL=chunk-RLOXWF2G.js.map

package/dist/chunk-RLOXWF2G.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/cn.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { cn as merge } from \"tailwind-variants\";\n\nexport type { ClassValue };\n\n/**\n * Merges Tailwind classes: the last one wins — a product's `className` overrides the primitive's. The merge engine is\n * tailwind-merge as tailwind-variants ships it (the one `tv` uses), so the platform carries a single copy of it.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return merge(clsx(inputs)) ?? \"\";\n}\n"],"mappings":";;;AAAA,SAA0B,YAAY;AACtC,SAAS,MAAM,aAAa;AAQrB,SAAS,MAAM,QAA8B;AAClD,SAAO,MAAM,KAAK,MAAM,CAAC,KAAK;AAChC;","names":[]}

package/dist/cn.d.ts

@@ -0,0 +1,10 @@
+import { ClassValue } from 'clsx';
+export { ClassValue } from 'clsx';
+
+/**
+ * Merges Tailwind classes: the last one wins — a product's `className` overrides the primitive's. The merge engine is
+ * tailwind-merge as tailwind-variants ships it (the one `tv` uses), so the platform carries a single copy of it.
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/cn.js

@@ -0,0 +1,7 @@
+import {
+  cn
+} from "./chunk-CPMZS4XA.js";
+export {
+  cn
+};
+//# sourceMappingURL=cn.js.map

package/dist/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/countdown.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+/** Milliseconds left until `target` (never negative), ticking every second. `skewMs` = server clock − this clock. */
+declare function useCountdown(target: Date | string | number, skewMs?: number): number;
+/** Splits a duration into days, hours, minutes and seconds. */
+declare function splitDuration(ms: number): {
+    d: number;
+    h: number;
+    m: number;
+    s: number;
+};
+/** The short unit labels, passed translated (e.g. `{ d: "d", h: "h", m: "m", s: "s" }`). */
+type CountdownUnits = {
+    d: string;
+    h: string;
+    m: string;
+    s: string;
+};
+/** The three segments shown: days, hours, minutes when there are days; else hours, minutes, seconds. */
+declare function countdownParts(ms: number, units: CountdownUnits): [number, string][];
+
+type CountdownProps = {
+    target: Date | string | number;
+    /** Server clock − this clock, in milliseconds. */
+    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. */
+    urgentBelowMs?: number;
+    size?: "sm" | "md" | "lg";
+    /** Accessible name, e.g. "Ends in". */
+    label: string;
+    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).
+ * 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.
+ */
+declare function Countdown({ target, skewMs, units, urgentBelowMs, size, label, className }: CountdownProps): React.JSX.Element;
+
+export { Countdown, type CountdownProps, type CountdownUnits, countdownParts, splitDuration, useCountdown };