@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.cjs
CHANGED
|
@@ -158,6 +158,7 @@ __export(index_exports, {
|
|
|
158
158
|
hexToHslChannels: () => import_tokens2.hexToHslChannels,
|
|
159
159
|
iconColorOptions: () => iconColorOptions,
|
|
160
160
|
iconNames: () => iconNames,
|
|
161
|
+
iconSizeMap: () => iconSizeMap,
|
|
161
162
|
iconSizeOptions: () => iconSizeOptions,
|
|
162
163
|
inputVariantOptions: () => inputVariantOptions,
|
|
163
164
|
isTextContent: () => isTextContent,
|
|
@@ -301,107 +302,108 @@ var AccordionPrimitive = __toESM(require("@radix-ui/react-accordion"), 1);
|
|
|
301
302
|
var React2 = __toESM(require("react"), 1);
|
|
302
303
|
|
|
303
304
|
// src/components/icon-data.ts
|
|
304
|
-
var
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
{ d: "M15 11V15H11", strokeWidth: 1.75, strokeLinecap: "round" },
|
|
344
|
-
{ d: "M5 15H1V11", strokeWidth: 1.75, strokeLinecap: "round" }
|
|
345
|
-
] },
|
|
346
|
-
"corners-in 1": { viewBox: "0 0 16 16", strokes: [
|
|
347
|
-
{ d: "M1 1H5V5", strokeWidth: 1.75, strokeLinecap: "round" },
|
|
348
|
-
{ d: "M11 1H15V5", strokeWidth: 1.75, strokeLinecap: "round" },
|
|
349
|
-
{ d: "M15 11V15H11", strokeWidth: 1.75, strokeLinecap: "round" },
|
|
350
|
-
{ d: "M1 11H5V15", strokeWidth: 1.75, strokeLinecap: "round" }
|
|
351
|
-
] },
|
|
352
|
-
"Volume": { viewBox: "0 0 12 14", strokes: [
|
|
353
|
-
{ d: "M1 13L1 7", strokeWidth: 2, strokeLinecap: "round" },
|
|
354
|
-
{ d: "M6 13L6 4", strokeWidth: 2, strokeLinecap: "round" },
|
|
355
|
-
{ d: "M11 13L11 1", strokeWidth: 2, strokeLinecap: "round" }
|
|
356
|
-
] }
|
|
305
|
+
var import_icons_react = require("@tabler/icons-react");
|
|
306
|
+
var tablerIconRegistry = {
|
|
307
|
+
IconAdjustmentsHorizontalFilled: import_icons_react.IconAdjustmentsHorizontalFilled,
|
|
308
|
+
IconArrowUp: import_icons_react.IconArrowUp,
|
|
309
|
+
IconArchive: import_icons_react.IconArchive,
|
|
310
|
+
IconBuildingHospital: import_icons_react.IconBuildingHospital,
|
|
311
|
+
IconBooks: import_icons_react.IconBooks,
|
|
312
|
+
IconBulb: import_icons_react.IconBulb,
|
|
313
|
+
IconChartBar: import_icons_react.IconChartBar,
|
|
314
|
+
IconCheck: import_icons_react.IconCheck,
|
|
315
|
+
IconChecklist: import_icons_react.IconChecklist,
|
|
316
|
+
IconChevronLeft: import_icons_react.IconChevronLeft,
|
|
317
|
+
IconChevronDown: import_icons_react.IconChevronDown,
|
|
318
|
+
IconChevronUp: import_icons_react.IconChevronUp,
|
|
319
|
+
IconFile: import_icons_react.IconFile,
|
|
320
|
+
IconFolders: import_icons_react.IconFolders,
|
|
321
|
+
IconFolder: import_icons_react.IconFolder,
|
|
322
|
+
IconHelpCircle: import_icons_react.IconHelpCircle,
|
|
323
|
+
IconLanguage: import_icons_react.IconLanguage,
|
|
324
|
+
IconMapPin: import_icons_react.IconMapPin,
|
|
325
|
+
IconMessages: import_icons_react.IconMessages,
|
|
326
|
+
IconMicrophone: import_icons_react.IconMicrophone,
|
|
327
|
+
IconPencil: import_icons_react.IconPencil,
|
|
328
|
+
IconPlus: import_icons_react.IconPlus,
|
|
329
|
+
IconSchool: import_icons_react.IconSchool,
|
|
330
|
+
IconSearch: import_icons_react.IconSearch,
|
|
331
|
+
IconSparkles: import_icons_react.IconSparkles,
|
|
332
|
+
IconUser: import_icons_react.IconUser,
|
|
333
|
+
IconUserFilled: import_icons_react.IconUserFilled,
|
|
334
|
+
IconUserCircle: import_icons_react.IconUserCircle,
|
|
335
|
+
IconUserSearch: import_icons_react.IconUserSearch,
|
|
336
|
+
IconUsers: import_icons_react.IconUsers,
|
|
337
|
+
IconUsersGroup: import_icons_react.IconUsersGroup,
|
|
338
|
+
IconTrash: import_icons_react.IconTrash,
|
|
339
|
+
IconTrashFilled: import_icons_react.IconTrashFilled,
|
|
340
|
+
IconTrashOff: import_icons_react.IconTrashOff,
|
|
341
|
+
IconTrashX: import_icons_react.IconTrashX,
|
|
342
|
+
IconChevronRight: import_icons_react.IconChevronRight,
|
|
343
|
+
IconX: import_icons_react.IconX
|
|
357
344
|
};
|
|
358
|
-
var
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
"
|
|
372
|
-
"
|
|
373
|
-
"
|
|
374
|
-
"
|
|
375
|
-
"
|
|
376
|
-
"
|
|
377
|
-
"
|
|
378
|
-
"
|
|
379
|
-
"
|
|
380
|
-
"
|
|
381
|
-
"
|
|
382
|
-
"
|
|
383
|
-
"
|
|
384
|
-
"
|
|
385
|
-
"
|
|
386
|
-
"
|
|
387
|
-
"
|
|
388
|
-
"
|
|
389
|
-
"
|
|
390
|
-
"
|
|
391
|
-
"
|
|
392
|
-
"
|
|
393
|
-
"
|
|
394
|
-
"
|
|
395
|
-
"
|
|
396
|
-
"
|
|
345
|
+
var tablerIconNames = Object.keys(tablerIconRegistry).sort(
|
|
346
|
+
(left, right) => left.localeCompare(right)
|
|
347
|
+
);
|
|
348
|
+
function resolveTablerIcon(name) {
|
|
349
|
+
const candidate = tablerIconRegistry[name];
|
|
350
|
+
if (!candidate) {
|
|
351
|
+
throw new Error(
|
|
352
|
+
`Icon could not resolve Tabler icon \`${name}\`. Import it and append it to tablerIconRegistry before using it.`
|
|
353
|
+
);
|
|
354
|
+
}
|
|
355
|
+
return candidate;
|
|
356
|
+
}
|
|
357
|
+
var legacyIconToTablerNameMap = {
|
|
358
|
+
"adjustments-horizontal-filled": "IconAdjustmentsHorizontalFilled",
|
|
359
|
+
"books": "IconBooks",
|
|
360
|
+
"organization": "IconBuildingHospital",
|
|
361
|
+
"locations": "IconMapPin",
|
|
362
|
+
"people": "IconUsers",
|
|
363
|
+
"terminologies": "IconLanguage",
|
|
364
|
+
"guidelines": "IconChecklist",
|
|
365
|
+
"logs": "IconChartBar",
|
|
366
|
+
"profile": "IconUserSearch",
|
|
367
|
+
"experience": "IconSchool",
|
|
368
|
+
"voice": "IconMicrophone",
|
|
369
|
+
"plus": "IconPlus",
|
|
370
|
+
"check": "IconCheck",
|
|
371
|
+
"caret-down": "IconChevronDown",
|
|
372
|
+
"lightbulb": "IconBulb",
|
|
373
|
+
"chats": "IconMessages",
|
|
374
|
+
"file": "IconFile",
|
|
375
|
+
"folders": "IconFolders",
|
|
376
|
+
"sparkle": "IconSparkles",
|
|
377
|
+
"x": "IconX",
|
|
378
|
+
"pencil-simple-line": "IconPencil",
|
|
379
|
+
"search": "IconSearch",
|
|
380
|
+
"arrow-up": "IconArrowUp",
|
|
381
|
+
"question": "IconHelpCircle",
|
|
382
|
+
"user-filled": "IconUserFilled",
|
|
383
|
+
"caret-up": "IconChevronUp",
|
|
384
|
+
"caret-left": "IconChevronLeft",
|
|
385
|
+
"caret-right": "IconChevronRight",
|
|
386
|
+
"users-group": "IconUsersGroup",
|
|
387
|
+
"archive": "IconArchive",
|
|
388
|
+
"folder": "IconFolder",
|
|
389
|
+
"trash": "IconTrash",
|
|
390
|
+
"trash-filled": "IconTrashFilled",
|
|
391
|
+
"trash-off": "IconTrashOff",
|
|
392
|
+
"trash-x": "IconTrashX",
|
|
393
|
+
"delete": "IconTrash",
|
|
394
|
+
"remove": "IconTrashX",
|
|
395
|
+
"lixeira": "IconTrash"
|
|
397
396
|
};
|
|
397
|
+
var iconNames = Object.keys(legacyIconToTablerNameMap);
|
|
398
398
|
var iconRegistry = Object.fromEntries(
|
|
399
|
-
Object.entries(
|
|
400
|
-
|
|
401
|
-
|
|
399
|
+
Object.entries(legacyIconToTablerNameMap).map(([name, tablerName]) => [
|
|
400
|
+
name,
|
|
401
|
+
resolveTablerIcon(tablerName)
|
|
402
402
|
])
|
|
403
403
|
);
|
|
404
|
-
var
|
|
404
|
+
var iconNameMap = Object.fromEntries(
|
|
405
|
+
iconNames.map((name) => [name, name])
|
|
406
|
+
);
|
|
405
407
|
|
|
406
408
|
// src/components/icon.tsx
|
|
407
409
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
@@ -442,7 +444,7 @@ var iconColorOptions = [
|
|
|
442
444
|
"agent-mint",
|
|
443
445
|
"agent-green"
|
|
444
446
|
];
|
|
445
|
-
var
|
|
447
|
+
var iconSizeMap = {
|
|
446
448
|
xs: 12,
|
|
447
449
|
sm: 16,
|
|
448
450
|
md: 20,
|
|
@@ -485,7 +487,7 @@ var iconColorScale = {
|
|
|
485
487
|
"agent-green": "var(--sofya-agent-green)"
|
|
486
488
|
};
|
|
487
489
|
function resolveIconSize(size) {
|
|
488
|
-
return typeof size === "number" ? size :
|
|
490
|
+
return typeof size === "number" ? size : iconSizeMap[size];
|
|
489
491
|
}
|
|
490
492
|
function resolveIconColor(color) {
|
|
491
493
|
if (!color || color === "current") {
|
|
@@ -493,55 +495,43 @@ function resolveIconColor(color) {
|
|
|
493
495
|
}
|
|
494
496
|
return iconColorScale[color];
|
|
495
497
|
}
|
|
496
|
-
var Icon = React2.forwardRef(function Icon2({
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
}
|
|
506
|
-
const
|
|
507
|
-
const
|
|
498
|
+
var Icon = React2.forwardRef(function Icon2(incomingProps, ref) {
|
|
499
|
+
const {
|
|
500
|
+
decorative,
|
|
501
|
+
size = "md",
|
|
502
|
+
color = "current",
|
|
503
|
+
title,
|
|
504
|
+
strokeWidth = 2,
|
|
505
|
+
className,
|
|
506
|
+
style
|
|
507
|
+
} = incomingProps;
|
|
508
|
+
const IconComponent = iconRegistry[incomingProps.name];
|
|
509
|
+
const {
|
|
510
|
+
decorative: _decorative,
|
|
511
|
+
color: _color,
|
|
512
|
+
name: _name,
|
|
513
|
+
size: _size,
|
|
514
|
+
strokeWidth: _strokeWidth,
|
|
515
|
+
title: _title,
|
|
516
|
+
...props
|
|
517
|
+
} = incomingProps;
|
|
508
518
|
const dimension = resolveIconSize(size);
|
|
509
519
|
const resolvedColor = resolveIconColor(color);
|
|
510
520
|
const resolvedStyle = resolvedColor ? { ...style, color: resolvedColor } : style;
|
|
511
|
-
const
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
"svg",
|
|
521
|
+
const isDecorative = decorative ?? !title;
|
|
522
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
523
|
+
IconComponent,
|
|
515
524
|
{
|
|
516
525
|
ref,
|
|
517
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
518
|
-
viewBox: icon.viewBox,
|
|
519
526
|
className: cn("inline-block shrink-0 align-middle", className),
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
"aria-hidden": title ? void 0 : true,
|
|
523
|
-
"aria-labelledby": title ? titleId : void 0,
|
|
527
|
+
role: isDecorative ? void 0 : "img",
|
|
528
|
+
"aria-hidden": isDecorative ? true : void 0,
|
|
524
529
|
focusable: "false",
|
|
525
530
|
...props,
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("title", { id: titleId, children: title }) : null,
|
|
531
|
-
fillPath ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: fillPath, fill: "currentColor" }) : null,
|
|
532
|
-
strokePaths?.map((path, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
533
|
-
"path",
|
|
534
|
-
{
|
|
535
|
-
d: path.d,
|
|
536
|
-
fill: "none",
|
|
537
|
-
stroke: "currentColor",
|
|
538
|
-
strokeWidth: path.strokeWidth ?? strokeWidth,
|
|
539
|
-
strokeLinecap: path.strokeLinecap ?? "round",
|
|
540
|
-
strokeLinejoin: "round"
|
|
541
|
-
},
|
|
542
|
-
`${name}-${index}`
|
|
543
|
-
))
|
|
544
|
-
]
|
|
531
|
+
size: dimension,
|
|
532
|
+
title,
|
|
533
|
+
stroke: strokeWidth,
|
|
534
|
+
style: resolvedStyle
|
|
545
535
|
}
|
|
546
536
|
);
|
|
547
537
|
});
|
|
@@ -1010,10 +1000,10 @@ function Badge({ className, variant, alert, pillTone, ...props }) {
|
|
|
1010
1000
|
}
|
|
1011
1001
|
|
|
1012
1002
|
// src/components/button.tsx
|
|
1013
|
-
var
|
|
1003
|
+
var React8 = __toESM(require("react"), 1);
|
|
1004
|
+
var import_icons_react2 = require("@tabler/icons-react");
|
|
1014
1005
|
var import_react_slot = require("@radix-ui/react-slot");
|
|
1015
1006
|
var import_class_variance_authority4 = require("class-variance-authority");
|
|
1016
|
-
var import_react = require("motion/react");
|
|
1017
1007
|
|
|
1018
1008
|
// src/components/button-language-flags.ts
|
|
1019
1009
|
function createFlagDataUri(svg) {
|
|
@@ -1137,8 +1127,271 @@ var dropdownLanguageFlagSrc = {
|
|
|
1137
1127
|
`)
|
|
1138
1128
|
};
|
|
1139
1129
|
|
|
1140
|
-
// src/components/button.tsx
|
|
1130
|
+
// src/components/button-ripple.tsx
|
|
1131
|
+
var React6 = __toESM(require("react"), 1);
|
|
1132
|
+
var import_react = require("motion/react");
|
|
1141
1133
|
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
1134
|
+
var MAX_ACTIVE_RIPPLES = 3;
|
|
1135
|
+
var buttonRippleVariantClasses = {
|
|
1136
|
+
default: "bg-[hsl(var(--sofya-primary-foreground)/0.82)] mix-blend-screen",
|
|
1137
|
+
gradient: "bg-[hsl(var(--sofya-primary-foreground)/0.8)] mix-blend-screen",
|
|
1138
|
+
dropdown: "bg-[hsl(var(--sofya-primary)/0.36)]",
|
|
1139
|
+
icon: "bg-[hsl(var(--sofya-primary)/0.34)]",
|
|
1140
|
+
language: "bg-[hsl(var(--sofya-background)/0.76)] mix-blend-screen",
|
|
1141
|
+
secondary: "bg-[hsl(var(--sofya-primary)/0.30)]",
|
|
1142
|
+
outline: "bg-[hsl(var(--sofya-primary)/0.32)]",
|
|
1143
|
+
ghost: "bg-[hsl(var(--sofya-primary)/0.28)]",
|
|
1144
|
+
destructive: "bg-[hsl(var(--sofya-destructive-foreground)/0.78)] mix-blend-screen"
|
|
1145
|
+
};
|
|
1146
|
+
var buttonRippleBaseSize = {
|
|
1147
|
+
default: 20,
|
|
1148
|
+
sm: 18,
|
|
1149
|
+
lg: 22,
|
|
1150
|
+
icon: 18
|
|
1151
|
+
};
|
|
1152
|
+
function useButtonRippleState({
|
|
1153
|
+
disabled,
|
|
1154
|
+
onClick,
|
|
1155
|
+
onPointerDown,
|
|
1156
|
+
size,
|
|
1157
|
+
variant
|
|
1158
|
+
}) {
|
|
1159
|
+
const prefersReducedMotion = Boolean((0, import_react.useReducedMotion)());
|
|
1160
|
+
const [ripples, setRipples] = React6.useState([]);
|
|
1161
|
+
const rippleIdRef = React6.useRef(0);
|
|
1162
|
+
const lastRippleAtRef = React6.useRef(0);
|
|
1163
|
+
const handleRippleComplete = React6.useCallback((rippleId) => {
|
|
1164
|
+
setRipples(
|
|
1165
|
+
(currentRipples) => currentRipples.filter((currentRipple) => currentRipple.id !== rippleId)
|
|
1166
|
+
);
|
|
1167
|
+
}, []);
|
|
1168
|
+
const createRipple = React6.useCallback(
|
|
1169
|
+
(currentTarget, clientX, clientY) => {
|
|
1170
|
+
const now = performance.now();
|
|
1171
|
+
if (now - lastRippleAtRef.current < 48) {
|
|
1172
|
+
return;
|
|
1173
|
+
}
|
|
1174
|
+
lastRippleAtRef.current = now;
|
|
1175
|
+
const rect = currentTarget.getBoundingClientRect();
|
|
1176
|
+
const hasPointerPosition = clientX !== void 0 && clientY !== void 0;
|
|
1177
|
+
const x = hasPointerPosition ? clientX - rect.left : rect.width / 2;
|
|
1178
|
+
const y = hasPointerPosition ? clientY - rect.top : rect.height / 2;
|
|
1179
|
+
const radius = Math.max(
|
|
1180
|
+
Math.hypot(x, y),
|
|
1181
|
+
Math.hypot(rect.width - x, y),
|
|
1182
|
+
Math.hypot(x, rect.height - y),
|
|
1183
|
+
Math.hypot(rect.width - x, rect.height - y)
|
|
1184
|
+
);
|
|
1185
|
+
const baseSize = buttonRippleBaseSize[size];
|
|
1186
|
+
const finalDiameter = Math.max(
|
|
1187
|
+
radius * 2 + 24,
|
|
1188
|
+
Math.max(rect.width, rect.height) + 18
|
|
1189
|
+
);
|
|
1190
|
+
setRipples((currentRipples) => {
|
|
1191
|
+
const nextRipple = {
|
|
1192
|
+
id: rippleIdRef.current++,
|
|
1193
|
+
scale: finalDiameter / baseSize,
|
|
1194
|
+
size: baseSize,
|
|
1195
|
+
x: x - baseSize / 2,
|
|
1196
|
+
y: y - baseSize / 2
|
|
1197
|
+
};
|
|
1198
|
+
const nextRipples = [...currentRipples, nextRipple];
|
|
1199
|
+
if (nextRipples.length > MAX_ACTIVE_RIPPLES) {
|
|
1200
|
+
return nextRipples.slice(nextRipples.length - MAX_ACTIVE_RIPPLES);
|
|
1201
|
+
}
|
|
1202
|
+
return nextRipples;
|
|
1203
|
+
});
|
|
1204
|
+
},
|
|
1205
|
+
[size]
|
|
1206
|
+
);
|
|
1207
|
+
const handlePointerDown = React6.useCallback(
|
|
1208
|
+
(event) => {
|
|
1209
|
+
onPointerDown?.(event);
|
|
1210
|
+
if (event.defaultPrevented || disabled) {
|
|
1211
|
+
return;
|
|
1212
|
+
}
|
|
1213
|
+
if (prefersReducedMotion) {
|
|
1214
|
+
return;
|
|
1215
|
+
}
|
|
1216
|
+
if (event.button === 0) {
|
|
1217
|
+
createRipple(
|
|
1218
|
+
event.currentTarget,
|
|
1219
|
+
event.clientX,
|
|
1220
|
+
event.clientY
|
|
1221
|
+
);
|
|
1222
|
+
}
|
|
1223
|
+
},
|
|
1224
|
+
[createRipple, disabled, onPointerDown, prefersReducedMotion]
|
|
1225
|
+
);
|
|
1226
|
+
const handleClick = React6.useCallback(
|
|
1227
|
+
(event) => {
|
|
1228
|
+
if (!disabled && !prefersReducedMotion && event.detail === 0) {
|
|
1229
|
+
createRipple(event.currentTarget);
|
|
1230
|
+
}
|
|
1231
|
+
onClick?.(event);
|
|
1232
|
+
},
|
|
1233
|
+
[createRipple, disabled, onClick, prefersReducedMotion]
|
|
1234
|
+
);
|
|
1235
|
+
return {
|
|
1236
|
+
handleClick,
|
|
1237
|
+
handlePointerDown,
|
|
1238
|
+
handleRippleComplete,
|
|
1239
|
+
prefersReducedMotion,
|
|
1240
|
+
rippleClassName: buttonRippleVariantClasses[variant],
|
|
1241
|
+
ripples
|
|
1242
|
+
};
|
|
1243
|
+
}
|
|
1244
|
+
function ButtonRippleLayer({
|
|
1245
|
+
onAnimationComplete,
|
|
1246
|
+
prefersReducedMotion,
|
|
1247
|
+
rippleClassName,
|
|
1248
|
+
ripples
|
|
1249
|
+
}) {
|
|
1250
|
+
if (ripples.length === 0) {
|
|
1251
|
+
return null;
|
|
1252
|
+
}
|
|
1253
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1254
|
+
"span",
|
|
1255
|
+
{
|
|
1256
|
+
"aria-hidden": "true",
|
|
1257
|
+
className: "pointer-events-none absolute inset-0 z-[1] overflow-hidden rounded-[inherit]",
|
|
1258
|
+
children: ripples.map((ripple) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1259
|
+
import_react.motion.span,
|
|
1260
|
+
{
|
|
1261
|
+
className: cn(
|
|
1262
|
+
"absolute rounded-full will-change-transform transform-gpu",
|
|
1263
|
+
rippleClassName
|
|
1264
|
+
),
|
|
1265
|
+
initial: prefersReducedMotion ? { opacity: 0.32, scale: 0.72 } : { opacity: 0.56, scale: 0 },
|
|
1266
|
+
animate: prefersReducedMotion ? { opacity: 0, scale: 1.02 } : { opacity: [0.56, 0.26, 0], scale: ripple.scale },
|
|
1267
|
+
transition: prefersReducedMotion ? { duration: 0.2, ease: "linear" } : {
|
|
1268
|
+
duration: 0.62,
|
|
1269
|
+
times: [0, 0.35, 1],
|
|
1270
|
+
ease: [0.16, 1, 0.3, 1]
|
|
1271
|
+
},
|
|
1272
|
+
style: {
|
|
1273
|
+
height: ripple.size,
|
|
1274
|
+
left: ripple.x,
|
|
1275
|
+
top: ripple.y,
|
|
1276
|
+
transformOrigin: "center center",
|
|
1277
|
+
width: ripple.size
|
|
1278
|
+
},
|
|
1279
|
+
onAnimationComplete: () => {
|
|
1280
|
+
onAnimationComplete(ripple.id);
|
|
1281
|
+
}
|
|
1282
|
+
},
|
|
1283
|
+
ripple.id
|
|
1284
|
+
))
|
|
1285
|
+
}
|
|
1286
|
+
);
|
|
1287
|
+
}
|
|
1288
|
+
|
|
1289
|
+
// src/components/button-loading-state.ts
|
|
1290
|
+
var React7 = __toESM(require("react"), 1);
|
|
1291
|
+
var BUTTON_SEQUENCE_MS = 250;
|
|
1292
|
+
function useButtonLoadingState({
|
|
1293
|
+
buttonRef,
|
|
1294
|
+
children,
|
|
1295
|
+
leftIcon,
|
|
1296
|
+
loading,
|
|
1297
|
+
rightIcon
|
|
1298
|
+
}) {
|
|
1299
|
+
const expandedWidthRef = React7.useRef(void 0);
|
|
1300
|
+
const previousLoadingRef = React7.useRef(loading);
|
|
1301
|
+
const timeoutsRef = React7.useRef([]);
|
|
1302
|
+
const frameRef = React7.useRef(null);
|
|
1303
|
+
const [animatedWidth, setAnimatedWidth] = React7.useState(void 0);
|
|
1304
|
+
const [loadingPhase, setLoadingPhase] = React7.useState(
|
|
1305
|
+
loading ? "loading" : "idle"
|
|
1306
|
+
);
|
|
1307
|
+
const clearAnimationTimers = React7.useCallback(() => {
|
|
1308
|
+
for (const timeoutId of timeoutsRef.current) {
|
|
1309
|
+
window.clearTimeout(timeoutId);
|
|
1310
|
+
}
|
|
1311
|
+
timeoutsRef.current = [];
|
|
1312
|
+
if (frameRef.current !== null) {
|
|
1313
|
+
window.cancelAnimationFrame(frameRef.current);
|
|
1314
|
+
frameRef.current = null;
|
|
1315
|
+
}
|
|
1316
|
+
}, []);
|
|
1317
|
+
React7.useLayoutEffect(() => {
|
|
1318
|
+
const element = buttonRef.current;
|
|
1319
|
+
if (element && loadingPhase === "idle" && !loading) {
|
|
1320
|
+
expandedWidthRef.current = element.offsetWidth;
|
|
1321
|
+
}
|
|
1322
|
+
if (element && loadingPhase === "loading" && animatedWidth === void 0) {
|
|
1323
|
+
setAnimatedWidth(element.offsetHeight);
|
|
1324
|
+
}
|
|
1325
|
+
}, [animatedWidth, buttonRef, loading, loadingPhase, children, leftIcon, rightIcon]);
|
|
1326
|
+
React7.useEffect(() => {
|
|
1327
|
+
return () => {
|
|
1328
|
+
clearAnimationTimers();
|
|
1329
|
+
};
|
|
1330
|
+
}, [clearAnimationTimers]);
|
|
1331
|
+
React7.useEffect(() => {
|
|
1332
|
+
const element = buttonRef.current;
|
|
1333
|
+
if (!element) {
|
|
1334
|
+
return;
|
|
1335
|
+
}
|
|
1336
|
+
const previousLoading = previousLoadingRef.current;
|
|
1337
|
+
previousLoadingRef.current = loading;
|
|
1338
|
+
if (previousLoading === loading) {
|
|
1339
|
+
return;
|
|
1340
|
+
}
|
|
1341
|
+
clearAnimationTimers();
|
|
1342
|
+
if (loading) {
|
|
1343
|
+
const currentWidth2 = element.offsetWidth;
|
|
1344
|
+
const collapsedWidth = element.offsetHeight;
|
|
1345
|
+
expandedWidthRef.current = currentWidth2;
|
|
1346
|
+
setAnimatedWidth(currentWidth2);
|
|
1347
|
+
setLoadingPhase("hiding-content");
|
|
1348
|
+
timeoutsRef.current.push(
|
|
1349
|
+
window.setTimeout(() => {
|
|
1350
|
+
setLoadingPhase("collapsing");
|
|
1351
|
+
setAnimatedWidth(collapsedWidth);
|
|
1352
|
+
}, BUTTON_SEQUENCE_MS)
|
|
1353
|
+
);
|
|
1354
|
+
timeoutsRef.current.push(
|
|
1355
|
+
window.setTimeout(() => {
|
|
1356
|
+
setLoadingPhase("loading");
|
|
1357
|
+
}, BUTTON_SEQUENCE_MS * 2)
|
|
1358
|
+
);
|
|
1359
|
+
return;
|
|
1360
|
+
}
|
|
1361
|
+
const currentWidth = element.offsetWidth;
|
|
1362
|
+
const expandedWidth = expandedWidthRef.current ?? Math.max(element.scrollWidth, currentWidth);
|
|
1363
|
+
setAnimatedWidth(currentWidth);
|
|
1364
|
+
setLoadingPhase("hiding-spinner");
|
|
1365
|
+
timeoutsRef.current.push(
|
|
1366
|
+
window.setTimeout(() => {
|
|
1367
|
+
setLoadingPhase("expanding");
|
|
1368
|
+
frameRef.current = window.requestAnimationFrame(() => {
|
|
1369
|
+
frameRef.current = window.requestAnimationFrame(() => {
|
|
1370
|
+
setAnimatedWidth(expandedWidth);
|
|
1371
|
+
});
|
|
1372
|
+
});
|
|
1373
|
+
}, BUTTON_SEQUENCE_MS)
|
|
1374
|
+
);
|
|
1375
|
+
timeoutsRef.current.push(
|
|
1376
|
+
window.setTimeout(() => {
|
|
1377
|
+
setLoadingPhase("revealing-content");
|
|
1378
|
+
}, BUTTON_SEQUENCE_MS * 2)
|
|
1379
|
+
);
|
|
1380
|
+
timeoutsRef.current.push(
|
|
1381
|
+
window.setTimeout(() => {
|
|
1382
|
+
setLoadingPhase("idle");
|
|
1383
|
+
setAnimatedWidth(void 0);
|
|
1384
|
+
}, BUTTON_SEQUENCE_MS * 3)
|
|
1385
|
+
);
|
|
1386
|
+
}, [buttonRef, clearAnimationTimers, loading]);
|
|
1387
|
+
return {
|
|
1388
|
+
animatedWidth,
|
|
1389
|
+
loadingPhase
|
|
1390
|
+
};
|
|
1391
|
+
}
|
|
1392
|
+
|
|
1393
|
+
// src/components/button.tsx
|
|
1394
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1142
1395
|
var buttonVariantOptions = [
|
|
1143
1396
|
"default",
|
|
1144
1397
|
"gradient",
|
|
@@ -1151,17 +1404,6 @@ var buttonVariantOptions = [
|
|
|
1151
1404
|
"destructive"
|
|
1152
1405
|
];
|
|
1153
1406
|
var buttonSizeOptions = ["default", "sm", "lg", "icon"];
|
|
1154
|
-
var buttonRippleVariantClasses = {
|
|
1155
|
-
default: "bg-[hsl(var(--sofya-primary-foreground)/0.82)] mix-blend-screen",
|
|
1156
|
-
gradient: "bg-[hsl(var(--sofya-primary-foreground)/0.8)] mix-blend-screen",
|
|
1157
|
-
dropdown: "bg-[hsl(var(--sofya-primary)/0.36)]",
|
|
1158
|
-
icon: "bg-[hsl(var(--sofya-primary)/0.34)]",
|
|
1159
|
-
language: "bg-[hsl(var(--sofya-background)/0.76)] mix-blend-screen",
|
|
1160
|
-
secondary: "bg-[hsl(var(--sofya-primary)/0.30)]",
|
|
1161
|
-
outline: "bg-[hsl(var(--sofya-primary)/0.32)]",
|
|
1162
|
-
ghost: "bg-[hsl(var(--sofya-primary)/0.28)]",
|
|
1163
|
-
destructive: "bg-[hsl(var(--sofya-destructive-foreground)/0.78)] mix-blend-screen"
|
|
1164
|
-
};
|
|
1165
1407
|
var buttonVariants = (0, import_class_variance_authority4.cva)(
|
|
1166
1408
|
"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",
|
|
1167
1409
|
{
|
|
@@ -1190,7 +1432,6 @@ var buttonVariants = (0, import_class_variance_authority4.cva)(
|
|
|
1190
1432
|
}
|
|
1191
1433
|
}
|
|
1192
1434
|
);
|
|
1193
|
-
var BUTTON_SEQUENCE_MS = 250;
|
|
1194
1435
|
var loadingSpinnerSizeClasses = {
|
|
1195
1436
|
default: "h-4 w-4",
|
|
1196
1437
|
sm: "h-3.5 w-3.5",
|
|
@@ -1203,52 +1444,21 @@ var languageButtonSizeClasses = {
|
|
|
1203
1444
|
lg: "h-12 w-12 rounded-full p-0",
|
|
1204
1445
|
icon: "h-11 w-11 rounded-full p-0"
|
|
1205
1446
|
};
|
|
1206
|
-
var buttonRippleBaseSize = {
|
|
1207
|
-
default: 20,
|
|
1208
|
-
sm: 18,
|
|
1209
|
-
lg: 22,
|
|
1210
|
-
icon: 18
|
|
1211
|
-
};
|
|
1212
1447
|
function ButtonSpinner({
|
|
1213
1448
|
size
|
|
1214
1449
|
}) {
|
|
1215
|
-
return /* @__PURE__ */ (0,
|
|
1216
|
-
|
|
1450
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1451
|
+
import_icons_react2.IconLoader2,
|
|
1217
1452
|
{
|
|
1218
1453
|
"aria-hidden": "true",
|
|
1219
1454
|
className: cn(
|
|
1220
1455
|
"animate-spin text-current",
|
|
1221
1456
|
loadingSpinnerSizeClasses[size]
|
|
1222
|
-
)
|
|
1223
|
-
viewBox: "0 0 24 24",
|
|
1224
|
-
fill: "none",
|
|
1225
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1226
|
-
children: [
|
|
1227
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1228
|
-
"circle",
|
|
1229
|
-
{
|
|
1230
|
-
cx: "12",
|
|
1231
|
-
cy: "12",
|
|
1232
|
-
r: "9",
|
|
1233
|
-
className: "opacity-20",
|
|
1234
|
-
stroke: "currentColor",
|
|
1235
|
-
strokeWidth: "3"
|
|
1236
|
-
}
|
|
1237
|
-
),
|
|
1238
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1239
|
-
"path",
|
|
1240
|
-
{
|
|
1241
|
-
d: "M21 12A9 9 0 0 0 12 3",
|
|
1242
|
-
stroke: "currentColor",
|
|
1243
|
-
strokeWidth: "3",
|
|
1244
|
-
strokeLinecap: "round"
|
|
1245
|
-
}
|
|
1246
|
-
)
|
|
1247
|
-
]
|
|
1457
|
+
)
|
|
1248
1458
|
}
|
|
1249
1459
|
);
|
|
1250
1460
|
}
|
|
1251
|
-
var Button =
|
|
1461
|
+
var Button = React8.forwardRef(
|
|
1252
1462
|
({
|
|
1253
1463
|
active = false,
|
|
1254
1464
|
disabled,
|
|
@@ -1267,20 +1477,9 @@ var Button = React6.forwardRef(
|
|
|
1267
1477
|
style,
|
|
1268
1478
|
...props
|
|
1269
1479
|
}, ref) => {
|
|
1270
|
-
const buttonRef =
|
|
1271
|
-
const expandedWidthRef = React6.useRef(void 0);
|
|
1272
|
-
const previousLoadingRef = React6.useRef(loading);
|
|
1273
|
-
const timeoutsRef = React6.useRef([]);
|
|
1274
|
-
const frameRef = React6.useRef(null);
|
|
1275
|
-
const [animatedWidth, setAnimatedWidth] = React6.useState(void 0);
|
|
1276
|
-
const [loadingPhase, setLoadingPhase] = React6.useState(
|
|
1277
|
-
loading ? "loading" : "idle"
|
|
1278
|
-
);
|
|
1279
|
-
const [ripples, setRipples] = React6.useState([]);
|
|
1280
|
-
const rippleIdRef = React6.useRef(0);
|
|
1480
|
+
const buttonRef = React8.useRef(null);
|
|
1281
1481
|
const Component = asChild ? import_react_slot.Slot : "button";
|
|
1282
|
-
const
|
|
1283
|
-
const hasChildren = React6.Children.count(children) > 0;
|
|
1482
|
+
const hasChildren = React8.Children.count(children) > 0;
|
|
1284
1483
|
const isIconOnly = !hasChildren && Boolean(leftIcon || rightIcon);
|
|
1285
1484
|
const isIconOnlyAction = variant === "icon" && isIconOnly;
|
|
1286
1485
|
const resolvedSize = size ?? (isIconOnly ? "icon" : "default");
|
|
@@ -1291,6 +1490,13 @@ var Button = React6.forwardRef(
|
|
|
1291
1490
|
const resolvedLanguageLabel = resolvedLanguageLocale ? buttonLanguageLabels[resolvedLanguageLocale] : void 0;
|
|
1292
1491
|
const iconSlotClassName = "inline-flex shrink-0 items-center justify-center [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0";
|
|
1293
1492
|
const iconOnlyNode = leftIcon ?? rightIcon;
|
|
1493
|
+
const { animatedWidth, loadingPhase } = useButtonLoadingState({
|
|
1494
|
+
buttonRef,
|
|
1495
|
+
children,
|
|
1496
|
+
leftIcon,
|
|
1497
|
+
loading,
|
|
1498
|
+
rightIcon
|
|
1499
|
+
});
|
|
1294
1500
|
const isDisabled = disabled || loadingPhase !== "idle";
|
|
1295
1501
|
const resolvedWidthStyle = animatedWidth === void 0 ? style?.width : `${animatedWidth}px`;
|
|
1296
1502
|
const isCompactPhase = loadingPhase === "collapsing" || loadingPhase === "loading" || loadingPhase === "hiding-spinner";
|
|
@@ -1313,153 +1519,26 @@ var Button = React6.forwardRef(
|
|
|
1313
1519
|
backgroundSize: "cover"
|
|
1314
1520
|
} : void 0
|
|
1315
1521
|
};
|
|
1316
|
-
const
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
Math.hypot(x, rect.height - y),
|
|
1332
|
-
Math.hypot(rect.width - x, rect.height - y)
|
|
1333
|
-
);
|
|
1334
|
-
const baseSize = buttonRippleBaseSize[resolvedSize];
|
|
1335
|
-
const finalDiameter = Math.max(
|
|
1336
|
-
radius * 2 + 24,
|
|
1337
|
-
Math.max(rect.width, rect.height) + 18
|
|
1338
|
-
);
|
|
1339
|
-
setRipples((currentRipples) => [
|
|
1340
|
-
...currentRipples,
|
|
1341
|
-
{
|
|
1342
|
-
id: rippleIdRef.current++,
|
|
1343
|
-
scale: finalDiameter / baseSize,
|
|
1344
|
-
size: baseSize,
|
|
1345
|
-
x: x - baseSize / 2,
|
|
1346
|
-
y: y - baseSize / 2
|
|
1347
|
-
}
|
|
1348
|
-
]);
|
|
1349
|
-
},
|
|
1350
|
-
[resolvedSize]
|
|
1351
|
-
);
|
|
1352
|
-
const handlePointerDown = React6.useCallback(
|
|
1353
|
-
(event) => {
|
|
1354
|
-
onPointerDown?.(event);
|
|
1355
|
-
if (event.defaultPrevented || isDisabled) {
|
|
1356
|
-
return;
|
|
1357
|
-
}
|
|
1358
|
-
if (event.button === 0) {
|
|
1359
|
-
createRipple(
|
|
1360
|
-
event.currentTarget,
|
|
1361
|
-
event.clientX,
|
|
1362
|
-
event.clientY
|
|
1363
|
-
);
|
|
1364
|
-
}
|
|
1365
|
-
},
|
|
1366
|
-
[createRipple, isDisabled, onPointerDown]
|
|
1367
|
-
);
|
|
1368
|
-
const handleClick = React6.useCallback(
|
|
1369
|
-
(event) => {
|
|
1370
|
-
if (!isDisabled && event.detail === 0) {
|
|
1371
|
-
createRipple(event.currentTarget);
|
|
1372
|
-
}
|
|
1373
|
-
onClick?.(event);
|
|
1374
|
-
},
|
|
1375
|
-
[createRipple, isDisabled, onClick]
|
|
1376
|
-
);
|
|
1377
|
-
const clearAnimationTimers = React6.useCallback(() => {
|
|
1378
|
-
for (const timeoutId of timeoutsRef.current) {
|
|
1379
|
-
window.clearTimeout(timeoutId);
|
|
1380
|
-
}
|
|
1381
|
-
timeoutsRef.current = [];
|
|
1382
|
-
if (frameRef.current !== null) {
|
|
1383
|
-
window.cancelAnimationFrame(frameRef.current);
|
|
1384
|
-
frameRef.current = null;
|
|
1385
|
-
}
|
|
1386
|
-
}, []);
|
|
1387
|
-
React6.useImperativeHandle(
|
|
1522
|
+
const {
|
|
1523
|
+
handleClick,
|
|
1524
|
+
handlePointerDown,
|
|
1525
|
+
handleRippleComplete,
|
|
1526
|
+
prefersReducedMotion,
|
|
1527
|
+
rippleClassName,
|
|
1528
|
+
ripples
|
|
1529
|
+
} = useButtonRippleState({
|
|
1530
|
+
disabled: isDisabled,
|
|
1531
|
+
onClick,
|
|
1532
|
+
onPointerDown,
|
|
1533
|
+
size: resolvedSize,
|
|
1534
|
+
variant: resolvedVariant
|
|
1535
|
+
});
|
|
1536
|
+
React8.useImperativeHandle(
|
|
1388
1537
|
ref,
|
|
1389
1538
|
() => buttonRef.current
|
|
1390
1539
|
);
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
if (element && loadingPhase === "idle" && !loading) {
|
|
1394
|
-
expandedWidthRef.current = element.offsetWidth;
|
|
1395
|
-
}
|
|
1396
|
-
if (element && loadingPhase === "loading" && animatedWidth === void 0) {
|
|
1397
|
-
setAnimatedWidth(element.offsetHeight);
|
|
1398
|
-
}
|
|
1399
|
-
}, [animatedWidth, loading, loadingPhase, children, leftIcon, rightIcon]);
|
|
1400
|
-
React6.useEffect(() => {
|
|
1401
|
-
return () => {
|
|
1402
|
-
clearAnimationTimers();
|
|
1403
|
-
};
|
|
1404
|
-
}, [clearAnimationTimers]);
|
|
1405
|
-
React6.useEffect(() => {
|
|
1406
|
-
const element = buttonRef.current;
|
|
1407
|
-
if (!element) {
|
|
1408
|
-
return;
|
|
1409
|
-
}
|
|
1410
|
-
const previousLoading = previousLoadingRef.current;
|
|
1411
|
-
previousLoadingRef.current = loading;
|
|
1412
|
-
if (previousLoading === loading) {
|
|
1413
|
-
return;
|
|
1414
|
-
}
|
|
1415
|
-
clearAnimationTimers();
|
|
1416
|
-
if (loading) {
|
|
1417
|
-
const currentWidth2 = element.offsetWidth;
|
|
1418
|
-
const collapsedWidth = element.offsetHeight;
|
|
1419
|
-
expandedWidthRef.current = currentWidth2;
|
|
1420
|
-
setAnimatedWidth(currentWidth2);
|
|
1421
|
-
setLoadingPhase("hiding-content");
|
|
1422
|
-
timeoutsRef.current.push(
|
|
1423
|
-
window.setTimeout(() => {
|
|
1424
|
-
setLoadingPhase("collapsing");
|
|
1425
|
-
setAnimatedWidth(collapsedWidth);
|
|
1426
|
-
}, BUTTON_SEQUENCE_MS)
|
|
1427
|
-
);
|
|
1428
|
-
timeoutsRef.current.push(
|
|
1429
|
-
window.setTimeout(() => {
|
|
1430
|
-
setLoadingPhase("loading");
|
|
1431
|
-
}, BUTTON_SEQUENCE_MS * 2)
|
|
1432
|
-
);
|
|
1433
|
-
return;
|
|
1434
|
-
}
|
|
1435
|
-
const currentWidth = element.offsetWidth;
|
|
1436
|
-
const expandedWidth = expandedWidthRef.current ?? Math.max(element.scrollWidth, currentWidth);
|
|
1437
|
-
setAnimatedWidth(currentWidth);
|
|
1438
|
-
setLoadingPhase("hiding-spinner");
|
|
1439
|
-
timeoutsRef.current.push(
|
|
1440
|
-
window.setTimeout(() => {
|
|
1441
|
-
setLoadingPhase("expanding");
|
|
1442
|
-
frameRef.current = window.requestAnimationFrame(() => {
|
|
1443
|
-
frameRef.current = window.requestAnimationFrame(() => {
|
|
1444
|
-
setAnimatedWidth(expandedWidth);
|
|
1445
|
-
});
|
|
1446
|
-
});
|
|
1447
|
-
}, BUTTON_SEQUENCE_MS)
|
|
1448
|
-
);
|
|
1449
|
-
timeoutsRef.current.push(
|
|
1450
|
-
window.setTimeout(() => {
|
|
1451
|
-
setLoadingPhase("revealing-content");
|
|
1452
|
-
}, BUTTON_SEQUENCE_MS * 2)
|
|
1453
|
-
);
|
|
1454
|
-
timeoutsRef.current.push(
|
|
1455
|
-
window.setTimeout(() => {
|
|
1456
|
-
setLoadingPhase("idle");
|
|
1457
|
-
setAnimatedWidth(void 0);
|
|
1458
|
-
}, BUTTON_SEQUENCE_MS * 3)
|
|
1459
|
-
);
|
|
1460
|
-
}, [children, clearAnimationTimers, leftIcon, loading, rightIcon]);
|
|
1461
|
-
const buttonContent = isLanguageButton ? null : isIconOnly ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: iconSlotClassName, children: iconOnlyNode }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
|
|
1462
|
-
leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: iconSlotClassName, children: leftIcon }) : null,
|
|
1540
|
+
const buttonContent = isLanguageButton ? null : isIconOnly ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: iconSlotClassName, children: iconOnlyNode }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
|
|
1541
|
+
leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: iconSlotClassName, children: leftIcon }) : null,
|
|
1463
1542
|
hasChildren ? renderTextContent(children, {
|
|
1464
1543
|
as: "span",
|
|
1465
1544
|
className: "inline-flex items-center text-current",
|
|
@@ -1469,9 +1548,9 @@ var Button = React6.forwardRef(
|
|
|
1469
1548
|
letterSpacing: "inherit"
|
|
1470
1549
|
}
|
|
1471
1550
|
}) : null,
|
|
1472
|
-
rightIcon ? /* @__PURE__ */ (0,
|
|
1551
|
+
rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: iconSlotClassName, children: rightIcon }) : null
|
|
1473
1552
|
] });
|
|
1474
|
-
return /* @__PURE__ */ (0,
|
|
1553
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
1475
1554
|
Component,
|
|
1476
1555
|
{
|
|
1477
1556
|
className: cn(
|
|
@@ -1492,41 +1571,16 @@ var Button = React6.forwardRef(
|
|
|
1492
1571
|
style: { ...resolvedButtonStyle, width: resolvedWidthStyle },
|
|
1493
1572
|
...props,
|
|
1494
1573
|
children: [
|
|
1495
|
-
/* @__PURE__ */ (0,
|
|
1496
|
-
|
|
1574
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1575
|
+
ButtonRippleLayer,
|
|
1497
1576
|
{
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
{
|
|
1503
|
-
className: cn(
|
|
1504
|
-
"absolute rounded-full will-change-transform transform-gpu",
|
|
1505
|
-
resolvedRippleClassName
|
|
1506
|
-
),
|
|
1507
|
-
initial: prefersReducedMotion ? { opacity: 0.32, scale: 0.72 } : { opacity: 0.56, scale: 0 },
|
|
1508
|
-
animate: prefersReducedMotion ? { opacity: 0, scale: 1.02 } : { opacity: [0.56, 0.26, 0], scale: ripple.scale },
|
|
1509
|
-
transition: prefersReducedMotion ? { duration: 0.2, ease: "linear" } : {
|
|
1510
|
-
duration: 0.62,
|
|
1511
|
-
times: [0, 0.35, 1],
|
|
1512
|
-
ease: [0.16, 1, 0.3, 1]
|
|
1513
|
-
},
|
|
1514
|
-
style: {
|
|
1515
|
-
height: ripple.size,
|
|
1516
|
-
left: ripple.x,
|
|
1517
|
-
top: ripple.y,
|
|
1518
|
-
transformOrigin: "center center",
|
|
1519
|
-
width: ripple.size
|
|
1520
|
-
},
|
|
1521
|
-
onAnimationComplete: () => {
|
|
1522
|
-
handleRippleComplete(ripple.id);
|
|
1523
|
-
}
|
|
1524
|
-
},
|
|
1525
|
-
ripple.id
|
|
1526
|
-
))
|
|
1577
|
+
onAnimationComplete: handleRippleComplete,
|
|
1578
|
+
prefersReducedMotion,
|
|
1579
|
+
rippleClassName,
|
|
1580
|
+
ripples
|
|
1527
1581
|
}
|
|
1528
1582
|
),
|
|
1529
|
-
/* @__PURE__ */ (0,
|
|
1583
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1530
1584
|
"span",
|
|
1531
1585
|
{
|
|
1532
1586
|
className: cn(
|
|
@@ -1536,7 +1590,7 @@ var Button = React6.forwardRef(
|
|
|
1536
1590
|
children: buttonContent
|
|
1537
1591
|
}
|
|
1538
1592
|
),
|
|
1539
|
-
/* @__PURE__ */ (0,
|
|
1593
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1540
1594
|
"span",
|
|
1541
1595
|
{
|
|
1542
1596
|
"aria-hidden": "true",
|
|
@@ -1544,7 +1598,7 @@ var Button = React6.forwardRef(
|
|
|
1544
1598
|
"pointer-events-none absolute inset-0 z-[2] flex items-center justify-center transition-opacity duration-sofya ease-sofya",
|
|
1545
1599
|
showSpinner ? "opacity-100" : "opacity-0"
|
|
1546
1600
|
),
|
|
1547
|
-
children: /* @__PURE__ */ (0,
|
|
1601
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ButtonSpinner, { size: resolvedSize })
|
|
1548
1602
|
}
|
|
1549
1603
|
)
|
|
1550
1604
|
]
|
|
@@ -1555,9 +1609,9 @@ var Button = React6.forwardRef(
|
|
|
1555
1609
|
Button.displayName = "Button";
|
|
1556
1610
|
|
|
1557
1611
|
// src/components/surface.tsx
|
|
1558
|
-
var
|
|
1612
|
+
var React9 = __toESM(require("react"), 1);
|
|
1559
1613
|
var import_react_slot2 = require("@radix-ui/react-slot");
|
|
1560
|
-
var
|
|
1614
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1561
1615
|
var surfaceStyles = {
|
|
1562
1616
|
card: {
|
|
1563
1617
|
backgroundColor: "hsl(var(--sofya-surface-card-background))",
|
|
@@ -1589,7 +1643,7 @@ var surfaceStyles = {
|
|
|
1589
1643
|
};
|
|
1590
1644
|
function SurfaceComponent({ as, asChild = false, variant = "card", className, style, ...props }, ref) {
|
|
1591
1645
|
const Component = asChild ? import_react_slot2.Slot : as ?? "div";
|
|
1592
|
-
return /* @__PURE__ */ (0,
|
|
1646
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1593
1647
|
Component,
|
|
1594
1648
|
{
|
|
1595
1649
|
ref,
|
|
@@ -1600,16 +1654,16 @@ function SurfaceComponent({ as, asChild = false, variant = "card", className, st
|
|
|
1600
1654
|
}
|
|
1601
1655
|
);
|
|
1602
1656
|
}
|
|
1603
|
-
var SurfaceBase =
|
|
1657
|
+
var SurfaceBase = React9.forwardRef(SurfaceComponent);
|
|
1604
1658
|
SurfaceBase.displayName = "Surface";
|
|
1605
1659
|
var Surface = SurfaceBase;
|
|
1606
1660
|
|
|
1607
1661
|
// src/components/card.tsx
|
|
1608
|
-
var
|
|
1662
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
1609
1663
|
var cardVariants = ["card", "panel", "focus"];
|
|
1610
1664
|
function Card({ className, variant = "card", ...props }) {
|
|
1611
1665
|
const hasHoverShadow = variant === "card" || variant === "panel";
|
|
1612
|
-
return /* @__PURE__ */ (0,
|
|
1666
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1613
1667
|
Surface,
|
|
1614
1668
|
{
|
|
1615
1669
|
variant,
|
|
@@ -1623,10 +1677,10 @@ function Card({ className, variant = "card", ...props }) {
|
|
|
1623
1677
|
);
|
|
1624
1678
|
}
|
|
1625
1679
|
function CardHeader({ className, ...props }) {
|
|
1626
|
-
return /* @__PURE__ */ (0,
|
|
1680
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("flex flex-col gap-2 p-6", className), ...props });
|
|
1627
1681
|
}
|
|
1628
1682
|
function CardTitle({ children, className, ...props }) {
|
|
1629
|
-
return /* @__PURE__ */ (0,
|
|
1683
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1630
1684
|
"h3",
|
|
1631
1685
|
{
|
|
1632
1686
|
className: cn("text-card-foreground", className),
|
|
@@ -1644,27 +1698,49 @@ function CardDescription({
|
|
|
1644
1698
|
className,
|
|
1645
1699
|
...props
|
|
1646
1700
|
}) {
|
|
1647
|
-
return /* @__PURE__ */ (0,
|
|
1701
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: cn("text-muted-foreground", className), ...props, children: renderTextContent(children, {
|
|
1648
1702
|
as: "span",
|
|
1649
1703
|
className: "block text-muted-foreground",
|
|
1650
1704
|
size: "body"
|
|
1651
1705
|
}) });
|
|
1652
1706
|
}
|
|
1653
1707
|
function CardContent({ children, className, ...props }) {
|
|
1654
|
-
return /* @__PURE__ */ (0,
|
|
1708
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("p-6 pt-0", className), ...props, children: renderTextContent(children, {
|
|
1655
1709
|
as: "span"
|
|
1656
1710
|
}) });
|
|
1657
1711
|
}
|
|
1658
1712
|
function CardFooter({ children, className, ...props }) {
|
|
1659
|
-
return /* @__PURE__ */ (0,
|
|
1713
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("flex items-center gap-4 p-6 pt-0", className), ...props, children: renderTextContent(children, {
|
|
1660
1714
|
as: "span"
|
|
1661
1715
|
}) });
|
|
1662
1716
|
}
|
|
1663
1717
|
|
|
1664
1718
|
// src/components/checkbox.tsx
|
|
1665
|
-
var
|
|
1666
|
-
var
|
|
1667
|
-
|
|
1719
|
+
var React10 = __toESM(require("react"), 1);
|
|
1720
|
+
var import_icons_react3 = require("@tabler/icons-react");
|
|
1721
|
+
|
|
1722
|
+
// src/lib/selection-control-classes.ts
|
|
1723
|
+
var selectionControlContainerBaseClasses = "flex w-fit gap-4";
|
|
1724
|
+
var selectionControlContentBaseClasses = "grid gap-2";
|
|
1725
|
+
var selectionControlLabelTextBaseClasses = "text-[color:var(--sofya-text-default)] [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-[3px]";
|
|
1726
|
+
var selectionControlDescriptionTextBaseClasses = "text-muted-foreground";
|
|
1727
|
+
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";
|
|
1728
|
+
function selectionControlContainerClasses({
|
|
1729
|
+
alignClassName,
|
|
1730
|
+
className,
|
|
1731
|
+
disabled
|
|
1732
|
+
}) {
|
|
1733
|
+
return cn(
|
|
1734
|
+
selectionControlContainerBaseClasses,
|
|
1735
|
+
alignClassName,
|
|
1736
|
+
disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
|
|
1737
|
+
className
|
|
1738
|
+
);
|
|
1739
|
+
}
|
|
1740
|
+
|
|
1741
|
+
// src/components/checkbox.tsx
|
|
1742
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1743
|
+
var Checkbox = React10.forwardRef(
|
|
1668
1744
|
function Checkbox2({
|
|
1669
1745
|
checked,
|
|
1670
1746
|
className,
|
|
@@ -1677,23 +1753,21 @@ var Checkbox = React8.forwardRef(
|
|
|
1677
1753
|
labelClassName,
|
|
1678
1754
|
...props
|
|
1679
1755
|
}, ref) {
|
|
1680
|
-
const generatedId =
|
|
1756
|
+
const generatedId = React10.useId();
|
|
1681
1757
|
const resolvedId = id ?? generatedId;
|
|
1682
1758
|
const descriptionId = description ? `${resolvedId}-description` : void 0;
|
|
1683
1759
|
const alignClassName = description ? "items-start" : "items-center";
|
|
1684
|
-
|
|
1685
|
-
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
1760
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
1686
1761
|
"label",
|
|
1687
1762
|
{
|
|
1688
1763
|
htmlFor: resolvedId,
|
|
1689
|
-
className:
|
|
1690
|
-
"flex w-fit gap-4",
|
|
1764
|
+
className: selectionControlContainerClasses({
|
|
1691
1765
|
alignClassName,
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
),
|
|
1766
|
+
className,
|
|
1767
|
+
disabled
|
|
1768
|
+
}),
|
|
1695
1769
|
children: [
|
|
1696
|
-
/* @__PURE__ */ (0,
|
|
1770
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1697
1771
|
"input",
|
|
1698
1772
|
{
|
|
1699
1773
|
ref,
|
|
@@ -1707,41 +1781,24 @@ var Checkbox = React8.forwardRef(
|
|
|
1707
1781
|
...props
|
|
1708
1782
|
}
|
|
1709
1783
|
),
|
|
1710
|
-
/* @__PURE__ */ (0,
|
|
1784
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1711
1785
|
"span",
|
|
1712
1786
|
{
|
|
1713
1787
|
"aria-hidden": "true",
|
|
1714
1788
|
className: cn(
|
|
1715
|
-
"inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-[8px]
|
|
1716
|
-
|
|
1789
|
+
"inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-[8px] text-transparent",
|
|
1790
|
+
selectionControlControlBaseClasses,
|
|
1791
|
+
"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"
|
|
1717
1792
|
),
|
|
1718
|
-
children: /* @__PURE__ */ (0,
|
|
1719
|
-
"svg",
|
|
1720
|
-
{
|
|
1721
|
-
viewBox: "0 0 16 16",
|
|
1722
|
-
fill: "none",
|
|
1723
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1724
|
-
className: "h-4 w-4 shrink-0",
|
|
1725
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1726
|
-
"path",
|
|
1727
|
-
{
|
|
1728
|
-
d: "M2.75 8.25L6.4 11.9L13.35 4.95",
|
|
1729
|
-
stroke: "currentColor",
|
|
1730
|
-
strokeWidth: "2.4",
|
|
1731
|
-
strokeLinecap: "round",
|
|
1732
|
-
strokeLinejoin: "round"
|
|
1733
|
-
}
|
|
1734
|
-
)
|
|
1735
|
-
}
|
|
1736
|
-
)
|
|
1793
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons_react3.IconCheck, { "aria-hidden": "true", className: "h-4 w-4 shrink-0", stroke: 2.4 })
|
|
1737
1794
|
}
|
|
1738
1795
|
),
|
|
1739
|
-
label || description ? /* @__PURE__ */ (0,
|
|
1740
|
-
label ? /* @__PURE__ */ (0,
|
|
1796
|
+
label || description ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: selectionControlContentBaseClasses, children: [
|
|
1797
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1741
1798
|
"span",
|
|
1742
1799
|
{
|
|
1743
1800
|
className: cn(
|
|
1744
|
-
|
|
1801
|
+
selectionControlLabelTextBaseClasses,
|
|
1745
1802
|
labelClassName
|
|
1746
1803
|
),
|
|
1747
1804
|
children: renderTextContent(label, {
|
|
@@ -1751,11 +1808,14 @@ var Checkbox = React8.forwardRef(
|
|
|
1751
1808
|
})
|
|
1752
1809
|
}
|
|
1753
1810
|
) : null,
|
|
1754
|
-
description ? /* @__PURE__ */ (0,
|
|
1811
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1755
1812
|
"span",
|
|
1756
1813
|
{
|
|
1757
1814
|
id: descriptionId,
|
|
1758
|
-
className: cn(
|
|
1815
|
+
className: cn(
|
|
1816
|
+
selectionControlDescriptionTextBaseClasses,
|
|
1817
|
+
descriptionClassName
|
|
1818
|
+
),
|
|
1759
1819
|
children: renderTextContent(description, {
|
|
1760
1820
|
as: "span",
|
|
1761
1821
|
className: "text-muted-foreground",
|
|
@@ -1772,17 +1832,41 @@ var Checkbox = React8.forwardRef(
|
|
|
1772
1832
|
Checkbox.displayName = "Checkbox";
|
|
1773
1833
|
|
|
1774
1834
|
// src/components/dropdown.tsx
|
|
1775
|
-
var
|
|
1835
|
+
var React12 = __toESM(require("react"), 1);
|
|
1776
1836
|
var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1837
|
+
|
|
1838
|
+
// src/lib/use-controllable-state.ts
|
|
1839
|
+
var React11 = __toESM(require("react"), 1);
|
|
1840
|
+
function useControllableState({
|
|
1841
|
+
defaultValue,
|
|
1842
|
+
onChange,
|
|
1843
|
+
value
|
|
1844
|
+
}) {
|
|
1845
|
+
const isControlled = value !== void 0;
|
|
1846
|
+
const [uncontrolledValue, setUncontrolledValue] = React11.useState(defaultValue);
|
|
1847
|
+
const currentValue = isControlled ? value : uncontrolledValue;
|
|
1848
|
+
const setValue = React11.useCallback(
|
|
1849
|
+
(nextValue) => {
|
|
1850
|
+
if (!isControlled) {
|
|
1851
|
+
setUncontrolledValue(nextValue);
|
|
1852
|
+
}
|
|
1853
|
+
onChange?.(nextValue);
|
|
1854
|
+
},
|
|
1855
|
+
[isControlled, onChange]
|
|
1856
|
+
);
|
|
1857
|
+
return [currentValue, setValue, setUncontrolledValue];
|
|
1858
|
+
}
|
|
1859
|
+
|
|
1860
|
+
// src/components/dropdown.tsx
|
|
1861
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1862
|
+
var dropdownVariantOptions = [
|
|
1863
|
+
"card",
|
|
1864
|
+
"panel",
|
|
1865
|
+
"language",
|
|
1866
|
+
"selected"
|
|
1867
|
+
];
|
|
1868
|
+
var dropdownLanguageItems = [
|
|
1869
|
+
{ value: "en-US", label: "English", languageLocale: "en-US" },
|
|
1786
1870
|
{ value: "pt-BR", label: "Portuguese", languageLocale: "pt-BR" },
|
|
1787
1871
|
{ value: "es-ES", label: "Spanish", languageLocale: "es-ES" }
|
|
1788
1872
|
];
|
|
@@ -1818,7 +1902,7 @@ function resolveItemLanguageLocale(item) {
|
|
|
1818
1902
|
}
|
|
1819
1903
|
function DefaultDropdownTriggerIcon({ variant }) {
|
|
1820
1904
|
if (variant === "selected") {
|
|
1821
|
-
return /* @__PURE__ */ (0,
|
|
1905
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1822
1906
|
Icon,
|
|
1823
1907
|
{
|
|
1824
1908
|
name: "caret-down",
|
|
@@ -1826,16 +1910,16 @@ function DefaultDropdownTriggerIcon({ variant }) {
|
|
|
1826
1910
|
}
|
|
1827
1911
|
);
|
|
1828
1912
|
}
|
|
1829
|
-
return /* @__PURE__ */ (0,
|
|
1913
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex h-8 w-8 items-center justify-center rounded-[6px]", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: "caret-down", className: "!h-4 !w-4" }) });
|
|
1830
1914
|
}
|
|
1831
1915
|
function DefaultDropdownItemIndicator() {
|
|
1832
|
-
return /* @__PURE__ */ (0,
|
|
1916
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: "check", size: 16 });
|
|
1833
1917
|
}
|
|
1834
1918
|
function DefaultDropdownInlineCheck() {
|
|
1835
|
-
return /* @__PURE__ */ (0,
|
|
1919
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: "check", size: 14 });
|
|
1836
1920
|
}
|
|
1837
1921
|
function LanguageFlagIcon({ locale }) {
|
|
1838
|
-
return /* @__PURE__ */ (0,
|
|
1922
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1839
1923
|
"img",
|
|
1840
1924
|
{
|
|
1841
1925
|
alt: "",
|
|
@@ -1867,40 +1951,41 @@ function Dropdown({
|
|
|
1867
1951
|
const isLanguageVariant = variant === "language";
|
|
1868
1952
|
const isSelectedVariant = variant === "selected";
|
|
1869
1953
|
const usesDefaultListStyle = !isLanguageVariant;
|
|
1870
|
-
const resolvedItems =
|
|
1954
|
+
const resolvedItems = React12.useMemo(
|
|
1871
1955
|
() => isLanguageVariant ? items && items.length > 0 ? items : dropdownLanguageItems : items ?? [],
|
|
1872
1956
|
[isLanguageVariant, items]
|
|
1873
1957
|
);
|
|
1874
1958
|
const defaultUncontrolledValue = defaultValue ?? (isLanguageVariant ? resolvedItems[0]?.value : void 0);
|
|
1875
|
-
const [
|
|
1876
|
-
defaultUncontrolledValue
|
|
1877
|
-
|
|
1878
|
-
|
|
1959
|
+
const [selectedValue, setSelectedValue, setUncontrolledSelectedValue] = useControllableState({
|
|
1960
|
+
defaultValue: defaultUncontrolledValue,
|
|
1961
|
+
onChange: onValueChange,
|
|
1962
|
+
value
|
|
1963
|
+
});
|
|
1879
1964
|
const radioValue = selectedValue ?? "";
|
|
1880
1965
|
const selectedItem = resolvedItems.find(
|
|
1881
1966
|
(item) => item.value === selectedValue
|
|
1882
1967
|
);
|
|
1883
1968
|
const hasSelectedItem = selectedItem !== void 0;
|
|
1884
1969
|
const selectedLanguageLocale = resolveItemLanguageLocale(selectedItem);
|
|
1885
|
-
|
|
1970
|
+
React12.useEffect(() => {
|
|
1886
1971
|
if (value !== void 0) {
|
|
1887
1972
|
return;
|
|
1888
1973
|
}
|
|
1889
|
-
const currentValueIsAvailable =
|
|
1974
|
+
const currentValueIsAvailable = selectedValue !== void 0 && resolvedItems.some((item) => item.value === selectedValue);
|
|
1890
1975
|
if (!currentValueIsAvailable && defaultUncontrolledValue !== void 0) {
|
|
1891
|
-
|
|
1976
|
+
setUncontrolledSelectedValue(defaultUncontrolledValue);
|
|
1892
1977
|
}
|
|
1893
|
-
}, [
|
|
1894
|
-
|
|
1978
|
+
}, [
|
|
1979
|
+
defaultUncontrolledValue,
|
|
1980
|
+
resolvedItems,
|
|
1981
|
+
selectedValue,
|
|
1982
|
+
setUncontrolledSelectedValue,
|
|
1983
|
+
value
|
|
1984
|
+
]);
|
|
1985
|
+
const resolvedTriggerIcon = isLanguageVariant ? void 0 : triggerIcon === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DefaultDropdownTriggerIcon, { variant }) : triggerIcon;
|
|
1895
1986
|
const triggerLabel = selectedItem?.triggerLabel ?? selectedItem?.label ?? placeholder;
|
|
1896
1987
|
const selectedTriggerToneClassName = isSelectedVariant ? hasSelectedItem ? "text-foreground" : "text-[color:var(--sofya-text-soft)]" : void 0;
|
|
1897
|
-
|
|
1898
|
-
if (value === void 0) {
|
|
1899
|
-
setInternalValue(nextValue);
|
|
1900
|
-
}
|
|
1901
|
-
onValueChange?.(nextValue);
|
|
1902
|
-
}
|
|
1903
|
-
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
1988
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1904
1989
|
DropdownMenuPrimitive.Root,
|
|
1905
1990
|
{
|
|
1906
1991
|
defaultOpen,
|
|
@@ -1908,7 +1993,7 @@ function Dropdown({
|
|
|
1908
1993
|
onOpenChange,
|
|
1909
1994
|
open,
|
|
1910
1995
|
children: [
|
|
1911
|
-
/* @__PURE__ */ (0,
|
|
1996
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1912
1997
|
Button,
|
|
1913
1998
|
{
|
|
1914
1999
|
type: "button",
|
|
@@ -1921,14 +2006,14 @@ function Dropdown({
|
|
|
1921
2006
|
triggerClassName
|
|
1922
2007
|
),
|
|
1923
2008
|
rightIcon: resolvedTriggerIcon,
|
|
1924
|
-
children: isLanguageVariant ? null : /* @__PURE__ */ (0,
|
|
2009
|
+
children: isLanguageVariant ? null : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "min-w-0 truncate", children: renderTextContent(triggerLabel, {
|
|
1925
2010
|
as: "span",
|
|
1926
2011
|
className: "block min-w-0 truncate text-inherit",
|
|
1927
2012
|
size: "body"
|
|
1928
2013
|
}) })
|
|
1929
2014
|
}
|
|
1930
2015
|
) }),
|
|
1931
|
-
/* @__PURE__ */ (0,
|
|
2016
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1932
2017
|
DropdownMenuPrimitive.Content,
|
|
1933
2018
|
{
|
|
1934
2019
|
align,
|
|
@@ -1938,18 +2023,18 @@ function Dropdown({
|
|
|
1938
2023
|
dropdownContentClasses[variant],
|
|
1939
2024
|
contentClassName
|
|
1940
2025
|
),
|
|
1941
|
-
children: /* @__PURE__ */ (0,
|
|
2026
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1942
2027
|
DropdownMenuPrimitive.RadioGroup,
|
|
1943
2028
|
{
|
|
1944
2029
|
value: radioValue,
|
|
1945
|
-
onValueChange:
|
|
2030
|
+
onValueChange: setSelectedValue,
|
|
1946
2031
|
className: "grid gap-2",
|
|
1947
2032
|
children: resolvedItems.map((item) => {
|
|
1948
2033
|
const isSelected = item.value === selectedValue;
|
|
1949
2034
|
const itemLanguageLocale = resolveItemLanguageLocale(item);
|
|
1950
|
-
const indicator = item.indicator ?? /* @__PURE__ */ (0,
|
|
1951
|
-
const itemIcon = item.icon ?? (variant === "language" && itemLanguageLocale ? /* @__PURE__ */ (0,
|
|
1952
|
-
return /* @__PURE__ */ (0,
|
|
2035
|
+
const indicator = item.indicator ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DefaultDropdownItemIndicator, {});
|
|
2036
|
+
const itemIcon = item.icon ?? (variant === "language" && itemLanguageLocale ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LanguageFlagIcon, { locale: itemLanguageLocale }) : null);
|
|
2037
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1953
2038
|
DropdownMenuPrimitive.RadioItem,
|
|
1954
2039
|
{
|
|
1955
2040
|
value: item.value,
|
|
@@ -1960,7 +2045,7 @@ function Dropdown({
|
|
|
1960
2045
|
dropdownItemClasses[variant],
|
|
1961
2046
|
itemClassName
|
|
1962
2047
|
),
|
|
1963
|
-
children: usesDefaultListStyle ? /* @__PURE__ */ (0,
|
|
2048
|
+
children: usesDefaultListStyle ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1964
2049
|
"span",
|
|
1965
2050
|
{
|
|
1966
2051
|
"data-dropdown-item-body": true,
|
|
@@ -1969,32 +2054,32 @@ function Dropdown({
|
|
|
1969
2054
|
isSelected ? "bg-[color:var(--sofya-surface-selected)]" : "bg-transparent"
|
|
1970
2055
|
),
|
|
1971
2056
|
children: [
|
|
1972
|
-
itemIcon ? /* @__PURE__ */ (0,
|
|
1973
|
-
/* @__PURE__ */ (0,
|
|
2057
|
+
itemIcon ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex shrink-0 items-center justify-center", children: itemIcon }) : null,
|
|
2058
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate", children: renderTextContent(item.label, {
|
|
1974
2059
|
as: "span",
|
|
1975
2060
|
className: "block truncate text-inherit",
|
|
1976
2061
|
size: "body"
|
|
1977
2062
|
}) }),
|
|
1978
|
-
isSelected ? /* @__PURE__ */ (0,
|
|
2063
|
+
isSelected ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1979
2064
|
"span",
|
|
1980
2065
|
{
|
|
1981
2066
|
"aria-hidden": "true",
|
|
1982
2067
|
className: "flex h-[14px] w-[14px] shrink-0 items-center justify-center",
|
|
1983
|
-
children: /* @__PURE__ */ (0,
|
|
2068
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DefaultDropdownInlineCheck, {})
|
|
1984
2069
|
}
|
|
1985
2070
|
) : null
|
|
1986
2071
|
]
|
|
1987
2072
|
}
|
|
1988
|
-
) : /* @__PURE__ */ (0,
|
|
1989
|
-
/* @__PURE__ */ (0,
|
|
1990
|
-
itemIcon ? /* @__PURE__ */ (0,
|
|
1991
|
-
/* @__PURE__ */ (0,
|
|
2073
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
|
|
2074
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
|
|
2075
|
+
itemIcon ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex shrink-0 items-center justify-center", children: itemIcon }) : null,
|
|
2076
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate", children: renderTextContent(item.label, {
|
|
1992
2077
|
as: "span",
|
|
1993
2078
|
className: "block truncate text-inherit",
|
|
1994
2079
|
size: "body"
|
|
1995
2080
|
}) })
|
|
1996
2081
|
] }),
|
|
1997
|
-
/* @__PURE__ */ (0,
|
|
2082
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1998
2083
|
"span",
|
|
1999
2084
|
{
|
|
2000
2085
|
"aria-hidden": "true",
|
|
@@ -2021,14 +2106,14 @@ function Dropdown({
|
|
|
2021
2106
|
}
|
|
2022
2107
|
|
|
2023
2108
|
// src/components/dialog.tsx
|
|
2024
|
-
var
|
|
2109
|
+
var React13 = __toESM(require("react"), 1);
|
|
2025
2110
|
var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
2026
|
-
var
|
|
2111
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
2027
2112
|
var Dialog = DialogPrimitive.Root;
|
|
2028
2113
|
var DialogTrigger = DialogPrimitive.Trigger;
|
|
2029
2114
|
var DialogPortal = DialogPrimitive.Portal;
|
|
2030
2115
|
var DialogClose = DialogPrimitive.Close;
|
|
2031
|
-
var DialogOverlay =
|
|
2116
|
+
var DialogOverlay = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2032
2117
|
DialogPrimitive.Overlay,
|
|
2033
2118
|
{
|
|
2034
2119
|
ref,
|
|
@@ -2040,7 +2125,7 @@ var DialogOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__P
|
|
|
2040
2125
|
}
|
|
2041
2126
|
));
|
|
2042
2127
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
2043
|
-
var DialogContent =
|
|
2128
|
+
var DialogContent = React13.forwardRef(
|
|
2044
2129
|
({
|
|
2045
2130
|
className,
|
|
2046
2131
|
children,
|
|
@@ -2053,9 +2138,9 @@ var DialogContent = React10.forwardRef(
|
|
|
2053
2138
|
const dialogCardStyle = {
|
|
2054
2139
|
"--sofya-surface-shadow-override": "var(--sofya-shadow-lg)"
|
|
2055
2140
|
};
|
|
2056
|
-
return /* @__PURE__ */ (0,
|
|
2057
|
-
/* @__PURE__ */ (0,
|
|
2058
|
-
/* @__PURE__ */ (0,
|
|
2141
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DialogPortal, { children: [
|
|
2142
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogOverlay, { className: overlayClassName }),
|
|
2143
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "sofya-dialog-positioner fixed inset-0 z-50 flex items-center justify-center p-4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2059
2144
|
DialogPrimitive.Content,
|
|
2060
2145
|
{
|
|
2061
2146
|
ref,
|
|
@@ -2064,7 +2149,7 @@ var DialogContent = React10.forwardRef(
|
|
|
2064
2149
|
className
|
|
2065
2150
|
),
|
|
2066
2151
|
...props,
|
|
2067
|
-
children: /* @__PURE__ */ (0,
|
|
2152
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
2068
2153
|
Card,
|
|
2069
2154
|
{
|
|
2070
2155
|
variant: cardVariant,
|
|
@@ -2075,14 +2160,14 @@ var DialogContent = React10.forwardRef(
|
|
|
2075
2160
|
style: dialogCardStyle,
|
|
2076
2161
|
children: [
|
|
2077
2162
|
children,
|
|
2078
|
-
showCloseButton ? /* @__PURE__ */ (0,
|
|
2163
|
+
showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2079
2164
|
Button,
|
|
2080
2165
|
{
|
|
2081
2166
|
type: "button",
|
|
2082
2167
|
variant: "ghost",
|
|
2083
2168
|
size: "icon",
|
|
2084
2169
|
"aria-label": "Close",
|
|
2085
|
-
leftIcon: /* @__PURE__ */ (0,
|
|
2170
|
+
leftIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "x", size: 18 }),
|
|
2086
2171
|
className: "absolute right-4 top-4 z-10 text-muted-foreground hover:text-foreground"
|
|
2087
2172
|
}
|
|
2088
2173
|
) }) : null
|
|
@@ -2096,10 +2181,10 @@ var DialogContent = React10.forwardRef(
|
|
|
2096
2181
|
);
|
|
2097
2182
|
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
|
2098
2183
|
function DialogHeader({ className, ...props }) {
|
|
2099
|
-
return /* @__PURE__ */ (0,
|
|
2184
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("grid gap-2 px-6 pt-6 pr-16 text-left", className), ...props });
|
|
2100
2185
|
}
|
|
2101
2186
|
function DialogFooter({ className, ...props }) {
|
|
2102
|
-
return /* @__PURE__ */ (0,
|
|
2187
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2103
2188
|
"div",
|
|
2104
2189
|
{
|
|
2105
2190
|
className: cn(
|
|
@@ -2110,11 +2195,11 @@ function DialogFooter({ className, ...props }) {
|
|
|
2110
2195
|
}
|
|
2111
2196
|
);
|
|
2112
2197
|
}
|
|
2113
|
-
var DialogCancel =
|
|
2114
|
-
({ type = "button", variant = "outline", ...props }, ref) => /* @__PURE__ */ (0,
|
|
2198
|
+
var DialogCancel = React13.forwardRef(
|
|
2199
|
+
({ type = "button", variant = "outline", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { ref, type, variant, ...props }) })
|
|
2115
2200
|
);
|
|
2116
2201
|
DialogCancel.displayName = "DialogCancel";
|
|
2117
|
-
var DialogTitle =
|
|
2202
|
+
var DialogTitle = React13.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2118
2203
|
DialogPrimitive.Title,
|
|
2119
2204
|
{
|
|
2120
2205
|
ref,
|
|
@@ -2128,7 +2213,7 @@ var DialogTitle = React10.forwardRef(({ children, className, ...props }, ref) =>
|
|
|
2128
2213
|
}
|
|
2129
2214
|
));
|
|
2130
2215
|
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
|
2131
|
-
var DialogDescription =
|
|
2216
|
+
var DialogDescription = React13.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2132
2217
|
DialogPrimitive.Description,
|
|
2133
2218
|
{
|
|
2134
2219
|
ref,
|
|
@@ -2144,9 +2229,9 @@ var DialogDescription = React10.forwardRef(({ children, className, ...props }, r
|
|
|
2144
2229
|
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
|
2145
2230
|
|
|
2146
2231
|
// src/components/empty.tsx
|
|
2147
|
-
var
|
|
2232
|
+
var React14 = __toESM(require("react"), 1);
|
|
2148
2233
|
var import_class_variance_authority5 = require("class-variance-authority");
|
|
2149
|
-
var
|
|
2234
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
2150
2235
|
var emptyMediaVariantOptions = ["default", "icon"];
|
|
2151
2236
|
var emptyMediaVariants = (0, import_class_variance_authority5.cva)(
|
|
2152
2237
|
"inline-flex shrink-0 items-center justify-center transition-[background-color,border-color,color,box-shadow] duration-sofya ease-sofya",
|
|
@@ -2162,11 +2247,11 @@ var emptyMediaVariants = (0, import_class_variance_authority5.cva)(
|
|
|
2162
2247
|
}
|
|
2163
2248
|
}
|
|
2164
2249
|
);
|
|
2165
|
-
var EmptyMedia =
|
|
2166
|
-
return /* @__PURE__ */ (0,
|
|
2250
|
+
var EmptyMedia = React14.forwardRef(function EmptyMedia2({ className, variant, ...props }, ref) {
|
|
2251
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, className: cn(emptyMediaVariants({ variant }), className), ...props });
|
|
2167
2252
|
});
|
|
2168
2253
|
function EmptyHeader({ className, ...props }) {
|
|
2169
|
-
return /* @__PURE__ */ (0,
|
|
2254
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2170
2255
|
"div",
|
|
2171
2256
|
{
|
|
2172
2257
|
className: cn("flex max-w-[34rem] flex-col items-center gap-4 text-center", className),
|
|
@@ -2175,7 +2260,7 @@ function EmptyHeader({ className, ...props }) {
|
|
|
2175
2260
|
);
|
|
2176
2261
|
}
|
|
2177
2262
|
function EmptyTitle({ children, className, ...props }) {
|
|
2178
|
-
return /* @__PURE__ */ (0,
|
|
2263
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2179
2264
|
"h2",
|
|
2180
2265
|
{
|
|
2181
2266
|
className: cn("text-foreground", className),
|
|
@@ -2193,7 +2278,7 @@ function EmptyDescription({
|
|
|
2193
2278
|
className,
|
|
2194
2279
|
...props
|
|
2195
2280
|
}) {
|
|
2196
|
-
return /* @__PURE__ */ (0,
|
|
2281
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2197
2282
|
"p",
|
|
2198
2283
|
{
|
|
2199
2284
|
className: cn("max-w-full text-muted-foreground whitespace-nowrap", className),
|
|
@@ -2207,7 +2292,7 @@ function EmptyDescription({
|
|
|
2207
2292
|
);
|
|
2208
2293
|
}
|
|
2209
2294
|
function EmptyContent({ children, className, ...props }) {
|
|
2210
|
-
return /* @__PURE__ */ (0,
|
|
2295
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2211
2296
|
"div",
|
|
2212
2297
|
{
|
|
2213
2298
|
className: cn("flex flex-wrap items-center justify-center gap-4 text-center", className),
|
|
@@ -2218,9 +2303,9 @@ function EmptyContent({ children, className, ...props }) {
|
|
|
2218
2303
|
}
|
|
2219
2304
|
);
|
|
2220
2305
|
}
|
|
2221
|
-
var Empty =
|
|
2222
|
-
const hasCustomChildren =
|
|
2223
|
-
return /* @__PURE__ */ (0,
|
|
2306
|
+
var Empty = React14.forwardRef(function Empty2({ children, className, content, description, media, title, ...props }, ref) {
|
|
2307
|
+
const hasCustomChildren = React14.Children.count(children) > 0;
|
|
2308
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2224
2309
|
"div",
|
|
2225
2310
|
{
|
|
2226
2311
|
ref,
|
|
@@ -2229,13 +2314,13 @@ var Empty = React11.forwardRef(function Empty2({ children, className, content, d
|
|
|
2229
2314
|
className
|
|
2230
2315
|
),
|
|
2231
2316
|
...props,
|
|
2232
|
-
children: hasCustomChildren ? children : /* @__PURE__ */ (0,
|
|
2233
|
-
/* @__PURE__ */ (0,
|
|
2234
|
-
media ?? /* @__PURE__ */ (0,
|
|
2235
|
-
/* @__PURE__ */ (0,
|
|
2236
|
-
/* @__PURE__ */ (0,
|
|
2317
|
+
children: hasCustomChildren ? children : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
|
|
2318
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(EmptyHeader, { children: [
|
|
2319
|
+
media ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(EmptyMedia, { variant: "icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "folders", size: 28 }) }),
|
|
2320
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(EmptyTitle, { children: title ?? "Nada por aqui" }),
|
|
2321
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(EmptyDescription, { children: description ?? "Quando houver conte\xFAdo dispon\xEDvel, ele aparecer\xE1 aqui." })
|
|
2237
2322
|
] }),
|
|
2238
|
-
content !== void 0 && content !== null ? /* @__PURE__ */ (0,
|
|
2323
|
+
content !== void 0 && content !== null ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(EmptyContent, { children: content }) : null
|
|
2239
2324
|
] })
|
|
2240
2325
|
}
|
|
2241
2326
|
);
|
|
@@ -2248,104 +2333,73 @@ EmptyDescription.displayName = "EmptyDescription";
|
|
|
2248
2333
|
EmptyContent.displayName = "EmptyContent";
|
|
2249
2334
|
|
|
2250
2335
|
// src/components/input.tsx
|
|
2251
|
-
var
|
|
2336
|
+
var React17 = __toESM(require("react"), 1);
|
|
2252
2337
|
var import_input_otp2 = require("input-otp");
|
|
2253
|
-
var import_react2 = require("motion/react");
|
|
2254
2338
|
|
|
2255
|
-
// src/
|
|
2256
|
-
var
|
|
2257
|
-
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
)
|
|
2272
|
-
|
|
2273
|
-
InputOTP.displayName = "InputOTP";
|
|
2274
|
-
var InputOTPGroup = React12.forwardRef(({ className, ...props }, ref) => {
|
|
2275
|
-
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2276
|
-
"div",
|
|
2339
|
+
// src/lib/field-shell.tsx
|
|
2340
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
2341
|
+
function FieldLabel({
|
|
2342
|
+
children,
|
|
2343
|
+
className,
|
|
2344
|
+
htmlFor,
|
|
2345
|
+
textClassName = "block text-[color:var(--sofya-text-default)]",
|
|
2346
|
+
textSize = "body",
|
|
2347
|
+
textStyle = {
|
|
2348
|
+
fontWeight: 500
|
|
2349
|
+
}
|
|
2350
|
+
}) {
|
|
2351
|
+
if (!children) {
|
|
2352
|
+
return null;
|
|
2353
|
+
}
|
|
2354
|
+
const Component = htmlFor ? "label" : "div";
|
|
2355
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
2356
|
+
Component,
|
|
2277
2357
|
{
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
2358
|
+
className: cn("text-[color:var(--sofya-text-default)]", className),
|
|
2359
|
+
htmlFor,
|
|
2360
|
+
children: renderTextContent(children, {
|
|
2361
|
+
as: "span",
|
|
2362
|
+
className: textClassName,
|
|
2363
|
+
size: textSize,
|
|
2364
|
+
style: textStyle
|
|
2365
|
+
})
|
|
2284
2366
|
}
|
|
2285
2367
|
);
|
|
2286
|
-
}
|
|
2287
|
-
|
|
2288
|
-
|
|
2289
|
-
|
|
2290
|
-
|
|
2291
|
-
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
|
|
2296
|
-
|
|
2297
|
-
|
|
2298
|
-
|
|
2299
|
-
|
|
2300
|
-
|
|
2301
|
-
|
|
2302
|
-
|
|
2303
|
-
);
|
|
2304
|
-
}
|
|
2305
|
-
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
2306
|
-
"div",
|
|
2368
|
+
}
|
|
2369
|
+
function FieldShell({
|
|
2370
|
+
containerClassName,
|
|
2371
|
+
control,
|
|
2372
|
+
label,
|
|
2373
|
+
labelClassName,
|
|
2374
|
+
labelHtmlFor,
|
|
2375
|
+
labelTextClassName,
|
|
2376
|
+
labelTextSize,
|
|
2377
|
+
labelTextStyle
|
|
2378
|
+
}) {
|
|
2379
|
+
if (!label && !containerClassName) {
|
|
2380
|
+
return control;
|
|
2381
|
+
}
|
|
2382
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("grid w-full gap-2", containerClassName), children: [
|
|
2383
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
2384
|
+
FieldLabel,
|
|
2307
2385
|
{
|
|
2308
|
-
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
|
|
2314
|
-
...props,
|
|
2315
|
-
children: [
|
|
2316
|
-
slot.char ?? null,
|
|
2317
|
-
slot.hasFakeCaret ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "h-10 w-[2px] animate-pulse rounded-full bg-primary shadow-[var(--sofya-shadow-caret-glow)]" }) }) : null
|
|
2318
|
-
]
|
|
2386
|
+
className: labelClassName,
|
|
2387
|
+
htmlFor: labelHtmlFor,
|
|
2388
|
+
textClassName: labelTextClassName,
|
|
2389
|
+
textSize: labelTextSize,
|
|
2390
|
+
textStyle: labelTextStyle,
|
|
2391
|
+
children: label
|
|
2319
2392
|
}
|
|
2320
|
-
)
|
|
2321
|
-
|
|
2322
|
-
);
|
|
2323
|
-
|
|
2324
|
-
var InputOTPSeparator = React12.forwardRef(({ className, ...props }, ref) => {
|
|
2325
|
-
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2326
|
-
"div",
|
|
2327
|
-
{
|
|
2328
|
-
ref,
|
|
2329
|
-
role: "separator",
|
|
2330
|
-
className: cn(
|
|
2331
|
-
"flex items-center justify-center px-2 text-[28px] leading-none text-[color:var(--sofya-text-soft)]",
|
|
2332
|
-
className
|
|
2333
|
-
),
|
|
2334
|
-
...props,
|
|
2335
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { "aria-hidden": "true", children: "." })
|
|
2336
|
-
}
|
|
2337
|
-
);
|
|
2338
|
-
});
|
|
2339
|
-
InputOTPSeparator.displayName = "InputOTPSeparator";
|
|
2393
|
+
) : null,
|
|
2394
|
+
control
|
|
2395
|
+
] });
|
|
2396
|
+
}
|
|
2340
2397
|
|
|
2341
|
-
// src/components/input.tsx
|
|
2342
|
-
var
|
|
2343
|
-
var
|
|
2344
|
-
|
|
2345
|
-
|
|
2346
|
-
"otp",
|
|
2347
|
-
"upload"
|
|
2348
|
-
];
|
|
2398
|
+
// src/components/input-upload.tsx
|
|
2399
|
+
var React15 = __toESM(require("react"), 1);
|
|
2400
|
+
var import_icons_react4 = require("@tabler/icons-react");
|
|
2401
|
+
var import_react2 = require("motion/react");
|
|
2402
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
2349
2403
|
var uploadKindOptions = ["document", "image", "video"];
|
|
2350
2404
|
var uploadAcceptByKind = {
|
|
2351
2405
|
document: ".pdf,.doc,.docx,.txt,.rtf,.odt,.jpg,.jpeg,.png,.webp,.gif",
|
|
@@ -2392,7 +2446,7 @@ function mergeUploadFiles(currentFiles, nextFiles, multiple) {
|
|
|
2392
2446
|
return Array.from(filesBySignature.values());
|
|
2393
2447
|
}
|
|
2394
2448
|
var uploadListItemTransition = {
|
|
2395
|
-
duration: 0.
|
|
2449
|
+
duration: 0.18,
|
|
2396
2450
|
ease: [0.22, 1, 0.36, 1]
|
|
2397
2451
|
};
|
|
2398
2452
|
function formatUploadFileSize(bytes) {
|
|
@@ -2438,96 +2492,12 @@ function resolveUploadFileVisualKind(file, fallbackKind) {
|
|
|
2438
2492
|
}
|
|
2439
2493
|
return "document";
|
|
2440
2494
|
}
|
|
2441
|
-
function InputShell({
|
|
2442
|
-
containerClassName,
|
|
2443
|
-
control,
|
|
2444
|
-
label,
|
|
2445
|
-
labelClassName,
|
|
2446
|
-
resolvedId
|
|
2447
|
-
}) {
|
|
2448
|
-
if (!label && !containerClassName) {
|
|
2449
|
-
return control;
|
|
2450
|
-
}
|
|
2451
|
-
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("grid w-full gap-2", containerClassName), children: [
|
|
2452
|
-
label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
2453
|
-
"label",
|
|
2454
|
-
{
|
|
2455
|
-
className: cn(
|
|
2456
|
-
"text-[color:var(--sofya-text-default)]",
|
|
2457
|
-
labelClassName
|
|
2458
|
-
),
|
|
2459
|
-
htmlFor: resolvedId,
|
|
2460
|
-
children: renderTextContent(label, {
|
|
2461
|
-
as: "span",
|
|
2462
|
-
className: "block text-[color:var(--sofya-text-default)]",
|
|
2463
|
-
size: "body",
|
|
2464
|
-
style: {
|
|
2465
|
-
fontWeight: 500
|
|
2466
|
-
}
|
|
2467
|
-
})
|
|
2468
|
-
}
|
|
2469
|
-
) : null,
|
|
2470
|
-
control
|
|
2471
|
-
] });
|
|
2472
|
-
}
|
|
2473
|
-
function UploadInputShell({
|
|
2474
|
-
containerClassName,
|
|
2475
|
-
control,
|
|
2476
|
-
label,
|
|
2477
|
-
labelClassName,
|
|
2478
|
-
optionalLabel
|
|
2479
|
-
}) {
|
|
2480
|
-
if (!label && !optionalLabel && !containerClassName) {
|
|
2481
|
-
return control;
|
|
2482
|
-
}
|
|
2483
|
-
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("grid w-full gap-2", containerClassName), children: [
|
|
2484
|
-
label || optionalLabel ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
2485
|
-
"div",
|
|
2486
|
-
{
|
|
2487
|
-
className: cn(
|
|
2488
|
-
"text-[color:var(--sofya-text-default)]",
|
|
2489
|
-
labelClassName
|
|
2490
|
-
),
|
|
2491
|
-
children: [
|
|
2492
|
-
renderTextContent(label, {
|
|
2493
|
-
as: "span",
|
|
2494
|
-
className: "text-[color:var(--sofya-text-default)]",
|
|
2495
|
-
size: "body",
|
|
2496
|
-
style: {
|
|
2497
|
-
fontWeight: 700
|
|
2498
|
-
}
|
|
2499
|
-
}),
|
|
2500
|
-
optionalLabel ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ml-2 text-[color:var(--sofya-text-subtle)]", children: renderTextContent(optionalLabel, {
|
|
2501
|
-
as: "span",
|
|
2502
|
-
className: "text-[color:var(--sofya-text-subtle)]",
|
|
2503
|
-
size: "tiny"
|
|
2504
|
-
}) }) : null
|
|
2505
|
-
]
|
|
2506
|
-
}
|
|
2507
|
-
) : null,
|
|
2508
|
-
control
|
|
2509
|
-
] });
|
|
2510
|
-
}
|
|
2511
2495
|
function UploadGlyph({ className }) {
|
|
2512
|
-
return /* @__PURE__ */ (0,
|
|
2513
|
-
|
|
2496
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2497
|
+
import_icons_react4.IconUpload,
|
|
2514
2498
|
{
|
|
2515
2499
|
"aria-hidden": "true",
|
|
2516
|
-
className: cn("inline-block shrink-0 align-middle", className)
|
|
2517
|
-
fill: "none",
|
|
2518
|
-
focusable: "false",
|
|
2519
|
-
viewBox: "0 0 20 20",
|
|
2520
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2521
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
2522
|
-
"path",
|
|
2523
|
-
{
|
|
2524
|
-
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",
|
|
2525
|
-
stroke: "currentColor",
|
|
2526
|
-
strokeLinecap: "round",
|
|
2527
|
-
strokeLinejoin: "round",
|
|
2528
|
-
strokeWidth: "2"
|
|
2529
|
-
}
|
|
2530
|
-
)
|
|
2500
|
+
className: cn("inline-block shrink-0 align-middle", className)
|
|
2531
2501
|
}
|
|
2532
2502
|
);
|
|
2533
2503
|
}
|
|
@@ -2536,120 +2506,32 @@ function UploadFileTypeGlyph({
|
|
|
2536
2506
|
kind
|
|
2537
2507
|
}) {
|
|
2538
2508
|
if (kind === "image") {
|
|
2539
|
-
return /* @__PURE__ */ (0,
|
|
2540
|
-
|
|
2509
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2510
|
+
import_icons_react4.IconPhoto,
|
|
2541
2511
|
{
|
|
2542
2512
|
"aria-hidden": "true",
|
|
2543
|
-
className: cn("inline-block shrink-0 align-middle", className)
|
|
2544
|
-
fill: "none",
|
|
2545
|
-
focusable: "false",
|
|
2546
|
-
viewBox: "0 0 18 18",
|
|
2547
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2548
|
-
children: [
|
|
2549
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
2550
|
-
"rect",
|
|
2551
|
-
{
|
|
2552
|
-
x: "2.5",
|
|
2553
|
-
y: "3",
|
|
2554
|
-
width: "13",
|
|
2555
|
-
height: "12",
|
|
2556
|
-
rx: "2.5",
|
|
2557
|
-
stroke: "currentColor",
|
|
2558
|
-
strokeWidth: "1.5"
|
|
2559
|
-
}
|
|
2560
|
-
),
|
|
2561
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("circle", { cx: "6.75", cy: "7.25", r: "1.25", fill: "currentColor" }),
|
|
2562
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
2563
|
-
"path",
|
|
2564
|
-
{
|
|
2565
|
-
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",
|
|
2566
|
-
stroke: "currentColor",
|
|
2567
|
-
strokeLinecap: "round",
|
|
2568
|
-
strokeLinejoin: "round",
|
|
2569
|
-
strokeWidth: "1.5"
|
|
2570
|
-
}
|
|
2571
|
-
)
|
|
2572
|
-
]
|
|
2513
|
+
className: cn("inline-block shrink-0 align-middle", className)
|
|
2573
2514
|
}
|
|
2574
2515
|
);
|
|
2575
2516
|
}
|
|
2576
2517
|
if (kind === "video") {
|
|
2577
|
-
return /* @__PURE__ */ (0,
|
|
2578
|
-
|
|
2518
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2519
|
+
import_icons_react4.IconVideo,
|
|
2579
2520
|
{
|
|
2580
2521
|
"aria-hidden": "true",
|
|
2581
|
-
className: cn("inline-block shrink-0 align-middle", className)
|
|
2582
|
-
fill: "none",
|
|
2583
|
-
focusable: "false",
|
|
2584
|
-
viewBox: "0 0 18 18",
|
|
2585
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2586
|
-
children: [
|
|
2587
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
2588
|
-
"rect",
|
|
2589
|
-
{
|
|
2590
|
-
x: "2.5",
|
|
2591
|
-
y: "4",
|
|
2592
|
-
width: "13",
|
|
2593
|
-
height: "10",
|
|
2594
|
-
rx: "2.5",
|
|
2595
|
-
stroke: "currentColor",
|
|
2596
|
-
strokeWidth: "1.5"
|
|
2597
|
-
}
|
|
2598
|
-
),
|
|
2599
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
2600
|
-
"path",
|
|
2601
|
-
{
|
|
2602
|
-
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",
|
|
2603
|
-
fill: "currentColor"
|
|
2604
|
-
}
|
|
2605
|
-
)
|
|
2606
|
-
]
|
|
2522
|
+
className: cn("inline-block shrink-0 align-middle", className)
|
|
2607
2523
|
}
|
|
2608
2524
|
);
|
|
2609
2525
|
}
|
|
2610
|
-
return /* @__PURE__ */ (0,
|
|
2611
|
-
|
|
2526
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2527
|
+
import_icons_react4.IconFileText,
|
|
2612
2528
|
{
|
|
2613
2529
|
"aria-hidden": "true",
|
|
2614
|
-
className: cn("inline-block shrink-0 align-middle", className)
|
|
2615
|
-
fill: "none",
|
|
2616
|
-
focusable: "false",
|
|
2617
|
-
viewBox: "0 0 18 18",
|
|
2618
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2619
|
-
children: [
|
|
2620
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
2621
|
-
"path",
|
|
2622
|
-
{
|
|
2623
|
-
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",
|
|
2624
|
-
stroke: "currentColor",
|
|
2625
|
-
strokeLinejoin: "round",
|
|
2626
|
-
strokeWidth: "1.5"
|
|
2627
|
-
}
|
|
2628
|
-
),
|
|
2629
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
2630
|
-
"path",
|
|
2631
|
-
{
|
|
2632
|
-
d: "M7.5 2.25V4.25C7.5 5.35457 8.39543 6.25 9.5 6.25H11.5",
|
|
2633
|
-
stroke: "currentColor",
|
|
2634
|
-
strokeLinecap: "round",
|
|
2635
|
-
strokeLinejoin: "round",
|
|
2636
|
-
strokeWidth: "1.5"
|
|
2637
|
-
}
|
|
2638
|
-
),
|
|
2639
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
2640
|
-
"path",
|
|
2641
|
-
{
|
|
2642
|
-
d: "M6 10H12M6 12.5H10",
|
|
2643
|
-
stroke: "currentColor",
|
|
2644
|
-
strokeLinecap: "round",
|
|
2645
|
-
strokeWidth: "1.5"
|
|
2646
|
-
}
|
|
2647
|
-
)
|
|
2648
|
-
]
|
|
2530
|
+
className: cn("inline-block shrink-0 align-middle", className)
|
|
2649
2531
|
}
|
|
2650
2532
|
);
|
|
2651
2533
|
}
|
|
2652
|
-
var UploadInputControl =
|
|
2534
|
+
var UploadInputControl = React15.forwardRef(function UploadInputControl2({
|
|
2653
2535
|
accept,
|
|
2654
2536
|
"aria-label": ariaLabel,
|
|
2655
2537
|
className,
|
|
@@ -2663,17 +2545,17 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2663
2545
|
resolvedId,
|
|
2664
2546
|
...uploadProps
|
|
2665
2547
|
}, ref) {
|
|
2666
|
-
const inputRef =
|
|
2667
|
-
const [isDragActive, setIsDragActive] =
|
|
2668
|
-
const [selectedFiles, setSelectedFiles] =
|
|
2548
|
+
const inputRef = React15.useRef(null);
|
|
2549
|
+
const [isDragActive, setIsDragActive] = React15.useState(false);
|
|
2550
|
+
const [selectedFiles, setSelectedFiles] = React15.useState([]);
|
|
2669
2551
|
const resolvedMultiple = multiple ?? true;
|
|
2670
2552
|
const prefersReducedMotion = (0, import_react2.useReducedMotion)();
|
|
2671
|
-
|
|
2553
|
+
React15.useImperativeHandle(ref, () => inputRef.current);
|
|
2672
2554
|
const resolvedAccept = accept ?? uploadAcceptByKind[uploadKind];
|
|
2673
2555
|
const resolvedAriaLabel = ariaLabel ?? uploadAriaLabelByKind[uploadKind];
|
|
2674
2556
|
const resolvedTitle = uploadTitle ?? "Arraste arquivos aqui ou clique para selecionar";
|
|
2675
2557
|
const resolvedDescription = uploadDescription ?? uploadDescriptionByKind[uploadKind];
|
|
2676
|
-
const syncSelectedFiles =
|
|
2558
|
+
const syncSelectedFiles = React15.useCallback(
|
|
2677
2559
|
(files) => {
|
|
2678
2560
|
const normalizedFiles = resolvedMultiple ? files : files.slice(0, 1);
|
|
2679
2561
|
setSelectedFiles(normalizedFiles);
|
|
@@ -2681,7 +2563,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2681
2563
|
},
|
|
2682
2564
|
[onFilesChange, resolvedMultiple]
|
|
2683
2565
|
);
|
|
2684
|
-
const applyFilesToInput =
|
|
2566
|
+
const applyFilesToInput = React15.useCallback((files) => {
|
|
2685
2567
|
const inputElement = inputRef.current;
|
|
2686
2568
|
if (!inputElement || typeof DataTransfer === "undefined") {
|
|
2687
2569
|
return false;
|
|
@@ -2700,7 +2582,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2700
2582
|
return false;
|
|
2701
2583
|
}
|
|
2702
2584
|
}, []);
|
|
2703
|
-
const handleInputChange =
|
|
2585
|
+
const handleInputChange = React15.useCallback(
|
|
2704
2586
|
(event) => {
|
|
2705
2587
|
const nextFiles = mergeUploadFiles(
|
|
2706
2588
|
selectedFiles,
|
|
@@ -2719,12 +2601,12 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2719
2601
|
syncSelectedFiles
|
|
2720
2602
|
]
|
|
2721
2603
|
);
|
|
2722
|
-
const openPicker =
|
|
2604
|
+
const openPicker = React15.useCallback(() => {
|
|
2723
2605
|
if (!disabled) {
|
|
2724
2606
|
inputRef.current?.click();
|
|
2725
2607
|
}
|
|
2726
2608
|
}, [disabled]);
|
|
2727
|
-
const handleKeyDown =
|
|
2609
|
+
const handleKeyDown = React15.useCallback(
|
|
2728
2610
|
(event) => {
|
|
2729
2611
|
if (disabled) {
|
|
2730
2612
|
return;
|
|
@@ -2736,7 +2618,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2736
2618
|
},
|
|
2737
2619
|
[disabled, openPicker]
|
|
2738
2620
|
);
|
|
2739
|
-
const handleDragEnter =
|
|
2621
|
+
const handleDragEnter = React15.useCallback(
|
|
2740
2622
|
(event) => {
|
|
2741
2623
|
event.preventDefault();
|
|
2742
2624
|
if (!disabled) {
|
|
@@ -2745,7 +2627,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2745
2627
|
},
|
|
2746
2628
|
[disabled]
|
|
2747
2629
|
);
|
|
2748
|
-
const handleDragLeave =
|
|
2630
|
+
const handleDragLeave = React15.useCallback(
|
|
2749
2631
|
(event) => {
|
|
2750
2632
|
if (disabled) {
|
|
2751
2633
|
return;
|
|
@@ -2758,7 +2640,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2758
2640
|
},
|
|
2759
2641
|
[disabled]
|
|
2760
2642
|
);
|
|
2761
|
-
const handleDragOver =
|
|
2643
|
+
const handleDragOver = React15.useCallback(
|
|
2762
2644
|
(event) => {
|
|
2763
2645
|
event.preventDefault();
|
|
2764
2646
|
if (disabled) {
|
|
@@ -2769,7 +2651,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2769
2651
|
},
|
|
2770
2652
|
[disabled]
|
|
2771
2653
|
);
|
|
2772
|
-
const handleDrop =
|
|
2654
|
+
const handleDrop = React15.useCallback(
|
|
2773
2655
|
(event) => {
|
|
2774
2656
|
event.preventDefault();
|
|
2775
2657
|
if (disabled) {
|
|
@@ -2802,7 +2684,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2802
2684
|
syncSelectedFiles
|
|
2803
2685
|
]
|
|
2804
2686
|
);
|
|
2805
|
-
const handleRemoveFile =
|
|
2687
|
+
const handleRemoveFile = React15.useCallback(
|
|
2806
2688
|
(fileIndex) => {
|
|
2807
2689
|
if (disabled) {
|
|
2808
2690
|
return;
|
|
@@ -2813,8 +2695,8 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2813
2695
|
},
|
|
2814
2696
|
[applyFilesToInput, disabled, selectedFiles, syncSelectedFiles]
|
|
2815
2697
|
);
|
|
2816
|
-
return /* @__PURE__ */ (0,
|
|
2817
|
-
/* @__PURE__ */ (0,
|
|
2698
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "grid w-full gap-4", children: [
|
|
2699
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2818
2700
|
"input",
|
|
2819
2701
|
{
|
|
2820
2702
|
...uploadProps,
|
|
@@ -2829,7 +2711,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2829
2711
|
onChange: handleInputChange
|
|
2830
2712
|
}
|
|
2831
2713
|
),
|
|
2832
|
-
/* @__PURE__ */ (0,
|
|
2714
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
2833
2715
|
"label",
|
|
2834
2716
|
{
|
|
2835
2717
|
"aria-disabled": disabled || void 0,
|
|
@@ -2849,8 +2731,8 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2849
2731
|
onDrop: handleDrop,
|
|
2850
2732
|
onKeyDown: handleKeyDown,
|
|
2851
2733
|
children: [
|
|
2852
|
-
/* @__PURE__ */ (0,
|
|
2853
|
-
/* @__PURE__ */ (0,
|
|
2734
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "flex size-10 items-center justify-center rounded-[6px] p-2 text-[color:var(--sofya-text-default)]", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(UploadGlyph, { className: "size-[18px]" }) }),
|
|
2735
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[color:var(--sofya-text-default)]", children: renderTextContent(resolvedTitle, {
|
|
2854
2736
|
as: "span",
|
|
2855
2737
|
className: "block text-[color:var(--sofya-text-default)]",
|
|
2856
2738
|
size: "body",
|
|
@@ -2858,7 +2740,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2858
2740
|
fontWeight: 500
|
|
2859
2741
|
}
|
|
2860
2742
|
}) }),
|
|
2861
|
-
resolvedDescription ? /* @__PURE__ */ (0,
|
|
2743
|
+
resolvedDescription ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[color:var(--sofya-text-subtle)]", children: renderTextContent(resolvedDescription, {
|
|
2862
2744
|
as: "span",
|
|
2863
2745
|
className: "block text-[color:var(--sofya-text-subtle)]",
|
|
2864
2746
|
size: "tiny"
|
|
@@ -2866,28 +2748,27 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2866
2748
|
]
|
|
2867
2749
|
}
|
|
2868
2750
|
),
|
|
2869
|
-
/* @__PURE__ */ (0,
|
|
2751
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { role: "list", className: "grid gap-4 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react2.AnimatePresence, { initial: false, children: selectedFiles.map((file, index) => {
|
|
2870
2752
|
const fileKey = resolveUploadFileSignature(file);
|
|
2871
|
-
return /* @__PURE__ */ (0,
|
|
2753
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2872
2754
|
import_react2.motion.div,
|
|
2873
2755
|
{
|
|
2874
|
-
layout: true,
|
|
2875
2756
|
role: "listitem",
|
|
2876
2757
|
className: "overflow-hidden",
|
|
2877
|
-
initial: prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y:
|
|
2878
|
-
animate: prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0
|
|
2879
|
-
exit: prefersReducedMotion ? { opacity: 0 } : { opacity: 0,
|
|
2758
|
+
initial: prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 8 },
|
|
2759
|
+
animate: prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 },
|
|
2760
|
+
exit: prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: -6 },
|
|
2880
2761
|
transition: uploadListItemTransition,
|
|
2881
|
-
children: /* @__PURE__ */ (0,
|
|
2882
|
-
/* @__PURE__ */ (0,
|
|
2762
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Card, { variant: "panel", className: "flex items-center gap-4 p-4", children: [
|
|
2763
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "flex size-11 shrink-0 items-center justify-center rounded-full bg-[color:var(--sofya-surface-hover)] text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2883
2764
|
UploadFileTypeGlyph,
|
|
2884
2765
|
{
|
|
2885
2766
|
className: "size-[18px]",
|
|
2886
2767
|
kind: resolveUploadFileVisualKind(file, uploadKind)
|
|
2887
2768
|
}
|
|
2888
2769
|
) }),
|
|
2889
|
-
/* @__PURE__ */ (0,
|
|
2890
|
-
/* @__PURE__ */ (0,
|
|
2770
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "min-w-0 flex-1", children: [
|
|
2771
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "truncate text-[color:var(--sofya-text-default)]", children: renderTextContent(file.name, {
|
|
2891
2772
|
as: "span",
|
|
2892
2773
|
className: "block truncate text-[color:var(--sofya-text-default)]",
|
|
2893
2774
|
size: "body",
|
|
@@ -2895,7 +2776,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2895
2776
|
fontWeight: 500
|
|
2896
2777
|
}
|
|
2897
2778
|
}) }),
|
|
2898
|
-
/* @__PURE__ */ (0,
|
|
2779
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "mt-2 text-[color:var(--sofya-text-subtle)]", children: renderTextContent(
|
|
2899
2780
|
`${resolveUploadFileBadge(
|
|
2900
2781
|
file
|
|
2901
2782
|
)} \xB7 ${formatUploadFileSize(file.size)}`,
|
|
@@ -2906,7 +2787,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2906
2787
|
}
|
|
2907
2788
|
) })
|
|
2908
2789
|
] }),
|
|
2909
|
-
/* @__PURE__ */ (0,
|
|
2790
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2910
2791
|
"button",
|
|
2911
2792
|
{
|
|
2912
2793
|
"aria-label": `Remover ${file.name}`,
|
|
@@ -2918,7 +2799,7 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2918
2799
|
event.stopPropagation();
|
|
2919
2800
|
handleRemoveFile(index);
|
|
2920
2801
|
},
|
|
2921
|
-
children: /* @__PURE__ */ (0,
|
|
2802
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2922
2803
|
Icon,
|
|
2923
2804
|
{
|
|
2924
2805
|
"aria-hidden": "true",
|
|
@@ -2936,9 +2817,104 @@ var UploadInputControl = React13.forwardRef(function UploadInputControl2({
|
|
|
2936
2817
|
}) }) })
|
|
2937
2818
|
] });
|
|
2938
2819
|
});
|
|
2939
|
-
UploadInputControl.displayName = "UploadInputControl";
|
|
2940
|
-
|
|
2941
|
-
|
|
2820
|
+
UploadInputControl.displayName = "UploadInputControl";
|
|
2821
|
+
|
|
2822
|
+
// src/components/input-otp.tsx
|
|
2823
|
+
var React16 = __toESM(require("react"), 1);
|
|
2824
|
+
var import_input_otp = require("input-otp");
|
|
2825
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
2826
|
+
var InputOTP = React16.forwardRef(({ className, containerClassName, ...props }, ref) => {
|
|
2827
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2828
|
+
import_input_otp.OTPInput,
|
|
2829
|
+
{
|
|
2830
|
+
ref,
|
|
2831
|
+
containerClassName: cn(
|
|
2832
|
+
"flex items-center gap-4 has-[:disabled]:opacity-50",
|
|
2833
|
+
containerClassName
|
|
2834
|
+
),
|
|
2835
|
+
className: cn("disabled:cursor-not-allowed", className),
|
|
2836
|
+
...props
|
|
2837
|
+
}
|
|
2838
|
+
);
|
|
2839
|
+
});
|
|
2840
|
+
InputOTP.displayName = "InputOTP";
|
|
2841
|
+
var InputOTPGroup = React16.forwardRef(({ className, ...props }, ref) => {
|
|
2842
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2843
|
+
"div",
|
|
2844
|
+
{
|
|
2845
|
+
ref,
|
|
2846
|
+
className: cn(
|
|
2847
|
+
"flex overflow-hidden rounded-[12px] border border-[color:var(--sofya-border-hover)] bg-card",
|
|
2848
|
+
className
|
|
2849
|
+
),
|
|
2850
|
+
...props
|
|
2851
|
+
}
|
|
2852
|
+
);
|
|
2853
|
+
});
|
|
2854
|
+
InputOTPGroup.displayName = "InputOTPGroup";
|
|
2855
|
+
var InputOTPSlot = React16.forwardRef(
|
|
2856
|
+
({ className, index, ...props }, ref) => {
|
|
2857
|
+
const otpContext = React16.useContext(import_input_otp.OTPInputContext);
|
|
2858
|
+
const slot = otpContext.slots[index];
|
|
2859
|
+
if (!slot) {
|
|
2860
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2861
|
+
"div",
|
|
2862
|
+
{
|
|
2863
|
+
ref,
|
|
2864
|
+
className: cn(
|
|
2865
|
+
"relative flex h-[92px] w-[96px] items-center justify-center border-r border-[color:var(--sofya-border-strong)] bg-card last:border-r-0",
|
|
2866
|
+
className
|
|
2867
|
+
),
|
|
2868
|
+
...props
|
|
2869
|
+
}
|
|
2870
|
+
);
|
|
2871
|
+
}
|
|
2872
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
2873
|
+
"div",
|
|
2874
|
+
{
|
|
2875
|
+
ref,
|
|
2876
|
+
className: cn(
|
|
2877
|
+
"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",
|
|
2878
|
+
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)]",
|
|
2879
|
+
className
|
|
2880
|
+
),
|
|
2881
|
+
...props,
|
|
2882
|
+
children: [
|
|
2883
|
+
slot.char ?? null,
|
|
2884
|
+
slot.hasFakeCaret ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "h-10 w-[2px] animate-pulse rounded-full bg-primary shadow-[var(--sofya-shadow-caret-glow)]" }) }) : null
|
|
2885
|
+
]
|
|
2886
|
+
}
|
|
2887
|
+
);
|
|
2888
|
+
}
|
|
2889
|
+
);
|
|
2890
|
+
InputOTPSlot.displayName = "InputOTPSlot";
|
|
2891
|
+
var InputOTPSeparator = React16.forwardRef(({ className, ...props }, ref) => {
|
|
2892
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2893
|
+
"div",
|
|
2894
|
+
{
|
|
2895
|
+
ref,
|
|
2896
|
+
role: "separator",
|
|
2897
|
+
className: cn(
|
|
2898
|
+
"flex items-center justify-center px-2 text-[28px] leading-none text-[color:var(--sofya-text-soft)]",
|
|
2899
|
+
className
|
|
2900
|
+
),
|
|
2901
|
+
...props,
|
|
2902
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { "aria-hidden": "true", children: "." })
|
|
2903
|
+
}
|
|
2904
|
+
);
|
|
2905
|
+
});
|
|
2906
|
+
InputOTPSeparator.displayName = "InputOTPSeparator";
|
|
2907
|
+
|
|
2908
|
+
// src/components/input.tsx
|
|
2909
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
2910
|
+
var inputVariantOptions = [
|
|
2911
|
+
"default",
|
|
2912
|
+
"search",
|
|
2913
|
+
"otp",
|
|
2914
|
+
"upload"
|
|
2915
|
+
];
|
|
2916
|
+
var Input = React17.forwardRef((props, ref) => {
|
|
2917
|
+
const generatedId = React17.useId();
|
|
2942
2918
|
const resolvedId = props.id ?? generatedId;
|
|
2943
2919
|
const variant = props.variant ?? "default";
|
|
2944
2920
|
if (variant === "otp") {
|
|
@@ -2966,7 +2942,7 @@ var Input = React13.forwardRef((props, ref) => {
|
|
|
2966
2942
|
);
|
|
2967
2943
|
const hasTrailingGroup = resolvedSplitIndex < resolvedLength;
|
|
2968
2944
|
const otpAriaLabel = otpProps["aria-label"] ?? "Verification code";
|
|
2969
|
-
const otpControl = /* @__PURE__ */ (0,
|
|
2945
|
+
const otpControl = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
2970
2946
|
InputOTP,
|
|
2971
2947
|
{
|
|
2972
2948
|
ref,
|
|
@@ -2979,7 +2955,7 @@ var Input = React13.forwardRef((props, ref) => {
|
|
|
2979
2955
|
containerClassName: className2,
|
|
2980
2956
|
...otpProps,
|
|
2981
2957
|
children: [
|
|
2982
|
-
/* @__PURE__ */ (0,
|
|
2958
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(InputOTPGroup, { className: otpGroupClassName, children: Array.from({ length: resolvedSplitIndex }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
2983
2959
|
InputOTPSlot,
|
|
2984
2960
|
{
|
|
2985
2961
|
className: otpSlotClassName,
|
|
@@ -2987,10 +2963,10 @@ var Input = React13.forwardRef((props, ref) => {
|
|
|
2987
2963
|
},
|
|
2988
2964
|
`otp-leading-${index}`
|
|
2989
2965
|
)) }),
|
|
2990
|
-
hasTrailingGroup ? otpSeparator ?? /* @__PURE__ */ (0,
|
|
2991
|
-
hasTrailingGroup ? /* @__PURE__ */ (0,
|
|
2966
|
+
hasTrailingGroup ? otpSeparator ?? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(InputOTPSeparator, { className: otpSeparatorClassName }) : null,
|
|
2967
|
+
hasTrailingGroup ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(InputOTPGroup, { className: otpGroupClassName, children: Array.from(
|
|
2992
2968
|
{ length: resolvedLength - resolvedSplitIndex },
|
|
2993
|
-
(_, index) => /* @__PURE__ */ (0,
|
|
2969
|
+
(_, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
2994
2970
|
InputOTPSlot,
|
|
2995
2971
|
{
|
|
2996
2972
|
className: otpSlotClassName,
|
|
@@ -3002,12 +2978,12 @@ var Input = React13.forwardRef((props, ref) => {
|
|
|
3002
2978
|
]
|
|
3003
2979
|
}
|
|
3004
2980
|
);
|
|
3005
|
-
return /* @__PURE__ */ (0,
|
|
3006
|
-
|
|
2981
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
2982
|
+
FieldShell,
|
|
3007
2983
|
{
|
|
3008
2984
|
containerClassName: containerClassName2,
|
|
3009
2985
|
control: otpControl,
|
|
3010
|
-
resolvedId
|
|
2986
|
+
labelHtmlFor: resolvedId
|
|
3011
2987
|
}
|
|
3012
2988
|
);
|
|
3013
2989
|
}
|
|
@@ -3021,7 +2997,7 @@ var Input = React13.forwardRef((props, ref) => {
|
|
|
3021
2997
|
variant: _variant2,
|
|
3022
2998
|
...uploadProps
|
|
3023
2999
|
} = props;
|
|
3024
|
-
const uploadControl = /* @__PURE__ */ (0,
|
|
3000
|
+
const uploadControl = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3025
3001
|
UploadInputControl,
|
|
3026
3002
|
{
|
|
3027
3003
|
...uploadProps,
|
|
@@ -3029,14 +3005,28 @@ var Input = React13.forwardRef((props, ref) => {
|
|
|
3029
3005
|
resolvedId
|
|
3030
3006
|
}
|
|
3031
3007
|
);
|
|
3032
|
-
|
|
3033
|
-
|
|
3008
|
+
const uploadLabel = label2 || uploadOptionalLabel ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
3009
|
+
renderTextContent(label2, {
|
|
3010
|
+
as: "span",
|
|
3011
|
+
className: "text-[color:var(--sofya-text-default)]",
|
|
3012
|
+
size: "body",
|
|
3013
|
+
style: {
|
|
3014
|
+
fontWeight: 700
|
|
3015
|
+
}
|
|
3016
|
+
}),
|
|
3017
|
+
uploadOptionalLabel ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "ml-2 text-[color:var(--sofya-text-subtle)]", children: renderTextContent(uploadOptionalLabel, {
|
|
3018
|
+
as: "span",
|
|
3019
|
+
className: "text-[color:var(--sofya-text-subtle)]",
|
|
3020
|
+
size: "tiny"
|
|
3021
|
+
}) }) : null
|
|
3022
|
+
] }) : void 0;
|
|
3023
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3024
|
+
FieldShell,
|
|
3034
3025
|
{
|
|
3035
3026
|
containerClassName: containerClassName2,
|
|
3036
3027
|
control: uploadControl,
|
|
3037
|
-
label:
|
|
3038
|
-
labelClassName: labelClassName2
|
|
3039
|
-
optionalLabel: uploadOptionalLabel
|
|
3028
|
+
label: uploadLabel,
|
|
3029
|
+
labelClassName: labelClassName2
|
|
3040
3030
|
}
|
|
3041
3031
|
);
|
|
3042
3032
|
}
|
|
@@ -3053,8 +3043,8 @@ var Input = React13.forwardRef((props, ref) => {
|
|
|
3053
3043
|
const isSearch = variant === "search";
|
|
3054
3044
|
const resolvedType = type ?? (isSearch ? "search" : void 0);
|
|
3055
3045
|
const ariaLabel = nativeProps["aria-label"] ?? (typeof label === "string" ? label : isSearch ? "Search" : void 0);
|
|
3056
|
-
const nativeControl = isSearch ? /* @__PURE__ */ (0,
|
|
3057
|
-
/* @__PURE__ */ (0,
|
|
3046
|
+
const nativeControl = isSearch ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("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: [
|
|
3047
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3058
3048
|
Icon,
|
|
3059
3049
|
{
|
|
3060
3050
|
"aria-hidden": "true",
|
|
@@ -3063,7 +3053,7 @@ var Input = React13.forwardRef((props, ref) => {
|
|
|
3063
3053
|
size: 32
|
|
3064
3054
|
}
|
|
3065
3055
|
),
|
|
3066
|
-
/* @__PURE__ */ (0,
|
|
3056
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3067
3057
|
"input",
|
|
3068
3058
|
{
|
|
3069
3059
|
id: resolvedId,
|
|
@@ -3079,7 +3069,7 @@ var Input = React13.forwardRef((props, ref) => {
|
|
|
3079
3069
|
placeholder: nativeProps.placeholder ?? "Search"
|
|
3080
3070
|
}
|
|
3081
3071
|
)
|
|
3082
|
-
] }) : /* @__PURE__ */ (0,
|
|
3072
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3083
3073
|
"input",
|
|
3084
3074
|
{
|
|
3085
3075
|
id: resolvedId,
|
|
@@ -3093,25 +3083,25 @@ var Input = React13.forwardRef((props, ref) => {
|
|
|
3093
3083
|
"aria-label": ariaLabel
|
|
3094
3084
|
}
|
|
3095
3085
|
);
|
|
3096
|
-
return /* @__PURE__ */ (0,
|
|
3097
|
-
|
|
3086
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3087
|
+
FieldShell,
|
|
3098
3088
|
{
|
|
3099
3089
|
containerClassName,
|
|
3100
3090
|
control: nativeControl,
|
|
3101
3091
|
label: isSearch ? void 0 : label,
|
|
3102
3092
|
labelClassName: isSearch ? void 0 : labelClassName,
|
|
3103
|
-
resolvedId
|
|
3093
|
+
labelHtmlFor: isSearch ? void 0 : resolvedId
|
|
3104
3094
|
}
|
|
3105
3095
|
);
|
|
3106
3096
|
});
|
|
3107
3097
|
Input.displayName = "Input";
|
|
3108
3098
|
|
|
3109
3099
|
// src/components/label.tsx
|
|
3110
|
-
var
|
|
3111
|
-
var
|
|
3112
|
-
var Label =
|
|
3100
|
+
var React18 = __toESM(require("react"), 1);
|
|
3101
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
3102
|
+
var Label = React18.forwardRef(
|
|
3113
3103
|
({ children, className, ...props }, ref) => {
|
|
3114
|
-
return /* @__PURE__ */ (0,
|
|
3104
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
3115
3105
|
"label",
|
|
3116
3106
|
{
|
|
3117
3107
|
ref,
|
|
@@ -3135,10 +3125,10 @@ var Label = React14.forwardRef(
|
|
|
3135
3125
|
Label.displayName = "Label";
|
|
3136
3126
|
|
|
3137
3127
|
// src/components/link.tsx
|
|
3138
|
-
var
|
|
3128
|
+
var React19 = __toESM(require("react"), 1);
|
|
3139
3129
|
var import_react_slot3 = require("@radix-ui/react-slot");
|
|
3140
3130
|
var import_class_variance_authority6 = require("class-variance-authority");
|
|
3141
|
-
var
|
|
3131
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
3142
3132
|
var linkVariants = (0, import_class_variance_authority6.cva)(
|
|
3143
3133
|
"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",
|
|
3144
3134
|
{
|
|
@@ -3153,9 +3143,9 @@ var linkVariants = (0, import_class_variance_authority6.cva)(
|
|
|
3153
3143
|
}
|
|
3154
3144
|
}
|
|
3155
3145
|
);
|
|
3156
|
-
var Link =
|
|
3146
|
+
var Link = React19.forwardRef(function Link2({ asChild = false, children, className, variant = "default", ...props }, ref) {
|
|
3157
3147
|
const Component = asChild ? import_react_slot3.Slot : "a";
|
|
3158
|
-
return /* @__PURE__ */ (0,
|
|
3148
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3159
3149
|
Component,
|
|
3160
3150
|
{
|
|
3161
3151
|
ref,
|
|
@@ -3173,7 +3163,7 @@ var Link = React15.forwardRef(function Link2({ asChild = false, children, classN
|
|
|
3173
3163
|
Link.displayName = "Link";
|
|
3174
3164
|
|
|
3175
3165
|
// src/components/logo.tsx
|
|
3176
|
-
var
|
|
3166
|
+
var React20 = __toESM(require("react"), 1);
|
|
3177
3167
|
|
|
3178
3168
|
// src/components/logo-data.ts
|
|
3179
3169
|
var logoAssets = {
|
|
@@ -3270,7 +3260,7 @@ var logoAssets = {
|
|
|
3270
3260
|
};
|
|
3271
3261
|
|
|
3272
3262
|
// src/components/logo.tsx
|
|
3273
|
-
var
|
|
3263
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
3274
3264
|
var logoVariants = ["mono", "default", "text", "full"];
|
|
3275
3265
|
var logoSizeOptions = ["sm", "md", "lg", "xl", "2xl"];
|
|
3276
3266
|
var logoSizeScale = {
|
|
@@ -3306,7 +3296,7 @@ function resolveLogoDimensions(variant, size, width, height) {
|
|
|
3306
3296
|
height: resolvedHeight
|
|
3307
3297
|
};
|
|
3308
3298
|
}
|
|
3309
|
-
var Logo =
|
|
3299
|
+
var Logo = React20.forwardRef(function Logo2({
|
|
3310
3300
|
variant = "full",
|
|
3311
3301
|
size = "lg",
|
|
3312
3302
|
width,
|
|
@@ -3317,10 +3307,10 @@ var Logo = React16.forwardRef(function Logo2({
|
|
|
3317
3307
|
...props
|
|
3318
3308
|
}, ref) {
|
|
3319
3309
|
const asset = logoAssets[variant];
|
|
3320
|
-
const titleId =
|
|
3310
|
+
const titleId = React20.useId();
|
|
3321
3311
|
const dimensions = resolveLogoDimensions(variant, size, width, height);
|
|
3322
3312
|
const monoFill = variant === "mono" ? monoColor ?? "currentColor" : void 0;
|
|
3323
|
-
return /* @__PURE__ */ (0,
|
|
3313
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
3324
3314
|
"svg",
|
|
3325
3315
|
{
|
|
3326
3316
|
ref,
|
|
@@ -3335,8 +3325,8 @@ var Logo = React16.forwardRef(function Logo2({
|
|
|
3335
3325
|
focusable: "false",
|
|
3336
3326
|
...props,
|
|
3337
3327
|
children: [
|
|
3338
|
-
title ? /* @__PURE__ */ (0,
|
|
3339
|
-
asset.paths.map((path, index) => /* @__PURE__ */ (0,
|
|
3328
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("title", { id: titleId, children: title }) : null,
|
|
3329
|
+
asset.paths.map((path, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
3340
3330
|
"path",
|
|
3341
3331
|
{
|
|
3342
3332
|
d: path.d,
|
|
@@ -3353,10 +3343,12 @@ var Logo = React16.forwardRef(function Logo2({
|
|
|
3353
3343
|
Logo.displayName = "Logo";
|
|
3354
3344
|
|
|
3355
3345
|
// src/components/pagination.tsx
|
|
3346
|
+
var import_icons_react5 = require("@tabler/icons-react");
|
|
3356
3347
|
var import_react_slot4 = require("@radix-ui/react-slot");
|
|
3357
3348
|
var import_class_variance_authority7 = require("class-variance-authority");
|
|
3358
|
-
|
|
3359
|
-
|
|
3349
|
+
|
|
3350
|
+
// src/lib/inherited-typography.ts
|
|
3351
|
+
var inheritedTypographyStyle = {
|
|
3360
3352
|
color: "inherit",
|
|
3361
3353
|
fontFamily: "inherit",
|
|
3362
3354
|
fontSize: "inherit",
|
|
@@ -3364,6 +3356,9 @@ var inheritTypographyStyle = {
|
|
|
3364
3356
|
letterSpacing: "inherit",
|
|
3365
3357
|
lineHeight: "inherit"
|
|
3366
3358
|
};
|
|
3359
|
+
|
|
3360
|
+
// src/components/pagination.tsx
|
|
3361
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
3367
3362
|
var paginationLinkVariants = (0, import_class_variance_authority7.cva)(
|
|
3368
3363
|
"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",
|
|
3369
3364
|
{
|
|
@@ -3384,7 +3379,7 @@ var paginationLinkVariants = (0, import_class_variance_authority7.cva)(
|
|
|
3384
3379
|
}
|
|
3385
3380
|
);
|
|
3386
3381
|
function Pagination({ className, ...props }) {
|
|
3387
|
-
return /* @__PURE__ */ (0,
|
|
3382
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
3388
3383
|
"nav",
|
|
3389
3384
|
{
|
|
3390
3385
|
"aria-label": "Pagination",
|
|
@@ -3397,7 +3392,7 @@ function PaginationContent({
|
|
|
3397
3392
|
className,
|
|
3398
3393
|
...props
|
|
3399
3394
|
}) {
|
|
3400
|
-
return /* @__PURE__ */ (0,
|
|
3395
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
3401
3396
|
"ul",
|
|
3402
3397
|
{
|
|
3403
3398
|
className: cn(
|
|
@@ -3409,7 +3404,7 @@ function PaginationContent({
|
|
|
3409
3404
|
);
|
|
3410
3405
|
}
|
|
3411
3406
|
function PaginationItem({ className, ...props }) {
|
|
3412
|
-
return /* @__PURE__ */ (0,
|
|
3407
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { className: cn("list-none", className), ...props });
|
|
3413
3408
|
}
|
|
3414
3409
|
function PaginationLink({
|
|
3415
3410
|
asChild = false,
|
|
@@ -3419,7 +3414,7 @@ function PaginationLink({
|
|
|
3419
3414
|
...props
|
|
3420
3415
|
}) {
|
|
3421
3416
|
const Component = asChild ? import_react_slot4.Slot : "a";
|
|
3422
|
-
return /* @__PURE__ */ (0,
|
|
3417
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
3423
3418
|
Component,
|
|
3424
3419
|
{
|
|
3425
3420
|
"aria-current": isActive ? "page" : void 0,
|
|
@@ -3429,67 +3424,29 @@ function PaginationLink({
|
|
|
3429
3424
|
);
|
|
3430
3425
|
}
|
|
3431
3426
|
function PaginationChevronLeft() {
|
|
3432
|
-
return /* @__PURE__ */ (0,
|
|
3433
|
-
"svg",
|
|
3434
|
-
{
|
|
3435
|
-
"aria-hidden": "true",
|
|
3436
|
-
className: "h-4 w-4",
|
|
3437
|
-
viewBox: "0 0 16 16",
|
|
3438
|
-
fill: "none",
|
|
3439
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
3440
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
3441
|
-
"path",
|
|
3442
|
-
{
|
|
3443
|
-
d: "M9.5 3.5L5 8L9.5 12.5",
|
|
3444
|
-
stroke: "currentColor",
|
|
3445
|
-
strokeWidth: "1.75",
|
|
3446
|
-
strokeLinecap: "round",
|
|
3447
|
-
strokeLinejoin: "round"
|
|
3448
|
-
}
|
|
3449
|
-
)
|
|
3450
|
-
}
|
|
3451
|
-
);
|
|
3427
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons_react5.IconChevronLeft, { "aria-hidden": "true", className: "h-4 w-4", stroke: 1.75 });
|
|
3452
3428
|
}
|
|
3453
3429
|
function PaginationChevronRight() {
|
|
3454
|
-
return /* @__PURE__ */ (0,
|
|
3455
|
-
"svg",
|
|
3456
|
-
{
|
|
3457
|
-
"aria-hidden": "true",
|
|
3458
|
-
className: "h-4 w-4",
|
|
3459
|
-
viewBox: "0 0 16 16",
|
|
3460
|
-
fill: "none",
|
|
3461
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
3462
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
3463
|
-
"path",
|
|
3464
|
-
{
|
|
3465
|
-
d: "M6.5 3.5L11 8L6.5 12.5",
|
|
3466
|
-
stroke: "currentColor",
|
|
3467
|
-
strokeWidth: "1.75",
|
|
3468
|
-
strokeLinecap: "round",
|
|
3469
|
-
strokeLinejoin: "round"
|
|
3470
|
-
}
|
|
3471
|
-
)
|
|
3472
|
-
}
|
|
3473
|
-
);
|
|
3430
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons_react5.IconChevronRight, { "aria-hidden": "true", className: "h-4 w-4", stroke: 1.75 });
|
|
3474
3431
|
}
|
|
3475
3432
|
function PaginationPrevious({
|
|
3476
3433
|
className,
|
|
3477
3434
|
text = "Previous",
|
|
3478
3435
|
...props
|
|
3479
3436
|
}) {
|
|
3480
|
-
return /* @__PURE__ */ (0,
|
|
3437
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
3481
3438
|
PaginationLink,
|
|
3482
3439
|
{
|
|
3483
3440
|
"aria-label": "Go to previous page",
|
|
3484
3441
|
className: cn("gap-2 px-4", className),
|
|
3485
3442
|
...props,
|
|
3486
3443
|
children: [
|
|
3487
|
-
/* @__PURE__ */ (0,
|
|
3488
|
-
/* @__PURE__ */ (0,
|
|
3444
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PaginationChevronLeft, {}),
|
|
3445
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "hidden sm:block", children: renderTextContent(text, {
|
|
3489
3446
|
as: "span",
|
|
3490
3447
|
className: "block text-inherit",
|
|
3491
3448
|
size: "body",
|
|
3492
|
-
style:
|
|
3449
|
+
style: inheritedTypographyStyle
|
|
3493
3450
|
}) })
|
|
3494
3451
|
]
|
|
3495
3452
|
}
|
|
@@ -3500,20 +3457,20 @@ function PaginationNext({
|
|
|
3500
3457
|
text = "Next",
|
|
3501
3458
|
...props
|
|
3502
3459
|
}) {
|
|
3503
|
-
return /* @__PURE__ */ (0,
|
|
3460
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
3504
3461
|
PaginationLink,
|
|
3505
3462
|
{
|
|
3506
3463
|
"aria-label": "Go to next page",
|
|
3507
3464
|
className: cn("gap-2 px-4", className),
|
|
3508
3465
|
...props,
|
|
3509
3466
|
children: [
|
|
3510
|
-
/* @__PURE__ */ (0,
|
|
3467
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "hidden sm:block", children: renderTextContent(text, {
|
|
3511
3468
|
as: "span",
|
|
3512
3469
|
className: "block text-inherit",
|
|
3513
3470
|
size: "body",
|
|
3514
|
-
style:
|
|
3471
|
+
style: inheritedTypographyStyle
|
|
3515
3472
|
}) }),
|
|
3516
|
-
/* @__PURE__ */ (0,
|
|
3473
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PaginationChevronRight, {})
|
|
3517
3474
|
]
|
|
3518
3475
|
}
|
|
3519
3476
|
);
|
|
@@ -3522,7 +3479,7 @@ function PaginationEllipsis({
|
|
|
3522
3479
|
className,
|
|
3523
3480
|
...props
|
|
3524
3481
|
}) {
|
|
3525
|
-
return /* @__PURE__ */ (0,
|
|
3482
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
3526
3483
|
"span",
|
|
3527
3484
|
{
|
|
3528
3485
|
"aria-hidden": "true",
|
|
@@ -3532,35 +3489,35 @@ function PaginationEllipsis({
|
|
|
3532
3489
|
),
|
|
3533
3490
|
...props,
|
|
3534
3491
|
children: [
|
|
3535
|
-
/* @__PURE__ */ (0,
|
|
3492
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: renderTextContent("...", {
|
|
3536
3493
|
as: "span",
|
|
3537
3494
|
className: "block text-inherit",
|
|
3538
3495
|
size: "h5",
|
|
3539
|
-
style:
|
|
3496
|
+
style: inheritedTypographyStyle
|
|
3540
3497
|
}) }),
|
|
3541
|
-
/* @__PURE__ */ (0,
|
|
3498
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "sr-only", children: "More pages" })
|
|
3542
3499
|
]
|
|
3543
3500
|
}
|
|
3544
3501
|
);
|
|
3545
3502
|
}
|
|
3546
3503
|
|
|
3547
3504
|
// src/components/popover.tsx
|
|
3548
|
-
var
|
|
3505
|
+
var React21 = __toESM(require("react"), 1);
|
|
3549
3506
|
var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
|
|
3550
|
-
var
|
|
3507
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
3551
3508
|
var Popover = PopoverPrimitive.Root;
|
|
3552
3509
|
var PopoverTrigger = PopoverPrimitive.Trigger;
|
|
3553
3510
|
var PopoverAnchor = PopoverPrimitive.Anchor;
|
|
3554
3511
|
var PopoverPortal = PopoverPrimitive.Portal;
|
|
3555
3512
|
var PopoverClose = PopoverPrimitive.Close;
|
|
3556
|
-
var PopoverContent =
|
|
3513
|
+
var PopoverContent = React21.forwardRef(function PopoverContent2({
|
|
3557
3514
|
align = "center",
|
|
3558
3515
|
className,
|
|
3559
3516
|
collisionPadding = 8,
|
|
3560
3517
|
sideOffset = 8,
|
|
3561
3518
|
...props
|
|
3562
3519
|
}, ref) {
|
|
3563
|
-
return /* @__PURE__ */ (0,
|
|
3520
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
3564
3521
|
PopoverPrimitive.Content,
|
|
3565
3522
|
{
|
|
3566
3523
|
ref,
|
|
@@ -3577,8 +3534,8 @@ var PopoverContent = React17.forwardRef(function PopoverContent2({
|
|
|
3577
3534
|
) });
|
|
3578
3535
|
});
|
|
3579
3536
|
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
|
3580
|
-
var PopoverTitle =
|
|
3581
|
-
return /* @__PURE__ */ (0,
|
|
3537
|
+
var PopoverTitle = React21.forwardRef(function PopoverTitle2({ children, className, ...props }, ref) {
|
|
3538
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
3582
3539
|
"h4",
|
|
3583
3540
|
{
|
|
3584
3541
|
ref,
|
|
@@ -3594,8 +3551,8 @@ var PopoverTitle = React17.forwardRef(function PopoverTitle2({ children, classNa
|
|
|
3594
3551
|
);
|
|
3595
3552
|
});
|
|
3596
3553
|
PopoverTitle.displayName = "PopoverTitle";
|
|
3597
|
-
var PopoverDescription =
|
|
3598
|
-
return /* @__PURE__ */ (0,
|
|
3554
|
+
var PopoverDescription = React21.forwardRef(function PopoverDescription2({ children, className, ...props }, ref) {
|
|
3555
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
3599
3556
|
"p",
|
|
3600
3557
|
{
|
|
3601
3558
|
ref,
|
|
@@ -3613,9 +3570,9 @@ var PopoverDescription = React17.forwardRef(function PopoverDescription2({ child
|
|
|
3613
3570
|
PopoverDescription.displayName = "PopoverDescription";
|
|
3614
3571
|
|
|
3615
3572
|
// src/components/progress.tsx
|
|
3616
|
-
var
|
|
3573
|
+
var React22 = __toESM(require("react"), 1);
|
|
3617
3574
|
var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"), 1);
|
|
3618
|
-
var
|
|
3575
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
3619
3576
|
var progressSizeOptions = ["sm", "default", "lg"];
|
|
3620
3577
|
function clampProgressValue(value, max) {
|
|
3621
3578
|
if (Number.isNaN(value)) {
|
|
@@ -3623,7 +3580,7 @@ function clampProgressValue(value, max) {
|
|
|
3623
3580
|
}
|
|
3624
3581
|
return Math.min(Math.max(value, 0), max);
|
|
3625
3582
|
}
|
|
3626
|
-
var Progress =
|
|
3583
|
+
var Progress = React22.forwardRef(function Progress2({
|
|
3627
3584
|
className,
|
|
3628
3585
|
indicatorClassName,
|
|
3629
3586
|
max = 100,
|
|
@@ -3634,7 +3591,7 @@ var Progress = React18.forwardRef(function Progress2({
|
|
|
3634
3591
|
const safeMax = max > 0 ? max : 100;
|
|
3635
3592
|
const resolvedValue = typeof value === "number" ? clampProgressValue(value, safeMax) : null;
|
|
3636
3593
|
const progressScale = resolvedValue === null ? void 0 : Number((resolvedValue / safeMax).toFixed(4));
|
|
3637
|
-
return /* @__PURE__ */ (0,
|
|
3594
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3638
3595
|
ProgressPrimitive.Root,
|
|
3639
3596
|
{
|
|
3640
3597
|
ref,
|
|
@@ -3647,7 +3604,7 @@ var Progress = React18.forwardRef(function Progress2({
|
|
|
3647
3604
|
className
|
|
3648
3605
|
),
|
|
3649
3606
|
...props,
|
|
3650
|
-
children: /* @__PURE__ */ (0,
|
|
3607
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3651
3608
|
ProgressPrimitive.Indicator,
|
|
3652
3609
|
{
|
|
3653
3610
|
"data-slot": "progress-indicator",
|
|
@@ -3664,12 +3621,12 @@ var Progress = React18.forwardRef(function Progress2({
|
|
|
3664
3621
|
Progress.displayName = ProgressPrimitive.Root.displayName;
|
|
3665
3622
|
|
|
3666
3623
|
// src/components/radio-group.tsx
|
|
3667
|
-
var
|
|
3624
|
+
var React23 = __toESM(require("react"), 1);
|
|
3668
3625
|
var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"), 1);
|
|
3669
|
-
var
|
|
3626
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
3670
3627
|
var radioGroupOrientationOptions = ["horizontal", "vertical"];
|
|
3671
|
-
var RadioGroup2 =
|
|
3672
|
-
return /* @__PURE__ */ (0,
|
|
3628
|
+
var RadioGroup2 = React23.forwardRef(function RadioGroup3({ className, ...props }, ref) {
|
|
3629
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
3673
3630
|
RadioGroupPrimitive.Root,
|
|
3674
3631
|
{
|
|
3675
3632
|
ref,
|
|
@@ -3683,7 +3640,7 @@ var RadioGroup2 = React19.forwardRef(function RadioGroup3({ className, ...props
|
|
|
3683
3640
|
);
|
|
3684
3641
|
});
|
|
3685
3642
|
RadioGroup2.displayName = RadioGroupPrimitive.Root.displayName;
|
|
3686
|
-
var RadioGroupItem =
|
|
3643
|
+
var RadioGroupItem = React23.forwardRef(function RadioGroupItem2({
|
|
3687
3644
|
className,
|
|
3688
3645
|
controlClassName,
|
|
3689
3646
|
description,
|
|
@@ -3695,22 +3652,21 @@ var RadioGroupItem = React19.forwardRef(function RadioGroupItem2({
|
|
|
3695
3652
|
labelClassName,
|
|
3696
3653
|
...props
|
|
3697
3654
|
}, ref) {
|
|
3698
|
-
const generatedId =
|
|
3655
|
+
const generatedId = React23.useId();
|
|
3699
3656
|
const resolvedId = id ?? generatedId;
|
|
3700
3657
|
const labelId = label ? `${resolvedId}-label` : void 0;
|
|
3701
3658
|
const descriptionId = description ? `${resolvedId}-description` : void 0;
|
|
3702
3659
|
const alignClassName = description ? "items-start" : "items-center";
|
|
3703
|
-
return /* @__PURE__ */ (0,
|
|
3660
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
3704
3661
|
"label",
|
|
3705
3662
|
{
|
|
3706
|
-
className:
|
|
3707
|
-
"flex w-fit gap-4",
|
|
3663
|
+
className: selectionControlContainerClasses({
|
|
3708
3664
|
alignClassName,
|
|
3709
|
-
|
|
3710
|
-
|
|
3711
|
-
),
|
|
3665
|
+
className,
|
|
3666
|
+
disabled
|
|
3667
|
+
}),
|
|
3712
3668
|
children: [
|
|
3713
|
-
/* @__PURE__ */ (0,
|
|
3669
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
3714
3670
|
RadioGroupPrimitive.Item,
|
|
3715
3671
|
{
|
|
3716
3672
|
ref,
|
|
@@ -3720,11 +3676,13 @@ var RadioGroupItem = React19.forwardRef(function RadioGroupItem2({
|
|
|
3720
3676
|
"aria-describedby": descriptionId,
|
|
3721
3677
|
"data-slot": "radio-group-item",
|
|
3722
3678
|
className: cn(
|
|
3723
|
-
"peer mt-0 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full
|
|
3679
|
+
"peer mt-0 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-primary-foreground outline-none",
|
|
3680
|
+
selectionControlControlBaseClasses,
|
|
3681
|
+
"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",
|
|
3724
3682
|
controlClassName
|
|
3725
3683
|
),
|
|
3726
3684
|
...props,
|
|
3727
|
-
children: /* @__PURE__ */ (0,
|
|
3685
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RadioGroupPrimitive.Indicator, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
3728
3686
|
"span",
|
|
3729
3687
|
{
|
|
3730
3688
|
"data-slot": "radio-group-indicator",
|
|
@@ -3736,13 +3694,13 @@ var RadioGroupItem = React19.forwardRef(function RadioGroupItem2({
|
|
|
3736
3694
|
) })
|
|
3737
3695
|
}
|
|
3738
3696
|
),
|
|
3739
|
-
label || description ? /* @__PURE__ */ (0,
|
|
3740
|
-
label ? /* @__PURE__ */ (0,
|
|
3697
|
+
label || description ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: selectionControlContentBaseClasses, children: [
|
|
3698
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
3741
3699
|
"span",
|
|
3742
3700
|
{
|
|
3743
3701
|
id: labelId,
|
|
3744
3702
|
className: cn(
|
|
3745
|
-
|
|
3703
|
+
selectionControlLabelTextBaseClasses,
|
|
3746
3704
|
labelClassName
|
|
3747
3705
|
),
|
|
3748
3706
|
children: renderTextContent(label, {
|
|
@@ -3752,11 +3710,14 @@ var RadioGroupItem = React19.forwardRef(function RadioGroupItem2({
|
|
|
3752
3710
|
})
|
|
3753
3711
|
}
|
|
3754
3712
|
) : null,
|
|
3755
|
-
description ? /* @__PURE__ */ (0,
|
|
3713
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
3756
3714
|
"span",
|
|
3757
3715
|
{
|
|
3758
3716
|
id: descriptionId,
|
|
3759
|
-
className: cn(
|
|
3717
|
+
className: cn(
|
|
3718
|
+
selectionControlDescriptionTextBaseClasses,
|
|
3719
|
+
descriptionClassName
|
|
3720
|
+
),
|
|
3760
3721
|
children: renderTextContent(description, {
|
|
3761
3722
|
as: "span",
|
|
3762
3723
|
className: "text-muted-foreground",
|
|
@@ -3772,12 +3733,12 @@ var RadioGroupItem = React19.forwardRef(function RadioGroupItem2({
|
|
|
3772
3733
|
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
|
|
3773
3734
|
|
|
3774
3735
|
// src/components/scroll-area.tsx
|
|
3775
|
-
var
|
|
3736
|
+
var React24 = __toESM(require("react"), 1);
|
|
3776
3737
|
var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"), 1);
|
|
3777
|
-
var
|
|
3738
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
3778
3739
|
var scrollAreaOrientationOptions = ["horizontal", "vertical"];
|
|
3779
|
-
var ScrollArea =
|
|
3780
|
-
return /* @__PURE__ */ (0,
|
|
3740
|
+
var ScrollArea = React24.forwardRef(function ScrollArea2({ className, ...props }, ref) {
|
|
3741
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3781
3742
|
ScrollAreaPrimitive.Root,
|
|
3782
3743
|
{
|
|
3783
3744
|
ref,
|
|
@@ -3788,8 +3749,8 @@ var ScrollArea = React20.forwardRef(function ScrollArea2({ className, ...props }
|
|
|
3788
3749
|
);
|
|
3789
3750
|
});
|
|
3790
3751
|
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
|
|
3791
|
-
var ScrollAreaViewport =
|
|
3792
|
-
return /* @__PURE__ */ (0,
|
|
3752
|
+
var ScrollAreaViewport = React24.forwardRef(function ScrollAreaViewport2({ className, ...props }, ref) {
|
|
3753
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3793
3754
|
ScrollAreaPrimitive.Viewport,
|
|
3794
3755
|
{
|
|
3795
3756
|
ref,
|
|
@@ -3803,8 +3764,8 @@ var ScrollAreaViewport = React20.forwardRef(function ScrollAreaViewport2({ class
|
|
|
3803
3764
|
);
|
|
3804
3765
|
});
|
|
3805
3766
|
ScrollAreaViewport.displayName = ScrollAreaPrimitive.Viewport.displayName;
|
|
3806
|
-
var ScrollAreaScrollbar =
|
|
3807
|
-
return /* @__PURE__ */ (0,
|
|
3767
|
+
var ScrollAreaScrollbar = React24.forwardRef(function ScrollAreaScrollbar2({ className, orientation = "vertical", thumbClassName, ...props }, ref) {
|
|
3768
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3808
3769
|
ScrollAreaPrimitive.Scrollbar,
|
|
3809
3770
|
{
|
|
3810
3771
|
ref,
|
|
@@ -3815,7 +3776,7 @@ var ScrollAreaScrollbar = React20.forwardRef(function ScrollAreaScrollbar2({ cla
|
|
|
3815
3776
|
className
|
|
3816
3777
|
),
|
|
3817
3778
|
...props,
|
|
3818
|
-
children: /* @__PURE__ */ (0,
|
|
3779
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3819
3780
|
ScrollAreaPrimitive.Thumb,
|
|
3820
3781
|
{
|
|
3821
3782
|
"data-slot": "scroll-area-thumb",
|
|
@@ -3829,8 +3790,8 @@ var ScrollAreaScrollbar = React20.forwardRef(function ScrollAreaScrollbar2({ cla
|
|
|
3829
3790
|
);
|
|
3830
3791
|
});
|
|
3831
3792
|
ScrollAreaScrollbar.displayName = ScrollAreaPrimitive.Scrollbar.displayName;
|
|
3832
|
-
var ScrollAreaCorner =
|
|
3833
|
-
return /* @__PURE__ */ (0,
|
|
3793
|
+
var ScrollAreaCorner = React24.forwardRef(function ScrollAreaCorner2({ className, ...props }, ref) {
|
|
3794
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3834
3795
|
ScrollAreaPrimitive.Corner,
|
|
3835
3796
|
{
|
|
3836
3797
|
ref,
|
|
@@ -3843,22 +3804,19 @@ var ScrollAreaCorner = React20.forwardRef(function ScrollAreaCorner2({ className
|
|
|
3843
3804
|
ScrollAreaCorner.displayName = ScrollAreaPrimitive.Corner.displayName;
|
|
3844
3805
|
|
|
3845
3806
|
// src/components/select.tsx
|
|
3846
|
-
var
|
|
3807
|
+
var React25 = __toESM(require("react"), 1);
|
|
3847
3808
|
var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
|
|
3848
|
-
|
|
3849
|
-
|
|
3850
|
-
|
|
3851
|
-
|
|
3852
|
-
|
|
3853
|
-
|
|
3854
|
-
letterSpacing: "inherit",
|
|
3855
|
-
lineHeight: "inherit"
|
|
3856
|
-
};
|
|
3809
|
+
|
|
3810
|
+
// src/lib/form-control-classes.ts
|
|
3811
|
+
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)]";
|
|
3812
|
+
|
|
3813
|
+
// src/components/select.tsx
|
|
3814
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
3857
3815
|
var selectSizeOptions = ["default", "sm"];
|
|
3858
3816
|
var Select = SelectPrimitive.Root;
|
|
3859
3817
|
var SelectGroup = SelectPrimitive.Group;
|
|
3860
|
-
var SelectValue =
|
|
3861
|
-
return /* @__PURE__ */ (0,
|
|
3818
|
+
var SelectValue = React25.forwardRef(function SelectValue2({ className, ...props }, ref) {
|
|
3819
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
3862
3820
|
Text,
|
|
3863
3821
|
{
|
|
3864
3822
|
ref,
|
|
@@ -3866,34 +3824,28 @@ var SelectValue = React21.forwardRef(function SelectValue2({ className, ...props
|
|
|
3866
3824
|
"data-slot": "select-value",
|
|
3867
3825
|
className: cn("block truncate text-inherit", className),
|
|
3868
3826
|
size: "body",
|
|
3869
|
-
style:
|
|
3870
|
-
|
|
3871
|
-
fontSize: "inherit",
|
|
3872
|
-
fontWeight: "inherit",
|
|
3873
|
-
lineHeight: "inherit",
|
|
3874
|
-
letterSpacing: "inherit",
|
|
3875
|
-
color: "inherit"
|
|
3876
|
-
},
|
|
3877
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SelectPrimitive.Value, { className: "block truncate", ...props })
|
|
3827
|
+
style: inheritedTypographyStyle,
|
|
3828
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectPrimitive.Value, { className: "block truncate", ...props })
|
|
3878
3829
|
}
|
|
3879
3830
|
);
|
|
3880
3831
|
});
|
|
3881
3832
|
SelectValue.displayName = SelectPrimitive.Value.displayName;
|
|
3882
|
-
var SelectTrigger =
|
|
3883
|
-
return /* @__PURE__ */ (0,
|
|
3833
|
+
var SelectTrigger = React25.forwardRef(function SelectTrigger2({ className, children, size = "default", ...props }, ref) {
|
|
3834
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
3884
3835
|
SelectPrimitive.Trigger,
|
|
3885
3836
|
{
|
|
3886
3837
|
ref,
|
|
3887
3838
|
"data-slot": "select-trigger",
|
|
3888
3839
|
"data-size": size,
|
|
3889
3840
|
className: cn(
|
|
3890
|
-
|
|
3841
|
+
formControlBaseClasses,
|
|
3842
|
+
"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",
|
|
3891
3843
|
className
|
|
3892
3844
|
),
|
|
3893
3845
|
...props,
|
|
3894
3846
|
children: [
|
|
3895
3847
|
children,
|
|
3896
|
-
/* @__PURE__ */ (0,
|
|
3848
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
3897
3849
|
Icon,
|
|
3898
3850
|
{
|
|
3899
3851
|
name: "caret-down",
|
|
@@ -3906,8 +3858,8 @@ var SelectTrigger = React21.forwardRef(function SelectTrigger2({ className, chil
|
|
|
3906
3858
|
);
|
|
3907
3859
|
});
|
|
3908
3860
|
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
3909
|
-
var SelectScrollUpButton =
|
|
3910
|
-
return /* @__PURE__ */ (0,
|
|
3861
|
+
var SelectScrollUpButton = React25.forwardRef(function SelectScrollUpButton2({ className, ...props }, ref) {
|
|
3862
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
3911
3863
|
SelectPrimitive.ScrollUpButton,
|
|
3912
3864
|
{
|
|
3913
3865
|
ref,
|
|
@@ -3917,13 +3869,13 @@ var SelectScrollUpButton = React21.forwardRef(function SelectScrollUpButton2({ c
|
|
|
3917
3869
|
className
|
|
3918
3870
|
),
|
|
3919
3871
|
...props,
|
|
3920
|
-
children: /* @__PURE__ */ (0,
|
|
3872
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { name: "caret-up", size: 12 })
|
|
3921
3873
|
}
|
|
3922
3874
|
);
|
|
3923
3875
|
});
|
|
3924
3876
|
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
3925
|
-
var SelectScrollDownButton =
|
|
3926
|
-
return /* @__PURE__ */ (0,
|
|
3877
|
+
var SelectScrollDownButton = React25.forwardRef(function SelectScrollDownButton2({ className, ...props }, ref) {
|
|
3878
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
3927
3879
|
SelectPrimitive.ScrollDownButton,
|
|
3928
3880
|
{
|
|
3929
3881
|
ref,
|
|
@@ -3933,13 +3885,13 @@ var SelectScrollDownButton = React21.forwardRef(function SelectScrollDownButton2
|
|
|
3933
3885
|
className
|
|
3934
3886
|
),
|
|
3935
3887
|
...props,
|
|
3936
|
-
children: /* @__PURE__ */ (0,
|
|
3888
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { name: "caret-down", size: 12 })
|
|
3937
3889
|
}
|
|
3938
3890
|
);
|
|
3939
3891
|
});
|
|
3940
3892
|
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
|
|
3941
|
-
var SelectContent =
|
|
3942
|
-
return /* @__PURE__ */ (0,
|
|
3893
|
+
var SelectContent = React25.forwardRef(function SelectContent2({ className, children, position = "popper", ...props }, ref) {
|
|
3894
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
3943
3895
|
SelectPrimitive.Content,
|
|
3944
3896
|
{
|
|
3945
3897
|
ref,
|
|
@@ -3952,8 +3904,8 @@ var SelectContent = React21.forwardRef(function SelectContent2({ className, chil
|
|
|
3952
3904
|
),
|
|
3953
3905
|
...props,
|
|
3954
3906
|
children: [
|
|
3955
|
-
/* @__PURE__ */ (0,
|
|
3956
|
-
/* @__PURE__ */ (0,
|
|
3907
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectScrollUpButton, {}),
|
|
3908
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
3957
3909
|
SelectPrimitive.Viewport,
|
|
3958
3910
|
{
|
|
3959
3911
|
"data-slot": "select-viewport",
|
|
@@ -3961,14 +3913,14 @@ var SelectContent = React21.forwardRef(function SelectContent2({ className, chil
|
|
|
3961
3913
|
children
|
|
3962
3914
|
}
|
|
3963
3915
|
),
|
|
3964
|
-
/* @__PURE__ */ (0,
|
|
3916
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectScrollDownButton, {})
|
|
3965
3917
|
]
|
|
3966
3918
|
}
|
|
3967
3919
|
) });
|
|
3968
3920
|
});
|
|
3969
3921
|
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
3970
|
-
var SelectLabel =
|
|
3971
|
-
return /* @__PURE__ */ (0,
|
|
3922
|
+
var SelectLabel = React25.forwardRef(function SelectLabel2({ className, ...props }, ref) {
|
|
3923
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
3972
3924
|
SelectPrimitive.Label,
|
|
3973
3925
|
{
|
|
3974
3926
|
ref,
|
|
@@ -3990,8 +3942,8 @@ var SelectLabel = React21.forwardRef(function SelectLabel2({ className, ...props
|
|
|
3990
3942
|
);
|
|
3991
3943
|
});
|
|
3992
3944
|
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
3993
|
-
var SelectItem =
|
|
3994
|
-
return /* @__PURE__ */ (0,
|
|
3945
|
+
var SelectItem = React25.forwardRef(function SelectItem2({ className, children, ...props }, ref) {
|
|
3946
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
3995
3947
|
SelectPrimitive.Item,
|
|
3996
3948
|
{
|
|
3997
3949
|
ref,
|
|
@@ -4002,20 +3954,20 @@ var SelectItem = React21.forwardRef(function SelectItem2({ className, children,
|
|
|
4002
3954
|
),
|
|
4003
3955
|
...props,
|
|
4004
3956
|
children: [
|
|
4005
|
-
/* @__PURE__ */ (0,
|
|
3957
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectPrimitive.ItemText, { className: "truncate", children: renderTextContent(children, {
|
|
4006
3958
|
as: "span",
|
|
4007
3959
|
className: "block truncate text-[color:var(--sofya-text-default)]",
|
|
4008
3960
|
size: "body",
|
|
4009
|
-
style:
|
|
3961
|
+
style: inheritedTypographyStyle
|
|
4010
3962
|
}) }),
|
|
4011
|
-
/* @__PURE__ */ (0,
|
|
3963
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectPrimitive.ItemIndicator, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "absolute right-4 inline-flex h-4 w-4 items-center justify-center text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { name: "check", size: 14 }) }) })
|
|
4012
3964
|
]
|
|
4013
3965
|
}
|
|
4014
3966
|
);
|
|
4015
3967
|
});
|
|
4016
3968
|
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
4017
|
-
var SelectSeparator =
|
|
4018
|
-
return /* @__PURE__ */ (0,
|
|
3969
|
+
var SelectSeparator = React25.forwardRef(function SelectSeparator2({ className, ...props }, ref) {
|
|
3970
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
4019
3971
|
SelectPrimitive.Separator,
|
|
4020
3972
|
{
|
|
4021
3973
|
ref,
|
|
@@ -4028,11 +3980,11 @@ var SelectSeparator = React21.forwardRef(function SelectSeparator2({ className,
|
|
|
4028
3980
|
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
|
4029
3981
|
|
|
4030
3982
|
// src/components/separator.tsx
|
|
4031
|
-
var
|
|
3983
|
+
var React26 = __toESM(require("react"), 1);
|
|
4032
3984
|
var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"), 1);
|
|
4033
|
-
var
|
|
4034
|
-
var Separator2 =
|
|
4035
|
-
return /* @__PURE__ */ (0,
|
|
3985
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
3986
|
+
var Separator2 = React26.forwardRef(function Separator3({ className, decorative = true, orientation = "horizontal", ...props }, ref) {
|
|
3987
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
4036
3988
|
SeparatorPrimitive.Root,
|
|
4037
3989
|
{
|
|
4038
3990
|
ref,
|
|
@@ -4051,8 +4003,8 @@ var Separator2 = React22.forwardRef(function Separator3({ className, decorative
|
|
|
4051
4003
|
Separator2.displayName = SeparatorPrimitive.Root.displayName;
|
|
4052
4004
|
|
|
4053
4005
|
// src/components/slider.tsx
|
|
4054
|
-
var
|
|
4055
|
-
var
|
|
4006
|
+
var React27 = __toESM(require("react"), 1);
|
|
4007
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
4056
4008
|
function clampSliderValue(value, min, max) {
|
|
4057
4009
|
if (Number.isNaN(value)) {
|
|
4058
4010
|
return min;
|
|
@@ -4077,7 +4029,7 @@ function resolveSliderMeasurement(value, fallback) {
|
|
|
4077
4029
|
function isTextValue(value) {
|
|
4078
4030
|
return typeof value === "string" || typeof value === "number";
|
|
4079
4031
|
}
|
|
4080
|
-
var Slider =
|
|
4032
|
+
var Slider = React27.forwardRef(function Slider2({
|
|
4081
4033
|
className,
|
|
4082
4034
|
defaultValue,
|
|
4083
4035
|
formatValue,
|
|
@@ -4100,23 +4052,28 @@ var Slider = React23.forwardRef(function Slider2({
|
|
|
4100
4052
|
valueClassName,
|
|
4101
4053
|
...props
|
|
4102
4054
|
}, ref) {
|
|
4103
|
-
const resolvedId =
|
|
4055
|
+
const resolvedId = React27.useId();
|
|
4104
4056
|
const inputId = id ?? resolvedId;
|
|
4105
4057
|
const safeMin = min;
|
|
4106
4058
|
const safeMax = resolveSliderMax(safeMin, max);
|
|
4107
|
-
const
|
|
4108
|
-
|
|
4109
|
-
|
|
4110
|
-
|
|
4111
|
-
|
|
4112
|
-
|
|
4059
|
+
const [controllableValue, setControllableValue, setUncontrolledValue] = useControllableState({
|
|
4060
|
+
defaultValue: clampSliderValue(defaultValue ?? safeMin, safeMin, safeMax),
|
|
4061
|
+
onChange: onValueChange,
|
|
4062
|
+
value
|
|
4063
|
+
});
|
|
4064
|
+
React27.useEffect(() => {
|
|
4065
|
+
if (value !== void 0) {
|
|
4113
4066
|
return;
|
|
4114
4067
|
}
|
|
4115
|
-
|
|
4116
|
-
(currentValue2) => clampSliderValue(currentValue2, safeMin, safeMax)
|
|
4068
|
+
setUncontrolledValue(
|
|
4069
|
+
(currentValue2) => clampSliderValue(currentValue2 ?? safeMin, safeMin, safeMax)
|
|
4117
4070
|
);
|
|
4118
|
-
}, [
|
|
4119
|
-
const currentValue =
|
|
4071
|
+
}, [safeMax, safeMin, setUncontrolledValue, value]);
|
|
4072
|
+
const currentValue = clampSliderValue(
|
|
4073
|
+
controllableValue ?? safeMin,
|
|
4074
|
+
safeMin,
|
|
4075
|
+
safeMax
|
|
4076
|
+
);
|
|
4120
4077
|
const valueRatio = safeMax === safeMin ? 0 : (currentValue - safeMin) / (safeMax - safeMin);
|
|
4121
4078
|
const valuePercentage = valueRatio * 100;
|
|
4122
4079
|
const formattedValue = formatValue?.(currentValue) ?? currentValue.toString();
|
|
@@ -4148,38 +4105,29 @@ var Slider = React23.forwardRef(function Slider2({
|
|
|
4148
4105
|
safeMin,
|
|
4149
4106
|
safeMax
|
|
4150
4107
|
);
|
|
4151
|
-
|
|
4152
|
-
setInternalValue(nextValue);
|
|
4153
|
-
}
|
|
4108
|
+
setControllableValue(nextValue);
|
|
4154
4109
|
onChange?.(event);
|
|
4155
|
-
onValueChange?.(nextValue);
|
|
4156
4110
|
};
|
|
4157
|
-
return /* @__PURE__ */ (0,
|
|
4111
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
4158
4112
|
"div",
|
|
4159
4113
|
{
|
|
4160
4114
|
"data-slot": "slider",
|
|
4161
4115
|
className: cn("grid w-full gap-2", className),
|
|
4162
4116
|
children: [
|
|
4163
|
-
label || showValue ? /* @__PURE__ */ (0,
|
|
4164
|
-
label ? /* @__PURE__ */ (0,
|
|
4165
|
-
|
|
4117
|
+
label || showValue ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
|
|
4118
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
4119
|
+
FieldLabel,
|
|
4166
4120
|
{
|
|
4167
4121
|
htmlFor: inputId,
|
|
4168
4122
|
className: cn(
|
|
4169
|
-
"min-w-0
|
|
4123
|
+
"min-w-0",
|
|
4170
4124
|
labelClassName
|
|
4171
4125
|
),
|
|
4172
|
-
|
|
4173
|
-
|
|
4174
|
-
className: "block text-[color:var(--sofya-text-default)]",
|
|
4175
|
-
size: "body",
|
|
4176
|
-
style: {
|
|
4177
|
-
fontWeight: 500
|
|
4178
|
-
}
|
|
4179
|
-
})
|
|
4126
|
+
textClassName: "block min-w-0 text-[color:var(--sofya-text-default)]",
|
|
4127
|
+
children: label
|
|
4180
4128
|
}
|
|
4181
|
-
) : /* @__PURE__ */ (0,
|
|
4182
|
-
showValue ? /* @__PURE__ */ (0,
|
|
4129
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", {}),
|
|
4130
|
+
showValue ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
4183
4131
|
"div",
|
|
4184
4132
|
{
|
|
4185
4133
|
className: cn(
|
|
@@ -4197,7 +4145,7 @@ var Slider = React23.forwardRef(function Slider2({
|
|
|
4197
4145
|
}
|
|
4198
4146
|
) : null
|
|
4199
4147
|
] }) : null,
|
|
4200
|
-
/* @__PURE__ */ (0,
|
|
4148
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
4201
4149
|
"div",
|
|
4202
4150
|
{
|
|
4203
4151
|
"data-slot": "slider-control",
|
|
@@ -4207,7 +4155,7 @@ var Slider = React23.forwardRef(function Slider2({
|
|
|
4207
4155
|
),
|
|
4208
4156
|
style: controlStyle,
|
|
4209
4157
|
children: [
|
|
4210
|
-
/* @__PURE__ */ (0,
|
|
4158
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
4211
4159
|
"input",
|
|
4212
4160
|
{
|
|
4213
4161
|
...props,
|
|
@@ -4224,7 +4172,7 @@ var Slider = React23.forwardRef(function Slider2({
|
|
|
4224
4172
|
style: inputBoundsStyle
|
|
4225
4173
|
}
|
|
4226
4174
|
),
|
|
4227
|
-
/* @__PURE__ */ (0,
|
|
4175
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
4228
4176
|
"div",
|
|
4229
4177
|
{
|
|
4230
4178
|
"data-slot": "slider-track",
|
|
@@ -4235,7 +4183,7 @@ var Slider = React23.forwardRef(function Slider2({
|
|
|
4235
4183
|
style: trackBoundsStyle
|
|
4236
4184
|
}
|
|
4237
4185
|
),
|
|
4238
|
-
/* @__PURE__ */ (0,
|
|
4186
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
4239
4187
|
"div",
|
|
4240
4188
|
{
|
|
4241
4189
|
"data-slot": "slider-range",
|
|
@@ -4246,7 +4194,7 @@ var Slider = React23.forwardRef(function Slider2({
|
|
|
4246
4194
|
style: rangeStyle
|
|
4247
4195
|
}
|
|
4248
4196
|
),
|
|
4249
|
-
/* @__PURE__ */ (0,
|
|
4197
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
4250
4198
|
"div",
|
|
4251
4199
|
{
|
|
4252
4200
|
"data-slot": "slider-thumb",
|
|
@@ -4267,10 +4215,10 @@ var Slider = React23.forwardRef(function Slider2({
|
|
|
4267
4215
|
Slider.displayName = "Slider";
|
|
4268
4216
|
|
|
4269
4217
|
// src/components/skeleton.tsx
|
|
4270
|
-
var
|
|
4271
|
-
var
|
|
4272
|
-
var Skeleton =
|
|
4273
|
-
return /* @__PURE__ */ (0,
|
|
4218
|
+
var React28 = __toESM(require("react"), 1);
|
|
4219
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
4220
|
+
var Skeleton = React28.forwardRef(function Skeleton2({ className, ...props }, ref) {
|
|
4221
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
4274
4222
|
"div",
|
|
4275
4223
|
{
|
|
4276
4224
|
ref,
|
|
@@ -4285,15 +4233,15 @@ var Skeleton = React24.forwardRef(function Skeleton2({ className, ...props }, re
|
|
|
4285
4233
|
Skeleton.displayName = "Skeleton";
|
|
4286
4234
|
|
|
4287
4235
|
// src/components/sonner.tsx
|
|
4288
|
-
var
|
|
4236
|
+
var React29 = __toESM(require("react"), 1);
|
|
4289
4237
|
var import_sonner = require("sonner");
|
|
4290
|
-
var
|
|
4238
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
4291
4239
|
var notificationVariantOptions = ["default", "success", "error", "warning"];
|
|
4292
4240
|
function ToastStatusIcon({
|
|
4293
4241
|
iconName,
|
|
4294
4242
|
className
|
|
4295
4243
|
}) {
|
|
4296
|
-
return /* @__PURE__ */ (0,
|
|
4244
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
4297
4245
|
"span",
|
|
4298
4246
|
{
|
|
4299
4247
|
"aria-hidden": "true",
|
|
@@ -4301,7 +4249,7 @@ function ToastStatusIcon({
|
|
|
4301
4249
|
"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border shadow-sofya-sm",
|
|
4302
4250
|
className
|
|
4303
4251
|
),
|
|
4304
|
-
children: /* @__PURE__ */ (0,
|
|
4252
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { name: iconName, size: 16 })
|
|
4305
4253
|
}
|
|
4306
4254
|
);
|
|
4307
4255
|
}
|
|
@@ -4322,35 +4270,35 @@ var defaultToastClassNames = {
|
|
|
4322
4270
|
loading: "border-border bg-card text-foreground"
|
|
4323
4271
|
};
|
|
4324
4272
|
var defaultToastIcons = {
|
|
4325
|
-
success: /* @__PURE__ */ (0,
|
|
4273
|
+
success: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
4326
4274
|
ToastStatusIcon,
|
|
4327
4275
|
{
|
|
4328
4276
|
iconName: "check",
|
|
4329
4277
|
className: "border-success/15 bg-success/12 text-success"
|
|
4330
4278
|
}
|
|
4331
4279
|
),
|
|
4332
|
-
error: /* @__PURE__ */ (0,
|
|
4280
|
+
error: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
4333
4281
|
ToastStatusIcon,
|
|
4334
4282
|
{
|
|
4335
4283
|
iconName: "x",
|
|
4336
4284
|
className: "border-destructive/15 bg-destructive/12 text-destructive"
|
|
4337
4285
|
}
|
|
4338
4286
|
),
|
|
4339
|
-
warning: /* @__PURE__ */ (0,
|
|
4287
|
+
warning: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
4340
4288
|
ToastStatusIcon,
|
|
4341
4289
|
{
|
|
4342
4290
|
iconName: "question",
|
|
4343
4291
|
className: "border-warning/20 bg-warning/15 text-foreground"
|
|
4344
4292
|
}
|
|
4345
4293
|
),
|
|
4346
|
-
info: /* @__PURE__ */ (0,
|
|
4294
|
+
info: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
4347
4295
|
ToastStatusIcon,
|
|
4348
4296
|
{
|
|
4349
4297
|
iconName: "question",
|
|
4350
4298
|
className: "border-primary/15 bg-primary/10 text-primary"
|
|
4351
4299
|
}
|
|
4352
4300
|
),
|
|
4353
|
-
close: /* @__PURE__ */ (0,
|
|
4301
|
+
close: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { name: "x", size: 12 })
|
|
4354
4302
|
};
|
|
4355
4303
|
function mergeToastClassNames(overrides) {
|
|
4356
4304
|
return {
|
|
@@ -4358,7 +4306,7 @@ function mergeToastClassNames(overrides) {
|
|
|
4358
4306
|
...overrides
|
|
4359
4307
|
};
|
|
4360
4308
|
}
|
|
4361
|
-
var Toaster =
|
|
4309
|
+
var Toaster = React29.forwardRef(
|
|
4362
4310
|
function Toaster2({
|
|
4363
4311
|
className,
|
|
4364
4312
|
closeButton = true,
|
|
@@ -4370,7 +4318,7 @@ var Toaster = React25.forwardRef(
|
|
|
4370
4318
|
visibleToasts = 5,
|
|
4371
4319
|
...props
|
|
4372
4320
|
}, ref) {
|
|
4373
|
-
return /* @__PURE__ */ (0,
|
|
4321
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
4374
4322
|
import_sonner.Toaster,
|
|
4375
4323
|
{
|
|
4376
4324
|
ref,
|
|
@@ -4400,10 +4348,11 @@ var Toaster = React25.forwardRef(
|
|
|
4400
4348
|
Toaster.displayName = "Toaster";
|
|
4401
4349
|
|
|
4402
4350
|
// src/components/spinner.tsx
|
|
4403
|
-
var
|
|
4404
|
-
var
|
|
4351
|
+
var React30 = __toESM(require("react"), 1);
|
|
4352
|
+
var import_icons_react6 = require("@tabler/icons-react");
|
|
4353
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
4405
4354
|
var spinnerSizeOptions = ["sm", "default", "lg"];
|
|
4406
|
-
var Spinner =
|
|
4355
|
+
var Spinner = React30.forwardRef(function Spinner2({
|
|
4407
4356
|
"aria-label": ariaLabelProp,
|
|
4408
4357
|
"aria-labelledby": ariaLabelledby,
|
|
4409
4358
|
className,
|
|
@@ -4412,15 +4361,12 @@ var Spinner = React26.forwardRef(function Spinner2({
|
|
|
4412
4361
|
...props
|
|
4413
4362
|
}, ref) {
|
|
4414
4363
|
const ariaLabel = ariaLabelProp ?? (ariaLabelledby ? void 0 : "Loading");
|
|
4415
|
-
return /* @__PURE__ */ (0,
|
|
4416
|
-
|
|
4364
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
4365
|
+
import_icons_react6.IconLoader2,
|
|
4417
4366
|
{
|
|
4418
4367
|
ref,
|
|
4419
4368
|
"data-size": size,
|
|
4420
4369
|
"data-slot": "spinner",
|
|
4421
|
-
viewBox: "0 0 24 24",
|
|
4422
|
-
fill: "none",
|
|
4423
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
4424
4370
|
role,
|
|
4425
4371
|
"aria-label": ariaLabel,
|
|
4426
4372
|
"aria-labelledby": ariaLabelledby,
|
|
@@ -4428,30 +4374,18 @@ var Spinner = React26.forwardRef(function Spinner2({
|
|
|
4428
4374
|
"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",
|
|
4429
4375
|
className
|
|
4430
4376
|
),
|
|
4431
|
-
...props
|
|
4432
|
-
children: [
|
|
4433
|
-
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("circle", { cx: "12", cy: "12", r: "9", className: "opacity-20", stroke: "currentColor", strokeWidth: "3" }),
|
|
4434
|
-
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
4435
|
-
"path",
|
|
4436
|
-
{
|
|
4437
|
-
d: "M21 12A9 9 0 0 0 12 3",
|
|
4438
|
-
stroke: "currentColor",
|
|
4439
|
-
strokeWidth: "3",
|
|
4440
|
-
strokeLinecap: "round"
|
|
4441
|
-
}
|
|
4442
|
-
)
|
|
4443
|
-
]
|
|
4377
|
+
...props
|
|
4444
4378
|
}
|
|
4445
4379
|
);
|
|
4446
4380
|
});
|
|
4447
4381
|
Spinner.displayName = "Spinner";
|
|
4448
4382
|
|
|
4449
4383
|
// src/components/switch.tsx
|
|
4450
|
-
var
|
|
4384
|
+
var React31 = __toESM(require("react"), 1);
|
|
4451
4385
|
var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"), 1);
|
|
4452
|
-
var
|
|
4453
|
-
var Switch =
|
|
4454
|
-
return /* @__PURE__ */ (0,
|
|
4386
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
4387
|
+
var Switch = React31.forwardRef(({ className, ...props }, ref) => {
|
|
4388
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
4455
4389
|
SwitchPrimitives.Root,
|
|
4456
4390
|
{
|
|
4457
4391
|
className: cn(
|
|
@@ -4460,7 +4394,7 @@ var Switch = React27.forwardRef(({ className, ...props }, ref) => {
|
|
|
4460
4394
|
),
|
|
4461
4395
|
...props,
|
|
4462
4396
|
ref,
|
|
4463
|
-
children: /* @__PURE__ */ (0,
|
|
4397
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
4464
4398
|
SwitchPrimitives.Thumb,
|
|
4465
4399
|
{
|
|
4466
4400
|
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"
|
|
@@ -4473,8 +4407,8 @@ Switch.displayName = SwitchPrimitives.Root.displayName;
|
|
|
4473
4407
|
|
|
4474
4408
|
// src/components/table.tsx
|
|
4475
4409
|
var import_class_variance_authority8 = require("class-variance-authority");
|
|
4476
|
-
var
|
|
4477
|
-
var
|
|
4410
|
+
var React32 = __toESM(require("react"), 1);
|
|
4411
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
4478
4412
|
var tableCellVariantOptions = ["default", "primary", "muted"];
|
|
4479
4413
|
var tableStatusToneOptions = [
|
|
4480
4414
|
"active",
|
|
@@ -4524,21 +4458,13 @@ var tableActionButtonVariants = (0, import_class_variance_authority8.cva)(
|
|
|
4524
4458
|
}
|
|
4525
4459
|
}
|
|
4526
4460
|
);
|
|
4527
|
-
var
|
|
4528
|
-
|
|
4529
|
-
fontSize: "inherit",
|
|
4530
|
-
fontWeight: "inherit",
|
|
4531
|
-
lineHeight: "inherit",
|
|
4532
|
-
letterSpacing: "inherit",
|
|
4533
|
-
color: "inherit"
|
|
4534
|
-
};
|
|
4535
|
-
var Table = React28.forwardRef(function Table2({ className, ...props }, ref) {
|
|
4536
|
-
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
4461
|
+
var Table = React32.forwardRef(function Table2({ className, ...props }, ref) {
|
|
4462
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
4537
4463
|
"div",
|
|
4538
4464
|
{
|
|
4539
4465
|
"data-slot": "table-container",
|
|
4540
4466
|
className: "relative w-full overflow-x-auto",
|
|
4541
|
-
children: /* @__PURE__ */ (0,
|
|
4467
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
4542
4468
|
"table",
|
|
4543
4469
|
{
|
|
4544
4470
|
"data-slot": "table",
|
|
@@ -4553,8 +4479,8 @@ var Table = React28.forwardRef(function Table2({ className, ...props }, ref) {
|
|
|
4553
4479
|
}
|
|
4554
4480
|
);
|
|
4555
4481
|
});
|
|
4556
|
-
var TableHeader =
|
|
4557
|
-
return /* @__PURE__ */ (0,
|
|
4482
|
+
var TableHeader = React32.forwardRef(function TableHeader2({ className, ...props }, ref) {
|
|
4483
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
4558
4484
|
"thead",
|
|
4559
4485
|
{
|
|
4560
4486
|
"data-slot": "table-header",
|
|
@@ -4567,8 +4493,8 @@ var TableHeader = React28.forwardRef(function TableHeader2({ className, ...props
|
|
|
4567
4493
|
}
|
|
4568
4494
|
);
|
|
4569
4495
|
});
|
|
4570
|
-
var TableBody =
|
|
4571
|
-
return /* @__PURE__ */ (0,
|
|
4496
|
+
var TableBody = React32.forwardRef(function TableBody2({ className, ...props }, ref) {
|
|
4497
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
4572
4498
|
"tbody",
|
|
4573
4499
|
{
|
|
4574
4500
|
"data-slot": "table-body",
|
|
@@ -4578,8 +4504,8 @@ var TableBody = React28.forwardRef(function TableBody2({ className, ...props },
|
|
|
4578
4504
|
}
|
|
4579
4505
|
);
|
|
4580
4506
|
});
|
|
4581
|
-
var TableFooter =
|
|
4582
|
-
return /* @__PURE__ */ (0,
|
|
4507
|
+
var TableFooter = React32.forwardRef(function TableFooter2({ className, ...props }, ref) {
|
|
4508
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
4583
4509
|
"tfoot",
|
|
4584
4510
|
{
|
|
4585
4511
|
"data-slot": "table-footer",
|
|
@@ -4592,8 +4518,8 @@ var TableFooter = React28.forwardRef(function TableFooter2({ className, ...props
|
|
|
4592
4518
|
}
|
|
4593
4519
|
);
|
|
4594
4520
|
});
|
|
4595
|
-
var TableRow =
|
|
4596
|
-
return /* @__PURE__ */ (0,
|
|
4521
|
+
var TableRow = React32.forwardRef(function TableRow2({ className, ...props }, ref) {
|
|
4522
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
4597
4523
|
"tr",
|
|
4598
4524
|
{
|
|
4599
4525
|
"data-slot": "table-row",
|
|
@@ -4606,8 +4532,8 @@ var TableRow = React28.forwardRef(function TableRow2({ className, ...props }, re
|
|
|
4606
4532
|
}
|
|
4607
4533
|
);
|
|
4608
4534
|
});
|
|
4609
|
-
var TableHead =
|
|
4610
|
-
return /* @__PURE__ */ (0,
|
|
4535
|
+
var TableHead = React32.forwardRef(function TableHead2({ className, children, ...props }, ref) {
|
|
4536
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
4611
4537
|
"th",
|
|
4612
4538
|
{
|
|
4613
4539
|
"data-slot": "table-head",
|
|
@@ -4621,14 +4547,14 @@ var TableHead = React28.forwardRef(function TableHead2({ className, children, ..
|
|
|
4621
4547
|
as: "span",
|
|
4622
4548
|
className: "inline-flex items-center gap-2 text-inherit",
|
|
4623
4549
|
size: "tiny",
|
|
4624
|
-
style:
|
|
4550
|
+
style: inheritedTypographyStyle
|
|
4625
4551
|
})
|
|
4626
4552
|
}
|
|
4627
4553
|
);
|
|
4628
4554
|
});
|
|
4629
|
-
var TableCell =
|
|
4555
|
+
var TableCell = React32.forwardRef(
|
|
4630
4556
|
function TableCell2({ className, variant, children, ...props }, ref) {
|
|
4631
|
-
return /* @__PURE__ */ (0,
|
|
4557
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
4632
4558
|
"td",
|
|
4633
4559
|
{
|
|
4634
4560
|
"data-slot": "table-cell",
|
|
@@ -4639,14 +4565,14 @@ var TableCell = React28.forwardRef(
|
|
|
4639
4565
|
as: "span",
|
|
4640
4566
|
className: "block text-inherit [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
|
|
4641
4567
|
size: "body",
|
|
4642
|
-
style:
|
|
4568
|
+
style: inheritedTypographyStyle
|
|
4643
4569
|
})
|
|
4644
4570
|
}
|
|
4645
4571
|
);
|
|
4646
4572
|
}
|
|
4647
4573
|
);
|
|
4648
|
-
var TableCaption =
|
|
4649
|
-
return /* @__PURE__ */ (0,
|
|
4574
|
+
var TableCaption = React32.forwardRef(function TableCaption2({ className, children, ...props }, ref) {
|
|
4575
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
4650
4576
|
"caption",
|
|
4651
4577
|
{
|
|
4652
4578
|
"data-slot": "table-caption",
|
|
@@ -4660,7 +4586,7 @@ var TableCaption = React28.forwardRef(function TableCaption2({ className, childr
|
|
|
4660
4586
|
as: "span",
|
|
4661
4587
|
className: "block text-inherit",
|
|
4662
4588
|
size: "body",
|
|
4663
|
-
style:
|
|
4589
|
+
style: inheritedTypographyStyle
|
|
4664
4590
|
})
|
|
4665
4591
|
}
|
|
4666
4592
|
);
|
|
@@ -4671,7 +4597,7 @@ function TableStatusBadge({
|
|
|
4671
4597
|
children,
|
|
4672
4598
|
...props
|
|
4673
4599
|
}) {
|
|
4674
|
-
return /* @__PURE__ */ (0,
|
|
4600
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
4675
4601
|
Badge,
|
|
4676
4602
|
{
|
|
4677
4603
|
variant: "pill",
|
|
@@ -4681,13 +4607,13 @@ function TableStatusBadge({
|
|
|
4681
4607
|
as: "span",
|
|
4682
4608
|
className: "inline-flex items-center gap-2 text-inherit [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
|
|
4683
4609
|
size: "tiny",
|
|
4684
|
-
style:
|
|
4610
|
+
style: inheritedTypographyStyle
|
|
4685
4611
|
})
|
|
4686
4612
|
}
|
|
4687
4613
|
);
|
|
4688
4614
|
}
|
|
4689
|
-
var TableActionButton =
|
|
4690
|
-
return /* @__PURE__ */ (0,
|
|
4615
|
+
var TableActionButton = React32.forwardRef(function TableActionButton2({ className, tone, type = "button", children, ...props }, ref) {
|
|
4616
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
4691
4617
|
Button,
|
|
4692
4618
|
{
|
|
4693
4619
|
ref,
|
|
@@ -4700,13 +4626,13 @@ var TableActionButton = React28.forwardRef(function TableActionButton2({ classNa
|
|
|
4700
4626
|
as: "span",
|
|
4701
4627
|
className: "inline-flex items-center justify-center text-inherit [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
|
|
4702
4628
|
size: "body",
|
|
4703
|
-
style:
|
|
4629
|
+
style: inheritedTypographyStyle
|
|
4704
4630
|
})
|
|
4705
4631
|
}
|
|
4706
4632
|
);
|
|
4707
4633
|
});
|
|
4708
|
-
var TableActions =
|
|
4709
|
-
return /* @__PURE__ */ (0,
|
|
4634
|
+
var TableActions = React32.forwardRef(function TableActions2({ className, ...props }, ref) {
|
|
4635
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
4710
4636
|
"div",
|
|
4711
4637
|
{
|
|
4712
4638
|
ref,
|
|
@@ -4727,10 +4653,10 @@ TableActionButton.displayName = "TableActionButton";
|
|
|
4727
4653
|
TableActions.displayName = "TableActions";
|
|
4728
4654
|
|
|
4729
4655
|
// src/components/tabs.tsx
|
|
4730
|
-
var
|
|
4656
|
+
var React33 = __toESM(require("react"), 1);
|
|
4731
4657
|
var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"), 1);
|
|
4732
4658
|
var import_react3 = require("motion/react");
|
|
4733
|
-
var
|
|
4659
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
4734
4660
|
function resolveDefaultValue(items, defaultValue) {
|
|
4735
4661
|
if (defaultValue) {
|
|
4736
4662
|
return defaultValue;
|
|
@@ -4749,33 +4675,26 @@ function Tabs({
|
|
|
4749
4675
|
...props
|
|
4750
4676
|
}) {
|
|
4751
4677
|
const resolvedDefaultValue = resolveDefaultValue(items, defaultValue);
|
|
4752
|
-
const
|
|
4753
|
-
|
|
4754
|
-
|
|
4755
|
-
|
|
4756
|
-
|
|
4757
|
-
|
|
4758
|
-
|
|
4678
|
+
const [currentValue, setCurrentValue, setUncontrolledCurrentValue] = useControllableState({
|
|
4679
|
+
defaultValue: resolvedDefaultValue,
|
|
4680
|
+
onChange: onValueChange,
|
|
4681
|
+
value
|
|
4682
|
+
});
|
|
4683
|
+
const indicatorLayoutId = React33.useId();
|
|
4684
|
+
React33.useEffect(() => {
|
|
4685
|
+
if (value === void 0) {
|
|
4686
|
+
setUncontrolledCurrentValue(resolvedDefaultValue);
|
|
4759
4687
|
}
|
|
4760
|
-
}, [
|
|
4761
|
-
|
|
4762
|
-
(nextValue) => {
|
|
4763
|
-
if (!isControlled) {
|
|
4764
|
-
setSelectedValue(nextValue);
|
|
4765
|
-
}
|
|
4766
|
-
onValueChange?.(nextValue);
|
|
4767
|
-
},
|
|
4768
|
-
[isControlled, onValueChange]
|
|
4769
|
-
);
|
|
4770
|
-
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
4688
|
+
}, [resolvedDefaultValue, setUncontrolledCurrentValue, value]);
|
|
4689
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
4771
4690
|
TabsPrimitive.Root,
|
|
4772
4691
|
{
|
|
4773
4692
|
className: cn("w-full", className),
|
|
4774
|
-
onValueChange:
|
|
4693
|
+
onValueChange: setCurrentValue,
|
|
4775
4694
|
value: currentValue,
|
|
4776
4695
|
...props,
|
|
4777
4696
|
children: [
|
|
4778
|
-
/* @__PURE__ */ (0,
|
|
4697
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
4779
4698
|
TabsPrimitive.List,
|
|
4780
4699
|
{
|
|
4781
4700
|
"aria-label": "Subtelas navegaveis",
|
|
@@ -4786,7 +4705,7 @@ function Tabs({
|
|
|
4786
4705
|
children: items.map((item) => {
|
|
4787
4706
|
const isUnavailable = item.disabled || item.loading;
|
|
4788
4707
|
const isActive = item.value === currentValue;
|
|
4789
|
-
return /* @__PURE__ */ (0,
|
|
4708
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
4790
4709
|
TabsPrimitive.Trigger,
|
|
4791
4710
|
{
|
|
4792
4711
|
value: item.value,
|
|
@@ -4798,7 +4717,7 @@ function Tabs({
|
|
|
4798
4717
|
item.triggerClassName
|
|
4799
4718
|
),
|
|
4800
4719
|
children: [
|
|
4801
|
-
isActive ? /* @__PURE__ */ (0,
|
|
4720
|
+
isActive ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
4802
4721
|
import_react3.motion.span,
|
|
4803
4722
|
{
|
|
4804
4723
|
"aria-hidden": "true",
|
|
@@ -4808,15 +4727,15 @@ function Tabs({
|
|
|
4808
4727
|
transition: { duration: 0.25, ease: "easeInOut" }
|
|
4809
4728
|
}
|
|
4810
4729
|
) : null,
|
|
4811
|
-
/* @__PURE__ */ (0,
|
|
4812
|
-
item.loading ? /* @__PURE__ */ (0,
|
|
4730
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "relative z-10 inline-flex items-center gap-2", children: [
|
|
4731
|
+
item.loading ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
4813
4732
|
"span",
|
|
4814
4733
|
{
|
|
4815
4734
|
"aria-hidden": "true",
|
|
4816
4735
|
className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent"
|
|
4817
4736
|
}
|
|
4818
4737
|
) : null,
|
|
4819
|
-
/* @__PURE__ */ (0,
|
|
4738
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: renderTextContent(item.label, {
|
|
4820
4739
|
as: "span",
|
|
4821
4740
|
className: "block text-inherit",
|
|
4822
4741
|
size: "h5"
|
|
@@ -4830,7 +4749,7 @@ function Tabs({
|
|
|
4830
4749
|
}
|
|
4831
4750
|
),
|
|
4832
4751
|
items.map(
|
|
4833
|
-
(item) => item.content !== void 0 ? /* @__PURE__ */ (0,
|
|
4752
|
+
(item) => item.content !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
4834
4753
|
TabsPrimitive.Content,
|
|
4835
4754
|
{
|
|
4836
4755
|
value: item.value,
|
|
@@ -4853,9 +4772,9 @@ function Tabs({
|
|
|
4853
4772
|
Tabs.displayName = "Tabs";
|
|
4854
4773
|
|
|
4855
4774
|
// src/components/textarea.tsx
|
|
4856
|
-
var
|
|
4857
|
-
var
|
|
4858
|
-
var Textarea =
|
|
4775
|
+
var React34 = __toESM(require("react"), 1);
|
|
4776
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
4777
|
+
var Textarea = React34.forwardRef(
|
|
4859
4778
|
({
|
|
4860
4779
|
className,
|
|
4861
4780
|
containerClassName,
|
|
@@ -4865,10 +4784,10 @@ var Textarea = React30.forwardRef(
|
|
|
4865
4784
|
rows = 5,
|
|
4866
4785
|
...props
|
|
4867
4786
|
}, ref) => {
|
|
4868
|
-
const generatedId =
|
|
4787
|
+
const generatedId = React34.useId();
|
|
4869
4788
|
const resolvedId = id ?? generatedId;
|
|
4870
4789
|
const ariaLabel = props["aria-label"] ?? (typeof label === "string" ? label : void 0);
|
|
4871
|
-
const control = /* @__PURE__ */ (0,
|
|
4790
|
+
const control = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
4872
4791
|
"textarea",
|
|
4873
4792
|
{
|
|
4874
4793
|
className: cn(
|
|
@@ -4882,43 +4801,29 @@ var Textarea = React30.forwardRef(
|
|
|
4882
4801
|
"aria-label": ariaLabel
|
|
4883
4802
|
}
|
|
4884
4803
|
);
|
|
4885
|
-
|
|
4886
|
-
|
|
4887
|
-
|
|
4888
|
-
|
|
4889
|
-
|
|
4890
|
-
|
|
4891
|
-
|
|
4892
|
-
|
|
4893
|
-
|
|
4894
|
-
|
|
4895
|
-
),
|
|
4896
|
-
htmlFor: resolvedId,
|
|
4897
|
-
children: renderTextContent(label, {
|
|
4898
|
-
as: "span",
|
|
4899
|
-
className: "block text-[color:var(--sofya-text-default)]",
|
|
4900
|
-
size: "body",
|
|
4901
|
-
style: {
|
|
4902
|
-
fontWeight: 500
|
|
4903
|
-
}
|
|
4904
|
-
})
|
|
4905
|
-
}
|
|
4906
|
-
) : null,
|
|
4907
|
-
control
|
|
4908
|
-
] });
|
|
4804
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
4805
|
+
FieldShell,
|
|
4806
|
+
{
|
|
4807
|
+
control,
|
|
4808
|
+
containerClassName,
|
|
4809
|
+
label,
|
|
4810
|
+
labelClassName,
|
|
4811
|
+
labelHtmlFor: resolvedId
|
|
4812
|
+
}
|
|
4813
|
+
);
|
|
4909
4814
|
}
|
|
4910
4815
|
);
|
|
4911
4816
|
Textarea.displayName = "Textarea";
|
|
4912
4817
|
|
|
4913
4818
|
// src/components/tooltip.tsx
|
|
4914
|
-
var
|
|
4819
|
+
var React35 = __toESM(require("react"), 1);
|
|
4915
4820
|
var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
|
|
4916
|
-
var
|
|
4821
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
4917
4822
|
var TooltipProvider = TooltipPrimitive.Provider;
|
|
4918
4823
|
var Tooltip = TooltipPrimitive.Root;
|
|
4919
4824
|
var TooltipTrigger = TooltipPrimitive.Trigger;
|
|
4920
|
-
var TooltipContent =
|
|
4921
|
-
return /* @__PURE__ */ (0,
|
|
4825
|
+
var TooltipContent = React35.forwardRef(function TooltipContent2({ className, sideOffset = 8, ...props }, ref) {
|
|
4826
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
4922
4827
|
TooltipPrimitive.Content,
|
|
4923
4828
|
{
|
|
4924
4829
|
ref,
|
|
@@ -4942,9 +4847,9 @@ var TooltipContent = React31.forwardRef(function TooltipContent2({ className, si
|
|
|
4942
4847
|
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
|
4943
4848
|
|
|
4944
4849
|
// src/theme/provider.tsx
|
|
4945
|
-
var
|
|
4850
|
+
var React36 = __toESM(require("react"), 1);
|
|
4946
4851
|
var import_tokens = require("@sofya-ds/tokens");
|
|
4947
|
-
var
|
|
4852
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
4948
4853
|
var SOFYA_FONT_LINKS = [
|
|
4949
4854
|
{
|
|
4950
4855
|
id: "preconnect-googleapis",
|
|
@@ -4964,7 +4869,7 @@ var SOFYA_FONT_LINKS = [
|
|
|
4964
4869
|
}
|
|
4965
4870
|
];
|
|
4966
4871
|
function useSofyaFontLinks() {
|
|
4967
|
-
|
|
4872
|
+
React36.useEffect(() => {
|
|
4968
4873
|
if (typeof document === "undefined") {
|
|
4969
4874
|
return;
|
|
4970
4875
|
}
|
|
@@ -4997,7 +4902,7 @@ function SofyaProvider({
|
|
|
4997
4902
|
useSofyaFontLinks();
|
|
4998
4903
|
const theme = (0, import_tokens.createWhitelabelTheme)(overrides ?? {}, preset);
|
|
4999
4904
|
const cssVariables = (0, import_tokens.themeToCssVariables)(theme);
|
|
5000
|
-
return /* @__PURE__ */ (0,
|
|
4905
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
5001
4906
|
"div",
|
|
5002
4907
|
{
|
|
5003
4908
|
"data-sofya-theme": theme.name,
|
|
@@ -5141,6 +5046,7 @@ var import_tokens2 = require("@sofya-ds/tokens");
|
|
|
5141
5046
|
hexToHslChannels,
|
|
5142
5047
|
iconColorOptions,
|
|
5143
5048
|
iconNames,
|
|
5049
|
+
iconSizeMap,
|
|
5144
5050
|
iconSizeOptions,
|
|
5145
5051
|
inputVariantOptions,
|
|
5146
5052
|
isTextContent,
|