@sikka/hawa 0.27.3-next → 0.27.5-next
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/alert/index.js +9 -0
- package/dist/alert/index.js.map +1 -1
- package/dist/alert/index.mjs +9 -0
- package/dist/alert/index.mjs.map +1 -1
- package/dist/appLayout/index.js +25 -2
- package/dist/appLayout/index.js.map +1 -1
- package/dist/appLayout/index.mjs +25 -2
- package/dist/appLayout/index.mjs.map +1 -1
- package/dist/backToTop/index.js +9 -0
- package/dist/backToTop/index.js.map +1 -1
- package/dist/backToTop/index.mjs +9 -0
- package/dist/backToTop/index.mjs.map +1 -1
- package/dist/blocks/auth/index.d.mts +1 -1
- package/dist/blocks/auth/index.d.ts +1 -1
- package/dist/blocks/auth/index.js +25 -2
- package/dist/blocks/auth/index.mjs +4 -4
- package/dist/blocks/feedback/index.d.mts +1 -0
- package/dist/blocks/feedback/index.d.ts +1 -0
- package/dist/blocks/feedback/index.js +34 -6
- package/dist/blocks/feedback/index.mjs +14 -9
- package/dist/blocks/index.d.mts +2 -1
- package/dist/blocks/index.d.ts +2 -1
- package/dist/blocks/index.js +34 -6
- package/dist/blocks/index.mjs +11 -6
- package/dist/blocks/misc/index.js +25 -2
- package/dist/blocks/misc/index.mjs +5 -5
- package/dist/blocks/pricing/index.js +25 -2
- package/dist/blocks/pricing/index.mjs +4 -4
- package/dist/button/index.js +9 -0
- package/dist/button/index.js.map +1 -1
- package/dist/button/index.mjs +9 -0
- package/dist/button/index.mjs.map +1 -1
- package/dist/{chunk-SOE62VBZ.mjs → chunk-4OK3TPKT.mjs} +1 -1
- package/dist/{chunk-ABEN43H7.mjs → chunk-7AHXC3YJ.mjs} +25 -2
- package/dist/{chunk-CA3JPYZA.mjs → chunk-BXIW2KSI.mjs} +1 -1
- package/dist/{chunk-V2ANNDSC.mjs → chunk-EIS2L3M5.mjs} +1 -1
- package/dist/{chunk-N3AIWCPY.mjs → chunk-GNC2LHTC.mjs} +25 -2
- package/dist/{chunk-ROYGC4RA.mjs → chunk-HAIWVXOA.mjs} +1 -1
- package/dist/{chunk-FEL67JJQ.mjs → chunk-LNFAR6KT.mjs} +1 -1
- package/dist/{chunk-O5VU32JT.mjs → chunk-RQ3W2WFZ.mjs} +1 -1
- package/dist/{chunk-MKRPDQOM.mjs → chunk-XEVUSQWZ.mjs} +1 -1
- package/dist/{chunk-USKURX7W.mjs → chunk-ZKSKF4ZL.mjs} +1 -1
- package/dist/codeBlock/index.js +25 -2
- package/dist/codeBlock/index.js.map +1 -1
- package/dist/codeBlock/index.mjs +25 -2
- package/dist/codeBlock/index.mjs.map +1 -1
- package/dist/colorPicker/index.js +16 -2
- package/dist/colorPicker/index.js.map +1 -1
- package/dist/colorPicker/index.mjs +16 -2
- package/dist/colorPicker/index.mjs.map +1 -1
- package/dist/combobox/index.js +16 -2
- package/dist/combobox/index.js.map +1 -1
- package/dist/combobox/index.mjs +16 -2
- package/dist/combobox/index.mjs.map +1 -1
- package/dist/dataTable/index.js +25 -2
- package/dist/dataTable/index.js.map +1 -1
- package/dist/dataTable/index.mjs +25 -2
- package/dist/dataTable/index.mjs.map +1 -1
- package/dist/docsLayout/index.js +9 -0
- package/dist/docsLayout/index.js.map +1 -1
- package/dist/docsLayout/index.mjs +9 -0
- package/dist/docsLayout/index.mjs.map +1 -1
- package/dist/elements/index.d.mts +2 -0
- package/dist/elements/index.d.ts +2 -0
- package/dist/elements/index.js +25 -2
- package/dist/elements/index.mjs +3 -3
- package/dist/fileDropzone/index.js +9 -0
- package/dist/fileDropzone/index.js.map +1 -1
- package/dist/fileDropzone/index.mjs +9 -0
- package/dist/fileDropzone/index.mjs.map +1 -1
- package/dist/index.css +3 -0
- package/dist/index.d.mts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +34 -6
- package/dist/index.mjs +34 -6
- package/dist/input/index.d.mts +1 -1
- package/dist/input/index.d.ts +1 -1
- package/dist/input/index.js +16 -2
- package/dist/input/index.js.map +1 -1
- package/dist/input/index.mjs +16 -2
- package/dist/input/index.mjs.map +1 -1
- package/dist/interfaceSettings/index.js +16 -2
- package/dist/interfaceSettings/index.js.map +1 -1
- package/dist/interfaceSettings/index.mjs +16 -2
- package/dist/interfaceSettings/index.mjs.map +1 -1
- package/dist/label/index.js +16 -2
- package/dist/label/index.js.map +1 -1
- package/dist/label/index.mjs +16 -2
- package/dist/label/index.mjs.map +1 -1
- package/dist/layout/index.js +25 -2
- package/dist/layout/index.mjs +2 -2
- package/dist/loading/index.js +9 -0
- package/dist/loading/index.js.map +1 -1
- package/dist/loading/index.mjs +9 -0
- package/dist/loading/index.mjs.map +1 -1
- package/dist/passwordInput/index.js +16 -2
- package/dist/passwordInput/index.js.map +1 -1
- package/dist/passwordInput/index.mjs +16 -2
- package/dist/passwordInput/index.mjs.map +1 -1
- package/dist/phoneInput/index.js +16 -2
- package/dist/phoneInput/index.js.map +1 -1
- package/dist/phoneInput/index.mjs +16 -2
- package/dist/phoneInput/index.mjs.map +1 -1
- package/dist/radio/index.js +16 -2
- package/dist/radio/index.js.map +1 -1
- package/dist/radio/index.mjs +16 -2
- package/dist/radio/index.mjs.map +1 -1
- package/dist/select/index.js +16 -2
- package/dist/select/index.js.map +1 -1
- package/dist/select/index.mjs +16 -2
- package/dist/select/index.mjs.map +1 -1
- package/dist/signature/index.js +16 -2
- package/dist/signature/index.js.map +1 -1
- package/dist/signature/index.mjs +16 -2
- package/dist/signature/index.mjs.map +1 -1
- package/dist/sortButton/index.js +9 -0
- package/dist/sortButton/index.js.map +1 -1
- package/dist/sortButton/index.mjs +9 -0
- package/dist/sortButton/index.mjs.map +1 -1
- package/dist/splitButton/index.js +9 -0
- package/dist/splitButton/index.js.map +1 -1
- package/dist/splitButton/index.mjs +9 -0
- package/dist/splitButton/index.mjs.map +1 -1
- package/dist/textarea/index.js +16 -2
- package/dist/textarea/index.js.map +1 -1
- package/dist/textarea/index.mjs +16 -2
- package/dist/textarea/index.mjs.map +1 -1
- package/dist/tooltip/index.d.mts +2 -0
- package/dist/tooltip/index.d.ts +2 -0
- package/dist/tooltip/index.js +16 -2
- package/dist/tooltip/index.js.map +1 -1
- package/dist/tooltip/index.mjs +16 -2
- package/dist/tooltip/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
@@ -366,6 +366,14 @@ var Loading = ({
|
|
366
366
|
lg: "hawa-h-14 hawa-w-14",
|
367
367
|
xl: "hawa-h-24 hawa-w-24"
|
368
368
|
};
|
369
|
+
let progressSizes = {
|
370
|
+
button: "hawa-h-1",
|
371
|
+
xs: "hawa-h-1 hawa-w-1",
|
372
|
+
sm: "hawa-h-6 hawa-w-6",
|
373
|
+
normal: "",
|
374
|
+
lg: "hawa-h-6",
|
375
|
+
xl: "hawa-h-10 hawa-w-64"
|
376
|
+
};
|
369
377
|
let animationStyles = {
|
370
378
|
pulse: "hawa-animate-in hawa-fade-in hawa-duration-1000",
|
371
379
|
bounce: "hawa-animate-bounce"
|
@@ -496,6 +504,7 @@ var Loading = ({
|
|
496
504
|
{
|
497
505
|
className: cn(
|
498
506
|
"progress-loading after:hawa-rounded hawa-rounded",
|
507
|
+
progressSizes[size],
|
499
508
|
classNames == null ? void 0 : classNames.container
|
500
509
|
)
|
501
510
|
}
|
@@ -560,13 +569,17 @@ var Loading = ({
|
|
560
569
|
// elements/tooltip/Tooltip.tsx
|
561
570
|
var import_react2 = __toESM(require("react"));
|
562
571
|
var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
|
563
|
-
var TooltipContent = import_react2.default.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ import_react2.default.createElement(
|
572
|
+
var TooltipContent = import_react2.default.forwardRef(({ className, sideOffset = 4, size = "default", ...props }, ref) => /* @__PURE__ */ import_react2.default.createElement(
|
564
573
|
TooltipPrimitive.Content,
|
565
574
|
{
|
566
575
|
ref,
|
567
576
|
sideOffset,
|
568
577
|
className: cn(
|
569
578
|
"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
|
579
|
+
{
|
580
|
+
"hawa-text-xs": size === "small",
|
581
|
+
"hawa-text-xl": size === "large"
|
582
|
+
},
|
570
583
|
className
|
571
584
|
),
|
572
585
|
...props
|
@@ -577,6 +590,7 @@ var TooltipArrow = import_react2.default.forwardRef(({ className, ...props }, re
|
|
577
590
|
TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
|
578
591
|
var Tooltip = ({
|
579
592
|
side,
|
593
|
+
size,
|
580
594
|
open,
|
581
595
|
content,
|
582
596
|
children,
|
@@ -603,7 +617,16 @@ var Tooltip = ({
|
|
603
617
|
...props
|
604
618
|
},
|
605
619
|
/* @__PURE__ */ import_react2.default.createElement(TooltipPrimitive.Trigger, { ...triggerProps }, children),
|
606
|
-
/* @__PURE__ */ import_react2.default.createElement(
|
620
|
+
/* @__PURE__ */ import_react2.default.createElement(
|
621
|
+
TooltipContent,
|
622
|
+
{
|
623
|
+
size,
|
624
|
+
side,
|
625
|
+
align: "center",
|
626
|
+
...contentProps
|
627
|
+
},
|
628
|
+
content
|
629
|
+
)
|
607
630
|
)
|
608
631
|
);
|
609
632
|
};
|
@@ -10569,8 +10592,12 @@ var FeedbackForm = (props) => {
|
|
10569
10592
|
requestType: z7.string({ required_error: (_b = (_a = props.texts) == null ? void 0 : _a.requestType) == null ? void 0 : _b.required }).min(1, { message: (_d = (_c = props.texts) == null ? void 0 : _c.requestType) == null ? void 0 : _d.required }),
|
10570
10593
|
description: z7.string({ required_error: (_f = (_e = props.texts) == null ? void 0 : _e.description) == null ? void 0 : _f.required }).min(10, { message: (_h = (_g = props.texts) == null ? void 0 : _g.description) == null ? void 0 : _h.tooShort })
|
10571
10594
|
});
|
10572
|
-
const { handleSubmit, control, formState } = (0, import_react_hook_form7.useForm)({
|
10573
|
-
resolver: (0, import_zod7.zodResolver)(formSchema)
|
10595
|
+
const { handleSubmit, control, formState, reset } = (0, import_react_hook_form7.useForm)({
|
10596
|
+
resolver: (0, import_zod7.zodResolver)(formSchema),
|
10597
|
+
defaultValues: {
|
10598
|
+
requestType: "",
|
10599
|
+
description: ""
|
10600
|
+
}
|
10574
10601
|
});
|
10575
10602
|
return /* @__PURE__ */ import_react56.default.createElement(
|
10576
10603
|
Card,
|
@@ -10591,7 +10618,7 @@ var FeedbackForm = (props) => {
|
|
10591
10618
|
console.log("Form is submitted but onSubmit prop is missing");
|
10592
10619
|
}
|
10593
10620
|
}),
|
10594
|
-
className: "hawa-flex hawa-flex-col hawa-gap-
|
10621
|
+
className: "hawa-flex hawa-flex-col hawa-gap-2"
|
10595
10622
|
},
|
10596
10623
|
/* @__PURE__ */ import_react56.default.createElement(Label2, null),
|
10597
10624
|
/* @__PURE__ */ import_react56.default.createElement(
|
@@ -10630,6 +10657,7 @@ var FeedbackForm = (props) => {
|
|
10630
10657
|
Textarea,
|
10631
10658
|
{
|
10632
10659
|
helperText: formState.errors.description && ((_b2 = (_a2 = formState.errors.description) == null ? void 0 : _a2.message) == null ? void 0 : _b2.toString()),
|
10660
|
+
classNames: { textarea: "hawa-h-full hawa-min-h-20" },
|
10633
10661
|
label: (_d2 = (_c2 = props.texts) == null ? void 0 : _c2.description) == null ? void 0 : _d2.label,
|
10634
10662
|
textareaProps: {
|
10635
10663
|
onChange: (e) => {
|
@@ -10643,7 +10671,7 @@ var FeedbackForm = (props) => {
|
|
10643
10671
|
}
|
10644
10672
|
}
|
10645
10673
|
),
|
10646
|
-
/* @__PURE__ */ import_react56.default.createElement(Button, { type: "submit" }, (_i = props.texts) == null ? void 0 : _i.submit)
|
10674
|
+
/* @__PURE__ */ import_react56.default.createElement(Button, { isLoading: props.loadingSubmission, type: "submit" }, (_i = props.texts) == null ? void 0 : _i.submit)
|
10647
10675
|
))
|
10648
10676
|
);
|
10649
10677
|
};
|
package/dist/index.mjs
CHANGED
@@ -133,6 +133,14 @@ var Loading = ({
|
|
133
133
|
lg: "hawa-h-14 hawa-w-14",
|
134
134
|
xl: "hawa-h-24 hawa-w-24"
|
135
135
|
};
|
136
|
+
let progressSizes = {
|
137
|
+
button: "hawa-h-1",
|
138
|
+
xs: "hawa-h-1 hawa-w-1",
|
139
|
+
sm: "hawa-h-6 hawa-w-6",
|
140
|
+
normal: "",
|
141
|
+
lg: "hawa-h-6",
|
142
|
+
xl: "hawa-h-10 hawa-w-64"
|
143
|
+
};
|
136
144
|
let animationStyles = {
|
137
145
|
pulse: "hawa-animate-in hawa-fade-in hawa-duration-1000",
|
138
146
|
bounce: "hawa-animate-bounce"
|
@@ -263,6 +271,7 @@ var Loading = ({
|
|
263
271
|
{
|
264
272
|
className: cn(
|
265
273
|
"progress-loading after:hawa-rounded hawa-rounded",
|
274
|
+
progressSizes[size],
|
266
275
|
classNames == null ? void 0 : classNames.container
|
267
276
|
)
|
268
277
|
}
|
@@ -327,13 +336,17 @@ var Loading = ({
|
|
327
336
|
// elements/tooltip/Tooltip.tsx
|
328
337
|
import React3 from "react";
|
329
338
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
330
|
-
var TooltipContent = React3.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React3.createElement(
|
339
|
+
var TooltipContent = React3.forwardRef(({ className, sideOffset = 4, size = "default", ...props }, ref) => /* @__PURE__ */ React3.createElement(
|
331
340
|
TooltipPrimitive.Content,
|
332
341
|
{
|
333
342
|
ref,
|
334
343
|
sideOffset,
|
335
344
|
className: cn(
|
336
345
|
"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
|
346
|
+
{
|
347
|
+
"hawa-text-xs": size === "small",
|
348
|
+
"hawa-text-xl": size === "large"
|
349
|
+
},
|
337
350
|
className
|
338
351
|
),
|
339
352
|
...props
|
@@ -344,6 +357,7 @@ var TooltipArrow = React3.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
344
357
|
TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
|
345
358
|
var Tooltip = ({
|
346
359
|
side,
|
360
|
+
size,
|
347
361
|
open,
|
348
362
|
content,
|
349
363
|
children,
|
@@ -370,7 +384,16 @@ var Tooltip = ({
|
|
370
384
|
...props
|
371
385
|
},
|
372
386
|
/* @__PURE__ */ React3.createElement(TooltipPrimitive.Trigger, { ...triggerProps }, children),
|
373
|
-
/* @__PURE__ */ React3.createElement(
|
387
|
+
/* @__PURE__ */ React3.createElement(
|
388
|
+
TooltipContent,
|
389
|
+
{
|
390
|
+
size,
|
391
|
+
side,
|
392
|
+
align: "center",
|
393
|
+
...contentProps
|
394
|
+
},
|
395
|
+
content
|
396
|
+
)
|
374
397
|
)
|
375
398
|
);
|
376
399
|
};
|
@@ -10351,8 +10374,12 @@ var FeedbackForm = (props) => {
|
|
10351
10374
|
requestType: z7.string({ required_error: (_b = (_a = props.texts) == null ? void 0 : _a.requestType) == null ? void 0 : _b.required }).min(1, { message: (_d = (_c = props.texts) == null ? void 0 : _c.requestType) == null ? void 0 : _d.required }),
|
10352
10375
|
description: z7.string({ required_error: (_f = (_e = props.texts) == null ? void 0 : _e.description) == null ? void 0 : _f.required }).min(10, { message: (_h = (_g = props.texts) == null ? void 0 : _g.description) == null ? void 0 : _h.tooShort })
|
10353
10376
|
});
|
10354
|
-
const { handleSubmit, control, formState } = useForm7({
|
10355
|
-
resolver: zodResolver7(formSchema)
|
10377
|
+
const { handleSubmit, control, formState, reset } = useForm7({
|
10378
|
+
resolver: zodResolver7(formSchema),
|
10379
|
+
defaultValues: {
|
10380
|
+
requestType: "",
|
10381
|
+
description: ""
|
10382
|
+
}
|
10356
10383
|
});
|
10357
10384
|
return /* @__PURE__ */ React83.createElement(
|
10358
10385
|
Card,
|
@@ -10373,7 +10400,7 @@ var FeedbackForm = (props) => {
|
|
10373
10400
|
console.log("Form is submitted but onSubmit prop is missing");
|
10374
10401
|
}
|
10375
10402
|
}),
|
10376
|
-
className: "hawa-flex hawa-flex-col hawa-gap-
|
10403
|
+
className: "hawa-flex hawa-flex-col hawa-gap-2"
|
10377
10404
|
},
|
10378
10405
|
/* @__PURE__ */ React83.createElement(Label2, null),
|
10379
10406
|
/* @__PURE__ */ React83.createElement(
|
@@ -10412,6 +10439,7 @@ var FeedbackForm = (props) => {
|
|
10412
10439
|
Textarea,
|
10413
10440
|
{
|
10414
10441
|
helperText: formState.errors.description && ((_b2 = (_a2 = formState.errors.description) == null ? void 0 : _a2.message) == null ? void 0 : _b2.toString()),
|
10442
|
+
classNames: { textarea: "hawa-h-full hawa-min-h-20" },
|
10415
10443
|
label: (_d2 = (_c2 = props.texts) == null ? void 0 : _c2.description) == null ? void 0 : _d2.label,
|
10416
10444
|
textareaProps: {
|
10417
10445
|
onChange: (e) => {
|
@@ -10425,7 +10453,7 @@ var FeedbackForm = (props) => {
|
|
10425
10453
|
}
|
10426
10454
|
}
|
10427
10455
|
),
|
10428
|
-
/* @__PURE__ */ React83.createElement(Button, { type: "submit" }, (_i = props.texts) == null ? void 0 : _i.submit)
|
10456
|
+
/* @__PURE__ */ React83.createElement(Button, { isLoading: props.loadingSubmission, type: "submit" }, (_i = props.texts) == null ? void 0 : _i.submit)
|
10429
10457
|
))
|
10430
10458
|
);
|
10431
10459
|
};
|
package/dist/input/index.d.mts
CHANGED
@@ -42,7 +42,7 @@ type TextFieldTypes = React__default.InputHTMLAttributes<HTMLInputElement> & {
|
|
42
42
|
declare const Input: React__default.ForwardRefExoticComponent<React__default.InputHTMLAttributes<HTMLInputElement> & {
|
43
43
|
isLoading?: boolean | undefined;
|
44
44
|
containerClassName?: string | undefined;
|
45
|
-
margin?: "none" | "
|
45
|
+
margin?: "none" | "large" | "normal" | undefined;
|
46
46
|
width?: "full" | "small" | "auto" | "normal" | undefined;
|
47
47
|
/** The label of the input field */
|
48
48
|
label?: any;
|
package/dist/input/index.d.ts
CHANGED
@@ -42,7 +42,7 @@ type TextFieldTypes = React__default.InputHTMLAttributes<HTMLInputElement> & {
|
|
42
42
|
declare const Input: React__default.ForwardRefExoticComponent<React__default.InputHTMLAttributes<HTMLInputElement> & {
|
43
43
|
isLoading?: boolean | undefined;
|
44
44
|
containerClassName?: string | undefined;
|
45
|
-
margin?: "none" | "
|
45
|
+
margin?: "none" | "large" | "normal" | undefined;
|
46
46
|
width?: "full" | "small" | "auto" | "normal" | undefined;
|
47
47
|
/** The label of the input field */
|
48
48
|
label?: any;
|
package/dist/input/index.js
CHANGED
@@ -50,13 +50,17 @@ var React2 = __toESM(require("react"));
|
|
50
50
|
// elements/tooltip/Tooltip.tsx
|
51
51
|
var import_react = __toESM(require("react"));
|
52
52
|
var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
|
53
|
-
var TooltipContent = import_react.default.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ import_react.default.createElement(
|
53
|
+
var TooltipContent = import_react.default.forwardRef(({ className, sideOffset = 4, size = "default", ...props }, ref) => /* @__PURE__ */ import_react.default.createElement(
|
54
54
|
TooltipPrimitive.Content,
|
55
55
|
{
|
56
56
|
ref,
|
57
57
|
sideOffset,
|
58
58
|
className: cn(
|
59
59
|
"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
|
60
|
+
{
|
61
|
+
"hawa-text-xs": size === "small",
|
62
|
+
"hawa-text-xl": size === "large"
|
63
|
+
},
|
60
64
|
className
|
61
65
|
),
|
62
66
|
...props
|
@@ -67,6 +71,7 @@ var TooltipArrow = import_react.default.forwardRef(({ className, ...props }, ref
|
|
67
71
|
TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
|
68
72
|
var Tooltip = ({
|
69
73
|
side,
|
74
|
+
size,
|
70
75
|
open,
|
71
76
|
content,
|
72
77
|
children,
|
@@ -93,7 +98,16 @@ var Tooltip = ({
|
|
93
98
|
...props
|
94
99
|
},
|
95
100
|
/* @__PURE__ */ import_react.default.createElement(TooltipPrimitive.Trigger, { ...triggerProps }, children),
|
96
|
-
/* @__PURE__ */ import_react.default.createElement(
|
101
|
+
/* @__PURE__ */ import_react.default.createElement(
|
102
|
+
TooltipContent,
|
103
|
+
{
|
104
|
+
size,
|
105
|
+
side,
|
106
|
+
align: "center",
|
107
|
+
...contentProps
|
108
|
+
},
|
109
|
+
content
|
110
|
+
)
|
97
111
|
)
|
98
112
|
);
|
99
113
|
};
|
package/dist/input/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/input/index.ts","../../elements/input/Input.tsx","../../util/index.ts","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx","../../elements/skeleton/Skeleton.tsx"],"sourcesContent":["export * from \"./Input\";\n","import React, { forwardRef } from \"react\";\n\nimport { cn } from \"@util/index\";\n\nimport { Label, LabelProps } from \"../label/Label\";\nimport { Skeleton } from \"../skeleton/Skeleton\";\n\nexport type TextFieldTypes = React.InputHTMLAttributes<HTMLInputElement> & {\n isLoading?: boolean;\n containerClassName?: string;\n margin?: \"none\" | \"normal\" | \"large\";\n width?: \"small\" | \"normal\" | \"full\" | \"auto\";\n /** The label of the input field */\n label?: any;\n labelProps?: LabelProps;\n hideSeparator?: boolean;\n /** The small red text under the input field to show validation. */\n helperText?: any;\n forceHideHelperText?: boolean;\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /** The icon inside the input field */\n icon?: any;\n /** Boolean to enable/disable editing the input field and using it as a text field */\n preview?: boolean;\n // maxLength?: any;\n iconInside?: React.ReactNode;\n endIcon?: React.ReactNode;\n endIconProps?: { className?: string };\n startIcon?: React.ReactNode;\n placeholder?: React.ReactNode;\n /** Show the count of characters left in the input field. Works along with maxLength prop. */\n showCount?: boolean;\n countPosition?: \"top\" | \"bottom\" | \"center\";\n popup?: boolean;\n popupContent?: React.ReactNode;\n};\nexport const Input = forwardRef<HTMLInputElement, TextFieldTypes>(\n (\n {\n margin = \"none\",\n width = \"full\",\n preview = false,\n forceHideHelperText = false,\n labelProps,\n placeholder,\n showCount,\n inputProps,\n countPosition = \"bottom\",\n ...props\n },\n ref\n ) => {\n let marginStyles = {\n none: \"hawa-mb-0\",\n normal: \"hawa-mb-3\",\n large: \"hawa-mb-5\"\n };\n let widthStyles = {\n small: \"hawa-w-full hawa-max-w-2xs\",\n normal: \"hawa-w-1/2\",\n full: \"hawa-w-full\",\n auto: \"\"\n };\n\n let defaultStyle =\n \"hawa-flex hawa-max-h-fit hawa-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-gap-0\";\n let defaultInputStyle =\n \"hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-3 hawa-text-sm \";\n\n return (\n <div\n className={cn(\n defaultStyle,\n marginStyles[margin],\n widthStyles[width],\n props.containerClassName,\n \"hawa-w-full hawa-gap-2\"\n )}\n >\n {props.label && <Label {...labelProps}>{props.label}</Label>}\n {props.isLoading ? (\n <div className=\"hawa-pb-2\">\n <Skeleton className=\"hawa-h-[40px] hawa-w-full\" />\n </div>\n ) : (\n <>\n {!props.hideSeparator && (\n <div\n className={cn(\n \"hawa-absolute hawa-top-[22px] hawa-h-[0.8px] hawa-w-full hawa-bg-gray-200 hawa-transition-all dark:hawa-bg-gray-800\",\n preview ? \"hawa-opacity-100\" : \"hawa-opacity-0\"\n )}\n ></div>\n )}\n <>\n <div className={\"hawa-relative\"}>\n {props.startIcon && (\n <div className=\"hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2\">\n {props.startIcon}\n </div>\n )}\n {props.endIcon && (\n <div\n className={cn(\n \"hawa-absolute hawa-end-3 hawa-top-1/2 hawa--translate-y-1/2\",\n props.endIconProps?.className\n )}\n >\n {props.endIcon}\n </div>\n )}\n <input\n required\n dir={props.dir}\n type={props.type}\n value={props.value}\n onChange={props.onChange}\n autoComplete={props.autoComplete}\n defaultValue={props.defaultValue}\n placeholder={placeholder}\n disabled={props.disabled || preview}\n style={{ height: 40 }}\n {...inputProps}\n className={cn(\n defaultInputStyle,\n \" focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0 dark:hawa-text-white\",\n {\n \"hawa-pe-9\": props.endIcon,\n \"hawa-ps-9\": props.startIcon,\n \"hawa-pe-[60px]\": countPosition === \"center\"\n },\n preview &&\n \"hawa-border-transparent hawa-bg-transparent hawa-px-0\",\n inputProps?.className\n )}\n />\n </div>\n\n {/* Regular helper text */}\n {!forceHideHelperText && (\n <p\n className={cn(\n \"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all\",\n props.helperText\n ? \"hawa-h-4 hawa-opacity-100\"\n : \"hawa-h-0 hawa-opacity-0\"\n )}\n >\n {props.helperText}\n </p>\n )}\n {/* Popover helper text */}\n {!props.disabled && forceHideHelperText && (\n <div\n className={cn(\n \"hawa-absolute hawa-end-0 hawa-top-[47px] hawa-z-20 hawa-translate-y-1/2 hawa-rounded hawa-bg-background hawa-text-start hawa-text-xs hawa-text-helper-color hawa-drop-shadow-md hawa-transition-all\",\n props.helperText\n ? \"hawa-border hawa-p-1\"\n : \"hawa-border-none hawa-p-0\"\n )}\n >\n {props.helperText}\n </div>\n )}\n {/* Character Counter */}\n {showCount && (\n <div\n className={cn(\n \"hawa-absolute hawa-translate-y-1/2 hawa-text-start hawa-text-xs hawa-transition-all\",\n {\n \"hawa-end-0 hawa-top-[62px]\": countPosition === \"bottom\",\n \"hawa-bottom-[62px] hawa-end-0\": countPosition === \"top\",\n \"hawa-end-2\": countPosition === \"center\"\n }\n )}\n >\n {props.value ? String(props.value).length : 0}/\n {props.maxLength}\n </div>\n )}\n\n {/* Popover helper text */}\n {/* {props.popup && (\n <div\n className={cn(\n \"hawa-absolute hawa-top-[47px] hawa-min-h-fit hawa-w-full hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start hawa-rounded hawa-end-0 hawa-z-20 hawa-drop-shadow-md hawa-bg-background hawa-translate-y-1/2\",\n props.helperText\n ? \"hawa-border hawa-p-1\"\n : \"hawa-border-none hawa-p-0\"\n )}\n >\n {props.popupContent}\n </div>\n )} */}\n </>\n </>\n )}\n </div>\n );\n }\n);\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import * as React from \"react\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\nimport { Tooltip } from \"../tooltip\";\n\nexport type LabelProps = {\n hint?: React.ReactNode;\n hintSide?: PositionType;\n htmlFor?: string;\n required?: boolean;\n};\n\nconst Label = React.forwardRef<\n HTMLLabelElement,\n React.LabelHTMLAttributes<HTMLLabelElement> & LabelProps\n>(({ className, hint, hintSide, required, children, ...props }, ref) => (\n <div className=\"hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all\">\n <label\n ref={ref}\n className={cn(\n \"hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70\",\n className\n )}\n {...props}\n >\n {children}\n {required && <span className=\"hawa-mx-0.5 hawa-text-red-500\">*</span>}\n </label>\n {hint && (\n <Tooltip\n content={hint}\n side={hintSide}\n triggerProps={{\n tabIndex: -1,\n onClick: (event) => event.preventDefault()\n }}\n >\n <div>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"hawa-h-[14px] hawa-w-[14px] hawa-cursor-help\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\" />\n <path d=\"M12 17h.01\" />\n </svg>\n </div>\n </Tooltip>\n )}\n </div>\n));\n\nLabel.displayName = \"Label\";\n\nexport { Label };\n","import React from \"react\";\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n \"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2\",\n className\n )}\n {...props}\n />\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nconst TooltipArrow = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Arrow>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n <TooltipPrimitive.Arrow ref={ref} className={cn(className)} {...props} />\n));\nTooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;\n\ntype TooltipTypes = {\n /** Controls the open state of the tooltip. */\n open?: any;\n /** Specifies the side where the tooltip will appear. */\n side?: PositionType;\n /** Content to be displayed within the tooltip. */\n content?: any;\n /** Elements to which the tooltip is anchored. */\n children?: any;\n /** Sets the default open state of the tooltip. */\n defaultOpen?: any;\n /** Event handler for open state changes. */\n onOpenChange?: any;\n /** Duration of the delay before the tooltip appears. */\n delayDuration?: any;\n triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n contentProps?: TooltipPrimitive.TooltipContentProps;\n providerProps?: TooltipPrimitive.TooltipProviderProps;\n};\n\nconst Tooltip: React.FunctionComponent<TooltipTypes> = ({\n side,\n open,\n content,\n children,\n defaultOpen,\n onOpenChange,\n triggerProps,\n contentProps,\n providerProps,\n delayDuration = 300,\n ...props\n}) => {\n return (\n <TooltipPrimitive.TooltipProvider\n delayDuration={delayDuration}\n {...providerProps}\n >\n <TooltipPrimitive.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n {...props}\n >\n <TooltipPrimitive.Trigger {...triggerProps}>\n {children}\n </TooltipPrimitive.Trigger>\n <TooltipContent side={side} align=\"center\" {...contentProps}>\n {content}\n </TooltipContent>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.TooltipProvider>\n );\n};\n\nexport { Tooltip };\n","import React from \"react\";\n\nimport { cn } from \"@util/index\";\n\ninterface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n className?: string;\n animation?: \"none\" | \"pulse\" | \"shimmer\";\n content?: any;\n}\n\nfunction Skeleton({\n className,\n content,\n animation = \"pulse\",\n ...props\n}: SkeletonProps) {\n const animationStyles = {\n none: \"hawa-rounded hawa-bg-muted\",\n pulse: \"hawa-animate-pulse hawa-rounded hawa-bg-muted\",\n shimmer:\n \"hawa-space-y-5 hawa-rounded hawa-bg-muted hawa-p-4 hawa-relative before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden before:hawa-border-t before:hawa-border-rose-100/10\"\n };\n return (\n <div\n className={cn(\n animationStyles[animation],\n content &&\n \"hawa-flex hawa-flex-col hawa-items-center hawa-justify-center\",\n className\n )}\n {...props}\n >\n {content && content}\n </div>\n );\n}\n\nexport { Skeleton };\n"],"mappings":"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","names":["import_react","React","React","import_react","React","React"]}
|
1
|
+
{"version":3,"sources":["../../elements/input/index.ts","../../elements/input/Input.tsx","../../util/index.ts","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx","../../elements/skeleton/Skeleton.tsx"],"sourcesContent":["export * from \"./Input\";\n","import React, { forwardRef } from \"react\";\n\nimport { cn } from \"@util/index\";\n\nimport { Label, LabelProps } from \"../label/Label\";\nimport { Skeleton } from \"../skeleton/Skeleton\";\n\nexport type TextFieldTypes = React.InputHTMLAttributes<HTMLInputElement> & {\n isLoading?: boolean;\n containerClassName?: string;\n margin?: \"none\" | \"normal\" | \"large\";\n width?: \"small\" | \"normal\" | \"full\" | \"auto\";\n /** The label of the input field */\n label?: any;\n labelProps?: LabelProps;\n hideSeparator?: boolean;\n /** The small red text under the input field to show validation. */\n helperText?: any;\n forceHideHelperText?: boolean;\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /** The icon inside the input field */\n icon?: any;\n /** Boolean to enable/disable editing the input field and using it as a text field */\n preview?: boolean;\n // maxLength?: any;\n iconInside?: React.ReactNode;\n endIcon?: React.ReactNode;\n endIconProps?: { className?: string };\n startIcon?: React.ReactNode;\n placeholder?: React.ReactNode;\n /** Show the count of characters left in the input field. Works along with maxLength prop. */\n showCount?: boolean;\n countPosition?: \"top\" | \"bottom\" | \"center\";\n popup?: boolean;\n popupContent?: React.ReactNode;\n};\nexport const Input = forwardRef<HTMLInputElement, TextFieldTypes>(\n (\n {\n margin = \"none\",\n width = \"full\",\n preview = false,\n forceHideHelperText = false,\n labelProps,\n placeholder,\n showCount,\n inputProps,\n countPosition = \"bottom\",\n ...props\n },\n ref\n ) => {\n let marginStyles = {\n none: \"hawa-mb-0\",\n normal: \"hawa-mb-3\",\n large: \"hawa-mb-5\"\n };\n let widthStyles = {\n small: \"hawa-w-full hawa-max-w-2xs\",\n normal: \"hawa-w-1/2\",\n full: \"hawa-w-full\",\n auto: \"\"\n };\n\n let defaultStyle =\n \"hawa-flex hawa-max-h-fit hawa-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-gap-0\";\n let defaultInputStyle =\n \"hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-3 hawa-text-sm \";\n\n return (\n <div\n className={cn(\n defaultStyle,\n marginStyles[margin],\n widthStyles[width],\n props.containerClassName,\n \"hawa-w-full hawa-gap-2\"\n )}\n >\n {props.label && <Label {...labelProps}>{props.label}</Label>}\n {props.isLoading ? (\n <div className=\"hawa-pb-2\">\n <Skeleton className=\"hawa-h-[40px] hawa-w-full\" />\n </div>\n ) : (\n <>\n {!props.hideSeparator && (\n <div\n className={cn(\n \"hawa-absolute hawa-top-[22px] hawa-h-[0.8px] hawa-w-full hawa-bg-gray-200 hawa-transition-all dark:hawa-bg-gray-800\",\n preview ? \"hawa-opacity-100\" : \"hawa-opacity-0\"\n )}\n ></div>\n )}\n <>\n <div className={\"hawa-relative\"}>\n {props.startIcon && (\n <div className=\"hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2\">\n {props.startIcon}\n </div>\n )}\n {props.endIcon && (\n <div\n className={cn(\n \"hawa-absolute hawa-end-3 hawa-top-1/2 hawa--translate-y-1/2\",\n props.endIconProps?.className\n )}\n >\n {props.endIcon}\n </div>\n )}\n <input\n required\n dir={props.dir}\n type={props.type}\n value={props.value}\n onChange={props.onChange}\n autoComplete={props.autoComplete}\n defaultValue={props.defaultValue}\n placeholder={placeholder}\n disabled={props.disabled || preview}\n style={{ height: 40 }}\n {...inputProps}\n className={cn(\n defaultInputStyle,\n \" focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0 dark:hawa-text-white\",\n {\n \"hawa-pe-9\": props.endIcon,\n \"hawa-ps-9\": props.startIcon,\n \"hawa-pe-[60px]\": countPosition === \"center\"\n },\n preview &&\n \"hawa-border-transparent hawa-bg-transparent hawa-px-0\",\n inputProps?.className\n )}\n />\n </div>\n\n {/* Regular helper text */}\n {!forceHideHelperText && (\n <p\n className={cn(\n \"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all\",\n props.helperText\n ? \"hawa-h-4 hawa-opacity-100\"\n : \"hawa-h-0 hawa-opacity-0\"\n )}\n >\n {props.helperText}\n </p>\n )}\n {/* Popover helper text */}\n {!props.disabled && forceHideHelperText && (\n <div\n className={cn(\n \"hawa-absolute hawa-end-0 hawa-top-[47px] hawa-z-20 hawa-translate-y-1/2 hawa-rounded hawa-bg-background hawa-text-start hawa-text-xs hawa-text-helper-color hawa-drop-shadow-md hawa-transition-all\",\n props.helperText\n ? \"hawa-border hawa-p-1\"\n : \"hawa-border-none hawa-p-0\"\n )}\n >\n {props.helperText}\n </div>\n )}\n {/* Character Counter */}\n {showCount && (\n <div\n className={cn(\n \"hawa-absolute hawa-translate-y-1/2 hawa-text-start hawa-text-xs hawa-transition-all\",\n {\n \"hawa-end-0 hawa-top-[62px]\": countPosition === \"bottom\",\n \"hawa-bottom-[62px] hawa-end-0\": countPosition === \"top\",\n \"hawa-end-2\": countPosition === \"center\"\n }\n )}\n >\n {props.value ? String(props.value).length : 0}/\n {props.maxLength}\n </div>\n )}\n\n {/* Popover helper text */}\n {/* {props.popup && (\n <div\n className={cn(\n \"hawa-absolute hawa-top-[47px] hawa-min-h-fit hawa-w-full hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start hawa-rounded hawa-end-0 hawa-z-20 hawa-drop-shadow-md hawa-bg-background hawa-translate-y-1/2\",\n props.helperText\n ? \"hawa-border hawa-p-1\"\n : \"hawa-border-none hawa-p-0\"\n )}\n >\n {props.popupContent}\n </div>\n )} */}\n </>\n </>\n )}\n </div>\n );\n }\n);\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import * as React from \"react\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\nimport { Tooltip } from \"../tooltip\";\n\nexport type LabelProps = {\n hint?: React.ReactNode;\n hintSide?: PositionType;\n htmlFor?: string;\n required?: boolean;\n};\n\nconst Label = React.forwardRef<\n HTMLLabelElement,\n React.LabelHTMLAttributes<HTMLLabelElement> & LabelProps\n>(({ className, hint, hintSide, required, children, ...props }, ref) => (\n <div className=\"hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all\">\n <label\n ref={ref}\n className={cn(\n \"hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70\",\n className\n )}\n {...props}\n >\n {children}\n {required && <span className=\"hawa-mx-0.5 hawa-text-red-500\">*</span>}\n </label>\n {hint && (\n <Tooltip\n content={hint}\n side={hintSide}\n triggerProps={{\n tabIndex: -1,\n onClick: (event) => event.preventDefault()\n }}\n >\n <div>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"hawa-h-[14px] hawa-w-[14px] hawa-cursor-help\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\" />\n <path d=\"M12 17h.01\" />\n </svg>\n </div>\n </Tooltip>\n )}\n </div>\n));\n\nLabel.displayName = \"Label\";\n\nexport { Label };\n","import React from \"react\";\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { cn } from \"@util/index\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {\n size?: \"default\" | \"small\" | \"large\";\n }\n>(({ className, sideOffset = 4, size = \"default\", ...props }, ref) => (\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n \"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2\",\n {\n \"hawa-text-xs\": size === \"small\",\n \"hawa-text-xl\": size === \"large\"\n },\n className\n )}\n {...props}\n />\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nconst TooltipArrow = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Arrow>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n <TooltipPrimitive.Arrow ref={ref} className={cn(className)} {...props} />\n));\nTooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;\n\ntype TooltipTypes = {\n /** Controls the open state of the tooltip. */\n open?: any;\n /** Specifies the side where the tooltip will appear. */\n side?: PositionType;\n /** Content to be displayed within the tooltip. */\n content?: any;\n /** Elements to which the tooltip is anchored. */\n children?: any;\n /** Sets the default open state of the tooltip. */\n defaultOpen?: any;\n /** Event handler for open state changes. */\n onOpenChange?: any;\n /** Duration of the delay before the tooltip appears. */\n delayDuration?: any;\n /** Size of the tooltip. */\n size?: \"default\" | \"small\" | \"large\";\n triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n contentProps?: TooltipPrimitive.TooltipContentProps;\n providerProps?: TooltipPrimitive.TooltipProviderProps;\n};\n\nconst Tooltip: React.FunctionComponent<TooltipTypes> = ({\n side,\n size,\n open,\n content,\n children,\n defaultOpen,\n onOpenChange,\n triggerProps,\n contentProps,\n providerProps,\n delayDuration = 300,\n ...props\n}) => {\n return (\n <TooltipPrimitive.TooltipProvider\n delayDuration={delayDuration}\n {...providerProps}\n >\n <TooltipPrimitive.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n {...props}\n >\n <TooltipPrimitive.Trigger {...triggerProps}>\n {children}\n </TooltipPrimitive.Trigger>\n <TooltipContent\n size={size}\n side={side}\n align=\"center\"\n {...contentProps}\n >\n {content}\n </TooltipContent>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.TooltipProvider>\n );\n};\n\nexport { Tooltip };\n","import React from \"react\";\n\nimport { cn } from \"@util/index\";\n\ninterface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n className?: string;\n animation?: \"none\" | \"pulse\" | \"shimmer\";\n content?: any;\n}\n\nfunction Skeleton({\n className,\n content,\n animation = \"pulse\",\n ...props\n}: SkeletonProps) {\n const animationStyles = {\n none: \"hawa-rounded hawa-bg-muted\",\n pulse: \"hawa-animate-pulse hawa-rounded hawa-bg-muted\",\n shimmer:\n \"hawa-space-y-5 hawa-rounded hawa-bg-muted hawa-p-4 hawa-relative before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden before:hawa-border-t before:hawa-border-rose-100/10\"\n };\n return (\n <div\n className={cn(\n animationStyles[animation],\n content &&\n \"hawa-flex hawa-flex-col hawa-items-center hawa-justify-center\",\n className\n )}\n {...props}\n >\n {content && content}\n </div>\n );\n}\n\nexport { Skeleton };\n"],"mappings":"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","names":["import_react","React","React","import_react","React","React"]}
|
package/dist/input/index.mjs
CHANGED
@@ -14,13 +14,17 @@ import * as React2 from "react";
|
|
14
14
|
// elements/tooltip/Tooltip.tsx
|
15
15
|
import React from "react";
|
16
16
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
17
|
-
var TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
17
|
+
var TooltipContent = React.forwardRef(({ className, sideOffset = 4, size = "default", ...props }, ref) => /* @__PURE__ */ React.createElement(
|
18
18
|
TooltipPrimitive.Content,
|
19
19
|
{
|
20
20
|
ref,
|
21
21
|
sideOffset,
|
22
22
|
className: cn(
|
23
23
|
"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
|
24
|
+
{
|
25
|
+
"hawa-text-xs": size === "small",
|
26
|
+
"hawa-text-xl": size === "large"
|
27
|
+
},
|
24
28
|
className
|
25
29
|
),
|
26
30
|
...props
|
@@ -31,6 +35,7 @@ var TooltipArrow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
31
35
|
TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
|
32
36
|
var Tooltip = ({
|
33
37
|
side,
|
38
|
+
size,
|
34
39
|
open,
|
35
40
|
content,
|
36
41
|
children,
|
@@ -57,7 +62,16 @@ var Tooltip = ({
|
|
57
62
|
...props
|
58
63
|
},
|
59
64
|
/* @__PURE__ */ React.createElement(TooltipPrimitive.Trigger, { ...triggerProps }, children),
|
60
|
-
/* @__PURE__ */ React.createElement(
|
65
|
+
/* @__PURE__ */ React.createElement(
|
66
|
+
TooltipContent,
|
67
|
+
{
|
68
|
+
size,
|
69
|
+
side,
|
70
|
+
align: "center",
|
71
|
+
...contentProps
|
72
|
+
},
|
73
|
+
content
|
74
|
+
)
|
61
75
|
)
|
62
76
|
);
|
63
77
|
};
|
package/dist/input/index.mjs.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/input/Input.tsx","../../util/index.ts","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx","../../elements/skeleton/Skeleton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\n\nimport { cn } from \"@util/index\";\n\nimport { Label, LabelProps } from \"../label/Label\";\nimport { Skeleton } from \"../skeleton/Skeleton\";\n\nexport type TextFieldTypes = React.InputHTMLAttributes<HTMLInputElement> & {\n isLoading?: boolean;\n containerClassName?: string;\n margin?: \"none\" | \"normal\" | \"large\";\n width?: \"small\" | \"normal\" | \"full\" | \"auto\";\n /** The label of the input field */\n label?: any;\n labelProps?: LabelProps;\n hideSeparator?: boolean;\n /** The small red text under the input field to show validation. */\n helperText?: any;\n forceHideHelperText?: boolean;\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /** The icon inside the input field */\n icon?: any;\n /** Boolean to enable/disable editing the input field and using it as a text field */\n preview?: boolean;\n // maxLength?: any;\n iconInside?: React.ReactNode;\n endIcon?: React.ReactNode;\n endIconProps?: { className?: string };\n startIcon?: React.ReactNode;\n placeholder?: React.ReactNode;\n /** Show the count of characters left in the input field. Works along with maxLength prop. */\n showCount?: boolean;\n countPosition?: \"top\" | \"bottom\" | \"center\";\n popup?: boolean;\n popupContent?: React.ReactNode;\n};\nexport const Input = forwardRef<HTMLInputElement, TextFieldTypes>(\n (\n {\n margin = \"none\",\n width = \"full\",\n preview = false,\n forceHideHelperText = false,\n labelProps,\n placeholder,\n showCount,\n inputProps,\n countPosition = \"bottom\",\n ...props\n },\n ref\n ) => {\n let marginStyles = {\n none: \"hawa-mb-0\",\n normal: \"hawa-mb-3\",\n large: \"hawa-mb-5\"\n };\n let widthStyles = {\n small: \"hawa-w-full hawa-max-w-2xs\",\n normal: \"hawa-w-1/2\",\n full: \"hawa-w-full\",\n auto: \"\"\n };\n\n let defaultStyle =\n \"hawa-flex hawa-max-h-fit hawa-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-gap-0\";\n let defaultInputStyle =\n \"hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-3 hawa-text-sm \";\n\n return (\n <div\n className={cn(\n defaultStyle,\n marginStyles[margin],\n widthStyles[width],\n props.containerClassName,\n \"hawa-w-full hawa-gap-2\"\n )}\n >\n {props.label && <Label {...labelProps}>{props.label}</Label>}\n {props.isLoading ? (\n <div className=\"hawa-pb-2\">\n <Skeleton className=\"hawa-h-[40px] hawa-w-full\" />\n </div>\n ) : (\n <>\n {!props.hideSeparator && (\n <div\n className={cn(\n \"hawa-absolute hawa-top-[22px] hawa-h-[0.8px] hawa-w-full hawa-bg-gray-200 hawa-transition-all dark:hawa-bg-gray-800\",\n preview ? \"hawa-opacity-100\" : \"hawa-opacity-0\"\n )}\n ></div>\n )}\n <>\n <div className={\"hawa-relative\"}>\n {props.startIcon && (\n <div className=\"hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2\">\n {props.startIcon}\n </div>\n )}\n {props.endIcon && (\n <div\n className={cn(\n \"hawa-absolute hawa-end-3 hawa-top-1/2 hawa--translate-y-1/2\",\n props.endIconProps?.className\n )}\n >\n {props.endIcon}\n </div>\n )}\n <input\n required\n dir={props.dir}\n type={props.type}\n value={props.value}\n onChange={props.onChange}\n autoComplete={props.autoComplete}\n defaultValue={props.defaultValue}\n placeholder={placeholder}\n disabled={props.disabled || preview}\n style={{ height: 40 }}\n {...inputProps}\n className={cn(\n defaultInputStyle,\n \" focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0 dark:hawa-text-white\",\n {\n \"hawa-pe-9\": props.endIcon,\n \"hawa-ps-9\": props.startIcon,\n \"hawa-pe-[60px]\": countPosition === \"center\"\n },\n preview &&\n \"hawa-border-transparent hawa-bg-transparent hawa-px-0\",\n inputProps?.className\n )}\n />\n </div>\n\n {/* Regular helper text */}\n {!forceHideHelperText && (\n <p\n className={cn(\n \"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all\",\n props.helperText\n ? \"hawa-h-4 hawa-opacity-100\"\n : \"hawa-h-0 hawa-opacity-0\"\n )}\n >\n {props.helperText}\n </p>\n )}\n {/* Popover helper text */}\n {!props.disabled && forceHideHelperText && (\n <div\n className={cn(\n \"hawa-absolute hawa-end-0 hawa-top-[47px] hawa-z-20 hawa-translate-y-1/2 hawa-rounded hawa-bg-background hawa-text-start hawa-text-xs hawa-text-helper-color hawa-drop-shadow-md hawa-transition-all\",\n props.helperText\n ? \"hawa-border hawa-p-1\"\n : \"hawa-border-none hawa-p-0\"\n )}\n >\n {props.helperText}\n </div>\n )}\n {/* Character Counter */}\n {showCount && (\n <div\n className={cn(\n \"hawa-absolute hawa-translate-y-1/2 hawa-text-start hawa-text-xs hawa-transition-all\",\n {\n \"hawa-end-0 hawa-top-[62px]\": countPosition === \"bottom\",\n \"hawa-bottom-[62px] hawa-end-0\": countPosition === \"top\",\n \"hawa-end-2\": countPosition === \"center\"\n }\n )}\n >\n {props.value ? String(props.value).length : 0}/\n {props.maxLength}\n </div>\n )}\n\n {/* Popover helper text */}\n {/* {props.popup && (\n <div\n className={cn(\n \"hawa-absolute hawa-top-[47px] hawa-min-h-fit hawa-w-full hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start hawa-rounded hawa-end-0 hawa-z-20 hawa-drop-shadow-md hawa-bg-background hawa-translate-y-1/2\",\n props.helperText\n ? \"hawa-border hawa-p-1\"\n : \"hawa-border-none hawa-p-0\"\n )}\n >\n {props.popupContent}\n </div>\n )} */}\n </>\n </>\n )}\n </div>\n );\n }\n);\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import * as React from \"react\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\nimport { Tooltip } from \"../tooltip\";\n\nexport type LabelProps = {\n hint?: React.ReactNode;\n hintSide?: PositionType;\n htmlFor?: string;\n required?: boolean;\n};\n\nconst Label = React.forwardRef<\n HTMLLabelElement,\n React.LabelHTMLAttributes<HTMLLabelElement> & LabelProps\n>(({ className, hint, hintSide, required, children, ...props }, ref) => (\n <div className=\"hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all\">\n <label\n ref={ref}\n className={cn(\n \"hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70\",\n className\n )}\n {...props}\n >\n {children}\n {required && <span className=\"hawa-mx-0.5 hawa-text-red-500\">*</span>}\n </label>\n {hint && (\n <Tooltip\n content={hint}\n side={hintSide}\n triggerProps={{\n tabIndex: -1,\n onClick: (event) => event.preventDefault()\n }}\n >\n <div>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"hawa-h-[14px] hawa-w-[14px] hawa-cursor-help\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\" />\n <path d=\"M12 17h.01\" />\n </svg>\n </div>\n </Tooltip>\n )}\n </div>\n));\n\nLabel.displayName = \"Label\";\n\nexport { Label };\n","import React from \"react\";\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n \"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2\",\n className\n )}\n {...props}\n />\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nconst TooltipArrow = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Arrow>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n <TooltipPrimitive.Arrow ref={ref} className={cn(className)} {...props} />\n));\nTooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;\n\ntype TooltipTypes = {\n /** Controls the open state of the tooltip. */\n open?: any;\n /** Specifies the side where the tooltip will appear. */\n side?: PositionType;\n /** Content to be displayed within the tooltip. */\n content?: any;\n /** Elements to which the tooltip is anchored. */\n children?: any;\n /** Sets the default open state of the tooltip. */\n defaultOpen?: any;\n /** Event handler for open state changes. */\n onOpenChange?: any;\n /** Duration of the delay before the tooltip appears. */\n delayDuration?: any;\n triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n contentProps?: TooltipPrimitive.TooltipContentProps;\n providerProps?: TooltipPrimitive.TooltipProviderProps;\n};\n\nconst Tooltip: React.FunctionComponent<TooltipTypes> = ({\n side,\n open,\n content,\n children,\n defaultOpen,\n onOpenChange,\n triggerProps,\n contentProps,\n providerProps,\n delayDuration = 300,\n ...props\n}) => {\n return (\n <TooltipPrimitive.TooltipProvider\n delayDuration={delayDuration}\n {...providerProps}\n >\n <TooltipPrimitive.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n {...props}\n >\n <TooltipPrimitive.Trigger {...triggerProps}>\n {children}\n </TooltipPrimitive.Trigger>\n <TooltipContent side={side} align=\"center\" {...contentProps}>\n {content}\n </TooltipContent>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.TooltipProvider>\n );\n};\n\nexport { Tooltip };\n","import React from \"react\";\n\nimport { cn } from \"@util/index\";\n\ninterface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n className?: string;\n animation?: \"none\" | \"pulse\" | \"shimmer\";\n content?: any;\n}\n\nfunction Skeleton({\n className,\n content,\n animation = \"pulse\",\n ...props\n}: SkeletonProps) {\n const animationStyles = {\n none: \"hawa-rounded hawa-bg-muted\",\n pulse: \"hawa-animate-pulse hawa-rounded hawa-bg-muted\",\n shimmer:\n \"hawa-space-y-5 hawa-rounded hawa-bg-muted hawa-p-4 hawa-relative before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden before:hawa-border-t before:hawa-border-rose-100/10\"\n };\n return (\n <div\n className={cn(\n animationStyles[animation],\n content &&\n \"hawa-flex hawa-flex-col hawa-items-center hawa-justify-center\",\n className\n )}\n {...props}\n >\n {content && content}\n </div>\n );\n}\n\nexport { Skeleton };\n"],"mappings":"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","names":["React","forwardRef","React","React","React","forwardRef","React"]}
|
1
|
+
{"version":3,"sources":["../../elements/input/Input.tsx","../../util/index.ts","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx","../../elements/skeleton/Skeleton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\n\nimport { cn } from \"@util/index\";\n\nimport { Label, LabelProps } from \"../label/Label\";\nimport { Skeleton } from \"../skeleton/Skeleton\";\n\nexport type TextFieldTypes = React.InputHTMLAttributes<HTMLInputElement> & {\n isLoading?: boolean;\n containerClassName?: string;\n margin?: \"none\" | \"normal\" | \"large\";\n width?: \"small\" | \"normal\" | \"full\" | \"auto\";\n /** The label of the input field */\n label?: any;\n labelProps?: LabelProps;\n hideSeparator?: boolean;\n /** The small red text under the input field to show validation. */\n helperText?: any;\n forceHideHelperText?: boolean;\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /** The icon inside the input field */\n icon?: any;\n /** Boolean to enable/disable editing the input field and using it as a text field */\n preview?: boolean;\n // maxLength?: any;\n iconInside?: React.ReactNode;\n endIcon?: React.ReactNode;\n endIconProps?: { className?: string };\n startIcon?: React.ReactNode;\n placeholder?: React.ReactNode;\n /** Show the count of characters left in the input field. Works along with maxLength prop. */\n showCount?: boolean;\n countPosition?: \"top\" | \"bottom\" | \"center\";\n popup?: boolean;\n popupContent?: React.ReactNode;\n};\nexport const Input = forwardRef<HTMLInputElement, TextFieldTypes>(\n (\n {\n margin = \"none\",\n width = \"full\",\n preview = false,\n forceHideHelperText = false,\n labelProps,\n placeholder,\n showCount,\n inputProps,\n countPosition = \"bottom\",\n ...props\n },\n ref\n ) => {\n let marginStyles = {\n none: \"hawa-mb-0\",\n normal: \"hawa-mb-3\",\n large: \"hawa-mb-5\"\n };\n let widthStyles = {\n small: \"hawa-w-full hawa-max-w-2xs\",\n normal: \"hawa-w-1/2\",\n full: \"hawa-w-full\",\n auto: \"\"\n };\n\n let defaultStyle =\n \"hawa-flex hawa-max-h-fit hawa-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-gap-0\";\n let defaultInputStyle =\n \"hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-3 hawa-text-sm \";\n\n return (\n <div\n className={cn(\n defaultStyle,\n marginStyles[margin],\n widthStyles[width],\n props.containerClassName,\n \"hawa-w-full hawa-gap-2\"\n )}\n >\n {props.label && <Label {...labelProps}>{props.label}</Label>}\n {props.isLoading ? (\n <div className=\"hawa-pb-2\">\n <Skeleton className=\"hawa-h-[40px] hawa-w-full\" />\n </div>\n ) : (\n <>\n {!props.hideSeparator && (\n <div\n className={cn(\n \"hawa-absolute hawa-top-[22px] hawa-h-[0.8px] hawa-w-full hawa-bg-gray-200 hawa-transition-all dark:hawa-bg-gray-800\",\n preview ? \"hawa-opacity-100\" : \"hawa-opacity-0\"\n )}\n ></div>\n )}\n <>\n <div className={\"hawa-relative\"}>\n {props.startIcon && (\n <div className=\"hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2\">\n {props.startIcon}\n </div>\n )}\n {props.endIcon && (\n <div\n className={cn(\n \"hawa-absolute hawa-end-3 hawa-top-1/2 hawa--translate-y-1/2\",\n props.endIconProps?.className\n )}\n >\n {props.endIcon}\n </div>\n )}\n <input\n required\n dir={props.dir}\n type={props.type}\n value={props.value}\n onChange={props.onChange}\n autoComplete={props.autoComplete}\n defaultValue={props.defaultValue}\n placeholder={placeholder}\n disabled={props.disabled || preview}\n style={{ height: 40 }}\n {...inputProps}\n className={cn(\n defaultInputStyle,\n \" focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0 dark:hawa-text-white\",\n {\n \"hawa-pe-9\": props.endIcon,\n \"hawa-ps-9\": props.startIcon,\n \"hawa-pe-[60px]\": countPosition === \"center\"\n },\n preview &&\n \"hawa-border-transparent hawa-bg-transparent hawa-px-0\",\n inputProps?.className\n )}\n />\n </div>\n\n {/* Regular helper text */}\n {!forceHideHelperText && (\n <p\n className={cn(\n \"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all\",\n props.helperText\n ? \"hawa-h-4 hawa-opacity-100\"\n : \"hawa-h-0 hawa-opacity-0\"\n )}\n >\n {props.helperText}\n </p>\n )}\n {/* Popover helper text */}\n {!props.disabled && forceHideHelperText && (\n <div\n className={cn(\n \"hawa-absolute hawa-end-0 hawa-top-[47px] hawa-z-20 hawa-translate-y-1/2 hawa-rounded hawa-bg-background hawa-text-start hawa-text-xs hawa-text-helper-color hawa-drop-shadow-md hawa-transition-all\",\n props.helperText\n ? \"hawa-border hawa-p-1\"\n : \"hawa-border-none hawa-p-0\"\n )}\n >\n {props.helperText}\n </div>\n )}\n {/* Character Counter */}\n {showCount && (\n <div\n className={cn(\n \"hawa-absolute hawa-translate-y-1/2 hawa-text-start hawa-text-xs hawa-transition-all\",\n {\n \"hawa-end-0 hawa-top-[62px]\": countPosition === \"bottom\",\n \"hawa-bottom-[62px] hawa-end-0\": countPosition === \"top\",\n \"hawa-end-2\": countPosition === \"center\"\n }\n )}\n >\n {props.value ? String(props.value).length : 0}/\n {props.maxLength}\n </div>\n )}\n\n {/* Popover helper text */}\n {/* {props.popup && (\n <div\n className={cn(\n \"hawa-absolute hawa-top-[47px] hawa-min-h-fit hawa-w-full hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start hawa-rounded hawa-end-0 hawa-z-20 hawa-drop-shadow-md hawa-bg-background hawa-translate-y-1/2\",\n props.helperText\n ? \"hawa-border hawa-p-1\"\n : \"hawa-border-none hawa-p-0\"\n )}\n >\n {props.popupContent}\n </div>\n )} */}\n </>\n </>\n )}\n </div>\n );\n }\n);\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import * as React from \"react\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\nimport { Tooltip } from \"../tooltip\";\n\nexport type LabelProps = {\n hint?: React.ReactNode;\n hintSide?: PositionType;\n htmlFor?: string;\n required?: boolean;\n};\n\nconst Label = React.forwardRef<\n HTMLLabelElement,\n React.LabelHTMLAttributes<HTMLLabelElement> & LabelProps\n>(({ className, hint, hintSide, required, children, ...props }, ref) => (\n <div className=\"hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all\">\n <label\n ref={ref}\n className={cn(\n \"hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70\",\n className\n )}\n {...props}\n >\n {children}\n {required && <span className=\"hawa-mx-0.5 hawa-text-red-500\">*</span>}\n </label>\n {hint && (\n <Tooltip\n content={hint}\n side={hintSide}\n triggerProps={{\n tabIndex: -1,\n onClick: (event) => event.preventDefault()\n }}\n >\n <div>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"hawa-h-[14px] hawa-w-[14px] hawa-cursor-help\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\" />\n <path d=\"M12 17h.01\" />\n </svg>\n </div>\n </Tooltip>\n )}\n </div>\n));\n\nLabel.displayName = \"Label\";\n\nexport { Label };\n","import React from \"react\";\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { cn } from \"@util/index\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {\n size?: \"default\" | \"small\" | \"large\";\n }\n>(({ className, sideOffset = 4, size = \"default\", ...props }, ref) => (\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n \"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2\",\n {\n \"hawa-text-xs\": size === \"small\",\n \"hawa-text-xl\": size === \"large\"\n },\n className\n )}\n {...props}\n />\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nconst TooltipArrow = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Arrow>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n <TooltipPrimitive.Arrow ref={ref} className={cn(className)} {...props} />\n));\nTooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;\n\ntype TooltipTypes = {\n /** Controls the open state of the tooltip. */\n open?: any;\n /** Specifies the side where the tooltip will appear. */\n side?: PositionType;\n /** Content to be displayed within the tooltip. */\n content?: any;\n /** Elements to which the tooltip is anchored. */\n children?: any;\n /** Sets the default open state of the tooltip. */\n defaultOpen?: any;\n /** Event handler for open state changes. */\n onOpenChange?: any;\n /** Duration of the delay before the tooltip appears. */\n delayDuration?: any;\n /** Size of the tooltip. */\n size?: \"default\" | \"small\" | \"large\";\n triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n contentProps?: TooltipPrimitive.TooltipContentProps;\n providerProps?: TooltipPrimitive.TooltipProviderProps;\n};\n\nconst Tooltip: React.FunctionComponent<TooltipTypes> = ({\n side,\n size,\n open,\n content,\n children,\n defaultOpen,\n onOpenChange,\n triggerProps,\n contentProps,\n providerProps,\n delayDuration = 300,\n ...props\n}) => {\n return (\n <TooltipPrimitive.TooltipProvider\n delayDuration={delayDuration}\n {...providerProps}\n >\n <TooltipPrimitive.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n {...props}\n >\n <TooltipPrimitive.Trigger {...triggerProps}>\n {children}\n </TooltipPrimitive.Trigger>\n <TooltipContent\n size={size}\n side={side}\n align=\"center\"\n {...contentProps}\n >\n {content}\n </TooltipContent>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.TooltipProvider>\n );\n};\n\nexport { Tooltip };\n","import React from \"react\";\n\nimport { cn } from \"@util/index\";\n\ninterface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n className?: string;\n animation?: \"none\" | \"pulse\" | \"shimmer\";\n content?: any;\n}\n\nfunction Skeleton({\n className,\n content,\n animation = \"pulse\",\n ...props\n}: SkeletonProps) {\n const animationStyles = {\n none: \"hawa-rounded hawa-bg-muted\",\n pulse: \"hawa-animate-pulse hawa-rounded hawa-bg-muted\",\n shimmer:\n \"hawa-space-y-5 hawa-rounded hawa-bg-muted hawa-p-4 hawa-relative before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden before:hawa-border-t before:hawa-border-rose-100/10\"\n };\n return (\n <div\n className={cn(\n animationStyles[animation],\n content &&\n \"hawa-flex hawa-flex-col hawa-items-center hawa-justify-center\",\n className\n )}\n {...props}\n >\n {content && content}\n </div>\n );\n}\n\nexport { Skeleton };\n"],"mappings":"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","names":["React","forwardRef","React","React","React","forwardRef","React"]}
|
@@ -53,13 +53,17 @@ var React2 = __toESM(require("react"));
|
|
53
53
|
// elements/tooltip/Tooltip.tsx
|
54
54
|
var import_react = __toESM(require("react"));
|
55
55
|
var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
|
56
|
-
var TooltipContent = import_react.default.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ import_react.default.createElement(
|
56
|
+
var TooltipContent = import_react.default.forwardRef(({ className, sideOffset = 4, size = "default", ...props }, ref) => /* @__PURE__ */ import_react.default.createElement(
|
57
57
|
TooltipPrimitive.Content,
|
58
58
|
{
|
59
59
|
ref,
|
60
60
|
sideOffset,
|
61
61
|
className: cn(
|
62
62
|
"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
|
63
|
+
{
|
64
|
+
"hawa-text-xs": size === "small",
|
65
|
+
"hawa-text-xl": size === "large"
|
66
|
+
},
|
63
67
|
className
|
64
68
|
),
|
65
69
|
...props
|
@@ -70,6 +74,7 @@ var TooltipArrow = import_react.default.forwardRef(({ className, ...props }, ref
|
|
70
74
|
TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
|
71
75
|
var Tooltip = ({
|
72
76
|
side,
|
77
|
+
size,
|
73
78
|
open,
|
74
79
|
content,
|
75
80
|
children,
|
@@ -96,7 +101,16 @@ var Tooltip = ({
|
|
96
101
|
...props
|
97
102
|
},
|
98
103
|
/* @__PURE__ */ import_react.default.createElement(TooltipPrimitive.Trigger, { ...triggerProps }, children),
|
99
|
-
/* @__PURE__ */ import_react.default.createElement(
|
104
|
+
/* @__PURE__ */ import_react.default.createElement(
|
105
|
+
TooltipContent,
|
106
|
+
{
|
107
|
+
size,
|
108
|
+
side,
|
109
|
+
align: "center",
|
110
|
+
...contentProps
|
111
|
+
},
|
112
|
+
content
|
113
|
+
)
|
100
114
|
)
|
101
115
|
);
|
102
116
|
};
|