laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
116 lines (115 loc) • 3.87 kB
JavaScript
"use client";
import { jsx as r, jsxs as e, Fragment as c } from "react/jsx-runtime";
import { cva as A } from "../../node_modules/class-variance-authority/dist/index.js";
import { designTokens as j } from "../design-tokens.js";
import { cn as t } from "../../lib/utils.js";
import { Card as y, CardHeader as b, CardTitle as S, CardDescription as T, CardAction as V, CardContent as g, CardFooter as D } from "./card.js";
import { Skeleton as s } from "./skeleton.js";
const F = A(
["flex flex-col border shadow-sm rounded-xl", j.focusRingWithin],
{
variants: {
variant: {
default: "bg-d-card text-d-card-foreground border-d-border",
elevated: "bg-d-card text-d-card-foreground border-d-border shadow-md",
outlined: "bg-transparent text-d-foreground border-d-border shadow-none",
ghost: "bg-transparent text-d-foreground border-transparent shadow-none",
flat: "bg-d-muted text-d-foreground border-transparent shadow-none",
interactive: "bg-d-card text-d-card-foreground border-d-border cursor-pointer transition-shadow duration-200 hover:shadow-md hover:border-d-primary/40",
success: "bg-d-success-background text-d-success-foreground border-d-success/30 shadow-none",
warning: "bg-d-warning-background text-d-warning-foreground border-d-warning/30 shadow-none",
destructive: "bg-d-destructive/10 text-d-destructive border-d-destructive/30 shadow-none",
info: "bg-d-primary/10 text-d-primary border-d-primary/30 shadow-none"
}
},
defaultVariants: {
variant: "default"
}
}
);
function R() {
return /* @__PURE__ */ e(c, { children: [
/* @__PURE__ */ r(b, { children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: [
/* @__PURE__ */ r(s, { className: "h-4 w-1/2" }),
/* @__PURE__ */ r(s, { className: "h-3 w-3/4" })
] }) }),
/* @__PURE__ */ e(g, { className: "flex flex-col gap-2", children: [
/* @__PURE__ */ r(s, { className: "h-3 w-full" }),
/* @__PURE__ */ r(s, { className: "h-3 w-full" }),
/* @__PURE__ */ r(s, { className: "h-3 w-4/5" })
] })
] });
}
function I({
header: d,
title: a,
description: n,
body: l,
actions: o,
footer: i,
variant: h = "default",
size: p,
isLoading: x = !1,
showHeaderBorder: f = !1,
showFooterBorder: u = !1,
className: w,
headerClassName: v,
bodyClassName: N,
footerClassName: C,
children: m,
...k
}) {
return /* @__PURE__ */ r(
y,
{
className: t(F({ variant: h }), w),
size: p,
...k,
children: x ? /* @__PURE__ */ r(R, {}) : /* @__PURE__ */ e(c, { children: [
(d || a || n || o) && /* @__PURE__ */ r(
b,
{
className: t(
f && "border-b border-inherit",
v
),
children: d || /* @__PURE__ */ e(c, { children: [
/* @__PURE__ */ e("div", { className: "flex flex-col gap-1.5", children: [
a && /* @__PURE__ */ r(S, { className: "text-base font-semibold", children: a }),
n && /* @__PURE__ */ r(T, { children: n })
] }),
o && /* @__PURE__ */ r(V, { children: o })
] })
}
),
(l ?? m) && /* @__PURE__ */ r(
g,
{
className: t(
"flex flex-col gap-2",
(a || n || d || o) && !f && "pt-0",
u && "border-b border-inherit",
N
),
children: l ?? m
}
),
i && /* @__PURE__ */ r(
D,
{
className: t(
"gap-2",
(a || n || d || o || l) && !u && "pt-0",
C
),
children: i
}
)
] })
}
);
}
export {
I as AppCard,
I as default
};