@sikka/hawa 0.30.23-next → 0.30.25-next

package/dist/breadcrumb/index.d.ts

@@ -1,14 +1,16 @@
 import { FC, ReactNode } from 'react';
 
+type BreadcrumbItemProps = {
+    label: string;
+    href: string;
+};
 interface BCTypes {
     /** The array of crumbs, each one with a label and a href link */
-    breadcrumbLinks: {
-        label: string;
-        href: string;
-    }[];
+    breadcrumbLinks: BreadcrumbItemProps[];
     /** The separator between each crumb, can be character or React Node. The default is ">" */
     separator?: string | ReactNode;
+    size?: "normal" | "small" | "xs";
 }
 declare const Breadcrumb: FC<BCTypes>;
 
-export { Breadcrumb };
+export { Breadcrumb, type BreadcrumbItemProps };

package/dist/breadcrumb/index.js

@@ -37,26 +37,50 @@ module.exports = __toCommonJS(breadcrumb_exports);
 
 // elements/breadcrumb/Breadcrumb.tsx
 var import_react = __toESM(require("react"));
+
+// util/index.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// elements/breadcrumb/Breadcrumb.tsx
 var Breadcrumb = ({
   breadcrumbLinks,
-  separator = ">"
+  separator = ">",
+  size = "normal"
 }) => {
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm" }, breadcrumbLinks.map((singleBreadcrumbLink, index) => /* @__PURE__ */ import_react.default.createElement(
+  const textStyles = {
+    normal: "",
+    small: "hawa-text-sm",
+    xs: "hawa-text-xs"
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
-      key: index,
-      className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2"
+      className: cn(
+        "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm",
+        textStyles[size]
+      )
     },
-    /* @__PURE__ */ import_react.default.createElement(
-      "a",
+    breadcrumbLinks.map((singleBreadcrumbLink, index) => /* @__PURE__ */ import_react.default.createElement(
+      "div",
       {
-        href: singleBreadcrumbLink.href,
-        className: index + 1 === breadcrumbLinks.length ? "hawa-pointer-events-none" : "hawa-underline-offset-4 hawa-transition-all hover:hawa-text-primary hover:hawa-underline hover:hawa-decoration-2"
+        key: index,
+        className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2"
       },
-      singleBreadcrumbLink.label
-    ),
-    index != breadcrumbLinks.length - 1 ? typeof separator == "string" ? /* @__PURE__ */ import_react.default.createElement("div", null, separator) : /* @__PURE__ */ import_react.default.createElement("div", null, separator) : null
-  )));
+      /* @__PURE__ */ import_react.default.createElement(
+        "a",
+        {
+          href: singleBreadcrumbLink.href,
+          className: index + 1 === breadcrumbLinks.length ? "hawa-pointer-events-none" : "hawa-underline-offset-4 hawa-transition-all hover:hawa-text-primary hover:hawa-underline hover:hawa-decoration-2"
+        },
+        singleBreadcrumbLink.label
+      ),
+      index != breadcrumbLinks.length - 1 ? typeof separator == "string" ? /* @__PURE__ */ import_react.default.createElement("div", null, separator) : /* @__PURE__ */ import_react.default.createElement("div", null, separator) : null
+    ))
+  );
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/breadcrumb/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../elements/breadcrumb/index.ts","../../elements/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["export * from \"./Breadcrumb\";\n","import React, { FC, ReactNode } from \"react\";\n\ninterface BCTypes {\n  /** The array of crumbs, each one with a label and a href link */\n  breadcrumbLinks: { label: string; href: string }[];\n  /** The separator between each crumb, can be character or React Node. The default is \">\" */\n  separator?: string | ReactNode;\n}\n\nexport const Breadcrumb: FC<BCTypes> = ({\n  breadcrumbLinks,\n  separator = \">\"\n}) => {\n  return (\n    <div className=\"hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm\">\n      {breadcrumbLinks.map((singleBreadcrumbLink, index) => (\n        <div\n          key={index}\n          className=\"hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2\"\n        >\n          <a\n            href={singleBreadcrumbLink.href}\n            className={\n              index + 1 === breadcrumbLinks.length\n                ? \"hawa-pointer-events-none\"\n                : \"hawa-underline-offset-4 hawa-transition-all hover:hawa-text-primary hover:hawa-underline hover:hawa-decoration-2\"\n            }\n          >\n            {singleBreadcrumbLink.label}\n          </a>\n          {index != breadcrumbLinks.length - 1 ? (\n            typeof separator == \"string\" ? (\n              <div>{separator}</div>\n            ) : (\n              <div>{separator}</div>\n            )\n          ) : null}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAqC;AAS9B,IAAM,aAA0B,CAAC;AAAA,EACtC;AAAA,EACA,YAAY;AACd,MAAM;AACJ,SACE,6BAAAA,QAAA,cAAC,SAAI,WAAU,uEACZ,gBAAgB,IAAI,CAAC,sBAAsB,UAC1C,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA;AAAA,IAEV,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,qBAAqB;AAAA,QAC3B,WACE,QAAQ,MAAM,gBAAgB,SAC1B,6BACA;AAAA;AAAA,MAGL,qBAAqB;AAAA,IACxB;AAAA,IACC,SAAS,gBAAgB,SAAS,IACjC,OAAO,aAAa,WAClB,6BAAAA,QAAA,cAAC,aAAK,SAAU,IAEhB,6BAAAA,QAAA,cAAC,aAAK,SAAU,IAEhB;AAAA,EACN,CACD,CACH;AAEJ;","names":["React"]}
+{"version":3,"sources":["../../elements/breadcrumb/index.ts","../../elements/breadcrumb/Breadcrumb.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./Breadcrumb\";\n","import React, { FC, ReactNode } from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport type BreadcrumbItemProps = {\n  label: string;\n  href: string;\n};\ninterface BCTypes {\n  /** The array of crumbs, each one with a label and a href link */\n  breadcrumbLinks: BreadcrumbItemProps[];\n  /** The separator between each crumb, can be character or React Node. The default is \">\" */\n  separator?: string | ReactNode;\n  size?: \"normal\" | \"small\" | \"xs\";\n}\n\nexport const Breadcrumb: FC<BCTypes> = ({\n  breadcrumbLinks,\n  separator = \">\",\n  size = \"normal\",\n}) => {\n  const textStyles = {\n    normal: \"\",\n    small: \"hawa-text-sm\",\n    xs: \"hawa-text-xs\",\n  };\n  return (\n    <div\n      className={cn(\n        \"hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm\",\n        textStyles[size],\n      )}\n    >\n      {breadcrumbLinks.map((singleBreadcrumbLink, index) => (\n        <div\n          key={index}\n          className=\"hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2\"\n        >\n          <a\n            href={singleBreadcrumbLink.href}\n            className={\n              index + 1 === breadcrumbLinks.length\n                ? \"hawa-pointer-events-none\"\n                : \"hawa-underline-offset-4 hawa-transition-all hover:hawa-text-primary hover:hawa-underline hover:hawa-decoration-2\"\n            }\n          >\n            {singleBreadcrumbLink.label}\n          </a>\n          {index != breadcrumbLinks.length - 1 ? (\n            typeof separator == \"string\" ? (\n              <div>{separator}</div>\n            ) : (\n              <div>{separator}</div>\n            )\n          ) : null}\n        </div>\n      ))}\n    </div>\n  );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAqC;;;ACArC,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADWO,IAAM,aAA0B,CAAC;AAAA,EACtC;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AACT,MAAM;AACJ,QAAM,aAAa;AAAA,IACjB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,IAAI;AAAA,EACN;AACA,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,WAAW,IAAI;AAAA,MACjB;AAAA;AAAA,IAEC,gBAAgB,IAAI,CAAC,sBAAsB,UAC1C,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAU;AAAA;AAAA,MAEV,6BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,qBAAqB;AAAA,UAC3B,WACE,QAAQ,MAAM,gBAAgB,SAC1B,6BACA;AAAA;AAAA,QAGL,qBAAqB;AAAA,MACxB;AAAA,MACC,SAAS,gBAAgB,SAAS,IACjC,OAAO,aAAa,WAClB,6BAAAA,QAAA,cAAC,aAAK,SAAU,IAEhB,6BAAAA,QAAA,cAAC,aAAK,SAAU,IAEhB;AAAA,IACN,CACD;AAAA,EACH;AAEJ;","names":["React"]}

package/dist/breadcrumb/index.mjs

@@ -2,26 +2,50 @@
 
 // elements/breadcrumb/Breadcrumb.tsx
 import React from "react";
+
+// util/index.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// elements/breadcrumb/Breadcrumb.tsx
 var Breadcrumb = ({
   breadcrumbLinks,
-  separator = ">"
+  separator = ">",
+  size = "normal"
 }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm" }, breadcrumbLinks.map((singleBreadcrumbLink, index) => /* @__PURE__ */ React.createElement(
+  const textStyles = {
+    normal: "",
+    small: "hawa-text-sm",
+    xs: "hawa-text-xs"
+  };
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
-      key: index,
-      className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2"
+      className: cn(
+        "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm",
+        textStyles[size]
+      )
     },
-    /* @__PURE__ */ React.createElement(
-      "a",
+    breadcrumbLinks.map((singleBreadcrumbLink, index) => /* @__PURE__ */ React.createElement(
+      "div",
       {
-        href: singleBreadcrumbLink.href,
-        className: index + 1 === breadcrumbLinks.length ? "hawa-pointer-events-none" : "hawa-underline-offset-4 hawa-transition-all hover:hawa-text-primary hover:hawa-underline hover:hawa-decoration-2"
+        key: index,
+        className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2"
       },
-      singleBreadcrumbLink.label
-    ),
-    index != breadcrumbLinks.length - 1 ? typeof separator == "string" ? /* @__PURE__ */ React.createElement("div", null, separator) : /* @__PURE__ */ React.createElement("div", null, separator) : null
-  )));
+      /* @__PURE__ */ React.createElement(
+        "a",
+        {
+          href: singleBreadcrumbLink.href,
+          className: index + 1 === breadcrumbLinks.length ? "hawa-pointer-events-none" : "hawa-underline-offset-4 hawa-transition-all hover:hawa-text-primary hover:hawa-underline hover:hawa-decoration-2"
+        },
+        singleBreadcrumbLink.label
+      ),
+      index != breadcrumbLinks.length - 1 ? typeof separator == "string" ? /* @__PURE__ */ React.createElement("div", null, separator) : /* @__PURE__ */ React.createElement("div", null, separator) : null
+    ))
+  );
 };
 export {
   Breadcrumb

package/dist/breadcrumb/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../elements/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React, { FC, ReactNode } from \"react\";\n\ninterface BCTypes {\n  /** The array of crumbs, each one with a label and a href link */\n  breadcrumbLinks: { label: string; href: string }[];\n  /** The separator between each crumb, can be character or React Node. The default is \">\" */\n  separator?: string | ReactNode;\n}\n\nexport const Breadcrumb: FC<BCTypes> = ({\n  breadcrumbLinks,\n  separator = \">\"\n}) => {\n  return (\n    <div className=\"hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm\">\n      {breadcrumbLinks.map((singleBreadcrumbLink, index) => (\n        <div\n          key={index}\n          className=\"hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2\"\n        >\n          <a\n            href={singleBreadcrumbLink.href}\n            className={\n              index + 1 === breadcrumbLinks.length\n                ? \"hawa-pointer-events-none\"\n                : \"hawa-underline-offset-4 hawa-transition-all hover:hawa-text-primary hover:hawa-underline hover:hawa-decoration-2\"\n            }\n          >\n            {singleBreadcrumbLink.label}\n          </a>\n          {index != breadcrumbLinks.length - 1 ? (\n            typeof separator == \"string\" ? (\n              <div>{separator}</div>\n            ) : (\n              <div>{separator}</div>\n            )\n          ) : null}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,WAA8B;AAS9B,IAAM,aAA0B,CAAC;AAAA,EACtC;AAAA,EACA,YAAY;AACd,MAAM;AACJ,SACE,oCAAC,SAAI,WAAU,uEACZ,gBAAgB,IAAI,CAAC,sBAAsB,UAC1C;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA;AAAA,IAEV;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,qBAAqB;AAAA,QAC3B,WACE,QAAQ,MAAM,gBAAgB,SAC1B,6BACA;AAAA;AAAA,MAGL,qBAAqB;AAAA,IACxB;AAAA,IACC,SAAS,gBAAgB,SAAS,IACjC,OAAO,aAAa,WAClB,oCAAC,aAAK,SAAU,IAEhB,oCAAC,aAAK,SAAU,IAEhB;AAAA,EACN,CACD,CACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../elements/breadcrumb/Breadcrumb.tsx","../../util/index.ts"],"sourcesContent":["import React, { FC, ReactNode } from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport type BreadcrumbItemProps = {\n  label: string;\n  href: string;\n};\ninterface BCTypes {\n  /** The array of crumbs, each one with a label and a href link */\n  breadcrumbLinks: BreadcrumbItemProps[];\n  /** The separator between each crumb, can be character or React Node. The default is \">\" */\n  separator?: string | ReactNode;\n  size?: \"normal\" | \"small\" | \"xs\";\n}\n\nexport const Breadcrumb: FC<BCTypes> = ({\n  breadcrumbLinks,\n  separator = \">\",\n  size = \"normal\",\n}) => {\n  const textStyles = {\n    normal: \"\",\n    small: \"hawa-text-sm\",\n    xs: \"hawa-text-xs\",\n  };\n  return (\n    <div\n      className={cn(\n        \"hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm\",\n        textStyles[size],\n      )}\n    >\n      {breadcrumbLinks.map((singleBreadcrumbLink, index) => (\n        <div\n          key={index}\n          className=\"hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2\"\n        >\n          <a\n            href={singleBreadcrumbLink.href}\n            className={\n              index + 1 === breadcrumbLinks.length\n                ? \"hawa-pointer-events-none\"\n                : \"hawa-underline-offset-4 hawa-transition-all hover:hawa-text-primary hover:hawa-underline hover:hawa-decoration-2\"\n            }\n          >\n            {singleBreadcrumbLink.label}\n          </a>\n          {index != breadcrumbLinks.length - 1 ? (\n            typeof separator == \"string\" ? (\n              <div>{separator}</div>\n            ) : (\n              <div>{separator}</div>\n            )\n          ) : null}\n        </div>\n      ))}\n    </div>\n  );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":";;;AAAA,OAAO,WAA8B;;;ACArC,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADWO,IAAM,aAA0B,CAAC;AAAA,EACtC;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AACT,MAAM;AACJ,QAAM,aAAa;AAAA,IACjB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,IAAI;AAAA,EACN;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,WAAW,IAAI;AAAA,MACjB;AAAA;AAAA,IAEC,gBAAgB,IAAI,CAAC,sBAAsB,UAC1C;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAU;AAAA;AAAA,MAEV;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,qBAAqB;AAAA,UAC3B,WACE,QAAQ,MAAM,gBAAgB,SAC1B,6BACA;AAAA;AAAA,QAGL,qBAAqB;AAAA,MACxB;AAAA,MACC,SAAS,gBAAgB,SAAS,IACjC,OAAO,aAAa,WAClB,oCAAC,aAAK,SAAU,IAEhB,oCAAC,aAAK,SAAU,IAEhB;AAAA,IACN,CACD;AAAA,EACH;AAEJ;","names":[]}

package/dist/{chunk-CXBN42TF.mjs → chunk-7LAUVLVZ.mjs}

@@ -5,7 +5,7 @@ import {
   Skeleton,
   Tooltip,
   cn
-} from "./chunk-HOE4FCIF.mjs";
+} from "./chunk-DGOT2FVH.mjs";
 
 // elements/alert/Alert.tsx
 import React, { useRef, useState, useEffect } from "react";

package/dist/{chunk-HOE4FCIF.mjs → chunk-DGOT2FVH.mjs}

@@ -1158,6 +1158,9 @@ var DropdownMenu = ({
     default: "hawa-px-2 hawa-py-3 ",
     sm: "hawa-text-xs hawa-px-1.5 hawa-py-1.5 "
   };
+  let [values, setValues] = React8.useState(
+    items.map((item) => item.currentOption)
+  );
   return /* @__PURE__ */ React8.createElement(
     DropdownMenuRoot,
     {
@@ -1185,11 +1188,38 @@ var DropdownMenu = ({
       },
       header && header,
       items && items.map((item, index) => {
+        var _a;
         const ItemLinkComponent = item.slug ? LinkComponent : "a";
         if (item.itemType === "separator") {
           return /* @__PURE__ */ React8.createElement(DropdownMenuSeparator, { key: index });
         } else if (item.itemType === "label") {
           return /* @__PURE__ */ React8.createElement(DropdownMenuLabel, { key: index }, item.label);
+        } else if (item.itemType === "radio") {
+          let dd = item.currentOption;
+          return /* @__PURE__ */ React8.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React8.createElement(
+            DropdownMenuSubTrigger,
+            {
+              dir: direction,
+              className: cn(sizeStyles[size])
+            },
+            item.icon && item.icon,
+            item.label && item.label
+          ), /* @__PURE__ */ React8.createElement(DropdownMenuSubContent, null, /* @__PURE__ */ React8.createElement(
+            DropdownMenuRadioGroup,
+            {
+              value: values[index],
+              onValueChange: (e) => {
+                let newValues = [...values];
+                newValues[index] = e;
+                setValues(newValues);
+                console.log("changing to ", e);
+                if (item.onOptionChange) {
+                  item.onOptionChange(e);
+                }
+              }
+            },
+            (_a = item.options) == null ? void 0 : _a.map((opt, i) => /* @__PURE__ */ React8.createElement(DropdownMenuRadioItem, { key: i, value: opt.value }, opt.label))
+          )));
         } else if (item.itemType === "custom") {
           return /* @__PURE__ */ React8.createElement("div", { key: index }, item.content);
         } else {

package/dist/{chunk-MH5K6NEO.mjs → chunk-TKSAYWDH.mjs}

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

package/dist/combobox/index.js

@@ -749,46 +749,55 @@ var Combobox = React7.forwardRef(
             }
           ),
           /* @__PURE__ */ React7.createElement(CommandEmpty, null, ((_c = props.texts) == null ? void 0 : _c.noItems) || "No items found."),
-          /* @__PURE__ */ React7.createElement(CommandList, null, /* @__PURE__ */ React7.createElement(CommandGroup, { className: "hawa-max-h-[200px] hawa-overflow-y-scroll" }, data.map((item, i) => /* @__PURE__ */ React7.createElement(
-            CommandItem,
+          /* @__PURE__ */ React7.createElement(CommandList, null, /* @__PURE__ */ React7.createElement(
+            CommandGroup,
             {
-              key: i,
-              onSelect: () => {
-                const newValue = getProperty(item, valueKey);
-                setValue(
-                  newValue === value ? "" : newValue
-                );
-                if (props.onChange) {
-                  props.onChange(
+              className: cn(
+                "hawa-max-h-[200px]",
+                data.length > 0 && "hawa-overflow-y-scroll"
+              )
+            },
+            data.map((item, i) => /* @__PURE__ */ React7.createElement(
+              CommandItem,
+              {
+                key: i,
+                onSelect: () => {
+                  const newValue = getProperty(item, valueKey);
+                  setValue(
                     newValue === value ? "" : newValue
                   );
+                  if (props.onChange) {
+                    props.onChange(
+                      newValue === value ? "" : newValue
+                    );
+                  }
+                  setOpen(false);
                 }
-                setOpen(false);
-              }
-            },
-            /* @__PURE__ */ React7.createElement(
-              "svg",
-              {
-                "aria-label": "Check Icon",
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "24",
-                height: "24",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                className: cn(
-                  "hawa-icon",
-                  value === getProperty(item, valueKey) ? "hawa-opacity-100" : "hawa-opacity-0"
-                ),
-                style: { marginInlineEnd: "0.5rem" }
               },
-              /* @__PURE__ */ React7.createElement("polyline", { points: "20 6 9 17 4 12" })
-            ),
-            renderOption ? renderOption(item) : getProperty(item, labelKey)
-          ))))
+              /* @__PURE__ */ React7.createElement(
+                "svg",
+                {
+                  "aria-label": "Check Icon",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "24",
+                  height: "24",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: cn(
+                    "hawa-icon",
+                    value === getProperty(item, valueKey) ? "hawa-opacity-100" : "hawa-opacity-0"
+                  ),
+                  style: { marginInlineEnd: "0.5rem" }
+                },
+                /* @__PURE__ */ React7.createElement("polyline", { points: "20 6 9 17 4 12" })
+              ),
+              renderOption ? renderOption(item) : getProperty(item, labelKey)
+            ))
+          ))
         )
       ))
     );