@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","names":[],"sources":["../../../src/components/pagination/pagination.tsx"],"sourcesContent":["import { Slot } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { buttonVariants } from \"@/components/button\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Navigation between pages of a list.\n *\n * Rendered as links by default, not buttons: a page of results is a place, so\n * it should be shareable, openable in a new tab and part of history. Use\n * `asChild` to hand off to your router's link. For pagination that only changes\n * client state, render buttons instead — `PaginationLink` accepts either.\n */\nexport function Pagination({ className, ...props }: ComponentPropsWithRef<\"nav\">) {\n  return (\n    <nav\n      // A named landmark, so it can be jumped to and is distinguishable from\n      // the page's main navigation.\n      aria-label=\"Pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function PaginationContent({ className, ...props }: ComponentPropsWithRef<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function PaginationItem({ className, ...props }: ComponentPropsWithRef<\"li\">) {\n  return <li data-slot=\"pagination-item\" className={cn(className)} {...props} />;\n}\n\nexport interface PaginationLinkProps extends ComponentPropsWithRef<\"a\"> {\n  /** Marks the page the user is on. Sets aria-current=\"page\". */\n  isActive?: boolean;\n  size?: \"sm\" | \"md\" | \"icon\" | \"icon-sm\";\n  asChild?: boolean;\n}\n\nexport function PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  asChild,\n  ...props\n}: PaginationLinkProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n\n  return (\n    <Comp\n      data-slot=\"pagination-link\"\n      // aria-current is what tells a screen reader user where they are; styling\n      // the active page differently does nothing on its own.\n      aria-current={isActive ? \"page\" : undefined}\n      data-active={isActive || undefined}\n      className={cn(\n        buttonVariants({ variant: isActive ? \"outline\" : \"ghost\", size }),\n        isActive && \"border-border-strong font-medium\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function PaginationPrevious({ className, ...props }: PaginationLinkProps) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"sm\"\n      className={cn(\"gap-1 px-2.5\", className)}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-4\">\n        <path\n          d=\"m15 18-6-6 6-6\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n      <span className=\"hidden sm:inline\">Previous</span>\n    </PaginationLink>\n  );\n}\n\nexport function PaginationNext({ className, ...props }: PaginationLinkProps) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"sm\"\n      className={cn(\"gap-1 px-2.5\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:inline\">Next</span>\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-4\">\n        <path\n          d=\"m9 18 6-6-6-6\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    </PaginationLink>\n  );\n}\n\n/**\n * Stands in for a run of skipped pages.\n *\n * Hidden from assistive technology and given screen-reader text, because \"…\"\n * is announced as nothing useful and the gap is already implied by the page\n * numbers either side.\n */\nexport function PaginationEllipsis({ className, ...props }: ComponentPropsWithRef<\"span\">) {\n  return (\n    <span\n      data-slot=\"pagination-ellipsis\"\n      aria-hidden=\"true\"\n      className={cn(\"grid size-9 place-items-center text-muted-foreground\", className)}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" className=\"size-4\">\n        <circle cx=\"5\" cy=\"12\" r=\"1.5\" fill=\"currentColor\" />\n        <circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\" />\n        <circle cx=\"19\" cy=\"12\" r=\"1.5\" fill=\"currentColor\" />\n      </svg>\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,SAAgB,WAAW,EAAE,WAAW,GAAG,SAAuC;CAChF,OACE,oBAAC,OAAD;EAGE,cAAW;EACX,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,kBAAkB,EAAE,WAAW,GAAG,SAAsC;CACtF,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAAsC;CACnF,OAAO,oBAAC,MAAD;EAAI,aAAU;EAAkB,WAAW,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC/E;AASA,SAAgB,eAAe,EAC7B,WACA,UACA,OAAO,QACP,SACA,GAAG,SACmB;CACtB,MAAM,OAAO,UAAU,KAAK,OAAO;CAEnC,OACE,oBAAC,MAAD;EACE,aAAU;EAGV,gBAAc,WAAW,SAAS,KAAA;EAClC,eAAa,YAAY,KAAA;EACzB,WAAW,GACT,eAAe;GAAE,SAAS,WAAW,YAAY;GAAS;EAAK,CAAC,GAChE,YAAY,oCACZ,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,mBAAmB,EAAE,WAAW,GAAG,SAA8B;CAC/E,OACE,qBAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAW,GAAG,gBAAgB,SAAS;EACvC,GAAI;EAJN,UAAA,CAME,oBAAC,OAAD;GAAK,SAAQ;GAAY,MAAK;GAAO,eAAY;GAAO,WAAU;GAChE,UAAA,oBAAC,QAAD;IACE,GAAE;IACF,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;GAChB,CAAA;EACE,CAAA,GACL,oBAAC,QAAD;GAAM,WAAU;GAAmB,UAAA;EAAc,CAAA,CACnC;;AAEpB;AAEA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAA8B;CAC3E,OACE,qBAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAW,GAAG,gBAAgB,SAAS;EACvC,GAAI;EAJN,UAAA,CAME,oBAAC,QAAD;GAAM,WAAU;GAAmB,UAAA;EAAU,CAAA,GAC7C,oBAAC,OAAD;GAAK,SAAQ;GAAY,MAAK;GAAO,eAAY;GAAO,WAAU;GAChE,UAAA,oBAAC,QAAD;IACE,GAAE;IACF,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;GAChB,CAAA;EACE,CAAA,CACS;;AAEpB;;;;;;;;AASA,SAAgB,mBAAmB,EAAE,WAAW,GAAG,SAAwC;CACzF,OACE,qBAAC,QAAD;EACE,aAAU;EACV,eAAY;EACZ,WAAW,GAAG,wDAAwD,SAAS;EAC/E,GAAI;EAJN,UAAA,CAME,qBAAC,OAAD;GAAK,SAAQ;GAAY,MAAK;GAAO,WAAU;GAA/C,UAAA;IACE,oBAAC,UAAD;KAAQ,IAAG;KAAI,IAAG;KAAK,GAAE;KAAM,MAAK;IAAgB,CAAA;IACpD,oBAAC,UAAD;KAAQ,IAAG;KAAK,IAAG;KAAK,GAAE;KAAM,MAAK;IAAgB,CAAA;IACrD,oBAAC,UAAD;KAAQ,IAAG;KAAK,IAAG;KAAK,GAAE;KAAM,MAAK;IAAgB,CAAA;GAClD;EACL,CAAA,GAAA,oBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAgB,CAAA,CACtC;;AAEV"}
+{"version":3,"file":"pagination.js","names":[],"sources":["../../../src/components/pagination/pagination.tsx"],"sourcesContent":["// Motion from SmoothUI Pagination (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { Slot } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { buttonVariants } from \"@/components/button\";\nimport { mirrorForDirection } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport { PaginationIndicator } from \"./pagination-indicator\";\n\n/**\n * Navigation between pages of a list.\n *\n * Rendered as links by default, not buttons: a page of results is a place, so\n * it should be shareable, openable in a new tab and part of history. Use\n * `asChild` to hand off to your router's link. For pagination that only changes\n * client state, render buttons instead — `PaginationLink` accepts either.\n */\nexport function Pagination({ className, ...props }: ComponentPropsWithRef<\"nav\">) {\n  return (\n    <nav\n      // A named landmark, so it can be jumped to and is distinguishable from\n      // the page's main navigation.\n      aria-label=\"Pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface PaginationContentProps extends ComponentPropsWithRef<\"ul\"> {\n  /**\n   * `slide` moves one active-page pill between pages instead of restyling\n   * each link. Worth it when paging changes client state; a link that loads\n   * a new document never sees the slide. Default `none`.\n   */\n  indicator?: \"none\" | \"slide\";\n}\n\nexport function PaginationContent({\n  className,\n  indicator = \"none\",\n  children,\n  ...props\n}: PaginationContentProps) {\n  const slide = indicator === \"slide\";\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      data-indicator={slide ? \"slide\" : undefined}\n      className={cn(\n        \"flex flex-row items-center gap-1\",\n        slide && [\n          \"relative\",\n          // Once the pill has measured, the active link hands its border and\n          // background to it. Before that it keeps its own, so first paint and\n          // a server render look exactly as they always have.\n          \"has-[>[data-slot=pagination-indicator][data-ready]]:[&_[data-slot=pagination-link]]:relative\",\n          \"has-[>[data-slot=pagination-indicator][data-ready]]:[&_[data-slot=pagination-link][aria-current=page]]:border-transparent\",\n          \"has-[>[data-slot=pagination-indicator][data-ready]]:[&_[data-slot=pagination-link][aria-current=page]]:bg-transparent\",\n        ],\n        className,\n      )}\n      {...props}\n    >\n      {slide ? <PaginationIndicator /> : null}\n      {children}\n    </ul>\n  );\n}\n\nexport function PaginationItem({ className, ...props }: ComponentPropsWithRef<\"li\">) {\n  return <li data-slot=\"pagination-item\" className={cn(className)} {...props} />;\n}\n\nexport interface PaginationLinkProps extends ComponentPropsWithRef<\"a\"> {\n  /** Marks the page the user is on. Sets aria-current=\"page\". */\n  isActive?: boolean;\n  size?: \"sm\" | \"md\" | \"icon\" | \"icon-sm\";\n  asChild?: boolean;\n}\n\nexport function PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  asChild,\n  ...props\n}: PaginationLinkProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n\n  return (\n    <Comp\n      data-slot=\"pagination-link\"\n      // aria-current is what tells a screen reader user where they are; styling\n      // the active page differently does nothing on its own.\n      aria-current={isActive ? \"page\" : undefined}\n      data-active={isActive || undefined}\n      className={cn(\n        buttonVariants({ variant: isActive ? \"outline\" : \"ghost\", size }),\n        isActive && \"border-border-strong font-medium\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function PaginationPrevious({ className, ...props }: PaginationLinkProps) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"sm\"\n      className={cn(\"gap-1 px-2.5\", className)}\n      {...props}\n    >\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className={cn(\"size-4\", mirrorForDirection)}\n      >\n        <path\n          d=\"m15 18-6-6 6-6\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n      <span className=\"hidden sm:inline\">Previous</span>\n    </PaginationLink>\n  );\n}\n\nexport function PaginationNext({ className, ...props }: PaginationLinkProps) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"sm\"\n      className={cn(\"gap-1 px-2.5\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:inline\">Next</span>\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className={cn(\"size-4\", mirrorForDirection)}\n      >\n        <path\n          d=\"m9 18 6-6-6-6\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    </PaginationLink>\n  );\n}\n\n/**\n * Stands in for a run of skipped pages.\n *\n * Hidden from assistive technology and given screen-reader text, because \"…\"\n * is announced as nothing useful and the gap is already implied by the page\n * numbers either side.\n */\nexport function PaginationEllipsis({ className, ...props }: ComponentPropsWithRef<\"span\">) {\n  return (\n    <span\n      data-slot=\"pagination-ellipsis\"\n      aria-hidden=\"true\"\n      className={cn(\"grid size-9 place-items-center text-muted-foreground\", className)}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" className=\"size-4\">\n        <circle cx=\"5\" cy=\"12\" r=\"1.5\" fill=\"currentColor\" />\n        <circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\" />\n        <circle cx=\"19\" cy=\"12\" r=\"1.5\" fill=\"currentColor\" />\n      </svg>\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,SAAgB,WAAW,EAAE,WAAW,GAAG,SAAuC;CAChF,OACE,oBAAC,OAAD;EAGE,cAAW;EACX,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;AAWA,SAAgB,kBAAkB,EAChC,WACA,YAAY,QACZ,UACA,GAAG,SACsB;CACzB,MAAM,QAAQ,cAAc;CAC5B,OACE,qBAAC,MAAD;EACE,aAAU;EACV,kBAAgB,QAAQ,UAAU,KAAA;EAClC,WAAW,GACT,oCACA,SAAS;GACP;GAIA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;EAhBN,UAAA,CAkBG,QAAQ,oBAAC,qBAAD,CAAsB,CAAA,IAAI,MAClC,QACC;;AAER;AAEA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAAsC;CACnF,OAAO,oBAAC,MAAD;EAAI,aAAU;EAAkB,WAAW,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC/E;AASA,SAAgB,eAAe,EAC7B,WACA,UACA,OAAO,QACP,SACA,GAAG,SACmB;CACtB,MAAM,OAAO,UAAU,KAAK,OAAO;CAEnC,OACE,oBAAC,MAAD;EACE,aAAU;EAGV,gBAAc,WAAW,SAAS,KAAA;EAClC,eAAa,YAAY,KAAA;EACzB,WAAW,GACT,eAAe;GAAE,SAAS,WAAW,YAAY;GAAS;EAAK,CAAC,GAChE,YAAY,oCACZ,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,mBAAmB,EAAE,WAAW,GAAG,SAA8B;CAC/E,OACE,qBAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAW,GAAG,gBAAgB,SAAS;EACvC,GAAI;EAJN,UAAA,CAME,oBAAC,OAAD;GACE,SAAQ;GACR,MAAK;GACL,eAAY;GACZ,WAAW,GAAG,UAAU,kBAAkB;GAE1C,UAAA,oBAAC,QAAD;IACE,GAAE;IACF,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;GAChB,CAAA;EACE,CAAA,GACL,oBAAC,QAAD;GAAM,WAAU;GAAmB,UAAA;EAAc,CAAA,CACnC;;AAEpB;AAEA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAA8B;CAC3E,OACE,qBAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAW,GAAG,gBAAgB,SAAS;EACvC,GAAI;EAJN,UAAA,CAME,oBAAC,QAAD;GAAM,WAAU;GAAmB,UAAA;EAAU,CAAA,GAC7C,oBAAC,OAAD;GACE,SAAQ;GACR,MAAK;GACL,eAAY;GACZ,WAAW,GAAG,UAAU,kBAAkB;GAE1C,UAAA,oBAAC,QAAD;IACE,GAAE;IACF,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;GAChB,CAAA;EACE,CAAA,CACS;;AAEpB;;;;;;;;AASA,SAAgB,mBAAmB,EAAE,WAAW,GAAG,SAAwC;CACzF,OACE,qBAAC,QAAD;EACE,aAAU;EACV,eAAY;EACZ,WAAW,GAAG,wDAAwD,SAAS;EAC/E,GAAI;EAJN,UAAA,CAME,qBAAC,OAAD;GAAK,SAAQ;GAAY,MAAK;GAAO,WAAU;GAA/C,UAAA;IACE,oBAAC,UAAD;KAAQ,IAAG;KAAI,IAAG;KAAK,GAAE;KAAM,MAAK;IAAgB,CAAA;IACpD,oBAAC,UAAD;KAAQ,IAAG;KAAK,IAAG;KAAK,GAAE;KAAM,MAAK;IAAgB,CAAA;IACrD,oBAAC,UAAD;KAAQ,IAAG;KAAK,IAAG;KAAK,GAAE;KAAM,MAAK;IAAgB,CAAA;GAClD;EACL,CAAA,GAAA,oBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAgB,CAAA,CACtC;;AAEV"}

package/dist/components/palette-generator/index.d.ts

@@ -0,0 +1,2 @@
+import { PaletteColor, PaletteGenerate, PaletteGenerator, PaletteGeneratorProps, generateTokenPalette, paletteGeneratorVariants } from "./palette-generator.js";
+export { type PaletteColor, type PaletteGenerate, PaletteGenerator, type PaletteGeneratorProps, generateTokenPalette, paletteGeneratorVariants };

package/dist/components/palette-generator/index.js

@@ -0,0 +1,2 @@
+import { PaletteGenerator, generateTokenPalette, paletteGeneratorVariants } from "./palette-generator.js";
+export { PaletteGenerator, generateTokenPalette, paletteGeneratorVariants };

package/dist/components/palette-generator/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/palette-generator/meta.ts
+const meta = defineMeta({
+	name: "palette-generator",
+	title: "Palette Generator",
+	description: "A row of swatches that melt together through a goo filter and pop back out in a new palette.",
+	category: "effects",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["button"],
+	files: ["palette-generator.tsx"],
+	a11y: "The refresh control is a named button (\"Generate a new palette\") with a focus ring. The swatches are a labelled list of images named by colour, and each new palette is announced through a polite live region (missing in the source). The melt is decoration: under reduced motion the colours swap at once."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/palette-generator/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/palette-generator/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"palette-generator\",\n  title: \"Palette Generator\",\n  description:\n    \"A row of swatches that melt together through a goo filter and pop back out in a new palette.\",\n  category: \"effects\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"button\"],\n  files: [\"palette-generator.tsx\"],\n  a11y:\n    'The refresh control is a named button (\"Generate a new palette\") with a focus ring. The swatches are a ' +\n    \"labelled list of images named by colour, and each new palette is announced through a polite live region \" +\n    \"(missing in the source). The melt is decoration: under reduced motion the colours swap at once.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,QAAQ;CAC/B,OAAO,CAAC,uBAAuB;CAC/B,MACE;AAGJ,CAAC"}

package/dist/components/palette-generator/palette-generator.d.ts

@@ -0,0 +1,43 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/palette-generator/palette-generator.d.ts
+interface PaletteColor {
+  /** Any CSS colour: shown as the swatch's background. */
+  value: string;
+  /** Announced and used as the swatch's accessible name. */
+  name: string;
+}
+type PaletteGenerate = (count: number, random: () => number) => PaletteColor[];
+/**
+ * The default generator: a light-to-dark ramp between two neighbouring hue
+ * tokens. Every colour is a color-mix of semantic tokens.
+ */
+declare const generateTokenPalette: PaletteGenerate;
+declare const paletteGeneratorVariants: (props?: ({
+  stroke?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface PaletteGeneratorProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange">, VariantProps<typeof paletteGeneratorVariants> {
+  /** Controlled palette. */
+  colors?: PaletteColor[];
+  /** Initial palette when uncontrolled. Defaults to a generated one. */
+  defaultColors?: PaletteColor[];
+  /** Called with each new palette. */
+  onColorsChange?: (colors: PaletteColor[]) => void;
+  /** Swatches per palette. */
+  count?: number;
+  /** Makes a palette. Defaults to `generateTokenPalette`. */
+  generate?: PaletteGenerate;
+  /** How deep the shrink and melt go, 0–100. */
+  morph?: number;
+  /** Swatch corner radius in pixels; the slabs are 10px rounder. */
+  radius?: number;
+  /** The refresh button's accessible name. */
+  generateLabel?: string;
+  /** Names the swatch list. */
+  paletteLabel?: string;
+}
+/** Swatches that melt together and pop back out in a new palette. */
+declare function PaletteGenerator({ className, stroke, colors: colorsProp, defaultColors, onColorsChange, count, generate, morph, radius, generateLabel, paletteLabel, style, ...props }: PaletteGeneratorProps): import("react").JSX.Element;
+//#endregion
+export { PaletteColor, PaletteGenerate, PaletteGenerator, PaletteGeneratorProps, generateTokenPalette, paletteGeneratorVariants };
+//# sourceMappingURL=palette-generator.d.ts.map

package/dist/components/palette-generator/palette-generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette-generator.d.ts","names":[],"sources":["../../../src/components/palette-generator/palette-generator.tsx"],"mappings":";;;UAmCiB;;EAEf;;EAEA;;KAGU,mBAAmB,eAAe,yBAAyB;;;;;cAS1D,sBAAsB;cAwC7B,2BAAwB;;6CAS5B;UAOe,8BAEb,KAAK,4DACL,oBAAoB;;EAEtB,SAAS;;EAET,gBAAgB;;EAEhB,kBAAkB,QAAQ;;EAE1B;;EAEA,WAAW;;EAEX;;EAEA;;EAEA;;EAEA;;;iBAIc,mBACd,WACA,QACA,QAAQ,YACR,eACA,gBACA,OACA,UACA,OACA,QACA,eACA,cACA,UACG,SACF,wCAAqB,IAAA"}

package/dist/components/palette-generator/palette-generator.js

@@ -0,0 +1,199 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useId, useRef, useState } from "react";
+//#region src/components/palette-generator/palette-generator.tsx
+/** Hue tokens in wheel order, so neighbours make a family. */
+const HUES = [
+	"destructive",
+	"warning",
+	"success",
+	"info",
+	"primary"
+];
+/**
+* The default generator: a light-to-dark ramp between two neighbouring hue
+* tokens. Every colour is a color-mix of semantic tokens.
+*/
+const generateTokenPalette = (count, random) => {
+	const start = Math.floor(random() * HUES.length);
+	const from = HUES[start] ?? "info";
+	const to = HUES[(start + 1) % HUES.length] ?? "success";
+	const depth = 30 + Math.round(random() * 25);
+	return Array.from({ length: count }, (_, index) => {
+		const t = count === 1 ? .5 : index / (count - 1);
+		const hue = `color-mix(in oklch, var(--color-${to}) ${String(Math.round(t * 100))}%, var(--color-${from}))`;
+		const toward = t < .5 ? "background" : "foreground";
+		const amount = Math.round(Math.abs(.5 - t) * 2 * depth);
+		return {
+			value: `color-mix(in oklab, ${hue} ${String(100 - amount)}%, var(--color-${toward}))`,
+			name: `${t < .25 ? "pale " : t > .75 ? "deep " : ""}${t < .2 ? from : t > .8 ? to : `${from}–${to}`}`
+		};
+	});
+};
+/** A tiny seeded PRNG, so the first palette is the same on server and client. */
+function seeded(seed) {
+	let state = seed;
+	return () => {
+		state = state + 1831565813 | 0;
+		let t = Math.imul(state ^ state >>> 15, 1 | state);
+		t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+		return ((t ^ t >>> 14) >>> 0) / 4294967296;
+	};
+}
+function reducedMotion() {
+	return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/** Timeline of one press, in milliseconds. */
+const MELT = 300;
+const SETTLE = 1e3;
+const paletteGeneratorVariants = cva("flex w-[18.75rem] max-w-full gap-1.5", {
+	variants: { 
+	/** A hairline ring on both slabs — the source's Stroke switch. */
+stroke: {
+		true: "[&>[data-slab]]:shadow-[inset_0_0_0_1px_var(--color-border)]",
+		false: ""
+	} },
+	defaultVariants: { stroke: false }
+});
+const slab = cn("rounded-[calc(var(--palette-generator-radius)+10px)] bg-card p-2.5 text-card-foreground", "transition-[scale] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]");
+/** Swatches that melt together and pop back out in a new palette. */
+function PaletteGenerator({ className, stroke, colors: colorsProp, defaultColors, onColorsChange, count = 4, generate = generateTokenPalette, morph = 50, radius = 14, generateLabel = "Generate a new palette", paletteLabel = "Palette", style, ...props }) {
+	const filterId = `dowel-palette-goo-${useId().replace(/[^a-zA-Z0-9-]/g, "")}`;
+	const [uncontrolled, setUncontrolled] = useState(() => defaultColors ?? generate(count, seeded(count)));
+	const colors = colorsProp ?? uncontrolled;
+	const [phase, setPhase] = useState("idle");
+	const [presses, setPresses] = useState(0);
+	const [announced, setAnnounced] = useState("");
+	const blurRef = useRef(null);
+	const timers = useRef([]);
+	const frame = useRef(0);
+	const depth = Math.min(100, Math.max(0, morph)) / 100;
+	useEffect(() => () => {
+		for (const timer of timers.current) clearTimeout(timer);
+		cancelAnimationFrame(frame.current);
+	}, []);
+	/** Tweens the goo blur, since an SVG filter attribute cannot transition. */
+	function tweenBlur(from, to, duration) {
+		cancelAnimationFrame(frame.current);
+		const started = performance.now();
+		const step = (now) => {
+			const t = Math.min(1, (now - started) / duration);
+			blurRef.current?.setAttribute("stdDeviation", String(from + (to - from) * t));
+			if (t < 1) frame.current = requestAnimationFrame(step);
+		};
+		frame.current = requestAnimationFrame(step);
+	}
+	function swap() {
+		const next = generate(count, Math.random);
+		if (colorsProp === void 0) setUncontrolled(next);
+		onColorsChange?.(next);
+		setAnnounced(`New palette: ${next.map((color) => color.name).join(", ")}`);
+	}
+	function press() {
+		setPresses((current) => current + 1);
+		for (const timer of timers.current) clearTimeout(timer);
+		timers.current = [];
+		if (reducedMotion()) {
+			swap();
+			return;
+		}
+		const blur = 1 + 4 * depth;
+		setPhase("melt");
+		tweenBlur(0, blur, 250);
+		timers.current.push(setTimeout(() => {
+			swap();
+			setPhase("pop");
+			tweenBlur(blur, 0, 700);
+		}, MELT), setTimeout(() => {
+			setPhase("idle");
+		}, SETTLE));
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "palette-generator",
+		"data-phase": phase,
+		className: cn(paletteGeneratorVariants({ stroke }), className),
+		style: {
+			"--palette-generator-radius": `${String(radius)}px`,
+			"--palette-generator-morph": String(depth),
+			...style
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("svg", {
+				width: "0",
+				height: "0",
+				"aria-hidden": "true",
+				className: "absolute",
+				children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
+					id: filterId,
+					children: [/* @__PURE__ */ jsx("feGaussianBlur", {
+						ref: blurRef,
+						in: "SourceGraphic",
+						stdDeviation: "0",
+						result: "blur"
+					}), /* @__PURE__ */ jsx("feColorMatrix", {
+						in: "blur",
+						mode: "matrix",
+						values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 26 -13"
+					})]
+				}) })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-slab": "",
+				"data-slot": "palette-generator-swatches",
+				className: cn(slab, "min-w-0 flex-1 in-data-[phase=melt]:scale-[0.965]"),
+				children: /* @__PURE__ */ jsx("ul", {
+					"aria-label": paletteLabel,
+					className: "flex h-[3.625rem] gap-1",
+					style: phase === "idle" ? void 0 : { filter: `url(#${filterId})` },
+					children: colors.map((color, index) => /* @__PURE__ */ jsx("li", {
+						className: "grid min-w-0 flex-1 place-items-center",
+						children: /* @__PURE__ */ jsx("span", {
+							role: "img",
+							"aria-label": color.name,
+							"data-slot": "palette-generator-swatch",
+							className: cn("block size-full rounded-[var(--palette-generator-radius)]", "transition-[width,height,border-radius] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", "in-data-[phase=pop]:ease-[var(--ease-overshoot)]", "in-data-[phase=melt]:h-[calc(100%-(100%-2.375rem)*var(--palette-generator-morph))]", "in-data-[phase=melt]:w-[calc(100%-(100%-2.375rem)*var(--palette-generator-morph))]", "in-data-[phase=melt]:rounded-[50%]"),
+							style: { backgroundColor: color.value }
+						})
+					}, index))
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-slab": "",
+				className: cn(slab, "shrink-0 motion-safe:active:scale-[0.94]"),
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					"aria-label": generateLabel,
+					"data-slot": "palette-generator-refresh",
+					className: cn("h-[3.625rem] w-[1.875rem] rounded-[var(--palette-generator-radius)] p-0 text-muted-foreground", "hover:bg-transparent hover:text-[color-mix(in_oklab,var(--color-muted-foreground)_45%,var(--color-card))]"),
+					onClick: press,
+					children: /* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2.2",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						"aria-hidden": "true",
+						className: "size-[1.125rem] transition-[rotate] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)]",
+						style: { rotate: `${String(presses * 180)}deg` },
+						children: /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8M21 3v5h-5M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16M8 16H3v5" })
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				children: announced
+			})
+		]
+	});
+}
+//#endregion
+export { PaletteGenerator, generateTokenPalette, paletteGeneratorVariants };
+
+//# sourceMappingURL=palette-generator.js.map

package/dist/components/palette-generator/palette-generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette-generator.js","names":[],"sources":["../../../src/components/palette-generator/palette-generator.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Palette (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n} from \"react\";\n\nimport { Button } from \"@/components/button\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A row of swatches and a refresh button. Pressing it shrinks the swatches to\n * round blobs that melt together through a goo filter, swaps the colours at\n * the smallest point, and pops them back out as rectangles.\n *\n * Colours are data, shown through inline style. The source generated OKLCH\n * ramps from numbers; this library's token audit forbids colour functions in\n * component source (literal or templated), so the default generator composes\n * semantic tokens instead: a light-to-dark ramp walking between two\n * neighbouring hue tokens, mixed toward the background at the light end and\n * the foreground at the dark end — exactly the \"one hue family\" ramp the\n * source produces, and it follows the theme. A consumer who wants free OKLCH\n * palettes passes `generate` (the story shows one).\n *\n * The morph is phase-driven CSS (melt → pop → idle) on data-phase; only the\n * blur of the goo filter is tweened in JS, because an SVG filter attribute\n * cannot be transitioned. Reduced motion swaps the colours at once.\n */\n\nexport interface PaletteColor {\n  /** Any CSS colour: shown as the swatch's background. */\n  value: string;\n  /** Announced and used as the swatch's accessible name. */\n  name: string;\n}\n\nexport type PaletteGenerate = (count: number, random: () => number) => PaletteColor[];\n\n/** Hue tokens in wheel order, so neighbours make a family. */\nconst HUES = [\"destructive\", \"warning\", \"success\", \"info\", \"primary\"] as const;\n\n/**\n * The default generator: a light-to-dark ramp between two neighbouring hue\n * tokens. Every colour is a color-mix of semantic tokens.\n */\nexport const generateTokenPalette: PaletteGenerate = (count, random) => {\n  const start = Math.floor(random() * HUES.length);\n  const from = HUES[start] ?? \"info\";\n  const to = HUES[(start + 1) % HUES.length] ?? \"success\";\n  const depth = 30 + Math.round(random() * 25);\n  return Array.from({ length: count }, (_, index) => {\n    const t = count === 1 ? 0.5 : index / (count - 1);\n    const hue = `color-mix(in oklch, var(--color-${to}) ${String(Math.round(t * 100))}%, var(--color-${from}))`;\n    // Lighter than the hue toward the start, darker toward the end.\n    const toward = t < 0.5 ? \"background\" : \"foreground\";\n    const amount = Math.round(Math.abs(0.5 - t) * 2 * depth);\n    const value = `color-mix(in oklab, ${hue} ${String(100 - amount)}%, var(--color-${toward}))`;\n    const tone = t < 0.25 ? \"pale \" : t > 0.75 ? \"deep \" : \"\";\n    const family = t < 0.2 ? from : t > 0.8 ? to : `${from}–${to}`;\n    return { value, name: `${tone}${family}` };\n  });\n};\n\n/** A tiny seeded PRNG, so the first palette is the same on server and client. */\nfunction seeded(seed: number): () => number {\n  let state = seed;\n  return () => {\n    state = (state + 0x6d2b79f5) | 0;\n    let t = Math.imul(state ^ (state >>> 15), 1 | state);\n    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\nfunction reducedMotion(): boolean {\n  return (\n    typeof window.matchMedia === \"function\" &&\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n  );\n}\n\n/** Timeline of one press, in milliseconds. */\nconst MELT = 300;\nconst SETTLE = 1000;\n\nconst paletteGeneratorVariants = cva(\"flex w-[18.75rem] max-w-full gap-1.5\", {\n  variants: {\n    /** A hairline ring on both slabs — the source's Stroke switch. */\n    stroke: {\n      true: \"[&>[data-slab]]:shadow-[inset_0_0_0_1px_var(--color-border)]\",\n      false: \"\",\n    },\n  },\n  defaultVariants: { stroke: false },\n});\n\nconst slab = cn(\n  \"rounded-[calc(var(--palette-generator-radius)+10px)] bg-card p-2.5 text-card-foreground\",\n  \"transition-[scale] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]\",\n);\n\nexport interface PaletteGeneratorProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"defaultValue\" | \"onChange\">,\n    VariantProps<typeof paletteGeneratorVariants> {\n  /** Controlled palette. */\n  colors?: PaletteColor[];\n  /** Initial palette when uncontrolled. Defaults to a generated one. */\n  defaultColors?: PaletteColor[];\n  /** Called with each new palette. */\n  onColorsChange?: (colors: PaletteColor[]) => void;\n  /** Swatches per palette. */\n  count?: number;\n  /** Makes a palette. Defaults to `generateTokenPalette`. */\n  generate?: PaletteGenerate;\n  /** How deep the shrink and melt go, 0–100. */\n  morph?: number;\n  /** Swatch corner radius in pixels; the slabs are 10px rounder. */\n  radius?: number;\n  /** The refresh button's accessible name. */\n  generateLabel?: string;\n  /** Names the swatch list. */\n  paletteLabel?: string;\n}\n\n/** Swatches that melt together and pop back out in a new palette. */\nexport function PaletteGenerator({\n  className,\n  stroke,\n  colors: colorsProp,\n  defaultColors,\n  onColorsChange,\n  count = 4,\n  generate = generateTokenPalette,\n  morph = 50,\n  radius = 14,\n  generateLabel = \"Generate a new palette\",\n  paletteLabel = \"Palette\",\n  style,\n  ...props\n}: PaletteGeneratorProps) {\n  const filterId = `dowel-palette-goo-${useId().replace(/[^a-zA-Z0-9-]/g, \"\")}`;\n  const [uncontrolled, setUncontrolled] = useState(\n    () => defaultColors ?? generate(count, seeded(count)),\n  );\n  const colors = colorsProp ?? uncontrolled;\n  const [phase, setPhase] = useState<\"idle\" | \"melt\" | \"pop\">(\"idle\");\n  const [presses, setPresses] = useState(0);\n  const [announced, setAnnounced] = useState(\"\");\n  const blurRef = useRef<SVGFEGaussianBlurElement | null>(null);\n  const timers = useRef<ReturnType<typeof setTimeout>[]>([]);\n  const frame = useRef(0);\n  const depth = Math.min(100, Math.max(0, morph)) / 100;\n\n  useEffect(\n    () => () => {\n      for (const timer of timers.current) clearTimeout(timer);\n      cancelAnimationFrame(frame.current);\n    },\n    [],\n  );\n\n  /** Tweens the goo blur, since an SVG filter attribute cannot transition. */\n  function tweenBlur(from: number, to: number, duration: number) {\n    cancelAnimationFrame(frame.current);\n    const started = performance.now();\n    const step = (now: number) => {\n      const t = Math.min(1, (now - started) / duration);\n      blurRef.current?.setAttribute(\"stdDeviation\", String(from + (to - from) * t));\n      if (t < 1) frame.current = requestAnimationFrame(step);\n    };\n    frame.current = requestAnimationFrame(step);\n  }\n\n  function swap() {\n    const next = generate(count, Math.random);\n    if (colorsProp === undefined) setUncontrolled(next);\n    onColorsChange?.(next);\n    setAnnounced(`New palette: ${next.map((color) => color.name).join(\", \")}`);\n  }\n\n  function press() {\n    setPresses((current) => current + 1);\n    for (const timer of timers.current) clearTimeout(timer);\n    timers.current = [];\n    if (reducedMotion()) {\n      swap();\n      return;\n    }\n    const blur = 1 + 4 * depth;\n    setPhase(\"melt\");\n    tweenBlur(0, blur, MELT - 50);\n    timers.current.push(\n      setTimeout(() => {\n        swap();\n        setPhase(\"pop\");\n        tweenBlur(blur, 0, SETTLE - MELT);\n      }, MELT),\n      setTimeout(() => {\n        setPhase(\"idle\");\n      }, SETTLE),\n    );\n  }\n\n  return (\n    <div\n      data-slot=\"palette-generator\"\n      data-phase={phase}\n      className={cn(paletteGeneratorVariants({ stroke }), className)}\n      style={\n        {\n          \"--palette-generator-radius\": `${String(radius)}px`,\n          \"--palette-generator-morph\": String(depth),\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      <svg width=\"0\" height=\"0\" aria-hidden=\"true\" className=\"absolute\">\n        <defs>\n          <filter id={filterId}>\n            <feGaussianBlur ref={blurRef} in=\"SourceGraphic\" stdDeviation=\"0\" result=\"blur\" />\n            <feColorMatrix\n              in=\"blur\"\n              mode=\"matrix\"\n              values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 26 -13\"\n            />\n          </filter>\n        </defs>\n      </svg>\n      <div\n        data-slab=\"\"\n        data-slot=\"palette-generator-swatches\"\n        className={cn(slab, \"min-w-0 flex-1 in-data-[phase=melt]:scale-[0.965]\")}\n      >\n        <ul\n          aria-label={paletteLabel}\n          className=\"flex h-[3.625rem] gap-1\"\n          style={phase === \"idle\" ? undefined : { filter: `url(#${filterId})` }}\n        >\n          {colors.map((color, index) => (\n            <li key={index} className=\"grid min-w-0 flex-1 place-items-center\">\n              <span\n                role=\"img\"\n                aria-label={color.name}\n                data-slot=\"palette-generator-swatch\"\n                className={cn(\n                  \"block size-full rounded-[var(--palette-generator-radius)]\",\n                  \"transition-[width,height,border-radius] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n                  \"in-data-[phase=pop]:ease-[var(--ease-overshoot)]\",\n                  \"in-data-[phase=melt]:h-[calc(100%-(100%-2.375rem)*var(--palette-generator-morph))]\",\n                  \"in-data-[phase=melt]:w-[calc(100%-(100%-2.375rem)*var(--palette-generator-morph))]\",\n                  \"in-data-[phase=melt]:rounded-[50%]\",\n                )}\n                style={{ backgroundColor: color.value }}\n              />\n            </li>\n          ))}\n        </ul>\n      </div>\n      <div data-slab=\"\" className={cn(slab, \"shrink-0 motion-safe:active:scale-[0.94]\")}>\n        <Button\n          variant=\"ghost\"\n          aria-label={generateLabel}\n          data-slot=\"palette-generator-refresh\"\n          className={cn(\n            \"h-[3.625rem] w-[1.875rem] rounded-[var(--palette-generator-radius)] p-0 text-muted-foreground\",\n            \"hover:bg-transparent hover:text-[color-mix(in_oklab,var(--color-muted-foreground)_45%,var(--color-card))]\",\n          )}\n          onClick={press}\n        >\n          <svg\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2.2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            aria-hidden=\"true\"\n            className=\"size-[1.125rem] transition-[rotate] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)]\"\n            style={{ rotate: `${String(presses * 180)}deg` }}\n          >\n            <path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8M21 3v5h-5M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16M8 16H3v5\" />\n          </svg>\n        </Button>\n      </div>\n      <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {announced}\n      </span>\n    </div>\n  );\n}\n\nexport { paletteGeneratorVariants };\n"],"mappings":"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"}

package/dist/components/permission-matrix/permission-matrix.js

@@ -57,7 +57,7 @@ function PermissionMatrix({ className, label, roles, permissions, grants, onChan
 				children: [/* @__PURE__ */ jsx("th", {
 					role: "columnheader",
 					scope: "col",
-					className: "px-3 py-2 text-left text-xs font-medium",
+					className: "px-3 py-2 text-start text-xs font-medium",
 					children: "Permission"
 				}), roles.map((role) => {
 					const granted = countGranted(roles, grants, role, permissions);
@@ -85,7 +85,7 @@ function PermissionMatrix({ className, label, roles, permissions, grants, onChan
 				children: [/* @__PURE__ */ jsxs("th", {
 					role: "rowheader",
 					scope: "row",
-					className: "px-3 py-1.5 text-left text-xs font-medium",
+					className: "px-3 py-1.5 text-start text-xs font-medium",
 					children: [row.label, /* @__PURE__ */ jsx("span", {
 						className: "sr-only",
 						children: ", all"
@@ -107,7 +107,7 @@ function PermissionMatrix({ className, label, roles, permissions, grants, onChan
 				children: [/* @__PURE__ */ jsxs("th", {
 					role: "rowheader",
 					scope: "row",
-					className: cn("px-3 py-2 text-left font-normal", row.permission.group !== void 0 && "pl-6"),
+					className: cn("px-3 py-2 text-start font-normal", row.permission.group !== void 0 && "ps-6"),
 					children: [row.permission.label, row.permission.description ? /* @__PURE__ */ jsx("span", {
 						className: "block text-xs text-muted-foreground",
 						children: row.permission.description

package/dist/components/permission-matrix/permission-matrix.js.map

@@ -1 +1 @@
-{"version":3,"file":"permission-matrix.js","names":[],"sources":["../../../src/components/permission-matrix/permission-matrix.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useId,\n  useMemo,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n} from \"react\";\n\nimport { Checkbox } from \"@/components/checkbox\";\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  cellState,\n  countGranted,\n  groupPermissions,\n  groupState,\n  type Grants,\n  type Permission,\n  type Role,\n} from \"./permission-model\";\n\n/**\n * Roles across, permissions down, a checkbox at every crossing.\n *\n * Every admin panel has one and every admin panel builds it, because the\n * hard part is not the checkboxes. It is that a role can inherit from\n * another, so a box can be ticked without anyone having ticked it; that an\n * Owner has everything and none of it can be unticked; that a section of\n * eight permissions wants one control for all of them; and that sixty\n * checkboxes are sixty tab stops unless something is done about it.\n *\n * Something is done about it. This is a grid in the WAI-ARIA sense — one tab\n * stop, arrow keys between cells, Home and End along a row — which is the\n * right call here and was the wrong one for the diff viewer: a diff is read,\n * a matrix is operated. Every checkbox is named by both coordinates, \"Delete\n * projects for Editor\", so a reader arriving by arrow key knows where they\n * are without re-reading the headers.\n *\n * A grant that arrived by inheritance is shown as a checked box that cannot\n * be unchecked here, with the role it came from said beside it and in the\n * box's description. A disabled control would be the obvious rendering, and\n * it would take the box out of the tab order and the arrow-key path, so a\n * keyboard user would step over the one cell whose state needs explaining.\n *\n * Changes are reported, never applied. A group toggle reports every\n * permission it touched in one call, so an application can save it as one\n * change rather than eight.\n */\n\nexport interface PermissionMatrixProps extends Omit<\n  ComponentPropsWithRef<\"table\">,\n  \"onChange\"\n> {\n  /** Names the matrix: \"Permissions for Acme\". */\n  label: string;\n  roles: Role[];\n  permissions: Permission[];\n  grants: Grants;\n  /**\n   * A change to make. Several ids arrive together when a group toggle was\n   * used. Omit to render the matrix as a record.\n   */\n  onChange?: (roleId: string, permissionIds: string[], granted: boolean) => void;\n}\n\ntype MatrixRow =\n  | { kind: \"group\"; label: string; permissions: Permission[] }\n  | { kind: \"permission\"; permission: Permission };\n\nconst ARROWS: Record<string, [number, number]> = {\n  ArrowUp: [-1, 0],\n  ArrowDown: [1, 0],\n  ArrowLeft: [0, -1],\n  ArrowRight: [0, 1],\n};\n\nexport function PermissionMatrix({\n  className,\n  label,\n  roles,\n  permissions,\n  grants,\n  onChange,\n  ...props\n}: PermissionMatrixProps) {\n  const uid = useId();\n\n  const rows = useMemo<MatrixRow[]>(\n    () =>\n      groupPermissions(permissions).flatMap((group): MatrixRow[] => [\n        ...(group.group !== undefined\n          ? [{ kind: \"group\" as const, label: group.group, permissions: group.permissions }]\n          : []),\n        ...group.permissions.map((permission) => ({ kind: \"permission\" as const, permission })),\n      ]),\n    [permissions],\n  );\n\n  // One tab stop. The cell that last had focus is the one Tab returns to.\n  const [active, setActive] = useState<[number, number]>([0, 0]);\n\n  const onKeyDown = (event: KeyboardEvent<HTMLTableElement>) => {\n    const target = event.target as HTMLElement;\n    const row = Number(target.dataset.row);\n    const col = Number(target.dataset.col);\n    if (Number.isNaN(row) || Number.isNaN(col)) return;\n\n    let next: [number, number] | null = null;\n    const arrow = ARROWS[event.key];\n    if (arrow) {\n      next = [row + arrow[0], col + arrow[1]];\n    } else if (event.key === \"Home\") {\n      next = event.ctrlKey ? [0, 0] : [row, 0];\n    } else if (event.key === \"End\") {\n      next = event.ctrlKey ? [rows.length - 1, roles.length - 1] : [row, roles.length - 1];\n    }\n    if (!next) return;\n\n    const [nextRow, nextCol] = next;\n    if (nextRow < 0 || nextRow >= rows.length || nextCol < 0 || nextCol >= roles.length) {\n      event.preventDefault();\n      return;\n    }\n    event.preventDefault();\n    const cell = event.currentTarget.querySelector<HTMLElement>(\n      `[data-row=\"${String(nextRow)}\"][data-col=\"${String(nextCol)}\"]`,\n    );\n    cell?.focus();\n  };\n\n  return (\n    <div className=\"relative w-full overflow-x-auto\">\n      <table\n        data-slot=\"permission-matrix\"\n        role=\"grid\"\n        aria-label={label}\n        aria-readonly={onChange ? undefined : true}\n        onKeyDown={onKeyDown}\n        className={cn(\"w-full border-collapse text-sm\", className)}\n        {...props}\n      >\n        <thead>\n          <tr role=\"row\" className=\"border-b border-border\">\n            <th\n              role=\"columnheader\"\n              scope=\"col\"\n              className=\"px-3 py-2 text-left text-xs font-medium\"\n            >\n              Permission\n            </th>\n            {roles.map((role) => {\n              const granted = countGranted(roles, grants, role, permissions);\n              return (\n                <th\n                  key={role.id}\n                  role=\"columnheader\"\n                  scope=\"col\"\n                  className=\"px-3 py-2 text-center text-xs font-medium\"\n                >\n                  {role.label}\n                  <span className=\"block font-normal text-muted-foreground\">\n                    {role.locked ? (\n                      \"all, locked\"\n                    ) : (\n                      <>\n                        {String(granted)}/{String(permissions.length)}\n                        <span className=\"sr-only\"> granted</span>\n                      </>\n                    )}\n                  </span>\n                </th>\n              );\n            })}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row, rowIndex) =>\n            row.kind === \"group\" ? (\n              <tr\n                key={`group-${row.label}`}\n                role=\"row\"\n                className=\"border-b border-border bg-muted/40\"\n              >\n                <th\n                  role=\"rowheader\"\n                  scope=\"row\"\n                  className=\"px-3 py-1.5 text-left text-xs font-medium\"\n                >\n                  {row.label}\n                  <span className=\"sr-only\">, all</span>\n                </th>\n                {roles.map((role, colIndex) => (\n                  <GroupCell\n                    key={role.id}\n                    role={role}\n                    roles={roles}\n                    grants={grants}\n                    group={row.label}\n                    permissions={row.permissions}\n                    position={[rowIndex, colIndex]}\n                    active={active[0] === rowIndex && active[1] === colIndex}\n                    onActivate={setActive}\n                    onChange={onChange}\n                  />\n                ))}\n              </tr>\n            ) : (\n              <tr\n                key={row.permission.id}\n                role=\"row\"\n                className=\"border-b border-border last:border-0 hover:bg-muted/30\"\n              >\n                <th\n                  role=\"rowheader\"\n                  scope=\"row\"\n                  className={cn(\n                    \"px-3 py-2 text-left font-normal\",\n                    row.permission.group !== undefined && \"pl-6\",\n                  )}\n                >\n                  {row.permission.label}\n                  {row.permission.description ? (\n                    <span className=\"block text-xs text-muted-foreground\">\n                      {row.permission.description}\n                    </span>\n                  ) : null}\n                </th>\n                {roles.map((role, colIndex) => (\n                  <PermissionCell\n                    key={role.id}\n                    id={`${uid}-${role.id}-${row.permission.id}`}\n                    role={role}\n                    roles={roles}\n                    grants={grants}\n                    permission={row.permission}\n                    position={[rowIndex, colIndex]}\n                    active={active[0] === rowIndex && active[1] === colIndex}\n                    onActivate={setActive}\n                    onChange={onChange}\n                  />\n                ))}\n              </tr>\n            ),\n          )}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\ninterface CellProps {\n  role: Role;\n  roles: Role[];\n  grants: Grants;\n  position: [number, number];\n  active: boolean;\n  onActivate: (position: [number, number]) => void;\n  onChange?: (roleId: string, permissionIds: string[], granted: boolean) => void;\n}\n\nfunction PermissionCell({\n  id,\n  role,\n  roles,\n  grants,\n  permission,\n  position,\n  active,\n  onActivate,\n  onChange,\n}: CellProps & { id: string; permission: Permission }) {\n  const state = cellState(roles, grants, role, permission.id);\n  const fixed = state.fixed || !onChange;\n  const noteId = `${id}-note`;\n\n  const note = role.locked\n    ? `${role.label} has every permission; this cannot be changed.`\n    : state.inheritedFrom\n      ? `Inherited from ${state.inheritedFrom.label}.`\n      : null;\n\n  return (\n    <td\n      role=\"gridcell\"\n      data-slot=\"permission-cell\"\n      data-granted={state.granted || undefined}\n      data-inherited={state.inheritedFrom ? \"\" : undefined}\n      className=\"px-3 py-2 text-center align-middle\"\n    >\n      <Checkbox\n        id={id}\n        checked={state.granted}\n        aria-label={`${permission.label} for ${role.label}`}\n        aria-describedby={note ? noteId : undefined}\n        // Fixed cells stay focusable, so the arrow-key path and the tab order\n        // do not step over the one cell whose state needs explaining.\n        aria-disabled={fixed || undefined}\n        tabIndex={active ? 0 : -1}\n        data-row={position[0]}\n        data-col={position[1]}\n        className={cn(fixed && \"opacity-55\")}\n        onFocus={() => {\n          onActivate(position);\n        }}\n        onCheckedChange={(next) => {\n          if (fixed) return;\n          onChange?.(role.id, [permission.id], next === true);\n        }}\n      />\n      {state.inheritedFrom ? (\n        <span id={noteId} className=\"mt-0.5 block text-2xs text-muted-foreground\">\n          via {state.inheritedFrom.label}\n        </span>\n      ) : note ? (\n        <span id={noteId} className=\"sr-only\">\n          {note}\n        </span>\n      ) : null}\n    </td>\n  );\n}\n\nfunction GroupCell({\n  role,\n  roles,\n  grants,\n  group,\n  permissions,\n  position,\n  active,\n  onActivate,\n  onChange,\n}: CellProps & { group: string; permissions: Permission[] }) {\n  const ids = permissions.map((permission) => permission.id);\n  const state = groupState(roles, grants, role, ids);\n  // Only what can actually change here: inherited grants stay either way.\n  const changeable = permissions\n    .filter((permission) => !cellState(roles, grants, role, permission.id).fixed)\n    .map((permission) => permission.id);\n  const fixed = role.locked || !onChange || changeable.length === 0;\n\n  return (\n    <td\n      role=\"gridcell\"\n      data-slot=\"permission-group-cell\"\n      className=\"px-3 py-1.5 text-center align-middle\"\n    >\n      <Checkbox\n        checked={state === \"all\" ? true : state === \"some\" ? \"indeterminate\" : false}\n        aria-label={`All ${group} for ${role.label}`}\n        aria-disabled={fixed || undefined}\n        tabIndex={active ? 0 : -1}\n        data-row={position[0]}\n        data-col={position[1]}\n        className={cn(fixed && \"opacity-55\")}\n        onFocus={() => {\n          onActivate(position);\n        }}\n        onCheckedChange={(next) => {\n          if (fixed) return;\n          onChange?.(role.id, changeable, next === true);\n        }}\n      />\n    </td>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"permission-matrix.js","names":[],"sources":["../../../src/components/permission-matrix/permission-matrix.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useId,\n  useMemo,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n} from \"react\";\n\nimport { Checkbox } from \"@/components/checkbox\";\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  cellState,\n  countGranted,\n  groupPermissions,\n  groupState,\n  type Grants,\n  type Permission,\n  type Role,\n} from \"./permission-model\";\n\n/**\n * Roles across, permissions down, a checkbox at every crossing.\n *\n * Every admin panel has one and every admin panel builds it, because the\n * hard part is not the checkboxes. It is that a role can inherit from\n * another, so a box can be ticked without anyone having ticked it; that an\n * Owner has everything and none of it can be unticked; that a section of\n * eight permissions wants one control for all of them; and that sixty\n * checkboxes are sixty tab stops unless something is done about it.\n *\n * Something is done about it. This is a grid in the WAI-ARIA sense — one tab\n * stop, arrow keys between cells, Home and End along a row — which is the\n * right call here and was the wrong one for the diff viewer: a diff is read,\n * a matrix is operated. Every checkbox is named by both coordinates, \"Delete\n * projects for Editor\", so a reader arriving by arrow key knows where they\n * are without re-reading the headers.\n *\n * A grant that arrived by inheritance is shown as a checked box that cannot\n * be unchecked here, with the role it came from said beside it and in the\n * box's description. A disabled control would be the obvious rendering, and\n * it would take the box out of the tab order and the arrow-key path, so a\n * keyboard user would step over the one cell whose state needs explaining.\n *\n * Changes are reported, never applied. A group toggle reports every\n * permission it touched in one call, so an application can save it as one\n * change rather than eight.\n */\n\nexport interface PermissionMatrixProps extends Omit<\n  ComponentPropsWithRef<\"table\">,\n  \"onChange\"\n> {\n  /** Names the matrix: \"Permissions for Acme\". */\n  label: string;\n  roles: Role[];\n  permissions: Permission[];\n  grants: Grants;\n  /**\n   * A change to make. Several ids arrive together when a group toggle was\n   * used. Omit to render the matrix as a record.\n   */\n  onChange?: (roleId: string, permissionIds: string[], granted: boolean) => void;\n}\n\ntype MatrixRow =\n  | { kind: \"group\"; label: string; permissions: Permission[] }\n  | { kind: \"permission\"; permission: Permission };\n\nconst ARROWS: Record<string, [number, number]> = {\n  ArrowUp: [-1, 0],\n  ArrowDown: [1, 0],\n  ArrowLeft: [0, -1],\n  ArrowRight: [0, 1],\n};\n\nexport function PermissionMatrix({\n  className,\n  label,\n  roles,\n  permissions,\n  grants,\n  onChange,\n  ...props\n}: PermissionMatrixProps) {\n  const uid = useId();\n\n  const rows = useMemo<MatrixRow[]>(\n    () =>\n      groupPermissions(permissions).flatMap((group): MatrixRow[] => [\n        ...(group.group !== undefined\n          ? [{ kind: \"group\" as const, label: group.group, permissions: group.permissions }]\n          : []),\n        ...group.permissions.map((permission) => ({ kind: \"permission\" as const, permission })),\n      ]),\n    [permissions],\n  );\n\n  // One tab stop. The cell that last had focus is the one Tab returns to.\n  const [active, setActive] = useState<[number, number]>([0, 0]);\n\n  const onKeyDown = (event: KeyboardEvent<HTMLTableElement>) => {\n    const target = event.target as HTMLElement;\n    const row = Number(target.dataset.row);\n    const col = Number(target.dataset.col);\n    if (Number.isNaN(row) || Number.isNaN(col)) return;\n\n    let next: [number, number] | null = null;\n    const arrow = ARROWS[event.key];\n    if (arrow) {\n      next = [row + arrow[0], col + arrow[1]];\n    } else if (event.key === \"Home\") {\n      next = event.ctrlKey ? [0, 0] : [row, 0];\n    } else if (event.key === \"End\") {\n      next = event.ctrlKey ? [rows.length - 1, roles.length - 1] : [row, roles.length - 1];\n    }\n    if (!next) return;\n\n    const [nextRow, nextCol] = next;\n    if (nextRow < 0 || nextRow >= rows.length || nextCol < 0 || nextCol >= roles.length) {\n      event.preventDefault();\n      return;\n    }\n    event.preventDefault();\n    const cell = event.currentTarget.querySelector<HTMLElement>(\n      `[data-row=\"${String(nextRow)}\"][data-col=\"${String(nextCol)}\"]`,\n    );\n    cell?.focus();\n  };\n\n  return (\n    <div className=\"relative w-full overflow-x-auto\">\n      <table\n        data-slot=\"permission-matrix\"\n        role=\"grid\"\n        aria-label={label}\n        aria-readonly={onChange ? undefined : true}\n        onKeyDown={onKeyDown}\n        className={cn(\"w-full border-collapse text-sm\", className)}\n        {...props}\n      >\n        <thead>\n          <tr role=\"row\" className=\"border-b border-border\">\n            <th\n              role=\"columnheader\"\n              scope=\"col\"\n              className=\"px-3 py-2 text-start text-xs font-medium\"\n            >\n              Permission\n            </th>\n            {roles.map((role) => {\n              const granted = countGranted(roles, grants, role, permissions);\n              return (\n                <th\n                  key={role.id}\n                  role=\"columnheader\"\n                  scope=\"col\"\n                  className=\"px-3 py-2 text-center text-xs font-medium\"\n                >\n                  {role.label}\n                  <span className=\"block font-normal text-muted-foreground\">\n                    {role.locked ? (\n                      \"all, locked\"\n                    ) : (\n                      <>\n                        {String(granted)}/{String(permissions.length)}\n                        <span className=\"sr-only\"> granted</span>\n                      </>\n                    )}\n                  </span>\n                </th>\n              );\n            })}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row, rowIndex) =>\n            row.kind === \"group\" ? (\n              <tr\n                key={`group-${row.label}`}\n                role=\"row\"\n                className=\"border-b border-border bg-muted/40\"\n              >\n                <th\n                  role=\"rowheader\"\n                  scope=\"row\"\n                  className=\"px-3 py-1.5 text-start text-xs font-medium\"\n                >\n                  {row.label}\n                  <span className=\"sr-only\">, all</span>\n                </th>\n                {roles.map((role, colIndex) => (\n                  <GroupCell\n                    key={role.id}\n                    role={role}\n                    roles={roles}\n                    grants={grants}\n                    group={row.label}\n                    permissions={row.permissions}\n                    position={[rowIndex, colIndex]}\n                    active={active[0] === rowIndex && active[1] === colIndex}\n                    onActivate={setActive}\n                    onChange={onChange}\n                  />\n                ))}\n              </tr>\n            ) : (\n              <tr\n                key={row.permission.id}\n                role=\"row\"\n                className=\"border-b border-border last:border-0 hover:bg-muted/30\"\n              >\n                <th\n                  role=\"rowheader\"\n                  scope=\"row\"\n                  className={cn(\n                    \"px-3 py-2 text-start font-normal\",\n                    row.permission.group !== undefined && \"ps-6\",\n                  )}\n                >\n                  {row.permission.label}\n                  {row.permission.description ? (\n                    <span className=\"block text-xs text-muted-foreground\">\n                      {row.permission.description}\n                    </span>\n                  ) : null}\n                </th>\n                {roles.map((role, colIndex) => (\n                  <PermissionCell\n                    key={role.id}\n                    id={`${uid}-${role.id}-${row.permission.id}`}\n                    role={role}\n                    roles={roles}\n                    grants={grants}\n                    permission={row.permission}\n                    position={[rowIndex, colIndex]}\n                    active={active[0] === rowIndex && active[1] === colIndex}\n                    onActivate={setActive}\n                    onChange={onChange}\n                  />\n                ))}\n              </tr>\n            ),\n          )}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\ninterface CellProps {\n  role: Role;\n  roles: Role[];\n  grants: Grants;\n  position: [number, number];\n  active: boolean;\n  onActivate: (position: [number, number]) => void;\n  onChange?: (roleId: string, permissionIds: string[], granted: boolean) => void;\n}\n\nfunction PermissionCell({\n  id,\n  role,\n  roles,\n  grants,\n  permission,\n  position,\n  active,\n  onActivate,\n  onChange,\n}: CellProps & { id: string; permission: Permission }) {\n  const state = cellState(roles, grants, role, permission.id);\n  const fixed = state.fixed || !onChange;\n  const noteId = `${id}-note`;\n\n  const note = role.locked\n    ? `${role.label} has every permission; this cannot be changed.`\n    : state.inheritedFrom\n      ? `Inherited from ${state.inheritedFrom.label}.`\n      : null;\n\n  return (\n    <td\n      role=\"gridcell\"\n      data-slot=\"permission-cell\"\n      data-granted={state.granted || undefined}\n      data-inherited={state.inheritedFrom ? \"\" : undefined}\n      className=\"px-3 py-2 text-center align-middle\"\n    >\n      <Checkbox\n        id={id}\n        checked={state.granted}\n        aria-label={`${permission.label} for ${role.label}`}\n        aria-describedby={note ? noteId : undefined}\n        // Fixed cells stay focusable, so the arrow-key path and the tab order\n        // do not step over the one cell whose state needs explaining.\n        aria-disabled={fixed || undefined}\n        tabIndex={active ? 0 : -1}\n        data-row={position[0]}\n        data-col={position[1]}\n        className={cn(fixed && \"opacity-55\")}\n        onFocus={() => {\n          onActivate(position);\n        }}\n        onCheckedChange={(next) => {\n          if (fixed) return;\n          onChange?.(role.id, [permission.id], next === true);\n        }}\n      />\n      {state.inheritedFrom ? (\n        <span id={noteId} className=\"mt-0.5 block text-2xs text-muted-foreground\">\n          via {state.inheritedFrom.label}\n        </span>\n      ) : note ? (\n        <span id={noteId} className=\"sr-only\">\n          {note}\n        </span>\n      ) : null}\n    </td>\n  );\n}\n\nfunction GroupCell({\n  role,\n  roles,\n  grants,\n  group,\n  permissions,\n  position,\n  active,\n  onActivate,\n  onChange,\n}: CellProps & { group: string; permissions: Permission[] }) {\n  const ids = permissions.map((permission) => permission.id);\n  const state = groupState(roles, grants, role, ids);\n  // Only what can actually change here: inherited grants stay either way.\n  const changeable = permissions\n    .filter((permission) => !cellState(roles, grants, role, permission.id).fixed)\n    .map((permission) => permission.id);\n  const fixed = role.locked || !onChange || changeable.length === 0;\n\n  return (\n    <td\n      role=\"gridcell\"\n      data-slot=\"permission-group-cell\"\n      className=\"px-3 py-1.5 text-center align-middle\"\n    >\n      <Checkbox\n        checked={state === \"all\" ? true : state === \"some\" ? \"indeterminate\" : false}\n        aria-label={`All ${group} for ${role.label}`}\n        aria-disabled={fixed || undefined}\n        tabIndex={active ? 0 : -1}\n        data-row={position[0]}\n        data-col={position[1]}\n        className={cn(fixed && \"opacity-55\")}\n        onFocus={() => {\n          onActivate(position);\n        }}\n        onCheckedChange={(next) => {\n          if (fixed) return;\n          onChange?.(role.id, changeable, next === true);\n        }}\n      />\n    </td>\n  );\n}\n"],"mappings":";;;;;;;AAuEA,MAAM,SAA2C;CAC/C,SAAS,CAAC,IAAI,CAAC;CACf,WAAW,CAAC,GAAG,CAAC;CAChB,WAAW,CAAC,GAAG,EAAE;CACjB,YAAY,CAAC,GAAG,CAAC;AACnB;AAEA,SAAgB,iBAAiB,EAC/B,WACA,OACA,OACA,aACA,QACA,UACA,GAAG,SACqB;CACxB,MAAM,MAAM,MAAM;CAElB,MAAM,OAAO,cAET,iBAAiB,WAAW,CAAC,CAAC,SAAS,UAAuB,CAC5D,GAAI,MAAM,UAAU,KAAA,IAChB,CAAC;EAAE,MAAM;EAAkB,OAAO,MAAM;EAAO,aAAa,MAAM;CAAY,CAAC,IAC/E,CAAC,GACL,GAAG,MAAM,YAAY,KAAK,gBAAgB;EAAE,MAAM;EAAuB;CAAW,EAAE,CACxF,CAAC,GACH,CAAC,WAAW,CACd;CAGA,MAAM,CAAC,QAAQ,aAAa,SAA2B,CAAC,GAAG,CAAC,CAAC;CAE7D,MAAM,aAAa,UAA2C;EAC5D,MAAM,SAAS,MAAM;EACrB,MAAM,MAAM,OAAO,OAAO,QAAQ,GAAG;EACrC,MAAM,MAAM,OAAO,OAAO,QAAQ,GAAG;EACrC,IAAI,OAAO,MAAM,GAAG,KAAK,OAAO,MAAM,GAAG,GAAG;EAE5C,IAAI,OAAgC;EACpC,MAAM,QAAQ,OAAO,MAAM;EAC3B,IAAI,OACF,OAAO,CAAC,MAAM,MAAM,IAAI,MAAM,MAAM,EAAE;OACjC,IAAI,MAAM,QAAQ,QACvB,OAAO,MAAM,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;OAClC,IAAI,MAAM,QAAQ,OACvB,OAAO,MAAM,UAAU,CAAC,KAAK,SAAS,GAAG,MAAM,SAAS,CAAC,IAAI,CAAC,KAAK,MAAM,SAAS,CAAC;EAErF,IAAI,CAAC,MAAM;EAEX,MAAM,CAAC,SAAS,WAAW;EAC3B,IAAI,UAAU,KAAK,WAAW,KAAK,UAAU,UAAU,KAAK,WAAW,MAAM,QAAQ;GACnF,MAAM,eAAe;GACrB;EACF;EACA,MAAM,eAAe;EAIrB,MAHmB,cAAc,cAC/B,cAAc,OAAO,OAAO,EAAE,eAAe,OAAO,OAAO,EAAE,GAE5D,CAAC,EAAE,MAAM;CACd;CAEA,OACE,oBAAC,OAAD;EAAK,WAAU;EACb,UAAA,qBAAC,SAAD;GACE,aAAU;GACV,MAAK;GACL,cAAY;GACZ,iBAAe,WAAW,KAAA,IAAY;GAC3B;GACX,WAAW,GAAG,kCAAkC,SAAS;GACzD,GAAI;GAPN,UAAA,CASE,oBAAC,SAAD,EAAA,UACE,qBAAC,MAAD;IAAI,MAAK;IAAM,WAAU;IAAzB,UAAA,CACE,oBAAC,MAAD;KACE,MAAK;KACL,OAAM;KACN,WAAU;KACX,UAAA;IAEG,CAAA,GACH,MAAM,KAAK,SAAS;KACnB,MAAM,UAAU,aAAa,OAAO,QAAQ,MAAM,WAAW;KAC7D,OACE,qBAAC,MAAD;MAEE,MAAK;MACL,OAAM;MACN,WAAU;MAJZ,UAAA,CAMG,KAAK,OACN,oBAAC,QAAD;OAAM,WAAU;OACb,UAAA,KAAK,SACJ,gBAEA,qBAAA,UAAA,EAAA,UAAA;QACG,OAAO,OAAO;QAAE;QAAE,OAAO,YAAY,MAAM;QAC5C,oBAAC,QAAD;SAAM,WAAU;SAAU,UAAA;QAAc,CAAA;OACxC,EAAA,CAAA;MAEA,CAAA,CACJ;KAhBG,GAAA,KAAK,EAgBR;IAER,CAAC,CACC;GACC,CAAA,EAAA,CAAA,GACP,oBAAC,SAAD,EAAA,UACG,KAAK,KAAK,KAAK,aACd,IAAI,SAAS,UACX,qBAAC,MAAD;IAEE,MAAK;IACL,WAAU;IAHZ,UAAA,CAKE,qBAAC,MAAD;KACE,MAAK;KACL,OAAM;KACN,WAAU;KAHZ,UAAA,CAKG,IAAI,OACL,oBAAC,QAAD;MAAM,WAAU;MAAU,UAAA;KAAW,CAAA,CACnC;IACH,CAAA,GAAA,MAAM,KAAK,MAAM,aAChB,oBAAC,WAAD;KAEQ;KACC;KACC;KACR,OAAO,IAAI;KACX,aAAa,IAAI;KACjB,UAAU,CAAC,UAAU,QAAQ;KAC7B,QAAQ,OAAO,OAAO,YAAY,OAAO,OAAO;KAChD,YAAY;KACF;IACX,GAVM,KAAK,EAUX,CACF,CACC;GA1BG,GAAA,SAAS,IAAI,OA0BhB,IAEJ,qBAAC,MAAD;IAEE,MAAK;IACL,WAAU;IAHZ,UAAA,CAKE,qBAAC,MAAD;KACE,MAAK;KACL,OAAM;KACN,WAAW,GACT,oCACA,IAAI,WAAW,UAAU,KAAA,KAAa,MACxC;KANF,UAAA,CAQG,IAAI,WAAW,OACf,IAAI,WAAW,cACd,oBAAC,QAAD;MAAM,WAAU;MACb,UAAA,IAAI,WAAW;KACZ,CAAA,IACJ,IACF;IACH,CAAA,GAAA,MAAM,KAAK,MAAM,aAChB,oBAAC,gBAAD;KAEE,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,GAAG,IAAI,WAAW;KAClC;KACC;KACC;KACR,YAAY,IAAI;KAChB,UAAU,CAAC,UAAU,QAAQ;KAC7B,QAAQ,OAAO,OAAO,YAAY,OAAO,OAAO;KAChD,YAAY;KACF;IACX,GAVM,KAAK,EAUX,CACF,CACC;GAjCG,GAAA,IAAI,WAAW,EAiClB,CAER,EACK,CAAA,CACF;;CACJ,CAAA;AAET;AAYA,SAAS,eAAe,EACtB,IACA,MACA,OACA,QACA,YACA,UACA,QACA,YACA,YACqD;CACrD,MAAM,QAAQ,UAAU,OAAO,QAAQ,MAAM,WAAW,EAAE;CAC1D,MAAM,QAAQ,MAAM,SAAS,CAAC;CAC9B,MAAM,SAAS,GAAG,GAAG;CAErB,MAAM,OAAO,KAAK,SACd,GAAG,KAAK,MAAM,kDACd,MAAM,gBACJ,kBAAkB,MAAM,cAAc,MAAM,KAC5C;CAEN,OACE,qBAAC,MAAD;EACE,MAAK;EACL,aAAU;EACV,gBAAc,MAAM,WAAW,KAAA;EAC/B,kBAAgB,MAAM,gBAAgB,KAAK,KAAA;EAC3C,WAAU;EALZ,UAAA,CAOE,oBAAC,UAAD;GACM;GACJ,SAAS,MAAM;GACf,cAAY,GAAG,WAAW,MAAM,OAAO,KAAK;GAC5C,oBAAkB,OAAO,SAAS,KAAA;GAGlC,iBAAe,SAAS,KAAA;GACxB,UAAU,SAAS,IAAI;GACvB,YAAU,SAAS;GACnB,YAAU,SAAS;GACnB,WAAW,GAAG,SAAS,YAAY;GACnC,eAAe;IACb,WAAW,QAAQ;GACrB;GACA,kBAAkB,SAAS;IACzB,IAAI,OAAO;IACX,WAAW,KAAK,IAAI,CAAC,WAAW,EAAE,GAAG,SAAS,IAAI;GACpD;EACD,CAAA,GACA,MAAM,gBACL,qBAAC,QAAD;GAAM,IAAI;GAAQ,WAAU;GAA5B,UAAA,CAA0E,QACnE,MAAM,cAAc,KACrB;EACJ,CAAA,IAAA,OACF,oBAAC,QAAD;GAAM,IAAI;GAAQ,WAAU;GACzB,UAAA;EACG,CAAA,IACJ,IACF;;AAER;AAEA,SAAS,UAAU,EACjB,MACA,OACA,QACA,OACA,aACA,UACA,QACA,YACA,YAC2D;CAC3D,MAAM,MAAM,YAAY,KAAK,eAAe,WAAW,EAAE;CACzD,MAAM,QAAQ,WAAW,OAAO,QAAQ,MAAM,GAAG;CAEjD,MAAM,aAAa,YAChB,QAAQ,eAAe,CAAC,UAAU,OAAO,QAAQ,MAAM,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAC5E,KAAK,eAAe,WAAW,EAAE;CACpC,MAAM,QAAQ,KAAK,UAAU,CAAC,YAAY,WAAW,WAAW;CAEhE,OACE,oBAAC,MAAD;EACE,MAAK;EACL,aAAU;EACV,WAAU;EAEV,UAAA,oBAAC,UAAD;GACE,SAAS,UAAU,QAAQ,OAAO,UAAU,SAAS,kBAAkB;GACvE,cAAY,OAAO,MAAM,OAAO,KAAK;GACrC,iBAAe,SAAS,KAAA;GACxB,UAAU,SAAS,IAAI;GACvB,YAAU,SAAS;GACnB,YAAU,SAAS;GACnB,WAAW,GAAG,SAAS,YAAY;GACnC,eAAe;IACb,WAAW,QAAQ;GACrB;GACA,kBAAkB,SAAS;IACzB,IAAI,OAAO;IACX,WAAW,KAAK,IAAI,YAAY,SAAS,IAAI;GAC/C;EACD,CAAA;CACC,CAAA;AAER"}

package/dist/components/photo-stack/index.d.ts

@@ -0,0 +1,2 @@
+import { PhotoStack, PhotoStackPhoto, PhotoStackProps } from "./photo-stack.js";
+export { PhotoStack, type PhotoStackPhoto, type PhotoStackProps };

package/dist/components/photo-stack/index.js

@@ -0,0 +1,2 @@
+import { PhotoStack } from "./photo-stack.js";
+export { PhotoStack };

package/dist/components/photo-stack/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/photo-stack/meta.ts
+const meta = defineMeta({
+	name: "photo-stack",
+	title: "Photo Stack",
+	description: "A pile of photos: flick the top one away and it springs to the back, or tap, key or button through them.",
+	category: "display",
+	status: "beta",
+	dependencies: ["motion", "radix-ui"],
+	registryDependencies: ["button"],
+	files: ["photo-stack.tsx"],
+	a11y: "A carousel region (aria-roledescription=\"carousel\") of labelled slides; only the top photo is exposed, the rest are aria-hidden and inert. The top photo carries a real button (\"Show next photo\") so Enter and Space cycle it; arrow keys move either way (mirrored in right-to-left layouts); optional previous/next buttons give a visible pointer-free path; a polite status region announces the new photo. Dragging is a convenience on top of these and is switched off under reduced motion, where cards also move without animating."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/photo-stack/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/photo-stack/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"photo-stack\",\n  title: \"Photo Stack\",\n  description:\n    \"A pile of photos: flick the top one away and it springs to the back, or tap, key or button through them.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"motion\", \"radix-ui\"],\n  registryDependencies: [\"button\"],\n  files: [\"photo-stack.tsx\"],\n  a11y:\n    'A carousel region (aria-roledescription=\"carousel\") of labelled slides; only the top photo is exposed, the ' +\n    'rest are aria-hidden and inert. The top photo carries a real button (\"Show next photo\") so Enter and Space ' +\n    \"cycle it; arrow keys move either way (mirrored in right-to-left layouts); optional previous/next buttons \" +\n    \"give a visible pointer-free path; a polite status region announces the new photo. Dragging is a convenience \" +\n    \"on top of these and is switched off under reduced motion, where cards also move without animating.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU,UAAU;CACnC,sBAAsB,CAAC,QAAQ;CAC/B,OAAO,CAAC,iBAAiB;CACzB,MACE;AAKJ,CAAC"}

package/dist/components/photo-stack/photo-stack.d.ts

@@ -0,0 +1,30 @@
+import { ComponentPropsWithRef } from "react";
+import "motion/react";
+//#region src/components/photo-stack/photo-stack.d.ts
+interface PhotoStackPhoto {
+  id: string;
+  src: string;
+  /** Describes the photo. Also names the slide when there is no `name`. */
+  alt: string;
+  /** Caption title over the top photo. */
+  name?: string;
+  /** Caption line under the name. */
+  subtitle?: string;
+}
+interface PhotoStackProps extends ComponentPropsWithRef<"div"> {
+  /** The photos. The first starts on top. */
+  photos: PhotoStackPhoto[];
+  /** The photo on top (controlled). */
+  index?: number;
+  /** The photo on top at first (uncontrolled). */
+  defaultIndex?: number;
+  /** Called when another photo comes to the top. */
+  onIndexChange?: (index: number) => void;
+  /** Shows previous and next buttons under the stack. */
+  controls?: boolean;
+}
+/** A draggable pile of photos you flick, tap or key through. */
+declare function PhotoStack({ className, photos, index, defaultIndex, onIndexChange, controls, ...props }: PhotoStackProps): import("react").JSX.Element;
+//#endregion
+export { PhotoStack, PhotoStackPhoto, PhotoStackProps };
+//# sourceMappingURL=photo-stack.d.ts.map

package/dist/components/photo-stack/photo-stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"photo-stack.d.ts","names":[],"sources":["../../../src/components/photo-stack/photo-stack.tsx"],"mappings":";;;UA+BiB;EACf;EACA;;EAEA;;EAEA;;EAEA;;UAuCe,wBAAwB;;EAEvC,QAAQ;;EAER;;EAEA;;EAEA,iBAAiB;;EAEjB;;;iBAIc,aACd,WACA,QACA,OACA,cACA,eACA,aACG,SACF,kCAAe,IAAA"}