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