@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/switchboard-card/switchboard-card.js

@@ -0,0 +1,169 @@
+"use client";
+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 { cva } from "class-variance-authority";
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+//#region src/components/switchboard-card/switchboard-card.tsx
+const switchboardCardVariants = cva(cn("group/switchboard relative flex min-h-72 w-full flex-col overflow-hidden rounded-xl border p-6 text-start", "transition-[border-color,background-color] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", focusRing), {
+	variants: { 
+	/** `inverted` is the source's "next" variant: a foreground gradient with background-coloured text. */
+variant: {
+		default: "border-border bg-card text-card-foreground hover:border-border-strong",
+		inverted: cn("border-transparent text-background", "bg-[linear-gradient(110deg,var(--color-foreground),color-mix(in_oklab,var(--color-foreground)_78%,var(--color-background)))]")
+	} },
+	defaultVariants: { variant: "default" }
+});
+const LIGHT = {
+	off: "size-0.5 bg-[color-mix(in_oklab,currentColor_35%,transparent)]",
+	medium: cn("size-0.5 bg-primary", "shadow-[0_0_2px_1px_color-mix(in_oklab,var(--color-primary)_40%,transparent),0_0_4px_1.5px_color-mix(in_oklab,var(--color-primary)_25%,transparent)]"),
+	high: cn("size-[3px] bg-primary", "shadow-[0_0_2px_1px_color-mix(in_oklab,var(--color-primary)_60%,transparent),0_0_4px_1.5px_color-mix(in_oklab,var(--color-primary)_35%,transparent),0_0_6px_2px_color-mix(in_oklab,var(--color-primary)_20%,transparent)]")
+};
+const NEXT = {
+	off: "medium",
+	medium: "high",
+	high: "off"
+};
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+function subscribeToMotionPreference(onChange) {
+	const query = window.matchMedia(REDUCED_MOTION);
+	query.addEventListener("change", onChange);
+	return () => {
+		query.removeEventListener("change", onChange);
+	};
+}
+function usePrefersReducedMotion() {
+	return useSyncExternalStore(subscribeToMotionPreference, () => window.matchMedia(REDUCED_MOTION).matches, () => false);
+}
+/** mulberry32: a tiny deterministic generator for the still frame. */
+function seeded(seed) {
+	let state = seed >>> 0;
+	return () => {
+		state = state + 1831565813 >>> 0;
+		let t = state;
+		t = Math.imul(t ^ t >>> 15, t | 1);
+		t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+		return ((t ^ t >>> 14) >>> 0) / 4294967296;
+	};
+}
+/** Indices lit by a flat (row-major) or two-dimensional pattern of 0s and 1s. */
+function litIndices(pattern, columns, rows) {
+	const lit = /* @__PURE__ */ new Set();
+	pattern.forEach((entry, index) => {
+		if (Array.isArray(entry)) {
+			if (index >= rows) return;
+			entry.forEach((cell, column) => {
+				if (cell === 1 && column < columns) lit.add(index * columns + column);
+			});
+		} else if (entry === 1 && index < columns * rows) lit.add(index);
+	});
+	return lit;
+}
+/** A feature card illustrated by a grid of lights — a lit pattern, or random flicker. */
+function SwitchboardCard({ className, heading, description, headingAs: Heading = "h3", columns = 18, rows = 5, gridPattern, randomLights = false, interval = 200, seed = 1, illustrationLabel, href, asChild = false, variant = "default", children, ...props }) {
+	const total = columns * rows;
+	const flickering = randomLights && !gridPattern;
+	const reduceMotion = usePrefersReducedMotion();
+	const grid = useRef(null);
+	const [flicker, setFlicker] = useState(() => Array.from({ length: total }, () => "off"));
+	const lights = useMemo(() => {
+		if (gridPattern) {
+			const lit = litIndices(gridPattern, columns, rows);
+			return Array.from({ length: total }, (_, index) => lit.has(index) ? "high" : "off");
+		}
+		if (flickering && reduceMotion) {
+			const random = seeded(seed);
+			return Array.from({ length: total }, () => random() < .15 ? "high" : "off");
+		}
+		if (flickering) return flicker.length === total ? flicker : Array.from({ length: total }, () => "off");
+		return Array.from({ length: total }, () => "off");
+	}, [
+		gridPattern,
+		columns,
+		rows,
+		total,
+		flickering,
+		reduceMotion,
+		seed,
+		flicker
+	]);
+	useEffect(() => {
+		if (!flickering || reduceMotion) return;
+		const element = grid.current;
+		let onScreen = true;
+		const observer = typeof IntersectionObserver === "undefined" || !element ? void 0 : new IntersectionObserver(([entry]) => {
+			onScreen = entry?.isIntersecting ?? true;
+		});
+		if (element) observer?.observe(element);
+		const timer = setInterval(() => {
+			if (!onScreen || document.hidden) return;
+			setFlicker((previous) => {
+				const next = previous.length === total ? [...previous] : Array.from({ length: total }, () => "off");
+				const steps = Math.max(1, Math.floor(total * .2));
+				for (let step = 0; step < steps; step++) {
+					const index = Math.floor(Math.random() * total);
+					next[index] = NEXT[next[index] ?? "off"];
+				}
+				return next;
+			});
+		}, interval);
+		return () => {
+			clearInterval(timer);
+			observer?.disconnect();
+		};
+	}, [
+		flickering,
+		reduceMotion,
+		total,
+		interval
+	]);
+	const Root = asChild ? Slot.Root : href ? "a" : "div";
+	return /* @__PURE__ */ jsxs(Root, {
+		"data-slot": "switchboard-card",
+		"data-variant": variant,
+		...asChild || !href ? {} : { href },
+		className: cn(switchboardCardVariants({ variant }), className),
+		...props,
+		children: [
+			asChild ? /* @__PURE__ */ jsx(Slot.Slottable, { children }) : null,
+			/* @__PURE__ */ jsx("div", {
+				"data-slot": "switchboard-card-illustration",
+				role: illustrationLabel ? "img" : void 0,
+				"aria-label": illustrationLabel,
+				"aria-hidden": illustrationLabel ? void 0 : true,
+				className: "flex flex-1 items-center",
+				children: /* @__PURE__ */ jsx("div", {
+					ref: grid,
+					"data-slot": "switchboard-card-lights",
+					"data-animated": flickering && !reduceMotion ? "" : void 0,
+					className: "grid h-20 w-full items-center justify-items-center",
+					style: {
+						gridTemplateColumns: `repeat(${String(columns)}, minmax(0, 1fr))`,
+						gridTemplateRows: `repeat(${String(rows)}, minmax(0, 1fr))`
+					},
+					children: lights.map((state, index) => /* @__PURE__ */ jsx("span", {
+						"data-slot": "switchboard-card-light",
+						"data-state": state,
+						className: cn("block rounded-full transition-[background-color,box-shadow,width,height] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", LIGHT[state])
+					}, `light-${String(index)}`))
+				})
+			}),
+			/* @__PURE__ */ jsx(Heading, {
+				"data-slot": "switchboard-card-heading",
+				className: cn("mt-auto pt-4 text-xl leading-8 font-semibold tracking-tight", variant === "inverted" && "text-2xl"),
+				children: heading
+			}),
+			description != null ? /* @__PURE__ */ jsx("p", {
+				"data-slot": "switchboard-card-description",
+				className: cn("mt-1 text-sm leading-relaxed", variant === "inverted" ? "max-w-[80%] text-base opacity-85" : "text-muted-foreground"),
+				children: description
+			}) : null,
+			asChild ? null : children
+		]
+	});
+}
+//#endregion
+export { SwitchboardCard, switchboardCardVariants };
+
+//# sourceMappingURL=switchboard-card.js.map

package/dist/components/switchboard-card/switchboard-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switchboard-card.js","names":[],"sources":["../../../src/components/switchboard-card/switchboard-card.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Switchboard Card (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A feature card whose illustration is a grid of tiny lights: either a fixed\n * pattern (a word, a logo) lit steadily, or random lights that flicker\n * off → medium → high → off on a timer.\n *\n * The flicker is decoration, so it follows the rules for decoration: it stops\n * while the card is off-screen or the tab is hidden, and under reduced motion\n * it never starts — the grid shows one still frame instead. That frame comes\n * from a seeded generator rather than Math.random, so the server and the\n * client render the same lights and hydration never disagrees.\n *\n * Light colours are the primary token mixed with transparency; unlit lights\n * are the current text colour, so the inverted variant needs no extra rules.\n */\n\nexport type SwitchboardLightState = \"off\" | \"medium\" | \"high\";\n\nconst switchboardCardVariants = cva(\n  cn(\n    \"group/switchboard relative flex min-h-72 w-full flex-col overflow-hidden rounded-xl border p-6 text-start\",\n    \"transition-[border-color,background-color] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n    focusRing,\n  ),\n  {\n    variants: {\n      /** `inverted` is the source's \"next\" variant: a foreground gradient with background-coloured text. */\n      variant: {\n        default: \"border-border bg-card text-card-foreground hover:border-border-strong\",\n        inverted: cn(\n          \"border-transparent text-background\",\n          \"bg-[linear-gradient(110deg,var(--color-foreground),color-mix(in_oklab,var(--color-foreground)_78%,var(--color-background)))]\",\n        ),\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nconst LIGHT: Record<SwitchboardLightState, string> = {\n  off: \"size-0.5 bg-[color-mix(in_oklab,currentColor_35%,transparent)]\",\n  medium: cn(\n    \"size-0.5 bg-primary\",\n    \"shadow-[0_0_2px_1px_color-mix(in_oklab,var(--color-primary)_40%,transparent),0_0_4px_1.5px_color-mix(in_oklab,var(--color-primary)_25%,transparent)]\",\n  ),\n  high: cn(\n    \"size-[3px] bg-primary\",\n    \"shadow-[0_0_2px_1px_color-mix(in_oklab,var(--color-primary)_60%,transparent),0_0_4px_1.5px_color-mix(in_oklab,var(--color-primary)_35%,transparent),0_0_6px_2px_color-mix(in_oklab,var(--color-primary)_20%,transparent)]\",\n  ),\n};\n\nconst NEXT: Record<SwitchboardLightState, SwitchboardLightState> = {\n  off: \"medium\",\n  medium: \"high\",\n  high: \"off\",\n};\n\nconst REDUCED_MOTION = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribeToMotionPreference(onChange: () => void) {\n  const query = window.matchMedia(REDUCED_MOTION);\n  query.addEventListener(\"change\", onChange);\n  return () => {\n    query.removeEventListener(\"change\", onChange);\n  };\n}\n\nfunction usePrefersReducedMotion() {\n  return useSyncExternalStore(\n    subscribeToMotionPreference,\n    () => window.matchMedia(REDUCED_MOTION).matches,\n    () => false,\n  );\n}\n\n/** mulberry32: a tiny deterministic generator for the still frame. */\nfunction seeded(seed: number) {\n  let state = seed >>> 0;\n  return () => {\n    state = (state + 0x6d2b79f5) >>> 0;\n    let t = state;\n    t = Math.imul(t ^ (t >>> 15), t | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\n/** Indices lit by a flat (row-major) or two-dimensional pattern of 0s and 1s. */\nfunction litIndices(\n  pattern: number[] | number[][],\n  columns: number,\n  rows: number,\n): Set<number> {\n  const lit = new Set<number>();\n  pattern.forEach((entry, index) => {\n    if (Array.isArray(entry)) {\n      if (index >= rows) return;\n      entry.forEach((cell, column) => {\n        if (cell === 1 && column < columns) lit.add(index * columns + column);\n      });\n    } else if (entry === 1 && index < columns * rows) {\n      lit.add(index);\n    }\n  });\n  return lit;\n}\n\nexport interface SwitchboardCardProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"title\">,\n    VariantProps<typeof switchboardCardVariants> {\n  /** The card's heading. */\n  heading: ReactNode;\n  /** Supporting text under the heading. */\n  description?: ReactNode;\n  /** The heading element, so the card fits the page's outline. */\n  headingAs?: \"h2\" | \"h3\" | \"h4\" | \"p\";\n  /** Lights per row. */\n  columns?: number;\n  /** Rows of lights. */\n  rows?: number;\n  /**\n   * Lights to hold on: a flat row-major array or a `[row][column]` grid, where\n   * 1 is lit. Takes precedence over `randomLights`.\n   */\n  gridPattern?: number[] | number[][];\n  /** Flicker random lights instead of showing a pattern. */\n  randomLights?: boolean;\n  /** Milliseconds between flicker steps. */\n  interval?: number;\n  /** Seed for the still frame shown under reduced motion. */\n  seed?: number;\n  /**\n   * Describes the illustration when it means something (a pattern spelling a\n   * word). Without it the lights are decorative and hidden from assistive technology.\n   */\n  illustrationLabel?: string;\n  /** Makes the whole card a link. */\n  href?: string;\n  /** Renders the child element (a router link, a button) as the card. */\n  asChild?: boolean;\n}\n\n/** A feature card illustrated by a grid of lights — a lit pattern, or random flicker. */\nexport function SwitchboardCard({\n  className,\n  heading,\n  description,\n  headingAs: Heading = \"h3\",\n  columns = 18,\n  rows = 5,\n  gridPattern,\n  randomLights = false,\n  interval = 200,\n  seed = 1,\n  illustrationLabel,\n  href,\n  asChild = false,\n  variant = \"default\",\n  children,\n  ...props\n}: SwitchboardCardProps) {\n  const total = columns * rows;\n  const flickering = randomLights && !gridPattern;\n  const reduceMotion = usePrefersReducedMotion();\n  const grid = useRef<HTMLDivElement>(null);\n\n  const [flicker, setFlicker] = useState<SwitchboardLightState[]>(() =>\n    Array.from({ length: total }, () => \"off\"),\n  );\n\n  const lights = useMemo<SwitchboardLightState[]>(() => {\n    if (gridPattern) {\n      const lit = litIndices(gridPattern, columns, rows);\n      return Array.from({ length: total }, (_, index) => (lit.has(index) ? \"high\" : \"off\"));\n    }\n    if (flickering && reduceMotion) {\n      const random = seeded(seed);\n      return Array.from({ length: total }, () => (random() < 0.15 ? \"high\" : \"off\"));\n    }\n    if (flickering) {\n      return flicker.length === total ? flicker : Array.from({ length: total }, () => \"off\");\n    }\n    return Array.from({ length: total }, () => \"off\");\n  }, [gridPattern, columns, rows, total, flickering, reduceMotion, seed, flicker]);\n\n  useEffect(() => {\n    if (!flickering || reduceMotion) return;\n    const element = grid.current;\n    let onScreen = true;\n    const observer =\n      typeof IntersectionObserver === \"undefined\" || !element\n        ? undefined\n        : new IntersectionObserver(([entry]) => {\n            onScreen = entry?.isIntersecting ?? true;\n          });\n    if (element) observer?.observe(element);\n\n    const timer = setInterval(() => {\n      if (!onScreen || document.hidden) return;\n      setFlicker((previous) => {\n        const next: SwitchboardLightState[] =\n          previous.length === total\n            ? [...previous]\n            : Array.from({ length: total }, () => \"off\");\n        const steps = Math.max(1, Math.floor(total * 0.2));\n        for (let step = 0; step < steps; step++) {\n          const index = Math.floor(Math.random() * total);\n          next[index] = NEXT[next[index] ?? \"off\"];\n        }\n        return next;\n      });\n    }, interval);\n\n    return () => {\n      clearInterval(timer);\n      observer?.disconnect();\n    };\n  }, [flickering, reduceMotion, total, interval]);\n\n  // Every root takes a div's attributes; only the ref's element type differs,\n  // which TypeScript cannot reconcile across the union.\n  const Root = (asChild ? Slot.Root : href ? \"a\" : \"div\") as \"div\";\n  const link = asChild || !href ? {} : { href };\n\n  return (\n    <Root\n      data-slot=\"switchboard-card\"\n      data-variant={variant}\n      {...link}\n      className={cn(switchboardCardVariants({ variant }), className)}\n      {...props}\n    >\n      {asChild ? <Slot.Slottable>{children}</Slot.Slottable> : null}\n      <div\n        data-slot=\"switchboard-card-illustration\"\n        role={illustrationLabel ? \"img\" : undefined}\n        aria-label={illustrationLabel}\n        aria-hidden={illustrationLabel ? undefined : true}\n        className=\"flex flex-1 items-center\"\n      >\n        <div\n          ref={grid}\n          data-slot=\"switchboard-card-lights\"\n          data-animated={flickering && !reduceMotion ? \"\" : undefined}\n          className=\"grid h-20 w-full items-center justify-items-center\"\n          style={{\n            gridTemplateColumns: `repeat(${String(columns)}, minmax(0, 1fr))`,\n            gridTemplateRows: `repeat(${String(rows)}, minmax(0, 1fr))`,\n          }}\n        >\n          {lights.map((state, index) => (\n            <span\n              // Grid positions are fixed and never reorder, so the index is the identity.\n              key={`light-${String(index)}`}\n              data-slot=\"switchboard-card-light\"\n              data-state={state}\n              className={cn(\n                \"block rounded-full transition-[background-color,box-shadow,width,height] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n                LIGHT[state],\n              )}\n            />\n          ))}\n        </div>\n      </div>\n      <Heading\n        data-slot=\"switchboard-card-heading\"\n        className={cn(\n          \"mt-auto pt-4 text-xl leading-8 font-semibold tracking-tight\",\n          variant === \"inverted\" && \"text-2xl\",\n        )}\n      >\n        {heading}\n      </Heading>\n      {description != null ? (\n        <p\n          data-slot=\"switchboard-card-description\"\n          className={cn(\n            \"mt-1 text-sm leading-relaxed\",\n            variant === \"inverted\"\n              ? \"max-w-[80%] text-base opacity-85\"\n              : \"text-muted-foreground\",\n          )}\n        >\n          {description}\n        </p>\n      ) : null}\n      {asChild ? null : children}\n    </Root>\n  );\n}\n\nexport { switchboardCardVariants };\n"],"mappings":"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"}

package/dist/components/table/table.js

@@ -48,14 +48,14 @@ function TableRow({ className, ...props }) {
 function TableHead({ className, ...props }) {
 	return /* @__PURE__ */ jsx("th", {
 		"data-slot": "table-head",
-		className: cn("h-10 px-3 text-left align-middle text-xs font-medium whitespace-nowrap text-muted-foreground", "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-0", className),
+		className: cn("h-10 px-3 text-start align-middle text-xs font-medium whitespace-nowrap text-muted-foreground", "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pe-0", className),
 		...props
 	});
 }
 function TableCell({ className, ...props }) {
 	return /* @__PURE__ */ jsx("td", {
 		"data-slot": "table-cell",
-		className: cn("px-3 py-2.5 align-middle", "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-0", className),
+		className: cn("px-3 py-2.5 align-middle", "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pe-0", className),
 		...props
 	});
 }

package/dist/components/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","names":[],"sources":["../../../src/components/table/table.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Semantic table primitives.\n *\n * A real `<table>`, not a grid of divs: screen readers announce row and column\n * position, header association and table dimensions from the native elements,\n * and none of that can be recovered with ARIA after the fact.\n *\n * The wrapper scrolls horizontally and is focusable, because a table that\n * overflows its container is otherwise unreachable by keyboard.\n */\n/**\n * Arbitrary `data-*` attributes.\n *\n * TypeScript accepts `data-*` written directly on JSX, but not inside an object\n * literal typed as HTML attributes — so without this, `containerProps` could not\n * carry a test id or a styling hook.\n */\ntype DataAttributes = Record<`data-${string}`, string | number | boolean | undefined>;\n\nexport interface TableProps extends ComponentPropsWithRef<\"table\"> {\n  /** Props for the scrolling wrapper around the table. */\n  containerProps?: ComponentPropsWithRef<\"div\"> & DataAttributes;\n}\n\nexport function Table({ className, containerProps, ...props }: TableProps) {\n  const { className: containerClassName, ...restContainer } = containerProps ?? {};\n\n  return (\n    <div\n      data-slot=\"table-container\"\n      // tabIndex 0 with a role and label makes an overflowing table scrollable\n      // by keyboard. Without it, the columns past the edge are unreachable.\n      tabIndex={0}\n      role=\"region\"\n      aria-label={props[\"aria-label\"] ?? \"Table\"}\n      className={cn(\"relative w-full overflow-x-auto\", containerClassName)}\n      {...restContainer}\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom border-collapse text-sm\", className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport function TableHeader({ className, ...props }: ComponentPropsWithRef<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b [&_tr]:border-border\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function TableBody({ className, ...props }: ComponentPropsWithRef<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function TableFooter({ className, ...props }: ComponentPropsWithRef<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\"border-t border-border bg-muted/40 font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function TableRow({ className, ...props }: ComponentPropsWithRef<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b border-border transition-colors duration-[var(--duration-instant)]\",\n        \"hover:bg-muted/50 data-[state=selected]:bg-accent\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function TableHead({ className, ...props }: ComponentPropsWithRef<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-10 px-3 text-left align-middle text-xs font-medium whitespace-nowrap text-muted-foreground\",\n        \"[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function TableCell({ className, ...props }: ComponentPropsWithRef<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"px-3 py-2.5 align-middle\",\n        \"[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * A caption describing the table.\n *\n * Rendered below the table but announced as its accessible name, which is why\n * it belongs here rather than as a heading above.\n */\nexport function TableCaption({ className, ...props }: ComponentPropsWithRef<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;AA4BA,SAAgB,MAAM,EAAE,WAAW,gBAAgB,GAAG,SAAqB;CACzE,MAAM,EAAE,WAAW,oBAAoB,GAAG,kBAAkB,kBAAkB,CAAC;CAE/E,OACE,oBAAC,OAAD;EACE,aAAU;EAGV,UAAU;EACV,MAAK;EACL,cAAY,MAAM,iBAAiB;EACnC,WAAW,GAAG,mCAAmC,kBAAkB;EACnE,GAAI;EAEJ,UAAA,oBAAC,SAAD;GACE,aAAU;GACV,WAAW,GAAG,iDAAiD,SAAS;GACxE,GAAI;EACL,CAAA;CACE,CAAA;AAET;AAEA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAAyC;CACnF,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,UAAU,EAAE,WAAW,GAAG,SAAyC;CACjF,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,SAAS;EACrD,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAAyC;CACnF,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,kDAAkD,SAAS;EACzE,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,SAAS,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,+EACA,qDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,UAAU,EAAE,WAAW,GAAG,SAAsC;CAC9E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,gGACA,+DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,UAAU,EAAE,WAAW,GAAG,SAAsC;CAC9E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,4BACA,+DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;;;AAQA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAA2C;CACtF,OACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"table.js","names":[],"sources":["../../../src/components/table/table.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Semantic table primitives.\n *\n * A real `<table>`, not a grid of divs: screen readers announce row and column\n * position, header association and table dimensions from the native elements,\n * and none of that can be recovered with ARIA after the fact.\n *\n * The wrapper scrolls horizontally and is focusable, because a table that\n * overflows its container is otherwise unreachable by keyboard.\n */\n/**\n * Arbitrary `data-*` attributes.\n *\n * TypeScript accepts `data-*` written directly on JSX, but not inside an object\n * literal typed as HTML attributes — so without this, `containerProps` could not\n * carry a test id or a styling hook.\n */\ntype DataAttributes = Record<`data-${string}`, string | number | boolean | undefined>;\n\nexport interface TableProps extends ComponentPropsWithRef<\"table\"> {\n  /** Props for the scrolling wrapper around the table. */\n  containerProps?: ComponentPropsWithRef<\"div\"> & DataAttributes;\n}\n\nexport function Table({ className, containerProps, ...props }: TableProps) {\n  const { className: containerClassName, ...restContainer } = containerProps ?? {};\n\n  return (\n    <div\n      data-slot=\"table-container\"\n      // tabIndex 0 with a role and label makes an overflowing table scrollable\n      // by keyboard. Without it, the columns past the edge are unreachable.\n      tabIndex={0}\n      role=\"region\"\n      aria-label={props[\"aria-label\"] ?? \"Table\"}\n      className={cn(\"relative w-full overflow-x-auto\", containerClassName)}\n      {...restContainer}\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom border-collapse text-sm\", className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport function TableHeader({ className, ...props }: ComponentPropsWithRef<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b [&_tr]:border-border\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function TableBody({ className, ...props }: ComponentPropsWithRef<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function TableFooter({ className, ...props }: ComponentPropsWithRef<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\"border-t border-border bg-muted/40 font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function TableRow({ className, ...props }: ComponentPropsWithRef<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b border-border transition-colors duration-[var(--duration-instant)]\",\n        \"hover:bg-muted/50 data-[state=selected]:bg-accent\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function TableHead({ className, ...props }: ComponentPropsWithRef<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-10 px-3 text-start align-middle text-xs font-medium whitespace-nowrap text-muted-foreground\",\n        \"[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pe-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function TableCell({ className, ...props }: ComponentPropsWithRef<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"px-3 py-2.5 align-middle\",\n        \"[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pe-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * A caption describing the table.\n *\n * Rendered below the table but announced as its accessible name, which is why\n * it belongs here rather than as a heading above.\n */\nexport function TableCaption({ className, ...props }: ComponentPropsWithRef<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;AA4BA,SAAgB,MAAM,EAAE,WAAW,gBAAgB,GAAG,SAAqB;CACzE,MAAM,EAAE,WAAW,oBAAoB,GAAG,kBAAkB,kBAAkB,CAAC;CAE/E,OACE,oBAAC,OAAD;EACE,aAAU;EAGV,UAAU;EACV,MAAK;EACL,cAAY,MAAM,iBAAiB;EACnC,WAAW,GAAG,mCAAmC,kBAAkB;EACnE,GAAI;EAEJ,UAAA,oBAAC,SAAD;GACE,aAAU;GACV,WAAW,GAAG,iDAAiD,SAAS;GACxE,GAAI;EACL,CAAA;CACE,CAAA;AAET;AAEA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAAyC;CACnF,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,UAAU,EAAE,WAAW,GAAG,SAAyC;CACjF,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,SAAS;EACrD,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAAyC;CACnF,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,kDAAkD,SAAS;EACzE,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,SAAS,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,+EACA,qDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,UAAU,EAAE,WAAW,GAAG,SAAsC;CAC9E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,iGACA,+DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,UAAU,EAAE,WAAW,GAAG,SAAsC;CAC9E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,4BACA,+DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;;;AAQA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAA2C;CACtF,OACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL"}

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

@@ -1,2 +1,2 @@
-import { Tabs, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, tabsListVariants, tabsTriggerVariants } from "./tabs.js";
-export { Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, TabsTrigger, type TabsTriggerProps, tabsListVariants, tabsTriggerVariants };
+import { Tabs, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, tabsIndicatorVariants, tabsListVariants, tabsTriggerVariants } from "./tabs.js";
+export { Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, TabsTrigger, type TabsTriggerProps, tabsIndicatorVariants, tabsListVariants, tabsTriggerVariants };

package/dist/components/tabs/index.js

@@ -1,2 +1,2 @@
-import { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants, tabsTriggerVariants } from "./tabs.js";
-export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants, tabsTriggerVariants };
+import { Tabs, TabsContent, TabsList, TabsTrigger, tabsIndicatorVariants, tabsListVariants, tabsTriggerVariants } from "./tabs.js";
+export { Tabs, TabsContent, TabsList, TabsTrigger, tabsIndicatorVariants, tabsListVariants, tabsTriggerVariants };

package/dist/components/tabs/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: ["class-variance-authority", "radix-ui"],
 	registryDependencies: [],
 	files: ["tabs.tsx"],
-	a11y: "Implements the ARIA tabs pattern: arrows move between tabs, Home/End jump to the ends, and only the active tab is in the tab sequence. Panels are focusable so keyboard users reach their content directly. Use activationMode=\"manual\" when showing a panel is expensive, so arrowing past it does not load it."
+	a11y: "Implements the ARIA tabs pattern: arrows move between tabs, Home/End jump to the ends, and only the active tab is in the tab sequence. Panels are focusable so keyboard users reach their content directly. Use activationMode=\"manual\" when showing a panel is expensive, so arrowing past it does not load it. The optional sliding indicator (indicator=\"slide\") is aria-hidden decoration; selection is still conveyed by aria-selected, and the slide stops under reduced motion."
 });
 //#endregion
 export { meta };

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

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/tabs/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"tabs\",\n  title: \"Tabs\",\n  description: \"Switches between panels of related content.\",\n  category: \"navigation\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"tabs.tsx\"],\n  a11y:\n    \"Implements the ARIA tabs pattern: arrows move between tabs, Home/End jump to the ends, \" +\n    \"and only the active tab is in the tab sequence. Panels are focusable so keyboard users \" +\n    'reach their content directly. Use activationMode=\"manual\" when showing a panel is ' +\n    \"expensive, so arrowing past it does not load it.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,UAAU;CAClB,MACE;AAIJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/tabs/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"tabs\",\n  title: \"Tabs\",\n  description: \"Switches between panels of related content.\",\n  category: \"navigation\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"tabs.tsx\"],\n  a11y:\n    \"Implements the ARIA tabs pattern: arrows move between tabs, Home/End jump to the ends, \" +\n    \"and only the active tab is in the tab sequence. Panels are focusable so keyboard users \" +\n    'reach their content directly. Use activationMode=\"manual\" when showing a panel is ' +\n    \"expensive, so arrowing past it does not load it. The optional sliding indicator \" +\n    '(indicator=\"slide\") is aria-hidden decoration; selection is still conveyed by ' +\n    \"aria-selected, and the slide stops under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,UAAU;CAClB,MACE;AAMJ,CAAC"}

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

@@ -12,17 +12,21 @@ import { ComponentPropsWithRef } from "react";
  */
 declare const Tabs$1: import("react").ForwardRefExoticComponent<Tabs.TabsProps & import("react").RefAttributes<HTMLDivElement>>;
 declare const tabsListVariants: (props?: ({
+  indicator?: "none" | "slide" | null | undefined;
+  variant?: "solid" | "underline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const tabsIndicatorVariants: (props?: ({
   variant?: "solid" | "underline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const tabsTriggerVariants: (props?: ({
   variant?: "solid" | "underline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface TabsListProps extends ComponentPropsWithRef<typeof Tabs.List>, VariantProps<typeof tabsListVariants> {}
-declare function TabsList({ className, variant, ...props }: TabsListProps): import("react").JSX.Element;
+declare function TabsList({ className, variant, indicator, children, ...props }: TabsListProps): import("react").JSX.Element;
 interface TabsTriggerProps extends ComponentPropsWithRef<typeof Tabs.Trigger>, VariantProps<typeof tabsTriggerVariants> {}
 declare function TabsTrigger({ className, variant, ...props }: TabsTriggerProps): import("react").JSX.Element;
 type TabsContentProps = ComponentPropsWithRef<typeof Tabs.Content>;
 declare function TabsContent({ className, ...props }: TabsContentProps): import("react").JSX.Element;
 //#endregion
-export { Tabs$1 as Tabs, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, tabsListVariants, tabsTriggerVariants };
+export { Tabs$1 as Tabs, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, tabsIndicatorVariants, tabsListVariants, tabsTriggerVariants };
 //# sourceMappingURL=tabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","names":[],"sources":["../../../src/components/tabs/tabs.tsx"],"mappings":";;;;;;;;;;;;cAiBa,wBAAI,0BAAA,KAAA,4BAAA,cAAA;cAEX,mBAAgB;;6CAYpB;cAEI,sBAAmB;;6CA2BxB;UAEgB,sBAEb,6BAA6B,KAAc,OAC3C,oBAAoB;iBAER,WAAW,WAAW,YAAY,SAAS,gCAAa,IAAA;UAWvD,yBAEb,6BAA6B,KAAc,UAC3C,oBAAoB;iBAER,cAAc,WAAW,YAAY,SAAS,mCAAgB,IAAA;KAUlE,mBAAmB,6BAA6B,KAAc;iBAE1D,cAAc,cAAc,SAAS,mCAAgB,IAAA"}
+{"version":3,"file":"tabs.d.ts","names":[],"sources":["../../../src/components/tabs/tabs.tsx"],"mappings":";;;;;;;;;;;;cAyBa,wBAAI,0BAAA,KAAA,4BAAA,cAAA;cAEX,mBAAgB;;;6CA+BpB;cAEI,wBAAqB;;6CAiB1B;cAEK,sBAAmB;;6CA2BxB;UAEgB,sBAEb,6BAA6B,KAAc,OAC3C,oBAAoB;iBAER,WAAW,WAAW,SAAS,WAAW,aAAa,SAAS,gCAAa,IAAA;UAyG5E,yBAEb,6BAA6B,KAAc,UAC3C,oBAAoB;iBAER,cAAc,WAAW,YAAY,SAAS,mCAAgB,IAAA;KAUlE,mBAAmB,6BAA6B,KAAc;iBAE1D,cAAc,cAAc,SAAS,mCAAgB,IAAA"}

package/dist/components/tabs/tabs.js

@@ -2,8 +2,9 @@
 import { focusRing } from "../../lib/styles.js";
 import { cn } from "../../lib/utils.js";
 import { Tabs } from "radix-ui";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
 //#region src/components/tabs/tabs.tsx
 /**
 * Switches between panels of related content.
@@ -15,11 +16,33 @@ import { cva } from "class-variance-authority";
 */
 const Tabs$1 = Tabs.Root;
 const tabsListVariants = cva("inline-flex items-center", {
+	variants: {
+		/**
+		* `slide` draws the active tab's pill (or underline) once, on the list,
+		* and moves it between tabs. Opt-in: it takes over the active trigger's
+		* own background, which would silently discard any active styling a
+		* consumer had put on their triggers.
+		*/
+		indicator: {
+			none: "",
+			slide: cn("relative", "has-[>[data-slot=tabs-indicator][data-ready]]:[&_[role=tab]]:relative", "has-[>[data-slot=tabs-indicator][data-ready]]:[&_[role=tab][data-state=active]]:border-transparent", "has-[>[data-slot=tabs-indicator][data-ready]]:[&_[role=tab][data-state=active]]:bg-transparent", "has-[>[data-slot=tabs-indicator][data-ready]]:[&_[role=tab][data-state=active]]:shadow-none")
+		},
+		variant: {
+			/** Pill track. Reads as a segmented control. */
+			solid: "gap-1 rounded-lg bg-muted p-1",
+			/** Underlined. Reads as page-level navigation between views. */
+			underline: "gap-4 border-b border-border"
+		}
+	},
+	defaultVariants: {
+		variant: "solid",
+		indicator: "none"
+	}
+});
+const tabsIndicatorVariants = cva(cn("pointer-events-none absolute", "transition-[transform,width,height] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", "motion-reduce:transition-none"), {
 	variants: { variant: {
-		/** Pill track. Reads as a segmented control. */
-		solid: "gap-1 rounded-lg bg-muted p-1",
-		/** Underlined. Reads as page-level navigation between views. */
-		underline: "gap-4 border-b border-border"
+		solid: "rounded-md bg-background shadow-xs",
+		underline: "bg-primary"
 	} },
 	defaultVariants: { variant: "solid" }
 });
@@ -30,12 +53,91 @@ const tabsTriggerVariants = cva(cn("inline-flex items-center justify-center gap-
 	} },
 	defaultVariants: { variant: "solid" }
 });
-function TabsList({ className, variant, ...props }) {
-	return /* @__PURE__ */ jsx(Tabs.List, {
+function TabsList({ className, variant, indicator, children, ...props }) {
+	const slide = indicator === "slide";
+	return /* @__PURE__ */ jsxs(Tabs.List, {
 		"data-slot": "tabs-list",
 		"data-variant": variant ?? "solid",
-		className: cn(tabsListVariants({ variant }), className),
-		...props
+		"data-indicator": slide ? "slide" : void 0,
+		className: cn(tabsListVariants({
+			variant,
+			indicator
+		}), className),
+		...props,
+		children: [slide ? /* @__PURE__ */ jsx(TabsIndicator, { variant: variant ?? "solid" }) : null, children]
+	});
+}
+/**
+* Where the indicator should sit, from the active tab's offset box.
+*
+* Offsets are physical and relative to the list, so this is right in both
+* reading directions and in a vertical list without knowing which it is.
+*/
+function measure(list, variant) {
+	const active = list.querySelector("[role=\"tab\"][data-state=\"active\"]");
+	if (!active) return null;
+	let { offsetLeft: x, offsetTop: y, offsetWidth: width, offsetHeight: height } = active;
+	if (active.offsetParent !== list) {
+		const from = list.getBoundingClientRect();
+		const to = active.getBoundingClientRect();
+		x = to.left - from.left - list.clientLeft;
+		y = to.top - from.top - list.clientTop;
+		width = to.width;
+		height = to.height;
+	}
+	if (variant === "underline") return {
+		width,
+		height: 2,
+		transform: `translate(${String(x)}px, ${String(y + height - 2)}px)`
+	};
+	return {
+		width,
+		height,
+		transform: `translate(${String(x)}px, ${String(y)}px)`
+	};
+}
+/**
+* The sliding pill. Decorative — the active tab is announced by
+* aria-selected — so it is hidden from assistive technology.
+*/
+function TabsIndicator({ variant }) {
+	const [box, setBox] = useState(null);
+	const node = useRef(null);
+	const update = useCallback(() => {
+		const list = node.current?.parentElement;
+		if (!list) return;
+		const next = measure(list, variant);
+		setBox((previous) => previous?.transform === next?.transform && previous?.width === next?.width && previous?.height === next?.height ? previous : next);
+	}, [variant]);
+	useLayoutEffect(() => {
+		const list = node.current?.parentElement;
+		if (!list) return;
+		update();
+		const mutations = new MutationObserver(update);
+		mutations.observe(list, {
+			attributes: true,
+			attributeFilter: ["data-state"],
+			subtree: true
+		});
+		const resizes = new ResizeObserver(update);
+		resizes.observe(list);
+		for (const tab of list.querySelectorAll("[role=\"tab\"]")) resizes.observe(tab);
+		return () => {
+			mutations.disconnect();
+			resizes.disconnect();
+		};
+	}, [update]);
+	return /* @__PURE__ */ jsx("span", {
+		ref: node,
+		"aria-hidden": "true",
+		"data-slot": "tabs-indicator",
+		"data-ready": box ? "" : void 0,
+		className: cn(tabsIndicatorVariants({ variant }), !box && "hidden"),
+		style: box ? {
+			top: 0,
+			left: 0,
+			...box
+		} : void 0
 	});
 }
 function TabsTrigger({ className, variant, ...props }) {
@@ -53,6 +155,6 @@ function TabsContent({ className, ...props }) {
 	});
 }
 //#endregion
-export { Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants, tabsTriggerVariants };
+export { Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger, tabsIndicatorVariants, tabsListVariants, tabsTriggerVariants };
 
 //# sourceMappingURL=tabs.js.map

package/dist/components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":["Tabs","TabsPrimitive"],"sources":["../../../src/components/tabs/tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Switches between panels of related content.\n *\n * Tabs are for alternate views of the same subject, not for steps in a process\n * — a user can leave a tab and come back with nothing lost. Activation is\n * automatic on arrow keys by default; pass `activationMode=\"manual\"` when\n * revealing a panel is expensive.\n */\nexport const Tabs = TabsPrimitive.Root;\n\nconst tabsListVariants = cva(\"inline-flex items-center\", {\n  variants: {\n    variant: {\n      /** Pill track. Reads as a segmented control. */\n      solid: \"gap-1 rounded-lg bg-muted p-1\",\n      /** Underlined. Reads as page-level navigation between views. */\n      underline: \"gap-4 border-b border-border\",\n    },\n  },\n  defaultVariants: {\n    variant: \"solid\",\n  },\n});\n\nconst tabsTriggerVariants = cva(\n  cn(\n    \"inline-flex items-center justify-center gap-2 text-sm font-medium whitespace-nowrap\",\n    \"transition-colors duration-[var(--duration-fast)]\",\n    \"disabled:pointer-events-none disabled:opacity-55\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n    focusRing,\n  ),\n  {\n    variants: {\n      variant: {\n        solid: cn(\n          \"h-7 rounded-md px-3 text-muted-foreground\",\n          \"hover:text-foreground\",\n          \"data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs\",\n        ),\n        underline: cn(\n          \"-mb-px h-9 border-b-2 border-transparent px-0.5 text-muted-foreground\",\n          \"hover:text-foreground\",\n          \"data-[state=active]:border-primary data-[state=active]:text-foreground\",\n        ),\n      },\n    },\n    defaultVariants: {\n      variant: \"solid\",\n    },\n  },\n);\n\nexport interface TabsListProps\n  extends\n    ComponentPropsWithRef<typeof TabsPrimitive.List>,\n    VariantProps<typeof tabsListVariants> {}\n\nexport function TabsList({ className, variant, ...props }: TabsListProps) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant ?? \"solid\"}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nexport interface TabsTriggerProps\n  extends\n    ComponentPropsWithRef<typeof TabsPrimitive.Trigger>,\n    VariantProps<typeof tabsTriggerVariants> {}\n\nexport function TabsTrigger({ className, variant, ...props }: TabsTriggerProps) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(tabsTriggerVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nexport type TabsContentProps = ComponentPropsWithRef<typeof TabsPrimitive.Content>;\n\nexport function TabsContent({ className, ...props }: TabsContentProps) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"mt-4 outline-none\", focusRing, className)}\n      {...props}\n    />\n  );\n}\n\nexport { tabsListVariants, tabsTriggerVariants };\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAaA,SAAOC,KAAc;AAElC,MAAM,mBAAmB,IAAI,4BAA4B;CACvD,UAAU,EACR,SAAS;;EAEP,OAAO;;EAEP,WAAW;CACb,EACF;CACA,iBAAiB,EACf,SAAS,QACX;AACF,CAAC;AAED,MAAM,sBAAsB,IAC1B,GACE,uFACA,qDACA,oDACA,qFACA,SACF,GACA;CACE,UAAU,EACR,SAAS;EACP,OAAO,GACL,6CACA,yBACA,qGACF;EACA,WAAW,GACT,yEACA,yBACA,wEACF;CACF,EACF;CACA,iBAAiB,EACf,SAAS,QACX;AACF,CACF;AAOA,SAAgB,SAAS,EAAE,WAAW,SAAS,GAAG,SAAwB;CACxE,OACE,oBAACA,KAAc,MAAf;EACE,aAAU;EACV,gBAAc,WAAW;EACzB,WAAW,GAAG,iBAAiB,EAAE,QAAQ,CAAC,GAAG,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAOA,SAAgB,YAAY,EAAE,WAAW,SAAS,GAAG,SAA2B;CAC9E,OACE,oBAACA,KAAc,SAAf;EACE,aAAU;EACV,WAAW,GAAG,oBAAoB,EAAE,QAAQ,CAAC,GAAG,SAAS;EACzD,GAAI;CACL,CAAA;AAEL;AAIA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAA2B;CACrE,OACE,oBAACA,KAAc,SAAf;EACE,aAAU;EACV,WAAW,GAAG,qBAAqB,WAAW,SAAS;EACvD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"tabs.js","names":["Tabs","TabsPrimitive"],"sources":["../../../src/components/tabs/tabs.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI AnimatedTabs (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport {\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Switches between panels of related content.\n *\n * Tabs are for alternate views of the same subject, not for steps in a process\n * — a user can leave a tab and come back with nothing lost. Activation is\n * automatic on arrow keys by default; pass `activationMode=\"manual\"` when\n * revealing a panel is expensive.\n */\nexport const Tabs = TabsPrimitive.Root;\n\nconst tabsListVariants = cva(\"inline-flex items-center\", {\n  variants: {\n    /**\n     * `slide` draws the active tab's pill (or underline) once, on the list,\n     * and moves it between tabs. Opt-in: it takes over the active trigger's\n     * own background, which would silently discard any active styling a\n     * consumer had put on their triggers.\n     */\n    indicator: {\n      none: \"\",\n      slide: cn(\n        \"relative\",\n        // Only once the indicator has measured: before that — first paint,\n        // server render, no JavaScript — the triggers keep their own styling.\n        \"has-[>[data-slot=tabs-indicator][data-ready]]:[&_[role=tab]]:relative\",\n        \"has-[>[data-slot=tabs-indicator][data-ready]]:[&_[role=tab][data-state=active]]:border-transparent\",\n        \"has-[>[data-slot=tabs-indicator][data-ready]]:[&_[role=tab][data-state=active]]:bg-transparent\",\n        \"has-[>[data-slot=tabs-indicator][data-ready]]:[&_[role=tab][data-state=active]]:shadow-none\",\n      ),\n    },\n    variant: {\n      /** Pill track. Reads as a segmented control. */\n      solid: \"gap-1 rounded-lg bg-muted p-1\",\n      /** Underlined. Reads as page-level navigation between views. */\n      underline: \"gap-4 border-b border-border\",\n    },\n  },\n  defaultVariants: {\n    variant: \"solid\",\n    indicator: \"none\",\n  },\n});\n\nconst tabsIndicatorVariants = cva(\n  cn(\n    \"pointer-events-none absolute\",\n    \"transition-[transform,width,height] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n    \"motion-reduce:transition-none\",\n  ),\n  {\n    variants: {\n      variant: {\n        solid: \"rounded-md bg-background shadow-xs\",\n        underline: \"bg-primary\",\n      },\n    },\n    defaultVariants: {\n      variant: \"solid\",\n    },\n  },\n);\n\nconst tabsTriggerVariants = cva(\n  cn(\n    \"inline-flex items-center justify-center gap-2 text-sm font-medium whitespace-nowrap\",\n    \"transition-colors duration-[var(--duration-fast)]\",\n    \"disabled:pointer-events-none disabled:opacity-55\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n    focusRing,\n  ),\n  {\n    variants: {\n      variant: {\n        solid: cn(\n          \"h-7 rounded-md px-3 text-muted-foreground\",\n          \"hover:text-foreground\",\n          \"data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs\",\n        ),\n        underline: cn(\n          \"-mb-px h-9 border-b-2 border-transparent px-0.5 text-muted-foreground\",\n          \"hover:text-foreground\",\n          \"data-[state=active]:border-primary data-[state=active]:text-foreground\",\n        ),\n      },\n    },\n    defaultVariants: {\n      variant: \"solid\",\n    },\n  },\n);\n\nexport interface TabsListProps\n  extends\n    ComponentPropsWithRef<typeof TabsPrimitive.List>,\n    VariantProps<typeof tabsListVariants> {}\n\nexport function TabsList({ className, variant, indicator, children, ...props }: TabsListProps) {\n  const slide = indicator === \"slide\";\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant ?? \"solid\"}\n      data-indicator={slide ? \"slide\" : undefined}\n      className={cn(tabsListVariants({ variant, indicator }), className)}\n      {...props}\n    >\n      {slide ? <TabsIndicator variant={variant ?? \"solid\"} /> : null}\n      {children}\n    </TabsPrimitive.List>\n  );\n}\n\ntype Box = Pick<CSSProperties, \"width\" | \"height\" | \"transform\">;\n\n/**\n * Where the indicator should sit, from the active tab's offset box.\n *\n * Offsets are physical and relative to the list, so this is right in both\n * reading directions and in a vertical list without knowing which it is.\n */\nfunction measure(list: HTMLElement, variant: \"solid\" | \"underline\"): Box | null {\n  const active = list.querySelector<HTMLElement>('[role=\"tab\"][data-state=\"active\"]');\n  if (!active) return null;\n  let { offsetLeft: x, offsetTop: y, offsetWidth: width, offsetHeight: height } = active;\n  if (active.offsetParent !== list) {\n    // A trigger wrapped in its own positioned element (a tooltip anchor, say)\n    // is offset from that wrapper, not the list; fall back to the rects.\n    const from = list.getBoundingClientRect();\n    const to = active.getBoundingClientRect();\n    x = to.left - from.left - list.clientLeft;\n    y = to.top - from.top - list.clientTop;\n    width = to.width;\n    height = to.height;\n  }\n  if (variant === \"underline\") {\n    // The trigger's own 2px bottom border is where the bar goes.\n    return {\n      width,\n      height: 2,\n      transform: `translate(${String(x)}px, ${String(y + height - 2)}px)`,\n    };\n  }\n  return { width, height, transform: `translate(${String(x)}px, ${String(y)}px)` };\n}\n\n/**\n * The sliding pill. Decorative — the active tab is announced by\n * aria-selected — so it is hidden from assistive technology.\n */\nfunction TabsIndicator({ variant }: { variant: \"solid\" | \"underline\" }) {\n  const [box, setBox] = useState<Box | null>(null);\n  const node = useRef<HTMLSpanElement | null>(null);\n\n  const update = useCallback(() => {\n    const list = node.current?.parentElement;\n    if (!list) return;\n    const next = measure(list, variant);\n    setBox((previous) =>\n      previous?.transform === next?.transform &&\n      previous?.width === next?.width &&\n      previous?.height === next?.height\n        ? previous\n        : next,\n    );\n  }, [variant]);\n\n  useLayoutEffect(() => {\n    const list = node.current?.parentElement;\n    if (!list) return;\n    update();\n    // Selection changes arrive as data-state flips on the triggers; size\n    // changes (fonts loading, labels changing, the list reflowing) do not.\n    const mutations = new MutationObserver(update);\n    mutations.observe(list, {\n      attributes: true,\n      attributeFilter: [\"data-state\"],\n      subtree: true,\n    });\n    const resizes = new ResizeObserver(update);\n    resizes.observe(list);\n    for (const tab of list.querySelectorAll('[role=\"tab\"]')) resizes.observe(tab);\n    return () => {\n      mutations.disconnect();\n      resizes.disconnect();\n    };\n  }, [update]);\n\n  return (\n    <span\n      ref={node}\n      aria-hidden=\"true\"\n      data-slot=\"tabs-indicator\"\n      data-ready={box ? \"\" : undefined}\n      className={cn(tabsIndicatorVariants({ variant }), !box && \"hidden\")}\n      // Anchored to the physical top-left because the offsets it is moved by\n      // are physical too.\n      style={box ? { top: 0, left: 0, ...box } : undefined}\n    />\n  );\n}\n\nexport interface TabsTriggerProps\n  extends\n    ComponentPropsWithRef<typeof TabsPrimitive.Trigger>,\n    VariantProps<typeof tabsTriggerVariants> {}\n\nexport function TabsTrigger({ className, variant, ...props }: TabsTriggerProps) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(tabsTriggerVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nexport type TabsContentProps = ComponentPropsWithRef<typeof TabsPrimitive.Content>;\n\nexport function TabsContent({ className, ...props }: TabsContentProps) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"mt-4 outline-none\", focusRing, className)}\n      {...props}\n    />\n  );\n}\n\nexport { tabsIndicatorVariants, tabsListVariants, tabsTriggerVariants };\n"],"mappings":"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"}

package/dist/components/tags-input/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: [],
 	registryDependencies: [],
 	files: ["tags-input.tsx"],
-	a11y: "No WAI-ARIA pattern covers a token field, and the near misses misdescribe it — these are committed values, not options being chosen, so calling the container a listbox would promise navigation that does not exist. It is a labelled group holding a list, with a remove button per token carrying the tag in its accessible name. An invalid token's reason is inside the token, so it is announced with it rather than as a detached error. Additions, removals and refusals all reach a polite live region, because a refusal that looks like nothing happening is the failure this component exists to prevent. Remove buttons sit in the natural tab order rather than behind a roving tabindex: it costs a tab stop per token, and buys a pattern every assistive technology already understands."
+	a11y: "No WAI-ARIA pattern covers a token field, and the near misses misdescribe it — these are committed values, not options being chosen, so calling the container a listbox would promise navigation that does not exist. It is a labelled group holding a list, with a remove button per token carrying the tag in its accessible name. An invalid token's reason is inside the token, so it is announced with it rather than as a detached error. Additions, removals and refusals all reach a polite live region, because a refusal that looks like nothing happening is the failure this component exists to prevent. Remove buttons sit in the natural tab order rather than behind a roving tabindex: it costs a tab stop per token, and buys a pattern every assistive technology already understands. With animateExit, a removed token lingers only as an aria-hidden, inert copy while it animates out."
 });
 //#endregion
 export { meta };

package/dist/components/tags-input/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/tags-input/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"tags-input\",\n  title: \"Tags Input\",\n  description:\n    \"A list of short values, where invalid entries stay visible instead of vanishing.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"tags-input.tsx\"],\n  a11y:\n    \"No WAI-ARIA pattern covers a token field, and the near misses misdescribe it — these are \" +\n    \"committed values, not options being chosen, so calling the container a listbox would promise \" +\n    \"navigation that does not exist. It is a labelled group holding a list, with a remove button \" +\n    \"per token carrying the tag in its accessible name. An invalid token's reason is inside the \" +\n    \"token, so it is announced with it rather than as a detached error. Additions, removals and \" +\n    \"refusals all reach a polite live region, because a refusal that looks like nothing happening \" +\n    \"is the failure this component exists to prevent. Remove buttons sit in the natural tab order \" +\n    \"rather than behind a roving tabindex: it costs a tab stop per token, and buys a pattern every \" +\n    \"assistive technology already understands.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO,CAAC,gBAAgB;CACxB,MACE;AASJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/tags-input/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"tags-input\",\n  title: \"Tags Input\",\n  description:\n    \"A list of short values, where invalid entries stay visible instead of vanishing.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"tags-input.tsx\"],\n  a11y:\n    \"No WAI-ARIA pattern covers a token field, and the near misses misdescribe it — these are \" +\n    \"committed values, not options being chosen, so calling the container a listbox would promise \" +\n    \"navigation that does not exist. It is a labelled group holding a list, with a remove button \" +\n    \"per token carrying the tag in its accessible name. An invalid token's reason is inside the \" +\n    \"token, so it is announced with it rather than as a detached error. Additions, removals and \" +\n    \"refusals all reach a polite live region, because a refusal that looks like nothing happening \" +\n    \"is the failure this component exists to prevent. Remove buttons sit in the natural tab order \" +\n    \"rather than behind a roving tabindex: it costs a tab stop per token, and buys a pattern every \" +\n    \"assistive technology already understands.\" +\n    \" With animateExit, a removed token lingers only as an aria-hidden, inert copy while it animates out.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO,CAAC,gBAAgB;CACxB,MACE;AAUJ,CAAC"}

package/dist/components/tags-input/tags-input.d.ts

@@ -40,8 +40,14 @@ interface TagsInputProps extends Omit<ComponentPropsWithRef<"div">, "onChange" |
   placeholder?: string;
   disabled?: boolean;
   inputProps?: Omit<ComponentPropsWithRef<"input">, "value" | "onChange" | "disabled">;
+  /**
+   * Lets a removed tag blur and drop away before it leaves the DOM. The
+   * departing copy is `aria-hidden` and inert. Off by default, because the old
+   * token briefly remains in the markup. Tags added after mount always blur in.
+   */
+  animateExit?: boolean;
 }
-declare function TagsInput({ className, value, onValueChange, label, delimiters, validate, allowDuplicates, max, placeholder, disabled, inputProps, ...props }: TagsInputProps): import("react").JSX.Element;
+declare function TagsInput({ className, value, onValueChange, label, delimiters, validate, allowDuplicates, max, placeholder, disabled, inputProps, animateExit, ...props }: TagsInputProps): import("react").JSX.Element;
 //#endregion
 export { TagValidator, TagsInput, TagsInputProps };
 //# sourceMappingURL=tags-input.d.ts.map

package/dist/components/tags-input/tags-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tags-input.d.ts","names":[],"sources":["../../../src/components/tags-input/tags-input.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;KAmCY,gBAAgB,aAAa;UAExB,uBAAuB,KACtC;EAGA;EACA,gBAAgB;;EAEhB;;EAEA;;;;;EAKA,WAAW;;EAEX;;EAEA;EACA;EACA;EACA,aAAa,KAAK;;iBAaJ,YACd,WACA,OACA,eACA,OACA,YACA,UACA,iBACA,KACA,aACA,UACA,eACG,SACF,iCAAc,IAAA"}
+{"version":3,"file":"tags-input.d.ts","names":[],"sources":["../../../src/components/tags-input/tags-input.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;KAuCY,gBAAgB,aAAa;UAExB,uBAAuB,KACtC;EAGA;EACA,gBAAgB;;EAEhB;;EAEA;;;;;EAKA,WAAW;;EAEX;;EAEA;EACA;EACA;EACA,aAAa,KAAK;;;;;;EAMlB;;iBAiDc,YACd,WACA,OACA,eACA,OACA,YACA,UACA,iBACA,KACA,aACA,UACA,YACA,gBACG,SACF,iCAAc,IAAA"}