@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/book/book.js

@@ -0,0 +1,183 @@
+import "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Slot } from "radix-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/book/book.tsx
+/** Spine binding: two soft light bands over a darker crease. Tokens only. */
+const SPINE_SHADING = "linear-gradient(90deg, transparent 0%, transparent 12%, color-mix(in oklab, var(--color-card) 25%, transparent) 29.25%, transparent 50.5%, transparent 75.25%, color-mix(in oklab, var(--color-card) 25%, transparent) 91%, transparent 100%), linear-gradient(90deg, color-mix(in oklab, var(--color-overlay) 6%, transparent) 0%, color-mix(in oklab, var(--color-overlay) 18%, transparent) 12%, transparent 30%, color-mix(in oklab, var(--color-overlay) 4%, transparent) 50%, color-mix(in oklab, var(--color-overlay) 36%, transparent) 73.5%, color-mix(in oklab, var(--color-overlay) 70%, transparent) 75.25%, color-mix(in oklab, var(--color-overlay) 26%, transparent) 85.25%, transparent 100%)";
+const PAGE_EDGES = "linear-gradient(90deg, color-mix(in oklab, var(--color-foreground) 12%, var(--color-card)) 0%, transparent 70%), linear-gradient(var(--color-card), color-mix(in oklab, var(--color-foreground) 3%, var(--color-card)))";
+const DEPTH = "29cqw";
+const RADIUS = "6px 4px 4px 6px";
+const bookVariants = cva(cn("[container-type:inline-size] relative block w-fit [transform-style:preserve-3d]", "transition-transform duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]"), {
+	variants: { effect: {
+		/** Decoration only, so it waits for motion to be welcome. */
+		tilt: cn("motion-safe:group-hover/book:[transform:rotateY(-20deg)_scale(1.066)_translateX(-8px)]", "motion-safe:group-focus-within/book:[transform:rotateY(-20deg)_scale(1.066)_translateX(-8px)]"),
+		/** Turns the book a little so the opening cover has room. */
+		open: cn("group-hover/book:[transform:rotateY(-12deg)_translateX(10%)]", "group-focus-within/book:[transform:rotateY(-12deg)_translateX(10%)]"),
+		none: ""
+	} },
+	defaultVariants: { effect: "tilt" }
+});
+const OPEN_COVER = cn("group-hover/book:[transform:rotateY(-115deg)]", "group-focus-within/book:[transform:rotateY(-115deg)]");
+const bookCoverVariants = cva("absolute inset-y-0 start-0 flex flex-col overflow-hidden shadow-md [backface-visibility:hidden]", {
+	variants: { variant: {
+		/** A colour band with an optional illustration over a plain body. */
+		stripe: "bg-card",
+		/** The whole cover in the book's colour. */
+		simple: "bg-(--book-color)"
+	} },
+	defaultVariants: { variant: "stripe" }
+});
+/** A 3D book cover that tilts, or opens, on hover and keyboard focus. */
+function Book({ className, title, variant = "stripe", effect = "tilt", color, textColor, width = 196, illustration, logo, inside, asChild = false, style, children, ...props }) {
+	const Comp = asChild ? Slot.Root : "div";
+	const vars = {
+		"--book-color": color ?? "var(--color-primary)",
+		"--book-text": textColor ?? (variant === "simple" ? "var(--color-primary-foreground)" : "var(--color-foreground)"),
+		"--book-width": `${String(width)}px`,
+		...style
+	};
+	return /* @__PURE__ */ jsxs(Comp, {
+		"data-slot": "book",
+		"data-effect": effect,
+		className: cn("group/book inline-block w-fit rounded-md [perspective:900px]", asChild && "outline-none focus-visible:ring-2 focus-visible:ring-ring/55 focus-visible:ring-offset-2 focus-visible:ring-offset-background", className),
+		style: vars,
+		...props,
+		children: [/* @__PURE__ */ jsx(Slot.Slottable, { children }), /* @__PURE__ */ jsxs("span", {
+			"data-slot": "book-body",
+			className: bookVariants({ effect }),
+			style: {
+				aspectRatio: "49 / 60",
+				minWidth: "var(--book-width)"
+			},
+			children: [
+				effect === "open" ? /* @__PURE__ */ jsx("span", {
+					"data-slot": "book-inside",
+					className: "absolute inset-y-0 start-0 flex w-(--book-width) flex-col overflow-hidden bg-card p-[8%] text-card-foreground shadow-sm",
+					style: {
+						borderRadius: RADIUS,
+						transform: "translateZ(-1px)"
+					},
+					children: inside
+				}) : null,
+				/* @__PURE__ */ jsxs("span", {
+					"data-slot": "book-cover",
+					className: cn("absolute inset-y-0 start-0 block w-(--book-width) [transform-style:preserve-3d]", "transition-transform duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]", effect === "open" && OPEN_COVER),
+					style: {
+						transformOrigin: "0 50%",
+						borderRadius: RADIUS
+					},
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: cn(bookCoverVariants({ variant }), "w-full"),
+						style: { borderRadius: RADIUS },
+						children: [variant === "stripe" ? /* @__PURE__ */ jsx(StripeCover, {
+							title,
+							illustration,
+							logo
+						}) : /* @__PURE__ */ jsx(SimpleCover, {
+							title,
+							logo
+						}), /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "pointer-events-none absolute inset-0 border border-border",
+							style: { borderRadius: "inherit" }
+						})]
+					}), effect === "open" ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "absolute inset-0 bg-(--book-color) [backface-visibility:hidden]",
+						style: {
+							borderRadius: RADIUS,
+							transform: "rotateY(180deg)"
+						},
+						children: /* @__PURE__ */ jsx("span", {
+							className: "absolute inset-0 opacity-30",
+							style: { background: SPINE_SHADING }
+						})
+					}) : null]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "book-pages",
+					className: "pointer-events-none absolute top-[3px] block h-[calc(100%-6px)]",
+					style: {
+						background: PAGE_EDGES,
+						width: `calc(${DEPTH} - 2px)`,
+						transform: `translateX(calc(var(--book-width) - ${DEPTH} / 2 - 3px)) rotateY(90deg) translateX(calc(${DEPTH} / 2))`
+					}
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "book-back",
+					className: cn("pointer-events-none absolute inset-y-0 start-0 block w-(--book-width)", variant === "simple" ? "bg-(--book-color)" : "bg-card"),
+					style: {
+						borderRadius: RADIUS,
+						transform: `translateZ(calc(-1 * ${DEPTH}))`
+					}
+				})
+			]
+		})]
+	});
+}
+function CoverTitle({ title, size }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "book-title",
+		className: "leading-[1.25em] font-semibold tracking-[-0.02em] text-balance text-(--book-text)",
+		style: { fontSize: size },
+		children: title
+	});
+}
+function StripeCover({ title, illustration, logo }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+		className: "relative flex w-full flex-1 overflow-hidden bg-(--book-color)",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "flex-1 *:size-full *:object-cover",
+			children: illustration
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "absolute inset-0 mix-blend-overlay",
+			style: { background: SPINE_SHADING }
+		})]
+	}), /* @__PURE__ */ jsxs("span", {
+		className: "flex",
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "min-w-[8.2%] opacity-20",
+			style: { background: SPINE_SHADING }
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "[container-type:inline-size] flex w-full flex-col justify-between gap-[12cqw]",
+			style: { padding: "6.1%" },
+			children: [/* @__PURE__ */ jsx(CoverTitle, {
+				title,
+				size: "10.5cqw"
+			}), logo ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "book-logo",
+				children: logo
+			}) : null]
+		})]
+	})] });
+}
+function SimpleCover({ title, logo }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex size-full",
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "min-w-[8.2%] mix-blend-overlay",
+			style: { background: SPINE_SHADING }
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "[container-type:inline-size] flex w-full flex-col justify-between gap-[8cqw]",
+			style: { padding: "6.1%" },
+			children: [/* @__PURE__ */ jsx(CoverTitle, {
+				title,
+				size: "12cqw"
+			}), logo ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "book-logo",
+				children: logo
+			}) : null]
+		})]
+	});
+}
+//#endregion
+export { Book, bookCoverVariants, bookVariants };
+
+//# sourceMappingURL=book.js.map

package/dist/components/book/book.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"book.js","names":[],"sources":["../../../src/components/book/book.tsx"],"sourcesContent":["// Ported from SmoothUI Book (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A 3D book drawn entirely in CSS: a front cover, a block of page edges turned\n * 90° along the fore-edge, and a back cover pushed back by the book's depth.\n * Hover or keyboard focus tilts it (`effect=\"tilt\"`, the source's behaviour) or\n * swings the cover open on its spine to show `inside` (`effect=\"open\"`).\n *\n * No JavaScript: the source read useReducedMotion only to drop the hover\n * transition, which the motion scale and a `motion-safe:` variant do here.\n * The tilt is decoration, so under reduced motion it does not happen at all;\n * opening reveals content, so it still happens — instantly.\n *\n * The book is a physical object with its spine on the left, like the source,\n * so its transforms are physical rather than logical.\n */\n\n/** Spine binding: two soft light bands over a darker crease. Tokens only. */\nconst SPINE_SHADING =\n  \"linear-gradient(90deg, transparent 0%, transparent 12%, color-mix(in oklab, var(--color-card) 25%, transparent) 29.25%, transparent 50.5%, transparent 75.25%, color-mix(in oklab, var(--color-card) 25%, transparent) 91%, transparent 100%), \" +\n  \"linear-gradient(90deg, color-mix(in oklab, var(--color-overlay) 6%, transparent) 0%, color-mix(in oklab, var(--color-overlay) 18%, transparent) 12%, transparent 30%, color-mix(in oklab, var(--color-overlay) 4%, transparent) 50%, color-mix(in oklab, var(--color-overlay) 36%, transparent) 73.5%, color-mix(in oklab, var(--color-overlay) 70%, transparent) 75.25%, color-mix(in oklab, var(--color-overlay) 26%, transparent) 85.25%, transparent 100%)\";\n\nconst PAGE_EDGES =\n  \"linear-gradient(90deg, color-mix(in oklab, var(--color-foreground) 12%, var(--color-card)) 0%, transparent 70%), \" +\n  \"linear-gradient(var(--color-card), color-mix(in oklab, var(--color-foreground) 3%, var(--color-card)))\";\n\nconst DEPTH = \"29cqw\";\nconst RADIUS = \"6px 4px 4px 6px\";\n\n/*\n * What hover and focus do to the book body. Written out in full, per state,\n * because Tailwind only generates classes it can read literally.\n */\nconst bookVariants = cva(\n  cn(\n    \"[container-type:inline-size] relative block w-fit [transform-style:preserve-3d]\",\n    \"transition-transform duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n  ),\n  {\n    variants: {\n      effect: {\n        /** Decoration only, so it waits for motion to be welcome. */\n        tilt: cn(\n          \"motion-safe:group-hover/book:[transform:rotateY(-20deg)_scale(1.066)_translateX(-8px)]\",\n          \"motion-safe:group-focus-within/book:[transform:rotateY(-20deg)_scale(1.066)_translateX(-8px)]\",\n        ),\n        /** Turns the book a little so the opening cover has room. */\n        open: cn(\n          \"group-hover/book:[transform:rotateY(-12deg)_translateX(10%)]\",\n          \"group-focus-within/book:[transform:rotateY(-12deg)_translateX(10%)]\",\n        ),\n        none: \"\",\n      },\n    },\n    defaultVariants: {\n      effect: \"tilt\",\n    },\n  },\n);\n\nconst OPEN_COVER = cn(\n  \"group-hover/book:[transform:rotateY(-115deg)]\",\n  \"group-focus-within/book:[transform:rotateY(-115deg)]\",\n);\n\nconst bookCoverVariants = cva(\n  \"absolute inset-y-0 start-0 flex flex-col overflow-hidden shadow-md [backface-visibility:hidden]\",\n  {\n    variants: {\n      variant: {\n        /** A colour band with an optional illustration over a plain body. */\n        stripe: \"bg-card\",\n        /** The whole cover in the book's colour. */\n        simple: \"bg-(--book-color)\",\n      },\n    },\n    defaultVariants: {\n      variant: \"stripe\",\n    },\n  },\n);\n\nexport interface BookProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"title\">,\n    VariantProps<typeof bookVariants>,\n    VariantProps<typeof bookCoverVariants> {\n  /** The title on the cover. */\n  title: ReactNode;\n  /** Cover colour. Any CSS colour; defaults to the primary token. */\n  color?: string;\n  /** Title colour. Defaults to the foreground token (stripe) or primary-foreground (simple). */\n  textColor?: string;\n  /** Width in pixels; the height follows at 60:49. */\n  width?: number;\n  /** Artwork for the colour band of the `stripe` variant. */\n  illustration?: ReactNode;\n  /** A mark at the foot of the cover. */\n  logo?: ReactNode;\n  /** What the open cover reveals, for `effect=\"open\"`. */\n  inside?: ReactNode;\n  /**\n   * Renders the child element as the book — typically a link. The book then\n   * takes keyboard focus itself, and focus opens or tilts it like hover does.\n   */\n  asChild?: boolean;\n}\n\n/** A 3D book cover that tilts, or opens, on hover and keyboard focus. */\nexport function Book({\n  className,\n  title,\n  variant = \"stripe\",\n  effect = \"tilt\",\n  color,\n  textColor,\n  width = 196,\n  illustration,\n  logo,\n  inside,\n  asChild = false,\n  style,\n  children,\n  ...props\n}: BookProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  const vars = {\n    \"--book-color\": color ?? \"var(--color-primary)\",\n    \"--book-text\":\n      textColor ??\n      (variant === \"simple\" ? \"var(--color-primary-foreground)\" : \"var(--color-foreground)\"),\n    \"--book-width\": `${String(width)}px`,\n    ...style,\n  } as CSSProperties;\n\n  return (\n    <Comp\n      data-slot=\"book\"\n      data-effect={effect}\n      className={cn(\n        \"group/book inline-block w-fit rounded-md [perspective:900px]\",\n        asChild && focusRing,\n        className,\n      )}\n      style={vars}\n      {...props}\n    >\n      <Slot.Slottable>{children}</Slot.Slottable>\n      <span\n        data-slot=\"book-body\"\n        className={bookVariants({ effect })}\n        style={{ aspectRatio: \"49 / 60\", minWidth: \"var(--book-width)\" }}\n      >\n        {effect === \"open\" ? (\n          <span\n            data-slot=\"book-inside\"\n            className=\"absolute inset-y-0 start-0 flex w-(--book-width) flex-col overflow-hidden bg-card p-[8%] text-card-foreground shadow-sm\"\n            style={{ borderRadius: RADIUS, transform: \"translateZ(-1px)\" }}\n          >\n            {inside}\n          </span>\n        ) : null}\n\n        <span\n          data-slot=\"book-cover\"\n          className={cn(\n            \"absolute inset-y-0 start-0 block w-(--book-width) [transform-style:preserve-3d]\",\n            \"transition-transform duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]\",\n            effect === \"open\" && OPEN_COVER,\n          )}\n          style={{ transformOrigin: \"0 50%\", borderRadius: RADIUS }}\n        >\n          <span\n            className={cn(bookCoverVariants({ variant }), \"w-full\")}\n            style={{ borderRadius: RADIUS }}\n          >\n            {variant === \"stripe\" ? (\n              <StripeCover title={title} illustration={illustration} logo={logo} />\n            ) : (\n              <SimpleCover title={title} logo={logo} />\n            )}\n            <span\n              aria-hidden=\"true\"\n              className=\"pointer-events-none absolute inset-0 border border-border\"\n              style={{ borderRadius: \"inherit\" }}\n            />\n          </span>\n          {effect === \"open\" ? (\n            <span\n              aria-hidden=\"true\"\n              className=\"absolute inset-0 bg-(--book-color) [backface-visibility:hidden]\"\n              style={{ borderRadius: RADIUS, transform: \"rotateY(180deg)\" }}\n            >\n              <span\n                className=\"absolute inset-0 opacity-30\"\n                style={{ background: SPINE_SHADING }}\n              />\n            </span>\n          ) : null}\n        </span>\n\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"book-pages\"\n          className=\"pointer-events-none absolute top-[3px] block h-[calc(100%-6px)]\"\n          style={{\n            background: PAGE_EDGES,\n            width: `calc(${DEPTH} - 2px)`,\n            transform: `translateX(calc(var(--book-width) - ${DEPTH} / 2 - 3px)) rotateY(90deg) translateX(calc(${DEPTH} / 2))`,\n          }}\n        />\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"book-back\"\n          className={cn(\n            \"pointer-events-none absolute inset-y-0 start-0 block w-(--book-width)\",\n            variant === \"simple\" ? \"bg-(--book-color)\" : \"bg-card\",\n          )}\n          style={{ borderRadius: RADIUS, transform: `translateZ(calc(-1 * ${DEPTH}))` }}\n        />\n      </span>\n    </Comp>\n  );\n}\n\nfunction CoverTitle({ title, size }: { title: ReactNode; size: string }) {\n  return (\n    <span\n      data-slot=\"book-title\"\n      className=\"leading-[1.25em] font-semibold tracking-[-0.02em] text-balance text-(--book-text)\"\n      style={{ fontSize: size }}\n    >\n      {title}\n    </span>\n  );\n}\n\nfunction StripeCover({\n  title,\n  illustration,\n  logo,\n}: {\n  title: ReactNode;\n  illustration?: ReactNode;\n  logo?: ReactNode;\n}) {\n  return (\n    <>\n      <span className=\"relative flex w-full flex-1 overflow-hidden bg-(--book-color)\">\n        <span className=\"flex-1 *:size-full *:object-cover\">{illustration}</span>\n        <span\n          aria-hidden=\"true\"\n          className=\"absolute inset-0 mix-blend-overlay\"\n          style={{ background: SPINE_SHADING }}\n        />\n      </span>\n      <span className=\"flex\">\n        <span\n          aria-hidden=\"true\"\n          className=\"min-w-[8.2%] opacity-20\"\n          style={{ background: SPINE_SHADING }}\n        />\n        <span\n          className=\"[container-type:inline-size] flex w-full flex-col justify-between gap-[12cqw]\"\n          style={{ padding: \"6.1%\" }}\n        >\n          <CoverTitle title={title} size=\"10.5cqw\" />\n          {logo ? <span data-slot=\"book-logo\">{logo}</span> : null}\n        </span>\n      </span>\n    </>\n  );\n}\n\nfunction SimpleCover({ title, logo }: { title: ReactNode; logo?: ReactNode }) {\n  return (\n    <span className=\"flex size-full\">\n      <span\n        aria-hidden=\"true\"\n        className=\"min-w-[8.2%] mix-blend-overlay\"\n        style={{ background: SPINE_SHADING }}\n      />\n      <span\n        className=\"[container-type:inline-size] flex w-full flex-col justify-between gap-[8cqw]\"\n        style={{ padding: \"6.1%\" }}\n      >\n        <CoverTitle title={title} size=\"12cqw\" />\n        {logo ? <span data-slot=\"book-logo\">{logo}</span> : null}\n      </span>\n    </span>\n  );\n}\n\nexport { bookCoverVariants, bookVariants };\n"],"mappings":"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"}

package/dist/components/book/index.d.ts

@@ -0,0 +1,2 @@
+import { Book, BookProps, bookCoverVariants, bookVariants } from "./book.js";
+export { Book, type BookProps, bookCoverVariants, bookVariants };

package/dist/components/book/index.js

@@ -0,0 +1,2 @@
+import { Book, bookCoverVariants, bookVariants } from "./book.js";
+export { Book, bookCoverVariants, bookVariants };

package/dist/components/book/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/book/meta.ts
+const meta = defineMeta({
+	name: "book",
+	title: "Book",
+	description: "A 3D book cover drawn in CSS that tilts, or swings open to reveal its first page, on hover and keyboard focus.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority", "radix-ui"],
+	registryDependencies: [],
+	files: ["book.tsx"],
+	a11y: "The title is real text; the spine shading, page edges, back cover and inside of the cover are aria-hidden. Keyboard focus anywhere in the book (or on the book itself, when it is rendered as a link with asChild) does what hover does, and the link gets the shared focus ring. The tilt is decoration and does not happen under prefers-reduced-motion; the open effect still reveals its content there, instantly."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/book/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/book/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"book\",\n  title: \"Book\",\n  description:\n    \"A 3D book cover drawn in CSS that tilts, or swings open to reveal its first page, on hover and keyboard focus.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"book.tsx\"],\n  a11y:\n    \"The title is real text; the spine shading, page edges, back cover and inside of the cover are aria-hidden. \" +\n    \"Keyboard focus anywhere in the book (or on the book itself, when it is rendered as a link with asChild) \" +\n    \"does what hover does, and the link gets the shared focus ring. The tilt is decoration and does not happen \" +\n    \"under prefers-reduced-motion; the open effect still reveals its content there, instantly.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,UAAU;CAClB,MACE;AAIJ,CAAC"}

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -18,7 +18,15 @@ import { ComponentPropsWithRef } from "react";
  * the design leaking into the content.
  */
 declare function Breadcrumb({ className, ...props }: ComponentPropsWithRef<"nav">): import("react").JSX.Element;
-declare function BreadcrumbList({ className, ...props }: ComponentPropsWithRef<"ol">): import("react").JSX.Element;
+interface BreadcrumbListProps extends ComponentPropsWithRef<"ol"> {
+  /**
+   * Brings the trail in one entry after another when it mounts, sliding from
+   * the inline start. Off by default: a breadcrumb is read on every page, and
+   * motion there gets old fast. Stops under reduced motion.
+   */
+  animated?: boolean;
+}
+declare function BreadcrumbList({ className, animated, ...props }: BreadcrumbListProps): import("react").JSX.Element;
 declare function BreadcrumbItem({ className, ...props }: ComponentPropsWithRef<"li">): import("react").JSX.Element;
 interface BreadcrumbLinkProps extends ComponentPropsWithRef<"a"> {
   /** Render the child as the link, for a router's own component. */
@@ -48,5 +56,5 @@ declare function BreadcrumbSeparator({ className, children, ...props }: Componen
  */
 declare function BreadcrumbEllipsis({ className, ...props }: ComponentPropsWithRef<"span">): import("react").JSX.Element;
 //#endregion
-export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbList, BreadcrumbListProps, BreadcrumbPage, BreadcrumbSeparator };
 //# sourceMappingURL=breadcrumb.d.ts.map

package/dist/components/breadcrumb/breadcrumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.d.ts","names":[],"sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;iBAwBgB,aAAa,cAAc,SAAS,+CAA4B,IAAA;iBAahE,iBAAiB,cAAc,SAAS,8CAA2B,IAAA;iBAanE,iBAAiB,cAAc,SAAS,8CAA2B,IAAA;UAUlE,4BAA4B;;EAE3C;;iBAGc,iBAAiB,WAAW,YAAoB,SAAS,sCAAmB,IAAA;;;;;;;iBAuB5E,iBAAiB,cAAc,SAAS,gDAA6B,IAAA;;;;;;;;iBAkBrE,sBACd,WACA,aACG,SACF,8CAA2B,IAAA;;;;;;;iBA8Bd,qBAAqB,cAAc,SAAS,gDAA6B,IAAA"}
+{"version":3,"file":"breadcrumb.d.ts","names":[],"sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;iBAyBgB,aAAa,cAAc,SAAS,+CAA4B,IAAA;UAoC/D,4BAA4B;;;;;;EAM3C;;iBAGc,iBAAiB,WAAW,aAAqB,SAAS,sCAAmB,IAAA;iBAqB7E,iBAAiB,cAAc,SAAS,8CAA2B,IAAA;UAUlE,4BAA4B;;EAE3C;;iBAGc,iBAAiB,WAAW,YAAoB,SAAS,sCAAmB,IAAA;;;;;;;iBAuB5E,iBAAiB,cAAc,SAAS,gDAA6B,IAAA;;;;;;;;iBAkBrE,sBACd,WACA,aACG,SACF,8CAA2B,IAAA;;;;;;;iBA8Bd,qBAAqB,cAAc,SAAS,gDAA6B,IAAA"}

package/dist/components/breadcrumb/breadcrumb.js

@@ -1,7 +1,7 @@
 import { focusRing } from "../../lib/styles.js";
 import { cn } from "../../lib/utils.js";
 import { Slot } from "radix-ui";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/breadcrumb/breadcrumb.tsx
 /**
 * Where this page sits in the hierarchy.
@@ -28,12 +28,29 @@ function Breadcrumb({ className, ...props }) {
 		...props
 	});
 }
-function BreadcrumbList({ className, ...props }) {
-	return /* @__PURE__ */ jsx("ol", {
+const PREFIX = "dowel-breadcrumb";
+/** Each entry — item or separator — arrives 40ms after the one before it. */
+const STAGGER_STEP_MS = 40;
+const ANIMATED_ENTRY = "[data-slot=breadcrumb-list][data-animated]>li";
+const STYLES = `
+@keyframes ${PREFIX}-in{from{opacity:0;transform:translateX(calc(-4px * var(--${PREFIX}-inline,1)))}}
+[dir=rtl] [data-slot=breadcrumb-list],[data-slot=breadcrumb-list][dir=rtl]{--${PREFIX}-inline:-1}
+[data-slot=breadcrumb-list]:dir(rtl){--${PREFIX}-inline:-1}
+${ANIMATED_ENTRY}{animation:${PREFIX}-in calc(250ms * var(--motion-scale)) var(--ease-out-quint) both}
+${Array.from({ length: 11 }, (_, i) => `${ANIMATED_ENTRY}:nth-child(${String(i + 2)}){animation-delay:calc(${String((i + 1) * STAGGER_STEP_MS)}ms * var(--motion-scale))}`).join("\n")}
+${ANIMATED_ENTRY}:nth-child(n+${String(13)}){animation-delay:calc(${String(480)}ms * var(--motion-scale))}
+`;
+function BreadcrumbList({ className, animated = false, ...props }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [animated ? /* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	}) : null, /* @__PURE__ */ jsx("ol", {
 		"data-slot": "breadcrumb-list",
+		"data-animated": animated || void 0,
 		className: cn("flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground", className),
 		...props
-	});
+	})] });
 }
 function BreadcrumbItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx("li", {

package/dist/components/breadcrumb/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","names":[],"sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { Slot } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRing, mirrorForDirection } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Where this page sits in the hierarchy.\n *\n * Three things separate a breadcrumb that works from one that only looks like\n * one, and all three are about the last item.\n *\n * It is not a link. A link to the page you are already on is a control that\n * does nothing, and in a screen reader's list of links it is indistinguishable\n * from the ones that go somewhere.\n *\n * It carries `aria-current=\"page\"`. Bolding it says \"you are here\" to people\n * who can see it and to nobody else.\n *\n * The separators are hidden. A slash between every item is read aloud as\n * \"slash\" — \"Home slash Projects slash Settings\" — which is the punctuation of\n * the design leaking into the content.\n */\n\nexport function Breadcrumb({ className, ...props }: ComponentPropsWithRef<\"nav\">) {\n  return (\n    <nav\n      // Named, because a page can have more than one navigation landmark and\n      // \"navigation\" on its own does not say which this is.\n      aria-label=\"Breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(\"min-w-0\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function BreadcrumbList({ className, ...props }: ComponentPropsWithRef<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function BreadcrumbItem({ className, ...props }: ComponentPropsWithRef<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface BreadcrumbLinkProps extends ComponentPropsWithRef<\"a\"> {\n  /** Render the child as the link, for a router's own component. */\n  asChild?: boolean;\n}\n\nexport function BreadcrumbLink({ className, asChild = false, ...props }: BreadcrumbLinkProps) {\n  const Component = asChild ? Slot.Root : \"a\";\n\n  return (\n    <Component\n      data-slot=\"breadcrumb-link\"\n      className={cn(\n        \"rounded-sm transition-colors duration-[var(--duration-fast)]\",\n        \"hover:text-foreground\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * The page you are on.\n *\n * A span, not a link: there is nowhere to go. `aria-current=\"page\"` is what\n * says \"you are here\" to anything that is not looking at the font weight.\n */\nexport function BreadcrumbPage({ className, ...props }: ComponentPropsWithRef<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      aria-current=\"page\"\n      className={cn(\"font-medium text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * The mark between items.\n *\n * Hidden from assistive technology and given no accessible name: the list\n * structure already conveys the sequence, and reading \"slash\" between every\n * item is the design's punctuation leaking into the content.\n */\nexport function BreadcrumbSeparator({\n  className,\n  children,\n  ...props\n}: ComponentPropsWithRef<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" className={mirrorForDirection}>\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      )}\n    </li>\n  );\n}\n\n/**\n * Stands in for the middle of a long trail.\n *\n * Named rather than hidden, because unlike a separator it is *content*: it\n * says levels have been left out. A bare \"…\" announces as nothing at all.\n */\nexport function BreadcrumbEllipsis({ className, ...props }: ComponentPropsWithRef<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      className={cn(\"flex size-5 items-center justify-center\", className)}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden 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\">Intermediate levels</span>\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwBA,SAAgB,WAAW,EAAE,WAAW,GAAG,SAAuC;CAChF,OACE,oBAAC,OAAD;EAGE,cAAW;EACX,aAAU;EACV,WAAW,GAAG,WAAW,SAAS;EAClC,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAAsC;CACnF,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,qEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAAsC;CACnF,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;AAOA,SAAgB,eAAe,EAAE,WAAW,UAAU,OAAO,GAAG,SAA8B;CAC5F,MAAM,YAAY,UAAU,KAAK,OAAO;CAExC,OACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GACT,gEACA,yBACA,WACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;;;AAQA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAAwC;CACrF,OACE,oBAAC,QAAD;EACE,aAAU;EACV,gBAAa;EACb,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;;;;;;;;AASA,SAAgB,oBAAoB,EAClC,WACA,UACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,MAAD;EACE,aAAU;EACV,MAAK;EACL,eAAA;EACA,WAAW,GAAG,oBAAoB,SAAS;EAC3C,GAAI;EAEH,UAAA,YACC,oBAAC,OAAD;GAAK,SAAQ;GAAY,MAAK;GAAO,WAAA;GACnC,UAAA,oBAAC,QAAD;IACE,GAAE;IACF,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;GAChB,CAAA;EACE,CAAA;CAEL,CAAA;AAER;;;;;;;AAQA,SAAgB,mBAAmB,EAAE,WAAW,GAAG,SAAwC;CACzF,OACE,qBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;EAJN,UAAA,CAME,qBAAC,OAAD;GAAK,SAAQ;GAAY,MAAK;GAAO,eAAA;GAAY,WAAU;GAA3D,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;EAAyB,CAAA,CAC/C;;AAEV"}
+{"version":3,"file":"breadcrumb.js","names":[],"sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["// Motion from SmoothUI Breadcrumb (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { Slot } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRing, mirrorForDirection } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Where this page sits in the hierarchy.\n *\n * Three things separate a breadcrumb that works from one that only looks like\n * one, and all three are about the last item.\n *\n * It is not a link. A link to the page you are already on is a control that\n * does nothing, and in a screen reader's list of links it is indistinguishable\n * from the ones that go somewhere.\n *\n * It carries `aria-current=\"page\"`. Bolding it says \"you are here\" to people\n * who can see it and to nobody else.\n *\n * The separators are hidden. A slash between every item is read aloud as\n * \"slash\" — \"Home slash Projects slash Settings\" — which is the punctuation of\n * the design leaking into the content.\n */\n\nexport function Breadcrumb({ className, ...props }: ComponentPropsWithRef<\"nav\">) {\n  return (\n    <nav\n      // Named, because a page can have more than one navigation landmark and\n      // \"navigation\" on its own does not say which this is.\n      aria-label=\"Breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(\"min-w-0\", className)}\n      {...props}\n    />\n  );\n}\n\nconst PREFIX = \"dowel-breadcrumb\";\n\n/** Each entry — item or separator — arrives 40ms after the one before it. */\nconst STAGGER_STEP_MS = 40;\nconst STAGGERED = 12;\n\nconst ANIMATED_ENTRY = \"[data-slot=breadcrumb-list][data-animated]>li\";\n\n/* Entries slide in from the inline start, so the trail reads in along the\n * direction it is read in. `[dir=rtl]` covers browsers without :dir(). */\nconst STYLES = `\n@keyframes ${PREFIX}-in{from{opacity:0;transform:translateX(calc(-4px * var(--${PREFIX}-inline,1)))}}\n[dir=rtl] [data-slot=breadcrumb-list],[data-slot=breadcrumb-list][dir=rtl]{--${PREFIX}-inline:-1}\n[data-slot=breadcrumb-list]:dir(rtl){--${PREFIX}-inline:-1}\n${ANIMATED_ENTRY}{animation:${PREFIX}-in calc(250ms * var(--motion-scale)) var(--ease-out-quint) both}\n${Array.from(\n  { length: STAGGERED - 1 },\n  (_, i) =>\n    `${ANIMATED_ENTRY}:nth-child(${String(i + 2)}){animation-delay:calc(${String((i + 1) * STAGGER_STEP_MS)}ms * var(--motion-scale))}`,\n).join(\"\\n\")}\n${ANIMATED_ENTRY}:nth-child(n+${String(STAGGERED + 1)}){animation-delay:calc(${String(STAGGERED * STAGGER_STEP_MS)}ms * var(--motion-scale))}\n`;\n\nexport interface BreadcrumbListProps extends ComponentPropsWithRef<\"ol\"> {\n  /**\n   * Brings the trail in one entry after another when it mounts, sliding from\n   * the inline start. Off by default: a breadcrumb is read on every page, and\n   * motion there gets old fast. Stops under reduced motion.\n   */\n  animated?: boolean;\n}\n\nexport function BreadcrumbList({ className, animated = false, ...props }: BreadcrumbListProps) {\n  return (\n    <>\n      {animated ? (\n        <style href={PREFIX} precedence=\"dowel\">\n          {STYLES}\n        </style>\n      ) : null}\n      <ol\n        data-slot=\"breadcrumb-list\"\n        data-animated={animated || undefined}\n        className={cn(\n          \"flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground\",\n          className,\n        )}\n        {...props}\n      />\n    </>\n  );\n}\n\nexport function BreadcrumbItem({ className, ...props }: ComponentPropsWithRef<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface BreadcrumbLinkProps extends ComponentPropsWithRef<\"a\"> {\n  /** Render the child as the link, for a router's own component. */\n  asChild?: boolean;\n}\n\nexport function BreadcrumbLink({ className, asChild = false, ...props }: BreadcrumbLinkProps) {\n  const Component = asChild ? Slot.Root : \"a\";\n\n  return (\n    <Component\n      data-slot=\"breadcrumb-link\"\n      className={cn(\n        \"rounded-sm transition-colors duration-[var(--duration-fast)]\",\n        \"hover:text-foreground\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * The page you are on.\n *\n * A span, not a link: there is nowhere to go. `aria-current=\"page\"` is what\n * says \"you are here\" to anything that is not looking at the font weight.\n */\nexport function BreadcrumbPage({ className, ...props }: ComponentPropsWithRef<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      aria-current=\"page\"\n      className={cn(\"font-medium text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * The mark between items.\n *\n * Hidden from assistive technology and given no accessible name: the list\n * structure already conveys the sequence, and reading \"slash\" between every\n * item is the design's punctuation leaking into the content.\n */\nexport function BreadcrumbSeparator({\n  className,\n  children,\n  ...props\n}: ComponentPropsWithRef<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" className={mirrorForDirection}>\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      )}\n    </li>\n  );\n}\n\n/**\n * Stands in for the middle of a long trail.\n *\n * Named rather than hidden, because unlike a separator it is *content*: it\n * says levels have been left out. A bare \"…\" announces as nothing at all.\n */\nexport function BreadcrumbEllipsis({ className, ...props }: ComponentPropsWithRef<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      className={cn(\"flex size-5 items-center justify-center\", className)}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden 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\">Intermediate levels</span>\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAyBA,SAAgB,WAAW,EAAE,WAAW,GAAG,SAAuC;CAChF,OACE,oBAAC,OAAD;EAGE,cAAW;EACX,aAAU;EACV,WAAW,GAAG,WAAW,SAAS;EAClC,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,SAAS;;AAGf,MAAM,kBAAkB;AAGxB,MAAM,iBAAiB;AAIvB,MAAM,SAAS;aACF,OAAO,4DAA4D,OAAO;+EACR,OAAO;yCAC7C,OAAO;EAC9C,eAAe,aAAa,OAAO;EACnC,MAAM,KACN,EAAE,QAAQ,GAAc,IACvB,GAAG,MACF,GAAG,eAAe,aAAa,OAAO,IAAI,CAAC,EAAE,yBAAyB,QAAQ,IAAI,KAAK,eAAe,EAAE,2BAC5G,CAAC,CAAC,KAAK,IAAI,EAAE;EACX,eAAe,eAAe,OAAO,EAAa,EAAE,yBAAyB,OAAO,GAA2B,EAAE;;AAYnH,SAAgB,eAAe,EAAE,WAAW,WAAW,OAAO,GAAG,SAA8B;CAC7F,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,WACC,oBAAC,SAAD;EAAO,MAAM;EAAQ,YAAW;EAC7B,UAAA;CACI,CAAA,IACL,MACJ,oBAAC,MAAD;EACE,aAAU;EACV,iBAAe,YAAY,KAAA;EAC3B,WAAW,GACT,qEACA,SACF;EACA,GAAI;CACL,CAAA,CACD,EAAA,CAAA;AAEN;AAEA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAAsC;CACnF,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;AAOA,SAAgB,eAAe,EAAE,WAAW,UAAU,OAAO,GAAG,SAA8B;CAC5F,MAAM,YAAY,UAAU,KAAK,OAAO;CAExC,OACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GACT,gEACA,yBACA,WACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;;;AAQA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAAwC;CACrF,OACE,oBAAC,QAAD;EACE,aAAU;EACV,gBAAa;EACb,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;;;;;;;;AASA,SAAgB,oBAAoB,EAClC,WACA,UACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,MAAD;EACE,aAAU;EACV,MAAK;EACL,eAAA;EACA,WAAW,GAAG,oBAAoB,SAAS;EAC3C,GAAI;EAEH,UAAA,YACC,oBAAC,OAAD;GAAK,SAAQ;GAAY,MAAK;GAAO,WAAA;GACnC,UAAA,oBAAC,QAAD;IACE,GAAE;IACF,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;GAChB,CAAA;EACE,CAAA;CAEL,CAAA;AAER;;;;;;;AAQA,SAAgB,mBAAmB,EAAE,WAAW,GAAG,SAAwC;CACzF,OACE,qBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;EAJN,UAAA,CAME,qBAAC,OAAD;GAAK,SAAQ;GAAY,MAAK;GAAO,eAAA;GAAY,WAAU;GAA3D,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;EAAyB,CAAA,CAC/C;;AAEV"}

package/dist/components/breadcrumb/index.d.ts

@@ -1,2 +1,2 @@
-import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./breadcrumb.js";
-export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbList, BreadcrumbListProps, BreadcrumbPage, BreadcrumbSeparator } from "./breadcrumb.js";
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, BreadcrumbSeparator };

package/dist/components/breadcrumb/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: ["radix-ui"],
 	registryDependencies: [],
 	files: ["breadcrumb.tsx"],
-	a11y: "The current page is a span carrying aria-current=\"page\", not a link: a link to the page you are already on does nothing, and in a list of links it is indistinguishable from the ones that go somewhere. Separators are hidden from assistive technology, because the list already conveys the sequence and reading \"slash\" between every item is the design's punctuation leaking into the content. The ellipsis is the exception and is named, because it is content: it says levels have been left out."
+	a11y: "The current page is a span carrying aria-current=\"page\", not a link: a link to the page you are already on does nothing, and in a list of links it is indistinguishable from the ones that go somewhere. Separators are hidden from assistive technology, because the list already conveys the sequence and reading \"slash\" between every item is the design's punctuation leaking into the content. The ellipsis is the exception and is named, because it is content: it says levels have been left out. The optional entrance stagger stops under reduced motion."
 });
 //#endregion
 export { meta };

package/dist/components/breadcrumb/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/breadcrumb/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"breadcrumb\",\n  title: \"Breadcrumb\",\n  description: \"Where the current page sits in the hierarchy, and how to get back up it.\",\n  category: \"navigation\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"breadcrumb.tsx\"],\n  a11y:\n    'The current page is a span carrying aria-current=\"page\", not a link: a link to the page ' +\n    \"you are already on does nothing, and in a list of links it is indistinguishable from the \" +\n    \"ones that go somewhere. Separators are hidden from assistive technology, because the list \" +\n    'already conveys the sequence and reading \"slash\" between every item is the design\\'s ' +\n    \"punctuation leaking into the content. The ellipsis is the exception and is named, because \" +\n    \"it is content: it says levels have been left out.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,gBAAgB;CACxB,MACE;AAMJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/breadcrumb/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"breadcrumb\",\n  title: \"Breadcrumb\",\n  description: \"Where the current page sits in the hierarchy, and how to get back up it.\",\n  category: \"navigation\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"breadcrumb.tsx\"],\n  a11y:\n    'The current page is a span carrying aria-current=\"page\", not a link: a link to the page ' +\n    \"you are already on does nothing, and in a list of links it is indistinguishable from the \" +\n    \"ones that go somewhere. Separators are hidden from assistive technology, because the list \" +\n    'already conveys the sequence and reading \"slash\" between every item is the design\\'s ' +\n    \"punctuation leaking into the content. The ellipsis is the exception and is named, because \" +\n    \"it is content: it says levels have been left out. The optional entrance stagger stops \" +\n    \"under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,gBAAgB;CACxB,MACE;AAOJ,CAAC"}

package/dist/components/browser-tabs/browser-tabs-spring.js

@@ -0,0 +1,21 @@
+//#region src/components/browser-tabs/browser-tabs-spring.ts
+function springEasing(bounce, samples = 48) {
+	const zeta = 1 - Math.min(Math.max(bounce, 0), 1) * .7;
+	const omega = Math.log(1e3) / zeta;
+	const points = [];
+	for (let i = 0; i <= samples; i += 1) {
+		const t = i / samples;
+		let x;
+		if (zeta >= .999) x = 1 - Math.exp(-omega * t) * (1 + omega * t);
+		else {
+			const wd = omega * Math.sqrt(1 - zeta * zeta);
+			x = 1 - Math.exp(-zeta * omega * t) * (Math.cos(wd * t) + zeta * omega / wd * Math.sin(wd * t));
+		}
+		points.push(i === samples ? "1" : String(Math.round(x * 1e3) / 1e3));
+	}
+	return `linear(${points.join(", ")})`;
+}
+//#endregion
+export { springEasing };
+
+//# sourceMappingURL=browser-tabs-spring.js.map

package/dist/components/browser-tabs/browser-tabs-spring.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-tabs-spring.js","names":[],"sources":["../../../src/components/browser-tabs/browser-tabs-spring.ts"],"sourcesContent":["// Ported from bencho (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\n/*\n * A damped spring expressed as a CSS `linear()` easing, so a state-driven\n * spring (overshoot, settle) runs as a plain CSS transition: no animation\n * library, and the global reduced-motion rule and --motion-scale still apply.\n *\n * `bounce` 0..1 (0 = critically damped, no overshoot; 1 = very lively).\n * Returns the easing string. Pair it with a duration from the caller.\n * Browsers without linear() drop the declaration, so set it through a CSS\n * variable consumed inside `@supports (transition-timing-function: linear(0, 1))`\n * in the hoisted stylesheet, with a cubic-bezier fallback in the class list.\n */\nexport function springEasing(bounce: number, samples = 48): string {\n  const b = Math.min(Math.max(bounce, 0), 1);\n  const zeta = 1 - b * 0.7; // damping ratio 1 → 0.3\n  // Choose ω so the envelope has decayed to ~0.1% at t = 1.\n  const omega = Math.log(1000) / zeta;\n  const points: string[] = [];\n  for (let i = 0; i <= samples; i += 1) {\n    const t = i / samples;\n    let x: number;\n    if (zeta >= 0.999) {\n      x = 1 - Math.exp(-omega * t) * (1 + omega * t);\n    } else {\n      const wd = omega * Math.sqrt(1 - zeta * zeta);\n      x =\n        1 -\n        Math.exp(-zeta * omega * t) *\n          (Math.cos(wd * t) + ((zeta * omega) / wd) * Math.sin(wd * t));\n    }\n    points.push(i === samples ? \"1\" : String(Math.round(x * 1000) / 1000));\n  }\n  return `linear(${points.join(\", \")})`;\n}\n"],"mappings":";AAYA,SAAgB,aAAa,QAAgB,UAAU,IAAY;CAEjE,MAAM,OAAO,IADH,KAAK,IAAI,KAAK,IAAI,QAAQ,CAAC,GAAG,CACvB,IAAI;CAErB,MAAM,QAAQ,KAAK,IAAI,GAAI,IAAI;CAC/B,MAAM,SAAmB,CAAC;CAC1B,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,KAAK,GAAG;EACpC,MAAM,IAAI,IAAI;EACd,IAAI;EACJ,IAAI,QAAQ,MACV,IAAI,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,KAAK,IAAI,QAAQ;OACvC;GACL,MAAM,KAAK,QAAQ,KAAK,KAAK,IAAI,OAAO,IAAI;GAC5C,IACE,IACA,KAAK,IAAI,CAAC,OAAO,QAAQ,CAAC,KACvB,KAAK,IAAI,KAAK,CAAC,IAAM,OAAO,QAAS,KAAM,KAAK,IAAI,KAAK,CAAC;EACjE;EACA,OAAO,KAAK,MAAM,UAAU,MAAM,OAAO,KAAK,MAAM,IAAI,GAAI,IAAI,GAAI,CAAC;CACvE;CACA,OAAO,UAAU,OAAO,KAAK,IAAI,EAAE;AACrC"}

package/dist/components/browser-tabs/browser-tabs.d.ts

@@ -0,0 +1,62 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/browser-tabs/browser-tabs.d.ts
+/** Surface and ink as variables, so every colour mix follows the tone. */
+declare const browserTabsVariants: (props?: ({
+  tone?: "default" | "inverted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface BrowserTab {
+  /** Stable id, used for selection and ordering. */
+  value: string;
+  /** The tab's title, also its accessible name. */
+  label: string;
+  /** A favicon: an `<img>`, an inline SVG or an icon component. Decorative. */
+  icon?: ReactNode;
+  /** Shown in the address field while this tab is active. */
+  url?: string;
+}
+interface BrowserTabsLabels {
+  /** The tablist's accessible name. */
+  tabList: string;
+  back: string;
+  forward: string;
+  reload: string;
+}
+interface BrowserTabsProps extends Omit<ComponentPropsWithRef<"div">, "children" | "defaultValue" | "onChange">, VariantProps<typeof browserTabsVariants> {
+  tabs: BrowserTab[];
+  /** The active tab's value (controlled). */
+  value?: string;
+  /** The initially active tab when uncontrolled. Defaults to the first tab. */
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** Tab values in visual order (controlled). Unknown values are dropped, missing ones appended. */
+  order?: string[];
+  /** Initial order when uncontrolled. Defaults to the order of `tabs`. */
+  defaultOrder?: string[];
+  /** Called with the new order after a drag swap or a keyboard move. */
+  onOrderChange?: (order: string[]) => void;
+  /** Spring overshoot for the leaf and tabs, 0–30. */
+  bounce?: number;
+  /** Window corner radius in px; the tab's top radius derives from it. */
+  corner?: number;
+  /** Tab width in px. */
+  tabWidth?: number;
+  /** Adds a 1px hairline to the window and the active tab. */
+  stroke?: boolean;
+  /** Page content for the active tab. Ignored when `renderPanel` is given. */
+  children?: ReactNode;
+  /** Renders the page for the active tab. */
+  renderPanel?: (tab: BrowserTab) => ReactNode;
+  /** Makes the back glyph a real button. Without a handler it is decoration. */
+  onBack?: () => void;
+  onForward?: () => void;
+  onReload?: () => void;
+  labels?: Partial<BrowserTabsLabels>;
+  /** The live-region message after a move. `position` is 1-based. */
+  formatMove?: (tab: BrowserTab, position: number, total: number) => string;
+}
+/** A tablist in a miniature browser window, with drag and keyboard reordering. */
+declare function BrowserTabs({ className, style, tabs, value: valueProp, defaultValue, onValueChange, order: orderProp, defaultOrder, onOrderChange, bounce, corner, tabWidth, stroke, tone, children, renderPanel, onBack, onForward, onReload, labels: labelsProp, formatMove, dir, ...props }: BrowserTabsProps): import("react").JSX.Element;
+//#endregion
+export { BrowserTab, BrowserTabs, BrowserTabsLabels, BrowserTabsProps, browserTabsVariants };
+//# sourceMappingURL=browser-tabs.d.ts.map

package/dist/components/browser-tabs/browser-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-tabs.d.ts","names":[],"sources":["../../../src/components/browser-tabs/browser-tabs.tsx"],"mappings":";;;;cAqDM,sBAAmB;;6CAcxB;UAMgB;;EAEf;;EAEA;;EAEA,OAAO;;EAEP;;UAGe;;EAEf;EACA;EACA;EACA;;UAGe,yBAEb,KAAK,yEACL,oBAAoB;EACtB,MAAM;;EAEN;;EAEA;EACA,iBAAiB;;EAEjB;;EAEA;;EAEA,iBAAiB;;EAEjB;;EAEA;;EAEA;;EAEA;;EAEA,WAAW;;EAEX,eAAe,KAAK,eAAe;;EAEnC;EACA;EACA;EACA,SAAS,QAAQ;;EAEjB,cAAc,KAAK,YAAY,kBAAkB;;;iBAkGnC,cACd,WACA,OACA,MACA,OAAO,WACP,cACA,eACA,OAAO,WACP,cACA,eACA,QACA,QACA,UACA,QACA,MACA,UACA,aACA,QACA,WACA,UACA,QAAQ,YACR,YACA,QACG,SACF,mCAAgB,IAAA"}