@nordcom/nordstar-button/dist/button.js

Nordstar Button

import "react";
import { jsxs, jsx } from "react/jsx-runtime";
import { cn, forwardRef } from "@nordcom/nordstar-system";
import { cva } from "class-variance-authority";
const variants = cva(
  cn(
    "flex w-fit select-none appearance-none items-center justify-center gap-3 rounded-lg border-2 border-solid px-4 py-2 text-center text-sm font-bold no-underline transition-all"
  ),
  {
    variants: {
      color: {
        primary: "bg-primary border-primary text-primary-foreground",
        secondary: "bg-secondary border-secondary text-secondary-foreground",
        foreground: "bg-foreground border-foreground text-background"
      },
      variant: {
        outline: "bg-transparent",
        solid: "hover:brightness-50 focus-visible:brightness-50 active:brightness-75"
      }
    },
    compoundVariants: [
      {
        color: "primary",
        variant: "outline",
        class: "text-primary hover:bg-primary hover:text-primary-foreground"
      },
      {
        color: "secondary",
        variant: "outline",
        class: "text-secondary hover:bg-secondary hover:text-secondary-foreground"
      },
      {
        color: "foreground",
        variant: "outline",
        class: "text-foreground hover:bg-foreground hover:text-background"
      }
    ],
    defaultVariants: {
      color: "primary",
      variant: "solid"
    }
  }
), Button = forwardRef(
  ({
    variant,
    color,
    icon = null,
    as: Tag = "button",
    disabled,
    className,
    type,
    children,
    contentClassName,
    iconClassName,
    ...props
  }, ref) => /* @__PURE__ */ jsxs(
    Tag,
    {
      ...props,
      ...typeof disabled < "u" && {
        disabled,
        "aria-disabled": disabled
      },
      ref,
      role: "button",
      type: type || "button",
      draggable: !1,
      className: cn(
        variants({
          variant,
          color: color === "default" ? "foreground" : color
        }),
        !disabled && "cursor-pointer",
        disabled && "pointer-events-none cursor-not-allowed brightness-50",
        className
      ),
      "data-variant": variant,
      "data-color": color,
      children: [
        icon ? /* @__PURE__ */ jsx(
          "div",
          {
            className: cn(
              "contents *:block *:aspect-square *:w-4 *:stroke-1 *:text-[length:inherit] *:text-inherit *:font-inherit",
              iconClassName
            ),
            children: icon
          }
        ) : null,
        /* @__PURE__ */ jsx(
          "div",
          {
            className: cn(
              "block text-center font-heading text-inherit font-inherit uppercase",
              contentClassName
            ),
            children
          }
        )
      ]
    }
  )
), button = Object.assign(Button, {
  displayName: "Nordstar.Button"
});
export {
  button as default
};
//# sourceMappingURL=button.js.map