@6thbridge/hexa 0.0.6 → 0.0.7

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.mjs CHANGED
@@ -1,1725 +1,2 @@
1
- // src/components/label/FormLabel.tsx
2
- import React2 from "react";
3
-
4
- // src/components/label/index.tsx
5
- import * as React from "react";
6
- import * as LabelPrimitive from "@radix-ui/react-label";
7
- import { cva } from "class-variance-authority";
8
-
9
- // src/utils/index.ts
10
- import { clsx } from "clsx";
11
- import { twMerge } from "tailwind-merge";
12
- function cn(...inputs) {
13
- return twMerge(clsx(inputs));
14
- }
15
-
16
- // src/components/label/index.tsx
17
- import { jsx } from "react/jsx-runtime";
18
- var labelVariants = cva(
19
- "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
20
- );
21
- var Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
22
- LabelPrimitive.Root,
23
- {
24
- ref,
25
- className: cn(labelVariants(), className),
26
- ...props
27
- }
28
- ));
29
- Label.displayName = LabelPrimitive.Root.displayName;
30
-
31
- // src/components/label/FormLabel.tsx
32
- import { jsx as jsx2, jsxs } from "react/jsx-runtime";
33
- var FormLabel = React2.forwardRef(({ className, children, showAsterisk, error, ...props }, ref) => {
34
- return /* @__PURE__ */ jsx2(
35
- Label,
36
- {
37
- ref,
38
- className: cn(error && "text-red-500", className),
39
- ...props,
40
- children: showAsterisk ? /* @__PURE__ */ jsxs("p", { children: [
41
- children,
42
- /* @__PURE__ */ jsx2("span", { className: "text-red-500", children: "*" })
43
- ] }) : children
44
- }
45
- );
46
- });
47
- FormLabel.displayName = "FormLabel";
48
-
49
- // src/components/loader/index.tsx
50
- import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
51
- var Loader = ({
52
- size = 16,
53
- colour = "primary"
54
- }) => {
55
- return /* @__PURE__ */ jsxs2(
56
- "svg",
57
- {
58
- className: "animate-spin",
59
- width: size,
60
- height: size,
61
- viewBox: "0 0 20 20",
62
- fill: "none",
63
- children: [
64
- /* @__PURE__ */ jsx3("circle", { cx: "10", cy: "10", r: "9.25", stroke: "transparent", strokeWidth: "1.5" }),
65
- /* @__PURE__ */ jsx3(
66
- "path",
67
- {
68
- d: "M10 0.595792C10 0.266746 10.267 -0.00185055 10.5954 0.0177417C11.9786 0.100242 13.3318 0.469461 14.5682 1.1044C15.9816 1.83021 17.2016 2.88235 18.1273 4.17366C19.0531 5.46496 19.6578 6.95826 19.8913 8.52984C20.1249 10.1014 19.9807 11.706 19.4705 13.2108C18.9604 14.7155 18.0991 16.077 16.9579 17.1825C15.8167 18.288 14.4285 19.1056 12.9084 19.5677C11.3882 20.0298 9.77982 20.123 8.21646 19.8397C6.84883 19.5918 5.55009 19.0619 4.40196 18.2863C4.12931 18.1021 4.08072 17.7265 4.28083 17.4653C4.48094 17.2041 4.85388 17.1564 5.12801 17.3384C6.12474 18.0001 7.24768 18.4531 8.42898 18.6672C9.80606 18.9168 11.2228 18.8347 12.5618 18.4276C13.9008 18.0206 15.1236 17.3004 16.1288 16.3266C17.134 15.3528 17.8927 14.1536 18.342 12.8282C18.7914 11.5027 18.9185 10.0893 18.7127 8.70502C18.507 7.32071 17.9743 6.00535 17.1589 4.86792C16.3435 3.73048 15.2688 2.80371 14.0238 2.16439C12.9559 1.61596 11.789 1.29259 10.5954 1.21173C10.2671 1.18949 10 0.92484 10 0.595792Z",
69
- fill: colour === "primary" ? "#ffffff" : "currentColor",
70
- className: "rounded"
71
- }
72
- )
73
- ]
74
- }
75
- );
76
- };
77
-
78
- // src/components/button/index.tsx
79
- import * as React3 from "react";
80
- import { Slot } from "@radix-ui/react-slot";
81
- import { cva as cva2 } from "class-variance-authority";
82
- import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
83
- var buttonVariants = cva2(
84
- "overflow-hidden isolate relative inline-flex h-fit items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background dark:ring-offset-transparent transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:!pointer-events-none",
85
- {
86
- variants: {
87
- variant: {
88
- primary: "border-primary-main bg-primary-main hover:bg-primary-main/70 disabled:bg-primary-main/70 text-white font-bold",
89
- danger: "border-red-600 bg-red-600 hover:bg-red-600/70 disabled:bg-red-600/70 text-white font-bold",
90
- neutral: "!border-0 bg-transparent text-primary-main hover:opacity-80 disabled:opacity-60",
91
- outlined: "border border-primary-main text-primary-main hover:opacity-80 disabled:opacity-60",
92
- "danger-outlined": "border border-red-600 text-red-600 hover:opacity-80 disabled:opacity-60",
93
- "light-outlined": "border-white text-white hover:opacity-80 disabled:opacity-60",
94
- "dark-text": "border-transparent bg-transparent hover:bg-opacity-70 disabled:bg-opacity-70 text-black font-medium",
95
- light: "border-white bg-white hover:bg-opacity-70 disabled:bg-opacity-70 text-primary-main font-semibold"
96
- },
97
- size: {
98
- // lg: "h-15 px-8 items-center",
99
- // sm: "h-10 px-3.5 items-center text-sm",
100
- default: "py-[0.625rem] px-[1.5rem] text-[0.875rem] leading-[1.25rem] font-medium rounded-lg",
101
- sm: "py-[0.375rem] px-[1rem] text-[0.75rem] leading-[1rem] font-medium rounded-lg",
102
- lg: "py-[0.75rem] px-[1.5rem] text-[1rem] leading-[1.5rem] font-medium rounded-lg",
103
- md: "h-12 py-1 px-5 items-center",
104
- "icon-sm": "h-[1.75rem] w-[1.75rem] flex justify-center items-center font-medium rounded-lg",
105
- icon: "h-[2.5rem] w-[2.75rem] flex justify-center items-center font-medium rounded-lg",
106
- "icon-lg": "h-[3rem] w-[3rem] flex justify-center items-center font-medium rounded-lg"
107
- }
108
- },
109
- defaultVariants: {
110
- variant: "primary",
111
- size: "default"
112
- }
113
- }
114
- );
115
- var Button = ({
116
- className,
117
- variant = "primary",
118
- size,
119
- asChild = false,
120
- isLoading = false,
121
- leftNode,
122
- rightNode,
123
- LoaderSize,
124
- ref,
125
- ...props
126
- }) => {
127
- const Component = asChild ? Slot : "button";
128
- const { children, disabled, ...rest } = props;
129
- const reference = React3.useRef(null);
130
- return /* @__PURE__ */ jsx4(
131
- Component,
132
- {
133
- className: cn(buttonVariants({ variant, size, className })),
134
- ref: reference || ref,
135
- disabled: disabled || isLoading,
136
- ...rest,
137
- children: /* @__PURE__ */ jsx4("div", { className: "flex font-medium justify-center items-center gap-2", children: isLoading ? /* @__PURE__ */ jsx4(Fragment, { children: /* @__PURE__ */ jsx4("span", { className: "mx-auto", children: /* @__PURE__ */ jsx4(Loader, { size: LoaderSize, colour: "secondary" }) }) }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
138
- leftNode,
139
- children,
140
- rightNode
141
- ] }) })
142
- }
143
- );
144
- };
145
- Button.displayName = "Button";
146
-
147
- // src/components/input/index.tsx
148
- import { cva as cva3 } from "class-variance-authority";
149
-
150
- // src/components/form/ErrorMessage.tsx
151
- import React4 from "react";
152
- import { jsx as jsx5 } from "react/jsx-runtime";
153
- var ErrorMessage = React4.forwardRef(({ className, children, error, ...props }, ref) => {
154
- const body = error ?? children;
155
- if (!body) {
156
- return null;
157
- }
158
- return /* @__PURE__ */ jsx5(
159
- "p",
160
- {
161
- ref,
162
- className: cn("text-xs font-normal text-[#F04248]", className),
163
- ...props,
164
- children: body
165
- }
166
- );
167
- });
168
- ErrorMessage.displayName = "ErrorMessage";
169
-
170
- // src/components/form/FormDescription.tsx
171
- import React5 from "react";
172
- import { jsx as jsx6 } from "react/jsx-runtime";
173
- var FormDescription = React5.forwardRef(({ className, ...props }, ref) => {
174
- return /* @__PURE__ */ jsx6(
175
- "p",
176
- {
177
- ref,
178
- className: cn("text-sm text-[#8E98A8", className),
179
- ...props
180
- }
181
- );
182
- });
183
- FormDescription.displayName = "FormDescription";
184
-
185
- // src/components/input/index.tsx
186
- import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
187
- var inputVariants = cva3(
188
- "!p-0 flex h-full w-full !border-transparent !bg-transparent text-base focus-visible:bg-transparent focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
189
- {
190
- variants: {
191
- status: {
192
- default: "placeholder:text-[#C4C4C4] dark:placeholder:text-[#9299A2]",
193
- error: "placeholder:text-red-500 text-red-500",
194
- loading: "placeholder:text-[#C4C4C4] dark:placeholder:text-[#9299A2]",
195
- prefilled: ""
196
- }
197
- },
198
- defaultVariants: {
199
- status: "default"
200
- }
201
- }
202
- );
203
- var BaseInnerInput = ({
204
- className,
205
- status,
206
- type,
207
- ref,
208
- ...props
209
- }) => {
210
- return /* @__PURE__ */ jsx7(
211
- "input",
212
- {
213
- type,
214
- className: cn(inputVariants({ status }), className),
215
- ref,
216
- ...props
217
- }
218
- );
219
- };
220
- BaseInnerInput.displayName = "BaseInnerInput";
221
- var inputContainerVariants = cva3(
222
- "flex relative h-10 w-full rounded-[4px] dark:!bg-transparent border transition px-3 py-2 text-base placeholder:text-[#79818C] focus-within:outline-0 focus-within:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:disabled:!border-[#9299A2]",
223
- {
224
- variants: {
225
- status: {
226
- default: "border-[#DEDEDE] dark:border-[#676767] bg-white text-[#191919] dark:!bg-transparent caret-text-primary focus-within:bg-white dark:focus-within:!bg-transparent dark:text-white focus-within:border-primary-main dark:focus-within:border-[#9299A2] dark:disabled:!border-[#9299A2]",
227
- error: "placeholder:text-red-500 bg-red-50 border-red-500 dark:!bg-status-error-bg-dark text-red-500 focus-within:bg-red-50 focus-within:border-red-500",
228
- loading: "",
229
- prefilled: "bg-[#F6F6F6] border-[#DEDEDE] dark:!bg-transparent caret-[#DEDEDE] focus-within:bg-[#F6F6F6] focus-within:border-[#DEDEDE] dark:!border-[#9299A2] dark:focus-within:border-[#9299A2]"
230
- }
231
- },
232
- defaultVariants: {
233
- status: "default"
234
- }
235
- }
236
- );
237
- var sideVariants = cva3(
238
- "top-0 flex justify-center items-center h-full min-w-[50px] max-w-[100px] dark:!bg-transparent transition px-3 py-2 text-base placeholder:text-[#79818C] focus-within:outline-0 focus-within:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:disabled:!border-[#9299A2]",
239
- {
240
- variants: {
241
- side: {
242
- left: "left-0 rounded-l-[8px] border-r",
243
- right: "right-0 rounded-r-[8px] border-l"
244
- },
245
- status: {
246
- default: "border-[#DEDEDE] dark:border-[#676767] bg-white text-[#191919] dark:!bg-transparent caret-primary-main focus-within:bg-white dark:focus-within:!bg-transparent dark:text-white focus-within:border-primary-main dark:focus-within:border-[#9299A2] dark:disabled:!border-[#9299A2]",
247
- error: "placeholder:text-red-500 bg-red-50 border-red-500 dark:!bg-red-50 text-red-500 focus-within:bg-red-50 focus-within:border-red-500",
248
- loading: "",
249
- prefilled: "bg-[#F6F6F6] border-[#DEDEDE] dark:!bg-transparent caret-[#DEDEDE] focus-within:bg-[#F6F6F6] focus-within:border-[#DEDEDE] dark:!border-[#9299A2] dark:focus-within:border-[#9299A2]"
250
- }
251
- },
252
- defaultVariants: {
253
- status: "default",
254
- side: "left"
255
- }
256
- }
257
- );
258
- var Input = ({
259
- className,
260
- status = "default",
261
- disabled,
262
- error,
263
- isLoading,
264
- sideNodeClassName,
265
- showAsterisk,
266
- label,
267
- description,
268
- ref,
269
- ...props
270
- }) => {
271
- let containerStatus = status;
272
- if (error) containerStatus = "error";
273
- if (isLoading) containerStatus = "loading";
274
- if (disabled) containerStatus = "prefilled";
275
- return /* @__PURE__ */ jsxs4("div", { className: "relative space-y-1", children: [
276
- /* @__PURE__ */ jsx7(FormLabel, { showAsterisk, error, children: label }),
277
- /* @__PURE__ */ jsxs4(
278
- "div",
279
- {
280
- className: cn(
281
- inputContainerVariants({ status: containerStatus }),
282
- props.leftNode || props.rightNode ? "p-0" : "",
283
- className
284
- ),
285
- children: [
286
- props.leftNode ? /* @__PURE__ */ jsx7(
287
- "div",
288
- {
289
- className: cn(
290
- sideVariants({
291
- status: containerStatus,
292
- side: "left"
293
- }),
294
- sideNodeClassName
295
- ),
296
- children: props.leftNode
297
- }
298
- ) : null,
299
- /* @__PURE__ */ jsx7(
300
- BaseInnerInput,
301
- {
302
- ref,
303
- disabled: isLoading || disabled,
304
- className: props.leftNode || props.rightNode ? "!px-3 !py-2" : "",
305
- ...props
306
- }
307
- ),
308
- props.rightNode ? /* @__PURE__ */ jsx7(
309
- "div",
310
- {
311
- className: cn(
312
- sideVariants({
313
- status: containerStatus,
314
- side: "right"
315
- }),
316
- sideNodeClassName
317
- ),
318
- children: props.rightNode
319
- }
320
- ) : null
321
- ]
322
- }
323
- ),
324
- /* @__PURE__ */ jsx7(FormDescription, { className: "text-gray-400 text-sm !font-normal", children: description }),
325
- /* @__PURE__ */ jsx7(ErrorMessage, { error })
326
- ] });
327
- };
328
- Input.displayName = "Input";
329
-
330
- // src/components/password-input/index.tsx
331
- import { useState } from "react";
332
-
333
- // src/components/password-input/icons/Eye.tsx
334
- import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
335
- var Eye = () => {
336
- return /* @__PURE__ */ jsxs5(
337
- "svg",
338
- {
339
- width: "18",
340
- height: "14",
341
- viewBox: "0 0 18 14",
342
- fill: "none",
343
- xmlns: "http://www.w3.org/2000/svg",
344
- children: [
345
- /* @__PURE__ */ jsx8(
346
- "path",
347
- {
348
- d: "M1.54639 7.26103C1.48389 7.09264 1.48389 6.90741 1.54639 6.73903C2.15517 5.26292 3.18853 4.00081 4.51547 3.1127C5.84241 2.22459 7.40317 1.75049 8.99989 1.75049C10.5966 1.75049 12.1574 2.22459 13.4843 3.1127C14.8113 4.00081 15.8446 5.26292 16.4534 6.73903C16.5159 6.90741 16.5159 7.09264 16.4534 7.26103C15.8446 8.73713 14.8113 9.99925 13.4843 10.8874C12.1574 11.7755 10.5966 12.2496 8.99989 12.2496C7.40317 12.2496 5.84241 11.7755 4.51547 10.8874C3.18853 9.99925 2.15517 8.73713 1.54639 7.26103Z",
349
- stroke: "#8E98A8",
350
- strokeWidth: "2",
351
- strokeLinecap: "round",
352
- strokeLinejoin: "round"
353
- }
354
- ),
355
- /* @__PURE__ */ jsx8(
356
- "path",
357
- {
358
- d: "M9 9.25C10.2426 9.25 11.25 8.24264 11.25 7C11.25 5.75736 10.2426 4.75 9 4.75C7.75736 4.75 6.75 5.75736 6.75 7C6.75 8.24264 7.75736 9.25 9 9.25Z",
359
- stroke: "#8E98A8",
360
- strokeWidth: "2",
361
- strokeLinecap: "round",
362
- strokeLinejoin: "round"
363
- }
364
- )
365
- ]
366
- }
367
- );
368
- };
369
-
370
- // src/components/password-input/icons/EyeOff.tsx
371
- import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
372
- var EyeOff = () => {
373
- return /* @__PURE__ */ jsxs6(
374
- "svg",
375
- {
376
- width: "18",
377
- height: "18",
378
- viewBox: "0 0 18 18",
379
- fill: "none",
380
- xmlns: "http://www.w3.org/2000/svg",
381
- children: [
382
- /* @__PURE__ */ jsx9(
383
- "path",
384
- {
385
- d: "M4.08759 12.69C3.26171 11.9072 2.61006 10.9591 2.17509 9.90752C2.10081 9.73454 2.0625 9.54826 2.0625 9.36001C2.0625 9.17177 2.10081 8.98549 2.17509 8.81252C2.75274 7.4073 3.72095 6.19704 4.96509 5.32502C6.14597 4.4998 7.55989 4.07405 9.00009 4.11002C10.0363 4.084 11.064 4.30239 12.0001 4.74752M13.9201 6.03752C14.7415 6.81964 15.3904 7.76486 15.8251 8.81252C15.8994 8.98549 15.9377 9.17177 15.9377 9.36001C15.9377 9.54826 15.8994 9.73454 15.8251 9.90752C15.2474 11.3127 14.2792 12.523 13.0351 13.395C11.8542 14.2202 10.4403 14.646 9.00009 14.61C7.9639 14.636 6.93616 14.4176 6.00009 13.9725",
386
- stroke: "#8E98A8",
387
- strokeWidth: "1.5",
388
- strokeLinecap: "round",
389
- strokeLinejoin: "round"
390
- }
391
- ),
392
- /* @__PURE__ */ jsx9(
393
- "path",
394
- {
395
- d: "M6.5325 10.2375C6.42732 9.95694 6.37395 9.65962 6.375 9.36C6.375 8.66381 6.65156 7.99613 7.14384 7.50384C7.63613 7.01156 8.30381 6.735 9 6.735C9.3 6.7335 9.597 6.7875 9.8775 6.8925M11.4675 8.4825C11.5725 8.763 11.6265 9.06 11.625 9.36C11.625 10.0562 11.3484 10.7239 10.8562 11.2162C10.3639 11.7084 9.69619 11.985 9 11.985C8.70038 11.986 8.40306 11.9327 8.1225 11.8275M2.25 15L14.25 3",
396
- stroke: "#8E98A8",
397
- strokeWidth: "1.5",
398
- strokeLinecap: "round",
399
- strokeLinejoin: "round"
400
- }
401
- )
402
- ]
403
- }
404
- );
405
- };
406
-
407
- // src/components/password-input/icons/Check.tsx
408
- import { jsx as jsx10 } from "react/jsx-runtime";
409
- var Check = () => {
410
- return /* @__PURE__ */ jsx10(
411
- "svg",
412
- {
413
- width: "12",
414
- height: "12",
415
- viewBox: "0 0 12 12",
416
- fill: "none",
417
- xmlns: "http://www.w3.org/2000/svg",
418
- children: /* @__PURE__ */ jsx10(
419
- "path",
420
- {
421
- d: "M8.89802 2.93408L9.70202 3.49808L6.21602 8.52608H5.41202L3.46802 5.80208L4.27202 5.05208L5.81402 6.49208L8.89802 2.93408Z",
422
- fill: "currentColor"
423
- }
424
- )
425
- }
426
- );
427
- };
428
-
429
- // src/components/password-input/icons/Fail.tsx
430
- import { jsx as jsx11 } from "react/jsx-runtime";
431
- var Fail = () => {
432
- return /* @__PURE__ */ jsx11(
433
- "svg",
434
- {
435
- width: "12",
436
- height: "12",
437
- viewBox: "0 0 12 12",
438
- fill: "none",
439
- xmlns: "http://www.w3.org/2000/svg",
440
- children: /* @__PURE__ */ jsx11(
441
- "path",
442
- {
443
- d: "M3.37891 8.62142L6.00041 5.99992L8.62191 8.62142M8.62191 3.37842L5.99991 5.99992L3.37891 3.37842",
444
- stroke: "currentColor",
445
- strokeWidth: "1.5",
446
- strokeLinecap: "round",
447
- strokeLinejoin: "round"
448
- }
449
- )
450
- }
451
- );
452
- };
453
-
454
- // src/components/password-input/index.tsx
455
- import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
456
- var validationOptions = [
457
- {
458
- label: "Uppercase",
459
- key: "uppercase",
460
- RegExp: /[A-Z]/,
461
- validated: false
462
- },
463
- {
464
- label: "Lowercase",
465
- key: "lowercase",
466
- RegExp: /[a-z]/,
467
- validated: false
468
- },
469
- {
470
- label: "Number",
471
- key: "number",
472
- RegExp: /\d/,
473
- validated: false
474
- },
475
- {
476
- label: "8 Characters",
477
- key: "eight-chars",
478
- RegExp: /.{8}/,
479
- validated: false
480
- }
481
- ];
482
- var PasswordInput = ({
483
- onValidate,
484
- onChange,
485
- ...props
486
- }) => {
487
- const [passwordVisible, setPasswordVisible] = useState(false);
488
- const [validatedValues, setValidatedValues] = useState(validationOptions);
489
- const validatePassword = (value) => {
490
- return validationOptions.map((option) => ({
491
- ...option,
492
- validated: option.RegExp.test(value)
493
- }));
494
- };
495
- const checkPasswordStrength = (value) => {
496
- const validatedOptions = validatePassword(value);
497
- const allValidated = validatedOptions.every((option) => option.validated);
498
- setValidatedValues(validatedOptions);
499
- return allValidated;
500
- };
501
- const handlePaswordInputChange = (e) => {
502
- if (onChange) onChange(e);
503
- const value = e?.target?.value;
504
- const validated = checkPasswordStrength(value);
505
- if (onValidate) onValidate(validated, value);
506
- };
507
- return /* @__PURE__ */ jsx12(
508
- Input,
509
- {
510
- sideNodeClassName: "!border-l-0",
511
- rightNode: passwordVisible ? /* @__PURE__ */ jsx12(
512
- "button",
513
- {
514
- type: "button",
515
- onClick: () => setPasswordVisible((val) => !val),
516
- children: /* @__PURE__ */ jsx12(Eye, {})
517
- }
518
- ) : /* @__PURE__ */ jsx12(
519
- "button",
520
- {
521
- type: "button",
522
- onClick: () => setPasswordVisible((val) => !val),
523
- children: /* @__PURE__ */ jsx12(EyeOff, {})
524
- }
525
- ),
526
- type: passwordVisible ? "text" : "password",
527
- onChange: handlePaswordInputChange,
528
- description: /* @__PURE__ */ jsx12("div", { className: "flex items-center gap-2", children: validatedValues?.map((value) => /* @__PURE__ */ jsxs7(
529
- "div",
530
- {
531
- className: cn("text-xs flex items-center gap-0.5", {
532
- "text-[#62C554]": value?.validated,
533
- "text-[#8E98A8]": !value?.validated
534
- }),
535
- children: [
536
- /* @__PURE__ */ jsx12("span", { className: "", children: value?.validated ? /* @__PURE__ */ jsx12(Check, {}) : /* @__PURE__ */ jsx12(Fail, {}) }),
537
- /* @__PURE__ */ jsx12("span", { className: "", children: value?.label })
538
- ]
539
- },
540
- value?.key
541
- )) }),
542
- ...props
543
- }
544
- );
545
- };
546
- PasswordInput.displayName = "PasswordInput";
547
-
548
- // src/components/textarea/index.tsx
549
- import { cva as cva4 } from "class-variance-authority";
550
- import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
551
- var textareaContainerVariants = cva4(
552
- "flex relative min-h-[80px] w-full rounded-[8px] border transition px-3 py-2 text-base placeholder:text-[#79818C] focus-within:outline-0 focus-within:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
553
- {
554
- variants: {
555
- status: {
556
- default: "border-[#D7D7D7] dark:border-[#676767] bg-white text-[#191919] dark:!bg-transparent caret-primary-main focus-within:bg-white dark:focus-within:!bg-transparent dark:text-white focus-within:border-primary-main dark:focus-within:border-[#9299A2] dark:border-[#9299A2] dark:disabled:!border-[#9299A2]",
557
- error: "placeholder:text-status-error-fill bg-status-error-bg border-status-error-fill dark:!bg-status-error-bg-dark text-status-error-fill focus-within:bg-status-error-bg focus-within:border-status-error-fill",
558
- loading: "placeholder:text-[#C4C4C4]",
559
- prefilled: "resize-none bg-[#F6F6F6] border-[#D7D7D7] dark:!bg-transparent caret-[#D7D7D7] focus-within:bg-[#F6F6F6] focus-within:border-[#D7D7D7] dark:!border-[#9299A2] dark:focus-within:border-[#9299A2]"
560
- }
561
- },
562
- defaultVariants: {
563
- status: "default"
564
- }
565
- }
566
- );
567
- var Textarea = ({
568
- className,
569
- status = "default",
570
- disabled,
571
- error,
572
- isLoading,
573
- showAsterisk,
574
- label,
575
- description,
576
- ...props
577
- }) => {
578
- let containerStatus = status;
579
- if (error) containerStatus = "error";
580
- if (isLoading) containerStatus = "loading";
581
- if (disabled) containerStatus = "prefilled";
582
- return /* @__PURE__ */ jsxs8("div", { className: "relative space-y-1", children: [
583
- /* @__PURE__ */ jsx13(FormLabel, { showAsterisk, error, children: label }),
584
- /* @__PURE__ */ jsx13(
585
- "textarea",
586
- {
587
- className: cn(
588
- "min-h-[80px]",
589
- inputContainerVariants({ status: containerStatus }),
590
- className
591
- ),
592
- disabled: isLoading || disabled,
593
- ...props
594
- }
595
- ),
596
- /* @__PURE__ */ jsx13(FormDescription, { className: "text-gray-400 text-sm !font-normal", children: description }),
597
- /* @__PURE__ */ jsx13(ErrorMessage, { error })
598
- ] });
599
- };
600
- Textarea.displayName = "Textarea";
601
-
602
- // src/components/searcheable/index.tsx
603
- import * as React10 from "react";
604
-
605
- // src/components/command/index.tsx
606
- import * as React7 from "react";
607
- import { Command as CommandPrimitive } from "cmdk";
608
- import { Search } from "lucide-react";
609
-
610
- // src/components/dialog/index.tsx
611
- import * as React6 from "react";
612
- import * as DialogPrimitive from "@radix-ui/react-dialog";
613
-
614
- // src/components/dialog/icon/CloseIcon.tsx
615
- import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
616
- var CloseIcon = () => {
617
- return /* @__PURE__ */ jsxs9(
618
- "svg",
619
- {
620
- xmlns: "http://www.w3.org/2000/svg",
621
- width: "24",
622
- height: "24",
623
- viewBox: "0 0 24 24",
624
- fill: "none",
625
- stroke: "currentColor",
626
- strokeWidth: "2",
627
- strokeLinecap: "round",
628
- strokeLinejoin: "round",
629
- className: "lucide lucide-x",
630
- children: [
631
- /* @__PURE__ */ jsx14("path", { d: "M18 6 6 18" }),
632
- /* @__PURE__ */ jsx14("path", { d: "m6 6 12 12" })
633
- ]
634
- }
635
- );
636
- };
637
-
638
- // src/components/dialog/index.tsx
639
- import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
640
- var DialogRoot = DialogPrimitive.Root;
641
- var DialogTrigger = DialogPrimitive.Trigger;
642
- var DialogPortal = DialogPrimitive.Portal;
643
- var DialogOverlay = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
644
- DialogPrimitive.Overlay,
645
- {
646
- ref,
647
- className: cn(
648
- "fixed inset-0 z-50 bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
649
- className
650
- ),
651
- ...props
652
- }
653
- ));
654
- DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
655
- var DialogContent = React6.forwardRef(({ className, hideCloseButton, children, ...props }, ref) => /* @__PURE__ */ jsxs10(DialogPortal, { children: [
656
- /* @__PURE__ */ jsx15(DialogOverlay, {}),
657
- /* @__PURE__ */ jsxs10(
658
- DialogPrimitive.Content,
659
- {
660
- ref,
661
- className: cn(
662
- "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-transparent bg-white p-6 shadow-lg 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%] rounded-lg",
663
- className
664
- ),
665
- ...props,
666
- children: [
667
- children,
668
- !hideCloseButton && /* @__PURE__ */ jsxs10(DialogPrimitive.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-accent data-[state=open]:text-muted-foreground", children: [
669
- /* @__PURE__ */ jsx15(CloseIcon, {}),
670
- /* @__PURE__ */ jsx15("span", { className: "sr-only", children: "Close" })
671
- ] })
672
- ]
673
- }
674
- )
675
- ] }));
676
- DialogContent.displayName = DialogPrimitive.Content.displayName;
677
- var DialogHeader = ({
678
- className,
679
- ...props
680
- }) => /* @__PURE__ */ jsx15(
681
- "div",
682
- {
683
- className: cn("flex flex-col space-y-1.5 text-left", className),
684
- ...props
685
- }
686
- );
687
- DialogHeader.displayName = "DialogHeader";
688
- var DialogFooter = ({
689
- className,
690
- ...props
691
- }) => /* @__PURE__ */ jsx15(
692
- "div",
693
- {
694
- className: cn("flex flex-row justify-end sm:space-x-2", className),
695
- ...props
696
- }
697
- );
698
- DialogFooter.displayName = "DialogFooter";
699
- var DialogTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
700
- DialogPrimitive.Title,
701
- {
702
- ref,
703
- className: cn(
704
- "text-xl font-semibold leading-none tracking-tight",
705
- className
706
- ),
707
- ...props
708
- }
709
- ));
710
- DialogTitle.displayName = DialogPrimitive.Title.displayName;
711
- var DialogDescription = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
712
- DialogPrimitive.Description,
713
- {
714
- ref,
715
- className: cn("text-sm text-gray-500", className),
716
- ...props
717
- }
718
- ));
719
- DialogDescription.displayName = DialogPrimitive.Description.displayName;
720
- var Dialog2 = ({
721
- trigger = void 0,
722
- children,
723
- open,
724
- onOpenChange,
725
- hideCloseButton,
726
- footer,
727
- title,
728
- description,
729
- contentClassName,
730
- headerClassName,
731
- titleClassName,
732
- descriptionClassName,
733
- footerClassName,
734
- asChild = true,
735
- onOpenAutoFocus,
736
- onCloseAutoFocus,
737
- onEscapeKeyDown,
738
- onInteractOutside,
739
- onPointerDownOutside,
740
- ...props
741
- }) => {
742
- return /* @__PURE__ */ jsxs10(DialogRoot, { ...props, open, onOpenChange, children: [
743
- /* @__PURE__ */ jsx15(DialogTrigger, { asChild, children: trigger }),
744
- /* @__PURE__ */ jsx15(DialogPortal, { children: /* @__PURE__ */ jsxs10(
745
- DialogContent,
746
- {
747
- className: contentClassName,
748
- hideCloseButton,
749
- onOpenAutoFocus,
750
- onCloseAutoFocus,
751
- onEscapeKeyDown,
752
- onPointerDownOutside,
753
- onInteractOutside,
754
- children: [
755
- title || description ? /* @__PURE__ */ jsxs10(DialogHeader, { className: headerClassName, children: [
756
- title && /* @__PURE__ */ jsx15(DialogTitle, { className: titleClassName, children: title }),
757
- description && /* @__PURE__ */ jsx15(DialogDescription, { className: descriptionClassName, children: description })
758
- ] }) : /* @__PURE__ */ jsx15(Fragment2, {}),
759
- children,
760
- footer && /* @__PURE__ */ jsx15(DialogFooter, { className: footerClassName, children: footer })
761
- ]
762
- }
763
- ) })
764
- ] });
765
- };
766
- Dialog2.displayName = DialogPrimitive.Dialog.displayName;
767
-
768
- // src/components/command/index.tsx
769
- import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
770
- var Command = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
771
- CommandPrimitive,
772
- {
773
- ref,
774
- className: cn(
775
- "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
776
- className
777
- ),
778
- ...props
779
- }
780
- ));
781
- Command.displayName = CommandPrimitive.displayName;
782
- var CommandInput = React7.forwardRef(({ className, CommandInputContainerClassName, loading, ...props }, ref) => /* @__PURE__ */ jsxs11(
783
- "div",
784
- {
785
- className: cn(
786
- "flex items-center border-0 px-3 gap-2",
787
- CommandInputContainerClassName
788
- ),
789
- "cmdk-input-wrapper": "",
790
- children: [
791
- loading ? /* @__PURE__ */ jsx16(Loader, { size: 16, colour: "secondary" }) : /* @__PURE__ */ jsx16(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
792
- /* @__PURE__ */ jsx16(
793
- CommandPrimitive.Input,
794
- {
795
- ref,
796
- className: cn(
797
- "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
798
- className
799
- ),
800
- disabled: loading,
801
- ...props
802
- }
803
- )
804
- ]
805
- }
806
- ));
807
- CommandInput.displayName = CommandPrimitive.Input.displayName;
808
- var CommandList = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
809
- CommandPrimitive.List,
810
- {
811
- ref,
812
- className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
813
- ...props
814
- }
815
- ));
816
- CommandList.displayName = CommandPrimitive.List.displayName;
817
- var CommandEmpty = React7.forwardRef((props, ref) => /* @__PURE__ */ jsx16(
818
- CommandPrimitive.Empty,
819
- {
820
- ref,
821
- className: "py-6 text-center text-sm",
822
- ...props
823
- }
824
- ));
825
- CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
826
- var CommandGroup = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
827
- CommandPrimitive.Group,
828
- {
829
- ref,
830
- className: cn(
831
- "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",
832
- className
833
- ),
834
- ...props
835
- }
836
- ));
837
- CommandGroup.displayName = CommandPrimitive.Group.displayName;
838
- var CommandSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
839
- CommandPrimitive.Separator,
840
- {
841
- ref,
842
- className: cn("-mx-1 h-px bg-border", className),
843
- ...props
844
- }
845
- ));
846
- CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
847
- var CommandItem = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
848
- CommandPrimitive.Item,
849
- {
850
- ref,
851
- className: cn(
852
- "relative text=[#222222] 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-primary-accent data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
853
- className
854
- ),
855
- ...props
856
- }
857
- ));
858
- CommandItem.displayName = CommandPrimitive.Item.displayName;
859
- var CommandShortcut = ({
860
- className,
861
- ...props
862
- }) => {
863
- return /* @__PURE__ */ jsx16(
864
- "span",
865
- {
866
- className: cn(
867
- "ml-auto text-xs tracking-widest text-muted-foreground",
868
- className
869
- ),
870
- ...props
871
- }
872
- );
873
- };
874
- CommandShortcut.displayName = "CommandShortcut";
875
-
876
- // src/components/popover/index.tsx
877
- import * as React8 from "react";
878
- import * as PopoverPrimitive from "@radix-ui/react-popover";
879
- import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
880
- var PopoverRoot = PopoverPrimitive.Root;
881
- var PopoverTrigger = PopoverPrimitive.Trigger;
882
- var PopoverContent = React8.forwardRef(
883
- ({ className, align = "center", sideOffset = 4, portal = true, ...props }, ref) => portal ? /* @__PURE__ */ jsx17(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx17(
884
- PopoverPrimitive.Content,
885
- {
886
- ref,
887
- align,
888
- sideOffset,
889
- className: cn(
890
- "pointer-events-auto z-50 w-72 rounded-md border border-transparent bg-white p-4 text-[#191919] 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",
891
- className
892
- ),
893
- onOpenAutoFocus: props.onOpenAutoFocus,
894
- onCloseAutoFocus: props.onCloseAutoFocus,
895
- ...props
896
- }
897
- ) }) : /* @__PURE__ */ jsx17(
898
- PopoverPrimitive.Content,
899
- {
900
- ref,
901
- align,
902
- sideOffset,
903
- className: cn(
904
- "pointer-events-auto z-50 w-72 rounded-md border border-transparent bg-white p-4 text-[#191919] 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",
905
- className
906
- ),
907
- onOpenAutoFocus: props.onOpenAutoFocus,
908
- onCloseAutoFocus: props.onCloseAutoFocus,
909
- ...props
910
- }
911
- )
912
- );
913
- PopoverContent.displayName = PopoverPrimitive.Content.displayName;
914
- var Popover = ({
915
- trigger,
916
- children,
917
- open,
918
- onOpenChange,
919
- contentClassName,
920
- asChild = true,
921
- align,
922
- side,
923
- alignOffset,
924
- sideOffset,
925
- onOpenAutoFocus,
926
- onCloseAutoFocus,
927
- ...props
928
- }) => {
929
- return /* @__PURE__ */ jsxs12(PopoverRoot, { ...props, open, onOpenChange, children: [
930
- /* @__PURE__ */ jsx17(PopoverTrigger, { asChild, children: trigger }),
931
- /* @__PURE__ */ jsx17(
932
- PopoverContent,
933
- {
934
- alignOffset,
935
- sideOffset,
936
- side,
937
- align,
938
- className: contentClassName,
939
- onOpenAutoFocus,
940
- onCloseAutoFocus,
941
- children
942
- }
943
- )
944
- ] });
945
- };
946
- Popover.displayName = PopoverPrimitive.Root.displayName;
947
-
948
- // src/components/scroll-area/index.tsx
949
- import * as React9 from "react";
950
- import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
951
- import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
952
- var ScrollArea = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs13(
953
- ScrollAreaPrimitive.Root,
954
- {
955
- ref,
956
- className: cn("relative overflow-hidden", className),
957
- ...props,
958
- children: [
959
- /* @__PURE__ */ jsx18(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
960
- /* @__PURE__ */ jsx18(ScrollBar, {}),
961
- /* @__PURE__ */ jsx18(ScrollAreaPrimitive.Corner, {})
962
- ]
963
- }
964
- ));
965
- ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
966
- var ScrollBar = React9.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx18(
967
- ScrollAreaPrimitive.ScrollAreaScrollbar,
968
- {
969
- ref,
970
- orientation,
971
- className: cn(
972
- "flex touch-none select-none transition-colors",
973
- orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
974
- orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
975
- className
976
- ),
977
- ...props,
978
- children: /* @__PURE__ */ jsx18(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
979
- }
980
- ));
981
- ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
982
-
983
- // src/components/searcheable/index.tsx
984
- import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
985
- var SearchableTrigger = ({
986
- className,
987
- value,
988
- placeholder = "",
989
- status,
990
- disabled
991
- }) => {
992
- return /* @__PURE__ */ jsx19(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs14(
993
- "button",
994
- {
995
- disabled,
996
- className: cn(
997
- inputContainerVariants({ status }),
998
- "[&>span]:justify-start [&>span]:items-center gap-2 flex h-12 w-full items-center justify-between goup",
999
- value ? "" : "text-[#79818C]",
1000
- className
1001
- ),
1002
- children: [
1003
- value ?? placeholder ?? "Select options...",
1004
- /* @__PURE__ */ jsx19(
1005
- "svg",
1006
- {
1007
- width: "20",
1008
- height: "20",
1009
- viewBox: "0 0 20 20",
1010
- fill: "none",
1011
- className: " data-[state=open]:goup-rotate-180",
1012
- children: /* @__PURE__ */ jsx19(
1013
- "path",
1014
- {
1015
- d: "M16.5999 7.45825L11.1666 12.8916C10.5249 13.5333 9.4749 13.5333 8.83324 12.8916L3.3999 7.45825",
1016
- stroke: "currentColor",
1017
- strokeWidth: "1.5",
1018
- strokeMiterlimit: "10",
1019
- strokeLinecap: "round",
1020
- strokeLinejoin: "round"
1021
- }
1022
- )
1023
- }
1024
- )
1025
- ]
1026
- }
1027
- ) });
1028
- };
1029
- var Searchable = ({
1030
- options = [],
1031
- value,
1032
- onChange,
1033
- containerClassName,
1034
- placeholder,
1035
- disabled,
1036
- loading,
1037
- optionComponent,
1038
- children,
1039
- modal = false,
1040
- hideSearch,
1041
- className,
1042
- inputValue,
1043
- onValueChange,
1044
- onInputValueChange
1045
- }) => {
1046
- const [open, setOpen] = React10.useState(false);
1047
- const triggerRef = React10.useRef(null);
1048
- const [width, setWidth] = React10.useState(void 0);
1049
- React10.useLayoutEffect(() => {
1050
- if (triggerRef.current) {
1051
- setWidth(triggerRef.current.clientWidth);
1052
- }
1053
- }, [triggerRef.current]);
1054
- return /* @__PURE__ */ jsxs14(PopoverRoot, { modal, open, onOpenChange: setOpen, children: [
1055
- /* @__PURE__ */ jsx19("div", { className: cn("w-full", className), ref: triggerRef, children }),
1056
- /* @__PURE__ */ jsx19(
1057
- PopoverContent,
1058
- {
1059
- portal: !modal,
1060
- className: "p-0 min-w-[200px]",
1061
- style: { width },
1062
- children: /* @__PURE__ */ jsxs14(Command, { className: "max-h-[270px] pt-3 relative", children: [
1063
- !hideSearch && /* @__PURE__ */ jsx19(
1064
- CommandInput,
1065
- {
1066
- loading,
1067
- placeholder: placeholder ?? "Search options...",
1068
- onValueChange: onInputValueChange,
1069
- value: inputValue,
1070
- CommandInputContainerClassName: "mx-3 border rounded-md border-[#DEDEDE]"
1071
- }
1072
- ),
1073
- /* @__PURE__ */ jsx19(ScrollArea, { className: cn("w-full px-0", containerClassName), children: /* @__PURE__ */ jsxs14(CommandList, { children: [
1074
- !hideSearch && /* @__PURE__ */ jsx19(CommandEmpty, { children: "No result found." }),
1075
- /* @__PURE__ */ jsx19(CommandGroup, { className: "w-full", children: options?.map((option) => /* @__PURE__ */ jsx19(
1076
- CommandItem,
1077
- {
1078
- defaultValue: value?.label,
1079
- value: option.label,
1080
- disabled,
1081
- onSelect: () => {
1082
- onChange(option);
1083
- setOpen(false);
1084
- onValueChange?.(option?.value);
1085
- },
1086
- children: !optionComponent ? option.label : optionComponent(option)
1087
- },
1088
- option.value
1089
- )) })
1090
- ] }) })
1091
- ] })
1092
- }
1093
- )
1094
- ] });
1095
- };
1096
-
1097
- // src/components/select/index.tsx
1098
- import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
1099
- var Select = ({
1100
- showAsterisk,
1101
- label,
1102
- description,
1103
- error,
1104
- hideSearch = true,
1105
- status,
1106
- ...props
1107
- }) => {
1108
- return /* @__PURE__ */ jsxs15("div", { className: "relative space-y-1", children: [
1109
- /* @__PURE__ */ jsx20(FormLabel, { showAsterisk, error, children: label }),
1110
- /* @__PURE__ */ jsx20(Searchable, { hideSearch, ...props, children: /* @__PURE__ */ jsx20(
1111
- SearchableTrigger,
1112
- {
1113
- disabled: props?.disabled,
1114
- placeholder: "Select or search email",
1115
- status,
1116
- value: props?.value?.label ?? props?.value?.value
1117
- }
1118
- ) }),
1119
- /* @__PURE__ */ jsx20(FormDescription, { className: "text-gray-400 text-sm !font-normal", children: description }),
1120
- /* @__PURE__ */ jsx20(ErrorMessage, { error })
1121
- ] });
1122
- };
1123
-
1124
- // src/components/country/data.ts
1125
- var countryData = [
1126
- {
1127
- countryCode: "GLOBAL",
1128
- countryName: "Global",
1129
- currency: "Dollars",
1130
- currencyCode: "USD",
1131
- internetCountryCode: "GLOBAL"
1132
- },
1133
- {
1134
- countryName: "Benin",
1135
- countryCode: "+229",
1136
- currency: "West African CFA franc",
1137
- currencyCode: "XOF",
1138
- currencyIcon: "Fr",
1139
- internetCountryCode: "BJ"
1140
- },
1141
- {
1142
- countryName: "Burkina Faso",
1143
- countryCode: "+226",
1144
- currency: "West African CFA franc",
1145
- currencyCode: "XOF",
1146
- currencyIcon: "Fr",
1147
- internetCountryCode: "BF"
1148
- },
1149
- {
1150
- countryName: "Cameroon",
1151
- countryCode: "+237",
1152
- currency: "Central African CFA franc",
1153
- currencyCode: "XAF",
1154
- currencyIcon: "Fr",
1155
- internetCountryCode: "CM"
1156
- },
1157
- {
1158
- countryName: "Chad",
1159
- countryCode: "+235",
1160
- currency: "Central African CFA franc",
1161
- currencyCode: "XAF",
1162
- currencyIcon: "Fr",
1163
- internetCountryCode: "TD"
1164
- },
1165
- {
1166
- countryName: "DR Congo",
1167
- countryCode: "+243",
1168
- currency: "Congolese franc",
1169
- currencyCode: "CDF",
1170
- currencyIcon: "FC",
1171
- internetCountryCode: "CD"
1172
- },
1173
- {
1174
- countryName: "Eswatini",
1175
- countryCode: "+268",
1176
- currency: "Swazi lilangeni",
1177
- currencyCode: "SZL",
1178
- currencyIcon: "L",
1179
- internetCountryCode: "SZ"
1180
- },
1181
- {
1182
- countryName: "Gabon",
1183
- countryCode: "+241",
1184
- currency: "Central African CFA franc",
1185
- currencyCode: "XAF",
1186
- currencyIcon: "Fr",
1187
- internetCountryCode: "GA"
1188
- },
1189
- {
1190
- countryName: "Ghana",
1191
- countryCode: "+233",
1192
- currency: "Ghanaian cedi",
1193
- currencyCode: "GHS",
1194
- currencyIcon: "\u20B5",
1195
- internetCountryCode: "GH"
1196
- },
1197
- {
1198
- countryName: "Guinea",
1199
- countryCode: "+224",
1200
- currency: "Guinean franc",
1201
- currencyCode: "GNF",
1202
- currencyIcon: "Fr",
1203
- internetCountryCode: "GN"
1204
- },
1205
- {
1206
- countryName: "Ivory Coast",
1207
- countryCode: "+225",
1208
- currency: "West African CFA franc",
1209
- currencyCode: "XOF",
1210
- currencyIcon: "Fr",
1211
- internetCountryCode: "CI"
1212
- },
1213
- {
1214
- countryName: "Kenya",
1215
- countryCode: "+254",
1216
- currency: "Kenyan shilling",
1217
- currencyCode: "KES",
1218
- currencyIcon: "Sh",
1219
- internetCountryCode: "KE"
1220
- },
1221
- {
1222
- countryName: "Lesotho",
1223
- countryCode: "+266",
1224
- currency: "Lesotho loti",
1225
- currencyCode: "LSL",
1226
- currencyIcon: "L",
1227
- internetCountryCode: "LS"
1228
- },
1229
- {
1230
- countryName: "Liberia",
1231
- countryCode: "+231",
1232
- currency: "Liberian dollar",
1233
- currencyCode: "LRD",
1234
- currencyIcon: "$",
1235
- internetCountryCode: "LR"
1236
- },
1237
- {
1238
- countryName: "Madagascar",
1239
- countryCode: "+261",
1240
- currency: "Malagasy ariary",
1241
- currencyCode: "MGA",
1242
- currencyIcon: "Ar",
1243
- internetCountryCode: "MG"
1244
- },
1245
- {
1246
- countryName: "Malawi",
1247
- countryCode: "+265",
1248
- currency: "Malawian kwacha",
1249
- currencyCode: "MWK",
1250
- currencyIcon: "MK",
1251
- internetCountryCode: "MW"
1252
- },
1253
- {
1254
- countryName: "Mali",
1255
- countryCode: "+223",
1256
- currency: "West African CFA franc",
1257
- currencyCode: "XOF",
1258
- currencyIcon: "Fr",
1259
- internetCountryCode: "ML"
1260
- },
1261
- {
1262
- countryName: "Mozambique",
1263
- countryCode: "+258",
1264
- currency: "Mozambican metical",
1265
- currencyCode: "MZN",
1266
- currencyIcon: "MT",
1267
- internetCountryCode: "MZ"
1268
- },
1269
- {
1270
- countryName: "Namibia",
1271
- countryCode: "+264",
1272
- currency: "Namibian dollar",
1273
- currencyCode: "NAD",
1274
- currencyIcon: "$",
1275
- internetCountryCode: "NA"
1276
- },
1277
- {
1278
- countryName: "Niger",
1279
- countryCode: "+227",
1280
- currency: "West African CFA franc",
1281
- currencyCode: "XOF",
1282
- currencyIcon: "Fr",
1283
- internetCountryCode: "NE"
1284
- },
1285
- {
1286
- countryName: "Nigeria",
1287
- countryCode: "+234",
1288
- currency: "Nigerian naira",
1289
- currencyCode: "NGN",
1290
- currencyIcon: "\u20A6",
1291
- internetCountryCode: "NG"
1292
- },
1293
- {
1294
- countryName: "Republic of the Congo",
1295
- countryCode: "+242",
1296
- currency: "Central African CFA franc",
1297
- currencyCode: "XAF",
1298
- currencyIcon: "Fr",
1299
- internetCountryCode: "CG"
1300
- },
1301
- {
1302
- countryName: "Rwanda",
1303
- countryCode: "+250",
1304
- currency: "Rwandan franc",
1305
- currencyCode: "RWF",
1306
- currencyIcon: "Fr",
1307
- internetCountryCode: "RW"
1308
- },
1309
- {
1310
- countryName: "Senegal",
1311
- countryCode: "+221",
1312
- currency: "West African CFA franc",
1313
- currencyCode: "XOF",
1314
- currencyIcon: "Fr",
1315
- internetCountryCode: "SN"
1316
- },
1317
- {
1318
- countryName: "Seychelles",
1319
- countryCode: "+248",
1320
- currency: "Seychellois rupee",
1321
- currencyCode: "SCR",
1322
- currencyIcon: "\u20A8",
1323
- internetCountryCode: "SC"
1324
- },
1325
- {
1326
- countryName: "South Africa",
1327
- countryCode: "+27",
1328
- currency: "South African rand",
1329
- currencyCode: "ZAR",
1330
- currencyIcon: "R",
1331
- internetCountryCode: "ZA"
1332
- },
1333
- {
1334
- countryName: "South Sudan",
1335
- countryCode: "+211",
1336
- currency: "South Sudanese pound",
1337
- currencyCode: "SSP",
1338
- currencyIcon: "\xA3",
1339
- internetCountryCode: "SS"
1340
- },
1341
- {
1342
- countryName: "Tanzania",
1343
- countryCode: "+255",
1344
- currency: "Tanzanian shilling",
1345
- currencyCode: "TZS",
1346
- currencyIcon: "Sh",
1347
- internetCountryCode: "TZ"
1348
- },
1349
- {
1350
- countryName: "Togo",
1351
- countryCode: "+228",
1352
- currency: "West African CFA franc",
1353
- currencyCode: "XOF",
1354
- currencyIcon: "Fr",
1355
- internetCountryCode: "TG"
1356
- },
1357
- {
1358
- countryName: "Uganda",
1359
- countryCode: "+256",
1360
- currency: "Ugandan shilling",
1361
- currencyCode: "UGX",
1362
- currencyIcon: "Sh",
1363
- internetCountryCode: "UG"
1364
- },
1365
- {
1366
- countryName: "Zambia",
1367
- countryCode: "+260",
1368
- currency: "Zambian kwacha",
1369
- currencyCode: "ZMW",
1370
- currencyIcon: "ZK",
1371
- internetCountryCode: "ZM"
1372
- }
1373
- ];
1374
- var getCountryDataMap = () => {
1375
- const frequency = {};
1376
- countryData?.forEach((country) => {
1377
- frequency[country?.internetCountryCode] = country?.countryName;
1378
- });
1379
- return frequency;
1380
- };
1381
-
1382
- // src/components/phone-input/index.tsx
1383
- import * as React11 from "react";
1384
- import * as RPNInput from "react-phone-number-input";
1385
- import flags from "react-phone-number-input/flags";
1386
- import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
1387
- var PhoneInput = React11.forwardRef(
1388
- ({
1389
- className,
1390
- onChange,
1391
- modal,
1392
- showAsterisk,
1393
- label,
1394
- description,
1395
- error,
1396
- defaultCountry = "NG",
1397
- ...props
1398
- }, ref) => {
1399
- const CountrySelectWrapper = (innerProps) => {
1400
- return /* @__PURE__ */ jsx21(CountrySelect, { ...innerProps, status: props.status, modal });
1401
- };
1402
- return /* @__PURE__ */ jsxs16("div", { className: "relative space-y-1", children: [
1403
- /* @__PURE__ */ jsx21(FormLabel, { showAsterisk, error, children: label }),
1404
- /* @__PURE__ */ jsx21(
1405
- RPNInput.default,
1406
- {
1407
- ref,
1408
- className: cn("flex", className),
1409
- flagComponent: FlagComponent,
1410
- countrySelectComponent: CountrySelectWrapper,
1411
- inputComponent: InputComponent,
1412
- defaultCountry,
1413
- onChange: (value) => onChange?.(value),
1414
- ...props
1415
- }
1416
- ),
1417
- /* @__PURE__ */ jsx21(FormDescription, { className: "text-gray-400 text-sm !font-normal", children: description }),
1418
- /* @__PURE__ */ jsx21(ErrorMessage, { error })
1419
- ] });
1420
- }
1421
- );
1422
- PhoneInput.displayName = "PhoneInput";
1423
- var InputComponent = React11.forwardRef(
1424
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
1425
- Input,
1426
- {
1427
- className: cn(
1428
- "h-full !-mt-0 border-l-0 rounded-l-none flex-1",
1429
- className
1430
- ),
1431
- ...props,
1432
- ref
1433
- }
1434
- )
1435
- );
1436
- InputComponent.displayName = "InputComponent";
1437
- var CountrySelect = ({
1438
- disabled,
1439
- value,
1440
- onChange,
1441
- options,
1442
- status,
1443
- modal
1444
- }) => {
1445
- const handleSelect = React11.useCallback(
1446
- (country) => {
1447
- onChange(country);
1448
- },
1449
- [onChange]
1450
- );
1451
- return /* @__PURE__ */ jsxs16(PopoverRoot, { modal, children: [
1452
- /* @__PURE__ */ jsx21(PopoverTrigger, { disabled, children: /* @__PURE__ */ jsxs16(
1453
- "div",
1454
- {
1455
- className: cn(
1456
- inputContainerVariants({ status }),
1457
- "!border-r-0 transition justify-center items-center border disabled:text-base-500 disabled:border-base-300 border-status-neutral-fill dark:border-[#9299A2] text-texts-50 focus:ring-offset-1 focus:ring-offset-base-100 focus-visible:!ring-offset-base-100 focus-visible:ring-2 focus-visible:!ring-accent focus:ring-accent focus:ring-2 flex gap-1 h-full rounded-e-none rounded-s-lg px-3 dark:!bg-transparent"
1458
- ),
1459
- children: [
1460
- /* @__PURE__ */ jsx21(FlagComponent, { country: value, countryName: value }),
1461
- /* @__PURE__ */ jsx21(
1462
- "svg",
1463
- {
1464
- className: cn(
1465
- "-mr-2 h-4 w-4 opacity-50",
1466
- disabled ? "hidden" : "opacity-100"
1467
- ),
1468
- width: "20",
1469
- height: "20",
1470
- viewBox: "0 0 20 20",
1471
- fill: "none",
1472
- children: /* @__PURE__ */ jsx21(
1473
- "path",
1474
- {
1475
- d: "M16.5999 7.45825L11.1666 12.8916C10.5249 13.5333 9.4749 13.5333 8.83324 12.8916L3.3999 7.45825",
1476
- stroke: "#959595",
1477
- strokeWidth: "1.5",
1478
- strokeMiterlimit: "10",
1479
- strokeLinecap: "round",
1480
- strokeLinejoin: "round"
1481
- }
1482
- )
1483
- }
1484
- )
1485
- ]
1486
- }
1487
- ) }),
1488
- /* @__PURE__ */ jsx21(PopoverContent, { portal: !modal, className: "w-[200px] md:w-[300px] p-0", children: /* @__PURE__ */ jsx21(Command, { children: /* @__PURE__ */ jsx21(CommandList, { children: /* @__PURE__ */ jsxs16(ScrollArea, { className: "h-72", children: [
1489
- /* @__PURE__ */ jsx21(CommandInput, { placeholder: "Search country..." }),
1490
- /* @__PURE__ */ jsx21(CommandEmpty, { children: "No country found." }),
1491
- /* @__PURE__ */ jsx21(CommandGroup, { children: options.filter((x) => x.value).map((option) => /* @__PURE__ */ jsxs16(
1492
- CommandItem,
1493
- {
1494
- className: "gap-2",
1495
- onSelect: () => handleSelect(option.value),
1496
- children: [
1497
- /* @__PURE__ */ jsx21(
1498
- FlagComponent,
1499
- {
1500
- country: option.value,
1501
- countryName: option.label
1502
- }
1503
- ),
1504
- /* @__PURE__ */ jsx21("span", { className: "flex-1 text-sm", children: option.label }),
1505
- option.value && /* @__PURE__ */ jsx21("span", { className: "text-[#191919]/50 text-sm dark:text-white", children: `+${RPNInput.getCountryCallingCode(option.value)}` }),
1506
- /* @__PURE__ */ jsx21(
1507
- "svg",
1508
- {
1509
- width: "16",
1510
- height: "16",
1511
- viewBox: "0 0 16 16",
1512
- fill: "none",
1513
- className: cn(
1514
- "ml-auto",
1515
- option.value === value ? "opacity-100" : "opacity-0"
1516
- ),
1517
- children: /* @__PURE__ */ jsx21(
1518
- "path",
1519
- {
1520
- d: "M4 8.00008L6.66353 10.6636L12 5.33655",
1521
- stroke: "#959595",
1522
- strokeWidth: "1.06667",
1523
- strokeLinecap: "round",
1524
- strokeLinejoin: "round"
1525
- }
1526
- )
1527
- }
1528
- )
1529
- ]
1530
- },
1531
- `${option.value}-${option.label}`
1532
- )) })
1533
- ] }) }) }) })
1534
- ] });
1535
- };
1536
- var FlagComponent = ({
1537
- country,
1538
- countryName,
1539
- className
1540
- }) => {
1541
- const Flag = flags[country];
1542
- return /* @__PURE__ */ jsx21(
1543
- "span",
1544
- {
1545
- className: cn(
1546
- "bg-white/20 flex h-4 w-6 overflow-hidden rounded-sm",
1547
- className
1548
- ),
1549
- children: Flag && /* @__PURE__ */ jsx21(Flag, { title: countryName })
1550
- }
1551
- );
1552
- };
1553
- FlagComponent.displayName = "FlagComponent";
1554
-
1555
- // src/components/country/index.tsx
1556
- import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
1557
- var countryMap = getCountryDataMap();
1558
- var CountryTrigger = ({
1559
- className,
1560
- value,
1561
- placeholder = "",
1562
- status,
1563
- disabled
1564
- }) => {
1565
- return /* @__PURE__ */ jsx22(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs17(
1566
- "button",
1567
- {
1568
- disabled,
1569
- className: cn(
1570
- inputContainerVariants({ status }),
1571
- "[&>span]:justify-start [&>span]:items-center gap-2 flex w-full items-center justify-between goup",
1572
- value ? "" : "text-[#79818C]",
1573
- className
1574
- ),
1575
- children: [
1576
- value ? /* @__PURE__ */ jsxs17("div", { className: "flex gap-2", children: [
1577
- /* @__PURE__ */ jsx22(
1578
- FlagComponent,
1579
- {
1580
- country: value,
1581
- countryName: value,
1582
- className: "ml-1 !w-6 h-5"
1583
- }
1584
- ),
1585
- /* @__PURE__ */ jsxs17("span", { className: "", children: [
1586
- " ",
1587
- countryMap[value]
1588
- ] })
1589
- ] }) : placeholder ?? "Select options...",
1590
- /* @__PURE__ */ jsx22(
1591
- "svg",
1592
- {
1593
- width: "20",
1594
- height: "20",
1595
- viewBox: "0 0 20 20",
1596
- fill: "none",
1597
- className: " data-[state=open]:goup-rotate-180",
1598
- children: /* @__PURE__ */ jsx22(
1599
- "path",
1600
- {
1601
- d: "M16.5999 7.45825L11.1666 12.8916C10.5249 13.5333 9.4749 13.5333 8.83324 12.8916L3.3999 7.45825",
1602
- stroke: "currentColor",
1603
- strokeWidth: "1.5",
1604
- strokeMiterlimit: "10",
1605
- strokeLinecap: "round",
1606
- strokeLinejoin: "round"
1607
- }
1608
- )
1609
- }
1610
- )
1611
- ]
1612
- }
1613
- ) });
1614
- };
1615
- var Country = ({
1616
- hideSearch = true,
1617
- showAsterisk,
1618
- label,
1619
- description,
1620
- error,
1621
- ...props
1622
- }) => {
1623
- const options = countryData?.map((country) => ({
1624
- value: country?.internetCountryCode,
1625
- label: country?.countryName,
1626
- ...country
1627
- }));
1628
- return /* @__PURE__ */ jsxs17("div", { className: "relative space-y-1", children: [
1629
- /* @__PURE__ */ jsx22(FormLabel, { showAsterisk, error, children: label }),
1630
- /* @__PURE__ */ jsx22(
1631
- Searchable,
1632
- {
1633
- options,
1634
- hideSearch,
1635
- optionComponent: (arg) => {
1636
- return /* @__PURE__ */ jsxs17("div", { className: "w-full flex items-center gap-2", children: [
1637
- /* @__PURE__ */ jsx22(
1638
- FlagComponent,
1639
- {
1640
- country: arg?.internetCountryCode,
1641
- countryName: arg?.label,
1642
- className: "ml-2 !w-6 !h-5"
1643
- }
1644
- ),
1645
- /* @__PURE__ */ jsx22("span", { className: "flex-1 text-sm", children: arg?.label })
1646
- ] });
1647
- },
1648
- ...props,
1649
- children: /* @__PURE__ */ jsx22(
1650
- CountryTrigger,
1651
- {
1652
- value: props?.value?.value,
1653
- status: props?.status,
1654
- placeholder: props?.placeholder ?? " Select Country"
1655
- }
1656
- )
1657
- }
1658
- ),
1659
- /* @__PURE__ */ jsx22(FormDescription, { className: "text-gray-400 text-sm !font-normal", children: description }),
1660
- /* @__PURE__ */ jsx22(ErrorMessage, { error })
1661
- ] });
1662
- };
1663
-
1664
- // src/components/otp/index.tsx
1665
- import OtpInput from "react-otp-input";
1666
- import { cva as cva5 } from "class-variance-authority";
1667
- import { useMemo } from "react";
1668
- import { jsx as jsx23 } from "react/jsx-runtime";
1669
- var otpInputVariants = cva5(
1670
- "transition cursor-default placeholder:text-black dark:placeholder:text-white rounded-lg !h-14 !w-14 border aspect-square text-base font-semibold tracking-normal outline-none placeholder:text-sm placeholder:font-normal text-black focus:bg-white",
1671
- {
1672
- variants: {
1673
- status: {
1674
- default: "border-gray-300 dark:border-[#d4d4d4] focus:border-gray-400 focus-visible:!ring-offset-gray-200 focus:ring-offset-gray-200 !ring-gray-200 !focus-visible:ring-1 bg-white dark:!bg-transparent dark:focus-visible:!ring-0 dark:focus-within:!bg-transparent dark:text-white dark:focus-within:border-[#9299A2] dark:border-[#676767] dark:disabled:!border-[#9299A2]",
1675
- error: "placeholder:text-red-600 bg-red-50 border-red-600 text-red-600 focus-within:bg-red-50 focus-within:border-red-600",
1676
- loading: "placeholder:text-[#C4C4C4]"
1677
- }
1678
- },
1679
- defaultVariants: {
1680
- status: "default"
1681
- }
1682
- }
1683
- );
1684
- var OTPInput = ({
1685
- numInputs = 4,
1686
- inputStyle,
1687
- containerStyle,
1688
- placeholder = "-",
1689
- status,
1690
- ...props
1691
- }) => {
1692
- const placeholderValue = useMemo(() => {
1693
- if (placeholder) return placeholder;
1694
- const numInputArr = new Array(numInputs).fill("");
1695
- const result = numInputArr.reduce((accumulator, currentValue) => {
1696
- return accumulator += currentValue;
1697
- }, "");
1698
- return result;
1699
- }, [numInputs, placeholder]);
1700
- return /* @__PURE__ */ jsx23(
1701
- OtpInput,
1702
- {
1703
- numInputs,
1704
- placeholder: placeholderValue,
1705
- containerStyle: cn("w-full", containerStyle),
1706
- inputStyle: cn(otpInputVariants({ status }), inputStyle),
1707
- renderInput: (props2) => /* @__PURE__ */ jsx23("input", { ...props2 }),
1708
- ...props
1709
- }
1710
- );
1711
- };
1712
- export {
1713
- Button,
1714
- Country,
1715
- Dialog2 as Dialog,
1716
- FlagComponent,
1717
- FormLabel,
1718
- Input,
1719
- Loader,
1720
- OTPInput,
1721
- PasswordInput,
1722
- PhoneInput,
1723
- Select,
1724
- Textarea
1725
- };
1
+ import lt from"react";import*as be from"react";import*as pe from"@radix-ui/react-label";import{cva as nt}from"class-variance-authority";import{clsx as ot}from"clsx";import{twMerge as at}from"tailwind-merge";function o(...t){return at(ot(t))}import{jsx as st}from"react/jsx-runtime";var it=nt("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"),me=be.forwardRef(({className:t,...e},r)=>st(pe.Root,{ref:r,className:o(it(),t),...e}));me.displayName=pe.Root.displayName;import{jsx as ve,jsxs as dt}from"react/jsx-runtime";var b=lt.forwardRef(({className:t,children:e,showAsterisk:r,error:a,...n},l)=>ve(me,{ref:l,className:o(a&&"text-red-500",t),...n,children:r?dt("p",{children:[e,ve("span",{className:"text-red-500",children:"*"})]}):e}));b.displayName="FormLabel";import{jsx as Pe,jsxs as ct}from"react/jsx-runtime";var H=({size:t=16,colour:e="primary"})=>ct("svg",{className:"animate-spin",width:t,height:t,viewBox:"0 0 20 20",fill:"none",children:[Pe("circle",{cx:"10",cy:"10",r:"9.25",stroke:"transparent",strokeWidth:"1.5"}),Pe("path",{d:"M10 0.595792C10 0.266746 10.267 -0.00185055 10.5954 0.0177417C11.9786 0.100242 13.3318 0.469461 14.5682 1.1044C15.9816 1.83021 17.2016 2.88235 18.1273 4.17366C19.0531 5.46496 19.6578 6.95826 19.8913 8.52984C20.1249 10.1014 19.9807 11.706 19.4705 13.2108C18.9604 14.7155 18.0991 16.077 16.9579 17.1825C15.8167 18.288 14.4285 19.1056 12.9084 19.5677C11.3882 20.0298 9.77982 20.123 8.21646 19.8397C6.84883 19.5918 5.55009 19.0619 4.40196 18.2863C4.12931 18.1021 4.08072 17.7265 4.28083 17.4653C4.48094 17.2041 4.85388 17.1564 5.12801 17.3384C6.12474 18.0001 7.24768 18.4531 8.42898 18.6672C9.80606 18.9168 11.2228 18.8347 12.5618 18.4276C13.9008 18.0206 15.1236 17.3004 16.1288 16.3266C17.134 15.3528 17.8927 14.1536 18.342 12.8282C18.7914 11.5027 18.9185 10.0893 18.7127 8.70502C18.507 7.32071 17.9743 6.00535 17.1589 4.86792C16.3435 3.73048 15.2688 2.80371 14.0238 2.16439C12.9559 1.61596 11.789 1.29259 10.5954 1.21173C10.2671 1.18949 10 0.92484 10 0.595792Z",fill:e==="primary"?"#ffffff":"currentColor",className:"rounded"})]});import*as xe from"react";import{Slot as pt}from"@radix-ui/react-slot";import{cva as mt}from"class-variance-authority";import{Fragment as Ne,jsx as B,jsxs as ft}from"react/jsx-runtime";var ut=mt("overflow-hidden isolate relative inline-flex h-fit items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background dark:ring-offset-transparent transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:!pointer-events-none",{variants:{variant:{primary:"border-primary-main bg-primary-main hover:bg-primary-main/70 disabled:bg-primary-main/70 text-white font-bold",danger:"border-red-600 bg-red-600 hover:bg-red-600/70 disabled:bg-red-600/70 text-white font-bold",neutral:"!border-0 bg-transparent text-primary-main hover:opacity-80 disabled:opacity-60",outlined:"border border-primary-main text-primary-main hover:opacity-80 disabled:opacity-60","danger-outlined":"border border-red-600 text-red-600 hover:opacity-80 disabled:opacity-60","light-outlined":"border-white text-white hover:opacity-80 disabled:opacity-60","dark-text":"border-transparent bg-transparent hover:bg-opacity-70 disabled:bg-opacity-70 text-black font-medium",light:"border-white bg-white hover:bg-opacity-70 disabled:bg-opacity-70 text-primary-main font-semibold"},size:{default:"py-[0.625rem] px-[1.5rem] text-[0.875rem] leading-[1.25rem] font-medium rounded-lg",sm:"py-[0.375rem] px-[1rem] text-[0.75rem] leading-[1rem] font-medium rounded-lg",lg:"py-[0.75rem] px-[1.5rem] text-[1rem] leading-[1.5rem] font-medium rounded-lg",md:"h-12 py-1 px-5 items-center","icon-sm":"h-[1.75rem] w-[1.75rem] flex justify-center items-center font-medium rounded-lg",icon:"h-[2.5rem] w-[2.75rem] flex justify-center items-center font-medium rounded-lg","icon-lg":"h-[3rem] w-[3rem] flex justify-center items-center font-medium rounded-lg"}},defaultVariants:{variant:"primary",size:"default"}}),we=({className:t,variant:e="primary",size:r,asChild:a=!1,isLoading:n=!1,leftNode:l,rightNode:d,LoaderSize:i,ref:f,...m})=>{let s=a?pt:"button",{children:p,disabled:h,...y}=m,A=xe.useRef(null);return B(s,{className:o(ut({variant:e,size:r,className:t})),ref:A||f,disabled:h||n,...y,children:B("div",{className:"flex font-medium justify-center items-center gap-2",children:n?B(Ne,{children:B("span",{className:"mx-auto",children:B(H,{size:i,colour:"secondary"})})}):ft(Ne,{children:[l,p,d]})})})};we.displayName="Button";import{cva as ue}from"class-variance-authority";import yt from"react";import{jsx as gt}from"react/jsx-runtime";var P=yt.forwardRef(({className:t,children:e,error:r,...a},n)=>{let l=r??e;return l?gt("p",{ref:n,className:o("text-xs font-normal text-[#F04248]",t),...a,children:l}):null});P.displayName="ErrorMessage";import Ct from"react";import{jsx as ht}from"react/jsx-runtime";var N=Ct.forwardRef(({className:t,...e},r)=>ht("p",{ref:r,className:o("text-sm text-[#8E98A8",t),...e}));N.displayName="FormDescription";import{jsx as F,jsxs as ke}from"react/jsx-runtime";var fe=ue("!p-0 flex h-full w-full !border-transparent !bg-transparent text-base focus-visible:bg-transparent focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",{variants:{status:{default:"placeholder:text-[#C4C4C4] dark:placeholder:text-[#9299A2]",error:"placeholder:text-red-500 text-red-500",loading:"placeholder:text-[#C4C4C4] dark:placeholder:text-[#9299A2]",prefilled:""}},defaultVariants:{status:"default"}}),De=({className:t,status:e,type:r,ref:a,...n})=>F("input",{type:r,className:o(fe({status:e}),t),ref:a,...n});De.displayName="BaseInnerInput";var R=ue("flex relative h-10 w-full rounded-[4px] dark:!bg-transparent border transition px-3 py-2 text-base placeholder:text-[#79818C] focus-within:outline-0 focus-within:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:disabled:!border-[#9299A2]",{variants:{status:{default:"border-[#DEDEDE] bg-white text-[#191919] dark:!bg-transparent caret-text-primary focus-within:bg-white dark:focus-within:!bg-transparent dark:text-white focus-within:border-primary-main dark:focus-within:border-[#9299A2] dark:disabled:!border-[#9299A2]",error:"placeholder:text-red-500 bg-red-50 border-red-500 dark:!bg-status-error-bg-dark text-red-500 focus-within:bg-red-50 focus-within:border-red-500",loading:"",prefilled:"bg-[#F6F6F6] border-[#DEDEDE] dark:!bg-transparent caret-[#DEDEDE] focus-within:bg-[#F6F6F6] focus-within:border-[#DEDEDE] dark:!border-[#9299A2] dark:focus-within:border-[#9299A2]"}},defaultVariants:{status:"default"}}),Re=ue("top-0 flex justify-center items-center h-full min-w-[50px] max-w-[100px] dark:!bg-transparent transition px-3 py-2 text-base placeholder:text-[#79818C] focus-within:outline-0 focus-within:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:disabled:!border-[#9299A2]",{variants:{side:{left:"left-0 rounded-l-[8px] border-r",right:"right-0 rounded-r-[8px] border-l"},status:{default:"border-[#DEDEDE] dark:border-[#676767] bg-white text-[#191919] dark:!bg-transparent caret-primary-main focus-within:bg-white dark:focus-within:!bg-transparent dark:text-white focus-within:border-primary-main dark:focus-within:border-[#9299A2] dark:disabled:!border-[#9299A2]",error:"placeholder:text-red-500 bg-red-50 border-red-500 dark:!bg-red-50 text-red-500 focus-within:bg-red-50 focus-within:border-red-500",loading:"",prefilled:"bg-[#F6F6F6] border-[#DEDEDE] dark:!bg-transparent caret-[#DEDEDE] focus-within:bg-[#F6F6F6] focus-within:border-[#DEDEDE] dark:!border-[#9299A2] dark:focus-within:border-[#9299A2]"}},defaultVariants:{status:"default",side:"left"}}),ae=({className:t,status:e="default",disabled:r,error:a,isLoading:n,sideNodeClassName:l,showAsterisk:d,label:i,description:f,ref:m,...s})=>{let p=e;return a&&(p="error"),n&&(p="loading"),r&&(p="prefilled"),ke("div",{className:"relative space-y-1 w-full",children:[F(b,{showAsterisk:d,error:a,children:i}),ke("div",{className:o(R({status:p}),s.leftNode||s.rightNode?"p-0":"",t),children:[s.leftNode?F("div",{className:o(Re({status:p,side:"left"}),l),children:s.leftNode}):null,F(De,{ref:m,disabled:n||r,className:s.leftNode||s.rightNode?"!px-3 !py-2":"",...s}),s.rightNode?F("div",{className:o(Re({status:p,side:"right"}),l),children:s.rightNode}):null]}),F(N,{className:"text-gray-400 text-sm !font-normal",children:f}),F(P,{error:a})]})};ae.displayName="Input";import{useState as Ve}from"react";import{jsx as Le,jsxs as bt}from"react/jsx-runtime";var Se=()=>bt("svg",{width:"18",height:"14",viewBox:"0 0 18 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[Le("path",{d:"M1.54639 7.26103C1.48389 7.09264 1.48389 6.90741 1.54639 6.73903C2.15517 5.26292 3.18853 4.00081 4.51547 3.1127C5.84241 2.22459 7.40317 1.75049 8.99989 1.75049C10.5966 1.75049 12.1574 2.22459 13.4843 3.1127C14.8113 4.00081 15.8446 5.26292 16.4534 6.73903C16.5159 6.90741 16.5159 7.09264 16.4534 7.26103C15.8446 8.73713 14.8113 9.99925 13.4843 10.8874C12.1574 11.7755 10.5966 12.2496 8.99989 12.2496C7.40317 12.2496 5.84241 11.7755 4.51547 10.8874C3.18853 9.99925 2.15517 8.73713 1.54639 7.26103Z",stroke:"#8E98A8",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),Le("path",{d:"M9 9.25C10.2426 9.25 11.25 8.24264 11.25 7C11.25 5.75736 10.2426 4.75 9 4.75C7.75736 4.75 6.75 5.75736 6.75 7C6.75 8.24264 7.75736 9.25 9 9.25Z",stroke:"#8E98A8",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]});import{jsx as Ie,jsxs as vt}from"react/jsx-runtime";var Ae=()=>vt("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[Ie("path",{d:"M4.08759 12.69C3.26171 11.9072 2.61006 10.9591 2.17509 9.90752C2.10081 9.73454 2.0625 9.54826 2.0625 9.36001C2.0625 9.17177 2.10081 8.98549 2.17509 8.81252C2.75274 7.4073 3.72095 6.19704 4.96509 5.32502C6.14597 4.4998 7.55989 4.07405 9.00009 4.11002C10.0363 4.084 11.064 4.30239 12.0001 4.74752M13.9201 6.03752C14.7415 6.81964 15.3904 7.76486 15.8251 8.81252C15.8994 8.98549 15.9377 9.17177 15.9377 9.36001C15.9377 9.54826 15.8994 9.73454 15.8251 9.90752C15.2474 11.3127 14.2792 12.523 13.0351 13.395C11.8542 14.2202 10.4403 14.646 9.00009 14.61C7.9639 14.636 6.93616 14.4176 6.00009 13.9725",stroke:"#8E98A8",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),Ie("path",{d:"M6.5325 10.2375C6.42732 9.95694 6.37395 9.65962 6.375 9.36C6.375 8.66381 6.65156 7.99613 7.14384 7.50384C7.63613 7.01156 8.30381 6.735 9 6.735C9.3 6.7335 9.597 6.7875 9.8775 6.8925M11.4675 8.4825C11.5725 8.763 11.6265 9.06 11.625 9.36C11.625 10.0562 11.3484 10.7239 10.8562 11.2162C10.3639 11.7084 9.69619 11.985 9 11.985C8.70038 11.986 8.40306 11.9327 8.1225 11.8275M2.25 15L14.25 3",stroke:"#8E98A8",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]});import{jsx as Fe}from"react/jsx-runtime";var Ee=()=>Fe("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:Fe("path",{d:"M8.89802 2.93408L9.70202 3.49808L6.21602 8.52608H5.41202L3.46802 5.80208L4.27202 5.05208L5.81402 6.49208L8.89802 2.93408Z",fill:"currentColor"})});import{jsx as Te}from"react/jsx-runtime";var Me=()=>Te("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:Te("path",{d:"M3.37891 8.62142L6.00041 5.99992L8.62191 8.62142M8.62191 3.37842L5.99991 5.99992L3.37891 3.37842",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})});import{jsx as k,jsxs as Pt}from"react/jsx-runtime";var Oe=[{label:"Uppercase",key:"uppercase",RegExp:/[A-Z]/,validated:!1},{label:"Lowercase",key:"lowercase",RegExp:/[a-z]/,validated:!1},{label:"Number",key:"number",RegExp:/\d/,validated:!1},{label:"8 Characters",key:"eight-chars",RegExp:/.{8}/,validated:!1}],We=({onValidate:t,onChange:e,...r})=>{let[a,n]=Ve(!1),[l,d]=Ve(Oe),i=s=>Oe.map(p=>({...p,validated:p.RegExp.test(s)})),f=s=>{let p=i(s),h=p.every(y=>y.validated);return d(p),h};return k(ae,{sideNodeClassName:"!border-l-0",rightNode:a?k("button",{type:"button",onClick:()=>n(s=>!s),children:k(Se,{})}):k("button",{type:"button",onClick:()=>n(s=>!s),children:k(Ae,{})}),type:a?"text":"password",onChange:s=>{e&&e(s);let p=s?.target?.value,h=f(p);t&&t(h,p)},description:k("div",{className:"flex items-center gap-2",children:l?.map(s=>Pt("div",{className:o("text-xs flex items-center gap-0.5",{"text-[#62C554]":s?.validated,"text-[#8E98A8]":!s?.validated}),children:[k("span",{className:"",children:s?.validated?k(Ee,{}):k(Me,{})}),k("span",{className:"",children:s?.label})]},s?.key))}),...r})};We.displayName="PasswordInput";import{cva as Nt}from"class-variance-authority";import{jsx as ne,jsxs as xt}from"react/jsx-runtime";var to=Nt("flex relative min-h-[80px] w-full rounded-[8px] border transition px-3 py-2 text-base placeholder:text-[#79818C] focus-within:outline-0 focus-within:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",{variants:{status:{default:"border-[#D7D7D7] dark:border-[#676767] bg-white text-[#191919] dark:!bg-transparent caret-primary-main focus-within:bg-white dark:focus-within:!bg-transparent dark:text-white focus-within:border-primary-main dark:focus-within:border-[#9299A2] dark:border-[#9299A2] dark:disabled:!border-[#9299A2]",error:"placeholder:text-status-error-fill bg-status-error-bg border-status-error-fill dark:!bg-status-error-bg-dark text-status-error-fill focus-within:bg-status-error-bg focus-within:border-status-error-fill",loading:"placeholder:text-[#C4C4C4]",prefilled:"resize-none bg-[#F6F6F6] border-[#D7D7D7] dark:!bg-transparent caret-[#D7D7D7] focus-within:bg-[#F6F6F6] focus-within:border-[#D7D7D7] dark:!border-[#9299A2] dark:focus-within:border-[#9299A2]"}},defaultVariants:{status:"default"}}),He=({className:t,status:e="default",disabled:r,error:a,isLoading:n,showAsterisk:l,label:d,description:i,...f})=>{let m=e;return a&&(m="error"),n&&(m="loading"),r&&(m="prefilled"),xt("div",{className:"relative space-y-1",children:[ne(b,{showAsterisk:l,error:a,children:d}),ne("textarea",{className:o("min-h-[80px]",R({status:m}),t),disabled:n||r,...f}),ne(N,{className:"text-gray-400 text-sm !font-normal",children:i}),ne(P,{error:a})]})};He.displayName="Textarea";import*as T from"react";import*as S from"react";import{Command as C}from"cmdk";import{Search as Lt}from"lucide-react";import*as G from"react";import*as u from"@radix-ui/react-dialog";import{jsx as Be,jsxs as wt}from"react/jsx-runtime";var Ge=()=>wt("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-x",children:[Be("path",{d:"M18 6 6 18"}),Be("path",{d:"m6 6 12 12"})]});import{Fragment as Dt,jsx as g,jsxs as O}from"react/jsx-runtime";var Rt=u.Root,kt=u.Trigger,_e=u.Portal,ze=G.forwardRef(({className:t,...e},r)=>g(u.Overlay,{ref:r,className:o("fixed inset-0 z-50 bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",t),...e}));ze.displayName=u.Overlay.displayName;var ye=G.forwardRef(({className:t,hideCloseButton:e,children:r,...a},n)=>O(_e,{children:[g(ze,{}),O(u.Content,{ref:n,className:o("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-transparent bg-white p-6 shadow-lg 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%] rounded-lg",t),...a,children:[r,!e&&O(u.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-accent data-[state=open]:text-muted-foreground",children:[g(Ge,{}),g("span",{className:"sr-only",children:"Close"})]})]})]}));ye.displayName=u.Content.displayName;var Ze=({className:t,...e})=>g("div",{className:o("flex flex-col space-y-1.5 text-left",t),...e});Ze.displayName="DialogHeader";var Xe=({className:t,...e})=>g("div",{className:o("flex flex-row justify-end sm:space-x-2",t),...e});Xe.displayName="DialogFooter";var Ke=G.forwardRef(({className:t,...e},r)=>g(u.Title,{ref:r,className:o("text-xl font-semibold leading-none tracking-tight",t),...e}));Ke.displayName=u.Title.displayName;var Ue=G.forwardRef(({className:t,...e},r)=>g(u.Description,{ref:r,className:o("text-sm text-gray-500",t),...e}));Ue.displayName=u.Description.displayName;var ge=({trigger:t=void 0,children:e,open:r,onOpenChange:a,hideCloseButton:n,footer:l,title:d,description:i,contentClassName:f,headerClassName:m,titleClassName:s,descriptionClassName:p,footerClassName:h,asChild:y=!0,onOpenAutoFocus:A,onCloseAutoFocus:le,onEscapeKeyDown:oe,onInteractOutside:M,onPointerDownOutside:de,...ce})=>O(Rt,{...ce,open:r,onOpenChange:a,children:[g(kt,{asChild:y,children:t}),g(_e,{children:O(ye,{className:f,hideCloseButton:n,onOpenAutoFocus:A,onCloseAutoFocus:le,onEscapeKeyDown:oe,onPointerDownOutside:de,onInteractOutside:M,children:[d||i?O(Ze,{className:m,children:[d&&g(Ke,{className:s,children:d}),i&&g(Ue,{className:p,children:i})]}):g(Dt,{}),e,l&&g(Xe,{className:h,children:l})]})})]});ge.displayName=u.Dialog.displayName;import{Fragment as Co,jsx as D,jsxs as At}from"react/jsx-runtime";var _=S.forwardRef(({className:t,...e},r)=>D(C,{ref:r,className:o("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",t),...e}));_.displayName=C.displayName;var z=S.forwardRef(({className:t,CommandInputContainerClassName:e,loading:r,...a},n)=>At("div",{className:o("flex items-center border-0 px-3 gap-2",e),"cmdk-input-wrapper":"",children:[r?D(H,{size:16,colour:"secondary"}):D(Lt,{className:"mr-2 h-4 w-4 shrink-0 opacity-50"}),D(C.Input,{ref:n,className:o("flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",t),disabled:r,...a})]}));z.displayName=C.Input.displayName;var Z=S.forwardRef(({className:t,...e},r)=>D(C.List,{ref:r,className:o("max-h-[300px] overflow-y-auto overflow-x-hidden",t),...e}));Z.displayName=C.List.displayName;var X=S.forwardRef((t,e)=>D(C.Empty,{ref:e,className:"py-6 text-center text-sm",...t}));X.displayName=C.Empty.displayName;var K=S.forwardRef(({className:t,...e},r)=>D(C.Group,{ref:r,className:o("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",t),...e}));K.displayName=C.Group.displayName;var St=S.forwardRef(({className:t,...e},r)=>D(C.Separator,{ref:r,className:o("-mx-1 h-px bg-border",t),...e}));St.displayName=C.Separator.displayName;var U=S.forwardRef(({className:t,...e},r)=>D(C.Item,{ref:r,className:o("relative text=[#222222] 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-primary-accent data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",t),...e}));U.displayName=C.Item.displayName;var It=({className:t,...e})=>D("span",{className:o("ml-auto text-xs tracking-widest text-muted-foreground",t),...e});It.displayName="CommandShortcut";import*as $e from"react";import*as x from"@radix-ui/react-popover";import{jsx as $,jsxs as Et}from"react/jsx-runtime";var q=x.Root,E=x.Trigger,W=$e.forwardRef(({className:t,align:e="center",sideOffset:r=4,portal:a=!0,...n},l)=>a?$(x.Portal,{children:$(x.Content,{ref:l,align:e,sideOffset:r,className:o("pointer-events-auto z-50 w-72 rounded-md border border-transparent bg-white p-4 text-[#191919] 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",t),onOpenAutoFocus:n.onOpenAutoFocus,onCloseAutoFocus:n.onCloseAutoFocus,...n})}):$(x.Content,{ref:l,align:e,sideOffset:r,className:o("pointer-events-auto z-50 w-72 rounded-md border border-transparent bg-white p-4 text-[#191919] 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",t),onOpenAutoFocus:n.onOpenAutoFocus,onCloseAutoFocus:n.onCloseAutoFocus,...n}));W.displayName=x.Content.displayName;var Ft=({trigger:t,children:e,open:r,onOpenChange:a,contentClassName:n,asChild:l=!0,align:d,side:i,alignOffset:f,sideOffset:m,onOpenAutoFocus:s,onCloseAutoFocus:p,...h})=>Et(q,{...h,open:r,onOpenChange:a,children:[$(E,{asChild:l,children:t}),$(W,{alignOffset:f,sideOffset:m,side:i,align:d,className:n,onOpenAutoFocus:s,onCloseAutoFocus:p,children:e})]});Ft.displayName=x.Root.displayName;import*as Ce from"react";import*as v from"@radix-ui/react-scroll-area";import{jsx as j,jsxs as Tt}from"react/jsx-runtime";var J=Ce.forwardRef(({className:t,children:e,...r},a)=>Tt(v.Root,{ref:a,className:o("relative overflow-hidden",t),...r,children:[j(v.Viewport,{className:"h-full w-full rounded-[inherit]",children:e}),j(qe,{}),j(v.Corner,{})]}));J.displayName=v.Root.displayName;var qe=Ce.forwardRef(({className:t,orientation:e="vertical",...r},a)=>j(v.ScrollAreaScrollbar,{ref:a,orientation:e,className:o("flex touch-none select-none transition-colors",e==="vertical"&&"h-full w-2.5 border-l border-l-transparent p-[1px]",e==="horizontal"&&"h-2.5 flex-col border-t border-t-transparent p-[1px]",t),...r,children:j(v.ScrollAreaThumb,{className:"relative flex-1 rounded-full bg-border"})}));qe.displayName=v.ScrollAreaScrollbar.displayName;import{jsx as L,jsxs as ie}from"react/jsx-runtime";var je=({className:t,value:e,placeholder:r="",status:a,disabled:n})=>L(E,{asChild:!0,disabled:n,children:ie("button",{disabled:n,className:o(R({status:a}),"[&>span]:justify-start [&>span]:items-center gap-2 flex h-12 w-full items-center justify-between goup",e?"":"text-[#79818C]",t),children:[e??r??"Select options...",L("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",className:" data-[state=open]:goup-rotate-180",children:L("path",{d:"M16.5999 7.45825L11.1666 12.8916C10.5249 13.5333 9.4749 13.5333 8.83324 12.8916L3.3999 7.45825",stroke:"currentColor",strokeWidth:"1.5",strokeMiterlimit:"10",strokeLinecap:"round",strokeLinejoin:"round"})})]})}),se=({options:t=[],value:e,onChange:r,containerClassName:a,placeholder:n,disabled:l,loading:d,optionComponent:i,children:f,modal:m=!1,hideSearch:s,className:p,inputValue:h,onValueChange:y,onInputValueChange:A})=>{let[le,oe]=T.useState(!1),M=T.useRef(null),[de,ce]=T.useState(void 0);return T.useLayoutEffect(()=>{M.current&&ce(M.current.clientWidth)},[M.current]),ie(q,{modal:m,open:le,onOpenChange:oe,children:[L("div",{className:o("w-full",p),ref:M,children:f}),L(W,{portal:!m,className:"p-0 min-w-[200px]",style:{width:de},children:ie(_,{className:"max-h-[270px] relative",children:[!s&&L(z,{loading:d,placeholder:n??"Search options...",onValueChange:A,value:h,CommandInputContainerClassName:"mx-3 border rounded-md border-[#DEDEDE]"}),L(J,{className:o("w-full px-0 h-full overflow-y-auto",a),children:ie(Z,{children:[!s&&L(X,{children:"No result found."}),L(K,{className:"w-full",children:t?.map(V=>L(U,{defaultValue:e?.label,value:V.label,disabled:l,onSelect:()=>{r(V),oe(!1),y?.(V?.value)},children:i?i(V):V.label},V.value))})]})})]})})]})};import{jsx as Q,jsxs as Vt}from"react/jsx-runtime";var Mt=({showAsterisk:t,label:e,description:r,error:a,hideSearch:n=!0,status:l,...d})=>Vt("div",{className:"relative space-y-1",children:[Q(b,{showAsterisk:t,error:a,children:e}),Q(se,{hideSearch:n,...d,containerClassName:"max-h-[700px] h-full",children:Q(je,{disabled:d?.disabled,placeholder:"Select or search email",status:l,value:d?.value?.label??d?.value?.value})}),Q(N,{className:"text-gray-400 text-sm !font-normal",children:r}),Q(P,{error:a})]});var he=[{countryCode:"GLOBAL",countryName:"Global",currency:"Dollars",currencyCode:"USD",internetCountryCode:"GLOBAL"},{countryName:"Benin",countryCode:"+229",currency:"West African CFA franc",currencyCode:"XOF",currencyIcon:"Fr",internetCountryCode:"BJ"},{countryName:"Burkina Faso",countryCode:"+226",currency:"West African CFA franc",currencyCode:"XOF",currencyIcon:"Fr",internetCountryCode:"BF"},{countryName:"Cameroon",countryCode:"+237",currency:"Central African CFA franc",currencyCode:"XAF",currencyIcon:"Fr",internetCountryCode:"CM"},{countryName:"Chad",countryCode:"+235",currency:"Central African CFA franc",currencyCode:"XAF",currencyIcon:"Fr",internetCountryCode:"TD"},{countryName:"DR Congo",countryCode:"+243",currency:"Congolese franc",currencyCode:"CDF",currencyIcon:"FC",internetCountryCode:"CD"},{countryName:"Eswatini",countryCode:"+268",currency:"Swazi lilangeni",currencyCode:"SZL",currencyIcon:"L",internetCountryCode:"SZ"},{countryName:"Gabon",countryCode:"+241",currency:"Central African CFA franc",currencyCode:"XAF",currencyIcon:"Fr",internetCountryCode:"GA"},{countryName:"Ghana",countryCode:"+233",currency:"Ghanaian cedi",currencyCode:"GHS",currencyIcon:"\u20B5",internetCountryCode:"GH"},{countryName:"Guinea",countryCode:"+224",currency:"Guinean franc",currencyCode:"GNF",currencyIcon:"Fr",internetCountryCode:"GN"},{countryName:"Ivory Coast",countryCode:"+225",currency:"West African CFA franc",currencyCode:"XOF",currencyIcon:"Fr",internetCountryCode:"CI"},{countryName:"Kenya",countryCode:"+254",currency:"Kenyan shilling",currencyCode:"KES",currencyIcon:"Sh",internetCountryCode:"KE"},{countryName:"Lesotho",countryCode:"+266",currency:"Lesotho loti",currencyCode:"LSL",currencyIcon:"L",internetCountryCode:"LS"},{countryName:"Liberia",countryCode:"+231",currency:"Liberian dollar",currencyCode:"LRD",currencyIcon:"$",internetCountryCode:"LR"},{countryName:"Madagascar",countryCode:"+261",currency:"Malagasy ariary",currencyCode:"MGA",currencyIcon:"Ar",internetCountryCode:"MG"},{countryName:"Malawi",countryCode:"+265",currency:"Malawian kwacha",currencyCode:"MWK",currencyIcon:"MK",internetCountryCode:"MW"},{countryName:"Mali",countryCode:"+223",currency:"West African CFA franc",currencyCode:"XOF",currencyIcon:"Fr",internetCountryCode:"ML"},{countryName:"Mozambique",countryCode:"+258",currency:"Mozambican metical",currencyCode:"MZN",currencyIcon:"MT",internetCountryCode:"MZ"},{countryName:"Namibia",countryCode:"+264",currency:"Namibian dollar",currencyCode:"NAD",currencyIcon:"$",internetCountryCode:"NA"},{countryName:"Niger",countryCode:"+227",currency:"West African CFA franc",currencyCode:"XOF",currencyIcon:"Fr",internetCountryCode:"NE"},{countryName:"Nigeria",countryCode:"+234",currency:"Nigerian naira",currencyCode:"NGN",currencyIcon:"\u20A6",internetCountryCode:"NG"},{countryName:"Republic of the Congo",countryCode:"+242",currency:"Central African CFA franc",currencyCode:"XAF",currencyIcon:"Fr",internetCountryCode:"CG"},{countryName:"Rwanda",countryCode:"+250",currency:"Rwandan franc",currencyCode:"RWF",currencyIcon:"Fr",internetCountryCode:"RW"},{countryName:"Senegal",countryCode:"+221",currency:"West African CFA franc",currencyCode:"XOF",currencyIcon:"Fr",internetCountryCode:"SN"},{countryName:"Seychelles",countryCode:"+248",currency:"Seychellois rupee",currencyCode:"SCR",currencyIcon:"\u20A8",internetCountryCode:"SC"},{countryName:"South Africa",countryCode:"+27",currency:"South African rand",currencyCode:"ZAR",currencyIcon:"R",internetCountryCode:"ZA"},{countryName:"South Sudan",countryCode:"+211",currency:"South Sudanese pound",currencyCode:"SSP",currencyIcon:"\xA3",internetCountryCode:"SS"},{countryName:"Tanzania",countryCode:"+255",currency:"Tanzanian shilling",currencyCode:"TZS",currencyIcon:"Sh",internetCountryCode:"TZ"},{countryName:"Togo",countryCode:"+228",currency:"West African CFA franc",currencyCode:"XOF",currencyIcon:"Fr",internetCountryCode:"TG"},{countryName:"Uganda",countryCode:"+256",currency:"Ugandan shilling",currencyCode:"UGX",currencyIcon:"Sh",internetCountryCode:"UG"},{countryName:"Zambia",countryCode:"+260",currency:"Zambian kwacha",currencyCode:"ZMW",currencyIcon:"ZK",internetCountryCode:"ZM"}],Je=()=>{let t={};return he?.forEach(e=>{t[e?.internetCountryCode]=e?.countryName}),t};import*as te from"react";import*as Ye from"react-phone-number-input";import Ht from"react-phone-number-input";import Bt from"react-phone-number-input/flags";import{jsx as Y,jsxs as Wt}from"react/jsx-runtime";var Ot=t=>Wt("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"none",...t,children:[Y("rect",{width:"32",height:"32",fill:"#60A5FA"})," ",Y("path",{d:"M3 10L7 8L10 9L13 8L16 10L19 9L22 11L25 10L28 12V15L26 17L28 19L27 22L29 24L27 26L24 25L21 26L18 24L15 25L12 23L9 24L6 22L4 23L2 21V18L4 16L3 13L5 11L3 10Z",fill:"#34D399"}),Y("rect",{x:"2",y:"28",width:"28",height:"3",fill:"#D1D5DB"}),Y("path",{d:"M0 16H32M8 0V32M16 0V32M24 0V32",stroke:"#2563EB",strokeWidth:"0.5",vectorEffect:"non-scaling-stroke"}),Y("path",{d:"M0 16H32",stroke:"#2563EB",strokeWidth:"1",vectorEffect:"non-scaling-stroke"})]}),Qe=Ot;import{jsx as c,jsxs as ee}from"react/jsx-runtime";var et=te.forwardRef(({className:t,onChange:e,value:r,modal:a,showAsterisk:n,label:l,description:d,error:i,defaultCountry:f="NG",...m},s)=>{let p=y=>c(Gt,{...y,status:m.status,modal:a,onChange:A=>y.onChange(A)}),h=r;return ee("div",{className:"relative space-y-1",children:[c(b,{showAsterisk:n,error:i,children:l}),c(Ht,{ref:s,className:o("flex",t),flagComponent:I,countrySelectComponent:p,focusInputOnCountrySelection:!0,countryCallingCodeEditable:!0,enableLongNumber:!0,addInternationalOption:!0,international:!0,inputComponent:tt,defaultCountry:f,containerComponent:({children:y})=>c("div",{className:o(R({status:m?.status}),"p-0 gap-1"),children:y}),...m,onChange:y=>{e&&e(y)},value:h}),c(N,{className:"text-gray-400 text-sm !font-normal",children:d}),c(P,{error:i})]})});et.displayName="PhoneInput";var tt=te.forwardRef(({className:t,...e},r)=>c("input",{className:o(fe({status:e?.status})," h-full !-mt-0 border-0 rounded-l-none !flex-1 !block !w-full",t),...e,ref:r}));tt.displayName="InputComponent";var Gt=({disabled:t,value:e,onChange:r,options:a,status:n,modal:l})=>{let d=te.useCallback(i=>{console.log(i),r(i)},[r]);return ee(q,{modal:l,children:[c(E,{disabled:t,children:ee("div",{className:o(R({status:n}),"!border-0 transition justify-center items-center disabled:text-base-500 flex gap-3 h-full rounded-e-none pl-2 pr-2"),children:[c(I,{country:e,countryName:e}),c("svg",{className:o("-mr-2 h-4 w-4 opacity-50",t?"hidden":"opacity-100"),width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:c("path",{d:"M16.5999 7.45825L11.1666 12.8916C10.5249 13.5333 9.4749 13.5333 8.83324 12.8916L3.3999 7.45825",stroke:"#959595",strokeWidth:"1.5",strokeMiterlimit:"10",strokeLinecap:"round",strokeLinejoin:"round"})})]})}),c(W,{portal:!l,className:"w-[200px] md:w-[300px] p-0",children:c(_,{children:c(Z,{children:ee(J,{className:"h-72",children:[c(z,{placeholder:"Search country..."}),c(X,{children:"No country found."}),c(K,{children:a.filter(i=>i.value).map(i=>ee(U,{className:"gap-2",onSelect:()=>d(i.value),children:[c(I,{country:i.value,countryName:i.label}),c("span",{className:"flex-1 text-sm",children:i.label}),i.value&&c("span",{className:"text-[#191919]/50 text-sm dark:text-white",children:`+${Ye.getCountryCallingCode(i.value)}`}),c("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",className:o("ml-auto",i.value===e?"opacity-100":"opacity-0"),children:c("path",{d:"M4 8.00008L6.66353 10.6636L12 5.33655",stroke:"#959595",strokeWidth:"1.06667",strokeLinecap:"round",strokeLinejoin:"round"})})]},`${i.value}-${i.label}`))})]})})})})]})},I=({country:t,countryName:e,className:r})=>{let a=Bt[t];return t==="GLOBAL"?c("span",{className:o("bg-white/20 flex h-4 w-6 overflow-hidden rounded-sm",r),children:c(Qe,{className:"w-full h-[90%]"})}):c("span",{className:o("bg-white/20 flex h-4 w-6 overflow-hidden rounded-sm",r),children:a&&c(a,{title:e})})};I.displayName="FlagComponent";import{jsx as w,jsxs as re}from"react/jsx-runtime";var _t=Je(),zt=({className:t,value:e,placeholder:r="",status:a,disabled:n})=>w(E,{asChild:!0,disabled:n,children:re("button",{disabled:n,className:o(R({status:a}),"[&>span]:justify-start [&>span]:items-center gap-2 flex w-full items-center justify-between goup",e?"":"text-[#79818C]",t),children:[e?re("div",{className:"flex gap-2 items-center",children:[w(I,{country:e,countryName:e,className:"ml-1 !w-6 h-5"}),re("span",{className:"",children:[" ",_t[e]]})]}):r??"Select options...",w("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",className:" data-[state=open]:goup-rotate-180",children:w("path",{d:"M16.5999 7.45825L11.1666 12.8916C10.5249 13.5333 9.4749 13.5333 8.83324 12.8916L3.3999 7.45825",stroke:"currentColor",strokeWidth:"1.5",strokeMiterlimit:"10",strokeLinecap:"round",strokeLinejoin:"round"})})]})}),Zt=({hideSearch:t=!0,showAsterisk:e,label:r,description:a,error:n,...l})=>{let d=he?.map(i=>({value:i?.internetCountryCode,label:i?.countryName,...i}));return re("div",{className:"relative space-y-1",children:[w(b,{showAsterisk:e,error:n,children:r}),w(se,{options:d,hideSearch:t,optionComponent:i=>re("div",{className:"w-full flex items-center gap-2",children:[w(I,{country:i?.internetCountryCode,countryName:i?.label,className:"ml-2 !w-6 !h-5"}),w("span",{className:"flex-1 text-sm",children:i?.label})]}),...l,children:w(zt,{value:l?.value?.value,status:l?.status,placeholder:l?.placeholder??" Select Country"})}),w(N,{className:"text-gray-400 text-sm !font-normal",children:a}),w(P,{error:n})]})};import Xt from"react-otp-input";import{cva as Kt}from"class-variance-authority";import{useMemo as Ut}from"react";import{jsx as rt}from"react/jsx-runtime";var $t=Kt("transition cursor-default placeholder:text-black dark:placeholder:text-white rounded-lg !h-14 !w-14 border aspect-square text-base font-semibold tracking-normal outline-none placeholder:text-sm placeholder:font-normal text-black focus:bg-white",{variants:{status:{default:"border-gray-300 dark:border-[#d4d4d4] focus:border-gray-400 focus-visible:!ring-offset-gray-200 focus:ring-offset-gray-200 !ring-gray-200 !focus-visible:ring-1 bg-white dark:!bg-transparent dark:focus-visible:!ring-0 dark:focus-within:!bg-transparent dark:text-white dark:focus-within:border-[#9299A2] dark:border-[#676767] dark:disabled:!border-[#9299A2]",error:"placeholder:text-red-600 bg-red-50 border-red-600 text-red-600 focus-within:bg-red-50 focus-within:border-red-600",loading:"placeholder:text-[#C4C4C4]"}},defaultVariants:{status:"default"}}),qt=({numInputs:t=4,inputStyle:e,containerStyle:r,placeholder:a="-",status:n,...l})=>{let d=Ut(()=>a||new Array(t).fill("").reduce((m,s)=>m+=s,""),[t,a]);return rt(Xt,{numInputs:t,placeholder:d,containerStyle:o("w-full",r),inputStyle:o($t({status:n}),e),renderInput:i=>rt("input",{...i}),...l})};export{we as Button,Zt as Country,ge as Dialog,I as FlagComponent,b as FormLabel,ae as Input,H as Loader,qt as OTPInput,We as PasswordInput,et as PhoneInput,Mt as Select,He as Textarea};
2
+ //# sourceMappingURL=index.mjs.map