UNPKG

@szum-tech/design-system

Version:

Szum-Tech design system with tailwindcss support

61 lines (57 loc) 3.56 kB
'use strict'; 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;