@sikka/hawa 0.27.11-next → 0.27.13-next
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion/index.js +1 -0
- package/dist/accordion/index.js.map +1 -1
- package/dist/accordion/index.mjs +2 -0
- package/dist/accordion/index.mjs.map +1 -1
- package/dist/alert/index.js +1 -0
- package/dist/alert/index.js.map +1 -1
- package/dist/alert/index.mjs +2 -0
- package/dist/alert/index.mjs.map +1 -1
- package/dist/appLayout/index.js +1 -0
- package/dist/appLayout/index.js.map +1 -1
- package/dist/appLayout/index.mjs +2 -0
- package/dist/appLayout/index.mjs.map +1 -1
- package/dist/appMenubar/index.js +1 -0
- package/dist/appMenubar/index.js.map +1 -1
- package/dist/appMenubar/index.mjs +2 -0
- package/dist/appMenubar/index.mjs.map +1 -1
- package/dist/appStores/index.js +1 -0
- package/dist/appStores/index.js.map +1 -1
- package/dist/appStores/index.mjs +2 -0
- package/dist/appStores/index.mjs.map +1 -1
- package/dist/appTabs/index.js +1 -0
- package/dist/appTabs/index.js.map +1 -1
- package/dist/appTabs/index.mjs +2 -0
- package/dist/appTabs/index.mjs.map +1 -1
- package/dist/appTopbar/index.js +1 -0
- package/dist/appTopbar/index.js.map +1 -1
- package/dist/appTopbar/index.mjs +2 -0
- package/dist/appTopbar/index.mjs.map +1 -1
- package/dist/avatar/index.js +1 -0
- package/dist/avatar/index.js.map +1 -1
- package/dist/avatar/index.mjs +2 -0
- package/dist/avatar/index.mjs.map +1 -1
- package/dist/backToTop/index.js +1 -0
- package/dist/backToTop/index.js.map +1 -1
- package/dist/backToTop/index.mjs +2 -0
- package/dist/backToTop/index.mjs.map +1 -1
- package/dist/badge/index.js +1 -0
- package/dist/badge/index.js.map +1 -1
- package/dist/badge/index.mjs +2 -0
- package/dist/badge/index.mjs.map +1 -1
- package/dist/blocks/auth/index.d.mts +2 -2
- package/dist/blocks/auth/index.d.ts +2 -2
- package/dist/blocks/auth/index.js +34 -19
- package/dist/blocks/auth/index.mjs +32 -19
- package/dist/blocks/feedback/index.js +1 -0
- package/dist/blocks/feedback/index.mjs +6 -5
- package/dist/blocks/index.d.mts +2 -2
- package/dist/blocks/index.d.ts +2 -2
- package/dist/blocks/index.js +34 -19
- package/dist/blocks/index.mjs +30 -17
- package/dist/blocks/misc/index.js +1 -0
- package/dist/blocks/misc/index.mjs +6 -5
- package/dist/blocks/pricing/index.js +1 -0
- package/dist/blocks/pricing/index.mjs +6 -5
- package/dist/breadcrumb/index.js +1 -0
- package/dist/breadcrumb/index.js.map +1 -1
- package/dist/breadcrumb/index.mjs +2 -0
- package/dist/breadcrumb/index.mjs.map +1 -1
- package/dist/button/index.js +1 -0
- package/dist/button/index.js.map +1 -1
- package/dist/button/index.mjs +2 -0
- package/dist/button/index.mjs.map +1 -1
- package/dist/card/index.js +1 -0
- package/dist/card/index.js.map +1 -1
- package/dist/card/index.mjs +2 -0
- package/dist/card/index.mjs.map +1 -1
- package/dist/carousel/index.js +1 -0
- package/dist/carousel/index.js.map +1 -1
- package/dist/carousel/index.mjs +2 -0
- package/dist/carousel/index.mjs.map +1 -1
- package/dist/checkbox/index.js +1 -0
- package/dist/checkbox/index.js.map +1 -1
- package/dist/checkbox/index.mjs +2 -0
- package/dist/checkbox/index.mjs.map +1 -1
- package/dist/chip/index.js +1 -0
- package/dist/chip/index.js.map +1 -1
- package/dist/chip/index.mjs +2 -0
- package/dist/chip/index.mjs.map +1 -1
- package/dist/{chunk-ZS3FB3PO.mjs → chunk-47APBDKK.mjs} +2 -0
- package/dist/{chunk-EZKMFH4D.mjs → chunk-47JBRNHV.mjs} +2 -1
- package/dist/{chunk-ZFXKCRJC.mjs → chunk-4OOSUQZG.mjs} +1 -0
- package/dist/{chunk-A3ERTYS4.mjs → chunk-57SB6MBG.mjs} +2 -0
- package/dist/{chunk-H6RXLCDX.mjs → chunk-AOS5F2JU.mjs} +2 -0
- package/dist/{chunk-YHED4XVA.mjs → chunk-BWWRORXM.mjs} +2 -1
- package/dist/{chunk-D22AALLE.mjs → chunk-H7ZADF2Z.mjs} +2 -0
- package/dist/{chunk-PPOMNW7H.mjs → chunk-M76J5JHP.mjs} +2 -1
- package/dist/{chunk-QDNT7A7D.mjs → chunk-NKJ56AFS.mjs} +2 -1
- package/dist/{chunk-O3Y6K3YE.mjs → chunk-PEV5RH2A.mjs} +2 -0
- package/dist/{chunk-77PYXYCP.mjs → chunk-SFXAOGDN.mjs} +2 -1
- package/dist/{chunk-YVH4TWNC.mjs → chunk-TWCAKKEP.mjs} +2 -1
- package/dist/{chunk-3QADSQDZ.mjs → chunk-ZNAH5EOY.mjs} +2 -1
- package/dist/{chunk-TZT5E6NW.mjs → chunk-ZPUA6IU3.mjs} +2 -1
- package/dist/codeBlock/index.js +1 -0
- package/dist/codeBlock/index.js.map +1 -1
- package/dist/codeBlock/index.mjs +1 -0
- package/dist/codeBlock/index.mjs.map +1 -1
- package/dist/collapsible/index.js +1 -0
- package/dist/collapsible/index.js.map +1 -1
- package/dist/collapsible/index.mjs +2 -0
- package/dist/collapsible/index.mjs.map +1 -1
- package/dist/colorPicker/index.js +1 -0
- package/dist/colorPicker/index.js.map +1 -1
- package/dist/colorPicker/index.mjs +2 -0
- package/dist/colorPicker/index.mjs.map +1 -1
- package/dist/combobox/index.js +1 -0
- package/dist/combobox/index.js.map +1 -1
- package/dist/combobox/index.mjs +2 -0
- package/dist/combobox/index.mjs.map +1 -1
- package/dist/command/index.js +1 -0
- package/dist/command/index.js.map +1 -1
- package/dist/command/index.mjs +2 -0
- package/dist/command/index.mjs.map +1 -1
- package/dist/copyrights/index.js +1 -0
- package/dist/copyrights/index.js.map +1 -1
- package/dist/copyrights/index.mjs +2 -0
- package/dist/copyrights/index.mjs.map +1 -1
- package/dist/count/index.js +1 -0
- package/dist/count/index.js.map +1 -1
- package/dist/count/index.mjs +2 -0
- package/dist/count/index.mjs.map +1 -1
- package/dist/dataTable/index.js +1 -0
- package/dist/dataTable/index.js.map +1 -1
- package/dist/dataTable/index.mjs +2 -0
- package/dist/dataTable/index.mjs.map +1 -1
- package/dist/destroyableCard/index.js +1 -0
- package/dist/destroyableCard/index.js.map +1 -1
- package/dist/destroyableCard/index.mjs +2 -0
- package/dist/destroyableCard/index.mjs.map +1 -1
- package/dist/dialog/index.js +1 -0
- package/dist/dialog/index.js.map +1 -1
- package/dist/dialog/index.mjs +2 -0
- package/dist/dialog/index.mjs.map +1 -1
- package/dist/docsLayout/index.js +1 -0
- package/dist/docsLayout/index.js.map +1 -1
- package/dist/docsLayout/index.mjs +2 -0
- package/dist/docsLayout/index.mjs.map +1 -1
- package/dist/docsSidebar/index.js +1 -0
- package/dist/docsSidebar/index.js.map +1 -1
- package/dist/docsSidebar/index.mjs +2 -0
- package/dist/docsSidebar/index.mjs.map +1 -1
- package/dist/dropdownMenu/index.js +1 -0
- package/dist/dropdownMenu/index.js.map +1 -1
- package/dist/dropdownMenu/index.mjs +2 -0
- package/dist/dropdownMenu/index.mjs.map +1 -1
- package/dist/elements/index.js +1 -0
- package/dist/elements/index.mjs +6 -5
- package/dist/fileDropzone/index.js +1 -0
- package/dist/fileDropzone/index.js.map +1 -1
- package/dist/fileDropzone/index.mjs +2 -0
- package/dist/fileDropzone/index.mjs.map +1 -1
- package/dist/fileUploader/index.js +1 -0
- package/dist/fileUploader/index.js.map +1 -1
- package/dist/fileUploader/index.mjs +2 -0
- package/dist/fileUploader/index.mjs.map +1 -1
- package/dist/glow/index.js +1 -0
- package/dist/glow/index.js.map +1 -1
- package/dist/glow/index.mjs +2 -0
- package/dist/glow/index.mjs.map +1 -1
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/index.mjs +4 -3
- package/dist/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +27 -14
- package/dist/index.mjs +27 -14
- package/dist/input/index.js +1 -0
- package/dist/input/index.js.map +1 -1
- package/dist/input/index.mjs +2 -0
- package/dist/input/index.mjs.map +1 -1
- package/dist/interfaceSettings/index.js +1 -0
- package/dist/interfaceSettings/index.js.map +1 -1
- package/dist/interfaceSettings/index.mjs +2 -0
- package/dist/interfaceSettings/index.mjs.map +1 -1
- package/dist/label/index.js +1 -0
- package/dist/label/index.js.map +1 -1
- package/dist/label/index.mjs +2 -0
- package/dist/label/index.mjs.map +1 -1
- package/dist/layout/index.js +1 -0
- package/dist/layout/index.mjs +5 -4
- package/dist/loading/index.js +1 -0
- package/dist/loading/index.js.map +1 -1
- package/dist/loading/index.mjs +2 -0
- package/dist/loading/index.mjs.map +1 -1
- package/dist/logos/index.js +1 -0
- package/dist/logos/index.js.map +1 -1
- package/dist/logos/index.mjs +2 -0
- package/dist/logos/index.mjs.map +1 -1
- package/dist/navbar/index.js +1 -0
- package/dist/navbar/index.js.map +1 -1
- package/dist/navbar/index.mjs +2 -0
- package/dist/navbar/index.mjs.map +1 -1
- package/dist/navigationMenu/index.js +1 -0
- package/dist/navigationMenu/index.js.map +1 -1
- package/dist/navigationMenu/index.mjs +2 -0
- package/dist/navigationMenu/index.mjs.map +1 -1
- package/dist/pagination/index.js +1 -0
- package/dist/pagination/index.js.map +1 -1
- package/dist/pagination/index.mjs +2 -0
- package/dist/pagination/index.mjs.map +1 -1
- package/dist/passwordInput/index.js +1 -0
- package/dist/passwordInput/index.js.map +1 -1
- package/dist/passwordInput/index.mjs +2 -0
- package/dist/passwordInput/index.mjs.map +1 -1
- package/dist/phoneInput/index.js +1 -0
- package/dist/phoneInput/index.js.map +1 -1
- package/dist/phoneInput/index.mjs +2 -0
- package/dist/phoneInput/index.mjs.map +1 -1
- package/dist/pinInput/index.js +1 -0
- package/dist/pinInput/index.js.map +1 -1
- package/dist/pinInput/index.mjs +2 -0
- package/dist/pinInput/index.mjs.map +1 -1
- package/dist/popover/index.js +1 -0
- package/dist/popover/index.js.map +1 -1
- package/dist/popover/index.mjs +2 -0
- package/dist/popover/index.mjs.map +1 -1
- package/dist/progress/index.js +1 -0
- package/dist/progress/index.js.map +1 -1
- package/dist/progress/index.mjs +2 -0
- package/dist/progress/index.mjs.map +1 -1
- package/dist/progressCircle/index.js +1 -0
- package/dist/progressCircle/index.js.map +1 -1
- package/dist/progressCircle/index.mjs +2 -0
- package/dist/progressCircle/index.mjs.map +1 -1
- package/dist/radio/index.js +1 -0
- package/dist/radio/index.js.map +1 -1
- package/dist/radio/index.mjs +2 -0
- package/dist/radio/index.mjs.map +1 -1
- package/dist/scrollArea/index.js +1 -0
- package/dist/scrollArea/index.js.map +1 -1
- package/dist/scrollArea/index.mjs +2 -0
- package/dist/scrollArea/index.mjs.map +1 -1
- package/dist/scrollIndicator/index.js +1 -0
- package/dist/scrollIndicator/index.js.map +1 -1
- package/dist/scrollIndicator/index.mjs +2 -0
- package/dist/scrollIndicator/index.mjs.map +1 -1
- package/dist/select/index.js +1 -0
- package/dist/select/index.js.map +1 -1
- package/dist/select/index.mjs +2 -0
- package/dist/select/index.mjs.map +1 -1
- package/dist/separator/index.js +1 -0
- package/dist/separator/index.js.map +1 -1
- package/dist/separator/index.mjs +2 -0
- package/dist/separator/index.mjs.map +1 -1
- package/dist/sheet/index.js +1 -0
- package/dist/sheet/index.js.map +1 -1
- package/dist/sheet/index.mjs +2 -0
- package/dist/sheet/index.mjs.map +1 -1
- package/dist/sidebar/index.js +1 -0
- package/dist/sidebar/index.js.map +1 -1
- package/dist/sidebar/index.mjs +2 -0
- package/dist/sidebar/index.mjs.map +1 -1
- package/dist/signature/index.js +1 -0
- package/dist/signature/index.js.map +1 -1
- package/dist/signature/index.mjs +2 -0
- package/dist/signature/index.mjs.map +1 -1
- package/dist/simpleTable/index.js +1 -0
- package/dist/simpleTable/index.js.map +1 -1
- package/dist/simpleTable/index.mjs +2 -0
- package/dist/simpleTable/index.mjs.map +1 -1
- package/dist/skeleton/index.js +1 -0
- package/dist/skeleton/index.js.map +1 -1
- package/dist/skeleton/index.mjs +2 -0
- package/dist/skeleton/index.mjs.map +1 -1
- package/dist/slider/index.js +1 -0
- package/dist/slider/index.js.map +1 -1
- package/dist/slider/index.mjs +2 -0
- package/dist/slider/index.mjs.map +1 -1
- package/dist/sortButton/index.js +1 -0
- package/dist/sortButton/index.js.map +1 -1
- package/dist/sortButton/index.mjs +2 -0
- package/dist/sortButton/index.mjs.map +1 -1
- package/dist/splitButton/index.js +1 -0
- package/dist/splitButton/index.js.map +1 -1
- package/dist/splitButton/index.mjs +2 -0
- package/dist/splitButton/index.mjs.map +1 -1
- package/dist/stats/index.js +1 -0
- package/dist/stats/index.js.map +1 -1
- package/dist/stats/index.mjs +2 -0
- package/dist/stats/index.mjs.map +1 -1
- package/dist/stopPropagationWrapper/index.js +1 -0
- package/dist/stopPropagationWrapper/index.js.map +1 -1
- package/dist/stopPropagationWrapper/index.mjs +2 -0
- package/dist/stopPropagationWrapper/index.mjs.map +1 -1
- package/dist/switch/index.js +1 -0
- package/dist/switch/index.js.map +1 -1
- package/dist/switch/index.mjs +2 -0
- package/dist/switch/index.mjs.map +1 -1
- package/dist/table/index.js +1 -0
- package/dist/table/index.js.map +1 -1
- package/dist/table/index.mjs +2 -0
- package/dist/table/index.mjs.map +1 -1
- package/dist/tabs/index.js +1 -0
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs +2 -0
- package/dist/tabs/index.mjs.map +1 -1
- package/dist/textarea/index.js +1 -0
- package/dist/textarea/index.js.map +1 -1
- package/dist/textarea/index.mjs +2 -0
- package/dist/textarea/index.mjs.map +1 -1
- package/dist/toast/index.js +1 -0
- package/dist/toast/index.js.map +1 -1
- package/dist/toast/index.mjs +2 -0
- package/dist/toast/index.mjs.map +1 -1
- package/dist/toaster/index.js +1 -0
- package/dist/toaster/index.js.map +1 -1
- package/dist/toaster/index.mjs +2 -0
- package/dist/toaster/index.mjs.map +1 -1
- package/dist/tooltip/index.js +1 -0
- package/dist/tooltip/index.js.map +1 -1
- package/dist/tooltip/index.mjs +2 -0
- package/dist/tooltip/index.mjs.map +1 -1
- package/dist/types/index.js +1 -0
- package/dist/types/index.mjs +1 -0
- package/package.json +11 -11
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/backToTop/BackToTop.tsx","../../util/index.ts","../../elements/button/Button.tsx","../../elements/loading/Loading.tsx"],"sourcesContent":["import React, { FC, RefObject, useState, useEffect, useRef } from \"react\";\n\nimport { cn } from \"@util/index\";\nimport { Button } from \"../button\";\n\ntype BackToTopTypes = {\n /** Horizontal padding relative to the attached corner */\n paddingX?: number;\n /** Vertical padding relative to the attached corner */\n paddingY?: number;\n /** Increase to the threshold of the scroll value that has to be passed for the button to appear */\n paddingThreshold?: number;\n corner?: \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\";\n anchor: RefObject<HTMLInputElement>;\n};\n\nexport const BackToTop: FC<BackToTopTypes> = ({ ...props }) => {\n const [visible, setVisible] = useState<boolean>(false);\n const [rect, _setRect] = useState<DOMRect | null>(null);\n const self = useRef<HTMLButtonElement>(null);\n const _rect = useRef(rect);\n const setRect = (data: any) => {\n _rect.current = data;\n _setRect(data);\n };\n\n const getCoords = () => {\n let anchor = props.anchor.current;\n if (anchor) {\n return [anchor.scrollTop, anchor.scrollLeft];\n }\n return [0, 0];\n };\n\n const onScroll = () => {\n let [scrollTop, scrollLeft] = getCoords();\n let rect = props.anchor.current?.getBoundingClientRect();\n if (rect) {\n setVisible(scrollTop >= rect.height + (props.paddingThreshold || 100));\n }\n };\n\n const backToTop = () => {\n if (props.anchor.current) {\n props.anchor.current.scrollTo({ top: 0, behavior: \"smooth\" });\n }\n };\n\n // FIXME: Observers and listeners run twice\n useEffect(() => {\n if (!props.anchor.current) return;\n\n props.anchor.current.addEventListener(\"scroll\", onScroll);\n\n // Listens to rect changes. Alternatives like ResizeObserver & IntersectionObserver fail to detect positional changes consistently\n let interval = setInterval(() => {\n if (!props.anchor.current) return;\n\n let newRect = props.anchor.current.getBoundingClientRect();\n if (_rect.current == null) return setRect(newRect);\n\n if (\n !(\n _rect.current.top == newRect.top &&\n _rect.current.left == newRect.left &&\n _rect.current.width == newRect.width &&\n _rect.current.height == newRect.height\n )\n ) {\n setRect(newRect);\n }\n }, 1);\n\n return () => {\n props.anchor.current?.removeEventListener(\"scroll\", onScroll);\n clearInterval(interval);\n };\n }, [onScroll, props.anchor]);\n\n const getStyles = () => {\n if (!props.anchor.current || !self.current) return {};\n\n let corner = props.corner || \"bottom-right\";\n let [vertical, horizontal] = corner.split(\"-\");\n\n let anchorRect = props.anchor.current.getBoundingClientRect();\n let selfRect = self.current?.getBoundingClientRect();\n\n let width = horizontal == \"right\" ? anchorRect.width - selfRect.width : 0;\n let height = vertical == \"bottom\" ? anchorRect.height - selfRect.height : 0;\n\n let style = {\n top:\n anchorRect.y +\n height +\n (vertical == \"bottom\" ? -1 : 1) * (props.paddingX || 10),\n left:\n anchorRect.x +\n width +\n (horizontal == \"right\" ? -1 : 1) * (props.paddingX || 25)\n };\n\n return style;\n };\n\n return (\n <Button\n className={cn(\n \"hawa-fixed hawa-cursor-pointer hawa-rounded hawa-transition-all\",\n visible\n ? \"hawa-pointer-events-all hawa-opacity-100\"\n : \"hawa-pointer-events-none hawa-opacity-0\"\n )}\n onClick={backToTop}\n style={{\n ...getStyles(),\n transitionProperty: \"opacity, background-color\"\n }}\n ref={self}\n size=\"icon\"\n >\n <svg\n className={cn(\n \"hawa-h-6 hawa-w-6 hawa-shrink-0 hawa-rotate-180 hawa-transition-all disabled:hawa-bg-gray-200\"\n )}\n aria-label=\"Arrow Icon\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"></path>\n </svg>\n </Button>\n );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import * as React from \"react\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@util/index\";\nimport { Loading } from \"../loading/Loading\";\n\nconst buttonVariants = cva(\n \"hawa-inline-flex hawa-items-center hawa-select-none hawa-rounded-md hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-colors focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50\",\n {\n variants: {\n variant: {\n default:\n \"hawa-bg-primary hawa-text-primary-foreground hover:hawa-bg-primary/90\",\n light: \"hawa-bg-primary/20 hawa-text-primary hover:hawa-bg-primary/40\",\n destructive:\n \"hawa-bg-destructive hawa-text-destructive-foreground hover:hawa-bg-destructive/90\",\n outline:\n \"hawa-border hawa-border-input hawa-bg-transparent hover:hawa-bg-accent hover:hawa-text-accent-foreground\",\n secondary:\n \"hawa-bg-secondary hawa-text-secondary-foreground hover:hawa-bg-secondary/80\",\n ghost: \"hover:hawa-bg-accent hover:hawa-text-accent-foreground\",\n link: \"hawa-text-primary hawa-underline-offset-4 hover:hawa-underline\",\n combobox: \"hawa-bg-background hawa-border\",\n neoBrutalism: \"neo-brutalism\"\n // \"hawa-cursor-pointer hawa-transition-all hawa-uppercase hawa-font-mono dark:hawa-bg-black hawa-font-bold hawa-py-2 hawa-px-4 hawa-rounded hawa-border-2 hawa-border-primary hawa-shadow-color-primary hawa-transition-[hawa-transform_50ms, hawa-box-shadow_50ms] active:hawa-translate-x-0.5 active:hawa-translate-y-0.5 active:hawa-shadow-color-primary-active shadow-color-primary active:shadow-color-primary-active\",\n },\n size: {\n default: \"hawa-h-10 hawa-px-4 hawa-py-2\",\n heightless: \"hawa-px-4 hawa-py-4\",\n xs: \"hawa-h-fit hawa-min-h-[25px] hawa-py-1 hawa-text-[10px] hawa-px-2 \",\n sm: \"hawa-h-9 hawa-text-[11px] hawa-rounded-md hawa-px-3\",\n lg: \"hawa-h-11 hawa-rounded-md hawa-px-8\",\n xl: \"hawa-h-14 hawa-rounded-md hawa-px-10\",\n icon: \"hawa-h-10 hawa-w-10\",\n smallIcon: \"hawa-h-7 hawa-w-7\"\n }\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\"\n }\n }\n);\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean;\n centered?: boolean;\n isLoading?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant,\n size,\n asChild = false,\n centered = true,\n isLoading,\n children,\n ...props\n },\n ref\n ) => {\n const Comp = \"button\";\n\n // Determine the color for the HawaLoading component based on the variant\n const loadingColor =\n variant === \"outline\" || variant === \"ghost\" || variant === \"neoBrutalism\"\n ? \"hawa-bg-primary\"\n : \"hawa-bg-primary-foreground\";\n\n return (\n <Comp\n className={cn(\n buttonVariants({ variant, size, className }),\n centered && \"hawa-justify-center\",\n // \"hawa-bg-red-500\"\n )}\n ref={ref}\n {...props}\n >\n {isLoading ? (\n <Loading\n design={\n size === \"icon\" || size === \"smallIcon\" ? \"spinner\" : \"dots-pulse\"\n }\n themeMode={variant === \"outline\" ? \"light\" : \"dark\"}\n color={loadingColor}\n size={size === \"sm\" || size === \"xs\" ? \"xs\" : \"button\"}\n />\n ) : (\n children\n )}\n </Comp>\n );\n }\n);\n\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","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 --primary global CSS variable*/\n color?: string;\n classNames?: {\n container?: string;\n track?: string;\n car?: string;\n };\n themeMode?: \"dark\" | \"light\";\n};\n\nexport const Loading: FC<LoadingTypes> = ({\n design = \"spinner\",\n size = \"normal\",\n themeMode = \"light\",\n classNames,\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 let progressSizes = {\n button: \"hawa-h-1\",\n xs: \"hawa-h-1 hawa-w-1\",\n sm: \"hawa-h-6 hawa-w-6\",\n normal: \"\",\n lg: \"hawa-h-6\",\n xl: \"hawa-h-10 hawa-w-64\"\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(\n \"hawa-flex hawa-flex-row hawa-gap-2\",\n classNames?.container\n )}\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(\n \"squircle-container\",\n sizeStyles[size],\n classNames?.container\n )}\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 x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 37 37\"\n height=\"37\"\n width=\"37\"\n preserveAspectRatio=\"xMidYMid meet\"\n className={cn(\n \"squircle-container\",\n sizeStyles[size],\n classNames?.container\n )}\n >\n <path\n className={cn(\"squircle-track\", classNames?.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={cn(\"squircle-car\", classNames?.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 (\n <div\n className={cn(\n \"progress-loading after:hawa-rounded hawa-rounded\",\n progressSizes[size],\n classNames?.container\n )}\n ></div>\n );\n case \"orbit\":\n return (\n <div className={cn(\"orbit-container\", classNames?.container)}></div>\n );\n\n default:\n return (\n <svg\n viewBox=\"0 0 40 40\"\n height=\"40\"\n width=\"40\"\n className={cn(\n \"circle-container\",\n sizeStyles[size],\n classNames?.container\n )}\n >\n <circle\n className={cn(\n \"circle-track\",\n {\n \"hawa-stroke-primary-foreground\": themeMode === \"dark\",\n \"hawa-stroke-primary\": themeMode === \"light\"\n },\n classNames?.track\n )}\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n fill=\"none\"\n strokeWidth=\"5px\"\n pathLength=\"100\"\n />\n <circle\n className={cn(\n \"circle-car\",\n {\n \"hawa-stroke-primary-foreground\": themeMode === \"dark\",\n \"hawa-stroke-primary\": themeMode === \"light\"\n },\n classNames?.car\n )}\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n fill=\"none\"\n pathLength=\"100\"\n strokeWidth=\"5px\"\n />\n </svg>\n );\n }\n};\n"],"mappings":"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","names":["React","React","rect","React"]}
|
1
|
+
{"version":3,"sources":["../../elements/backToTop/BackToTop.tsx","../../util/index.ts","../../elements/button/Button.tsx","../../elements/loading/Loading.tsx"],"sourcesContent":["import React, { FC, RefObject, useState, useEffect, useRef } from \"react\";\n\nimport { cn } from \"@util/index\";\nimport { Button } from \"../button\";\n\ntype BackToTopTypes = {\n /** Horizontal padding relative to the attached corner */\n paddingX?: number;\n /** Vertical padding relative to the attached corner */\n paddingY?: number;\n /** Increase to the threshold of the scroll value that has to be passed for the button to appear */\n paddingThreshold?: number;\n corner?: \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\";\n anchor: RefObject<HTMLInputElement>;\n};\n\nexport const BackToTop: FC<BackToTopTypes> = ({ ...props }) => {\n const [visible, setVisible] = useState<boolean>(false);\n const [rect, _setRect] = useState<DOMRect | null>(null);\n const self = useRef<HTMLButtonElement>(null);\n const _rect = useRef(rect);\n const setRect = (data: any) => {\n _rect.current = data;\n _setRect(data);\n };\n\n const getCoords = () => {\n let anchor = props.anchor.current;\n if (anchor) {\n return [anchor.scrollTop, anchor.scrollLeft];\n }\n return [0, 0];\n };\n\n const onScroll = () => {\n let [scrollTop, scrollLeft] = getCoords();\n let rect = props.anchor.current?.getBoundingClientRect();\n if (rect) {\n setVisible(scrollTop >= rect.height + (props.paddingThreshold || 100));\n }\n };\n\n const backToTop = () => {\n if (props.anchor.current) {\n props.anchor.current.scrollTo({ top: 0, behavior: \"smooth\" });\n }\n };\n\n // FIXME: Observers and listeners run twice\n useEffect(() => {\n if (!props.anchor.current) return;\n\n props.anchor.current.addEventListener(\"scroll\", onScroll);\n\n // Listens to rect changes. Alternatives like ResizeObserver & IntersectionObserver fail to detect positional changes consistently\n let interval = setInterval(() => {\n if (!props.anchor.current) return;\n\n let newRect = props.anchor.current.getBoundingClientRect();\n if (_rect.current == null) return setRect(newRect);\n\n if (\n !(\n _rect.current.top == newRect.top &&\n _rect.current.left == newRect.left &&\n _rect.current.width == newRect.width &&\n _rect.current.height == newRect.height\n )\n ) {\n setRect(newRect);\n }\n }, 1);\n\n return () => {\n props.anchor.current?.removeEventListener(\"scroll\", onScroll);\n clearInterval(interval);\n };\n }, [onScroll, props.anchor]);\n\n const getStyles = () => {\n if (!props.anchor.current || !self.current) return {};\n\n let corner = props.corner || \"bottom-right\";\n let [vertical, horizontal] = corner.split(\"-\");\n\n let anchorRect = props.anchor.current.getBoundingClientRect();\n let selfRect = self.current?.getBoundingClientRect();\n\n let width = horizontal == \"right\" ? anchorRect.width - selfRect.width : 0;\n let height = vertical == \"bottom\" ? anchorRect.height - selfRect.height : 0;\n\n let style = {\n top:\n anchorRect.y +\n height +\n (vertical == \"bottom\" ? -1 : 1) * (props.paddingX || 10),\n left:\n anchorRect.x +\n width +\n (horizontal == \"right\" ? -1 : 1) * (props.paddingX || 25)\n };\n\n return style;\n };\n\n return (\n <Button\n className={cn(\n \"hawa-fixed hawa-cursor-pointer hawa-rounded hawa-transition-all\",\n visible\n ? \"hawa-pointer-events-all hawa-opacity-100\"\n : \"hawa-pointer-events-none hawa-opacity-0\"\n )}\n onClick={backToTop}\n style={{\n ...getStyles(),\n transitionProperty: \"opacity, background-color\"\n }}\n ref={self}\n size=\"icon\"\n >\n <svg\n className={cn(\n \"hawa-h-6 hawa-w-6 hawa-shrink-0 hawa-rotate-180 hawa-transition-all disabled:hawa-bg-gray-200\"\n )}\n aria-label=\"Arrow Icon\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"></path>\n </svg>\n </Button>\n );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import * as React from \"react\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@util/index\";\nimport { Loading } from \"../loading/Loading\";\n\nconst buttonVariants = cva(\n \"hawa-inline-flex hawa-items-center hawa-select-none hawa-rounded-md hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-colors focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50\",\n {\n variants: {\n variant: {\n default:\n \"hawa-bg-primary hawa-text-primary-foreground hover:hawa-bg-primary/90\",\n light: \"hawa-bg-primary/20 hawa-text-primary hover:hawa-bg-primary/40\",\n destructive:\n \"hawa-bg-destructive hawa-text-destructive-foreground hover:hawa-bg-destructive/90\",\n outline:\n \"hawa-border hawa-border-input hawa-bg-transparent hover:hawa-bg-accent hover:hawa-text-accent-foreground\",\n secondary:\n \"hawa-bg-secondary hawa-text-secondary-foreground hover:hawa-bg-secondary/80\",\n ghost: \"hover:hawa-bg-accent hover:hawa-text-accent-foreground\",\n link: \"hawa-text-primary hawa-underline-offset-4 hover:hawa-underline\",\n combobox: \"hawa-bg-background hawa-border\",\n neoBrutalism: \"neo-brutalism\"\n // \"hawa-cursor-pointer hawa-transition-all hawa-uppercase hawa-font-mono dark:hawa-bg-black hawa-font-bold hawa-py-2 hawa-px-4 hawa-rounded hawa-border-2 hawa-border-primary hawa-shadow-color-primary hawa-transition-[hawa-transform_50ms, hawa-box-shadow_50ms] active:hawa-translate-x-0.5 active:hawa-translate-y-0.5 active:hawa-shadow-color-primary-active shadow-color-primary active:shadow-color-primary-active\",\n },\n size: {\n default: \"hawa-h-10 hawa-px-4 hawa-py-2\",\n heightless: \"hawa-px-4 hawa-py-4\",\n xs: \"hawa-h-fit hawa-min-h-[25px] hawa-py-1 hawa-text-[10px] hawa-px-2 \",\n sm: \"hawa-h-9 hawa-text-[11px] hawa-rounded-md hawa-px-3\",\n lg: \"hawa-h-11 hawa-rounded-md hawa-px-8\",\n xl: \"hawa-h-14 hawa-rounded-md hawa-px-10\",\n icon: \"hawa-h-10 hawa-w-10\",\n smallIcon: \"hawa-h-7 hawa-w-7\"\n }\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\"\n }\n }\n);\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean;\n centered?: boolean;\n isLoading?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant,\n size,\n asChild = false,\n centered = true,\n isLoading,\n children,\n ...props\n },\n ref\n ) => {\n const Comp = \"button\";\n\n // Determine the color for the HawaLoading component based on the variant\n const loadingColor =\n variant === \"outline\" || variant === \"ghost\" || variant === \"neoBrutalism\"\n ? \"hawa-bg-primary\"\n : \"hawa-bg-primary-foreground\";\n\n return (\n <Comp\n className={cn(\n buttonVariants({ variant, size, className }),\n centered && \"hawa-justify-center\",\n // \"hawa-bg-red-500\"\n )}\n ref={ref}\n {...props}\n >\n {isLoading ? (\n <Loading\n design={\n size === \"icon\" || size === \"smallIcon\" ? \"spinner\" : \"dots-pulse\"\n }\n themeMode={variant === \"outline\" ? \"light\" : \"dark\"}\n color={loadingColor}\n size={size === \"sm\" || size === \"xs\" ? \"xs\" : \"button\"}\n />\n ) : (\n children\n )}\n </Comp>\n );\n }\n);\n\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","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 --primary global CSS variable*/\n color?: string;\n classNames?: {\n container?: string;\n track?: string;\n car?: string;\n };\n themeMode?: \"dark\" | \"light\";\n};\n\nexport const Loading: FC<LoadingTypes> = ({\n design = \"spinner\",\n size = \"normal\",\n themeMode = \"light\",\n classNames,\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 let progressSizes = {\n button: \"hawa-h-1\",\n xs: \"hawa-h-1 hawa-w-1\",\n sm: \"hawa-h-6 hawa-w-6\",\n normal: \"\",\n lg: \"hawa-h-6\",\n xl: \"hawa-h-10 hawa-w-64\"\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(\n \"hawa-flex hawa-flex-row hawa-gap-2\",\n classNames?.container\n )}\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(\n \"squircle-container\",\n sizeStyles[size],\n classNames?.container\n )}\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 x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 37 37\"\n height=\"37\"\n width=\"37\"\n preserveAspectRatio=\"xMidYMid meet\"\n className={cn(\n \"squircle-container\",\n sizeStyles[size],\n classNames?.container\n )}\n >\n <path\n className={cn(\"squircle-track\", classNames?.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={cn(\"squircle-car\", classNames?.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 (\n <div\n className={cn(\n \"progress-loading after:hawa-rounded hawa-rounded\",\n progressSizes[size],\n classNames?.container\n )}\n ></div>\n );\n case \"orbit\":\n return (\n <div className={cn(\"orbit-container\", classNames?.container)}></div>\n );\n\n default:\n return (\n <svg\n viewBox=\"0 0 40 40\"\n height=\"40\"\n width=\"40\"\n className={cn(\n \"circle-container\",\n sizeStyles[size],\n classNames?.container\n )}\n >\n <circle\n className={cn(\n \"circle-track\",\n {\n \"hawa-stroke-primary-foreground\": themeMode === \"dark\",\n \"hawa-stroke-primary\": themeMode === \"light\"\n },\n classNames?.track\n )}\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n fill=\"none\"\n strokeWidth=\"5px\"\n pathLength=\"100\"\n />\n <circle\n className={cn(\n \"circle-car\",\n {\n \"hawa-stroke-primary-foreground\": themeMode === \"dark\",\n \"hawa-stroke-primary\": themeMode === \"light\"\n },\n classNames?.car\n )}\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n fill=\"none\"\n pathLength=\"100\"\n strokeWidth=\"5px\"\n />\n </svg>\n );\n }\n};\n"],"mappings":"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","names":["React","React","rect","React"]}
|
package/dist/badge/index.js
CHANGED
package/dist/badge/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/badge/index.ts","../../elements/badge/Badge.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./Badge\";\n","import React, { useEffect, useState, useRef, RefObject, FC } from \"react\";\n\nimport { cn } from \"@util/index\";\n\ntype BadgeTypes = {\n position: \"right\" | \"left\";\n anchor: RefObject<HTMLElement>;\n size?: \"small\" | \"default\" | \"large\";\n text?: string | number;\n className?: string;\n};\n\nexport const Badge: FC<BadgeTypes> = ({\n anchor,\n position = \"right\",\n size = \"default\",\n text,\n className\n}) => {\n const [badgePosition, setBadgePosition] = useState<any>(null);\n const indicatorRef = useRef(null);\n const sizeStyles = {\n small: { top: 4, left: 6, right: 7, classes: \"hawa-w-3 hawa-h-3\" },\n default: { top: 4, left: 7, right: 5, classes: \"hawa-w-3 hawa-h-3\" },\n large: { top: 6, left: 12, right: 7, classes: \"hawa-w-6 hawa-h-6\" }\n };\n useEffect(() => {\n const handlePositioning = () => {\n if (anchor.current && indicatorRef.current) {\n const rect = anchor.current.getBoundingClientRect();\n const parentRect = (\n indicatorRef.current as HTMLElement\n ).parentElement?.getBoundingClientRect();\n const style = window.getComputedStyle(anchor.current);\n const marginTop = parseFloat(style.marginTop.replace(\"px\", \"\"));\n const marginRight = parseFloat(style.marginRight.replace(\"px\", \"\"));\n\n if (parentRect) {\n setBadgePosition({\n top: rect.top - parentRect.top - marginTop - sizeStyles[size].top,\n left:\n position === \"right\"\n ? parentRect.right - parentRect.left - sizeStyles[size].left\n : rect.right -\n parentRect.left -\n parentRect.width -\n marginRight -\n sizeStyles[size].right\n });\n }\n }\n };\n\n handlePositioning();\n window.addEventListener(\"resize\", handlePositioning);\n return () => {\n window.removeEventListener(\"resize\", handlePositioning);\n };\n }, [anchor]);\n\n return (\n <div ref={indicatorRef} className={cn(\"hawa-relative\", className)}>\n {badgePosition && (\n <div\n style={{\n position: \"absolute\",\n top: badgePosition?.top,\n left: badgePosition?.left\n }}\n className={cn(\n \"hawa-origin-center hawa-rounded-full hawa-bg-red-500 \",\n sizeStyles[size].classes,\n \"hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-text-[9px] hawa-text-white\"\n )}\n >\n {size === \"large\" && text && text}\n </div>\n )}\n </div>\n );\n};\n\nexport const BadgedComponent = ({\n children,\n className,\n hideBadge,\n position,\n size,\n text\n}: any) => {\n const ref = useRef(null);\n\n return (\n <div className={cn(\"hawa-relative hawa-w-fit\", className)} ref={ref}>\n {!hideBadge && (\n <Badge\n size={size}\n text={text}\n position={position}\n anchor={ref}\n className=\"hawa-z-10\"\n />\n )}\n {children}\n </div>\n );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":"
|
1
|
+
{"version":3,"sources":["../../elements/badge/index.ts","../../elements/badge/Badge.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./Badge\";\n","import React, { useEffect, useState, useRef, RefObject, FC } from \"react\";\n\nimport { cn } from \"@util/index\";\n\ntype BadgeTypes = {\n position: \"right\" | \"left\";\n anchor: RefObject<HTMLElement>;\n size?: \"small\" | \"default\" | \"large\";\n text?: string | number;\n className?: string;\n};\n\nexport const Badge: FC<BadgeTypes> = ({\n anchor,\n position = \"right\",\n size = \"default\",\n text,\n className\n}) => {\n const [badgePosition, setBadgePosition] = useState<any>(null);\n const indicatorRef = useRef(null);\n const sizeStyles = {\n small: { top: 4, left: 6, right: 7, classes: \"hawa-w-3 hawa-h-3\" },\n default: { top: 4, left: 7, right: 5, classes: \"hawa-w-3 hawa-h-3\" },\n large: { top: 6, left: 12, right: 7, classes: \"hawa-w-6 hawa-h-6\" }\n };\n useEffect(() => {\n const handlePositioning = () => {\n if (anchor.current && indicatorRef.current) {\n const rect = anchor.current.getBoundingClientRect();\n const parentRect = (\n indicatorRef.current as HTMLElement\n ).parentElement?.getBoundingClientRect();\n const style = window.getComputedStyle(anchor.current);\n const marginTop = parseFloat(style.marginTop.replace(\"px\", \"\"));\n const marginRight = parseFloat(style.marginRight.replace(\"px\", \"\"));\n\n if (parentRect) {\n setBadgePosition({\n top: rect.top - parentRect.top - marginTop - sizeStyles[size].top,\n left:\n position === \"right\"\n ? parentRect.right - parentRect.left - sizeStyles[size].left\n : rect.right -\n parentRect.left -\n parentRect.width -\n marginRight -\n sizeStyles[size].right\n });\n }\n }\n };\n\n handlePositioning();\n window.addEventListener(\"resize\", handlePositioning);\n return () => {\n window.removeEventListener(\"resize\", handlePositioning);\n };\n }, [anchor]);\n\n return (\n <div ref={indicatorRef} className={cn(\"hawa-relative\", className)}>\n {badgePosition && (\n <div\n style={{\n position: \"absolute\",\n top: badgePosition?.top,\n left: badgePosition?.left\n }}\n className={cn(\n \"hawa-origin-center hawa-rounded-full hawa-bg-red-500 \",\n sizeStyles[size].classes,\n \"hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-text-[9px] hawa-text-white\"\n )}\n >\n {size === \"large\" && text && text}\n </div>\n )}\n </div>\n );\n};\n\nexport const BadgedComponent = ({\n children,\n className,\n hideBadge,\n position,\n size,\n text\n}: any) => {\n const ref = useRef(null);\n\n return (\n <div className={cn(\"hawa-relative hawa-w-fit\", className)} ref={ref}>\n {!hideBadge && (\n <Badge\n size={size}\n text={text}\n position={position}\n anchor={ref}\n className=\"hawa-z-10\"\n />\n )}\n {children}\n </div>\n );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkE;;;ACAlE,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADOO,IAAM,QAAwB,CAAC;AAAA,EACpC;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAc,IAAI;AAC5D,QAAM,mBAAe,qBAAO,IAAI;AAChC,QAAM,aAAa;AAAA,IACjB,OAAO,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,oBAAoB;AAAA,IACjE,SAAS,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,oBAAoB;AAAA,IACnE,OAAO,EAAE,KAAK,GAAG,MAAM,IAAI,OAAO,GAAG,SAAS,oBAAoB;AAAA,EACpE;AACA,8BAAU,MAAM;AACd,UAAM,oBAAoB,MAAM;AA3BpC;AA4BM,UAAI,OAAO,WAAW,aAAa,SAAS;AAC1C,cAAM,OAAO,OAAO,QAAQ,sBAAsB;AAClD,cAAM,cACJ,kBAAa,QACb,kBADA,mBACe;AACjB,cAAM,QAAQ,OAAO,iBAAiB,OAAO,OAAO;AACpD,cAAM,YAAY,WAAW,MAAM,UAAU,QAAQ,MAAM,EAAE,CAAC;AAC9D,cAAM,cAAc,WAAW,MAAM,YAAY,QAAQ,MAAM,EAAE,CAAC;AAElE,YAAI,YAAY;AACd,2BAAiB;AAAA,YACf,KAAK,KAAK,MAAM,WAAW,MAAM,YAAY,WAAW,IAAI,EAAE;AAAA,YAC9D,MACE,aAAa,UACT,WAAW,QAAQ,WAAW,OAAO,WAAW,IAAI,EAAE,OACtD,KAAK,QACL,WAAW,OACX,WAAW,QACX,cACA,WAAW,IAAI,EAAE;AAAA,UACzB,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAEA,sBAAkB;AAClB,WAAO,iBAAiB,UAAU,iBAAiB;AACnD,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,iBAAiB;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,6BAAAA,QAAA,cAAC,SAAI,KAAK,cAAc,WAAW,GAAG,iBAAiB,SAAS,KAC7D,iBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,UAAU;AAAA,QACV,KAAK,+CAAe;AAAA,QACpB,MAAM,+CAAe;AAAA,MACvB;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,WAAW,IAAI,EAAE;AAAA,QACjB;AAAA,MACF;AAAA;AAAA,IAEC,SAAS,WAAW,QAAQ;AAAA,EAC/B,CAEJ;AAEJ;AAEO,IAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAW;AACT,QAAM,UAAM,qBAAO,IAAI;AAEvB,SACE,6BAAAA,QAAA,cAAC,SAAI,WAAW,GAAG,4BAA4B,SAAS,GAAG,OACxD,CAAC,aACA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAU;AAAA;AAAA,EACZ,GAED,QACH;AAEJ;","names":["React"]}
|
package/dist/badge/index.mjs
CHANGED
package/dist/badge/index.mjs.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/badge/Badge.tsx","../../util/index.ts"],"sourcesContent":["import React, { useEffect, useState, useRef, RefObject, FC } from \"react\";\n\nimport { cn } from \"@util/index\";\n\ntype BadgeTypes = {\n position: \"right\" | \"left\";\n anchor: RefObject<HTMLElement>;\n size?: \"small\" | \"default\" | \"large\";\n text?: string | number;\n className?: string;\n};\n\nexport const Badge: FC<BadgeTypes> = ({\n anchor,\n position = \"right\",\n size = \"default\",\n text,\n className\n}) => {\n const [badgePosition, setBadgePosition] = useState<any>(null);\n const indicatorRef = useRef(null);\n const sizeStyles = {\n small: { top: 4, left: 6, right: 7, classes: \"hawa-w-3 hawa-h-3\" },\n default: { top: 4, left: 7, right: 5, classes: \"hawa-w-3 hawa-h-3\" },\n large: { top: 6, left: 12, right: 7, classes: \"hawa-w-6 hawa-h-6\" }\n };\n useEffect(() => {\n const handlePositioning = () => {\n if (anchor.current && indicatorRef.current) {\n const rect = anchor.current.getBoundingClientRect();\n const parentRect = (\n indicatorRef.current as HTMLElement\n ).parentElement?.getBoundingClientRect();\n const style = window.getComputedStyle(anchor.current);\n const marginTop = parseFloat(style.marginTop.replace(\"px\", \"\"));\n const marginRight = parseFloat(style.marginRight.replace(\"px\", \"\"));\n\n if (parentRect) {\n setBadgePosition({\n top: rect.top - parentRect.top - marginTop - sizeStyles[size].top,\n left:\n position === \"right\"\n ? parentRect.right - parentRect.left - sizeStyles[size].left\n : rect.right -\n parentRect.left -\n parentRect.width -\n marginRight -\n sizeStyles[size].right\n });\n }\n }\n };\n\n handlePositioning();\n window.addEventListener(\"resize\", handlePositioning);\n return () => {\n window.removeEventListener(\"resize\", handlePositioning);\n };\n }, [anchor]);\n\n return (\n <div ref={indicatorRef} className={cn(\"hawa-relative\", className)}>\n {badgePosition && (\n <div\n style={{\n position: \"absolute\",\n top: badgePosition?.top,\n left: badgePosition?.left\n }}\n className={cn(\n \"hawa-origin-center hawa-rounded-full hawa-bg-red-500 \",\n sizeStyles[size].classes,\n \"hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-text-[9px] hawa-text-white\"\n )}\n >\n {size === \"large\" && text && text}\n </div>\n )}\n </div>\n );\n};\n\nexport const BadgedComponent = ({\n children,\n className,\n hideBadge,\n position,\n size,\n text\n}: any) => {\n const ref = useRef(null);\n\n return (\n <div className={cn(\"hawa-relative hawa-w-fit\", className)} ref={ref}>\n {!hideBadge && (\n <Badge\n size={size}\n text={text}\n position={position}\n anchor={ref}\n className=\"hawa-z-10\"\n />\n )}\n {children}\n </div>\n );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":"
|
1
|
+
{"version":3,"sources":["../../elements/badge/Badge.tsx","../../util/index.ts"],"sourcesContent":["import React, { useEffect, useState, useRef, RefObject, FC } from \"react\";\n\nimport { cn } from \"@util/index\";\n\ntype BadgeTypes = {\n position: \"right\" | \"left\";\n anchor: RefObject<HTMLElement>;\n size?: \"small\" | \"default\" | \"large\";\n text?: string | number;\n className?: string;\n};\n\nexport const Badge: FC<BadgeTypes> = ({\n anchor,\n position = \"right\",\n size = \"default\",\n text,\n className\n}) => {\n const [badgePosition, setBadgePosition] = useState<any>(null);\n const indicatorRef = useRef(null);\n const sizeStyles = {\n small: { top: 4, left: 6, right: 7, classes: \"hawa-w-3 hawa-h-3\" },\n default: { top: 4, left: 7, right: 5, classes: \"hawa-w-3 hawa-h-3\" },\n large: { top: 6, left: 12, right: 7, classes: \"hawa-w-6 hawa-h-6\" }\n };\n useEffect(() => {\n const handlePositioning = () => {\n if (anchor.current && indicatorRef.current) {\n const rect = anchor.current.getBoundingClientRect();\n const parentRect = (\n indicatorRef.current as HTMLElement\n ).parentElement?.getBoundingClientRect();\n const style = window.getComputedStyle(anchor.current);\n const marginTop = parseFloat(style.marginTop.replace(\"px\", \"\"));\n const marginRight = parseFloat(style.marginRight.replace(\"px\", \"\"));\n\n if (parentRect) {\n setBadgePosition({\n top: rect.top - parentRect.top - marginTop - sizeStyles[size].top,\n left:\n position === \"right\"\n ? parentRect.right - parentRect.left - sizeStyles[size].left\n : rect.right -\n parentRect.left -\n parentRect.width -\n marginRight -\n sizeStyles[size].right\n });\n }\n }\n };\n\n handlePositioning();\n window.addEventListener(\"resize\", handlePositioning);\n return () => {\n window.removeEventListener(\"resize\", handlePositioning);\n };\n }, [anchor]);\n\n return (\n <div ref={indicatorRef} className={cn(\"hawa-relative\", className)}>\n {badgePosition && (\n <div\n style={{\n position: \"absolute\",\n top: badgePosition?.top,\n left: badgePosition?.left\n }}\n className={cn(\n \"hawa-origin-center hawa-rounded-full hawa-bg-red-500 \",\n sizeStyles[size].classes,\n \"hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-text-[9px] hawa-text-white\"\n )}\n >\n {size === \"large\" && text && text}\n </div>\n )}\n </div>\n );\n};\n\nexport const BadgedComponent = ({\n children,\n className,\n hideBadge,\n position,\n size,\n text\n}: any) => {\n const ref = useRef(null);\n\n return (\n <div className={cn(\"hawa-relative hawa-w-fit\", className)} ref={ref}>\n {!hideBadge && (\n <Badge\n size={size}\n text={text}\n position={position}\n anchor={ref}\n className=\"hawa-z-10\"\n />\n )}\n {children}\n </div>\n );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":";;;AAAA,OAAO,SAAS,WAAW,UAAU,cAA6B;;;ACAlE,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADOO,IAAM,QAAwB,CAAC;AAAA,EACpC;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAc,IAAI;AAC5D,QAAM,eAAe,OAAO,IAAI;AAChC,QAAM,aAAa;AAAA,IACjB,OAAO,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,oBAAoB;AAAA,IACjE,SAAS,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,oBAAoB;AAAA,IACnE,OAAO,EAAE,KAAK,GAAG,MAAM,IAAI,OAAO,GAAG,SAAS,oBAAoB;AAAA,EACpE;AACA,YAAU,MAAM;AACd,UAAM,oBAAoB,MAAM;AA3BpC;AA4BM,UAAI,OAAO,WAAW,aAAa,SAAS;AAC1C,cAAM,OAAO,OAAO,QAAQ,sBAAsB;AAClD,cAAM,cACJ,kBAAa,QACb,kBADA,mBACe;AACjB,cAAM,QAAQ,OAAO,iBAAiB,OAAO,OAAO;AACpD,cAAM,YAAY,WAAW,MAAM,UAAU,QAAQ,MAAM,EAAE,CAAC;AAC9D,cAAM,cAAc,WAAW,MAAM,YAAY,QAAQ,MAAM,EAAE,CAAC;AAElE,YAAI,YAAY;AACd,2BAAiB;AAAA,YACf,KAAK,KAAK,MAAM,WAAW,MAAM,YAAY,WAAW,IAAI,EAAE;AAAA,YAC9D,MACE,aAAa,UACT,WAAW,QAAQ,WAAW,OAAO,WAAW,IAAI,EAAE,OACtD,KAAK,QACL,WAAW,OACX,WAAW,QACX,cACA,WAAW,IAAI,EAAE;AAAA,UACzB,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAEA,sBAAkB;AAClB,WAAO,iBAAiB,UAAU,iBAAiB;AACnD,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,iBAAiB;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,oCAAC,SAAI,KAAK,cAAc,WAAW,GAAG,iBAAiB,SAAS,KAC7D,iBACC;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,UAAU;AAAA,QACV,KAAK,+CAAe;AAAA,QACpB,MAAM,+CAAe;AAAA,MACvB;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,WAAW,IAAI,EAAE;AAAA,QACjB;AAAA,MACF;AAAA;AAAA,IAEC,SAAS,WAAW,QAAQ;AAAA,EAC/B,CAEJ;AAEJ;AAEO,IAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAW;AACT,QAAM,MAAM,OAAO,IAAI;AAEvB,SACE,oCAAC,SAAI,WAAW,GAAG,4BAA4B,SAAS,GAAG,OACxD,CAAC,aACA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAU;AAAA;AAAA,EACZ,GAED,QACH;AAEJ;","names":[]}
|
@@ -18,7 +18,7 @@ type LoginFormTypes = {
|
|
18
18
|
/** Login identifier type user will use to log in. */
|
19
19
|
loginType?: "email" | "username" | "phone" | "link";
|
20
20
|
/** If true, the reset password option is hidden. */
|
21
|
-
|
21
|
+
withResetPassword?: boolean;
|
22
22
|
/** If true, the register option is hidden. */
|
23
23
|
allowRegister?: boolean;
|
24
24
|
/** If true, a loading spinner is displayed within the main form submit button. */
|
@@ -36,7 +36,7 @@ type LoginFormTypes = {
|
|
36
36
|
/** If true, Twitter login option is displayed. */
|
37
37
|
viaTwitter?: boolean;
|
38
38
|
/** Function to handle form submission. */
|
39
|
-
onLogin
|
39
|
+
onLogin: (e: any) => void;
|
40
40
|
/** Function to route user to the register page. */
|
41
41
|
onRouteToRegister?: () => void;
|
42
42
|
/** Function to handle forgotten password case. */
|
@@ -18,7 +18,7 @@ type LoginFormTypes = {
|
|
18
18
|
/** Login identifier type user will use to log in. */
|
19
19
|
loginType?: "email" | "username" | "phone" | "link";
|
20
20
|
/** If true, the reset password option is hidden. */
|
21
|
-
|
21
|
+
withResetPassword?: boolean;
|
22
22
|
/** If true, the register option is hidden. */
|
23
23
|
allowRegister?: boolean;
|
24
24
|
/** If true, a loading spinner is displayed within the main form submit button. */
|
@@ -36,7 +36,7 @@ type LoginFormTypes = {
|
|
36
36
|
/** If true, Twitter login option is displayed. */
|
37
37
|
viaTwitter?: boolean;
|
38
38
|
/** Function to handle form submission. */
|
39
|
-
onLogin
|
39
|
+
onLogin: (e: any) => void;
|
40
40
|
/** Function to route user to the register page. */
|
41
41
|
onRouteToRegister?: () => void;
|
42
42
|
/** Function to handle forgotten password case. */
|
@@ -1,3 +1,4 @@
|
|
1
|
+
"use client";
|
1
2
|
"use strict";
|
2
3
|
var __create = Object.create;
|
3
4
|
var __defProp = Object.defineProperty;
|
@@ -44,11 +45,6 @@ module.exports = __toCommonJS(auth_exports);
|
|
44
45
|
var import_react13 = __toESM(require("react"));
|
45
46
|
var import_react_hook_form = require("react-hook-form");
|
46
47
|
var import_zod = require("@hookform/resolvers/zod");
|
47
|
-
var import_libphonenumber_js = require("libphonenumber-js");
|
48
|
-
var z = __toESM(require("zod"));
|
49
|
-
|
50
|
-
// elements/alert/Alert.tsx
|
51
|
-
var import_react2 = __toESM(require("react"));
|
52
48
|
|
53
49
|
// util/index.ts
|
54
50
|
var import_clsx = require("clsx");
|
@@ -57,6 +53,13 @@ function cn(...inputs) {
|
|
57
53
|
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
|
58
54
|
}
|
59
55
|
|
56
|
+
// blocks/auth/LoginForm.tsx
|
57
|
+
var import_libphonenumber_js = require("libphonenumber-js");
|
58
|
+
var z = __toESM(require("zod"));
|
59
|
+
|
60
|
+
// elements/alert/Alert.tsx
|
61
|
+
var import_react2 = __toESM(require("react"));
|
62
|
+
|
60
63
|
// elements/button/Button.tsx
|
61
64
|
var React2 = __toESM(require("react"));
|
62
65
|
var import_class_variance_authority = require("class-variance-authority");
|
@@ -3081,7 +3084,7 @@ var AuthButtons = (props) => {
|
|
3081
3084
|
|
3082
3085
|
// blocks/auth/LoginForm.tsx
|
3083
3086
|
var LoginForm = ({
|
3084
|
-
loginType,
|
3087
|
+
loginType = "email",
|
3085
3088
|
texts,
|
3086
3089
|
passwordLength = 8,
|
3087
3090
|
...props
|
@@ -3100,33 +3103,45 @@ var LoginForm = ({
|
|
3100
3103
|
let formSchema;
|
3101
3104
|
if (loginType === "email") {
|
3102
3105
|
formSchema = z.object({
|
3103
|
-
email: z.string({ required_error: (_a = texts == null ? void 0 : texts.email) == null ? void 0 : _a.required }).min(1, { message: (_b = texts == null ? void 0 : texts.email) == null ? void 0 : _b.required }).email({ message: (_c = texts == null ? void 0 : texts.email) == null ? void 0 : _c.invalid }),
|
3104
|
-
password: z.string({
|
3106
|
+
email: z.string({ required_error: ((_a = texts == null ? void 0 : texts.email) == null ? void 0 : _a.required) || "Email Required" }).min(1, { message: ((_b = texts == null ? void 0 : texts.email) == null ? void 0 : _b.required) || "Email Required" }).email({ message: ((_c = texts == null ? void 0 : texts.email) == null ? void 0 : _c.invalid) || "Email Invalid" }),
|
3107
|
+
password: z.string({
|
3108
|
+
required_error: ((_d = texts == null ? void 0 : texts.password) == null ? void 0 : _d.required) || "Password Required"
|
3109
|
+
}).min(1, { message: ((_e = texts == null ? void 0 : texts.password) == null ? void 0 : _e.required) || "Password Required" }).min(passwordLength, {
|
3110
|
+
message: ((_f = texts == null ? void 0 : texts.password) == null ? void 0 : _f.tooShort) || "Password too short"
|
3111
|
+
})
|
3105
3112
|
});
|
3106
3113
|
} else if (loginType === "username") {
|
3107
3114
|
formSchema = z.object({
|
3108
|
-
username: z.string({
|
3115
|
+
username: z.string({
|
3116
|
+
required_error: ((_g = texts == null ? void 0 : texts.username) == null ? void 0 : _g.required) || "Username Required"
|
3117
|
+
}).min(2, { message: ((_h = texts == null ? void 0 : texts.username) == null ? void 0 : _h.tooShort) || "Username too short" }).refine(
|
3109
3118
|
(value) => {
|
3110
3119
|
const isValid = /^[a-zA-Z][a-zA-Z0-9_-]{2,14}$/.test(value);
|
3111
3120
|
return isValid;
|
3112
3121
|
},
|
3113
|
-
{ message: (_i = texts == null ? void 0 : texts.username) == null ? void 0 : _i.invalid }
|
3122
|
+
{ message: ((_i = texts == null ? void 0 : texts.username) == null ? void 0 : _i.invalid) || "Username Invalid" }
|
3114
3123
|
),
|
3115
|
-
password: z.string({
|
3124
|
+
password: z.string({
|
3125
|
+
required_error: ((_j = texts == null ? void 0 : texts.password) == null ? void 0 : _j.required) || "Password Required"
|
3126
|
+
}).min(1, { message: ((_k = texts == null ? void 0 : texts.password) == null ? void 0 : _k.required) || "Password Required" }).min(passwordLength, {
|
3127
|
+
message: ((_l = texts == null ? void 0 : texts.password) == null ? void 0 : _l.tooShort) || "Password too short"
|
3128
|
+
})
|
3116
3129
|
});
|
3117
3130
|
} else if (loginType === "phone") {
|
3118
3131
|
formSchema = z.object({
|
3119
|
-
phone: z.string({
|
3132
|
+
phone: z.string({
|
3133
|
+
required_error: ((_m = texts == null ? void 0 : texts.phone) == null ? void 0 : _m.required) || "Phone Number Required"
|
3134
|
+
}).refine(
|
3120
3135
|
(value) => {
|
3121
3136
|
let phoneNumber = (0, import_libphonenumber_js.parsePhoneNumber)(value);
|
3122
3137
|
return phoneNumber.isValid();
|
3123
3138
|
},
|
3124
|
-
{ message: (_n = texts == null ? void 0 : texts.phone) == null ? void 0 : _n.invalid }
|
3139
|
+
{ message: ((_n = texts == null ? void 0 : texts.phone) == null ? void 0 : _n.invalid) || "Phone Number Invalid" }
|
3125
3140
|
)
|
3126
3141
|
});
|
3127
3142
|
} else if (loginType === "link") {
|
3128
3143
|
formSchema = z.object({
|
3129
|
-
email: z.string({ required_error: (_o = texts == null ? void 0 : texts.email) == null ? void 0 : _o.required }).min(1, { message: (_p = texts == null ? void 0 : texts.email) == null ? void 0 : _p.required }).email({ message: (_q = texts == null ? void 0 : texts.email) == null ? void 0 : _q.invalid })
|
3144
|
+
email: z.string({ required_error: ((_o = texts == null ? void 0 : texts.email) == null ? void 0 : _o.required) || "Email Required" }).min(1, { message: ((_p = texts == null ? void 0 : texts.email) == null ? void 0 : _p.required) || "Email Required" }).email({ message: ((_q = texts == null ? void 0 : texts.email) == null ? void 0 : _q.invalid) || "Email Invalid" })
|
3130
3145
|
});
|
3131
3146
|
} else {
|
3132
3147
|
formSchema = z.object({});
|
@@ -3153,7 +3168,7 @@ var LoginForm = ({
|
|
3153
3168
|
dir: "ltr",
|
3154
3169
|
width: "full",
|
3155
3170
|
autoComplete: "email",
|
3156
|
-
label: (_a2 = texts == null ? void 0 : texts.email) == null ? void 0 : _a2.label,
|
3171
|
+
label: ((_a2 = texts == null ? void 0 : texts.email) == null ? void 0 : _a2.label) || "Email",
|
3157
3172
|
helperText: (_b2 = formState.errors.email) == null ? void 0 : _b2.message,
|
3158
3173
|
placeholder: ((_c2 = texts == null ? void 0 : texts.email) == null ? void 0 : _c2.placeholder) || "contact@sikka.io",
|
3159
3174
|
...field
|
@@ -3190,7 +3205,7 @@ var LoginForm = ({
|
|
3190
3205
|
);
|
3191
3206
|
}
|
3192
3207
|
}
|
3193
|
-
),
|
3208
|
+
), props.withResetPassword && /* @__PURE__ */ import_react13.default.createElement(
|
3194
3209
|
"div",
|
3195
3210
|
{
|
3196
3211
|
onClick: props.onForgotPassword,
|
@@ -3232,7 +3247,7 @@ var LoginForm = ({
|
|
3232
3247
|
width: "full",
|
3233
3248
|
autoComplete: "current-password",
|
3234
3249
|
type: passwordVisible ? "text" : "password",
|
3235
|
-
label: (_a2 = texts == null ? void 0 : texts.password) == null ? void 0 : _a2.label,
|
3250
|
+
label: ((_a2 = texts == null ? void 0 : texts.password) == null ? void 0 : _a2.label) || "Password",
|
3236
3251
|
endIcon: /* @__PURE__ */ import_react13.default.createElement(
|
3237
3252
|
"div",
|
3238
3253
|
{
|
@@ -3248,7 +3263,7 @@ var LoginForm = ({
|
|
3248
3263
|
);
|
3249
3264
|
}
|
3250
3265
|
}
|
3251
|
-
),
|
3266
|
+
), props.withResetPassword && /* @__PURE__ */ import_react13.default.createElement(
|
3252
3267
|
"div",
|
3253
3268
|
{
|
3254
3269
|
onClick: props.onForgotPassword,
|
@@ -3267,7 +3282,7 @@ var LoginForm = ({
|
|
3267
3282
|
return /* @__PURE__ */ import_react13.default.createElement(
|
3268
3283
|
PhoneInput,
|
3269
3284
|
{
|
3270
|
-
label: (_a2 = texts == null ? void 0 : texts.phone) == null ? void 0 : _a2.label,
|
3285
|
+
label: ((_a2 = texts == null ? void 0 : texts.phone) == null ? void 0 : _a2.label) || "Phone Number",
|
3271
3286
|
helperText: (_b2 = formState.errors.phone) == null ? void 0 : _b2.message,
|
3272
3287
|
preferredCountry: { label: "+966" },
|
3273
3288
|
handleChange: (e) => field.onChange((0, import_libphonenumber_js.parsePhoneNumber)(e).number)
|
@@ -1,16 +1,17 @@
|
|
1
|
+
"use client";
|
1
2
|
import {
|
2
3
|
Input
|
3
|
-
} from "../../chunk-
|
4
|
+
} from "../../chunk-TWCAKKEP.mjs";
|
4
5
|
import {
|
5
6
|
StopPropagationWrapper
|
6
|
-
} from "../../chunk-
|
7
|
+
} from "../../chunk-47APBDKK.mjs";
|
7
8
|
import {
|
8
9
|
Select
|
9
|
-
} from "../../chunk-
|
10
|
+
} from "../../chunk-47JBRNHV.mjs";
|
10
11
|
import {
|
11
12
|
EyeIcon,
|
12
13
|
HiddenEyeIcon
|
13
|
-
} from "../../chunk-
|
14
|
+
} from "../../chunk-M76J5JHP.mjs";
|
14
15
|
import {
|
15
16
|
Button,
|
16
17
|
Card,
|
@@ -22,7 +23,7 @@ import {
|
|
22
23
|
Label,
|
23
24
|
Loading,
|
24
25
|
cn
|
25
|
-
} from "../../chunk-
|
26
|
+
} from "../../chunk-PEV5RH2A.mjs";
|
26
27
|
|
27
28
|
// blocks/auth/LoginForm.tsx
|
28
29
|
import React5, { useState as useState3 } from "react";
|
@@ -2218,7 +2219,7 @@ var AuthButtons = (props) => {
|
|
2218
2219
|
|
2219
2220
|
// blocks/auth/LoginForm.tsx
|
2220
2221
|
var LoginForm = ({
|
2221
|
-
loginType,
|
2222
|
+
loginType = "email",
|
2222
2223
|
texts,
|
2223
2224
|
passwordLength = 8,
|
2224
2225
|
...props
|
@@ -2237,33 +2238,45 @@ var LoginForm = ({
|
|
2237
2238
|
let formSchema;
|
2238
2239
|
if (loginType === "email") {
|
2239
2240
|
formSchema = z.object({
|
2240
|
-
email: z.string({ required_error: (_a = texts == null ? void 0 : texts.email) == null ? void 0 : _a.required }).min(1, { message: (_b = texts == null ? void 0 : texts.email) == null ? void 0 : _b.required }).email({ message: (_c = texts == null ? void 0 : texts.email) == null ? void 0 : _c.invalid }),
|
2241
|
-
password: z.string({
|
2241
|
+
email: z.string({ required_error: ((_a = texts == null ? void 0 : texts.email) == null ? void 0 : _a.required) || "Email Required" }).min(1, { message: ((_b = texts == null ? void 0 : texts.email) == null ? void 0 : _b.required) || "Email Required" }).email({ message: ((_c = texts == null ? void 0 : texts.email) == null ? void 0 : _c.invalid) || "Email Invalid" }),
|
2242
|
+
password: z.string({
|
2243
|
+
required_error: ((_d = texts == null ? void 0 : texts.password) == null ? void 0 : _d.required) || "Password Required"
|
2244
|
+
}).min(1, { message: ((_e = texts == null ? void 0 : texts.password) == null ? void 0 : _e.required) || "Password Required" }).min(passwordLength, {
|
2245
|
+
message: ((_f = texts == null ? void 0 : texts.password) == null ? void 0 : _f.tooShort) || "Password too short"
|
2246
|
+
})
|
2242
2247
|
});
|
2243
2248
|
} else if (loginType === "username") {
|
2244
2249
|
formSchema = z.object({
|
2245
|
-
username: z.string({
|
2250
|
+
username: z.string({
|
2251
|
+
required_error: ((_g = texts == null ? void 0 : texts.username) == null ? void 0 : _g.required) || "Username Required"
|
2252
|
+
}).min(2, { message: ((_h = texts == null ? void 0 : texts.username) == null ? void 0 : _h.tooShort) || "Username too short" }).refine(
|
2246
2253
|
(value) => {
|
2247
2254
|
const isValid = /^[a-zA-Z][a-zA-Z0-9_-]{2,14}$/.test(value);
|
2248
2255
|
return isValid;
|
2249
2256
|
},
|
2250
|
-
{ message: (_i = texts == null ? void 0 : texts.username) == null ? void 0 : _i.invalid }
|
2257
|
+
{ message: ((_i = texts == null ? void 0 : texts.username) == null ? void 0 : _i.invalid) || "Username Invalid" }
|
2251
2258
|
),
|
2252
|
-
password: z.string({
|
2259
|
+
password: z.string({
|
2260
|
+
required_error: ((_j = texts == null ? void 0 : texts.password) == null ? void 0 : _j.required) || "Password Required"
|
2261
|
+
}).min(1, { message: ((_k = texts == null ? void 0 : texts.password) == null ? void 0 : _k.required) || "Password Required" }).min(passwordLength, {
|
2262
|
+
message: ((_l = texts == null ? void 0 : texts.password) == null ? void 0 : _l.tooShort) || "Password too short"
|
2263
|
+
})
|
2253
2264
|
});
|
2254
2265
|
} else if (loginType === "phone") {
|
2255
2266
|
formSchema = z.object({
|
2256
|
-
phone: z.string({
|
2267
|
+
phone: z.string({
|
2268
|
+
required_error: ((_m = texts == null ? void 0 : texts.phone) == null ? void 0 : _m.required) || "Phone Number Required"
|
2269
|
+
}).refine(
|
2257
2270
|
(value) => {
|
2258
2271
|
let phoneNumber = parsePhoneNumber(value);
|
2259
2272
|
return phoneNumber.isValid();
|
2260
2273
|
},
|
2261
|
-
{ message: (_n = texts == null ? void 0 : texts.phone) == null ? void 0 : _n.invalid }
|
2274
|
+
{ message: ((_n = texts == null ? void 0 : texts.phone) == null ? void 0 : _n.invalid) || "Phone Number Invalid" }
|
2262
2275
|
)
|
2263
2276
|
});
|
2264
2277
|
} else if (loginType === "link") {
|
2265
2278
|
formSchema = z.object({
|
2266
|
-
email: z.string({ required_error: (_o = texts == null ? void 0 : texts.email) == null ? void 0 : _o.required }).min(1, { message: (_p = texts == null ? void 0 : texts.email) == null ? void 0 : _p.required }).email({ message: (_q = texts == null ? void 0 : texts.email) == null ? void 0 : _q.invalid })
|
2279
|
+
email: z.string({ required_error: ((_o = texts == null ? void 0 : texts.email) == null ? void 0 : _o.required) || "Email Required" }).min(1, { message: ((_p = texts == null ? void 0 : texts.email) == null ? void 0 : _p.required) || "Email Required" }).email({ message: ((_q = texts == null ? void 0 : texts.email) == null ? void 0 : _q.invalid) || "Email Invalid" })
|
2267
2280
|
});
|
2268
2281
|
} else {
|
2269
2282
|
formSchema = z.object({});
|
@@ -2290,7 +2303,7 @@ var LoginForm = ({
|
|
2290
2303
|
dir: "ltr",
|
2291
2304
|
width: "full",
|
2292
2305
|
autoComplete: "email",
|
2293
|
-
label: (_a2 = texts == null ? void 0 : texts.email) == null ? void 0 : _a2.label,
|
2306
|
+
label: ((_a2 = texts == null ? void 0 : texts.email) == null ? void 0 : _a2.label) || "Email",
|
2294
2307
|
helperText: (_b2 = formState.errors.email) == null ? void 0 : _b2.message,
|
2295
2308
|
placeholder: ((_c2 = texts == null ? void 0 : texts.email) == null ? void 0 : _c2.placeholder) || "contact@sikka.io",
|
2296
2309
|
...field
|
@@ -2327,7 +2340,7 @@ var LoginForm = ({
|
|
2327
2340
|
);
|
2328
2341
|
}
|
2329
2342
|
}
|
2330
|
-
),
|
2343
|
+
), props.withResetPassword && /* @__PURE__ */ React5.createElement(
|
2331
2344
|
"div",
|
2332
2345
|
{
|
2333
2346
|
onClick: props.onForgotPassword,
|
@@ -2369,7 +2382,7 @@ var LoginForm = ({
|
|
2369
2382
|
width: "full",
|
2370
2383
|
autoComplete: "current-password",
|
2371
2384
|
type: passwordVisible ? "text" : "password",
|
2372
|
-
label: (_a2 = texts == null ? void 0 : texts.password) == null ? void 0 : _a2.label,
|
2385
|
+
label: ((_a2 = texts == null ? void 0 : texts.password) == null ? void 0 : _a2.label) || "Password",
|
2373
2386
|
endIcon: /* @__PURE__ */ React5.createElement(
|
2374
2387
|
"div",
|
2375
2388
|
{
|
@@ -2385,7 +2398,7 @@ var LoginForm = ({
|
|
2385
2398
|
);
|
2386
2399
|
}
|
2387
2400
|
}
|
2388
|
-
),
|
2401
|
+
), props.withResetPassword && /* @__PURE__ */ React5.createElement(
|
2389
2402
|
"div",
|
2390
2403
|
{
|
2391
2404
|
onClick: props.onForgotPassword,
|
@@ -2404,7 +2417,7 @@ var LoginForm = ({
|
|
2404
2417
|
return /* @__PURE__ */ React5.createElement(
|
2405
2418
|
PhoneInput,
|
2406
2419
|
{
|
2407
|
-
label: (_a2 = texts == null ? void 0 : texts.phone) == null ? void 0 : _a2.label,
|
2420
|
+
label: ((_a2 = texts == null ? void 0 : texts.phone) == null ? void 0 : _a2.label) || "Phone Number",
|
2408
2421
|
helperText: (_b2 = formState.errors.phone) == null ? void 0 : _b2.message,
|
2409
2422
|
preferredCountry: { label: "+966" },
|
2410
2423
|
handleChange: (e) => field.onChange(parsePhoneNumber(e).number)
|
@@ -1,25 +1,26 @@
|
|
1
|
+
"use client";
|
1
2
|
import {
|
2
3
|
Textarea
|
3
|
-
} from "../../chunk-
|
4
|
+
} from "../../chunk-ZNAH5EOY.mjs";
|
4
5
|
import {
|
5
6
|
Select
|
6
|
-
} from "../../chunk-
|
7
|
+
} from "../../chunk-47JBRNHV.mjs";
|
7
8
|
import {
|
8
9
|
Radio
|
9
|
-
} from "../../chunk-
|
10
|
+
} from "../../chunk-SFXAOGDN.mjs";
|
10
11
|
import {
|
11
12
|
BadEmoji,
|
12
13
|
GoodEmoji,
|
13
14
|
VeryBadEmoji,
|
14
15
|
VeryGoodEmoji
|
15
|
-
} from "../../chunk-
|
16
|
+
} from "../../chunk-M76J5JHP.mjs";
|
16
17
|
import {
|
17
18
|
Button,
|
18
19
|
Card,
|
19
20
|
CardContent,
|
20
21
|
Label,
|
21
22
|
cn
|
22
|
-
} from "../../chunk-
|
23
|
+
} from "../../chunk-PEV5RH2A.mjs";
|
23
24
|
|
24
25
|
// blocks/feedback/UserReferralSource.tsx
|
25
26
|
import React, { useRef, useState } from "react";
|
package/dist/blocks/index.d.mts
CHANGED
@@ -21,7 +21,7 @@ type LoginFormTypes = {
|
|
21
21
|
/** Login identifier type user will use to log in. */
|
22
22
|
loginType?: "email" | "username" | "phone" | "link";
|
23
23
|
/** If true, the reset password option is hidden. */
|
24
|
-
|
24
|
+
withResetPassword?: boolean;
|
25
25
|
/** If true, the register option is hidden. */
|
26
26
|
allowRegister?: boolean;
|
27
27
|
/** If true, a loading spinner is displayed within the main form submit button. */
|
@@ -39,7 +39,7 @@ type LoginFormTypes = {
|
|
39
39
|
/** If true, Twitter login option is displayed. */
|
40
40
|
viaTwitter?: boolean;
|
41
41
|
/** Function to handle form submission. */
|
42
|
-
onLogin
|
42
|
+
onLogin: (e: any) => void;
|
43
43
|
/** Function to route user to the register page. */
|
44
44
|
onRouteToRegister?: () => void;
|
45
45
|
/** Function to handle forgotten password case. */
|