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