laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
117 lines (116 loc) • 2.95 kB
JavaScript
"use client";
import { jsx as a } from "react/jsx-runtime";
import { designTokens as c } from "../design-tokens.js";
import { cn as o } from "../../lib/utils.js";
import * as n from "react";
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 x({ className: r, size: t = "default", ...e }) {
return /* @__PURE__ */ a(s.Provider, { value: { size: t }, children: /* @__PURE__ */ a(
"div",
{
"data-slot": "card",
className: o(
`bg-d-card text-d-card-foreground border-d-border flex flex-col border shadow-sm ${d[t].py} ${d[t].gap}`,
c.radius.lg.replace("rounded-", "rounded-xl"),
// Card uses XL radius by default in shadcn usually, but here it was XL. Let's keep it XL or standard? The original was rounded-xl. designTokens.radius.lg is rounded-lg.
// Let's stick to original visual intent but maybe update designTokens to include XL if needed?
// For now, I will leave it as rounded-xl to not break the design, or use designTokens.radius.lg if we want to standardize.
// User asked to "standardize". Usually Cards have slightly larger radius than inputs.
// Let's use rounded-xl hardcoded for now as it is a "Container" not an input.
"rounded-xl",
r
),
...e
}
) });
}
function f({ className: r, ...t }) {
const { size: e } = n.useContext(s);
return /* @__PURE__ */ a(
"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 border-d-border`,
r
),
...t
}
);
}
function m({ className: r, ...t }) {
return /* @__PURE__ */ a(
"div",
{
"data-slot": "card-title",
className: o("leading-none font-semibold", r),
...t
}
);
}
function g({ className: r, ...t }) {
return /* @__PURE__ */ a(
"div",
{
"data-slot": "card-description",
className: o("text-d-secondary-foreground text-sm", r),
...t
}
);
}
function b({ className: r, ...t }) {
const { size: e } = n.useContext(s);
return /* @__PURE__ */ a(
"div",
{
"data-slot": "card-content",
className: o(d[e].px, r),
...t
}
);
}
function C({ className: r, ...t }) {
const { size: e } = n.useContext(s);
return /* @__PURE__ */ a(
"div",
{
"data-slot": "card-footer",
className: o(
`flex items-center ${d[e].px} [.border-t]:pt-6`,
r
),
...t
}
);
}
export {
x as Card,
b as CardContent,
g as CardDescription,
C as CardFooter,
f as CardHeader,
m as CardTitle
};