@kopexa/alert-dialog/dist/chunk-5OQQOE47.mjs

A modal dialog that interrupts the user with important content and expects a response.

"use client";

// src/alert-dialog.tsx
import { AlertDialog as AlertDialogPrimitive } from "@base-ui-components/react/alert-dialog";
import { createContext } from "@kopexa/react-utils";
import { cn } from "@kopexa/shared-utils";
import { alertDialog, button } from "@kopexa/theme";
import { jsx, jsxs } from "react/jsx-runtime";
var [Provider, useAlertDialogContext] = createContext();
function AlertDialogRoot(props) {
  const styles = alertDialog();
  return /* @__PURE__ */ jsx(Provider, { value: { styles }, children: /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props }) });
}
function AlertDialogTrigger(props) {
  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
}
function AlertDialogPortal({ ...props }) {
  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
}
function AlertDialogOverlay({
  className,
  ...props
}) {
  const { styles } = useAlertDialogContext();
  return /* @__PURE__ */ jsx(
    AlertDialogPrimitive.Backdrop,
    {
      "data-slot": "alert-dialog-overlay",
      className: cn(styles.overlay(), className),
      ...props
    }
  );
}
function AlertDialogContent({
  className,
  ...props
}) {
  const { styles } = useAlertDialogContext();
  return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
    /* @__PURE__ */ jsx(
      AlertDialogPrimitive.Popup,
      {
        "data-slot": "alert-dialog-content",
        className: cn(styles.content(), className),
        ...props
      }
    )
  ] });
}
function AlertDialogHeader({
  className,
  ...props
}) {
  const { styles } = useAlertDialogContext();
  return /* @__PURE__ */ jsx(
    "div",
    {
      "data-slot": "alert-dialog-header",
      className: styles.header(className),
      ...props
    }
  );
}
function AlertDialogFooter({
  className,
  ...props
}) {
  const { styles } = useAlertDialogContext();
  return /* @__PURE__ */ jsx(
    "div",
    {
      "data-slot": "alert-dialog-footer",
      className: styles.footer(className),
      ...props
    }
  );
}
function AlertDialogTitle({
  className,
  ...props
}) {
  const { styles } = useAlertDialogContext();
  return /* @__PURE__ */ jsx(
    AlertDialogPrimitive.Title,
    {
      "data-slot": "alert-dialog-title",
      className: cn(styles.title(), className),
      ...props
    }
  );
}
function AlertDialogDescription({
  className,
  ...props
}) {
  const { styles } = useAlertDialogContext();
  return /* @__PURE__ */ jsx(
    AlertDialogPrimitive.Description,
    {
      "data-slot": "alert-dialog-description",
      className: cn(styles.description(), className),
      ...props
    }
  );
}
function AlertDialogAction({
  className,
  color,
  variant,
  ...props
}) {
  return /* @__PURE__ */ jsx(
    AlertDialogPrimitive.Close,
    {
      className: cn(button({ color, variant }), className),
      ...props
    }
  );
}
function AlertDialogCancel({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsx(
    AlertDialogPrimitive.Close,
    {
      className: cn(button({ variant: "ghost" }), className),
      ...props
    }
  );
}

export {
  AlertDialogRoot,
  AlertDialogTrigger,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel
};