@linyao.tw/ui 1.0.0 → 1.2.0

package/dist/components/forms/code-field.js

@@ -0,0 +1,66 @@
+"use client";
+/* empty css      */
+import { cx as e, withStateClassName as t } from "../../internal/class-names.js";
+import { useMessages as n } from "../../intl/provider.js";
+import { FieldFrame as r } from "./internal.js";
+import * as i from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { OTPField as o } from "@base-ui/react/otp-field";
+//#region src/components/forms/code-field.tsx
+function s(e, t, n) {
+	return Number.isFinite(e) ? Math.min(n, Math.max(t, Math.trunc(e))) : t;
+}
+var c = i.forwardRef(function({ label: i, description: c, error: l, invalid: u, disabled: d, readOnly: f, required: p, name: m, size: h = "md", className: g, style: _, requiredIndicator: v, validate: y, validationMode: b, validationDebounceTime: x, dirty: S, touched: C, actionsRef: w, inputClassName: T, inputStyle: E, getSlotLabel: D, length: O = 6, groupSize: k, groupClassName: A, groupStyle: j, placeholder: M, validationType: N = "numeric", ...P }, F) {
+	let I = n(), L = s(O, 2, 12), R = s(k ?? (L >= 9 ? 4 : 1), 1, L), z = R > 1, B = [], V = typeof M == "string" ? Array.from(M) : null;
+	for (let e = 0; e < L; e += R) B.push(Array.from({ length: Math.min(R, L - e) }, (t, n) => e + n));
+	let H = (n, r) => /* @__PURE__ */ a(o.Input, {
+		className: t(e("lyds-otp-field__input", "lyds-code-field__input", r && "lyds-code-field__group-input"), T),
+		style: E,
+		placeholder: typeof M == "function" ? M(n) : V?.[n],
+		"aria-label": n > 0 ? D?.(n) ?? I.codeSlotLabel(n + 1, L) : void 0
+	}, n);
+	return /* @__PURE__ */ a(r, {
+		label: i,
+		description: c,
+		error: l,
+		invalid: u,
+		disabled: d,
+		readOnly: f,
+		required: p,
+		name: m,
+		size: h,
+		className: g,
+		style: _,
+		requiredIndicator: v,
+		validate: y,
+		validationMode: b,
+		validationDebounceTime: x,
+		dirty: S,
+		touched: C,
+		actionsRef: w,
+		children: /* @__PURE__ */ a(o.Root, {
+			...P,
+			ref: F,
+			className: e("lyds-otp-field", "lyds-code-field"),
+			name: m,
+			disabled: d,
+			readOnly: f,
+			required: p,
+			length: L,
+			validationType: N,
+			"data-size": h,
+			"data-grouped": z || void 0,
+			"data-group-size": R,
+			children: B.map((t, n) => z ? /* @__PURE__ */ a("span", {
+				className: e("lyds-code-field__group", A),
+				style: j,
+				"data-group-index": n,
+				children: t.map((e) => H(e, !0))
+			}, t[0]) : H(t[0], !1))
+		})
+	});
+});
+//#endregion
+export { c as CodeField };
+
+//# sourceMappingURL=code-field.js.map

package/dist/components/forms/code-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-field.js","names":[],"sources":["../../../src/components/forms/code-field.tsx"],"sourcesContent":["import { cx, withStateClassName } from \"@/internal\";\nimport { useMessages } from \"@/intl\";\nimport { OTPField as BaseOTPField } from \"@base-ui/react/otp-field\";\nimport * as React from \"react\";\nimport \"./forms.css\";\nimport { FieldFrame } from \"./internal\";\nimport type { OTPFieldProps } from \"./otp-field\";\n\nexport interface CodeFieldProps extends Omit<OTPFieldProps, \"length\" | \"separator\" | \"separatorAfter\"> {\n\t/**\n\t * 驗證碼字元數。數值限制為 2 至 12。\n\t * @default 6\n\t */\n\tlength?: number;\n\t/**\n\t * 每個視覺群組顯示的字元數。長度為 9 至 12 時預設每四個字元一組；\n\t * 較短的驗證碼預設各自獨立。設為 1 可強制使用獨立輸入格。\n\t */\n\tgroupSize?: number;\n\tgroupClassName?: string;\n\tgroupStyle?: React.CSSProperties;\n\t/**\n\t * 空白輸入格的選用提示。字串會依序將每個字元分配至各輸入格；\n\t * 需要個別在地化或自訂時可使用函式。\n\t */\n\tplaceholder?: string | ((index: number) => string | undefined);\n}\n\nfunction constrainInteger(value: number, minimum: number, maximum: number): number {\n\tif (!Number.isFinite(value)) return minimum;\n\treturn Math.min(maximum, Math.max(minimum, Math.trunc(value)));\n}\n\n/** 以 Base UI OTP Field 實作的多格驗證碼控制項。 */\nexport const CodeField = React.forwardRef<HTMLDivElement, CodeFieldProps>(function CodeField(\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\tlength: lengthProp = 6,\n\t\tgroupSize: groupSizeProp,\n\t\tgroupClassName,\n\t\tgroupStyle,\n\t\tplaceholder,\n\t\tvalidationType = \"numeric\",\n\t\t...otpProps\n\t},\n\tref\n) {\n\tconst messages = useMessages();\n\tconst length = constrainInteger(lengthProp, 2, 12);\n\tconst defaultGroupSize = length >= 9 ? 4 : 1;\n\tconst groupSize = constrainInteger(groupSizeProp ?? defaultGroupSize, 1, length);\n\tconst grouped = groupSize > 1;\n\tconst groups: number[][] = [];\n\tconst placeholderCharacters = typeof placeholder === \"string\" ? Array.from(placeholder) : null;\n\n\tfor (let start = 0; start < length; start += groupSize) {\n\t\tgroups.push(Array.from({ length: Math.min(groupSize, length - start) }, (_, offset) => start + offset));\n\t}\n\n\tconst renderSlot = (index: number, insideGroup: boolean) => (\n\t\t<BaseOTPField.Input\n\t\t\tkey={index}\n\t\t\tclassName={withStateClassName<BaseOTPField.Input.State>(cx(\"lyds-otp-field__input\", \"lyds-code-field__input\", insideGroup && \"lyds-code-field__group-input\"), inputClassName)}\n\t\t\tstyle={inputStyle}\n\t\t\tplaceholder={typeof placeholder === \"function\" ? placeholder(index) : placeholderCharacters?.[index]}\n\t\t\taria-label={index > 0 ? (getSlotLabel?.(index) ?? messages.codeSlotLabel(index + 1, length)) : undefined}\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\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\n\t\t\t\t{...otpProps}\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"lyds-otp-field\", \"lyds-code-field\")}\n\t\t\t\tname={name}\n\t\t\t\tdisabled={disabled}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\trequired={required}\n\t\t\t\tlength={length}\n\t\t\t\tvalidationType={validationType}\n\t\t\t\tdata-size={size}\n\t\t\t\tdata-grouped={grouped || undefined}\n\t\t\t\tdata-group-size={groupSize}\n\t\t\t>\n\t\t\t\t{groups.map((indices, groupIndex) =>\n\t\t\t\t\tgrouped ? (\n\t\t\t\t\t\t<span key={indices[0]} className={cx(\"lyds-code-field__group\", groupClassName)} style={groupStyle} data-group-index={groupIndex}>\n\t\t\t\t\t\t\t{indices.map(index => renderSlot(index, true))}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) : (\n\t\t\t\t\t\trenderSlot(indices[0] as number, false)\n\t\t\t\t\t)\n\t\t\t\t)}\n\t\t\t</BaseOTPField.Root>\n\t\t</FieldFrame>\n\t);\n});\n"],"mappings":";;;;;;;;;AA4BA,SAAS,EAAiB,GAAe,GAAiB,GAAyB;CAElF,OADK,OAAO,SAAS,CAAK,IACnB,KAAK,IAAI,GAAS,KAAK,IAAI,GAAS,KAAK,MAAM,CAAK,CAAC,CAAC,IADzB;AAErC;AAGA,IAAa,IAAY,EAAM,WAA2C,SACzE,EACC,UACA,gBACA,UACA,YACA,aACA,aACA,aACA,SACA,UAAO,MACP,cACA,UACA,sBACA,aACA,mBACA,2BACA,UACA,YACA,eACA,mBACA,eACA,iBACA,QAAQ,IAAa,GACrB,WAAW,GACX,mBACA,eACA,gBACA,oBAAiB,WACjB,GAAG,KAEJ,GACC;CACD,IAAM,IAAW,EAAY,GACvB,IAAS,EAAiB,GAAY,GAAG,EAAE,GAE3C,IAAY,EAAiB,MADV,KAAU,IAAI,IAAI,IAC2B,GAAG,CAAM,GACzE,IAAU,IAAY,GACtB,IAAqB,CAAC,GACtB,IAAwB,OAAO,KAAgB,WAAW,MAAM,KAAK,CAAW,IAAI;CAE1F,KAAK,IAAI,IAAQ,GAAG,IAAQ,GAAQ,KAAS,GAC5C,EAAO,KAAK,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAW,IAAS,CAAK,EAAE,IAAI,GAAG,MAAW,IAAQ,CAAM,CAAC;CAGvG,IAAM,KAAc,GAAe,MAClC,kBAAC,EAAa,OAAd;EAEC,WAAW,EAA6C,EAAG,yBAAyB,0BAA0B,KAAe,8BAA8B,GAAG,CAAc;EAC5K,OAAO;EACP,aAAa,OAAO,KAAgB,aAAa,EAAY,CAAK,IAAI,IAAwB;EAC9F,cAAY,IAAQ,IAAK,IAAe,CAAK,KAAK,EAAS,cAAc,IAAQ,GAAG,CAAM,IAAK,KAAA;CAC/F,GALK,CAKL;CAGF,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;GACC,GAAI;GACC;GACL,WAAW,EAAG,kBAAkB,iBAAiB;GAC3C;GACI;GACA;GACA;GACF;GACQ;GAChB,aAAW;GACX,gBAAc,KAAW,KAAA;GACzB,mBAAiB;GAEhB,UAAA,EAAO,KAAK,GAAS,MACrB,IACC,kBAAC,QAAD;IAAuB,WAAW,EAAG,0BAA0B,CAAc;IAAG,OAAO;IAAY,oBAAkB;IACnH,UAAA,EAAQ,KAAI,MAAS,EAAW,GAAO,EAAI,CAAC;GACxC,GAFK,EAAQ,EAEb,IAEN,EAAW,EAAQ,IAAc,EAAK,CAExC;EACkB,CAAA;CACR,CAAA;AAEd,CAAC"}

package/dist/components/forms/{FileUpload.d.ts → file-upload.d.ts}

@@ -21,7 +21,7 @@ export interface DropZoneProps extends NativeFileInputProps, FieldAnatomyProps {
     inputClassName?: string;
     primaryLabel?: React.ReactNode;
     secondaryLabel?: React.ReactNode;
-    browseLabel?: string;
+    browseLabel?: React.ReactNode;
     invalidFileLabel?: React.ReactNode;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
     onFilesChange?: (files: readonly File[], details: DropZoneChangeDetails) => void;

package/dist/components/forms/{FileUpload.js → file-upload.js}

@@ -1,12 +1,14 @@
+"use client";
 /* empty css      */
-import { FieldFrame as e, cx as t } from "./internal.js";
-import { Button as n } from "../foundations/Button.js";
+import { cx as e } from "../../internal/class-names.js";
+import { useMessages as t } from "../../intl/provider.js";
+import { FieldFrame as n } from "./internal.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
+//#region src/components/forms/file-upload.tsx
 function l({ file: e }) {
 	let [t, n] = r.useState(null);
 	return r.useEffect(() => {
@@ -41,27 +43,28 @@ function u(e, t) {
 		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 }) {
+function d({ accept: n, files: r, invalidFileLabel: o, summaryId: c }) {
+	let d = t();
 	return /* @__PURE__ */ a("div", {
-		className: t("lyds-file-selection", n.length === 0 && "lyds-sr-only"),
+		className: e("lyds-file-selection", r.length === 0 && "lyds-sr-only"),
 		children: [/* @__PURE__ */ i("p", {
-			id: o,
+			id: c,
 			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", {
+			children: r.length > 0 ? d.fileSelectionSummary(r.length) : null
+		}), r.length > 0 ? /* @__PURE__ */ i("ul", {
 			className: "lyds-file-selection__list",
-			"aria-label": "已選擇的檔案",
-			children: n.map((t, n) => {
-				let o = u(t, e);
+			"aria-label": d.fileSelectionLabel,
+			children: r.map((e, t) => {
+				let r = u(e, n);
 				return /* @__PURE__ */ a("li", {
 					className: "lyds-file-selection__item",
-					"data-invalid": o ? void 0 : "",
+					"data-invalid": r ? void 0 : "",
 					children: [/* @__PURE__ */ i("span", {
 						className: "lyds-file-selection__visual",
-						children: t.type.startsWith("image/") ? /* @__PURE__ */ i(l, { file: t }) : /* @__PURE__ */ i(s, {
+						children: e.type.startsWith("image/") ? /* @__PURE__ */ i(l, { file: e }) : /* @__PURE__ */ i(s, {
 							"aria-hidden": "true",
 							weight: "regular"
 						})
@@ -69,14 +72,14 @@ function d({ accept: e, files: n, invalidFileLabel: r, summaryId: o }) {
 						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", {
+							title: e.name,
+							children: e.name
+						}), r ? null : /* @__PURE__ */ i("span", {
 							className: "lyds-file-selection__status",
-							children: r
+							children: o
 						})]
 					})]
-				}, `${t.name}-${t.size}-${t.lastModified}-${n}`);
+				}, `${e.name}-${e.size}-${e.lastModified}-${t}`);
 			})
 		}) : null]
 	});
@@ -93,16 +96,40 @@ function ee(e, t, n) {
 		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) => {
+function te(e, t) {
+	return (n) => {
+		t?.(n), e && n.preventDefault();
+	};
+}
+function ne({ children: t, className: n, disabled: r, htmlFor: o, id: s, readOnly: c, size: l, startIcon: u }) {
+	return /* @__PURE__ */ a("label", {
+		className: e("lyds-button", n),
+		"data-disabled": r || void 0,
+		"data-readonly": c || void 0,
+		"data-size": l,
+		"data-variant": "secondary",
+		htmlFor: o,
+		children: [u == null ? null : /* @__PURE__ */ i("span", {
+			className: "lyds-button__icon",
+			"aria-hidden": "true",
+			children: u
+		}), /* @__PURE__ */ i("span", {
+			className: "lyds-button__label",
+			id: s,
+			children: t
+		})]
+	});
+}
+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: re, ...M }, N) {
+	let P = t(), F = te(p, M.onClick), I = r.useId(), L = re ?? I, R = `${L}-label`, z = `${L}-description`, B = `${L}-error`, V = `${L}-trigger-label`, H = `${L}-selection-summary`, U = r.useRef(null), [W, G] = r.useState([]);
+	ee(U, M.form, G), r.useImperativeHandle(N, () => U.current);
+	let K = (e) => {
 		if (!(f || p) && (A?.(e), !e.defaultPrevented)) {
 			let t = Array.from(e.currentTarget.files ?? []);
-			W(t), j?.(t, e);
+			G(t), j?.(t, e);
 		}
 	};
-	return /* @__PURE__ */ i(e, {
+	return /* @__PURE__ */ i(n, {
 		label: s,
 		description: c,
 		error: l,
@@ -115,9 +142,9 @@ var f = r.forwardRef(function({ label: s, description: c, error: l, invalid: u,
 		className: _,
 		style: v,
 		requiredIndicator: y,
-		labelId: L,
-		descriptionId: R,
-		errorId: z,
+		labelId: R,
+		descriptionId: z,
+		errorId: B,
 		validate: b,
 		validationMode: x,
 		validationDebounceTime: S,
@@ -129,105 +156,100 @@ var f = r.forwardRef(function({ label: s, description: c, error: l, invalid: u,
 			"data-size": g,
 			children: [
 				/* @__PURE__ */ i(o, {
-					...N,
-					ref: H,
-					id: I,
+					...M,
+					ref: U,
+					id: L,
 					type: "file",
-					className: t("lyds-file-upload__input", E),
+					className: e("lyds-file-upload__input", E),
 					style: D,
-					disabled: f || p,
+					disabled: f,
 					readOnly: p,
+					"aria-disabled": p || void 0,
+					onClick: F,
 					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
+					"aria-labelledby": s == null ? V : `${R} ${V}`,
+					"aria-describedby": e(c != null && z, W.length > 0 && H, l != null && B) || void 0,
+					onChange: K
 				}),
-				/* @__PURE__ */ i(n, {
+				/* @__PURE__ */ i(ne, {
 					className: "lyds-file-upload__trigger",
-					disabled: f || p,
+					disabled: !!f,
+					htmlFor: L,
+					id: V,
+					readOnly: !!p,
 					size: g,
-					variant: "secondary",
-					onClick: () => H.current?.click(),
-					children: /* @__PURE__ */ i("span", {
-						id: B,
-						children: O
-					})
+					children: O ?? P.fileUploadTrigger
 				}),
 				/* @__PURE__ */ i(d, {
-					accept: N.accept,
-					files: U,
-					invalidFileLabel: k,
-					summaryId: V
+					accept: M.accept,
+					files: W,
+					invalidFileLabel: k ?? P.fileUploadInvalidFile,
+					summaryId: H
 				})
 			]
 		})
 	});
-}), 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;
+}), 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: re, onFilesChange: M, onDragEnter: N, onDragOver: P, onDragLeave: F, onDrop: I, id: L, ...R }, z) {
+	let B = t(), V = te(m, R.onClick), H = r.useId(), U = L ?? H, W = `${U}-label`, G = `${U}-description`, K = `${U}-error`, q = `${U}-trigger-label`, J = `${U}-selection-summary`, Y = r.useRef(null), [ie, X] = r.useState(!1), [ae, Z] = r.useState([]), Q = r.useRef(0), $ = r.useRef(null);
+	ee(Y, R.form, Z), r.useImperativeHandle(z, () => Y.current);
+	let oe = (e) => {
+		if (p || m || (re?.(e), e.defaultPrevented)) return;
 		let t = $.current;
 		if (t != null) {
-			t.handled = !0, Z(t.files), N?.(t.files, {
+			t.handled = !0, Z(t.files), M?.(t.files, {
 				source: "drop",
 				event: t.event
 			});
 			return;
 		}
 		let n = Array.from(e.currentTarget.files ?? []);
-		Z(n), N?.(n, {
+		Z(n), M?.(n, {
 			source: "input",
 			event: e
 		});
-	}, re = (e) => {
+	}, se = (e) => {
 		if (p || m) {
-			P?.(e);
+			N?.(e);
 			return;
 		}
-		e.preventDefault(), P?.(e), Q.current += 1, Y(!0);
-	}, ie = (e) => {
+		e.preventDefault(), N?.(e), Q.current += 1, X(!0);
+	}, ce = (e) => {
 		if (p || m) {
-			F?.(e);
+			P?.(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) => {
+		e.preventDefault(), e.dataTransfer.dropEffect = "copy", P?.(e);
+	}, le = (e) => {
+		F?.(e), !(p || m) && (Q.current = Math.max(0, Q.current - 1), Q.current === 0 && X(!1));
+	}, ue = (e) => {
 		if (p || m) {
-			L?.(e);
+			I?.(e);
 			return;
 		}
-		e.preventDefault(), L?.(e), Q.current = 0, Y(!1);
+		e.preventDefault(), I?.(e), Q.current = 0, X(!1);
 		let t = Array.from(e.dataTransfer.files ?? []);
-		if (J.current != null) {
+		if (Y.current != null) {
 			try {
-				J.current.files = e.dataTransfer.files;
+				Y.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, {
+			$.current = n, Y.current.dispatchEvent(new Event("change", { bubbles: !0 })), $.current = null, n.handled || (Z(t), M?.(t, {
 				source: "drop",
 				event: e
 			}));
 			return;
 		}
-		Z(t), N?.(t, {
+		Z(t), M?.(t, {
 			source: "drop",
 			event: e
 		});
 	};
-	return /* @__PURE__ */ a(e, {
+	return /* @__PURE__ */ a(n, {
 		label: s,
 		description: l,
 		error: u,
@@ -240,9 +262,9 @@ var f = r.forwardRef(function({ label: s, description: c, error: l, invalid: u,
 		className: v,
 		style: y,
 		requiredIndicator: b,
-		labelId: U,
-		descriptionId: W,
-		errorId: G,
+		labelId: W,
+		descriptionId: G,
+		errorId: K,
 		validate: x,
 		validationMode: S,
 		validationDebounceTime: C,
@@ -250,64 +272,59 @@ var f = r.forwardRef(function({ label: s, description: c, error: l, invalid: u,
 		touched: T,
 		actionsRef: E,
 		children: [/* @__PURE__ */ i(o, {
-			...z,
-			ref: J,
-			id: H,
+			...R,
+			ref: Y,
+			id: U,
 			type: "file",
-			className: t("lyds-drop-zone__input", D),
-			disabled: p || m,
+			className: e("lyds-drop-zone__input", D),
+			disabled: p,
 			readOnly: m,
+			"aria-disabled": m || void 0,
+			onClick: V,
 			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
+			"aria-labelledby": s == null ? q : `${W} ${q}`,
+			"aria-describedby": e(l != null && G, ae.length > 0 && J, u != null && K) || void 0,
+			onChange: oe
 		}), /* @__PURE__ */ a("div", {
 			className: "lyds-drop-zone",
 			"data-size": _,
-			"data-dragging": te || void 0,
+			"data-dragging": ie || void 0,
 			"data-disabled": p || void 0,
 			"data-readonly": m || void 0,
-			onDragEnter: re,
-			onDragOver: ie,
-			onDragLeave: ae,
-			onDrop: oe,
+			onDragEnter: se,
+			onDragOver: ce,
+			onDragLeave: le,
+			onDrop: ue,
 			children: [
 				/* @__PURE__ */ a("span", {
 					className: "lyds-drop-zone__copy",
 					children: [/* @__PURE__ */ i("span", {
 						className: "lyds-drop-zone__primary",
-						children: O
+						children: O ?? B.dropZonePrimary
 					}), /* @__PURE__ */ i("span", {
 						className: "lyds-drop-zone__secondary",
-						children: k
+						children: k ?? B.dropZoneSecondary
 					})]
 				}),
-				/* @__PURE__ */ i(n, {
+				/* @__PURE__ */ i(ne, {
 					className: "lyds-drop-zone__button",
-					disabled: p || m,
+					disabled: !!p,
+					htmlFor: U,
+					id: q,
+					readOnly: !!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
-					})
+					children: A ?? B.dropZoneBrowse
 				}),
 				/* @__PURE__ */ i(d, {
-					accept: z.accept,
-					files: X,
-					invalidFileLabel: j,
-					summaryId: q
+					accept: R.accept,
+					files: ae,
+					invalidFileLabel: j ?? B.fileUploadInvalidFile,
+					summaryId: J
 				})
 			]
 		})]
@@ -316,4 +333,4 @@ var f = r.forwardRef(function({ label: s, description: c, error: l, invalid: u,
 //#endregion
 export { p as DropZone, f as FileUpload };
 
-//# sourceMappingURL=FileUpload.js.map
+//# sourceMappingURL=file-upload.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.js","names":[],"sources":["../../../src/components/forms/file-upload.tsx"],"sourcesContent":["import { cx } from \"@/internal\";\nimport { useMessages } from \"@/intl\";\nimport { 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 \"./forms.css\";\nimport { FieldFrame, type FieldAnatomyProps } from \"./internal\";\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\tconst messages = useMessages();\n\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 ? messages.fileSelectionSummary(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={messages.fileSelectionLabel}>\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\n/**\n * HTML has no read-only file input. Disabling one would drop whatever the user already picked from\n * the submission, so a read-only field stays enabled and simply refuses to open the picker.\n */\nfunction useBlockedPicker(readOnly: boolean | undefined, onClick: React.MouseEventHandler<HTMLInputElement> | undefined) {\n\treturn (event: React.MouseEvent<HTMLInputElement>) => {\n\t\tonClick?.(event);\n\t\tif (readOnly) event.preventDefault();\n\t};\n}\n\ninterface FileTriggerProps {\n\tchildren: React.ReactNode;\n\tclassName: string;\n\tdisabled: boolean;\n\thtmlFor: string;\n\tid: string;\n\treadOnly: boolean;\n\tsize: FieldAnatomyProps[\"size\"];\n\tstartIcon?: React.ReactNode;\n}\n\n/**\n * The visible affordance is a label bound to the real file input, so the input keeps the single\n * tab stop, the accessible name and native picker activation. Rendering a button beside the input\n * instead would leave the description, error and validity on an element the keyboard cannot reach.\n */\nfunction FileTrigger({ children, className, disabled, htmlFor, id, readOnly, size, startIcon }: FileTriggerProps) {\n\treturn (\n\t\t<label className={cx(\"lyds-button\", className)} data-disabled={disabled || undefined} data-readonly={readOnly || undefined} data-size={size} data-variant=\"secondary\" htmlFor={htmlFor}>\n\t\t\t{startIcon != null ? (\n\t\t\t\t<span className=\"lyds-button__icon\" aria-hidden=\"true\">\n\t\t\t\t\t{startIcon}\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t\t<span className=\"lyds-button__label\" id={id}>\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t</label>\n\t);\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 messages = useMessages();\n\tconst blockPickerWhenReadOnly = useBlockedPicker(readOnly, inputProps.onClick);\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}\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\taria-disabled={readOnly || undefined}\n\t\t\t\t\tonClick={blockPickerWhenReadOnly}\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={cx(description != null && descriptionId, selectedFiles.length > 0 && selectionSummaryId, error != null && errorId) || undefined}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t/>\n\t\t\t\t<FileTrigger className=\"lyds-file-upload__trigger\" disabled={Boolean(disabled)} htmlFor={id} id={triggerId} readOnly={Boolean(readOnly)} size={size}>\n\t\t\t\t\t{triggerLabel ?? messages.fileUploadTrigger}\n\t\t\t\t</FileTrigger>\n\t\t\t\t<FileSelectionPreview accept={inputProps.accept} files={selectedFiles} invalidFileLabel={invalidFileLabel ?? messages.fileUploadInvalidFile} 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?: React.ReactNode;\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 messages = useMessages();\n\tconst blockPickerWhenReadOnly = useBlockedPicker(readOnly, inputProps.onClick);\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}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\taria-disabled={readOnly || undefined}\n\t\t\t\tonClick={blockPickerWhenReadOnly}\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={cx(description != null && descriptionId, selectedFiles.length > 0 && selectionSummaryId, error != null && errorId) || undefined}\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 ?? messages.dropZonePrimary}</span>\n\t\t\t\t\t<span className=\"lyds-drop-zone__secondary\">{secondaryLabel ?? messages.dropZoneSecondary}</span>\n\t\t\t\t</span>\n\t\t\t\t<FileTrigger\n\t\t\t\t\tclassName=\"lyds-drop-zone__button\"\n\t\t\t\t\tdisabled={Boolean(disabled)}\n\t\t\t\t\thtmlFor={id}\n\t\t\t\t\tid={triggerId}\n\t\t\t\t\treadOnly={Boolean(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>\n\t\t\t\t\t{browseLabel ?? messages.dropZoneBrowse}\n\t\t\t\t</FileTrigger>\n\t\t\t\t<FileSelectionPreview accept={inputProps.accept} files={selectedFiles} invalidFileLabel={invalidFileLabel ?? messages.fileUploadInvalidFile} summaryId={selectionSummaryId} />\n\t\t\t</div>\n\t\t</FieldFrame>\n\t);\n});\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
-export { CodeField, type CodeFieldProps } from './CodeField.js';
-export { DropZone, FileUpload, type DropZoneChangeDetails, type DropZoneProps, type FileUploadProps } from './FileUpload.js';
-export { Input, type InputProps } from './Input.js';
+export { CodeField, type CodeFieldProps } from './code-field.js';
+export { DropZone, FileUpload, type DropZoneChangeDetails, type DropZoneProps, type FileUploadProps } from './file-upload.js';
+export { Input, type InputProps } from './input.js';
 export type { FieldAnatomyProps, FieldSize, FieldValidationProps } from './internal.js';
-export { NumberField, type NumberFieldProps } from './NumberField.js';
-export { OTPField, type OTPFieldProps } from './OTPField.js';
-export { PasswordField, PhoneField, SearchField, TextField, TextView, Textarea, type PasswordFieldProps, type PhoneFieldCountrySelectorState, type PhoneFieldProps, type SearchFieldProps, type TextFieldProps, type TextViewProps, type TextareaProps } from './TextField.js';
+export { NumberField, type NumberFieldProps } from './number-field.js';
+export { OTPField, type OTPFieldProps } from './otp-field.js';
+export { PasswordField, PhoneField, SearchField, TextField, TextView, Textarea, type PasswordFieldProps, type PhoneFieldCountrySelectorState, type PhoneFieldProps, type SearchFieldProps, type TextFieldProps, type TextViewProps, type TextareaProps } from './text-field.js';

package/dist/components/forms/{Input.js → input.js}

@@ -1,10 +1,11 @@
+"use client";
 /* empty css      */
-import { withStateClassName as e } from "./internal.js";
+import { withStateClassName as e } from "../../internal/class-names.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
+//#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",
@@ -30,4 +31,4 @@ var a = t.forwardRef(function({ size: t = "md", inputSize: a, invalid: o, classN
 //#endregion
 export { a as Input };
 
-//# sourceMappingURL=Input.js.map
+//# 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 { withStateClassName } from \"@/internal\";\nimport { 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 { type FieldSize } from \"./internal\";\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/internal.d.ts

@@ -27,7 +27,5 @@ interface FieldFrameProps extends FieldAnatomyProps {
     descriptionId?: string | undefined;
     errorId?: string | undefined;
 }
-export declare function cx(...classes: Array<string | false | null | undefined>): string;
-export declare function withStateClassName<State>(baseClassName: string, className: string | ((state: State) => string | undefined) | undefined): string | ((state: State) => string);
 export declare function FieldFrame({ children, label, description, error, invalid, disabled, readOnly, required, name, size, className, style, requiredIndicator, labelId, descriptionId, errorId, validate, validationMode, validationDebounceTime, dirty, touched, actionsRef }: FieldFrameProps): React.JSX.Element;
 export {};