laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
85 lines (84 loc) • 3.46 kB
JavaScript
"use client";
import { jsx as e, jsxs as v } from "react/jsx-runtime";
import { Root as p } from "../../node_modules/@radix-ui/react-slot/dist/index.js";
import { cva as h } from "../../node_modules/class-variance-authority/dist/index.js";
import { designTokens as t } from "../design-tokens.js";
import { cn as a } from "../../lib/utils.js";
import { Icon as u } from "./icon.js";
const b = h(
a(
t.badge.base,
t.radius.default,
t.focusRing,
"transition-[color,box-shadow] overflow-hidden",
"[&>svg]:size-3 [&>svg]:pointer-events-none"
),
{
variants: {
variant: {
default: "border-transparent bg-d-primary text-d-primary-foreground [a&]:hover:bg-d-primary/90",
destructive: "border-transparent bg-d-destructive text-d-destructive-foreground [a&]:hover:bg-d-destructive/90 focus-visible:ring-d-destructive/20",
warning: "border-transparent bg-d-warning-background text-d-warning-foreground [a&]:hover:bg-d-warning-background/90",
success: "border-transparent bg-d-success-background text-d-success-foreground [a&]:hover:bg-d-success-background/90",
outline: "text-d-foreground [a&]:hover:bg-d-accent [a&]:hover:text-d-accent-foreground [a&]:hover:border-d-foreground/80",
"outline-primary": "text-d-primary border-d-primary [a&]:hover:text-d-primary [a&]:hover:bg-d-primary/10 [a&]:hover:border-d-primary/80",
"outline-destructive": "text-d-destructive border-d-destructive [a&]:hover:text-d-destructive [a&]:hover:bg-d-destructive/10 [a&]:hover:border-d-destructive/80",
"outline-warning": "text-d-warning border-d-warning [a&]:hover:text-d-warning [a&]:hover:bg-d-warning-background/10 [a&]:hover:border-d-warning/80",
"outline-success": "text-d-success border-d-success [a&]:hover:text-d-success [a&]:hover:bg-d-success-background/10 [a&]:hover:border-d-success/80",
secondary: "border-transparent bg-d-secondary text-d-secondary-foreground [a&]:hover:bg-d-secondary/90",
ghost: "border-transparent bg-transparent text-d-secondary-foreground [a&]:hover:bg-d-secondary/90",
"ghost-destructive": "border-transparent bg-transparent text-d-destructive [a&]:hover:bg-d-destructive/10",
"ghost-accent": "border-transparent bg-transparent text-d-primary [a&]:hover:bg-d-primary/10",
"ghost-warning": "border-transparent bg-transparent text-d-warning [a&]:hover:bg-d-warning/10",
"ghost-success": "border-transparent bg-transparent text-d-success [a&]:hover:bg-d-success/10",
link: "border-transparent bg-transparent text-d-primary underline-offset-4 hover:underline cursor-pointer"
}
},
defaultVariants: {
variant: "default"
}
}
);
function k({
className: o,
variant: d,
asChild: n = !1,
disabled: s = !1,
iconLeft: c,
iconRight: i,
...r
}) {
const g = n ? p : "span";
return n ? /* @__PURE__ */ e(
g,
{
"data-slot": "badge",
className: a(
b({ variant: d }),
s && "cursor-not-allowed opacity-50",
o
),
...r
}
) : /* @__PURE__ */ v(
g,
{
"data-slot": "badge",
className: a(
b({ variant: d }),
s && "cursor-not-allowed opacity-50",
o
),
...r,
children: [
c && /* @__PURE__ */ e(u, { name: c }),
r.children,
i && /* @__PURE__ */ e(u, { name: i })
]
}
);
}
export {
k as Badge,
b as badgeVariants
};