@wzrhine/react 0.0.0-stage → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +80 -0
- package/LICENSE +21 -0
- package/README.md +37 -3
- package/dist/advanced.css +398 -0
- package/dist/archive.css +704 -0
- package/dist/command.css +671 -0
- package/dist/components/Accordion.d.ts +82 -0
- package/dist/components/Accordion.d.ts.map +1 -0
- package/dist/components/Accordion.js +19 -0
- package/dist/components/Accordion.js.map +1 -0
- package/dist/components/Alert.d.ts +60 -0
- package/dist/components/Alert.d.ts.map +1 -0
- package/dist/components/Alert.js +29 -0
- package/dist/components/Alert.js.map +1 -0
- package/dist/components/AlertDialog.d.ts +41 -0
- package/dist/components/AlertDialog.d.ts.map +1 -0
- package/dist/components/AlertDialog.js +101 -0
- package/dist/components/AlertDialog.js.map +1 -0
- package/dist/components/ArchiveCard.d.ts +58 -0
- package/dist/components/ArchiveCard.d.ts.map +1 -0
- package/dist/components/ArchiveCard.js +40 -0
- package/dist/components/ArchiveCard.js.map +1 -0
- package/dist/components/Breadcrumb.d.ts +48 -0
- package/dist/components/Breadcrumb.d.ts.map +1 -0
- package/dist/components/Breadcrumb.js +55 -0
- package/dist/components/Breadcrumb.js.map +1 -0
- package/dist/components/Button.d.ts +30 -0
- package/dist/components/Button.d.ts.map +1 -0
- package/dist/components/Button.js +24 -0
- package/dist/components/Button.js.map +1 -0
- package/dist/components/Checkbox.d.ts +81 -0
- package/dist/components/Checkbox.d.ts.map +1 -0
- package/dist/components/Checkbox.js +34 -0
- package/dist/components/Checkbox.js.map +1 -0
- package/dist/components/Collapsible.d.ts +47 -0
- package/dist/components/Collapsible.d.ts.map +1 -0
- package/dist/components/Collapsible.js +12 -0
- package/dist/components/Collapsible.js.map +1 -0
- package/dist/components/Combobox.d.ts +74 -0
- package/dist/components/Combobox.d.ts.map +1 -0
- package/dist/components/Combobox.js +61 -0
- package/dist/components/Combobox.js.map +1 -0
- package/dist/components/CommandPalette.d.ts +77 -0
- package/dist/components/CommandPalette.d.ts.map +1 -0
- package/dist/components/CommandPalette.js +150 -0
- package/dist/components/CommandPalette.js.map +1 -0
- package/dist/components/ContextMenu.d.ts +31 -0
- package/dist/components/ContextMenu.d.ts.map +1 -0
- package/dist/components/ContextMenu.js +25 -0
- package/dist/components/ContextMenu.js.map +1 -0
- package/dist/components/DataTable.d.ts +83 -0
- package/dist/components/DataTable.d.ts.map +1 -0
- package/dist/components/DataTable.js +97 -0
- package/dist/components/DataTable.js.map +1 -0
- package/dist/components/Dialog.d.ts +45 -0
- package/dist/components/Dialog.d.ts.map +1 -0
- package/dist/components/Dialog.js +46 -0
- package/dist/components/Dialog.js.map +1 -0
- package/dist/components/Drawer.d.ts +56 -0
- package/dist/components/Drawer.d.ts.map +1 -0
- package/dist/components/Drawer.js +92 -0
- package/dist/components/Drawer.js.map +1 -0
- package/dist/components/EmptyState.d.ts +39 -0
- package/dist/components/EmptyState.d.ts.map +1 -0
- package/dist/components/EmptyState.js +19 -0
- package/dist/components/EmptyState.js.map +1 -0
- package/dist/components/Field.d.ts +37 -0
- package/dist/components/Field.d.ts.map +1 -0
- package/dist/components/Field.js +12 -0
- package/dist/components/Field.js.map +1 -0
- package/dist/components/Fieldset.d.ts +24 -0
- package/dist/components/Fieldset.d.ts.map +1 -0
- package/dist/components/Fieldset.js +17 -0
- package/dist/components/Fieldset.js.map +1 -0
- package/dist/components/FileDropZone.d.ts +60 -0
- package/dist/components/FileDropZone.d.ts.map +1 -0
- package/dist/components/FileDropZone.js +121 -0
- package/dist/components/FileDropZone.js.map +1 -0
- package/dist/components/Form.d.ts +21 -0
- package/dist/components/Form.d.ts.map +1 -0
- package/dist/components/Form.js +20 -0
- package/dist/components/Form.js.map +1 -0
- package/dist/components/IconButton.d.ts +25 -0
- package/dist/components/IconButton.d.ts.map +1 -0
- package/dist/components/IconButton.js +14 -0
- package/dist/components/IconButton.js.map +1 -0
- package/dist/components/Input.d.ts +24 -0
- package/dist/components/Input.d.ts.map +1 -0
- package/dist/components/Input.js +15 -0
- package/dist/components/Input.js.map +1 -0
- package/dist/components/Menu.d.ts +66 -0
- package/dist/components/Menu.d.ts.map +1 -0
- package/dist/components/Menu.js +34 -0
- package/dist/components/Menu.js.map +1 -0
- package/dist/components/MetadataList.d.ts +51 -0
- package/dist/components/MetadataList.d.ts.map +1 -0
- package/dist/components/MetadataList.js +25 -0
- package/dist/components/MetadataList.js.map +1 -0
- package/dist/components/NumberField.d.ts +52 -0
- package/dist/components/NumberField.d.ts.map +1 -0
- package/dist/components/NumberField.js +21 -0
- package/dist/components/NumberField.js.map +1 -0
- package/dist/components/Pagination.d.ts +40 -0
- package/dist/components/Pagination.d.ts.map +1 -0
- package/dist/components/Pagination.js +64 -0
- package/dist/components/Pagination.js.map +1 -0
- package/dist/components/Popover.d.ts +44 -0
- package/dist/components/Popover.d.ts.map +1 -0
- package/dist/components/Popover.js +14 -0
- package/dist/components/Popover.js.map +1 -0
- package/dist/components/Progress.d.ts +57 -0
- package/dist/components/Progress.d.ts.map +1 -0
- package/dist/components/Progress.js +31 -0
- package/dist/components/Progress.js.map +1 -0
- package/dist/components/Radio.d.ts +61 -0
- package/dist/components/Radio.d.ts.map +1 -0
- package/dist/components/Radio.js +18 -0
- package/dist/components/Radio.js.map +1 -0
- package/dist/components/RecordHeader.d.ts +53 -0
- package/dist/components/RecordHeader.d.ts.map +1 -0
- package/dist/components/RecordHeader.js +19 -0
- package/dist/components/RecordHeader.js.map +1 -0
- package/dist/components/ScrollArea.d.ts +55 -0
- package/dist/components/ScrollArea.d.ts.map +1 -0
- package/dist/components/ScrollArea.js +63 -0
- package/dist/components/ScrollArea.js.map +1 -0
- package/dist/components/Select.d.ts +39 -0
- package/dist/components/Select.d.ts.map +1 -0
- package/dist/components/Select.js +24 -0
- package/dist/components/Select.js.map +1 -0
- package/dist/components/Separator.d.ts +26 -0
- package/dist/components/Separator.d.ts.map +1 -0
- package/dist/components/Separator.js +22 -0
- package/dist/components/Separator.js.map +1 -0
- package/dist/components/Skeleton.d.ts +31 -0
- package/dist/components/Skeleton.d.ts.map +1 -0
- package/dist/components/Skeleton.js +17 -0
- package/dist/components/Skeleton.js.map +1 -0
- package/dist/components/Slider.d.ts +65 -0
- package/dist/components/Slider.d.ts.map +1 -0
- package/dist/components/Slider.js +30 -0
- package/dist/components/Slider.js.map +1 -0
- package/dist/components/Spinner.d.ts +23 -0
- package/dist/components/Spinner.d.ts.map +1 -0
- package/dist/components/Spinner.js +13 -0
- package/dist/components/Spinner.js.map +1 -0
- package/dist/components/SplitButton.d.ts +59 -0
- package/dist/components/SplitButton.d.ts.map +1 -0
- package/dist/components/SplitButton.js +30 -0
- package/dist/components/SplitButton.js.map +1 -0
- package/dist/components/Stat.d.ts +53 -0
- package/dist/components/Stat.d.ts.map +1 -0
- package/dist/components/Stat.js +23 -0
- package/dist/components/Stat.js.map +1 -0
- package/dist/components/StatusBadge.d.ts +19 -0
- package/dist/components/StatusBadge.d.ts.map +1 -0
- package/dist/components/StatusBadge.js +8 -0
- package/dist/components/StatusBadge.js.map +1 -0
- package/dist/components/StatusIndicator.d.ts +29 -0
- package/dist/components/StatusIndicator.d.ts.map +1 -0
- package/dist/components/StatusIndicator.js +8 -0
- package/dist/components/StatusIndicator.js.map +1 -0
- package/dist/components/Surface.d.ts +29 -0
- package/dist/components/Surface.d.ts.map +1 -0
- package/dist/components/Surface.js +8 -0
- package/dist/components/Surface.js.map +1 -0
- package/dist/components/Switch.d.ts +22 -0
- package/dist/components/Switch.d.ts.map +1 -0
- package/dist/components/Switch.js +11 -0
- package/dist/components/Switch.js.map +1 -0
- package/dist/components/Tabs.d.ts +45 -0
- package/dist/components/Tabs.d.ts.map +1 -0
- package/dist/components/Tabs.js +49 -0
- package/dist/components/Tabs.js.map +1 -0
- package/dist/components/Text.d.ts +33 -0
- package/dist/components/Text.d.ts.map +1 -0
- package/dist/components/Text.js +21 -0
- package/dist/components/Text.js.map +1 -0
- package/dist/components/Textarea.d.ts +54 -0
- package/dist/components/Textarea.d.ts.map +1 -0
- package/dist/components/Textarea.js +31 -0
- package/dist/components/Textarea.js.map +1 -0
- package/dist/components/Timeline.d.ts +35 -0
- package/dist/components/Timeline.d.ts.map +1 -0
- package/dist/components/Timeline.js +13 -0
- package/dist/components/Timeline.js.map +1 -0
- package/dist/components/Toast.d.ts +67 -0
- package/dist/components/Toast.d.ts.map +1 -0
- package/dist/components/Toast.js +94 -0
- package/dist/components/Toast.js.map +1 -0
- package/dist/components/Tooltip.d.ts +26 -0
- package/dist/components/Tooltip.d.ts.map +1 -0
- package/dist/components/Tooltip.js +15 -0
- package/dist/components/Tooltip.js.map +1 -0
- package/dist/components/VisuallyHidden.d.ts +17 -0
- package/dist/components/VisuallyHidden.d.ts.map +1 -0
- package/dist/components/VisuallyHidden.js +12 -0
- package/dist/components/VisuallyHidden.js.map +1 -0
- package/dist/components/fieldParts.d.ts +17 -0
- package/dist/components/fieldParts.d.ts.map +1 -0
- package/dist/components/fieldParts.js +22 -0
- package/dist/components/fieldParts.js.map +1 -0
- package/dist/components/meter-utils.d.ts +15 -0
- package/dist/components/meter-utils.d.ts.map +1 -0
- package/dist/components/meter-utils.js +15 -0
- package/dist/components/meter-utils.js.map +1 -0
- package/dist/components/pagination-utils.d.ts +10 -0
- package/dist/components/pagination-utils.d.ts.map +1 -0
- package/dist/components/pagination-utils.js +36 -0
- package/dist/components/pagination-utils.js.map +1 -0
- package/dist/components.css +632 -0
- package/dist/data.css +600 -0
- package/dist/disclosure.css +93 -0
- package/dist/drawer.css +226 -0
- package/dist/feedback.css +454 -0
- package/dist/forms.css +516 -0
- package/dist/index.d.ts +117 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +61 -0
- package/dist/index.js.map +1 -0
- package/dist/motion/lifecycle.d.ts +44 -0
- package/dist/motion/lifecycle.d.ts.map +1 -0
- package/dist/motion/lifecycle.js +73 -0
- package/dist/motion/lifecycle.js.map +1 -0
- package/dist/motion/presence.d.ts +69 -0
- package/dist/motion/presence.d.ts.map +1 -0
- package/dist/motion/presence.js +103 -0
- package/dist/motion/presence.js.map +1 -0
- package/dist/motion/presets.d.ts +63 -0
- package/dist/motion/presets.d.ts.map +1 -0
- package/dist/motion/presets.js +30 -0
- package/dist/motion/presets.js.map +1 -0
- package/dist/motion/resolve.d.ts +31 -0
- package/dist/motion/resolve.d.ts.map +1 -0
- package/dist/motion/resolve.js +40 -0
- package/dist/motion/resolve.js.map +1 -0
- package/dist/motion/useRhineMotion.d.ts +19 -0
- package/dist/motion/useRhineMotion.d.ts.map +1 -0
- package/dist/motion/useRhineMotion.js +19 -0
- package/dist/motion/useRhineMotion.js.map +1 -0
- package/dist/motion/visibility.d.ts +6 -0
- package/dist/motion/visibility.d.ts.map +1 -0
- package/dist/motion/visibility.js +31 -0
- package/dist/motion/visibility.js.map +1 -0
- package/dist/overlays.css +465 -0
- package/dist/provider/RhineProvider.d.ts +65 -0
- package/dist/provider/RhineProvider.d.ts.map +1 -0
- package/dist/provider/RhineProvider.js +26 -0
- package/dist/provider/RhineProvider.js.map +1 -0
- package/dist/provider/messages.d.ts +190 -0
- package/dist/provider/messages.d.ts.map +1 -0
- package/dist/provider/messages.js +160 -0
- package/dist/provider/messages.js.map +1 -0
- package/dist/provider/portal.d.ts +17 -0
- package/dist/provider/portal.d.ts.map +1 -0
- package/dist/provider/portal.js +20 -0
- package/dist/provider/portal.js.map +1 -0
- package/dist/reset.css +45 -0
- package/dist/split.css +159 -0
- package/dist/status.css +353 -0
- package/dist/utils/cx.d.ts +2 -0
- package/dist/utils/cx.d.ts.map +1 -0
- package/dist/utils/cx.js +4 -0
- package/dist/utils/cx.js.map +1 -0
- package/package.json +62 -3
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { Field as BaseField } from '@base-ui/react/field';
|
|
5
|
+
import { Switch as BaseSwitch } from '@base-ui/react/switch';
|
|
6
|
+
import { cx } from '../utils/cx.js';
|
|
7
|
+
import { LabelText } from './fieldParts.js';
|
|
8
|
+
export const Switch = React.forwardRef(function Switch({ label, hideLabel = false, description, disabled, name, className, style, ...rest }, ref) {
|
|
9
|
+
return (_jsxs(BaseField.Root, { className: cx('rl-choice', className), style: style, name: name, disabled: disabled, "data-kind": "switch", "data-hide-label": hideLabel || undefined, children: [_jsxs(BaseField.Label, { className: "rl-choice__label", children: [_jsx(BaseSwitch.Root, { ...rest, ref: ref, className: "rl-switch", "data-slot": "switch", children: _jsx(BaseSwitch.Thumb, { className: "rl-switch__thumb" }) }), _jsx("span", { className: hideLabel ? 'rl-visually-hidden' : 'rl-choice__text', children: _jsx(LabelText, { label: label }) })] }), description != null && (_jsx(BaseField.Description, { className: "rl-choice__description", children: description }))] }));
|
|
10
|
+
});
|
|
11
|
+
//# sourceMappingURL=Switch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../src/components/Switch.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,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAyB5C,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAA2B,SAAS,MAAM,CAC9E,EAAE,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EACpF,GAAG;IAEH,OAAO,CACL,MAAC,SAAS,CAAC,IAAI,IACb,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,EACrC,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,eACR,QAAQ,qBACD,SAAS,IAAI,SAAS,aAEvC,MAAC,SAAS,CAAC,KAAK,IAAC,SAAS,EAAC,kBAAkB,aAC3C,KAAC,UAAU,CAAC,IAAI,OAAK,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,WAAW,eAAW,QAAQ,YAC3E,KAAC,UAAU,CAAC,KAAK,IAAC,SAAS,EAAC,kBAAkB,GAAG,GACjC,EAClB,eAAM,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,iBAAiB,YACnE,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,GAAI,GACtB,IACS,EACjB,WAAW,IAAI,IAAI,IAAI,CACtB,KAAC,SAAS,CAAC,WAAW,IAAC,SAAS,EAAC,wBAAwB,YAAE,WAAW,GAAyB,CAChG,IACc,CAClB,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Tabs as BaseTabs } from '@base-ui/react/tabs';
|
|
3
|
+
/**
|
|
4
|
+
* Tabs on Base UI Tabs (ADR-0001): roving focus with arrow keys, Home/End, automatic
|
|
5
|
+
* tab/tabpanel wiring. The indicator slides via CSS transition on Base UI's
|
|
6
|
+
* --active-tab-* variables (--rl-motion-base); it jumps under reduced motion and
|
|
7
|
+
* retargets from its current position when switched mid-flight.
|
|
8
|
+
*/
|
|
9
|
+
export type TabsVariant = 'line' | 'segmented';
|
|
10
|
+
export type TabsSize = 'sm' | 'md';
|
|
11
|
+
type BaseRootProps = React.ComponentProps<typeof BaseTabs.Root>;
|
|
12
|
+
export type TabsProps = Omit<BaseRootProps, 'className' | 'style' | 'render' | 'value' | 'defaultValue' | 'onValueChange'> & {
|
|
13
|
+
value?: string;
|
|
14
|
+
defaultValue?: string;
|
|
15
|
+
onValueChange?: (value: string) => void;
|
|
16
|
+
variant?: TabsVariant;
|
|
17
|
+
size?: TabsSize;
|
|
18
|
+
className?: string;
|
|
19
|
+
style?: React.CSSProperties;
|
|
20
|
+
};
|
|
21
|
+
export declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
22
|
+
export type TabListProps = Omit<React.ComponentProps<typeof BaseTabs.List>, 'className' | 'style' | 'render'> & {
|
|
23
|
+
/** Required: names the tab set for screen readers (e.g. "记录视图"). */
|
|
24
|
+
'aria-label'?: string;
|
|
25
|
+
'aria-labelledby'?: string;
|
|
26
|
+
className?: string;
|
|
27
|
+
style?: React.CSSProperties;
|
|
28
|
+
};
|
|
29
|
+
export declare const TabList: React.ForwardRefExoticComponent<Omit<TabListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
30
|
+
export type TabProps = Omit<React.ComponentProps<typeof BaseTabs.Tab>, 'className' | 'style' | 'render' | 'value'> & {
|
|
31
|
+
value: string;
|
|
32
|
+
/** Optional count or status after the label; read as part of the tab name. */
|
|
33
|
+
meta?: React.ReactNode;
|
|
34
|
+
className?: string;
|
|
35
|
+
style?: React.CSSProperties;
|
|
36
|
+
};
|
|
37
|
+
export declare const Tab: React.ForwardRefExoticComponent<Omit<TabProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
38
|
+
export type TabPanelProps = Omit<React.ComponentProps<typeof BaseTabs.Panel>, 'className' | 'style' | 'render' | 'value'> & {
|
|
39
|
+
value: string;
|
|
40
|
+
className?: string;
|
|
41
|
+
style?: React.CSSProperties;
|
|
42
|
+
};
|
|
43
|
+
export declare const TabPanel: React.ForwardRefExoticComponent<Omit<TabPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
44
|
+
export {};
|
|
45
|
+
//# sourceMappingURL=Tabs.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/components/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAGvD;;;;;GAKG;AAEH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,CAAC;AAC/C,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnC,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;AAEhE,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,cAAc,GAAG,eAAe,CAAC,GAAG;IAC3H,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,IAAI,+FAgBf,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC,GAAG;IAC9G,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAwBF,eAAO,MAAM,OAAO,kGA2BlB,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IACnH,KAAK,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,GAAG,iGAUd,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IAC1H,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,QAAQ,mGAKnB,CAAC"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { Tabs as BaseTabs } from '@base-ui/react/tabs';
|
|
5
|
+
import { cx } from '../utils/cx.js';
|
|
6
|
+
export const Tabs = React.forwardRef(function Tabs({ variant = 'line', size = 'md', onValueChange, className, style, ...rest }, ref) {
|
|
7
|
+
return (_jsx(BaseTabs.Root, { ...rest, ref: ref, onValueChange: onValueChange ? (v) => onValueChange(String(v)) : undefined, className: cx('rl-tabs', className), style: style, "data-slot": "tabs", "data-variant": variant, "data-size": size }));
|
|
8
|
+
});
|
|
9
|
+
/** Flags horizontal overflow so CSS can fade the trailing edge as a scroll affordance. */
|
|
10
|
+
function useOverflowState(node) {
|
|
11
|
+
const [state, setState] = React.useState({ overflowing: false, atEnd: false });
|
|
12
|
+
React.useEffect(() => {
|
|
13
|
+
if (!node)
|
|
14
|
+
return;
|
|
15
|
+
const update = () => {
|
|
16
|
+
const overflowing = node.scrollWidth > node.clientWidth + 1;
|
|
17
|
+
const atEnd = node.scrollLeft + node.clientWidth >= node.scrollWidth - 1;
|
|
18
|
+
setState((prev) => (prev.overflowing === overflowing && prev.atEnd === atEnd ? prev : { overflowing, atEnd }));
|
|
19
|
+
};
|
|
20
|
+
update();
|
|
21
|
+
node.addEventListener('scroll', update, { passive: true });
|
|
22
|
+
const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(update);
|
|
23
|
+
observer?.observe(node);
|
|
24
|
+
return () => {
|
|
25
|
+
node.removeEventListener('scroll', update);
|
|
26
|
+
observer?.disconnect();
|
|
27
|
+
};
|
|
28
|
+
}, [node]);
|
|
29
|
+
return state;
|
|
30
|
+
}
|
|
31
|
+
export const TabList = React.forwardRef(function TabList({ className, style, children, ...rest }, ref) {
|
|
32
|
+
const [node, setNode] = React.useState(null);
|
|
33
|
+
const { overflowing, atEnd } = useOverflowState(node);
|
|
34
|
+
const setRefs = React.useCallback((el) => {
|
|
35
|
+
setNode(el);
|
|
36
|
+
if (typeof ref === 'function')
|
|
37
|
+
ref(el);
|
|
38
|
+
else if (ref)
|
|
39
|
+
ref.current = el;
|
|
40
|
+
}, [ref]);
|
|
41
|
+
return (_jsxs(BaseTabs.List, { ...rest, ref: setRefs, className: cx('rl-tabs__list', className), style: style, "data-overflowing": overflowing || undefined, "data-scrolled-end": (overflowing && atEnd) || undefined, children: [children, _jsx(BaseTabs.Indicator, { className: "rl-tabs__indicator" })] }));
|
|
42
|
+
});
|
|
43
|
+
export const Tab = React.forwardRef(function Tab({ meta, className, style, children, ...rest }, ref) {
|
|
44
|
+
return (_jsxs(BaseTabs.Tab, { ...rest, ref: ref, className: cx('rl-tabs__tab', className), style: style, children: [_jsx("span", { className: "rl-tabs__label", children: children }), meta != null && _jsx("span", { className: "rl-tabs__meta", children: meta })] }));
|
|
45
|
+
});
|
|
46
|
+
export const TabPanel = React.forwardRef(function TabPanel({ className, style, ...rest }, ref) {
|
|
47
|
+
return _jsx(BaseTabs.Panel, { ...rest, ref: ref, className: cx('rl-tabs__panel', className), style: style });
|
|
48
|
+
});
|
|
49
|
+
//# sourceMappingURL=Tabs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../src/components/Tabs.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export type TextVariant = 'display' | 'heading-1' | 'heading-2' | 'heading-3' | 'body' | 'body-sm' | 'label' | 'meta' | 'mono' | 'eyebrow';
|
|
3
|
+
export type TextTone = 'primary' | 'muted' | 'subtle' | 'accent' | 'danger' | 'success' | 'warning' | 'info';
|
|
4
|
+
export type TextElement = 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'strong' | 'em' | 'small' | 'code' | 'time' | 'dt' | 'dd' | 'figcaption' | 'legend';
|
|
5
|
+
export type TextProps = React.HTMLAttributes<HTMLElement> & {
|
|
6
|
+
/** Type role from the token scale. Visual size is independent of the semantic element. */
|
|
7
|
+
variant?: TextVariant;
|
|
8
|
+
/** Rendered element. Defaults to a sensible element per variant; set it to keep the heading outline correct. */
|
|
9
|
+
as?: TextElement;
|
|
10
|
+
tone?: TextTone;
|
|
11
|
+
/** Clamp to one line with an ellipsis. Pair with `title` when the full text matters. */
|
|
12
|
+
truncate?: boolean;
|
|
13
|
+
/** Tabular numerals for aligned figures in tables and metadata. */
|
|
14
|
+
numeric?: boolean;
|
|
15
|
+
/** Passed through for `as="label"` / `as="time"`. */
|
|
16
|
+
htmlFor?: string;
|
|
17
|
+
dateTime?: string;
|
|
18
|
+
};
|
|
19
|
+
export declare const Text: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
20
|
+
/** Type role from the token scale. Visual size is independent of the semantic element. */
|
|
21
|
+
variant?: TextVariant;
|
|
22
|
+
/** Rendered element. Defaults to a sensible element per variant; set it to keep the heading outline correct. */
|
|
23
|
+
as?: TextElement;
|
|
24
|
+
tone?: TextTone;
|
|
25
|
+
/** Clamp to one line with an ellipsis. Pair with `title` when the full text matters. */
|
|
26
|
+
truncate?: boolean;
|
|
27
|
+
/** Tabular numerals for aligned figures in tables and metadata. */
|
|
28
|
+
numeric?: boolean;
|
|
29
|
+
/** Passed through for `as="label"` / `as="time"`. */
|
|
30
|
+
htmlFor?: string;
|
|
31
|
+
dateTime?: string;
|
|
32
|
+
} & React.RefAttributes<HTMLElement>>;
|
|
33
|
+
//# sourceMappingURL=Text.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/components/Text.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,WAAW,GACX,WAAW,GACX,WAAW,GACX,MAAM,GACN,SAAS,GACT,OAAO,GACP,MAAM,GACN,MAAM,GACN,SAAS,CAAC;AAEd,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAE7G,MAAM,MAAM,WAAW,GACnB,GAAG,GACH,MAAM,GACN,KAAK,GACL,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,OAAO,GACP,QAAQ,GACR,IAAI,GACJ,OAAO,GACP,MAAM,GACN,MAAM,GACN,IAAI,GACJ,IAAI,GACJ,YAAY,GACZ,QAAQ,CAAC;AAeb,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;IAC1D,0FAA0F;IAC1F,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,gHAAgH;IAChH,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,wFAAwF;IACxF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,IAAI;IAdf,0FAA0F;cAChF,WAAW;IACrB,gHAAgH;SAC3G,WAAW;WACT,QAAQ;IACf,wFAAwF;eAC7E,OAAO;IAClB,mEAAmE;cACzD,OAAO;IACjB,qDAAqD;cAC3C,MAAM;eACL,MAAM;qCAoBjB,CAAC"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { cx } from '../utils/cx.js';
|
|
5
|
+
const defaultElement = {
|
|
6
|
+
display: 'h1',
|
|
7
|
+
'heading-1': 'h1',
|
|
8
|
+
'heading-2': 'h2',
|
|
9
|
+
'heading-3': 'h3',
|
|
10
|
+
body: 'p',
|
|
11
|
+
'body-sm': 'p',
|
|
12
|
+
label: 'span',
|
|
13
|
+
meta: 'span',
|
|
14
|
+
mono: 'span',
|
|
15
|
+
eyebrow: 'p',
|
|
16
|
+
};
|
|
17
|
+
export const Text = React.forwardRef(function Text({ variant = 'body', as, tone, truncate = false, numeric = false, className, ...rest }, ref) {
|
|
18
|
+
const Element = (as ?? defaultElement[variant]);
|
|
19
|
+
return (_jsx(Element, { ...rest, ref: ref, className: cx('rl-text', className), "data-slot": "text", "data-variant": variant, "data-tone": tone, "data-truncate": truncate || undefined, "data-numeric": numeric || undefined }));
|
|
20
|
+
});
|
|
21
|
+
//# sourceMappingURL=Text.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/components/Text.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAqCpC,MAAM,cAAc,GAAqC;IACvD,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,IAAI;IACjB,IAAI,EAAE,GAAG;IACT,SAAS,EAAE,GAAG;IACd,KAAK,EAAE,MAAM;IACb,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,GAAG;CACb,CAAC;AAiBF,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAyB,SAAS,IAAI,CACxE,EAAE,OAAO,GAAG,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,GAAG,KAAK,EAAE,OAAO,GAAG,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EACrF,GAAG;IAEH,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,cAAc,CAAC,OAAO,CAAC,CAAsB,CAAC;IACrE,OAAO,CACL,KAAC,OAAO,OACF,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,eACzB,MAAM,kBACF,OAAO,eACV,IAAI,mBACA,QAAQ,IAAI,SAAS,kBACtB,OAAO,IAAI,SAAS,GAClC,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Field as BaseField } from '@base-ui/react/field';
|
|
3
|
+
type BaseControlProps = React.ComponentProps<typeof BaseField.Control>;
|
|
4
|
+
export type TextareaResize = 'vertical' | 'none';
|
|
5
|
+
export type TextareaProps = Omit<React.ComponentPropsWithoutRef<'textarea'>, 'className' | 'style' | 'defaultValue' | 'value'> & {
|
|
6
|
+
value?: string;
|
|
7
|
+
defaultValue?: string;
|
|
8
|
+
onValueChange?: BaseControlProps['onValueChange'];
|
|
9
|
+
/** Grow with the content (where `field-sizing` is supported) between `rows` and `maxRows`. */
|
|
10
|
+
autoResize?: boolean;
|
|
11
|
+
/** Upper bound for `autoResize`, in lines. Beyond it the textarea scrolls. */
|
|
12
|
+
maxRows?: number;
|
|
13
|
+
resize?: TextareaResize;
|
|
14
|
+
/**
|
|
15
|
+
* Shows "已输入 n / maxLength" under the control and links it as a description.
|
|
16
|
+
* Requires `maxLength`.
|
|
17
|
+
*/
|
|
18
|
+
showCount?: boolean;
|
|
19
|
+
mono?: boolean;
|
|
20
|
+
/** Mark invalid outside a Field (inside a Field, validity comes from Field). */
|
|
21
|
+
invalid?: boolean;
|
|
22
|
+
className?: string;
|
|
23
|
+
style?: React.CSSProperties;
|
|
24
|
+
};
|
|
25
|
+
/**
|
|
26
|
+
* Multi-line text on Base UI Field.Control: inside `<Field>` it picks up label, description,
|
|
27
|
+
* error and validity like `Input`; standalone it needs `aria-label`.
|
|
28
|
+
*
|
|
29
|
+
* <Field label="复核意见" description="不超过 500 字。">
|
|
30
|
+
* <Textarea name="note" rows={4} maxLength={500} showCount autoResize />
|
|
31
|
+
* </Field>
|
|
32
|
+
*/
|
|
33
|
+
export declare const Textarea: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, "value" | "defaultValue" | "className" | "style"> & {
|
|
34
|
+
value?: string;
|
|
35
|
+
defaultValue?: string;
|
|
36
|
+
onValueChange?: BaseControlProps["onValueChange"];
|
|
37
|
+
/** Grow with the content (where `field-sizing` is supported) between `rows` and `maxRows`. */
|
|
38
|
+
autoResize?: boolean;
|
|
39
|
+
/** Upper bound for `autoResize`, in lines. Beyond it the textarea scrolls. */
|
|
40
|
+
maxRows?: number;
|
|
41
|
+
resize?: TextareaResize;
|
|
42
|
+
/**
|
|
43
|
+
* Shows "已输入 n / maxLength" under the control and links it as a description.
|
|
44
|
+
* Requires `maxLength`.
|
|
45
|
+
*/
|
|
46
|
+
showCount?: boolean;
|
|
47
|
+
mono?: boolean;
|
|
48
|
+
/** Mark invalid outside a Field (inside a Field, validity comes from Field). */
|
|
49
|
+
invalid?: boolean;
|
|
50
|
+
className?: string;
|
|
51
|
+
style?: React.CSSProperties;
|
|
52
|
+
} & React.RefAttributes<HTMLTextAreaElement>>;
|
|
53
|
+
export {};
|
|
54
|
+
//# sourceMappingURL=Textarea.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/components/Textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAI1D,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,OAAO,CAAC,CAAC;AAEvE,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,MAAM,CAAC;AAEjD,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,KAAK,CAAC,wBAAwB,CAAC,UAAU,CAAC,EAC1C,WAAW,GAAG,OAAO,GAAG,cAAc,GAAG,OAAO,CACjD,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD,8FAA8F;IAC9F,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ;YA5BX,MAAM;mBACC,MAAM;oBACL,gBAAgB,CAAC,eAAe,CAAC;IACjD,8FAA8F;iBACjF,OAAO;IACpB,8EAA8E;cACpE,MAAM;aACP,cAAc;IACvB;;;OAGG;gBACS,OAAO;WACZ,OAAO;IACd,gFAAgF;cACtE,OAAO;gBACL,MAAM;YACV,KAAK,CAAC,aAAa;6CA+E3B,CAAC"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { Field as BaseField } from '@base-ui/react/field';
|
|
5
|
+
import { useRhineLocale } from '../provider/messages.js';
|
|
6
|
+
import { cx } from '../utils/cx.js';
|
|
7
|
+
/**
|
|
8
|
+
* Multi-line text on Base UI Field.Control: inside `<Field>` it picks up label, description,
|
|
9
|
+
* error and validity like `Input`; standalone it needs `aria-label`.
|
|
10
|
+
*
|
|
11
|
+
* <Field label="复核意见" description="不超过 500 字。">
|
|
12
|
+
* <Textarea name="note" rows={4} maxLength={500} showCount autoResize />
|
|
13
|
+
* </Field>
|
|
14
|
+
*/
|
|
15
|
+
export const Textarea = React.forwardRef(function Textarea({ rows = 3, maxRows, autoResize = false, resize = 'vertical', showCount = false, mono = false, invalid, disabled, readOnly, maxLength, value, defaultValue, onValueChange, className, style, ...rest }, ref) {
|
|
16
|
+
const countId = React.useId();
|
|
17
|
+
const { messages, formatNumber } = useRhineLocale();
|
|
18
|
+
const [length, setLength] = React.useState(() => (value ?? defaultValue ?? '').length);
|
|
19
|
+
const current = value !== undefined ? value.length : length;
|
|
20
|
+
const counting = showCount && maxLength != null;
|
|
21
|
+
const describedBy = [rest['aria-describedby'], counting ? countId : undefined].filter(Boolean).join(' ') || undefined;
|
|
22
|
+
const vars = {
|
|
23
|
+
'--rl-textarea-rows': rows,
|
|
24
|
+
...(maxRows != null ? { '--rl-textarea-max-rows': maxRows } : null),
|
|
25
|
+
};
|
|
26
|
+
return (_jsxs("span", { className: cx('rl-textarea', className), style: { ...vars, ...style }, "data-slot": "textarea", "data-auto-resize": autoResize || undefined, "data-resize": resize, "data-mono": mono || undefined, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-invalid": invalid || undefined, children: [_jsx(BaseField.Control, { ...rest, render: _jsx("textarea", { rows: rows }), ref: ref, disabled: disabled, readOnly: readOnly, maxLength: maxLength, ...(value !== undefined ? { value } : { defaultValue }), onValueChange: (next, details) => {
|
|
27
|
+
setLength(next.length);
|
|
28
|
+
onValueChange?.(next, details);
|
|
29
|
+
}, ...(invalid ? { 'aria-invalid': true } : null), "aria-describedby": describedBy, className: "rl-textarea__control" }), counting && (_jsx("span", { id: countId, className: "rl-textarea__count", "data-over": current >= maxLength || undefined, children: messages.textarea.count(current, maxLength, formatNumber) }))] }));
|
|
30
|
+
});
|
|
31
|
+
//# sourceMappingURL=Textarea.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/components/Textarea.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { StatusKind } from './StatusBadge.js';
|
|
3
|
+
/**
|
|
4
|
+
* Chronological event log as an ordered list. Each event needs a real timestamp
|
|
5
|
+
* (`dateTime` is machine-readable, `time` is the visible text); the component does
|
|
6
|
+
* not sort, invent or reformat times — pass events in the order they should read.
|
|
7
|
+
*/
|
|
8
|
+
export interface TimelineEvent {
|
|
9
|
+
id: string;
|
|
10
|
+
title: React.ReactNode;
|
|
11
|
+
/** ISO 8601 date or date-time, used for <time dateTime>. */
|
|
12
|
+
dateTime: string;
|
|
13
|
+
/** Visible time text; defaults to `dateTime`. */
|
|
14
|
+
time?: React.ReactNode;
|
|
15
|
+
description?: React.ReactNode;
|
|
16
|
+
/** Optional status marker; the title must still say what happened. */
|
|
17
|
+
tone?: StatusKind;
|
|
18
|
+
/** Who or what recorded the event. */
|
|
19
|
+
actor?: React.ReactNode;
|
|
20
|
+
}
|
|
21
|
+
export type TimelineProps = Omit<React.OlHTMLAttributes<HTMLOListElement>, 'children'> & {
|
|
22
|
+
events: readonly TimelineEvent[];
|
|
23
|
+
/** Shown when `events` is empty. */
|
|
24
|
+
emptyText?: React.ReactNode;
|
|
25
|
+
/** Newest-first lists set `reversed` so ordinal semantics match reading order. */
|
|
26
|
+
reversed?: boolean;
|
|
27
|
+
};
|
|
28
|
+
export declare const Timeline: React.ForwardRefExoticComponent<Omit<React.OlHTMLAttributes<HTMLOListElement>, "children"> & {
|
|
29
|
+
events: readonly TimelineEvent[];
|
|
30
|
+
/** Shown when `events` is empty. */
|
|
31
|
+
emptyText?: React.ReactNode;
|
|
32
|
+
/** Newest-first lists set `reversed` so ordinal semantics match reading order. */
|
|
33
|
+
reversed?: boolean;
|
|
34
|
+
} & React.RefAttributes<HTMLOListElement>>;
|
|
35
|
+
//# sourceMappingURL=Timeline.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../src/components/Timeline.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD;;;;GAIG;AAEH,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4DAA4D;IAC5D,QAAQ,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,sEAAsE;IACtE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sCAAsC;IACtC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,GAAG;IACvF,MAAM,EAAE,SAAS,aAAa,EAAE,CAAC;IACjC,oCAAoC;IACpC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,QAAQ;YAPX,SAAS,aAAa,EAAE;IAChC,oCAAoC;gBACxB,KAAK,CAAC,SAAS;IAC3B,kFAAkF;eACvE,OAAO;0CAgClB,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { useRhineMessages } from '../provider/messages.js';
|
|
5
|
+
import { cx } from '../utils/cx.js';
|
|
6
|
+
export const Timeline = React.forwardRef(function Timeline({ events, emptyText, className, ...rest }, ref) {
|
|
7
|
+
const messages = useRhineMessages();
|
|
8
|
+
if (events.length === 0) {
|
|
9
|
+
return (_jsx("p", { className: cx('rl-timeline__empty', className), "data-slot": "timeline", children: emptyText === undefined ? messages.timeline.empty : emptyText }));
|
|
10
|
+
}
|
|
11
|
+
return (_jsx("ol", { ...rest, ref: ref, className: cx('rl-timeline', className), "data-slot": "timeline", children: events.map((event) => (_jsxs("li", { className: "rl-timeline__event", "data-tone": event.tone ?? 'neutral', children: [_jsx("time", { className: "rl-timeline__time", dateTime: event.dateTime, children: event.time ?? event.dateTime }), _jsx("span", { className: "rl-timeline__marker", "aria-hidden": "true" }), _jsxs("div", { className: "rl-timeline__body", children: [_jsx("p", { className: "rl-timeline__title", children: event.title }), event.description != null && _jsx("p", { className: "rl-timeline__description", children: event.description }), event.actor != null && _jsx("p", { className: "rl-timeline__actor", children: event.actor })] })] }, event.id))) }));
|
|
12
|
+
});
|
|
13
|
+
//# sourceMappingURL=Timeline.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../src/components/Timeline.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AA+BpC,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAkC,SAAS,QAAQ,CACzF,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EACzC,GAAG;IAEH,MAAM,QAAQ,GAAG,gBAAgB,EAAE,CAAC;IACpC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACxB,OAAO,CACL,YAAG,SAAS,EAAE,EAAE,CAAC,oBAAoB,EAAE,SAAS,CAAC,eAAY,UAAU,YACpE,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GAC5D,CACL,CAAC;IACJ,CAAC;IACD,OAAO,CACL,gBAAQ,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,eAAY,UAAU,YAClF,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,cAAmB,SAAS,EAAC,oBAAoB,eAAY,KAAK,CAAC,IAAI,IAAI,SAAS,aAClF,eAAM,SAAS,EAAC,mBAAmB,EAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,YACzD,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,QAAQ,GACxB,EACP,eAAM,SAAS,EAAC,qBAAqB,iBAAa,MAAM,GAAG,EAC3D,eAAK,SAAS,EAAC,mBAAmB,aAChC,YAAG,SAAS,EAAC,oBAAoB,YAAE,KAAK,CAAC,KAAK,GAAK,EAClD,KAAK,CAAC,WAAW,IAAI,IAAI,IAAI,YAAG,SAAS,EAAC,0BAA0B,YAAE,KAAK,CAAC,WAAW,GAAK,EAC5F,KAAK,CAAC,KAAK,IAAI,IAAI,IAAI,YAAG,SAAS,EAAC,oBAAoB,YAAE,KAAK,CAAC,KAAK,GAAK,IACvE,KATC,KAAK,CAAC,EAAE,CAUZ,CACN,CAAC,GACC,CACN,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Toast as BaseToast } from '@base-ui/react/toast';
|
|
3
|
+
import type { StatusKind } from './StatusBadge.js';
|
|
4
|
+
/**
|
|
5
|
+
* Notifications on Base UI Toast (ADR-0001). The viewport is a polite live region (F6 jumps
|
|
6
|
+
* into it); `priority: 'high'` toasts are announced assertively. Toasts pause their timer
|
|
7
|
+
* while hovered or focused, stack with a peek, and can be swiped away on touch.
|
|
8
|
+
* `RhineProvider` mounts the provider and viewport, so call `useToast()` anywhere inside it.
|
|
9
|
+
*
|
|
10
|
+
* ADR-0006 §8: `show({ id })` with a visible id updates that toast in place and restarts its
|
|
11
|
+
* timer; the action closes its toast after running (unless `keepOpen`); toasts with an action
|
|
12
|
+
* stay at least 10 s; `promise()` turns one toast from 处理中 into the result.
|
|
13
|
+
*/
|
|
14
|
+
export type ToastStatus = Exclude<StatusKind, 'neutral'> | 'neutral';
|
|
15
|
+
/** A single follow-up action, e.g. 撤销 / 查看 / 重试. */
|
|
16
|
+
export interface ToastAction {
|
|
17
|
+
label: string;
|
|
18
|
+
onClick: () => void;
|
|
19
|
+
/** Keep the toast open after the action runs. By default it closes. */
|
|
20
|
+
keepOpen?: boolean;
|
|
21
|
+
}
|
|
22
|
+
export interface ToastOptions {
|
|
23
|
+
/** Showing a toast with the id of one still on screen updates it in place (no stacking). */
|
|
24
|
+
id?: string;
|
|
25
|
+
title: React.ReactNode;
|
|
26
|
+
description?: React.ReactNode;
|
|
27
|
+
status?: ToastStatus;
|
|
28
|
+
/**
|
|
29
|
+
* Auto-dismiss delay in ms. `0` keeps it until dismissed; use for errors that need action.
|
|
30
|
+
* Defaults to the provider's `toastTimeout`; with an `action`, to at least 10 s.
|
|
31
|
+
*/
|
|
32
|
+
timeout?: number;
|
|
33
|
+
/** `high` interrupts screen readers (role=alert). Reserve for failures and time-critical notices. */
|
|
34
|
+
priority?: 'low' | 'high';
|
|
35
|
+
/** The page must still offer the same result or an equivalent control; the toast is a shortcut. */
|
|
36
|
+
action?: ToastAction;
|
|
37
|
+
onClose?: () => void;
|
|
38
|
+
}
|
|
39
|
+
/** A promise stage: a title, full options, or (for success / error) a function of the outcome. */
|
|
40
|
+
export type ToastPromiseStage<Arg> = string | ToastOptions | ((value: Arg) => string | ToastOptions);
|
|
41
|
+
export interface ToastPromiseOptions<Value> {
|
|
42
|
+
/** Shown until the promise settles; never auto-dismisses. Status defaults to `info`. */
|
|
43
|
+
loading: string | ToastOptions;
|
|
44
|
+
/** Status defaults to `success`. */
|
|
45
|
+
success: ToastPromiseStage<Value>;
|
|
46
|
+
/** Status defaults to `danger`, priority to `high` and timeout to `0` (stays until dismissed). */
|
|
47
|
+
error: ToastPromiseStage<unknown>;
|
|
48
|
+
}
|
|
49
|
+
export interface ToastApi {
|
|
50
|
+
/** Show a toast; returns its id. With an existing `id`, updates that toast instead. */
|
|
51
|
+
show: (options: ToastOptions) => string;
|
|
52
|
+
/** Replace the content of an existing toast (e.g. 处理中 → 已完成). */
|
|
53
|
+
update: (id: string, options: Partial<ToastOptions>) => void;
|
|
54
|
+
dismiss: (id?: string) => void;
|
|
55
|
+
/**
|
|
56
|
+
* One toast follows the promise: `loading` until it settles, then `success` or `error` in
|
|
57
|
+
* place. Returns a promise with the same outcome (it rejects when the input rejects).
|
|
58
|
+
*/
|
|
59
|
+
promise: <Value>(promise: Promise<Value>, options: ToastPromiseOptions<Value>) => Promise<Value>;
|
|
60
|
+
}
|
|
61
|
+
export type ToastProviderProps = React.ComponentProps<typeof BaseToast.Provider>;
|
|
62
|
+
/** Toast queue. Mounted by RhineProvider; render it yourself only without one. */
|
|
63
|
+
export declare function ToastProvider({ timeout, ...rest }: ToastProviderProps): React.JSX.Element;
|
|
64
|
+
export declare function useToast(): ToastApi;
|
|
65
|
+
/** Viewport that renders queued toasts. Mounted by RhineProvider; render it yourself only without one. */
|
|
66
|
+
export declare function ToastViewport(): React.JSX.Element | null;
|
|
67
|
+
//# sourceMappingURL=Toast.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/components/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAI1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD;;;;;;;;;GASG;AAEH,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,UAAU,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC;AAErE,oDAAoD;AACpD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,4FAA4F;IAC5F,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qGAAqG;IACrG,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC1B,mGAAmG;IACnG,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,kGAAkG;AAClG,MAAM,MAAM,iBAAiB,CAAC,GAAG,IAAI,MAAM,GAAG,YAAY,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,GAAG,YAAY,CAAC,CAAC;AAErG,MAAM,WAAW,mBAAmB,CAAC,KAAK;IACxC,wFAAwF;IACxF,OAAO,EAAE,MAAM,GAAG,YAAY,CAAC;IAC/B,oCAAoC;IACpC,OAAO,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAClC,kGAAkG;IAClG,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;CACnC;AAOD,MAAM,WAAW,QAAQ;IACvB,uFAAuF;IACvF,IAAI,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,MAAM,CAAC;IACxC,iEAAiE;IACjE,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IAC7D,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B;;;OAGG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,mBAAmB,CAAC,KAAK,CAAC,KAAK,OAAO,CAAC,KAAK,CAAC,CAAC;CAClG;AASD,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,QAAQ,CAAC,CAAC;AAEjF,kFAAkF;AAClF,wBAAgB,aAAa,CAAC,EAAE,OAA8B,EAAE,GAAG,IAAI,EAAE,EAAE,kBAAkB,qBAM5F;AAsCD,wBAAgB,QAAQ,IAAI,QAAQ,CA6BnC;AAiDD,0GAA0G;AAC1G,wBAAgB,aAAa,6BAY5B"}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { Toast as BaseToast } from '@base-ui/react/toast';
|
|
5
|
+
import { useRhineMessages } from '../provider/messages.js';
|
|
6
|
+
import { usePortalContainer, usePortalPending } from '../provider/portal.js';
|
|
7
|
+
import { Spinner } from './Spinner.js';
|
|
8
|
+
/** Toasts with an action stay at least this long, so there is time to reach the button. */
|
|
9
|
+
const ACTION_MIN_TIMEOUT = 10000;
|
|
10
|
+
const BASE_DEFAULT_TIMEOUT = 5000;
|
|
11
|
+
/** The provider's default timeout; Base UI keeps it private, so ToastProvider republishes it. */
|
|
12
|
+
const ToastTimeoutContext = React.createContext(BASE_DEFAULT_TIMEOUT);
|
|
13
|
+
/** Toast queue. Mounted by RhineProvider; render it yourself only without one. */
|
|
14
|
+
export function ToastProvider({ timeout = BASE_DEFAULT_TIMEOUT, ...rest }) {
|
|
15
|
+
return (_jsx(ToastTimeoutContext.Provider, { value: timeout, children: _jsx(BaseToast.Provider, { timeout: timeout, ...rest }) }));
|
|
16
|
+
}
|
|
17
|
+
function resolveTimeout(timeout, action, providerTimeout) {
|
|
18
|
+
if (timeout !== undefined || !action)
|
|
19
|
+
return timeout;
|
|
20
|
+
// `0` at the provider means "never auto-dismiss"; keep that.
|
|
21
|
+
return providerTimeout === 0 ? 0 : Math.max(providerTimeout, ACTION_MIN_TIMEOUT);
|
|
22
|
+
}
|
|
23
|
+
function toManager({ id, title, description, status = 'neutral', timeout, priority, action, onClose }, providerTimeout) {
|
|
24
|
+
return {
|
|
25
|
+
...(id !== undefined && { id }),
|
|
26
|
+
title,
|
|
27
|
+
description,
|
|
28
|
+
timeout: resolveTimeout(timeout, action, providerTimeout),
|
|
29
|
+
priority,
|
|
30
|
+
onClose,
|
|
31
|
+
type: status,
|
|
32
|
+
data: { status, action },
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
function resolveStage(stage, value, defaults, providerTimeout) {
|
|
36
|
+
const resolved = typeof stage === 'function' ? stage(value) : stage;
|
|
37
|
+
const options = typeof resolved === 'string' ? { title: resolved } : resolved;
|
|
38
|
+
const merged = toManager({ ...defaults, ...options }, providerTimeout);
|
|
39
|
+
// Base UI owns the toast type during a promise (loading → success / error); keep ours in data.
|
|
40
|
+
const { type: _type, id: _id, ...rest } = merged;
|
|
41
|
+
return rest;
|
|
42
|
+
}
|
|
43
|
+
export function useToast() {
|
|
44
|
+
const manager = BaseToast.useToastManager();
|
|
45
|
+
const providerTimeout = React.useContext(ToastTimeoutContext);
|
|
46
|
+
return React.useMemo(() => ({
|
|
47
|
+
show: (options) => manager.add(toManager(options, providerTimeout)),
|
|
48
|
+
update: (id, { title, description, status, timeout, priority, action }) => manager.update(id, (prev) => ({
|
|
49
|
+
...(title !== undefined && { title }),
|
|
50
|
+
...(description !== undefined && { description }),
|
|
51
|
+
...(timeout !== undefined && { timeout }),
|
|
52
|
+
...(priority !== undefined && { priority }),
|
|
53
|
+
...(status !== undefined && { type: status }),
|
|
54
|
+
data: {
|
|
55
|
+
status: status ?? prev.data?.status ?? 'neutral',
|
|
56
|
+
action: action ?? prev.data?.action,
|
|
57
|
+
},
|
|
58
|
+
})),
|
|
59
|
+
dismiss: (id) => manager.close(id),
|
|
60
|
+
promise: (promise, { loading, success, error }) => manager.promise(promise, {
|
|
61
|
+
loading: resolveStage(loading, undefined, { status: 'info' }, providerTimeout),
|
|
62
|
+
success: (value) => resolveStage(success, value, { status: 'success' }, providerTimeout),
|
|
63
|
+
error: (reason) => resolveStage(error, reason, { status: 'danger', priority: 'high', timeout: 0 }, providerTimeout),
|
|
64
|
+
}),
|
|
65
|
+
}), [manager, providerTimeout]);
|
|
66
|
+
}
|
|
67
|
+
function StatusIcon({ status }) {
|
|
68
|
+
return (_jsxs("svg", { className: "rl-toast__icon", viewBox: "0 0 16 16", "aria-hidden": "true", focusable: "false", "data-status": status, children: [status === 'success' && _jsx("path", { d: "m3.5 8.5 3 3 6-7" }), status === 'danger' && _jsx("path", { d: "M5 5l6 6M11 5l-6 6" }), status === 'warning' && _jsx("path", { d: "M8 2.5 14 13.5H2L8 2.5ZM8 7v2.5M8 11.5v.01" }), status === 'info' && _jsx("path", { d: "M8 7.5V11.5M8 5v.01" }), status === 'neutral' && _jsx("path", { d: "M4 8h8" })] }));
|
|
69
|
+
}
|
|
70
|
+
function ToastList() {
|
|
71
|
+
const { toasts, close } = BaseToast.useToastManager();
|
|
72
|
+
// Read where the viewport is mounted (the provider that owns the queue), not where show() ran.
|
|
73
|
+
const messages = useRhineMessages();
|
|
74
|
+
return toasts.map((toast) => {
|
|
75
|
+
const status = toast.data?.status ?? 'neutral';
|
|
76
|
+
const action = toast.data?.action;
|
|
77
|
+
const runAction = () => {
|
|
78
|
+
action?.onClick();
|
|
79
|
+
if (!action?.keepOpen)
|
|
80
|
+
close(toast.id);
|
|
81
|
+
};
|
|
82
|
+
return (_jsx(BaseToast.Root, { toast: toast, className: "rl-toast", "data-status": status, children: _jsxs(BaseToast.Content, { className: "rl-toast__content", children: [toast.type === 'loading' ? _jsx(Spinner, { size: "md", className: "rl-toast__icon" }) : _jsx(StatusIcon, { status: status }), _jsxs("div", { className: "rl-toast__text", children: [_jsx(BaseToast.Title, { className: "rl-toast__title" }), _jsx(BaseToast.Description, { className: "rl-toast__description" })] }), action && (_jsx(BaseToast.Action, { className: "rl-toast__action", onClick: runAction, children: action.label })), _jsx(BaseToast.Close, { className: "rl-toast__close", "aria-label": messages.toast.close, children: _jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) }) })] }) }, toast.id));
|
|
83
|
+
});
|
|
84
|
+
}
|
|
85
|
+
/** Viewport that renders queued toasts. Mounted by RhineProvider; render it yourself only without one. */
|
|
86
|
+
export function ToastViewport() {
|
|
87
|
+
const container = usePortalContainer();
|
|
88
|
+
const messages = useRhineMessages();
|
|
89
|
+
// Wait for the provider's portal node so the viewport never lands outside the themed root.
|
|
90
|
+
if (usePortalPending())
|
|
91
|
+
return null;
|
|
92
|
+
return (_jsx(BaseToast.Portal, { container: container, children: _jsx(BaseToast.Viewport, { className: "rl-toast-viewport", "data-slot": "toast-viewport", "aria-label": messages.toast.region, children: _jsx(ToastList, {}) }) }));
|
|
93
|
+
}
|
|
94
|
+
//# sourceMappingURL=Toast.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../src/components/Toast.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,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC7E,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAwEvC,2FAA2F;AAC3F,MAAM,kBAAkB,GAAG,KAAK,CAAC;AACjC,MAAM,oBAAoB,GAAG,IAAI,CAAC;AAElC,iGAAiG;AACjG,MAAM,mBAAmB,GAAG,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;AAItE,kFAAkF;AAClF,MAAM,UAAU,aAAa,CAAC,EAAE,OAAO,GAAG,oBAAoB,EAAE,GAAG,IAAI,EAAsB;IAC3F,OAAO,CACL,KAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YAC1C,KAAC,SAAS,CAAC,QAAQ,IAAC,OAAO,EAAE,OAAO,KAAM,IAAI,GAAI,GACrB,CAChC,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,OAA2B,EAAE,MAA+B,EAAE,eAAuB;IAC3G,IAAI,OAAO,KAAK,SAAS,IAAI,CAAC,MAAM;QAAE,OAAO,OAAO,CAAC;IACrD,6DAA6D;IAC7D,OAAO,eAAe,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,kBAAkB,CAAC,CAAC;AACnF,CAAC;AAED,SAAS,SAAS,CAChB,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,GAAG,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAgB,EAChG,eAAuB;IAEvB,OAAO;QACL,GAAG,CAAC,EAAE,KAAK,SAAS,IAAI,EAAE,EAAE,EAAE,CAAC;QAC/B,KAAK;QACL,WAAW;QACX,OAAO,EAAE,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,eAAe,CAAC;QACzD,QAAQ;QACR,OAAO;QACP,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,EAAsB;KAC7C,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CACnB,KAA6B,EAC7B,KAAU,EACV,QAA+D,EAC/D,eAAuB;IAEvB,MAAM,QAAQ,GAAG,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACpE,MAAM,OAAO,GAAiB,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC5F,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,GAAG,QAAQ,EAAE,GAAG,OAAO,EAAE,EAAE,eAAe,CAAC,CAAC;IACvE,+FAA+F;IAC/F,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,GAAG,MAAyC,CAAC;IACpF,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,QAAQ;IACtB,MAAM,OAAO,GAAG,SAAS,CAAC,eAAe,EAAa,CAAC;IACvD,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAC9D,OAAO,KAAK,CAAC,OAAO,CAClB,GAAG,EAAE,CAAC,CAAC;QACL,IAAI,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;QACnE,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,CACxE,OAAO,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAC5B,GAAG,CAAC,KAAK,KAAK,SAAS,IAAI,EAAE,KAAK,EAAE,CAAC;YACrC,GAAG,CAAC,WAAW,KAAK,SAAS,IAAI,EAAE,WAAW,EAAE,CAAC;YACjD,GAAG,CAAC,OAAO,KAAK,SAAS,IAAI,EAAE,OAAO,EAAE,CAAC;YACzC,GAAG,CAAC,QAAQ,KAAK,SAAS,IAAI,EAAE,QAAQ,EAAE,CAAC;YAC3C,GAAG,CAAC,MAAM,KAAK,SAAS,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;YAC7C,IAAI,EAAE;gBACJ,MAAM,EAAE,MAAM,IAAI,IAAI,CAAC,IAAI,EAAE,MAAM,IAAI,SAAS;gBAChD,MAAM,EAAE,MAAM,IAAI,IAAI,CAAC,IAAI,EAAE,MAAM;aACpC;SACF,CAAC,CAAC;QACL,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QAClC,OAAO,EAAE,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAChD,OAAO,CAAC,OAAO,CAAC,OAAO,EAAE;YACvB,OAAO,EAAE,YAAY,CAAC,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,eAAe,CAAC;YAC9E,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,eAAe,CAAC;YACxF,KAAK,EAAE,CAAC,MAAe,EAAE,EAAE,CACzB,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,eAAe,CAAC;SACnG,CAAC;KACL,CAAC,EACF,CAAC,OAAO,EAAE,eAAe,CAAC,CAC3B,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,MAAM,EAA2B;IACrD,OAAO,CACL,eAAK,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAC,WAAW,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO,iBAAc,MAAM,aACzG,MAAM,KAAK,SAAS,IAAI,eAAM,CAAC,EAAC,kBAAkB,GAAG,EACrD,MAAM,KAAK,QAAQ,IAAI,eAAM,CAAC,EAAC,oBAAoB,GAAG,EACtD,MAAM,KAAK,SAAS,IAAI,eAAM,CAAC,EAAC,4CAA4C,GAAG,EAC/E,MAAM,KAAK,MAAM,IAAI,eAAM,CAAC,EAAC,qBAAqB,GAAG,EACrD,MAAM,KAAK,SAAS,IAAI,eAAM,CAAC,EAAC,QAAQ,GAAG,IACxC,CACP,CAAC;AACJ,CAAC;AAED,SAAS,SAAS;IAChB,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC,eAAe,EAAa,CAAC;IACjE,+FAA+F;IAC/F,MAAM,QAAQ,GAAG,gBAAgB,EAAE,CAAC;IACpC,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QAC1B,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,EAAE,MAAM,IAAI,SAAS,CAAC;QAC/C,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,EAAE,MAAM,CAAC;QAClC,MAAM,SAAS,GAAG,GAAG,EAAE;YACrB,MAAM,EAAE,OAAO,EAAE,CAAC;YAClB,IAAI,CAAC,MAAM,EAAE,QAAQ;gBAAE,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QACzC,CAAC,CAAC;QACF,OAAO,CACL,KAAC,SAAS,CAAC,IAAI,IAAgB,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,UAAU,iBAAc,MAAM,YACnF,MAAC,SAAS,CAAC,OAAO,IAAC,SAAS,EAAC,mBAAmB,aAC7C,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,KAAC,UAAU,IAAC,MAAM,EAAE,MAAM,GAAI,EAC7G,eAAK,SAAS,EAAC,gBAAgB,aAC7B,KAAC,SAAS,CAAC,KAAK,IAAC,SAAS,EAAC,iBAAiB,GAAG,EAC/C,KAAC,SAAS,CAAC,WAAW,IAAC,SAAS,EAAC,uBAAuB,GAAG,IACvD,EACL,MAAM,IAAI,CACT,KAAC,SAAS,CAAC,MAAM,IAAC,SAAS,EAAC,kBAAkB,EAAC,OAAO,EAAE,SAAS,YAC9D,MAAM,CAAC,KAAK,GACI,CACpB,EACD,KAAC,SAAS,CAAC,KAAK,IAAC,SAAS,EAAC,iBAAiB,gBAAa,QAAQ,CAAC,KAAK,CAAC,KAAK,YAC3E,cAAK,OAAO,EAAC,WAAW,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO,YAC3D,eAAM,CAAC,EAAC,oBAAoB,GAAG,GAC3B,GACU,IACA,IAjBD,KAAK,CAAC,EAAE,CAkBZ,CAClB,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC;AAED,0GAA0G;AAC1G,MAAM,UAAU,aAAa;IAC3B,MAAM,SAAS,GAAG,kBAAkB,EAAE,CAAC;IACvC,MAAM,QAAQ,GAAG,gBAAgB,EAAE,CAAC;IACpC,2FAA2F;IAC3F,IAAI,gBAAgB,EAAE;QAAE,OAAO,IAAI,CAAC;IACpC,OAAO,CACL,KAAC,SAAS,CAAC,MAAM,IAAC,SAAS,EAAE,SAAS,YACpC,KAAC,SAAS,CAAC,QAAQ,IAAC,SAAS,EAAC,mBAAmB,eAAW,gBAAgB,gBAAa,QAAQ,CAAC,KAAK,CAAC,MAAM,YAC5G,KAAC,SAAS,KAAG,GACM,GACJ,CACpB,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
|
|
3
|
+
export type TooltipProps = {
|
|
4
|
+
/** Short visual label. Must match the trigger's accessible name — tooltips are not announced. */
|
|
5
|
+
content: React.ReactNode;
|
|
6
|
+
/**
|
|
7
|
+
* A single focusable element (Button, IconButton, link). It must already have an accessible
|
|
8
|
+
* name; the tooltip only mirrors it for sighted mouse and keyboard users.
|
|
9
|
+
*/
|
|
10
|
+
children: React.ReactElement<Record<string, unknown>>;
|
|
11
|
+
side?: TooltipSide;
|
|
12
|
+
/** Override the provider's hover delay (ms). Focus always opens immediately. */
|
|
13
|
+
delay?: number;
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
open?: boolean;
|
|
16
|
+
defaultOpen?: boolean;
|
|
17
|
+
onOpenChange?: (open: boolean) => void;
|
|
18
|
+
className?: string;
|
|
19
|
+
};
|
|
20
|
+
/**
|
|
21
|
+
* Visual label for icon-only or truncated controls (Base UI Tooltip). Not for essential
|
|
22
|
+
* information: tooltips are unavailable to touch and screen-reader users, so put anything
|
|
23
|
+
* important in visible text or a Popover instead.
|
|
24
|
+
*/
|
|
25
|
+
export declare function Tooltip({ content, children, side, delay, disabled, open, defaultOpen, onOpenChange, className, }: TooltipProps): React.JSX.Element;
|
|
26
|
+
//# sourceMappingURL=Tooltip.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAE9D,MAAM,MAAM,YAAY,GAAG;IACzB,iGAAiG;IACjG,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACtD,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,QAAQ,EACR,IAAY,EACZ,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,SAAS,GACV,EAAE,YAAY,qBAmBd"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
|
|
4
|
+
import { usePortalContainer } from '../provider/portal.js';
|
|
5
|
+
import { cx } from '../utils/cx.js';
|
|
6
|
+
/**
|
|
7
|
+
* Visual label for icon-only or truncated controls (Base UI Tooltip). Not for essential
|
|
8
|
+
* information: tooltips are unavailable to touch and screen-reader users, so put anything
|
|
9
|
+
* important in visible text or a Popover instead.
|
|
10
|
+
*/
|
|
11
|
+
export function Tooltip({ content, children, side = 'top', delay, disabled, open, defaultOpen, onOpenChange, className, }) {
|
|
12
|
+
const container = usePortalContainer();
|
|
13
|
+
return (_jsxs(BaseTooltip.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange ? (o) => onOpenChange(o) : undefined, disabled: disabled, children: [_jsx(BaseTooltip.Trigger, { render: children, delay: delay }), _jsx(BaseTooltip.Portal, { container: container, children: _jsx(BaseTooltip.Positioner, { side: side, sideOffset: 6, collisionPadding: 8, positionMethod: "fixed", className: "rl-tooltip__positioner", children: _jsx(BaseTooltip.Popup, { className: cx('rl-tooltip', className), "data-slot": "tooltip", children: content }) }) })] }));
|
|
14
|
+
}
|
|
15
|
+
//# sourceMappingURL=Tooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAsBpC;;;;GAIG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,OAAO,EACP,QAAQ,EACR,IAAI,GAAG,KAAK,EACZ,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,SAAS,GACI;IACb,MAAM,SAAS,GAAG,kBAAkB,EAAE,CAAC;IACvC,OAAO,CACL,MAAC,WAAW,CAAC,IAAI,IACf,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAC/D,QAAQ,EAAE,QAAQ,aAElB,KAAC,WAAW,CAAC,OAAO,IAAC,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,EACvD,KAAC,WAAW,CAAC,MAAM,IAAC,SAAS,EAAE,SAAS,YACtC,KAAC,WAAW,CAAC,UAAU,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,gBAAgB,EAAE,CAAC,EAAE,cAAc,EAAC,OAAO,EAAC,SAAS,EAAC,wBAAwB,YAC/H,KAAC,WAAW,CAAC,KAAK,IAAC,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,eAAY,SAAS,YAC3E,OAAO,GACU,GACG,GACN,IACJ,CACpB,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export type VisuallyHiddenElement = 'span' | 'div' | 'p' | 'h2' | 'h3' | 'label' | 'legend';
|
|
3
|
+
export type VisuallyHiddenProps = React.HTMLAttributes<HTMLElement> & {
|
|
4
|
+
as?: VisuallyHiddenElement;
|
|
5
|
+
/** Become visible while it or a descendant has focus (skip links). */
|
|
6
|
+
focusable?: boolean;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Content for assistive tech only: still in the accessibility tree, removed from layout.
|
|
10
|
+
* Not a way to hide focusable controls unless `focusable` makes them reappear on focus.
|
|
11
|
+
*/
|
|
12
|
+
export declare const VisuallyHidden: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
13
|
+
as?: VisuallyHiddenElement;
|
|
14
|
+
/** Become visible while it or a descendant has focus (skip links). */
|
|
15
|
+
focusable?: boolean;
|
|
16
|
+
} & React.RefAttributes<HTMLElement>>;
|
|
17
|
+
//# sourceMappingURL=VisuallyHidden.d.ts.map
|