laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
112 lines (111 loc) • 4.77 kB
JavaScript
"use client";
import { jsx as r, jsxs as c } from "react/jsx-runtime";
import { Root as v } from "../../node_modules/@radix-ui/react-slot/dist/index.js";
import { cva as m } 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 b = m(
"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 ease-out transform-gpu active:scale-[0.98] active:shadow-sm overflow-hidden relative group",
{
variants: {
variant: {
default: "bg-d-primary text-d-primary-foreground shadow-xs hover:bg-d-primary/90 hover:shadow-d-primary/25 [clip-path:inset(0_round_0.375rem)] before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:translate-x-[-100%] hover:before:translate-x-[100%] before:transition-transform before:duration-700 before:ease-out",
destructive: "bg-d-destructive text-white shadow-xs hover:bg-d-destructive/90 hover:shadow-d-destructive/25 focus-visible:ring-d-destructive/20 dark:focus-visible:ring-d-destructive/40 dark:bg-d-destructive/60 [clip-path:inset(0_round_0.375rem)] before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:translate-x-[-100%] hover:before:translate-x-[100%] before:transition-transform before:duration-700 before:ease-out",
outline: "border bg-d-background shadow-xs hover:bg-d-accent hover:text-d-accent-foreground hover:border-d-accent dark:bg-d-input/30 dark:border-d-input dark:hover:bg-d-input/50",
"outline-primary": "border !border-d-primary bg-d-background shadow-xs text-d-primary/80 hover:!text-d-primary hover:bg-d-primary/5 hover:border-d-primary/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 dark:hover:bg-d-accent",
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 w({
className: o,
variant: a,
size: e,
asChild: n = !1,
iconLeft: d,
iconRight: i,
isLoading: f = !1,
...t
}) {
const s = n ? v : "button";
return n ? /* @__PURE__ */ r(
s,
{
"data-slot": "button",
className: l(b({ variant: a, size: e, className: o })),
...t
}
) : /* @__PURE__ */ c(
s,
{
"data-slot": "button",
className: l(b({ variant: a, size: e, className: o }), "relative"),
...t,
children: [
f ? /* @__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"
}
)
]
}
) : d && /* @__PURE__ */ r(
u,
{
name: d,
size: e === "default" ? "md" : e === "sm" ? "xs" : "sm"
}
),
t.children,
i && /* @__PURE__ */ r(
u,
{
name: i,
size: e === "default" ? "md" : e === "sm" ? "xs" : "sm"
}
)
]
}
);
}
export {
w as Button,
b as buttonVariants
};