@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/expandable-list/expandable-list.d.ts

@@ -0,0 +1,35 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/expandable-list/expandable-list.d.ts
+declare const expandableListVariants: (props?: ({
+  density?: "comfortable" | "compact" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ExpandableListItem {
+  id: string;
+  title: string;
+  /** A line under the title — a role and salary, say. */
+  subtitle?: ReactNode;
+  /** Small print — location, schedule. */
+  meta?: ReactNode;
+  /** A logo or avatar. Decorative: the title names the row. */
+  media?: ReactNode;
+  /** The detail shown when the row is open. */
+  content: ReactNode;
+  /** Controls in the detail view — an Apply link, say. */
+  actions?: ReactNode;
+}
+interface ExpandableListProps extends Omit<ComponentPropsWithRef<"ul">, "children" | "defaultValue">, VariantProps<typeof expandableListVariants> {
+  items: ExpandableListItem[];
+  /** The open item's id, or null (controlled). */
+  value?: string | null;
+  defaultValue?: string | null;
+  onValueChange?: (value: string | null) => void;
+  /** Accessible name of the Close button. */
+  closeLabel?: string;
+  rowClassName?: string;
+}
+/** Rows that expand into a detail dialog, growing out of their place in the list. */
+declare function ExpandableList({ className, density, items, value: valueProp, defaultValue, onValueChange, closeLabel, rowClassName, ...props }: ExpandableListProps): import("react").JSX.Element;
+//#endregion
+export { ExpandableList, ExpandableListItem, ExpandableListProps, expandableListVariants };
+//# sourceMappingURL=expandable-list.d.ts.map

package/dist/components/expandable-list/expandable-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandable-list.d.ts","names":[],"sources":["../../../src/components/expandable-list/expandable-list.tsx"],"mappings":";;;cA0BM,yBAAsB;;6CAU1B;UAEe;EACf;EACA;;EAEA,WAAW;;EAEX,OAAO;;EAEP,QAAQ;;EAER,SAAS;;EAET,UAAU;;UAGK,4BAEb,KAAK,2DACL,oBAAoB;EACtB,OAAO;;EAEP;EACA;EACA,iBAAiB;;EAEjB;EACA;;;iBAkDc,iBACd,WACA,SACA,OACA,OAAO,WACP,cACA,eACA,YACA,iBACG,SACF,sCAAmB,IAAA"}

package/dist/components/expandable-list/expandable-list.js

@@ -0,0 +1,180 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Dialog } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useId, useRef, useState } from "react";
+import { AnimatePresence, LayoutGroup, MotionConfig, motion } from "motion/react";
+//#region src/components/expandable-list/expandable-list.tsx
+const expandableListVariants = cva("flex w-full flex-col", {
+	variants: { density: {
+		comfortable: "gap-4",
+		compact: "gap-2"
+	} },
+	defaultVariants: { density: "comfortable" }
+});
+const transition = {
+	type: "spring",
+	bounce: .1,
+	duration: .25
+};
+function Summary({ item, layout, detail = false }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex w-full min-w-0 items-center gap-4 text-start",
+		children: [item.media ? /* @__PURE__ */ jsx(motion.span, {
+			layoutId: layout("media"),
+			"aria-hidden": "true",
+			className: "grid shrink-0 place-items-center [&_svg]:size-8",
+			children: item.media
+		}) : null, /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-col gap-0.5",
+			children: [
+				detail ? /* @__PURE__ */ jsx(Dialog.Title, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(motion.h2, {
+						layoutId: layout("title"),
+						className: "text-sm font-medium text-foreground",
+						children: item.title
+					})
+				}) : /* @__PURE__ */ jsx(motion.span, {
+					layoutId: layout("title"),
+					className: "font-medium text-foreground",
+					children: item.title
+				}),
+				item.subtitle ? /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: item.subtitle
+				}) : null,
+				item.meta ? /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: item.meta
+				}) : null
+			]
+		})]
+	});
+}
+/** Rows that expand into a detail dialog, growing out of their place in the list. */
+function ExpandableList({ className, density, items, value: valueProp, defaultValue = null, onValueChange, closeLabel = "Close", rowClassName, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultValue);
+	const openId = valueProp === void 0 ? uncontrolled : valueProp;
+	const openItem = items.find((item) => item.id === openId);
+	const uid = useId();
+	const rows = useRef(/* @__PURE__ */ new Map());
+	function select(next) {
+		if (valueProp === void 0) setUncontrolled(next);
+		onValueChange?.(next);
+	}
+	const layoutFor = (id) => (part) => `${uid}-${part}-${id}`;
+	return /* @__PURE__ */ jsx(MotionConfig, {
+		reducedMotion: "user",
+		transition,
+		children: /* @__PURE__ */ jsxs(LayoutGroup, {
+			id: uid,
+			children: [/* @__PURE__ */ jsx("ul", {
+				"data-slot": "expandable-list",
+				className: cn(expandableListVariants({ density }), className),
+				...props,
+				children: items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(motion.button, {
+					type: "button",
+					ref: (node) => {
+						if (node) rows.current.set(item.id, node);
+						else rows.current.delete(item.id);
+					},
+					layoutId: layoutFor(item.id)("card"),
+					"aria-haspopup": "dialog",
+					"aria-expanded": openId === item.id,
+					"data-slot": "expandable-list-row",
+					"data-state": openId === item.id ? "open" : "closed",
+					onClick: () => select(item.id),
+					whileTap: { scale: .97 },
+					className: cn("flex w-full cursor-pointer items-center gap-4 border border-border bg-card p-2 text-card-foreground shadow-xs select-none md:p-4", "transition-colors duration-[var(--duration-fast)] hover:bg-accent", focusRing, rowClassName),
+					style: { borderRadius: 8 },
+					children: /* @__PURE__ */ jsx(Summary, {
+						item,
+						layout: layoutFor(item.id)
+					})
+				}) }, item.id))
+			}), /* @__PURE__ */ jsx(Dialog.Root, {
+				open: openItem !== void 0,
+				onOpenChange: (open) => {
+					if (!open) select(null);
+				},
+				children: /* @__PURE__ */ jsx(AnimatePresence, { children: openItem ? /* @__PURE__ */ jsxs(Dialog.Portal, {
+					forceMount: true,
+					children: [/* @__PURE__ */ jsx(Dialog.Overlay, {
+						asChild: true,
+						forceMount: true,
+						children: /* @__PURE__ */ jsx(motion.div, {
+							"data-slot": "expandable-list-overlay",
+							className: "fixed inset-0 z-[var(--z-overlay)] bg-overlay backdrop-blur-xl",
+							initial: { opacity: 0 },
+							animate: { opacity: 1 },
+							exit: { opacity: 0 }
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: "pointer-events-none fixed inset-0 z-[var(--z-modal)] grid place-items-center p-4",
+						children: /* @__PURE__ */ jsx(Dialog.Content, {
+							asChild: true,
+							forceMount: true,
+							onCloseAutoFocus: (event) => {
+								event.preventDefault();
+								rows.current.get(openItem.id)?.focus();
+							},
+							children: /* @__PURE__ */ jsxs(motion.div, {
+								layoutId: layoutFor(openItem.id)("card"),
+								"data-slot": "expandable-list-detail",
+								className: "pointer-events-auto relative flex max-h-full w-[90%] max-w-2xl flex-col items-start gap-4 overflow-y-auto border border-border bg-card p-4 pe-14 text-card-foreground shadow-xl outline-none",
+								style: { borderRadius: 12 },
+								children: [
+									/* @__PURE__ */ jsx(Summary, {
+										item: openItem,
+										layout: layoutFor(openItem.id),
+										detail: true
+									}),
+									/* @__PURE__ */ jsxs(motion.div, {
+										initial: { opacity: 0 },
+										animate: { opacity: 1 },
+										exit: { opacity: 0 },
+										className: "flex w-full flex-col gap-4",
+										children: [/* @__PURE__ */ jsx(Dialog.Description, {
+											asChild: true,
+											children: /* @__PURE__ */ jsx("div", {
+												className: "text-sm text-muted-foreground",
+												children: openItem.content
+											})
+										}), openItem.actions ? /* @__PURE__ */ jsx("div", {
+											className: "flex flex-wrap gap-2",
+											children: openItem.actions
+										}) : null]
+									}),
+									/* @__PURE__ */ jsx(Dialog.Close, {
+										"aria-label": closeLabel,
+										"data-slot": "expandable-list-close",
+										className: cn("absolute end-3 top-3 grid size-8 place-items-center rounded-full text-muted-foreground", "transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground", focusRing),
+										children: /* @__PURE__ */ jsx("svg", {
+											viewBox: "0 0 24 24",
+											fill: "none",
+											"aria-hidden": "true",
+											className: "size-4",
+											children: /* @__PURE__ */ jsx("path", {
+												d: "m6 6 12 12M18 6 6 18",
+												stroke: "currentColor",
+												strokeWidth: "2",
+												strokeLinecap: "round"
+											})
+										})
+									})
+								]
+							})
+						})
+					})]
+				}, openItem.id) : null })
+			})]
+		})
+	});
+}
+//#endregion
+export { ExpandableList, expandableListVariants };
+
+//# sourceMappingURL=expandable-list.js.map

package/dist/components/expandable-list/expandable-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandable-list.js","names":[],"sources":["../../../src/components/expandable-list/expandable-list.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Job Listing Component (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { AnimatePresence, LayoutGroup, MotionConfig, motion } from \"motion/react\";\nimport { Dialog } from \"radix-ui\";\nimport { useId, useRef, useState, type ComponentPropsWithRef, type ReactNode } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A list of compact rows — a job, a release, a person — each of which grows\n * into a detail card over a blurred backdrop.\n *\n * Every row is a real button that opens a Radix modal dialog: focus moves into\n * it and is trapped, the page behind is inert, Escape, the backdrop and a\n * named Close button all dismiss it, and focus returns to the row that opened\n * it. The title and description name and describe the dialog.\n *\n * The row growing into the card (and its logo and title travelling with it)\n * is a shared-layout animation between two DOM positions — `motion`'s\n * layoutId, the one reason this depends on it (ADR 0014). Under reduced\n * motion the dialog simply appears in place.\n */\n\nconst expandableListVariants = cva(\"flex w-full flex-col\", {\n  variants: {\n    density: {\n      comfortable: \"gap-4\",\n      compact: \"gap-2\",\n    },\n  },\n  defaultVariants: {\n    density: \"comfortable\",\n  },\n});\n\nexport interface ExpandableListItem {\n  id: string;\n  title: string;\n  /** A line under the title — a role and salary, say. */\n  subtitle?: ReactNode;\n  /** Small print — location, schedule. */\n  meta?: ReactNode;\n  /** A logo or avatar. Decorative: the title names the row. */\n  media?: ReactNode;\n  /** The detail shown when the row is open. */\n  content: ReactNode;\n  /** Controls in the detail view — an Apply link, say. */\n  actions?: ReactNode;\n}\n\nexport interface ExpandableListProps\n  extends\n    Omit<ComponentPropsWithRef<\"ul\">, \"children\" | \"defaultValue\">,\n    VariantProps<typeof expandableListVariants> {\n  items: ExpandableListItem[];\n  /** The open item's id, or null (controlled). */\n  value?: string | null;\n  defaultValue?: string | null;\n  onValueChange?: (value: string | null) => void;\n  /** Accessible name of the Close button. */\n  closeLabel?: string;\n  rowClassName?: string;\n}\n\nconst transition = { type: \"spring\", bounce: 0.1, duration: 0.25 } as const;\n\nfunction Summary({\n  item,\n  layout,\n  detail = false,\n}: {\n  item: ExpandableListItem;\n  layout: (part: string) => string;\n  detail?: boolean;\n}) {\n  return (\n    <span className=\"flex w-full min-w-0 items-center gap-4 text-start\">\n      {item.media ? (\n        <motion.span\n          layoutId={layout(\"media\")}\n          aria-hidden=\"true\"\n          className=\"grid shrink-0 place-items-center [&_svg]:size-8\"\n        >\n          {item.media}\n        </motion.span>\n      ) : null}\n      <span className=\"flex min-w-0 flex-col gap-0.5\">\n        {detail ? (\n          <Dialog.Title asChild>\n            <motion.h2\n              layoutId={layout(\"title\")}\n              className=\"text-sm font-medium text-foreground\"\n            >\n              {item.title}\n            </motion.h2>\n          </Dialog.Title>\n        ) : (\n          <motion.span layoutId={layout(\"title\")} className=\"font-medium text-foreground\">\n            {item.title}\n          </motion.span>\n        )}\n        {item.subtitle ? (\n          <span className=\"text-xs text-muted-foreground\">{item.subtitle}</span>\n        ) : null}\n        {item.meta ? <span className=\"text-xs text-muted-foreground\">{item.meta}</span> : null}\n      </span>\n    </span>\n  );\n}\n\n/** Rows that expand into a detail dialog, growing out of their place in the list. */\nexport function ExpandableList({\n  className,\n  density,\n  items,\n  value: valueProp,\n  defaultValue = null,\n  onValueChange,\n  closeLabel = \"Close\",\n  rowClassName,\n  ...props\n}: ExpandableListProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultValue);\n  const openId = valueProp === undefined ? uncontrolled : valueProp;\n  const openItem = items.find((item) => item.id === openId);\n  const uid = useId();\n  const rows = useRef(new Map<string, HTMLButtonElement>());\n\n  function select(next: string | null) {\n    if (valueProp === undefined) setUncontrolled(next);\n    onValueChange?.(next);\n  }\n\n  const layoutFor = (id: string) => (part: string) => `${uid}-${part}-${id}`;\n\n  return (\n    <MotionConfig reducedMotion=\"user\" transition={transition}>\n      <LayoutGroup id={uid}>\n        <ul\n          data-slot=\"expandable-list\"\n          className={cn(expandableListVariants({ density }), className)}\n          {...props}\n        >\n          {items.map((item) => (\n            <li key={item.id}>\n              <motion.button\n                type=\"button\"\n                ref={(node: HTMLButtonElement | null) => {\n                  if (node) rows.current.set(item.id, node);\n                  else rows.current.delete(item.id);\n                }}\n                layoutId={layoutFor(item.id)(\"card\")}\n                aria-haspopup=\"dialog\"\n                aria-expanded={openId === item.id}\n                data-slot=\"expandable-list-row\"\n                data-state={openId === item.id ? \"open\" : \"closed\"}\n                onClick={() => select(item.id)}\n                whileTap={{ scale: 0.97 }}\n                className={cn(\n                  \"flex w-full cursor-pointer items-center gap-4 border border-border bg-card p-2 text-card-foreground shadow-xs select-none md:p-4\",\n                  \"transition-colors duration-[var(--duration-fast)] hover:bg-accent\",\n                  focusRing,\n                  rowClassName,\n                )}\n                style={{ borderRadius: 8 }}\n              >\n                <Summary item={item} layout={layoutFor(item.id)} />\n              </motion.button>\n            </li>\n          ))}\n        </ul>\n\n        <Dialog.Root\n          open={openItem !== undefined}\n          onOpenChange={(open) => {\n            if (!open) select(null);\n          }}\n        >\n          <AnimatePresence>\n            {openItem ? (\n              <Dialog.Portal forceMount key={openItem.id}>\n                <Dialog.Overlay asChild forceMount>\n                  <motion.div\n                    data-slot=\"expandable-list-overlay\"\n                    className=\"fixed inset-0 z-[var(--z-overlay)] bg-overlay backdrop-blur-xl\"\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                  />\n                </Dialog.Overlay>\n                <div className=\"pointer-events-none fixed inset-0 z-[var(--z-modal)] grid place-items-center p-4\">\n                  <Dialog.Content\n                    asChild\n                    forceMount\n                    onCloseAutoFocus={(event) => {\n                      event.preventDefault();\n                      rows.current.get(openItem.id)?.focus();\n                    }}\n                  >\n                    <motion.div\n                      layoutId={layoutFor(openItem.id)(\"card\")}\n                      data-slot=\"expandable-list-detail\"\n                      className=\"pointer-events-auto relative flex max-h-full w-[90%] max-w-2xl flex-col items-start gap-4 overflow-y-auto border border-border bg-card p-4 pe-14 text-card-foreground shadow-xl outline-none\"\n                      style={{ borderRadius: 12 }}\n                    >\n                      <Summary item={openItem} layout={layoutFor(openItem.id)} detail />\n                      <motion.div\n                        initial={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        exit={{ opacity: 0 }}\n                        className=\"flex w-full flex-col gap-4\"\n                      >\n                        <Dialog.Description asChild>\n                          <div className=\"text-sm text-muted-foreground\">\n                            {openItem.content}\n                          </div>\n                        </Dialog.Description>\n                        {openItem.actions ? (\n                          <div className=\"flex flex-wrap gap-2\">{openItem.actions}</div>\n                        ) : null}\n                      </motion.div>\n                      <Dialog.Close\n                        aria-label={closeLabel}\n                        data-slot=\"expandable-list-close\"\n                        className={cn(\n                          \"absolute end-3 top-3 grid size-8 place-items-center rounded-full text-muted-foreground\",\n                          \"transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground\",\n                          focusRing,\n                        )}\n                      >\n                        <svg\n                          viewBox=\"0 0 24 24\"\n                          fill=\"none\"\n                          aria-hidden=\"true\"\n                          className=\"size-4\"\n                        >\n                          <path\n                            d=\"m6 6 12 12M18 6 6 18\"\n                            stroke=\"currentColor\"\n                            strokeWidth=\"2\"\n                            strokeLinecap=\"round\"\n                          />\n                        </svg>\n                      </Dialog.Close>\n                    </motion.div>\n                  </Dialog.Content>\n                </div>\n              </Dialog.Portal>\n            ) : null}\n          </AnimatePresence>\n        </Dialog.Root>\n      </LayoutGroup>\n    </MotionConfig>\n  );\n}\n\nexport { expandableListVariants };\n"],"mappings":"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"}

package/dist/components/expandable-list/index.d.ts

@@ -0,0 +1,2 @@
+import { ExpandableList, ExpandableListItem, ExpandableListProps, expandableListVariants } from "./expandable-list.js";
+export { ExpandableList, type ExpandableListItem, type ExpandableListProps, expandableListVariants };

package/dist/components/expandable-list/index.js

@@ -0,0 +1,2 @@
+import { ExpandableList, expandableListVariants } from "./expandable-list.js";
+export { ExpandableList, expandableListVariants };

package/dist/components/expandable-list/meta.js

@@ -0,0 +1,21 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/expandable-list/meta.ts
+const meta = defineMeta({
+	name: "expandable-list",
+	title: "Expandable List",
+	description: "A list of compact rows — jobs, releases, people — each growing into a detail dialog out of its place in the list.",
+	category: "display",
+	status: "beta",
+	dependencies: [
+		"class-variance-authority",
+		"motion",
+		"radix-ui"
+	],
+	registryDependencies: [],
+	files: ["expandable-list.tsx"],
+	a11y: "Each row is a button with aria-haspopup=\"dialog\" and aria-expanded. The detail is a Radix modal dialog: focus moves in and is trapped, the page behind is inert, it is named by the item's title and described by its content, and Escape, the backdrop or the named Close button dismiss it — after which focus returns to the row that opened it. Row media is aria-hidden. The grow-from-row animation uses motion's layoutId inside MotionConfig reducedMotion=\"user\", so under reduced motion the dialog appears in place."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/expandable-list/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/expandable-list/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"expandable-list\",\n  title: \"Expandable List\",\n  description:\n    \"A list of compact rows — jobs, releases, people — each growing into a detail dialog out of its place in the list.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"motion\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"expandable-list.tsx\"],\n  a11y:\n    'Each row is a button with aria-haspopup=\"dialog\" and aria-expanded. The detail is a Radix modal dialog: ' +\n    \"focus moves in and is trapped, the page behind is inert, it is named by the item's title and described by \" +\n    \"its content, and Escape, the backdrop or the named Close button dismiss it — after which focus returns to \" +\n    \"the row that opened it. Row media is aria-hidden. The grow-from-row animation uses motion's layoutId inside \" +\n    'MotionConfig reducedMotion=\"user\", so under reduced motion the dialog appears in place.',\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc;EAAC;EAA4B;EAAU;CAAU;CAC/D,sBAAsB,CAAC;CACvB,OAAO,CAAC,qBAAqB;CAC7B,MACE;AAKJ,CAAC"}

package/dist/components/expanding-search/expanding-search.d.ts

@@ -0,0 +1,30 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/expanding-search/expanding-search.d.ts
+declare const expandingSearchVariants: (props?: ({
+  stroke?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ExpandingSearchProps extends Omit<ComponentPropsWithRef<"form">, "onSubmit" | "defaultValue" | "onChange">, VariantProps<typeof expandingSearchVariants> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Called with the text on Enter. */
+  onSearch?: (value: string) => void;
+  /** Names the trigger and the field. */
+  label?: string;
+  placeholder?: string;
+  clearLabel?: string;
+  /** The open field's inline size, any CSS length. */
+  expandedWidth?: string;
+  disabled?: boolean;
+  /** Spread onto the <input> — for combobox wiring. */
+  inputProps?: Omit<ComponentPropsWithRef<"input">, "value" | "defaultValue">;
+}
+/** A search button that expands into a field, and collapses back with Escape. */
+declare function ExpandingSearch({ className, stroke, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, onSearch, label, placeholder, clearLabel, expandedWidth, disabled, inputProps, onBlur, style, children, ...props }: ExpandingSearchProps): import("react").JSX.Element;
+//#endregion
+export { ExpandingSearch, ExpandingSearchProps, expandingSearchVariants };
+//# sourceMappingURL=expanding-search.d.ts.map

package/dist/components/expanding-search/expanding-search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expanding-search.d.ts","names":[],"sources":["../../../src/components/expanding-search/expanding-search.tsx"],"mappings":";;;cAmCM,0BAAuB;;6CAY5B;UASgB,6BAEb,KAAK,0EACL,oBAAoB;EACtB;EACA;EACA,iBAAiB;EACjB;EACA;EACA,gBAAgB;;EAEhB,YAAY;;EAEZ;EACA;EACA;;EAEA;EACA;;EAEA,aAAa,KAAK;;;iBAqBJ,kBACd,WACA,QACA,OAAO,WACP,cACA,eACA,MAAM,UACN,aACA,cACA,UACA,OACA,aACA,YACA,eACA,UACA,YACA,QACA,OACA,aACG,SACF,uCAAoB,IAAA"}

package/dist/components/expanding-search/expanding-search.js

@@ -0,0 +1,141 @@
+"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 { useEffect, useId, useRef, useState } from "react";
+//#region src/components/expanding-search/expanding-search.tsx
+const expandingSearchVariants = cva("relative inline-flex h-10 items-center rounded-full bg-card text-card-foreground", {
+	variants: { 
+	/** A hairline ring. */
+stroke: {
+		true: "shadow-[inset_0_0_0_1px_var(--color-border)]",
+		false: ""
+	} },
+	defaultVariants: { stroke: true }
+});
+const iconButton = cn("grid size-10 shrink-0 place-items-center rounded-full text-muted-foreground", "transition-[background-color,color] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", "hover:text-foreground disabled:pointer-events-none disabled:opacity-55", focusRing);
+function Glyph({ d }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		className: "size-4",
+		children: /* @__PURE__ */ jsx("path", { d })
+	});
+}
+/** A search button that expands into a field, and collapses back with Escape. */
+function ExpandingSearch({ className, stroke, value: valueProp, defaultValue = "", onValueChange, open: openProp, defaultOpen = false, onOpenChange, onSearch, label = "Search", placeholder = "Search…", clearLabel = "Clear search", expandedWidth = "14rem", disabled = false, inputProps = {}, onBlur, style, children, ...props }) {
+	const inputId = useId();
+	const [innerValue, setInnerValue] = useState(defaultValue);
+	const value = valueProp ?? innerValue;
+	const [innerOpen, setInnerOpen] = useState(defaultOpen);
+	const open = openProp ?? innerOpen;
+	const triggerRef = useRef(null);
+	const inputRef = useRef(null);
+	const focusNext = useRef(null);
+	useEffect(() => {
+		const target = focusNext.current;
+		focusNext.current = null;
+		if (target === "input") inputRef.current?.focus();
+		else if (target === "trigger") triggerRef.current?.focus();
+	});
+	function setValue(next) {
+		if (valueProp === void 0) setInnerValue(next);
+		onValueChange?.(next);
+	}
+	function setOpen(next, focus) {
+		focusNext.current = focus;
+		if (next === open) return;
+		if (openProp === void 0) setInnerOpen(next);
+		onOpenChange?.(next);
+	}
+	function handleKeyDown(event) {
+		inputProps.onKeyDown?.(event);
+		if (event.defaultPrevented || event.key !== "Escape") return;
+		event.preventDefault();
+		if (value) setValue("");
+		else setOpen(false, "trigger");
+	}
+	function handleBlur(event) {
+		onBlur?.(event);
+		if (event.currentTarget.contains(event.relatedTarget)) return;
+		if (!value) setOpen(false, null);
+	}
+	function handleSubmit(event) {
+		event.preventDefault();
+		if (open) onSearch?.(value);
+	}
+	return /* @__PURE__ */ jsxs("form", {
+		role: "search",
+		"aria-label": label,
+		"data-slot": "expanding-search",
+		"data-state": open ? "open" : "closed",
+		className: cn(expandingSearchVariants({ stroke }), className),
+		style: {
+			"--expanding-search-width": expandedWidth,
+			...style
+		},
+		onSubmit: handleSubmit,
+		onBlur: handleBlur,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				ref: triggerRef,
+				type: "button",
+				"aria-label": label,
+				"aria-expanded": open,
+				"aria-controls": inputId,
+				disabled,
+				"data-slot": "expanding-search-trigger",
+				className: iconButton,
+				onClick: () => {
+					setOpen(!open, open ? null : "input");
+				},
+				children: /* @__PURE__ */ jsx(Glyph, { d: "m21 21-4.34-4.34M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "expanding-search-field",
+				className: cn("flex h-full items-center overflow-hidden", "transition-[width,visibility] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]", open ? "visible w-[var(--expanding-search-width)]" : "invisible w-0"),
+				children: [/* @__PURE__ */ jsx("input", {
+					ref: inputRef,
+					id: inputId,
+					type: "search",
+					"aria-label": label,
+					placeholder,
+					disabled,
+					autoComplete: "off",
+					...inputProps,
+					value,
+					"data-slot": "expanding-search-input",
+					className: cn("h-full min-w-0 flex-1 bg-transparent pe-1 text-sm outline-none placeholder:text-muted-foreground", "[&::-webkit-search-cancel-button]:appearance-none", inputProps.className),
+					onChange: (event) => {
+						inputProps.onChange?.(event);
+						setValue(event.target.value);
+					},
+					onKeyDown: handleKeyDown
+				}), value ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": clearLabel,
+					"data-slot": "expanding-search-clear",
+					className: cn(iconButton, "size-8 hover:bg-foreground/6"),
+					onClick: () => {
+						setValue("");
+						focusNext.current = "input";
+						inputRef.current?.focus();
+					},
+					children: /* @__PURE__ */ jsx(Glyph, { d: "M18 6 6 18M6 6l12 12" })
+				}) : null]
+			}),
+			children
+		]
+	});
+}
+//#endregion
+export { ExpandingSearch, expandingSearchVariants };
+
+//# sourceMappingURL=expanding-search.js.map

package/dist/components/expanding-search/expanding-search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expanding-search.js","names":[],"sources":["../../../src/components/expanding-search/expanding-search.tsx"],"sourcesContent":["\"use client\";\n\n// Original design (pattern inspired by bencho Search; no code referenced).\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type FocusEvent,\n  type FormEvent,\n  type KeyboardEvent,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A search button that opens into a field.\n *\n * A search landmark holding a trigger (aria-expanded, aria-controls) and a\n * field whose inline size transitions open. Opening focuses the field;\n * Escape clears it first, then collapses and returns focus to the trigger;\n * leaving an empty field collapses it quietly. A clear button appears once\n * there is text.\n *\n * Combobox-ready: `inputProps` is spread onto the <input>, so a consumer can\n * add role=\"combobox\", aria-activedescendant and its own key handling, and\n * render the listbox as `children`. Its onKeyDown runs first, and calling\n * preventDefault there (say, to close its listbox on Escape) stops this\n * component's own Escape handling.\n */\n\nconst expandingSearchVariants = cva(\n  \"relative inline-flex h-10 items-center rounded-full bg-card text-card-foreground\",\n  {\n    variants: {\n      /** A hairline ring. */\n      stroke: {\n        true: \"shadow-[inset_0_0_0_1px_var(--color-border)]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: { stroke: true },\n  },\n);\n\nconst iconButton = cn(\n  \"grid size-10 shrink-0 place-items-center rounded-full text-muted-foreground\",\n  \"transition-[background-color,color] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n  \"hover:text-foreground disabled:pointer-events-none disabled:opacity-55\",\n  focusRing,\n);\n\nexport interface ExpandingSearchProps\n  extends\n    Omit<ComponentPropsWithRef<\"form\">, \"onSubmit\" | \"defaultValue\" | \"onChange\">,\n    VariantProps<typeof expandingSearchVariants> {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Called with the text on Enter. */\n  onSearch?: (value: string) => void;\n  /** Names the trigger and the field. */\n  label?: string;\n  placeholder?: string;\n  clearLabel?: string;\n  /** The open field's inline size, any CSS length. */\n  expandedWidth?: string;\n  disabled?: boolean;\n  /** Spread onto the <input> — for combobox wiring. */\n  inputProps?: Omit<ComponentPropsWithRef<\"input\">, \"value\" | \"defaultValue\">;\n}\n\nfunction Glyph({ d }: { d: string }) {\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      aria-hidden=\"true\"\n      className=\"size-4\"\n    >\n      <path d={d} />\n    </svg>\n  );\n}\n\n/** A search button that expands into a field, and collapses back with Escape. */\nexport function ExpandingSearch({\n  className,\n  stroke,\n  value: valueProp,\n  defaultValue = \"\",\n  onValueChange,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  onSearch,\n  label = \"Search\",\n  placeholder = \"Search…\",\n  clearLabel = \"Clear search\",\n  expandedWidth = \"14rem\",\n  disabled = false,\n  inputProps = {},\n  onBlur,\n  style,\n  children,\n  ...props\n}: ExpandingSearchProps) {\n  const inputId = useId();\n  const [innerValue, setInnerValue] = useState(defaultValue);\n  const value = valueProp ?? innerValue;\n  const [innerOpen, setInnerOpen] = useState(defaultOpen);\n  const open = openProp ?? innerOpen;\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const focusNext = useRef<\"input\" | \"trigger\" | null>(null);\n\n  useEffect(() => {\n    const target = focusNext.current;\n    focusNext.current = null;\n    if (target === \"input\") inputRef.current?.focus();\n    else if (target === \"trigger\") triggerRef.current?.focus();\n  });\n\n  function setValue(next: string) {\n    if (valueProp === undefined) setInnerValue(next);\n    onValueChange?.(next);\n  }\n\n  function setOpen(next: boolean, focus: \"input\" | \"trigger\" | null) {\n    focusNext.current = focus;\n    if (next === open) return;\n    if (openProp === undefined) setInnerOpen(next);\n    onOpenChange?.(next);\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {\n    inputProps.onKeyDown?.(event);\n    if (event.defaultPrevented || event.key !== \"Escape\") return;\n    event.preventDefault();\n    if (value) setValue(\"\");\n    else setOpen(false, \"trigger\");\n  }\n\n  function handleBlur(event: FocusEvent<HTMLFormElement>) {\n    onBlur?.(event);\n    if (event.currentTarget.contains(event.relatedTarget)) return;\n    if (!value) setOpen(false, null);\n  }\n\n  function handleSubmit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n    if (open) onSearch?.(value);\n  }\n\n  return (\n    <form\n      role=\"search\"\n      aria-label={label}\n      data-slot=\"expanding-search\"\n      data-state={open ? \"open\" : \"closed\"}\n      className={cn(expandingSearchVariants({ stroke }), className)}\n      style={{ \"--expanding-search-width\": expandedWidth, ...style } as CSSProperties}\n      onSubmit={handleSubmit}\n      onBlur={handleBlur}\n      {...props}\n    >\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        aria-label={label}\n        aria-expanded={open}\n        aria-controls={inputId}\n        disabled={disabled}\n        data-slot=\"expanding-search-trigger\"\n        className={iconButton}\n        onClick={() => {\n          setOpen(!open, open ? null : \"input\");\n        }}\n      >\n        <Glyph d=\"m21 21-4.34-4.34M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z\" />\n      </button>\n      <div\n        data-slot=\"expanding-search-field\"\n        className={cn(\n          \"flex h-full items-center overflow-hidden\",\n          \"transition-[width,visibility] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]\",\n          open ? \"visible w-[var(--expanding-search-width)]\" : \"invisible w-0\",\n        )}\n      >\n        <input\n          ref={inputRef}\n          id={inputId}\n          type=\"search\"\n          aria-label={label}\n          placeholder={placeholder}\n          disabled={disabled}\n          autoComplete=\"off\"\n          {...inputProps}\n          value={value}\n          data-slot=\"expanding-search-input\"\n          className={cn(\n            \"h-full min-w-0 flex-1 bg-transparent pe-1 text-sm outline-none placeholder:text-muted-foreground\",\n            \"[&::-webkit-search-cancel-button]:appearance-none\",\n            inputProps.className,\n          )}\n          onChange={(event) => {\n            inputProps.onChange?.(event);\n            setValue(event.target.value);\n          }}\n          onKeyDown={handleKeyDown}\n        />\n        {value ? (\n          <button\n            type=\"button\"\n            aria-label={clearLabel}\n            data-slot=\"expanding-search-clear\"\n            className={cn(iconButton, \"size-8 hover:bg-foreground/6\")}\n            onClick={() => {\n              setValue(\"\");\n              focusNext.current = \"input\";\n              inputRef.current?.focus();\n            }}\n          >\n            <Glyph d=\"M18 6 6 18M6 6l12 12\" />\n          </button>\n        ) : null}\n      </div>\n      {children}\n    </form>\n  );\n}\n\nexport { expandingSearchVariants };\n"],"mappings":"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"}

package/dist/components/expanding-search/index.d.ts

@@ -0,0 +1,2 @@
+import { ExpandingSearch, ExpandingSearchProps, expandingSearchVariants } from "./expanding-search.js";
+export { ExpandingSearch, type ExpandingSearchProps, expandingSearchVariants };

package/dist/components/expanding-search/index.js

@@ -0,0 +1,2 @@
+import { ExpandingSearch, expandingSearchVariants } from "./expanding-search.js";
+export { ExpandingSearch, expandingSearchVariants };

package/dist/components/expanding-search/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/expanding-search/meta.ts
+const meta = defineMeta({
+	name: "expanding-search",
+	title: "Expanding Search",
+	description: "A search button that opens into a field, clears, and collapses back with Escape — ready for a combobox.",
+	category: "form",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["expanding-search.tsx"],
+	a11y: "A labelled search landmark. The trigger is a button with aria-expanded and aria-controls; opening moves focus into the field. Escape clears the text first, then collapses and returns focus to the trigger; leaving an empty field collapses it without moving focus. The collapsed field is visibility-hidden, so it is out of the tab order. `inputProps` reaches the input for combobox wiring, and its onKeyDown can preventDefault to keep Escape for its own listbox."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/expanding-search/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/expanding-search/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"expanding-search\",\n  title: \"Expanding Search\",\n  description:\n    \"A search button that opens into a field, clears, and collapses back with Escape — ready for a combobox.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"expanding-search.tsx\"],\n  a11y:\n    \"A labelled search landmark. The trigger is a button with aria-expanded and aria-controls; opening moves \" +\n    \"focus into the field. Escape clears the text first, then collapses and returns focus to the trigger; \" +\n    \"leaving an empty field collapses it without moving focus. The collapsed field is visibility-hidden, so \" +\n    \"it is out of the tab order. `inputProps` reaches the input for combobox wiring, and its onKeyDown can \" +\n    \"preventDefault to keep Escape for its own listbox.\",\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,sBAAsB;CAC9B,MACE;AAKJ,CAAC"}

package/dist/components/exposure-slider/exposure-slider.d.ts

@@ -0,0 +1,33 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/exposure-slider/exposure-slider.d.ts
+declare const exposureSliderVariants: (props?: ({
+  accent?: "primary" | "success" | "warning" | "destructive" | "info" | "foreground" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ExposureSliderProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange" | "children">, VariantProps<typeof exposureSliderVariants> {
+  /** Controlled value. */
+  value?: number;
+  /** Initial value when uncontrolled. */
+  defaultValue?: number;
+  /** Called on every change — each notch crossed while dragging, each key press. */
+  onValueChange?: (value: number) => void;
+  /** Called when an interaction ends: pointer released, or a key press. */
+  onValueCommit?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  /** Steps moved by Page Up / Page Down. */
+  largeStep?: number;
+  /** Show the ring with the current value above the ruler. */
+  showIndicator?: boolean;
+  /** Formats the value for the ring and for `aria-valuetext`, e.g. `v => \`${v} EV\``. */
+  formatValue?: (value: number) => string;
+  disabled?: boolean;
+  /** Submits the value with a form under this name. */
+  name?: string;
+}
+/** An exposure-style dial: a draggable ruler of notches with a value ring. */
+declare function ExposureSlider({ className, style, accent, value: valueProp, defaultValue, onValueChange, onValueCommit, min, max, step, largeStep, showIndicator, formatValue, disabled, name, dir: dirProp, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-valuetext": ariaValueText, ...props }: ExposureSliderProps): import("react").JSX.Element;
+//#endregion
+export { ExposureSlider, ExposureSliderProps, exposureSliderVariants };
+//# sourceMappingURL=exposure-slider.d.ts.map

package/dist/components/exposure-slider/exposure-slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"exposure-slider.d.ts","names":[],"sources":["../../../src/components/exposure-slider/exposure-slider.tsx"],"mappings":";;;cAoCM,yBAAsB;;6CAkB3B;UAEgB,4BAEb,KAAK,yEACL,oBAAoB;;EAEtB;;EAEA;;EAEA,iBAAiB;;EAEjB,iBAAiB;EACjB;EACA;EACA;;EAEA;;EAEA;;EAEA,eAAe;EACf;;EAEA;;;iBAcc,iBACd,WACA,OACA,QACA,OAAO,WACP,cACA,eACA,eACA,KACA,KACA,MACA,WACA,eACA,aACA,UACA,MACA,KAAK,uBACS,8BACK,oCACC,mCACF,kBACf,SACF,sCAAmB,IAAA"}