easykar-backoffice-ui 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +4124 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +702 -0
- package/dist/index.d.ts +702 -0
- package/dist/index.js +4035 -0
- package/dist/index.js.map +1 -0
- package/dist/styles.css +1 -0
- package/package.json +89 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,4035 @@
|
|
|
1
|
+
// src/theme/tokens.ts
|
|
2
|
+
var createStep = (size, lineHeight, fontWeight = 500, letterSpacing) => ({
|
|
3
|
+
fontSize: size,
|
|
4
|
+
lineHeight,
|
|
5
|
+
fontWeight,
|
|
6
|
+
letterSpacing
|
|
7
|
+
});
|
|
8
|
+
var typographyScale = {
|
|
9
|
+
// Display variants
|
|
10
|
+
"display-xsmall": createStep("32px", "40px", 400, "-1px"),
|
|
11
|
+
"display-small": createStep("36px", "44px", 400, "-1.16px"),
|
|
12
|
+
"display-medium": createStep("40px", "48px", 400, "-1.24px"),
|
|
13
|
+
"display-large": createStep("48px", "56px", 400, "-1.32px"),
|
|
14
|
+
// Heading variants
|
|
15
|
+
"heading-xsmall": createStep("12px", "16px", 400, "-0.24px"),
|
|
16
|
+
"heading-small": createStep("16px", "24px", 400, "-0.40px"),
|
|
17
|
+
"heading-medium": createStep("18px", "28px", 400, "-0.48px"),
|
|
18
|
+
"heading-large": createStep("20px", "32px", 400, "-0.56px"),
|
|
19
|
+
// Label variants
|
|
20
|
+
"label-xsmall": createStep("12px", "16px", 400, "-0.24px"),
|
|
21
|
+
"label-small": createStep("14px", "20px", 400, "-0.48px"),
|
|
22
|
+
"label-medium": createStep("18px", "24px", 400, "-0.56px"),
|
|
23
|
+
"label-large": createStep("20px", "28px", 400, "-0.64px"),
|
|
24
|
+
// Body variants
|
|
25
|
+
"body-xsmall": createStep("12px", "16px", 400, "-0.24px"),
|
|
26
|
+
"body-small": createStep("14px", "20px", 400, "-0.48px"),
|
|
27
|
+
"body-medium": createStep("16px", "24px", 400, "-0.56px"),
|
|
28
|
+
"body-large": createStep("18px", "28px", 400, "-0.64px")
|
|
29
|
+
};
|
|
30
|
+
var semanticColors = {
|
|
31
|
+
text: {
|
|
32
|
+
900: "#111927",
|
|
33
|
+
600: "#4d5761",
|
|
34
|
+
500: "#6c737f",
|
|
35
|
+
400: "#9da4ae",
|
|
36
|
+
0: "#ffffff"
|
|
37
|
+
},
|
|
38
|
+
background: {
|
|
39
|
+
900: "#111927",
|
|
40
|
+
700: "#384250",
|
|
41
|
+
200: "#e5e7eb",
|
|
42
|
+
100: "#f3f4f6",
|
|
43
|
+
50: "#f9fafb",
|
|
44
|
+
0: "#ffffff"
|
|
45
|
+
},
|
|
46
|
+
border: {
|
|
47
|
+
900: "#111927",
|
|
48
|
+
300: "#d2d6da",
|
|
49
|
+
200: "#e5e7eb",
|
|
50
|
+
0: "#ffffff"
|
|
51
|
+
},
|
|
52
|
+
icon: {
|
|
53
|
+
900: "#111927",
|
|
54
|
+
600: "#4d5761",
|
|
55
|
+
500: "#6c737f",
|
|
56
|
+
400: "#9da4ae",
|
|
57
|
+
0: "#ffffff"
|
|
58
|
+
},
|
|
59
|
+
primary: {
|
|
60
|
+
900: "#0e391f",
|
|
61
|
+
700: "#248a4b",
|
|
62
|
+
500: "#2fb563",
|
|
63
|
+
300: "#acd38d",
|
|
64
|
+
100: "#eaf4e1"
|
|
65
|
+
},
|
|
66
|
+
success: {
|
|
67
|
+
dark: "#1b7f3c",
|
|
68
|
+
base: "#29c95f",
|
|
69
|
+
light: "#c3ffd6",
|
|
70
|
+
lighter: "#f5fff7"
|
|
71
|
+
},
|
|
72
|
+
warning: {
|
|
73
|
+
dark: "#996004",
|
|
74
|
+
base: "#f7bb0a",
|
|
75
|
+
light: "#ffefc7",
|
|
76
|
+
lighter: "#fffaea"
|
|
77
|
+
},
|
|
78
|
+
danger: {
|
|
79
|
+
dark: "#c92b2a",
|
|
80
|
+
base: "#e93534",
|
|
81
|
+
light: "#ffdbdb",
|
|
82
|
+
lighter: "#fffafa"
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
var primitiveColors = {
|
|
86
|
+
neutral: {
|
|
87
|
+
900: "#111927",
|
|
88
|
+
800: "#1f2a37",
|
|
89
|
+
700: "#384250",
|
|
90
|
+
600: "#4d5761",
|
|
91
|
+
500: "#6c737f",
|
|
92
|
+
400: "#9da4ae",
|
|
93
|
+
300: "#d2d6db",
|
|
94
|
+
200: "#e5e7eb",
|
|
95
|
+
100: "#f3f4f6",
|
|
96
|
+
0: "#ffffff"
|
|
97
|
+
},
|
|
98
|
+
blue: {
|
|
99
|
+
dark: "#1b6480",
|
|
100
|
+
base: "#00aeef",
|
|
101
|
+
light: "#c2eeff",
|
|
102
|
+
lighter: "#f5fcff"
|
|
103
|
+
},
|
|
104
|
+
cabir: {
|
|
105
|
+
yellow: "#ffce04",
|
|
106
|
+
carbonDark: "#231f20"
|
|
107
|
+
},
|
|
108
|
+
decorative: {
|
|
109
|
+
green: "#ebf5f0"
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
var colorPalette = {
|
|
113
|
+
light: {
|
|
114
|
+
background: "210 20% 98%",
|
|
115
|
+
foreground: "218 39% 11%",
|
|
116
|
+
primary: "143 59% 45%",
|
|
117
|
+
"primary-foreground": "0 0% 100%",
|
|
118
|
+
secondary: "220 13% 91%",
|
|
119
|
+
"secondary-foreground": "218 39% 11%",
|
|
120
|
+
accent: "196 100% 88%",
|
|
121
|
+
"accent-foreground": "196 63% 31%",
|
|
122
|
+
destructive: "0 80% 56%",
|
|
123
|
+
"destructive-foreground": "0 0% 100%",
|
|
124
|
+
muted: "220 14% 96%",
|
|
125
|
+
"muted-foreground": "215 9% 65%",
|
|
126
|
+
border: "220 13% 91%",
|
|
127
|
+
input: "220 13% 91%",
|
|
128
|
+
ring: "143 59% 45%",
|
|
129
|
+
success: "140 66% 47%",
|
|
130
|
+
"success-foreground": "0 0% 100%",
|
|
131
|
+
warning: "45 94% 50%",
|
|
132
|
+
"warning-foreground": "37 95% 31%",
|
|
133
|
+
info: "193 100% 47%",
|
|
134
|
+
"info-foreground": "0 0% 100%",
|
|
135
|
+
card: "0 0% 100%",
|
|
136
|
+
"card-foreground": "218 39% 11%"
|
|
137
|
+
},
|
|
138
|
+
dark: {
|
|
139
|
+
background: "218 39% 11%",
|
|
140
|
+
foreground: "0 0% 100%",
|
|
141
|
+
primary: "93 44% 69%",
|
|
142
|
+
"primary-foreground": "144 61% 14%",
|
|
143
|
+
secondary: "215 18% 27%",
|
|
144
|
+
"secondary-foreground": "0 0% 100%",
|
|
145
|
+
accent: "196 63% 31%",
|
|
146
|
+
"accent-foreground": "0 0% 100%",
|
|
147
|
+
destructive: "0 65% 48%",
|
|
148
|
+
"destructive-foreground": "0 0% 100%",
|
|
149
|
+
muted: "215 18% 27%",
|
|
150
|
+
"muted-foreground": "215 9% 65%",
|
|
151
|
+
border: "210 10% 84%",
|
|
152
|
+
input: "210 10% 84%",
|
|
153
|
+
ring: "93 44% 69%",
|
|
154
|
+
success: "139 100% 88%",
|
|
155
|
+
"success-foreground": "140 65% 30%",
|
|
156
|
+
warning: "43 100% 89%",
|
|
157
|
+
"warning-foreground": "37 95% 31%",
|
|
158
|
+
info: "196 100% 88%",
|
|
159
|
+
"info-foreground": "196 63% 31%",
|
|
160
|
+
card: "215 18% 27%",
|
|
161
|
+
"card-foreground": "0 0% 100%"
|
|
162
|
+
}
|
|
163
|
+
};
|
|
164
|
+
var spacingScale = {
|
|
165
|
+
0: "0",
|
|
166
|
+
1: "0.25rem",
|
|
167
|
+
2: "0.5rem",
|
|
168
|
+
3: "0.75rem",
|
|
169
|
+
4: "1rem",
|
|
170
|
+
5: "1.5rem",
|
|
171
|
+
6: "2rem",
|
|
172
|
+
7: "3rem",
|
|
173
|
+
8: "4rem"
|
|
174
|
+
};
|
|
175
|
+
var radii = {
|
|
176
|
+
sm: "0.375rem",
|
|
177
|
+
md: "0.5rem",
|
|
178
|
+
lg: "0.75rem",
|
|
179
|
+
full: "999px"
|
|
180
|
+
};
|
|
181
|
+
var elevations = {
|
|
182
|
+
xs: "0 1px 2px rgb(15 23 42 / 0.05)",
|
|
183
|
+
sm: "0 2px 4px rgb(15 23 42 / 0.08)",
|
|
184
|
+
md: "0 8px 15px rgb(15 23 42 / 0.12)",
|
|
185
|
+
lg: "0 16px 30px rgb(15 23 42 / 0.15)",
|
|
186
|
+
xl: "0 25px 50px -12px rgb(15 23 42 / 0.25)"
|
|
187
|
+
};
|
|
188
|
+
var breakpoints = {
|
|
189
|
+
xs: 360,
|
|
190
|
+
sm: 640,
|
|
191
|
+
md: 768,
|
|
192
|
+
lg: 1024,
|
|
193
|
+
xl: 1280,
|
|
194
|
+
"2xl": 1536
|
|
195
|
+
};
|
|
196
|
+
var designTokens = {
|
|
197
|
+
typography: typographyScale,
|
|
198
|
+
colors: {
|
|
199
|
+
semantic: semanticColors,
|
|
200
|
+
primitives: primitiveColors,
|
|
201
|
+
modes: colorPalette,
|
|
202
|
+
gradients: {
|
|
203
|
+
border: "linear-gradient(135deg, var(--ui-cabir-yellow), var(--ui-primary))",
|
|
204
|
+
borderReverse: "linear-gradient(90deg, var(--ui-primary), var(--ui-cabir-yellow))",
|
|
205
|
+
overlay: "linear-gradient(180deg, rgba(47, 181, 99, 0) 5.61%, var(--ui-cabir-yellow) 100%)"
|
|
206
|
+
}
|
|
207
|
+
},
|
|
208
|
+
spacing: spacingScale,
|
|
209
|
+
radii,
|
|
210
|
+
elevations,
|
|
211
|
+
breakpoints
|
|
212
|
+
};
|
|
213
|
+
|
|
214
|
+
// src/lib/utils.ts
|
|
215
|
+
import { clsx } from "clsx";
|
|
216
|
+
import { twMerge } from "tailwind-merge";
|
|
217
|
+
function cn(...inputs) {
|
|
218
|
+
return twMerge(clsx(inputs));
|
|
219
|
+
}
|
|
220
|
+
function formatPhoneNumberWithPattern(value, format2) {
|
|
221
|
+
const numbers = value.replace(/\D/g, "");
|
|
222
|
+
let formatted = "";
|
|
223
|
+
let numberIndex = 0;
|
|
224
|
+
for (let i = 0; i < format2.length && numberIndex < numbers.length; i++) {
|
|
225
|
+
if (format2[i] === "#") {
|
|
226
|
+
formatted += numbers[numberIndex];
|
|
227
|
+
numberIndex++;
|
|
228
|
+
} else {
|
|
229
|
+
formatted += format2[i];
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
return formatted;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
// src/theme/typography.ts
|
|
236
|
+
var typographyClasses = {
|
|
237
|
+
// Display variants
|
|
238
|
+
"display-xsmall": "text-[32px] leading-[40px] tracking-[-1px] font-normal",
|
|
239
|
+
"display-small": "text-[36px] leading-[44px] tracking-[-1.16px] font-normal",
|
|
240
|
+
"display-medium": "text-[40px] leading-[48px] tracking-[-1.24px] font-normal",
|
|
241
|
+
"display-large": "text-[48px] leading-[56px] tracking-[-1.32px] font-normal",
|
|
242
|
+
// Heading variants
|
|
243
|
+
"heading-xsmall": "text-[12px] leading-[16px] tracking-[-0.24px] font-normal",
|
|
244
|
+
"heading-small": "text-[16px] leading-[24px] tracking-[-0.40px] font-normal",
|
|
245
|
+
"heading-medium": "text-[18px] leading-[28px] tracking-[-0.48px] font-normal",
|
|
246
|
+
"heading-large": "text-[20px] leading-[32px] tracking-[-0.56px] font-normal",
|
|
247
|
+
// Label variants
|
|
248
|
+
"label-xsmall": "text-[12px] leading-[16px] tracking-[-0.24px] font-normal",
|
|
249
|
+
"label-small": "text-[14px] leading-[20px] tracking-[-0.48px] font-normal",
|
|
250
|
+
"label-medium": "text-[18px] leading-[24px] tracking-[-0.56px] font-normal",
|
|
251
|
+
"label-large": "text-[20px] leading-[28px] tracking-[-0.64px] font-normal",
|
|
252
|
+
// Body variants
|
|
253
|
+
"body-xsmall": "text-[12px] leading-[16px] tracking-[-0.24px] font-normal",
|
|
254
|
+
"body-small": "text-[14px] leading-[20px] tracking-[-0.48px] font-normal",
|
|
255
|
+
"body-medium": "text-[16px] leading-[24px] tracking-[-0.56px] font-normal",
|
|
256
|
+
"body-large": "text-[18px] leading-[28px] tracking-[-0.64px] font-normal"
|
|
257
|
+
};
|
|
258
|
+
var getTypographyClass = (variant, additional) => cn(typographyClasses[variant], additional);
|
|
259
|
+
var typographyTokens = typographyScale;
|
|
260
|
+
|
|
261
|
+
// src/theme/provider.tsx
|
|
262
|
+
import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
|
|
263
|
+
import { jsx } from "react/jsx-runtime";
|
|
264
|
+
var STORAGE_KEY = "ui-theme";
|
|
265
|
+
var ThemeContext = createContext(void 0);
|
|
266
|
+
var getPreferredMode = () => {
|
|
267
|
+
if (typeof window === "undefined") return "light";
|
|
268
|
+
const stored = window.localStorage.getItem(STORAGE_KEY);
|
|
269
|
+
if (stored && ["light", "dark"].includes(stored)) {
|
|
270
|
+
return stored;
|
|
271
|
+
}
|
|
272
|
+
const media = window.matchMedia("(prefers-color-scheme: dark)");
|
|
273
|
+
return media.matches ? "dark" : "light";
|
|
274
|
+
};
|
|
275
|
+
var applyModeToDocument = (mode) => {
|
|
276
|
+
if (typeof document === "undefined") return;
|
|
277
|
+
document.documentElement.dataset.uiTheme = mode;
|
|
278
|
+
Object.entries(colorPalette[mode]).forEach(([token, value]) => {
|
|
279
|
+
document.documentElement.style.setProperty(`--ui-${token}`, value);
|
|
280
|
+
});
|
|
281
|
+
};
|
|
282
|
+
var ThemeProvider = ({
|
|
283
|
+
children,
|
|
284
|
+
initialMode = "light"
|
|
285
|
+
}) => {
|
|
286
|
+
const [mode, setModeState] = useState(() => initialMode);
|
|
287
|
+
useEffect(() => {
|
|
288
|
+
const preferred = getPreferredMode();
|
|
289
|
+
setModeState(preferred);
|
|
290
|
+
}, []);
|
|
291
|
+
useEffect(() => {
|
|
292
|
+
applyModeToDocument(mode);
|
|
293
|
+
if (typeof window !== "undefined") {
|
|
294
|
+
window.localStorage.setItem(STORAGE_KEY, mode);
|
|
295
|
+
}
|
|
296
|
+
}, [mode]);
|
|
297
|
+
const setMode = useCallback((next) => {
|
|
298
|
+
setModeState(next);
|
|
299
|
+
}, []);
|
|
300
|
+
const toggleMode = useCallback(() => {
|
|
301
|
+
setModeState((prev) => prev === "light" ? "dark" : "light");
|
|
302
|
+
}, []);
|
|
303
|
+
const value = useMemo(() => ({ mode, setMode, toggleMode }), [mode, setMode, toggleMode]);
|
|
304
|
+
return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
|
|
305
|
+
};
|
|
306
|
+
var useTheme = () => {
|
|
307
|
+
const ctx = useContext(ThemeContext);
|
|
308
|
+
if (!ctx) {
|
|
309
|
+
throw new Error("useTheme must be used within a ThemeProvider");
|
|
310
|
+
}
|
|
311
|
+
return ctx;
|
|
312
|
+
};
|
|
313
|
+
|
|
314
|
+
// src/components/ui/button.tsx
|
|
315
|
+
import * as React from "react";
|
|
316
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
317
|
+
import { cva } from "class-variance-authority";
|
|
318
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
319
|
+
var shadcnButtonVariants = cva(
|
|
320
|
+
"",
|
|
321
|
+
{
|
|
322
|
+
variants: {
|
|
323
|
+
variant: {
|
|
324
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
325
|
+
},
|
|
326
|
+
size: {
|
|
327
|
+
icon: "h-10 w-10"
|
|
328
|
+
}
|
|
329
|
+
},
|
|
330
|
+
defaultVariants: {
|
|
331
|
+
variant: "link",
|
|
332
|
+
size: "icon"
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
);
|
|
336
|
+
var ShadcnButton = React.forwardRef(
|
|
337
|
+
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
338
|
+
const Comp = asChild ? Slot : "button";
|
|
339
|
+
return /* @__PURE__ */ jsx2(
|
|
340
|
+
Comp,
|
|
341
|
+
{
|
|
342
|
+
className: cn(shadcnButtonVariants({ variant, size }), className),
|
|
343
|
+
ref,
|
|
344
|
+
...props
|
|
345
|
+
}
|
|
346
|
+
);
|
|
347
|
+
}
|
|
348
|
+
);
|
|
349
|
+
ShadcnButton.displayName = "ShadcnButton";
|
|
350
|
+
|
|
351
|
+
// src/components/ui/input.tsx
|
|
352
|
+
import * as React2 from "react";
|
|
353
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
354
|
+
var ShadcnInput = React2.forwardRef(
|
|
355
|
+
({ className, type = "text", ...props }, ref) => {
|
|
356
|
+
return /* @__PURE__ */ jsx3(
|
|
357
|
+
"input",
|
|
358
|
+
{
|
|
359
|
+
type,
|
|
360
|
+
className: cn(
|
|
361
|
+
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors",
|
|
362
|
+
"file:border-0 file:bg-transparent file:text-sm file:font-medium",
|
|
363
|
+
"placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
|
364
|
+
className
|
|
365
|
+
),
|
|
366
|
+
ref,
|
|
367
|
+
...props
|
|
368
|
+
}
|
|
369
|
+
);
|
|
370
|
+
}
|
|
371
|
+
);
|
|
372
|
+
ShadcnInput.displayName = "ShadcnInput";
|
|
373
|
+
|
|
374
|
+
// src/components/ui/checkbox.tsx
|
|
375
|
+
import * as React3 from "react";
|
|
376
|
+
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
|
377
|
+
import { Check } from "lucide-react";
|
|
378
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
379
|
+
var ShadcnCheckbox = React3.forwardRef(({ className, ...props }, ref) => {
|
|
380
|
+
return /* @__PURE__ */ jsx4(
|
|
381
|
+
CheckboxPrimitive.Root,
|
|
382
|
+
{
|
|
383
|
+
ref,
|
|
384
|
+
className: cn(
|
|
385
|
+
"peer inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border border-input bg-background",
|
|
386
|
+
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
|
|
387
|
+
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
388
|
+
"data-[state=checked]:bg-primary data-[state=checked]:border-primary",
|
|
389
|
+
className
|
|
390
|
+
),
|
|
391
|
+
...props,
|
|
392
|
+
children: /* @__PURE__ */ jsx4(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-white", children: /* @__PURE__ */ jsx4(Check, { className: "h-3 w-3" }) })
|
|
393
|
+
}
|
|
394
|
+
);
|
|
395
|
+
});
|
|
396
|
+
ShadcnCheckbox.displayName = "ShadcnCheckbox";
|
|
397
|
+
|
|
398
|
+
// src/components/ui/tabs.tsx
|
|
399
|
+
import * as React4 from "react";
|
|
400
|
+
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
401
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
402
|
+
var Tabs = TabsPrimitive.Root;
|
|
403
|
+
var TabsList = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
|
|
404
|
+
TabsPrimitive.List,
|
|
405
|
+
{
|
|
406
|
+
ref,
|
|
407
|
+
className: cn(
|
|
408
|
+
"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
|
|
409
|
+
className
|
|
410
|
+
),
|
|
411
|
+
...props
|
|
412
|
+
}
|
|
413
|
+
));
|
|
414
|
+
TabsList.displayName = TabsPrimitive.List.displayName;
|
|
415
|
+
var TabsTrigger = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
|
|
416
|
+
TabsPrimitive.Trigger,
|
|
417
|
+
{
|
|
418
|
+
ref,
|
|
419
|
+
className: cn(
|
|
420
|
+
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
|
|
421
|
+
className
|
|
422
|
+
),
|
|
423
|
+
...props
|
|
424
|
+
}
|
|
425
|
+
));
|
|
426
|
+
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
|
427
|
+
var TabsContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
|
|
428
|
+
TabsPrimitive.Content,
|
|
429
|
+
{
|
|
430
|
+
ref,
|
|
431
|
+
className: cn(
|
|
432
|
+
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
433
|
+
className
|
|
434
|
+
),
|
|
435
|
+
...props
|
|
436
|
+
}
|
|
437
|
+
));
|
|
438
|
+
TabsContent.displayName = TabsPrimitive.Content.displayName;
|
|
439
|
+
|
|
440
|
+
// src/components/easy/button.tsx
|
|
441
|
+
import * as React5 from "react";
|
|
442
|
+
import { cva as cva2 } from "class-variance-authority";
|
|
443
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
444
|
+
var baseFocusRing = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-background)]";
|
|
445
|
+
var easyButtonVariants = cva2(
|
|
446
|
+
"text-white w-full inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-base font-medium leading-6 tracking-[-0.56px] transition-all disabled:pointer-events-none disabled:opacity-60 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 hover:no-underline",
|
|
447
|
+
{
|
|
448
|
+
variants: {
|
|
449
|
+
variant: {
|
|
450
|
+
text: "bg-transparent text-[var(--ui-text-600)] hover:text-[var(--ui-text-900)] disabled:text-[var(--ui-text-400)]",
|
|
451
|
+
primary: "bg-[var(--ui-primary-500)] hover:bg-[var(--ui-primary-700)] disabled:bg-[var(--ui-background-200)] disabled:text-[var(--ui-text-400)]",
|
|
452
|
+
important: "bg-[var(--ui-background-900)] text-white hover:bg-[var(--ui-background-700)] disabled:bg-[var(--ui-background-100)] disabled:text-[var(--ui-text-400)]",
|
|
453
|
+
gradient: "text-white bg-[var(--ui-gradient-border)]",
|
|
454
|
+
loginbutton: "bg-white border border-[var(--ui-border-200)] text-[var(--ui-primary)] hover:border-transparent",
|
|
455
|
+
editbutton: "bg-[var(--ui-blue-base)] text-white text-[14px] hover:bg-[var(--ui-blue-dark)]"
|
|
456
|
+
},
|
|
457
|
+
appearance: {
|
|
458
|
+
filled: baseFocusRing,
|
|
459
|
+
stroke: "bg-[var(--ui-background-0)] border border-[var(--ui-primary)] text-[var(--ui-primary)] " + baseFocusRing,
|
|
460
|
+
light: "bg-[var(--ui-primary-100)] text-[var(--ui-primary)] " + baseFocusRing
|
|
461
|
+
},
|
|
462
|
+
size: {
|
|
463
|
+
default: "h-12 px-4 py-3 rounded-lg has-[>svg]:px-4",
|
|
464
|
+
large: "h-12 px-6 py-3 rounded-[10px] has-[>svg]:px-4",
|
|
465
|
+
medium: "h-10 px-6 py-2 rounded-lg has-[>svg]:px-4",
|
|
466
|
+
small: "h-8 px-4 py-1 rounded-sm has-[>svg]:px-2 text-sm",
|
|
467
|
+
icon: "size-9 rounded-md"
|
|
468
|
+
}
|
|
469
|
+
},
|
|
470
|
+
compoundVariants: [
|
|
471
|
+
{
|
|
472
|
+
variant: "primary",
|
|
473
|
+
appearance: "stroke",
|
|
474
|
+
class: "hover:bg-[var(--ui-primary)] hover:text-[var(--ui-primary-foreground)]"
|
|
475
|
+
},
|
|
476
|
+
{
|
|
477
|
+
variant: "primary",
|
|
478
|
+
appearance: "light",
|
|
479
|
+
class: "hover:bg-[var(--ui-primary)] hover:text-[var(--ui-primary-foreground)]"
|
|
480
|
+
},
|
|
481
|
+
{
|
|
482
|
+
variant: "important",
|
|
483
|
+
appearance: "stroke",
|
|
484
|
+
class: "border border-[var(--ui-background-200)] text-[var(--ui-background-900)] hover:bg-[var(--ui-background-700)] hover:text-white"
|
|
485
|
+
},
|
|
486
|
+
{
|
|
487
|
+
variant: "important",
|
|
488
|
+
appearance: "light",
|
|
489
|
+
class: "bg-[var(--ui-background-100)] border border-[var(--ui-background-200)] text-[var(--ui-background-900)] hover:bg-[var(--ui-background-700)] hover:text-white hover:border-transparent"
|
|
490
|
+
},
|
|
491
|
+
{
|
|
492
|
+
variant: "gradient",
|
|
493
|
+
appearance: "stroke",
|
|
494
|
+
class: "border border-[var(--ui-primary)] text-[var(--ui-primary)] hover:text-white hover:bg-[var(--ui-gradient-border)]"
|
|
495
|
+
},
|
|
496
|
+
{
|
|
497
|
+
variant: "gradient",
|
|
498
|
+
appearance: "light",
|
|
499
|
+
class: "bg-[var(--ui-primary-100)] text-[var(--ui-primary)] hover:bg-[var(--ui-gradient-border)] hover:text-white"
|
|
500
|
+
}
|
|
501
|
+
],
|
|
502
|
+
defaultVariants: {
|
|
503
|
+
variant: "primary",
|
|
504
|
+
appearance: "filled",
|
|
505
|
+
size: "large"
|
|
506
|
+
}
|
|
507
|
+
}
|
|
508
|
+
);
|
|
509
|
+
var EasyButton = React5.forwardRef(
|
|
510
|
+
({ className, variant, appearance, size, asChild = false, children, ...props }, ref) => {
|
|
511
|
+
return /* @__PURE__ */ jsx6(
|
|
512
|
+
ShadcnButton,
|
|
513
|
+
{
|
|
514
|
+
"data-slot": "button",
|
|
515
|
+
ref,
|
|
516
|
+
asChild,
|
|
517
|
+
className: cn("cursor-pointer", easyButtonVariants({ variant, appearance, size }), className),
|
|
518
|
+
...props,
|
|
519
|
+
children
|
|
520
|
+
}
|
|
521
|
+
);
|
|
522
|
+
}
|
|
523
|
+
);
|
|
524
|
+
EasyButton.displayName = "EasyButton";
|
|
525
|
+
|
|
526
|
+
// src/components/easy/input/input.tsx
|
|
527
|
+
import * as React6 from "react";
|
|
528
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
529
|
+
var baseInputClasses = "flex h-12 w-full rounded-[var(--ui-radius-lg)] border border-[var(--ui-border-200)] bg-[var(--ui-background-0)] px-4 py-3 text-base font-medium text-[var(--ui-text-900)] placeholder:text-[var(--ui-text-400)] transition-all";
|
|
530
|
+
var focusClasses = "focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:shadow-[0_0_0_1px_var(--ui-background-0),_0_0_0_2px_var(--ui-border-200)]";
|
|
531
|
+
var invalidClasses = "aria-[invalid='true']:border-[var(--ui-danger-base)] aria-[invalid='true']:focus-visible:shadow-[0_0_0_1px_var(--ui-background-0),_0_0_0_2px_var(--ui-danger-light)]";
|
|
532
|
+
var disabledClasses = "disabled:cursor-not-allowed disabled:bg-[var(--ui-background-100)] disabled:text-[var(--ui-text-400)]";
|
|
533
|
+
var Input = React6.forwardRef(
|
|
534
|
+
({ className, invalid, type = "text", ...props }, ref) => {
|
|
535
|
+
return /* @__PURE__ */ jsx7(
|
|
536
|
+
ShadcnInput,
|
|
537
|
+
{
|
|
538
|
+
type,
|
|
539
|
+
ref,
|
|
540
|
+
className: cn(baseInputClasses, focusClasses, invalidClasses, disabledClasses, className),
|
|
541
|
+
"aria-invalid": invalid,
|
|
542
|
+
...props
|
|
543
|
+
}
|
|
544
|
+
);
|
|
545
|
+
}
|
|
546
|
+
);
|
|
547
|
+
Input.displayName = "Input";
|
|
548
|
+
|
|
549
|
+
// src/components/easy/input/email-input.tsx
|
|
550
|
+
import * as React7 from "react";
|
|
551
|
+
import { AlertCircle } from "lucide-react";
|
|
552
|
+
import { jsx as jsx8, jsxs } from "react/jsx-runtime";
|
|
553
|
+
var EasyEmailInput = React7.forwardRef(
|
|
554
|
+
({
|
|
555
|
+
className,
|
|
556
|
+
label,
|
|
557
|
+
helperText,
|
|
558
|
+
errorText,
|
|
559
|
+
id,
|
|
560
|
+
name,
|
|
561
|
+
placeholder = "ornek@email.com",
|
|
562
|
+
onChange,
|
|
563
|
+
...props
|
|
564
|
+
}, ref) => {
|
|
565
|
+
const generatedId = React7.useId();
|
|
566
|
+
const inputId = id ?? generatedId;
|
|
567
|
+
const helperId = helperText && !errorText ? `${inputId}-helper` : void 0;
|
|
568
|
+
const errorId = errorText ? `${inputId}-error` : void 0;
|
|
569
|
+
const [isFocused, setIsFocused] = React7.useState(false);
|
|
570
|
+
const handleChange = (event) => {
|
|
571
|
+
const normalizedValue = event.target.value.toLowerCase().trim();
|
|
572
|
+
event.target.value = normalizedValue;
|
|
573
|
+
onChange?.(event);
|
|
574
|
+
};
|
|
575
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-1.5", children: [
|
|
576
|
+
label && /* @__PURE__ */ jsx8(
|
|
577
|
+
"label",
|
|
578
|
+
{
|
|
579
|
+
htmlFor: inputId,
|
|
580
|
+
className: "text-base font-medium text-[var(--ui-text-900)]",
|
|
581
|
+
children: label
|
|
582
|
+
}
|
|
583
|
+
),
|
|
584
|
+
/* @__PURE__ */ jsx8(
|
|
585
|
+
Input,
|
|
586
|
+
{
|
|
587
|
+
ref,
|
|
588
|
+
id: inputId,
|
|
589
|
+
name: name ?? inputId,
|
|
590
|
+
type: "email",
|
|
591
|
+
placeholder,
|
|
592
|
+
autoComplete: "email",
|
|
593
|
+
inputMode: "email",
|
|
594
|
+
onFocus: (event) => {
|
|
595
|
+
setIsFocused(true);
|
|
596
|
+
props.onFocus?.(event);
|
|
597
|
+
},
|
|
598
|
+
onBlur: (event) => {
|
|
599
|
+
setIsFocused(false);
|
|
600
|
+
props.onBlur?.(event);
|
|
601
|
+
},
|
|
602
|
+
onChange: handleChange,
|
|
603
|
+
className: cn(
|
|
604
|
+
"placeholder:text-[var(--ui-text-400)]",
|
|
605
|
+
!isFocused && "hover:bg-[var(--ui-background-100)]",
|
|
606
|
+
isFocused && !errorText && "border-[var(--ui-border-900)]",
|
|
607
|
+
errorText && "border-[var(--ui-danger-base)] focus-visible:ring-[var(--ui-danger-base)] focus-visible:ring-offset-0",
|
|
608
|
+
!errorText && "focus-visible:shadow-[0_0_0_2px_var(--ui-background-0),_0_0_0_4px_var(--ui-border-200)]",
|
|
609
|
+
errorText && "focus-visible:shadow-[0_0_0_2px_var(--ui-background-0),_0_0_0_4px_var(--ui-danger-light)]",
|
|
610
|
+
className
|
|
611
|
+
),
|
|
612
|
+
"aria-invalid": Boolean(errorText),
|
|
613
|
+
"aria-describedby": errorId ?? helperId,
|
|
614
|
+
...props
|
|
615
|
+
}
|
|
616
|
+
),
|
|
617
|
+
errorText ? /* @__PURE__ */ jsxs(
|
|
618
|
+
"p",
|
|
619
|
+
{
|
|
620
|
+
id: errorId,
|
|
621
|
+
className: "flex items-center gap-1 text-sm text-[var(--ui-danger-base)]",
|
|
622
|
+
children: [
|
|
623
|
+
/* @__PURE__ */ jsx8(AlertCircle, { className: "size-4" }),
|
|
624
|
+
errorText
|
|
625
|
+
]
|
|
626
|
+
}
|
|
627
|
+
) : helperText ? /* @__PURE__ */ jsx8("p", { id: helperId, className: "text-sm text-[var(--ui-text-500)]", children: helperText }) : null
|
|
628
|
+
] });
|
|
629
|
+
}
|
|
630
|
+
);
|
|
631
|
+
EasyEmailInput.displayName = "EasyEmailInput";
|
|
632
|
+
|
|
633
|
+
// src/components/easy/input/password-input.tsx
|
|
634
|
+
import * as React8 from "react";
|
|
635
|
+
import { Eye, EyeOff, AlertCircle as AlertCircle2 } from "lucide-react";
|
|
636
|
+
import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
637
|
+
var EasyPasswordInput = React8.forwardRef(
|
|
638
|
+
({
|
|
639
|
+
className,
|
|
640
|
+
label,
|
|
641
|
+
helperText,
|
|
642
|
+
helperIcon,
|
|
643
|
+
errorText,
|
|
644
|
+
errorIcon = /* @__PURE__ */ jsx9(AlertCircle2, { className: "size-4" }),
|
|
645
|
+
id,
|
|
646
|
+
name,
|
|
647
|
+
...props
|
|
648
|
+
}, ref) => {
|
|
649
|
+
const generatedId = React8.useId();
|
|
650
|
+
const inputId = id ?? generatedId;
|
|
651
|
+
const normalizedErrors = React8.useMemo(() => {
|
|
652
|
+
if (!errorText) return [];
|
|
653
|
+
return Array.isArray(errorText) ? errorText : [errorText];
|
|
654
|
+
}, [errorText]);
|
|
655
|
+
const hasErrors = normalizedErrors.length > 0;
|
|
656
|
+
const helperId = helperText && !hasErrors ? `${inputId}-helper` : void 0;
|
|
657
|
+
const errorId = hasErrors ? `${inputId}-error` : void 0;
|
|
658
|
+
const [showPassword, setShowPassword] = React8.useState(false);
|
|
659
|
+
const [isFocused, setIsFocused] = React8.useState(false);
|
|
660
|
+
const toggleVisibility = () => setShowPassword((prev) => !prev);
|
|
661
|
+
return /* @__PURE__ */ jsxs2("div", { className: "flex w-full flex-col gap-1.5", children: [
|
|
662
|
+
label && /* @__PURE__ */ jsx9(
|
|
663
|
+
"label",
|
|
664
|
+
{
|
|
665
|
+
htmlFor: inputId,
|
|
666
|
+
className: "text-base font-medium text-[var(--ui-text-900)]",
|
|
667
|
+
children: label
|
|
668
|
+
}
|
|
669
|
+
),
|
|
670
|
+
/* @__PURE__ */ jsxs2("div", { className: "relative", children: [
|
|
671
|
+
/* @__PURE__ */ jsx9(
|
|
672
|
+
Input,
|
|
673
|
+
{
|
|
674
|
+
ref,
|
|
675
|
+
id: inputId,
|
|
676
|
+
name: name ?? inputId,
|
|
677
|
+
type: showPassword ? "text" : "password",
|
|
678
|
+
autoComplete: "current-password",
|
|
679
|
+
onFocus: (event) => {
|
|
680
|
+
setIsFocused(true);
|
|
681
|
+
props.onFocus?.(event);
|
|
682
|
+
},
|
|
683
|
+
onBlur: (event) => {
|
|
684
|
+
setIsFocused(false);
|
|
685
|
+
props.onBlur?.(event);
|
|
686
|
+
},
|
|
687
|
+
className: cn(
|
|
688
|
+
"pr-12 placeholder:text-[var(--ui-text-400)]",
|
|
689
|
+
!isFocused && "hover:bg-[var(--ui-background-100)]",
|
|
690
|
+
isFocused && !hasErrors && "border-[var(--ui-border-900)]",
|
|
691
|
+
hasErrors && "border-[var(--ui-danger-base)] focus-visible:ring-[var(--ui-danger-base)] focus-visible:ring-offset-0",
|
|
692
|
+
!hasErrors && "focus-visible:shadow-[0_0_0_2px_var(--ui-background-0),_0_0_0_4px_var(--ui-border-200)]",
|
|
693
|
+
hasErrors && "focus-visible:shadow-[0_0_0_2px_var(--ui-background-0),_0_0_0_4px_var(--ui-danger-light)]",
|
|
694
|
+
className
|
|
695
|
+
),
|
|
696
|
+
"aria-invalid": hasErrors,
|
|
697
|
+
"aria-describedby": errorId ?? helperId,
|
|
698
|
+
...props
|
|
699
|
+
}
|
|
700
|
+
),
|
|
701
|
+
/* @__PURE__ */ jsx9(
|
|
702
|
+
"button",
|
|
703
|
+
{
|
|
704
|
+
type: "button",
|
|
705
|
+
onClick: toggleVisibility,
|
|
706
|
+
className: "absolute right-3 top-1/2 -translate-y-1/2 inline-flex h-6 w-6 items-center justify-center text-[var(--ui-text-500)] transition-colors hover:text-[var(--ui-text-900)]",
|
|
707
|
+
tabIndex: -1,
|
|
708
|
+
"aria-label": showPassword ? "\u015Eifreyi gizle" : "\u015Eifreyi g\xF6ster",
|
|
709
|
+
children: showPassword ? /* @__PURE__ */ jsx9(EyeOff, { className: "size-5" }) : /* @__PURE__ */ jsx9(Eye, { className: "size-5" })
|
|
710
|
+
}
|
|
711
|
+
)
|
|
712
|
+
] }),
|
|
713
|
+
hasErrors ? /* @__PURE__ */ jsx9(
|
|
714
|
+
"div",
|
|
715
|
+
{
|
|
716
|
+
id: errorId,
|
|
717
|
+
className: "flex flex-col gap-1 text-sm text-[var(--ui-danger-base)]",
|
|
718
|
+
children: normalizedErrors.map((text, index) => /* @__PURE__ */ jsxs2("p", { className: "flex items-center gap-1", children: [
|
|
719
|
+
errorIcon,
|
|
720
|
+
text
|
|
721
|
+
] }, index))
|
|
722
|
+
}
|
|
723
|
+
) : helperText ? /* @__PURE__ */ jsxs2(
|
|
724
|
+
"p",
|
|
725
|
+
{
|
|
726
|
+
id: helperId,
|
|
727
|
+
className: "flex items-center gap-1 text-sm text-[var(--ui-text-500)]",
|
|
728
|
+
children: [
|
|
729
|
+
helperIcon,
|
|
730
|
+
helperText
|
|
731
|
+
]
|
|
732
|
+
}
|
|
733
|
+
) : null
|
|
734
|
+
] });
|
|
735
|
+
}
|
|
736
|
+
);
|
|
737
|
+
EasyPasswordInput.displayName = "EasyPasswordInput";
|
|
738
|
+
|
|
739
|
+
// src/components/easy/input/phone-input.tsx
|
|
740
|
+
import * as React9 from "react";
|
|
741
|
+
import { AlertCircle as AlertCircle3 } from "lucide-react";
|
|
742
|
+
import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
743
|
+
var phoneFormat = "(###) ### ## ##";
|
|
744
|
+
var phonePlaceholder = "(5xx) xxx xx xx";
|
|
745
|
+
var EasyPhoneInput = React9.forwardRef(
|
|
746
|
+
({
|
|
747
|
+
className,
|
|
748
|
+
label,
|
|
749
|
+
helperText,
|
|
750
|
+
errorText,
|
|
751
|
+
value = "",
|
|
752
|
+
onChange,
|
|
753
|
+
id,
|
|
754
|
+
name,
|
|
755
|
+
actionButton,
|
|
756
|
+
disabled,
|
|
757
|
+
...props
|
|
758
|
+
}, ref) => {
|
|
759
|
+
const generatedId = React9.useId();
|
|
760
|
+
const inputId = id ?? generatedId;
|
|
761
|
+
const helperId = helperText && !errorText ? `${inputId}-helper` : void 0;
|
|
762
|
+
const errorId = errorText ? `${inputId}-error` : void 0;
|
|
763
|
+
const [isFocused, setIsFocused] = React9.useState(false);
|
|
764
|
+
const formattedValue = React9.useMemo(() => {
|
|
765
|
+
if (!value) return "";
|
|
766
|
+
const numbersOnly = value.replace(/\D/g, "");
|
|
767
|
+
return formatPhoneNumberWithPattern(numbersOnly, phoneFormat);
|
|
768
|
+
}, [value]);
|
|
769
|
+
const handleInputChange = (e) => {
|
|
770
|
+
const inputValue = e.target.value;
|
|
771
|
+
const numbersOnly = inputValue.replace(/\D/g, "");
|
|
772
|
+
const formatted = formatPhoneNumberWithPattern(numbersOnly, phoneFormat);
|
|
773
|
+
onChange?.(formatted);
|
|
774
|
+
};
|
|
775
|
+
const handleFocus = () => {
|
|
776
|
+
setIsFocused(true);
|
|
777
|
+
};
|
|
778
|
+
const handleBlur = () => {
|
|
779
|
+
setIsFocused(false);
|
|
780
|
+
};
|
|
781
|
+
return /* @__PURE__ */ jsxs3("div", { className: "flex w-full flex-col gap-1.5", children: [
|
|
782
|
+
label && /* @__PURE__ */ jsx10(
|
|
783
|
+
"label",
|
|
784
|
+
{
|
|
785
|
+
htmlFor: inputId,
|
|
786
|
+
className: "text-base font-medium text-[var(--ui-text-900)]",
|
|
787
|
+
children: label
|
|
788
|
+
}
|
|
789
|
+
),
|
|
790
|
+
/* @__PURE__ */ jsx10("div", { className: "relative", children: /* @__PURE__ */ jsxs3(
|
|
791
|
+
"div",
|
|
792
|
+
{
|
|
793
|
+
className: cn(
|
|
794
|
+
"flex h-12 rounded-lg border bg-[var(--ui-background-0)] transition-all duration-200 overflow-hidden",
|
|
795
|
+
errorText ? "border-[var(--ui-danger-base)]" : "border-[var(--ui-border-200)]",
|
|
796
|
+
isFocused && !errorText && "border-[var(--ui-border-900)] shadow-[0_0_0_2px_var(--ui-background-0),_0_0_0_4px_var(--ui-border-200)]",
|
|
797
|
+
isFocused && errorText && "border-[var(--ui-danger-base)] shadow-[0_0_0_2px_var(--ui-background-0),_0_0_0_4px_var(--ui-danger-light)]",
|
|
798
|
+
disabled && "cursor-not-allowed opacity-50",
|
|
799
|
+
!isFocused && !disabled && "hover:bg-[var(--ui-background-100)]",
|
|
800
|
+
className
|
|
801
|
+
),
|
|
802
|
+
children: [
|
|
803
|
+
/* @__PURE__ */ jsxs3("div", { className: "px-3 py-3 flex items-center gap-2 rounded-l-lg border-r border-[var(--ui-border-200)]", children: [
|
|
804
|
+
/* @__PURE__ */ jsx10("span", { className: "text-lg", children: "\u{1F1F9}\u{1F1F7}" }),
|
|
805
|
+
/* @__PURE__ */ jsx10("span", { className: "text-base font-medium", children: "(+90)" })
|
|
806
|
+
] }),
|
|
807
|
+
/* @__PURE__ */ jsx10(
|
|
808
|
+
Input,
|
|
809
|
+
{
|
|
810
|
+
ref,
|
|
811
|
+
type: "tel",
|
|
812
|
+
name: name ?? inputId,
|
|
813
|
+
id: inputId,
|
|
814
|
+
value: formattedValue,
|
|
815
|
+
onChange: handleInputChange,
|
|
816
|
+
onFocus: handleFocus,
|
|
817
|
+
onBlur: handleBlur,
|
|
818
|
+
placeholder: phonePlaceholder,
|
|
819
|
+
className: cn(
|
|
820
|
+
"h-full rounded-none px-4 py-3 text-base flex-1 border-0 focus-visible:ring-0 focus-visible:ring-offset-0 bg-transparent",
|
|
821
|
+
actionButton ? "rounded-l-none" : "rounded-r-lg",
|
|
822
|
+
"[&::-webkit-autofill]:!bg-transparent [&::-webkit-autofill]:!shadow-none [&::-webkit-autofill]:!text-current"
|
|
823
|
+
),
|
|
824
|
+
style: { fontSize: "16px" },
|
|
825
|
+
"aria-invalid": Boolean(errorText),
|
|
826
|
+
"aria-describedby": errorId ?? helperId,
|
|
827
|
+
disabled,
|
|
828
|
+
...props
|
|
829
|
+
}
|
|
830
|
+
),
|
|
831
|
+
actionButton && /* @__PURE__ */ jsx10("div", { className: "flex items-center pr-1.5 pl-2 border-l border-[var(--ui-border-200)]", children: actionButton })
|
|
832
|
+
]
|
|
833
|
+
}
|
|
834
|
+
) }),
|
|
835
|
+
errorText ? /* @__PURE__ */ jsxs3(
|
|
836
|
+
"p",
|
|
837
|
+
{
|
|
838
|
+
id: errorId,
|
|
839
|
+
className: "flex items-center gap-1 text-sm text-[var(--ui-danger-base)]",
|
|
840
|
+
children: [
|
|
841
|
+
/* @__PURE__ */ jsx10(AlertCircle3, { className: "size-4" }),
|
|
842
|
+
errorText
|
|
843
|
+
]
|
|
844
|
+
}
|
|
845
|
+
) : helperText ? /* @__PURE__ */ jsx10("p", { id: helperId, className: "text-sm text-[var(--ui-text-500)]", children: helperText }) : null
|
|
846
|
+
] });
|
|
847
|
+
}
|
|
848
|
+
);
|
|
849
|
+
EasyPhoneInput.displayName = "EasyPhoneInput";
|
|
850
|
+
|
|
851
|
+
// src/components/easy/input/text-input.tsx
|
|
852
|
+
import * as React10 from "react";
|
|
853
|
+
import { AlertCircle as AlertCircle4 } from "lucide-react";
|
|
854
|
+
import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
855
|
+
var EasyTextInput = React10.forwardRef(
|
|
856
|
+
({
|
|
857
|
+
className,
|
|
858
|
+
label,
|
|
859
|
+
helperText,
|
|
860
|
+
errorText,
|
|
861
|
+
id,
|
|
862
|
+
name,
|
|
863
|
+
onChange,
|
|
864
|
+
...props
|
|
865
|
+
}, ref) => {
|
|
866
|
+
const generatedId = React10.useId();
|
|
867
|
+
const inputId = id ?? generatedId;
|
|
868
|
+
const helperId = helperText && !errorText ? `${inputId}-helper` : void 0;
|
|
869
|
+
const errorId = errorText ? `${inputId}-error` : void 0;
|
|
870
|
+
const [isFocused, setIsFocused] = React10.useState(false);
|
|
871
|
+
return /* @__PURE__ */ jsxs4("div", { className: "flex w-full flex-col gap-1.5", children: [
|
|
872
|
+
label && /* @__PURE__ */ jsx11(
|
|
873
|
+
"label",
|
|
874
|
+
{
|
|
875
|
+
htmlFor: inputId,
|
|
876
|
+
className: "text-base font-medium text-[var(--ui-text-900)]",
|
|
877
|
+
children: label
|
|
878
|
+
}
|
|
879
|
+
),
|
|
880
|
+
/* @__PURE__ */ jsx11(
|
|
881
|
+
Input,
|
|
882
|
+
{
|
|
883
|
+
ref,
|
|
884
|
+
id: inputId,
|
|
885
|
+
name: name ?? inputId,
|
|
886
|
+
type: "text",
|
|
887
|
+
onFocus: (event) => {
|
|
888
|
+
setIsFocused(true);
|
|
889
|
+
props.onFocus?.(event);
|
|
890
|
+
},
|
|
891
|
+
onBlur: (event) => {
|
|
892
|
+
setIsFocused(false);
|
|
893
|
+
props.onBlur?.(event);
|
|
894
|
+
},
|
|
895
|
+
onChange,
|
|
896
|
+
className: cn(
|
|
897
|
+
"placeholder:text-[var(--ui-text-400)]",
|
|
898
|
+
!isFocused && "hover:bg-[var(--ui-background-100)]",
|
|
899
|
+
isFocused && !errorText && "border-[var(--ui-border-900)]",
|
|
900
|
+
errorText && "border-[var(--ui-danger-base)] focus-visible:ring-[var(--ui-danger-base)] focus-visible:ring-offset-0",
|
|
901
|
+
!errorText && "focus-visible:shadow-[0_0_0_2px_var(--ui-background-0),_0_0_0_4px_var(--ui-border-200)]",
|
|
902
|
+
errorText && "focus-visible:shadow-[0_0_0_2px_var(--ui-background-0),_0_0_0_4px_var(--ui-danger-light)]",
|
|
903
|
+
className
|
|
904
|
+
),
|
|
905
|
+
"aria-invalid": Boolean(errorText),
|
|
906
|
+
"aria-describedby": errorId ?? helperId,
|
|
907
|
+
...props
|
|
908
|
+
}
|
|
909
|
+
),
|
|
910
|
+
errorText ? /* @__PURE__ */ jsxs4(
|
|
911
|
+
"p",
|
|
912
|
+
{
|
|
913
|
+
id: errorId,
|
|
914
|
+
className: "flex items-center gap-1 text-sm text-[var(--ui-danger-base)]",
|
|
915
|
+
children: [
|
|
916
|
+
/* @__PURE__ */ jsx11(AlertCircle4, { className: "size-4" }),
|
|
917
|
+
errorText
|
|
918
|
+
]
|
|
919
|
+
}
|
|
920
|
+
) : helperText ? /* @__PURE__ */ jsx11("p", { id: helperId, className: "text-sm text-[var(--ui-text-500)]", children: helperText }) : null
|
|
921
|
+
] });
|
|
922
|
+
}
|
|
923
|
+
);
|
|
924
|
+
EasyTextInput.displayName = "EasyTextInput";
|
|
925
|
+
|
|
926
|
+
// src/components/easy/checkbox.tsx
|
|
927
|
+
import * as React11 from "react";
|
|
928
|
+
import { AlertCircle as AlertCircle5 } from "lucide-react";
|
|
929
|
+
import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
930
|
+
var EasyCheckbox = React11.forwardRef(
|
|
931
|
+
({
|
|
932
|
+
label,
|
|
933
|
+
helperText,
|
|
934
|
+
errorText,
|
|
935
|
+
className,
|
|
936
|
+
checkboxClassName,
|
|
937
|
+
id,
|
|
938
|
+
disabled,
|
|
939
|
+
...props
|
|
940
|
+
}, ref) => {
|
|
941
|
+
const generatedId = React11.useId();
|
|
942
|
+
const inputId = id ?? generatedId;
|
|
943
|
+
const helperId = helperText && !errorText ? `${inputId}-helper` : void 0;
|
|
944
|
+
const errorId = errorText ? `${inputId}-error` : void 0;
|
|
945
|
+
return /* @__PURE__ */ jsx12("div", { className: cn("flex w-full flex-col gap-1.5", className), children: /* @__PURE__ */ jsxs5(
|
|
946
|
+
"label",
|
|
947
|
+
{
|
|
948
|
+
htmlFor: inputId,
|
|
949
|
+
className: cn(
|
|
950
|
+
"flex items-center gap-2 cursor-pointer",
|
|
951
|
+
disabled && "cursor-not-allowed opacity-60"
|
|
952
|
+
),
|
|
953
|
+
children: [
|
|
954
|
+
/* @__PURE__ */ jsx12(
|
|
955
|
+
ShadcnCheckbox,
|
|
956
|
+
{
|
|
957
|
+
ref,
|
|
958
|
+
id: inputId,
|
|
959
|
+
disabled,
|
|
960
|
+
"aria-invalid": Boolean(errorText),
|
|
961
|
+
"aria-describedby": errorId ?? helperId,
|
|
962
|
+
className: cn(
|
|
963
|
+
"h-4 w-4 shrink-0 rounded-[1px] border-[2px] border-[var(--ui-neutral-500)] bg-[var(--ui-background-0)]",
|
|
964
|
+
"data-[state=checked]:bg-[var(--ui-primary-500)] data-[state=checked]:border-[var(--ui-primary-500)]",
|
|
965
|
+
"data-[state=checked]:text-[var(--ui-primary-foreground)]",
|
|
966
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-background)]",
|
|
967
|
+
"disabled:cursor-not-allowed disabled:opacity-60",
|
|
968
|
+
checkboxClassName
|
|
969
|
+
),
|
|
970
|
+
...props
|
|
971
|
+
}
|
|
972
|
+
),
|
|
973
|
+
/* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-0.5", children: [
|
|
974
|
+
label && /* @__PURE__ */ jsx12("span", { className: cn(getTypographyClass("body-medium"), "text-[var(--ui-text-500)]"), children: label }),
|
|
975
|
+
helperText && !errorText && /* @__PURE__ */ jsx12(
|
|
976
|
+
"span",
|
|
977
|
+
{
|
|
978
|
+
id: helperId,
|
|
979
|
+
className: "text-sm text-[var(--ui-text-500)]",
|
|
980
|
+
children: helperText
|
|
981
|
+
}
|
|
982
|
+
),
|
|
983
|
+
errorText && /* @__PURE__ */ jsxs5(
|
|
984
|
+
"span",
|
|
985
|
+
{
|
|
986
|
+
id: errorId,
|
|
987
|
+
className: "flex items-center gap-1 text-sm text-[var(--ui-danger-base)]",
|
|
988
|
+
children: [
|
|
989
|
+
/* @__PURE__ */ jsx12(AlertCircle5, { className: "size-4" }),
|
|
990
|
+
errorText
|
|
991
|
+
]
|
|
992
|
+
}
|
|
993
|
+
)
|
|
994
|
+
] })
|
|
995
|
+
]
|
|
996
|
+
}
|
|
997
|
+
) });
|
|
998
|
+
}
|
|
999
|
+
);
|
|
1000
|
+
EasyCheckbox.displayName = "EasyCheckbox";
|
|
1001
|
+
|
|
1002
|
+
// src/components/easy/container.tsx
|
|
1003
|
+
import * as React12 from "react";
|
|
1004
|
+
import { cva as cva3 } from "class-variance-authority";
|
|
1005
|
+
import { jsx as jsx13 } from "react/jsx-runtime";
|
|
1006
|
+
var containerVariants = cva3(
|
|
1007
|
+
"mx-auto w-full",
|
|
1008
|
+
{
|
|
1009
|
+
variants: {
|
|
1010
|
+
size: {
|
|
1011
|
+
sm: "max-w-screen-sm",
|
|
1012
|
+
md: "max-w-screen-md",
|
|
1013
|
+
lg: "max-w-screen-lg",
|
|
1014
|
+
xl: "max-w-screen-xl",
|
|
1015
|
+
"2xl": "max-w-screen-2xl",
|
|
1016
|
+
full: "max-w-full"
|
|
1017
|
+
},
|
|
1018
|
+
padding: {
|
|
1019
|
+
none: "px-0",
|
|
1020
|
+
sm: "px-4 sm:px-6",
|
|
1021
|
+
md: "px-4 sm:px-6 lg:px-8",
|
|
1022
|
+
lg: "px-4 sm:px-6 lg:px-8 xl:px-12"
|
|
1023
|
+
}
|
|
1024
|
+
},
|
|
1025
|
+
defaultVariants: {
|
|
1026
|
+
size: "xl",
|
|
1027
|
+
padding: "md"
|
|
1028
|
+
}
|
|
1029
|
+
}
|
|
1030
|
+
);
|
|
1031
|
+
var EasyContainer = React12.forwardRef(
|
|
1032
|
+
({ className, size, padding, ...props }, ref) => {
|
|
1033
|
+
return /* @__PURE__ */ jsx13(
|
|
1034
|
+
"div",
|
|
1035
|
+
{
|
|
1036
|
+
ref,
|
|
1037
|
+
className: cn(containerVariants({ size, padding }), className),
|
|
1038
|
+
...props
|
|
1039
|
+
}
|
|
1040
|
+
);
|
|
1041
|
+
}
|
|
1042
|
+
);
|
|
1043
|
+
EasyContainer.displayName = "EasyContainer";
|
|
1044
|
+
|
|
1045
|
+
// src/components/easy/typography/display.tsx
|
|
1046
|
+
import * as React13 from "react";
|
|
1047
|
+
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
1048
|
+
var EasyDisplay = React13.forwardRef(
|
|
1049
|
+
({ className, variant = "medium", as: Component = "h1", ...props }, ref) => {
|
|
1050
|
+
return /* @__PURE__ */ jsx14(
|
|
1051
|
+
Component,
|
|
1052
|
+
{
|
|
1053
|
+
ref,
|
|
1054
|
+
className: cn(
|
|
1055
|
+
getTypographyClass(`display-${variant}`),
|
|
1056
|
+
className
|
|
1057
|
+
),
|
|
1058
|
+
...props
|
|
1059
|
+
}
|
|
1060
|
+
);
|
|
1061
|
+
}
|
|
1062
|
+
);
|
|
1063
|
+
EasyDisplay.displayName = "EasyDisplay";
|
|
1064
|
+
|
|
1065
|
+
// src/components/easy/typography/heading.tsx
|
|
1066
|
+
import * as React14 from "react";
|
|
1067
|
+
import { jsx as jsx15 } from "react/jsx-runtime";
|
|
1068
|
+
var defaultHeadingElements = {
|
|
1069
|
+
large: "h1",
|
|
1070
|
+
medium: "h2",
|
|
1071
|
+
small: "h3",
|
|
1072
|
+
xsmall: "h4"
|
|
1073
|
+
};
|
|
1074
|
+
var EasyHeading = React14.forwardRef(
|
|
1075
|
+
({ className, variant = "medium", as, ...props }, ref) => {
|
|
1076
|
+
const Component = as ?? defaultHeadingElements[variant];
|
|
1077
|
+
return /* @__PURE__ */ jsx15(
|
|
1078
|
+
Component,
|
|
1079
|
+
{
|
|
1080
|
+
ref,
|
|
1081
|
+
className: cn(
|
|
1082
|
+
getTypographyClass(`heading-${variant}`),
|
|
1083
|
+
className
|
|
1084
|
+
),
|
|
1085
|
+
...props
|
|
1086
|
+
}
|
|
1087
|
+
);
|
|
1088
|
+
}
|
|
1089
|
+
);
|
|
1090
|
+
EasyHeading.displayName = "EasyHeading";
|
|
1091
|
+
|
|
1092
|
+
// src/components/easy/typography/label.tsx
|
|
1093
|
+
import * as React15 from "react";
|
|
1094
|
+
import { jsx as jsx16 } from "react/jsx-runtime";
|
|
1095
|
+
var EasyLabel = React15.forwardRef(
|
|
1096
|
+
({ className, variant = "medium", as: Component = "label", ...props }, ref) => {
|
|
1097
|
+
return /* @__PURE__ */ jsx16(
|
|
1098
|
+
Component,
|
|
1099
|
+
{
|
|
1100
|
+
ref,
|
|
1101
|
+
className: cn(
|
|
1102
|
+
getTypographyClass(`label-${variant}`),
|
|
1103
|
+
className
|
|
1104
|
+
),
|
|
1105
|
+
...props
|
|
1106
|
+
}
|
|
1107
|
+
);
|
|
1108
|
+
}
|
|
1109
|
+
);
|
|
1110
|
+
EasyLabel.displayName = "EasyLabel";
|
|
1111
|
+
|
|
1112
|
+
// src/components/easy/typography/body.tsx
|
|
1113
|
+
import * as React16 from "react";
|
|
1114
|
+
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
1115
|
+
var EasyBody = React16.forwardRef(
|
|
1116
|
+
({ className, variant = "medium", as: Component = "p", ...props }, ref) => {
|
|
1117
|
+
return /* @__PURE__ */ jsx17(
|
|
1118
|
+
Component,
|
|
1119
|
+
{
|
|
1120
|
+
ref,
|
|
1121
|
+
className: cn(
|
|
1122
|
+
getTypographyClass(`body-${variant}`),
|
|
1123
|
+
className
|
|
1124
|
+
),
|
|
1125
|
+
...props
|
|
1126
|
+
}
|
|
1127
|
+
);
|
|
1128
|
+
}
|
|
1129
|
+
);
|
|
1130
|
+
EasyBody.displayName = "EasyBody";
|
|
1131
|
+
|
|
1132
|
+
// src/components/easy/typography/index.ts
|
|
1133
|
+
var EasyTypography = {
|
|
1134
|
+
Display: EasyDisplay,
|
|
1135
|
+
Heading: EasyHeading,
|
|
1136
|
+
Label: EasyLabel,
|
|
1137
|
+
Body: EasyBody
|
|
1138
|
+
};
|
|
1139
|
+
|
|
1140
|
+
// src/components/easy/error-message.tsx
|
|
1141
|
+
import * as React17 from "react";
|
|
1142
|
+
import { jsx as jsx18, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
1143
|
+
var WarningTriangleIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
1144
|
+
/* @__PURE__ */ jsx18("path", { d: "M6.6027 21.8034L13.6201 7.8074C14.6039 5.84505 17.405 5.84556 18.3881 7.80828L25.399 21.8043C26.2873 23.5775 24.998 25.6653 23.0148 25.6653H8.98652C7.00288 25.6653 5.71363 23.5767 6.6027 21.8034Z", fill: "#E93534", stroke: "#E93534", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
1145
|
+
/* @__PURE__ */ jsx18("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.1951 8.40674C16.7035 7.42539 15.303 7.42513 14.8111 8.40631L7.79374 22.4023C7.3492 23.289 7.99383 24.3333 8.98564 24.3333H23.0139C24.0055 24.3333 24.6502 23.2894 24.206 22.4028L17.1951 8.40674ZM12.4273 7.2111C13.9031 4.26757 18.1046 4.26834 19.5794 7.21241L26.5903 21.2084C27.9226 23.8682 25.9887 26.9999 23.0139 26.9999H8.98564C6.01018 26.9999 4.07631 23.867 5.40991 21.2071L12.4273 7.2111Z", fill: "#E93534" }),
|
|
1146
|
+
/* @__PURE__ */ jsx18("path", { d: "M17.3327 21.3333C17.3327 22.0697 16.7357 22.6667 15.9993 22.6667C15.263 22.6667 14.666 22.0697 14.666 21.3333C14.666 20.597 15.263 20 15.9993 20C16.7357 20 17.3327 20.597 17.3327 21.3333Z", fill: "white" }),
|
|
1147
|
+
/* @__PURE__ */ jsx18("path", { d: "M14.666 12.0013C14.666 11.2649 15.263 10.668 15.9993 10.668C16.7357 10.668 17.3327 11.2649 17.3327 12.0013V17.3346C17.3327 18.071 16.7357 18.668 15.9993 18.668C15.263 18.668 14.666 18.071 14.666 17.3346V12.0013Z", fill: "white" })
|
|
1148
|
+
] });
|
|
1149
|
+
var EasyErrorMessage = React17.forwardRef(
|
|
1150
|
+
({ className, title, description, icon, ...props }, ref) => {
|
|
1151
|
+
return /* @__PURE__ */ jsxs6(
|
|
1152
|
+
"div",
|
|
1153
|
+
{
|
|
1154
|
+
ref,
|
|
1155
|
+
className: cn(
|
|
1156
|
+
"flex flex-col items-center rounded-md px-4 py-2",
|
|
1157
|
+
"bg-[var(--ui-danger-light)]",
|
|
1158
|
+
className
|
|
1159
|
+
),
|
|
1160
|
+
...props,
|
|
1161
|
+
children: [
|
|
1162
|
+
/* @__PURE__ */ jsx18("div", { className: "flex-shrink-0", children: icon ?? /* @__PURE__ */ jsx18(WarningTriangleIcon, {}) }),
|
|
1163
|
+
/* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-center text-center", children: [
|
|
1164
|
+
/* @__PURE__ */ jsx18(
|
|
1165
|
+
"div",
|
|
1166
|
+
{
|
|
1167
|
+
className: cn(
|
|
1168
|
+
getTypographyClass("body-small"),
|
|
1169
|
+
"font-semibold text-[var(--ui-danger-base)]"
|
|
1170
|
+
),
|
|
1171
|
+
children: title
|
|
1172
|
+
}
|
|
1173
|
+
),
|
|
1174
|
+
description && /* @__PURE__ */ jsx18(
|
|
1175
|
+
"div",
|
|
1176
|
+
{
|
|
1177
|
+
className: cn(
|
|
1178
|
+
getTypographyClass("body-small"),
|
|
1179
|
+
"text-[var(--ui-danger-base)]"
|
|
1180
|
+
),
|
|
1181
|
+
children: description
|
|
1182
|
+
}
|
|
1183
|
+
)
|
|
1184
|
+
] })
|
|
1185
|
+
]
|
|
1186
|
+
}
|
|
1187
|
+
);
|
|
1188
|
+
}
|
|
1189
|
+
);
|
|
1190
|
+
EasyErrorMessage.displayName = "EasyErrorMessage";
|
|
1191
|
+
|
|
1192
|
+
// src/components/easy/message-dialog.tsx
|
|
1193
|
+
import { AlertTriangle, CheckCircle } from "lucide-react";
|
|
1194
|
+
|
|
1195
|
+
// src/components/ui/dialog.tsx
|
|
1196
|
+
import * as React18 from "react";
|
|
1197
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
1198
|
+
import { X } from "lucide-react";
|
|
1199
|
+
import { jsx as jsx19, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1200
|
+
var ShadcnDialog = DialogPrimitive.Root;
|
|
1201
|
+
var ShadcnDialogPortal = DialogPrimitive.Portal;
|
|
1202
|
+
var ShadcnDialogOverlay = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
|
|
1203
|
+
DialogPrimitive.Overlay,
|
|
1204
|
+
{
|
|
1205
|
+
ref,
|
|
1206
|
+
className: cn(
|
|
1207
|
+
"fixed inset-0 z-50 bg-black/30 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
1208
|
+
className
|
|
1209
|
+
),
|
|
1210
|
+
...props
|
|
1211
|
+
}
|
|
1212
|
+
));
|
|
1213
|
+
ShadcnDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
1214
|
+
var ShadcnDialogContent = React18.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs7(ShadcnDialogPortal, { children: [
|
|
1215
|
+
/* @__PURE__ */ jsx19(ShadcnDialogOverlay, {}),
|
|
1216
|
+
/* @__PURE__ */ jsxs7(
|
|
1217
|
+
DialogPrimitive.Content,
|
|
1218
|
+
{
|
|
1219
|
+
ref,
|
|
1220
|
+
className: cn(
|
|
1221
|
+
"fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border border-[var(--ui-border-200)] bg-[var(--ui-background-0)] p-6 shadow-xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
|
|
1222
|
+
className
|
|
1223
|
+
),
|
|
1224
|
+
...props,
|
|
1225
|
+
children: [
|
|
1226
|
+
children,
|
|
1227
|
+
/* @__PURE__ */ jsxs7(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[var(--ui-ring)] focus:ring-offset-2 disabled:pointer-events-none", children: [
|
|
1228
|
+
/* @__PURE__ */ jsx19(X, { className: "size-4" }),
|
|
1229
|
+
/* @__PURE__ */ jsx19("span", { className: "sr-only", children: "Kapat" })
|
|
1230
|
+
] })
|
|
1231
|
+
]
|
|
1232
|
+
}
|
|
1233
|
+
)
|
|
1234
|
+
] }));
|
|
1235
|
+
ShadcnDialogContent.displayName = DialogPrimitive.Content.displayName;
|
|
1236
|
+
var ShadcnDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx19(
|
|
1237
|
+
"div",
|
|
1238
|
+
{
|
|
1239
|
+
className: cn(
|
|
1240
|
+
"flex flex-col space-y-1.5 text-center sm:text-left",
|
|
1241
|
+
className
|
|
1242
|
+
),
|
|
1243
|
+
...props
|
|
1244
|
+
}
|
|
1245
|
+
);
|
|
1246
|
+
ShadcnDialogHeader.displayName = "ShadcnDialogHeader";
|
|
1247
|
+
var ShadcnDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx19(
|
|
1248
|
+
"div",
|
|
1249
|
+
{
|
|
1250
|
+
className: cn(
|
|
1251
|
+
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
|
1252
|
+
className
|
|
1253
|
+
),
|
|
1254
|
+
...props
|
|
1255
|
+
}
|
|
1256
|
+
);
|
|
1257
|
+
ShadcnDialogFooter.displayName = "ShadcnDialogFooter";
|
|
1258
|
+
var ShadcnDialogTitle = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
|
|
1259
|
+
DialogPrimitive.Title,
|
|
1260
|
+
{
|
|
1261
|
+
ref,
|
|
1262
|
+
className: cn(
|
|
1263
|
+
"text-lg font-semibold text-[var(--ui-text-900)]",
|
|
1264
|
+
className
|
|
1265
|
+
),
|
|
1266
|
+
...props
|
|
1267
|
+
}
|
|
1268
|
+
));
|
|
1269
|
+
ShadcnDialogTitle.displayName = DialogPrimitive.Title.displayName;
|
|
1270
|
+
var ShadcnDialogDescription = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
|
|
1271
|
+
DialogPrimitive.Description,
|
|
1272
|
+
{
|
|
1273
|
+
ref,
|
|
1274
|
+
className: cn(
|
|
1275
|
+
"text-sm text-[var(--ui-text-600)]",
|
|
1276
|
+
className
|
|
1277
|
+
),
|
|
1278
|
+
...props
|
|
1279
|
+
}
|
|
1280
|
+
));
|
|
1281
|
+
ShadcnDialogDescription.displayName = DialogPrimitive.Description.displayName;
|
|
1282
|
+
|
|
1283
|
+
// src/components/easy/message-dialog.tsx
|
|
1284
|
+
import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
1285
|
+
var iconConfig = {
|
|
1286
|
+
success: {
|
|
1287
|
+
Icon: CheckCircle,
|
|
1288
|
+
containerClass: "bg-[var(--ui-success-light)]",
|
|
1289
|
+
iconClass: "text-[var(--ui-success-base)]",
|
|
1290
|
+
titleClass: "text-[var(--ui-success-base)]"
|
|
1291
|
+
},
|
|
1292
|
+
warning: {
|
|
1293
|
+
Icon: AlertTriangle,
|
|
1294
|
+
containerClass: "bg-[var(--ui-warning-light)]",
|
|
1295
|
+
iconClass: "text-[var(--ui-warning-base)]",
|
|
1296
|
+
titleClass: "text-[var(--ui-warning-base)]"
|
|
1297
|
+
},
|
|
1298
|
+
error: {
|
|
1299
|
+
Icon: AlertTriangle,
|
|
1300
|
+
containerClass: "bg-[var(--ui-danger-light)]",
|
|
1301
|
+
iconClass: "text-[var(--ui-danger-base)]",
|
|
1302
|
+
titleClass: "text-[var(--ui-danger-base)]"
|
|
1303
|
+
}
|
|
1304
|
+
};
|
|
1305
|
+
var EasyMessageDialog = ({
|
|
1306
|
+
type,
|
|
1307
|
+
title,
|
|
1308
|
+
message,
|
|
1309
|
+
open,
|
|
1310
|
+
onClose,
|
|
1311
|
+
buttonText = "Kapat",
|
|
1312
|
+
onButtonClick
|
|
1313
|
+
}) => {
|
|
1314
|
+
const { Icon: Icon2, containerClass, iconClass, titleClass } = iconConfig[type];
|
|
1315
|
+
const handleOpenChange = (nextOpen) => {
|
|
1316
|
+
if (!nextOpen) onClose();
|
|
1317
|
+
};
|
|
1318
|
+
const handleButtonClick = () => {
|
|
1319
|
+
if (onButtonClick) {
|
|
1320
|
+
onButtonClick();
|
|
1321
|
+
} else {
|
|
1322
|
+
onClose();
|
|
1323
|
+
}
|
|
1324
|
+
};
|
|
1325
|
+
return /* @__PURE__ */ jsx20(ShadcnDialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs8(ShadcnDialogContent, { className: "sm:max-w-md rounded-xl", children: [
|
|
1326
|
+
/* @__PURE__ */ jsx20(ShadcnDialogTitle, { className: "sr-only", children: title }),
|
|
1327
|
+
/* @__PURE__ */ jsx20(ShadcnDialogDescription, { className: "sr-only", children: message }),
|
|
1328
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-center gap-4 px-6 py-4 text-center", children: [
|
|
1329
|
+
/* @__PURE__ */ jsx20(
|
|
1330
|
+
"div",
|
|
1331
|
+
{
|
|
1332
|
+
className: cn(
|
|
1333
|
+
"flex size-16 items-center justify-center rounded-full",
|
|
1334
|
+
containerClass
|
|
1335
|
+
),
|
|
1336
|
+
children: /* @__PURE__ */ jsx20(Icon2, { className: cn("size-8", iconClass) })
|
|
1337
|
+
}
|
|
1338
|
+
),
|
|
1339
|
+
/* @__PURE__ */ jsx20(
|
|
1340
|
+
EasyHeading,
|
|
1341
|
+
{
|
|
1342
|
+
as: "h3",
|
|
1343
|
+
variant: "large",
|
|
1344
|
+
className: cn("font-semibold", titleClass),
|
|
1345
|
+
style: { color: "#000000" },
|
|
1346
|
+
children: title
|
|
1347
|
+
}
|
|
1348
|
+
),
|
|
1349
|
+
/* @__PURE__ */ jsx20(EasyBody, { as: "p", variant: "medium", className: "text-[var(--ui-text-500)]", children: message }),
|
|
1350
|
+
/* @__PURE__ */ jsx20(
|
|
1351
|
+
EasyButton,
|
|
1352
|
+
{
|
|
1353
|
+
variant: "important",
|
|
1354
|
+
appearance: "stroke",
|
|
1355
|
+
size: "large",
|
|
1356
|
+
className: "mt-2 w-full",
|
|
1357
|
+
onClick: handleButtonClick,
|
|
1358
|
+
children: buttonText
|
|
1359
|
+
}
|
|
1360
|
+
)
|
|
1361
|
+
] })
|
|
1362
|
+
] }) });
|
|
1363
|
+
};
|
|
1364
|
+
EasyMessageDialog.displayName = "EasyMessageDialog";
|
|
1365
|
+
|
|
1366
|
+
// src/components/easy/sidebar.tsx
|
|
1367
|
+
import * as React24 from "react";
|
|
1368
|
+
|
|
1369
|
+
// src/components/ui/sidebar.tsx
|
|
1370
|
+
import * as React23 from "react";
|
|
1371
|
+
import { Slot as Slot2 } from "@radix-ui/react-slot";
|
|
1372
|
+
import { cva as cva5 } from "class-variance-authority";
|
|
1373
|
+
import { PanelLeft } from "lucide-react";
|
|
1374
|
+
|
|
1375
|
+
// src/hooks/use-mobile.tsx
|
|
1376
|
+
import * as React19 from "react";
|
|
1377
|
+
var MOBILE_BREAKPOINT = 768;
|
|
1378
|
+
function useIsMobile() {
|
|
1379
|
+
const [isMobile, setIsMobile] = React19.useState(void 0);
|
|
1380
|
+
React19.useEffect(() => {
|
|
1381
|
+
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
|
|
1382
|
+
const onChange = () => {
|
|
1383
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
1384
|
+
};
|
|
1385
|
+
mql.addEventListener("change", onChange);
|
|
1386
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
1387
|
+
return () => mql.removeEventListener("change", onChange);
|
|
1388
|
+
}, []);
|
|
1389
|
+
return !!isMobile;
|
|
1390
|
+
}
|
|
1391
|
+
|
|
1392
|
+
// src/components/ui/separator.tsx
|
|
1393
|
+
import * as React20 from "react";
|
|
1394
|
+
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
|
1395
|
+
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
1396
|
+
var Separator = React20.forwardRef(
|
|
1397
|
+
({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx21(
|
|
1398
|
+
SeparatorPrimitive.Root,
|
|
1399
|
+
{
|
|
1400
|
+
ref,
|
|
1401
|
+
decorative,
|
|
1402
|
+
orientation,
|
|
1403
|
+
className: cn(
|
|
1404
|
+
"shrink-0 bg-border",
|
|
1405
|
+
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
|
|
1406
|
+
className
|
|
1407
|
+
),
|
|
1408
|
+
...props
|
|
1409
|
+
}
|
|
1410
|
+
)
|
|
1411
|
+
);
|
|
1412
|
+
Separator.displayName = SeparatorPrimitive.Root.displayName;
|
|
1413
|
+
|
|
1414
|
+
// src/components/ui/sheet.tsx
|
|
1415
|
+
import * as React21 from "react";
|
|
1416
|
+
import * as SheetPrimitive from "@radix-ui/react-dialog";
|
|
1417
|
+
import { cva as cva4 } from "class-variance-authority";
|
|
1418
|
+
import { X as X2 } from "lucide-react";
|
|
1419
|
+
import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
1420
|
+
var Sheet = SheetPrimitive.Root;
|
|
1421
|
+
var SheetPortal = SheetPrimitive.Portal;
|
|
1422
|
+
var SheetOverlay = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
|
|
1423
|
+
SheetPrimitive.Overlay,
|
|
1424
|
+
{
|
|
1425
|
+
className: cn(
|
|
1426
|
+
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
1427
|
+
className
|
|
1428
|
+
),
|
|
1429
|
+
...props,
|
|
1430
|
+
ref
|
|
1431
|
+
}
|
|
1432
|
+
));
|
|
1433
|
+
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
|
|
1434
|
+
var sheetVariants = cva4(
|
|
1435
|
+
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
|
1436
|
+
{
|
|
1437
|
+
variants: {
|
|
1438
|
+
side: {
|
|
1439
|
+
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
|
1440
|
+
bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
|
1441
|
+
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
|
|
1442
|
+
right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
|
|
1443
|
+
}
|
|
1444
|
+
},
|
|
1445
|
+
defaultVariants: {
|
|
1446
|
+
side: "right"
|
|
1447
|
+
}
|
|
1448
|
+
}
|
|
1449
|
+
);
|
|
1450
|
+
var SheetContent = React21.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs9(SheetPortal, { children: [
|
|
1451
|
+
/* @__PURE__ */ jsx22(SheetOverlay, {}),
|
|
1452
|
+
/* @__PURE__ */ jsxs9(
|
|
1453
|
+
SheetPrimitive.Content,
|
|
1454
|
+
{
|
|
1455
|
+
ref,
|
|
1456
|
+
className: cn(sheetVariants({ side }), className),
|
|
1457
|
+
...props,
|
|
1458
|
+
children: [
|
|
1459
|
+
children,
|
|
1460
|
+
/* @__PURE__ */ jsxs9(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
|
|
1461
|
+
/* @__PURE__ */ jsx22(X2, { className: "h-4 w-4" }),
|
|
1462
|
+
/* @__PURE__ */ jsx22("span", { className: "sr-only", children: "Close" })
|
|
1463
|
+
] })
|
|
1464
|
+
]
|
|
1465
|
+
}
|
|
1466
|
+
)
|
|
1467
|
+
] }));
|
|
1468
|
+
SheetContent.displayName = SheetPrimitive.Content.displayName;
|
|
1469
|
+
var SheetHeader = ({
|
|
1470
|
+
className,
|
|
1471
|
+
...props
|
|
1472
|
+
}) => /* @__PURE__ */ jsx22(
|
|
1473
|
+
"div",
|
|
1474
|
+
{
|
|
1475
|
+
className: cn(
|
|
1476
|
+
"flex flex-col space-y-2 text-center sm:text-left",
|
|
1477
|
+
className
|
|
1478
|
+
),
|
|
1479
|
+
...props
|
|
1480
|
+
}
|
|
1481
|
+
);
|
|
1482
|
+
SheetHeader.displayName = "SheetHeader";
|
|
1483
|
+
var SheetFooter = ({
|
|
1484
|
+
className,
|
|
1485
|
+
...props
|
|
1486
|
+
}) => /* @__PURE__ */ jsx22(
|
|
1487
|
+
"div",
|
|
1488
|
+
{
|
|
1489
|
+
className: cn(
|
|
1490
|
+
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
|
1491
|
+
className
|
|
1492
|
+
),
|
|
1493
|
+
...props
|
|
1494
|
+
}
|
|
1495
|
+
);
|
|
1496
|
+
SheetFooter.displayName = "SheetFooter";
|
|
1497
|
+
var SheetTitle = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
|
|
1498
|
+
SheetPrimitive.Title,
|
|
1499
|
+
{
|
|
1500
|
+
ref,
|
|
1501
|
+
className: cn("text-lg font-semibold text-foreground", className),
|
|
1502
|
+
...props
|
|
1503
|
+
}
|
|
1504
|
+
));
|
|
1505
|
+
SheetTitle.displayName = SheetPrimitive.Title.displayName;
|
|
1506
|
+
var SheetDescription = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
|
|
1507
|
+
SheetPrimitive.Description,
|
|
1508
|
+
{
|
|
1509
|
+
ref,
|
|
1510
|
+
className: cn("text-sm text-muted-foreground", className),
|
|
1511
|
+
...props
|
|
1512
|
+
}
|
|
1513
|
+
));
|
|
1514
|
+
SheetDescription.displayName = SheetPrimitive.Description.displayName;
|
|
1515
|
+
|
|
1516
|
+
// src/components/ui/skeleton.tsx
|
|
1517
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
1518
|
+
function Skeleton({
|
|
1519
|
+
className,
|
|
1520
|
+
...props
|
|
1521
|
+
}) {
|
|
1522
|
+
return /* @__PURE__ */ jsx23(
|
|
1523
|
+
"div",
|
|
1524
|
+
{
|
|
1525
|
+
className: cn("animate-pulse rounded-md bg-muted", className),
|
|
1526
|
+
...props
|
|
1527
|
+
}
|
|
1528
|
+
);
|
|
1529
|
+
}
|
|
1530
|
+
|
|
1531
|
+
// src/components/ui/tooltip.tsx
|
|
1532
|
+
import * as React22 from "react";
|
|
1533
|
+
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
1534
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
1535
|
+
var TooltipProvider = TooltipPrimitive.Provider;
|
|
1536
|
+
var Tooltip = TooltipPrimitive.Root;
|
|
1537
|
+
var TooltipTrigger = TooltipPrimitive.Trigger;
|
|
1538
|
+
var TooltipContent = React22.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx24(
|
|
1539
|
+
TooltipPrimitive.Content,
|
|
1540
|
+
{
|
|
1541
|
+
ref,
|
|
1542
|
+
sideOffset,
|
|
1543
|
+
className: cn(
|
|
1544
|
+
"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
|
|
1545
|
+
className
|
|
1546
|
+
),
|
|
1547
|
+
...props
|
|
1548
|
+
}
|
|
1549
|
+
));
|
|
1550
|
+
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
|
1551
|
+
|
|
1552
|
+
// src/components/ui/sidebar.tsx
|
|
1553
|
+
import { jsx as jsx25, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1554
|
+
var SIDEBAR_COOKIE_NAME = "sidebar_state";
|
|
1555
|
+
var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
|
1556
|
+
var SIDEBAR_WIDTH = "16rem";
|
|
1557
|
+
var SIDEBAR_WIDTH_MOBILE = "18rem";
|
|
1558
|
+
var SIDEBAR_WIDTH_ICON = "3rem";
|
|
1559
|
+
var SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
|
1560
|
+
var SidebarContext = React23.createContext(null);
|
|
1561
|
+
function useSidebar() {
|
|
1562
|
+
const context = React23.useContext(SidebarContext);
|
|
1563
|
+
if (!context) {
|
|
1564
|
+
throw new Error("useSidebar must be used within a SidebarProvider.");
|
|
1565
|
+
}
|
|
1566
|
+
return context;
|
|
1567
|
+
}
|
|
1568
|
+
var SidebarProvider = React23.forwardRef(
|
|
1569
|
+
({
|
|
1570
|
+
defaultOpen = true,
|
|
1571
|
+
open: openProp,
|
|
1572
|
+
onOpenChange: setOpenProp,
|
|
1573
|
+
className,
|
|
1574
|
+
style,
|
|
1575
|
+
children,
|
|
1576
|
+
...props
|
|
1577
|
+
}, ref) => {
|
|
1578
|
+
const isMobile = useIsMobile();
|
|
1579
|
+
const [openMobile, setOpenMobile] = React23.useState(false);
|
|
1580
|
+
const [_open, _setOpen] = React23.useState(defaultOpen);
|
|
1581
|
+
const open = openProp ?? _open;
|
|
1582
|
+
const setOpen = React23.useCallback(
|
|
1583
|
+
(value) => {
|
|
1584
|
+
const openState = typeof value === "function" ? value(open) : value;
|
|
1585
|
+
if (setOpenProp) {
|
|
1586
|
+
setOpenProp(openState);
|
|
1587
|
+
} else {
|
|
1588
|
+
_setOpen(openState);
|
|
1589
|
+
}
|
|
1590
|
+
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
|
|
1591
|
+
},
|
|
1592
|
+
[setOpenProp, open]
|
|
1593
|
+
);
|
|
1594
|
+
const toggleSidebar = React23.useCallback(() => {
|
|
1595
|
+
return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
|
|
1596
|
+
}, [isMobile, setOpen, setOpenMobile]);
|
|
1597
|
+
React23.useEffect(() => {
|
|
1598
|
+
const handleKeyDown = (event) => {
|
|
1599
|
+
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
|
|
1600
|
+
event.preventDefault();
|
|
1601
|
+
toggleSidebar();
|
|
1602
|
+
}
|
|
1603
|
+
};
|
|
1604
|
+
window.addEventListener("keydown", handleKeyDown);
|
|
1605
|
+
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
1606
|
+
}, [toggleSidebar]);
|
|
1607
|
+
const state = open ? "expanded" : "collapsed";
|
|
1608
|
+
const contextValue = React23.useMemo(
|
|
1609
|
+
() => ({
|
|
1610
|
+
state,
|
|
1611
|
+
open,
|
|
1612
|
+
setOpen,
|
|
1613
|
+
isMobile,
|
|
1614
|
+
openMobile,
|
|
1615
|
+
setOpenMobile,
|
|
1616
|
+
toggleSidebar
|
|
1617
|
+
}),
|
|
1618
|
+
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
|
|
1619
|
+
);
|
|
1620
|
+
return /* @__PURE__ */ jsx25(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx25(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx25(
|
|
1621
|
+
"div",
|
|
1622
|
+
{
|
|
1623
|
+
style: {
|
|
1624
|
+
"--sidebar-width": SIDEBAR_WIDTH,
|
|
1625
|
+
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
|
1626
|
+
...style
|
|
1627
|
+
},
|
|
1628
|
+
className: cn(
|
|
1629
|
+
"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
|
|
1630
|
+
className
|
|
1631
|
+
),
|
|
1632
|
+
ref,
|
|
1633
|
+
...props,
|
|
1634
|
+
children
|
|
1635
|
+
}
|
|
1636
|
+
) }) });
|
|
1637
|
+
}
|
|
1638
|
+
);
|
|
1639
|
+
SidebarProvider.displayName = "SidebarProvider";
|
|
1640
|
+
var Sidebar = React23.forwardRef(
|
|
1641
|
+
({
|
|
1642
|
+
side = "left",
|
|
1643
|
+
variant = "sidebar",
|
|
1644
|
+
collapsible = "offcanvas",
|
|
1645
|
+
className,
|
|
1646
|
+
children,
|
|
1647
|
+
...props
|
|
1648
|
+
}, ref) => {
|
|
1649
|
+
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
|
1650
|
+
if (collapsible === "none") {
|
|
1651
|
+
return /* @__PURE__ */ jsx25(
|
|
1652
|
+
"div",
|
|
1653
|
+
{
|
|
1654
|
+
className: cn(
|
|
1655
|
+
"flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
|
|
1656
|
+
className
|
|
1657
|
+
),
|
|
1658
|
+
ref,
|
|
1659
|
+
...props,
|
|
1660
|
+
children
|
|
1661
|
+
}
|
|
1662
|
+
);
|
|
1663
|
+
}
|
|
1664
|
+
if (isMobile) {
|
|
1665
|
+
return /* @__PURE__ */ jsx25(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs10(
|
|
1666
|
+
SheetContent,
|
|
1667
|
+
{
|
|
1668
|
+
"data-sidebar": "sidebar",
|
|
1669
|
+
"data-mobile": "true",
|
|
1670
|
+
className: "w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
|
|
1671
|
+
style: {
|
|
1672
|
+
"--sidebar-width": SIDEBAR_WIDTH_MOBILE
|
|
1673
|
+
},
|
|
1674
|
+
side,
|
|
1675
|
+
children: [
|
|
1676
|
+
/* @__PURE__ */ jsxs10(SheetHeader, { className: "sr-only", children: [
|
|
1677
|
+
/* @__PURE__ */ jsx25(SheetTitle, { children: "Sidebar" }),
|
|
1678
|
+
/* @__PURE__ */ jsx25(SheetDescription, { children: "Displays the mobile sidebar." })
|
|
1679
|
+
] }),
|
|
1680
|
+
/* @__PURE__ */ jsx25("div", { className: "flex h-full w-full flex-col", children })
|
|
1681
|
+
]
|
|
1682
|
+
}
|
|
1683
|
+
) });
|
|
1684
|
+
}
|
|
1685
|
+
return /* @__PURE__ */ jsxs10(
|
|
1686
|
+
"div",
|
|
1687
|
+
{
|
|
1688
|
+
ref,
|
|
1689
|
+
className: "group peer hidden text-sidebar-foreground md:block",
|
|
1690
|
+
"data-state": state,
|
|
1691
|
+
"data-collapsible": state === "collapsed" ? collapsible : "",
|
|
1692
|
+
"data-variant": variant,
|
|
1693
|
+
"data-side": side,
|
|
1694
|
+
children: [
|
|
1695
|
+
/* @__PURE__ */ jsx25(
|
|
1696
|
+
"div",
|
|
1697
|
+
{
|
|
1698
|
+
className: cn(
|
|
1699
|
+
"relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
|
|
1700
|
+
"group-data-[collapsible=offcanvas]:w-0",
|
|
1701
|
+
"group-data-[side=right]:rotate-180",
|
|
1702
|
+
variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
|
|
1703
|
+
)
|
|
1704
|
+
}
|
|
1705
|
+
),
|
|
1706
|
+
/* @__PURE__ */ jsx25(
|
|
1707
|
+
"div",
|
|
1708
|
+
{
|
|
1709
|
+
className: cn(
|
|
1710
|
+
"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
|
|
1711
|
+
side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
|
1712
|
+
// Adjust the padding for floating and inset variants.
|
|
1713
|
+
variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
|
|
1714
|
+
className
|
|
1715
|
+
),
|
|
1716
|
+
...props,
|
|
1717
|
+
children: /* @__PURE__ */ jsx25(
|
|
1718
|
+
"div",
|
|
1719
|
+
{
|
|
1720
|
+
"data-sidebar": "sidebar",
|
|
1721
|
+
className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow",
|
|
1722
|
+
children
|
|
1723
|
+
}
|
|
1724
|
+
)
|
|
1725
|
+
}
|
|
1726
|
+
)
|
|
1727
|
+
]
|
|
1728
|
+
}
|
|
1729
|
+
);
|
|
1730
|
+
}
|
|
1731
|
+
);
|
|
1732
|
+
Sidebar.displayName = "Sidebar";
|
|
1733
|
+
var SidebarTrigger = React23.forwardRef(({ className, onClick, ...props }, ref) => {
|
|
1734
|
+
const { toggleSidebar } = useSidebar();
|
|
1735
|
+
return /* @__PURE__ */ jsxs10(
|
|
1736
|
+
ShadcnButton,
|
|
1737
|
+
{
|
|
1738
|
+
ref,
|
|
1739
|
+
"data-sidebar": "trigger",
|
|
1740
|
+
variant: "link",
|
|
1741
|
+
size: "icon",
|
|
1742
|
+
className: cn("h-7 w-7", className),
|
|
1743
|
+
onClick: (event) => {
|
|
1744
|
+
onClick?.(event);
|
|
1745
|
+
toggleSidebar();
|
|
1746
|
+
},
|
|
1747
|
+
...props,
|
|
1748
|
+
children: [
|
|
1749
|
+
/* @__PURE__ */ jsx25(PanelLeft, {}),
|
|
1750
|
+
/* @__PURE__ */ jsx25("span", { className: "sr-only", children: "Toggle Sidebar" })
|
|
1751
|
+
]
|
|
1752
|
+
}
|
|
1753
|
+
);
|
|
1754
|
+
});
|
|
1755
|
+
SidebarTrigger.displayName = "SidebarTrigger";
|
|
1756
|
+
var SidebarRail = React23.forwardRef(({ className, ...props }, ref) => {
|
|
1757
|
+
const { toggleSidebar } = useSidebar();
|
|
1758
|
+
return /* @__PURE__ */ jsx25(
|
|
1759
|
+
"button",
|
|
1760
|
+
{
|
|
1761
|
+
ref,
|
|
1762
|
+
"data-sidebar": "rail",
|
|
1763
|
+
"aria-label": "Toggle Sidebar",
|
|
1764
|
+
tabIndex: -1,
|
|
1765
|
+
onClick: toggleSidebar,
|
|
1766
|
+
title: "Toggle Sidebar",
|
|
1767
|
+
className: cn(
|
|
1768
|
+
"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
|
|
1769
|
+
"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
|
|
1770
|
+
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
|
1771
|
+
"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
|
|
1772
|
+
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
|
|
1773
|
+
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
|
|
1774
|
+
className
|
|
1775
|
+
),
|
|
1776
|
+
...props
|
|
1777
|
+
}
|
|
1778
|
+
);
|
|
1779
|
+
});
|
|
1780
|
+
SidebarRail.displayName = "SidebarRail";
|
|
1781
|
+
var SidebarInset = React23.forwardRef(({ className, ...props }, ref) => {
|
|
1782
|
+
return /* @__PURE__ */ jsx25(
|
|
1783
|
+
"main",
|
|
1784
|
+
{
|
|
1785
|
+
ref,
|
|
1786
|
+
className: cn(
|
|
1787
|
+
"relative flex w-full flex-1 flex-col bg-background",
|
|
1788
|
+
"md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
|
|
1789
|
+
className
|
|
1790
|
+
),
|
|
1791
|
+
...props
|
|
1792
|
+
}
|
|
1793
|
+
);
|
|
1794
|
+
});
|
|
1795
|
+
SidebarInset.displayName = "SidebarInset";
|
|
1796
|
+
var SidebarInput = React23.forwardRef(({ className, ...props }, ref) => {
|
|
1797
|
+
return /* @__PURE__ */ jsx25(
|
|
1798
|
+
ShadcnInput,
|
|
1799
|
+
{
|
|
1800
|
+
ref,
|
|
1801
|
+
"data-sidebar": "input",
|
|
1802
|
+
className: cn(
|
|
1803
|
+
"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
|
|
1804
|
+
className
|
|
1805
|
+
),
|
|
1806
|
+
...props
|
|
1807
|
+
}
|
|
1808
|
+
);
|
|
1809
|
+
});
|
|
1810
|
+
SidebarInput.displayName = "SidebarInput";
|
|
1811
|
+
var SidebarHeader = React23.forwardRef(({ className, ...props }, ref) => {
|
|
1812
|
+
return /* @__PURE__ */ jsx25(
|
|
1813
|
+
"div",
|
|
1814
|
+
{
|
|
1815
|
+
ref,
|
|
1816
|
+
"data-sidebar": "header",
|
|
1817
|
+
className: cn("flex flex-col gap-2 p-2", className),
|
|
1818
|
+
...props
|
|
1819
|
+
}
|
|
1820
|
+
);
|
|
1821
|
+
});
|
|
1822
|
+
SidebarHeader.displayName = "SidebarHeader";
|
|
1823
|
+
var SidebarFooter = React23.forwardRef(({ className, ...props }, ref) => {
|
|
1824
|
+
return /* @__PURE__ */ jsx25(
|
|
1825
|
+
"div",
|
|
1826
|
+
{
|
|
1827
|
+
ref,
|
|
1828
|
+
"data-sidebar": "footer",
|
|
1829
|
+
className: cn("flex flex-col gap-2 p-2", className),
|
|
1830
|
+
...props
|
|
1831
|
+
}
|
|
1832
|
+
);
|
|
1833
|
+
});
|
|
1834
|
+
SidebarFooter.displayName = "SidebarFooter";
|
|
1835
|
+
var SidebarSeparator = React23.forwardRef(({ className, ...props }, ref) => {
|
|
1836
|
+
return /* @__PURE__ */ jsx25(
|
|
1837
|
+
Separator,
|
|
1838
|
+
{
|
|
1839
|
+
ref,
|
|
1840
|
+
"data-sidebar": "separator",
|
|
1841
|
+
className: cn("mx-2 w-auto bg-sidebar-border", className),
|
|
1842
|
+
...props
|
|
1843
|
+
}
|
|
1844
|
+
);
|
|
1845
|
+
});
|
|
1846
|
+
SidebarSeparator.displayName = "SidebarSeparator";
|
|
1847
|
+
var SidebarContent = React23.forwardRef(({ className, ...props }, ref) => {
|
|
1848
|
+
return /* @__PURE__ */ jsx25(
|
|
1849
|
+
"div",
|
|
1850
|
+
{
|
|
1851
|
+
ref,
|
|
1852
|
+
"data-sidebar": "content",
|
|
1853
|
+
className: cn(
|
|
1854
|
+
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
|
|
1855
|
+
className
|
|
1856
|
+
),
|
|
1857
|
+
...props
|
|
1858
|
+
}
|
|
1859
|
+
);
|
|
1860
|
+
});
|
|
1861
|
+
SidebarContent.displayName = "SidebarContent";
|
|
1862
|
+
var SidebarGroup = React23.forwardRef(({ className, ...props }, ref) => {
|
|
1863
|
+
return /* @__PURE__ */ jsx25(
|
|
1864
|
+
"div",
|
|
1865
|
+
{
|
|
1866
|
+
ref,
|
|
1867
|
+
"data-sidebar": "group",
|
|
1868
|
+
className: cn("relative flex w-full min-w-0 flex-col p-2", className),
|
|
1869
|
+
...props
|
|
1870
|
+
}
|
|
1871
|
+
);
|
|
1872
|
+
});
|
|
1873
|
+
SidebarGroup.displayName = "SidebarGroup";
|
|
1874
|
+
var SidebarGroupLabel = React23.forwardRef(({ className, asChild = false, ...props }, ref) => {
|
|
1875
|
+
const Comp = asChild ? Slot2 : "div";
|
|
1876
|
+
return /* @__PURE__ */ jsx25(
|
|
1877
|
+
Comp,
|
|
1878
|
+
{
|
|
1879
|
+
ref,
|
|
1880
|
+
"data-sidebar": "group-label",
|
|
1881
|
+
className: cn(
|
|
1882
|
+
"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
1883
|
+
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
|
|
1884
|
+
className
|
|
1885
|
+
),
|
|
1886
|
+
...props
|
|
1887
|
+
}
|
|
1888
|
+
);
|
|
1889
|
+
});
|
|
1890
|
+
SidebarGroupLabel.displayName = "SidebarGroupLabel";
|
|
1891
|
+
var SidebarGroupAction = React23.forwardRef(({ className, asChild = false, ...props }, ref) => {
|
|
1892
|
+
const Comp = asChild ? Slot2 : "button";
|
|
1893
|
+
return /* @__PURE__ */ jsx25(
|
|
1894
|
+
Comp,
|
|
1895
|
+
{
|
|
1896
|
+
ref,
|
|
1897
|
+
"data-sidebar": "group-action",
|
|
1898
|
+
className: cn(
|
|
1899
|
+
"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
1900
|
+
// Increases the hit area of the button on mobile.
|
|
1901
|
+
"after:absolute after:-inset-2 after:md:hidden",
|
|
1902
|
+
"group-data-[collapsible=icon]:hidden",
|
|
1903
|
+
className
|
|
1904
|
+
),
|
|
1905
|
+
...props
|
|
1906
|
+
}
|
|
1907
|
+
);
|
|
1908
|
+
});
|
|
1909
|
+
SidebarGroupAction.displayName = "SidebarGroupAction";
|
|
1910
|
+
var SidebarGroupContent = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
|
|
1911
|
+
"div",
|
|
1912
|
+
{
|
|
1913
|
+
ref,
|
|
1914
|
+
"data-sidebar": "group-content",
|
|
1915
|
+
className: cn("w-full text-sm", className),
|
|
1916
|
+
...props
|
|
1917
|
+
}
|
|
1918
|
+
));
|
|
1919
|
+
SidebarGroupContent.displayName = "SidebarGroupContent";
|
|
1920
|
+
var SidebarMenu = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
|
|
1921
|
+
"ul",
|
|
1922
|
+
{
|
|
1923
|
+
ref,
|
|
1924
|
+
"data-sidebar": "menu",
|
|
1925
|
+
className: cn("flex w-full min-w-0 flex-col gap-1", className),
|
|
1926
|
+
...props
|
|
1927
|
+
}
|
|
1928
|
+
));
|
|
1929
|
+
SidebarMenu.displayName = "SidebarMenu";
|
|
1930
|
+
var SidebarMenuItem = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
|
|
1931
|
+
"li",
|
|
1932
|
+
{
|
|
1933
|
+
ref,
|
|
1934
|
+
"data-sidebar": "menu-item",
|
|
1935
|
+
className: cn("group/menu-item relative", className),
|
|
1936
|
+
...props
|
|
1937
|
+
}
|
|
1938
|
+
));
|
|
1939
|
+
SidebarMenuItem.displayName = "SidebarMenuItem";
|
|
1940
|
+
var sidebarMenuButtonVariants = cva5(
|
|
1941
|
+
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
|
1942
|
+
{
|
|
1943
|
+
variants: {
|
|
1944
|
+
variant: {
|
|
1945
|
+
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
1946
|
+
outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
|
|
1947
|
+
},
|
|
1948
|
+
size: {
|
|
1949
|
+
default: "h-8 text-sm",
|
|
1950
|
+
sm: "h-7 text-xs",
|
|
1951
|
+
lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0"
|
|
1952
|
+
}
|
|
1953
|
+
},
|
|
1954
|
+
defaultVariants: {
|
|
1955
|
+
variant: "default",
|
|
1956
|
+
size: "default"
|
|
1957
|
+
}
|
|
1958
|
+
}
|
|
1959
|
+
);
|
|
1960
|
+
var SidebarMenuButton = React23.forwardRef(
|
|
1961
|
+
({
|
|
1962
|
+
asChild = false,
|
|
1963
|
+
isActive = false,
|
|
1964
|
+
variant = "default",
|
|
1965
|
+
size = "default",
|
|
1966
|
+
tooltip,
|
|
1967
|
+
className,
|
|
1968
|
+
...props
|
|
1969
|
+
}, ref) => {
|
|
1970
|
+
const Comp = asChild ? Slot2 : "button";
|
|
1971
|
+
const { isMobile, state } = useSidebar();
|
|
1972
|
+
const button = /* @__PURE__ */ jsx25(
|
|
1973
|
+
Comp,
|
|
1974
|
+
{
|
|
1975
|
+
ref,
|
|
1976
|
+
"data-sidebar": "menu-button",
|
|
1977
|
+
"data-size": size,
|
|
1978
|
+
"data-active": isActive,
|
|
1979
|
+
className: cn(sidebarMenuButtonVariants({ variant, size }), className),
|
|
1980
|
+
...props
|
|
1981
|
+
}
|
|
1982
|
+
);
|
|
1983
|
+
if (!tooltip) {
|
|
1984
|
+
return button;
|
|
1985
|
+
}
|
|
1986
|
+
if (typeof tooltip === "string") {
|
|
1987
|
+
tooltip = {
|
|
1988
|
+
children: tooltip
|
|
1989
|
+
};
|
|
1990
|
+
}
|
|
1991
|
+
return /* @__PURE__ */ jsxs10(Tooltip, { children: [
|
|
1992
|
+
/* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: button }),
|
|
1993
|
+
/* @__PURE__ */ jsx25(
|
|
1994
|
+
TooltipContent,
|
|
1995
|
+
{
|
|
1996
|
+
side: "right",
|
|
1997
|
+
align: "center",
|
|
1998
|
+
hidden: state !== "collapsed" || isMobile,
|
|
1999
|
+
...tooltip
|
|
2000
|
+
}
|
|
2001
|
+
)
|
|
2002
|
+
] });
|
|
2003
|
+
}
|
|
2004
|
+
);
|
|
2005
|
+
SidebarMenuButton.displayName = "SidebarMenuButton";
|
|
2006
|
+
var SidebarMenuAction = React23.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
|
|
2007
|
+
const Comp = asChild ? Slot2 : "button";
|
|
2008
|
+
return /* @__PURE__ */ jsx25(
|
|
2009
|
+
Comp,
|
|
2010
|
+
{
|
|
2011
|
+
ref,
|
|
2012
|
+
"data-sidebar": "menu-action",
|
|
2013
|
+
className: cn(
|
|
2014
|
+
"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
|
|
2015
|
+
// Increases the hit area of the button on mobile.
|
|
2016
|
+
"after:absolute after:-inset-2 after:md:hidden",
|
|
2017
|
+
"peer-data-[size=sm]/menu-button:top-1",
|
|
2018
|
+
"peer-data-[size=default]/menu-button:top-1.5",
|
|
2019
|
+
"peer-data-[size=lg]/menu-button:top-2.5",
|
|
2020
|
+
"group-data-[collapsible=icon]:hidden",
|
|
2021
|
+
showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
|
|
2022
|
+
className
|
|
2023
|
+
),
|
|
2024
|
+
...props
|
|
2025
|
+
}
|
|
2026
|
+
);
|
|
2027
|
+
});
|
|
2028
|
+
SidebarMenuAction.displayName = "SidebarMenuAction";
|
|
2029
|
+
var SidebarMenuBadge = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
|
|
2030
|
+
"div",
|
|
2031
|
+
{
|
|
2032
|
+
ref,
|
|
2033
|
+
"data-sidebar": "menu-badge",
|
|
2034
|
+
className: cn(
|
|
2035
|
+
"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
|
|
2036
|
+
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
|
|
2037
|
+
"peer-data-[size=sm]/menu-button:top-1",
|
|
2038
|
+
"peer-data-[size=default]/menu-button:top-1.5",
|
|
2039
|
+
"peer-data-[size=lg]/menu-button:top-2.5",
|
|
2040
|
+
"group-data-[collapsible=icon]:hidden",
|
|
2041
|
+
className
|
|
2042
|
+
),
|
|
2043
|
+
...props
|
|
2044
|
+
}
|
|
2045
|
+
));
|
|
2046
|
+
SidebarMenuBadge.displayName = "SidebarMenuBadge";
|
|
2047
|
+
var SidebarMenuSkeleton = React23.forwardRef(({ className, showIcon = false, ...props }, ref) => {
|
|
2048
|
+
const width = React23.useMemo(() => {
|
|
2049
|
+
return `${Math.floor(Math.random() * 40) + 50}%`;
|
|
2050
|
+
}, []);
|
|
2051
|
+
return /* @__PURE__ */ jsxs10(
|
|
2052
|
+
"div",
|
|
2053
|
+
{
|
|
2054
|
+
ref,
|
|
2055
|
+
"data-sidebar": "menu-skeleton",
|
|
2056
|
+
className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
|
|
2057
|
+
...props,
|
|
2058
|
+
children: [
|
|
2059
|
+
showIcon && /* @__PURE__ */ jsx25(
|
|
2060
|
+
Skeleton,
|
|
2061
|
+
{
|
|
2062
|
+
className: "size-4 rounded-md",
|
|
2063
|
+
"data-sidebar": "menu-skeleton-icon"
|
|
2064
|
+
}
|
|
2065
|
+
),
|
|
2066
|
+
/* @__PURE__ */ jsx25(
|
|
2067
|
+
Skeleton,
|
|
2068
|
+
{
|
|
2069
|
+
className: "h-4 max-w-[--skeleton-width] flex-1",
|
|
2070
|
+
"data-sidebar": "menu-skeleton-text",
|
|
2071
|
+
style: {
|
|
2072
|
+
"--skeleton-width": width
|
|
2073
|
+
}
|
|
2074
|
+
}
|
|
2075
|
+
)
|
|
2076
|
+
]
|
|
2077
|
+
}
|
|
2078
|
+
);
|
|
2079
|
+
});
|
|
2080
|
+
SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
|
|
2081
|
+
var SidebarMenuSub = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
|
|
2082
|
+
"ul",
|
|
2083
|
+
{
|
|
2084
|
+
ref,
|
|
2085
|
+
"data-sidebar": "menu-sub",
|
|
2086
|
+
className: cn(
|
|
2087
|
+
"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
|
|
2088
|
+
"group-data-[collapsible=icon]:hidden",
|
|
2089
|
+
className
|
|
2090
|
+
),
|
|
2091
|
+
...props
|
|
2092
|
+
}
|
|
2093
|
+
));
|
|
2094
|
+
SidebarMenuSub.displayName = "SidebarMenuSub";
|
|
2095
|
+
var SidebarMenuSubItem = React23.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx25("li", { ref, ...props }));
|
|
2096
|
+
SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
|
|
2097
|
+
var SidebarMenuSubButton = React23.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
|
|
2098
|
+
const Comp = asChild ? Slot2 : "a";
|
|
2099
|
+
return /* @__PURE__ */ jsx25(
|
|
2100
|
+
Comp,
|
|
2101
|
+
{
|
|
2102
|
+
ref,
|
|
2103
|
+
"data-sidebar": "menu-sub-button",
|
|
2104
|
+
"data-size": size,
|
|
2105
|
+
"data-active": isActive,
|
|
2106
|
+
className: cn(
|
|
2107
|
+
"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
|
|
2108
|
+
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
|
|
2109
|
+
size === "sm" && "text-xs",
|
|
2110
|
+
size === "md" && "text-sm",
|
|
2111
|
+
"group-data-[collapsible=icon]:hidden",
|
|
2112
|
+
className
|
|
2113
|
+
),
|
|
2114
|
+
...props
|
|
2115
|
+
}
|
|
2116
|
+
);
|
|
2117
|
+
});
|
|
2118
|
+
SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
|
|
2119
|
+
|
|
2120
|
+
// src/components/easy/sidebar.tsx
|
|
2121
|
+
import { jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
2122
|
+
var EasySidebar = React24.forwardRef(
|
|
2123
|
+
({ title, description, menuItems, className, ...props }, ref) => {
|
|
2124
|
+
return /* @__PURE__ */ jsx26(
|
|
2125
|
+
SidebarProvider,
|
|
2126
|
+
{
|
|
2127
|
+
ref,
|
|
2128
|
+
className: cn(
|
|
2129
|
+
"bg-[var(--ui-background-50)] px-3 py-6",
|
|
2130
|
+
className
|
|
2131
|
+
),
|
|
2132
|
+
style: { "--sidebar-width": "100%" },
|
|
2133
|
+
...props,
|
|
2134
|
+
children: /* @__PURE__ */ jsx26(Sidebar, { collapsible: "none", className: "w-full bg-transparent text-[var(--ui-text-900)]", children: /* @__PURE__ */ jsxs11(SidebarContent, { className: "gap-6 px-0", children: [
|
|
2135
|
+
(title || description) && /* @__PURE__ */ jsxs11("div", { className: "space-y-1 px-2 text-left", children: [
|
|
2136
|
+
title && /* @__PURE__ */ jsx26(EasyHeading, { variant: "large", as: "h2", className: "text-[var(--ui-text-900)] font-semibold text-xl", children: title }),
|
|
2137
|
+
description && /* @__PURE__ */ jsx26(EasyBody, { variant: "small", className: "text-[var(--ui-text-600)]", children: description })
|
|
2138
|
+
] }),
|
|
2139
|
+
/* @__PURE__ */ jsx26(SidebarMenu, { className: "gap-2 px-1", children: menuItems.map((item, index) => /* @__PURE__ */ jsx26(SidebarMenuItem, { children: /* @__PURE__ */ jsxs11(
|
|
2140
|
+
SidebarMenuButton,
|
|
2141
|
+
{
|
|
2142
|
+
type: "button",
|
|
2143
|
+
isActive: item.active,
|
|
2144
|
+
className: "h-11 bg-transparent px-3 py-1.5 text-[var(--ui-text-600)] data-[active=true]:bg-[var(--ui-decorative-green)] data-[active=true]:text-[var(--ui-text-900)] data-[active=true]:rounded-md",
|
|
2145
|
+
onClick: () => item.onClick?.(),
|
|
2146
|
+
children: [
|
|
2147
|
+
item.icon && /* @__PURE__ */ jsx26("span", { className: cn(
|
|
2148
|
+
"text-[var(--ui-text-500)]",
|
|
2149
|
+
item.active && "text-[var(--ui-primary-500)]"
|
|
2150
|
+
), children: item.icon }),
|
|
2151
|
+
/* @__PURE__ */ jsxs11("span", { className: "flex flex-1 flex-col text-left", children: [
|
|
2152
|
+
/* @__PURE__ */ jsx26(EasyBody, { variant: "medium", className: "text-[var(--ui-text-900)] font-medium", children: item.label }),
|
|
2153
|
+
item.description && /* @__PURE__ */ jsx26(EasyBody, { variant: "small", className: "text-[var(--ui-text-500)]", children: item.description })
|
|
2154
|
+
] })
|
|
2155
|
+
]
|
|
2156
|
+
}
|
|
2157
|
+
) }, item.id ?? index)) })
|
|
2158
|
+
] }) })
|
|
2159
|
+
}
|
|
2160
|
+
);
|
|
2161
|
+
}
|
|
2162
|
+
);
|
|
2163
|
+
EasySidebar.displayName = "EasySidebar";
|
|
2164
|
+
|
|
2165
|
+
// src/components/easy/tabs.tsx
|
|
2166
|
+
import * as React25 from "react";
|
|
2167
|
+
import { cva as cva6 } from "class-variance-authority";
|
|
2168
|
+
import { jsx as jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
2169
|
+
var tabsListVariants = cva6(
|
|
2170
|
+
"inline-flex items-center justify-start gap-1 rounded-lg bg-transparent",
|
|
2171
|
+
{
|
|
2172
|
+
variants: {
|
|
2173
|
+
size: {
|
|
2174
|
+
small: "h-8",
|
|
2175
|
+
medium: "h-10",
|
|
2176
|
+
large: "h-12"
|
|
2177
|
+
}
|
|
2178
|
+
},
|
|
2179
|
+
defaultVariants: {
|
|
2180
|
+
size: "medium"
|
|
2181
|
+
}
|
|
2182
|
+
}
|
|
2183
|
+
);
|
|
2184
|
+
var tabsTriggerVariants = cva6(
|
|
2185
|
+
"relative inline-flex items-center justify-center whitespace-nowrap px-4 py-2 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-ring)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 !bg-transparent !shadow-none data-[state=active]:!bg-transparent data-[state=active]:!shadow-none data-[state=inactive]:!bg-transparent data-[state=inactive]:!shadow-none data-[state=active]:text-[var(--ui-primary-500)] data-[state=inactive]:text-[var(--ui-text-900)] hover:data-[state=inactive]:!bg-transparent hover:data-[state=inactive]:!shadow-none [&[data-state=active]>div:last-child]:opacity-100",
|
|
2186
|
+
{
|
|
2187
|
+
variants: {
|
|
2188
|
+
size: {
|
|
2189
|
+
small: "h-6 px-3 text-xs",
|
|
2190
|
+
medium: "h-8 px-4 text-sm",
|
|
2191
|
+
large: "h-10 px-6 text-base"
|
|
2192
|
+
}
|
|
2193
|
+
},
|
|
2194
|
+
defaultVariants: {
|
|
2195
|
+
size: "medium"
|
|
2196
|
+
}
|
|
2197
|
+
}
|
|
2198
|
+
);
|
|
2199
|
+
var EasyTabs = Tabs;
|
|
2200
|
+
var EasyTabsList = React25.forwardRef(({ className, size, ...props }, ref) => {
|
|
2201
|
+
return /* @__PURE__ */ jsx27(
|
|
2202
|
+
TabsList,
|
|
2203
|
+
{
|
|
2204
|
+
ref,
|
|
2205
|
+
className: cn(tabsListVariants({ size }), className, "bg-transparent"),
|
|
2206
|
+
...props
|
|
2207
|
+
}
|
|
2208
|
+
);
|
|
2209
|
+
});
|
|
2210
|
+
EasyTabsList.displayName = "EasyTabsList";
|
|
2211
|
+
var EasyTabsTrigger = React25.forwardRef(({ className, size, children, ...props }, ref) => {
|
|
2212
|
+
return /* @__PURE__ */ jsxs12(
|
|
2213
|
+
TabsTrigger,
|
|
2214
|
+
{
|
|
2215
|
+
ref,
|
|
2216
|
+
className: cn(
|
|
2217
|
+
tabsTriggerVariants({ size }),
|
|
2218
|
+
getTypographyClass("body-medium"),
|
|
2219
|
+
"data-[state=inactive]:text-[var(--ui-text-900)] font-semibold",
|
|
2220
|
+
className,
|
|
2221
|
+
"data-[state=active]:!bg-transparent data-[state=inactive]:bg-transparent !shadow-none data-[state=active]:!shadow-none data-[state=inactive]:!shadow-none"
|
|
2222
|
+
),
|
|
2223
|
+
...props,
|
|
2224
|
+
children: [
|
|
2225
|
+
children,
|
|
2226
|
+
/* @__PURE__ */ jsx27("div", { className: "absolute bottom-[-10px] left-0 right-0 h-0.5 bg-gradient-to-r from-[var(--ui-primary-500)] to-[var(--ui-cabir-yellow)] opacity-0 transition-opacity duration-200" })
|
|
2227
|
+
]
|
|
2228
|
+
}
|
|
2229
|
+
);
|
|
2230
|
+
});
|
|
2231
|
+
EasyTabsTrigger.displayName = "EasyTabsTrigger";
|
|
2232
|
+
var EasyTabsContent = React25.forwardRef(({ className, ...props }, ref) => {
|
|
2233
|
+
return /* @__PURE__ */ jsx27(
|
|
2234
|
+
TabsContent,
|
|
2235
|
+
{
|
|
2236
|
+
ref,
|
|
2237
|
+
className: cn("mt-4 focus-visible:outline-none", className),
|
|
2238
|
+
...props
|
|
2239
|
+
}
|
|
2240
|
+
);
|
|
2241
|
+
});
|
|
2242
|
+
EasyTabsContent.displayName = "EasyTabsContent";
|
|
2243
|
+
|
|
2244
|
+
// src/components/easy/breadcrumb.tsx
|
|
2245
|
+
import { ChevronRight as ChevronRight2 } from "lucide-react";
|
|
2246
|
+
|
|
2247
|
+
// src/components/ui/breadcrumb.tsx
|
|
2248
|
+
import * as React26 from "react";
|
|
2249
|
+
import { Slot as Slot3 } from "@radix-ui/react-slot";
|
|
2250
|
+
import { ChevronRight, MoreHorizontal } from "lucide-react";
|
|
2251
|
+
import { jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
2252
|
+
var Breadcrumb = React26.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx28("nav", { ref, "aria-label": "breadcrumb", ...props }));
|
|
2253
|
+
Breadcrumb.displayName = "Breadcrumb";
|
|
2254
|
+
var BreadcrumbList = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx28(
|
|
2255
|
+
"ol",
|
|
2256
|
+
{
|
|
2257
|
+
ref,
|
|
2258
|
+
className: cn(
|
|
2259
|
+
"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
|
|
2260
|
+
className
|
|
2261
|
+
),
|
|
2262
|
+
...props
|
|
2263
|
+
}
|
|
2264
|
+
));
|
|
2265
|
+
BreadcrumbList.displayName = "BreadcrumbList";
|
|
2266
|
+
var BreadcrumbItem = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx28(
|
|
2267
|
+
"li",
|
|
2268
|
+
{
|
|
2269
|
+
ref,
|
|
2270
|
+
className: cn("inline-flex items-center gap-1.5", className),
|
|
2271
|
+
...props
|
|
2272
|
+
}
|
|
2273
|
+
));
|
|
2274
|
+
BreadcrumbItem.displayName = "BreadcrumbItem";
|
|
2275
|
+
var BreadcrumbLink = React26.forwardRef(({ asChild, className, ...props }, ref) => {
|
|
2276
|
+
const Comp = asChild ? Slot3 : "a";
|
|
2277
|
+
return /* @__PURE__ */ jsx28(
|
|
2278
|
+
Comp,
|
|
2279
|
+
{
|
|
2280
|
+
ref,
|
|
2281
|
+
className: cn("transition-colors hover:text-foreground", className),
|
|
2282
|
+
...props
|
|
2283
|
+
}
|
|
2284
|
+
);
|
|
2285
|
+
});
|
|
2286
|
+
BreadcrumbLink.displayName = "BreadcrumbLink";
|
|
2287
|
+
var BreadcrumbPage = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx28(
|
|
2288
|
+
"span",
|
|
2289
|
+
{
|
|
2290
|
+
ref,
|
|
2291
|
+
role: "link",
|
|
2292
|
+
"aria-disabled": "true",
|
|
2293
|
+
"aria-current": "page",
|
|
2294
|
+
className: cn("font-normal text-foreground", className),
|
|
2295
|
+
...props
|
|
2296
|
+
}
|
|
2297
|
+
));
|
|
2298
|
+
BreadcrumbPage.displayName = "BreadcrumbPage";
|
|
2299
|
+
var BreadcrumbSeparator = ({
|
|
2300
|
+
children,
|
|
2301
|
+
className,
|
|
2302
|
+
...props
|
|
2303
|
+
}) => /* @__PURE__ */ jsx28(
|
|
2304
|
+
"li",
|
|
2305
|
+
{
|
|
2306
|
+
role: "presentation",
|
|
2307
|
+
"aria-hidden": "true",
|
|
2308
|
+
className: cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className),
|
|
2309
|
+
...props,
|
|
2310
|
+
children: children ?? /* @__PURE__ */ jsx28(ChevronRight, {})
|
|
2311
|
+
}
|
|
2312
|
+
);
|
|
2313
|
+
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
|
|
2314
|
+
var BreadcrumbEllipsis = ({
|
|
2315
|
+
className,
|
|
2316
|
+
...props
|
|
2317
|
+
}) => /* @__PURE__ */ jsxs13(
|
|
2318
|
+
"span",
|
|
2319
|
+
{
|
|
2320
|
+
role: "presentation",
|
|
2321
|
+
"aria-hidden": "true",
|
|
2322
|
+
className: cn("flex h-9 w-9 items-center justify-center", className),
|
|
2323
|
+
...props,
|
|
2324
|
+
children: [
|
|
2325
|
+
/* @__PURE__ */ jsx28(MoreHorizontal, { className: "h-4 w-4" }),
|
|
2326
|
+
/* @__PURE__ */ jsx28("span", { className: "sr-only", children: "More" })
|
|
2327
|
+
]
|
|
2328
|
+
}
|
|
2329
|
+
);
|
|
2330
|
+
BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
|
|
2331
|
+
|
|
2332
|
+
// src/components/easy/breadcrumb.tsx
|
|
2333
|
+
import { jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
2334
|
+
var defaultBreadcrumbMap = {
|
|
2335
|
+
home: "Anasayfa",
|
|
2336
|
+
"my-account": "Hesab\u0131m",
|
|
2337
|
+
hesabim: "Hesab\u0131m",
|
|
2338
|
+
sozlesmeler: "S\xF6zle\u015Fmeler",
|
|
2339
|
+
"personel-information": "Ki\u015Fisel Bilgilerim",
|
|
2340
|
+
"kisisel-bilgilerim": "Ki\u015Fisel Bilgilerim",
|
|
2341
|
+
"my-past-offers": "Ge\xE7mi\u015F Tekliflerim",
|
|
2342
|
+
"gecmis-tekliflerim": "Ge\xE7mi\u015F Tekliflerim",
|
|
2343
|
+
"my-expert-appointments": "Ekspertiz Randevular\u0131m",
|
|
2344
|
+
"ekspertiz-randevularim": "Ekspertiz Randevular\u0131m",
|
|
2345
|
+
contact: "\u0130leti\u015Fim",
|
|
2346
|
+
iletisim: "\u0130leti\u015Fim"
|
|
2347
|
+
};
|
|
2348
|
+
function formatBreadcrumbLabel(segment) {
|
|
2349
|
+
const cleaned = segment.replace(/[-_]/g, " ").replace(/[^\w\s]/g, "");
|
|
2350
|
+
const words = cleaned.split(/\s+/).filter((word) => word.length > 0);
|
|
2351
|
+
const formattedWords = words.map(
|
|
2352
|
+
(word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
|
|
2353
|
+
);
|
|
2354
|
+
return formattedWords.join(" ");
|
|
2355
|
+
}
|
|
2356
|
+
function EasyBreadcrumb({
|
|
2357
|
+
items,
|
|
2358
|
+
className,
|
|
2359
|
+
separator,
|
|
2360
|
+
maxItems = 5,
|
|
2361
|
+
showHome = true,
|
|
2362
|
+
homeLabel = "Anasayfa",
|
|
2363
|
+
homeHref = "/"
|
|
2364
|
+
}) {
|
|
2365
|
+
const finalItems = showHome && !items.some((item) => item.href === "/" || item.href === homeHref) ? [{ label: homeLabel, href: homeHref }, ...items] : items;
|
|
2366
|
+
const displayItems = maxItems && finalItems.length > maxItems ? [...finalItems.slice(0, 1), ...finalItems.slice(-(maxItems - 1))] : finalItems;
|
|
2367
|
+
if (displayItems.length <= 1) {
|
|
2368
|
+
return null;
|
|
2369
|
+
}
|
|
2370
|
+
return /* @__PURE__ */ jsx29(Breadcrumb, { className, children: /* @__PURE__ */ jsx29(BreadcrumbList, { children: displayItems.map((item, index) => {
|
|
2371
|
+
const isLast = index === displayItems.length - 1;
|
|
2372
|
+
const isActive = item.isActive ?? isLast;
|
|
2373
|
+
return /* @__PURE__ */ jsxs14("div", { className: "flex items-center", children: [
|
|
2374
|
+
/* @__PURE__ */ jsx29(BreadcrumbItem, { children: isActive ? /* @__PURE__ */ jsx29(BreadcrumbPage, { children: /* @__PURE__ */ jsx29(
|
|
2375
|
+
EasyLabel,
|
|
2376
|
+
{
|
|
2377
|
+
variant: "xsmall",
|
|
2378
|
+
className: cn(
|
|
2379
|
+
"font-semibold text-[var(--ui-text-900)]",
|
|
2380
|
+
"lg:text-sm"
|
|
2381
|
+
),
|
|
2382
|
+
children: item.label
|
|
2383
|
+
}
|
|
2384
|
+
) }) : /* @__PURE__ */ jsx29(BreadcrumbLink, { href: item.href || "#", children: /* @__PURE__ */ jsx29(
|
|
2385
|
+
EasyLabel,
|
|
2386
|
+
{
|
|
2387
|
+
variant: "xsmall",
|
|
2388
|
+
className: cn(
|
|
2389
|
+
"font-semibold text-[var(--ui-text-500)]",
|
|
2390
|
+
"lg:text-sm"
|
|
2391
|
+
),
|
|
2392
|
+
children: item.label
|
|
2393
|
+
}
|
|
2394
|
+
) }) }),
|
|
2395
|
+
!isLast && /* @__PURE__ */ jsx29(BreadcrumbSeparator, { className: "ml-2", children: separator ?? /* @__PURE__ */ jsx29(
|
|
2396
|
+
ChevronRight2,
|
|
2397
|
+
{
|
|
2398
|
+
size: 10,
|
|
2399
|
+
className: "text-[var(--ui-icon-500)]"
|
|
2400
|
+
}
|
|
2401
|
+
) })
|
|
2402
|
+
] }, `${item.label}-${index}`);
|
|
2403
|
+
}) }) });
|
|
2404
|
+
}
|
|
2405
|
+
EasyBreadcrumb.displayName = "EasyBreadcrumb";
|
|
2406
|
+
function generateBreadcrumbItems(pathname) {
|
|
2407
|
+
const segments = pathname.split("/").filter(Boolean);
|
|
2408
|
+
const items = [];
|
|
2409
|
+
if (segments.length > 0) {
|
|
2410
|
+
items.push({
|
|
2411
|
+
label: "Anasayfa",
|
|
2412
|
+
href: "/"
|
|
2413
|
+
});
|
|
2414
|
+
}
|
|
2415
|
+
let currentPath = "";
|
|
2416
|
+
segments.forEach((segment, index) => {
|
|
2417
|
+
currentPath += `/${segment}`;
|
|
2418
|
+
const isLast = index === segments.length - 1;
|
|
2419
|
+
items.push({
|
|
2420
|
+
label: defaultBreadcrumbMap[segment] || formatBreadcrumbLabel(segment),
|
|
2421
|
+
href: isLast ? void 0 : currentPath,
|
|
2422
|
+
isActive: isLast
|
|
2423
|
+
});
|
|
2424
|
+
});
|
|
2425
|
+
return items;
|
|
2426
|
+
}
|
|
2427
|
+
|
|
2428
|
+
// src/components/easy/pagination.tsx
|
|
2429
|
+
import * as React29 from "react";
|
|
2430
|
+
import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight4 } from "lucide-react";
|
|
2431
|
+
|
|
2432
|
+
// src/components/ui/pagination.tsx
|
|
2433
|
+
import * as React27 from "react";
|
|
2434
|
+
import { ChevronLeft, ChevronRight as ChevronRight3, MoreHorizontal as MoreHorizontal2 } from "lucide-react";
|
|
2435
|
+
import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
2436
|
+
var Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx30(
|
|
2437
|
+
"nav",
|
|
2438
|
+
{
|
|
2439
|
+
role: "navigation",
|
|
2440
|
+
"aria-label": "pagination",
|
|
2441
|
+
className: cn("mx-auto flex w-full justify-center", className),
|
|
2442
|
+
...props
|
|
2443
|
+
}
|
|
2444
|
+
);
|
|
2445
|
+
Pagination.displayName = "Pagination";
|
|
2446
|
+
var PaginationContent = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
|
|
2447
|
+
"ul",
|
|
2448
|
+
{
|
|
2449
|
+
ref,
|
|
2450
|
+
className: cn("flex flex-row items-center gap-1", className),
|
|
2451
|
+
...props
|
|
2452
|
+
}
|
|
2453
|
+
));
|
|
2454
|
+
PaginationContent.displayName = "PaginationContent";
|
|
2455
|
+
var PaginationItem = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30("li", { ref, className: cn("", className), ...props }));
|
|
2456
|
+
PaginationItem.displayName = "PaginationItem";
|
|
2457
|
+
var PaginationLink = ({
|
|
2458
|
+
className,
|
|
2459
|
+
isActive,
|
|
2460
|
+
size = "icon",
|
|
2461
|
+
...props
|
|
2462
|
+
}) => /* @__PURE__ */ jsx30(
|
|
2463
|
+
"a",
|
|
2464
|
+
{
|
|
2465
|
+
"aria-current": isActive ? "page" : void 0,
|
|
2466
|
+
className: cn(
|
|
2467
|
+
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
|
2468
|
+
isActive ? "border border-input bg-background hover:bg-accent hover:text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
|
|
2469
|
+
size === "icon" && "h-9 w-9",
|
|
2470
|
+
size === "default" && "h-10 px-4 py-2",
|
|
2471
|
+
className
|
|
2472
|
+
),
|
|
2473
|
+
...props
|
|
2474
|
+
}
|
|
2475
|
+
);
|
|
2476
|
+
PaginationLink.displayName = "PaginationLink";
|
|
2477
|
+
var PaginationPrevious = ({
|
|
2478
|
+
className,
|
|
2479
|
+
...props
|
|
2480
|
+
}) => /* @__PURE__ */ jsxs15(
|
|
2481
|
+
PaginationLink,
|
|
2482
|
+
{
|
|
2483
|
+
"aria-label": "Go to previous page",
|
|
2484
|
+
size: "default",
|
|
2485
|
+
className: cn("gap-1 pl-2.5", className),
|
|
2486
|
+
...props,
|
|
2487
|
+
children: [
|
|
2488
|
+
/* @__PURE__ */ jsx30(ChevronLeft, { className: "h-4 w-4" }),
|
|
2489
|
+
/* @__PURE__ */ jsx30("span", { children: "Previous" })
|
|
2490
|
+
]
|
|
2491
|
+
}
|
|
2492
|
+
);
|
|
2493
|
+
PaginationPrevious.displayName = "PaginationPrevious";
|
|
2494
|
+
var PaginationNext = ({
|
|
2495
|
+
className,
|
|
2496
|
+
...props
|
|
2497
|
+
}) => /* @__PURE__ */ jsxs15(
|
|
2498
|
+
PaginationLink,
|
|
2499
|
+
{
|
|
2500
|
+
"aria-label": "Go to next page",
|
|
2501
|
+
size: "default",
|
|
2502
|
+
className: cn("gap-1 pr-2.5", className),
|
|
2503
|
+
...props,
|
|
2504
|
+
children: [
|
|
2505
|
+
/* @__PURE__ */ jsx30("span", { children: "Next" }),
|
|
2506
|
+
/* @__PURE__ */ jsx30(ChevronRight3, { className: "h-4 w-4" })
|
|
2507
|
+
]
|
|
2508
|
+
}
|
|
2509
|
+
);
|
|
2510
|
+
PaginationNext.displayName = "PaginationNext";
|
|
2511
|
+
var PaginationEllipsis = ({
|
|
2512
|
+
className,
|
|
2513
|
+
...props
|
|
2514
|
+
}) => /* @__PURE__ */ jsxs15(
|
|
2515
|
+
"span",
|
|
2516
|
+
{
|
|
2517
|
+
"aria-hidden": true,
|
|
2518
|
+
className: cn("flex h-9 w-9 items-center justify-center", className),
|
|
2519
|
+
...props,
|
|
2520
|
+
children: [
|
|
2521
|
+
/* @__PURE__ */ jsx30(MoreHorizontal2, { className: "h-4 w-4" }),
|
|
2522
|
+
/* @__PURE__ */ jsx30("span", { className: "sr-only", children: "More pages" })
|
|
2523
|
+
]
|
|
2524
|
+
}
|
|
2525
|
+
);
|
|
2526
|
+
PaginationEllipsis.displayName = "PaginationEllipsis";
|
|
2527
|
+
|
|
2528
|
+
// src/components/ui/select.tsx
|
|
2529
|
+
import * as React28 from "react";
|
|
2530
|
+
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
2531
|
+
import { Check as Check2, ChevronDown, ChevronUp } from "lucide-react";
|
|
2532
|
+
import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
2533
|
+
var Select = SelectPrimitive.Root;
|
|
2534
|
+
var SelectValue = SelectPrimitive.Value;
|
|
2535
|
+
var SelectTrigger = React28.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs16(
|
|
2536
|
+
SelectPrimitive.Trigger,
|
|
2537
|
+
{
|
|
2538
|
+
ref,
|
|
2539
|
+
className: cn(
|
|
2540
|
+
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
|
2541
|
+
className
|
|
2542
|
+
),
|
|
2543
|
+
...props,
|
|
2544
|
+
children: [
|
|
2545
|
+
children,
|
|
2546
|
+
/* @__PURE__ */ jsx31(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx31(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
|
|
2547
|
+
]
|
|
2548
|
+
}
|
|
2549
|
+
));
|
|
2550
|
+
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
2551
|
+
var SelectScrollUpButton = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
|
|
2552
|
+
SelectPrimitive.ScrollUpButton,
|
|
2553
|
+
{
|
|
2554
|
+
ref,
|
|
2555
|
+
className: cn(
|
|
2556
|
+
"flex cursor-default items-center justify-center py-1",
|
|
2557
|
+
className
|
|
2558
|
+
),
|
|
2559
|
+
...props,
|
|
2560
|
+
children: /* @__PURE__ */ jsx31(ChevronUp, { className: "h-4 w-4" })
|
|
2561
|
+
}
|
|
2562
|
+
));
|
|
2563
|
+
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
2564
|
+
var SelectScrollDownButton = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
|
|
2565
|
+
SelectPrimitive.ScrollDownButton,
|
|
2566
|
+
{
|
|
2567
|
+
ref,
|
|
2568
|
+
className: cn(
|
|
2569
|
+
"flex cursor-default items-center justify-center py-1",
|
|
2570
|
+
className
|
|
2571
|
+
),
|
|
2572
|
+
...props,
|
|
2573
|
+
children: /* @__PURE__ */ jsx31(ChevronDown, { className: "h-4 w-4" })
|
|
2574
|
+
}
|
|
2575
|
+
));
|
|
2576
|
+
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
|
|
2577
|
+
var SelectContent = React28.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx31(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs16(
|
|
2578
|
+
SelectPrimitive.Content,
|
|
2579
|
+
{
|
|
2580
|
+
ref,
|
|
2581
|
+
className: cn(
|
|
2582
|
+
"relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
|
|
2583
|
+
position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
|
2584
|
+
className
|
|
2585
|
+
),
|
|
2586
|
+
position,
|
|
2587
|
+
...props,
|
|
2588
|
+
children: [
|
|
2589
|
+
/* @__PURE__ */ jsx31(SelectScrollUpButton, {}),
|
|
2590
|
+
/* @__PURE__ */ jsx31(
|
|
2591
|
+
SelectPrimitive.Viewport,
|
|
2592
|
+
{
|
|
2593
|
+
className: cn(
|
|
2594
|
+
"p-1",
|
|
2595
|
+
position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
|
2596
|
+
),
|
|
2597
|
+
children
|
|
2598
|
+
}
|
|
2599
|
+
),
|
|
2600
|
+
/* @__PURE__ */ jsx31(SelectScrollDownButton, {})
|
|
2601
|
+
]
|
|
2602
|
+
}
|
|
2603
|
+
) }));
|
|
2604
|
+
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
2605
|
+
var SelectLabel = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
|
|
2606
|
+
SelectPrimitive.Label,
|
|
2607
|
+
{
|
|
2608
|
+
ref,
|
|
2609
|
+
className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
|
|
2610
|
+
...props
|
|
2611
|
+
}
|
|
2612
|
+
));
|
|
2613
|
+
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
2614
|
+
var SelectItem = React28.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs16(
|
|
2615
|
+
SelectPrimitive.Item,
|
|
2616
|
+
{
|
|
2617
|
+
ref,
|
|
2618
|
+
className: cn(
|
|
2619
|
+
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
2620
|
+
className
|
|
2621
|
+
),
|
|
2622
|
+
...props,
|
|
2623
|
+
children: [
|
|
2624
|
+
/* @__PURE__ */ jsx31("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx31(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx31(Check2, { className: "h-4 w-4" }) }) }),
|
|
2625
|
+
/* @__PURE__ */ jsx31(SelectPrimitive.ItemText, { children })
|
|
2626
|
+
]
|
|
2627
|
+
}
|
|
2628
|
+
));
|
|
2629
|
+
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
2630
|
+
var SelectSeparator = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
|
|
2631
|
+
SelectPrimitive.Separator,
|
|
2632
|
+
{
|
|
2633
|
+
ref,
|
|
2634
|
+
className: cn("-mx-1 my-1 h-px bg-muted", className),
|
|
2635
|
+
...props
|
|
2636
|
+
}
|
|
2637
|
+
));
|
|
2638
|
+
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
|
2639
|
+
|
|
2640
|
+
// src/components/easy/pagination.tsx
|
|
2641
|
+
import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
2642
|
+
function getItemRange(currentPage, pageSize, total) {
|
|
2643
|
+
const start = (currentPage - 1) * pageSize + 1;
|
|
2644
|
+
const end = Math.min(currentPage * pageSize, total);
|
|
2645
|
+
return { start, end };
|
|
2646
|
+
}
|
|
2647
|
+
function generatePageNumbers(currentPage, totalPages) {
|
|
2648
|
+
const pages = [];
|
|
2649
|
+
const maxVisible = 7;
|
|
2650
|
+
if (totalPages <= maxVisible) {
|
|
2651
|
+
for (let i = 1; i <= totalPages; i++) {
|
|
2652
|
+
pages.push(i);
|
|
2653
|
+
}
|
|
2654
|
+
} else {
|
|
2655
|
+
pages.push(1);
|
|
2656
|
+
if (currentPage <= 3) {
|
|
2657
|
+
for (let i = 2; i <= 5; i++) {
|
|
2658
|
+
pages.push(i);
|
|
2659
|
+
}
|
|
2660
|
+
pages.push("ellipsis");
|
|
2661
|
+
pages.push(totalPages);
|
|
2662
|
+
} else if (currentPage >= totalPages - 2) {
|
|
2663
|
+
pages.push("ellipsis");
|
|
2664
|
+
for (let i = totalPages - 4; i <= totalPages; i++) {
|
|
2665
|
+
pages.push(i);
|
|
2666
|
+
}
|
|
2667
|
+
} else {
|
|
2668
|
+
pages.push("ellipsis");
|
|
2669
|
+
pages.push(currentPage - 1);
|
|
2670
|
+
pages.push(currentPage);
|
|
2671
|
+
pages.push(currentPage + 1);
|
|
2672
|
+
pages.push("ellipsis");
|
|
2673
|
+
pages.push(totalPages);
|
|
2674
|
+
}
|
|
2675
|
+
}
|
|
2676
|
+
return pages;
|
|
2677
|
+
}
|
|
2678
|
+
var EasyPagination = React29.forwardRef(
|
|
2679
|
+
({
|
|
2680
|
+
total,
|
|
2681
|
+
currentPage,
|
|
2682
|
+
pageSize,
|
|
2683
|
+
pageSizeOptions = [10, 25, 50, 100],
|
|
2684
|
+
onPageChange,
|
|
2685
|
+
onPageSizeChange,
|
|
2686
|
+
labels = {},
|
|
2687
|
+
className
|
|
2688
|
+
}, ref) => {
|
|
2689
|
+
const [goToPageValue, setGoToPageValue] = React29.useState(currentPage.toString());
|
|
2690
|
+
const totalPages = Math.ceil(total / pageSize);
|
|
2691
|
+
const { start, end } = getItemRange(currentPage, pageSize, total);
|
|
2692
|
+
const pageNumbers = generatePageNumbers(currentPage, totalPages);
|
|
2693
|
+
const { perPage = "Her Sayfada", goToPage = "Sayfaya Git" } = labels;
|
|
2694
|
+
const handleGoToPage = (e) => {
|
|
2695
|
+
e.preventDefault();
|
|
2696
|
+
const page = parseInt(goToPageValue, 10);
|
|
2697
|
+
if (page >= 1 && page <= totalPages && page !== currentPage) {
|
|
2698
|
+
onPageChange?.(page);
|
|
2699
|
+
}
|
|
2700
|
+
};
|
|
2701
|
+
const handleInputChange = (e) => {
|
|
2702
|
+
const value = e.target.value;
|
|
2703
|
+
if (value === "") {
|
|
2704
|
+
setGoToPageValue("");
|
|
2705
|
+
return;
|
|
2706
|
+
}
|
|
2707
|
+
if (!/^\d+$/.test(value)) {
|
|
2708
|
+
return;
|
|
2709
|
+
}
|
|
2710
|
+
if (value.startsWith("0") && value.length > 1) {
|
|
2711
|
+
return;
|
|
2712
|
+
}
|
|
2713
|
+
if (value === "0") {
|
|
2714
|
+
return;
|
|
2715
|
+
}
|
|
2716
|
+
setGoToPageValue(value);
|
|
2717
|
+
};
|
|
2718
|
+
const handlePageSizeChange = (value) => {
|
|
2719
|
+
const newPageSize = parseInt(value, 10);
|
|
2720
|
+
onPageSizeChange?.(newPageSize);
|
|
2721
|
+
onPageChange?.(1);
|
|
2722
|
+
};
|
|
2723
|
+
React29.useEffect(() => {
|
|
2724
|
+
setGoToPageValue(currentPage.toString());
|
|
2725
|
+
}, [currentPage]);
|
|
2726
|
+
return /* @__PURE__ */ jsxs17(
|
|
2727
|
+
"div",
|
|
2728
|
+
{
|
|
2729
|
+
ref,
|
|
2730
|
+
className: cn("flex w-full items-center justify-between gap-4", className),
|
|
2731
|
+
children: [
|
|
2732
|
+
/* @__PURE__ */ jsxs17(
|
|
2733
|
+
EasyBody,
|
|
2734
|
+
{
|
|
2735
|
+
variant: "medium",
|
|
2736
|
+
className: "text-base font-medium text-[var(--ui-text-500)] whitespace-nowrap",
|
|
2737
|
+
children: [
|
|
2738
|
+
start,
|
|
2739
|
+
" - ",
|
|
2740
|
+
end,
|
|
2741
|
+
" / ",
|
|
2742
|
+
total
|
|
2743
|
+
]
|
|
2744
|
+
}
|
|
2745
|
+
),
|
|
2746
|
+
/* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-4", children: [
|
|
2747
|
+
/* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
|
|
2748
|
+
/* @__PURE__ */ jsx32(
|
|
2749
|
+
EasyBody,
|
|
2750
|
+
{
|
|
2751
|
+
variant: "medium",
|
|
2752
|
+
className: "text-[var(--ui-text-500)] whitespace-nowrap font-medium",
|
|
2753
|
+
children: perPage
|
|
2754
|
+
}
|
|
2755
|
+
),
|
|
2756
|
+
/* @__PURE__ */ jsxs17(Select, { value: pageSize.toString(), onValueChange: handlePageSizeChange, children: [
|
|
2757
|
+
/* @__PURE__ */ jsx32(SelectTrigger, { className: "h-8 w-[80px] border-[var(--ui-border-200)] bg-[var(--ui-background-0)] text-base font-medium text-[var(--ui-text-900)] rounded-sm px-3 focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-[0_0_0_1px_var(--ui-background-0),_0_0_0_2px_var(--ui-border-200)]", children: /* @__PURE__ */ jsx32(SelectValue, {}) }),
|
|
2758
|
+
/* @__PURE__ */ jsx32(SelectContent, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx32(SelectItem, { value: size.toString(), children: size }, size)) })
|
|
2759
|
+
] })
|
|
2760
|
+
] }),
|
|
2761
|
+
/* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
|
|
2762
|
+
/* @__PURE__ */ jsx32(
|
|
2763
|
+
EasyBody,
|
|
2764
|
+
{
|
|
2765
|
+
variant: "medium",
|
|
2766
|
+
className: "text-[var(--ui-text-500)] whitespace-nowrap font-medium",
|
|
2767
|
+
children: goToPage
|
|
2768
|
+
}
|
|
2769
|
+
),
|
|
2770
|
+
/* @__PURE__ */ jsx32("form", { onSubmit: handleGoToPage, className: "flex items-center gap-2", children: /* @__PURE__ */ jsx32(
|
|
2771
|
+
Input,
|
|
2772
|
+
{
|
|
2773
|
+
type: "text",
|
|
2774
|
+
inputMode: "numeric",
|
|
2775
|
+
value: goToPageValue,
|
|
2776
|
+
onChange: handleInputChange,
|
|
2777
|
+
className: "h-8 w-[50px] px-3 text-center text-base rounded-sm"
|
|
2778
|
+
}
|
|
2779
|
+
) })
|
|
2780
|
+
] }),
|
|
2781
|
+
/* @__PURE__ */ jsx32(Pagination, { children: /* @__PURE__ */ jsxs17(PaginationContent, { children: [
|
|
2782
|
+
/* @__PURE__ */ jsx32(PaginationItem, { children: /* @__PURE__ */ jsx32(
|
|
2783
|
+
EasyButton,
|
|
2784
|
+
{
|
|
2785
|
+
variant: "text",
|
|
2786
|
+
size: "small",
|
|
2787
|
+
onClick: () => onPageChange?.(currentPage - 1),
|
|
2788
|
+
disabled: currentPage === 1,
|
|
2789
|
+
className: "h-8 w-8 p-0 rounded-sm border border-[var(--ui-border-200)] bg-[var(--ui-background-200)] hover:bg-[var(--ui-background-100)] disabled:opacity-50",
|
|
2790
|
+
children: /* @__PURE__ */ jsx32(ChevronLeft2, { className: "h-4 w-4" })
|
|
2791
|
+
}
|
|
2792
|
+
) }),
|
|
2793
|
+
pageNumbers.map((page, index) => {
|
|
2794
|
+
if (page === "ellipsis") {
|
|
2795
|
+
return /* @__PURE__ */ jsx32(PaginationItem, { children: /* @__PURE__ */ jsx32(PaginationEllipsis, { className: "h-8 text-[var(--ui-text-600)]" }) }, `ellipsis-${index}`);
|
|
2796
|
+
}
|
|
2797
|
+
const isActive = page === currentPage;
|
|
2798
|
+
return /* @__PURE__ */ jsx32(PaginationItem, { children: /* @__PURE__ */ jsx32(
|
|
2799
|
+
EasyButton,
|
|
2800
|
+
{
|
|
2801
|
+
variant: isActive ? "primary" : "text",
|
|
2802
|
+
size: "small",
|
|
2803
|
+
onClick: () => onPageChange?.(page),
|
|
2804
|
+
className: cn(
|
|
2805
|
+
"h-8 min-w-8 px-3 rounded-sm font-medium transition-all",
|
|
2806
|
+
isActive ? "bg-[var(--ui-primary-500)] text-white hover:bg-[var(--ui-primary-700)]" : " text-[var(--ui-text-900)] hover:bg-[var(--ui-background-100)]"
|
|
2807
|
+
),
|
|
2808
|
+
children: page
|
|
2809
|
+
}
|
|
2810
|
+
) }, page);
|
|
2811
|
+
}),
|
|
2812
|
+
/* @__PURE__ */ jsx32(PaginationItem, { children: /* @__PURE__ */ jsx32(
|
|
2813
|
+
EasyButton,
|
|
2814
|
+
{
|
|
2815
|
+
variant: "text",
|
|
2816
|
+
size: "small",
|
|
2817
|
+
onClick: () => onPageChange?.(currentPage + 1),
|
|
2818
|
+
disabled: currentPage === totalPages,
|
|
2819
|
+
className: "h-8 w-8 p-0 rounded-sm border border-[var(--ui-border-200)] bg-[var(--ui-background-200)] hover:bg-[var(--ui-background-100)] disabled:opacity-50",
|
|
2820
|
+
children: /* @__PURE__ */ jsx32(ChevronRight4, { className: "h-4 w-4" })
|
|
2821
|
+
}
|
|
2822
|
+
) })
|
|
2823
|
+
] }) })
|
|
2824
|
+
] })
|
|
2825
|
+
]
|
|
2826
|
+
}
|
|
2827
|
+
);
|
|
2828
|
+
}
|
|
2829
|
+
);
|
|
2830
|
+
EasyPagination.displayName = "EasyPagination";
|
|
2831
|
+
|
|
2832
|
+
// src/components/easy/otp.tsx
|
|
2833
|
+
import * as React32 from "react";
|
|
2834
|
+
import { AlertCircle as AlertCircle6, Mail, Smartphone } from "lucide-react";
|
|
2835
|
+
|
|
2836
|
+
// src/components/ui/input-otp.tsx
|
|
2837
|
+
import * as React30 from "react";
|
|
2838
|
+
import { OTPInput, OTPInputContext } from "input-otp";
|
|
2839
|
+
import { Dot } from "lucide-react";
|
|
2840
|
+
import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
2841
|
+
var InputOTP = React30.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx33(
|
|
2842
|
+
OTPInput,
|
|
2843
|
+
{
|
|
2844
|
+
ref,
|
|
2845
|
+
containerClassName: cn(
|
|
2846
|
+
"flex items-center gap-2 has-[:disabled]:opacity-50",
|
|
2847
|
+
containerClassName
|
|
2848
|
+
),
|
|
2849
|
+
className: cn("disabled:cursor-not-allowed", className),
|
|
2850
|
+
...props
|
|
2851
|
+
}
|
|
2852
|
+
));
|
|
2853
|
+
InputOTP.displayName = "InputOTP";
|
|
2854
|
+
var InputOTPGroup = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx33("div", { ref, className: cn("flex items-center", className), ...props }));
|
|
2855
|
+
InputOTPGroup.displayName = "InputOTPGroup";
|
|
2856
|
+
var InputOTPSlot = React30.forwardRef(({ index, className, ...props }, ref) => {
|
|
2857
|
+
const inputOTPContext = React30.useContext(OTPInputContext);
|
|
2858
|
+
const slot = inputOTPContext.slots[index];
|
|
2859
|
+
const char = slot?.char ?? "";
|
|
2860
|
+
const hasFakeCaret = slot?.hasFakeCaret ?? false;
|
|
2861
|
+
const isActive = slot?.isActive ?? false;
|
|
2862
|
+
return /* @__PURE__ */ jsxs18(
|
|
2863
|
+
"div",
|
|
2864
|
+
{
|
|
2865
|
+
ref,
|
|
2866
|
+
className: cn(
|
|
2867
|
+
"relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
|
|
2868
|
+
isActive && "z-10 ring-2 ring-ring ring-offset-background",
|
|
2869
|
+
className
|
|
2870
|
+
),
|
|
2871
|
+
...props,
|
|
2872
|
+
children: [
|
|
2873
|
+
char,
|
|
2874
|
+
hasFakeCaret && /* @__PURE__ */ jsx33("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx33("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) })
|
|
2875
|
+
]
|
|
2876
|
+
}
|
|
2877
|
+
);
|
|
2878
|
+
});
|
|
2879
|
+
InputOTPSlot.displayName = "InputOTPSlot";
|
|
2880
|
+
var InputOTPSeparator = React30.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx33("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx33(Dot, {}) }));
|
|
2881
|
+
InputOTPSeparator.displayName = "InputOTPSeparator";
|
|
2882
|
+
|
|
2883
|
+
// src/components/ui/drawer.tsx
|
|
2884
|
+
import * as React31 from "react";
|
|
2885
|
+
import { Drawer as DrawerPrimitive } from "vaul";
|
|
2886
|
+
import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
2887
|
+
var Drawer = ({
|
|
2888
|
+
shouldScaleBackground = true,
|
|
2889
|
+
...props
|
|
2890
|
+
}) => /* @__PURE__ */ jsx34(
|
|
2891
|
+
DrawerPrimitive.Root,
|
|
2892
|
+
{
|
|
2893
|
+
shouldScaleBackground,
|
|
2894
|
+
...props
|
|
2895
|
+
}
|
|
2896
|
+
);
|
|
2897
|
+
Drawer.displayName = "Drawer";
|
|
2898
|
+
var DrawerTrigger = DrawerPrimitive.Trigger;
|
|
2899
|
+
var DrawerPortal = DrawerPrimitive.Portal;
|
|
2900
|
+
var DrawerClose = DrawerPrimitive.Close;
|
|
2901
|
+
var DrawerOverlay = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
|
|
2902
|
+
DrawerPrimitive.Overlay,
|
|
2903
|
+
{
|
|
2904
|
+
ref,
|
|
2905
|
+
className: cn("fixed inset-0 z-50 bg-black/90", className),
|
|
2906
|
+
...props
|
|
2907
|
+
}
|
|
2908
|
+
));
|
|
2909
|
+
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
|
|
2910
|
+
var DrawerContent = React31.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs19(DrawerPortal, { children: [
|
|
2911
|
+
/* @__PURE__ */ jsx34(DrawerOverlay, {}),
|
|
2912
|
+
/* @__PURE__ */ jsxs19(
|
|
2913
|
+
DrawerPrimitive.Content,
|
|
2914
|
+
{
|
|
2915
|
+
ref,
|
|
2916
|
+
className: cn(
|
|
2917
|
+
"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-[var(--ui-background-0)]",
|
|
2918
|
+
className
|
|
2919
|
+
),
|
|
2920
|
+
...props,
|
|
2921
|
+
children: [
|
|
2922
|
+
/* @__PURE__ */ jsx34("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }),
|
|
2923
|
+
children
|
|
2924
|
+
]
|
|
2925
|
+
}
|
|
2926
|
+
)
|
|
2927
|
+
] }));
|
|
2928
|
+
DrawerContent.displayName = "DrawerContent";
|
|
2929
|
+
var DrawerHeader = ({
|
|
2930
|
+
className,
|
|
2931
|
+
...props
|
|
2932
|
+
}) => /* @__PURE__ */ jsx34(
|
|
2933
|
+
"div",
|
|
2934
|
+
{
|
|
2935
|
+
className: cn("grid gap-1.5 p-4 text-center sm:text-left", className),
|
|
2936
|
+
...props
|
|
2937
|
+
}
|
|
2938
|
+
);
|
|
2939
|
+
DrawerHeader.displayName = "DrawerHeader";
|
|
2940
|
+
var DrawerFooter = ({
|
|
2941
|
+
className,
|
|
2942
|
+
...props
|
|
2943
|
+
}) => /* @__PURE__ */ jsx34(
|
|
2944
|
+
"div",
|
|
2945
|
+
{
|
|
2946
|
+
className: cn("mt-auto flex flex-col gap-2 p-4", className),
|
|
2947
|
+
...props
|
|
2948
|
+
}
|
|
2949
|
+
);
|
|
2950
|
+
DrawerFooter.displayName = "DrawerFooter";
|
|
2951
|
+
var DrawerTitle = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
|
|
2952
|
+
DrawerPrimitive.Title,
|
|
2953
|
+
{
|
|
2954
|
+
ref,
|
|
2955
|
+
className: cn(
|
|
2956
|
+
"text-lg font-semibold leading-none tracking-tight",
|
|
2957
|
+
className
|
|
2958
|
+
),
|
|
2959
|
+
...props
|
|
2960
|
+
}
|
|
2961
|
+
));
|
|
2962
|
+
DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
|
|
2963
|
+
var DrawerDescription = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
|
|
2964
|
+
DrawerPrimitive.Description,
|
|
2965
|
+
{
|
|
2966
|
+
ref,
|
|
2967
|
+
className: cn("text-sm text-muted-foreground", className),
|
|
2968
|
+
...props
|
|
2969
|
+
}
|
|
2970
|
+
));
|
|
2971
|
+
DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
|
|
2972
|
+
|
|
2973
|
+
// src/components/easy/otp.tsx
|
|
2974
|
+
import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
2975
|
+
var EasyOtp = React32.forwardRef(
|
|
2976
|
+
({
|
|
2977
|
+
value,
|
|
2978
|
+
onChange,
|
|
2979
|
+
length = 6,
|
|
2980
|
+
error,
|
|
2981
|
+
disabled = false,
|
|
2982
|
+
autoFocus = false,
|
|
2983
|
+
className,
|
|
2984
|
+
slotClassName
|
|
2985
|
+
}, ref) => {
|
|
2986
|
+
return /* @__PURE__ */ jsxs20("div", { ref, className: cn("flex flex-col items-center w-full", className), children: [
|
|
2987
|
+
/* @__PURE__ */ jsx35("div", { className: "w-full overflow-hidden relative", children: /* @__PURE__ */ jsx35(
|
|
2988
|
+
InputOTP,
|
|
2989
|
+
{
|
|
2990
|
+
maxLength: length,
|
|
2991
|
+
value,
|
|
2992
|
+
onChange,
|
|
2993
|
+
disabled,
|
|
2994
|
+
autoFocus,
|
|
2995
|
+
className: "gap-3",
|
|
2996
|
+
containerClassName: "w-full max-w-full overflow-hidden justify-center relative",
|
|
2997
|
+
children: /* @__PURE__ */ jsx35(InputOTPGroup, { className: "flex p-1 gap-3.5 justify-center", children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx35(
|
|
2998
|
+
InputOTPSlot,
|
|
2999
|
+
{
|
|
3000
|
+
index,
|
|
3001
|
+
className: cn(
|
|
3002
|
+
"h-11 md:h-[50px] lg:h-[60px] w-[35px] lg:w-[45px] rounded-[8px] border text-center",
|
|
3003
|
+
"text-[18px] leading-[28px] tracking-[-0.64px] font-semibold",
|
|
3004
|
+
"border-[var(--ui-border-200)]",
|
|
3005
|
+
"focus:border-[var(--ui-primary-500)]",
|
|
3006
|
+
"disabled:cursor-not-allowed disabled:opacity-60",
|
|
3007
|
+
error && "border-[var(--ui-danger-base)]",
|
|
3008
|
+
slotClassName
|
|
3009
|
+
)
|
|
3010
|
+
},
|
|
3011
|
+
index
|
|
3012
|
+
)) })
|
|
3013
|
+
}
|
|
3014
|
+
) }),
|
|
3015
|
+
error && /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1 mt-3", children: [
|
|
3016
|
+
/* @__PURE__ */ jsx35(AlertCircle6, { className: "size-4 text-[var(--ui-danger-base)]" }),
|
|
3017
|
+
/* @__PURE__ */ jsx35(EasyBody, { variant: "small", className: "text-[var(--ui-danger-base)]", children: error })
|
|
3018
|
+
] })
|
|
3019
|
+
] });
|
|
3020
|
+
}
|
|
3021
|
+
);
|
|
3022
|
+
EasyOtp.displayName = "EasyOtp";
|
|
3023
|
+
var formatPhoneNumber = (phone) => {
|
|
3024
|
+
if (phone.length >= 10) {
|
|
3025
|
+
const start = phone.slice(1, 4);
|
|
3026
|
+
const end = phone.slice(-2);
|
|
3027
|
+
return `+90 (${start}) *** ** ${end}`;
|
|
3028
|
+
}
|
|
3029
|
+
return phone;
|
|
3030
|
+
};
|
|
3031
|
+
var formatEmail = (emailAddress) => {
|
|
3032
|
+
const [localPart, domain] = emailAddress.split("@");
|
|
3033
|
+
if (localPart && domain) {
|
|
3034
|
+
const visibleStart = localPart.slice(0, 2);
|
|
3035
|
+
const visibleEnd = localPart.slice(-1);
|
|
3036
|
+
return `${visibleStart}***${visibleEnd}@${domain}`;
|
|
3037
|
+
}
|
|
3038
|
+
return emailAddress;
|
|
3039
|
+
};
|
|
3040
|
+
var EasyOtpModal = ({
|
|
3041
|
+
open,
|
|
3042
|
+
onOpenChange,
|
|
3043
|
+
phoneNumber,
|
|
3044
|
+
email,
|
|
3045
|
+
title,
|
|
3046
|
+
description,
|
|
3047
|
+
onVerify,
|
|
3048
|
+
onResend,
|
|
3049
|
+
onCancel,
|
|
3050
|
+
length = 6,
|
|
3051
|
+
resendCooldown = 180,
|
|
3052
|
+
className,
|
|
3053
|
+
contentClassName
|
|
3054
|
+
}) => {
|
|
3055
|
+
const [otpValue, setOtpValue] = React32.useState("");
|
|
3056
|
+
const [isVerifying, setIsVerifying] = React32.useState(false);
|
|
3057
|
+
const [isResending, setIsResending] = React32.useState(false);
|
|
3058
|
+
const [timeLeft, setTimeLeft] = React32.useState(resendCooldown);
|
|
3059
|
+
const [error, setError] = React32.useState(null);
|
|
3060
|
+
const isMobile = useIsMobile();
|
|
3061
|
+
const defaultTitle = email ? "E-posta Adresi Do\u011Frulama" : "Telefon Do\u011Frulama";
|
|
3062
|
+
const modalTitle = title || defaultTitle;
|
|
3063
|
+
React32.useEffect(() => {
|
|
3064
|
+
if (timeLeft > 0 && open) {
|
|
3065
|
+
const timer = setTimeout(() => setTimeLeft(timeLeft - 1), 1e3);
|
|
3066
|
+
return () => clearTimeout(timer);
|
|
3067
|
+
}
|
|
3068
|
+
}, [timeLeft, open]);
|
|
3069
|
+
React32.useEffect(() => {
|
|
3070
|
+
if (open) {
|
|
3071
|
+
setTimeLeft(resendCooldown);
|
|
3072
|
+
setOtpValue("");
|
|
3073
|
+
setError(null);
|
|
3074
|
+
}
|
|
3075
|
+
}, [open, resendCooldown]);
|
|
3076
|
+
const handleVerify = async () => {
|
|
3077
|
+
if (otpValue.length !== length) {
|
|
3078
|
+
setError(`L\xFCtfen ${length} haneli do\u011Frulama kodunu girin`);
|
|
3079
|
+
return;
|
|
3080
|
+
}
|
|
3081
|
+
setIsVerifying(true);
|
|
3082
|
+
setError(null);
|
|
3083
|
+
try {
|
|
3084
|
+
const result = await onVerify(otpValue);
|
|
3085
|
+
if (result.success) {
|
|
3086
|
+
onOpenChange(false);
|
|
3087
|
+
} else {
|
|
3088
|
+
setError(result.error || "Do\u011Frulama kodu hatal\u0131");
|
|
3089
|
+
}
|
|
3090
|
+
} catch (_err) {
|
|
3091
|
+
setError("Bir hata olu\u015Ftu, l\xFCtfen tekrar deneyin");
|
|
3092
|
+
} finally {
|
|
3093
|
+
setIsVerifying(false);
|
|
3094
|
+
}
|
|
3095
|
+
};
|
|
3096
|
+
const handleResend = async () => {
|
|
3097
|
+
setIsResending(true);
|
|
3098
|
+
setError(null);
|
|
3099
|
+
try {
|
|
3100
|
+
const result = await onResend();
|
|
3101
|
+
if (result.success) {
|
|
3102
|
+
setTimeLeft(resendCooldown);
|
|
3103
|
+
setOtpValue("");
|
|
3104
|
+
} else {
|
|
3105
|
+
setError(result.error || "Kod g\xF6nderilemedi");
|
|
3106
|
+
}
|
|
3107
|
+
} catch (_err) {
|
|
3108
|
+
setError("Bir hata olu\u015Ftu, l\xFCtfen tekrar deneyin");
|
|
3109
|
+
} finally {
|
|
3110
|
+
setIsResending(false);
|
|
3111
|
+
}
|
|
3112
|
+
};
|
|
3113
|
+
const handleCancel = () => {
|
|
3114
|
+
onCancel();
|
|
3115
|
+
onOpenChange(false);
|
|
3116
|
+
};
|
|
3117
|
+
const getDefaultDescription = () => {
|
|
3118
|
+
if (email) {
|
|
3119
|
+
return `${formatEmail(email)} adresine g\xF6nderdi\u011Fimiz ${length} haneli do\u011Frulama kodunu gir`;
|
|
3120
|
+
}
|
|
3121
|
+
if (phoneNumber) {
|
|
3122
|
+
return `${formatPhoneNumber(phoneNumber)} nolu cep telefonuna g\xF6nderdi\u011Fimiz ${length} haneli do\u011Frulama kodunu gir`;
|
|
3123
|
+
}
|
|
3124
|
+
return `G\xF6nderdi\u011Fimiz ${length} haneli do\u011Frulama kodunu gir`;
|
|
3125
|
+
};
|
|
3126
|
+
const canResend = timeLeft === 0 && !isResending;
|
|
3127
|
+
const isVerifyDisabled = otpValue.length !== length || isVerifying;
|
|
3128
|
+
const modalContent = /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center", children: [
|
|
3129
|
+
!isMobile && /* @__PURE__ */ jsx35("div", { className: "flex h-16 w-16 items-center justify-center rounded-full border-2 border-[var(--ui-border-200)] mb-3", children: email ? /* @__PURE__ */ jsx35(Mail, { className: "size-6 text-[var(--ui-text-900)]" }) : /* @__PURE__ */ jsx35(Smartphone, { className: "size-6 text-[var(--ui-text-900)]" }) }),
|
|
3130
|
+
/* @__PURE__ */ jsx35(EasyLabel, { variant: "large", className: "text-[var(--ui-primary-500)] mb-1", children: modalTitle }),
|
|
3131
|
+
/* @__PURE__ */ jsx35("div", { className: "text-center space-y-2", children: /* @__PURE__ */ jsx35(EasyBody, { variant: "small", className: "text-[var(--ui-text-500)] font-normal", children: description || getDefaultDescription() }) }),
|
|
3132
|
+
!isMobile && /* @__PURE__ */ jsx35(Separator, { className: "my-6" }),
|
|
3133
|
+
/* @__PURE__ */ jsx35("div", { className: "text-center mb-3", children: /* @__PURE__ */ jsxs20(EasyBody, { variant: "small", className: "text-[var(--ui-text-500)]", children: [
|
|
3134
|
+
"Kalan Zaman: ",
|
|
3135
|
+
/* @__PURE__ */ jsxs20("span", { className: "font-medium text-[var(--ui-text-900)]", children: [
|
|
3136
|
+
timeLeft,
|
|
3137
|
+
" Saniye"
|
|
3138
|
+
] })
|
|
3139
|
+
] }) }),
|
|
3140
|
+
/* @__PURE__ */ jsx35(
|
|
3141
|
+
EasyOtp,
|
|
3142
|
+
{
|
|
3143
|
+
value: otpValue,
|
|
3144
|
+
onChange: setOtpValue,
|
|
3145
|
+
length,
|
|
3146
|
+
error,
|
|
3147
|
+
autoFocus: true
|
|
3148
|
+
}
|
|
3149
|
+
),
|
|
3150
|
+
/* @__PURE__ */ jsx35("div", { className: "text-center mt-2", children: /* @__PURE__ */ jsxs20(EasyBody, { variant: "small", className: "text-[var(--ui-text-500)]", children: [
|
|
3151
|
+
"Kod gelmedi mi?",
|
|
3152
|
+
" ",
|
|
3153
|
+
/* @__PURE__ */ jsx35(
|
|
3154
|
+
"button",
|
|
3155
|
+
{
|
|
3156
|
+
type: "button",
|
|
3157
|
+
onClick: handleResend,
|
|
3158
|
+
disabled: !canResend,
|
|
3159
|
+
className: cn(
|
|
3160
|
+
"underline transition-colors",
|
|
3161
|
+
canResend ? "text-[var(--ui-primary-900)] hover:text-[var(--ui-primary-600)]" : "text-[var(--ui-text-400)] cursor-not-allowed"
|
|
3162
|
+
),
|
|
3163
|
+
children: isResending ? "G\xF6nderiliyor..." : "Tekrar G\xF6nder"
|
|
3164
|
+
}
|
|
3165
|
+
)
|
|
3166
|
+
] }) }),
|
|
3167
|
+
!isMobile && /* @__PURE__ */ jsx35(Separator, { className: "my-6" })
|
|
3168
|
+
] });
|
|
3169
|
+
const footer = /* @__PURE__ */ jsx35("div", { className: "flex flex-col gap-3 w-full", children: /* @__PURE__ */ jsxs20("div", { className: "flex flex-row gap-4 w-full", children: [
|
|
3170
|
+
/* @__PURE__ */ jsx35(
|
|
3171
|
+
EasyButton,
|
|
3172
|
+
{
|
|
3173
|
+
variant: "important",
|
|
3174
|
+
appearance: "stroke",
|
|
3175
|
+
onClick: handleCancel,
|
|
3176
|
+
disabled: isVerifying,
|
|
3177
|
+
className: "flex-1 lg:order-1 order-2",
|
|
3178
|
+
children: "Vazge\xE7"
|
|
3179
|
+
}
|
|
3180
|
+
),
|
|
3181
|
+
/* @__PURE__ */ jsx35(
|
|
3182
|
+
EasyButton,
|
|
3183
|
+
{
|
|
3184
|
+
variant: "primary",
|
|
3185
|
+
onClick: handleVerify,
|
|
3186
|
+
disabled: isVerifyDisabled,
|
|
3187
|
+
className: "flex-1 lg:order-2 order-1",
|
|
3188
|
+
children: isVerifying ? "Do\u011Frulan\u0131yor..." : "Kodu Onayla"
|
|
3189
|
+
}
|
|
3190
|
+
)
|
|
3191
|
+
] }) });
|
|
3192
|
+
if (isMobile) {
|
|
3193
|
+
return /* @__PURE__ */ jsx35(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsx35(DrawerContent, { className: "!rounded-t-[32px]", children: /* @__PURE__ */ jsxs20("div", { className: "!rounded-t-[32px] overflow-auto mb-[60px]", children: [
|
|
3194
|
+
/* @__PURE__ */ jsx35(DrawerHeader, { className: "text-left border-b border-[var(--ui-border-200)]", children: /* @__PURE__ */ jsx35("div", { className: "flex flex-row items-start justify-between", children: /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-start gap-2", children: [
|
|
3195
|
+
modalTitle && /* @__PURE__ */ jsx35(DrawerTitle, { className: "text-lg font-medium text-[var(--ui-text-900)]", children: modalTitle }),
|
|
3196
|
+
description && /* @__PURE__ */ jsx35(DrawerDescription, { className: "text-left", children: description || getDefaultDescription() })
|
|
3197
|
+
] }) }) }),
|
|
3198
|
+
/* @__PURE__ */ jsx35("div", { className: cn("mt-6 px-6 pt-6 pb-6", contentClassName), children: modalContent }),
|
|
3199
|
+
/* @__PURE__ */ jsx35(DrawerFooter, { className: "pt-0", children: footer })
|
|
3200
|
+
] }) }) });
|
|
3201
|
+
}
|
|
3202
|
+
return /* @__PURE__ */ jsx35(ShadcnDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs20(
|
|
3203
|
+
ShadcnDialogContent,
|
|
3204
|
+
{
|
|
3205
|
+
className: cn(
|
|
3206
|
+
"overflow-auto max-h-[calc(100%-40px)] sm:max-w-[400px] px-6 py-8 pb-4 lg:pb-8 gap-0 rounded-lg",
|
|
3207
|
+
"[&>button:last-child]:hidden",
|
|
3208
|
+
contentClassName
|
|
3209
|
+
),
|
|
3210
|
+
children: [
|
|
3211
|
+
/* @__PURE__ */ jsxs20(ShadcnDialogHeader, { className: "hidden", children: [
|
|
3212
|
+
/* @__PURE__ */ jsx35(ShadcnDialogTitle, { className: "sr-only", children: modalTitle }),
|
|
3213
|
+
/* @__PURE__ */ jsx35(ShadcnDialogDescription, { className: "sr-only", children: description || getDefaultDescription() })
|
|
3214
|
+
] }),
|
|
3215
|
+
/* @__PURE__ */ jsx35("div", { className, children: modalContent }),
|
|
3216
|
+
/* @__PURE__ */ jsx35("div", { className: "mt-0", children: footer })
|
|
3217
|
+
]
|
|
3218
|
+
}
|
|
3219
|
+
) });
|
|
3220
|
+
};
|
|
3221
|
+
EasyOtpModal.displayName = "EasyOtpModal";
|
|
3222
|
+
|
|
3223
|
+
// src/components/easy/select.tsx
|
|
3224
|
+
import * as React36 from "react";
|
|
3225
|
+
import { ChevronDown as ChevronDown2, Search as Search2, X as X3 } from "lucide-react";
|
|
3226
|
+
|
|
3227
|
+
// src/components/ui/command.tsx
|
|
3228
|
+
import * as React33 from "react";
|
|
3229
|
+
import { Command as CommandPrimitive } from "cmdk";
|
|
3230
|
+
import { Search } from "lucide-react";
|
|
3231
|
+
import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
3232
|
+
var Command = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
|
|
3233
|
+
CommandPrimitive,
|
|
3234
|
+
{
|
|
3235
|
+
ref,
|
|
3236
|
+
className: cn(
|
|
3237
|
+
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
|
|
3238
|
+
className
|
|
3239
|
+
),
|
|
3240
|
+
...props
|
|
3241
|
+
}
|
|
3242
|
+
));
|
|
3243
|
+
Command.displayName = CommandPrimitive.displayName;
|
|
3244
|
+
var CommandInput = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs21("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
|
|
3245
|
+
/* @__PURE__ */ jsx36(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
|
|
3246
|
+
/* @__PURE__ */ jsx36(
|
|
3247
|
+
CommandPrimitive.Input,
|
|
3248
|
+
{
|
|
3249
|
+
ref,
|
|
3250
|
+
className: cn(
|
|
3251
|
+
"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
|
|
3252
|
+
className
|
|
3253
|
+
),
|
|
3254
|
+
...props
|
|
3255
|
+
}
|
|
3256
|
+
)
|
|
3257
|
+
] }));
|
|
3258
|
+
CommandInput.displayName = CommandPrimitive.Input.displayName;
|
|
3259
|
+
var CommandList = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
|
|
3260
|
+
CommandPrimitive.List,
|
|
3261
|
+
{
|
|
3262
|
+
ref,
|
|
3263
|
+
className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
|
|
3264
|
+
...props
|
|
3265
|
+
}
|
|
3266
|
+
));
|
|
3267
|
+
CommandList.displayName = CommandPrimitive.List.displayName;
|
|
3268
|
+
var CommandEmpty = React33.forwardRef((props, ref) => /* @__PURE__ */ jsx36(
|
|
3269
|
+
CommandPrimitive.Empty,
|
|
3270
|
+
{
|
|
3271
|
+
ref,
|
|
3272
|
+
className: "py-6 text-center text-sm",
|
|
3273
|
+
...props
|
|
3274
|
+
}
|
|
3275
|
+
));
|
|
3276
|
+
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
|
|
3277
|
+
var CommandGroup = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
|
|
3278
|
+
CommandPrimitive.Group,
|
|
3279
|
+
{
|
|
3280
|
+
ref,
|
|
3281
|
+
className: cn(
|
|
3282
|
+
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
|
|
3283
|
+
className
|
|
3284
|
+
),
|
|
3285
|
+
...props
|
|
3286
|
+
}
|
|
3287
|
+
));
|
|
3288
|
+
CommandGroup.displayName = CommandPrimitive.Group.displayName;
|
|
3289
|
+
var CommandSeparator = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
|
|
3290
|
+
CommandPrimitive.Separator,
|
|
3291
|
+
{
|
|
3292
|
+
ref,
|
|
3293
|
+
className: cn("-mx-1 h-px bg-border", className),
|
|
3294
|
+
...props
|
|
3295
|
+
}
|
|
3296
|
+
));
|
|
3297
|
+
CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
|
|
3298
|
+
var CommandItem = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
|
|
3299
|
+
CommandPrimitive.Item,
|
|
3300
|
+
{
|
|
3301
|
+
ref,
|
|
3302
|
+
className: cn(
|
|
3303
|
+
"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
|
3304
|
+
className
|
|
3305
|
+
),
|
|
3306
|
+
...props
|
|
3307
|
+
}
|
|
3308
|
+
));
|
|
3309
|
+
CommandItem.displayName = CommandPrimitive.Item.displayName;
|
|
3310
|
+
var CommandShortcut = ({
|
|
3311
|
+
className,
|
|
3312
|
+
...props
|
|
3313
|
+
}) => {
|
|
3314
|
+
return /* @__PURE__ */ jsx36(
|
|
3315
|
+
"span",
|
|
3316
|
+
{
|
|
3317
|
+
className: cn(
|
|
3318
|
+
"ml-auto text-xs tracking-widest text-muted-foreground",
|
|
3319
|
+
className
|
|
3320
|
+
),
|
|
3321
|
+
...props
|
|
3322
|
+
}
|
|
3323
|
+
);
|
|
3324
|
+
};
|
|
3325
|
+
CommandShortcut.displayName = "CommandShortcut";
|
|
3326
|
+
|
|
3327
|
+
// src/components/ui/popover.tsx
|
|
3328
|
+
import * as React34 from "react";
|
|
3329
|
+
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
3330
|
+
import { jsx as jsx37 } from "react/jsx-runtime";
|
|
3331
|
+
var Popover = PopoverPrimitive.Root;
|
|
3332
|
+
var PopoverTrigger = PopoverPrimitive.Trigger;
|
|
3333
|
+
var PopoverContent = React34.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx37(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx37(
|
|
3334
|
+
PopoverPrimitive.Content,
|
|
3335
|
+
{
|
|
3336
|
+
ref,
|
|
3337
|
+
align,
|
|
3338
|
+
sideOffset,
|
|
3339
|
+
className: cn(
|
|
3340
|
+
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
3341
|
+
className
|
|
3342
|
+
),
|
|
3343
|
+
...props
|
|
3344
|
+
}
|
|
3345
|
+
) }));
|
|
3346
|
+
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
|
3347
|
+
|
|
3348
|
+
// src/components/ui/scroll-area.tsx
|
|
3349
|
+
import * as React35 from "react";
|
|
3350
|
+
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
|
|
3351
|
+
import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
3352
|
+
var ScrollArea = React35.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs22(
|
|
3353
|
+
ScrollAreaPrimitive.Root,
|
|
3354
|
+
{
|
|
3355
|
+
ref,
|
|
3356
|
+
className: cn("relative overflow-hidden", className),
|
|
3357
|
+
...props,
|
|
3358
|
+
children: [
|
|
3359
|
+
/* @__PURE__ */ jsx38(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
|
|
3360
|
+
/* @__PURE__ */ jsx38(ScrollBar, {}),
|
|
3361
|
+
/* @__PURE__ */ jsx38(ScrollAreaPrimitive.Corner, {})
|
|
3362
|
+
]
|
|
3363
|
+
}
|
|
3364
|
+
));
|
|
3365
|
+
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
|
|
3366
|
+
var ScrollBar = React35.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx38(
|
|
3367
|
+
ScrollAreaPrimitive.ScrollAreaScrollbar,
|
|
3368
|
+
{
|
|
3369
|
+
ref,
|
|
3370
|
+
orientation,
|
|
3371
|
+
className: cn(
|
|
3372
|
+
"flex touch-none select-none transition-colors",
|
|
3373
|
+
orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
|
|
3374
|
+
orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
|
|
3375
|
+
className
|
|
3376
|
+
),
|
|
3377
|
+
...props,
|
|
3378
|
+
children: /* @__PURE__ */ jsx38(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
|
|
3379
|
+
}
|
|
3380
|
+
));
|
|
3381
|
+
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
|
|
3382
|
+
|
|
3383
|
+
// src/components/easy/select.tsx
|
|
3384
|
+
import { Fragment, jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
3385
|
+
var EasySelect = React36.forwardRef(
|
|
3386
|
+
({
|
|
3387
|
+
label,
|
|
3388
|
+
bottomSheetLabel,
|
|
3389
|
+
helperText,
|
|
3390
|
+
errorText,
|
|
3391
|
+
placeholder = "Se\xE7iniz...",
|
|
3392
|
+
searchPlaceholder = "Ara...",
|
|
3393
|
+
emptyMessage = "Sonu\xE7 bulunamad\u0131",
|
|
3394
|
+
options,
|
|
3395
|
+
value,
|
|
3396
|
+
onValueChange,
|
|
3397
|
+
disabled = false,
|
|
3398
|
+
className,
|
|
3399
|
+
id,
|
|
3400
|
+
name,
|
|
3401
|
+
...props
|
|
3402
|
+
}, ref) => {
|
|
3403
|
+
const [open, setOpen] = React36.useState(false);
|
|
3404
|
+
const [searchValue, setSearchValue] = React36.useState("");
|
|
3405
|
+
const isMobile = useIsMobile();
|
|
3406
|
+
const selectedOption = options.find((option) => option.value === value);
|
|
3407
|
+
const filteredOptions = React36.useMemo(
|
|
3408
|
+
() => options.filter(
|
|
3409
|
+
(option) => option.label.toLocaleLowerCase("tr").includes(searchValue.toLocaleLowerCase("tr"))
|
|
3410
|
+
),
|
|
3411
|
+
[options, searchValue]
|
|
3412
|
+
);
|
|
3413
|
+
const handleSelect = (selectedValue) => {
|
|
3414
|
+
if (selectedValue === value) {
|
|
3415
|
+
onValueChange?.("");
|
|
3416
|
+
} else {
|
|
3417
|
+
onValueChange?.(selectedValue);
|
|
3418
|
+
}
|
|
3419
|
+
setOpen(false);
|
|
3420
|
+
setSearchValue("");
|
|
3421
|
+
};
|
|
3422
|
+
const triggerClassName = cn(
|
|
3423
|
+
"flex h-12 w-full items-center justify-between rounded-lg border px-4 py-3 text-base",
|
|
3424
|
+
"bg-[var(--ui-background-0)] text-[var(--ui-text-900)]",
|
|
3425
|
+
"focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:shadow-[0_0_0_1px_var(--ui-background-0),_0_0_0_2px_var(--ui-border-200)]",
|
|
3426
|
+
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
3427
|
+
"hover:bg-[var(--ui-background-0)]",
|
|
3428
|
+
errorText && "border-[var(--ui-danger-base)]",
|
|
3429
|
+
!value && "text-[var(--ui-text-400)]",
|
|
3430
|
+
className
|
|
3431
|
+
);
|
|
3432
|
+
const content = /* @__PURE__ */ jsxs23(Fragment, { children: [
|
|
3433
|
+
/* @__PURE__ */ jsxs23("div", { className: "relative mx-3 mt-3", children: [
|
|
3434
|
+
/* @__PURE__ */ jsx39(Search2, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
|
|
3435
|
+
/* @__PURE__ */ jsx39(
|
|
3436
|
+
"input",
|
|
3437
|
+
{
|
|
3438
|
+
placeholder: searchPlaceholder,
|
|
3439
|
+
value: searchValue,
|
|
3440
|
+
onChange: (e) => setSearchValue(e.target.value),
|
|
3441
|
+
className: "flex h-10 w-full rounded-md border border-input bg-background px-10 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
3442
|
+
style: { fontSize: "16px" }
|
|
3443
|
+
}
|
|
3444
|
+
),
|
|
3445
|
+
searchValue && /* @__PURE__ */ jsx39(
|
|
3446
|
+
ShadcnButton,
|
|
3447
|
+
{
|
|
3448
|
+
variant: "link",
|
|
3449
|
+
size: "icon",
|
|
3450
|
+
className: "absolute right-2 top-1/2 h-5 w-5 -translate-y-1/2 rounded-full bg-transparent p-0 text-muted-foreground hover:bg-muted",
|
|
3451
|
+
onClick: () => setSearchValue(""),
|
|
3452
|
+
type: "button",
|
|
3453
|
+
children: /* @__PURE__ */ jsx39(X3, { className: "h-3 w-3" })
|
|
3454
|
+
}
|
|
3455
|
+
)
|
|
3456
|
+
] }),
|
|
3457
|
+
/* @__PURE__ */ jsxs23(CommandList, { className: "max-h-72 overflow-auto bg-[var(--ui-background-0)]", children: [
|
|
3458
|
+
/* @__PURE__ */ jsx39(CommandEmpty, { children: emptyMessage }),
|
|
3459
|
+
/* @__PURE__ */ jsx39(CommandGroup, { className: "px-3", children: filteredOptions.map((option, index) => {
|
|
3460
|
+
const isSelected = value === option.value;
|
|
3461
|
+
const isLast = index === filteredOptions.length - 1;
|
|
3462
|
+
return /* @__PURE__ */ jsxs23(
|
|
3463
|
+
CommandItem,
|
|
3464
|
+
{
|
|
3465
|
+
value: option.value,
|
|
3466
|
+
onSelect: () => handleSelect(option.value),
|
|
3467
|
+
disabled: option.disabled,
|
|
3468
|
+
className: cn(
|
|
3469
|
+
// 12px dikey, ~12px yatay padding
|
|
3470
|
+
"flex cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm",
|
|
3471
|
+
"data-[selected=true]:bg-[var(--ui-background-0)] data-[selected=true]:text-[var(--ui-text-900)]",
|
|
3472
|
+
"hover:bg-[var(--ui-background-0)]",
|
|
3473
|
+
!isLast && "border-b border-[var(--ui-border)]"
|
|
3474
|
+
),
|
|
3475
|
+
children: [
|
|
3476
|
+
/* @__PURE__ */ jsx39(
|
|
3477
|
+
"span",
|
|
3478
|
+
{
|
|
3479
|
+
className: cn(
|
|
3480
|
+
"flex h-4 w-4 items-center justify-center rounded-full",
|
|
3481
|
+
isSelected ? "bg-[var(--ui-primary-500)]" : "border border-[var(--ui-text-300)] bg-transparent"
|
|
3482
|
+
),
|
|
3483
|
+
children: isSelected && /* @__PURE__ */ jsx39("span", { className: "block h-2.5 w-2.5 rounded-full bg-white" })
|
|
3484
|
+
}
|
|
3485
|
+
),
|
|
3486
|
+
/* @__PURE__ */ jsx39(
|
|
3487
|
+
"span",
|
|
3488
|
+
{
|
|
3489
|
+
className: cn(
|
|
3490
|
+
"truncate",
|
|
3491
|
+
isSelected ? "font-semibold text-[var(--ui-text-900)]" : "font-normal text-[var(--ui-text-500)]"
|
|
3492
|
+
),
|
|
3493
|
+
children: option.label
|
|
3494
|
+
}
|
|
3495
|
+
)
|
|
3496
|
+
]
|
|
3497
|
+
},
|
|
3498
|
+
option.value
|
|
3499
|
+
);
|
|
3500
|
+
}) })
|
|
3501
|
+
] })
|
|
3502
|
+
] });
|
|
3503
|
+
return /* @__PURE__ */ jsxs23("div", { className: "flex w-full flex-col gap-1.5", children: [
|
|
3504
|
+
label && /* @__PURE__ */ jsx39(
|
|
3505
|
+
EasyLabel,
|
|
3506
|
+
{
|
|
3507
|
+
as: "label",
|
|
3508
|
+
htmlFor: id,
|
|
3509
|
+
variant: "medium",
|
|
3510
|
+
className: "text-[var(--ui-text-900)]",
|
|
3511
|
+
children: label
|
|
3512
|
+
}
|
|
3513
|
+
),
|
|
3514
|
+
isMobile ? /* @__PURE__ */ jsxs23(Drawer, { open, onOpenChange: setOpen, children: [
|
|
3515
|
+
/* @__PURE__ */ jsx39(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsxs23(
|
|
3516
|
+
ShadcnButton,
|
|
3517
|
+
{
|
|
3518
|
+
ref,
|
|
3519
|
+
className: cn(triggerClassName, "hover:bg-[var(--ui-background-0)] hover:text-[var(--ui-text-900)]"),
|
|
3520
|
+
disabled,
|
|
3521
|
+
id,
|
|
3522
|
+
name,
|
|
3523
|
+
type: "button",
|
|
3524
|
+
...props,
|
|
3525
|
+
children: [
|
|
3526
|
+
/* @__PURE__ */ jsx39("span", { className: "truncate text-left", children: selectedOption ? selectedOption.label : placeholder }),
|
|
3527
|
+
/* @__PURE__ */ jsx39(ChevronDown2, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
|
|
3528
|
+
]
|
|
3529
|
+
}
|
|
3530
|
+
) }),
|
|
3531
|
+
/* @__PURE__ */ jsxs23(DrawerContent, { className: "max-h-[80vh] rounded-t-[32px]", children: [
|
|
3532
|
+
/* @__PURE__ */ jsx39(DrawerHeader, { className: "border-b", children: /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between", children: [
|
|
3533
|
+
/* @__PURE__ */ jsx39(DrawerTitle, { className: "text-lg font-semibold", children: bottomSheetLabel || "Se\xE7im Yap\u0131n" }),
|
|
3534
|
+
/* @__PURE__ */ jsx39(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx39(
|
|
3535
|
+
ShadcnButton,
|
|
3536
|
+
{
|
|
3537
|
+
variant: "link",
|
|
3538
|
+
size: "icon",
|
|
3539
|
+
className: "h-8 w-8 rounded-full p-0 text-muted-foreground hover:bg-muted",
|
|
3540
|
+
type: "button",
|
|
3541
|
+
children: /* @__PURE__ */ jsx39(X3, { className: "h-4 w-4" })
|
|
3542
|
+
}
|
|
3543
|
+
) })
|
|
3544
|
+
] }) }),
|
|
3545
|
+
/* @__PURE__ */ jsx39("div", { className: "flex-1 overflow-hidden px-6 pb-6 pt-2", children: /* @__PURE__ */ jsxs23("div", { className: "flex-col items-start gap-[10px]", children: [
|
|
3546
|
+
/* @__PURE__ */ jsxs23("div", { className: "relative my-4", children: [
|
|
3547
|
+
/* @__PURE__ */ jsx39(Search2, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
|
|
3548
|
+
/* @__PURE__ */ jsx39(
|
|
3549
|
+
"input",
|
|
3550
|
+
{
|
|
3551
|
+
placeholder: searchPlaceholder,
|
|
3552
|
+
value: searchValue,
|
|
3553
|
+
onChange: (e) => setSearchValue(e.target.value),
|
|
3554
|
+
className: "flex h-10 w-full rounded-md border border-input bg-background px-10 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
3555
|
+
style: { fontSize: "16px" }
|
|
3556
|
+
}
|
|
3557
|
+
),
|
|
3558
|
+
searchValue && /* @__PURE__ */ jsx39(
|
|
3559
|
+
ShadcnButton,
|
|
3560
|
+
{
|
|
3561
|
+
variant: "link",
|
|
3562
|
+
size: "icon",
|
|
3563
|
+
className: "absolute right-2 top-1/2 h-5 w-5 -translate-y-1/2 rounded-full bg-transparent p-0 text-muted-foreground hover:bg-muted",
|
|
3564
|
+
onClick: () => setSearchValue(""),
|
|
3565
|
+
type: "button",
|
|
3566
|
+
children: /* @__PURE__ */ jsx39(X3, { className: "h-3 w-3" })
|
|
3567
|
+
}
|
|
3568
|
+
)
|
|
3569
|
+
] }),
|
|
3570
|
+
/* @__PURE__ */ jsx39(ScrollArea, { className: "h-[60vh] bg-[var(--ui-background-0)] rounded-[24px]", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx39("div", { className: "py-8 text-center text-muted-foreground text-sm", children: emptyMessage }) : /* @__PURE__ */ jsx39("div", { className: "space-y-0 pb-4", children: filteredOptions.map((option, index) => {
|
|
3571
|
+
const isSelected = value === option.value;
|
|
3572
|
+
const isLast = index === filteredOptions.length - 1;
|
|
3573
|
+
return /* @__PURE__ */ jsxs23(
|
|
3574
|
+
"button",
|
|
3575
|
+
{
|
|
3576
|
+
type: "button",
|
|
3577
|
+
onClick: () => handleSelect(option.value),
|
|
3578
|
+
disabled: option.disabled,
|
|
3579
|
+
className: cn(
|
|
3580
|
+
"flex w-full items-center gap-3 rounded-none px-3 py-3 text-left text-sm transition-colors",
|
|
3581
|
+
"hover:bg-[var(--ui-background-0)]",
|
|
3582
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
3583
|
+
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
3584
|
+
isSelected && "bg-[var(--ui-background-0)]",
|
|
3585
|
+
!isLast && "border-b border-[var(--ui-border-200)]"
|
|
3586
|
+
),
|
|
3587
|
+
children: [
|
|
3588
|
+
/* @__PURE__ */ jsx39(
|
|
3589
|
+
"span",
|
|
3590
|
+
{
|
|
3591
|
+
className: cn(
|
|
3592
|
+
"flex h-4 w-4 items-center justify-center rounded-full",
|
|
3593
|
+
isSelected ? "bg-[var(--ui-primary-500)]" : "border border-[var(--ui-text-300)] bg-transparent"
|
|
3594
|
+
),
|
|
3595
|
+
children: isSelected && // İçteki beyaz boşluk
|
|
3596
|
+
/* @__PURE__ */ jsx39("span", { className: "block h-2.5 w-2.5 rounded-full bg-white" })
|
|
3597
|
+
}
|
|
3598
|
+
),
|
|
3599
|
+
/* @__PURE__ */ jsx39(
|
|
3600
|
+
"span",
|
|
3601
|
+
{
|
|
3602
|
+
className: cn(
|
|
3603
|
+
"truncate pr-2 flex-1 text-left",
|
|
3604
|
+
isSelected ? "font-semibold text-[var(--ui-text-900)]" : "font-normal text-[var(--ui-text-500)]"
|
|
3605
|
+
),
|
|
3606
|
+
children: option.label
|
|
3607
|
+
}
|
|
3608
|
+
)
|
|
3609
|
+
]
|
|
3610
|
+
},
|
|
3611
|
+
option.value
|
|
3612
|
+
);
|
|
3613
|
+
}) }) })
|
|
3614
|
+
] }) })
|
|
3615
|
+
] })
|
|
3616
|
+
] }) : /* @__PURE__ */ jsxs23(Popover, { open, onOpenChange: setOpen, children: [
|
|
3617
|
+
/* @__PURE__ */ jsx39(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs23(
|
|
3618
|
+
ShadcnButton,
|
|
3619
|
+
{
|
|
3620
|
+
ref,
|
|
3621
|
+
className: triggerClassName,
|
|
3622
|
+
disabled,
|
|
3623
|
+
id,
|
|
3624
|
+
name,
|
|
3625
|
+
type: "button",
|
|
3626
|
+
...props,
|
|
3627
|
+
children: [
|
|
3628
|
+
/* @__PURE__ */ jsx39("span", { className: "truncate text-left", children: selectedOption ? selectedOption.label : placeholder }),
|
|
3629
|
+
/* @__PURE__ */ jsx39(
|
|
3630
|
+
ChevronDown2,
|
|
3631
|
+
{
|
|
3632
|
+
className: cn(
|
|
3633
|
+
"ml-2 h-4 w-4 shrink-0 opacity-50 transition-transform",
|
|
3634
|
+
open && "rotate-180"
|
|
3635
|
+
)
|
|
3636
|
+
}
|
|
3637
|
+
)
|
|
3638
|
+
]
|
|
3639
|
+
}
|
|
3640
|
+
) }),
|
|
3641
|
+
/* @__PURE__ */ jsx39(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] max-w-[var(--radix-popover-trigger-width)] p-0", align: "start", children: /* @__PURE__ */ jsx39(Command, { children: content }) })
|
|
3642
|
+
] }),
|
|
3643
|
+
errorText ? /* @__PURE__ */ jsx39("p", { className: "text-sm text-[var(--ui-danger-base)]", role: "alert", children: errorText }) : helperText ? /* @__PURE__ */ jsx39("p", { className: "text-sm text-[var(--ui-text-500)]", children: helperText }) : null
|
|
3644
|
+
] });
|
|
3645
|
+
}
|
|
3646
|
+
);
|
|
3647
|
+
EasySelect.displayName = "EasySelect";
|
|
3648
|
+
|
|
3649
|
+
// src/components/easy/date-picker.tsx
|
|
3650
|
+
import * as React38 from "react";
|
|
3651
|
+
import { Calendar as CalendarIcon, AlertCircle as AlertCircle7 } from "lucide-react";
|
|
3652
|
+
import { format } from "date-fns";
|
|
3653
|
+
|
|
3654
|
+
// src/components/ui/calendar.tsx
|
|
3655
|
+
import * as React37 from "react";
|
|
3656
|
+
import {
|
|
3657
|
+
ChevronDownIcon,
|
|
3658
|
+
ChevronLeftIcon,
|
|
3659
|
+
ChevronRightIcon
|
|
3660
|
+
} from "lucide-react";
|
|
3661
|
+
import { DayPicker, getDefaultClassNames } from "react-day-picker";
|
|
3662
|
+
import { jsx as jsx40 } from "react/jsx-runtime";
|
|
3663
|
+
function Calendar({
|
|
3664
|
+
className,
|
|
3665
|
+
classNames,
|
|
3666
|
+
showOutsideDays = true,
|
|
3667
|
+
captionLayout = "label",
|
|
3668
|
+
buttonVariant = "link",
|
|
3669
|
+
formatters,
|
|
3670
|
+
components,
|
|
3671
|
+
...props
|
|
3672
|
+
}) {
|
|
3673
|
+
const defaultClassNames = getDefaultClassNames();
|
|
3674
|
+
return /* @__PURE__ */ jsx40(
|
|
3675
|
+
DayPicker,
|
|
3676
|
+
{
|
|
3677
|
+
showOutsideDays,
|
|
3678
|
+
className: cn(
|
|
3679
|
+
"bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
|
|
3680
|
+
String.raw`rtl:**:[.rdp-button_next>svg]:rotate-180`,
|
|
3681
|
+
String.raw`rtl:**:[.rdp-button_previous>svg]:rotate-180`,
|
|
3682
|
+
className
|
|
3683
|
+
),
|
|
3684
|
+
captionLayout,
|
|
3685
|
+
formatters: {
|
|
3686
|
+
formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
|
|
3687
|
+
...formatters
|
|
3688
|
+
},
|
|
3689
|
+
classNames: {
|
|
3690
|
+
root: cn("w-fit", defaultClassNames.root),
|
|
3691
|
+
months: cn(
|
|
3692
|
+
"relative flex flex-col gap-4 md:flex-row",
|
|
3693
|
+
defaultClassNames.months
|
|
3694
|
+
),
|
|
3695
|
+
month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
|
|
3696
|
+
nav: cn(
|
|
3697
|
+
"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
|
|
3698
|
+
defaultClassNames.nav
|
|
3699
|
+
),
|
|
3700
|
+
button_previous: cn(
|
|
3701
|
+
shadcnButtonVariants({ variant: buttonVariant }),
|
|
3702
|
+
"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
|
|
3703
|
+
defaultClassNames.button_previous
|
|
3704
|
+
),
|
|
3705
|
+
button_next: cn(
|
|
3706
|
+
shadcnButtonVariants({ variant: buttonVariant }),
|
|
3707
|
+
"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
|
|
3708
|
+
defaultClassNames.button_next
|
|
3709
|
+
),
|
|
3710
|
+
month_caption: cn(
|
|
3711
|
+
"flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
|
|
3712
|
+
defaultClassNames.month_caption
|
|
3713
|
+
),
|
|
3714
|
+
dropdowns: cn(
|
|
3715
|
+
"flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
|
|
3716
|
+
defaultClassNames.dropdowns
|
|
3717
|
+
),
|
|
3718
|
+
dropdown_root: cn(
|
|
3719
|
+
"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
|
|
3720
|
+
defaultClassNames.dropdown_root
|
|
3721
|
+
),
|
|
3722
|
+
dropdown: cn(
|
|
3723
|
+
"bg-popover absolute inset-0 opacity-0",
|
|
3724
|
+
defaultClassNames.dropdown
|
|
3725
|
+
),
|
|
3726
|
+
caption_label: cn(
|
|
3727
|
+
"select-none font-medium",
|
|
3728
|
+
captionLayout === "label" ? "text-sm" : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
|
|
3729
|
+
defaultClassNames.caption_label
|
|
3730
|
+
),
|
|
3731
|
+
table: "w-full border-collapse",
|
|
3732
|
+
weekdays: cn("flex", defaultClassNames.weekdays),
|
|
3733
|
+
weekday: cn(
|
|
3734
|
+
"text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
|
|
3735
|
+
defaultClassNames.weekday
|
|
3736
|
+
),
|
|
3737
|
+
week: cn("mt-2 flex w-full", defaultClassNames.week),
|
|
3738
|
+
week_number_header: cn(
|
|
3739
|
+
"w-[--cell-size] select-none",
|
|
3740
|
+
defaultClassNames.week_number_header
|
|
3741
|
+
),
|
|
3742
|
+
week_number: cn(
|
|
3743
|
+
"text-muted-foreground select-none text-[0.8rem]",
|
|
3744
|
+
defaultClassNames.week_number
|
|
3745
|
+
),
|
|
3746
|
+
day: cn(
|
|
3747
|
+
"group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
|
|
3748
|
+
defaultClassNames.day
|
|
3749
|
+
),
|
|
3750
|
+
range_start: cn(
|
|
3751
|
+
"bg-accent rounded-l-md",
|
|
3752
|
+
defaultClassNames.range_start
|
|
3753
|
+
),
|
|
3754
|
+
range_middle: cn("rounded-none", defaultClassNames.range_middle),
|
|
3755
|
+
range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
|
|
3756
|
+
today: cn(
|
|
3757
|
+
"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
|
|
3758
|
+
defaultClassNames.today
|
|
3759
|
+
),
|
|
3760
|
+
outside: cn(
|
|
3761
|
+
"text-muted-foreground aria-selected:text-muted-foreground",
|
|
3762
|
+
defaultClassNames.outside
|
|
3763
|
+
),
|
|
3764
|
+
disabled: cn(
|
|
3765
|
+
"text-muted-foreground opacity-50",
|
|
3766
|
+
defaultClassNames.disabled
|
|
3767
|
+
),
|
|
3768
|
+
hidden: cn("invisible", defaultClassNames.hidden),
|
|
3769
|
+
...classNames
|
|
3770
|
+
},
|
|
3771
|
+
components: {
|
|
3772
|
+
Root: ({ className: className2, rootRef, ...props2 }) => {
|
|
3773
|
+
return /* @__PURE__ */ jsx40(
|
|
3774
|
+
"div",
|
|
3775
|
+
{
|
|
3776
|
+
"data-slot": "calendar",
|
|
3777
|
+
ref: rootRef,
|
|
3778
|
+
className: cn(className2),
|
|
3779
|
+
...props2
|
|
3780
|
+
}
|
|
3781
|
+
);
|
|
3782
|
+
},
|
|
3783
|
+
Chevron: ({ className: className2, orientation, ...props2 }) => {
|
|
3784
|
+
if (orientation === "left") {
|
|
3785
|
+
return /* @__PURE__ */ jsx40(ChevronLeftIcon, { className: cn("size-4", className2), ...props2 });
|
|
3786
|
+
}
|
|
3787
|
+
if (orientation === "right") {
|
|
3788
|
+
return /* @__PURE__ */ jsx40(
|
|
3789
|
+
ChevronRightIcon,
|
|
3790
|
+
{
|
|
3791
|
+
className: cn("size-4", className2),
|
|
3792
|
+
...props2
|
|
3793
|
+
}
|
|
3794
|
+
);
|
|
3795
|
+
}
|
|
3796
|
+
return /* @__PURE__ */ jsx40(ChevronDownIcon, { className: cn("size-4", className2), ...props2 });
|
|
3797
|
+
},
|
|
3798
|
+
DayButton: CalendarDayButton,
|
|
3799
|
+
WeekNumber: ({ children, ...props2 }) => {
|
|
3800
|
+
return /* @__PURE__ */ jsx40("td", { ...props2, children: /* @__PURE__ */ jsx40("div", { className: "flex size-[--cell-size] items-center justify-center text-center", children }) });
|
|
3801
|
+
},
|
|
3802
|
+
...components
|
|
3803
|
+
},
|
|
3804
|
+
...props
|
|
3805
|
+
}
|
|
3806
|
+
);
|
|
3807
|
+
}
|
|
3808
|
+
function CalendarDayButton({
|
|
3809
|
+
className,
|
|
3810
|
+
day,
|
|
3811
|
+
modifiers,
|
|
3812
|
+
...props
|
|
3813
|
+
}) {
|
|
3814
|
+
const defaultClassNames = getDefaultClassNames();
|
|
3815
|
+
const ref = React37.useRef(null);
|
|
3816
|
+
React37.useEffect(() => {
|
|
3817
|
+
if (modifiers.focused) ref.current?.focus();
|
|
3818
|
+
}, [modifiers.focused]);
|
|
3819
|
+
return /* @__PURE__ */ jsx40(
|
|
3820
|
+
ShadcnButton,
|
|
3821
|
+
{
|
|
3822
|
+
ref,
|
|
3823
|
+
variant: "link",
|
|
3824
|
+
size: "icon",
|
|
3825
|
+
"data-day": day.date.toLocaleDateString(),
|
|
3826
|
+
"data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
|
|
3827
|
+
"data-range-start": modifiers.range_start,
|
|
3828
|
+
"data-range-end": modifiers.range_end,
|
|
3829
|
+
"data-range-middle": modifiers.range_middle,
|
|
3830
|
+
className: cn(
|
|
3831
|
+
"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
|
|
3832
|
+
defaultClassNames.day,
|
|
3833
|
+
className
|
|
3834
|
+
),
|
|
3835
|
+
...props
|
|
3836
|
+
}
|
|
3837
|
+
);
|
|
3838
|
+
}
|
|
3839
|
+
|
|
3840
|
+
// src/components/easy/date-picker.tsx
|
|
3841
|
+
import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
3842
|
+
var EasyDatePicker = React38.forwardRef(
|
|
3843
|
+
({
|
|
3844
|
+
label,
|
|
3845
|
+
helperText,
|
|
3846
|
+
errorText,
|
|
3847
|
+
placeholder = "Tarih se\xE7",
|
|
3848
|
+
value,
|
|
3849
|
+
onChange,
|
|
3850
|
+
disabled,
|
|
3851
|
+
className,
|
|
3852
|
+
id,
|
|
3853
|
+
name,
|
|
3854
|
+
fromDate,
|
|
3855
|
+
toDate,
|
|
3856
|
+
...props
|
|
3857
|
+
}, ref) => {
|
|
3858
|
+
const generatedId = React38.useId();
|
|
3859
|
+
const inputId = id ?? generatedId;
|
|
3860
|
+
const helperId = helperText && !errorText ? `${inputId}-helper` : void 0;
|
|
3861
|
+
const errorId = errorText ? `${inputId}-error` : void 0;
|
|
3862
|
+
const [open, setOpen] = React38.useState(false);
|
|
3863
|
+
const [isFocused, setIsFocused] = React38.useState(false);
|
|
3864
|
+
const hasError = Boolean(errorText);
|
|
3865
|
+
const triggerClassName = cn(
|
|
3866
|
+
"flex h-12 w-full items-center justify-between rounded-[var(--ui-radius-lg)] border px-4 py-3 text-base font-medium",
|
|
3867
|
+
"bg-[var(--ui-background-0)] text-[var(--ui-text-900)]",
|
|
3868
|
+
"placeholder:text-[var(--ui-text-400)]",
|
|
3869
|
+
!isFocused && !hasError && "hover:bg-[var(--ui-background-100)]",
|
|
3870
|
+
isFocused && !hasError && "border-[var(--ui-border-900)]",
|
|
3871
|
+
hasError && "border-[var(--ui-danger-base)] focus-visible:ring-[var(--ui-danger-base)] focus-visible:ring-offset-0",
|
|
3872
|
+
!hasError && "focus-visible:shadow-[0_0_0_2px_var(--ui-background-0),_0_0_0_4px_var(--ui-border-200)]",
|
|
3873
|
+
hasError && "focus-visible:shadow-[0_0_0_2px_var(--ui-background-0),_0_0_0_4px_var(--ui-danger-light)]",
|
|
3874
|
+
"disabled:cursor-not-allowed disabled:bg-[var(--ui-background-100)] disabled:text-[var(--ui-text-400)]",
|
|
3875
|
+
className
|
|
3876
|
+
);
|
|
3877
|
+
return /* @__PURE__ */ jsxs24("div", { className: "flex w-full flex-col gap-1.5", children: [
|
|
3878
|
+
label && /* @__PURE__ */ jsx41(
|
|
3879
|
+
"label",
|
|
3880
|
+
{
|
|
3881
|
+
htmlFor: inputId,
|
|
3882
|
+
className: "text-base font-medium text-[var(--ui-text-900)]",
|
|
3883
|
+
children: label
|
|
3884
|
+
}
|
|
3885
|
+
),
|
|
3886
|
+
/* @__PURE__ */ jsxs24(
|
|
3887
|
+
Popover,
|
|
3888
|
+
{
|
|
3889
|
+
open,
|
|
3890
|
+
onOpenChange: (next) => {
|
|
3891
|
+
setOpen(next);
|
|
3892
|
+
setIsFocused(next);
|
|
3893
|
+
},
|
|
3894
|
+
children: [
|
|
3895
|
+
/* @__PURE__ */ jsx41(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs24(
|
|
3896
|
+
ShadcnButton,
|
|
3897
|
+
{
|
|
3898
|
+
ref,
|
|
3899
|
+
id: inputId,
|
|
3900
|
+
name: name ?? inputId,
|
|
3901
|
+
type: "button",
|
|
3902
|
+
variant: "link",
|
|
3903
|
+
className: triggerClassName,
|
|
3904
|
+
disabled,
|
|
3905
|
+
"aria-invalid": hasError,
|
|
3906
|
+
"aria-describedby": errorId ?? helperId,
|
|
3907
|
+
...props,
|
|
3908
|
+
children: [
|
|
3909
|
+
/* @__PURE__ */ jsx41(
|
|
3910
|
+
"span",
|
|
3911
|
+
{
|
|
3912
|
+
className: cn(
|
|
3913
|
+
"truncate text-left flex-1",
|
|
3914
|
+
!value && "text-[var(--ui-text-400)]"
|
|
3915
|
+
),
|
|
3916
|
+
children: value ? format(value, "dd.MM.yyyy") : placeholder
|
|
3917
|
+
}
|
|
3918
|
+
),
|
|
3919
|
+
/* @__PURE__ */ jsx41(CalendarIcon, { className: "ml-3 h-5 w-5 text-[var(--ui-icon-900)]" })
|
|
3920
|
+
]
|
|
3921
|
+
}
|
|
3922
|
+
) }),
|
|
3923
|
+
/* @__PURE__ */ jsx41(
|
|
3924
|
+
PopoverContent,
|
|
3925
|
+
{
|
|
3926
|
+
className: "w-auto p-0 bg-[var(--ui-background-0)] border border-[var(--ui-border-200)] rounded-[24px] shadow-md",
|
|
3927
|
+
align: "start",
|
|
3928
|
+
children: /* @__PURE__ */ jsx41(
|
|
3929
|
+
Calendar,
|
|
3930
|
+
{
|
|
3931
|
+
mode: "single",
|
|
3932
|
+
selected: value,
|
|
3933
|
+
onSelect: (date) => {
|
|
3934
|
+
onChange?.(date ?? void 0);
|
|
3935
|
+
if (date) setOpen(false);
|
|
3936
|
+
},
|
|
3937
|
+
fromDate,
|
|
3938
|
+
toDate,
|
|
3939
|
+
initialFocus: true
|
|
3940
|
+
}
|
|
3941
|
+
)
|
|
3942
|
+
}
|
|
3943
|
+
)
|
|
3944
|
+
]
|
|
3945
|
+
}
|
|
3946
|
+
),
|
|
3947
|
+
hasError ? /* @__PURE__ */ jsxs24(
|
|
3948
|
+
"p",
|
|
3949
|
+
{
|
|
3950
|
+
id: errorId,
|
|
3951
|
+
className: "flex items-center gap-1 text-sm text-[var(--ui-danger-base)]",
|
|
3952
|
+
children: [
|
|
3953
|
+
/* @__PURE__ */ jsx41(AlertCircle7, { className: "size-4" }),
|
|
3954
|
+
errorText
|
|
3955
|
+
]
|
|
3956
|
+
}
|
|
3957
|
+
) : helperText ? /* @__PURE__ */ jsx41("p", { id: helperId, className: "text-sm text-[var(--ui-text-500)]", children: helperText }) : null
|
|
3958
|
+
] });
|
|
3959
|
+
}
|
|
3960
|
+
);
|
|
3961
|
+
EasyDatePicker.displayName = "EasyDatePicker";
|
|
3962
|
+
|
|
3963
|
+
// src/hooks/use-easy-otp.ts
|
|
3964
|
+
import * as React39 from "react";
|
|
3965
|
+
var useEasyOtp = (options) => {
|
|
3966
|
+
const [open, setOpen] = React39.useState(false);
|
|
3967
|
+
return {
|
|
3968
|
+
open,
|
|
3969
|
+
setOpen,
|
|
3970
|
+
onOpenChange: setOpen,
|
|
3971
|
+
openOtpModal: () => setOpen(true),
|
|
3972
|
+
closeOtpModal: () => setOpen(false),
|
|
3973
|
+
toggleOtpModal: () => setOpen((prev) => !prev)
|
|
3974
|
+
};
|
|
3975
|
+
};
|
|
3976
|
+
export {
|
|
3977
|
+
EasyBody,
|
|
3978
|
+
EasyBreadcrumb,
|
|
3979
|
+
EasyButton,
|
|
3980
|
+
EasyCheckbox,
|
|
3981
|
+
EasyContainer,
|
|
3982
|
+
EasyDatePicker,
|
|
3983
|
+
EasyDisplay,
|
|
3984
|
+
EasyEmailInput,
|
|
3985
|
+
EasyErrorMessage,
|
|
3986
|
+
EasyHeading,
|
|
3987
|
+
EasyLabel,
|
|
3988
|
+
EasyMessageDialog,
|
|
3989
|
+
EasyOtp,
|
|
3990
|
+
EasyOtpModal,
|
|
3991
|
+
EasyPagination,
|
|
3992
|
+
EasyPasswordInput,
|
|
3993
|
+
EasyPhoneInput,
|
|
3994
|
+
EasySelect,
|
|
3995
|
+
EasySidebar,
|
|
3996
|
+
EasyTabs,
|
|
3997
|
+
EasyTabsContent,
|
|
3998
|
+
EasyTabsList,
|
|
3999
|
+
EasyTabsTrigger,
|
|
4000
|
+
EasyTextInput,
|
|
4001
|
+
EasyTypography,
|
|
4002
|
+
Input,
|
|
4003
|
+
ShadcnButton,
|
|
4004
|
+
ShadcnCheckbox,
|
|
4005
|
+
ShadcnInput,
|
|
4006
|
+
Tabs,
|
|
4007
|
+
TabsContent,
|
|
4008
|
+
TabsList,
|
|
4009
|
+
TabsTrigger,
|
|
4010
|
+
ThemeProvider,
|
|
4011
|
+
breakpoints,
|
|
4012
|
+
easyButtonVariants as buttonVariants,
|
|
4013
|
+
cn,
|
|
4014
|
+
colorPalette,
|
|
4015
|
+
containerVariants,
|
|
4016
|
+
designTokens,
|
|
4017
|
+
easyButtonVariants,
|
|
4018
|
+
elevations,
|
|
4019
|
+
formatEmail,
|
|
4020
|
+
formatPhoneNumber,
|
|
4021
|
+
formatPhoneNumberWithPattern,
|
|
4022
|
+
generateBreadcrumbItems,
|
|
4023
|
+
getTypographyClass,
|
|
4024
|
+
primitiveColors,
|
|
4025
|
+
radii,
|
|
4026
|
+
semanticColors,
|
|
4027
|
+
shadcnButtonVariants,
|
|
4028
|
+
spacingScale,
|
|
4029
|
+
typographyClasses,
|
|
4030
|
+
typographyScale,
|
|
4031
|
+
typographyTokens,
|
|
4032
|
+
useEasyOtp,
|
|
4033
|
+
useTheme
|
|
4034
|
+
};
|
|
4035
|
+
//# sourceMappingURL=index.js.map
|