@linyao.tw/ui 1.0.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linyao.tw/ui",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Linyao Design System，麟曜數位工作室的 React 元件與設計規範套件",
   "keywords": [
     "react",
@@ -9,6 +9,7 @@
     "base-ui",
     "accessibility"
   ],
+  "homepage": "https://ui.linyao.tw/",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/linyao-tw/ui.git",
@@ -25,15 +26,16 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./styles.css": "./dist/styles.css"
+    "./styles.css": "./dist/styles.css",
+    "./fonts.css": "./dist/fonts.css"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist",
+    "LICENSE",
     "README.md",
-    "LICENSE"
+    "dist"
   ],
   "dependencies": {
     "@base-ui/react": "^1.8.0",

package/dist/components/feedback/feedback.module.js

@@ -1,42 +0,0 @@
-//#region src/components/feedback/feedback.module.css
-var e = "_feedbackPanel_f6yg4_1", t = "_rangeRoot_f6yg4_1", n = "_spinner_f6yg4_1", r = "_loader_f6yg4_1", i = "_emptyState_f6yg4_1", a = "_toastRoot_f6yg4_1", o = "_alert_f6yg4_47", s = "_banner_f6yg4_52", c = "_feedbackContent_f6yg4_58", l = "_feedbackTitle_f6yg4_63", u = "_feedbackDescription_f6yg4_70", d = "_feedbackActions_f6yg4_75", f = "_rangeHeader_f6yg4_90", p = "_rangeLabel_f6yg4_97", m = "_rangeValue_f6yg4_104", h = "_rangeTrack_f6yg4_112", g = "_rangeIndicator_f6yg4_121", _ = "_skeleton_f6yg4_167", v = "_emptyStateRail_f6yg4_202", y = "_emptyStateBody_f6yg4_206", b = "_emptyStateIcon_f6yg4_218", x = "_emptyStateEyebrow_f6yg4_229", S = "_emptyStateTitle_f6yg4_238", C = "_emptyStateDescription_f6yg4_246", w = "_emptyStateActions_f6yg4_255", T = "_toastViewport_f6yg4_263", E = "_toastSignal_f6yg4_327", D = "_toastContent_f6yg4_336", O = "_toastTitle_f6yg4_342", k = "_toastDescription_f6yg4_350", A = "_toastAction_f6yg4_357", j = "_toastClose_f6yg4_358", M = {
-	feedbackPanel: e,
-	rangeRoot: t,
-	spinner: n,
-	loader: r,
-	emptyState: i,
-	toastRoot: a,
-	alert: o,
-	banner: s,
-	feedbackContent: c,
-	feedbackTitle: l,
-	feedbackDescription: u,
-	feedbackActions: d,
-	rangeHeader: f,
-	rangeLabel: p,
-	rangeValue: m,
-	rangeTrack: h,
-	rangeIndicator: g,
-	"feedback-progress-indeterminate": "_feedback-progress-indeterminate_f6yg4_1",
-	"feedback-spin": "_feedback-spin_f6yg4_1",
-	skeleton: _,
-	"feedback-skeleton": "_feedback-skeleton_f6yg4_1",
-	emptyStateRail: v,
-	emptyStateBody: y,
-	emptyStateIcon: b,
-	emptyStateEyebrow: x,
-	emptyStateTitle: S,
-	emptyStateDescription: C,
-	emptyStateActions: w,
-	toastViewport: T,
-	toastSignal: E,
-	toastContent: D,
-	toastTitle: O,
-	toastDescription: k,
-	toastAction: A,
-	toastClose: j
-};
-//#endregion
-export { o as alert, s as banner, M as default, i as emptyState, w as emptyStateActions, y as emptyStateBody, C as emptyStateDescription, x as emptyStateEyebrow, b as emptyStateIcon, v as emptyStateRail, S as emptyStateTitle, d as feedbackActions, c as feedbackContent, u as feedbackDescription, e as feedbackPanel, l as feedbackTitle, r as loader, f as rangeHeader, g as rangeIndicator, p as rangeLabel, t as rangeRoot, h as rangeTrack, m as rangeValue, _ as skeleton, n as spinner, A as toastAction, j as toastClose, D as toastContent, k as toastDescription, a as toastRoot, E as toastSignal, O as toastTitle, T as toastViewport };
-
-//# sourceMappingURL=feedback.module.js.map

package/dist/components/feedback/feedback.module.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"feedback.module.js","names":[],"sources":["../../../src/components/feedback/feedback.module.css"],"sourcesContent":[":is(.feedbackPanel, .rangeRoot, .spinner, .loader, .emptyState, .toastRoot)[data-status=\"neutral\"] {\n\t--feedback-background: var(--status-neutral-background);\n\t--feedback-foreground: var(--status-neutral-foreground);\n\t--feedback-border: var(--status-neutral-border);\n\t--feedback-signal: var(--status-neutral-indicator);\n}\n\n:is(.feedbackPanel, .rangeRoot, .spinner, .loader, .emptyState, .toastRoot)[data-status=\"info\"] {\n\t--feedback-background: var(--status-info-background);\n\t--feedback-foreground: var(--status-info-foreground);\n\t--feedback-border: var(--status-info-border);\n\t--feedback-signal: var(--status-info-border);\n}\n\n:is(.feedbackPanel, .rangeRoot, .spinner, .loader, .emptyState, .toastRoot)[data-status=\"success\"] {\n\t--feedback-background: var(--status-success-background);\n\t--feedback-foreground: var(--status-success-foreground);\n\t--feedback-border: var(--status-success-border);\n\t--feedback-signal: var(--status-success-border);\n}\n\n:is(.feedbackPanel, .rangeRoot, .spinner, .loader, .emptyState, .toastRoot)[data-status=\"warning\"] {\n\t--feedback-background: var(--status-warning-background);\n\t--feedback-foreground: var(--status-warning-foreground);\n\t--feedback-border: var(--status-warning-border);\n\t--feedback-signal: var(--status-warning-border);\n}\n\n:is(.feedbackPanel, .rangeRoot, .spinner, .loader, .emptyState, .toastRoot)[data-status=\"danger\"] {\n\t--feedback-background: var(--status-danger-background);\n\t--feedback-foreground: var(--status-danger-foreground);\n\t--feedback-border: var(--status-danger-border);\n\t--feedback-signal: var(--status-danger-border);\n}\n\n.feedbackPanel {\n\tcolor: var(--feedback-foreground);\n\tbackground: var(--feedback-background);\n\tborder: 0;\n\tborder-radius: var(--radius-md);\n\tfont-family: var(--font-family-sans);\n\tfont-size: var(--font-size-sm);\n\tletter-spacing: var(--letter-spacing-body);\n\tline-height: var(--line-height-body);\n}\n\n.alert {\n\tmin-block-size: var(--control-height-md);\n\tpadding: var(--space-4);\n}\n\n.banner {\n\tinline-size: 100%;\n\tmin-block-size: var(--control-height-md);\n\tpadding: var(--space-4) var(--space-6);\n}\n\n.feedbackContent {\n\tdisplay: grid;\n\tgap: var(--space-1);\n}\n\n.feedbackTitle {\n\tcolor: inherit;\n\tfont-weight: var(--font-weight-semibold);\n\tletter-spacing: var(--letter-spacing-label);\n\tline-height: var(--line-height-heading);\n}\n\n.feedbackDescription {\n\tmax-inline-size: 68ch;\n\tcolor: inherit;\n}\n\n.feedbackActions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--space-2);\n\tmargin-block-start: var(--space-3);\n}\n\n.rangeRoot {\n\tdisplay: grid;\n\tgap: var(--space-2);\n\tinline-size: 100%;\n\tcolor: var(--feedback-foreground);\n\tfont-family: var(--font-family-sans);\n}\n\n.rangeHeader {\n\tdisplay: flex;\n\talign-items: baseline;\n\tjustify-content: space-between;\n\tgap: var(--space-4);\n}\n\n.rangeLabel {\n\tfont-size: var(--font-size-sm);\n\tfont-weight: var(--font-weight-semibold);\n\tletter-spacing: var(--letter-spacing-label);\n\tline-height: var(--line-height-heading);\n}\n\n.rangeValue {\n\tfont-size: var(--font-size-sm);\n\tfont-variant-numeric: tabular-nums lining-nums;\n\tfont-weight: var(--font-weight-medium);\n\tletter-spacing: var(--letter-spacing-label);\n\tline-height: var(--line-height-heading);\n}\n\n.rangeTrack {\n\tposition: relative;\n\toverflow: hidden;\n\tblock-size: var(--space-2);\n\tinline-size: 100%;\n\tbackground: var(--background-inset);\n\tborder-radius: var(--radius-round);\n}\n\n.rangeIndicator {\n\tblock-size: 100%;\n\tbackground: var(--feedback-signal);\n\tborder-radius: inherit;\n\ttransition: width var(--motion-duration-normal) var(--motion-ease-out);\n}\n\n.rangeIndicator[data-indeterminate] {\n\tinline-size: 38%;\n\tanimation: feedback-progress-indeterminate var(--motion-duration-deliberate) var(--motion-ease-in-out) infinite alternate;\n}\n\n.spinner {\n\tdisplay: inline-block;\n\tflex: none;\n\tinline-size: var(--icon-size-md);\n\tblock-size: var(--icon-size-md);\n\tcolor: var(--feedback-signal);\n\tborder: var(--border-width-strong) solid var(--divider-main);\n\tborder-block-start-color: currentColor;\n\tborder-inline-end-color: currentColor;\n\tborder-radius: var(--radius-round);\n\tanimation: feedback-spin var(--motion-duration-deliberate) var(--motion-ease-linear) infinite;\n}\n\n.spinner[data-size=\"sm\"] {\n\tinline-size: var(--icon-size-sm);\n\tblock-size: var(--icon-size-sm);\n}\n\n.spinner[data-size=\"lg\"] {\n\tinline-size: var(--icon-size-lg);\n\tblock-size: var(--icon-size-lg);\n}\n\n.loader {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: var(--space-2);\n\tcolor: var(--feedback-foreground);\n\tfont-family: var(--font-family-sans);\n\tfont-size: var(--font-size-sm);\n\tfont-weight: var(--font-weight-medium);\n\tletter-spacing: var(--letter-spacing-label);\n}\n\n.skeleton {\n\tdisplay: block;\n\tmin-block-size: var(--space-4);\n\tinline-size: 100%;\n\tbackground: linear-gradient(90deg, var(--background-inset), var(--background-secondary), var(--background-inset));\n\tbackground-size: 220% 100%;\n\tanimation: feedback-skeleton var(--motion-duration-deliberate) var(--motion-ease-linear) infinite;\n}\n\n.skeleton[data-shape=\"text\"] {\n\tblock-size: 1em;\n\tborder-radius: var(--radius-xs);\n}\n\n.skeleton[data-shape=\"rectangular\"] {\n\tmin-block-size: var(--control-height-lg);\n\tborder-radius: var(--radius-md);\n}\n\n.skeleton[data-shape=\"circular\"] {\n\tinline-size: var(--control-height-md);\n\tblock-size: var(--control-height-md);\n\tborder-radius: var(--radius-round);\n}\n\n.emptyState {\n\tmin-block-size: 15rem;\n\toverflow: hidden;\n\tcolor: var(--feedback-foreground);\n\tbackground: var(--background-elevated);\n\tborder: 0;\n\tborder-radius: var(--radius-md);\n\tfont-family: var(--font-family-sans);\n}\n\n.emptyStateRail {\n\tdisplay: none;\n}\n\n.emptyStateBody {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tmax-inline-size: 42rem;\n\tmin-block-size: inherit;\n\tmargin-inline: auto;\n\tpadding: var(--space-8);\n\ttext-align: center;\n}\n\n.emptyStateIcon {\n\tdisplay: grid;\n\tplace-items: center;\n\tinline-size: var(--control-height-lg);\n\tblock-size: var(--control-height-lg);\n\tmargin-block-end: var(--space-5);\n\tcolor: var(--feedback-signal);\n\tbackground: var(--feedback-background);\n\tborder-radius: var(--radius-md);\n}\n\n.emptyStateEyebrow {\n\tmargin-block-end: var(--space-2);\n\tcolor: var(--feedback-foreground);\n\tfont-size: var(--font-size-sm);\n\tfont-weight: var(--font-weight-medium);\n\tletter-spacing: var(--letter-spacing-label);\n\tline-height: var(--line-height-heading);\n}\n\n.emptyStateTitle {\n\tcolor: var(--text-title);\n\tfont-size: var(--font-size-xl);\n\tfont-weight: var(--font-weight-semibold);\n\tletter-spacing: var(--letter-spacing-tight);\n\tline-height: var(--line-height-heading);\n}\n\n.emptyStateDescription {\n\tmax-inline-size: 58ch;\n\tmargin-block-start: var(--space-2);\n\tcolor: var(--text-secondary);\n\tfont-size: var(--font-size-sm);\n\tletter-spacing: var(--letter-spacing-body);\n\tline-height: var(--line-height-body);\n}\n\n.emptyStateActions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tjustify-content: center;\n\tgap: var(--space-2);\n\tmargin-block-start: var(--space-6);\n}\n\n.toastViewport {\n\tposition: fixed;\n\tinset-block-end: var(--space-4);\n\tinset-inline-end: var(--space-4);\n\tz-index: var(--z-toast);\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tgap: var(--space-2);\n\tinline-size: min(24rem, calc(100vw - var(--space-8)));\n\tmax-block-size: calc(100dvh - var(--space-8));\n}\n\n.toastViewport:focus-visible {\n\toutline: var(--border-width-strong) solid var(--focus-ring);\n\toutline-offset: calc(var(--space-1) * -1);\n}\n\n.toastRoot {\n\t--toast-transform-duration: var(--motion-duration-normal);\n\t--toast-opacity-duration: var(--motion-duration-fast);\n\n\tdisplay: grid;\n\tgrid-template-columns: auto minmax(0, 1fr) auto auto;\n\talign-items: center;\n\tgap: var(--space-3);\n\tinline-size: 100%;\n\tmin-block-size: var(--control-height-lg);\n\tpadding: var(--space-3);\n\tcolor: var(--text-main);\n\tbackground: var(--background-elevated);\n\tborder: 0;\n\tborder-radius: var(--radius-md);\n\tbox-shadow: var(--elevation-2);\n\tfont-family: var(--font-family-sans);\n\ttransform: translate(var(--toast-swipe-movement-x, 0), var(--toast-swipe-movement-y, 0));\n\ttransition:\n\t\ttransform var(--toast-transform-duration) var(--motion-ease-out),\n\t\topacity var(--toast-opacity-duration) var(--motion-ease-out);\n}\n\n.toastRoot[data-status=\"success\"] {\n\t--toast-transform-duration: var(--motion-duration-slow);\n\t--toast-opacity-duration: var(--motion-duration-normal);\n}\n\n.toastRoot[data-status=\"success\"][data-ending-style] {\n\t--toast-transform-duration: var(--motion-duration-normal);\n\t--toast-opacity-duration: var(--motion-duration-fast);\n}\n\n.toastRoot[data-starting-style],\n.toastRoot[data-ending-style] {\n\topacity: 0;\n\ttransform: translate(var(--motion-distance-md), var(--toast-swipe-movement-y, 0));\n}\n\n.toastRoot[data-swiping] {\n\ttransition-duration: var(--motion-duration-instant);\n}\n\n.toastRoot[data-limited] {\n\tdisplay: none;\n}\n\n.toastSignal {\n\talign-self: start;\n\tinline-size: var(--space-2);\n\tblock-size: var(--space-2);\n\tmargin-block-start: 0.4375rem;\n\tbackground: var(--feedback-signal);\n\tborder-radius: var(--radius-round);\n}\n\n.toastContent {\n\tdisplay: grid;\n\tgap: var(--space-1);\n\tmin-inline-size: 0;\n}\n\n.toastTitle {\n\tcolor: var(--text-title);\n\tfont-size: var(--font-size-sm);\n\tfont-weight: var(--font-weight-semibold);\n\tletter-spacing: var(--letter-spacing-label);\n\tline-height: var(--line-height-heading);\n}\n\n.toastDescription {\n\tcolor: var(--text-secondary);\n\tfont-size: var(--font-size-xs);\n\tletter-spacing: var(--letter-spacing-body);\n\tline-height: var(--line-height-body);\n}\n\n.toastAction,\n.toastClose {\n\tmin-inline-size: var(--control-target-min);\n\tmin-block-size: var(--control-target-min);\n\tcolor: var(--text-main);\n\tborder: 0;\n\tfont: inherit;\n\tcursor: pointer;\n\ttransition:\n\t\tbackground-color var(--motion-duration-fast) var(--motion-ease-out),\n\t\ttransform var(--motion-duration-fast) var(--motion-ease-out);\n}\n\n.toastAction {\n\tpadding-inline: var(--space-3);\n\tbackground: var(--control-secondary);\n\tborder-radius: var(--radius-md);\n\tfont-size: var(--font-size-sm);\n\tfont-weight: var(--font-weight-semibold);\n\tletter-spacing: var(--letter-spacing-label);\n}\n\n.toastClose {\n\tdisplay: grid;\n\tplace-items: center;\n\tbackground: var(--background-transparent);\n\tborder-radius: var(--radius-round);\n\tline-height: var(--line-height-tight);\n}\n\n.toastClose > svg {\n\tinline-size: var(--icon-size-sm);\n\tblock-size: var(--icon-size-sm);\n}\n\n.toastAction:hover,\n.toastClose:hover {\n\tbackground: var(--control-secondary-hover);\n}\n\n.toastAction:active,\n.toastClose:active {\n\tbackground: var(--control-secondary-pressed);\n\ttransform: scale(var(--motion-press-scale));\n}\n\n.toastAction:focus-visible,\n.toastClose:focus-visible {\n\toutline: var(--border-width-strong) solid var(--focus-ring);\n\toutline-offset: var(--space-1);\n\tbox-shadow: 0 0 0 var(--space-1) var(--focus-halo);\n}\n\n@keyframes feedback-spin {\n\tto {\n\t\ttransform: rotate(1turn);\n\t}\n}\n\n@keyframes feedback-skeleton {\n\tto {\n\t\tbackground-position: -220% 0;\n\t}\n}\n\n@keyframes feedback-progress-indeterminate {\n\tfrom {\n\t\ttranslate: -100% 0;\n\t}\n\n\tto {\n\t\ttranslate: 265% 0;\n\t}\n}\n\n@media (prefers-reduced-motion: reduce) {\n\t.rangeIndicator[data-indeterminate],\n\t.spinner,\n\t.skeleton {\n\t\tanimation: none;\n\t}\n\n\t.rangeIndicator,\n\t.toastRoot,\n\t.toastAction,\n\t.toastClose {\n\t\ttransition-duration: var(--motion-duration-instant);\n\t}\n\n\t.skeleton {\n\t\tbackground: var(--background-inset);\n\t}\n}\n\n@media (forced-colors: active) {\n\t.feedbackPanel,\n\t.emptyState,\n\t.toastRoot {\n\t\tcolor: CanvasText;\n\t\tbackground: Canvas;\n\t\tborder-color: CanvasText;\n\t\tbox-shadow: none;\n\t}\n\n\t.rangeTrack {\n\t\tbackground: Canvas;\n\t\tborder: var(--border-width-hairline) solid CanvasText;\n\t}\n\n\t.rangeIndicator,\n\t.toastSignal {\n\t\tbackground: Highlight;\n\t}\n\n\t.spinner {\n\t\tcolor: Highlight;\n\t\tborder-color: CanvasText;\n\t\tborder-block-start-color: currentColor;\n\t\tborder-inline-end-color: currentColor;\n\t}\n\n\t.emptyStateIcon,\n\t.toastTitle,\n\t.toastDescription {\n\t\tcolor: inherit;\n\t}\n}\n\n@media (max-width: 36rem) {\n\t.toastViewport {\n\t\tinset-inline: var(--space-3);\n\t\tinline-size: auto;\n\t}\n\n\t.toastRoot {\n\t\tgrid-template-columns: auto minmax(0, 1fr) auto;\n\t}\n\n\t.toastAction {\n\t\tgrid-column: 2;\n\t}\n\n\t.emptyStateBody {\n\t\tpadding: var(--space-6);\n\t}\n}\n"],"mappings":""}

package/dist/components/forms/CodeField.js

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

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

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

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

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

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

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

package/dist/components/forms/NumberField.js

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

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

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

package/dist/components/forms/OTPField.js

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

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

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

package/dist/components/forms/TextField.js

@@ -1,199 +0,0 @@
-/* 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

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