@sikka/hawa 0.26.29 → 0.26.31

package/dist/carousel/index.js

@@ -0,0 +1,194 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// elements/carousel/index.ts
+var carousel_exports = {};
+__export(carousel_exports, {
+  Carousel: () => Carousel
+});
+module.exports = __toCommonJS(carousel_exports);
+
+// elements/carousel/Carousel.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/carousel/Carousel.tsx
+var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
+var Carousel = ({
+  items,
+  showArrows,
+  options,
+  autoplay,
+  direction = "ltr",
+  autoplayInterval = 3e3,
+  ...props
+}) => {
+  const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)({
+    ...options,
+    direction,
+    loop: autoplay ? true : options?.loop || false
+  });
+  const [selectedIndex, setSelectedIndex] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    function selectHandler() {
+      const index = emblaApi?.selectedScrollSnap();
+      setSelectedIndex(index || 0);
+    }
+    emblaApi?.on("select", selectHandler);
+    return () => {
+      emblaApi?.off("select", selectHandler);
+    };
+  }, [emblaApi]);
+  (0, import_react.useEffect)(() => {
+    let autoplayTimer;
+    if (autoplay && emblaApi) {
+      autoplayTimer = setInterval(() => {
+        emblaApi.scrollNext();
+      }, autoplayInterval);
+    }
+    return () => {
+      if (autoplayTimer)
+        clearInterval(autoplayTimer);
+    };
+  }, [emblaApi, autoplay, autoplayInterval]);
+  const length = import_react.default.Children.count(items);
+  const canScrollNext = !!emblaApi?.canScrollNext();
+  const canScrollPrev = !!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?.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"
+    },
+    item
+  ))))), /* @__PURE__ */ import_react.default.createElement(
+    Dots,
+    {
+      direction,
+      itemsLength: length,
+      selectedIndex,
+      onDotClick: (index) => emblaApi?.scrollTo(index)
+    }
+  ), showArrows && /* @__PURE__ */ import_react.default.createElement(
+    CarouselControls,
+    {
+      canScrollNext,
+      canScrollPrev,
+      onNext: () => emblaApi?.scrollNext(),
+      onPrev: () => emblaApi?.scrollPrev()
+    }
+  ));
+};
+var Dots = ({
+  onDotClick,
+  itemsLength,
+  selectedIndex,
+  direction
+}) => {
+  const arr = new Array(itemsLength).fill(0);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      dir: direction,
+      className: "hawa-z-50 hawa-my-2 hawa-flex hawa-justify-center hawa-gap-1"
+    },
+    arr.map((_, index) => {
+      const selected = index === selectedIndex;
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          key: index,
+          onClick: () => onDotClick(index),
+          className: cn(
+            "hawa-h-2 hawa-rounded-full hawa-bg-primary hawa-transition-all hawa-duration-300 hover:hawa-cursor-pointer",
+            !selected ? "hawa-w-2 hawa-opacity-50" : "hawa-w-6 hawa-opacity-100"
+          )
+        }
+      );
+    })
+  );
+};
+var CarouselControls = (props) => {
+  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 ",
+        !props.canScrollPrev && "hawa-bg-primary/50",
+        props.canScrollPrev && "hawa-bg-primary"
+      )
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "svg",
+      {
+        "aria-label": "Chevron Right Icon",
+        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 "
+      },
+      /* @__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" })
+    )
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      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 ",
+        !props.canScrollNext && "hawa-bg-primary/50",
+        props.canScrollNext && "hawa-bg-primary"
+      )
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "svg",
+      {
+        "aria-label": "Chevron Right Icon",
+        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 "
+      },
+      /* @__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" })
+    )
+  ));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Carousel
+});
+//# sourceMappingURL=index.js.map

package/dist/carousel/index.js.map

@@ -0,0 +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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA2C;;;ACA3C,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADCA,kCAA6B;AAuBtB,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,OAAO,SAAS,QAAQ;AAAA,EAC3C,CAAC;AACD,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,CAAC;AAEpD,8BAAU,MAAM;AACd,aAAS,gBAAgB;AACvB,YAAM,QAAQ,UAAU,mBAAmB;AAC3C,uBAAiB,SAAS,CAAC;AAAA,IAC7B;AAEA,cAAU,GAAG,UAAU,aAAa;AACpC,WAAO,MAAM;AACX,gBAAU,IAAI,UAAU,aAAa;AAAA,IACvC;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,CAAC,UAAU,cAAc;AAChD,QAAM,gBAAgB,CAAC,CAAC,UAAU,cAAc;AAChD,SACE,6BAAAA,QAAA,cAAC,SAAI,WAAU,gCACb,6BAAAA,QAAA,cAAC,SAAI,WAAU,sCACb,6BAAAA,QAAA,cAAC,SAAI,WAAU,eAAc,KAAK,YAChC,6BAAAA,QAAA,cAAC,SAAI,WAAU,2BACZ,OAAO,IAAI,CAAC,MAAW,MACtB,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA;AAAA,IAET;AAAA,EACH,CACD,CACH,CACF,CACF,GAEA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,YAAY,CAAC,UAAU,UAAU,SAAS,KAAK;AAAA;AAAA,EACjD,GAEC,cACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,QAAQ,MAAM,UAAU,WAAW;AAAA,MACnC,QAAQ,MAAM,UAAU,WAAW;AAAA;AAAA,EACrC,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,4CACb,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

@@ -0,0 +1,152 @@
+import {
+  cn
+} from "../chunk-CBRGWUZG.mjs";
+
+// elements/carousel/Carousel.tsx
+import React, { useEffect, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+var Carousel = ({
+  items,
+  showArrows,
+  options,
+  autoplay,
+  direction = "ltr",
+  autoplayInterval = 3e3,
+  ...props
+}) => {
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    ...options,
+    direction,
+    loop: autoplay ? true : options?.loop || false
+  });
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  useEffect(() => {
+    function selectHandler() {
+      const index = emblaApi?.selectedScrollSnap();
+      setSelectedIndex(index || 0);
+    }
+    emblaApi?.on("select", selectHandler);
+    return () => {
+      emblaApi?.off("select", selectHandler);
+    };
+  }, [emblaApi]);
+  useEffect(() => {
+    let autoplayTimer;
+    if (autoplay && emblaApi) {
+      autoplayTimer = setInterval(() => {
+        emblaApi.scrollNext();
+      }, autoplayInterval);
+    }
+    return () => {
+      if (autoplayTimer)
+        clearInterval(autoplayTimer);
+    };
+  }, [emblaApi, autoplay, autoplayInterval]);
+  const length = React.Children.count(items);
+  const canScrollNext = !!emblaApi?.canScrollNext();
+  const canScrollPrev = !!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?.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"
+    },
+    item
+  ))))), /* @__PURE__ */ React.createElement(
+    Dots,
+    {
+      direction,
+      itemsLength: length,
+      selectedIndex,
+      onDotClick: (index) => emblaApi?.scrollTo(index)
+    }
+  ), showArrows && /* @__PURE__ */ React.createElement(
+    CarouselControls,
+    {
+      canScrollNext,
+      canScrollPrev,
+      onNext: () => emblaApi?.scrollNext(),
+      onPrev: () => emblaApi?.scrollPrev()
+    }
+  ));
+};
+var Dots = ({
+  onDotClick,
+  itemsLength,
+  selectedIndex,
+  direction
+}) => {
+  const arr = new Array(itemsLength).fill(0);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      dir: direction,
+      className: "hawa-z-50 hawa-my-2 hawa-flex hawa-justify-center hawa-gap-1"
+    },
+    arr.map((_, index) => {
+      const selected = index === selectedIndex;
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: index,
+          onClick: () => onDotClick(index),
+          className: cn(
+            "hawa-h-2 hawa-rounded-full hawa-bg-primary hawa-transition-all hawa-duration-300 hover:hawa-cursor-pointer",
+            !selected ? "hawa-w-2 hawa-opacity-50" : "hawa-w-6 hawa-opacity-100"
+          )
+        }
+      );
+    })
+  );
+};
+var CarouselControls = (props) => {
+  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 ",
+        !props.canScrollPrev && "hawa-bg-primary/50",
+        props.canScrollPrev && "hawa-bg-primary"
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        "aria-label": "Chevron Right Icon",
+        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 "
+      },
+      /* @__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" })
+    )
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      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 ",
+        !props.canScrollNext && "hawa-bg-primary/50",
+        props.canScrollNext && "hawa-bg-primary"
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        "aria-label": "Chevron Right Icon",
+        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 "
+      },
+      /* @__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" })
+    )
+  ));
+};
+export {
+  Carousel
+};
+//# sourceMappingURL=index.mjs.map

package/dist/carousel/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../elements/carousel/Carousel.tsx"],"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"],"mappings":"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","names":[]}

package/dist/checkbox/index.d.mts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { R as RadiusType } from '../commonTypes-2k6FnHw5.mjs';
+
+type CheckBoxTypes = {
+    id: string;
+    label?: React.ReactNode;
+    sublabel?: React.ReactNode;
+    helperText?: string;
+    size?: "xs" | "sm" | "default" | "md" | "lg" | "xl";
+    radius?: RadiusType;
+};
+type CheckboxProps = CheckBoxTypes & React.ComponentProps<typeof CheckboxElement>;
+declare const Checkbox: React.FC<CheckboxProps>;
+declare const CheckboxElement: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    size?: "xs" | "sm" | "default" | "md" | "lg" | "xl" | undefined;
+    radius?: RadiusType | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+
+export { Checkbox };

package/dist/checkbox/index.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { R as RadiusType } from '../commonTypes-2k6FnHw5.js';
+
+type CheckBoxTypes = {
+    id: string;
+    label?: React.ReactNode;
+    sublabel?: React.ReactNode;
+    helperText?: string;
+    size?: "xs" | "sm" | "default" | "md" | "lg" | "xl";
+    radius?: RadiusType;
+};
+type CheckboxProps = CheckBoxTypes & React.ComponentProps<typeof CheckboxElement>;
+declare const Checkbox: React.FC<CheckboxProps>;
+declare const CheckboxElement: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    size?: "xs" | "sm" | "default" | "md" | "lg" | "xl" | undefined;
+    radius?: RadiusType | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+
+export { Checkbox };

package/dist/checkbox/index.js

@@ -0,0 +1,185 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// elements/checkbox/index.ts
+var checkbox_exports = {};
+__export(checkbox_exports, {
+  Checkbox: () => Checkbox
+});
+module.exports = __toCommonJS(checkbox_exports);
+
+// elements/checkbox/Checkbox.tsx
+var React = __toESM(require("react"));
+var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
+
+// 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/checkbox/Checkbox.tsx
+var Checkbox = ({
+  id,
+  label,
+  sublabel,
+  helperText,
+  disabled,
+  size = "default",
+  radius = "inherit",
+  ...props
+}) => {
+  let labelLineHeightStyles = {
+    xs: sublabel || helperText ? 0.5 : 0.1,
+    sm: 0.6,
+    default: 1,
+    md: 0.8,
+    lg: 0.9,
+    xl: 1
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(
+        "hawa-flex hawa-gap-2",
+        size === "default" ? "hawa-items-top" : "hawa-items-center"
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      CheckboxElement,
+      {
+        ...props,
+        size,
+        radius,
+        disabled,
+        id
+      }
+    ),
+    (label || helperText) && /* @__PURE__ */ React.createElement("div", { className: "hawa-grid hawa-gap-1.5" }, label && /* @__PURE__ */ React.createElement(
+      "label",
+      {
+        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"
+        ),
+        style: {
+          // lineHeight: labelLineHeightStyles[size]
+          lineHeight: 1
+        }
+      },
+      label
+    ), sublabel && /* @__PURE__ */ React.createElement(
+      "label",
+      {
+        htmlFor: id,
+        className: cn(
+          "hawa-w-fit hawa-select-none hawa-text-sm hawa-text-muted-foreground",
+          disabled ? "hawa-cursor-not-allowed hawa-text-muted-foreground hawa-opacity-70" : "hawa-cursor-pointer"
+        )
+      },
+      sublabel
+    ), helperText && !disabled && /* @__PURE__ */ React.createElement(
+      "label",
+      {
+        htmlFor: id,
+        className: cn(
+          "hawa-w-fit hawa-select-none hawa-text-xs hawa-text-helper-color",
+          disabled && "hawa-cursor-not-allowed hawa-opacity-70"
+        )
+      },
+      helperText
+    ))
+  );
+};
+var CheckboxElement = React.forwardRef(({ radius = "inherit", size = "default", className, ...props }, ref) => {
+  let checkboxRadius = {
+    none: "hawa-rounded-none",
+    inherit: "hawa-rounded-sm",
+    full: "hawa-rounded-full"
+  };
+  let checkboxSizes = {
+    xs: "hawa-w-3 hawa-h-3",
+    sm: "hawa-w-6 hawa-h-6",
+    default: "hawa-icon",
+    md: "hawa-w-8 hawa-h-8",
+    lg: "hawa-w-10 hawa-h-10",
+    xl: "hawa-w-12 hawa-h-12"
+  };
+  let checkboxIndicatorSizes = {
+    xs: "0.5em",
+    default: "0.60em",
+    sm: "0.75em",
+    md: "0.875em",
+    lg: "1em",
+    xl: "1.25em"
+  };
+  return /* @__PURE__ */ React.createElement(
+    CheckboxPrimitive.Root,
+    {
+      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",
+        checkboxSizes[size],
+        checkboxRadius[radius],
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(
+      CheckboxPrimitive.Indicator,
+      {
+        className: cn(
+          "hawa-flex hawa-items-center hawa-justify-center hawa-text-current"
+        )
+      },
+      /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          "aria-label": "Check Mark",
+          stroke: "currentColor",
+          fill: "currentColor",
+          strokeWidth: "0",
+          viewBox: "0 0 512 512",
+          height: checkboxIndicatorSizes[size],
+          width: checkboxIndicatorSizes[size]
+        },
+        /* @__PURE__ */ React.createElement("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" })
+      ),
+      " "
+    )
+  );
+});
+CheckboxElement.displayName = CheckboxPrimitive.Root.displayName;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Checkbox
+});
+//# sourceMappingURL=index.js.map

package/dist/checkbox/index.js.map

@@ -0,0 +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?: string;\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":[]}