@wzrhine/react 0.1.0 → 0.2.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 +20 -1
- package/dist/components/Alert.d.ts +3 -0
- package/dist/components/Alert.d.ts.map +1 -1
- package/dist/components/Alert.js +2 -2
- package/dist/components/Alert.js.map +1 -1
- package/dist/components/AlertDialog.d.ts +9 -1
- package/dist/components/AlertDialog.d.ts.map +1 -1
- package/dist/components/AlertDialog.js +25 -4
- package/dist/components/AlertDialog.js.map +1 -1
- package/dist/components/Badge.d.ts +17 -0
- package/dist/components/Badge.d.ts.map +1 -0
- package/dist/components/Badge.js +16 -0
- package/dist/components/Badge.js.map +1 -0
- package/dist/components/Button.d.ts +3 -0
- package/dist/components/Button.d.ts.map +1 -1
- package/dist/components/Button.js +2 -2
- package/dist/components/Button.js.map +1 -1
- package/dist/components/Dialog.d.ts +5 -1
- package/dist/components/Dialog.d.ts.map +1 -1
- package/dist/components/Dialog.js +4 -2
- package/dist/components/Dialog.js.map +1 -1
- package/dist/components/Fieldset.d.ts +2 -1
- package/dist/components/Fieldset.d.ts.map +1 -1
- package/dist/components/Fieldset.js +2 -2
- package/dist/components/Fieldset.js.map +1 -1
- package/dist/components/Form.d.ts +1 -0
- package/dist/components/Form.d.ts.map +1 -1
- package/dist/components/Form.js +2 -2
- package/dist/components/Form.js.map +1 -1
- package/dist/components/Icon.d.ts +25 -0
- package/dist/components/Icon.d.ts.map +1 -0
- package/dist/components/Icon.js +38 -0
- package/dist/components/Icon.js.map +1 -0
- package/dist/components/NumberField.d.ts +3 -1
- package/dist/components/NumberField.d.ts.map +1 -1
- package/dist/components/NumberField.js +8 -2
- package/dist/components/NumberField.js.map +1 -1
- package/dist/components/Popover.d.ts +8 -3
- package/dist/components/Popover.d.ts.map +1 -1
- package/dist/components/Popover.js +2 -2
- package/dist/components/Popover.js.map +1 -1
- package/dist/components/Radio.d.ts +7 -0
- package/dist/components/Radio.d.ts.map +1 -1
- package/dist/components/Radio.js +4 -4
- package/dist/components/Radio.js.map +1 -1
- package/dist/components/ResizeHandle.d.ts +32 -0
- package/dist/components/ResizeHandle.d.ts.map +1 -0
- package/dist/components/ResizeHandle.js +33 -0
- package/dist/components/ResizeHandle.js.map +1 -0
- package/dist/components/ScrollArea.d.ts +5 -0
- package/dist/components/ScrollArea.d.ts.map +1 -1
- package/dist/components/ScrollArea.js +2 -2
- package/dist/components/ScrollArea.js.map +1 -1
- package/dist/components/Tree.d.ts +28 -0
- package/dist/components/Tree.d.ts.map +1 -0
- package/dist/components/Tree.js +129 -0
- package/dist/components/Tree.js.map +1 -0
- package/dist/components/Workbench.d.ts +31 -0
- package/dist/components/Workbench.d.ts.map +1 -0
- package/dist/components/Workbench.js +71 -0
- package/dist/components/Workbench.js.map +1 -0
- package/dist/components/navigation.d.ts +38 -0
- package/dist/components/navigation.d.ts.map +1 -0
- package/dist/components/navigation.js +96 -0
- package/dist/components/navigation.js.map +1 -0
- package/dist/components.css +46 -0
- package/dist/forms.css +17 -0
- package/dist/index.d.ts +16 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +6 -0
- package/dist/index.js.map +1 -1
- package/dist/provider/messages.d.ts +19 -0
- package/dist/provider/messages.d.ts.map +1 -1
- package/dist/provider/messages.js +8 -0
- package/dist/provider/messages.js.map +1 -1
- package/package.json +9 -4
package/CHANGELOG.md
CHANGED
|
@@ -4,7 +4,26 @@
|
|
|
4
4
|
|
|
5
5
|
## [Unreleased]
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## [0.2.0] - 2026-10-14
|
|
8
|
+
|
|
9
|
+
Wpi-Agent 接入补齐(M13,B0–B9)。五个包同一版本线,公开 API 相对 0.1.0 只有新增,没有重命名或删除。
|
|
10
|
+
|
|
11
|
+
### Added
|
|
12
|
+
- **B1 · 公共图标入口**:`@wzrhine/react/icons` 导出 `Icon`、`iconNames`、`IconName`、`IconProps`。家族语法为 24×24 网格、1.75 描边、圆端圆角、`currentColor`,本包保持零运行时图标依赖([ICONS.md](../../docs/design/ICONS.md))。
|
|
13
|
+
- 方向(2026-10-14 batch-02):搜索、箭头、文件、状态等通用字形交给消费方(如 Wpi-Agent)的 Lucide 基础层;本库只保留既有内置字形与 4 枚承载科研 / 档案 / 智能体语义的定制字形 `Agent`、`Caliper`、`Sample`、`Index`。混排时把 Lucide 组件统一设为 `strokeWidth={1.75}`。
|
|
14
|
+
- **B3、B4 · 壳层与导航**:`Workbench`(含 `WorkbenchIndex`、`useWorkbench`)、`NavRail`、`NavList`、`NavGroup`、`NavItem`、`Tree`(含 `TreeNode`:展开、选择、方向键、Home / End、typeahead、懒加载与重试)、`CountBadge`、`Tag`、公共 `ResizeHandle`(`@wzrhine/agent` 原有导出保留)。
|
|
15
|
+
- **B5、B8 · 覆盖层与表单扩展**:Popover 外部 `anchor`(元素、ref 或虚拟矩形)、`sideOffset`、`initialFocus={false}`;AlertDialog 第三按钮(`AlertDialogAlternateAction`)、禁用确认与强调方式;Dialog 关闭按钮与 `finalFocus`;RadioGroup `appearance="chip" | "card"`、隐藏标签与图标槽;Form `submitOnEnter`;Button `tone="danger"`(`ButtonTone`);Alert `size`(`AlertSize`);ScrollArea `reveal`(`ScrollReveal`)。
|
|
16
|
+
- **ADR-0013 · 开放分类法**:`Icon` 的 `name` 接受任意字符串,新增 `children` 覆盖内置路径;自定义图标必须搭配 `children`,否则渲染空 SVG。
|
|
17
|
+
|
|
18
|
+
### Changed
|
|
19
|
+
- **破坏性(声明层面)**:peer `motion` 由 `^12` 升到 `^14.0.0`,本仓开发与验证版本为 14.1.0。
|
|
20
|
+
- 迁移:升级到 motion 14.1.0,并确保应用内 React 与 motion 各只有一份;其余不用改(见 UPGRADING「升到 0.2.0」)。
|
|
21
|
+
- 体积(ADR-0008 §3):`react-full` gzip 182.34 → 189.00 KB、`react-css` 15.17 → 16.10 KB;**预算未调整**(仍是 202 KB / 18 KB),`react-button` / `react-full` = 1.4%,tree-shaking 正常([SIZE.md](../../docs/development/SIZE.md))。
|
|
22
|
+
|
|
23
|
+
### Fixed
|
|
24
|
+
- Button `tone="danger"` 悬停背景此前透明(`--rl-danger-hover` 未定义),现在按 accent 的惯例在悬停时变亮;两种主题均有 E2E 断言。
|
|
25
|
+
- Tree 选中行引用未定义的 `--rl-bg-selected`(选中态透明),改用 `--rl-bg-subtle`。
|
|
26
|
+
- CountBadge 引用未定义的 `--rl-type-meta-size`,字号回落到 mono 12px。
|
|
8
27
|
|
|
9
28
|
## [0.1.0] - 2026-10-12
|
|
10
29
|
|
|
@@ -17,6 +17,7 @@ import * as React from 'react';
|
|
|
17
17
|
*/
|
|
18
18
|
export type AlertTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
|
|
19
19
|
export type AlertLive = 'off' | 'polite' | 'assertive';
|
|
20
|
+
export type AlertSize = 'sm' | 'md';
|
|
20
21
|
type BaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'role'> & {
|
|
21
22
|
tone?: AlertTone;
|
|
22
23
|
title?: React.ReactNode;
|
|
@@ -25,6 +26,7 @@ type BaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'role'> &
|
|
|
25
26
|
icon?: React.ReactNode;
|
|
26
27
|
};
|
|
27
28
|
export type AlertProps = BaseProps & {
|
|
29
|
+
size?: AlertSize;
|
|
28
30
|
live?: AlertLive;
|
|
29
31
|
/** Follow-up control(s), e.g. a small Button 「查看」. */
|
|
30
32
|
action?: React.ReactNode;
|
|
@@ -41,6 +43,7 @@ export declare const Alert: React.ForwardRefExoticComponent<Omit<React.HTMLAttri
|
|
|
41
43
|
/** Replace the tone icon; `null` removes it. */
|
|
42
44
|
icon?: React.ReactNode;
|
|
43
45
|
} & {
|
|
46
|
+
size?: AlertSize;
|
|
44
47
|
live?: AlertLive;
|
|
45
48
|
/** Follow-up control(s), e.g. a small Button 「查看」. */
|
|
46
49
|
action?: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC9E,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC9E,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,WAAW,CAAC;AACvD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpC,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IAC9E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gDAAgD;IAChD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG;IACnC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sDAAsD;IACtD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,SAAS,CAAC;AA2DrC,eAAO,MAAM,KAAK;WA7ET,SAAS;YACR,KAAK,CAAC,SAAS;eACZ,KAAK,CAAC,SAAS;IAC1B,gDAAgD;WACzC,KAAK,CAAC,SAAS;;WAIf,SAAS;WACT,SAAS;IAChB,sDAAsD;aAC7C,KAAK,CAAC,SAAS;IACxB,2EAA2E;gBAC/D,MAAM,IAAI;IACtB,2CAA2C;mBAC5B,MAAM;wCA8ErB,CAAC;AAEH,eAAO,MAAM,OAAO;WA/FX,SAAS;YACR,KAAK,CAAC,SAAS;eACZ,KAAK,CAAC,SAAS;IAC1B,gDAAgD;WACzC,KAAK,CAAC,SAAS;wCAsGtB,CAAC"}
|
package/dist/components/Alert.js
CHANGED
|
@@ -19,9 +19,9 @@ function CloseIcon() {
|
|
|
19
19
|
function Message({ tone, icon, title, children, role, }) {
|
|
20
20
|
return (_jsxs("div", { className: "rl-alert__message", role: role, children: [icon === undefined ? (_jsx(ToneIcon, { tone: tone, className: "rl-alert__icon rl-alert__glyph" })) : icon === null ? null : (_jsx("span", { className: "rl-alert__icon", "aria-hidden": "true", children: icon })), _jsxs("div", { className: "rl-alert__text", children: [title != null && title !== false && _jsx("p", { className: "rl-alert__title", children: title }), children != null && children !== false && _jsx("div", { className: "rl-alert__body", children: children })] })] }));
|
|
21
21
|
}
|
|
22
|
-
export const Alert = React.forwardRef(function Alert({ tone = 'info', title, children, icon, live = 'off', action, onDismiss, dismissLabel, className, ...rest }, ref) {
|
|
22
|
+
export const Alert = React.forwardRef(function Alert({ tone = 'info', title, children, icon, live = 'off', action, onDismiss, dismissLabel, size = 'md', className, ...rest }, ref) {
|
|
23
23
|
const messages = useRhineMessages();
|
|
24
|
-
return (_jsxs("div", { ...rest, ref: ref, className: cx('rl-alert', className), "data-slot": "alert", "data-tone": tone, "data-live": live, children: [_jsx(Message, { tone: tone, icon: icon, title: title, role: liveRole[live], children: children }), action != null && _jsx("div", { className: "rl-alert__action", children: action }), onDismiss && (_jsx(IconButton, { className: "rl-alert__dismiss", size: "sm", variant: "ghost", icon: _jsx(CloseIcon, {}), label: dismissLabel ?? messages.alert.dismiss, onClick: onDismiss }))] }));
|
|
24
|
+
return (_jsxs("div", { ...rest, ref: ref, className: cx('rl-alert', className), "data-slot": "alert", "data-tone": tone, "data-live": live, "data-size": size, children: [_jsx(Message, { tone: tone, icon: icon, title: title, role: liveRole[live], children: children }), action != null && _jsx("div", { className: "rl-alert__action", children: action }), onDismiss && (_jsx(IconButton, { className: "rl-alert__dismiss", size: "sm", variant: "ghost", icon: _jsx(CloseIcon, {}), label: dismissLabel ?? messages.alert.dismiss, onClick: onDismiss }))] }));
|
|
25
25
|
});
|
|
26
26
|
export const Callout = React.forwardRef(function Callout({ tone = 'info', title, children, icon, className, ...rest }, ref) {
|
|
27
27
|
return (_jsx("div", { ...rest, ref: ref, role: "note", className: cx('rl-alert', 'rl-callout', className), "data-slot": "callout", "data-tone": tone, children: _jsx(Message, { tone: tone, icon: icon, title: title, children: children }) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/components/Alert.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;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":"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"}
|
|
@@ -8,6 +8,11 @@ import * as React from 'react';
|
|
|
8
8
|
* Motion matches Dialog (backdrop fast, panel + 8px rise; opacity only when reduced).
|
|
9
9
|
*/
|
|
10
10
|
export type AlertDialogTone = 'danger' | 'default';
|
|
11
|
+
export type AlertDialogAlternateAction = {
|
|
12
|
+
label: React.ReactNode;
|
|
13
|
+
onClick?: () => void | Promise<unknown>;
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
};
|
|
11
16
|
export type AlertDialogProps = {
|
|
12
17
|
/** Element that opens the dialog (usually a Button). Omit when opening programmatically. */
|
|
13
18
|
trigger?: React.ReactElement<Record<string, unknown>>;
|
|
@@ -23,6 +28,9 @@ export type AlertDialogProps = {
|
|
|
23
28
|
cancelLabel?: React.ReactNode;
|
|
24
29
|
/** `danger` (default) fills the confirm button with the danger colour. */
|
|
25
30
|
tone?: AlertDialogTone;
|
|
31
|
+
confirmDisabled?: boolean;
|
|
32
|
+
emphasis?: 'confirm' | 'cancel';
|
|
33
|
+
alternateAction?: AlertDialogAlternateAction;
|
|
26
34
|
/** Runs on confirm. Return a Promise to keep the dialog open until it settles. */
|
|
27
35
|
onConfirm: () => void | Promise<unknown>;
|
|
28
36
|
/** Shown in a role="alert" message when the Promise from `onConfirm` rejects. */
|
|
@@ -37,5 +45,5 @@ export type AlertDialogProps = {
|
|
|
37
45
|
'aria-label'?: never;
|
|
38
46
|
'aria-labelledby'?: never;
|
|
39
47
|
};
|
|
40
|
-
export declare function AlertDialog({ trigger, title, description, eyebrow, children, confirmLabel, cancelLabel: cancelLabelProp, tone, onConfirm, errorText: errorTextProp, open: openProp, defaultOpen, onOpenChange, onClosed, className, }: AlertDialogProps): React.JSX.Element;
|
|
48
|
+
export declare function AlertDialog({ trigger, title, description, eyebrow, children, confirmLabel, cancelLabel: cancelLabelProp, tone, onConfirm, confirmDisabled, emphasis, alternateAction, errorText: errorTextProp, open: openProp, defaultOpen, onOpenChange, onClosed, className, }: AlertDialogProps): React.JSX.Element;
|
|
41
49
|
//# sourceMappingURL=AlertDialog.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/components/AlertDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B;;;;;;;GAOG;AAEH,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/components/AlertDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B;;;;;;;GAOG;AAEH,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,SAAS,CAAC;AACnD,MAAM,MAAM,0BAA0B,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEjI,MAAM,MAAM,gBAAgB,GAAG;IAC7B,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,0DAA0D;IAC1D,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,sEAAsE;IACtE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mFAAmF;IACnF,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,0EAA0E;IAC1E,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAChC,eAAe,CAAC,EAAE,0BAA0B,CAAC;IAC7C,kFAAkF;IAClF,SAAS,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IACzC,iFAAiF;IACjF,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,CAAC;AAOF,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,WAAW,EAAE,eAAe,EAC5B,IAAe,EACf,SAAS,EACT,eAAuB,EACvB,QAAmB,EACnB,eAAe,EACf,SAAS,EAAE,aAAa,EACxB,IAAI,EAAE,QAAQ,EACd,WAAmB,EACnB,YAAY,EACZ,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,qBAwLlB"}
|
|
@@ -10,7 +10,7 @@ import { cx } from '../utils/cx.js';
|
|
|
10
10
|
import { Button } from './Button.js';
|
|
11
11
|
const offset = 8;
|
|
12
12
|
const isThenable = (value) => value != null && typeof value.then === 'function';
|
|
13
|
-
export function AlertDialog({ trigger, title, description, eyebrow, children, confirmLabel, cancelLabel: cancelLabelProp, tone = 'danger', onConfirm, errorText: errorTextProp, open: openProp, defaultOpen = false, onOpenChange, onClosed, className, }) {
|
|
13
|
+
export function AlertDialog({ trigger, title, description, eyebrow, children, confirmLabel, cancelLabel: cancelLabelProp, tone = 'danger', onConfirm, confirmDisabled = false, emphasis = 'cancel', alternateAction, errorText: errorTextProp, open: openProp, defaultOpen = false, onOpenChange, onClosed, className, }) {
|
|
14
14
|
const messages = useRhineMessages();
|
|
15
15
|
const cancelLabel = cancelLabelProp === undefined ? messages.alertDialog.cancel : cancelLabelProp;
|
|
16
16
|
const errorText = errorTextProp === undefined ? messages.alertDialog.error : errorTextProp;
|
|
@@ -56,7 +56,7 @@ export function AlertDialog({ trigger, title, description, eyebrow, children, co
|
|
|
56
56
|
setFailures((n) => n + 1);
|
|
57
57
|
};
|
|
58
58
|
const handleConfirm = () => {
|
|
59
|
-
if (pending)
|
|
59
|
+
if (pending || confirmDisabled)
|
|
60
60
|
return;
|
|
61
61
|
attempt.current += 1;
|
|
62
62
|
const id = attempt.current;
|
|
@@ -84,6 +84,27 @@ export function AlertDialog({ trigger, title, description, eyebrow, children, co
|
|
|
84
84
|
fail();
|
|
85
85
|
});
|
|
86
86
|
};
|
|
87
|
+
const handleAlternate = () => {
|
|
88
|
+
if (pending || !alternateAction?.onClick)
|
|
89
|
+
return;
|
|
90
|
+
attempt.current += 1;
|
|
91
|
+
const id = attempt.current;
|
|
92
|
+
try {
|
|
93
|
+
const result = alternateAction.onClick();
|
|
94
|
+
if (isThenable(result)) {
|
|
95
|
+
setPending(true);
|
|
96
|
+
result.then(() => { if (attempt.current !== id)
|
|
97
|
+
return; setPending(false); setOpen(false); }, () => { if (attempt.current !== id)
|
|
98
|
+
return; fail(); });
|
|
99
|
+
}
|
|
100
|
+
else {
|
|
101
|
+
setOpen(false);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
catch {
|
|
105
|
+
fail();
|
|
106
|
+
}
|
|
107
|
+
};
|
|
87
108
|
return (_jsxs(BaseAlertDialog.Root, { open: open, onOpenChange: (next, eventDetails) => {
|
|
88
109
|
// While a confirmation is in flight, cancelling would look like it undid the action.
|
|
89
110
|
if (!next && pending) {
|
|
@@ -94,8 +115,8 @@ export function AlertDialog({ trigger, title, description, eyebrow, children, co
|
|
|
94
115
|
}, onOpenChangeComplete: (isOpen) => {
|
|
95
116
|
if (!isOpen)
|
|
96
117
|
onClosed?.();
|
|
97
|
-
}, children: [trigger && _jsx(BaseAlertDialog.Trigger, { render: trigger }), _jsx(AnimatePresence, { children: open && (_jsxs(BaseAlertDialog.Portal, { keepMounted: true, container: container, children: [_jsx(BaseAlertDialog.Backdrop, { className: "rl-dialog__backdrop", render: _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: motionPrefs.get('fast') }) }), _jsxs(BaseAlertDialog.Popup, { className: cx('rl-dialog rl-alert-dialog', className), "data-slot": "alert-dialog", "data-size": "sm", "data-tone": tone, initialFocus: cancelRef, 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(BaseAlertDialog.Title, { className: "rl-dialog__title", children: title }), _jsx(BaseAlertDialog.Description, { className: "rl-dialog__description", children: description })] }), (children != null || failures > 0) && (_jsxs("div", { className: "rl-dialog__body", children: [children, failures > 0 && (
|
|
118
|
+
}, children: [trigger && _jsx(BaseAlertDialog.Trigger, { render: trigger }), _jsx(AnimatePresence, { children: open && (_jsxs(BaseAlertDialog.Portal, { keepMounted: true, container: container, children: [_jsx(BaseAlertDialog.Backdrop, { className: "rl-dialog__backdrop", render: _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: motionPrefs.get('fast') }) }), _jsxs(BaseAlertDialog.Popup, { className: cx('rl-dialog rl-alert-dialog', className), "data-slot": "alert-dialog", "data-size": "sm", "data-tone": tone, initialFocus: emphasis === 'confirm' && !confirmDisabled ? confirmRef : cancelRef, 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(BaseAlertDialog.Title, { className: "rl-dialog__title", children: title }), _jsx(BaseAlertDialog.Description, { className: "rl-dialog__description", children: description })] }), (children != null || failures > 0) && (_jsxs("div", { className: "rl-dialog__body", children: [children, failures > 0 && (
|
|
98
119
|
// Remounted per failure so a repeated failure is announced again.
|
|
99
|
-
_jsx("p", { className: "rl-alert-dialog__error", role: "alert", children: errorText }, failures))] })), _jsxs("footer", { className: "rl-dialog__actions", children: [_jsx(BaseAlertDialog.Close, { disabled: pending, render: _jsx(Button, { ref: cancelRef, variant: "ghost", className: "rl-alert-dialog__cancel" }), children: cancelLabel }), _jsx(Button, { ref: confirmRef, className: "rl-alert-dialog__confirm",
|
|
120
|
+
_jsx("p", { className: "rl-alert-dialog__error", role: "alert", children: errorText }, failures))] })), _jsxs("footer", { className: "rl-dialog__actions", children: [alternateAction && _jsx(Button, { variant: "ghost", disabled: alternateAction.disabled || pending, onClick: handleAlternate, children: alternateAction.label }), _jsx(BaseAlertDialog.Close, { disabled: pending, render: _jsx(Button, { ref: cancelRef, variant: "ghost", className: "rl-alert-dialog__cancel" }), children: cancelLabel }), _jsx(Button, { ref: confirmRef, className: "rl-alert-dialog__confirm", tone: tone === 'danger' ? 'danger' : 'default', loading: pending, disabled: confirmDisabled, onClick: handleConfirm, children: confirmLabel })] })] })] })) })] }));
|
|
100
121
|
}
|
|
101
122
|
//# sourceMappingURL=AlertDialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertDialog.js","sourceRoot":"","sources":["../../src/components/AlertDialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"AlertDialog.js","sourceRoot":"","sources":["../../src/components/AlertDialog.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export type CountBadgeProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {
|
|
3
|
+
value: number;
|
|
4
|
+
max?: number;
|
|
5
|
+
live?: boolean;
|
|
6
|
+
};
|
|
7
|
+
export declare function CountBadge({ value, max, live, className, ...rest }: CountBadgeProps): React.JSX.Element | null;
|
|
8
|
+
export type TagProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
tone?: 'neutral' | 'invalid';
|
|
11
|
+
onRemove?: () => void;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
/** Override the localized remove label when the tag is used outside the default locale. */
|
|
14
|
+
removeLabel?: string;
|
|
15
|
+
};
|
|
16
|
+
export declare function Tag({ children, tone, onRemove, disabled, removeLabel, className, ...rest }: TagProps): React.JSX.Element;
|
|
17
|
+
//# sourceMappingURL=Badge.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,GAAG;IACtF,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,GAAQ,EAAE,IAAY,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,4BAKhG;AAED,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,GAAG;IAC/E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAgB,EAAE,QAAQ,EAAE,QAAgB,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,QAAQ,qBAMxH"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { cx } from '../utils/cx.js';
|
|
4
|
+
import { Icon } from './Icon.js';
|
|
5
|
+
export function CountBadge({ value, max = 99, live = false, className, ...rest }) {
|
|
6
|
+
if (value <= 0)
|
|
7
|
+
return null;
|
|
8
|
+
const safeMax = Number.isFinite(max) && max > 0 ? Math.floor(max) : 99;
|
|
9
|
+
const text = value > safeMax ? `${safeMax}+` : String(value);
|
|
10
|
+
return _jsx("span", { ...rest, className: cx('rl-count-badge', className), "data-live": live || undefined, role: live ? 'status' : undefined, children: text });
|
|
11
|
+
}
|
|
12
|
+
export function Tag({ children, tone = 'neutral', onRemove, disabled = false, removeLabel, className, ...rest }) {
|
|
13
|
+
const label = typeof children === 'string' ? children : 'tag';
|
|
14
|
+
return _jsxs("span", { ...rest, className: cx('rl-tag', className), "data-tone": tone, "data-disabled": disabled || undefined, children: [_jsx("span", { className: "rl-tag__label", children: children }), onRemove && _jsx("button", { type: "button", className: "rl-tag__remove", "aria-label": removeLabel ?? `Remove ${label}`, disabled: disabled, onClick: onRemove, children: _jsx(Icon, { name: "X", size: 14 }) })] });
|
|
15
|
+
}
|
|
16
|
+
//# sourceMappingURL=Badge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAQjC,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,GAAG,GAAG,EAAE,EAAE,IAAI,GAAG,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAmB;IAC/F,IAAI,KAAK,IAAI,CAAC;QAAE,OAAO,IAAI,CAAC;IAC5B,MAAM,OAAO,GAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACvE,MAAM,IAAI,GAAG,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC7D,OAAO,kBAAU,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,SAAS,CAAC,eAAa,IAAI,IAAI,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,YAAG,IAAI,GAAQ,CAAC;AACpJ,CAAC;AAWD,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAG,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,IAAI,EAAY;IACvH,MAAM,KAAK,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAC9D,OAAO,mBAAU,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,eAAa,IAAI,mBAAiB,QAAQ,IAAI,SAAS,aAC9G,eAAM,SAAS,EAAC,eAAe,YAAE,QAAQ,GAAQ,EAChD,QAAQ,IAAI,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,gBAAgB,gBAAa,WAAW,IAAI,UAAU,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,YAAE,KAAC,IAAI,IAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,EAAE,GAAI,GAAS,IAClL,CAAC;AACV,CAAC"}
|
|
@@ -2,10 +2,12 @@ import * as React from 'react';
|
|
|
2
2
|
type MotionConflictingProps = 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'onAnimationEnd' | 'onAnimationIteration';
|
|
3
3
|
export type ButtonVariant = 'primary' | 'accent' | 'secondary' | 'ghost';
|
|
4
4
|
export type ButtonSize = 'sm' | 'md' | 'lg';
|
|
5
|
+
export type ButtonTone = 'default' | 'danger';
|
|
5
6
|
export type ButtonProps = Omit<React.ComponentPropsWithoutRef<'button'>, 'disabled' | MotionConflictingProps> & {
|
|
6
7
|
/** Visual weight. `primary` = ink fill; `accent` = research-orange signal, use once per view. */
|
|
7
8
|
variant?: ButtonVariant;
|
|
8
9
|
size?: ButtonSize;
|
|
10
|
+
tone?: ButtonTone;
|
|
9
11
|
/** Blocks activation and announces busy state while keeping focus and the accessible name. */
|
|
10
12
|
loading?: boolean;
|
|
11
13
|
disabled?: boolean;
|
|
@@ -18,6 +20,7 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<React.Det
|
|
|
18
20
|
/** Visual weight. `primary` = ink fill; `accent` = research-orange signal, use once per view. */
|
|
19
21
|
variant?: ButtonVariant;
|
|
20
22
|
size?: ButtonSize;
|
|
23
|
+
tone?: ButtonTone;
|
|
21
24
|
/** Blocks activation and announces busy state while keeping focus and the accessible name. */
|
|
22
25
|
loading?: boolean;
|
|
23
26
|
disabled?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,KAAK,sBAAsB,GACvB,QAAQ,GACR,aAAa,GACb,WAAW,GACX,kBAAkB,GAClB,gBAAgB,GAChB,sBAAsB,CAAC;AAE3B,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,OAAO,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,KAAK,sBAAsB,GACvB,QAAQ,GACR,aAAa,GACb,WAAW,GACX,kBAAkB,GAClB,gBAAgB,GAChB,sBAAsB,CAAC;AAE3B,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,OAAO,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE9C,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,sBAAsB,CAAC,GAAG;IAC9G,iGAAiG;IACjG,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,8FAA8F;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,4DAA4D;IAC5D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,MAAM;IAbjB,iGAAiG;cACvF,aAAa;WAChB,UAAU;WACV,UAAU;IACjB,8FAA8F;cACpF,OAAO;eACN,OAAO;IAClB,2DAA2D;gBAC/C,KAAK,CAAC,SAAS;IAC3B,4DAA4D;cAClD,KAAK,CAAC,SAAS;2CAoFzB,CAAC"}
|
|
@@ -6,7 +6,7 @@ import { fadePresence, pressScale } from '../motion/presets.js';
|
|
|
6
6
|
import { useRhineMotion } from '../motion/useRhineMotion.js';
|
|
7
7
|
import { cx } from '../utils/cx.js';
|
|
8
8
|
import { Spinner } from './Spinner.js';
|
|
9
|
-
export const Button = React.forwardRef(function Button({ variant = 'primary', size = 'md', loading = false, disabled = false, type = 'button', iconStart, iconEnd, children, className, onClick, ...rest }, ref) {
|
|
9
|
+
export const Button = React.forwardRef(function Button({ variant = 'primary', size = 'md', tone = 'default', loading = false, disabled = false, type = 'button', iconStart, iconEnd, children, className, onClick, ...rest }, ref) {
|
|
10
10
|
const motionPrefs = useRhineMotion();
|
|
11
11
|
const interactive = !disabled && !loading;
|
|
12
12
|
const handleClick = (event) => {
|
|
@@ -19,6 +19,6 @@ export const Button = React.forwardRef(function Button({ variant = 'primary', si
|
|
|
19
19
|
};
|
|
20
20
|
return (_jsxs(motion.button, { ...rest, ref: ref, type: type,
|
|
21
21
|
// Native disabled removes focus; loading keeps the button focusable via aria-disabled.
|
|
22
|
-
disabled: disabled, "aria-disabled": loading || undefined, "aria-busy": loading || undefined, "data-slot": "button", "data-variant": variant, "data-size": size, "data-loading": loading || undefined, className: cx('rl-button', className), onClick: handleClick, whileTap: interactive && !motionPrefs.reduced ? { scale: pressScale } : undefined, transition: motionPrefs.get('press'), children: [_jsxs(motion.span, { className: "rl-button__content", initial: false, animate: { opacity: loading ? 0 : 1 }, transition: motionPrefs.get('fast'), children: [iconStart != null && (_jsx("span", { className: "rl-button__icon", "aria-hidden": "true", children: iconStart })), _jsx("span", { className: "rl-button__label", children: children }), iconEnd != null && (_jsx("span", { className: "rl-button__icon", "aria-hidden": "true", children: iconEnd }))] }), _jsx(AnimatePresence, { initial: false, children: loading && (_jsx(motion.span, { className: "rl-button__spinner", "aria-hidden": "true", ...fadePresence, transition: motionPrefs.get('fast'), children: _jsx(Spinner, {}) }, "spinner")) })] }));
|
|
22
|
+
disabled: disabled, "aria-disabled": loading || undefined, "aria-busy": loading || undefined, "data-slot": "button", "data-variant": variant, "data-size": size, "data-tone": tone, "data-loading": loading || undefined, className: cx('rl-button', className), onClick: handleClick, whileTap: interactive && !motionPrefs.reduced ? { scale: pressScale } : undefined, transition: motionPrefs.get('press'), children: [_jsxs(motion.span, { className: "rl-button__content", initial: false, animate: { opacity: loading ? 0 : 1 }, transition: motionPrefs.get('fast'), children: [iconStart != null && (_jsx("span", { className: "rl-button__icon", "aria-hidden": "true", children: iconStart })), _jsx("span", { className: "rl-button__label", children: children }), iconEnd != null && (_jsx("span", { className: "rl-button__icon", "aria-hidden": "true", children: iconEnd }))] }), _jsx(AnimatePresence, { initial: false, children: loading && (_jsx(motion.span, { className: "rl-button__spinner", "aria-hidden": "true", ...fadePresence, transition: motionPrefs.get('fast'), children: _jsx(Spinner, {}) }, "spinner")) })] }));
|
|
23
23
|
});
|
|
24
24
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AA6BvC,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAiC,SAAS,MAAM,CACpF,EACE,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,SAAS,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,OAAO,EACP,QAAQ,EACR,SAAS,EACT,OAAO,EACP,GAAG,IAAI,EACR,EACD,GAAG;IAEH,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,WAAW,GAAG,CAAC,QAAQ,IAAI,CAAC,OAAO,CAAC;IAE1C,MAAM,WAAW,GAAG,CAAC,KAA0C,EAAE,EAAE;QACjE,IAAI,OAAO,EAAE,CAAC;YACZ,yDAAyD;YACzD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,OAAO;QACT,CAAC;QACD,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,MAAM,CAAC,MAAM,OACR,IAAI,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI;QACV,uFAAuF;QACvF,QAAQ,EAAE,QAAQ,mBACH,OAAO,IAAI,SAAS,eACxB,OAAO,IAAI,SAAS,eACrB,QAAQ,kBACJ,OAAO,eACV,IAAI,eACJ,IAAI,kBACD,OAAO,IAAI,SAAS,EAClC,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,EACrC,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,WAAW,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,SAAS,EACjF,UAAU,EAAE,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,aAEpC,MAAC,MAAM,CAAC,IAAI,IACV,SAAS,EAAC,oBAAoB,EAC9B,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EACrC,UAAU,EAAE,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,aAElC,SAAS,IAAI,IAAI,IAAI,CACpB,eAAM,SAAS,EAAC,iBAAiB,iBAAa,MAAM,YACjD,SAAS,GACL,CACR,EACD,eAAM,SAAS,EAAC,kBAAkB,YAAE,QAAQ,GAAQ,EACnD,OAAO,IAAI,IAAI,IAAI,CAClB,eAAM,SAAS,EAAC,iBAAiB,iBAAa,MAAM,YACjD,OAAO,GACH,CACR,IACW,EACd,KAAC,eAAe,IAAC,OAAO,EAAE,KAAK,YAC5B,OAAO,IAAI,CACV,KAAC,MAAM,CAAC,IAAI,IAEV,SAAS,EAAC,oBAAoB,iBAClB,MAAM,KACd,YAAY,EAChB,UAAU,EAAE,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,YAEnC,KAAC,OAAO,KAAG,IANP,SAAS,CAOD,CACf,GACe,IACJ,CACjB,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -28,6 +28,10 @@ export type DialogProps = {
|
|
|
28
28
|
dismissOnOutsideClick?: boolean;
|
|
29
29
|
/** Element to focus on open; defaults to the first tabbable element. */
|
|
30
30
|
initialFocus?: React.RefObject<HTMLElement | null>;
|
|
31
|
+
/** Render the standard top-right close control (default true). */
|
|
32
|
+
closeButton?: boolean;
|
|
33
|
+
/** Focus target after closing; `false` leaves focus where the browser left it. */
|
|
34
|
+
finalFocus?: boolean | null | React.RefObject<HTMLElement | null>;
|
|
31
35
|
/**
|
|
32
36
|
* Called before a user-initiated close. Return `false` to keep the dialog open (focus stays put),
|
|
33
37
|
* e.g. to ask "放弃未保存的更改?" in a nested AlertDialog. Programmatic `open={false}` skips it.
|
|
@@ -35,7 +39,7 @@ export type DialogProps = {
|
|
|
35
39
|
onCloseRequest?: (reason: DialogCloseReason) => boolean | void;
|
|
36
40
|
className?: string;
|
|
37
41
|
};
|
|
38
|
-
export declare function Dialog({ trigger, title, description, eyebrow, actions, children, open: openProp, defaultOpen, onOpenChange, onClosed, size, dismissOnOutsideClick, initialFocus, onCloseRequest, className, }: DialogProps): React.JSX.Element;
|
|
42
|
+
export declare function Dialog({ trigger, title, description, eyebrow, actions, children, open: openProp, defaultOpen, onOpenChange, onClosed, size, dismissOnOutsideClick, initialFocus, closeButton, finalFocus, onCloseRequest, className, }: DialogProps): React.JSX.Element;
|
|
39
43
|
export type DialogCloseProps = {
|
|
40
44
|
/** The element that closes the dialog, typically `<Button variant="ghost">取消</Button>`. */
|
|
41
45
|
children: React.ReactElement<Record<string, unknown>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/components/Dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/components/Dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B;;;;;GAKG;AAEH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,gEAAgE;AAChE,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,SAAS,GAAG,cAAc,GAAG,SAAS,CAAC;AASlF,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,2EAA2E;IAC3E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yEAAyE;IACzE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,wFAAwF;IACxF,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,wEAAwE;IACxE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACnD,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kFAAkF;IAClF,UAAU,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAClE;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,OAAO,GAAG,IAAI,CAAC;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,QAAQ,EACR,IAAI,EAAE,QAAQ,EACd,WAAmB,EACnB,YAAY,EACZ,QAAQ,EACR,IAAW,EACX,qBAA4B,EAC5B,YAAY,EACZ,WAAkB,EAClB,UAAU,EACV,cAAc,EACd,SAAS,GACV,EAAE,WAAW,qBA6Eb;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,iEAAiE;AACjE,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE,gBAAgB,qBAEzD"}
|
|
@@ -6,6 +6,8 @@ import { AnimatePresence, motion } from 'motion/react';
|
|
|
6
6
|
import { usePortalContainer } from '../provider/portal.js';
|
|
7
7
|
import { useRhineMotion } from '../motion/useRhineMotion.js';
|
|
8
8
|
import { cx } from '../utils/cx.js';
|
|
9
|
+
import { IconButton } from './IconButton.js';
|
|
10
|
+
import { Icon } from './Icon.js';
|
|
9
11
|
const closeReasons = {
|
|
10
12
|
'escape-key': 'escape',
|
|
11
13
|
'outside-press': 'outside',
|
|
@@ -13,7 +15,7 @@ const closeReasons = {
|
|
|
13
15
|
'trigger-press': 'trigger',
|
|
14
16
|
};
|
|
15
17
|
const offset = 8;
|
|
16
|
-
export function Dialog({ trigger, title, description, eyebrow, actions, children, open: openProp, defaultOpen = false, onOpenChange, onClosed, size = 'md', dismissOnOutsideClick = true, initialFocus, onCloseRequest, className, }) {
|
|
18
|
+
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, }) {
|
|
17
19
|
const [uncontrolled, setUncontrolled] = React.useState(defaultOpen);
|
|
18
20
|
const controlled = openProp !== undefined;
|
|
19
21
|
const open = controlled ? openProp : uncontrolled;
|
|
@@ -37,7 +39,7 @@ export function Dialog({ trigger, title, description, eyebrow, actions, children
|
|
|
37
39
|
}, onOpenChangeComplete: (isOpen) => {
|
|
38
40
|
if (!isOpen)
|
|
39
41
|
onClosed?.();
|
|
40
|
-
}, 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, 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 }))] }), children != null && _jsx("div", { className: "rl-dialog__body", children: children }), actions != null && _jsx("footer", { className: "rl-dialog__actions", children: actions })] })] })) })] }));
|
|
42
|
+
}, 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 })] })] })) })] }));
|
|
41
43
|
}
|
|
42
44
|
/** Wraps a button so activating it closes the nearest Dialog. */
|
|
43
45
|
export function DialogClose({ children }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/components/Dialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/components/Dialog.tsx"],"names":[],"mappings":"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"}
|
|
@@ -8,9 +8,10 @@ export type FieldsetProps = Omit<BaseRootProps, 'className' | 'style' | 'render'
|
|
|
8
8
|
description?: React.ReactNode;
|
|
9
9
|
/** `disabled` disables every Field and control inside, including Base UI ones. */
|
|
10
10
|
disabled?: boolean;
|
|
11
|
+
legendOptional?: boolean;
|
|
11
12
|
className?: string;
|
|
12
13
|
style?: React.CSSProperties;
|
|
13
|
-
children
|
|
14
|
+
children?: React.ReactNode;
|
|
14
15
|
};
|
|
15
16
|
/**
|
|
16
17
|
* Groups related fields under a visible legend (a native `<fieldset>`):
|
|
@@ -1 +1 @@
|
|
|
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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;
|
|
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"}
|
|
@@ -10,8 +10,8 @@ import { cx } from '../utils/cx.js';
|
|
|
10
10
|
* <Field label="邮箱"><Input type="email" /></Field>
|
|
11
11
|
* </Fieldset>
|
|
12
12
|
*/
|
|
13
|
-
export const Fieldset = React.forwardRef(function Fieldset({ legend, description, className, style, children, ...rest }, ref) {
|
|
13
|
+
export const Fieldset = React.forwardRef(function Fieldset({ legend, description, legendOptional = false, className, style, children, ...rest }, ref) {
|
|
14
14
|
const descriptionId = React.useId();
|
|
15
|
-
return (_jsxs(BaseFieldset.Root, { ...rest, ref: ref, className: cx('rl-fieldset', className), style: style, "data-slot": "fieldset", "aria-describedby": description != null ? descriptionId : undefined, children: [
|
|
15
|
+
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 })] }));
|
|
16
16
|
});
|
|
17
17
|
//# sourceMappingURL=Fieldset.js.map
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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"}
|
|
@@ -2,6 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { Form as BaseForm } from '@base-ui/react/form';
|
|
3
3
|
type BaseFormProps = React.ComponentProps<typeof BaseForm>;
|
|
4
4
|
export type FormProps = Omit<BaseFormProps, 'className' | 'style' | 'render'> & {
|
|
5
|
+
disabled?: boolean;
|
|
5
6
|
className?: string;
|
|
6
7
|
style?: React.CSSProperties;
|
|
7
8
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../src/components/Form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAGvD,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE3D,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC,GAAG;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,IAAI,gGAEf,CAAC"}
|
|
1
|
+
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../src/components/Form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAGvD,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE3D,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC,GAAG;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,IAAI,gGAEf,CAAC"}
|
package/dist/components/Form.js
CHANGED
|
@@ -14,7 +14,7 @@ import { cx } from '../utils/cx.js';
|
|
|
14
14
|
* <Button type="submit">保存</Button>
|
|
15
15
|
* </Form>
|
|
16
16
|
*/
|
|
17
|
-
export const Form = React.forwardRef(function Form({ className, style, ...rest }, ref) {
|
|
18
|
-
return _jsx(BaseForm, { ...rest, ref: ref, className: cx('rl-form', className), style: style, "data-slot": "form" });
|
|
17
|
+
export const Form = React.forwardRef(function Form({ className, style, disabled = false, children, ...rest }, ref) {
|
|
18
|
+
return _jsx(BaseForm, { ...rest, ref: ref, className: cx('rl-form', className), style: style, "data-slot": "form", "data-disabled": disabled || undefined, children: disabled ? _jsx("fieldset", { disabled: true, className: "rl-form__disabled", children: children }) : children });
|
|
19
19
|
});
|
|
20
20
|
//# sourceMappingURL=Form.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../src/components/Form.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../src/components/Form.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAUpC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAA6B,SAAS,IAAI,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IAC3I,OAAO,KAAC,QAAQ,OAAK,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,eAAY,MAAM,mBAAgB,QAAQ,IAAI,SAAS,YAAG,QAAQ,CAAC,CAAC,CAAC,mBAAU,QAAQ,QAAC,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAY,CAAC,CAAC,CAAC,QAAQ,GAAY,CAAC;AAC3P,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Public, dependency-free line icon entry used by consumers that need a stable icon grid.
|
|
4
|
+
* Family grammar (docs/design/ICONS.md): 24×24 master, 1.75 stroke, round cap/join, currentColor.
|
|
5
|
+
* Direction (2026-10-14, icon-review/2026-10-14-batch-02): basic icons are supplied by the
|
|
6
|
+
* consumer's Lucide layer; this registry keeps the pre-existing built-ins plus custom
|
|
7
|
+
* WzRhineLab identity glyphs that Lucide does not cover (Agent / Caliper / Sample / Index).
|
|
8
|
+
*/
|
|
9
|
+
export declare const iconNames: readonly ["Settings", "Settings2", "SlidersHorizontal", "Minus", "Maximize", "Maximize2", "Minimize2", "PanelTopClose", "PanelTopOpen", "Power", "Square", "FolderOpen", "FolderPlus", "FolderMinus", "FileCode2", "FoldVertical", "Plug", "Puzzle", "Boxes", "ShieldAlert", "ShieldHalf", "ChevronUp", "Eye", "ImagePlus", "MessagesSquare", "PinOff", "RotateCcw", "SquareChartGantt", "Users", "ChevronDown", "ChevronLeft", "ChevronRight", "Plus", "X", "Check", "Agent", "Caliper", "Sample", "Index"];
|
|
10
|
+
export type IconName = (typeof iconNames)[number];
|
|
11
|
+
export type IconProps = Omit<React.SVGAttributes<SVGSVGElement>, 'name'> & {
|
|
12
|
+
/** Built-in icon name. Any other string is accepted together with `children` (custom SVG content). */
|
|
13
|
+
name: IconName | (string & {});
|
|
14
|
+
size?: number | string;
|
|
15
|
+
/** Custom SVG inner nodes; win over the built-in path for `name`. */
|
|
16
|
+
children?: React.ReactNode;
|
|
17
|
+
};
|
|
18
|
+
export declare const Icon: React.ForwardRefExoticComponent<Omit<React.SVGAttributes<SVGSVGElement>, "name"> & {
|
|
19
|
+
/** Built-in icon name. Any other string is accepted together with `children` (custom SVG content). */
|
|
20
|
+
name: IconName | (string & {});
|
|
21
|
+
size?: number | string;
|
|
22
|
+
/** Custom SVG inner nodes; win over the built-in path for `name`. */
|
|
23
|
+
children?: React.ReactNode;
|
|
24
|
+
} & React.RefAttributes<SVGSVGElement>>;
|
|
25
|
+
//# sourceMappingURL=Icon.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/components/Icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,8eAOZ,CAAC;AACX,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAkBlD,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,GAAG;IACzE,sGAAsG;IACtG,IAAI,EAAE,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,IAAI;IAPf,sGAAsG;UAChG,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC;WACvB,MAAM,GAAG,MAAM;IACtB,qEAAqE;eAC1D,KAAK,CAAC,SAAS;uCAK1B,CAAC"}
|