@szum-tech/design-system/dist/chunk-25X5IOB3.cjs

Szum-Tech design system with tailwindcss support

'use strict';

var chunkTSN5DAKH_cjs = require('./chunk-TSN5DAKH.cjs');
var React = require('react');
var reactSlot = require('@radix-ui/react-slot');
var classVarianceAuthority = require('class-variance-authority');
var jsxRuntime = require('react/jsx-runtime');

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespace(React);

var buttonCva = classVarianceAuthority.cva(
  [
    "inline-flex cursor-pointer items-center justify-center align-middle no-underline transition-colors duration-300 ease-in-out",
    "select-none appearance-none rounded-sm border font-sans font-medium tracking-[.02857em]",
    "aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50"
  ],
  {
    variants: {
      fullWidth: {
        true: "w-full"
      },
      color: {
        neutral: "",
        primary: "",
        success: "",
        warning: "",
        error: ""
      },
      size: {
        sm: "px-2.5 py-1 text-[.8125rem] leading-4",
        md: "px-4 py-1.5 text-[0.875rem] leading-5",
        lg: "px-5 py-2 text-[.9375rem] leading-6"
      },
      variant: {
        text: "border-transparent bg-transparent",
        outlined: "bg-transparent",
        contained: ""
      }
    },
    compoundVariants: [
      // ---------- TEXT ---------- //
      {
        variant: "text",
        color: "neutral",
        class: [
          "text-gray-100",
          "hover:border-gray-500 hover:bg-gray-500 hover:text-app-foreground",
          "active:border-gray-600 active:bg-gray-600"
        ]
      },
      {
        variant: "text",
        color: "primary",
        class: [
          "text-primary-500",
          "hover:border-primary-500 hover:bg-primary-500 hover:text-white",
          "active:border-primary-600 active:bg-primary-600 active:text-white"
        ]
      },
      {
        variant: "text",
        color: "success",
        class: [
          "text-success-500",
          "hover:border-success-500 hover:bg-success-500 hover:text-white",
          "active:border-success-600 active:bg-success-600 active:text-white"
        ]
      },
      {
        variant: "text",
        color: "warning",
        class: [
          "text-warning-500",
          "hover:border-warning-500 hover:bg-warning-500 hover:text-white",
          "active:border-warning-600 active:bg-warning-600 active:text-white"
        ]
      },
      {
        variant: "text",
        color: "error",
        class: [
          "text-error-500",
          "hover:border-error-500 hover:bg-error-500 hover:text-white",
          "active:border-error-600 active:bg-error-600 active:text-white"
        ]
      },
      // ---------- OUTLINED ---------- //
      {
        variant: "outlined",
        color: "neutral",
        class: ["border-gray-500 text-gray-100", "hover:bg-gray-500 hover:text-app-foreground", "active:bg-gray-600"]
      },
      {
        variant: "outlined",
        color: "primary",
        class: [
          "text-primary-500 border-primary-500",
          "hover:bg-primary-500 hover:text-white",
          "active:bg-primary-600 active:text-white"
        ]
      },
      {
        variant: "outlined",
        color: "success",
        class: [
          "text-success-500 border-success-500",
          "hover:bg-success-500 hover:text-white",
          "active:bg-success-600 active:text-white"
        ]
      },
      {
        variant: "outlined",
        color: "warning",
        class: [
          "text-warning-500 border-warning-500",
          "hover:bg-warning-500 hover:text-white",
          "active:bg-warning-600 active:text-white"
        ]
      },
      {
        variant: "outlined",
        color: "error",
        class: [
          "text-error-500 border-error-500",
          "hover:bg-error-500 hover:text-white",
          "active:bg-error-600 active:text-white"
        ]
      },
      // ---------- OUTLINED ---------- //
      {
        variant: "contained",
        color: "neutral",
        class: [
          "border-gray-500 bg-gray-500 text-gray-100",
          "hover:border-gray-400 hover:bg-gray-400 hover:text-app-foreground",
          "active:border-gray-600 active:bg-gray-600"
        ]
      },
      {
        variant: "contained",
        color: "primary",
        class: [
          "border-primary-500 bg-primary-500 text-white",
          "hover:border-primary-400 hover:bg-primary-400",
          "active:border-primary-600 active:bg-primary-600"
        ]
      },
      {
        variant: "contained",
        color: "success",
        class: [
          "border-success-500 bg-success-500 text-white",
          "hover:border-success-400 hover:bg-success-400",
          "active:border-success-600 active:bg-success-600"
        ]
      },
      {
        variant: "contained",
        color: "warning",
        class: [
          "border-warning-500 bg-warning-500 text-white",
          "hover:border-warning-400 hover:bg-warning-400",
          "active:border-warning-600 active:bg-warning-600"
        ]
      },
      {
        variant: "contained",
        color: "error",
        class: [
          "border-error-500 bg-error-500 text-white",
          "hover:border-error-400 hover:bg-error-400",
          "active:border-error-600 active:bg-error-600"
        ]
      }
    ],
    defaultVariants: {
      fullWidth: false,
      color: "primary",
      size: "md",
      variant: "text"
    }
  }
);
var iconContainerCva = classVarianceAuthority.cva("", {
  variants: {
    site: {
      left: "",
      right: ""
    },
    size: {
      sm: "",
      md: "",
      lg: ""
    }
  },
  compoundVariants: [
    // ---------- LEFT ---------- //
    {
      site: "left",
      size: "sm",
      class: "-ml-0.5 mr-1.5"
    },
    {
      site: "left",
      size: "md",
      class: "-ml-1 mr-2"
    },
    {
      site: "left",
      size: "lg",
      class: "-ml-1.5 mr-2.5"
    },
    // ---------- RIGHT ---------- //
    {
      site: "right",
      size: "sm",
      class: "-mr-0.5 ml-1.5"
    },
    {
      site: "right",
      size: "md",
      class: "-mr-1 ml-2"
    },
    {
      site: "right",
      size: "lg",
      class: "-mr-1.5 ml-2.5"
    }
  ],
  defaultVariants: {
    site: "left",
    size: "md"
  }
});
var iconCva = classVarianceAuthority.cva("", {
  variants: {
    loading: {
      true: "animate-spin motion-reduce:hidden"
    },
    size: {
      sm: "h-4.5 w-4.5",
      md: "size-5",
      lg: "h-5.5 w-5.5"
    }
  },
  defaultVariants: {
    loading: false,
    size: "md"
  }
});
function Button({
  asChild = false,
  variant = "text",
  color = "primary",
  disabled = false,
  fullWidth = false,
  loadingPosition = "start",
  ref,
  ...props
}) {
  const {
    children,
    type = "button",
    loading = false,
    size = "md",
    endIcon,
    startIcon,
    ...rest
  } = { ...props, loadingPosition };
  const Comp = asChild ? reactSlot.Slot : "button";
  const buttonStyles = buttonCva({ fullWidth, size, variant, color });
  const isDisabled = disabled || loading;
  return /* @__PURE__ */ jsxRuntime.jsx(
    Comp,
    {
      ...asChild ? props : rest,
      "aria-disabled": isDisabled || void 0,
      className: buttonStyles,
      "data-state": loading ? "loading" : void 0,
      disabled: isDisabled,
      ref,
      role: Comp !== "button" ? "button" : void 0,
      tabIndex: isDisabled ? -1 : 0,
      type: Comp === "button" ? type : void 0,
      children: asChild ? /* @__PURE__ */ jsxRuntime.jsx(ButtonContent, { children }) : /* @__PURE__ */ jsxRuntime.jsx(ButtonContent, { ...props })
    }
  );
}
function ButtonContent({
  children,
  loading = false,
  size = "md",
  loadingPosition = "start",
  startIcon,
  endIcon,
  ...props
}) {
  const isStartLoading = loading && loadingPosition === "start";
  const StartIcon = isStartLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkTSN5DAKH_cjs.LoadingIcon, { "aria-label": "Loading" }) : startIcon || null;
  const startIconStyles = iconCva({ size, loading: isStartLoading });
  const startIconContainerStyles = iconContainerCva({ size, site: "left" });
  const isEndLoading = loading && loadingPosition === "end";
  const EndIcon = isEndLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkTSN5DAKH_cjs.LoadingIcon, { "aria-label": "Loading" }) : endIcon || null;
  const endIconStyles = iconCva({ size, loading: isEndLoading });
  const endIconContainerStyles = iconContainerCva({ size, site: "right" });
  const LeadingIcon = StartIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: startIconContainerStyles, role: isStartLoading ? "progressbar" : void 0, children: React__namespace.cloneElement(StartIcon, { className: startIconStyles }) }) : null;
  const TrailingIcon = EndIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: endIconContainerStyles, role: isEndLoading ? "progressbar" : void 0, children: React__namespace.cloneElement(EndIcon, { className: endIconStyles }) }) : null;
  return React__namespace.isValidElement(children) ? React__namespace.cloneElement(
    children,
    props,
    /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
      LeadingIcon,
      React__namespace.isValidElement(children) ? children.props?.children : null,
      TrailingIcon
    ] })
  ) : /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
    LeadingIcon,
    children,
    TrailingIcon
  ] });
}

exports.Button = Button;