@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/file-upload/file-upload.js

@@ -0,0 +1,307 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { Button as n, IconButton as r } from "../button/button.js";
+import { Progress as i } from "../progress/progress.js";
+import { Glyph as a } from "../lib/glyphs.js";
+import { useFieldProps as o } from "../input/input.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useEffect as l, useId as u, useRef as d, useState as f } from "react";
+//#region src/file-upload/file-upload.tsx
+var p = {
+	title: "Drag files here or browse",
+	browse: "browse",
+	constraints: "{types} up to {size}",
+	remove: "Remove {name}",
+	tooBig: "Larger than {size}",
+	wrongType: "File type not allowed",
+	tooMany: "Only {max} files allowed",
+	uploading: "Uploading",
+	done: "Uploaded",
+	chooseFile: "Choose file",
+	uploadImage: "Upload image",
+	changeImage: "Change image",
+	removeImage: "Remove",
+	imagePreview: "Current image",
+	images: "Images"
+};
+function m(e) {
+	if (e < 1024) return `${e} B`;
+	let t = [
+		"KB",
+		"MB",
+		"GB"
+	], n = e / 1024, r = 0;
+	for (; n >= 1024 && r < t.length - 1;) n /= 1024, r++;
+	return `${n < 10 ? n.toFixed(1) : Math.round(n)} ${t[r]}`;
+}
+function h(e, t) {
+	if (!t) return !0;
+	let n = e.name.toLowerCase();
+	return t.split(",").some((t) => {
+		let r = t.trim().toLowerCase();
+		return r.startsWith(".") ? n.endsWith(r) : r.endsWith("/*") ? e.type.startsWith(r.slice(0, -1)) : e.type === r;
+	});
+}
+function g(e) {
+	let [t, n] = f();
+	return l(() => {
+		if (!e || !e.type.startsWith("image/")) return n(void 0);
+		let t = URL.createObjectURL(e);
+		return n(t), () => URL.revokeObjectURL(t);
+	}, [e]), t;
+}
+function _({ file: e }) {
+	let t = g(e);
+	return t ? /* @__PURE__ */ s("img", {
+		src: t,
+		alt: "",
+		className: "size-10 shrink-0 rounded-sm object-cover"
+	}) : /* @__PURE__ */ s("span", {
+		className: "grid size-10 shrink-0 place-items-center rounded-sm bg-surface-muted font-mono text-[10px] font-bold text-fg-muted uppercase",
+		children: e.name.split(".").pop()?.slice(0, 4)
+	});
+}
+function v({ items: r, onAdd: i, onRemove: a, onReject: l, accept: g, maxSize: _, maxFiles: v, multiple: b = !0, disabled: S, variant: C = "dropzone", src: w, onClear: T, imageShape: E = "square", fallbackText: D, labels: O, className: k, ...A }) {
+	let j = C !== "image" && b, M = {
+		...p,
+		...O
+	}, N = o({
+		...A,
+		disabled: S
+	}), P = d(null), F = u(), [I, L] = f(!1), R = (e) => {
+		if (!e || N.disabled) return;
+		let t = Array.from(e), n = [], o = [], s = C === "image" ? 1 : v === void 0 ? Infinity : v - r.length;
+		for (let e of t) h(e, g) ? _ !== void 0 && e.size > _ ? o.push({
+			file: e,
+			reason: M.tooBig.replace("{size}", m(_))
+		}) : s <= 0 ? o.push({
+			file: e,
+			reason: M.tooMany.replace("{max}", String(C === "image" ? 1 : v))
+		}) : (n.push(e), s--) : o.push({
+			file: e,
+			reason: M.wrongType
+		});
+		n.length && (C === "image" && r.forEach((e) => a(e.id)), i(j ? n : n.slice(0, 1))), o.length && l?.(o), P.current && (P.current.value = "");
+	}, z = (e) => {
+		e.preventDefault(), L(!1), R(e.dataTransfer.files);
+	}, B = g?.split(",").map((e) => {
+		let t = e.trim().toLowerCase();
+		return t === "image/*" ? M.images : t.endsWith("/*") ? t.slice(0, -2).toUpperCase() : (t.includes("/") ? t.split("/")[1].replace("+xml", "") : t.replace(/^\./, "")).toUpperCase();
+	}).join(", "), V = _ ? m(_) : void 0, H = B && V ? M.constraints.replace("{types}", B).replace("{size}", V) : B ?? V, U = [N["aria-describedby"], H ? F : void 0].filter(Boolean).join(" ") || void 0, W = /* @__PURE__ */ s("input", {
+		ref: P,
+		type: "file",
+		id: N.id,
+		accept: g,
+		multiple: j,
+		disabled: N.disabled,
+		"aria-invalid": N["aria-invalid"],
+		"aria-describedby": U,
+		onChange: (e) => R(e.target.files),
+		tabIndex: C === "dropzone" ? void 0 : -1,
+		className: "sr-only"
+	}), G = u(), K = (e) => N.id ? `${N.id}-label ${e}` : void 0, q = (e) => H || e ? /* @__PURE__ */ s("span", {
+		id: F,
+		className: "text-sm text-fg-muted",
+		children: [e, H].filter(Boolean).join(" · ")
+	}) : null, J = () => P.current?.click();
+	if (C === "image") return /* @__PURE__ */ s(x, {
+		item: r[0],
+		src: w,
+		shape: E,
+		input: W,
+		hint: q(D && !r[0] && !w ? D : void 0),
+		labels: M,
+		disabled: N.disabled,
+		invalid: N.invalid,
+		onBrowse: J,
+		onRemove: () => r[0] ? a(r[0].id) : T?.(),
+		btnId: G,
+		labelledBy: K(G),
+		describedBy: U,
+		className: k
+	});
+	let Y = r.length > 0 && /* @__PURE__ */ s(y, {
+		items: r,
+		labels: M,
+		onRemove: a
+	});
+	return C === "button" ? /* @__PURE__ */ c("div", {
+		className: e("grid gap-3 font-sans", k),
+		children: [/* @__PURE__ */ c("div", {
+			className: "flex flex-wrap items-center gap-x-3 gap-y-1",
+			children: [
+				/* @__PURE__ */ s(n, {
+					type: "button",
+					id: G,
+					variant: "secondary",
+					iconStart: "upload",
+					disabled: N.disabled,
+					onClick: J,
+					"aria-labelledby": K(G),
+					"aria-describedby": U,
+					children: M.chooseFile
+				}),
+				q(),
+				W
+			]
+		}), Y]
+	}) : /* @__PURE__ */ c("div", {
+		className: e("grid gap-3 font-sans", k),
+		children: [/* @__PURE__ */ c("label", {
+			onDragOver: (e) => {
+				e.preventDefault(), N.disabled || L(!0);
+			},
+			onDragLeave: () => L(!1),
+			onDrop: z,
+			className: e("grid cursor-pointer justify-items-center gap-2 rounded-lg border-2 border-dashed px-6 py-8 text-center transition-colors", I ? "border-primary bg-info-surface/60" : "border-border hover:border-fg-muted/60 hover:bg-surface-muted/50", N.invalid && "border-danger-border", N.disabled && "cursor-not-allowed opacity-60", "has-[:focus-visible]:outline-3 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-focus"),
+			children: [
+				/* @__PURE__ */ s(t, {
+					name: "upload",
+					size: 36,
+					className: "text-primary"
+				}),
+				/* @__PURE__ */ s("span", {
+					className: "text-[15px] font-semibold text-fg",
+					children: M.title
+				}),
+				q(),
+				W
+			]
+		}), Y]
+	});
+}
+function y({ items: e, labels: t, onRemove: n }) {
+	return /* @__PURE__ */ s("ul", {
+		className: "m-0 grid list-none gap-2 p-0",
+		children: e.map((e) => /* @__PURE__ */ c("li", {
+			className: "flex items-center gap-3 rounded-md border border-border bg-surface p-2.5 pr-1.5",
+			children: [
+				/* @__PURE__ */ s(_, { file: e.file }),
+				/* @__PURE__ */ c("div", {
+					className: "grid min-w-0 flex-1 gap-1",
+					children: [
+						/* @__PURE__ */ c("div", {
+							className: "flex items-baseline gap-2",
+							children: [/* @__PURE__ */ s("span", {
+								className: "min-w-0 flex-1 truncate text-sm font-medium",
+								children: e.file.name
+							}), /* @__PURE__ */ s("span", {
+								className: "shrink-0 text-xs text-fg-muted tabular-nums",
+								children: m(e.file.size)
+							})]
+						}),
+						e.status === "uploading" && /* @__PURE__ */ s(i, {
+							value: e.progress ?? null,
+							size: "sm",
+							"aria-label": `${t.uploading} ${e.file.name}`,
+							valueText: !1
+						}),
+						e.status === "error" && /* @__PURE__ */ s("span", {
+							className: "text-xs font-medium text-danger-fg",
+							children: e.error
+						}),
+						e.status === "done" && /* @__PURE__ */ c("span", {
+							className: "inline-flex items-center gap-1 text-xs font-medium text-success-fg",
+							children: [
+								/* @__PURE__ */ s(a, {
+									name: "check",
+									size: 12
+								}),
+								" ",
+								t.done
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ s("button", {
+					type: "button",
+					"aria-label": t.remove.replace("{name}", e.file.name),
+					onClick: () => n(e.id),
+					className: "grid size-9 shrink-0 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-fg-muted hover:bg-surface-muted hover:text-fg focus-visible:outline-3 focus-visible:outline-focus",
+					children: /* @__PURE__ */ s(a, {
+						name: "close",
+						size: 16
+					})
+				})
+			]
+		}, e.id))
+	});
+}
+var b = {
+	square: "size-24 rounded-md",
+	wide: "aspect-video w-48 rounded-md",
+	avatar: "size-24 rounded-full"
+};
+function x({ item: a, src: o, shape: l, input: u, hint: d, labels: f, disabled: p, invalid: m, onBrowse: h, onRemove: _, btnId: v, labelledBy: y, describedBy: x, className: S }) {
+	let C = g(a?.file) ?? (a ? void 0 : o), w = !!(a || o);
+	return /* @__PURE__ */ c("div", {
+		className: e("flex flex-wrap items-center gap-4 font-sans", S),
+		children: [/* @__PURE__ */ c("div", {
+			className: "relative shrink-0",
+			children: [/* @__PURE__ */ s("div", {
+				className: e("grid place-items-center overflow-hidden border bg-surface-muted text-fg-muted", m ? "border-danger-border" : "border-border", b[l]),
+				children: C ? /* @__PURE__ */ s("img", {
+					src: C,
+					alt: f.imagePreview,
+					className: "size-full object-cover"
+				}) : /* @__PURE__ */ s(t, {
+					name: l === "avatar" ? "user" : "upload",
+					size: 32
+				})
+			}), l === "avatar" && /* @__PURE__ */ s(r, {
+				icon: "edit",
+				label: w ? f.changeImage : f.uploadImage,
+				variant: "primary",
+				size: "sm",
+				disabled: p,
+				onClick: h,
+				"aria-describedby": x,
+				className: "absolute -right-1 -bottom-1 ring-3 ring-bg"
+			})]
+		}), /* @__PURE__ */ c("div", {
+			className: "grid min-w-0 flex-1 gap-2",
+			children: [
+				/* @__PURE__ */ c("div", {
+					className: "flex flex-wrap gap-2",
+					children: [l !== "avatar" && /* @__PURE__ */ s(n, {
+						type: "button",
+						id: v,
+						variant: "secondary",
+						size: "sm",
+						iconStart: "upload",
+						disabled: p,
+						onClick: h,
+						"aria-labelledby": y,
+						"aria-describedby": x,
+						children: w ? f.changeImage : f.uploadImage
+					}), w && /* @__PURE__ */ s(n, {
+						type: "button",
+						variant: "ghost",
+						size: "sm",
+						iconStart: "trash",
+						disabled: p,
+						onClick: _,
+						children: f.removeImage
+					})]
+				}),
+				a?.status === "uploading" && /* @__PURE__ */ s(i, {
+					value: a.progress ?? null,
+					size: "sm",
+					"aria-label": `${f.uploading} ${a.file.name}`,
+					valueText: !1
+				}),
+				a?.status === "error" && /* @__PURE__ */ s("span", {
+					className: "text-xs font-medium text-danger-fg",
+					children: a.error
+				}),
+				d,
+				u
+			]
+		})]
+	});
+}
+//#endregion
+export { v as FileUpload, m as formatBytes };
+
+//# sourceMappingURL=file-upload.js.map

package/dist/file-upload/file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.js","names":["LABELS","formatBytes","bytes","units","v","i","matchesAccept","accept","name","file","rule","useObjectUrl","url","setUrl","useState","useEffect","u","Preview","FileUpload","multipleProp","overrides","rest","multiple","variant","labels","field","useFieldProps","inputRef","useRef","hintId","useId","dragging","setDragging","add","list","files","ok","rejected","room","maxFiles","items","maxSize","onRemove","onAdd","onReject","onDrop","types","t","size","constraintText","describedBy","input","btnId","labelledBy","own","hint","extra","browse","ImageUpload","imageShape","fallbackText","src","onClear","FileList","cx","className","Button","Icon","item","Progress","Glyph","SHAPES","has","invalid","shape","IconButton","onBrowse"],"sources":["../../src/file-upload/file-upload.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useId, useRef, useState, type DragEvent } from 'react';\nimport { cx } from '../lib/cx';\nimport { Glyph } from '../lib/glyphs';\nimport { Icon } from '../icon/icon';\nimport { Button, IconButton } from '../button/button';\nimport { Progress } from '../progress/progress';\nimport { useFieldProps } from '../input/input';\n\nexport type UploadStatus = 'queued' | 'uploading' | 'done' | 'error';\n\nexport interface UploadItem {\n  id: string;\n  file: File;\n  status: UploadStatus;\n  /** 0–100 while uploading. */\n  progress?: number;\n  error?: string;\n}\n\nexport interface FileUploadProps {\n  /** Files already added (controlled). Upload them yourself and update `status`/`progress`. */\n  items: UploadItem[];\n  /** New valid files (already checked against `accept`, `maxSize`, `maxFiles`). */\n  onAdd: (files: File[]) => void;\n  onRemove: (id: string) => void;\n  /** Files rejected by validation, with the reason. */\n  onReject?: (rejections: { file: File; reason: string }[]) => void;\n  /** Same syntax as `<input accept>`: \".pdf,.csv,image/*\". */\n  accept?: string;\n  /** Bytes. */\n  maxSize?: number;\n  maxFiles?: number;\n  multiple?: boolean;\n  disabled?: boolean;\n  id?: string;\n  /**\n   * `dropzone` (default): drag-and-drop area plus a file list. `button`: one \"Choose file\" button and a hint\n   * (forms with little room). `image`: a single image with a preview, \"Change\" and \"Remove\" (logos, banners, photos).\n   */\n  variant?: FileUploadVariant;\n  /** `image` only: the image already saved, shown until a new file is added. */\n  src?: string;\n  /** `image` only: removes the saved `src` (the new file, if any, is removed with `onRemove`). */\n  onClear?: () => void;\n  /** `image` only: `square` (logo), `wide` (16:9 banner) or `avatar` (round, with an edit button on the photo). */\n  imageShape?: 'square' | 'wide' | 'avatar';\n  /** `image` only: what happens without an image (\"Without a logo, the project uses its client's logo\"). */\n  fallbackText?: string;\n  labels?: Partial<typeof LABELS>;\n  className?: string;\n}\n\nexport type FileUploadVariant = 'dropzone' | 'button' | 'image';\n\nconst LABELS = {\n  title: 'Drag files here or browse',\n  browse: 'browse',\n  /** `{types}` and `{size}` are replaced. */\n  constraints: '{types} up to {size}',\n  remove: 'Remove {name}',\n  tooBig: 'Larger than {size}',\n  wrongType: 'File type not allowed',\n  tooMany: 'Only {max} files allowed',\n  uploading: 'Uploading',\n  done: 'Uploaded',\n  chooseFile: 'Choose file',\n  uploadImage: 'Upload image',\n  changeImage: 'Change image',\n  removeImage: 'Remove',\n  imagePreview: 'Current image',\n  images: 'Images',\n};\n\nexport function formatBytes(bytes: number) {\n  if (bytes < 1024) return `${bytes} B`;\n  const units = ['KB', 'MB', 'GB'];\n  let v = bytes / 1024;\n  let i = 0;\n  while (v >= 1024 && i < units.length - 1) {\n    v /= 1024;\n    i++;\n  }\n  return `${v < 10 ? v.toFixed(1) : Math.round(v)} ${units[i]}`;\n}\n\nfunction matchesAccept(file: File, accept?: string) {\n  if (!accept) return true;\n  const name = file.name.toLowerCase();\n  return accept.split(',').some((rule) => {\n    const r = rule.trim().toLowerCase();\n    if (r.startsWith('.')) return name.endsWith(r);\n    if (r.endsWith('/*')) return file.type.startsWith(r.slice(0, -1));\n    return file.type === r;\n  });\n}\n\nfunction useObjectUrl(file?: File) {\n  const [url, setUrl] = useState<string>();\n  useEffect(() => {\n    if (!file || !file.type.startsWith('image/')) return setUrl(undefined);\n    const u = URL.createObjectURL(file);\n    setUrl(u);\n    return () => URL.revokeObjectURL(u);\n  }, [file]);\n  return url;\n}\n\nfunction Preview({ file }: { file: File }) {\n  const url = useObjectUrl(file);\n  return url ? (\n    <img src={url} alt=\"\" className=\"size-10 shrink-0 rounded-sm object-cover\" />\n  ) : (\n    <span className=\"grid size-10 shrink-0 place-items-center rounded-sm bg-surface-muted font-mono text-[10px] font-bold text-fg-muted uppercase\">\n      {file.name.split('.').pop()?.slice(0, 4)}\n    </span>\n  );\n}\n\n/**\n * Drag-and-drop (or tap to browse) file input with validation, image previews and per-file\n * progress. The component validates and lists; your app uploads and reports progress.\n */\nexport function FileUpload({\n  items,\n  onAdd,\n  onRemove,\n  onReject,\n  accept,\n  maxSize,\n  maxFiles,\n  multiple: multipleProp = true,\n  disabled,\n  variant = 'dropzone',\n  src,\n  onClear,\n  imageShape = 'square',\n  fallbackText,\n  labels: overrides,\n  className,\n  ...rest\n}: FileUploadProps) {\n  const multiple = variant === 'image' ? false : multipleProp;\n  const labels = { ...LABELS, ...overrides };\n  const field = useFieldProps({ ...rest, disabled });\n  const inputRef = useRef<HTMLInputElement>(null);\n  const hintId = useId();\n  const [dragging, setDragging] = useState(false);\n\n  const add = (list: FileList | null) => {\n    if (!list || field.disabled) return;\n    const files = Array.from(list);\n    const ok: File[] = [];\n    const rejected: { file: File; reason: string }[] = [];\n    // An image upload holds one file: a new one replaces the current one.\n    let room = variant === 'image' ? 1 : maxFiles !== undefined ? maxFiles - items.length : Infinity;\n    for (const file of files) {\n      if (!matchesAccept(file, accept)) rejected.push({ file, reason: labels.wrongType });\n      else if (maxSize !== undefined && file.size > maxSize)\n        rejected.push({ file, reason: labels.tooBig.replace('{size}', formatBytes(maxSize)) });\n      else if (room <= 0)\n        rejected.push({ file, reason: labels.tooMany.replace('{max}', String(variant === 'image' ? 1 : maxFiles)) });\n      else {\n        ok.push(file);\n        room--;\n      }\n    }\n    if (ok.length) {\n      if (variant === 'image') items.forEach((i) => onRemove(i.id));\n      onAdd(multiple ? ok : ok.slice(0, 1));\n    }\n    if (rejected.length) onReject?.(rejected);\n    if (inputRef.current) inputRef.current.value = '';\n  };\n\n  const onDrop = (e: DragEvent) => {\n    e.preventDefault();\n    setDragging(false);\n    add(e.dataTransfer.files);\n  };\n\n  // \".pdf\" → PDF, \"image/png\" → PNG, \"image/svg+xml\" → SVG, \"image/*\" → Images.\n  const types = accept\n    ?.split(',')\n    .map((t) => {\n      const v = t.trim().toLowerCase();\n      if (v === 'image/*') return labels.images;\n      if (v.endsWith('/*')) return v.slice(0, -2).toUpperCase();\n      return (v.includes('/') ? v.split('/')[1]!.replace('+xml', '') : v.replace(/^\\./, '')).toUpperCase();\n    })\n    .join(', ');\n  const size = maxSize ? formatBytes(maxSize) : undefined;\n  const constraintText =\n    types && size ? labels.constraints.replace('{types}', types).replace('{size}', size) : (types ?? size);\n\n  const describedBy =\n    [field['aria-describedby'], constraintText ? hintId : undefined].filter(Boolean).join(' ') || undefined;\n  const input = (\n    <input\n      ref={inputRef}\n      type=\"file\"\n      id={field.id}\n      accept={accept}\n      multiple={multiple}\n      disabled={field.disabled}\n      aria-invalid={field['aria-invalid']}\n      aria-describedby={describedBy}\n      onChange={(e) => add(e.target.files)}\n      // In `button` and `image` the visible buttons are the tab stops; the input stays for the label click and forms.\n      tabIndex={variant === 'dropzone' ? undefined : -1}\n      className=\"sr-only\"\n    />\n  );\n  const btnId = useId();\n  // The visible button's name: the field label (FormField renders `${id}-label`) plus the button's own text.\n  const labelledBy = (own: string) => (field.id ? `${field.id}-label ${own}` : undefined);\n  const hint = (extra?: string) =>\n    constraintText || extra ? (\n      <span id={hintId} className=\"text-sm text-fg-muted\">\n        {[extra, constraintText].filter(Boolean).join(' · ')}\n      </span>\n    ) : null;\n  const browse = () => inputRef.current?.click();\n\n  if (variant === 'image') {\n    return (\n      <ImageUpload\n        item={items[0]}\n        src={src}\n        shape={imageShape}\n        input={input}\n        hint={hint(fallbackText && !items[0] && !src ? fallbackText : undefined)}\n        labels={labels}\n        disabled={field.disabled}\n        invalid={field.invalid}\n        onBrowse={browse}\n        onRemove={() => (items[0] ? onRemove(items[0].id) : onClear?.())}\n        btnId={btnId}\n        labelledBy={labelledBy(btnId)}\n        describedBy={describedBy}\n        className={className}\n      />\n    );\n  }\n\n  const list = items.length > 0 && <FileList items={items} labels={labels} onRemove={onRemove} />;\n\n  if (variant === 'button') {\n    return (\n      <div className={cx('grid gap-3 font-sans', className)}>\n        <div className=\"flex flex-wrap items-center gap-x-3 gap-y-1\">\n          {/* The visible button opens the input; the input keeps the field's label, hint and error. */}\n          <Button\n            type=\"button\"\n            id={btnId}\n            variant=\"secondary\"\n            iconStart=\"upload\"\n            disabled={field.disabled}\n            onClick={browse}\n            aria-labelledby={labelledBy(btnId)}\n            aria-describedby={describedBy}\n          >\n            {labels.chooseFile}\n          </Button>\n          {hint()}\n          {input}\n        </div>\n        {list}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx('grid gap-3 font-sans', className)}>\n      <label\n        onDragOver={(e) => {\n          e.preventDefault();\n          if (!field.disabled) setDragging(true);\n        }}\n        onDragLeave={() => setDragging(false)}\n        onDrop={onDrop}\n        className={cx(\n          'grid cursor-pointer justify-items-center gap-2 rounded-lg border-2 border-dashed px-6 py-8 text-center transition-colors',\n          dragging\n            ? 'border-primary bg-info-surface/60'\n            : 'border-border hover:border-fg-muted/60 hover:bg-surface-muted/50',\n          field.invalid && 'border-danger-border',\n          field.disabled && 'cursor-not-allowed opacity-60',\n          'has-[:focus-visible]:outline-3 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-focus',\n        )}\n      >\n        <Icon name=\"upload\" size={36} className=\"text-primary\" />\n        <span className=\"text-[15px] font-semibold text-fg\">{labels.title}</span>\n        {hint()}\n        {input}\n      </label>\n      {list}\n    </div>\n  );\n}\n\ntype Labels = typeof LABELS;\n\nfunction FileList({ items, labels, onRemove }: { items: UploadItem[]; labels: Labels; onRemove: (id: string) => void }) {\n  return (\n        <ul className=\"m-0 grid list-none gap-2 p-0\">\n          {items.map((item) => (\n            <li\n              key={item.id}\n              className=\"flex items-center gap-3 rounded-md border border-border bg-surface p-2.5 pr-1.5\"\n            >\n              <Preview file={item.file} />\n              <div className=\"grid min-w-0 flex-1 gap-1\">\n                <div className=\"flex items-baseline gap-2\">\n                  <span className=\"min-w-0 flex-1 truncate text-sm font-medium\">{item.file.name}</span>\n                  <span className=\"shrink-0 text-xs text-fg-muted tabular-nums\">{formatBytes(item.file.size)}</span>\n                </div>\n                {item.status === 'uploading' && (\n                  <Progress\n                    value={item.progress ?? null}\n                    size=\"sm\"\n                    aria-label={`${labels.uploading} ${item.file.name}`}\n                    valueText={false}\n                  />\n                )}\n                {item.status === 'error' && <span className=\"text-xs font-medium text-danger-fg\">{item.error}</span>}\n                {item.status === 'done' && (\n                  <span className=\"inline-flex items-center gap-1 text-xs font-medium text-success-fg\">\n                    <Glyph name=\"check\" size={12} /> {labels.done}\n                  </span>\n                )}\n              </div>\n              <button\n                type=\"button\"\n                aria-label={labels.remove.replace('{name}', item.file.name)}\n                onClick={() => onRemove(item.id)}\n                className=\"grid size-9 shrink-0 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-fg-muted hover:bg-surface-muted hover:text-fg focus-visible:outline-3 focus-visible:outline-focus\"\n              >\n                <Glyph name=\"close\" size={16} />\n              </button>\n            </li>\n          ))}\n        </ul>\n  );\n}\n\nconst SHAPES = {\n  square: 'size-24 rounded-md',\n  wide: 'aspect-video w-48 rounded-md',\n  avatar: 'size-24 rounded-full',\n};\n\nfunction ImageUpload({\n  item,\n  src,\n  shape,\n  input,\n  hint,\n  labels,\n  disabled,\n  invalid,\n  onBrowse,\n  onRemove,\n  btnId,\n  labelledBy,\n  describedBy,\n  className,\n}: {\n  btnId: string;\n  labelledBy?: string;\n  describedBy?: string;\n  item?: UploadItem;\n  src?: string;\n  shape: 'square' | 'wide' | 'avatar';\n  input: React.ReactNode;\n  hint: React.ReactNode;\n  labels: Labels;\n  disabled?: boolean;\n  invalid?: boolean;\n  onBrowse: () => void;\n  onRemove: () => void;\n  className?: string;\n}) {\n  const fileUrl = useObjectUrl(item?.file);\n  const url = fileUrl ?? (item ? undefined : src);\n  const has = Boolean(item || src);\n  return (\n    <div className={cx('flex flex-wrap items-center gap-4 font-sans', className)}>\n      <div className=\"relative shrink-0\">\n        <div\n          className={cx(\n            'grid place-items-center overflow-hidden border bg-surface-muted text-fg-muted',\n            invalid ? 'border-danger-border' : 'border-border',\n            SHAPES[shape],\n          )}\n        >\n          {url ? (\n            <img src={url} alt={labels.imagePreview} className=\"size-full object-cover\" />\n          ) : (\n            <Icon name={shape === 'avatar' ? 'user' : 'upload'} size={32} />\n          )}\n        </div>\n        {shape === 'avatar' && (\n          <IconButton\n            icon=\"edit\"\n            label={has ? labels.changeImage : labels.uploadImage}\n            variant=\"primary\"\n            size=\"sm\"\n            disabled={disabled}\n            onClick={onBrowse}\n            aria-describedby={describedBy}\n            className=\"absolute -right-1 -bottom-1 ring-3 ring-bg\"\n          />\n        )}\n      </div>\n      <div className=\"grid min-w-0 flex-1 gap-2\">\n        <div className=\"flex flex-wrap gap-2\">\n          {shape !== 'avatar' && (\n            <Button\n              type=\"button\"\n              id={btnId}\n              variant=\"secondary\"\n              size=\"sm\"\n              iconStart=\"upload\"\n              disabled={disabled}\n              onClick={onBrowse}\n              aria-labelledby={labelledBy}\n              aria-describedby={describedBy}\n            >\n              {has ? labels.changeImage : labels.uploadImage}\n            </Button>\n          )}\n          {has && (\n            <Button type=\"button\" variant=\"ghost\" size=\"sm\" iconStart=\"trash\" disabled={disabled} onClick={onRemove}>\n              {labels.removeImage}\n            </Button>\n          )}\n        </div>\n        {item?.status === 'uploading' && (\n          <Progress value={item.progress ?? null} size=\"sm\" aria-label={`${labels.uploading} ${item.file.name}`} valueText={false} />\n        )}\n        {item?.status === 'error' && <span className=\"text-xs font-medium text-danger-fg\">{item.error}</span>}\n        {hint}\n        {input}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAwDA,IAAMA,IAAS;CACb,OAAO;CACP,QAAQ;CAER,aAAa;CACb,QAAQ;CACR,QAAQ;CACR,WAAW;CACX,SAAS;CACT,WAAW;CACX,MAAM;CACN,YAAY;CACZ,aAAa;CACb,aAAa;CACb,aAAa;CACb,cAAc;CACd,QAAQ;AACV;AAEA,SAAgBC,EAAY,GAAe;CACzC,IAAIC,IAAQ,MAAM,OAAO,GAAGA,EAAM;CAClC,IAAMC,IAAQ;EAAC;EAAM;EAAM;CAAI,GAC3BC,IAAIF,IAAQ,MACZG,IAAI;CACR,OAAOD,KAAK,QAAQC,IAAIF,EAAM,SAAS,IAErC,AADA,KAAK,MACL;CAEF,OAAO,GAAGC,IAAI,KAAKA,EAAE,QAAQ,CAAC,IAAI,KAAK,MAAMA,CAAC,EAAE,GAAGD,EAAME;AAC3D;AAEA,SAASC,EAAc,GAAY,GAAiB;CAClD,IAAI,CAACC,GAAQ,OAAO;CACpB,IAAMC,IAAOC,EAAK,KAAK,YAAY;CACnC,OAAOF,EAAO,MAAM,GAAG,CAAC,CAAC,MAAM,MAAS;EACtC,IAAM,IAAIG,EAAK,KAAK,CAAC,CAAC,YAAY;EAGlC,OAFI,EAAE,WAAW,GAAG,IAAUF,EAAK,SAAS,CAAC,IACzC,EAAE,SAAS,IAAI,IAAUC,EAAK,KAAK,WAAW,EAAE,MAAM,GAAG,EAAE,CAAC,IACzDA,EAAK,SAAS;CACvB,CAAC;AACH;AAEA,SAASE,EAAa,GAAa;CACjC,IAAM,CAACC,GAAKC,KAAUC,EAAiB;CAOvC,OANAC,QAAgB;EACd,IAAI,CAACN,KAAQ,CAACA,EAAK,KAAK,WAAW,QAAQ,GAAG,OAAOI,EAAO,KAAA,CAAS;EACrE,IAAMG,IAAI,IAAI,gBAAgBP,CAAI;EAElC,OADAI,EAAOG,CAAC,SACK,IAAI,gBAAgBA,CAAC;CACpC,GAAG,CAACP,CAAI,CAAC,GACFG;AACT;AAEA,SAASK,EAAQ,EAAE,WAAwB;CACzC,IAAML,IAAMD,EAAaF,CAAI;CAC7B,OAAOG,IACL,kBAAC,OAAD;EAAK,KAAKA;EAAK,KAAI;EAAG,WAAU;CAA4C,CAAA,IAE5E,kBAAC,QAAD;EAAM,WAAU;EACb,UAAAH,EAAK,KAAK,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,CAAC;CACnC,CAAA;AAEV;AAMA,SAAgBS,EAAW,EACzB,UACA,UACA,aACA,aACA,WACA,YACA,aACA,UAAUC,IAAe,IACzB,aACA,aAAU,YACV,QACA,YACA,gBAAa,UACb,iBACA,QAAQC,GACR,cACA,GAAGC,KACe;CAClB,IAAMC,IAAWC,MAAY,WAAkBJ,GACzCK,IAAS;EAAE,GAAGxB;EAAQ,GAAGoB;CAAU,GACnCK,IAAQC,EAAc;EAAE,GAAGL;EAAM;CAAS,CAAC,GAC3CM,IAAWC,EAAyB,IAAI,GACxCC,IAASC,EAAM,GACf,CAACC,GAAUC,KAAelB,EAAS,EAAK,GAExCmB,KAAO,MAA0B;EACrC,IAAI,CAACC,KAAQT,EAAM,UAAU;EAC7B,IAAMU,IAAQ,MAAM,KAAKD,CAAI,GACvBE,IAAa,CAAC,GACdC,IAA6C,CAAC,GAEhDC,IAAOf,MAAY,UAAU,IAAIgB,MAAa,KAAA,IAAsC,WAA1BA,IAAWC,EAAM;EAC/E,KAAK,IAAM/B,KAAQ0B,GACjB,AAAK7B,EAAcG,GAAMF,CAAM,IACtBkC,MAAY,KAAA,KAAahC,EAAK,OAAOgC,IAC5CJ,EAAS,KAAK;GAAE;GAAM,QAAQb,EAAO,OAAO,QAAQ,UAAUvB,EAAYwC,CAAO,CAAC;EAAE,CAAC,IAC9EH,KAAQ,IACfD,EAAS,KAAK;GAAE;GAAM,QAAQb,EAAO,QAAQ,QAAQ,SAAS,OAAOD,MAAY,UAAU,IAAIgB,CAAQ,CAAC;EAAE,CAAC,KAE3GH,EAAG,KAAK3B,CAAI,GACZ,OAPgC4B,EAAS,KAAK;GAAE;GAAM,QAAQb,EAAO;EAAU,CAAC;EAepF,AALIY,EAAG,WACDb,MAAY,WAASiB,EAAM,SAAS,MAAME,EAASrC,EAAE,EAAE,CAAC,GAC5DsC,EAAMrB,IAAWc,IAAKA,EAAG,MAAM,GAAG,CAAC,CAAC,IAElCC,EAAS,UAAQO,IAAWP,CAAQ,GACpCV,EAAS,YAAS,EAAS,QAAQ,QAAQ;CACjD,GAEMkB,KAAU,MAAiB;EAG/B,AAFA,EAAE,eAAe,GACjBb,EAAY,EAAK,GACjBC,EAAI,EAAE,aAAa,KAAK;CAC1B,GAGMa,IAAQvC,GACV,MAAM,GAAG,CAAC,CACX,KAAK,MAAM;EACV,IAAMH,IAAI2C,EAAE,KAAK,CAAC,CAAC,YAAY;EAG/B,OAFI3C,MAAM,YAAkBoB,EAAO,SAC/BpB,EAAE,SAAS,IAAI,IAAUA,EAAE,MAAM,GAAG,EAAE,CAAC,CAAC,YAAY,KAChDA,EAAE,SAAS,GAAG,IAAIA,EAAE,MAAM,GAAG,CAAC,CAAC,EAAE,CAAE,QAAQ,QAAQ,EAAE,IAAIA,EAAE,QAAQ,OAAO,EAAE,EAAA,CAAG,YAAY;CACrG,CAAC,CAAC,CACD,KAAK,IAAI,GACN4C,IAAOP,IAAUxC,EAAYwC,CAAO,IAAI,KAAA,GACxCQ,IACJH,KAASE,IAAOxB,EAAO,YAAY,QAAQ,WAAWsB,CAAK,CAAC,CAAC,QAAQ,UAAUE,CAAI,IAAKF,KAASE,GAE7FE,IACJ,CAACzB,EAAM,qBAAqBwB,IAAiBpB,IAAS,KAAA,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA,GAC1FsB,IACJ,kBAAC,SAAD;EACE,KAAKxB;EACL,MAAK;EACL,IAAIF,EAAM;EACF;EACE;EACV,UAAUA,EAAM;EAChB,gBAAcA,EAAM;EACpB,oBAAkByB;EAClB,WAAW,MAAMjB,EAAI,EAAE,OAAO,KAAK;EAEnC,UAAUV,MAAY,aAAa,KAAA,IAAY;EAC/C,WAAU;CACX,CAAA,GAEG6B,IAAQtB,EAAM,GAEduB,KAAc,MAAiB5B,EAAM,KAAK,GAAGA,EAAM,GAAG,SAAS6B,MAAQ,KAAA,GACvEC,KAAQ,MACZN,KAAkBO,IAChB,kBAAC,QAAD;EAAM,IAAI3B;EAAQ,WAAU;EACzB,UAAA,CAAC2B,GAAOP,CAAc,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,KAAK;CAC/C,CAAA,IACJ,MACAQ,UAAe9B,EAAS,SAAS,MAAM;CAE7C,IAAIJ,MAAY,SACd,OACE,kBAACmC,GAAD;EACE,MAAMlB,EAAM;EACP;EACL,OAAOmB;EACA;EACP,MAAMJ,EAAKK,KAAgB,CAACpB,EAAM,MAAM,CAACqB,IAAMD,IAAe,KAAA,CAAS;EAC/D;EACR,UAAUnC,EAAM;EAChB,SAASA,EAAM;EACf,UAAUgC;EACV,gBAAiBjB,EAAM,KAAKE,EAASF,EAAM,EAAE,CAAC,EAAE,IAAIsB,IAAU;EACvD;EACP,YAAYT,EAAWD,CAAK;EACf;EACF;CACZ,CAAA;CAIL,IAAMlB,IAAOM,EAAM,SAAS,KAAK,kBAACuB,GAAD;EAAiB;EAAe;EAAkB;CAAW,CAAA;CA2B9F,OAzBIxC,MAAY,WAEZ,kBAAC,OAAD;EAAK,WAAWyC,EAAG,wBAAwBC,CAAS;EAApD,UAAA,CACE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IAEE,kBAACC,GAAD;KACE,MAAK;KACL,IAAId;KACJ,SAAQ;KACR,WAAU;KACV,UAAU3B,EAAM;KAChB,SAASgC;KACT,mBAAiBJ,EAAWD,CAAK;KACjC,oBAAkBF;KAEjB,UAAA1B,EAAO;IACF,CAAA;IACP+B,EAAK;IACLJ;GACE;EACJ,CAAA,GAAAjB,CACE;C,KAKP,kBAAC,OAAD;EAAK,WAAW8B,EAAG,wBAAwBC,CAAS;EAApD,UAAA,CACE,kBAAC,SAAD;GACE,aAAa,MAAM;IAEjB,AADA,EAAE,eAAe,GACZxC,EAAM,YAAUO,EAAY,EAAI;GACvC;GACA,mBAAmBA,EAAY,EAAK;GAC5B;GACR,WAAWgC,EACT,4HACAjC,IACI,sCACA,oEACJN,EAAM,WAAW,wBACjBA,EAAM,YAAY,iCAClB,yGACF;GAfF,UAAA;IAiBE,kBAAC0C,GAAD;KAAM,MAAK;KAAS,MAAM;KAAI,WAAU;IAAgB,CAAA;IACxD,kBAAC,QAAD;KAAM,WAAU;KAAqC,UAAA3C,EAAO;IAAY,CAAA;IACvE+B,EAAK;IACLJ;GACI;EACN,CAAA,GAAAjB,CACE;;AAET;AAIA,SAAS6B,EAAS,EAAE,UAAO,WAAQ,eAAqF;CACtH,OACM,kBAAC,MAAD;EAAI,WAAU;EACX,UAAAvB,EAAM,KAAK,MACV,kBAAC,MAAD;GAEE,WAAU;GAFZ,UAAA;IAIE,kBAACvB,GAAD,EAAS,MAAMmD,EAAK,KAAO,CAAA;IAC3B,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MACE,kBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACE,kBAAC,QAAD;QAAM,WAAU;QAA+C,UAAAA,EAAK,KAAK;OAAW,CAAA,GACpF,kBAAC,QAAD;QAAM,WAAU;QAA+C,UAAAnE,EAAYmE,EAAK,KAAK,IAAI;OAAQ,CAAA,CAC9F;;MACJA,EAAK,WAAW,eACf,kBAACC,GAAD;OACE,OAAOD,EAAK,YAAY;OACxB,MAAK;OACL,cAAY,GAAG5C,EAAO,UAAU,GAAG4C,EAAK,KAAK;OAC7C,WAAW;MACZ,CAAA;MAEFA,EAAK,WAAW,WAAW,kBAAC,QAAD;OAAM,WAAU;OAAsC,UAAAA,EAAK;MAAY,CAAA;MAClGA,EAAK,WAAW,UACf,kBAAC,QAAD;OAAM,WAAU;OAAhB,UAAA;QACE,kBAACE,GAAD;SAAO,MAAK;SAAQ,MAAM;QAAK,CAAA;QAAC;QAAE9C,EAAO;OACrC;;KAEL;;IACL,kBAAC,UAAD;KACE,MAAK;KACL,cAAYA,EAAO,OAAO,QAAQ,UAAU4C,EAAK,KAAK,IAAI;KAC1D,eAAe1B,EAAS0B,EAAK,EAAE;KAC/B,WAAU;KAEV,UAAA,kBAACE,GAAD;MAAO,MAAK;MAAQ,MAAM;KAAK,CAAA;IACzB,CAAA;GACN;EAhCG,GAAAF,EAAK,EAgCR,CACL;CACC,CAAA;AAEZ;AAEA,IAAMG,IAAS;CACb,QAAQ;CACR,MAAM;CACN,QAAQ;AACV;AAEA,SAASb,EAAY,EACnB,SACA,QACA,UACA,UACA,SACA,WACA,aACA,YACA,aACA,aACA,UACA,eACA,gBACA,gBAgBC;CAED,IAAM9C,IADUD,EAAayD,GAAM,IACvB,MAAYA,IAAO,KAAA,IAAYP,IACrCW,IAAM,GAAQJ,KAAQP;CAC5B,OACE,kBAAC,OAAD;EAAK,WAAWG,EAAG,+CAA+CC,CAAS;EAA3E,UAAA,CACE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,OAAD;IACE,WAAWD,EACT,iFACAS,IAAU,yBAAyB,iBACnCF,EAAOG,EACT;IAEC,UAAA9D,IACC,kBAAC,OAAD;KAAK,KAAKA;KAAK,KAAKY,EAAO;KAAc,WAAU;IAA0B,CAAA,IAE7E,kBAAC2C,GAAD;KAAM,MAAMO,MAAU,WAAW,SAAS;KAAU,MAAM;IAAK,CAAA;GAE9D,CAAA,GACJA,MAAU,YACT,kBAACC,GAAD;IACE,MAAK;IACL,OAAOH,IAAMhD,EAAO,cAAcA,EAAO;IACzC,SAAQ;IACR,MAAK;IACK;IACV,SAASoD;IACT,oBAAkB1B;IAClB,WAAU;GACX,CAAA,CAEA;EACL,CAAA,GAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACGwB,MAAU,YACT,kBAACR,GAAD;MACE,MAAK;MACL,IAAId;MACJ,SAAQ;MACR,MAAK;MACL,WAAU;MACA;MACV,SAASwB;MACT,mBAAiBvB;MACjB,oBAAkBH;MAEjB,UAAAsB,IAAMhD,EAAO,cAAcA,EAAO;KAC7B,CAAA,GAETgD,KACC,kBAACN,GAAD;MAAQ,MAAK;MAAS,SAAQ;MAAQ,MAAK;MAAK,WAAU;MAAkB;MAAU,SAASxB;MAC5F,UAAAlB,EAAO;KACF,CAAA,CAEP;;IACJ4C,GAAM,WAAW,eAChB,kBAACC,GAAD;KAAU,OAAOD,EAAK,YAAY;KAAM,MAAK;KAAK,cAAY,GAAG5C,EAAO,UAAU,GAAG4C,EAAK,KAAK;KAAQ,WAAW;IAAQ,CAAA;IAE3HA,GAAM,WAAW,WAAW,kBAAC,QAAD;KAAM,WAAU;KAAsC,UAAAA,EAAK;IAAY,CAAA;IACnGb;IACAJ;GACE;EACF,CAAA,CAAA;;AAET"}

package/dist/filters/filters.d.ts

@@ -0,0 +1,48 @@
+import { type ReactNode } from 'react';
+export interface FilterOption {
+    value: string;
+    label: string;
+    /** Number of matching records, shown on the right. */
+    count?: number;
+    /** A color dot before the label (status or category), any CSS color. */
+    color?: string;
+}
+export interface FilterMenuProps {
+    /** The facet's name, shown on the button ("Status"). */
+    label: string;
+    options: FilterOption[];
+    /** Selected values (controlled). Empty means "all". */
+    value: string[];
+    onValueChange: (value: string[]) => void;
+    labels?: {
+        clear?: string;
+    };
+    className?: string;
+}
+/**
+ * A multi-select facet for table toolbars: an outline button ("Status ▾") that opens a checklist and shows how
+ * many values are active ("Status · 2"). The menu stays open while ticking options.
+ */
+export declare function FilterMenu({ label, options, value, onValueChange, labels, className }: FilterMenuProps): import("react").JSX.Element;
+export interface FilterBarProps {
+    /** Period presets on top, usually a `SegmentedControl`. */
+    period?: ReactNode;
+    /** Labelled fields (`FormField` with a `DateRangePicker`, `Select`, `FilterMenu`…), laid out in a grid. */
+    children: ReactNode;
+    /** Shows "Reset" when set. */
+    onReset?: () => void;
+    /** Number of active filters: on phones the fields fold behind a "Filters (n)" button. */
+    activeCount?: number;
+    /** Grid columns from 1024px (default 4). */
+    columns?: 2 | 3 | 4;
+    labels?: {
+        reset?: string;
+        filters?: string;
+    };
+    className?: string;
+}
+/**
+ * One card for a report's filters: period presets, labelled fields in a grid and "Reset". Below 640px the fields
+ * fold behind a "Filters" button so the results stay in view.
+ */
+export declare function FilterBar({ period, children, onReset, activeCount, columns, labels, className, }: FilterBarProps): import("react").JSX.Element;

package/dist/filters/filters.js

@@ -0,0 +1,103 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Button as t } from "../button/button.js";
+import { Glyph as n } from "../lib/glyphs.js";
+import { DropdownMenu as r, DropdownMenuCheckboxItem as i, DropdownMenuContent as a, DropdownMenuItem as o, DropdownMenuSeparator as s, DropdownMenuTrigger as c } from "../menu/dropdown-menu.js";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useId as f, useState as p } from "react";
+//#region src/filters/filters.tsx
+function m({ label: t, options: f, value: p, onValueChange: m, labels: h = {}, className: g }) {
+	let _ = p.length, v = (e, t) => m(t ? [...p, e] : p.filter((t) => t !== e));
+	return /* @__PURE__ */ d(r, { children: [/* @__PURE__ */ u(c, {
+		asChild: !0,
+		children: /* @__PURE__ */ d("button", {
+			type: "button",
+			className: e("inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-full border px-3.5 font-sans text-sm font-semibold transition-colors pointer-coarse:h-11", "focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus", _ ? "border-primary bg-info-surface text-info-fg" : "border-border bg-surface text-fg hover:border-fg-muted/50", g),
+			children: [
+				t,
+				_ > 0 && /* @__PURE__ */ u("span", {
+					className: "grid h-5 min-w-5 place-items-center rounded-full bg-primary px-1.5 text-xs text-on-primary tabular-nums",
+					children: _
+				}),
+				/* @__PURE__ */ u(n, {
+					name: "chevron-down",
+					size: 14
+				})
+			]
+		})
+	}), /* @__PURE__ */ d(a, {
+		className: "w-64",
+		children: [f.map((e) => /* @__PURE__ */ u(i, {
+			checked: p.includes(e.value),
+			onCheckedChange: (t) => v(e.value, t === !0),
+			onSelect: (e) => e.preventDefault(),
+			children: /* @__PURE__ */ d("span", {
+				className: "flex min-w-0 flex-1 items-center gap-2",
+				children: [
+					e.color && /* @__PURE__ */ u("span", {
+						"aria-hidden": "true",
+						className: "size-2.5 shrink-0 rounded-full",
+						style: { background: e.color }
+					}),
+					/* @__PURE__ */ u("span", {
+						className: "truncate",
+						children: e.label
+					}),
+					e.count !== void 0 && /* @__PURE__ */ u("span", {
+						className: "ml-auto pl-3 text-xs text-fg-muted tabular-nums",
+						children: e.count
+					})
+				]
+			})
+		}, e.value)), _ > 0 && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(s, {}), /* @__PURE__ */ u(o, {
+			onSelect: () => m([]),
+			children: h.clear ?? "Clear filter"
+		})] })]
+	})] });
+}
+var h = {
+	2: "lg:grid-cols-2",
+	3: "lg:grid-cols-3",
+	4: "lg:grid-cols-4"
+};
+function g({ period: n, children: r, onReset: i, activeCount: a = 0, columns: o = 4, labels: s = {}, className: c }) {
+	let [l, m] = p(!1), g = f(), _ = s.filters ?? "Filters";
+	return /* @__PURE__ */ d("section", {
+		"aria-label": _,
+		className: e("grid grid-cols-[minmax(0,1fr)] gap-4 rounded-lg border border-border bg-surface p-card font-sans", c),
+		children: [/* @__PURE__ */ d("div", {
+			className: "flex flex-wrap items-center justify-between gap-3",
+			children: [n ?? /* @__PURE__ */ u("span", {}), /* @__PURE__ */ d("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ u("span", {
+					className: "sm:hidden",
+					children: /* @__PURE__ */ u(t, {
+						type: "button",
+						size: "sm",
+						variant: "secondary",
+						iconStart: "filter",
+						"aria-expanded": l,
+						"aria-controls": g,
+						onClick: () => m((e) => !e),
+						children: a > 0 ? `${_} (${a})` : _
+					})
+				}), i && /* @__PURE__ */ u(t, {
+					type: "button",
+					size: "sm",
+					variant: "ghost",
+					iconStart: "sync",
+					onClick: i,
+					children: s.reset ?? "Reset"
+				})]
+			})]
+		}), /* @__PURE__ */ u("div", {
+			id: g,
+			className: e("grid-cols-[minmax(0,1fr)] gap-4 sm:grid sm:grid-cols-2", h[o], l ? "grid" : "hidden"),
+			children: r
+		})]
+	});
+}
+//#endregion
+export { g as FilterBar, m as FilterMenu };
+
+//# sourceMappingURL=filters.js.map

package/dist/filters/filters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filters.js","names":["_Fragment","FilterMenu","active","value","toggle","onValueChange","on","v","x","DropdownMenu","DropdownMenuTrigger","cx","className","label","Glyph","DropdownMenuContent","options","DropdownMenuCheckboxItem","o","Fragment","DropdownMenuSeparator","DropdownMenuItem","labels","COLS","FilterBar","open","setOpen","useState","fieldsId","useId","filtersLabel","period","Button","activeCount","onReset","columns"],"sources":["../../src/filters/filters.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState, type ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Glyph } from '../lib/glyphs';\nimport { Button } from '../button/button';\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../menu/dropdown-menu';\n\nexport interface FilterOption {\n  value: string;\n  label: string;\n  /** Number of matching records, shown on the right. */\n  count?: number;\n  /** A color dot before the label (status or category), any CSS color. */\n  color?: string;\n}\n\nexport interface FilterMenuProps {\n  /** The facet's name, shown on the button (\"Status\"). */\n  label: string;\n  options: FilterOption[];\n  /** Selected values (controlled). Empty means \"all\". */\n  value: string[];\n  onValueChange: (value: string[]) => void;\n  labels?: { clear?: string };\n  className?: string;\n}\n\n/**\n * A multi-select facet for table toolbars: an outline button (\"Status ▾\") that opens a checklist and shows how\n * many values are active (\"Status · 2\"). The menu stays open while ticking options.\n */\nexport function FilterMenu({ label, options, value, onValueChange, labels = {}, className }: FilterMenuProps) {\n  const active = value.length;\n  const toggle = (v: string, on: boolean) => onValueChange(on ? [...value, v] : value.filter((x) => x !== v));\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <button\n          type=\"button\"\n          className={cx(\n            'inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-full border px-3.5 font-sans text-sm font-semibold transition-colors pointer-coarse:h-11',\n            'focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus',\n            active\n              ? 'border-primary bg-info-surface text-info-fg'\n              : 'border-border bg-surface text-fg hover:border-fg-muted/50',\n            className,\n          )}\n        >\n          {label}\n          {active > 0 && (\n            <span className=\"grid h-5 min-w-5 place-items-center rounded-full bg-primary px-1.5 text-xs text-on-primary tabular-nums\">\n              {active}\n            </span>\n          )}\n          <Glyph name=\"chevron-down\" size={14} />\n        </button>\n      </DropdownMenuTrigger>\n      {/* A fixed width (not a min-width, which would conflict with the menu's own min-width). */}\n      <DropdownMenuContent className=\"w-64\">\n        {options.map((o) => (\n          <DropdownMenuCheckboxItem\n            key={o.value}\n            checked={value.includes(o.value)}\n            onCheckedChange={(on) => toggle(o.value, on === true)}\n            // Keep the menu open to tick several options.\n            onSelect={(e) => e.preventDefault()}\n          >\n            <span className=\"flex min-w-0 flex-1 items-center gap-2\">\n              {o.color && (\n                <span aria-hidden=\"true\" className=\"size-2.5 shrink-0 rounded-full\" style={{ background: o.color }} />\n              )}\n              <span className=\"truncate\">{o.label}</span>\n              {o.count !== undefined && (\n                <span className=\"ml-auto pl-3 text-xs text-fg-muted tabular-nums\">{o.count}</span>\n              )}\n            </span>\n          </DropdownMenuCheckboxItem>\n        ))}\n        {active > 0 && (\n          <>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem onSelect={() => onValueChange([])}>{labels.clear ?? 'Clear filter'}</DropdownMenuItem>\n          </>\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\nexport interface FilterBarProps {\n  /** Period presets on top, usually a `SegmentedControl`. */\n  period?: ReactNode;\n  /** Labelled fields (`FormField` with a `DateRangePicker`, `Select`, `FilterMenu`…), laid out in a grid. */\n  children: ReactNode;\n  /** Shows \"Reset\" when set. */\n  onReset?: () => void;\n  /** Number of active filters: on phones the fields fold behind a \"Filters (n)\" button. */\n  activeCount?: number;\n  /** Grid columns from 1024px (default 4). */\n  columns?: 2 | 3 | 4;\n  labels?: { reset?: string; filters?: string };\n  className?: string;\n}\n\nconst COLS = { 2: 'lg:grid-cols-2', 3: 'lg:grid-cols-3', 4: 'lg:grid-cols-4' };\n\n/**\n * One card for a report's filters: period presets, labelled fields in a grid and \"Reset\". Below 640px the fields\n * fold behind a \"Filters\" button so the results stay in view.\n */\nexport function FilterBar({\n  period,\n  children,\n  onReset,\n  activeCount = 0,\n  columns = 4,\n  labels = {},\n  className,\n}: FilterBarProps) {\n  const [open, setOpen] = useState(false);\n  const fieldsId = useId();\n  const filtersLabel = labels.filters ?? 'Filters';\n  return (\n    <section\n      aria-label={filtersLabel}\n      // minmax(0, 1fr): the card never grows past its container, wide children scroll or wrap inside it.\n      className={cx(\n        'grid grid-cols-[minmax(0,1fr)] gap-4 rounded-lg border border-border bg-surface p-card font-sans',\n        className,\n      )}\n    >\n      <div className=\"flex flex-wrap items-center justify-between gap-3\">\n        {period ?? <span />}\n        <div className=\"flex items-center gap-2\">\n          {/* A wrapper hides it from 640px: Button sets its own display. */}\n          <span className=\"sm:hidden\">\n            <Button\n              type=\"button\"\n              size=\"sm\"\n              variant=\"secondary\"\n              iconStart=\"filter\"\n              aria-expanded={open}\n              aria-controls={fieldsId}\n              onClick={() => setOpen((o) => !o)}\n            >\n              {activeCount > 0 ? `${filtersLabel} (${activeCount})` : filtersLabel}\n            </Button>\n          </span>\n          {onReset && (\n            <Button type=\"button\" size=\"sm\" variant=\"ghost\" iconStart=\"sync\" onClick={onReset}>\n              {labels.reset ?? 'Reset'}\n            </Button>\n          )}\n        </div>\n      </div>\n      <div\n        id={fieldsId}\n        className={cx(\n          'grid-cols-[minmax(0,1fr)] gap-4 sm:grid sm:grid-cols-2',\n          COLS[columns],\n          open ? 'grid' : 'hidden',\n        )}\n      >\n        {children}\n      </div>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;AAuCA,SAAgBC,EAAW,EAAE,UAAO,YAAS,UAAO,kBAAe,YAAS,CAAC,GAAG,gBAA8B;CAC5G,IAAMC,IAASC,EAAM,QACfC,KAAU,GAAW,MAAgBC,EAAcC,IAAK,CAAC,GAAGH,GAAOI,CAAC,IAAIJ,EAAM,QAAQ,MAAMK,MAAMD,CAAC,CAAC;CAC1G,OACE,kBAACE,GAAD,EAAA,UAAA,CACE,kBAACC,GAAD;EAAqB,SAAA;EACnB,UAAA,kBAAC,UAAD;GACE,MAAK;GACL,WAAWC,EACT,wJACA,sFACAT,IACI,gDACA,6DACJU,CACF;GATF,UAAA;IAWGC;IACAX,IAAS,KACR,kBAAC,QAAD;KAAM,WAAU;KACb,UAAAA;IACG,CAAA;IAER,kBAACY,GAAD;KAAO,MAAK;KAAe,MAAM;IAAK,CAAA;GAChC;;CACW,CAAA,GAErB,kBAACC,GAAD;EAAqB,WAAU;EAA/B,UAAA,CACGC,EAAQ,KAAK,MACZ,kBAACC,GAAD;GAEE,SAASd,EAAM,SAASe,EAAE,KAAK;GAC/B,kBAAkB,MAAOd,EAAOc,EAAE,OAAOZ,MAAO,EAAI;GAEpD,WAAW,MAAM,EAAE,eAAe;GAElC,UAAA,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA;KACGY,EAAE,SACD,kBAAC,QAAD;MAAM,eAAY;MAAO,WAAU;MAAiC,OAAO,EAAE,YAAYA,EAAE,MAAM;KAAI,CAAA;KAEvG,kBAAC,QAAD;MAAM,WAAU;MAAY,UAAAA,EAAE;KAAY,CAAA;KACzCA,EAAE,UAAU,KAAA,KACX,kBAAC,QAAD;MAAM,WAAU;MAAmD,UAAAA,EAAE;KAAY,CAAA;IAE/E;;EACkB,GAfnBA,EAAE,KAeiB,CAC3B,GACAhB,IAAS,KACR,kBAAAF,GAAA,EAAA,UAAA,CACE,kBAACoB,GAAD,CAAwB,CAAA,GACxB,kBAACC,GAAD;GAAkB,gBAAgBhB,EAAc,CAAC,CAAC;GAAI,UAAAiB,EAAO,SAAS;EAAiC,CAAA,CACvG,EAAA,CAAA,CAEe;CACT,CAAA,CAAA,EAAA,CAAA;AAElB;AAiBA,IAAMC,IAAO;CAAE,GAAG;CAAkB,GAAG;CAAkB,GAAG;AAAiB;AAM7E,SAAgBC,EAAU,EACxB,WACA,aACA,YACA,iBAAc,GACd,aAAU,GACV,YAAS,CAAC,GACV,gBACiB;CACjB,IAAM,CAACC,GAAMC,KAAWC,EAAS,EAAK,GAChCC,IAAWC,EAAM,GACjBC,IAAeR,EAAO,WAAW;CACvC,OACE,kBAAC,WAAD;EACE,cAAYQ;EAEZ,WAAWnB,EACT,oGACAC,CACF;EANF,UAAA,CAQE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACGmB,KAAU,kBAAC,QAAD,CAAO,CAAA,GAClB,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CAEE,kBAAC,QAAD;KAAM,WAAU;KACd,UAAA,kBAACC,GAAD;MACE,MAAK;MACL,MAAK;MACL,SAAQ;MACR,WAAU;MACV,iBAAeP;MACf,iBAAeG;MACf,eAAeF,GAAS,MAAM,CAACR,CAAC;MAE/B,UAAAe,IAAc,IAAI,GAAGH,EAAa,IAAIG,EAAY,KAAKH;KAClD,CAAA;IACJ,CAAA,GACLI,KACC,kBAACF,GAAD;KAAQ,MAAK;KAAS,MAAK;KAAK,SAAQ;KAAQ,WAAU;KAAO,SAASE;KACvE,UAAAZ,EAAO,SAAS;IACX,CAAA,CAEP;GACF,CAAA,CAAA;EACL,CAAA,GAAA,kBAAC,OAAD;GACE,IAAIM;GACJ,WAAWjB,EACT,0DACAY,EAAKY,IACLV,IAAO,SAAS,QAClB;GAEC;EACE,CAAA,CACE;;AAEb"}

package/dist/form-field/form-field.d.ts

@@ -0,0 +1,39 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface FormFieldState {
+    id: string;
+    /** ids for `aria-describedby` (hint and error). */
+    describedBy?: string;
+    invalid: boolean;
+    required: boolean;
+    disabled: boolean;
+}
+/** Read the surrounding FormField (inputs use it to wire id, aria-describedby, aria-invalid). */
+export declare const useFormField: () => FormFieldState | null;
+export interface FormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    label: ReactNode;
+    /** Help text under the label. */
+    hint?: ReactNode;
+    /** Error message; marks the control `aria-invalid`. Say how to fix it ("Enter a work email"). */
+    error?: ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+    /** Shows "(optional)" after the label instead of marking required fields. */
+    optionalLabel?: string;
+    /** Visually hide the label (it stays for screen readers). */
+    hideLabel?: boolean;
+    /** Extra content on the label row (e.g. "Forgot password?" link). */
+    labelAction?: ReactNode;
+    /** Override the generated id. */
+    id?: string;
+    children: ReactNode;
+}
+/**
+ * Wraps a single control with its label, help and error. Every Kodffe input reads the field
+ * context, so ids and ARIA are wired automatically.
+ */
+export declare function FormField({ label, hint, error, required, disabled, optionalLabel, hideLabel, labelAction, id: idProp, className, children, ...rest }: FormFieldProps): import("react").JSX.Element;
+/** Groups related fields (address, billing) with a legend. */
+export declare function Fieldset({ legend, description, className, children, ...rest }: HTMLAttributes<HTMLFieldSetElement> & {
+    legend: ReactNode;
+    description?: ReactNode;
+}): import("react").JSX.Element;