@kopexa/alert-dialog
Version: 
A modal dialog that interrupts the user with important content and expects a response.
146 lines (143 loc) • 3.37 kB
JavaScript
"use client";
// src/alert-dialog.tsx
import { createContext } from "@kopexa/react-utils";
import { alertDialog, button } from "@kopexa/theme";
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
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.Overlay,
    {
      "data-slot": "alert-dialog-overlay",
      className: styles.overlay(className),
      ...props
    }
  );
}
function AlertDialogContent({
  className,
  ...props
}) {
  const { styles } = useAlertDialogContext();
  return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
    /* @__PURE__ */ jsx(
      AlertDialogPrimitive.Content,
      {
        "data-slot": "alert-dialog-content",
        className: 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: styles.title(className),
      ...props
    }
  );
}
function AlertDialogDescription({
  className,
  ...props
}) {
  const { styles } = useAlertDialogContext();
  return /* @__PURE__ */ jsx(
    AlertDialogPrimitive.Description,
    {
      "data-slot": "alert-dialog-description",
      className: styles.description(className),
      ...props
    }
  );
}
function AlertDialogAction({
  className,
  color,
  variant,
  ...props
}) {
  return /* @__PURE__ */ jsx(
    AlertDialogPrimitive.Action,
    {
      className: button({ className, color, variant }),
      ...props
    }
  );
}
function AlertDialogCancel({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsx(
    AlertDialogPrimitive.Cancel,
    {
      className: button({ variant: "ghost", className }),
      ...props
    }
  );
}
export {
  AlertDialogRoot,
  AlertDialogTrigger,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel
};