@agentero/design-system 0.23.6 → 0.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/mcp/manifests/components.html +209 -58
  2. package/mcp/manifests/components.json +1 -1
  3. package/package.json +6 -1
  4. package/src/command/command.d.ts +170 -0
  5. package/src/command/command.js +71 -0
  6. package/src/command/icons.d.ts +9 -0
  7. package/src/command/icons.js +13 -0
  8. package/src/command/index.d.ts +1 -0
  9. package/src/command/index.js +2 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agentero/design-system",
3
- "version": "0.23.6",
3
+ "version": "0.24.0",
4
4
  "description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
@@ -45,6 +45,10 @@
45
45
  "types": "./src/check-list/index.d.ts",
46
46
  "import": "./src/check-list/index.js"
47
47
  },
48
+ "./command": {
49
+ "types": "./src/command/index.d.ts",
50
+ "import": "./src/command/index.js"
51
+ },
48
52
  "./data-table": {
49
53
  "types": "./src/data-table/index.d.ts",
50
54
  "import": "./src/data-table/index.js"
@@ -150,6 +154,7 @@
150
154
  "@radix-ui/react-tabs": "^1.1.13",
151
155
  "@radix-ui/react-tooltip": "^1.2.11",
152
156
  "clsx": "^2.1.1",
157
+ "cmdk": "^1.1.1",
153
158
  "sonner": "^2.0.7",
154
159
  "tailwind-merge": "^3.5.0",
155
160
  "tailwind-variants": "^3.2.2"
package/src/command/command.d.ts ADDED
@@ -0,0 +1,170 @@
1
+ import { ComponentProps } from 'react';
2
+ import { Command as CommandPrimitive } from 'cmdk';
3
+ export declare const commandRecipe: import('tailwind-variants').TVReturnType<{
4
+ [key: string]: {
5
+ [key: string]: import('tailwind-merge').ClassNameValue | {
6
+ search?: import('tailwind-merge').ClassNameValue;
7
+ input?: import('tailwind-merge').ClassNameValue;
8
+ list?: import('tailwind-merge').ClassNameValue;
9
+ root?: import('tailwind-merge').ClassNameValue;
10
+ item?: import('tailwind-merge').ClassNameValue;
11
+ searchIcon?: import('tailwind-merge').ClassNameValue;
12
+ empty?: import('tailwind-merge').ClassNameValue;
13
+ };
14
+ };
15
+ } | {
16
+ [x: string]: {
17
+ [x: string]: import('tailwind-merge').ClassNameValue | {
18
+ search?: import('tailwind-merge').ClassNameValue;
19
+ input?: import('tailwind-merge').ClassNameValue;
20
+ list?: import('tailwind-merge').ClassNameValue;
21
+ root?: import('tailwind-merge').ClassNameValue;
22
+ item?: import('tailwind-merge').ClassNameValue;
23
+ searchIcon?: import('tailwind-merge').ClassNameValue;
24
+ empty?: import('tailwind-merge').ClassNameValue;
25
+ };
26
+ };
27
+ } | {}, {
28
+ root: string[];
29
+ search: string[];
30
+ searchIcon: string;
31
+ input: string[];
32
+ list: string[];
33
+ empty: string;
34
+ item: string[];
35
+ }, undefined, {
36
+ [key: string]: {
37
+ [key: string]: import('tailwind-merge').ClassNameValue | {
38
+ search?: import('tailwind-merge').ClassNameValue;
39
+ input?: import('tailwind-merge').ClassNameValue;
40
+ list?: import('tailwind-merge').ClassNameValue;
41
+ root?: import('tailwind-merge').ClassNameValue;
42
+ item?: import('tailwind-merge').ClassNameValue;
43
+ searchIcon?: import('tailwind-merge').ClassNameValue;
44
+ empty?: import('tailwind-merge').ClassNameValue;
45
+ };
46
+ };
47
+ } | {}, {
48
+ root: string[];
49
+ search: string[];
50
+ searchIcon: string;
51
+ input: string[];
52
+ list: string[];
53
+ empty: string;
54
+ item: string[];
55
+ }, import('tailwind-variants').TVReturnType<unknown, {
56
+ root: string[];
57
+ search: string[];
58
+ searchIcon: string;
59
+ input: string[];
60
+ list: string[];
61
+ empty: string;
62
+ item: string[];
63
+ }, undefined, unknown, unknown, undefined>>;
64
+ /**
65
+ * Props for the Command Root component.
66
+ *
67
+ * @property {string} [label] - Accessible name for the search input (rendered visually hidden). See `Input`.
68
+ * @property {boolean} [shouldFilter=true] - When false, cmdk stops filtering and the consumer owns which items render.
69
+ * @property {(value: string, search: string, keywords?: string[]) => number} [filter] - Custom scorer; return 0 to hide an item.
70
+ * @property {string} [value] - Controlled value of the selected item.
71
+ * @property {(value: string) => void} [onValueChange] - Called with the newly active value. cmdk only fires it when `value` is controlled.
72
+ * @property {boolean} [loop=false] - Wrap keyboard navigation around the ends of the list.
73
+ * @property {string} [className] - Additional CSS classes to apply.
74
+ */
75
+ type RootProps = ComponentProps<typeof CommandPrimitive>;
76
+ /**
77
+ * Props for the Command Input component.
78
+ *
79
+ * @property {string} [value] - Controlled search text.
80
+ * @property {(search: string) => void} [onValueChange] - Called as the search text changes.
81
+ * @property {string} [placeholder] - Placeholder shown while the search is empty.
82
+ * @property {string} [className] - Additional CSS classes, applied to the search **row**, not the inner `<input>`.
83
+ */
84
+ type InputProps = ComponentProps<typeof CommandPrimitive.Input>;
85
+ /**
86
+ * Props for the Command List component.
87
+ *
88
+ * @property {string} [label] - Accessible name for the listbox.
89
+ * @property {string} [className] - Additional CSS classes to apply.
90
+ */
91
+ type ListProps = ComponentProps<typeof CommandPrimitive.List>;
92
+ /**
93
+ * Props for the Command Empty component.
94
+ *
95
+ * @property {string} [className] - Additional CSS classes to apply.
96
+ */
97
+ type EmptyProps = ComponentProps<typeof CommandPrimitive.Empty>;
98
+ /**
99
+ * Props for the Command Group component.
100
+ *
101
+ * @property {ReactNode} [heading] - Label rendered above the group's items.
102
+ * @property {string} [value] - Value used when filtering the group as a whole.
103
+ * @property {string} [className] - Additional CSS classes to apply.
104
+ */
105
+ type GroupProps = ComponentProps<typeof CommandPrimitive.Group>;
106
+ /**
107
+ * Props for the Command Item component.
108
+ *
109
+ * @property {string} [value] - Value passed to `onSelect` and used for filtering.
110
+ * @property {string[]} [keywords] - Extra terms that match this item without being displayed.
111
+ * @property {boolean} [disabled] - When true, blocks selection and keyboard focus.
112
+ * @property {(value: string) => void} [onSelect] - Called on click or Enter.
113
+ * @property {string} [className] - Additional CSS classes to apply.
114
+ *
115
+ * @dataAttribute {string} data-selected - "true" on the active row, "false" otherwise
116
+ * @dataAttribute {string} data-disabled - "true" when disabled, "false" otherwise
117
+ */
118
+ type ItemProps = ComponentProps<typeof CommandPrimitive.Item>;
119
+ /**
120
+ * Command is a filterable list built on `cmdk`: type to narrow the options,
121
+ * navigate with the arrow keys, select with Enter. Compose from `Root` /
122
+ * `Input` / `List` / `Empty` / `Item`, with `Group` when the options need
123
+ * sections.
124
+ *
125
+ * `Root` carries its own panel chrome, so nesting it in a `Popover.Content`
126
+ * yields a combobox. Reach for `DropdownMenu` instead when the options are
127
+ * actions and there is nothing to search.
128
+ *
129
+ * @summary Filterable, keyboard-navigable list of options
130
+ * @see {@link https://github.com/pacocoursey/cmdk|cmdk}
131
+ *
132
+ * @example
133
+ * ```tsx
134
+ * <Command.Root label="Search lines of business">
135
+ * <Command.Input placeholder="Search lines of business..." />
136
+ * <Command.List>
137
+ * <Command.Item onSelect={() => select('home')}>Homeowners</Command.Item>
138
+ * <Command.Item onSelect={() => select('auto')}>Auto</Command.Item>
139
+ * </Command.List>
140
+ * <Command.Empty>No options found</Command.Empty>
141
+ * </Command.Root>
142
+ * ```
143
+ */
144
+ export declare const Command: {
145
+ Root: {
146
+ ({ className, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
147
+ displayName: string;
148
+ };
149
+ Input: {
150
+ ({ className, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
151
+ displayName: string;
152
+ };
153
+ List: {
154
+ ({ className, ...props }: ListProps): import("react/jsx-runtime").JSX.Element;
155
+ displayName: string;
156
+ };
157
+ Empty: {
158
+ ({ className, ...props }: EmptyProps): import("react/jsx-runtime").JSX.Element;
159
+ displayName: string;
160
+ };
161
+ Group: {
162
+ (props: GroupProps): import("react/jsx-runtime").JSX.Element;
163
+ displayName: string;
164
+ };
165
+ Item: {
166
+ ({ className, ...props }: ItemProps): import("react/jsx-runtime").JSX.Element;
167
+ displayName: string;
168
+ };
169
+ };
170
+ export {};
package/src/command/command.js ADDED
@@ -0,0 +1,71 @@
1
+ "use client";
2
+ import { IconSearch as e } from "./icons.js";
3
+ import { tv as t } from "tailwind-variants";
4
+ import { jsx as n, jsxs as r } from "react/jsx-runtime";
5
+ import { Command as i } from "cmdk";
6
+ //#region src/command/command.tsx
7
+ var a = t({ slots: {
8
+ root: ["overflow-hidden rounded-md bg-bg-default-base-primary shadow-xl", "border border-border-default-base-secondary"],
9
+ search: ["flex items-center gap-2 px-4 py-3", "border-b border-border-default-base-secondary"],
10
+ searchIcon: "shrink-0 pointer-events-none [&>path]:fill-icon-default-base-tertiary",
11
+ input: ["w-full border-none bg-transparent text-sm text-text-default-base-primary outline-none", "placeholder:text-text-default-base-tertiary"],
12
+ list: ["max-h-65.25 overflow-y-auto rounded-md px-1 py-2 outline-none scroll-py-2", "not-has-[[cmdk-item]]:py-0"],
13
+ empty: "p-3 text-center text-sm text-text-default-base-tertiary",
14
+ item: [
15
+ "flex items-center rounded-md px-3 py-2 text-sm text-text-default-base-primary",
16
+ "cursor-pointer hover:bg-bg-default-base-tertiary",
17
+ "data-[selected=true]:bg-bg-default-base-tertiary"
18
+ ]
19
+ } }), o = a(), s = ({ className: e, ...t }) => /* @__PURE__ */ n(i, {
20
+ "data-slot": "command-root",
21
+ className: o.root({ className: e }),
22
+ ...t
23
+ });
24
+ s.displayName = "Command.Root";
25
+ var c = ({ className: t, ...a }) => /* @__PURE__ */ r("div", {
26
+ "data-slot": "command-search",
27
+ className: o.search({ className: t }),
28
+ children: [/* @__PURE__ */ n(e, {
29
+ "data-slot": "command-search-icon",
30
+ className: o.searchIcon(),
31
+ "aria-hidden": !0
32
+ }), /* @__PURE__ */ n(i.Input, {
33
+ "data-slot": "command-input",
34
+ className: o.input(),
35
+ ...a
36
+ })]
37
+ });
38
+ c.displayName = "Command.Input";
39
+ var l = ({ className: e, ...t }) => /* @__PURE__ */ n(i.List, {
40
+ "data-slot": "command-list",
41
+ className: o.list({ className: e }),
42
+ ...t
43
+ });
44
+ l.displayName = "Command.List";
45
+ var u = ({ className: e, ...t }) => /* @__PURE__ */ n(i.Empty, {
46
+ "data-slot": "command-empty",
47
+ className: o.empty({ className: e }),
48
+ ...t
49
+ });
50
+ u.displayName = "Command.Empty";
51
+ var d = (e) => /* @__PURE__ */ n(i.Group, {
52
+ "data-slot": "command-group",
53
+ ...e
54
+ });
55
+ d.displayName = "Command.Group";
56
+ var f = ({ className: e, ...t }) => /* @__PURE__ */ n(i.Item, {
57
+ "data-slot": "command-item",
58
+ className: o.item({ className: e }),
59
+ ...t
60
+ });
61
+ f.displayName = "Command.Item";
62
+ var p = {
63
+ Root: s,
64
+ Input: c,
65
+ List: l,
66
+ Empty: u,
67
+ Group: d,
68
+ Item: f
69
+ };
70
+ //#endregion
71
+ export { p as Command, a as commandRecipe };
package/src/command/icons.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { SVGProps } from 'react';
2
+ /**
3
+ * Magnifier rendered inside `Command.Input`'s search row. Fill color is
4
+ * supplied by the surrounding class (`[&>path]:fill-...`) so the icon inherits
5
+ * the search row's token.
6
+ *
7
+ * @summary 24px search icon used as the Command search affordance
8
+ */
9
+ export declare const IconSearch: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
package/src/command/icons.js ADDED
@@ -0,0 +1,13 @@
1
+ import { jsx as e } from "react/jsx-runtime";
2
+ //#region src/command/icons.tsx
3
+ var t = (t) => /* @__PURE__ */ e("svg", {
4
+ width: "24",
5
+ height: "24",
6
+ viewBox: "0 0 24 24",
7
+ fill: "none",
8
+ xmlns: "http://www.w3.org/2000/svg",
9
+ ...t,
10
+ children: /* @__PURE__ */ e("path", { d: "M9.52 15.615q-2.562 0-4.34-1.777Q3.405 12.062 3.405 9.5T5.18 5.162q1.776-1.777 4.338-1.777t4.339 1.777q1.777 1.776 1.777 4.338 0 1.071-.36 2.046a5.7 5.7 0 0 1-.96 1.696l5.754 5.754q.209.209.213.522a.7.7 0 0 1-.213.532.72.72 0 0 1-.527.217.72.72 0 0 1-.527-.217l-5.753-5.754q-.75.62-1.725.97t-2.018.35m0-1.5q1.933 0 3.273-1.341 1.342-1.34 1.342-3.274 0-1.932-1.342-3.274-1.34-1.341-3.274-1.341-1.932 0-3.274 1.34Q4.904 7.569 4.904 9.5q0 1.933 1.341 3.274 1.342 1.341 3.274 1.341" })
11
+ });
12
+ //#endregion
13
+ export { t as IconSearch };
package/src/command/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { Command, commandRecipe } from './command';
package/src/command/index.js ADDED
@@ -0,0 +1,2 @@
1
+ import { Command as e, commandRecipe as t } from "./command.js";
2
+ export { e as Command, t as commandRecipe };