UNPKG

@camped-ui/dialog

Version:

Dialog component is a versatile and flexible window that overlays the primary window or another dialog, rendering the content underneath inert. It is commonly used to display important information, forms, or interactive content without navigating away fro

87 lines 6.27 kB
"use client"; "use strict"; var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { if (k2 === undefined) k2 = k; var desc = Object.getOwnPropertyDescriptor(m, k); if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { desc = { enumerable: true, get: function() { return m[k]; } }; } Object.defineProperty(o, k2, desc); }) : (function(o, m, k, k2) { if (k2 === undefined) k2 = k; o[k2] = m[k]; })); var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { Object.defineProperty(o, "default", { enumerable: true, value: v }); }) : function(o, v) { o["default"] = v; }); var __importStar = (this && this.__importStar) || function (mod) { if (mod && mod.__esModule) return mod; var result = {}; if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); __setModuleDefault(result, mod); return result; }; var __rest = (this && this.__rest) || function (s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; }; Object.defineProperty(exports, "__esModule", { value: true }); exports.DialogDescription = exports.DialogTitle = exports.DialogFooter = exports.DialogHeader = exports.DialogContent = exports.DialogTrigger = exports.DialogClose = exports.DialogOverlay = exports.DialogPortal = exports.Dialog = void 0; const jsx_runtime_1 = require("react/jsx-runtime"); const React = __importStar(require("react")); const DialogPrimitive = __importStar(require("@radix-ui/react-dialog")); const lib_1 = require("@camped-ui/lib"); const Dialog = DialogPrimitive.Root; exports.Dialog = Dialog; const DialogTrigger = DialogPrimitive.Trigger; exports.DialogTrigger = DialogTrigger; const DialogPortal = DialogPrimitive.Portal; exports.DialogPortal = DialogPortal; const DialogClose = DialogPrimitive.Close; exports.DialogClose = DialogClose; const DialogOverlay = React.forwardRef((_a, ref) => { var { className } = _a, props = __rest(_a, ["className"]); return ((0, jsx_runtime_1.jsx)(DialogPrimitive.Overlay, Object.assign({ ref: ref, className: (0, lib_1.cn)("fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className) }, props))); }); exports.DialogOverlay = DialogOverlay; DialogOverlay.displayName = DialogPrimitive.Overlay.displayName; const DialogContent = React.forwardRef((_a, ref) => { var { className, children } = _a, props = __rest(_a, ["className", "children"]); return ((0, jsx_runtime_1.jsxs)(DialogPortal, { children: [(0, jsx_runtime_1.jsx)(DialogOverlay, {}), (0, jsx_runtime_1.jsxs)(DialogPrimitive.Content, Object.assign({ ref: ref, className: (0, lib_1.cn)("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className) }, props, { children: [children, (0, jsx_runtime_1.jsxs)(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [(0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", children: [(0, jsx_runtime_1.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), (0, jsx_runtime_1.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Close" })] })] }))] })); }); exports.DialogContent = DialogContent; DialogContent.displayName = DialogPrimitive.Content.displayName; const DialogHeader = (_a) => { var { className } = _a, props = __rest(_a, ["className"]); return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, lib_1.cn)("flex flex-col space-y-1.5 text-center sm:text-left", className) }, props))); }; exports.DialogHeader = DialogHeader; DialogHeader.displayName = "DialogHeader"; const DialogFooter = (_a) => { var { className } = _a, props = __rest(_a, ["className"]); return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, lib_1.cn)("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className) }, props))); }; exports.DialogFooter = DialogFooter; DialogFooter.displayName = "DialogFooter"; const DialogTitle = React.forwardRef((_a, ref) => { var { className } = _a, props = __rest(_a, ["className"]); return ((0, jsx_runtime_1.jsx)(DialogPrimitive.Title, Object.assign({ ref: ref, className: (0, lib_1.cn)("text-lg font-semibold leading-none tracking-tight", className) }, props))); }); exports.DialogTitle = DialogTitle; DialogTitle.displayName = DialogPrimitive.Title.displayName; const DialogDescription = React.forwardRef((_a, ref) => { var { className } = _a, props = __rest(_a, ["className"]); return ((0, jsx_runtime_1.jsx)(DialogPrimitive.Description, Object.assign({ ref: ref, className: (0, lib_1.cn)("text-sm text-muted-foreground", className) }, props))); }); exports.DialogDescription = DialogDescription; DialogDescription.displayName = DialogPrimitive.Description.displayName; //# sourceMappingURL=index.js.map