@sikka/hawa 0.48.1-next → 0.49.0-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/accordion/index.js +3 -28
- package/dist/accordion/index.js.map +1 -1
- package/dist/accordion/index.mjs +3 -28
- package/dist/accordion/index.mjs.map +1 -1
- package/dist/alert/index.js +53 -98
- package/dist/alert/index.js.map +1 -1
- package/dist/alert/index.mjs +53 -98
- package/dist/alert/index.mjs.map +1 -1
- package/dist/appLayout/index.d.mts +2 -0
- package/dist/appLayout/index.d.ts +2 -0
- package/dist/appLayout/index.js +263 -409
- package/dist/appLayout/index.js.map +1 -1
- package/dist/appLayout/index.mjs +263 -409
- package/dist/appLayout/index.mjs.map +1 -1
- package/dist/appMenubar/index.js +15 -20
- package/dist/appMenubar/index.js.map +1 -1
- package/dist/appMenubar/index.mjs +15 -20
- package/dist/appMenubar/index.mjs.map +1 -1
- package/dist/appTabs/index.js +28 -37
- package/dist/appTabs/index.js.map +1 -1
- package/dist/appTabs/index.mjs +28 -37
- package/dist/appTabs/index.mjs.map +1 -1
- package/dist/appTopbar/index.js +125 -173
- package/dist/appTopbar/index.js.map +1 -1
- package/dist/appTopbar/index.mjs +125 -173
- package/dist/appTopbar/index.mjs.map +1 -1
- package/dist/avatar/index.js.map +1 -1
- package/dist/avatar/index.mjs.map +1 -1
- package/dist/backToTop/index.js +50 -82
- package/dist/backToTop/index.js.map +1 -1
- package/dist/backToTop/index.mjs +50 -82
- package/dist/backToTop/index.mjs.map +1 -1
- package/dist/badge/index.d.mts +1 -1
- package/dist/badge/index.d.ts +1 -1
- package/dist/badge/index.js +2 -18
- package/dist/badge/index.js.map +1 -1
- package/dist/badge/index.mjs +2 -18
- package/dist/badge/index.mjs.map +1 -1
- package/dist/blocks/auth/index.js +202 -468
- package/dist/blocks/auth/index.mjs +96 -280
- package/dist/blocks/feedback/index.js +214 -375
- package/dist/blocks/feedback/index.mjs +12 -25
- package/dist/blocks/index.js +604 -1122
- package/dist/blocks/index.mjs +132 -291
- package/dist/blocks/misc/index.js +136 -251
- package/dist/blocks/misc/index.mjs +29 -54
- package/dist/blocks/pricing/index.js +220 -397
- package/dist/blocks/pricing/index.mjs +63 -134
- package/dist/breadcrumb/index.js +1 -5
- package/dist/breadcrumb/index.js.map +1 -1
- package/dist/breadcrumb/index.mjs +1 -5
- package/dist/breadcrumb/index.mjs.map +1 -1
- package/dist/button/index.js +50 -82
- package/dist/button/index.js.map +1 -1
- package/dist/button/index.mjs +50 -82
- package/dist/button/index.mjs.map +1 -1
- package/dist/calendar/index.js +50 -82
- package/dist/calendar/index.js.map +1 -1
- package/dist/calendar/index.mjs +50 -82
- package/dist/calendar/index.mjs.map +1 -1
- package/dist/card/index.js +7 -35
- package/dist/card/index.js.map +1 -1
- package/dist/card/index.mjs +7 -35
- package/dist/card/index.mjs.map +1 -1
- package/dist/carousel/index.js +15 -27
- package/dist/carousel/index.js.map +1 -1
- package/dist/carousel/index.mjs +15 -27
- package/dist/carousel/index.mjs.map +1 -1
- package/dist/checkbox/index.js +2 -13
- package/dist/checkbox/index.js.map +1 -1
- package/dist/checkbox/index.mjs +2 -13
- package/dist/checkbox/index.mjs.map +1 -1
- package/dist/chip/index.js +2 -16
- package/dist/chip/index.js.map +1 -1
- package/dist/chip/index.mjs +2 -16
- package/dist/chip/index.mjs.map +1 -1
- package/dist/{chunk-WUMDFBEK.mjs → chunk-3CHFVHTW.mjs} +43 -54
- package/dist/{chunk-2LUXOXAL.mjs → chunk-5SQBJRWE.mjs} +3 -9
- package/dist/{chunk-C2UOOH4X.mjs → chunk-B53SP2WZ.mjs} +3 -17
- package/dist/chunk-GHGWQVTM.mjs +150 -0
- package/dist/{chunk-5S5DR7KF.mjs → chunk-I23ONEDJ.mjs} +2 -10
- package/dist/{chunk-JFWD2ICY.mjs → chunk-JT7R3L5O.mjs} +54 -62
- package/dist/{chunk-6SJUUJOV.mjs → chunk-KDGJZPWK.mjs} +295 -574
- package/dist/{chunk-AWJSHOYU.mjs → chunk-KSJGXQTE.mjs} +1 -1
- package/dist/{chunk-NMW4GM4G.mjs → chunk-SE2JMXYG.mjs} +104 -144
- package/dist/{chunk-GBLWUEYN.mjs → chunk-ULRL4WI6.mjs} +176 -256
- package/dist/{chunk-IFWYR5W2.mjs → chunk-VUELRPUL.mjs} +57 -117
- package/dist/{chunk-WL7C2A5D.mjs → chunk-WQR4XZGL.mjs} +8 -15
- package/dist/codeBlock/index.js +50 -82
- package/dist/codeBlock/index.js.map +1 -1
- package/dist/codeBlock/index.mjs +50 -82
- package/dist/codeBlock/index.mjs.map +1 -1
- package/dist/colorPicker/index.js +21 -33
- package/dist/colorPicker/index.js.map +1 -1
- package/dist/colorPicker/index.mjs +22 -37
- package/dist/colorPicker/index.mjs.map +1 -1
- package/dist/combobox/index.d.mts +1 -1
- package/dist/combobox/index.d.ts +1 -1
- package/dist/combobox/index.js +141 -223
- package/dist/combobox/index.js.map +1 -1
- package/dist/combobox/index.mjs +141 -223
- package/dist/combobox/index.mjs.map +1 -1
- package/dist/command/index.d.mts +1 -1
- package/dist/command/index.d.ts +1 -1
- package/dist/command/index.js +129 -212
- package/dist/command/index.js.map +1 -1
- package/dist/command/index.mjs +129 -212
- package/dist/command/index.mjs.map +1 -1
- package/dist/dataTable/index.js +254 -394
- package/dist/dataTable/index.js.map +1 -1
- package/dist/dataTable/index.mjs +254 -394
- package/dist/dataTable/index.mjs.map +1 -1
- package/dist/datePicker/index.js +64 -105
- package/dist/datePicker/index.js.map +1 -1
- package/dist/datePicker/index.mjs +64 -105
- package/dist/datePicker/index.mjs.map +1 -1
- package/dist/destroyableCard/index.js +8 -39
- package/dist/destroyableCard/index.js.map +1 -1
- package/dist/destroyableCard/index.mjs +8 -39
- package/dist/destroyableCard/index.mjs.map +1 -1
- package/dist/dialog/index.js +70 -122
- package/dist/dialog/index.js.map +1 -1
- package/dist/dialog/index.mjs +70 -122
- package/dist/dialog/index.mjs.map +1 -1
- package/dist/docsLayout/index.js +169 -358
- package/dist/docsLayout/index.js.map +1 -1
- package/dist/docsLayout/index.mjs +169 -358
- package/dist/docsLayout/index.mjs.map +1 -1
- package/dist/docsSidebar/index.js +9 -16
- package/dist/docsSidebar/index.js.map +1 -1
- package/dist/docsSidebar/index.mjs +9 -16
- package/dist/docsSidebar/index.mjs.map +1 -1
- package/dist/dropdownMenu/index.js +124 -164
- package/dist/dropdownMenu/index.js.map +1 -1
- package/dist/dropdownMenu/index.mjs +124 -164
- package/dist/dropdownMenu/index.mjs.map +1 -1
- package/dist/elements/index.d.mts +3 -3
- package/dist/elements/index.d.ts +3 -3
- package/dist/elements/index.js +841 -1505
- package/dist/elements/index.mjs +381 -718
- package/dist/fileDropzone/index.js +60 -159
- package/dist/fileDropzone/index.js.map +1 -1
- package/dist/fileDropzone/index.mjs +60 -159
- package/dist/fileDropzone/index.mjs.map +1 -1
- package/dist/glow/index.js +4 -16
- package/dist/glow/index.js.map +1 -1
- package/dist/glow/index.mjs +4 -16
- package/dist/glow/index.mjs.map +1 -1
- package/dist/hooks/index.d.mts +1 -5
- package/dist/hooks/index.d.ts +1 -5
- package/dist/hooks/index.js +11 -24
- package/dist/hooks/index.mjs +2 -2
- package/dist/{index-B0aJcA6d.d.ts → index-BgNycocQ.d.mts} +2 -2
- package/dist/{index-B0aJcA6d.d.mts → index-BgNycocQ.d.ts} +2 -2
- package/dist/index.css +1 -2
- package/dist/index.d.mts +6 -8
- package/dist/index.d.ts +6 -8
- package/dist/index.js +1194 -2170
- package/dist/index.mjs +1195 -2174
- package/dist/input/index.js +20 -29
- package/dist/input/index.js.map +1 -1
- package/dist/input/index.mjs +20 -29
- package/dist/input/index.mjs.map +1 -1
- package/dist/interfaceSettings/index.js +122 -163
- package/dist/interfaceSettings/index.js.map +1 -1
- package/dist/interfaceSettings/index.mjs +122 -163
- package/dist/interfaceSettings/index.mjs.map +1 -1
- package/dist/label/index.js +19 -26
- package/dist/label/index.js.map +1 -1
- package/dist/label/index.mjs +19 -26
- package/dist/label/index.mjs.map +1 -1
- package/dist/layout/index.d.mts +2 -0
- package/dist/layout/index.d.ts +2 -0
- package/dist/layout/index.js +434 -790
- package/dist/layout/index.mjs +143 -243
- package/dist/loading/index.js +30 -53
- package/dist/loading/index.js.map +1 -1
- package/dist/loading/index.mjs +30 -53
- package/dist/loading/index.mjs.map +1 -1
- package/dist/logos/index.js +66 -191
- package/dist/logos/index.js.map +1 -1
- package/dist/logos/index.mjs +66 -191
- package/dist/logos/index.mjs.map +1 -1
- package/dist/navbar/index.js +1 -4
- package/dist/navbar/index.js.map +1 -1
- package/dist/navbar/index.mjs +1 -4
- package/dist/navbar/index.mjs.map +1 -1
- package/dist/navigationMenu/index.js +14 -22
- package/dist/navigationMenu/index.js.map +1 -1
- package/dist/navigationMenu/index.mjs +14 -22
- package/dist/navigationMenu/index.mjs.map +1 -1
- package/dist/pagination/index.js +1 -5
- package/dist/pagination/index.js.map +1 -1
- package/dist/pagination/index.mjs +1 -5
- package/dist/pagination/index.mjs.map +1 -1
- package/dist/passwordInput/index.js +36 -65
- package/dist/passwordInput/index.js.map +1 -1
- package/dist/passwordInput/index.mjs +36 -65
- package/dist/passwordInput/index.mjs.map +1 -1
- package/dist/phoneInput/index.js +20 -29
- package/dist/phoneInput/index.js.map +1 -1
- package/dist/phoneInput/index.mjs +20 -29
- package/dist/phoneInput/index.mjs.map +1 -1
- package/dist/pinInput/index.js +14 -16
- package/dist/pinInput/index.js.map +1 -1
- package/dist/pinInput/index.mjs +14 -16
- package/dist/pinInput/index.mjs.map +1 -1
- package/dist/popover/index.js +14 -24
- package/dist/popover/index.js.map +1 -1
- package/dist/popover/index.mjs +14 -24
- package/dist/popover/index.mjs.map +1 -1
- package/dist/progress/index.js +19 -26
- package/dist/progress/index.js.map +1 -1
- package/dist/progress/index.mjs +19 -26
- package/dist/progress/index.mjs.map +1 -1
- package/dist/progressCircle/index.js +67 -71
- package/dist/progressCircle/index.js.map +1 -1
- package/dist/progressCircle/index.mjs +67 -71
- package/dist/progressCircle/index.mjs.map +1 -1
- package/dist/radio/index.js +122 -163
- package/dist/radio/index.js.map +1 -1
- package/dist/radio/index.mjs +122 -163
- package/dist/radio/index.mjs.map +1 -1
- package/dist/scrollArea/index.js.map +1 -1
- package/dist/scrollArea/index.mjs.map +1 -1
- package/dist/scrollIndicator/index.js +1 -4
- package/dist/scrollIndicator/index.js.map +1 -1
- package/dist/scrollIndicator/index.mjs +1 -4
- package/dist/scrollIndicator/index.mjs.map +1 -1
- package/dist/select/index.js +20 -29
- package/dist/select/index.js.map +1 -1
- package/dist/select/index.mjs +20 -29
- package/dist/select/index.mjs.map +1 -1
- package/dist/separator/index.js.map +1 -1
- package/dist/separator/index.mjs.map +1 -1
- package/dist/sheet/index.js +42 -53
- package/dist/sheet/index.js.map +1 -1
- package/dist/sheet/index.mjs +42 -53
- package/dist/sheet/index.mjs.map +1 -1
- package/dist/sidebar/index.js +66 -133
- package/dist/sidebar/index.js.map +1 -1
- package/dist/sidebar/index.mjs +66 -133
- package/dist/sidebar/index.mjs.map +1 -1
- package/dist/signature/index.js +19 -26
- package/dist/signature/index.js.map +1 -1
- package/dist/signature/index.mjs +19 -26
- package/dist/signature/index.mjs.map +1 -1
- package/dist/simpleTable/index.js +50 -81
- package/dist/simpleTable/index.js.map +1 -1
- package/dist/simpleTable/index.mjs +50 -81
- package/dist/simpleTable/index.mjs.map +1 -1
- package/dist/skeleton/index.js.map +1 -1
- package/dist/skeleton/index.mjs.map +1 -1
- package/dist/slider/index.js.map +1 -1
- package/dist/slider/index.mjs.map +1 -1
- package/dist/sonner/index.js.map +1 -1
- package/dist/sonner/index.mjs.map +1 -1
- package/dist/sortButton/index.js +50 -82
- package/dist/sortButton/index.js.map +1 -1
- package/dist/sortButton/index.mjs +50 -82
- package/dist/sortButton/index.mjs.map +1 -1
- package/dist/splitButton/index.js +214 -294
- package/dist/splitButton/index.js.map +1 -1
- package/dist/splitButton/index.mjs +214 -294
- package/dist/splitButton/index.mjs.map +1 -1
- package/dist/stats/index.js +7 -35
- package/dist/stats/index.js.map +1 -1
- package/dist/stats/index.mjs +7 -35
- package/dist/stats/index.mjs.map +1 -1
- package/dist/switch/index.js +24 -34
- package/dist/switch/index.js.map +1 -1
- package/dist/switch/index.mjs +24 -34
- package/dist/switch/index.mjs.map +1 -1
- package/dist/table/index.js +27 -29
- package/dist/table/index.js.map +1 -1
- package/dist/table/index.mjs +27 -29
- package/dist/table/index.mjs.map +1 -1
- package/dist/tabs/index.js +54 -76
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs +54 -76
- package/dist/tabs/index.mjs.map +1 -1
- package/dist/textarea/index.js +21 -38
- package/dist/textarea/index.js.map +1 -1
- package/dist/textarea/index.mjs +21 -38
- package/dist/textarea/index.mjs.map +1 -1
- package/dist/toast/index.js +2 -10
- package/dist/toast/index.js.map +1 -1
- package/dist/toast/index.mjs +2 -10
- package/dist/toast/index.mjs.map +1 -1
- package/dist/toaster/index.js +3 -16
- package/dist/toaster/index.js.map +1 -1
- package/dist/toaster/index.mjs +3 -16
- package/dist/toaster/index.mjs.map +1 -1
- package/dist/tooltip/index.js +19 -26
- package/dist/tooltip/index.js.map +1 -1
- package/dist/tooltip/index.mjs +19 -26
- package/dist/tooltip/index.mjs.map +1 -1
- package/package.json +12 -12
- package/dist/chunk-JP2N5WKD.mjs +0 -190
package/dist/progress/index.js
CHANGED
@@ -86,38 +86,31 @@ var Tooltip = ({
|
|
86
86
|
delayDuration = 300,
|
87
87
|
...props
|
88
88
|
}) => {
|
89
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
90
|
-
TooltipPrimitive.
|
89
|
+
return /* @__PURE__ */ import_react.default.createElement(TooltipPrimitive.TooltipProvider, { delayDuration, ...providerProps }, /* @__PURE__ */ import_react.default.createElement(
|
90
|
+
TooltipPrimitive.Root,
|
91
91
|
{
|
92
|
-
|
93
|
-
|
92
|
+
open: !disabled && open,
|
93
|
+
defaultOpen,
|
94
|
+
onOpenChange,
|
95
|
+
...props
|
94
96
|
},
|
97
|
+
/* @__PURE__ */ import_react.default.createElement(TooltipPrimitive.Trigger, { ...triggerProps }, children),
|
95
98
|
/* @__PURE__ */ import_react.default.createElement(
|
96
|
-
|
99
|
+
TooltipContent,
|
97
100
|
{
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
...
|
101
|
+
size,
|
102
|
+
side,
|
103
|
+
align: "center",
|
104
|
+
...contentProps,
|
105
|
+
style: {
|
106
|
+
...contentProps == null ? void 0 : contentProps.style,
|
107
|
+
maxWidth: "var(--radix-tooltip-content-available-width)",
|
108
|
+
maxHeight: "var(--radix-tooltip-content-available-height)"
|
109
|
+
}
|
102
110
|
},
|
103
|
-
|
104
|
-
/* @__PURE__ */ import_react.default.createElement(
|
105
|
-
TooltipContent,
|
106
|
-
{
|
107
|
-
size,
|
108
|
-
side,
|
109
|
-
align: "center",
|
110
|
-
...contentProps,
|
111
|
-
style: {
|
112
|
-
...contentProps == null ? void 0 : contentProps.style,
|
113
|
-
maxWidth: "var(--radix-tooltip-content-available-width)",
|
114
|
-
maxHeight: "var(--radix-tooltip-content-available-height)"
|
115
|
-
}
|
116
|
-
},
|
117
|
-
content
|
118
|
-
)
|
111
|
+
content
|
119
112
|
)
|
120
|
-
);
|
113
|
+
));
|
121
114
|
};
|
122
115
|
|
123
116
|
// elements/label/Label.tsx
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/progress/index.ts","../../elements/progress/Progress.tsx","../../util/index.ts","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx"],"sourcesContent":["export * from \"./Progress\";\n","import * as React from \"react\";\n\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\nimport { cn } from \"@util/index\";\n\nimport { Label, LabelProps } from \"../label\";\n\nconst Progress = React.forwardRef<\n React.ElementRef<typeof ProgressPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {\n label?: string;\n labelProps?: LabelProps;\n }\n>(({ className, value, ...props }, ref) => (\n <div className=\"hawa-flex hawa-flex-col hawa-gap-2\">\n {props.label && <Label {...props.labelProps}>{props.label}</Label>}\n <ProgressPrimitive.Root\n ref={ref}\n className={cn(\n \"hawa-relative hawa-h-4 hawa-w-full hawa-overflow-hidden hawa-rounded hawa-bg-secondary\",\n className,\n )}\n {...props}\n >\n <ProgressPrimitive.Indicator\n className=\"hawa-h-full hawa-w-full hawa-flex-1 hawa-bg-primary hawa-transition-all\"\n style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n />\n </ProgressPrimitive.Root>\n </div>\n));\nProgress.displayName = ProgressPrimitive.Root.displayName;\n\nexport { Progress };\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 { cn } from \"@util/index\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\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 /** Disables the tooltip. */\n disabled?: boolean;\n triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n contentProps?: TooltipPrimitive.TooltipContentProps;\n providerProps?: TooltipPrimitive.TooltipProps;\n};\n\nconst Tooltip: React.FunctionComponent<TooltipTypes> = ({\n side,\n size,\n open,\n content,\n children,\n disabled,\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={!disabled && 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 style={{\n ...contentProps?.style,\n maxWidth: \"var(--radix-tooltip-content-available-width)\",\n maxHeight: \"var(--radix-tooltip-content-available-height)\",\n }}\n >\n {content}\n </TooltipContent>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.TooltipProvider>\n );\n};\n\nexport { Tooltip };\n"],"mappings":"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","names":["React","React","React"]}
|
1
|
+
{"version":3,"sources":["../../elements/progress/index.ts","../../elements/progress/Progress.tsx","../../util/index.ts","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx"],"sourcesContent":["export * from \"./Progress\";\n","import * as React from \"react\";\n\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\nimport { cn } from \"@util/index\";\n\nimport { Label, LabelProps } from \"../label\";\n\nconst Progress = React.forwardRef<\n React.ElementRef<typeof ProgressPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {\n label?: string;\n labelProps?: LabelProps;\n }\n>(({ className, value, ...props }, ref) => (\n <div className=\"hawa-flex hawa-flex-col hawa-gap-2\">\n {props.label && <Label {...props.labelProps}>{props.label}</Label>}\n <ProgressPrimitive.Root\n ref={ref}\n className={cn(\n \"hawa-relative hawa-h-4 hawa-w-full hawa-overflow-hidden hawa-rounded hawa-bg-secondary\",\n className,\n )}\n {...props}\n >\n <ProgressPrimitive.Indicator\n className=\"hawa-h-full hawa-w-full hawa-flex-1 hawa-bg-primary hawa-transition-all\"\n style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n />\n </ProgressPrimitive.Root>\n </div>\n));\nProgress.displayName = ProgressPrimitive.Root.displayName;\n\nexport { Progress };\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(sanitizedHex);\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 { cn } from \"@util/index\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\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 /** Disables the tooltip. */\n disabled?: boolean;\n triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n contentProps?: TooltipPrimitive.TooltipContentProps;\n providerProps?: TooltipPrimitive.TooltipProps;\n};\n\nconst Tooltip: React.FunctionComponent<TooltipTypes> = ({\n side,\n size,\n open,\n content,\n children,\n disabled,\n defaultOpen,\n onOpenChange,\n triggerProps,\n contentProps,\n providerProps,\n delayDuration = 300,\n ...props\n}) => {\n return (\n <TooltipPrimitive.TooltipProvider delayDuration={delayDuration} {...providerProps}>\n <TooltipPrimitive.Root\n open={!disabled && open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n {...props}\n >\n <TooltipPrimitive.Trigger {...triggerProps}>{children}</TooltipPrimitive.Trigger>\n <TooltipContent\n size={size}\n side={side}\n align=\"center\"\n {...contentProps}\n style={{\n ...contentProps?.style,\n maxWidth: \"var(--radix-tooltip-content-available-width)\",\n maxHeight: \"var(--radix-tooltip-content-available-height)\",\n }}\n >\n {content}\n </TooltipContent>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.TooltipProvider>\n );\n};\n\nexport { Tooltip };\n"],"mappings":"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","names":["React","React","React"]}
|
package/dist/progress/index.mjs
CHANGED
@@ -51,38 +51,31 @@ var Tooltip = ({
|
|
51
51
|
delayDuration = 300,
|
52
52
|
...props
|
53
53
|
}) => {
|
54
|
-
return /* @__PURE__ */ React.createElement(
|
55
|
-
TooltipPrimitive.
|
54
|
+
return /* @__PURE__ */ React.createElement(TooltipPrimitive.TooltipProvider, { delayDuration, ...providerProps }, /* @__PURE__ */ React.createElement(
|
55
|
+
TooltipPrimitive.Root,
|
56
56
|
{
|
57
|
-
|
58
|
-
|
57
|
+
open: !disabled && open,
|
58
|
+
defaultOpen,
|
59
|
+
onOpenChange,
|
60
|
+
...props
|
59
61
|
},
|
62
|
+
/* @__PURE__ */ React.createElement(TooltipPrimitive.Trigger, { ...triggerProps }, children),
|
60
63
|
/* @__PURE__ */ React.createElement(
|
61
|
-
|
64
|
+
TooltipContent,
|
62
65
|
{
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
...
|
66
|
+
size,
|
67
|
+
side,
|
68
|
+
align: "center",
|
69
|
+
...contentProps,
|
70
|
+
style: {
|
71
|
+
...contentProps == null ? void 0 : contentProps.style,
|
72
|
+
maxWidth: "var(--radix-tooltip-content-available-width)",
|
73
|
+
maxHeight: "var(--radix-tooltip-content-available-height)"
|
74
|
+
}
|
67
75
|
},
|
68
|
-
|
69
|
-
/* @__PURE__ */ React.createElement(
|
70
|
-
TooltipContent,
|
71
|
-
{
|
72
|
-
size,
|
73
|
-
side,
|
74
|
-
align: "center",
|
75
|
-
...contentProps,
|
76
|
-
style: {
|
77
|
-
...contentProps == null ? void 0 : contentProps.style,
|
78
|
-
maxWidth: "var(--radix-tooltip-content-available-width)",
|
79
|
-
maxHeight: "var(--radix-tooltip-content-available-height)"
|
80
|
-
}
|
81
|
-
},
|
82
|
-
content
|
83
|
-
)
|
76
|
+
content
|
84
77
|
)
|
85
|
-
);
|
78
|
+
));
|
86
79
|
};
|
87
80
|
|
88
81
|
// elements/label/Label.tsx
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/progress/Progress.tsx","../../util/index.ts","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\nimport { cn } from \"@util/index\";\n\nimport { Label, LabelProps } from \"../label\";\n\nconst Progress = React.forwardRef<\n React.ElementRef<typeof ProgressPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {\n label?: string;\n labelProps?: LabelProps;\n }\n>(({ className, value, ...props }, ref) => (\n <div className=\"hawa-flex hawa-flex-col hawa-gap-2\">\n {props.label && <Label {...props.labelProps}>{props.label}</Label>}\n <ProgressPrimitive.Root\n ref={ref}\n className={cn(\n \"hawa-relative hawa-h-4 hawa-w-full hawa-overflow-hidden hawa-rounded hawa-bg-secondary\",\n className,\n )}\n {...props}\n >\n <ProgressPrimitive.Indicator\n className=\"hawa-h-full hawa-w-full hawa-flex-1 hawa-bg-primary hawa-transition-all\"\n style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n />\n </ProgressPrimitive.Root>\n </div>\n));\nProgress.displayName = ProgressPrimitive.Root.displayName;\n\nexport { Progress };\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 { cn } from \"@util/index\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\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 /** Disables the tooltip. */\n disabled?: boolean;\n triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n contentProps?: TooltipPrimitive.TooltipContentProps;\n providerProps?: TooltipPrimitive.TooltipProps;\n};\n\nconst Tooltip: React.FunctionComponent<TooltipTypes> = ({\n side,\n size,\n open,\n content,\n children,\n disabled,\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={!disabled && 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 style={{\n ...contentProps?.style,\n maxWidth: \"var(--radix-tooltip-content-available-width)\",\n maxHeight: \"var(--radix-tooltip-content-available-height)\",\n }}\n >\n {content}\n </TooltipContent>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.TooltipProvider>\n );\n};\n\nexport { Tooltip };\n"],"mappings":"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","names":["React","React"]}
|
1
|
+
{"version":3,"sources":["../../elements/progress/Progress.tsx","../../util/index.ts","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\nimport { cn } from \"@util/index\";\n\nimport { Label, LabelProps } from \"../label\";\n\nconst Progress = React.forwardRef<\n React.ElementRef<typeof ProgressPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {\n label?: string;\n labelProps?: LabelProps;\n }\n>(({ className, value, ...props }, ref) => (\n <div className=\"hawa-flex hawa-flex-col hawa-gap-2\">\n {props.label && <Label {...props.labelProps}>{props.label}</Label>}\n <ProgressPrimitive.Root\n ref={ref}\n className={cn(\n \"hawa-relative hawa-h-4 hawa-w-full hawa-overflow-hidden hawa-rounded hawa-bg-secondary\",\n className,\n )}\n {...props}\n >\n <ProgressPrimitive.Indicator\n className=\"hawa-h-full hawa-w-full hawa-flex-1 hawa-bg-primary hawa-transition-all\"\n style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n />\n </ProgressPrimitive.Root>\n </div>\n));\nProgress.displayName = ProgressPrimitive.Root.displayName;\n\nexport { Progress };\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(sanitizedHex);\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 { cn } from \"@util/index\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\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 /** Disables the tooltip. */\n disabled?: boolean;\n triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n contentProps?: TooltipPrimitive.TooltipContentProps;\n providerProps?: TooltipPrimitive.TooltipProps;\n};\n\nconst Tooltip: React.FunctionComponent<TooltipTypes> = ({\n side,\n size,\n open,\n content,\n children,\n disabled,\n defaultOpen,\n onOpenChange,\n triggerProps,\n contentProps,\n providerProps,\n delayDuration = 300,\n ...props\n}) => {\n return (\n <TooltipPrimitive.TooltipProvider delayDuration={delayDuration} {...providerProps}>\n <TooltipPrimitive.Root\n open={!disabled && open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n {...props}\n >\n <TooltipPrimitive.Trigger {...triggerProps}>{children}</TooltipPrimitive.Trigger>\n <TooltipContent\n size={size}\n side={side}\n align=\"center\"\n {...contentProps}\n style={{\n ...contentProps?.style,\n maxWidth: \"var(--radix-tooltip-content-available-width)\",\n maxHeight: \"var(--radix-tooltip-content-available-height)\",\n }}\n >\n {content}\n </TooltipContent>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.TooltipProvider>\n );\n};\n\nexport { Tooltip };\n"],"mappings":"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","names":["React","React"]}
|
@@ -62,82 +62,78 @@ function getLimitedValue(input) {
|
|
62
62
|
return input;
|
63
63
|
}
|
64
64
|
}
|
65
|
-
var ProgressCircle = import_react.default.forwardRef(
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
ref,
|
89
|
-
className: cn(
|
90
|
-
"hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
|
91
|
-
className
|
92
|
-
)
|
93
|
-
},
|
94
|
-
/* @__PURE__ */ import_react.default.createElement(
|
95
|
-
"svg",
|
65
|
+
var ProgressCircle = import_react.default.forwardRef(
|
66
|
+
(props, ref) => {
|
67
|
+
const {
|
68
|
+
value: inputValue,
|
69
|
+
size = "md",
|
70
|
+
className,
|
71
|
+
showAnimation = true,
|
72
|
+
color,
|
73
|
+
tooltip,
|
74
|
+
radius: inputRadius,
|
75
|
+
strokeWidth: inputStrokeWidth,
|
76
|
+
children,
|
77
|
+
...other
|
78
|
+
} = props;
|
79
|
+
const value = getLimitedValue(inputValue);
|
80
|
+
const radius = inputRadius != null ? inputRadius : size2config[size].radius;
|
81
|
+
const strokeWidth = inputStrokeWidth != null ? inputStrokeWidth : size2config[size].strokeWidth;
|
82
|
+
const normalizedRadius = radius - strokeWidth / 2;
|
83
|
+
const circumference = normalizedRadius * 2 * Math.PI;
|
84
|
+
const strokeDashoffset = value / 100 * circumference;
|
85
|
+
const offset = circumference - strokeDashoffset;
|
86
|
+
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
|
87
|
+
"div",
|
96
88
|
{
|
97
|
-
|
98
|
-
|
99
|
-
viewBox: `0 0 ${radius * 2} ${radius * 2}`,
|
100
|
-
className: "hawa-rotate-180 hawa-transform"
|
89
|
+
ref,
|
90
|
+
className: cn("hawa-flex hawa-flex-col hawa-items-center hawa-justify-center", className)
|
101
91
|
},
|
102
92
|
/* @__PURE__ */ import_react.default.createElement(
|
103
|
-
"
|
93
|
+
"svg",
|
104
94
|
{
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
95
|
+
width: radius * 2,
|
96
|
+
height: radius * 2,
|
97
|
+
viewBox: `0 0 ${radius * 2} ${radius * 2}`,
|
98
|
+
className: "hawa-rotate-180 hawa-transform"
|
99
|
+
},
|
100
|
+
/* @__PURE__ */ import_react.default.createElement(
|
101
|
+
"circle",
|
102
|
+
{
|
103
|
+
r: normalizedRadius,
|
104
|
+
cx: radius,
|
105
|
+
cy: radius,
|
106
|
+
strokeWidth,
|
107
|
+
fill: "transparent",
|
108
|
+
stroke: "",
|
109
|
+
strokeLinecap: "round",
|
110
|
+
className: cn("hawa-transition-colors hawa-ease-linear", "hawa-stroke-primary/20")
|
111
|
+
}
|
112
|
+
),
|
113
|
+
value > 0 ? /* @__PURE__ */ import_react.default.createElement(
|
114
|
+
"circle",
|
115
|
+
{
|
116
|
+
r: normalizedRadius,
|
117
|
+
cx: radius,
|
118
|
+
cy: radius,
|
119
|
+
strokeWidth,
|
120
|
+
strokeDasharray: circumference + " " + circumference,
|
121
|
+
strokeDashoffset: offset,
|
122
|
+
fill: "transparent",
|
123
|
+
stroke: "",
|
124
|
+
strokeLinecap: "round",
|
125
|
+
className: cn(
|
126
|
+
"hawa-transition-colors hawa-ease-linear",
|
127
|
+
"hawa-stroke-primary",
|
128
|
+
showAnimation ? "hawa-transition-all hawa-duration-300 hawa-ease-in-out" : ""
|
129
|
+
)
|
130
|
+
}
|
131
|
+
) : null
|
117
132
|
),
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
cx: radius,
|
123
|
-
cy: radius,
|
124
|
-
strokeWidth,
|
125
|
-
strokeDasharray: circumference + " " + circumference,
|
126
|
-
strokeDashoffset: offset,
|
127
|
-
fill: "transparent",
|
128
|
-
stroke: "",
|
129
|
-
strokeLinecap: "round",
|
130
|
-
className: cn(
|
131
|
-
"hawa-transition-colors hawa-ease-linear",
|
132
|
-
"hawa-stroke-primary",
|
133
|
-
showAnimation ? "hawa-transition-all hawa-duration-300 hawa-ease-in-out" : ""
|
134
|
-
)
|
135
|
-
}
|
136
|
-
) : null
|
137
|
-
),
|
138
|
-
/* @__PURE__ */ import_react.default.createElement("div", { className: cn("hawa-absolute hawa-flex") }, children)
|
139
|
-
));
|
140
|
-
});
|
133
|
+
/* @__PURE__ */ import_react.default.createElement("div", { className: cn("hawa-absolute hawa-flex") }, children)
|
134
|
+
));
|
135
|
+
}
|
136
|
+
);
|
141
137
|
ProgressCircle.displayName = "ProgressCircle";
|
142
138
|
// Annotate the CommonJS export names for ESM import in node:
|
143
139
|
0 && (module.exports = {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/progressCircle/index.ts","../../elements/progressCircle/ProgressCircle.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./ProgressCircle\";\n","import React from \"react\";\n\nimport { cn } from \"@util/index\";\n\ntype Size = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\ninterface ProgressCircleProps extends React.HTMLAttributes<HTMLDivElement> {\n value: number;\n size?: Size;\n color?: any;\n showAnimation?: boolean;\n tooltip?: string;\n radius?: number;\n strokeWidth?: number;\n children?: React.ReactNode;\n}\n\nconst size2config: Record<Size, { strokeWidth: number; radius: number }> = {\n xs: { radius: 15, strokeWidth: 3 },\n sm: { radius: 19, strokeWidth: 4 },\n md: { radius: 32, strokeWidth: 6 },\n lg: { radius: 52, strokeWidth: 8 },\n xl: { radius: 80, strokeWidth: 10 },\n};\n\nfunction getLimitedValue(input: number | undefined) {\n if (input === undefined) {\n return 0;\n } else if (input > 100) {\n return 100;\n } else {\n return input;\n }\n}\nexport const ProgressCircle = React.forwardRef
|
1
|
+
{"version":3,"sources":["../../elements/progressCircle/index.ts","../../elements/progressCircle/ProgressCircle.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./ProgressCircle\";\n","import React from \"react\";\n\nimport { cn } from \"@util/index\";\n\ntype Size = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\ninterface ProgressCircleProps extends React.HTMLAttributes<HTMLDivElement> {\n value: number;\n size?: Size;\n color?: any;\n showAnimation?: boolean;\n tooltip?: string;\n radius?: number;\n strokeWidth?: number;\n children?: React.ReactNode;\n}\n\nconst size2config: Record<Size, { strokeWidth: number; radius: number }> = {\n xs: { radius: 15, strokeWidth: 3 },\n sm: { radius: 19, strokeWidth: 4 },\n md: { radius: 32, strokeWidth: 6 },\n lg: { radius: 52, strokeWidth: 8 },\n xl: { radius: 80, strokeWidth: 10 },\n};\n\nfunction getLimitedValue(input: number | undefined) {\n if (input === undefined) {\n return 0;\n } else if (input > 100) {\n return 100;\n } else {\n return input;\n }\n}\nexport const ProgressCircle = React.forwardRef<HTMLDivElement, ProgressCircleProps>(\n (props, ref) => {\n const {\n value: inputValue,\n size = \"md\",\n className,\n showAnimation = true,\n color,\n tooltip,\n radius: inputRadius,\n strokeWidth: inputStrokeWidth,\n children,\n ...other\n } = props;\n\n const value = getLimitedValue(inputValue);\n const radius = inputRadius ?? size2config[size].radius;\n const strokeWidth = inputStrokeWidth ?? size2config[size].strokeWidth;\n const normalizedRadius = radius - strokeWidth / 2;\n const circumference = normalizedRadius * 2 * Math.PI;\n const strokeDashoffset = (value / 100) * circumference;\n const offset = circumference - strokeDashoffset;\n\n return (\n <>\n <div\n ref={ref}\n className={cn(\"hawa-flex hawa-flex-col hawa-items-center hawa-justify-center\", className)}\n >\n <svg\n width={radius * 2}\n height={radius * 2}\n viewBox={`0 0 ${radius * 2} ${radius * 2}`}\n className=\"hawa-rotate-180 hawa-transform\"\n >\n <circle\n r={normalizedRadius}\n cx={radius}\n cy={radius}\n strokeWidth={strokeWidth}\n fill=\"transparent\"\n stroke=\"\"\n strokeLinecap=\"round\"\n className={cn(\"hawa-transition-colors hawa-ease-linear\", \"hawa-stroke-primary/20\")}\n />\n {value > 0 ? (\n <circle\n r={normalizedRadius}\n cx={radius}\n cy={radius}\n strokeWidth={strokeWidth}\n strokeDasharray={circumference + \" \" + circumference}\n strokeDashoffset={offset}\n fill=\"transparent\"\n stroke=\"\"\n strokeLinecap=\"round\"\n className={cn(\n \"hawa-transition-colors hawa-ease-linear\",\n \"hawa-stroke-primary\",\n showAnimation ? \"hawa-transition-all hawa-duration-300 hawa-ease-in-out\" : \"\",\n )}\n />\n ) : null}\n </svg>\n <div className={cn(\"hawa-absolute hawa-flex\")}>{children}</div>\n </div>\n </>\n );\n },\n);\n\nProgressCircle.displayName = \"ProgressCircle\";\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(sanitizedHex);\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;;;ACAlB,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADYA,IAAM,cAAqE;AAAA,EACzE,IAAI,EAAE,QAAQ,IAAI,aAAa,EAAE;AAAA,EACjC,IAAI,EAAE,QAAQ,IAAI,aAAa,EAAE;AAAA,EACjC,IAAI,EAAE,QAAQ,IAAI,aAAa,EAAE;AAAA,EACjC,IAAI,EAAE,QAAQ,IAAI,aAAa,EAAE;AAAA,EACjC,IAAI,EAAE,QAAQ,IAAI,aAAa,GAAG;AACpC;AAEA,SAAS,gBAAgB,OAA2B;AAClD,MAAI,UAAU,QAAW;AACvB,WAAO;AAAA,EACT,WAAW,QAAQ,KAAK;AACtB,WAAO;AAAA,EACT,OAAO;AACL,WAAO;AAAA,EACT;AACF;AACO,IAAM,iBAAiB,aAAAA,QAAM;AAAA,EAClC,CAAC,OAAO,QAAQ;AACd,UAAM;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,aAAa;AAAA,MACb;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,QAAQ,gBAAgB,UAAU;AACxC,UAAM,SAAS,oCAAe,YAAY,IAAI,EAAE;AAChD,UAAM,cAAc,8CAAoB,YAAY,IAAI,EAAE;AAC1D,UAAM,mBAAmB,SAAS,cAAc;AAChD,UAAM,gBAAgB,mBAAmB,IAAI,KAAK;AAClD,UAAM,mBAAoB,QAAQ,MAAO;AACzC,UAAM,SAAS,gBAAgB;AAE/B,WACE,6BAAAA,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,iEAAiE,SAAS;AAAA;AAAA,MAExF,6BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,SAAS;AAAA,UAChB,QAAQ,SAAS;AAAA,UACjB,SAAS,OAAO,SAAS,CAAC,IAAI,SAAS,CAAC;AAAA,UACxC,WAAU;AAAA;AAAA,QAEV,6BAAAA,QAAA;AAAA,UAAC;AAAA;AAAA,YACC,GAAG;AAAA,YACH,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ;AAAA,YACA,MAAK;AAAA,YACL,QAAO;AAAA,YACP,eAAc;AAAA,YACd,WAAW,GAAG,2CAA2C,wBAAwB;AAAA;AAAA,QACnF;AAAA,QACC,QAAQ,IACP,6BAAAA,QAAA;AAAA,UAAC;AAAA;AAAA,YACC,GAAG;AAAA,YACH,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ;AAAA,YACA,iBAAiB,gBAAgB,MAAM;AAAA,YACvC,kBAAkB;AAAA,YAClB,MAAK;AAAA,YACL,QAAO;AAAA,YACP,eAAc;AAAA,YACd,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA,gBAAgB,2DAA2D;AAAA,YAC7E;AAAA;AAAA,QACF,IACE;AAAA,MACN;AAAA,MACA,6BAAAA,QAAA,cAAC,SAAI,WAAW,GAAG,yBAAyB,KAAI,QAAS;AAAA,IAC3D,CACF;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;","names":["React"]}
|
@@ -27,82 +27,78 @@ function getLimitedValue(input) {
|
|
27
27
|
return input;
|
28
28
|
}
|
29
29
|
}
|
30
|
-
var ProgressCircle = React.forwardRef(
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
ref,
|
54
|
-
className: cn(
|
55
|
-
"hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
|
56
|
-
className
|
57
|
-
)
|
58
|
-
},
|
59
|
-
/* @__PURE__ */ React.createElement(
|
60
|
-
"svg",
|
30
|
+
var ProgressCircle = React.forwardRef(
|
31
|
+
(props, ref) => {
|
32
|
+
const {
|
33
|
+
value: inputValue,
|
34
|
+
size = "md",
|
35
|
+
className,
|
36
|
+
showAnimation = true,
|
37
|
+
color,
|
38
|
+
tooltip,
|
39
|
+
radius: inputRadius,
|
40
|
+
strokeWidth: inputStrokeWidth,
|
41
|
+
children,
|
42
|
+
...other
|
43
|
+
} = props;
|
44
|
+
const value = getLimitedValue(inputValue);
|
45
|
+
const radius = inputRadius != null ? inputRadius : size2config[size].radius;
|
46
|
+
const strokeWidth = inputStrokeWidth != null ? inputStrokeWidth : size2config[size].strokeWidth;
|
47
|
+
const normalizedRadius = radius - strokeWidth / 2;
|
48
|
+
const circumference = normalizedRadius * 2 * Math.PI;
|
49
|
+
const strokeDashoffset = value / 100 * circumference;
|
50
|
+
const offset = circumference - strokeDashoffset;
|
51
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
|
52
|
+
"div",
|
61
53
|
{
|
62
|
-
|
63
|
-
|
64
|
-
viewBox: `0 0 ${radius * 2} ${radius * 2}`,
|
65
|
-
className: "hawa-rotate-180 hawa-transform"
|
54
|
+
ref,
|
55
|
+
className: cn("hawa-flex hawa-flex-col hawa-items-center hawa-justify-center", className)
|
66
56
|
},
|
67
57
|
/* @__PURE__ */ React.createElement(
|
68
|
-
"
|
58
|
+
"svg",
|
69
59
|
{
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
60
|
+
width: radius * 2,
|
61
|
+
height: radius * 2,
|
62
|
+
viewBox: `0 0 ${radius * 2} ${radius * 2}`,
|
63
|
+
className: "hawa-rotate-180 hawa-transform"
|
64
|
+
},
|
65
|
+
/* @__PURE__ */ React.createElement(
|
66
|
+
"circle",
|
67
|
+
{
|
68
|
+
r: normalizedRadius,
|
69
|
+
cx: radius,
|
70
|
+
cy: radius,
|
71
|
+
strokeWidth,
|
72
|
+
fill: "transparent",
|
73
|
+
stroke: "",
|
74
|
+
strokeLinecap: "round",
|
75
|
+
className: cn("hawa-transition-colors hawa-ease-linear", "hawa-stroke-primary/20")
|
76
|
+
}
|
77
|
+
),
|
78
|
+
value > 0 ? /* @__PURE__ */ React.createElement(
|
79
|
+
"circle",
|
80
|
+
{
|
81
|
+
r: normalizedRadius,
|
82
|
+
cx: radius,
|
83
|
+
cy: radius,
|
84
|
+
strokeWidth,
|
85
|
+
strokeDasharray: circumference + " " + circumference,
|
86
|
+
strokeDashoffset: offset,
|
87
|
+
fill: "transparent",
|
88
|
+
stroke: "",
|
89
|
+
strokeLinecap: "round",
|
90
|
+
className: cn(
|
91
|
+
"hawa-transition-colors hawa-ease-linear",
|
92
|
+
"hawa-stroke-primary",
|
93
|
+
showAnimation ? "hawa-transition-all hawa-duration-300 hawa-ease-in-out" : ""
|
94
|
+
)
|
95
|
+
}
|
96
|
+
) : null
|
82
97
|
),
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
cx: radius,
|
88
|
-
cy: radius,
|
89
|
-
strokeWidth,
|
90
|
-
strokeDasharray: circumference + " " + circumference,
|
91
|
-
strokeDashoffset: offset,
|
92
|
-
fill: "transparent",
|
93
|
-
stroke: "",
|
94
|
-
strokeLinecap: "round",
|
95
|
-
className: cn(
|
96
|
-
"hawa-transition-colors hawa-ease-linear",
|
97
|
-
"hawa-stroke-primary",
|
98
|
-
showAnimation ? "hawa-transition-all hawa-duration-300 hawa-ease-in-out" : ""
|
99
|
-
)
|
100
|
-
}
|
101
|
-
) : null
|
102
|
-
),
|
103
|
-
/* @__PURE__ */ React.createElement("div", { className: cn("hawa-absolute hawa-flex") }, children)
|
104
|
-
));
|
105
|
-
});
|
98
|
+
/* @__PURE__ */ React.createElement("div", { className: cn("hawa-absolute hawa-flex") }, children)
|
99
|
+
));
|
100
|
+
}
|
101
|
+
);
|
106
102
|
ProgressCircle.displayName = "ProgressCircle";
|
107
103
|
export {
|
108
104
|
ProgressCircle
|