@ledgerhq/lumen-ui-react 0.1.5 → 0.1.7
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 +106 -102
- package/dist/lib/Components/AmountDisplay/AmountDisplay.js +19 -19
- package/dist/lib/Components/SegmentedControl/SegmentedControl.d.ts +10 -0
- package/dist/lib/Components/SegmentedControl/SegmentedControl.d.ts.map +1 -0
- package/dist/lib/Components/SegmentedControl/SegmentedControl.js +100 -0
- package/dist/lib/Components/SegmentedControl/SegmentedControlContext.d.ts +12 -0
- package/dist/lib/Components/SegmentedControl/SegmentedControlContext.d.ts.map +1 -0
- package/dist/lib/Components/SegmentedControl/SegmentedControlContext.js +9 -0
- package/dist/lib/Components/SegmentedControl/index.d.ts +3 -0
- package/dist/lib/Components/SegmentedControl/index.d.ts.map +1 -0
- package/dist/lib/Components/SegmentedControl/types.d.ts +45 -0
- package/dist/lib/Components/SegmentedControl/types.d.ts.map +1 -0
- package/dist/lib/Components/SegmentedControl/usePillElementLayoutEffect.d.ts +17 -0
- package/dist/lib/Components/SegmentedControl/usePillElementLayoutEffect.d.ts.map +1 -0
- package/dist/lib/Components/SegmentedControl/usePillElementLayoutEffect.js +35 -0
- package/dist/lib/Components/ThemeProvider/ThemeProvider.d.ts +2 -9
- package/dist/lib/Components/ThemeProvider/ThemeProvider.d.ts.map +1 -1
- package/dist/lib/Components/ThemeProvider/ThemeProvider.js +14 -25
- package/dist/lib/Components/ThemeProvider/ThemeProvider.types.d.ts +9 -3
- package/dist/lib/Components/ThemeProvider/ThemeProvider.types.d.ts.map +1 -1
- package/dist/lib/Components/ThemeProvider/ThemeProvider.types.js +8 -0
- package/dist/lib/Components/ThemeProvider/useRootColorModeSideEffect.d.ts +3 -3
- package/dist/lib/Components/ThemeProvider/useRootColorModeSideEffect.d.ts.map +1 -1
- package/dist/lib/Components/ThemeProvider/useRootColorModeSideEffect.js +20 -14
- package/dist/lib/Components/TileButton/TileButton.d.ts.map +1 -1
- package/dist/lib/Components/TileButton/TileButton.js +8 -8
- package/dist/lib/Components/index.d.ts +1 -0
- package/dist/lib/Components/index.d.ts.map +1 -1
- package/dist/package.json +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -7,38 +7,40 @@ import { Banner as x } from "./lib/Components/Banner/Banner.js";
|
|
|
7
7
|
import { BaseInput as S } from "./lib/Components/BaseInput/BaseInput.js";
|
|
8
8
|
import { Button as d } from "./lib/Components/Button/Button.js";
|
|
9
9
|
import { BaseButton as c } from "./lib/Components/Button/BaseButton.js";
|
|
10
|
-
import { ContentBanner as
|
|
11
|
-
import { CardButton as
|
|
10
|
+
import { ContentBanner as C, ContentBannerContent as I, ContentBannerDescription as s, ContentBannerTitle as L } from "./lib/Components/ContentBanner/ContentBanner.js";
|
|
11
|
+
import { CardButton as M } from "./lib/Components/CardButton/CardButton.js";
|
|
12
12
|
import { Checkbox as v } from "./lib/Components/Checkbox/Checkbox.js";
|
|
13
|
-
import { DataTable as
|
|
14
|
-
import { useLumenDataTable as
|
|
13
|
+
import { DataTable as A, DataTableGlobalSearchInput as w, DataTableRoot as H } from "./lib/Components/DataTable/DataTable.js";
|
|
14
|
+
import { useLumenDataTable as G } from "./lib/Components/DataTable/useLumenDataTable/useLumenDataTable.js";
|
|
15
15
|
import { DialogClose as y } from "./lib/Components/Dialog/DialogClose/DialogClose.js";
|
|
16
|
-
import { Dialog as
|
|
17
|
-
import { DialogHeader as
|
|
18
|
-
import { Divider as
|
|
19
|
-
import { IconButton as
|
|
20
|
-
import { InteractiveIcon as
|
|
21
|
-
import { Link as
|
|
16
|
+
import { Dialog as E, DialogBody as O, DialogContent as F, DialogFooter as _, DialogTrigger as j } from "./lib/Components/Dialog/Dialog.js";
|
|
17
|
+
import { DialogHeader as z } from "./lib/Components/Dialog/DialogHeader/DialogHeader.js";
|
|
18
|
+
import { Divider as K } from "./lib/Components/Divider/Divider.js";
|
|
19
|
+
import { IconButton as U } from "./lib/Components/IconButton/IconButton.js";
|
|
20
|
+
import { InteractiveIcon as W } from "./lib/Components/InteractiveIcon/InteractiveIcon.js";
|
|
21
|
+
import { Link as Y } from "./lib/Components/Link/Link.js";
|
|
22
22
|
import { ListItem as $, ListItemContent as ee, ListItemDescription as oe, ListItemIcon as te, ListItemLeading as re, ListItemSpot as ae, ListItemTitle as ne, ListItemTrailing as ie, ListItemTruncate as le } from "./lib/Components/ListItem/ListItem.js";
|
|
23
|
-
import { Menu as me, MenuCheckboxItem as Te, MenuContent as ue, MenuGroup as xe, MenuItem as fe, MenuLabel as Se, MenuPortal as be, MenuRadioGroup as de, MenuRadioItem as ge, MenuSeparator as ce, MenuSub as Be, MenuSubContent as
|
|
24
|
-
import { NavBar as De, NavBarBackButton as
|
|
23
|
+
import { Menu as me, MenuCheckboxItem as Te, MenuContent as ue, MenuGroup as xe, MenuItem as fe, MenuLabel as Se, MenuPortal as be, MenuRadioGroup as de, MenuRadioItem as ge, MenuSeparator as ce, MenuSub as Be, MenuSubContent as Ce, MenuSubTrigger as Ie, MenuTrigger as se } from "./lib/Components/Menu/Menu.js";
|
|
24
|
+
import { NavBar as De, NavBarBackButton as Me, NavBarCoinCapsule as he, NavBarTitle as ve, NavBarTrailing as Re } from "./lib/Components/NavBar/NavBar.js";
|
|
25
25
|
import { PageIndicator as we } from "./lib/Components/PageIndicator/PageIndicator.js";
|
|
26
|
-
import { SearchInput as
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
29
|
-
import {
|
|
30
|
-
import {
|
|
31
|
-
import {
|
|
32
|
-
import {
|
|
33
|
-
import {
|
|
34
|
-
import {
|
|
35
|
-
import {
|
|
36
|
-
import {
|
|
37
|
-
import {
|
|
38
|
-
import {
|
|
39
|
-
import {
|
|
40
|
-
import {
|
|
41
|
-
import {
|
|
26
|
+
import { SearchInput as ke } from "./lib/Components/SearchInput/SearchInput.js";
|
|
27
|
+
import { SegmentedControl as Ne, SegmentedControlButton as ye } from "./lib/Components/SegmentedControl/SegmentedControl.js";
|
|
28
|
+
import { Select as Ee, SelectContent as Oe, SelectGroup as Fe, SelectItem as _e, SelectItemText as je, SelectLabel as qe, SelectSeparator as ze, SelectTrigger as Je } from "./lib/Components/Select/Select.js";
|
|
29
|
+
import { SideBar as Qe, SideBarCollapseToggle as Ue, SideBarItem as Ve, SideBarLeading as We, SideBarTrailing as Xe } from "./lib/Components/SideBar/SideBar.js";
|
|
30
|
+
import { Skeleton as Ze } from "./lib/Components/Skeleton/Skeleton.js";
|
|
31
|
+
import { Spinner as eo } from "./lib/Components/Spinner/Spinner.js";
|
|
32
|
+
import { Spot as to } from "./lib/Components/Spot/Spot.js";
|
|
33
|
+
import { Stepper as ao } from "./lib/Components/Stepper/Stepper.js";
|
|
34
|
+
import { Subheader as io, SubheaderAction as lo, SubheaderCount as po, SubheaderDescription as mo, SubheaderInfo as To, SubheaderRow as uo, SubheaderShowMore as xo, SubheaderTitle as fo } from "./lib/Components/Subheader/Subheader.js";
|
|
35
|
+
import { Switch as bo } from "./lib/Components/Switch/Switch.js";
|
|
36
|
+
import { Table as co, TableActionBar as Bo, TableActionBarLeading as Co, TableActionBarTrailing as Io, TableBody as so, TableCell as Lo, TableCellContent as Do, TableGroupHeaderRow as Mo, TableHeader as ho, TableHeaderCell as vo, TableHeaderRow as Ro, TableInfoIcon as Ao, TableLoadingRow as wo, TableRoot as Ho, TableRow as ko, TableSortButton as Go } from "./lib/Components/Table/Table.js";
|
|
37
|
+
import { Tag as yo } from "./lib/Components/Tag/Tag.js";
|
|
38
|
+
import { TextInput as Eo } from "./lib/Components/TextInput/TextInput.js";
|
|
39
|
+
import { Tile as Fo, TileContent as _o, TileDescription as jo, TileSecondaryAction as qo, TileSpot as zo, TileTitle as Jo, TileTrailingContent as Ko } from "./lib/Components/Tile/Tile.js";
|
|
40
|
+
import { TileButton as Uo } from "./lib/Components/TileButton/TileButton.js";
|
|
41
|
+
import { Tooltip as Wo, TooltipContent as Xo, TooltipProvider as Yo, TooltipTrigger as Zo } from "./lib/Components/Tooltip/Tooltip.js";
|
|
42
|
+
import { ThemeProvider as et } from "./lib/Components/ThemeProvider/ThemeProvider.js";
|
|
43
|
+
import { COLOR_SCHEMES as tt } from "./lib/Components/ThemeProvider/ThemeProvider.types.js";
|
|
42
44
|
export {
|
|
43
45
|
a as AddressInput,
|
|
44
46
|
p as AmountDisplay,
|
|
@@ -48,27 +50,28 @@ export {
|
|
|
48
50
|
c as BaseButton,
|
|
49
51
|
S as BaseInput,
|
|
50
52
|
d as Button,
|
|
51
|
-
|
|
53
|
+
tt as COLOR_SCHEMES,
|
|
54
|
+
M as CardButton,
|
|
52
55
|
v as Checkbox,
|
|
53
|
-
|
|
54
|
-
|
|
56
|
+
C as ContentBanner,
|
|
57
|
+
I as ContentBannerContent,
|
|
55
58
|
s as ContentBannerDescription,
|
|
56
59
|
L as ContentBannerTitle,
|
|
57
|
-
|
|
60
|
+
A as DataTable,
|
|
58
61
|
w as DataTableGlobalSearchInput,
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
+
H as DataTableRoot,
|
|
63
|
+
E as Dialog,
|
|
64
|
+
O as DialogBody,
|
|
62
65
|
y as DialogClose,
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
66
|
+
F as DialogContent,
|
|
67
|
+
_ as DialogFooter,
|
|
68
|
+
z as DialogHeader,
|
|
69
|
+
j as DialogTrigger,
|
|
70
|
+
K as Divider,
|
|
71
|
+
U as IconButton,
|
|
72
|
+
W as InteractiveIcon,
|
|
70
73
|
t as Languages,
|
|
71
|
-
|
|
74
|
+
Y as Link,
|
|
72
75
|
$ as ListItem,
|
|
73
76
|
ee as ListItemContent,
|
|
74
77
|
oe as ListItemDescription,
|
|
@@ -89,73 +92,74 @@ export {
|
|
|
89
92
|
ge as MenuRadioItem,
|
|
90
93
|
ce as MenuSeparator,
|
|
91
94
|
Be as MenuSub,
|
|
92
|
-
|
|
93
|
-
|
|
95
|
+
Ce as MenuSubContent,
|
|
96
|
+
Ie as MenuSubTrigger,
|
|
94
97
|
se as MenuTrigger,
|
|
95
98
|
De as NavBar,
|
|
96
|
-
|
|
97
|
-
|
|
99
|
+
Me as NavBarBackButton,
|
|
100
|
+
he as NavBarCoinCapsule,
|
|
98
101
|
ve as NavBarTitle,
|
|
99
|
-
|
|
102
|
+
Re as NavBarTrailing,
|
|
100
103
|
we as PageIndicator,
|
|
101
|
-
|
|
102
|
-
Ne as
|
|
103
|
-
ye as
|
|
104
|
-
|
|
105
|
-
|
|
104
|
+
ke as SearchInput,
|
|
105
|
+
Ne as SegmentedControl,
|
|
106
|
+
ye as SegmentedControlButton,
|
|
107
|
+
Ee as Select,
|
|
108
|
+
Oe as SelectContent,
|
|
109
|
+
Fe as SelectGroup,
|
|
110
|
+
_e as SelectItem,
|
|
106
111
|
je as SelectItemText,
|
|
107
112
|
qe as SelectLabel,
|
|
108
113
|
ze as SelectSeparator,
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
114
|
+
Je as SelectTrigger,
|
|
115
|
+
Qe as SideBar,
|
|
116
|
+
Ue as SideBarCollapseToggle,
|
|
117
|
+
Ve as SideBarItem,
|
|
118
|
+
We as SideBarLeading,
|
|
119
|
+
Xe as SideBarTrailing,
|
|
120
|
+
Ze as Skeleton,
|
|
121
|
+
eo as Spinner,
|
|
122
|
+
to as Spot,
|
|
123
|
+
ao as Stepper,
|
|
124
|
+
io as Subheader,
|
|
125
|
+
lo as SubheaderAction,
|
|
126
|
+
po as SubheaderCount,
|
|
127
|
+
mo as SubheaderDescription,
|
|
128
|
+
To as SubheaderInfo,
|
|
129
|
+
uo as SubheaderRow,
|
|
130
|
+
xo as SubheaderShowMore,
|
|
131
|
+
fo as SubheaderTitle,
|
|
132
|
+
bo as Switch,
|
|
133
|
+
co as Table,
|
|
134
|
+
Bo as TableActionBar,
|
|
135
|
+
Co as TableActionBarLeading,
|
|
136
|
+
Io as TableActionBarTrailing,
|
|
137
|
+
so as TableBody,
|
|
138
|
+
Lo as TableCell,
|
|
139
|
+
Do as TableCellContent,
|
|
140
|
+
Mo as TableGroupHeaderRow,
|
|
141
|
+
ho as TableHeader,
|
|
142
|
+
vo as TableHeaderCell,
|
|
143
|
+
Ro as TableHeaderRow,
|
|
144
|
+
Ao as TableInfoIcon,
|
|
145
|
+
wo as TableLoadingRow,
|
|
146
|
+
Ho as TableRoot,
|
|
147
|
+
ko as TableRow,
|
|
148
|
+
Go as TableSortButton,
|
|
149
|
+
yo as Tag,
|
|
150
|
+
Eo as TextInput,
|
|
151
|
+
et as ThemeProvider,
|
|
152
|
+
Fo as Tile,
|
|
153
|
+
Uo as TileButton,
|
|
154
|
+
_o as TileContent,
|
|
150
155
|
jo as TileDescription,
|
|
151
156
|
qo as TileSecondaryAction,
|
|
152
157
|
zo as TileSpot,
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
_o as useTheme
|
|
158
|
+
Jo as TileTitle,
|
|
159
|
+
Ko as TileTrailingContent,
|
|
160
|
+
Wo as Tooltip,
|
|
161
|
+
Xo as TooltipContent,
|
|
162
|
+
Yo as TooltipProvider,
|
|
163
|
+
Zo as TooltipTrigger,
|
|
164
|
+
G as useLumenDataTable
|
|
161
165
|
};
|
|
@@ -25,13 +25,13 @@ const N = {
|
|
|
25
25
|
7: 14.7,
|
|
26
26
|
8: 16.5,
|
|
27
27
|
9: 16.5
|
|
28
|
-
}, T = d(({ value: a, animate: l, type:
|
|
29
|
-
const
|
|
28
|
+
}, T = d(({ value: a, animate: l, type: i }) => {
|
|
29
|
+
const r = (i === "integer" ? N : I)[a];
|
|
30
30
|
return /* @__PURE__ */ o(
|
|
31
31
|
"div",
|
|
32
32
|
{
|
|
33
|
-
className: "relative overflow-hidden transition-[width] duration-600",
|
|
34
|
-
style: { width:
|
|
33
|
+
className: "relative overflow-hidden mask-fade-y transition-[width] duration-600",
|
|
34
|
+
style: { width: r + "px" },
|
|
35
35
|
children: [
|
|
36
36
|
/* @__PURE__ */ e("span", { className: "invisible", children: "0" }),
|
|
37
37
|
/* @__PURE__ */ e(
|
|
@@ -50,13 +50,13 @@ const N = {
|
|
|
50
50
|
]
|
|
51
51
|
}
|
|
52
52
|
);
|
|
53
|
-
}), m = d(({ items: a, type: l, animate:
|
|
53
|
+
}), m = d(({ items: a, type: l, animate: i }) => a.map((r, s) => {
|
|
54
54
|
const n = a.length - s;
|
|
55
|
-
return
|
|
55
|
+
return r.type === "separator" ? /* @__PURE__ */ e("span", { children: r.value }, n) : /* @__PURE__ */ e(
|
|
56
56
|
T,
|
|
57
57
|
{
|
|
58
|
-
value: Number(
|
|
59
|
-
animate:
|
|
58
|
+
value: Number(r.value),
|
|
59
|
+
animate: i,
|
|
60
60
|
type: l
|
|
61
61
|
},
|
|
62
62
|
n
|
|
@@ -64,37 +64,37 @@ const N = {
|
|
|
64
64
|
})), g = ({
|
|
65
65
|
value: a,
|
|
66
66
|
formatter: l,
|
|
67
|
-
hidden:
|
|
68
|
-
loading:
|
|
67
|
+
hidden: i = !1,
|
|
68
|
+
loading: r = !1,
|
|
69
69
|
animate: s = !0,
|
|
70
70
|
className: n,
|
|
71
71
|
...u
|
|
72
72
|
}) => {
|
|
73
73
|
const t = l(a), c = y(t), { t: f } = D(), h = x(
|
|
74
74
|
t,
|
|
75
|
-
|
|
75
|
+
i,
|
|
76
76
|
f("components.amountDisplay.amountHiddenAriaLabel")
|
|
77
77
|
);
|
|
78
78
|
return /* @__PURE__ */ o(
|
|
79
79
|
"div",
|
|
80
80
|
{
|
|
81
81
|
className: p(
|
|
82
|
-
|
|
83
|
-
"relative inline-flex items-
|
|
82
|
+
r && "animate-pulse",
|
|
83
|
+
"relative inline-flex items-baseline",
|
|
84
84
|
n
|
|
85
85
|
),
|
|
86
86
|
"aria-label": h,
|
|
87
|
-
"aria-busy":
|
|
87
|
+
"aria-busy": r,
|
|
88
88
|
...u,
|
|
89
89
|
children: [
|
|
90
90
|
/* @__PURE__ */ o(
|
|
91
91
|
"span",
|
|
92
92
|
{
|
|
93
|
-
className: "inline-flex
|
|
93
|
+
className: "inline-flex heading-1-semi-bold text-base",
|
|
94
94
|
"aria-hidden": "true",
|
|
95
95
|
children: [
|
|
96
96
|
t.currencyPosition === "start" && /* @__PURE__ */ e("span", { className: "me-4", children: t.currencyText }),
|
|
97
|
-
|
|
97
|
+
i ? /* @__PURE__ */ e("span", { children: "••••" }) : /* @__PURE__ */ e(
|
|
98
98
|
m,
|
|
99
99
|
{
|
|
100
100
|
items: c.integerPart,
|
|
@@ -108,11 +108,11 @@ const N = {
|
|
|
108
108
|
/* @__PURE__ */ o(
|
|
109
109
|
"span",
|
|
110
110
|
{
|
|
111
|
-
className: "inline-flex
|
|
111
|
+
className: "inline-flex heading-2-semi-bold text-muted",
|
|
112
112
|
"aria-hidden": "true",
|
|
113
113
|
children: [
|
|
114
|
-
!
|
|
115
|
-
t.decimalPart && !
|
|
114
|
+
!i && t.decimalPart && /* @__PURE__ */ e("span", { children: t.decimalSeparator }),
|
|
115
|
+
t.decimalPart && !i && /* @__PURE__ */ e(
|
|
116
116
|
m,
|
|
117
117
|
{
|
|
118
118
|
items: c.decimalPart,
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { SegmentedControlButtonProps, SegmentedControlProps } from './types';
|
|
2
|
+
export declare function SegmentedControlButton({ value, children, icon: Icon, onClick, className, ...props }: SegmentedControlButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare namespace SegmentedControlButton {
|
|
4
|
+
var displayName: string;
|
|
5
|
+
}
|
|
6
|
+
export declare function SegmentedControl({ selectedValue, onSelectedChange, children, className, disabled, appearance, ...props }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare namespace SegmentedControl {
|
|
8
|
+
var displayName: string;
|
|
9
|
+
}
|
|
10
|
+
//# sourceMappingURL=SegmentedControl.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,2BAA2B,EAC3B,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAMjB,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,IAAI,EAAE,IAAI,EACV,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAiC7B;yBAxCe,sBAAsB;;;AA4CtC,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,EACb,gBAAgB,EAChB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,UAAyB,EACzB,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA2CvB;yBAnDe,gBAAgB"}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
2
|
+
import { cn as m } from "../../../libs/utils-shared/dist/index.js";
|
|
3
|
+
import { useRef as p } from "react";
|
|
4
|
+
import { useSegmentedControlContext as b, SegmentedControlContextProvider as x } from "./SegmentedControlContext.js";
|
|
5
|
+
import { useSegmentedControlSelectedIndex as g, usePillElementLayoutEffect as h } from "./usePillElementLayoutEffect.js";
|
|
6
|
+
function v({
|
|
7
|
+
value: o,
|
|
8
|
+
children: l,
|
|
9
|
+
icon: e,
|
|
10
|
+
onClick: d,
|
|
11
|
+
className: n,
|
|
12
|
+
...a
|
|
13
|
+
}) {
|
|
14
|
+
const { selectedValue: u, onSelectedChange: i, disabled: r } = b(), t = u === o;
|
|
15
|
+
return /* @__PURE__ */ s(
|
|
16
|
+
"button",
|
|
17
|
+
{
|
|
18
|
+
type: "button",
|
|
19
|
+
role: "radio",
|
|
20
|
+
"aria-checked": t,
|
|
21
|
+
"aria-disabled": r,
|
|
22
|
+
disabled: r,
|
|
23
|
+
onClick: (f) => {
|
|
24
|
+
r || (i(o), d?.(f));
|
|
25
|
+
},
|
|
26
|
+
className: m(
|
|
27
|
+
"z-10 flex min-w-0 flex-1 cursor-pointer flex-row items-center justify-center rounded-sm px-16 py-8 select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus disabled:cursor-not-allowed",
|
|
28
|
+
t ? "body-2-semi-bold text-base" : "body-2 text-muted hover:body-2-semi-bold hover:text-muted-hover",
|
|
29
|
+
n
|
|
30
|
+
),
|
|
31
|
+
...a,
|
|
32
|
+
children: /* @__PURE__ */ c("span", { className: "inline-flex shrink-0 items-center justify-center gap-8", children: [
|
|
33
|
+
e && /* @__PURE__ */ s(e, { size: 16 }),
|
|
34
|
+
/* @__PURE__ */ s("span", { children: l })
|
|
35
|
+
] })
|
|
36
|
+
}
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
v.displayName = "SegmentedControlButton";
|
|
40
|
+
function y({
|
|
41
|
+
selectedValue: o,
|
|
42
|
+
onSelectedChange: l,
|
|
43
|
+
children: e,
|
|
44
|
+
className: d,
|
|
45
|
+
disabled: n,
|
|
46
|
+
appearance: a = "background",
|
|
47
|
+
...u
|
|
48
|
+
}) {
|
|
49
|
+
const i = p(null), r = g(
|
|
50
|
+
o,
|
|
51
|
+
e
|
|
52
|
+
), { pill: t } = h({
|
|
53
|
+
ref: i,
|
|
54
|
+
selectedIndex: r,
|
|
55
|
+
children: e
|
|
56
|
+
});
|
|
57
|
+
return /* @__PURE__ */ s(
|
|
58
|
+
x,
|
|
59
|
+
{
|
|
60
|
+
value: { selectedValue: o, onSelectedChange: l, disabled: n },
|
|
61
|
+
children: /* @__PURE__ */ c(
|
|
62
|
+
"div",
|
|
63
|
+
{
|
|
64
|
+
...u,
|
|
65
|
+
ref: i,
|
|
66
|
+
role: "radiogroup",
|
|
67
|
+
"aria-disabled": n,
|
|
68
|
+
className: m(
|
|
69
|
+
"relative flex w-full flex-row items-center rounded-sm",
|
|
70
|
+
a === "background" && "bg-surface",
|
|
71
|
+
d
|
|
72
|
+
),
|
|
73
|
+
children: [
|
|
74
|
+
e,
|
|
75
|
+
/* @__PURE__ */ s(
|
|
76
|
+
"div",
|
|
77
|
+
{
|
|
78
|
+
"aria-hidden": !0,
|
|
79
|
+
className: m(
|
|
80
|
+
"pointer-events-none absolute top-0 left-0 z-0 rounded-sm transition-transform duration-250 ease-in-out",
|
|
81
|
+
n ? "bg-base-transparent-pressed" : "bg-muted-transparent"
|
|
82
|
+
),
|
|
83
|
+
style: {
|
|
84
|
+
width: t.width,
|
|
85
|
+
height: t.height,
|
|
86
|
+
transform: `translateX(${t.x}px)`
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
)
|
|
90
|
+
]
|
|
91
|
+
}
|
|
92
|
+
)
|
|
93
|
+
}
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
y.displayName = "SegmentedControl";
|
|
97
|
+
export {
|
|
98
|
+
y as SegmentedControl,
|
|
99
|
+
v as SegmentedControlButton
|
|
100
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export type SegmentedControlContextValue = {
|
|
2
|
+
selectedValue: string;
|
|
3
|
+
onSelectedChange: (value: string) => void;
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
};
|
|
6
|
+
declare const SegmentedControlContextProvider: import('react').FC<{
|
|
7
|
+
children: import('react').ReactNode;
|
|
8
|
+
value: SegmentedControlContextValue;
|
|
9
|
+
}>;
|
|
10
|
+
export declare const useSegmentedControlContext: () => SegmentedControlContextValue;
|
|
11
|
+
export { SegmentedControlContextProvider };
|
|
12
|
+
//# sourceMappingURL=SegmentedControlContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SegmentedControlContext.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/SegmentedControl/SegmentedControlContext.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,4BAA4B,GAAG;IACzC,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,QAAA,MAAO,+BAA+B;;;EAC+B,CAAC;AAEtE,eAAO,MAAM,0BAA0B,oCAInC,CAAC;AAEL,OAAO,EAAE,+BAA+B,EAAE,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { createSafeContext as e } from "../../../libs/utils-shared/dist/index.js";
|
|
2
|
+
const [n, t] = e("SegmentedControl"), r = () => t({
|
|
3
|
+
consumerName: "SegmentedControlButton",
|
|
4
|
+
contextRequired: !0
|
|
5
|
+
});
|
|
6
|
+
export {
|
|
7
|
+
n as SegmentedControlContextProvider,
|
|
8
|
+
r as useSegmentedControlContext
|
|
9
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/SegmentedControl/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,mBAAmB,SAAS,CAAC"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { ComponentType, ReactNode, ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import { IconSize } from '../Icon/types';
|
|
3
|
+
export type SegmentedControlProps = {
|
|
4
|
+
/**
|
|
5
|
+
* The value of the currently selected segment (drives the sliding pill).
|
|
6
|
+
*/
|
|
7
|
+
selectedValue: string;
|
|
8
|
+
/**
|
|
9
|
+
* Callback when the selected segment value changes.
|
|
10
|
+
*/
|
|
11
|
+
onSelectedChange: (value: string) => void;
|
|
12
|
+
/**
|
|
13
|
+
* When true, the entire control is disabled (no interaction, selected uses muted styling).
|
|
14
|
+
*/
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Visual style of the control container: "background" shows the surface bg, "no-background" is transparent.
|
|
18
|
+
* @default 'background'
|
|
19
|
+
*/
|
|
20
|
+
appearance?: 'background' | 'no-background';
|
|
21
|
+
/**
|
|
22
|
+
* Segment buttons (SegmentedControlButton).
|
|
23
|
+
*/
|
|
24
|
+
children: ReactNode;
|
|
25
|
+
} & Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
|
|
26
|
+
type IconComponent = ComponentType<{
|
|
27
|
+
size?: IconSize;
|
|
28
|
+
className?: string;
|
|
29
|
+
}>;
|
|
30
|
+
export type SegmentedControlButtonProps = {
|
|
31
|
+
/**
|
|
32
|
+
* Value for this segment (must be unique among siblings).
|
|
33
|
+
*/
|
|
34
|
+
value: string;
|
|
35
|
+
/**
|
|
36
|
+
* Button label.
|
|
37
|
+
*/
|
|
38
|
+
children: ReactNode;
|
|
39
|
+
/**
|
|
40
|
+
* Optional icon shown to the left of the label (from Symbols).
|
|
41
|
+
*/
|
|
42
|
+
icon?: IconComponent;
|
|
43
|
+
} & Omit<ComponentPropsWithoutRef<'button'>, 'children'>;
|
|
44
|
+
export {};
|
|
45
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/SegmentedControl/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,YAAY,GAAG,eAAe,CAAC;IAC5C;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAEtD,KAAK,aAAa,GAAG,aAAa,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,MAAM,2BAA2B,GAAG;IACxC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,GAAG,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type PillLayout = {
|
|
3
|
+
width: number;
|
|
4
|
+
height: number;
|
|
5
|
+
x: number;
|
|
6
|
+
};
|
|
7
|
+
type UsePillElementLayoutEffectParams = {
|
|
8
|
+
ref: React.RefObject<HTMLDivElement | null>;
|
|
9
|
+
selectedIndex: number;
|
|
10
|
+
children: React.ReactNode;
|
|
11
|
+
};
|
|
12
|
+
export declare function usePillElementLayoutEffect({ ref, selectedIndex, children, }: UsePillElementLayoutEffectParams): {
|
|
13
|
+
pill: PillLayout;
|
|
14
|
+
};
|
|
15
|
+
export declare function useSegmentedControlSelectedIndex(selectedValue: string, children: React.ReactNode): number;
|
|
16
|
+
export {};
|
|
17
|
+
//# sourceMappingURL=usePillElementLayoutEffect.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePillElementLayoutEffect.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/SegmentedControl/usePillElementLayoutEffect.ts"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAElE,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,KAAK,gCAAgC,GAAG;IACtC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5C,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,0BAA0B,CAAC,EACzC,GAAG,EACH,aAAa,EACb,QAAQ,GACT,EAAE,gCAAgC,GAAG;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,CA0BzD;AAED,wBAAgB,gCAAgC,CAC9C,aAAa,EAAE,MAAM,EACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,GACxB,MAAM,CAUR"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import r, { useMemo as a, useState as m, useLayoutEffect as p } from "react";
|
|
2
|
+
function y({
|
|
3
|
+
ref: e,
|
|
4
|
+
selectedIndex: t,
|
|
5
|
+
children: n
|
|
6
|
+
}) {
|
|
7
|
+
const [f, l] = m({ width: 0, height: 0, x: 0 });
|
|
8
|
+
return p(() => {
|
|
9
|
+
const o = e.current;
|
|
10
|
+
if (!o) return;
|
|
11
|
+
const i = () => {
|
|
12
|
+
const { width: d, height: h } = o.getBoundingClientRect(), u = r.Children.count(n), c = u > 0 ? d / u : 0;
|
|
13
|
+
l({
|
|
14
|
+
width: c,
|
|
15
|
+
height: h,
|
|
16
|
+
x: t >= 0 ? t * c : 0
|
|
17
|
+
});
|
|
18
|
+
};
|
|
19
|
+
if (i(), typeof ResizeObserver > "u") return;
|
|
20
|
+
const s = new ResizeObserver(i);
|
|
21
|
+
return s.observe(o), () => s.disconnect();
|
|
22
|
+
}, [n, t, e]), { pill: f };
|
|
23
|
+
}
|
|
24
|
+
function v(e, t) {
|
|
25
|
+
return a(
|
|
26
|
+
() => r.Children.toArray(t).findIndex(
|
|
27
|
+
(n) => r.isValidElement(n) && n.props.value === e
|
|
28
|
+
),
|
|
29
|
+
[e, t]
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
export {
|
|
33
|
+
y as usePillElementLayoutEffect,
|
|
34
|
+
v as useSegmentedControlSelectedIndex
|
|
35
|
+
};
|
|
@@ -1,11 +1,4 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
declare const ThemeProvider: FC<ThemeProviderProps>;
|
|
4
|
-
declare const useTheme: () => {
|
|
5
|
-
toggleMode: () => void;
|
|
6
|
-
mode: ThemeMode;
|
|
7
|
-
setMode: (mode: ThemeMode) => void;
|
|
8
|
-
locale: ThemeProviderProps["locale"];
|
|
9
|
-
};
|
|
10
|
-
export { ThemeProvider, useTheme };
|
|
2
|
+
import { ThemeProviderProps } from './ThemeProvider.types';
|
|
3
|
+
export declare const ThemeProvider: FC<ThemeProviderProps>;
|
|
11
4
|
//# sourceMappingURL=ThemeProvider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAiB,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAU1E,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAoBhD,CAAC"}
|
|
@@ -1,35 +1,24 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { createSafeContext as i } from "../../../libs/utils-shared/dist/index.js";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
3
|
+
import { useMemo as f } from "react";
|
|
4
|
+
import { COLOR_SCHEMES as s } from "./ThemeProvider.types.js";
|
|
5
|
+
import { useRootColorModeSideEffect as n } from "./useRootColorModeSideEffect.js";
|
|
6
|
+
import { I18nProvider as d } from "../../../i18n/I18nProvider.js";
|
|
7
|
+
const [p] = i("ThemeProvider"), M = ({
|
|
8
|
+
children: t,
|
|
9
|
+
colorScheme: r = s.system,
|
|
9
10
|
locale: o
|
|
10
11
|
}) => {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
const d = c(
|
|
12
|
+
n({ colorScheme: r });
|
|
13
|
+
const m = f(
|
|
14
14
|
() => ({
|
|
15
|
-
|
|
16
|
-
setMode: n,
|
|
15
|
+
colorScheme: r,
|
|
17
16
|
locale: o
|
|
18
17
|
}),
|
|
19
|
-
[
|
|
18
|
+
[r, o]
|
|
20
19
|
);
|
|
21
|
-
return /* @__PURE__ */
|
|
22
|
-
}, P = () => {
|
|
23
|
-
const e = p({
|
|
24
|
-
consumerName: "useTheme",
|
|
25
|
-
contextRequired: !0
|
|
26
|
-
});
|
|
27
|
-
return {
|
|
28
|
-
...e,
|
|
29
|
-
toggleMode: () => e.setMode(e.mode === m ? T : m)
|
|
30
|
-
};
|
|
20
|
+
return /* @__PURE__ */ e(p, { value: m, children: /* @__PURE__ */ e(d, { locale: o, children: t }) });
|
|
31
21
|
};
|
|
32
22
|
export {
|
|
33
|
-
|
|
34
|
-
P as useTheme
|
|
23
|
+
M as ThemeProvider
|
|
35
24
|
};
|
|
@@ -1,12 +1,18 @@
|
|
|
1
1
|
import { PropsWithChildren } from 'react';
|
|
2
2
|
import { SupportedLocale } from '../../../i18n';
|
|
3
|
-
export
|
|
3
|
+
export declare const COLOR_SCHEMES: {
|
|
4
|
+
readonly light: "light";
|
|
5
|
+
readonly dark: "dark";
|
|
6
|
+
readonly system: "system";
|
|
7
|
+
};
|
|
8
|
+
export type ColorSchemeName = (typeof COLOR_SCHEMES)[keyof typeof COLOR_SCHEMES];
|
|
4
9
|
export type ThemeProviderProps = PropsWithChildren & {
|
|
5
10
|
/**
|
|
6
|
-
* The
|
|
11
|
+
* The color scheme of the theme.
|
|
12
|
+
* system will follow the user's OS preference via `prefers-color-scheme`.
|
|
7
13
|
* @default 'system'
|
|
8
14
|
*/
|
|
9
|
-
|
|
15
|
+
colorScheme?: ColorSchemeName;
|
|
10
16
|
/**
|
|
11
17
|
* The locale to use for translations.
|
|
12
18
|
* When changed, translations will be lazy-loaded automatically.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ThemeProvider/ThemeProvider.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,
|
|
1
|
+
{"version":3,"file":"ThemeProvider.types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ThemeProvider/ThemeProvider.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,eAAO,MAAM,aAAa;;;;CAIhB,CAAC;AAEX,MAAM,MAAM,eAAe,GACzB,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,GAAG;IACnD;;;;OAIG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B;;;;OAIG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ColorSchemeName } from './ThemeProvider.types';
|
|
2
2
|
export declare const LIGHT_MODE = "light";
|
|
3
3
|
export declare const DARK_MODE = "dark";
|
|
4
4
|
export declare const SYSTEM_MODE = "system";
|
|
@@ -6,7 +6,7 @@ export declare const SYSTEM_MODE = "system";
|
|
|
6
6
|
* Updates the root element className when the theme mode changes.
|
|
7
7
|
* This allows the design-system theme config to be applied
|
|
8
8
|
*/
|
|
9
|
-
export declare const useRootColorModeSideEffect: ({
|
|
10
|
-
|
|
9
|
+
export declare const useRootColorModeSideEffect: ({ colorScheme, }: {
|
|
10
|
+
colorScheme: ColorSchemeName;
|
|
11
11
|
}) => void;
|
|
12
12
|
//# sourceMappingURL=useRootColorModeSideEffect.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRootColorModeSideEffect.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ThemeProvider/useRootColorModeSideEffect.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"useRootColorModeSideEffect.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ThemeProvider/useRootColorModeSideEffect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEvE,eAAO,MAAM,UAAU,UAAU,CAAC;AAClC,eAAO,MAAM,SAAS,SAAS,CAAC;AAChC,eAAO,MAAM,WAAW,WAAW,CAAC;AAEpC;;;GAGG;AACH,eAAO,MAAM,0BAA0B,qBAEpC;IACD,WAAW,EAAE,eAAe,CAAC;CAC9B,SA0BA,CAAC"}
|
|
@@ -1,18 +1,24 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { useLayoutEffect as a } from "react";
|
|
2
|
+
import { COLOR_SCHEMES as c } from "./ThemeProvider.types.js";
|
|
3
|
+
const r = "light", n = "dark", m = ({
|
|
4
|
+
colorScheme: t
|
|
5
|
+
}) => {
|
|
6
|
+
a(() => {
|
|
7
|
+
const e = window.document.documentElement;
|
|
8
|
+
if (e.classList.remove(r, n), t === c.system) {
|
|
9
|
+
const s = window.matchMedia("(prefers-color-scheme: dark)"), o = () => {
|
|
10
|
+
e.classList.remove(r, n), e.classList.add(s.matches ? n : r);
|
|
11
|
+
};
|
|
12
|
+
return o(), s.addEventListener("change", o), () => {
|
|
13
|
+
s.removeEventListener("change", o);
|
|
14
|
+
};
|
|
9
15
|
}
|
|
10
|
-
|
|
11
|
-
|
|
16
|
+
return e.classList.add(t), () => {
|
|
17
|
+
};
|
|
18
|
+
}, [t]);
|
|
12
19
|
};
|
|
13
20
|
export {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
a as useRootColorModeSideEffect
|
|
21
|
+
n as DARK_MODE,
|
|
22
|
+
r as LIGHT_MODE,
|
|
23
|
+
m as useRootColorModeSideEffect
|
|
18
24
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TileButton.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/TileButton/TileButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"TileButton.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/TileButton/TileButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAsC1C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,UAAU;sHAWpB,eAAe;;CAiCjB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as d, jsx as s } from "react/jsx-runtime";
|
|
2
2
|
import { cn as p } from "../../../libs/utils-shared/dist/index.js";
|
|
3
3
|
import { Slot as v, Slottable as x } from "@radix-ui/react-slot";
|
|
4
4
|
import { cva as i } from "class-variance-authority";
|
|
@@ -6,14 +6,14 @@ import { useCallback as g } from "react";
|
|
|
6
6
|
const N = i(
|
|
7
7
|
[
|
|
8
8
|
"flex flex-col items-center gap-8 rounded-md p-12",
|
|
9
|
-
"bg-
|
|
9
|
+
"bg-surface body-2-semi-bold text-base transition-colors",
|
|
10
10
|
"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus"
|
|
11
11
|
],
|
|
12
12
|
{
|
|
13
13
|
variants: {
|
|
14
14
|
disabled: {
|
|
15
15
|
true: "bg-disabled text-disabled cursor-not-allowed",
|
|
16
|
-
false: "hover:bg-
|
|
16
|
+
false: "hover:bg-surface-hover active:bg-surface-pressed cursor-pointer"
|
|
17
17
|
},
|
|
18
18
|
isFull: {
|
|
19
19
|
true: "w-full"
|
|
@@ -44,9 +44,9 @@ const N = i(
|
|
|
44
44
|
className: c,
|
|
45
45
|
asChild: t = !1,
|
|
46
46
|
"aria-label": f,
|
|
47
|
-
...
|
|
47
|
+
...b
|
|
48
48
|
}) => {
|
|
49
|
-
const
|
|
49
|
+
const m = g(
|
|
50
50
|
(o) => {
|
|
51
51
|
if (e) {
|
|
52
52
|
o.preventDefault();
|
|
@@ -56,17 +56,17 @@ const N = i(
|
|
|
56
56
|
},
|
|
57
57
|
[e, l]
|
|
58
58
|
);
|
|
59
|
-
return /* @__PURE__ */
|
|
59
|
+
return /* @__PURE__ */ d(
|
|
60
60
|
t ? v : "button",
|
|
61
61
|
{
|
|
62
62
|
ref: r,
|
|
63
63
|
type: t ? void 0 : "button",
|
|
64
64
|
className: p(N({ disabled: e, isFull: u }), c),
|
|
65
|
-
onClick:
|
|
65
|
+
onClick: m,
|
|
66
66
|
disabled: e,
|
|
67
67
|
"data-disabled": e || void 0,
|
|
68
68
|
"aria-label": f,
|
|
69
|
-
...
|
|
69
|
+
...b,
|
|
70
70
|
children: [
|
|
71
71
|
/* @__PURE__ */ s(n, { size: 20, className: V({ disabled: e }) }),
|
|
72
72
|
t ? /* @__PURE__ */ s(x, { children: a }) : /* @__PURE__ */ s("span", { className: "line-clamp-2 text-center", children: a })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC"}
|
package/dist/package.json
CHANGED