@calliopelabs/ui 0.5.0 → 0.6.0

package/dist/index.d.ts

@@ -40,6 +40,7 @@ export { ErrorState, type ErrorStateProps } from "./states/ErrorState.js";
 export { LoadingState, type LoadingStateProps } from "./states/LoadingState.js";
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "./overlays/Dialog.js";
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from "./overlays/Drawer.js";
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "./overlays/AlertDialog.js";
 export { ConfirmDialog, type ConfirmDialogProps, type ConfirmReason, } from "./overlays/ConfirmDialog.js";
 export { Button, buttonVariants, type ButtonProps } from "./primitives/Button.js";
 export { Input } from "./primitives/Input.js";

package/dist/index.js

@@ -50,6 +50,7 @@ export { LoadingState } from "./states/LoadingState.js";
 // Overlays
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "./overlays/Dialog.js";
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from "./overlays/Drawer.js";
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "./overlays/AlertDialog.js";
 export { ConfirmDialog, } from "./overlays/ConfirmDialog.js";
 // Primitives
 export { Button, buttonVariants } from "./primitives/Button.js";

package/dist/overlays/AlertDialog.d.ts

@@ -0,0 +1,22 @@
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import type * as React from "react";
+import { Button } from "../primitives/Button.js";
+/**
+ * The parts of a confirmation that needs more than ConfirmDialog holds: a
+ * preview of what the action touches, a typed check, a choice. Prefer
+ * ConfirmDialog when a title, a description and an optional reason will do;
+ * it brings the pending state and the error feedback. The scrim does not
+ * close an alert dialog; Escape and Cancel do.
+ */
+export declare function AlertDialog(props: React.ComponentProps<typeof AlertDialogPrimitive.Root>): React.JSX.Element;
+export declare function AlertDialogTrigger(props: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): React.JSX.Element;
+export declare function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>): React.JSX.Element;
+export declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): React.JSX.Element;
+export declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): React.JSX.Element;
+type ButtonLook = Pick<React.ComponentProps<typeof Button>, "variant" | "size">;
+/** Closes the dialog when clicked; call `event.preventDefault()` to hold it open. */
+export declare function AlertDialogAction({ className, variant, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action> & ButtonLook): React.JSX.Element;
+export declare function AlertDialogCancel({ className, variant, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> & ButtonLook): React.JSX.Element;
+export {};

package/dist/overlays/AlertDialog.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+import { Button } from "../primitives/Button.js";
+import { overlayClassName } from "./Dialog.js";
+/**
+ * The parts of a confirmation that needs more than ConfirmDialog holds: a
+ * preview of what the action touches, a typed check, a choice. Prefer
+ * ConfirmDialog when a title, a description and an optional reason will do;
+ * it brings the pending state and the error feedback. The scrim does not
+ * close an alert dialog; Escape and Cancel do.
+ */
+export function AlertDialog(props) {
+    return _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+}
+export function AlertDialogTrigger(props) {
+    return _jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+}
+export function AlertDialogContent({ className, ...props }) {
+    return (_jsxs(AlertDialogPrimitive.Portal, { children: [_jsx(AlertDialogPrimitive.Overlay, { "data-slot": "alert-dialog-overlay", className: overlayClassName("bg-black/10") }), _jsx(AlertDialogPrimitive.Content, { "data-slot": "alert-dialog-content", className: cn("fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-xs -translate-x-1/2 -translate-y-1/2 grid-cols-[minmax(0,1fr)] gap-4 overflow-y-auto rounded-xl bg-background p-4 text-foreground shadow-lg ring-1 ring-foreground/10 outline-none data-[state=closed]:animate-cui-pop-out data-[state=open]:animate-cui-pop-in sm:max-w-sm", className), ...props })] }));
+}
+export function AlertDialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn("grid place-items-center gap-1.5 text-center sm:place-items-start sm:text-left", className), ...props }));
+}
+export function AlertDialogFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-footer", className: cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end", className), ...props }));
+}
+export function AlertDialogTitle({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Title, { "data-slot": "alert-dialog-title", className: cn("font-head text-base font-semibold [overflow-wrap:anywhere]", className), ...props }));
+}
+export function AlertDialogDescription({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", className: cn("text-sm [overflow-wrap:anywhere] text-muted-foreground", className), ...props }));
+}
+/** Closes the dialog when clicked; call `event.preventDefault()` to hold it open. */
+export function AlertDialogAction({ className, variant = "default", size = "default", ...props }) {
+    return (_jsx(Button, { variant: variant, size: size, asChild: true, children: _jsx(AlertDialogPrimitive.Action, { "data-slot": "alert-dialog-action", className: className, ...props }) }));
+}
+export function AlertDialogCancel({ className, variant = "outline", size = "default", ...props }) {
+    return (_jsx(Button, { variant: variant, size: size, asChild: true, children: _jsx(AlertDialogPrimitive.Cancel, { "data-slot": "alert-dialog-cancel", className: className, ...props }) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calliopelabs/ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Calliope AI shared operator UI: app shell, navigation, page frame, data table and list patterns, status colours, design tokens and appearance for Astrolift AI and Zentinelle AI.",
   "keywords": [
     "calliope-ai",