@sofya-ds/react 1.1.13 → 1.1.15
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.cjs +1101 -1195
- package/dist/index.css +1 -1
- package/dist/index.d.cts +86 -62
- package/dist/index.d.ts +86 -62
- package/dist/index.js +1156 -1208
- package/package.json +3 -2
package/dist/index.js
CHANGED
|
@@ -105,110 +105,149 @@ import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
|
105
105
|
import * as React2 from "react";
|
|
106
106
|
|
|
107
107
|
// src/components/icon-data.ts
|
|
108
|
-
|
|
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
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
108
|
+
import {
|
|
109
|
+
IconAdjustmentsHorizontalFilled,
|
|
110
|
+
IconArrowUp,
|
|
111
|
+
IconArchive,
|
|
112
|
+
IconBuildingHospital,
|
|
113
|
+
IconBooks,
|
|
114
|
+
IconBulb,
|
|
115
|
+
IconChartBar,
|
|
116
|
+
IconCheck,
|
|
117
|
+
IconChecklist,
|
|
118
|
+
IconChevronLeft,
|
|
119
|
+
IconChevronDown,
|
|
120
|
+
IconChevronUp,
|
|
121
|
+
IconFile,
|
|
122
|
+
IconFolders,
|
|
123
|
+
IconFolder,
|
|
124
|
+
IconHelpCircle,
|
|
125
|
+
IconLanguage,
|
|
126
|
+
IconMapPin,
|
|
127
|
+
IconMessages,
|
|
128
|
+
IconMicrophone,
|
|
129
|
+
IconPencil,
|
|
130
|
+
IconPlus,
|
|
131
|
+
IconSchool,
|
|
132
|
+
IconSearch,
|
|
133
|
+
IconSparkles,
|
|
134
|
+
IconUser,
|
|
135
|
+
IconUserFilled,
|
|
136
|
+
IconUserCircle,
|
|
137
|
+
IconUserSearch,
|
|
138
|
+
IconUsers,
|
|
139
|
+
IconUsersGroup,
|
|
140
|
+
IconTrash,
|
|
141
|
+
IconTrashFilled,
|
|
142
|
+
IconTrashOff,
|
|
143
|
+
IconTrashX,
|
|
144
|
+
IconChevronRight,
|
|
145
|
+
IconX
|
|
146
|
+
} from "@tabler/icons-react";
|
|
147
|
+
var tablerIconRegistry = {
|
|
148
|
+
IconAdjustmentsHorizontalFilled,
|
|
149
|
+
IconArrowUp,
|
|
150
|
+
IconArchive,
|
|
151
|
+
IconBuildingHospital,
|
|
152
|
+
IconBooks,
|
|
153
|
+
IconBulb,
|
|
154
|
+
IconChartBar,
|
|
155
|
+
IconCheck,
|
|
156
|
+
IconChecklist,
|
|
157
|
+
IconChevronLeft,
|
|
158
|
+
IconChevronDown,
|
|
159
|
+
IconChevronUp,
|
|
160
|
+
IconFile,
|
|
161
|
+
IconFolders,
|
|
162
|
+
IconFolder,
|
|
163
|
+
IconHelpCircle,
|
|
164
|
+
IconLanguage,
|
|
165
|
+
IconMapPin,
|
|
166
|
+
IconMessages,
|
|
167
|
+
IconMicrophone,
|
|
168
|
+
IconPencil,
|
|
169
|
+
IconPlus,
|
|
170
|
+
IconSchool,
|
|
171
|
+
IconSearch,
|
|
172
|
+
IconSparkles,
|
|
173
|
+
IconUser,
|
|
174
|
+
IconUserFilled,
|
|
175
|
+
IconUserCircle,
|
|
176
|
+
IconUserSearch,
|
|
177
|
+
IconUsers,
|
|
178
|
+
IconUsersGroup,
|
|
179
|
+
IconTrash,
|
|
180
|
+
IconTrashFilled,
|
|
181
|
+
IconTrashOff,
|
|
182
|
+
IconTrashX,
|
|
183
|
+
IconChevronRight,
|
|
184
|
+
IconX
|
|
161
185
|
};
|
|
162
|
-
var
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
"
|
|
176
|
-
"
|
|
177
|
-
"
|
|
178
|
-
"
|
|
179
|
-
"
|
|
180
|
-
"
|
|
181
|
-
"
|
|
182
|
-
"
|
|
183
|
-
"
|
|
184
|
-
"
|
|
185
|
-
"
|
|
186
|
-
"
|
|
187
|
-
"
|
|
188
|
-
"
|
|
189
|
-
"
|
|
190
|
-
"
|
|
191
|
-
"
|
|
192
|
-
"
|
|
193
|
-
"
|
|
194
|
-
"
|
|
195
|
-
"
|
|
196
|
-
"
|
|
197
|
-
"
|
|
198
|
-
"
|
|
199
|
-
"
|
|
200
|
-
"
|
|
186
|
+
var tablerIconNames = Object.keys(tablerIconRegistry).sort(
|
|
187
|
+
(left, right) => left.localeCompare(right)
|
|
188
|
+
);
|
|
189
|
+
function resolveTablerIcon(name) {
|
|
190
|
+
const candidate = tablerIconRegistry[name];
|
|
191
|
+
if (!candidate) {
|
|
192
|
+
throw new Error(
|
|
193
|
+
`Icon could not resolve Tabler icon \`${name}\`. Import it and append it to tablerIconRegistry before using it.`
|
|
194
|
+
);
|
|
195
|
+
}
|
|
196
|
+
return candidate;
|
|
197
|
+
}
|
|
198
|
+
var legacyIconToTablerNameMap = {
|
|
199
|
+
"adjustments-horizontal-filled": "IconAdjustmentsHorizontalFilled",
|
|
200
|
+
"books": "IconBooks",
|
|
201
|
+
"organization": "IconBuildingHospital",
|
|
202
|
+
"locations": "IconMapPin",
|
|
203
|
+
"people": "IconUsers",
|
|
204
|
+
"terminologies": "IconLanguage",
|
|
205
|
+
"guidelines": "IconChecklist",
|
|
206
|
+
"logs": "IconChartBar",
|
|
207
|
+
"profile": "IconUserSearch",
|
|
208
|
+
"experience": "IconSchool",
|
|
209
|
+
"voice": "IconMicrophone",
|
|
210
|
+
"plus": "IconPlus",
|
|
211
|
+
"check": "IconCheck",
|
|
212
|
+
"caret-down": "IconChevronDown",
|
|
213
|
+
"lightbulb": "IconBulb",
|
|
214
|
+
"chats": "IconMessages",
|
|
215
|
+
"file": "IconFile",
|
|
216
|
+
"folders": "IconFolders",
|
|
217
|
+
"sparkle": "IconSparkles",
|
|
218
|
+
"x": "IconX",
|
|
219
|
+
"pencil-simple-line": "IconPencil",
|
|
220
|
+
"search": "IconSearch",
|
|
221
|
+
"arrow-up": "IconArrowUp",
|
|
222
|
+
"question": "IconHelpCircle",
|
|
223
|
+
"user-filled": "IconUserFilled",
|
|
224
|
+
"caret-up": "IconChevronUp",
|
|
225
|
+
"caret-left": "IconChevronLeft",
|
|
226
|
+
"caret-right": "IconChevronRight",
|
|
227
|
+
"users-group": "IconUsersGroup",
|
|
228
|
+
"archive": "IconArchive",
|
|
229
|
+
"folder": "IconFolder",
|
|
230
|
+
"trash": "IconTrash",
|
|
231
|
+
"trash-filled": "IconTrashFilled",
|
|
232
|
+
"trash-off": "IconTrashOff",
|
|
233
|
+
"trash-x": "IconTrashX",
|
|
234
|
+
"delete": "IconTrash",
|
|
235
|
+
"remove": "IconTrashX",
|
|
236
|
+
"lixeira": "IconTrash"
|
|
201
237
|
};
|
|
238
|
+
var iconNames = Object.keys(legacyIconToTablerNameMap);
|
|
202
239
|
var iconRegistry = Object.fromEntries(
|
|
203
|
-
Object.entries(
|
|
204
|
-
|
|
205
|
-
|
|
240
|
+
Object.entries(legacyIconToTablerNameMap).map(([name, tablerName]) => [
|
|
241
|
+
name,
|
|
242
|
+
resolveTablerIcon(tablerName)
|
|
206
243
|
])
|
|
207
244
|
);
|
|
208
|
-
var
|
|
245
|
+
var iconNameMap = Object.fromEntries(
|
|
246
|
+
iconNames.map((name) => [name, name])
|
|
247
|
+
);
|
|
209
248
|
|
|
210
249
|
// src/components/icon.tsx
|
|
211
|
-
import { jsx as jsx2
|
|
250
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
212
251
|
var iconSizeOptions = ["xs", "sm", "md", "lg", "xl"];
|
|
213
252
|
var iconColorOptions = [
|
|
214
253
|
"current",
|
|
@@ -246,7 +285,7 @@ var iconColorOptions = [
|
|
|
246
285
|
"agent-mint",
|
|
247
286
|
"agent-green"
|
|
248
287
|
];
|
|
249
|
-
var
|
|
288
|
+
var iconSizeMap = {
|
|
250
289
|
xs: 12,
|
|
251
290
|
sm: 16,
|
|
252
291
|
md: 20,
|
|
@@ -289,7 +328,7 @@ var iconColorScale = {
|
|
|
289
328
|
"agent-green": "var(--sofya-agent-green)"
|
|
290
329
|
};
|
|
291
330
|
function resolveIconSize(size) {
|
|
292
|
-
return typeof size === "number" ? size :
|
|
331
|
+
return typeof size === "number" ? size : iconSizeMap[size];
|
|
293
332
|
}
|
|
294
333
|
function resolveIconColor(color) {
|
|
295
334
|
if (!color || color === "current") {
|
|
@@ -297,55 +336,43 @@ function resolveIconColor(color) {
|
|
|
297
336
|
}
|
|
298
337
|
return iconColorScale[color];
|
|
299
338
|
}
|
|
300
|
-
var Icon = React2.forwardRef(function Icon2({
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
}
|
|
310
|
-
const
|
|
311
|
-
const
|
|
339
|
+
var Icon = React2.forwardRef(function Icon2(incomingProps, ref) {
|
|
340
|
+
const {
|
|
341
|
+
decorative,
|
|
342
|
+
size = "md",
|
|
343
|
+
color = "current",
|
|
344
|
+
title,
|
|
345
|
+
strokeWidth = 2,
|
|
346
|
+
className,
|
|
347
|
+
style
|
|
348
|
+
} = incomingProps;
|
|
349
|
+
const IconComponent = iconRegistry[incomingProps.name];
|
|
350
|
+
const {
|
|
351
|
+
decorative: _decorative,
|
|
352
|
+
color: _color,
|
|
353
|
+
name: _name,
|
|
354
|
+
size: _size,
|
|
355
|
+
strokeWidth: _strokeWidth,
|
|
356
|
+
title: _title,
|
|
357
|
+
...props
|
|
358
|
+
} = incomingProps;
|
|
312
359
|
const dimension = resolveIconSize(size);
|
|
313
360
|
const resolvedColor = resolveIconColor(color);
|
|
314
361
|
const resolvedStyle = resolvedColor ? { ...style, color: resolvedColor } : style;
|
|
315
|
-
const
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
"svg",
|
|
362
|
+
const isDecorative = decorative ?? !title;
|
|
363
|
+
return /* @__PURE__ */ jsx2(
|
|
364
|
+
IconComponent,
|
|
319
365
|
{
|
|
320
366
|
ref,
|
|
321
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
322
|
-
viewBox: icon.viewBox,
|
|
323
367
|
className: cn("inline-block shrink-0 align-middle", className),
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
"aria-hidden": title ? void 0 : true,
|
|
327
|
-
"aria-labelledby": title ? titleId : void 0,
|
|
368
|
+
role: isDecorative ? void 0 : "img",
|
|
369
|
+
"aria-hidden": isDecorative ? true : void 0,
|
|
328
370
|
focusable: "false",
|
|
329
371
|
...props,
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
title ? /* @__PURE__ */ jsx2("title", { id: titleId, children: title }) : null,
|
|
335
|
-
fillPath ? /* @__PURE__ */ jsx2("path", { d: fillPath, fill: "currentColor" }) : null,
|
|
336
|
-
strokePaths?.map((path, index) => /* @__PURE__ */ jsx2(
|
|
337
|
-
"path",
|
|
338
|
-
{
|
|
339
|
-
d: path.d,
|
|
340
|
-
fill: "none",
|
|
341
|
-
stroke: "currentColor",
|
|
342
|
-
strokeWidth: path.strokeWidth ?? strokeWidth,
|
|
343
|
-
strokeLinecap: path.strokeLinecap ?? "round",
|
|
344
|
-
strokeLinejoin: "round"
|
|
345
|
-
},
|
|
346
|
-
`${name}-${index}`
|
|
347
|
-
))
|
|
348
|
-
]
|
|
372
|
+
size: dimension,
|
|
373
|
+
title,
|
|
374
|
+
stroke: strokeWidth,
|
|
375
|
+
style: resolvedStyle
|
|
349
376
|
}
|
|
350
377
|
);
|
|
351
378
|
});
|
|
@@ -566,7 +593,7 @@ function renderTextContent(children, { as, className, size = "body", style, vari
|
|
|
566
593
|
}
|
|
567
594
|
|
|
568
595
|
// src/components/accordion.tsx
|
|
569
|
-
import { jsx as jsx4, jsxs
|
|
596
|
+
import { jsx as jsx4, jsxs } from "react/jsx-runtime";
|
|
570
597
|
var Accordion = AccordionPrimitive.Root;
|
|
571
598
|
var AccordionItem = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
|
|
572
599
|
AccordionPrimitive.Item,
|
|
@@ -580,7 +607,7 @@ var AccordionItem = React4.forwardRef(({ className, ...props }, ref) => /* @__PU
|
|
|
580
607
|
}
|
|
581
608
|
));
|
|
582
609
|
AccordionItem.displayName = AccordionPrimitive.Item.displayName;
|
|
583
|
-
var AccordionTrigger = React4.forwardRef(({ className, children, indicator, ...props }, ref) => /* @__PURE__ */ jsx4(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */
|
|
610
|
+
var AccordionTrigger = React4.forwardRef(({ className, children, indicator, ...props }, ref) => /* @__PURE__ */ jsx4(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
|
|
584
611
|
AccordionPrimitive.Trigger,
|
|
585
612
|
{
|
|
586
613
|
ref,
|
|
@@ -633,7 +660,7 @@ AccordionContent.displayName = AccordionPrimitive.Content.displayName;
|
|
|
633
660
|
// src/components/alert.tsx
|
|
634
661
|
import * as React5 from "react";
|
|
635
662
|
import { cva as cva2 } from "class-variance-authority";
|
|
636
|
-
import { jsx as jsx5, jsxs as
|
|
663
|
+
import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
637
664
|
var alertToneOptions = [
|
|
638
665
|
"default",
|
|
639
666
|
"info",
|
|
@@ -683,7 +710,7 @@ var Alert = React5.forwardRef(function Alert2({
|
|
|
683
710
|
const resolvedRole = role ?? (resolvedTone === "warning" || resolvedTone === "destructive" ? "alert" : "status");
|
|
684
711
|
const toneIconName = resolvedTone !== "default" ? toneIconMap[resolvedTone] : void 0;
|
|
685
712
|
const resolvedIcon = icon ?? (showToneIcon && toneIconName ? /* @__PURE__ */ jsx5(Icon, { name: toneIconName, size: 16, "aria-hidden": "true" }) : null);
|
|
686
|
-
return /* @__PURE__ */
|
|
713
|
+
return /* @__PURE__ */ jsxs2(
|
|
687
714
|
"div",
|
|
688
715
|
{
|
|
689
716
|
ref,
|
|
@@ -814,10 +841,10 @@ function Badge({ className, variant, alert, pillTone, ...props }) {
|
|
|
814
841
|
}
|
|
815
842
|
|
|
816
843
|
// src/components/button.tsx
|
|
817
|
-
import * as
|
|
844
|
+
import * as React8 from "react";
|
|
845
|
+
import { IconLoader2 } from "@tabler/icons-react";
|
|
818
846
|
import { Slot } from "@radix-ui/react-slot";
|
|
819
847
|
import { cva as cva4 } from "class-variance-authority";
|
|
820
|
-
import { motion, useReducedMotion } from "motion/react";
|
|
821
848
|
|
|
822
849
|
// src/components/button-language-flags.ts
|
|
823
850
|
function createFlagDataUri(svg) {
|
|
@@ -941,8 +968,271 @@ var dropdownLanguageFlagSrc = {
|
|
|
941
968
|
`)
|
|
942
969
|
};
|
|
943
970
|
|
|
971
|
+
// src/components/button-ripple.tsx
|
|
972
|
+
import * as React6 from "react";
|
|
973
|
+
import { motion, useReducedMotion } from "motion/react";
|
|
974
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
975
|
+
var MAX_ACTIVE_RIPPLES = 3;
|
|
976
|
+
var buttonRippleVariantClasses = {
|
|
977
|
+
default: "bg-[hsl(var(--sofya-primary-foreground)/0.82)] mix-blend-screen",
|
|
978
|
+
gradient: "bg-[hsl(var(--sofya-primary-foreground)/0.8)] mix-blend-screen",
|
|
979
|
+
dropdown: "bg-[hsl(var(--sofya-primary)/0.36)]",
|
|
980
|
+
icon: "bg-[hsl(var(--sofya-primary)/0.34)]",
|
|
981
|
+
language: "bg-[hsl(var(--sofya-background)/0.76)] mix-blend-screen",
|
|
982
|
+
secondary: "bg-[hsl(var(--sofya-primary)/0.30)]",
|
|
983
|
+
outline: "bg-[hsl(var(--sofya-primary)/0.32)]",
|
|
984
|
+
ghost: "bg-[hsl(var(--sofya-primary)/0.28)]",
|
|
985
|
+
destructive: "bg-[hsl(var(--sofya-destructive-foreground)/0.78)] mix-blend-screen"
|
|
986
|
+
};
|
|
987
|
+
var buttonRippleBaseSize = {
|
|
988
|
+
default: 20,
|
|
989
|
+
sm: 18,
|
|
990
|
+
lg: 22,
|
|
991
|
+
icon: 18
|
|
992
|
+
};
|
|
993
|
+
function useButtonRippleState({
|
|
994
|
+
disabled,
|
|
995
|
+
onClick,
|
|
996
|
+
onPointerDown,
|
|
997
|
+
size,
|
|
998
|
+
variant
|
|
999
|
+
}) {
|
|
1000
|
+
const prefersReducedMotion = Boolean(useReducedMotion());
|
|
1001
|
+
const [ripples, setRipples] = React6.useState([]);
|
|
1002
|
+
const rippleIdRef = React6.useRef(0);
|
|
1003
|
+
const lastRippleAtRef = React6.useRef(0);
|
|
1004
|
+
const handleRippleComplete = React6.useCallback((rippleId) => {
|
|
1005
|
+
setRipples(
|
|
1006
|
+
(currentRipples) => currentRipples.filter((currentRipple) => currentRipple.id !== rippleId)
|
|
1007
|
+
);
|
|
1008
|
+
}, []);
|
|
1009
|
+
const createRipple = React6.useCallback(
|
|
1010
|
+
(currentTarget, clientX, clientY) => {
|
|
1011
|
+
const now = performance.now();
|
|
1012
|
+
if (now - lastRippleAtRef.current < 48) {
|
|
1013
|
+
return;
|
|
1014
|
+
}
|
|
1015
|
+
lastRippleAtRef.current = now;
|
|
1016
|
+
const rect = currentTarget.getBoundingClientRect();
|
|
1017
|
+
const hasPointerPosition = clientX !== void 0 && clientY !== void 0;
|
|
1018
|
+
const x = hasPointerPosition ? clientX - rect.left : rect.width / 2;
|
|
1019
|
+
const y = hasPointerPosition ? clientY - rect.top : rect.height / 2;
|
|
1020
|
+
const radius = Math.max(
|
|
1021
|
+
Math.hypot(x, y),
|
|
1022
|
+
Math.hypot(rect.width - x, y),
|
|
1023
|
+
Math.hypot(x, rect.height - y),
|
|
1024
|
+
Math.hypot(rect.width - x, rect.height - y)
|
|
1025
|
+
);
|
|
1026
|
+
const baseSize = buttonRippleBaseSize[size];
|
|
1027
|
+
const finalDiameter = Math.max(
|
|
1028
|
+
radius * 2 + 24,
|
|
1029
|
+
Math.max(rect.width, rect.height) + 18
|
|
1030
|
+
);
|
|
1031
|
+
setRipples((currentRipples) => {
|
|
1032
|
+
const nextRipple = {
|
|
1033
|
+
id: rippleIdRef.current++,
|
|
1034
|
+
scale: finalDiameter / baseSize,
|
|
1035
|
+
size: baseSize,
|
|
1036
|
+
x: x - baseSize / 2,
|
|
1037
|
+
y: y - baseSize / 2
|
|
1038
|
+
};
|
|
1039
|
+
const nextRipples = [...currentRipples, nextRipple];
|
|
1040
|
+
if (nextRipples.length > MAX_ACTIVE_RIPPLES) {
|
|
1041
|
+
return nextRipples.slice(nextRipples.length - MAX_ACTIVE_RIPPLES);
|
|
1042
|
+
}
|
|
1043
|
+
return nextRipples;
|
|
1044
|
+
});
|
|
1045
|
+
},
|
|
1046
|
+
[size]
|
|
1047
|
+
);
|
|
1048
|
+
const handlePointerDown = React6.useCallback(
|
|
1049
|
+
(event) => {
|
|
1050
|
+
onPointerDown?.(event);
|
|
1051
|
+
if (event.defaultPrevented || disabled) {
|
|
1052
|
+
return;
|
|
1053
|
+
}
|
|
1054
|
+
if (prefersReducedMotion) {
|
|
1055
|
+
return;
|
|
1056
|
+
}
|
|
1057
|
+
if (event.button === 0) {
|
|
1058
|
+
createRipple(
|
|
1059
|
+
event.currentTarget,
|
|
1060
|
+
event.clientX,
|
|
1061
|
+
event.clientY
|
|
1062
|
+
);
|
|
1063
|
+
}
|
|
1064
|
+
},
|
|
1065
|
+
[createRipple, disabled, onPointerDown, prefersReducedMotion]
|
|
1066
|
+
);
|
|
1067
|
+
const handleClick = React6.useCallback(
|
|
1068
|
+
(event) => {
|
|
1069
|
+
if (!disabled && !prefersReducedMotion && event.detail === 0) {
|
|
1070
|
+
createRipple(event.currentTarget);
|
|
1071
|
+
}
|
|
1072
|
+
onClick?.(event);
|
|
1073
|
+
},
|
|
1074
|
+
[createRipple, disabled, onClick, prefersReducedMotion]
|
|
1075
|
+
);
|
|
1076
|
+
return {
|
|
1077
|
+
handleClick,
|
|
1078
|
+
handlePointerDown,
|
|
1079
|
+
handleRippleComplete,
|
|
1080
|
+
prefersReducedMotion,
|
|
1081
|
+
rippleClassName: buttonRippleVariantClasses[variant],
|
|
1082
|
+
ripples
|
|
1083
|
+
};
|
|
1084
|
+
}
|
|
1085
|
+
function ButtonRippleLayer({
|
|
1086
|
+
onAnimationComplete,
|
|
1087
|
+
prefersReducedMotion,
|
|
1088
|
+
rippleClassName,
|
|
1089
|
+
ripples
|
|
1090
|
+
}) {
|
|
1091
|
+
if (ripples.length === 0) {
|
|
1092
|
+
return null;
|
|
1093
|
+
}
|
|
1094
|
+
return /* @__PURE__ */ jsx7(
|
|
1095
|
+
"span",
|
|
1096
|
+
{
|
|
1097
|
+
"aria-hidden": "true",
|
|
1098
|
+
className: "pointer-events-none absolute inset-0 z-[1] overflow-hidden rounded-[inherit]",
|
|
1099
|
+
children: ripples.map((ripple) => /* @__PURE__ */ jsx7(
|
|
1100
|
+
motion.span,
|
|
1101
|
+
{
|
|
1102
|
+
className: cn(
|
|
1103
|
+
"absolute rounded-full will-change-transform transform-gpu",
|
|
1104
|
+
rippleClassName
|
|
1105
|
+
),
|
|
1106
|
+
initial: prefersReducedMotion ? { opacity: 0.32, scale: 0.72 } : { opacity: 0.56, scale: 0 },
|
|
1107
|
+
animate: prefersReducedMotion ? { opacity: 0, scale: 1.02 } : { opacity: [0.56, 0.26, 0], scale: ripple.scale },
|
|
1108
|
+
transition: prefersReducedMotion ? { duration: 0.2, ease: "linear" } : {
|
|
1109
|
+
duration: 0.62,
|
|
1110
|
+
times: [0, 0.35, 1],
|
|
1111
|
+
ease: [0.16, 1, 0.3, 1]
|
|
1112
|
+
},
|
|
1113
|
+
style: {
|
|
1114
|
+
height: ripple.size,
|
|
1115
|
+
left: ripple.x,
|
|
1116
|
+
top: ripple.y,
|
|
1117
|
+
transformOrigin: "center center",
|
|
1118
|
+
width: ripple.size
|
|
1119
|
+
},
|
|
1120
|
+
onAnimationComplete: () => {
|
|
1121
|
+
onAnimationComplete(ripple.id);
|
|
1122
|
+
}
|
|
1123
|
+
},
|
|
1124
|
+
ripple.id
|
|
1125
|
+
))
|
|
1126
|
+
}
|
|
1127
|
+
);
|
|
1128
|
+
}
|
|
1129
|
+
|
|
1130
|
+
// src/components/button-loading-state.ts
|
|
1131
|
+
import * as React7 from "react";
|
|
1132
|
+
var BUTTON_SEQUENCE_MS = 250;
|
|
1133
|
+
function useButtonLoadingState({
|
|
1134
|
+
buttonRef,
|
|
1135
|
+
children,
|
|
1136
|
+
leftIcon,
|
|
1137
|
+
loading,
|
|
1138
|
+
rightIcon
|
|
1139
|
+
}) {
|
|
1140
|
+
const expandedWidthRef = React7.useRef(void 0);
|
|
1141
|
+
const previousLoadingRef = React7.useRef(loading);
|
|
1142
|
+
const timeoutsRef = React7.useRef([]);
|
|
1143
|
+
const frameRef = React7.useRef(null);
|
|
1144
|
+
const [animatedWidth, setAnimatedWidth] = React7.useState(void 0);
|
|
1145
|
+
const [loadingPhase, setLoadingPhase] = React7.useState(
|
|
1146
|
+
loading ? "loading" : "idle"
|
|
1147
|
+
);
|
|
1148
|
+
const clearAnimationTimers = React7.useCallback(() => {
|
|
1149
|
+
for (const timeoutId of timeoutsRef.current) {
|
|
1150
|
+
window.clearTimeout(timeoutId);
|
|
1151
|
+
}
|
|
1152
|
+
timeoutsRef.current = [];
|
|
1153
|
+
if (frameRef.current !== null) {
|
|
1154
|
+
window.cancelAnimationFrame(frameRef.current);
|
|
1155
|
+
frameRef.current = null;
|
|
1156
|
+
}
|
|
1157
|
+
}, []);
|
|
1158
|
+
React7.useLayoutEffect(() => {
|
|
1159
|
+
const element = buttonRef.current;
|
|
1160
|
+
if (element && loadingPhase === "idle" && !loading) {
|
|
1161
|
+
expandedWidthRef.current = element.offsetWidth;
|
|
1162
|
+
}
|
|
1163
|
+
if (element && loadingPhase === "loading" && animatedWidth === void 0) {
|
|
1164
|
+
setAnimatedWidth(element.offsetHeight);
|
|
1165
|
+
}
|
|
1166
|
+
}, [animatedWidth, buttonRef, loading, loadingPhase, children, leftIcon, rightIcon]);
|
|
1167
|
+
React7.useEffect(() => {
|
|
1168
|
+
return () => {
|
|
1169
|
+
clearAnimationTimers();
|
|
1170
|
+
};
|
|
1171
|
+
}, [clearAnimationTimers]);
|
|
1172
|
+
React7.useEffect(() => {
|
|
1173
|
+
const element = buttonRef.current;
|
|
1174
|
+
if (!element) {
|
|
1175
|
+
return;
|
|
1176
|
+
}
|
|
1177
|
+
const previousLoading = previousLoadingRef.current;
|
|
1178
|
+
previousLoadingRef.current = loading;
|
|
1179
|
+
if (previousLoading === loading) {
|
|
1180
|
+
return;
|
|
1181
|
+
}
|
|
1182
|
+
clearAnimationTimers();
|
|
1183
|
+
if (loading) {
|
|
1184
|
+
const currentWidth2 = element.offsetWidth;
|
|
1185
|
+
const collapsedWidth = element.offsetHeight;
|
|
1186
|
+
expandedWidthRef.current = currentWidth2;
|
|
1187
|
+
setAnimatedWidth(currentWidth2);
|
|
1188
|
+
setLoadingPhase("hiding-content");
|
|
1189
|
+
timeoutsRef.current.push(
|
|
1190
|
+
window.setTimeout(() => {
|
|
1191
|
+
setLoadingPhase("collapsing");
|
|
1192
|
+
setAnimatedWidth(collapsedWidth);
|
|
1193
|
+
}, BUTTON_SEQUENCE_MS)
|
|
1194
|
+
);
|
|
1195
|
+
timeoutsRef.current.push(
|
|
1196
|
+
window.setTimeout(() => {
|
|
1197
|
+
setLoadingPhase("loading");
|
|
1198
|
+
}, BUTTON_SEQUENCE_MS * 2)
|
|
1199
|
+
);
|
|
1200
|
+
return;
|
|
1201
|
+
}
|
|
1202
|
+
const currentWidth = element.offsetWidth;
|
|
1203
|
+
const expandedWidth = expandedWidthRef.current ?? Math.max(element.scrollWidth, currentWidth);
|
|
1204
|
+
setAnimatedWidth(currentWidth);
|
|
1205
|
+
setLoadingPhase("hiding-spinner");
|
|
1206
|
+
timeoutsRef.current.push(
|
|
1207
|
+
window.setTimeout(() => {
|
|
1208
|
+
setLoadingPhase("expanding");
|
|
1209
|
+
frameRef.current = window.requestAnimationFrame(() => {
|
|
1210
|
+
frameRef.current = window.requestAnimationFrame(() => {
|
|
1211
|
+
setAnimatedWidth(expandedWidth);
|
|
1212
|
+
});
|
|
1213
|
+
});
|
|
1214
|
+
}, BUTTON_SEQUENCE_MS)
|
|
1215
|
+
);
|
|
1216
|
+
timeoutsRef.current.push(
|
|
1217
|
+
window.setTimeout(() => {
|
|
1218
|
+
setLoadingPhase("revealing-content");
|
|
1219
|
+
}, BUTTON_SEQUENCE_MS * 2)
|
|
1220
|
+
);
|
|
1221
|
+
timeoutsRef.current.push(
|
|
1222
|
+
window.setTimeout(() => {
|
|
1223
|
+
setLoadingPhase("idle");
|
|
1224
|
+
setAnimatedWidth(void 0);
|
|
1225
|
+
}, BUTTON_SEQUENCE_MS * 3)
|
|
1226
|
+
);
|
|
1227
|
+
}, [buttonRef, clearAnimationTimers, loading]);
|
|
1228
|
+
return {
|
|
1229
|
+
animatedWidth,
|
|
1230
|
+
loadingPhase
|
|
1231
|
+
};
|
|
1232
|
+
}
|
|
1233
|
+
|
|
944
1234
|
// src/components/button.tsx
|
|
945
|
-
import { Fragment, jsx as
|
|
1235
|
+
import { Fragment, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
946
1236
|
var buttonVariantOptions = [
|
|
947
1237
|
"default",
|
|
948
1238
|
"gradient",
|
|
@@ -955,17 +1245,6 @@ var buttonVariantOptions = [
|
|
|
955
1245
|
"destructive"
|
|
956
1246
|
];
|
|
957
1247
|
var buttonSizeOptions = ["default", "sm", "lg", "icon"];
|
|
958
|
-
var buttonRippleVariantClasses = {
|
|
959
|
-
default: "bg-[hsl(var(--sofya-primary-foreground)/0.82)] mix-blend-screen",
|
|
960
|
-
gradient: "bg-[hsl(var(--sofya-primary-foreground)/0.8)] mix-blend-screen",
|
|
961
|
-
dropdown: "bg-[hsl(var(--sofya-primary)/0.36)]",
|
|
962
|
-
icon: "bg-[hsl(var(--sofya-primary)/0.34)]",
|
|
963
|
-
language: "bg-[hsl(var(--sofya-background)/0.76)] mix-blend-screen",
|
|
964
|
-
secondary: "bg-[hsl(var(--sofya-primary)/0.30)]",
|
|
965
|
-
outline: "bg-[hsl(var(--sofya-primary)/0.32)]",
|
|
966
|
-
ghost: "bg-[hsl(var(--sofya-primary)/0.28)]",
|
|
967
|
-
destructive: "bg-[hsl(var(--sofya-destructive-foreground)/0.78)] mix-blend-screen"
|
|
968
|
-
};
|
|
969
1248
|
var buttonVariants = cva4(
|
|
970
1249
|
"relative isolate inline-flex items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded-full font-medium tracking-[0.025em] transform-gpu transition-[width,transform,filter,background-color,border-color,color,box-shadow] duration-sofya ease-sofya motion-safe:active:scale-[0.985] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
|
|
971
1250
|
{
|
|
@@ -994,7 +1273,6 @@ var buttonVariants = cva4(
|
|
|
994
1273
|
}
|
|
995
1274
|
}
|
|
996
1275
|
);
|
|
997
|
-
var BUTTON_SEQUENCE_MS = 250;
|
|
998
1276
|
var loadingSpinnerSizeClasses = {
|
|
999
1277
|
default: "h-4 w-4",
|
|
1000
1278
|
sm: "h-3.5 w-3.5",
|
|
@@ -1007,52 +1285,21 @@ var languageButtonSizeClasses = {
|
|
|
1007
1285
|
lg: "h-12 w-12 rounded-full p-0",
|
|
1008
1286
|
icon: "h-11 w-11 rounded-full p-0"
|
|
1009
1287
|
};
|
|
1010
|
-
var buttonRippleBaseSize = {
|
|
1011
|
-
default: 20,
|
|
1012
|
-
sm: 18,
|
|
1013
|
-
lg: 22,
|
|
1014
|
-
icon: 18
|
|
1015
|
-
};
|
|
1016
1288
|
function ButtonSpinner({
|
|
1017
1289
|
size
|
|
1018
1290
|
}) {
|
|
1019
|
-
return /* @__PURE__ */
|
|
1020
|
-
|
|
1291
|
+
return /* @__PURE__ */ jsx8(
|
|
1292
|
+
IconLoader2,
|
|
1021
1293
|
{
|
|
1022
1294
|
"aria-hidden": "true",
|
|
1023
1295
|
className: cn(
|
|
1024
1296
|
"animate-spin text-current",
|
|
1025
1297
|
loadingSpinnerSizeClasses[size]
|
|
1026
|
-
)
|
|
1027
|
-
viewBox: "0 0 24 24",
|
|
1028
|
-
fill: "none",
|
|
1029
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1030
|
-
children: [
|
|
1031
|
-
/* @__PURE__ */ jsx7(
|
|
1032
|
-
"circle",
|
|
1033
|
-
{
|
|
1034
|
-
cx: "12",
|
|
1035
|
-
cy: "12",
|
|
1036
|
-
r: "9",
|
|
1037
|
-
className: "opacity-20",
|
|
1038
|
-
stroke: "currentColor",
|
|
1039
|
-
strokeWidth: "3"
|
|
1040
|
-
}
|
|
1041
|
-
),
|
|
1042
|
-
/* @__PURE__ */ jsx7(
|
|
1043
|
-
"path",
|
|
1044
|
-
{
|
|
1045
|
-
d: "M21 12A9 9 0 0 0 12 3",
|
|
1046
|
-
stroke: "currentColor",
|
|
1047
|
-
strokeWidth: "3",
|
|
1048
|
-
strokeLinecap: "round"
|
|
1049
|
-
}
|
|
1050
|
-
)
|
|
1051
|
-
]
|
|
1298
|
+
)
|
|
1052
1299
|
}
|
|
1053
1300
|
);
|
|
1054
1301
|
}
|
|
1055
|
-
var Button =
|
|
1302
|
+
var Button = React8.forwardRef(
|
|
1056
1303
|
({
|
|
1057
1304
|
active = false,
|
|
1058
1305
|
disabled,
|
|
@@ -1071,20 +1318,9 @@ var Button = React6.forwardRef(
|
|
|
1071
1318
|
style,
|
|
1072
1319
|
...props
|
|
1073
1320
|
}, ref) => {
|
|
1074
|
-
const buttonRef =
|
|
1075
|
-
const expandedWidthRef = React6.useRef(void 0);
|
|
1076
|
-
const previousLoadingRef = React6.useRef(loading);
|
|
1077
|
-
const timeoutsRef = React6.useRef([]);
|
|
1078
|
-
const frameRef = React6.useRef(null);
|
|
1079
|
-
const [animatedWidth, setAnimatedWidth] = React6.useState(void 0);
|
|
1080
|
-
const [loadingPhase, setLoadingPhase] = React6.useState(
|
|
1081
|
-
loading ? "loading" : "idle"
|
|
1082
|
-
);
|
|
1083
|
-
const [ripples, setRipples] = React6.useState([]);
|
|
1084
|
-
const rippleIdRef = React6.useRef(0);
|
|
1321
|
+
const buttonRef = React8.useRef(null);
|
|
1085
1322
|
const Component = asChild ? Slot : "button";
|
|
1086
|
-
const
|
|
1087
|
-
const hasChildren = React6.Children.count(children) > 0;
|
|
1323
|
+
const hasChildren = React8.Children.count(children) > 0;
|
|
1088
1324
|
const isIconOnly = !hasChildren && Boolean(leftIcon || rightIcon);
|
|
1089
1325
|
const isIconOnlyAction = variant === "icon" && isIconOnly;
|
|
1090
1326
|
const resolvedSize = size ?? (isIconOnly ? "icon" : "default");
|
|
@@ -1095,6 +1331,13 @@ var Button = React6.forwardRef(
|
|
|
1095
1331
|
const resolvedLanguageLabel = resolvedLanguageLocale ? buttonLanguageLabels[resolvedLanguageLocale] : void 0;
|
|
1096
1332
|
const iconSlotClassName = "inline-flex shrink-0 items-center justify-center [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0";
|
|
1097
1333
|
const iconOnlyNode = leftIcon ?? rightIcon;
|
|
1334
|
+
const { animatedWidth, loadingPhase } = useButtonLoadingState({
|
|
1335
|
+
buttonRef,
|
|
1336
|
+
children,
|
|
1337
|
+
leftIcon,
|
|
1338
|
+
loading,
|
|
1339
|
+
rightIcon
|
|
1340
|
+
});
|
|
1098
1341
|
const isDisabled = disabled || loadingPhase !== "idle";
|
|
1099
1342
|
const resolvedWidthStyle = animatedWidth === void 0 ? style?.width : `${animatedWidth}px`;
|
|
1100
1343
|
const isCompactPhase = loadingPhase === "collapsing" || loadingPhase === "loading" || loadingPhase === "hiding-spinner";
|
|
@@ -1117,153 +1360,26 @@ var Button = React6.forwardRef(
|
|
|
1117
1360
|
backgroundSize: "cover"
|
|
1118
1361
|
} : void 0
|
|
1119
1362
|
};
|
|
1120
|
-
const
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
Math.hypot(x, rect.height - y),
|
|
1136
|
-
Math.hypot(rect.width - x, rect.height - y)
|
|
1137
|
-
);
|
|
1138
|
-
const baseSize = buttonRippleBaseSize[resolvedSize];
|
|
1139
|
-
const finalDiameter = Math.max(
|
|
1140
|
-
radius * 2 + 24,
|
|
1141
|
-
Math.max(rect.width, rect.height) + 18
|
|
1142
|
-
);
|
|
1143
|
-
setRipples((currentRipples) => [
|
|
1144
|
-
...currentRipples,
|
|
1145
|
-
{
|
|
1146
|
-
id: rippleIdRef.current++,
|
|
1147
|
-
scale: finalDiameter / baseSize,
|
|
1148
|
-
size: baseSize,
|
|
1149
|
-
x: x - baseSize / 2,
|
|
1150
|
-
y: y - baseSize / 2
|
|
1151
|
-
}
|
|
1152
|
-
]);
|
|
1153
|
-
},
|
|
1154
|
-
[resolvedSize]
|
|
1155
|
-
);
|
|
1156
|
-
const handlePointerDown = React6.useCallback(
|
|
1157
|
-
(event) => {
|
|
1158
|
-
onPointerDown?.(event);
|
|
1159
|
-
if (event.defaultPrevented || isDisabled) {
|
|
1160
|
-
return;
|
|
1161
|
-
}
|
|
1162
|
-
if (event.button === 0) {
|
|
1163
|
-
createRipple(
|
|
1164
|
-
event.currentTarget,
|
|
1165
|
-
event.clientX,
|
|
1166
|
-
event.clientY
|
|
1167
|
-
);
|
|
1168
|
-
}
|
|
1169
|
-
},
|
|
1170
|
-
[createRipple, isDisabled, onPointerDown]
|
|
1171
|
-
);
|
|
1172
|
-
const handleClick = React6.useCallback(
|
|
1173
|
-
(event) => {
|
|
1174
|
-
if (!isDisabled && event.detail === 0) {
|
|
1175
|
-
createRipple(event.currentTarget);
|
|
1176
|
-
}
|
|
1177
|
-
onClick?.(event);
|
|
1178
|
-
},
|
|
1179
|
-
[createRipple, isDisabled, onClick]
|
|
1180
|
-
);
|
|
1181
|
-
const clearAnimationTimers = React6.useCallback(() => {
|
|
1182
|
-
for (const timeoutId of timeoutsRef.current) {
|
|
1183
|
-
window.clearTimeout(timeoutId);
|
|
1184
|
-
}
|
|
1185
|
-
timeoutsRef.current = [];
|
|
1186
|
-
if (frameRef.current !== null) {
|
|
1187
|
-
window.cancelAnimationFrame(frameRef.current);
|
|
1188
|
-
frameRef.current = null;
|
|
1189
|
-
}
|
|
1190
|
-
}, []);
|
|
1191
|
-
React6.useImperativeHandle(
|
|
1363
|
+
const {
|
|
1364
|
+
handleClick,
|
|
1365
|
+
handlePointerDown,
|
|
1366
|
+
handleRippleComplete,
|
|
1367
|
+
prefersReducedMotion,
|
|
1368
|
+
rippleClassName,
|
|
1369
|
+
ripples
|
|
1370
|
+
} = useButtonRippleState({
|
|
1371
|
+
disabled: isDisabled,
|
|
1372
|
+
onClick,
|
|
1373
|
+
onPointerDown,
|
|
1374
|
+
size: resolvedSize,
|
|
1375
|
+
variant: resolvedVariant
|
|
1376
|
+
});
|
|
1377
|
+
React8.useImperativeHandle(
|
|
1192
1378
|
ref,
|
|
1193
1379
|
() => buttonRef.current
|
|
1194
1380
|
);
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
if (element && loadingPhase === "idle" && !loading) {
|
|
1198
|
-
expandedWidthRef.current = element.offsetWidth;
|
|
1199
|
-
}
|
|
1200
|
-
if (element && loadingPhase === "loading" && animatedWidth === void 0) {
|
|
1201
|
-
setAnimatedWidth(element.offsetHeight);
|
|
1202
|
-
}
|
|
1203
|
-
}, [animatedWidth, loading, loadingPhase, children, leftIcon, rightIcon]);
|
|
1204
|
-
React6.useEffect(() => {
|
|
1205
|
-
return () => {
|
|
1206
|
-
clearAnimationTimers();
|
|
1207
|
-
};
|
|
1208
|
-
}, [clearAnimationTimers]);
|
|
1209
|
-
React6.useEffect(() => {
|
|
1210
|
-
const element = buttonRef.current;
|
|
1211
|
-
if (!element) {
|
|
1212
|
-
return;
|
|
1213
|
-
}
|
|
1214
|
-
const previousLoading = previousLoadingRef.current;
|
|
1215
|
-
previousLoadingRef.current = loading;
|
|
1216
|
-
if (previousLoading === loading) {
|
|
1217
|
-
return;
|
|
1218
|
-
}
|
|
1219
|
-
clearAnimationTimers();
|
|
1220
|
-
if (loading) {
|
|
1221
|
-
const currentWidth2 = element.offsetWidth;
|
|
1222
|
-
const collapsedWidth = element.offsetHeight;
|
|
1223
|
-
expandedWidthRef.current = currentWidth2;
|
|
1224
|
-
setAnimatedWidth(currentWidth2);
|
|
1225
|
-
setLoadingPhase("hiding-content");
|
|
1226
|
-
timeoutsRef.current.push(
|
|
1227
|
-
window.setTimeout(() => {
|
|
1228
|
-
setLoadingPhase("collapsing");
|
|
1229
|
-
setAnimatedWidth(collapsedWidth);
|
|
1230
|
-
}, BUTTON_SEQUENCE_MS)
|
|
1231
|
-
);
|
|
1232
|
-
timeoutsRef.current.push(
|
|
1233
|
-
window.setTimeout(() => {
|
|
1234
|
-
setLoadingPhase("loading");
|
|
1235
|
-
}, BUTTON_SEQUENCE_MS * 2)
|
|
1236
|
-
);
|
|
1237
|
-
return;
|
|
1238
|
-
}
|
|
1239
|
-
const currentWidth = element.offsetWidth;
|
|
1240
|
-
const expandedWidth = expandedWidthRef.current ?? Math.max(element.scrollWidth, currentWidth);
|
|
1241
|
-
setAnimatedWidth(currentWidth);
|
|
1242
|
-
setLoadingPhase("hiding-spinner");
|
|
1243
|
-
timeoutsRef.current.push(
|
|
1244
|
-
window.setTimeout(() => {
|
|
1245
|
-
setLoadingPhase("expanding");
|
|
1246
|
-
frameRef.current = window.requestAnimationFrame(() => {
|
|
1247
|
-
frameRef.current = window.requestAnimationFrame(() => {
|
|
1248
|
-
setAnimatedWidth(expandedWidth);
|
|
1249
|
-
});
|
|
1250
|
-
});
|
|
1251
|
-
}, BUTTON_SEQUENCE_MS)
|
|
1252
|
-
);
|
|
1253
|
-
timeoutsRef.current.push(
|
|
1254
|
-
window.setTimeout(() => {
|
|
1255
|
-
setLoadingPhase("revealing-content");
|
|
1256
|
-
}, BUTTON_SEQUENCE_MS * 2)
|
|
1257
|
-
);
|
|
1258
|
-
timeoutsRef.current.push(
|
|
1259
|
-
window.setTimeout(() => {
|
|
1260
|
-
setLoadingPhase("idle");
|
|
1261
|
-
setAnimatedWidth(void 0);
|
|
1262
|
-
}, BUTTON_SEQUENCE_MS * 3)
|
|
1263
|
-
);
|
|
1264
|
-
}, [children, clearAnimationTimers, leftIcon, loading, rightIcon]);
|
|
1265
|
-
const buttonContent = isLanguageButton ? null : isIconOnly ? /* @__PURE__ */ jsx7("span", { className: iconSlotClassName, children: iconOnlyNode }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
|
|
1266
|
-
leftIcon ? /* @__PURE__ */ jsx7("span", { className: iconSlotClassName, children: leftIcon }) : null,
|
|
1381
|
+
const buttonContent = isLanguageButton ? null : isIconOnly ? /* @__PURE__ */ jsx8("span", { className: iconSlotClassName, children: iconOnlyNode }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
|
|
1382
|
+
leftIcon ? /* @__PURE__ */ jsx8("span", { className: iconSlotClassName, children: leftIcon }) : null,
|
|
1267
1383
|
hasChildren ? renderTextContent(children, {
|
|
1268
1384
|
as: "span",
|
|
1269
1385
|
className: "inline-flex items-center text-current",
|
|
@@ -1273,9 +1389,9 @@ var Button = React6.forwardRef(
|
|
|
1273
1389
|
letterSpacing: "inherit"
|
|
1274
1390
|
}
|
|
1275
1391
|
}) : null,
|
|
1276
|
-
rightIcon ? /* @__PURE__ */
|
|
1392
|
+
rightIcon ? /* @__PURE__ */ jsx8("span", { className: iconSlotClassName, children: rightIcon }) : null
|
|
1277
1393
|
] });
|
|
1278
|
-
return /* @__PURE__ */
|
|
1394
|
+
return /* @__PURE__ */ jsxs3(
|
|
1279
1395
|
Component,
|
|
1280
1396
|
{
|
|
1281
1397
|
className: cn(
|
|
@@ -1296,41 +1412,16 @@ var Button = React6.forwardRef(
|
|
|
1296
1412
|
style: { ...resolvedButtonStyle, width: resolvedWidthStyle },
|
|
1297
1413
|
...props,
|
|
1298
1414
|
children: [
|
|
1299
|
-
/* @__PURE__ */
|
|
1300
|
-
|
|
1415
|
+
/* @__PURE__ */ jsx8(
|
|
1416
|
+
ButtonRippleLayer,
|
|
1301
1417
|
{
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
{
|
|
1307
|
-
className: cn(
|
|
1308
|
-
"absolute rounded-full will-change-transform transform-gpu",
|
|
1309
|
-
resolvedRippleClassName
|
|
1310
|
-
),
|
|
1311
|
-
initial: prefersReducedMotion ? { opacity: 0.32, scale: 0.72 } : { opacity: 0.56, scale: 0 },
|
|
1312
|
-
animate: prefersReducedMotion ? { opacity: 0, scale: 1.02 } : { opacity: [0.56, 0.26, 0], scale: ripple.scale },
|
|
1313
|
-
transition: prefersReducedMotion ? { duration: 0.2, ease: "linear" } : {
|
|
1314
|
-
duration: 0.62,
|
|
1315
|
-
times: [0, 0.35, 1],
|
|
1316
|
-
ease: [0.16, 1, 0.3, 1]
|
|
1317
|
-
},
|
|
1318
|
-
style: {
|
|
1319
|
-
height: ripple.size,
|
|
1320
|
-
left: ripple.x,
|
|
1321
|
-
top: ripple.y,
|
|
1322
|
-
transformOrigin: "center center",
|
|
1323
|
-
width: ripple.size
|
|
1324
|
-
},
|
|
1325
|
-
onAnimationComplete: () => {
|
|
1326
|
-
handleRippleComplete(ripple.id);
|
|
1327
|
-
}
|
|
1328
|
-
},
|
|
1329
|
-
ripple.id
|
|
1330
|
-
))
|
|
1418
|
+
onAnimationComplete: handleRippleComplete,
|
|
1419
|
+
prefersReducedMotion,
|
|
1420
|
+
rippleClassName,
|
|
1421
|
+
ripples
|
|
1331
1422
|
}
|
|
1332
1423
|
),
|
|
1333
|
-
/* @__PURE__ */
|
|
1424
|
+
/* @__PURE__ */ jsx8(
|
|
1334
1425
|
"span",
|
|
1335
1426
|
{
|
|
1336
1427
|
className: cn(
|
|
@@ -1340,7 +1431,7 @@ var Button = React6.forwardRef(
|
|
|
1340
1431
|
children: buttonContent
|
|
1341
1432
|
}
|
|
1342
1433
|
),
|
|
1343
|
-
/* @__PURE__ */
|
|
1434
|
+
/* @__PURE__ */ jsx8(
|
|
1344
1435
|
"span",
|
|
1345
1436
|
{
|
|
1346
1437
|
"aria-hidden": "true",
|
|
@@ -1348,7 +1439,7 @@ var Button = React6.forwardRef(
|
|
|
1348
1439
|
"pointer-events-none absolute inset-0 z-[2] flex items-center justify-center transition-opacity duration-sofya ease-sofya",
|
|
1349
1440
|
showSpinner ? "opacity-100" : "opacity-0"
|
|
1350
1441
|
),
|
|
1351
|
-
children: /* @__PURE__ */
|
|
1442
|
+
children: /* @__PURE__ */ jsx8(ButtonSpinner, { size: resolvedSize })
|
|
1352
1443
|
}
|
|
1353
1444
|
)
|
|
1354
1445
|
]
|
|
@@ -1359,9 +1450,9 @@ var Button = React6.forwardRef(
|
|
|
1359
1450
|
Button.displayName = "Button";
|
|
1360
1451
|
|
|
1361
1452
|
// src/components/surface.tsx
|
|
1362
|
-
import * as
|
|
1453
|
+
import * as React9 from "react";
|
|
1363
1454
|
import { Slot as Slot2 } from "@radix-ui/react-slot";
|
|
1364
|
-
import { jsx as
|
|
1455
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
1365
1456
|
var surfaceStyles = {
|
|
1366
1457
|
card: {
|
|
1367
1458
|
backgroundColor: "hsl(var(--sofya-surface-card-background))",
|
|
@@ -1393,7 +1484,7 @@ var surfaceStyles = {
|
|
|
1393
1484
|
};
|
|
1394
1485
|
function SurfaceComponent({ as, asChild = false, variant = "card", className, style, ...props }, ref) {
|
|
1395
1486
|
const Component = asChild ? Slot2 : as ?? "div";
|
|
1396
|
-
return /* @__PURE__ */
|
|
1487
|
+
return /* @__PURE__ */ jsx9(
|
|
1397
1488
|
Component,
|
|
1398
1489
|
{
|
|
1399
1490
|
ref,
|
|
@@ -1404,16 +1495,16 @@ function SurfaceComponent({ as, asChild = false, variant = "card", className, st
|
|
|
1404
1495
|
}
|
|
1405
1496
|
);
|
|
1406
1497
|
}
|
|
1407
|
-
var SurfaceBase =
|
|
1498
|
+
var SurfaceBase = React9.forwardRef(SurfaceComponent);
|
|
1408
1499
|
SurfaceBase.displayName = "Surface";
|
|
1409
1500
|
var Surface = SurfaceBase;
|
|
1410
1501
|
|
|
1411
1502
|
// src/components/card.tsx
|
|
1412
|
-
import { jsx as
|
|
1503
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
1413
1504
|
var cardVariants = ["card", "panel", "focus"];
|
|
1414
1505
|
function Card({ className, variant = "card", ...props }) {
|
|
1415
1506
|
const hasHoverShadow = variant === "card" || variant === "panel";
|
|
1416
|
-
return /* @__PURE__ */
|
|
1507
|
+
return /* @__PURE__ */ jsx10(
|
|
1417
1508
|
Surface,
|
|
1418
1509
|
{
|
|
1419
1510
|
variant,
|
|
@@ -1427,10 +1518,10 @@ function Card({ className, variant = "card", ...props }) {
|
|
|
1427
1518
|
);
|
|
1428
1519
|
}
|
|
1429
1520
|
function CardHeader({ className, ...props }) {
|
|
1430
|
-
return /* @__PURE__ */
|
|
1521
|
+
return /* @__PURE__ */ jsx10("div", { className: cn("flex flex-col gap-2 p-6", className), ...props });
|
|
1431
1522
|
}
|
|
1432
1523
|
function CardTitle({ children, className, ...props }) {
|
|
1433
|
-
return /* @__PURE__ */
|
|
1524
|
+
return /* @__PURE__ */ jsx10(
|
|
1434
1525
|
"h3",
|
|
1435
1526
|
{
|
|
1436
1527
|
className: cn("text-card-foreground", className),
|
|
@@ -1448,27 +1539,49 @@ function CardDescription({
|
|
|
1448
1539
|
className,
|
|
1449
1540
|
...props
|
|
1450
1541
|
}) {
|
|
1451
|
-
return /* @__PURE__ */
|
|
1542
|
+
return /* @__PURE__ */ jsx10("p", { className: cn("text-muted-foreground", className), ...props, children: renderTextContent(children, {
|
|
1452
1543
|
as: "span",
|
|
1453
1544
|
className: "block text-muted-foreground",
|
|
1454
1545
|
size: "body"
|
|
1455
1546
|
}) });
|
|
1456
1547
|
}
|
|
1457
1548
|
function CardContent({ children, className, ...props }) {
|
|
1458
|
-
return /* @__PURE__ */
|
|
1549
|
+
return /* @__PURE__ */ jsx10("div", { className: cn("p-6 pt-0", className), ...props, children: renderTextContent(children, {
|
|
1459
1550
|
as: "span"
|
|
1460
1551
|
}) });
|
|
1461
1552
|
}
|
|
1462
1553
|
function CardFooter({ children, className, ...props }) {
|
|
1463
|
-
return /* @__PURE__ */
|
|
1554
|
+
return /* @__PURE__ */ jsx10("div", { className: cn("flex items-center gap-4 p-6 pt-0", className), ...props, children: renderTextContent(children, {
|
|
1464
1555
|
as: "span"
|
|
1465
1556
|
}) });
|
|
1466
1557
|
}
|
|
1467
1558
|
|
|
1468
1559
|
// src/components/checkbox.tsx
|
|
1469
|
-
import * as
|
|
1470
|
-
import {
|
|
1471
|
-
|
|
1560
|
+
import * as React10 from "react";
|
|
1561
|
+
import { IconCheck as IconCheck2 } from "@tabler/icons-react";
|
|
1562
|
+
|
|
1563
|
+
// src/lib/selection-control-classes.ts
|
|
1564
|
+
var selectionControlContainerBaseClasses = "flex w-fit gap-4";
|
|
1565
|
+
var selectionControlContentBaseClasses = "grid gap-2";
|
|
1566
|
+
var selectionControlLabelTextBaseClasses = "text-[color:var(--sofya-text-default)] [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-[3px]";
|
|
1567
|
+
var selectionControlDescriptionTextBaseClasses = "text-muted-foreground";
|
|
1568
|
+
var selectionControlControlBaseClasses = "border border-[color:var(--sofya-border-strong)] bg-card transition-[background-color,border-color,box-shadow,color] duration-sofya ease-sofya disabled:cursor-not-allowed disabled:opacity-50";
|
|
1569
|
+
function selectionControlContainerClasses({
|
|
1570
|
+
alignClassName,
|
|
1571
|
+
className,
|
|
1572
|
+
disabled
|
|
1573
|
+
}) {
|
|
1574
|
+
return cn(
|
|
1575
|
+
selectionControlContainerBaseClasses,
|
|
1576
|
+
alignClassName,
|
|
1577
|
+
disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
|
|
1578
|
+
className
|
|
1579
|
+
);
|
|
1580
|
+
}
|
|
1581
|
+
|
|
1582
|
+
// src/components/checkbox.tsx
|
|
1583
|
+
import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1584
|
+
var Checkbox = React10.forwardRef(
|
|
1472
1585
|
function Checkbox2({
|
|
1473
1586
|
checked,
|
|
1474
1587
|
className,
|
|
@@ -1481,23 +1594,21 @@ var Checkbox = React8.forwardRef(
|
|
|
1481
1594
|
labelClassName,
|
|
1482
1595
|
...props
|
|
1483
1596
|
}, ref) {
|
|
1484
|
-
const generatedId =
|
|
1597
|
+
const generatedId = React10.useId();
|
|
1485
1598
|
const resolvedId = id ?? generatedId;
|
|
1486
1599
|
const descriptionId = description ? `${resolvedId}-description` : void 0;
|
|
1487
1600
|
const alignClassName = description ? "items-start" : "items-center";
|
|
1488
|
-
|
|
1489
|
-
return /* @__PURE__ */ jsxs5(
|
|
1601
|
+
return /* @__PURE__ */ jsxs4(
|
|
1490
1602
|
"label",
|
|
1491
1603
|
{
|
|
1492
1604
|
htmlFor: resolvedId,
|
|
1493
|
-
className:
|
|
1494
|
-
"flex w-fit gap-4",
|
|
1605
|
+
className: selectionControlContainerClasses({
|
|
1495
1606
|
alignClassName,
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
),
|
|
1607
|
+
className,
|
|
1608
|
+
disabled
|
|
1609
|
+
}),
|
|
1499
1610
|
children: [
|
|
1500
|
-
/* @__PURE__ */
|
|
1611
|
+
/* @__PURE__ */ jsx11(
|
|
1501
1612
|
"input",
|
|
1502
1613
|
{
|
|
1503
1614
|
ref,
|
|
@@ -1511,41 +1622,24 @@ var Checkbox = React8.forwardRef(
|
|
|
1511
1622
|
...props
|
|
1512
1623
|
}
|
|
1513
1624
|
),
|
|
1514
|
-
/* @__PURE__ */
|
|
1625
|
+
/* @__PURE__ */ jsx11(
|
|
1515
1626
|
"span",
|
|
1516
1627
|
{
|
|
1517
1628
|
"aria-hidden": "true",
|
|
1518
1629
|
className: cn(
|
|
1519
|
-
"inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-[8px]
|
|
1520
|
-
|
|
1630
|
+
"inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-[8px] text-transparent",
|
|
1631
|
+
selectionControlControlBaseClasses,
|
|
1632
|
+
"peer-checked:border-primary peer-checked:bg-primary peer-checked:text-primary-foreground peer-focus-visible:ring-2 peer-focus-visible:ring-[color:var(--sofya-focus-ring-soft)] peer-focus-visible:ring-offset-0"
|
|
1521
1633
|
),
|
|
1522
|
-
children: /* @__PURE__ */
|
|
1523
|
-
"svg",
|
|
1524
|
-
{
|
|
1525
|
-
viewBox: "0 0 16 16",
|
|
1526
|
-
fill: "none",
|
|
1527
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1528
|
-
className: "h-4 w-4 shrink-0",
|
|
1529
|
-
children: /* @__PURE__ */ jsx10(
|
|
1530
|
-
"path",
|
|
1531
|
-
{
|
|
1532
|
-
d: "M2.75 8.25L6.4 11.9L13.35 4.95",
|
|
1533
|
-
stroke: "currentColor",
|
|
1534
|
-
strokeWidth: "2.4",
|
|
1535
|
-
strokeLinecap: "round",
|
|
1536
|
-
strokeLinejoin: "round"
|
|
1537
|
-
}
|
|
1538
|
-
)
|
|
1539
|
-
}
|
|
1540
|
-
)
|
|
1634
|
+
children: /* @__PURE__ */ jsx11(IconCheck2, { "aria-hidden": "true", className: "h-4 w-4 shrink-0", stroke: 2.4 })
|
|
1541
1635
|
}
|
|
1542
1636
|
),
|
|
1543
|
-
label || description ? /* @__PURE__ */
|
|
1544
|
-
label ? /* @__PURE__ */
|
|
1637
|
+
label || description ? /* @__PURE__ */ jsxs4("span", { className: selectionControlContentBaseClasses, children: [
|
|
1638
|
+
label ? /* @__PURE__ */ jsx11(
|
|
1545
1639
|
"span",
|
|
1546
1640
|
{
|
|
1547
1641
|
className: cn(
|
|
1548
|
-
|
|
1642
|
+
selectionControlLabelTextBaseClasses,
|
|
1549
1643
|
labelClassName
|
|
1550
1644
|
),
|
|
1551
1645
|
children: renderTextContent(label, {
|
|
@@ -1555,11 +1649,14 @@ var Checkbox = React8.forwardRef(
|
|
|
1555
1649
|
})
|
|
1556
1650
|
}
|
|
1557
1651
|
) : null,
|
|
1558
|
-
description ? /* @__PURE__ */
|
|
1652
|
+
description ? /* @__PURE__ */ jsx11(
|
|
1559
1653
|
"span",
|
|
1560
1654
|
{
|
|
1561
1655
|
id: descriptionId,
|
|
1562
|
-
className: cn(
|
|
1656
|
+
className: cn(
|
|
1657
|
+
selectionControlDescriptionTextBaseClasses,
|
|
1658
|
+
descriptionClassName
|
|
1659
|
+
),
|
|
1563
1660
|
children: renderTextContent(description, {
|
|
1564
1661
|
as: "span",
|
|
1565
1662
|
className: "text-muted-foreground",
|
|
@@ -1576,22 +1673,46 @@ var Checkbox = React8.forwardRef(
|
|
|
1576
1673
|
Checkbox.displayName = "Checkbox";
|
|
1577
1674
|
|
|
1578
1675
|
// src/components/dropdown.tsx
|
|
1579
|
-
import * as
|
|
1676
|
+
import * as React12 from "react";
|
|
1580
1677
|
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1678
|
+
|
|
1679
|
+
// src/lib/use-controllable-state.ts
|
|
1680
|
+
import * as React11 from "react";
|
|
1681
|
+
function useControllableState({
|
|
1682
|
+
defaultValue,
|
|
1683
|
+
onChange,
|
|
1684
|
+
value
|
|
1685
|
+
}) {
|
|
1686
|
+
const isControlled = value !== void 0;
|
|
1687
|
+
const [uncontrolledValue, setUncontrolledValue] = React11.useState(defaultValue);
|
|
1688
|
+
const currentValue = isControlled ? value : uncontrolledValue;
|
|
1689
|
+
const setValue = React11.useCallback(
|
|
1690
|
+
(nextValue) => {
|
|
1691
|
+
if (!isControlled) {
|
|
1692
|
+
setUncontrolledValue(nextValue);
|
|
1693
|
+
}
|
|
1694
|
+
onChange?.(nextValue);
|
|
1695
|
+
},
|
|
1696
|
+
[isControlled, onChange]
|
|
1697
|
+
);
|
|
1698
|
+
return [currentValue, setValue, setUncontrolledValue];
|
|
1699
|
+
}
|
|
1700
|
+
|
|
1701
|
+
// src/components/dropdown.tsx
|
|
1702
|
+
import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
1703
|
+
var dropdownVariantOptions = [
|
|
1704
|
+
"card",
|
|
1705
|
+
"panel",
|
|
1706
|
+
"language",
|
|
1707
|
+
"selected"
|
|
1708
|
+
];
|
|
1709
|
+
var dropdownLanguageItems = [
|
|
1710
|
+
{ value: "en-US", label: "English", languageLocale: "en-US" },
|
|
1711
|
+
{ value: "pt-BR", label: "Portuguese", languageLocale: "pt-BR" },
|
|
1712
|
+
{ value: "es-ES", label: "Spanish", languageLocale: "es-ES" }
|
|
1713
|
+
];
|
|
1714
|
+
var dropdownTriggerClasses = {
|
|
1715
|
+
card: "h-12 rounded-[20px] px-6 py-2 text-primary",
|
|
1595
1716
|
panel: "h-12 rounded-[10px] px-6 py-2 text-foreground",
|
|
1596
1717
|
language: "",
|
|
1597
1718
|
selected: "h-10 w-full rounded-[10px] border-[color:var(--sofya-border-strong)] px-4 py-2 [font-family:var(--sofya-text-body-font-family)] text-[length:var(--sofya-text-body-font-size)] [font-weight:var(--sofya-text-body-font-weight)] leading-[var(--sofya-text-body-line-height)] tracking-[var(--sofya-text-body-letter-spacing)]"
|
|
@@ -1622,7 +1743,7 @@ function resolveItemLanguageLocale(item) {
|
|
|
1622
1743
|
}
|
|
1623
1744
|
function DefaultDropdownTriggerIcon({ variant }) {
|
|
1624
1745
|
if (variant === "selected") {
|
|
1625
|
-
return /* @__PURE__ */
|
|
1746
|
+
return /* @__PURE__ */ jsx12(
|
|
1626
1747
|
Icon,
|
|
1627
1748
|
{
|
|
1628
1749
|
name: "caret-down",
|
|
@@ -1630,16 +1751,16 @@ function DefaultDropdownTriggerIcon({ variant }) {
|
|
|
1630
1751
|
}
|
|
1631
1752
|
);
|
|
1632
1753
|
}
|
|
1633
|
-
return /* @__PURE__ */
|
|
1754
|
+
return /* @__PURE__ */ jsx12("span", { className: "flex h-8 w-8 items-center justify-center rounded-[6px]", children: /* @__PURE__ */ jsx12(Icon, { name: "caret-down", className: "!h-4 !w-4" }) });
|
|
1634
1755
|
}
|
|
1635
1756
|
function DefaultDropdownItemIndicator() {
|
|
1636
|
-
return /* @__PURE__ */
|
|
1757
|
+
return /* @__PURE__ */ jsx12(Icon, { name: "check", size: 16 });
|
|
1637
1758
|
}
|
|
1638
1759
|
function DefaultDropdownInlineCheck() {
|
|
1639
|
-
return /* @__PURE__ */
|
|
1760
|
+
return /* @__PURE__ */ jsx12(Icon, { name: "check", size: 14 });
|
|
1640
1761
|
}
|
|
1641
1762
|
function LanguageFlagIcon({ locale }) {
|
|
1642
|
-
return /* @__PURE__ */
|
|
1763
|
+
return /* @__PURE__ */ jsx12(
|
|
1643
1764
|
"img",
|
|
1644
1765
|
{
|
|
1645
1766
|
alt: "",
|
|
@@ -1671,40 +1792,41 @@ function Dropdown({
|
|
|
1671
1792
|
const isLanguageVariant = variant === "language";
|
|
1672
1793
|
const isSelectedVariant = variant === "selected";
|
|
1673
1794
|
const usesDefaultListStyle = !isLanguageVariant;
|
|
1674
|
-
const resolvedItems =
|
|
1795
|
+
const resolvedItems = React12.useMemo(
|
|
1675
1796
|
() => isLanguageVariant ? items && items.length > 0 ? items : dropdownLanguageItems : items ?? [],
|
|
1676
1797
|
[isLanguageVariant, items]
|
|
1677
1798
|
);
|
|
1678
1799
|
const defaultUncontrolledValue = defaultValue ?? (isLanguageVariant ? resolvedItems[0]?.value : void 0);
|
|
1679
|
-
const [
|
|
1680
|
-
defaultUncontrolledValue
|
|
1681
|
-
|
|
1682
|
-
|
|
1800
|
+
const [selectedValue, setSelectedValue, setUncontrolledSelectedValue] = useControllableState({
|
|
1801
|
+
defaultValue: defaultUncontrolledValue,
|
|
1802
|
+
onChange: onValueChange,
|
|
1803
|
+
value
|
|
1804
|
+
});
|
|
1683
1805
|
const radioValue = selectedValue ?? "";
|
|
1684
1806
|
const selectedItem = resolvedItems.find(
|
|
1685
1807
|
(item) => item.value === selectedValue
|
|
1686
1808
|
);
|
|
1687
1809
|
const hasSelectedItem = selectedItem !== void 0;
|
|
1688
1810
|
const selectedLanguageLocale = resolveItemLanguageLocale(selectedItem);
|
|
1689
|
-
|
|
1811
|
+
React12.useEffect(() => {
|
|
1690
1812
|
if (value !== void 0) {
|
|
1691
1813
|
return;
|
|
1692
1814
|
}
|
|
1693
|
-
const currentValueIsAvailable =
|
|
1815
|
+
const currentValueIsAvailable = selectedValue !== void 0 && resolvedItems.some((item) => item.value === selectedValue);
|
|
1694
1816
|
if (!currentValueIsAvailable && defaultUncontrolledValue !== void 0) {
|
|
1695
|
-
|
|
1817
|
+
setUncontrolledSelectedValue(defaultUncontrolledValue);
|
|
1696
1818
|
}
|
|
1697
|
-
}, [
|
|
1698
|
-
|
|
1819
|
+
}, [
|
|
1820
|
+
defaultUncontrolledValue,
|
|
1821
|
+
resolvedItems,
|
|
1822
|
+
selectedValue,
|
|
1823
|
+
setUncontrolledSelectedValue,
|
|
1824
|
+
value
|
|
1825
|
+
]);
|
|
1826
|
+
const resolvedTriggerIcon = isLanguageVariant ? void 0 : triggerIcon === void 0 ? /* @__PURE__ */ jsx12(DefaultDropdownTriggerIcon, { variant }) : triggerIcon;
|
|
1699
1827
|
const triggerLabel = selectedItem?.triggerLabel ?? selectedItem?.label ?? placeholder;
|
|
1700
1828
|
const selectedTriggerToneClassName = isSelectedVariant ? hasSelectedItem ? "text-foreground" : "text-[color:var(--sofya-text-soft)]" : void 0;
|
|
1701
|
-
|
|
1702
|
-
if (value === void 0) {
|
|
1703
|
-
setInternalValue(nextValue);
|
|
1704
|
-
}
|
|
1705
|
-
onValueChange?.(nextValue);
|
|
1706
|
-
}
|
|
1707
|
-
return /* @__PURE__ */ jsxs6(
|
|
1829
|
+
return /* @__PURE__ */ jsxs5(
|
|
1708
1830
|
DropdownMenuPrimitive.Root,
|
|
1709
1831
|
{
|
|
1710
1832
|
defaultOpen,
|
|
@@ -1712,7 +1834,7 @@ function Dropdown({
|
|
|
1712
1834
|
onOpenChange,
|
|
1713
1835
|
open,
|
|
1714
1836
|
children: [
|
|
1715
|
-
/* @__PURE__ */
|
|
1837
|
+
/* @__PURE__ */ jsx12(DropdownMenuPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx12(
|
|
1716
1838
|
Button,
|
|
1717
1839
|
{
|
|
1718
1840
|
type: "button",
|
|
@@ -1725,14 +1847,14 @@ function Dropdown({
|
|
|
1725
1847
|
triggerClassName
|
|
1726
1848
|
),
|
|
1727
1849
|
rightIcon: resolvedTriggerIcon,
|
|
1728
|
-
children: isLanguageVariant ? null : /* @__PURE__ */
|
|
1850
|
+
children: isLanguageVariant ? null : /* @__PURE__ */ jsx12("span", { className: "min-w-0 truncate", children: renderTextContent(triggerLabel, {
|
|
1729
1851
|
as: "span",
|
|
1730
1852
|
className: "block min-w-0 truncate text-inherit",
|
|
1731
1853
|
size: "body"
|
|
1732
1854
|
}) })
|
|
1733
1855
|
}
|
|
1734
1856
|
) }),
|
|
1735
|
-
/* @__PURE__ */
|
|
1857
|
+
/* @__PURE__ */ jsx12(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx12(
|
|
1736
1858
|
DropdownMenuPrimitive.Content,
|
|
1737
1859
|
{
|
|
1738
1860
|
align,
|
|
@@ -1742,18 +1864,18 @@ function Dropdown({
|
|
|
1742
1864
|
dropdownContentClasses[variant],
|
|
1743
1865
|
contentClassName
|
|
1744
1866
|
),
|
|
1745
|
-
children: /* @__PURE__ */
|
|
1867
|
+
children: /* @__PURE__ */ jsx12(
|
|
1746
1868
|
DropdownMenuPrimitive.RadioGroup,
|
|
1747
1869
|
{
|
|
1748
1870
|
value: radioValue,
|
|
1749
|
-
onValueChange:
|
|
1871
|
+
onValueChange: setSelectedValue,
|
|
1750
1872
|
className: "grid gap-2",
|
|
1751
1873
|
children: resolvedItems.map((item) => {
|
|
1752
1874
|
const isSelected = item.value === selectedValue;
|
|
1753
1875
|
const itemLanguageLocale = resolveItemLanguageLocale(item);
|
|
1754
|
-
const indicator = item.indicator ?? /* @__PURE__ */
|
|
1755
|
-
const itemIcon = item.icon ?? (variant === "language" && itemLanguageLocale ? /* @__PURE__ */
|
|
1756
|
-
return /* @__PURE__ */
|
|
1876
|
+
const indicator = item.indicator ?? /* @__PURE__ */ jsx12(DefaultDropdownItemIndicator, {});
|
|
1877
|
+
const itemIcon = item.icon ?? (variant === "language" && itemLanguageLocale ? /* @__PURE__ */ jsx12(LanguageFlagIcon, { locale: itemLanguageLocale }) : null);
|
|
1878
|
+
return /* @__PURE__ */ jsx12(
|
|
1757
1879
|
DropdownMenuPrimitive.RadioItem,
|
|
1758
1880
|
{
|
|
1759
1881
|
value: item.value,
|
|
@@ -1764,7 +1886,7 @@ function Dropdown({
|
|
|
1764
1886
|
dropdownItemClasses[variant],
|
|
1765
1887
|
itemClassName
|
|
1766
1888
|
),
|
|
1767
|
-
children: usesDefaultListStyle ? /* @__PURE__ */
|
|
1889
|
+
children: usesDefaultListStyle ? /* @__PURE__ */ jsxs5(
|
|
1768
1890
|
"span",
|
|
1769
1891
|
{
|
|
1770
1892
|
"data-dropdown-item-body": true,
|
|
@@ -1773,32 +1895,32 @@ function Dropdown({
|
|
|
1773
1895
|
isSelected ? "bg-[color:var(--sofya-surface-selected)]" : "bg-transparent"
|
|
1774
1896
|
),
|
|
1775
1897
|
children: [
|
|
1776
|
-
itemIcon ? /* @__PURE__ */
|
|
1777
|
-
/* @__PURE__ */
|
|
1898
|
+
itemIcon ? /* @__PURE__ */ jsx12("span", { className: "flex shrink-0 items-center justify-center", children: itemIcon }) : null,
|
|
1899
|
+
/* @__PURE__ */ jsx12("span", { className: "truncate", children: renderTextContent(item.label, {
|
|
1778
1900
|
as: "span",
|
|
1779
1901
|
className: "block truncate text-inherit",
|
|
1780
1902
|
size: "body"
|
|
1781
1903
|
}) }),
|
|
1782
|
-
isSelected ? /* @__PURE__ */
|
|
1904
|
+
isSelected ? /* @__PURE__ */ jsx12(
|
|
1783
1905
|
"span",
|
|
1784
1906
|
{
|
|
1785
1907
|
"aria-hidden": "true",
|
|
1786
1908
|
className: "flex h-[14px] w-[14px] shrink-0 items-center justify-center",
|
|
1787
|
-
children: /* @__PURE__ */
|
|
1909
|
+
children: /* @__PURE__ */ jsx12(DefaultDropdownInlineCheck, {})
|
|
1788
1910
|
}
|
|
1789
1911
|
) : null
|
|
1790
1912
|
]
|
|
1791
1913
|
}
|
|
1792
|
-
) : /* @__PURE__ */
|
|
1793
|
-
/* @__PURE__ */
|
|
1794
|
-
itemIcon ? /* @__PURE__ */
|
|
1795
|
-
/* @__PURE__ */
|
|
1914
|
+
) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
|
|
1915
|
+
/* @__PURE__ */ jsxs5("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
|
|
1916
|
+
itemIcon ? /* @__PURE__ */ jsx12("span", { className: "flex shrink-0 items-center justify-center", children: itemIcon }) : null,
|
|
1917
|
+
/* @__PURE__ */ jsx12("span", { className: "truncate", children: renderTextContent(item.label, {
|
|
1796
1918
|
as: "span",
|
|
1797
1919
|
className: "block truncate text-inherit",
|
|
1798
1920
|
size: "body"
|
|
1799
1921
|
}) })
|
|
1800
1922
|
] }),
|
|
1801
|
-
/* @__PURE__ */
|
|
1923
|
+
/* @__PURE__ */ jsx12(
|
|
1802
1924
|
"span",
|
|
1803
1925
|
{
|
|
1804
1926
|
"aria-hidden": "true",
|
|
@@ -1825,14 +1947,14 @@ function Dropdown({
|
|
|
1825
1947
|
}
|
|
1826
1948
|
|
|
1827
1949
|
// src/components/dialog.tsx
|
|
1828
|
-
import * as
|
|
1950
|
+
import * as React13 from "react";
|
|
1829
1951
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
1830
|
-
import { jsx as
|
|
1952
|
+
import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
1831
1953
|
var Dialog = DialogPrimitive.Root;
|
|
1832
1954
|
var DialogTrigger = DialogPrimitive.Trigger;
|
|
1833
1955
|
var DialogPortal = DialogPrimitive.Portal;
|
|
1834
1956
|
var DialogClose = DialogPrimitive.Close;
|
|
1835
|
-
var DialogOverlay =
|
|
1957
|
+
var DialogOverlay = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
|
|
1836
1958
|
DialogPrimitive.Overlay,
|
|
1837
1959
|
{
|
|
1838
1960
|
ref,
|
|
@@ -1844,7 +1966,7 @@ var DialogOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__P
|
|
|
1844
1966
|
}
|
|
1845
1967
|
));
|
|
1846
1968
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
1847
|
-
var DialogContent =
|
|
1969
|
+
var DialogContent = React13.forwardRef(
|
|
1848
1970
|
({
|
|
1849
1971
|
className,
|
|
1850
1972
|
children,
|
|
@@ -1857,9 +1979,9 @@ var DialogContent = React10.forwardRef(
|
|
|
1857
1979
|
const dialogCardStyle = {
|
|
1858
1980
|
"--sofya-surface-shadow-override": "var(--sofya-shadow-lg)"
|
|
1859
1981
|
};
|
|
1860
|
-
return /* @__PURE__ */
|
|
1861
|
-
/* @__PURE__ */
|
|
1862
|
-
/* @__PURE__ */
|
|
1982
|
+
return /* @__PURE__ */ jsxs6(DialogPortal, { children: [
|
|
1983
|
+
/* @__PURE__ */ jsx13(DialogOverlay, { className: overlayClassName }),
|
|
1984
|
+
/* @__PURE__ */ jsx13("div", { className: "sofya-dialog-positioner fixed inset-0 z-50 flex items-center justify-center p-4", children: /* @__PURE__ */ jsx13(
|
|
1863
1985
|
DialogPrimitive.Content,
|
|
1864
1986
|
{
|
|
1865
1987
|
ref,
|
|
@@ -1868,7 +1990,7 @@ var DialogContent = React10.forwardRef(
|
|
|
1868
1990
|
className
|
|
1869
1991
|
),
|
|
1870
1992
|
...props,
|
|
1871
|
-
children: /* @__PURE__ */
|
|
1993
|
+
children: /* @__PURE__ */ jsxs6(
|
|
1872
1994
|
Card,
|
|
1873
1995
|
{
|
|
1874
1996
|
variant: cardVariant,
|
|
@@ -1879,14 +2001,14 @@ var DialogContent = React10.forwardRef(
|
|
|
1879
2001
|
style: dialogCardStyle,
|
|
1880
2002
|
children: [
|
|
1881
2003
|
children,
|
|
1882
|
-
showCloseButton ? /* @__PURE__ */
|
|
2004
|
+
showCloseButton ? /* @__PURE__ */ jsx13(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx13(
|
|
1883
2005
|
Button,
|
|
1884
2006
|
{
|
|
1885
2007
|
type: "button",
|
|
1886
2008
|
variant: "ghost",
|
|
1887
2009
|
size: "icon",
|
|
1888
2010
|
"aria-label": "Close",
|
|
1889
|
-
leftIcon: /* @__PURE__ */
|
|
2011
|
+
leftIcon: /* @__PURE__ */ jsx13(Icon, { name: "x", size: 18 }),
|
|
1890
2012
|
className: "absolute right-4 top-4 z-10 text-muted-foreground hover:text-foreground"
|
|
1891
2013
|
}
|
|
1892
2014
|
) }) : null
|
|
@@ -1900,10 +2022,10 @@ var DialogContent = React10.forwardRef(
|
|
|
1900
2022
|
);
|
|
1901
2023
|
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
|
1902
2024
|
function DialogHeader({ className, ...props }) {
|
|
1903
|
-
return /* @__PURE__ */
|
|
2025
|
+
return /* @__PURE__ */ jsx13("div", { className: cn("grid gap-2 px-6 pt-6 pr-16 text-left", className), ...props });
|
|
1904
2026
|
}
|
|
1905
2027
|
function DialogFooter({ className, ...props }) {
|
|
1906
|
-
return /* @__PURE__ */
|
|
2028
|
+
return /* @__PURE__ */ jsx13(
|
|
1907
2029
|
"div",
|
|
1908
2030
|
{
|
|
1909
2031
|
className: cn(
|
|
@@ -1914,11 +2036,11 @@ function DialogFooter({ className, ...props }) {
|
|
|
1914
2036
|
}
|
|
1915
2037
|
);
|
|
1916
2038
|
}
|
|
1917
|
-
var DialogCancel =
|
|
1918
|
-
({ type = "button", variant = "outline", ...props }, ref) => /* @__PURE__ */
|
|
2039
|
+
var DialogCancel = React13.forwardRef(
|
|
2040
|
+
({ type = "button", variant = "outline", ...props }, ref) => /* @__PURE__ */ jsx13(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx13(Button, { ref, type, variant, ...props }) })
|
|
1919
2041
|
);
|
|
1920
2042
|
DialogCancel.displayName = "DialogCancel";
|
|
1921
|
-
var DialogTitle =
|
|
2043
|
+
var DialogTitle = React13.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsx13(
|
|
1922
2044
|
DialogPrimitive.Title,
|
|
1923
2045
|
{
|
|
1924
2046
|
ref,
|
|
@@ -1932,7 +2054,7 @@ var DialogTitle = React10.forwardRef(({ children, className, ...props }, ref) =>
|
|
|
1932
2054
|
}
|
|
1933
2055
|
));
|
|
1934
2056
|
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
|
1935
|
-
var DialogDescription =
|
|
2057
|
+
var DialogDescription = React13.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsx13(
|
|
1936
2058
|
DialogPrimitive.Description,
|
|
1937
2059
|
{
|
|
1938
2060
|
ref,
|
|
@@ -1948,9 +2070,9 @@ var DialogDescription = React10.forwardRef(({ children, className, ...props }, r
|
|
|
1948
2070
|
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
|
1949
2071
|
|
|
1950
2072
|
// src/components/empty.tsx
|
|
1951
|
-
import * as
|
|
2073
|
+
import * as React14 from "react";
|
|
1952
2074
|
import { cva as cva5 } from "class-variance-authority";
|
|
1953
|
-
import { Fragment as Fragment3, jsx as
|
|
2075
|
+
import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1954
2076
|
var emptyMediaVariantOptions = ["default", "icon"];
|
|
1955
2077
|
var emptyMediaVariants = cva5(
|
|
1956
2078
|
"inline-flex shrink-0 items-center justify-center transition-[background-color,border-color,color,box-shadow] duration-sofya ease-sofya",
|
|
@@ -1966,11 +2088,11 @@ var emptyMediaVariants = cva5(
|
|
|
1966
2088
|
}
|
|
1967
2089
|
}
|
|
1968
2090
|
);
|
|
1969
|
-
var EmptyMedia =
|
|
1970
|
-
return /* @__PURE__ */
|
|
2091
|
+
var EmptyMedia = React14.forwardRef(function EmptyMedia2({ className, variant, ...props }, ref) {
|
|
2092
|
+
return /* @__PURE__ */ jsx14("div", { ref, className: cn(emptyMediaVariants({ variant }), className), ...props });
|
|
1971
2093
|
});
|
|
1972
2094
|
function EmptyHeader({ className, ...props }) {
|
|
1973
|
-
return /* @__PURE__ */
|
|
2095
|
+
return /* @__PURE__ */ jsx14(
|
|
1974
2096
|
"div",
|
|
1975
2097
|
{
|
|
1976
2098
|
className: cn("flex max-w-[34rem] flex-col items-center gap-4 text-center", className),
|
|
@@ -1979,7 +2101,7 @@ function EmptyHeader({ className, ...props }) {
|
|
|
1979
2101
|
);
|
|
1980
2102
|
}
|
|
1981
2103
|
function EmptyTitle({ children, className, ...props }) {
|
|
1982
|
-
return /* @__PURE__ */
|
|
2104
|
+
return /* @__PURE__ */ jsx14(
|
|
1983
2105
|
"h2",
|
|
1984
2106
|
{
|
|
1985
2107
|
className: cn("text-foreground", className),
|
|
@@ -1997,7 +2119,7 @@ function EmptyDescription({
|
|
|
1997
2119
|
className,
|
|
1998
2120
|
...props
|
|
1999
2121
|
}) {
|
|
2000
|
-
return /* @__PURE__ */
|
|
2122
|
+
return /* @__PURE__ */ jsx14(
|
|
2001
2123
|
"p",
|
|
2002
2124
|
{
|
|
2003
2125
|
className: cn("max-w-full text-muted-foreground whitespace-nowrap", className),
|
|
@@ -2011,7 +2133,7 @@ function EmptyDescription({
|
|
|
2011
2133
|
);
|
|
2012
2134
|
}
|
|
2013
2135
|
function EmptyContent({ children, className, ...props }) {
|
|
2014
|
-
return /* @__PURE__ */
|
|
2136
|
+
return /* @__PURE__ */ jsx14(
|
|
2015
2137
|
"div",
|
|
2016
2138
|
{
|
|
2017
2139
|
className: cn("flex flex-wrap items-center justify-center gap-4 text-center", className),
|
|
@@ -2022,9 +2144,9 @@ function EmptyContent({ children, className, ...props }) {
|
|
|
2022
2144
|
}
|
|
2023
2145
|
);
|
|
2024
2146
|
}
|
|
2025
|
-
var Empty =
|
|
2026
|
-
const hasCustomChildren =
|
|
2027
|
-
return /* @__PURE__ */
|
|
2147
|
+
var Empty = React14.forwardRef(function Empty2({ children, className, content, description, media, title, ...props }, ref) {
|
|
2148
|
+
const hasCustomChildren = React14.Children.count(children) > 0;
|
|
2149
|
+
return /* @__PURE__ */ jsx14(
|
|
2028
2150
|
"div",
|
|
2029
2151
|
{
|
|
2030
2152
|
ref,
|
|
@@ -2033,13 +2155,13 @@ var Empty = React11.forwardRef(function Empty2({ children, className, content, d
|
|
|
2033
2155
|
className
|
|
2034
2156
|
),
|
|
2035
2157
|
...props,
|
|
2036
|
-
children: hasCustomChildren ? children : /* @__PURE__ */
|
|
2037
|
-
/* @__PURE__ */
|
|
2038
|
-
media ?? /* @__PURE__ */
|
|
2039
|
-
/* @__PURE__ */
|
|
2040
|
-
/* @__PURE__ */
|
|
2158
|
+
children: hasCustomChildren ? children : /* @__PURE__ */ jsxs7(Fragment3, { children: [
|
|
2159
|
+
/* @__PURE__ */ jsxs7(EmptyHeader, { children: [
|
|
2160
|
+
media ?? /* @__PURE__ */ jsx14(EmptyMedia, { variant: "icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx14(Icon, { name: "folders", size: 28 }) }),
|
|
2161
|
+
/* @__PURE__ */ jsx14(EmptyTitle, { children: title ?? "Nada por aqui" }),
|
|
2162
|
+
/* @__PURE__ */ jsx14(EmptyDescription, { children: description ?? "Quando houver conte\xFAdo dispon\xEDvel, ele aparecer\xE1 aqui." })
|
|
2041
2163
|
] }),
|
|
2042
|
-
content !== void 0 && content !== null ? /* @__PURE__ */
|
|
2164
|
+
content !== void 0 && content !== null ? /* @__PURE__ */ jsx14(EmptyContent, { children: content }) : null
|
|
2043
2165
|
] })
|
|
2044
2166
|
}
|
|
2045
2167
|
);
|
|
@@ -2052,108 +2174,78 @@ EmptyDescription.displayName = "EmptyDescription";
|
|
|
2052
2174
|
EmptyContent.displayName = "EmptyContent";
|
|
2053
2175
|
|
|
2054
2176
|
// src/components/input.tsx
|
|
2055
|
-
import * as
|
|
2177
|
+
import * as React17 from "react";
|
|
2056
2178
|
import { REGEXP_ONLY_DIGITS as REGEXP_ONLY_DIGITS2 } from "input-otp";
|
|
2057
|
-
import { AnimatePresence, motion as motion2, useReducedMotion as useReducedMotion2 } from "motion/react";
|
|
2058
2179
|
|
|
2059
|
-
// src/
|
|
2060
|
-
import
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
...props
|
|
2078
|
-
}
|
|
2079
|
-
);
|
|
2080
|
-
});
|
|
2081
|
-
InputOTP.displayName = "InputOTP";
|
|
2082
|
-
var InputOTPGroup = React12.forwardRef(({ className, ...props }, ref) => {
|
|
2083
|
-
return /* @__PURE__ */ jsx14(
|
|
2084
|
-
"div",
|
|
2180
|
+
// src/lib/field-shell.tsx
|
|
2181
|
+
import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
2182
|
+
function FieldLabel({
|
|
2183
|
+
children,
|
|
2184
|
+
className,
|
|
2185
|
+
htmlFor,
|
|
2186
|
+
textClassName = "block text-[color:var(--sofya-text-default)]",
|
|
2187
|
+
textSize = "body",
|
|
2188
|
+
textStyle = {
|
|
2189
|
+
fontWeight: 500
|
|
2190
|
+
}
|
|
2191
|
+
}) {
|
|
2192
|
+
if (!children) {
|
|
2193
|
+
return null;
|
|
2194
|
+
}
|
|
2195
|
+
const Component = htmlFor ? "label" : "div";
|
|
2196
|
+
return /* @__PURE__ */ jsx15(
|
|
2197
|
+
Component,
|
|
2085
2198
|
{
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2199
|
+
className: cn("text-[color:var(--sofya-text-default)]", className),
|
|
2200
|
+
htmlFor,
|
|
2201
|
+
children: renderTextContent(children, {
|
|
2202
|
+
as: "span",
|
|
2203
|
+
className: textClassName,
|
|
2204
|
+
size: textSize,
|
|
2205
|
+
style: textStyle
|
|
2206
|
+
})
|
|
2092
2207
|
}
|
|
2093
2208
|
);
|
|
2094
|
-
}
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
|
|
2099
|
-
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2103
|
-
|
|
2104
|
-
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
);
|
|
2112
|
-
}
|
|
2113
|
-
return /* @__PURE__ */ jsxs9(
|
|
2114
|
-
"div",
|
|
2209
|
+
}
|
|
2210
|
+
function FieldShell({
|
|
2211
|
+
containerClassName,
|
|
2212
|
+
control,
|
|
2213
|
+
label,
|
|
2214
|
+
labelClassName,
|
|
2215
|
+
labelHtmlFor,
|
|
2216
|
+
labelTextClassName,
|
|
2217
|
+
labelTextSize,
|
|
2218
|
+
labelTextStyle
|
|
2219
|
+
}) {
|
|
2220
|
+
if (!label && !containerClassName) {
|
|
2221
|
+
return control;
|
|
2222
|
+
}
|
|
2223
|
+
return /* @__PURE__ */ jsxs8("div", { className: cn("grid w-full gap-2", containerClassName), children: [
|
|
2224
|
+
label ? /* @__PURE__ */ jsx15(
|
|
2225
|
+
FieldLabel,
|
|
2115
2226
|
{
|
|
2116
|
-
|
|
2117
|
-
|
|
2118
|
-
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
...props,
|
|
2123
|
-
children: [
|
|
2124
|
-
slot.char ?? null,
|
|
2125
|
-
slot.hasFakeCaret ? /* @__PURE__ */ jsx14("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx14("div", { className: "h-10 w-[2px] animate-pulse rounded-full bg-primary shadow-[var(--sofya-shadow-caret-glow)]" }) }) : null
|
|
2126
|
-
]
|
|
2227
|
+
className: labelClassName,
|
|
2228
|
+
htmlFor: labelHtmlFor,
|
|
2229
|
+
textClassName: labelTextClassName,
|
|
2230
|
+
textSize: labelTextSize,
|
|
2231
|
+
textStyle: labelTextStyle,
|
|
2232
|
+
children: label
|
|
2127
2233
|
}
|
|
2128
|
-
)
|
|
2129
|
-
|
|
2130
|
-
);
|
|
2131
|
-
|
|
2132
|
-
var InputOTPSeparator = React12.forwardRef(({ className, ...props }, ref) => {
|
|
2133
|
-
return /* @__PURE__ */ jsx14(
|
|
2134
|
-
"div",
|
|
2135
|
-
{
|
|
2136
|
-
ref,
|
|
2137
|
-
role: "separator",
|
|
2138
|
-
className: cn(
|
|
2139
|
-
"flex items-center justify-center px-2 text-[28px] leading-none text-[color:var(--sofya-text-soft)]",
|
|
2140
|
-
className
|
|
2141
|
-
),
|
|
2142
|
-
...props,
|
|
2143
|
-
children: /* @__PURE__ */ jsx14("span", { "aria-hidden": "true", children: "." })
|
|
2144
|
-
}
|
|
2145
|
-
);
|
|
2146
|
-
});
|
|
2147
|
-
InputOTPSeparator.displayName = "InputOTPSeparator";
|
|
2234
|
+
) : null,
|
|
2235
|
+
control
|
|
2236
|
+
] });
|
|
2237
|
+
}
|
|
2148
2238
|
|
|
2149
|
-
// src/components/input.tsx
|
|
2150
|
-
import
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2239
|
+
// src/components/input-upload.tsx
|
|
2240
|
+
import * as React15 from "react";
|
|
2241
|
+
import {
|
|
2242
|
+
IconFileText,
|
|
2243
|
+
IconPhoto,
|
|
2244
|
+
IconUpload,
|
|
2245
|
+
IconVideo
|
|
2246
|
+
} from "@tabler/icons-react";
|
|
2247
|
+
import { AnimatePresence, motion as motion2, useReducedMotion as useReducedMotion2 } from "motion/react";
|
|
2248
|
+
import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
2157
2249
|
var uploadKindOptions = ["document", "image", "video"];
|
|
2158
2250
|
var uploadAcceptByKind = {
|
|
2159
2251
|
document: ".pdf,.doc,.docx,.txt,.rtf,.odt,.jpg,.jpeg,.png,.webp,.gif",
|
|
@@ -2200,7 +2292,7 @@ function mergeUploadFiles(currentFiles, nextFiles, multiple) {
|
|
|
2200
2292
|
return Array.from(filesBySignature.values());
|
|
2201
2293
|
}
|
|
2202
2294
|
var uploadListItemTransition = {
|
|
2203
|
-
duration: 0.
|
|
2295
|
+
duration: 0.18,
|
|
2204
2296
|
ease: [0.22, 1, 0.36, 1]
|
|
2205
2297
|
};
|
|
2206
2298
|
function formatUploadFileSize(bytes) {
|
|
@@ -2246,96 +2338,12 @@ function resolveUploadFileVisualKind(file, fallbackKind) {
|
|
|
2246
2338
|
}
|
|
2247
2339
|
return "document";
|
|
2248
2340
|
}
|
|
2249
|
-
function InputShell({
|
|
2250
|
-
containerClassName,
|
|
2251
|
-
control,
|
|
2252
|
-
label,
|
|
2253
|
-
labelClassName,
|
|
2254
|
-
resolvedId
|
|
2255
|
-
}) {
|
|
2256
|
-
if (!label && !containerClassName) {
|
|
2257
|
-
return control;
|
|
2258
|
-
}
|
|
2259
|
-
return /* @__PURE__ */ jsxs10("div", { className: cn("grid w-full gap-2", containerClassName), children: [
|
|
2260
|
-
label ? /* @__PURE__ */ jsx15(
|
|
2261
|
-
"label",
|
|
2262
|
-
{
|
|
2263
|
-
className: cn(
|
|
2264
|
-
"text-[color:var(--sofya-text-default)]",
|
|
2265
|
-
labelClassName
|
|
2266
|
-
),
|
|
2267
|
-
htmlFor: resolvedId,
|
|
2268
|
-
children: renderTextContent(label, {
|
|
2269
|
-
as: "span",
|
|
2270
|
-
className: "block text-[color:var(--sofya-text-default)]",
|
|
2271
|
-
size: "body",
|
|
2272
|
-
style: {
|
|
2273
|
-
fontWeight: 500
|
|
2274
|
-
}
|
|
2275
|
-
})
|
|
2276
|
-
}
|
|
2277
|
-
) : null,
|
|
2278
|
-
control
|
|
2279
|
-
] });
|
|
2280
|
-
}
|
|
2281
|
-
function UploadInputShell({
|
|
2282
|
-
containerClassName,
|
|
2283
|
-
control,
|
|
2284
|
-
label,
|
|
2285
|
-
labelClassName,
|
|
2286
|
-
optionalLabel
|
|
2287
|
-
}) {
|
|
2288
|
-
if (!label && !optionalLabel && !containerClassName) {
|
|
2289
|
-
return control;
|
|
2290
|
-
}
|
|
2291
|
-
return /* @__PURE__ */ jsxs10("div", { className: cn("grid w-full gap-2", containerClassName), children: [
|
|
2292
|
-
label || optionalLabel ? /* @__PURE__ */ jsxs10(
|
|
2293
|
-
"div",
|
|
2294
|
-
{
|
|
2295
|
-
className: cn(
|
|
2296
|
-
"text-[color:var(--sofya-text-default)]",
|
|
2297
|
-
labelClassName
|
|
2298
|
-
),
|
|
2299
|
-
children: [
|
|
2300
|
-
renderTextContent(label, {
|
|
2301
|
-
as: "span",
|
|
2302
|
-
className: "text-[color:var(--sofya-text-default)]",
|
|
2303
|
-
size: "body",
|
|
2304
|
-
style: {
|
|
2305
|
-
fontWeight: 700
|
|
2306
|
-
}
|
|
2307
|
-
}),
|
|
2308
|
-
optionalLabel ? /* @__PURE__ */ jsx15("span", { className: "ml-2 text-[color:var(--sofya-text-subtle)]", children: renderTextContent(optionalLabel, {
|
|
2309
|
-
as: "span",
|
|
2310
|
-
className: "text-[color:var(--sofya-text-subtle)]",
|
|
2311
|
-
size: "tiny"
|
|
2312
|
-
}) }) : null
|
|
2313
|
-
]
|
|
2314
|
-
}
|
|
2315
|
-
) : null,
|
|
2316
|
-
control
|
|
2317
|
-
] });
|
|
2318
|
-
}
|
|
2319
2341
|
function UploadGlyph({ className }) {
|
|
2320
|
-
return /* @__PURE__ */
|
|
2321
|
-
|
|
2342
|
+
return /* @__PURE__ */ jsx16(
|
|
2343
|
+
IconUpload,
|
|
2322
2344
|
{
|
|
2323
2345
|
"aria-hidden": "true",
|
|
2324
|
-
className: cn("inline-block shrink-0 align-middle", className)
|
|
2325
|
-
fill: "none",
|
|
2326
|
-
focusable: "false",
|
|
2327
|
-
viewBox: "0 0 20 20",
|
|
2328
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2329
|
-
children: /* @__PURE__ */ jsx15(
|
|
2330
|
-
"path",
|
|
2331
|
-
{
|
|
2332
|
-
d: "M10 12.5V3.75M6.66667 7.08333L10 3.75L13.3333 7.08333M5 11.6667V14.1667C5 14.6269 5.3731 15 5.83333 15H14.1667C14.6269 15 15 14.6269 15 14.1667V11.6667",
|
|
2333
|
-
stroke: "currentColor",
|
|
2334
|
-
strokeLinecap: "round",
|
|
2335
|
-
strokeLinejoin: "round",
|
|
2336
|
-
strokeWidth: "2"
|
|
2337
|
-
}
|
|
2338
|
-
)
|
|
2346
|
+
className: cn("inline-block shrink-0 align-middle", className)
|
|
2339
2347
|
}
|
|
2340
2348
|
);
|
|
2341
2349
|
}
|
|
@@ -2344,120 +2352,32 @@ function UploadFileTypeGlyph({
|
|
|
2344
2352
|
kind
|
|
2345
2353
|
}) {
|
|
2346
2354
|
if (kind === "image") {
|
|
2347
|
-
return /* @__PURE__ */
|
|
2348
|
-
|
|
2355
|
+
return /* @__PURE__ */ jsx16(
|
|
2356
|
+
IconPhoto,
|
|
2349
2357
|
{
|
|
2350
2358
|
"aria-hidden": "true",
|
|
2351
|
-
className: cn("inline-block shrink-0 align-middle", className)
|
|
2352
|
-
fill: "none",
|
|
2353
|
-
focusable: "false",
|
|
2354
|
-
viewBox: "0 0 18 18",
|
|
2355
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2356
|
-
children: [
|
|
2357
|
-
/* @__PURE__ */ jsx15(
|
|
2358
|
-
"rect",
|
|
2359
|
-
{
|
|
2360
|
-
x: "2.5",
|
|
2361
|
-
y: "3",
|
|
2362
|
-
width: "13",
|
|
2363
|
-
height: "12",
|
|
2364
|
-
rx: "2.5",
|
|
2365
|
-
stroke: "currentColor",
|
|
2366
|
-
strokeWidth: "1.5"
|
|
2367
|
-
}
|
|
2368
|
-
),
|
|
2369
|
-
/* @__PURE__ */ jsx15("circle", { cx: "6.75", cy: "7.25", r: "1.25", fill: "currentColor" }),
|
|
2370
|
-
/* @__PURE__ */ jsx15(
|
|
2371
|
-
"path",
|
|
2372
|
-
{
|
|
2373
|
-
d: "M4.5 12L7.25 9.25C7.64052 8.85948 8.27368 8.85948 8.66421 9.25L9.5 10.0858C9.89052 10.4763 10.5237 10.4763 10.9142 10.0858L11.25 9.75C11.6405 9.35948 12.2737 9.35948 12.6642 9.75L13.5 10.5858",
|
|
2374
|
-
stroke: "currentColor",
|
|
2375
|
-
strokeLinecap: "round",
|
|
2376
|
-
strokeLinejoin: "round",
|
|
2377
|
-
strokeWidth: "1.5"
|
|
2378
|
-
}
|
|
2379
|
-
)
|
|
2380
|
-
]
|
|
2359
|
+
className: cn("inline-block shrink-0 align-middle", className)
|
|
2381
2360
|
}
|
|
2382
2361
|
);
|
|
2383
2362
|
}
|
|
2384
2363
|
if (kind === "video") {
|
|
2385
|
-
return /* @__PURE__ */
|
|
2386
|
-
|
|
2364
|
+
return /* @__PURE__ */ jsx16(
|
|
2365
|
+
IconVideo,
|
|
2387
2366
|
{
|
|
2388
2367
|
"aria-hidden": "true",
|
|
2389
|
-
className: cn("inline-block shrink-0 align-middle", className)
|
|
2390
|
-
fill: "none",
|
|
2391
|
-
focusable: "false",
|
|
2392
|
-
viewBox: "0 0 18 18",
|
|
2393
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2394
|
-
children: [
|
|
2395
|
-
/* @__PURE__ */ jsx15(
|
|
2396
|
-
"rect",
|
|
2397
|
-
{
|
|
2398
|
-
x: "2.5",
|
|
2399
|
-
y: "4",
|
|
2400
|
-
width: "13",
|
|
2401
|
-
height: "10",
|
|
2402
|
-
rx: "2.5",
|
|
2403
|
-
stroke: "currentColor",
|
|
2404
|
-
strokeWidth: "1.5"
|
|
2405
|
-
}
|
|
2406
|
-
),
|
|
2407
|
-
/* @__PURE__ */ jsx15(
|
|
2408
|
-
"path",
|
|
2409
|
-
{
|
|
2410
|
-
d: "M8 7.35C8 7.03889 8.33624 6.84443 8.60583 7.00018L11.1583 8.47518C11.4279 8.63094 11.4279 9.02088 11.1583 9.17664L8.60583 10.6516C8.33624 10.8074 8 10.6129 8 10.3018V7.35Z",
|
|
2411
|
-
fill: "currentColor"
|
|
2412
|
-
}
|
|
2413
|
-
)
|
|
2414
|
-
]
|
|
2368
|
+
className: cn("inline-block shrink-0 align-middle", className)
|
|
2415
2369
|
}
|
|
2416
2370
|
);
|
|
2417
2371
|
}
|
|
2418
|
-
return /* @__PURE__ */
|
|
2419
|
-
|
|
2372
|
+
return /* @__PURE__ */ jsx16(
|
|
2373
|
+
IconFileText,
|
|
2420
2374
|
{
|
|
2421
2375
|
"aria-hidden": "true",
|
|
2422
|
-
className: cn("inline-block shrink-0 align-middle", className)
|
|
2423
|
-
fill: "none",
|
|
2424
|
-
focusable: "false",
|
|
2425
|
-
viewBox: "0 0 18 18",
|
|
2426
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2427
|
-
children: [
|
|
2428
|
-
/* @__PURE__ */ jsx15(
|
|
2429
|
-
"path",
|
|
2430
|
-
{
|
|
2431
|
-
d: "M7.5 2.25H5C3.89543 2.25 3 3.14543 3 4.25V13.75C3 14.8546 3.89543 15.75 5 15.75H13C14.1046 15.75 15 14.8546 15 13.75V8.25L11.25 4.5H9.75C8.50736 4.5 7.5 3.49264 7.5 2.25Z",
|
|
2432
|
-
stroke: "currentColor",
|
|
2433
|
-
strokeLinejoin: "round",
|
|
2434
|
-
strokeWidth: "1.5"
|
|
2435
|
-
}
|
|
2436
|
-
),
|
|
2437
|
-
/* @__PURE__ */ jsx15(
|
|
2438
|
-
"path",
|
|
2439
|
-
{
|
|
2440
|
-
d: "M7.5 2.25V4.25C7.5 5.35457 8.39543 6.25 9.5 6.25H11.5",
|
|
2441
|
-
stroke: "currentColor",
|
|
2442
|
-
strokeLinecap: "round",
|
|
2443
|
-
strokeLinejoin: "round",
|
|
2444
|
-
strokeWidth: "1.5"
|
|
2445
|
-
}
|
|
2446
|
-
),
|
|
2447
|
-
/* @__PURE__ */ jsx15(
|
|
2448
|
-
"path",
|
|
2449
|
-
{
|
|
2450
|
-
d: "M6 10H12M6 12.5H10",
|
|
2451
|
-
stroke: "currentColor",
|
|
2452
|
-
strokeLinecap: "round",
|
|
2453
|
-
strokeWidth: "1.5"
|
|
2454
|
-
}
|
|
2455
|
-
)
|
|
2456
|
-
]
|
|
2376
|
+
className: cn("inline-block shrink-0 align-middle", className)
|
|
2457
2377
|
}
|
|
2458
2378
|
);
|
|
2459
2379
|
}
|
|
2460
|
-
var UploadInputControl =
|
|
2380
|
+
var UploadInputControl = React15.forwardRef(function UploadInputControl2({
|
|
2461
2381
|
accept,
|
|
2462
2382
|
"aria-label": ariaLabel,
|
|
2463
2383
|
className,
|
|
@@ -2471,17 +2391,17 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2471
2391
|
resolvedId,
|
|
2472
2392
|
...uploadProps
|
|
2473
2393
|
}, ref) {
|
|
2474
|
-
const inputRef =
|
|
2475
|
-
const [isDragActive, setIsDragActive] =
|
|
2476
|
-
const [selectedFiles, setSelectedFiles] =
|
|
2394
|
+
const inputRef = React15.useRef(null);
|
|
2395
|
+
const [isDragActive, setIsDragActive] = React15.useState(false);
|
|
2396
|
+
const [selectedFiles, setSelectedFiles] = React15.useState([]);
|
|
2477
2397
|
const resolvedMultiple = multiple ?? true;
|
|
2478
2398
|
const prefersReducedMotion = useReducedMotion2();
|
|
2479
|
-
|
|
2399
|
+
React15.useImperativeHandle(ref, () => inputRef.current);
|
|
2480
2400
|
const resolvedAccept = accept ?? uploadAcceptByKind[uploadKind];
|
|
2481
2401
|
const resolvedAriaLabel = ariaLabel ?? uploadAriaLabelByKind[uploadKind];
|
|
2482
2402
|
const resolvedTitle = uploadTitle ?? "Arraste arquivos aqui ou clique para selecionar";
|
|
2483
2403
|
const resolvedDescription = uploadDescription ?? uploadDescriptionByKind[uploadKind];
|
|
2484
|
-
const syncSelectedFiles =
|
|
2404
|
+
const syncSelectedFiles = React15.useCallback(
|
|
2485
2405
|
(files) => {
|
|
2486
2406
|
const normalizedFiles = resolvedMultiple ? files : files.slice(0, 1);
|
|
2487
2407
|
setSelectedFiles(normalizedFiles);
|
|
@@ -2489,7 +2409,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2489
2409
|
},
|
|
2490
2410
|
[onFilesChange, resolvedMultiple]
|
|
2491
2411
|
);
|
|
2492
|
-
const applyFilesToInput =
|
|
2412
|
+
const applyFilesToInput = React15.useCallback((files) => {
|
|
2493
2413
|
const inputElement = inputRef.current;
|
|
2494
2414
|
if (!inputElement || typeof DataTransfer === "undefined") {
|
|
2495
2415
|
return false;
|
|
@@ -2508,7 +2428,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2508
2428
|
return false;
|
|
2509
2429
|
}
|
|
2510
2430
|
}, []);
|
|
2511
|
-
const handleInputChange =
|
|
2431
|
+
const handleInputChange = React15.useCallback(
|
|
2512
2432
|
(event) => {
|
|
2513
2433
|
const nextFiles = mergeUploadFiles(
|
|
2514
2434
|
selectedFiles,
|
|
@@ -2527,12 +2447,12 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2527
2447
|
syncSelectedFiles
|
|
2528
2448
|
]
|
|
2529
2449
|
);
|
|
2530
|
-
const openPicker =
|
|
2450
|
+
const openPicker = React15.useCallback(() => {
|
|
2531
2451
|
if (!disabled) {
|
|
2532
2452
|
inputRef.current?.click();
|
|
2533
2453
|
}
|
|
2534
2454
|
}, [disabled]);
|
|
2535
|
-
const handleKeyDown =
|
|
2455
|
+
const handleKeyDown = React15.useCallback(
|
|
2536
2456
|
(event) => {
|
|
2537
2457
|
if (disabled) {
|
|
2538
2458
|
return;
|
|
@@ -2544,7 +2464,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2544
2464
|
},
|
|
2545
2465
|
[disabled, openPicker]
|
|
2546
2466
|
);
|
|
2547
|
-
const handleDragEnter =
|
|
2467
|
+
const handleDragEnter = React15.useCallback(
|
|
2548
2468
|
(event) => {
|
|
2549
2469
|
event.preventDefault();
|
|
2550
2470
|
if (!disabled) {
|
|
@@ -2553,7 +2473,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2553
2473
|
},
|
|
2554
2474
|
[disabled]
|
|
2555
2475
|
);
|
|
2556
|
-
const handleDragLeave =
|
|
2476
|
+
const handleDragLeave = React15.useCallback(
|
|
2557
2477
|
(event) => {
|
|
2558
2478
|
if (disabled) {
|
|
2559
2479
|
return;
|
|
@@ -2566,7 +2486,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2566
2486
|
},
|
|
2567
2487
|
[disabled]
|
|
2568
2488
|
);
|
|
2569
|
-
const handleDragOver =
|
|
2489
|
+
const handleDragOver = React15.useCallback(
|
|
2570
2490
|
(event) => {
|
|
2571
2491
|
event.preventDefault();
|
|
2572
2492
|
if (disabled) {
|
|
@@ -2577,7 +2497,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2577
2497
|
},
|
|
2578
2498
|
[disabled]
|
|
2579
2499
|
);
|
|
2580
|
-
const handleDrop =
|
|
2500
|
+
const handleDrop = React15.useCallback(
|
|
2581
2501
|
(event) => {
|
|
2582
2502
|
event.preventDefault();
|
|
2583
2503
|
if (disabled) {
|
|
@@ -2610,7 +2530,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2610
2530
|
syncSelectedFiles
|
|
2611
2531
|
]
|
|
2612
2532
|
);
|
|
2613
|
-
const handleRemoveFile =
|
|
2533
|
+
const handleRemoveFile = React15.useCallback(
|
|
2614
2534
|
(fileIndex) => {
|
|
2615
2535
|
if (disabled) {
|
|
2616
2536
|
return;
|
|
@@ -2621,8 +2541,8 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2621
2541
|
},
|
|
2622
2542
|
[applyFilesToInput, disabled, selectedFiles, syncSelectedFiles]
|
|
2623
2543
|
);
|
|
2624
|
-
return /* @__PURE__ */
|
|
2625
|
-
/* @__PURE__ */
|
|
2544
|
+
return /* @__PURE__ */ jsxs9("div", { className: "grid w-full gap-4", children: [
|
|
2545
|
+
/* @__PURE__ */ jsx16(
|
|
2626
2546
|
"input",
|
|
2627
2547
|
{
|
|
2628
2548
|
...uploadProps,
|
|
@@ -2637,7 +2557,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2637
2557
|
onChange: handleInputChange
|
|
2638
2558
|
}
|
|
2639
2559
|
),
|
|
2640
|
-
/* @__PURE__ */
|
|
2560
|
+
/* @__PURE__ */ jsxs9(
|
|
2641
2561
|
"label",
|
|
2642
2562
|
{
|
|
2643
2563
|
"aria-disabled": disabled || void 0,
|
|
@@ -2657,8 +2577,8 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2657
2577
|
onDrop: handleDrop,
|
|
2658
2578
|
onKeyDown: handleKeyDown,
|
|
2659
2579
|
children: [
|
|
2660
|
-
/* @__PURE__ */
|
|
2661
|
-
/* @__PURE__ */
|
|
2580
|
+
/* @__PURE__ */ jsx16("span", { className: "flex size-10 items-center justify-center rounded-[6px] p-2 text-[color:var(--sofya-text-default)]", children: /* @__PURE__ */ jsx16(UploadGlyph, { className: "size-[18px]" }) }),
|
|
2581
|
+
/* @__PURE__ */ jsx16("span", { className: "text-[color:var(--sofya-text-default)]", children: renderTextContent(resolvedTitle, {
|
|
2662
2582
|
as: "span",
|
|
2663
2583
|
className: "block text-[color:var(--sofya-text-default)]",
|
|
2664
2584
|
size: "body",
|
|
@@ -2666,7 +2586,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2666
2586
|
fontWeight: 500
|
|
2667
2587
|
}
|
|
2668
2588
|
}) }),
|
|
2669
|
-
resolvedDescription ? /* @__PURE__ */
|
|
2589
|
+
resolvedDescription ? /* @__PURE__ */ jsx16("span", { className: "text-[color:var(--sofya-text-subtle)]", children: renderTextContent(resolvedDescription, {
|
|
2670
2590
|
as: "span",
|
|
2671
2591
|
className: "block text-[color:var(--sofya-text-subtle)]",
|
|
2672
2592
|
size: "tiny"
|
|
@@ -2674,28 +2594,27 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2674
2594
|
]
|
|
2675
2595
|
}
|
|
2676
2596
|
),
|
|
2677
|
-
/* @__PURE__ */
|
|
2597
|
+
/* @__PURE__ */ jsx16("div", { role: "list", className: "grid gap-4 overflow-hidden", children: /* @__PURE__ */ jsx16(AnimatePresence, { initial: false, children: selectedFiles.map((file, index) => {
|
|
2678
2598
|
const fileKey = resolveUploadFileSignature(file);
|
|
2679
|
-
return /* @__PURE__ */
|
|
2599
|
+
return /* @__PURE__ */ jsx16(
|
|
2680
2600
|
motion2.div,
|
|
2681
2601
|
{
|
|
2682
|
-
layout: true,
|
|
2683
2602
|
role: "listitem",
|
|
2684
2603
|
className: "overflow-hidden",
|
|
2685
|
-
initial: prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y:
|
|
2686
|
-
animate: prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0
|
|
2687
|
-
exit: prefersReducedMotion ? { opacity: 0 } : { opacity: 0,
|
|
2604
|
+
initial: prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 8 },
|
|
2605
|
+
animate: prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 },
|
|
2606
|
+
exit: prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: -6 },
|
|
2688
2607
|
transition: uploadListItemTransition,
|
|
2689
|
-
children: /* @__PURE__ */
|
|
2690
|
-
/* @__PURE__ */
|
|
2608
|
+
children: /* @__PURE__ */ jsxs9(Card, { variant: "panel", className: "flex items-center gap-4 p-4", children: [
|
|
2609
|
+
/* @__PURE__ */ jsx16("span", { className: "flex size-11 shrink-0 items-center justify-center rounded-full bg-[color:var(--sofya-surface-hover)] text-primary", children: /* @__PURE__ */ jsx16(
|
|
2691
2610
|
UploadFileTypeGlyph,
|
|
2692
2611
|
{
|
|
2693
2612
|
className: "size-[18px]",
|
|
2694
2613
|
kind: resolveUploadFileVisualKind(file, uploadKind)
|
|
2695
2614
|
}
|
|
2696
2615
|
) }),
|
|
2697
|
-
/* @__PURE__ */
|
|
2698
|
-
/* @__PURE__ */
|
|
2616
|
+
/* @__PURE__ */ jsxs9("div", { className: "min-w-0 flex-1", children: [
|
|
2617
|
+
/* @__PURE__ */ jsx16("p", { className: "truncate text-[color:var(--sofya-text-default)]", children: renderTextContent(file.name, {
|
|
2699
2618
|
as: "span",
|
|
2700
2619
|
className: "block truncate text-[color:var(--sofya-text-default)]",
|
|
2701
2620
|
size: "body",
|
|
@@ -2703,7 +2622,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2703
2622
|
fontWeight: 500
|
|
2704
2623
|
}
|
|
2705
2624
|
}) }),
|
|
2706
|
-
/* @__PURE__ */
|
|
2625
|
+
/* @__PURE__ */ jsx16("p", { className: "mt-2 text-[color:var(--sofya-text-subtle)]", children: renderTextContent(
|
|
2707
2626
|
`${resolveUploadFileBadge(
|
|
2708
2627
|
file
|
|
2709
2628
|
)} \xB7 ${formatUploadFileSize(file.size)}`,
|
|
@@ -2714,7 +2633,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2714
2633
|
}
|
|
2715
2634
|
) })
|
|
2716
2635
|
] }),
|
|
2717
|
-
/* @__PURE__ */
|
|
2636
|
+
/* @__PURE__ */ jsx16(
|
|
2718
2637
|
"button",
|
|
2719
2638
|
{
|
|
2720
2639
|
"aria-label": `Remover ${file.name}`,
|
|
@@ -2726,7 +2645,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2726
2645
|
event.stopPropagation();
|
|
2727
2646
|
handleRemoveFile(index);
|
|
2728
2647
|
},
|
|
2729
|
-
children: /* @__PURE__ */
|
|
2648
|
+
children: /* @__PURE__ */ jsx16(
|
|
2730
2649
|
Icon,
|
|
2731
2650
|
{
|
|
2732
2651
|
"aria-hidden": "true",
|
|
@@ -2741,12 +2660,111 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2741
2660
|
},
|
|
2742
2661
|
fileKey
|
|
2743
2662
|
);
|
|
2744
|
-
}) }) })
|
|
2745
|
-
] });
|
|
2663
|
+
}) }) })
|
|
2664
|
+
] });
|
|
2665
|
+
});
|
|
2666
|
+
UploadInputControl.displayName = "UploadInputControl";
|
|
2667
|
+
|
|
2668
|
+
// src/components/input-otp.tsx
|
|
2669
|
+
import * as React16 from "react";
|
|
2670
|
+
import {
|
|
2671
|
+
OTPInput,
|
|
2672
|
+
OTPInputContext,
|
|
2673
|
+
REGEXP_ONLY_DIGITS
|
|
2674
|
+
} from "input-otp";
|
|
2675
|
+
import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
2676
|
+
var InputOTP = React16.forwardRef(({ className, containerClassName, ...props }, ref) => {
|
|
2677
|
+
return /* @__PURE__ */ jsx17(
|
|
2678
|
+
OTPInput,
|
|
2679
|
+
{
|
|
2680
|
+
ref,
|
|
2681
|
+
containerClassName: cn(
|
|
2682
|
+
"flex items-center gap-4 has-[:disabled]:opacity-50",
|
|
2683
|
+
containerClassName
|
|
2684
|
+
),
|
|
2685
|
+
className: cn("disabled:cursor-not-allowed", className),
|
|
2686
|
+
...props
|
|
2687
|
+
}
|
|
2688
|
+
);
|
|
2689
|
+
});
|
|
2690
|
+
InputOTP.displayName = "InputOTP";
|
|
2691
|
+
var InputOTPGroup = React16.forwardRef(({ className, ...props }, ref) => {
|
|
2692
|
+
return /* @__PURE__ */ jsx17(
|
|
2693
|
+
"div",
|
|
2694
|
+
{
|
|
2695
|
+
ref,
|
|
2696
|
+
className: cn(
|
|
2697
|
+
"flex overflow-hidden rounded-[12px] border border-[color:var(--sofya-border-hover)] bg-card",
|
|
2698
|
+
className
|
|
2699
|
+
),
|
|
2700
|
+
...props
|
|
2701
|
+
}
|
|
2702
|
+
);
|
|
2703
|
+
});
|
|
2704
|
+
InputOTPGroup.displayName = "InputOTPGroup";
|
|
2705
|
+
var InputOTPSlot = React16.forwardRef(
|
|
2706
|
+
({ className, index, ...props }, ref) => {
|
|
2707
|
+
const otpContext = React16.useContext(OTPInputContext);
|
|
2708
|
+
const slot = otpContext.slots[index];
|
|
2709
|
+
if (!slot) {
|
|
2710
|
+
return /* @__PURE__ */ jsx17(
|
|
2711
|
+
"div",
|
|
2712
|
+
{
|
|
2713
|
+
ref,
|
|
2714
|
+
className: cn(
|
|
2715
|
+
"relative flex h-[92px] w-[96px] items-center justify-center border-r border-[color:var(--sofya-border-strong)] bg-card last:border-r-0",
|
|
2716
|
+
className
|
|
2717
|
+
),
|
|
2718
|
+
...props
|
|
2719
|
+
}
|
|
2720
|
+
);
|
|
2721
|
+
}
|
|
2722
|
+
return /* @__PURE__ */ jsxs10(
|
|
2723
|
+
"div",
|
|
2724
|
+
{
|
|
2725
|
+
ref,
|
|
2726
|
+
className: cn(
|
|
2727
|
+
"relative flex h-[92px] w-[96px] items-center justify-center border-r border-[color:var(--sofya-border-strong)] bg-card text-[40px] font-medium leading-none tracking-[-0.04em] text-[color:var(--sofya-text-default)] transition-[background-color,box-shadow,border-color,color] duration-sofya ease-sofya last:border-r-0",
|
|
2728
|
+
slot.isActive && "z-10 border-transparent bg-[color:var(--sofya-surface-hover)] text-primary shadow-[var(--sofya-shadow-otp-focus)] ring-2 ring-inset ring-[color:var(--sofya-focus-ring-strong)]",
|
|
2729
|
+
className
|
|
2730
|
+
),
|
|
2731
|
+
...props,
|
|
2732
|
+
children: [
|
|
2733
|
+
slot.char ?? null,
|
|
2734
|
+
slot.hasFakeCaret ? /* @__PURE__ */ jsx17("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx17("div", { className: "h-10 w-[2px] animate-pulse rounded-full bg-primary shadow-[var(--sofya-shadow-caret-glow)]" }) }) : null
|
|
2735
|
+
]
|
|
2736
|
+
}
|
|
2737
|
+
);
|
|
2738
|
+
}
|
|
2739
|
+
);
|
|
2740
|
+
InputOTPSlot.displayName = "InputOTPSlot";
|
|
2741
|
+
var InputOTPSeparator = React16.forwardRef(({ className, ...props }, ref) => {
|
|
2742
|
+
return /* @__PURE__ */ jsx17(
|
|
2743
|
+
"div",
|
|
2744
|
+
{
|
|
2745
|
+
ref,
|
|
2746
|
+
role: "separator",
|
|
2747
|
+
className: cn(
|
|
2748
|
+
"flex items-center justify-center px-2 text-[28px] leading-none text-[color:var(--sofya-text-soft)]",
|
|
2749
|
+
className
|
|
2750
|
+
),
|
|
2751
|
+
...props,
|
|
2752
|
+
children: /* @__PURE__ */ jsx17("span", { "aria-hidden": "true", children: "." })
|
|
2753
|
+
}
|
|
2754
|
+
);
|
|
2746
2755
|
});
|
|
2747
|
-
|
|
2748
|
-
|
|
2749
|
-
|
|
2756
|
+
InputOTPSeparator.displayName = "InputOTPSeparator";
|
|
2757
|
+
|
|
2758
|
+
// src/components/input.tsx
|
|
2759
|
+
import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
2760
|
+
var inputVariantOptions = [
|
|
2761
|
+
"default",
|
|
2762
|
+
"search",
|
|
2763
|
+
"otp",
|
|
2764
|
+
"upload"
|
|
2765
|
+
];
|
|
2766
|
+
var Input = React17.forwardRef((props, ref) => {
|
|
2767
|
+
const generatedId = React17.useId();
|
|
2750
2768
|
const resolvedId = props.id ?? generatedId;
|
|
2751
2769
|
const variant = props.variant ?? "default";
|
|
2752
2770
|
if (variant === "otp") {
|
|
@@ -2774,7 +2792,7 @@ var Input = React13.forwardRef((props, ref) => {
|
|
|
2774
2792
|
);
|
|
2775
2793
|
const hasTrailingGroup = resolvedSplitIndex < resolvedLength;
|
|
2776
2794
|
const otpAriaLabel = otpProps["aria-label"] ?? "Verification code";
|
|
2777
|
-
const otpControl = /* @__PURE__ */
|
|
2795
|
+
const otpControl = /* @__PURE__ */ jsxs11(
|
|
2778
2796
|
InputOTP,
|
|
2779
2797
|
{
|
|
2780
2798
|
ref,
|
|
@@ -2787,7 +2805,7 @@ var Input = React13.forwardRef((props, ref) => {
|
|
|
2787
2805
|
containerClassName: className2,
|
|
2788
2806
|
...otpProps,
|
|
2789
2807
|
children: [
|
|
2790
|
-
/* @__PURE__ */
|
|
2808
|
+
/* @__PURE__ */ jsx18(InputOTPGroup, { className: otpGroupClassName, children: Array.from({ length: resolvedSplitIndex }, (_, index) => /* @__PURE__ */ jsx18(
|
|
2791
2809
|
InputOTPSlot,
|
|
2792
2810
|
{
|
|
2793
2811
|
className: otpSlotClassName,
|
|
@@ -2795,10 +2813,10 @@ var Input = React13.forwardRef((props, ref) => {
|
|
|
2795
2813
|
},
|
|
2796
2814
|
`otp-leading-${index}`
|
|
2797
2815
|
)) }),
|
|
2798
|
-
hasTrailingGroup ? otpSeparator ?? /* @__PURE__ */
|
|
2799
|
-
hasTrailingGroup ? /* @__PURE__ */
|
|
2816
|
+
hasTrailingGroup ? otpSeparator ?? /* @__PURE__ */ jsx18(InputOTPSeparator, { className: otpSeparatorClassName }) : null,
|
|
2817
|
+
hasTrailingGroup ? /* @__PURE__ */ jsx18(InputOTPGroup, { className: otpGroupClassName, children: Array.from(
|
|
2800
2818
|
{ length: resolvedLength - resolvedSplitIndex },
|
|
2801
|
-
(_, index) => /* @__PURE__ */
|
|
2819
|
+
(_, index) => /* @__PURE__ */ jsx18(
|
|
2802
2820
|
InputOTPSlot,
|
|
2803
2821
|
{
|
|
2804
2822
|
className: otpSlotClassName,
|
|
@@ -2810,12 +2828,12 @@ var Input = React13.forwardRef((props, ref) => {
|
|
|
2810
2828
|
]
|
|
2811
2829
|
}
|
|
2812
2830
|
);
|
|
2813
|
-
return /* @__PURE__ */
|
|
2814
|
-
|
|
2831
|
+
return /* @__PURE__ */ jsx18(
|
|
2832
|
+
FieldShell,
|
|
2815
2833
|
{
|
|
2816
2834
|
containerClassName: containerClassName2,
|
|
2817
2835
|
control: otpControl,
|
|
2818
|
-
resolvedId
|
|
2836
|
+
labelHtmlFor: resolvedId
|
|
2819
2837
|
}
|
|
2820
2838
|
);
|
|
2821
2839
|
}
|
|
@@ -2829,7 +2847,7 @@ var Input = React13.forwardRef((props, ref) => {
|
|
|
2829
2847
|
variant: _variant2,
|
|
2830
2848
|
...uploadProps
|
|
2831
2849
|
} = props;
|
|
2832
|
-
const uploadControl = /* @__PURE__ */
|
|
2850
|
+
const uploadControl = /* @__PURE__ */ jsx18(
|
|
2833
2851
|
UploadInputControl,
|
|
2834
2852
|
{
|
|
2835
2853
|
...uploadProps,
|
|
@@ -2837,14 +2855,28 @@ var Input = React13.forwardRef((props, ref) => {
|
|
|
2837
2855
|
resolvedId
|
|
2838
2856
|
}
|
|
2839
2857
|
);
|
|
2840
|
-
|
|
2841
|
-
|
|
2858
|
+
const uploadLabel = label2 || uploadOptionalLabel ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
|
|
2859
|
+
renderTextContent(label2, {
|
|
2860
|
+
as: "span",
|
|
2861
|
+
className: "text-[color:var(--sofya-text-default)]",
|
|
2862
|
+
size: "body",
|
|
2863
|
+
style: {
|
|
2864
|
+
fontWeight: 700
|
|
2865
|
+
}
|
|
2866
|
+
}),
|
|
2867
|
+
uploadOptionalLabel ? /* @__PURE__ */ jsx18("span", { className: "ml-2 text-[color:var(--sofya-text-subtle)]", children: renderTextContent(uploadOptionalLabel, {
|
|
2868
|
+
as: "span",
|
|
2869
|
+
className: "text-[color:var(--sofya-text-subtle)]",
|
|
2870
|
+
size: "tiny"
|
|
2871
|
+
}) }) : null
|
|
2872
|
+
] }) : void 0;
|
|
2873
|
+
return /* @__PURE__ */ jsx18(
|
|
2874
|
+
FieldShell,
|
|
2842
2875
|
{
|
|
2843
2876
|
containerClassName: containerClassName2,
|
|
2844
2877
|
control: uploadControl,
|
|
2845
|
-
label:
|
|
2846
|
-
labelClassName: labelClassName2
|
|
2847
|
-
optionalLabel: uploadOptionalLabel
|
|
2878
|
+
label: uploadLabel,
|
|
2879
|
+
labelClassName: labelClassName2
|
|
2848
2880
|
}
|
|
2849
2881
|
);
|
|
2850
2882
|
}
|
|
@@ -2861,8 +2893,8 @@ var Input = React13.forwardRef((props, ref) => {
|
|
|
2861
2893
|
const isSearch = variant === "search";
|
|
2862
2894
|
const resolvedType = type ?? (isSearch ? "search" : void 0);
|
|
2863
2895
|
const ariaLabel = nativeProps["aria-label"] ?? (typeof label === "string" ? label : isSearch ? "Search" : void 0);
|
|
2864
|
-
const nativeControl = isSearch ? /* @__PURE__ */
|
|
2865
|
-
/* @__PURE__ */
|
|
2896
|
+
const nativeControl = isSearch ? /* @__PURE__ */ jsxs11("div", { className: "flex h-[88px] w-full items-center gap-6 rounded-full border border-[color:var(--sofya-border-strong)] bg-card px-8 shadow-none transition-[border-color,box-shadow,background-color] duration-sofya ease-sofya hover:border-[color:var(--sofya-border-hover)] hover:ring-2 hover:ring-[color:var(--sofya-focus-ring-soft)] focus-within:border-transparent focus-within:ring-2 focus-within:ring-[color:var(--sofya-focus-ring-soft)] has-[:active]:border-transparent has-[:active]:ring-2 has-[:active]:ring-[color:var(--sofya-focus-ring-soft)]", children: [
|
|
2897
|
+
/* @__PURE__ */ jsx18(
|
|
2866
2898
|
Icon,
|
|
2867
2899
|
{
|
|
2868
2900
|
"aria-hidden": "true",
|
|
@@ -2871,7 +2903,7 @@ var Input = React13.forwardRef((props, ref) => {
|
|
|
2871
2903
|
size: 32
|
|
2872
2904
|
}
|
|
2873
2905
|
),
|
|
2874
|
-
/* @__PURE__ */
|
|
2906
|
+
/* @__PURE__ */ jsx18(
|
|
2875
2907
|
"input",
|
|
2876
2908
|
{
|
|
2877
2909
|
id: resolvedId,
|
|
@@ -2887,7 +2919,7 @@ var Input = React13.forwardRef((props, ref) => {
|
|
|
2887
2919
|
placeholder: nativeProps.placeholder ?? "Search"
|
|
2888
2920
|
}
|
|
2889
2921
|
)
|
|
2890
|
-
] }) : /* @__PURE__ */
|
|
2922
|
+
] }) : /* @__PURE__ */ jsx18(
|
|
2891
2923
|
"input",
|
|
2892
2924
|
{
|
|
2893
2925
|
id: resolvedId,
|
|
@@ -2901,25 +2933,25 @@ var Input = React13.forwardRef((props, ref) => {
|
|
|
2901
2933
|
"aria-label": ariaLabel
|
|
2902
2934
|
}
|
|
2903
2935
|
);
|
|
2904
|
-
return /* @__PURE__ */
|
|
2905
|
-
|
|
2936
|
+
return /* @__PURE__ */ jsx18(
|
|
2937
|
+
FieldShell,
|
|
2906
2938
|
{
|
|
2907
2939
|
containerClassName,
|
|
2908
2940
|
control: nativeControl,
|
|
2909
2941
|
label: isSearch ? void 0 : label,
|
|
2910
2942
|
labelClassName: isSearch ? void 0 : labelClassName,
|
|
2911
|
-
resolvedId
|
|
2943
|
+
labelHtmlFor: isSearch ? void 0 : resolvedId
|
|
2912
2944
|
}
|
|
2913
2945
|
);
|
|
2914
2946
|
});
|
|
2915
2947
|
Input.displayName = "Input";
|
|
2916
2948
|
|
|
2917
2949
|
// src/components/label.tsx
|
|
2918
|
-
import * as
|
|
2919
|
-
import { jsx as
|
|
2920
|
-
var Label =
|
|
2950
|
+
import * as React18 from "react";
|
|
2951
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
2952
|
+
var Label = React18.forwardRef(
|
|
2921
2953
|
({ children, className, ...props }, ref) => {
|
|
2922
|
-
return /* @__PURE__ */
|
|
2954
|
+
return /* @__PURE__ */ jsx19(
|
|
2923
2955
|
"label",
|
|
2924
2956
|
{
|
|
2925
2957
|
ref,
|
|
@@ -2943,10 +2975,10 @@ var Label = React14.forwardRef(
|
|
|
2943
2975
|
Label.displayName = "Label";
|
|
2944
2976
|
|
|
2945
2977
|
// src/components/link.tsx
|
|
2946
|
-
import * as
|
|
2978
|
+
import * as React19 from "react";
|
|
2947
2979
|
import { Slot as Slot3 } from "@radix-ui/react-slot";
|
|
2948
2980
|
import { cva as cva6 } from "class-variance-authority";
|
|
2949
|
-
import { jsx as
|
|
2981
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
2950
2982
|
var linkVariants = cva6(
|
|
2951
2983
|
"inline bg-[linear-gradient(currentColor,currentColor)] bg-[position:0_100%] bg-no-repeat pb-0 text-primary no-underline transition-[color,background-size,box-shadow] duration-sofya ease-sofya hover:text-[color:var(--sofya-link-hover)] focus-visible:rounded-[4px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0",
|
|
2952
2984
|
{
|
|
@@ -2961,9 +2993,9 @@ var linkVariants = cva6(
|
|
|
2961
2993
|
}
|
|
2962
2994
|
}
|
|
2963
2995
|
);
|
|
2964
|
-
var Link =
|
|
2996
|
+
var Link = React19.forwardRef(function Link2({ asChild = false, children, className, variant = "default", ...props }, ref) {
|
|
2965
2997
|
const Component = asChild ? Slot3 : "a";
|
|
2966
|
-
return /* @__PURE__ */
|
|
2998
|
+
return /* @__PURE__ */ jsx20(
|
|
2967
2999
|
Component,
|
|
2968
3000
|
{
|
|
2969
3001
|
ref,
|
|
@@ -2981,7 +3013,7 @@ var Link = React15.forwardRef(function Link2({ asChild = false, children, classN
|
|
|
2981
3013
|
Link.displayName = "Link";
|
|
2982
3014
|
|
|
2983
3015
|
// src/components/logo.tsx
|
|
2984
|
-
import * as
|
|
3016
|
+
import * as React20 from "react";
|
|
2985
3017
|
|
|
2986
3018
|
// src/components/logo-data.ts
|
|
2987
3019
|
var logoAssets = {
|
|
@@ -3078,7 +3110,7 @@ var logoAssets = {
|
|
|
3078
3110
|
};
|
|
3079
3111
|
|
|
3080
3112
|
// src/components/logo.tsx
|
|
3081
|
-
import { jsx as
|
|
3113
|
+
import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
3082
3114
|
var logoVariants = ["mono", "default", "text", "full"];
|
|
3083
3115
|
var logoSizeOptions = ["sm", "md", "lg", "xl", "2xl"];
|
|
3084
3116
|
var logoSizeScale = {
|
|
@@ -3114,7 +3146,7 @@ function resolveLogoDimensions(variant, size, width, height) {
|
|
|
3114
3146
|
height: resolvedHeight
|
|
3115
3147
|
};
|
|
3116
3148
|
}
|
|
3117
|
-
var Logo =
|
|
3149
|
+
var Logo = React20.forwardRef(function Logo2({
|
|
3118
3150
|
variant = "full",
|
|
3119
3151
|
size = "lg",
|
|
3120
3152
|
width,
|
|
@@ -3125,10 +3157,10 @@ var Logo = React16.forwardRef(function Logo2({
|
|
|
3125
3157
|
...props
|
|
3126
3158
|
}, ref) {
|
|
3127
3159
|
const asset = logoAssets[variant];
|
|
3128
|
-
const titleId =
|
|
3160
|
+
const titleId = React20.useId();
|
|
3129
3161
|
const dimensions = resolveLogoDimensions(variant, size, width, height);
|
|
3130
3162
|
const monoFill = variant === "mono" ? monoColor ?? "currentColor" : void 0;
|
|
3131
|
-
return /* @__PURE__ */
|
|
3163
|
+
return /* @__PURE__ */ jsxs12(
|
|
3132
3164
|
"svg",
|
|
3133
3165
|
{
|
|
3134
3166
|
ref,
|
|
@@ -3143,8 +3175,8 @@ var Logo = React16.forwardRef(function Logo2({
|
|
|
3143
3175
|
focusable: "false",
|
|
3144
3176
|
...props,
|
|
3145
3177
|
children: [
|
|
3146
|
-
title ? /* @__PURE__ */
|
|
3147
|
-
asset.paths.map((path, index) => /* @__PURE__ */
|
|
3178
|
+
title ? /* @__PURE__ */ jsx21("title", { id: titleId, children: title }) : null,
|
|
3179
|
+
asset.paths.map((path, index) => /* @__PURE__ */ jsx21(
|
|
3148
3180
|
"path",
|
|
3149
3181
|
{
|
|
3150
3182
|
d: path.d,
|
|
@@ -3161,10 +3193,12 @@ var Logo = React16.forwardRef(function Logo2({
|
|
|
3161
3193
|
Logo.displayName = "Logo";
|
|
3162
3194
|
|
|
3163
3195
|
// src/components/pagination.tsx
|
|
3196
|
+
import { IconChevronLeft as IconChevronLeft2, IconChevronRight as IconChevronRight2 } from "@tabler/icons-react";
|
|
3164
3197
|
import { Slot as Slot4 } from "@radix-ui/react-slot";
|
|
3165
3198
|
import { cva as cva7 } from "class-variance-authority";
|
|
3166
|
-
|
|
3167
|
-
|
|
3199
|
+
|
|
3200
|
+
// src/lib/inherited-typography.ts
|
|
3201
|
+
var inheritedTypographyStyle = {
|
|
3168
3202
|
color: "inherit",
|
|
3169
3203
|
fontFamily: "inherit",
|
|
3170
3204
|
fontSize: "inherit",
|
|
@@ -3172,6 +3206,9 @@ var inheritTypographyStyle = {
|
|
|
3172
3206
|
letterSpacing: "inherit",
|
|
3173
3207
|
lineHeight: "inherit"
|
|
3174
3208
|
};
|
|
3209
|
+
|
|
3210
|
+
// src/components/pagination.tsx
|
|
3211
|
+
import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
3175
3212
|
var paginationLinkVariants = cva7(
|
|
3176
3213
|
"inline-flex h-10 min-w-10 items-center justify-center rounded-full border border-transparent px-4 [font-family:var(--sofya-text-body-font-family)] text-[length:var(--sofya-text-body-font-size)] font-medium leading-[var(--sofya-text-body-line-height)] tracking-[var(--sofya-text-body-letter-spacing)] text-[color:var(--sofya-text-soft)] no-underline transition-[transform,background-color,border-color,color,box-shadow] duration-sofya ease-sofya motion-safe:active:scale-[0.985] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0",
|
|
3177
3214
|
{
|
|
@@ -3192,7 +3229,7 @@ var paginationLinkVariants = cva7(
|
|
|
3192
3229
|
}
|
|
3193
3230
|
);
|
|
3194
3231
|
function Pagination({ className, ...props }) {
|
|
3195
|
-
return /* @__PURE__ */
|
|
3232
|
+
return /* @__PURE__ */ jsx22(
|
|
3196
3233
|
"nav",
|
|
3197
3234
|
{
|
|
3198
3235
|
"aria-label": "Pagination",
|
|
@@ -3205,7 +3242,7 @@ function PaginationContent({
|
|
|
3205
3242
|
className,
|
|
3206
3243
|
...props
|
|
3207
3244
|
}) {
|
|
3208
|
-
return /* @__PURE__ */
|
|
3245
|
+
return /* @__PURE__ */ jsx22(
|
|
3209
3246
|
"ul",
|
|
3210
3247
|
{
|
|
3211
3248
|
className: cn(
|
|
@@ -3217,7 +3254,7 @@ function PaginationContent({
|
|
|
3217
3254
|
);
|
|
3218
3255
|
}
|
|
3219
3256
|
function PaginationItem({ className, ...props }) {
|
|
3220
|
-
return /* @__PURE__ */
|
|
3257
|
+
return /* @__PURE__ */ jsx22("li", { className: cn("list-none", className), ...props });
|
|
3221
3258
|
}
|
|
3222
3259
|
function PaginationLink({
|
|
3223
3260
|
asChild = false,
|
|
@@ -3227,7 +3264,7 @@ function PaginationLink({
|
|
|
3227
3264
|
...props
|
|
3228
3265
|
}) {
|
|
3229
3266
|
const Component = asChild ? Slot4 : "a";
|
|
3230
|
-
return /* @__PURE__ */
|
|
3267
|
+
return /* @__PURE__ */ jsx22(
|
|
3231
3268
|
Component,
|
|
3232
3269
|
{
|
|
3233
3270
|
"aria-current": isActive ? "page" : void 0,
|
|
@@ -3237,67 +3274,29 @@ function PaginationLink({
|
|
|
3237
3274
|
);
|
|
3238
3275
|
}
|
|
3239
3276
|
function PaginationChevronLeft() {
|
|
3240
|
-
return /* @__PURE__ */
|
|
3241
|
-
"svg",
|
|
3242
|
-
{
|
|
3243
|
-
"aria-hidden": "true",
|
|
3244
|
-
className: "h-4 w-4",
|
|
3245
|
-
viewBox: "0 0 16 16",
|
|
3246
|
-
fill: "none",
|
|
3247
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
3248
|
-
children: /* @__PURE__ */ jsx19(
|
|
3249
|
-
"path",
|
|
3250
|
-
{
|
|
3251
|
-
d: "M9.5 3.5L5 8L9.5 12.5",
|
|
3252
|
-
stroke: "currentColor",
|
|
3253
|
-
strokeWidth: "1.75",
|
|
3254
|
-
strokeLinecap: "round",
|
|
3255
|
-
strokeLinejoin: "round"
|
|
3256
|
-
}
|
|
3257
|
-
)
|
|
3258
|
-
}
|
|
3259
|
-
);
|
|
3277
|
+
return /* @__PURE__ */ jsx22(IconChevronLeft2, { "aria-hidden": "true", className: "h-4 w-4", stroke: 1.75 });
|
|
3260
3278
|
}
|
|
3261
3279
|
function PaginationChevronRight() {
|
|
3262
|
-
return /* @__PURE__ */
|
|
3263
|
-
"svg",
|
|
3264
|
-
{
|
|
3265
|
-
"aria-hidden": "true",
|
|
3266
|
-
className: "h-4 w-4",
|
|
3267
|
-
viewBox: "0 0 16 16",
|
|
3268
|
-
fill: "none",
|
|
3269
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
3270
|
-
children: /* @__PURE__ */ jsx19(
|
|
3271
|
-
"path",
|
|
3272
|
-
{
|
|
3273
|
-
d: "M6.5 3.5L11 8L6.5 12.5",
|
|
3274
|
-
stroke: "currentColor",
|
|
3275
|
-
strokeWidth: "1.75",
|
|
3276
|
-
strokeLinecap: "round",
|
|
3277
|
-
strokeLinejoin: "round"
|
|
3278
|
-
}
|
|
3279
|
-
)
|
|
3280
|
-
}
|
|
3281
|
-
);
|
|
3280
|
+
return /* @__PURE__ */ jsx22(IconChevronRight2, { "aria-hidden": "true", className: "h-4 w-4", stroke: 1.75 });
|
|
3282
3281
|
}
|
|
3283
3282
|
function PaginationPrevious({
|
|
3284
3283
|
className,
|
|
3285
3284
|
text = "Previous",
|
|
3286
3285
|
...props
|
|
3287
3286
|
}) {
|
|
3288
|
-
return /* @__PURE__ */
|
|
3287
|
+
return /* @__PURE__ */ jsxs13(
|
|
3289
3288
|
PaginationLink,
|
|
3290
3289
|
{
|
|
3291
3290
|
"aria-label": "Go to previous page",
|
|
3292
3291
|
className: cn("gap-2 px-4", className),
|
|
3293
3292
|
...props,
|
|
3294
3293
|
children: [
|
|
3295
|
-
/* @__PURE__ */
|
|
3296
|
-
/* @__PURE__ */
|
|
3294
|
+
/* @__PURE__ */ jsx22(PaginationChevronLeft, {}),
|
|
3295
|
+
/* @__PURE__ */ jsx22("span", { className: "hidden sm:block", children: renderTextContent(text, {
|
|
3297
3296
|
as: "span",
|
|
3298
3297
|
className: "block text-inherit",
|
|
3299
3298
|
size: "body",
|
|
3300
|
-
style:
|
|
3299
|
+
style: inheritedTypographyStyle
|
|
3301
3300
|
}) })
|
|
3302
3301
|
]
|
|
3303
3302
|
}
|
|
@@ -3308,20 +3307,20 @@ function PaginationNext({
|
|
|
3308
3307
|
text = "Next",
|
|
3309
3308
|
...props
|
|
3310
3309
|
}) {
|
|
3311
|
-
return /* @__PURE__ */
|
|
3310
|
+
return /* @__PURE__ */ jsxs13(
|
|
3312
3311
|
PaginationLink,
|
|
3313
3312
|
{
|
|
3314
3313
|
"aria-label": "Go to next page",
|
|
3315
3314
|
className: cn("gap-2 px-4", className),
|
|
3316
3315
|
...props,
|
|
3317
3316
|
children: [
|
|
3318
|
-
/* @__PURE__ */
|
|
3317
|
+
/* @__PURE__ */ jsx22("span", { className: "hidden sm:block", children: renderTextContent(text, {
|
|
3319
3318
|
as: "span",
|
|
3320
3319
|
className: "block text-inherit",
|
|
3321
3320
|
size: "body",
|
|
3322
|
-
style:
|
|
3321
|
+
style: inheritedTypographyStyle
|
|
3323
3322
|
}) }),
|
|
3324
|
-
/* @__PURE__ */
|
|
3323
|
+
/* @__PURE__ */ jsx22(PaginationChevronRight, {})
|
|
3325
3324
|
]
|
|
3326
3325
|
}
|
|
3327
3326
|
);
|
|
@@ -3330,7 +3329,7 @@ function PaginationEllipsis({
|
|
|
3330
3329
|
className,
|
|
3331
3330
|
...props
|
|
3332
3331
|
}) {
|
|
3333
|
-
return /* @__PURE__ */
|
|
3332
|
+
return /* @__PURE__ */ jsxs13(
|
|
3334
3333
|
"span",
|
|
3335
3334
|
{
|
|
3336
3335
|
"aria-hidden": "true",
|
|
@@ -3340,35 +3339,35 @@ function PaginationEllipsis({
|
|
|
3340
3339
|
),
|
|
3341
3340
|
...props,
|
|
3342
3341
|
children: [
|
|
3343
|
-
/* @__PURE__ */
|
|
3342
|
+
/* @__PURE__ */ jsx22("span", { children: renderTextContent("...", {
|
|
3344
3343
|
as: "span",
|
|
3345
3344
|
className: "block text-inherit",
|
|
3346
3345
|
size: "h5",
|
|
3347
|
-
style:
|
|
3346
|
+
style: inheritedTypographyStyle
|
|
3348
3347
|
}) }),
|
|
3349
|
-
/* @__PURE__ */
|
|
3348
|
+
/* @__PURE__ */ jsx22("span", { className: "sr-only", children: "More pages" })
|
|
3350
3349
|
]
|
|
3351
3350
|
}
|
|
3352
3351
|
);
|
|
3353
3352
|
}
|
|
3354
3353
|
|
|
3355
3354
|
// src/components/popover.tsx
|
|
3356
|
-
import * as
|
|
3355
|
+
import * as React21 from "react";
|
|
3357
3356
|
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
3358
|
-
import { jsx as
|
|
3357
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
3359
3358
|
var Popover = PopoverPrimitive.Root;
|
|
3360
3359
|
var PopoverTrigger = PopoverPrimitive.Trigger;
|
|
3361
3360
|
var PopoverAnchor = PopoverPrimitive.Anchor;
|
|
3362
3361
|
var PopoverPortal = PopoverPrimitive.Portal;
|
|
3363
3362
|
var PopoverClose = PopoverPrimitive.Close;
|
|
3364
|
-
var PopoverContent =
|
|
3363
|
+
var PopoverContent = React21.forwardRef(function PopoverContent2({
|
|
3365
3364
|
align = "center",
|
|
3366
3365
|
className,
|
|
3367
3366
|
collisionPadding = 8,
|
|
3368
3367
|
sideOffset = 8,
|
|
3369
3368
|
...props
|
|
3370
3369
|
}, ref) {
|
|
3371
|
-
return /* @__PURE__ */
|
|
3370
|
+
return /* @__PURE__ */ jsx23(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx23(
|
|
3372
3371
|
PopoverPrimitive.Content,
|
|
3373
3372
|
{
|
|
3374
3373
|
ref,
|
|
@@ -3385,8 +3384,8 @@ var PopoverContent = React17.forwardRef(function PopoverContent2({
|
|
|
3385
3384
|
) });
|
|
3386
3385
|
});
|
|
3387
3386
|
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
|
3388
|
-
var PopoverTitle =
|
|
3389
|
-
return /* @__PURE__ */
|
|
3387
|
+
var PopoverTitle = React21.forwardRef(function PopoverTitle2({ children, className, ...props }, ref) {
|
|
3388
|
+
return /* @__PURE__ */ jsx23(
|
|
3390
3389
|
"h4",
|
|
3391
3390
|
{
|
|
3392
3391
|
ref,
|
|
@@ -3402,8 +3401,8 @@ var PopoverTitle = React17.forwardRef(function PopoverTitle2({ children, classNa
|
|
|
3402
3401
|
);
|
|
3403
3402
|
});
|
|
3404
3403
|
PopoverTitle.displayName = "PopoverTitle";
|
|
3405
|
-
var PopoverDescription =
|
|
3406
|
-
return /* @__PURE__ */
|
|
3404
|
+
var PopoverDescription = React21.forwardRef(function PopoverDescription2({ children, className, ...props }, ref) {
|
|
3405
|
+
return /* @__PURE__ */ jsx23(
|
|
3407
3406
|
"p",
|
|
3408
3407
|
{
|
|
3409
3408
|
ref,
|
|
@@ -3421,9 +3420,9 @@ var PopoverDescription = React17.forwardRef(function PopoverDescription2({ child
|
|
|
3421
3420
|
PopoverDescription.displayName = "PopoverDescription";
|
|
3422
3421
|
|
|
3423
3422
|
// src/components/progress.tsx
|
|
3424
|
-
import * as
|
|
3423
|
+
import * as React22 from "react";
|
|
3425
3424
|
import * as ProgressPrimitive from "@radix-ui/react-progress";
|
|
3426
|
-
import { jsx as
|
|
3425
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
3427
3426
|
var progressSizeOptions = ["sm", "default", "lg"];
|
|
3428
3427
|
function clampProgressValue(value, max) {
|
|
3429
3428
|
if (Number.isNaN(value)) {
|
|
@@ -3431,7 +3430,7 @@ function clampProgressValue(value, max) {
|
|
|
3431
3430
|
}
|
|
3432
3431
|
return Math.min(Math.max(value, 0), max);
|
|
3433
3432
|
}
|
|
3434
|
-
var Progress =
|
|
3433
|
+
var Progress = React22.forwardRef(function Progress2({
|
|
3435
3434
|
className,
|
|
3436
3435
|
indicatorClassName,
|
|
3437
3436
|
max = 100,
|
|
@@ -3442,7 +3441,7 @@ var Progress = React18.forwardRef(function Progress2({
|
|
|
3442
3441
|
const safeMax = max > 0 ? max : 100;
|
|
3443
3442
|
const resolvedValue = typeof value === "number" ? clampProgressValue(value, safeMax) : null;
|
|
3444
3443
|
const progressScale = resolvedValue === null ? void 0 : Number((resolvedValue / safeMax).toFixed(4));
|
|
3445
|
-
return /* @__PURE__ */
|
|
3444
|
+
return /* @__PURE__ */ jsx24(
|
|
3446
3445
|
ProgressPrimitive.Root,
|
|
3447
3446
|
{
|
|
3448
3447
|
ref,
|
|
@@ -3455,7 +3454,7 @@ var Progress = React18.forwardRef(function Progress2({
|
|
|
3455
3454
|
className
|
|
3456
3455
|
),
|
|
3457
3456
|
...props,
|
|
3458
|
-
children: /* @__PURE__ */
|
|
3457
|
+
children: /* @__PURE__ */ jsx24(
|
|
3459
3458
|
ProgressPrimitive.Indicator,
|
|
3460
3459
|
{
|
|
3461
3460
|
"data-slot": "progress-indicator",
|
|
@@ -3472,12 +3471,12 @@ var Progress = React18.forwardRef(function Progress2({
|
|
|
3472
3471
|
Progress.displayName = ProgressPrimitive.Root.displayName;
|
|
3473
3472
|
|
|
3474
3473
|
// src/components/radio-group.tsx
|
|
3475
|
-
import * as
|
|
3474
|
+
import * as React23 from "react";
|
|
3476
3475
|
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
|
|
3477
|
-
import { jsx as
|
|
3476
|
+
import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
3478
3477
|
var radioGroupOrientationOptions = ["horizontal", "vertical"];
|
|
3479
|
-
var RadioGroup2 =
|
|
3480
|
-
return /* @__PURE__ */
|
|
3478
|
+
var RadioGroup2 = React23.forwardRef(function RadioGroup3({ className, ...props }, ref) {
|
|
3479
|
+
return /* @__PURE__ */ jsx25(
|
|
3481
3480
|
RadioGroupPrimitive.Root,
|
|
3482
3481
|
{
|
|
3483
3482
|
ref,
|
|
@@ -3491,7 +3490,7 @@ var RadioGroup2 = React19.forwardRef(function RadioGroup3({ className, ...props
|
|
|
3491
3490
|
);
|
|
3492
3491
|
});
|
|
3493
3492
|
RadioGroup2.displayName = RadioGroupPrimitive.Root.displayName;
|
|
3494
|
-
var RadioGroupItem =
|
|
3493
|
+
var RadioGroupItem = React23.forwardRef(function RadioGroupItem2({
|
|
3495
3494
|
className,
|
|
3496
3495
|
controlClassName,
|
|
3497
3496
|
description,
|
|
@@ -3503,22 +3502,21 @@ var RadioGroupItem = React19.forwardRef(function RadioGroupItem2({
|
|
|
3503
3502
|
labelClassName,
|
|
3504
3503
|
...props
|
|
3505
3504
|
}, ref) {
|
|
3506
|
-
const generatedId =
|
|
3505
|
+
const generatedId = React23.useId();
|
|
3507
3506
|
const resolvedId = id ?? generatedId;
|
|
3508
3507
|
const labelId = label ? `${resolvedId}-label` : void 0;
|
|
3509
3508
|
const descriptionId = description ? `${resolvedId}-description` : void 0;
|
|
3510
3509
|
const alignClassName = description ? "items-start" : "items-center";
|
|
3511
|
-
return /* @__PURE__ */
|
|
3510
|
+
return /* @__PURE__ */ jsxs14(
|
|
3512
3511
|
"label",
|
|
3513
3512
|
{
|
|
3514
|
-
className:
|
|
3515
|
-
"flex w-fit gap-4",
|
|
3513
|
+
className: selectionControlContainerClasses({
|
|
3516
3514
|
alignClassName,
|
|
3517
|
-
|
|
3518
|
-
|
|
3519
|
-
),
|
|
3515
|
+
className,
|
|
3516
|
+
disabled
|
|
3517
|
+
}),
|
|
3520
3518
|
children: [
|
|
3521
|
-
/* @__PURE__ */
|
|
3519
|
+
/* @__PURE__ */ jsx25(
|
|
3522
3520
|
RadioGroupPrimitive.Item,
|
|
3523
3521
|
{
|
|
3524
3522
|
ref,
|
|
@@ -3528,11 +3526,13 @@ var RadioGroupItem = React19.forwardRef(function RadioGroupItem2({
|
|
|
3528
3526
|
"aria-describedby": descriptionId,
|
|
3529
3527
|
"data-slot": "radio-group-item",
|
|
3530
3528
|
className: cn(
|
|
3531
|
-
"peer mt-0 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full
|
|
3529
|
+
"peer mt-0 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-primary-foreground outline-none",
|
|
3530
|
+
selectionControlControlBaseClasses,
|
|
3531
|
+
"focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0 data-[state=checked]:border-primary data-[state=checked]:bg-primary aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/20",
|
|
3532
3532
|
controlClassName
|
|
3533
3533
|
),
|
|
3534
3534
|
...props,
|
|
3535
|
-
children: /* @__PURE__ */
|
|
3535
|
+
children: /* @__PURE__ */ jsx25(RadioGroupPrimitive.Indicator, { asChild: true, children: /* @__PURE__ */ jsx25(
|
|
3536
3536
|
"span",
|
|
3537
3537
|
{
|
|
3538
3538
|
"data-slot": "radio-group-indicator",
|
|
@@ -3544,13 +3544,13 @@ var RadioGroupItem = React19.forwardRef(function RadioGroupItem2({
|
|
|
3544
3544
|
) })
|
|
3545
3545
|
}
|
|
3546
3546
|
),
|
|
3547
|
-
label || description ? /* @__PURE__ */
|
|
3548
|
-
label ? /* @__PURE__ */
|
|
3547
|
+
label || description ? /* @__PURE__ */ jsxs14("span", { className: selectionControlContentBaseClasses, children: [
|
|
3548
|
+
label ? /* @__PURE__ */ jsx25(
|
|
3549
3549
|
"span",
|
|
3550
3550
|
{
|
|
3551
3551
|
id: labelId,
|
|
3552
3552
|
className: cn(
|
|
3553
|
-
|
|
3553
|
+
selectionControlLabelTextBaseClasses,
|
|
3554
3554
|
labelClassName
|
|
3555
3555
|
),
|
|
3556
3556
|
children: renderTextContent(label, {
|
|
@@ -3560,11 +3560,14 @@ var RadioGroupItem = React19.forwardRef(function RadioGroupItem2({
|
|
|
3560
3560
|
})
|
|
3561
3561
|
}
|
|
3562
3562
|
) : null,
|
|
3563
|
-
description ? /* @__PURE__ */
|
|
3563
|
+
description ? /* @__PURE__ */ jsx25(
|
|
3564
3564
|
"span",
|
|
3565
3565
|
{
|
|
3566
3566
|
id: descriptionId,
|
|
3567
|
-
className: cn(
|
|
3567
|
+
className: cn(
|
|
3568
|
+
selectionControlDescriptionTextBaseClasses,
|
|
3569
|
+
descriptionClassName
|
|
3570
|
+
),
|
|
3568
3571
|
children: renderTextContent(description, {
|
|
3569
3572
|
as: "span",
|
|
3570
3573
|
className: "text-muted-foreground",
|
|
@@ -3580,12 +3583,12 @@ var RadioGroupItem = React19.forwardRef(function RadioGroupItem2({
|
|
|
3580
3583
|
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
|
|
3581
3584
|
|
|
3582
3585
|
// src/components/scroll-area.tsx
|
|
3583
|
-
import * as
|
|
3586
|
+
import * as React24 from "react";
|
|
3584
3587
|
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
|
|
3585
|
-
import { jsx as
|
|
3588
|
+
import { jsx as jsx26 } from "react/jsx-runtime";
|
|
3586
3589
|
var scrollAreaOrientationOptions = ["horizontal", "vertical"];
|
|
3587
|
-
var ScrollArea =
|
|
3588
|
-
return /* @__PURE__ */
|
|
3590
|
+
var ScrollArea = React24.forwardRef(function ScrollArea2({ className, ...props }, ref) {
|
|
3591
|
+
return /* @__PURE__ */ jsx26(
|
|
3589
3592
|
ScrollAreaPrimitive.Root,
|
|
3590
3593
|
{
|
|
3591
3594
|
ref,
|
|
@@ -3596,8 +3599,8 @@ var ScrollArea = React20.forwardRef(function ScrollArea2({ className, ...props }
|
|
|
3596
3599
|
);
|
|
3597
3600
|
});
|
|
3598
3601
|
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
|
|
3599
|
-
var ScrollAreaViewport =
|
|
3600
|
-
return /* @__PURE__ */
|
|
3602
|
+
var ScrollAreaViewport = React24.forwardRef(function ScrollAreaViewport2({ className, ...props }, ref) {
|
|
3603
|
+
return /* @__PURE__ */ jsx26(
|
|
3601
3604
|
ScrollAreaPrimitive.Viewport,
|
|
3602
3605
|
{
|
|
3603
3606
|
ref,
|
|
@@ -3611,8 +3614,8 @@ var ScrollAreaViewport = React20.forwardRef(function ScrollAreaViewport2({ class
|
|
|
3611
3614
|
);
|
|
3612
3615
|
});
|
|
3613
3616
|
ScrollAreaViewport.displayName = ScrollAreaPrimitive.Viewport.displayName;
|
|
3614
|
-
var ScrollAreaScrollbar =
|
|
3615
|
-
return /* @__PURE__ */
|
|
3617
|
+
var ScrollAreaScrollbar = React24.forwardRef(function ScrollAreaScrollbar2({ className, orientation = "vertical", thumbClassName, ...props }, ref) {
|
|
3618
|
+
return /* @__PURE__ */ jsx26(
|
|
3616
3619
|
ScrollAreaPrimitive.Scrollbar,
|
|
3617
3620
|
{
|
|
3618
3621
|
ref,
|
|
@@ -3623,7 +3626,7 @@ var ScrollAreaScrollbar = React20.forwardRef(function ScrollAreaScrollbar2({ cla
|
|
|
3623
3626
|
className
|
|
3624
3627
|
),
|
|
3625
3628
|
...props,
|
|
3626
|
-
children: /* @__PURE__ */
|
|
3629
|
+
children: /* @__PURE__ */ jsx26(
|
|
3627
3630
|
ScrollAreaPrimitive.Thumb,
|
|
3628
3631
|
{
|
|
3629
3632
|
"data-slot": "scroll-area-thumb",
|
|
@@ -3637,8 +3640,8 @@ var ScrollAreaScrollbar = React20.forwardRef(function ScrollAreaScrollbar2({ cla
|
|
|
3637
3640
|
);
|
|
3638
3641
|
});
|
|
3639
3642
|
ScrollAreaScrollbar.displayName = ScrollAreaPrimitive.Scrollbar.displayName;
|
|
3640
|
-
var ScrollAreaCorner =
|
|
3641
|
-
return /* @__PURE__ */
|
|
3643
|
+
var ScrollAreaCorner = React24.forwardRef(function ScrollAreaCorner2({ className, ...props }, ref) {
|
|
3644
|
+
return /* @__PURE__ */ jsx26(
|
|
3642
3645
|
ScrollAreaPrimitive.Corner,
|
|
3643
3646
|
{
|
|
3644
3647
|
ref,
|
|
@@ -3651,22 +3654,19 @@ var ScrollAreaCorner = React20.forwardRef(function ScrollAreaCorner2({ className
|
|
|
3651
3654
|
ScrollAreaCorner.displayName = ScrollAreaPrimitive.Corner.displayName;
|
|
3652
3655
|
|
|
3653
3656
|
// src/components/select.tsx
|
|
3654
|
-
import * as
|
|
3657
|
+
import * as React25 from "react";
|
|
3655
3658
|
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
3656
|
-
|
|
3657
|
-
|
|
3658
|
-
|
|
3659
|
-
|
|
3660
|
-
|
|
3661
|
-
|
|
3662
|
-
letterSpacing: "inherit",
|
|
3663
|
-
lineHeight: "inherit"
|
|
3664
|
-
};
|
|
3659
|
+
|
|
3660
|
+
// src/lib/form-control-classes.ts
|
|
3661
|
+
var formControlBaseClasses = "flex w-full items-center justify-between gap-4 rounded-[10px] border border-[color:var(--sofya-border-strong)] bg-card px-4 text-left [font-family:var(--sofya-text-body-font-family)] text-[length:var(--sofya-text-body-font-size)] [font-weight:var(--sofya-text-body-font-weight)] leading-[var(--sofya-text-body-line-height)] tracking-[var(--sofya-text-body-letter-spacing)] text-[color:var(--sofya-text-default)] shadow-none transition-[border-color,box-shadow,background-color,color] duration-sofya ease-sofya hover:border-[color:var(--sofya-border-hover)] focus:outline-none focus:ring-2 focus:ring-[color:var(--sofya-focus-ring-soft)] focus:ring-offset-0 active:border-transparent active:ring-2 active:ring-[color:var(--sofya-focus-ring-soft)] disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus:ring-destructive/20 data-[placeholder]:text-[color:var(--sofya-text-placeholder)]";
|
|
3662
|
+
|
|
3663
|
+
// src/components/select.tsx
|
|
3664
|
+
import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
3665
3665
|
var selectSizeOptions = ["default", "sm"];
|
|
3666
3666
|
var Select = SelectPrimitive.Root;
|
|
3667
3667
|
var SelectGroup = SelectPrimitive.Group;
|
|
3668
|
-
var SelectValue =
|
|
3669
|
-
return /* @__PURE__ */
|
|
3668
|
+
var SelectValue = React25.forwardRef(function SelectValue2({ className, ...props }, ref) {
|
|
3669
|
+
return /* @__PURE__ */ jsx27(
|
|
3670
3670
|
Text,
|
|
3671
3671
|
{
|
|
3672
3672
|
ref,
|
|
@@ -3674,34 +3674,28 @@ var SelectValue = React21.forwardRef(function SelectValue2({ className, ...props
|
|
|
3674
3674
|
"data-slot": "select-value",
|
|
3675
3675
|
className: cn("block truncate text-inherit", className),
|
|
3676
3676
|
size: "body",
|
|
3677
|
-
style:
|
|
3678
|
-
|
|
3679
|
-
fontSize: "inherit",
|
|
3680
|
-
fontWeight: "inherit",
|
|
3681
|
-
lineHeight: "inherit",
|
|
3682
|
-
letterSpacing: "inherit",
|
|
3683
|
-
color: "inherit"
|
|
3684
|
-
},
|
|
3685
|
-
children: /* @__PURE__ */ jsx24(SelectPrimitive.Value, { className: "block truncate", ...props })
|
|
3677
|
+
style: inheritedTypographyStyle,
|
|
3678
|
+
children: /* @__PURE__ */ jsx27(SelectPrimitive.Value, { className: "block truncate", ...props })
|
|
3686
3679
|
}
|
|
3687
3680
|
);
|
|
3688
3681
|
});
|
|
3689
3682
|
SelectValue.displayName = SelectPrimitive.Value.displayName;
|
|
3690
|
-
var SelectTrigger =
|
|
3691
|
-
return /* @__PURE__ */
|
|
3683
|
+
var SelectTrigger = React25.forwardRef(function SelectTrigger2({ className, children, size = "default", ...props }, ref) {
|
|
3684
|
+
return /* @__PURE__ */ jsxs15(
|
|
3692
3685
|
SelectPrimitive.Trigger,
|
|
3693
3686
|
{
|
|
3694
3687
|
ref,
|
|
3695
3688
|
"data-slot": "select-trigger",
|
|
3696
3689
|
"data-size": size,
|
|
3697
3690
|
className: cn(
|
|
3698
|
-
|
|
3691
|
+
formControlBaseClasses,
|
|
3692
|
+
"data-[size=default]:h-10 data-[size=default]:py-2 data-[size=sm]:h-9 data-[size=sm]:px-2 data-[size=sm]:text-[14px] data-[size=sm]:leading-5 [&>span]:line-clamp-1 [&>span]:flex-1",
|
|
3699
3693
|
className
|
|
3700
3694
|
),
|
|
3701
3695
|
...props,
|
|
3702
3696
|
children: [
|
|
3703
3697
|
children,
|
|
3704
|
-
/* @__PURE__ */
|
|
3698
|
+
/* @__PURE__ */ jsx27(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx27(
|
|
3705
3699
|
Icon,
|
|
3706
3700
|
{
|
|
3707
3701
|
name: "caret-down",
|
|
@@ -3714,8 +3708,8 @@ var SelectTrigger = React21.forwardRef(function SelectTrigger2({ className, chil
|
|
|
3714
3708
|
);
|
|
3715
3709
|
});
|
|
3716
3710
|
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
3717
|
-
var SelectScrollUpButton =
|
|
3718
|
-
return /* @__PURE__ */
|
|
3711
|
+
var SelectScrollUpButton = React25.forwardRef(function SelectScrollUpButton2({ className, ...props }, ref) {
|
|
3712
|
+
return /* @__PURE__ */ jsx27(
|
|
3719
3713
|
SelectPrimitive.ScrollUpButton,
|
|
3720
3714
|
{
|
|
3721
3715
|
ref,
|
|
@@ -3725,13 +3719,13 @@ var SelectScrollUpButton = React21.forwardRef(function SelectScrollUpButton2({ c
|
|
|
3725
3719
|
className
|
|
3726
3720
|
),
|
|
3727
3721
|
...props,
|
|
3728
|
-
children: /* @__PURE__ */
|
|
3722
|
+
children: /* @__PURE__ */ jsx27(Icon, { name: "caret-up", size: 12 })
|
|
3729
3723
|
}
|
|
3730
3724
|
);
|
|
3731
3725
|
});
|
|
3732
3726
|
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
3733
|
-
var SelectScrollDownButton =
|
|
3734
|
-
return /* @__PURE__ */
|
|
3727
|
+
var SelectScrollDownButton = React25.forwardRef(function SelectScrollDownButton2({ className, ...props }, ref) {
|
|
3728
|
+
return /* @__PURE__ */ jsx27(
|
|
3735
3729
|
SelectPrimitive.ScrollDownButton,
|
|
3736
3730
|
{
|
|
3737
3731
|
ref,
|
|
@@ -3741,13 +3735,13 @@ var SelectScrollDownButton = React21.forwardRef(function SelectScrollDownButton2
|
|
|
3741
3735
|
className
|
|
3742
3736
|
),
|
|
3743
3737
|
...props,
|
|
3744
|
-
children: /* @__PURE__ */
|
|
3738
|
+
children: /* @__PURE__ */ jsx27(Icon, { name: "caret-down", size: 12 })
|
|
3745
3739
|
}
|
|
3746
3740
|
);
|
|
3747
3741
|
});
|
|
3748
3742
|
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
|
|
3749
|
-
var SelectContent =
|
|
3750
|
-
return /* @__PURE__ */
|
|
3743
|
+
var SelectContent = React25.forwardRef(function SelectContent2({ className, children, position = "popper", ...props }, ref) {
|
|
3744
|
+
return /* @__PURE__ */ jsx27(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs15(
|
|
3751
3745
|
SelectPrimitive.Content,
|
|
3752
3746
|
{
|
|
3753
3747
|
ref,
|
|
@@ -3760,8 +3754,8 @@ var SelectContent = React21.forwardRef(function SelectContent2({ className, chil
|
|
|
3760
3754
|
),
|
|
3761
3755
|
...props,
|
|
3762
3756
|
children: [
|
|
3763
|
-
/* @__PURE__ */
|
|
3764
|
-
/* @__PURE__ */
|
|
3757
|
+
/* @__PURE__ */ jsx27(SelectScrollUpButton, {}),
|
|
3758
|
+
/* @__PURE__ */ jsx27(
|
|
3765
3759
|
SelectPrimitive.Viewport,
|
|
3766
3760
|
{
|
|
3767
3761
|
"data-slot": "select-viewport",
|
|
@@ -3769,14 +3763,14 @@ var SelectContent = React21.forwardRef(function SelectContent2({ className, chil
|
|
|
3769
3763
|
children
|
|
3770
3764
|
}
|
|
3771
3765
|
),
|
|
3772
|
-
/* @__PURE__ */
|
|
3766
|
+
/* @__PURE__ */ jsx27(SelectScrollDownButton, {})
|
|
3773
3767
|
]
|
|
3774
3768
|
}
|
|
3775
3769
|
) });
|
|
3776
3770
|
});
|
|
3777
3771
|
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
3778
|
-
var SelectLabel =
|
|
3779
|
-
return /* @__PURE__ */
|
|
3772
|
+
var SelectLabel = React25.forwardRef(function SelectLabel2({ className, ...props }, ref) {
|
|
3773
|
+
return /* @__PURE__ */ jsx27(
|
|
3780
3774
|
SelectPrimitive.Label,
|
|
3781
3775
|
{
|
|
3782
3776
|
ref,
|
|
@@ -3798,8 +3792,8 @@ var SelectLabel = React21.forwardRef(function SelectLabel2({ className, ...props
|
|
|
3798
3792
|
);
|
|
3799
3793
|
});
|
|
3800
3794
|
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
3801
|
-
var SelectItem =
|
|
3802
|
-
return /* @__PURE__ */
|
|
3795
|
+
var SelectItem = React25.forwardRef(function SelectItem2({ className, children, ...props }, ref) {
|
|
3796
|
+
return /* @__PURE__ */ jsxs15(
|
|
3803
3797
|
SelectPrimitive.Item,
|
|
3804
3798
|
{
|
|
3805
3799
|
ref,
|
|
@@ -3810,20 +3804,20 @@ var SelectItem = React21.forwardRef(function SelectItem2({ className, children,
|
|
|
3810
3804
|
),
|
|
3811
3805
|
...props,
|
|
3812
3806
|
children: [
|
|
3813
|
-
/* @__PURE__ */
|
|
3807
|
+
/* @__PURE__ */ jsx27(SelectPrimitive.ItemText, { className: "truncate", children: renderTextContent(children, {
|
|
3814
3808
|
as: "span",
|
|
3815
3809
|
className: "block truncate text-[color:var(--sofya-text-default)]",
|
|
3816
3810
|
size: "body",
|
|
3817
|
-
style:
|
|
3811
|
+
style: inheritedTypographyStyle
|
|
3818
3812
|
}) }),
|
|
3819
|
-
/* @__PURE__ */
|
|
3813
|
+
/* @__PURE__ */ jsx27(SelectPrimitive.ItemIndicator, { asChild: true, children: /* @__PURE__ */ jsx27("span", { className: "absolute right-4 inline-flex h-4 w-4 items-center justify-center text-primary", children: /* @__PURE__ */ jsx27(Icon, { name: "check", size: 14 }) }) })
|
|
3820
3814
|
]
|
|
3821
3815
|
}
|
|
3822
3816
|
);
|
|
3823
3817
|
});
|
|
3824
3818
|
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
3825
|
-
var SelectSeparator =
|
|
3826
|
-
return /* @__PURE__ */
|
|
3819
|
+
var SelectSeparator = React25.forwardRef(function SelectSeparator2({ className, ...props }, ref) {
|
|
3820
|
+
return /* @__PURE__ */ jsx27(
|
|
3827
3821
|
SelectPrimitive.Separator,
|
|
3828
3822
|
{
|
|
3829
3823
|
ref,
|
|
@@ -3836,11 +3830,11 @@ var SelectSeparator = React21.forwardRef(function SelectSeparator2({ className,
|
|
|
3836
3830
|
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
|
3837
3831
|
|
|
3838
3832
|
// src/components/separator.tsx
|
|
3839
|
-
import * as
|
|
3833
|
+
import * as React26 from "react";
|
|
3840
3834
|
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
|
3841
|
-
import { jsx as
|
|
3842
|
-
var Separator2 =
|
|
3843
|
-
return /* @__PURE__ */
|
|
3835
|
+
import { jsx as jsx28 } from "react/jsx-runtime";
|
|
3836
|
+
var Separator2 = React26.forwardRef(function Separator3({ className, decorative = true, orientation = "horizontal", ...props }, ref) {
|
|
3837
|
+
return /* @__PURE__ */ jsx28(
|
|
3844
3838
|
SeparatorPrimitive.Root,
|
|
3845
3839
|
{
|
|
3846
3840
|
ref,
|
|
@@ -3859,8 +3853,8 @@ var Separator2 = React22.forwardRef(function Separator3({ className, decorative
|
|
|
3859
3853
|
Separator2.displayName = SeparatorPrimitive.Root.displayName;
|
|
3860
3854
|
|
|
3861
3855
|
// src/components/slider.tsx
|
|
3862
|
-
import * as
|
|
3863
|
-
import { jsx as
|
|
3856
|
+
import * as React27 from "react";
|
|
3857
|
+
import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
3864
3858
|
function clampSliderValue(value, min, max) {
|
|
3865
3859
|
if (Number.isNaN(value)) {
|
|
3866
3860
|
return min;
|
|
@@ -3885,7 +3879,7 @@ function resolveSliderMeasurement(value, fallback) {
|
|
|
3885
3879
|
function isTextValue(value) {
|
|
3886
3880
|
return typeof value === "string" || typeof value === "number";
|
|
3887
3881
|
}
|
|
3888
|
-
var Slider =
|
|
3882
|
+
var Slider = React27.forwardRef(function Slider2({
|
|
3889
3883
|
className,
|
|
3890
3884
|
defaultValue,
|
|
3891
3885
|
formatValue,
|
|
@@ -3908,23 +3902,28 @@ var Slider = React23.forwardRef(function Slider2({
|
|
|
3908
3902
|
valueClassName,
|
|
3909
3903
|
...props
|
|
3910
3904
|
}, ref) {
|
|
3911
|
-
const resolvedId =
|
|
3905
|
+
const resolvedId = React27.useId();
|
|
3912
3906
|
const inputId = id ?? resolvedId;
|
|
3913
3907
|
const safeMin = min;
|
|
3914
3908
|
const safeMax = resolveSliderMax(safeMin, max);
|
|
3915
|
-
const
|
|
3916
|
-
|
|
3917
|
-
|
|
3918
|
-
|
|
3919
|
-
|
|
3920
|
-
|
|
3909
|
+
const [controllableValue, setControllableValue, setUncontrolledValue] = useControllableState({
|
|
3910
|
+
defaultValue: clampSliderValue(defaultValue ?? safeMin, safeMin, safeMax),
|
|
3911
|
+
onChange: onValueChange,
|
|
3912
|
+
value
|
|
3913
|
+
});
|
|
3914
|
+
React27.useEffect(() => {
|
|
3915
|
+
if (value !== void 0) {
|
|
3921
3916
|
return;
|
|
3922
3917
|
}
|
|
3923
|
-
|
|
3924
|
-
(currentValue2) => clampSliderValue(currentValue2, safeMin, safeMax)
|
|
3918
|
+
setUncontrolledValue(
|
|
3919
|
+
(currentValue2) => clampSliderValue(currentValue2 ?? safeMin, safeMin, safeMax)
|
|
3925
3920
|
);
|
|
3926
|
-
}, [
|
|
3927
|
-
const currentValue =
|
|
3921
|
+
}, [safeMax, safeMin, setUncontrolledValue, value]);
|
|
3922
|
+
const currentValue = clampSliderValue(
|
|
3923
|
+
controllableValue ?? safeMin,
|
|
3924
|
+
safeMin,
|
|
3925
|
+
safeMax
|
|
3926
|
+
);
|
|
3928
3927
|
const valueRatio = safeMax === safeMin ? 0 : (currentValue - safeMin) / (safeMax - safeMin);
|
|
3929
3928
|
const valuePercentage = valueRatio * 100;
|
|
3930
3929
|
const formattedValue = formatValue?.(currentValue) ?? currentValue.toString();
|
|
@@ -3956,38 +3955,29 @@ var Slider = React23.forwardRef(function Slider2({
|
|
|
3956
3955
|
safeMin,
|
|
3957
3956
|
safeMax
|
|
3958
3957
|
);
|
|
3959
|
-
|
|
3960
|
-
setInternalValue(nextValue);
|
|
3961
|
-
}
|
|
3958
|
+
setControllableValue(nextValue);
|
|
3962
3959
|
onChange?.(event);
|
|
3963
|
-
onValueChange?.(nextValue);
|
|
3964
3960
|
};
|
|
3965
|
-
return /* @__PURE__ */
|
|
3961
|
+
return /* @__PURE__ */ jsxs16(
|
|
3966
3962
|
"div",
|
|
3967
3963
|
{
|
|
3968
3964
|
"data-slot": "slider",
|
|
3969
3965
|
className: cn("grid w-full gap-2", className),
|
|
3970
3966
|
children: [
|
|
3971
|
-
label || showValue ? /* @__PURE__ */
|
|
3972
|
-
label ? /* @__PURE__ */
|
|
3973
|
-
|
|
3967
|
+
label || showValue ? /* @__PURE__ */ jsxs16("div", { className: "flex items-center justify-between gap-4", children: [
|
|
3968
|
+
label ? /* @__PURE__ */ jsx29(
|
|
3969
|
+
FieldLabel,
|
|
3974
3970
|
{
|
|
3975
3971
|
htmlFor: inputId,
|
|
3976
3972
|
className: cn(
|
|
3977
|
-
"min-w-0
|
|
3973
|
+
"min-w-0",
|
|
3978
3974
|
labelClassName
|
|
3979
3975
|
),
|
|
3980
|
-
|
|
3981
|
-
|
|
3982
|
-
className: "block text-[color:var(--sofya-text-default)]",
|
|
3983
|
-
size: "body",
|
|
3984
|
-
style: {
|
|
3985
|
-
fontWeight: 500
|
|
3986
|
-
}
|
|
3987
|
-
})
|
|
3976
|
+
textClassName: "block min-w-0 text-[color:var(--sofya-text-default)]",
|
|
3977
|
+
children: label
|
|
3988
3978
|
}
|
|
3989
|
-
) : /* @__PURE__ */
|
|
3990
|
-
showValue ? /* @__PURE__ */
|
|
3979
|
+
) : /* @__PURE__ */ jsx29("span", {}),
|
|
3980
|
+
showValue ? /* @__PURE__ */ jsx29(
|
|
3991
3981
|
"div",
|
|
3992
3982
|
{
|
|
3993
3983
|
className: cn(
|
|
@@ -4005,7 +3995,7 @@ var Slider = React23.forwardRef(function Slider2({
|
|
|
4005
3995
|
}
|
|
4006
3996
|
) : null
|
|
4007
3997
|
] }) : null,
|
|
4008
|
-
/* @__PURE__ */
|
|
3998
|
+
/* @__PURE__ */ jsxs16(
|
|
4009
3999
|
"div",
|
|
4010
4000
|
{
|
|
4011
4001
|
"data-slot": "slider-control",
|
|
@@ -4015,7 +4005,7 @@ var Slider = React23.forwardRef(function Slider2({
|
|
|
4015
4005
|
),
|
|
4016
4006
|
style: controlStyle,
|
|
4017
4007
|
children: [
|
|
4018
|
-
/* @__PURE__ */
|
|
4008
|
+
/* @__PURE__ */ jsx29(
|
|
4019
4009
|
"input",
|
|
4020
4010
|
{
|
|
4021
4011
|
...props,
|
|
@@ -4032,7 +4022,7 @@ var Slider = React23.forwardRef(function Slider2({
|
|
|
4032
4022
|
style: inputBoundsStyle
|
|
4033
4023
|
}
|
|
4034
4024
|
),
|
|
4035
|
-
/* @__PURE__ */
|
|
4025
|
+
/* @__PURE__ */ jsx29(
|
|
4036
4026
|
"div",
|
|
4037
4027
|
{
|
|
4038
4028
|
"data-slot": "slider-track",
|
|
@@ -4043,7 +4033,7 @@ var Slider = React23.forwardRef(function Slider2({
|
|
|
4043
4033
|
style: trackBoundsStyle
|
|
4044
4034
|
}
|
|
4045
4035
|
),
|
|
4046
|
-
/* @__PURE__ */
|
|
4036
|
+
/* @__PURE__ */ jsx29(
|
|
4047
4037
|
"div",
|
|
4048
4038
|
{
|
|
4049
4039
|
"data-slot": "slider-range",
|
|
@@ -4054,7 +4044,7 @@ var Slider = React23.forwardRef(function Slider2({
|
|
|
4054
4044
|
style: rangeStyle
|
|
4055
4045
|
}
|
|
4056
4046
|
),
|
|
4057
|
-
/* @__PURE__ */
|
|
4047
|
+
/* @__PURE__ */ jsx29(
|
|
4058
4048
|
"div",
|
|
4059
4049
|
{
|
|
4060
4050
|
"data-slot": "slider-thumb",
|
|
@@ -4075,10 +4065,10 @@ var Slider = React23.forwardRef(function Slider2({
|
|
|
4075
4065
|
Slider.displayName = "Slider";
|
|
4076
4066
|
|
|
4077
4067
|
// src/components/skeleton.tsx
|
|
4078
|
-
import * as
|
|
4079
|
-
import { jsx as
|
|
4080
|
-
var Skeleton =
|
|
4081
|
-
return /* @__PURE__ */
|
|
4068
|
+
import * as React28 from "react";
|
|
4069
|
+
import { jsx as jsx30 } from "react/jsx-runtime";
|
|
4070
|
+
var Skeleton = React28.forwardRef(function Skeleton2({ className, ...props }, ref) {
|
|
4071
|
+
return /* @__PURE__ */ jsx30(
|
|
4082
4072
|
"div",
|
|
4083
4073
|
{
|
|
4084
4074
|
ref,
|
|
@@ -4093,18 +4083,18 @@ var Skeleton = React24.forwardRef(function Skeleton2({ className, ...props }, re
|
|
|
4093
4083
|
Skeleton.displayName = "Skeleton";
|
|
4094
4084
|
|
|
4095
4085
|
// src/components/sonner.tsx
|
|
4096
|
-
import * as
|
|
4086
|
+
import * as React29 from "react";
|
|
4097
4087
|
import {
|
|
4098
4088
|
Toaster as SonnerToaster,
|
|
4099
4089
|
toast
|
|
4100
4090
|
} from "sonner";
|
|
4101
|
-
import { jsx as
|
|
4091
|
+
import { jsx as jsx31 } from "react/jsx-runtime";
|
|
4102
4092
|
var notificationVariantOptions = ["default", "success", "error", "warning"];
|
|
4103
4093
|
function ToastStatusIcon({
|
|
4104
4094
|
iconName,
|
|
4105
4095
|
className
|
|
4106
4096
|
}) {
|
|
4107
|
-
return /* @__PURE__ */
|
|
4097
|
+
return /* @__PURE__ */ jsx31(
|
|
4108
4098
|
"span",
|
|
4109
4099
|
{
|
|
4110
4100
|
"aria-hidden": "true",
|
|
@@ -4112,7 +4102,7 @@ function ToastStatusIcon({
|
|
|
4112
4102
|
"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border shadow-sofya-sm",
|
|
4113
4103
|
className
|
|
4114
4104
|
),
|
|
4115
|
-
children: /* @__PURE__ */
|
|
4105
|
+
children: /* @__PURE__ */ jsx31(Icon, { name: iconName, size: 16 })
|
|
4116
4106
|
}
|
|
4117
4107
|
);
|
|
4118
4108
|
}
|
|
@@ -4133,35 +4123,35 @@ var defaultToastClassNames = {
|
|
|
4133
4123
|
loading: "border-border bg-card text-foreground"
|
|
4134
4124
|
};
|
|
4135
4125
|
var defaultToastIcons = {
|
|
4136
|
-
success: /* @__PURE__ */
|
|
4126
|
+
success: /* @__PURE__ */ jsx31(
|
|
4137
4127
|
ToastStatusIcon,
|
|
4138
4128
|
{
|
|
4139
4129
|
iconName: "check",
|
|
4140
4130
|
className: "border-success/15 bg-success/12 text-success"
|
|
4141
4131
|
}
|
|
4142
4132
|
),
|
|
4143
|
-
error: /* @__PURE__ */
|
|
4133
|
+
error: /* @__PURE__ */ jsx31(
|
|
4144
4134
|
ToastStatusIcon,
|
|
4145
4135
|
{
|
|
4146
4136
|
iconName: "x",
|
|
4147
4137
|
className: "border-destructive/15 bg-destructive/12 text-destructive"
|
|
4148
4138
|
}
|
|
4149
4139
|
),
|
|
4150
|
-
warning: /* @__PURE__ */
|
|
4140
|
+
warning: /* @__PURE__ */ jsx31(
|
|
4151
4141
|
ToastStatusIcon,
|
|
4152
4142
|
{
|
|
4153
4143
|
iconName: "question",
|
|
4154
4144
|
className: "border-warning/20 bg-warning/15 text-foreground"
|
|
4155
4145
|
}
|
|
4156
4146
|
),
|
|
4157
|
-
info: /* @__PURE__ */
|
|
4147
|
+
info: /* @__PURE__ */ jsx31(
|
|
4158
4148
|
ToastStatusIcon,
|
|
4159
4149
|
{
|
|
4160
4150
|
iconName: "question",
|
|
4161
4151
|
className: "border-primary/15 bg-primary/10 text-primary"
|
|
4162
4152
|
}
|
|
4163
4153
|
),
|
|
4164
|
-
close: /* @__PURE__ */
|
|
4154
|
+
close: /* @__PURE__ */ jsx31(Icon, { name: "x", size: 12 })
|
|
4165
4155
|
};
|
|
4166
4156
|
function mergeToastClassNames(overrides) {
|
|
4167
4157
|
return {
|
|
@@ -4169,7 +4159,7 @@ function mergeToastClassNames(overrides) {
|
|
|
4169
4159
|
...overrides
|
|
4170
4160
|
};
|
|
4171
4161
|
}
|
|
4172
|
-
var Toaster =
|
|
4162
|
+
var Toaster = React29.forwardRef(
|
|
4173
4163
|
function Toaster2({
|
|
4174
4164
|
className,
|
|
4175
4165
|
closeButton = true,
|
|
@@ -4181,7 +4171,7 @@ var Toaster = React25.forwardRef(
|
|
|
4181
4171
|
visibleToasts = 5,
|
|
4182
4172
|
...props
|
|
4183
4173
|
}, ref) {
|
|
4184
|
-
return /* @__PURE__ */
|
|
4174
|
+
return /* @__PURE__ */ jsx31(
|
|
4185
4175
|
SonnerToaster,
|
|
4186
4176
|
{
|
|
4187
4177
|
ref,
|
|
@@ -4211,10 +4201,11 @@ var Toaster = React25.forwardRef(
|
|
|
4211
4201
|
Toaster.displayName = "Toaster";
|
|
4212
4202
|
|
|
4213
4203
|
// src/components/spinner.tsx
|
|
4214
|
-
import * as
|
|
4215
|
-
import {
|
|
4204
|
+
import * as React30 from "react";
|
|
4205
|
+
import { IconLoader2 as IconLoader22 } from "@tabler/icons-react";
|
|
4206
|
+
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
4216
4207
|
var spinnerSizeOptions = ["sm", "default", "lg"];
|
|
4217
|
-
var Spinner =
|
|
4208
|
+
var Spinner = React30.forwardRef(function Spinner2({
|
|
4218
4209
|
"aria-label": ariaLabelProp,
|
|
4219
4210
|
"aria-labelledby": ariaLabelledby,
|
|
4220
4211
|
className,
|
|
@@ -4223,15 +4214,12 @@ var Spinner = React26.forwardRef(function Spinner2({
|
|
|
4223
4214
|
...props
|
|
4224
4215
|
}, ref) {
|
|
4225
4216
|
const ariaLabel = ariaLabelProp ?? (ariaLabelledby ? void 0 : "Loading");
|
|
4226
|
-
return /* @__PURE__ */
|
|
4227
|
-
|
|
4217
|
+
return /* @__PURE__ */ jsx32(
|
|
4218
|
+
IconLoader22,
|
|
4228
4219
|
{
|
|
4229
4220
|
ref,
|
|
4230
4221
|
"data-size": size,
|
|
4231
4222
|
"data-slot": "spinner",
|
|
4232
|
-
viewBox: "0 0 24 24",
|
|
4233
|
-
fill: "none",
|
|
4234
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
4235
4223
|
role,
|
|
4236
4224
|
"aria-label": ariaLabel,
|
|
4237
4225
|
"aria-labelledby": ariaLabelledby,
|
|
@@ -4239,30 +4227,18 @@ var Spinner = React26.forwardRef(function Spinner2({
|
|
|
4239
4227
|
"shrink-0 animate-spin text-primary data-[size=sm]:h-3.5 data-[size=sm]:w-3.5 data-[size=default]:h-4 data-[size=default]:w-4 data-[size=lg]:h-6 data-[size=lg]:w-6",
|
|
4240
4228
|
className
|
|
4241
4229
|
),
|
|
4242
|
-
...props
|
|
4243
|
-
children: [
|
|
4244
|
-
/* @__PURE__ */ jsx29("circle", { cx: "12", cy: "12", r: "9", className: "opacity-20", stroke: "currentColor", strokeWidth: "3" }),
|
|
4245
|
-
/* @__PURE__ */ jsx29(
|
|
4246
|
-
"path",
|
|
4247
|
-
{
|
|
4248
|
-
d: "M21 12A9 9 0 0 0 12 3",
|
|
4249
|
-
stroke: "currentColor",
|
|
4250
|
-
strokeWidth: "3",
|
|
4251
|
-
strokeLinecap: "round"
|
|
4252
|
-
}
|
|
4253
|
-
)
|
|
4254
|
-
]
|
|
4230
|
+
...props
|
|
4255
4231
|
}
|
|
4256
4232
|
);
|
|
4257
4233
|
});
|
|
4258
4234
|
Spinner.displayName = "Spinner";
|
|
4259
4235
|
|
|
4260
4236
|
// src/components/switch.tsx
|
|
4261
|
-
import * as
|
|
4237
|
+
import * as React31 from "react";
|
|
4262
4238
|
import * as SwitchPrimitives from "@radix-ui/react-switch";
|
|
4263
|
-
import { jsx as
|
|
4264
|
-
var Switch =
|
|
4265
|
-
return /* @__PURE__ */
|
|
4239
|
+
import { jsx as jsx33 } from "react/jsx-runtime";
|
|
4240
|
+
var Switch = React31.forwardRef(({ className, ...props }, ref) => {
|
|
4241
|
+
return /* @__PURE__ */ jsx33(
|
|
4266
4242
|
SwitchPrimitives.Root,
|
|
4267
4243
|
{
|
|
4268
4244
|
className: cn(
|
|
@@ -4271,7 +4247,7 @@ var Switch = React27.forwardRef(({ className, ...props }, ref) => {
|
|
|
4271
4247
|
),
|
|
4272
4248
|
...props,
|
|
4273
4249
|
ref,
|
|
4274
|
-
children: /* @__PURE__ */
|
|
4250
|
+
children: /* @__PURE__ */ jsx33(
|
|
4275
4251
|
SwitchPrimitives.Thumb,
|
|
4276
4252
|
{
|
|
4277
4253
|
className: "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-sm ring-0 transition-transform duration-sofya ease-sofya data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
|
|
@@ -4284,8 +4260,8 @@ Switch.displayName = SwitchPrimitives.Root.displayName;
|
|
|
4284
4260
|
|
|
4285
4261
|
// src/components/table.tsx
|
|
4286
4262
|
import { cva as cva8 } from "class-variance-authority";
|
|
4287
|
-
import * as
|
|
4288
|
-
import { jsx as
|
|
4263
|
+
import * as React32 from "react";
|
|
4264
|
+
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
4289
4265
|
var tableCellVariantOptions = ["default", "primary", "muted"];
|
|
4290
4266
|
var tableStatusToneOptions = [
|
|
4291
4267
|
"active",
|
|
@@ -4335,21 +4311,13 @@ var tableActionButtonVariants = cva8(
|
|
|
4335
4311
|
}
|
|
4336
4312
|
}
|
|
4337
4313
|
);
|
|
4338
|
-
var
|
|
4339
|
-
|
|
4340
|
-
fontSize: "inherit",
|
|
4341
|
-
fontWeight: "inherit",
|
|
4342
|
-
lineHeight: "inherit",
|
|
4343
|
-
letterSpacing: "inherit",
|
|
4344
|
-
color: "inherit"
|
|
4345
|
-
};
|
|
4346
|
-
var Table = React28.forwardRef(function Table2({ className, ...props }, ref) {
|
|
4347
|
-
return /* @__PURE__ */ jsx31(
|
|
4314
|
+
var Table = React32.forwardRef(function Table2({ className, ...props }, ref) {
|
|
4315
|
+
return /* @__PURE__ */ jsx34(
|
|
4348
4316
|
"div",
|
|
4349
4317
|
{
|
|
4350
4318
|
"data-slot": "table-container",
|
|
4351
4319
|
className: "relative w-full overflow-x-auto",
|
|
4352
|
-
children: /* @__PURE__ */
|
|
4320
|
+
children: /* @__PURE__ */ jsx34(
|
|
4353
4321
|
"table",
|
|
4354
4322
|
{
|
|
4355
4323
|
"data-slot": "table",
|
|
@@ -4364,8 +4332,8 @@ var Table = React28.forwardRef(function Table2({ className, ...props }, ref) {
|
|
|
4364
4332
|
}
|
|
4365
4333
|
);
|
|
4366
4334
|
});
|
|
4367
|
-
var TableHeader =
|
|
4368
|
-
return /* @__PURE__ */
|
|
4335
|
+
var TableHeader = React32.forwardRef(function TableHeader2({ className, ...props }, ref) {
|
|
4336
|
+
return /* @__PURE__ */ jsx34(
|
|
4369
4337
|
"thead",
|
|
4370
4338
|
{
|
|
4371
4339
|
"data-slot": "table-header",
|
|
@@ -4378,8 +4346,8 @@ var TableHeader = React28.forwardRef(function TableHeader2({ className, ...props
|
|
|
4378
4346
|
}
|
|
4379
4347
|
);
|
|
4380
4348
|
});
|
|
4381
|
-
var TableBody =
|
|
4382
|
-
return /* @__PURE__ */
|
|
4349
|
+
var TableBody = React32.forwardRef(function TableBody2({ className, ...props }, ref) {
|
|
4350
|
+
return /* @__PURE__ */ jsx34(
|
|
4383
4351
|
"tbody",
|
|
4384
4352
|
{
|
|
4385
4353
|
"data-slot": "table-body",
|
|
@@ -4389,8 +4357,8 @@ var TableBody = React28.forwardRef(function TableBody2({ className, ...props },
|
|
|
4389
4357
|
}
|
|
4390
4358
|
);
|
|
4391
4359
|
});
|
|
4392
|
-
var TableFooter =
|
|
4393
|
-
return /* @__PURE__ */
|
|
4360
|
+
var TableFooter = React32.forwardRef(function TableFooter2({ className, ...props }, ref) {
|
|
4361
|
+
return /* @__PURE__ */ jsx34(
|
|
4394
4362
|
"tfoot",
|
|
4395
4363
|
{
|
|
4396
4364
|
"data-slot": "table-footer",
|
|
@@ -4403,8 +4371,8 @@ var TableFooter = React28.forwardRef(function TableFooter2({ className, ...props
|
|
|
4403
4371
|
}
|
|
4404
4372
|
);
|
|
4405
4373
|
});
|
|
4406
|
-
var TableRow =
|
|
4407
|
-
return /* @__PURE__ */
|
|
4374
|
+
var TableRow = React32.forwardRef(function TableRow2({ className, ...props }, ref) {
|
|
4375
|
+
return /* @__PURE__ */ jsx34(
|
|
4408
4376
|
"tr",
|
|
4409
4377
|
{
|
|
4410
4378
|
"data-slot": "table-row",
|
|
@@ -4417,8 +4385,8 @@ var TableRow = React28.forwardRef(function TableRow2({ className, ...props }, re
|
|
|
4417
4385
|
}
|
|
4418
4386
|
);
|
|
4419
4387
|
});
|
|
4420
|
-
var TableHead =
|
|
4421
|
-
return /* @__PURE__ */
|
|
4388
|
+
var TableHead = React32.forwardRef(function TableHead2({ className, children, ...props }, ref) {
|
|
4389
|
+
return /* @__PURE__ */ jsx34(
|
|
4422
4390
|
"th",
|
|
4423
4391
|
{
|
|
4424
4392
|
"data-slot": "table-head",
|
|
@@ -4432,14 +4400,14 @@ var TableHead = React28.forwardRef(function TableHead2({ className, children, ..
|
|
|
4432
4400
|
as: "span",
|
|
4433
4401
|
className: "inline-flex items-center gap-2 text-inherit",
|
|
4434
4402
|
size: "tiny",
|
|
4435
|
-
style:
|
|
4403
|
+
style: inheritedTypographyStyle
|
|
4436
4404
|
})
|
|
4437
4405
|
}
|
|
4438
4406
|
);
|
|
4439
4407
|
});
|
|
4440
|
-
var TableCell =
|
|
4408
|
+
var TableCell = React32.forwardRef(
|
|
4441
4409
|
function TableCell2({ className, variant, children, ...props }, ref) {
|
|
4442
|
-
return /* @__PURE__ */
|
|
4410
|
+
return /* @__PURE__ */ jsx34(
|
|
4443
4411
|
"td",
|
|
4444
4412
|
{
|
|
4445
4413
|
"data-slot": "table-cell",
|
|
@@ -4450,14 +4418,14 @@ var TableCell = React28.forwardRef(
|
|
|
4450
4418
|
as: "span",
|
|
4451
4419
|
className: "block text-inherit [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
|
|
4452
4420
|
size: "body",
|
|
4453
|
-
style:
|
|
4421
|
+
style: inheritedTypographyStyle
|
|
4454
4422
|
})
|
|
4455
4423
|
}
|
|
4456
4424
|
);
|
|
4457
4425
|
}
|
|
4458
4426
|
);
|
|
4459
|
-
var TableCaption =
|
|
4460
|
-
return /* @__PURE__ */
|
|
4427
|
+
var TableCaption = React32.forwardRef(function TableCaption2({ className, children, ...props }, ref) {
|
|
4428
|
+
return /* @__PURE__ */ jsx34(
|
|
4461
4429
|
"caption",
|
|
4462
4430
|
{
|
|
4463
4431
|
"data-slot": "table-caption",
|
|
@@ -4471,7 +4439,7 @@ var TableCaption = React28.forwardRef(function TableCaption2({ className, childr
|
|
|
4471
4439
|
as: "span",
|
|
4472
4440
|
className: "block text-inherit",
|
|
4473
4441
|
size: "body",
|
|
4474
|
-
style:
|
|
4442
|
+
style: inheritedTypographyStyle
|
|
4475
4443
|
})
|
|
4476
4444
|
}
|
|
4477
4445
|
);
|
|
@@ -4482,7 +4450,7 @@ function TableStatusBadge({
|
|
|
4482
4450
|
children,
|
|
4483
4451
|
...props
|
|
4484
4452
|
}) {
|
|
4485
|
-
return /* @__PURE__ */
|
|
4453
|
+
return /* @__PURE__ */ jsx34(
|
|
4486
4454
|
Badge,
|
|
4487
4455
|
{
|
|
4488
4456
|
variant: "pill",
|
|
@@ -4492,13 +4460,13 @@ function TableStatusBadge({
|
|
|
4492
4460
|
as: "span",
|
|
4493
4461
|
className: "inline-flex items-center gap-2 text-inherit [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
|
|
4494
4462
|
size: "tiny",
|
|
4495
|
-
style:
|
|
4463
|
+
style: inheritedTypographyStyle
|
|
4496
4464
|
})
|
|
4497
4465
|
}
|
|
4498
4466
|
);
|
|
4499
4467
|
}
|
|
4500
|
-
var TableActionButton =
|
|
4501
|
-
return /* @__PURE__ */
|
|
4468
|
+
var TableActionButton = React32.forwardRef(function TableActionButton2({ className, tone, type = "button", children, ...props }, ref) {
|
|
4469
|
+
return /* @__PURE__ */ jsx34(
|
|
4502
4470
|
Button,
|
|
4503
4471
|
{
|
|
4504
4472
|
ref,
|
|
@@ -4511,13 +4479,13 @@ var TableActionButton = React28.forwardRef(function TableActionButton2({ classNa
|
|
|
4511
4479
|
as: "span",
|
|
4512
4480
|
className: "inline-flex items-center justify-center text-inherit [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
|
|
4513
4481
|
size: "body",
|
|
4514
|
-
style:
|
|
4482
|
+
style: inheritedTypographyStyle
|
|
4515
4483
|
})
|
|
4516
4484
|
}
|
|
4517
4485
|
);
|
|
4518
4486
|
});
|
|
4519
|
-
var TableActions =
|
|
4520
|
-
return /* @__PURE__ */
|
|
4487
|
+
var TableActions = React32.forwardRef(function TableActions2({ className, ...props }, ref) {
|
|
4488
|
+
return /* @__PURE__ */ jsx34(
|
|
4521
4489
|
"div",
|
|
4522
4490
|
{
|
|
4523
4491
|
ref,
|
|
@@ -4538,10 +4506,10 @@ TableActionButton.displayName = "TableActionButton";
|
|
|
4538
4506
|
TableActions.displayName = "TableActions";
|
|
4539
4507
|
|
|
4540
4508
|
// src/components/tabs.tsx
|
|
4541
|
-
import * as
|
|
4509
|
+
import * as React33 from "react";
|
|
4542
4510
|
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
4543
4511
|
import { motion as motion3 } from "motion/react";
|
|
4544
|
-
import { jsx as
|
|
4512
|
+
import { jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
4545
4513
|
function resolveDefaultValue(items, defaultValue) {
|
|
4546
4514
|
if (defaultValue) {
|
|
4547
4515
|
return defaultValue;
|
|
@@ -4560,33 +4528,26 @@ function Tabs({
|
|
|
4560
4528
|
...props
|
|
4561
4529
|
}) {
|
|
4562
4530
|
const resolvedDefaultValue = resolveDefaultValue(items, defaultValue);
|
|
4563
|
-
const
|
|
4564
|
-
|
|
4565
|
-
|
|
4566
|
-
|
|
4567
|
-
|
|
4568
|
-
|
|
4569
|
-
|
|
4531
|
+
const [currentValue, setCurrentValue, setUncontrolledCurrentValue] = useControllableState({
|
|
4532
|
+
defaultValue: resolvedDefaultValue,
|
|
4533
|
+
onChange: onValueChange,
|
|
4534
|
+
value
|
|
4535
|
+
});
|
|
4536
|
+
const indicatorLayoutId = React33.useId();
|
|
4537
|
+
React33.useEffect(() => {
|
|
4538
|
+
if (value === void 0) {
|
|
4539
|
+
setUncontrolledCurrentValue(resolvedDefaultValue);
|
|
4570
4540
|
}
|
|
4571
|
-
}, [
|
|
4572
|
-
const handleValueChange = React29.useCallback(
|
|
4573
|
-
(nextValue) => {
|
|
4574
|
-
if (!isControlled) {
|
|
4575
|
-
setSelectedValue(nextValue);
|
|
4576
|
-
}
|
|
4577
|
-
onValueChange?.(nextValue);
|
|
4578
|
-
},
|
|
4579
|
-
[isControlled, onValueChange]
|
|
4580
|
-
);
|
|
4541
|
+
}, [resolvedDefaultValue, setUncontrolledCurrentValue, value]);
|
|
4581
4542
|
return /* @__PURE__ */ jsxs17(
|
|
4582
4543
|
TabsPrimitive.Root,
|
|
4583
4544
|
{
|
|
4584
4545
|
className: cn("w-full", className),
|
|
4585
|
-
onValueChange:
|
|
4546
|
+
onValueChange: setCurrentValue,
|
|
4586
4547
|
value: currentValue,
|
|
4587
4548
|
...props,
|
|
4588
4549
|
children: [
|
|
4589
|
-
/* @__PURE__ */
|
|
4550
|
+
/* @__PURE__ */ jsx35(
|
|
4590
4551
|
TabsPrimitive.List,
|
|
4591
4552
|
{
|
|
4592
4553
|
"aria-label": "Subtelas navegaveis",
|
|
@@ -4609,7 +4570,7 @@ function Tabs({
|
|
|
4609
4570
|
item.triggerClassName
|
|
4610
4571
|
),
|
|
4611
4572
|
children: [
|
|
4612
|
-
isActive ? /* @__PURE__ */
|
|
4573
|
+
isActive ? /* @__PURE__ */ jsx35(
|
|
4613
4574
|
motion3.span,
|
|
4614
4575
|
{
|
|
4615
4576
|
"aria-hidden": "true",
|
|
@@ -4620,14 +4581,14 @@ function Tabs({
|
|
|
4620
4581
|
}
|
|
4621
4582
|
) : null,
|
|
4622
4583
|
/* @__PURE__ */ jsxs17("span", { className: "relative z-10 inline-flex items-center gap-2", children: [
|
|
4623
|
-
item.loading ? /* @__PURE__ */
|
|
4584
|
+
item.loading ? /* @__PURE__ */ jsx35(
|
|
4624
4585
|
"span",
|
|
4625
4586
|
{
|
|
4626
4587
|
"aria-hidden": "true",
|
|
4627
4588
|
className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent"
|
|
4628
4589
|
}
|
|
4629
4590
|
) : null,
|
|
4630
|
-
/* @__PURE__ */
|
|
4591
|
+
/* @__PURE__ */ jsx35("span", { children: renderTextContent(item.label, {
|
|
4631
4592
|
as: "span",
|
|
4632
4593
|
className: "block text-inherit",
|
|
4633
4594
|
size: "h5"
|
|
@@ -4641,7 +4602,7 @@ function Tabs({
|
|
|
4641
4602
|
}
|
|
4642
4603
|
),
|
|
4643
4604
|
items.map(
|
|
4644
|
-
(item) => item.content !== void 0 ? /* @__PURE__ */
|
|
4605
|
+
(item) => item.content !== void 0 ? /* @__PURE__ */ jsx35(
|
|
4645
4606
|
TabsPrimitive.Content,
|
|
4646
4607
|
{
|
|
4647
4608
|
value: item.value,
|
|
@@ -4664,9 +4625,9 @@ function Tabs({
|
|
|
4664
4625
|
Tabs.displayName = "Tabs";
|
|
4665
4626
|
|
|
4666
4627
|
// src/components/textarea.tsx
|
|
4667
|
-
import * as
|
|
4668
|
-
import { jsx as
|
|
4669
|
-
var Textarea =
|
|
4628
|
+
import * as React34 from "react";
|
|
4629
|
+
import { jsx as jsx36 } from "react/jsx-runtime";
|
|
4630
|
+
var Textarea = React34.forwardRef(
|
|
4670
4631
|
({
|
|
4671
4632
|
className,
|
|
4672
4633
|
containerClassName,
|
|
@@ -4676,10 +4637,10 @@ var Textarea = React30.forwardRef(
|
|
|
4676
4637
|
rows = 5,
|
|
4677
4638
|
...props
|
|
4678
4639
|
}, ref) => {
|
|
4679
|
-
const generatedId =
|
|
4640
|
+
const generatedId = React34.useId();
|
|
4680
4641
|
const resolvedId = id ?? generatedId;
|
|
4681
4642
|
const ariaLabel = props["aria-label"] ?? (typeof label === "string" ? label : void 0);
|
|
4682
|
-
const control = /* @__PURE__ */
|
|
4643
|
+
const control = /* @__PURE__ */ jsx36(
|
|
4683
4644
|
"textarea",
|
|
4684
4645
|
{
|
|
4685
4646
|
className: cn(
|
|
@@ -4693,43 +4654,29 @@ var Textarea = React30.forwardRef(
|
|
|
4693
4654
|
"aria-label": ariaLabel
|
|
4694
4655
|
}
|
|
4695
4656
|
);
|
|
4696
|
-
|
|
4697
|
-
|
|
4698
|
-
|
|
4699
|
-
|
|
4700
|
-
|
|
4701
|
-
|
|
4702
|
-
|
|
4703
|
-
|
|
4704
|
-
|
|
4705
|
-
|
|
4706
|
-
),
|
|
4707
|
-
htmlFor: resolvedId,
|
|
4708
|
-
children: renderTextContent(label, {
|
|
4709
|
-
as: "span",
|
|
4710
|
-
className: "block text-[color:var(--sofya-text-default)]",
|
|
4711
|
-
size: "body",
|
|
4712
|
-
style: {
|
|
4713
|
-
fontWeight: 500
|
|
4714
|
-
}
|
|
4715
|
-
})
|
|
4716
|
-
}
|
|
4717
|
-
) : null,
|
|
4718
|
-
control
|
|
4719
|
-
] });
|
|
4657
|
+
return /* @__PURE__ */ jsx36(
|
|
4658
|
+
FieldShell,
|
|
4659
|
+
{
|
|
4660
|
+
control,
|
|
4661
|
+
containerClassName,
|
|
4662
|
+
label,
|
|
4663
|
+
labelClassName,
|
|
4664
|
+
labelHtmlFor: resolvedId
|
|
4665
|
+
}
|
|
4666
|
+
);
|
|
4720
4667
|
}
|
|
4721
4668
|
);
|
|
4722
4669
|
Textarea.displayName = "Textarea";
|
|
4723
4670
|
|
|
4724
4671
|
// src/components/tooltip.tsx
|
|
4725
|
-
import * as
|
|
4672
|
+
import * as React35 from "react";
|
|
4726
4673
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
4727
|
-
import { jsx as
|
|
4674
|
+
import { jsx as jsx37 } from "react/jsx-runtime";
|
|
4728
4675
|
var TooltipProvider = TooltipPrimitive.Provider;
|
|
4729
4676
|
var Tooltip = TooltipPrimitive.Root;
|
|
4730
4677
|
var TooltipTrigger = TooltipPrimitive.Trigger;
|
|
4731
|
-
var TooltipContent =
|
|
4732
|
-
return /* @__PURE__ */
|
|
4678
|
+
var TooltipContent = React35.forwardRef(function TooltipContent2({ className, sideOffset = 8, ...props }, ref) {
|
|
4679
|
+
return /* @__PURE__ */ jsx37(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx37(
|
|
4733
4680
|
TooltipPrimitive.Content,
|
|
4734
4681
|
{
|
|
4735
4682
|
ref,
|
|
@@ -4753,13 +4700,13 @@ var TooltipContent = React31.forwardRef(function TooltipContent2({ className, si
|
|
|
4753
4700
|
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
|
4754
4701
|
|
|
4755
4702
|
// src/theme/provider.tsx
|
|
4756
|
-
import * as
|
|
4703
|
+
import * as React36 from "react";
|
|
4757
4704
|
import {
|
|
4758
4705
|
createWhitelabelTheme,
|
|
4759
4706
|
defaultTheme,
|
|
4760
4707
|
themeToCssVariables
|
|
4761
4708
|
} from "@sofya-ds/tokens";
|
|
4762
|
-
import { jsx as
|
|
4709
|
+
import { jsx as jsx38 } from "react/jsx-runtime";
|
|
4763
4710
|
var SOFYA_FONT_LINKS = [
|
|
4764
4711
|
{
|
|
4765
4712
|
id: "preconnect-googleapis",
|
|
@@ -4779,7 +4726,7 @@ var SOFYA_FONT_LINKS = [
|
|
|
4779
4726
|
}
|
|
4780
4727
|
];
|
|
4781
4728
|
function useSofyaFontLinks() {
|
|
4782
|
-
|
|
4729
|
+
React36.useEffect(() => {
|
|
4783
4730
|
if (typeof document === "undefined") {
|
|
4784
4731
|
return;
|
|
4785
4732
|
}
|
|
@@ -4812,7 +4759,7 @@ function SofyaProvider({
|
|
|
4812
4759
|
useSofyaFontLinks();
|
|
4813
4760
|
const theme = createWhitelabelTheme(overrides ?? {}, preset);
|
|
4814
4761
|
const cssVariables = themeToCssVariables(theme);
|
|
4815
|
-
return /* @__PURE__ */
|
|
4762
|
+
return /* @__PURE__ */ jsx38(
|
|
4816
4763
|
"div",
|
|
4817
4764
|
{
|
|
4818
4765
|
"data-sofya-theme": theme.name,
|
|
@@ -4973,6 +4920,7 @@ export {
|
|
|
4973
4920
|
hexToHslChannels,
|
|
4974
4921
|
iconColorOptions,
|
|
4975
4922
|
iconNames,
|
|
4923
|
+
iconSizeMap,
|
|
4976
4924
|
iconSizeOptions,
|
|
4977
4925
|
inputVariantOptions,
|
|
4978
4926
|
isTextContent,
|