UNPKG

@szum-tech/design-system

Version:

Szum-Tech design system with tailwindcss support

133 lines (129 loc) 4.53 kB
'use strict'; var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs'); var radixUi = require('radix-ui'); var jsxRuntime = require('react/jsx-runtime'); var lucideReact = require('lucide-react'); var tailwindMerge = require('tailwind-merge'); var classVarianceAuthority = require('class-variance-authority'); function Dialog(props) { return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Root, { "data-slot": "dialog", ...props }); } function DialogClose(props) { return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Close, { "data-slot": "dialog-close", ...props }); } var dialogContentVariants = classVarianceAuthority.cva( [ "bg-background border-border fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-1rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded border p-6 shadow-lg duration-200", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 " ], { variants: { width: { xs: "w-xs", sm: "w-sm", md: "w-md", lg: "w-lg", xl: "w-xl", "2xl": "w-2xl", "3xl": "w-3xl", "4xl": "w-4xl", "5xl": "w-5xl", "6xl": "w-6xl", full: "w-full" } }, defaultVariants: { width: "md" } } ); function DialogContent({ className, children, width = "md", showCloseButton = false, ...props }) { return /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Dialog.Portal, { "data-slot": "dialog-portal", children: [ /* @__PURE__ */ jsxRuntime.jsx( radixUi.Dialog.Overlay, { "data-slot": "dialog-overlay", className: "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-background/80 fixed inset-0 z-50 backdrop-blur-xs" } ), /* @__PURE__ */ jsxRuntime.jsxs( radixUi.Dialog.Content, { "data-slot": "dialog-content", className: tailwindMerge.twMerge(dialogContentVariants({ width }), className), ...props, children: [ children, showCloseButton ? /* @__PURE__ */ jsxRuntime.jsxs( radixUi.Dialog.Close, { "data-slot": "dialog-close", className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}), /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" }) ] } ) : null ] } ) ] }); } function DialogTrigger({ ...props }) { return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Trigger, { "data-slot": "dialog-trigger", ...props }); } function DialogHeader({ className, ...props }) { return /* @__PURE__ */ jsxRuntime.jsx( "div", { "data-slot": "dialog-header", className: chunkH2BWO3SI_cjs.cn("flex flex-col gap-2 text-center sm:text-left", className), ...props } ); } function DialogFooter({ className, ...props }) { return /* @__PURE__ */ jsxRuntime.jsx( "div", { "data-slot": "dialog-footer", className: chunkH2BWO3SI_cjs.cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props } ); } function DialogTitle({ className, ...props }) { return /* @__PURE__ */ jsxRuntime.jsx( radixUi.Dialog.Title, { "data-slot": "dialog-title", className: chunkH2BWO3SI_cjs.cn("text-lg leading-none font-semibold", className), ...props } ); } function DialogDescription({ className, ...props }) { return /* @__PURE__ */ jsxRuntime.jsx( radixUi.Dialog.Description, { "data-slot": "dialog-description", className: chunkH2BWO3SI_cjs.cn("text-muted-foreground text-sm", className), ...props } ); } exports.Dialog = Dialog; exports.DialogClose = DialogClose; exports.DialogContent = DialogContent; exports.DialogDescription = DialogDescription; exports.DialogFooter = DialogFooter; exports.DialogHeader = DialogHeader; exports.DialogTitle = DialogTitle; exports.DialogTrigger = DialogTrigger;