@agentero/design-system 0.30.0 → 0.31.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.
- package/mcp/manifests/components.html +588 -102
- package/mcp/manifests/components.json +849 -17
- package/package.json +6 -1
- package/src/combobox/combobox.d.ts +200 -0
- package/src/combobox/combobox.js +118 -0
- package/src/combobox/icons.d.ts +10 -0
- package/src/combobox/icons.js +13 -0
- package/src/combobox/index.d.ts +34 -0
- package/src/combobox/index.js +13 -0
- package/src/field-text/field-text.js +9 -9
- package/src/form-text/form-text.js +7 -7
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@agentero/design-system",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.31.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",
|
|
@@ -49,6 +49,10 @@
|
|
|
49
49
|
"types": "./src/checkbox/index.d.ts",
|
|
50
50
|
"import": "./src/checkbox/index.js"
|
|
51
51
|
},
|
|
52
|
+
"./combobox": {
|
|
53
|
+
"types": "./src/combobox/index.d.ts",
|
|
54
|
+
"import": "./src/combobox/index.js"
|
|
55
|
+
},
|
|
52
56
|
"./command": {
|
|
53
57
|
"types": "./src/command/index.d.ts",
|
|
54
58
|
"import": "./src/command/index.js"
|
|
@@ -176,6 +180,7 @@
|
|
|
176
180
|
}
|
|
177
181
|
},
|
|
178
182
|
"dependencies": {
|
|
183
|
+
"@base-ui/react": "^1.8.0",
|
|
179
184
|
"@radix-ui/react-accordion": "^1.2.14",
|
|
180
185
|
"@radix-ui/react-avatar": "^1.1.11",
|
|
181
186
|
"@radix-ui/react-checkbox": "^1.3.11",
|
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
import { ComponentPropsWithRef } from 'react';
|
|
2
|
+
import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
|
|
3
|
+
import { InputSize } from '../input';
|
|
4
|
+
/**
|
|
5
|
+
* Style recipe for Combobox. The surface carries its own chrome — border,
|
|
6
|
+
* background and shadow — because the list it holds is plain content.
|
|
7
|
+
*
|
|
8
|
+
* @summary tailwind-variants recipe backing the Combobox surface and list styles
|
|
9
|
+
*/
|
|
10
|
+
export declare const comboboxRecipe: import('tailwind-variants').TVReturnType<{
|
|
11
|
+
[key: string]: {
|
|
12
|
+
[key: string]: import('tailwind-merge').ClassNameValue | {
|
|
13
|
+
content?: import('tailwind-merge').ClassNameValue;
|
|
14
|
+
list?: import('tailwind-merge').ClassNameValue;
|
|
15
|
+
clear?: import('tailwind-merge').ClassNameValue;
|
|
16
|
+
item?: import('tailwind-merge').ClassNameValue;
|
|
17
|
+
field?: import('tailwind-merge').ClassNameValue;
|
|
18
|
+
message?: import('tailwind-merge').ClassNameValue;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
} | {
|
|
22
|
+
[x: string]: {
|
|
23
|
+
[x: string]: import('tailwind-merge').ClassNameValue | {
|
|
24
|
+
content?: import('tailwind-merge').ClassNameValue;
|
|
25
|
+
list?: import('tailwind-merge').ClassNameValue;
|
|
26
|
+
clear?: import('tailwind-merge').ClassNameValue;
|
|
27
|
+
item?: import('tailwind-merge').ClassNameValue;
|
|
28
|
+
field?: import('tailwind-merge').ClassNameValue;
|
|
29
|
+
message?: import('tailwind-merge').ClassNameValue;
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
} | {}, {
|
|
33
|
+
field: string;
|
|
34
|
+
clear: string[];
|
|
35
|
+
content: string[];
|
|
36
|
+
list: string[];
|
|
37
|
+
item: string[];
|
|
38
|
+
message: string[];
|
|
39
|
+
}, undefined, {
|
|
40
|
+
[key: string]: {
|
|
41
|
+
[key: string]: import('tailwind-merge').ClassNameValue | {
|
|
42
|
+
content?: import('tailwind-merge').ClassNameValue;
|
|
43
|
+
list?: import('tailwind-merge').ClassNameValue;
|
|
44
|
+
clear?: import('tailwind-merge').ClassNameValue;
|
|
45
|
+
item?: import('tailwind-merge').ClassNameValue;
|
|
46
|
+
field?: import('tailwind-merge').ClassNameValue;
|
|
47
|
+
message?: import('tailwind-merge').ClassNameValue;
|
|
48
|
+
};
|
|
49
|
+
};
|
|
50
|
+
} | {}, {
|
|
51
|
+
field: string;
|
|
52
|
+
clear: string[];
|
|
53
|
+
content: string[];
|
|
54
|
+
list: string[];
|
|
55
|
+
item: string[];
|
|
56
|
+
message: string[];
|
|
57
|
+
}, import('tailwind-variants').TVReturnType<unknown, {
|
|
58
|
+
field: string;
|
|
59
|
+
clear: string[];
|
|
60
|
+
content: string[];
|
|
61
|
+
list: string[];
|
|
62
|
+
item: string[];
|
|
63
|
+
message: string[];
|
|
64
|
+
}, undefined, unknown, unknown, undefined>>;
|
|
65
|
+
/**
|
|
66
|
+
* Root of a combobox: a text input that filters a list of options and writes the
|
|
67
|
+
* chosen one back into itself. With `Input` as the only trigger, the list opens on
|
|
68
|
+
* focus or on the first keystroke.
|
|
69
|
+
*
|
|
70
|
+
* Pass the options as `items`. For a list that comes from the server, set
|
|
71
|
+
* `filter={null}`, hand the already-filtered rows to `filteredItems`, and request
|
|
72
|
+
* them from `onInputValueChange`; `Status` then announces the wait.
|
|
73
|
+
*
|
|
74
|
+
* @summary Root provider for an input-triggered filterable list
|
|
75
|
+
* @see {@link https://base-ui.com/react/components/combobox|Base UI Combobox}
|
|
76
|
+
*
|
|
77
|
+
* @example
|
|
78
|
+
* ```tsx
|
|
79
|
+
* import { Combobox } from '@agentero/design-system/combobox';
|
|
80
|
+
*
|
|
81
|
+
* <Combobox.Root items={states}>
|
|
82
|
+
* <Combobox.Input placeholder="Search states" />
|
|
83
|
+
* <Combobox.Content>
|
|
84
|
+
* <Combobox.Empty>No matches found</Combobox.Empty>
|
|
85
|
+
* <Combobox.List>
|
|
86
|
+
* {(state: string) => <Combobox.Item key={state} value={state}>{state}</Combobox.Item>}
|
|
87
|
+
* </Combobox.List>
|
|
88
|
+
* </Combobox.Content>
|
|
89
|
+
* </Combobox.Root>
|
|
90
|
+
* ```
|
|
91
|
+
*/
|
|
92
|
+
export declare const Root: {
|
|
93
|
+
<Value, Multiple extends boolean | undefined = false, Item = Value>(props: ComboboxPrimitive.Root.Props<Value, Multiple, Item>): import("react/jsx-runtime").JSX.Element;
|
|
94
|
+
displayName: string;
|
|
95
|
+
};
|
|
96
|
+
type InputProps = Omit<ComponentPropsWithRef<typeof ComboboxPrimitive.Input>, 'size'> & {
|
|
97
|
+
/** Control height, matching `Input`. Defaults to `'md'`. */
|
|
98
|
+
size?: InputSize;
|
|
99
|
+
/**
|
|
100
|
+
* Accessible name for the clear button. Defaults to `'Clear'`; name it after
|
|
101
|
+
* the field when a page carries several comboboxes.
|
|
102
|
+
*/
|
|
103
|
+
clearLabel?: string;
|
|
104
|
+
};
|
|
105
|
+
/**
|
|
106
|
+
* The search field, which doubles as the trigger: focusing or typing opens the
|
|
107
|
+
* list. It wears the same styling as `Input` and takes the same wiring from
|
|
108
|
+
* `InputContext`, so inside a `FieldText` the label, the hint and the error point
|
|
109
|
+
* at it with nothing passed by hand. Its own props win over the context.
|
|
110
|
+
*
|
|
111
|
+
* It always carries a clear button, which Base UI mounts only once there is
|
|
112
|
+
* something to clear, so an untouched field shows nothing. Name it with
|
|
113
|
+
* `clearLabel` when a page has more than one combobox.
|
|
114
|
+
*
|
|
115
|
+
* Pass `render` to swap the element for a richer control — a field with a leading
|
|
116
|
+
* search icon, for instance — and the combobox wiring rides along.
|
|
117
|
+
*
|
|
118
|
+
* @summary Search field that opens the list on focus and filters it as you type
|
|
119
|
+
* @dataAttribute {string} data-slot - Always set to "combobox-input"
|
|
120
|
+
*/
|
|
121
|
+
export declare const Input: {
|
|
122
|
+
({ clearLabel, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
|
|
123
|
+
displayName: string;
|
|
124
|
+
};
|
|
125
|
+
type ContentProps = ComponentPropsWithRef<typeof ComboboxPrimitive.Popup> & Pick<ComponentPropsWithRef<typeof ComboboxPrimitive.Positioner>, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor' | 'collisionPadding'>;
|
|
126
|
+
/**
|
|
127
|
+
* The floating surface holding the list. It portals to the body, matches the
|
|
128
|
+
* input's width and caps its height to the space actually available, so a list
|
|
129
|
+
* near the bottom of the viewport scrolls instead of overflowing.
|
|
130
|
+
*
|
|
131
|
+
* `sideOffset` defaults to 12, the gap the legacy Datalist kept. It is wider than
|
|
132
|
+
* the 8 every other surface uses on purpose: those hang off a button, while this
|
|
133
|
+
* one sits under a focused input whose ring is already two near-black pixels, and
|
|
134
|
+
* at 8 the two borders fight.
|
|
135
|
+
*
|
|
136
|
+
* @summary Floating surface anchored to the input, holding the list
|
|
137
|
+
* @dataAttribute {string} data-slot - Always set to "combobox-content"
|
|
138
|
+
*/
|
|
139
|
+
export declare const Content: {
|
|
140
|
+
({ className, side, align, sideOffset, alignOffset, anchor, collisionPadding, ...props }: ContentProps): import("react/jsx-runtime").JSX.Element;
|
|
141
|
+
displayName: string;
|
|
142
|
+
};
|
|
143
|
+
type ListProps = ComponentPropsWithRef<typeof ComboboxPrimitive.List>;
|
|
144
|
+
/**
|
|
145
|
+
* Scrollable container for the items. Give it a function as its child to render
|
|
146
|
+
* one `Item` per entry of the root's `items`.
|
|
147
|
+
*
|
|
148
|
+
* Base UI ships the listbox unnamed, which axe flags, so it carries a generic
|
|
149
|
+
* `aria-label`. Name it after the field when a page has more than one — and note
|
|
150
|
+
* it cannot borrow the input's name: `aria-labelledby` pointing at a text field
|
|
151
|
+
* resolves to that field's *value*, so the list would rename itself on every
|
|
152
|
+
* keystroke.
|
|
153
|
+
*
|
|
154
|
+
* @summary Scrollable list of the filtered items
|
|
155
|
+
* @dataAttribute {string} data-slot - Always set to "combobox-list"
|
|
156
|
+
*/
|
|
157
|
+
export declare const List: {
|
|
158
|
+
({ className, ...props }: ListProps): import("react/jsx-runtime").JSX.Element;
|
|
159
|
+
displayName: string;
|
|
160
|
+
};
|
|
161
|
+
type ItemProps = ComponentPropsWithRef<typeof ComboboxPrimitive.Item>;
|
|
162
|
+
/**
|
|
163
|
+
* A selectable row. `value` is what the combobox stores and what
|
|
164
|
+
* `itemToStringLabel` turns into the text written back into the input.
|
|
165
|
+
*
|
|
166
|
+
* @summary Selectable row inside the list
|
|
167
|
+
* @dataAttribute {string} data-slot - Always set to "combobox-item"
|
|
168
|
+
*/
|
|
169
|
+
export declare const Item: {
|
|
170
|
+
({ className, ...props }: ItemProps): import("react/jsx-runtime").JSX.Element;
|
|
171
|
+
displayName: string;
|
|
172
|
+
};
|
|
173
|
+
type EmptyProps = ComponentPropsWithRef<typeof ComboboxPrimitive.Empty>;
|
|
174
|
+
/**
|
|
175
|
+
* Shown in place of the list when nothing matches, and announced politely. It
|
|
176
|
+
* needs `items` on `Root` to know the list is empty, and it must stay mounted —
|
|
177
|
+
* change its children rather than rendering it conditionally.
|
|
178
|
+
*
|
|
179
|
+
* @summary Message shown when no item matches the query
|
|
180
|
+
* @dataAttribute {string} data-slot - Always set to "combobox-empty"
|
|
181
|
+
*/
|
|
182
|
+
export declare const Empty: {
|
|
183
|
+
({ className, ...props }: EmptyProps): import("react/jsx-runtime").JSX.Element;
|
|
184
|
+
displayName: string;
|
|
185
|
+
};
|
|
186
|
+
type StatusProps = ComponentPropsWithRef<typeof ComboboxPrimitive.Status>;
|
|
187
|
+
/**
|
|
188
|
+
* Announces the state of a list that is still loading. Use it for the wait on a
|
|
189
|
+
* remote search: keep it mounted and swap its children. It does not mark the
|
|
190
|
+
* surface busy on its own — pass `aria-busy` to `Content` while the request is in
|
|
191
|
+
* flight, as Base UI's own examples do.
|
|
192
|
+
*
|
|
193
|
+
* @summary Politely announced status message for an async list
|
|
194
|
+
* @dataAttribute {string} data-slot - Always set to "combobox-status"
|
|
195
|
+
*/
|
|
196
|
+
export declare const Status: {
|
|
197
|
+
({ className, ...props }: StatusProps): import("react/jsx-runtime").JSX.Element;
|
|
198
|
+
displayName: string;
|
|
199
|
+
};
|
|
200
|
+
export {};
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn as e } from "../../lib/utils.js";
|
|
3
|
+
import { useMergeProps as t } from "../../lib/merge-props.js";
|
|
4
|
+
import { ComboboxRoot as n } from "../../node_modules/@base-ui/react/combobox/root/ComboboxRoot.js";
|
|
5
|
+
import { ComboboxInput as r } from "../../node_modules/@base-ui/react/combobox/input/ComboboxInput.js";
|
|
6
|
+
import { ComboboxList as i } from "../../node_modules/@base-ui/react/combobox/list/ComboboxList.js";
|
|
7
|
+
import { ComboboxStatus as a } from "../../node_modules/@base-ui/react/combobox/status/ComboboxStatus.js";
|
|
8
|
+
import { ComboboxPortal as o } from "../../node_modules/@base-ui/react/combobox/portal/ComboboxPortal.js";
|
|
9
|
+
import { ComboboxPositioner as s } from "../../node_modules/@base-ui/react/combobox/positioner/ComboboxPositioner.js";
|
|
10
|
+
import { ComboboxPopup as c } from "../../node_modules/@base-ui/react/combobox/popup/ComboboxPopup.js";
|
|
11
|
+
import { ComboboxItem as l } from "../../node_modules/@base-ui/react/combobox/item/ComboboxItem.js";
|
|
12
|
+
import { ComboboxEmpty as u } from "../../node_modules/@base-ui/react/combobox/empty/ComboboxEmpty.js";
|
|
13
|
+
import { ComboboxClear as d } from "../../node_modules/@base-ui/react/combobox/clear/ComboboxClear.js";
|
|
14
|
+
import { InputContext as f } from "../input/context.js";
|
|
15
|
+
import { inputRecipe as p } from "../input/input.js";
|
|
16
|
+
import { IconCancel as m } from "./icons.js";
|
|
17
|
+
import { tv as h } from "tailwind-variants";
|
|
18
|
+
import { use as g } from "react";
|
|
19
|
+
import { jsx as _, jsxs as v } from "react/jsx-runtime";
|
|
20
|
+
//#region src/combobox/combobox.tsx
|
|
21
|
+
var y = h({ slots: {
|
|
22
|
+
field: "relative",
|
|
23
|
+
clear: [
|
|
24
|
+
"absolute top-1/2 right-3 flex size-6 -translate-y-1/2 cursor-pointer items-center",
|
|
25
|
+
"justify-center rounded-sm [&>svg>path]:fill-icon-input-default",
|
|
26
|
+
"hover:[&>svg>path]:fill-icon-default-base-primary",
|
|
27
|
+
"disabled:cursor-default disabled:[&>svg>path]:fill-icon-input-disable"
|
|
28
|
+
],
|
|
29
|
+
content: [
|
|
30
|
+
"w-(--anchor-width) max-h-(--available-height) overflow-hidden rounded-md",
|
|
31
|
+
"border border-border-default-base-primary bg-bg-default-base-primary shadow-lg",
|
|
32
|
+
"data-[side=bottom]:origin-top data-[side=top]:origin-bottom",
|
|
33
|
+
"transition-[scale,opacity] duration-100 ease-in-out",
|
|
34
|
+
"data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
|
|
35
|
+
"data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
|
|
36
|
+
"motion-reduce:transition-none"
|
|
37
|
+
],
|
|
38
|
+
list: ["max-h-[min(10.25rem,var(--available-height))] overflow-y-auto scroll-py-2 py-2 outline-none", "data-empty:py-0"],
|
|
39
|
+
item: [
|
|
40
|
+
"mx-2 my-px flex cursor-pointer items-center rounded-[calc(var(--radius-md)-2px)]",
|
|
41
|
+
"px-3 py-2 text-sm text-text-default-base-primary select-none",
|
|
42
|
+
"data-highlighted:bg-bg-default-base-primary-hover",
|
|
43
|
+
"data-disabled:cursor-default data-disabled:text-text-default-base-tertiary"
|
|
44
|
+
],
|
|
45
|
+
message: ["mx-2 my-px px-3 py-2 text-sm text-text-default-base-tertiary", "empty:m-0 empty:p-0"]
|
|
46
|
+
} }), b = y(), x = (e) => /* @__PURE__ */ _(n, { ...e });
|
|
47
|
+
x.displayName = "Combobox.Root";
|
|
48
|
+
var S = /* @__PURE__ */ new Set([
|
|
49
|
+
"value",
|
|
50
|
+
"defaultValue",
|
|
51
|
+
"onChange"
|
|
52
|
+
]), C = (e) => {
|
|
53
|
+
let n = g(f), r = n ? Object.fromEntries(Object.entries(n).filter(([e]) => !S.has(e))) : null;
|
|
54
|
+
return t(r, e);
|
|
55
|
+
}, w = ({ clearLabel: t = "Clear", ...n }) => {
|
|
56
|
+
let { className: i, size: a = "md", ...o } = C(n);
|
|
57
|
+
return /* @__PURE__ */ v("div", {
|
|
58
|
+
"data-slot": "combobox-field",
|
|
59
|
+
className: b.field(),
|
|
60
|
+
children: [/* @__PURE__ */ _(r, {
|
|
61
|
+
"data-slot": "combobox-input",
|
|
62
|
+
"data-size": a,
|
|
63
|
+
className: e(p({ size: a }), "pr-11", i),
|
|
64
|
+
...o
|
|
65
|
+
}), /* @__PURE__ */ _(d, {
|
|
66
|
+
"data-slot": "combobox-clear",
|
|
67
|
+
"aria-label": t,
|
|
68
|
+
className: b.clear(),
|
|
69
|
+
children: /* @__PURE__ */ _(m, {})
|
|
70
|
+
})]
|
|
71
|
+
});
|
|
72
|
+
};
|
|
73
|
+
w.displayName = "Combobox.Input";
|
|
74
|
+
var T = ({ className: t, side: n = "bottom", align: r = "start", sideOffset: i = 12, alignOffset: a, anchor: l, collisionPadding: u = 8, ...d }) => /* @__PURE__ */ _(o, { children: /* @__PURE__ */ _(s, {
|
|
75
|
+
side: n,
|
|
76
|
+
align: r,
|
|
77
|
+
sideOffset: i,
|
|
78
|
+
alignOffset: a,
|
|
79
|
+
anchor: l,
|
|
80
|
+
collisionPadding: u,
|
|
81
|
+
className: "isolate z-(--z-index-top-layer) pointer-events-auto",
|
|
82
|
+
children: /* @__PURE__ */ _(c, {
|
|
83
|
+
"data-slot": "combobox-content",
|
|
84
|
+
className: e(b.content(), t),
|
|
85
|
+
...d
|
|
86
|
+
})
|
|
87
|
+
}) });
|
|
88
|
+
T.displayName = "Combobox.Content";
|
|
89
|
+
var E = ({ className: t, ...n }) => {
|
|
90
|
+
let r = "aria-label" in n || "aria-labelledby" in n;
|
|
91
|
+
return /* @__PURE__ */ _(i, {
|
|
92
|
+
"data-slot": "combobox-list",
|
|
93
|
+
"aria-label": r ? void 0 : "Suggestions",
|
|
94
|
+
className: e(b.list(), t),
|
|
95
|
+
...n
|
|
96
|
+
});
|
|
97
|
+
};
|
|
98
|
+
E.displayName = "Combobox.List";
|
|
99
|
+
var D = ({ className: t, ...n }) => /* @__PURE__ */ _(l, {
|
|
100
|
+
"data-slot": "combobox-item",
|
|
101
|
+
className: e(b.item(), t),
|
|
102
|
+
...n
|
|
103
|
+
});
|
|
104
|
+
D.displayName = "Combobox.Item";
|
|
105
|
+
var O = ({ className: t, ...n }) => /* @__PURE__ */ _(u, {
|
|
106
|
+
"data-slot": "combobox-empty",
|
|
107
|
+
className: e(b.message(), t),
|
|
108
|
+
...n
|
|
109
|
+
});
|
|
110
|
+
O.displayName = "Combobox.Empty";
|
|
111
|
+
var k = ({ className: t, ...n }) => /* @__PURE__ */ _(a, {
|
|
112
|
+
"data-slot": "combobox-status",
|
|
113
|
+
className: e(b.message(), t),
|
|
114
|
+
...n
|
|
115
|
+
});
|
|
116
|
+
k.displayName = "Combobox.Status";
|
|
117
|
+
//#endregion
|
|
118
|
+
export { T as Content, O as Empty, w as Input, D as Item, E as List, x as Root, k as Status, y as comboboxRecipe };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { SVGProps } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Circled cross rendered inside `Combobox.Clear`, the affordance the legacy
|
|
4
|
+
* search field used. Fill color is supplied by the surrounding class
|
|
5
|
+
* (`[&>path]:fill-...`) so the icon follows the button's state instead of
|
|
6
|
+
* carrying a color of its own.
|
|
7
|
+
*
|
|
8
|
+
* @summary 24px cancel icon used as the Combobox clear affordance
|
|
9
|
+
*/
|
|
10
|
+
export declare const IconCancel: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
//#region src/combobox/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: "M12 13.0538L15.0731 16.1269C15.2115 16.2654 15.3856 16.3362 15.5952 16.3394C15.8048 16.3426 15.982 16.2718 16.1269 16.1269C16.2718 15.982 16.3442 15.8064 16.3442 15.6C16.3442 15.3936 16.2718 15.218 16.1269 15.0731L13.0538 12L16.1269 8.9269C16.2653 8.78845 16.3362 8.61442 16.3394 8.4048C16.3426 8.1952 16.2718 8.01797 16.1269 7.8731C15.982 7.72822 15.8064 7.65577 15.6 7.65577C15.3936 7.65577 15.2179 7.72822 15.0731 7.8731L12 10.9462L8.92688 7.8731C8.78842 7.73463 8.61439 7.6638 8.40478 7.6606C8.19518 7.65738 8.01794 7.72822 7.87308 7.8731C7.72819 8.01797 7.65575 8.1936 7.65575 8.4C7.65575 8.6064 7.72819 8.78203 7.87308 8.9269L10.9461 12L7.87308 15.0731C7.73461 15.2115 7.66378 15.3856 7.66058 15.5952C7.65736 15.8048 7.72819 15.982 7.87308 16.1269C8.01794 16.2718 8.19358 16.3442 8.39998 16.3442C8.60638 16.3442 8.78201 16.2718 8.92688 16.1269L12 13.0538ZM12.0016 21.5C10.6877 21.5 9.45268 21.2506 8.29655 20.752C7.1404 20.2533 6.13472 19.5766 5.2795 18.7217C4.42427 17.8669 3.74721 16.8616 3.24833 15.706C2.74944 14.5504 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45271 3.248 8.29657C3.74667 7.14042 4.42342 6.13474 5.27825 5.27952C6.1331 4.42429 7.13834 3.74723 8.29398 3.24835C9.44959 2.74947 10.6844 2.50002 11.9983 2.50002C13.3122 2.50002 14.5473 2.74936 15.7034 3.24802C16.8596 3.74669 17.8652 4.42344 18.7205 5.27827C19.5757 6.13312 20.2527 7.13837 20.7516 8.294C21.2505 9.44962 21.5 10.6844 21.5 11.9983C21.5 13.3123 21.2506 14.5473 20.752 15.7034C20.2533 16.8596 19.5765 17.8653 18.7217 18.7205C17.8669 19.5757 16.8616 20.2528 15.706 20.7516C14.5504 21.2505 13.3156 21.5 12.0016 21.5ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76664 4 7.87498 4.775 6.32498 6.325C4.77498 7.875 3.99998 9.76667 3.99998 12C3.99998 14.2333 4.77498 16.125 6.32498 17.675C7.87498 19.225 9.76664 20 12 20Z" })
|
|
11
|
+
});
|
|
12
|
+
//#endregion
|
|
13
|
+
export { t as IconCancel };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
export { comboboxRecipe } from './combobox';
|
|
2
|
+
export declare const Combobox: {
|
|
3
|
+
Root: {
|
|
4
|
+
<Value, Multiple extends boolean | undefined = false, Item = Value>(props: import("@base-ui/react/combobox").ComboboxRoot.Props<Value, Multiple, Item>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
displayName: string;
|
|
6
|
+
};
|
|
7
|
+
Input: {
|
|
8
|
+
({ clearLabel, ...props }: Omit<Omit<import('@base-ui/react/combobox').ComboboxInputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>, "size"> & {
|
|
9
|
+
size?: import('../input').InputSize;
|
|
10
|
+
clearLabel?: string;
|
|
11
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
displayName: string;
|
|
13
|
+
};
|
|
14
|
+
Content: {
|
|
15
|
+
({ className, side, align, sideOffset, alignOffset, anchor, collisionPadding, ...props }: Omit<import('@base-ui/react/combobox').ComboboxPopupProps, "ref"> & import('react').RefAttributes<HTMLDivElement> & Pick<Omit<import('@base-ui/react/combobox').ComboboxPositionerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "anchor" | "align" | "side" | "sideOffset" | "alignOffset" | "collisionPadding">): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
displayName: string;
|
|
17
|
+
};
|
|
18
|
+
List: {
|
|
19
|
+
({ className, ...props }: Omit<import('@base-ui/react/combobox').ComboboxListProps, "ref"> & import('react').RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
displayName: string;
|
|
21
|
+
};
|
|
22
|
+
Item: {
|
|
23
|
+
({ className, ...props }: Omit<import('@base-ui/react/combobox').ComboboxItemProps, "ref"> & import('react').RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
displayName: string;
|
|
25
|
+
};
|
|
26
|
+
Empty: {
|
|
27
|
+
({ className, ...props }: Omit<import('@base-ui/react/combobox').ComboboxEmptyProps, "ref"> & import('react').RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
displayName: string;
|
|
29
|
+
};
|
|
30
|
+
Status: {
|
|
31
|
+
({ className, ...props }: Omit<import('@base-ui/react/combobox').ComboboxStatusProps, "ref"> & import('react').RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
|
|
32
|
+
displayName: string;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Content as e, Empty as t, Input as n, Item as r, List as i, Root as a, Status as o, comboboxRecipe as s } from "./combobox.js";
|
|
2
|
+
//#region src/combobox/index.ts
|
|
3
|
+
var c = {
|
|
4
|
+
Root: a,
|
|
5
|
+
Input: n,
|
|
6
|
+
Content: e,
|
|
7
|
+
List: i,
|
|
8
|
+
Item: r,
|
|
9
|
+
Empty: t,
|
|
10
|
+
Status: o
|
|
11
|
+
};
|
|
12
|
+
//#endregion
|
|
13
|
+
export { c as Combobox, s as comboboxRecipe };
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
2
|
+
import { InputContext as e } from "../input/context.js";
|
|
3
|
+
import { useFieldContext as t } from "../field/context.js";
|
|
4
|
+
import { Field as n } from "../field/index.js";
|
|
5
5
|
import { jsx as r } from "react/jsx-runtime";
|
|
6
6
|
//#region src/field-text/field-text.tsx
|
|
7
|
-
var i = ({ children:
|
|
8
|
-
let i =
|
|
7
|
+
var i = ({ children: n }) => {
|
|
8
|
+
let i = t(), a = i && {
|
|
9
9
|
id: i.controlId,
|
|
10
10
|
"aria-describedby": i.describedBy,
|
|
11
11
|
"aria-invalid": i.invalid || void 0,
|
|
@@ -13,12 +13,12 @@ var i = ({ children: t }) => {
|
|
|
13
13
|
disabled: i.disabled || void 0,
|
|
14
14
|
readOnly: i.readOnly || void 0
|
|
15
15
|
};
|
|
16
|
-
return /* @__PURE__ */ r(
|
|
16
|
+
return /* @__PURE__ */ r(e, {
|
|
17
17
|
value: a,
|
|
18
|
-
children:
|
|
18
|
+
children: n
|
|
19
19
|
});
|
|
20
|
-
}, a = ({ children: e, ...
|
|
21
|
-
...
|
|
20
|
+
}, a = ({ children: e, ...t }) => /* @__PURE__ */ r(n.Root, {
|
|
21
|
+
...t,
|
|
22
22
|
children: /* @__PURE__ */ r(i, { children: e })
|
|
23
23
|
});
|
|
24
24
|
a.displayName = "FieldText";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { mergeProps as e } from "../../lib/merge-props.js";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { Input as t } from "../input/input.js";
|
|
4
|
+
import { Field as n } from "../field/index.js";
|
|
5
5
|
import { FieldText as r } from "../field-text/field-text.js";
|
|
6
6
|
import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
7
7
|
import { useController as o } from "react-hook-form";
|
|
@@ -23,15 +23,15 @@ var s = ({ name: s, control: c, rules: l, shouldUnregister: u, disabled: d, labe
|
|
|
23
23
|
invalid: b.invalid,
|
|
24
24
|
disabled: d || y.disabled,
|
|
25
25
|
...v,
|
|
26
|
-
children: [/* @__PURE__ */ i(
|
|
26
|
+
children: [/* @__PURE__ */ i(n.Label, {
|
|
27
27
|
tooltip: m,
|
|
28
28
|
tooltipSide: h,
|
|
29
29
|
optional: g,
|
|
30
30
|
children: f
|
|
31
|
-
}), /* @__PURE__ */ a(
|
|
32
|
-
/* @__PURE__ */ i(
|
|
33
|
-
p && /* @__PURE__ */ i(
|
|
34
|
-
/* @__PURE__ */ i(
|
|
31
|
+
}), /* @__PURE__ */ a(n.Content, { children: [
|
|
32
|
+
/* @__PURE__ */ i(t, { ...e(x, _ ?? {}) }),
|
|
33
|
+
p && /* @__PURE__ */ i(n.Description, { children: p }),
|
|
34
|
+
/* @__PURE__ */ i(n.Error, { errors: b.error ? [b.error] : void 0 })
|
|
35
35
|
] })]
|
|
36
36
|
});
|
|
37
37
|
};
|