@sikka/hawa 0.26.31 → 0.26.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{Toast-pOd4uGZz.d.ts → Toast-YaClwi7z.d.ts} +9 -1
- package/dist/{Toast-VBd4UvlM.d.mts → Toast-ySvjL_-K.d.mts} +9 -1
- package/dist/accordion/index.mjs +7 -4
- package/dist/accordion/index.mjs.map +1 -1
- package/dist/alert/index.js +4 -4
- package/dist/alert/index.js.map +1 -1
- package/dist/alert/index.mjs +11 -8
- package/dist/alert/index.mjs.map +1 -1
- package/dist/appLayout/index.js +2 -1
- package/dist/appLayout/index.js.map +1 -1
- package/dist/appLayout/index.mjs +9 -5
- package/dist/appLayout/index.mjs.map +1 -1
- package/dist/appMenubar/index.mjs +9 -4
- package/dist/appMenubar/index.mjs.map +1 -1
- package/dist/appTabs/index.mjs +9 -4
- package/dist/appTabs/index.mjs.map +1 -1
- package/dist/appTopbar/index.mjs +9 -4
- package/dist/appTopbar/index.mjs.map +1 -1
- package/dist/avatar/index.js +2 -1
- package/dist/avatar/index.js.map +1 -1
- package/dist/avatar/index.mjs +9 -5
- package/dist/avatar/index.mjs.map +1 -1
- package/dist/backToTop/index.js +6 -3
- package/dist/backToTop/index.js.map +1 -1
- package/dist/backToTop/index.mjs +13 -7
- package/dist/backToTop/index.mjs.map +1 -1
- package/dist/badge/index.js +4 -3
- package/dist/badge/index.js.map +1 -1
- package/dist/badge/index.mjs +13 -7
- package/dist/badge/index.mjs.map +1 -1
- package/dist/button/index.mjs +7 -4
- package/dist/button/index.mjs.map +1 -1
- package/dist/card/index.mjs +9 -4
- package/dist/card/index.mjs.map +1 -1
- package/dist/carousel/index.js +10 -10
- package/dist/carousel/index.js.map +1 -1
- package/dist/carousel/index.mjs +19 -14
- package/dist/carousel/index.mjs.map +1 -1
- package/dist/checkbox/index.mjs +9 -4
- package/dist/checkbox/index.mjs.map +1 -1
- package/dist/chip/index.mjs +9 -4
- package/dist/chip/index.mjs.map +1 -1
- package/dist/chunk-A3ERTYS4.mjs +29 -0
- package/dist/codeBlock/index.js +1 -1
- package/dist/codeBlock/index.js.map +1 -1
- package/dist/codeBlock/index.mjs +84 -24
- package/dist/codeBlock/index.mjs.map +1 -1
- package/dist/collapsible/index.mjs +0 -2
- package/dist/collapsible/index.mjs.map +1 -1
- package/dist/colorPicker/index.js +2 -1
- package/dist/colorPicker/index.js.map +1 -1
- package/dist/colorPicker/index.mjs +92 -20
- package/dist/colorPicker/index.mjs.map +1 -1
- package/dist/combobox/index.js +4 -3
- package/dist/combobox/index.js.map +1 -1
- package/dist/combobox/index.mjs +445 -27
- package/dist/combobox/index.mjs.map +1 -1
- package/dist/command/index.mjs +429 -11
- package/dist/command/index.mjs.map +1 -1
- package/dist/dataTable/index.js +36 -27
- package/dist/dataTable/index.js.map +1 -1
- package/dist/dataTable/index.mjs +43 -31
- package/dist/dataTable/index.mjs.map +1 -1
- package/dist/destroyableCard/index.js +2 -2
- package/dist/destroyableCard/index.js.map +1 -1
- package/dist/destroyableCard/index.mjs +9 -6
- package/dist/destroyableCard/index.mjs.map +1 -1
- package/dist/dialog/index.mjs +9 -4
- package/dist/dialog/index.mjs.map +1 -1
- package/dist/docsLayout/index.js +2 -2
- package/dist/docsLayout/index.js.map +1 -1
- package/dist/docsLayout/index.mjs +9 -6
- package/dist/docsLayout/index.mjs.map +1 -1
- package/dist/docsSidebar/index.js +2 -2
- package/dist/docsSidebar/index.js.map +1 -1
- package/dist/docsSidebar/index.mjs +11 -6
- package/dist/docsSidebar/index.mjs.map +1 -1
- package/dist/dropdownMenu/index.mjs +9 -4
- package/dist/dropdownMenu/index.mjs.map +1 -1
- package/dist/elements/index.d.mts +4 -2
- package/dist/elements/index.d.ts +4 -2
- package/dist/elements/index.js +8 -135
- package/dist/elements/index.mjs +10 -14
- package/dist/fileDropzone/index.js +12 -11
- package/dist/fileDropzone/index.js.map +1 -1
- package/dist/fileDropzone/index.mjs +21 -17
- package/dist/fileDropzone/index.mjs.map +1 -1
- package/dist/fileUploader/index.js +2 -1
- package/dist/fileUploader/index.js.map +1 -1
- package/dist/fileUploader/index.mjs +2 -1
- package/dist/fileUploader/index.mjs.map +1 -1
- package/dist/glow/index.js +24 -17
- package/dist/glow/index.js.map +1 -1
- package/dist/glow/index.mjs +24 -17
- package/dist/glow/index.mjs.map +1 -1
- package/dist/hooks/index.d.mts +9 -18
- package/dist/hooks/index.d.ts +9 -18
- package/dist/hooks/index.mjs +146 -27
- package/dist/index.d.mts +18 -17
- package/dist/index.d.ts +18 -17
- package/dist/index.js +167 -172
- package/dist/index.mjs +589 -594
- package/dist/input/index.js +3 -2
- package/dist/input/index.js.map +1 -1
- package/dist/input/index.mjs +118 -19
- package/dist/input/index.mjs.map +1 -1
- package/dist/interfaceSettings/index.js +6 -4
- package/dist/interfaceSettings/index.js.map +1 -1
- package/dist/interfaceSettings/index.mjs +130 -28
- package/dist/interfaceSettings/index.mjs.map +1 -1
- package/dist/label/index.mjs +7 -4
- package/dist/label/index.mjs.map +1 -1
- package/dist/loading/index.mjs +9 -4
- package/dist/loading/index.mjs.map +1 -1
- package/dist/navbar/index.js +3 -2
- package/dist/navbar/index.js.map +1 -1
- package/dist/navbar/index.mjs +10 -6
- package/dist/navbar/index.mjs.map +1 -1
- package/dist/navigationMenu/index.mjs +9 -4
- package/dist/navigationMenu/index.mjs.map +1 -1
- package/dist/pagination/index.mjs +9 -4
- package/dist/pagination/index.mjs.map +1 -1
- package/dist/passwordInput/index.js +3 -2
- package/dist/passwordInput/index.js.map +1 -1
- package/dist/passwordInput/index.mjs +12 -6
- package/dist/passwordInput/index.mjs.map +1 -1
- package/dist/phoneInput/index.js +10 -5
- package/dist/phoneInput/index.js.map +1 -1
- package/dist/phoneInput/index.mjs +19 -11
- package/dist/phoneInput/index.mjs.map +1 -1
- package/dist/pinInput/index.js +3 -3
- package/dist/pinInput/index.js.map +1 -1
- package/dist/pinInput/index.mjs +12 -7
- package/dist/pinInput/index.mjs.map +1 -1
- package/dist/popover/index.mjs +9 -4
- package/dist/popover/index.mjs.map +1 -1
- package/dist/progress/index.mjs +9 -4
- package/dist/progress/index.mjs.map +1 -1
- package/dist/progressCircle/index.js +2 -2
- package/dist/progressCircle/index.js.map +1 -1
- package/dist/progressCircle/index.mjs +11 -6
- package/dist/progressCircle/index.mjs.map +1 -1
- package/dist/radio/index.js +6 -4
- package/dist/radio/index.js.map +1 -1
- package/dist/radio/index.mjs +13 -8
- package/dist/radio/index.mjs.map +1 -1
- package/dist/scrollArea/index.mjs +9 -4
- package/dist/scrollArea/index.mjs.map +1 -1
- package/dist/scrollIndicator/index.js +2 -1
- package/dist/scrollIndicator/index.js.map +1 -1
- package/dist/scrollIndicator/index.mjs +2 -1
- package/dist/scrollIndicator/index.mjs.map +1 -1
- package/dist/select/index.js +6 -2
- package/dist/select/index.js.map +1 -1
- package/dist/select/index.mjs +15 -8
- package/dist/select/index.mjs.map +1 -1
- package/dist/separator/index.mjs +9 -4
- package/dist/separator/index.mjs.map +1 -1
- package/dist/sheet/index.mjs +9 -4
- package/dist/sheet/index.mjs.map +1 -1
- package/dist/sidebar/index.mjs +9 -4
- package/dist/sidebar/index.mjs.map +1 -1
- package/dist/signature/index.js +31 -11
- package/dist/signature/index.js.map +1 -1
- package/dist/signature/index.mjs +40 -15
- package/dist/signature/index.mjs.map +1 -1
- package/dist/simpleTable/index.js +18 -14
- package/dist/simpleTable/index.js.map +1 -1
- package/dist/simpleTable/index.mjs +25 -18
- package/dist/simpleTable/index.mjs.map +1 -1
- package/dist/skeleton/index.mjs +9 -4
- package/dist/skeleton/index.mjs.map +1 -1
- package/dist/slider/index.mjs +9 -4
- package/dist/slider/index.mjs.map +1 -1
- package/dist/sortButton/index.mjs +268 -11
- package/dist/sortButton/index.mjs.map +1 -1
- package/dist/splitButton/index.mjs +267 -12
- package/dist/splitButton/index.mjs.map +1 -1
- package/dist/switch/index.js +2 -1
- package/dist/switch/index.js.map +1 -1
- package/dist/switch/index.mjs +11 -5
- package/dist/switch/index.mjs.map +1 -1
- package/dist/table/index.mjs +9 -4
- package/dist/table/index.mjs.map +1 -1
- package/dist/tabs/index.mjs +7 -4
- package/dist/tabs/index.mjs.map +1 -1
- package/dist/textarea/index.js +4 -4
- package/dist/textarea/index.js.map +1 -1
- package/dist/textarea/index.mjs +11 -8
- package/dist/textarea/index.mjs.map +1 -1
- package/dist/toast/index.d.mts +9 -1
- package/dist/toast/index.d.ts +9 -1
- package/dist/toast/index.js +3 -3
- package/dist/toast/index.js.map +1 -1
- package/dist/toast/index.mjs +145 -10
- package/dist/toast/index.mjs.map +1 -1
- package/dist/toaster/index.d.mts +5 -0
- package/dist/toaster/index.d.ts +5 -0
- package/dist/toaster/index.js +17 -142
- package/dist/toaster/index.js.map +1 -1
- package/dist/toaster/index.mjs +142 -135
- package/dist/toaster/index.mjs.map +1 -1
- package/package.json +1 -1
- package/dist/chunk-3ODWQVIA.mjs +0 -12
- package/dist/chunk-3ODWQVIA.mjs.map +0 -1
- package/dist/chunk-53OZVR57.mjs +0 -108
- package/dist/chunk-53OZVR57.mjs.map +0 -1
- package/dist/chunk-CBRGWUZG.mjs +0 -11
- package/dist/chunk-CBRGWUZG.mjs.map +0 -1
- package/dist/chunk-HYXZRCZW.mjs +0 -265
- package/dist/chunk-HYXZRCZW.mjs.map +0 -1
- package/dist/chunk-JNUGOUYJ.mjs +0 -154
- package/dist/chunk-JX5YLRCU.mjs +0 -443
- package/dist/chunk-JX5YLRCU.mjs.map +0 -1
- package/dist/chunk-NV3KR5Y7.mjs +0 -82
- package/dist/chunk-NV3KR5Y7.mjs.map +0 -1
- package/dist/chunk-OQ7MNEYW.mjs +0 -151
- package/dist/chunk-OQ7MNEYW.mjs.map +0 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../layout/appTabs/AppTabs.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { cn } from \"@util/index\";\n\ntype SingleAppTab = {\n label: string;\n value?: string;\n icon?: React.ReactNode;\n path?: string;\n action?: any;\n onMouseDown?: any;\n onClick?: any;\n};\ntype AppTabsType = {\n className?: string;\n tabs: SingleAppTab[];\n};\n\nexport const AppTabs: React.FC<AppTabsType> = ({ tabs, className }) => {\n const [selectedIndex, setSelectedIndex] = useState(0);\n\n return (\n <div\n className={cn(\n \"hawa-w-full hawa-border-b hawa-bg-card hawa-p-6 hawa-pb-0\",\n className\n )}\n >\n <div className=\"hawa-flex hawa-flex-row hawa-justify-center \">\n {tabs.map((tab: SingleAppTab, index: number) => {\n const selected = index === selectedIndex;\n\n return (\n <a\n href={tab.path}\n key={index}\n onMouseDown={(e) => {\n if (tab.onMouseDown) {\n tab.onMouseDown(e);\n }\n }}\n onClick={(e) => {\n if (tab.onClick) {\n tab.onClick(e);\n }\n setSelectedIndex(index);\n }}\n className={cn(\n \"hawa-z-10 hawa-flex hawa-items-center hawa-translate-y-[1.1px] hawa-select-none hawa-flex-row hawa-gap-2 hawa-rounded-t hawa-p-4 hawa-py-2 hawa-text-sm hawa-transition-all \",\n \"hawa-border\", // Always have a border but make it transparent\n selected\n ? \"hawa-border hawa-border-b-transparent hawa-bg-background\" // Use a background color for the bottom border\n : \"hawa-cursor-pointer hawa-border-transparent hover:hawa-bg-card-foreground/5\"\n )}\n >\n {tab.icon && tab.icon}\n {tab.label}\n </a>\n );\n })}\n </div>\n </div>\n );\n};\n"],"mappings":"
|
1
|
+
{"version":3,"sources":["../../layout/appTabs/AppTabs.tsx","../../util/index.ts"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { cn } from \"@util/index\";\n\ntype SingleAppTab = {\n label: string;\n value?: string;\n icon?: React.ReactNode;\n path?: string;\n action?: any;\n onMouseDown?: any;\n onClick?: any;\n};\ntype AppTabsType = {\n className?: string;\n tabs: SingleAppTab[];\n};\n\nexport const AppTabs: React.FC<AppTabsType> = ({ tabs, className }) => {\n const [selectedIndex, setSelectedIndex] = useState(0);\n\n return (\n <div\n className={cn(\n \"hawa-w-full hawa-border-b hawa-bg-card hawa-p-6 hawa-pb-0\",\n className\n )}\n >\n <div className=\"hawa-flex hawa-flex-row hawa-justify-center \">\n {tabs.map((tab: SingleAppTab, index: number) => {\n const selected = index === selectedIndex;\n\n return (\n <a\n href={tab.path}\n key={index}\n onMouseDown={(e) => {\n if (tab.onMouseDown) {\n tab.onMouseDown(e);\n }\n }}\n onClick={(e) => {\n if (tab.onClick) {\n tab.onClick(e);\n }\n setSelectedIndex(index);\n }}\n className={cn(\n \"hawa-z-10 hawa-flex hawa-items-center hawa-translate-y-[1.1px] hawa-select-none hawa-flex-row hawa-gap-2 hawa-rounded-t hawa-p-4 hawa-py-2 hawa-text-sm hawa-transition-all \",\n \"hawa-border\", // Always have a border but make it transparent\n selected\n ? \"hawa-border hawa-border-b-transparent hawa-bg-background\" // Use a background color for the bottom border\n : \"hawa-cursor-pointer hawa-border-transparent hover:hawa-bg-card-foreground/5\"\n )}\n >\n {tab.icon && tab.icon}\n {tab.label}\n </a>\n );\n })}\n </div>\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,gBAAgB;;;ACAhC,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADaO,IAAM,UAAiC,CAAC,EAAE,MAAM,UAAU,MAAM;AACrE,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA;AAAA,IAEA,oCAAC,SAAI,WAAU,kDACZ,KAAK,IAAI,CAAC,KAAmB,UAAkB;AAC9C,YAAM,WAAW,UAAU;AAE3B,aACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,IAAI;AAAA,UACV,KAAK;AAAA,UACL,aAAa,CAAC,MAAM;AAClB,gBAAI,IAAI,aAAa;AACnB,kBAAI,YAAY,CAAC;AAAA,YACnB;AAAA,UACF;AAAA,UACA,SAAS,CAAC,MAAM;AACd,gBAAI,IAAI,SAAS;AACf,kBAAI,QAAQ,CAAC;AAAA,YACf;AACA,6BAAiB,KAAK;AAAA,UACxB;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA;AAAA,YACA,WACI,6DACA;AAAA,UACN;AAAA;AAAA,QAEC,IAAI,QAAQ,IAAI;AAAA,QAChB,IAAI;AAAA,MACP;AAAA,IAEJ,CAAC,CACH;AAAA,EACF;AAEJ;","names":[]}
|
package/dist/appTopbar/index.mjs
CHANGED
@@ -1,13 +1,18 @@
|
|
1
|
-
import {
|
2
|
-
cn
|
3
|
-
} from "../chunk-CBRGWUZG.mjs";
|
4
|
-
|
5
1
|
// layout/appTopbar/AppTopbar.tsx
|
6
2
|
import React2 from "react";
|
7
3
|
|
8
4
|
// elements/dropdownMenu/DropdownMenu.tsx
|
9
5
|
import * as React from "react";
|
10
6
|
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
7
|
+
|
8
|
+
// util/index.ts
|
9
|
+
import { clsx } from "clsx";
|
10
|
+
import { twMerge } from "tailwind-merge";
|
11
|
+
function cn(...inputs) {
|
12
|
+
return twMerge(clsx(inputs));
|
13
|
+
}
|
14
|
+
|
15
|
+
// elements/dropdownMenu/DropdownMenu.tsx
|
11
16
|
var DropdownMenuRoot = DropdownMenuPrimitive.Root;
|
12
17
|
var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
|
13
18
|
var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../layout/appTopbar/AppTopbar.tsx","../../elements/dropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { DropdownMenu, MenuItemType } from \"@elements/dropdownMenu\";\n\nimport { DirectionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\ntype AppTopbarType = {\n direction?: DirectionType;\n size?: number;\n username?: string;\n email?: string;\n profileMenuItems?: MenuItemType[];\n avatarImage?: string;\n};\n\nexport const AppTopbar: React.FC<AppTopbarType> = ({ ...props }) => {\n const isRTL = props.direction === \"ltr\";\n const size = 1200;\n return (\n <div\n className={cn(\n \"hawa-fixed hawa-left-0 hawa-right-0 hawa-top-0 hawa-z-30 hawa-flex hawa-h-14 hawa-w-full hawa-items-center hawa-justify-between hawa-border-b hawa-bg-primary-foreground hawa-p-2\",\n isRTL ? \"hawa-flex-row-reverse\" : \"hawa-flex-row\"\n )}\n >\n {/* Nav Side Of Navbar */}\n {size > 600 ? (\n <div\n // className={cn(\n // \"dark:hawa-text-white\",\n // isRTL\n // ? [\n // size > 600 ? \"hawa-mr-14\" : \"hawa-mr-2\",\n // keepOpen ? \"hawa-mr-40\" : \"\",\n // ]\n // : [\n // size > 600 ? \"hawa-ml-14\" : \"hawa-ml-2\",\n // keepOpen ? \"hawa-ml-40\" : \"\",\n // ]\n // )}\n // style={\n // isRTL\n // ? {\n // marginRight: `${\n // drawerSizeStyle[keepOpen ? \"opened\" : \"closed\"][\n // drawerSize\n // ]\n // }px`,\n // }\n // : {\n // marginLeft: `${\n // drawerSizeStyle[keepOpen ? \"opened\" : \"closed\"][\n // drawerSize\n // ]\n // }px`,\n // }\n // }\n >\n {/* {props.pageTitle} */}\n page title\n </div>\n ) : (\n // Mobile Drawer Menu Button\n <div\n dir={props.direction}\n className=\"hawa-flex hawa-items-center hawa-justify-center hawa-gap-0.5\"\n >\n <div\n // onClick={() => setOpenSideMenu(true)}\n className=\"hawa-z-40 hawa-mx-1 hawa-cursor-pointer hawa-rounded hawa-p-2 hawa-transition-all hover:hawa-bg-gray-100\"\n >\n <svg\n stroke=\"currentColor\"\n fill=\"currentColor\"\n strokeWidth={0}\n viewBox=\"0 0 20 20\"\n aria-hidden=\"true\"\n height=\"1.6em\"\n width=\"1.6em\"\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z\"\n ></path>\n </svg>\n </div>\n {/* Mobile Page Title */}\n {/* {props.pageTitle ? (\n <div className=\"hawa-text-sm\">{props.pageTitle}</div>\n ) : (\n <div></div>\n )} */}\n Mobile title\n </div>\n )}\n\n <div\n className={cn(\n \"hawa-flex hawa-gap-2 dark:hawa-text-white\",\n isRTL ? \"hawa-flex-row-reverse\" : \"hawa-flex-row\"\n )}\n >\n {/* User Info */}\n {size > 600 ? (\n <div\n className={\n isRTL\n ? \"hawa-text-left hawa-text-xs\"\n : \"hawa-text-right hawa-text-xs\"\n }\n >\n <div className=\"hawa-font-bold\">{props.username}</div>{\" \"}\n <div>{props.email}</div>\n </div>\n ) : null}\n {/* Profile Icon & Menu */}\n <DropdownMenu\n triggerClassname=\"hawa-mx-2\"\n align=\"end\"\n alignOffset={8}\n side={\"bottom\"}\n sideOffset={5}\n // width={props.profileMenuWidth}\n direction={isRTL ? \"rtl\" : \"ltr\"}\n items={props.profileMenuItems}\n onItemSelect={(e: any) => console.log(\"selecting item \", e)}\n trigger={\n <div className=\"hawa-relative hawa-h-8 hawa-w-8 hawa-cursor-pointer hawa-overflow-clip hawa-rounded hawa-ring-1 hawa-ring-primary/30 dark:hawa-bg-gray-600\">\n {props.avatarImage ? (\n <img src={props.avatarImage} alt=\"User Avatar\" />\n ) : (\n <svg\n aria-label=\"Avatar Icon\"\n className=\"hawa-absolute hawa--left-1 hawa-h-10 hawa-w-10 hawa-text-gray-400\"\n fill=\"currentColor\"\n viewBox=\"0 0 20 20\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z\"\n clipRule=\"evenodd\"\n ></path>\n </svg>\n )}\n </div>\n }\n />\n </div>\n </div>\n );\n};\n","import * as React from \"react\";\n\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\n\nimport { DirectionType } from \"../../types/commonTypes\";\nimport { cn } from \"@util/index\";\n\nconst DropdownMenuRoot = DropdownMenuPrimitive.Root;\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group;\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal;\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub;\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n inset?: boolean;\n }\n>(({ className, inset, children, ...props }, ref) => (\n <DropdownMenuPrimitive.SubTrigger\n ref={ref}\n className={cn(\n \"hawa-flex hawa-cursor-default hawa-select-none hawa-items-center hawa-justify-between hawa-rounded-sm hawa-text-sm hawa-outline-none focus:hawa-bg-accent data-[state=open]:hawa-bg-accent\",\n inset && \"hawa-pl-8\",\n className\n )}\n {...props}\n >\n <div className=\"hawa-flex hawa-flex-row hawa-items-center hawa-gap-2\">\n {children}\n </div>{\" \"}\n <svg\n aria-label=\"Chevron Right Icon\"\n stroke=\"currentColor\"\n fill=\"currentColor\"\n strokeWidth=\"0\"\n viewBox=\"0 0 16 16\"\n height=\"1em\"\n width=\"1em\"\n className={cn(props.dir === \"rtl\" ? \"hawa-rotate-180\" : \"\")}\n >\n <path\n fillRule=\"evenodd\"\n d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"\n ></path>\n </svg>\n </DropdownMenuPrimitive.SubTrigger>\n));\nDropdownMenuSubTrigger.displayName =\n DropdownMenuPrimitive.SubTrigger.displayName;\n\nconst DropdownMenuSubContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n <DropdownMenuPrimitive.SubContent\n ref={ref}\n className={cn(\n \"hawa-z-50 hawa-min-w-[8rem] hawa-gap-1 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-p-1 hawa-text-popover-foreground hawa-shadow-lg data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2\",\n className\n )}\n {...props}\n />\n));\nDropdownMenuSubContent.displayName =\n DropdownMenuPrimitive.SubContent.displayName;\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n \"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-p-1 hawa-text-popover-foreground hawa-shadow-md data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2\",\n className\n )}\n {...props}\n />\n </DropdownMenuPrimitive.Portal>\n));\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;\n\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean;\n end?: any;\n shortcut?: React.ReactNode;\n badged?: boolean;\n slug?: string;\n }\n>(({ className, inset, badged, slug, ...props }, ref) => {\n return (\n <a href={slug}>\n <DropdownMenuPrimitive.Item\n disabled={props.disabled}\n ref={ref}\n className={cn(\n \"hawa-relative hawa-flex hawa-cursor-pointer hawa-select-none hawa-items-center hawa-justify-between hawa-rounded-sm hawa-text-sm hawa-outline-none hawa-transition-colors focus:hawa-text-accent-foreground data-[disabled]:hawa-pointer-events-none data-[disabled]:hawa-opacity-50\",\n inset && \"hawa-pl-8\",\n props.end &&\n Array.isArray(props.children) &&\n props.children[1] &&\n \"hawa-gap-6\",\n className\n )}\n {...props}\n >\n <div className=\"hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 \">\n {props.children}\n </div>\n\n {props.end && props.end}\n {!props.end && props.shortcut && (\n <DropdownMenuShortcut>{props.shortcut}</DropdownMenuShortcut>\n )}\n {!props.end && badged && (\n <div className=\"hawa-h-3 hawa-w-3 hawa-rounded-full hawa-bg-red-500\" />\n )}\n </DropdownMenuPrimitive.Item>\n </a>\n );\n});\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n <DropdownMenuPrimitive.CheckboxItem\n ref={ref}\n className={cn(\n \"hawa-relative hawa-flex hawa-cursor-default hawa-select-none hawa-items-center hawa-rounded-sm hawa-py-1.5 hawa-pl-8 hawa-pr-2 hawa-text-sm hawa-outline-none hawa-transition-colors focus:hawa-bg-accent focus:hawa-text-accent-foreground data-[disabled]:hawa-pointer-events-none data-[disabled]:hawa-opacity-50\",\n className\n )}\n checked={checked}\n {...props}\n >\n <span className=\"hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center\">\n <DropdownMenuPrimitive.ItemIndicator>\n {/* <Check className=\"h-4 w-4\" /> */}\n <svg\n aria-label=\"Check Mark\"\n stroke=\"currentColor\"\n fill=\"currentColor\"\n strokeWidth=\"0\"\n viewBox=\"0 0 512 512\"\n height=\"0.60em\"\n width=\"0.60em\"\n >\n <path d=\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\"></path>\n </svg>{\" \"}\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.CheckboxItem>\n));\nDropdownMenuCheckboxItem.displayName =\n DropdownMenuPrimitive.CheckboxItem.displayName;\n\nconst DropdownMenuRadioItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n <DropdownMenuPrimitive.RadioItem\n ref={ref}\n className={cn(\n \"hawa-relative hawa-flex hawa-cursor-pointer hawa-select-none hawa-items-center hawa-rounded-sm hawa-py-1.5 hawa-pl-8 hawa-pr-2 hawa-text-sm hawa-outline-none hawa-transition-colors focus:hawa-bg-accent focus:hawa-text-accent-foreground data-[disabled]:hawa-pointer-events-none data-[disabled]:hawa-opacity-50\",\n className\n )}\n {...props}\n >\n <span className=\"hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center\">\n <DropdownMenuPrimitive.ItemIndicator>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n aria-label=\"Circle\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className=\"hawa-h-2 hawa-w-2 hawa-fill-current\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n </svg>\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.RadioItem>\n));\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n inset?: boolean;\n }\n>(({ className, inset, ...props }, ref) => (\n <DropdownMenuPrimitive.Label\n ref={ref}\n className={cn(\n \"hawa-px-2 hawa-py-1.5 hawa-text-sm hawa-font-semibold\",\n inset && \"hawa-pl-8\",\n className\n )}\n {...props}\n />\n));\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <DropdownMenuPrimitive.Separator\n ref={ref}\n className={cn(\"hawa--mx-1 hawa-my-1 hawa-h-px hawa-bg-muted\", className)}\n {...props}\n />\n));\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;\n\nconst DropdownMenuShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n return (\n <span\n className={cn(\n \"hawa-text-xs hawa-tracking-widest hawa-opacity-60\",\n className\n )}\n {...props}\n />\n );\n};\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\";\n\ntype ExtendedDropdownMenuContentProps = Partial<\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n> & {\n // Add any additional types or overrides here, for example:\n // side?: \"left\" | \"right\" | \"top\" | \"bottom\"\n};\ntype ExtendedDropdownMenuTriggerProps = Partial<\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\n> & {\n // Add any additional types or overrides here, for example:\n // side?: \"left\" | \"right\" | \"top\" | \"bottom\"\n};\n\nexport type SubItem = {\n label?: string;\n value?: any;\n icon?: any;\n action?: () => void;\n onMiddleClick?: (e: any) => void;\n highlighted?: boolean;\n disabled?: boolean;\n slug?: string;\n};\nexport type MenuItemType = {\n icon?: React.ReactNode;\n label?: string;\n shortcut?: React.ReactNode;\n badged?: boolean;\n value?: any;\n content?: any;\n slug?: string;\n end?: any;\n presist?: boolean;\n // itemType?: \"separator\" | \"label\" | string;\n itemType?: \"separator\" | \"label\" | \"custom\";\n action?: () => void;\n highlighted?: boolean;\n subitems?: SubItem[];\n disabled?: boolean;\n onMiddleClick?: (e: any) => void;\n onClick?: any;\n};\ninterface DropdownMenuProps {\n trigger?: any;\n items?: MenuItemType[];\n direction?: DirectionType;\n className?: ExtendedDropdownMenuContentProps[\"className\"];\n triggerClassname?: ExtendedDropdownMenuTriggerProps[\"className\"];\n sideOffset?: ExtendedDropdownMenuContentProps[\"sideOffset\"];\n side?: ExtendedDropdownMenuContentProps[\"side\"];\n align?: ExtendedDropdownMenuContentProps[\"align\"];\n alignOffset?: ExtendedDropdownMenuContentProps[\"alignOffset\"];\n width?: \"default\" | \"sm\" | \"lg\" | \"parent\";\n size?: \"default\" | \"sm\";\n onItemSelect?: any;\n onOpenChange?: any;\n header?: React.ReactNode;\n open?: any;\n}\nconst DropdownMenu: React.FC<DropdownMenuProps> = ({\n trigger,\n items,\n direction,\n sideOffset,\n side,\n className,\n triggerClassname,\n align,\n alignOffset,\n onItemSelect,\n size = \"default\",\n width = \"default\",\n header,\n onOpenChange,\n open\n}) => {\n const widthStyles = {\n default: \"hawa-min-w-[8rem]\",\n sm: \"hawa-w-fit\",\n lg: \"hawa-w-[200px]\",\n parent: \"ddm-w-parent\"\n };\n const sizeStyles = {\n default: \"hawa-px-2 hawa-py-3 \",\n sm: \"hawa-text-xs hawa-px-1.5 hawa-py-1.5 \"\n };\n return (\n <DropdownMenuRoot\n onOpenChange={onOpenChange}\n open={open}\n modal={false}\n dir={direction}\n >\n <DropdownMenuTrigger asChild className={triggerClassname}>\n {trigger}\n </DropdownMenuTrigger>\n <DropdownMenuPortal>\n <DropdownMenuContent\n side={side}\n sideOffset={sideOffset}\n className={cn(\n className,\n widthStyles[width],\n \"hawa-flex hawa-flex-col hawa-gap-1\"\n )}\n align={align}\n alignOffset={alignOffset}\n >\n {header && header}\n {items &&\n items.map((item, index) => {\n if (item.itemType === \"separator\") {\n return <DropdownMenuSeparator key={index} />;\n } else if (item.itemType === \"label\") {\n return (\n <DropdownMenuLabel key={index}>\n {item.label}\n </DropdownMenuLabel>\n );\n } else if (item.itemType === \"custom\") {\n return <div key={index}>{item.content}</div>;\n } else {\n return item.subitems ? (\n <DropdownMenuSub key={index}>\n <DropdownMenuSubTrigger\n className={cn(sizeStyles[size])}\n dir={direction}\n >\n {item.icon && item.icon}\n {item.label && item.label}\n </DropdownMenuSubTrigger>\n <DropdownMenuPortal>\n <DropdownMenuSubContent>\n {item.subitems.map((subitem, subIndex) => (\n <DropdownMenuItem\n slug={subitem.slug}\n onMouseDown={(event: any) => {\n if (\n event.button === 1 ||\n (event.button === 0 && event.ctrlKey)\n ) {\n event.preventDefault(); // This line prevents the default behavior of the middle button\n if (subitem.onMiddleClick) {\n subitem.onMiddleClick(item.value);\n }\n }\n }}\n key={subIndex}\n className={cn(\n sizeStyles[size],\n\n !item.icon && !item.label\n ? \"hawa-px-0 hawa-py-0 focus:hawa-bg-transparent\"\n : \"focus:hawa-bg-accent\"\n )}\n disabled={subitem.disabled}\n // className=\"flex flex-row gap-2\"\n onSelect={() => {\n subitem.action && subitem.action();\n if (onItemSelect) {\n onItemSelect(subitem.value);\n }\n }}\n >\n {subitem.icon && subitem.icon}\n {subitem.label && subitem.label}\n </DropdownMenuItem>\n ))}\n </DropdownMenuSubContent>\n </DropdownMenuPortal>\n </DropdownMenuSub>\n ) : (\n <DropdownMenuItem\n slug={item.slug}\n key={index}\n disabled={item.disabled}\n onMouseDown={(event: any) => {\n if (\n event.button === 1 ||\n (event.button === 0 && event.ctrlKey)\n ) {\n event.preventDefault(); // This line prevents the default behavior of the middle button\n if (item.onMiddleClick) {\n item.onMiddleClick(item.value);\n }\n }\n }}\n onClick={(event: any) => {\n if (item.onClick) {\n item.onClick(item.value);\n }\n }}\n onSelect={(e) => {\n if (item.presist) {\n e.preventDefault();\n }\n if (item.action) {\n item.action();\n if (onItemSelect) {\n onItemSelect(item.value);\n }\n } else {\n if (onItemSelect) {\n onItemSelect(item.value);\n }\n }\n }}\n end={item.end}\n shortcut={item.shortcut}\n badged={item.badged}\n className={cn(\n sizeStyles[size],\n !item.icon && !item.label\n ? \"hawa-px-0 hawa-py-0 focus:hawa-bg-transparent \"\n : \"focus:hawa-bg-accent \",\n item.presist && \"focus:hawa-bg-transparent\"\n )}\n >\n {item.icon && item.icon}\n {item.label && item.label}\n </DropdownMenuItem>\n );\n }\n })}\n </DropdownMenuContent>\n </DropdownMenuPortal>\n </DropdownMenuRoot>\n );\n};\ninterface DropdownMenuRadioProps {\n trigger?: React.ReactNode;\n // items?: MenuItemType[];\n // direction?: DirectionType;\n // className?: ExtendedDropdownMenuContentProps[\"className\"];\n // triggerClassname?: ExtendedDropdownMenuTriggerProps[\"className\"];\n // sideOffset?: ExtendedDropdownMenuContentProps[\"sideOffset\"];\n side?: ExtendedDropdownMenuContentProps[\"side\"];\n align?: ExtendedDropdownMenuContentProps[\"align\"];\n // alignOffset?: ExtendedDropdownMenuContentProps[\"alignOffset\"];\n // width?: \"default\" | \"sm\" | \"lg\" | \"parent\";\n // size?: \"default\" | \"sm\";\n // onItemSelect?: any;\n // onOpenChange?: any;\n // header?: React.ReactNode;\n // open?: any;\n options: { label?: any; value: string }[];\n value: string;\n onValueChange: any;\n label?: string;\n}\nconst DropdownMenuRadio: React.FC<DropdownMenuRadioProps> = (props) => {\n return (\n <DropdownMenuRoot>\n <DropdownMenuTrigger asChild>{props.trigger}</DropdownMenuTrigger>\n <DropdownMenuContent align={props.align} side={props.side}>\n {props.label && (\n <>\n <DropdownMenuLabel>{props.label}</DropdownMenuLabel>\n <DropdownMenuSeparator />\n </>\n )}\n <DropdownMenuRadioGroup\n value={props.value}\n onValueChange={props.onValueChange}\n >\n {props.options.map((opt, i) => (\n <DropdownMenuRadioItem key={i} value={opt.value}>\n {opt.label}\n </DropdownMenuRadioItem>\n ))}\n {/* \n <DropdownMenuRadioItem value=\"en\">English</DropdownMenuRadioItem> */}\n </DropdownMenuRadioGroup>\n </DropdownMenuContent>\n </DropdownMenuRoot>\n );\n};\n\nexport {\n DropdownMenu,\n DropdownMenuRoot,\n DropdownMenuRadio,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuGroup,\n DropdownMenuPortal,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuRadioGroup\n};\n"],"mappings":"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","names":["React","React"]}
|
1
|
+
{"version":3,"sources":["../../layout/appTopbar/AppTopbar.tsx","../../elements/dropdownMenu/DropdownMenu.tsx","../../util/index.ts"],"sourcesContent":["import React from \"react\";\n\nimport { DropdownMenu, MenuItemType } from \"@elements/dropdownMenu\";\n\nimport { DirectionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\ntype AppTopbarType = {\n direction?: DirectionType;\n size?: number;\n username?: string;\n email?: string;\n profileMenuItems?: MenuItemType[];\n avatarImage?: string;\n};\n\nexport const AppTopbar: React.FC<AppTopbarType> = ({ ...props }) => {\n const isRTL = props.direction === \"ltr\";\n const size = 1200;\n return (\n <div\n className={cn(\n \"hawa-fixed hawa-left-0 hawa-right-0 hawa-top-0 hawa-z-30 hawa-flex hawa-h-14 hawa-w-full hawa-items-center hawa-justify-between hawa-border-b hawa-bg-primary-foreground hawa-p-2\",\n isRTL ? \"hawa-flex-row-reverse\" : \"hawa-flex-row\"\n )}\n >\n {/* Nav Side Of Navbar */}\n {size > 600 ? (\n <div\n // className={cn(\n // \"dark:hawa-text-white\",\n // isRTL\n // ? [\n // size > 600 ? \"hawa-mr-14\" : \"hawa-mr-2\",\n // keepOpen ? \"hawa-mr-40\" : \"\",\n // ]\n // : [\n // size > 600 ? \"hawa-ml-14\" : \"hawa-ml-2\",\n // keepOpen ? \"hawa-ml-40\" : \"\",\n // ]\n // )}\n // style={\n // isRTL\n // ? {\n // marginRight: `${\n // drawerSizeStyle[keepOpen ? \"opened\" : \"closed\"][\n // drawerSize\n // ]\n // }px`,\n // }\n // : {\n // marginLeft: `${\n // drawerSizeStyle[keepOpen ? \"opened\" : \"closed\"][\n // drawerSize\n // ]\n // }px`,\n // }\n // }\n >\n {/* {props.pageTitle} */}\n page title\n </div>\n ) : (\n // Mobile Drawer Menu Button\n <div\n dir={props.direction}\n className=\"hawa-flex hawa-items-center hawa-justify-center hawa-gap-0.5\"\n >\n <div\n // onClick={() => setOpenSideMenu(true)}\n className=\"hawa-z-40 hawa-mx-1 hawa-cursor-pointer hawa-rounded hawa-p-2 hawa-transition-all hover:hawa-bg-gray-100\"\n >\n <svg\n stroke=\"currentColor\"\n fill=\"currentColor\"\n strokeWidth={0}\n viewBox=\"0 0 20 20\"\n aria-hidden=\"true\"\n height=\"1.6em\"\n width=\"1.6em\"\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z\"\n ></path>\n </svg>\n </div>\n {/* Mobile Page Title */}\n {/* {props.pageTitle ? (\n <div className=\"hawa-text-sm\">{props.pageTitle}</div>\n ) : (\n <div></div>\n )} */}\n Mobile title\n </div>\n )}\n\n <div\n className={cn(\n \"hawa-flex hawa-gap-2 dark:hawa-text-white\",\n isRTL ? \"hawa-flex-row-reverse\" : \"hawa-flex-row\"\n )}\n >\n {/* User Info */}\n {size > 600 ? (\n <div\n className={\n isRTL\n ? \"hawa-text-left hawa-text-xs\"\n : \"hawa-text-right hawa-text-xs\"\n }\n >\n <div className=\"hawa-font-bold\">{props.username}</div>{\" \"}\n <div>{props.email}</div>\n </div>\n ) : null}\n {/* Profile Icon & Menu */}\n <DropdownMenu\n triggerClassname=\"hawa-mx-2\"\n align=\"end\"\n alignOffset={8}\n side={\"bottom\"}\n sideOffset={5}\n // width={props.profileMenuWidth}\n direction={isRTL ? \"rtl\" : \"ltr\"}\n items={props.profileMenuItems}\n onItemSelect={(e: any) => console.log(\"selecting item \", e)}\n trigger={\n <div className=\"hawa-relative hawa-h-8 hawa-w-8 hawa-cursor-pointer hawa-overflow-clip hawa-rounded hawa-ring-1 hawa-ring-primary/30 dark:hawa-bg-gray-600\">\n {props.avatarImage ? (\n <img src={props.avatarImage} alt=\"User Avatar\" />\n ) : (\n <svg\n aria-label=\"Avatar Icon\"\n className=\"hawa-absolute hawa--left-1 hawa-h-10 hawa-w-10 hawa-text-gray-400\"\n fill=\"currentColor\"\n viewBox=\"0 0 20 20\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z\"\n clipRule=\"evenodd\"\n ></path>\n </svg>\n )}\n </div>\n }\n />\n </div>\n </div>\n );\n};\n","import * as React from \"react\";\n\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\n\nimport { DirectionType } from \"../../types/commonTypes\";\nimport { cn } from \"@util/index\";\n\nconst DropdownMenuRoot = DropdownMenuPrimitive.Root;\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group;\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal;\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub;\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n inset?: boolean;\n }\n>(({ className, inset, children, ...props }, ref) => (\n <DropdownMenuPrimitive.SubTrigger\n ref={ref}\n className={cn(\n \"hawa-flex hawa-cursor-default hawa-select-none hawa-items-center hawa-justify-between hawa-rounded-sm hawa-text-sm hawa-outline-none focus:hawa-bg-accent data-[state=open]:hawa-bg-accent\",\n inset && \"hawa-pl-8\",\n className\n )}\n {...props}\n >\n <div className=\"hawa-flex hawa-flex-row hawa-items-center hawa-gap-2\">\n {children}\n </div>{\" \"}\n <svg\n aria-label=\"Chevron Right Icon\"\n stroke=\"currentColor\"\n fill=\"currentColor\"\n strokeWidth=\"0\"\n viewBox=\"0 0 16 16\"\n height=\"1em\"\n width=\"1em\"\n className={cn(props.dir === \"rtl\" ? \"hawa-rotate-180\" : \"\")}\n >\n <path\n fillRule=\"evenodd\"\n d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"\n ></path>\n </svg>\n </DropdownMenuPrimitive.SubTrigger>\n));\nDropdownMenuSubTrigger.displayName =\n DropdownMenuPrimitive.SubTrigger.displayName;\n\nconst DropdownMenuSubContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n <DropdownMenuPrimitive.SubContent\n ref={ref}\n className={cn(\n \"hawa-z-50 hawa-min-w-[8rem] hawa-gap-1 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-p-1 hawa-text-popover-foreground hawa-shadow-lg data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2\",\n className\n )}\n {...props}\n />\n));\nDropdownMenuSubContent.displayName =\n DropdownMenuPrimitive.SubContent.displayName;\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n \"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-p-1 hawa-text-popover-foreground hawa-shadow-md data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2\",\n className\n )}\n {...props}\n />\n </DropdownMenuPrimitive.Portal>\n));\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;\n\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean;\n end?: any;\n shortcut?: React.ReactNode;\n badged?: boolean;\n slug?: string;\n }\n>(({ className, inset, badged, slug, ...props }, ref) => {\n return (\n <a href={slug}>\n <DropdownMenuPrimitive.Item\n disabled={props.disabled}\n ref={ref}\n className={cn(\n \"hawa-relative hawa-flex hawa-cursor-pointer hawa-select-none hawa-items-center hawa-justify-between hawa-rounded-sm hawa-text-sm hawa-outline-none hawa-transition-colors focus:hawa-text-accent-foreground data-[disabled]:hawa-pointer-events-none data-[disabled]:hawa-opacity-50\",\n inset && \"hawa-pl-8\",\n props.end &&\n Array.isArray(props.children) &&\n props.children[1] &&\n \"hawa-gap-6\",\n className\n )}\n {...props}\n >\n <div className=\"hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 \">\n {props.children}\n </div>\n\n {props.end && props.end}\n {!props.end && props.shortcut && (\n <DropdownMenuShortcut>{props.shortcut}</DropdownMenuShortcut>\n )}\n {!props.end && badged && (\n <div className=\"hawa-h-3 hawa-w-3 hawa-rounded-full hawa-bg-red-500\" />\n )}\n </DropdownMenuPrimitive.Item>\n </a>\n );\n});\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n <DropdownMenuPrimitive.CheckboxItem\n ref={ref}\n className={cn(\n \"hawa-relative hawa-flex hawa-cursor-default hawa-select-none hawa-items-center hawa-rounded-sm hawa-py-1.5 hawa-pl-8 hawa-pr-2 hawa-text-sm hawa-outline-none hawa-transition-colors focus:hawa-bg-accent focus:hawa-text-accent-foreground data-[disabled]:hawa-pointer-events-none data-[disabled]:hawa-opacity-50\",\n className\n )}\n checked={checked}\n {...props}\n >\n <span className=\"hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center\">\n <DropdownMenuPrimitive.ItemIndicator>\n {/* <Check className=\"h-4 w-4\" /> */}\n <svg\n aria-label=\"Check Mark\"\n stroke=\"currentColor\"\n fill=\"currentColor\"\n strokeWidth=\"0\"\n viewBox=\"0 0 512 512\"\n height=\"0.60em\"\n width=\"0.60em\"\n >\n <path d=\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\"></path>\n </svg>{\" \"}\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.CheckboxItem>\n));\nDropdownMenuCheckboxItem.displayName =\n DropdownMenuPrimitive.CheckboxItem.displayName;\n\nconst DropdownMenuRadioItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n <DropdownMenuPrimitive.RadioItem\n ref={ref}\n className={cn(\n \"hawa-relative hawa-flex hawa-cursor-pointer hawa-select-none hawa-items-center hawa-rounded-sm hawa-py-1.5 hawa-pl-8 hawa-pr-2 hawa-text-sm hawa-outline-none hawa-transition-colors focus:hawa-bg-accent focus:hawa-text-accent-foreground data-[disabled]:hawa-pointer-events-none data-[disabled]:hawa-opacity-50\",\n className\n )}\n {...props}\n >\n <span className=\"hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center\">\n <DropdownMenuPrimitive.ItemIndicator>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n aria-label=\"Circle\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className=\"hawa-h-2 hawa-w-2 hawa-fill-current\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n </svg>\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.RadioItem>\n));\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n inset?: boolean;\n }\n>(({ className, inset, ...props }, ref) => (\n <DropdownMenuPrimitive.Label\n ref={ref}\n className={cn(\n \"hawa-px-2 hawa-py-1.5 hawa-text-sm hawa-font-semibold\",\n inset && \"hawa-pl-8\",\n className\n )}\n {...props}\n />\n));\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <DropdownMenuPrimitive.Separator\n ref={ref}\n className={cn(\"hawa--mx-1 hawa-my-1 hawa-h-px hawa-bg-muted\", className)}\n {...props}\n />\n));\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;\n\nconst DropdownMenuShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n return (\n <span\n className={cn(\n \"hawa-text-xs hawa-tracking-widest hawa-opacity-60\",\n className\n )}\n {...props}\n />\n );\n};\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\";\n\ntype ExtendedDropdownMenuContentProps = Partial<\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n> & {\n // Add any additional types or overrides here, for example:\n // side?: \"left\" | \"right\" | \"top\" | \"bottom\"\n};\ntype ExtendedDropdownMenuTriggerProps = Partial<\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\n> & {\n // Add any additional types or overrides here, for example:\n // side?: \"left\" | \"right\" | \"top\" | \"bottom\"\n};\n\nexport type SubItem = {\n label?: string;\n value?: any;\n icon?: any;\n action?: () => void;\n onMiddleClick?: (e: any) => void;\n highlighted?: boolean;\n disabled?: boolean;\n slug?: string;\n};\nexport type MenuItemType = {\n icon?: React.ReactNode;\n label?: string;\n shortcut?: React.ReactNode;\n badged?: boolean;\n value?: any;\n content?: any;\n slug?: string;\n end?: any;\n presist?: boolean;\n // itemType?: \"separator\" | \"label\" | string;\n itemType?: \"separator\" | \"label\" | \"custom\";\n action?: () => void;\n highlighted?: boolean;\n subitems?: SubItem[];\n disabled?: boolean;\n onMiddleClick?: (e: any) => void;\n onClick?: any;\n};\ninterface DropdownMenuProps {\n trigger?: any;\n items?: MenuItemType[];\n direction?: DirectionType;\n className?: ExtendedDropdownMenuContentProps[\"className\"];\n triggerClassname?: ExtendedDropdownMenuTriggerProps[\"className\"];\n sideOffset?: ExtendedDropdownMenuContentProps[\"sideOffset\"];\n side?: ExtendedDropdownMenuContentProps[\"side\"];\n align?: ExtendedDropdownMenuContentProps[\"align\"];\n alignOffset?: ExtendedDropdownMenuContentProps[\"alignOffset\"];\n width?: \"default\" | \"sm\" | \"lg\" | \"parent\";\n size?: \"default\" | \"sm\";\n onItemSelect?: any;\n onOpenChange?: any;\n header?: React.ReactNode;\n open?: any;\n}\nconst DropdownMenu: React.FC<DropdownMenuProps> = ({\n trigger,\n items,\n direction,\n sideOffset,\n side,\n className,\n triggerClassname,\n align,\n alignOffset,\n onItemSelect,\n size = \"default\",\n width = \"default\",\n header,\n onOpenChange,\n open\n}) => {\n const widthStyles = {\n default: \"hawa-min-w-[8rem]\",\n sm: \"hawa-w-fit\",\n lg: \"hawa-w-[200px]\",\n parent: \"ddm-w-parent\"\n };\n const sizeStyles = {\n default: \"hawa-px-2 hawa-py-3 \",\n sm: \"hawa-text-xs hawa-px-1.5 hawa-py-1.5 \"\n };\n return (\n <DropdownMenuRoot\n onOpenChange={onOpenChange}\n open={open}\n modal={false}\n dir={direction}\n >\n <DropdownMenuTrigger asChild className={triggerClassname}>\n {trigger}\n </DropdownMenuTrigger>\n <DropdownMenuPortal>\n <DropdownMenuContent\n side={side}\n sideOffset={sideOffset}\n className={cn(\n className,\n widthStyles[width],\n \"hawa-flex hawa-flex-col hawa-gap-1\"\n )}\n align={align}\n alignOffset={alignOffset}\n >\n {header && header}\n {items &&\n items.map((item, index) => {\n if (item.itemType === \"separator\") {\n return <DropdownMenuSeparator key={index} />;\n } else if (item.itemType === \"label\") {\n return (\n <DropdownMenuLabel key={index}>\n {item.label}\n </DropdownMenuLabel>\n );\n } else if (item.itemType === \"custom\") {\n return <div key={index}>{item.content}</div>;\n } else {\n return item.subitems ? (\n <DropdownMenuSub key={index}>\n <DropdownMenuSubTrigger\n className={cn(sizeStyles[size])}\n dir={direction}\n >\n {item.icon && item.icon}\n {item.label && item.label}\n </DropdownMenuSubTrigger>\n <DropdownMenuPortal>\n <DropdownMenuSubContent>\n {item.subitems.map((subitem, subIndex) => (\n <DropdownMenuItem\n slug={subitem.slug}\n onMouseDown={(event: any) => {\n if (\n event.button === 1 ||\n (event.button === 0 && event.ctrlKey)\n ) {\n event.preventDefault(); // This line prevents the default behavior of the middle button\n if (subitem.onMiddleClick) {\n subitem.onMiddleClick(item.value);\n }\n }\n }}\n key={subIndex}\n className={cn(\n sizeStyles[size],\n\n !item.icon && !item.label\n ? \"hawa-px-0 hawa-py-0 focus:hawa-bg-transparent\"\n : \"focus:hawa-bg-accent\"\n )}\n disabled={subitem.disabled}\n // className=\"flex flex-row gap-2\"\n onSelect={() => {\n subitem.action && subitem.action();\n if (onItemSelect) {\n onItemSelect(subitem.value);\n }\n }}\n >\n {subitem.icon && subitem.icon}\n {subitem.label && subitem.label}\n </DropdownMenuItem>\n ))}\n </DropdownMenuSubContent>\n </DropdownMenuPortal>\n </DropdownMenuSub>\n ) : (\n <DropdownMenuItem\n slug={item.slug}\n key={index}\n disabled={item.disabled}\n onMouseDown={(event: any) => {\n if (\n event.button === 1 ||\n (event.button === 0 && event.ctrlKey)\n ) {\n event.preventDefault(); // This line prevents the default behavior of the middle button\n if (item.onMiddleClick) {\n item.onMiddleClick(item.value);\n }\n }\n }}\n onClick={(event: any) => {\n if (item.onClick) {\n item.onClick(item.value);\n }\n }}\n onSelect={(e) => {\n if (item.presist) {\n e.preventDefault();\n }\n if (item.action) {\n item.action();\n if (onItemSelect) {\n onItemSelect(item.value);\n }\n } else {\n if (onItemSelect) {\n onItemSelect(item.value);\n }\n }\n }}\n end={item.end}\n shortcut={item.shortcut}\n badged={item.badged}\n className={cn(\n sizeStyles[size],\n !item.icon && !item.label\n ? \"hawa-px-0 hawa-py-0 focus:hawa-bg-transparent \"\n : \"focus:hawa-bg-accent \",\n item.presist && \"focus:hawa-bg-transparent\"\n )}\n >\n {item.icon && item.icon}\n {item.label && item.label}\n </DropdownMenuItem>\n );\n }\n })}\n </DropdownMenuContent>\n </DropdownMenuPortal>\n </DropdownMenuRoot>\n );\n};\ninterface DropdownMenuRadioProps {\n trigger?: React.ReactNode;\n // items?: MenuItemType[];\n // direction?: DirectionType;\n // className?: ExtendedDropdownMenuContentProps[\"className\"];\n // triggerClassname?: ExtendedDropdownMenuTriggerProps[\"className\"];\n // sideOffset?: ExtendedDropdownMenuContentProps[\"sideOffset\"];\n side?: ExtendedDropdownMenuContentProps[\"side\"];\n align?: ExtendedDropdownMenuContentProps[\"align\"];\n // alignOffset?: ExtendedDropdownMenuContentProps[\"alignOffset\"];\n // width?: \"default\" | \"sm\" | \"lg\" | \"parent\";\n // size?: \"default\" | \"sm\";\n // onItemSelect?: any;\n // onOpenChange?: any;\n // header?: React.ReactNode;\n // open?: any;\n options: { label?: any; value: string }[];\n value: string;\n onValueChange: any;\n label?: string;\n}\nconst DropdownMenuRadio: React.FC<DropdownMenuRadioProps> = (props) => {\n return (\n <DropdownMenuRoot>\n <DropdownMenuTrigger asChild>{props.trigger}</DropdownMenuTrigger>\n <DropdownMenuContent align={props.align} side={props.side}>\n {props.label && (\n <>\n <DropdownMenuLabel>{props.label}</DropdownMenuLabel>\n <DropdownMenuSeparator />\n </>\n )}\n <DropdownMenuRadioGroup\n value={props.value}\n onValueChange={props.onValueChange}\n >\n {props.options.map((opt, i) => (\n <DropdownMenuRadioItem key={i} value={opt.value}>\n {opt.label}\n </DropdownMenuRadioItem>\n ))}\n {/* \n <DropdownMenuRadioItem value=\"en\">English</DropdownMenuRadioItem> */}\n </DropdownMenuRadioGroup>\n </DropdownMenuContent>\n </DropdownMenuRoot>\n );\n};\n\nexport {\n DropdownMenu,\n DropdownMenuRoot,\n DropdownMenuRadio,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuGroup,\n DropdownMenuPortal,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuRadioGroup\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":"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","names":["React","React"]}
|
package/dist/avatar/index.js
CHANGED
@@ -49,7 +49,8 @@ var import_react = __toESM(require("react"));
|
|
49
49
|
var FileUploader = ({ handleFile, className }) => {
|
50
50
|
const hiddenFileInput = (0, import_react.useRef)(null);
|
51
51
|
const handleClick = () => {
|
52
|
-
|
52
|
+
var _a;
|
53
|
+
(_a = hiddenFileInput.current) == null ? void 0 : _a.click();
|
53
54
|
};
|
54
55
|
const handleChange = (event) => {
|
55
56
|
const fileUploaded = event.target.files[0];
|
package/dist/avatar/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/avatar/index.ts","../../elements/avatar/Avatar.tsx","../../util/index.ts","../../elements/fileUploader/FileUploader.tsx"],"sourcesContent":["export * from \"./Avatar\";\n","import React from \"react\";\n\nimport { RadiusType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\nimport { FileUploader } from \"../fileUploader\";\n\ninterface AvatarProps {\n isUploadable?: boolean;\n src?: string;\n alt?: string;\n size?:\n | \"2xs\"\n | \"xs\"\n | \"sm\"\n | \"default\"\n | \"lg\"\n | \"xl\"\n | \"2xl\"\n | \"3xl\"\n | \"4xl\"\n | \"5xl\"\n | \"6xl\";\n radius?: RadiusType;\n className?: string;\n icon?: React.ReactNode;\n}\nexport const Avatar: React.FC<AvatarProps> = ({\n isUploadable,\n src,\n alt,\n size = \"default\",\n radius = \"inherit\",\n icon,\n className,\n ...props\n}) => {\n let sizeStyles = {\n \"2xs\": \"hawa-h-4 hawa-w-4\",\n xs: \"hawa-h-6 hawa-w-6\",\n sm: \"hawa-h-8 hawa-w-8\",\n default: \"hawa-h-10 hawa-w-10\",\n lg: \"hawa-h-12 hawa-w-12\",\n xl: \"hawa-h-14 hawa-w-14\",\n \"2xl\": \"hawa-h-16 hawa-w-16\",\n \"3xl\": \"hawa-h-[72px] hawa-w-[72px]\",\n \"4xl\": \"hawa-h-20 hawa-w-20\",\n \"5xl\": \"hawa-h-[88px] hawa-w-[88px]\",\n \"6xl\": \"hawa-h-24 hawa-w-24\"\n };\n let radiusStyles = {\n full: \"hawa-rounded-full\",\n inherit: \"hawa-rounded\",\n none: \"hawa-rounded-none\"\n };\n return (\n <div\n className={cn(\n \"hawa-relative hawa-bg-card hawa-p-0\",\n sizeStyles[size],\n radiusStyles[radius],\n className\n )}\n >\n <FileUploader\n className={cn(\n \"hawa-absolute hawa-left-0 hawa-top-0 hawa-w-full hawa-cursor-pointer hawa-bg-red-400 hawa-opacity-0\",\n sizeStyles[size],\n radiusStyles[radius],\n (!isUploadable || !!src) && \"hawa-hidden\"\n )}\n />\n\n <img\n className={cn(\n \"hawa-blue-400 hawa-object-cover\",\n sizeStyles[size],\n radiusStyles[radius],\n !src && \"hawa-hidden\"\n )}\n src={src}\n alt={alt}\n />\n {!src && !isUploadable && (\n <div\n className={cn(\n sizeStyles[size],\n \"hawa-flex hawa-flex-col hawa-items-center hawa-justify-center\"\n )}\n >\n {icon ? (\n icon\n ) : (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n style={{ width: \"50%\", opacity: 0.35 }}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"8\" r=\"5\" />\n <path d=\"M20 21a8 8 0 1 0-16 0\" />\n </svg>\n )}\n </div>\n )}\n </div>\n );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import React, { useRef } from \"react\";\n\nexport const FileUploader = ({ handleFile, className }: any) => {\n const hiddenFileInput = useRef<HTMLInputElement>(null);\n const handleClick = () => {\n hiddenFileInput.current?.click();\n };\n const handleChange = (event: any) => {\n const fileUploaded = event.target.files[0];\n handleFile(fileUploaded);\n };\n return (\n <div className={className}>\n <div className=\"hawa-h-full hawa-w-full\" onClick={handleClick} />\n <input\n type=\"file\"\n onChange={handleChange}\n ref={hiddenFileInput}\n style={{ display: \"none\" }}\n />\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAAkB;;;ACAlB,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ACLA,mBAA8B;AAEvB,IAAM,eAAe,CAAC,EAAE,YAAY,UAAU,MAAW;AAC9D,QAAM,sBAAkB,qBAAyB,IAAI;AACrD,QAAM,cAAc,MAAM;
|
1
|
+
{"version":3,"sources":["../../elements/avatar/index.ts","../../elements/avatar/Avatar.tsx","../../util/index.ts","../../elements/fileUploader/FileUploader.tsx"],"sourcesContent":["export * from \"./Avatar\";\n","import React from \"react\";\n\nimport { RadiusType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\nimport { FileUploader } from \"../fileUploader\";\n\ninterface AvatarProps {\n isUploadable?: boolean;\n src?: string;\n alt?: string;\n size?:\n | \"2xs\"\n | \"xs\"\n | \"sm\"\n | \"default\"\n | \"lg\"\n | \"xl\"\n | \"2xl\"\n | \"3xl\"\n | \"4xl\"\n | \"5xl\"\n | \"6xl\";\n radius?: RadiusType;\n className?: string;\n icon?: React.ReactNode;\n}\nexport const Avatar: React.FC<AvatarProps> = ({\n isUploadable,\n src,\n alt,\n size = \"default\",\n radius = \"inherit\",\n icon,\n className,\n ...props\n}) => {\n let sizeStyles = {\n \"2xs\": \"hawa-h-4 hawa-w-4\",\n xs: \"hawa-h-6 hawa-w-6\",\n sm: \"hawa-h-8 hawa-w-8\",\n default: \"hawa-h-10 hawa-w-10\",\n lg: \"hawa-h-12 hawa-w-12\",\n xl: \"hawa-h-14 hawa-w-14\",\n \"2xl\": \"hawa-h-16 hawa-w-16\",\n \"3xl\": \"hawa-h-[72px] hawa-w-[72px]\",\n \"4xl\": \"hawa-h-20 hawa-w-20\",\n \"5xl\": \"hawa-h-[88px] hawa-w-[88px]\",\n \"6xl\": \"hawa-h-24 hawa-w-24\"\n };\n let radiusStyles = {\n full: \"hawa-rounded-full\",\n inherit: \"hawa-rounded\",\n none: \"hawa-rounded-none\"\n };\n return (\n <div\n className={cn(\n \"hawa-relative hawa-bg-card hawa-p-0\",\n sizeStyles[size],\n radiusStyles[radius],\n className\n )}\n >\n <FileUploader\n className={cn(\n \"hawa-absolute hawa-left-0 hawa-top-0 hawa-w-full hawa-cursor-pointer hawa-bg-red-400 hawa-opacity-0\",\n sizeStyles[size],\n radiusStyles[radius],\n (!isUploadable || !!src) && \"hawa-hidden\"\n )}\n />\n\n <img\n className={cn(\n \"hawa-blue-400 hawa-object-cover\",\n sizeStyles[size],\n radiusStyles[radius],\n !src && \"hawa-hidden\"\n )}\n src={src}\n alt={alt}\n />\n {!src && !isUploadable && (\n <div\n className={cn(\n sizeStyles[size],\n \"hawa-flex hawa-flex-col hawa-items-center hawa-justify-center\"\n )}\n >\n {icon ? (\n icon\n ) : (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n style={{ width: \"50%\", opacity: 0.35 }}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"8\" r=\"5\" />\n <path d=\"M20 21a8 8 0 1 0-16 0\" />\n </svg>\n )}\n </div>\n )}\n </div>\n );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import React, { useRef } from \"react\";\n\nexport const FileUploader = ({ handleFile, className }: any) => {\n const hiddenFileInput = useRef<HTMLInputElement>(null);\n const handleClick = () => {\n hiddenFileInput.current?.click();\n };\n const handleChange = (event: any) => {\n const fileUploaded = event.target.files[0];\n handleFile(fileUploaded);\n };\n return (\n <div className={className}>\n <div className=\"hawa-h-full hawa-w-full\" onClick={handleClick} />\n <input\n type=\"file\"\n onChange={handleChange}\n ref={hiddenFileInput}\n style={{ display: \"none\" }}\n />\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAAkB;;;ACAlB,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ACLA,mBAA8B;AAEvB,IAAM,eAAe,CAAC,EAAE,YAAY,UAAU,MAAW;AAC9D,QAAM,sBAAkB,qBAAyB,IAAI;AACrD,QAAM,cAAc,MAAM;AAJ5B;AAKI,0BAAgB,YAAhB,mBAAyB;AAAA,EAC3B;AACA,QAAM,eAAe,CAAC,UAAe;AACnC,UAAM,eAAe,MAAM,OAAO,MAAM,CAAC;AACzC,eAAW,YAAY;AAAA,EACzB;AACA,SACE,6BAAAC,QAAA,cAAC,SAAI,aACH,6BAAAA,QAAA,cAAC,SAAI,WAAU,2BAA0B,SAAS,aAAa,GAC/D,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAO,EAAE,SAAS,OAAO;AAAA;AAAA,EAC3B,CACF;AAEJ;;;AFKO,IAAM,SAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI,aAAa;AAAA,IACf,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACA,MAAI,eAAe;AAAA,IACjB,MAAM;AAAA,IACN,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AACA,SACE,8BAAAC,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,WAAW,IAAI;AAAA,QACf,aAAa,MAAM;AAAA,QACnB;AAAA,MACF;AAAA;AAAA,IAEA,8BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,WAAW,IAAI;AAAA,UACf,aAAa,MAAM;AAAA,WAClB,CAAC,gBAAgB,CAAC,CAAC,QAAQ;AAAA,QAC9B;AAAA;AAAA,IACF;AAAA,IAEA,8BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,WAAW,IAAI;AAAA,UACf,aAAa,MAAM;AAAA,UACnB,CAAC,OAAO;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACC,CAAC,OAAO,CAAC,gBACR,8BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT,WAAW,IAAI;AAAA,UACf;AAAA,QACF;AAAA;AAAA,MAEC,OACC,OAEA,8BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAO,EAAE,OAAO,OAAO,SAAS,KAAK;AAAA,UACrC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA;AAAA,QAEf,8BAAAA,QAAA,cAAC,YAAO,IAAG,MAAK,IAAG,KAAI,GAAE,KAAI;AAAA,QAC7B,8BAAAA,QAAA,cAAC,UAAK,GAAE,yBAAwB;AAAA,MAClC;AAAA,IAEJ;AAAA,EAEJ;AAEJ;","names":["import_react","React","React"]}
|
package/dist/avatar/index.mjs
CHANGED
@@ -1,16 +1,20 @@
|
|
1
|
-
import {
|
2
|
-
cn
|
3
|
-
} from "../chunk-CBRGWUZG.mjs";
|
4
|
-
|
5
1
|
// elements/avatar/Avatar.tsx
|
6
2
|
import React2 from "react";
|
7
3
|
|
4
|
+
// util/index.ts
|
5
|
+
import { clsx } from "clsx";
|
6
|
+
import { twMerge } from "tailwind-merge";
|
7
|
+
function cn(...inputs) {
|
8
|
+
return twMerge(clsx(inputs));
|
9
|
+
}
|
10
|
+
|
8
11
|
// elements/fileUploader/FileUploader.tsx
|
9
12
|
import React, { useRef } from "react";
|
10
13
|
var FileUploader = ({ handleFile, className }) => {
|
11
14
|
const hiddenFileInput = useRef(null);
|
12
15
|
const handleClick = () => {
|
13
|
-
|
16
|
+
var _a;
|
17
|
+
(_a = hiddenFileInput.current) == null ? void 0 : _a.click();
|
14
18
|
};
|
15
19
|
const handleChange = (event) => {
|
16
20
|
const fileUploaded = event.target.files[0];
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/avatar/Avatar.tsx","../../elements/fileUploader/FileUploader.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { RadiusType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\nimport { FileUploader } from \"../fileUploader\";\n\ninterface AvatarProps {\n isUploadable?: boolean;\n src?: string;\n alt?: string;\n size?:\n | \"2xs\"\n | \"xs\"\n | \"sm\"\n | \"default\"\n | \"lg\"\n | \"xl\"\n | \"2xl\"\n | \"3xl\"\n | \"4xl\"\n | \"5xl\"\n | \"6xl\";\n radius?: RadiusType;\n className?: string;\n icon?: React.ReactNode;\n}\nexport const Avatar: React.FC<AvatarProps> = ({\n isUploadable,\n src,\n alt,\n size = \"default\",\n radius = \"inherit\",\n icon,\n className,\n ...props\n}) => {\n let sizeStyles = {\n \"2xs\": \"hawa-h-4 hawa-w-4\",\n xs: \"hawa-h-6 hawa-w-6\",\n sm: \"hawa-h-8 hawa-w-8\",\n default: \"hawa-h-10 hawa-w-10\",\n lg: \"hawa-h-12 hawa-w-12\",\n xl: \"hawa-h-14 hawa-w-14\",\n \"2xl\": \"hawa-h-16 hawa-w-16\",\n \"3xl\": \"hawa-h-[72px] hawa-w-[72px]\",\n \"4xl\": \"hawa-h-20 hawa-w-20\",\n \"5xl\": \"hawa-h-[88px] hawa-w-[88px]\",\n \"6xl\": \"hawa-h-24 hawa-w-24\"\n };\n let radiusStyles = {\n full: \"hawa-rounded-full\",\n inherit: \"hawa-rounded\",\n none: \"hawa-rounded-none\"\n };\n return (\n <div\n className={cn(\n \"hawa-relative hawa-bg-card hawa-p-0\",\n sizeStyles[size],\n radiusStyles[radius],\n className\n )}\n >\n <FileUploader\n className={cn(\n \"hawa-absolute hawa-left-0 hawa-top-0 hawa-w-full hawa-cursor-pointer hawa-bg-red-400 hawa-opacity-0\",\n sizeStyles[size],\n radiusStyles[radius],\n (!isUploadable || !!src) && \"hawa-hidden\"\n )}\n />\n\n <img\n className={cn(\n \"hawa-blue-400 hawa-object-cover\",\n sizeStyles[size],\n radiusStyles[radius],\n !src && \"hawa-hidden\"\n )}\n src={src}\n alt={alt}\n />\n {!src && !isUploadable && (\n <div\n className={cn(\n sizeStyles[size],\n \"hawa-flex hawa-flex-col hawa-items-center hawa-justify-center\"\n )}\n >\n {icon ? (\n icon\n ) : (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n style={{ width: \"50%\", opacity: 0.35 }}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"8\" r=\"5\" />\n <path d=\"M20 21a8 8 0 1 0-16 0\" />\n </svg>\n )}\n </div>\n )}\n </div>\n );\n};\n","import React, { useRef } from \"react\";\n\nexport const FileUploader = ({ handleFile, className }: any) => {\n const hiddenFileInput = useRef<HTMLInputElement>(null);\n const handleClick = () => {\n hiddenFileInput.current?.click();\n };\n const handleChange = (event: any) => {\n const fileUploaded = event.target.files[0];\n handleFile(fileUploaded);\n };\n return (\n <div className={className}>\n <div className=\"hawa-h-full hawa-w-full\" onClick={handleClick} />\n <input\n type=\"file\"\n onChange={handleChange}\n ref={hiddenFileInput}\n style={{ display: \"none\" }}\n />\n </div>\n );\n};\n"],"mappings":"
|
1
|
+
{"version":3,"sources":["../../elements/avatar/Avatar.tsx","../../util/index.ts","../../elements/fileUploader/FileUploader.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { RadiusType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\nimport { FileUploader } from \"../fileUploader\";\n\ninterface AvatarProps {\n isUploadable?: boolean;\n src?: string;\n alt?: string;\n size?:\n | \"2xs\"\n | \"xs\"\n | \"sm\"\n | \"default\"\n | \"lg\"\n | \"xl\"\n | \"2xl\"\n | \"3xl\"\n | \"4xl\"\n | \"5xl\"\n | \"6xl\";\n radius?: RadiusType;\n className?: string;\n icon?: React.ReactNode;\n}\nexport const Avatar: React.FC<AvatarProps> = ({\n isUploadable,\n src,\n alt,\n size = \"default\",\n radius = \"inherit\",\n icon,\n className,\n ...props\n}) => {\n let sizeStyles = {\n \"2xs\": \"hawa-h-4 hawa-w-4\",\n xs: \"hawa-h-6 hawa-w-6\",\n sm: \"hawa-h-8 hawa-w-8\",\n default: \"hawa-h-10 hawa-w-10\",\n lg: \"hawa-h-12 hawa-w-12\",\n xl: \"hawa-h-14 hawa-w-14\",\n \"2xl\": \"hawa-h-16 hawa-w-16\",\n \"3xl\": \"hawa-h-[72px] hawa-w-[72px]\",\n \"4xl\": \"hawa-h-20 hawa-w-20\",\n \"5xl\": \"hawa-h-[88px] hawa-w-[88px]\",\n \"6xl\": \"hawa-h-24 hawa-w-24\"\n };\n let radiusStyles = {\n full: \"hawa-rounded-full\",\n inherit: \"hawa-rounded\",\n none: \"hawa-rounded-none\"\n };\n return (\n <div\n className={cn(\n \"hawa-relative hawa-bg-card hawa-p-0\",\n sizeStyles[size],\n radiusStyles[radius],\n className\n )}\n >\n <FileUploader\n className={cn(\n \"hawa-absolute hawa-left-0 hawa-top-0 hawa-w-full hawa-cursor-pointer hawa-bg-red-400 hawa-opacity-0\",\n sizeStyles[size],\n radiusStyles[radius],\n (!isUploadable || !!src) && \"hawa-hidden\"\n )}\n />\n\n <img\n className={cn(\n \"hawa-blue-400 hawa-object-cover\",\n sizeStyles[size],\n radiusStyles[radius],\n !src && \"hawa-hidden\"\n )}\n src={src}\n alt={alt}\n />\n {!src && !isUploadable && (\n <div\n className={cn(\n sizeStyles[size],\n \"hawa-flex hawa-flex-col hawa-items-center hawa-justify-center\"\n )}\n >\n {icon ? (\n icon\n ) : (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n style={{ width: \"50%\", opacity: 0.35 }}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"8\" r=\"5\" />\n <path d=\"M20 21a8 8 0 1 0-16 0\" />\n </svg>\n )}\n </div>\n )}\n </div>\n );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import React, { useRef } from \"react\";\n\nexport const FileUploader = ({ handleFile, className }: any) => {\n const hiddenFileInput = useRef<HTMLInputElement>(null);\n const handleClick = () => {\n hiddenFileInput.current?.click();\n };\n const handleChange = (event: any) => {\n const fileUploaded = event.target.files[0];\n handleFile(fileUploaded);\n };\n return (\n <div className={className}>\n <div className=\"hawa-h-full hawa-w-full\" onClick={handleClick} />\n <input\n type=\"file\"\n onChange={handleChange}\n ref={hiddenFileInput}\n style={{ display: \"none\" }}\n />\n </div>\n );\n};\n"],"mappings":";AAAA,OAAOA,YAAW;;;ACAlB,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACLA,OAAO,SAAS,cAAc;AAEvB,IAAM,eAAe,CAAC,EAAE,YAAY,UAAU,MAAW;AAC9D,QAAM,kBAAkB,OAAyB,IAAI;AACrD,QAAM,cAAc,MAAM;AAJ5B;AAKI,0BAAgB,YAAhB,mBAAyB;AAAA,EAC3B;AACA,QAAM,eAAe,CAAC,UAAe;AACnC,UAAM,eAAe,MAAM,OAAO,MAAM,CAAC;AACzC,eAAW,YAAY;AAAA,EACzB;AACA,SACE,oCAAC,SAAI,aACH,oCAAC,SAAI,WAAU,2BAA0B,SAAS,aAAa,GAC/D;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAO,EAAE,SAAS,OAAO;AAAA;AAAA,EAC3B,CACF;AAEJ;;;AFKO,IAAM,SAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI,aAAa;AAAA,IACf,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACA,MAAI,eAAe;AAAA,IACjB,MAAM;AAAA,IACN,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AACA,SACE,gBAAAC,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,WAAW,IAAI;AAAA,QACf,aAAa,MAAM;AAAA,QACnB;AAAA,MACF;AAAA;AAAA,IAEA,gBAAAA,OAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,WAAW,IAAI;AAAA,UACf,aAAa,MAAM;AAAA,WAClB,CAAC,gBAAgB,CAAC,CAAC,QAAQ;AAAA,QAC9B;AAAA;AAAA,IACF;AAAA,IAEA,gBAAAA,OAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,WAAW,IAAI;AAAA,UACf,aAAa,MAAM;AAAA,UACnB,CAAC,OAAO;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACC,CAAC,OAAO,CAAC,gBACR,gBAAAA,OAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT,WAAW,IAAI;AAAA,UACf;AAAA,QACF;AAAA;AAAA,MAEC,OACC,OAEA,gBAAAA,OAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAO,EAAE,OAAO,OAAO,SAAS,KAAK;AAAA,UACrC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA;AAAA,QAEf,gBAAAA,OAAA,cAAC,YAAO,IAAG,MAAK,IAAG,KAAI,GAAE,KAAI;AAAA,QAC7B,gBAAAA,OAAA,cAAC,UAAK,GAAE,yBAAwB;AAAA,MAClC;AAAA,IAEJ;AAAA,EAEJ;AAEJ;","names":["React","React"]}
|
package/dist/backToTop/index.js
CHANGED
@@ -315,8 +315,9 @@ var BackToTop = ({ ...props }) => {
|
|
315
315
|
return [0, 0];
|
316
316
|
};
|
317
317
|
const onScroll = () => {
|
318
|
+
var _a;
|
318
319
|
let [scrollTop, scrollLeft] = getCoords();
|
319
|
-
let rect2 = props.anchor.current
|
320
|
+
let rect2 = (_a = props.anchor.current) == null ? void 0 : _a.getBoundingClientRect();
|
320
321
|
if (rect2) {
|
321
322
|
setVisible(scrollTop >= rect2.height + (props.paddingThreshold || 100));
|
322
323
|
}
|
@@ -341,17 +342,19 @@ var BackToTop = ({ ...props }) => {
|
|
341
342
|
}
|
342
343
|
}, 1);
|
343
344
|
return () => {
|
344
|
-
|
345
|
+
var _a;
|
346
|
+
(_a = props.anchor.current) == null ? void 0 : _a.removeEventListener("scroll", onScroll);
|
345
347
|
clearInterval(interval);
|
346
348
|
};
|
347
349
|
}, [onScroll, props.anchor]);
|
348
350
|
const getStyles = () => {
|
351
|
+
var _a;
|
349
352
|
if (!props.anchor.current || !self.current)
|
350
353
|
return {};
|
351
354
|
let corner = props.corner || "bottom-right";
|
352
355
|
let [vertical, horizontal] = corner.split("-");
|
353
356
|
let anchorRect = props.anchor.current.getBoundingClientRect();
|
354
|
-
let selfRect = self.current
|
357
|
+
let selfRect = (_a = self.current) == null ? void 0 : _a.getBoundingClientRect();
|
355
358
|
let width = horizontal == "right" ? anchorRect.width - selfRect.width : 0;
|
356
359
|
let height = vertical == "bottom" ? anchorRect.height - selfRect.height : 0;
|
357
360
|
let style = {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/backToTop/index.ts","../../elements/backToTop/BackToTop.tsx","../../util/index.ts","../../elements/button/Button.tsx","../../elements/loading/Loading.tsx"],"sourcesContent":["export * from \"./BackToTop\";\n","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 <span className=\"inline-code\">--primary</span> global CSS variable*/\n color?: string;\n className?: string;\n themeMode?: \"dark\" | \"light\";\n};\n\nexport const Loading: FC<LoadingTypes> = ({\n design = \"spinner\",\n size = \"sm\",\n themeMode = \"light\",\n color,\n ...props\n}) => {\n let sizeStyles = {\n button: \"hawa-h-4 hawa-w-4\",\n xs: \"hawa-h-1 hawa-w-1\",\n sm: \"hawa-h-6 hawa-w-6\",\n normal: \"hawa-h-8 hawa-w-8\",\n lg: \"hawa-h-14 hawa-w-14\",\n xl: \"hawa-h-24 hawa-w-24\"\n };\n\n let animationStyles: any = {\n pulse: \"hawa-animate-in hawa-fade-in hawa-duration-1000\",\n bounce: \"hawa-animate-bounce\"\n };\n switch (design.split(\"-\")[0]) {\n case \"dots\":\n return (\n <div\n className={cn(\"hawa-flex hawa-flex-row hawa-gap-2\", props.className)}\n >\n <div\n className={cn(\n \"hawa-animate-bounce hawa-rounded-full hawa-delay-100 hawa-repeat-infinite\",\n size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n animationStyles[design.split(\"-\")[1]],\n color ? color : \"hawa-bg-primary\"\n )}\n ></div>\n <div\n className={cn(\n \"hawa-animate-bounce hawa-rounded-full hawa-delay-200 hawa-repeat-infinite\",\n size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n animationStyles[design.split(\"-\")[1]],\n color ? color : \"hawa-bg-primary\"\n )}\n ></div>\n <div\n className={cn(\n \"hawa-animate-bounce hawa-rounded-full hawa-delay-300 hawa-repeat-infinite\",\n size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n animationStyles[design.split(\"-\")[1]],\n color ? color : \"hawa-bg-primary\"\n )}\n ></div>\n </div>\n );\n case \"square\":\n return (\n <svg\n className={cn(\"squircle-container\", sizeStyles[size])}\n viewBox=\"0 0 35 35\"\n height=\"35\"\n width=\"35\"\n >\n <rect\n className=\"squircle-track\"\n x=\"2.5\"\n y=\"2.5\"\n fill=\"none\"\n strokeWidth=\"5px\"\n width=\"32.5\"\n height=\"32.5\"\n />\n <rect\n className=\"square-car\"\n x=\"2.5\"\n y=\"2.5\"\n fill=\"none\"\n strokeWidth=\"5px\"\n width=\"32.5\"\n height=\"32.5\"\n pathLength=\"100\"\n />\n </svg>\n );\n case \"squircle\":\n return (\n <svg\n className={cn(\"squircle-container\", sizeStyles[size])}\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 37 37\"\n height=\"37\"\n width=\"37\"\n preserveAspectRatio=\"xMidYMid meet\"\n >\n <path\n className=\"squircle-track\"\n fill=\"none\"\n strokeWidth=\"5\"\n pathLength=\"100\"\n d=\"M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5\"\n ></path>\n <path\n className=\"squircle-car\"\n fill=\"none\"\n strokeWidth=\"5\"\n pathLength=\"100\"\n d=\"M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5\"\n ></path>\n </svg>\n );\n case \"progress\":\n return <div className=\"progress-loading\"></div>;\n case \"orbit\":\n return <div className=\"orbit-container\"></div>;\n\n default:\n return (\n <svg\n className={cn(\"circle-container\", sizeStyles[size])}\n viewBox=\"0 0 40 40\"\n height=\"40\"\n width=\"40\"\n >\n <circle\n className={cn(\"circle-track\", {\n \"hawa-stroke-primary-foreground\": themeMode === \"dark\",\n \"hawa-stroke-primary\": themeMode === \"light\"\n })}\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathLength=\"100\"\n strokeWidth=\"5px\"\n fill=\"none\"\n />\n <circle\n className={cn(\"circle-car\", {\n \"hawa-stroke-primary-foreground\": themeMode === \"dark\",\n \"hawa-stroke-primary\": themeMode === \"light\"\n })}\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathLength=\"100\"\n strokeWidth=\"5px\"\n fill=\"none\"\n />\n </svg>\n );\n // return (\n // <div\n // className={cn(\n // \"hawa-flex hawa-flex-row hawa-gap-x-3\",\n // props.className\n // )}\n // >\n // <div aria-label=\"Loading...\" role=\"status\">\n // <svg\n // className={cn(sizeStyles[size], \"hawa-animate-spin\")}\n // viewBox=\"3 3 18 18\"\n // >\n // <path\n // className=\"hawa-fill-primary/20\"\n // d=\"M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z\"\n // ></path>\n // <path\n // className={color ? color : \"hawa-fill-primary\"}\n // d=\"M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z\"\n // ></path>\n // </svg>\n // </div>\n // </div>\n // );\n }\n};\n"],"mappings":"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","names":["import_react","React","React","rect","React"]}
|
1
|
+
{"version":3,"sources":["../../elements/backToTop/index.ts","../../elements/backToTop/BackToTop.tsx","../../util/index.ts","../../elements/button/Button.tsx","../../elements/loading/Loading.tsx"],"sourcesContent":["export * from \"./BackToTop\";\n","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 <span className=\"inline-code\">--primary</span> global CSS variable*/\n color?: string;\n className?: string;\n themeMode?: \"dark\" | \"light\";\n};\n\nexport const Loading: FC<LoadingTypes> = ({\n design = \"spinner\",\n size = \"sm\",\n themeMode = \"light\",\n color,\n ...props\n}) => {\n let sizeStyles = {\n button: \"hawa-h-4 hawa-w-4\",\n xs: \"hawa-h-1 hawa-w-1\",\n sm: \"hawa-h-6 hawa-w-6\",\n normal: \"hawa-h-8 hawa-w-8\",\n lg: \"hawa-h-14 hawa-w-14\",\n xl: \"hawa-h-24 hawa-w-24\"\n };\n\n let animationStyles: any = {\n pulse: \"hawa-animate-in hawa-fade-in hawa-duration-1000\",\n bounce: \"hawa-animate-bounce\"\n };\n switch (design.split(\"-\")[0]) {\n case \"dots\":\n return (\n <div\n className={cn(\"hawa-flex hawa-flex-row hawa-gap-2\", props.className)}\n >\n <div\n className={cn(\n \"hawa-animate-bounce hawa-rounded-full hawa-delay-100 hawa-repeat-infinite\",\n size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n animationStyles[design.split(\"-\")[1]],\n color ? color : \"hawa-bg-primary\"\n )}\n ></div>\n <div\n className={cn(\n \"hawa-animate-bounce hawa-rounded-full hawa-delay-200 hawa-repeat-infinite\",\n size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n animationStyles[design.split(\"-\")[1]],\n color ? color : \"hawa-bg-primary\"\n )}\n ></div>\n <div\n className={cn(\n \"hawa-animate-bounce hawa-rounded-full hawa-delay-300 hawa-repeat-infinite\",\n size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n animationStyles[design.split(\"-\")[1]],\n color ? color : \"hawa-bg-primary\"\n )}\n ></div>\n </div>\n );\n case \"square\":\n return (\n <svg\n className={cn(\"squircle-container\", sizeStyles[size])}\n viewBox=\"0 0 35 35\"\n height=\"35\"\n width=\"35\"\n >\n <rect\n className=\"squircle-track\"\n x=\"2.5\"\n y=\"2.5\"\n fill=\"none\"\n strokeWidth=\"5px\"\n width=\"32.5\"\n height=\"32.5\"\n />\n <rect\n className=\"square-car\"\n x=\"2.5\"\n y=\"2.5\"\n fill=\"none\"\n strokeWidth=\"5px\"\n width=\"32.5\"\n height=\"32.5\"\n pathLength=\"100\"\n />\n </svg>\n );\n case \"squircle\":\n return (\n <svg\n className={cn(\"squircle-container\", sizeStyles[size])}\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 37 37\"\n height=\"37\"\n width=\"37\"\n preserveAspectRatio=\"xMidYMid meet\"\n >\n <path\n className=\"squircle-track\"\n fill=\"none\"\n strokeWidth=\"5\"\n pathLength=\"100\"\n d=\"M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5\"\n ></path>\n <path\n className=\"squircle-car\"\n fill=\"none\"\n strokeWidth=\"5\"\n pathLength=\"100\"\n d=\"M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5\"\n ></path>\n </svg>\n );\n case \"progress\":\n return <div className=\"progress-loading\"></div>;\n case \"orbit\":\n return <div className=\"orbit-container\"></div>;\n\n default:\n return (\n <svg\n className={cn(\"circle-container\", sizeStyles[size])}\n viewBox=\"0 0 40 40\"\n height=\"40\"\n width=\"40\"\n >\n <circle\n className={cn(\"circle-track\", {\n \"hawa-stroke-primary-foreground\": themeMode === \"dark\",\n \"hawa-stroke-primary\": themeMode === \"light\"\n })}\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathLength=\"100\"\n strokeWidth=\"5px\"\n fill=\"none\"\n />\n <circle\n className={cn(\"circle-car\", {\n \"hawa-stroke-primary-foreground\": themeMode === \"dark\",\n \"hawa-stroke-primary\": themeMode === \"light\"\n })}\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathLength=\"100\"\n strokeWidth=\"5px\"\n fill=\"none\"\n />\n </svg>\n );\n // return (\n // <div\n // className={cn(\n // \"hawa-flex hawa-flex-row hawa-gap-x-3\",\n // props.className\n // )}\n // >\n // <div aria-label=\"Loading...\" role=\"status\">\n // <svg\n // className={cn(sizeStyles[size], \"hawa-animate-spin\")}\n // viewBox=\"3 3 18 18\"\n // >\n // <path\n // className=\"hawa-fill-primary/20\"\n // d=\"M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z\"\n // ></path>\n // <path\n // className={color ? color : \"hawa-fill-primary\"}\n // d=\"M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z\"\n // ></path>\n // </svg>\n // </div>\n // </div>\n // );\n }\n};\n"],"mappings":"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","names":["import_react","React","React","rect","React"]}
|
package/dist/backToTop/index.mjs
CHANGED
@@ -1,10 +1,13 @@
|
|
1
|
-
import {
|
2
|
-
cn
|
3
|
-
} from "../chunk-CBRGWUZG.mjs";
|
4
|
-
|
5
1
|
// elements/backToTop/BackToTop.tsx
|
6
2
|
import React3, { useState, useEffect, useRef } from "react";
|
7
3
|
|
4
|
+
// util/index.ts
|
5
|
+
import { clsx } from "clsx";
|
6
|
+
import { twMerge } from "tailwind-merge";
|
7
|
+
function cn(...inputs) {
|
8
|
+
return twMerge(clsx(inputs));
|
9
|
+
}
|
10
|
+
|
8
11
|
// elements/button/Button.tsx
|
9
12
|
import * as React2 from "react";
|
10
13
|
import { cva } from "class-variance-authority";
|
@@ -276,8 +279,9 @@ var BackToTop = ({ ...props }) => {
|
|
276
279
|
return [0, 0];
|
277
280
|
};
|
278
281
|
const onScroll = () => {
|
282
|
+
var _a;
|
279
283
|
let [scrollTop, scrollLeft] = getCoords();
|
280
|
-
let rect2 = props.anchor.current
|
284
|
+
let rect2 = (_a = props.anchor.current) == null ? void 0 : _a.getBoundingClientRect();
|
281
285
|
if (rect2) {
|
282
286
|
setVisible(scrollTop >= rect2.height + (props.paddingThreshold || 100));
|
283
287
|
}
|
@@ -302,17 +306,19 @@ var BackToTop = ({ ...props }) => {
|
|
302
306
|
}
|
303
307
|
}, 1);
|
304
308
|
return () => {
|
305
|
-
|
309
|
+
var _a;
|
310
|
+
(_a = props.anchor.current) == null ? void 0 : _a.removeEventListener("scroll", onScroll);
|
306
311
|
clearInterval(interval);
|
307
312
|
};
|
308
313
|
}, [onScroll, props.anchor]);
|
309
314
|
const getStyles = () => {
|
315
|
+
var _a;
|
310
316
|
if (!props.anchor.current || !self.current)
|
311
317
|
return {};
|
312
318
|
let corner = props.corner || "bottom-right";
|
313
319
|
let [vertical, horizontal] = corner.split("-");
|
314
320
|
let anchorRect = props.anchor.current.getBoundingClientRect();
|
315
|
-
let selfRect = self.current
|
321
|
+
let selfRect = (_a = self.current) == null ? void 0 : _a.getBoundingClientRect();
|
316
322
|
let width = horizontal == "right" ? anchorRect.width - selfRect.width : 0;
|
317
323
|
let height = vertical == "bottom" ? anchorRect.height - selfRect.height : 0;
|
318
324
|
let style = {
|