@ledgerhq/lumen-ui-react 0.0.55 → 0.0.56
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/dist/index.js +62 -60
- package/dist/lib/Components/Dialog/Dialog.d.ts +56 -6
- package/dist/lib/Components/Dialog/Dialog.d.ts.map +1 -1
- package/dist/lib/Components/Dialog/Dialog.js +80 -31
- package/dist/lib/Components/Dialog/DialogHeader/DialogHeader.d.ts +9 -3
- package/dist/lib/Components/Dialog/DialogHeader/DialogHeader.d.ts.map +1 -1
- package/dist/lib/Components/Dialog/DialogHeader/DialogHeader.js +82 -73
- package/dist/lib/Components/Dialog/types.d.ts +75 -8
- package/dist/lib/Components/Dialog/types.d.ts.map +1 -1
- package/dist/lib/Components/Tag/Tag.d.ts +4 -46
- package/dist/lib/Components/Tag/Tag.d.ts.map +1 -1
- package/dist/lib/Components/Tag/Tag.js +30 -28
- package/dist/lib/Components/Tag/Tag.types.d.ts +32 -0
- package/dist/lib/Components/Tag/Tag.types.d.ts.map +1 -0
- package/dist/package.json +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -4,26 +4,26 @@ import { Banner as m } from "./lib/Components/Banner/Banner.js";
|
|
|
4
4
|
import { BaseInput as x } from "./lib/Components/BaseInput/BaseInput.js";
|
|
5
5
|
import { Button as a } from "./lib/Components/Button/Button.js";
|
|
6
6
|
import { BaseButton as l } from "./lib/Components/Button/BaseButton.js";
|
|
7
|
-
import { CardButton as
|
|
7
|
+
import { CardButton as g } from "./lib/Components/CardButton/CardButton.js";
|
|
8
8
|
import { Checkbox as T } from "./lib/Components/Checkbox/Checkbox.js";
|
|
9
|
-
import { Dialog as I,
|
|
10
|
-
import { DialogHeader as
|
|
11
|
-
import { IconButton as
|
|
12
|
-
import { InteractiveIcon as
|
|
13
|
-
import { Link as
|
|
14
|
-
import { ListItem as
|
|
15
|
-
import { Menu as
|
|
16
|
-
import { Search as
|
|
17
|
-
import { Select as
|
|
18
|
-
import { Skeleton as
|
|
19
|
-
import { Spot as
|
|
20
|
-
import { Subheader as
|
|
21
|
-
import { Switch as
|
|
22
|
-
import { Tag as
|
|
23
|
-
import { TextInput as
|
|
24
|
-
import { Tile as
|
|
25
|
-
import { Tooltip as
|
|
26
|
-
import { ThemeProvider as
|
|
9
|
+
import { Dialog as I, DialogBody as d, DialogContent as b, DialogFooter as B, DialogTrigger as C } from "./lib/Components/Dialog/Dialog.js";
|
|
10
|
+
import { DialogHeader as s } from "./lib/Components/Dialog/DialogHeader/DialogHeader.js";
|
|
11
|
+
import { IconButton as k } from "./lib/Components/IconButton/IconButton.js";
|
|
12
|
+
import { InteractiveIcon as v } from "./lib/Components/InteractiveIcon/InteractiveIcon.js";
|
|
13
|
+
import { Link as P } from "./lib/Components/Link/Link.js";
|
|
14
|
+
import { ListItem as R } from "./lib/Components/ListItem/ListItem.js";
|
|
15
|
+
import { Menu as y, MenuCheckboxItem as F, MenuContent as H, MenuGroup as j, MenuItem as q, MenuLabel as z, MenuPortal as E, MenuRadioGroup as J, MenuRadioItem as K, MenuSeparator as N, MenuSub as O, MenuSubContent as Q, MenuSubTrigger as U, MenuTrigger as V } from "./lib/Components/Menu/Menu.js";
|
|
16
|
+
import { Search as X } from "./lib/Components/Search/Search.js";
|
|
17
|
+
import { Select as Z, SelectContent as _, SelectGroup as $, SelectItem as ee, SelectItemText as oe, SelectLabel as re, SelectSeparator as te, SelectTrigger as ne } from "./lib/Components/Select/Select.js";
|
|
18
|
+
import { Skeleton as me } from "./lib/Components/Skeleton/Skeleton.js";
|
|
19
|
+
import { Spot as xe } from "./lib/Components/Spot/Spot.js";
|
|
20
|
+
import { Subheader as ae } from "./lib/Components/Subheader/Subheader.js";
|
|
21
|
+
import { Switch as le } from "./lib/Components/Switch/Switch.js";
|
|
22
|
+
import { Tag as ge } from "./lib/Components/Tag/Tag.js";
|
|
23
|
+
import { TextInput as Te } from "./lib/Components/TextInput/TextInput.js";
|
|
24
|
+
import { Tile as Ie } from "./lib/Components/Tile/Tile.js";
|
|
25
|
+
import { Tooltip as be, TooltipContent as Be, TooltipProvider as Ce, TooltipTrigger as he } from "./lib/Components/Tooltip/Tooltip.js";
|
|
26
|
+
import { ThemeProvider as De, useTheme as ke } from "./lib/Components/ThemeProvider/ThemeProvider.js";
|
|
27
27
|
export {
|
|
28
28
|
r as AddressInput,
|
|
29
29
|
n as AmountInput,
|
|
@@ -31,50 +31,52 @@ export {
|
|
|
31
31
|
l as BaseButton,
|
|
32
32
|
x as BaseInput,
|
|
33
33
|
a as Button,
|
|
34
|
-
|
|
34
|
+
g as CardButton,
|
|
35
35
|
T as Checkbox,
|
|
36
36
|
I as Dialog,
|
|
37
|
-
d as
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
s as
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
37
|
+
d as DialogBody,
|
|
38
|
+
b as DialogContent,
|
|
39
|
+
B as DialogFooter,
|
|
40
|
+
s as DialogHeader,
|
|
41
|
+
C as DialogTrigger,
|
|
42
|
+
k as IconButton,
|
|
43
|
+
v as InteractiveIcon,
|
|
44
|
+
P as Link,
|
|
45
|
+
R as ListItem,
|
|
46
|
+
y as Menu,
|
|
47
|
+
F as MenuCheckboxItem,
|
|
46
48
|
H as MenuContent,
|
|
47
49
|
j as MenuGroup,
|
|
48
50
|
q as MenuItem,
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
51
|
+
z as MenuLabel,
|
|
52
|
+
E as MenuPortal,
|
|
53
|
+
J as MenuRadioGroup,
|
|
54
|
+
K as MenuRadioItem,
|
|
55
|
+
N as MenuSeparator,
|
|
56
|
+
O as MenuSub,
|
|
57
|
+
Q as MenuSubContent,
|
|
58
|
+
U as MenuSubTrigger,
|
|
59
|
+
V as MenuTrigger,
|
|
60
|
+
X as Search,
|
|
61
|
+
Z as Select,
|
|
62
|
+
_ as SelectContent,
|
|
63
|
+
$ as SelectGroup,
|
|
64
|
+
ee as SelectItem,
|
|
65
|
+
oe as SelectItemText,
|
|
66
|
+
re as SelectLabel,
|
|
67
|
+
te as SelectSeparator,
|
|
68
|
+
ne as SelectTrigger,
|
|
69
|
+
me as Skeleton,
|
|
70
|
+
xe as Spot,
|
|
71
|
+
ae as Subheader,
|
|
72
|
+
le as Switch,
|
|
73
|
+
ge as Tag,
|
|
74
|
+
Te as TextInput,
|
|
75
|
+
De as ThemeProvider,
|
|
76
|
+
Ie as Tile,
|
|
77
|
+
be as Tooltip,
|
|
78
|
+
Be as TooltipContent,
|
|
79
|
+
Ce as TooltipProvider,
|
|
80
|
+
he as TooltipTrigger,
|
|
81
|
+
ke as useTheme
|
|
80
82
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { DialogHeader } from './DialogHeader/DialogHeader';
|
|
2
|
-
import { DialogContentProps, DialogProps } from './types';
|
|
3
|
-
import * as
|
|
2
|
+
import { DialogContentProps, DialogProps, DialogTriggerProps } from './types';
|
|
3
|
+
import * as React from 'react';
|
|
4
4
|
/**
|
|
5
5
|
* The root component that manages the dialog's open/closed state and contains the trigger and content.
|
|
6
6
|
*
|
|
@@ -10,7 +10,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
|
10
10
|
* @see {@link https://ldls.vercel.app/?path=/docs/containment-dialog-overview--docs Storybook}
|
|
11
11
|
*
|
|
12
12
|
* @example
|
|
13
|
-
* import { Dialog, DialogTrigger, DialogContent, Button } from '@ledgerhq/lumen-ui-react';
|
|
13
|
+
* import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogBody, Button } from '@ledgerhq/lumen-ui-react';
|
|
14
14
|
*
|
|
15
15
|
* function MyComponent() {
|
|
16
16
|
* return (
|
|
@@ -26,13 +26,15 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
|
26
26
|
* onBack={() => {}}
|
|
27
27
|
* onClose={() => {}}
|
|
28
28
|
* />
|
|
29
|
-
* <
|
|
29
|
+
* <DialogBody>
|
|
30
|
+
* <p>This is a dialog!</p>
|
|
31
|
+
* </DialogBody>
|
|
30
32
|
* </DialogContent>
|
|
31
33
|
* </Dialog>
|
|
32
34
|
* );
|
|
33
35
|
* }
|
|
34
36
|
*/
|
|
35
|
-
export declare function Dialog({ ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
export declare function Dialog({ height, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
|
|
36
38
|
/**
|
|
37
39
|
* The element that triggers the dialog to appear when interacted with.
|
|
38
40
|
*
|
|
@@ -49,7 +51,7 @@ export declare function Dialog({ ...props }: DialogProps): import("react/jsx-run
|
|
|
49
51
|
* <Button>Click me for a dialog</Button>
|
|
50
52
|
* </DialogTrigger>
|
|
51
53
|
*/
|
|
52
|
-
export declare function DialogTrigger({ ...props }:
|
|
54
|
+
export declare function DialogTrigger({ ...props }: DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
53
55
|
/**
|
|
54
56
|
* The content container that displays the dialog information.
|
|
55
57
|
*
|
|
@@ -77,5 +79,53 @@ export declare function DialogTrigger({ ...props }: DialogPrimitive.DialogTrigge
|
|
|
77
79
|
* </DialogContent>
|
|
78
80
|
*/
|
|
79
81
|
export declare function DialogContent({ className, children, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
|
|
82
|
+
/**
|
|
83
|
+
* The scrollable body area of the dialog.
|
|
84
|
+
*
|
|
85
|
+
* This component provides a scrollable container that expands to fill the
|
|
86
|
+
* remaining space between the header and footer. Use it when you have
|
|
87
|
+
* content that may overflow the dialog height.
|
|
88
|
+
*
|
|
89
|
+
* @see {@link https://ldls.vercel.app/?path=/docs/containment-dialog-overview--docs Storybook}
|
|
90
|
+
*
|
|
91
|
+
* @example
|
|
92
|
+
* <DialogContent>
|
|
93
|
+
* <DialogHeader title="Title" onClose={handleClose} />
|
|
94
|
+
* <DialogBody>
|
|
95
|
+
* <p>Scrollable content here</p>
|
|
96
|
+
* </DialogBody>
|
|
97
|
+
* <DialogFooter>
|
|
98
|
+
* <Button>Action</Button>
|
|
99
|
+
* </DialogFooter>
|
|
100
|
+
* </DialogContent>
|
|
101
|
+
*/
|
|
102
|
+
export declare const DialogBody: React.ForwardRefExoticComponent<{
|
|
103
|
+
children?: React.ReactNode;
|
|
104
|
+
className?: string;
|
|
105
|
+
} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
106
|
+
/**
|
|
107
|
+
* The fixed footer area of the dialog.
|
|
108
|
+
*
|
|
109
|
+
* This component provides a fixed container at the bottom of the dialog
|
|
110
|
+
* for actions like buttons. It stays in place while the body content scrolls.
|
|
111
|
+
*
|
|
112
|
+
* @see {@link https://ldls.vercel.app/?path=/docs/containment-dialog-overview--docs Storybook}
|
|
113
|
+
*
|
|
114
|
+
* @example
|
|
115
|
+
* <DialogContent>
|
|
116
|
+
* <DialogHeader title="Title" onClose={handleClose} />
|
|
117
|
+
* <DialogBody>
|
|
118
|
+
* <p>Content</p>
|
|
119
|
+
* </DialogBody>
|
|
120
|
+
* <DialogFooter>
|
|
121
|
+
* <Button>Cancel</Button>
|
|
122
|
+
* <Button>Confirm</Button>
|
|
123
|
+
* </DialogFooter>
|
|
124
|
+
* </DialogContent>
|
|
125
|
+
*/
|
|
126
|
+
export declare const DialogFooter: React.ForwardRefExoticComponent<{
|
|
127
|
+
children?: React.ReactNode;
|
|
128
|
+
className?: string;
|
|
129
|
+
} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
80
130
|
export { DialogHeader };
|
|
81
131
|
//# sourceMappingURL=Dialog.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Dialog/Dialog.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAEL,kBAAkB,EAIlB,WAAW,EACX,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAwBjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,MAAM,CAAC,EAAE,MAAc,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAM/D;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAE7D;AAuDD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAepB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU;;;+EAgBtB,CAAC;AAGF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,YAAY;;;+EAaxB,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC"}
|
|
@@ -1,57 +1,106 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as o, jsxs as g } from "react/jsx-runtime";
|
|
2
2
|
import { cn as n } from "../../../libs/utils-shared/dist/index.js";
|
|
3
|
-
import * as
|
|
3
|
+
import * as r from "@radix-ui/react-dialog";
|
|
4
|
+
import { cva as c } from "class-variance-authority";
|
|
4
5
|
import * as i from "react";
|
|
5
|
-
|
|
6
|
-
|
|
6
|
+
const d = i.createContext({
|
|
7
|
+
height: "hug"
|
|
8
|
+
}), f = c(
|
|
9
|
+
[
|
|
10
|
+
"w-400 bg-canvas-sheet flex max-w-[calc(100%-2rem)] flex-col overflow-hidden rounded-2xl pb-24",
|
|
11
|
+
"z-dialog-content fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]",
|
|
12
|
+
"data-[state=closed]:animate-content-hide data-[state=open]:animate-content-show"
|
|
13
|
+
],
|
|
14
|
+
{
|
|
15
|
+
variants: {
|
|
16
|
+
height: {
|
|
17
|
+
hug: "max-h-560",
|
|
18
|
+
fixed: "h-560"
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
defaultVariants: {
|
|
22
|
+
height: "hug"
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
);
|
|
26
|
+
function y({ height: a = "hug", ...t }) {
|
|
27
|
+
return /* @__PURE__ */ o(d.Provider, { value: { height: a }, children: /* @__PURE__ */ o(r.Root, { "data-slot": "dialog", ...t }) });
|
|
7
28
|
}
|
|
8
|
-
function
|
|
9
|
-
...a
|
|
10
|
-
}) {
|
|
11
|
-
return /* @__PURE__ */ t(o.Trigger, { "data-slot": "dialog-trigger", ...a });
|
|
29
|
+
function D({ ...a }) {
|
|
30
|
+
return /* @__PURE__ */ o(r.Trigger, { "data-slot": "dialog-trigger", ...a });
|
|
12
31
|
}
|
|
13
|
-
function
|
|
32
|
+
function m({
|
|
14
33
|
...a
|
|
15
34
|
}) {
|
|
16
|
-
return /* @__PURE__ */
|
|
35
|
+
return /* @__PURE__ */ o(r.Portal, { "data-slot": "dialog-portal", ...a });
|
|
17
36
|
}
|
|
18
37
|
const s = i.forwardRef(
|
|
19
|
-
({ className: a, ...
|
|
20
|
-
|
|
38
|
+
({ className: a, ...t }, e) => /* @__PURE__ */ o(
|
|
39
|
+
r.Overlay,
|
|
21
40
|
{
|
|
22
|
-
ref:
|
|
41
|
+
ref: e,
|
|
23
42
|
"data-slot": "dialog-overlay",
|
|
24
43
|
className: n(
|
|
25
44
|
a,
|
|
26
|
-
"
|
|
45
|
+
"z-dialog-overlay bg-canvas-overlay data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in fixed inset-0 backdrop-blur-sm"
|
|
27
46
|
),
|
|
28
|
-
...
|
|
47
|
+
...t
|
|
29
48
|
}
|
|
30
49
|
)
|
|
31
50
|
);
|
|
32
|
-
|
|
51
|
+
s.displayName = "DialogOverlay";
|
|
52
|
+
function b({
|
|
33
53
|
className: a,
|
|
34
|
-
children:
|
|
35
|
-
...
|
|
54
|
+
children: t,
|
|
55
|
+
...e
|
|
36
56
|
}) {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
/* @__PURE__ */
|
|
40
|
-
|
|
57
|
+
const { height: l } = i.useContext(d);
|
|
58
|
+
return /* @__PURE__ */ g(m, { "data-slot": "dialog-portal", children: [
|
|
59
|
+
/* @__PURE__ */ o(s, {}),
|
|
60
|
+
/* @__PURE__ */ o(
|
|
61
|
+
r.Content,
|
|
41
62
|
{
|
|
42
63
|
"data-slot": "dialog-content",
|
|
43
|
-
className: n(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
),
|
|
47
|
-
...r,
|
|
48
|
-
children: e
|
|
64
|
+
className: n(f({ height: l }), a),
|
|
65
|
+
...e,
|
|
66
|
+
children: t
|
|
49
67
|
}
|
|
50
68
|
)
|
|
51
69
|
] });
|
|
52
70
|
}
|
|
71
|
+
const h = i.forwardRef(
|
|
72
|
+
({ className: a, children: t, ...e }, l) => /* @__PURE__ */ o(
|
|
73
|
+
"div",
|
|
74
|
+
{
|
|
75
|
+
ref: l,
|
|
76
|
+
"data-slot": "dialog-body",
|
|
77
|
+
className: n(
|
|
78
|
+
"-mb-24 flex min-h-0 flex-1 flex-col overflow-y-auto px-24 pb-24 pt-4",
|
|
79
|
+
a
|
|
80
|
+
),
|
|
81
|
+
...e,
|
|
82
|
+
children: t
|
|
83
|
+
}
|
|
84
|
+
)
|
|
85
|
+
);
|
|
86
|
+
h.displayName = "DialogBody";
|
|
87
|
+
const u = i.forwardRef(
|
|
88
|
+
({ className: a, children: t, ...e }, l) => /* @__PURE__ */ o(
|
|
89
|
+
"div",
|
|
90
|
+
{
|
|
91
|
+
ref: l,
|
|
92
|
+
"data-slot": "dialog-footer",
|
|
93
|
+
className: n("flex shrink-0 flex-col px-24 pt-24", a),
|
|
94
|
+
...e,
|
|
95
|
+
children: t
|
|
96
|
+
}
|
|
97
|
+
)
|
|
98
|
+
);
|
|
99
|
+
u.displayName = "DialogFooter";
|
|
53
100
|
export {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
101
|
+
y as Dialog,
|
|
102
|
+
h as DialogBody,
|
|
103
|
+
b as DialogContent,
|
|
104
|
+
u as DialogFooter,
|
|
105
|
+
D as DialogTrigger
|
|
57
106
|
};
|
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export declare const DialogHeader: React.ForwardRefExoticComponent<{
|
|
3
|
+
appearance?: "compact" | "extended";
|
|
4
|
+
title?: string;
|
|
5
|
+
description?: React.ReactNode;
|
|
6
|
+
onClose: () => void;
|
|
7
|
+
onBack?: () => void;
|
|
8
|
+
className?: string;
|
|
9
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & React.RefAttributes<HTMLDivElement>>;
|
|
4
10
|
//# sourceMappingURL=DialogHeader.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogHeader.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Dialog/DialogHeader/DialogHeader.tsx"],"names":[],"mappings":"AAGA,
|
|
1
|
+
{"version":3,"file":"DialogHeader.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Dialog/DialogHeader/DialogHeader.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAa,MAAM,OAAO,CAAC;AA2JlC,eAAO,MAAM,YAAY;;;;;;;kGAuBxB,CAAC"}
|
|
@@ -1,114 +1,123 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as t, Fragment as s, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { cn as c } from "../../../../libs/utils-shared/dist/index.js";
|
|
3
|
-
import * as
|
|
4
|
-
import { cva as
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
3
|
+
import * as p from "@radix-ui/react-dialog";
|
|
4
|
+
import { cva as v } from "class-variance-authority";
|
|
5
|
+
import f from "react";
|
|
6
|
+
import { useCommonTranslation as h } from "../../../../i18n/useCommonTranslation.js";
|
|
7
|
+
import { ArrowLeft as b } from "../../../Symbols/Icons/ArrowLeft.js";
|
|
8
|
+
import { Close as D } from "../../../Symbols/Icons/Close.js";
|
|
8
9
|
import { IconButton as x } from "../../IconButton/IconButton.js";
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
compact: "h-64 flex-row items-center gap-12",
|
|
15
|
-
extended: "flex-col gap-16 pb-12 pt-10"
|
|
16
|
-
}
|
|
10
|
+
const y = v("-ml-14 -mr-8 flex px-24 text-base", {
|
|
11
|
+
variants: {
|
|
12
|
+
appearance: {
|
|
13
|
+
compact: "h-64 min-h-64 flex-row items-center gap-12",
|
|
14
|
+
extended: "flex-col gap-16 pb-12 pt-10"
|
|
17
15
|
}
|
|
18
16
|
}
|
|
19
|
-
), m = ({ onBack: r }) => {
|
|
20
|
-
const { t: a } =
|
|
17
|
+
}), m = ({ onBack: r }) => {
|
|
18
|
+
const { t: a } = h();
|
|
21
19
|
return /* @__PURE__ */ e(
|
|
22
20
|
x,
|
|
23
21
|
{
|
|
24
22
|
appearance: "no-background",
|
|
25
23
|
size: "sm",
|
|
26
|
-
icon:
|
|
24
|
+
icon: b,
|
|
27
25
|
onClick: r,
|
|
28
26
|
className: "shrink-0",
|
|
29
27
|
"aria-label": a("components.dialogHeader.goBackAriaLabel")
|
|
30
28
|
}
|
|
31
29
|
);
|
|
32
30
|
}, d = ({ onClose: r }) => {
|
|
33
|
-
const { t: a } =
|
|
31
|
+
const { t: a } = h();
|
|
34
32
|
return /* @__PURE__ */ e(
|
|
35
33
|
x,
|
|
36
34
|
{
|
|
37
35
|
appearance: "gray",
|
|
38
36
|
size: "xs",
|
|
39
|
-
icon:
|
|
37
|
+
icon: D,
|
|
40
38
|
onClick: r,
|
|
41
39
|
className: "shrink-0",
|
|
42
40
|
"aria-label": a("components.dialogHeader.closeAriaLabel")
|
|
43
41
|
}
|
|
44
42
|
);
|
|
45
|
-
},
|
|
46
|
-
|
|
43
|
+
}, H = ({ hidden: r, className: a, ...o }) => /* @__PURE__ */ e(
|
|
44
|
+
p.Title,
|
|
47
45
|
{
|
|
48
46
|
"data-slot": "dialog-title",
|
|
49
47
|
className: c(r && "sr-only", a),
|
|
50
48
|
...o
|
|
51
49
|
}
|
|
52
|
-
),
|
|
53
|
-
|
|
50
|
+
), w = ({ hidden: r, className: a, ...o }) => /* @__PURE__ */ e(
|
|
51
|
+
p.Description,
|
|
54
52
|
{
|
|
55
53
|
"data-slot": "dialog-description",
|
|
56
54
|
className: c(r && "sr-only", a),
|
|
57
55
|
...o
|
|
58
56
|
}
|
|
59
|
-
),
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
57
|
+
), g = f.forwardRef(
|
|
58
|
+
({
|
|
59
|
+
className: r,
|
|
60
|
+
appearance: a = "compact",
|
|
61
|
+
title: o,
|
|
62
|
+
description: l,
|
|
63
|
+
onClose: n,
|
|
64
|
+
onBack: i,
|
|
65
|
+
...u
|
|
66
|
+
}, N) => /* @__PURE__ */ t(
|
|
67
|
+
"div",
|
|
68
|
+
{
|
|
69
|
+
ref: N,
|
|
70
|
+
className: y({ appearance: a, className: r }),
|
|
71
|
+
...u,
|
|
72
|
+
children: [
|
|
73
|
+
a === "compact" && /* @__PURE__ */ t(s, { children: [
|
|
74
|
+
i && /* @__PURE__ */ e(m, { onBack: i }),
|
|
75
|
+
/* @__PURE__ */ t(
|
|
76
|
+
"div",
|
|
77
|
+
{
|
|
78
|
+
className: c("flex min-w-0 flex-1 flex-col", {
|
|
79
|
+
"pl-40": !i
|
|
80
|
+
}),
|
|
81
|
+
children: [
|
|
82
|
+
o && /* @__PURE__ */ e("div", { className: "truncate text-center heading-4-semi-bold", children: o }),
|
|
83
|
+
l && /* @__PURE__ */ e("div", { className: "truncate text-center text-muted body-2", children: l })
|
|
84
|
+
]
|
|
85
|
+
}
|
|
86
|
+
),
|
|
87
|
+
/* @__PURE__ */ e(d, { onClose: n })
|
|
88
|
+
] }),
|
|
89
|
+
a === "extended" && /* @__PURE__ */ t(s, { children: [
|
|
90
|
+
/* @__PURE__ */ t("div", { className: "flex h-40 flex-row items-center", children: [
|
|
91
|
+
i && /* @__PURE__ */ e(m, { onBack: i }),
|
|
92
|
+
/* @__PURE__ */ e("div", { className: "ml-auto", children: /* @__PURE__ */ e(d, { onClose: n }) })
|
|
93
|
+
] }),
|
|
94
|
+
(o || l) && /* @__PURE__ */ t("div", { className: "flex flex-col gap-4 ps-14", children: [
|
|
95
|
+
o && /* @__PURE__ */ e("div", { className: "heading-2-semi-bold", children: o }),
|
|
96
|
+
l && /* @__PURE__ */ e("div", { className: "text-muted body-2", children: l })
|
|
97
|
+
] })
|
|
98
|
+
] })
|
|
99
|
+
]
|
|
100
|
+
}
|
|
101
|
+
)
|
|
102
|
+
);
|
|
103
|
+
g.displayName = "DialogHeaderComponent";
|
|
104
|
+
const C = f.forwardRef(
|
|
105
|
+
({ title: r = "", description: a, appearance: o = "compact", ...l }, n) => /* @__PURE__ */ t(s, { children: [
|
|
106
|
+
/* @__PURE__ */ e(
|
|
107
|
+
g,
|
|
72
108
|
{
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
t && /* @__PURE__ */ e("div", { className: "truncate text-center text-muted body-2", children: t })
|
|
79
|
-
]
|
|
109
|
+
ref: n,
|
|
110
|
+
title: r,
|
|
111
|
+
description: a,
|
|
112
|
+
appearance: o,
|
|
113
|
+
...l
|
|
80
114
|
}
|
|
81
115
|
),
|
|
82
|
-
/* @__PURE__ */ e(
|
|
83
|
-
|
|
84
|
-
a === "extended" && /* @__PURE__ */ l(s, { children: [
|
|
85
|
-
/* @__PURE__ */ l("div", { className: "flex h-40 flex-row items-center", children: [
|
|
86
|
-
n && /* @__PURE__ */ e(m, { onBack: n }),
|
|
87
|
-
/* @__PURE__ */ e("div", { className: "ml-auto", children: /* @__PURE__ */ e(d, { onClose: i }) })
|
|
88
|
-
] }),
|
|
89
|
-
(o || t) && /* @__PURE__ */ l("div", { className: "flex flex-col gap-4 ps-14", children: [
|
|
90
|
-
o && /* @__PURE__ */ e("div", { className: "heading-2-semi-bold", children: o }),
|
|
91
|
-
t && /* @__PURE__ */ e("div", { className: "text-muted body-2", children: t })
|
|
92
|
-
] })
|
|
116
|
+
/* @__PURE__ */ e(H, { hidden: !0, children: r }),
|
|
117
|
+
a && /* @__PURE__ */ e(w, { hidden: !0, children: a })
|
|
93
118
|
] })
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
description: a,
|
|
97
|
-
appearance: o = "compact",
|
|
98
|
-
...t
|
|
99
|
-
}) => /* @__PURE__ */ l(s, { children: [
|
|
100
|
-
/* @__PURE__ */ e(
|
|
101
|
-
y,
|
|
102
|
-
{
|
|
103
|
-
title: r,
|
|
104
|
-
description: a,
|
|
105
|
-
appearance: o,
|
|
106
|
-
...t
|
|
107
|
-
}
|
|
108
|
-
),
|
|
109
|
-
/* @__PURE__ */ e(b, { hidden: !0, children: r }),
|
|
110
|
-
a && /* @__PURE__ */ e(D, { hidden: !0, children: a })
|
|
111
|
-
] });
|
|
119
|
+
);
|
|
120
|
+
C.displayName = "DialogHeader";
|
|
112
121
|
export {
|
|
113
|
-
|
|
122
|
+
C as DialogHeader
|
|
114
123
|
};
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export type DialogHeight = 'hug' | 'fixed';
|
|
2
3
|
export type DialogProps = {
|
|
4
|
+
/**
|
|
5
|
+
* The content to display inside the dialog.
|
|
6
|
+
*/
|
|
7
|
+
children?: ReactNode;
|
|
3
8
|
/**
|
|
4
9
|
* Callback function to handle open state change.
|
|
5
10
|
* @param open - The new open state of the dialog.
|
|
@@ -15,12 +20,25 @@ export type DialogProps = {
|
|
|
15
20
|
* @default false
|
|
16
21
|
*/
|
|
17
22
|
defaultOpen?: boolean;
|
|
18
|
-
|
|
23
|
+
/**
|
|
24
|
+
* The height behavior of the dialog.
|
|
25
|
+
* - `hug`: Content-fit height up to max 560px (default)
|
|
26
|
+
* - `fixed`: Always exactly 560px height
|
|
27
|
+
* @default 'hug'
|
|
28
|
+
*/
|
|
29
|
+
height?: DialogHeight;
|
|
30
|
+
/**
|
|
31
|
+
* Whether to render the dialog in modal mode.
|
|
32
|
+
* When true, interaction with outside elements is disabled.
|
|
33
|
+
* @default true
|
|
34
|
+
*/
|
|
35
|
+
modal?: boolean;
|
|
36
|
+
};
|
|
19
37
|
export type DialogTriggerProps = {
|
|
20
38
|
/**
|
|
21
39
|
* The element that will trigger the dialog (e.g., button, icon, text).
|
|
22
40
|
*/
|
|
23
|
-
children?:
|
|
41
|
+
children?: ReactNode;
|
|
24
42
|
/**
|
|
25
43
|
* Change the default rendered element for the one passed as a child, merging their props and behavior.
|
|
26
44
|
*/
|
|
@@ -29,12 +47,12 @@ export type DialogTriggerProps = {
|
|
|
29
47
|
* Additional custom CSS classes to apply. Do not use this prop to modify the component's core appearance.
|
|
30
48
|
*/
|
|
31
49
|
className?: string;
|
|
32
|
-
}
|
|
50
|
+
};
|
|
33
51
|
export type DialogContentProps = {
|
|
34
52
|
/**
|
|
35
53
|
* The content to display inside the dialog.
|
|
36
54
|
*/
|
|
37
|
-
children?:
|
|
55
|
+
children?: ReactNode;
|
|
38
56
|
/**
|
|
39
57
|
* Change the default rendered element for the one passed as a child, merging their props and behavior.
|
|
40
58
|
*/
|
|
@@ -43,13 +61,38 @@ export type DialogContentProps = {
|
|
|
43
61
|
* Additional custom CSS classes to apply. Do not use this prop to modify the component's core appearance.
|
|
44
62
|
*/
|
|
45
63
|
className?: string;
|
|
46
|
-
|
|
64
|
+
/**
|
|
65
|
+
* Event handler called when auto-focusing on open.
|
|
66
|
+
* Can be prevented by calling `event.preventDefault()`.
|
|
67
|
+
*/
|
|
68
|
+
onOpenAutoFocus?: (event: Event) => void;
|
|
69
|
+
/**
|
|
70
|
+
* Event handler called when auto-focusing on close.
|
|
71
|
+
* Can be prevented by calling `event.preventDefault()`.
|
|
72
|
+
*/
|
|
73
|
+
onCloseAutoFocus?: (event: Event) => void;
|
|
74
|
+
/**
|
|
75
|
+
* Event handler called when the escape key is pressed.
|
|
76
|
+
* Can be prevented by calling `event.preventDefault()`.
|
|
77
|
+
*/
|
|
78
|
+
onEscapeKeyDown?: (event: KeyboardEvent) => void;
|
|
79
|
+
/**
|
|
80
|
+
* Event handler called when a pointer event occurs outside the dialog.
|
|
81
|
+
* Can be prevented by calling `event.preventDefault()`.
|
|
82
|
+
*/
|
|
83
|
+
onPointerDownOutside?: (event: CustomEvent) => void;
|
|
84
|
+
/**
|
|
85
|
+
* Event handler called when any interaction occurs outside the dialog.
|
|
86
|
+
* Can be prevented by calling `event.preventDefault()`.
|
|
87
|
+
*/
|
|
88
|
+
onInteractOutside?: (event: CustomEvent) => void;
|
|
89
|
+
};
|
|
47
90
|
export type DialogOverlayProps = {
|
|
48
91
|
/**
|
|
49
92
|
* Additional custom CSS classes to apply. Do not use this prop to modify the component's core appearance.
|
|
50
93
|
*/
|
|
51
94
|
className?: string;
|
|
52
|
-
}
|
|
95
|
+
};
|
|
53
96
|
export type DialogHeaderProps = {
|
|
54
97
|
/**
|
|
55
98
|
* The appearance variant of the header.
|
|
@@ -63,7 +106,7 @@ export type DialogHeaderProps = {
|
|
|
63
106
|
/**
|
|
64
107
|
* Optional description text to show below or beside the title.
|
|
65
108
|
*/
|
|
66
|
-
description?:
|
|
109
|
+
description?: ReactNode;
|
|
67
110
|
/**
|
|
68
111
|
* Callback function to handle close action.
|
|
69
112
|
*/
|
|
@@ -72,5 +115,29 @@ export type DialogHeaderProps = {
|
|
|
72
115
|
* Optional callback for back navigation.
|
|
73
116
|
*/
|
|
74
117
|
onBack?: () => void;
|
|
118
|
+
/**
|
|
119
|
+
* Additional custom CSS classes to apply.
|
|
120
|
+
*/
|
|
121
|
+
className?: string;
|
|
122
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>;
|
|
123
|
+
export type DialogBodyProps = {
|
|
124
|
+
/**
|
|
125
|
+
* The content to display inside the dialog body.
|
|
126
|
+
*/
|
|
127
|
+
children?: ReactNode;
|
|
128
|
+
/**
|
|
129
|
+
* Additional custom CSS classes to apply.
|
|
130
|
+
*/
|
|
131
|
+
className?: string;
|
|
132
|
+
} & React.HTMLAttributes<HTMLDivElement>;
|
|
133
|
+
export type DialogFooterProps = {
|
|
134
|
+
/**
|
|
135
|
+
* The content to display inside the dialog footer.
|
|
136
|
+
*/
|
|
137
|
+
children?: ReactNode;
|
|
138
|
+
/**
|
|
139
|
+
* Additional custom CSS classes to apply.
|
|
140
|
+
*/
|
|
141
|
+
className?: string;
|
|
75
142
|
} & React.HTMLAttributes<HTMLDivElement>;
|
|
76
143
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Dialog/types.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Dialog/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,OAAO,CAAC;AAE3C,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACpD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC,CAAC;AAE5D,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEzC,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC"}
|
|
@@ -1,60 +1,18 @@
|
|
|
1
1
|
import { VariantProps } from 'class-variance-authority';
|
|
2
2
|
import { default as React } from 'react';
|
|
3
3
|
import { IconSize } from '../Icon/Icon';
|
|
4
|
-
declare const tagVariants: (props?: ({
|
|
5
|
-
appearance?: "base" | "disabled" | "gray" | "accent" | "success" | "warning" | "error" | null | undefined;
|
|
6
|
-
size?: "sm" | "lg" | null | undefined;
|
|
7
|
-
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
8
|
-
export type TagProps = {
|
|
9
|
-
/**
|
|
10
|
-
* The appearance of the tag.
|
|
11
|
-
* @default accent
|
|
12
|
-
*/
|
|
13
|
-
appearance?: 'base' | 'gray' | 'accent' | 'success' | 'error' | 'warning' | 'disabled';
|
|
14
|
-
/**
|
|
15
|
-
* The size of the tag.
|
|
16
|
-
* @default lg
|
|
17
|
-
*/
|
|
18
|
-
size?: 'sm' | 'lg';
|
|
19
|
-
/**
|
|
20
|
-
* Icon component to render.
|
|
21
|
-
*/
|
|
22
|
-
icon?: React.ComponentType<{
|
|
23
|
-
size?: IconSize;
|
|
24
|
-
className?: string;
|
|
25
|
-
}>;
|
|
26
|
-
/**
|
|
27
|
-
* Label text to display.
|
|
28
|
-
* @required
|
|
29
|
-
*/
|
|
30
|
-
label: string;
|
|
31
|
-
} & React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof tagVariants>;
|
|
32
4
|
export declare const Tag: React.ForwardRefExoticComponent<{
|
|
33
|
-
|
|
34
|
-
* The appearance of the tag.
|
|
35
|
-
* @default accent
|
|
36
|
-
*/
|
|
37
|
-
appearance?: "base" | "gray" | "accent" | "success" | "error" | "warning" | "disabled";
|
|
38
|
-
/**
|
|
39
|
-
* The size of the tag.
|
|
40
|
-
* @default lg
|
|
41
|
-
*/
|
|
5
|
+
appearance?: "base" | "gray" | "accent" | "success" | "error" | "warning";
|
|
42
6
|
size?: "sm" | "lg";
|
|
43
|
-
/**
|
|
44
|
-
* Icon component to render.
|
|
45
|
-
*/
|
|
46
7
|
icon?: React.ComponentType<{
|
|
47
8
|
size?: IconSize;
|
|
48
9
|
className?: string;
|
|
49
10
|
}>;
|
|
50
|
-
/**
|
|
51
|
-
* Label text to display.
|
|
52
|
-
* @required
|
|
53
|
-
*/
|
|
54
11
|
label: string;
|
|
12
|
+
disabled?: boolean;
|
|
55
13
|
} & React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
|
|
56
|
-
appearance?: "base" | "
|
|
14
|
+
appearance?: "base" | "gray" | "accent" | "success" | "warning" | "error" | null | undefined;
|
|
57
15
|
size?: "sm" | "lg" | null | undefined;
|
|
16
|
+
disabled?: boolean | null | undefined;
|
|
58
17
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
|
|
59
|
-
export {};
|
|
60
18
|
//# sourceMappingURL=Tag.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Tag/Tag.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Tag/Tag.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAgCxC,eAAO,MAAM,GAAG;;;;YAxBN,CAAC;iBAAqB,CAAC;;;;;;;;sHAgD/B,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as l, jsx as t } from "react/jsx-runtime";
|
|
2
2
|
import { cn as g } from "../../../libs/utils-shared/dist/index.js";
|
|
3
3
|
import { cva as m } from "class-variance-authority";
|
|
4
|
-
import
|
|
5
|
-
const
|
|
4
|
+
import b from "react";
|
|
5
|
+
const x = m(
|
|
6
6
|
"inline-flex items-center justify-center gap-4 rounded-xs",
|
|
7
7
|
{
|
|
8
8
|
variants: {
|
|
@@ -12,40 +12,42 @@ const b = m(
|
|
|
12
12
|
accent: "bg-accent text-on-accent",
|
|
13
13
|
success: "bg-success text-success",
|
|
14
14
|
error: "bg-error text-error",
|
|
15
|
-
warning: "bg-warning text-warning"
|
|
16
|
-
disabled: "bg-disabled text-disabled"
|
|
15
|
+
warning: "bg-warning text-warning"
|
|
17
16
|
},
|
|
18
17
|
size: {
|
|
19
18
|
lg: "px-8 py-4 body-3",
|
|
20
19
|
sm: "px-4 py-2 body-4"
|
|
20
|
+
},
|
|
21
|
+
disabled: {
|
|
22
|
+
true: "bg-disabled text-disabled",
|
|
23
|
+
false: ""
|
|
21
24
|
}
|
|
22
25
|
},
|
|
23
26
|
defaultVariants: {
|
|
24
27
|
appearance: "accent",
|
|
25
|
-
size: "lg"
|
|
28
|
+
size: "lg",
|
|
29
|
+
disabled: !1
|
|
26
30
|
}
|
|
27
31
|
}
|
|
28
|
-
),
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
{
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
);
|
|
48
|
-
x.displayName = "Tag";
|
|
32
|
+
), u = b.forwardRef(({ className: s, appearance: n, size: e, icon: r, label: c, disabled: i, ...o }, d) => {
|
|
33
|
+
const p = e ? {
|
|
34
|
+
lg: 16,
|
|
35
|
+
sm: 12
|
|
36
|
+
}[e] : 16, a = r;
|
|
37
|
+
return /* @__PURE__ */ l(
|
|
38
|
+
"div",
|
|
39
|
+
{
|
|
40
|
+
className: g(s, x({ appearance: n, size: e, disabled: i })),
|
|
41
|
+
ref: d,
|
|
42
|
+
...o,
|
|
43
|
+
children: [
|
|
44
|
+
a && /* @__PURE__ */ t(a, { size: p, className: "shrink-0" }),
|
|
45
|
+
/* @__PURE__ */ t("span", { children: c })
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
);
|
|
49
|
+
});
|
|
50
|
+
u.displayName = "Tag";
|
|
49
51
|
export {
|
|
50
|
-
|
|
52
|
+
u as Tag
|
|
51
53
|
};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { IconSize } from '../Icon/Icon';
|
|
2
|
+
export type TagProps = {
|
|
3
|
+
/**
|
|
4
|
+
* The appearance of the tag.
|
|
5
|
+
* @default accent
|
|
6
|
+
*/
|
|
7
|
+
appearance?: 'base' | 'gray' | 'accent' | 'success' | 'error' | 'warning';
|
|
8
|
+
/**
|
|
9
|
+
* The size of the tag.
|
|
10
|
+
* @default lg
|
|
11
|
+
*/
|
|
12
|
+
size?: 'sm' | 'lg';
|
|
13
|
+
/**
|
|
14
|
+
* Icon component to render.
|
|
15
|
+
*/
|
|
16
|
+
icon?: React.ComponentType<{
|
|
17
|
+
size?: IconSize;
|
|
18
|
+
className?: string;
|
|
19
|
+
}>;
|
|
20
|
+
/**
|
|
21
|
+
* Label text to display.
|
|
22
|
+
* @required
|
|
23
|
+
*/
|
|
24
|
+
label: string;
|
|
25
|
+
/**
|
|
26
|
+
* When `true`, prevents the user from interacting with the tag.
|
|
27
|
+
*
|
|
28
|
+
* @default false
|
|
29
|
+
*/
|
|
30
|
+
disabled?: boolean;
|
|
31
|
+
} & React.HTMLAttributes<HTMLDivElement>;
|
|
32
|
+
//# sourceMappingURL=Tag.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tag.types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Tag/Tag.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,MAAM,QAAQ,GAAG;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC1E;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpE;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC"}
|
package/dist/package.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/lumen-ui-react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.56",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"keywords": [
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
]
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@ledgerhq/lumen-utils-shared": "0.0.
|
|
44
|
+
"@ledgerhq/lumen-utils-shared": "0.0.12",
|
|
45
45
|
"i18next": "^23.7.0",
|
|
46
46
|
"react-i18next": "^14.0.0"
|
|
47
47
|
},
|