@sikka/hawa 0.40.1-next → 0.41.1-next

package/dist/card/index.mjs

@@ -57,7 +57,7 @@ var CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   "h3",
   {
     ref,
-    className: cn("hawa-text-2xl hawa-font-semibold ", className),
+    className: cn("hawa-text-2xl hawa-font-semibold", className),
     ...props
   }
 ));

package/dist/card/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../elements/card/Card.tsx","../../util/index.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  clickable?: boolean;\n  variant?: \"default\" | \"neoBrutalism\";\n  asContainer?: boolean;\n}\n\ntype CardContentProps = {\n  headless?: boolean;\n  noPadding?: boolean;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      clickable = false,\n      asContainer = false,\n      ...props\n    },\n    ref,\n  ) => {\n    let variantStyles = {\n      default: cn(\n        \"hawa-rounded-lg hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm\",\n        clickable &&\n          \"hawa-cursor-pointer hawa-transition-all hover:hawa-drop-shadow-md dark:hover:dark-shadow\",\n      ),\n      neoBrutalism: cn(\n        \"neo-brutalism\",\n        // \"hawa-transition-all hawa-uppercase hawa-font-mono  dark:hawa-bg-black hawa-font-bold hawa-py-2 hawa-px-4 hawa-rounded hawa-border-2 hawa-border-primary hawa-shadow-color-primary hawa-transition-[hawa-transform_50ms, hawa-box-shadow_50ms] transition-all uppercase font-mono  dark:bg-black font-bold py-2 px-4 rounded border-2 border-primary shadow-color-primary transition-[transform_50ms, box-shadow_50ms]\",\n        clickable &&\n          \"hawa-cursor-pointer active:hawa-translate-x-0.5 active:hawa-translate-y-0.5 active:hawa-shadow-color-primary-active active:translate-x-0.5 active:translate-y-0.5 active:shadow-color-primary-active\",\n      ),\n    };\n    return (\n      <div\n        ref={ref}\n        className={cn(className, !asContainer && variantStyles[variant])}\n        {...props}\n      />\n    );\n  },\n);\n\ntype CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n  actions?: React.ReactNode;\n};\nconst CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n  ({ className, ...props }, ref) => (\n    <div className=\"hawa-flex hawa-flex-row hawa-justify-between\">\n      <div\n        ref={ref}\n        className={cn(\n          \"hawa-flex hawa-flex-col hawa-space-y-1.5 hawa-p-6\",\n          className,\n        )}\n        {...props}\n      />\n      {props.actions && <div className=\"hawa-p-6\">{props.actions}</div>}\n    </div>\n  ),\n);\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\"hawa-text-2xl hawa-font-semibold \", className)}\n    {...props}\n  />\n));\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"hawa-text-sm hawa-text-muted-foreground\", className)}\n    {...props}\n  />\n));\nconst CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n  ({ headless, noPadding, className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        noPadding ? \"hawa-p-0\" : \"hawa-p-6\",\n        headless ? \"hawa-pt-6\" : \"hawa-pt-0\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & { noPadding?: boolean }\n>(({ className, noPadding, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      noPadding ? \"hawa-p-0\" : \"hawa-p-6\",\n      \"hawa-flex hawa-items-center hawa-pt-0\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nCardDescription.displayName = \"CardDescription\";\nCardContent.displayName = \"CardContent\";\nCardHeader.displayName = \"CardHeader\";\nCardFooter.displayName = \"CardFooter\";\nCardTitle.displayName = \"CardTitle\";\nCard.displayName = \"Card\";\n\nexport {\n  CardDescription,\n  CardContent,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  Card,\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,YAAY,WAAW;;;ACAvB,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADUA,IAAM,OAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,gBAAgB;AAAA,MAClB,SAAS;AAAA,QACP;AAAA,QACA,aACE;AAAA,MACJ;AAAA,MACA,cAAc;AAAA,QACZ;AAAA;AAAA,QAEA,aACE;AAAA,MACJ;AAAA,IACF;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,CAAC,eAAe,cAAc,OAAO,CAAC;AAAA,QAC9D,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAKA,IAAM,aAAmB;AAAA,EACvB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB,oCAAC,SAAI,WAAU,kDACb;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACC,MAAM,WAAW,oCAAC,SAAI,WAAU,cAAY,MAAM,OAAQ,CAC7D;AAEJ;AACA,IAAM,YAAkB,iBAGtB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,qCAAqC,SAAS;AAAA,IAC3D,GAAG;AAAA;AACN,CACD;AACD,IAAM,kBAAwB,iBAG5B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,2CAA2C,SAAS;AAAA,IACjE,GAAG;AAAA;AACN,CACD;AACD,IAAM,cAAoB;AAAA,EACxB,CAAC,EAAE,UAAU,WAAW,WAAW,GAAG,MAAM,GAAG,QAC7C;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,YAAY,aAAa;AAAA,QACzB,WAAW,cAAc;AAAA,QACzB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AACA,IAAM,aAAmB,iBAGvB,CAAC,EAAE,WAAW,WAAW,GAAG,MAAM,GAAG,QACrC;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT,YAAY,aAAa;AAAA,MACzB;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AAED,gBAAgB,cAAc;AAC9B,YAAY,cAAc;AAC1B,WAAW,cAAc;AACzB,WAAW,cAAc;AACzB,UAAU,cAAc;AACxB,KAAK,cAAc;","names":[]}
+{"version":3,"sources":["../../elements/card/Card.tsx","../../util/index.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  clickable?: boolean;\n  variant?: \"default\" | \"neoBrutalism\";\n  asContainer?: boolean;\n}\n\ntype CardContentProps = {\n  headless?: boolean;\n  noPadding?: boolean;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      clickable = false,\n      asContainer = false,\n      ...props\n    },\n    ref,\n  ) => {\n    let variantStyles = {\n      default: cn(\n        \"hawa-rounded-lg hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm\",\n        clickable &&\n          \"hawa-cursor-pointer hawa-transition-all hover:hawa-drop-shadow-md dark:hover:dark-shadow\",\n      ),\n      neoBrutalism: cn(\n        \"neo-brutalism\",\n        // \"hawa-transition-all hawa-uppercase hawa-font-mono  dark:hawa-bg-black hawa-font-bold hawa-py-2 hawa-px-4 hawa-rounded hawa-border-2 hawa-border-primary hawa-shadow-color-primary hawa-transition-[hawa-transform_50ms, hawa-box-shadow_50ms] transition-all uppercase font-mono  dark:bg-black font-bold py-2 px-4 rounded border-2 border-primary shadow-color-primary transition-[transform_50ms, box-shadow_50ms]\",\n        clickable &&\n          \"hawa-cursor-pointer active:hawa-translate-x-0.5 active:hawa-translate-y-0.5 active:hawa-shadow-color-primary-active active:translate-x-0.5 active:translate-y-0.5 active:shadow-color-primary-active\",\n      ),\n    };\n    return (\n      <div\n        ref={ref}\n        className={cn(className, !asContainer && variantStyles[variant])}\n        {...props}\n      />\n    );\n  },\n);\n\ntype CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n  actions?: React.ReactNode;\n};\nconst CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n  ({ className, ...props }, ref) => (\n    <div className=\"hawa-flex hawa-flex-row hawa-justify-between\">\n      <div\n        ref={ref}\n        className={cn(\n          \"hawa-flex hawa-flex-col hawa-space-y-1.5 hawa-p-6\",\n          className,\n        )}\n        {...props}\n      />\n      {props.actions && <div className=\"hawa-p-6\">{props.actions}</div>}\n    </div>\n  ),\n);\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\"hawa-text-2xl hawa-font-semibold\", className)}\n    {...props}\n  />\n));\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"hawa-text-sm hawa-text-muted-foreground\", className)}\n    {...props}\n  />\n));\nconst CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n  ({ headless, noPadding, className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        noPadding ? \"hawa-p-0\" : \"hawa-p-6\",\n        headless ? \"hawa-pt-6\" : \"hawa-pt-0\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & { noPadding?: boolean }\n>(({ className, noPadding, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      noPadding ? \"hawa-p-0\" : \"hawa-p-6\",\n      \"hawa-flex hawa-items-center hawa-pt-0\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nCardDescription.displayName = \"CardDescription\";\nCardContent.displayName = \"CardContent\";\nCardHeader.displayName = \"CardHeader\";\nCardFooter.displayName = \"CardFooter\";\nCardTitle.displayName = \"CardTitle\";\nCard.displayName = \"Card\";\n\nexport {\n  CardDescription,\n  CardContent,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  Card,\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,YAAY,WAAW;;;ACAvB,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADUA,IAAM,OAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,gBAAgB;AAAA,MAClB,SAAS;AAAA,QACP;AAAA,QACA,aACE;AAAA,MACJ;AAAA,MACA,cAAc;AAAA,QACZ;AAAA;AAAA,QAEA,aACE;AAAA,MACJ;AAAA,IACF;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,CAAC,eAAe,cAAc,OAAO,CAAC;AAAA,QAC9D,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAKA,IAAM,aAAmB;AAAA,EACvB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB,oCAAC,SAAI,WAAU,kDACb;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACC,MAAM,WAAW,oCAAC,SAAI,WAAU,cAAY,MAAM,OAAQ,CAC7D;AAEJ;AACA,IAAM,YAAkB,iBAGtB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,oCAAoC,SAAS;AAAA,IAC1D,GAAG;AAAA;AACN,CACD;AACD,IAAM,kBAAwB,iBAG5B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,2CAA2C,SAAS;AAAA,IACjE,GAAG;AAAA;AACN,CACD;AACD,IAAM,cAAoB;AAAA,EACxB,CAAC,EAAE,UAAU,WAAW,WAAW,GAAG,MAAM,GAAG,QAC7C;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,YAAY,aAAa;AAAA,QACzB,WAAW,cAAc;AAAA,QACzB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AACA,IAAM,aAAmB,iBAGvB,CAAC,EAAE,WAAW,WAAW,GAAG,MAAM,GAAG,QACrC;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT,YAAY,aAAa;AAAA,MACzB;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AAED,gBAAgB,cAAc;AAC9B,YAAY,cAAc;AAC1B,WAAW,cAAc;AACzB,WAAW,cAAc;AACzB,UAAU,cAAc;AACxB,KAAK,cAAc;","names":[]}

package/dist/carousel/index.d.mts

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { D as DirectionType } from '../commonTypes-D23Z4zYt.mjs';
 import { EmblaOptionsType } from 'embla-carousel';
+import { D as DirectionType } from '../commonTypes-D23Z4zYt.mjs';
 
 type CarouselProps = {
     items: React__default.ReactNode[];

package/dist/carousel/index.d.ts

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { D as DirectionType } from '../commonTypes-D23Z4zYt.js';
 import { EmblaOptionsType } from 'embla-carousel';
+import { D as DirectionType } from '../commonTypes-D23Z4zYt.js';
 
 type CarouselProps = {
     items: React__default.ReactNode[];

package/dist/carousel/index.js

@@ -87,11 +87,11 @@ var Carousel = ({
   const length = import_react.default.Children.count(items);
   const canScrollNext = !!(emblaApi == null ? void 0 : emblaApi.canScrollNext());
   const canScrollPrev = !!(emblaApi == null ? void 0 : emblaApi.canScrollPrev());
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: " hawa-relative hawa-h-full" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-h-full hawa-overflow-hidden" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-h-full", ref: emblaRef }, /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-flex hawa-h-full" }, items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-relative hawa-h-full" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-h-full hawa-overflow-hidden" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-h-full", ref: emblaRef }, /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-flex hawa-h-full" }, items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       key: i,
-      className: "hawa-flex hawa-h-full hawa-min-w-0  hawa-flex-[0_0_100%]  hawa-items-center hawa-justify-center"
+      className: "hawa-flex hawa-h-full hawa-min-w-0 hawa-flex-[0_0_100%] hawa-items-center hawa-justify-center"
     },
     item
   ))))), /* @__PURE__ */ import_react.default.createElement(
@@ -142,13 +142,13 @@ var Dots = ({
   );
 };
 var CarouselControls = (props) => {
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-flex hawa-justify-end hawa-gap-2 " }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-flex hawa-justify-end hawa-gap-2" }, /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
       onClick: () => props.canScrollPrev && props.onPrev(),
       disabled: !props.canScrollPrev,
       className: cn(
-        "hawa-absolute hawa-start-0 hawa-top-1/2 -hawa-translate-y-2 hawa-rounded-full hawa-p-2 hawa-text-white ",
+        "hawa-absolute hawa-start-0 hawa-top-1/2 -hawa-translate-y-2 hawa-rounded-full hawa-p-2 hawa-text-white",
         !props.canScrollPrev && "hawa-bg-primary/50",
         props.canScrollPrev && "hawa-bg-primary"
       )
@@ -160,7 +160,7 @@ var CarouselControls = (props) => {
         stroke: "currentColor",
         fill: "currentColor",
         viewBox: "0 0 16 16",
-        className: "hawa-h-2 hawa-w-2 hawa-shrink-0 hawa-rotate-180 hawa-transition-transform hawa-duration-200 "
+        className: "hawa-h-2 hawa-w-2 hawa-shrink-0 hawa-rotate-180 hawa-transition-transform hawa-duration-200"
       },
       /* @__PURE__ */ import_react.default.createElement("path", { d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })
     )
@@ -170,7 +170,7 @@ var CarouselControls = (props) => {
       onClick: () => props.canScrollNext && props.onNext(),
       disabled: !props.canScrollNext,
       className: cn(
-        "hawa-absolute hawa-end-0 hawa-top-1/2 -hawa-translate-y-2 hawa-rounded-full hawa-p-2 hawa-text-white ",
+        "hawa-absolute hawa-end-0 hawa-top-1/2 -hawa-translate-y-2 hawa-rounded-full hawa-p-2 hawa-text-white",
         !props.canScrollNext && "hawa-bg-primary/50",
         props.canScrollNext && "hawa-bg-primary"
       )
@@ -182,7 +182,7 @@ var CarouselControls = (props) => {
         stroke: "currentColor",
         fill: "currentColor",
         viewBox: "0 0 16 16",
-        className: "hawa-h-2 hawa-w-2  hawa-shrink-0 hawa-transition-transform hawa-duration-200 "
+        className: "hawa-h-2 hawa-w-2 hawa-shrink-0 hawa-transition-transform hawa-duration-200"
       },
       /* @__PURE__ */ import_react.default.createElement("path", { d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })
     )

package/dist/carousel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../elements/carousel/index.ts","../../elements/carousel/Carousel.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./Carousel\";\n","import React, { useEffect, useState } from \"react\";\n\nimport { DirectionType } from \"@_types/commonTypes\";\n// import useEmblaCarousel, { EmblaOptionsType } from \"embla-carousel-react\";\nimport { cn } from \"@util/index\";\nimport { EmblaOptionsType } from \"embla-carousel\";\nimport useEmblaCarousel from \"embla-carousel-react\";\n\ntype CarouselProps = {\n  items: React.ReactNode[];\n  showArrows?: boolean;\n  autoplay?: boolean;\n  autoplayInterval?: number;\n  options?: EmblaOptionsType;\n  direction?: DirectionType;\n};\ntype DotsProps = {\n  itemsLength: number;\n  selectedIndex: number;\n  direction: DirectionType;\n  onDotClick: (index: number) => void;\n};\ntype ControlsProps = {\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n  onPrev(): void;\n  onNext(): void;\n};\n\nexport const Carousel: React.FC<CarouselProps> = ({\n  items,\n  showArrows,\n  options,\n  autoplay,\n  direction = \"ltr\",\n  autoplayInterval = 3000,\n  ...props\n}) => {\n  const [emblaRef, emblaApi] = useEmblaCarousel({\n    ...options,\n    direction,\n    loop: autoplay ? true : options?.loop || false\n  });\n  const [selectedIndex, setSelectedIndex] = useState(0);\n\n  useEffect(() => {\n    function selectHandler() {\n      const index = emblaApi?.selectedScrollSnap();\n      setSelectedIndex(index || 0);\n    }\n\n    emblaApi?.on(\"select\", selectHandler);\n    return () => {\n      emblaApi?.off(\"select\", selectHandler);\n    };\n  }, [emblaApi]);\n\n  useEffect(() => {\n    let autoplayTimer: ReturnType<typeof setTimeout>;\n    if (autoplay && emblaApi) {\n      autoplayTimer = setInterval(() => {\n        emblaApi.scrollNext();\n      }, autoplayInterval);\n    }\n\n    return () => {\n      if (autoplayTimer) clearInterval(autoplayTimer);\n    };\n  }, [emblaApi, autoplay, autoplayInterval]);\n\n  const length = React.Children.count(items);\n  const canScrollNext = !!emblaApi?.canScrollNext();\n  const canScrollPrev = !!emblaApi?.canScrollPrev();\n  return (\n    <div className=\" hawa-relative hawa-h-full\">\n      <div className=\"hawa-h-full hawa-overflow-hidden\">\n        <div className=\"hawa-h-full\" ref={emblaRef}>\n          <div className=\"hawa-flex hawa-h-full\">\n            {items?.map((item: any, i: any) => (\n              <div\n                key={i}\n                className=\"hawa-flex hawa-h-full hawa-min-w-0  hawa-flex-[0_0_100%]  hawa-items-center hawa-justify-center\"\n              >\n                {item}\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n\n      <Dots\n        direction={direction}\n        itemsLength={length}\n        selectedIndex={selectedIndex}\n        onDotClick={(index) => emblaApi?.scrollTo(index)}\n      />\n\n      {showArrows && (\n        <CarouselControls\n          canScrollNext={canScrollNext}\n          canScrollPrev={canScrollPrev}\n          onNext={() => emblaApi?.scrollNext()}\n          onPrev={() => emblaApi?.scrollPrev()}\n        />\n      )}\n    </div>\n  );\n};\n\nconst Dots = ({\n  onDotClick,\n  itemsLength,\n  selectedIndex,\n  direction\n}: DotsProps) => {\n  const arr = new Array(itemsLength).fill(0);\n  return (\n    <div\n      dir={direction}\n      className=\"hawa-z-50 hawa-my-2 hawa-flex hawa-justify-center hawa-gap-1\"\n    >\n      {arr.map((_, index) => {\n        const selected = index === selectedIndex;\n        return (\n          <div\n            key={index}\n            onClick={() => onDotClick(index)}\n            className={cn(\n              \"hawa-h-2 hawa-rounded-full hawa-bg-primary hawa-transition-all hawa-duration-300 hover:hawa-cursor-pointer\",\n              !selected\n                ? \"hawa-w-2 hawa-opacity-50\"\n                : \"hawa-w-6 hawa-opacity-100\"\n            )}\n          ></div>\n        );\n      })}\n    </div>\n  );\n};\n\nconst CarouselControls = (props: ControlsProps) => {\n  return (\n    <div className=\"hawa-flex hawa-justify-end hawa-gap-2 \">\n      <button\n        onClick={() => props.canScrollPrev && props.onPrev()}\n        disabled={!props.canScrollPrev}\n        className={cn(\n          \"hawa-absolute hawa-start-0 hawa-top-1/2 -hawa-translate-y-2 hawa-rounded-full hawa-p-2 hawa-text-white \",\n          !props.canScrollPrev && \"hawa-bg-primary/50\",\n          props.canScrollPrev && \"hawa-bg-primary\"\n        )}\n      >\n        <svg\n          aria-label=\"Chevron Right Icon\"\n          stroke=\"currentColor\"\n          fill=\"currentColor\"\n          viewBox=\"0 0 16 16\"\n          className=\"hawa-h-2 hawa-w-2 hawa-shrink-0 hawa-rotate-180 hawa-transition-transform hawa-duration-200 \"\n        >\n          <path d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"></path>\n        </svg>\n      </button>\n      <button\n        onClick={() => props.canScrollNext && props.onNext()}\n        disabled={!props.canScrollNext}\n        className={cn(\n          \"hawa-absolute hawa-end-0 hawa-top-1/2 -hawa-translate-y-2 hawa-rounded-full hawa-p-2 hawa-text-white \",\n          !props.canScrollNext && \"hawa-bg-primary/50\",\n          props.canScrollNext && \"hawa-bg-primary\"\n        )}\n      >\n        <svg\n          aria-label=\"Chevron Right Icon\"\n          stroke=\"currentColor\"\n          fill=\"currentColor\"\n          viewBox=\"0 0 16 16\"\n          className=\"hawa-h-2 hawa-w-2  hawa-shrink-0 hawa-transition-transform hawa-duration-200 \"\n        >\n          <path d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"></path>\n        </svg>\n      </button>\n    </div>\n  );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":"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","names":["useEmblaCarousel","React"]}
+{"version":3,"sources":["../../elements/carousel/index.ts","../../elements/carousel/Carousel.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./Carousel\";\n","import React, { useEffect, useState } from \"react\";\n\nimport { cn } from \"@util/index\";\nimport { EmblaOptionsType } from \"embla-carousel\";\nimport useEmblaCarousel from \"embla-carousel-react\";\n\nimport { DirectionType } from \"@_types/commonTypes\";\n\ntype CarouselProps = {\n  items: React.ReactNode[];\n  showArrows?: boolean;\n  autoplay?: boolean;\n  autoplayInterval?: number;\n  options?: EmblaOptionsType;\n  direction?: DirectionType;\n};\ntype DotsProps = {\n  itemsLength: number;\n  selectedIndex: number;\n  direction: DirectionType;\n  onDotClick: (index: number) => void;\n};\ntype ControlsProps = {\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n  onPrev(): void;\n  onNext(): void;\n};\n\nexport const Carousel: React.FC<CarouselProps> = ({\n  items,\n  showArrows,\n  options,\n  autoplay,\n  direction = \"ltr\",\n  autoplayInterval = 3000,\n  ...props\n}) => {\n  const [emblaRef, emblaApi] = useEmblaCarousel({\n    ...options,\n    direction,\n    loop: autoplay ? true : options?.loop || false,\n  });\n  const [selectedIndex, setSelectedIndex] = useState(0);\n\n  useEffect(() => {\n    function selectHandler() {\n      const index = emblaApi?.selectedScrollSnap();\n      setSelectedIndex(index || 0);\n    }\n\n    emblaApi?.on(\"select\", selectHandler);\n    return () => {\n      emblaApi?.off(\"select\", selectHandler);\n    };\n  }, [emblaApi]);\n\n  useEffect(() => {\n    let autoplayTimer: ReturnType<typeof setTimeout>;\n    if (autoplay && emblaApi) {\n      autoplayTimer = setInterval(() => {\n        emblaApi.scrollNext();\n      }, autoplayInterval);\n    }\n\n    return () => {\n      if (autoplayTimer) clearInterval(autoplayTimer);\n    };\n  }, [emblaApi, autoplay, autoplayInterval]);\n\n  const length = React.Children.count(items);\n  const canScrollNext = !!emblaApi?.canScrollNext();\n  const canScrollPrev = !!emblaApi?.canScrollPrev();\n  return (\n    <div className=\"hawa-relative hawa-h-full\">\n      <div className=\"hawa-h-full hawa-overflow-hidden\">\n        <div className=\"hawa-h-full\" ref={emblaRef}>\n          <div className=\"hawa-flex hawa-h-full\">\n            {items?.map((item: any, i: any) => (\n              <div\n                key={i}\n                className=\"hawa-flex hawa-h-full hawa-min-w-0 hawa-flex-[0_0_100%] hawa-items-center hawa-justify-center\"\n              >\n                {item}\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n\n      <Dots\n        direction={direction}\n        itemsLength={length}\n        selectedIndex={selectedIndex}\n        onDotClick={(index) => emblaApi?.scrollTo(index)}\n      />\n\n      {showArrows && (\n        <CarouselControls\n          canScrollNext={canScrollNext}\n          canScrollPrev={canScrollPrev}\n          onNext={() => emblaApi?.scrollNext()}\n          onPrev={() => emblaApi?.scrollPrev()}\n        />\n      )}\n    </div>\n  );\n};\n\nconst Dots = ({\n  onDotClick,\n  itemsLength,\n  selectedIndex,\n  direction,\n}: DotsProps) => {\n  const arr = new Array(itemsLength).fill(0);\n  return (\n    <div\n      dir={direction}\n      className=\"hawa-z-50 hawa-my-2 hawa-flex hawa-justify-center hawa-gap-1\"\n    >\n      {arr.map((_, index) => {\n        const selected = index === selectedIndex;\n        return (\n          <div\n            key={index}\n            onClick={() => onDotClick(index)}\n            className={cn(\n              \"hawa-h-2 hawa-rounded-full hawa-bg-primary hawa-transition-all hawa-duration-300 hover:hawa-cursor-pointer\",\n              !selected\n                ? \"hawa-w-2 hawa-opacity-50\"\n                : \"hawa-w-6 hawa-opacity-100\",\n            )}\n          ></div>\n        );\n      })}\n    </div>\n  );\n};\n\nconst CarouselControls = (props: ControlsProps) => {\n  return (\n    <div className=\"hawa-flex hawa-justify-end hawa-gap-2\">\n      <button\n        onClick={() => props.canScrollPrev && props.onPrev()}\n        disabled={!props.canScrollPrev}\n        className={cn(\n          \"hawa-absolute hawa-start-0 hawa-top-1/2 -hawa-translate-y-2 hawa-rounded-full hawa-p-2 hawa-text-white\",\n          !props.canScrollPrev && \"hawa-bg-primary/50\",\n          props.canScrollPrev && \"hawa-bg-primary\",\n        )}\n      >\n        <svg\n          aria-label=\"Chevron Right Icon\"\n          stroke=\"currentColor\"\n          fill=\"currentColor\"\n          viewBox=\"0 0 16 16\"\n          className=\"hawa-h-2 hawa-w-2 hawa-shrink-0 hawa-rotate-180 hawa-transition-transform hawa-duration-200\"\n        >\n          <path d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"></path>\n        </svg>\n      </button>\n      <button\n        onClick={() => props.canScrollNext && props.onNext()}\n        disabled={!props.canScrollNext}\n        className={cn(\n          \"hawa-absolute hawa-end-0 hawa-top-1/2 -hawa-translate-y-2 hawa-rounded-full hawa-p-2 hawa-text-white\",\n          !props.canScrollNext && \"hawa-bg-primary/50\",\n          props.canScrollNext && \"hawa-bg-primary\",\n        )}\n      >\n        <svg\n          aria-label=\"Chevron Right Icon\"\n          stroke=\"currentColor\"\n          fill=\"currentColor\"\n          viewBox=\"0 0 16 16\"\n          className=\"hawa-h-2 hawa-w-2 hawa-shrink-0 hawa-transition-transform hawa-duration-200\"\n        >\n          <path d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"></path>\n        </svg>\n      </button>\n    </div>\n  );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA2C;;;ACA3C,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADDA,kCAA6B;AAyBtB,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,QAAQ,QAAI,4BAAAA,SAAiB;AAAA,IAC5C,GAAG;AAAA,IACH;AAAA,IACA,MAAM,WAAW,QAAO,mCAAS,SAAQ;AAAA,EAC3C,CAAC;AACD,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,CAAC;AAEpD,8BAAU,MAAM;AACd,aAAS,gBAAgB;AACvB,YAAM,QAAQ,qCAAU;AACxB,uBAAiB,SAAS,CAAC;AAAA,IAC7B;AAEA,yCAAU,GAAG,UAAU;AACvB,WAAO,MAAM;AACX,2CAAU,IAAI,UAAU;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,8BAAU,MAAM;AACd,QAAI;AACJ,QAAI,YAAY,UAAU;AACxB,sBAAgB,YAAY,MAAM;AAChC,iBAAS,WAAW;AAAA,MACtB,GAAG,gBAAgB;AAAA,IACrB;AAEA,WAAO,MAAM;AACX,UAAI;AAAe,sBAAc,aAAa;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,UAAU,UAAU,gBAAgB,CAAC;AAEzC,QAAM,SAAS,aAAAC,QAAM,SAAS,MAAM,KAAK;AACzC,QAAM,gBAAgB,CAAC,EAAC,qCAAU;AAClC,QAAM,gBAAgB,CAAC,EAAC,qCAAU;AAClC,SACE,6BAAAA,QAAA,cAAC,SAAI,WAAU,+BACb,6BAAAA,QAAA,cAAC,SAAI,WAAU,sCACb,6BAAAA,QAAA,cAAC,SAAI,WAAU,eAAc,KAAK,YAChC,6BAAAA,QAAA,cAAC,SAAI,WAAU,2BACZ,+BAAO,IAAI,CAAC,MAAW,MACtB,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA;AAAA,IAET;AAAA,EACH,EAEJ,CACF,CACF,GAEA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,YAAY,CAAC,UAAU,qCAAU,SAAS;AAAA;AAAA,EAC5C,GAEC,cACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,QAAQ,MAAM,qCAAU;AAAA,MACxB,QAAQ,MAAM,qCAAU;AAAA;AAAA,EAC1B,CAEJ;AAEJ;AAEA,IAAM,OAAO,CAAC;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAiB;AACf,QAAM,MAAM,IAAI,MAAM,WAAW,EAAE,KAAK,CAAC;AACzC,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA;AAAA,IAET,IAAI,IAAI,CAAC,GAAG,UAAU;AACrB,YAAM,WAAW,UAAU;AAC3B,aACE,6BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,SAAS,MAAM,WAAW,KAAK;AAAA,UAC/B,WAAW;AAAA,YACT;AAAA,YACA,CAAC,WACG,6BACA;AAAA,UACN;AAAA;AAAA,MACD;AAAA,IAEL,CAAC;AAAA,EACH;AAEJ;AAEA,IAAM,mBAAmB,CAAC,UAAyB;AACjD,SACE,6BAAAA,QAAA,cAAC,SAAI,WAAU,2CACb,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,MAAM,MAAM,iBAAiB,MAAM,OAAO;AAAA,MACnD,UAAU,CAAC,MAAM;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA,CAAC,MAAM,iBAAiB;AAAA,QACxB,MAAM,iBAAiB;AAAA,MACzB;AAAA;AAAA,IAEA,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,QAAO;AAAA,QACP,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,WAAU;AAAA;AAAA,MAEV,6BAAAA,QAAA,cAAC,UAAK,GAAE,0HAAyH;AAAA,IACnI;AAAA,EACF,GACA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,MAAM,MAAM,iBAAiB,MAAM,OAAO;AAAA,MACnD,UAAU,CAAC,MAAM;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA,CAAC,MAAM,iBAAiB;AAAA,QACxB,MAAM,iBAAiB;AAAA,MACzB;AAAA;AAAA,IAEA,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,QAAO;AAAA,QACP,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,WAAU;AAAA;AAAA,MAEV,6BAAAA,QAAA,cAAC,UAAK,GAAE,0HAAyH;AAAA,IACnI;AAAA,EACF,CACF;AAEJ;","names":["useEmblaCarousel","React"]}

package/dist/carousel/index.mjs

@@ -52,11 +52,11 @@ var Carousel = ({
   const length = React.Children.count(items);
   const canScrollNext = !!(emblaApi == null ? void 0 : emblaApi.canScrollNext());
   const canScrollPrev = !!(emblaApi == null ? void 0 : emblaApi.canScrollPrev());
-  return /* @__PURE__ */ React.createElement("div", { className: " hawa-relative hawa-h-full" }, /* @__PURE__ */ React.createElement("div", { className: "hawa-h-full hawa-overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "hawa-h-full", ref: emblaRef }, /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-h-full" }, items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "hawa-relative hawa-h-full" }, /* @__PURE__ */ React.createElement("div", { className: "hawa-h-full hawa-overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "hawa-h-full", ref: emblaRef }, /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-h-full" }, items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ React.createElement(
     "div",
     {
       key: i,
-      className: "hawa-flex hawa-h-full hawa-min-w-0  hawa-flex-[0_0_100%]  hawa-items-center hawa-justify-center"
+      className: "hawa-flex hawa-h-full hawa-min-w-0 hawa-flex-[0_0_100%] hawa-items-center hawa-justify-center"
     },
     item
   ))))), /* @__PURE__ */ React.createElement(
@@ -107,13 +107,13 @@ var Dots = ({
   );
 };
 var CarouselControls = (props) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-justify-end hawa-gap-2 " }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-justify-end hawa-gap-2" }, /* @__PURE__ */ React.createElement(
     "button",
     {
       onClick: () => props.canScrollPrev && props.onPrev(),
       disabled: !props.canScrollPrev,
       className: cn(
-        "hawa-absolute hawa-start-0 hawa-top-1/2 -hawa-translate-y-2 hawa-rounded-full hawa-p-2 hawa-text-white ",
+        "hawa-absolute hawa-start-0 hawa-top-1/2 -hawa-translate-y-2 hawa-rounded-full hawa-p-2 hawa-text-white",
         !props.canScrollPrev && "hawa-bg-primary/50",
         props.canScrollPrev && "hawa-bg-primary"
       )
@@ -125,7 +125,7 @@ var CarouselControls = (props) => {
         stroke: "currentColor",
         fill: "currentColor",
         viewBox: "0 0 16 16",
-        className: "hawa-h-2 hawa-w-2 hawa-shrink-0 hawa-rotate-180 hawa-transition-transform hawa-duration-200 "
+        className: "hawa-h-2 hawa-w-2 hawa-shrink-0 hawa-rotate-180 hawa-transition-transform hawa-duration-200"
       },
       /* @__PURE__ */ React.createElement("path", { d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })
     )
@@ -135,7 +135,7 @@ var CarouselControls = (props) => {
       onClick: () => props.canScrollNext && props.onNext(),
       disabled: !props.canScrollNext,
       className: cn(
-        "hawa-absolute hawa-end-0 hawa-top-1/2 -hawa-translate-y-2 hawa-rounded-full hawa-p-2 hawa-text-white ",
+        "hawa-absolute hawa-end-0 hawa-top-1/2 -hawa-translate-y-2 hawa-rounded-full hawa-p-2 hawa-text-white",
         !props.canScrollNext && "hawa-bg-primary/50",
         props.canScrollNext && "hawa-bg-primary"
       )
@@ -147,7 +147,7 @@ var CarouselControls = (props) => {
         stroke: "currentColor",
         fill: "currentColor",
         viewBox: "0 0 16 16",
-        className: "hawa-h-2 hawa-w-2  hawa-shrink-0 hawa-transition-transform hawa-duration-200 "
+        className: "hawa-h-2 hawa-w-2 hawa-shrink-0 hawa-transition-transform hawa-duration-200"
       },
       /* @__PURE__ */ React.createElement("path", { d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })
     )

package/dist/carousel/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../elements/carousel/Carousel.tsx","../../util/index.ts"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport { DirectionType } from \"@_types/commonTypes\";\n// import useEmblaCarousel, { EmblaOptionsType } from \"embla-carousel-react\";\nimport { cn } from \"@util/index\";\nimport { EmblaOptionsType } from \"embla-carousel\";\nimport useEmblaCarousel from \"embla-carousel-react\";\n\ntype CarouselProps = {\n  items: React.ReactNode[];\n  showArrows?: boolean;\n  autoplay?: boolean;\n  autoplayInterval?: number;\n  options?: EmblaOptionsType;\n  direction?: DirectionType;\n};\ntype DotsProps = {\n  itemsLength: number;\n  selectedIndex: number;\n  direction: DirectionType;\n  onDotClick: (index: number) => void;\n};\ntype ControlsProps = {\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n  onPrev(): void;\n  onNext(): void;\n};\n\nexport const Carousel: React.FC<CarouselProps> = ({\n  items,\n  showArrows,\n  options,\n  autoplay,\n  direction = \"ltr\",\n  autoplayInterval = 3000,\n  ...props\n}) => {\n  const [emblaRef, emblaApi] = useEmblaCarousel({\n    ...options,\n    direction,\n    loop: autoplay ? true : options?.loop || false\n  });\n  const [selectedIndex, setSelectedIndex] = useState(0);\n\n  useEffect(() => {\n    function selectHandler() {\n      const index = emblaApi?.selectedScrollSnap();\n      setSelectedIndex(index || 0);\n    }\n\n    emblaApi?.on(\"select\", selectHandler);\n    return () => {\n      emblaApi?.off(\"select\", selectHandler);\n    };\n  }, [emblaApi]);\n\n  useEffect(() => {\n    let autoplayTimer: ReturnType<typeof setTimeout>;\n    if (autoplay && emblaApi) {\n      autoplayTimer = setInterval(() => {\n        emblaApi.scrollNext();\n      }, autoplayInterval);\n    }\n\n    return () => {\n      if (autoplayTimer) clearInterval(autoplayTimer);\n    };\n  }, [emblaApi, autoplay, autoplayInterval]);\n\n  const length = React.Children.count(items);\n  const canScrollNext = !!emblaApi?.canScrollNext();\n  const canScrollPrev = !!emblaApi?.canScrollPrev();\n  return (\n    <div className=\" hawa-relative hawa-h-full\">\n      <div className=\"hawa-h-full hawa-overflow-hidden\">\n        <div className=\"hawa-h-full\" ref={emblaRef}>\n          <div className=\"hawa-flex hawa-h-full\">\n            {items?.map((item: any, i: any) => (\n              <div\n                key={i}\n                className=\"hawa-flex hawa-h-full hawa-min-w-0  hawa-flex-[0_0_100%]  hawa-items-center hawa-justify-center\"\n              >\n                {item}\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n\n      <Dots\n        direction={direction}\n        itemsLength={length}\n        selectedIndex={selectedIndex}\n        onDotClick={(index) => emblaApi?.scrollTo(index)}\n      />\n\n      {showArrows && (\n        <CarouselControls\n          canScrollNext={canScrollNext}\n          canScrollPrev={canScrollPrev}\n          onNext={() => emblaApi?.scrollNext()}\n          onPrev={() => emblaApi?.scrollPrev()}\n        />\n      )}\n    </div>\n  );\n};\n\nconst Dots = ({\n  onDotClick,\n  itemsLength,\n  selectedIndex,\n  direction\n}: DotsProps) => {\n  const arr = new Array(itemsLength).fill(0);\n  return (\n    <div\n      dir={direction}\n      className=\"hawa-z-50 hawa-my-2 hawa-flex hawa-justify-center hawa-gap-1\"\n    >\n      {arr.map((_, index) => {\n        const selected = index === selectedIndex;\n        return (\n          <div\n            key={index}\n            onClick={() => onDotClick(index)}\n            className={cn(\n              \"hawa-h-2 hawa-rounded-full hawa-bg-primary hawa-transition-all hawa-duration-300 hover:hawa-cursor-pointer\",\n              !selected\n                ? \"hawa-w-2 hawa-opacity-50\"\n                : \"hawa-w-6 hawa-opacity-100\"\n            )}\n          ></div>\n        );\n      })}\n    </div>\n  );\n};\n\nconst CarouselControls = (props: ControlsProps) => {\n  return (\n    <div className=\"hawa-flex hawa-justify-end hawa-gap-2 \">\n      <button\n        onClick={() => props.canScrollPrev && props.onPrev()}\n        disabled={!props.canScrollPrev}\n        className={cn(\n          \"hawa-absolute hawa-start-0 hawa-top-1/2 -hawa-translate-y-2 hawa-rounded-full hawa-p-2 hawa-text-white \",\n          !props.canScrollPrev && \"hawa-bg-primary/50\",\n          props.canScrollPrev && \"hawa-bg-primary\"\n        )}\n      >\n        <svg\n          aria-label=\"Chevron Right Icon\"\n          stroke=\"currentColor\"\n          fill=\"currentColor\"\n          viewBox=\"0 0 16 16\"\n          className=\"hawa-h-2 hawa-w-2 hawa-shrink-0 hawa-rotate-180 hawa-transition-transform hawa-duration-200 \"\n        >\n          <path d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"></path>\n        </svg>\n      </button>\n      <button\n        onClick={() => props.canScrollNext && props.onNext()}\n        disabled={!props.canScrollNext}\n        className={cn(\n          \"hawa-absolute hawa-end-0 hawa-top-1/2 -hawa-translate-y-2 hawa-rounded-full hawa-p-2 hawa-text-white \",\n          !props.canScrollNext && \"hawa-bg-primary/50\",\n          props.canScrollNext && \"hawa-bg-primary\"\n        )}\n      >\n        <svg\n          aria-label=\"Chevron Right Icon\"\n          stroke=\"currentColor\"\n          fill=\"currentColor\"\n          viewBox=\"0 0 16 16\"\n          className=\"hawa-h-2 hawa-w-2  hawa-shrink-0 hawa-transition-transform hawa-duration-200 \"\n        >\n          <path d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"></path>\n        </svg>\n      </button>\n    </div>\n  );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../elements/carousel/Carousel.tsx","../../util/index.ts"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport { cn } from \"@util/index\";\nimport { EmblaOptionsType } from \"embla-carousel\";\nimport useEmblaCarousel from \"embla-carousel-react\";\n\nimport { DirectionType } from \"@_types/commonTypes\";\n\ntype CarouselProps = {\n  items: React.ReactNode[];\n  showArrows?: boolean;\n  autoplay?: boolean;\n  autoplayInterval?: number;\n  options?: EmblaOptionsType;\n  direction?: DirectionType;\n};\ntype DotsProps = {\n  itemsLength: number;\n  selectedIndex: number;\n  direction: DirectionType;\n  onDotClick: (index: number) => void;\n};\ntype ControlsProps = {\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n  onPrev(): void;\n  onNext(): void;\n};\n\nexport const Carousel: React.FC<CarouselProps> = ({\n  items,\n  showArrows,\n  options,\n  autoplay,\n  direction = \"ltr\",\n  autoplayInterval = 3000,\n  ...props\n}) => {\n  const [emblaRef, emblaApi] = useEmblaCarousel({\n    ...options,\n    direction,\n    loop: autoplay ? true : options?.loop || false,\n  });\n  const [selectedIndex, setSelectedIndex] = useState(0);\n\n  useEffect(() => {\n    function selectHandler() {\n      const index = emblaApi?.selectedScrollSnap();\n      setSelectedIndex(index || 0);\n    }\n\n    emblaApi?.on(\"select\", selectHandler);\n    return () => {\n      emblaApi?.off(\"select\", selectHandler);\n    };\n  }, [emblaApi]);\n\n  useEffect(() => {\n    let autoplayTimer: ReturnType<typeof setTimeout>;\n    if (autoplay && emblaApi) {\n      autoplayTimer = setInterval(() => {\n        emblaApi.scrollNext();\n      }, autoplayInterval);\n    }\n\n    return () => {\n      if (autoplayTimer) clearInterval(autoplayTimer);\n    };\n  }, [emblaApi, autoplay, autoplayInterval]);\n\n  const length = React.Children.count(items);\n  const canScrollNext = !!emblaApi?.canScrollNext();\n  const canScrollPrev = !!emblaApi?.canScrollPrev();\n  return (\n    <div className=\"hawa-relative hawa-h-full\">\n      <div className=\"hawa-h-full hawa-overflow-hidden\">\n        <div className=\"hawa-h-full\" ref={emblaRef}>\n          <div className=\"hawa-flex hawa-h-full\">\n            {items?.map((item: any, i: any) => (\n              <div\n                key={i}\n                className=\"hawa-flex hawa-h-full hawa-min-w-0 hawa-flex-[0_0_100%] hawa-items-center hawa-justify-center\"\n              >\n                {item}\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n\n      <Dots\n        direction={direction}\n        itemsLength={length}\n        selectedIndex={selectedIndex}\n        onDotClick={(index) => emblaApi?.scrollTo(index)}\n      />\n\n      {showArrows && (\n        <CarouselControls\n          canScrollNext={canScrollNext}\n          canScrollPrev={canScrollPrev}\n          onNext={() => emblaApi?.scrollNext()}\n          onPrev={() => emblaApi?.scrollPrev()}\n        />\n      )}\n    </div>\n  );\n};\n\nconst Dots = ({\n  onDotClick,\n  itemsLength,\n  selectedIndex,\n  direction,\n}: DotsProps) => {\n  const arr = new Array(itemsLength).fill(0);\n  return (\n    <div\n      dir={direction}\n      className=\"hawa-z-50 hawa-my-2 hawa-flex hawa-justify-center hawa-gap-1\"\n    >\n      {arr.map((_, index) => {\n        const selected = index === selectedIndex;\n        return (\n          <div\n            key={index}\n            onClick={() => onDotClick(index)}\n            className={cn(\n              \"hawa-h-2 hawa-rounded-full hawa-bg-primary hawa-transition-all hawa-duration-300 hover:hawa-cursor-pointer\",\n              !selected\n                ? \"hawa-w-2 hawa-opacity-50\"\n                : \"hawa-w-6 hawa-opacity-100\",\n            )}\n          ></div>\n        );\n      })}\n    </div>\n  );\n};\n\nconst CarouselControls = (props: ControlsProps) => {\n  return (\n    <div className=\"hawa-flex hawa-justify-end hawa-gap-2\">\n      <button\n        onClick={() => props.canScrollPrev && props.onPrev()}\n        disabled={!props.canScrollPrev}\n        className={cn(\n          \"hawa-absolute hawa-start-0 hawa-top-1/2 -hawa-translate-y-2 hawa-rounded-full hawa-p-2 hawa-text-white\",\n          !props.canScrollPrev && \"hawa-bg-primary/50\",\n          props.canScrollPrev && \"hawa-bg-primary\",\n        )}\n      >\n        <svg\n          aria-label=\"Chevron Right Icon\"\n          stroke=\"currentColor\"\n          fill=\"currentColor\"\n          viewBox=\"0 0 16 16\"\n          className=\"hawa-h-2 hawa-w-2 hawa-shrink-0 hawa-rotate-180 hawa-transition-transform hawa-duration-200\"\n        >\n          <path d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"></path>\n        </svg>\n      </button>\n      <button\n        onClick={() => props.canScrollNext && props.onNext()}\n        disabled={!props.canScrollNext}\n        className={cn(\n          \"hawa-absolute hawa-end-0 hawa-top-1/2 -hawa-translate-y-2 hawa-rounded-full hawa-p-2 hawa-text-white\",\n          !props.canScrollNext && \"hawa-bg-primary/50\",\n          props.canScrollNext && \"hawa-bg-primary\",\n        )}\n      >\n        <svg\n          aria-label=\"Chevron Right Icon\"\n          stroke=\"currentColor\"\n          fill=\"currentColor\"\n          viewBox=\"0 0 16 16\"\n          className=\"hawa-h-2 hawa-w-2 hawa-shrink-0 hawa-transition-transform hawa-duration-200\"\n        >\n          <path d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"></path>\n        </svg>\n      </button>\n    </div>\n  );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":"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","names":[]}

package/dist/checkbox/index.js

@@ -89,7 +89,7 @@ var Checkbox = ({
         htmlFor: id,
         className: cn(
           "hawa-w-fit hawa-select-none hawa-pt-0.5 hawa-text-sm hawa-font-medium",
-          disabled ? "hawa-cursor-not-allowed  hawa-text-muted-foreground hawa-opacity-70 " : "hawa-cursor-pointer"
+          disabled ? "hawa-cursor-not-allowed hawa-text-muted-foreground hawa-opacity-70" : "hawa-cursor-pointer"
         ),
         style: {
           // lineHeight: labelLineHeightStyles[size]
@@ -147,7 +147,7 @@ var CheckboxElement = React.forwardRef(({ radius = "inherit", size = "default",
     {
       ref,
       className: cn(
-        "hawa-peer hawa-shrink-0  hawa-border hawa-border-primary hawa-ring-offset-background focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50 data-[state=checked]:hawa-bg-primary data-[state=checked]:hawa-text-primary-foreground",
+        "hawa-peer hawa-shrink-0 hawa-border hawa-border-primary hawa-ring-offset-background focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50 data-[state=checked]:hawa-bg-primary data-[state=checked]:hawa-text-primary-foreground",
         checkboxSizes[size],
         checkboxRadius[radius],
         className

package/dist/checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../elements/checkbox/index.ts","../../elements/checkbox/Checkbox.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./Checkbox\";\n","import * as React from \"react\";\n\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\n\nimport { RadiusType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\ntype CheckBoxTypes = {\n  id: string;\n  label?: React.ReactNode;\n  sublabel?: React.ReactNode;\n  helperText?: any;\n  size?: \"xs\" | \"sm\" | \"default\" | \"md\" | \"lg\" | \"xl\";\n  radius?: RadiusType;\n};\n\ntype CheckboxProps = CheckBoxTypes &\n  React.ComponentProps<typeof CheckboxElement>;\n\nexport const Checkbox: React.FC<CheckboxProps> = ({\n  id,\n  label,\n  sublabel,\n  helperText,\n  disabled,\n  size = \"default\",\n  radius = \"inherit\",\n  ...props\n}) => {\n  let labelLineHeightStyles = {\n    xs: sublabel || helperText ? 0.5 : 0.1,\n    sm: 0.6,\n    default: 1,\n    md: 0.8,\n    lg: 0.9,\n    xl: 1\n  };\n  return (\n    <div\n      className={cn(\n        \"hawa-flex hawa-gap-2\",\n        size === \"default\" ? \"hawa-items-top\" : \"hawa-items-center\"\n      )}\n    >\n      <CheckboxElement\n        {...props}\n        size={size}\n        radius={radius}\n        disabled={disabled}\n        id={id}\n      />\n      {(label || helperText) && (\n        <div className={\"hawa-grid hawa-gap-1.5\"}>\n          {label && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"hawa-w-fit hawa-select-none hawa-pt-0.5 hawa-text-sm hawa-font-medium\",\n                disabled\n                  ? \"hawa-cursor-not-allowed  hawa-text-muted-foreground hawa-opacity-70 \"\n                  : \"hawa-cursor-pointer\"\n              )}\n              style={{\n                // lineHeight: labelLineHeightStyles[size]\n\n                lineHeight: 1\n              }}\n            >\n              {label}\n            </label>\n          )}\n          {sublabel && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"hawa-w-fit hawa-select-none hawa-text-sm hawa-text-muted-foreground\",\n                disabled\n                  ? \"hawa-cursor-not-allowed hawa-text-muted-foreground hawa-opacity-70\"\n                  : \"hawa-cursor-pointer\"\n              )}\n            >\n              {sublabel}\n            </label>\n          )}\n          {helperText && !disabled && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"hawa-w-fit hawa-select-none hawa-text-xs hawa-text-helper-color\",\n                disabled && \"hawa-cursor-not-allowed hawa-opacity-70\"\n              )}\n            >\n              {helperText}\n            </label>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst CheckboxElement = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {\n    size?: \"xs\" | \"sm\" | \"default\" | \"md\" | \"lg\" | \"xl\";\n    radius?: RadiusType;\n  }\n>(({ radius = \"inherit\", size = \"default\", className, ...props }, ref) => {\n  let checkboxRadius = {\n    none: \"hawa-rounded-none\",\n    inherit: \"hawa-rounded-sm\",\n    full: \"hawa-rounded-full\"\n  };\n  let checkboxSizes = {\n    xs: \"hawa-w-3 hawa-h-3\",\n    sm: \"hawa-w-6 hawa-h-6\",\n    default: \"hawa-icon\",\n    md: \"hawa-w-8 hawa-h-8\",\n    lg: \"hawa-w-10 hawa-h-10\",\n    xl: \"hawa-w-12 hawa-h-12\"\n  };\n  let checkboxIndicatorSizes = {\n    xs: \"0.5em\",\n    default: \"0.60em\",\n    sm: \"0.75em\",\n    md: \"0.875em\",\n    lg: \"1em\",\n    xl: \"1.25em\"\n  };\n  return (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      className={cn(\n        \"hawa-peer hawa-shrink-0  hawa-border hawa-border-primary hawa-ring-offset-background focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50 data-[state=checked]:hawa-bg-primary data-[state=checked]:hawa-text-primary-foreground\",\n        checkboxSizes[size],\n        checkboxRadius[radius],\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        className={cn(\n          \"hawa-flex hawa-items-center hawa-justify-center hawa-text-current\"\n        )}\n      >\n        <svg\n          aria-label=\"Check Mark\"\n          stroke=\"currentColor\"\n          fill=\"currentColor\"\n          strokeWidth=\"0\"\n          viewBox=\"0 0 512 512\"\n          height={checkboxIndicatorSizes[size]}\n          width={checkboxIndicatorSizes[size]}\n          // height=\"0.60em\"\n          // width=\"0.60em\"\n        >\n          <path d=\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\"></path>\n        </svg>{\" \"}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n});\nCheckboxElement.displayName = CheckboxPrimitive.Root.displayName;\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AAEvB,wBAAmC;;;ACFnC,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADeO,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,GAAG;AACL,MAAM;AACJ,MAAI,wBAAwB;AAAA,IAC1B,IAAI,YAAY,aAAa,MAAM;AAAA,IACnC,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,YAAY,mBAAmB;AAAA,MAC1C;AAAA;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACE,SAAS,eACT,oCAAC,SAAI,WAAW,4BACb,SACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA,WACI,yEACA;AAAA,QACN;AAAA,QACA,OAAO;AAAA;AAAA,UAGL,YAAY;AAAA,QACd;AAAA;AAAA,MAEC;AAAA,IACH,GAED,YACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA,WACI,uEACA;AAAA,QACN;AAAA;AAAA,MAEC;AAAA,IACH,GAED,cAAc,CAAC,YACd;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA;AAAA,MAEC;AAAA,IACH,CAEJ;AAAA,EAEJ;AAEJ;AAEA,IAAM,kBAAwB,iBAM5B,CAAC,EAAE,SAAS,WAAW,OAAO,WAAW,WAAW,GAAG,MAAM,GAAG,QAAQ;AACxE,MAAI,iBAAiB;AAAA,IACnB,MAAM;AAAA,IACN,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AACA,MAAI,gBAAgB;AAAA,IAClB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AACA,MAAI,yBAAyB;AAAA,IAC3B,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AACA,SACE;AAAA,IAAmB;AAAA,IAAlB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,cAAc,IAAI;AAAA,QAClB,eAAe,MAAM;AAAA,QACrB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,IAEJ;AAAA,MAAmB;AAAA,MAAlB;AAAA,QACC,WAAW;AAAA,UACT;AAAA,QACF;AAAA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,cAAW;AAAA,UACX,QAAO;AAAA,UACP,MAAK;AAAA,UACL,aAAY;AAAA,UACZ,SAAQ;AAAA,UACR,QAAQ,uBAAuB,IAAI;AAAA,UACnC,OAAO,uBAAuB,IAAI;AAAA;AAAA,QAIlC,oCAAC,UAAK,GAAE,sRAAqR;AAAA,MAC/R;AAAA,MAAO;AAAA,IACT;AAAA,EACF;AAEJ,CAAC;AACD,gBAAgB,cAAgC,uBAAK;","names":[]}
+{"version":3,"sources":["../../elements/checkbox/index.ts","../../elements/checkbox/Checkbox.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./Checkbox\";\n","import * as React from \"react\";\n\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { cn } from \"@util/index\";\n\nimport { RadiusType } from \"@_types/commonTypes\";\n\ntype CheckBoxTypes = {\n  id: string;\n  label?: React.ReactNode;\n  sublabel?: React.ReactNode;\n  helperText?: any;\n  size?: \"xs\" | \"sm\" | \"default\" | \"md\" | \"lg\" | \"xl\";\n  radius?: RadiusType;\n};\n\ntype CheckboxProps = CheckBoxTypes &\n  React.ComponentProps<typeof CheckboxElement>;\n\nexport const Checkbox: React.FC<CheckboxProps> = ({\n  id,\n  label,\n  sublabel,\n  helperText,\n  disabled,\n  size = \"default\",\n  radius = \"inherit\",\n  ...props\n}) => {\n  let labelLineHeightStyles = {\n    xs: sublabel || helperText ? 0.5 : 0.1,\n    sm: 0.6,\n    default: 1,\n    md: 0.8,\n    lg: 0.9,\n    xl: 1,\n  };\n  return (\n    <div\n      className={cn(\n        \"hawa-flex hawa-gap-2\",\n        size === \"default\" ? \"hawa-items-top\" : \"hawa-items-center\",\n      )}\n    >\n      <CheckboxElement\n        {...props}\n        size={size}\n        radius={radius}\n        disabled={disabled}\n        id={id}\n      />\n      {(label || helperText) && (\n        <div className={\"hawa-grid hawa-gap-1.5\"}>\n          {label && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"hawa-w-fit hawa-select-none hawa-pt-0.5 hawa-text-sm hawa-font-medium\",\n                disabled\n                  ? \"hawa-cursor-not-allowed hawa-text-muted-foreground hawa-opacity-70\"\n                  : \"hawa-cursor-pointer\",\n              )}\n              style={{\n                // lineHeight: labelLineHeightStyles[size]\n\n                lineHeight: 1,\n              }}\n            >\n              {label}\n            </label>\n          )}\n          {sublabel && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"hawa-w-fit hawa-select-none hawa-text-sm hawa-text-muted-foreground\",\n                disabled\n                  ? \"hawa-cursor-not-allowed hawa-text-muted-foreground hawa-opacity-70\"\n                  : \"hawa-cursor-pointer\",\n              )}\n            >\n              {sublabel}\n            </label>\n          )}\n          {helperText && !disabled && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"hawa-w-fit hawa-select-none hawa-text-xs hawa-text-helper-color\",\n                disabled && \"hawa-cursor-not-allowed hawa-opacity-70\",\n              )}\n            >\n              {helperText}\n            </label>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst CheckboxElement = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {\n    size?: \"xs\" | \"sm\" | \"default\" | \"md\" | \"lg\" | \"xl\";\n    radius?: RadiusType;\n  }\n>(({ radius = \"inherit\", size = \"default\", className, ...props }, ref) => {\n  let checkboxRadius = {\n    none: \"hawa-rounded-none\",\n    inherit: \"hawa-rounded-sm\",\n    full: \"hawa-rounded-full\",\n  };\n  let checkboxSizes = {\n    xs: \"hawa-w-3 hawa-h-3\",\n    sm: \"hawa-w-6 hawa-h-6\",\n    default: \"hawa-icon\",\n    md: \"hawa-w-8 hawa-h-8\",\n    lg: \"hawa-w-10 hawa-h-10\",\n    xl: \"hawa-w-12 hawa-h-12\",\n  };\n  let checkboxIndicatorSizes = {\n    xs: \"0.5em\",\n    default: \"0.60em\",\n    sm: \"0.75em\",\n    md: \"0.875em\",\n    lg: \"1em\",\n    xl: \"1.25em\",\n  };\n  return (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      className={cn(\n        \"hawa-peer hawa-shrink-0 hawa-border hawa-border-primary hawa-ring-offset-background focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50 data-[state=checked]:hawa-bg-primary data-[state=checked]:hawa-text-primary-foreground\",\n        checkboxSizes[size],\n        checkboxRadius[radius],\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        className={cn(\n          \"hawa-flex hawa-items-center hawa-justify-center hawa-text-current\",\n        )}\n      >\n        <svg\n          aria-label=\"Check Mark\"\n          stroke=\"currentColor\"\n          fill=\"currentColor\"\n          strokeWidth=\"0\"\n          viewBox=\"0 0 512 512\"\n          height={checkboxIndicatorSizes[size]}\n          width={checkboxIndicatorSizes[size]}\n          // height=\"0.60em\"\n          // width=\"0.60em\"\n        >\n          <path d=\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\"></path>\n        </svg>{\" \"}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n});\nCheckboxElement.displayName = CheckboxPrimitive.Root.displayName;\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AAEvB,wBAAmC;;;ACFnC,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADcO,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,GAAG;AACL,MAAM;AACJ,MAAI,wBAAwB;AAAA,IAC1B,IAAI,YAAY,aAAa,MAAM;AAAA,IACnC,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,YAAY,mBAAmB;AAAA,MAC1C;AAAA;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACE,SAAS,eACT,oCAAC,SAAI,WAAW,4BACb,SACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA,WACI,uEACA;AAAA,QACN;AAAA,QACA,OAAO;AAAA;AAAA,UAGL,YAAY;AAAA,QACd;AAAA;AAAA,MAEC;AAAA,IACH,GAED,YACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA,WACI,uEACA;AAAA,QACN;AAAA;AAAA,MAEC;AAAA,IACH,GAED,cAAc,CAAC,YACd;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA;AAAA,MAEC;AAAA,IACH,CAEJ;AAAA,EAEJ;AAEJ;AAEA,IAAM,kBAAwB,iBAM5B,CAAC,EAAE,SAAS,WAAW,OAAO,WAAW,WAAW,GAAG,MAAM,GAAG,QAAQ;AACxE,MAAI,iBAAiB;AAAA,IACnB,MAAM;AAAA,IACN,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AACA,MAAI,gBAAgB;AAAA,IAClB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AACA,MAAI,yBAAyB;AAAA,IAC3B,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AACA,SACE;AAAA,IAAmB;AAAA,IAAlB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,cAAc,IAAI;AAAA,QAClB,eAAe,MAAM;AAAA,QACrB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,IAEJ;AAAA,MAAmB;AAAA,MAAlB;AAAA,QACC,WAAW;AAAA,UACT;AAAA,QACF;AAAA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,cAAW;AAAA,UACX,QAAO;AAAA,UACP,MAAK;AAAA,UACL,aAAY;AAAA,UACZ,SAAQ;AAAA,UACR,QAAQ,uBAAuB,IAAI;AAAA,UACnC,OAAO,uBAAuB,IAAI;AAAA;AAAA,QAIlC,oCAAC,UAAK,GAAE,sRAAqR;AAAA,MAC/R;AAAA,MAAO;AAAA,IACT;AAAA,EACF;AAEJ,CAAC;AACD,gBAAgB,cAAgC,uBAAK;","names":[]}

package/dist/checkbox/index.mjs

@@ -54,7 +54,7 @@ var Checkbox = ({
         htmlFor: id,
         className: cn(
           "hawa-w-fit hawa-select-none hawa-pt-0.5 hawa-text-sm hawa-font-medium",
-          disabled ? "hawa-cursor-not-allowed  hawa-text-muted-foreground hawa-opacity-70 " : "hawa-cursor-pointer"
+          disabled ? "hawa-cursor-not-allowed hawa-text-muted-foreground hawa-opacity-70" : "hawa-cursor-pointer"
         ),
         style: {
           // lineHeight: labelLineHeightStyles[size]
@@ -112,7 +112,7 @@ var CheckboxElement = React.forwardRef(({ radius = "inherit", size = "default",
     {
       ref,
       className: cn(
-        "hawa-peer hawa-shrink-0  hawa-border hawa-border-primary hawa-ring-offset-background focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50 data-[state=checked]:hawa-bg-primary data-[state=checked]:hawa-text-primary-foreground",
+        "hawa-peer hawa-shrink-0 hawa-border hawa-border-primary hawa-ring-offset-background focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50 data-[state=checked]:hawa-bg-primary data-[state=checked]:hawa-text-primary-foreground",
         checkboxSizes[size],
         checkboxRadius[radius],
         className

package/dist/checkbox/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../elements/checkbox/Checkbox.tsx","../../util/index.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\n\nimport { RadiusType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\ntype CheckBoxTypes = {\n  id: string;\n  label?: React.ReactNode;\n  sublabel?: React.ReactNode;\n  helperText?: any;\n  size?: \"xs\" | \"sm\" | \"default\" | \"md\" | \"lg\" | \"xl\";\n  radius?: RadiusType;\n};\n\ntype CheckboxProps = CheckBoxTypes &\n  React.ComponentProps<typeof CheckboxElement>;\n\nexport const Checkbox: React.FC<CheckboxProps> = ({\n  id,\n  label,\n  sublabel,\n  helperText,\n  disabled,\n  size = \"default\",\n  radius = \"inherit\",\n  ...props\n}) => {\n  let labelLineHeightStyles = {\n    xs: sublabel || helperText ? 0.5 : 0.1,\n    sm: 0.6,\n    default: 1,\n    md: 0.8,\n    lg: 0.9,\n    xl: 1\n  };\n  return (\n    <div\n      className={cn(\n        \"hawa-flex hawa-gap-2\",\n        size === \"default\" ? \"hawa-items-top\" : \"hawa-items-center\"\n      )}\n    >\n      <CheckboxElement\n        {...props}\n        size={size}\n        radius={radius}\n        disabled={disabled}\n        id={id}\n      />\n      {(label || helperText) && (\n        <div className={\"hawa-grid hawa-gap-1.5\"}>\n          {label && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"hawa-w-fit hawa-select-none hawa-pt-0.5 hawa-text-sm hawa-font-medium\",\n                disabled\n                  ? \"hawa-cursor-not-allowed  hawa-text-muted-foreground hawa-opacity-70 \"\n                  : \"hawa-cursor-pointer\"\n              )}\n              style={{\n                // lineHeight: labelLineHeightStyles[size]\n\n                lineHeight: 1\n              }}\n            >\n              {label}\n            </label>\n          )}\n          {sublabel && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"hawa-w-fit hawa-select-none hawa-text-sm hawa-text-muted-foreground\",\n                disabled\n                  ? \"hawa-cursor-not-allowed hawa-text-muted-foreground hawa-opacity-70\"\n                  : \"hawa-cursor-pointer\"\n              )}\n            >\n              {sublabel}\n            </label>\n          )}\n          {helperText && !disabled && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"hawa-w-fit hawa-select-none hawa-text-xs hawa-text-helper-color\",\n                disabled && \"hawa-cursor-not-allowed hawa-opacity-70\"\n              )}\n            >\n              {helperText}\n            </label>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst CheckboxElement = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {\n    size?: \"xs\" | \"sm\" | \"default\" | \"md\" | \"lg\" | \"xl\";\n    radius?: RadiusType;\n  }\n>(({ radius = \"inherit\", size = \"default\", className, ...props }, ref) => {\n  let checkboxRadius = {\n    none: \"hawa-rounded-none\",\n    inherit: \"hawa-rounded-sm\",\n    full: \"hawa-rounded-full\"\n  };\n  let checkboxSizes = {\n    xs: \"hawa-w-3 hawa-h-3\",\n    sm: \"hawa-w-6 hawa-h-6\",\n    default: \"hawa-icon\",\n    md: \"hawa-w-8 hawa-h-8\",\n    lg: \"hawa-w-10 hawa-h-10\",\n    xl: \"hawa-w-12 hawa-h-12\"\n  };\n  let checkboxIndicatorSizes = {\n    xs: \"0.5em\",\n    default: \"0.60em\",\n    sm: \"0.75em\",\n    md: \"0.875em\",\n    lg: \"1em\",\n    xl: \"1.25em\"\n  };\n  return (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      className={cn(\n        \"hawa-peer hawa-shrink-0  hawa-border hawa-border-primary hawa-ring-offset-background focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50 data-[state=checked]:hawa-bg-primary data-[state=checked]:hawa-text-primary-foreground\",\n        checkboxSizes[size],\n        checkboxRadius[radius],\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        className={cn(\n          \"hawa-flex hawa-items-center hawa-justify-center hawa-text-current\"\n        )}\n      >\n        <svg\n          aria-label=\"Check Mark\"\n          stroke=\"currentColor\"\n          fill=\"currentColor\"\n          strokeWidth=\"0\"\n          viewBox=\"0 0 512 512\"\n          height={checkboxIndicatorSizes[size]}\n          width={checkboxIndicatorSizes[size]}\n          // height=\"0.60em\"\n          // width=\"0.60em\"\n        >\n          <path d=\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\"></path>\n        </svg>{\" \"}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n});\nCheckboxElement.displayName = CheckboxPrimitive.Root.displayName;\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":";;;AAAA,YAAY,WAAW;AAEvB,YAAY,uBAAuB;;;ACFnC,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADeO,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,GAAG;AACL,MAAM;AACJ,MAAI,wBAAwB;AAAA,IAC1B,IAAI,YAAY,aAAa,MAAM;AAAA,IACnC,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,YAAY,mBAAmB;AAAA,MAC1C;AAAA;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACE,SAAS,eACT,oCAAC,SAAI,WAAW,4BACb,SACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA,WACI,yEACA;AAAA,QACN;AAAA,QACA,OAAO;AAAA;AAAA,UAGL,YAAY;AAAA,QACd;AAAA;AAAA,MAEC;AAAA,IACH,GAED,YACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA,WACI,uEACA;AAAA,QACN;AAAA;AAAA,MAEC;AAAA,IACH,GAED,cAAc,CAAC,YACd;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA;AAAA,MAEC;AAAA,IACH,CAEJ;AAAA,EAEJ;AAEJ;AAEA,IAAM,kBAAwB,iBAM5B,CAAC,EAAE,SAAS,WAAW,OAAO,WAAW,WAAW,GAAG,MAAM,GAAG,QAAQ;AACxE,MAAI,iBAAiB;AAAA,IACnB,MAAM;AAAA,IACN,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AACA,MAAI,gBAAgB;AAAA,IAClB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AACA,MAAI,yBAAyB;AAAA,IAC3B,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AACA,SACE;AAAA,IAAmB;AAAA,IAAlB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,cAAc,IAAI;AAAA,QAClB,eAAe,MAAM;AAAA,QACrB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,IAEJ;AAAA,MAAmB;AAAA,MAAlB;AAAA,QACC,WAAW;AAAA,UACT;AAAA,QACF;AAAA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,cAAW;AAAA,UACX,QAAO;AAAA,UACP,MAAK;AAAA,UACL,aAAY;AAAA,UACZ,SAAQ;AAAA,UACR,QAAQ,uBAAuB,IAAI;AAAA,UACnC,OAAO,uBAAuB,IAAI;AAAA;AAAA,QAIlC,oCAAC,UAAK,GAAE,sRAAqR;AAAA,MAC/R;AAAA,MAAO;AAAA,IACT;AAAA,EACF;AAEJ,CAAC;AACD,gBAAgB,cAAgC,uBAAK;","names":[]}
+{"version":3,"sources":["../../elements/checkbox/Checkbox.tsx","../../util/index.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { cn } from \"@util/index\";\n\nimport { RadiusType } from \"@_types/commonTypes\";\n\ntype CheckBoxTypes = {\n  id: string;\n  label?: React.ReactNode;\n  sublabel?: React.ReactNode;\n  helperText?: any;\n  size?: \"xs\" | \"sm\" | \"default\" | \"md\" | \"lg\" | \"xl\";\n  radius?: RadiusType;\n};\n\ntype CheckboxProps = CheckBoxTypes &\n  React.ComponentProps<typeof CheckboxElement>;\n\nexport const Checkbox: React.FC<CheckboxProps> = ({\n  id,\n  label,\n  sublabel,\n  helperText,\n  disabled,\n  size = \"default\",\n  radius = \"inherit\",\n  ...props\n}) => {\n  let labelLineHeightStyles = {\n    xs: sublabel || helperText ? 0.5 : 0.1,\n    sm: 0.6,\n    default: 1,\n    md: 0.8,\n    lg: 0.9,\n    xl: 1,\n  };\n  return (\n    <div\n      className={cn(\n        \"hawa-flex hawa-gap-2\",\n        size === \"default\" ? \"hawa-items-top\" : \"hawa-items-center\",\n      )}\n    >\n      <CheckboxElement\n        {...props}\n        size={size}\n        radius={radius}\n        disabled={disabled}\n        id={id}\n      />\n      {(label || helperText) && (\n        <div className={\"hawa-grid hawa-gap-1.5\"}>\n          {label && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"hawa-w-fit hawa-select-none hawa-pt-0.5 hawa-text-sm hawa-font-medium\",\n                disabled\n                  ? \"hawa-cursor-not-allowed hawa-text-muted-foreground hawa-opacity-70\"\n                  : \"hawa-cursor-pointer\",\n              )}\n              style={{\n                // lineHeight: labelLineHeightStyles[size]\n\n                lineHeight: 1,\n              }}\n            >\n              {label}\n            </label>\n          )}\n          {sublabel && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"hawa-w-fit hawa-select-none hawa-text-sm hawa-text-muted-foreground\",\n                disabled\n                  ? \"hawa-cursor-not-allowed hawa-text-muted-foreground hawa-opacity-70\"\n                  : \"hawa-cursor-pointer\",\n              )}\n            >\n              {sublabel}\n            </label>\n          )}\n          {helperText && !disabled && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"hawa-w-fit hawa-select-none hawa-text-xs hawa-text-helper-color\",\n                disabled && \"hawa-cursor-not-allowed hawa-opacity-70\",\n              )}\n            >\n              {helperText}\n            </label>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst CheckboxElement = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {\n    size?: \"xs\" | \"sm\" | \"default\" | \"md\" | \"lg\" | \"xl\";\n    radius?: RadiusType;\n  }\n>(({ radius = \"inherit\", size = \"default\", className, ...props }, ref) => {\n  let checkboxRadius = {\n    none: \"hawa-rounded-none\",\n    inherit: \"hawa-rounded-sm\",\n    full: \"hawa-rounded-full\",\n  };\n  let checkboxSizes = {\n    xs: \"hawa-w-3 hawa-h-3\",\n    sm: \"hawa-w-6 hawa-h-6\",\n    default: \"hawa-icon\",\n    md: \"hawa-w-8 hawa-h-8\",\n    lg: \"hawa-w-10 hawa-h-10\",\n    xl: \"hawa-w-12 hawa-h-12\",\n  };\n  let checkboxIndicatorSizes = {\n    xs: \"0.5em\",\n    default: \"0.60em\",\n    sm: \"0.75em\",\n    md: \"0.875em\",\n    lg: \"1em\",\n    xl: \"1.25em\",\n  };\n  return (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      className={cn(\n        \"hawa-peer hawa-shrink-0 hawa-border hawa-border-primary hawa-ring-offset-background focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50 data-[state=checked]:hawa-bg-primary data-[state=checked]:hawa-text-primary-foreground\",\n        checkboxSizes[size],\n        checkboxRadius[radius],\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        className={cn(\n          \"hawa-flex hawa-items-center hawa-justify-center hawa-text-current\",\n        )}\n      >\n        <svg\n          aria-label=\"Check Mark\"\n          stroke=\"currentColor\"\n          fill=\"currentColor\"\n          strokeWidth=\"0\"\n          viewBox=\"0 0 512 512\"\n          height={checkboxIndicatorSizes[size]}\n          width={checkboxIndicatorSizes[size]}\n          // height=\"0.60em\"\n          // width=\"0.60em\"\n        >\n          <path d=\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\"></path>\n        </svg>{\" \"}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n});\nCheckboxElement.displayName = CheckboxPrimitive.Root.displayName;\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":";;;AAAA,YAAY,WAAW;AAEvB,YAAY,uBAAuB;;;ACFnC,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADcO,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,GAAG;AACL,MAAM;AACJ,MAAI,wBAAwB;AAAA,IAC1B,IAAI,YAAY,aAAa,MAAM;AAAA,IACnC,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,YAAY,mBAAmB;AAAA,MAC1C;AAAA;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACE,SAAS,eACT,oCAAC,SAAI,WAAW,4BACb,SACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA,WACI,uEACA;AAAA,QACN;AAAA,QACA,OAAO;AAAA;AAAA,UAGL,YAAY;AAAA,QACd;AAAA;AAAA,MAEC;AAAA,IACH,GAED,YACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA,WACI,uEACA;AAAA,QACN;AAAA;AAAA,MAEC;AAAA,IACH,GAED,cAAc,CAAC,YACd;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA;AAAA,MAEC;AAAA,IACH,CAEJ;AAAA,EAEJ;AAEJ;AAEA,IAAM,kBAAwB,iBAM5B,CAAC,EAAE,SAAS,WAAW,OAAO,WAAW,WAAW,GAAG,MAAM,GAAG,QAAQ;AACxE,MAAI,iBAAiB;AAAA,IACnB,MAAM;AAAA,IACN,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AACA,MAAI,gBAAgB;AAAA,IAClB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AACA,MAAI,yBAAyB;AAAA,IAC3B,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AACA,SACE;AAAA,IAAmB;AAAA,IAAlB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,cAAc,IAAI;AAAA,QAClB,eAAe,MAAM;AAAA,QACrB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,IAEJ;AAAA,MAAmB;AAAA,MAAlB;AAAA,QACC,WAAW;AAAA,UACT;AAAA,QACF;AAAA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,cAAW;AAAA,UACX,QAAO;AAAA,UACP,MAAK;AAAA,UACL,aAAY;AAAA,UACZ,SAAQ;AAAA,UACR,QAAQ,uBAAuB,IAAI;AAAA,UACnC,OAAO,uBAAuB,IAAI;AAAA;AAAA,QAIlC,oCAAC,UAAK,GAAE,sRAAqR;AAAA,MAC/R;AAAA,MAAO;AAAA,IACT;AAAA,EACF;AAEJ,CAAC;AACD,gBAAgB,cAAgC,uBAAK;","names":[]}

package/dist/{chunk-27G5FKOP.mjs → chunk-2GEXJLRC.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   cn
-} from "./chunk-GU2DOJ7Q.mjs";
+} from "./chunk-FP6763YO.mjs";
 
 // elements/sheet/Sheet.tsx
 import * as React from "react";