laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
125 lines (124 loc) • 4.68 kB
JavaScript
"use client";
import { jsx as t, jsxs as l } from "react/jsx-runtime";
import { Root as g } from "../../node_modules/@radix-ui/react-slot/dist/index.js";
import { cva as f } from "../../node_modules/class-variance-authority/dist/index.js";
import { designTokens as r } from "../design-tokens.js";
import { cn as d } from "../../lib/utils.js";
import { Icon as h } from "./icon.js";
const v = f(
d(
r.text.base,
r.radius.default,
r.focusRing,
r.interaction.active,
r.interaction.disabled,
"cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap overflow-hidden relative group",
"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0"
),
{
variants: {
variant: {
default: "bg-d-primary text-d-primary-foreground shadow-xs hover:bg-d-primary/90 hover:shadow-d-primary/25",
destructive: "bg-d-destructive text-d-destructive-foreground shadow-xs hover:bg-d-destructive/90 hover:shadow-d-destructive/25 focus-visible:ring-d-destructive/20",
outline: "border border-d-foreground shadow-xs disabled:border-d-foreground/30 hover:bg-d-accent hover:text-d-accent-foreground hover:border-d-foreground/80",
"outline-primary": "border border-d-primary shadow-xs text-d-primary/80 hover:text-d-primary hover:bg-d-primary/10 hover:border-d-primary/80",
"outline-destructive": "border border-d-destructive shadow-xs text-d-destructive/80 hover:text-d-destructive hover:bg-d-destructive/10 hover:border-d-destructive/80",
secondary: "bg-d-secondary text-d-secondary-foreground shadow-xs hover:bg-d-secondary/80 hover:text-d-secondary-foreground",
ghost: "hover:bg-d-accent hover:text-d-accent-foreground",
"ghost-destructive": "text-d-destructive bg-transparent hover:bg-d-destructive/10",
"ghost-accent": "text-d-primary bg-transparent hover:bg-d-primary/10",
link: "text-d-primary underline-offset-4 hover:underline"
},
size: {
default: r.sizes.default + " has-[>svg]:px-3",
sm: r.sizes.sm + " has-[>svg]:px-2.5",
lg: r.sizes.lg + " has-[>svg]:px-4",
icon: r.sizes.icon.default
}
},
defaultVariants: {
variant: "default",
size: "default"
}
}
);
function N({
className: a,
variant: o,
size: e,
asChild: n = !1,
iconLeft: i,
iconRight: c,
isLoading: m = !1,
...s
}) {
const u = n ? g : "button";
return n ? /* @__PURE__ */ t(
u,
{
"data-slot": "button",
className: d(v({ variant: o, size: e, className: a })),
...s
}
) : /* @__PURE__ */ l(
u,
{
"data-slot": "button",
className: d("relative", v({ variant: o, size: e, className: a })),
...s,
children: [
o !== "ghost" && o !== "ghost-destructive" && o !== "ghost-accent" && o !== "link" && /* @__PURE__ */ t("span", { className: "pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]", children: /* @__PURE__ */ t("span", { className: "absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/20 to-transparent transition-transform duration-700 ease-out group-hover:translate-x-full" }) }),
m ? /* @__PURE__ */ l(
"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__ */ t(
"circle",
{
className: "opacity-25",
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
strokeWidth: "4"
}
),
/* @__PURE__ */ t(
"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__ */ t(
h,
{
name: i,
size: e === "default" ? "md" : e === "sm" ? "xs" : "sm"
}
),
s.children,
c && /* @__PURE__ */ t(
h,
{
name: c,
size: e === "default" ? "md" : e === "sm" ? "xs" : "sm"
}
)
]
}
);
}
export {
N as Button,
v as buttonVariants
};