@mitcsutt/kiln-ui 0.1.0

package/dist/components/inputs/FileDrop/FileDrop.js

@@ -0,0 +1,189 @@
+import { cx as e } from "../../../utils/cx.js";
+import { CloseIcon as t, UploadIcon as n } from "../../../icons/icons.js";
+import { useMergedRefs as r } from "../internal/refs.js";
+import { markFieldAware as i, useResolvedField as a } from "../internal/FieldContext.js";
+import ee from "../internal/messages.module.js";
+import { useControllableState as o } from "../Combobox/useControllableState.js";
+import { extensionOf as s, formatFileSize as c, isFile as l, isImage as u, matchesAccept as d } from "./fileUtils.js";
+import f from "./FileDrop.module.js";
+import { forwardRef as p, useEffect as m, useMemo as h, useRef as g, useState as _ } from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/components/inputs/FileDrop/FileDrop.tsx
+function b(e, t) {
+	let n = h(() => t ? e.filter((e) => l(e) && u(e)) : [], [e, t]), r = g(/* @__PURE__ */ new Map()), [i, a] = _(() => /* @__PURE__ */ new Map());
+	return m(() => {
+		let e = r.current;
+		if (typeof URL > "u" || typeof URL.createObjectURL != "function") return;
+		let t = new Set(n), i = !1;
+		for (let [n, r] of e) t.has(n) || (URL.revokeObjectURL(r), e.delete(n), i = !0);
+		for (let t of n) e.has(t) || (e.set(t, URL.createObjectURL(t)), i = !0);
+		i && a(new Map(e));
+	}, [n]), m(() => {
+		let e = r.current;
+		return () => {
+			for (let t of e.values()) URL.revokeObjectURL(t);
+			e.clear();
+		};
+	}, []), i;
+}
+var x = (e) => `Remove ${e}`, S = i(p(function({ value: i, defaultValue: p, onValueChange: h, accept: S, multiple: C = !1, maxFiles: te, maxSize: w, onReject: T, preview: E = "list", dropLabel: ne = "Drop files here or", browseLabel: D = "choose files", removeLabel: re = x, name: ie, disabled: O, readOnly: k, required: A, invalid: j, onBlur: M, id: N, className: P, "aria-describedby": F, "aria-invalid": I, "aria-label": L, "aria-labelledby": R, ...z }, B) {
+	let V = a({
+		id: N,
+		describedBy: F,
+		invalid: j,
+		ariaInvalid: I,
+		required: A,
+		disabled: O,
+		readOnly: k
+	}), H = !V.disabled && !V.readOnly, U = g(null), W = g(null), G = r(B, U), [K, q] = o(i, p ?? [], (e) => h?.([...e])), [J, Y] = _(!1), X = g(0), ae = b(K, E === "thumbnails"), Z = (e) => {
+		let t = U.current;
+		if (!t) return;
+		let n = e.filter(l);
+		try {
+			if (typeof DataTransfer > "u") throw Error("no DataTransfer");
+			let e = new DataTransfer();
+			for (let t of n) e.items.add(t);
+			t.files = e.files;
+		} catch {
+			n.length === 0 && (t.value = "");
+		}
+	};
+	m(() => {
+		Z(K);
+	}, [K]);
+	let Q = (e) => {
+		if (!H || e.length === 0) return K;
+		let t = C ? te ?? Infinity : 1, n = C ? K : [], r = [], i = [];
+		for (let a of e) d(a, S) ? w !== void 0 && a.size > w ? i.push({
+			file: a,
+			reason: "size"
+		}) : n.length + r.length >= t ? i.push({
+			file: a,
+			reason: "count"
+		}) : r.push(a) : i.push({
+			file: a,
+			reason: "type"
+		});
+		let a = r.length > 0 ? [...n, ...r] : K;
+		return r.length > 0 && q(a), i.length > 0 && T?.(i), a;
+	}, oe = (e) => {
+		H && (q(K.filter((t, n) => n !== e)), U.current?.focus());
+	}, $ = (e) => {
+		let t = Q(Array.from(e.target.files ?? []));
+		Z(t);
+	}, se = (e) => {
+		H || e.preventDefault();
+	}, ce = (e) => {
+		e.target !== U.current && H && U.current?.click();
+	}, le = (e) => {
+		e.preventDefault(), H && (X.current += 1, Y(!0));
+	}, ue = (e) => {
+		e.preventDefault(), e.dataTransfer.dropEffect = H ? "copy" : "none";
+	}, de = () => {
+		X.current = Math.max(0, X.current - 1), X.current === 0 && Y(!1);
+	}, fe = (e) => {
+		e.preventDefault(), X.current = 0, Y(!1), Q(Array.from(e.dataTransfer.files));
+	}, pe = (e) => {
+		let t = e.relatedTarget;
+		t && W.current?.contains(t) || M?.(e);
+	}, me = L ?? (R ?? V.labelId ? void 0 : D);
+	return /* @__PURE__ */ y("div", {
+		ref: W,
+		className: e(f.root, P),
+		"data-disabled": V.disabled || void 0,
+		"data-readonly": V.readOnly || void 0,
+		onBlur: pe,
+		...z,
+		children: [/* @__PURE__ */ y("div", {
+			className: f.zone,
+			"data-dragging": J || void 0,
+			"data-invalid": V.invalid || void 0,
+			"data-disabled": V.disabled || void 0,
+			"data-readonly": V.readOnly || void 0,
+			onClick: ce,
+			onDragEnter: le,
+			onDragOver: ue,
+			onDragLeave: de,
+			onDrop: fe,
+			children: [
+				/* @__PURE__ */ v(n, { className: f.icon }),
+				/* @__PURE__ */ y("span", {
+					className: f.prompt,
+					"aria-hidden": "true",
+					children: [
+						ne,
+						" ",
+						/* @__PURE__ */ v("span", {
+							className: f.browse,
+							children: D
+						})
+					]
+				}),
+				/* @__PURE__ */ v("input", {
+					ref: G,
+					id: V.id,
+					type: "file",
+					className: e(ee.visuallyHidden, f.input),
+					name: ie,
+					accept: S,
+					multiple: C,
+					disabled: V.disabled,
+					"aria-label": me,
+					"aria-labelledby": R,
+					"aria-describedby": V.describedBy,
+					"aria-invalid": V.invalid || void 0,
+					"aria-required": V.required || void 0,
+					"aria-busy": V.busy || void 0,
+					onChange: $,
+					onClick: se
+				})
+			]
+		}), K.length > 0 ? /* @__PURE__ */ v("ul", {
+			className: f.list,
+			"data-preview": E,
+			children: K.map((e, n) => {
+				let r = E === "thumbnails" && u(e) ? l(e) ? ae.get(e) : e.url : void 0, i = s(e.name);
+				return /* @__PURE__ */ y("li", {
+					className: f.item,
+					children: [
+						E === "thumbnails" ? /* @__PURE__ */ v("span", {
+							className: f.thumb,
+							"aria-hidden": "true",
+							children: r ? /* @__PURE__ */ v("img", {
+								src: r,
+								alt: "",
+								className: f.image
+							}) : /* @__PURE__ */ v("span", {
+								className: f.ext,
+								children: i || "FILE"
+							})
+						}) : null,
+						/* @__PURE__ */ y("span", {
+							className: f.meta,
+							children: [/* @__PURE__ */ v("span", {
+								className: f.name,
+								children: e.name
+							}), e.size === void 0 ? null : /* @__PURE__ */ v("span", {
+								className: f.size,
+								children: c(e.size)
+							})]
+						}),
+						H ? /* @__PURE__ */ v("button", {
+							type: "button",
+							className: f.remove,
+							"aria-label": re(e.name),
+							onClick: () => {
+								oe(n);
+							},
+							children: /* @__PURE__ */ v(t, {})
+						}) : null
+					]
+				}, l(e) ? `${String(n)}:${e.name}:${String(e.size)}` : `stored:${e.id}`);
+			})
+		}) : null]
+	});
+}));
+//#endregion
+export { S as FileDrop };
+
+//# sourceMappingURL=FileDrop.js.map

package/dist/components/inputs/FileDrop/FileDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDrop.js","names":["styles","messageStyles","messages_module_default","FileDrop_module_default","useObjectUrls","images","useMemo","enabled","files","isFile","file","isImage","cacheRef","useRef","urls","setUrls","useState","useEffect","cache","wanted","changed","url","defaultRemoveLabel","name","FileDrop","markFieldAware","forwardRef","valueProp","disabledProp","readOnlyProp","requiredProp","invalidProp","idProp","describedByProp","ariaInvalid","ariaLabel","ariaLabelledBy","rest","field","useResolvedField","interactive","inputRef","rootRef","composedRef","useMergedRefs","ref","setFiles","useControllableState","defaultValue","onValueChange","next","dragging","setDragging","dragDepth","preview","syncInput","input","accepted","values","transfer","addFiles","incoming","limit","multiple","maxFiles","base","rejections","matchesAccept","accept","maxSize","onReject","removeAt","i","index","handleChange","event","handleInputClick","handleZoneClick","handleDragEnter","handleDragOver","handleDragLeave","handleDrop","handleBlur","onBlur","fallbackLabel","browseLabel","cx","className","UploadIcon","dropLabel","thumb","ext","extensionOf","formatFileSize","removeLabel","CloseIcon"],"sources":["../../../../src/components/inputs/FileDrop/FileDrop.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type DragEvent,\n  type FocusEvent,\n  type FocusEventHandler,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\nimport { CloseIcon, UploadIcon } from '#icons'\nimport { cx } from '#utils/cx'\nimport { useControllableState } from '#components/inputs/Combobox/useControllableState'\nimport { markFieldAware, useResolvedField } from '#components/inputs/internal/FieldContext'\nimport { useMergedRefs } from '#components/inputs/internal/refs'\nimport messageStyles from '#components/inputs/internal/messages.module.css'\nimport { extensionOf, formatFileSize, isFile, isImage, matchesAccept } from './fileUtils'\nimport styles from './FileDrop.module.css'\n\n/** A file that already lives somewhere (uploaded earlier): shown and removable, never re-sent. */\nexport interface StoredFile {\n  id: string\n  name: string\n  /** Bytes. */\n  size?: number\n  /** MIME type, e.g. `image/jpeg`. */\n  type?: string\n  /** Where to preview it (thumbnails). */\n  url?: string\n}\n\nexport type FileValue = File | StoredFile\n\nexport type FileRejectReason = 'type' | 'size' | 'count'\n\nexport interface FileRejection {\n  file: File\n  reason: FileRejectReason\n}\n\nexport interface FileDropProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue' | 'onBlur'\n> {\n  value?: readonly FileValue[]\n  defaultValue?: readonly FileValue[]\n  onValueChange?: (files: FileValue[]) => void\n  /** Native `accept`: extensions (`.pdf`), MIME types (`image/png`) or wildcards (`image/*`). Also checked on drop. */\n  accept?: string\n  /** Several files (added to the list). Without it a new file replaces the current one. */\n  multiple?: boolean\n  /** With `multiple`: the most files the list may hold. */\n  maxFiles?: number\n  /** Largest file accepted, in bytes. */\n  maxSize?: number\n  /** Files that weren't added, and why. One call per pick or drop. */\n  onReject?: (rejections: readonly FileRejection[]) => void\n  /** `list` (default): name and size rows. `thumbnails`: a grid with image previews. */\n  preview?: 'list' | 'thumbnails'\n  /** Default \"Drop files here or\". */\n  dropLabel?: ReactNode\n  /** Default \"choose files\". Also the input's name when nothing else labels it. */\n  browseLabel?: string\n  /** Accessible name of a file's remove button. Default `Remove <name>`. */\n  removeLabel?: (name: string) => string\n  name?: string\n  disabled?: boolean\n  readOnly?: boolean\n  required?: boolean\n  /** Critical border + `aria-invalid`. Inside a `<Field error>` this is set for you. */\n  invalid?: boolean\n  /** Fires once focus leaves the whole control (the input and the remove buttons). */\n  onBlur?: FocusEventHandler<HTMLElement>\n}\n\n/**\n * Object URLs for the image Files in `files`, created as files arrive and revoked as\n * they leave and on unmount.\n */\nfunction useObjectUrls(files: readonly FileValue[], enabled: boolean): ReadonlyMap<File, string> {\n  const images = useMemo(\n    () => (enabled ? files.filter((file): file is File => isFile(file) && isImage(file)) : []),\n    [files, enabled],\n  )\n  const cacheRef = useRef(new Map<File, string>())\n  const [urls, setUrls] = useState<ReadonlyMap<File, string>>(() => new Map())\n\n  useEffect(() => {\n    const cache = cacheRef.current\n    if (typeof URL === 'undefined' || typeof URL.createObjectURL !== 'function') return\n    const wanted = new Set(images)\n    let changed = false\n    for (const [file, url] of cache) {\n      if (!wanted.has(file)) {\n        URL.revokeObjectURL(url)\n        cache.delete(file)\n        changed = true\n      }\n    }\n    for (const file of images) {\n      if (!cache.has(file)) {\n        cache.set(file, URL.createObjectURL(file))\n        changed = true\n      }\n    }\n    if (changed) setUrls(new Map(cache))\n  }, [images])\n\n  useEffect(() => {\n    const cache = cacheRef.current\n    return () => {\n      for (const url of cache.values()) URL.revokeObjectURL(url)\n      cache.clear()\n    }\n  }, [])\n\n  return urls\n}\n\nconst defaultRemoveLabel = (name: string) => `Remove ${name}`\n\n/* ─── FileDrop ────────────────────────────────────────────────────────────── */\n\n/**\n * Pick or drop files. The real control is the native `<input type=\"file\">` (visually\n * hidden, labelled by the surrounding Field, focus ring on the zone); drag-and-drop is an\n * enhancement. Files are held in state, not uploaded: `value` is `File`s plus any\n * `StoredFile`s from an earlier upload. The input's `FileList` is kept in sync where the\n * browser allows it, so a native form submit sends the current files.\n * The ref goes to the file input; `className`/`style` and other props go to the wrapper.\n *\n * <FileDrop accept=\"image/*,.pdf\" multiple maxFiles={5} maxSize={5_000_000} preview=\"thumbnails\" />\n */\nexport const FileDrop = markFieldAware(\n  forwardRef<HTMLInputElement, FileDropProps>(function FileDrop(\n    {\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      accept,\n      multiple = false,\n      maxFiles,\n      maxSize,\n      onReject,\n      preview = 'list',\n      dropLabel = 'Drop files here or',\n      browseLabel = 'choose files',\n      removeLabel = defaultRemoveLabel,\n      name,\n      disabled: disabledProp,\n      readOnly: readOnlyProp,\n      required: requiredProp,\n      invalid: invalidProp,\n      onBlur,\n      id: idProp,\n      className,\n      'aria-describedby': describedByProp,\n      'aria-invalid': ariaInvalid,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const field = useResolvedField({\n      id: idProp,\n      describedBy: describedByProp,\n      invalid: invalidProp,\n      ariaInvalid,\n      required: requiredProp,\n      disabled: disabledProp,\n      readOnly: readOnlyProp,\n    })\n    const interactive = !field.disabled && !field.readOnly\n    const inputRef = useRef<HTMLInputElement>(null)\n    const rootRef = useRef<HTMLDivElement>(null)\n    const composedRef = useMergedRefs(ref, inputRef)\n\n    const [files, setFiles] = useControllableState<readonly FileValue[]>(\n      valueProp,\n      defaultValue ?? [],\n      (next) => onValueChange?.([...next]),\n    )\n    const [dragging, setDragging] = useState(false)\n    const dragDepth = useRef(0)\n    const urls = useObjectUrls(files, preview === 'thumbnails')\n\n    /**\n     * Make the native input's FileList equal to the File values, so FormData sends them.\n     * DataTransfer is the only way to build a FileList; where it's missing (or `files`\n     * can't be assigned) the input is emptied when it holds no accepted file, so a rejected\n     * pick is never submitted and picking the same file again still fires `change`.\n     */\n    const syncInput = (values: readonly FileValue[]) => {\n      const input = inputRef.current\n      if (!input) return\n      const accepted = values.filter(isFile)\n      try {\n        if (typeof DataTransfer === 'undefined') throw new Error('no DataTransfer')\n        const transfer = new DataTransfer()\n        for (const file of accepted) transfer.items.add(file)\n        input.files = transfer.files\n      } catch {\n        if (accepted.length === 0) input.value = ''\n      }\n    }\n\n    useEffect(() => {\n      syncInput(files)\n    }, [files])\n\n    /** Validates and adds; returns the value the control now holds. */\n    const addFiles = (incoming: readonly File[]): readonly FileValue[] => {\n      if (!interactive || incoming.length === 0) return files\n      const limit = multiple ? (maxFiles ?? Number.POSITIVE_INFINITY) : 1\n      const base = multiple ? files : []\n      const accepted: File[] = []\n      const rejections: FileRejection[] = []\n      for (const file of incoming) {\n        if (!matchesAccept(file, accept)) rejections.push({ file, reason: 'type' })\n        else if (maxSize !== undefined && file.size > maxSize)\n          rejections.push({ file, reason: 'size' })\n        else if (base.length + accepted.length >= limit) rejections.push({ file, reason: 'count' })\n        else accepted.push(file)\n      }\n      const next = accepted.length > 0 ? [...base, ...accepted] : files\n      if (accepted.length > 0) setFiles(next)\n      if (rejections.length > 0) onReject?.(rejections)\n      return next\n    }\n\n    const removeAt = (index: number) => {\n      if (!interactive) return\n      setFiles(files.filter((_, i) => i !== index))\n      inputRef.current?.focus()\n    }\n\n    /* ─── Events ─── */\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      const next = addFiles(Array.from(event.target.files ?? []))\n      // Resync even when the value didn't change (every file rejected): the input still\n      // holds the rejected pick, which would be submitted and would block a re-pick.\n      syncInput(next)\n    }\n\n    // Read-only: focusable, but the picker never opens.\n    const handleInputClick = (event: MouseEvent<HTMLInputElement>) => {\n      if (!interactive) event.preventDefault()\n    }\n\n    // The whole zone opens the picker; the input itself handles its own clicks.\n    const handleZoneClick = (event: MouseEvent<HTMLDivElement>) => {\n      if (event.target === inputRef.current || !interactive) return\n      inputRef.current?.click()\n    }\n\n    const handleDragEnter = (event: DragEvent<HTMLDivElement>) => {\n      event.preventDefault()\n      if (!interactive) return\n      dragDepth.current += 1\n      setDragging(true)\n    }\n    const handleDragOver = (event: DragEvent<HTMLDivElement>) => {\n      event.preventDefault()\n      event.dataTransfer.dropEffect = interactive ? 'copy' : 'none'\n    }\n    const handleDragLeave = () => {\n      dragDepth.current = Math.max(0, dragDepth.current - 1)\n      if (dragDepth.current === 0) setDragging(false)\n    }\n    const handleDrop = (event: DragEvent<HTMLDivElement>) => {\n      event.preventDefault()\n      dragDepth.current = 0\n      setDragging(false)\n      addFiles(Array.from(event.dataTransfer.files))\n    }\n\n    const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n      const next = event.relatedTarget as Node | null\n      if (next && rootRef.current?.contains(next)) return\n      onBlur?.(event)\n    }\n\n    /* ─── Render ─── */\n    // Outside a Field and with no aria label, the browse text names the input.\n    const fallbackLabel = ariaLabel ?? ((ariaLabelledBy ?? field.labelId) ? undefined : browseLabel)\n\n    return (\n      <div\n        ref={rootRef}\n        className={cx(styles.root, className)}\n        data-disabled={field.disabled || undefined}\n        data-readonly={field.readOnly || undefined}\n        onBlur={handleBlur}\n        {...rest}\n      >\n        {/* The file input inside the zone is the keyboard path; a click anywhere on the zone\n            is a bigger pointer target for the same input. */}\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n        <div\n          className={styles.zone}\n          data-dragging={dragging || undefined}\n          data-invalid={field.invalid || undefined}\n          data-disabled={field.disabled || undefined}\n          data-readonly={field.readOnly || undefined}\n          onClick={handleZoneClick}\n          onDragEnter={handleDragEnter}\n          onDragOver={handleDragOver}\n          onDragLeave={handleDragLeave}\n          onDrop={handleDrop}\n        >\n          <UploadIcon className={styles.icon} />\n          <span className={styles.prompt} aria-hidden=\"true\">\n            {dropLabel} <span className={styles.browse}>{browseLabel}</span>\n          </span>\n          <input\n            ref={composedRef}\n            id={field.id}\n            type=\"file\"\n            className={cx(messageStyles.visuallyHidden, styles.input)}\n            name={name}\n            accept={accept}\n            multiple={multiple}\n            disabled={field.disabled}\n            aria-label={fallbackLabel}\n            aria-labelledby={ariaLabelledBy}\n            aria-describedby={field.describedBy}\n            aria-invalid={field.invalid || undefined}\n            aria-required={field.required || undefined}\n            aria-busy={field.busy || undefined}\n            onChange={handleChange}\n            onClick={handleInputClick}\n          />\n        </div>\n        {files.length > 0 ? (\n          <ul className={styles.list} data-preview={preview}>\n            {files.map((file, index) => {\n              const thumb =\n                preview === 'thumbnails' && isImage(file)\n                  ? isFile(file)\n                    ? urls.get(file)\n                    : file.url\n                  : undefined\n              const ext = extensionOf(file.name)\n              return (\n                <li\n                  key={\n                    isFile(file)\n                      ? `${String(index)}:${file.name}:${String(file.size)}`\n                      : `stored:${file.id}`\n                  }\n                  className={styles.item}\n                >\n                  {preview === 'thumbnails' ? (\n                    <span className={styles.thumb} aria-hidden=\"true\">\n                      {thumb ? (\n                        <img src={thumb} alt=\"\" className={styles.image} />\n                      ) : (\n                        <span className={styles.ext}>{ext || 'FILE'}</span>\n                      )}\n                    </span>\n                  ) : null}\n                  <span className={styles.meta}>\n                    <span className={styles.name}>{file.name}</span>\n                    {file.size !== undefined ? (\n                      <span className={styles.size}>{formatFileSize(file.size)}</span>\n                    ) : null}\n                  </span>\n                  {interactive ? (\n                    <button\n                      type=\"button\"\n                      className={styles.remove}\n                      aria-label={removeLabel(file.name)}\n                      onClick={() => {\n                        removeAt(index)\n                      }}\n                    >\n                      <CloseIcon />\n                    </button>\n                  ) : null}\n                </li>\n              )\n            })}\n          </ul>\n        ) : null}\n      </div>\n    )\n  }),\n)\n"],"mappings":"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"}

package/dist/components/inputs/FileDrop/FileDrop.module.js

@@ -0,0 +1,21 @@
+//#region src/components/inputs/FileDrop/FileDrop.module.css
+var e = "kiln-FileDrop__root", t = "kiln-FileDrop__zone", n = "kiln-FileDrop__input", r = "kiln-FileDrop__icon", i = "kiln-FileDrop__browse", a = "kiln-FileDrop__list", o = "kiln-FileDrop__item", s = "kiln-FileDrop__thumb", c = "kiln-FileDrop__image", l = "kiln-FileDrop__ext", u = "kiln-FileDrop__meta", d = "kiln-FileDrop__name", f = "kiln-FileDrop__size", p = "kiln-FileDrop__remove", m = {
+	root: e,
+	zone: t,
+	input: n,
+	icon: r,
+	browse: i,
+	list: a,
+	item: o,
+	thumb: s,
+	image: c,
+	ext: l,
+	meta: u,
+	name: d,
+	size: f,
+	remove: p
+};
+//#endregion
+export { i as browse, m as default, l as ext, r as icon, c as image, n as input, o as item, a as list, u as meta, d as name, p as remove, e as root, f as size, s as thumb, t as zone };
+
+//# sourceMappingURL=FileDrop.module.js.map

package/dist/components/inputs/FileDrop/FileDrop.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDrop.module.js","names":["root","zone","input","icon","browse","list","item","thumb","image","ext","meta","name","size","remove","FileDrop_module_default"],"sources":["../../../../src/components/inputs/FileDrop/FileDrop.module.css"],"sourcesContent":["/*\n * A dashed drop zone above the chosen files. The real control is the visually hidden\n * file input inside the zone; the zone draws its focus ring.\n *\n * Component tokens (themes may set any of these on [data-theme]):\n *   --file-drop-radius      default var(--field-radius, var(--radius-field))\n *   --file-drop-bg          default var(--field-bg, var(--color-surface))\n *   --file-drop-border      default var(--field-border, var(--color-line-control))\n *   --file-drop-active-bg   default var(--color-surface-sunken) — while dragging over\n */\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  inline-size: 100%;\n  font-family: var(--font-text);\n}\n\n/* ── Zone ── */\n.zone {\n  --_border: var(--file-drop-border, var(--field-border, var(--color-line-control)));\n\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  box-sizing: border-box;\n  min-block-size: calc(var(--control-lg) * 2);\n  padding: var(--space-4);\n  border: var(--border-width) dashed var(--_border);\n  border-radius: var(--file-drop-radius, var(--field-radius, var(--radius-field)));\n  background-color: var(--file-drop-bg, var(--field-bg, var(--color-surface)));\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n  line-height: var(--leading-snug);\n  text-align: center;\n  cursor: pointer;\n  transition:\n    border-color var(--dur-1) var(--ease-out),\n    background-color var(--dur-1) var(--ease-out);\n}\n\n@media (hover: hover) {\n  .zone:hover:not([data-disabled], [data-readonly], [data-invalid]) {\n    --_border: color-mix(\n      in oklab,\n      var(--file-drop-border, var(--field-border, var(--color-line-control))),\n      var(--color-ink) 35%\n    );\n  }\n}\n\n/* Focus is on the hidden input; the zone shows the neutral ring. */\n.zone:has(.input:focus-visible) {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.zone[data-dragging] {\n  --_border: var(--color-ink);\n  border-style: solid;\n  background-color: var(--file-drop-active-bg, var(--color-surface-sunken));\n  color: var(--color-ink);\n}\n\n.zone[data-invalid] {\n  --_border: var(--tone-critical);\n}\n\n.zone[data-readonly] {\n  background-color: var(--color-surface-sunken);\n  cursor: default;\n}\n\n.zone[data-disabled] {\n  --_border: var(--color-line);\n  background-color: var(--color-surface-sunken);\n  color: var(--color-ink-subtle);\n  cursor: not-allowed;\n}\n\n.icon {\n  flex: none;\n  inline-size: 1.25em;\n  block-size: 1.25em;\n}\n\n.browse {\n  color: var(--color-ink);\n  font-weight: var(--label-weight);\n  text-decoration: underline;\n  text-decoration-thickness: var(--border-width);\n  text-underline-offset: 0.2em;\n}\n.zone[data-disabled] .browse {\n  color: inherit;\n}\n\n.input {\n  /* visually hidden comes from messages.module.css; this keeps it out of hit-testing. */\n  pointer-events: none;\n}\n\n/* ── Files ── */\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.list[data-preview='thumbnails'] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));\n  gap: var(--space-2);\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-block-size: var(--control-md);\n  padding-inline: var(--space-3) var(--space-1);\n  border: var(--border-width) solid var(--color-line);\n  border-radius: var(--file-drop-radius, var(--field-radius, var(--radius-field)));\n  background-color: var(--color-surface);\n  color: var(--color-ink);\n  font-size: var(--text-sm);\n}\n.list[data-preview='thumbnails'] .item {\n  position: relative;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--space-1);\n  padding: var(--space-1) var(--space-1) var(--space-2);\n}\n\n.thumb {\n  display: grid;\n  place-items: center;\n  aspect-ratio: 4 / 3;\n  overflow: hidden;\n  border-radius: max(2px, calc(var(--field-radius, var(--radius-field)) - var(--space-1)));\n  background-color: var(--color-surface-sunken);\n}\n\n.image {\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n}\n\n.ext {\n  color: var(--color-ink-subtle);\n  font-family: var(--font-numeric);\n  font-size: var(--text-xs);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n}\n\n.meta {\n  display: flex;\n  flex: 1;\n  align-items: baseline;\n  gap: var(--space-2);\n  min-inline-size: 0;\n}\n.list[data-preview='thumbnails'] .meta {\n  flex-direction: column;\n  gap: 0;\n  padding-inline: var(--space-1);\n}\n\n.name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.list[data-preview='thumbnails'] .name {\n  max-inline-size: 100%;\n}\n\n.size {\n  flex: none;\n  color: var(--color-ink-subtle);\n  font-family: var(--font-numeric);\n  font-stretch: var(--numeric-stretch);\n  font-variant-numeric: tabular-nums lining-nums;\n}\n\n.remove {\n  position: relative;\n  display: inline-grid;\n  flex: none;\n  place-items: center;\n  inline-size: var(--control-sm);\n  block-size: var(--control-sm);\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-chip);\n  background: transparent;\n  color: var(--color-ink-muted);\n  cursor: pointer;\n}\n.list[data-preview='thumbnails'] .remove {\n  position: absolute;\n  inset-block-start: var(--space-2);\n  inset-inline-end: var(--space-2);\n  background-color: var(--color-surface-raised);\n  box-shadow: var(--shadow-float);\n}\n.remove > svg {\n  inline-size: 1.1em;\n  block-size: 1.1em;\n}\n@media (hover: hover) {\n  .remove:hover {\n    color: var(--color-ink);\n    background-color: var(--color-surface-sunken);\n  }\n}\n.remove:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 1px;\n}\n"],"mappings":""}

package/dist/components/inputs/FileDrop/fileUtils.d.ts

@@ -0,0 +1,11 @@
+import type { FileValue } from './FileDrop.js';
+export declare function isFile(value: FileValue): value is File;
+/** Whether `file` matches a native `accept` string. An empty/absent accept matches everything. */
+export declare function matchesAccept(file: {
+    name: string;
+    type?: string;
+}, accept: string | undefined): boolean;
+/** "840 bytes", "12 kB", "2.4 MB" — decimal units, formatted by Intl. */
+export declare function formatFileSize(bytes: number, locale?: string): string;
+export declare function isImage(value: FileValue): boolean;
+export declare function extensionOf(name: string): string;

package/dist/components/inputs/FileDrop/fileUtils.js

@@ -0,0 +1,38 @@
+//#region src/components/inputs/FileDrop/fileUtils.ts
+function e(e) {
+	return typeof File < "u" && e instanceof File;
+}
+function t(e, t) {
+	if (!t) return !0;
+	let n = t.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
+	if (n.length === 0) return !0;
+	let r = e.name.toLowerCase(), i = (e.type ?? "").toLowerCase();
+	return n.some((e) => e.startsWith(".") ? r.endsWith(e) : e.endsWith("/*") ? i.startsWith(e.slice(0, -1)) : i === e);
+}
+var n = [
+	"byte",
+	"kilobyte",
+	"megabyte",
+	"gigabyte"
+];
+function r(e, t) {
+	let r = e, i = 0;
+	for (; r >= 1e3 && i < n.length - 1;) r /= 1e3, i += 1;
+	return new Intl.NumberFormat(t, {
+		style: "unit",
+		unit: n[i],
+		unitDisplay: i === 0 ? "long" : "short",
+		maximumFractionDigits: i === 0 || r >= 10 ? 0 : 1
+	}).format(r);
+}
+function i(e) {
+	return (e.type ?? "").startsWith("image/");
+}
+function a(e) {
+	let t = e.lastIndexOf(".");
+	return t > 0 && t < e.length - 1 ? e.slice(t + 1, t + 5).toUpperCase() : "";
+}
+//#endregion
+export { a as extensionOf, r as formatFileSize, e as isFile, i as isImage, t as matchesAccept };
+
+//# sourceMappingURL=fileUtils.js.map

package/dist/components/inputs/FileDrop/fileUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileUtils.js","names":["isFile","value","matchesAccept","accept","tokens","token","name","file","type","SIZE_UNITS","formatFileSize","bytes","unit","locale","isImage","extensionOf","dot"],"sources":["../../../../src/components/inputs/FileDrop/fileUtils.ts"],"sourcesContent":["import type { FileValue } from './FileDrop'\n\n/* Pure helpers for FileDrop (internal — not exported from the package). */\n\nexport function isFile(value: FileValue): value is File {\n  return typeof File !== 'undefined' && value instanceof File\n}\n\n/** Whether `file` matches a native `accept` string. An empty/absent accept matches everything. */\nexport function matchesAccept(\n  file: { name: string; type?: string },\n  accept: string | undefined,\n): boolean {\n  if (!accept) return true\n  const tokens = accept\n    .split(',')\n    .map((token) => token.trim().toLowerCase())\n    .filter(Boolean)\n  if (tokens.length === 0) return true\n  const name = file.name.toLowerCase()\n  const type = (file.type ?? '').toLowerCase()\n  return tokens.some((token) => {\n    if (token.startsWith('.')) return name.endsWith(token)\n    if (token.endsWith('/*')) return type.startsWith(token.slice(0, -1))\n    return type === token\n  })\n}\n\nconst SIZE_UNITS = ['byte', 'kilobyte', 'megabyte', 'gigabyte'] as const\n\n/** \"840 bytes\", \"12 kB\", \"2.4 MB\" — decimal units, formatted by Intl. */\nexport function formatFileSize(bytes: number, locale?: string): string {\n  let value = bytes\n  let unit = 0\n  while (value >= 1000 && unit < SIZE_UNITS.length - 1) {\n    value /= 1000\n    unit += 1\n  }\n  return new Intl.NumberFormat(locale, {\n    style: 'unit',\n    unit: SIZE_UNITS[unit],\n    unitDisplay: unit === 0 ? 'long' : 'short',\n    maximumFractionDigits: unit === 0 || value >= 10 ? 0 : 1,\n  }).format(value)\n}\n\nexport function isImage(value: FileValue): boolean {\n  return (value.type ?? '').startsWith('image/')\n}\n\nexport function extensionOf(name: string): string {\n  const dot = name.lastIndexOf('.')\n  return dot > 0 && dot < name.length - 1 ? name.slice(dot + 1, dot + 5).toUpperCase() : ''\n}\n"],"mappings":";AAIA,SAAgBA,EAAO,GAAiC;CACtD,OAAO,OAAO,OAAS,OAAeC,aAAiB;AACzD;AAGA,SAAgBC,EACd,GACA,GACS;CACT,IAAI,CAACC,GAAQ,OAAO;CACpB,IAAMC,IAASD,EACZ,MAAM,GAAG,CAAC,CACV,KAAK,MAAUE,EAAM,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,CAC1C,OAAO,OAAO;CACjB,IAAID,EAAO,WAAW,GAAG,OAAO;CAChC,IAAME,IAAOC,EAAK,KAAK,YAAY,GAC7BC,KAAQD,EAAK,QAAQ,GAAA,CAAI,YAAY;CAC3C,OAAOH,EAAO,MAAM,MACdC,EAAM,WAAW,GAAG,IAAUC,EAAK,SAASD,CAAK,IACjDA,EAAM,SAAS,IAAI,IAAUG,EAAK,WAAWH,EAAM,MAAM,GAAG,EAAE,CAAC,IAC5DG,MAASH,CACjB;AACH;AAEA,IAAMI,IAAa;CAAC;CAAQ;CAAY;CAAY;AAAU;AAG9D,SAAgBC,EAAe,GAAe,GAAyB;CACrE,IAAIT,IAAQU,GACRC,IAAO;CACX,OAAOX,KAAS,OAAQW,IAAOH,EAAW,SAAS,IAEjD,AADA,KAAS,KACT,KAAQ;CAEV,OAAO,IAAI,KAAK,aAAaI,GAAQ;EACnC,OAAO;EACP,MAAMJ,EAAWG;EACjB,aAAaA,MAAS,IAAI,SAAS;EACnC,uBAAuBA,MAAS,KAAKX,KAAS,KAAK,IAAI;CACzD,CAAC,CAAC,CAAC,OAAOA,CAAK;AACjB;AAEA,SAAgBa,EAAQ,GAA2B;CACjD,QAAQb,EAAM,QAAQ,GAAA,CAAI,WAAW,QAAQ;AAC/C;AAEA,SAAgBc,EAAY,GAAsB;CAChD,IAAMC,IAAMV,EAAK,YAAY,GAAG;CAChC,OAAOU,IAAM,KAAKA,IAAMV,EAAK,SAAS,IAAIA,EAAK,MAAMU,IAAM,GAAGA,IAAM,CAAC,CAAC,CAAC,YAAY,IAAI;AACzF"}

package/dist/components/inputs/FileDrop/index.d.ts

@@ -0,0 +1,2 @@
+export { FileDrop } from './FileDrop.js';
+export type { FileDropProps, FileRejection, FileRejectReason, FileValue, StoredFile, } from './FileDrop.js';

package/dist/components/inputs/FileField/FileField.d.ts

@@ -0,0 +1,12 @@
+import { type FieldLabelProps } from '../Field/index.js';
+import { type FileDropProps } from '../FileDrop/index.js';
+export interface FileFieldProps extends FieldLabelProps, Omit<FileDropProps, 'invalid' | keyof FieldLabelProps> {
+}
+/**
+ * Label + FileDrop + description + warning + error. The label names the native file
+ * input (the ref goes there too); `className`/`style` go to the field wrapper.
+ * `onReject` reports files that weren't added — turn them into the field's error.
+ *
+ * <FileField label="Receipts" accept="image/*,.pdf" multiple maxSize={5_000_000} preview="thumbnails" />
+ */
+export declare const FileField: import("react").ForwardRefExoticComponent<FileFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/inputs/FileField/FileField.js

@@ -0,0 +1,26 @@
+import { Field as e } from "../Field/Field.js";
+import { splitFieldLabelProps as t } from "../internal/fieldProps.js";
+import { FileDrop as n } from "../FileDrop/FileDrop.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/inputs/FileField/FileField.tsx
+var a = r(function(r, a) {
+	let [o, s] = t(r), { id: c, disabled: l, className: u, style: d, ...f } = s;
+	return /* @__PURE__ */ i(e, {
+		...o,
+		htmlFor: c,
+		disabled: l,
+		className: u,
+		style: d,
+		children: /* @__PURE__ */ i(n, {
+			ref: a,
+			id: c,
+			disabled: l,
+			...f
+		})
+	});
+});
+//#endregion
+export { a as FileField };
+
+//# sourceMappingURL=FileField.js.map

package/dist/components/inputs/FileField/FileField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileField.js","names":["FileField","forwardRef","fieldProps","rest","splitFieldLabelProps","props","dropProps","Field","id","FileDrop"],"sources":["../../../../src/components/inputs/FileField/FileField.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Field, type FieldLabelProps } from '#components/inputs/Field'\nimport { FileDrop, type FileDropProps } from '#components/inputs/FileDrop'\nimport { splitFieldLabelProps } from '#components/inputs/internal/fieldProps'\n\nexport interface FileFieldProps\n  extends FieldLabelProps, Omit<FileDropProps, 'invalid' | keyof FieldLabelProps> {}\n\n/**\n * Label + FileDrop + description + warning + error. The label names the native file\n * input (the ref goes there too); `className`/`style` go to the field wrapper.\n * `onReject` reports files that weren't added — turn them into the field's error.\n *\n * <FileField label=\"Receipts\" accept=\"image/*,.pdf\" multiple maxSize={5_000_000} preview=\"thumbnails\" />\n */\nexport const FileField = forwardRef<HTMLInputElement, FileFieldProps>(\n  function FileField(props, ref) {\n    const [fieldProps, rest] = splitFieldLabelProps(props)\n    const { id, disabled, className, style, ...dropProps } = rest\n    return (\n      <Field {...fieldProps} htmlFor={id} disabled={disabled} className={className} style={style}>\n        <FileDrop ref={ref} id={id} disabled={disabled} {...dropProps} />\n      </Field>\n    )\n  },\n)\n"],"mappings":";;;;;;AAeA,IAAaA,IAAYC,EACvB,SAAmB,GAAO,GAAK;CAC7B,IAAM,CAACC,GAAYC,KAAQC,EAAqBC,CAAK,GAC/C,EAAE,OAAI,aAAU,cAAW,UAAO,GAAGC,MAAcH;CACzD,OACE,kBAACI,GAAD;EAAO,GAAIL;EAAY,SAASM;EAAc;EAAqB;EAAkB;EACnF,UAAA,kBAACC,GAAD;GAAe;GAAS;GAAc;GAAU,GAAIH;EAAY,CAAA;CAC3D,CAAA;AAEX,CACF"}

package/dist/components/inputs/FileField/index.d.ts

@@ -0,0 +1,2 @@
+export { FileField } from './FileField.js';
+export type { FileFieldProps } from './FileField.js';

package/dist/components/inputs/Input/Input.d.ts

@@ -0,0 +1,25 @@
+import { type InputHTMLAttributes, type ReactNode } from 'react';
+import type { Size } from '../../../utils/tokens.js';
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    size?: Size;
+    /** Content inside the box before the text: an icon, "$", a unit. Decorative unless it's a button. */
+    leading?: ReactNode;
+    /** Content inside the box after the text: "AUD", "kg", a clear button. */
+    trailing?: ReactNode;
+    /** Critical border + `aria-invalid`. Inside a `<Field error>` this is set for you. */
+    invalid?: boolean;
+    /**
+     * Money and quantities: tabular figures in the theme's numeric face, right-aligned so
+     * decimals line up. Defaults `inputMode` to `decimal`.
+     */
+    numeric?: boolean;
+    /** The native `size` attribute (character width), since `size` is the control size. */
+    htmlSize?: number;
+}
+/**
+ * Single-line text input. Native props (`value`, `onChange`, `type`, `name`…) go to the
+ * `<input>`, as does the ref; `className`/`style` go to the visible box around it.
+ *
+ * <Input numeric leading="$" trailing="AUD" placeholder="0.00" />
+ */
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/inputs/Input/Input.js

@@ -0,0 +1,62 @@
+import { cx as e } from "../../../utils/cx.js";
+import { useMergedRefs as t } from "../internal/refs.js";
+import { markFieldAware as n, useResolvedField as r } from "../internal/FieldContext.js";
+import i from "../internal/control.module.js";
+import a from "./Input.module.js";
+import { forwardRef as o, useRef as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/inputs/Input/Input.tsx
+var u = n(o(function({ size: n = "md", leading: o, trailing: u, invalid: d, numeric: f = !1, htmlSize: p, id: m, disabled: h, required: g, readOnly: _, inputMode: v, className: y, style: b, "aria-describedby": x, "aria-invalid": S, ...C }, w) {
+	let T = s(null), E = t(w, T), D = r({
+		id: m,
+		describedBy: x,
+		invalid: d,
+		ariaInvalid: S,
+		disabled: h,
+		readOnly: _
+	});
+	return /* @__PURE__ */ l("div", {
+		className: e(i.box, a.root, y),
+		style: b,
+		"data-size": n,
+		"data-numeric": f || void 0,
+		"data-invalid": D.invalid || void 0,
+		"data-disabled": D.disabled || void 0,
+		"data-readonly": D.readOnly || void 0,
+		onPointerDown: (e) => {
+			let t = e.target;
+			t === T.current || t.closest("button, a, input, select, textarea") || (e.preventDefault(), T.current?.focus());
+		},
+		children: [
+			o == null ? null : /* @__PURE__ */ c("span", {
+				className: a.adornment,
+				"data-slot": "leading",
+				children: o
+			}),
+			/* @__PURE__ */ c("input", {
+				ref: E,
+				id: D.id,
+				className: a.input,
+				size: p,
+				disabled: D.disabled,
+				readOnly: D.readOnly,
+				required: g ?? D.required,
+				inputMode: v ?? (f ? "decimal" : void 0),
+				"aria-describedby": D.describedBy,
+				"aria-invalid": D.invalid || void 0,
+				"aria-required": D.required || void 0,
+				"aria-busy": D.busy || void 0,
+				...C
+			}),
+			u == null ? null : /* @__PURE__ */ c("span", {
+				className: a.adornment,
+				"data-slot": "trailing",
+				children: u
+			})
+		]
+	});
+}));
+//#endregion
+export { u as Input };
+
+//# sourceMappingURL=Input.js.map

package/dist/components/inputs/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":["control","styles","control_module_default","Input_module_default","Input","markFieldAware","forwardRef","invalidProp","idProp","disabledProp","requiredProp","describedByProp","ariaInvalid","rest","inputRef","useRef","composedRef","useMergedRefs","ref","field","useResolvedField","cx","className","size","numeric","target","event","leading","htmlSize","inputMode","trailing"],"sources":["../../../../src/components/inputs/Input/Input.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useRef,\n  type InputHTMLAttributes,\n  type PointerEvent,\n  type ReactNode,\n} from 'react'\nimport { cx } from '#utils/cx'\nimport type { Size } from '#utils/tokens'\nimport { markFieldAware, useResolvedField } from '#components/inputs/internal/FieldContext'\nimport { useMergedRefs } from '#components/inputs/internal/refs'\nimport control from '#components/inputs/internal/control.module.css'\nimport styles from './Input.module.css'\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  size?: Size\n  /** Content inside the box before the text: an icon, \"$\", a unit. Decorative unless it's a button. */\n  leading?: ReactNode\n  /** Content inside the box after the text: \"AUD\", \"kg\", a clear button. */\n  trailing?: ReactNode\n  /** Critical border + `aria-invalid`. Inside a `<Field error>` this is set for you. */\n  invalid?: boolean\n  /**\n   * Money and quantities: tabular figures in the theme's numeric face, right-aligned so\n   * decimals line up. Defaults `inputMode` to `decimal`.\n   */\n  numeric?: boolean\n  /** The native `size` attribute (character width), since `size` is the control size. */\n  htmlSize?: number\n}\n\n/**\n * Single-line text input. Native props (`value`, `onChange`, `type`, `name`…) go to the\n * `<input>`, as does the ref; `className`/`style` go to the visible box around it.\n *\n * <Input numeric leading=\"$\" trailing=\"AUD\" placeholder=\"0.00\" />\n */\nexport const Input = markFieldAware(\n  forwardRef<HTMLInputElement, InputProps>(function Input(\n    {\n      size = 'md',\n      leading,\n      trailing,\n      invalid: invalidProp,\n      numeric = false,\n      htmlSize,\n      id: idProp,\n      disabled: disabledProp,\n      required: requiredProp,\n      readOnly,\n      inputMode,\n      className,\n      style,\n      'aria-describedby': describedByProp,\n      'aria-invalid': ariaInvalid,\n      ...rest\n    },\n    ref,\n  ) {\n    const inputRef = useRef<HTMLInputElement>(null)\n    const composedRef = useMergedRefs(ref, inputRef)\n    const field = useResolvedField({\n      id: idProp,\n      describedBy: describedByProp,\n      invalid: invalidProp,\n      ariaInvalid,\n      disabled: disabledProp,\n      readOnly,\n    })\n\n    // Clicking the padding or a text adornment focuses the input, like one native control.\n    const onPointerDown = (event: PointerEvent<HTMLDivElement>) => {\n      const target = event.target as HTMLElement\n      if (target === inputRef.current || target.closest('button, a, input, select, textarea'))\n        return\n      event.preventDefault()\n      inputRef.current?.focus()\n    }\n\n    return (\n      <div\n        className={cx(control.box, styles.root, className)}\n        style={style}\n        data-size={size}\n        data-numeric={numeric || undefined}\n        data-invalid={field.invalid || undefined}\n        data-disabled={field.disabled || undefined}\n        data-readonly={field.readOnly || undefined}\n        onPointerDown={onPointerDown}\n      >\n        {leading != null ? (\n          <span className={styles.adornment} data-slot=\"leading\">\n            {leading}\n          </span>\n        ) : null}\n        <input\n          ref={composedRef}\n          id={field.id}\n          className={styles.input}\n          size={htmlSize}\n          disabled={field.disabled}\n          readOnly={field.readOnly}\n          required={requiredProp ?? field.required}\n          inputMode={inputMode ?? (numeric ? 'decimal' : undefined)}\n          aria-describedby={field.describedBy}\n          aria-invalid={field.invalid || undefined}\n          aria-required={field.required || undefined}\n          aria-busy={field.busy || undefined}\n          {...rest}\n        />\n        {trailing != null ? (\n          <span className={styles.adornment} data-slot=\"trailing\">\n            {trailing}\n          </span>\n        ) : null}\n      </div>\n    )\n  }),\n)\n"],"mappings":";;;;;;;;AAqCA,IAAaI,IAAQC,EACnBC,EAAyC,SACvC,EACE,UAAO,MACP,YACA,aACA,SAASC,GACT,aAAU,IACV,aACA,IAAIC,GACJ,UAAUC,GACV,UAAUC,GACV,aACA,cACA,cACA,UACA,oBAAoBC,GACpB,gBAAgBC,GAChB,GAAGC,KAEL,GACA;CACA,IAAMC,IAAWC,EAAyB,IAAI,GACxCC,IAAcC,EAAcC,GAAKJ,CAAQ,GACzCK,IAAQC,EAAiB;EAC7B,IAAIZ;EACJ,aAAaG;EACb,SAASJ;EACT;EACA,UAAUE;EACV;CACF,CAAC;CAWD,OACE,kBAAC,OAAD;EACE,WAAWY,EAAGrB,EAAQ,KAAKC,EAAO,MAAMqB,CAAS;EAC1C;EACP,aAAWC;EACX,gBAAcC,KAAW,KAAA;EACzB,gBAAcL,EAAM,WAAW,KAAA;EAC/B,iBAAeA,EAAM,YAAY,KAAA;EACjC,iBAAeA,EAAM,YAAY,KAAA;EAClB,gBAjBI,MAAwC;GAC7D,IAAMM,IAASC,EAAM;GACrB,AAAID,MAAWX,EAAS,WAAWW,EAAO,QAAQ,oCAAoC,MAEtFC,EAAM,eAAe,GACrBZ,EAAS,SAAS,MAAM;EAC1B;EAGE,UAAA;GAUGa,KAAW,OAIR,OAHF,kBAAC,QAAD;IAAM,WAAW1B,EAAO;IAAW,aAAU;IAC1C,UAAA0B;GACG,CAAA;GAER,kBAAC,SAAD;IACE,KAAKX;IACL,IAAIG,EAAM;IACV,WAAWlB,EAAO;IAClB,MAAM2B;IACN,UAAUT,EAAM;IAChB,UAAUA,EAAM;IAChB,UAAUT,KAAgBS,EAAM;IAChC,WAAWU,MAAcL,IAAU,YAAY,KAAA;IAC/C,oBAAkBL,EAAM;IACxB,gBAAcA,EAAM,WAAW,KAAA;IAC/B,iBAAeA,EAAM,YAAY,KAAA;IACjC,aAAWA,EAAM,QAAQ,KAAA;IACzB,GAAIN;GACL,CAAA;GACAiB,KAAY,OAIT,OAHF,kBAAC,QAAD;IAAM,WAAW7B,EAAO;IAAW,aAAU;IAC1C,UAAA6B;GACG,CAAA;EAEL;;AAET,CAAC,CACH"}

package/dist/components/inputs/Input/Input.module.js

@@ -0,0 +1,10 @@
+//#region src/components/inputs/Input/Input.module.css
+var e = "kiln-Input__root", t = "kiln-Input__input", n = "kiln-Input__adornment", r = {
+	root: e,
+	input: t,
+	adornment: n
+};
+//#endregion
+export { n as adornment, r as default, t as input, e as root };
+
+//# sourceMappingURL=Input.module.js.map

package/dist/components/inputs/Input/Input.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.module.js","names":["root","input","adornment","Input_module_default"],"sources":["../../../../src/components/inputs/Input/Input.module.css"],"sourcesContent":["/*\n * The box (border, radius, states) comes from inputs/internal/control.module.css;\n * this file lays out the input and its adornments inside it.\n *\n * Component tokens:\n *   --input-adornment-ink   default var(--color-ink-subtle)\n */\n.root {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  inline-size: 100%;\n  padding-inline: var(--_px);\n  cursor: text;\n}\n\n/* Focus: the neutral ring goes round the whole box, never onto the border. */\n.root:focus-within {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.root[data-disabled] {\n  cursor: not-allowed;\n}\n\n.input {\n  flex: 1;\n  align-self: stretch;\n  min-inline-size: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  letter-spacing: inherit;\n  outline: none;\n}\n.input:focus-visible {\n  outline: none;\n}\n.input:disabled {\n  cursor: not-allowed;\n}\n.input::placeholder {\n  color: var(--color-ink-subtle);\n  opacity: 1;\n}\n/* Keep autofill inside the theme instead of the browser's yellow/blue slab. */\n.input:autofill {\n  -webkit-text-fill-color: var(--color-ink);\n  caret-color: var(--color-ink);\n}\n.input::-webkit-calendar-picker-indicator {\n  cursor: pointer;\n  opacity: 0.7;\n}\n\n.adornment {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-1);\n  color: var(--input-adornment-ink, var(--color-ink-subtle));\n  font-size: 0.875em;\n  white-space: nowrap;\n  user-select: none;\n}\n.adornment > svg {\n  inline-size: 1.15em;\n  block-size: 1.15em;\n}\n\n/* Money: tabular, right-aligned, in the theme's numeric face — \"$ 1,240.00 AUD\". */\n.root[data-numeric] .input {\n  text-align: end;\n  font-family: var(--font-numeric);\n  font-stretch: var(--numeric-stretch);\n  font-variant-numeric: tabular-nums lining-nums;\n}\n.root[data-numeric] .adornment {\n  font-family: var(--font-numeric);\n  font-stretch: var(--numeric-stretch);\n  font-variant-numeric: tabular-nums lining-nums;\n}\n"],"mappings":""}

package/dist/components/inputs/Input/index.d.ts

@@ -0,0 +1,2 @@
+export { Input } from './Input.js';
+export type { InputProps } from './Input.js';

package/dist/components/inputs/NumberField/NumberField.d.ts

@@ -0,0 +1,11 @@
+import { type FieldLabelProps } from '../Field/index.js';
+import { type NumberInputProps } from '../NumberInput/index.js';
+export interface NumberFieldProps extends FieldLabelProps, Omit<NumberInputProps, 'invalid' | keyof FieldLabelProps> {
+}
+/**
+ * Label + NumberInput + description + error. Input props (`value`, `min`, `step`,
+ * `formatOptions`…) and the ref go to the spinbutton; `className`/`style` go to the wrapper.
+ *
+ * <NumberField label="Guests" min={1} max={12} value={guests} onValueChange={setGuests} />
+ */
+export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/inputs/NumberField/NumberField.js

@@ -0,0 +1,26 @@
+import { Field as e } from "../Field/Field.js";
+import { splitFieldLabelProps as t } from "../internal/fieldProps.js";
+import { NumberInput as n } from "../NumberInput/NumberInput.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/inputs/NumberField/NumberField.tsx
+var a = r(function(r, a) {
+	let [o, s] = t(r), { id: c, disabled: l, className: u, style: d, ...f } = s;
+	return /* @__PURE__ */ i(e, {
+		...o,
+		htmlFor: c,
+		disabled: l,
+		className: u,
+		style: d,
+		children: /* @__PURE__ */ i(n, {
+			ref: a,
+			id: c,
+			disabled: l,
+			...f
+		})
+	});
+});
+//#endregion
+export { a as NumberField };
+
+//# sourceMappingURL=NumberField.js.map

package/dist/components/inputs/NumberField/NumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.js","names":["NumberField","forwardRef","fieldProps","rest","splitFieldLabelProps","props","inputRest","Field","id","NumberInput"],"sources":["../../../../src/components/inputs/NumberField/NumberField.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Field, type FieldLabelProps } from '#components/inputs/Field'\nimport { NumberInput, type NumberInputProps } from '#components/inputs/NumberInput'\nimport { splitFieldLabelProps } from '#components/inputs/internal/fieldProps'\n\nexport interface NumberFieldProps\n  extends FieldLabelProps, Omit<NumberInputProps, 'invalid' | keyof FieldLabelProps> {}\n\n/**\n * Label + NumberInput + description + error. Input props (`value`, `min`, `step`,\n * `formatOptions`…) and the ref go to the spinbutton; `className`/`style` go to the wrapper.\n *\n * <NumberField label=\"Guests\" min={1} max={12} value={guests} onValueChange={setGuests} />\n */\nexport const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(\n  function NumberField(props, ref) {\n    const [fieldProps, rest] = splitFieldLabelProps(props)\n    const { id, disabled, className, style, ...inputRest } = rest\n    return (\n      <Field {...fieldProps} htmlFor={id} disabled={disabled} className={className} style={style}>\n        <NumberInput ref={ref} id={id} disabled={disabled} {...inputRest} />\n      </Field>\n    )\n  },\n)\n"],"mappings":";;;;;;AAcA,IAAaA,IAAcC,EACzB,SAAqB,GAAO,GAAK;CAC/B,IAAM,CAACC,GAAYC,KAAQC,EAAqBC,CAAK,GAC/C,EAAE,OAAI,aAAU,cAAW,UAAO,GAAGC,MAAcH;CACzD,OACE,kBAACI,GAAD;EAAO,GAAIL;EAAY,SAASM;EAAc;EAAqB;EAAkB;EACnF,UAAA,kBAACC,GAAD;GAAkB;GAAS;GAAc;GAAU,GAAIH;EAAY,CAAA;CAC9D,CAAA;AAEX,CACF"}

package/dist/components/inputs/NumberField/index.d.ts

@@ -0,0 +1,2 @@
+export { NumberField } from './NumberField.js';
+export type { NumberFieldProps } from './NumberField.js';

package/dist/components/inputs/NumberInput/NumberInput.d.ts

@@ -0,0 +1,35 @@
+import { type InputProps } from '../Input/index.js';
+export interface NumberInputProps extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange' | 'inputMode' | 'numeric' | 'min' | 'max' | 'step'> {
+    /** The number, or `null` when empty. Never `NaN`. */
+    value?: number | null;
+    defaultValue?: number | null;
+    /** Called while typing (on every text that parses), on stepping, and on commit. `null` when cleared. */
+    onValueChange?: (value: number | null) => void;
+    min?: number;
+    max?: number;
+    /** Arrow-key / button increment. Also sets the rounding precision on commit. Default `1`. */
+    step?: number;
+    /** PageUp / PageDown increment. Default `10 × step`. */
+    largeStep?: number;
+    /** Show − / + buttons at the end of the box (out of the tab order — the keyboard uses arrows). Default `true`. */
+    stepper?: boolean;
+    /** Accessible name of the − button. Default `'Decrease'`. */
+    decrementLabel?: string;
+    /** Accessible name of the + button. Default `'Increase'`. */
+    incrementLabel?: string;
+    /** How the number reads when the field isn't focused (`{ style: 'percent' }`, `{ maximumFractionDigits: 1 }`). */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** Locale for parsing and formatting. Defaults to the browser's. */
+    locale?: string;
+    /** Clamp to `min`/`max` when the typed value is committed (blur, Enter). Default `true`. */
+    clampOnBlur?: boolean;
+}
+/**
+ * A number typed as text — a WAI-ARIA spinbutton, never `type="number"`. Formatted in the
+ * locale when blurred ("1,450.5"), raw while focused ("1450.5"), so editing never fights the
+ * grouping. ↑/↓ step, PgUp/PgDn step ×10, Home/End jump to `min`/`max`, Enter commits.
+ * The ref goes to the text input; `name` is submitted as a plain number ("1450.5").
+ *
+ * <NumberInput min={1} max={12} value={guests} onValueChange={setGuests} />
+ */
+export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;