@szum-tech/design-system/dist/chunk-IV5F734M.js

Szum-Tech design system with tailwindcss support

import { cn } from './chunk-ZD2QRAOX.js';
import { Dialog as Dialog$1 } from 'radix-ui';
import { twMerge } from 'tailwind-merge';
import { Cross1Icon } from '@radix-ui/react-icons';
import { cva } from 'class-variance-authority';
import { jsxs, jsx } from 'react/jsx-runtime';

var Dialog = Dialog$1.Root;
var DialogClose = Dialog$1.Close;
var dialogContentStyles = cva(
  [
    "bg-app-foreground fixed left-1/2 top-1/2 z-50 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col rounded border border-gray-800 p-4 shadow-lg",
    "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%] duration-200"
  ],
  {
    variants: {
      width: {
        xs: "max-w-xs",
        sm: "max-w-sm",
        md: "max-w-md",
        lg: "max-w-lg",
        xl: "max-w-xl",
        "2xl": "max-w-2xl",
        "3xl": "max-w-3xl",
        "4xl": "max-w-4xl",
        "5xl": "max-w-5xl",
        "6xl": "max-w-6xl",
        full: "max-w-full"
      }
    },
    defaultVariants: {
      width: "md"
    }
  }
);
function DialogContent({ className, children, width = "md", ...props }) {
  return /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [
    /* @__PURE__ */ jsx(
      Dialog$1.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-xs",
        ...props
      }
    ),
    /* @__PURE__ */ jsxs(Dialog$1.Content, { "aria-modal": "true", className: twMerge(dialogContentStyles({ width }), className), ...props, children: [
      children,
      /* @__PURE__ */ jsxs(Dialog$1.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__ */ jsx(Cross1Icon, { className: "size-4" }),
        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close dialog" })
      ] })
    ] })
  ] });
}
var DialogTrigger = Dialog$1.Trigger;
function DialogHeader({ className, ...props }) {
  return /* @__PURE__ */ jsx("div", { className: cn("mb-4 flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
}
function DialogFooter({ className, ...props }) {
  return /* @__PURE__ */ jsx("div", { className: cn("mt-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props });
}
function DialogTitle({ className, ...props }) {
  return /* @__PURE__ */ jsx(Dialog$1.Title, { className: cn("text-heading-6", className), ...props });
}
function DialogDescription({ className, ...props }) {
  return /* @__PURE__ */ jsx(Dialog$1.Description, { className: cn("text-body-2 text-gray-300", className), ...props });
}

export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };