@sikka/hawa 0.41.0-next → 0.41.1-next

package/dist/loading/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../elements/loading/Loading.tsx","../../util/index.ts"],"sourcesContent":["import React, { FC } from \"react\";\n\nimport { cn } from \"@util/index\";\n\ntype LoadingTypes = {\n  /** Specifies the size of the loading component.*/\n  size?: \"button\" | \"xs\" | \"sm\" | \"normal\" | \"lg\" | \"xl\";\n  /** Determines the design of the loading animation.*/\n  design?:\n    | \"spinner\"\n    | \"dots-bounce\"\n    | \"dots-pulse\"\n    | \"pulse\"\n    | \"spinner-dots\"\n    | \"squircle\"\n    | \"square\"\n    | \"progress\"\n    | \"orbit\";\n  /** Specifies the color of the loading component. By default it will inherit the value of --primary global CSS variable*/\n  color?: string;\n  classNames?: {\n    container?: string;\n    track?: string;\n    car?: string;\n  };\n  themeMode?: \"dark\" | \"light\";\n};\n\nexport const Loading: FC<LoadingTypes> = ({\n  design = \"spinner\",\n  size = \"normal\",\n  themeMode = \"light\",\n  classNames,\n  color,\n  ...props\n}) => {\n  let sizeStyles = {\n    button: \"hawa-h-4 hawa-w-4\",\n    xs: \"hawa-h-1 hawa-w-1\",\n    sm: \"hawa-h-6 hawa-w-6\",\n    normal: \"hawa-h-8 hawa-w-8\",\n    lg: \"hawa-h-14 hawa-w-14\",\n    xl: \"hawa-h-24 hawa-w-24\"\n  };\n  let progressSizes = {\n    button: \"hawa-h-1\",\n    xs: \"hawa-h-1 hawa-w-1\",\n    sm: \"hawa-h-6 hawa-w-6\",\n    normal: \"\",\n    lg: \"hawa-h-6\",\n    xl: \"hawa-h-10 hawa-w-64\"\n  };\n\n  let animationStyles: any = {\n    pulse: \"hawa-animate-in hawa-fade-in hawa-duration-1000\",\n    bounce: \"hawa-animate-bounce\"\n  };\n  switch (design.split(\"-\")[0]) {\n    case \"dots\":\n      return (\n        <div\n          className={cn(\n            \"hawa-flex hawa-flex-row hawa-gap-2\",\n            classNames?.container\n          )}\n        >\n          <div\n            className={cn(\n              \"hawa-animate-bounce hawa-rounded-full hawa-delay-100 hawa-repeat-infinite\",\n              size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n              animationStyles[design.split(\"-\")[1]],\n              color ? color : \"hawa-bg-primary\"\n            )}\n          ></div>\n          <div\n            className={cn(\n              \"hawa-animate-bounce hawa-rounded-full hawa-delay-200 hawa-repeat-infinite\",\n              size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n              animationStyles[design.split(\"-\")[1]],\n              color ? color : \"hawa-bg-primary\"\n            )}\n          ></div>\n          <div\n            className={cn(\n              \"hawa-animate-bounce hawa-rounded-full hawa-delay-300 hawa-repeat-infinite\",\n              size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n              animationStyles[design.split(\"-\")[1]],\n              color ? color : \"hawa-bg-primary\"\n            )}\n          ></div>\n        </div>\n      );\n    case \"square\":\n      return (\n        <svg\n          className={cn(\n            \"squircle-container\",\n            sizeStyles[size],\n            classNames?.container\n          )}\n          viewBox=\"0 0 35 35\"\n          height=\"35\"\n          width=\"35\"\n        >\n          <rect\n            className=\"squircle-track\"\n            x=\"2.5\"\n            y=\"2.5\"\n            fill=\"none\"\n            strokeWidth=\"5px\"\n            width=\"32.5\"\n            height=\"32.5\"\n          />\n          <rect\n            className=\"square-car\"\n            x=\"2.5\"\n            y=\"2.5\"\n            fill=\"none\"\n            strokeWidth=\"5px\"\n            width=\"32.5\"\n            height=\"32.5\"\n            pathLength=\"100\"\n          />\n        </svg>\n      );\n    case \"squircle\":\n      return (\n        <svg\n          x=\"0px\"\n          y=\"0px\"\n          viewBox=\"0 0 37 37\"\n          height=\"37\"\n          width=\"37\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          className={cn(\n            \"squircle-container\",\n            sizeStyles[size],\n            classNames?.container\n          )}\n        >\n          <path\n            className={cn(\"squircle-track\", classNames?.track)}\n            fill=\"none\"\n            strokeWidth=\"5\"\n            pathLength=\"100\"\n            d=\"M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5\"\n          ></path>\n          <path\n            className={cn(\"squircle-car\", classNames?.car)}\n            fill=\"none\"\n            strokeWidth=\"5\"\n            pathLength=\"100\"\n            d=\"M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5\"\n          ></path>\n        </svg>\n      );\n    case \"progress\":\n      return (\n        <div\n          className={cn(\n            \"progress-loading after:hawa-rounded hawa-rounded\",\n            progressSizes[size],\n            classNames?.container\n          )}\n        ></div>\n      );\n    case \"orbit\":\n      return (\n        <div className={cn(\"orbit-container\", classNames?.container)}></div>\n      );\n\n    default:\n      return (\n        <svg\n          viewBox=\"0 0 40 40\"\n          height=\"40\"\n          width=\"40\"\n          className={cn(\n            \"circle-container\",\n            sizeStyles[size],\n            classNames?.container\n          )}\n        >\n          <circle\n            className={cn(\n              \"circle-track\",\n              {\n                \"hawa-stroke-primary-foreground\": themeMode === \"dark\",\n                \"hawa-stroke-primary\": themeMode === \"light\"\n              },\n              classNames?.track\n            )}\n            cx=\"20\"\n            cy=\"20\"\n            r=\"17.5\"\n            fill=\"none\"\n            strokeWidth=\"5px\"\n            pathLength=\"100\"\n          />\n          <circle\n            className={cn(\n              \"circle-car\",\n              {\n                \"hawa-stroke-primary-foreground\": themeMode === \"dark\",\n                \"hawa-stroke-primary\": themeMode === \"light\"\n              },\n              classNames?.car\n            )}\n            cx=\"20\"\n            cy=\"20\"\n            r=\"17.5\"\n            fill=\"none\"\n            pathLength=\"100\"\n            strokeWidth=\"5px\"\n          />\n        </svg>\n      );\n  }\n};\n","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":[]}
+{"version":3,"sources":["../../elements/loading/Loading.tsx","../../util/index.ts"],"sourcesContent":["import React, { FC } from \"react\";\n\nimport { cn } from \"@util/index\";\n\ntype LoadingTypes = {\n  /** Specifies the size of the loading component.*/\n  size?: \"button\" | \"xs\" | \"sm\" | \"normal\" | \"lg\" | \"xl\";\n  /** Determines the design of the loading animation.*/\n  design?:\n    | \"spinner\"\n    | \"dots-bounce\"\n    | \"dots-pulse\"\n    | \"pulse\"\n    | \"spinner-dots\"\n    | \"squircle\"\n    | \"square\"\n    | \"progress\"\n    | \"orbit\";\n  /** Specifies the color of the loading component. By default it will inherit the value of --primary global CSS variable*/\n  color?: string;\n  classNames?: {\n    container?: string;\n    track?: string;\n    car?: string;\n  };\n  themeMode?: \"dark\" | \"light\";\n};\n\nexport const Loading: FC<LoadingTypes> = ({\n  design = \"spinner\",\n  size = \"normal\",\n  themeMode = \"light\",\n  classNames,\n  color,\n  ...props\n}) => {\n  let sizeStyles = {\n    button: \"hawa-h-4 hawa-w-4\",\n    xs: \"hawa-h-1 hawa-w-1\",\n    sm: \"hawa-h-6 hawa-w-6\",\n    normal: \"hawa-h-8 hawa-w-8\",\n    lg: \"hawa-h-14 hawa-w-14\",\n    xl: \"hawa-h-24 hawa-w-24\",\n  };\n  let progressSizes = {\n    button: \"hawa-h-1\",\n    xs: \"hawa-h-1 hawa-w-1\",\n    sm: \"hawa-h-6 hawa-w-6\",\n    normal: \"\",\n    lg: \"hawa-h-6\",\n    xl: \"hawa-h-10 hawa-w-64\",\n  };\n\n  let animationStyles: any = {\n    pulse: \"hawa-animate-in hawa-fade-in hawa-duration-1000\",\n    bounce: \"hawa-animate-bounce\",\n  };\n  switch (design.split(\"-\")[0]) {\n    case \"dots\":\n      return (\n        <div\n          className={cn(\n            \"hawa-flex hawa-flex-row hawa-gap-2\",\n            classNames?.container,\n          )}\n        >\n          <div\n            className={cn(\n              \"hawa-animate-bounce hawa-rounded-full hawa-delay-100 hawa-repeat-infinite\",\n              size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n              animationStyles[design.split(\"-\")[1]],\n              color ? color : \"hawa-bg-primary\",\n            )}\n          ></div>\n          <div\n            className={cn(\n              \"hawa-animate-bounce hawa-rounded-full hawa-delay-200 hawa-repeat-infinite\",\n              size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n              animationStyles[design.split(\"-\")[1]],\n              color ? color : \"hawa-bg-primary\",\n            )}\n          ></div>\n          <div\n            className={cn(\n              \"hawa-animate-bounce hawa-rounded-full hawa-delay-300 hawa-repeat-infinite\",\n              size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n              animationStyles[design.split(\"-\")[1]],\n              color ? color : \"hawa-bg-primary\",\n            )}\n          ></div>\n        </div>\n      );\n    case \"square\":\n      return (\n        <svg\n          className={cn(\n            \"squircle-container\",\n            sizeStyles[size],\n            classNames?.container,\n          )}\n          viewBox=\"0 0 35 35\"\n          height=\"35\"\n          width=\"35\"\n        >\n          <rect\n            className=\"squircle-track\"\n            x=\"2.5\"\n            y=\"2.5\"\n            fill=\"none\"\n            strokeWidth=\"5px\"\n            width=\"32.5\"\n            height=\"32.5\"\n          />\n          <rect\n            className=\"square-car\"\n            x=\"2.5\"\n            y=\"2.5\"\n            fill=\"none\"\n            strokeWidth=\"5px\"\n            width=\"32.5\"\n            height=\"32.5\"\n            pathLength=\"100\"\n          />\n        </svg>\n      );\n    case \"squircle\":\n      return (\n        <svg\n          x=\"0px\"\n          y=\"0px\"\n          viewBox=\"0 0 37 37\"\n          height=\"37\"\n          width=\"37\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          className={cn(\n            \"squircle-container\",\n            sizeStyles[size],\n            classNames?.container,\n          )}\n        >\n          <path\n            className={cn(\"squircle-track\", classNames?.track)}\n            fill=\"none\"\n            strokeWidth=\"5\"\n            pathLength=\"100\"\n            d=\"M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5\"\n          ></path>\n          <path\n            className={cn(\"squircle-car\", classNames?.car)}\n            fill=\"none\"\n            strokeWidth=\"5\"\n            pathLength=\"100\"\n            d=\"M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5\"\n          ></path>\n        </svg>\n      );\n    case \"progress\":\n      return (\n        <div\n          className={cn(\n            \"progress-loading after:hawa-rounded hawa-rounded\",\n            progressSizes[size],\n            classNames?.container,\n          )}\n        ></div>\n      );\n    case \"orbit\":\n      return (\n        <div className={cn(\"orbit-container\", classNames?.container)}></div>\n      );\n\n    default:\n      return (\n        <svg\n          viewBox=\"0 0 40 40\"\n          height=\"40\"\n          width=\"40\"\n          className={cn(\n            \"circle-container\",\n            sizeStyles[size],\n            classNames?.container,\n          )}\n        >\n          <circle\n            className={cn(\n              \"circle-track\",\n              {\n                \"hawa-stroke-primary-foreground\": themeMode === \"dark\",\n                \"hawa-stroke-primary\": themeMode === \"light\",\n              },\n              classNames?.track,\n            )}\n            cx=\"20\"\n            cy=\"20\"\n            r=\"17.5\"\n            fill=\"none\"\n            strokeWidth=\"5px\"\n            pathLength=\"100\"\n          />\n          <circle\n            className={cn(\n              \"circle-car\",\n              {\n                \"hawa-stroke-primary-foreground\": themeMode === \"dark\",\n                \"hawa-stroke-primary\": themeMode === \"light\",\n              },\n              classNames?.car,\n            )}\n            cx=\"20\"\n            cy=\"20\"\n            r=\"17.5\"\n            fill=\"none\"\n            pathLength=\"100\"\n            strokeWidth=\"5px\"\n          />\n        </svg>\n      );\n  }\n};\n","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,WAAmB;;;ACA1B,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADuBO,IAAM,UAA4B,CAAC;AAAA,EACxC,SAAS;AAAA,EACT,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI,aAAa;AAAA,IACf,QAAQ;AAAA,IACR,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AACA,MAAI,gBAAgB;AAAA,IAClB,QAAQ;AAAA,IACR,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,MAAI,kBAAuB;AAAA,IACzB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AACA,UAAQ,OAAO,MAAM,GAAG,EAAE,CAAC,GAAG;AAAA,IAC5B,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,yCAAY;AAAA,UACd;AAAA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,SAAS,WAAW,sBAAsB,WAAW,IAAI;AAAA,cACzD,gBAAgB,OAAO,MAAM,GAAG,EAAE,CAAC,CAAC;AAAA,cACpC,QAAQ,QAAQ;AAAA,YAClB;AAAA;AAAA,QACD;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,SAAS,WAAW,sBAAsB,WAAW,IAAI;AAAA,cACzD,gBAAgB,OAAO,MAAM,GAAG,EAAE,CAAC,CAAC;AAAA,cACpC,QAAQ,QAAQ;AAAA,YAClB;AAAA;AAAA,QACD;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,SAAS,WAAW,sBAAsB,WAAW,IAAI;AAAA,cACzD,gBAAgB,OAAO,MAAM,GAAG,EAAE,CAAC,CAAC;AAAA,cACpC,QAAQ,QAAQ;AAAA,YAClB;AAAA;AAAA,QACD;AAAA,MACH;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,WAAW,IAAI;AAAA,YACf,yCAAY;AAAA,UACd;AAAA,UACA,SAAQ;AAAA,UACR,QAAO;AAAA,UACP,OAAM;AAAA;AAAA,QAEN;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,GAAE;AAAA,YACF,GAAE;AAAA,YACF,MAAK;AAAA,YACL,aAAY;AAAA,YACZ,OAAM;AAAA,YACN,QAAO;AAAA;AAAA,QACT;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,GAAE;AAAA,YACF,GAAE;AAAA,YACF,MAAK;AAAA,YACL,aAAY;AAAA,YACZ,OAAM;AAAA,YACN,QAAO;AAAA,YACP,YAAW;AAAA;AAAA,QACb;AAAA,MACF;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,GAAE;AAAA,UACF,GAAE;AAAA,UACF,SAAQ;AAAA,UACR,QAAO;AAAA,UACP,OAAM;AAAA,UACN,qBAAoB;AAAA,UACpB,WAAW;AAAA,YACT;AAAA,YACA,WAAW,IAAI;AAAA,YACf,yCAAY;AAAA,UACd;AAAA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GAAG,kBAAkB,yCAAY,KAAK;AAAA,YACjD,MAAK;AAAA,YACL,aAAY;AAAA,YACZ,YAAW;AAAA,YACX,GAAE;AAAA;AAAA,QACH;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GAAG,gBAAgB,yCAAY,GAAG;AAAA,YAC7C,MAAK;AAAA,YACL,aAAY;AAAA,YACZ,YAAW;AAAA,YACX,GAAE;AAAA;AAAA,QACH;AAAA,MACH;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,cAAc,IAAI;AAAA,YAClB,yCAAY;AAAA,UACd;AAAA;AAAA,MACD;AAAA,IAEL,KAAK;AACH,aACE,oCAAC,SAAI,WAAW,GAAG,mBAAmB,yCAAY,SAAS,GAAG;AAAA,IAGlE;AACE,aACE;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,QAAO;AAAA,UACP,OAAM;AAAA,UACN,WAAW;AAAA,YACT;AAAA,YACA,WAAW,IAAI;AAAA,YACf,yCAAY;AAAA,UACd;AAAA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,gBACE,kCAAkC,cAAc;AAAA,gBAChD,uBAAuB,cAAc;AAAA,cACvC;AAAA,cACA,yCAAY;AAAA,YACd;AAAA,YACA,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,MAAK;AAAA,YACL,aAAY;AAAA,YACZ,YAAW;AAAA;AAAA,QACb;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,gBACE,kCAAkC,cAAc;AAAA,gBAChD,uBAAuB,cAAc;AAAA,cACvC;AAAA,cACA,yCAAY;AAAA,YACd;AAAA,YACA,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,MAAK;AAAA,YACL,YAAW;AAAA,YACX,aAAY;AAAA;AAAA,QACd;AAAA,MACF;AAAA,EAEN;AACF;","names":[]}

package/dist/navbar/index.js

@@ -38,12 +38,6 @@ module.exports = __toCommonJS(navbar_exports);
 // layout/navbar/Navbar.tsx
 var import_react = __toESM(require("react"));
 
-// elements/collapsible/Collapsible.tsx
-var CollapsiblePrimitive = __toESM(require("@radix-ui/react-collapsible"));
-var Collapsible = CollapsiblePrimitive.Root;
-var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
-var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
-
 // util/index.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
@@ -51,6 +45,12 @@ function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
 
+// elements/collapsible/Collapsible.tsx
+var CollapsiblePrimitive = __toESM(require("@radix-ui/react-collapsible"));
+var Collapsible = CollapsiblePrimitive.Root;
+var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
+var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
+
 // layout/navbar/Navbar.tsx
 var Navbar = ({
   backgroundColor,
@@ -60,13 +60,13 @@ var Navbar = ({
 }) => {
   var _a, _b;
   const [isOpen, setIsOpen] = (0, import_react.useState)(false);
-  return /* @__PURE__ */ import_react.default.createElement("nav", { className: " hawa-sticky hawa-top-2 hawa-transition-all" }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement("nav", { className: "hawa-sticky hawa-top-2 hawa-transition-all" }, /* @__PURE__ */ import_react.default.createElement(
     Collapsible,
     {
-      className: "hawa-relative hawa-m-2 hawa-rounded  hawa-p-2",
+      className: "hawa-relative hawa-m-2 hawa-rounded hawa-p-2",
       style: { backgroundColor: backgroundColor || "#1f2937" }
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-flex hawa-items-center hawa-justify-between hawa-px-3 " }, /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-flex hawa-items-center" }, /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-flex hawa-items-center hawa-justify-between hawa-px-3" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-flex hawa-items-center" }, /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
         className: "hawa-p-1.5 hawa-text-xl hawa-font-bold hawa-text-white",
@@ -77,7 +77,7 @@ var Navbar = ({
         }
       },
       logo
-    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-hidden md:hawa-flex " }, (_a = props.menuItems) == null ? void 0 : _a.map((item, i) => /* @__PURE__ */ import_react.default.createElement(
+    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-hidden md:hawa-flex" }, (_a = props.menuItems) == null ? void 0 : _a.map((item, i) => /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
         key: i,
@@ -89,7 +89,7 @@ var Navbar = ({
       CollapsibleTrigger2,
       {
         onClick: () => setIsOpen(!isOpen),
-        className: "hawa-h-full hawa-text-white selection:hawa-p-0 ",
+        className: "hawa-h-full hawa-text-white selection:hawa-p-0",
         "aria-label": "Toggle menu"
       },
       /* @__PURE__ */ import_react.default.createElement(
@@ -141,7 +141,7 @@ var Navbar = ({
           "data-[state=closed]:hawa-opacity-0",
           "data-[state=open]:hawa-animate-in",
           "data-[state=open]:hawa-fade-in-90",
-          "hawa-absolute hawa-left-0 hawa-top-[60px] hawa-flex hawa-flex-col  hawa-rounded hawa-border  hawa-bg-gray-200 hawa-p-1 hawa-transition-all"
+          "hawa-absolute hawa-left-0 hawa-top-[60px] hawa-flex hawa-flex-col hawa-rounded hawa-border hawa-bg-gray-200 hawa-p-1 hawa-transition-all"
           // "hawa-transition-all hawa-bg-gray-400 hawa-fixed hawa-left-0 hawa-top-[72px] hawa-w-full hawa-flex hawa-flex-col"
         ),
         style: {

package/dist/navbar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../layout/navbar/index.ts","../../layout/navbar/Navbar.tsx","../../elements/collapsible/Collapsible.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./Navbar\";\n","import React, { useState } from \"react\";\n\nimport {\n  CollapsibleTrigger,\n  CollapsibleContent,\n  Collapsible\n} from \"@elements/collapsible\";\n\nimport { cn } from \"@util/index\";\n\ntype NavigationMenuItem = {\n  label: string;\n  action: () => void;\n  trigger?: any;\n};\n\ntype NavbarType = {\n  logo?: any;\n  buttons?: any;\n  menuItems?: NavigationMenuItem[];\n  handleLogoClick?: () => void;\n  backgroundColor?: string;\n};\n\nexport const Navbar: React.FC<NavbarType> = ({\n  backgroundColor,\n  logo,\n  handleLogoClick,\n  ...props\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  return (\n    <nav className=\" hawa-sticky hawa-top-2 hawa-transition-all\">\n      <Collapsible\n        className={\"hawa-relative hawa-m-2 hawa-rounded  hawa-p-2\"}\n        style={{ backgroundColor: backgroundColor || \"#1f2937\" }}\n      >\n        <div className=\"hawa-flex hawa-items-center hawa-justify-between hawa-px-3 \">\n          <div className=\"hawa-flex hawa-items-center\">\n            <div\n              className=\"hawa-p-1.5 hawa-text-xl hawa-font-bold hawa-text-white\"\n              onClick={() => {\n                if (handleLogoClick) {\n                  handleLogoClick();\n                }\n              }}\n            >\n              {logo}\n            </div>\n          </div>\n\n          <div className=\"hawa-hidden md:hawa-flex \">\n            {props.menuItems?.map((item, i) => (\n              <div\n                key={i}\n                onClick={item.action}\n                className=\"hawa-cursor-pointer hawa-rounded hawa-p-1.5 hawa-px-2 hawa-text-center hawa-text-sm hawa-text-white hawa-transition-all hover:hawa-bg-gray-300 hover:hawa-text-black\"\n              >\n                {item.label}\n              </div>\n            ))}\n          </div>\n          <div className=\"hawa-m-0 hawa-flex hawa-h-fit hawa-p-0 md:hawa-hidden\">\n            <CollapsibleTrigger\n              onClick={() => setIsOpen(!isOpen)}\n              className=\"hawa-h-full hawa-text-white selection:hawa-p-0 \"\n              aria-label=\"Toggle menu\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                className={cn(\n                  \"hawa-fixed hawa-h-6 hawa-w-6\",\n                  isOpen ? \"hawa-invisible\" : \"hawa-visible\"\n                )}\n              >\n                <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" />\n                <line x1=\"4\" x2=\"20\" y1=\"6\" y2=\"6\" />\n                <line x1=\"4\" x2=\"20\" y1=\"18\" y2=\"18\" />\n              </svg>\n\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                className={cn(\n                  \"hawa-h-6 hawa-w-6\",\n                  !isOpen ? \"hawa-invisible\" : \"hawa-visible\"\n                )}\n              >\n                <path d=\"M18 6 6 18\" />\n                <path d=\"m6 6 12 12\" />\n              </svg>\n            </CollapsibleTrigger>\n          </div>\n        </div>\n\n        <CollapsibleContent\n          className={cn(\n            \"data-[state=closed]:hawa-opacity-0\",\n            \"data-[state=open]:hawa-animate-in\",\n            \"data-[state=open]:hawa-fade-in-90\",\n            \"hawa-absolute hawa-left-0 hawa-top-[60px] hawa-flex hawa-flex-col  hawa-rounded hawa-border  hawa-bg-gray-200 hawa-p-1 hawa-transition-all\"\n            // \"hawa-transition-all hawa-bg-gray-400 hawa-fixed hawa-left-0 hawa-top-[72px] hawa-w-full hawa-flex hawa-flex-col\"\n          )}\n          style={{\n            width: \"calc(100%)\",\n            zIndex: -100\n          }}\n        >\n          {props.menuItems?.map((item, i) => (\n            <div\n              key={i}\n              onClick={item.action}\n              className=\"hawa-cursor-pointer hawa-rounded hawa-p-2 hawa-px-10 hawa-text-center hawa-text-black hawa-transition-all hover:hawa-bg-gray-300\"\n            >\n              {item.label}\n            </div>\n          ))}\n        </CollapsibleContent>\n      </Collapsible>\n    </nav>\n  );\n};\n","import * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\";\n\nconst Collapsible = CollapsiblePrimitive.Root;\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":"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","names":["CollapsibleTrigger","CollapsibleContent","React","CollapsibleTrigger","CollapsibleContent"]}
+{"version":3,"sources":["../../layout/navbar/index.ts","../../layout/navbar/Navbar.tsx","../../util/index.ts","../../elements/collapsible/Collapsible.tsx"],"sourcesContent":["export * from \"./Navbar\";\n","import React, { useState } from \"react\";\n\nimport { cn } from \"@util/index\";\n\nimport {\n  CollapsibleTrigger,\n  CollapsibleContent,\n  Collapsible,\n} from \"@elements/collapsible\";\n\ntype NavigationMenuItem = {\n  label: string;\n  action: () => void;\n  trigger?: any;\n};\n\ntype NavbarType = {\n  logo?: any;\n  buttons?: any;\n  menuItems?: NavigationMenuItem[];\n  handleLogoClick?: () => void;\n  backgroundColor?: string;\n};\n\nexport const Navbar: React.FC<NavbarType> = ({\n  backgroundColor,\n  logo,\n  handleLogoClick,\n  ...props\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  return (\n    <nav className=\"hawa-sticky hawa-top-2 hawa-transition-all\">\n      <Collapsible\n        className={\"hawa-relative hawa-m-2 hawa-rounded hawa-p-2\"}\n        style={{ backgroundColor: backgroundColor || \"#1f2937\" }}\n      >\n        <div className=\"hawa-flex hawa-items-center hawa-justify-between hawa-px-3\">\n          <div className=\"hawa-flex hawa-items-center\">\n            <div\n              className=\"hawa-p-1.5 hawa-text-xl hawa-font-bold hawa-text-white\"\n              onClick={() => {\n                if (handleLogoClick) {\n                  handleLogoClick();\n                }\n              }}\n            >\n              {logo}\n            </div>\n          </div>\n\n          <div className=\"hawa-hidden md:hawa-flex\">\n            {props.menuItems?.map((item, i) => (\n              <div\n                key={i}\n                onClick={item.action}\n                className=\"hawa-cursor-pointer hawa-rounded hawa-p-1.5 hawa-px-2 hawa-text-center hawa-text-sm hawa-text-white hawa-transition-all hover:hawa-bg-gray-300 hover:hawa-text-black\"\n              >\n                {item.label}\n              </div>\n            ))}\n          </div>\n          <div className=\"hawa-m-0 hawa-flex hawa-h-fit hawa-p-0 md:hawa-hidden\">\n            <CollapsibleTrigger\n              onClick={() => setIsOpen(!isOpen)}\n              className=\"hawa-h-full hawa-text-white selection:hawa-p-0\"\n              aria-label=\"Toggle menu\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                className={cn(\n                  \"hawa-fixed hawa-h-6 hawa-w-6\",\n                  isOpen ? \"hawa-invisible\" : \"hawa-visible\",\n                )}\n              >\n                <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" />\n                <line x1=\"4\" x2=\"20\" y1=\"6\" y2=\"6\" />\n                <line x1=\"4\" x2=\"20\" y1=\"18\" y2=\"18\" />\n              </svg>\n\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                className={cn(\n                  \"hawa-h-6 hawa-w-6\",\n                  !isOpen ? \"hawa-invisible\" : \"hawa-visible\",\n                )}\n              >\n                <path d=\"M18 6 6 18\" />\n                <path d=\"m6 6 12 12\" />\n              </svg>\n            </CollapsibleTrigger>\n          </div>\n        </div>\n\n        <CollapsibleContent\n          className={cn(\n            \"data-[state=closed]:hawa-opacity-0\",\n            \"data-[state=open]:hawa-animate-in\",\n            \"data-[state=open]:hawa-fade-in-90\",\n            \"hawa-absolute hawa-left-0 hawa-top-[60px] hawa-flex hawa-flex-col hawa-rounded hawa-border hawa-bg-gray-200 hawa-p-1 hawa-transition-all\",\n            // \"hawa-transition-all hawa-bg-gray-400 hawa-fixed hawa-left-0 hawa-top-[72px] hawa-w-full hawa-flex hawa-flex-col\"\n          )}\n          style={{\n            width: \"calc(100%)\",\n            zIndex: -100,\n          }}\n        >\n          {props.menuItems?.map((item, i) => (\n            <div\n              key={i}\n              onClick={item.action}\n              className=\"hawa-cursor-pointer hawa-rounded hawa-p-2 hawa-px-10 hawa-text-center hawa-text-black hawa-transition-all hover:hawa-bg-gray-300\"\n            >\n              {item.label}\n            </div>\n          ))}\n        </CollapsibleContent>\n      </Collapsible>\n    </nav>\n  );\n};\n","import { 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 CollapsiblePrimitive from \"@radix-ui/react-collapsible\";\n\nconst Collapsible = CollapsiblePrimitive.Root;\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n"],"mappings":"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","names":["CollapsibleTrigger","CollapsibleContent","React","CollapsibleTrigger","CollapsibleContent"]}

package/dist/navbar/index.mjs

@@ -3,12 +3,6 @@
 // layout/navbar/Navbar.tsx
 import React, { useState } from "react";
 
-// elements/collapsible/Collapsible.tsx
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-var Collapsible = CollapsiblePrimitive.Root;
-var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
-var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
-
 // util/index.ts
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -16,6 +10,12 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+// elements/collapsible/Collapsible.tsx
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+var Collapsible = CollapsiblePrimitive.Root;
+var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
+var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
+
 // layout/navbar/Navbar.tsx
 var Navbar = ({
   backgroundColor,
@@ -25,13 +25,13 @@ var Navbar = ({
 }) => {
   var _a, _b;
   const [isOpen, setIsOpen] = useState(false);
-  return /* @__PURE__ */ React.createElement("nav", { className: " hawa-sticky hawa-top-2 hawa-transition-all" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("nav", { className: "hawa-sticky hawa-top-2 hawa-transition-all" }, /* @__PURE__ */ React.createElement(
     Collapsible,
     {
-      className: "hawa-relative hawa-m-2 hawa-rounded  hawa-p-2",
+      className: "hawa-relative hawa-m-2 hawa-rounded hawa-p-2",
       style: { backgroundColor: backgroundColor || "#1f2937" }
     },
-    /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-items-center hawa-justify-between hawa-px-3 " }, /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-items-center" }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-items-center hawa-justify-between hawa-px-3" }, /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-items-center" }, /* @__PURE__ */ React.createElement(
       "div",
       {
         className: "hawa-p-1.5 hawa-text-xl hawa-font-bold hawa-text-white",
@@ -42,7 +42,7 @@ var Navbar = ({
         }
       },
       logo
-    )), /* @__PURE__ */ React.createElement("div", { className: "hawa-hidden md:hawa-flex " }, (_a = props.menuItems) == null ? void 0 : _a.map((item, i) => /* @__PURE__ */ React.createElement(
+    )), /* @__PURE__ */ React.createElement("div", { className: "hawa-hidden md:hawa-flex" }, (_a = props.menuItems) == null ? void 0 : _a.map((item, i) => /* @__PURE__ */ React.createElement(
       "div",
       {
         key: i,
@@ -54,7 +54,7 @@ var Navbar = ({
       CollapsibleTrigger2,
       {
         onClick: () => setIsOpen(!isOpen),
-        className: "hawa-h-full hawa-text-white selection:hawa-p-0 ",
+        className: "hawa-h-full hawa-text-white selection:hawa-p-0",
         "aria-label": "Toggle menu"
       },
       /* @__PURE__ */ React.createElement(
@@ -106,7 +106,7 @@ var Navbar = ({
           "data-[state=closed]:hawa-opacity-0",
           "data-[state=open]:hawa-animate-in",
           "data-[state=open]:hawa-fade-in-90",
-          "hawa-absolute hawa-left-0 hawa-top-[60px] hawa-flex hawa-flex-col  hawa-rounded hawa-border  hawa-bg-gray-200 hawa-p-1 hawa-transition-all"
+          "hawa-absolute hawa-left-0 hawa-top-[60px] hawa-flex hawa-flex-col hawa-rounded hawa-border hawa-bg-gray-200 hawa-p-1 hawa-transition-all"
           // "hawa-transition-all hawa-bg-gray-400 hawa-fixed hawa-left-0 hawa-top-[72px] hawa-w-full hawa-flex hawa-flex-col"
         ),
         style: {

package/dist/navbar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../layout/navbar/Navbar.tsx","../../elements/collapsible/Collapsible.tsx","../../util/index.ts"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport {\n  CollapsibleTrigger,\n  CollapsibleContent,\n  Collapsible\n} from \"@elements/collapsible\";\n\nimport { cn } from \"@util/index\";\n\ntype NavigationMenuItem = {\n  label: string;\n  action: () => void;\n  trigger?: any;\n};\n\ntype NavbarType = {\n  logo?: any;\n  buttons?: any;\n  menuItems?: NavigationMenuItem[];\n  handleLogoClick?: () => void;\n  backgroundColor?: string;\n};\n\nexport const Navbar: React.FC<NavbarType> = ({\n  backgroundColor,\n  logo,\n  handleLogoClick,\n  ...props\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  return (\n    <nav className=\" hawa-sticky hawa-top-2 hawa-transition-all\">\n      <Collapsible\n        className={\"hawa-relative hawa-m-2 hawa-rounded  hawa-p-2\"}\n        style={{ backgroundColor: backgroundColor || \"#1f2937\" }}\n      >\n        <div className=\"hawa-flex hawa-items-center hawa-justify-between hawa-px-3 \">\n          <div className=\"hawa-flex hawa-items-center\">\n            <div\n              className=\"hawa-p-1.5 hawa-text-xl hawa-font-bold hawa-text-white\"\n              onClick={() => {\n                if (handleLogoClick) {\n                  handleLogoClick();\n                }\n              }}\n            >\n              {logo}\n            </div>\n          </div>\n\n          <div className=\"hawa-hidden md:hawa-flex \">\n            {props.menuItems?.map((item, i) => (\n              <div\n                key={i}\n                onClick={item.action}\n                className=\"hawa-cursor-pointer hawa-rounded hawa-p-1.5 hawa-px-2 hawa-text-center hawa-text-sm hawa-text-white hawa-transition-all hover:hawa-bg-gray-300 hover:hawa-text-black\"\n              >\n                {item.label}\n              </div>\n            ))}\n          </div>\n          <div className=\"hawa-m-0 hawa-flex hawa-h-fit hawa-p-0 md:hawa-hidden\">\n            <CollapsibleTrigger\n              onClick={() => setIsOpen(!isOpen)}\n              className=\"hawa-h-full hawa-text-white selection:hawa-p-0 \"\n              aria-label=\"Toggle menu\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                className={cn(\n                  \"hawa-fixed hawa-h-6 hawa-w-6\",\n                  isOpen ? \"hawa-invisible\" : \"hawa-visible\"\n                )}\n              >\n                <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" />\n                <line x1=\"4\" x2=\"20\" y1=\"6\" y2=\"6\" />\n                <line x1=\"4\" x2=\"20\" y1=\"18\" y2=\"18\" />\n              </svg>\n\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                className={cn(\n                  \"hawa-h-6 hawa-w-6\",\n                  !isOpen ? \"hawa-invisible\" : \"hawa-visible\"\n                )}\n              >\n                <path d=\"M18 6 6 18\" />\n                <path d=\"m6 6 12 12\" />\n              </svg>\n            </CollapsibleTrigger>\n          </div>\n        </div>\n\n        <CollapsibleContent\n          className={cn(\n            \"data-[state=closed]:hawa-opacity-0\",\n            \"data-[state=open]:hawa-animate-in\",\n            \"data-[state=open]:hawa-fade-in-90\",\n            \"hawa-absolute hawa-left-0 hawa-top-[60px] hawa-flex hawa-flex-col  hawa-rounded hawa-border  hawa-bg-gray-200 hawa-p-1 hawa-transition-all\"\n            // \"hawa-transition-all hawa-bg-gray-400 hawa-fixed hawa-left-0 hawa-top-[72px] hawa-w-full hawa-flex hawa-flex-col\"\n          )}\n          style={{\n            width: \"calc(100%)\",\n            zIndex: -100\n          }}\n        >\n          {props.menuItems?.map((item, i) => (\n            <div\n              key={i}\n              onClick={item.action}\n              className=\"hawa-cursor-pointer hawa-rounded hawa-p-2 hawa-px-10 hawa-text-center hawa-text-black hawa-transition-all hover:hawa-bg-gray-300\"\n            >\n              {item.label}\n            </div>\n          ))}\n        </CollapsibleContent>\n      </Collapsible>\n    </nav>\n  );\n};\n","import * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\";\n\nconst Collapsible = CollapsiblePrimitive.Root;\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":";;;AAAA,OAAO,SAAS,gBAAgB;;;ACAhC,YAAY,0BAA0B;AAEtC,IAAM,cAAmC;AAEzC,IAAMA,sBAA0C;AAEhD,IAAMC,sBAA0C;;;ACNhD,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;AFmBO,IAAM,SAA+B,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AA7BN;AA8BE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,SACE,oCAAC,SAAI,WAAU,iDACb;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO,EAAE,iBAAiB,mBAAmB,UAAU;AAAA;AAAA,IAEvD,oCAAC,SAAI,WAAU,iEACb,oCAAC,SAAI,WAAU,iCACb;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS,MAAM;AACb,cAAI,iBAAiB;AACnB,4BAAgB;AAAA,UAClB;AAAA,QACF;AAAA;AAAA,MAEC;AAAA,IACH,CACF,GAEA,oCAAC,SAAI,WAAU,gCACZ,WAAM,cAAN,mBAAiB,IAAI,CAAC,MAAM,MAC3B;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,SAAS,KAAK;AAAA,QACd,WAAU;AAAA;AAAA,MAET,KAAK;AAAA,IACR,EAEJ,GACA,oCAAC,SAAI,WAAU,2DACb;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS,MAAM,UAAU,CAAC,MAAM;AAAA,QAChC,WAAU;AAAA,QACV,cAAW;AAAA;AAAA,MAEX;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,WAAW;AAAA,YACT;AAAA,YACA,SAAS,mBAAmB;AAAA,UAC9B;AAAA;AAAA,QAEA,oCAAC,UAAK,IAAG,KAAI,IAAG,MAAK,IAAG,MAAK,IAAG,MAAK;AAAA,QACrC,oCAAC,UAAK,IAAG,KAAI,IAAG,MAAK,IAAG,KAAI,IAAG,KAAI;AAAA,QACnC,oCAAC,UAAK,IAAG,KAAI,IAAG,MAAK,IAAG,MAAK,IAAG,MAAK;AAAA,MACvC;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,WAAW;AAAA,YACT;AAAA,YACA,CAAC,SAAS,mBAAmB;AAAA,UAC/B;AAAA;AAAA,QAEA,oCAAC,UAAK,GAAE,cAAa;AAAA,QACrB,oCAAC,UAAK,GAAE,cAAa;AAAA,MACvB;AAAA,IACF,CACF,CACF;AAAA,IAEA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,QAEF;AAAA,QACA,OAAO;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA;AAAA,OAEC,WAAM,cAAN,mBAAiB,IAAI,CAAC,MAAM,MAC3B;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,SAAS,KAAK;AAAA,UACd,WAAU;AAAA;AAAA,QAET,KAAK;AAAA,MACR;AAAA,IAEJ;AAAA,EACF,CACF;AAEJ;","names":["CollapsibleTrigger","CollapsibleContent","CollapsibleTrigger","CollapsibleContent"]}
+{"version":3,"sources":["../../layout/navbar/Navbar.tsx","../../util/index.ts","../../elements/collapsible/Collapsible.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { cn } from \"@util/index\";\n\nimport {\n  CollapsibleTrigger,\n  CollapsibleContent,\n  Collapsible,\n} from \"@elements/collapsible\";\n\ntype NavigationMenuItem = {\n  label: string;\n  action: () => void;\n  trigger?: any;\n};\n\ntype NavbarType = {\n  logo?: any;\n  buttons?: any;\n  menuItems?: NavigationMenuItem[];\n  handleLogoClick?: () => void;\n  backgroundColor?: string;\n};\n\nexport const Navbar: React.FC<NavbarType> = ({\n  backgroundColor,\n  logo,\n  handleLogoClick,\n  ...props\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  return (\n    <nav className=\"hawa-sticky hawa-top-2 hawa-transition-all\">\n      <Collapsible\n        className={\"hawa-relative hawa-m-2 hawa-rounded hawa-p-2\"}\n        style={{ backgroundColor: backgroundColor || \"#1f2937\" }}\n      >\n        <div className=\"hawa-flex hawa-items-center hawa-justify-between hawa-px-3\">\n          <div className=\"hawa-flex hawa-items-center\">\n            <div\n              className=\"hawa-p-1.5 hawa-text-xl hawa-font-bold hawa-text-white\"\n              onClick={() => {\n                if (handleLogoClick) {\n                  handleLogoClick();\n                }\n              }}\n            >\n              {logo}\n            </div>\n          </div>\n\n          <div className=\"hawa-hidden md:hawa-flex\">\n            {props.menuItems?.map((item, i) => (\n              <div\n                key={i}\n                onClick={item.action}\n                className=\"hawa-cursor-pointer hawa-rounded hawa-p-1.5 hawa-px-2 hawa-text-center hawa-text-sm hawa-text-white hawa-transition-all hover:hawa-bg-gray-300 hover:hawa-text-black\"\n              >\n                {item.label}\n              </div>\n            ))}\n          </div>\n          <div className=\"hawa-m-0 hawa-flex hawa-h-fit hawa-p-0 md:hawa-hidden\">\n            <CollapsibleTrigger\n              onClick={() => setIsOpen(!isOpen)}\n              className=\"hawa-h-full hawa-text-white selection:hawa-p-0\"\n              aria-label=\"Toggle menu\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                className={cn(\n                  \"hawa-fixed hawa-h-6 hawa-w-6\",\n                  isOpen ? \"hawa-invisible\" : \"hawa-visible\",\n                )}\n              >\n                <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" />\n                <line x1=\"4\" x2=\"20\" y1=\"6\" y2=\"6\" />\n                <line x1=\"4\" x2=\"20\" y1=\"18\" y2=\"18\" />\n              </svg>\n\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                className={cn(\n                  \"hawa-h-6 hawa-w-6\",\n                  !isOpen ? \"hawa-invisible\" : \"hawa-visible\",\n                )}\n              >\n                <path d=\"M18 6 6 18\" />\n                <path d=\"m6 6 12 12\" />\n              </svg>\n            </CollapsibleTrigger>\n          </div>\n        </div>\n\n        <CollapsibleContent\n          className={cn(\n            \"data-[state=closed]:hawa-opacity-0\",\n            \"data-[state=open]:hawa-animate-in\",\n            \"data-[state=open]:hawa-fade-in-90\",\n            \"hawa-absolute hawa-left-0 hawa-top-[60px] hawa-flex hawa-flex-col hawa-rounded hawa-border hawa-bg-gray-200 hawa-p-1 hawa-transition-all\",\n            // \"hawa-transition-all hawa-bg-gray-400 hawa-fixed hawa-left-0 hawa-top-[72px] hawa-w-full hawa-flex hawa-flex-col\"\n          )}\n          style={{\n            width: \"calc(100%)\",\n            zIndex: -100,\n          }}\n        >\n          {props.menuItems?.map((item, i) => (\n            <div\n              key={i}\n              onClick={item.action}\n              className=\"hawa-cursor-pointer hawa-rounded hawa-p-2 hawa-px-10 hawa-text-center hawa-text-black hawa-transition-all hover:hawa-bg-gray-300\"\n            >\n              {item.label}\n            </div>\n          ))}\n        </CollapsibleContent>\n      </Collapsible>\n    </nav>\n  );\n};\n","import { 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 CollapsiblePrimitive from \"@radix-ui/react-collapsible\";\n\nconst Collapsible = CollapsiblePrimitive.Root;\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n"],"mappings":";;;AAAA,OAAO,SAAS,gBAAgB;;;ACAhC,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACLA,YAAY,0BAA0B;AAEtC,IAAM,cAAmC;AAEzC,IAAMA,sBAA0C;AAEhD,IAAMC,sBAA0C;;;AFkBzC,IAAM,SAA+B,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AA7BN;AA8BE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,SACE,oCAAC,SAAI,WAAU,gDACb;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO,EAAE,iBAAiB,mBAAmB,UAAU;AAAA;AAAA,IAEvD,oCAAC,SAAI,WAAU,gEACb,oCAAC,SAAI,WAAU,iCACb;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS,MAAM;AACb,cAAI,iBAAiB;AACnB,4BAAgB;AAAA,UAClB;AAAA,QACF;AAAA;AAAA,MAEC;AAAA,IACH,CACF,GAEA,oCAAC,SAAI,WAAU,+BACZ,WAAM,cAAN,mBAAiB,IAAI,CAAC,MAAM,MAC3B;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,SAAS,KAAK;AAAA,QACd,WAAU;AAAA;AAAA,MAET,KAAK;AAAA,IACR,EAEJ,GACA,oCAAC,SAAI,WAAU,2DACb;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS,MAAM,UAAU,CAAC,MAAM;AAAA,QAChC,WAAU;AAAA,QACV,cAAW;AAAA;AAAA,MAEX;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,WAAW;AAAA,YACT;AAAA,YACA,SAAS,mBAAmB;AAAA,UAC9B;AAAA;AAAA,QAEA,oCAAC,UAAK,IAAG,KAAI,IAAG,MAAK,IAAG,MAAK,IAAG,MAAK;AAAA,QACrC,oCAAC,UAAK,IAAG,KAAI,IAAG,MAAK,IAAG,KAAI,IAAG,KAAI;AAAA,QACnC,oCAAC,UAAK,IAAG,KAAI,IAAG,MAAK,IAAG,MAAK,IAAG,MAAK;AAAA,MACvC;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,WAAW;AAAA,YACT;AAAA,YACA,CAAC,SAAS,mBAAmB;AAAA,UAC/B;AAAA;AAAA,QAEA,oCAAC,UAAK,GAAE,cAAa;AAAA,QACrB,oCAAC,UAAK,GAAE,cAAa;AAAA,MACvB;AAAA,IACF,CACF,CACF;AAAA,IAEA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,QAEF;AAAA,QACA,OAAO;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA;AAAA,OAEC,WAAM,cAAN,mBAAiB,IAAI,CAAC,MAAM,MAC3B;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,SAAS,KAAK;AAAA,UACd,WAAU;AAAA;AAAA,QAET,KAAK;AAAA,MACR;AAAA,IAEJ;AAAA,EACF,CACF;AAEJ;","names":["CollapsibleTrigger","CollapsibleContent","CollapsibleTrigger","CollapsibleContent"]}

package/dist/navigationMenu/index.js

@@ -48,7 +48,6 @@ module.exports = __toCommonJS(navigationMenu_exports);
 // elements/navigationMenu/NavigationMenu.tsx
 var React = __toESM(require("react"));
 var NavigationMenuPrimitive = __toESM(require("@radix-ui/react-navigation-menu"));
-var import_class_variance_authority = require("class-variance-authority");
 
 // util/index.ts
 var import_clsx = require("clsx");
@@ -58,6 +57,7 @@ function cn(...inputs) {
 }
 
 // elements/navigationMenu/NavigationMenu.tsx
+var import_class_variance_authority = require("class-variance-authority");
 var navigationMenuTriggerStyle = (0, import_class_variance_authority.cva)(
   "hawa-group hawa-inline-flex hawa-h-10 hawa-w-max hawa-items-center hawa-gap-1 hawa-justify-center hawa-rounded-md hawa-bg-background hawa-px-4 hawa-py-2 hawa-text-sm hawa-font-medium hawa-transition-colors hover:hawa-bg-accent hover:hawa-text-accent-foreground focus:hawa-bg-accent focus:hawa-text-accent-foreground focus:hawa-outline-none disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[active]:hawa-bg-accent/50 "
 );
@@ -66,7 +66,7 @@ var NavigationMenuRoot = React.forwardRef(({ className, children, viewportClassN
   {
     ref,
     className: cn(
-      "hawa-relative hawa-z-10 hawa-flex  hawa-flex-1 hawa-items-center hawa-justify-center",
+      "hawa-relative hawa-z-10 hawa-flex hawa-flex-1 hawa-items-center hawa-justify-center",
       // "hawa-max-w-max",
       className
     ),
@@ -118,7 +118,7 @@ var NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) => /
   {
     ref,
     className: cn(
-      "hawa-absolute  hawa-left-0 hawa-top-0 hawa-w-full hawa-rounded ",
+      "hawa-absolute hawa-left-0 hawa-top-0 hawa-w-full hawa-rounded",
       // "md:hawa-absolute md:hawa-w-auto  hawa-left-0 hawa-top-0 ",
       //   animation
       "data-[motion^=from-]:hawa-animate-in data-[motion^=to-]:hawa-animate-out data-[motion^=from-]:hawa-fade-in data-[motion^=to-]:hawa-fade-out data-[motion=from-end]:hawa-slide-in-from-right-52 data-[motion=from-start]:hawa-slide-in-from-left-52 data-[motion=to-end]:hawa-slide-out-to-right-52 data-[motion=to-start]:hawa-slide-out-to-left-52",
@@ -127,7 +127,7 @@ var NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) => /
     ...props
   }
 ));
-var StandardNavigationMenuItem = ({ icon, title, subtitle, ...linkProps }) => /* @__PURE__ */ React.createElement(NavigationMenuLink, { ...linkProps }, /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-max-w-md hawa-cursor-pointer hawa-flex-row hawa-items-center hawa-gap-4 hawa-rounded-inner hawa-p-4 hawa-py-2 hawa-transition-all  hover:hawa-bg-muted" }, icon && icon, /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ React.createElement("h1", { className: "hawa-text-xl hawa-font-bold" }, title), /* @__PURE__ */ React.createElement("p", { className: "hawa-text-sm" }, subtitle))));
+var StandardNavigationMenuItem = ({ icon, title, subtitle, ...linkProps }) => /* @__PURE__ */ React.createElement(NavigationMenuLink, { ...linkProps }, /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-max-w-md hawa-cursor-pointer hawa-flex-row hawa-items-center hawa-gap-4 hawa-rounded-inner hawa-p-4 hawa-py-2 hawa-transition-all hover:hawa-bg-muted" }, icon && icon, /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ React.createElement("h1", { className: "hawa-text-xl hawa-font-bold" }, title), /* @__PURE__ */ React.createElement("p", { className: "hawa-text-sm" }, subtitle))));
 var NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
   "div",
   {
@@ -139,7 +139,7 @@ var NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) =>
     NavigationMenuPrimitive.Viewport,
     {
       className: cn(
-        "hawa-origin-top-center hawa-relative hawa-mt-1.5  hawa-w-full hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-lg data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-90 ",
+        "hawa-origin-top-center hawa-relative hawa-mt-1.5 hawa-w-full hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-lg data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-90",
         // hawa-h-[var(--radix-navigation-menu-viewport-height)]
         // "md:hawa-w-[var(--radix-navigation-menu-viewport-width)]",
         className

package/dist/navigationMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../elements/navigationMenu/index.ts","../../elements/navigationMenu/NavigationMenu.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./NavigationMenu\";\n","import * as React from \"react\";\n\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\";\nimport { cva } from \"class-variance-authority\";\n\nimport { DirectionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\nconst navigationMenuTriggerStyle = cva(\n  \"hawa-group hawa-inline-flex hawa-h-10 hawa-w-max hawa-items-center hawa-gap-1 hawa-justify-center hawa-rounded-md hawa-bg-background hawa-px-4 hawa-py-2 hawa-text-sm hawa-font-medium hawa-transition-colors hover:hawa-bg-accent hover:hawa-text-accent-foreground focus:hawa-bg-accent focus:hawa-text-accent-foreground focus:hawa-outline-none disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[active]:hawa-bg-accent/50 \"\n);\n\ntype StandardNavigationMenuItemProps = {\n  icon?: React.ReactNode;\n  title: string;\n  subtitle?: string;\n};\ntype NavigationMenuRootProps = React.ComponentPropsWithoutRef<\n  typeof NavigationMenuPrimitive.Root\n> & {\n  viewportClassNames?: string;\n};\ntype NavigationMenuItemProps = {\n  trigger: any;\n  content?: any;\n  action?: any;\n  path?: string;\n};\ntype NavigationMenuTypes = {\n  items: NavigationMenuItemProps[];\n  rootClassNames?: string;\n  viewportClassNames?: string;\n  triggerClassNames?: string;\n  actionFirst?: boolean;\n  direction?: DirectionType;\n};\n\nconst NavigationMenuRoot = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n  NavigationMenuRootProps\n>(({ className, children, viewportClassNames, ...props }, ref) => (\n  <NavigationMenuPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"hawa-relative hawa-z-10 hawa-flex  hawa-flex-1 hawa-items-center hawa-justify-center\",\n      // \"hawa-max-w-max\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <NavigationMenuViewport className={viewportClassNames} />\n  </NavigationMenuPrimitive.Root>\n));\nconst NavigationMenuList = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.List\n    ref={ref}\n    className={cn(\n      \"hawa-group hawa-flex hawa-flex-1 hawa-list-none hawa-items-center hawa-justify-center hawa-gap-1\",\n      className\n    )}\n    {...props}\n  />\n));\nconst NavigationMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Trigger\n    ref={ref}\n    className={cn(navigationMenuTriggerStyle(), \"hawa-group\", className)}\n    {...props}\n  >\n    {children}\n    <svg\n      aria-label=\"Chevron Icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      className=\"hawa-icon hawa-relative hawa-top-[1px] hawa-transition hawa-duration-200 group-data-[state=open]:hawa-rotate-180\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </NavigationMenuPrimitive.Trigger>\n));\nconst NavigationMenuContent = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"hawa-absolute  hawa-left-0 hawa-top-0 hawa-w-full hawa-rounded \",\n      // \"md:hawa-absolute md:hawa-w-auto  hawa-left-0 hawa-top-0 \",\n      //   animation\n      \"data-[motion^=from-]:hawa-animate-in data-[motion^=to-]:hawa-animate-out data-[motion^=from-]:hawa-fade-in data-[motion^=to-]:hawa-fade-out data-[motion=from-end]:hawa-slide-in-from-right-52 data-[motion=from-start]:hawa-slide-in-from-left-52 data-[motion=to-end]:hawa-slide-out-to-right-52 data-[motion=to-start]:hawa-slide-out-to-left-52\",\n      className\n    )}\n    {...props}\n  />\n));\nconst StandardNavigationMenuItem: React.FC<\n  StandardNavigationMenuItemProps &\n    React.ComponentProps<typeof NavigationMenuPrimitive.Link>\n> = ({ icon, title, subtitle, ...linkProps }) => (\n  <NavigationMenuLink {...linkProps}>\n    <div className=\"hawa-flex hawa-max-w-md hawa-cursor-pointer hawa-flex-row hawa-items-center hawa-gap-4 hawa-rounded-inner hawa-p-4 hawa-py-2 hawa-transition-all  hover:hawa-bg-muted\">\n      {icon && icon}\n      <div className=\"hawa-flex hawa-flex-col\">\n        <h1 className=\"hawa-text-xl hawa-font-bold\">{title}</h1>\n        <p className=\"hawa-text-sm\">{subtitle}</p>\n      </div>\n    </div>\n  </NavigationMenuLink>\n);\nconst NavigationMenuViewport = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      \"hawa-absolute hawa-top-full hawa-flex hawa-w-full hawa-justify-center\"\n    )}\n  >\n    <NavigationMenuPrimitive.Viewport\n      className={cn(\n        \"hawa-origin-top-center hawa-relative hawa-mt-1.5  hawa-w-full hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-lg data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-90 \",\n        // hawa-h-[var(--radix-navigation-menu-viewport-height)]\n        // \"md:hawa-w-[var(--radix-navigation-menu-viewport-width)]\",\n        className\n      )}\n      style={{\n        height: \"calc(var(--radix-navigation-menu-viewport-height) + 1px)\"\n      }}\n      ref={ref}\n      {...props}\n    />\n  </div>\n));\nconst NavigationMenuIndicator = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Indicator\n    ref={ref}\n    className={cn(\n      \"hawa-top-full hawa-z-[1] hawa-flex hawa-h-1.5 hawa-items-end hawa-justify-center hawa-overflow-hidden data-[state=visible]:hawa-animate-in data-[state=hidden]:hawa-animate-out data-[state=hidden]:hawa-fade-out data-[state=visible]:hawa-fade-in\",\n      className\n    )}\n    {...props}\n  >\n    <div className=\"hawa-relative hawa-top-[60%] hawa-h-2 hawa-w-2 hawa-rotate-45 hawa-rounded-tl-sm hawa-bg-border hawa-shadow-md\" />\n  </NavigationMenuPrimitive.Indicator>\n));\n\nconst NavigationMenu: React.FC<NavigationMenuTypes> = ({\n  viewportClassNames,\n  rootClassNames,\n  triggerClassNames,\n  actionFirst,\n  ...props\n}) => {\n  return (\n    <NavigationMenuRoot\n      dir={props.direction}\n      delayDuration={0}\n      className={rootClassNames}\n      viewportClassNames={viewportClassNames}\n    >\n      <NavigationMenuList>\n        {props.items.map((item, i) => (\n          <NavigationMenuItem key={i}>\n            {item.content ? (\n              <>\n                <NavigationMenuTrigger className={cn(triggerClassNames)}>\n                  {item.trigger}\n                </NavigationMenuTrigger>\n                <NavigationMenuContent>{item.content}</NavigationMenuContent>\n              </>\n            ) : (\n              <NavigationMenuLink\n                href={actionFirst ? undefined : item.path}\n                onClick={() => {\n                  if (item.action) {\n                    item.action();\n                  }\n                }}\n                className={cn(\n                  navigationMenuTriggerStyle(),\n                  \"hawa-cursor-pointer hawa-select-none\",\n                  triggerClassNames\n                )}\n              >\n                {item.trigger}\n              </NavigationMenuLink>\n            )}\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenuRoot>\n  );\n};\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item;\nconst NavigationMenuLink = NavigationMenuPrimitive.Link;\n\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;\nNavigationMenuRoot.displayName = NavigationMenuPrimitive.Root.displayName;\nNavigationMenuIndicator.displayName =\n  NavigationMenuPrimitive.Indicator.displayName;\nNavigationMenuViewport.displayName =\n  NavigationMenuPrimitive.Viewport.displayName;\n\nexport {\n  NavigationMenuLink,\n  NavigationMenuItem,\n  NavigationMenu,\n  NavigationMenuIndicator,\n  NavigationMenuContent,\n  NavigationMenuList,\n  navigationMenuTriggerStyle,\n  NavigationMenuRoot,\n  NavigationMenuTrigger,\n  NavigationMenuViewport,\n  StandardNavigationMenuItem\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../elements/navigationMenu/index.ts","../../elements/navigationMenu/NavigationMenu.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./NavigationMenu\";\n","import * as React from \"react\";\n\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\";\nimport { cn } from \"@util/index\";\nimport { cva } from \"class-variance-authority\";\n\nimport { DirectionType } from \"@_types/commonTypes\";\n\nconst navigationMenuTriggerStyle = cva(\n  \"hawa-group hawa-inline-flex hawa-h-10 hawa-w-max hawa-items-center hawa-gap-1 hawa-justify-center hawa-rounded-md hawa-bg-background hawa-px-4 hawa-py-2 hawa-text-sm hawa-font-medium hawa-transition-colors hover:hawa-bg-accent hover:hawa-text-accent-foreground focus:hawa-bg-accent focus:hawa-text-accent-foreground focus:hawa-outline-none disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[active]:hawa-bg-accent/50 \",\n);\n\ntype StandardNavigationMenuItemProps = {\n  icon?: React.ReactNode;\n  title: string;\n  subtitle?: string;\n};\ntype NavigationMenuRootProps = React.ComponentPropsWithoutRef<\n  typeof NavigationMenuPrimitive.Root\n> & {\n  viewportClassNames?: string;\n};\ntype NavigationMenuItemProps = {\n  trigger: any;\n  content?: any;\n  action?: any;\n  path?: string;\n};\ntype NavigationMenuTypes = {\n  items: NavigationMenuItemProps[];\n  rootClassNames?: string;\n  viewportClassNames?: string;\n  triggerClassNames?: string;\n  actionFirst?: boolean;\n  direction?: DirectionType;\n};\n\nconst NavigationMenuRoot = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n  NavigationMenuRootProps\n>(({ className, children, viewportClassNames, ...props }, ref) => (\n  <NavigationMenuPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"hawa-relative hawa-z-10 hawa-flex hawa-flex-1 hawa-items-center hawa-justify-center\",\n      // \"hawa-max-w-max\",\n      className,\n    )}\n    {...props}\n  >\n    {children}\n    <NavigationMenuViewport className={viewportClassNames} />\n  </NavigationMenuPrimitive.Root>\n));\nconst NavigationMenuList = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.List\n    ref={ref}\n    className={cn(\n      \"hawa-group hawa-flex hawa-flex-1 hawa-list-none hawa-items-center hawa-justify-center hawa-gap-1\",\n      className,\n    )}\n    {...props}\n  />\n));\nconst NavigationMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Trigger\n    ref={ref}\n    className={cn(navigationMenuTriggerStyle(), \"hawa-group\", className)}\n    {...props}\n  >\n    {children}\n    <svg\n      aria-label=\"Chevron Icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      className=\"hawa-icon hawa-relative hawa-top-[1px] hawa-transition hawa-duration-200 group-data-[state=open]:hawa-rotate-180\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </NavigationMenuPrimitive.Trigger>\n));\nconst NavigationMenuContent = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"hawa-absolute hawa-left-0 hawa-top-0 hawa-w-full hawa-rounded\",\n      // \"md:hawa-absolute md:hawa-w-auto  hawa-left-0 hawa-top-0 \",\n      //   animation\n      \"data-[motion^=from-]:hawa-animate-in data-[motion^=to-]:hawa-animate-out data-[motion^=from-]:hawa-fade-in data-[motion^=to-]:hawa-fade-out data-[motion=from-end]:hawa-slide-in-from-right-52 data-[motion=from-start]:hawa-slide-in-from-left-52 data-[motion=to-end]:hawa-slide-out-to-right-52 data-[motion=to-start]:hawa-slide-out-to-left-52\",\n      className,\n    )}\n    {...props}\n  />\n));\nconst StandardNavigationMenuItem: React.FC<\n  StandardNavigationMenuItemProps &\n    React.ComponentProps<typeof NavigationMenuPrimitive.Link>\n> = ({ icon, title, subtitle, ...linkProps }) => (\n  <NavigationMenuLink {...linkProps}>\n    <div className=\"hawa-flex hawa-max-w-md hawa-cursor-pointer hawa-flex-row hawa-items-center hawa-gap-4 hawa-rounded-inner hawa-p-4 hawa-py-2 hawa-transition-all hover:hawa-bg-muted\">\n      {icon && icon}\n      <div className=\"hawa-flex hawa-flex-col\">\n        <h1 className=\"hawa-text-xl hawa-font-bold\">{title}</h1>\n        <p className=\"hawa-text-sm\">{subtitle}</p>\n      </div>\n    </div>\n  </NavigationMenuLink>\n);\nconst NavigationMenuViewport = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      \"hawa-absolute hawa-top-full hawa-flex hawa-w-full hawa-justify-center\",\n    )}\n  >\n    <NavigationMenuPrimitive.Viewport\n      className={cn(\n        \"hawa-origin-top-center hawa-relative hawa-mt-1.5 hawa-w-full hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-lg data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-90\",\n        // hawa-h-[var(--radix-navigation-menu-viewport-height)]\n        // \"md:hawa-w-[var(--radix-navigation-menu-viewport-width)]\",\n        className,\n      )}\n      style={{\n        height: \"calc(var(--radix-navigation-menu-viewport-height) + 1px)\",\n      }}\n      ref={ref}\n      {...props}\n    />\n  </div>\n));\nconst NavigationMenuIndicator = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Indicator\n    ref={ref}\n    className={cn(\n      \"hawa-top-full hawa-z-[1] hawa-flex hawa-h-1.5 hawa-items-end hawa-justify-center hawa-overflow-hidden data-[state=visible]:hawa-animate-in data-[state=hidden]:hawa-animate-out data-[state=hidden]:hawa-fade-out data-[state=visible]:hawa-fade-in\",\n      className,\n    )}\n    {...props}\n  >\n    <div className=\"hawa-relative hawa-top-[60%] hawa-h-2 hawa-w-2 hawa-rotate-45 hawa-rounded-tl-sm hawa-bg-border hawa-shadow-md\" />\n  </NavigationMenuPrimitive.Indicator>\n));\n\nconst NavigationMenu: React.FC<NavigationMenuTypes> = ({\n  viewportClassNames,\n  rootClassNames,\n  triggerClassNames,\n  actionFirst,\n  ...props\n}) => {\n  return (\n    <NavigationMenuRoot\n      dir={props.direction}\n      delayDuration={0}\n      className={rootClassNames}\n      viewportClassNames={viewportClassNames}\n    >\n      <NavigationMenuList>\n        {props.items.map((item, i) => (\n          <NavigationMenuItem key={i}>\n            {item.content ? (\n              <>\n                <NavigationMenuTrigger className={cn(triggerClassNames)}>\n                  {item.trigger}\n                </NavigationMenuTrigger>\n                <NavigationMenuContent>{item.content}</NavigationMenuContent>\n              </>\n            ) : (\n              <NavigationMenuLink\n                href={actionFirst ? undefined : item.path}\n                onClick={() => {\n                  if (item.action) {\n                    item.action();\n                  }\n                }}\n                className={cn(\n                  navigationMenuTriggerStyle(),\n                  \"hawa-cursor-pointer hawa-select-none\",\n                  triggerClassNames,\n                )}\n              >\n                {item.trigger}\n              </NavigationMenuLink>\n            )}\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenuRoot>\n  );\n};\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item;\nconst NavigationMenuLink = NavigationMenuPrimitive.Link;\n\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;\nNavigationMenuRoot.displayName = NavigationMenuPrimitive.Root.displayName;\nNavigationMenuIndicator.displayName =\n  NavigationMenuPrimitive.Indicator.displayName;\nNavigationMenuViewport.displayName =\n  NavigationMenuPrimitive.Viewport.displayName;\n\nexport {\n  NavigationMenuLink,\n  NavigationMenuItem,\n  NavigationMenu,\n  NavigationMenuIndicator,\n  NavigationMenuContent,\n  NavigationMenuList,\n  navigationMenuTriggerStyle,\n  NavigationMenuRoot,\n  NavigationMenuTrigger,\n  NavigationMenuViewport,\n  StandardNavigationMenuItem,\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":"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","names":[]}

package/dist/navigationMenu/index.mjs

@@ -3,7 +3,6 @@
 // elements/navigationMenu/NavigationMenu.tsx
 import * as React from "react";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import { cva } from "class-variance-authority";
 
 // util/index.ts
 import { clsx } from "clsx";
@@ -13,6 +12,7 @@ function cn(...inputs) {
 }
 
 // elements/navigationMenu/NavigationMenu.tsx
+import { cva } from "class-variance-authority";
 var navigationMenuTriggerStyle = cva(
   "hawa-group hawa-inline-flex hawa-h-10 hawa-w-max hawa-items-center hawa-gap-1 hawa-justify-center hawa-rounded-md hawa-bg-background hawa-px-4 hawa-py-2 hawa-text-sm hawa-font-medium hawa-transition-colors hover:hawa-bg-accent hover:hawa-text-accent-foreground focus:hawa-bg-accent focus:hawa-text-accent-foreground focus:hawa-outline-none disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[active]:hawa-bg-accent/50 "
 );
@@ -21,7 +21,7 @@ var NavigationMenuRoot = React.forwardRef(({ className, children, viewportClassN
   {
     ref,
     className: cn(
-      "hawa-relative hawa-z-10 hawa-flex  hawa-flex-1 hawa-items-center hawa-justify-center",
+      "hawa-relative hawa-z-10 hawa-flex hawa-flex-1 hawa-items-center hawa-justify-center",
       // "hawa-max-w-max",
       className
     ),
@@ -73,7 +73,7 @@ var NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) => /
   {
     ref,
     className: cn(
-      "hawa-absolute  hawa-left-0 hawa-top-0 hawa-w-full hawa-rounded ",
+      "hawa-absolute hawa-left-0 hawa-top-0 hawa-w-full hawa-rounded",
       // "md:hawa-absolute md:hawa-w-auto  hawa-left-0 hawa-top-0 ",
       //   animation
       "data-[motion^=from-]:hawa-animate-in data-[motion^=to-]:hawa-animate-out data-[motion^=from-]:hawa-fade-in data-[motion^=to-]:hawa-fade-out data-[motion=from-end]:hawa-slide-in-from-right-52 data-[motion=from-start]:hawa-slide-in-from-left-52 data-[motion=to-end]:hawa-slide-out-to-right-52 data-[motion=to-start]:hawa-slide-out-to-left-52",
@@ -82,7 +82,7 @@ var NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) => /
     ...props
   }
 ));
-var StandardNavigationMenuItem = ({ icon, title, subtitle, ...linkProps }) => /* @__PURE__ */ React.createElement(NavigationMenuLink, { ...linkProps }, /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-max-w-md hawa-cursor-pointer hawa-flex-row hawa-items-center hawa-gap-4 hawa-rounded-inner hawa-p-4 hawa-py-2 hawa-transition-all  hover:hawa-bg-muted" }, icon && icon, /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ React.createElement("h1", { className: "hawa-text-xl hawa-font-bold" }, title), /* @__PURE__ */ React.createElement("p", { className: "hawa-text-sm" }, subtitle))));
+var StandardNavigationMenuItem = ({ icon, title, subtitle, ...linkProps }) => /* @__PURE__ */ React.createElement(NavigationMenuLink, { ...linkProps }, /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-max-w-md hawa-cursor-pointer hawa-flex-row hawa-items-center hawa-gap-4 hawa-rounded-inner hawa-p-4 hawa-py-2 hawa-transition-all hover:hawa-bg-muted" }, icon && icon, /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ React.createElement("h1", { className: "hawa-text-xl hawa-font-bold" }, title), /* @__PURE__ */ React.createElement("p", { className: "hawa-text-sm" }, subtitle))));
 var NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
   "div",
   {
@@ -94,7 +94,7 @@ var NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) =>
     NavigationMenuPrimitive.Viewport,
     {
       className: cn(
-        "hawa-origin-top-center hawa-relative hawa-mt-1.5  hawa-w-full hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-lg data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-90 ",
+        "hawa-origin-top-center hawa-relative hawa-mt-1.5 hawa-w-full hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-lg data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-90",
         // hawa-h-[var(--radix-navigation-menu-viewport-height)]
         // "md:hawa-w-[var(--radix-navigation-menu-viewport-width)]",
         className