@pibit.ai/cure-design-system 0.3.0 → 0.3.2
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/patterns/table/table.d.ts +3 -3
- package/dist/patterns/table/table.d.ts.map +1 -1
- package/dist/patterns/table/table.js +126 -126
- package/dist/primitives/button/button.d.ts.map +1 -1
- package/dist/primitives/button/button.js +61 -61
- package/dist/primitives/toggle/toggle.d.ts +36 -17
- package/dist/primitives/toggle/toggle.d.ts.map +1 -1
- package/dist/primitives/toggle/toggle.js +131 -51
- package/dist/styles/theme.css +1 -1
- package/package.json +2 -2
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { jsxs as g, jsx as n } from "react/jsx-runtime";
|
|
2
|
-
import { isValidElement as
|
|
2
|
+
import { isValidElement as b } from "react";
|
|
3
3
|
import { Link as N, Button as R } from "react-aria-components";
|
|
4
4
|
import { sortCx as q, cx as i } from "../../utils/cn.js";
|
|
5
|
-
import { isReactComponent as
|
|
6
|
-
const
|
|
5
|
+
import { isReactComponent as v } from "../../utils/is-react-component.js";
|
|
6
|
+
const t = q({
|
|
7
7
|
common: {
|
|
8
8
|
root: [
|
|
9
9
|
"group relative inline-flex h-max cursor-pointer items-center justify-center whitespace-nowrap transition duration-100 ease-linear before:absolute",
|
|
10
10
|
// When button is used within `InputGroup`
|
|
11
11
|
"in-data-input-wrapper:focus:!z-50 in-data-input-wrapper:in-data-leading:-mr-px in-data-input-wrapper:in-data-leading:rounded-r-none in-data-input-wrapper:in-data-leading:before:rounded-r-none in-data-input-wrapper:in-data-trailing:-ml-px in-data-input-wrapper:in-data-trailing:rounded-l-none in-data-input-wrapper:in-data-trailing:before:rounded-l-none",
|
|
12
12
|
// Disabled styles
|
|
13
|
-
"disabled:cursor-not-allowed disabled:text-
|
|
13
|
+
"disabled:cursor-not-allowed disabled:text-fg-disabled",
|
|
14
14
|
// Icon styles
|
|
15
|
-
"disabled:*:data-icon:text-
|
|
15
|
+
"disabled:*:data-icon:text-fg-disabled_subtle",
|
|
16
16
|
// Same as `icon` but for SSR icons that cannot be passed to the client as functions.
|
|
17
17
|
"*:data-icon:pointer-events-none *:data-icon:size-5 *:data-icon:shrink-0 *:data-icon:transition-inherit-all"
|
|
18
18
|
].join(" "),
|
|
@@ -52,141 +52,141 @@ const r = q({
|
|
|
52
52
|
colors: {
|
|
53
53
|
primary: {
|
|
54
54
|
root: [
|
|
55
|
-
"bg-
|
|
55
|
+
"bg-brand-solid text-white ring-1 ring-transparent ring-inset hover:bg-brand-solid_hover data-loading:bg-brand-solid_hover",
|
|
56
56
|
// Disabled styles
|
|
57
|
-
"disabled:bg-
|
|
57
|
+
"disabled:bg-brand-disabled !text-white",
|
|
58
58
|
// Icon styles
|
|
59
|
-
"*:data-icon:text-
|
|
59
|
+
"*:data-icon:text-button-primary-icon hover:*:data-icon:text-button-primary-icon_hover"
|
|
60
60
|
].join(" ")
|
|
61
61
|
},
|
|
62
62
|
secondary: {
|
|
63
63
|
root: [
|
|
64
|
-
"bg-
|
|
64
|
+
"bg-primary text-secondary ring-1 ring-secondary ring-inset hover:bg-primary_hover hover:text-secondary_hover data-loading:bg-primary_hover",
|
|
65
65
|
// Disabled styles
|
|
66
|
-
"disabled:ring-
|
|
66
|
+
"disabled:ring-disabled_subtle",
|
|
67
67
|
// Icon styles
|
|
68
|
-
"*:data-icon:text-
|
|
68
|
+
"*:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover"
|
|
69
69
|
].join(" ")
|
|
70
70
|
},
|
|
71
71
|
tertiary: {
|
|
72
72
|
root: [
|
|
73
|
-
"text-
|
|
73
|
+
"text-tertiary hover:bg-primary_hover hover:text-tertiary_hover data-loading:bg-primary_hover",
|
|
74
74
|
// Icon styles
|
|
75
|
-
"*:data-icon:text-
|
|
75
|
+
"*:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover"
|
|
76
76
|
].join(" ")
|
|
77
77
|
},
|
|
78
78
|
"link-gray": {
|
|
79
79
|
root: [
|
|
80
|
-
"justify-normal rounded p-0! text-
|
|
80
|
+
"justify-normal rounded p-0! text-tertiary hover:text-tertiary_hover",
|
|
81
81
|
// Inner text underline
|
|
82
82
|
"*:data-text:underline *:data-text:decoration-transparent *:data-text:underline-offset-2 hover:*:data-text:decoration-current",
|
|
83
83
|
// Icon styles
|
|
84
|
-
"*:data-icon:text-
|
|
84
|
+
"*:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover"
|
|
85
85
|
].join(" ")
|
|
86
86
|
},
|
|
87
87
|
"link-color": {
|
|
88
88
|
root: [
|
|
89
|
-
"justify-normal rounded p-0! text-
|
|
89
|
+
"justify-normal rounded p-0! text-brand-secondary hover:text-brand-secondary_hover",
|
|
90
90
|
// Inner text underline
|
|
91
91
|
"*:data-text:underline *:data-text:decoration-transparent *:data-text:underline-offset-2 hover:*:data-text:decoration-current",
|
|
92
92
|
// Icon styles
|
|
93
|
-
"*:data-icon:text-
|
|
93
|
+
"*:data-icon:text-fg-brand-secondary_alt hover:*:data-icon:text-fg-brand-secondary_hover"
|
|
94
94
|
].join(" ")
|
|
95
95
|
},
|
|
96
96
|
"primary-destructive": {
|
|
97
97
|
root: [
|
|
98
|
-
"bg-
|
|
98
|
+
"bg-error-solid text-white ring-1 ring-transparent ring-inset",
|
|
99
99
|
// Disabled styles
|
|
100
|
-
"disabled:bg-
|
|
100
|
+
"disabled:bg-disabled disabled:ring-disabled_subtle",
|
|
101
101
|
// Icon styles
|
|
102
|
-
"*:data-icon:text-
|
|
102
|
+
"*:data-icon:text-button-destructive-primary-icon hover:*:data-icon:text-button-destructive-primary-icon_hover"
|
|
103
103
|
].join(" ")
|
|
104
104
|
},
|
|
105
105
|
"secondary-destructive": {
|
|
106
106
|
root: [
|
|
107
|
-
"bg-
|
|
107
|
+
"bg-primary text-error-primary ring-1 ring-error_subtle ring-inset hover:bg-error-primary hover:text-error-primary_hover data-loading:bg-error-primary",
|
|
108
108
|
// Disabled styles
|
|
109
|
-
"disabled:bg-
|
|
109
|
+
"disabled:bg-primary disabled:ring-disabled_subtle",
|
|
110
110
|
// Icon styles
|
|
111
|
-
"*:data-icon:text-
|
|
111
|
+
"*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary"
|
|
112
112
|
].join(" ")
|
|
113
113
|
},
|
|
114
114
|
"tertiary-destructive": {
|
|
115
115
|
root: [
|
|
116
|
-
"text-
|
|
116
|
+
"text-error-primary outline-error hover:bg-error-primary hover:text-error-primary_hover data-loading:bg-error-primary",
|
|
117
117
|
// Icon styles
|
|
118
|
-
"*:data-icon:text-
|
|
118
|
+
"*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary"
|
|
119
119
|
].join(" ")
|
|
120
120
|
},
|
|
121
121
|
"link-destructive": {
|
|
122
122
|
root: [
|
|
123
|
-
"justify-normal rounded p-0! text-
|
|
123
|
+
"justify-normal rounded p-0! text-error-primary outline-error hover:text-error-primary_hover",
|
|
124
124
|
// Inner text underline
|
|
125
125
|
"*:data-text:underline *:data-text:decoration-transparent *:data-text:underline-offset-2 hover:*:data-text:decoration-current",
|
|
126
126
|
// Icon styles
|
|
127
|
-
"*:data-icon:text-
|
|
127
|
+
"*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary"
|
|
128
128
|
].join(" ")
|
|
129
129
|
}
|
|
130
130
|
}
|
|
131
131
|
}), z = ({
|
|
132
|
-
size:
|
|
132
|
+
size: u = "sm",
|
|
133
133
|
color: x = "primary",
|
|
134
|
-
children:
|
|
134
|
+
children: s,
|
|
135
135
|
className: f,
|
|
136
|
-
noTextPadding:
|
|
137
|
-
iconLeading:
|
|
136
|
+
noTextPadding: l,
|
|
137
|
+
iconLeading: e,
|
|
138
138
|
iconTrailing: a,
|
|
139
139
|
isDisabled: d,
|
|
140
|
-
isLoading:
|
|
141
|
-
showTextWhileLoading:
|
|
140
|
+
isLoading: r,
|
|
141
|
+
showTextWhileLoading: y,
|
|
142
142
|
childrenClassName: h = "",
|
|
143
143
|
trailingClassName: _ = "",
|
|
144
144
|
leadingClassName: w = "",
|
|
145
|
-
...
|
|
145
|
+
...o
|
|
146
146
|
}) => {
|
|
147
|
-
const
|
|
148
|
-
|
|
149
|
-
let
|
|
150
|
-
return
|
|
151
|
-
...
|
|
152
|
-
href: d ? void 0 :
|
|
147
|
+
const p = "href" in o ? o.href : void 0, k = p ? N : R, j = (e || a) && !s, m = ["link-gray", "link-color", "link-destructive"].includes(x);
|
|
148
|
+
l = m || l;
|
|
149
|
+
let c = {};
|
|
150
|
+
return p ? c = {
|
|
151
|
+
...o,
|
|
152
|
+
href: d ? void 0 : p,
|
|
153
153
|
// Since anchor elements do not support the `disabled` attribute and state,
|
|
154
154
|
// we need to specify `data-rac` and `data-disabled` in order to be able
|
|
155
155
|
// to use the `disabled:` selector in classes.
|
|
156
156
|
...d ? { "data-rac": !0, "data-disabled": !0 } : {}
|
|
157
|
-
} :
|
|
158
|
-
...
|
|
159
|
-
type:
|
|
160
|
-
isPending:
|
|
157
|
+
} : c = {
|
|
158
|
+
...o,
|
|
159
|
+
type: o.type || "button",
|
|
160
|
+
isPending: r,
|
|
161
161
|
isDisabled: d
|
|
162
162
|
}, /* @__PURE__ */ g(
|
|
163
163
|
k,
|
|
164
164
|
{
|
|
165
|
-
"data-loading":
|
|
165
|
+
"data-loading": r ? !0 : void 0,
|
|
166
166
|
"data-icon-only": j ? !0 : void 0,
|
|
167
|
-
...
|
|
167
|
+
...c,
|
|
168
168
|
className: i(
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
(
|
|
169
|
+
t.common.root,
|
|
170
|
+
t.sizes[u].root,
|
|
171
|
+
t.colors[x].root,
|
|
172
|
+
m && t.sizes[u].linkRoot,
|
|
173
|
+
(r || p && (d || r)) && "pointer-events-none",
|
|
174
174
|
// If in `loading` state, hide everything except the loading icon (and text if `showTextWhileLoading` is true).
|
|
175
|
-
|
|
175
|
+
r && (y ? "[&>*:not([data-icon=loading]):not([data-text])]:hidden" : "[&>*:not([data-icon=loading])]:invisible"),
|
|
176
176
|
f
|
|
177
177
|
),
|
|
178
178
|
children: [
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
179
|
+
b(e) && e,
|
|
180
|
+
v(e) && /* @__PURE__ */ n(e, { "data-icon": "leading", className: i(t.common.icon, w) }),
|
|
181
|
+
r && /* @__PURE__ */ g(
|
|
182
182
|
"svg",
|
|
183
183
|
{
|
|
184
184
|
fill: "none",
|
|
185
185
|
"data-icon": "loading",
|
|
186
186
|
viewBox: "0 0 20 20",
|
|
187
187
|
className: i(
|
|
188
|
-
|
|
189
|
-
!
|
|
188
|
+
t.common.icon,
|
|
189
|
+
!y && "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
|
|
190
190
|
),
|
|
191
191
|
children: [
|
|
192
192
|
/* @__PURE__ */ n("circle", { className: "stroke-current opacity-30", cx: "10", cy: "10", r: "8", fill: "none", strokeWidth: "2" }),
|
|
@@ -206,9 +206,9 @@ const r = q({
|
|
|
206
206
|
]
|
|
207
207
|
}
|
|
208
208
|
),
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
209
|
+
s && /* @__PURE__ */ n("span", { "data-text": !0, className: i("transition-inherit-all", !l && "px-0.5", h), children: s }),
|
|
210
|
+
b(a) && a,
|
|
211
|
+
v(a) && /* @__PURE__ */ n(a, { "data-icon": "trailing", className: i(t.common.icon, _) })
|
|
212
212
|
]
|
|
213
213
|
}
|
|
214
214
|
);
|
|
@@ -216,5 +216,5 @@ const r = q({
|
|
|
216
216
|
z.displayName = "Button";
|
|
217
217
|
export {
|
|
218
218
|
z as Button,
|
|
219
|
-
|
|
219
|
+
t as styles
|
|
220
220
|
};
|
|
@@ -1,28 +1,47 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
/** Description text */
|
|
7
|
-
description?: string;
|
|
8
|
-
/** Additional CSS classes */
|
|
2
|
+
import { SwitchProps as AriaSwitchProps } from 'react-aria-components';
|
|
3
|
+
interface ToggleBaseProps {
|
|
4
|
+
size?: "sm" | "md";
|
|
5
|
+
slim?: boolean;
|
|
9
6
|
className?: string;
|
|
7
|
+
isHovered?: boolean;
|
|
8
|
+
isFocusVisible?: boolean;
|
|
9
|
+
isSelected?: boolean;
|
|
10
|
+
isDisabled?: boolean;
|
|
11
|
+
disabledClasses?: string;
|
|
12
|
+
}
|
|
13
|
+
export declare const ToggleBase: ({ className, isHovered, isDisabled, isFocusVisible, isSelected, slim, size, disabledClasses, }: ToggleBaseProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export interface ToggleProps extends AriaSwitchProps {
|
|
15
|
+
/** Size variant */
|
|
16
|
+
size?: "sm" | "md";
|
|
17
|
+
/** Label text */
|
|
18
|
+
label?: string;
|
|
19
|
+
/** Description/hint text */
|
|
20
|
+
hint?: ReactNode;
|
|
21
|
+
/** Slim variant (more compact) */
|
|
22
|
+
slim?: boolean;
|
|
23
|
+
/** Additional CSS classes for disabled state */
|
|
24
|
+
disabledClasses?: string;
|
|
10
25
|
}
|
|
11
26
|
/**
|
|
12
|
-
* Toggle (Switch) component built on
|
|
27
|
+
* Toggle (Switch) component built on React Aria
|
|
13
28
|
*
|
|
14
29
|
* Features:
|
|
15
|
-
* - Accessible switch/toggle
|
|
16
|
-
* -
|
|
17
|
-
* -
|
|
30
|
+
* - Accessible switch/toggle with keyboard support
|
|
31
|
+
* - Multiple sizes (sm, md)
|
|
32
|
+
* - Slim variant for compact layouts
|
|
33
|
+
* - Label and hint support
|
|
34
|
+
* - Smooth animations and transitions
|
|
35
|
+
* - Hover and focus states
|
|
18
36
|
*
|
|
19
37
|
* @example
|
|
20
38
|
* <Toggle label="Enable notifications" />
|
|
21
|
-
* <Toggle label="Dark mode"
|
|
22
|
-
* <Toggle
|
|
39
|
+
* <Toggle label="Dark mode" hint="Use dark theme" size="md" />
|
|
40
|
+
* <Toggle isSelected={enabled} onChange={setEnabled} slim />
|
|
23
41
|
*/
|
|
24
|
-
export declare
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
42
|
+
export declare const Toggle: {
|
|
43
|
+
({ label, hint, className, size, disabledClasses, slim, ...ariaSwitchProps }: ToggleProps): import("react/jsx-runtime").JSX.Element;
|
|
44
|
+
displayName: string;
|
|
45
|
+
};
|
|
46
|
+
export {};
|
|
28
47
|
//# sourceMappingURL=toggle.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../src/primitives/toggle/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../src/primitives/toggle/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAI5E,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,UAAU,GAAI,gGASxB,eAAe,4CA6DjB,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kCAAkC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM;kFAQhB,WAAW;;CA0Db,CAAC"}
|
|
@@ -1,57 +1,137 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
"data-[state=unchecked]:bg-gray-200",
|
|
24
|
-
// Ensure toggle is vertically aligned with first line of text
|
|
25
|
-
"mt-0.5"
|
|
26
|
-
),
|
|
27
|
-
...c,
|
|
28
|
-
children: /* @__PURE__ */ e(
|
|
29
|
-
i.Thumb,
|
|
30
|
-
{
|
|
31
|
-
className: r(
|
|
32
|
-
"pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0",
|
|
33
|
-
"transition-transform",
|
|
34
|
-
"data-[state=checked]:translate-x-5",
|
|
35
|
-
"data-[state=unchecked]:translate-x-0"
|
|
36
|
-
)
|
|
37
|
-
}
|
|
38
|
-
)
|
|
1
|
+
import { jsx as i, jsxs as m, Fragment as u } from "react/jsx-runtime";
|
|
2
|
+
import { Switch as h } from "react-aria-components";
|
|
3
|
+
import { cx as o } from "../../utils/cn.js";
|
|
4
|
+
const f = ({
|
|
5
|
+
className: d,
|
|
6
|
+
isHovered: n,
|
|
7
|
+
isDisabled: e,
|
|
8
|
+
isFocusVisible: a,
|
|
9
|
+
isSelected: t,
|
|
10
|
+
slim: r,
|
|
11
|
+
size: g = "sm",
|
|
12
|
+
disabledClasses: l
|
|
13
|
+
}) => {
|
|
14
|
+
const s = {
|
|
15
|
+
default: {
|
|
16
|
+
sm: {
|
|
17
|
+
root: "h-5 w-9 p-0.5",
|
|
18
|
+
switch: o("size-4", t && "translate-x-4")
|
|
19
|
+
},
|
|
20
|
+
md: {
|
|
21
|
+
root: "h-6 w-11 p-0.5",
|
|
22
|
+
switch: o("size-5", t && "translate-x-5")
|
|
39
23
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
"
|
|
24
|
+
},
|
|
25
|
+
slim: {
|
|
26
|
+
sm: {
|
|
27
|
+
root: "h-4 w-8",
|
|
28
|
+
switch: o("size-4", t && "translate-x-4")
|
|
29
|
+
},
|
|
30
|
+
md: {
|
|
31
|
+
root: "h-5 w-10",
|
|
32
|
+
switch: o("size-5", t && "translate-x-5")
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}, p = r ? s.slim[g] : s.default[g];
|
|
36
|
+
return /* @__PURE__ */ i(
|
|
37
|
+
"div",
|
|
38
|
+
{
|
|
39
|
+
className: o(
|
|
40
|
+
"cursor-pointer rounded-full bg-tertiary outline-focus-ring transition duration-150 ease-linear",
|
|
41
|
+
t && "bg-brand-solid",
|
|
42
|
+
t && n && "bg-brand-solid_hover",
|
|
43
|
+
e && "cursor-not-allowed bg-disabled",
|
|
44
|
+
a && "outline-2 outline-offset-2",
|
|
45
|
+
r && "ring-1 ring-secondary ring-inset",
|
|
46
|
+
r && e && "bg-utility-gray-50",
|
|
47
|
+
r && t && "ring-transparent",
|
|
48
|
+
p.root,
|
|
49
|
+
d,
|
|
50
|
+
l
|
|
51
|
+
),
|
|
52
|
+
children: /* @__PURE__ */ i(
|
|
53
|
+
"div",
|
|
44
54
|
{
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
55
|
+
style: {
|
|
56
|
+
transition: "transform 0.15s ease-in-out, translate 0.15s ease-in-out, border-color 0.1s linear, background-color 0.1s linear",
|
|
57
|
+
boxShadow: "0px 4px 4px -2px rgba(64, 73, 104, 0.08), 0px 2px 12px 0px rgba(64, 73, 104, 0.06)"
|
|
58
|
+
},
|
|
59
|
+
className: o(
|
|
60
|
+
"rounded-full bg-fg-white",
|
|
61
|
+
e && "bg-toggle-button-fg_disabled",
|
|
62
|
+
r && "border border-disabled_subtle",
|
|
63
|
+
r && t && "border-toggle-slim-border_pressed",
|
|
64
|
+
r && t && n && "border-toggle-slim-border_pressed-hover",
|
|
65
|
+
p.switch
|
|
66
|
+
)
|
|
48
67
|
}
|
|
68
|
+
)
|
|
69
|
+
}
|
|
70
|
+
);
|
|
71
|
+
}, w = ({
|
|
72
|
+
label: d,
|
|
73
|
+
hint: n,
|
|
74
|
+
className: e,
|
|
75
|
+
size: a = "sm",
|
|
76
|
+
disabledClasses: t,
|
|
77
|
+
slim: r,
|
|
78
|
+
...g
|
|
79
|
+
}) => {
|
|
80
|
+
const l = {
|
|
81
|
+
sm: {
|
|
82
|
+
root: "gap-2",
|
|
83
|
+
textWrapper: "",
|
|
84
|
+
label: "text-sm font-medium",
|
|
85
|
+
hint: "text-sm"
|
|
86
|
+
},
|
|
87
|
+
md: {
|
|
88
|
+
root: "gap-3",
|
|
89
|
+
textWrapper: "gap-0.5",
|
|
90
|
+
label: "text-md font-medium",
|
|
91
|
+
hint: "text-md"
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
return /* @__PURE__ */ i(
|
|
95
|
+
h,
|
|
96
|
+
{
|
|
97
|
+
...g,
|
|
98
|
+
className: (s) => o(
|
|
99
|
+
"flex w-max items-start",
|
|
100
|
+
s.isDisabled && "cursor-not-allowed",
|
|
101
|
+
l[a].root,
|
|
102
|
+
typeof e == "function" ? e(s) : e
|
|
49
103
|
),
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
104
|
+
children: ({ isSelected: s, isDisabled: p, isFocusVisible: x, isHovered: c }) => /* @__PURE__ */ m(u, { children: [
|
|
105
|
+
/* @__PURE__ */ i(
|
|
106
|
+
f,
|
|
107
|
+
{
|
|
108
|
+
slim: r,
|
|
109
|
+
size: a,
|
|
110
|
+
isHovered: c,
|
|
111
|
+
isDisabled: p,
|
|
112
|
+
isFocusVisible: x,
|
|
113
|
+
isSelected: s,
|
|
114
|
+
className: r ? "mt-0.5" : "",
|
|
115
|
+
disabledClasses: t
|
|
116
|
+
}
|
|
117
|
+
),
|
|
118
|
+
(d || n) && /* @__PURE__ */ m("div", { className: o("flex flex-col", l[a].textWrapper), children: [
|
|
119
|
+
d && /* @__PURE__ */ i("p", { className: o("text-secondary select-none", l[a].label), children: d }),
|
|
120
|
+
n && /* @__PURE__ */ i(
|
|
121
|
+
"span",
|
|
122
|
+
{
|
|
123
|
+
className: o("text-tertiary", l[a].hint),
|
|
124
|
+
onClick: (b) => b.stopPropagation(),
|
|
125
|
+
children: n
|
|
126
|
+
}
|
|
127
|
+
)
|
|
128
|
+
] })
|
|
129
|
+
] })
|
|
130
|
+
}
|
|
131
|
+
);
|
|
132
|
+
};
|
|
133
|
+
w.displayName = "Toggle";
|
|
55
134
|
export {
|
|
56
|
-
|
|
135
|
+
w as Toggle,
|
|
136
|
+
f as ToggleBase
|
|
57
137
|
};
|