@agentero/design-system 0.17.0 → 0.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.17.0",
+	"version": "0.18.1",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -57,6 +57,10 @@
 			"types": "./src/loading/index.d.ts",
 			"import": "./src/loading/index.js"
 		},
+		"./modal": {
+			"types": "./src/modal/index.d.ts",
+			"import": "./src/modal/index.js"
+		},
 		"./pagination": {
 			"types": "./src/pagination/index.d.ts",
 			"import": "./src/pagination/index.js"
@@ -109,6 +113,7 @@
 	"dependencies": {
 		"@radix-ui/react-accordion": "^1.2.14",
 		"@radix-ui/react-avatar": "^1.1.11",
+		"@radix-ui/react-dialog": "^1.1.19",
 		"@radix-ui/react-dropdown-menu": "^2.1.16",
 		"@radix-ui/react-progress": "^1.1.12",
 		"@radix-ui/react-separator": "^1.1.8",

package/src/modal/icons.d.ts

@@ -0,0 +1 @@
+export declare const IconClose: () => import("react/jsx-runtime").JSX.Element;

package/src/modal/icons.js

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/modal/icons.tsx
+var t = () => /* @__PURE__ */ e("svg", {
+	viewBox: "0 0 24 24",
+	xmlns: "http://www.w3.org/2000/svg",
+	"aria-hidden": !0,
+	children: /* @__PURE__ */ e("path", { d: "M12 13.0538L6.92689 18.1269C6.78844 18.2654 6.6144 18.3362 6.40479 18.3394C6.19519 18.3426 6.01795 18.2718 5.87309 18.1269C5.7282 17.982 5.65576 17.8064 5.65576 17.6C5.65576 17.3936 5.7282 17.218 5.87309 17.0731L10.9462 12L5.87309 6.92689C5.73462 6.78844 5.66379 6.6144 5.66059 6.40479C5.65737 6.19519 5.7282 6.01795 5.87309 5.87309C6.01795 5.7282 6.19359 5.65576 6.39999 5.65576C6.60639 5.65576 6.78202 5.7282 6.92689 5.87309L12 10.9462L17.0731 5.87309C17.2115 5.73462 17.3856 5.66379 17.5952 5.66059C17.8048 5.65737 17.982 5.7282 18.1269 5.87309C18.2718 6.01795 18.3442 6.19359 18.3442 6.39999C18.3442 6.60639 18.2718 6.78202 18.1269 6.92689L13.0538 12L18.1269 17.0731C18.2654 17.2115 18.3362 17.3856 18.3394 17.5952C18.3426 17.8048 18.2718 17.982 18.1269 18.1269C17.982 18.2718 17.8064 18.3442 17.6 18.3442C17.3936 18.3442 17.218 18.2718 17.0731 18.1269L12 13.0538Z" })
+});
+//#endregion
+export { t as IconClose };

package/src/modal/index.d.ts

@@ -0,0 +1 @@
+export { Modal, modalRecipe } from './modal';

package/src/modal/index.js

@@ -0,0 +1,2 @@
+import { Modal as e, modalRecipe as t } from "./modal.js";
+export { e as Modal, t as modalRecipe };

package/src/modal/modal.d.ts

@@ -0,0 +1,126 @@
+import { ComponentProps } from 'react';
+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>;
+export declare const modalRecipe: import('tailwind-variants').TVReturnType<{
+    size: {
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+}, {
+    overlay: string[];
+    content: string[];
+    title: string;
+    body: string;
+    footer: string;
+}, undefined, {
+    size: {
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+}, {
+    overlay: string[];
+    content: string[];
+    title: string;
+    body: string;
+    footer: string;
+}, import('tailwind-variants').TVReturnType<{
+    size: {
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+}, {
+    overlay: string[];
+    content: string[];
+    title: string;
+    body: string;
+    footer: string;
+}, undefined, unknown, unknown, undefined>>;
+type ModalVariants = VariantProps<typeof modalRecipe>;
+type ContentProps = ComponentProps<typeof DialogPrimitive.Content> & {
+    /**
+     * Width of the modal. Defaults to `'md'` (540px); `'lg'` is 720px.
+     * Both shrink to the viewport on small screens.
+     */
+    size?: ModalVariants['size'];
+};
+type TitleProps = ComponentProps<typeof DialogPrimitive.Title>;
+type BodyProps = ComponentProps<'div'>;
+type FooterProps = ComponentProps<'div'>;
+type CloseProps = ComponentProps<typeof DialogPrimitive.Close>;
+/**
+ * Modal is the compound component for dialogs that interrupt the flow —
+ * confirmations, forms, and detail views. Built on Radix UI Dialog, so focus
+ * trapping, scroll locking, `Escape`/overlay dismissal, and ARIA wiring come
+ * 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.
+ *
+ * @summary Compound modal dialog over a dimmed overlay
+ *
+ * @example
+ * ```tsx
+ * <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.Footer>
+ *       <Modal.Close asChild>
+ *         <Button variant="ghost">Cancel</Button>
+ *       </Modal.Close>
+ *       <Button onClick={handleDelete}>Delete</Button>
+ *     </Modal.Footer>
+ *   </Modal.Content>
+ * </Modal.Root>
+ * ```
+ *
+ * @component
+ * @namespace Modal
+ */
+export declare const Modal: {
+    Root: {
+        (props: RootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Trigger: {
+        (props: TriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ className, size, children, ...props }: ContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Title: {
+        ({ className, children, ...props }: TitleProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ className, ...props }: BodyProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ className, ...props }: FooterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Close: {
+        (props: CloseProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export {};

package/src/modal/modal.js

@@ -0,0 +1,102 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+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";
+//#region src/modal/modal.tsx
+var s = (e) => /* @__PURE__ */ i(o.Root, {
+	"data-slot": "modal-root",
+	...e
+});
+s.displayName = "Modal.Root";
+var c = (e) => /* @__PURE__ */ i(o.Trigger, {
+	"data-slot": "modal-trigger",
+	...e
+});
+c.displayName = "Modal.Trigger";
+var l = r({
+	slots: {
+		overlay: [
+			"fixed inset-0 z-(--z-index-overlay) bg-overlay-dark-300",
+			"data-[state=open]:animate-modal-overlay-in data-[state=closed]:animate-modal-overlay-out",
+			"motion-reduce:animate-none!"
+		],
+		content: [
+			"fixed top-1/2 left-1/2 z-(--z-index-modal) -translate-x-1/2 -translate-y-1/2",
+			"flex max-h-[calc(100dvh-4rem)] w-[calc(100vw-2rem)] flex-col gap-6",
+			"rounded-lg bg-bg-default-base-primary py-10 shadow-sm outline-none",
+			"data-[state=open]:animate-modal-content-in data-[state=closed]:animate-modal-content-out",
+			"motion-reduce:animate-none!"
+		],
+		title: "flex items-start justify-between gap-2 px-10 text-[1.375rem] leading-7 font-semibold 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-2 px-10"
+	},
+	variants: { size: {
+		md: { content: "max-w-[33.75rem]" },
+		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
+	})] });
+};
+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", {
+	"data-slot": "modal-body",
+	tabIndex: 0,
+	className: u.body({ className: e }),
+	...t
+});
+p.displayName = "Modal.Body";
+var m = ({ className: e, ...t }) => /* @__PURE__ */ i("div", {
+	"data-slot": "modal-footer",
+	className: u.footer({ className: e }),
+	...t
+});
+m.displayName = "Modal.Footer";
+var h = (e) => /* @__PURE__ */ i(o.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
+};
+//#endregion
+export { g as Modal, l as modalRecipe };

package/src/tabs/tabs.js

@@ -10,7 +10,7 @@ var o = t({
 		root: "flex flex-col",
 		list: "z-1 flex shrink-0 overflow-x-auto overflow-y-hidden",
 		trigger: [
-			"relative cursor-pointer text-sm font-semibold text-text-default-base-secondary transition-colors duration-150",
+			"relative cursor-pointer text-sm font-semibold text-text-default-base-secondary no-underline transition-colors duration-150",
 			"hover:text-text-default-base-primary",
 			"focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring-button-primary",
 			"data-disabled:cursor-not-allowed data-disabled:opacity-50",

package/theme/base.css

@@ -804,6 +804,10 @@
 	--animate-dropdown-slide-in-from-bottom: dropdownSlideInFromBottom 200ms ease-out;
 	--animate-dropdown-slide-in-from-left: dropdownSlideInFromLeft 200ms ease-out;
 	--animate-dropdown-slide-in-from-right: dropdownSlideInFromRight 200ms ease-out;
+	--animate-modal-overlay-in: modalOverlayIn 200ms ease-out;
+	--animate-modal-overlay-out: modalOverlayOut 150ms ease-in forwards;
+	--animate-modal-content-in: modalContentIn 200ms ease-out;
+	--animate-modal-content-out: modalContentOut 150ms ease-in forwards;
 	--animate-tooltip-slide-in-from-top: tooltipSlideInFromTop 200ms ease-out;
 	--animate-tooltip-slide-in-from-bottom: tooltipSlideInFromBottom 200ms ease-out;
 	--animate-tooltip-slide-in-from-left: tooltipSlideInFromLeft 200ms ease-out;
@@ -1000,6 +1004,49 @@
 		}
 	}
 
+	@keyframes modalOverlayIn {
+		0% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+
+	@keyframes modalOverlayOut {
+		0% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 0;
+		}
+	}
+
+	/* Content is centered via the `translate` CSS property (Tailwind's
+	   -translate-x/y-1/2), so keyframes must only animate `transform` scale —
+	   putting translate() here would double the offset during the animation. */
+	@keyframes modalContentIn {
+		0% {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+		100% {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+
+	@keyframes modalContentOut {
+		0% {
+			opacity: 1;
+			transform: scale(1);
+		}
+		100% {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+	}
+
 	@keyframes tooltipSlideInFromTop {
 		0% {
 			opacity: 0;