laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
109 lines (108 loc) • 2.23 kB
JavaScript
"use client";
import { jsx as e } from "react/jsx-runtime";
import * as n from "react";
import { cn as o } from "../../lib/utils.js";
const s = n.createContext({
size: "default"
}), d = {
sm: {
py: "py-3",
px: "px-3",
gap: "gap-4"
},
default: {
py: "py-6",
px: "px-6",
gap: "gap-6"
},
lg: {
py: "py-8",
px: "px-8",
gap: "gap-8"
},
none: {
py: "",
px: "",
gap: ""
}
};
function l({ className: r, size: t = "default", ...a }) {
return /* @__PURE__ */ e(s.Provider, { value: { size: t }, children: /* @__PURE__ */ e(
"div",
{
"data-slot": "card",
className: o(
`bg-d-card text-d-card-foreground border-d-border flex flex-col rounded-xl border shadow-sm ${d[t].py} ${d[t].gap}`,
r
),
...a
}
) });
}
function u({ className: r, ...t }) {
const { size: a } = n.useContext(s);
return /* @__PURE__ */ e(
"div",
{
"data-slot": "card-header",
className: o(
`@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 ${d[a].px} has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 border-d-border`,
r
),
...t
}
);
}
function x({ className: r, ...t }) {
return /* @__PURE__ */ e(
"div",
{
"data-slot": "card-title",
className: o("leading-none font-semibold", r),
...t
}
);
}
function f({ className: r, ...t }) {
return /* @__PURE__ */ e(
"div",
{
"data-slot": "card-description",
className: o("text-d-secondary-foreground text-sm", r),
...t
}
);
}
function m({ className: r, ...t }) {
const { size: a } = n.useContext(s);
return /* @__PURE__ */ e(
"div",
{
"data-slot": "card-content",
className: o(d[a].px, r),
...t
}
);
}
function g({ className: r, ...t }) {
const { size: a } = n.useContext(s);
return /* @__PURE__ */ e(
"div",
{
"data-slot": "card-footer",
className: o(
`flex items-center ${d[a].px} [.border-t]:pt-6`,
r
),
...t
}
);
}
export {
l as Card,
m as CardContent,
f as CardDescription,
g as CardFooter,
u as CardHeader,
x as CardTitle
};