@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/image-metadata/image-metadata.js

@@ -0,0 +1,178 @@
+"use client";
+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";
+//#region src/components/image-metadata/image-metadata.tsx
+const imageMetadataVariants = cva("flex w-full flex-col items-center gap-4", {
+	variants: { 
+	/** Panel and image corner treatment. */
+shape: {
+		rounded: "[--image-metadata-radius:1.25rem]",
+		square: "[--image-metadata-radius:0.5rem]"
+	} },
+	defaultVariants: { shape: "rounded" }
+});
+/** An image with an expandable metadata panel. */
+function ImageMetadata({ className, shape, src, alt, filename, description, metadata, actions, open: openProp, defaultOpen = false, onOpenChange, openLabel = "Show details", closeLabel = "Hide details", imageClassName, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+	const open = openProp ?? uncontrolled;
+	const [lift, setLift] = useState(0);
+	const id = useId();
+	const panelId = `${id}-panel`;
+	const titleId = `${id}-title`;
+	const rowRef = useRef(null);
+	const panelRef = useRef(null);
+	const toggleRef = useRef(null);
+	const closeRef = useRef(null);
+	const previous = useRef(open);
+	function setOpen(next) {
+		if (openProp === void 0) setUncontrolled(next);
+		onOpenChange?.(next);
+	}
+	useEffect(() => {
+		const row = rowRef.current;
+		const panel = panelRef.current;
+		if (!row || !panel) return;
+		const measure = () => setLift(Math.max(0, panel.offsetHeight - row.offsetHeight));
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(row);
+		observer.observe(panel);
+		return () => observer.disconnect();
+	}, []);
+	useEffect(() => {
+		if (previous.current === open) return;
+		previous.current = open;
+		(open ? closeRef : toggleRef).current?.focus();
+	}, [open]);
+	useEffect(() => {
+		const panel = panelRef.current;
+		if (!panel || !open) return;
+		const listener = (event) => {
+			if (event.key !== "Escape") return;
+			event.stopPropagation();
+			if (openProp === void 0) setUncontrolled(false);
+			onOpenChange?.(false);
+		};
+		panel.addEventListener("keydown", listener);
+		return () => panel.removeEventListener("keydown", listener);
+	}, [
+		open,
+		openProp,
+		onOpenChange
+	]);
+	const swap = "transition-[opacity,filter,translate] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "image-metadata",
+		"data-state": open ? "open" : "closed",
+		className: cn(imageMetadataVariants({ shape }), className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-slot": "image-metadata-image",
+			className: "w-full overflow-hidden rounded-[var(--image-metadata-radius)] transition-[translate] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]",
+			style: { translate: open ? `0 ${String(-lift)}px` : void 0 },
+			children: /* @__PURE__ */ jsx("img", {
+				src,
+				alt,
+				draggable: false,
+				className: cn("block h-auto w-full object-cover", imageClassName)
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "relative w-full",
+			children: [/* @__PURE__ */ jsxs("div", {
+				ref: rowRef,
+				"data-slot": "image-metadata-actions",
+				inert: open,
+				"aria-hidden": open || void 0,
+				className: cn("flex w-full items-center justify-center gap-4", swap, open && "opacity-0 blur-xs"),
+				children: [actions, /* @__PURE__ */ jsx(Button, {
+					ref: toggleRef,
+					type: "button",
+					variant: "outline",
+					size: "icon",
+					"aria-label": openLabel,
+					"aria-expanded": open,
+					"aria-controls": panelId,
+					"data-slot": "image-metadata-toggle",
+					className: "size-11 rounded-full",
+					onClick: () => setOpen(true),
+					children: /* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 24 24",
+						fill: "none",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("path", {
+							d: "m18 15-6-6-6 6",
+							stroke: "currentColor",
+							strokeWidth: "2",
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})
+					})
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				ref: panelRef,
+				id: panelId,
+				role: "region",
+				"aria-labelledby": titleId,
+				"data-slot": "image-metadata-panel",
+				"data-state": open ? "open" : "closed",
+				inert: !open,
+				"aria-hidden": !open || void 0,
+				className: cn("absolute inset-x-0 bottom-0 flex flex-col gap-4 rounded-[var(--image-metadata-radius)] border border-border bg-card p-5 text-card-foreground shadow-xs", swap, !open && "pointer-events-none opacity-0 blur-xs"),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-start justify-between gap-4",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ jsx("p", {
+							id: titleId,
+							className: "truncate font-medium",
+							children: filename
+						}), description ? /* @__PURE__ */ jsx("p", {
+							className: "text-sm text-muted-foreground",
+							children: description
+						}) : null]
+					}), /* @__PURE__ */ jsx(Button, {
+						ref: closeRef,
+						type: "button",
+						variant: "ghost",
+						size: "icon",
+						"aria-label": closeLabel,
+						"data-slot": "image-metadata-close",
+						className: "-me-2 -mt-2 shrink-0 rounded-full",
+						onClick: () => setOpen(false),
+						children: /* @__PURE__ */ jsx("svg", {
+							viewBox: "0 0 24 24",
+							fill: "none",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ jsx("path", {
+								d: "m6 6 12 12M18 6 6 18",
+								stroke: "currentColor",
+								strokeWidth: "2",
+								strokeLinecap: "round"
+							})
+						})
+					})]
+				}), /* @__PURE__ */ jsx("dl", {
+					"data-slot": "image-metadata-fields",
+					className: "grid grid-cols-2 gap-x-4 gap-y-2 text-sm",
+					children: metadata.map((field) => /* @__PURE__ */ jsxs("div", {
+						className: "contents",
+						children: [/* @__PURE__ */ jsx("dt", {
+							className: "text-foreground",
+							children: field.label
+						}), /* @__PURE__ */ jsx("dd", {
+							className: "truncate text-muted-foreground",
+							children: field.value
+						})]
+					}, field.label))
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { ImageMetadata, imageMetadataVariants };
+
+//# sourceMappingURL=image-metadata.js.map

package/dist/components/image-metadata/image-metadata.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-metadata.js","names":[],"sources":["../../../src/components/image-metadata/image-metadata.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Image Metadata Preview (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from \"react\";\n\nimport { Button } from \"@/components/button\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * An image with a row of actions under it and a details button that opens a\n * metadata panel in place of the row; the image lifts to make room.\n *\n * It is a disclosure: the toggle has aria-expanded and aria-controls, the\n * panel is a labelled region. Opening hides the toggle, so focus moves to the\n * panel's close button, and closing (the button or Escape) returns it to the\n * toggle. Whichever of row and panel is not showing is inert.\n *\n * The source measured the panel with react-use-measure and animated with\n * `motion`. Here a ResizeObserver measures it, the image lift is a CSS\n * `translate` transition and the panel fades in from a blur — decoration that\n * stops under reduced motion.\n */\n\nconst imageMetadataVariants = cva(\"flex w-full flex-col items-center gap-4\", {\n  variants: {\n    /** Panel and image corner treatment. */\n    shape: {\n      rounded: \"[--image-metadata-radius:1.25rem]\",\n      square: \"[--image-metadata-radius:0.5rem]\",\n    },\n  },\n  defaultVariants: {\n    shape: \"rounded\",\n  },\n});\n\nexport interface ImageMetadataField {\n  label: string;\n  value: ReactNode;\n}\n\nexport interface ImageMetadataProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"children\">,\n    VariantProps<typeof imageMetadataVariants> {\n  src: string;\n  alt: string;\n  /** Heading of the panel, e.g. the file name. It names the panel. */\n  filename: string;\n  description?: ReactNode;\n  /** Rows of the metadata table. */\n  metadata: ImageMetadataField[];\n  /** Controls shown in the row beside the details toggle — Share, Connect. */\n  actions?: ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Accessible name of the toggle. */\n  openLabel?: string;\n  /** Accessible name of the close button. */\n  closeLabel?: string;\n  imageClassName?: string;\n}\n\n/** An image with an expandable metadata panel. */\nexport function ImageMetadata({\n  className,\n  shape,\n  src,\n  alt,\n  filename,\n  description,\n  metadata,\n  actions,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  openLabel = \"Show details\",\n  closeLabel = \"Hide details\",\n  imageClassName,\n  ...props\n}: ImageMetadataProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultOpen);\n  const open = openProp ?? uncontrolled;\n  const [lift, setLift] = useState(0);\n  const id = useId();\n  const panelId = `${id}-panel`;\n  const titleId = `${id}-title`;\n  const rowRef = useRef<HTMLDivElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const toggleRef = useRef<HTMLButtonElement>(null);\n  const closeRef = useRef<HTMLButtonElement>(null);\n  const previous = useRef(open);\n\n  function setOpen(next: boolean) {\n    if (openProp === undefined) setUncontrolled(next);\n    onOpenChange?.(next);\n  }\n\n  // How far the image lifts: the panel's height beyond the row it covers.\n  useEffect(() => {\n    const row = rowRef.current;\n    const panel = panelRef.current;\n    if (!row || !panel) return;\n    const measure = () => setLift(Math.max(0, panel.offsetHeight - row.offsetHeight));\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(row);\n    observer.observe(panel);\n    return () => observer.disconnect();\n  }, []);\n\n  // Focus follows the swap, but never on first render.\n  useEffect(() => {\n    if (previous.current === open) return;\n    previous.current = open;\n    (open ? closeRef : toggleRef).current?.focus();\n  }, [open]);\n\n  // Escape from anywhere inside the open panel closes it. A native listener,\n  // because the region itself is not a control — the keys come from the Close\n  // button or from links a consumer puts in the metadata.\n  useEffect(() => {\n    const panel = panelRef.current;\n    if (!panel || !open) return;\n    const listener = (event: globalThis.KeyboardEvent) => {\n      if (event.key !== \"Escape\") return;\n      event.stopPropagation();\n      if (openProp === undefined) setUncontrolled(false);\n      onOpenChange?.(false);\n    };\n    panel.addEventListener(\"keydown\", listener);\n    return () => panel.removeEventListener(\"keydown\", listener);\n  }, [open, openProp, onOpenChange]);\n\n  const swap =\n    \"transition-[opacity,filter,translate] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\";\n\n  return (\n    <div\n      data-slot=\"image-metadata\"\n      data-state={open ? \"open\" : \"closed\"}\n      className={cn(imageMetadataVariants({ shape }), className)}\n      {...props}\n    >\n      <div\n        data-slot=\"image-metadata-image\"\n        className=\"w-full overflow-hidden rounded-[var(--image-metadata-radius)] transition-[translate] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\"\n        style={{ translate: open ? `0 ${String(-lift)}px` : undefined }}\n      >\n        <img\n          src={src}\n          alt={alt}\n          draggable={false}\n          className={cn(\"block h-auto w-full object-cover\", imageClassName)}\n        />\n      </div>\n\n      <div className=\"relative w-full\">\n        <div\n          ref={rowRef}\n          data-slot=\"image-metadata-actions\"\n          inert={open}\n          aria-hidden={open || undefined}\n          className={cn(\n            \"flex w-full items-center justify-center gap-4\",\n            swap,\n            open && \"opacity-0 blur-xs\",\n          )}\n        >\n          {actions}\n          <Button\n            ref={toggleRef}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"icon\"\n            aria-label={openLabel}\n            aria-expanded={open}\n            aria-controls={panelId}\n            data-slot=\"image-metadata-toggle\"\n            className=\"size-11 rounded-full\"\n            onClick={() => setOpen(true)}\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path\n                d=\"m18 15-6-6-6 6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </Button>\n        </div>\n\n        <div\n          ref={panelRef}\n          id={panelId}\n          role=\"region\"\n          aria-labelledby={titleId}\n          data-slot=\"image-metadata-panel\"\n          data-state={open ? \"open\" : \"closed\"}\n          inert={!open}\n          aria-hidden={!open || undefined}\n          className={cn(\n            \"absolute inset-x-0 bottom-0 flex flex-col gap-4 rounded-[var(--image-metadata-radius)] border border-border bg-card p-5 text-card-foreground shadow-xs\",\n            swap,\n            !open && \"pointer-events-none opacity-0 blur-xs\",\n          )}\n        >\n          <div className=\"flex items-start justify-between gap-4\">\n            <div className=\"min-w-0\">\n              <p id={titleId} className=\"truncate font-medium\">\n                {filename}\n              </p>\n              {description ? (\n                <p className=\"text-sm text-muted-foreground\">{description}</p>\n              ) : null}\n            </div>\n            <Button\n              ref={closeRef}\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon\"\n              aria-label={closeLabel}\n              data-slot=\"image-metadata-close\"\n              className=\"-me-2 -mt-2 shrink-0 rounded-full\"\n              onClick={() => setOpen(false)}\n            >\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n                <path\n                  d=\"m6 6 12 12M18 6 6 18\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                />\n              </svg>\n            </Button>\n          </div>\n          <dl\n            data-slot=\"image-metadata-fields\"\n            className=\"grid grid-cols-2 gap-x-4 gap-y-2 text-sm\"\n          >\n            {metadata.map((field) => (\n              <div key={field.label} className=\"contents\">\n                <dt className=\"text-foreground\">{field.label}</dt>\n                <dd className=\"truncate text-muted-foreground\">{field.value}</dd>\n              </div>\n            ))}\n          </dl>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport { imageMetadataVariants };\n"],"mappings":"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"}

package/dist/components/image-metadata/index.d.ts

@@ -0,0 +1,2 @@
+import { ImageMetadata, ImageMetadataField, ImageMetadataProps, imageMetadataVariants } from "./image-metadata.js";
+export { ImageMetadata, type ImageMetadataField, type ImageMetadataProps, imageMetadataVariants };

package/dist/components/image-metadata/index.js

@@ -0,0 +1,2 @@
+import { ImageMetadata, imageMetadataVariants } from "./image-metadata.js";
+export { ImageMetadata, imageMetadataVariants };

package/dist/components/image-metadata/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/image-metadata/meta.ts
+const meta = defineMeta({
+	name: "image-metadata",
+	title: "Image Metadata",
+	description: "An image with a row of actions and a details button that opens a metadata panel, lifting the image to make room.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["button"],
+	files: ["image-metadata.tsx"],
+	a11y: "A disclosure: the details toggle has aria-expanded and aria-controls, and the panel is a region named by the file name. Opening moves focus to the panel's Close button (the toggle it replaces is hidden); closing, with that button or Escape, returns focus to the toggle. Whichever of the action row and the panel is not shown is inert and aria-hidden. Metadata is a description list. The image needs real alt text. The lift and blur transitions stop under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/image-metadata/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/image-metadata/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"image-metadata\",\n  title: \"Image Metadata\",\n  description:\n    \"An image with a row of actions and a details button that opens a metadata panel, lifting the image to make room.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"button\"],\n  files: [\"image-metadata.tsx\"],\n  a11y:\n    \"A disclosure: the details toggle has aria-expanded and aria-controls, and the panel is a region named by the \" +\n    \"file name. Opening moves focus to the panel's Close button (the toggle it replaces is hidden); closing, with \" +\n    \"that button or Escape, returns focus to the toggle. Whichever of the action row and the panel is not shown is \" +\n    \"inert and aria-hidden. Metadata is a description list. The image needs real alt text. The lift and blur \" +\n    \"transitions stop 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,QAAQ;CAC/B,OAAO,CAAC,oBAAoB;CAC5B,MACE;AAKJ,CAAC"}

package/dist/components/image-selector/image-selector.d.ts

@@ -0,0 +1,37 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/image-selector/image-selector.d.ts
+declare const imageSelectorVariants: (props?: ({
+  columns?: 2 | 3 | 4 | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SelectableImage {
+  id: string;
+  src: string;
+  /** Names the checkbox in Select mode, so it must describe the photo. */
+  alt: string;
+}
+interface ImageSelectorProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange" | "children">, VariantProps<typeof imageSelectorVariants> {
+  images: SelectableImage[];
+  /** Selected image ids (controlled). */
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  /** Whether Select mode is on (controlled). */
+  selecting?: boolean;
+  defaultSelecting?: boolean;
+  onSelectingChange?: (selecting: boolean) => void;
+  /** Called with the ids being deleted. They are also hidden until Reset. */
+  onDelete?: (ids: string[]) => void;
+  /** Shows a Share button in the bar, called with the selected ids. */
+  onShare?: (ids: string[]) => void;
+  /** Show a Reset button that restores deleted photos and leaves Select mode. */
+  showReset?: boolean;
+  /** Accessible name of the photo group. */
+  label?: string;
+  gridClassName?: string;
+}
+/** A photo grid with a Select mode, a selection count and share/delete actions. */
+declare function ImageSelector({ className, columns, images, value: valueProp, defaultValue, onValueChange, selecting: selectingProp, defaultSelecting, onSelectingChange, onDelete, onShare, showReset, label, gridClassName, ...props }: ImageSelectorProps): import("react").JSX.Element;
+//#endregion
+export { ImageSelector, ImageSelectorProps, SelectableImage, imageSelectorVariants };
+//# sourceMappingURL=image-selector.d.ts.map

package/dist/components/image-selector/image-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-selector.d.ts","names":[],"sources":["../../../src/components/image-selector/image-selector.tsx"],"mappings":";;;cA6CM,wBAAqB;;6CAWzB;UAEe;EACf;EACA;;EAEA;;UAGe,2BAEb,KAAK,yEACL,oBAAoB;EACtB,QAAQ;;EAER;EACA;EACA,iBAAiB;;EAEjB;EACA;EACA,qBAAqB;;EAErB,YAAY;;EAEZ,WAAW;;EAEX;;EAEA;EACA;;;iBAIc,gBACd,WACA,SACA,QACA,OAAO,WACP,cACA,eACA,WAAW,eACX,kBACA,mBACA,UACA,SACA,WACA,OACA,kBACG,SACF,qCAAkB,IAAA"}

package/dist/components/image-selector/image-selector.js

@@ -0,0 +1,253 @@
+"use client";
+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 { useId, useState } from "react";
+import { AnimatePresence, MotionConfig, motion } from "motion/react";
+//#region src/components/image-selector/image-selector.tsx
+const PREFIX = "dowel-image-selector";
+const STYLES = `
+@keyframes ${PREFIX}-rise {
+  from { opacity: 0; translate: 0 1.25rem; }
+}
+@keyframes ${PREFIX}-wiggle {
+  25% { rotate: 5deg; scale: 1.1; }
+  75% { rotate: -5deg; }
+}
+[data-slot="image-selector-toolbar"] {
+  animation: ${PREFIX}-rise calc(250ms * var(--motion-scale)) var(--ease-out-quint) both;
+}
+[data-slot="image-selector-reset"] [data-state="reset"] {
+  display: inline-block;
+  animation: ${PREFIX}-wiggle calc(300ms * var(--motion-scale)) var(--ease-out-quint);
+}
+`;
+const imageSelectorVariants = cva("grid gap-1", {
+	variants: { columns: {
+		2: "grid-cols-2",
+		3: "grid-cols-3",
+		4: "grid-cols-4"
+	} },
+	defaultVariants: { columns: 3 }
+});
+/** A photo grid with a Select mode, a selection count and share/delete actions. */
+function ImageSelector({ className, columns, images, value: valueProp, defaultValue = [], onValueChange, selecting: selectingProp, defaultSelecting = false, onSelectingChange, onDelete, onShare, showReset = true, label = "Photos", gridClassName, ...props }) {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const [uncontrolledSelecting, setUncontrolledSelecting] = useState(defaultSelecting);
+	const [removed, setRemoved] = useState(/* @__PURE__ */ new Set());
+	const [resets, setResets] = useState(0);
+	const selected = valueProp ?? uncontrolledValue;
+	const selecting = selectingProp ?? uncontrolledSelecting;
+	const labelId = useId();
+	const visible = images.filter((image) => !removed.has(image.id));
+	const count = selected.length;
+	function setSelected(next) {
+		if (valueProp === void 0) setUncontrolledValue(next);
+		onValueChange?.(next);
+	}
+	function setSelecting(next) {
+		if (selectingProp === void 0) setUncontrolledSelecting(next);
+		onSelectingChange?.(next);
+		if (!next && count > 0) setSelected([]);
+	}
+	function toggle(id) {
+		setSelected(selected.includes(id) ? selected.filter((item) => item !== id) : [...selected, id]);
+	}
+	function remove() {
+		if (count === 0) return;
+		onDelete?.(selected);
+		setRemoved(/* @__PURE__ */ new Set([...removed, ...selected]));
+		setSelected([]);
+	}
+	function reset() {
+		setRemoved(/* @__PURE__ */ new Set());
+		setResets(resets + 1);
+		setSelecting(false);
+	}
+	const pill = "h-8 rounded-full px-3 font-semibold backdrop-blur-xl";
+	return /* @__PURE__ */ jsx(MotionConfig, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "image-selector",
+			"data-selecting": selecting ? "" : void 0,
+			className: cn("relative flex w-full flex-col gap-3", className),
+			...props,
+			children: [
+				/* @__PURE__ */ jsx("style", {
+					href: PREFIX,
+					precedence: "dowel",
+					children: STYLES
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					"data-slot": "image-selector-header",
+					className: "flex items-center justify-between gap-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						id: labelId,
+						className: "text-sm font-medium",
+						children: label
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex gap-2",
+						children: [showReset ? /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "secondary",
+							size: "sm",
+							"data-slot": "image-selector-reset",
+							className: pill,
+							onClick: reset,
+							children: /* @__PURE__ */ jsx("span", {
+								"data-state": resets > 0 ? "reset" : void 0,
+								children: "Reset"
+							}, resets)
+						}) : null, /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: selecting ? "primary" : "secondary",
+							size: "sm",
+							"aria-pressed": selecting,
+							"data-slot": "image-selector-toggle",
+							className: pill,
+							onClick: () => setSelecting(!selecting),
+							children: "Select"
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx("ul", {
+					"aria-labelledby": labelId,
+					"data-slot": "image-selector-grid",
+					className: cn(imageSelectorVariants({ columns }), gridClassName),
+					children: /* @__PURE__ */ jsx(AnimatePresence, {
+						initial: false,
+						children: visible.map((image) => {
+							const checked = selecting && selected.includes(image.id);
+							const picture = /* @__PURE__ */ jsx("img", {
+								src: image.src,
+								alt: image.alt,
+								draggable: false,
+								loading: "lazy",
+								className: cn("size-full rounded-lg object-cover transition-[opacity,scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", checked && "scale-95 opacity-75")
+							});
+							return /* @__PURE__ */ jsx(motion.li, {
+								layout: true,
+								initial: {
+									opacity: 0,
+									scale: .8
+								},
+								animate: {
+									opacity: 1,
+									scale: 1
+								},
+								exit: {
+									opacity: 0,
+									scale: .8
+								},
+								transition: {
+									type: "spring",
+									stiffness: 300,
+									damping: 25
+								},
+								"data-slot": "image-selector-item",
+								"data-state": checked ? "checked" : "unchecked",
+								className: "relative aspect-square",
+								children: selecting ? /* @__PURE__ */ jsxs("label", {
+									className: "group/tile block size-full cursor-pointer rounded-lg",
+									children: [
+										/* @__PURE__ */ jsx("input", {
+											type: "checkbox",
+											checked,
+											onChange: () => toggle(image.id),
+											className: "peer absolute inset-0 size-full cursor-pointer opacity-0"
+										}),
+										picture,
+										/* @__PURE__ */ jsx("span", {
+											"aria-hidden": "true",
+											className: "pointer-events-none absolute inset-0 rounded-lg peer-focus-visible:ring-2 peer-focus-visible:ring-ring/55 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background"
+										}),
+										/* @__PURE__ */ jsx("span", {
+											"aria-hidden": "true",
+											"data-slot": "image-selector-check",
+											className: cn("pointer-events-none absolute end-2 bottom-2 grid size-6 place-items-center rounded-full border-2 border-background shadow-sm", "transition-[scale,background-color] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]", checked ? "scale-100 bg-primary text-primary-foreground" : "scale-90 bg-background/40"),
+											children: /* @__PURE__ */ jsx("svg", {
+												viewBox: "0 0 24 24",
+												fill: "none",
+												className: cn("size-3.5", !checked && "opacity-0"),
+												children: /* @__PURE__ */ jsx("path", {
+													d: "M20 6 9 17l-5-5",
+													stroke: "currentColor",
+													strokeWidth: "3",
+													strokeLinecap: "round",
+													strokeLinejoin: "round"
+												})
+											})
+										})
+									]
+								}) : picture
+							}, image.id);
+						})
+					})
+				}),
+				selecting ? /* @__PURE__ */ jsxs("div", {
+					"data-slot": "image-selector-toolbar",
+					className: "sticky bottom-2 mx-auto flex w-full max-w-xs items-center justify-between gap-2 rounded-full border border-border bg-background/80 p-2 shadow-lg backdrop-blur-md",
+					children: [
+						onShare ? /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon",
+							"aria-label": "Share selected",
+							"aria-disabled": count === 0 || void 0,
+							"data-slot": "image-selector-share",
+							className: "rounded-full text-primary",
+							onClick: () => {
+								if (count > 0) onShare(selected);
+							},
+							children: /* @__PURE__ */ jsx("svg", {
+								viewBox: "0 0 24 24",
+								fill: "none",
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ jsx("path", {
+									d: "M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M16 6l-4-4-4 4M12 2v13",
+									stroke: "currentColor",
+									strokeWidth: "2",
+									strokeLinecap: "round",
+									strokeLinejoin: "round"
+								})
+							})
+						}) : /* @__PURE__ */ jsx("span", { className: "size-9" }),
+						/* @__PURE__ */ jsxs("span", {
+							role: "status",
+							"aria-live": "polite",
+							className: "text-sm tabular-nums",
+							children: [count, " selected"]
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon",
+							"aria-label": "Delete selected",
+							"aria-disabled": count === 0 || void 0,
+							"data-slot": "image-selector-delete",
+							className: "rounded-full text-destructive",
+							onClick: remove,
+							children: /* @__PURE__ */ jsx("svg", {
+								viewBox: "0 0 24 24",
+								fill: "none",
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ jsx("path", {
+									d: "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6",
+									stroke: "currentColor",
+									strokeWidth: "2",
+									strokeLinecap: "round",
+									strokeLinejoin: "round"
+								})
+							})
+						})
+					]
+				}) : null
+			]
+		})
+	});
+}
+//#endregion
+export { ImageSelector, imageSelectorVariants };
+
+//# sourceMappingURL=image-selector.js.map

package/dist/components/image-selector/image-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-selector.js","names":[],"sources":["../../../src/components/image-selector/image-selector.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Interactive Image Selector (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { AnimatePresence, MotionConfig, motion } from \"motion/react\";\nimport { useId, useState, type ComponentPropsWithRef } from \"react\";\n\nimport { Button } from \"@/components/button\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A photo grid with a Select mode, as in a phone's gallery: enter it, tick\n * photos, then share or delete them from a bar that rises from the bottom.\n *\n * Each photo in Select mode is a real checkbox (a visually hidden native\n * input wrapping the image), so Tab reaches each one and Space ticks it; the\n * image's alt text is its name. The count is a polite live region. Delete\n * keeps focus on its button — it becomes aria-disabled rather than disabled\n * when nothing is left selected, so focus is never dropped to the page.\n *\n * `motion` is used for one thing: when photos are deleted the rest reflow\n * into their new cells, a shared-layout animation between DOM positions\n * (ADR 0014). Everything else — the tick popping in, the bar rising, the\n * Reset wiggle — is CSS. Under reduced motion the grid simply re-lays out.\n */\n\nconst PREFIX = \"dowel-image-selector\";\n\nconst STYLES = `\n@keyframes ${PREFIX}-rise {\n  from { opacity: 0; translate: 0 1.25rem; }\n}\n@keyframes ${PREFIX}-wiggle {\n  25% { rotate: 5deg; scale: 1.1; }\n  75% { rotate: -5deg; }\n}\n[data-slot=\"image-selector-toolbar\"] {\n  animation: ${PREFIX}-rise calc(250ms * var(--motion-scale)) var(--ease-out-quint) both;\n}\n[data-slot=\"image-selector-reset\"] [data-state=\"reset\"] {\n  display: inline-block;\n  animation: ${PREFIX}-wiggle calc(300ms * var(--motion-scale)) var(--ease-out-quint);\n}\n`;\n\nconst imageSelectorVariants = cva(\"grid gap-1\", {\n  variants: {\n    columns: {\n      2: \"grid-cols-2\",\n      3: \"grid-cols-3\",\n      4: \"grid-cols-4\",\n    },\n  },\n  defaultVariants: {\n    columns: 3,\n  },\n});\n\nexport interface SelectableImage {\n  id: string;\n  src: string;\n  /** Names the checkbox in Select mode, so it must describe the photo. */\n  alt: string;\n}\n\nexport interface ImageSelectorProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"defaultValue\" | \"onChange\" | \"children\">,\n    VariantProps<typeof imageSelectorVariants> {\n  images: SelectableImage[];\n  /** Selected image ids (controlled). */\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n  /** Whether Select mode is on (controlled). */\n  selecting?: boolean;\n  defaultSelecting?: boolean;\n  onSelectingChange?: (selecting: boolean) => void;\n  /** Called with the ids being deleted. They are also hidden until Reset. */\n  onDelete?: (ids: string[]) => void;\n  /** Shows a Share button in the bar, called with the selected ids. */\n  onShare?: (ids: string[]) => void;\n  /** Show a Reset button that restores deleted photos and leaves Select mode. */\n  showReset?: boolean;\n  /** Accessible name of the photo group. */\n  label?: string;\n  gridClassName?: string;\n}\n\n/** A photo grid with a Select mode, a selection count and share/delete actions. */\nexport function ImageSelector({\n  className,\n  columns,\n  images,\n  value: valueProp,\n  defaultValue = [],\n  onValueChange,\n  selecting: selectingProp,\n  defaultSelecting = false,\n  onSelectingChange,\n  onDelete,\n  onShare,\n  showReset = true,\n  label = \"Photos\",\n  gridClassName,\n  ...props\n}: ImageSelectorProps) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const [uncontrolledSelecting, setUncontrolledSelecting] = useState(defaultSelecting);\n  const [removed, setRemoved] = useState<ReadonlySet<string>>(new Set());\n  const [resets, setResets] = useState(0);\n  const selected = valueProp ?? uncontrolledValue;\n  const selecting = selectingProp ?? uncontrolledSelecting;\n  const labelId = useId();\n  const visible = images.filter((image) => !removed.has(image.id));\n  const count = selected.length;\n\n  function setSelected(next: string[]) {\n    if (valueProp === undefined) setUncontrolledValue(next);\n    onValueChange?.(next);\n  }\n\n  function setSelecting(next: boolean) {\n    if (selectingProp === undefined) setUncontrolledSelecting(next);\n    onSelectingChange?.(next);\n    if (!next && count > 0) setSelected([]);\n  }\n\n  function toggle(id: string) {\n    setSelected(\n      selected.includes(id) ? selected.filter((item) => item !== id) : [...selected, id],\n    );\n  }\n\n  function remove() {\n    if (count === 0) return;\n    onDelete?.(selected);\n    setRemoved(new Set([...removed, ...selected]));\n    setSelected([]);\n  }\n\n  function reset() {\n    setRemoved(new Set());\n    setResets(resets + 1);\n    setSelecting(false);\n  }\n\n  const pill = \"h-8 rounded-full px-3 font-semibold backdrop-blur-xl\";\n\n  return (\n    <MotionConfig reducedMotion=\"user\">\n      <div\n        data-slot=\"image-selector\"\n        data-selecting={selecting ? \"\" : undefined}\n        className={cn(\"relative flex w-full flex-col gap-3\", className)}\n        {...props}\n      >\n        <style href={PREFIX} precedence=\"dowel\">\n          {STYLES}\n        </style>\n        <div\n          data-slot=\"image-selector-header\"\n          className=\"flex items-center justify-between gap-2\"\n        >\n          <span id={labelId} className=\"text-sm font-medium\">\n            {label}\n          </span>\n          <div className=\"flex gap-2\">\n            {showReset ? (\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                size=\"sm\"\n                data-slot=\"image-selector-reset\"\n                className={pill}\n                onClick={reset}\n              >\n                <span key={resets} data-state={resets > 0 ? \"reset\" : undefined}>\n                  Reset\n                </span>\n              </Button>\n            ) : null}\n            <Button\n              type=\"button\"\n              variant={selecting ? \"primary\" : \"secondary\"}\n              size=\"sm\"\n              aria-pressed={selecting}\n              data-slot=\"image-selector-toggle\"\n              className={pill}\n              onClick={() => setSelecting(!selecting)}\n            >\n              Select\n            </Button>\n          </div>\n        </div>\n\n        <ul\n          aria-labelledby={labelId}\n          data-slot=\"image-selector-grid\"\n          className={cn(imageSelectorVariants({ columns }), gridClassName)}\n        >\n          <AnimatePresence initial={false}>\n            {visible.map((image) => {\n              const checked = selecting && selected.includes(image.id);\n              const picture = (\n                <img\n                  src={image.src}\n                  alt={image.alt}\n                  draggable={false}\n                  loading=\"lazy\"\n                  className={cn(\n                    \"size-full rounded-lg object-cover transition-[opacity,scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n                    checked && \"scale-95 opacity-75\",\n                  )}\n                />\n              );\n              return (\n                <motion.li\n                  key={image.id}\n                  layout\n                  initial={{ opacity: 0, scale: 0.8 }}\n                  animate={{ opacity: 1, scale: 1 }}\n                  exit={{ opacity: 0, scale: 0.8 }}\n                  transition={{ type: \"spring\", stiffness: 300, damping: 25 }}\n                  data-slot=\"image-selector-item\"\n                  data-state={checked ? \"checked\" : \"unchecked\"}\n                  className=\"relative aspect-square\"\n                >\n                  {selecting ? (\n                    <label className=\"group/tile block size-full cursor-pointer rounded-lg\">\n                      <input\n                        type=\"checkbox\"\n                        checked={checked}\n                        onChange={() => toggle(image.id)}\n                        className=\"peer absolute inset-0 size-full cursor-pointer opacity-0\"\n                      />\n                      {picture}\n                      <span\n                        aria-hidden=\"true\"\n                        className=\"pointer-events-none absolute inset-0 rounded-lg peer-focus-visible:ring-2 peer-focus-visible:ring-ring/55 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background\"\n                      />\n                      <span\n                        aria-hidden=\"true\"\n                        data-slot=\"image-selector-check\"\n                        className={cn(\n                          \"pointer-events-none absolute end-2 bottom-2 grid size-6 place-items-center rounded-full border-2 border-background shadow-sm\",\n                          \"transition-[scale,background-color] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]\",\n                          checked\n                            ? \"scale-100 bg-primary text-primary-foreground\"\n                            : \"scale-90 bg-background/40\",\n                        )}\n                      >\n                        <svg\n                          viewBox=\"0 0 24 24\"\n                          fill=\"none\"\n                          className={cn(\"size-3.5\", !checked && \"opacity-0\")}\n                        >\n                          <path\n                            d=\"M20 6 9 17l-5-5\"\n                            stroke=\"currentColor\"\n                            strokeWidth=\"3\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                          />\n                        </svg>\n                      </span>\n                    </label>\n                  ) : (\n                    picture\n                  )}\n                </motion.li>\n              );\n            })}\n          </AnimatePresence>\n        </ul>\n\n        {selecting ? (\n          <div\n            data-slot=\"image-selector-toolbar\"\n            className=\"sticky bottom-2 mx-auto flex w-full max-w-xs items-center justify-between gap-2 rounded-full border border-border bg-background/80 p-2 shadow-lg backdrop-blur-md\"\n          >\n            {onShare ? (\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"icon\"\n                aria-label=\"Share selected\"\n                aria-disabled={count === 0 || undefined}\n                data-slot=\"image-selector-share\"\n                className=\"rounded-full text-primary\"\n                onClick={() => {\n                  if (count > 0) onShare(selected);\n                }}\n              >\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n                  <path\n                    d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M16 6l-4-4-4 4M12 2v13\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                  />\n                </svg>\n              </Button>\n            ) : (\n              <span className=\"size-9\" />\n            )}\n            <span role=\"status\" aria-live=\"polite\" className=\"text-sm tabular-nums\">\n              {count} selected\n            </span>\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon\"\n              aria-label=\"Delete selected\"\n              aria-disabled={count === 0 || undefined}\n              data-slot=\"image-selector-delete\"\n              className=\"rounded-full text-destructive\"\n              onClick={remove}\n            >\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n                <path\n                  d=\"M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n              </svg>\n            </Button>\n          </div>\n        ) : null}\n      </div>\n    </MotionConfig>\n  );\n}\n\nexport { imageSelectorVariants };\n"],"mappings":"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"}

package/dist/components/image-selector/index.d.ts

@@ -0,0 +1,2 @@
+import { ImageSelector, ImageSelectorProps, SelectableImage, imageSelectorVariants } from "./image-selector.js";
+export { ImageSelector, type ImageSelectorProps, type SelectableImage, imageSelectorVariants };

package/dist/components/image-selector/index.js

@@ -0,0 +1,2 @@
+import { ImageSelector, imageSelectorVariants } from "./image-selector.js";
+export { ImageSelector, imageSelectorVariants };

package/dist/components/image-selector/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/image-selector/meta.ts
+const meta = defineMeta({
+	name: "image-selector",
+	title: "Image Selector",
+	description: "A photo grid with a Select mode: tick photos, see the count, share or delete them, and reset.",
+	category: "form",
+	status: "beta",
+	dependencies: ["class-variance-authority", "motion"],
+	registryDependencies: ["button"],
+	files: ["image-selector.tsx"],
+	a11y: "The grid is a list named by `label`. In Select mode each photo is a native checkbox named by the image's alt text — Tab reaches each, Space ticks it — with a visible focus ring on the photo. The Select toggle exposes aria-pressed; the selection count is a polite live region. Share and Delete are named icon buttons that become aria-disabled (not disabled) with nothing selected, so focus stays put after a delete. Tick marks are aria-hidden. The reflow after a delete uses motion inside MotionConfig reducedMotion=\"user\"; the rest is CSS and stops under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/image-selector/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/image-selector/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"image-selector\",\n  title: \"Image Selector\",\n  description:\n    \"A photo grid with a Select mode: tick photos, see the count, share or delete them, and reset.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"motion\"],\n  registryDependencies: [\"button\"],\n  files: [\"image-selector.tsx\"],\n  a11y:\n    \"The grid is a list named by `label`. In Select mode each photo is a native checkbox named by the image's alt \" +\n    \"text — Tab reaches each, Space ticks it — with a visible focus ring on the photo. The Select toggle exposes \" +\n    \"aria-pressed; the selection count is a polite live region. Share and Delete are named icon buttons that \" +\n    \"become aria-disabled (not disabled) with nothing selected, so focus stays put after a delete. Tick marks are \" +\n    'aria-hidden. The reflow after a delete uses motion inside MotionConfig reducedMotion=\"user\"; the rest is CSS ' +\n    \"and stops under reduced motion.\",\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,oBAAoB;CAC5B,MACE;AAMJ,CAAC"}

package/dist/components/inline-confirm/index.d.ts

@@ -0,0 +1,2 @@
+import { InlineConfirm, InlineConfirmPhase, InlineConfirmProps, inlineConfirmVariants } from "./inline-confirm.js";
+export { InlineConfirm, type InlineConfirmPhase, type InlineConfirmProps, inlineConfirmVariants };

package/dist/components/inline-confirm/index.js

@@ -0,0 +1,2 @@
+import { InlineConfirm, inlineConfirmVariants } from "./inline-confirm.js";
+export { InlineConfirm, inlineConfirmVariants };