@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 {
  cn,
  createContext,
  useTVUnstyled
} from "@mijn-ui/react-core";
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
import { tv } from "tailwind-variants";
import { jsx, jsxs } from "react/jsx-runtime";
var alertDialogStyles = tv({
  slots: {
    base: "",
    trigger: "",
    overlay: [
      "fixed inset-0 z-50 bg-black/80",
      "data-[state=open]:animate-in data-[state=open]:fade-in-0",
      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
    ],
    contentWrapper: "fixed inset-0 z-50 flex items-center justify-center",
    content: [
      "border-outline-default bg-bg-default-alt flex w-full max-w-lg flex-col gap-2 rounded-xl border p-6 shadow-lg",
      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-90",
      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0  data-[state=closed]:zoom-out-90"
    ],
    header: "flex flex-col gap-2 text-center sm:text-left",
    footer: "flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2",
    title: "text-base font-semibold",
    description: "text-fg-secondary text-sm",
    action: [
      "inline-flex items-center justify-center gap-0.5 text-sm font-medium outline-none duration-300 ease-in-out focus-visible:ring-2 focus-visible:ring-offset-bg-default focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-9 rounded-md px-3",
      "bg-bg-brand text-on-bg-brand hover:bg-bg-brand/80 focus-visible:ring-outline-brand active:bg-bg-brand/70 shadow-xs"
    ],
    cancel: [
      "inline-flex items-center justify-center gap-0.5 text-sm font-medium outline-none duration-300 ease-in-out focus-visible:ring-2 focus-visible:ring-offset-bg-default focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-9 rounded-md px-3",
      "text-fg-default hover:bg-bg-secondary focus-visible:ring-outline-brand active:bg-bg-secondary/70 focus-visible:ring-offset-2"
    ]
  }
});
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, { "data-slot": "alert-dialog", ...props }) });
};
var AlertDialogTrigger = ({
  unstyled,
  className,
  ...props
}) => {
  const { trigger, classNames } = useAlertDialogStyles(unstyled);
  return /* @__PURE__ */ jsx(
    AlertDialogPrimitive.Trigger,
    {
      "data-slot": "alert-dialog-trigger",
      className: trigger({ className: cn(classNames?.trigger, className) }),
      ...props
    }
  );
};
var AlertDialogOverlay = ({
  className,
  unstyled,
  ...props
}) => {
  const { overlay, classNames } = useAlertDialogStyles(unstyled);
  return /* @__PURE__ */ jsx(
    AlertDialogPrimitive.Overlay,
    {
      "data-slot": "alert-dialog-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, { "data-slot": "alert-dialog-portal", children: [
    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
    /* @__PURE__ */ jsx(
      "div",
      {
        className: styles.contentWrapper({
          className: classNames?.contentWrapper
        }),
        children: /* @__PURE__ */ jsx(
          AlertDialogPrimitive.Content,
          {
            "data-slot": "alert-dialog-content",
            className: content({
              className: cn(classNames?.content, className)
            }),
            ...props
          }
        )
      }
    )
  ] });
};
var AlertDialogHeader = ({
  unstyled,
  className,
  ...props
}) => {
  const { header, classNames } = useAlertDialogStyles(unstyled);
  return /* @__PURE__ */ jsx(
    "div",
    {
      "data-slot": "alert-dialog-header",
      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",
    {
      "data-slot": "alert-dialog-footer",
      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,
    {
      "data-slot": "alert-dialog-title",
      className: title({ className: cn(classNames?.title, className) }),
      ...props
    }
  );
};
var AlertDialogDescription = ({
  unstyled,
  className,
  ...props
}) => {
  const { description, classNames } = useAlertDialogStyles(unstyled);
  return /* @__PURE__ */ jsx(
    AlertDialogPrimitive.Description,
    {
      "data-slot": "alert-dialog-description",
      className: description({
        className: cn(classNames?.description, className)
      }),
      ...props
    }
  );
};
var AlertDialogAction = ({
  unstyled,
  className,
  ...props
}) => {
  const { action, classNames } = useAlertDialogStyles(unstyled);
  return /* @__PURE__ */ jsx(
    AlertDialogPrimitive.Action,
    {
      "data-slot": "alert-dialog-action",
      className: action({ className: cn(classNames?.action, className) }),
      ...props
    }
  );
};
var AlertDialogCancel = ({
  unstyled,
  className,
  ...props
}) => {
  const { cancel, classNames } = useAlertDialogStyles(unstyled);
  return /* @__PURE__ */ jsx(
    AlertDialogPrimitive.Cancel,
    {
      "data-slot": "alert-dialog-cancel",
      className: cancel({ className: cn(classNames?.cancel, className) }),
      ...props
    }
  );
};
export {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogOverlay,
  AlertDialogPortal,
  AlertDialogTitle,
  AlertDialogTrigger,
  alertDialogStyles,
  useAlertDialogStyles
};