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

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

@@ -0,0 +1 @@
+{"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/feedback/feedback.types.d.ts

@@ -0,0 +1,8 @@
+export declare const FEEDBACK_STATUSES: readonly ["neutral", "info", "success", "warning", "danger"];
+export type FeedbackStatus = (typeof FEEDBACK_STATUSES)[number];
+export type FeedbackLiveMode = "off" | "polite" | "assertive";
+export declare function mergeClassNames(...classNames: Array<string | undefined>): string;
+export declare function getLiveRegionProps(live: FeedbackLiveMode): {
+    "aria-live"?: "polite" | "assertive";
+    role?: "status" | "alert";
+};

package/dist/components/feedback/feedback.types.js

@@ -0,0 +1,24 @@
+//#region src/components/feedback/feedback.types.ts
+var e = [
+	"neutral",
+	"info",
+	"success",
+	"warning",
+	"danger"
+];
+function t(...e) {
+	return e.filter(Boolean).join(" ");
+}
+function n(e) {
+	return e === "assertive" ? {
+		"aria-live": "assertive",
+		role: "alert"
+	} : e === "polite" ? {
+		"aria-live": "polite",
+		role: "status"
+	} : {};
+}
+//#endregion
+export { e as FEEDBACK_STATUSES, n as getLiveRegionProps, t as mergeClassNames };
+
+//# sourceMappingURL=feedback.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"feedback.types.js","names":[],"sources":["../../../src/components/feedback/feedback.types.ts"],"sourcesContent":["export const FEEDBACK_STATUSES = [\"neutral\", \"info\", \"success\", \"warning\", \"danger\"] as const;\n\nexport type FeedbackStatus = (typeof FEEDBACK_STATUSES)[number];\n\nexport type FeedbackLiveMode = \"off\" | \"polite\" | \"assertive\";\n\nexport function mergeClassNames(...classNames: Array<string | undefined>): string {\n\treturn classNames.filter(Boolean).join(\" \");\n}\n\nexport function getLiveRegionProps(live: FeedbackLiveMode): {\n\t\"aria-live\"?: \"polite\" | \"assertive\";\n\trole?: \"status\" | \"alert\";\n} {\n\tif (live === \"assertive\") {\n\t\treturn { \"aria-live\": \"assertive\", role: \"alert\" };\n\t}\n\n\tif (live === \"polite\") {\n\t\treturn { \"aria-live\": \"polite\", role: \"status\" };\n\t}\n\n\treturn {};\n}\n"],"mappings":";AAAA,IAAa,IAAoB;CAAC;CAAW;CAAQ;CAAW;CAAW;AAAQ;AAMnF,SAAgB,EAAgB,GAAG,GAA+C;CACjF,OAAO,EAAW,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AAC3C;AAEA,SAAgB,EAAmB,GAGjC;CASD,OARI,MAAS,cACL;EAAE,aAAa;EAAa,MAAM;CAAQ,IAG9C,MAAS,WACL;EAAE,aAAa;EAAU,MAAM;CAAS,IAGzC,CAAC;AACT"}

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

@@ -0,0 +1,9 @@
+export * from './alert.js';
+export * from './banner.js';
+export * from './empty-state.js';
+export { FEEDBACK_STATUSES, type FeedbackLiveMode, type FeedbackStatus } from './feedback.types.js';
+export * from './meter.js';
+export * from './progress.js';
+export * from './skeleton.js';
+export * from './spinner.js';
+export * from './toast.js';

package/dist/components/feedback/meter.d.ts

@@ -0,0 +1,12 @@
+import { Meter as BaseMeter } from '@base-ui/react/meter';
+import { ReactNode } from 'react';
+import { FeedbackStatus } from './feedback.types.js';
+export interface MeterProps extends Omit<BaseMeter.Root.Props, "children" | "className"> {
+    label: ReactNode;
+    className?: string;
+    trackClassName?: string;
+    indicatorClassName?: string;
+    status?: FeedbackStatus;
+    showValue?: boolean;
+}
+export declare const Meter: import('react').ForwardRefExoticComponent<Omit<MeterProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/feedback/meter.js

@@ -0,0 +1,28 @@
+import e from "./feedback.module.js";
+import { mergeClassNames as t } from "./feedback.types.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Meter as a } from "@base-ui/react/meter";
+//#region src/components/feedback/meter.tsx
+var o = n(function({ className: n, indicatorClassName: o, label: s, showValue: c = !0, status: l = "neutral", trackClassName: u, ...d }, f) {
+	return /* @__PURE__ */ i(a.Root, {
+		ref: f,
+		className: t(e.rangeRoot, n),
+		"data-status": l,
+		...d,
+		children: [/* @__PURE__ */ i("div", {
+			className: e.rangeHeader,
+			children: [/* @__PURE__ */ r(a.Label, {
+				className: e.rangeLabel,
+				children: s
+			}), c ? /* @__PURE__ */ r(a.Value, { className: e.rangeValue }) : null]
+		}), /* @__PURE__ */ r(a.Track, {
+			className: t(e.rangeTrack, u),
+			children: /* @__PURE__ */ r(a.Indicator, { className: t(e.rangeIndicator, o) })
+		})]
+	});
+});
+//#endregion
+export { o as Meter };
+
+//# sourceMappingURL=meter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meter.js","names":[],"sources":["../../../src/components/feedback/meter.tsx"],"sourcesContent":["import { Meter as BaseMeter } from \"@base-ui/react/meter\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nimport styles from \"./feedback.module.css\";\nimport { mergeClassNames, type FeedbackStatus } from \"./feedback.types\";\n\nexport interface MeterProps extends Omit<BaseMeter.Root.Props, \"children\" | \"className\"> {\n\tlabel: ReactNode;\n\tclassName?: string;\n\ttrackClassName?: string;\n\tindicatorClassName?: string;\n\tstatus?: FeedbackStatus;\n\tshowValue?: boolean;\n}\n\nexport const Meter = forwardRef<HTMLDivElement, MeterProps>(function Meter({ className, indicatorClassName, label, showValue = true, status = \"neutral\", trackClassName, ...props }, ref) {\n\treturn (\n\t\t<BaseMeter.Root ref={ref} className={mergeClassNames(styles.rangeRoot, className)} data-status={status} {...props}>\n\t\t\t<div className={styles.rangeHeader}>\n\t\t\t\t<BaseMeter.Label className={styles.rangeLabel}>{label}</BaseMeter.Label>\n\t\t\t\t{showValue ? <BaseMeter.Value className={styles.rangeValue} /> : null}\n\t\t\t</div>\n\t\t\t<BaseMeter.Track className={mergeClassNames(styles.rangeTrack, trackClassName)}>\n\t\t\t\t<BaseMeter.Indicator className={mergeClassNames(styles.rangeIndicator, indicatorClassName)} />\n\t\t\t</BaseMeter.Track>\n\t\t</BaseMeter.Root>\n\t);\n});\n"],"mappings":";;;;;;AAeA,IAAa,IAAQ,EAAuC,SAAe,EAAE,cAAW,uBAAoB,UAAO,eAAY,IAAM,YAAS,WAAW,mBAAgB,GAAG,KAAS,GAAK;CACzL,OACC,kBAAC,EAAU,MAAX;EAAqB;EAAK,WAAW,EAAgB,EAAO,WAAW,CAAS;EAAG,eAAa;EAAQ,GAAI;EAA5G,UAAA,CACC,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAvB,UAAA,CACC,kBAAC,EAAU,OAAX;IAAiB,WAAW,EAAO;IAAa,UAAA;GAAuB,CAAA,GACtE,IAAY,kBAAC,EAAU,OAAX,EAAiB,WAAW,EAAO,WAAa,CAAA,IAAI,IAC7D;EACL,CAAA,GAAA,kBAAC,EAAU,OAAX;GAAiB,WAAW,EAAgB,EAAO,YAAY,CAAc;GAC5E,UAAA,kBAAC,EAAU,WAAX,EAAqB,WAAW,EAAgB,EAAO,gBAAgB,CAAkB,EAAI,CAAA;EAC7E,CAAA,CACF;;AAElB,CAAC"}

package/dist/components/feedback/progress.d.ts

@@ -0,0 +1,12 @@
+import { Progress as BaseProgress } from '@base-ui/react/progress';
+import { ReactNode } from 'react';
+import { FeedbackStatus } from './feedback.types.js';
+export interface ProgressProps extends Omit<BaseProgress.Root.Props, "children" | "className"> {
+    label: ReactNode;
+    className?: string;
+    trackClassName?: string;
+    indicatorClassName?: string;
+    status?: FeedbackStatus;
+    showValue?: boolean;
+}
+export declare const Progress: import('react').ForwardRefExoticComponent<Omit<ProgressProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/feedback/progress.js

@@ -0,0 +1,28 @@
+import e from "./feedback.module.js";
+import { mergeClassNames as t } from "./feedback.types.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Progress as a } from "@base-ui/react/progress";
+//#region src/components/feedback/progress.tsx
+var o = n(function({ className: n, indicatorClassName: o, label: s, showValue: c = !0, status: l = "neutral", trackClassName: u, ...d }, f) {
+	return /* @__PURE__ */ i(a.Root, {
+		ref: f,
+		className: t(e.rangeRoot, n),
+		"data-status": l,
+		...d,
+		children: [/* @__PURE__ */ i("div", {
+			className: e.rangeHeader,
+			children: [/* @__PURE__ */ r(a.Label, {
+				className: e.rangeLabel,
+				children: s
+			}), c ? /* @__PURE__ */ r(a.Value, { className: e.rangeValue }) : null]
+		}), /* @__PURE__ */ r(a.Track, {
+			className: t(e.rangeTrack, u),
+			children: /* @__PURE__ */ r(a.Indicator, { className: t(e.rangeIndicator, o) })
+		})]
+	});
+});
+//#endregion
+export { o as Progress };
+
+//# sourceMappingURL=progress.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","names":[],"sources":["../../../src/components/feedback/progress.tsx"],"sourcesContent":["import { Progress as BaseProgress } from \"@base-ui/react/progress\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nimport styles from \"./feedback.module.css\";\nimport { mergeClassNames, type FeedbackStatus } from \"./feedback.types\";\n\nexport interface ProgressProps extends Omit<BaseProgress.Root.Props, \"children\" | \"className\"> {\n\tlabel: ReactNode;\n\tclassName?: string;\n\ttrackClassName?: string;\n\tindicatorClassName?: string;\n\tstatus?: FeedbackStatus;\n\tshowValue?: boolean;\n}\n\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress({ className, indicatorClassName, label, showValue = true, status = \"neutral\", trackClassName, ...props }, ref) {\n\treturn (\n\t\t<BaseProgress.Root ref={ref} className={mergeClassNames(styles.rangeRoot, className)} data-status={status} {...props}>\n\t\t\t<div className={styles.rangeHeader}>\n\t\t\t\t<BaseProgress.Label className={styles.rangeLabel}>{label}</BaseProgress.Label>\n\t\t\t\t{showValue ? <BaseProgress.Value className={styles.rangeValue} /> : null}\n\t\t\t</div>\n\t\t\t<BaseProgress.Track className={mergeClassNames(styles.rangeTrack, trackClassName)}>\n\t\t\t\t<BaseProgress.Indicator className={mergeClassNames(styles.rangeIndicator, indicatorClassName)} />\n\t\t\t</BaseProgress.Track>\n\t\t</BaseProgress.Root>\n\t);\n});\n"],"mappings":";;;;;;AAeA,IAAa,IAAW,EAA0C,SAAkB,EAAE,cAAW,uBAAoB,UAAO,eAAY,IAAM,YAAS,WAAW,mBAAgB,GAAG,KAAS,GAAK;CAClM,OACC,kBAAC,EAAa,MAAd;EAAwB;EAAK,WAAW,EAAgB,EAAO,WAAW,CAAS;EAAG,eAAa;EAAQ,GAAI;EAA/G,UAAA,CACC,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAvB,UAAA,CACC,kBAAC,EAAa,OAAd;IAAoB,WAAW,EAAO;IAAa,UAAA;GAA0B,CAAA,GAC5E,IAAY,kBAAC,EAAa,OAAd,EAAoB,WAAW,EAAO,WAAa,CAAA,IAAI,IAChE;EACL,CAAA,GAAA,kBAAC,EAAa,OAAd;GAAoB,WAAW,EAAgB,EAAO,YAAY,CAAc;GAC/E,UAAA,kBAAC,EAAa,WAAd,EAAwB,WAAW,EAAgB,EAAO,gBAAgB,CAAkB,EAAI,CAAA;EAC7E,CAAA,CACF;;AAErB,CAAC"}

package/dist/components/feedback/skeleton.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+export interface SkeletonProps extends Omit<HTMLAttributes<HTMLSpanElement>, "aria-hidden" | "children"> {
+    shape?: "text" | "rectangular" | "circular";
+}
+export declare const Skeleton: import('react').ForwardRefExoticComponent<SkeletonProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/components/feedback/skeleton.js

@@ -0,0 +1,18 @@
+import e from "./feedback.module.js";
+import { mergeClassNames as t } from "./feedback.types.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/feedback/skeleton.tsx
+var i = n(function({ className: n, shape: i = "text", ...a }, o) {
+	return /* @__PURE__ */ r("span", {
+		ref: o,
+		"aria-hidden": "true",
+		className: t(e.skeleton, n),
+		"data-shape": i,
+		...a
+	});
+});
+//#endregion
+export { i as Skeleton };
+
+//# sourceMappingURL=skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../../src/components/feedback/skeleton.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\n\nimport styles from \"./feedback.module.css\";\nimport { mergeClassNames } from \"./feedback.types\";\n\nexport interface SkeletonProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"aria-hidden\" | \"children\"> {\n\tshape?: \"text\" | \"rectangular\" | \"circular\";\n}\n\nexport const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(function Skeleton({ className, shape = \"text\", ...props }, ref) {\n\treturn <span ref={ref} aria-hidden=\"true\" className={mergeClassNames(styles.skeleton, className)} data-shape={shape} {...props} />;\n});\n"],"mappings":";;;;;AASA,IAAa,IAAW,EAA2C,SAAkB,EAAE,cAAW,WAAQ,QAAQ,GAAG,KAAS,GAAK;CAClI,OAAO,kBAAC,QAAD;EAAW;EAAK,eAAY;EAAO,WAAW,EAAgB,EAAO,UAAU,CAAS;EAAG,cAAY;EAAO,GAAI;CAAQ,CAAA;AAClI,CAAC"}

package/dist/components/feedback/spinner.d.ts

@@ -0,0 +1,23 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { FeedbackStatus } from './feedback.types.js';
+type SpinnerAccessibilityProps = {
+    /** 附近已有載入說明文字時，對輔助科技隱藏 Spinner。 */
+    decorative: true;
+    label?: never;
+} | {
+    decorative?: false;
+    /** 由狀態區域播報的無障礙名稱。 */
+    label: string;
+};
+export type SpinnerProps = Omit<HTMLAttributes<HTMLSpanElement>, "aria-hidden" | "aria-label" | "children" | "role"> & SpinnerAccessibilityProps & {
+    size?: "sm" | "md" | "lg";
+    status?: FeedbackStatus;
+};
+export declare const Spinner: import('react').ForwardRefExoticComponent<SpinnerProps & import('react').RefAttributes<HTMLSpanElement>>;
+export interface LoaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    label: ReactNode;
+    size?: "sm" | "md" | "lg";
+    status?: FeedbackStatus;
+}
+export declare const Loader: import('react').ForwardRefExoticComponent<LoaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/feedback/spinner.js

@@ -0,0 +1,35 @@
+import e from "./feedback.module.js";
+import { mergeClassNames as t } from "./feedback.types.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/feedback/spinner.tsx
+var a = n(function({ className: n, decorative: i = !1, label: a, size: o = "md", status: s = "neutral", ...c }, l) {
+	return /* @__PURE__ */ r("span", {
+		ref: l,
+		"aria-hidden": i ? "true" : void 0,
+		"aria-label": i ? void 0 : a,
+		className: t(e.spinner, n),
+		"data-size": o,
+		"data-status": s,
+		role: i ? void 0 : "status",
+		...c
+	});
+}), o = n(function({ className: n, label: o, size: s = "md", status: c = "neutral", ...l }, u) {
+	return /* @__PURE__ */ i("div", {
+		ref: u,
+		"aria-live": "polite",
+		className: t(e.loader, n),
+		"data-status": c,
+		role: "status",
+		...l,
+		children: [/* @__PURE__ */ r(a, {
+			decorative: !0,
+			size: s,
+			status: c
+		}), /* @__PURE__ */ r("span", { children: o })]
+	});
+});
+//#endregion
+export { o as Loader, a as Spinner };
+
+//# sourceMappingURL=spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","names":[],"sources":["../../../src/components/feedback/spinner.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport styles from \"./feedback.module.css\";\nimport { mergeClassNames, type FeedbackStatus } from \"./feedback.types\";\n\ntype SpinnerAccessibilityProps =\n\t| {\n\t\t\t/** 附近已有載入說明文字時，對輔助科技隱藏 Spinner。 */\n\t\t\tdecorative: true;\n\t\t\tlabel?: never;\n\t  }\n\t| {\n\t\t\tdecorative?: false;\n\t\t\t/** 由狀態區域播報的無障礙名稱。 */\n\t\t\tlabel: string;\n\t  };\n\nexport type SpinnerProps = Omit<HTMLAttributes<HTMLSpanElement>, \"aria-hidden\" | \"aria-label\" | \"children\" | \"role\"> &\n\tSpinnerAccessibilityProps & {\n\t\tsize?: \"sm\" | \"md\" | \"lg\";\n\t\tstatus?: FeedbackStatus;\n\t};\n\nexport const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(function Spinner({ className, decorative = false, label, size = \"md\", status = \"neutral\", ...props }, ref) {\n\treturn (\n\t\t<span\n\t\t\tref={ref}\n\t\t\taria-hidden={decorative ? \"true\" : undefined}\n\t\t\taria-label={decorative ? undefined : label}\n\t\t\tclassName={mergeClassNames(styles.spinner, className)}\n\t\t\tdata-size={size}\n\t\t\tdata-status={status}\n\t\t\trole={decorative ? undefined : \"status\"}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\n\nexport interface LoaderProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n\tlabel: ReactNode;\n\tsize?: \"sm\" | \"md\" | \"lg\";\n\tstatus?: FeedbackStatus;\n}\n\nexport const Loader = forwardRef<HTMLDivElement, LoaderProps>(function Loader({ className, label, size = \"md\", status = \"neutral\", ...props }, ref) {\n\treturn (\n\t\t<div ref={ref} aria-live=\"polite\" className={mergeClassNames(styles.loader, className)} data-status={status} role=\"status\" {...props}>\n\t\t\t<Spinner decorative size={size} status={status} />\n\t\t\t<span>{label}</span>\n\t\t</div>\n\t);\n});\n"],"mappings":";;;;;AAuBA,IAAa,IAAU,EAA0C,SAAiB,EAAE,cAAW,gBAAa,IAAO,UAAO,UAAO,MAAM,YAAS,WAAW,GAAG,KAAS,GAAK;CAC3K,OACC,kBAAC,QAAD;EACM;EACL,eAAa,IAAa,SAAS,KAAA;EACnC,cAAY,IAAa,KAAA,IAAY;EACrC,WAAW,EAAgB,EAAO,SAAS,CAAS;EACpD,aAAW;EACX,eAAa;EACb,MAAM,IAAa,KAAA,IAAY;EAC/B,GAAI;CACJ,CAAA;AAEH,CAAC,GAQY,IAAS,EAAwC,SAAgB,EAAE,cAAW,UAAO,UAAO,MAAM,YAAS,WAAW,GAAG,KAAS,GAAK;CACnJ,OACC,kBAAC,OAAD;EAAU;EAAK,aAAU;EAAS,WAAW,EAAgB,EAAO,QAAQ,CAAS;EAAG,eAAa;EAAQ,MAAK;EAAS,GAAI;EAA/H,UAAA,CACC,kBAAC,GAAD;GAAS,YAAA;GAAiB;GAAc;EAAS,CAAA,GACjD,kBAAC,QAAD,EAAA,UAAO,EAAY,CAAA,CACf;;AAEP,CAAC"}

package/dist/components/feedback/toast.d.ts

@@ -0,0 +1,33 @@
+import { Toast as BaseToast } from '@base-ui/react/toast';
+import { ComponentPropsWithoutRef, ReactElement, ReactNode, RefAttributes } from 'react';
+import { FeedbackStatus } from './feedback.types.js';
+export interface ToastData extends Record<string, unknown> {
+    status?: FeedbackStatus;
+}
+export type ToastObject<Data extends object = ToastData> = BaseToast.Root.ToastObject<Data>;
+export type ToastManager<Data extends object = ToastData> = ReturnType<typeof BaseToast.createToastManager<Data>>;
+export declare function createToastManager<Data extends object = ToastData>(): ToastManager<Data>;
+export declare function useToastManager<Data extends object = ToastData>(): import('@base-ui/react').UseToastManagerReturnValue<Data>;
+export interface ToastRootProps<Data extends object = ToastData> extends Omit<BaseToast.Root.Props, "className" | "toast"> {
+    className?: string;
+    closeLabel?: string;
+    toast: ToastObject<Data>;
+}
+type ToastRootComponent = <Data extends object = ToastData>(props: ToastRootProps<Data> & RefAttributes<HTMLDivElement>) => ReactElement;
+export declare const ToastRoot: ToastRootComponent;
+export interface ToastViewportProps<Data extends object = ToastData> extends Omit<ComponentPropsWithoutRef<typeof BaseToast.Viewport>, "children" | "className"> {
+    className?: string;
+    closeLabel?: string;
+    renderToast?: (toast: ToastObject<Data>) => ReactNode;
+}
+type ToastViewportComponent = <Data extends object = ToastData>(props: ToastViewportProps<Data> & RefAttributes<HTMLDivElement>) => ReactElement;
+export declare const ToastViewport: ToastViewportComponent;
+export interface ToastProviderProps<Data extends object = ToastData> extends Omit<BaseToast.Provider.Props, "toastManager"> {
+    closeLabel?: string;
+    renderToast?: ToastViewportProps<Data>["renderToast"];
+    toastManager?: ToastManager<Data>;
+    viewport?: boolean;
+    viewportProps?: Omit<ToastViewportProps<Data>, "closeLabel" | "renderToast">;
+}
+export declare function ToastProvider<Data extends object = ToastData>({ children, closeLabel, renderToast, viewport, viewportProps, ...props }: ToastProviderProps<Data>): import("react").JSX.Element;
+export {};

package/dist/components/feedback/toast.js

@@ -0,0 +1,76 @@
+import e from "./feedback.module.js";
+import { FEEDBACK_STATUSES as t, mergeClassNames as n } from "./feedback.types.js";
+import { Fragment as r, createElement as i, forwardRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Toast as c } from "@base-ui/react/toast";
+import { XIcon as l } from "@phosphor-icons/react/dist/csr/X";
+//#region src/components/feedback/toast.tsx
+var u = new Set(t);
+function d() {
+	return c.createToastManager();
+}
+function f() {
+	return c.useToastManager();
+}
+function p(e) {
+	let t = e.data?.status;
+	return typeof t == "string" && u.has(t) ? t : e.type && u.has(e.type) ? e.type : "neutral";
+}
+var m = a(function({ className: t, closeLabel: r = "關閉通知", toast: i, ...a }, u) {
+	let d = i.actionProps, f = d?.className, m = p(i);
+	return /* @__PURE__ */ s(c.Root, {
+		ref: u,
+		className: n(e.toastRoot, t),
+		"data-status": m,
+		toast: i,
+		...a,
+		children: [
+			/* @__PURE__ */ o("span", {
+				"aria-hidden": "true",
+				className: e.toastSignal
+			}),
+			/* @__PURE__ */ s(c.Content, {
+				className: e.toastContent,
+				children: [i.title ? /* @__PURE__ */ o(c.Title, { className: e.toastTitle }) : null, i.description ? /* @__PURE__ */ o(c.Description, { className: e.toastDescription }) : null]
+			}),
+			d ? /* @__PURE__ */ o(c.Action, {
+				...d,
+				className: n(e.toastAction, f)
+			}) : null,
+			/* @__PURE__ */ o(c.Close, {
+				"aria-label": r,
+				className: e.toastClose,
+				children: /* @__PURE__ */ o(l, {
+					"aria-hidden": "true",
+					weight: "bold"
+				})
+			})
+		]
+	});
+}), h = a(function({ className: t, closeLabel: a, renderToast: s, ...l }, u) {
+	let d = c.useToastManager();
+	return /* @__PURE__ */ o(c.Portal, { children: /* @__PURE__ */ o(c.Viewport, {
+		ref: u,
+		className: n(e.toastViewport, t),
+		...l,
+		children: d.toasts.map((e) => s ? /* @__PURE__ */ o(r, { children: s(e) }, e.id) : /* @__PURE__ */ i(m, {
+			...a === void 0 ? {} : { closeLabel: a },
+			key: e.id,
+			toast: e
+		}))
+	}) });
+});
+function g({ children: e, closeLabel: t, renderToast: n, viewport: r = !0, viewportProps: i, ...a }) {
+	return /* @__PURE__ */ s(c.Provider, {
+		...a,
+		children: [e, r ? /* @__PURE__ */ o(h, {
+			...i,
+			...t === void 0 ? {} : { closeLabel: t },
+			...n === void 0 ? {} : { renderToast: n }
+		}) : null]
+	});
+}
+//#endregion
+export { g as ToastProvider, m as ToastRoot, h as ToastViewport, d as createToastManager, f as useToastManager };
+
+//# sourceMappingURL=toast.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","names":[],"sources":["../../../src/components/feedback/toast.tsx"],"sourcesContent":["import { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport { XIcon } from \"@phosphor-icons/react/dist/csr/X\";\nimport { Fragment, forwardRef, type ComponentPropsWithoutRef, type ForwardedRef, type ReactElement, type ReactNode, type RefAttributes } from \"react\";\n\nimport styles from \"./feedback.module.css\";\nimport { FEEDBACK_STATUSES, mergeClassNames, type FeedbackStatus } from \"./feedback.types\";\n\nconst feedbackStatusSet: ReadonlySet<string> = new Set(FEEDBACK_STATUSES);\n\nexport interface ToastData extends Record<string, unknown> {\n\tstatus?: FeedbackStatus;\n}\n\nexport type ToastObject<Data extends object = ToastData> = BaseToast.Root.ToastObject<Data>;\nexport type ToastManager<Data extends object = ToastData> = ReturnType<typeof BaseToast.createToastManager<Data>>;\n\nexport function createToastManager<Data extends object = ToastData>(): ToastManager<Data> {\n\treturn BaseToast.createToastManager<Data>();\n}\n\nexport function useToastManager<Data extends object = ToastData>() {\n\treturn BaseToast.useToastManager<Data>();\n}\n\nfunction getToastStatus<Data extends object>(toast: ToastObject<Data>): FeedbackStatus {\n\tconst status = (toast.data as { status?: unknown } | undefined)?.status;\n\tif (typeof status === \"string\" && feedbackStatusSet.has(status)) {\n\t\treturn status as FeedbackStatus;\n\t}\n\n\tif (toast.type && feedbackStatusSet.has(toast.type)) {\n\t\treturn toast.type as FeedbackStatus;\n\t}\n\n\treturn \"neutral\";\n}\n\nexport interface ToastRootProps<Data extends object = ToastData> extends Omit<BaseToast.Root.Props, \"className\" | \"toast\"> {\n\tclassName?: string;\n\tcloseLabel?: string;\n\ttoast: ToastObject<Data>;\n}\n\ntype ToastRootComponent = <Data extends object = ToastData>(props: ToastRootProps<Data> & RefAttributes<HTMLDivElement>) => ReactElement;\n\nexport const ToastRoot = forwardRef(function ToastRoot<Data extends object = ToastData>(\n\t{ className, closeLabel = \"關閉通知\", toast, ...props }: ToastRootProps<Data>,\n\tref: ForwardedRef<HTMLDivElement>\n) {\n\tconst actionProps = toast.actionProps;\n\tconst actionClassName = actionProps?.className;\n\tconst status = getToastStatus(toast);\n\n\treturn (\n\t\t<BaseToast.Root ref={ref} className={mergeClassNames(styles.toastRoot, className)} data-status={status} toast={toast} {...props}>\n\t\t\t<span aria-hidden=\"true\" className={styles.toastSignal} />\n\t\t\t<BaseToast.Content className={styles.toastContent}>\n\t\t\t\t{toast.title ? <BaseToast.Title className={styles.toastTitle} /> : null}\n\t\t\t\t{toast.description ? <BaseToast.Description className={styles.toastDescription} /> : null}\n\t\t\t</BaseToast.Content>\n\t\t\t{actionProps ? <BaseToast.Action {...actionProps} className={mergeClassNames(styles.toastAction, actionClassName)} /> : null}\n\t\t\t<BaseToast.Close aria-label={closeLabel} className={styles.toastClose}>\n\t\t\t\t<XIcon aria-hidden=\"true\" weight=\"bold\" />\n\t\t\t</BaseToast.Close>\n\t\t</BaseToast.Root>\n\t);\n}) as ToastRootComponent;\n\nexport interface ToastViewportProps<Data extends object = ToastData> extends Omit<ComponentPropsWithoutRef<typeof BaseToast.Viewport>, \"children\" | \"className\"> {\n\tclassName?: string;\n\tcloseLabel?: string;\n\trenderToast?: (toast: ToastObject<Data>) => ReactNode;\n}\n\ntype ToastViewportComponent = <Data extends object = ToastData>(props: ToastViewportProps<Data> & RefAttributes<HTMLDivElement>) => ReactElement;\n\nexport const ToastViewport = forwardRef(function ToastViewport<Data extends object = ToastData>(\n\t{ className, closeLabel, renderToast, ...props }: ToastViewportProps<Data>,\n\tref: ForwardedRef<HTMLDivElement>\n) {\n\tconst toast = BaseToast.useToastManager<Data>();\n\n\treturn (\n\t\t<BaseToast.Portal>\n\t\t\t<BaseToast.Viewport ref={ref} className={mergeClassNames(styles.toastViewport, className)} {...props}>\n\t\t\t\t{toast.toasts.map(toastObject =>\n\t\t\t\t\trenderToast ? (\n\t\t\t\t\t\t<Fragment key={toastObject.id}>{renderToast(toastObject)}</Fragment>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ToastRoot {...(closeLabel === undefined ? {} : { closeLabel })} key={toastObject.id} toast={toastObject} />\n\t\t\t\t\t)\n\t\t\t\t)}\n\t\t\t</BaseToast.Viewport>\n\t\t</BaseToast.Portal>\n\t);\n}) as ToastViewportComponent;\n\nexport interface ToastProviderProps<Data extends object = ToastData> extends Omit<BaseToast.Provider.Props, \"toastManager\"> {\n\tcloseLabel?: string;\n\trenderToast?: ToastViewportProps<Data>[\"renderToast\"];\n\ttoastManager?: ToastManager<Data>;\n\tviewport?: boolean;\n\tviewportProps?: Omit<ToastViewportProps<Data>, \"closeLabel\" | \"renderToast\">;\n}\n\nexport function ToastProvider<Data extends object = ToastData>({ children, closeLabel, renderToast, viewport = true, viewportProps, ...props }: ToastProviderProps<Data>) {\n\treturn (\n\t\t<BaseToast.Provider {...props}>\n\t\t\t{children}\n\t\t\t{viewport ? <ToastViewport {...viewportProps} {...(closeLabel === undefined ? {} : { closeLabel })} {...(renderToast === undefined ? {} : { renderToast })} /> : null}\n\t\t</BaseToast.Provider>\n\t);\n}\n"],"mappings":";;;;;;;AAOA,IAAM,IAAyC,IAAI,IAAI,CAAiB;AASxE,SAAgB,IAA0E;CACzF,OAAO,EAAU,mBAAyB;AAC3C;AAEA,SAAgB,IAAmD;CAClE,OAAO,EAAU,gBAAsB;AACxC;AAEA,SAAS,EAAoC,GAA0C;CACtF,IAAM,IAAU,EAAM,MAA2C;CASjE,OARI,OAAO,KAAW,YAAY,EAAkB,IAAI,CAAM,IACtD,IAGJ,EAAM,QAAQ,EAAkB,IAAI,EAAM,IAAI,IAC1C,EAAM,OAGP;AACR;AAUA,IAAa,IAAY,EAAW,SACnC,EAAE,cAAW,gBAAa,QAAQ,UAAO,GAAG,KAC5C,GACC;CACD,IAAM,IAAc,EAAM,aACpB,IAAkB,GAAa,WAC/B,IAAS,EAAe,CAAK;CAEnC,OACC,kBAAC,EAAU,MAAX;EAAqB;EAAK,WAAW,EAAgB,EAAO,WAAW,CAAS;EAAG,eAAa;EAAe;EAAO,GAAI;EAA1H,UAAA;GACC,kBAAC,QAAD;IAAM,eAAY;IAAO,WAAW,EAAO;GAAc,CAAA;GACzD,kBAAC,EAAU,SAAX;IAAmB,WAAW,EAAO;IAArC,UAAA,CACE,EAAM,QAAQ,kBAAC,EAAU,OAAX,EAAiB,WAAW,EAAO,WAAa,CAAA,IAAI,MAClE,EAAM,cAAc,kBAAC,EAAU,aAAX,EAAuB,WAAW,EAAO,iBAAmB,CAAA,IAAI,IACnE;;GAClB,IAAc,kBAAC,EAAU,QAAX;IAAkB,GAAI;IAAa,WAAW,EAAgB,EAAO,aAAa,CAAe;GAAI,CAAA,IAAI;GACxH,kBAAC,EAAU,OAAX;IAAiB,cAAY;IAAY,WAAW,EAAO;IAC1D,UAAA,kBAAC,GAAD;KAAO,eAAY;KAAO,QAAO;IAAQ,CAAA;GACzB,CAAA;EACF;;AAElB,CAAC,GAUY,IAAgB,EAAW,SACvC,EAAE,cAAW,eAAY,gBAAa,GAAG,KACzC,GACC;CACD,IAAM,IAAQ,EAAU,gBAAsB;CAE9C,OACC,kBAAC,EAAU,QAAX,EAAA,UACC,kBAAC,EAAU,UAAX;EAAyB;EAAK,WAAW,EAAgB,EAAO,eAAe,CAAS;EAAG,GAAI;EAC7F,UAAA,EAAM,OAAO,KAAI,MACjB,IACC,kBAAC,GAAD,EAAA,UAAgC,EAAY,CAAW,EAAY,GAApD,EAAY,EAAwC,IAEnE,kBAAC,GAAD;GAAW,GAAK,MAAe,KAAA,IAAY,CAAC,IAAI,EAAE,cAAW;GAAI,KAAK,EAAY;GAAI,OAAO;EAAc,CAAA,CAE7G;CACmB,CAAA,EACH,CAAA;AAEpB,CAAC;AAUD,SAAgB,EAA+C,EAAE,aAAU,eAAY,gBAAa,cAAW,IAAM,kBAAe,GAAG,KAAmC;CACzK,OACC,kBAAC,EAAU,UAAX;EAAoB,GAAI;EAAxB,UAAA,CACE,GACA,IAAW,kBAAC,GAAD;GAAe,GAAI;GAAe,GAAK,MAAe,KAAA,IAAY,CAAC,IAAI,EAAE,cAAW;GAAI,GAAK,MAAgB,KAAA,IAAY,CAAC,IAAI,EAAE,eAAY;EAAK,CAAA,IAAI,IAC9I;;AAEtB"}

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

@@ -0,0 +1,23 @@
+import { OTPFieldProps } from './OTPField.js';
+import * as React from "react";
+export interface CodeFieldProps extends Omit<OTPFieldProps, "length" | "separator" | "separatorAfter"> {
+    /**
+     * 驗證碼字元數。數值限制為 2 至 12。
+     * @default 6
+     */
+    length?: number;
+    /**
+     * 每個視覺群組顯示的字元數。長度為 9 至 12 時預設每四個字元一組；
+     * 較短的驗證碼預設各自獨立。設為 1 可強制使用獨立輸入格。
+     */
+    groupSize?: number;
+    groupClassName?: string;
+    groupStyle?: React.CSSProperties;
+    /**
+     * 空白輸入格的選用提示。字串會依序將每個字元分配至各輸入格；
+     * 需要個別在地化或自訂時可使用函式。
+     */
+    placeholder?: string | ((index: number) => string | undefined);
+}
+/** 以 Base UI OTP Field 實作的多格驗證碼控制項。 */
+export declare const CodeField: React.ForwardRefExoticComponent<Omit<CodeFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/forms/CodeField.js

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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,34 @@
+import { FieldAnatomyProps } from './internal.js';
+import * as React from "react";
+type NativeFileInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "className" | "defaultValue" | "disabled" | "name" | "onChange" | "readOnly" | "required" | "size" | "style" | "type" | "value">;
+export interface FileUploadProps extends NativeFileInputProps, FieldAnatomyProps {
+    inputClassName?: string;
+    inputStyle?: React.CSSProperties;
+    triggerLabel?: React.ReactNode;
+    invalidFileLabel?: React.ReactNode;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onFilesChange?: (files: readonly File[], event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const FileUpload: React.ForwardRefExoticComponent<FileUploadProps & React.RefAttributes<HTMLInputElement>>;
+export type DropZoneChangeDetails = {
+    source: "input";
+    event: React.ChangeEvent<HTMLInputElement>;
+} | {
+    source: "drop";
+    event: React.DragEvent<HTMLDivElement>;
+};
+export interface DropZoneProps extends NativeFileInputProps, FieldAnatomyProps {
+    inputClassName?: string;
+    primaryLabel?: React.ReactNode;
+    secondaryLabel?: React.ReactNode;
+    browseLabel?: string;
+    invalidFileLabel?: React.ReactNode;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onFilesChange?: (files: readonly File[], details: DropZoneChangeDetails) => void;
+    onDragEnter?: React.DragEventHandler<HTMLDivElement>;
+    onDragOver?: React.DragEventHandler<HTMLDivElement>;
+    onDragLeave?: React.DragEventHandler<HTMLDivElement>;
+    onDrop?: React.DragEventHandler<HTMLDivElement>;
+}
+export declare const DropZone: React.ForwardRefExoticComponent<DropZoneProps & React.RefAttributes<HTMLInputElement>>;
+export {};