@seekalfred/primitives 0.5.0 → 0.6.0

package/dist/icon-morph/icon-morph.js

@@ -0,0 +1,331 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { lerpPath, useSpringProgress } from "../lib/spring-progress.js";
+import { useSvgId } from "../lib/svg-id.js";
+import { useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/icon-morph/icon-morph.tsx
+/** Counts how many times `state` turned true after mount, so one-shot moments (a ring, a burst) replay on each turn on. */
+function useTurnOns(state) {
+	const [previous, setPrevious] = useState(state);
+	const [count, setCount] = useState(0);
+	if (previous !== state) {
+		setPrevious(state);
+		if (state) setCount((value) => value + 1);
+	}
+	return count;
+}
+function Frame({ size = 24, strokeWidth = 1.75, state, className, children, ...rest }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		width: size,
+		height: size,
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		"data-on": state ? "" : void 0,
+		className: cn("block flex-none overflow-visible", className),
+		...rest,
+		children
+	});
+}
+/** Menu to close: the outer lines slide to the middle as they rotate into an X, and the middle line folds away. */
+function MenuIcon({ state = false, ...props }) {
+	return /* @__PURE__ */ jsxs(Frame, {
+		state,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M4 6h16",
+				className: "icon-morph-menu-top"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M4 12h16",
+				className: "icon-morph-menu-middle"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M4 18h16",
+				className: "icon-morph-menu-bottom"
+			})
+		]
+	});
+}
+const PLAY = ["M7 4.5 L12 7.42 L12 16.58 L7 19.5 Z", "M12 7.42 L19.5 11.8 L19.5 12.2 L12 16.58 Z"];
+const PAUSE = ["M6.5 5 L10 5 L10 19 L6.5 19 Z", "M14 5 L17.5 5 L17.5 19 L14 19 Z"];
+/**
+* A pair of paths that morph between two outlines on the morph spring. The path
+* is driven from script (see useSpringProgress): CSS cannot interpolate `d` in
+* every browser.
+*/
+function MorphPaths({ from, to, state, props }) {
+	const refs = useRef([]);
+	const [initial] = useState(() => from.map((d, i) => lerpPath(d, to[i], state ? 1 : 0)));
+	useSpringProgress(state ? 1 : 0, (progress) => {
+		refs.current.forEach((path, i) => path?.setAttribute("d", lerpPath(from[i], to[i], progress)));
+	});
+	return /* @__PURE__ */ jsx(Fragment$1, { children: from.map((_, i) => /* @__PURE__ */ jsx("path", {
+		ref: (node) => {
+			refs.current[i] = node;
+		},
+		d: initial[i],
+		...props
+	}, i)) });
+}
+/** Play to pause: the triangle splits into two halves that straighten into bars. */
+function PlayPauseIcon({ state = false, ...props }) {
+	return /* @__PURE__ */ jsx(Frame, {
+		state,
+		...props,
+		children: /* @__PURE__ */ jsx(MorphPaths, {
+			from: PLAY,
+			to: PAUSE,
+			state,
+			props: {
+				fill: "currentColor",
+				strokeWidth: 1.5
+			}
+		})
+	});
+}
+/** Plus to check: each bar swings its ends to become one leg of the check. */
+function PlusCheckIcon({ state = false, ...props }) {
+	return /* @__PURE__ */ jsx(Frame, {
+		state,
+		...props,
+		children: /* @__PURE__ */ jsx(MorphPaths, {
+			from: ["M12 5 L12 19", "M5 12 L19 12"],
+			to: ["M20 6.5 L9.5 17", "M4.5 12 L9.5 17"],
+			state
+		})
+	});
+}
+/** Copy to check: the back sheet tucks under the front one, the front one settles away, and the check draws in. */
+function CopyCheckIcon({ state = false, ...props }) {
+	return /* @__PURE__ */ jsxs(Frame, {
+		state,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",
+				className: "icon-morph-copy-back"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "8",
+				y: "8",
+				width: "14",
+				height: "14",
+				rx: "2",
+				className: "icon-morph-copy-front"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M5 12.5 L9.5 17 L19 7.5",
+				pathLength: 1,
+				className: "icon-morph-copy-check"
+			})
+		]
+	});
+}
+const RAYS = Array.from({ length: 8 }, (_, index) => {
+	const angle = index * Math.PI / 4;
+	const c = Math.cos(angle);
+	const s = Math.sin(angle);
+	const r = (value) => Math.round(value * 100) / 100;
+	return "M" + r(12 + c * 7.5) + " " + r(12 + s * 7.5) + " L" + r(12 + c * 10) + " " + r(12 + s * 10);
+});
+/**
+* Sun to moon: the disc grows while a shadow slides across it from the corner, carving the crescent, and the rays turn and fold in.
+* The crescent is drawn as an outline: the disc's edge outside the shadow, and the shadow's edge inside the disc.
+*/
+function SunMoonIcon({ state = false, ...props }) {
+	const id = useSvgId();
+	return /* @__PURE__ */ jsxs(Frame, {
+		state,
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsxs("mask", {
+				id: id + "-bite",
+				maskUnits: "userSpaceOnUse",
+				x: "-8",
+				y: "-8",
+				width: "40",
+				height: "40",
+				children: [/* @__PURE__ */ jsx("rect", {
+					x: "-8",
+					y: "-8",
+					width: "40",
+					height: "40",
+					fill: "white",
+					stroke: "none"
+				}), /* @__PURE__ */ jsx("circle", {
+					cx: 30,
+					cy: -6,
+					r: 6.5,
+					fill: "black",
+					stroke: "none",
+					className: "icon-morph-sun-shadow"
+				})]
+			}), /* @__PURE__ */ jsx("clipPath", {
+				id: id + "-disc",
+				children: /* @__PURE__ */ jsx("circle", {
+					cx: 12,
+					cy: 12,
+					r: 4.5,
+					className: "icon-morph-sun-disc"
+				})
+			})] }),
+			/* @__PURE__ */ jsx("circle", {
+				cx: 12,
+				cy: 12,
+				r: 4.5,
+				mask: "url(#" + id + "-bite)",
+				className: "icon-morph-sun-disc"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: 30,
+				cy: -6,
+				r: 6.5,
+				clipPath: "url(#" + id + "-disc)",
+				className: "icon-morph-sun-shadow"
+			}),
+			/* @__PURE__ */ jsx("g", {
+				className: "icon-morph-sun-rays",
+				children: RAYS.map((d) => /* @__PURE__ */ jsx("path", { d }, d))
+			})
+		]
+	});
+}
+/** A chevron that turns on a spring, for disclosure and sort controls. */
+function ChevronIcon({ state = false, turn = 180, pointing = "down", style, ...props }) {
+	return /* @__PURE__ */ jsx(Frame, {
+		state,
+		style: {
+			"--turn": turn + "deg",
+			...style
+		},
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d: pointing === "down" ? "M6 9 L12 15 L18 9" : "M9 6 L15 12 L9 18",
+			className: "icon-morph-chevron"
+		})
+	});
+}
+const BELL = "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9";
+const CLAPPER = "M10.3 21a1.94 1.94 0 0 0 3.4 0";
+/** Notifications on and off: turning on rings the bell from its top, with the clapper lagging behind; turning off strikes it through. */
+function BellIcon({ state = false, ...props }) {
+	const id = useSvgId();
+	const rings = useTurnOns(state);
+	return /* @__PURE__ */ jsxs(Frame, {
+		state,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", {
+				id: id + "-cut",
+				maskUnits: "userSpaceOnUse",
+				x: "-4",
+				y: "-4",
+				width: "32",
+				height: "32",
+				children: [/* @__PURE__ */ jsx("rect", {
+					x: "-4",
+					y: "-4",
+					width: "32",
+					height: "32",
+					fill: "white",
+					stroke: "none"
+				}), /* @__PURE__ */ jsx("path", {
+					d: "M3 3 L21 21",
+					stroke: "black",
+					strokeWidth: 5,
+					pathLength: 1,
+					className: "icon-morph-slash"
+				})]
+			}) }),
+			/* @__PURE__ */ jsxs("g", {
+				mask: "url(#" + id + "-cut)",
+				children: [/* @__PURE__ */ jsx("g", {
+					className: cn("[transform-box:fill-box] [transform-origin:50%_0%]", rings > 0 && "motion-safe:animate-bell-ring"),
+					children: /* @__PURE__ */ jsx("path", { d: BELL })
+				}, "bell-" + rings), /* @__PURE__ */ jsx("path", {
+					d: CLAPPER,
+					className: cn(rings > 0 && "motion-safe:animate-clapper-ring")
+				}, "clapper-" + rings)]
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M3 3 L21 21",
+				pathLength: 1,
+				className: "icon-morph-slash"
+			})
+		]
+	});
+}
+const HEART = "M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z";
+const SPARKS = Array.from({ length: 7 }, (_, index) => {
+	const angle = -Math.PI / 2 + index * 2 * Math.PI / 7;
+	return {
+		x: Math.cos(angle),
+		y: Math.sin(angle),
+		r: index % 2 ? 1 : 1.4
+	};
+});
+/** Like: the heart fills with a pop, and a ring and a few sparks burst out once. Unliking simply empties it. */
+function HeartIcon({ state = false, className, ...props }) {
+	const likes = useTurnOns(state);
+	const burst = likes > 0 && state;
+	return /* @__PURE__ */ jsxs(Frame, {
+		state,
+		className: cn("icon-morph-heart", className),
+		...props,
+		children: [burst ? /* @__PURE__ */ jsxs("g", {
+			stroke: "none",
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: 12,
+				cy: 12,
+				r: 13,
+				fill: "none",
+				stroke: "currentColor",
+				className: "motion-safe:animate-heart-ring"
+			}), SPARKS.map((spark, index) => /* @__PURE__ */ jsx("circle", {
+				cx: 12,
+				cy: 12,
+				r: spark.r,
+				fill: "currentColor",
+				style: {
+					"--sx": spark.x,
+					"--sy": spark.y
+				},
+				className: "icon-morph-part motion-safe:animate-heart-spark"
+			}, index))]
+		}, "burst-" + likes) : null, /* @__PURE__ */ jsx("g", {
+			className: cn("icon-morph-part", burst && "motion-safe:animate-heart-pop"),
+			children: /* @__PURE__ */ jsx("path", {
+				d: HEART,
+				fill: "currentColor",
+				className: "icon-morph-heart-fill"
+			})
+		}, "heart-" + likes)]
+	});
+}
+const ICONS = {
+	menu: MenuIcon,
+	play: PlayPauseIcon,
+	plus: PlusCheckIcon,
+	copy: CopyCheckIcon,
+	theme: SunMoonIcon,
+	chevron: ChevronIcon,
+	bell: BellIcon,
+	heart: HeartIcon
+};
+/** One entry point for every morphing icon: pick it by `name` and drive it with `state`. */
+function IconMorph({ name, ...props }) {
+	const Icon = ICONS[name];
+	return /* @__PURE__ */ jsx(Icon, { ...props });
+}
+//#endregion
+export { BellIcon, ChevronIcon, CopyCheckIcon, HeartIcon, IconMorph, MenuIcon, PlayPauseIcon, PlusCheckIcon, SunMoonIcon };
+
+//# sourceMappingURL=icon-morph.js.map

package/dist/icon-morph/icon-morph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-morph.js","names":[],"sources":["../../src/icon-morph/icon-morph.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef, useState, type CSSProperties, type ReactNode, type SVGProps } from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { lerpPath, useSpringProgress } from \"../lib/spring-progress.js\";\nimport { useSvgId } from \"../lib/svg-id.js\";\n\nexport type IconMorphName =\n  \"menu\" | \"play\" | \"plus\" | \"copy\" | \"theme\" | \"chevron\" | \"bell\" | \"heart\";\n\nexport interface IconMorphIconProps extends Omit<SVGProps<SVGSVGElement>, \"ref\" | \"children\"> {\n  /**\n   * The second state of the icon. menu: close, play: pause, plus: check, copy: check,\n   * theme: moon, chevron: turned, bell: notifications on, heart: liked.\n   */\n  state?: boolean;\n  /** Rendered size in px. Defaults to 24. */\n  size?: number;\n  /** Stroke width in the 24 unit grid. Defaults to 1.75. */\n  strokeWidth?: number;\n}\n\n/**\n * A family of icons that morph between two states instead of swapping. Lines\n * rotate and slide into place, shapes interpolate their outlines, and a few\n * carry a small moment of their own: the bell rings when it turns on and the\n * heart bursts when liked. Every morph rides an interruptible spring, so\n * toggling quickly reverses from wherever the icon is. The icons are\n * decorative; put them inside a button that carries the accessible name and\n * `aria-pressed`.\n */\nexport interface IconMorphProps extends IconMorphIconProps {\n  name: IconMorphName;\n}\n\n/** Counts how many times `state` turned true after mount, so one-shot moments (a ring, a burst) replay on each turn on. */\nfunction useTurnOns(state: boolean) {\n  const [previous, setPrevious] = useState(state);\n  const [count, setCount] = useState(0);\n  if (previous !== state) {\n    setPrevious(state);\n    if (state) setCount((value) => value + 1);\n  }\n  return count;\n}\n\nfunction Frame({\n  size = 24,\n  strokeWidth = 1.75,\n  state,\n  className,\n  children,\n  ...rest\n}: IconMorphIconProps & { children: ReactNode }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      width={size}\n      height={size}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={strokeWidth}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      data-on={state ? \"\" : undefined}\n      className={cn(\"block flex-none overflow-visible\", className)}\n      {...rest}\n    >\n      {children}\n    </svg>\n  );\n}\n\n/** Menu to close: the outer lines slide to the middle as they rotate into an X, and the middle line folds away. */\nexport function MenuIcon({ state = false, ...props }: IconMorphIconProps) {\n  return (\n    <Frame state={state} {...props}>\n      <path d=\"M4 6h16\" className=\"icon-morph-menu-top\" />\n      <path d=\"M4 12h16\" className=\"icon-morph-menu-middle\" />\n      <path d=\"M4 18h16\" className=\"icon-morph-menu-bottom\" />\n    </Frame>\n  );\n}\n\n// Play is split down the middle into two quads, so each half can become one pause bar.\nconst PLAY = [\"M7 4.5 L12 7.42 L12 16.58 L7 19.5 Z\", \"M12 7.42 L19.5 11.8 L19.5 12.2 L12 16.58 Z\"];\nconst PAUSE = [\"M6.5 5 L10 5 L10 19 L6.5 19 Z\", \"M14 5 L17.5 5 L17.5 19 L14 19 Z\"];\n\n/**\n * A pair of paths that morph between two outlines on the morph spring. The path\n * is driven from script (see useSpringProgress): CSS cannot interpolate `d` in\n * every browser.\n */\nfunction MorphPaths({\n  from,\n  to,\n  state,\n  props,\n}: {\n  from: string[];\n  to: string[];\n  state: boolean;\n  props?: SVGProps<SVGPathElement>;\n}) {\n  const refs = useRef<(SVGPathElement | null)[]>([]);\n  // React sets `d` once, at the state it mounts in, and never again; the spring owns it after that.\n  const [initial] = useState(() => from.map((d, i) => lerpPath(d, to[i]!, state ? 1 : 0)));\n  useSpringProgress(state ? 1 : 0, (progress) => {\n    refs.current.forEach((path, i) =>\n      path?.setAttribute(\"d\", lerpPath(from[i]!, to[i]!, progress)),\n    );\n  });\n  return (\n    <>\n      {from.map((_, i) => (\n        <path\n          key={i}\n          ref={(node) => {\n            refs.current[i] = node;\n          }}\n          d={initial[i]}\n          {...props}\n        />\n      ))}\n    </>\n  );\n}\n\n/** Play to pause: the triangle splits into two halves that straighten into bars. */\nexport function PlayPauseIcon({ state = false, ...props }: IconMorphIconProps) {\n  return (\n    <Frame state={state} {...props}>\n      <MorphPaths\n        from={PLAY}\n        to={PAUSE}\n        state={state}\n        props={{ fill: \"currentColor\", strokeWidth: 1.5 }}\n      />\n    </Frame>\n  );\n}\n\n/** Plus to check: each bar swings its ends to become one leg of the check. */\nexport function PlusCheckIcon({ state = false, ...props }: IconMorphIconProps) {\n  return (\n    <Frame state={state} {...props}>\n      <MorphPaths\n        from={[\"M12 5 L12 19\", \"M5 12 L19 12\"]}\n        to={[\"M20 6.5 L9.5 17\", \"M4.5 12 L9.5 17\"]}\n        state={state}\n      />\n    </Frame>\n  );\n}\n\n/** Copy to check: the back sheet tucks under the front one, the front one settles away, and the check draws in. */\nexport function CopyCheckIcon({ state = false, ...props }: IconMorphIconProps) {\n  return (\n    <Frame state={state} {...props}>\n      <path\n        d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\n        className=\"icon-morph-copy-back\"\n      />\n      <rect x=\"8\" y=\"8\" width=\"14\" height=\"14\" rx=\"2\" className=\"icon-morph-copy-front\" />\n      <path d=\"M5 12.5 L9.5 17 L19 7.5\" pathLength={1} className=\"icon-morph-copy-check\" />\n    </Frame>\n  );\n}\n\nconst RAYS = Array.from({ length: 8 }, (_, index) => {\n  const angle = (index * Math.PI) / 4;\n  const c = Math.cos(angle);\n  const s = Math.sin(angle);\n  const r = (value: number) => Math.round(value * 100) / 100;\n  return (\n    \"M\" + r(12 + c * 7.5) + \" \" + r(12 + s * 7.5) + \" L\" + r(12 + c * 10) + \" \" + r(12 + s * 10)\n  );\n});\n\n/**\n * Sun to moon: the disc grows while a shadow slides across it from the corner, carving the crescent, and the rays turn and fold in.\n * The crescent is drawn as an outline: the disc's edge outside the shadow, and the shadow's edge inside the disc.\n */\nexport function SunMoonIcon({ state = false, ...props }: IconMorphIconProps) {\n  const id = useSvgId();\n  return (\n    <Frame state={state} {...props}>\n      <defs>\n        <mask id={id + \"-bite\"} maskUnits=\"userSpaceOnUse\" x=\"-8\" y=\"-8\" width=\"40\" height=\"40\">\n          <rect x=\"-8\" y=\"-8\" width=\"40\" height=\"40\" fill=\"white\" stroke=\"none\" />\n          <circle\n            cx={30}\n            cy={-6}\n            r={6.5}\n            fill=\"black\"\n            stroke=\"none\"\n            className=\"icon-morph-sun-shadow\"\n          />\n        </mask>\n        <clipPath id={id + \"-disc\"}>\n          <circle cx={12} cy={12} r={4.5} className=\"icon-morph-sun-disc\" />\n        </clipPath>\n      </defs>\n      <circle\n        cx={12}\n        cy={12}\n        r={4.5}\n        mask={\"url(#\" + id + \"-bite)\"}\n        className=\"icon-morph-sun-disc\"\n      />\n      <circle\n        cx={30}\n        cy={-6}\n        r={6.5}\n        clipPath={\"url(#\" + id + \"-disc)\"}\n        className=\"icon-morph-sun-shadow\"\n      />\n      <g className=\"icon-morph-sun-rays\">\n        {RAYS.map((d) => (\n          <path key={d} d={d} />\n        ))}\n      </g>\n    </Frame>\n  );\n}\n\nexport interface ChevronIconProps extends IconMorphIconProps {\n  /** Degrees the chevron turns when `state` is true. 180 flips down to up; 90 turns right to down. */\n  turn?: number;\n  /** Where the chevron points at rest. */\n  pointing?: \"down\" | \"right\";\n}\n\n/** A chevron that turns on a spring, for disclosure and sort controls. */\nexport function ChevronIcon({\n  state = false,\n  turn = 180,\n  pointing = \"down\",\n  style,\n  ...props\n}: ChevronIconProps) {\n  return (\n    <Frame state={state} style={{ \"--turn\": turn + \"deg\", ...style } as CSSProperties} {...props}>\n      <path\n        d={pointing === \"down\" ? \"M6 9 L12 15 L18 9\" : \"M9 6 L15 12 L9 18\"}\n        className=\"icon-morph-chevron\"\n      />\n    </Frame>\n  );\n}\n\nconst BELL = \"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\";\nconst CLAPPER = \"M10.3 21a1.94 1.94 0 0 0 3.4 0\";\n\n/** Notifications on and off: turning on rings the bell from its top, with the clapper lagging behind; turning off strikes it through. */\nexport function BellIcon({ state = false, ...props }: IconMorphIconProps) {\n  const id = useSvgId();\n  const rings = useTurnOns(state);\n  return (\n    <Frame state={state} {...props}>\n      <defs>\n        <mask id={id + \"-cut\"} maskUnits=\"userSpaceOnUse\" x=\"-4\" y=\"-4\" width=\"32\" height=\"32\">\n          <rect x=\"-4\" y=\"-4\" width=\"32\" height=\"32\" fill=\"white\" stroke=\"none\" />\n          <path\n            d=\"M3 3 L21 21\"\n            stroke=\"black\"\n            strokeWidth={5}\n            pathLength={1}\n            className=\"icon-morph-slash\"\n          />\n        </mask>\n      </defs>\n      <g mask={\"url(#\" + id + \"-cut)\"}>\n        <g\n          key={\"bell-\" + rings}\n          className={cn(\n            \"[transform-box:fill-box] [transform-origin:50%_0%]\",\n            rings > 0 && \"motion-safe:animate-bell-ring\",\n          )}\n        >\n          <path d={BELL} />\n        </g>\n        <path\n          key={\"clapper-\" + rings}\n          d={CLAPPER}\n          className={cn(rings > 0 && \"motion-safe:animate-clapper-ring\")}\n        />\n      </g>\n      <path d=\"M3 3 L21 21\" pathLength={1} className=\"icon-morph-slash\" />\n    </Frame>\n  );\n}\n\nconst HEART =\n  \"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\";\nconst SPARKS = Array.from({ length: 7 }, (_, index) => {\n  const angle = -Math.PI / 2 + (index * 2 * Math.PI) / 7;\n  return { x: Math.cos(angle), y: Math.sin(angle), r: index % 2 ? 1 : 1.4 };\n});\n\n/** Like: the heart fills with a pop, and a ring and a few sparks burst out once. Unliking simply empties it. */\nexport function HeartIcon({ state = false, className, ...props }: IconMorphIconProps) {\n  const likes = useTurnOns(state);\n  const burst = likes > 0 && state;\n  return (\n    <Frame state={state} className={cn(\"icon-morph-heart\", className)} {...props}>\n      {burst ? (\n        <g key={\"burst-\" + likes} stroke=\"none\">\n          <circle\n            cx={12}\n            cy={12}\n            r={13}\n            fill=\"none\"\n            stroke=\"currentColor\"\n            className=\"motion-safe:animate-heart-ring\"\n          />\n          {SPARKS.map((spark, index) => (\n            <circle\n              key={index}\n              cx={12}\n              cy={12}\n              r={spark.r}\n              fill=\"currentColor\"\n              style={{ \"--sx\": spark.x, \"--sy\": spark.y } as CSSProperties}\n              className=\"icon-morph-part motion-safe:animate-heart-spark\"\n            />\n          ))}\n        </g>\n      ) : null}\n      <g\n        key={\"heart-\" + likes}\n        className={cn(\"icon-morph-part\", burst && \"motion-safe:animate-heart-pop\")}\n      >\n        <path d={HEART} fill=\"currentColor\" className=\"icon-morph-heart-fill\" />\n      </g>\n    </Frame>\n  );\n}\n\nconst ICONS: Record<IconMorphName, (props: IconMorphIconProps) => ReactNode> = {\n  menu: MenuIcon,\n  play: PlayPauseIcon,\n  plus: PlusCheckIcon,\n  copy: CopyCheckIcon,\n  theme: SunMoonIcon,\n  chevron: ChevronIcon,\n  bell: BellIcon,\n  heart: HeartIcon,\n};\n\n/** One entry point for every morphing icon: pick it by `name` and drive it with `state`. */\nexport function IconMorph({ name, ...props }: IconMorphProps) {\n  const Icon = ICONS[name];\n  return <Icon {...props} />;\n}\n"],"mappings":"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"}

package/dist/icon-morph/index.d.ts

@@ -0,0 +1,2 @@
+import { BellIcon, ChevronIcon, ChevronIconProps, CopyCheckIcon, HeartIcon, IconMorph, IconMorphIconProps, IconMorphName, IconMorphProps, MenuIcon, PlayPauseIcon, PlusCheckIcon, SunMoonIcon } from "./icon-morph.js";
+export { BellIcon, ChevronIcon, type ChevronIconProps, CopyCheckIcon, HeartIcon, IconMorph, type IconMorphIconProps, type IconMorphName, type IconMorphProps, MenuIcon, PlayPauseIcon, PlusCheckIcon, SunMoonIcon };

package/dist/icon-morph/index.js

@@ -0,0 +1,2 @@
+import { BellIcon, ChevronIcon, CopyCheckIcon, HeartIcon, IconMorph, MenuIcon, PlayPauseIcon, PlusCheckIcon, SunMoonIcon } from "./icon-morph.js";
+export { BellIcon, ChevronIcon, CopyCheckIcon, HeartIcon, IconMorph, MenuIcon, PlayPauseIcon, PlusCheckIcon, SunMoonIcon };

package/dist/index.d.ts

@@ -1,32 +1,54 @@
 import { Accordion, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps, AccordionTrigger, AccordionTriggerProps } from "./accordion/accordion.js";
+import { Button, ButtonProps, buttonVariants } from "./button/button.js";
+import { ActionButton, ActionButtonProps } from "./action-button/action-button.js";
 import { Dialog, DialogFooter, DialogFooterProps, DialogProps, DialogTrigger, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants } from "./dialog/dialog.js";
 import { AlertDialog, AlertDialogProps } from "./alert-dialog/alert-dialog.js";
 import { Alert, AlertProps, alertVariants } from "./alert/alert.js";
 import { Avatar, AvatarProps, avatarVariants } from "./avatar/avatar.js";
 import { Badge, BadgeProps, badgeVariants } from "./badge/badge.js";
 import { BreadcrumbItem, BreadcrumbItemProps, Breadcrumbs, BreadcrumbsProps, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants } from "./breadcrumb/breadcrumb.js";
-import { Button, ButtonProps, buttonVariants } from "./button/button.js";
+import { ButtonGroup, ButtonGroupItem, ButtonGroupMenu, ButtonGroupMenuItem, ButtonGroupOrientation, ButtonGroupProps, ButtonGroupSize, ButtonGroupVariant } from "./button-group/button-group.js";
 import { Calendar, CalendarProps, CalendarRange, CalendarRangeProps, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants } from "./calendar/calendar.js";
 import { Card, CardContent, CardContentProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants } from "./card/card.js";
 import { Checkbox, CheckboxProps, checkboxBoxVariants, checkboxVariants } from "./checkbox/checkbox.js";
+import { ConfirmMorph, ConfirmMorphMode, ConfirmMorphProps, ConfirmMorphState } from "./confirm-morph/confirm-morph.js";
+import { CopyButton, CopyButtonProps } from "./copy-button/copy-button.js";
+import { datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants } from "./date-picker/picker-parts.js";
+import { DateRangePicker, DateRangePickerMessages, DateRangePickerProps, DateRangePickerValue, DateRangePreset, defaultDateRangePresets } from "./date-picker/date-range-picker.js";
+import { DatePicker, DatePickerProps } from "./date-picker/date-picker.js";
+import { EmptyState, EmptyStateProps, emptyStateActionVariants, emptyStateTextVariants, emptyStateVariants } from "./empty-state/empty-state.js";
+import { ExpandingButtonGroup, ExpandingButtonGroupItem, ExpandingButtonGroupProps, ExpandingButtonGroupSize, ExpandingButtonGroupTone } from "./expanding-button-group/expanding-button-group.js";
+import { FileDropZone, FileDropZoneProps, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants } from "./file-drop-zone/file-drop-zone.js";
+import { FilterBar, FilterBarCustomField, FilterBarField, FilterBarOption, FilterBarProps, FilterBarSelectField, filterBarChipVariants, filterBarRowVariants, filterBarVariants } from "./filter-bar/filter-bar.js";
+import { FloatingButtonGroup, FloatingButtonGroupAction, FloatingButtonGroupItem, FloatingButtonGroupOrientation, FloatingButtonGroupProps, FloatingButtonGroupSeparator, FloatingButtonGroupSize, FloatingButtonGroupVariant } from "./floating-button-group/floating-button-group.js";
+import { BellIcon, ChevronIcon, ChevronIconProps, CopyCheckIcon, HeartIcon, IconMorph, IconMorphIconProps, IconMorphName, IconMorphProps, MenuIcon, PlayPauseIcon, PlusCheckIcon, SunMoonIcon } from "./icon-morph/icon-morph.js";
 import { Input, InputProps, inputVariants } from "./input/input.js";
 import { Label, LabelProps, labelVariants } from "./label/label.js";
 import { cn, cnAll } from "./lib/cn.js";
 import { Menu, MenuItem, MenuItemProps, MenuProps, MenuSeparator, MenuTrigger, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants } from "./menu/menu.js";
+import { PageHeader, PageHeaderProps, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants } from "./page-header/page-header.js";
+import { PasswordField, PasswordFieldMessages, PasswordFieldProps, defaultPasswordFieldMessages } from "./password-field/password-field.js";
+import { EstimateStrengthOptions, PasswordRule, PasswordRuleLabels, PasswordRuleOptions, PasswordStrength, PasswordStrengthLevels, PasswordStrengthMessages, PasswordStrengthMessagesInput, PasswordStrengthProps, PasswordStrengthResult, countCodePoints, createPasswordRules, defaultPasswordRules, defaultPasswordStrengthMessages, estimateStrength } from "./password-strength/password-strength.js";
 import { Popover, PopoverProps, PopoverTrigger, popoverVariants } from "./popover/popover.js";
 import { Progress, ProgressProps, progressFillVariants, progressTrackVariants, progressVariants } from "./progress/progress.js";
 import { Radio, RadioGroup, RadioGroupProps, RadioProps, radioGroupVariants, radioVariants } from "./radio-group/radio-group.js";
 import { ScrollArea, ScrollAreaProps, scrollAreaVariants } from "./scroll-area/scroll-area.js";
+import { SearchField, SearchFieldProps } from "./search-field/search-field.js";
 import { Select, SelectItem, SelectItemProps, SelectProps, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants } from "./select/select.js";
 import { Separator, SeparatorProps, separatorVariants } from "./separator/separator.js";
 import { Sheet, SheetProps, sheetOverlayVariants, sheetPanelVariants } from "./sheet/sheet.js";
+import { SideNav, SideNavGroup, SideNavProps, SideNavSection, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants } from "./side-nav/side-nav.js";
 import { Skeleton, SkeletonProps, skeletonVariants } from "./skeleton/skeleton.js";
 import { Slider, SliderProps, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants } from "./slider/slider.js";
 import { Spinner, SpinnerProps, spinnerVariants } from "./spinner/spinner.js";
+import { SplitButton, SplitButtonAction, SplitButtonProps } from "./split-button/split-button.js";
+import { StatCard, StatCardProps, StatCardTone, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants } from "./stat-card/stat-card.js";
 import { Switch, SwitchProps, switchThumbVariants, switchTrackVariants } from "./switch/switch.js";
 import { Column, RowKey, Table, TableProps, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants } from "./table/table.js";
 import { Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, Tabs, TabsProps, tabListVariants, tabPanelVariants, tabVariants, tabsVariants } from "./tabs/tabs.js";
 import { Textarea, TextareaProps, textareaVariants } from "./textarea/textarea.js";
+import { Theme, ThemeSwitch, ThemeSwitchProps, ThemeSwitchVariant } from "./theme-switch/theme-switch.js";
+import { TimePicker, TimePickerProps, timePickerItemVariants, timePickerListVariants } from "./time-picker/time-picker.js";
 import { ToastContent, ToastRegion, ToastRegionProps, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants } from "./toast/toast.js";
 import { Tooltip, TooltipProps, TooltipTrigger, TooltipTriggerProps, tooltipVariants } from "./tooltip/tooltip.js";
-export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDialog, type AlertDialogProps, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Calendar, type CalendarProps, CalendarRange, type CalendarRangeProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, type Column, Dialog, DialogFooter, type DialogFooterProps, type DialogProps, DialogTrigger, Input, type InputProps, Label, type LabelProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSeparator, MenuTrigger, Popover, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RowKey, ScrollArea, type ScrollAreaProps, Select, SelectItem, type SelectItemProps, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableProps, Tabs, type TabsProps, Textarea, type TextareaProps, type ToastContent, ToastRegion, type ToastRegionProps, Tooltip, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, alertVariants, avatarVariants, badgeVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants, buttonVariants, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants, checkboxBoxVariants, checkboxVariants, cn, cnAll, createColumns, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants, inputVariants, labelVariants, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants, popoverVariants, progressFillVariants, progressTrackVariants, progressVariants, radioGroupVariants, radioVariants, scrollAreaVariants, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants, separatorVariants, sheetOverlayVariants, sheetPanelVariants, skeletonVariants, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants, spinnerVariants, switchThumbVariants, switchTrackVariants, tabListVariants, tabPanelVariants, tabVariants, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants, tabsVariants, textareaVariants, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants, tooltipVariants };
+export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, ActionButton, type ActionButtonProps, Alert, AlertDialog, type AlertDialogProps, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, BellIcon, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupItem, type ButtonGroupMenu, type ButtonGroupMenuItem, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonGroupSize, type ButtonGroupVariant, type ButtonProps, Calendar, type CalendarProps, CalendarRange, type CalendarRangeProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, ChevronIcon, type ChevronIconProps, type Column, ConfirmMorph, type ConfirmMorphMode, type ConfirmMorphProps, type ConfirmMorphState, CopyButton, type CopyButtonProps, CopyCheckIcon, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerMessages, type DateRangePickerProps, type DateRangePickerValue, type DateRangePreset, Dialog, DialogFooter, type DialogFooterProps, type DialogProps, DialogTrigger, EmptyState, type EmptyStateProps, type EstimateStrengthOptions, ExpandingButtonGroup, type ExpandingButtonGroupItem, type ExpandingButtonGroupProps, type ExpandingButtonGroupSize, type ExpandingButtonGroupTone, FileDropZone, type FileDropZoneProps, FilterBar, type FilterBarCustomField, type FilterBarField, type FilterBarOption, type FilterBarProps, type FilterBarSelectField, FloatingButtonGroup, type FloatingButtonGroupAction, type FloatingButtonGroupItem, type FloatingButtonGroupOrientation, type FloatingButtonGroupProps, type FloatingButtonGroupSeparator, type FloatingButtonGroupSize, type FloatingButtonGroupVariant, HeartIcon, IconMorph, type IconMorphIconProps, type IconMorphName, type IconMorphProps, Input, type InputProps, Label, type LabelProps, Menu, MenuIcon, MenuItem, type MenuItemProps, type MenuProps, MenuSeparator, MenuTrigger, PageHeader, type PageHeaderProps, PasswordField, type PasswordFieldMessages, type PasswordFieldProps, type PasswordRule, type PasswordRuleLabels, type PasswordRuleOptions, PasswordStrength, type PasswordStrengthLevels, type PasswordStrengthMessages, type PasswordStrengthMessagesInput, type PasswordStrengthProps, type PasswordStrengthResult, PlayPauseIcon, PlusCheckIcon, Popover, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RowKey, ScrollArea, type ScrollAreaProps, SearchField, type SearchFieldProps, Select, SelectItem, type SelectItemProps, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, SideNav, type SideNavGroup, type SideNavProps, type SideNavSection, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, SplitButton, type SplitButtonAction, type SplitButtonProps, StatCard, type StatCardProps, type StatCardTone, SunMoonIcon, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableProps, Tabs, type TabsProps, Textarea, type TextareaProps, type Theme, ThemeSwitch, type ThemeSwitchProps, type ThemeSwitchVariant, TimePicker, type TimePickerProps, type ToastContent, ToastRegion, type ToastRegionProps, Tooltip, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, alertVariants, avatarVariants, badgeVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants, buttonVariants, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants, checkboxBoxVariants, checkboxVariants, cn, cnAll, countCodePoints, createColumns, createPasswordRules, datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants, defaultDateRangePresets, defaultPasswordFieldMessages, defaultPasswordRules, defaultPasswordStrengthMessages, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants, emptyStateActionVariants, emptyStateTextVariants, emptyStateVariants, estimateStrength, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants, filterBarChipVariants, filterBarRowVariants, filterBarVariants, inputVariants, labelVariants, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants, popoverVariants, progressFillVariants, progressTrackVariants, progressVariants, radioGroupVariants, radioVariants, scrollAreaVariants, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants, separatorVariants, sheetOverlayVariants, sheetPanelVariants, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants, skeletonVariants, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants, spinnerVariants, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants, switchThumbVariants, switchTrackVariants, tabListVariants, tabPanelVariants, tabVariants, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants, tabsVariants, textareaVariants, timePickerItemVariants, timePickerListVariants, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants, tooltipVariants };

package/dist/index.js

@@ -1,32 +1,54 @@
 import { cn, cnAll } from "./lib/cn.js";
 import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from "./accordion/accordion.js";
+import { Button, buttonVariants } from "./button/button.js";
+import { ActionButton } from "./action-button/action-button.js";
 import { Dialog, DialogFooter, DialogTrigger, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants } from "./dialog/dialog.js";
 import { AlertDialog } from "./alert-dialog/alert-dialog.js";
 import { Alert, alertVariants } from "./alert/alert.js";
 import { Avatar, avatarVariants } from "./avatar/avatar.js";
 import { Badge, badgeVariants } from "./badge/badge.js";
 import { BreadcrumbItem, Breadcrumbs, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants } from "./breadcrumb/breadcrumb.js";
-import { Button, buttonVariants } from "./button/button.js";
+import { Menu, MenuItem, MenuSeparator, MenuTrigger, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants } from "./menu/menu.js";
+import { ButtonGroup } from "./button-group/button-group.js";
 import { Calendar, CalendarRange, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants } from "./calendar/calendar.js";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants } from "./card/card.js";
 import { Checkbox, checkboxBoxVariants, checkboxVariants } from "./checkbox/checkbox.js";
-import { Input, inputVariants } from "./input/input.js";
-import { Label, labelVariants } from "./label/label.js";
-import { Menu, MenuItem, MenuSeparator, MenuTrigger, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants } from "./menu/menu.js";
+import { ConfirmMorph } from "./confirm-morph/confirm-morph.js";
+import { CopyButton } from "./copy-button/copy-button.js";
 import { Popover, PopoverTrigger, popoverVariants } from "./popover/popover.js";
+import { datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants } from "./date-picker/picker-parts.js";
+import { DateRangePicker, defaultDateRangePresets } from "./date-picker/date-range-picker.js";
+import { DatePicker } from "./date-picker/date-picker.js";
+import { EmptyState, emptyStateActionVariants, emptyStateTextVariants, emptyStateVariants } from "./empty-state/empty-state.js";
+import { ExpandingButtonGroup } from "./expanding-button-group/expanding-button-group.js";
+import { FileDropZone, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants } from "./file-drop-zone/file-drop-zone.js";
+import { Label, labelVariants } from "./label/label.js";
+import { Select, SelectItem, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants } from "./select/select.js";
+import { FilterBar, filterBarChipVariants, filterBarRowVariants, filterBarVariants } from "./filter-bar/filter-bar.js";
+import { Tooltip, TooltipTrigger, tooltipVariants } from "./tooltip/tooltip.js";
+import { FloatingButtonGroup } from "./floating-button-group/floating-button-group.js";
+import { BellIcon, ChevronIcon, CopyCheckIcon, HeartIcon, IconMorph, MenuIcon, PlayPauseIcon, PlusCheckIcon, SunMoonIcon } from "./icon-morph/icon-morph.js";
+import { Input, inputVariants } from "./input/input.js";
+import { PageHeader, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants } from "./page-header/page-header.js";
+import { PasswordField, defaultPasswordFieldMessages } from "./password-field/password-field.js";
+import { PasswordStrength, countCodePoints, createPasswordRules, defaultPasswordRules, defaultPasswordStrengthMessages, estimateStrength } from "./password-strength/password-strength.js";
 import { Progress, progressFillVariants, progressTrackVariants, progressVariants } from "./progress/progress.js";
 import { Radio, RadioGroup, radioGroupVariants, radioVariants } from "./radio-group/radio-group.js";
 import { ScrollArea, scrollAreaVariants } from "./scroll-area/scroll-area.js";
-import { Select, SelectItem, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants } from "./select/select.js";
+import { SearchField } from "./search-field/search-field.js";
 import { Separator, separatorVariants } from "./separator/separator.js";
 import { Sheet, sheetOverlayVariants, sheetPanelVariants } from "./sheet/sheet.js";
+import { SideNav, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants } from "./side-nav/side-nav.js";
 import { Skeleton, skeletonVariants } from "./skeleton/skeleton.js";
 import { Slider, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants } from "./slider/slider.js";
 import { Spinner, spinnerVariants } from "./spinner/spinner.js";
+import { SplitButton } from "./split-button/split-button.js";
+import { StatCard, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants } from "./stat-card/stat-card.js";
 import { Switch, switchThumbVariants, switchTrackVariants } from "./switch/switch.js";
 import { Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants } from "./table/table.js";
 import { Tab, TabList, TabPanel, Tabs, tabListVariants, tabPanelVariants, tabVariants, tabsVariants } from "./tabs/tabs.js";
 import { Textarea, textareaVariants } from "./textarea/textarea.js";
+import { ThemeSwitch } from "./theme-switch/theme-switch.js";
+import { TimePicker, timePickerItemVariants, timePickerListVariants } from "./time-picker/time-picker.js";
 import { ToastRegion, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants } from "./toast/toast.js";
-import { Tooltip, TooltipTrigger, tooltipVariants } from "./tooltip/tooltip.js";
-export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, Alert, AlertDialog, Avatar, Badge, BreadcrumbItem, Breadcrumbs, Button, Calendar, CalendarRange, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Dialog, DialogFooter, DialogTrigger, Input, Label, Menu, MenuItem, MenuSeparator, MenuTrigger, Popover, PopoverTrigger, Progress, Radio, RadioGroup, ScrollArea, Select, SelectItem, Separator, Sheet, Skeleton, Slider, Spinner, Switch, Tab, TabList, TabPanel, Table, Tabs, Textarea, ToastRegion, Tooltip, TooltipTrigger, alertVariants, avatarVariants, badgeVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants, buttonVariants, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants, checkboxBoxVariants, checkboxVariants, cn, cnAll, createColumns, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants, inputVariants, labelVariants, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants, popoverVariants, progressFillVariants, progressTrackVariants, progressVariants, radioGroupVariants, radioVariants, scrollAreaVariants, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants, separatorVariants, sheetOverlayVariants, sheetPanelVariants, skeletonVariants, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants, spinnerVariants, switchThumbVariants, switchTrackVariants, tabListVariants, tabPanelVariants, tabVariants, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants, tabsVariants, textareaVariants, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants, tooltipVariants };
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, ActionButton, Alert, AlertDialog, Avatar, Badge, BellIcon, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, Calendar, CalendarRange, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ChevronIcon, ConfirmMorph, CopyButton, CopyCheckIcon, DatePicker, DateRangePicker, Dialog, DialogFooter, DialogTrigger, EmptyState, ExpandingButtonGroup, FileDropZone, FilterBar, FloatingButtonGroup, HeartIcon, IconMorph, Input, Label, Menu, MenuIcon, MenuItem, MenuSeparator, MenuTrigger, PageHeader, PasswordField, PasswordStrength, PlayPauseIcon, PlusCheckIcon, Popover, PopoverTrigger, Progress, Radio, RadioGroup, ScrollArea, SearchField, Select, SelectItem, Separator, Sheet, SideNav, Skeleton, Slider, Spinner, SplitButton, StatCard, SunMoonIcon, Switch, Tab, TabList, TabPanel, Table, Tabs, Textarea, ThemeSwitch, TimePicker, ToastRegion, Tooltip, TooltipTrigger, alertVariants, avatarVariants, badgeVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants, buttonVariants, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants, checkboxBoxVariants, checkboxVariants, cn, cnAll, countCodePoints, createColumns, createPasswordRules, datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants, defaultDateRangePresets, defaultPasswordFieldMessages, defaultPasswordRules, defaultPasswordStrengthMessages, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants, emptyStateActionVariants, emptyStateTextVariants, emptyStateVariants, estimateStrength, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants, filterBarChipVariants, filterBarRowVariants, filterBarVariants, inputVariants, labelVariants, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants, popoverVariants, progressFillVariants, progressTrackVariants, progressVariants, radioGroupVariants, radioVariants, scrollAreaVariants, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants, separatorVariants, sheetOverlayVariants, sheetPanelVariants, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants, skeletonVariants, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants, spinnerVariants, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants, switchThumbVariants, switchTrackVariants, tabListVariants, tabPanelVariants, tabVariants, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants, tabsVariants, textareaVariants, timePickerItemVariants, timePickerListVariants, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants, tooltipVariants };

package/dist/input/input.d.ts

@@ -1,5 +1,5 @@
-import { InputProps } from "react-aria-components";
 import { ReactNode } from "react";
+import { InputProps } from "react-aria-components";
 //#region src/input/input.d.ts
 /**
  * Input, ported from the legacy shadcn component onto React Aria's Input.
@@ -73,6 +73,28 @@ interface InputProps$1 extends Omit<InputProps, "className" | "style" | "size">
   startIcon?: ReactNode;
   /** Decorative glyph at the trailing edge. Same rules as {@link InputProps.startIcon}. */
   endIcon?: ReactNode;
+  /**
+   * 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 input. Do not also pass
+   * `aria-label`: it wins over the label, so the visible name is not the
+   * accessible one (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`. It opens on a
+   * spring when it appears after mount, changed words rise in and numbers roll
+   * digit by digit; 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. Opens and
+   * closes like `description`. An empty or `undefined` value closes the row.
+   */
+  error?: string;
 }
 declare const Input$1: import("react").ForwardRefExoticComponent<InputProps$1 & import("react").RefAttributes<HTMLInputElement>>;
 //#endregion