@krizaka/ui 2.0.0-beta.4 → 2.0.0-beta.5

package/dist/section-backdrop.d.ts

@@ -0,0 +1,75 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const sectionBackdropVariants: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            drift?: tailwind_variants.ClassValue;
+            dome?: tailwind_variants.ClassValue;
+            grid?: tailwind_variants.ClassValue;
+            media?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            drift?: tailwind_variants.ClassValue;
+            dome?: tailwind_variants.ClassValue;
+            grid?: tailwind_variants.ClassValue;
+            media?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    drift: string;
+    dome: string;
+    grid: string;
+    media: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            drift?: tailwind_variants.ClassValue;
+            dome?: tailwind_variants.ClassValue;
+            grid?: tailwind_variants.ClassValue;
+            media?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    drift: string;
+    dome: string;
+    grid: string;
+    media: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    drift: string;
+    dome: string;
+    grid: string;
+    media: string;
+}>>;
+interface SectionBackdropProps extends React.HTMLAttributes<HTMLElement> {
+    /** The element: `section` (default), `header`, `footer` or `div`. */
+    as?: "section" | "header" | "footer" | "div";
+    /** Where the brand tint sits: `down` (default) starts tinted and ends on the page surface; `up` ends tinted (a closing call to action). */
+    direction?: "down" | "up";
+    /** The light dome above the content (the halo of a hero). Default true. */
+    dome?: boolean;
+    /** A floor of perspective lines under the content. Default false. */
+    grid?: boolean;
+    /** A foreground illustration or image, blurred for depth of field, behind the content (decorative: hidden from assistive technology). */
+    media?: React.ReactNode;
+    /** The very slow drift of the light (40 s); always still under prefers-reduced-motion. Default true. */
+    animated?: boolean;
+}
+/**
+ * A section of a page in the Krizaka visual language: the brand's section gradient (`--kz-brand-gradient-*`, so it
+ * follows the brand theme and dark/light), a light dome, an optional perspective grid and a blurred foreground. Every
+ * section ends on the page surface, so consecutive sections glide from one tint to the next. Text on it reads at AA
+ * (tested in @krizaka/tokens).
+ */
+declare function SectionBackdrop({ as: Tag, direction, dome, grid, media, animated, className, children, ...props }: SectionBackdropProps): React.JSX.Element;
+
+export { SectionBackdrop, type SectionBackdropProps, sectionBackdropVariants };

package/dist/section-backdrop.js

@@ -0,0 +1,27 @@
+// src/section-backdrop/section-backdrop.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var sectionBackdropVariants = tv({
+  slots: {
+    root: "kz-backdrop",
+    drift: "kz-backdrop-drift",
+    dome: "kz-backdrop-dome",
+    grid: "kz-backdrop-grid",
+    media: "kz-backdrop-media"
+  }
+});
+function SectionBackdrop({ as: Tag = "section", direction = "down", dome = true, grid = false, media, animated = true, className, children, ...props }) {
+  const s = sectionBackdropVariants();
+  return /* @__PURE__ */ jsxs(Tag, { className: s.root({ className }), "data-direction": direction, ...props, children: [
+    animated ? /* @__PURE__ */ jsx("div", { "data-backdrop-layer": true, "aria-hidden": true, className: s.drift() }) : null,
+    dome ? /* @__PURE__ */ jsx("div", { "data-backdrop-layer": true, "aria-hidden": true, className: s.dome() }) : null,
+    grid ? /* @__PURE__ */ jsx("div", { "data-backdrop-layer": true, "aria-hidden": true, className: s.grid() }) : null,
+    media ? /* @__PURE__ */ jsx("div", { "data-backdrop-layer": true, "aria-hidden": true, className: s.media(), children: media }) : null,
+    children
+  ] });
+}
+export {
+  SectionBackdrop,
+  sectionBackdropVariants
+};
+//# sourceMappingURL=section-backdrop.js.map

package/dist/section-backdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/section-backdrop/section-backdrop.tsx"],"sourcesContent":["// Server-safe. The backdrop of a page section in the brand's visual language (packages/tokens/BRAND.md).\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const sectionBackdropVariants = tv({\n  slots: {\n    root: \"kz-backdrop\",\n    drift: \"kz-backdrop-drift\",\n    dome: \"kz-backdrop-dome\",\n    grid: \"kz-backdrop-grid\",\n    media: \"kz-backdrop-media\",\n  },\n});\n\nexport interface SectionBackdropProps extends React.HTMLAttributes<HTMLElement> {\n  /** The element: `section` (default), `header`, `footer` or `div`. */\n  as?: \"section\" | \"header\" | \"footer\" | \"div\";\n  /** Where the brand tint sits: `down` (default) starts tinted and ends on the page surface; `up` ends tinted (a closing call to action). */\n  direction?: \"down\" | \"up\";\n  /** The light dome above the content (the halo of a hero). Default true. */\n  dome?: boolean;\n  /** A floor of perspective lines under the content. Default false. */\n  grid?: boolean;\n  /** A foreground illustration or image, blurred for depth of field, behind the content (decorative: hidden from assistive technology). */\n  media?: React.ReactNode;\n  /** The very slow drift of the light (40 s); always still under prefers-reduced-motion. Default true. */\n  animated?: boolean;\n}\n\n/**\n * A section of a page in the Krizaka visual language: the brand's section gradient (`--kz-brand-gradient-*`, so it\n * follows the brand theme and dark/light), a light dome, an optional perspective grid and a blurred foreground. Every\n * section ends on the page surface, so consecutive sections glide from one tint to the next. Text on it reads at AA\n * (tested in @krizaka/tokens).\n */\nexport function SectionBackdrop({ as: Tag = \"section\", direction = \"down\", dome = true, grid = false, media, animated = true, className, children, ...props }: SectionBackdropProps) {\n  const s = sectionBackdropVariants();\n  return (\n    <Tag className={s.root({ className })} data-direction={direction} {...props}>\n      {animated ? <div data-backdrop-layer aria-hidden className={s.drift()} /> : null}\n      {dome ? <div data-backdrop-layer aria-hidden className={s.dome()} /> : null}\n      {grid ? <div data-backdrop-layer aria-hidden className={s.grid()} /> : null}\n      {media ? (\n        <div data-backdrop-layer aria-hidden className={s.media()}>\n          {media}\n        </div>\n      ) : null}\n      {children}\n    </Tag>\n  );\n}\n"],"mappings":";AAEA,SAAS,UAAU;AAoCf,SACc,KADd;AAlCG,IAAM,0BAA0B,GAAG;AAAA,EACxC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF,CAAC;AAuBM,SAAS,gBAAgB,EAAE,IAAI,MAAM,WAAW,YAAY,QAAQ,OAAO,MAAM,OAAO,OAAO,OAAO,WAAW,MAAM,WAAW,UAAU,GAAG,MAAM,GAAyB;AACnL,QAAM,IAAI,wBAAwB;AAClC,SACE,qBAAC,OAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAG,kBAAgB,WAAY,GAAG,OACnE;AAAA,eAAW,oBAAC,SAAI,uBAAmB,MAAC,eAAW,MAAC,WAAW,EAAE,MAAM,GAAG,IAAK;AAAA,IAC3E,OAAO,oBAAC,SAAI,uBAAmB,MAAC,eAAW,MAAC,WAAW,EAAE,KAAK,GAAG,IAAK;AAAA,IACtE,OAAO,oBAAC,SAAI,uBAAmB,MAAC,eAAW,MAAC,WAAW,EAAE,KAAK,GAAG,IAAK;AAAA,IACtE,QACC,oBAAC,SAAI,uBAAmB,MAAC,eAAW,MAAC,WAAW,EAAE,MAAM,GACrD,iBACH,IACE;AAAA,IACH;AAAA,KACH;AAEJ;","names":[]}

package/dist/theme.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { a as ButtonVariants } from './button-8La7l0V4.js';
+import { a as ButtonVariants } from './button-D5aSsmxX.js';
 import 'tailwind-variants';
 
 type Mode = "dark" | "light" | "system";

package/dist/theme.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   buttonVariants
-} from "./chunk-ZUD4U22H.js";
+} from "./chunk-6DJ6SQY3.js";
 
 // src/theme/theme.tsx
 import * as React from "react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/ui",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.5",
   "description": "The Krizaka front-end platform's components: the primitives (button, card, dialog, toast, menu, field, tabs, chip, switch, slider, command palette, theme, countdown…) on the semantic --kz-* tokens, the animated marks (Krizaka, Orazaka, Orochia) and the motion signature — web and /native.",
   "keywords": [
     "krizaka",
@@ -162,6 +162,10 @@
       "types": "./dist/progress.d.ts",
       "import": "./dist/progress.js"
     },
+    "./section-backdrop": {
+      "types": "./dist/section-backdrop.d.ts",
+      "import": "./dist/section-backdrop.js"
+    },
     "./motion.css": "./dist/motion.css",
     "./tailwind.css": "./tailwind.css",
     "./native": {
@@ -190,7 +194,7 @@
     "*.css"
   ],
   "peerDependencies": {
-    "@krizaka/tailwind": ">=2.0.0-beta.4",
+    "@krizaka/tailwind": ">=2.0.0-beta.5",
     "react": ">=18",
     "react-dom": ">=18",
     "react-native": ">=0.76",
@@ -234,7 +238,7 @@
     "typescript": "^5.9.0",
     "vitest": "^4.1.11",
     "@krizaka/config": "0.1.0",
-    "@krizaka/tokens": "2.0.0-beta.4"
+    "@krizaka/tokens": "2.0.0-beta.5"
   },
   "engines": {
     "node": ">=20"
@@ -269,7 +273,7 @@
     {
       "name": "./native (bundled into the app by Metro, never downloaded: a regression guard, not a budget)",
       "path": "dist/native.js",
-      "limit": "10.5 kB",
+      "limit": "11.5 kB",
       "gzip": true
     },
     {
@@ -488,6 +492,16 @@
         "clsx"
       ]
     },
+    {
+      "name": "./section-backdrop",
+      "path": "dist/section-backdrop.js",
+      "limit": "1 kB",
+      "gzip": true,
+      "ignore": [
+        "tailwind-variants",
+        "clsx"
+      ]
+    },
     {
       "name": "./tabs",
       "path": "dist/tabs.js",

package/registry/button.json

@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "button/button.tsx",
-      "content": "// 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    /**\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"
+      "content": "// 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"
     },
     {
       "path": "button/index.ts",

package/registry/card.json

@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "card/card.tsx",
-      "content": "// 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    /**\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"
+      "content": "// 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"
     },
     {
       "path": "card/index.ts",

package/registry/demos/section-backdrop.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function SectionBackdropDemo(): react.JSX.Element;
+
+export { SectionBackdropDemo as default };

package/registry/demos/section-backdrop.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/demos/section-backdrop.tsx
+import { SectionBackdrop } from "@krizaka/ui/section-backdrop";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SectionBackdropDemo() {
+  return /* @__PURE__ */ jsxs(SectionBackdrop, { grid: true, className: "rounded-xl px-8 py-16", children: [
+    /* @__PURE__ */ jsx("h2", { className: "font-display text-3xl font-semibold text-fg", children: "Sovereign by design" }),
+    /* @__PURE__ */ jsx("p", { className: "mt-2 max-w-md text-fg-secondary", children: "Your models, your data, your servers." })
+  ] });
+}
+export {
+  SectionBackdropDemo as default
+};

package/registry/demos/section-backdrop.tsx

@@ -0,0 +1,10 @@
+import { SectionBackdrop } from "@krizaka/ui/section-backdrop";
+
+export default function SectionBackdropDemo() {
+  return (
+    <SectionBackdrop grid className="rounded-xl px-8 py-16">
+      <h2 className="font-display text-3xl font-semibold text-fg">Sovereign by design</h2>
+      <p className="mt-2 max-w-md text-fg-secondary">Your models, your data, your servers.</p>
+    </SectionBackdrop>
+  );
+}

package/registry/dropdown-menu.json

@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "dropdown-menu/dropdown-menu.tsx",
-      "content": "// Client (a portal). Radix does the roving focus, the arrows, Home/End, typeahead, Escape and the focus return.\nimport { DropdownMenu as MenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\nexport const menu = tv({\n  slots: {\n    content: cn(floating, \"min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-1 origin-(--radix-dropdown-menu-content-transform-origin)\"),\n    item:\n      \"relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-fg outline-hidden transition-colors \" +\n      \"data-highlighted:bg-surface-3 data-disabled:pointer-events-none data-disabled:opacity-40 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 \" +\n      \"[&>svg]:text-fg-secondary\",\n    indicator: \"ml-auto flex h-4 w-4 items-center justify-center text-accent\",\n    label: \"px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    separator: \"-mx-1 my-1 h-px bg-border-subtle\",\n  },\n  variants: {\n    // The danger token is too light for small text on a light surface: the label stays a text role, the icon and the\n    // highlight carry the danger.\n    tone: { default: {}, danger: { item: \"data-highlighted:bg-danger/15 [&>svg]:text-danger\" } },\n  },\n  defaultVariants: { tone: \"default\" },\n});\nconst s = menu();\n\nexport type DropdownMenuContentProps = React.ComponentProps<typeof MenuPrimitive.Content> & {\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n};\n\nexport function DropdownMenuContent({ sideOffset = 6, align = \"end\", collisionPadding = 8, container, className, ...props }: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal container={container}>\n      <MenuPrimitive.Content sideOffset={sideOffset} align={align} collisionPadding={collisionPadding} className={s.content({ className })} {...props} />\n    </MenuPrimitive.Portal>\n  );\n}\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & {\n  /** `danger` for a destructive action: the icon and the highlight carry the danger, the label stays legible. */\n  tone?: \"default\" | \"danger\";\n};\n\n/** An action. `tone=\"danger\"` for a destructive one; `onSelect` runs it (the menu closes). */\nexport function DropdownMenuItem({ tone, className, ...props }: DropdownMenuItemProps) {\n  return <MenuPrimitive.Item data-tone={tone ?? \"default\"} className={menu({ tone }).item({ className })} {...props} />;\n}\n\n/** A toggled option: `checked` + `onCheckedChange`. */\nexport function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.CheckboxItem>) {\n  return (\n    <MenuPrimitive.CheckboxItem className={s.item({ className })} {...props}>\n      {children}\n      <MenuPrimitive.ItemIndicator className={s.indicator()}>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </MenuPrimitive.ItemIndicator>\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Label>) {\n  return <MenuPrimitive.Label className={s.label({ className })} {...props} />;\n}\n\nexport function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Separator>) {\n  return <MenuPrimitive.Separator className={s.separator({ className })} {...props} />;\n}\n\n/** `DropdownMenu.Root/Trigger/Content/Item/CheckboxItem/Label/Separator/Group`. `open`/`defaultOpen` + `onOpenChange`. */\nexport const DropdownMenu = {\n  Root: MenuPrimitive.Root,\n  Trigger: MenuPrimitive.Trigger,\n  Content: DropdownMenuContent,\n  Item: DropdownMenuItem,\n  CheckboxItem: DropdownMenuCheckboxItem,\n  Label: DropdownMenuLabel,\n  Separator: DropdownMenuSeparator,\n  Group: MenuPrimitive.Group,\n};\n"
+      "content": "// Client (a portal). Radix does the roving focus, the arrows, Home/End, typeahead, Escape and the focus return.\nimport { DropdownMenu as MenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\nexport const menu = tv({\n  slots: {\n    content: cn(floating, \"min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-1 origin-(--radix-dropdown-menu-content-transform-origin)\"),\n    item:\n      \"relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-fg outline-hidden transition-colors \" +\n      \"data-highlighted:bg-surface-3 data-disabled:pointer-events-none data-disabled:opacity-40 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 \" +\n      \"[&>svg]:text-fg-secondary\",\n    indicator: \"ml-auto flex h-4 w-4 items-center justify-center text-fg-accent\",\n    label: \"px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    separator: \"-mx-1 my-1 h-px bg-border-subtle\",\n  },\n  variants: {\n    // The danger token is too light for small text on a light surface: the label stays a text role, the icon and the\n    // highlight carry the danger.\n    tone: { default: {}, danger: { item: \"data-highlighted:bg-danger/15 [&>svg]:text-danger\" } },\n  },\n  defaultVariants: { tone: \"default\" },\n});\nconst s = menu();\n\nexport type DropdownMenuContentProps = React.ComponentProps<typeof MenuPrimitive.Content> & {\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n};\n\nexport function DropdownMenuContent({ sideOffset = 6, align = \"end\", collisionPadding = 8, container, className, ...props }: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal container={container}>\n      <MenuPrimitive.Content sideOffset={sideOffset} align={align} collisionPadding={collisionPadding} className={s.content({ className })} {...props} />\n    </MenuPrimitive.Portal>\n  );\n}\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & {\n  /** `danger` for a destructive action: the icon and the highlight carry the danger, the label stays legible. */\n  tone?: \"default\" | \"danger\";\n};\n\n/** An action. `tone=\"danger\"` for a destructive one; `onSelect` runs it (the menu closes). */\nexport function DropdownMenuItem({ tone, className, ...props }: DropdownMenuItemProps) {\n  return <MenuPrimitive.Item data-tone={tone ?? \"default\"} className={menu({ tone }).item({ className })} {...props} />;\n}\n\n/** A toggled option: `checked` + `onCheckedChange`. */\nexport function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.CheckboxItem>) {\n  return (\n    <MenuPrimitive.CheckboxItem className={s.item({ className })} {...props}>\n      {children}\n      <MenuPrimitive.ItemIndicator className={s.indicator()}>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </MenuPrimitive.ItemIndicator>\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Label>) {\n  return <MenuPrimitive.Label className={s.label({ className })} {...props} />;\n}\n\nexport function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Separator>) {\n  return <MenuPrimitive.Separator className={s.separator({ className })} {...props} />;\n}\n\n/** `DropdownMenu.Root/Trigger/Content/Item/CheckboxItem/Label/Separator/Group`. `open`/`defaultOpen` + `onOpenChange`. */\nexport const DropdownMenu = {\n  Root: MenuPrimitive.Root,\n  Trigger: MenuPrimitive.Trigger,\n  Content: DropdownMenuContent,\n  Item: DropdownMenuItem,\n  CheckboxItem: DropdownMenuCheckboxItem,\n  Label: DropdownMenuLabel,\n  Separator: DropdownMenuSeparator,\n  Group: MenuPrimitive.Group,\n};\n"
     },
     {
       "path": "dropdown-menu/index.ts",

package/registry/index.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/ui",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.5",
   "items": [
     {
       "name": "alert",
@@ -209,6 +209,15 @@
       ],
       "registryDependencies": []
     },
+    {
+      "name": "section-backdrop",
+      "type": "primitive",
+      "description": "`SectionBackdrop`, `sectionBackdropVariants`. Server-safe.",
+      "dependencies": [
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
     {
       "name": "separator",
       "type": "primitive",

package/registry/section-backdrop.json

@@ -0,0 +1,73 @@
+{
+  "name": "section-backdrop",
+  "type": "primitive",
+  "description": "`SectionBackdrop`, `sectionBackdropVariants`. Server-safe.",
+  "files": [
+    {
+      "path": "section-backdrop/index.ts",
+      "content": "/** @krizaka/ui/section-backdrop — `SectionBackdrop`, `sectionBackdropVariants`. Server-safe. */\nexport { SectionBackdrop, type SectionBackdropProps, sectionBackdropVariants } from \"./section-backdrop\";\n"
+    },
+    {
+      "path": "section-backdrop/section-backdrop.tsx",
+      "content": "// Server-safe. The backdrop of a page section in the brand's visual language (packages/tokens/BRAND.md).\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const sectionBackdropVariants = tv({\n  slots: {\n    root: \"kz-backdrop\",\n    drift: \"kz-backdrop-drift\",\n    dome: \"kz-backdrop-dome\",\n    grid: \"kz-backdrop-grid\",\n    media: \"kz-backdrop-media\",\n  },\n});\n\nexport interface SectionBackdropProps extends React.HTMLAttributes<HTMLElement> {\n  /** The element: `section` (default), `header`, `footer` or `div`. */\n  as?: \"section\" | \"header\" | \"footer\" | \"div\";\n  /** Where the brand tint sits: `down` (default) starts tinted and ends on the page surface; `up` ends tinted (a closing call to action). */\n  direction?: \"down\" | \"up\";\n  /** The light dome above the content (the halo of a hero). Default true. */\n  dome?: boolean;\n  /** A floor of perspective lines under the content. Default false. */\n  grid?: boolean;\n  /** A foreground illustration or image, blurred for depth of field, behind the content (decorative: hidden from assistive technology). */\n  media?: React.ReactNode;\n  /** The very slow drift of the light (40 s); always still under prefers-reduced-motion. Default true. */\n  animated?: boolean;\n}\n\n/**\n * A section of a page in the Krizaka visual language: the brand's section gradient (`--kz-brand-gradient-*`, so it\n * follows the brand theme and dark/light), a light dome, an optional perspective grid and a blurred foreground. Every\n * section ends on the page surface, so consecutive sections glide from one tint to the next. Text on it reads at AA\n * (tested in @krizaka/tokens).\n */\nexport function SectionBackdrop({ as: Tag = \"section\", direction = \"down\", dome = true, grid = false, media, animated = true, className, children, ...props }: SectionBackdropProps) {\n  const s = sectionBackdropVariants();\n  return (\n    <Tag className={s.root({ className })} data-direction={direction} {...props}>\n      {animated ? <div data-backdrop-layer aria-hidden className={s.drift()} /> : null}\n      {dome ? <div data-backdrop-layer aria-hidden className={s.dome()} /> : null}\n      {grid ? <div data-backdrop-layer aria-hidden className={s.grid()} /> : null}\n      {media ? (\n        <div data-backdrop-layer aria-hidden className={s.media()}>\n          {media}\n        </div>\n      ) : null}\n      {children}\n    </Tag>\n  );\n}\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [],
+  "demo": {
+    "path": "demos/section-backdrop.tsx",
+    "content": "import { SectionBackdrop } from \"@krizaka/ui/section-backdrop\";\n\nexport default function SectionBackdropDemo() {\n  return (\n    <SectionBackdrop grid className=\"rounded-xl px-8 py-16\">\n      <h2 className=\"font-display text-3xl font-semibold text-fg\">Sovereign by design</h2>\n      <p className=\"mt-2 max-w-md text-fg-secondary\">Your models, your data, your servers.</p>\n    </SectionBackdrop>\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "SectionBackdrop",
+      "description": "A section of a page in the Krizaka visual language: the brand's section gradient (`--kz-brand-gradient-*`, so it\nfollows the brand theme and dark/light), a light dome, an optional perspective grid and a blurred foreground. Every\nsection ends on the page surface, so consecutive sections glide from one tint to the next. Text on it reads at AA\n(tested in",
+      "props": [
+        {
+          "name": "animated",
+          "type": "boolean",
+          "default": "true",
+          "description": "The very slow drift of the light (40 s); always still under prefers-reduced-motion. Default true.",
+          "required": false
+        },
+        {
+          "name": "as",
+          "type": "\"div\" | \"footer\" | \"header\" | \"section\"",
+          "default": "section",
+          "description": "The element: `section` (default), `header`, `footer` or `div`.",
+          "required": false
+        },
+        {
+          "name": "direction",
+          "type": "\"down\" | \"up\"",
+          "default": "down",
+          "description": "Where the brand tint sits: `down` (default) starts tinted and ends on the page surface; `up` ends tinted (a closing call to action).",
+          "required": false
+        },
+        {
+          "name": "dome",
+          "type": "boolean",
+          "default": "true",
+          "description": "The light dome above the content (the halo of a hero). Default true.",
+          "required": false
+        },
+        {
+          "name": "grid",
+          "type": "boolean",
+          "default": "false",
+          "description": "A floor of perspective lines under the content. Default false.",
+          "required": false
+        },
+        {
+          "name": "media",
+          "type": "ReactNode",
+          "default": null,
+          "description": "A foreground illustration or image, blurred for depth of field, behind the content (decorative: hidden from assistive technology).",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

package/dist/chunk-ZUD4U22H.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/button/button.tsx"],"sourcesContent":["// Server-safe: no hook, no context. `buttonVariants` styles a <Link> or a Server Component without the component.\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const buttonVariants = tv({\n  base:\n    \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n    \"disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98]\",\n  variants: {\n    variant: {\n      primary: \"bg-accent text-on-accent shadow-sm hover:bg-accent-hover\",\n      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    /**\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":[]}