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