@szum-tech/design-system
Version:
Szum-Tech design system with tailwindcss support
61 lines (57 loc) • 3.56 kB
JavaScript
;
var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
var radixUi = require('radix-ui');
var reactIcons = require('@radix-ui/react-icons');
var classVarianceAuthority = require('class-variance-authority');
var jsxRuntime = require('react/jsx-runtime');
var Sheet = radixUi.Dialog.Root;
var SheetTrigger = radixUi.Dialog.Trigger;
var SheetClose = radixUi.Dialog.Close;
var sheetContentStyles = classVarianceAuthority.cva(
"bg-app-foreground data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col border-gray-800 p-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
{
variants: {
side: {
top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b",
bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t",
left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
right: "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm"
}
},
defaultVariants: {
side: "right"
}
}
);
function SheetContent({ side = "right", className, children, ...props }) {
return /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Dialog.Portal, { children: [
/* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Overlay, { className: "bg-app-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm" }),
/* @__PURE__ */ jsxRuntime.jsxs(radixUi.Dialog.Content, { className: chunkH2BWO3SI_cjs.cn(sheetContentStyles({ side }), className), ...props, children: [
children,
/* @__PURE__ */ jsxRuntime.jsxs(radixUi.Dialog.Close, { className: "focus:ring-ring ring-primary-500 ring-offset-app-foreground data-[state=open]:bg-app-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none", children: [
/* @__PURE__ */ jsxRuntime.jsx(reactIcons.Cross1Icon, { className: "size-4" }),
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
] })
] })
] });
}
function SheetHeader({ className, ...props }) {
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkH2BWO3SI_cjs.cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
}
function SheetFooter({ className, ...props }) {
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkH2BWO3SI_cjs.cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
}
function SheetTitle({ className, ...props }) {
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Title, { className: chunkH2BWO3SI_cjs.cn("typography-heading-6", className), ...props });
}
function SheetDescription({ className, ...props }) {
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Description, { className: chunkH2BWO3SI_cjs.cn("typography-body-2 text-gray-300", className), ...props });
}
exports.Sheet = Sheet;
exports.SheetClose = SheetClose;
exports.SheetContent = SheetContent;
exports.SheetDescription = SheetDescription;
exports.SheetFooter = SheetFooter;
exports.SheetHeader = SheetHeader;
exports.SheetTitle = SheetTitle;
exports.SheetTrigger = SheetTrigger;