@sikka/hawa 0.26.30 → 0.26.32
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/{Toast-pOd4uGZz.d.ts → Toast-YaClwi7z.d.ts} +9 -1
- package/dist/{Toast-VBd4UvlM.d.mts → Toast-ySvjL_-K.d.mts} +9 -1
- package/dist/accordion/index.mjs +7 -4
- package/dist/accordion/index.mjs.map +1 -1
- package/dist/alert/index.js +4 -4
- package/dist/alert/index.js.map +1 -1
- package/dist/alert/index.mjs +11 -8
- package/dist/alert/index.mjs.map +1 -1
- package/dist/appLayout/index.js +2 -1
- package/dist/appLayout/index.js.map +1 -1
- package/dist/appLayout/index.mjs +9 -5
- package/dist/appLayout/index.mjs.map +1 -1
- package/dist/appMenubar/index.mjs +9 -4
- package/dist/appMenubar/index.mjs.map +1 -1
- package/dist/appTabs/index.mjs +9 -4
- package/dist/appTabs/index.mjs.map +1 -1
- package/dist/appTopbar/index.mjs +9 -4
- package/dist/appTopbar/index.mjs.map +1 -1
- package/dist/avatar/index.js +2 -1
- package/dist/avatar/index.js.map +1 -1
- package/dist/avatar/index.mjs +9 -5
- package/dist/avatar/index.mjs.map +1 -1
- package/dist/backToTop/index.js +6 -3
- package/dist/backToTop/index.js.map +1 -1
- package/dist/backToTop/index.mjs +13 -7
- package/dist/backToTop/index.mjs.map +1 -1
- package/dist/badge/index.js +4 -3
- package/dist/badge/index.js.map +1 -1
- package/dist/badge/index.mjs +13 -7
- package/dist/badge/index.mjs.map +1 -1
- package/dist/button/index.mjs +7 -4
- package/dist/button/index.mjs.map +1 -1
- package/dist/card/index.mjs +9 -4
- package/dist/card/index.mjs.map +1 -1
- package/dist/carousel/index.js +10 -10
- package/dist/carousel/index.js.map +1 -1
- package/dist/carousel/index.mjs +19 -14
- package/dist/carousel/index.mjs.map +1 -1
- package/dist/checkbox/index.mjs +9 -4
- package/dist/checkbox/index.mjs.map +1 -1
- package/dist/chip/index.mjs +9 -4
- package/dist/chip/index.mjs.map +1 -1
- package/dist/chunk-A3ERTYS4.mjs +29 -0
- package/dist/codeBlock/index.mjs +83 -23
- package/dist/codeBlock/index.mjs.map +1 -1
- package/dist/collapsible/index.mjs +0 -2
- package/dist/collapsible/index.mjs.map +1 -1
- package/dist/colorPicker/index.js +2 -1
- package/dist/colorPicker/index.js.map +1 -1
- package/dist/colorPicker/index.mjs +92 -20
- package/dist/colorPicker/index.mjs.map +1 -1
- package/dist/combobox/index.js +4 -3
- package/dist/combobox/index.js.map +1 -1
- package/dist/combobox/index.mjs +445 -27
- package/dist/combobox/index.mjs.map +1 -1
- package/dist/command/index.mjs +429 -11
- package/dist/command/index.mjs.map +1 -1
- package/dist/dataTable/index.js +36 -27
- package/dist/dataTable/index.js.map +1 -1
- package/dist/dataTable/index.mjs +43 -31
- package/dist/dataTable/index.mjs.map +1 -1
- package/dist/destroyableCard/index.js +2 -2
- package/dist/destroyableCard/index.js.map +1 -1
- package/dist/destroyableCard/index.mjs +9 -6
- package/dist/destroyableCard/index.mjs.map +1 -1
- package/dist/dialog/index.mjs +9 -4
- package/dist/dialog/index.mjs.map +1 -1
- package/dist/docsLayout/index.js +2 -2
- package/dist/docsLayout/index.js.map +1 -1
- package/dist/docsLayout/index.mjs +9 -6
- package/dist/docsLayout/index.mjs.map +1 -1
- package/dist/docsSidebar/index.js +2 -2
- package/dist/docsSidebar/index.js.map +1 -1
- package/dist/docsSidebar/index.mjs +11 -6
- package/dist/docsSidebar/index.mjs.map +1 -1
- package/dist/dropdownMenu/index.mjs +9 -4
- package/dist/dropdownMenu/index.mjs.map +1 -1
- package/dist/elements/index.d.mts +4 -2
- package/dist/elements/index.d.ts +4 -2
- package/dist/elements/index.js +7 -134
- package/dist/elements/index.mjs +9 -13
- package/dist/fileDropzone/index.js +12 -11
- package/dist/fileDropzone/index.js.map +1 -1
- package/dist/fileDropzone/index.mjs +21 -17
- package/dist/fileDropzone/index.mjs.map +1 -1
- package/dist/fileUploader/index.js +2 -1
- package/dist/fileUploader/index.js.map +1 -1
- package/dist/fileUploader/index.mjs +2 -1
- package/dist/fileUploader/index.mjs.map +1 -1
- package/dist/glow/index.js +24 -17
- package/dist/glow/index.js.map +1 -1
- package/dist/glow/index.mjs +24 -17
- package/dist/glow/index.mjs.map +1 -1
- package/dist/hooks/index.d.mts +9 -18
- package/dist/hooks/index.d.ts +9 -18
- package/dist/hooks/index.mjs +146 -27
- package/dist/index.d.mts +18 -17
- package/dist/index.d.ts +18 -17
- package/dist/index.js +166 -171
- package/dist/index.mjs +588 -593
- package/dist/input/index.js +3 -2
- package/dist/input/index.js.map +1 -1
- package/dist/input/index.mjs +118 -19
- package/dist/input/index.mjs.map +1 -1
- package/dist/interfaceSettings/index.js +6 -4
- package/dist/interfaceSettings/index.js.map +1 -1
- package/dist/interfaceSettings/index.mjs +130 -28
- package/dist/interfaceSettings/index.mjs.map +1 -1
- package/dist/label/index.mjs +7 -4
- package/dist/label/index.mjs.map +1 -1
- package/dist/loading/index.mjs +9 -4
- package/dist/loading/index.mjs.map +1 -1
- package/dist/navbar/index.js +3 -2
- package/dist/navbar/index.js.map +1 -1
- package/dist/navbar/index.mjs +10 -6
- package/dist/navbar/index.mjs.map +1 -1
- package/dist/navigationMenu/index.mjs +9 -4
- package/dist/navigationMenu/index.mjs.map +1 -1
- package/dist/pagination/index.mjs +9 -4
- package/dist/pagination/index.mjs.map +1 -1
- package/dist/passwordInput/index.js +3 -2
- package/dist/passwordInput/index.js.map +1 -1
- package/dist/passwordInput/index.mjs +12 -6
- package/dist/passwordInput/index.mjs.map +1 -1
- package/dist/phoneInput/index.js +10 -5
- package/dist/phoneInput/index.js.map +1 -1
- package/dist/phoneInput/index.mjs +19 -11
- package/dist/phoneInput/index.mjs.map +1 -1
- package/dist/pinInput/index.js +3 -3
- package/dist/pinInput/index.js.map +1 -1
- package/dist/pinInput/index.mjs +12 -7
- package/dist/pinInput/index.mjs.map +1 -1
- package/dist/popover/index.mjs +9 -4
- package/dist/popover/index.mjs.map +1 -1
- package/dist/progress/index.mjs +9 -4
- package/dist/progress/index.mjs.map +1 -1
- package/dist/progressCircle/index.js +2 -2
- package/dist/progressCircle/index.js.map +1 -1
- package/dist/progressCircle/index.mjs +11 -6
- package/dist/progressCircle/index.mjs.map +1 -1
- package/dist/radio/index.js +6 -4
- package/dist/radio/index.js.map +1 -1
- package/dist/radio/index.mjs +13 -8
- package/dist/radio/index.mjs.map +1 -1
- package/dist/scrollArea/index.mjs +9 -4
- package/dist/scrollArea/index.mjs.map +1 -1
- package/dist/scrollIndicator/index.js +2 -1
- package/dist/scrollIndicator/index.js.map +1 -1
- package/dist/scrollIndicator/index.mjs +2 -1
- package/dist/scrollIndicator/index.mjs.map +1 -1
- package/dist/select/index.js +6 -2
- package/dist/select/index.js.map +1 -1
- package/dist/select/index.mjs +15 -8
- package/dist/select/index.mjs.map +1 -1
- package/dist/separator/index.mjs +9 -4
- package/dist/separator/index.mjs.map +1 -1
- package/dist/sheet/index.mjs +9 -4
- package/dist/sheet/index.mjs.map +1 -1
- package/dist/sidebar/index.mjs +9 -4
- package/dist/sidebar/index.mjs.map +1 -1
- package/dist/signature/index.js +31 -11
- package/dist/signature/index.js.map +1 -1
- package/dist/signature/index.mjs +40 -15
- package/dist/signature/index.mjs.map +1 -1
- package/dist/simpleTable/index.js +18 -14
- package/dist/simpleTable/index.js.map +1 -1
- package/dist/simpleTable/index.mjs +25 -18
- package/dist/simpleTable/index.mjs.map +1 -1
- package/dist/skeleton/index.mjs +9 -4
- package/dist/skeleton/index.mjs.map +1 -1
- package/dist/slider/index.mjs +9 -4
- package/dist/slider/index.mjs.map +1 -1
- package/dist/sortButton/index.mjs +268 -11
- package/dist/sortButton/index.mjs.map +1 -1
- package/dist/splitButton/index.mjs +267 -12
- package/dist/splitButton/index.mjs.map +1 -1
- package/dist/switch/index.js +2 -1
- package/dist/switch/index.js.map +1 -1
- package/dist/switch/index.mjs +11 -5
- package/dist/switch/index.mjs.map +1 -1
- package/dist/table/index.mjs +9 -4
- package/dist/table/index.mjs.map +1 -1
- package/dist/tabs/index.mjs +7 -4
- package/dist/tabs/index.mjs.map +1 -1
- package/dist/textarea/index.js +4 -4
- package/dist/textarea/index.js.map +1 -1
- package/dist/textarea/index.mjs +11 -8
- package/dist/textarea/index.mjs.map +1 -1
- package/dist/toast/index.d.mts +9 -1
- package/dist/toast/index.d.ts +9 -1
- package/dist/toast/index.js +3 -3
- package/dist/toast/index.js.map +1 -1
- package/dist/toast/index.mjs +145 -10
- package/dist/toast/index.mjs.map +1 -1
- package/dist/toaster/index.d.mts +5 -0
- package/dist/toaster/index.d.ts +5 -0
- package/dist/toaster/index.js +17 -142
- package/dist/toaster/index.js.map +1 -1
- package/dist/toaster/index.mjs +142 -135
- package/dist/toaster/index.mjs.map +1 -1
- package/package.json +5 -5
- package/dist/chunk-3ODWQVIA.mjs +0 -12
- package/dist/chunk-3ODWQVIA.mjs.map +0 -1
- package/dist/chunk-53OZVR57.mjs +0 -108
- package/dist/chunk-53OZVR57.mjs.map +0 -1
- package/dist/chunk-CBRGWUZG.mjs +0 -11
- package/dist/chunk-CBRGWUZG.mjs.map +0 -1
- package/dist/chunk-HYXZRCZW.mjs +0 -265
- package/dist/chunk-HYXZRCZW.mjs.map +0 -1
- package/dist/chunk-JNUGOUYJ.mjs +0 -154
- package/dist/chunk-JX5YLRCU.mjs +0 -443
- package/dist/chunk-JX5YLRCU.mjs.map +0 -1
- package/dist/chunk-NV3KR5Y7.mjs +0 -82
- package/dist/chunk-NV3KR5Y7.mjs.map +0 -1
- package/dist/chunk-OQ7MNEYW.mjs +0 -151
- package/dist/chunk-OQ7MNEYW.mjs.map +0 -1
package/dist/label/index.mjs.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\nimport { Tooltip } from \"../tooltip\";\n\nexport type LabelProps = {\n hint?: React.ReactNode;\n hintSide?: PositionType;\n htmlFor?: string;\n required?: boolean;\n};\n\nconst Label = React.forwardRef<\n HTMLLabelElement,\n React.LabelHTMLAttributes<HTMLLabelElement> & LabelProps\n>(({ className, hint, hintSide, required, children, ...props }, ref) => (\n <div className=\"hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all\">\n <label\n ref={ref}\n className={cn(\n \"hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70\",\n className\n )}\n {...props}\n >\n {children}\n {required && <span className=\"hawa-mx-0.5 hawa-text-red-500\">*</span>}\n </label>\n {hint && (\n <Tooltip\n content={hint}\n side={hintSide}\n triggerProps={{\n tabIndex: -1,\n onClick: (event) => event.preventDefault()\n }}\n >\n <div>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"hawa-h-[14px] hawa-w-[14px] hawa-cursor-help\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\" />\n <path d=\"M12 17h.01\" />\n </svg>\n </div>\n </Tooltip>\n )}\n </div>\n));\n\nLabel.displayName = \"Label\";\n\nexport { Label };\n","import React from \"react\";\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n \"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2\",\n className\n )}\n {...props}\n />\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nconst TooltipArrow = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Arrow>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n <TooltipPrimitive.Arrow ref={ref} className={cn(className)} {...props} />\n));\nTooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;\n\ntype TooltipTypes = {\n /** Controls the open state of the tooltip. */\n open?: any;\n /** Specifies the side where the tooltip will appear. */\n side?: PositionType;\n /** Content to be displayed within the tooltip. */\n content?: any;\n /** Elements to which the tooltip is anchored. */\n children?: any;\n /** Sets the default open state of the tooltip. */\n defaultOpen?: any;\n /** Event handler for open state changes. */\n onOpenChange?: any;\n /** Duration of the delay before the tooltip appears. */\n delayDuration?: any;\n triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n contentProps?: TooltipPrimitive.TooltipContentProps;\n providerProps?: TooltipPrimitive.TooltipProviderProps;\n};\n\nconst Tooltip: React.FunctionComponent<TooltipTypes> = ({\n side,\n open,\n content,\n children,\n defaultOpen,\n onOpenChange,\n triggerProps,\n contentProps,\n providerProps,\n delayDuration = 300,\n ...props\n}) => {\n return (\n <TooltipPrimitive.TooltipProvider\n delayDuration={delayDuration}\n {...providerProps}\n >\n <TooltipPrimitive.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n {...props}\n >\n <TooltipPrimitive.Trigger {...triggerProps}>\n {children}\n </TooltipPrimitive.Trigger>\n <TooltipContent side={side} align=\"center\" {...contentProps}>\n {content}\n </TooltipContent>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.TooltipProvider>\n );\n};\n\nexport { Tooltip };\n"],"mappings":";;;;;AAAA,YAAYA,YAAW;;;ACAvB,OAAO,WAAW;AAElB,YAAY,sBAAsB;AAMlC,IAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,aAAa,GAAG,GAAG,MAAM,GAAG,QAC1C;AAAA,EAAkB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,eAAe,cAA+B,yBAAQ;AAEtD,IAAM,eAAe,MAAM,WAGzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,oCAAkB,wBAAjB,EAAuB,KAAU,WAAW,GAAG,SAAS,GAAI,GAAG,OAAO,CACxE;AACD,aAAa,cAA+B,uBAAM;AAsBlD,IAAM,UAAiD,CAAC;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAAkB;AAAA,IAAjB;AAAA,MACC;AAAA,MACC,GAAG;AAAA;AAAA,IAEJ;AAAA,MAAkB;AAAA,MAAjB;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA;AAAA,MAEJ,oCAAkB,0BAAjB,EAA0B,GAAG,gBAC3B,QACH;AAAA,MACA,oCAAC,kBAAe,MAAY,OAAM,UAAU,GAAG,gBAC5C,OACH;AAAA,IACF;AAAA,EACF;AAEJ;;;ADvEA,IAAM,QAAc,kBAGlB,CAAC,EAAE,WAAW,MAAM,UAAU,UAAU,UAAU,GAAG,MAAM,GAAG,QAC9D,qCAAC,SAAI,WAAU,8EACb;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AAAA,EAEH;AAAA,EACA,YAAY,qCAAC,UAAK,WAAU,mCAAgC,GAAC;AAChE,GACC,QACC;AAAA,EAAC;AAAA;AAAA,IACC,SAAS;AAAA,IACT,MAAM;AAAA,IACN,cAAc;AAAA,MACZ,UAAU;AAAA,MACV,SAAS,CAAC,UAAU,MAAM,eAAe;AAAA,IAC3C;AAAA;AAAA,EAEA,qCAAC,aACC;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA;AAAA,IAEf,qCAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK;AAAA,IAC/B,qCAAC,UAAK,GAAE,wCAAuC;AAAA,IAC/C,qCAAC,UAAK,GAAE,cAAa;AAAA,EACvB,CACF;AACF,CAEJ,CACD;AAED,MAAM,cAAc;","names":["React"]}
|
1
|
+
{"version":3,"sources":["../../elements/label/Label.tsx","../../util/index.ts","../../elements/tooltip/Tooltip.tsx"],"sourcesContent":["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 { 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 * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n \"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2\",\n className\n )}\n {...props}\n />\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nconst TooltipArrow = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Arrow>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n <TooltipPrimitive.Arrow ref={ref} className={cn(className)} {...props} />\n));\nTooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;\n\ntype TooltipTypes = {\n /** Controls the open state of the tooltip. */\n open?: any;\n /** Specifies the side where the tooltip will appear. */\n side?: PositionType;\n /** Content to be displayed within the tooltip. */\n content?: any;\n /** Elements to which the tooltip is anchored. */\n children?: any;\n /** Sets the default open state of the tooltip. */\n defaultOpen?: any;\n /** Event handler for open state changes. */\n onOpenChange?: any;\n /** Duration of the delay before the tooltip appears. */\n delayDuration?: any;\n triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n contentProps?: TooltipPrimitive.TooltipContentProps;\n providerProps?: TooltipPrimitive.TooltipProviderProps;\n};\n\nconst Tooltip: React.FunctionComponent<TooltipTypes> = ({\n side,\n open,\n content,\n children,\n defaultOpen,\n onOpenChange,\n triggerProps,\n contentProps,\n providerProps,\n delayDuration = 300,\n ...props\n}) => {\n return (\n <TooltipPrimitive.TooltipProvider\n delayDuration={delayDuration}\n {...providerProps}\n >\n <TooltipPrimitive.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n {...props}\n >\n <TooltipPrimitive.Trigger {...triggerProps}>\n {children}\n </TooltipPrimitive.Trigger>\n <TooltipContent side={side} align=\"center\" {...contentProps}>\n {content}\n </TooltipContent>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.TooltipProvider>\n );\n};\n\nexport { Tooltip };\n"],"mappings":";AAAA,YAAYA,YAAW;;;ACAvB,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACLA,OAAO,WAAW;AAElB,YAAY,sBAAsB;AAMlC,IAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,aAAa,GAAG,GAAG,MAAM,GAAG,QAC1C;AAAA,EAAkB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,eAAe,cAA+B,yBAAQ;AAEtD,IAAM,eAAe,MAAM,WAGzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,oCAAkB,wBAAjB,EAAuB,KAAU,WAAW,GAAG,SAAS,GAAI,GAAG,OAAO,CACxE;AACD,aAAa,cAA+B,uBAAM;AAsBlD,IAAM,UAAiD,CAAC;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAAkB;AAAA,IAAjB;AAAA,MACC;AAAA,MACC,GAAG;AAAA;AAAA,IAEJ;AAAA,MAAkB;AAAA,MAAjB;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA;AAAA,MAEJ,oCAAkB,0BAAjB,EAA0B,GAAG,gBAC3B,QACH;AAAA,MACA,oCAAC,kBAAe,MAAY,OAAM,UAAU,GAAG,gBAC5C,OACH;AAAA,IACF;AAAA,EACF;AAEJ;;;AFvEA,IAAM,QAAc,kBAGlB,CAAC,EAAE,WAAW,MAAM,UAAU,UAAU,UAAU,GAAG,MAAM,GAAG,QAC9D,qCAAC,SAAI,WAAU,8EACb;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AAAA,EAEH;AAAA,EACA,YAAY,qCAAC,UAAK,WAAU,mCAAgC,GAAC;AAChE,GACC,QACC;AAAA,EAAC;AAAA;AAAA,IACC,SAAS;AAAA,IACT,MAAM;AAAA,IACN,cAAc;AAAA,MACZ,UAAU;AAAA,MACV,SAAS,CAAC,UAAU,MAAM,eAAe;AAAA,IAC3C;AAAA;AAAA,EAEA,qCAAC,aACC;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA;AAAA,IAEf,qCAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK;AAAA,IAC/B,qCAAC,UAAK,GAAE,wCAAuC;AAAA,IAC/C,qCAAC,UAAK,GAAE,cAAa;AAAA,EACvB,CACF;AACF,CAEJ,CACD;AAED,MAAM,cAAc;","names":["React"]}
|
package/dist/loading/index.mjs
CHANGED
@@ -1,9 +1,14 @@
|
|
1
|
-
import {
|
2
|
-
cn
|
3
|
-
} from "../chunk-CBRGWUZG.mjs";
|
4
|
-
|
5
1
|
// elements/loading/Loading.tsx
|
6
2
|
import React from "react";
|
3
|
+
|
4
|
+
// util/index.ts
|
5
|
+
import { clsx } from "clsx";
|
6
|
+
import { twMerge } from "tailwind-merge";
|
7
|
+
function cn(...inputs) {
|
8
|
+
return twMerge(clsx(inputs));
|
9
|
+
}
|
10
|
+
|
11
|
+
// elements/loading/Loading.tsx
|
7
12
|
var Loading = ({
|
8
13
|
design = "spinner",
|
9
14
|
size = "sm",
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/loading/Loading.tsx"],"sourcesContent":["import React, { FC } from \"react\";\n\nimport { cn } from \"@util/index\";\n\ntype LoadingTypes = {\n /** Specifies the size of the loading component.*/\n size?: \"button\" | \"xs\" | \"sm\" | \"normal\" | \"lg\" | \"xl\";\n /** Determines the design of the loading animation.*/\n design?:\n | \"spinner\"\n | \"dots-bounce\"\n | \"dots-pulse\"\n | \"pulse\"\n | \"spinner-dots\"\n | \"squircle\"\n | \"square\"\n | \"progress\"\n | \"orbit\";\n /** Specifies the color of the loading component. By default it will inherit the value of <span className=\"inline-code\">--primary</span> global CSS variable*/\n color?: string;\n className?: string;\n themeMode?: \"dark\" | \"light\";\n};\n\nexport const Loading: FC<LoadingTypes> = ({\n design = \"spinner\",\n size = \"sm\",\n themeMode = \"light\",\n color,\n ...props\n}) => {\n let sizeStyles = {\n button: \"hawa-h-4 hawa-w-4\",\n xs: \"hawa-h-1 hawa-w-1\",\n sm: \"hawa-h-6 hawa-w-6\",\n normal: \"hawa-h-8 hawa-w-8\",\n lg: \"hawa-h-14 hawa-w-14\",\n xl: \"hawa-h-24 hawa-w-24\"\n };\n\n let animationStyles: any = {\n pulse: \"hawa-animate-in hawa-fade-in hawa-duration-1000\",\n bounce: \"hawa-animate-bounce\"\n };\n switch (design.split(\"-\")[0]) {\n case \"dots\":\n return (\n <div\n className={cn(\"hawa-flex hawa-flex-row hawa-gap-2\", props.className)}\n >\n <div\n className={cn(\n \"hawa-animate-bounce hawa-rounded-full hawa-delay-100 hawa-repeat-infinite\",\n size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n animationStyles[design.split(\"-\")[1]],\n color ? color : \"hawa-bg-primary\"\n )}\n ></div>\n <div\n className={cn(\n \"hawa-animate-bounce hawa-rounded-full hawa-delay-200 hawa-repeat-infinite\",\n size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n animationStyles[design.split(\"-\")[1]],\n color ? color : \"hawa-bg-primary\"\n )}\n ></div>\n <div\n className={cn(\n \"hawa-animate-bounce hawa-rounded-full hawa-delay-300 hawa-repeat-infinite\",\n size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n animationStyles[design.split(\"-\")[1]],\n color ? color : \"hawa-bg-primary\"\n )}\n ></div>\n </div>\n );\n case \"square\":\n return (\n <svg\n className={cn(\"squircle-container\", sizeStyles[size])}\n viewBox=\"0 0 35 35\"\n height=\"35\"\n width=\"35\"\n >\n <rect\n className=\"squircle-track\"\n x=\"2.5\"\n y=\"2.5\"\n fill=\"none\"\n strokeWidth=\"5px\"\n width=\"32.5\"\n height=\"32.5\"\n />\n <rect\n className=\"square-car\"\n x=\"2.5\"\n y=\"2.5\"\n fill=\"none\"\n strokeWidth=\"5px\"\n width=\"32.5\"\n height=\"32.5\"\n pathLength=\"100\"\n />\n </svg>\n );\n case \"squircle\":\n return (\n <svg\n className={cn(\"squircle-container\", sizeStyles[size])}\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 37 37\"\n height=\"37\"\n width=\"37\"\n preserveAspectRatio=\"xMidYMid meet\"\n >\n <path\n className=\"squircle-track\"\n fill=\"none\"\n strokeWidth=\"5\"\n pathLength=\"100\"\n d=\"M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5\"\n ></path>\n <path\n className=\"squircle-car\"\n fill=\"none\"\n strokeWidth=\"5\"\n pathLength=\"100\"\n d=\"M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5\"\n ></path>\n </svg>\n );\n case \"progress\":\n return <div className=\"progress-loading\"></div>;\n case \"orbit\":\n return <div className=\"orbit-container\"></div>;\n\n default:\n return (\n <svg\n className={cn(\"circle-container\", sizeStyles[size])}\n viewBox=\"0 0 40 40\"\n height=\"40\"\n width=\"40\"\n >\n <circle\n className={cn(\"circle-track\", {\n \"hawa-stroke-primary-foreground\": themeMode === \"dark\",\n \"hawa-stroke-primary\": themeMode === \"light\"\n })}\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathLength=\"100\"\n strokeWidth=\"5px\"\n fill=\"none\"\n />\n <circle\n className={cn(\"circle-car\", {\n \"hawa-stroke-primary-foreground\": themeMode === \"dark\",\n \"hawa-stroke-primary\": themeMode === \"light\"\n })}\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathLength=\"100\"\n strokeWidth=\"5px\"\n fill=\"none\"\n />\n </svg>\n );\n // return (\n // <div\n // className={cn(\n // \"hawa-flex hawa-flex-row hawa-gap-x-3\",\n // props.className\n // )}\n // >\n // <div aria-label=\"Loading...\" role=\"status\">\n // <svg\n // className={cn(sizeStyles[size], \"hawa-animate-spin\")}\n // viewBox=\"3 3 18 18\"\n // >\n // <path\n // className=\"hawa-fill-primary/20\"\n // d=\"M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z\"\n // ></path>\n // <path\n // className={color ? color : \"hawa-fill-primary\"}\n // d=\"M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z\"\n // ></path>\n // </svg>\n // </div>\n // </div>\n // );\n }\n};\n"],"mappings":"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","names":[]}
|
1
|
+
{"version":3,"sources":["../../elements/loading/Loading.tsx","../../util/index.ts"],"sourcesContent":["import React, { FC } from \"react\";\n\nimport { cn } from \"@util/index\";\n\ntype LoadingTypes = {\n /** Specifies the size of the loading component.*/\n size?: \"button\" | \"xs\" | \"sm\" | \"normal\" | \"lg\" | \"xl\";\n /** Determines the design of the loading animation.*/\n design?:\n | \"spinner\"\n | \"dots-bounce\"\n | \"dots-pulse\"\n | \"pulse\"\n | \"spinner-dots\"\n | \"squircle\"\n | \"square\"\n | \"progress\"\n | \"orbit\";\n /** Specifies the color of the loading component. By default it will inherit the value of <span className=\"inline-code\">--primary</span> global CSS variable*/\n color?: string;\n className?: string;\n themeMode?: \"dark\" | \"light\";\n};\n\nexport const Loading: FC<LoadingTypes> = ({\n design = \"spinner\",\n size = \"sm\",\n themeMode = \"light\",\n color,\n ...props\n}) => {\n let sizeStyles = {\n button: \"hawa-h-4 hawa-w-4\",\n xs: \"hawa-h-1 hawa-w-1\",\n sm: \"hawa-h-6 hawa-w-6\",\n normal: \"hawa-h-8 hawa-w-8\",\n lg: \"hawa-h-14 hawa-w-14\",\n xl: \"hawa-h-24 hawa-w-24\"\n };\n\n let animationStyles: any = {\n pulse: \"hawa-animate-in hawa-fade-in hawa-duration-1000\",\n bounce: \"hawa-animate-bounce\"\n };\n switch (design.split(\"-\")[0]) {\n case \"dots\":\n return (\n <div\n className={cn(\"hawa-flex hawa-flex-row hawa-gap-2\", props.className)}\n >\n <div\n className={cn(\n \"hawa-animate-bounce hawa-rounded-full hawa-delay-100 hawa-repeat-infinite\",\n size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n animationStyles[design.split(\"-\")[1]],\n color ? color : \"hawa-bg-primary\"\n )}\n ></div>\n <div\n className={cn(\n \"hawa-animate-bounce hawa-rounded-full hawa-delay-200 hawa-repeat-infinite\",\n size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n animationStyles[design.split(\"-\")[1]],\n color ? color : \"hawa-bg-primary\"\n )}\n ></div>\n <div\n className={cn(\n \"hawa-animate-bounce hawa-rounded-full hawa-delay-300 hawa-repeat-infinite\",\n size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n animationStyles[design.split(\"-\")[1]],\n color ? color : \"hawa-bg-primary\"\n )}\n ></div>\n </div>\n );\n case \"square\":\n return (\n <svg\n className={cn(\"squircle-container\", sizeStyles[size])}\n viewBox=\"0 0 35 35\"\n height=\"35\"\n width=\"35\"\n >\n <rect\n className=\"squircle-track\"\n x=\"2.5\"\n y=\"2.5\"\n fill=\"none\"\n strokeWidth=\"5px\"\n width=\"32.5\"\n height=\"32.5\"\n />\n <rect\n className=\"square-car\"\n x=\"2.5\"\n y=\"2.5\"\n fill=\"none\"\n strokeWidth=\"5px\"\n width=\"32.5\"\n height=\"32.5\"\n pathLength=\"100\"\n />\n </svg>\n );\n case \"squircle\":\n return (\n <svg\n className={cn(\"squircle-container\", sizeStyles[size])}\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 37 37\"\n height=\"37\"\n width=\"37\"\n preserveAspectRatio=\"xMidYMid meet\"\n >\n <path\n className=\"squircle-track\"\n fill=\"none\"\n strokeWidth=\"5\"\n pathLength=\"100\"\n d=\"M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5\"\n ></path>\n <path\n className=\"squircle-car\"\n fill=\"none\"\n strokeWidth=\"5\"\n pathLength=\"100\"\n d=\"M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5\"\n ></path>\n </svg>\n );\n case \"progress\":\n return <div className=\"progress-loading\"></div>;\n case \"orbit\":\n return <div className=\"orbit-container\"></div>;\n\n default:\n return (\n <svg\n className={cn(\"circle-container\", sizeStyles[size])}\n viewBox=\"0 0 40 40\"\n height=\"40\"\n width=\"40\"\n >\n <circle\n className={cn(\"circle-track\", {\n \"hawa-stroke-primary-foreground\": themeMode === \"dark\",\n \"hawa-stroke-primary\": themeMode === \"light\"\n })}\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathLength=\"100\"\n strokeWidth=\"5px\"\n fill=\"none\"\n />\n <circle\n className={cn(\"circle-car\", {\n \"hawa-stroke-primary-foreground\": themeMode === \"dark\",\n \"hawa-stroke-primary\": themeMode === \"light\"\n })}\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathLength=\"100\"\n strokeWidth=\"5px\"\n fill=\"none\"\n />\n </svg>\n );\n // return (\n // <div\n // className={cn(\n // \"hawa-flex hawa-flex-row hawa-gap-x-3\",\n // props.className\n // )}\n // >\n // <div aria-label=\"Loading...\" role=\"status\">\n // <svg\n // className={cn(sizeStyles[size], \"hawa-animate-spin\")}\n // viewBox=\"3 3 18 18\"\n // >\n // <path\n // className=\"hawa-fill-primary/20\"\n // d=\"M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z\"\n // ></path>\n // <path\n // className={color ? color : \"hawa-fill-primary\"}\n // d=\"M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z\"\n // ></path>\n // </svg>\n // </div>\n // </div>\n // );\n }\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":"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","names":[]}
|
package/dist/navbar/index.js
CHANGED
@@ -57,6 +57,7 @@ var Navbar = ({
|
|
57
57
|
handleLogoClick,
|
58
58
|
...props
|
59
59
|
}) => {
|
60
|
+
var _a, _b;
|
60
61
|
const [isOpen, setIsOpen] = (0, import_react.useState)(false);
|
61
62
|
return /* @__PURE__ */ import_react.default.createElement("nav", { className: " hawa-sticky hawa-top-2 hawa-transition-all" }, /* @__PURE__ */ import_react.default.createElement(
|
62
63
|
Collapsible,
|
@@ -75,7 +76,7 @@ var Navbar = ({
|
|
75
76
|
}
|
76
77
|
},
|
77
78
|
logo
|
78
|
-
)), /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-hidden md:hawa-flex " }, props.menuItems
|
79
|
+
)), /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-hidden md:hawa-flex " }, (_a = props.menuItems) == null ? void 0 : _a.map((item, i) => /* @__PURE__ */ import_react.default.createElement(
|
79
80
|
"div",
|
80
81
|
{
|
81
82
|
key: i,
|
@@ -147,7 +148,7 @@ var Navbar = ({
|
|
147
148
|
zIndex: -100
|
148
149
|
}
|
149
150
|
},
|
150
|
-
props.menuItems
|
151
|
+
(_b = props.menuItems) == null ? void 0 : _b.map((item, i) => /* @__PURE__ */ import_react.default.createElement(
|
151
152
|
"div",
|
152
153
|
{
|
153
154
|
key: i,
|
package/dist/navbar/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../layout/navbar/index.ts","../../layout/navbar/Navbar.tsx","../../elements/collapsible/Collapsible.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./Navbar\";\n","import React, { useState } from \"react\";\n\nimport {\n CollapsibleTrigger,\n CollapsibleContent,\n Collapsible\n} from \"@elements/collapsible\";\n\nimport { cn } from \"@util/index\";\n\ntype NavigationMenuItem = {\n label: string;\n action: () => void;\n trigger?: any;\n};\n\ntype NavbarType = {\n logo?: any;\n buttons?: any;\n menuItems?: NavigationMenuItem[];\n handleLogoClick?: () => void;\n backgroundColor?: string;\n};\n\nexport const Navbar: React.FC<NavbarType> = ({\n backgroundColor,\n logo,\n handleLogoClick,\n ...props\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n <nav className=\" hawa-sticky hawa-top-2 hawa-transition-all\">\n <Collapsible\n className={\"hawa-relative hawa-m-2 hawa-rounded hawa-p-2\"}\n style={{ backgroundColor: backgroundColor || \"#1f2937\" }}\n >\n <div className=\"hawa-flex hawa-items-center hawa-justify-between hawa-px-3 \">\n <div className=\"hawa-flex hawa-items-center\">\n <div\n className=\"hawa-p-1.5 hawa-text-xl hawa-font-bold hawa-text-white\"\n onClick={() => {\n if (handleLogoClick) {\n handleLogoClick();\n }\n }}\n >\n {logo}\n </div>\n </div>\n\n <div className=\"hawa-hidden md:hawa-flex \">\n {props.menuItems?.map((item, i) => (\n <div\n key={i}\n onClick={item.action}\n className=\"hawa-cursor-pointer hawa-rounded hawa-p-1.5 hawa-px-2 hawa-text-center hawa-text-sm hawa-text-white hawa-transition-all hover:hawa-bg-gray-300 hover:hawa-text-black\"\n >\n {item.label}\n </div>\n ))}\n </div>\n <div className=\"hawa-m-0 hawa-flex hawa-h-fit hawa-p-0 md:hawa-hidden\">\n <CollapsibleTrigger\n onClick={() => setIsOpen(!isOpen)}\n className=\"hawa-h-full hawa-text-white selection:hawa-p-0 \"\n aria-label=\"Toggle menu\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={cn(\n \"hawa-fixed hawa-h-6 hawa-w-6\",\n isOpen ? \"hawa-invisible\" : \"hawa-visible\"\n )}\n >\n <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" />\n <line x1=\"4\" x2=\"20\" y1=\"6\" y2=\"6\" />\n <line x1=\"4\" x2=\"20\" y1=\"18\" y2=\"18\" />\n </svg>\n\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={cn(\n \"hawa-h-6 hawa-w-6\",\n !isOpen ? \"hawa-invisible\" : \"hawa-visible\"\n )}\n >\n <path d=\"M18 6 6 18\" />\n <path d=\"m6 6 12 12\" />\n </svg>\n </CollapsibleTrigger>\n </div>\n </div>\n\n <CollapsibleContent\n className={cn(\n \"data-[state=closed]:hawa-opacity-0\",\n \"data-[state=open]:hawa-animate-in\",\n \"data-[state=open]:hawa-fade-in-90\",\n \"hawa-absolute hawa-left-0 hawa-top-[60px] hawa-flex hawa-flex-col hawa-rounded hawa-border hawa-bg-gray-200 hawa-p-1 hawa-transition-all\"\n // \"hawa-transition-all hawa-bg-gray-400 hawa-fixed hawa-left-0 hawa-top-[72px] hawa-w-full hawa-flex hawa-flex-col\"\n )}\n style={{\n width: \"calc(100%)\",\n zIndex: -100\n }}\n >\n {props.menuItems?.map((item, i) => (\n <div\n key={i}\n onClick={item.action}\n className=\"hawa-cursor-pointer hawa-rounded hawa-p-2 hawa-px-10 hawa-text-center hawa-text-black hawa-transition-all hover:hawa-bg-gray-300\"\n >\n {item.label}\n </div>\n ))}\n </CollapsibleContent>\n </Collapsible>\n </nav>\n );\n};\n","import * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\";\n\nconst Collapsible = CollapsiblePrimitive.Root;\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\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"],"mappings":"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","names":["CollapsibleTrigger","CollapsibleContent","React","CollapsibleTrigger","CollapsibleContent"]}
|
1
|
+
{"version":3,"sources":["../../layout/navbar/index.ts","../../layout/navbar/Navbar.tsx","../../elements/collapsible/Collapsible.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./Navbar\";\n","import React, { useState } from \"react\";\n\nimport {\n CollapsibleTrigger,\n CollapsibleContent,\n Collapsible\n} from \"@elements/collapsible\";\n\nimport { cn } from \"@util/index\";\n\ntype NavigationMenuItem = {\n label: string;\n action: () => void;\n trigger?: any;\n};\n\ntype NavbarType = {\n logo?: any;\n buttons?: any;\n menuItems?: NavigationMenuItem[];\n handleLogoClick?: () => void;\n backgroundColor?: string;\n};\n\nexport const Navbar: React.FC<NavbarType> = ({\n backgroundColor,\n logo,\n handleLogoClick,\n ...props\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n <nav className=\" hawa-sticky hawa-top-2 hawa-transition-all\">\n <Collapsible\n className={\"hawa-relative hawa-m-2 hawa-rounded hawa-p-2\"}\n style={{ backgroundColor: backgroundColor || \"#1f2937\" }}\n >\n <div className=\"hawa-flex hawa-items-center hawa-justify-between hawa-px-3 \">\n <div className=\"hawa-flex hawa-items-center\">\n <div\n className=\"hawa-p-1.5 hawa-text-xl hawa-font-bold hawa-text-white\"\n onClick={() => {\n if (handleLogoClick) {\n handleLogoClick();\n }\n }}\n >\n {logo}\n </div>\n </div>\n\n <div className=\"hawa-hidden md:hawa-flex \">\n {props.menuItems?.map((item, i) => (\n <div\n key={i}\n onClick={item.action}\n className=\"hawa-cursor-pointer hawa-rounded hawa-p-1.5 hawa-px-2 hawa-text-center hawa-text-sm hawa-text-white hawa-transition-all hover:hawa-bg-gray-300 hover:hawa-text-black\"\n >\n {item.label}\n </div>\n ))}\n </div>\n <div className=\"hawa-m-0 hawa-flex hawa-h-fit hawa-p-0 md:hawa-hidden\">\n <CollapsibleTrigger\n onClick={() => setIsOpen(!isOpen)}\n className=\"hawa-h-full hawa-text-white selection:hawa-p-0 \"\n aria-label=\"Toggle menu\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={cn(\n \"hawa-fixed hawa-h-6 hawa-w-6\",\n isOpen ? \"hawa-invisible\" : \"hawa-visible\"\n )}\n >\n <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" />\n <line x1=\"4\" x2=\"20\" y1=\"6\" y2=\"6\" />\n <line x1=\"4\" x2=\"20\" y1=\"18\" y2=\"18\" />\n </svg>\n\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={cn(\n \"hawa-h-6 hawa-w-6\",\n !isOpen ? \"hawa-invisible\" : \"hawa-visible\"\n )}\n >\n <path d=\"M18 6 6 18\" />\n <path d=\"m6 6 12 12\" />\n </svg>\n </CollapsibleTrigger>\n </div>\n </div>\n\n <CollapsibleContent\n className={cn(\n \"data-[state=closed]:hawa-opacity-0\",\n \"data-[state=open]:hawa-animate-in\",\n \"data-[state=open]:hawa-fade-in-90\",\n \"hawa-absolute hawa-left-0 hawa-top-[60px] hawa-flex hawa-flex-col hawa-rounded hawa-border hawa-bg-gray-200 hawa-p-1 hawa-transition-all\"\n // \"hawa-transition-all hawa-bg-gray-400 hawa-fixed hawa-left-0 hawa-top-[72px] hawa-w-full hawa-flex hawa-flex-col\"\n )}\n style={{\n width: \"calc(100%)\",\n zIndex: -100\n }}\n >\n {props.menuItems?.map((item, i) => (\n <div\n key={i}\n onClick={item.action}\n className=\"hawa-cursor-pointer hawa-rounded hawa-p-2 hawa-px-10 hawa-text-center hawa-text-black hawa-transition-all hover:hawa-bg-gray-300\"\n >\n {item.label}\n </div>\n ))}\n </CollapsibleContent>\n </Collapsible>\n </nav>\n );\n};\n","import * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\";\n\nconst Collapsible = CollapsiblePrimitive.Root;\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\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"],"mappings":"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","names":["CollapsibleTrigger","CollapsibleContent","React","CollapsibleTrigger","CollapsibleContent"]}
|
package/dist/navbar/index.mjs
CHANGED
@@ -1,7 +1,3 @@
|
|
1
|
-
import {
|
2
|
-
cn
|
3
|
-
} from "../chunk-CBRGWUZG.mjs";
|
4
|
-
|
5
1
|
// layout/navbar/Navbar.tsx
|
6
2
|
import React, { useState } from "react";
|
7
3
|
|
@@ -11,6 +7,13 @@ var Collapsible = CollapsiblePrimitive.Root;
|
|
11
7
|
var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
|
12
8
|
var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
|
13
9
|
|
10
|
+
// util/index.ts
|
11
|
+
import { clsx } from "clsx";
|
12
|
+
import { twMerge } from "tailwind-merge";
|
13
|
+
function cn(...inputs) {
|
14
|
+
return twMerge(clsx(inputs));
|
15
|
+
}
|
16
|
+
|
14
17
|
// layout/navbar/Navbar.tsx
|
15
18
|
var Navbar = ({
|
16
19
|
backgroundColor,
|
@@ -18,6 +21,7 @@ var Navbar = ({
|
|
18
21
|
handleLogoClick,
|
19
22
|
...props
|
20
23
|
}) => {
|
24
|
+
var _a, _b;
|
21
25
|
const [isOpen, setIsOpen] = useState(false);
|
22
26
|
return /* @__PURE__ */ React.createElement("nav", { className: " hawa-sticky hawa-top-2 hawa-transition-all" }, /* @__PURE__ */ React.createElement(
|
23
27
|
Collapsible,
|
@@ -36,7 +40,7 @@ var Navbar = ({
|
|
36
40
|
}
|
37
41
|
},
|
38
42
|
logo
|
39
|
-
)), /* @__PURE__ */ React.createElement("div", { className: "hawa-hidden md:hawa-flex " }, props.menuItems
|
43
|
+
)), /* @__PURE__ */ React.createElement("div", { className: "hawa-hidden md:hawa-flex " }, (_a = props.menuItems) == null ? void 0 : _a.map((item, i) => /* @__PURE__ */ React.createElement(
|
40
44
|
"div",
|
41
45
|
{
|
42
46
|
key: i,
|
@@ -108,7 +112,7 @@ var Navbar = ({
|
|
108
112
|
zIndex: -100
|
109
113
|
}
|
110
114
|
},
|
111
|
-
props.menuItems
|
115
|
+
(_b = props.menuItems) == null ? void 0 : _b.map((item, i) => /* @__PURE__ */ React.createElement(
|
112
116
|
"div",
|
113
117
|
{
|
114
118
|
key: i,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../layout/navbar/Navbar.tsx","../../elements/collapsible/Collapsible.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport {\n CollapsibleTrigger,\n CollapsibleContent,\n Collapsible\n} from \"@elements/collapsible\";\n\nimport { cn } from \"@util/index\";\n\ntype NavigationMenuItem = {\n label: string;\n action: () => void;\n trigger?: any;\n};\n\ntype NavbarType = {\n logo?: any;\n buttons?: any;\n menuItems?: NavigationMenuItem[];\n handleLogoClick?: () => void;\n backgroundColor?: string;\n};\n\nexport const Navbar: React.FC<NavbarType> = ({\n backgroundColor,\n logo,\n handleLogoClick,\n ...props\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n <nav className=\" hawa-sticky hawa-top-2 hawa-transition-all\">\n <Collapsible\n className={\"hawa-relative hawa-m-2 hawa-rounded hawa-p-2\"}\n style={{ backgroundColor: backgroundColor || \"#1f2937\" }}\n >\n <div className=\"hawa-flex hawa-items-center hawa-justify-between hawa-px-3 \">\n <div className=\"hawa-flex hawa-items-center\">\n <div\n className=\"hawa-p-1.5 hawa-text-xl hawa-font-bold hawa-text-white\"\n onClick={() => {\n if (handleLogoClick) {\n handleLogoClick();\n }\n }}\n >\n {logo}\n </div>\n </div>\n\n <div className=\"hawa-hidden md:hawa-flex \">\n {props.menuItems?.map((item, i) => (\n <div\n key={i}\n onClick={item.action}\n className=\"hawa-cursor-pointer hawa-rounded hawa-p-1.5 hawa-px-2 hawa-text-center hawa-text-sm hawa-text-white hawa-transition-all hover:hawa-bg-gray-300 hover:hawa-text-black\"\n >\n {item.label}\n </div>\n ))}\n </div>\n <div className=\"hawa-m-0 hawa-flex hawa-h-fit hawa-p-0 md:hawa-hidden\">\n <CollapsibleTrigger\n onClick={() => setIsOpen(!isOpen)}\n className=\"hawa-h-full hawa-text-white selection:hawa-p-0 \"\n aria-label=\"Toggle menu\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={cn(\n \"hawa-fixed hawa-h-6 hawa-w-6\",\n isOpen ? \"hawa-invisible\" : \"hawa-visible\"\n )}\n >\n <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" />\n <line x1=\"4\" x2=\"20\" y1=\"6\" y2=\"6\" />\n <line x1=\"4\" x2=\"20\" y1=\"18\" y2=\"18\" />\n </svg>\n\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={cn(\n \"hawa-h-6 hawa-w-6\",\n !isOpen ? \"hawa-invisible\" : \"hawa-visible\"\n )}\n >\n <path d=\"M18 6 6 18\" />\n <path d=\"m6 6 12 12\" />\n </svg>\n </CollapsibleTrigger>\n </div>\n </div>\n\n <CollapsibleContent\n className={cn(\n \"data-[state=closed]:hawa-opacity-0\",\n \"data-[state=open]:hawa-animate-in\",\n \"data-[state=open]:hawa-fade-in-90\",\n \"hawa-absolute hawa-left-0 hawa-top-[60px] hawa-flex hawa-flex-col hawa-rounded hawa-border hawa-bg-gray-200 hawa-p-1 hawa-transition-all\"\n // \"hawa-transition-all hawa-bg-gray-400 hawa-fixed hawa-left-0 hawa-top-[72px] hawa-w-full hawa-flex hawa-flex-col\"\n )}\n style={{\n width: \"calc(100%)\",\n zIndex: -100\n }}\n >\n {props.menuItems?.map((item, i) => (\n <div\n key={i}\n onClick={item.action}\n className=\"hawa-cursor-pointer hawa-rounded hawa-p-2 hawa-px-10 hawa-text-center hawa-text-black hawa-transition-all hover:hawa-bg-gray-300\"\n >\n {item.label}\n </div>\n ))}\n </CollapsibleContent>\n </Collapsible>\n </nav>\n );\n};\n","import * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\";\n\nconst Collapsible = CollapsiblePrimitive.Root;\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n"],"mappings":";;;;;AAAA,OAAO,SAAS,gBAAgB;;;ACAhC,YAAY,0BAA0B;AAEtC,IAAM,cAAmC;AAEzC,IAAMA,sBAA0C;AAEhD,IAAMC,sBAA0C;;;ADkBzC,IAAM,SAA+B,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,SACE,oCAAC,SAAI,WAAU,iDACb;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO,EAAE,iBAAiB,mBAAmB,UAAU;AAAA;AAAA,IAEvD,oCAAC,SAAI,WAAU,iEACb,oCAAC,SAAI,WAAU,iCACb;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS,MAAM;AACb,cAAI,iBAAiB;AACnB,4BAAgB;AAAA,UAClB;AAAA,QACF;AAAA;AAAA,MAEC;AAAA,IACH,CACF,GAEA,oCAAC,SAAI,WAAU,+BACZ,MAAM,WAAW,IAAI,CAAC,MAAM,MAC3B;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,SAAS,KAAK;AAAA,QACd,WAAU;AAAA;AAAA,MAET,KAAK;AAAA,IACR,CACD,CACH,GACA,oCAAC,SAAI,WAAU,2DACb;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS,MAAM,UAAU,CAAC,MAAM;AAAA,QAChC,WAAU;AAAA,QACV,cAAW;AAAA;AAAA,MAEX;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,WAAW;AAAA,YACT;AAAA,YACA,SAAS,mBAAmB;AAAA,UAC9B;AAAA;AAAA,QAEA,oCAAC,UAAK,IAAG,KAAI,IAAG,MAAK,IAAG,MAAK,IAAG,MAAK;AAAA,QACrC,oCAAC,UAAK,IAAG,KAAI,IAAG,MAAK,IAAG,KAAI,IAAG,KAAI;AAAA,QACnC,oCAAC,UAAK,IAAG,KAAI,IAAG,MAAK,IAAG,MAAK,IAAG,MAAK;AAAA,MACvC;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,WAAW;AAAA,YACT;AAAA,YACA,CAAC,SAAS,mBAAmB;AAAA,UAC/B;AAAA;AAAA,QAEA,oCAAC,UAAK,GAAE,cAAa;AAAA,QACrB,oCAAC,UAAK,GAAE,cAAa;AAAA,MACvB;AAAA,IACF,CACF,CACF;AAAA,IAEA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,QAEF;AAAA,QACA,OAAO;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA;AAAA,MAEC,MAAM,WAAW,IAAI,CAAC,MAAM,MAC3B;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,SAAS,KAAK;AAAA,UACd,WAAU;AAAA;AAAA,QAET,KAAK;AAAA,MACR,CACD;AAAA,IACH;AAAA,EACF,CACF;AAEJ;","names":["CollapsibleTrigger","CollapsibleContent","CollapsibleTrigger","CollapsibleContent"]}
|
1
|
+
{"version":3,"sources":["../../layout/navbar/Navbar.tsx","../../elements/collapsible/Collapsible.tsx","../../util/index.ts"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport {\n CollapsibleTrigger,\n CollapsibleContent,\n Collapsible\n} from \"@elements/collapsible\";\n\nimport { cn } from \"@util/index\";\n\ntype NavigationMenuItem = {\n label: string;\n action: () => void;\n trigger?: any;\n};\n\ntype NavbarType = {\n logo?: any;\n buttons?: any;\n menuItems?: NavigationMenuItem[];\n handleLogoClick?: () => void;\n backgroundColor?: string;\n};\n\nexport const Navbar: React.FC<NavbarType> = ({\n backgroundColor,\n logo,\n handleLogoClick,\n ...props\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n <nav className=\" hawa-sticky hawa-top-2 hawa-transition-all\">\n <Collapsible\n className={\"hawa-relative hawa-m-2 hawa-rounded hawa-p-2\"}\n style={{ backgroundColor: backgroundColor || \"#1f2937\" }}\n >\n <div className=\"hawa-flex hawa-items-center hawa-justify-between hawa-px-3 \">\n <div className=\"hawa-flex hawa-items-center\">\n <div\n className=\"hawa-p-1.5 hawa-text-xl hawa-font-bold hawa-text-white\"\n onClick={() => {\n if (handleLogoClick) {\n handleLogoClick();\n }\n }}\n >\n {logo}\n </div>\n </div>\n\n <div className=\"hawa-hidden md:hawa-flex \">\n {props.menuItems?.map((item, i) => (\n <div\n key={i}\n onClick={item.action}\n className=\"hawa-cursor-pointer hawa-rounded hawa-p-1.5 hawa-px-2 hawa-text-center hawa-text-sm hawa-text-white hawa-transition-all hover:hawa-bg-gray-300 hover:hawa-text-black\"\n >\n {item.label}\n </div>\n ))}\n </div>\n <div className=\"hawa-m-0 hawa-flex hawa-h-fit hawa-p-0 md:hawa-hidden\">\n <CollapsibleTrigger\n onClick={() => setIsOpen(!isOpen)}\n className=\"hawa-h-full hawa-text-white selection:hawa-p-0 \"\n aria-label=\"Toggle menu\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={cn(\n \"hawa-fixed hawa-h-6 hawa-w-6\",\n isOpen ? \"hawa-invisible\" : \"hawa-visible\"\n )}\n >\n <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" />\n <line x1=\"4\" x2=\"20\" y1=\"6\" y2=\"6\" />\n <line x1=\"4\" x2=\"20\" y1=\"18\" y2=\"18\" />\n </svg>\n\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={cn(\n \"hawa-h-6 hawa-w-6\",\n !isOpen ? \"hawa-invisible\" : \"hawa-visible\"\n )}\n >\n <path d=\"M18 6 6 18\" />\n <path d=\"m6 6 12 12\" />\n </svg>\n </CollapsibleTrigger>\n </div>\n </div>\n\n <CollapsibleContent\n className={cn(\n \"data-[state=closed]:hawa-opacity-0\",\n \"data-[state=open]:hawa-animate-in\",\n \"data-[state=open]:hawa-fade-in-90\",\n \"hawa-absolute hawa-left-0 hawa-top-[60px] hawa-flex hawa-flex-col hawa-rounded hawa-border hawa-bg-gray-200 hawa-p-1 hawa-transition-all\"\n // \"hawa-transition-all hawa-bg-gray-400 hawa-fixed hawa-left-0 hawa-top-[72px] hawa-w-full hawa-flex hawa-flex-col\"\n )}\n style={{\n width: \"calc(100%)\",\n zIndex: -100\n }}\n >\n {props.menuItems?.map((item, i) => (\n <div\n key={i}\n onClick={item.action}\n className=\"hawa-cursor-pointer hawa-rounded hawa-p-2 hawa-px-10 hawa-text-center hawa-text-black hawa-transition-all hover:hawa-bg-gray-300\"\n >\n {item.label}\n </div>\n ))}\n </CollapsibleContent>\n </Collapsible>\n </nav>\n );\n};\n","import * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\";\n\nconst Collapsible = CollapsiblePrimitive.Root;\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\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"],"mappings":";AAAA,OAAO,SAAS,gBAAgB;;;ACAhC,YAAY,0BAA0B;AAEtC,IAAM,cAAmC;AAEzC,IAAMA,sBAA0C;AAEhD,IAAMC,sBAA0C;;;ACNhD,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;AFmBO,IAAM,SAA+B,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AA7BN;AA8BE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,SACE,oCAAC,SAAI,WAAU,iDACb;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO,EAAE,iBAAiB,mBAAmB,UAAU;AAAA;AAAA,IAEvD,oCAAC,SAAI,WAAU,iEACb,oCAAC,SAAI,WAAU,iCACb;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS,MAAM;AACb,cAAI,iBAAiB;AACnB,4BAAgB;AAAA,UAClB;AAAA,QACF;AAAA;AAAA,MAEC;AAAA,IACH,CACF,GAEA,oCAAC,SAAI,WAAU,gCACZ,WAAM,cAAN,mBAAiB,IAAI,CAAC,MAAM,MAC3B;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,SAAS,KAAK;AAAA,QACd,WAAU;AAAA;AAAA,MAET,KAAK;AAAA,IACR,EAEJ,GACA,oCAAC,SAAI,WAAU,2DACb;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS,MAAM,UAAU,CAAC,MAAM;AAAA,QAChC,WAAU;AAAA,QACV,cAAW;AAAA;AAAA,MAEX;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,WAAW;AAAA,YACT;AAAA,YACA,SAAS,mBAAmB;AAAA,UAC9B;AAAA;AAAA,QAEA,oCAAC,UAAK,IAAG,KAAI,IAAG,MAAK,IAAG,MAAK,IAAG,MAAK;AAAA,QACrC,oCAAC,UAAK,IAAG,KAAI,IAAG,MAAK,IAAG,KAAI,IAAG,KAAI;AAAA,QACnC,oCAAC,UAAK,IAAG,KAAI,IAAG,MAAK,IAAG,MAAK,IAAG,MAAK;AAAA,MACvC;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,WAAW;AAAA,YACT;AAAA,YACA,CAAC,SAAS,mBAAmB;AAAA,UAC/B;AAAA;AAAA,QAEA,oCAAC,UAAK,GAAE,cAAa;AAAA,QACrB,oCAAC,UAAK,GAAE,cAAa;AAAA,MACvB;AAAA,IACF,CACF,CACF;AAAA,IAEA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,QAEF;AAAA,QACA,OAAO;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA;AAAA,OAEC,WAAM,cAAN,mBAAiB,IAAI,CAAC,MAAM,MAC3B;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,SAAS,KAAK;AAAA,UACd,WAAU;AAAA;AAAA,QAET,KAAK;AAAA,MACR;AAAA,IAEJ;AAAA,EACF,CACF;AAEJ;","names":["CollapsibleTrigger","CollapsibleContent","CollapsibleTrigger","CollapsibleContent"]}
|
@@ -1,11 +1,16 @@
|
|
1
|
-
import {
|
2
|
-
cn
|
3
|
-
} from "../chunk-CBRGWUZG.mjs";
|
4
|
-
|
5
1
|
// elements/navigationMenu/NavigationMenu.tsx
|
6
2
|
import * as React from "react";
|
7
3
|
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
|
8
4
|
import { cva } from "class-variance-authority";
|
5
|
+
|
6
|
+
// util/index.ts
|
7
|
+
import { clsx } from "clsx";
|
8
|
+
import { twMerge } from "tailwind-merge";
|
9
|
+
function cn(...inputs) {
|
10
|
+
return twMerge(clsx(inputs));
|
11
|
+
}
|
12
|
+
|
13
|
+
// elements/navigationMenu/NavigationMenu.tsx
|
9
14
|
var navigationMenuTriggerStyle = cva(
|
10
15
|
"hawa-group hawa-inline-flex hawa-h-10 hawa-w-max hawa-items-center hawa-gap-1 hawa-justify-center hawa-rounded-md hawa-bg-background hawa-px-4 hawa-py-2 hawa-text-sm hawa-font-medium hawa-transition-colors hover:hawa-bg-accent hover:hawa-text-accent-foreground focus:hawa-bg-accent focus:hawa-text-accent-foreground focus:hawa-outline-none disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[active]:hawa-bg-accent/50 "
|
11
16
|
);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/navigationMenu/NavigationMenu.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\";\nimport { cva } from \"class-variance-authority\";\n\nimport { DirectionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\nconst navigationMenuTriggerStyle = cva(\n \"hawa-group hawa-inline-flex hawa-h-10 hawa-w-max hawa-items-center hawa-gap-1 hawa-justify-center hawa-rounded-md hawa-bg-background hawa-px-4 hawa-py-2 hawa-text-sm hawa-font-medium hawa-transition-colors hover:hawa-bg-accent hover:hawa-text-accent-foreground focus:hawa-bg-accent focus:hawa-text-accent-foreground focus:hawa-outline-none disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[active]:hawa-bg-accent/50 \"\n);\n\ntype StandardNavigationMenuItemProps = {\n icon?: React.ReactNode;\n title: string;\n subtitle?: string;\n};\ntype NavigationMenuRootProps = React.ComponentPropsWithoutRef<\n typeof NavigationMenuPrimitive.Root\n> & {\n viewportClassNames?: string;\n};\ntype NavigationMenuItemProps = {\n trigger: any;\n content?: any;\n action?: any;\n path?: string;\n};\ntype NavigationMenuTypes = {\n items: NavigationMenuItemProps[];\n rootClassNames?: string;\n viewportClassNames?: string;\n triggerClassNames?: string;\n actionFirst?: boolean;\n direction?: DirectionType;\n};\n\nconst NavigationMenuRoot = React.forwardRef<\n React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n NavigationMenuRootProps\n>(({ className, children, viewportClassNames, ...props }, ref) => (\n <NavigationMenuPrimitive.Root\n ref={ref}\n className={cn(\n \"hawa-relative hawa-z-10 hawa-flex hawa-flex-1 hawa-items-center hawa-justify-center\",\n // \"hawa-max-w-max\",\n className\n )}\n {...props}\n >\n {children}\n <NavigationMenuViewport className={viewportClassNames} />\n </NavigationMenuPrimitive.Root>\n));\nconst NavigationMenuList = React.forwardRef<\n React.ElementRef<typeof NavigationMenuPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n <NavigationMenuPrimitive.List\n ref={ref}\n className={cn(\n \"hawa-group hawa-flex hawa-flex-1 hawa-list-none hawa-items-center hawa-justify-center hawa-gap-1\",\n className\n )}\n {...props}\n />\n));\nconst NavigationMenuTrigger = React.forwardRef<\n React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n <NavigationMenuPrimitive.Trigger\n ref={ref}\n className={cn(navigationMenuTriggerStyle(), \"hawa-group\", className)}\n {...props}\n >\n {children}\n <svg\n aria-label=\"Chevron Icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n className=\"hawa-icon hawa-relative hawa-top-[1px] hawa-transition hawa-duration-200 group-data-[state=open]:hawa-rotate-180\"\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n </NavigationMenuPrimitive.Trigger>\n));\nconst NavigationMenuContent = React.forwardRef<\n React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <NavigationMenuPrimitive.Content\n ref={ref}\n className={cn(\n \"hawa-absolute hawa-left-0 hawa-top-0 hawa-w-full hawa-rounded \",\n // \"md:hawa-absolute md:hawa-w-auto hawa-left-0 hawa-top-0 \",\n // animation\n \"data-[motion^=from-]:hawa-animate-in data-[motion^=to-]:hawa-animate-out data-[motion^=from-]:hawa-fade-in data-[motion^=to-]:hawa-fade-out data-[motion=from-end]:hawa-slide-in-from-right-52 data-[motion=from-start]:hawa-slide-in-from-left-52 data-[motion=to-end]:hawa-slide-out-to-right-52 data-[motion=to-start]:hawa-slide-out-to-left-52\",\n className\n )}\n {...props}\n />\n));\nconst StandardNavigationMenuItem: React.FC<\n StandardNavigationMenuItemProps &\n React.ComponentProps<typeof NavigationMenuPrimitive.Link>\n> = ({ icon, title, subtitle, ...linkProps }) => (\n <NavigationMenuLink {...linkProps}>\n <div className=\"hawa-flex hawa-max-w-md hawa-cursor-pointer hawa-flex-row hawa-items-center hawa-gap-4 hawa-rounded-inner hawa-p-4 hawa-py-2 hawa-transition-all hover:hawa-bg-muted\">\n {icon && icon}\n <div className=\"hawa-flex hawa-flex-col\">\n <h1 className=\"hawa-text-xl hawa-font-bold\">{title}</h1>\n <p className=\"hawa-text-sm\">{subtitle}</p>\n </div>\n </div>\n </NavigationMenuLink>\n);\nconst NavigationMenuViewport = React.forwardRef<\n React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n <div\n className={cn(\n \"hawa-absolute hawa-top-full hawa-flex hawa-w-full hawa-justify-center\"\n )}\n >\n <NavigationMenuPrimitive.Viewport\n className={cn(\n \"hawa-origin-top-center hawa-relative hawa-mt-1.5 hawa-w-full hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-lg data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-90 \",\n // hawa-h-[var(--radix-navigation-menu-viewport-height)]\n // \"md:hawa-w-[var(--radix-navigation-menu-viewport-width)]\",\n className\n )}\n style={{\n height: \"calc(var(--radix-navigation-menu-viewport-height) + 1px)\"\n }}\n ref={ref}\n {...props}\n />\n </div>\n));\nconst NavigationMenuIndicator = React.forwardRef<\n React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n <NavigationMenuPrimitive.Indicator\n ref={ref}\n className={cn(\n \"hawa-top-full hawa-z-[1] hawa-flex hawa-h-1.5 hawa-items-end hawa-justify-center hawa-overflow-hidden data-[state=visible]:hawa-animate-in data-[state=hidden]:hawa-animate-out data-[state=hidden]:hawa-fade-out data-[state=visible]:hawa-fade-in\",\n className\n )}\n {...props}\n >\n <div className=\"hawa-relative hawa-top-[60%] hawa-h-2 hawa-w-2 hawa-rotate-45 hawa-rounded-tl-sm hawa-bg-border hawa-shadow-md\" />\n </NavigationMenuPrimitive.Indicator>\n));\n\nconst NavigationMenu: React.FC<NavigationMenuTypes> = ({\n viewportClassNames,\n rootClassNames,\n triggerClassNames,\n actionFirst,\n ...props\n}) => {\n return (\n <NavigationMenuRoot\n dir={props.direction}\n delayDuration={0}\n className={rootClassNames}\n viewportClassNames={viewportClassNames}\n >\n <NavigationMenuList>\n {props.items.map((item, i) => (\n <NavigationMenuItem key={i}>\n {item.content ? (\n <>\n <NavigationMenuTrigger className={cn(triggerClassNames)}>\n {item.trigger}\n </NavigationMenuTrigger>\n <NavigationMenuContent>{item.content}</NavigationMenuContent>\n </>\n ) : (\n <NavigationMenuLink\n href={actionFirst ? undefined : item.path}\n onClick={() => {\n if (item.action) {\n item.action();\n }\n }}\n className={cn(\n navigationMenuTriggerStyle(),\n \"hawa-cursor-pointer hawa-select-none\",\n triggerClassNames\n )}\n >\n {item.trigger}\n </NavigationMenuLink>\n )}\n </NavigationMenuItem>\n ))}\n </NavigationMenuList>\n </NavigationMenuRoot>\n );\n};\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item;\nconst NavigationMenuLink = NavigationMenuPrimitive.Link;\n\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;\nNavigationMenuRoot.displayName = NavigationMenuPrimitive.Root.displayName;\nNavigationMenuIndicator.displayName =\n NavigationMenuPrimitive.Indicator.displayName;\nNavigationMenuViewport.displayName =\n NavigationMenuPrimitive.Viewport.displayName;\n\nexport {\n NavigationMenuLink,\n NavigationMenuItem,\n NavigationMenu,\n NavigationMenuIndicator,\n NavigationMenuContent,\n NavigationMenuList,\n navigationMenuTriggerStyle,\n NavigationMenuRoot,\n NavigationMenuTrigger,\n NavigationMenuViewport,\n StandardNavigationMenuItem\n};\n"],"mappings":"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","names":[]}
|
1
|
+
{"version":3,"sources":["../../elements/navigationMenu/NavigationMenu.tsx","../../util/index.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\";\nimport { cva } from \"class-variance-authority\";\n\nimport { DirectionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\nconst navigationMenuTriggerStyle = cva(\n \"hawa-group hawa-inline-flex hawa-h-10 hawa-w-max hawa-items-center hawa-gap-1 hawa-justify-center hawa-rounded-md hawa-bg-background hawa-px-4 hawa-py-2 hawa-text-sm hawa-font-medium hawa-transition-colors hover:hawa-bg-accent hover:hawa-text-accent-foreground focus:hawa-bg-accent focus:hawa-text-accent-foreground focus:hawa-outline-none disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[active]:hawa-bg-accent/50 \"\n);\n\ntype StandardNavigationMenuItemProps = {\n icon?: React.ReactNode;\n title: string;\n subtitle?: string;\n};\ntype NavigationMenuRootProps = React.ComponentPropsWithoutRef<\n typeof NavigationMenuPrimitive.Root\n> & {\n viewportClassNames?: string;\n};\ntype NavigationMenuItemProps = {\n trigger: any;\n content?: any;\n action?: any;\n path?: string;\n};\ntype NavigationMenuTypes = {\n items: NavigationMenuItemProps[];\n rootClassNames?: string;\n viewportClassNames?: string;\n triggerClassNames?: string;\n actionFirst?: boolean;\n direction?: DirectionType;\n};\n\nconst NavigationMenuRoot = React.forwardRef<\n React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n NavigationMenuRootProps\n>(({ className, children, viewportClassNames, ...props }, ref) => (\n <NavigationMenuPrimitive.Root\n ref={ref}\n className={cn(\n \"hawa-relative hawa-z-10 hawa-flex hawa-flex-1 hawa-items-center hawa-justify-center\",\n // \"hawa-max-w-max\",\n className\n )}\n {...props}\n >\n {children}\n <NavigationMenuViewport className={viewportClassNames} />\n </NavigationMenuPrimitive.Root>\n));\nconst NavigationMenuList = React.forwardRef<\n React.ElementRef<typeof NavigationMenuPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n <NavigationMenuPrimitive.List\n ref={ref}\n className={cn(\n \"hawa-group hawa-flex hawa-flex-1 hawa-list-none hawa-items-center hawa-justify-center hawa-gap-1\",\n className\n )}\n {...props}\n />\n));\nconst NavigationMenuTrigger = React.forwardRef<\n React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n <NavigationMenuPrimitive.Trigger\n ref={ref}\n className={cn(navigationMenuTriggerStyle(), \"hawa-group\", className)}\n {...props}\n >\n {children}\n <svg\n aria-label=\"Chevron Icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n className=\"hawa-icon hawa-relative hawa-top-[1px] hawa-transition hawa-duration-200 group-data-[state=open]:hawa-rotate-180\"\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n </NavigationMenuPrimitive.Trigger>\n));\nconst NavigationMenuContent = React.forwardRef<\n React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <NavigationMenuPrimitive.Content\n ref={ref}\n className={cn(\n \"hawa-absolute hawa-left-0 hawa-top-0 hawa-w-full hawa-rounded \",\n // \"md:hawa-absolute md:hawa-w-auto hawa-left-0 hawa-top-0 \",\n // animation\n \"data-[motion^=from-]:hawa-animate-in data-[motion^=to-]:hawa-animate-out data-[motion^=from-]:hawa-fade-in data-[motion^=to-]:hawa-fade-out data-[motion=from-end]:hawa-slide-in-from-right-52 data-[motion=from-start]:hawa-slide-in-from-left-52 data-[motion=to-end]:hawa-slide-out-to-right-52 data-[motion=to-start]:hawa-slide-out-to-left-52\",\n className\n )}\n {...props}\n />\n));\nconst StandardNavigationMenuItem: React.FC<\n StandardNavigationMenuItemProps &\n React.ComponentProps<typeof NavigationMenuPrimitive.Link>\n> = ({ icon, title, subtitle, ...linkProps }) => (\n <NavigationMenuLink {...linkProps}>\n <div className=\"hawa-flex hawa-max-w-md hawa-cursor-pointer hawa-flex-row hawa-items-center hawa-gap-4 hawa-rounded-inner hawa-p-4 hawa-py-2 hawa-transition-all hover:hawa-bg-muted\">\n {icon && icon}\n <div className=\"hawa-flex hawa-flex-col\">\n <h1 className=\"hawa-text-xl hawa-font-bold\">{title}</h1>\n <p className=\"hawa-text-sm\">{subtitle}</p>\n </div>\n </div>\n </NavigationMenuLink>\n);\nconst NavigationMenuViewport = React.forwardRef<\n React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n <div\n className={cn(\n \"hawa-absolute hawa-top-full hawa-flex hawa-w-full hawa-justify-center\"\n )}\n >\n <NavigationMenuPrimitive.Viewport\n className={cn(\n \"hawa-origin-top-center hawa-relative hawa-mt-1.5 hawa-w-full hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-lg data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-90 \",\n // hawa-h-[var(--radix-navigation-menu-viewport-height)]\n // \"md:hawa-w-[var(--radix-navigation-menu-viewport-width)]\",\n className\n )}\n style={{\n height: \"calc(var(--radix-navigation-menu-viewport-height) + 1px)\"\n }}\n ref={ref}\n {...props}\n />\n </div>\n));\nconst NavigationMenuIndicator = React.forwardRef<\n React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n <NavigationMenuPrimitive.Indicator\n ref={ref}\n className={cn(\n \"hawa-top-full hawa-z-[1] hawa-flex hawa-h-1.5 hawa-items-end hawa-justify-center hawa-overflow-hidden data-[state=visible]:hawa-animate-in data-[state=hidden]:hawa-animate-out data-[state=hidden]:hawa-fade-out data-[state=visible]:hawa-fade-in\",\n className\n )}\n {...props}\n >\n <div className=\"hawa-relative hawa-top-[60%] hawa-h-2 hawa-w-2 hawa-rotate-45 hawa-rounded-tl-sm hawa-bg-border hawa-shadow-md\" />\n </NavigationMenuPrimitive.Indicator>\n));\n\nconst NavigationMenu: React.FC<NavigationMenuTypes> = ({\n viewportClassNames,\n rootClassNames,\n triggerClassNames,\n actionFirst,\n ...props\n}) => {\n return (\n <NavigationMenuRoot\n dir={props.direction}\n delayDuration={0}\n className={rootClassNames}\n viewportClassNames={viewportClassNames}\n >\n <NavigationMenuList>\n {props.items.map((item, i) => (\n <NavigationMenuItem key={i}>\n {item.content ? (\n <>\n <NavigationMenuTrigger className={cn(triggerClassNames)}>\n {item.trigger}\n </NavigationMenuTrigger>\n <NavigationMenuContent>{item.content}</NavigationMenuContent>\n </>\n ) : (\n <NavigationMenuLink\n href={actionFirst ? undefined : item.path}\n onClick={() => {\n if (item.action) {\n item.action();\n }\n }}\n className={cn(\n navigationMenuTriggerStyle(),\n \"hawa-cursor-pointer hawa-select-none\",\n triggerClassNames\n )}\n >\n {item.trigger}\n </NavigationMenuLink>\n )}\n </NavigationMenuItem>\n ))}\n </NavigationMenuList>\n </NavigationMenuRoot>\n );\n};\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item;\nconst NavigationMenuLink = NavigationMenuPrimitive.Link;\n\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;\nNavigationMenuRoot.displayName = NavigationMenuPrimitive.Root.displayName;\nNavigationMenuIndicator.displayName =\n NavigationMenuPrimitive.Indicator.displayName;\nNavigationMenuViewport.displayName =\n NavigationMenuPrimitive.Viewport.displayName;\n\nexport {\n NavigationMenuLink,\n NavigationMenuItem,\n NavigationMenu,\n NavigationMenuIndicator,\n NavigationMenuContent,\n NavigationMenuList,\n navigationMenuTriggerStyle,\n NavigationMenuRoot,\n NavigationMenuTrigger,\n NavigationMenuViewport,\n StandardNavigationMenuItem\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"],"mappings":"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","names":[]}
|
@@ -1,10 +1,15 @@
|
|
1
|
-
import {
|
2
|
-
cn
|
3
|
-
} from "../chunk-CBRGWUZG.mjs";
|
4
|
-
|
5
1
|
// elements/pagination/Pagination.tsx
|
6
2
|
import React from "react";
|
7
3
|
import { Pagination as PaginationPrimitive } from "react-headless-pagination";
|
4
|
+
|
5
|
+
// util/index.ts
|
6
|
+
import { clsx } from "clsx";
|
7
|
+
import { twMerge } from "tailwind-merge";
|
8
|
+
function cn(...inputs) {
|
9
|
+
return twMerge(clsx(inputs));
|
10
|
+
}
|
11
|
+
|
12
|
+
// elements/pagination/Pagination.tsx
|
8
13
|
var Pagination = ({
|
9
14
|
direction,
|
10
15
|
totalPages,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/pagination/Pagination.tsx"],"sourcesContent":["import React from \"react\";\nimport { Pagination as PaginationPrimitive } from \"react-headless-pagination\";\n\nimport { DirectionType } from \"../../types/commonTypes\";\nimport { cn } from \"@util/index\";\n\ntype PaginationProps = {\n direction?: DirectionType;\n totalPages: number;\n currentPage?: number;\n};\n\nexport const Pagination: React.FC<PaginationProps> = ({\n direction,\n totalPages,\n currentPage\n}) => {\n const [page, setPage] = React.useState<number>(currentPage || 0);\n const handlePageChange = (page: number) => {\n setPage(page);\n };\n // let totalPages = 123;\n return (\n <PaginationPrimitive\n totalPages={totalPages}\n edgePageCount={2}\n middlePagesSiblingCount={1}\n // truncableClassName={\"w-10 px-0.5\"}\n\n currentPage={page}\n setCurrentPage={handlePageChange}\n className=\"hawa-flex hawa-h-9 hawa-w-full hawa-select-none hawa-items-center hawa-text-sm hawa-transition-all\"\n truncableText=\"...\"\n truncableClassName=\"hawa-w-10 hawa-px-0.5 hawa-text-center\"\n >\n <PaginationPrimitive.PrevButton\n as={\n <button\n aria-label=\"Previous Table Page\"\n className={cn(\n \"hawa-min-w-9 hawa-flex hawa-h-9 hawa-w-9 hawa-items-center hawa-justify-center hawa-rounded hawa-border hawa-bg-card\",\n direction === \"rtl\" && \"hawa-rotate-180\"\n )}\n style={{ minWidth: 36 }}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"m15 18-6-6 6-6\" />\n </svg>\n </button>\n }\n className={cn(\n \"hawa-mr-2 hawa-flex hawa-items-center hawa-text-gray-500 hover:hawa-text-gray-600 dark:hover:hawa-text-gray-200\",\n {\n \"hawa-cursor-pointer\": page !== 0,\n \"hawa-opacity-50\": page === 0\n }\n )}\n >\n Previous\n </PaginationPrimitive.PrevButton>\n\n <nav className=\"hawa-flex hawa-flex-grow hawa-justify-center\">\n <ul className=\"hawa-flex hawa-items-center hawa-gap-1\">\n <PaginationPrimitive.PageButton\n className={\n \"hawa-tap-highlight-transparent hawa-text-default-foreground data-[focus-visible=true]:hawa-outline-focus data-[disabled=true]:hawa-text-default-300 hawa-min-w-9 hawa-text-small hawa-box-border hawa-flex hawa-h-9 hawa-w-9 hawa-cursor-pointer hawa-touch-none hawa-select-none hawa-flex-wrap hawa-items-center hawa-justify-center hawa-truncate hawa-rounded hawa-border hawa-bg-card hawa-outline-none hawa-transition-all hover:hawa-scale-[1.1] data-[disabled=true]:hawa-pointer-events-none data-[focus-visible=true]:hawa-z-10 data-[pressed=true]:hawa-scale-[0.97] data-[focus-visible=true]:hawa-outline-2 data-[focus-visible=true]:hawa-outline-offset-2\"\n }\n activeClassName=\"hawa-bg-primary hawa-text-primary-foreground hawa-transition-all\"\n // activeClassName=\"hawa-bg-primary/80 hawa-text-primary-foreground hawa-font-extrabold\"\n // inactiveClassName=\"hawa-text-gray-500\"\n // className={\n // \"hawa-flex hawa-bg-muted hawa-rounded hawa-items-center hawa-justify-center hover:hawa-text-primary-600 focus:hawa-font-bold focus:hawa-text-primary-600 focus:hawa-outline-none hawa-h-7 hawa-w-7 hawa-cursor-pointer\"\n // }\n />\n </ul>\n </nav>\n\n <PaginationPrimitive.NextButton\n as={\n <button\n aria-label=\"Previous Table Page\"\n className={cn(\n \"hawa-min-w-9 hawa-flex hawa-h-9 hawa-w-9 hawa-items-center hawa-justify-center hawa-rounded hawa-border hawa-bg-card\",\n direction === \"ltr\" && \"hawa-rotate-180\"\n )}\n style={{ minWidth: 36 }}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"m15 18-6-6 6-6\" />\n </svg>\n </button>\n }\n className={cn(\n \"hawa-mr-2 hawa-flex hawa-items-center hawa-text-gray-500 hover:hawa-text-gray-600 dark:hover:hawa-text-gray-200\",\n {\n \"hawa-cursor-pointer\": page !== totalPages - 1,\n \"hawa-opacity-50\": page === totalPages - 1\n }\n )}\n >\n Next\n {/* <FiArrowRight size={20} className=\"ml-3\" /> */}\n </PaginationPrimitive.NextButton>\n </PaginationPrimitive>\n );\n};\n"],"mappings":";;;;;AAAA,OAAO,WAAW;AAClB,SAAS,cAAc,2BAA2B;AAW3C,IAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAiB,eAAe,CAAC;AAC/D,QAAM,mBAAmB,CAACA,UAAiB;AACzC,YAAQA,KAAI;AAAA,EACd;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAe;AAAA,MACf,yBAAyB;AAAA,MAGzB,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,WAAU;AAAA,MACV,eAAc;AAAA,MACd,oBAAmB;AAAA;AAAA,IAEnB;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC,IACE;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW;AAAA,cACT;AAAA,cACA,cAAc,SAAS;AAAA,YACzB;AAAA,YACA,OAAO,EAAE,UAAU,GAAG;AAAA;AAAA,UAEtB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAM;AAAA,cACN,QAAO;AAAA,cACP,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,QAAO;AAAA,cACP,aAAY;AAAA,cACZ,eAAc;AAAA,cACd,gBAAe;AAAA;AAAA,YAEf,oCAAC,UAAK,GAAE,kBAAiB;AAAA,UAC3B;AAAA,QACF;AAAA,QAEF,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,uBAAuB,SAAS;AAAA,YAChC,mBAAmB,SAAS;AAAA,UAC9B;AAAA,QACF;AAAA;AAAA,MACD;AAAA,IAED;AAAA,IAEA,oCAAC,SAAI,WAAU,kDACb,oCAAC,QAAG,WAAU,4CACZ;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC,WACE;AAAA,QAEF,iBAAgB;AAAA;AAAA,IAMlB,CACF,CACF;AAAA,IAEA;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC,IACE;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW;AAAA,cACT;AAAA,cACA,cAAc,SAAS;AAAA,YACzB;AAAA,YACA,OAAO,EAAE,UAAU,GAAG;AAAA;AAAA,UAEtB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAM;AAAA,cACN,QAAO;AAAA,cACP,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,QAAO;AAAA,cACP,aAAY;AAAA,cACZ,eAAc;AAAA,cACd,gBAAe;AAAA;AAAA,YAEf,oCAAC,UAAK,GAAE,kBAAiB;AAAA,UAC3B;AAAA,QACF;AAAA,QAEF,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,uBAAuB,SAAS,aAAa;AAAA,YAC7C,mBAAmB,SAAS,aAAa;AAAA,UAC3C;AAAA,QACF;AAAA;AAAA,MACD;AAAA,IAGD;AAAA,EACF;AAEJ;","names":["page"]}
|
1
|
+
{"version":3,"sources":["../../elements/pagination/Pagination.tsx","../../util/index.ts"],"sourcesContent":["import React from \"react\";\nimport { Pagination as PaginationPrimitive } from \"react-headless-pagination\";\n\nimport { DirectionType } from \"../../types/commonTypes\";\nimport { cn } from \"@util/index\";\n\ntype PaginationProps = {\n direction?: DirectionType;\n totalPages: number;\n currentPage?: number;\n};\n\nexport const Pagination: React.FC<PaginationProps> = ({\n direction,\n totalPages,\n currentPage\n}) => {\n const [page, setPage] = React.useState<number>(currentPage || 0);\n const handlePageChange = (page: number) => {\n setPage(page);\n };\n // let totalPages = 123;\n return (\n <PaginationPrimitive\n totalPages={totalPages}\n edgePageCount={2}\n middlePagesSiblingCount={1}\n // truncableClassName={\"w-10 px-0.5\"}\n\n currentPage={page}\n setCurrentPage={handlePageChange}\n className=\"hawa-flex hawa-h-9 hawa-w-full hawa-select-none hawa-items-center hawa-text-sm hawa-transition-all\"\n truncableText=\"...\"\n truncableClassName=\"hawa-w-10 hawa-px-0.5 hawa-text-center\"\n >\n <PaginationPrimitive.PrevButton\n as={\n <button\n aria-label=\"Previous Table Page\"\n className={cn(\n \"hawa-min-w-9 hawa-flex hawa-h-9 hawa-w-9 hawa-items-center hawa-justify-center hawa-rounded hawa-border hawa-bg-card\",\n direction === \"rtl\" && \"hawa-rotate-180\"\n )}\n style={{ minWidth: 36 }}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"m15 18-6-6 6-6\" />\n </svg>\n </button>\n }\n className={cn(\n \"hawa-mr-2 hawa-flex hawa-items-center hawa-text-gray-500 hover:hawa-text-gray-600 dark:hover:hawa-text-gray-200\",\n {\n \"hawa-cursor-pointer\": page !== 0,\n \"hawa-opacity-50\": page === 0\n }\n )}\n >\n Previous\n </PaginationPrimitive.PrevButton>\n\n <nav className=\"hawa-flex hawa-flex-grow hawa-justify-center\">\n <ul className=\"hawa-flex hawa-items-center hawa-gap-1\">\n <PaginationPrimitive.PageButton\n className={\n \"hawa-tap-highlight-transparent hawa-text-default-foreground data-[focus-visible=true]:hawa-outline-focus data-[disabled=true]:hawa-text-default-300 hawa-min-w-9 hawa-text-small hawa-box-border hawa-flex hawa-h-9 hawa-w-9 hawa-cursor-pointer hawa-touch-none hawa-select-none hawa-flex-wrap hawa-items-center hawa-justify-center hawa-truncate hawa-rounded hawa-border hawa-bg-card hawa-outline-none hawa-transition-all hover:hawa-scale-[1.1] data-[disabled=true]:hawa-pointer-events-none data-[focus-visible=true]:hawa-z-10 data-[pressed=true]:hawa-scale-[0.97] data-[focus-visible=true]:hawa-outline-2 data-[focus-visible=true]:hawa-outline-offset-2\"\n }\n activeClassName=\"hawa-bg-primary hawa-text-primary-foreground hawa-transition-all\"\n // activeClassName=\"hawa-bg-primary/80 hawa-text-primary-foreground hawa-font-extrabold\"\n // inactiveClassName=\"hawa-text-gray-500\"\n // className={\n // \"hawa-flex hawa-bg-muted hawa-rounded hawa-items-center hawa-justify-center hover:hawa-text-primary-600 focus:hawa-font-bold focus:hawa-text-primary-600 focus:hawa-outline-none hawa-h-7 hawa-w-7 hawa-cursor-pointer\"\n // }\n />\n </ul>\n </nav>\n\n <PaginationPrimitive.NextButton\n as={\n <button\n aria-label=\"Previous Table Page\"\n className={cn(\n \"hawa-min-w-9 hawa-flex hawa-h-9 hawa-w-9 hawa-items-center hawa-justify-center hawa-rounded hawa-border hawa-bg-card\",\n direction === \"ltr\" && \"hawa-rotate-180\"\n )}\n style={{ minWidth: 36 }}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"m15 18-6-6 6-6\" />\n </svg>\n </button>\n }\n className={cn(\n \"hawa-mr-2 hawa-flex hawa-items-center hawa-text-gray-500 hover:hawa-text-gray-600 dark:hover:hawa-text-gray-200\",\n {\n \"hawa-cursor-pointer\": page !== totalPages - 1,\n \"hawa-opacity-50\": page === totalPages - 1\n }\n )}\n >\n Next\n {/* <FiArrowRight size={20} className=\"ml-3\" /> */}\n </PaginationPrimitive.NextButton>\n </PaginationPrimitive>\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"],"mappings":";AAAA,OAAO,WAAW;AAClB,SAAS,cAAc,2BAA2B;;;ACDlD,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADOO,IAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAiB,eAAe,CAAC;AAC/D,QAAM,mBAAmB,CAACA,UAAiB;AACzC,YAAQA,KAAI;AAAA,EACd;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAe;AAAA,MACf,yBAAyB;AAAA,MAGzB,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,WAAU;AAAA,MACV,eAAc;AAAA,MACd,oBAAmB;AAAA;AAAA,IAEnB;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC,IACE;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW;AAAA,cACT;AAAA,cACA,cAAc,SAAS;AAAA,YACzB;AAAA,YACA,OAAO,EAAE,UAAU,GAAG;AAAA;AAAA,UAEtB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAM;AAAA,cACN,QAAO;AAAA,cACP,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,QAAO;AAAA,cACP,aAAY;AAAA,cACZ,eAAc;AAAA,cACd,gBAAe;AAAA;AAAA,YAEf,oCAAC,UAAK,GAAE,kBAAiB;AAAA,UAC3B;AAAA,QACF;AAAA,QAEF,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,uBAAuB,SAAS;AAAA,YAChC,mBAAmB,SAAS;AAAA,UAC9B;AAAA,QACF;AAAA;AAAA,MACD;AAAA,IAED;AAAA,IAEA,oCAAC,SAAI,WAAU,kDACb,oCAAC,QAAG,WAAU,4CACZ;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC,WACE;AAAA,QAEF,iBAAgB;AAAA;AAAA,IAMlB,CACF,CACF;AAAA,IAEA;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC,IACE;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW;AAAA,cACT;AAAA,cACA,cAAc,SAAS;AAAA,YACzB;AAAA,YACA,OAAO,EAAE,UAAU,GAAG;AAAA;AAAA,UAEtB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAM;AAAA,cACN,QAAO;AAAA,cACP,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,QAAO;AAAA,cACP,aAAY;AAAA,cACZ,eAAc;AAAA,cACd,gBAAe;AAAA;AAAA,YAEf,oCAAC,UAAK,GAAE,kBAAiB;AAAA,UAC3B;AAAA,QACF;AAAA,QAEF,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,uBAAuB,SAAS,aAAa;AAAA,YAC7C,mBAAmB,SAAS,aAAa;AAAA,UAC3C;AAAA,QACF;AAAA;AAAA,MACD;AAAA,IAGD;AAAA,EACF;AAEJ;","names":["page"]}
|
@@ -272,6 +272,7 @@ var Input = (0, import_react6.forwardRef)(
|
|
272
272
|
countPosition = "bottom",
|
273
273
|
...props
|
274
274
|
}, ref) => {
|
275
|
+
var _a;
|
275
276
|
let marginStyles = {
|
276
277
|
none: "hawa-mb-0",
|
277
278
|
normal: "hawa-mb-3",
|
@@ -310,7 +311,7 @@ var Input = (0, import_react6.forwardRef)(
|
|
310
311
|
{
|
311
312
|
className: cn(
|
312
313
|
"hawa-absolute hawa-end-3 hawa-top-1/2 hawa--translate-y-1/2",
|
313
|
-
props.endIconProps
|
314
|
+
(_a = props.endIconProps) == null ? void 0 : _a.className
|
314
315
|
)
|
315
316
|
},
|
316
317
|
props.endIcon
|
@@ -337,7 +338,7 @@ var Input = (0, import_react6.forwardRef)(
|
|
337
338
|
"hawa-pe-[60px]": countPosition === "center"
|
338
339
|
},
|
339
340
|
preview && "hawa-border-transparent hawa-bg-transparent hawa-px-0",
|
340
|
-
inputProps
|
341
|
+
inputProps == null ? void 0 : inputProps.className
|
341
342
|
)
|
342
343
|
}
|
343
344
|
)), !forceHideHelperText && /* @__PURE__ */ import_react6.default.createElement(
|