@ngrok/mantle 0.76.11 → 0.77.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/dist/agent.json +4 -1
- package/dist/alert-dialog.js +1 -1
- package/dist/browser-only-CPH56Xw_.js +1 -0
- package/dist/browser-only.js +1 -1
- package/dist/checkbox-Apow0ipK.js +1 -0
- package/dist/checkbox.d.ts +4 -0
- package/dist/checkbox.js +1 -1
- package/dist/choice-D6S38dPs.js +1 -0
- package/dist/choice.d.ts +251 -0
- package/dist/choice.js +1 -0
- package/dist/code-block.js +1 -1
- package/dist/command.js +1 -1
- package/dist/{copy-to-clipboard-Baw30q9O.js → copy-to-clipboard-BsCQ9m6K.js} +1 -1
- package/dist/{dialog-Cp0S2jsG.js → dialog-uyJcNks7.js} +1 -1
- package/dist/dialog.js +1 -1
- package/dist/field.js +1 -1
- package/dist/hooks.d.ts +127 -67
- package/dist/hooks.js +1 -1
- package/dist/icons.js +1 -1
- package/dist/{in-view-BC3wmz-a.d.ts → in-view-bItE1fkG.d.ts} +20 -4
- package/dist/input-B3TS9yAP.js +1 -0
- package/dist/input.d.ts +1 -46
- package/dist/input.js +1 -1
- package/dist/label-PY0qM0G5.d.ts +69 -0
- package/dist/label.d.ts +1 -68
- package/dist/list.d.ts +337 -0
- package/dist/list.js +1 -0
- package/dist/llms.txt +4 -1
- package/dist/multi-select.js +1 -1
- package/dist/pagination.js +1 -1
- package/dist/{primitive-BFUir4UB.js → primitive-BuVqb6zf.js} +1 -1
- package/dist/{select-xfyY5Vt1.js → select-Bxq_N-_o.js} +1 -1
- package/dist/select.js +1 -1
- package/dist/selectable-list.d.ts +711 -0
- package/dist/selectable-list.js +1 -0
- package/dist/sheet.js +1 -1
- package/dist/switch.d.ts +4 -0
- package/dist/tabs.js +1 -1
- package/dist/{theme-provider-BNFS3Acf.js → theme-provider-C5XYi2-H.js} +1 -1
- package/dist/theme.d.ts +3 -3
- package/dist/theme.js +1 -1
- package/dist/{toast-Bwno5LUs.js → toast-CZBWjXcP.js} +1 -1
- package/dist/toast.js +1 -1
- package/dist/types-CTam1uIW.d.ts +47 -0
- package/dist/use-copy-to-clipboard-DqQ0_N3E.js +1 -0
- package/dist/{use-prefers-reduced-motion-CWIoFA6W.js → use-prefers-reduced-motion-DBqNw1wB.js} +1 -1
- package/dist/utils.d.ts +1 -1
- package/dist/utils.js +1 -1
- package/dist/virtual-PBNiHjMK.js +1 -0
- package/package.json +64 -332
- package/dist/browser-only-BSl_hruR.js +0 -1
- package/dist/use-copy-to-clipboard-BLpquU9d.js +0 -1
package/dist/list.d.ts
ADDED
|
@@ -0,0 +1,337 @@
|
|
|
1
|
+
import { t as WithAsChild } from "./as-child-uN_018tj.js";
|
|
2
|
+
import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/components/list/primitive.d.ts
|
|
5
|
+
/**
|
|
6
|
+
* ARIA semantics for a {@link Root} / `VirtualRoot` collection and its
|
|
7
|
+
* {@link Item}s. The element is always a `<div>` — per WAI-ARIA the *role*
|
|
8
|
+
* carries the semantics, not the tag — so both flavors share one implementation.
|
|
9
|
+
*
|
|
10
|
+
* - `"list"` → `<div role="list">` of `<div role="listitem">` rows: a
|
|
11
|
+
* non-selecting list of actions/links (e.g. `List`). Native tab
|
|
12
|
+
* order, with `ArrowUp` / `ArrowDown` / `Home` / `End` moving real focus
|
|
13
|
+
* between the rows' controls (skipping disabled rows).
|
|
14
|
+
* - `"grid"` → `<div role="grid">` of `<div role="row">` rows carrying
|
|
15
|
+
* `aria-selected`, whose children are the `role="gridcell"`s (e.g.
|
|
16
|
+
* `SelectableList`): a single tab stop with `aria-activedescendant`
|
|
17
|
+
* navigation that works across a virtualized window.
|
|
18
|
+
*
|
|
19
|
+
* @see https://mantle.ngrok.com/components/list
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* <Root semantics="grid" aria-label="Access keys" onActivate={toggleByIndex}>
|
|
24
|
+
* <Item selected>
|
|
25
|
+
* <div role="gridcell">Onboarding key</div>
|
|
26
|
+
* </Item>
|
|
27
|
+
* </Root>
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
30
|
+
type ListSemantics = "list" | "grid";
|
|
31
|
+
/** Shared collection semantics, provided by {@link Root} / `VirtualRoot` and read by every {@link Item}. */
|
|
32
|
+
/**
|
|
33
|
+
* Props for {@link Root} / `VirtualRoot`. Standard `<div>` props (on the scroll
|
|
34
|
+
* viewport) plus the collection `semantics` and the grid activation callback;
|
|
35
|
+
* `aria-label` / `aria-labelledby` name the inner collection element, and
|
|
36
|
+
* `children` are the composed {@link Item}s.
|
|
37
|
+
*
|
|
38
|
+
* @see https://mantle.ngrok.com/components/list
|
|
39
|
+
*
|
|
40
|
+
* @example
|
|
41
|
+
* ```tsx
|
|
42
|
+
* <Root semantics="list" aria-label="Accounts" className="max-h-80">
|
|
43
|
+
* <Item>
|
|
44
|
+
* <button type="button">Acme Inc</button>
|
|
45
|
+
* </Item>
|
|
46
|
+
* </Root>
|
|
47
|
+
* ```
|
|
48
|
+
*/
|
|
49
|
+
type ListRootProps$1 = ComponentProps<"div"> & {
|
|
50
|
+
/** ARIA semantics for the collection and its rows. Defaults to `"list"`. */semantics?: ListSemantics;
|
|
51
|
+
/**
|
|
52
|
+
* Called with the active row's index when it is activated under `"grid"`
|
|
53
|
+
* semantics — by keyboard (`Space` / `Enter`) or by a bare click anywhere on
|
|
54
|
+
* the row that isn't handled by an interactive descendant (a checkbox, a
|
|
55
|
+
* label, a nested link/button). Wire it to selection.
|
|
56
|
+
*/
|
|
57
|
+
onActivate?: (index: number) => void;
|
|
58
|
+
/**
|
|
59
|
+
* The DOM id that `aria-activedescendant` resolves to for a given row index.
|
|
60
|
+
* Defaults to a per-collection row id set on the {@link Item} element. Override
|
|
61
|
+
* it to reference an element you own (e.g. the row's checkbox) when your row
|
|
62
|
+
* element can't take that id.
|
|
63
|
+
*/
|
|
64
|
+
itemId?: (index: number) => string;
|
|
65
|
+
/**
|
|
66
|
+
* Whether the row at an index is disabled — skipped by keyboard navigation
|
|
67
|
+
* and excluded from grid activation. Defaults to reading the composed row
|
|
68
|
+
* element's `disabled` prop (covering `<Item disabled>`); pass it when
|
|
69
|
+
* disabled state lives in your data rather than on the row elements (e.g.
|
|
70
|
+
* `SelectableList` reads it off `options[].disabled`).
|
|
71
|
+
*/
|
|
72
|
+
isItemDisabled?: (index: number) => boolean;
|
|
73
|
+
};
|
|
74
|
+
/**
|
|
75
|
+
* Whether a composed row child is disabled — read from the `disabled` prop it
|
|
76
|
+
* declares (e.g. `<Item disabled>`). The default keyboard-navigation disabled
|
|
77
|
+
* source (see `ListRootProps["isItemDisabled"]`), derived from the row *elements*
|
|
78
|
+
* (not the live DOM) so it works for windowed rows that aren't mounted. Safe
|
|
79
|
+
* over an arbitrary node: non-elements and rows without the prop read as enabled.
|
|
80
|
+
*/
|
|
81
|
+
//#endregion
|
|
82
|
+
//#region src/components/list/virtual.d.ts
|
|
83
|
+
/**
|
|
84
|
+
* Props for {@link VirtualRoot}. The same surface as the plain `Root` plus the
|
|
85
|
+
* virtualizer knobs.
|
|
86
|
+
*
|
|
87
|
+
* @see https://mantle.ngrok.com/components/list
|
|
88
|
+
*
|
|
89
|
+
* @example
|
|
90
|
+
* ```tsx
|
|
91
|
+
* <VirtualRoot aria-label="Accounts" className="max-h-80" estimateItemHeight={36} overscan={12}>
|
|
92
|
+
* <Item>
|
|
93
|
+
* <button type="button">Acme Inc</button>
|
|
94
|
+
* </Item>
|
|
95
|
+
* </VirtualRoot>
|
|
96
|
+
* ```
|
|
97
|
+
*/
|
|
98
|
+
type VirtualRootProps = ListRootProps$1 & {
|
|
99
|
+
/** Estimated item height in px, used to seed the virtualizer before items are measured. */estimateItemHeight?: number; /** Rows rendered beyond the visible window on each side. The buffer keeps the active row mounted for `aria-activedescendant`. */
|
|
100
|
+
overscan?: number;
|
|
101
|
+
};
|
|
102
|
+
/**
|
|
103
|
+
* The windowed counterpart to `Root`: renders only the visible slice of its
|
|
104
|
+
* composed `Item` children via `@tanstack/react-virtual`, sharing the plain
|
|
105
|
+
* shell's chrome, semantics, and — for a grid — `aria-activedescendant`
|
|
106
|
+
* keyboard navigation. Authored identically to `Root` (you still compose `<Item>`
|
|
107
|
+
* children), so swapping in virtualization never changes the call site. This
|
|
108
|
+
* module is the sole importer of `@tanstack/react-virtual`; because the `List`
|
|
109
|
+
* namespace (and both higher-level list components) re-export `VirtualRoot`,
|
|
110
|
+
* the dependency ships with every list entrypoint — it is small (~a few kB
|
|
111
|
+
* gzipped) and does no windowing work until a `VirtualRoot` actually renders.
|
|
112
|
+
*
|
|
113
|
+
* Grid navigation works across the **full** collection, not just the window:
|
|
114
|
+
* arrow keys move an active index over all rows, `scrollToIndex` reveals + mounts
|
|
115
|
+
* the active row, and focus stays on the collection (never on a row) so it
|
|
116
|
+
* survives windowing. Each windowed row still carries its position —
|
|
117
|
+
* `aria-posinset` / `aria-setsize` on a listitem, `aria-rowindex` (with
|
|
118
|
+
* `aria-rowcount` on the grid) on a grid row. `overscan` keeps the active row
|
|
119
|
+
* mounted through nearby scrolling; if it is mouse-scrolled fully out of the
|
|
120
|
+
* window, the `aria-activedescendant` reference is dropped until keyboard
|
|
121
|
+
* navigation re-mounts it. **Bound the height** so the virtualizer has a
|
|
122
|
+
* viewport to measure.
|
|
123
|
+
*
|
|
124
|
+
* @see https://mantle.ngrok.com/components/list
|
|
125
|
+
*
|
|
126
|
+
* @example
|
|
127
|
+
* ```tsx
|
|
128
|
+
* <VirtualRoot semantics="grid" aria-label="Access keys" className="max-h-80" onActivate={toggleByIndex}>
|
|
129
|
+
* {keys.map((key) => (
|
|
130
|
+
* <Item key={key.id} selected={selected.has(key.id)}>
|
|
131
|
+
* <div role="gridcell"><Checkbox checked={selected.has(key.id)} tabIndex={-1} /></div>
|
|
132
|
+
* <div role="gridcell">{key.name}</div>
|
|
133
|
+
* </Item>
|
|
134
|
+
* ))}
|
|
135
|
+
* </VirtualRoot>
|
|
136
|
+
* ```
|
|
137
|
+
*/
|
|
138
|
+
//#endregion
|
|
139
|
+
//#region src/components/list/list.d.ts
|
|
140
|
+
/**
|
|
141
|
+
* Props for `List.Root` — the internal list primitive's `Root` props, minus
|
|
142
|
+
* `semantics` (a `List` is always a `role="list"`) and the grid-only
|
|
143
|
+
* `onActivate` / `itemId` knobs (inert under list semantics).
|
|
144
|
+
*
|
|
145
|
+
* @see https://mantle.ngrok.com/components/list
|
|
146
|
+
*
|
|
147
|
+
* @example
|
|
148
|
+
* ```tsx
|
|
149
|
+
* <List.Root aria-label="Your accounts" className="max-h-80">
|
|
150
|
+
* <List.Item onClick={() => {}}>
|
|
151
|
+
* <List.ItemTitle>Acme Inc</List.ItemTitle>
|
|
152
|
+
* <List.ItemDescription>Pay-as-you-go</List.ItemDescription>
|
|
153
|
+
* </List.Item>
|
|
154
|
+
* </List.Root>
|
|
155
|
+
* ```
|
|
156
|
+
*/
|
|
157
|
+
type ListRootProps = Omit<ListRootProps$1, "semantics" | "onActivate" | "itemId" | "isItemDisabled">;
|
|
158
|
+
/**
|
|
159
|
+
* Props for `List.VirtualRoot` — the internal list primitive's
|
|
160
|
+
* `VirtualRoot` props (viewport props plus `estimateItemHeight` / `overscan`),
|
|
161
|
+
* minus `semantics` and the grid-only `onActivate` / `itemId` knobs.
|
|
162
|
+
*
|
|
163
|
+
* @see https://mantle.ngrok.com/components/list
|
|
164
|
+
*
|
|
165
|
+
* @example
|
|
166
|
+
* ```tsx
|
|
167
|
+
* <List.VirtualRoot aria-label="Your accounts" className="max-h-80" estimateItemHeight={44}>
|
|
168
|
+
* <List.Item onClick={() => {}}>
|
|
169
|
+
* <List.ItemTitle>Acme Inc</List.ItemTitle>
|
|
170
|
+
* <List.ItemDescription>Pay-as-you-go</List.ItemDescription>
|
|
171
|
+
* </List.Item>
|
|
172
|
+
* </List.VirtualRoot>
|
|
173
|
+
* ```
|
|
174
|
+
*/
|
|
175
|
+
type ListVirtualRootProps = Omit<VirtualRootProps, "semantics" | "onActivate" | "itemId" | "isItemDisabled">;
|
|
176
|
+
/**
|
|
177
|
+
* Props for `List.Item`. Extends `<button>` props (minus `type`, which is fixed
|
|
178
|
+
* to `"button"`) with `asChild` and the optional `current` accent.
|
|
179
|
+
*
|
|
180
|
+
* @see https://mantle.ngrok.com/components/list
|
|
181
|
+
*
|
|
182
|
+
* @example
|
|
183
|
+
* ```tsx
|
|
184
|
+
* <List.Root aria-label="Your accounts" className="max-h-80">
|
|
185
|
+
* <List.Item current onClick={() => {}}>
|
|
186
|
+
* <List.ItemTitle>Acme Inc</List.ItemTitle>
|
|
187
|
+
* <List.ItemDescription>Pay-as-you-go</List.ItemDescription>
|
|
188
|
+
* </List.Item>
|
|
189
|
+
* </List.Root>
|
|
190
|
+
* ```
|
|
191
|
+
*/
|
|
192
|
+
type ListItemProps = Omit<ComponentProps<"button">, "type"> & WithAsChild & {
|
|
193
|
+
/**
|
|
194
|
+
* Marks the item as the current one (e.g. the active account) — gives its
|
|
195
|
+
* pill the accent tint and sets `aria-current` so the state is announced,
|
|
196
|
+
* not just shown. Optional; omit it for a plain action/navigation list.
|
|
197
|
+
*/
|
|
198
|
+
current?: boolean;
|
|
199
|
+
};
|
|
200
|
+
/**
|
|
201
|
+
* A scrollable, optionally-virtualized list of clickable items — the action /
|
|
202
|
+
* navigation counterpart to `SelectableList` (e.g. an account switcher or SSO
|
|
203
|
+
* provider picker). Compose `List.Item` children directly inside a
|
|
204
|
+
* `List.Root`; each item is a `<button>` (or your own element via
|
|
205
|
+
* `asChild`, e.g. an `<a>`), with an optional `current` accent.
|
|
206
|
+
*
|
|
207
|
+
* It is a **non-selecting** semantic list (`role="list"` of `role="listitem"`),
|
|
208
|
+
* not a selection widget — selection is `SelectableList`'s job. Non-virtualized
|
|
209
|
+
* by default; swap `Root` → `VirtualRoot` (same children) for windowing.
|
|
210
|
+
* Both public list components are built on the same internal list primitive
|
|
211
|
+
* (`./primitive.js`, deliberately unexported — like `dialog/primitive`). Items
|
|
212
|
+
* keep their native tab order, and `ArrowUp` / `ArrowDown` / `Home` / `End`
|
|
213
|
+
* also move focus between them — the focused item tints like hover instead of
|
|
214
|
+
* drawing a focus ring.
|
|
215
|
+
*
|
|
216
|
+
* @see https://mantle.ngrok.com/components/list
|
|
217
|
+
*
|
|
218
|
+
* @example
|
|
219
|
+
* Composition:
|
|
220
|
+
* ```
|
|
221
|
+
* List.Root (or .VirtualRoot)
|
|
222
|
+
* └── List.Item
|
|
223
|
+
* ├── List.ItemTitle
|
|
224
|
+
* └── List.ItemDescription
|
|
225
|
+
* ```
|
|
226
|
+
*
|
|
227
|
+
* @example
|
|
228
|
+
* ```tsx
|
|
229
|
+
* <List.Root aria-label="Your accounts" className="max-h-80">
|
|
230
|
+
* {accounts.map((account) => (
|
|
231
|
+
* <List.Item key={account.id} onClick={() => switchTo(account.id)}>
|
|
232
|
+
* <List.ItemTitle>{account.name}</List.ItemTitle>
|
|
233
|
+
* <List.ItemDescription>
|
|
234
|
+
* {account.plan} · {account.memberCount} members
|
|
235
|
+
* </List.ItemDescription>
|
|
236
|
+
* </List.Item>
|
|
237
|
+
* ))}
|
|
238
|
+
* </List.Root>
|
|
239
|
+
* ```
|
|
240
|
+
*/
|
|
241
|
+
declare const List: {
|
|
242
|
+
/**
|
|
243
|
+
* The scrollable container (non-virtualized). Give it an `aria-label` and
|
|
244
|
+
* bound its height. Compose `Item` children.
|
|
245
|
+
*
|
|
246
|
+
* @see https://mantle.ngrok.com/components/list
|
|
247
|
+
*
|
|
248
|
+
* @example
|
|
249
|
+
* ```tsx
|
|
250
|
+
* <List.Root aria-label="Your accounts" className="max-h-80">
|
|
251
|
+
* {accounts.map((account) => (
|
|
252
|
+
* <List.Item key={account.id} onClick={() => switchTo(account.id)}>
|
|
253
|
+
* <List.ItemTitle>{account.name}</List.ItemTitle>
|
|
254
|
+
* <List.ItemDescription>{account.plan}</List.ItemDescription>
|
|
255
|
+
* </List.Item>
|
|
256
|
+
* ))}
|
|
257
|
+
* </List.Root>
|
|
258
|
+
* ```
|
|
259
|
+
*/
|
|
260
|
+
readonly Root: import("react").ForwardRefExoticComponent<Omit<ListRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
261
|
+
/**
|
|
262
|
+
* The virtualized container — windows the same `Item` children. Opt in for
|
|
263
|
+
* long lists; authored identically to `Root`.
|
|
264
|
+
*
|
|
265
|
+
* @see https://mantle.ngrok.com/components/list
|
|
266
|
+
*
|
|
267
|
+
* @example
|
|
268
|
+
* ```tsx
|
|
269
|
+
* <List.VirtualRoot aria-label="Your accounts" className="max-h-80">
|
|
270
|
+
* {accounts.map((account) => (
|
|
271
|
+
* <List.Item key={account.id} onClick={() => switchTo(account.id)}>
|
|
272
|
+
* <List.ItemTitle>{account.name}</List.ItemTitle>
|
|
273
|
+
* <List.ItemDescription>{account.plan}</List.ItemDescription>
|
|
274
|
+
* </List.Item>
|
|
275
|
+
* ))}
|
|
276
|
+
* </List.VirtualRoot>
|
|
277
|
+
* ```
|
|
278
|
+
*/
|
|
279
|
+
readonly VirtualRoot: import("react").ForwardRefExoticComponent<Omit<ListVirtualRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
280
|
+
/**
|
|
281
|
+
* A clickable item — a `<button>` by default, or your own element via
|
|
282
|
+
* `asChild` (e.g. an `<a>`). Optional `current` gives the accent treatment.
|
|
283
|
+
*
|
|
284
|
+
* @see https://mantle.ngrok.com/components/list
|
|
285
|
+
*
|
|
286
|
+
* @example
|
|
287
|
+
* ```tsx
|
|
288
|
+
* <List.Root aria-label="Your accounts" className="max-h-80">
|
|
289
|
+
* {accounts.map((account) => (
|
|
290
|
+
* <List.Item key={account.id} onClick={() => switchTo(account.id)}>
|
|
291
|
+
* <List.ItemTitle>{account.name}</List.ItemTitle>
|
|
292
|
+
* <List.ItemDescription>{account.plan}</List.ItemDescription>
|
|
293
|
+
* </List.Item>
|
|
294
|
+
* ))}
|
|
295
|
+
* </List.Root>
|
|
296
|
+
* ```
|
|
297
|
+
*/
|
|
298
|
+
readonly Item: import("react").ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
299
|
+
/**
|
|
300
|
+
* Emphasized title line inside a `List.Item`.
|
|
301
|
+
*
|
|
302
|
+
* @see https://mantle.ngrok.com/components/list
|
|
303
|
+
*
|
|
304
|
+
* @example
|
|
305
|
+
* ```tsx
|
|
306
|
+
* <List.Root aria-label="Your accounts" className="max-h-80">
|
|
307
|
+
* {accounts.map((account) => (
|
|
308
|
+
* <List.Item key={account.id} onClick={() => switchTo(account.id)}>
|
|
309
|
+
* <List.ItemTitle>{account.name}</List.ItemTitle>
|
|
310
|
+
* <List.ItemDescription>{account.plan}</List.ItemDescription>
|
|
311
|
+
* </List.Item>
|
|
312
|
+
* ))}
|
|
313
|
+
* </List.Root>
|
|
314
|
+
* ```
|
|
315
|
+
*/
|
|
316
|
+
readonly ItemTitle: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
317
|
+
/**
|
|
318
|
+
* De-emphasized sub-line inside a `List.Item`.
|
|
319
|
+
*
|
|
320
|
+
* @see https://mantle.ngrok.com/components/list
|
|
321
|
+
*
|
|
322
|
+
* @example
|
|
323
|
+
* ```tsx
|
|
324
|
+
* <List.Root aria-label="Your accounts" className="max-h-80">
|
|
325
|
+
* {accounts.map((account) => (
|
|
326
|
+
* <List.Item key={account.id} onClick={() => switchTo(account.id)}>
|
|
327
|
+
* <List.ItemTitle>{account.name}</List.ItemTitle>
|
|
328
|
+
* <List.ItemDescription>{account.plan}</List.ItemDescription>
|
|
329
|
+
* </List.Item>
|
|
330
|
+
* ))}
|
|
331
|
+
* </List.Root>
|
|
332
|
+
* ```
|
|
333
|
+
*/
|
|
334
|
+
readonly ItemDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
335
|
+
};
|
|
336
|
+
//#endregion
|
|
337
|
+
export { List, type ListItemProps, type ListRootProps, type ListVirtualRootProps };
|
package/dist/list.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as e}from"./cx-C1UYP5We.js";import{t}from"./slot-DT_E5BQx.js";import{n,r,t as i}from"./virtual-PBNiHjMK.js";import{forwardRef as a}from"react";import{jsx as o}from"react/jsx-runtime";const s=a((e,t)=>o(r,{ref:t,semantics:`list`,...e}));s.displayName=`ListRoot`;const c=a((e,t)=>o(i,{ref:t,semantics:`list`,...e}));c.displayName=`ListVirtualRoot`;const l=a(({asChild:r,className:i,current:a,disabled:s,onClick:c,...l},u)=>o(n,{selected:a,disabled:s,children:o(r?t:`button`,{ref:u,"data-slot":`list-item-control`,"aria-current":a||void 0,...r?{"aria-disabled":s||void 0,tabIndex:s?-1:void 0}:{type:`button`,disabled:s},onClick:e=>{if(r&&s){e.preventDefault(),e.stopPropagation();return}c?.(e)},className:e(`flex w-full cursor-pointer flex-col gap-0.5 rounded-md bg-transparent px-2 py-1.5 text-left text-sm`,`disabled:cursor-default disabled:opacity-50 aria-disabled:cursor-default aria-disabled:opacity-50 aria-disabled:pointer-events-none`,`focus-visible:outline-hidden`,i),...l,onClickCapture:r&&s?e=>{e.preventDefault(),e.stopPropagation()}:l.onClickCapture})}));l.displayName=`ListItem`;const u=a(({className:t,...n},r)=>o(`span`,{ref:r,"data-slot":`list-item-title`,className:e(`text-strong font-medium`,t),...n}));u.displayName=`ListItemTitle`;const d=a(({className:t,...n},r)=>o(`span`,{ref:r,"data-slot":`list-item-description`,className:e(`text-body leading-4`,t),...n}));d.displayName=`ListItemDescription`;const f={Root:s,VirtualRoot:c,Item:l,ItemTitle:u,ItemDescription:d};export{f as List};
|
package/dist/llms.txt
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# @ngrok/mantle (0.
|
|
1
|
+
# @ngrok/mantle (0.77.0)
|
|
2
2
|
|
|
3
3
|
> Offline discovery hint shipped inside the @ngrok/mantle npm package. Authoritative metadata lives at https://mantle.ngrok.com/for-ai-agents.
|
|
4
4
|
|
|
@@ -29,6 +29,7 @@ Full text: https://mantle.ngrok.com/llms-full.txt
|
|
|
29
29
|
- `@ngrok/mantle/calendar`
|
|
30
30
|
- `@ngrok/mantle/card`
|
|
31
31
|
- `@ngrok/mantle/checkbox`
|
|
32
|
+
- `@ngrok/mantle/choice`
|
|
32
33
|
- `@ngrok/mantle/code`
|
|
33
34
|
- `@ngrok/mantle/code-block`
|
|
34
35
|
- `@ngrok/mantle/color`
|
|
@@ -50,6 +51,7 @@ Full text: https://mantle.ngrok.com/llms-full.txt
|
|
|
50
51
|
- `@ngrok/mantle/input`
|
|
51
52
|
- `@ngrok/mantle/kbd`
|
|
52
53
|
- `@ngrok/mantle/label`
|
|
54
|
+
- `@ngrok/mantle/list`
|
|
53
55
|
- `@ngrok/mantle/main`
|
|
54
56
|
- `@ngrok/mantle/media-object`
|
|
55
57
|
- `@ngrok/mantle/multi-select`
|
|
@@ -61,6 +63,7 @@ Full text: https://mantle.ngrok.com/llms-full.txt
|
|
|
61
63
|
- `@ngrok/mantle/radio-group`
|
|
62
64
|
- `@ngrok/mantle/sandboxed-on-click`
|
|
63
65
|
- `@ngrok/mantle/select`
|
|
66
|
+
- `@ngrok/mantle/selectable-list`
|
|
64
67
|
- `@ngrok/mantle/separator`
|
|
65
68
|
- `@ngrok/mantle/sheet`
|
|
66
69
|
- `@ngrok/mantle/skeleton`
|
package/dist/multi-select.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./compose-refs-Cjf2gfB8.js";import{t}from"./cx-C1UYP5We.js";import{t as n}from"./icon-SUx16Sl3.js";import{t as r}from"./slot-DT_E5BQx.js";import{a as i,r as a}from"./validation-DCyx-ceH.js";import{n as o}from"./separator-CqohKk4z.js";import{t as s}from"./field-context-4k1kI7Bo.js";import{t as c}from"./use-prefers-reduced-motion-CWIoFA6W.js";import{createContext as l,forwardRef as u,useCallback as d,useContext as f,useEffect as p,useMemo as m,useRef as h}from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";import{XIcon as y}from"@phosphor-icons/react/X";import{CheckIcon as b}from"@phosphor-icons/react/Check";import*as x from"@ariakit/react";import{LockIcon as S}from"@phosphor-icons/react/Lock";const C=e=>Array.isArray(e)&&e.every(e=>typeof e==`string`),w=[],T=l({current:null}),E=l({current:[]}),D=l({onInputKeyDownRef:{current:void 0},inputRef:{current:null}}),O=({children:e,defaultSelectedValue:t=w,...n})=>{let r=h(null),i=h(void 0),a=h(null),o=h([]),s=m(()=>({onInputKeyDownRef:i,inputRef:a}),[]);return _(T.Provider,{value:r,children:_(D.Provider,{value:s,children:_(E.Provider,{value:o,children:_(x.ComboboxProvider,{defaultSelectedValue:t,...n,children:e})})})})};O.displayName=`MultiSelect`;const k=u(({"aria-invalid":n,className:r,children:o,onKeyDown:s,onMouseDown:c,validation:l,...u},d)=>{let p=f(T),{inputRef:m}=f(D),h=x.useComboboxContext(),g=i(),{validation:v}=a({"aria-invalid":n,validation:l??g});return _(`div`,{role:`group`,"data-slot":`multi-select-trigger`,className:t(`cursor-text select-none font-sans text-sm`,`border-form bg-form text-strong flex min-h-9 w-full flex-wrap items-center gap-1 rounded-md border px-3 py-1 has-[[data-slot=multi-select-tag]]:px-1`,`has-focus:outline-hidden has-focus-within:ring-4 has-aria-expanded:ring-4`,`has-focus-within:border-accent-600 has-focus-within:ring-focus-accent has-aria-expanded:border-accent-600 has-aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:has-focus-within:border-success-600 data-validation-success:has-focus-within:ring-focus-success data-validation-success:has-aria-expanded:border-success-600 data-validation-success:has-aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:has-focus-within:border-warning-600 data-validation-warning:has-focus-within:ring-focus-warning data-validation-warning:has-aria-expanded:border-warning-600 data-validation-warning:has-aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:has-focus-within:border-danger-600 data-validation-error:has-focus-within:ring-focus-danger data-validation-error:has-aria-expanded:border-danger-600 data-validation-error:has-aria-expanded:ring-focus-danger`,r),"data-validation":v||void 0,onKeyDown:e=>{e.key===`Escape`&&h?.getState().open&&(e.preventDefault(),h.hide()),s?.(e)},onMouseDown:e=>{e.target instanceof HTMLElement&&!e.target.closest(`button, input, [role='option']`)&&(e.preventDefault(),m.current?.focus()),c?.(e)},ref:e(p,d),...u,children:o})});k.displayName=`MultiSelectTrigger`;const A=u(({className:r,value:i,onRemove:a,locked:o=!1,onKeyDown:s,...c},l)=>{let u=h(null);return v(`span`,{ref:e(u,l),role:`option`,"aria-selected":!0,tabIndex:-1,"data-slot":`multi-select-tag`,"data-locked":o||void 0,className:t(`cursor-default bg-neutral-500/10 border border-neutral-500/20 rounded-xs text-strong inline-flex items-center gap-1 pl-2 pr-0.5 py-0.5 text-sm font-normal`,`focus-visible:outline-hidden focus-visible:border-accent-600/50 focus-visible:ring-3 focus-visible:ring-focus-accent`,r),onKeyDown:e=>{if(o&&(e.key===`Backspace`||e.key===`Delete`)){e.preventDefault(),H(e.currentTarget);return}s?.(e)},...c,children:[i,_(`button`,{type:`button`,"aria-label":`Remove ${i}`,tabIndex:-1,"aria-disabled":o||void 0,className:t(`cursor-pointer text-strong/40 hover:bg-neutral-500/15 hover:text-strong rounded-xs p-0.5`,`aria-disabled:cursor-default aria-disabled:hover:bg-transparent aria-disabled:hover:text-strong/40`),onClick:e=>{if(e.stopPropagation(),o){let e=u.current;e&&H(e);return}a?.()},onMouseDown:e=>{e.preventDefault()},children:_(n,{svg:o?_(S,{}):_(y,{weight:`bold`}),className:`size-4`})})]})});A.displayName=`MultiSelectTag`;const j=({children:e,lockedValues:t=w})=>{let n=x.useComboboxContext(),r=x.useStoreState(n,`selectedValue`),i=(C(r)?r:void 0)??w,a=h(i);a.current=i;let o=f(E);o.current=t;let s=m(()=>new Set(t),[t]),c=h(new Map),{onInputKeyDownRef:l,inputRef:u}=f(D),d=h(new Set);p(()=>()=>{d.current.forEach(cancelAnimationFrame)},[]);let v=e=>{let t=requestAnimationFrame(()=>{d.current.delete(t),e()});d.current.add(t)},y=e=>{if(n){let t=n.getState().selectedValue;if(!C(t))return;n.setSelectedValue(t.filter(t=>t!==e))}},b=e=>{let t=a.current[e];if(t==null)return;let r=c.current.get(t);r&&(r.focus(),n?.show())},S=()=>{u.current?.focus()},T=(e,t)=>{let n=i[t];switch(e.key){case`ArrowLeft`:e.preventDefault(),t>0&&b(t-1);break;case`ArrowRight`:e.preventDefault(),t<i.length-1?b(t+1):S();break;case`Backspace`:case`Delete`:if(e.preventDefault(),n!=null){if(s.has(n)){let e=c.current.get(n);e&&H(e);break}if(y(n),e.key===`Backspace`)if(t>0){let e=t-1;v(()=>b(e))}else v(()=>{a.current.length>0?b(0):S()});else v(()=>{t<a.current.length?b(t):S()})}break;case`ArrowUp`:case`ArrowDown`:e.preventDefault(),S(),u.current?.dispatchEvent(new KeyboardEvent(`keydown`,{key:e.key,bubbles:!0,cancelable:!0,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey,altKey:e.altKey}));break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&S();break}};return l.current=e=>{if(e.key===`ArrowLeft`&&e.currentTarget.selectionStart===0&&e.currentTarget.selectionEnd===0&&i.length>0){e.preventDefault(),b(i.length-1);return}if(e.key===`Backspace`&&e.currentTarget.value===``&&i.length>0){let e=i[i.length-1];if(e!=null)if(o.current.includes(e)){let t=c.current.get(e);t&&H(t)}else y(e)}},_(g,{children:i.map((t,n)=>{let r={value:t,locked:s.has(t),onRemove:()=>{if(s.has(t)){let e=c.current.get(t);e&&H(e);return}y(t)},ref:e=>{e?c.current.set(t,e):c.current.delete(t)},onKeyDown:e=>T(e,n),onClick:()=>b(n)};return e?e(r):_(A,{...r},t)})})};j.displayName=`MultiSelectTagValues`;const M=u(({className:n,onBlur:r,onChange:i,onFocus:a,onKeyDown:o,onValueChange:c,placeholder:l,...u},d)=>{let p=x.useComboboxContext(),{onInputKeyDownRef:m,inputRef:h}=f(D),g=f(s),v=x.useStoreState(p,`selectedValue`),y=((C(v)?v:void 0)?.length??0)>0;return _(x.Combobox,{autoSelect:!0,"data-slot":`multi-select-input`,className:t(`pointer-coarse:text-base min-w-20 flex-1 select-text border-0 bg-transparent text-sm outline-hidden`,`placeholder:select-none placeholder:text-placeholder`,n),onChange:e=>{c?.(e.target.value),i?.(e)},onKeyDown:e=>{m.current?.(e),o?.(e)},onBlur:e=>{e.relatedTarget instanceof HTMLElement&&e.relatedTarget.closest(`[data-slot="multi-select-tag"]`)&&p?.show(),r?.(e)},onFocus:e=>{p?.show(),a?.(e)},placeholder:y?void 0:l,ref:e(h,d),...u,...g?{"aria-describedby":g[`aria-describedby`],"aria-errormessage":g[`aria-errormessage`],"aria-invalid":g[`aria-invalid`],id:g.id,name:g.name}:void 0})});M.displayName=`MultiSelectInput`;const N=u(({asChild:e=!1,backdrop:n=!1,children:i,className:a,modal:o=!0,portalElement:s,sameWidth:c=!0,unmountOnHide:l=!0,...u},p)=>{let m=f(T),h=d(()=>m.current?.getBoundingClientRect()??null,[m]),g=d(e=>typeof s==`function`?s(e):s??m.current?.closest(`[data-mantle-modal-content]`)??e.ownerDocument.body,[s,m]),v=d(e=>!(e.target instanceof Node&&m.current?.contains(e.target)),[m]);return _(x.ComboboxPopover,{"data-slot":`multi-select-content`,className:t(`border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden overscroll-y-none rounded-md border shadow-md pt-1 pb-1 has-data-content-footer:pb-0 font-sans flex flex-col gap-px focus:outline-hidden`,a),backdrop:n,getAnchorRect:h,gutter:4,hideOnInteractOutside:v,modal:o,portalElement:g,ref:p,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,sameWidth:c,unmountOnHide:l,...u,children:i})});N.displayName=`MultiSelectContent`;const P=u(({asChild:e=!1,children:i,className:a,focusOnHover:o=!0,value:s,onClick:c,...l},u)=>{let d=f(E),p=s!=null&&d.current.includes(s);return v(x.ComboboxItem,{"data-slot":`multi-select-item`,className:t(`relative mx-1 cursor-pointer rounded-md pl-2 pr-8 py-1.5 text-strong text-sm font-normal flex min-w-0 items-center gap-2`,`[[role=option]+&]:mt-px`,`data-active-item:bg-active-menu-item`,`aria-disabled:opacity-50`,`aria-selected:bg-selected-menu-item aria-selected:data-active-item:bg-active-selected-menu-item`,a),focusOnHover:o,onClick:e=>{if(p){e.preventDefault();return}c?.(e)},ref:u,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,resetValueOnSelect:!0,value:s,...l,children:[i,_(x.ComboboxItemCheck,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,children:_(n,{svg:_(b,{weight:`bold`}),className:`size-4 text-accent-600`})})]})});P.displayName=`MultiSelectItem`;const F=u(({asChild:e=!1,children:t,...n},i)=>_(x.ComboboxGroup,{"data-slot":`multi-select-group`,className:`mx-1`,ref:i,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,...n,children:t}));F.displayName=`MultiSelectGroup`;const I=u(({asChild:e=!1,children:n,className:i,...a},o)=>_(x.ComboboxGroupLabel,{"data-slot":`multi-select-group-label`,className:t(`text-muted px-2 py-1 text-xs font-medium`,i),ref:o,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,...a,children:n}));I.displayName=`MultiSelectGroupLabel`;const L=u(({className:e,children:n,...r},i)=>_(`p`,{"data-slot":`multi-select-group-description`,className:t(`text-muted px-2 pb-1 text-xs`,e),ref:i,...r,children:n}));L.displayName=`MultiSelectGroupDescription`;const R=u(({className:e,...n},r)=>_(o,{"data-slot":`multi-select-separator`,ref:r,className:t(`my-1 w-auto`,e),...n}));R.displayName=`MultiSelectSeparator`;const z=u(({className:e,children:n,...r},i)=>_(`div`,{"data-slot":`multi-select-empty`,className:t(`mx-1 text-muted px-2 py-6 text-center text-sm`,e),ref:i,role:`presentation`,...r,children:n}));z.displayName=`MultiSelectEmpty`;const B=u(({className:e,children:n,...r},i)=>_(`div`,{ref:i,"data-slot":`multi-select-content-footer`,"data-content-footer":!0,className:t(`bg-popover sticky bottom-0 border-t border-popover`,e),...r,children:n}));B.displayName=`MultiSelectContentFooter`;const V={Root:O,Trigger:k,TagValues:j,Input:M,Tag:A,Content:N,ContentFooter:B,Item:P,Group:F,GroupLabel:I,GroupDescription:L,Separator:R,Empty:z};function H(e){c()||e.animate([{transform:`translateX(0)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(0)`}],{duration:300,easing:`ease-in-out`})}export{V as MultiSelect};
|
|
1
|
+
import{t as e}from"./compose-refs-Cjf2gfB8.js";import{t}from"./cx-C1UYP5We.js";import{t as n}from"./icon-SUx16Sl3.js";import{t as r}from"./slot-DT_E5BQx.js";import{a as i,r as a}from"./validation-DCyx-ceH.js";import{t as o}from"./field-context-4k1kI7Bo.js";import{n as s}from"./separator-CqohKk4z.js";import{t as c}from"./use-prefers-reduced-motion-DBqNw1wB.js";import{createContext as l,forwardRef as u,useCallback as d,useContext as f,useEffect as p,useMemo as m,useRef as h}from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";import{XIcon as y}from"@phosphor-icons/react/X";import{CheckIcon as b}from"@phosphor-icons/react/Check";import*as x from"@ariakit/react";import{LockIcon as S}from"@phosphor-icons/react/Lock";const C=e=>Array.isArray(e)&&e.every(e=>typeof e==`string`),w=[],T=l({current:null}),E=l({current:[]}),D=l({onInputKeyDownRef:{current:void 0},inputRef:{current:null}}),O=({children:e,defaultSelectedValue:t=w,...n})=>{let r=h(null),i=h(void 0),a=h(null),o=h([]),s=m(()=>({onInputKeyDownRef:i,inputRef:a}),[]);return _(T.Provider,{value:r,children:_(D.Provider,{value:s,children:_(E.Provider,{value:o,children:_(x.ComboboxProvider,{defaultSelectedValue:t,...n,children:e})})})})};O.displayName=`MultiSelect`;const k=u(({"aria-invalid":n,className:r,children:o,onKeyDown:s,onMouseDown:c,validation:l,...u},d)=>{let p=f(T),{inputRef:m}=f(D),h=x.useComboboxContext(),g=i(),{validation:v}=a({"aria-invalid":n,validation:l??g});return _(`div`,{role:`group`,"data-slot":`multi-select-trigger`,className:t(`cursor-text select-none font-sans text-sm`,`border-form bg-form text-strong flex min-h-9 w-full flex-wrap items-center gap-1 rounded-md border px-3 py-1 has-[[data-slot=multi-select-tag]]:px-1`,`has-focus:outline-hidden has-focus-within:ring-4 has-aria-expanded:ring-4`,`has-focus-within:border-accent-600 has-focus-within:ring-focus-accent has-aria-expanded:border-accent-600 has-aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:has-focus-within:border-success-600 data-validation-success:has-focus-within:ring-focus-success data-validation-success:has-aria-expanded:border-success-600 data-validation-success:has-aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:has-focus-within:border-warning-600 data-validation-warning:has-focus-within:ring-focus-warning data-validation-warning:has-aria-expanded:border-warning-600 data-validation-warning:has-aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:has-focus-within:border-danger-600 data-validation-error:has-focus-within:ring-focus-danger data-validation-error:has-aria-expanded:border-danger-600 data-validation-error:has-aria-expanded:ring-focus-danger`,r),"data-validation":v||void 0,onKeyDown:e=>{e.key===`Escape`&&h?.getState().open&&(e.preventDefault(),h.hide()),s?.(e)},onMouseDown:e=>{e.target instanceof HTMLElement&&!e.target.closest(`button, input, [role='option']`)&&(e.preventDefault(),m.current?.focus()),c?.(e)},ref:e(p,d),...u,children:o})});k.displayName=`MultiSelectTrigger`;const A=u(({className:r,value:i,onRemove:a,locked:o=!1,onKeyDown:s,...c},l)=>{let u=h(null);return v(`span`,{ref:e(u,l),role:`option`,"aria-selected":!0,tabIndex:-1,"data-slot":`multi-select-tag`,"data-locked":o||void 0,className:t(`cursor-default bg-neutral-500/10 border border-neutral-500/20 rounded-xs text-strong inline-flex items-center gap-1 pl-2 pr-0.5 py-0.5 text-sm font-normal`,`focus-visible:outline-hidden focus-visible:border-accent-600/50 focus-visible:ring-3 focus-visible:ring-focus-accent`,r),onKeyDown:e=>{if(o&&(e.key===`Backspace`||e.key===`Delete`)){e.preventDefault(),H(e.currentTarget);return}s?.(e)},...c,children:[i,_(`button`,{type:`button`,"aria-label":`Remove ${i}`,tabIndex:-1,"aria-disabled":o||void 0,className:t(`cursor-pointer text-strong/40 hover:bg-neutral-500/15 hover:text-strong rounded-xs p-0.5`,`aria-disabled:cursor-default aria-disabled:hover:bg-transparent aria-disabled:hover:text-strong/40`),onClick:e=>{if(e.stopPropagation(),o){let e=u.current;e&&H(e);return}a?.()},onMouseDown:e=>{e.preventDefault()},children:_(n,{svg:o?_(S,{}):_(y,{weight:`bold`}),className:`size-4`})})]})});A.displayName=`MultiSelectTag`;const j=({children:e,lockedValues:t=w})=>{let n=x.useComboboxContext(),r=x.useStoreState(n,`selectedValue`),i=(C(r)?r:void 0)??w,a=h(i);a.current=i;let o=f(E);o.current=t;let s=m(()=>new Set(t),[t]),c=h(new Map),{onInputKeyDownRef:l,inputRef:u}=f(D),d=h(new Set);p(()=>()=>{d.current.forEach(cancelAnimationFrame)},[]);let v=e=>{let t=requestAnimationFrame(()=>{d.current.delete(t),e()});d.current.add(t)},y=e=>{if(n){let t=n.getState().selectedValue;if(!C(t))return;n.setSelectedValue(t.filter(t=>t!==e))}},b=e=>{let t=a.current[e];if(t==null)return;let r=c.current.get(t);r&&(r.focus(),n?.show())},S=()=>{u.current?.focus()},T=(e,t)=>{let n=i[t];switch(e.key){case`ArrowLeft`:e.preventDefault(),t>0&&b(t-1);break;case`ArrowRight`:e.preventDefault(),t<i.length-1?b(t+1):S();break;case`Backspace`:case`Delete`:if(e.preventDefault(),n!=null){if(s.has(n)){let e=c.current.get(n);e&&H(e);break}if(y(n),e.key===`Backspace`)if(t>0){let e=t-1;v(()=>b(e))}else v(()=>{a.current.length>0?b(0):S()});else v(()=>{t<a.current.length?b(t):S()})}break;case`ArrowUp`:case`ArrowDown`:e.preventDefault(),S(),u.current?.dispatchEvent(new KeyboardEvent(`keydown`,{key:e.key,bubbles:!0,cancelable:!0,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey,altKey:e.altKey}));break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&S();break}};return l.current=e=>{if(e.key===`ArrowLeft`&&e.currentTarget.selectionStart===0&&e.currentTarget.selectionEnd===0&&i.length>0){e.preventDefault(),b(i.length-1);return}if(e.key===`Backspace`&&e.currentTarget.value===``&&i.length>0){let e=i[i.length-1];if(e!=null)if(o.current.includes(e)){let t=c.current.get(e);t&&H(t)}else y(e)}},_(g,{children:i.map((t,n)=>{let r={value:t,locked:s.has(t),onRemove:()=>{if(s.has(t)){let e=c.current.get(t);e&&H(e);return}y(t)},ref:e=>{e?c.current.set(t,e):c.current.delete(t)},onKeyDown:e=>T(e,n),onClick:()=>b(n)};return e?e(r):_(A,{...r},t)})})};j.displayName=`MultiSelectTagValues`;const M=u(({className:n,onBlur:r,onChange:i,onFocus:a,onKeyDown:s,onValueChange:c,placeholder:l,...u},d)=>{let p=x.useComboboxContext(),{onInputKeyDownRef:m,inputRef:h}=f(D),g=f(o),v=x.useStoreState(p,`selectedValue`),y=((C(v)?v:void 0)?.length??0)>0;return _(x.Combobox,{autoSelect:!0,"data-slot":`multi-select-input`,className:t(`pointer-coarse:text-base min-w-20 flex-1 select-text border-0 bg-transparent text-sm outline-hidden`,`placeholder:select-none placeholder:text-placeholder`,n),onChange:e=>{c?.(e.target.value),i?.(e)},onKeyDown:e=>{m.current?.(e),s?.(e)},onBlur:e=>{e.relatedTarget instanceof HTMLElement&&e.relatedTarget.closest(`[data-slot="multi-select-tag"]`)&&p?.show(),r?.(e)},onFocus:e=>{p?.show(),a?.(e)},placeholder:y?void 0:l,ref:e(h,d),...u,...g?{"aria-describedby":g[`aria-describedby`],"aria-errormessage":g[`aria-errormessage`],"aria-invalid":g[`aria-invalid`],id:g.id,name:g.name}:void 0})});M.displayName=`MultiSelectInput`;const N=u(({asChild:e=!1,backdrop:n=!1,children:i,className:a,modal:o=!0,portalElement:s,sameWidth:c=!0,unmountOnHide:l=!0,...u},p)=>{let m=f(T),h=d(()=>m.current?.getBoundingClientRect()??null,[m]),g=d(e=>typeof s==`function`?s(e):s??m.current?.closest(`[data-mantle-modal-content]`)??e.ownerDocument.body,[s,m]),v=d(e=>!(e.target instanceof Node&&m.current?.contains(e.target)),[m]);return _(x.ComboboxPopover,{"data-slot":`multi-select-content`,className:t(`border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden overscroll-y-none rounded-md border shadow-md pt-1 pb-1 has-data-content-footer:pb-0 font-sans flex flex-col gap-px focus:outline-hidden`,a),backdrop:n,getAnchorRect:h,gutter:4,hideOnInteractOutside:v,modal:o,portalElement:g,ref:p,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,sameWidth:c,unmountOnHide:l,...u,children:i})});N.displayName=`MultiSelectContent`;const P=u(({asChild:e=!1,children:i,className:a,focusOnHover:o=!0,value:s,onClick:c,...l},u)=>{let d=f(E),p=s!=null&&d.current.includes(s);return v(x.ComboboxItem,{"data-slot":`multi-select-item`,className:t(`relative mx-1 cursor-pointer rounded-md pl-2 pr-8 py-1.5 text-strong text-sm font-normal flex min-w-0 items-center gap-2`,`[[role=option]+&]:mt-px`,`data-active-item:bg-active-menu-item`,`aria-disabled:opacity-50`,`aria-selected:bg-selected-menu-item aria-selected:data-active-item:bg-active-selected-menu-item`,a),focusOnHover:o,onClick:e=>{if(p){e.preventDefault();return}c?.(e)},ref:u,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,resetValueOnSelect:!0,value:s,...l,children:[i,_(x.ComboboxItemCheck,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,children:_(n,{svg:_(b,{weight:`bold`}),className:`size-4 text-accent-600`})})]})});P.displayName=`MultiSelectItem`;const F=u(({asChild:e=!1,children:t,...n},i)=>_(x.ComboboxGroup,{"data-slot":`multi-select-group`,className:`mx-1`,ref:i,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,...n,children:t}));F.displayName=`MultiSelectGroup`;const I=u(({asChild:e=!1,children:n,className:i,...a},o)=>_(x.ComboboxGroupLabel,{"data-slot":`multi-select-group-label`,className:t(`text-muted px-2 py-1 text-xs font-medium`,i),ref:o,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,...a,children:n}));I.displayName=`MultiSelectGroupLabel`;const L=u(({className:e,children:n,...r},i)=>_(`p`,{"data-slot":`multi-select-group-description`,className:t(`text-muted px-2 pb-1 text-xs`,e),ref:i,...r,children:n}));L.displayName=`MultiSelectGroupDescription`;const R=u(({className:e,...n},r)=>_(s,{"data-slot":`multi-select-separator`,ref:r,className:t(`my-1 w-auto`,e),...n}));R.displayName=`MultiSelectSeparator`;const z=u(({className:e,children:n,...r},i)=>_(`div`,{"data-slot":`multi-select-empty`,className:t(`mx-1 text-muted px-2 py-6 text-center text-sm`,e),ref:i,role:`presentation`,...r,children:n}));z.displayName=`MultiSelectEmpty`;const B=u(({className:e,children:n,...r},i)=>_(`div`,{ref:i,"data-slot":`multi-select-content-footer`,"data-content-footer":!0,className:t(`bg-popover sticky bottom-0 border-t border-popover`,e),...r,children:n}));B.displayName=`MultiSelectContentFooter`;const V={Root:O,Trigger:k,TagValues:j,Input:M,Tag:A,Content:N,ContentFooter:B,Item:P,Group:F,GroupLabel:I,GroupDescription:L,Separator:R,Empty:z};function H(e){c()||e.animate([{transform:`translateX(0)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(0)`}],{duration:300,easing:`ease-in-out`})}export{V as MultiSelect};
|
package/dist/pagination.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./cx-C1UYP5We.js";import{t}from"./slot-DT_E5BQx.js";import{t as n}from"./icon-button-DiX9iZ9n.js";import{t as r}from"./button-CERx95KE.js";import{n as i}from"./separator-CqohKk4z.js";import{t as a}from"./select-
|
|
1
|
+
import{t as e}from"./cx-C1UYP5We.js";import{t}from"./slot-DT_E5BQx.js";import{t as n}from"./icon-button-DiX9iZ9n.js";import{t as r}from"./button-CERx95KE.js";import{n as i}from"./separator-CqohKk4z.js";import{t as a}from"./select-Bxq_N-_o.js";import{createContext as o,forwardRef as s,useContext as c,useEffect as l,useMemo as u,useState as d}from"react";import f from"tiny-invariant";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{CaretLeftIcon as h}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as g}from"@phosphor-icons/react/CaretRight";const _=o(void 0),v=s(({className:t,children:n,defaultPageSize:r,...i},a)=>{let[o,s]=d(r),c=u(()=>({defaultPageSize:r,pageSize:o,setPageSize:s}),[r,o]);return p(_.Provider,{value:c,children:p(`div`,{"data-slot":`cursor-pagination`,className:e(`inline-flex items-center justify-between gap-2`,t),ref:a,...i,children:n})})});v.displayName=`CursorPagination`;const y=s(({hasNextPage:e,hasPreviousPage:t,onNextPage:a,onPreviousPage:o,...s},c)=>m(r,{"data-slot":`cursor-pagination-buttons`,appearance:`panel`,ref:c,...s,children:[p(n,{"data-slot":`cursor-pagination-previous`,appearance:`ghost`,disabled:!t,icon:p(h,{}),label:`Previous page`,onClick:o,size:`sm`,type:`button`}),p(i,{"data-slot":`cursor-pagination-separator`,orientation:`vertical`,className:`min-h-5`}),p(n,{"data-slot":`cursor-pagination-next`,appearance:`ghost`,disabled:!e,icon:p(g,{}),label:`Next page`,onClick:a,size:`sm`,type:`button`})]}));y.displayName=`CursorButtons`;const b=[5,10,20,50,100],x=s(({className:t,pageSizes:n=b,onChangePageSize:r,...i},o)=>{let s=c(_);return f(s,`CursorPageSizeSelect must be used as a child of a CursorPagination component`),f(n.includes(s.defaultPageSize),`CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes`),f(n.includes(s.pageSize),`CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes`),m(a.Root,{defaultValue:`${s.pageSize}`,onValueChange:e=>{let t=Number.parseInt(e,10);Number.isNaN(t)&&(t=s.defaultPageSize),s.setPageSize(t),r?.(t)},children:[p(a.Trigger,{ref:o,"data-slot":`cursor-pagination-page-size-select`,className:e(`w-auto min-w-36`,t),value:s.pageSize,...i,children:p(a.Value,{})}),p(a.Content,{width:`trigger`,children:n.map(e=>m(a.Item,{value:`${e}`,children:[e,` per page`]},e))})]})});x.displayName=`CursorPageSizeSelect`;function S({asChild:n=!1,className:r,...i}){let a=c(_);return f(a,`CursorPageSizeValue must be used as a child of a CursorPagination component`),m(n?t:`span`,{"data-slot":`cursor-pagination-page-size-value`,className:e(`text-muted text-sm font-normal`,r),...i,children:[a.pageSize,` per page`]})}S.displayName=`CursorPageSizeValue`;const C={Root:v,Buttons:y,PageSizeSelect:x,PageSizeValue:S};function w({listSize:e,pageSize:t}){let[n,r]=d(1),[i,a]=d(t);l(()=>{a(t),r(1)},[t]),l(()=>{r(1)},[e]);let o=Math.ceil(e/i),s=(n-1)*i,c=n>1,u=n<o;function f(e){r(Math.max(1,Math.min(e,o)))}function p(){u&&r(e=>Math.min(e+1,o))}function m(){c&&r(e=>Math.max(e-1,1))}function h(e){a(e),r(1)}function g(){r(o)}function _(){r(1)}return{currentPage:n,goToFirstPage:_,goToLastPage:g,goToPage:f,hasNextPage:u,hasPreviousPage:c,nextPage:p,offset:s,pageSize:i,previousPage:m,setPageSize:h,totalPages:o}}function T(e,t){return e.slice(t.offset,t.offset+t.pageSize)}export{C as CursorPagination,T as getOffsetPaginatedSlice,w as useOffsetPagination};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./slot-DT_E5BQx.js";import{t}from"./booleanish-BfvnW6vy.js";import{i as n}from"./toast-
|
|
1
|
+
import{t as e}from"./slot-DT_E5BQx.js";import{t}from"./booleanish-BfvnW6vy.js";import{i as n}from"./toast-CZBWjXcP.js";import{createContext as r,forwardRef as i,useContext as a,useEffect as o,useMemo as s,useState as c}from"react";import{jsx as l}from"react/jsx-runtime";import*as u from"@radix-ui/react-dialog";const d=r({hasDescription:!1,setHasDescription:()=>{}});function f(e){let[t,n]=c(!1),r=s(()=>({hasDescription:t,setHasDescription:n}),[t]);return l(d.Provider,{value:r,children:l(u.Root,{...e})})}f.displayName=`DialogPrimitiveRoot`;const p=u.Trigger;p.displayName=`DialogPrimitiveTrigger`;const m=u.Portal;m.displayName=`DialogPrimitivePortal`;const h=u.Close;h.displayName=`DialogPrimitiveClose`;const g=i((e,t)=>l(u.Overlay,{"data-overlay":!0,ref:t,...e}));g.displayName=`DialogPrimitiveOverlay`;const _=i(({onEscapeKeyDown:e,onInteractOutside:t,onPointerDownOutside:r,...i},o)=>{let s=a(d);return l(u.Content,{ref:o,onEscapeKeyDown:t=>{x(t),e?.(t)},onInteractOutside:e=>{n(e),t?.(e)},onPointerDownOutside:e=>{n(e),r?.(e)},...s.hasDescription?{}:{"aria-describedby":void 0},...i})});_.displayName=`DialogPrimitiveContent`;const v=u.Title,y=i(({asChild:t,children:n,...r},i)=>{let s=a(d);o(()=>(s.setHasDescription(!0),()=>s.setHasDescription(!1)),[s]);let c=t?e:`div`;return l(u.Description,{ref:i,asChild:!0,children:l(c,{...r,children:n})})});y.displayName=`DialogPrimitiveDescription`;function b(e){return e instanceof HTMLElement?e.hasAttribute(`data-overlay`):!1}function x(e){if(!T(e.currentTarget))return;let n=e.currentTarget,r=n instanceof Document?n.activeElement:n.ownerDocument?.activeElement??null,i=S(e.target)??S(r),a=i?C(i):null;i!=null&&t(i.getAttribute(`aria-expanded`))&&a!=null&&n.contains(i)&&n.contains(a)&&(a.getAttribute(`data-open`)===`true`||a.getAttribute(`data-state`)===`open`)&&e.preventDefault()}function S(e){return w(e)?e.closest(`[aria-expanded='true'][aria-controls]`):null}function C(e){let t=e.getAttribute(`aria-controls`);if(!t)return null;let n=e.ownerDocument.getElementById(t);return n instanceof HTMLElement?n:null}function w(e){return e instanceof HTMLElement}function T(e){return e instanceof Node&&`querySelector`in e}export{m as a,p as c,g as i,b as l,_ as n,f as o,y as r,v as s,h as t};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./compose-refs-Cjf2gfB8.js";import{t}from"./cx-C1UYP5We.js";import{t as n}from"./icon-SUx16Sl3.js";import{a as r,r as i}from"./validation-DCyx-ceH.js";import{
|
|
1
|
+
import{t as e}from"./compose-refs-Cjf2gfB8.js";import{t}from"./cx-C1UYP5We.js";import{t as n}from"./icon-SUx16Sl3.js";import{a as r,r as i}from"./validation-DCyx-ceH.js";import{t as a}from"./field-context-4k1kI7Bo.js";import{n as o}from"./separator-CqohKk4z.js";import{CaretDownIcon as s}from"@phosphor-icons/react/CaretDown";import{createContext as c,forwardRef as l,useContext as u,useMemo as d}from"react";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{CheckIcon as m}from"@phosphor-icons/react/Check";import{CaretUpIcon as h}from"@phosphor-icons/react/CaretUp";import*as g from"@radix-ui/react-select";const _=c({}),v=l(({"aria-invalid":e,children:t,id:n,validation:r,onBlur:i,onValueChange:a,onChange:o,...s},c)=>{let l=d(()=>({"aria-invalid":e,id:n,validation:r,onBlur:i,ref:c}),[e,n,r,i,c]);return f(g.Root,{...s,onValueChange:e=>{o?.(e),a?.(e)},children:f(_.Provider,{value:l,children:t})})});v.displayName=`Select`;const y=l(({className:e,...n},r)=>f(g.Group,{ref:r,"data-slot":`select-group`,className:t(`space-y-px`,e),...n}));y.displayName=`SelectGroup`;const b=g.Value;b.displayName=`SelectValue`;const x=l(({"aria-invalid":o,className:c,children:l,id:d,validation:m,...h},v)=>{let y=u(_),b=u(a),x=r(),{ariaInvalid:S,validation:C}=i({"aria-invalid":b?b[`aria-invalid`]:y[`aria-invalid`]??o,validation:y.validation??m??x}),w=b?b.id:y.id??d;return p(g.Trigger,{"data-slot":`select-trigger`,className:t(`h-9 text-sm`,`border-form bg-form text-strong font-sans placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left`,`hover:border-neutral-400`,`focus:outline-hidden focus:ring-4 aria-expanded:ring-4`,`focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger`,c),"data-validation":C||void 0,id:w,ref:e(v,y.ref),...h,...b?{"aria-describedby":b[`aria-describedby`],"aria-errormessage":b[`aria-errormessage`]}:void 0,"aria-invalid":S,children:[l,f(g.Icon,{asChild:!0,children:f(n,{svg:f(s,{weight:`bold`}),className:`size-4`})})]})});x.displayName=`SelectTrigger`;const S=l(({className:e,...r},i)=>f(g.ScrollUpButton,{ref:i,className:t(`flex cursor-default items-center justify-center py-1`,e),...r,children:f(n,{svg:f(h,{weight:`bold`}),className:`size-4`})}));S.displayName=`SelectScrollUpButton`;const C=l(({className:e,...r},i)=>f(g.ScrollDownButton,{ref:i,className:t(`flex cursor-default items-center justify-center py-1`,e),...r,children:f(n,{svg:f(s,{weight:`bold`}),className:`size-4`})}));C.displayName=`SelectScrollDownButton`;const w=l(({className:e,children:n,position:r=`popper`,width:i=`trigger`,...a},o)=>f(g.Portal,{children:p(g.Content,{ref:o,"data-slot":`select-content`,className:t(`border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md`,`bg-popover font-sans`,r===`popper`&&`data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-(--radix-select-content-available-height)`,i===`trigger`&&`w-(--radix-select-trigger-width)`,e),position:r,...a,children:[f(S,{}),f(g.Viewport,{className:t(`p-1 space-y-px`,r===`popper`&&`h-(--radix-select-trigger-height) w-full`),children:n}),f(C,{})]})}));w.displayName=`SelectContent`;const T=l(({className:e,...n},r)=>f(g.Label,{ref:r,"data-slot":`select-label`,className:t(`px-2 py-1.5 text-sm font-medium`,e),...n}));T.displayName=`SelectLabel`;const E=l(({className:e,children:r,icon:i,...a},o)=>p(g.Item,{ref:o,"data-slot":`select-item`,className:t(`relative flex gap-2 w-full cursor-pointer select-none items-center rounded-md py-1.5 pl-2 pr-8 text-strong text-sm outline-hidden`,`focus:bg-active-menu-item`,`data-disabled:pointer-events-none data-disabled:opacity-50`,`data-state-checked:bg-selected-menu-item`,`focus:data-state-checked:bg-active-selected-menu-item`,e),...a,children:[i&&f(n,{svg:i}),f(g.ItemText,{children:r}),f(g.ItemIndicator,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,children:f(n,{svg:f(m,{weight:`bold`}),className:`size-4 text-accent-600`})})]}));E.displayName=`SelectItem`;const D=l(({className:e,...n},r)=>f(o,{ref:r,"data-slot":`select-separator`,className:t(`-mx-1 my-1 h-px w-auto`,e),...n}));D.displayName=`SelectSeparator`;const O={Root:v,Content:w,Group:y,Item:E,Label:T,Separator:D,Trigger:x,Value:b};export{O as t};
|
package/dist/select.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./select-
|
|
1
|
+
import{t as e}from"./select-Bxq_N-_o.js";export{e as Select};
|