@agentero/design-system 0.24.3 → 0.24.5

package/package.json

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

package/src/accordion/accordion.d.ts

@@ -15,32 +15,44 @@ declare const rootStyles: import('tailwind-variants').TVReturnType<{
     };
 }, undefined, undefined, unknown, unknown, undefined>>;
 export type AccordionRootProps = ComponentProps<typeof AccordionPrimitive.Root> & VariantProps<typeof rootStyles>;
-export type AccordionItemProps = ComponentProps<typeof AccordionPrimitive.Item>;
-export type AccordionTriggerProps = ComponentProps<typeof AccordionPrimitive.Trigger>;
-export type AccordionContentProps = ComponentProps<typeof AccordionPrimitive.Content>;
 /**
- * Stacked, collapsible sections built on Radix UI's Accordion (keyboard nav and
- * ARIA come for free). Compose `Root` with `Item`s, each holding a `Trigger` and
- * `Content`. `type="single"` (optionally `collapsible`) opens one at a time;
+ * Stacked, collapsible sections built on Radix UI's Accordion, so keyboard nav
+ * and ARIA come for free. Compose `Root` with `Item`s, each holding a `Trigger`
+ * and `Content`. `type="single"` (optionally `collapsible`) opens one at a time;
  * `type="multiple"` opens sections independently. `enclosed` renders the group
  * as a bordered card.
+ *
+ * @summary Root of a group of collapsible sections
+ *
+ * @example
+ * ```tsx
+ * import { Accordion } from '@agentero/design-system/accordion';
+ *
+ * <Accordion.Root type="single" collapsible>
+ *   <Accordion.Item value="coverages">
+ *     <Accordion.Trigger>Coverages</Accordion.Trigger>
+ *     <Accordion.Content>…</Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion.Root>
+ * ```
  */
-export declare const Accordion: {
-    Root: {
-        ({ className, enclosed, ...props }: AccordionRootProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Item: {
-        ({ className, ...props }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Trigger: {
-        ({ className, children, asChild, ...props }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Content: {
-        ({ className, children, ...props }: AccordionContentProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
+export declare const Root: {
+    ({ className, enclosed, ...props }: AccordionRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type AccordionItemProps = ComponentProps<typeof AccordionPrimitive.Item>;
+export declare const Item: {
+    ({ className, ...props }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type AccordionTriggerProps = ComponentProps<typeof AccordionPrimitive.Trigger>;
+export declare const Trigger: {
+    ({ className, children, asChild, ...props }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type AccordionContentProps = ComponentProps<typeof AccordionPrimitive.Content>;
+export declare const Content: {
+    ({ className, children, ...props }: AccordionContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
 };
 export {};

package/src/accordion/accordion.js

@@ -1,4 +1,3 @@
-"use client";
 import { cn as e } from "../../lib/utils.js";
 import { IconKeyboardArrowDown as t } from "./icons.js";
 import * as n from "@radix-ui/react-accordion";
@@ -44,11 +43,5 @@ var f = ({ className: t, children: r, ...i }) => /* @__PURE__ */ a(n.Content, {
 	})
 });
 f.displayName = "Accordion.Content";
-var p = {
-	Root: c,
-	Item: l,
-	Trigger: d,
-	Content: f
-};
 //#endregion
-export { p as Accordion };
+export { f as Content, l as Item, c as Root, d as Trigger };

package/src/accordion/index.d.ts

@@ -1,2 +1,19 @@
-export { Accordion } from './accordion';
 export type { AccordionRootProps, AccordionItemProps, AccordionTriggerProps, AccordionContentProps } from './accordion';
+export declare const Accordion: {
+    Root: {
+        ({ className, enclosed, ...props }: import('./accordion').AccordionRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        ({ className, ...props }: import('./accordion').AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Trigger: {
+        ({ className, children, asChild, ...props }: import('./accordion').AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ className, children, ...props }: import('./accordion').AccordionContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};

package/src/accordion/index.js

@@ -1,2 +1,10 @@
-import { Accordion as e } from "./accordion.js";
-export { e as Accordion };
+import { Content as e, Item as t, Root as n, Trigger as r } from "./accordion.js";
+//#region src/accordion/index.ts
+var i = {
+	Root: n,
+	Item: t,
+	Trigger: r,
+	Content: e
+};
+//#endregion
+export { i as Accordion };

package/src/avatar-group/avatar-group.d.ts

@@ -106,6 +106,8 @@ export type AvatarGroupProps = Omit<ComponentPropsWithRef<'div'>, 'children'> &
  * directly — the group clones each to force a uniform `size`/`variant` and the
  * overlap, so wrapped children won't pick those up.
  *
+ * @summary Overlapping row of avatars, collapsing the rest into `+N`
+ *
  * @example
  * <AvatarGroup size="sm" max={3}>
  * 	<Avatar fallback="AL" colorize="Ada Lovelace" />

package/src/avatar-group/avatar-group.js

@@ -1,4 +1,3 @@
-"use client";
 import { cn as e } from "../../lib/utils.js";
 import { Avatar as t } from "../avatar/avatar.js";
 import { tv as n } from "tailwind-variants";

package/src/button/button.js

@@ -1,4 +1,3 @@
-"use client";
 import { cn as e } from "../../lib/utils.js";
 import { tv as t } from "tailwind-variants";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";

package/src/check-list/check-list.d.ts

@@ -37,29 +37,30 @@ export declare const checkListRecipe: import('tailwind-variants').TVReturnType<{
     icon: string;
 }, undefined, unknown, unknown, undefined>>;
 type RootProps = ComponentProps<'ul'>;
-type ItemProps = ComponentProps<'li'>;
 /**
- * CheckList renders a vertical list where every row is marked with a check
- * icon — feature lists, benefits, availability summaries. Purely
- * presentational: for interactive selection use a checkbox group instead.
+ * Container of a vertical list where every row is marked with a check icon —
+ * feature lists, benefits, availability summaries. Purely presentational: for
+ * interactive selection use a checkbox group instead.
  *
- * @summary Vertical list of check-marked rows
+ * @summary List container for check-marked items
  *
  * @example
  * ```tsx
+ * import { CheckList } from '@agentero/design-system/check-list';
+ *
  * <CheckList.Root>
  *   <CheckList.Item>Instant appointment</CheckList.Item>
  * </CheckList.Root>
  * ```
  */
-export declare const CheckList: {
-    Root: {
-        ({ className, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Item: {
-        ({ className, children, ...props }: ItemProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
+export declare const Root: {
+    ({ className, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type ItemProps = ComponentProps<'li'>;
+/** @summary List row with a leading check icon */
+export declare const Item: {
+    ({ className, children, ...props }: ItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
 };
 export {};

package/src/check-list/check-list.js

@@ -1,4 +1,3 @@
-"use client";
 import { IconCheck as e } from "./icons.js";
 import { tv as t } from "tailwind-variants";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
@@ -23,9 +22,5 @@ var s = ({ className: t, children: i, ...o }) => /* @__PURE__ */ r("li", {
 	}), i]
 });
 s.displayName = "CheckList.Item";
-var c = {
-	Root: o,
-	Item: s
-};
 //#endregion
-export { c as CheckList, i as checkListRecipe };
+export { s as Item, o as Root, i as checkListRecipe };

package/src/check-list/index.d.ts

@@ -1 +1,11 @@
-export { CheckList, checkListRecipe } from './check-list';
+export { checkListRecipe } from './check-list';
+export declare const CheckList: {
+    Root: {
+        ({ className, ...props }: import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLUListElement>, HTMLUListElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        ({ className, children, ...props }: import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};

package/src/check-list/index.js

@@ -1,2 +1,8 @@
-import { CheckList as e, checkListRecipe as t } from "./check-list.js";
-export { e as CheckList, t as checkListRecipe };
+import { Item as e, Root as t, checkListRecipe as n } from "./check-list.js";
+//#region src/check-list/index.ts
+var r = {
+	Root: t,
+	Item: e
+};
+//#endregion
+export { r as CheckList, n as checkListRecipe };

package/src/command/command.d.ts

@@ -73,6 +73,49 @@ export declare const commandRecipe: import('tailwind-variants').TVReturnType<{
  * @property {string} [className] - Additional CSS classes to apply.
  */
 type RootProps = ComponentProps<typeof CommandPrimitive>;
+/**
+ * Surface of a filterable list built on `cmdk`: type to narrow the options,
+ * navigate with the arrow keys, select with Enter. Compose `Root` with `Input` /
+ * `List` / `Empty` / `Item`, plus `Group` when the options need sections.
+ *
+ * `Root` owns the search state, the filtering and the keyboard navigation, and
+ * carries the panel chrome (border, radius, shadow), so it can be dropped
+ * straight into a `Popover.Content` without extra wrapping to yield a combobox.
+ * Reach for `DropdownMenu` instead when the options are actions and there is
+ * nothing to search.
+ *
+ * `label` names the search input — it is the only prop that can, see `Input`.
+ *
+ * @summary Filterable command palette container
+ * @see {@link https://github.com/pacocoursey/cmdk|cmdk}
+ *
+ * @example
+ * ```tsx
+ * import { Command } from '@agentero/design-system/command';
+ *
+ * <Command.Root label="Search lines of business">
+ *   <Command.Input placeholder="Search lines of business..." />
+ *   <Command.List>
+ *     <Command.Item onSelect={() => select('home')}>Homeowners</Command.Item>
+ *     <Command.Item onSelect={() => select('auto')}>Auto</Command.Item>
+ *   </Command.List>
+ *   <Command.Empty>No options found</Command.Empty>
+ * </Command.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Filtering handled upstream (async search): let every item through.
+ * <Command.Root label="Search options" shouldFilter={false}>
+ *   <Command.Input placeholder="Search..." />
+ *   <Command.List>...</Command.List>
+ * </Command.Root>
+ * ```
+ */
+export declare const Root: {
+    ({ className, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 /**
  * Props for the Command Input component.
  *
@@ -82,6 +125,28 @@ type RootProps = ComponentProps<typeof CommandPrimitive>;
  * @property {string} [className] - Additional CSS classes, applied to the search **row**, not the inner `<input>`.
  */
 type InputProps = ComponentProps<typeof CommandPrimitive.Input>;
+/**
+ * Search row: a leading magnifier plus the text field that drives filtering.
+ * `className` lands on the row wrapper rather than the `<input>`, since the row
+ * is what reads as the field.
+ *
+ * Name it through `Root`'s `label`, **not** `aria-label` here: cmdk applies its
+ * own `aria-labelledby` after spreading props, so it always wins and an
+ * `aria-label` here is silently ignored.
+ *
+ * @summary Search field that filters the list as you type
+ *
+ * @example
+ * ```tsx
+ * <Command.Root label="Search options">
+ *   <Command.Input placeholder="Search options..." />
+ * </Command.Root>
+ * ```
+ */
+export declare const Input: {
+    ({ className, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 /**
  * Props for the Command List component.
  *
@@ -89,12 +154,42 @@ type InputProps = ComponentProps<typeof CommandPrimitive.Input>;
  * @property {string} [className] - Additional CSS classes to apply.
  */
 type ListProps = ComponentProps<typeof CommandPrimitive.List>;
+/**
+ * Scrollable region holding the items. Height is capped so a long list scrolls
+ * instead of growing the surface; to change that cap, pass your own `max-h-*`.
+ *
+ * @summary Scroll container for command items
+ */
+export declare const List: {
+    ({ className, ...props }: ListProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 /**
  * Props for the Command Empty component.
  *
  * @property {string} [className] - Additional CSS classes to apply.
  */
 type EmptyProps = ComponentProps<typeof CommandPrimitive.Empty>;
+/**
+ * Message rendered only while the search matches nothing; renders nothing at
+ * all when there are results, so it can sit in the tree permanently.
+ *
+ * Place it as a **sibling** of `List`, not inside it: cmdk hardcodes
+ * `role="presentation"` here and `role="listbox"` on `List`, and a
+ * presentational child fails `aria-required-children`.
+ *
+ * @summary Empty-state message shown when no item matches
+ *
+ * @example
+ * ```tsx
+ * <Command.List>{items}</Command.List>
+ * <Command.Empty>No options found</Command.Empty>
+ * ```
+ */
+export declare const Empty: {
+    ({ className, ...props }: EmptyProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 /**
  * Props for the Command Group component.
  *
@@ -103,6 +198,18 @@ type EmptyProps = ComponentProps<typeof CommandPrimitive.Empty>;
  * @property {string} [className] - Additional CSS classes to apply.
  */
 type GroupProps = ComponentProps<typeof CommandPrimitive.Group>;
+/**
+ * Optional section wrapper around related items. Unstyled by design, so
+ * ungrouped lists carry no extra spacing. cmdk renders the heading itself, so
+ * style it from here with the descendant variant:
+ * `**:[[cmdk-group-heading]]:px-3`.
+ *
+ * @summary Unstyled grouping wrapper for related items
+ */
+export declare const Group: {
+    (props: GroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 /**
  * Props for the Command Item component.
  *
@@ -117,54 +224,21 @@ type GroupProps = ComponentProps<typeof CommandPrimitive.Group>;
  */
 type ItemProps = ComponentProps<typeof CommandPrimitive.Item>;
 /**
- * Command is a filterable list built on `cmdk`: type to narrow the options,
- * navigate with the arrow keys, select with Enter. Compose from `Root` /
- * `Input` / `List` / `Empty` / `Item`, with `Group` when the options need
- * sections.
- *
- * `Root` carries its own panel chrome, so nesting it in a `Popover.Content`
- * yields a combobox. Reach for `DropdownMenu` instead when the options are
- * actions and there is nothing to search.
+ * Selectable row. cmdk keeps exactly one item active — via pointer or arrow
+ * keys — and marks it `data-selected="true"`; Enter fires `onSelect` on that
+ * row. Use `keywords` to make an item matchable by terms it doesn't display.
  *
- * @summary Filterable, keyboard-navigable list of options
- * @see {@link https://github.com/pacocoursey/cmdk|cmdk}
+ * @summary Selectable command row with hover and active styling
  *
  * @example
  * ```tsx
- * <Command.Root label="Search lines of business">
- *   <Command.Input placeholder="Search lines of business..." />
- *   <Command.List>
- *     <Command.Item onSelect={() => select('home')}>Homeowners</Command.Item>
- *     <Command.Item onSelect={() => select('auto')}>Auto</Command.Item>
- *   </Command.List>
- *   <Command.Empty>No options found</Command.Empty>
- * </Command.Root>
+ * <Command.Item value="ho" keywords={['Homeowners']} onSelect={handleSelect}>
+ *   Homeowners
+ * </Command.Item>
  * ```
  */
-export declare const Command: {
-    Root: {
-        ({ className, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Input: {
-        ({ className, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    List: {
-        ({ className, ...props }: ListProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Empty: {
-        ({ className, ...props }: EmptyProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Group: {
-        (props: GroupProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Item: {
-        ({ className, ...props }: ItemProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
+export declare const Item: {
+    ({ className, ...props }: ItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
 };
 export {};

package/src/command/command.js

@@ -59,13 +59,5 @@ var f = ({ className: e, ...t }) => /* @__PURE__ */ n(i.Item, {
 	...t
 });
 f.displayName = "Command.Item";
-var p = {
-	Root: s,
-	Input: c,
-	List: l,
-	Empty: u,
-	Group: d,
-	Item: f
-};
 //#endregion
-export { p as Command, a as commandRecipe };
+export { u as Empty, d as Group, c as Input, f as Item, l as List, s as Root, a as commandRecipe };

package/src/command/index.d.ts

@@ -1 +1,86 @@
-export { Command, commandRecipe } from './command';
+export { commandRecipe } from './command';
+export declare const Command: {
+    Root: {
+        ({ className, ...props }: {
+            children?: React.ReactNode;
+        } & Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+            ref?: React.Ref<HTMLDivElement>;
+        } & {
+            asChild?: boolean;
+        }, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild"> & {
+            label?: string;
+            shouldFilter?: boolean;
+            filter?: (value: string, search: string, keywords?: string[]) => number;
+            defaultValue?: string;
+            value?: string;
+            onValueChange?: (value: string) => void;
+            loop?: boolean;
+            disablePointerSelection?: boolean;
+            vimBindings?: boolean;
+        } & import('react').RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Input: {
+        ({ className, ...props }: Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import('react').InputHTMLAttributes<HTMLInputElement>> & {
+            ref?: React.Ref<HTMLInputElement>;
+        } & {
+            asChild?: boolean;
+        }, "key" | "asChild" | keyof import('react').InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+            value?: string;
+            onValueChange?: (search: string) => void;
+        } & import('react').RefAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    List: {
+        ({ className, ...props }: {
+            children?: React.ReactNode;
+        } & Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+            ref?: React.Ref<HTMLDivElement>;
+        } & {
+            asChild?: boolean;
+        }, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild"> & {
+            label?: string;
+        } & import('react').RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Empty: {
+        ({ className, ...props }: {
+            children?: React.ReactNode;
+        } & Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+            ref?: React.Ref<HTMLDivElement>;
+        } & {
+            asChild?: boolean;
+        }, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild"> & import('react').RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Group: {
+        (props: {
+            children?: React.ReactNode;
+        } & Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+            ref?: React.Ref<HTMLDivElement>;
+        } & {
+            asChild?: boolean;
+        }, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+            heading?: React.ReactNode;
+            value?: string;
+            forceMount?: boolean;
+        } & import('react').RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        ({ className, ...props }: {
+            children?: React.ReactNode;
+        } & Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+            ref?: React.Ref<HTMLDivElement>;
+        } & {
+            asChild?: boolean;
+        }, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "value" | "disabled"> & {
+            disabled?: boolean;
+            onSelect?: (value: string) => void;
+            value?: string;
+            keywords?: string[];
+            forceMount?: boolean;
+        } & import('react').RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};

package/src/command/index.js

@@ -1,2 +1,12 @@
-import { Command as e, commandRecipe as t } from "./command.js";
-export { e as Command, t as commandRecipe };
+import { Empty as e, Group as t, Input as n, Item as r, List as i, Root as a, commandRecipe as o } from "./command.js";
+//#region src/command/index.ts
+var s = {
+	Root: a,
+	Input: n,
+	List: i,
+	Empty: e,
+	Group: t,
+	Item: r
+};
+//#endregion
+export { s as Command, o as commandRecipe };