v12-ui/dist/Button/Button.js

A React component library with a focus on utility-first design and accessibility.

import { jsx as l } from "react/jsx-runtime";
import { forwardRef as m } from "react";
import { cn as w } from "../utils/utils.js";
import { cva as p } from "class-variance-authority";
const x = p("size-text-button font-weight-button flex justify-center items-center hover:cursor-pointer disabled:opacity-50 whitespace-nowrap transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-inherit active:ring-active", {
  variants: {
    variant: {
      primary: "text-text-primary bg-bg-primary hover:bg-bg-primary-hover focus-visible:ring-border-primary",
      secondary: "text-text-secondary bg-bg-secondary hover:bg-bg-secondary-hover focus-visible:ring-border-secondary",
      muted: "text-text-muted bg-bg-muted hover:bg-bg-muted-hover focus-visible:ring-border-muted",
      accent: "text-text-accent bg-bg-accent hover:bg-bg-accent-hover focus-visible:ring-border-accent",
      success: "text-text-success bg-bg-success hover:bg-bg-success-hover focus-visible:ring-border-success",
      warning: "text-text-warning bg-bg-warning hover:bg-bg-warning-hover focus-visible:ring-border-warning",
      error: "text-text-error bg-bg-error hover:bg-bg-error-hover focus-visible:ring-border-error",
      info: "text-text-info bg-bg-info hover:bg-bg-info-hover focus-visible:ring-border-info",
      ghost: "text-text-ghost bg-bg-ghost hover:bg-bg-ghost-hover focus-visible:ring-border-ghost"
    },
    border: {
      true: "border-1"
    },
    shadow: {
      default: "shadow-custom-lg",
      success: "shadow-shadow-success",
      warning: "shadow-shadow-warning",
      error: "shadow-shadow-error",
      info: "shadow-shadow-info"
    },
    rounded: {
      none: "rounded-none",
      sm: "rounded-sm",
      md: "rounded-md",
      lg: "rounded-lg",
      pill: "rounded-4xl",
      circle: "rounded-full aspect-square"
    },
    size: {
      sm: "px-3 py-1 w-20 h-9",
      md: "px-6 py-2 w-30 h-11",
      lg: "px-10 py-3 w-35 h-14",
      fit: "px-8 py-3 w-fit h-fit",
      full: "px-10 py-3 w-full h-14"
    }
  },
  compoundVariants: [
    { variant: "primary", border: !0, className: "border-border-primary hover:border-primary-hover" },
    { variant: "secondary", border: !0, className: "border-border-secondary hover:border-secondary-hover" },
    { variant: "muted", border: !0, className: "border-border-muted" },
    { variant: "accent", border: !0, className: "border-border-accent hover:border-accent-hover" },
    { variant: "success", border: !0, className: "border-border-success hover:border-success-hover" },
    { variant: "warning", border: !0, className: "border-border-warning hover:border-warning-hover" },
    { variant: "error", border: !0, className: "border-border-error hover:border-error-hover" },
    { variant: "info", border: !0, className: "border-border-info hover:border-info-hover" },
    { variant: "ghost", border: !0, className: "border-border-ghost hover:border-ghost-hover" }
  ],
  defaultVariants: {
    variant: "primary",
    border: !0,
    shadow: "default",
    rounded: "pill",
    size: "fit"
  }
});
function y({ as: e, disabled: o, children: i, variant: a, border: b, shadow: d, rounded: c, size: u, className: g, ...t }, h) {
  const s = e || "button", v = s === "button";
  if (process.env.NODE_ENV !== "production") {
    if (e === "a" && !("href" in t))
      throw new Error('When using "as" prop with "a" tag, "href" must be provided.');
    if (e === "button" && "href" in t)
      throw new Error('When using "as" prop with "button" tag, "href" should not be provided.');
  }
  function f(r) {
    const n = r.currentTarget;
    !n || n.tagName === "BUTTON" || (r.key === "Enter" || r.key === " ") && (r.preventDefault(), n.click());
  }
  return /* @__PURE__ */ l(
    s,
    {
      role: v ? void 0 : "button",
      tabIndex: o ? -1 : 0,
      onKeyDown: f,
      ref: h,
      "aria-disabled": o,
      ...t,
      className: w(
        x({ variant: a, border: b, shadow: d, rounded: c, size: u }),
        o && "bg-bg-disabled hover:cursor-not-allowed hover:bg-bg-disabled border-border-disabled",
        g
      ),
      children: i
    }
  );
}
const k = m(y);
export {
  k as Button
};