@sikka/hawa 0.30.28-next → 0.30.30-next

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/dist/blocks/auth/index.d.mts +3 -1
  2. package/dist/blocks/auth/index.d.ts +3 -1
  3. package/dist/blocks/auth/index.js +21 -8
  4. package/dist/blocks/auth/index.mjs +21 -8
  5. package/dist/blocks/feedback/index.d.mts +1 -1
  6. package/dist/blocks/feedback/index.d.ts +1 -1
  7. package/dist/blocks/feedback/index.js +1 -1
  8. package/dist/blocks/feedback/index.mjs +1 -1
  9. package/dist/blocks/index.d.mts +2 -0
  10. package/dist/blocks/index.d.ts +2 -0
  11. package/dist/blocks/index.js +25 -11
  12. package/dist/blocks/index.mjs +23 -10
  13. package/dist/blocks/misc/index.d.mts +1 -1
  14. package/dist/blocks/misc/index.d.ts +1 -1
  15. package/dist/blocks/misc/index.js +3 -2
  16. package/dist/blocks/misc/index.mjs +3 -2
  17. package/dist/blocks/pricing/index.d.mts +1 -1
  18. package/dist/blocks/pricing/index.d.ts +1 -1
  19. package/dist/{chunk-MNK7PSNG.mjs → chunk-XTGWVGTN.mjs} +3 -2
  20. package/dist/elements/index.js +5 -4
  21. package/dist/elements/index.mjs +3 -3
  22. package/dist/floatBox/index.d.mts +1 -1
  23. package/dist/floatBox/index.d.ts +1 -1
  24. package/dist/floatBox/index.js +2 -2
  25. package/dist/floatBox/index.js.map +1 -1
  26. package/dist/floatBox/index.mjs +2 -2
  27. package/dist/floatBox/index.mjs.map +1 -1
  28. package/dist/index.d.mts +3 -0
  29. package/dist/index.d.ts +3 -0
  30. package/dist/index.js +27 -13
  31. package/dist/index.mjs +27 -13
  32. package/dist/interfaceSettings/index.js +2 -2
  33. package/dist/interfaceSettings/index.js.map +1 -1
  34. package/dist/interfaceSettings/index.mjs +2 -2
  35. package/dist/interfaceSettings/index.mjs.map +1 -1
  36. package/dist/tabs/index.js +3 -2
  37. package/dist/tabs/index.js.map +1 -1
  38. package/dist/tabs/index.mjs +3 -2
  39. package/dist/tabs/index.mjs.map +1 -1
  40. package/dist/{textTypes-DAgkNov8.d.mts → textTypes-0bvyKoeH.d.mts} +1 -0
  41. package/dist/{textTypes-DAgkNov8.d.ts → textTypes-0bvyKoeH.d.ts} +1 -0
  42. package/dist/types/index.d.mts +1 -0
  43. package/dist/types/index.d.ts +1 -0
  44. package/package.json +9 -9
package/dist/elements/index.js CHANGED
@@ -4226,7 +4226,7 @@ var FloatBox = ({
4226
4226
  side = "bottom",
4227
4227
  sideOffset = 40,
4228
4228
  align = "center",
4229
- arrow = true,
4229
+ withArrow = false,
4230
4230
  ...props
4231
4231
  }) => {
4232
4232
  let stylesMap = {
@@ -4268,7 +4268,7 @@ var FloatBox = ({
4268
4268
  "data-side": side,
4269
4269
  "data-floatbox-state": open ? "open" : "closed"
4270
4270
  },
4271
- arrow && /* @__PURE__ */ React39.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
4271
+ withArrow && /* @__PURE__ */ React39.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
4272
4272
  /* @__PURE__ */ React39.createElement("span", null, props.children)
4273
4273
  );
4274
4274
  };
@@ -4381,6 +4381,7 @@ var TabsTrigger = React40.forwardRef(({ className, chipProps, ...props }, ref) =
4381
4381
  /* @__PURE__ */ React40.createElement(
4382
4382
  FloatBox,
4383
4383
  {
4384
+ withArrow: true,
4384
4385
  align: orientation === "vertical" ? "start" : "start",
4385
4386
  side: orientation === "vertical" ? "right" : "bottom",
4386
4387
  sideOffset: orientation === "vertical" ? width + 30 : 45,
@@ -8095,7 +8096,7 @@ var InterfaceSettings = ({
8095
8096
  defaultValue: language,
8096
8097
  onChange: (e) => {
8097
8098
  if (handleLanguage) {
8098
- handleLanguage(e.value);
8099
+ handleLanguage(e);
8099
8100
  }
8100
8101
  setLanguage(e);
8101
8102
  },
@@ -8113,7 +8114,7 @@ var InterfaceSettings = ({
8113
8114
  defaultValue: color,
8114
8115
  onChange: (e) => {
8115
8116
  if (handleColorMode) {
8116
- handleColorMode(e.value);
8117
+ handleColorMode(e);
8117
8118
  }
8118
8119
  setColor(e);
8119
8120
  },
package/dist/elements/index.mjs CHANGED
@@ -27,7 +27,7 @@ import {
27
27
  TabsTrigger,
28
28
  Textarea,
29
29
  UncheckMark
30
- } from "../chunk-MNK7PSNG.mjs";
30
+ } from "../chunk-XTGWVGTN.mjs";
31
31
  import {
32
32
  useClipboard
33
33
  } from "../chunk-R2SKHHDK.mjs";
@@ -3276,7 +3276,7 @@ var InterfaceSettings = ({
3276
3276
  defaultValue: language,
3277
3277
  onChange: (e) => {
3278
3278
  if (handleLanguage) {
3279
- handleLanguage(e.value);
3279
+ handleLanguage(e);
3280
3280
  }
3281
3281
  setLanguage(e);
3282
3282
  },
@@ -3294,7 +3294,7 @@ var InterfaceSettings = ({
3294
3294
  defaultValue: color,
3295
3295
  onChange: (e) => {
3296
3296
  if (handleColorMode) {
3297
- handleColorMode(e.value);
3297
+ handleColorMode(e);
3298
3298
  }
3299
3299
  setColor(e);
3300
3300
  },
package/dist/floatBox/index.d.mts CHANGED
@@ -8,7 +8,7 @@ type FloatBoxProps = {
8
8
  sideOffset?: number;
9
9
  align?: "start" | "center" | "end";
10
10
  alignOffset?: number;
11
- arrow?: boolean;
11
+ withArrow?: boolean;
12
12
  };
13
13
  declare const FloatBox: React.FC<FloatBoxProps>;
14
14
 
package/dist/floatBox/index.d.ts CHANGED
@@ -8,7 +8,7 @@ type FloatBoxProps = {
8
8
  sideOffset?: number;
9
9
  align?: "start" | "center" | "end";
10
10
  alignOffset?: number;
11
- arrow?: boolean;
11
+ withArrow?: boolean;
12
12
  };
13
13
  declare const FloatBox: React.FC<FloatBoxProps>;
14
14
 
package/dist/floatBox/index.js CHANGED
@@ -52,7 +52,7 @@ var FloatBox = ({
52
52
  side = "bottom",
53
53
  sideOffset = 40,
54
54
  align = "center",
55
- arrow = true,
55
+ withArrow = false,
56
56
  ...props
57
57
  }) => {
58
58
  let stylesMap = {
@@ -94,7 +94,7 @@ var FloatBox = ({
94
94
  "data-side": side,
95
95
  "data-floatbox-state": open ? "open" : "closed"
96
96
  },
97
- arrow && /* @__PURE__ */ React.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
97
+ withArrow && /* @__PURE__ */ React.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
98
98
  /* @__PURE__ */ React.createElement("span", null, props.children)
99
99
  );
100
100
  };
package/dist/floatBox/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../elements/floatBox/index.ts","../../elements/floatBox/FloatBox.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./FloatBox\";\n","import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport type FloatBoxProps = {\n className?: string;\n open?: boolean;\n children?: React.ReactNode;\n side?: \"bottom\" | \"left\" | \"right\" | \"top\";\n sideOffset?: number;\n align?: \"start\" | \"center\" | \"end\";\n alignOffset?: number;\n arrow?: boolean;\n};\n\nconst FloatBox: React.FC<FloatBoxProps> = ({\n className,\n open,\n side = \"bottom\",\n sideOffset = 40,\n align = \"center\",\n arrow = true,\n ...props\n}) => {\n let stylesMap = {\n bottom: {\n start: { top: sideOffset, insetInlineStart: 0 },\n center: { top: sideOffset },\n end: { top: sideOffset, insetInlineEnd: 0 },\n },\n top: {\n start: { bottom: sideOffset, insetInlineStart: 0 },\n center: { bottom: sideOffset },\n end: { bottom: sideOffset, insetInlineEnd: 0 },\n },\n right: {\n start: { left: sideOffset, top: -5 },\n center: { left: sideOffset },\n end: { left: sideOffset, bottom: 0 },\n },\n left: {\n start: { right: sideOffset, top: 0 },\n center: { right: sideOffset },\n end: { right: sideOffset, bottom: 0 },\n },\n };\n const arrowDirection = {\n top: \"hawa-arrow-default-bottom\",\n bottom: \"hawa-arrow-default-top\",\n right: \"hawa-arrow-default-left\",\n left: \"hawa-arrow-default-right\",\n };\n\n return (\n <div\n className={cn(\n \"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-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 hawa-bg-popover\",\n className,\n )}\n style={{ ...stylesMap[side][align] }}\n data-side={side}\n data-floatbox-state={open ? \"open\" : \"closed\"}\n >\n {arrow && <div className={cn(\"hawa-bg-red-500\", arrowDirection[side])} />}\n <span>{props.children}</span>\n </div>\n );\n};\n\nexport { FloatBox };\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADUA,IAAM,WAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,GAAG;AACL,MAAM;AACJ,MAAI,YAAY;AAAA,IACd,QAAQ;AAAA,MACN,OAAO,EAAE,KAAK,YAAY,kBAAkB,EAAE;AAAA,MAC9C,QAAQ,EAAE,KAAK,WAAW;AAAA,MAC1B,KAAK,EAAE,KAAK,YAAY,gBAAgB,EAAE;AAAA,IAC5C;AAAA,IACA,KAAK;AAAA,MACH,OAAO,EAAE,QAAQ,YAAY,kBAAkB,EAAE;AAAA,MACjD,QAAQ,EAAE,QAAQ,WAAW;AAAA,MAC7B,KAAK,EAAE,QAAQ,YAAY,gBAAgB,EAAE;AAAA,IAC/C;AAAA,IACA,OAAO;AAAA,MACL,OAAO,EAAE,MAAM,YAAY,KAAK,GAAG;AAAA,MACnC,QAAQ,EAAE,MAAM,WAAW;AAAA,MAC3B,KAAK,EAAE,MAAM,YAAY,QAAQ,EAAE;AAAA,IACrC;AAAA,IACA,MAAM;AAAA,MACJ,OAAO,EAAE,OAAO,YAAY,KAAK,EAAE;AAAA,MACnC,QAAQ,EAAE,OAAO,WAAW;AAAA,MAC5B,KAAK,EAAE,OAAO,YAAY,QAAQ,EAAE;AAAA,IACtC;AAAA,EACF;AACA,QAAM,iBAAiB;AAAA,IACrB,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,GAAG,UAAU,IAAI,EAAE,KAAK,EAAE;AAAA,MACnC,aAAW;AAAA,MACX,uBAAqB,OAAO,SAAS;AAAA;AAAA,IAEpC,SAAS,oCAAC,SAAI,WAAW,GAAG,mBAAmB,eAAe,IAAI,CAAC,GAAG;AAAA,IACvE,oCAAC,cAAM,MAAM,QAAS;AAAA,EACxB;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../elements/floatBox/index.ts","../../elements/floatBox/FloatBox.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./FloatBox\";\n","import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport type FloatBoxProps = {\n className?: string;\n open?: boolean;\n children?: React.ReactNode;\n side?: \"bottom\" | \"left\" | \"right\" | \"top\";\n sideOffset?: number;\n align?: \"start\" | \"center\" | \"end\";\n alignOffset?: number;\n withArrow?: boolean;\n};\n\nconst FloatBox: React.FC<FloatBoxProps> = ({\n className,\n open,\n side = \"bottom\",\n sideOffset = 40,\n align = \"center\",\n withArrow = false,\n ...props\n}) => {\n let stylesMap = {\n bottom: {\n start: { top: sideOffset, insetInlineStart: 0 },\n center: { top: sideOffset },\n end: { top: sideOffset, insetInlineEnd: 0 },\n },\n top: {\n start: { bottom: sideOffset, insetInlineStart: 0 },\n center: { bottom: sideOffset },\n end: { bottom: sideOffset, insetInlineEnd: 0 },\n },\n right: {\n start: { left: sideOffset, top: -5 },\n center: { left: sideOffset },\n end: { left: sideOffset, bottom: 0 },\n },\n left: {\n start: { right: sideOffset, top: 0 },\n center: { right: sideOffset },\n end: { right: sideOffset, bottom: 0 },\n },\n };\n const arrowDirection = {\n top: \"hawa-arrow-default-bottom\",\n bottom: \"hawa-arrow-default-top\",\n right: \"hawa-arrow-default-left\",\n left: \"hawa-arrow-default-right\",\n };\n\n return (\n <div\n className={cn(\n \"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-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 hawa-bg-popover\",\n className,\n )}\n style={{ ...stylesMap[side][align] }}\n data-side={side}\n data-floatbox-state={open ? \"open\" : \"closed\"}\n >\n {withArrow && (\n <div className={cn(\"hawa-bg-red-500\", arrowDirection[side])} />\n )}\n <span>{props.children}</span>\n </div>\n );\n};\n\nexport { FloatBox };\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADUA,IAAM,WAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,GAAG;AACL,MAAM;AACJ,MAAI,YAAY;AAAA,IACd,QAAQ;AAAA,MACN,OAAO,EAAE,KAAK,YAAY,kBAAkB,EAAE;AAAA,MAC9C,QAAQ,EAAE,KAAK,WAAW;AAAA,MAC1B,KAAK,EAAE,KAAK,YAAY,gBAAgB,EAAE;AAAA,IAC5C;AAAA,IACA,KAAK;AAAA,MACH,OAAO,EAAE,QAAQ,YAAY,kBAAkB,EAAE;AAAA,MACjD,QAAQ,EAAE,QAAQ,WAAW;AAAA,MAC7B,KAAK,EAAE,QAAQ,YAAY,gBAAgB,EAAE;AAAA,IAC/C;AAAA,IACA,OAAO;AAAA,MACL,OAAO,EAAE,MAAM,YAAY,KAAK,GAAG;AAAA,MACnC,QAAQ,EAAE,MAAM,WAAW;AAAA,MAC3B,KAAK,EAAE,MAAM,YAAY,QAAQ,EAAE;AAAA,IACrC;AAAA,IACA,MAAM;AAAA,MACJ,OAAO,EAAE,OAAO,YAAY,KAAK,EAAE;AAAA,MACnC,QAAQ,EAAE,OAAO,WAAW;AAAA,MAC5B,KAAK,EAAE,OAAO,YAAY,QAAQ,EAAE;AAAA,IACtC;AAAA,EACF;AACA,QAAM,iBAAiB;AAAA,IACrB,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,GAAG,UAAU,IAAI,EAAE,KAAK,EAAE;AAAA,MACnC,aAAW;AAAA,MACX,uBAAqB,OAAO,SAAS;AAAA;AAAA,IAEpC,aACC,oCAAC,SAAI,WAAW,GAAG,mBAAmB,eAAe,IAAI,CAAC,GAAG;AAAA,IAE/D,oCAAC,cAAM,MAAM,QAAS;AAAA,EACxB;AAEJ;","names":[]}
package/dist/floatBox/index.mjs CHANGED
@@ -17,7 +17,7 @@ var FloatBox = ({
17
17
  side = "bottom",
18
18
  sideOffset = 40,
19
19
  align = "center",
20
- arrow = true,
20
+ withArrow = false,
21
21
  ...props
22
22
  }) => {
23
23
  let stylesMap = {
@@ -59,7 +59,7 @@ var FloatBox = ({
59
59
  "data-side": side,
60
60
  "data-floatbox-state": open ? "open" : "closed"
61
61
  },
62
- arrow && /* @__PURE__ */ React.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
62
+ withArrow && /* @__PURE__ */ React.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
63
63
  /* @__PURE__ */ React.createElement("span", null, props.children)
64
64
  );
65
65
  };
package/dist/floatBox/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../elements/floatBox/FloatBox.tsx","../../util/index.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport type FloatBoxProps = {\n className?: string;\n open?: boolean;\n children?: React.ReactNode;\n side?: \"bottom\" | \"left\" | \"right\" | \"top\";\n sideOffset?: number;\n align?: \"start\" | \"center\" | \"end\";\n alignOffset?: number;\n arrow?: boolean;\n};\n\nconst FloatBox: React.FC<FloatBoxProps> = ({\n className,\n open,\n side = \"bottom\",\n sideOffset = 40,\n align = \"center\",\n arrow = true,\n ...props\n}) => {\n let stylesMap = {\n bottom: {\n start: { top: sideOffset, insetInlineStart: 0 },\n center: { top: sideOffset },\n end: { top: sideOffset, insetInlineEnd: 0 },\n },\n top: {\n start: { bottom: sideOffset, insetInlineStart: 0 },\n center: { bottom: sideOffset },\n end: { bottom: sideOffset, insetInlineEnd: 0 },\n },\n right: {\n start: { left: sideOffset, top: -5 },\n center: { left: sideOffset },\n end: { left: sideOffset, bottom: 0 },\n },\n left: {\n start: { right: sideOffset, top: 0 },\n center: { right: sideOffset },\n end: { right: sideOffset, bottom: 0 },\n },\n };\n const arrowDirection = {\n top: \"hawa-arrow-default-bottom\",\n bottom: \"hawa-arrow-default-top\",\n right: \"hawa-arrow-default-left\",\n left: \"hawa-arrow-default-right\",\n };\n\n return (\n <div\n className={cn(\n \"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-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 hawa-bg-popover\",\n className,\n )}\n style={{ ...stylesMap[side][align] }}\n data-side={side}\n data-floatbox-state={open ? \"open\" : \"closed\"}\n >\n {arrow && <div className={cn(\"hawa-bg-red-500\", arrowDirection[side])} />}\n <span>{props.children}</span>\n </div>\n );\n};\n\nexport { FloatBox };\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,YAAY,WAAW;;;ACAvB,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADUA,IAAM,WAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,GAAG;AACL,MAAM;AACJ,MAAI,YAAY;AAAA,IACd,QAAQ;AAAA,MACN,OAAO,EAAE,KAAK,YAAY,kBAAkB,EAAE;AAAA,MAC9C,QAAQ,EAAE,KAAK,WAAW;AAAA,MAC1B,KAAK,EAAE,KAAK,YAAY,gBAAgB,EAAE;AAAA,IAC5C;AAAA,IACA,KAAK;AAAA,MACH,OAAO,EAAE,QAAQ,YAAY,kBAAkB,EAAE;AAAA,MACjD,QAAQ,EAAE,QAAQ,WAAW;AAAA,MAC7B,KAAK,EAAE,QAAQ,YAAY,gBAAgB,EAAE;AAAA,IAC/C;AAAA,IACA,OAAO;AAAA,MACL,OAAO,EAAE,MAAM,YAAY,KAAK,GAAG;AAAA,MACnC,QAAQ,EAAE,MAAM,WAAW;AAAA,MAC3B,KAAK,EAAE,MAAM,YAAY,QAAQ,EAAE;AAAA,IACrC;AAAA,IACA,MAAM;AAAA,MACJ,OAAO,EAAE,OAAO,YAAY,KAAK,EAAE;AAAA,MACnC,QAAQ,EAAE,OAAO,WAAW;AAAA,MAC5B,KAAK,EAAE,OAAO,YAAY,QAAQ,EAAE;AAAA,IACtC;AAAA,EACF;AACA,QAAM,iBAAiB;AAAA,IACrB,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,GAAG,UAAU,IAAI,EAAE,KAAK,EAAE;AAAA,MACnC,aAAW;AAAA,MACX,uBAAqB,OAAO,SAAS;AAAA;AAAA,IAEpC,SAAS,oCAAC,SAAI,WAAW,GAAG,mBAAmB,eAAe,IAAI,CAAC,GAAG;AAAA,IACvE,oCAAC,cAAM,MAAM,QAAS;AAAA,EACxB;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../elements/floatBox/FloatBox.tsx","../../util/index.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport type FloatBoxProps = {\n className?: string;\n open?: boolean;\n children?: React.ReactNode;\n side?: \"bottom\" | \"left\" | \"right\" | \"top\";\n sideOffset?: number;\n align?: \"start\" | \"center\" | \"end\";\n alignOffset?: number;\n withArrow?: boolean;\n};\n\nconst FloatBox: React.FC<FloatBoxProps> = ({\n className,\n open,\n side = \"bottom\",\n sideOffset = 40,\n align = \"center\",\n withArrow = false,\n ...props\n}) => {\n let stylesMap = {\n bottom: {\n start: { top: sideOffset, insetInlineStart: 0 },\n center: { top: sideOffset },\n end: { top: sideOffset, insetInlineEnd: 0 },\n },\n top: {\n start: { bottom: sideOffset, insetInlineStart: 0 },\n center: { bottom: sideOffset },\n end: { bottom: sideOffset, insetInlineEnd: 0 },\n },\n right: {\n start: { left: sideOffset, top: -5 },\n center: { left: sideOffset },\n end: { left: sideOffset, bottom: 0 },\n },\n left: {\n start: { right: sideOffset, top: 0 },\n center: { right: sideOffset },\n end: { right: sideOffset, bottom: 0 },\n },\n };\n const arrowDirection = {\n top: \"hawa-arrow-default-bottom\",\n bottom: \"hawa-arrow-default-top\",\n right: \"hawa-arrow-default-left\",\n left: \"hawa-arrow-default-right\",\n };\n\n return (\n <div\n className={cn(\n \"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-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 hawa-bg-popover\",\n className,\n )}\n style={{ ...stylesMap[side][align] }}\n data-side={side}\n data-floatbox-state={open ? \"open\" : \"closed\"}\n >\n {withArrow && (\n <div className={cn(\"hawa-bg-red-500\", arrowDirection[side])} />\n )}\n <span>{props.children}</span>\n </div>\n );\n};\n\nexport { FloatBox };\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,YAAY,WAAW;;;ACAvB,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADUA,IAAM,WAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,GAAG;AACL,MAAM;AACJ,MAAI,YAAY;AAAA,IACd,QAAQ;AAAA,MACN,OAAO,EAAE,KAAK,YAAY,kBAAkB,EAAE;AAAA,MAC9C,QAAQ,EAAE,KAAK,WAAW;AAAA,MAC1B,KAAK,EAAE,KAAK,YAAY,gBAAgB,EAAE;AAAA,IAC5C;AAAA,IACA,KAAK;AAAA,MACH,OAAO,EAAE,QAAQ,YAAY,kBAAkB,EAAE;AAAA,MACjD,QAAQ,EAAE,QAAQ,WAAW;AAAA,MAC7B,KAAK,EAAE,QAAQ,YAAY,gBAAgB,EAAE;AAAA,IAC/C;AAAA,IACA,OAAO;AAAA,MACL,OAAO,EAAE,MAAM,YAAY,KAAK,GAAG;AAAA,MACnC,QAAQ,EAAE,MAAM,WAAW;AAAA,MAC3B,KAAK,EAAE,MAAM,YAAY,QAAQ,EAAE;AAAA,IACrC;AAAA,IACA,MAAM;AAAA,MACJ,OAAO,EAAE,OAAO,YAAY,KAAK,EAAE;AAAA,MACnC,QAAQ,EAAE,OAAO,WAAW;AAAA,MAC5B,KAAK,EAAE,OAAO,YAAY,QAAQ,EAAE;AAAA,IACtC;AAAA,EACF;AACA,QAAM,iBAAiB;AAAA,IACrB,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,GAAG,UAAU,IAAI,EAAE,KAAK,EAAE;AAAA,MACnC,aAAW;AAAA,MACX,uBAAqB,OAAO,SAAS;AAAA;AAAA,IAEpC,aACC,oCAAC,SAAI,WAAW,GAAG,mBAAmB,eAAe,IAAI,CAAC,GAAG;AAAA,IAE/D,oCAAC,cAAM,MAAM,QAAS;AAAA,EACxB;AAEJ;","names":[]}
package/dist/index.d.mts CHANGED
@@ -1408,6 +1408,7 @@ type PasswordInputType = BaseInputType & {
1408
1408
  };
1409
1409
  type UsernameInputType = TextInputType & {
1410
1410
  tooShort?: string;
1411
+ tooLong?: string;
1411
1412
  };
1412
1413
  type ConfirmInputType = BaseInputType & {
1413
1414
  required?: string;
@@ -1680,6 +1681,7 @@ declare const CheckEmail: FC<CheckEmailBlocks>;
1680
1681
  type NewPasswordTypes = {
1681
1682
  handleNewPassword: (e: any) => void;
1682
1683
  handleRouteToRegister: () => void;
1684
+ isLoading: boolean;
1683
1685
  direction?: DirectionType;
1684
1686
  headless?: boolean;
1685
1687
  allowRegister?: boolean;
@@ -1692,6 +1694,7 @@ type ResetPasswordType = {
1692
1694
  handleResetPassword: (e: any) => void;
1693
1695
  handleRouteToRegister: () => void;
1694
1696
  sent: any;
1697
+ isLoading: boolean;
1695
1698
  headless?: boolean;
1696
1699
  allowRegister?: boolean;
1697
1700
  direction?: DirectionType;
package/dist/index.d.ts CHANGED
@@ -1408,6 +1408,7 @@ type PasswordInputType = BaseInputType & {
1408
1408
  };
1409
1409
  type UsernameInputType = TextInputType & {
1410
1410
  tooShort?: string;
1411
+ tooLong?: string;
1411
1412
  };
1412
1413
  type ConfirmInputType = BaseInputType & {
1413
1414
  required?: string;
@@ -1680,6 +1681,7 @@ declare const CheckEmail: FC<CheckEmailBlocks>;
1680
1681
  type NewPasswordTypes = {
1681
1682
  handleNewPassword: (e: any) => void;
1682
1683
  handleRouteToRegister: () => void;
1684
+ isLoading: boolean;
1683
1685
  direction?: DirectionType;
1684
1686
  headless?: boolean;
1685
1687
  allowRegister?: boolean;
@@ -1692,6 +1694,7 @@ type ResetPasswordType = {
1692
1694
  handleResetPassword: (e: any) => void;
1693
1695
  handleRouteToRegister: () => void;
1694
1696
  sent: any;
1697
+ isLoading: boolean;
1695
1698
  headless?: boolean;
1696
1699
  allowRegister?: boolean;
1697
1700
  direction?: DirectionType;
package/dist/index.js CHANGED
@@ -4604,7 +4604,7 @@ var FloatBox = ({
4604
4604
  side = "bottom",
4605
4605
  sideOffset = 40,
4606
4606
  align = "center",
4607
- arrow = true,
4607
+ withArrow = false,
4608
4608
  ...props
4609
4609
  }) => {
4610
4610
  let stylesMap = {
@@ -4646,7 +4646,7 @@ var FloatBox = ({
4646
4646
  "data-side": side,
4647
4647
  "data-floatbox-state": open ? "open" : "closed"
4648
4648
  },
4649
- arrow && /* @__PURE__ */ React39.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
4649
+ withArrow && /* @__PURE__ */ React39.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
4650
4650
  /* @__PURE__ */ React39.createElement("span", null, props.children)
4651
4651
  );
4652
4652
  };
@@ -4759,6 +4759,7 @@ var TabsTrigger = React40.forwardRef(({ className, chipProps, ...props }, ref) =
4759
4759
  /* @__PURE__ */ React40.createElement(
4760
4760
  FloatBox,
4761
4761
  {
4762
+ withArrow: true,
4762
4763
  align: orientation === "vertical" ? "start" : "start",
4763
4764
  side: orientation === "vertical" ? "right" : "bottom",
4764
4765
  sideOffset: orientation === "vertical" ? width + 30 : 45,
@@ -8563,7 +8564,7 @@ var InterfaceSettings = ({
8563
8564
  defaultValue: language,
8564
8565
  onChange: (e) => {
8565
8566
  if (handleLanguage) {
8566
- handleLanguage(e.value);
8567
+ handleLanguage(e);
8567
8568
  }
8568
8569
  setLanguage(e);
8569
8570
  },
@@ -8581,7 +8582,7 @@ var InterfaceSettings = ({
8581
8582
  defaultValue: color,
8582
8583
  onChange: (e) => {
8583
8584
  if (handleColorMode) {
8584
- handleColorMode(e.value);
8585
+ handleColorMode(e);
8585
8586
  }
8586
8587
  setColor(e);
8587
8588
  },
@@ -10431,7 +10432,7 @@ var RegisterForm = ({
10431
10432
  const methods = (0, import_react_hook_form2.useForm)();
10432
10433
  let fieldSchemas = {};
10433
10434
  registerFields.forEach((field) => {
10434
- var _a2, _b2, _c2, _d2, _e2, _f2;
10435
+ var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
10435
10436
  switch (field) {
10436
10437
  case "fullname":
10437
10438
  fieldSchemas["fullName"] = z2.string().optional();
@@ -10446,12 +10447,14 @@ var RegisterForm = ({
10446
10447
  required_error: ((_d2 = texts == null ? void 0 : texts.username) == null ? void 0 : _d2.required) || "Username is required"
10447
10448
  }).min(1, {
10448
10449
  message: ((_e2 = texts == null ? void 0 : texts.username) == null ? void 0 : _e2.required) || "Username is required"
10450
+ }).max(14, {
10451
+ message: ((_f2 = texts == null ? void 0 : texts.username) == null ? void 0 : _f2.tooLong) || "Username is too long"
10449
10452
  }).refine(
10450
10453
  (value) => {
10451
10454
  const isValid = /^[a-zA-Z][a-zA-Z0-9_-]{2,14}$/.test(value);
10452
10455
  return isValid;
10453
10456
  },
10454
- { message: ((_f2 = texts == null ? void 0 : texts.username) == null ? void 0 : _f2.invalid) || "Invalid username" }
10457
+ { message: ((_g2 = texts == null ? void 0 : texts.username) == null ? void 0 : _g2.invalid) || "Invalid username" }
10455
10458
  );
10456
10459
  break;
10457
10460
  }
@@ -10699,9 +10702,7 @@ var RegisterForm = ({
10699
10702
  isSearchable: false,
10700
10703
  isClearable: false,
10701
10704
  options: props.userReferenceOptions || [],
10702
- onChange: (e) => {
10703
- field.onChange(e.value);
10704
- }
10705
+ onChange: (e) => field.onChange(e)
10705
10706
  }
10706
10707
  );
10707
10708
  }
@@ -10859,7 +10860,11 @@ var import_react64 = __toESM(require("react"));
10859
10860
  var import_react_hook_form3 = require("react-hook-form");
10860
10861
  var import_zod3 = require("@hookform/resolvers/zod");
10861
10862
  var z3 = __toESM(require("zod"));
10862
- var NewPasswordForm = ({ texts, ...props }) => {
10863
+ var NewPasswordForm = ({
10864
+ texts,
10865
+ isLoading,
10866
+ ...props
10867
+ }) => {
10863
10868
  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
10864
10869
  const formSchema = z3.object({
10865
10870
  password: z3.string({ required_error: (_a = texts == null ? void 0 : texts.password) == null ? void 0 : _a.required }).min(1, { message: (_b = texts == null ? void 0 : texts.password) == null ? void 0 : _b.required }).min(8, { message: (_c = texts == null ? void 0 : texts.password) == null ? void 0 : _c.tooShort }),
@@ -10940,7 +10945,7 @@ var NewPasswordForm = ({ texts, ...props }) => {
10940
10945
  }
10941
10946
  )
10942
10947
  ),
10943
- /* @__PURE__ */ import_react64.default.createElement(CardFooter, { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ import_react64.default.createElement(Button, { className: "hawa-w-full", type: "submit" }, texts == null ? void 0 : texts.updatePassword), props.allowRegister && /* @__PURE__ */ import_react64.default.createElement("div", { className: "hawa-mt-4 hawa-pb-0 hawa-text-center hawa-text-sm dark:hawa-text-gray-300" }, (_h = texts == null ? void 0 : texts.dontHaveAccount) != null ? _h : "Don't have an account? ", /* @__PURE__ */ import_react64.default.createElement(
10948
+ /* @__PURE__ */ import_react64.default.createElement(CardFooter, { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ import_react64.default.createElement(Button, { className: "hawa-w-full", type: "submit", isLoading }, texts == null ? void 0 : texts.updatePassword), props.allowRegister && /* @__PURE__ */ import_react64.default.createElement("div", { className: "hawa-mt-4 hawa-pb-0 hawa-text-center hawa-text-sm dark:hawa-text-gray-300" }, (_h = texts == null ? void 0 : texts.dontHaveAccount) != null ? _h : "Don't have an account? ", /* @__PURE__ */ import_react64.default.createElement(
10944
10949
  "span",
10945
10950
  {
10946
10951
  className: "clickable-link",
@@ -10958,6 +10963,7 @@ var import_zod4 = require("@hookform/resolvers/zod");
10958
10963
  var z4 = __toESM(require("zod"));
10959
10964
  var ResetPasswordForm = ({
10960
10965
  allowRegister = true,
10966
+ isLoading,
10961
10967
  ...props
10962
10968
  }) => {
10963
10969
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
@@ -11001,7 +11007,15 @@ var ResetPasswordForm = ({
11001
11007
  }
11002
11008
  }
11003
11009
  )),
11004
- /* @__PURE__ */ import_react65.default.createElement(CardFooter, { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ import_react65.default.createElement(Button, { type: "submit", className: "hawa-w-full " }, ((_i = props.texts) == null ? void 0 : _i.resetPassword) || "Reset Password"), allowRegister && /* @__PURE__ */ import_react65.default.createElement("div", { className: "hawa-mt-4 hawa-pb-0 hawa-text-center hawa-text-sm dark:hawa-text-gray-300" }, (_k = (_j = props.texts) == null ? void 0 : _j.dontHaveAccount) != null ? _k : "Don't have an account? ", /* @__PURE__ */ import_react65.default.createElement(
11010
+ /* @__PURE__ */ import_react65.default.createElement(CardFooter, { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ import_react65.default.createElement(
11011
+ Button,
11012
+ {
11013
+ type: "submit",
11014
+ className: "hawa-w-full",
11015
+ isLoading
11016
+ },
11017
+ ((_i = props.texts) == null ? void 0 : _i.resetPassword) || "Reset Password"
11018
+ ), allowRegister && /* @__PURE__ */ import_react65.default.createElement("div", { className: "hawa-mt-4 hawa-pb-0 hawa-text-center hawa-text-sm dark:hawa-text-gray-300" }, (_k = (_j = props.texts) == null ? void 0 : _j.dontHaveAccount) != null ? _k : "Don't have an account? ", /* @__PURE__ */ import_react65.default.createElement(
11005
11019
  "span",
11006
11020
  {
11007
11021
  className: "clickable-link",
@@ -11234,7 +11248,7 @@ var UserReferralSource = ({
11234
11248
  orientation: "vertical",
11235
11249
  options: optionsWithOther,
11236
11250
  defaultValue: field.value,
11237
- onChange: (e) => field.onChange(e.value),
11251
+ onChange: (e) => field.onChange(e),
11238
11252
  helperText: (_b2 = (_a2 = formState.errors.source) == null ? void 0 : _a2.message) == null ? void 0 : _b2.toString()
11239
11253
  }
11240
11254
  );
package/dist/index.mjs CHANGED
@@ -4374,7 +4374,7 @@ var FloatBox = ({
4374
4374
  side = "bottom",
4375
4375
  sideOffset = 40,
4376
4376
  align = "center",
4377
- arrow = true,
4377
+ withArrow = false,
4378
4378
  ...props
4379
4379
  }) => {
4380
4380
  let stylesMap = {
@@ -4416,7 +4416,7 @@ var FloatBox = ({
4416
4416
  "data-side": side,
4417
4417
  "data-floatbox-state": open ? "open" : "closed"
4418
4418
  },
4419
- arrow && /* @__PURE__ */ React39.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
4419
+ withArrow && /* @__PURE__ */ React39.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
4420
4420
  /* @__PURE__ */ React39.createElement("span", null, props.children)
4421
4421
  );
4422
4422
  };
@@ -4529,6 +4529,7 @@ var TabsTrigger = React40.forwardRef(({ className, chipProps, ...props }, ref) =
4529
4529
  /* @__PURE__ */ React40.createElement(
4530
4530
  FloatBox,
4531
4531
  {
4532
+ withArrow: true,
4532
4533
  align: orientation === "vertical" ? "start" : "start",
4533
4534
  side: orientation === "vertical" ? "right" : "bottom",
4534
4535
  sideOffset: orientation === "vertical" ? width + 30 : 45,
@@ -8340,7 +8341,7 @@ var InterfaceSettings = ({
8340
8341
  defaultValue: language,
8341
8342
  onChange: (e) => {
8342
8343
  if (handleLanguage) {
8343
- handleLanguage(e.value);
8344
+ handleLanguage(e);
8344
8345
  }
8345
8346
  setLanguage(e);
8346
8347
  },
@@ -8358,7 +8359,7 @@ var InterfaceSettings = ({
8358
8359
  defaultValue: color,
8359
8360
  onChange: (e) => {
8360
8361
  if (handleColorMode) {
8361
- handleColorMode(e.value);
8362
+ handleColorMode(e);
8362
8363
  }
8363
8364
  setColor(e);
8364
8365
  },
@@ -10208,7 +10209,7 @@ var RegisterForm = ({
10208
10209
  const methods = useForm2();
10209
10210
  let fieldSchemas = {};
10210
10211
  registerFields.forEach((field) => {
10211
- var _a2, _b2, _c2, _d2, _e2, _f2;
10212
+ var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
10212
10213
  switch (field) {
10213
10214
  case "fullname":
10214
10215
  fieldSchemas["fullName"] = z2.string().optional();
@@ -10223,12 +10224,14 @@ var RegisterForm = ({
10223
10224
  required_error: ((_d2 = texts == null ? void 0 : texts.username) == null ? void 0 : _d2.required) || "Username is required"
10224
10225
  }).min(1, {
10225
10226
  message: ((_e2 = texts == null ? void 0 : texts.username) == null ? void 0 : _e2.required) || "Username is required"
10227
+ }).max(14, {
10228
+ message: ((_f2 = texts == null ? void 0 : texts.username) == null ? void 0 : _f2.tooLong) || "Username is too long"
10226
10229
  }).refine(
10227
10230
  (value) => {
10228
10231
  const isValid = /^[a-zA-Z][a-zA-Z0-9_-]{2,14}$/.test(value);
10229
10232
  return isValid;
10230
10233
  },
10231
- { message: ((_f2 = texts == null ? void 0 : texts.username) == null ? void 0 : _f2.invalid) || "Invalid username" }
10234
+ { message: ((_g2 = texts == null ? void 0 : texts.username) == null ? void 0 : _g2.invalid) || "Invalid username" }
10232
10235
  );
10233
10236
  break;
10234
10237
  }
@@ -10476,9 +10479,7 @@ var RegisterForm = ({
10476
10479
  isSearchable: false,
10477
10480
  isClearable: false,
10478
10481
  options: props.userReferenceOptions || [],
10479
- onChange: (e) => {
10480
- field.onChange(e.value);
10481
- }
10482
+ onChange: (e) => field.onChange(e)
10482
10483
  }
10483
10484
  );
10484
10485
  }
@@ -10636,7 +10637,11 @@ import React86, { useState as useState41 } from "react";
10636
10637
  import { Controller as Controller3, useForm as useForm3 } from "react-hook-form";
10637
10638
  import { zodResolver as zodResolver3 } from "@hookform/resolvers/zod";
10638
10639
  import * as z3 from "zod";
10639
- var NewPasswordForm = ({ texts, ...props }) => {
10640
+ var NewPasswordForm = ({
10641
+ texts,
10642
+ isLoading,
10643
+ ...props
10644
+ }) => {
10640
10645
  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
10641
10646
  const formSchema = z3.object({
10642
10647
  password: z3.string({ required_error: (_a = texts == null ? void 0 : texts.password) == null ? void 0 : _a.required }).min(1, { message: (_b = texts == null ? void 0 : texts.password) == null ? void 0 : _b.required }).min(8, { message: (_c = texts == null ? void 0 : texts.password) == null ? void 0 : _c.tooShort }),
@@ -10717,7 +10722,7 @@ var NewPasswordForm = ({ texts, ...props }) => {
10717
10722
  }
10718
10723
  )
10719
10724
  ),
10720
- /* @__PURE__ */ React86.createElement(CardFooter, { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ React86.createElement(Button, { className: "hawa-w-full", type: "submit" }, texts == null ? void 0 : texts.updatePassword), props.allowRegister && /* @__PURE__ */ React86.createElement("div", { className: "hawa-mt-4 hawa-pb-0 hawa-text-center hawa-text-sm dark:hawa-text-gray-300" }, (_h = texts == null ? void 0 : texts.dontHaveAccount) != null ? _h : "Don't have an account? ", /* @__PURE__ */ React86.createElement(
10725
+ /* @__PURE__ */ React86.createElement(CardFooter, { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ React86.createElement(Button, { className: "hawa-w-full", type: "submit", isLoading }, texts == null ? void 0 : texts.updatePassword), props.allowRegister && /* @__PURE__ */ React86.createElement("div", { className: "hawa-mt-4 hawa-pb-0 hawa-text-center hawa-text-sm dark:hawa-text-gray-300" }, (_h = texts == null ? void 0 : texts.dontHaveAccount) != null ? _h : "Don't have an account? ", /* @__PURE__ */ React86.createElement(
10721
10726
  "span",
10722
10727
  {
10723
10728
  className: "clickable-link",
@@ -10735,6 +10740,7 @@ import { zodResolver as zodResolver4 } from "@hookform/resolvers/zod";
10735
10740
  import * as z4 from "zod";
10736
10741
  var ResetPasswordForm = ({
10737
10742
  allowRegister = true,
10743
+ isLoading,
10738
10744
  ...props
10739
10745
  }) => {
10740
10746
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
@@ -10778,7 +10784,15 @@ var ResetPasswordForm = ({
10778
10784
  }
10779
10785
  }
10780
10786
  )),
10781
- /* @__PURE__ */ React87.createElement(CardFooter, { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ React87.createElement(Button, { type: "submit", className: "hawa-w-full " }, ((_i = props.texts) == null ? void 0 : _i.resetPassword) || "Reset Password"), allowRegister && /* @__PURE__ */ React87.createElement("div", { className: "hawa-mt-4 hawa-pb-0 hawa-text-center hawa-text-sm dark:hawa-text-gray-300" }, (_k = (_j = props.texts) == null ? void 0 : _j.dontHaveAccount) != null ? _k : "Don't have an account? ", /* @__PURE__ */ React87.createElement(
10787
+ /* @__PURE__ */ React87.createElement(CardFooter, { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ React87.createElement(
10788
+ Button,
10789
+ {
10790
+ type: "submit",
10791
+ className: "hawa-w-full",
10792
+ isLoading
10793
+ },
10794
+ ((_i = props.texts) == null ? void 0 : _i.resetPassword) || "Reset Password"
10795
+ ), allowRegister && /* @__PURE__ */ React87.createElement("div", { className: "hawa-mt-4 hawa-pb-0 hawa-text-center hawa-text-sm dark:hawa-text-gray-300" }, (_k = (_j = props.texts) == null ? void 0 : _j.dontHaveAccount) != null ? _k : "Don't have an account? ", /* @__PURE__ */ React87.createElement(
10782
10796
  "span",
10783
10797
  {
10784
10798
  className: "clickable-link",
@@ -11011,7 +11025,7 @@ var UserReferralSource = ({
11011
11025
  orientation: "vertical",
11012
11026
  options: optionsWithOther,
11013
11027
  defaultValue: field.value,
11014
- onChange: (e) => field.onChange(e.value),
11028
+ onChange: (e) => field.onChange(e),
11015
11029
  helperText: (_b2 = (_a2 = formState.errors.source) == null ? void 0 : _a2.message) == null ? void 0 : _b2.toString()
11016
11030
  }
11017
11031
  );
package/dist/interfaceSettings/index.js CHANGED
@@ -391,7 +391,7 @@ var InterfaceSettings = ({
391
391
  defaultValue: language,
392
392
  onChange: (e) => {
393
393
  if (handleLanguage) {
394
- handleLanguage(e.value);
394
+ handleLanguage(e);
395
395
  }
396
396
  setLanguage(e);
397
397
  },
@@ -409,7 +409,7 @@ var InterfaceSettings = ({
409
409
  defaultValue: color,
410
410
  onChange: (e) => {
411
411
  if (handleColorMode) {
412
- handleColorMode(e.value);
412
+ handleColorMode(e);
413
413
  }
414
414
  setColor(e);
415
415
  },