@sikka/hawa/dist/button/index.mjs

Modern UI Kit made with Tailwind

"use client";

// elements/button/Button.tsx
import * as React5 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 { cva } from "class-variance-authority";

// elements/helperText/HelperText.tsx
import React from "react";
var HelperText = ({ helperText }) => /* @__PURE__ */ React.createElement(
  "p",
  {
    className: cn(
      "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
      helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
    )
  },
  helperText
);

// elements/label/Label.tsx
import * as React3 from "react";

// elements/tooltip/Tooltip.tsx
import React2 from "react";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
var TooltipContent = React2.forwardRef(({ className, sideOffset = 4, size = "default", ...props }, ref) => /* @__PURE__ */ React2.createElement(
  TooltipPrimitive.Content,
  {
    ref,
    sideOffset,
    className: cn(
      "hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
      {
        "hawa-text-xs": size === "small",
        "hawa-text-xl": size === "large"
      },
      className
    ),
    ...props
  }
));
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
var TooltipArrow = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(TooltipPrimitive.Arrow, { ref, className: cn(className), ...props }));
TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
var Tooltip = ({
  side,
  size,
  open,
  content,
  children,
  disabled,
  defaultOpen,
  onOpenChange,
  triggerProps,
  contentProps,
  providerProps,
  delayDuration = 300,
  ...props
}) => {
  return /* @__PURE__ */ React2.createElement(
    TooltipPrimitive.TooltipProvider,
    {
      delayDuration,
      ...providerProps
    },
    /* @__PURE__ */ React2.createElement(
      TooltipPrimitive.Root,
      {
        open: !disabled && open,
        defaultOpen,
        onOpenChange,
        ...props
      },
      /* @__PURE__ */ React2.createElement(TooltipPrimitive.Trigger, { ...triggerProps }, children),
      /* @__PURE__ */ React2.createElement(
        TooltipContent,
        {
          size,
          side,
          align: "center",
          ...contentProps,
          style: {
            ...contentProps == null ? void 0 : contentProps.style,
            maxWidth: "var(--radix-tooltip-content-available-width)",
            maxHeight: "var(--radix-tooltip-content-available-height)"
          }
        },
        content
      )
    )
  );
};

// elements/label/Label.tsx
var Label = React3.forwardRef(({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all" }, /* @__PURE__ */ React3.createElement(
  "label",
  {
    ref,
    className: cn(
      "hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70",
      className
    ),
    ...props
  },
  children,
  required && /* @__PURE__ */ React3.createElement("span", { className: "hawa-mx-0.5 hawa-text-red-500" }, "*")
), hint && /* @__PURE__ */ React3.createElement(
  Tooltip,
  {
    content: hint,
    side: hintSide,
    triggerProps: {
      tabIndex: -1,
      onClick: (event) => event.preventDefault()
    }
  },
  /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      className: "hawa-h-[14px] hawa-w-[14px] hawa-cursor-help",
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      strokeWidth: "2",
      strokeLinecap: "round",
      strokeLinejoin: "round"
    },
    /* @__PURE__ */ React3.createElement("circle", { cx: "12", cy: "12", r: "10" }),
    /* @__PURE__ */ React3.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
    /* @__PURE__ */ React3.createElement("path", { d: "M12 17h.01" })
  ))
)));
Label.displayName = "Label";

// elements/loading/Loading.tsx
import React4 from "react";
var Loading = ({
  design = "spinner",
  size = "normal",
  themeMode = "light",
  classNames,
  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 progressSizes = {
    button: "hawa-h-1",
    xs: "hawa-h-1 hawa-w-1",
    sm: "hawa-h-6 hawa-w-6",
    normal: "",
    lg: "hawa-h-6",
    xl: "hawa-h-10 hawa-w-64"
  };
  let animationStyles = {
    pulse: "hawa-animate-in hawa-fade-in hawa-duration-1000",
    bounce: "hawa-animate-bounce"
  };
  switch (design.split("-")[0]) {
    case "dots":
      return /* @__PURE__ */ React4.createElement(
        "div",
        {
          className: cn(
            "hawa-flex hawa-flex-row hawa-gap-2",
            classNames == null ? void 0 : classNames.container
          )
        },
        /* @__PURE__ */ React4.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__ */ React4.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__ */ React4.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__ */ React4.createElement(
        "svg",
        {
          className: cn(
            "squircle-container",
            sizeStyles[size],
            classNames == null ? void 0 : classNames.container
          ),
          viewBox: "0 0 35 35",
          height: "35",
          width: "35"
        },
        /* @__PURE__ */ React4.createElement(
          "rect",
          {
            className: "squircle-track",
            x: "2.5",
            y: "2.5",
            fill: "none",
            strokeWidth: "5px",
            width: "32.5",
            height: "32.5"
          }
        ),
        /* @__PURE__ */ React4.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__ */ React4.createElement(
        "svg",
        {
          x: "0px",
          y: "0px",
          viewBox: "0 0 37 37",
          height: "37",
          width: "37",
          preserveAspectRatio: "xMidYMid meet",
          className: cn(
            "squircle-container",
            sizeStyles[size],
            classNames == null ? void 0 : classNames.container
          )
        },
        /* @__PURE__ */ React4.createElement(
          "path",
          {
            className: cn("squircle-track", classNames == null ? void 0 : classNames.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__ */ React4.createElement(
          "path",
          {
            className: cn("squircle-car", classNames == null ? void 0 : classNames.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__ */ React4.createElement(
        "div",
        {
          className: cn(
            "progress-loading after:hawa-rounded hawa-rounded",
            progressSizes[size],
            classNames == null ? void 0 : classNames.container
          )
        }
      );
    case "orbit":
      return /* @__PURE__ */ React4.createElement("div", { className: cn("orbit-container", classNames == null ? void 0 : classNames.container) });
    default:
      return /* @__PURE__ */ React4.createElement(
        "svg",
        {
          viewBox: "0 0 40 40",
          height: "40",
          width: "40",
          className: cn(
            "circle-container",
            sizeStyles[size],
            classNames == null ? void 0 : classNames.container
          )
        },
        /* @__PURE__ */ React4.createElement(
          "circle",
          {
            className: cn(
              "circle-track",
              {
                "hawa-stroke-primary-foreground": themeMode === "dark",
                "hawa-stroke-primary": themeMode === "light"
              },
              classNames == null ? void 0 : classNames.track
            ),
            cx: "20",
            cy: "20",
            r: "17.5",
            fill: "none",
            strokeWidth: "5px",
            pathLength: "100"
          }
        ),
        /* @__PURE__ */ React4.createElement(
          "circle",
          {
            className: cn(
              "circle-car",
              {
                "hawa-stroke-primary-foreground": themeMode === "dark",
                "hawa-stroke-primary": themeMode === "light"
              },
              classNames == null ? void 0 : classNames.car
            ),
            cx: "20",
            cy: "20",
            r: "17.5",
            fill: "none",
            pathLength: "100",
            strokeWidth: "5px"
          }
        )
      );
  }
};

// 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 = React5.forwardRef(
  ({
    className,
    label,
    variant,
    size,
    asChild = false,
    centered = true,
    isLoading,
    children,
    labelProps,
    showHelperText = false,
    asInput = false,
    ...props
  }, ref) => {
    const Comp = "button";
    const loadingColor = variant === "outline" || variant === "ghost" || variant === "neoBrutalism" ? "hawa-bg-primary" : "hawa-bg-primary-foreground";
    if (asInput) {
      return /* @__PURE__ */ React5.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, label && /* @__PURE__ */ React5.createElement(Label, { ...labelProps }, label), /* @__PURE__ */ React5.createElement(
        Comp,
        {
          className: cn(
            buttonVariants({ variant, size, className }),
            centered && "hawa-justify-center"
          ),
          ref,
          ...props
        },
        isLoading ? /* @__PURE__ */ React5.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
      ), showHelperText && /* @__PURE__ */ React5.createElement(HelperText, { helperText: props.helperText }));
    } else {
      return /* @__PURE__ */ React5.createElement(
        Comp,
        {
          className: cn(
            buttonVariants({ variant, size, className }),
            centered && "hawa-justify-center"
          ),
          ref,
          ...props
        },
        isLoading ? /* @__PURE__ */ React5.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";
export {
  Button,
  buttonVariants
};
//# sourceMappingURL=index.mjs.map