@snapcall/design-system 1.25.1 → 1.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-R6W6SKNR.mjs → chunk-7WNKULE2.mjs} +1 -1
- package/dist/{chunk-YC4ZDBIC.mjs → chunk-VBMQG5SW.mjs} +58 -38
- package/dist/{chunk-SSZ45TLL.mjs → chunk-VIB6AUT2.mjs} +4 -4
- package/dist/components/AlertDialog/index.js +7 -13
- package/dist/components/AlertDialog/index.mjs +7 -13
- package/dist/components/Badge/index.d.mts +1 -1
- package/dist/components/Badge/index.d.ts +1 -1
- package/dist/components/Badge/index.js +58 -38
- package/dist/components/Badge/index.mjs +1 -1
- package/dist/components/Button/index.js +1 -1
- package/dist/components/Button/index.mjs +1 -1
- package/dist/components/Calendar/index.js +1 -1
- package/dist/components/Calendar/index.mjs +1 -1
- package/dist/components/Carousel/index.js +1 -1
- package/dist/components/Carousel/index.mjs +1 -1
- package/dist/components/Command/index.js +4 -4
- package/dist/components/Command/index.mjs +2 -2
- package/dist/components/CreatableSelect/index.js +62 -42
- package/dist/components/CreatableSelect/index.mjs +3 -3
- package/dist/components/Dialog/index.js +28 -193
- package/dist/components/Dialog/index.mjs +10 -30
- package/dist/components/DropdownMenu/index.js +3 -3
- package/dist/components/DropdownMenu/index.mjs +3 -3
- package/dist/components/FilterButton/index.js +59 -39
- package/dist/components/FilterButton/index.mjs +2 -2
- package/dist/components/Input/index.js +1 -1
- package/dist/components/Input/index.mjs +1 -1
- package/dist/components/Pagination/index.js +1 -1
- package/dist/components/Pagination/index.mjs +1 -1
- package/dist/components/Select/index.js +3 -3
- package/dist/components/Select/index.mjs +3 -3
- package/dist/components/Sheet/index.js +1 -1
- package/dist/components/Sheet/index.mjs +1 -1
- package/dist/components/Tabs/index.js +2 -2
- package/dist/components/Tabs/index.mjs +2 -2
- package/dist/components/Textarea/index.js +3 -3
- package/dist/components/Textarea/index.mjs +3 -3
- package/dist/components/Toaster/index.js +2 -2
- package/dist/components/Toaster/index.mjs +2 -2
- package/dist/components/Toggle/index.d.mts +66 -0
- package/dist/components/Toggle/index.d.ts +66 -0
- package/dist/components/Toggle/index.js +117 -0
- package/dist/components/Toggle/index.mjs +48 -0
- package/dist/components/Tooltip/index.d.mts +2 -1
- package/dist/components/Tooltip/index.d.ts +2 -1
- package/dist/components/Tooltip/index.js +5 -2
- package/dist/components/Tooltip/index.mjs +4 -2
- package/dist/index.d.mts +65 -2
- package/dist/index.d.ts +65 -2
- package/dist/index.js +2 -0
- package/dist/index.mjs +1 -0
- package/dist/style.css +1 -1
- package/package.json +2 -2
|
@@ -1,11 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
XCloseIcon
|
|
3
3
|
} from "../../chunk-FMJFBQTF.mjs";
|
|
4
|
-
import {
|
|
5
|
-
buttonVariants,
|
|
6
|
-
iconButtonSizes
|
|
7
|
-
} from "../../chunk-R6W6SKNR.mjs";
|
|
8
|
-
import "../../chunk-N65I4EXR.mjs";
|
|
9
4
|
import {
|
|
10
5
|
__objRest,
|
|
11
6
|
__spreadProps,
|
|
@@ -26,7 +21,7 @@ var DialogOverlay = React.forwardRef((_a, ref) => {
|
|
|
26
21
|
__spreadValues({
|
|
27
22
|
ref,
|
|
28
23
|
className: cn(
|
|
29
|
-
"fixed inset-0 z-50 bg-black/25 backdrop-blur-
|
|
24
|
+
"fixed inset-0 z-50 bg-black/25 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
30
25
|
className
|
|
31
26
|
)
|
|
32
27
|
}, props)
|
|
@@ -43,7 +38,7 @@ var DialogContent = React.forwardRef(
|
|
|
43
38
|
__spreadProps(__spreadValues({
|
|
44
39
|
ref,
|
|
45
40
|
className: cn(
|
|
46
|
-
"fixed left-[50%] top-[50%] z-50
|
|
41
|
+
"fixed left-[50%] top-[50%] z-50 flex flex-col divide-y divide-gray-200 w-full max-w-[400px] max-h-[90vh] overflow-hidden translate-x-[-50%] translate-y-[-50%] border border-gray-200 bg-white shadow-sm md:w-full",
|
|
47
42
|
{
|
|
48
43
|
"top-auto bottom-0 translate-y-0 ease-[cubic-bezier(0.075,0.82,0.165,1)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:slide-in-from-bottom-[100%] data-[state=closed]:slide-out-to-bottom-[100%] rounded-t-3xl": bottomSheet
|
|
49
44
|
},
|
|
@@ -55,20 +50,10 @@ var DialogContent = React.forwardRef(
|
|
|
55
50
|
}, props), {
|
|
56
51
|
children: [
|
|
57
52
|
children,
|
|
58
|
-
showClose && /* @__PURE__ */ jsxs(
|
|
59
|
-
|
|
60
|
-
{
|
|
61
|
-
|
|
62
|
-
buttonVariants({ variant: "secondary" }),
|
|
63
|
-
iconButtonSizes({ size: "xs" }),
|
|
64
|
-
"absolute right-6 top-6"
|
|
65
|
-
),
|
|
66
|
-
children: [
|
|
67
|
-
/* @__PURE__ */ jsx(XCloseIcon, { className: "w-3 h-3" }),
|
|
68
|
-
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
|
|
69
|
-
]
|
|
70
|
-
}
|
|
71
|
-
)
|
|
53
|
+
showClose && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 flex items-center justify-center bg-gray-50 hover:bg-gray-100 rounded-lg p-2 transition-colors", children: [
|
|
54
|
+
/* @__PURE__ */ jsx(XCloseIcon, { className: "w-3 h-3" }),
|
|
55
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
|
|
56
|
+
] })
|
|
72
57
|
]
|
|
73
58
|
})
|
|
74
59
|
)
|
|
@@ -82,12 +67,7 @@ var DialogHeader = (_a) => {
|
|
|
82
67
|
} = _b, props = __objRest(_b, [
|
|
83
68
|
"className"
|
|
84
69
|
]);
|
|
85
|
-
return /* @__PURE__ */ jsx(
|
|
86
|
-
"div",
|
|
87
|
-
__spreadValues({
|
|
88
|
-
className: cn("flex flex-col space-y-1.5 text-left", className)
|
|
89
|
-
}, props)
|
|
90
|
-
);
|
|
70
|
+
return /* @__PURE__ */ jsx("div", __spreadValues({ className: cn("flex flex-col gap-1 p-4", className) }, props));
|
|
91
71
|
};
|
|
92
72
|
DialogHeader.displayName = "DialogHeader";
|
|
93
73
|
var DialogFooter = (_a) => {
|
|
@@ -100,7 +80,7 @@ var DialogFooter = (_a) => {
|
|
|
100
80
|
"div",
|
|
101
81
|
__spreadValues({
|
|
102
82
|
className: cn(
|
|
103
|
-
"flex
|
|
83
|
+
"flex items-center justify-end gap-2 p-4 bg-gray-25",
|
|
104
84
|
className
|
|
105
85
|
)
|
|
106
86
|
}, props)
|
|
@@ -113,7 +93,7 @@ var DialogTitle = React.forwardRef((_a, ref) => {
|
|
|
113
93
|
DialogPrimitive.Title,
|
|
114
94
|
__spreadValues({
|
|
115
95
|
ref,
|
|
116
|
-
className: cn("text-
|
|
96
|
+
className: cn("text-base font-medium text-black", className)
|
|
117
97
|
}, props)
|
|
118
98
|
);
|
|
119
99
|
});
|
|
@@ -124,7 +104,7 @@ var DialogDescription = React.forwardRef((_a, ref) => {
|
|
|
124
104
|
DialogPrimitive.Description,
|
|
125
105
|
__spreadValues({
|
|
126
106
|
ref,
|
|
127
|
-
className: cn("text-sm text-gray-
|
|
107
|
+
className: cn("text-sm text-gray-900", className)
|
|
128
108
|
}, props)
|
|
129
109
|
);
|
|
130
110
|
});
|
|
@@ -191,7 +191,7 @@ var DropdownMenuItemBase = ({
|
|
|
191
191
|
"div",
|
|
192
192
|
{
|
|
193
193
|
className: cn(
|
|
194
|
-
"mx-1 px-2 py-1.5 text-sm flex flex-col gap-1 text-black rounded-
|
|
194
|
+
"mx-1 px-2 py-1.5 text-sm flex flex-col gap-1 text-black rounded-lg cursor-pointer group-focus-within:bg-gray-100 group-data-disabled:cursor-not-allowed group-data-disabled:opacity-50 group-hover:bg-gray-50 group-active:bg-gray-100 group-data-[state=checked]:bg-gray-50",
|
|
195
195
|
{ "text-red-700 font-medium": destructive },
|
|
196
196
|
className
|
|
197
197
|
),
|
|
@@ -256,7 +256,7 @@ var DropdownMenuContent = import_react3.default.forwardRef(
|
|
|
256
256
|
DropdownMenuPrimitive.Content,
|
|
257
257
|
__spreadProps(__spreadValues({
|
|
258
258
|
className: cn(
|
|
259
|
-
"min-w-[144px] bg-white rounded-
|
|
259
|
+
"min-w-[144px] bg-white rounded-lg py-1 shadow-dropdown-sm border border-gray-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
260
260
|
className
|
|
261
261
|
),
|
|
262
262
|
side,
|
|
@@ -344,7 +344,7 @@ var DropdownMenuSubContent = import_react3.default.forwardRef((_a, forwardedRef)
|
|
|
344
344
|
DropdownMenuPrimitive.SubContent,
|
|
345
345
|
__spreadProps(__spreadValues({
|
|
346
346
|
className: cn(
|
|
347
|
-
"min-w-[144px] bg-white rounded-
|
|
347
|
+
"min-w-[144px] bg-white rounded-lg py-1 shadow-dropdown-sm border border-gray-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
348
348
|
className
|
|
349
349
|
),
|
|
350
350
|
sideOffset
|
|
@@ -31,7 +31,7 @@ var DropdownMenuItemBase = ({
|
|
|
31
31
|
"div",
|
|
32
32
|
{
|
|
33
33
|
className: cn(
|
|
34
|
-
"mx-1 px-2 py-1.5 text-sm flex flex-col gap-1 text-black rounded-
|
|
34
|
+
"mx-1 px-2 py-1.5 text-sm flex flex-col gap-1 text-black rounded-lg cursor-pointer group-focus-within:bg-gray-100 group-data-disabled:cursor-not-allowed group-data-disabled:opacity-50 group-hover:bg-gray-50 group-active:bg-gray-100 group-data-[state=checked]:bg-gray-50",
|
|
35
35
|
{ "text-red-700 font-medium": destructive },
|
|
36
36
|
className
|
|
37
37
|
),
|
|
@@ -96,7 +96,7 @@ var DropdownMenuContent = React.forwardRef(
|
|
|
96
96
|
DropdownMenuPrimitive.Content,
|
|
97
97
|
__spreadProps(__spreadValues({
|
|
98
98
|
className: cn(
|
|
99
|
-
"min-w-[144px] bg-white rounded-
|
|
99
|
+
"min-w-[144px] bg-white rounded-lg py-1 shadow-dropdown-sm border border-gray-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
100
100
|
className
|
|
101
101
|
),
|
|
102
102
|
side,
|
|
@@ -184,7 +184,7 @@ var DropdownMenuSubContent = React.forwardRef((_a, forwardedRef) => {
|
|
|
184
184
|
DropdownMenuPrimitive.SubContent,
|
|
185
185
|
__spreadProps(__spreadValues({
|
|
186
186
|
className: cn(
|
|
187
|
-
"min-w-[144px] bg-white rounded-
|
|
187
|
+
"min-w-[144px] bg-white rounded-lg py-1 shadow-dropdown-sm border border-gray-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
188
188
|
className
|
|
189
189
|
),
|
|
190
190
|
sideOffset
|
|
@@ -105,33 +105,33 @@ var randomPickFromArray = ({
|
|
|
105
105
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
106
106
|
var colors = {
|
|
107
107
|
gray: "text-gray-900",
|
|
108
|
-
green: "text-green-
|
|
109
|
-
red: "text-red-
|
|
110
|
-
|
|
111
|
-
blue: "text-blue-
|
|
112
|
-
crimson: "text-crimson-
|
|
113
|
-
violet: "text-violet-
|
|
114
|
-
cyan: "text-cyan-
|
|
115
|
-
teal: "text-teal-
|
|
116
|
-
brown: "text-brown-
|
|
117
|
-
orange: "text-orange-
|
|
108
|
+
green: "text-green-900",
|
|
109
|
+
red: "text-red-900",
|
|
110
|
+
amber: "text-amber-900",
|
|
111
|
+
blue: "text-blue-900",
|
|
112
|
+
crimson: "text-crimson-900",
|
|
113
|
+
violet: "text-violet-900",
|
|
114
|
+
cyan: "text-cyan-900",
|
|
115
|
+
teal: "text-teal-900",
|
|
116
|
+
brown: "text-brown-900",
|
|
117
|
+
orange: "text-orange-900"
|
|
118
118
|
};
|
|
119
119
|
var colorsArray = Object.keys(colors);
|
|
120
120
|
var badgeVariants = (0, import_cva.cva)({
|
|
121
|
-
base: "inline-flex items-center justify-center gap-1 rounded-
|
|
121
|
+
base: "inline-flex items-center justify-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold transition-colors",
|
|
122
122
|
variants: {
|
|
123
123
|
variant: {
|
|
124
124
|
default: "",
|
|
125
|
-
outline: "
|
|
125
|
+
outline: "border border-solid bg-transparent",
|
|
126
126
|
fill: ""
|
|
127
127
|
},
|
|
128
128
|
color: colors
|
|
129
129
|
},
|
|
130
130
|
compoundVariants: [
|
|
131
|
-
{ variant: "default", color: "gray", className: "bg-gray-
|
|
131
|
+
{ variant: "default", color: "gray", className: "bg-gray-100" },
|
|
132
132
|
{ variant: "default", color: "green", className: "bg-green-100" },
|
|
133
133
|
{ variant: "default", color: "red", className: "bg-red-100" },
|
|
134
|
-
{ variant: "default", color: "
|
|
134
|
+
{ variant: "default", color: "amber", className: "bg-amber-100" },
|
|
135
135
|
{ variant: "default", color: "blue", className: "bg-blue-100" },
|
|
136
136
|
{ variant: "default", color: "crimson", className: "bg-crimson-100" },
|
|
137
137
|
{ variant: "default", color: "violet", className: "bg-violet-100" },
|
|
@@ -142,88 +142,108 @@ var badgeVariants = (0, import_cva.cva)({
|
|
|
142
142
|
{
|
|
143
143
|
variant: "outline",
|
|
144
144
|
color: "gray",
|
|
145
|
-
className: "
|
|
145
|
+
className: "border-gray-200 text-black dark:bg-gray-25"
|
|
146
146
|
},
|
|
147
147
|
{
|
|
148
148
|
variant: "outline",
|
|
149
149
|
color: "green",
|
|
150
|
-
className: "
|
|
150
|
+
className: "border-green-700 text-green-700 dark:bg-green-25"
|
|
151
151
|
},
|
|
152
152
|
{
|
|
153
153
|
variant: "outline",
|
|
154
154
|
color: "red",
|
|
155
|
-
className: "
|
|
155
|
+
className: "border-red-700 text-red-700 dark:bg-red-25"
|
|
156
156
|
},
|
|
157
157
|
{
|
|
158
158
|
variant: "outline",
|
|
159
|
-
color: "
|
|
160
|
-
className: "
|
|
159
|
+
color: "amber",
|
|
160
|
+
className: "border-amber-700 text-amber-700 dark:bg-amber-25"
|
|
161
161
|
},
|
|
162
162
|
{
|
|
163
163
|
variant: "outline",
|
|
164
164
|
color: "blue",
|
|
165
|
-
className: "
|
|
165
|
+
className: "border-blue-700 text-blue-700 dark:bg-blue-25"
|
|
166
166
|
},
|
|
167
167
|
{
|
|
168
168
|
variant: "outline",
|
|
169
169
|
color: "crimson",
|
|
170
|
-
className: "
|
|
170
|
+
className: "border-crimson-700 text-crimson-700 dark:bg-crimson-25"
|
|
171
171
|
},
|
|
172
172
|
{
|
|
173
173
|
variant: "outline",
|
|
174
174
|
color: "violet",
|
|
175
|
-
className: "
|
|
175
|
+
className: "border-violet-700 text-violet-700 dark:bg-violet-25"
|
|
176
176
|
},
|
|
177
177
|
{
|
|
178
178
|
variant: "outline",
|
|
179
179
|
color: "cyan",
|
|
180
|
-
className: "
|
|
180
|
+
className: "border-cyan-700 text-cyan-700 dark:bg-cyan-25"
|
|
181
181
|
},
|
|
182
182
|
{
|
|
183
183
|
variant: "outline",
|
|
184
184
|
color: "teal",
|
|
185
|
-
className: "
|
|
185
|
+
className: "border-teal-700 text-teal-700 dark:bg-teal-25"
|
|
186
186
|
},
|
|
187
187
|
{
|
|
188
188
|
variant: "outline",
|
|
189
189
|
color: "brown",
|
|
190
|
-
className: "
|
|
190
|
+
className: "border-brown-700 text-brown-700 dark:bg-brown-25"
|
|
191
191
|
},
|
|
192
192
|
{
|
|
193
193
|
variant: "outline",
|
|
194
194
|
color: "orange",
|
|
195
|
-
className: "
|
|
195
|
+
className: "border-orange-700 text-orange-700 dark:bg-orange-25"
|
|
196
196
|
},
|
|
197
|
-
{ variant: "fill", color: "gray", className: "text-white
|
|
198
|
-
{ variant: "fill", color: "green", className: "text-white bg-green-700" },
|
|
199
|
-
{ variant: "fill", color: "red", className: "text-white bg-red-700" },
|
|
197
|
+
{ variant: "fill", color: "gray", className: "bg-black text-white" },
|
|
200
198
|
{
|
|
201
199
|
variant: "fill",
|
|
202
|
-
color: "
|
|
203
|
-
className: "text-white
|
|
200
|
+
color: "green",
|
|
201
|
+
className: "bg-green-700 text-white dark:text-black"
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
variant: "fill",
|
|
205
|
+
color: "red",
|
|
206
|
+
className: "bg-red-700 text-white dark:text-black"
|
|
207
|
+
},
|
|
208
|
+
{
|
|
209
|
+
variant: "fill",
|
|
210
|
+
color: "amber",
|
|
211
|
+
className: "bg-amber-700 text-white dark:text-black"
|
|
204
212
|
},
|
|
205
213
|
{
|
|
206
214
|
variant: "fill",
|
|
207
215
|
color: "blue",
|
|
208
|
-
className: "text-white dark:text-black
|
|
216
|
+
className: "bg-blue-700 text-white dark:text-black"
|
|
209
217
|
},
|
|
210
218
|
{
|
|
211
219
|
variant: "fill",
|
|
212
220
|
color: "crimson",
|
|
213
|
-
className: "text-white
|
|
221
|
+
className: "bg-crimson-700 text-white dark:text-black"
|
|
214
222
|
},
|
|
215
223
|
{
|
|
216
224
|
variant: "fill",
|
|
217
225
|
color: "violet",
|
|
218
|
-
className: "text-white
|
|
226
|
+
className: "bg-violet-700 text-white dark:text-black"
|
|
227
|
+
},
|
|
228
|
+
{
|
|
229
|
+
variant: "fill",
|
|
230
|
+
color: "cyan",
|
|
231
|
+
className: "bg-cyan-700 text-white dark:text-black"
|
|
232
|
+
},
|
|
233
|
+
{
|
|
234
|
+
variant: "fill",
|
|
235
|
+
color: "teal",
|
|
236
|
+
className: "bg-teal-700 text-white dark:text-black"
|
|
237
|
+
},
|
|
238
|
+
{
|
|
239
|
+
variant: "fill",
|
|
240
|
+
color: "brown",
|
|
241
|
+
className: "bg-brown-700 text-white dark:text-black"
|
|
219
242
|
},
|
|
220
|
-
{ variant: "fill", color: "cyan", className: "text-white bg-cyan-700" },
|
|
221
|
-
{ variant: "fill", color: "teal", className: "text-white bg-teal-700" },
|
|
222
|
-
{ variant: "fill", color: "brown", className: "text-white bg-brown-700" },
|
|
223
243
|
{
|
|
224
244
|
variant: "fill",
|
|
225
245
|
color: "orange",
|
|
226
|
-
className: "text-white
|
|
246
|
+
className: "bg-orange-700 text-white dark:text-black"
|
|
227
247
|
}
|
|
228
248
|
],
|
|
229
249
|
defaultVariants: {
|
|
@@ -294,7 +314,7 @@ var SpinnerIcon = (0, import_react2.forwardRef)(
|
|
|
294
314
|
// src/components/Button/Button.tsx
|
|
295
315
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
296
316
|
var buttonVariants = (0, import_cva2.cva)({
|
|
297
|
-
base: "inline-flex items-center justify-center gap-2 rounded-
|
|
317
|
+
base: "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-hidden focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
|
|
298
318
|
variants: {
|
|
299
319
|
variant: {
|
|
300
320
|
primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",
|
|
@@ -100,7 +100,7 @@ var Input = React.forwardRef(
|
|
|
100
100
|
"div",
|
|
101
101
|
{
|
|
102
102
|
className: cn(
|
|
103
|
-
"flex h-9 w-full rounded-
|
|
103
|
+
"flex h-9 w-full rounded-lg border border-gray-200 bg-transparent focus-within:outline-2 focus-within:outline-blue-300 focus-within:outline-offset-2",
|
|
104
104
|
{ "cursor-not-allowed opacity-50": isDisabled },
|
|
105
105
|
{
|
|
106
106
|
"border-red-700 focus-within:border-gray-200 focus-within:outline-red-700": !!props["data-has-error"]
|
|
@@ -33,7 +33,7 @@ var Input = React.forwardRef(
|
|
|
33
33
|
"div",
|
|
34
34
|
{
|
|
35
35
|
className: cn(
|
|
36
|
-
"flex h-9 w-full rounded-
|
|
36
|
+
"flex h-9 w-full rounded-lg border border-gray-200 bg-transparent focus-within:outline-2 focus-within:outline-blue-300 focus-within:outline-offset-2",
|
|
37
37
|
{ "cursor-not-allowed opacity-50": isDisabled },
|
|
38
38
|
{
|
|
39
39
|
"border-red-700 focus-within:border-gray-200 focus-within:outline-red-700": !!props["data-has-error"]
|
|
@@ -246,7 +246,7 @@ var SpinnerIcon = (0, import_react5.forwardRef)(
|
|
|
246
246
|
// src/components/Button/Button.tsx
|
|
247
247
|
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
248
248
|
var buttonVariants = (0, import_cva.cva)({
|
|
249
|
-
base: "inline-flex items-center justify-center gap-2 rounded-
|
|
249
|
+
base: "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-hidden focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
|
|
250
250
|
variants: {
|
|
251
251
|
variant: {
|
|
252
252
|
primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",
|
|
@@ -126,7 +126,7 @@ var SelectTrigger = React.forwardRef((_a, ref) => {
|
|
|
126
126
|
__spreadProps(__spreadValues({
|
|
127
127
|
ref,
|
|
128
128
|
className: cn(
|
|
129
|
-
"flex gap-2 h-9 w-full px-3 py-2 text-sm outline-hidden text-black placeholder:text-gray-700 rounded-
|
|
129
|
+
"flex gap-2 h-9 w-full px-3 py-2 text-sm outline-hidden text-black placeholder:text-gray-700 rounded-lg border border-gray-200 bg-white focus-within:outline-2 focus-within:outline-blue-300 focus-within:outline-offset-2px items-center justify-between",
|
|
130
130
|
{ "cursor-not-allowed opacity-50": isDisabled },
|
|
131
131
|
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
132
132
|
// when the disabled attr is set by reference
|
|
@@ -157,7 +157,7 @@ var SelectContent = React.forwardRef((_a, ref) => {
|
|
|
157
157
|
__spreadProps(__spreadValues({
|
|
158
158
|
ref,
|
|
159
159
|
className: cn(
|
|
160
|
-
"relative z-150 overflow-hidden rounded-
|
|
160
|
+
"relative z-150 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-xs data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
161
161
|
position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
|
162
162
|
className
|
|
163
163
|
),
|
|
@@ -195,7 +195,7 @@ var SelectItem = React.forwardRef((_a, ref) => {
|
|
|
195
195
|
__spreadProps(__spreadValues({
|
|
196
196
|
ref,
|
|
197
197
|
className: cn(
|
|
198
|
-
"flex w-full cursor-default select-none items-center rounded-
|
|
198
|
+
"flex w-full cursor-default select-none items-center rounded-lg py-1.5 px-2 text-black text-sm outline-hidden hover:bg-gray-50 active:bg-gray-100 focus:bg-gray-100 data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=checked]:bg-gray-50",
|
|
199
199
|
className
|
|
200
200
|
)
|
|
201
201
|
}, props), {
|
|
@@ -54,7 +54,7 @@ var SelectTrigger = React.forwardRef((_a, ref) => {
|
|
|
54
54
|
__spreadProps(__spreadValues({
|
|
55
55
|
ref,
|
|
56
56
|
className: cn(
|
|
57
|
-
"flex gap-2 h-9 w-full px-3 py-2 text-sm outline-hidden text-black placeholder:text-gray-700 rounded-
|
|
57
|
+
"flex gap-2 h-9 w-full px-3 py-2 text-sm outline-hidden text-black placeholder:text-gray-700 rounded-lg border border-gray-200 bg-white focus-within:outline-2 focus-within:outline-blue-300 focus-within:outline-offset-2px items-center justify-between",
|
|
58
58
|
{ "cursor-not-allowed opacity-50": isDisabled },
|
|
59
59
|
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
60
60
|
// when the disabled attr is set by reference
|
|
@@ -85,7 +85,7 @@ var SelectContent = React.forwardRef((_a, ref) => {
|
|
|
85
85
|
__spreadProps(__spreadValues({
|
|
86
86
|
ref,
|
|
87
87
|
className: cn(
|
|
88
|
-
"relative z-150 overflow-hidden rounded-
|
|
88
|
+
"relative z-150 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-xs data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
89
89
|
position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
|
90
90
|
className
|
|
91
91
|
),
|
|
@@ -123,7 +123,7 @@ var SelectItem = React.forwardRef((_a, ref) => {
|
|
|
123
123
|
__spreadProps(__spreadValues({
|
|
124
124
|
ref,
|
|
125
125
|
className: cn(
|
|
126
|
-
"flex w-full cursor-default select-none items-center rounded-
|
|
126
|
+
"flex w-full cursor-default select-none items-center rounded-lg py-1.5 px-2 text-black text-sm outline-hidden hover:bg-gray-50 active:bg-gray-100 focus:bg-gray-100 data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=checked]:bg-gray-50",
|
|
127
127
|
className
|
|
128
128
|
)
|
|
129
129
|
}, props), {
|
|
@@ -160,7 +160,7 @@ var SpinnerIcon = (0, import_react2.forwardRef)(
|
|
|
160
160
|
// src/components/Button/Button.tsx
|
|
161
161
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
162
162
|
var buttonVariants = (0, import_cva.cva)({
|
|
163
|
-
base: "inline-flex items-center justify-center gap-2 rounded-
|
|
163
|
+
base: "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-hidden focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
|
|
164
164
|
variants: {
|
|
165
165
|
variant: {
|
|
166
166
|
primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",
|
|
@@ -84,7 +84,7 @@ var TabsList = React.forwardRef((_a, ref) => {
|
|
|
84
84
|
__spreadValues({
|
|
85
85
|
ref,
|
|
86
86
|
className: cn(
|
|
87
|
-
"inline-flex items-center justify-center gap-
|
|
87
|
+
"inline-flex items-center justify-center gap-1 rounded-lg p-1 bg-gray-50 text-gray-700",
|
|
88
88
|
className
|
|
89
89
|
)
|
|
90
90
|
}, props)
|
|
@@ -98,7 +98,7 @@ var TabsTrigger = React.forwardRef((_a, ref) => {
|
|
|
98
98
|
__spreadValues({
|
|
99
99
|
ref,
|
|
100
100
|
className: cn(
|
|
101
|
-
"inline-flex items-center justify-center whitespace-nowrap rounded-
|
|
101
|
+
"inline-flex items-center justify-center whitespace-nowrap rounded-lg px-3 py-1 text-sm font-medium ring-offset-white transition-all",
|
|
102
102
|
"hover:bg-gray-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-700 focus-visible:ring-offset-2",
|
|
103
103
|
"data-[state=active]:bg-white data-[state=active]:text-blue-700 dark:data-[state=active]:text-black data-[state=active]:shadow-xs",
|
|
104
104
|
"disabled:pointer-events-none disabled:opacity-50",
|
|
@@ -16,7 +16,7 @@ var TabsList = React.forwardRef((_a, ref) => {
|
|
|
16
16
|
__spreadValues({
|
|
17
17
|
ref,
|
|
18
18
|
className: cn(
|
|
19
|
-
"inline-flex items-center justify-center gap-
|
|
19
|
+
"inline-flex items-center justify-center gap-1 rounded-lg p-1 bg-gray-50 text-gray-700",
|
|
20
20
|
className
|
|
21
21
|
)
|
|
22
22
|
}, props)
|
|
@@ -30,7 +30,7 @@ var TabsTrigger = React.forwardRef((_a, ref) => {
|
|
|
30
30
|
__spreadValues({
|
|
31
31
|
ref,
|
|
32
32
|
className: cn(
|
|
33
|
-
"inline-flex items-center justify-center whitespace-nowrap rounded-
|
|
33
|
+
"inline-flex items-center justify-center whitespace-nowrap rounded-lg px-3 py-1 text-sm font-medium ring-offset-white transition-all",
|
|
34
34
|
"hover:bg-gray-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-700 focus-visible:ring-offset-2",
|
|
35
35
|
"data-[state=active]:bg-white data-[state=active]:text-blue-700 dark:data-[state=active]:text-black data-[state=active]:shadow-xs",
|
|
36
36
|
"disabled:pointer-events-none disabled:opacity-50",
|
|
@@ -123,11 +123,11 @@ var Textarea = React.forwardRef(
|
|
|
123
123
|
"onMaximizeClick"
|
|
124
124
|
]);
|
|
125
125
|
const isDisabled = !!props["data-is-disabled"] || disabled;
|
|
126
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.
|
|
126
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
127
127
|
"div",
|
|
128
128
|
{
|
|
129
129
|
className: cn(
|
|
130
|
-
"flex min-h-[80px] w-full rounded-
|
|
130
|
+
"flex min-h-[80px] w-full rounded-lg border border-gray-200 bg-transparent relative focus-within:outline-2 focus-within:outline-blue-300 focus-within:outline-offset-2",
|
|
131
131
|
{ "cursor-not-allowed opacity-50": isDisabled },
|
|
132
132
|
{
|
|
133
133
|
"border-red-700 focus-within:border-gray-200 focus-within:outline-red-700": !!props["data-has-error"]
|
|
@@ -156,7 +156,7 @@ var Textarea = React.forwardRef(
|
|
|
156
156
|
)
|
|
157
157
|
]
|
|
158
158
|
}
|
|
159
|
-
)
|
|
159
|
+
);
|
|
160
160
|
}
|
|
161
161
|
);
|
|
162
162
|
Textarea.displayName = "Textarea";
|
|
@@ -58,11 +58,11 @@ var Textarea = React.forwardRef(
|
|
|
58
58
|
"onMaximizeClick"
|
|
59
59
|
]);
|
|
60
60
|
const isDisabled = !!props["data-is-disabled"] || disabled;
|
|
61
|
-
return /* @__PURE__ */
|
|
61
|
+
return /* @__PURE__ */ jsxs(
|
|
62
62
|
"div",
|
|
63
63
|
{
|
|
64
64
|
className: cn(
|
|
65
|
-
"flex min-h-[80px] w-full rounded-
|
|
65
|
+
"flex min-h-[80px] w-full rounded-lg border border-gray-200 bg-transparent relative focus-within:outline-2 focus-within:outline-blue-300 focus-within:outline-offset-2",
|
|
66
66
|
{ "cursor-not-allowed opacity-50": isDisabled },
|
|
67
67
|
{
|
|
68
68
|
"border-red-700 focus-within:border-gray-200 focus-within:outline-red-700": !!props["data-has-error"]
|
|
@@ -91,7 +91,7 @@ var Textarea = React.forwardRef(
|
|
|
91
91
|
)
|
|
92
92
|
]
|
|
93
93
|
}
|
|
94
|
-
)
|
|
94
|
+
);
|
|
95
95
|
}
|
|
96
96
|
);
|
|
97
97
|
Textarea.displayName = "Textarea";
|
|
@@ -165,7 +165,7 @@ var SpinnerIcon = (0, import_react2.forwardRef)(
|
|
|
165
165
|
// src/components/Button/Button.tsx
|
|
166
166
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
167
167
|
var buttonVariants = (0, import_cva.cva)({
|
|
168
|
-
base: "inline-flex items-center justify-center gap-2 rounded-
|
|
168
|
+
base: "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-hidden focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
|
|
169
169
|
variants: {
|
|
170
170
|
variant: {
|
|
171
171
|
primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",
|
|
@@ -286,7 +286,7 @@ var ToastViewport = React2.forwardRef((_a, ref) => {
|
|
|
286
286
|
});
|
|
287
287
|
ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
|
|
288
288
|
var toastVariants = (0, import_cva2.cva)({
|
|
289
|
-
base: "group pointer-events-auto relative flex w-full shadow-xs items-center justify-between gap-4 overflow-hidden rounded-
|
|
289
|
+
base: "group pointer-events-auto relative flex w-full shadow-xs items-center justify-between gap-4 overflow-hidden rounded-lg px-4 py-2 transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:fade-out data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full",
|
|
290
290
|
variants: {
|
|
291
291
|
variant: {
|
|
292
292
|
default: "bg-gray-100 text-black",
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
} from "../../chunk-FMJFBQTF.mjs";
|
|
4
4
|
import {
|
|
5
5
|
Button
|
|
6
|
-
} from "../../chunk-
|
|
6
|
+
} from "../../chunk-7WNKULE2.mjs";
|
|
7
7
|
import "../../chunk-N65I4EXR.mjs";
|
|
8
8
|
import {
|
|
9
9
|
__objRest,
|
|
@@ -33,7 +33,7 @@ var ToastViewport = React.forwardRef((_a, ref) => {
|
|
|
33
33
|
});
|
|
34
34
|
ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
|
|
35
35
|
var toastVariants = cva({
|
|
36
|
-
base: "group pointer-events-auto relative flex w-full shadow-xs items-center justify-between gap-4 overflow-hidden rounded-
|
|
36
|
+
base: "group pointer-events-auto relative flex w-full shadow-xs items-center justify-between gap-4 overflow-hidden rounded-lg px-4 py-2 transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:fade-out data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full",
|
|
37
37
|
variants: {
|
|
38
38
|
variant: {
|
|
39
39
|
default: "bg-gray-100 text-black",
|