UNPKG

@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
"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 };