@sikka/hawa 0.26.31 → 0.26.33

package/dist/sortButton/index.mjs

@@ -1,12 +1,269 @@
-import {
-  Button,
-  cn
-} from "../chunk-HYXZRCZW.mjs";
-
 // elements/sortButton/SortButton.tsx
+import React3 from "react";
+
+// util/index.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// elements/button/Button.tsx
+import * as React2 from "react";
+import { cva } from "class-variance-authority";
+
+// elements/loading/Loading.tsx
 import React from "react";
+var Loading = ({
+  design = "spinner",
+  size = "sm",
+  themeMode = "light",
+  color,
+  ...props
+}) => {
+  let sizeStyles = {
+    button: "hawa-h-4 hawa-w-4",
+    xs: "hawa-h-1 hawa-w-1",
+    sm: "hawa-h-6 hawa-w-6",
+    normal: "hawa-h-8 hawa-w-8",
+    lg: "hawa-h-14 hawa-w-14",
+    xl: "hawa-h-24 hawa-w-24"
+  };
+  let animationStyles = {
+    pulse: "hawa-animate-in hawa-fade-in hawa-duration-1000",
+    bounce: "hawa-animate-bounce"
+  };
+  switch (design.split("-")[0]) {
+    case "dots":
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: cn("hawa-flex hawa-flex-row hawa-gap-2", props.className)
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: cn(
+              "hawa-animate-bounce hawa-rounded-full hawa-delay-100 hawa-repeat-infinite",
+              size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
+              animationStyles[design.split("-")[1]],
+              color ? color : "hawa-bg-primary"
+            )
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: cn(
+              "hawa-animate-bounce hawa-rounded-full hawa-delay-200 hawa-repeat-infinite",
+              size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
+              animationStyles[design.split("-")[1]],
+              color ? color : "hawa-bg-primary"
+            )
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: cn(
+              "hawa-animate-bounce hawa-rounded-full hawa-delay-300 hawa-repeat-infinite",
+              size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
+              animationStyles[design.split("-")[1]],
+              color ? color : "hawa-bg-primary"
+            )
+          }
+        )
+      );
+    case "square":
+      return /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          className: cn("squircle-container", sizeStyles[size]),
+          viewBox: "0 0 35 35",
+          height: "35",
+          width: "35"
+        },
+        /* @__PURE__ */ React.createElement(
+          "rect",
+          {
+            className: "squircle-track",
+            x: "2.5",
+            y: "2.5",
+            fill: "none",
+            strokeWidth: "5px",
+            width: "32.5",
+            height: "32.5"
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "rect",
+          {
+            className: "square-car",
+            x: "2.5",
+            y: "2.5",
+            fill: "none",
+            strokeWidth: "5px",
+            width: "32.5",
+            height: "32.5",
+            pathLength: "100"
+          }
+        )
+      );
+    case "squircle":
+      return /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          className: cn("squircle-container", sizeStyles[size]),
+          x: "0px",
+          y: "0px",
+          viewBox: "0 0 37 37",
+          height: "37",
+          width: "37",
+          preserveAspectRatio: "xMidYMid meet"
+        },
+        /* @__PURE__ */ React.createElement(
+          "path",
+          {
+            className: "squircle-track",
+            fill: "none",
+            strokeWidth: "5",
+            pathLength: "100",
+            d: "M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5"
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "path",
+          {
+            className: "squircle-car",
+            fill: "none",
+            strokeWidth: "5",
+            pathLength: "100",
+            d: "M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5"
+          }
+        )
+      );
+    case "progress":
+      return /* @__PURE__ */ React.createElement("div", { className: "progress-loading" });
+    case "orbit":
+      return /* @__PURE__ */ React.createElement("div", { className: "orbit-container" });
+    default:
+      return /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          className: cn("circle-container", sizeStyles[size]),
+          viewBox: "0 0 40 40",
+          height: "40",
+          width: "40"
+        },
+        /* @__PURE__ */ React.createElement(
+          "circle",
+          {
+            className: cn("circle-track", {
+              "hawa-stroke-primary-foreground": themeMode === "dark",
+              "hawa-stroke-primary": themeMode === "light"
+            }),
+            cx: "20",
+            cy: "20",
+            r: "17.5",
+            pathLength: "100",
+            strokeWidth: "5px",
+            fill: "none"
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "circle",
+          {
+            className: cn("circle-car", {
+              "hawa-stroke-primary-foreground": themeMode === "dark",
+              "hawa-stroke-primary": themeMode === "light"
+            }),
+            cx: "20",
+            cy: "20",
+            r: "17.5",
+            pathLength: "100",
+            strokeWidth: "5px",
+            fill: "none"
+          }
+        )
+      );
+  }
+};
+
+// elements/button/Button.tsx
+var buttonVariants = cva(
+  "hawa-inline-flex hawa-items-center  hawa-select-none hawa-rounded-md hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-colors focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "hawa-bg-primary hawa-text-primary-foreground hover:hawa-bg-primary/90",
+        light: "hawa-bg-primary/20 hawa-text-primary hover:hawa-bg-primary/40",
+        destructive: "hawa-bg-destructive hawa-text-destructive-foreground hover:hawa-bg-destructive/90",
+        outline: "hawa-border hawa-border-input hawa-bg-transparent hover:hawa-bg-accent hover:hawa-text-accent-foreground",
+        secondary: "hawa-bg-secondary hawa-text-secondary-foreground hover:hawa-bg-secondary/80",
+        ghost: "hover:hawa-bg-accent hover:hawa-text-accent-foreground",
+        link: "hawa-text-primary hawa-underline-offset-4 hover:hawa-underline",
+        combobox: "hawa-bg-background hawa-border",
+        neoBrutalism: "neo-brutalism"
+        // "hawa-cursor-pointer 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] active:hawa-translate-x-0.5 active:hawa-translate-y-0.5 active:hawa-shadow-color-primary-active shadow-color-primary active:shadow-color-primary-active",
+      },
+      size: {
+        default: "hawa-h-10 hawa-px-4 hawa-py-2",
+        heightless: "hawa-px-4 hawa-py-4",
+        xs: "hawa-h-fit hawa-min-h-[25px] hawa-py-1 hawa-text-[10px] hawa-px-2 ",
+        sm: "hawa-h-9  hawa-text-[11px] hawa-rounded-md hawa-px-3",
+        lg: "hawa-h-11 hawa-rounded-md hawa-px-8",
+        xl: "hawa-h-14 hawa-rounded-md hawa-px-10",
+        icon: "hawa-h-10 hawa-w-10",
+        smallIcon: "hawa-h-7 hawa-w-7"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React2.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    centered = true,
+    isLoading,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = "button";
+    const loadingColor = variant === "outline" || variant === "ghost" || variant === "neoBrutalism" ? "hawa-bg-primary" : "hawa-bg-primary-foreground";
+    return /* @__PURE__ */ React2.createElement(
+      Comp,
+      {
+        className: cn(
+          buttonVariants({ variant, size, className }),
+          centered && "hawa-justify-center"
+          // "hawa-bg-red-500"
+        ),
+        ref,
+        ...props
+      },
+      isLoading ? /* @__PURE__ */ React2.createElement(
+        Loading,
+        {
+          design: size === "icon" || size === "smallIcon" ? "spinner" : "dots-pulse",
+          themeMode: variant === "outline" ? "light" : "dark",
+          color: loadingColor,
+          size: size === "sm" || size === "xs" ? "xs" : "button"
+        }
+      ) : children
+    );
+  }
+);
+Button.displayName = "Button";
+
+// elements/sortButton/SortButton.tsx
 var SortButton = (props) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React3.createElement(
     Button,
     {
       variant: "ghost",
@@ -18,7 +275,7 @@ var SortButton = (props) => {
       onClick: props.onSort
     },
     props.label,
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React3.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -30,10 +287,10 @@ var SortButton = (props) => {
         strokeLinejoin: "round",
         className: props.condensed ? "hawa-h-3 hawa-w-3" : "hawa-icon"
       },
-      /* @__PURE__ */ React.createElement("path", { d: "m21 16-4 4-4-4" }),
-      /* @__PURE__ */ React.createElement("path", { d: "M17 20V4" }),
-      /* @__PURE__ */ React.createElement("path", { d: "m3 8 4-4 4 4" }),
-      /* @__PURE__ */ React.createElement("path", { d: "M7 4v16" })
+      /* @__PURE__ */ React3.createElement("path", { d: "m21 16-4 4-4-4" }),
+      /* @__PURE__ */ React3.createElement("path", { d: "M17 20V4" }),
+      /* @__PURE__ */ React3.createElement("path", { d: "m3 8 4-4 4 4" }),
+      /* @__PURE__ */ React3.createElement("path", { d: "M7 4v16" })
     )
   );
 };

package/dist/sortButton/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../elements/sortButton/SortButton.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { cn } from \"@util/index\";\nimport { Button } from \"../button\";\n\ntype SortButtonProps = {\n  onSort: () => void;\n  label: string;\n  condensed?: boolean;\n};\n\nexport const SortButton: React.FC<SortButtonProps> = (props) => {\n  return (\n    <Button\n      variant=\"ghost\"\n      centered={false}\n      className={cn(\n        \"hawa-flex hawa-w-full hawa-flex-row hawa-items-start hawa-justify-start hawa-gap-2 hawa-text-start\",\n        props.condensed && \"hawa-h-6\"\n      )}\n      onClick={props.onSort}\n    >\n      {props.label}\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className={props.condensed ? \"hawa-h-3 hawa-w-3\" : \"hawa-icon\"}\n      >\n        <path d=\"m21 16-4 4-4-4\" />\n        <path d=\"M17 20V4\" />\n        <path d=\"m3 8 4-4 4 4\" />\n        <path d=\"M7 4v16\" />\n      </svg>\n    </Button>\n  );\n};\n"],"mappings":";;;;;;AAAA,OAAO,WAAW;AAWX,IAAM,aAAwC,CAAC,UAAU;AAC9D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,UAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,MAAM,aAAa;AAAA,MACrB;AAAA,MACA,SAAS,MAAM;AAAA;AAAA,IAEd,MAAM;AAAA,IACP;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,QAAO;AAAA,QACP,aAAY;AAAA,QACZ,eAAc;AAAA,QACd,gBAAe;AAAA,QACf,WAAW,MAAM,YAAY,sBAAsB;AAAA;AAAA,MAEnD,oCAAC,UAAK,GAAE,kBAAiB;AAAA,MACzB,oCAAC,UAAK,GAAE,YAAW;AAAA,MACnB,oCAAC,UAAK,GAAE,gBAAe;AAAA,MACvB,oCAAC,UAAK,GAAE,WAAU;AAAA,IACpB;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../elements/sortButton/SortButton.tsx","../../util/index.ts","../../elements/button/Button.tsx","../../elements/loading/Loading.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { cn } from \"@util/index\";\nimport { Button } from \"../button\";\n\ntype SortButtonProps = {\n  onSort: () => void;\n  label: string;\n  condensed?: boolean;\n};\n\nexport const SortButton: React.FC<SortButtonProps> = (props) => {\n  return (\n    <Button\n      variant=\"ghost\"\n      centered={false}\n      className={cn(\n        \"hawa-flex hawa-w-full hawa-flex-row hawa-items-start hawa-justify-start hawa-gap-2 hawa-text-start\",\n        props.condensed && \"hawa-h-6\"\n      )}\n      onClick={props.onSort}\n    >\n      {props.label}\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className={props.condensed ? \"hawa-h-3 hawa-w-3\" : \"hawa-icon\"}\n      >\n        <path d=\"m21 16-4 4-4-4\" />\n        <path d=\"M17 20V4\" />\n        <path d=\"m3 8 4-4 4 4\" />\n        <path d=\"M7 4v16\" />\n      </svg>\n    </Button>\n  );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import * as React from \"react\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@util/index\";\nimport { Loading } from \"../loading/Loading\";\n\nconst buttonVariants = cva(\n  \"hawa-inline-flex hawa-items-center  hawa-select-none hawa-rounded-md hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-colors focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"hawa-bg-primary hawa-text-primary-foreground hover:hawa-bg-primary/90\",\n        light: \"hawa-bg-primary/20 hawa-text-primary hover:hawa-bg-primary/40\",\n        destructive:\n          \"hawa-bg-destructive hawa-text-destructive-foreground hover:hawa-bg-destructive/90\",\n        outline:\n          \"hawa-border hawa-border-input hawa-bg-transparent hover:hawa-bg-accent hover:hawa-text-accent-foreground\",\n        secondary:\n          \"hawa-bg-secondary hawa-text-secondary-foreground hover:hawa-bg-secondary/80\",\n        ghost: \"hover:hawa-bg-accent hover:hawa-text-accent-foreground\",\n        link: \"hawa-text-primary hawa-underline-offset-4 hover:hawa-underline\",\n        combobox: \"hawa-bg-background hawa-border\",\n        neoBrutalism: \"neo-brutalism\"\n        // \"hawa-cursor-pointer 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] active:hawa-translate-x-0.5 active:hawa-translate-y-0.5 active:hawa-shadow-color-primary-active shadow-color-primary active:shadow-color-primary-active\",\n      },\n      size: {\n        default: \"hawa-h-10 hawa-px-4 hawa-py-2\",\n        heightless: \"hawa-px-4 hawa-py-4\",\n        xs: \"hawa-h-fit hawa-min-h-[25px] hawa-py-1 hawa-text-[10px] hawa-px-2 \",\n        sm: \"hawa-h-9  hawa-text-[11px] hawa-rounded-md hawa-px-3\",\n        lg: \"hawa-h-11 hawa-rounded-md hawa-px-8\",\n        xl: \"hawa-h-14 hawa-rounded-md hawa-px-10\",\n        icon: \"hawa-h-10 hawa-w-10\",\n        smallIcon: \"hawa-h-7 hawa-w-7\"\n      }\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\"\n    }\n  }\n);\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  centered?: boolean;\n  isLoading?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant,\n      size,\n      asChild = false,\n      centered = true,\n      isLoading,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = \"button\";\n\n    // Determine the color for the HawaLoading component based on the variant\n    const loadingColor =\n      variant === \"outline\" || variant === \"ghost\" || variant === \"neoBrutalism\"\n        ? \"hawa-bg-primary\"\n        : \"hawa-bg-primary-foreground\";\n\n    return (\n      <Comp\n        className={cn(\n          buttonVariants({ variant, size, className }),\n          centered && \"hawa-justify-center\",\n          // \"hawa-bg-red-500\"\n        )}\n        ref={ref}\n        {...props}\n      >\n        {isLoading ? (\n          <Loading\n            design={\n              size === \"icon\" || size === \"smallIcon\" ? \"spinner\" : \"dots-pulse\"\n            }\n            themeMode={variant === \"outline\" ? \"light\" : \"dark\"}\n            color={loadingColor}\n            size={size === \"sm\" || size === \"xs\" ? \"xs\" : \"button\"}\n          />\n        ) : (\n          children\n        )}\n      </Comp>\n    );\n  }\n);\n\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","import React, { FC } from \"react\";\n\nimport { cn } from \"@util/index\";\n\ntype LoadingTypes = {\n  /** Specifies the size of the loading component.*/\n  size?: \"button\" | \"xs\" | \"sm\" | \"normal\" | \"lg\" | \"xl\";\n  /** Determines the design of the loading animation.*/\n  design?:\n    | \"spinner\"\n    | \"dots-bounce\"\n    | \"dots-pulse\"\n    | \"pulse\"\n    | \"spinner-dots\"\n    | \"squircle\"\n    | \"square\"\n    | \"progress\"\n    | \"orbit\";\n  /** Specifies the color of the loading component. By default it will inherit the value of <span className=\"inline-code\">--primary</span> global CSS variable*/\n  color?: string;\n  className?: string;\n  themeMode?: \"dark\" | \"light\";\n};\n\nexport const Loading: FC<LoadingTypes> = ({\n  design = \"spinner\",\n  size = \"sm\",\n  themeMode = \"light\",\n  color,\n  ...props\n}) => {\n  let sizeStyles = {\n    button: \"hawa-h-4 hawa-w-4\",\n    xs: \"hawa-h-1 hawa-w-1\",\n    sm: \"hawa-h-6 hawa-w-6\",\n    normal: \"hawa-h-8 hawa-w-8\",\n    lg: \"hawa-h-14 hawa-w-14\",\n    xl: \"hawa-h-24 hawa-w-24\"\n  };\n\n  let animationStyles: any = {\n    pulse: \"hawa-animate-in hawa-fade-in hawa-duration-1000\",\n    bounce: \"hawa-animate-bounce\"\n  };\n  switch (design.split(\"-\")[0]) {\n    case \"dots\":\n      return (\n        <div\n          className={cn(\"hawa-flex hawa-flex-row hawa-gap-2\", props.className)}\n        >\n          <div\n            className={cn(\n              \"hawa-animate-bounce hawa-rounded-full hawa-delay-100 hawa-repeat-infinite\",\n              size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n              animationStyles[design.split(\"-\")[1]],\n              color ? color : \"hawa-bg-primary\"\n            )}\n          ></div>\n          <div\n            className={cn(\n              \"hawa-animate-bounce hawa-rounded-full hawa-delay-200 hawa-repeat-infinite\",\n              size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n              animationStyles[design.split(\"-\")[1]],\n              color ? color : \"hawa-bg-primary\"\n            )}\n          ></div>\n          <div\n            className={cn(\n              \"hawa-animate-bounce hawa-rounded-full hawa-delay-300 hawa-repeat-infinite\",\n              size === \"button\" ? \"hawa-h-2 hawa-w-2\" : sizeStyles[size],\n              animationStyles[design.split(\"-\")[1]],\n              color ? color : \"hawa-bg-primary\"\n            )}\n          ></div>\n        </div>\n      );\n    case \"square\":\n      return (\n        <svg\n          className={cn(\"squircle-container\", sizeStyles[size])}\n          viewBox=\"0 0 35 35\"\n          height=\"35\"\n          width=\"35\"\n        >\n          <rect\n            className=\"squircle-track\"\n            x=\"2.5\"\n            y=\"2.5\"\n            fill=\"none\"\n            strokeWidth=\"5px\"\n            width=\"32.5\"\n            height=\"32.5\"\n          />\n          <rect\n            className=\"square-car\"\n            x=\"2.5\"\n            y=\"2.5\"\n            fill=\"none\"\n            strokeWidth=\"5px\"\n            width=\"32.5\"\n            height=\"32.5\"\n            pathLength=\"100\"\n          />\n        </svg>\n      );\n    case \"squircle\":\n      return (\n        <svg\n          className={cn(\"squircle-container\", sizeStyles[size])}\n          x=\"0px\"\n          y=\"0px\"\n          viewBox=\"0 0 37 37\"\n          height=\"37\"\n          width=\"37\"\n          preserveAspectRatio=\"xMidYMid meet\"\n        >\n          <path\n            className=\"squircle-track\"\n            fill=\"none\"\n            strokeWidth=\"5\"\n            pathLength=\"100\"\n            d=\"M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5\"\n          ></path>\n          <path\n            className=\"squircle-car\"\n            fill=\"none\"\n            strokeWidth=\"5\"\n            pathLength=\"100\"\n            d=\"M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5\"\n          ></path>\n        </svg>\n      );\n    case \"progress\":\n      return <div className=\"progress-loading\"></div>;\n    case \"orbit\":\n      return <div className=\"orbit-container\"></div>;\n\n    default:\n      return (\n        <svg\n          className={cn(\"circle-container\", sizeStyles[size])}\n          viewBox=\"0 0 40 40\"\n          height=\"40\"\n          width=\"40\"\n        >\n          <circle\n            className={cn(\"circle-track\", {\n              \"hawa-stroke-primary-foreground\": themeMode === \"dark\",\n              \"hawa-stroke-primary\": themeMode === \"light\"\n            })}\n            cx=\"20\"\n            cy=\"20\"\n            r=\"17.5\"\n            pathLength=\"100\"\n            strokeWidth=\"5px\"\n            fill=\"none\"\n          />\n          <circle\n            className={cn(\"circle-car\", {\n              \"hawa-stroke-primary-foreground\": themeMode === \"dark\",\n              \"hawa-stroke-primary\": themeMode === \"light\"\n            })}\n            cx=\"20\"\n            cy=\"20\"\n            r=\"17.5\"\n            pathLength=\"100\"\n            strokeWidth=\"5px\"\n            fill=\"none\"\n          />\n        </svg>\n      );\n    // return (\n    //   <div\n    //     className={cn(\n    //       \"hawa-flex hawa-flex-row hawa-gap-x-3\",\n    //       props.className\n    //     )}\n    //   >\n    //     <div aria-label=\"Loading...\" role=\"status\">\n    //       <svg\n    //         className={cn(sizeStyles[size], \"hawa-animate-spin\")}\n    //         viewBox=\"3 3 18 18\"\n    //       >\n    //         <path\n    //           className=\"hawa-fill-primary/20\"\n    //           d=\"M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z\"\n    //         ></path>\n    //         <path\n    //           className={color ? color : \"hawa-fill-primary\"}\n    //           d=\"M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z\"\n    //         ></path>\n    //       </svg>\n    //     </div>\n    //   </div>\n    // );\n  }\n};\n"],"mappings":"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","names":["React","React","React"]}

package/dist/splitButton/index.mjs

@@ -1,10 +1,12 @@
-import {
-  Button,
-  cn
-} from "../chunk-HYXZRCZW.mjs";
-
 // elements/splitButton/SplitButton.tsx
-import * as React2 from "react";
+import * as React4 from "react";
+
+// util/index.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
 
 // elements/dropdownMenu/DropdownMenu.tsx
 import * as React from "react";
@@ -334,6 +336,259 @@ var DropdownMenu = ({
   );
 };
 
+// elements/button/Button.tsx
+import * as React3 from "react";
+import { cva } from "class-variance-authority";
+
+// elements/loading/Loading.tsx
+import React2 from "react";
+var Loading = ({
+  design = "spinner",
+  size = "sm",
+  themeMode = "light",
+  color,
+  ...props
+}) => {
+  let sizeStyles = {
+    button: "hawa-h-4 hawa-w-4",
+    xs: "hawa-h-1 hawa-w-1",
+    sm: "hawa-h-6 hawa-w-6",
+    normal: "hawa-h-8 hawa-w-8",
+    lg: "hawa-h-14 hawa-w-14",
+    xl: "hawa-h-24 hawa-w-24"
+  };
+  let animationStyles = {
+    pulse: "hawa-animate-in hawa-fade-in hawa-duration-1000",
+    bounce: "hawa-animate-bounce"
+  };
+  switch (design.split("-")[0]) {
+    case "dots":
+      return /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          className: cn("hawa-flex hawa-flex-row hawa-gap-2", props.className)
+        },
+        /* @__PURE__ */ React2.createElement(
+          "div",
+          {
+            className: cn(
+              "hawa-animate-bounce hawa-rounded-full hawa-delay-100 hawa-repeat-infinite",
+              size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
+              animationStyles[design.split("-")[1]],
+              color ? color : "hawa-bg-primary"
+            )
+          }
+        ),
+        /* @__PURE__ */ React2.createElement(
+          "div",
+          {
+            className: cn(
+              "hawa-animate-bounce hawa-rounded-full hawa-delay-200 hawa-repeat-infinite",
+              size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
+              animationStyles[design.split("-")[1]],
+              color ? color : "hawa-bg-primary"
+            )
+          }
+        ),
+        /* @__PURE__ */ React2.createElement(
+          "div",
+          {
+            className: cn(
+              "hawa-animate-bounce hawa-rounded-full hawa-delay-300 hawa-repeat-infinite",
+              size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
+              animationStyles[design.split("-")[1]],
+              color ? color : "hawa-bg-primary"
+            )
+          }
+        )
+      );
+    case "square":
+      return /* @__PURE__ */ React2.createElement(
+        "svg",
+        {
+          className: cn("squircle-container", sizeStyles[size]),
+          viewBox: "0 0 35 35",
+          height: "35",
+          width: "35"
+        },
+        /* @__PURE__ */ React2.createElement(
+          "rect",
+          {
+            className: "squircle-track",
+            x: "2.5",
+            y: "2.5",
+            fill: "none",
+            strokeWidth: "5px",
+            width: "32.5",
+            height: "32.5"
+          }
+        ),
+        /* @__PURE__ */ React2.createElement(
+          "rect",
+          {
+            className: "square-car",
+            x: "2.5",
+            y: "2.5",
+            fill: "none",
+            strokeWidth: "5px",
+            width: "32.5",
+            height: "32.5",
+            pathLength: "100"
+          }
+        )
+      );
+    case "squircle":
+      return /* @__PURE__ */ React2.createElement(
+        "svg",
+        {
+          className: cn("squircle-container", sizeStyles[size]),
+          x: "0px",
+          y: "0px",
+          viewBox: "0 0 37 37",
+          height: "37",
+          width: "37",
+          preserveAspectRatio: "xMidYMid meet"
+        },
+        /* @__PURE__ */ React2.createElement(
+          "path",
+          {
+            className: "squircle-track",
+            fill: "none",
+            strokeWidth: "5",
+            pathLength: "100",
+            d: "M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5"
+          }
+        ),
+        /* @__PURE__ */ React2.createElement(
+          "path",
+          {
+            className: "squircle-car",
+            fill: "none",
+            strokeWidth: "5",
+            pathLength: "100",
+            d: "M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5"
+          }
+        )
+      );
+    case "progress":
+      return /* @__PURE__ */ React2.createElement("div", { className: "progress-loading" });
+    case "orbit":
+      return /* @__PURE__ */ React2.createElement("div", { className: "orbit-container" });
+    default:
+      return /* @__PURE__ */ React2.createElement(
+        "svg",
+        {
+          className: cn("circle-container", sizeStyles[size]),
+          viewBox: "0 0 40 40",
+          height: "40",
+          width: "40"
+        },
+        /* @__PURE__ */ React2.createElement(
+          "circle",
+          {
+            className: cn("circle-track", {
+              "hawa-stroke-primary-foreground": themeMode === "dark",
+              "hawa-stroke-primary": themeMode === "light"
+            }),
+            cx: "20",
+            cy: "20",
+            r: "17.5",
+            pathLength: "100",
+            strokeWidth: "5px",
+            fill: "none"
+          }
+        ),
+        /* @__PURE__ */ React2.createElement(
+          "circle",
+          {
+            className: cn("circle-car", {
+              "hawa-stroke-primary-foreground": themeMode === "dark",
+              "hawa-stroke-primary": themeMode === "light"
+            }),
+            cx: "20",
+            cy: "20",
+            r: "17.5",
+            pathLength: "100",
+            strokeWidth: "5px",
+            fill: "none"
+          }
+        )
+      );
+  }
+};
+
+// elements/button/Button.tsx
+var buttonVariants = cva(
+  "hawa-inline-flex hawa-items-center  hawa-select-none hawa-rounded-md hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-colors focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "hawa-bg-primary hawa-text-primary-foreground hover:hawa-bg-primary/90",
+        light: "hawa-bg-primary/20 hawa-text-primary hover:hawa-bg-primary/40",
+        destructive: "hawa-bg-destructive hawa-text-destructive-foreground hover:hawa-bg-destructive/90",
+        outline: "hawa-border hawa-border-input hawa-bg-transparent hover:hawa-bg-accent hover:hawa-text-accent-foreground",
+        secondary: "hawa-bg-secondary hawa-text-secondary-foreground hover:hawa-bg-secondary/80",
+        ghost: "hover:hawa-bg-accent hover:hawa-text-accent-foreground",
+        link: "hawa-text-primary hawa-underline-offset-4 hover:hawa-underline",
+        combobox: "hawa-bg-background hawa-border",
+        neoBrutalism: "neo-brutalism"
+        // "hawa-cursor-pointer 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] active:hawa-translate-x-0.5 active:hawa-translate-y-0.5 active:hawa-shadow-color-primary-active shadow-color-primary active:shadow-color-primary-active",
+      },
+      size: {
+        default: "hawa-h-10 hawa-px-4 hawa-py-2",
+        heightless: "hawa-px-4 hawa-py-4",
+        xs: "hawa-h-fit hawa-min-h-[25px] hawa-py-1 hawa-text-[10px] hawa-px-2 ",
+        sm: "hawa-h-9  hawa-text-[11px] hawa-rounded-md hawa-px-3",
+        lg: "hawa-h-11 hawa-rounded-md hawa-px-8",
+        xl: "hawa-h-14 hawa-rounded-md hawa-px-10",
+        icon: "hawa-h-10 hawa-w-10",
+        smallIcon: "hawa-h-7 hawa-w-7"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React3.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    centered = true,
+    isLoading,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = "button";
+    const loadingColor = variant === "outline" || variant === "ghost" || variant === "neoBrutalism" ? "hawa-bg-primary" : "hawa-bg-primary-foreground";
+    return /* @__PURE__ */ React3.createElement(
+      Comp,
+      {
+        className: cn(
+          buttonVariants({ variant, size, className }),
+          centered && "hawa-justify-center"
+          // "hawa-bg-red-500"
+        ),
+        ref,
+        ...props
+      },
+      isLoading ? /* @__PURE__ */ React3.createElement(
+        Loading,
+        {
+          design: size === "icon" || size === "smallIcon" ? "spinner" : "dots-pulse",
+          themeMode: variant === "outline" ? "light" : "dark",
+          color: loadingColor,
+          size: size === "sm" || size === "xs" ? "xs" : "button"
+        }
+      ) : children
+    );
+  }
+);
+Button.displayName = "Button";
+
 // elements/splitButton/SplitButton.tsx
 var SplitButton = ({
   variant,
@@ -341,13 +596,13 @@ var SplitButton = ({
   menuItems = [],
   children,
   ...props
-}) => /* @__PURE__ */ React2.createElement(
+}) => /* @__PURE__ */ React4.createElement(
   "div",
   {
     dir: "ltr",
     className: cn("hawa-row hawa-flex hawa-h-fit hawa-justify-center")
   },
-  /* @__PURE__ */ React2.createElement(
+  /* @__PURE__ */ React4.createElement(
     Button,
     {
       variant,
@@ -356,7 +611,7 @@ var SplitButton = ({
     },
     children
   ),
-  /* @__PURE__ */ React2.createElement(
+  /* @__PURE__ */ React4.createElement(
     DropdownMenu,
     {
       size: "sm",
@@ -364,7 +619,7 @@ var SplitButton = ({
       direction,
       align: direction === "rtl" ? "start" : "end",
       items: menuItems,
-      trigger: /* @__PURE__ */ React2.createElement(
+      trigger: /* @__PURE__ */ React4.createElement(
         Button,
         {
           asChild: true,
@@ -375,7 +630,7 @@ var SplitButton = ({
             props.className
           )
         },
-        /* @__PURE__ */ React2.createElement(
+        /* @__PURE__ */ React4.createElement(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -388,7 +643,7 @@ var SplitButton = ({
             strokeLinecap: "round",
             strokeLinejoin: "round"
           },
-          /* @__PURE__ */ React2.createElement("path", { d: "m6 9 6 6 6-6" })
+          /* @__PURE__ */ React4.createElement("path", { d: "m6 9 6 6 6-6" })
         )
       )
     }