@linyao.tw/ui 1.0.0 → 1.2.0

package/dist/components/forms/internal.js

@@ -1,15 +1,11 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { Field as n } from "@base-ui/react/field";
+"use client";
+import { cx as e } from "../../internal/class-names.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Field as r } from "@base-ui/react/field";
 //#region src/components/forms/internal.tsx
-function r(...e) {
-	return e.filter(Boolean).join(" ");
-}
-function i(e, t) {
-	return typeof t == "function" ? (n) => r(e, t(n)) : r(e, t);
-}
-function a({ children: i, label: a, description: o, error: s, invalid: c, disabled: l, readOnly: u, required: d, name: f, size: p = "md", className: m, style: h, requiredIndicator: g, labelId: _, descriptionId: v, errorId: y, validate: b, validationMode: x, validationDebounceTime: S, dirty: C, touched: w, actionsRef: T }) {
-	return /* @__PURE__ */ t(n.Root, {
-		className: r("lyds-field", m),
+function i({ children: i, label: a, description: o, error: s, invalid: c, disabled: l, readOnly: u, required: d, name: f, size: p = "md", className: m, style: h, requiredIndicator: g, labelId: _, descriptionId: v, errorId: y, validate: b, validationMode: x, validationDebounceTime: S, dirty: C, touched: w, actionsRef: T }) {
+	return /* @__PURE__ */ n(r.Root, {
+		className: e("lyds-field", m),
 		style: h,
 		name: f,
 		disabled: l,
@@ -24,38 +20,39 @@ function a({ children: i, label: a, description: o, error: s, invalid: c, disabl
 		"data-readonly": u || void 0,
 		"data-required": d || void 0,
 		children: [
-			a == null ? null : /* @__PURE__ */ t(n.Label, {
+			a == null ? null : /* @__PURE__ */ n(r.Label, {
 				id: _,
 				className: "lyds-field__label",
-				children: [/* @__PURE__ */ e("span", { children: a }), d && g != null ? /* @__PURE__ */ e("span", {
+				children: [/* @__PURE__ */ t("span", { children: a }), d && g != null ? /* @__PURE__ */ t("span", {
 					className: "lyds-field__required",
 					"aria-hidden": "true",
 					children: g
 				}) : null]
 			}),
 			i,
-			o == null ? null : /* @__PURE__ */ e(n.Description, {
+			o == null ? null : /* @__PURE__ */ t(r.Description, {
 				id: v,
 				className: "lyds-field__description",
 				children: o
 			}),
-			s == null ? /* @__PURE__ */ e(n.Error, {
-				id: y,
-				className: "lyds-field__error",
-				"aria-live": "polite",
-				"aria-atomic": "true"
-			}) : /* @__PURE__ */ e(n.Error, {
-				id: y,
-				className: "lyds-field__error",
-				match: c ? !0 : void 0,
+			/* @__PURE__ */ t("div", {
+				className: "lyds-field__error-region",
 				"aria-live": "polite",
 				"aria-atomic": "true",
-				children: s
+				children: s == null ? /* @__PURE__ */ t(r.Error, {
+					id: y,
+					className: "lyds-field__error"
+				}) : /* @__PURE__ */ t(r.Error, {
+					id: y,
+					className: "lyds-field__error",
+					match: c ? !0 : void 0,
+					children: s
+				})
 			})
 		]
 	});
 }
 //#endregion
-export { a as FieldFrame, r as cx, i as withStateClassName };
+export { i as FieldFrame };
 
 //# sourceMappingURL=internal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"internal.js","names":[],"sources":["../../../src/components/forms/internal.tsx"],"sourcesContent":["import { Field as BaseField } from \"@base-ui/react/field\";\nimport type * as React from \"react\";\n\nexport type FieldSize = \"sm\" | \"md\" | \"lg\";\n\nexport type FieldValidationProps = Pick<BaseField.Root.Props, \"actionsRef\" | \"dirty\" | \"touched\" | \"validate\" | \"validationDebounceTime\" | \"validationMode\">;\n\nexport interface FieldAnatomyProps extends FieldValidationProps {\n\t/** 欄位的可見標籤。省略時，請在控制項提供 `aria-label`。 */\n\tlabel?: React.ReactNode;\n\t/** 透過 Base UI Field 與控制項關聯的補充說明。 */\n\tdescription?: React.ReactNode;\n\t/** 透過 Base UI Field 與控制項關聯的驗證訊息。 */\n\terror?: React.ReactNode;\n\t/** 將經外部驗證的欄位標記為無效。 */\n\tinvalid?: boolean | undefined;\n\tdisabled?: boolean | undefined;\n\treadOnly?: boolean | undefined;\n\trequired?: boolean | undefined;\n\tname?: string | undefined;\n\tsize?: FieldSize | undefined;\n\tclassName?: string | undefined;\n\tstyle?: React.CSSProperties | undefined;\n\t/** 顯示於標籤後方的選用在地化註記。 */\n\trequiredIndicator?: React.ReactNode;\n}\n\ninterface FieldFrameProps extends FieldAnatomyProps {\n\tchildren: React.ReactNode;\n\tlabelId?: string | undefined;\n\tdescriptionId?: string | undefined;\n\terrorId?: string | undefined;\n}\n\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n\treturn classes.filter(Boolean).join(\" \");\n}\n\nexport function withStateClassName<State>(baseClassName: string, className: string | ((state: State) => string | undefined) | undefined): string | ((state: State) => string) {\n\tif (typeof className === \"function\") {\n\t\treturn state => cx(baseClassName, className(state));\n\t}\n\n\treturn cx(baseClassName, className);\n}\n\nexport function FieldFrame({\n\tchildren,\n\tlabel,\n\tdescription,\n\terror,\n\tinvalid,\n\tdisabled,\n\treadOnly,\n\trequired,\n\tname,\n\tsize = \"md\",\n\tclassName,\n\tstyle,\n\trequiredIndicator,\n\tlabelId,\n\tdescriptionId,\n\terrorId,\n\tvalidate,\n\tvalidationMode,\n\tvalidationDebounceTime,\n\tdirty,\n\ttouched,\n\tactionsRef\n}: FieldFrameProps) {\n\treturn (\n\t\t<BaseField.Root\n\t\t\tclassName={cx(\"lyds-field\", className)}\n\t\t\tstyle={style}\n\t\t\tname={name}\n\t\t\tdisabled={disabled}\n\t\t\tinvalid={invalid}\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\tdata-size={size}\n\t\t\tdata-readonly={readOnly || undefined}\n\t\t\tdata-required={required || undefined}\n\t\t>\n\t\t\t{label != null ? (\n\t\t\t\t<BaseField.Label id={labelId} className=\"lyds-field__label\">\n\t\t\t\t\t<span>{label}</span>\n\t\t\t\t\t{required && requiredIndicator != null ? (\n\t\t\t\t\t\t<span className=\"lyds-field__required\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t{requiredIndicator}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) : null}\n\t\t\t\t</BaseField.Label>\n\t\t\t) : null}\n\t\t\t{children}\n\t\t\t{description != null ? (\n\t\t\t\t<BaseField.Description id={descriptionId} className=\"lyds-field__description\">\n\t\t\t\t\t{description}\n\t\t\t\t</BaseField.Description>\n\t\t\t) : null}\n\t\t\t{error != null ? (\n\t\t\t\t<BaseField.Error id={errorId} className=\"lyds-field__error\" match={invalid ? true : undefined} aria-live=\"polite\" aria-atomic=\"true\">\n\t\t\t\t\t{error}\n\t\t\t\t</BaseField.Error>\n\t\t\t) : (\n\t\t\t\t<BaseField.Error id={errorId} className=\"lyds-field__error\" aria-live=\"polite\" aria-atomic=\"true\" />\n\t\t\t)}\n\t\t</BaseField.Root>\n\t);\n}\n"],"mappings":";;;AAkCA,SAAgB,EAAG,GAAG,GAA2D;CAChF,OAAO,EAAQ,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACxC;AAEA,SAAgB,EAA0B,GAAuB,GAA6G;CAK7K,OAJI,OAAO,KAAc,cACjB,MAAS,EAAG,GAAe,EAAU,CAAK,CAAC,IAG5C,EAAG,GAAe,CAAS;AACnC;AAEA,SAAgB,EAAW,EAC1B,aACA,UACA,gBACA,UACA,YACA,aACA,aACA,aACA,SACA,UAAO,MACP,cACA,UACA,sBACA,YACA,kBACA,YACA,aACA,mBACA,2BACA,UACA,YACA,iBACmB;CACnB,OACC,kBAAC,EAAU,MAAX;EACC,WAAW,EAAG,cAAc,CAAS;EAC9B;EACD;EACI;EACD;EACC;EACM;EACQ;EACjB;EACE;EACG;EACZ,aAAW;EACX,iBAAe,KAAY,KAAA;EAC3B,iBAAe,KAAY,KAAA;EAd5B,UAAA;GAgBE,KAAS,OASN,OARH,kBAAC,EAAU,OAAX;IAAiB,IAAI;IAAS,WAAU;IAAxC,UAAA,CACC,kBAAC,QAAD,EAAA,UAAO,EAAY,CAAA,GAClB,KAAY,KAAqB,OACjC,kBAAC,QAAD;KAAM,WAAU;KAAuB,eAAY;KACjD,UAAA;IACI,CAAA,IACH,IACY;GACd,CAAA;GACH;GACA,KAAe,OAIZ,OAHH,kBAAC,EAAU,aAAX;IAAuB,IAAI;IAAe,WAAU;IAClD,UAAA;GACqB,CAAA;GAEvB,KAAS,OAKT,kBAAC,EAAU,OAAX;IAAiB,IAAI;IAAS,WAAU;IAAoB,aAAU;IAAS,eAAY;GAAQ,CAAA,IAJnG,kBAAC,EAAU,OAAX;IAAiB,IAAI;IAAS,WAAU;IAAoB,OAAO,IAAU,KAAO,KAAA;IAAW,aAAU;IAAS,eAAY;IAC5H,UAAA;GACe,CAAA;EAIH;;AAElB"}
+{"version":3,"file":"internal.js","names":[],"sources":["../../../src/components/forms/internal.tsx"],"sourcesContent":["import { Field as BaseField } from \"@base-ui/react/field\";\nimport type * as React from \"react\";\n\nimport { cx } from \"@/internal\";\n\nexport type FieldSize = \"sm\" | \"md\" | \"lg\";\n\nexport type FieldValidationProps = Pick<BaseField.Root.Props, \"actionsRef\" | \"dirty\" | \"touched\" | \"validate\" | \"validationDebounceTime\" | \"validationMode\">;\n\nexport interface FieldAnatomyProps extends FieldValidationProps {\n\t/** 欄位的可見標籤。省略時，請在控制項提供 `aria-label`。 */\n\tlabel?: React.ReactNode;\n\t/** 透過 Base UI Field 與控制項關聯的補充說明。 */\n\tdescription?: React.ReactNode;\n\t/** 透過 Base UI Field 與控制項關聯的驗證訊息。 */\n\terror?: React.ReactNode;\n\t/** 將經外部驗證的欄位標記為無效。 */\n\tinvalid?: boolean | undefined;\n\tdisabled?: boolean | undefined;\n\treadOnly?: boolean | undefined;\n\trequired?: boolean | undefined;\n\tname?: string | undefined;\n\tsize?: FieldSize | undefined;\n\tclassName?: string | undefined;\n\tstyle?: React.CSSProperties | undefined;\n\t/** 顯示於標籤後方的選用在地化註記。 */\n\trequiredIndicator?: React.ReactNode;\n}\n\ninterface FieldFrameProps extends FieldAnatomyProps {\n\tchildren: React.ReactNode;\n\tlabelId?: string | undefined;\n\tdescriptionId?: string | undefined;\n\terrorId?: string | undefined;\n}\n\nexport function FieldFrame({\n\tchildren,\n\tlabel,\n\tdescription,\n\terror,\n\tinvalid,\n\tdisabled,\n\treadOnly,\n\trequired,\n\tname,\n\tsize = \"md\",\n\tclassName,\n\tstyle,\n\trequiredIndicator,\n\tlabelId,\n\tdescriptionId,\n\terrorId,\n\tvalidate,\n\tvalidationMode,\n\tvalidationDebounceTime,\n\tdirty,\n\ttouched,\n\tactionsRef\n}: FieldFrameProps) {\n\treturn (\n\t\t<BaseField.Root\n\t\t\tclassName={cx(\"lyds-field\", className)}\n\t\t\tstyle={style}\n\t\t\tname={name}\n\t\t\tdisabled={disabled}\n\t\t\tinvalid={invalid}\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\tdata-size={size}\n\t\t\tdata-readonly={readOnly || undefined}\n\t\t\tdata-required={required || undefined}\n\t\t>\n\t\t\t{label != null ? (\n\t\t\t\t<BaseField.Label id={labelId} className=\"lyds-field__label\">\n\t\t\t\t\t<span>{label}</span>\n\t\t\t\t\t{required && requiredIndicator != null ? (\n\t\t\t\t\t\t<span className=\"lyds-field__required\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t{requiredIndicator}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) : null}\n\t\t\t\t</BaseField.Label>\n\t\t\t) : null}\n\t\t\t{children}\n\t\t\t{description != null ? (\n\t\t\t\t<BaseField.Description id={descriptionId} className=\"lyds-field__description\">\n\t\t\t\t\t{description}\n\t\t\t\t</BaseField.Description>\n\t\t\t) : null}\n\t\t\t{/*\n\t\t\t * Base UI renders nothing until the field is invalid, so putting `aria-live` on the\n\t\t\t * error itself created the live region at the same moment it filled — and a screen\n\t\t\t * reader that was not already watching the node has nothing to compare against, so\n\t\t\t * the first message is the one most likely to be dropped. The region is a separate\n\t\t\t * element that is always mounted; only its contents change.\n\t\t\t */}\n\t\t\t<div className=\"lyds-field__error-region\" aria-live=\"polite\" aria-atomic=\"true\">\n\t\t\t\t{error != null ? (\n\t\t\t\t\t<BaseField.Error id={errorId} className=\"lyds-field__error\" match={invalid ? true : undefined}>\n\t\t\t\t\t\t{error}\n\t\t\t\t\t</BaseField.Error>\n\t\t\t\t) : (\n\t\t\t\t\t<BaseField.Error id={errorId} className=\"lyds-field__error\" />\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</BaseField.Root>\n\t);\n}\n"],"mappings":";;;;;AAoCA,SAAgB,EAAW,EAC1B,aACA,UACA,gBACA,UACA,YACA,aACA,aACA,aACA,SACA,UAAO,MACP,cACA,UACA,sBACA,YACA,kBACA,YACA,aACA,mBACA,2BACA,UACA,YACA,iBACmB;CACnB,OACC,kBAAC,EAAU,MAAX;EACC,WAAW,EAAG,cAAc,CAAS;EAC9B;EACD;EACI;EACD;EACC;EACM;EACQ;EACjB;EACE;EACG;EACZ,aAAW;EACX,iBAAe,KAAY,KAAA;EAC3B,iBAAe,KAAY,KAAA;EAd5B,UAAA;GAgBE,KAAS,OASN,OARH,kBAAC,EAAU,OAAX;IAAiB,IAAI;IAAS,WAAU;IAAxC,UAAA,CACC,kBAAC,QAAD,EAAA,UAAO,EAAY,CAAA,GAClB,KAAY,KAAqB,OACjC,kBAAC,QAAD;KAAM,WAAU;KAAuB,eAAY;KACjD,UAAA;IACI,CAAA,IACH,IACY;GACd,CAAA;GACH;GACA,KAAe,OAIZ,OAHH,kBAAC,EAAU,aAAX;IAAuB,IAAI;IAAe,WAAU;IAClD,UAAA;GACqB,CAAA;GASxB,kBAAC,OAAD;IAAK,WAAU;IAA2B,aAAU;IAAS,eAAY;IACvE,UAAA,KAAS,OAKT,kBAAC,EAAU,OAAX;KAAiB,IAAI;KAAS,WAAU;IAAqB,CAAA,IAJ7D,kBAAC,EAAU,OAAX;KAAiB,IAAI;KAAS,WAAU;KAAoB,OAAO,IAAU,KAAO,KAAA;KAClF,UAAA;IACe,CAAA;GAId,CAAA;EACU;;AAElB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.js","names":[],"sources":["../../../src/components/forms/number-field.tsx"],"sourcesContent":["import { cx, withStateClassName } from \"@/internal\";\nimport { useMessages } from \"@/intl\";\nimport { 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 { FieldFrame, type FieldAnatomyProps } from \"./internal\";\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 messages = useMessages();\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 ?? messages.numberFieldDecrement}>\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 ?? messages.numberFieldIncrement}>\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":";;;;;;;;;;;AAoBA,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,mBACA,mBACA,GAAG,KAEJ,GACC;CACD,IAAM,IAAW,EAAY,GACvB,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,KAAkB,EAAS;MACvJ,UAAA,kBAAC,GAAD;OAAW,eAAY;OAAO,QAAO;MAAQ,CAAA;KACnB,CAAA,GAC3B,kBAAC,EAAgB,WAAjB;MAA2B,WAAW,EAAG,8BAA8B,uCAAuC;MAAG,cAAY,KAAkB,EAAS;MACvJ,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/otp-field.js

@@ -0,0 +1,58 @@
+"use client";
+/* empty css      */
+import { withStateClassName 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 { OTPField as o } from "@base-ui/react/otp-field";
+//#region src/components/forms/otp-field.tsx
+var s = r.forwardRef(function({ label: s, 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, separator: O = /* @__PURE__ */ i("span", {
+	"aria-hidden": "true",
+	children: "—"
+}), separatorAfter: k = [], length: A, ...j }, M) {
+	let N = t();
+	return /* @__PURE__ */ i(n, {
+		label: s,
+		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__ */ i(o.Root, {
+			...j,
+			ref: M,
+			className: "lyds-otp-field",
+			name: m,
+			disabled: d,
+			readOnly: f,
+			required: p,
+			length: A,
+			"data-size": h,
+			children: Array.from({ length: A }, (t, n) => /* @__PURE__ */ a(r.Fragment, { children: [/* @__PURE__ */ i(o.Input, {
+				className: e("lyds-otp-field__input", T),
+				style: E,
+				"aria-label": n > 0 ? D?.(n) ?? N.codeSlotLabel(n + 1, A) : void 0
+			}), k.includes(n + 1) && n < A - 1 ? /* @__PURE__ */ i("span", {
+				className: "lyds-otp-field__separator",
+				children: O
+			}) : null] }, n))
+		})
+	});
+});
+//#endregion
+export { s as OTPField };
+
+//# sourceMappingURL=otp-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"otp-field.js","names":[],"sources":["../../../src/components/forms/otp-field.tsx"],"sourcesContent":["import { 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, type FieldAnatomyProps } from \"./internal\";\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\tconst messages = useMessages();\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) ?? messages.codeSlotLabel(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":";;;;;;;;;AAkBA,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,IAAM,IAAW,EAAY;CAE7B,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,EAAS,cAAc,IAAQ,GAAG,CAAM,IAAK,KAAA;GAC/F,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"}

package/dist/components/forms/{TextField.d.ts → text-field.d.ts}

@@ -34,6 +34,11 @@ export interface SearchFieldProps extends Omit<TextFieldProps, "startAdornment"
 }
 export declare const SearchField: React.ForwardRefExoticComponent<Omit<SearchFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export interface PasswordFieldProps extends Omit<TextFieldProps, "endAdornment" | "type"> {
+    /**
+     * Left to the caller. A sign-in form wants `current-password`, a sign-up or change-password
+     * form wants `new-password`, and guessing either one hands the browser the wrong value.
+     */
+    autoComplete?: string;
     visible?: boolean;
     defaultVisible?: boolean;
     onVisibilityChange?: (visible: boolean) => void;

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

@@ -0,0 +1,201 @@
+"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, jsxs as o } from "react/jsx-runtime";
+import { Field as s } from "@base-ui/react/field";
+import { Input as c } from "@base-ui/react/input";
+import { EyeIcon as l } from "@phosphor-icons/react/dist/csr/Eye";
+import { EyeSlashIcon as u } from "@phosphor-icons/react/dist/csr/EyeSlash";
+import { MagnifyingGlassIcon as d } from "@phosphor-icons/react/dist/csr/MagnifyingGlass";
+//#region src/components/forms/text-field.tsx
+function f({ forwardedRef: n, countrySelector: i, countrySelectorClassName: s, countrySelectorStyle: l, label: u, description: d, error: f, invalid: p, disabled: m, readOnly: h, required: g, name: _, size: v = "md", className: y, style: b, requiredIndicator: x, validate: S, validationMode: C, validationDebounceTime: w, dirty: T, touched: E, actionsRef: D, inputClassName: O, inputStyle: k, inputSize: A, startAdornment: j, endAdornment: M, technical: N, "aria-invalid": P, ...F }) {
+	let I = /* @__PURE__ */ o("div", {
+		className: e("lyds-field__control-frame", i != null && "lyds-phone-field__input-frame"),
+		"data-size": v,
+		"data-technical": N || void 0,
+		children: [
+			j == null ? null : /* @__PURE__ */ a("span", {
+				className: "lyds-field__adornment lyds-field__adornment--start",
+				children: j
+			}),
+			/* @__PURE__ */ a(c, {
+				...F,
+				ref: n,
+				className: t("lyds-field__input", O),
+				style: k,
+				disabled: m,
+				readOnly: h,
+				required: g,
+				size: A,
+				"aria-invalid": p ? !0 : P
+			}),
+			M == null ? null : /* @__PURE__ */ a("span", {
+				className: "lyds-field__adornment lyds-field__adornment--end",
+				children: M
+			})
+		]
+	});
+	return /* @__PURE__ */ a(r, {
+		label: u,
+		description: d,
+		error: f,
+		invalid: p,
+		disabled: m,
+		readOnly: h,
+		required: g,
+		name: _,
+		size: v,
+		className: y,
+		style: b,
+		requiredIndicator: x,
+		validate: S,
+		validationMode: C,
+		validationDebounceTime: w,
+		dirty: T,
+		touched: E,
+		actionsRef: D,
+		children: i == null ? I : /* @__PURE__ */ o("div", {
+			className: "lyds-phone-field",
+			children: [/* @__PURE__ */ a("span", {
+				className: e("lyds-phone-field__country", s),
+				style: l,
+				"aria-disabled": m || h || void 0,
+				inert: m || h || void 0,
+				"data-invalid": p || void 0,
+				children: i
+			}), I]
+		})
+	});
+}
+var p = i.forwardRef(function(e, t) {
+	return /* @__PURE__ */ a(f, {
+		...e,
+		forwardedRef: t
+	});
+}), m = i.forwardRef(function({ size: t = "md", invalid: n, disabled: r, readOnly: i, required: o, name: c, value: l, defaultValue: u, onValueChange: d, className: f, style: p, "aria-invalid": m, ...h }, g) {
+	return /* @__PURE__ */ a(s.Root, {
+		className: "lyds-input-root",
+		name: c,
+		disabled: r,
+		invalid: n,
+		"data-size": t,
+		"data-readonly": i || void 0,
+		"data-required": o || void 0,
+		children: /* @__PURE__ */ a(s.Control, {
+			ref: g,
+			render: /* @__PURE__ */ a("textarea", { ...h }),
+			className: e("lyds-textarea", f),
+			style: p,
+			disabled: r,
+			readOnly: i,
+			required: o,
+			value: l,
+			defaultValue: u,
+			onValueChange: d,
+			"aria-invalid": n ? !0 : m,
+			"data-size": t
+		})
+	});
+}), h = i.forwardRef(function({ label: t, description: n, error: i, invalid: o, disabled: c, readOnly: l, required: u, name: d, size: f = "md", className: p, style: m, requiredIndicator: h, validate: g, validationMode: _, validationDebounceTime: v, dirty: y, touched: b, actionsRef: x, textareaClassName: S, textareaStyle: C, value: w, defaultValue: T, onValueChange: E, "aria-invalid": D, ...O }, k) {
+	return /* @__PURE__ */ a(r, {
+		label: t,
+		description: n,
+		error: i,
+		invalid: o,
+		disabled: c,
+		readOnly: l,
+		required: u,
+		name: d,
+		size: f,
+		className: p,
+		style: m,
+		requiredIndicator: h,
+		validate: g,
+		validationMode: _,
+		validationDebounceTime: v,
+		dirty: y,
+		touched: b,
+		actionsRef: x,
+		children: /* @__PURE__ */ a(s.Control, {
+			ref: k,
+			render: /* @__PURE__ */ a("textarea", { ...O }),
+			className: e("lyds-textarea", S),
+			style: C,
+			disabled: c,
+			readOnly: l,
+			required: u,
+			value: w,
+			defaultValue: T,
+			onValueChange: E,
+			"aria-invalid": o ? !0 : D,
+			"data-size": f
+		})
+	});
+});
+function g() {
+	return /* @__PURE__ */ a(d, {
+		"aria-hidden": "true",
+		className: "lyds-field__icon",
+		weight: "regular"
+	});
+}
+var _ = i.forwardRef(function({ searchIcon: e, autoComplete: t, ...n }, r) {
+	return /* @__PURE__ */ a(p, {
+		...n,
+		ref: r,
+		type: "search",
+		autoComplete: t ?? "off",
+		startAdornment: e ?? /* @__PURE__ */ a(g, {})
+	});
+});
+function v({ visible: e }) {
+	return a(e ? l : u, {
+		"aria-hidden": "true",
+		className: "lyds-field__icon",
+		weight: "regular"
+	});
+}
+var y = i.forwardRef(function({ visible: e, defaultVisible: t = !1, onVisibilityChange: r, showPasswordLabel: o, hidePasswordLabel: s, ...c }, l) {
+	let u = n(), [d, f] = i.useState(t), m = e ?? d, h = () => {
+		let t = !m;
+		e === void 0 && f(t), r?.(t);
+	};
+	return /* @__PURE__ */ a(p, {
+		...c,
+		ref: l,
+		type: m ? "text" : "password",
+		endAdornment: /* @__PURE__ */ a("button", {
+			className: "lyds-field__utility-button",
+			type: "button",
+			"aria-label": m ? s ?? u.passwordFieldHide : o ?? u.passwordFieldShow,
+			"aria-pressed": m,
+			onClick: h,
+			disabled: c.disabled,
+			children: /* @__PURE__ */ a(v, { visible: m })
+		})
+	});
+}), b = i.forwardRef(function({ countrySelector: e, countrySelectorClassName: t, countrySelectorStyle: n, autoComplete: r, inputMode: i, ...o }, s) {
+	let c = typeof e == "function" ? e({
+		disabled: !!o.disabled,
+		readOnly: !!o.readOnly,
+		externallyInvalid: !!o.invalid
+	}) : e, l = c != null && c !== !1;
+	return /* @__PURE__ */ a(f, {
+		...o,
+		forwardedRef: s,
+		type: "tel",
+		technical: !0,
+		autoComplete: r ?? "tel",
+		inputMode: i ?? "tel",
+		...l ? { countrySelector: c } : {},
+		...t === void 0 ? {} : { countrySelectorClassName: t },
+		...n === void 0 ? {} : { countrySelectorStyle: n }
+	});
+});
+//#endregion
+export { y as PasswordField, b as PhoneField, _ as SearchField, p as TextField, h as TextView, m as Textarea };
+
+//# sourceMappingURL=text-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.js","names":[],"sources":["../../../src/components/forms/text-field.tsx"],"sourcesContent":["import { cx, withStateClassName } from \"@/internal\";\nimport { useMessages } from \"@/intl\";\nimport { Field as BaseField } from \"@base-ui/react/field\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { EyeIcon } from \"@phosphor-icons/react/dist/csr/Eye\";\nimport { EyeSlashIcon } from \"@phosphor-icons/react/dist/csr/EyeSlash\";\nimport { MagnifyingGlassIcon } from \"@phosphor-icons/react/dist/csr/MagnifyingGlass\";\nimport * as React from \"react\";\nimport \"./forms.css\";\nimport { FieldFrame, type FieldAnatomyProps } from \"./internal\";\ntype TextFieldInputProps = Omit<BaseInput.Props, \"className\" | \"disabled\" | \"name\" | \"readOnly\" | \"required\" | \"size\" | \"style\">;\n\nexport interface TextFieldProps extends TextFieldInputProps, FieldAnatomyProps {\n\tinputClassName?: BaseInput.Props[\"className\"];\n\tinputStyle?: React.CSSProperties;\n\t/** 原生 HTML `size` 屬性，並非 Linyao Design System 的視覺尺寸。 */\n\tinputSize?: number;\n\tstartAdornment?: React.ReactNode;\n\tendAdornment?: React.ReactNode;\n\t/** 使用等寬或表格數字排版，不會修改輸入值。 */\n\ttechnical?: boolean;\n}\n\ninterface TextFieldAnatomyProps extends TextFieldProps {\n\tforwardedRef: React.ForwardedRef<HTMLInputElement>;\n\tcountrySelector?: React.ReactNode;\n\tcountrySelectorClassName?: string;\n\tcountrySelectorStyle?: React.CSSProperties;\n}\n\nfunction TextFieldAnatomy({\n\tforwardedRef,\n\tcountrySelector,\n\tcountrySelectorClassName,\n\tcountrySelectorStyle,\n\tlabel,\n\tdescription,\n\terror,\n\tinvalid,\n\tdisabled,\n\treadOnly,\n\trequired,\n\tname,\n\tsize = \"md\",\n\tclassName,\n\tstyle,\n\trequiredIndicator,\n\tvalidate,\n\tvalidationMode,\n\tvalidationDebounceTime,\n\tdirty,\n\ttouched,\n\tactionsRef,\n\tinputClassName,\n\tinputStyle,\n\tinputSize,\n\tstartAdornment,\n\tendAdornment,\n\ttechnical,\n\t\"aria-invalid\": ariaInvalid,\n\t...inputProps\n}: TextFieldAnatomyProps) {\n\tconst control = (\n\t\t<div className={cx(\"lyds-field__control-frame\", countrySelector != null && \"lyds-phone-field__input-frame\")} data-size={size} data-technical={technical || undefined}>\n\t\t\t{startAdornment != null ? <span className=\"lyds-field__adornment lyds-field__adornment--start\">{startAdornment}</span> : null}\n\t\t\t<BaseInput\n\t\t\t\t{...inputProps}\n\t\t\t\tref={forwardedRef}\n\t\t\t\tclassName={withStateClassName<BaseInput.State>(\"lyds-field__input\", inputClassName)}\n\t\t\t\tstyle={inputStyle}\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/>\n\t\t\t{endAdornment != null ? <span className=\"lyds-field__adornment lyds-field__adornment--end\">{endAdornment}</span> : null}\n\t\t</div>\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{countrySelector != null ? (\n\t\t\t\t<div className=\"lyds-phone-field\">\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName={cx(\"lyds-phone-field__country\", countrySelectorClassName)}\n\t\t\t\t\t\tstyle={countrySelectorStyle}\n\t\t\t\t\t\taria-disabled={disabled || readOnly || undefined}\n\t\t\t\t\t\tinert={disabled || readOnly || undefined}\n\t\t\t\t\t\tdata-invalid={invalid || undefined}\n\t\t\t\t\t>\n\t\t\t\t\t\t{countrySelector}\n\t\t\t\t\t</span>\n\t\t\t\t\t{control}\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tcontrol\n\t\t\t)}\n\t\t</FieldFrame>\n\t);\n}\n\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(props, ref) {\n\treturn <TextFieldAnatomy {...props} forwardedRef={ref} />;\n});\n\nexport interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"className\" | \"size\" | \"style\"> {\n\tsize?: FieldAnatomyProps[\"size\"] | undefined;\n\tinvalid?: boolean | undefined;\n\tclassName?: string | undefined;\n\tstyle?: React.CSSProperties | undefined;\n\tonValueChange?: (value: string, eventDetails: BaseField.Control.ChangeEventDetails) => void;\n}\n\nconst TextareaControl = React.forwardRef<HTMLTextAreaElement, TextareaProps>(function TextareaControl(\n\t{ size = \"md\", invalid, disabled, readOnly, required, name, value, defaultValue, onValueChange, className, style, \"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<BaseField.Control\n\t\t\t\tref={ref}\n\t\t\t\trender={<textarea {...props} />}\n\t\t\t\tclassName={cx(\"lyds-textarea\", className)}\n\t\t\t\tstyle={style}\n\t\t\t\tdisabled={disabled}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\trequired={required}\n\t\t\t\tvalue={value}\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tonValueChange={onValueChange}\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\n/** 以 Base UI 實作的獨立多行輸入控制項。 */\nexport const Textarea = TextareaControl;\n\nexport interface TextViewProps extends Omit<TextareaProps, \"className\" | \"disabled\" | \"invalid\" | \"name\" | \"readOnly\" | \"required\" | \"size\" | \"style\">, FieldAnatomyProps {\n\ttextareaClassName?: string;\n\ttextareaStyle?: React.CSSProperties;\n}\n\n/** 使用與 TextField 相同結構的完整多行欄位。 */\nexport const TextView = React.forwardRef<HTMLTextAreaElement, TextViewProps>(function TextView(\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\ttextareaClassName,\n\t\ttextareaStyle,\n\t\tvalue,\n\t\tdefaultValue,\n\t\tonValueChange,\n\t\t\"aria-invalid\": ariaInvalid,\n\t\t...textareaProps\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<BaseField.Control\n\t\t\t\tref={ref}\n\t\t\t\trender={<textarea {...textareaProps} />}\n\t\t\t\tclassName={cx(\"lyds-textarea\", textareaClassName)}\n\t\t\t\tstyle={textareaStyle}\n\t\t\t\tdisabled={disabled}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\trequired={required}\n\t\t\t\tvalue={value}\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tonValueChange={onValueChange}\n\t\t\t\taria-invalid={invalid ? true : ariaInvalid}\n\t\t\t\tdata-size={size}\n\t\t\t/>\n\t\t</FieldFrame>\n\t);\n});\n\nfunction SearchIcon() {\n\treturn <MagnifyingGlassIcon aria-hidden=\"true\" className=\"lyds-field__icon\" weight=\"regular\" />;\n}\n\nexport interface SearchFieldProps extends Omit<TextFieldProps, \"startAdornment\" | \"type\"> {\n\tsearchIcon?: React.ReactNode;\n}\n\nexport const SearchField = React.forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField({ searchIcon, autoComplete, ...props }, ref) {\n\treturn <TextField {...props} ref={ref} type=\"search\" autoComplete={autoComplete ?? \"off\"} startAdornment={searchIcon ?? <SearchIcon />} />;\n});\n\nfunction VisibilityIcon({ visible }: { visible: boolean }) {\n\treturn visible ? <EyeIcon aria-hidden=\"true\" className=\"lyds-field__icon\" weight=\"regular\" /> : <EyeSlashIcon aria-hidden=\"true\" className=\"lyds-field__icon\" weight=\"regular\" />;\n}\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, \"endAdornment\" | \"type\"> {\n\t/**\n\t * Left to the caller. A sign-in form wants `current-password`, a sign-up or change-password\n\t * form wants `new-password`, and guessing either one hands the browser the wrong value.\n\t */\n\tautoComplete?: string;\n\tvisible?: boolean;\n\tdefaultVisible?: boolean;\n\tonVisibilityChange?: (visible: boolean) => void;\n\tshowPasswordLabel?: string;\n\thidePasswordLabel?: string;\n}\n\nexport const PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n\t{ visible: visibleProp, defaultVisible = false, onVisibilityChange, showPasswordLabel, hidePasswordLabel, ...props },\n\tref\n) {\n\tconst messages = useMessages();\n\tconst [uncontrolledVisible, setUncontrolledVisible] = React.useState(defaultVisible);\n\tconst visible = visibleProp ?? uncontrolledVisible;\n\n\tconst toggleVisibility = () => {\n\t\tconst nextVisible = !visible;\n\t\tif (visibleProp === undefined) {\n\t\t\tsetUncontrolledVisible(nextVisible);\n\t\t}\n\t\tonVisibilityChange?.(nextVisible);\n\t};\n\n\treturn (\n\t\t<TextField\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t\ttype={visible ? \"text\" : \"password\"}\n\t\t\tendAdornment={\n\t\t\t\t<button\n\t\t\t\t\tclassName=\"lyds-field__utility-button\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\taria-label={visible ? (hidePasswordLabel ?? messages.passwordFieldHide) : (showPasswordLabel ?? messages.passwordFieldShow)}\n\t\t\t\t\taria-pressed={visible}\n\t\t\t\t\tonClick={toggleVisibility}\n\t\t\t\t\tdisabled={props.disabled}\n\t\t\t\t>\n\t\t\t\t\t<VisibilityIcon visible={visible} />\n\t\t\t\t</button>\n\t\t\t}\n\t\t/>\n\t);\n});\n\nexport interface PhoneFieldCountrySelectorState {\n\tdisabled: boolean;\n\treadOnly: boolean;\n\t/** 反映由外部控制的 `invalid` 屬性，不代表 Base UI 驗證器產生的狀態。 */\n\texternallyInvalid: boolean;\n}\n\nexport interface PhoneFieldProps extends Omit<TextFieldProps, \"technical\" | \"type\"> {\n\t/**\n\t * 由使用端提供的國家選擇器或其觸發按鈕。提供此插槽後，\n\t * PhoneField 會使用雙區段結構。\n\t */\n\tcountrySelector?: React.ReactNode | ((state: PhoneFieldCountrySelectorState) => React.ReactNode);\n\tcountrySelectorClassName?: string;\n\tcountrySelectorStyle?: React.CSSProperties;\n}\n\n/** 不預設格式的電話欄位。國家選擇與驗證規則由使用端負責。 */\nexport const PhoneField = React.forwardRef<HTMLInputElement, PhoneFieldProps>(function PhoneField(\n\t{ countrySelector, countrySelectorClassName, countrySelectorStyle, autoComplete, inputMode, ...props },\n\tref\n) {\n\tconst resolvedCountrySelector =\n\t\ttypeof countrySelector === \"function\"\n\t\t\t? countrySelector({\n\t\t\t\t\tdisabled: Boolean(props.disabled),\n\t\t\t\t\treadOnly: Boolean(props.readOnly),\n\t\t\t\t\texternallyInvalid: Boolean(props.invalid)\n\t\t\t\t})\n\t\t\t: countrySelector;\n\tconst hasCountrySelector = resolvedCountrySelector !== null && resolvedCountrySelector !== undefined && resolvedCountrySelector !== false;\n\n\treturn (\n\t\t<TextFieldAnatomy\n\t\t\t{...props}\n\t\t\tforwardedRef={ref}\n\t\t\ttype=\"tel\"\n\t\t\ttechnical\n\t\t\tautoComplete={autoComplete ?? \"tel\"}\n\t\t\tinputMode={inputMode ?? \"tel\"}\n\t\t\t{...(hasCountrySelector ? { countrySelector: resolvedCountrySelector } : {})}\n\t\t\t{...(countrySelectorClassName !== undefined ? { countrySelectorClassName } : {})}\n\t\t\t{...(countrySelectorStyle !== undefined ? { countrySelectorStyle } : {})}\n\t\t/>\n\t);\n});\n"],"mappings":"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"}

package/dist/components/foundations/{Avatar.js → avatar.js}

@@ -1,13 +1,16 @@
-import { mergeClassNames as e } from "./shared.js";
+"use client";
+import { cx as e } from "../../internal/class-names.js";
 import * as t from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import { Avatar as i } from "@base-ui/react/avatar";
-//#region src/components/foundations/Avatar.tsx
-function a(e) {
-	return e.trim().split(/\s+/u).slice(0, 2).map((e) => Array.from(e)[0] ?? "").join("").toUpperCase();
+//#region src/components/foundations/avatar.tsx
+var a = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]/u;
+function o(e) {
+	let t = e.trim();
+	return t.length === 0 ? "" : !/\s/u.test(t) && a.test(t) ? Array.from(t).slice(-2).join("") : t.split(/\s+/u).slice(0, 2).map((e) => Array.from(e)[0] ?? "").join("").toUpperCase();
 }
-var o = t.forwardRef(function({ src: t, alt: o, fallback: s, fallbackDelay: c, size: l = "md", variant: u = "neutral", status: d, statusLabel: f, imageProps: p, onLoadingStatusChange: m, className: h, style: g, ..._ }, v) {
-	let y = f ? `${o}, ${f}` : o;
+var s = t.forwardRef(function({ src: t, alt: a, fallback: s, fallbackDelay: c, size: l = "md", variant: u = "neutral", status: d, statusLabel: f, imageProps: p, onLoadingStatusChange: m, className: h, style: g, ..._ }, v) {
+	let y = f ? `${a}, ${f}` : a;
 	return /* @__PURE__ */ r(i.Root, {
 		..._,
 		ref: v,
@@ -28,7 +31,7 @@ var o = t.forwardRef(function({ src: t, alt: o, fallback: s, fallbackDelay: c, s
 			/* @__PURE__ */ n(i.Fallback, {
 				className: "lyds-avatar__fallback",
 				delay: c,
-				children: s ?? a(o)
+				children: s ?? o(a)
 			}),
 			d ? /* @__PURE__ */ n("span", {
 				className: "lyds-avatar__status",
@@ -38,8 +41,8 @@ var o = t.forwardRef(function({ src: t, alt: o, fallback: s, fallbackDelay: c, s
 		]
 	});
 });
-o.displayName = "Avatar";
+s.displayName = "Avatar";
 //#endregion
-export { o as Avatar };
+export { s as Avatar };
 
-//# sourceMappingURL=Avatar.js.map
+//# sourceMappingURL=avatar.js.map

package/dist/components/foundations/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","names":[],"sources":["../../../src/components/foundations/avatar.tsx"],"sourcesContent":["import { cx } from \"@/internal\";\nimport { Avatar as BaseAvatar, type AvatarImageProps, type AvatarRootProps, type ImageLoadingStatus } from \"@base-ui/react/avatar\";\nimport * as React from \"react\";\nexport type AvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type AvatarVariant = \"neutral\" | \"accent\";\nexport type AvatarStatus = \"online\" | \"away\" | \"busy\" | \"offline\";\n\nexport interface AvatarBaseProps extends Omit<AvatarRootProps, \"children\" | \"className\" | \"style\"> {\n\tsrc?: string;\n\talt: string;\n\tfallback?: React.ReactNode;\n\tfallbackDelay?: number;\n\tsize?: AvatarSize;\n\tvariant?: AvatarVariant;\n\timageProps?: Omit<AvatarImageProps, \"alt\" | \"className\" | \"onLoadingStatusChange\" | \"src\"> & { className?: string };\n\tonLoadingStatusChange?: (status: ImageLoadingStatus) => void;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n}\n\nexport type AvatarProps = AvatarBaseProps & ({ status?: never; statusLabel?: never } | { status: AvatarStatus; statusLabel: string });\n\n/** Han, Hiragana, Katakana and Hangul — the scripts that write a personal name without spaces. */\nconst UNSPACED_NAME_SCRIPT = /[\\p{Script=Han}\\p{Script=Hiragana}\\p{Script=Katakana}\\p{Script=Hangul}]/u;\n\n/**\n * A spaced name reduces to the first letter of its first two words. A CJK name has no spaces to\n * split on, so taking the leading character would leave only the family name — 「王小明」would\n * render as 「王」. These scripts put the given name last, so the trailing characters are the\n * part that identifies the person, and two of them is what fits the smallest avatar.\n */\nfunction getInitials(label: string): string {\n\tconst trimmed = label.trim();\n\tif (trimmed.length === 0) return \"\";\n\n\tif (!/\\s/u.test(trimmed) && UNSPACED_NAME_SCRIPT.test(trimmed)) {\n\t\treturn Array.from(trimmed).slice(-2).join(\"\");\n\t}\n\n\treturn trimmed\n\t\t.split(/\\s+/u)\n\t\t.slice(0, 2)\n\t\t.map(part => Array.from(part)[0] ?? \"\")\n\t\t.join(\"\")\n\t\t.toUpperCase();\n}\n\nexport const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(\n\t{ src, alt, fallback, fallbackDelay, size = \"md\", variant = \"neutral\", status, statusLabel, imageProps, onLoadingStatusChange, className, style, ...props },\n\tref\n) {\n\tconst accessibleLabel = statusLabel ? `${alt}, ${statusLabel}` : alt;\n\n\treturn (\n\t\t<BaseAvatar.Root\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t\taria-label={props[\"aria-label\"] ?? accessibleLabel}\n\t\t\trole={props.role ?? \"img\"}\n\t\t\tdata-size={size}\n\t\t\tdata-variant={variant}\n\t\t\tclassName={cx(\"lyds-avatar\", className)}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{src ? <BaseAvatar.Image {...imageProps} src={src} alt=\"\" className={cx(\"lyds-avatar__image\", imageProps?.className)} onLoadingStatusChange={onLoadingStatusChange} /> : null}\n\t\t\t<BaseAvatar.Fallback className=\"lyds-avatar__fallback\" delay={fallbackDelay}>\n\t\t\t\t{fallback ?? getInitials(alt)}\n\t\t\t</BaseAvatar.Fallback>\n\t\t\t{status ? <span className=\"lyds-avatar__status\" data-status={status} aria-hidden=\"true\" /> : null}\n\t\t</BaseAvatar.Root>\n\t);\n});\n\nAvatar.displayName = \"Avatar\";\n"],"mappings":";;;;;;AAuBA,IAAM,IAAuB;AAQ7B,SAAS,EAAY,GAAuB;CAC3C,IAAM,IAAU,EAAM,KAAK;CAO3B,OANI,EAAQ,WAAW,IAAU,KAE7B,CAAC,MAAM,KAAK,CAAO,KAAK,EAAqB,KAAK,CAAO,IACrD,MAAM,KAAK,CAAO,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,EAAE,IAGtC,EACL,MAAM,MAAM,CAAC,CACb,MAAM,GAAG,CAAC,CAAC,CACX,KAAI,MAAQ,MAAM,KAAK,CAAI,CAAC,CAAC,MAAM,EAAE,CAAC,CACtC,KAAK,EAAE,CAAC,CACR,YAAY;AACf;AAEA,IAAa,IAAS,EAAM,WAAyC,SACpE,EAAE,QAAK,QAAK,aAAU,kBAAe,UAAO,MAAM,aAAU,WAAW,WAAQ,gBAAa,eAAY,0BAAuB,cAAW,UAAO,GAAG,KACpJ,GACC;CACD,IAAM,IAAkB,IAAc,GAAG,EAAI,IAAI,MAAgB;CAEjE,OACC,kBAAC,EAAW,MAAZ;EACC,GAAI;EACC;EACL,cAAY,EAAM,iBAAiB;EACnC,MAAM,EAAM,QAAQ;EACpB,aAAW;EACX,gBAAc;EACd,WAAW,EAAG,eAAe,CAAS;EAC/B;EARR,UAAA;GAUE,IAAM,kBAAC,EAAW,OAAZ;IAAkB,GAAI;IAAiB;IAAK,KAAI;IAAG,WAAW,EAAG,sBAAsB,GAAY,SAAS;IAA0B;GAAwB,CAAA,IAAI;GACzK,kBAAC,EAAW,UAAZ;IAAqB,WAAU;IAAwB,OAAO;IAC5D,UAAA,KAAY,EAAY,CAAG;GACR,CAAA;GACpB,IAAS,kBAAC,QAAD;IAAM,WAAU;IAAsB,eAAa;IAAQ,eAAY;GAAQ,CAAA,IAAI;EAC7E;;AAEnB,CAAC;AAED,EAAO,cAAc"}

package/dist/components/foundations/{Badge.d.ts → badge.d.ts}

@@ -1,4 +1,4 @@
-import { ComponentRenderProp, ElementProps } from './shared.js';
+import { ComponentRenderProp, ElementProps } from '../../internal/index.js';
 import * as React from "react";
 export type BadgeVariant = "neutral" | "accent" | "success" | "warning" | "danger";
 export type BadgeSize = "sm" | "md";

package/dist/components/foundations/{Badge.js → badge.js}

@@ -1,8 +1,9 @@
-import { mergeClassNames as e } from "./shared.js";
+"use client";
+import { cx as e } from "../../internal/class-names.js";
 import * as t from "react";
 import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 import { useRender as a } from "@base-ui/react/use-render";
-//#region src/components/foundations/Badge.tsx
+//#region src/components/foundations/badge.tsx
 var o = t.forwardRef(function({ children: t, variant: o = "neutral", size: s = "md", render: c, className: l, ...u }, d) {
 	return a({
 		defaultTagName: "span",
@@ -29,4 +30,4 @@ o.displayName = "Badge";
 //#endregion
 export { o as Badge };
 
-//# sourceMappingURL=Badge.js.map
+//# sourceMappingURL=badge.js.map

package/dist/components/foundations/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","names":[],"sources":["../../../src/components/foundations/badge.tsx"],"sourcesContent":["import { type ComponentRenderProp, cx, type ElementProps } from \"@/internal\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport * as React from \"react\";\nexport type BadgeVariant = \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\";\nexport type BadgeSize = \"sm\" | \"md\";\n\nexport interface BadgeState extends Record<string, unknown> {\n\tsize: BadgeSize;\n\tvariant: BadgeVariant;\n}\n\nexport interface BadgeProps extends Omit<ElementProps<\"span\">, \"children\"> {\n\tchildren: React.ReactNode;\n\tvariant?: BadgeVariant;\n\tsize?: BadgeSize;\n\trender?: ComponentRenderProp<BadgeState>;\n}\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(function Badge({ children, variant = \"neutral\", size = \"md\", render, className, ...props }, ref) {\n\treturn useRender<BadgeState, HTMLSpanElement>({\n\t\tdefaultTagName: \"span\",\n\t\tref,\n\t\trender,\n\t\tstate: { size, variant },\n\t\tprops: {\n\t\t\t...props,\n\t\t\tchildren: (\n\t\t\t\t<>\n\t\t\t\t\t<span className=\"lyds-badge__indicator\" aria-hidden=\"true\" />\n\t\t\t\t\t<span className=\"lyds-badge__label\">{children}</span>\n\t\t\t\t</>\n\t\t\t),\n\t\t\tclassName: cx(\"lyds-badge\", className)\n\t\t}\n\t});\n});\n\nBadge.displayName = \"Badge\";\n"],"mappings":";;;;;;AAkBA,IAAa,IAAQ,EAAM,WAAwC,SAAe,EAAE,aAAU,aAAU,WAAW,UAAO,MAAM,WAAQ,cAAW,GAAG,KAAS,GAAK;CACnK,OAAO,EAAuC;EAC7C,gBAAgB;EAChB;EACA;EACA,OAAO;GAAE;GAAM;EAAQ;EACvB,OAAO;GACN,GAAG;GACH,UACC,kBAAA,GAAA,EAAA,UAAA,CACC,kBAAC,QAAD;IAAM,WAAU;IAAwB,eAAY;GAAQ,CAAA,GAC5D,kBAAC,QAAD;IAAM,WAAU;IAAqB;GAAe,CAAA,CACnD,EAAA,CAAA;GAEH,WAAW,EAAG,cAAc,CAAS;EACtC;CACD,CAAC;AACF,CAAC;AAED,EAAM,cAAc"}

package/dist/components/foundations/{Button.js → button.js}

@@ -1,8 +1,9 @@
-import { mergeClassNames as e } from "./shared.js";
+"use client";
+import { cx as e } from "../../internal/class-names.js";
 import * as t from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import { Button as i } from "@base-ui/react/button";
-//#region src/components/foundations/Button.tsx
+//#region src/components/foundations/button.tsx
 var a = t.forwardRef(function({ children: t, variant: a = "primary", size: o = "md", loading: s = !1, loadingIndicator: c, startIcon: l, endIcon: u, className: d, disabled: f = !1, focusableWhenDisabled: p, type: m, nativeButton: h, style: g, ..._ }, v) {
 	let y = f || s;
 	return /* @__PURE__ */ r(i, {
@@ -44,4 +45,4 @@ a.displayName = "Button";
 //#endregion
 export { a as Button };
 
-//# sourceMappingURL=Button.js.map
+//# sourceMappingURL=button.js.map

package/dist/components/foundations/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/foundations/button.tsx"],"sourcesContent":["import { cx } from \"@/internal\";\nimport { Button as BaseButton, type ButtonProps as BaseButtonProps } from \"@base-ui/react/button\";\nimport * as React from \"react\";\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"neutral\" | \"quiet\" | \"danger\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps extends Omit<BaseButtonProps, \"children\" | \"className\" | \"style\"> {\n\tchildren: React.ReactNode;\n\tvariant?: ButtonVariant;\n\tsize?: ButtonSize;\n\tloading?: boolean;\n\tloadingIndicator?: React.ReactNode;\n\t/** 裝飾性的前置圖示。請使用 @phosphor-icons/react；按鈕文字仍是無障礙名稱。 */\n\tstartIcon?: React.ReactNode;\n\t/** 裝飾性的後置圖示。請使用 @phosphor-icons/react；按鈕文字仍是無障礙名稱。 */\n\tendIcon?: React.ReactNode;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n}\n\nexport const Button = React.forwardRef<HTMLElement, ButtonProps>(function Button(\n\t{ children, variant = \"primary\", size = \"md\", loading = false, loadingIndicator, startIcon, endIcon, className, disabled = false, focusableWhenDisabled, type, nativeButton, style, ...props },\n\tref\n) {\n\tconst isDisabled = disabled || loading;\n\n\treturn (\n\t\t<BaseButton\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t\tnativeButton={nativeButton}\n\t\t\ttype={type ?? (nativeButton === false ? undefined : \"button\")}\n\t\t\tdisabled={isDisabled}\n\t\t\tfocusableWhenDisabled={focusableWhenDisabled ?? loading}\n\t\t\taria-busy={loading || undefined}\n\t\t\tdata-loading={loading ? \"\" : undefined}\n\t\t\tdata-variant={variant}\n\t\t\tdata-size={size}\n\t\t\tclassName={cx(\"lyds-button\", className)}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{loading ? (\n\t\t\t\t<span className=\"lyds-button__spinner\" aria-hidden=\"true\">\n\t\t\t\t\t{loadingIndicator}\n\t\t\t\t</span>\n\t\t\t) : startIcon ? (\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\">{children}</span>\n\t\t\t{!loading && endIcon ? (\n\t\t\t\t<span className=\"lyds-button__icon\" aria-hidden=\"true\">\n\t\t\t\t\t{endIcon}\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t</BaseButton>\n\t);\n});\n\nButton.displayName = \"Button\";\n"],"mappings":";;;;;;AAoBA,IAAa,IAAS,EAAM,WAAqC,SAChE,EAAE,aAAU,aAAU,WAAW,UAAO,MAAM,aAAU,IAAO,qBAAkB,cAAW,YAAS,cAAW,cAAW,IAAO,0BAAuB,SAAM,iBAAc,UAAO,GAAG,KACvL,GACC;CACD,IAAM,IAAa,KAAY;CAE/B,OACC,kBAAC,GAAD;EACC,GAAI;EACC;EACS;EACd,MAAM,MAAS,MAAiB,KAAQ,KAAA,IAAY;EACpD,UAAU;EACV,uBAAuB,KAAyB;EAChD,aAAW,KAAW,KAAA;EACtB,gBAAc,IAAU,KAAK,KAAA;EAC7B,gBAAc;EACd,aAAW;EACX,WAAW,EAAG,eAAe,CAAS;EAC/B;EAZR,UAAA;GAcE,IACA,kBAAC,QAAD;IAAM,WAAU;IAAuB,eAAY;IACjD,UAAA;GACI,CAAA,IACH,IACH,kBAAC,QAAD;IAAM,WAAU;IAAoB,eAAY;IAC9C,UAAA;GACI,CAAA,IACH;GACJ,kBAAC,QAAD;IAAM,WAAU;IAAsB;GAAe,CAAA;GACpD,CAAC,KAAW,IACZ,kBAAC,QAAD;IAAM,WAAU;IAAoB,eAAY;IAC9C,UAAA;GACI,CAAA,IACH;EACO;;AAEd,CAAC;AAED,EAAO,cAAc"}