@burtson-labs/ui 0.14.0 → 0.15.0

package/dist/components/avatar-upload.js

@@ -0,0 +1,359 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
+import { Slider } from "./slider.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Camera from "@burtson-labs/icons/react/camera";
+//#region src/components/avatar-upload.tsx
+var clamp = (n) => Math.min(1, Math.max(0, n));
+/** Choose, position and save a profile photo. No storage or networking is built in. */
+function AvatarUpload({ src, hasPhoto = Boolean(src), name, fallback, onUpload, onRemove, disabled = false, maxBytes = 10485760, outputSize = 512, className, ...props }) {
+	const input = React.useRef(null);
+	const trigger = React.useRef(null);
+	const crop = React.useRef(null);
+	const request = React.useRef(0);
+	const saving = React.useRef(false);
+	const returnFocus = React.useRef(false);
+	const ownedUrl = React.useRef(null);
+	const drag = React.useRef(null);
+	const [photo, setPhoto] = React.useState(null);
+	const [position, setPosition] = React.useState({
+		x: .5,
+		y: .5
+	});
+	const [zoom, setZoom] = React.useState(1);
+	const [busy, setBusy] = React.useState(false);
+	const [reading, setReading] = React.useState(false);
+	const [error, setError] = React.useState("");
+	const [message, setMessage] = React.useState("");
+	const helpId = React.useId();
+	const errorId = React.useId();
+	const blocked = disabled || busy || reading;
+	React.useEffect(() => () => {
+		request.current++;
+		if (ownedUrl.current) URL.revokeObjectURL(ownedUrl.current);
+	}, []);
+	React.useEffect(() => {
+		if (photo) crop.current?.focus();
+	}, [photo]);
+	React.useEffect(() => {
+		if (returnFocus.current && !photo && !blocked) {
+			returnFocus.current = false;
+			trigger.current?.focus();
+		}
+	}, [photo, blocked]);
+	const discard = () => {
+		request.current++;
+		returnFocus.current = true;
+		if (ownedUrl.current) URL.revokeObjectURL(ownedUrl.current);
+		ownedUrl.current = null;
+		setPhoto(null);
+		setReading(false);
+	};
+	const choose = (file) => {
+		if (!file || blocked || saving.current) return;
+		setError("");
+		setMessage("");
+		if (![
+			"image/jpeg",
+			"image/png",
+			"image/webp"
+		].includes(file.type)) {
+			setError("Choose a JPEG, PNG or WebP photo. Export HEIC photos as JPEG first.");
+			return;
+		}
+		if (!file.size || file.size > maxBytes) {
+			setError(`Choose a photo under ${Math.round(maxBytes / 1024 / 1024)} MB that is not empty.`);
+			return;
+		}
+		const id = ++request.current;
+		const url = URL.createObjectURL(file);
+		if (ownedUrl.current) URL.revokeObjectURL(ownedUrl.current);
+		ownedUrl.current = url;
+		setPhoto(null);
+		setReading(true);
+		const image = new Image();
+		image.onload = () => {
+			if (id !== request.current) return;
+			setReading(false);
+			if (!image.naturalWidth || !image.naturalHeight) {
+				setError("This photo could not be opened. Try another image.");
+				URL.revokeObjectURL(url);
+				ownedUrl.current = null;
+				return;
+			}
+			setPosition({
+				x: .5,
+				y: .5
+			});
+			setZoom(1);
+			setPhoto({
+				url,
+				image
+			});
+		};
+		image.onerror = () => {
+			if (id !== request.current) return;
+			setReading(false);
+			setError("This photo could not be opened. Try another image.");
+			URL.revokeObjectURL(url);
+			ownedUrl.current = null;
+		};
+		image.src = url;
+	};
+	const side = photo ? Math.min(photo.image.naturalWidth, photo.image.naturalHeight) / zoom : 1;
+	const act = async (remove = false) => {
+		if (blocked || saving.current || !remove && !photo) return;
+		saving.current = true;
+		setBusy(true);
+		setError("");
+		setMessage("");
+		try {
+			if (remove) await onRemove?.();
+			else if (photo) {
+				const canvas = document.createElement("canvas");
+				canvas.width = canvas.height = Math.min(2048, Math.max(64, Math.round(outputSize) || 512));
+				const ctx = canvas.getContext("2d");
+				if (!ctx) throw new Error("Your browser could not prepare the photo. Please try again.");
+				ctx.fillStyle = "#ffffff";
+				ctx.fillRect(0, 0, canvas.width, canvas.height);
+				ctx.drawImage(photo.image, (photo.image.naturalWidth - side) * position.x, (photo.image.naturalHeight - side) * position.y, side, side, 0, 0, canvas.width, canvas.height);
+				const blob = await new Promise((resolve, reject) => canvas.toBlob((value) => value ? resolve(value) : reject(/* @__PURE__ */ new Error("Could not prepare this photo. Try another image.")), "image/jpeg", .9));
+				await onUpload(new File([blob], "profile-photo.jpg", { type: "image/jpeg" }));
+			}
+			discard();
+			setMessage(remove ? "Profile photo removed." : "Profile photo updated.");
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Could not save your photo. Please try again.");
+		} finally {
+			saving.current = false;
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "avatar-upload",
+		"aria-busy": busy || reading || void 0,
+		className: cn("grid min-w-0 gap-4", className),
+		...props,
+		onDragOver: (event) => {
+			props.onDragOver?.(event);
+			event.preventDefault();
+		},
+		onDrop: (event) => {
+			props.onDrop?.(event);
+			event.preventDefault();
+			choose(event.dataTransfer.files[0]);
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-4",
+				children: [
+					/* @__PURE__ */ jsxs(Avatar, {
+						className: "size-16",
+						children: [src && /* @__PURE__ */ jsx(AvatarImage, {
+							src,
+							alt: `${name}'s profile photo`,
+							referrerPolicy: "no-referrer"
+						}), /* @__PURE__ */ jsx(AvatarFallback, {
+							className: "text-lg",
+							children: fallback ?? name.slice(0, 2).toUpperCase()
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "grid min-w-0 flex-1 gap-2",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap gap-2",
+							children: [/* @__PURE__ */ jsxs(Button, {
+								ref: trigger,
+								variant: "outline",
+								disabled: blocked,
+								onClick: () => input.current?.click(),
+								"aria-describedby": `${helpId}${error ? ` ${errorId}` : ""}`,
+								children: [
+									/* @__PURE__ */ jsx(Camera, {}),
+									" ",
+									hasPhoto ? "Change photo" : "Choose photo"
+								]
+							}), onRemove && hasPhoto && !photo && /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								disabled: blocked,
+								onClick: () => void act(true),
+								children: "Remove photo"
+							})]
+						}), /* @__PURE__ */ jsxs("p", {
+							id: helpId,
+							className: "text-xs text-muted-foreground",
+							children: [
+								"JPEG, PNG or WebP · up to ",
+								Math.round(maxBytes / 1024 / 1024),
+								" MB. You can also drop a photo here."
+							]
+						})]
+					}),
+					/* @__PURE__ */ jsx("input", {
+						ref: input,
+						type: "file",
+						accept: "image/jpeg,image/png,image/webp",
+						"aria-label": "Choose profile photo",
+						className: "hidden",
+						disabled: blocked,
+						onChange: (event) => {
+							const file = event.target.files?.[0];
+							event.target.value = "";
+							choose(file);
+						}
+					})
+				]
+			}),
+			photo && /* @__PURE__ */ jsxs("div", {
+				className: "grid gap-4 rounded-lg border border-border bg-surface p-4",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						ref: crop,
+						tabIndex: -1,
+						role: "group",
+						"aria-label": "Photo crop preview. Use the zoom and position controls to adjust it.",
+						className: cn("relative mx-auto aspect-square w-full max-w-64 touch-none overflow-hidden rounded-full bg-muted", "outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", !blocked && "cursor-move"),
+						onPointerDown: (event) => {
+							if (blocked) return;
+							event.currentTarget.setPointerCapture(event.pointerId);
+							drag.current = {
+								x: event.clientX,
+								y: event.clientY,
+								px: position.x,
+								py: position.y
+							};
+						},
+						onPointerMove: (event) => {
+							if (!drag.current || blocked) return;
+							const scale = event.currentTarget.clientWidth / side;
+							const dx = (photo.image.naturalWidth - side) * scale;
+							const dy = (photo.image.naturalHeight - side) * scale;
+							setPosition({
+								x: dx ? clamp(drag.current.px - (event.clientX - drag.current.x) / dx) : .5,
+								y: dy ? clamp(drag.current.py - (event.clientY - drag.current.y) / dy) : .5
+							});
+						},
+						onPointerUp: () => {
+							drag.current = null;
+						},
+						onPointerCancel: () => {
+							drag.current = null;
+						},
+						onLostPointerCapture: () => {
+							drag.current = null;
+						},
+						children: /* @__PURE__ */ jsx("img", {
+							src: photo.url,
+							alt: "Crop preview",
+							draggable: false,
+							className: "pointer-events-none absolute max-w-none select-none",
+							style: {
+								width: `${photo.image.naturalWidth / side * 100}%`,
+								height: `${photo.image.naturalHeight / side * 100}%`,
+								left: `${-(photo.image.naturalWidth - side) * position.x / side * 100}%`,
+								top: `${-(photo.image.naturalHeight - side) * position.y / side * 100}%`
+							}
+						})
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-center text-xs text-muted-foreground",
+						children: "Drag to reposition. Use position controls for precise adjustments."
+					}),
+					/* @__PURE__ */ jsxs("label", {
+						className: "grid gap-2 text-sm",
+						children: [
+							"Zoom",
+							" ",
+							/* @__PURE__ */ jsx(Slider, {
+								min: 1,
+								max: 3,
+								step: .05,
+								value: zoom,
+								onValueChange: setZoom,
+								disabled: blocked,
+								"aria-valuetext": `${Math.round(zoom * 100)}%`
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("details", {
+						className: "rounded-md border border-border px-3 text-sm",
+						children: [/* @__PURE__ */ jsx("summary", {
+							className: "flex min-h-11 cursor-pointer items-center font-medium",
+							children: "Position controls"
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "grid gap-3 pb-3 sm:grid-cols-2",
+							children: [/* @__PURE__ */ jsxs("label", {
+								className: "grid gap-2",
+								htmlFor: `${helpId}-x`,
+								children: ["Horizontal position", /* @__PURE__ */ jsx(Slider, {
+									min: 0,
+									max: 100,
+									step: 1,
+									id: `${helpId}-x`,
+									value: Math.round(position.x * 100),
+									onValueChange: (value) => setPosition((p) => ({
+										...p,
+										x: value / 100
+									})),
+									disabled: blocked || photo.image.naturalWidth <= side,
+									"aria-valuetext": `${Math.round(position.x * 100)}%`
+								})]
+							}), /* @__PURE__ */ jsxs("label", {
+								className: "grid gap-2",
+								htmlFor: `${helpId}-y`,
+								children: ["Vertical position", /* @__PURE__ */ jsx(Slider, {
+									min: 0,
+									max: 100,
+									step: 1,
+									id: `${helpId}-y`,
+									value: Math.round(position.y * 100),
+									onValueChange: (value) => setPosition((p) => ({
+										...p,
+										y: value / 100
+									})),
+									disabled: blocked || photo.image.naturalHeight <= side,
+									"aria-valuetext": `${Math.round(position.y * 100)}%`
+								})]
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap justify-end gap-2",
+						children: [/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							disabled: busy,
+							onClick: () => {
+								discard();
+								setError("");
+							},
+							children: "Cancel"
+						}), /* @__PURE__ */ jsx(Button, {
+							disabled: blocked,
+							onClick: () => void act(),
+							children: busy ? "Saving photo…" : "Save photo"
+						})]
+					})
+				]
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				id: errorId,
+				role: "alert",
+				className: "text-sm text-destructive",
+				children: error
+			}),
+			/* @__PURE__ */ jsx("p", {
+				role: "status",
+				"aria-live": "polite",
+				className: cn("text-sm text-muted-foreground", !reading && !busy && !message && "sr-only"),
+				children: reading ? "Opening photo…" : busy ? "Saving your profile photo…" : message
+			})
+		]
+	});
+}
+//#endregion
+export { AvatarUpload };
+
+//# sourceMappingURL=avatar-upload.js.map

package/dist/components/avatar-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-upload.js","names":[],"sources":["../../src/components/avatar-upload.tsx"],"sourcesContent":["import Camera from '@burtson-labs/icons/react/camera';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses } from '../lib/utils';\n\nimport { Avatar, AvatarFallback, AvatarImage } from './avatar';\nimport { Button } from './button';\nimport { Slider } from './slider';\n\nexport interface AvatarUploadProps extends Omit<React.ComponentProps<'div'>, 'onError'> {\n  src?: string;\n  /** A stored photo may exist even when its preview cannot be loaded. */\n  hasPhoto?: boolean;\n  /** The person's name, used to label the current photo. */\n  name: string;\n  fallback?: React.ReactNode;\n  /** Receives a square JPEG. Resolve only after it has been saved; reject to offer retry. */\n  onUpload: (file: File) => Promise<void>;\n  onRemove?: () => Promise<void>;\n  disabled?: boolean;\n  /** Maximum size of the original file. Default: 10 MiB. */\n  maxBytes?: number;\n  /** Exported square dimension. Default: 512px. */\n  outputSize?: number;\n}\n\ntype Photo = { url: string; image: HTMLImageElement };\nconst clamp = (n: number) => Math.min(1, Math.max(0, n));\n\n/** Choose, position and save a profile photo. No storage or networking is built in. */\nexport function AvatarUpload({\n  src,\n  hasPhoto = Boolean(src),\n  name,\n  fallback,\n  onUpload,\n  onRemove,\n  disabled = false,\n  maxBytes = 10 * 1024 * 1024,\n  outputSize = 512,\n  className,\n  ...props\n}: AvatarUploadProps) {\n  const input = React.useRef<HTMLInputElement>(null);\n  const trigger = React.useRef<HTMLButtonElement>(null);\n  const crop = React.useRef<HTMLDivElement>(null);\n  const request = React.useRef(0);\n  const saving = React.useRef(false);\n  const returnFocus = React.useRef(false);\n  const ownedUrl = React.useRef<string | null>(null);\n  const drag = React.useRef<{ x: number; y: number; px: number; py: number } | null>(null);\n  const [photo, setPhoto] = React.useState<Photo | null>(null);\n  const [position, setPosition] = React.useState({ x: 0.5, y: 0.5 });\n  const [zoom, setZoom] = React.useState(1);\n  const [busy, setBusy] = React.useState(false);\n  const [reading, setReading] = React.useState(false);\n  const [error, setError] = React.useState('');\n  const [message, setMessage] = React.useState('');\n  const helpId = React.useId();\n  const errorId = React.useId();\n  const blocked = disabled || busy || reading;\n\n  React.useEffect(\n    () => () => {\n      request.current++;\n      if (ownedUrl.current) URL.revokeObjectURL(ownedUrl.current);\n    },\n    [],\n  );\n  React.useEffect(() => {\n    if (photo) crop.current?.focus();\n  }, [photo]);\n  React.useEffect(() => {\n    if (returnFocus.current && !photo && !blocked) {\n      returnFocus.current = false;\n      trigger.current?.focus();\n    }\n  }, [photo, blocked]);\n\n  const discard = () => {\n    request.current++;\n    returnFocus.current = true;\n    if (ownedUrl.current) URL.revokeObjectURL(ownedUrl.current);\n    ownedUrl.current = null;\n    setPhoto(null);\n    setReading(false);\n  };\n\n  const choose = (file?: File) => {\n    if (!file || blocked || saving.current) return;\n    setError('');\n    setMessage('');\n    if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type)) {\n      setError('Choose a JPEG, PNG or WebP photo. Export HEIC photos as JPEG first.');\n      return;\n    }\n    if (!file.size || file.size > maxBytes) {\n      setError(`Choose a photo under ${Math.round(maxBytes / 1024 / 1024)} MB that is not empty.`);\n      return;\n    }\n    const id = ++request.current;\n    const url = URL.createObjectURL(file);\n    if (ownedUrl.current) URL.revokeObjectURL(ownedUrl.current);\n    ownedUrl.current = url;\n    setPhoto(null);\n    setReading(true);\n    const image = new Image();\n    image.onload = () => {\n      if (id !== request.current) return;\n      setReading(false);\n      if (!image.naturalWidth || !image.naturalHeight) {\n        setError('This photo could not be opened. Try another image.');\n        URL.revokeObjectURL(url);\n        ownedUrl.current = null;\n        return;\n      }\n      setPosition({ x: 0.5, y: 0.5 });\n      setZoom(1);\n      setPhoto({ url, image });\n    };\n    image.onerror = () => {\n      if (id !== request.current) return;\n      setReading(false);\n      setError('This photo could not be opened. Try another image.');\n      URL.revokeObjectURL(url);\n      ownedUrl.current = null;\n    };\n    image.src = url;\n  };\n\n  const side = photo ? Math.min(photo.image.naturalWidth, photo.image.naturalHeight) / zoom : 1;\n  const act = async (remove = false) => {\n    if (blocked || saving.current || (!remove && !photo)) return;\n    saving.current = true;\n    setBusy(true);\n    setError('');\n    setMessage('');\n    try {\n      if (remove) await onRemove?.();\n      else if (photo) {\n        const canvas = document.createElement('canvas');\n        canvas.width = canvas.height = Math.min(2048, Math.max(64, Math.round(outputSize) || 512));\n        const ctx = canvas.getContext('2d');\n        if (!ctx) throw new Error('Your browser could not prepare the photo. Please try again.');\n        ctx.fillStyle = '#ffffff';\n        ctx.fillRect(0, 0, canvas.width, canvas.height);\n        ctx.drawImage(\n          photo.image,\n          (photo.image.naturalWidth - side) * position.x,\n          (photo.image.naturalHeight - side) * position.y,\n          side,\n          side,\n          0,\n          0,\n          canvas.width,\n          canvas.height,\n        );\n        const blob = await new Promise<Blob>((resolve, reject) =>\n          canvas.toBlob(\n            (value) =>\n              value\n                ? resolve(value)\n                : reject(new Error('Could not prepare this photo. Try another image.')),\n            'image/jpeg',\n            0.9,\n          ),\n        );\n        await onUpload(new File([blob], 'profile-photo.jpg', { type: 'image/jpeg' }));\n      }\n      discard();\n      setMessage(remove ? 'Profile photo removed.' : 'Profile photo updated.');\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Could not save your photo. Please try again.');\n    } finally {\n      saving.current = false;\n      setBusy(false);\n    }\n  };\n\n  return (\n    <div\n      data-slot=\"avatar-upload\"\n      aria-busy={busy || reading || undefined}\n      className={cn('grid min-w-0 gap-4', className)}\n      {...props}\n      onDragOver={(event) => {\n        props.onDragOver?.(event);\n        event.preventDefault();\n      }}\n      onDrop={(event) => {\n        props.onDrop?.(event);\n        event.preventDefault();\n        choose(event.dataTransfer.files[0]);\n      }}\n    >\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Avatar className=\"size-16\">\n          {src && (\n            <AvatarImage src={src} alt={`${name}'s profile photo`} referrerPolicy=\"no-referrer\" />\n          )}\n          <AvatarFallback className=\"text-lg\">\n            {fallback ?? name.slice(0, 2).toUpperCase()}\n          </AvatarFallback>\n        </Avatar>\n        <div className=\"grid min-w-0 flex-1 gap-2\">\n          <div className=\"flex flex-wrap gap-2\">\n            <Button\n              ref={trigger}\n              variant=\"outline\"\n              disabled={blocked}\n              onClick={() => input.current?.click()}\n              aria-describedby={`${helpId}${error ? ` ${errorId}` : ''}`}\n            >\n              <Camera /> {hasPhoto ? 'Change photo' : 'Choose photo'}\n            </Button>\n            {onRemove && hasPhoto && !photo && (\n              <Button variant=\"ghost\" disabled={blocked} onClick={() => void act(true)}>\n                Remove photo\n              </Button>\n            )}\n          </div>\n          <p id={helpId} className=\"text-xs text-muted-foreground\">\n            JPEG, PNG or WebP · up to {Math.round(maxBytes / 1024 / 1024)} MB. You can also drop a\n            photo here.\n          </p>\n        </div>\n        <input\n          ref={input}\n          type=\"file\"\n          accept=\"image/jpeg,image/png,image/webp\"\n          aria-label=\"Choose profile photo\"\n          className=\"hidden\"\n          disabled={blocked}\n          onChange={(event) => {\n            const file = event.target.files?.[0];\n            event.target.value = '';\n            choose(file);\n          }}\n        />\n      </div>\n      {photo && (\n        <div className=\"grid gap-4 rounded-lg border border-border bg-surface p-4\">\n          <div\n            ref={crop}\n            tabIndex={-1}\n            role=\"group\"\n            aria-label=\"Photo crop preview. Use the zoom and position controls to adjust it.\"\n            className={cn(\n              'relative mx-auto aspect-square w-full max-w-64 touch-none overflow-hidden rounded-full bg-muted',\n              focusRingClasses,\n              !blocked && 'cursor-move',\n            )}\n            onPointerDown={(event) => {\n              if (blocked) return;\n              event.currentTarget.setPointerCapture(event.pointerId);\n              drag.current = { x: event.clientX, y: event.clientY, px: position.x, py: position.y };\n            }}\n            onPointerMove={(event) => {\n              if (!drag.current || blocked) return;\n              const scale = event.currentTarget.clientWidth / side;\n              const dx = (photo.image.naturalWidth - side) * scale;\n              const dy = (photo.image.naturalHeight - side) * scale;\n              setPosition({\n                x: dx ? clamp(drag.current.px - (event.clientX - drag.current.x) / dx) : 0.5,\n                y: dy ? clamp(drag.current.py - (event.clientY - drag.current.y) / dy) : 0.5,\n              });\n            }}\n            onPointerUp={() => {\n              drag.current = null;\n            }}\n            onPointerCancel={() => {\n              drag.current = null;\n            }}\n            onLostPointerCapture={() => {\n              drag.current = null;\n            }}\n          >\n            <img\n              src={photo.url}\n              alt=\"Crop preview\"\n              draggable={false}\n              className=\"pointer-events-none absolute max-w-none select-none\"\n              style={{\n                width: `${(photo.image.naturalWidth / side) * 100}%`,\n                height: `${(photo.image.naturalHeight / side) * 100}%`,\n                left: `${((-(photo.image.naturalWidth - side) * position.x) / side) * 100}%`,\n                top: `${((-(photo.image.naturalHeight - side) * position.y) / side) * 100}%`,\n              }}\n            />\n          </div>\n          <p className=\"text-center text-xs text-muted-foreground\">\n            Drag to reposition. Use position controls for precise adjustments.\n          </p>\n          <label className=\"grid gap-2 text-sm\">\n            Zoom{' '}\n            <Slider\n              min={1}\n              max={3}\n              step={0.05}\n              value={zoom}\n              onValueChange={setZoom}\n              disabled={blocked}\n              aria-valuetext={`${Math.round(zoom * 100)}%`}\n            />\n          </label>\n          <details className=\"rounded-md border border-border px-3 text-sm\">\n            <summary className=\"flex min-h-11 cursor-pointer items-center font-medium\">\n              Position controls\n            </summary>\n            <div className=\"grid gap-3 pb-3 sm:grid-cols-2\">\n              <label className=\"grid gap-2\" htmlFor={`${helpId}-x`}>\n                Horizontal position\n                <Slider\n                  min={0}\n                  max={100}\n                  step={1}\n                  id={`${helpId}-x`}\n                  value={Math.round(position.x * 100)}\n                  onValueChange={(value) => setPosition((p) => ({ ...p, x: value / 100 }))}\n                  disabled={blocked || photo.image.naturalWidth <= side}\n                  aria-valuetext={`${Math.round(position.x * 100)}%`}\n                />\n              </label>\n              <label className=\"grid gap-2\" htmlFor={`${helpId}-y`}>\n                Vertical position\n                <Slider\n                  min={0}\n                  max={100}\n                  step={1}\n                  id={`${helpId}-y`}\n                  value={Math.round(position.y * 100)}\n                  onValueChange={(value) => setPosition((p) => ({ ...p, y: value / 100 }))}\n                  disabled={blocked || photo.image.naturalHeight <= side}\n                  aria-valuetext={`${Math.round(position.y * 100)}%`}\n                />\n              </label>\n            </div>\n          </details>\n          <div className=\"flex flex-wrap justify-end gap-2\">\n            <Button\n              variant=\"outline\"\n              disabled={busy}\n              onClick={() => {\n                discard();\n                setError('');\n              }}\n            >\n              Cancel\n            </Button>\n            <Button disabled={blocked} onClick={() => void act()}>\n              {busy ? 'Saving photo…' : 'Save photo'}\n            </Button>\n          </div>\n        </div>\n      )}\n      {error && (\n        <p id={errorId} role=\"alert\" className=\"text-sm text-destructive\">\n          {error}\n        </p>\n      )}\n      <p\n        role=\"status\"\n        aria-live=\"polite\"\n        className={cn('text-sm text-muted-foreground', !reading && !busy && !message && 'sr-only')}\n      >\n        {reading ? 'Opening photo…' : busy ? 'Saving your profile photo…' : message}\n      </p>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/avatar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as AvatarPrimitive from '../primitives/vendor/radix/react-avatar';
-declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): React.JSX.Element;
-declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): React.JSX.Element;
-declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): React.JSX.Element;
+declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export { Avatar, AvatarFallback, AvatarImage };

package/dist/components/avatar.js

@@ -1,30 +1,33 @@
 "use client";
 import { cn } from "../lib/utils.js";
 import { Avatar as Avatar$1, AvatarFallback as AvatarFallback$1, AvatarImage as AvatarImage$1 } from "../primitives/vendor/radix/react-avatar/avatar.js";
-import "react";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/avatar.tsx
-function Avatar({ className, ...props }) {
+var Avatar = React.forwardRef(function Avatar({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Avatar$1, {
+		ref,
 		"data-slot": "avatar",
 		className: cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className),
 		...props
 	});
-}
-function AvatarImage({ className, ...props }) {
+});
+var AvatarImage = React.forwardRef(function AvatarImage({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(AvatarImage$1, {
+		ref,
 		"data-slot": "avatar-image",
 		className: cn("aspect-square size-full object-cover", className),
 		...props
 	});
-}
-function AvatarFallback({ className, ...props }) {
+});
+var AvatarFallback = React.forwardRef(function AvatarFallback({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(AvatarFallback$1, {
+		ref,
 		"data-slot": "avatar-fallback",
 		className: cn("flex size-full items-center justify-center rounded-full border border-brand/15 bg-brand-soft text-xs font-semibold text-brand-soft-foreground", className),
 		...props
 	});
-}
+});
 //#endregion
 export { Avatar, AvatarFallback, AvatarImage };
 

package/dist/components/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":["AvatarPrimitive.Root","AvatarPrimitive.Image","AvatarPrimitive.Fallback"],"sources":["../../src/components/avatar.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as AvatarPrimitive from '../primitives/vendor/radix/react-avatar';\n\nfunction Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn('aspect-square size-full object-cover', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex size-full items-center justify-center rounded-full border border-brand/15 bg-brand-soft text-xs font-semibold text-brand-soft-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Avatar, AvatarFallback, AvatarImage };\n"],"mappings":";;;;;;AAKA,SAAS,OAAO,EAAE,WAAW,GAAG,SAA4D;CAC1F,OACE,oBAACA,UAAD;EACE,aAAU;EACV,WAAW,GAAG,8DAA8D,SAAS;EACrF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACC,eAAD;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EACtB,WACA,GAAG,SACqD;CACxD,OACE,oBAACC,kBAAD;EACE,aAAU;EACV,WAAW,GACT,iJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"avatar.js","names":["AvatarPrimitive.Root","AvatarPrimitive.Image","AvatarPrimitive.Fallback"],"sources":["../../src/components/avatar.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as AvatarPrimitive from '../primitives/vendor/radix/react-avatar';\n\nconst Avatar = React.forwardRef<HTMLSpanElement, React.ComponentProps<typeof AvatarPrimitive.Root>>(\n  function Avatar({ className, ...props }, ref) {\n    return (\n      <AvatarPrimitive.Root\n        ref={ref}\n        data-slot=\"avatar\"\n        className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nconst AvatarImage = React.forwardRef<\n  HTMLImageElement,\n  React.ComponentProps<typeof AvatarPrimitive.Image>\n>(function AvatarImage({ className, ...props }, ref) {\n  return (\n    <AvatarPrimitive.Image\n      ref={ref}\n      data-slot=\"avatar-image\"\n      className={cn('aspect-square size-full object-cover', className)}\n      {...props}\n    />\n  );\n});\n\nconst AvatarFallback = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentProps<typeof AvatarPrimitive.Fallback>\n>(function AvatarFallback({ className, ...props }, ref) {\n  return (\n    <AvatarPrimitive.Fallback\n      ref={ref}\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex size-full items-center justify-center rounded-full border border-brand/15 bg-brand-soft text-xs font-semibold text-brand-soft-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport { Avatar, AvatarFallback, AvatarImage };\n"],"mappings":";;;;;;AAKA,IAAM,SAAS,MAAM,WACnB,SAAS,OAAO,EAAE,WAAW,GAAG,SAAS,KAAK;CAC5C,OACE,oBAACA,UAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,8DAA8D,SAAS;EACrF,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,cAAc,MAAM,WAGxB,SAAS,YAAY,EAAE,WAAW,GAAG,SAAS,KAAK;CACnD,OACE,oBAACC,eAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,iBAAiB,MAAM,WAG3B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACtD,OACE,oBAACC,kBAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,iJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}

package/dist/components/badge.d.ts

@@ -6,5 +6,5 @@ declare const badgeVariants: (props?: ({
 export interface BadgeProps extends React.ComponentProps<'span'>, VariantProps<typeof badgeVariants> {
     asChild?: boolean;
 }
-declare function Badge({ className, variant, asChild, ...props }: BadgeProps): React.JSX.Element;
+declare const Badge: React.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export { Badge, badgeVariants };

package/dist/components/badge.js

@@ -1,30 +1,32 @@
 "use client";
-import { cn } from "../lib/utils.js";
+import { cn, focusRingClasses } from "../lib/utils.js";
 import { Root as Slot } from "../primitives/vendor/radix/react-slot/slot.js";
-import "react";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/badge.tsx
-var badgeVariants = cva("inline-flex w-fit shrink-0 items-center gap-1.5 rounded-full border px-2 py-0.5 text-[11px] font-semibold leading-4 whitespace-nowrap outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/20 [&>svg]:size-3", {
+var badgeVariants = cva(`inline-flex w-fit shrink-0 items-center gap-1.5 rounded-full border px-2 py-0.5 text-[11px] font-semibold leading-4 whitespace-nowrap transition-colors ${focusRingClasses} [&>svg]:size-3`, {
 	variants: { variant: {
 		default: "border-border bg-surface-muted text-foreground",
 		secondary: "border-border bg-surface-muted text-foreground",
 		brand: "border-brand/20 bg-brand-soft text-brand-soft-foreground",
-		success: "border-success/20 bg-success/10 text-success",
-		warning: "border-warning/20 bg-warning/10 text-warning",
-		destructive: "border-destructive/20 bg-destructive/10 text-destructive",
-		info: "border-info/20 bg-info/10 text-info",
+		success: "border-success/20 bg-success/10 text-[color-mix(in_srgb,var(--success)_75%,var(--foreground))]",
+		warning: "border-warning/20 bg-warning/10 text-[color-mix(in_srgb,var(--warning)_75%,var(--foreground))]",
+		destructive: "border-destructive/20 bg-destructive/10 text-[color-mix(in_srgb,var(--destructive)_75%,var(--foreground))]",
+		info: "border-info/20 bg-info/10 text-[color-mix(in_srgb,var(--info)_75%,var(--foreground))]",
 		outline: "border-border-strong bg-transparent text-muted-foreground"
 	} },
 	defaultVariants: { variant: "default" }
 });
-function Badge({ className, variant, asChild = false, ...props }) {
+var Badge = React.forwardRef(function Badge({ className, variant, asChild = false, ...props }, ref) {
 	return /* @__PURE__ */ jsx(asChild ? Slot : "span", {
+		ref,
 		"data-slot": "badge",
-		className: cn(badgeVariants({ variant }), className),
+		"data-variant": variant ?? "default",
+		className: cn(badgeVariants({ variant }), asChild && "relative pointer-coarse:before:absolute pointer-coarse:before:inset-x-0 pointer-coarse:before:top-1/2 pointer-coarse:before:h-11 pointer-coarse:before:-translate-y-1/2 pointer-coarse:before:content-['']", className),
 		...props
 	});
-}
+});
 //#endregion
 export { Badge, badgeVariants };
 

package/dist/components/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":["Slot.Root"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as Slot from '../primitives/vendor/radix/react-slot';\n\nconst badgeVariants = cva(\n  'inline-flex w-fit shrink-0 items-center gap-1.5 rounded-full border px-2 py-0.5 text-[11px] font-semibold leading-4 whitespace-nowrap outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/20 [&>svg]:size-3',\n  {\n    variants: {\n      variant: {\n        default: 'border-border bg-surface-muted text-foreground',\n        // 0.x name for the neutral tag; kept so existing apps keep compiling.\n        secondary: 'border-border bg-surface-muted text-foreground',\n        brand: 'border-brand/20 bg-brand-soft text-brand-soft-foreground',\n        success: 'border-success/20 bg-success/10 text-success',\n        warning: 'border-warning/20 bg-warning/10 text-warning',\n        destructive: 'border-destructive/20 bg-destructive/10 text-destructive',\n        info: 'border-info/20 bg-info/10 text-info',\n        outline: 'border-border-strong bg-transparent text-muted-foreground',\n      },\n    },\n    defaultVariants: { variant: 'default' },\n  },\n);\n\nexport interface BadgeProps\n  extends React.ComponentProps<'span'>, VariantProps<typeof badgeVariants> {\n  asChild?: boolean;\n}\n\nfunction Badge({ className, variant, asChild = false, ...props }: BadgeProps) {\n  const Comp = asChild ? Slot.Root : 'span';\n  return (\n    <Comp data-slot=\"badge\" className={cn(badgeVariants({ variant }), className)} {...props} />\n  );\n}\n\nexport { Badge, badgeVariants };\n"],"mappings":";;;;;;;AAMA,IAAM,gBAAgB,IACpB,2OACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EAET,WAAW;EACX,OAAO;EACP,SAAS;EACT,SAAS;EACT,aAAa;EACb,MAAM;EACN,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CACF;AAOA,SAAS,MAAM,EAAE,WAAW,SAAS,UAAU,OAAO,GAAG,SAAqB;CAE5E,OACE,oBAFW,UAAUA,OAAY,QAEjC;EAAM,aAAU;EAAQ,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAE9F"}
+{"version":3,"file":"badge.js","names":["Slot.Root"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses, touchTargetRowClasses } from '../lib/utils';\nimport * as Slot from '../primitives/vendor/radix/react-slot';\n\nconst badgeVariants = cva(\n  `inline-flex w-fit shrink-0 items-center gap-1.5 rounded-full border px-2 py-0.5 text-[11px] font-semibold leading-4 whitespace-nowrap transition-colors ${focusRingClasses} [&>svg]:size-3`,\n  {\n    variants: {\n      variant: {\n        default: 'border-border bg-surface-muted text-foreground',\n        // 0.x name for the neutral tag; kept so existing apps keep compiling.\n        secondary: 'border-border bg-surface-muted text-foreground',\n        brand: 'border-brand/20 bg-brand-soft text-brand-soft-foreground',\n        // Status text is the tone mixed a quarter toward the foreground: the\n        // plain tone reads at 4.3–4.5:1 on its own tint, the mixed one at 6:1\n        // (4.5:1 inside a terminal Card). Mixing toward the foreground darkens\n        // it in light mode and lightens it in dark mode and in a terminal Card,\n        // which re-points --foreground.\n        success:\n          'border-success/20 bg-success/10 text-[color-mix(in_srgb,var(--success)_75%,var(--foreground))]',\n        warning:\n          'border-warning/20 bg-warning/10 text-[color-mix(in_srgb,var(--warning)_75%,var(--foreground))]',\n        destructive:\n          'border-destructive/20 bg-destructive/10 text-[color-mix(in_srgb,var(--destructive)_75%,var(--foreground))]',\n        info: 'border-info/20 bg-info/10 text-[color-mix(in_srgb,var(--info)_75%,var(--foreground))]',\n        outline: 'border-border-strong bg-transparent text-muted-foreground',\n      },\n    },\n    defaultVariants: { variant: 'default' },\n  },\n);\n\nexport interface BadgeProps\n  extends React.ComponentProps<'span'>, VariantProps<typeof badgeVariants> {\n  asChild?: boolean;\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { className, variant, asChild = false, ...props },\n  ref,\n) {\n  const Comp = asChild ? Slot.Root : 'span';\n  return (\n    <Comp\n      ref={ref}\n      data-slot=\"badge\"\n      data-variant={variant ?? 'default'}\n      // A badge that is a link or button (asChild) gets a 44px hit area on touch screens.\n      className={cn(badgeVariants({ variant }), asChild && touchTargetRowClasses, className)}\n      {...props}\n    />\n  );\n});\n\nexport { Badge, badgeVariants };\n"],"mappings":";;;;;;;AAMA,IAAM,gBAAgB,IACpB,2JAA2J,iBAAiB,kBAC5K;CACE,UAAU,EACR,SAAS;EACP,SAAS;EAET,WAAW;EACX,OAAO;EAMP,SACE;EACF,SACE;EACF,aACE;EACF,MAAM;EACN,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CACF;AAOA,IAAM,QAAQ,MAAM,WAAwC,SAAS,MACnE,EAAE,WAAW,SAAS,UAAU,OAAO,GAAG,SAC1C,KACA;CAEA,OACE,oBAFW,UAAUA,OAAY,QAEjC;EACO;EACL,aAAU;EACV,gBAAc,WAAW;EAEzB,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,WAAA,8MAAkC,SAAS;EACrF,GAAI;CACL,CAAA;AAEL,CAAC"}

package/dist/components/breadcrumb.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-declare function Breadcrumb(props: React.ComponentProps<'nav'>): React.JSX.Element;
-declare function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>): React.JSX.Element;
-declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
-declare function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<'a'> & {
+declare const Breadcrumb: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const BreadcrumbList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const BreadcrumbLink: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
     asChild?: boolean;
-}): React.JSX.Element;
-declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
-declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
-declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+}, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const BreadcrumbPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const BreadcrumbSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const BreadcrumbEllipsis: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, };