@agentero/design-system 0.24.2 → 0.24.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.24.2",
+	"version": "0.24.3",
 	"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

@@ -17,6 +17,7 @@ export declare const modalRecipe: import('tailwind-variants').TVReturnType<{
     overlay: string[];
     content: string[];
     title: string;
+    description: string;
     body: string;
     footer: string;
 }, undefined, {
@@ -32,6 +33,7 @@ export declare const modalRecipe: import('tailwind-variants').TVReturnType<{
     overlay: string[];
     content: string[];
     title: string;
+    description: string;
     body: string;
     footer: string;
 }, import('tailwind-variants').TVReturnType<{
@@ -47,6 +49,7 @@ export declare const modalRecipe: import('tailwind-variants').TVReturnType<{
     overlay: string[];
     content: string[];
     title: string;
+    description: string;
     body: string;
     footer: string;
 }, undefined, unknown, unknown, undefined>>;
@@ -67,6 +70,7 @@ type ContentProps = ComponentProps<typeof DialogPrimitive.Content> & {
     variant?: ModalVariant;
 };
 type TitleProps = ComponentProps<typeof DialogPrimitive.Title>;
+type DescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;
 type BodyProps = ComponentProps<'div'>;
 type FooterProps = ComponentProps<'div'>;
 type CloseProps = ComponentProps<typeof DialogPrimitive.Close>;
@@ -77,9 +81,10 @@ type CloseProps = ComponentProps<typeof DialogPrimitive.Close>;
  * for free.
  *
  * Compose `Root` (open state) with `Content` (surface, `size` md/lg), and
- * fill it with `Title` (built-in X button), `Body` (scrollable), and `Footer`
- * (right-aligned actions). Open it controlled (`open`/`onOpenChange`) or via
- * `Trigger`; close from inside with `Close asChild` around your cancel button.
+ * fill it with `Title` (built-in X button), an optional `Description` right
+ * below it, `Body` (scrollable), and `Footer` (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
@@ -92,7 +97,7 @@ type CloseProps = ComponentProps<typeof DialogPrimitive.Close>;
  * <Modal.Root open={isOpen} onOpenChange={setIsOpen}>
  *   <Modal.Content size="md">
  *     <Modal.Title>Delete carrier</Modal.Title>
- *     <Modal.Body>This action cannot be undone.</Modal.Body>
+ *     <Modal.Description>This action cannot be undone.</Modal.Description>
  *     <Modal.Footer>
  *       <Modal.Close asChild>
  *         <Button variant="ghost">Cancel</Button>
@@ -137,6 +142,10 @@ export declare const Modal: {
         ({ className, children, ...props }: TitleProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    Description: {
+        ({ className, ...props }: DescriptionProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
     Body: {
         ({ className, ...props }: BodyProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;

package/src/modal/modal.js

@@ -32,6 +32,7 @@ var d = o("dialog"), f = r({
 			"motion-reduce:animate-none!"
 		],
 		title: "flex items-center justify-between gap-2 px-10 text-[1.375rem] leading-7 font-semibold text-text-default-base-primary",
+		description: "-mt-4 px-10 text-base text-text-default-base-primary",
 		body: "-my-1 max-h-[60vh] overflow-y-auto px-10 py-1",
 		footer: "flex shrink-0 items-center justify-end gap-4 px-10"
 	},
@@ -50,7 +51,6 @@ var d = o("dialog"), f = r({
 		}), /* @__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();
@@ -85,32 +85,39 @@ var h = ({ className: e, children: r, ...o }) => {
 	});
 };
 h.displayName = "Modal.Title";
-var g = ({ className: e, ...t }) => /* @__PURE__ */ i("div", {
+var g = ({ className: e, ...t }) => /* @__PURE__ */ i(c.Description, {
+	"data-slot": "modal-description",
+	className: p.description({ className: e }),
+	...t
+});
+g.displayName = "Modal.Description";
+var _ = ({ className: e, ...t }) => /* @__PURE__ */ i("div", {
 	"data-slot": "modal-body",
 	tabIndex: 0,
 	className: p.body({ className: e }),
 	...t
 });
-g.displayName = "Modal.Body";
-var _ = ({ className: e, ...t }) => /* @__PURE__ */ i("div", {
+_.displayName = "Modal.Body";
+var v = ({ className: e, ...t }) => /* @__PURE__ */ i("div", {
 	"data-slot": "modal-footer",
 	className: p.footer({ className: e }),
 	...t
 });
-_.displayName = "Modal.Footer";
-var v = (e) => /* @__PURE__ */ i(c.Close, {
+v.displayName = "Modal.Footer";
+var y = (e) => /* @__PURE__ */ i(c.Close, {
 	"data-slot": "modal-close",
 	...e
 });
-v.displayName = "Modal.Close";
-var y = {
+y.displayName = "Modal.Close";
+var b = {
 	Root: l,
 	Trigger: u,
 	Content: m,
 	Title: h,
-	Body: g,
-	Footer: _,
-	Close: v
+	Description: g,
+	Body: _,
+	Footer: v,
+	Close: y
 };
 //#endregion
-export { y as Modal, f as modalRecipe };
+export { b as Modal, f as modalRecipe };