@linyao.tw/ui 0.0.0-snapshot.07df57

package/dist/components/forms/FileUpload.js

@@ -0,0 +1,319 @@
+/* empty css      */
+import { FieldFrame as e, cx as t } from "./internal.js";
+import { Button as n } from "../foundations/Button.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Input as o } from "@base-ui/react/input";
+import { FileIcon as s } from "@phosphor-icons/react/dist/csr/File";
+import { PlusIcon as c } from "@phosphor-icons/react/dist/csr/Plus";
+//#region src/components/forms/FileUpload.tsx
+function l({ file: e }) {
+	let [t, n] = r.useState(null);
+	return r.useEffect(() => {
+		if (typeof URL.createObjectURL != "function" || typeof URL.revokeObjectURL != "function") return;
+		let t = URL.createObjectURL(e), r = !1;
+		return queueMicrotask(() => {
+			r || n({
+				file: e,
+				url: t
+			});
+		}), () => {
+			r = !0, URL.revokeObjectURL(t);
+		};
+	}, [e]), t?.file === e ? /* @__PURE__ */ i("img", {
+		className: "lyds-file-selection__thumbnail",
+		src: t.url,
+		alt: "",
+		width: 48,
+		height: 48,
+		loading: "lazy",
+		decoding: "async"
+	}) : /* @__PURE__ */ i(s, {
+		"aria-hidden": "true",
+		weight: "regular"
+	});
+}
+function u(e, t) {
+	if (!t?.trim()) return !0;
+	let n = e.name.toLocaleLowerCase(), r = e.type.toLocaleLowerCase();
+	return t.split(",").some((e) => {
+		let t = e.trim().toLocaleLowerCase();
+		return t ? t.startsWith(".") ? n.endsWith(t) : t.endsWith("/*") ? r.startsWith(t.slice(0, -1)) : r === t : !1;
+	});
+}
+function d({ accept: e, files: n, invalidFileLabel: r, summaryId: o }) {
+	return /* @__PURE__ */ a("div", {
+		className: t("lyds-file-selection", n.length === 0 && "lyds-sr-only"),
+		children: [/* @__PURE__ */ i("p", {
+			id: o,
+			className: "lyds-file-selection__summary",
+			role: "status",
+			"aria-live": "polite",
+			"aria-atomic": "true",
+			children: n.length > 0 ? `已選擇 ${n.length} 個檔案` : null
+		}), n.length > 0 ? /* @__PURE__ */ i("ul", {
+			className: "lyds-file-selection__list",
+			"aria-label": "已選擇的檔案",
+			children: n.map((t, n) => {
+				let o = u(t, e);
+				return /* @__PURE__ */ a("li", {
+					className: "lyds-file-selection__item",
+					"data-invalid": o ? void 0 : "",
+					children: [/* @__PURE__ */ i("span", {
+						className: "lyds-file-selection__visual",
+						children: t.type.startsWith("image/") ? /* @__PURE__ */ i(l, { file: t }) : /* @__PURE__ */ i(s, {
+							"aria-hidden": "true",
+							weight: "regular"
+						})
+					}), /* @__PURE__ */ a("span", {
+						className: "lyds-file-selection__details",
+						children: [/* @__PURE__ */ i("span", {
+							className: "lyds-file-selection__name",
+							title: t.name,
+							children: t.name
+						}), o ? null : /* @__PURE__ */ i("span", {
+							className: "lyds-file-selection__status",
+							children: r
+						})]
+					})]
+				}, `${t.name}-${t.size}-${t.lastModified}-${n}`);
+			})
+		}) : null]
+	});
+}
+function ee(e, t, n) {
+	r.useEffect(() => {
+		let t = e.current?.form;
+		if (t == null) return;
+		let r = () => n([]);
+		return t.addEventListener("reset", r), () => t.removeEventListener("reset", r);
+	}, [
+		t,
+		e,
+		n
+	]);
+}
+var f = r.forwardRef(function({ label: s, description: c, error: l, invalid: u, disabled: f, readOnly: p, required: m, name: h, size: g = "md", className: _, style: v, requiredIndicator: y, validate: b, validationMode: x, validationDebounceTime: S, dirty: C, touched: w, actionsRef: T, inputClassName: E, inputStyle: D, triggerLabel: O = "選擇檔案", invalidFileLabel: k = "不支援的檔案類型", onChange: A, onFilesChange: j, id: M, ...N }, P) {
+	let F = r.useId(), I = M ?? F, L = `${I}-label`, R = `${I}-description`, z = `${I}-error`, B = `${I}-trigger-label`, V = `${I}-selection-summary`, H = r.useRef(null), [U, W] = r.useState([]);
+	ee(H, N.form, W), r.useImperativeHandle(P, () => H.current);
+	let G = (e) => {
+		if (!(f || p) && (A?.(e), !e.defaultPrevented)) {
+			let t = Array.from(e.currentTarget.files ?? []);
+			W(t), j?.(t, e);
+		}
+	};
+	return /* @__PURE__ */ i(e, {
+		label: s,
+		description: c,
+		error: l,
+		invalid: u,
+		disabled: f,
+		readOnly: p,
+		required: m,
+		name: h,
+		size: g,
+		className: _,
+		style: v,
+		requiredIndicator: y,
+		labelId: L,
+		descriptionId: R,
+		errorId: z,
+		validate: b,
+		validationMode: x,
+		validationDebounceTime: S,
+		dirty: C,
+		touched: w,
+		actionsRef: T,
+		children: /* @__PURE__ */ a("div", {
+			className: "lyds-file-upload",
+			"data-size": g,
+			children: [
+				/* @__PURE__ */ i(o, {
+					...N,
+					ref: H,
+					id: I,
+					type: "file",
+					className: t("lyds-file-upload__input", E),
+					style: D,
+					disabled: f || p,
+					readOnly: p,
+					required: m,
+					"aria-invalid": u || void 0,
+					"aria-labelledby": s == null ? B : `${L} ${B}`,
+					"aria-describedby": [
+						c == null ? null : R,
+						U.length > 0 ? V : null,
+						z
+					].filter(Boolean).join(" "),
+					tabIndex: -1,
+					onChange: G
+				}),
+				/* @__PURE__ */ i(n, {
+					className: "lyds-file-upload__trigger",
+					disabled: f || p,
+					size: g,
+					variant: "secondary",
+					onClick: () => H.current?.click(),
+					children: /* @__PURE__ */ i("span", {
+						id: B,
+						children: O
+					})
+				}),
+				/* @__PURE__ */ i(d, {
+					accept: N.accept,
+					files: U,
+					invalidFileLabel: k,
+					summaryId: V
+				})
+			]
+		})
+	});
+}), p = r.forwardRef(function({ label: s, description: l, error: u, invalid: f, disabled: p, readOnly: m, required: h, name: g, size: _ = "md", className: v, style: y, requiredIndicator: b, validate: x, validationMode: S, validationDebounceTime: C, dirty: w, touched: T, actionsRef: E, inputClassName: D, primaryLabel: O = "將檔案拖曳至此", secondaryLabel: k = "或從裝置選擇檔案", browseLabel: A = "選擇檔案", invalidFileLabel: j = "不支援的檔案類型", onChange: M, onFilesChange: N, onDragEnter: P, onDragOver: F, onDragLeave: I, onDrop: L, id: R, ...z }, B) {
+	let V = r.useId(), H = R ?? V, U = `${H}-label`, W = `${H}-description`, G = `${H}-error`, K = `${H}-trigger-label`, q = `${H}-selection-summary`, J = r.useRef(null), [te, Y] = r.useState(!1), [X, Z] = r.useState([]), Q = r.useRef(0), $ = r.useRef(null);
+	ee(J, z.form, Z), r.useImperativeHandle(B, () => J.current);
+	let ne = (e) => {
+		if (p || m || (M?.(e), e.defaultPrevented)) return;
+		let t = $.current;
+		if (t != null) {
+			t.handled = !0, Z(t.files), N?.(t.files, {
+				source: "drop",
+				event: t.event
+			});
+			return;
+		}
+		let n = Array.from(e.currentTarget.files ?? []);
+		Z(n), N?.(n, {
+			source: "input",
+			event: e
+		});
+	}, re = (e) => {
+		if (p || m) {
+			P?.(e);
+			return;
+		}
+		e.preventDefault(), P?.(e), Q.current += 1, Y(!0);
+	}, ie = (e) => {
+		if (p || m) {
+			F?.(e);
+			return;
+		}
+		e.preventDefault(), e.dataTransfer.dropEffect = "copy", F?.(e);
+	}, ae = (e) => {
+		I?.(e), !(p || m) && (Q.current = Math.max(0, Q.current - 1), Q.current === 0 && Y(!1));
+	}, oe = (e) => {
+		if (p || m) {
+			L?.(e);
+			return;
+		}
+		e.preventDefault(), L?.(e), Q.current = 0, Y(!1);
+		let t = Array.from(e.dataTransfer.files ?? []);
+		if (J.current != null) {
+			try {
+				J.current.files = e.dataTransfer.files;
+			} catch {}
+			let n = {
+				event: e,
+				files: t,
+				handled: !1
+			};
+			$.current = n, J.current.dispatchEvent(new Event("change", { bubbles: !0 })), $.current = null, n.handled || (Z(t), N?.(t, {
+				source: "drop",
+				event: e
+			}));
+			return;
+		}
+		Z(t), N?.(t, {
+			source: "drop",
+			event: e
+		});
+	};
+	return /* @__PURE__ */ a(e, {
+		label: s,
+		description: l,
+		error: u,
+		invalid: f,
+		disabled: p,
+		readOnly: m,
+		required: h,
+		name: g,
+		size: _,
+		className: v,
+		style: y,
+		requiredIndicator: b,
+		labelId: U,
+		descriptionId: W,
+		errorId: G,
+		validate: x,
+		validationMode: S,
+		validationDebounceTime: C,
+		dirty: w,
+		touched: T,
+		actionsRef: E,
+		children: [/* @__PURE__ */ i(o, {
+			...z,
+			ref: J,
+			id: H,
+			type: "file",
+			className: t("lyds-drop-zone__input", D),
+			disabled: p || m,
+			readOnly: m,
+			required: h,
+			"aria-invalid": f || void 0,
+			"aria-labelledby": s == null ? K : `${U} ${K}`,
+			"aria-describedby": [
+				l == null ? null : W,
+				X.length > 0 ? q : null,
+				G
+			].filter(Boolean).join(" "),
+			tabIndex: -1,
+			onChange: ne
+		}), /* @__PURE__ */ a("div", {
+			className: "lyds-drop-zone",
+			"data-size": _,
+			"data-dragging": te || void 0,
+			"data-disabled": p || void 0,
+			"data-readonly": m || void 0,
+			onDragEnter: re,
+			onDragOver: ie,
+			onDragLeave: ae,
+			onDrop: oe,
+			children: [
+				/* @__PURE__ */ a("span", {
+					className: "lyds-drop-zone__copy",
+					children: [/* @__PURE__ */ i("span", {
+						className: "lyds-drop-zone__primary",
+						children: O
+					}), /* @__PURE__ */ i("span", {
+						className: "lyds-drop-zone__secondary",
+						children: k
+					})]
+				}),
+				/* @__PURE__ */ i(n, {
+					className: "lyds-drop-zone__button",
+					disabled: p || m,
+					size: _,
+					startIcon: /* @__PURE__ */ i(c, {
+						"aria-hidden": "true",
+						weight: "bold"
+					}),
+					variant: "secondary",
+					onClick: () => J.current?.click(),
+					children: /* @__PURE__ */ i("span", {
+						id: K,
+						children: A
+					})
+				}),
+				/* @__PURE__ */ i(d, {
+					accept: z.accept,
+					files: X,
+					invalidFileLabel: j,
+					summaryId: q
+				})
+			]
+		})]
+	});
+});
+//#endregion
+export { p as DropZone, f as FileUpload };
+
+//# sourceMappingURL=FileUpload.js.map

package/dist/components/forms/FileUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.js","names":[],"sources":["../../../src/components/forms/FileUpload.tsx"],"sourcesContent":["import { Input as BaseInput } from \"@base-ui/react/input\";\nimport { FileIcon } from \"@phosphor-icons/react/dist/csr/File\";\nimport { PlusIcon } from \"@phosphor-icons/react/dist/csr/Plus\";\nimport * as React from \"react\";\nimport { Button } from \"../foundations/Button\";\nimport \"./forms.css\";\nimport { cx, FieldFrame, type FieldAnatomyProps } from \"./internal\";\n\ntype NativeFileInputProps = Omit<\n\tReact.InputHTMLAttributes<HTMLInputElement>,\n\t\"children\" | \"className\" | \"defaultValue\" | \"disabled\" | \"name\" | \"onChange\" | \"readOnly\" | \"required\" | \"size\" | \"style\" | \"type\" | \"value\"\n>;\n\nfunction FileImagePreview({ file }: { file: File }) {\n\tconst [preview, setPreview] = React.useState<{ file: File; url: string } | null>(null);\n\n\tReact.useEffect(() => {\n\t\tif (typeof URL.createObjectURL !== \"function\" || typeof URL.revokeObjectURL !== \"function\") return;\n\n\t\tconst previewUrl = URL.createObjectURL(file);\n\t\tlet disposed = false;\n\t\tqueueMicrotask(() => {\n\t\t\tif (!disposed) {\n\t\t\t\tsetPreview({ file, url: previewUrl });\n\t\t\t}\n\t\t});\n\n\t\treturn () => {\n\t\t\tdisposed = true;\n\t\t\tURL.revokeObjectURL(previewUrl);\n\t\t};\n\t}, [file]);\n\n\tif (preview?.file !== file) return <FileIcon aria-hidden=\"true\" weight=\"regular\" />;\n\treturn <img className=\"lyds-file-selection__thumbnail\" src={preview.url} alt=\"\" width={48} height={48} loading=\"lazy\" decoding=\"async\" />;\n}\n\nfunction isFileAccepted(file: File, accept: string | undefined): boolean {\n\tif (!accept?.trim()) return true;\n\n\tconst fileName = file.name.toLocaleLowerCase();\n\tconst mimeType = file.type.toLocaleLowerCase();\n\treturn accept.split(\",\").some(rawRule => {\n\t\tconst rule = rawRule.trim().toLocaleLowerCase();\n\t\tif (!rule) return false;\n\t\tif (rule.startsWith(\".\")) return fileName.endsWith(rule);\n\t\tif (rule.endsWith(\"/*\")) return mimeType.startsWith(rule.slice(0, -1));\n\t\treturn mimeType === rule;\n\t});\n}\n\ninterface FileSelectionPreviewProps {\n\taccept: string | undefined;\n\tfiles: readonly File[];\n\tinvalidFileLabel: React.ReactNode;\n\tsummaryId: string;\n}\n\nfunction FileSelectionPreview({ accept, files, invalidFileLabel, summaryId }: FileSelectionPreviewProps) {\n\treturn (\n\t\t<div className={cx(\"lyds-file-selection\", files.length === 0 && \"lyds-sr-only\")}>\n\t\t\t<p id={summaryId} className=\"lyds-file-selection__summary\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n\t\t\t\t{files.length > 0 ? `已選擇 ${files.length} 個檔案` : null}\n\t\t\t</p>\n\t\t\t{files.length > 0 ? (\n\t\t\t\t<ul className=\"lyds-file-selection__list\" aria-label=\"已選擇的檔案\">\n\t\t\t\t\t{files.map((file, index) => {\n\t\t\t\t\t\tconst accepted = isFileAccepted(file, accept);\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li className=\"lyds-file-selection__item\" data-invalid={accepted ? undefined : \"\"} key={`${file.name}-${file.size}-${file.lastModified}-${index}`}>\n\t\t\t\t\t\t\t\t<span className=\"lyds-file-selection__visual\">{file.type.startsWith(\"image/\") ? <FileImagePreview file={file} /> : <FileIcon aria-hidden=\"true\" weight=\"regular\" />}</span>\n\t\t\t\t\t\t\t\t<span className=\"lyds-file-selection__details\">\n\t\t\t\t\t\t\t\t\t<span className=\"lyds-file-selection__name\" title={file.name}>\n\t\t\t\t\t\t\t\t\t\t{file.name}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{accepted ? null : <span className=\"lyds-file-selection__status\">{invalidFileLabel}</span>}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n\nfunction useClearFileSelectionOnFormReset(inputRef: React.RefObject<HTMLInputElement | null>, formId: string | undefined, setSelectedFiles: React.Dispatch<React.SetStateAction<readonly File[]>>) {\n\tReact.useEffect(() => {\n\t\tconst form = inputRef.current?.form;\n\t\tif (form == null) return;\n\n\t\tconst handleReset = () => setSelectedFiles([]);\n\t\tform.addEventListener(\"reset\", handleReset);\n\t\treturn () => form.removeEventListener(\"reset\", handleReset);\n\t}, [formId, inputRef, setSelectedFiles]);\n}\n\nexport interface FileUploadProps extends NativeFileInputProps, FieldAnatomyProps {\n\tinputClassName?: string;\n\tinputStyle?: React.CSSProperties;\n\ttriggerLabel?: React.ReactNode;\n\tinvalidFileLabel?: React.ReactNode;\n\tonChange?: React.ChangeEventHandler<HTMLInputElement>;\n\tonFilesChange?: (files: readonly File[], event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const FileUpload = React.forwardRef<HTMLInputElement, FileUploadProps>(function FileUpload(\n\t{\n\t\tlabel,\n\t\tdescription,\n\t\terror,\n\t\tinvalid,\n\t\tdisabled,\n\t\treadOnly,\n\t\trequired,\n\t\tname,\n\t\tsize = \"md\",\n\t\tclassName,\n\t\tstyle,\n\t\trequiredIndicator,\n\t\tvalidate,\n\t\tvalidationMode,\n\t\tvalidationDebounceTime,\n\t\tdirty,\n\t\ttouched,\n\t\tactionsRef,\n\t\tinputClassName,\n\t\tinputStyle,\n\t\ttriggerLabel = \"選擇檔案\",\n\t\tinvalidFileLabel = \"不支援的檔案類型\",\n\t\tonChange,\n\t\tonFilesChange,\n\t\tid: idProp,\n\t\t...inputProps\n\t},\n\tforwardedRef\n) {\n\tconst generatedId = React.useId();\n\tconst id = idProp ?? generatedId;\n\tconst labelId = `${id}-label`;\n\tconst descriptionId = `${id}-description`;\n\tconst errorId = `${id}-error`;\n\tconst triggerId = `${id}-trigger-label`;\n\tconst selectionSummaryId = `${id}-selection-summary`;\n\tconst inputRef = React.useRef<HTMLInputElement>(null);\n\tconst [selectedFiles, setSelectedFiles] = React.useState<readonly File[]>([]);\n\tuseClearFileSelectionOnFormReset(inputRef, inputProps.form, setSelectedFiles);\n\tReact.useImperativeHandle(forwardedRef, () => inputRef.current as HTMLInputElement);\n\n\tconst handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n\t\tif (disabled || readOnly) return;\n\t\tonChange?.(event);\n\t\tif (!event.defaultPrevented) {\n\t\t\tconst files = Array.from(event.currentTarget.files ?? []);\n\t\t\tsetSelectedFiles(files);\n\t\t\tonFilesChange?.(files, event);\n\t\t}\n\t};\n\n\treturn (\n\t\t<FieldFrame\n\t\t\tlabel={label}\n\t\t\tdescription={description}\n\t\t\terror={error}\n\t\t\tinvalid={invalid}\n\t\t\tdisabled={disabled}\n\t\t\treadOnly={readOnly}\n\t\t\trequired={required}\n\t\t\tname={name}\n\t\t\tsize={size}\n\t\t\tclassName={className}\n\t\t\tstyle={style}\n\t\t\trequiredIndicator={requiredIndicator}\n\t\t\tlabelId={labelId}\n\t\t\tdescriptionId={descriptionId}\n\t\t\terrorId={errorId}\n\t\t\tvalidate={validate}\n\t\t\tvalidationMode={validationMode}\n\t\t\tvalidationDebounceTime={validationDebounceTime}\n\t\t\tdirty={dirty}\n\t\t\ttouched={touched}\n\t\t\tactionsRef={actionsRef}\n\t\t>\n\t\t\t<div className=\"lyds-file-upload\" data-size={size}>\n\t\t\t\t<BaseInput\n\t\t\t\t\t{...inputProps}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tid={id}\n\t\t\t\t\ttype=\"file\"\n\t\t\t\t\tclassName={cx(\"lyds-file-upload__input\", inputClassName)}\n\t\t\t\t\tstyle={inputStyle}\n\t\t\t\t\tdisabled={disabled || readOnly}\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\trequired={required}\n\t\t\t\t\taria-invalid={invalid || undefined}\n\t\t\t\t\taria-labelledby={label != null ? `${labelId} ${triggerId}` : triggerId}\n\t\t\t\t\taria-describedby={[description != null ? descriptionId : null, selectedFiles.length > 0 ? selectionSummaryId : null, errorId].filter(Boolean).join(\" \")}\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t/>\n\t\t\t\t<Button className=\"lyds-file-upload__trigger\" disabled={disabled || readOnly} size={size} variant=\"secondary\" onClick={() => inputRef.current?.click()}>\n\t\t\t\t\t<span id={triggerId}>{triggerLabel}</span>\n\t\t\t\t</Button>\n\t\t\t\t<FileSelectionPreview accept={inputProps.accept} files={selectedFiles} invalidFileLabel={invalidFileLabel} summaryId={selectionSummaryId} />\n\t\t\t</div>\n\t\t</FieldFrame>\n\t);\n});\n\nexport type DropZoneChangeDetails = { source: \"input\"; event: React.ChangeEvent<HTMLInputElement> } | { source: \"drop\"; event: React.DragEvent<HTMLDivElement> };\n\nexport interface DropZoneProps extends NativeFileInputProps, FieldAnatomyProps {\n\tinputClassName?: string;\n\tprimaryLabel?: React.ReactNode;\n\tsecondaryLabel?: React.ReactNode;\n\tbrowseLabel?: string;\n\tinvalidFileLabel?: React.ReactNode;\n\tonChange?: React.ChangeEventHandler<HTMLInputElement>;\n\tonFilesChange?: (files: readonly File[], details: DropZoneChangeDetails) => void;\n\tonDragEnter?: React.DragEventHandler<HTMLDivElement>;\n\tonDragOver?: React.DragEventHandler<HTMLDivElement>;\n\tonDragLeave?: React.DragEventHandler<HTMLDivElement>;\n\tonDrop?: React.DragEventHandler<HTMLDivElement>;\n}\n\nexport const DropZone = React.forwardRef<HTMLInputElement, DropZoneProps>(function DropZone(\n\t{\n\t\tlabel,\n\t\tdescription,\n\t\terror,\n\t\tinvalid,\n\t\tdisabled,\n\t\treadOnly,\n\t\trequired,\n\t\tname,\n\t\tsize = \"md\",\n\t\tclassName,\n\t\tstyle,\n\t\trequiredIndicator,\n\t\tvalidate,\n\t\tvalidationMode,\n\t\tvalidationDebounceTime,\n\t\tdirty,\n\t\ttouched,\n\t\tactionsRef,\n\t\tinputClassName,\n\t\tprimaryLabel = \"將檔案拖曳至此\",\n\t\tsecondaryLabel = \"或從裝置選擇檔案\",\n\t\tbrowseLabel = \"選擇檔案\",\n\t\tinvalidFileLabel = \"不支援的檔案類型\",\n\t\tonChange,\n\t\tonFilesChange,\n\t\tonDragEnter,\n\t\tonDragOver,\n\t\tonDragLeave,\n\t\tonDrop,\n\t\tid: idProp,\n\t\t...inputProps\n\t},\n\tforwardedRef\n) {\n\tconst generatedId = React.useId();\n\tconst id = idProp ?? generatedId;\n\tconst labelId = `${id}-label`;\n\tconst descriptionId = `${id}-description`;\n\tconst errorId = `${id}-error`;\n\tconst triggerId = `${id}-trigger-label`;\n\tconst selectionSummaryId = `${id}-selection-summary`;\n\tconst inputRef = React.useRef<HTMLInputElement>(null);\n\tconst [dragging, setDragging] = React.useState(false);\n\tconst [selectedFiles, setSelectedFiles] = React.useState<readonly File[]>([]);\n\tconst dragDepth = React.useRef(0);\n\tconst pendingDrop = React.useRef<{ event: React.DragEvent<HTMLDivElement>; files: readonly File[]; handled: boolean } | null>(null);\n\tuseClearFileSelectionOnFormReset(inputRef, inputProps.form, setSelectedFiles);\n\n\tReact.useImperativeHandle(forwardedRef, () => inputRef.current as HTMLInputElement);\n\n\tconst handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n\t\tif (disabled || readOnly) return;\n\t\tonChange?.(event);\n\t\tif (event.defaultPrevented) return;\n\n\t\tconst drop = pendingDrop.current;\n\t\tif (drop != null) {\n\t\t\tdrop.handled = true;\n\t\t\tsetSelectedFiles(drop.files);\n\t\t\tonFilesChange?.(drop.files, { source: \"drop\", event: drop.event });\n\t\t\treturn;\n\t\t}\n\n\t\tconst files = Array.from(event.currentTarget.files ?? []);\n\t\tsetSelectedFiles(files);\n\t\tonFilesChange?.(files, { source: \"input\", event });\n\t};\n\n\tconst handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {\n\t\tif (disabled || readOnly) {\n\t\t\tonDragEnter?.(event);\n\t\t\treturn;\n\t\t}\n\t\tevent.preventDefault();\n\t\tonDragEnter?.(event);\n\t\tdragDepth.current += 1;\n\t\tsetDragging(true);\n\t};\n\n\tconst handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {\n\t\tif (disabled || readOnly) {\n\t\t\tonDragOver?.(event);\n\t\t\treturn;\n\t\t}\n\t\tevent.preventDefault();\n\t\tevent.dataTransfer.dropEffect = \"copy\";\n\t\tonDragOver?.(event);\n\t};\n\n\tconst handleDragLeave = (event: React.DragEvent<HTMLDivElement>) => {\n\t\tonDragLeave?.(event);\n\t\tif (disabled || readOnly) return;\n\t\tdragDepth.current = Math.max(0, dragDepth.current - 1);\n\t\tif (dragDepth.current === 0) setDragging(false);\n\t};\n\n\tconst handleDrop = (event: React.DragEvent<HTMLDivElement>) => {\n\t\tif (disabled || readOnly) {\n\t\t\tonDrop?.(event);\n\t\t\treturn;\n\t\t}\n\t\tevent.preventDefault();\n\t\tonDrop?.(event);\n\t\tdragDepth.current = 0;\n\t\tsetDragging(false);\n\t\tconst files = Array.from(event.dataTransfer.files ?? []);\n\t\tif (inputRef.current != null) {\n\t\t\ttry {\n\t\t\t\tinputRef.current.files = event.dataTransfer.files;\n\t\t\t} catch {\n\t\t\t\t// 部分瀏覽器會提供唯讀的 FileList。回呼仍是檔案狀態的主要來源，\n\t\t\t\t// 觸發 change 事件則可同步更新原生驗證狀態。\n\t\t\t}\n\n\t\t\tconst drop = { event, files, handled: false };\n\t\t\tpendingDrop.current = drop;\n\t\t\tinputRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n\t\t\tpendingDrop.current = null;\n\t\t\tif (!drop.handled) {\n\t\t\t\tsetSelectedFiles(files);\n\t\t\t\tonFilesChange?.(files, { source: \"drop\", event });\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\t\tsetSelectedFiles(files);\n\t\tonFilesChange?.(files, { source: \"drop\", event });\n\t};\n\n\treturn (\n\t\t<FieldFrame\n\t\t\tlabel={label}\n\t\t\tdescription={description}\n\t\t\terror={error}\n\t\t\tinvalid={invalid}\n\t\t\tdisabled={disabled}\n\t\t\treadOnly={readOnly}\n\t\t\trequired={required}\n\t\t\tname={name}\n\t\t\tsize={size}\n\t\t\tclassName={className}\n\t\t\tstyle={style}\n\t\t\trequiredIndicator={requiredIndicator}\n\t\t\tlabelId={labelId}\n\t\t\tdescriptionId={descriptionId}\n\t\t\terrorId={errorId}\n\t\t\tvalidate={validate}\n\t\t\tvalidationMode={validationMode}\n\t\t\tvalidationDebounceTime={validationDebounceTime}\n\t\t\tdirty={dirty}\n\t\t\ttouched={touched}\n\t\t\tactionsRef={actionsRef}\n\t\t>\n\t\t\t<BaseInput\n\t\t\t\t{...inputProps}\n\t\t\t\tref={inputRef}\n\t\t\t\tid={id}\n\t\t\t\ttype=\"file\"\n\t\t\t\tclassName={cx(\"lyds-drop-zone__input\", inputClassName)}\n\t\t\t\tdisabled={disabled || readOnly}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\trequired={required}\n\t\t\t\taria-invalid={invalid || undefined}\n\t\t\t\taria-labelledby={label != null ? `${labelId} ${triggerId}` : triggerId}\n\t\t\t\taria-describedby={[description != null ? descriptionId : null, selectedFiles.length > 0 ? selectionSummaryId : null, errorId].filter(Boolean).join(\" \")}\n\t\t\t\ttabIndex={-1}\n\t\t\t\tonChange={handleInputChange}\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tclassName=\"lyds-drop-zone\"\n\t\t\t\tdata-size={size}\n\t\t\t\tdata-dragging={dragging || undefined}\n\t\t\t\tdata-disabled={disabled || undefined}\n\t\t\t\tdata-readonly={readOnly || undefined}\n\t\t\t\tonDragEnter={handleDragEnter}\n\t\t\t\tonDragOver={handleDragOver}\n\t\t\t\tonDragLeave={handleDragLeave}\n\t\t\t\tonDrop={handleDrop}\n\t\t\t>\n\t\t\t\t<span className=\"lyds-drop-zone__copy\">\n\t\t\t\t\t<span className=\"lyds-drop-zone__primary\">{primaryLabel}</span>\n\t\t\t\t\t<span className=\"lyds-drop-zone__secondary\">{secondaryLabel}</span>\n\t\t\t\t</span>\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"lyds-drop-zone__button\"\n\t\t\t\t\tdisabled={disabled || readOnly}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tstartIcon={<PlusIcon aria-hidden=\"true\" weight=\"bold\" />}\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tonClick={() => inputRef.current?.click()}\n\t\t\t\t>\n\t\t\t\t\t<span id={triggerId}>{browseLabel}</span>\n\t\t\t\t</Button>\n\t\t\t\t<FileSelectionPreview accept={inputProps.accept} files={selectedFiles} invalidFileLabel={invalidFileLabel} summaryId={selectionSummaryId} />\n\t\t\t</div>\n\t\t</FieldFrame>\n\t);\n});\n"],"mappings":"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"}

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

@@ -0,0 +1,14 @@
+import { Input as BaseInput } from '@base-ui/react/input';
+import { FieldSize } from './internal.js';
+import * as React from "react";
+export interface InputProps extends Omit<BaseInput.Props, "size"> {
+    /** Linyao Design System 的控制項尺寸。原生 HTML `size` 屬性請使用 `inputSize`。 */
+    size?: FieldSize;
+    inputSize?: number;
+    invalid?: boolean;
+}
+/**
+ * 使用 Linyao Design System 樣式與 Base UI 值變更資訊的基礎文字輸入元件。
+ * 需要可見標籤、說明或錯誤訊息時，請使用 TextField。
+ */
+export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/components/forms/Input.js

@@ -0,0 +1,33 @@
+/* empty css      */
+import { withStateClassName as e } from "./internal.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { Field as r } from "@base-ui/react/field";
+import { Input as i } from "@base-ui/react/input";
+//#region src/components/forms/Input.tsx
+var a = t.forwardRef(function({ size: t = "md", inputSize: a, invalid: o, className: s, disabled: c, readOnly: l, required: u, name: d, "aria-invalid": f, ...p }, m) {
+	return /* @__PURE__ */ n(r.Root, {
+		className: "lyds-input-root",
+		name: d,
+		disabled: c,
+		invalid: o,
+		"data-size": t,
+		"data-readonly": l || void 0,
+		"data-required": u || void 0,
+		children: /* @__PURE__ */ n(i, {
+			...p,
+			ref: m,
+			className: e("lyds-input", s),
+			disabled: c,
+			readOnly: l,
+			required: u,
+			size: a,
+			"aria-invalid": o ? !0 : f,
+			"data-size": t
+		})
+	});
+});
+//#endregion
+export { a as Input };
+
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/forms/Input.tsx"],"sourcesContent":["import { Field as BaseField } from \"@base-ui/react/field\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport * as React from \"react\";\nimport \"./forms.css\";\nimport { withStateClassName, type FieldSize } from \"./internal\";\n\nexport interface InputProps extends Omit<BaseInput.Props, \"size\"> {\n\t/** Linyao Design System 的控制項尺寸。原生 HTML `size` 屬性請使用 `inputSize`。 */\n\tsize?: FieldSize;\n\tinputSize?: number;\n\tinvalid?: boolean;\n}\n\n/**\n * 使用 Linyao Design System 樣式與 Base UI 值變更資訊的基礎文字輸入元件。\n * 需要可見標籤、說明或錯誤訊息時，請使用 TextField。\n */\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(\n\t{ size = \"md\", inputSize, invalid, className, disabled, readOnly, required, name, \"aria-invalid\": ariaInvalid, ...props },\n\tref\n) {\n\treturn (\n\t\t<BaseField.Root className=\"lyds-input-root\" name={name} disabled={disabled} invalid={invalid} data-size={size} data-readonly={readOnly || undefined} data-required={required || undefined}>\n\t\t\t<BaseInput\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t\tclassName={withStateClassName<BaseInput.State>(\"lyds-input\", className)}\n\t\t\t\tdisabled={disabled}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\trequired={required}\n\t\t\t\tsize={inputSize}\n\t\t\t\taria-invalid={invalid ? true : ariaInvalid}\n\t\t\t\tdata-size={size}\n\t\t\t/>\n\t\t</BaseField.Root>\n\t);\n});\n"],"mappings":";;;;;;;AAiBA,IAAa,IAAQ,EAAM,WAAyC,SACnE,EAAE,UAAO,MAAM,cAAW,YAAS,cAAW,aAAU,aAAU,aAAU,SAAM,gBAAgB,GAAa,GAAG,KAClH,GACC;CACD,OACC,kBAAC,EAAU,MAAX;EAAgB,WAAU;EAAwB;EAAgB;EAAmB;EAAS,aAAW;EAAM,iBAAe,KAAY,KAAA;EAAW,iBAAe,KAAY,KAAA;EAC/K,UAAA,kBAAC,GAAD;GACC,GAAI;GACC;GACL,WAAW,EAAoC,cAAc,CAAS;GAC5D;GACA;GACA;GACV,MAAM;GACN,gBAAc,IAAU,KAAO;GAC/B,aAAW;EACX,CAAA;CACc,CAAA;AAElB,CAAC"}

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

@@ -0,0 +1,15 @@
+import { NumberField as BaseNumberField } from '@base-ui/react/number-field';
+import { FieldAnatomyProps } from './internal.js';
+import * as React from "react";
+type NumberRootProps = Omit<BaseNumberField.Root.Props, "className" | "disabled" | "name" | "readOnly" | "required" | "style">;
+export interface NumberFieldProps extends NumberRootProps, FieldAnatomyProps {
+    inputClassName?: BaseNumberField.Input.Props["className"];
+    inputStyle?: React.CSSProperties;
+    groupClassName?: BaseNumberField.Group.Props["className"];
+    showSteppers?: boolean;
+    incrementLabel?: string;
+    decrementLabel?: string;
+}
+/** 以 Base UI Number Field 實作、支援地區格式的數字輸入元件。 */
+export declare const NumberField: React.ForwardRefExoticComponent<Omit<NumberFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/forms/NumberField.js

@@ -0,0 +1,71 @@
+/* empty css      */
+import { FieldFrame as e, cx as t, withStateClassName as n } from "./internal.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { PlusIcon as o } from "@phosphor-icons/react/dist/csr/Plus";
+import { NumberField as s } from "@base-ui/react/number-field";
+import { MinusIcon as c } from "@phosphor-icons/react/dist/csr/Minus";
+//#region src/components/forms/NumberField.tsx
+var l = r.forwardRef(function({ label: r, description: l, error: u, invalid: d, disabled: f, readOnly: p, required: m, name: h, size: g = "md", className: _, style: v, requiredIndicator: y, validate: b, validationMode: x, validationDebounceTime: S, dirty: C, touched: w, actionsRef: T, inputClassName: E, inputStyle: D, groupClassName: O, showSteppers: k = !0, incrementLabel: A = "增加數值", decrementLabel: j = "減少數值", ...M }, N) {
+	let P = M["aria-label"], F = M["aria-labelledby"];
+	return /* @__PURE__ */ i(e, {
+		label: r,
+		description: l,
+		error: u,
+		invalid: d,
+		disabled: f,
+		readOnly: p,
+		required: m,
+		name: h,
+		size: g,
+		className: _,
+		style: v,
+		requiredIndicator: y,
+		validate: b,
+		validationMode: x,
+		validationDebounceTime: S,
+		dirty: C,
+		touched: w,
+		actionsRef: T,
+		children: /* @__PURE__ */ i(s.Root, {
+			...M,
+			ref: N,
+			className: "lyds-number-field",
+			name: h,
+			disabled: f,
+			readOnly: p,
+			required: m,
+			"data-size": g,
+			children: /* @__PURE__ */ a(s.Group, {
+				className: n("lyds-number-field__group", O),
+				children: [/* @__PURE__ */ i(s.Input, {
+					"aria-label": P,
+					"aria-labelledby": F,
+					className: n("lyds-number-field__input", E),
+					style: D
+				}), k ? /* @__PURE__ */ a("span", {
+					className: "lyds-number-field__steppers",
+					children: [/* @__PURE__ */ i(s.Decrement, {
+						className: t("lyds-number-field__stepper", "lyds-number-field__stepper--decrement"),
+						"aria-label": j,
+						children: /* @__PURE__ */ i(c, {
+							"aria-hidden": "true",
+							weight: "bold"
+						})
+					}), /* @__PURE__ */ i(s.Increment, {
+						className: t("lyds-number-field__stepper", "lyds-number-field__stepper--increment"),
+						"aria-label": A,
+						children: /* @__PURE__ */ i(o, {
+							"aria-hidden": "true",
+							weight: "bold"
+						})
+					})]
+				}) : null]
+			})
+		})
+	});
+});
+//#endregion
+export { l as NumberField };
+
+//# sourceMappingURL=NumberField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.js","names":[],"sources":["../../../src/components/forms/NumberField.tsx"],"sourcesContent":["import { NumberField as BaseNumberField } from \"@base-ui/react/number-field\";\nimport { MinusIcon } from \"@phosphor-icons/react/dist/csr/Minus\";\nimport { PlusIcon } from \"@phosphor-icons/react/dist/csr/Plus\";\nimport * as React from \"react\";\nimport \"./forms.css\";\nimport { cx, FieldFrame, withStateClassName, type FieldAnatomyProps } from \"./internal\";\n\ntype NumberRootProps = Omit<BaseNumberField.Root.Props, \"className\" | \"disabled\" | \"name\" | \"readOnly\" | \"required\" | \"style\">;\n\nexport interface NumberFieldProps extends NumberRootProps, FieldAnatomyProps {\n\tinputClassName?: BaseNumberField.Input.Props[\"className\"];\n\tinputStyle?: React.CSSProperties;\n\tgroupClassName?: BaseNumberField.Group.Props[\"className\"];\n\tshowSteppers?: boolean;\n\tincrementLabel?: string;\n\tdecrementLabel?: string;\n}\n\n/** 以 Base UI Number Field 實作、支援地區格式的數字輸入元件。 */\nexport const NumberField = React.forwardRef<HTMLDivElement, NumberFieldProps>(function NumberField(\n\t{\n\t\tlabel,\n\t\tdescription,\n\t\terror,\n\t\tinvalid,\n\t\tdisabled,\n\t\treadOnly,\n\t\trequired,\n\t\tname,\n\t\tsize = \"md\",\n\t\tclassName,\n\t\tstyle,\n\t\trequiredIndicator,\n\t\tvalidate,\n\t\tvalidationMode,\n\t\tvalidationDebounceTime,\n\t\tdirty,\n\t\ttouched,\n\t\tactionsRef,\n\t\tinputClassName,\n\t\tinputStyle,\n\t\tgroupClassName,\n\t\tshowSteppers = true,\n\t\tincrementLabel = \"增加數值\",\n\t\tdecrementLabel = \"減少數值\",\n\t\t...numberProps\n\t},\n\tref\n) {\n\tconst ariaLabel = numberProps[\"aria-label\"];\n\tconst ariaLabelledBy = numberProps[\"aria-labelledby\"];\n\n\treturn (\n\t\t<FieldFrame\n\t\t\tlabel={label}\n\t\t\tdescription={description}\n\t\t\terror={error}\n\t\t\tinvalid={invalid}\n\t\t\tdisabled={disabled}\n\t\t\treadOnly={readOnly}\n\t\t\trequired={required}\n\t\t\tname={name}\n\t\t\tsize={size}\n\t\t\tclassName={className}\n\t\t\tstyle={style}\n\t\t\trequiredIndicator={requiredIndicator}\n\t\t\tvalidate={validate}\n\t\t\tvalidationMode={validationMode}\n\t\t\tvalidationDebounceTime={validationDebounceTime}\n\t\t\tdirty={dirty}\n\t\t\ttouched={touched}\n\t\t\tactionsRef={actionsRef}\n\t\t>\n\t\t\t<BaseNumberField.Root {...numberProps} ref={ref} className=\"lyds-number-field\" name={name} disabled={disabled} readOnly={readOnly} required={required} data-size={size}>\n\t\t\t\t<BaseNumberField.Group className={withStateClassName<BaseNumberField.Group.State>(\"lyds-number-field__group\", groupClassName)}>\n\t\t\t\t\t<BaseNumberField.Input\n\t\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\t\taria-labelledby={ariaLabelledBy}\n\t\t\t\t\t\tclassName={withStateClassName<BaseNumberField.Input.State>(\"lyds-number-field__input\", inputClassName)}\n\t\t\t\t\t\tstyle={inputStyle}\n\t\t\t\t\t/>\n\t\t\t\t\t{showSteppers ? (\n\t\t\t\t\t\t<span className=\"lyds-number-field__steppers\">\n\t\t\t\t\t\t\t<BaseNumberField.Decrement className={cx(\"lyds-number-field__stepper\", \"lyds-number-field__stepper--decrement\")} aria-label={decrementLabel}>\n\t\t\t\t\t\t\t\t<MinusIcon aria-hidden=\"true\" weight=\"bold\" />\n\t\t\t\t\t\t\t</BaseNumberField.Decrement>\n\t\t\t\t\t\t\t<BaseNumberField.Increment className={cx(\"lyds-number-field__stepper\", \"lyds-number-field__stepper--increment\")} aria-label={incrementLabel}>\n\t\t\t\t\t\t\t\t<PlusIcon aria-hidden=\"true\" weight=\"bold\" />\n\t\t\t\t\t\t\t</BaseNumberField.Increment>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) : null}\n\t\t\t\t</BaseNumberField.Group>\n\t\t\t</BaseNumberField.Root>\n\t\t</FieldFrame>\n\t);\n});\n"],"mappings":";;;;;;;;AAmBA,IAAa,IAAc,EAAM,WAA6C,SAC7E,EACC,UACA,gBACA,UACA,YACA,aACA,aACA,aACA,SACA,UAAO,MACP,cACA,UACA,sBACA,aACA,mBACA,2BACA,UACA,YACA,eACA,mBACA,eACA,mBACA,kBAAe,IACf,oBAAiB,QACjB,oBAAiB,QACjB,GAAG,KAEJ,GACC;CACD,IAAM,IAAY,EAAY,eACxB,IAAiB,EAAY;CAEnC,OACC,kBAAC,GAAD;EACQ;EACM;EACN;EACE;EACC;EACA;EACA;EACJ;EACA;EACK;EACJ;EACY;EACT;EACM;EACQ;EACjB;EACE;EACG;EAEZ,UAAA,kBAAC,EAAgB,MAAjB;GAAsB,GAAI;GAAkB;GAAK,WAAU;GAA0B;GAAgB;GAAoB;GAAoB;GAAU,aAAW;GACjK,UAAA,kBAAC,EAAgB,OAAjB;IAAuB,WAAW,EAAgD,4BAA4B,CAAc;IAA5H,UAAA,CACC,kBAAC,EAAgB,OAAjB;KACC,cAAY;KACZ,mBAAiB;KACjB,WAAW,EAAgD,4BAA4B,CAAc;KACrG,OAAO;IACP,CAAA,GACA,IACA,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACC,kBAAC,EAAgB,WAAjB;MAA2B,WAAW,EAAG,8BAA8B,uCAAuC;MAAG,cAAY;MAC5H,UAAA,kBAAC,GAAD;OAAW,eAAY;OAAO,QAAO;MAAQ,CAAA;KACnB,CAAA,GAC3B,kBAAC,EAAgB,WAAjB;MAA2B,WAAW,EAAG,8BAA8B,uCAAuC;MAAG,cAAY;MAC5H,UAAA,kBAAC,GAAD;OAAU,eAAY;OAAO,QAAO;MAAQ,CAAA;KAClB,CAAA,CACtB;IACH,CAAA,IAAA,IACkB;;EACF,CAAA;CACX,CAAA;AAEd,CAAC"}

package/dist/components/forms/OTPField.d.ts

@@ -0,0 +1,15 @@
+import { OTPField as BaseOTPField } from '@base-ui/react/otp-field';
+import { FieldAnatomyProps } from './internal.js';
+import * as React from "react";
+type OTPRootProps = Omit<BaseOTPField.Root.Props, "className" | "disabled" | "name" | "readOnly" | "required" | "style">;
+export interface OTPFieldProps extends OTPRootProps, FieldAnatomyProps {
+    inputClassName?: BaseOTPField.Input.Props["className"];
+    inputStyle?: React.CSSProperties;
+    /** 第一格之後各輸入格的選用在地化無障礙標籤。 */
+    getSlotLabel?: (index: number) => string;
+    separator?: React.ReactNode;
+    separatorAfter?: readonly number[];
+}
+/** 以 Base UI OTP Field 實作的多格驗證碼輸入元件。 */
+export declare const OTPField: React.ForwardRefExoticComponent<Omit<OTPFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/forms/OTPField.js

@@ -0,0 +1,54 @@
+/* empty css      */
+import { FieldFrame as e, withStateClassName as t } from "./internal.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { OTPField as a } from "@base-ui/react/otp-field";
+//#region src/components/forms/OTPField.tsx
+var o = n.forwardRef(function({ label: o, description: s, error: c, invalid: l, disabled: u, readOnly: d, required: f, name: p, size: m = "md", className: h, style: g, requiredIndicator: _, validate: v, validationMode: y, validationDebounceTime: b, dirty: x, touched: S, actionsRef: C, inputClassName: w, inputStyle: T, getSlotLabel: E, separator: D = /* @__PURE__ */ r("span", {
+	"aria-hidden": "true",
+	children: "—"
+}), separatorAfter: O = [], length: k, ...A }, j) {
+	return /* @__PURE__ */ r(e, {
+		label: o,
+		description: s,
+		error: c,
+		invalid: l,
+		disabled: u,
+		readOnly: d,
+		required: f,
+		name: p,
+		size: m,
+		className: h,
+		style: g,
+		requiredIndicator: _,
+		validate: v,
+		validationMode: y,
+		validationDebounceTime: b,
+		dirty: x,
+		touched: S,
+		actionsRef: C,
+		children: /* @__PURE__ */ r(a.Root, {
+			...A,
+			ref: j,
+			className: "lyds-otp-field",
+			name: p,
+			disabled: u,
+			readOnly: d,
+			required: f,
+			length: k,
+			"data-size": m,
+			children: Array.from({ length: k }, (e, o) => /* @__PURE__ */ i(n.Fragment, { children: [/* @__PURE__ */ r(a.Input, {
+				className: t("lyds-otp-field__input", w),
+				style: T,
+				"aria-label": o > 0 ? E?.(o) ?? `第 ${o + 1} 個字元，共 ${k} 個` : void 0
+			}), O.includes(o + 1) && o < k - 1 ? /* @__PURE__ */ r("span", {
+				className: "lyds-otp-field__separator",
+				children: D
+			}) : null] }, o))
+		})
+	});
+});
+//#endregion
+export { o as OTPField };
+
+//# sourceMappingURL=OTPField.js.map

package/dist/components/forms/OTPField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OTPField.js","names":[],"sources":["../../../src/components/forms/OTPField.tsx"],"sourcesContent":["import { OTPField as BaseOTPField } from \"@base-ui/react/otp-field\";\nimport * as React from \"react\";\nimport \"./forms.css\";\nimport { FieldFrame, withStateClassName, type FieldAnatomyProps } from \"./internal\";\n\ntype OTPRootProps = Omit<BaseOTPField.Root.Props, \"className\" | \"disabled\" | \"name\" | \"readOnly\" | \"required\" | \"style\">;\n\nexport interface OTPFieldProps extends OTPRootProps, FieldAnatomyProps {\n\tinputClassName?: BaseOTPField.Input.Props[\"className\"];\n\tinputStyle?: React.CSSProperties;\n\t/** 第一格之後各輸入格的選用在地化無障礙標籤。 */\n\tgetSlotLabel?: (index: number) => string;\n\tseparator?: React.ReactNode;\n\tseparatorAfter?: readonly number[];\n}\n\n/** 以 Base UI OTP Field 實作的多格驗證碼輸入元件。 */\nexport const OTPField = React.forwardRef<HTMLDivElement, OTPFieldProps>(function OTPField(\n\t{\n\t\tlabel,\n\t\tdescription,\n\t\terror,\n\t\tinvalid,\n\t\tdisabled,\n\t\treadOnly,\n\t\trequired,\n\t\tname,\n\t\tsize = \"md\",\n\t\tclassName,\n\t\tstyle,\n\t\trequiredIndicator,\n\t\tvalidate,\n\t\tvalidationMode,\n\t\tvalidationDebounceTime,\n\t\tdirty,\n\t\ttouched,\n\t\tactionsRef,\n\t\tinputClassName,\n\t\tinputStyle,\n\t\tgetSlotLabel,\n\t\tseparator = <span aria-hidden=\"true\">—</span>,\n\t\tseparatorAfter = [],\n\t\tlength,\n\t\t...otpProps\n\t},\n\tref\n) {\n\treturn (\n\t\t<FieldFrame\n\t\t\tlabel={label}\n\t\t\tdescription={description}\n\t\t\terror={error}\n\t\t\tinvalid={invalid}\n\t\t\tdisabled={disabled}\n\t\t\treadOnly={readOnly}\n\t\t\trequired={required}\n\t\t\tname={name}\n\t\t\tsize={size}\n\t\t\tclassName={className}\n\t\t\tstyle={style}\n\t\t\trequiredIndicator={requiredIndicator}\n\t\t\tvalidate={validate}\n\t\t\tvalidationMode={validationMode}\n\t\t\tvalidationDebounceTime={validationDebounceTime}\n\t\t\tdirty={dirty}\n\t\t\ttouched={touched}\n\t\t\tactionsRef={actionsRef}\n\t\t>\n\t\t\t<BaseOTPField.Root {...otpProps} ref={ref} className=\"lyds-otp-field\" name={name} disabled={disabled} readOnly={readOnly} required={required} length={length} data-size={size}>\n\t\t\t\t{Array.from({ length }, (_, index) => (\n\t\t\t\t\t<React.Fragment key={index}>\n\t\t\t\t\t\t<BaseOTPField.Input\n\t\t\t\t\t\t\tclassName={withStateClassName<BaseOTPField.Input.State>(\"lyds-otp-field__input\", inputClassName)}\n\t\t\t\t\t\t\tstyle={inputStyle}\n\t\t\t\t\t\t\taria-label={index > 0 ? (getSlotLabel?.(index) ?? `第 ${index + 1} 個字元，共 ${length} 個`) : undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{separatorAfter.includes(index + 1) && index < length - 1 ? <span className=\"lyds-otp-field__separator\">{separator}</span> : null}\n\t\t\t\t\t</React.Fragment>\n\t\t\t\t))}\n\t\t\t</BaseOTPField.Root>\n\t\t</FieldFrame>\n\t);\n});\n"],"mappings":";;;;;;AAiBA,IAAa,IAAW,EAAM,WAA0C,SACvE,EACC,UACA,gBACA,UACA,YACA,aACA,aACA,aACA,SACA,UAAO,MACP,cACA,UACA,sBACA,aACA,mBACA,2BACA,UACA,YACA,eACA,mBACA,eACA,iBACA,eAAY,kBAAC,QAAD;CAAM,eAAY;CAAO,UAAA;AAAO,CAAA,GAC5C,oBAAiB,CAAC,GAClB,WACA,GAAG,KAEJ,GACC;CACD,OACC,kBAAC,GAAD;EACQ;EACM;EACN;EACE;EACC;EACA;EACA;EACJ;EACA;EACK;EACJ;EACY;EACT;EACM;EACQ;EACjB;EACE;EACG;EAEZ,UAAA,kBAAC,EAAa,MAAd;GAAmB,GAAI;GAAe;GAAK,WAAU;GAAuB;GAAgB;GAAoB;GAAoB;GAAkB;GAAQ,aAAW;GACvK,UAAA,MAAM,KAAK,EAAE,UAAO,IAAI,GAAG,MAC3B,kBAAC,EAAM,UAAP,EAAA,UAAA,CACC,kBAAC,EAAa,OAAd;IACC,WAAW,EAA6C,yBAAyB,CAAc;IAC/F,OAAO;IACP,cAAY,IAAQ,IAAK,IAAe,CAAK,KAAK,KAAK,IAAQ,EAAE,SAAS,EAAO,MAAO,KAAA;GACxF,CAAA,GACA,EAAe,SAAS,IAAQ,CAAC,KAAK,IAAQ,IAAS,IAAI,kBAAC,QAAD;IAAM,WAAU;IAA6B,UAAA;GAAgB,CAAA,IAAI,IAC9G,EAAA,GAPK,CAOL,CAChB;EACiB,CAAA;CACR,CAAA;AAEd,CAAC"}