@szum-tech/design-system/dist/chunk-6VVDXGYO.cjs

Szum-Tech design system with tailwindcss support

'use strict';

var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
var radixUi = require('radix-ui');
var tailwindMerge = require('tailwind-merge');
var reactIcons = require('@radix-ui/react-icons');
var classVarianceAuthority = require('class-variance-authority');
var jsxRuntime = require('react/jsx-runtime');

var Dialog = radixUi.Dialog.Root;
var DialogClose = radixUi.Dialog.Close;
var dialogContentStyles = classVarianceAuthority.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__ */ 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-xs",
        ...props
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Dialog.Content, { "aria-modal": "true", className: tailwindMerge.twMerge(dialogContentStyles({ width }), 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 dialog" })
      ] })
    ] })
  ] });
}
var DialogTrigger = radixUi.Dialog.Trigger;
function DialogHeader({ className, ...props }) {
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkH2BWO3SI_cjs.cn("mb-4 flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
}
function DialogFooter({ className, ...props }) {
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkH2BWO3SI_cjs.cn("mt-4 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, { className: chunkH2BWO3SI_cjs.cn("text-heading-6", className), ...props });
}
function DialogDescription({ className, ...props }) {
  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Description, { className: chunkH2BWO3SI_cjs.cn("text-body-2 text-gray-300", 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;