@seekalfred/primitives 0.5.1 → 0.7.1

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

package/dist/time-picker/time-picker.js

@@ -0,0 +1,201 @@
+"use client";
+import { cn, cnAll } from "../lib/cn.js";
+import { useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { labelVariants } from "../label/label.js";
+import { RollingValue } from "../lib/rolling-value.js";
+import { selectTriggerVariants, selectVariants } from "../select/select.js";
+import { cva } from "class-variance-authority";
+import { forwardRef, useMemo, useRef, useState } from "react";
+import { Button, Label, ListBox, ListBoxItem, Popover, Select, SelectValue, Text, useLocale } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Time } from "@internationalized/date";
+//#region src/time-picker/time-picker.tsx
+/**
+* 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. */
+const timePickerListVariants = cva([
+	"picker-pop w-(--trigger-width) origin-top overflow-hidden",
+	"[--pop-in-y:-6px] [--pop-in-scale:0.97] [--pop-out-y:-4px] [--pop-out-scale:0.98] [--pop-out-duration:120ms]",
+	"rounded-panel border-(length:--border-width) border-border p-1",
+	"bg-card text-card-foreground shadow-floating",
+	"box-border font-sans text-sm leading-(--leading-normal)"
+]);
+/** A time. The highlight changes almost at once (the arrows move it often); a dot marks the chosen one. */
+const timePickerItemVariants = cva([
+	"relative flex min-h-9 cursor-pointer select-none items-center justify-between gap-2",
+	"rounded-control px-3 py-1.5 tabular-nums outline-none",
+	"text-sm leading-(--leading-normal) text-card-foreground",
+	"data-[focused]:bg-muted",
+	"motion-safe:transition-colors motion-safe:duration-80 motion-safe:ease-settle",
+	"data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width)",
+	"data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)",
+	"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)"
+]);
+const descriptionClass = "text-sm leading-(--leading-normal) text-muted-foreground";
+const pad = (value) => String(value).padStart(2, "0");
+const keyOf = (minutes) => `${pad(Math.floor(minutes / 60))}:${pad(minutes % 60)}`;
+const minutesOf = (value) => value.hour * 60 + value.minute;
+function ClockGlyph() {
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: "text-muted-foreground",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "5.5"
+		}), /* @__PURE__ */ jsx("path", { d: "M8 5v3l2 1.5" })]
+	});
+}
+/** The chevron turns half a turn while the list is open, on the gentle spring. */
+function Chevron() {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.75",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: "text-muted-foreground motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-aria-expanded/trigger:rotate-180",
+		children: /* @__PURE__ */ jsx("path", { d: "m4 6 4 4 4-4" })
+	});
+}
+/**
+* The list of times. It opens centred on the chosen time (or at the top with
+* none), before the first frame, so there is no scroll to watch; the arrow keys
+* then keep the highlight in view, which React Aria does.
+*/
+function CenteredListBox({ children }) {
+	const ref = useRef(null);
+	useIsomorphicLayoutEffect(() => {
+		const list = ref.current;
+		const chosen = list?.querySelector("[role=\"option\"][aria-selected=\"true\"]");
+		if (!list || !chosen) return;
+		list.scrollTop = chosen.offsetTop - (list.clientHeight - chosen.offsetHeight) / 2;
+	}, []);
+	return /* @__PURE__ */ jsx(ListBox, {
+		ref,
+		"data-slot": "time-picker-list",
+		className: "relative max-h-62.5 overflow-y-auto overscroll-contain outline-none",
+		children
+	});
+}
+/**
+* A time picker.
+*
+* @example
+* <TimePicker label="Start time" value={time} onChange={setTime} minuteStep={30} />
+*/
+const TimePicker = forwardRef(function TimePicker({ label, labelHidden, description, placeholder = "Select a time", value, defaultValue = null, onChange, minuteStep = 15, hourCycle = 12, size = "md", isDisabled, className }, ref) {
+	const { locale } = useLocale();
+	const [inner, setInner] = useState(defaultValue);
+	const current = value === void 0 ? inner : value;
+	const minutes = current ? minutesOf(current) : null;
+	const key = minutes === null ? null : keyOf(minutes);
+	const display = useMemo(() => {
+		const format = new Intl.DateTimeFormat(locale, {
+			hour: "numeric",
+			minute: "2-digit",
+			hourCycle: hourCycle === 24 ? "h23" : "h12",
+			timeZone: "UTC"
+		});
+		return (total) => format.format(new Date(Date.UTC(2e3, 0, 1, Math.floor(total / 60), total % 60))).replace(/\u202f/g, " ");
+	}, [locale, hourCycle]);
+	const options = useMemo(() => {
+		const all = Array.from({ length: Math.ceil(1440 / minuteStep) }, (_, i) => i * minuteStep);
+		if (minutes !== null && !all.includes(minutes)) all.push(minutes);
+		return all.sort((a, b) => a - b);
+	}, [minuteStep, minutes]);
+	const [previous, setPrevious] = useState(minutes);
+	const [dir, setDir] = useState(1);
+	if (previous !== minutes) {
+		setPrevious(minutes);
+		setDir(minutes !== null && previous !== null && minutes < previous ? -1 : 1);
+	}
+	return /* @__PURE__ */ jsxs(Select, {
+		"data-slot": "time-picker",
+		selectedKey: key,
+		onSelectionChange: (next) => {
+			if (next == null) return;
+			const [hour = 0, minute = 0] = String(next).split(":").map(Number);
+			const time = new Time(hour, minute);
+			if (value === void 0) setInner(time);
+			onChange?.(time);
+		},
+		isDisabled,
+		placeholder,
+		className: cn(selectVariants(), className),
+		children: [
+			/* @__PURE__ */ jsx(Label, {
+				"data-slot": "time-picker-label",
+				className: cnAll(labelVariants(), labelHidden && "sr-only"),
+				children: label
+			}),
+			/* @__PURE__ */ jsxs(Button, {
+				ref,
+				"data-slot": "time-picker-trigger",
+				className: selectTriggerVariants({ size }),
+				children: [
+					/* @__PURE__ */ jsx(ClockGlyph, {}),
+					/* @__PURE__ */ jsx(RollingValue, {
+						srValue: /* @__PURE__ */ jsx(SelectValue, {
+							"data-slot": "time-picker-value",
+							className: "sr-only",
+							children: ({ isPlaceholder, selectedText }) => isPlaceholder ? placeholder : selectedText
+						}),
+						swapKey: key ?? "placeholder",
+						dir: key === null ? -1 : dir,
+						children: minutes === null ? /* @__PURE__ */ jsx("span", {
+							"data-slot": "time-picker-placeholder",
+							className: "text-muted-foreground",
+							children: placeholder
+						}) : display(minutes)
+					}),
+					/* @__PURE__ */ jsx(Chevron, {})
+				]
+			}),
+			description ? /* @__PURE__ */ jsx(Text, {
+				slot: "description",
+				"data-slot": "time-picker-description",
+				className: descriptionClass,
+				children: description
+			}) : null,
+			/* @__PURE__ */ jsx(Popover, {
+				"data-slot": "time-picker-popover",
+				className: timePickerListVariants(),
+				children: /* @__PURE__ */ jsx(CenteredListBox, { children: options.map((total) => /* @__PURE__ */ jsx(ListBoxItem, {
+					id: keyOf(total),
+					textValue: display(total),
+					"data-slot": "time-picker-item",
+					className: timePickerItemVariants(),
+					children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [display(total), isSelected ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						"data-slot": "time-picker-dot",
+						className: "size-1.5 rounded-full bg-foreground"
+					}) : null] })
+				}, keyOf(total))) })
+			})
+		]
+	});
+});
+//#endregion
+export { TimePicker, timePickerItemVariants, timePickerListVariants };
+
+//# sourceMappingURL=time-picker.js.map

package/dist/time-picker/time-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.js","names":["AriaListBox","AriaSelect","AriaLabel","AriaButton","AriaSelectValue","AriaText","AriaPopover","AriaListBoxItem"],"sources":["../../src/time-picker/time-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { Time } from \"@internationalized/date\";\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useMemo, useRef, useState } from \"react\";\nimport {\n  Button as AriaButton,\n  Label as AriaLabel,\n  ListBox as AriaListBox,\n  ListBoxItem as AriaListBoxItem,\n  Popover as AriaPopover,\n  Select as AriaSelect,\n  SelectValue as AriaSelectValue,\n  Text as AriaText,\n  useLocale,\n  type TimeValue,\n} from \"react-aria-components\";\n\nimport { labelVariants } from \"../label/label.js\";\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useIsomorphicLayoutEffect } from \"../lib/motion.js\";\nimport { RollingValue } from \"../lib/rolling-value.js\";\nimport { selectTriggerVariants, selectVariants } from \"../select/select.js\";\n\n/**\n * TimePicker, a field that shows a time and opens a list of times to pick from.\n *\n * Values are `TimeValue` objects from `@internationalized/date`, as Calendar and\n * DatePicker use `DateValue` (ADR 0006), not \"HH:MM\" strings: a time of day has\n * no time zone or format of its own. Unlike those two, this one builds a `Time`\n * at runtime to hand back, so the package is a real (peer) dependency here and\n * not only a type.\n *\n * The control is a React Aria `Select`, so the list is a listbox with typeahead,\n * arrow keys and a roving highlight; the motion (the value rolling like a clock\n * face, the chevron, the list growing from the field) sits on top of it.\n */\n\n/** The list: it grows from the field, and the highlight follows the pointer and the arrows. */\nexport const timePickerListVariants = cva([\n  \"picker-pop w-(--trigger-width) origin-top overflow-hidden\",\n  // A little less offset than a date picker: this list sits close under its field.\n  \"[--pop-in-y:-6px] [--pop-in-scale:0.97] [--pop-out-y:-4px] [--pop-out-scale:0.98] [--pop-out-duration:120ms]\",\n  \"rounded-panel border-(length:--border-width) border-border p-1\",\n  \"bg-card text-card-foreground shadow-floating\",\n  \"box-border font-sans text-sm leading-(--leading-normal)\",\n]);\n\n/** A time. The highlight changes almost at once (the arrows move it often); a dot marks the chosen one. */\nexport const timePickerItemVariants = cva([\n  \"relative flex min-h-9 cursor-pointer select-none items-center justify-between gap-2\",\n  \"rounded-control px-3 py-1.5 tabular-nums outline-none\",\n  \"text-sm leading-(--leading-normal) text-card-foreground\",\n  \"data-[focused]:bg-muted\",\n  \"motion-safe:transition-colors motion-safe:duration-80 motion-safe:ease-settle\",\n  \"data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n]);\n\nconst descriptionClass = \"text-sm leading-(--leading-normal) text-muted-foreground\";\n\nconst pad = (value: number) => String(value).padStart(2, \"0\");\nconst keyOf = (minutes: number) => `${pad(Math.floor(minutes / 60))}:${pad(minutes % 60)}`;\nconst minutesOf = (value: TimeValue) => value.hour * 60 + value.minute;\n\nfunction ClockGlyph() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"text-muted-foreground\"\n    >\n      <circle cx=\"8\" cy=\"8\" r=\"5.5\" />\n      <path d=\"M8 5v3l2 1.5\" />\n    </svg>\n  );\n}\n\n/** The chevron turns half a turn while the list is open, on the gentle spring. */\nfunction Chevron() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.75\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"text-muted-foreground motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-aria-expanded/trigger:rotate-180\"\n    >\n      <path d=\"m4 6 4 4 4-4\" />\n    </svg>\n  );\n}\n\n/**\n * The list of times. It opens centred on the chosen time (or at the top with\n * none), before the first frame, so there is no scroll to watch; the arrow keys\n * then keep the highlight in view, which React Aria does.\n */\nfunction CenteredListBox({ children }: { children: React.ReactNode }) {\n  const ref = useRef<HTMLDivElement>(null);\n  useIsomorphicLayoutEffect(() => {\n    const list = ref.current;\n    const chosen = list?.querySelector<HTMLElement>('[role=\"option\"][aria-selected=\"true\"]');\n    if (!list || !chosen) return;\n    list.scrollTop = chosen.offsetTop - (list.clientHeight - chosen.offsetHeight) / 2;\n  }, []);\n  return (\n    <AriaListBox\n      ref={ref}\n      data-slot=\"time-picker-list\"\n      className=\"relative max-h-62.5 overflow-y-auto overscroll-contain outline-none\"\n    >\n      {children}\n    </AriaListBox>\n  );\n}\n\nexport interface TimePickerProps {\n  /** What is being chosen, and the control's accessible name. Required, as on Select. */\n  label: string;\n  /** Render the label for screen readers only. */\n  labelHidden?: boolean;\n  /** Help text under the control, named in `aria-describedby`. */\n  description?: string;\n  /** Shown while no time is chosen. @default \"Select a time\" */\n  placeholder?: string;\n  /** The chosen time. Controlled: pass `null` for none. */\n  value?: TimeValue | null;\n  /** The starting time when uncontrolled. @default null */\n  defaultValue?: TimeValue | null;\n  /** Called with the chosen time, as a `Time`. */\n  onChange?: (value: TimeValue) => void;\n  /** Minutes between the times in the list. @default 15 */\n  minuteStep?: 1 | 5 | 10 | 15 | 30;\n  /** 12-hour (9:00 AM) or 24-hour (09:00) times. @default 12 */\n  hourCycle?: 12 | 24;\n  /** Control scale of the trigger. @default \"md\" */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Disable the control. */\n  isDisabled?: boolean;\n  /** Extra classes for the wrapper. Merged last. */\n  className?: string;\n}\n\n/**\n * A time picker.\n *\n * @example\n * <TimePicker label=\"Start time\" value={time} onChange={setTime} minuteStep={30} />\n */\nexport const TimePicker = forwardRef<HTMLButtonElement, TimePickerProps>(function TimePicker(\n  {\n    label,\n    labelHidden,\n    description,\n    placeholder = \"Select a time\",\n    value,\n    defaultValue = null,\n    onChange,\n    minuteStep = 15,\n    hourCycle = 12,\n    size = \"md\",\n    isDisabled,\n    className,\n  },\n  ref,\n) {\n  const { locale } = useLocale();\n  const [inner, setInner] = useState<TimeValue | null>(defaultValue);\n  const current = value === undefined ? inner : value;\n  const minutes = current ? minutesOf(current) : null;\n  const key = minutes === null ? null : keyOf(minutes);\n\n  const display = useMemo(() => {\n    const format = new Intl.DateTimeFormat(locale, {\n      hour: \"numeric\",\n      minute: \"2-digit\",\n      hourCycle: hourCycle === 24 ? \"h23\" : \"h12\",\n      timeZone: \"UTC\",\n    });\n    return (total: number) =>\n      format\n        .format(new Date(Date.UTC(2000, 0, 1, Math.floor(total / 60), total % 60)))\n        .replace(/\\u202f/g, \" \");\n  }, [locale, hourCycle]);\n\n  // The list: every step of the day, plus the current time if it falls between steps.\n  const options = useMemo(() => {\n    const all = Array.from({ length: Math.ceil(1440 / minuteStep) }, (_, i) => i * minuteStep);\n    if (minutes !== null && !all.includes(minutes)) all.push(minutes);\n    return all.sort((a, b) => a - b);\n  }, [minuteStep, minutes]);\n\n  // Which way the time moved, so the shown value rolls like a clock face.\n  const [previous, setPrevious] = useState(minutes);\n  const [dir, setDir] = useState(1);\n  if (previous !== minutes) {\n    setPrevious(minutes);\n    setDir(minutes !== null && previous !== null && minutes < previous ? -1 : 1);\n  }\n\n  return (\n    <AriaSelect\n      data-slot=\"time-picker\"\n      selectedKey={key}\n      onSelectionChange={(next) => {\n        if (next == null) return;\n        const [hour = 0, minute = 0] = String(next).split(\":\").map(Number);\n        const time = new Time(hour, minute);\n        if (value === undefined) setInner(time);\n        onChange?.(time);\n      }}\n      isDisabled={isDisabled}\n      placeholder={placeholder}\n      className={cn(selectVariants(), className)}\n    >\n      <AriaLabel\n        data-slot=\"time-picker-label\"\n        className={cnAll(labelVariants(), labelHidden && \"sr-only\")}\n      >\n        {label}\n      </AriaLabel>\n      <AriaButton ref={ref} data-slot=\"time-picker-trigger\" className={selectTriggerVariants({ size })}>\n        <ClockGlyph />\n        <RollingValue\n          srValue={\n            <AriaSelectValue data-slot=\"time-picker-value\" className=\"sr-only\">\n              {({ isPlaceholder, selectedText }) => (isPlaceholder ? placeholder : selectedText)}\n            </AriaSelectValue>\n          }\n          swapKey={key ?? \"placeholder\"}\n          dir={key === null ? -1 : dir}\n        >\n          {minutes === null ? (\n            <span data-slot=\"time-picker-placeholder\" className=\"text-muted-foreground\">\n              {placeholder}\n            </span>\n          ) : (\n            display(minutes)\n          )}\n        </RollingValue>\n        <Chevron />\n      </AriaButton>\n      {description ? (\n        <AriaText slot=\"description\" data-slot=\"time-picker-description\" className={descriptionClass}>\n          {description}\n        </AriaText>\n      ) : null}\n      <AriaPopover data-slot=\"time-picker-popover\" className={timePickerListVariants()}>\n        <CenteredListBox>\n          {options.map((total) => (\n            <AriaListBoxItem\n              key={keyOf(total)}\n              id={keyOf(total)}\n              textValue={display(total)}\n              data-slot=\"time-picker-item\"\n              className={timePickerItemVariants()}\n            >\n              {({ isSelected }) => (\n                <>\n                  {display(total)}\n                  {isSelected ? (\n                    <span\n                      aria-hidden=\"true\"\n                      data-slot=\"time-picker-dot\"\n                      className=\"size-1.5 rounded-full bg-foreground\"\n                    />\n                  ) : null}\n                </>\n              )}\n            </AriaListBoxItem>\n          ))}\n        </CenteredListBox>\n      </AriaPopover>\n    </AriaSelect>\n  );\n});\n"],"mappings":"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"}

package/dist/toast/index.d.ts

@@ -1,2 +1,2 @@
-import { ToastContent, ToastRegion, ToastRegionProps, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants } from "./toast.js";
-export { type ToastContent, ToastRegion, type ToastRegionProps, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants };
+import { ToastContent, ToastRegion, ToastRegionProps, toast, toastCloseVariants, toastIconVariants, toastQueue, toastRegionVariants, toastVariants } from "./toast.js";
+export { type ToastContent, ToastRegion, type ToastRegionProps, toast, toastCloseVariants, toastIconVariants, toastQueue, toastRegionVariants, toastVariants };

package/dist/toast/index.js

@@ -1,2 +1,2 @@
-import { ToastRegion, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants } from "./toast.js";
-export { ToastRegion, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants };
+import { ToastRegion, toast, toastCloseVariants, toastIconVariants, toastQueue, toastRegionVariants, toastVariants } from "./toast.js";
+export { ToastRegion, toast, toastCloseVariants, toastIconVariants, toastQueue, toastRegionVariants, toastVariants };

package/dist/toast/toast.d.ts

@@ -36,6 +36,10 @@ export declare const toastRegionVariants: (props?: import("class-variance-author
 export declare const toastVariants: (props?: ({
   tone?: "neutral" | "success" | "warning" | "danger" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** The status icon's circle: the tone's light fill with its AA text colour. */
+export declare const toastIconVariants: (props?: ({
+  tone?: "neutral" | "success" | "warning" | "danger" | "info" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const toastCloseVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 /** What a toast carries. `title` is required: an unnamed toast announces nothing. */
 export interface ToastContent extends VariantProps<typeof toastVariants> {
@@ -43,6 +47,8 @@ export interface ToastContent extends VariantProps<typeof toastVariants> {
   title: ReactNode;
   /** Secondary detail, beneath the title. */
   description?: ReactNode;
+  /** Replaces the tone's status icon. Pass a 16px glyph; it is hidden from assistive tech. */
+  icon?: ReactNode;
 }
 /**
  * The queue every `toast()` call feeds.