laif-ds/dist/components/ui/button.js

Design System di Laif con componenti React basati su principi di Atomic Design

"use client";
import { jsx as r, jsxs as c } from "react/jsx-runtime";
import { Root as g } from "../../node_modules/@radix-ui/react-slot/dist/index.js";
import { cva as h } from "../../node_modules/class-variance-authority/dist/index.js";
import { cn as l } from "../../lib/utils.js";
import { Icon as u } from "./icon.js";
const m = h(
  "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-d-ring focus-visible:ring-d-ring/50 focus-visible:ring-[3px] aria-invalid:ring-d-destructive/20 dark:aria-invalid:ring-d-destructive/40 aria-invalid:border-d-destructive  transition-all duration-200",
  {
    variants: {
      variant: {
        default: "bg-d-primary text-d-primary-foreground shadow-xs hover:bg-d-primary/90",
        destructive: "bg-d-destructive text-white shadow-xs hover:bg-d-destructive/90 focus-visible:ring-d-destructive/20 dark:focus-visible:ring-d-destructive/40 dark:bg-d-destructive/60",
        outline: "border bg-d-background shadow-xs hover:bg-d-accent hover:text-d-accent-foreground dark:bg-d-input/30 dark:border-d-input dark:hover:bg-d-input/50",
        secondary: "bg-d-secondary text-d-secondary-foreground shadow-xs hover:bg-d-secondary/80",
        ghost: "hover:bg-d-accent hover:text-d-accent-foreground dark:hover:bg-d-accent/50",
        link: "text-d-primary underline-offset-4 hover:underline"
      },
      size: {
        default: "h-9 px-4 py-2 has-[>svg]:px-3",
        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
        icon: "size-9"
      }
    },
    defaultVariants: {
      variant: "default",
      size: "default"
    }
  }
);
function k({
  className: d,
  variant: n,
  size: e,
  asChild: o = !1,
  iconLeft: i,
  iconRight: a,
  isLoading: v = !1,
  ...t
}) {
  const s = o ? g : "button";
  return o ? /* @__PURE__ */ r(
    s,
    {
      "data-slot": "button",
      className: l(m({ variant: n, size: e, className: d })),
      ...t
    }
  ) : /* @__PURE__ */ c(
    s,
    {
      "data-slot": "button",
      className: l(m({ variant: n, size: e, className: d }), "relative"),
      ...t,
      children: [
        v ? /* @__PURE__ */ c(
          "svg",
          {
            className: "mr-1 -ml-1 animate-spin",
            xmlns: "http://www.w3.org/2000/svg",
            fill: "none",
            viewBox: "0 0 24 24",
            width: e === "sm" ? 14 : e === "lg" ? 20 : 16,
            height: e === "sm" ? 14 : e === "lg" ? 20 : 16,
            children: [
              /* @__PURE__ */ r(
                "circle",
                {
                  className: "opacity-25",
                  cx: "12",
                  cy: "12",
                  r: "10",
                  stroke: "currentColor",
                  strokeWidth: "4"
                }
              ),
              /* @__PURE__ */ r(
                "path",
                {
                  className: "opacity-75",
                  fill: "currentColor",
                  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                }
              )
            ]
          }
        ) : i && /* @__PURE__ */ r(
          u,
          {
            name: i,
            size: e === "default" ? "md" : e === "sm" ? "xs" : "sm"
          }
        ),
        t.children,
        a && /* @__PURE__ */ r(
          u,
          {
            name: a,
            size: e === "default" ? "md" : e === "sm" ? "xs" : "sm"
          }
        )
      ]
    }
  );
}
export {
  k as Button,
  m as buttonVariants
};