@wzrhine/react 0.0.0-stage → 0.2.0

package/dist/components/Dialog.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { AnimatePresence, motion } from 'motion/react';
+import { usePortalContainer } from '../provider/portal.js';
+import { useRhineMotion } from '../motion/useRhineMotion.js';
+import { cx } from '../utils/cx.js';
+import { IconButton } from './IconButton.js';
+import { Icon } from './Icon.js';
+const closeReasons = {
+    'escape-key': 'escape',
+    'outside-press': 'outside',
+    'close-press': 'close-button',
+    'trigger-press': 'trigger',
+};
+const offset = 8;
+export function Dialog({ trigger, title, description, eyebrow, actions, children, open: openProp, defaultOpen = false, onOpenChange, onClosed, size = 'md', dismissOnOutsideClick = true, initialFocus, closeButton = true, finalFocus, onCloseRequest, className, }) {
+    const [uncontrolled, setUncontrolled] = React.useState(defaultOpen);
+    const controlled = openProp !== undefined;
+    const open = controlled ? openProp : uncontrolled;
+    const container = usePortalContainer();
+    const motionPrefs = useRhineMotion();
+    const rise = motionPrefs.reduced ? 0 : offset;
+    const setOpen = (next) => {
+        if (!controlled)
+            setUncontrolled(next);
+        onOpenChange?.(next);
+    };
+    return (_jsxs(BaseDialog.Root, { open: open, onOpenChange: (next, eventDetails) => {
+            if (!next && onCloseRequest) {
+                const reason = closeReasons[eventDetails.reason];
+                if (reason && onCloseRequest(reason) === false) {
+                    eventDetails.cancel();
+                    return;
+                }
+            }
+            setOpen(next);
+        }, onOpenChangeComplete: (isOpen) => {
+            if (!isOpen)
+                onClosed?.();
+        }, disablePointerDismissal: !dismissOnOutsideClick, children: [trigger && _jsx(BaseDialog.Trigger, { render: trigger }), _jsx(AnimatePresence, { children: open && (_jsxs(BaseDialog.Portal, { keepMounted: true, container: container, children: [_jsx(BaseDialog.Backdrop, { className: "rl-dialog__backdrop", render: _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: motionPrefs.get('fast') }) }), _jsxs(BaseDialog.Popup, { className: cx('rl-dialog', className), "data-slot": "dialog", "data-size": size, initialFocus: initialFocus, finalFocus: finalFocus === null ? false : finalFocus, render: _jsx(motion.div, { initial: { opacity: 0, y: rise }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: rise }, transition: motionPrefs.get('panel') }), children: [_jsxs("header", { className: "rl-dialog__header", children: [eyebrow != null && _jsx("p", { className: "rl-dialog__eyebrow", children: eyebrow }), _jsx(BaseDialog.Title, { className: "rl-dialog__title", children: title }), description != null && (_jsx(BaseDialog.Description, { className: "rl-dialog__description", children: description })), closeButton && _jsx(BaseDialog.Close, { render: _jsx(IconButton, { className: "rl-dialog__close", variant: "ghost", size: "sm", icon: _jsx(Icon, { name: "X" }), label: "Close" }) })] }), children != null && _jsx("div", { className: "rl-dialog__body", children: children }), actions != null && _jsx("footer", { className: "rl-dialog__actions", children: actions })] })] })) })] }));
+}
+/** Wraps a button so activating it closes the nearest Dialog. */
+export function DialogClose({ children }) {
+    return _jsx(BaseDialog.Close, { render: children });
+}
+//# sourceMappingURL=Dialog.js.map

package/dist/components/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/components/Dialog.tsx"],"names":[],"mappings":"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"}

package/dist/components/Drawer.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+/**
+ * Edge panel on Base UI Drawer (ADR-0006 §4): focus enters, Tab loops, Escape and backdrop clicks
+ * close, page scroll is locked, the background is inert and focus returns to the trigger — all
+ * from Base UI. Below 40rem the panel becomes a bottom sheet (swipe down to dismiss); wider it
+ * slides from the inline `side` (swipe toward that edge). CSS owns `transform` (Base UI writes
+ * the swipe offset into the same property), so enter / exit are CSS transitions on
+ * data-starting-style / data-ending-style: interruptible, and Base UI unmounts after they end.
+ */
+export type DrawerSide = 'start' | 'end';
+export type DrawerSize = 'sm' | 'md' | 'lg';
+/**
+ * Why the user is trying to close the drawer: the `DialogCloseReason` values (ADR-0006 §3)
+ * plus `swipe` for the dismiss gesture.
+ */
+export type DrawerCloseReason = 'escape' | 'outside' | 'close-button' | 'trigger' | 'swipe';
+export type DrawerProps = {
+    /** Element that opens the drawer (usually a Button). Omit when opening programmatically. */
+    trigger?: React.ReactElement<Record<string, unknown>>;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Small archive-style label above the title, e.g. "ARCHIVE / DETAIL". */
+    eyebrow?: React.ReactNode;
+    children?: React.ReactNode;
+    /** Footer action bar. Use `<DrawerClose>` for buttons that only dismiss. */
+    actions?: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Fires after the exit transition, when focus has returned. */
+    onClosed?: () => void;
+    /** Logical edge the panel attaches to on wide viewports; follows the writing direction. */
+    side?: DrawerSide;
+    /** Panel width on wide viewports (the bottom sheet is always full width). */
+    size?: DrawerSize;
+    /** Accessible name of the header close button. */
+    closeLabel?: string;
+    /**
+     * Called before a user-initiated close. Return `false` to keep the drawer open (focus stays put),
+     * e.g. while a save is in flight. Programmatic `open={false}` skips it.
+     */
+    onCloseRequest?: (reason: DrawerCloseReason) => boolean | void;
+    /** Element to focus on open; defaults to the panel itself so its title is announced first. */
+    initialFocus?: React.RefObject<HTMLElement | null>;
+    /** Element to focus after closing; defaults to the trigger or the previously focused element. */
+    finalFocus?: React.RefObject<HTMLElement | null>;
+    className?: string;
+};
+export declare function Drawer({ trigger, title, description, eyebrow, children, actions, open: openProp, defaultOpen, onOpenChange, onClosed, side, size, closeLabel: closeLabelProp, onCloseRequest, initialFocus, finalFocus, className, }: DrawerProps): React.JSX.Element;
+export type DrawerCloseProps = {
+    /** The element that closes the drawer, typically `<Button variant="ghost">取消</Button>`. */
+    children: React.ReactElement<Record<string, unknown>>;
+};
+/** Wraps a button so activating it closes the nearest Drawer (reason `close-button`). */
+export declare function DrawerClose({ children }: DrawerCloseProps): React.JSX.Element;
+//# sourceMappingURL=Drawer.d.ts.map

package/dist/components/Drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/components/Drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;;;GAOG;AAEH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;AACzC,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,SAAS,GAAG,cAAc,GAAG,SAAS,GAAG,OAAO,CAAC;AAE5F,MAAM,MAAM,WAAW,GAAG;IACxB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACtD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,4EAA4E;IAC5E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,OAAO,GAAG,IAAI,CAAC;IAC/D,8FAA8F;IAC9F,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACnD,iGAAiG;IACjG,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAwCF,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,EACR,OAAO,EACP,IAAI,EAAE,QAAQ,EACd,WAAmB,EACnB,YAAY,EACZ,QAAQ,EACR,IAAY,EACZ,IAAW,EACX,UAAU,EAAE,cAAc,EAC1B,cAAc,EACd,YAAY,EACZ,UAAU,EACV,SAAS,GACV,EAAE,WAAW,qBAmGb;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,2FAA2F;IAC3F,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;CACvD,CAAC;AAEF,yFAAyF;AACzF,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE,gBAAgB,qBAEzD"}

package/dist/components/Drawer.js

@@ -0,0 +1,92 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Drawer as BaseDrawer } from '@base-ui/react/drawer';
+import { useRhineMessages } from '../provider/messages.js';
+import { usePortalContainer } from '../provider/portal.js';
+import { cx } from '../utils/cx.js';
+import { IconButton } from './IconButton.js';
+const closeReasons = {
+    'escape-key': 'escape',
+    // Android back gesture (CloseWatcher) is the platform's Escape.
+    'close-watcher': 'escape',
+    'outside-press': 'outside',
+    'close-press': 'close-button',
+    'trigger-press': 'trigger',
+    swipe: 'swipe',
+};
+/** Below this width the drawer is a bottom sheet (ADR-0006 §4: 40rem). */
+const sheetQuery = '(max-width: 39.99rem)';
+const hasMatchMedia = () => typeof window !== 'undefined' && typeof window.matchMedia === 'function';
+function subscribeSheet(onChange) {
+    if (!hasMatchMedia())
+        return () => { };
+    const list = window.matchMedia(sheetQuery);
+    list.addEventListener('change', onChange);
+    return () => list.removeEventListener('change', onChange);
+}
+const getSheet = () => hasMatchMedia() && window.matchMedia(sheetQuery).matches;
+// Server and hydration render the wide layout; the panel only exists once open.
+const getServerSheet = () => false;
+const useIsoLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
+function CloseIcon() {
+    return (_jsx("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", focusable: "false", children: _jsx("path", { d: "M6 6l12 12M18 6L6 18" }) }));
+}
+export function Drawer({ trigger, title, description, eyebrow, children, actions, open: openProp, defaultOpen = false, onOpenChange, onClosed, side = 'end', size = 'md', closeLabel: closeLabelProp, onCloseRequest, initialFocus, finalFocus, className, }) {
+    const messages = useRhineMessages();
+    const closeLabel = closeLabelProp ?? messages.drawer.close;
+    const [uncontrolled, setUncontrolled] = React.useState(defaultOpen);
+    const controlled = openProp !== undefined;
+    const open = controlled ? openProp : uncontrolled;
+    const container = usePortalContainer();
+    const sheet = React.useSyncExternalStore(subscribeSheet, getSheet, getServerSheet);
+    const titleId = React.useId();
+    // `side` is logical: read the writing direction where the panel renders, once per opening.
+    const [rtl, setRtl] = React.useState(false);
+    useIsoLayoutEffect(() => {
+        if (!open)
+            return;
+        const host = container ?? document.body;
+        setRtl(getComputedStyle(host).direction === 'rtl' || host.closest('[dir]')?.getAttribute('dir') === 'rtl');
+    }, [open, container]);
+    const placement = sheet ? 'bottom' : (side === 'end') !== rtl ? 'right' : 'left';
+    // A body that overflows becomes a focusable, named region so keyboard users can scroll it.
+    const [body, setBody] = React.useState(null);
+    const [scrollable, setScrollable] = React.useState(false);
+    useIsoLayoutEffect(() => {
+        if (!body)
+            return undefined;
+        const update = () => setScrollable(body.scrollHeight > body.clientHeight + 1);
+        update();
+        if (typeof ResizeObserver === 'undefined')
+            return undefined;
+        const observer = new ResizeObserver(update);
+        observer.observe(body);
+        for (const child of Array.from(body.children))
+            observer.observe(child);
+        return () => observer.disconnect();
+    }, [body, children]);
+    const setOpen = (next) => {
+        if (!controlled)
+            setUncontrolled(next);
+        onOpenChange?.(next);
+    };
+    return (_jsxs(BaseDrawer.Root, { open: open, swipeDirection: placement === 'bottom' ? 'down' : placement, onOpenChange: (next, eventDetails) => {
+            if (!next && onCloseRequest) {
+                const reason = closeReasons[eventDetails.reason];
+                if (reason && onCloseRequest(reason) === false) {
+                    eventDetails.cancel();
+                    return;
+                }
+            }
+            setOpen(next);
+        }, onOpenChangeComplete: (isOpen) => {
+            if (!isOpen)
+                onClosed?.();
+        }, children: [trigger && _jsx(BaseDrawer.Trigger, { render: trigger }), _jsxs(BaseDrawer.Portal, { container: container, children: [_jsx(BaseDrawer.Backdrop, { className: "rl-drawer__backdrop" }), _jsx(BaseDrawer.Viewport, { className: "rl-drawer__viewport", "data-placement": placement, children: _jsxs(BaseDrawer.Popup, { className: cx('rl-drawer', className), "data-slot": "drawer", "data-placement": placement, "data-size": size, initialFocus: initialFocus, finalFocus: finalFocus, children: [_jsx("span", { className: "rl-drawer__handle", "aria-hidden": "true" }), _jsxs(BaseDrawer.Content, { className: "rl-drawer__content", children: [_jsxs("header", { className: "rl-drawer__header", children: [_jsxs("div", { className: "rl-drawer__heading", children: [eyebrow != null && _jsx("p", { className: "rl-dialog__eyebrow", children: eyebrow }), _jsx(BaseDrawer.Title, { id: titleId, className: "rl-dialog__title rl-drawer__title", children: title }), description != null && (_jsx(BaseDrawer.Description, { className: "rl-dialog__description", children: description }))] }), _jsx(BaseDrawer.Close, { render: _jsx(IconButton, { className: "rl-drawer__close", icon: _jsx(CloseIcon, {}), label: closeLabel }) })] }), _jsx("div", { ref: setBody, className: "rl-drawer__body", role: scrollable ? 'region' : undefined, "aria-labelledby": scrollable ? titleId : undefined, tabIndex: scrollable ? 0 : undefined, children: children }), actions != null && _jsx("footer", { className: "rl-drawer__actions", children: actions })] })] }) })] })] }));
+}
+/** Wraps a button so activating it closes the nearest Drawer (reason `close-button`). */
+export function DrawerClose({ children }) {
+    return _jsx(BaseDrawer.Close, { render: children });
+}
+//# sourceMappingURL=Drawer.js.map

package/dist/components/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../src/components/Drawer.tsx"],"names":[],"mappings":"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"}

package/dist/components/EmptyState.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+/**
+ * Placeholder for a region with nothing to show (ADR-0006 §6). `kind` only picks the default
+ * decorative icon. The title is a heading when `headingLevel` is given, otherwise a paragraph
+ * (e.g. inside a table cell). No live role: the filter result count announces empty results.
+ *
+ *   <EmptyState kind="no-results" title="没有符合条件的记录" headingLevel={3}
+ *     description="调整筛选条件后重试。" action={<Button size="sm" variant="secondary">清除筛选</Button>} />
+ */
+export type EmptyStateKind = 'empty' | 'no-results' | 'no-permission' | 'first-use';
+export type EmptyStateSize = 'sm' | 'md';
+export type EmptyStateHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export type EmptyStateProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {
+    title: React.ReactNode;
+    kind?: EmptyStateKind;
+    description?: React.ReactNode;
+    /** Next step, e.g. 「清除筛选」 or 「新建记录」. */
+    action?: React.ReactNode;
+    /** Replace the kind's icon; `null` removes it. Always decorative. */
+    icon?: React.ReactNode;
+    /** Render the title as `<h2>`–`<h6>`; omitted = `<p>`. */
+    headingLevel?: EmptyStateHeadingLevel;
+    /** `sm` inside tables and cards; `md` for a whole region. */
+    size?: EmptyStateSize;
+};
+export declare const EmptyState: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & {
+    title: React.ReactNode;
+    kind?: EmptyStateKind;
+    description?: React.ReactNode;
+    /** Next step, e.g. 「清除筛选」 or 「新建记录」. */
+    action?: React.ReactNode;
+    /** Replace the kind's icon; `null` removes it. Always decorative. */
+    icon?: React.ReactNode;
+    /** Render the title as `<h2>`–`<h6>`; omitted = `<p>`. */
+    headingLevel?: EmptyStateHeadingLevel;
+    /** `sm` inside tables and cards; `md` for a whole region. */
+    size?: EmptyStateSize;
+} & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=EmptyState.d.ts.map

package/dist/components/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;GAOG;AAEH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,YAAY,GAAG,eAAe,GAAG,WAAW,CAAC;AACpF,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,MAAM,MAAM,sBAAsB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEvD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IAClF,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,wCAAwC;IACxC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qEAAqE;IACrE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,sBAAsB,CAAC;IACtC,6DAA6D;IAC7D,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB,CAAC;AAaF,eAAO,MAAM,UAAU;WAxBd,KAAK,CAAC,SAAS;WACf,cAAc;kBACP,KAAK,CAAC,SAAS;IAC7B,wCAAwC;aAC/B,KAAK,CAAC,SAAS;IACxB,qEAAqE;WAC9D,KAAK,CAAC,SAAS;IACtB,0DAA0D;mBAC3C,sBAAsB;IACrC,6DAA6D;WACtD,cAAc;wCAmCrB,CAAC"}

package/dist/components/EmptyState.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cx } from '../utils/cx.js';
+const glyphs = {
+    // Open tray.
+    empty: _jsx("path", { d: "M2.5 9.5 4.5 3.5h7l2 6M2.5 9.5v3h11v-3M2.5 9.5h3.25l.75 1.5h3l.75-1.5h3.25" }),
+    // Magnifier with a dash: nothing matched.
+    'no-results': _jsx("path", { d: "M7 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10ZM10.75 10.75 14 14M5 7h4" }),
+    // Padlock.
+    'no-permission': _jsx("path", { d: "M4 7.5h8v6H4zM5.5 7.5V5.5a2.5 2.5 0 0 1 5 0v2M8 10v1.5" }),
+    // Sheet with a plus: create the first item.
+    'first-use': _jsx("path", { d: "M4 2.5h5.5l2.5 2.5v8.5H4zM9.5 2.5V5H12M8 7.5v4M6 9.5h4" }),
+};
+export const EmptyState = React.forwardRef(function EmptyState({ title, kind = 'empty', description, action, icon, headingLevel, size = 'md', className, ...rest }, ref) {
+    const Title = (headingLevel ? `h${headingLevel}` : 'p');
+    return (_jsxs("div", { ...rest, ref: ref, className: cx('rl-empty', className), "data-slot": "empty-state", "data-kind": kind, "data-size": size, children: [icon === undefined ? (_jsx("svg", { className: "rl-empty__icon rl-empty__glyph", viewBox: "0 0 16 16", "aria-hidden": "true", focusable: "false", children: glyphs[kind] })) : icon === null ? null : (_jsx("span", { className: "rl-empty__icon", "aria-hidden": "true", children: icon })), _jsx(Title, { className: "rl-empty__title", children: title }), description != null && description !== false && _jsx("p", { className: "rl-empty__description", children: description }), action != null && action !== false && _jsx("div", { className: "rl-empty__action", children: action })] }));
+});
+//# sourceMappingURL=EmptyState.js.map

package/dist/components/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AA6BpC,MAAM,MAAM,GAA4C;IACtD,aAAa;IACb,KAAK,EAAE,eAAM,CAAC,EAAC,4EAA4E,GAAG;IAC9F,0CAA0C;IAC1C,YAAY,EAAE,eAAM,CAAC,EAAC,8DAA8D,GAAG;IACvF,WAAW;IACX,eAAe,EAAE,eAAM,CAAC,EAAC,wDAAwD,GAAG;IACpF,4CAA4C;IAC5C,WAAW,EAAE,eAAM,CAAC,EAAC,wDAAwD,GAAG;CACjF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAkC,SAAS,UAAU,CAC7F,EAAE,KAAK,EAAE,IAAI,GAAG,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EACnG,GAAG;IAEH,MAAM,KAAK,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,YAAY,EAAE,CAAC,CAAC,CAAC,GAAG,CAAQ,CAAC;IAC/D,OAAO,CACL,kBAAS,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,eAAY,aAAa,eAAY,IAAI,eAAa,IAAI,aACpH,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CACpB,cAAK,SAAS,EAAC,gCAAgC,EAAC,OAAO,EAAC,WAAW,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO,YACrG,MAAM,CAAC,IAAI,CAAC,GACT,CACP,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACzB,eAAM,SAAS,EAAC,gBAAgB,iBAAa,MAAM,YAChD,IAAI,GACA,CACR,EACD,KAAC,KAAK,IAAC,SAAS,EAAC,iBAAiB,YAAE,KAAK,GAAS,EACjD,WAAW,IAAI,IAAI,IAAI,WAAW,KAAK,KAAK,IAAI,YAAG,SAAS,EAAC,uBAAuB,YAAE,WAAW,GAAK,EACtG,MAAM,IAAI,IAAI,IAAI,MAAM,KAAK,KAAK,IAAI,cAAK,SAAS,EAAC,kBAAkB,YAAE,MAAM,GAAO,IACnF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/components/Field.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Field as BaseField } from '@base-ui/react/field';
+/**
+ * Form field built on Base UI Field (ADR-0001): label, description and error are
+ * wired to the control via aria-labelledby / aria-describedby / aria-invalid automatically.
+ *
+ * Simple form:
+ *   <Field label="记录编号" description="由归档系统分配" error="请填写记录编号" required>
+ *     <Input name="id" />
+ *   </Field>
+ */
+type BaseRootProps = React.ComponentProps<typeof BaseField.Root>;
+export type FieldValidationMode = 'onSubmit' | 'onBlur' | 'onChange';
+export type FieldProps = Omit<BaseRootProps, 'className' | 'style' | 'render' | 'children'> & {
+    label: React.ReactNode;
+    /** Persistent hint, read after the label. Keep it about the expected format, not marketing copy. */
+    description?: React.ReactNode;
+    /**
+     * Error text. A string shows on any native validity failure; pass `invalid` together
+     * with `error` to drive it from an external validator.
+     */
+    error?: React.ReactNode;
+    /** Restrict when `error` is shown to one ValidityState key (e.g. `valueMissing`). */
+    errorMatch?: React.ComponentProps<typeof BaseField.Error>['match'];
+    /** Visual + semantic required marker. Also set `required` on the control for native validation. */
+    required?: boolean;
+    /** Visually de-emphasised "(可选)" suffix for optional fields in mostly-required forms. */
+    optional?: boolean;
+    /** Stack (default) or place the label in a fixed-width column on wide containers. */
+    layout?: 'stacked' | 'inline';
+    className?: string;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+};
+export declare const Field: React.ForwardRefExoticComponent<Omit<FieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Field.d.ts.map

package/dist/components/Field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/components/Field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAI1D;;;;;;;;GAQG;AAEH,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC;AAEjE,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;AAErE,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC,GAAG;IAC5F,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,oGAAoG;IACpG,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,qFAAqF;IACrF,UAAU,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC;IACnE,mGAAmG;IACnG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yFAAyF;IACzF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,KAAK,gGAwChB,CAAC"}

package/dist/components/Field.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Field as BaseField } from '@base-ui/react/field';
+import { cx } from '../utils/cx.js';
+import { FieldErrorMessage, LabelText } from './fieldParts.js';
+export const Field = React.forwardRef(function Field({ label, description, error, errorMatch, required = false, optional = false, invalid, layout = 'stacked', className, style, children, ...rest }, ref) {
+    // An externally driven error (`invalid` + `error`) must always render; otherwise follow native validity.
+    const match = errorMatch ?? (invalid ? true : undefined);
+    return (_jsxs(BaseField.Root, { ...rest, ref: ref, invalid: invalid, className: cx('rl-field', className), style: style, "data-slot": "field", "data-layout": layout, "data-required": required || undefined, children: [_jsx(BaseField.Label, { className: "rl-field__label", children: _jsx(LabelText, { label: label, required: required, optional: optional }) }), _jsxs("div", { className: "rl-field__body", children: [children, description != null && _jsx(BaseField.Description, { className: "rl-field__description", children: description }), (error != null || rest.name != null) && _jsx(FieldErrorMessage, { error: error, match: match, name: rest.name })] })] }));
+});
+//# sourceMappingURL=Field.js.map

package/dist/components/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../src/components/Field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAsC/D,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAA6B,SAAS,KAAK,CAC9E,EACE,KAAK,EACL,WAAW,EACX,KAAK,EACL,UAAU,EACV,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,MAAM,GAAG,SAAS,EAClB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG;IAEH,yGAAyG;IACzG,MAAM,KAAK,GAAG,UAAU,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACzD,OAAO,CACL,MAAC,SAAS,CAAC,IAAI,OACT,IAAI,EACR,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,EACpC,KAAK,EAAE,KAAK,eACF,OAAO,iBACJ,MAAM,mBACJ,QAAQ,IAAI,SAAS,aAEpC,KAAC,SAAS,CAAC,KAAK,IAAC,SAAS,EAAC,iBAAiB,YAC1C,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,GACnD,EAClB,eAAK,SAAS,EAAC,gBAAgB,aAC5B,QAAQ,EACR,WAAW,IAAI,IAAI,IAAI,KAAC,SAAS,CAAC,WAAW,IAAC,SAAS,EAAC,uBAAuB,YAAE,WAAW,GAAyB,EACrH,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,IACvG,IACS,CAClB,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/components/Fieldset.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';
+type BaseRootProps = React.ComponentProps<typeof BaseFieldset.Root>;
+export type FieldsetProps = Omit<BaseRootProps, 'className' | 'style' | 'render' | 'children'> & {
+    /** Section title; names the group for assistive tech. */
+    legend: React.ReactNode;
+    /** Read after the legend as the group's description. */
+    description?: React.ReactNode;
+    /** `disabled` disables every Field and control inside, including Base UI ones. */
+    disabled?: boolean;
+    legendOptional?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+};
+/**
+ * Groups related fields under a visible legend (a native `<fieldset>`):
+ *
+ *   <Fieldset legend="联系方式" description="用于复核提醒。">
+ *     <Field label="邮箱"><Input type="email" /></Field>
+ *   </Fieldset>
+ */
+export declare const Fieldset: React.ForwardRefExoticComponent<Omit<FieldsetProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=Fieldset.d.ts.map

package/dist/components/Fieldset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.d.ts","sourceRoot":"","sources":["../../src/components/Fieldset.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGnE,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC;AAEpE,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC,GAAG;IAC/F,yDAAyD;IACzD,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,wDAAwD;IACxD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,gGAuBnB,CAAC"}

package/dist/components/Fieldset.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';
+import { cx } from '../utils/cx.js';
+/**
+ * Groups related fields under a visible legend (a native `<fieldset>`):
+ *
+ *   <Fieldset legend="联系方式" description="用于复核提醒。">
+ *     <Field label="邮箱"><Input type="email" /></Field>
+ *   </Fieldset>
+ */
+export const Fieldset = React.forwardRef(function Fieldset({ legend, description, legendOptional = false, className, style, children, ...rest }, ref) {
+    const descriptionId = React.useId();
+    return (_jsxs(BaseFieldset.Root, { ...rest, ref: ref, className: cx('rl-fieldset', className), style: style, "data-slot": "fieldset", "aria-describedby": description != null ? descriptionId : undefined, children: [_jsxs(BaseFieldset.Legend, { className: "rl-fieldset__legend", children: [legend, _jsx("span", { className: legendOptional ? undefined : 'rl-visually-hidden', children: legendOptional ? '(optional)' : '' })] }), description != null && (_jsx("p", { id: descriptionId, className: "rl-fieldset__description", children: description })), _jsx("div", { className: "rl-fieldset__body", children: children })] }));
+});
+//# sourceMappingURL=Fieldset.js.map

package/dist/components/Fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.js","sourceRoot":"","sources":["../../src/components/Fieldset.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAiBpC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAA6B,SAAS,QAAQ,CACpF,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,GAAG,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EACpF,GAAG;IAEH,MAAM,aAAa,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;IACpC,OAAO,CACL,MAAC,YAAY,CAAC,IAAI,OACZ,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,EACvC,KAAK,EAAE,KAAK,eACF,UAAU,sBACF,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,aAEjE,MAAC,YAAY,CAAC,MAAM,IAAC,SAAS,EAAC,qBAAqB,aAAE,MAAM,EAAC,eAAM,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAoB,YAAG,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,GAAQ,IAAsB,EACjM,WAAW,IAAI,IAAI,IAAI,CACtB,YAAG,EAAE,EAAE,aAAa,EAAE,SAAS,EAAC,0BAA0B,YACvD,WAAW,GACV,CACL,EACD,cAAK,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAO,IACjC,CACrB,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/components/FileDropZone.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+/**
+ * File picker and drop target (ADR-0010 §2). The control is a real `<input type="file">`: it is
+ * visually hidden but stays focusable, and its visible `<label>` looks like a button, so Tab,
+ * Enter / Space and screen readers use the native picker. Dropping files on the area runs the
+ * same validation (`accept` like the native attribute, `maxSize`, `maxFiles`). Rejections are
+ * announced in a polite live region. No upload logic: `onFiles` receives the accepted files.
+ *
+ *   <FileDropZone label="样本图像" accept="image/*" maxSize={1024 * 1024} onFiles={add} />
+ */
+export type FileRejectionReason = 'type' | 'size' | 'count';
+export interface FileRejection {
+    file: File;
+    reason: FileRejectionReason;
+}
+export type FileDropZoneProps = {
+    /** Visible label above the drop area. */
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    /** Same syntax as the native attribute: `.png,.jpg`, `image/*`, `application/pdf`. */
+    accept?: string;
+    multiple?: boolean;
+    /** Maximum size of one file, in bytes. */
+    maxSize?: number;
+    /** Maximum number of files accepted from one pick or drop (default: 1 unless `multiple`). */
+    maxFiles?: number;
+    disabled?: boolean;
+    /** Form field name of the native input. The input is cleared after each pick, so submit files yourself. */
+    name?: string;
+    /** Accepted files of one pick or drop (not called when every file was rejected). */
+    onFiles?: (files: File[]) => void;
+    /** Rejected files of one pick or drop, with the first reason found (type, then size, then count). */
+    onReject?: (rejections: FileRejection[]) => void;
+    /** Custom prompt inside the drop area (replaces the default text, not the button). */
+    children?: React.ReactNode;
+    /** Text of the browse button (default from messages). */
+    browseLabel?: React.ReactNode;
+    /** Formats `maxSize` for rejection messages (default: B / KB / MB in the provider locale). */
+    formatSize?: (bytes: number) => string;
+    /** Visual and semantic invalid state, e.g. a required attachment is missing. */
+    invalid?: boolean;
+    /** Error text shown under the area while `invalid`. */
+    error?: React.ReactNode;
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+};
+/** Whether `file` matches a native-style `accept` list (extensions, exact MIME types, `type/*`). */
+export declare function matchesAccept(file: Pick<File, 'name' | 'type'>, accept: string | undefined): boolean;
+/** Splits files into accepted and rejected ones; first failing rule wins (type → size → count). */
+export declare function validateFiles(files: readonly File[], { accept, maxSize, maxFiles }: {
+    accept?: string;
+    maxSize?: number;
+    maxFiles?: number;
+}): {
+    accepted: File[];
+    rejected: FileRejection[];
+};
+export declare const FileDropZone: React.ForwardRefExoticComponent<FileDropZoneProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=FileDropZone.d.ts.map

package/dist/components/FileDropZone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDropZone.d.ts","sourceRoot":"","sources":["../../src/components/FileDropZone.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;GAQG;AAEH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5D,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,mBAAmB,CAAC;CAC7B;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,yCAAyC;IACzC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,sFAAsF;IACtF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2GAA2G;IAC3G,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oFAAoF;IACpF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClC,qGAAqG;IACrG,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IACjD,sFAAsF;IACtF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yDAAyD;IACzD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,8FAA8F;IAC9F,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,oGAAoG;AACpG,wBAAgB,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAapG;AAED,mGAAmG;AACnG,wBAAgB,aAAa,CAC3B,KAAK,EAAE,SAAS,IAAI,EAAE,EACtB,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,GACtF;IAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAAC,QAAQ,EAAE,aAAa,EAAE,CAAA;CAAE,CAUjD;AAmBD,eAAO,MAAM,YAAY,4FA+IvB,CAAC"}

package/dist/components/FileDropZone.js

@@ -0,0 +1,121 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useRhineLocale } from '../provider/messages.js';
+import { cx } from '../utils/cx.js';
+/** Whether `file` matches a native-style `accept` list (extensions, exact MIME types, `type/*`). */
+export function matchesAccept(file, accept) {
+    if (!accept || accept.trim() === '')
+        return true;
+    const name = file.name.toLowerCase();
+    const type = (file.type || '').toLowerCase();
+    return accept
+        .split(',')
+        .map((token) => token.trim().toLowerCase())
+        .filter(Boolean)
+        .some((token) => {
+        if (token.startsWith('.'))
+            return name.endsWith(token);
+        if (token.endsWith('/*'))
+            return type.startsWith(token.slice(0, -1));
+        return type === token;
+    });
+}
+/** Splits files into accepted and rejected ones; first failing rule wins (type → size → count). */
+export function validateFiles(files, { accept, maxSize, maxFiles }) {
+    const accepted = [];
+    const rejected = [];
+    for (const file of files) {
+        if (!matchesAccept(file, accept))
+            rejected.push({ file, reason: 'type' });
+        else if (maxSize !== undefined && file.size > maxSize)
+            rejected.push({ file, reason: 'size' });
+        else if (maxFiles !== undefined && accepted.length >= maxFiles)
+            rejected.push({ file, reason: 'count' });
+        else
+            accepted.push(file);
+    }
+    return { accepted, rejected };
+}
+function defaultFormatSize(bytes, format) {
+    if (bytes >= 1024 * 1024)
+        return `${format(Math.round((bytes / (1024 * 1024)) * 10) / 10)} MB`;
+    if (bytes >= 1024)
+        return `${format(Math.round((bytes / 1024) * 10) / 10)} KB`;
+    return `${format(bytes)} B`;
+}
+function UploadIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { d: "M12 15V4m0 0-4 4m4-4 4 4", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M4 14v4.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V14", strokeLinecap: "round" })] }));
+}
+const hasFiles = (event) => Array.from(event.dataTransfer?.types ?? []).includes('Files');
+export const FileDropZone = React.forwardRef(function FileDropZone({ label, description, accept, multiple = false, maxSize, maxFiles, disabled = false, name, onFiles, onReject, children, browseLabel, formatSize, invalid = false, error, id, className, style, }, ref) {
+    const { messages, formatNumber } = useRhineLocale();
+    const copy = messages.fileDropZone;
+    const autoId = React.useId();
+    const inputId = id ?? `${autoId}-input`;
+    const labelId = `${autoId}-label`;
+    const descriptionId = `${autoId}-description`;
+    const errorId = `${autoId}-error`;
+    const [dragOver, setDragOver] = React.useState(false);
+    const [announcement, setAnnouncement] = React.useState('');
+    // Nested children fire dragenter / dragleave; count them so the highlight doesn't flicker.
+    const depth = React.useRef(0);
+    const limit = maxFiles ?? (multiple ? undefined : 1);
+    const describeRejection = (rejection) => {
+        const fileName = rejection.file.name;
+        if (rejection.reason === 'type')
+            return copy.rejectedType(fileName);
+        if (rejection.reason === 'size') {
+            const size = maxSize ?? 0;
+            return copy.rejectedSize(fileName, formatSize ? formatSize(size) : defaultFormatSize(size, formatNumber));
+        }
+        return copy.rejectedCount(fileName, limit ?? 0, formatNumber);
+    };
+    const handleFiles = (list) => {
+        const files = list ? Array.from(list) : [];
+        if (files.length === 0)
+            return;
+        const { accepted, rejected } = validateFiles(files, { accept, maxSize, maxFiles: limit });
+        const lines = [...(accepted.length > 0 ? [copy.accepted(accepted.length, formatNumber)] : []), ...rejected.map(describeRejection)];
+        setAnnouncement(lines.join('\n'));
+        if (accepted.length > 0)
+            onFiles?.(accepted);
+        if (rejected.length > 0)
+            onReject?.(rejected);
+    };
+    const onDragEnter = (event) => {
+        if (disabled || !hasFiles(event))
+            return;
+        event.preventDefault();
+        depth.current += 1;
+        setDragOver(true);
+    };
+    const onDragOver = (event) => {
+        if (disabled || !hasFiles(event))
+            return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'copy';
+    };
+    const onDragLeave = () => {
+        if (disabled)
+            return;
+        depth.current = Math.max(0, depth.current - 1);
+        if (depth.current === 0)
+            setDragOver(false);
+    };
+    const onDrop = (event) => {
+        depth.current = 0;
+        setDragOver(false);
+        if (disabled)
+            return;
+        event.preventDefault();
+        handleFiles(event.dataTransfer?.files);
+    };
+    const describedBy = [description != null ? descriptionId : null, invalid && error != null ? errorId : null].filter(Boolean).join(' ') || undefined;
+    return (_jsxs("div", { className: cx('rl-file-drop', className), style: style, "data-slot": "file-drop-zone", "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, children: [_jsx("span", { id: labelId, className: "rl-file-drop__label", children: label }), description != null && (_jsx("p", { id: descriptionId, className: "rl-file-drop__description", children: description })), _jsxs("div", { className: "rl-file-drop__area", "data-drag-over": dragOver || undefined, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, children: [_jsx("span", { className: "rl-file-drop__icon", "aria-hidden": "true", children: _jsx(UploadIcon, {}) }), _jsx("span", { className: "rl-file-drop__prompt", children: children ?? copy.prompt }), _jsx("input", { ref: ref, id: inputId, type: "file", className: "rl-file-drop__input", name: name, accept: accept, multiple: multiple, disabled: disabled, "aria-labelledby": `${labelId} ${inputId}-browse`, "aria-describedby": describedBy, "aria-invalid": invalid || undefined, onChange: (event) => {
+                            handleFiles(event.currentTarget.files);
+                            // Allow picking the same file again.
+                            event.currentTarget.value = '';
+                        } }), _jsx("label", { id: `${inputId}-browse`, htmlFor: inputId, className: "rl-file-drop__browse", children: browseLabel ?? copy.browse })] }), invalid && error != null && (_jsx("p", { id: errorId, className: "rl-file-drop__error", children: error })), _jsx("p", { className: "rl-file-drop__status", role: "status", "aria-live": "polite", children: announcement })] }));
+});
+//# sourceMappingURL=FileDropZone.js.map