@mijn-ui/react-alert-dialog/dist/index.js

A modal dialog for alerting users about important actions or decisions.

"use client";

// src/alert-dialog.tsx
import { useTVUnstyled } from "@mijn-ui/react-hooks";
import {
  alertDialogStyles,
  cn
} from "@mijn-ui/react-theme";
import { createContext } from "@mijn-ui/react-utilities";
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
import { jsx, jsxs } from "react/jsx-runtime";
var AlertDialogPortal = AlertDialogPrimitive.Portal;
var [AlertDialogProvider, useAlertDialogContext] = createContext({
  name: "AlertDialogContext",
  strict: true,
  errorMessage: "useAlertDialogContext: `context` is undefined. Seems you forgot to wrap component within <AlertDialog />"
});
var useAlertDialogStyles = (unstyledOverride) => {
  const context = useAlertDialogContext();
  const unstyledSlots = useTVUnstyled(context, unstyledOverride);
  return { ...unstyledSlots, classNames: context.classNames };
};
var AlertDialog = ({
  classNames,
  unstyled = false,
  ...props
}) => {
  const styles = alertDialogStyles();
  return /* @__PURE__ */ jsx(AlertDialogProvider, { value: { unstyled, styles, classNames }, children: /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, { ...props }) });
};
var AlertDialogTrigger = ({
  unstyled,
  className,
  ...props
}) => {
  const { trigger, classNames } = useAlertDialogStyles(unstyled);
  return /* @__PURE__ */ jsx(
    AlertDialogPrimitive.Trigger,
    {
      className: trigger({ className: cn(classNames?.trigger, className) }),
      ...props
    }
  );
};
var AlertDialogOverlay = ({
  className,
  unstyled,
  ...props
}) => {
  const { overlay, classNames } = useAlertDialogStyles(unstyled);
  return /* @__PURE__ */ jsx(
    AlertDialogPrimitive.Overlay,
    {
      className: overlay({ className: cn(classNames?.overlay, className) }),
      ...props
    }
  );
};
var AlertDialogContent = ({
  unstyled,
  className,
  ...props
}) => {
  const { content, classNames } = useAlertDialogStyles(unstyled);
  const { styles } = useAlertDialogContext();
  return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
    /* @__PURE__ */ jsx(
      "div",
      {
        className: styles.contentWrapper({
          className: classNames?.contentWrapper
        }),
        children: /* @__PURE__ */ jsx(
          AlertDialogPrimitive.Content,
          {
            className: content({ className: cn(classNames?.content, className) }),
            ...props
          }
        )
      }
    )
  ] });
};
var AlertDialogHeader = ({
  unstyled,
  className,
  ...props
}) => {
  const { header, classNames } = useAlertDialogStyles(unstyled);
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: header({ className: cn(classNames?.header, className) }),
      ...props
    }
  );
};
AlertDialogHeader.displayName = "AlertDialogHeader";
var AlertDialogFooter = ({
  className,
  unstyled,
  ...props
}) => {
  const { footer, classNames } = useAlertDialogStyles(unstyled);
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: footer({ className: cn(classNames?.footer, className) }),
      ...props
    }
  );
};
AlertDialogFooter.displayName = "AlertDialogFooter";
var AlertDialogTitle = ({
  unstyled,
  className,
  ...props
}) => {
  const { title, classNames } = useAlertDialogStyles(unstyled);
  return /* @__PURE__ */ jsx(
    AlertDialogPrimitive.Title,
    {
      className: title({ className: cn(classNames?.title, className) }),
      ...props
    }
  );
};
var AlertDialogDescription = ({
  unstyled,
  className,
  ...props
}) => {
  const { description, classNames } = useAlertDialogStyles(unstyled);
  return /* @__PURE__ */ jsx(
    AlertDialogPrimitive.Description,
    {
      className: description({
        className: cn(classNames?.description, className)
      }),
      ...props
    }
  );
};
var AlertDialogAction = ({
  unstyled,
  className,
  ...props
}) => {
  const { action, classNames } = useAlertDialogStyles(unstyled);
  return /* @__PURE__ */ jsx(
    AlertDialogPrimitive.Action,
    {
      className: action({ className: cn(classNames?.action, className) }),
      ...props
    }
  );
};
var AlertDialogCancel = ({
  unstyled,
  className,
  ...props
}) => {
  const { cancel, classNames } = useAlertDialogStyles(unstyled);
  return /* @__PURE__ */ jsx(
    AlertDialogPrimitive.Cancel,
    {
      className: cancel({ className: cn(classNames?.cancel, className) }),
      ...props
    }
  );
};
export {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogOverlay,
  AlertDialogPortal,
  AlertDialogTitle,
  AlertDialogTrigger,
  useAlertDialogStyles
};