@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
114 lines (113 loc) • 3.03 kB
JavaScript
import { jsxs as o, jsx as a } from "react/jsx-runtime";
import { c as s } from "./index-2NvaPZWc.mjs";
import { sizeToMaxWidthRecord as c } from "./utils/tailwind.js";
import d from "./x-0Nj1BYxw.mjs";
import { R as h, C as l, P as m, T as f, a as p, D as g, O as b, b as u } from "./index-DO0S-IqU.mjs";
const G = h, z = f, x = m, D = l, S = ({
className: t,
...e
}) => /* @__PURE__ */ o(
l,
{
"data-slot": "sheet-close",
className: s(
"focus-ring absolute top-4 right-4 opacity-70 transition hover:opacity-100 disabled:pointer-events-none",
t
),
...e,
children: [
/* @__PURE__ */ a(d, { className: "size-4" }),
/* @__PURE__ */ a("span", { className: "sr-only", children: "Close" })
]
}
), v = ({
className: t,
...e
}) => /* @__PURE__ */ a(
b,
{
className: s(
"animate-entrance-fade fixed inset-0 z-50 bg-black/20",
t
),
"data-slot": "sheet-overlay",
...e
}
), O = ["top", "right", "bottom", "left"], y = ({
side: t = "right",
className: e,
size: r = "sm",
children: n,
...i
}) => /* @__PURE__ */ a(
p,
{
className: s(
"bg-surface data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 overflow-y-auto p-4 shadow-lg transition duration-300 [--screenGap:2rem] lg:[--screenGap:3rem]",
t === "right" || t === "left" ? [
"inset-y-0 h-full w-[calc(100vw-var(--screenGap))]",
r && c[r]
] : "inset-x-0 h-auto max-h-[calc(100vh-var(--screenGap))]",
t === "right" ? "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right right-0 border-l" : t === "left" ? "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left left-0 border-r" : t === "top" ? "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top top-0 border-b" : "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom bottom-0 border-t",
e
),
"data-slot": "sheet-content",
...i,
children: n
}
), P = ({ children: t, ...e }) => /* @__PURE__ */ o(x, { children: [
/* @__PURE__ */ a(v, {}),
/* @__PURE__ */ o(y, { ...e, children: [
t,
/* @__PURE__ */ a(S, {})
] })
] }), R = ({ className: t, ...e }) => /* @__PURE__ */ a(
"div",
{
className: s("flex flex-col gap-1.5", t),
"data-slot": "sheet-header",
...e
}
), k = ({ className: t, ...e }) => /* @__PURE__ */ a(
"div",
{
className: s("flex justify-end gap-2", t),
"data-slot": "sheet-footer",
...e
}
), X = ({
className: t,
...e
}) => /* @__PURE__ */ a(
u,
{
className: s("text-foreground font-semibold", t),
"data-slot": "sheet-title",
...e
}
), E = ({
className: t,
...e
}) => /* @__PURE__ */ a(
g,
{
className: s("text-muted-foreground text-sm", t),
"data-slot": "sheet-description",
...e
}
);
export {
G as S,
D as a,
S as b,
P as c,
y as d,
E as e,
k as f,
R as g,
v as h,
x as i,
X as j,
z as k,
O as s
};