@vela-ui/react/dist/chunk-X5RETTH3.mjs

Vela UI React components

import {
  ModalContent
} from "./chunk-G6XMJO7P.mjs";
import {
  cn,
  composeTailwindRenderProps
} from "./chunk-OCN72JL6.mjs";
import {
  CloseIcon
} from "./chunk-OR7JSSSN.mjs";

// src/components/dialog.tsx
import {
  Button as AriaButton,
  Dialog as AriaDialog,
  DialogTrigger as AriaDialogTrigger,
  Heading as AriaHeading,
  Text as AriaText,
  composeRenderProps
} from "react-aria-components";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var DialogTrigger = AriaDialogTrigger;
var Dialog = (props) => /* @__PURE__ */ jsx(ModalContent, { ...props });
var DialogContent = ({
  role = "dialog",
  className,
  children,
  showCloseButton = true,
  ...props
}) => {
  return /* @__PURE__ */ jsx(
    AriaDialog,
    {
      role,
      "data-slot": "dialog-content",
      className: cn("relative flex h-full w-full flex-col p-6 outline-hidden", className),
      ...props,
      children: composeRenderProps(children, (children2) => /* @__PURE__ */ jsxs(Fragment, { children: [
        children2,
        showCloseButton && /* @__PURE__ */ jsx(DialogCloseIcon, {})
      ] }))
    }
  );
};
var DialogHeader = ({ className, ...props }) => {
  return /* @__PURE__ */ jsx(
    "div",
    {
      "data-slot": "dialog-header",
      className: cn("mb-4 flex flex-col gap-2 text-center sm:text-left", className),
      ...props
    }
  );
};
var DialogFooter = ({ className, ...props }) => {
  return /* @__PURE__ */ jsx(
    "div",
    {
      "data-slot": "dialog-footer",
      className: cn("mt-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
      ...props
    }
  );
};
var DialogTitle = ({ className, ...props }) => /* @__PURE__ */ jsx(
  AriaHeading,
  {
    slot: "title",
    "data-slot": "dialog-title",
    className: cn("text-lg leading-none font-semibold", className),
    ...props
  }
);
var DialogDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(
  AriaText,
  {
    slot: "description",
    "data-slot": "dialog-description",
    className: cn("text-muted-foreground text-sm", className),
    ...props
  }
);
var DialogCloseIcon = ({ className, ...props }) => /* @__PURE__ */ jsxs(
  AriaButton,
  {
    "aria-label": "Close",
    slot: "close",
    "data-slot": "dialog-close",
    className: composeTailwindRenderProps(
      className,
      "ring-offset-background focus:ring-ring 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"
    ),
    ...props,
    children: [
      /* @__PURE__ */ jsx(CloseIcon, {}),
      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
    ]
  }
);

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