@agentero/design-system 0.23.4 → 0.23.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.23.4",
+	"version": "0.23.5",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",

package/src/modal/modal.d.ts

@@ -3,6 +3,7 @@ import { VariantProps } from 'tailwind-variants';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 type RootProps = ComponentProps<typeof DialogPrimitive.Root>;
 type TriggerProps = ComponentProps<typeof DialogPrimitive.Trigger>;
+type ModalVariant = 'dialog' | 'alert';
 export declare const modalRecipe: import('tailwind-variants').TVReturnType<{
     size: {
         md: {
@@ -56,6 +57,14 @@ type ContentProps = ComponentProps<typeof DialogPrimitive.Content> & {
      * Both shrink to the viewport on small screens.
      */
     size?: ModalVariants['size'];
+    /**
+     * `'dialog'` (default) is dismissable: `Escape`, an overlay click, and the
+     * X button in `Modal.Title` all close it. `'alert'` removes all three, so
+     * the only way out is one of the buttons in `Modal.Footer`, and exposes
+     * `role="alertdialog"` to assistive technology. Use it when dismissing
+     * without choosing would leave the user stuck or lose their work.
+     */
+    variant?: ModalVariant;
 };
 type TitleProps = ComponentProps<typeof DialogPrimitive.Title>;
 type BodyProps = ComponentProps<'div'>;
@@ -72,6 +81,10 @@ type CloseProps = ComponentProps<typeof DialogPrimitive.Close>;
  * (right-aligned actions). Open it controlled (`open`/`onOpenChange`) or via
  * `Trigger`; close from inside with `Close asChild` around your cancel button.
  *
+ * For a modal the user has to answer, pass `variant="alert"` to `Content`:
+ * `Escape`, the overlay click and the X button all stop closing it, and it is
+ * announced as an `alertdialog`.
+ *
  * @summary Compound modal dialog over a dimmed overlay
  *
  * @example
@@ -90,6 +103,20 @@ type CloseProps = ComponentProps<typeof DialogPrimitive.Close>;
  * </Modal.Root>
  * ```
  *
+ * @example
+ * ```tsx
+ * // Alert: no Escape, no overlay click, no X — the user must answer.
+ * <Modal.Root open={isOpen}>
+ *   <Modal.Content variant="alert">
+ *     <Modal.Title>Complete your Docusign integration</Modal.Title>
+ *     <Modal.Body>Authorize access to finish connecting your account.</Modal.Body>
+ *     <Modal.Footer>
+ *       <Button onClick={handleAuthorize}>Authorize</Button>
+ *     </Modal.Footer>
+ *   </Modal.Content>
+ * </Modal.Root>
+ * ```
+ *
  * @component
  * @namespace Modal
  */
@@ -103,7 +130,7 @@ export declare const Modal: {
         displayName: string;
     };
     Content: {
-        ({ className, size, children, ...props }: ContentProps): import("react/jsx-runtime").JSX.Element;
+        ({ className, size, variant, children, onEscapeKeyDown, onPointerDownOutside, ...props }: ContentProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Title: {

package/src/modal/modal.js

@@ -4,19 +4,20 @@ import { Button as t } from "../button/button.js";
 import { IconClose as n } from "./icons.js";
 import { tv as r } from "tailwind-variants";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-dialog";
+import { createContext as o, useContext as s } from "react";
+import * as c from "@radix-ui/react-dialog";
 //#region src/modal/modal.tsx
-var s = (e) => /* @__PURE__ */ i(o.Root, {
+var l = (e) => /* @__PURE__ */ i(c.Root, {
 	"data-slot": "modal-root",
 	...e
 });
-s.displayName = "Modal.Root";
-var c = (e) => /* @__PURE__ */ i(o.Trigger, {
+l.displayName = "Modal.Root";
+var u = (e) => /* @__PURE__ */ i(c.Trigger, {
 	"data-slot": "modal-trigger",
 	...e
 });
-c.displayName = "Modal.Trigger";
-var l = r({
+u.displayName = "Modal.Trigger";
+var d = o("dialog"), f = r({
 	slots: {
 		overlay: [
 			"fixed inset-0 z-(--z-index-overlay) bg-overlay-dark-300",
@@ -39,64 +40,77 @@ var l = r({
 		lg: { content: "max-w-[45rem]" }
 	} },
 	defaultVariants: { size: "md" }
-}), u = l(), d = ({ className: t, size: n, children: r, ...s }) => {
-	let c = l({ size: n });
-	return /* @__PURE__ */ a(o.Portal, { children: [/* @__PURE__ */ i(o.Overlay, {
-		"data-slot": "modal-overlay",
-		className: c.overlay()
-	}), /* @__PURE__ */ i(o.Content, {
-		"data-slot": "modal-content",
-		"aria-describedby": void 0,
-		className: e(c.content(), t),
-		...s,
-		children: r
-	})] });
+}), p = f(), m = ({ className: t, size: n, variant: r = "dialog", children: o, onEscapeKeyDown: s, onPointerDownOutside: l, ...u }) => {
+	let p = f({ size: n }), m = r === "alert";
+	return /* @__PURE__ */ i(d.Provider, {
+		value: r,
+		children: /* @__PURE__ */ a(c.Portal, { children: [/* @__PURE__ */ i(c.Overlay, {
+			"data-slot": "modal-overlay",
+			className: p.overlay()
+		}), /* @__PURE__ */ i(c.Content, {
+			"data-slot": "modal-content",
+			role: m ? "alertdialog" : "dialog",
+			"aria-describedby": void 0,
+			className: e(p.content(), t),
+			onEscapeKeyDown: (e) => {
+				s?.(e), m && e.preventDefault();
+			},
+			onPointerDownOutside: (e) => {
+				l?.(e), m && e.preventDefault();
+			},
+			...u,
+			children: o
+		})] })
+	});
 };
-d.displayName = "Modal.Content";
-var f = ({ className: e, children: r, ...s }) => /* @__PURE__ */ a("div", {
-	"data-slot": "modal-title",
-	className: u.title({ className: e }),
-	children: [/* @__PURE__ */ i(o.Title, {
-		...s,
-		children: r
-	}), /* @__PURE__ */ i(o.Close, {
-		asChild: !0,
-		children: /* @__PURE__ */ i(t, {
-			variant: "ghost",
-			size: "sm",
-			"aria-label": "Close",
-			className: "-my-2 -mr-6 shrink-0",
-			children: /* @__PURE__ */ i(n, {})
-		})
-	})]
-});
-f.displayName = "Modal.Title";
-var p = ({ className: e, ...t }) => /* @__PURE__ */ i("div", {
+m.displayName = "Modal.Content";
+var h = ({ className: e, children: r, ...o }) => {
+	let l = s(d);
+	return /* @__PURE__ */ a("div", {
+		"data-slot": "modal-title",
+		className: p.title({ className: e }),
+		children: [/* @__PURE__ */ i(c.Title, {
+			...o,
+			children: r
+		}), l === "dialog" && /* @__PURE__ */ i(c.Close, {
+			asChild: !0,
+			children: /* @__PURE__ */ i(t, {
+				variant: "ghost",
+				size: "sm",
+				"aria-label": "Close",
+				className: "-my-2 -mr-6 shrink-0",
+				children: /* @__PURE__ */ i(n, {})
+			})
+		})]
+	});
+};
+h.displayName = "Modal.Title";
+var g = ({ className: e, ...t }) => /* @__PURE__ */ i("div", {
 	"data-slot": "modal-body",
 	tabIndex: 0,
-	className: u.body({ className: e }),
+	className: p.body({ className: e }),
 	...t
 });
-p.displayName = "Modal.Body";
-var m = ({ className: e, ...t }) => /* @__PURE__ */ i("div", {
+g.displayName = "Modal.Body";
+var _ = ({ className: e, ...t }) => /* @__PURE__ */ i("div", {
 	"data-slot": "modal-footer",
-	className: u.footer({ className: e }),
+	className: p.footer({ className: e }),
 	...t
 });
-m.displayName = "Modal.Footer";
-var h = (e) => /* @__PURE__ */ i(o.Close, {
+_.displayName = "Modal.Footer";
+var v = (e) => /* @__PURE__ */ i(c.Close, {
 	"data-slot": "modal-close",
 	...e
 });
-h.displayName = "Modal.Close";
-var g = {
-	Root: s,
-	Trigger: c,
-	Content: d,
-	Title: f,
-	Body: p,
-	Footer: m,
-	Close: h
+v.displayName = "Modal.Close";
+var y = {
+	Root: l,
+	Trigger: u,
+	Content: m,
+	Title: h,
+	Body: g,
+	Footer: _,
+	Close: v
 };
 //#endregion
-export { g as Modal, l as modalRecipe };
+export { y as Modal, f as modalRecipe };