@seekalfred/primitives 0.5.1 → 0.6.0

package/dist/tabs/tabs.js

@@ -1,7 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
 import { cva } from "class-variance-authority";
-import { forwardRef } from "react";
+import { forwardRef, useEffect, useMemo, useState } from "react";
 import { Tab, TabList, TabPanel, Tabs } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
 //#region src/tabs/tabs.tsx
@@ -37,13 +38,140 @@ import { jsx } from "react/jsx-runtime";
 * Aria's `shouldForceMount` on TabPanel restores the old behaviour where
 * a call site needs it.
 */
-const tabsVariants = cva(["flex flex-col gap-2 box-border font-sans"]);
+const tabsVariants = cva(["flex flex-col gap-2 box-border font-sans", "min-w-0 max-w-full"]);
 const tabListVariants = cva([
 	"inline-flex w-fit items-center justify-center gap-1",
 	"rounded-lg p-1",
 	"bg-muted text-muted-foreground",
-	"box-border"
+	"tab-highlight",
+	"box-border",
+	"max-w-full",
+	"[--fade-tabs:--spacing(6)] [--fade-tabs-from:calc(100%-var(--fade-tabs))]",
+	"data-[overflowing]:overflow-x-auto data-[overflowing]:overscroll-x-contain",
+	"data-[overflowing]:justify-start",
+	"ltr:data-[fade-start]:mask-l-from-(--fade-tabs-from) rtl:data-[fade-start]:mask-r-from-(--fade-tabs-from)",
+	"ltr:data-[fade-end]:mask-r-from-(--fade-tabs-from) rtl:data-[fade-end]:mask-l-from-(--fade-tabs-from)"
 ]);
+/**
+* Sets data-overflowing, data-fade-start and data-fade-end on a tab row
+* while its tabs are wider than its box, and on the first measurement that
+* finds it too wide, scrolls the selected tab into view INSIDE the row
+* (never the page, so a row below the fold does not drag the page to it).
+*
+* The attributes are written straight onto the element, so a scroll or a
+* resize re-renders nothing. Arrow keys need no help: React Aria keeps the
+* focused tab in view in the row that scrolls.
+*/
+const FADE_PX = 24;
+function useScrollWhenTooWide() {
+	const [row, setRow] = useState(null);
+	useEffect(() => {
+		if (!row || typeof ResizeObserver === "undefined") return;
+		let revealed = false;
+		const measure = () => {
+			const overflowing = row.scrollWidth > row.clientWidth + 1;
+			const scrolled = Math.abs(row.scrollLeft);
+			row.toggleAttribute("data-overflowing", overflowing);
+			row.toggleAttribute("data-fade-start", overflowing && scrolled > 1);
+			row.toggleAttribute("data-fade-end", overflowing && scrolled + row.clientWidth < row.scrollWidth - 1);
+			if (!overflowing || revealed) return;
+			revealed = true;
+			const selected = row.querySelector("[data-selected]");
+			if (!selected) return;
+			const fade = FADE_PX;
+			const box = row.getBoundingClientRect();
+			const tab = selected.getBoundingClientRect();
+			if (tab.left < box.left + fade) row.scrollLeft -= box.left + fade - tab.left;
+			else if (tab.right > box.right - fade) row.scrollLeft += tab.right - (box.right - fade);
+			measure();
+		};
+		const resized = new ResizeObserver(measure);
+		const watch = () => {
+			resized.disconnect();
+			resized.observe(row);
+			for (const tab of Array.from(row.children)) resized.observe(tab);
+		};
+		const added = new MutationObserver(() => {
+			watch();
+			measure();
+		});
+		watch();
+		added.observe(row, { childList: true });
+		row.addEventListener("scroll", measure, { passive: true });
+		measure();
+		return () => {
+			resized.disconnect();
+			added.disconnect();
+			row.removeEventListener("scroll", measure);
+		};
+	}, [row]);
+	return setRow;
+}
+/**
+* Places the selection highlight (see tab-highlight in styles.css) on the selected
+* tab and keeps it there as tabs resize, and tells the tabs root which way the
+* selection moved (`--tab-dir`) so the next panel arrives from that side. All of it
+* is written straight onto the elements, so no render happens. The first placement
+* has no transition; `data-hl-ready` turns it on two frames later.
+*/
+function useTabHighlight() {
+	const [row, setRow] = useState(null);
+	useEffect(() => {
+		if (!row || typeof ResizeObserver === "undefined") return;
+		let previous = null;
+		let frames = [0, 0];
+		const place = () => {
+			const selected = row.querySelector("[role=\"tab\"][data-selected]");
+			if (!selected) {
+				row.removeAttribute("data-hl");
+				previous = null;
+				return;
+			}
+			row.style.setProperty("--hl-x", `${selected.offsetLeft}px`);
+			row.style.setProperty("--hl-y", `${selected.offsetTop}px`);
+			row.style.setProperty("--hl-w", `${selected.offsetWidth}px`);
+			row.style.setProperty("--hl-h", `${selected.offsetHeight}px`);
+			row.setAttribute("data-hl", "");
+			if (previous && previous !== selected && previous.isConnected) {
+				const all = Array.from(row.querySelectorAll("[role=\"tab\"]"));
+				const forward = all.indexOf(selected) > all.indexOf(previous);
+				const flip = getComputedStyle(row).direction === "rtl";
+				const root = row.closest("[data-slot=\"tabs\"]");
+				root?.style.setProperty("--tab-dir", String(forward !== flip ? 1 : -1));
+				root?.setAttribute("data-tab-changed", "");
+			}
+			previous = selected;
+		};
+		const resized = new ResizeObserver(place);
+		const watch = () => {
+			resized.disconnect();
+			resized.observe(row);
+			for (const tab of Array.from(row.children)) resized.observe(tab);
+		};
+		const changed = new MutationObserver((records) => {
+			if (records.some((record) => record.type === "childList")) watch();
+			place();
+		});
+		watch();
+		changed.observe(row, {
+			attributes: true,
+			attributeFilter: ["data-selected"],
+			childList: true,
+			subtree: true
+		});
+		place();
+		frames[0] = requestAnimationFrame(() => {
+			frames[1] = requestAnimationFrame(() => row.setAttribute("data-hl-ready", ""));
+		});
+		return () => {
+			resized.disconnect();
+			changed.disconnect();
+			frames.forEach(cancelAnimationFrame);
+			frames = [0, 0];
+		};
+	}, [row]);
+	return setRow;
+}
 const tabVariants = cva([
 	"inline-flex flex-1 items-center justify-center gap-1.5 whitespace-nowrap",
 	"rounded-md px-2 py-1",
@@ -51,8 +179,8 @@ const tabVariants = cva([
 	"cursor-pointer select-none box-border",
 	"border-(length:--border-width) border-transparent",
 	"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
-	"data-[selected]:bg-background data-[selected]:border-border",
-	"data-[selected]:shadow-surface",
+	"not-in-data-[hl]:data-[selected]:bg-background not-in-data-[hl]:data-[selected]:border-border",
+	"not-in-data-[hl]:data-[selected]:shadow-surface",
 	"outline-none",
 	"data-[focus-visible]:outline-solid",
 	"data-[focus-visible]:outline-(length:--focus-ring-width)",
@@ -64,6 +192,7 @@ const tabVariants = cva([
 ]);
 const tabPanelVariants = cva([
 	"flex-1 box-border font-sans text-foreground",
+	"tab-panel-motion",
 	"outline-none",
 	"data-[focus-visible]:outline-solid",
 	"data-[focus-visible]:outline-(length:--focus-ring-width)",
@@ -79,8 +208,15 @@ const Tabs$1 = forwardRef(function Tabs$2({ className, ...props }, ref) {
 	});
 });
 const TabList$1 = forwardRef(function TabList$2({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(TabList, {
+	const watch = useScrollWhenTooWide();
+	const glide = useTabHighlight();
+	const merged = useMemo(() => mergeRefs(ref, watch, glide), [
 		ref,
+		watch,
+		glide
+	]);
+	return /* @__PURE__ */ jsx(TabList, {
+		ref: merged,
 		...props,
 		"data-slot": "tab-list",
 		className: cn(tabListVariants(), className)

package/dist/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":["Tabs","AriaTabs","TabList","AriaTabList","Tab","AriaTab","TabPanel","AriaTabPanel"],"sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport {\n  Tab as AriaTab,\n  TabList as AriaTabList,\n  TabPanel as AriaTabPanel,\n  Tabs as AriaTabs,\n  type TabListProps as AriaTabListProps,\n  type TabPanelProps as AriaTabPanelProps,\n  type TabProps as AriaTabProps,\n  type TabsProps as AriaTabsProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Tabs, ported from the legacy shadcn/Radix component.\n *\n * The largest legacy surface in this migration: 18 files, `TabsTrigger`\n * 51, `TabsContent` 31, `Tabs` 17, `TabsList` 17. Props: `value` 88,\n * `className` 76, `defaultValue` 12, `onValueChange` 10, `disabled` 6.\n *\n * The rename is mechanical but it touches every one of those:\n * `value` -> `selectedKey`, `defaultValue` -> `defaultSelectedKey`,\n * `onValueChange` -> `onSelectionChange`, and the `value` on each trigger\n * and panel becomes `id`. React Aria pairs a Tab to its TabPanel by that\n * id, exactly as Radix paired them by value.\n *\n * THE SELECTED TAB GAINS A BORDER, and that is a contrast fix rather than\n * a decoration. The legacy marks the selected tab with `bg-background` on\n * a `bg-muted` list -- 1.13:1, which is not a boundary anybody can see --\n * and leans on `shadow-sm` to carry the rest. Under WCAG 1.4.11 the thing\n * telling you which tab is active has to clear 3:1. `border-border` on\n * `muted` is 4.65:1 and is already in the contrast contract.\n *\n * Two bracket values are gone because check:hardcoding rejects them:\n * `p-[3px]` on the list and `h-[calc(100%-1px)]` on the trigger. The list\n * is `p-1` and the trigger sizes to the list rather than to a value one\n * pixel short of it.\n *\n * ONE BEHAVIOUR DIFFERS AND IS WORTH KNOWING. Radix keeps every mounted\n * TabsContent in the DOM and hides the inactive ones; React Aria renders\n * ONLY the selected panel. A panel that holds uncommitted form state, a\n * running video or a scroll position will lose it on tab change. React\n * Aria's `shouldForceMount` on TabPanel restores the old behaviour where\n * a call site needs it.\n */\nexport const tabsVariants = cva([\"flex flex-col gap-2 box-border font-sans\"]);\n\nexport const tabListVariants = cva([\n  \"inline-flex w-fit items-center justify-center gap-1\",\n  // p-1, not the legacy p-[3px]: a bracket value check:hardcoding rejects.\n  \"rounded-lg p-1\",\n  \"bg-muted text-muted-foreground\",\n  \"box-border\",\n]);\n\nexport const tabVariants = cva([\n  \"inline-flex flex-1 items-center justify-center gap-1.5 whitespace-nowrap\",\n  \"rounded-md px-2 py-1\",\n  \"text-sm leading-(--leading-normal) font-medium text-foreground\",\n  \"cursor-pointer select-none box-border\",\n  // A transparent border at rest so selecting one does not move the text.\n  \"border-(length:--border-width) border-transparent\",\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n\n  // The selected tab. bg-background on a muted list is 1.13:1 -- invisible\n  // as a boundary -- so the border is what satisfies WCAG 1.4.11 at\n  // 4.65:1. The fill and the shadow are the polish on top of it.\n  \"data-[selected]:bg-background data-[selected]:border-border\",\n  \"data-[selected]:shadow-surface\",\n\n  // outline-solid is load-bearing: outline-none sets --tw-outline-style to\n  // none and the width utility resolves its style from that same variable,\n  // so a focus rule can apply a width and a colour and paint nothing.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n]);\n\nexport const tabPanelVariants = cva([\n  \"flex-1 box-border font-sans text-foreground\",\n  // React Aria gives the panel tabindex=0 when it holds no focusable\n  // child, so it can take a ring it does not want at rest.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n]);\n\n/**\n * A set of panels, one visible at a time.\n *\n * @example\n * <Tabs defaultSelectedKey=\"overview\">\n *   <TabList aria-label=\"Sections\">\n *     <Tab id=\"overview\">Overview</Tab>\n *     <Tab id=\"activity\">Activity</Tab>\n *   </TabList>\n *   <TabPanel id=\"overview\">...</TabPanel>\n *   <TabPanel id=\"activity\">...</TabPanel>\n * </Tabs>\n */\nexport interface TabsProps extends Omit<AriaTabsProps, \"className\" | \"style\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaTabs ref={ref} {...props} data-slot=\"tabs\" className={cn(tabsVariants(), className)} />\n  );\n});\n\n/**\n * The row of tabs.\n *\n * `aria-label` is worth passing: a tablist is a landmark-ish grouping and\n * a page with two of them is ambiguous without one.\n */\nexport interface TabListProps extends Omit<AriaTabListProps<object>, \"className\" | \"style\"> {\n  className?: string;\n}\n\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(function TabList(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaTabList\n      ref={ref}\n      {...props}\n      data-slot=\"tab-list\"\n      className={cn(tabListVariants(), className)}\n    />\n  );\n});\n\n/** One tab. Its `id` pairs it with the panel of the same `id`. */\nexport interface TabProps extends Omit<AriaTabProps, \"className\" | \"style\"> {\n  className?: string;\n}\n\nexport const Tab = forwardRef<HTMLDivElement, TabProps>(function Tab(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaTab ref={ref} {...props} data-slot=\"tab\" className={cn(tabVariants(), className)} />\n  );\n});\n\n/** One panel. Its `id` pairs it with the tab of the same `id`. */\nexport interface TabPanelProps extends Omit<AriaTabPanelProps, \"className\" | \"style\"> {\n  className?: string;\n}\n\nexport const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaTabPanel\n      ref={ref}\n      {...props}\n      data-slot=\"tab-panel\"\n      className={cn(tabPanelVariants(), className)}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,MAAa,eAAe,IAAI,CAAC,0CAA0C,CAAC;AAE5E,MAAa,kBAAkB,IAAI;CACjC;CAEA;CACA;CACA;AACF,CAAC;AAED,MAAa,cAAc,IAAI;CAC7B;CACA;CACA;CACA;CAEA;CACA;CAKA;CACA;CAKA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;AACF,CAAC;AAED,MAAa,mBAAmB,IAAI;CAClC;CAGA;CACA;CACA;CACA;CACA;AACF,CAAC;AAoBD,MAAaA,SAAO,WAAsC,SAASA,OACjE,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACC,MAAD;EAAe;EAAK,GAAI;EAAO,aAAU;EAAO,WAAW,GAAG,aAAa,GAAG,SAAS;CAAI,CAAA;AAE/F,CAAC;AAYD,MAAaC,YAAU,WAAyC,SAASA,UACvE,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACC,SAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,gBAAgB,GAAG,SAAS;CAC3C,CAAA;AAEL,CAAC;AAOD,MAAaC,QAAM,WAAqC,SAASA,MAC/D,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACC,KAAD;EAAc;EAAK,GAAI;EAAO,aAAU;EAAM,WAAW,GAAG,YAAY,GAAG,SAAS;CAAI,CAAA;AAE5F,CAAC;AAOD,MAAaC,aAAW,WAA0C,SAASA,WACzE,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACC,UAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,iBAAiB,GAAG,SAAS;CAC5C,CAAA;AAEL,CAAC"}
+{"version":3,"file":"tabs.js","names":["Tabs","AriaTabs","TabList","AriaTabList","Tab","AriaTab","TabPanel","AriaTabPanel"],"sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useEffect, useMemo, useState } from \"react\";\nimport {\n  Tab as AriaTab,\n  TabList as AriaTabList,\n  TabPanel as AriaTabPanel,\n  Tabs as AriaTabs,\n  type TabListProps as AriaTabListProps,\n  type TabPanelProps as AriaTabPanelProps,\n  type TabProps as AriaTabProps,\n  type TabsProps as AriaTabsProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\n\n/**\n * Tabs, ported from the legacy shadcn/Radix component.\n *\n * The largest legacy surface in this migration: 18 files, `TabsTrigger`\n * 51, `TabsContent` 31, `Tabs` 17, `TabsList` 17. Props: `value` 88,\n * `className` 76, `defaultValue` 12, `onValueChange` 10, `disabled` 6.\n *\n * The rename is mechanical but it touches every one of those:\n * `value` -> `selectedKey`, `defaultValue` -> `defaultSelectedKey`,\n * `onValueChange` -> `onSelectionChange`, and the `value` on each trigger\n * and panel becomes `id`. React Aria pairs a Tab to its TabPanel by that\n * id, exactly as Radix paired them by value.\n *\n * THE SELECTED TAB GAINS A BORDER, and that is a contrast fix rather than\n * a decoration. The legacy marks the selected tab with `bg-background` on\n * a `bg-muted` list -- 1.13:1, which is not a boundary anybody can see --\n * and leans on `shadow-sm` to carry the rest. Under WCAG 1.4.11 the thing\n * telling you which tab is active has to clear 3:1. `border-border` on\n * `muted` is 4.65:1 and is already in the contrast contract.\n *\n * Two bracket values are gone because check:hardcoding rejects them:\n * `p-[3px]` on the list and `h-[calc(100%-1px)]` on the trigger. The list\n * is `p-1` and the trigger sizes to the list rather than to a value one\n * pixel short of it.\n *\n * ONE BEHAVIOUR DIFFERS AND IS WORTH KNOWING. Radix keeps every mounted\n * TabsContent in the DOM and hides the inactive ones; React Aria renders\n * ONLY the selected panel. A panel that holds uncommitted form state, a\n * running video or a scroll position will lose it on tab change. React\n * Aria's `shouldForceMount` on TabPanel restores the old behaviour where\n * a call site needs it.\n */\nexport const tabsVariants = cva([\n  \"flex flex-col gap-2 box-border font-sans\",\n  // May be narrower than its tabs: in a flex row (a toolbar beside a search\n  // field) it shrinks to the space it has instead of pushing the page wider.\n  \"min-w-0 max-w-full\",\n]);\n\nexport const tabListVariants = cva([\n  \"inline-flex w-fit items-center justify-center gap-1\",\n  // p-1, not the legacy p-[3px]: a bracket value check:hardcoding rejects.\n  \"rounded-lg p-1\",\n  \"bg-muted text-muted-foreground\",\n  // The selection highlight that glides between tabs (styles.css).\n  \"tab-highlight\",\n  \"box-border\",\n\n  // A ROW WIDER THAN ITS BOX SCROLLS INSIDE IT. Capped at the parent's\n  // width; while its tabs are wider than that, TabList sets\n  // data-overflowing and the row scrolls sideways on its own. A row that\n  // fits never carries the attribute, so nothing about it changes.\n  \"max-w-full\",\n  // How wide the fade is, and where it starts measured from the far edge.\n  \"[--fade-tabs:--spacing(6)] [--fade-tabs-from:calc(100%-var(--fade-tabs))]\",\n  \"data-[overflowing]:overflow-x-auto data-[overflowing]:overscroll-x-contain\",\n  // justify-center spills centred overflow out of BOTH sides, and a scroll\n  // box cannot reach the spill on its start side: the first tab would be\n  // cut off for good. Scrolling rows start at the start edge.\n  \"data-[overflowing]:justify-start\",\n  // The cue that there is more: the side with tabs out of view fades out.\n  // Masks are physical, so the start and end swap sides in RTL.\n  \"ltr:data-[fade-start]:mask-l-from-(--fade-tabs-from) rtl:data-[fade-start]:mask-r-from-(--fade-tabs-from)\",\n  \"ltr:data-[fade-end]:mask-r-from-(--fade-tabs-from) rtl:data-[fade-end]:mask-l-from-(--fade-tabs-from)\",\n]);\n\n/**\n * Sets data-overflowing, data-fade-start and data-fade-end on a tab row\n * while its tabs are wider than its box, and on the first measurement that\n * finds it too wide, scrolls the selected tab into view INSIDE the row\n * (never the page, so a row below the fold does not drag the page to it).\n *\n * The attributes are written straight onto the element, so a scroll or a\n * resize re-renders nothing. Arrow keys need no help: React Aria keeps the\n * focused tab in view in the row that scrolls.\n */\nconst FADE_PX = 24;\n\nfunction useScrollWhenTooWide() {\n  const [row, setRow] = useState<HTMLDivElement | null>(null);\n  useEffect(() => {\n    if (!row || typeof ResizeObserver === \"undefined\") return;\n    let revealed = false;\n    const measure = () => {\n      const overflowing = row.scrollWidth > row.clientWidth + 1;\n      // Distance from the start edge; scrollLeft runs negative in RTL.\n      const scrolled = Math.abs(row.scrollLeft);\n      row.toggleAttribute(\"data-overflowing\", overflowing);\n      row.toggleAttribute(\"data-fade-start\", overflowing && scrolled > 1);\n      row.toggleAttribute(\n        \"data-fade-end\",\n        overflowing && scrolled + row.clientWidth < row.scrollWidth - 1,\n      );\n      if (!overflowing || revealed) return;\n      revealed = true;\n      const selected = row.querySelector<HTMLElement>(\"[data-selected]\");\n      if (!selected) return;\n      // Clear of the fade: --spacing(6), the width the mask draws.\n      const fade = FADE_PX;\n      const box = row.getBoundingClientRect();\n      const tab = selected.getBoundingClientRect();\n      if (tab.left < box.left + fade) row.scrollLeft -= box.left + fade - tab.left;\n      else if (tab.right > box.right - fade) row.scrollLeft += tab.right - (box.right - fade);\n      // The scroll event lands a frame later; the fades are right on first paint.\n      measure();\n    };\n    // The row's box changes with its parent; a tab's width changes when its\n    // label does (a count that loads).\n    const resized = new ResizeObserver(measure);\n    const watch = () => {\n      resized.disconnect();\n      resized.observe(row);\n      for (const tab of Array.from(row.children)) resized.observe(tab);\n    };\n    const added = new MutationObserver(() => {\n      watch();\n      measure();\n    });\n    watch();\n    added.observe(row, { childList: true });\n    row.addEventListener(\"scroll\", measure, { passive: true });\n    measure();\n    return () => {\n      resized.disconnect();\n      added.disconnect();\n      row.removeEventListener(\"scroll\", measure);\n    };\n  }, [row]);\n  return setRow;\n}\n\n/**\n * Places the selection highlight (see tab-highlight in styles.css) on the selected\n * tab and keeps it there as tabs resize, and tells the tabs root which way the\n * selection moved (`--tab-dir`) so the next panel arrives from that side. All of it\n * is written straight onto the elements, so no render happens. The first placement\n * has no transition; `data-hl-ready` turns it on two frames later.\n */\nfunction useTabHighlight() {\n  const [row, setRow] = useState<HTMLDivElement | null>(null);\n  useEffect(() => {\n    if (!row || typeof ResizeObserver === \"undefined\") return;\n    let previous: HTMLElement | null = null;\n    let frames = [0, 0];\n    const place = () => {\n      const selected = row.querySelector<HTMLElement>('[role=\"tab\"][data-selected]');\n      if (!selected) {\n        row.removeAttribute(\"data-hl\");\n        previous = null;\n        return;\n      }\n      row.style.setProperty(\"--hl-x\", `${selected.offsetLeft}px`);\n      row.style.setProperty(\"--hl-y\", `${selected.offsetTop}px`);\n      row.style.setProperty(\"--hl-w\", `${selected.offsetWidth}px`);\n      row.style.setProperty(\"--hl-h\", `${selected.offsetHeight}px`);\n      row.setAttribute(\"data-hl\", \"\");\n      if (previous && previous !== selected && previous.isConnected) {\n        const all = Array.from(row.querySelectorAll('[role=\"tab\"]'));\n        const forward = all.indexOf(selected) > all.indexOf(previous);\n        // The row reads right to left in RTL, so the same order change is the other way.\n        const flip = getComputedStyle(row).direction === \"rtl\";\n        const root = row.closest<HTMLElement>('[data-slot=\"tabs\"]');\n        root?.style.setProperty(\"--tab-dir\", String(forward !== flip ? 1 : -1));\n        root?.setAttribute(\"data-tab-changed\", \"\");\n      }\n      previous = selected;\n    };\n    const resized = new ResizeObserver(place);\n    const watch = () => {\n      resized.disconnect();\n      resized.observe(row);\n      for (const tab of Array.from(row.children)) resized.observe(tab);\n    };\n    const changed = new MutationObserver((records) => {\n      if (records.some((record) => record.type === \"childList\")) watch();\n      place();\n    });\n    watch();\n    changed.observe(row, { attributes: true, attributeFilter: [\"data-selected\"], childList: true, subtree: true });\n    place();\n    frames[0] = requestAnimationFrame(() => {\n      frames[1] = requestAnimationFrame(() => row.setAttribute(\"data-hl-ready\", \"\"));\n    });\n    return () => {\n      resized.disconnect();\n      changed.disconnect();\n      frames.forEach(cancelAnimationFrame);\n      frames = [0, 0];\n    };\n  }, [row]);\n  return setRow;\n}\n\nexport const tabVariants = cva([\n  \"inline-flex flex-1 items-center justify-center gap-1.5 whitespace-nowrap\",\n  \"rounded-md px-2 py-1\",\n  \"text-sm leading-(--leading-normal) font-medium text-foreground\",\n  \"cursor-pointer select-none box-border\",\n  // A transparent border at rest so selecting one does not move the text.\n  \"border-(length:--border-width) border-transparent\",\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n\n  // The selected tab. bg-background on a muted list is 1.13:1 -- invisible\n  // as a boundary -- so the border is what satisfies WCAG 1.4.11 at\n  // 4.65:1. The fill and the shadow are the polish on top of it.\n  // Until the row has placed its gliding highlight (data-hl), the tab paints\n  // its own fill so there is never a frame without a boundary.\n  \"not-in-data-[hl]:data-[selected]:bg-background not-in-data-[hl]:data-[selected]:border-border\",\n  \"not-in-data-[hl]:data-[selected]:shadow-surface\",\n\n  // outline-solid is load-bearing: outline-none sets --tw-outline-style to\n  // none and the width utility resolves its style from that same variable,\n  // so a focus rule can apply a width and a colour and paint nothing.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n]);\n\nexport const tabPanelVariants = cva([\n  \"flex-1 box-border font-sans text-foreground\",\n  // Arrives from the side the new tab sits on, once the selection has changed.\n  \"tab-panel-motion\",\n  // React Aria gives the panel tabindex=0 when it holds no focusable\n  // child, so it can take a ring it does not want at rest.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n]);\n\n/**\n * A set of panels, one visible at a time.\n *\n * @example\n * <Tabs defaultSelectedKey=\"overview\">\n *   <TabList aria-label=\"Sections\">\n *     <Tab id=\"overview\">Overview</Tab>\n *     <Tab id=\"activity\">Activity</Tab>\n *   </TabList>\n *   <TabPanel id=\"overview\">...</TabPanel>\n *   <TabPanel id=\"activity\">...</TabPanel>\n * </Tabs>\n */\nexport interface TabsProps extends Omit<AriaTabsProps, \"className\" | \"style\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaTabs ref={ref} {...props} data-slot=\"tabs\" className={cn(tabsVariants(), className)} />\n  );\n});\n\n/**\n * The row of tabs.\n *\n * `aria-label` is worth passing: a tablist is a landmark-ish grouping and\n * a page with two of them is ambiguous without one.\n */\nexport interface TabListProps extends Omit<AriaTabListProps<object>, \"className\" | \"style\"> {\n  className?: string;\n}\n\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(function TabList(\n  { className, ...props },\n  ref,\n) {\n  const watch = useScrollWhenTooWide();\n  const glide = useTabHighlight();\n  // Memoised: a new callback every render would detach and reattach the row.\n  const merged = useMemo(() => mergeRefs(ref, watch, glide), [ref, watch, glide]);\n  return (\n    <AriaTabList\n      ref={merged}\n      {...props}\n      data-slot=\"tab-list\"\n      className={cn(tabListVariants(), className)}\n    />\n  );\n});\n\n/** One tab. Its `id` pairs it with the panel of the same `id`. */\nexport interface TabProps extends Omit<AriaTabProps, \"className\" | \"style\"> {\n  className?: string;\n}\n\nexport const Tab = forwardRef<HTMLDivElement, TabProps>(function Tab({ className, ...props }, ref) {\n  return <AriaTab ref={ref} {...props} data-slot=\"tab\" className={cn(tabVariants(), className)} />;\n});\n\n/** One panel. Its `id` pairs it with the tab of the same `id`. */\nexport interface TabPanelProps extends Omit<AriaTabPanelProps, \"className\" | \"style\"> {\n  className?: string;\n}\n\nexport const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaTabPanel\n      ref={ref}\n      {...props}\n      data-slot=\"tab-panel\"\n      className={cn(tabPanelVariants(), className)}\n    />\n  );\n});\n"],"mappings":"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"}

package/dist/textarea/textarea.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import { TextAreaProps } from "react-aria-components";
 //#region src/textarea/textarea.d.ts
 /**
@@ -21,6 +22,28 @@ export declare const textareaVariants: (props?: import("class-variance-authority
 export interface TextareaProps extends Omit<TextAreaProps, "className" | "style"> {
   /** Extra classes. Merged last, so they win conflicts with ours. */
   className?: string;
+  /**
+   * A visible label above the field, tied to it with `htmlFor`. Passing any of
+   * `label`, `description` or `error` (even as `undefined`) wraps the field;
+   * with none of them the DOM is exactly the bare textarea. Do not also pass
+   * `aria-label`: it wins over the label (WCAG 2.5.3). Ignored inside a React
+   * Aria `TextField`, which supplies its own label and messages.
+   */
+  label?: ReactNode;
+  /**
+   * Helper text under the field, named by `aria-describedby`. A count in it,
+   * such as "12/200 characters", rolls digit by digit as it changes. Opens on a
+   * spring when it appears after mount; nothing animates on first render, and
+   * reduced motion swaps it instantly. A string, because the copy is animated
+   * word by word.
+   */
+  description?: string;
+  /**
+   * Error text under the field. Sets `aria-invalid`, so the field takes its
+   * invalid border, and is announced as an alert when it appears. An empty or
+   * `undefined` value closes the row.
+   */
+  error?: string;
 }
 export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 //#endregion

package/dist/textarea/textarea.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { fieldSurfaceVariants } from "../lib/field-surface.js";
+import { FieldShell, hasFieldProps, useFieldWiring } from "../lib/field-shell.js";
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { TextArea } from "react-aria-components";
@@ -25,13 +26,34 @@ const textareaVariants = cva([
 	"resize-y",
 	"leading-(--leading-normal)"
 ]);
-const Textarea = forwardRef(function Textarea({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(TextArea, {
+const Textarea = forwardRef(function Textarea(allProps, ref) {
+	const { className, label, description, error, ...props } = allProps;
+	const field = useFieldWiring({
+		enabled: hasFieldProps(allProps),
+		id: props.id,
+		describedBy: props["aria-describedby"],
+		invalid: props["aria-invalid"],
+		description,
+		error
+	});
+	const textarea = /* @__PURE__ */ jsx(TextArea, {
 		ref,
 		...props,
+		...field.controlProps,
 		"data-slot": "textarea",
 		className: cn(textareaVariants(), className)
 	});
+	if (!field.active) return textarea;
+	return /* @__PURE__ */ jsx(FieldShell, {
+		label,
+		controlId: field.controlId,
+		description,
+		hintId: field.hintId,
+		error,
+		errorId: field.errorId,
+		wordExit: "quick",
+		children: textarea
+	});
 });
 //#endregion
 export { Textarea, textareaVariants };

package/dist/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":["AriaTextArea"],"sources":["../../src/textarea/textarea.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport {\n  TextArea as AriaTextArea,\n  type TextAreaProps as AriaTextAreaProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\n\n/**\n * Textarea, ported from the legacy component onto React Aria's TextArea.\n *\n * Census: 3 files, 3 uses -- `value`, `onChange`, `placeholder`, `id`,\n * `ref`. All native props, all still native here.\n *\n * The surface comes from `fieldSurfaceVariants`, shared with Input. The two\n * legacy files styled it separately and had already drifted -- different\n * background, different focus ring, invalid styling on one and not the\n * other -- and none of those differences was a decision anyone made.\n */\nexport const textareaVariants = cva([\n  fieldSurfaceVariants(),\n\n  // min-h-20 is 80px, the legacy min-h-[80px] -- but as a spacing-scale step\n  // rather than a bracket value, which check:hardcoding rejects.\n  \"min-h-20\",\n  \"px-(--density-control-pad-md) py-(--density-control-pad-sm)\",\n  \"text-base\",\n\n  // A textarea is resizable by the user agent, and horizontal resize breaks\n  // any layout it sits in. Vertical only.\n  \"resize-y\",\n  // Height is content, not a control slot, so the line-height has to be set\n  // explicitly -- unset it computes to `normal`, which varies with the\n  // font's own metrics.\n  \"leading-(--leading-normal)\",\n]);\n\n/**\n * A multi-line text field.\n *\n * @example\n * <Textarea placeholder=\"Tell us more\" value={v} onChange={e => set(e.target.value)} />\n */\nexport interface TextareaProps extends Omit<AriaTextAreaProps, \"className\" | \"style\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaTextArea\n      ref={ref}\n      {...props}\n      data-slot=\"textarea\"\n      className={cn(textareaVariants(), className)}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuBA,MAAa,mBAAmB,IAAI;CAClC,qBAAqB;CAIrB;CACA;CACA;CAIA;CAIA;AACF,CAAC;AAaD,MAAa,WAAW,WAA+C,SAAS,SAC9E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,UAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,iBAAiB,GAAG,SAAS;CAC5C,CAAA;AAEL,CAAC"}
+{"version":3,"file":"textarea.js","names":["AriaTextArea"],"sources":["../../src/textarea/textarea.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  TextArea as AriaTextArea,\n  type TextAreaProps as AriaTextAreaProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { FieldShell, hasFieldProps, useFieldWiring } from \"../lib/field-shell.js\";\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\n\n/**\n * Textarea, ported from the legacy component onto React Aria's TextArea.\n *\n * Census: 3 files, 3 uses -- `value`, `onChange`, `placeholder`, `id`,\n * `ref`. All native props, all still native here.\n *\n * The surface comes from `fieldSurfaceVariants`, shared with Input. The two\n * legacy files styled it separately and had already drifted -- different\n * background, different focus ring, invalid styling on one and not the\n * other -- and none of those differences was a decision anyone made.\n */\nexport const textareaVariants = cva([\n  fieldSurfaceVariants(),\n\n  // min-h-20 is 80px, the legacy min-h-[80px] -- but as a spacing-scale step\n  // rather than a bracket value, which check:hardcoding rejects.\n  \"min-h-20\",\n  \"px-(--density-control-pad-md) py-(--density-control-pad-sm)\",\n  \"text-base\",\n\n  // A textarea is resizable by the user agent, and horizontal resize breaks\n  // any layout it sits in. Vertical only.\n  \"resize-y\",\n  // Height is content, not a control slot, so the line-height has to be set\n  // explicitly -- unset it computes to `normal`, which varies with the\n  // font's own metrics.\n  \"leading-(--leading-normal)\",\n]);\n\n/**\n * A multi-line text field.\n *\n * @example\n * <Textarea placeholder=\"Tell us more\" value={v} onChange={e => set(e.target.value)} />\n */\nexport interface TextareaProps extends Omit<AriaTextAreaProps, \"className\" | \"style\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * A visible label above the field, tied to it with `htmlFor`. Passing any of\n   * `label`, `description` or `error` (even as `undefined`) wraps the field;\n   * with none of them the DOM is exactly the bare textarea. Do not also pass\n   * `aria-label`: it wins over the label (WCAG 2.5.3). Ignored inside a React\n   * Aria `TextField`, which supplies its own label and messages.\n   */\n  label?: ReactNode;\n  /**\n   * Helper text under the field, named by `aria-describedby`. A count in it,\n   * such as \"12/200 characters\", rolls digit by digit as it changes. Opens on a\n   * spring when it appears after mount; nothing animates on first render, and\n   * reduced motion swaps it instantly. A string, because the copy is animated\n   * word by word.\n   */\n  description?: string;\n  /**\n   * Error text under the field. Sets `aria-invalid`, so the field takes its\n   * invalid border, and is announced as an alert when it appears. An empty or\n   * `undefined` value closes the row.\n   */\n  error?: string;\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  function Textarea(allProps, ref) {\n    const { className, label, description, error, ...props } = allProps;\n    const field = useFieldWiring({\n      enabled: hasFieldProps(allProps),\n      id: props.id,\n      describedBy: props[\"aria-describedby\"],\n      invalid: props[\"aria-invalid\"],\n      description,\n      error,\n    });\n    const textarea = (\n      <AriaTextArea\n        ref={ref}\n        {...props}\n        {...field.controlProps}\n        data-slot=\"textarea\"\n        className={cn(textareaVariants(), className)}\n      />\n    );\n    if (!field.active) return textarea;\n    return (\n      <FieldShell\n        label={label}\n        controlId={field.controlId}\n        description={description}\n        hintId={field.hintId}\n        error={error}\n        errorId={field.errorId}\n        wordExit=\"quick\"\n      >\n        {textarea}\n      </FieldShell>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,mBAAmB,IAAI;CAClC,qBAAqB;CAIrB;CACA;CACA;CAIA;CAIA;AACF,CAAC;AAmCD,MAAa,WAAW,WACtB,SAAS,SAAS,UAAU,KAAK;CAC/B,MAAM,EAAE,WAAW,OAAO,aAAa,OAAO,GAAG,UAAU;CAC3D,MAAM,QAAQ,eAAe;EAC3B,SAAS,cAAc,QAAQ;EAC/B,IAAI,MAAM;EACV,aAAa,MAAM;EACnB,SAAS,MAAM;EACf;EACA;CACF,CAAC;CACD,MAAM,WACJ,oBAACA,UAAD;EACO;EACL,GAAI;EACJ,GAAI,MAAM;EACV,aAAU;EACV,WAAW,GAAG,iBAAiB,GAAG,SAAS;CAC5C,CAAA;CAEH,IAAI,CAAC,MAAM,QAAQ,OAAO;CAC1B,OACE,oBAAC,YAAD;EACS;EACP,WAAW,MAAM;EACJ;EACb,QAAQ,MAAM;EACP;EACP,SAAS,MAAM;EACf,UAAS;EAER,UAAA;CACS,CAAA;AAEhB,CACF"}

package/dist/theme-switch/index.d.ts

@@ -0,0 +1,2 @@
+import { Theme, ThemeSwitch, ThemeSwitchProps, ThemeSwitchVariant } from "./theme-switch.js";
+export { type Theme, ThemeSwitch, type ThemeSwitchProps, type ThemeSwitchVariant };

package/dist/theme-switch/index.js

@@ -0,0 +1,2 @@
+import { ThemeSwitch } from "./theme-switch.js";
+export { ThemeSwitch };

package/dist/theme-switch/theme-switch.d.ts

@@ -0,0 +1,37 @@
+//#region src/theme-switch/theme-switch.d.ts
+export type Theme = "light" | "dark";
+/** Which way the page transition travels. The switch nudges its icon the same way; the transition itself is the caller's. */
+export type ThemeSwitchVariant = "reveal" | "eclipse" | "split" | "rise";
+export interface ThemeSwitchProps {
+  /** The current theme. The switch shows the icon for it and offers the other. */
+  theme: Theme;
+  /** @default "reveal" */
+  variant?: ThemeSwitchVariant;
+  /**
+   * Called when the switch is pressed, with the theme to move to, the variant,
+   * and the button (the origin a page transition can grow from). The component
+   * does not change the theme itself: it is controlled.
+   */
+  onThemeChange: (next: Theme, variant: ThemeSwitchVariant, trigger: HTMLElement) => void;
+  /** The accessible name. @default "Switch to light mode" / "Switch to dark mode" */
+  label?: string;
+  /** Only the icon, a square button. @default false */
+  iconOnly?: boolean;
+  /** Extra classes. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+/**
+ * A light/dark switch. The sun and the moon turn the same way, clockwise into
+ * dark and back out of it, so the swap reads as one rotation; the icon is
+ * nudged the way the page transition travels (`variant`) and eases back when
+ * the theme returns.
+ *
+ * Controlled: it shows `theme` and calls `onThemeChange`; it never changes
+ * the theme itself, so the page transition can run in the caller.
+ *
+ * @example
+ * <ThemeSwitch theme={theme} onThemeChange={(next) => setTheme(next)} />
+ */
+export declare const ThemeSwitch: import("react").ForwardRefExoticComponent<ThemeSwitchProps & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+//# sourceMappingURL=theme-switch.d.ts.map

package/dist/theme-switch/theme-switch.js

@@ -0,0 +1,123 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { pressScaleFor, useExitBackstop, useLeavingItems } from "../lib/motion.js";
+import { buttonVariants } from "../button/button.js";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/theme-switch/theme-switch.tsx
+/**
+* A stored preference usually reaches the theme prop just after hydration. That
+* correction swaps the icon in place; only changes after the first painted
+* frames animate, so a page that loads in dark mode never spins its switches.
+*/
+function useSettled() {
+	const [settled, setSettled] = useState(false);
+	useEffect(() => {
+		let second = 0;
+		const first = requestAnimationFrame(() => {
+			second = requestAnimationFrame(() => setSettled(true));
+		});
+		return () => {
+			cancelAnimationFrame(first);
+			cancelAnimationFrame(second);
+		};
+	}, []);
+	return settled;
+}
+const ANGLE = {
+	light: "30deg",
+	dark: "-30deg"
+};
+function Icon({ theme }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.75,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		className: "size-4",
+		children: theme === "light" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "4"
+		}), /* @__PURE__ */ jsx("path", { d: "M12 2v2M12 20v2m-7.07-17.07 1.41 1.41m11.32 11.32 1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" })] }) : /* @__PURE__ */ jsx("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+	});
+}
+function LeavingIcon({ id, theme, settled, onDone }) {
+	const remove = useCallback(() => onDone(id), [onDone, id]);
+	useExitBackstop(true, remove);
+	useEffect(() => {
+		if (!settled) remove();
+	}, [settled, remove]);
+	if (!settled) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		onAnimationEnd: (event) => {
+			if (event.target === event.currentTarget) remove();
+		},
+		style: { "--theme-angle": ANGLE[theme] },
+		className: "absolute grid size-4 place-items-center motion-safe:animate-theme-icon-out motion-reduce:animate-fade-out",
+		children: /* @__PURE__ */ jsx(Icon, { theme })
+	});
+}
+/**
+* A light/dark switch. The sun and the moon turn the same way, clockwise into
+* dark and back out of it, so the swap reads as one rotation; the icon is
+* nudged the way the page transition travels (`variant`) and eases back when
+* the theme returns.
+*
+* Controlled: it shows `theme` and calls `onThemeChange`; it never changes
+* the theme itself, so the page transition can run in the caller.
+*
+* @example
+* <ThemeSwitch theme={theme} onThemeChange={(next) => setTheme(next)} />
+*/
+const ThemeSwitch = forwardRef(function ThemeSwitch({ theme, variant = "reveal", onThemeChange, label, iconOnly = false, className }, ref) {
+	const settled = useSettled();
+	const next = theme === "light" ? "dark" : "light";
+	const phaseRef = useRef(null);
+	const { leaving, changed, remove } = useLeavingItems(theme, theme, () => phaseRef.current);
+	const pressStart = (event) => {
+		const target = event.target;
+		target.style.setProperty("--press-scale", pressScaleFor(target.offsetWidth));
+	};
+	return /* @__PURE__ */ jsxs(Button, {
+		ref,
+		"data-slot": "button",
+		"data-mode": theme,
+		"data-variant": variant,
+		"aria-label": label ?? "Switch to " + next + " mode",
+		"aria-pressed": theme === "dark",
+		onPressStart: pressStart,
+		onPress: (event) => onThemeChange(next, variant, event.target),
+		className: cn(buttonVariants({
+			variant: "outlineNeutral",
+			size: "sm"
+		}) + (iconOnly ? " w-(--density-control-h-sm) px-0" : ""), className),
+		children: [/* @__PURE__ */ jsxs("span", {
+			"data-settled": settled || void 0,
+			className: "theme-nudge relative inline-grid size-5 shrink-0 place-items-center",
+			children: [leaving.map((item) => /* @__PURE__ */ jsx(LeavingIcon, {
+				id: item.id,
+				theme: item.value,
+				settled,
+				onDone: remove
+			}, item.id)), /* @__PURE__ */ jsx("span", {
+				ref: phaseRef,
+				style: { "--theme-angle": ANGLE[theme] },
+				className: cn("absolute grid size-4 place-items-center", changed && settled && "motion-safe:animate-theme-icon-in motion-reduce:animate-fade-in"),
+				children: /* @__PURE__ */ jsx(Icon, { theme })
+			}, theme)]
+		}), iconOnly ? null : /* @__PURE__ */ jsx("span", {
+			className: "whitespace-nowrap",
+			children: "Switch theme"
+		})]
+	});
+});
+//#endregion
+export { ThemeSwitch };
+
+//# sourceMappingURL=theme-switch.js.map

package/dist/theme-switch/theme-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-switch.js","names":["AriaButton"],"sources":["../../src/theme-switch/theme-switch.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useCallback, useEffect, useRef, useState } from \"react\";\nimport { Button as AriaButton, type PressEvent } from \"react-aria-components\";\n\nimport { buttonVariants } from \"../button/button.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { pressScaleFor, useExitBackstop, useLeavingItems } from \"../lib/motion.js\";\n\nexport type Theme = \"light\" | \"dark\";\n/** Which way the page transition travels. The switch nudges its icon the same way; the transition itself is the caller's. */\nexport type ThemeSwitchVariant = \"reveal\" | \"eclipse\" | \"split\" | \"rise\";\n\nexport interface ThemeSwitchProps {\n  /** The current theme. The switch shows the icon for it and offers the other. */\n  theme: Theme;\n  /** @default \"reveal\" */\n  variant?: ThemeSwitchVariant;\n  /**\n   * Called when the switch is pressed, with the theme to move to, the variant,\n   * and the button (the origin a page transition can grow from). The component\n   * does not change the theme itself: it is controlled.\n   */\n  onThemeChange: (next: Theme, variant: ThemeSwitchVariant, trigger: HTMLElement) => void;\n  /** The accessible name. @default \"Switch to light mode\" / \"Switch to dark mode\" */\n  label?: string;\n  /** Only the icon, a square button. @default false */\n  iconOnly?: boolean;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\n/**\n * A stored preference usually reaches the theme prop just after hydration. That\n * correction swaps the icon in place; only changes after the first painted\n * frames animate, so a page that loads in dark mode never spins its switches.\n */\nfunction useSettled() {\n  const [settled, setSettled] = useState(false);\n  useEffect(() => {\n    let second = 0;\n    const first = requestAnimationFrame(() => {\n      second = requestAnimationFrame(() => setSettled(true));\n    });\n    return () => {\n      cancelAnimationFrame(first);\n      cancelAnimationFrame(second);\n    };\n  }, []);\n  return settled;\n}\n\nconst ANGLE = { light: \"30deg\", dark: \"-30deg\" } as const;\n\nfunction Icon({ theme }: { theme: Theme }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={1.75}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      className=\"size-4\"\n    >\n      {theme === \"light\" ? (\n        <>\n          <circle cx=\"12\" cy=\"12\" r=\"4\" />\n          <path d=\"M12 2v2M12 20v2m-7.07-17.07 1.41 1.41m11.32 11.32 1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41\" />\n        </>\n      ) : (\n        <path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\" />\n      )}\n    </svg>\n  );\n}\n\nfunction LeavingIcon({\n  id,\n  theme,\n  settled,\n  onDone,\n}: {\n  id: number;\n  theme: Theme;\n  settled: boolean;\n  onDone: (id: number) => void;\n}) {\n  const remove = useCallback(() => onDone(id), [onDone, id]);\n  useExitBackstop(true, remove);\n  // Before the switch has settled there is nothing to animate: the old icon is simply gone.\n  useEffect(() => {\n    if (!settled) remove();\n  }, [settled, remove]);\n  if (!settled) return null;\n  return (\n    <span\n      aria-hidden=\"true\"\n      onAnimationEnd={(event) => {\n        if (event.target === event.currentTarget) remove();\n      }}\n      style={{ \"--theme-angle\": ANGLE[theme] } as React.CSSProperties}\n      className=\"absolute grid size-4 place-items-center motion-safe:animate-theme-icon-out motion-reduce:animate-fade-out\"\n    >\n      <Icon theme={theme} />\n    </span>\n  );\n}\n\n/**\n * A light/dark switch. The sun and the moon turn the same way, clockwise into\n * dark and back out of it, so the swap reads as one rotation; the icon is\n * nudged the way the page transition travels (`variant`) and eases back when\n * the theme returns.\n *\n * Controlled: it shows `theme` and calls `onThemeChange`; it never changes\n * the theme itself, so the page transition can run in the caller.\n *\n * @example\n * <ThemeSwitch theme={theme} onThemeChange={(next) => setTheme(next)} />\n */\nexport const ThemeSwitch = forwardRef<HTMLButtonElement, ThemeSwitchProps>(function ThemeSwitch(\n  { theme, variant = \"reveal\", onThemeChange, label, iconOnly = false, className },\n  ref,\n) {\n  const settled = useSettled();\n  const next: Theme = theme === \"light\" ? \"dark\" : \"light\";\n  const phaseRef = useRef<HTMLSpanElement>(null);\n  const { leaving, changed, remove } = useLeavingItems<Theme>(theme, theme, () => phaseRef.current);\n\n  const pressStart = (event: PressEvent) => {\n    const target = event.target as HTMLElement;\n    target.style.setProperty(\"--press-scale\", pressScaleFor(target.offsetWidth));\n  };\n\n  return (\n    <AriaButton\n      ref={ref}\n      data-slot=\"button\"\n      data-mode={theme}\n      data-variant={variant}\n      aria-label={label ?? \"Switch to \" + next + \" mode\"}\n      aria-pressed={theme === \"dark\"}\n      onPressStart={pressStart}\n      onPress={(event) => onThemeChange(next, variant, event.target as HTMLElement)}\n      className={cn(\n        buttonVariants({ variant: \"outlineNeutral\", size: \"sm\" }) +\n          (iconOnly ? \" w-(--density-control-h-sm) px-0\" : \"\"),\n        className,\n      )}\n    >\n      <span\n        data-settled={settled || undefined}\n        className=\"theme-nudge relative inline-grid size-5 shrink-0 place-items-center\"\n      >\n        {leaving.map((item) => (\n          <LeavingIcon\n            key={item.id}\n            id={item.id}\n            theme={item.value}\n            settled={settled}\n            onDone={remove}\n          />\n        ))}\n        <span\n          key={theme}\n          ref={phaseRef}\n          style={{ \"--theme-angle\": ANGLE[theme] } as React.CSSProperties}\n          className={cn(\n            \"absolute grid size-4 place-items-center\",\n            changed && settled && \"motion-safe:animate-theme-icon-in motion-reduce:animate-fade-in\",\n          )}\n        >\n          <Icon theme={theme} />\n        </span>\n      </span>\n      {iconOnly ? null : <span className=\"whitespace-nowrap\">Switch theme</span>}\n    </AriaButton>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;AAqCA,SAAS,aAAa;CACpB,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,gBAAgB;EACd,IAAI,SAAS;EACb,MAAM,QAAQ,4BAA4B;GACxC,SAAS,4BAA4B,WAAW,IAAI,CAAC;EACvD,CAAC;EACD,aAAa;GACX,qBAAqB,KAAK;GAC1B,qBAAqB,MAAM;EAC7B;CACF,GAAG,CAAC,CAAC;CACL,OAAO;AACT;AAEA,MAAM,QAAQ;CAAE,OAAO;CAAS,MAAM;AAAS;AAE/C,SAAS,KAAK,EAAE,SAA2B;CACzC,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAa;EACb,eAAc;EACd,gBAAe;EACf,eAAY;EACZ,WAAU;EAET,UAAA,UAAU,UACT,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;EAAK,CAAA,GAC/B,oBAAC,QAAD,EAAM,GAAE,wHAAyH,CAAA,CACjI,EAAA,CAAA,IAEF,oBAAC,QAAD,EAAM,GAAE,qCAAsC,CAAA;CAE7C,CAAA;AAET;AAEA,SAAS,YAAY,EACnB,IACA,OACA,SACA,UAMC;CACD,MAAM,SAAS,kBAAkB,OAAO,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC;CACzD,gBAAgB,MAAM,MAAM;CAE5B,gBAAgB;EACd,IAAI,CAAC,SAAS,OAAO;CACvB,GAAG,CAAC,SAAS,MAAM,CAAC;CACpB,IAAI,CAAC,SAAS,OAAO;CACrB,OACE,oBAAC,QAAD;EACE,eAAY;EACZ,iBAAiB,UAAU;GACzB,IAAI,MAAM,WAAW,MAAM,eAAe,OAAO;EACnD;EACA,OAAO,EAAE,iBAAiB,MAAM,OAAO;EACvC,WAAU;EAEV,UAAA,oBAAC,MAAD,EAAa,MAAQ,CAAA;CACjB,CAAA;AAEV;;;;;;;;;;;;;AAcA,MAAa,cAAc,WAAgD,SAAS,YAClF,EAAE,OAAO,UAAU,UAAU,eAAe,OAAO,WAAW,OAAO,aACrE,KACA;CACA,MAAM,UAAU,WAAW;CAC3B,MAAM,OAAc,UAAU,UAAU,SAAS;CACjD,MAAM,WAAW,OAAwB,IAAI;CAC7C,MAAM,EAAE,SAAS,SAAS,WAAW,gBAAuB,OAAO,aAAa,SAAS,OAAO;CAEhG,MAAM,cAAc,UAAsB;EACxC,MAAM,SAAS,MAAM;EACrB,OAAO,MAAM,YAAY,iBAAiB,cAAc,OAAO,WAAW,CAAC;CAC7E;CAEA,OACE,qBAACA,QAAD;EACO;EACL,aAAU;EACV,aAAW;EACX,gBAAc;EACd,cAAY,SAAS,eAAe,OAAO;EAC3C,gBAAc,UAAU;EACxB,cAAc;EACd,UAAU,UAAU,cAAc,MAAM,SAAS,MAAM,MAAqB;EAC5E,WAAW,GACT,eAAe;GAAE,SAAS;GAAkB,MAAM;EAAK,CAAC,KACrD,WAAW,qCAAqC,KACnD,SACF;EAbF,UAAA,CAeE,qBAAC,QAAD;GACE,gBAAc,WAAW,KAAA;GACzB,WAAU;GAFZ,UAAA,CAIG,QAAQ,KAAK,SACZ,oBAAC,aAAD;IAEE,IAAI,KAAK;IACT,OAAO,KAAK;IACH;IACT,QAAQ;GACT,GALM,KAAK,EAKX,CACF,GACD,oBAAC,QAAD;IAEE,KAAK;IACL,OAAO,EAAE,iBAAiB,MAAM,OAAO;IACvC,WAAW,GACT,2CACA,WAAW,WAAW,iEACxB;IAEA,UAAA,oBAAC,MAAD,EAAa,MAAQ,CAAA;GACjB,GATC,KASD,CACF;EACL,CAAA,GAAA,WAAW,OAAO,oBAAC,QAAD;GAAM,WAAU;GAAoB,UAAA;EAAkB,CAAA,CAC/D;;AAEhB,CAAC"}

package/dist/time-picker/index.d.ts

@@ -0,0 +1,2 @@
+import { TimePicker, TimePickerProps, timePickerItemVariants, timePickerListVariants } from "./time-picker.js";
+export { TimePicker, type TimePickerProps, timePickerItemVariants, timePickerListVariants };

package/dist/time-picker/index.js

@@ -0,0 +1,2 @@
+import { TimePicker, timePickerItemVariants, timePickerListVariants } from "./time-picker.js";
+export { TimePicker, timePickerItemVariants, timePickerListVariants };

package/dist/time-picker/time-picker.d.ts

@@ -0,0 +1,54 @@
+import { TimeValue } from "react-aria-components";
+//#region src/time-picker/time-picker.d.ts
+/**
+ * TimePicker, a field that shows a time and opens a list of times to pick from.
+ *
+ * Values are `TimeValue` objects from `@internationalized/date`, as Calendar and
+ * DatePicker use `DateValue` (ADR 0006), not "HH:MM" strings: a time of day has
+ * no time zone or format of its own. Unlike those two, this one builds a `Time`
+ * at runtime to hand back, so the package is a real (peer) dependency here and
+ * not only a type.
+ *
+ * The control is a React Aria `Select`, so the list is a listbox with typeahead,
+ * arrow keys and a roving highlight; the motion (the value rolling like a clock
+ * face, the chevron, the list growing from the field) sits on top of it.
+ */
+/** The list: it grows from the field, and the highlight follows the pointer and the arrows. */
+export declare const timePickerListVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** A time. The highlight changes almost at once (the arrows move it often); a dot marks the chosen one. */
+export declare const timePickerItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export interface TimePickerProps {
+  /** What is being chosen, and the control's accessible name. Required, as on Select. */
+  label: string;
+  /** Render the label for screen readers only. */
+  labelHidden?: boolean;
+  /** Help text under the control, named in `aria-describedby`. */
+  description?: string;
+  /** Shown while no time is chosen. @default "Select a time" */
+  placeholder?: string;
+  /** The chosen time. Controlled: pass `null` for none. */
+  value?: TimeValue | null;
+  /** The starting time when uncontrolled. @default null */
+  defaultValue?: TimeValue | null;
+  /** Called with the chosen time, as a `Time`. */
+  onChange?: (value: TimeValue) => void;
+  /** Minutes between the times in the list. @default 15 */
+  minuteStep?: 1 | 5 | 10 | 15 | 30;
+  /** 12-hour (9:00 AM) or 24-hour (09:00) times. @default 12 */
+  hourCycle?: 12 | 24;
+  /** Control scale of the trigger. @default "md" */
+  size?: "sm" | "md" | "lg";
+  /** Disable the control. */
+  isDisabled?: boolean;
+  /** Extra classes for the wrapper. Merged last. */
+  className?: string;
+}
+/**
+ * A time picker.
+ *
+ * @example
+ * <TimePicker label="Start time" value={time} onChange={setTime} minuteStep={30} />
+ */
+export declare const TimePicker: import("react").ForwardRefExoticComponent<TimePickerProps & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+//# sourceMappingURL=time-picker.d.ts.map