@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/app-stack/app-stack.js

@@ -0,0 +1,260 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useId, useRef, useState } from "react";
+import { LayoutGroup, MotionConfig, motion } from "motion/react";
+//#region src/components/app-stack/app-stack.tsx
+const PREFIX = "dowel-app-stack";
+const STYLES = `@keyframes ${PREFIX}-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
+@keyframes ${PREFIX}-shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
+@keyframes ${PREFIX}-in{from{opacity:0;transform:translateY(12px)}}
+[data-slot=app-stack-float]{animation:${PREFIX}-float calc(2s * var(--motion-scale, 1)) cubic-bezier(.645,.045,.355,1) var(--app-stack-delay, 0s) infinite}
+[data-slot=app-stack-shine]{animation:${PREFIX}-shine calc(1s * var(--motion-scale, 1)) linear infinite}
+[data-slot=app-stack-tile]{animation:${PREFIX}-in var(--duration-normal, 200ms) var(--ease-out-quint, ease-out) var(--app-stack-delay, 0s) both}`;
+const appStackTileVariants = cva(cn("flex size-20 flex-col items-center justify-center gap-1 rounded-xl border-2 p-2", "transition-[border-color,background-color] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", focusRing), {
+	variants: { selected: {
+		true: "border-primary bg-[color-mix(in_oklab,var(--color-primary)_10%,transparent)]",
+		false: "border-transparent bg-muted hover:border-primary"
+	} },
+	defaultVariants: { selected: false }
+});
+function Icon({ icon }) {
+	return typeof icon === "string" ? /* @__PURE__ */ jsx("img", {
+		src: icon,
+		alt: "",
+		draggable: false,
+		className: "size-full rounded-xl object-cover"
+	}) : /* @__PURE__ */ jsx("span", {
+		className: "flex size-full items-center justify-center overflow-hidden rounded-xl",
+		children: icon
+	});
+}
+function CheckIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "3",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: "size-3",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
+	});
+}
+function ChevronIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: "size-4 rotate-180",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" })
+	});
+}
+/** Stacked app icons that fan out and open into a multi-select download picker. */
+function AppStack({ className, apps, title = "Apps", triggerLabel, expanded: expandedProp, defaultExpanded = false, onExpandedChange, selected: selectedProp, defaultSelected = [], onSelectedChange, onDownload, resetAfter = 1e3, downloadLabel = "Download selected", downloadingLabel = "Downloading…", completeLabel = "Download complete", failedLabel = "Download failed", ...props }) {
+	const layout = useId();
+	const [expandedState, setExpandedState] = useState(defaultExpanded);
+	const [selectedState, setSelectedState] = useState(defaultSelected);
+	const [status, setStatus] = useState("idle");
+	const [message, setMessage] = useState("");
+	const busy = status !== "idle";
+	const expanded = (expandedProp ?? expandedState) && !busy;
+	const selected = selectedProp ?? selectedState;
+	const trigger = useRef(null);
+	const header = useRef(null);
+	const pendingFocus = useRef(null);
+	const timer = useRef(null);
+	const alive = useRef(true);
+	useEffect(() => {
+		alive.current = true;
+		return () => {
+			alive.current = false;
+			if (timer.current) clearTimeout(timer.current);
+		};
+	}, []);
+	useEffect(() => {
+		(pendingFocus.current === "header" ? header : pendingFocus.current === "trigger" ? trigger : null)?.current?.focus();
+		pendingFocus.current = null;
+	}, [expanded]);
+	function setExpanded(next) {
+		pendingFocus.current = next ? "header" : "trigger";
+		if (next) setMessage("");
+		if (expandedProp === void 0) setExpandedState(next);
+		onExpandedChange?.(next);
+	}
+	function setSelected(next) {
+		if (selectedProp === void 0) setSelectedState(next);
+		onSelectedChange?.(next);
+	}
+	function toggle(id) {
+		setSelected(selected.includes(id) ? selected.filter((item) => item !== id) : [...selected, id]);
+	}
+	async function download() {
+		const ids = selected;
+		setStatus("downloading");
+		setMessage(downloadingLabel);
+		setExpanded(false);
+		try {
+			await onDownload?.(ids);
+		} catch {
+			if (!alive.current) return;
+			setStatus("idle");
+			setMessage(failedLabel);
+			return;
+		}
+		if (!alive.current) return;
+		setStatus("complete");
+		setMessage(completeLabel);
+		timer.current = setTimeout(() => {
+			setStatus("idle");
+			setMessage("");
+			setSelected([]);
+		}, resetAfter);
+	}
+	const delay = (index, step) => ({ "--app-stack-delay": `calc(${String(index * step)}ms * var(--motion-scale, 1))` });
+	return /* @__PURE__ */ jsx(MotionConfig, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ jsx(LayoutGroup, {
+			id: layout,
+			children: /* @__PURE__ */ jsxs("div", {
+				"data-slot": "app-stack",
+				"data-state": expanded ? "expanded" : "collapsed",
+				"data-status": status,
+				className: cn("flex flex-col items-center gap-3", className),
+				...props,
+				children: [
+					/* @__PURE__ */ jsx("style", {
+						href: PREFIX,
+						precedence: "dowel",
+						children: STYLES
+					}),
+					expanded ? /* @__PURE__ */ jsxs("div", {
+						"data-slot": "app-stack-panel",
+						className: "flex flex-col items-stretch gap-2",
+						children: [
+							/* @__PURE__ */ jsxs("button", {
+								ref: header,
+								type: "button",
+								"aria-expanded": "true",
+								className: cn("flex items-center justify-between gap-4 rounded-md px-0.5 text-sm font-medium", focusRing),
+								onClick: () => {
+									setExpanded(false);
+								},
+								children: [/* @__PURE__ */ jsx("span", { children: title }), /* @__PURE__ */ jsxs("span", {
+									className: "flex items-center gap-1",
+									children: [
+										selected.length,
+										/* @__PURE__ */ jsx("span", {
+											className: "sr-only",
+											children: " selected"
+										}),
+										/* @__PURE__ */ jsx(ChevronIcon, {})
+									]
+								})]
+							}),
+							/* @__PURE__ */ jsx("ul", {
+								className: "grid grid-cols-2 gap-3",
+								children: apps.map((app, index) => {
+									const on = selected.includes(app.id);
+									return /* @__PURE__ */ jsxs("li", {
+										"data-slot": "app-stack-tile",
+										className: "relative",
+										style: delay(index, 100),
+										children: [/* @__PURE__ */ jsxs("button", {
+											type: "button",
+											"aria-pressed": on,
+											className: appStackTileVariants({ selected: on }),
+											onClick: () => {
+												toggle(app.id);
+											},
+											children: [/* @__PURE__ */ jsx(motion.span, {
+												layoutId: app.id,
+												"aria-hidden": "true",
+												className: "block size-10",
+												children: /* @__PURE__ */ jsx(Icon, { icon: app.icon })
+											}), /* @__PURE__ */ jsx("span", {
+												className: "max-w-full truncate text-xs font-medium",
+												children: app.name
+											})]
+										}), /* @__PURE__ */ jsx("span", {
+											"aria-hidden": "true",
+											"data-state": on ? "checked" : "unchecked",
+											className: cn("pointer-events-none absolute end-2 top-2 flex size-4 items-center justify-center rounded-full border", "transition-[background-color,border-color,color] duration-[var(--duration-fast)]", on ? "border-primary bg-primary text-primary-foreground" : "border-border-strong text-transparent"),
+											children: /* @__PURE__ */ jsx(CheckIcon, {})
+										})]
+									}, app.id);
+								})
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								className: "mt-2 w-full",
+								disabled: selected.length === 0,
+								onClick: () => void download(),
+								children: downloadLabel
+							})
+						]
+					}) : /* @__PURE__ */ jsxs("button", {
+						ref: trigger,
+						type: "button",
+						"aria-expanded": "false",
+						"aria-disabled": busy || void 0,
+						"aria-label": triggerLabel ?? `Choose from ${title}`,
+						"data-slot": "app-stack-trigger",
+						className: cn("group/app-stack relative isolate size-16 rounded-xl", focusRing, busy && "cursor-progress"),
+						onClick: () => {
+							if (!busy) setExpanded(true);
+						},
+						children: [apps.map((app, index) => {
+							const side = index % 2 === 0 ? -1 : 1;
+							const fan = {
+								"--rest-rotate": `${String(side * 8 * (index + 1))}deg`,
+								"--rest-x": `${String(side * 3 * (index + 1))}px`,
+								"--hover-x": `${String(index * 10)}px`,
+								"--hover-y": `${String(index * -10)}px`
+							};
+							return /* @__PURE__ */ jsx(motion.span, {
+								layoutId: app.id,
+								className: "absolute inset-0",
+								style: { zIndex: apps.length - index },
+								children: /* @__PURE__ */ jsx("span", {
+									className: cn("block size-full translate-x-[var(--rest-x)] rotate-[var(--rest-rotate)]", "transition-[rotate,translate] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", !busy && "group-hover/app-stack:translate-x-[var(--hover-x)] group-hover/app-stack:translate-y-[var(--hover-y)] group-hover/app-stack:rotate-0 group-focus-visible/app-stack:translate-x-[var(--hover-x)] group-focus-visible/app-stack:translate-y-[var(--hover-y)] group-focus-visible/app-stack:rotate-0"),
+									style: fan,
+									children: /* @__PURE__ */ jsx("span", {
+										"data-slot": "app-stack-float",
+										className: "block size-full",
+										style: delay(index, 200),
+										children: /* @__PURE__ */ jsx(Icon, { icon: app.icon })
+									})
+								})
+							}, app.id);
+						}), status === "downloading" ? /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "absolute inset-0 z-50 overflow-hidden rounded-xl",
+							children: /* @__PURE__ */ jsx("span", {
+								"data-slot": "app-stack-shine",
+								className: "block size-full bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--color-primary)_35%,transparent),transparent)]"
+							})
+						}) : null]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						role: "status",
+						"data-slot": "app-stack-status",
+						className: cn("text-sm font-semibold empty:hidden", status === "complete" ? "text-success" : status === "downloading" ? "text-primary" : "text-destructive"),
+						children: message
+					})
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { AppStack, appStackTileVariants };
+
+//# sourceMappingURL=app-stack.js.map

package/dist/components/app-stack/app-stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-stack.js","names":[],"sources":["../../../src/components/app-stack/app-stack.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI App Download Stack (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva } from \"class-variance-authority\";\nimport { LayoutGroup, MotionConfig, motion } from \"motion/react\";\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\n\nimport { Button } from \"@/components/button\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A pile of app icons that fans out on hover, and opens into a grid where each\n * app is a toggle; the selection is then handed to `onDownload`.\n *\n * `motion` is here for one thing (ADR 0014): each icon is the same layoutId in\n * the pile and in the grid, so opening the picker flies every icon from its\n * place in the stack to its tile and back — a shared-layout animation between\n * two DOM positions, which CSS cannot express. Everything else is CSS: the fan\n * (rotate/translate transitions), the idle float and the progress shine\n * (hoisted keyframes on --motion-scale). Under reduced motion MotionConfig makes\n * the layout change instant and the CSS snaps.\n *\n * The source faked a three-second download. Here the state is real: while the\n * promise returned by `onDownload` is pending the stack shows progress, then\n * \"complete\", then resets; a rejection announces the failure and keeps the\n * selection.\n */\n\nconst PREFIX = \"dowel-app-stack\";\n\nconst STYLES = `@keyframes ${PREFIX}-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}\n@keyframes ${PREFIX}-shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}\n@keyframes ${PREFIX}-in{from{opacity:0;transform:translateY(12px)}}\n[data-slot=app-stack-float]{animation:${PREFIX}-float calc(2s * var(--motion-scale, 1)) cubic-bezier(.645,.045,.355,1) var(--app-stack-delay, 0s) infinite}\n[data-slot=app-stack-shine]{animation:${PREFIX}-shine calc(1s * var(--motion-scale, 1)) linear infinite}\n[data-slot=app-stack-tile]{animation:${PREFIX}-in var(--duration-normal, 200ms) var(--ease-out-quint, ease-out) var(--app-stack-delay, 0s) both}`;\n\nconst appStackTileVariants = cva(\n  cn(\n    \"flex size-20 flex-col items-center justify-center gap-1 rounded-xl border-2 p-2\",\n    \"transition-[border-color,background-color] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n    focusRing,\n  ),\n  {\n    variants: {\n      selected: {\n        true: \"border-primary bg-[color-mix(in_oklab,var(--color-primary)_10%,transparent)]\",\n        false: \"border-transparent bg-muted hover:border-primary\",\n      },\n    },\n    defaultVariants: { selected: false },\n  },\n);\n\nexport interface AppStackItem {\n  id: string;\n  /** The app's name: the tile's label and the toggle's accessible name. */\n  name: string;\n  /** An image URL, or any node (an inline SVG, an icon component). Decorative. */\n  icon: string | ReactNode;\n}\n\nexport type AppStackStatus = \"idle\" | \"downloading\" | \"complete\";\n\nexport interface AppStackProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  apps: AppStackItem[];\n  /** The picker's heading, e.g. \"Starter Mac\". */\n  title?: string;\n  /** Accessible name of the collapsed stack. Defaults to \"Choose from {title}\". */\n  triggerLabel?: string;\n  expanded?: boolean;\n  defaultExpanded?: boolean;\n  onExpandedChange?: (expanded: boolean) => void;\n  /** Controlled selection, by app id. */\n  selected?: string[];\n  defaultSelected?: string[];\n  onSelectedChange?: (selected: string[]) => void;\n  /** Called with the selected ids. Return a promise to show progress until it settles. */\n  onDownload?: (selected: string[]) => void | Promise<unknown>;\n  /** Milliseconds the completed state shows before resetting. */\n  resetAfter?: number;\n  downloadLabel?: string;\n  downloadingLabel?: string;\n  completeLabel?: string;\n  failedLabel?: string;\n}\n\nfunction Icon({ icon }: { icon: AppStackItem[\"icon\"] }) {\n  return typeof icon === \"string\" ? (\n    <img src={icon} alt=\"\" draggable={false} className=\"size-full rounded-xl object-cover\" />\n  ) : (\n    <span className=\"flex size-full items-center justify-center overflow-hidden rounded-xl\">\n      {icon}\n    </span>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"size-3\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M5 13l4 4L19 7\" />\n    </svg>\n  );\n}\n\nfunction ChevronIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"size-4 rotate-180\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M6 9l6 6 6-6\" />\n    </svg>\n  );\n}\n\n/** Stacked app icons that fan out and open into a multi-select download picker. */\nexport function AppStack({\n  className,\n  apps,\n  title = \"Apps\",\n  triggerLabel,\n  expanded: expandedProp,\n  defaultExpanded = false,\n  onExpandedChange,\n  selected: selectedProp,\n  defaultSelected = [],\n  onSelectedChange,\n  onDownload,\n  resetAfter = 1000,\n  downloadLabel = \"Download selected\",\n  downloadingLabel = \"Downloading…\",\n  completeLabel = \"Download complete\",\n  failedLabel = \"Download failed\",\n  ...props\n}: AppStackProps) {\n  const layout = useId();\n  const [expandedState, setExpandedState] = useState(defaultExpanded);\n  const [selectedState, setSelectedState] = useState(defaultSelected);\n  const [status, setStatus] = useState<AppStackStatus>(\"idle\");\n  const [message, setMessage] = useState(\"\");\n  const busy = status !== \"idle\";\n  const expanded = (expandedProp ?? expandedState) && !busy;\n  const selected = selectedProp ?? selectedState;\n\n  const trigger = useRef<HTMLButtonElement>(null);\n  const header = useRef<HTMLButtonElement>(null);\n  const pendingFocus = useRef<\"trigger\" | \"header\" | null>(null);\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const alive = useRef(true);\n\n  useEffect(() => {\n    alive.current = true;\n    return () => {\n      alive.current = false;\n      if (timer.current) clearTimeout(timer.current);\n    };\n  }, []);\n\n  useEffect(() => {\n    const target =\n      pendingFocus.current === \"header\"\n        ? header\n        : pendingFocus.current === \"trigger\"\n          ? trigger\n          : null;\n    target?.current?.focus();\n    pendingFocus.current = null;\n  }, [expanded]);\n\n  function setExpanded(next: boolean) {\n    pendingFocus.current = next ? \"header\" : \"trigger\";\n    if (next) setMessage(\"\");\n    if (expandedProp === undefined) setExpandedState(next);\n    onExpandedChange?.(next);\n  }\n\n  function setSelected(next: string[]) {\n    if (selectedProp === undefined) setSelectedState(next);\n    onSelectedChange?.(next);\n  }\n\n  function toggle(id: string) {\n    setSelected(\n      selected.includes(id) ? selected.filter((item) => item !== id) : [...selected, id],\n    );\n  }\n\n  async function download() {\n    const ids = selected;\n    setStatus(\"downloading\");\n    setMessage(downloadingLabel);\n    setExpanded(false);\n    try {\n      await onDownload?.(ids);\n    } catch {\n      if (!alive.current) return;\n      setStatus(\"idle\");\n      setMessage(failedLabel);\n      return;\n    }\n    if (!alive.current) return;\n    setStatus(\"complete\");\n    setMessage(completeLabel);\n    timer.current = setTimeout(() => {\n      setStatus(\"idle\");\n      setMessage(\"\");\n      setSelected([]);\n    }, resetAfter);\n  }\n\n  const delay = (index: number, step: number): CSSProperties =>\n    ({\n      \"--app-stack-delay\": `calc(${String(index * step)}ms * var(--motion-scale, 1))`,\n    }) as CSSProperties;\n\n  return (\n    <MotionConfig reducedMotion=\"user\">\n      <LayoutGroup id={layout}>\n        <div\n          data-slot=\"app-stack\"\n          data-state={expanded ? \"expanded\" : \"collapsed\"}\n          data-status={status}\n          className={cn(\"flex flex-col items-center gap-3\", className)}\n          {...props}\n        >\n          <style href={PREFIX} precedence=\"dowel\">\n            {STYLES}\n          </style>\n          {expanded ? (\n            <div data-slot=\"app-stack-panel\" className=\"flex flex-col items-stretch gap-2\">\n              <button\n                ref={header}\n                type=\"button\"\n                aria-expanded=\"true\"\n                className={cn(\n                  \"flex items-center justify-between gap-4 rounded-md px-0.5 text-sm font-medium\",\n                  focusRing,\n                )}\n                onClick={() => {\n                  setExpanded(false);\n                }}\n              >\n                <span>{title}</span>\n                <span className=\"flex items-center gap-1\">\n                  {selected.length}\n                  <span className=\"sr-only\"> selected</span>\n                  <ChevronIcon />\n                </span>\n              </button>\n              <ul className=\"grid grid-cols-2 gap-3\">\n                {apps.map((app, index) => {\n                  const on = selected.includes(app.id);\n                  return (\n                    <li\n                      key={app.id}\n                      data-slot=\"app-stack-tile\"\n                      className=\"relative\"\n                      style={delay(index, 100)}\n                    >\n                      <button\n                        type=\"button\"\n                        aria-pressed={on}\n                        className={appStackTileVariants({ selected: on })}\n                        onClick={() => {\n                          toggle(app.id);\n                        }}\n                      >\n                        <motion.span\n                          layoutId={app.id}\n                          aria-hidden=\"true\"\n                          className=\"block size-10\"\n                        >\n                          <Icon icon={app.icon} />\n                        </motion.span>\n                        <span className=\"max-w-full truncate text-xs font-medium\">\n                          {app.name}\n                        </span>\n                      </button>\n                      <span\n                        aria-hidden=\"true\"\n                        data-state={on ? \"checked\" : \"unchecked\"}\n                        className={cn(\n                          \"pointer-events-none absolute end-2 top-2 flex size-4 items-center justify-center rounded-full border\",\n                          \"transition-[background-color,border-color,color] duration-[var(--duration-fast)]\",\n                          on\n                            ? \"border-primary bg-primary text-primary-foreground\"\n                            : \"border-border-strong text-transparent\",\n                        )}\n                      >\n                        <CheckIcon />\n                      </span>\n                    </li>\n                  );\n                })}\n              </ul>\n              <Button\n                className=\"mt-2 w-full\"\n                disabled={selected.length === 0}\n                onClick={() => void download()}\n              >\n                {downloadLabel}\n              </Button>\n            </div>\n          ) : (\n            <button\n              ref={trigger}\n              type=\"button\"\n              aria-expanded=\"false\"\n              aria-disabled={busy || undefined}\n              aria-label={triggerLabel ?? `Choose from ${title}`}\n              data-slot=\"app-stack-trigger\"\n              className={cn(\n                \"group/app-stack relative isolate size-16 rounded-xl\",\n                focusRing,\n                busy && \"cursor-progress\",\n              )}\n              onClick={() => {\n                if (!busy) setExpanded(true);\n              }}\n            >\n              {apps.map((app, index) => {\n                const side = index % 2 === 0 ? -1 : 1;\n                const fan = {\n                  \"--rest-rotate\": `${String(side * 8 * (index + 1))}deg`,\n                  \"--rest-x\": `${String(side * 3 * (index + 1))}px`,\n                  \"--hover-x\": `${String(index * 10)}px`,\n                  \"--hover-y\": `${String(index * -10)}px`,\n                } as CSSProperties;\n                return (\n                  <motion.span\n                    key={app.id}\n                    layoutId={app.id}\n                    className=\"absolute inset-0\"\n                    style={{ zIndex: apps.length - index }}\n                  >\n                    <span\n                      className={cn(\n                        \"block size-full translate-x-[var(--rest-x)] rotate-[var(--rest-rotate)]\",\n                        \"transition-[rotate,translate] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n                        !busy &&\n                          \"group-hover/app-stack:translate-x-[var(--hover-x)] group-hover/app-stack:translate-y-[var(--hover-y)] group-hover/app-stack:rotate-0 group-focus-visible/app-stack:translate-x-[var(--hover-x)] group-focus-visible/app-stack:translate-y-[var(--hover-y)] group-focus-visible/app-stack:rotate-0\",\n                      )}\n                      style={fan}\n                    >\n                      <span\n                        data-slot=\"app-stack-float\"\n                        className=\"block size-full\"\n                        style={delay(index, 200)}\n                      >\n                        <Icon icon={app.icon} />\n                      </span>\n                    </span>\n                  </motion.span>\n                );\n              })}\n              {status === \"downloading\" ? (\n                <span\n                  aria-hidden=\"true\"\n                  className=\"absolute inset-0 z-50 overflow-hidden rounded-xl\"\n                >\n                  <span\n                    data-slot=\"app-stack-shine\"\n                    className=\"block size-full bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--color-primary)_35%,transparent),transparent)]\"\n                  />\n                </span>\n              ) : null}\n            </button>\n          )}\n          <span\n            role=\"status\"\n            data-slot=\"app-stack-status\"\n            className={cn(\n              \"text-sm font-semibold empty:hidden\",\n              status === \"complete\"\n                ? \"text-success\"\n                : status === \"downloading\"\n                  ? \"text-primary\"\n                  : \"text-destructive\",\n            )}\n          >\n            {message}\n          </span>\n        </div>\n      </LayoutGroup>\n    </MotionConfig>\n  );\n}\n\nexport { appStackTileVariants };\n"],"mappings":"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"}

package/dist/components/app-stack/index.d.ts

@@ -0,0 +1,2 @@
+import { AppStack, AppStackItem, AppStackProps, AppStackStatus, appStackTileVariants } from "./app-stack.js";
+export { AppStack, type AppStackItem, type AppStackProps, type AppStackStatus, appStackTileVariants };

package/dist/components/app-stack/index.js

@@ -0,0 +1,2 @@
+import { AppStack, appStackTileVariants } from "./app-stack.js";
+export { AppStack, appStackTileVariants };

package/dist/components/app-stack/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/app-stack/meta.ts
+const meta = defineMeta({
+	name: "app-stack",
+	title: "App Stack",
+	description: "A pile of app icons that fans out on hover and opens into a multi-select picker whose icons fly to their tiles.",
+	category: "form",
+	status: "beta",
+	dependencies: ["class-variance-authority", "motion"],
+	registryDependencies: ["button"],
+	files: ["app-stack.tsx"],
+	a11y: "The collapsed stack is a button (aria-expanded=\"false\", named \"Choose from {title}\" or triggerLabel); opening moves focus to the picker's header button (aria-expanded=\"true\"), which closes it and returns focus. Each app is a toggle button (aria-pressed) named by the app; icons and check marks are decorative. The download button is disabled until something is selected. Progress, completion and failure are announced through a polite status region, and the stack is aria-disabled while busy. Under reduced motion the icons move without animating (MotionConfig) and the fan, float and shine stop."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/app-stack/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/app-stack/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"app-stack\",\n  title: \"App Stack\",\n  description:\n    \"A pile of app icons that fans out on hover and opens into a multi-select picker whose icons fly to their tiles.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"motion\"],\n  registryDependencies: [\"button\"],\n  files: [\"app-stack.tsx\"],\n  a11y:\n    'The collapsed stack is a button (aria-expanded=\"false\", named \"Choose from {title}\" or triggerLabel); opening ' +\n    'moves focus to the picker\\'s header button (aria-expanded=\"true\"), which closes it and returns focus. Each app ' +\n    \"is a toggle button (aria-pressed) named by the app; icons and check marks are decorative. The download \" +\n    \"button is disabled until something is selected. Progress, completion and failure are announced through a \" +\n    \"polite status region, and the stack is aria-disabled while busy. Under reduced motion the icons move without \" +\n    \"animating (MotionConfig) and the fan, float and shine stop.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,QAAQ;CACnD,sBAAsB,CAAC,QAAQ;CAC/B,OAAO,CAAC,eAAe;CACvB,MACE;AAMJ,CAAC"}

package/dist/components/aspect-morph/aspect-morph.d.ts

@@ -0,0 +1,50 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/aspect-morph/aspect-morph.d.ts
+interface AspectMorphRatio {
+  value: string;
+  /** Accessible name of the option, e.g. "Landscape, 4 by 3". */
+  label: string;
+  /** Width divided by height. */
+  ratio: number;
+  /** Replaces the drawn outline icon. Decorative. */
+  icon?: ReactNode;
+}
+declare const defaultAspectMorphRatios: AspectMorphRatio[];
+/** The option buttons of the segmented control. */
+declare const aspectMorphVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Width and height of a `ratio` shape with the same area as ¾ of a `box`-sided square. */
+declare function fitAspect(ratio: number, box: number): {
+  width: number;
+  height: number;
+};
+interface AspectMorphProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange"> {
+  /** The shapes to choose between. */
+  ratios?: AspectMorphRatio[];
+  /** Controlled selected ratio value. */
+  value?: string;
+  /** Initial value when uncontrolled. Defaults to the first ratio. */
+  defaultValue?: string;
+  /** Called with the newly selected ratio value. */
+  onValueChange?: (value: string) => void;
+  /** Picture URL, drawn as a cover-cropped background. */
+  src?: string;
+  /** Names the picture (role="img"). Without it the picture is decorative. */
+  alt?: string;
+  /** Speed, 0–100: 0 morphs over 832ms, 50 over 520ms, 100 over 208ms. */
+  morph?: number;
+  /** Corner radius of the picture in px. */
+  corner?: number;
+  /** Side of the square box the picture is fitted into, in px. */
+  size?: number;
+  /** Accessible name of the radiogroup. */
+  label?: string;
+  /** Disables the ratio picker. */
+  disabled?: boolean;
+  /** Custom picture content (an <img>, <video>, canvas…); cropped to the frame. */
+  children?: ReactNode;
+}
+/** A picture that morphs between aspect ratios, picked from a segmented radiogroup. */
+declare function AspectMorph({ className, style, ratios, value: valueProp, defaultValue, onValueChange, src, alt, morph, corner, size, label, disabled, children, ...props }: AspectMorphProps): import("react").JSX.Element;
+//#endregion
+export { AspectMorph, AspectMorphProps, AspectMorphRatio, aspectMorphVariants, defaultAspectMorphRatios, fitAspect };
+//# sourceMappingURL=aspect-morph.d.ts.map

package/dist/components/aspect-morph/aspect-morph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-morph.d.ts","names":[],"sources":["../../../src/components/aspect-morph/aspect-morph.tsx"],"mappings":";;UA2BiB;EACf;;EAEA;;EAEA;;EAEA,OAAO;;cAGI,0BAA0B;;cAOjC,sBAAmB,iDAAA;;iBAWT,UAAU,eAAe;EAAgB;EAAe;;UAiCvD,yBAAyB,KACxC;;EAIA,SAAS;;EAET;;EAEA;;EAEA,iBAAiB;;EAEjB;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,WAAW;;;iBAIG,cACd,WACA,OACA,QACA,OAAO,WACP,cACA,eACA,KACA,KACA,OACA,QACA,MACA,OACA,UACA,aACG,SACF,mCAAgB,IAAA"}

package/dist/components/aspect-morph/aspect-morph.js

@@ -0,0 +1,171 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useRef, useState } from "react";
+//#region src/components/aspect-morph/aspect-morph.tsx
+const defaultAspectMorphRatios = [
+	{
+		value: "4:3",
+		label: "Landscape, 4 by 3",
+		ratio: 4 / 3
+	},
+	{
+		value: "1:1",
+		label: "Square, 1 by 1",
+		ratio: 1
+	},
+	{
+		value: "3:4",
+		label: "Portrait, 3 by 4",
+		ratio: 3 / 4
+	}
+];
+/** The option buttons of the segmented control. */
+const aspectMorphVariants = cva(cn("relative z-1 grid h-8 place-items-center rounded-full text-muted-foreground", "transition-[color,scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", "hover:text-foreground active:scale-[0.92] aria-checked:text-foreground", "disabled:pointer-events-none disabled:opacity-55", focusRing));
+/** Width and height of a `ratio` shape with the same area as ¾ of a `box`-sided square. */
+function fitAspect(ratio, box) {
+	const area = box * box * .75;
+	const safe = ratio > 0 && Number.isFinite(ratio) ? ratio : 1;
+	const width = Math.min(Math.sqrt(area * safe), box);
+	const height = Math.min(Math.sqrt(area / safe), box);
+	return {
+		width: Math.round(width * 100) / 100,
+		height: Math.round(height * 100) / 100
+	};
+}
+function RatioIcon({ ratio }) {
+	const { width, height } = fitAspect(ratio, 15);
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 18 18",
+		className: "size-4.5",
+		fill: "none",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("rect", {
+			x: (18 - width) / 2,
+			y: (18 - height) / 2,
+			width,
+			height,
+			rx: 2,
+			stroke: "currentColor",
+			strokeWidth: 1.5
+		})
+	});
+}
+/** Whether the element sits in right-to-left text. */
+function isRtl(element) {
+	return element.closest("[dir]")?.getAttribute("dir") === "rtl" || getComputedStyle(element).direction === "rtl";
+}
+/** A picture that morphs between aspect ratios, picked from a segmented radiogroup. */
+function AspectMorph({ className, style, ratios = defaultAspectMorphRatios, value: valueProp, defaultValue, onValueChange, src, alt, morph = 50, corner = 18, size = 276, label = "Aspect ratio", disabled = false, children, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultValue ?? ratios[0]?.value);
+	const value = valueProp !== void 0 ? valueProp : uncontrolled;
+	const options = useRef([]);
+	const found = ratios.findIndex((option) => option.value === value);
+	const index = Math.max(found, 0);
+	const current = ratios[index];
+	const frame = fitAspect(current?.ratio ?? 1, size);
+	const ms = 832 - 6.24 * Math.min(Math.max(morph, 0), 100);
+	function select(next) {
+		const option = ratios[next];
+		if (!option || option.value === value) return;
+		if (valueProp === void 0) setUncontrolled(option.value);
+		onValueChange?.(option.value);
+	}
+	function handleKeyDown(event, at) {
+		const last = ratios.length - 1;
+		const rtl = isRtl(event.currentTarget);
+		let next = {
+			ArrowDown: at + 1,
+			ArrowUp: at - 1,
+			ArrowRight: rtl ? at - 1 : at + 1,
+			ArrowLeft: rtl ? at + 1 : at - 1,
+			Home: 0,
+			End: last
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		if (next > last) next = 0;
+		if (next < 0) next = last;
+		options.current[next]?.focus();
+		select(next);
+	}
+	const frameStyle = {
+		width: frame.width,
+		height: frame.height,
+		borderRadius: corner,
+		transitionDuration: `calc(${String(Math.round(ms))}ms * var(--motion-scale))`,
+		backgroundImage: src ? `url(${JSON.stringify(src)})` : void 0
+	};
+	const thumbStyle = {
+		width: `calc((100% - 0.25rem) / ${String(Math.max(ratios.length, 1))})`,
+		translate: `calc(var(--aspect-morph-dir) * ${String(index * 100)}%) 0`,
+		transitionDuration: `calc(${String(Math.round(ms * .55))}ms * var(--motion-scale))`
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "aspect-morph",
+		"data-value": current?.value,
+		className: cn("inline-flex max-w-full flex-col items-center gap-3 [--aspect-morph-dir:1] rtl:[--aspect-morph-dir:-1]", className),
+		style: {
+			width: size,
+			...style
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-slot": "aspect-morph-stage",
+			className: "grid w-full place-items-center",
+			style: { height: size },
+			children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "aspect-morph-frame",
+				role: src && alt ? "img" : void 0,
+				"aria-label": src && alt ? alt : void 0,
+				"aria-hidden": src && !alt ? true : void 0,
+				className: cn("max-w-full overflow-hidden bg-muted bg-cover bg-center", "transition-[width,height,border-radius] ease-[var(--ease-out-quint)]", "[&>img]:size-full [&>img]:object-cover [&>video]:size-full [&>video]:object-cover"),
+				style: frameStyle,
+				children: src ? null : children
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			role: "radiogroup",
+			"aria-label": label,
+			"aria-disabled": disabled || void 0,
+			"data-slot": "aspect-morph-picker",
+			className: "relative grid rounded-full bg-foreground/6 p-0.5",
+			style: { gridTemplateColumns: `repeat(${String(ratios.length)}, 2.5rem)` },
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-slot": "aspect-morph-thumb",
+				className: cn("absolute start-0.5 top-0.5 bottom-0.5 rounded-full bg-card", "shadow-[0_1px_2px_color-mix(in_oklab,var(--color-foreground)_10%,transparent)]", "transition-[translate] ease-[var(--ease-out-quint)]", found < 0 && "opacity-0"),
+				style: thumbStyle
+			}), ratios.map((option, at) => {
+				const checked = at === found;
+				const tabbable = found >= 0 ? checked : at === 0;
+				return /* @__PURE__ */ jsx("button", {
+					ref: (node) => {
+						options.current[at] = node;
+					},
+					type: "button",
+					role: "radio",
+					"aria-checked": checked,
+					"aria-label": option.label,
+					tabIndex: tabbable ? 0 : -1,
+					disabled,
+					"data-slot": "aspect-morph-option",
+					"data-state": checked ? "checked" : "unchecked",
+					className: aspectMorphVariants(),
+					onClick: () => {
+						select(at);
+					},
+					onKeyDown: (event) => {
+						handleKeyDown(event, at);
+					},
+					children: option.icon ?? /* @__PURE__ */ jsx(RatioIcon, { ratio: option.ratio })
+				}, option.value);
+			})]
+		})]
+	});
+}
+//#endregion
+export { AspectMorph, aspectMorphVariants, defaultAspectMorphRatios, fitAspect };
+
+//# sourceMappingURL=aspect-morph.js.map

package/dist/components/aspect-morph/aspect-morph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-morph.js","names":[],"sources":["../../../src/components/aspect-morph/aspect-morph.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Aspect ratio (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva } from \"class-variance-authority\";\nimport {\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A picture that reshapes between aspect ratios, driven by a small segmented\n * radiogroup. The frame's width and height are plain CSS transitions on inline\n * values, so there is no animation library and the reduced-motion blanket\n * snaps it straight to the chosen shape.\n *\n * Every shape is fitted by area rather than by bounding box — A = size² · 0.75,\n * w = √(A·r), h = √(A/r), each clamped to `size` — so a square does not look\n * bigger than the landscape and portrait crops beside it.\n */\n\nexport interface AspectMorphRatio {\n  value: string;\n  /** Accessible name of the option, e.g. \"Landscape, 4 by 3\". */\n  label: string;\n  /** Width divided by height. */\n  ratio: number;\n  /** Replaces the drawn outline icon. Decorative. */\n  icon?: ReactNode;\n}\n\nexport const defaultAspectMorphRatios: AspectMorphRatio[] = [\n  { value: \"4:3\", label: \"Landscape, 4 by 3\", ratio: 4 / 3 },\n  { value: \"1:1\", label: \"Square, 1 by 1\", ratio: 1 },\n  { value: \"3:4\", label: \"Portrait, 3 by 4\", ratio: 3 / 4 },\n];\n\n/** The option buttons of the segmented control. */\nconst aspectMorphVariants = cva(\n  cn(\n    \"relative z-1 grid h-8 place-items-center rounded-full text-muted-foreground\",\n    \"transition-[color,scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n    \"hover:text-foreground active:scale-[0.92] aria-checked:text-foreground\",\n    \"disabled:pointer-events-none disabled:opacity-55\",\n    focusRing,\n  ),\n);\n\n/** Width and height of a `ratio` shape with the same area as ¾ of a `box`-sided square. */\nexport function fitAspect(ratio: number, box: number): { width: number; height: number } {\n  const area = box * box * 0.75;\n  const safe = ratio > 0 && Number.isFinite(ratio) ? ratio : 1;\n  const width = Math.min(Math.sqrt(area * safe), box);\n  const height = Math.min(Math.sqrt(area / safe), box);\n  return { width: Math.round(width * 100) / 100, height: Math.round(height * 100) / 100 };\n}\n\nfunction RatioIcon({ ratio }: { ratio: number }) {\n  const { width, height } = fitAspect(ratio, 15);\n  return (\n    <svg viewBox=\"0 0 18 18\" className=\"size-4.5\" fill=\"none\" aria-hidden=\"true\">\n      <rect\n        x={(18 - width) / 2}\n        y={(18 - height) / 2}\n        width={width}\n        height={height}\n        rx={2}\n        stroke=\"currentColor\"\n        strokeWidth={1.5}\n      />\n    </svg>\n  );\n}\n\n/** Whether the element sits in right-to-left text. */\nfunction isRtl(element: HTMLElement): boolean {\n  return (\n    element.closest(\"[dir]\")?.getAttribute(\"dir\") === \"rtl\" ||\n    getComputedStyle(element).direction === \"rtl\"\n  );\n}\n\nexport interface AspectMorphProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"defaultValue\" | \"onChange\"\n> {\n  /** The shapes to choose between. */\n  ratios?: AspectMorphRatio[];\n  /** Controlled selected ratio value. */\n  value?: string;\n  /** Initial value when uncontrolled. Defaults to the first ratio. */\n  defaultValue?: string;\n  /** Called with the newly selected ratio value. */\n  onValueChange?: (value: string) => void;\n  /** Picture URL, drawn as a cover-cropped background. */\n  src?: string;\n  /** Names the picture (role=\"img\"). Without it the picture is decorative. */\n  alt?: string;\n  /** Speed, 0–100: 0 morphs over 832ms, 50 over 520ms, 100 over 208ms. */\n  morph?: number;\n  /** Corner radius of the picture in px. */\n  corner?: number;\n  /** Side of the square box the picture is fitted into, in px. */\n  size?: number;\n  /** Accessible name of the radiogroup. */\n  label?: string;\n  /** Disables the ratio picker. */\n  disabled?: boolean;\n  /** Custom picture content (an <img>, <video>, canvas…); cropped to the frame. */\n  children?: ReactNode;\n}\n\n/** A picture that morphs between aspect ratios, picked from a segmented radiogroup. */\nexport function AspectMorph({\n  className,\n  style,\n  ratios = defaultAspectMorphRatios,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  src,\n  alt,\n  morph = 50,\n  corner = 18,\n  size = 276,\n  label = \"Aspect ratio\",\n  disabled = false,\n  children,\n  ...props\n}: AspectMorphProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultValue ?? ratios[0]?.value);\n  const value = valueProp !== undefined ? valueProp : uncontrolled;\n  const options = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const found = ratios.findIndex((option) => option.value === value);\n  const index = Math.max(found, 0);\n  const current = ratios[index];\n  const frame = fitAspect(current?.ratio ?? 1, size);\n  const ms = 832 - 6.24 * Math.min(Math.max(morph, 0), 100);\n\n  function select(next: number) {\n    const option = ratios[next];\n    if (!option || option.value === value) return;\n    if (valueProp === undefined) setUncontrolled(option.value);\n    onValueChange?.(option.value);\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>, at: number) {\n    const last = ratios.length - 1;\n    const rtl = isRtl(event.currentTarget);\n    const keys: Record<string, number> = {\n      ArrowDown: at + 1,\n      ArrowUp: at - 1,\n      ArrowRight: rtl ? at - 1 : at + 1,\n      ArrowLeft: rtl ? at + 1 : at - 1,\n      Home: 0,\n      End: last,\n    };\n    let next = keys[event.key];\n    if (next === undefined) return;\n    event.preventDefault();\n    if (next > last) next = 0;\n    if (next < 0) next = last;\n    options.current[next]?.focus();\n    select(next);\n  }\n\n  const frameStyle: CSSProperties = {\n    width: frame.width,\n    height: frame.height,\n    borderRadius: corner,\n    transitionDuration: `calc(${String(Math.round(ms))}ms * var(--motion-scale))`,\n    backgroundImage: src ? `url(${JSON.stringify(src)})` : undefined,\n  };\n\n  const thumbStyle: CSSProperties = {\n    width: `calc((100% - 0.25rem) / ${String(Math.max(ratios.length, 1))})`,\n    translate: `calc(var(--aspect-morph-dir) * ${String(index * 100)}%) 0`,\n    transitionDuration: `calc(${String(Math.round(ms * 0.55))}ms * var(--motion-scale))`,\n  };\n\n  return (\n    <div\n      data-slot=\"aspect-morph\"\n      data-value={current?.value}\n      className={cn(\n        \"inline-flex max-w-full flex-col items-center gap-3 [--aspect-morph-dir:1] rtl:[--aspect-morph-dir:-1]\",\n        className,\n      )}\n      style={{ width: size, ...style }}\n      {...props}\n    >\n      <div\n        data-slot=\"aspect-morph-stage\"\n        className=\"grid w-full place-items-center\"\n        style={{ height: size }}\n      >\n        <div\n          data-slot=\"aspect-morph-frame\"\n          role={src && alt ? \"img\" : undefined}\n          aria-label={src && alt ? alt : undefined}\n          aria-hidden={src && !alt ? true : undefined}\n          className={cn(\n            \"max-w-full overflow-hidden bg-muted bg-cover bg-center\",\n            \"transition-[width,height,border-radius] ease-[var(--ease-out-quint)]\",\n            \"[&>img]:size-full [&>img]:object-cover [&>video]:size-full [&>video]:object-cover\",\n          )}\n          style={frameStyle}\n        >\n          {src ? null : children}\n        </div>\n      </div>\n      <div\n        role=\"radiogroup\"\n        aria-label={label}\n        aria-disabled={disabled || undefined}\n        data-slot=\"aspect-morph-picker\"\n        className=\"relative grid rounded-full bg-foreground/6 p-0.5\"\n        style={{ gridTemplateColumns: `repeat(${String(ratios.length)}, 2.5rem)` }}\n      >\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"aspect-morph-thumb\"\n          className={cn(\n            \"absolute start-0.5 top-0.5 bottom-0.5 rounded-full bg-card\",\n            \"shadow-[0_1px_2px_color-mix(in_oklab,var(--color-foreground)_10%,transparent)]\",\n            \"transition-[translate] ease-[var(--ease-out-quint)]\",\n            found < 0 && \"opacity-0\",\n          )}\n          style={thumbStyle}\n        />\n        {ratios.map((option, at) => {\n          const checked = at === found;\n          const tabbable = found >= 0 ? checked : at === 0;\n          return (\n            <button\n              key={option.value}\n              ref={(node) => {\n                options.current[at] = node;\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={checked}\n              aria-label={option.label}\n              tabIndex={tabbable ? 0 : -1}\n              disabled={disabled}\n              data-slot=\"aspect-morph-option\"\n              data-state={checked ? \"checked\" : \"unchecked\"}\n              className={aspectMorphVariants()}\n              onClick={() => {\n                select(at);\n              }}\n              onKeyDown={(event) => {\n                handleKeyDown(event, at);\n              }}\n            >\n              {option.icon ?? <RatioIcon ratio={option.ratio} />}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nexport { aspectMorphVariants };\n"],"mappings":"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"}

package/dist/components/aspect-morph/index.d.ts

@@ -0,0 +1,2 @@
+import { AspectMorph, AspectMorphProps, AspectMorphRatio, aspectMorphVariants, defaultAspectMorphRatios, fitAspect } from "./aspect-morph.js";
+export { AspectMorph, type AspectMorphProps, type AspectMorphRatio, aspectMorphVariants, defaultAspectMorphRatios, fitAspect };

package/dist/components/aspect-morph/index.js

@@ -0,0 +1,2 @@
+import { AspectMorph, aspectMorphVariants, defaultAspectMorphRatios, fitAspect } from "./aspect-morph.js";
+export { AspectMorph, aspectMorphVariants, defaultAspectMorphRatios, fitAspect };

package/dist/components/aspect-morph/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/aspect-morph/meta.ts
+const meta = defineMeta({
+	name: "aspect-morph",
+	title: "Aspect Morph",
+	description: "A picture that smoothly reshapes between aspect ratios, picked from a segmented control with a sliding thumb.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["aspect-morph.tsx"],
+	a11y: "The picker is a role=\"radiogroup\" (named \"Aspect ratio\" unless `label` is given) of buttons with role=\"radio\", aria-checked and a spoken name per shape; the outline icons and sliding thumb are aria-hidden. Roving tabindex: Tab reaches the checked option, arrow keys move focus and select with wrap-around (Left/Right follow the reading direction in RTL), Home/End jump to the ends. A `src` picture is role=\"img\" named by `alt`, or hidden when no `alt` is given. The reshape and thumb are CSS transitions and snap to the final state under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/aspect-morph/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/aspect-morph/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"aspect-morph\",\n  title: \"Aspect Morph\",\n  description:\n    \"A picture that smoothly reshapes between aspect ratios, picked from a segmented control with a sliding thumb.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"aspect-morph.tsx\"],\n  a11y:\n    'The picker is a role=\"radiogroup\" (named \"Aspect ratio\" unless `label` is given) of buttons with role=\"radio\", ' +\n    \"aria-checked and a spoken name per shape; the outline icons and sliding thumb are aria-hidden. Roving tabindex: \" +\n    \"Tab reaches the checked option, arrow keys move focus and select with wrap-around (Left/Right follow the reading \" +\n    'direction in RTL), Home/End jump to the ends. A `src` picture is role=\"img\" named by `alt`, or hidden when no ' +\n    \"`alt` is given. The reshape and thumb are CSS transitions and snap to the final state under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,kBAAkB;CAC1B,MACE;AAKJ,CAAC"}