@sikka/hawa 0.37.1-next → 0.38.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/{Radio-y9uhxitu.d.ts → Radio-lgoClQrv.d.ts} +2 -2
- package/dist/{Radio-BCD7k628.d.mts → Radio-uQ7DtzcI.d.mts} +2 -2
- package/dist/alert/index.js.map +1 -1
- package/dist/alert/index.mjs.map +1 -1
- package/dist/appLayout/index.js.map +1 -1
- package/dist/appLayout/index.mjs.map +1 -1
- package/dist/backToTop/index.js.map +1 -1
- package/dist/backToTop/index.mjs.map +1 -1
- package/dist/blocks/auth/index.d.mts +1 -0
- package/dist/blocks/auth/index.d.ts +1 -0
- package/dist/blocks/auth/index.js +207 -123
- package/dist/blocks/auth/index.mjs +204 -101
- package/dist/blocks/feedback/index.js +4 -40
- package/dist/blocks/feedback/index.mjs +5 -5
- package/dist/blocks/index.d.mts +2 -1
- package/dist/blocks/index.d.ts +2 -1
- package/dist/blocks/index.js +457 -400
- package/dist/blocks/index.mjs +10 -8
- package/dist/blocks/misc/index.js +5 -32
- package/dist/blocks/misc/index.mjs +5 -5
- package/dist/blocks/pricing/index.js +4 -22
- package/dist/blocks/pricing/index.mjs +4 -4
- package/dist/button/index.js.map +1 -1
- package/dist/button/index.mjs.map +1 -1
- package/dist/calendar/index.js.map +1 -1
- package/dist/calendar/index.mjs.map +1 -1
- package/dist/checkbox/index.d.mts +1 -1
- package/dist/checkbox/index.d.ts +1 -1
- package/dist/checkbox/index.js.map +1 -1
- package/dist/checkbox/index.mjs.map +1 -1
- package/dist/{chunk-BPHQFAWM.mjs → chunk-4EZL2A64.mjs} +3 -11
- package/dist/{chunk-DS3AACQJ.mjs → chunk-E6C3LDHD.mjs} +1 -1
- package/dist/{chunk-ODOCZAWC.mjs → chunk-E77TUADR.mjs} +1 -1
- package/dist/{chunk-QXH7ZDMN.mjs → chunk-IA5FLRFL.mjs} +3 -11
- package/dist/{chunk-ZTUWU652.mjs → chunk-JJMRBD3S.mjs} +3 -3
- package/dist/{chunk-RNFJAEEU.mjs → chunk-LDJD5ITW.mjs} +1 -0
- package/dist/{chunk-QYWOI3DO.mjs → chunk-MHSSZ6XE.mjs} +204 -144
- package/dist/{chunk-BTDR3VAG.mjs → chunk-Q3HJI7ZE.mjs} +4 -21
- package/dist/{chunk-MDHDHEPZ.mjs → chunk-TMUQCNLO.mjs} +3 -11
- package/dist/{chunk-PXGL7ZXQ.mjs → chunk-V4SUYEVH.mjs} +1 -0
- package/dist/codeBlock/index.js.map +1 -1
- package/dist/codeBlock/index.mjs.map +1 -1
- package/dist/colorPicker/index.d.mts +1 -1
- package/dist/colorPicker/index.d.ts +1 -1
- package/dist/colorPicker/index.js +35 -31
- package/dist/colorPicker/index.js.map +1 -1
- package/dist/colorPicker/index.mjs +33 -29
- package/dist/colorPicker/index.mjs.map +1 -1
- package/dist/combobox/index.d.mts +2 -2
- package/dist/combobox/index.d.ts +2 -2
- package/dist/combobox/index.js +52 -48
- package/dist/combobox/index.js.map +1 -1
- package/dist/combobox/index.mjs +52 -48
- 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 +26 -4
- package/dist/command/index.js.map +1 -1
- package/dist/command/index.mjs +26 -4
- package/dist/command/index.mjs.map +1 -1
- package/dist/dataTable/index.js +1 -10
- package/dist/dataTable/index.js.map +1 -1
- package/dist/dataTable/index.mjs +1 -10
- package/dist/dataTable/index.mjs.map +1 -1
- package/dist/datePicker/index.js.map +1 -1
- package/dist/datePicker/index.mjs.map +1 -1
- package/dist/docsLayout/index.js.map +1 -1
- package/dist/docsLayout/index.mjs.map +1 -1
- package/dist/elements/index.d.mts +48 -25
- package/dist/elements/index.d.ts +48 -25
- package/dist/elements/index.js +361 -294
- package/dist/elements/index.mjs +40 -27
- package/dist/fileDropzone/index.js.map +1 -1
- package/dist/fileDropzone/index.mjs.map +1 -1
- package/dist/{index-e_Ob_SnB.d.ts → index-B0aJcA6d.d.mts} +6 -4
- package/dist/{index-e_Ob_SnB.d.mts → index-B0aJcA6d.d.ts} +6 -4
- package/dist/index.css +29 -3
- package/dist/index.d.mts +50 -26
- package/dist/index.d.ts +50 -26
- package/dist/index.js +790 -721
- package/dist/index.mjs +313 -248
- package/dist/input/index.d.mts +1 -1
- package/dist/input/index.d.ts +1 -1
- package/dist/input/index.js +46 -42
- package/dist/input/index.js.map +1 -1
- package/dist/input/index.mjs +45 -41
- package/dist/input/index.mjs.map +1 -1
- package/dist/interfaceSettings/index.js +64 -69
- package/dist/interfaceSettings/index.js.map +1 -1
- package/dist/interfaceSettings/index.mjs +57 -62
- package/dist/interfaceSettings/index.mjs.map +1 -1
- package/dist/layout/index.d.mts +1 -1
- package/dist/layout/index.d.ts +1 -1
- package/dist/layout/index.mjs +2 -2
- package/dist/passwordInput/index.js +70 -66
- package/dist/passwordInput/index.js.map +1 -1
- package/dist/passwordInput/index.mjs +59 -55
- package/dist/passwordInput/index.mjs.map +1 -1
- package/dist/phoneInput/index.js +50 -55
- package/dist/phoneInput/index.js.map +1 -1
- package/dist/phoneInput/index.mjs +47 -52
- package/dist/phoneInput/index.mjs.map +1 -1
- package/dist/pinInput/index.d.mts +37 -16
- package/dist/pinInput/index.d.ts +37 -16
- package/dist/pinInput/index.js +208 -78
- package/dist/pinInput/index.js.map +1 -1
- package/dist/pinInput/index.mjs +203 -77
- package/dist/pinInput/index.mjs.map +1 -1
- package/dist/radio/index.d.mts +1 -1
- package/dist/radio/index.d.ts +1 -1
- package/dist/radio/index.js +55 -60
- package/dist/radio/index.js.map +1 -1
- package/dist/radio/index.mjs +50 -55
- package/dist/radio/index.mjs.map +1 -1
- package/dist/scrollArea/index.js +2 -2
- package/dist/scrollArea/index.js.map +1 -1
- package/dist/scrollArea/index.mjs +2 -2
- package/dist/scrollArea/index.mjs.map +1 -1
- package/dist/select/index.d.mts +1 -1
- package/dist/select/index.d.ts +1 -1
- package/dist/select/index.js +43 -39
- package/dist/select/index.js.map +1 -1
- package/dist/select/index.mjs +43 -39
- package/dist/select/index.mjs.map +1 -1
- package/dist/signature/index.d.mts +1 -1
- package/dist/signature/index.d.ts +1 -1
- package/dist/signature/index.js.map +1 -1
- package/dist/signature/index.mjs.map +1 -1
- package/dist/sortButton/index.js.map +1 -1
- package/dist/sortButton/index.mjs.map +1 -1
- package/dist/splitButton/index.js.map +1 -1
- package/dist/splitButton/index.mjs.map +1 -1
- package/dist/stats/index.d.mts +1 -1
- package/dist/stats/index.d.ts +1 -1
- package/dist/stats/index.js.map +1 -1
- package/dist/stats/index.mjs.map +1 -1
- package/dist/tabs/index.js +2 -2
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs +2 -2
- package/dist/tabs/index.mjs.map +1 -1
- package/dist/textarea/index.d.mts +1 -1
- package/dist/textarea/index.d.ts +1 -1
- package/dist/textarea/index.js +34 -30
- package/dist/textarea/index.js.map +1 -1
- package/dist/textarea/index.mjs +34 -30
- package/dist/textarea/index.mjs.map +1 -1
- package/package.json +3 -2
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/colorPicker/index.ts","../../elements/colorPicker/ColorPicker.tsx","../../util/index.ts","../../elements/skeleton/Skeleton.tsx","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx"],"sourcesContent":["export * from \"./ColorPicker\";","import React, {\n useState,\n FC,\n ChangeEvent,\n InputHTMLAttributes,\n useEffect,\n FormEvent,\n} from \"react\";\n\nimport { calculateLuminance, cn, getTextColor } from \"@util/index\";\n\nimport { Skeleton } from \"@elements/skeleton\";\n\nimport { Label, LabelProps } from \"../label\";\n\ntype ColorPickerTypes = {\n label?: string;\n id?: string;\n isLoading?: boolean;\n labelProps?: LabelProps;\n helperText?: string;\n forceHideHelperText?: boolean;\n /** Boolean to enable/disable editing the input field and using it as a text field */\n preview?: boolean;\n /** The hex code for the color */\n color?: any;\n /** Fires everytime the color changes */\n handleChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n colorPickerClassNames?: string;\n colorTextClassNames?: string;\n colorPickerProps?: InputHTMLAttributes<HTMLInputElement>;\n textInputProps?: InputHTMLAttributes<HTMLInputElement>;\n containerProps?: InputHTMLAttributes<HTMLDivElement>;\n};\n\nexport const ColorPicker: FC<ColorPickerTypes> = ({\n containerProps,\n colorPickerProps,\n textInputProps,\n labelProps,\n forceHideHelperText,\n isLoading,\n preview = false,\n ...props\n}) => {\n const [selectedColor, setSelectedColor] = useState(props.color);\n\n useEffect(() => {\n if (selectedColor && selectedColor[0] !== \"#\") {\n setSelectedColor(`#${selectedColor}`);\n }\n }, [selectedColor]);\n\n const handleTextInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n const inputElement = e.target as HTMLInputElement;\n let inputColor = inputElement.value;\n\n if (inputColor[0] !== \"#\") {\n // Prepend a hash (#) to the input value\n inputColor = `#${inputColor}`;\n // inputElement.value = inputColor;\n }\n // Remove any non-alphanumeric characters except the hash (#)\n const sanitizedInput = inputColor.replace(/[^a-fA-F0-9#]/g, \"\");\n\n setSelectedColor(sanitizedInput);\n\n if (props.handleChange) {\n props.handleChange(e); // Pass the original event\n }\n };\n\n return (\n <div className=\"hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2\">\n {props.label && <Label {...labelProps}>{props.label}</Label>}\n {isLoading ? (\n <Skeleton style={{ height: 40, width: 148 }} />\n ) : (\n <div dir=\"ltr\" className=\"hawa-flex hawa-w-full hawa-flex-row\">\n <div\n style={{ height: 40, backgroundColor: selectedColor }}\n className=\"hawa-rounded-bl-lg hawa-rounded-tl-lg hawa-border\"\n >\n <input\n disabled={preview}\n type=\"color\"\n value={selectedColor}\n onChange={(e) => {\n setSelectedColor(e.target.value);\n if (props.handleChange) {\n props.handleChange(e); //TODO: perhaps change this to onChange\n }\n }}\n className={cn(\n \"hawa-mt-0 hawa-h-[38px] hawa-opacity-0\",\n props.colorPickerClassNames,\n )}\n {...colorPickerProps}\n />\n </div>\n <div className=\"hawa-relative hawa-flex hawa-max-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0\">\n <input\n disabled={preview}\n maxLength={7}\n type=\"text\"\n onInput={handleTextInputChange}\n value={selectedColor}\n className={cn(\n \"hawa-block hawa-h-[40px] hawa-w-24 hawa-rounded hawa-rounded-l-none hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all\",\n \"hawa-border hawa-border-l-0 hawa-border-l-transparent placeholder:hawa-text-muted-foreground\",\n // \"hawa-border hawa-border-x-0 hawa-border-x-transparent hawa-border-b-0 hawa-rounded-tr-none\"\n )}\n style={{\n backgroundColor: preview\n ? selectedColor\n : \"hsl(var(--background))\",\n color: preview\n ? calculateLuminance(selectedColor) > 0.5\n ? \"black\"\n : \"white\"\n : \"\",\n }}\n // 0.179\n {...textInputProps}\n />\n </div>\n </div>\n )}\n\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 </div>\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 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 fade?: \"top\" | \"bottom\" | \"left\" | \"right\";\n}\n\nfunction Skeleton({\n className,\n content,\n animation = \"pulse\",\n fade,\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 const fadeStyle = {\n bottom: \"hawa-mask-fade-bottom\",\n top: \"hawa-mask-fade-top\",\n right: \"hawa-mask-fade-right\",\n left: \"hawa-mask-fade-left \",\n };\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 fade && fadeStyle[fade],\n className,\n )}\n {...props}\n >\n {content && content}\n </div>\n );\n}\n\nexport { Skeleton };\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 /** Disables the tooltip. */\n disabled?: boolean;\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 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":["import_react","React","React","import_react","React","React"]}
|
1
|
+
{"version":3,"sources":["../../elements/colorPicker/index.ts","../../elements/colorPicker/ColorPicker.tsx","../../util/index.ts","../../elements/skeleton/Skeleton.tsx","../../elements/helperText/HelperText.tsx","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx"],"sourcesContent":["export * from \"./ColorPicker\";","import React, {\n useState,\n FC,\n ChangeEvent,\n InputHTMLAttributes,\n useEffect,\n FormEvent,\n} from \"react\";\n\nimport { calculateLuminance, cn, getTextColor } from \"@util/index\";\n\nimport { Skeleton } from \"@elements/skeleton\";\n\nimport { HelperText } from \"../helperText\";\nimport { Label, LabelProps } from \"../label\";\n\ntype ColorPickerTypes = {\n label?: string;\n id?: string;\n isLoading?: boolean;\n labelProps?: LabelProps;\n helperText?: any;\n forceHideHelperText?: boolean;\n /** Boolean to enable/disable editing the input field and using it as a text field */\n preview?: boolean;\n /** The hex code for the color */\n color?: any;\n /** Fires everytime the color changes */\n handleChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n colorPickerClassNames?: string;\n colorTextClassNames?: string;\n colorPickerProps?: InputHTMLAttributes<HTMLInputElement>;\n textInputProps?: InputHTMLAttributes<HTMLInputElement>;\n containerProps?: InputHTMLAttributes<HTMLDivElement>;\n};\n\nexport const ColorPicker: FC<ColorPickerTypes> = ({\n containerProps,\n colorPickerProps,\n textInputProps,\n labelProps,\n forceHideHelperText,\n isLoading,\n preview = false,\n ...props\n}) => {\n const [selectedColor, setSelectedColor] = useState(props.color);\n\n useEffect(() => {\n if (selectedColor && selectedColor[0] !== \"#\") {\n setSelectedColor(`#${selectedColor}`);\n }\n }, [selectedColor]);\n\n const handleTextInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n const inputElement = e.target as HTMLInputElement;\n let inputColor = inputElement.value;\n\n if (inputColor[0] !== \"#\") {\n // Prepend a hash (#) to the input value\n inputColor = `#${inputColor}`;\n // inputElement.value = inputColor;\n }\n // Remove any non-alphanumeric characters except the hash (#)\n const sanitizedInput = inputColor.replace(/[^a-fA-F0-9#]/g, \"\");\n\n setSelectedColor(sanitizedInput);\n\n if (props.handleChange) {\n props.handleChange(e); // Pass the original event\n }\n };\n\n return (\n <div className=\"hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2\">\n {props.label && <Label {...labelProps}>{props.label}</Label>}\n {isLoading ? (\n <Skeleton style={{ height: 40, width: 148 }} />\n ) : (\n <div dir=\"ltr\" className=\"hawa-flex hawa-w-full hawa-flex-row\">\n <div\n style={{ height: 40, backgroundColor: selectedColor }}\n className=\"hawa-rounded-bl-lg hawa-rounded-tl-lg hawa-border\"\n >\n <input\n disabled={preview}\n type=\"color\"\n value={selectedColor}\n onChange={(e) => {\n setSelectedColor(e.target.value);\n if (props.handleChange) {\n props.handleChange(e); //TODO: perhaps change this to onChange\n }\n }}\n className={cn(\n \"hawa-mt-0 hawa-h-[38px] hawa-opacity-0\",\n props.colorPickerClassNames,\n )}\n {...colorPickerProps}\n />\n </div>\n <div className=\"hawa-relative hawa-flex hawa-max-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0\">\n <input\n disabled={preview}\n maxLength={7}\n type=\"text\"\n onInput={handleTextInputChange}\n value={selectedColor}\n className={cn(\n \"hawa-block hawa-h-[40px] hawa-w-24 hawa-rounded hawa-rounded-l-none hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all\",\n \"hawa-border hawa-border-l-0 hawa-border-l-transparent placeholder:hawa-text-muted-foreground\",\n // \"hawa-border hawa-border-x-0 hawa-border-x-transparent hawa-border-b-0 hawa-rounded-tr-none\"\n )}\n style={{\n backgroundColor: preview\n ? selectedColor\n : \"hsl(var(--background))\",\n color: preview\n ? calculateLuminance(selectedColor) > 0.5\n ? \"black\"\n : \"white\"\n : \"\",\n }}\n // 0.179\n {...textInputProps}\n />\n </div>\n </div>\n )}\n\n {!forceHideHelperText && <HelperText helperText={props.helperText} />}\n </div>\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 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 fade?: \"top\" | \"bottom\" | \"left\" | \"right\";\n}\n\nfunction Skeleton({\n className,\n content,\n animation = \"pulse\",\n fade,\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 const fadeStyle = {\n bottom: \"hawa-mask-fade-bottom\",\n top: \"hawa-mask-fade-top\",\n right: \"hawa-mask-fade-right\",\n left: \"hawa-mask-fade-left \",\n };\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 fade && fadeStyle[fade],\n className,\n )}\n {...props}\n >\n {content && content}\n </div>\n );\n}\n\nexport { Skeleton };\n","import React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport const HelperText = ({ helperText }: { helperText?: any }) => (\n <p\n className={cn(\n \"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all\",\n helperText ? \"hawa-h-4 hawa-opacity-100\" : \"hawa-h-0 hawa-opacity-0\",\n )}\n >\n {helperText}\n </p>\n);\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 /** Disables the tooltip. */\n disabled?: boolean;\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 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":["import_react","React","import_react","React","React","import_react","React","React"]}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client";
|
2
2
|
|
3
3
|
// elements/colorPicker/ColorPicker.tsx
|
4
|
-
import
|
4
|
+
import React5, {
|
5
5
|
useState,
|
6
6
|
useEffect
|
7
7
|
} from "react";
|
@@ -67,13 +67,26 @@ function Skeleton({
|
|
67
67
|
);
|
68
68
|
}
|
69
69
|
|
70
|
+
// elements/helperText/HelperText.tsx
|
71
|
+
import React2 from "react";
|
72
|
+
var HelperText = ({ helperText }) => /* @__PURE__ */ React2.createElement(
|
73
|
+
"p",
|
74
|
+
{
|
75
|
+
className: cn(
|
76
|
+
"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
|
77
|
+
helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
|
78
|
+
)
|
79
|
+
},
|
80
|
+
helperText
|
81
|
+
);
|
82
|
+
|
70
83
|
// elements/label/Label.tsx
|
71
|
-
import * as
|
84
|
+
import * as React4 from "react";
|
72
85
|
|
73
86
|
// elements/tooltip/Tooltip.tsx
|
74
|
-
import
|
87
|
+
import React3 from "react";
|
75
88
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
76
|
-
var TooltipContent =
|
89
|
+
var TooltipContent = React3.forwardRef(({ className, sideOffset = 4, size = "default", ...props }, ref) => /* @__PURE__ */ React3.createElement(
|
77
90
|
TooltipPrimitive.Content,
|
78
91
|
{
|
79
92
|
ref,
|
@@ -90,7 +103,7 @@ var TooltipContent = React2.forwardRef(({ className, sideOffset = 4, size = "def
|
|
90
103
|
}
|
91
104
|
));
|
92
105
|
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
93
|
-
var TooltipArrow =
|
106
|
+
var TooltipArrow = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React3.createElement(TooltipPrimitive.Arrow, { ref, className: cn(className), ...props }));
|
94
107
|
TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
|
95
108
|
var Tooltip = ({
|
96
109
|
side,
|
@@ -107,13 +120,13 @@ var Tooltip = ({
|
|
107
120
|
delayDuration = 300,
|
108
121
|
...props
|
109
122
|
}) => {
|
110
|
-
return /* @__PURE__ */
|
123
|
+
return /* @__PURE__ */ React3.createElement(
|
111
124
|
TooltipPrimitive.TooltipProvider,
|
112
125
|
{
|
113
126
|
delayDuration,
|
114
127
|
...providerProps
|
115
128
|
},
|
116
|
-
/* @__PURE__ */
|
129
|
+
/* @__PURE__ */ React3.createElement(
|
117
130
|
TooltipPrimitive.Root,
|
118
131
|
{
|
119
132
|
open: !disabled && open,
|
@@ -121,8 +134,8 @@ var Tooltip = ({
|
|
121
134
|
onOpenChange,
|
122
135
|
...props
|
123
136
|
},
|
124
|
-
/* @__PURE__ */
|
125
|
-
/* @__PURE__ */
|
137
|
+
/* @__PURE__ */ React3.createElement(TooltipPrimitive.Trigger, { ...triggerProps }, children),
|
138
|
+
/* @__PURE__ */ React3.createElement(
|
126
139
|
TooltipContent,
|
127
140
|
{
|
128
141
|
size,
|
@@ -142,7 +155,7 @@ var Tooltip = ({
|
|
142
155
|
};
|
143
156
|
|
144
157
|
// elements/label/Label.tsx
|
145
|
-
var Label =
|
158
|
+
var Label = React4.forwardRef(({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React4.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all" }, /* @__PURE__ */ React4.createElement(
|
146
159
|
"label",
|
147
160
|
{
|
148
161
|
ref,
|
@@ -153,8 +166,8 @@ var Label = React3.forwardRef(({ className, hint, hintSide, required, children,
|
|
153
166
|
...props
|
154
167
|
},
|
155
168
|
children,
|
156
|
-
required && /* @__PURE__ */
|
157
|
-
), hint && /* @__PURE__ */
|
169
|
+
required && /* @__PURE__ */ React4.createElement("span", { className: "hawa-mx-0.5 hawa-text-red-500" }, "*")
|
170
|
+
), hint && /* @__PURE__ */ React4.createElement(
|
158
171
|
Tooltip,
|
159
172
|
{
|
160
173
|
content: hint,
|
@@ -164,7 +177,7 @@ var Label = React3.forwardRef(({ className, hint, hintSide, required, children,
|
|
164
177
|
onClick: (event) => event.preventDefault()
|
165
178
|
}
|
166
179
|
},
|
167
|
-
/* @__PURE__ */
|
180
|
+
/* @__PURE__ */ React4.createElement("div", null, /* @__PURE__ */ React4.createElement(
|
168
181
|
"svg",
|
169
182
|
{
|
170
183
|
xmlns: "http://www.w3.org/2000/svg",
|
@@ -176,9 +189,9 @@ var Label = React3.forwardRef(({ className, hint, hintSide, required, children,
|
|
176
189
|
strokeLinecap: "round",
|
177
190
|
strokeLinejoin: "round"
|
178
191
|
},
|
179
|
-
/* @__PURE__ */
|
180
|
-
/* @__PURE__ */
|
181
|
-
/* @__PURE__ */
|
192
|
+
/* @__PURE__ */ React4.createElement("circle", { cx: "12", cy: "12", r: "10" }),
|
193
|
+
/* @__PURE__ */ React4.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
|
194
|
+
/* @__PURE__ */ React4.createElement("path", { d: "M12 17h.01" })
|
182
195
|
))
|
183
196
|
)));
|
184
197
|
Label.displayName = "Label";
|
@@ -212,13 +225,13 @@ var ColorPicker = ({
|
|
212
225
|
props.handleChange(e);
|
213
226
|
}
|
214
227
|
};
|
215
|
-
return /* @__PURE__ */
|
228
|
+
return /* @__PURE__ */ React5.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React5.createElement(Label, { ...labelProps }, props.label), isLoading ? /* @__PURE__ */ React5.createElement(Skeleton, { style: { height: 40, width: 148 } }) : /* @__PURE__ */ React5.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ React5.createElement(
|
216
229
|
"div",
|
217
230
|
{
|
218
231
|
style: { height: 40, backgroundColor: selectedColor },
|
219
232
|
className: "hawa-rounded-bl-lg hawa-rounded-tl-lg hawa-border"
|
220
233
|
},
|
221
|
-
/* @__PURE__ */
|
234
|
+
/* @__PURE__ */ React5.createElement(
|
222
235
|
"input",
|
223
236
|
{
|
224
237
|
disabled: preview,
|
@@ -237,7 +250,7 @@ var ColorPicker = ({
|
|
237
250
|
...colorPickerProps
|
238
251
|
}
|
239
252
|
)
|
240
|
-
), /* @__PURE__ */
|
253
|
+
), /* @__PURE__ */ React5.createElement("div", { className: "hawa-relative hawa-flex hawa-max-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ React5.createElement(
|
241
254
|
"input",
|
242
255
|
{
|
243
256
|
disabled: preview,
|
@@ -256,16 +269,7 @@ var ColorPicker = ({
|
|
256
269
|
},
|
257
270
|
...textInputProps
|
258
271
|
}
|
259
|
-
))), !forceHideHelperText && /* @__PURE__ */
|
260
|
-
"p",
|
261
|
-
{
|
262
|
-
className: cn(
|
263
|
-
"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
|
264
|
-
props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
|
265
|
-
)
|
266
|
-
},
|
267
|
-
props.helperText
|
268
|
-
));
|
272
|
+
))), !forceHideHelperText && /* @__PURE__ */ React5.createElement(HelperText, { helperText: props.helperText }));
|
269
273
|
};
|
270
274
|
export {
|
271
275
|
ColorPicker
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/colorPicker/ColorPicker.tsx","../../util/index.ts","../../elements/skeleton/Skeleton.tsx","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx"],"sourcesContent":["import React, {\n useState,\n FC,\n ChangeEvent,\n InputHTMLAttributes,\n useEffect,\n FormEvent,\n} from \"react\";\n\nimport { calculateLuminance, cn, getTextColor } from \"@util/index\";\n\nimport { Skeleton } from \"@elements/skeleton\";\n\nimport { Label, LabelProps } from \"../label\";\n\ntype ColorPickerTypes = {\n label?: string;\n id?: string;\n isLoading?: boolean;\n labelProps?: LabelProps;\n helperText?: string;\n forceHideHelperText?: boolean;\n /** Boolean to enable/disable editing the input field and using it as a text field */\n preview?: boolean;\n /** The hex code for the color */\n color?: any;\n /** Fires everytime the color changes */\n handleChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n colorPickerClassNames?: string;\n colorTextClassNames?: string;\n colorPickerProps?: InputHTMLAttributes<HTMLInputElement>;\n textInputProps?: InputHTMLAttributes<HTMLInputElement>;\n containerProps?: InputHTMLAttributes<HTMLDivElement>;\n};\n\nexport const ColorPicker: FC<ColorPickerTypes> = ({\n containerProps,\n colorPickerProps,\n textInputProps,\n labelProps,\n forceHideHelperText,\n isLoading,\n preview = false,\n ...props\n}) => {\n const [selectedColor, setSelectedColor] = useState(props.color);\n\n useEffect(() => {\n if (selectedColor && selectedColor[0] !== \"#\") {\n setSelectedColor(`#${selectedColor}`);\n }\n }, [selectedColor]);\n\n const handleTextInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n const inputElement = e.target as HTMLInputElement;\n let inputColor = inputElement.value;\n\n if (inputColor[0] !== \"#\") {\n // Prepend a hash (#) to the input value\n inputColor = `#${inputColor}`;\n // inputElement.value = inputColor;\n }\n // Remove any non-alphanumeric characters except the hash (#)\n const sanitizedInput = inputColor.replace(/[^a-fA-F0-9#]/g, \"\");\n\n setSelectedColor(sanitizedInput);\n\n if (props.handleChange) {\n props.handleChange(e); // Pass the original event\n }\n };\n\n return (\n <div className=\"hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2\">\n {props.label && <Label {...labelProps}>{props.label}</Label>}\n {isLoading ? (\n <Skeleton style={{ height: 40, width: 148 }} />\n ) : (\n <div dir=\"ltr\" className=\"hawa-flex hawa-w-full hawa-flex-row\">\n <div\n style={{ height: 40, backgroundColor: selectedColor }}\n className=\"hawa-rounded-bl-lg hawa-rounded-tl-lg hawa-border\"\n >\n <input\n disabled={preview}\n type=\"color\"\n value={selectedColor}\n onChange={(e) => {\n setSelectedColor(e.target.value);\n if (props.handleChange) {\n props.handleChange(e); //TODO: perhaps change this to onChange\n }\n }}\n className={cn(\n \"hawa-mt-0 hawa-h-[38px] hawa-opacity-0\",\n props.colorPickerClassNames,\n )}\n {...colorPickerProps}\n />\n </div>\n <div className=\"hawa-relative hawa-flex hawa-max-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0\">\n <input\n disabled={preview}\n maxLength={7}\n type=\"text\"\n onInput={handleTextInputChange}\n value={selectedColor}\n className={cn(\n \"hawa-block hawa-h-[40px] hawa-w-24 hawa-rounded hawa-rounded-l-none hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all\",\n \"hawa-border hawa-border-l-0 hawa-border-l-transparent placeholder:hawa-text-muted-foreground\",\n // \"hawa-border hawa-border-x-0 hawa-border-x-transparent hawa-border-b-0 hawa-rounded-tr-none\"\n )}\n style={{\n backgroundColor: preview\n ? selectedColor\n : \"hsl(var(--background))\",\n color: preview\n ? calculateLuminance(selectedColor) > 0.5\n ? \"black\"\n : \"white\"\n : \"\",\n }}\n // 0.179\n {...textInputProps}\n />\n </div>\n </div>\n )}\n\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 </div>\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 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 fade?: \"top\" | \"bottom\" | \"left\" | \"right\";\n}\n\nfunction Skeleton({\n className,\n content,\n animation = \"pulse\",\n fade,\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 const fadeStyle = {\n bottom: \"hawa-mask-fade-bottom\",\n top: \"hawa-mask-fade-top\",\n right: \"hawa-mask-fade-right\",\n left: \"hawa-mask-fade-left \",\n };\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 fade && fadeStyle[fade],\n className,\n )}\n {...props}\n >\n {content && content}\n </div>\n );\n}\n\nexport { Skeleton };\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 /** Disables the tooltip. */\n disabled?: boolean;\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 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","React","React"]}
|
1
|
+
{"version":3,"sources":["../../elements/colorPicker/ColorPicker.tsx","../../util/index.ts","../../elements/skeleton/Skeleton.tsx","../../elements/helperText/HelperText.tsx","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx"],"sourcesContent":["import React, {\n useState,\n FC,\n ChangeEvent,\n InputHTMLAttributes,\n useEffect,\n FormEvent,\n} from \"react\";\n\nimport { calculateLuminance, cn, getTextColor } from \"@util/index\";\n\nimport { Skeleton } from \"@elements/skeleton\";\n\nimport { HelperText } from \"../helperText\";\nimport { Label, LabelProps } from \"../label\";\n\ntype ColorPickerTypes = {\n label?: string;\n id?: string;\n isLoading?: boolean;\n labelProps?: LabelProps;\n helperText?: any;\n forceHideHelperText?: boolean;\n /** Boolean to enable/disable editing the input field and using it as a text field */\n preview?: boolean;\n /** The hex code for the color */\n color?: any;\n /** Fires everytime the color changes */\n handleChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n colorPickerClassNames?: string;\n colorTextClassNames?: string;\n colorPickerProps?: InputHTMLAttributes<HTMLInputElement>;\n textInputProps?: InputHTMLAttributes<HTMLInputElement>;\n containerProps?: InputHTMLAttributes<HTMLDivElement>;\n};\n\nexport const ColorPicker: FC<ColorPickerTypes> = ({\n containerProps,\n colorPickerProps,\n textInputProps,\n labelProps,\n forceHideHelperText,\n isLoading,\n preview = false,\n ...props\n}) => {\n const [selectedColor, setSelectedColor] = useState(props.color);\n\n useEffect(() => {\n if (selectedColor && selectedColor[0] !== \"#\") {\n setSelectedColor(`#${selectedColor}`);\n }\n }, [selectedColor]);\n\n const handleTextInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n const inputElement = e.target as HTMLInputElement;\n let inputColor = inputElement.value;\n\n if (inputColor[0] !== \"#\") {\n // Prepend a hash (#) to the input value\n inputColor = `#${inputColor}`;\n // inputElement.value = inputColor;\n }\n // Remove any non-alphanumeric characters except the hash (#)\n const sanitizedInput = inputColor.replace(/[^a-fA-F0-9#]/g, \"\");\n\n setSelectedColor(sanitizedInput);\n\n if (props.handleChange) {\n props.handleChange(e); // Pass the original event\n }\n };\n\n return (\n <div className=\"hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2\">\n {props.label && <Label {...labelProps}>{props.label}</Label>}\n {isLoading ? (\n <Skeleton style={{ height: 40, width: 148 }} />\n ) : (\n <div dir=\"ltr\" className=\"hawa-flex hawa-w-full hawa-flex-row\">\n <div\n style={{ height: 40, backgroundColor: selectedColor }}\n className=\"hawa-rounded-bl-lg hawa-rounded-tl-lg hawa-border\"\n >\n <input\n disabled={preview}\n type=\"color\"\n value={selectedColor}\n onChange={(e) => {\n setSelectedColor(e.target.value);\n if (props.handleChange) {\n props.handleChange(e); //TODO: perhaps change this to onChange\n }\n }}\n className={cn(\n \"hawa-mt-0 hawa-h-[38px] hawa-opacity-0\",\n props.colorPickerClassNames,\n )}\n {...colorPickerProps}\n />\n </div>\n <div className=\"hawa-relative hawa-flex hawa-max-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0\">\n <input\n disabled={preview}\n maxLength={7}\n type=\"text\"\n onInput={handleTextInputChange}\n value={selectedColor}\n className={cn(\n \"hawa-block hawa-h-[40px] hawa-w-24 hawa-rounded hawa-rounded-l-none hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all\",\n \"hawa-border hawa-border-l-0 hawa-border-l-transparent placeholder:hawa-text-muted-foreground\",\n // \"hawa-border hawa-border-x-0 hawa-border-x-transparent hawa-border-b-0 hawa-rounded-tr-none\"\n )}\n style={{\n backgroundColor: preview\n ? selectedColor\n : \"hsl(var(--background))\",\n color: preview\n ? calculateLuminance(selectedColor) > 0.5\n ? \"black\"\n : \"white\"\n : \"\",\n }}\n // 0.179\n {...textInputProps}\n />\n </div>\n </div>\n )}\n\n {!forceHideHelperText && <HelperText helperText={props.helperText} />}\n </div>\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 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 fade?: \"top\" | \"bottom\" | \"left\" | \"right\";\n}\n\nfunction Skeleton({\n className,\n content,\n animation = \"pulse\",\n fade,\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 const fadeStyle = {\n bottom: \"hawa-mask-fade-bottom\",\n top: \"hawa-mask-fade-top\",\n right: \"hawa-mask-fade-right\",\n left: \"hawa-mask-fade-left \",\n };\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 fade && fadeStyle[fade],\n className,\n )}\n {...props}\n >\n {content && content}\n </div>\n );\n}\n\nexport { Skeleton };\n","import React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport const HelperText = ({ helperText }: { helperText?: any }) => (\n <p\n className={cn(\n \"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all\",\n helperText ? \"hawa-h-4 hawa-opacity-100\" : \"hawa-h-0 hawa-opacity-0\",\n )}\n >\n {helperText}\n </p>\n);\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 /** Disables the tooltip. */\n disabled?: boolean;\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 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","React","React","React","React"]}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import { P as PositionType, D as DirectionType, C as CommandInputProps } from '../index-
|
2
|
+
import { P as PositionType, D as DirectionType, C as CommandInputProps } from '../index-B0aJcA6d.mjs';
|
3
3
|
import '@radix-ui/react-dialog';
|
4
4
|
import 'cmdk';
|
5
5
|
|
@@ -21,7 +21,7 @@ type ComboboxTypes<T> = {
|
|
21
21
|
searchPlaceholder?: string;
|
22
22
|
};
|
23
23
|
isLoading?: boolean;
|
24
|
-
helperText?:
|
24
|
+
helperText?: any;
|
25
25
|
popoverClassName?: string;
|
26
26
|
/** This the same value as the one with the key valueKey */
|
27
27
|
defaultValue?: string;
|
package/dist/combobox/index.d.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import { P as PositionType, D as DirectionType, C as CommandInputProps } from '../index-
|
2
|
+
import { P as PositionType, D as DirectionType, C as CommandInputProps } from '../index-B0aJcA6d.js';
|
3
3
|
import '@radix-ui/react-dialog';
|
4
4
|
import 'cmdk';
|
5
5
|
|
@@ -21,7 +21,7 @@ type ComboboxTypes<T> = {
|
|
21
21
|
searchPlaceholder?: string;
|
22
22
|
};
|
23
23
|
isLoading?: boolean;
|
24
|
-
helperText?:
|
24
|
+
helperText?: any;
|
25
25
|
popoverClassName?: string;
|
26
26
|
/** This the same value as the one with the key valueKey */
|
27
27
|
defaultValue?: string;
|