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

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

@@ -0,0 +1,61 @@
+import { Field as BaseField } from '@base-ui/react/field';
+import { Input as BaseInput } from '@base-ui/react/input';
+import { FieldAnatomyProps } from './internal.js';
+import * as React from "react";
+type TextFieldInputProps = Omit<BaseInput.Props, "className" | "disabled" | "name" | "readOnly" | "required" | "size" | "style">;
+export interface TextFieldProps extends TextFieldInputProps, FieldAnatomyProps {
+    inputClassName?: BaseInput.Props["className"];
+    inputStyle?: React.CSSProperties;
+    /** 原生 HTML `size` 屬性，並非 Linyao Design System 的視覺尺寸。 */
+    inputSize?: number;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    /** 使用等寬或表格數字排版，不會修改輸入值。 */
+    technical?: boolean;
+}
+export declare const TextField: React.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "className" | "size" | "style"> {
+    size?: FieldAnatomyProps["size"] | undefined;
+    invalid?: boolean | undefined;
+    className?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    onValueChange?: (value: string, eventDetails: BaseField.Control.ChangeEventDetails) => void;
+}
+/** 以 Base UI 實作的獨立多行輸入控制項。 */
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export interface TextViewProps extends Omit<TextareaProps, "className" | "disabled" | "invalid" | "name" | "readOnly" | "required" | "size" | "style">, FieldAnatomyProps {
+    textareaClassName?: string;
+    textareaStyle?: React.CSSProperties;
+}
+/** 使用與 TextField 相同結構的完整多行欄位。 */
+export declare const TextView: React.ForwardRefExoticComponent<TextViewProps & React.RefAttributes<HTMLTextAreaElement>>;
+export interface SearchFieldProps extends Omit<TextFieldProps, "startAdornment" | "type"> {
+    searchIcon?: React.ReactNode;
+}
+export declare const SearchField: React.ForwardRefExoticComponent<Omit<SearchFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export interface PasswordFieldProps extends Omit<TextFieldProps, "endAdornment" | "type"> {
+    visible?: boolean;
+    defaultVisible?: boolean;
+    onVisibilityChange?: (visible: boolean) => void;
+    showPasswordLabel?: string;
+    hidePasswordLabel?: string;
+}
+export declare const PasswordField: React.ForwardRefExoticComponent<Omit<PasswordFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export interface PhoneFieldCountrySelectorState {
+    disabled: boolean;
+    readOnly: boolean;
+    /** 反映由外部控制的 `invalid` 屬性，不代表 Base UI 驗證器產生的狀態。 */
+    externallyInvalid: boolean;
+}
+export interface PhoneFieldProps extends Omit<TextFieldProps, "technical" | "type"> {
+    /**
+     * 由使用端提供的國家選擇器或其觸發按鈕。提供此插槽後，
+     * PhoneField 會使用雙區段結構。
+     */
+    countrySelector?: React.ReactNode | ((state: PhoneFieldCountrySelectorState) => React.ReactNode);
+    countrySelectorClassName?: string;
+    countrySelectorStyle?: React.CSSProperties;
+}
+/** 不預設格式的電話欄位。國家選擇與驗證規則由使用端負責。 */
+export declare const PhoneField: React.ForwardRefExoticComponent<Omit<PhoneFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/forms/TextField.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.js","names":[],"sources":["../../../src/components/forms/TextField.tsx"],"sourcesContent":["import { 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 { cx, FieldFrame, withStateClassName, type FieldAnatomyProps } from \"./internal\";\n\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\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 = \"隱藏密碼\", autoComplete, ...props },\n\tref\n) {\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\tautoComplete={autoComplete ?? \"current-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 : showPasswordLabel}\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/forms/index.d.ts

@@ -0,0 +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 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';

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

@@ -0,0 +1,33 @@
+import { Field as BaseField } from '@base-ui/react/field';
+import type * as React from "react";
+export type FieldSize = "sm" | "md" | "lg";
+export type FieldValidationProps = Pick<BaseField.Root.Props, "actionsRef" | "dirty" | "touched" | "validate" | "validationDebounceTime" | "validationMode">;
+export interface FieldAnatomyProps extends FieldValidationProps {
+    /** 欄位的可見標籤。省略時，請在控制項提供 `aria-label`。 */
+    label?: React.ReactNode;
+    /** 透過 Base UI Field 與控制項關聯的補充說明。 */
+    description?: React.ReactNode;
+    /** 透過 Base UI Field 與控制項關聯的驗證訊息。 */
+    error?: React.ReactNode;
+    /** 將經外部驗證的欄位標記為無效。 */
+    invalid?: boolean | undefined;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    required?: boolean | undefined;
+    name?: string | undefined;
+    size?: FieldSize | undefined;
+    className?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    /** 顯示於標籤後方的選用在地化註記。 */
+    requiredIndicator?: React.ReactNode;
+}
+interface FieldFrameProps extends FieldAnatomyProps {
+    children: React.ReactNode;
+    labelId?: string | undefined;
+    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 {};

package/dist/components/forms/internal.js

@@ -0,0 +1,61 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Field as n } 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),
+		style: h,
+		name: f,
+		disabled: l,
+		invalid: c,
+		validate: b,
+		validationMode: x,
+		validationDebounceTime: S,
+		dirty: C,
+		touched: w,
+		actionsRef: T,
+		"data-size": p,
+		"data-readonly": u || void 0,
+		"data-required": d || void 0,
+		children: [
+			a == null ? null : /* @__PURE__ */ t(n.Label, {
+				id: _,
+				className: "lyds-field__label",
+				children: [/* @__PURE__ */ e("span", { children: a }), d && g != null ? /* @__PURE__ */ e("span", {
+					className: "lyds-field__required",
+					"aria-hidden": "true",
+					children: g
+				}) : null]
+			}),
+			i,
+			o == null ? null : /* @__PURE__ */ e(n.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,
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: s
+			})
+		]
+	});
+}
+//#endregion
+export { a as FieldFrame, r as cx, i as withStateClassName };
+
+//# sourceMappingURL=internal.js.map

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

@@ -0,0 +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"}

package/dist/components/foundations/Avatar.d.ts

@@ -0,0 +1,33 @@
+import { AvatarImageProps, AvatarRootProps, ImageLoadingStatus } from '@base-ui/react/avatar';
+import * as React from "react";
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type AvatarVariant = "neutral" | "accent";
+export type AvatarStatus = "online" | "away" | "busy" | "offline";
+export interface AvatarBaseProps extends Omit<AvatarRootProps, "children" | "className" | "style"> {
+    src?: string;
+    alt: string;
+    fallback?: React.ReactNode;
+    fallbackDelay?: number;
+    size?: AvatarSize;
+    variant?: AvatarVariant;
+    imageProps?: Omit<AvatarImageProps, "alt" | "className" | "onLoadingStatusChange" | "src"> & {
+        className?: string;
+    };
+    onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export type AvatarProps = AvatarBaseProps & ({
+    status?: never;
+    statusLabel?: never;
+} | {
+    status: AvatarStatus;
+    statusLabel: string;
+});
+export declare const Avatar: React.ForwardRefExoticComponent<(Omit<AvatarBaseProps & {
+    status?: never;
+    statusLabel?: never;
+}, "ref"> | Omit<AvatarBaseProps & {
+    status: AvatarStatus;
+    statusLabel: string;
+}, "ref">) & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/foundations/Avatar.js

@@ -0,0 +1,45 @@
+import { mergeClassNames as e } from "./shared.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();
+}
+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;
+	return /* @__PURE__ */ r(i.Root, {
+		..._,
+		ref: v,
+		"aria-label": _["aria-label"] ?? y,
+		role: _.role ?? "img",
+		"data-size": l,
+		"data-variant": u,
+		className: e("lyds-avatar", h),
+		style: g,
+		children: [
+			t ? /* @__PURE__ */ n(i.Image, {
+				...p,
+				src: t,
+				alt: "",
+				className: e("lyds-avatar__image", p?.className),
+				onLoadingStatusChange: m
+			}) : null,
+			/* @__PURE__ */ n(i.Fallback, {
+				className: "lyds-avatar__fallback",
+				delay: c,
+				children: s ?? a(o)
+			}),
+			d ? /* @__PURE__ */ n("span", {
+				className: "lyds-avatar__status",
+				"data-status": d,
+				"aria-hidden": "true"
+			}) : null
+		]
+	});
+});
+o.displayName = "Avatar";
+//#endregion
+export { o as Avatar };
+
+//# 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 { Avatar as BaseAvatar, type AvatarImageProps, type AvatarRootProps, type ImageLoadingStatus } from \"@base-ui/react/avatar\";\nimport * as React from \"react\";\nimport { mergeClassNames } from \"./shared\";\n\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\nfunction getInitials(label: string): string {\n\treturn label\n\t\t.trim()\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={mergeClassNames(\"lyds-avatar\", className)}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{src ? <BaseAvatar.Image {...imageProps} src={src} alt=\"\" className={mergeClassNames(\"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,SAAS,EAAY,GAAuB;CAC3C,OAAO,EACL,KAAK,CAAC,CACN,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,EAAgB,eAAe,CAAS;EAC5C;EARR,UAAA;GAUE,IAAM,kBAAC,EAAW,OAAZ;IAAkB,GAAI;IAAiB;IAAK,KAAI;IAAG,WAAW,EAAgB,sBAAsB,GAAY,SAAS;IAA0B;GAAwB,CAAA,IAAI;GACtL,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

@@ -0,0 +1,15 @@
+import { ComponentRenderProp, ElementProps } from './shared.js';
+import * as React from "react";
+export type BadgeVariant = "neutral" | "accent" | "success" | "warning" | "danger";
+export type BadgeSize = "sm" | "md";
+export interface BadgeState extends Record<string, unknown> {
+    size: BadgeSize;
+    variant: BadgeVariant;
+}
+export interface BadgeProps extends Omit<ElementProps<"span">, "children"> {
+    children: React.ReactNode;
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    render?: ComponentRenderProp<BadgeState>;
+}
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/foundations/Badge.js

@@ -0,0 +1,32 @@
+import { mergeClassNames as e } from "./shared.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
+var o = t.forwardRef(function({ children: t, variant: o = "neutral", size: s = "md", render: c, className: l, ...u }, d) {
+	return a({
+		defaultTagName: "span",
+		ref: d,
+		render: c,
+		state: {
+			size: s,
+			variant: o
+		},
+		props: {
+			...u,
+			children: /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("span", {
+				className: "lyds-badge__indicator",
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ r("span", {
+				className: "lyds-badge__label",
+				children: t
+			})] }),
+			className: e("lyds-badge", l)
+		}
+	});
+});
+o.displayName = "Badge";
+//#endregion
+export { o as Badge };
+
+//# 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 { useRender } from \"@base-ui/react/use-render\";\nimport * as React from \"react\";\nimport { type ComponentRenderProp, type ElementProps, mergeClassNames } from \"./shared\";\n\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: mergeClassNames(\"lyds-badge\", className)\n\t\t}\n\t});\n});\n\nBadge.displayName = \"Badge\";\n"],"mappings":";;;;;AAmBA,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,EAAgB,cAAc,CAAS;EACnD;CACD,CAAC;AACF,CAAC;AAED,EAAM,cAAc"}

package/dist/components/foundations/Button.d.ts

@@ -0,0 +1,18 @@
+import { ButtonProps as BaseButtonProps } from '@base-ui/react/button';
+import * as React from "react";
+export type ButtonVariant = "primary" | "secondary" | "neutral" | "quiet" | "danger";
+export type ButtonSize = "sm" | "md" | "lg";
+export interface ButtonProps extends Omit<BaseButtonProps, "children" | "className" | "style"> {
+    children: React.ReactNode;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    loadingIndicator?: React.ReactNode;
+    /** 裝飾性的前置圖示。請使用 @phosphor-icons/react；按鈕文字仍是無障礙名稱。 */
+    startIcon?: React.ReactNode;
+    /** 裝飾性的後置圖示。請使用 @phosphor-icons/react；按鈕文字仍是無障礙名稱。 */
+    endIcon?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/components/foundations/Button.js

@@ -0,0 +1,47 @@
+import { mergeClassNames as e } from "./shared.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
+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, {
+		..._,
+		ref: v,
+		nativeButton: h,
+		type: m ?? (h === !1 ? void 0 : "button"),
+		disabled: y,
+		focusableWhenDisabled: p ?? s,
+		"aria-busy": s || void 0,
+		"data-loading": s ? "" : void 0,
+		"data-variant": a,
+		"data-size": o,
+		className: e("lyds-button", d),
+		style: g,
+		children: [
+			s ? /* @__PURE__ */ n("span", {
+				className: "lyds-button__spinner",
+				"aria-hidden": "true",
+				children: c
+			}) : l ? /* @__PURE__ */ n("span", {
+				className: "lyds-button__icon",
+				"aria-hidden": "true",
+				children: l
+			}) : null,
+			/* @__PURE__ */ n("span", {
+				className: "lyds-button__label",
+				children: t
+			}),
+			!s && u ? /* @__PURE__ */ n("span", {
+				className: "lyds-button__icon",
+				"aria-hidden": "true",
+				children: u
+			}) : null
+		]
+	});
+});
+a.displayName = "Button";
+//#endregion
+export { a as Button };
+
+//# 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 { Button as BaseButton, type ButtonProps as BaseButtonProps } from \"@base-ui/react/button\";\nimport * as React from \"react\";\nimport { mergeClassNames } from \"./shared\";\n\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={mergeClassNames(\"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":";;;;;AAqBA,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,EAAgB,eAAe,CAAS;EAC5C;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"}