@agentero/design-system 0.24.1 → 0.24.3

package/package.json

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

package/src/tabs/index.d.ts

@@ -1,2 +1,24 @@
-export { Tabs, tabsRecipe } from './tabs';
+export { tabsRecipe } from './tabs';
 export type { TabsRootProps, TabsListProps, TabsTriggerProps, TabsContentProps, TabsLabelProps } from './tabs';
+export declare const Tabs: {
+    Root: {
+        ({ className, variant, position, ...props }: import('./tabs').TabsRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    List: {
+        ({ className, ...props }: import('./tabs').TabsListProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Trigger: {
+        ({ className, ...props }: import('./tabs').TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ className, ...props }: import('./tabs').TabsContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Label: {
+        ({ className, variant, ...props }: import('./tabs').TabsLabelProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};

package/src/tabs/index.js

@@ -1,2 +1,11 @@
-import { Tabs as e, tabsRecipe as t } from "./tabs.js";
-export { e as Tabs, t as tabsRecipe };
+import { Content as e, Label as t, List as n, Root as r, Trigger as i, tabsRecipe as a } from "./tabs.js";
+//#region src/tabs/index.ts
+var o = {
+	Root: r,
+	List: n,
+	Trigger: i,
+	Content: e,
+	Label: t
+};
+//#endregion
+export { o as Tabs, a as tabsRecipe };

package/src/tabs/tabs.d.ts

@@ -106,37 +106,72 @@ export declare const tabsRecipe: import('tailwind-variants').TVReturnType<{
 }, undefined, unknown, unknown, undefined>>;
 type TabsVariants = VariantProps<typeof tabsRecipe>;
 export type TabsRootProps = ComponentProps<typeof TabsPrimitive.Root> & TabsVariants;
+/**
+ * Root of a set of tabs, built on Radix UI's Tabs so keyboard nav, roving focus
+ * and ARIA come for free. Owns the selected tab (controlled via `value`/
+ * `onValueChange` or uncontrolled via `defaultValue`) and wraps `List` and
+ * `Content`s. `variant` picks the look — `line` (default) underlines the active
+ * tab, `enclosed` renders segmented pills, `button` renders button-like tabs.
+ *
+ * @summary Root provider for a Tabs group
+ *
+ * @example
+ * ```tsx
+ * import { Tabs } from '@agentero/design-system/tabs';
+ *
+ * <Tabs.Root defaultValue="overview">
+ *   <Tabs.List>
+ *     <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
+ *     <Tabs.Trigger value="activity">Activity</Tabs.Trigger>
+ *   </Tabs.List>
+ *   <Tabs.Content value="overview">…</Tabs.Content>
+ *   <Tabs.Content value="activity">…</Tabs.Content>
+ * </Tabs.Root>
+ * ```
+ */
+export declare const Root: {
+    ({ className, variant, position, ...props }: TabsRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export type TabsListProps = ComponentProps<typeof TabsPrimitive.List>;
+export declare const List: {
+    ({ className, ...props }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export type TabsTriggerProps = ComponentProps<typeof TabsPrimitive.Trigger>;
+export declare const Trigger: {
+    ({ className, ...props }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export type TabsContentProps = ComponentProps<typeof TabsPrimitive.Content>;
+export declare const Content: {
+    ({ className, ...props }: TabsContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export type TabsLabelProps = ComponentProps<'span'> & {
     variant?: TabsVariants['variant'];
 };
 /**
- * Tabs built on Radix UI's Tabs (keyboard nav, roving focus and ARIA come for
- * free). Compose `Root` with a `List` of `Trigger`s and matching `Content`s,
- * pairing each `Trigger`/`Content` by `value`.
+ * Non-interactive heading with the exact look of an inactive `Trigger`: it
+ * renders the trigger styles without the active data-state, and
+ * `pointer-events-none` keeps the hover styles from firing. Use it when a
+ * panel keeps the tab row's visual language but has a single, non-selectable
+ * title — a lone tab would announce a selectable control that isn't one.
+ * Inside a `Root` it picks up the group's variant; standalone, pass `variant`.
+ * It renders a plain `span` — wrap it in a heading element when the title
+ * needs heading semantics.
+ *
+ * @summary Text styled as an inactive tab trigger
+ *
+ * @example
+ * ```tsx
+ * <h2>
+ *   <Tabs.Label>Shared coverages</Tabs.Label>
+ * </h2>
+ * ```
  */
-export declare const Tabs: {
-    Root: {
-        ({ className, variant, position, ...props }: TabsRootProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    List: {
-        ({ className, ...props }: TabsListProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Trigger: {
-        ({ className, ...props }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Content: {
-        ({ className, ...props }: TabsContentProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Label: {
-        ({ className, variant, ...props }: TabsLabelProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
+export declare const Label: {
+    ({ className, variant, ...props }: TabsLabelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
 };
 export {};

package/src/tabs/tabs.js

@@ -109,12 +109,5 @@ var p = ({ className: t, variant: r, ...a }) => /* @__PURE__ */ n("span", {
 	...a
 });
 p.displayName = "Tabs.Label";
-var m = {
-	Root: l,
-	List: u,
-	Trigger: d,
-	Content: f,
-	Label: p
-};
 //#endregion
-export { m as Tabs, o as tabsRecipe };
+export { f as Content, p as Label, u as List, l as Root, d as Trigger, o as tabsRecipe };