@ngrok/mantle 0.80.0 → 0.81.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/accordion.d.ts +13 -31
- package/dist/accordion.js +1 -1
- package/dist/agent.json +5 -1
- package/dist/alert-dialog.d.ts +15 -48
- package/dist/alert-dialog.js +1 -1
- package/dist/alert.d.ts +8 -26
- package/dist/alert.js +1 -1
- package/dist/{anchor-_2meGDfj.js → anchor-DfeXTpKW.js} +1 -1
- package/dist/anchor.js +1 -1
- package/dist/area-chart.d.ts +504 -0
- package/dist/area-chart.js +1 -0
- package/dist/badge.js +1 -1
- package/dist/bar-chart.d.ts +491 -0
- package/dist/bar-chart.js +1 -0
- package/dist/breadcrumb.d.ts +6 -24
- package/dist/breadcrumb.js +1 -1
- package/dist/button-BAno7KIU.js +1 -0
- package/dist/{index-C2jj8U4a.d.ts → button-C-gMbPso.d.ts} +2 -2
- package/dist/{icon-button-C1AfGnQx.d.ts → button-C7vAl6lS.d.ts} +16 -3
- package/dist/{button-BPMwa2jN.d.ts → button-DARFK2KJ.d.ts} +1 -1
- package/dist/{button-5WsvzIQ6.js → button-DjpEKt2X.js} +1 -1
- package/dist/button-DvHMWAPl.js +1 -0
- package/dist/button.d.ts +5 -5
- package/dist/button.js +1 -1
- package/dist/calendar.js +1 -1
- package/dist/card.d.ts +5 -20
- package/dist/card.js +1 -1
- package/dist/centered-layout.d.ts +5 -20
- package/dist/centered-layout.js +1 -1
- package/dist/chart-BROa2gqt.js +2 -0
- package/dist/chart-BcOC6Qj0.d.ts +275 -0
- package/dist/checkbox-0EoxOyMA.js +1 -0
- package/dist/checkbox.d.ts +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/choice-BHwFSSyv.js +1 -0
- package/dist/{choice-Ct0KK8jw.d.ts → choice-BNRQXszu.d.ts} +5 -20
- package/dist/choice.d.ts +1 -1
- package/dist/choice.js +1 -1
- package/dist/code-block.d.ts +14 -44
- package/dist/code-block.js +6 -6
- package/dist/code-block_highlight-utils.d.ts +1 -1
- package/dist/code-block_highlight-utils.js +1 -1
- package/dist/combobox.d.ts +9 -33
- package/dist/combobox.js +1 -1
- package/dist/command.d.ts +3 -9
- package/dist/command.js +1 -1
- package/dist/data-table.d.ts +6 -12
- package/dist/data-table.js +1 -1
- package/dist/description-list.d.ts +4 -16
- package/dist/description-list.js +1 -1
- package/dist/{primitive-CJRIlrLz.d.ts → dialog-BM4wPCft.d.ts} +9 -16
- package/dist/dialog-DWZWd5Jt.js +1 -0
- package/dist/dialog.d.ts +13 -43
- package/dist/dialog.js +1 -1
- package/dist/{dropdown-menu-CoyozLzy.d.ts → dropdown-menu-DZg-Cd69.d.ts} +18 -54
- package/dist/dropdown-menu-Dw-OtXPm.d.ts +1 -0
- package/dist/dropdown-menu-RyDWoKHx.js +1 -0
- package/dist/dropdown-menu.d.ts +2 -2
- package/dist/dropdown-menu.js +1 -1
- package/dist/empty.d.ts +6 -21
- package/dist/empty.js +1 -1
- package/dist/field-B1wqeZr4.js +1 -0
- package/dist/field.d.ts +15 -45
- package/dist/field.js +1 -1
- package/dist/hooks.js +1 -1
- package/dist/hover-card.d.ts +3 -12
- package/dist/hover-card.js +1 -1
- package/dist/{svg-only-CdI_v82i.d.ts → icon-CX_gj6sW.d.ts} +1 -1
- package/dist/{icon-BDqpcZ-n.d.ts → icon-k4E9yNWD.d.ts} +1 -1
- package/dist/icon-lZ48P8Nn.js +1 -0
- package/dist/icon.d.ts +3 -3
- package/dist/icon.js +1 -1
- package/dist/icons-DLCs1hLP.js +1 -0
- package/dist/icons.d.ts +2 -2
- package/dist/icons.js +1 -1
- package/dist/input-BnlpQF0c.js +1 -0
- package/dist/{input-DV9M6K4v.d.ts → input-BuYDU6CF.d.ts} +1 -1
- package/dist/input.d.ts +2 -2
- package/dist/input.js +1 -1
- package/dist/line-chart.d.ts +490 -0
- package/dist/line-chart.js +1 -0
- package/dist/{virtual-UrzmaSQm.js → list-51KQvENW.js} +1 -1
- package/dist/list.d.ts +5 -20
- package/dist/list.js +1 -1
- package/dist/llms.txt +5 -1
- package/dist/mantle-dark-high-contrast.css +17 -0
- package/dist/mantle-dark.css +13 -0
- package/dist/mantle-light-high-contrast.css +15 -0
- package/dist/mantle.css +29 -0
- package/dist/media-object.d.ts +3 -12
- package/dist/media-object.js +1 -1
- package/dist/multi-select.d.ts +14 -53
- package/dist/multi-select.js +1 -1
- package/dist/otp-input.d.ts +5 -17
- package/dist/otp-input.js +1 -1
- package/dist/pagination.d.ts +5 -14
- package/dist/pagination.js +1 -1
- package/dist/{index-B8mIWKIU.d.ts → popover-CE4OlWkd.d.ts} +1 -4
- package/dist/popover-CQ9s7jG5.js +1 -0
- package/dist/popover.d.ts +1 -1
- package/dist/popover.js +1 -1
- package/dist/primitive-trJDqIXJ.js +1 -0
- package/dist/progress.d.ts +2 -8
- package/dist/progress.js +1 -1
- package/dist/qr-code.d.ts +4 -16
- package/dist/qr-code.js +1 -1
- package/dist/radio-group.d.ts +10 -40
- package/dist/radio-group.js +1 -1
- package/dist/scatter-plot.d.ts +495 -0
- package/dist/scatter-plot.js +1 -0
- package/dist/{select-idm1jy7y.d.ts → select-0z7HVS6r.d.ts} +8 -29
- package/dist/select-BCHWvmyC.js +1 -0
- package/dist/select.d.ts +1 -1
- package/dist/select.js +1 -1
- package/dist/selectable-list.d.ts +11 -38
- package/dist/selectable-list.js +1 -1
- package/dist/sheet.d.ts +12 -39
- package/dist/sheet.js +1 -1
- package/dist/skip-to-main-link.js +1 -1
- package/dist/slider.js +1 -1
- package/dist/slot.d.ts +1 -1
- package/dist/split-button.d.ts +9 -24
- package/dist/split-button.js +1 -1
- package/dist/switch.d.ts +1 -1
- package/dist/switch.js +1 -1
- package/dist/{table-DUSvU_Jw.d.ts → table-Bo0vNxIJ.d.ts} +9 -36
- package/dist/table-CGxJwtbL.js +1 -0
- package/dist/table.d.ts +1 -1
- package/dist/table.js +1 -1
- package/dist/tabs.d.ts +21 -36
- package/dist/tabs.js +1 -1
- package/dist/text-area.d.ts +1 -1
- package/dist/text-area.js +1 -1
- package/dist/theme-C26-Xolp.js +1 -0
- package/dist/theme-switcher.d.ts +6 -15
- package/dist/theme-switcher.js +1 -1
- package/dist/theme.d.ts +1 -1
- package/dist/theme.js +1 -1
- package/dist/toast.d.ts +5 -17
- package/dist/toast.js +1 -1
- package/dist/tooltip.d.ts +26 -8
- package/dist/tooltip.js +1 -1
- package/package.json +7 -1
- package/dist/checkbox-Cq17y0-R.js +0 -1
- package/dist/choice-Cc8dA5r8.js +0 -1
- package/dist/dialog-CQ2C6vkE.js +0 -1
- package/dist/dropdown-menu-CSCDdA3K.js +0 -1
- package/dist/field-context-BR01g789.js +0 -1
- package/dist/icon-CGgMKpJg.js +0 -1
- package/dist/icon-button-DiOhreJD.js +0 -1
- package/dist/index-CdPXa9h1.d.ts +0 -1
- package/dist/input-CVyAVbim.js +0 -1
- package/dist/popover-CBMADtjV.js +0 -1
- package/dist/primitive-DCPHJsRs.js +0 -1
- package/dist/select-SR_9-bxA.js +0 -1
- package/dist/table-GDkapNFi.js +0 -1
- package/dist/theme-provider-BftkIiZn.js +0 -1
- package/dist/theme-wVnzzx2F.js +0 -1
- package/dist/toast-DKgMRv4F.js +0 -1
- /package/dist/{sizes-BCoI4bhP.d.ts → button-BCoI4bhP.d.ts} +0 -0
- /package/dist/{intents-DdSKSj1c.d.ts → button-DdSKSj1c.d.ts} +0 -0
- /package/dist/{resolve-pre-rendered-props-B6OlZrSI.d.ts → code-block-B6OlZrSI.d.ts} +0 -0
- /package/dist/{resolve-pre-rendered-props-C9uaM9-V.js → code-block-C9uaM9-V.js} +0 -0
- /package/dist/{validation-7QeiTFwl.d.ts → field-7QeiTFwl.d.ts} +0 -0
- /package/dist/{validation-Bpptk_9t.js → field-Bpptk_9t.js} +0 -0
- /package/dist/{types-D1RY5Tcj.d.ts → icon-D1RY5Tcj.d.ts} +0 -0
- /package/dist/{svg-only-d-nMCfAI.js → icon-d-nMCfAI.js} +0 -0
- /package/dist/{sort-B_DDQcVD.js → icons-B_DDQcVD.js} +0 -0
- /package/dist/{traffic-policy-file-CF1lbWtp.js → icons-CF1lbWtp.js} +0 -0
- /package/dist/{is-input-CXmS0OFN.js → input-CXmS0OFN.js} +0 -0
- /package/dist/{index-BtwKJTLq.d.ts → slot-BtwKJTLq.d.ts} +0 -0
- /package/dist/{themes-CYNpplwN.d.ts → theme-CYNpplwN.d.ts} +0 -0
package/dist/list.d.ts
CHANGED
|
@@ -141,10 +141,7 @@ type ListRootProps = Omit<ListRootProps$1, "semantics" | "onActivate" | "itemId"
|
|
|
141
141
|
* </List.Root>
|
|
142
142
|
* ```
|
|
143
143
|
*/
|
|
144
|
-
declare const Root:
|
|
145
|
-
(props: ListRootProps): import("react").JSX.Element;
|
|
146
|
-
displayName: string;
|
|
147
|
-
};
|
|
144
|
+
declare const Root: (props: ListRootProps) => import("react").JSX.Element;
|
|
148
145
|
/**
|
|
149
146
|
* Props for `List.VirtualRoot` — the internal list primitive's
|
|
150
147
|
* `VirtualRoot` props (viewport props plus `estimateItemHeight` / `overscan`),
|
|
@@ -185,10 +182,7 @@ type ListVirtualRootProps = Omit<VirtualRootProps, "semantics" | "onActivate" |
|
|
|
185
182
|
* </List.VirtualRoot>
|
|
186
183
|
* ```
|
|
187
184
|
*/
|
|
188
|
-
declare const VirtualRoot:
|
|
189
|
-
(props: ListVirtualRootProps): import("react").JSX.Element;
|
|
190
|
-
displayName: string;
|
|
191
|
-
};
|
|
185
|
+
declare const VirtualRoot: (props: ListVirtualRootProps) => import("react").JSX.Element;
|
|
192
186
|
/**
|
|
193
187
|
* Props for `List.Item`. Extends `<button>` props (minus `type`, which is fixed
|
|
194
188
|
* to `"button"`) with `asChild` and the optional `current` accent.
|
|
@@ -251,10 +245,7 @@ type ListItemProps = Omit<ComponentProps<"button">, "type"> & WithAsChild & {
|
|
|
251
245
|
* </List.Root>
|
|
252
246
|
* ```
|
|
253
247
|
*/
|
|
254
|
-
declare const Item: {
|
|
255
|
-
({ asChild, className, current, disabled, onClick, ref, ...props }: ListItemProps): import("react").JSX.Element;
|
|
256
|
-
displayName: string;
|
|
257
|
-
};
|
|
248
|
+
declare const Item: ({ asChild, className, current, disabled, onClick, ref, ...props }: ListItemProps) => import("react").JSX.Element;
|
|
258
249
|
/**
|
|
259
250
|
* The emphasized title line inside a `List.Item`, in the stronger foreground
|
|
260
251
|
* color. A styled `<span>`.
|
|
@@ -273,10 +264,7 @@ declare const Item: {
|
|
|
273
264
|
* </List.Root>
|
|
274
265
|
* ```
|
|
275
266
|
*/
|
|
276
|
-
declare const ItemTitle: {
|
|
277
|
-
({ className, ref, ...props }: ComponentProps<"span">): import("react").JSX.Element;
|
|
278
|
-
displayName: string;
|
|
279
|
-
};
|
|
267
|
+
declare const ItemTitle: ({ className, ref, ...props }: ComponentProps<"span">) => import("react").JSX.Element;
|
|
280
268
|
/**
|
|
281
269
|
* The de-emphasized sub-line inside a `List.Item`, in the muted body color. A
|
|
282
270
|
* styled `<span>`.
|
|
@@ -295,10 +283,7 @@ declare const ItemTitle: {
|
|
|
295
283
|
* </List.Root>
|
|
296
284
|
* ```
|
|
297
285
|
*/
|
|
298
|
-
declare const ItemDescription: {
|
|
299
|
-
({ className, ref, ...props }: ComponentProps<"span">): import("react").JSX.Element;
|
|
300
|
-
displayName: string;
|
|
301
|
-
};
|
|
286
|
+
declare const ItemDescription: ({ className, ref, ...props }: ComponentProps<"span">) => import("react").JSX.Element;
|
|
302
287
|
/**
|
|
303
288
|
* A scrollable, optionally-virtualized list of clickable items — the action /
|
|
304
289
|
* navigation counterpart to `SelectableList` (e.g. an account switcher or SSO
|
package/dist/list.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CDk0Bb9z.js";import{n,r,t as i}from"./
|
|
1
|
+
import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CDk0Bb9z.js";import{n,r,t as i}from"./list-51KQvENW.js";import{jsx as a}from"react/jsx-runtime";const o={Root:e=>a(r,{semantics:`list`,...e}),VirtualRoot:e=>a(i,{semantics:`list`,...e}),Item:({asChild:r,className:i,current:o,disabled:s,onClick:c,ref:l,...u})=>a(n,{selected:o,disabled:s,children:a(r?t:`button`,{ref:l,"data-slot":`list-item-control`,"aria-current":o||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),...u,onClickCapture:r&&s?e=>{e.preventDefault(),e.stopPropagation()}:u.onClickCapture})}),ItemTitle:({className:t,ref:n,...r})=>a(`span`,{ref:n,"data-slot":`list-item-title`,className:e(`text-strong font-medium`,t),...r}),ItemDescription:({className:t,ref:n,...r})=>a(`span`,{ref:n,"data-slot":`list-item-description`,className:e(`text-body leading-4`,t),...r})};export{o as List};
|
package/dist/llms.txt
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# @ngrok/mantle (0.
|
|
1
|
+
# @ngrok/mantle (0.81.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
|
|
|
@@ -23,7 +23,9 @@ Full text: https://mantle.ngrok.com/llms-full.txt
|
|
|
23
23
|
- `@ngrok/mantle/alert`
|
|
24
24
|
- `@ngrok/mantle/alert-dialog`
|
|
25
25
|
- `@ngrok/mantle/anchor`
|
|
26
|
+
- `@ngrok/mantle/area-chart`
|
|
26
27
|
- `@ngrok/mantle/badge`
|
|
28
|
+
- `@ngrok/mantle/bar-chart`
|
|
27
29
|
- `@ngrok/mantle/breadcrumb`
|
|
28
30
|
- `@ngrok/mantle/browser-only`
|
|
29
31
|
- `@ngrok/mantle/button`
|
|
@@ -53,6 +55,7 @@ Full text: https://mantle.ngrok.com/llms-full.txt
|
|
|
53
55
|
- `@ngrok/mantle/input`
|
|
54
56
|
- `@ngrok/mantle/kbd`
|
|
55
57
|
- `@ngrok/mantle/label`
|
|
58
|
+
- `@ngrok/mantle/line-chart`
|
|
56
59
|
- `@ngrok/mantle/list`
|
|
57
60
|
- `@ngrok/mantle/main`
|
|
58
61
|
- `@ngrok/mantle/media-object`
|
|
@@ -64,6 +67,7 @@ Full text: https://mantle.ngrok.com/llms-full.txt
|
|
|
64
67
|
- `@ngrok/mantle/qr-code`
|
|
65
68
|
- `@ngrok/mantle/radio-group`
|
|
66
69
|
- `@ngrok/mantle/sandboxed-on-click`
|
|
70
|
+
- `@ngrok/mantle/scatter-plot`
|
|
67
71
|
- `@ngrok/mantle/select`
|
|
68
72
|
- `@ngrok/mantle/selectable-list`
|
|
69
73
|
- `@ngrok/mantle/separator`
|
|
@@ -284,6 +284,23 @@ MARK: DARK HICON DEFS
|
|
|
284
284
|
--color-selected-menu-item: var(--color-accent-50);
|
|
285
285
|
--color-active-selected-menu-item: var(--color-accent-100);
|
|
286
286
|
|
|
287
|
+
/* Chart series tokens — dark-high-contrast picks validated against the card
|
|
288
|
+
surface (#121212): CVD adjacency (worst ΔE 9.6), normal-vision floor
|
|
289
|
+
(15.1), chroma, and contrast (6.76:1–12.23:1, zero warns) all pass. The
|
|
290
|
+
standard dark lightness band (L ≤ 0.67) is unsatisfiable by construction
|
|
291
|
+
in this theme — its ramps are bimodal around the band, and every in-band
|
|
292
|
+
step fails 3:1 contrast — so these deliberately brighter marks are the
|
|
293
|
+
correct high-contrast trade-off. */
|
|
294
|
+
--color-chart-1: var(--color-blue-300);
|
|
295
|
+
--color-chart-2: var(--color-green-300);
|
|
296
|
+
--color-chart-3: var(--color-pink-600);
|
|
297
|
+
--color-chart-4: var(--color-red-300);
|
|
298
|
+
--color-chart-5: var(--color-teal-300);
|
|
299
|
+
--color-chart-6: var(--color-orange-300);
|
|
300
|
+
--color-chart-7: var(--color-violet-300);
|
|
301
|
+
--color-chart-8: var(--color-yellow-300);
|
|
302
|
+
--color-chart-other: var(--color-neutral-500);
|
|
303
|
+
|
|
287
304
|
--text-color-strong: var(--color-black);
|
|
288
305
|
--text-color-body: var(--color-neutral-950);
|
|
289
306
|
--text-color-muted: --alpha(var(--color-black) / 0.75);
|
package/dist/mantle-dark.css
CHANGED
|
@@ -313,6 +313,19 @@ MARK: DARK DEFS
|
|
|
313
313
|
--color-card-border-muted: var(--color-neutral-200);
|
|
314
314
|
--color-separator: --alpha(var(--color-gray-600) / 0.2);
|
|
315
315
|
|
|
316
|
+
/* Chart series tokens — dark picks validated against the dark card surface
|
|
317
|
+
(neutral-100). Dark ramps mirror light (step N = light step 1000−N), so each
|
|
318
|
+
slot resolves to the same color as its light twin while staying on-token. */
|
|
319
|
+
--color-chart-1: var(--color-blue-500);
|
|
320
|
+
--color-chart-2: var(--color-green-300);
|
|
321
|
+
--color-chart-3: var(--color-pink-500);
|
|
322
|
+
--color-chart-4: var(--color-red-400);
|
|
323
|
+
--color-chart-5: var(--color-teal-400);
|
|
324
|
+
--color-chart-6: var(--color-orange-400);
|
|
325
|
+
--color-chart-7: var(--color-violet-500);
|
|
326
|
+
--color-chart-8: var(--color-yellow-300);
|
|
327
|
+
--color-chart-other: var(--color-neutral-500);
|
|
328
|
+
|
|
316
329
|
--text-color-strong: #fff;
|
|
317
330
|
--text-color-body: --alpha(#fff / 0.7);
|
|
318
331
|
--text-color-muted: --alpha(#fff / 0.5);
|
|
@@ -283,6 +283,21 @@ MARK: LIGHT HICON DEFS
|
|
|
283
283
|
--color-selected-menu-item: var(--color-accent-50);
|
|
284
284
|
--color-active-selected-menu-item: var(--color-accent-100);
|
|
285
285
|
|
|
286
|
+
/* Chart series tokens — light-high-contrast picks validated against the white
|
|
287
|
+
card surface: all gates pass (worst adjacent CVD ΔE 11.6, normal-vision
|
|
288
|
+
floor 18.3, all slots ≥ 3.65:1). Pink and teal use the 300 step here (the
|
|
289
|
+
only steps clearing the chroma floor and adjacency gates in this theme's
|
|
290
|
+
compressed ramps); every other slot matches the base light picks. */
|
|
291
|
+
--color-chart-1: var(--color-blue-500);
|
|
292
|
+
--color-chart-2: var(--color-green-700);
|
|
293
|
+
--color-chart-3: var(--color-pink-300);
|
|
294
|
+
--color-chart-4: var(--color-red-600);
|
|
295
|
+
--color-chart-5: var(--color-teal-300);
|
|
296
|
+
--color-chart-6: var(--color-orange-600);
|
|
297
|
+
--color-chart-7: var(--color-violet-500);
|
|
298
|
+
--color-chart-8: var(--color-yellow-700);
|
|
299
|
+
--color-chart-other: var(--color-neutral-500);
|
|
300
|
+
|
|
286
301
|
--text-color-strong: var(--color-black);
|
|
287
302
|
--text-color-body: var(--color-neutral-950);
|
|
288
303
|
--text-color-muted: --alpha(var(--color-black) / 0.75);
|
package/dist/mantle.css
CHANGED
|
@@ -260,6 +260,21 @@ MARK: THEME
|
|
|
260
260
|
--ring-color-focus-danger: var(--ring-color-focus-danger);
|
|
261
261
|
--ring-color-focus-warning: var(--ring-color-focus-warning);
|
|
262
262
|
--ring-color-focus-success: var(--ring-color-focus-success);
|
|
263
|
+
|
|
264
|
+
/* Chart series tokens — an ordered categorical palette for data visualization.
|
|
265
|
+
Each theme file picks the ramp step that passes the palette validation gates
|
|
266
|
+
(CVD-safe adjacency, normal-vision floor, >= 3:1 contrast on the card surface)
|
|
267
|
+
for that theme. Assign slots to series in order and never re-assign a series'
|
|
268
|
+
slot when others are filtered out; series beyond 8 use --color-chart-other. */
|
|
269
|
+
--color-chart-1: var(--color-chart-1);
|
|
270
|
+
--color-chart-2: var(--color-chart-2);
|
|
271
|
+
--color-chart-3: var(--color-chart-3);
|
|
272
|
+
--color-chart-4: var(--color-chart-4);
|
|
273
|
+
--color-chart-5: var(--color-chart-5);
|
|
274
|
+
--color-chart-6: var(--color-chart-6);
|
|
275
|
+
--color-chart-7: var(--color-chart-7);
|
|
276
|
+
--color-chart-8: var(--color-chart-8);
|
|
277
|
+
--color-chart-other: var(--color-chart-other);
|
|
263
278
|
}
|
|
264
279
|
|
|
265
280
|
/**
|
|
@@ -348,6 +363,20 @@ MARK: LIGHT DEFS
|
|
|
348
363
|
--color-selected-menu-item: --alpha(var(--color-accent-500) / 0.1);
|
|
349
364
|
--color-active-selected-menu-item: --alpha(var(--color-accent-500) / 0.15);
|
|
350
365
|
|
|
366
|
+
/* Chart series tokens — light picks validated against the white card surface:
|
|
367
|
+
worst adjacent CVD ΔE 14.0 (target ≥ 8), normal-vision floor 15.7 (≥ 15),
|
|
368
|
+
all slots ≥ 3:1 contrast. Semantic ramps (sky/emerald/rose/amber/purple) are
|
|
369
|
+
deliberately excluded so a series never impersonates a status color. */
|
|
370
|
+
--color-chart-1: var(--color-blue-500);
|
|
371
|
+
--color-chart-2: var(--color-green-700);
|
|
372
|
+
--color-chart-3: var(--color-pink-500);
|
|
373
|
+
--color-chart-4: var(--color-red-600);
|
|
374
|
+
--color-chart-5: var(--color-teal-600);
|
|
375
|
+
--color-chart-6: var(--color-orange-600);
|
|
376
|
+
--color-chart-7: var(--color-violet-500);
|
|
377
|
+
--color-chart-8: var(--color-yellow-700);
|
|
378
|
+
--color-chart-other: var(--color-neutral-500);
|
|
379
|
+
|
|
351
380
|
--text-color-strong: var(--color-neutral-950);
|
|
352
381
|
--text-color-body: --alpha(var(--color-neutral-950) / 0.75);
|
|
353
382
|
--text-color-muted: --alpha(var(--color-neutral-950) / 0.6);
|
package/dist/media-object.d.ts
CHANGED
|
@@ -7,24 +7,15 @@ type Props = ComponentProps<"div"> & WithAsChild;
|
|
|
7
7
|
* content (title and subtitle/description) to the right. This is the root
|
|
8
8
|
* component of the media object.
|
|
9
9
|
*/
|
|
10
|
-
declare const Root: {
|
|
11
|
-
({ asChild, className, children, style, ref }: Props): import("react").JSX.Element;
|
|
12
|
-
displayName: string;
|
|
13
|
-
};
|
|
10
|
+
declare const Root: ({ asChild, className, children, style, ref }: Props) => import("react").JSX.Element;
|
|
14
11
|
/**
|
|
15
12
|
* The container for an image or icon to display in the media slot of the media object.
|
|
16
13
|
*/
|
|
17
|
-
declare const Media: {
|
|
18
|
-
({ asChild, className, children, style, ref }: Props): import("react").JSX.Element;
|
|
19
|
-
displayName: string;
|
|
20
|
-
};
|
|
14
|
+
declare const Media: ({ asChild, className, children, style, ref }: Props) => import("react").JSX.Element;
|
|
21
15
|
/**
|
|
22
16
|
* The container for the content slot of a media object.
|
|
23
17
|
*/
|
|
24
|
-
declare const Content: {
|
|
25
|
-
({ asChild, className, children, style, ref }: Props): import("react").JSX.Element;
|
|
26
|
-
displayName: string;
|
|
27
|
-
};
|
|
18
|
+
declare const Content: ({ asChild, className, children, style, ref }: Props) => import("react").JSX.Element;
|
|
28
19
|
/**
|
|
29
20
|
* A small, reusable layout primitive for "image/icon on one side,
|
|
30
21
|
* descriptive content on the other" — the foundational
|
package/dist/media-object.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CDk0Bb9z.js";import{jsx as n}from"react/jsx-runtime";const r=({asChild:r=!1,className:i,children:a,style:o,ref:s})=>n(r?t:`div`,{ref:s,"data-slot":`media-object`,className:e(`flex gap-4`,i),style:o,children:a})
|
|
1
|
+
import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CDk0Bb9z.js";import{jsx as n}from"react/jsx-runtime";const r={Root:({asChild:r=!1,className:i,children:a,style:o,ref:s})=>n(r?t:`div`,{ref:s,"data-slot":`media-object`,className:e(`flex gap-4`,i),style:o,children:a}),Media:({asChild:r=!1,className:i,children:a,style:o,ref:s})=>n(r?t:`div`,{ref:s,"data-slot":`media-object-media`,className:e(`shrink-0 leading-none`,i),style:o,children:a}),Content:({asChild:r=!1,className:i,children:a,style:o,ref:s})=>n(r?t:`div`,{ref:s,"data-slot":`media-object-content`,className:e(`min-w-0 flex-1`,i),style:o,children:a})};export{r as MediaObject};
|
package/dist/multi-select.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { n as WithAsChild } from "./as-child-D23mGo4f.js";
|
|
2
|
-
import { o as WithValidation } from "./
|
|
2
|
+
import { o as WithValidation } from "./field-7QeiTFwl.js";
|
|
3
3
|
import { n as Separator } from "./separator-B5UmkVRL.js";
|
|
4
4
|
import { ComponentProps, ReactNode } from "react";
|
|
5
5
|
import * as Primitive from "@ariakit/react";
|
|
@@ -38,10 +38,7 @@ type MultiSelectProps = Primitive.ComboboxProviderProps<string[]>;
|
|
|
38
38
|
* </MultiSelect.Root>
|
|
39
39
|
* ```
|
|
40
40
|
*/
|
|
41
|
-
declare const Root: {
|
|
42
|
-
({ children, defaultSelectedValue, ...props }: MultiSelectProps): import("react").JSX.Element;
|
|
43
|
-
displayName: string;
|
|
44
|
-
};
|
|
41
|
+
declare const Root: ({ children, defaultSelectedValue, ...props }: MultiSelectProps) => import("react").JSX.Element;
|
|
45
42
|
type MultiSelectTriggerProps = ComponentProps<"div"> & WithValidation;
|
|
46
43
|
/**
|
|
47
44
|
* The trigger container for the multi-select. Wraps the input and selected
|
|
@@ -62,10 +59,7 @@ type MultiSelectTriggerProps = ComponentProps<"div"> & WithValidation;
|
|
|
62
59
|
* </MultiSelect.Root>
|
|
63
60
|
* ```
|
|
64
61
|
*/
|
|
65
|
-
declare const Trigger: {
|
|
66
|
-
({ "aria-invalid": _ariaInvalid, className, children, onKeyDown, onMouseDown, ref, validation: _validation, ...props }: MultiSelectTriggerProps): import("react").JSX.Element;
|
|
67
|
-
displayName: string;
|
|
68
|
-
};
|
|
62
|
+
declare const Trigger: ({ "aria-invalid": _ariaInvalid, className, children, onKeyDown, onMouseDown, ref, validation: _validation, ...props }: MultiSelectTriggerProps) => import("react").JSX.Element;
|
|
69
63
|
type TagProps = Omit<ComponentProps<"span">, "children"> & {
|
|
70
64
|
/**
|
|
71
65
|
* The value to display in the tag label.
|
|
@@ -105,10 +99,7 @@ type TagProps = Omit<ComponentProps<"span">, "children"> & {
|
|
|
105
99
|
* </MultiSelect.Root>
|
|
106
100
|
* ```
|
|
107
101
|
*/
|
|
108
|
-
declare const Tag: {
|
|
109
|
-
({ className, value, onRemove, locked, onKeyDown, ref, ...props }: TagProps): import("react").JSX.Element;
|
|
110
|
-
displayName: string;
|
|
111
|
-
};
|
|
102
|
+
declare const Tag: ({ className, value, onRemove, locked, onKeyDown, ref, ...props }: TagProps) => import("react").JSX.Element;
|
|
112
103
|
/**
|
|
113
104
|
* Props passed to the children render function of `MultiSelect.TagValues`.
|
|
114
105
|
* Spread these onto `MultiSelect.Tag` (or your own tag component) to
|
|
@@ -168,10 +159,7 @@ type MultiSelectTagValuesProps = {
|
|
|
168
159
|
* </MultiSelect.Root>
|
|
169
160
|
* ```
|
|
170
161
|
*/
|
|
171
|
-
declare const TagValues: {
|
|
172
|
-
({ children, lockedValues }: MultiSelectTagValuesProps): import("react").JSX.Element;
|
|
173
|
-
displayName: string;
|
|
174
|
-
};
|
|
162
|
+
declare const TagValues: ({ children, lockedValues }: MultiSelectTagValuesProps) => import("react").JSX.Element;
|
|
175
163
|
type MultiSelectInputProps = Omit<Primitive.ComboboxProps, "render"> & {
|
|
176
164
|
/**
|
|
177
165
|
* Called with the raw string value whenever the input text changes.
|
|
@@ -204,10 +192,7 @@ type MultiSelectInputProps = Omit<Primitive.ComboboxProps, "render"> & {
|
|
|
204
192
|
* </MultiSelect.Root>
|
|
205
193
|
* ```
|
|
206
194
|
*/
|
|
207
|
-
declare const Input: {
|
|
208
|
-
({ className, onBlur, onChange, onFocus, onKeyDown, onValueChange, placeholder, ref, ...props }: MultiSelectInputProps): import("react").JSX.Element;
|
|
209
|
-
displayName: string;
|
|
210
|
-
};
|
|
195
|
+
declare const Input: ({ className, onBlur, onChange, onFocus, onKeyDown, onValueChange, placeholder, ref, ...props }: MultiSelectInputProps) => import("react").JSX.Element;
|
|
211
196
|
type MultiSelectContentProps = Omit<Primitive.ComboboxPopoverProps, "render"> & WithAsChild;
|
|
212
197
|
/**
|
|
213
198
|
* Renders a popover that contains multi-select content, such as items, groups,
|
|
@@ -238,10 +223,7 @@ type MultiSelectContentProps = Omit<Primitive.ComboboxPopoverProps, "render"> &
|
|
|
238
223
|
* </MultiSelect.Root>
|
|
239
224
|
* ```
|
|
240
225
|
*/
|
|
241
|
-
declare const Content: {
|
|
242
|
-
({ asChild, backdrop, children, className, modal, portalElement, preventBodyScroll, ref, sameWidth, unmountOnHide, ...props }: MultiSelectContentProps): import("react").JSX.Element;
|
|
243
|
-
displayName: string;
|
|
244
|
-
};
|
|
226
|
+
declare const Content: ({ asChild, backdrop, children, className, modal, portalElement, preventBodyScroll, ref, sameWidth, unmountOnHide, ...props }: MultiSelectContentProps) => import("react").JSX.Element;
|
|
245
227
|
type MultiSelectItemProps = Omit<Primitive.ComboboxItemProps, "render"> & WithAsChild;
|
|
246
228
|
/**
|
|
247
229
|
* Renders a selectable item inside a `MultiSelect.Content` component.
|
|
@@ -263,10 +245,7 @@ type MultiSelectItemProps = Omit<Primitive.ComboboxItemProps, "render"> & WithAs
|
|
|
263
245
|
* </MultiSelect.Root>
|
|
264
246
|
* ```
|
|
265
247
|
*/
|
|
266
|
-
declare const Item: {
|
|
267
|
-
({ asChild, children, className, focusOnHover, value, onClick, ref, ...props }: MultiSelectItemProps): import("react").JSX.Element;
|
|
268
|
-
displayName: string;
|
|
269
|
-
};
|
|
248
|
+
declare const Item: ({ asChild, children, className, focusOnHover, value, onClick, ref, ...props }: MultiSelectItemProps) => import("react").JSX.Element;
|
|
270
249
|
type MultiSelectGroupProps = Omit<Primitive.ComboboxGroupProps, "render"> & WithAsChild;
|
|
271
250
|
/**
|
|
272
251
|
* Renders a group for MultiSelect.Item elements.
|
|
@@ -290,10 +269,7 @@ type MultiSelectGroupProps = Omit<Primitive.ComboboxGroupProps, "render"> & With
|
|
|
290
269
|
* </MultiSelect.Root>
|
|
291
270
|
* ```
|
|
292
271
|
*/
|
|
293
|
-
declare const Group: {
|
|
294
|
-
({ asChild, children, ref, ...props }: MultiSelectGroupProps): import("react").JSX.Element;
|
|
295
|
-
displayName: string;
|
|
296
|
-
};
|
|
272
|
+
declare const Group: ({ asChild, children, ref, ...props }: MultiSelectGroupProps) => import("react").JSX.Element;
|
|
297
273
|
type MultiSelectGroupLabelProps = Omit<Primitive.ComboboxGroupLabelProps, "render"> & WithAsChild;
|
|
298
274
|
/**
|
|
299
275
|
* Renders a label in a multi-select group.
|
|
@@ -316,10 +292,7 @@ type MultiSelectGroupLabelProps = Omit<Primitive.ComboboxGroupLabelProps, "rende
|
|
|
316
292
|
* </MultiSelect.Root>
|
|
317
293
|
* ```
|
|
318
294
|
*/
|
|
319
|
-
declare const GroupLabel: {
|
|
320
|
-
({ asChild, children, className, ref, ...props }: MultiSelectGroupLabelProps): import("react").JSX.Element;
|
|
321
|
-
displayName: string;
|
|
322
|
-
};
|
|
295
|
+
declare const GroupLabel: ({ asChild, children, className, ref, ...props }: MultiSelectGroupLabelProps) => import("react").JSX.Element;
|
|
323
296
|
type MultiSelectGroupDescriptionProps = ComponentProps<"p">;
|
|
324
297
|
/**
|
|
325
298
|
* Renders a description below a `MultiSelect.GroupLabel` inside a `MultiSelect.Group`.
|
|
@@ -346,10 +319,7 @@ type MultiSelectGroupDescriptionProps = ComponentProps<"p">;
|
|
|
346
319
|
* </MultiSelect.Root>
|
|
347
320
|
* ```
|
|
348
321
|
*/
|
|
349
|
-
declare const GroupDescription: {
|
|
350
|
-
({ className, children, ref, ...props }: MultiSelectGroupDescriptionProps): import("react").JSX.Element;
|
|
351
|
-
displayName: string;
|
|
352
|
-
};
|
|
322
|
+
declare const GroupDescription: ({ className, children, ref, ...props }: MultiSelectGroupDescriptionProps) => import("react").JSX.Element;
|
|
353
323
|
/**
|
|
354
324
|
* Renders a separator between MultiSelect.Items or MultiSelect.Groups.
|
|
355
325
|
*
|
|
@@ -374,10 +344,7 @@ declare const GroupDescription: {
|
|
|
374
344
|
* </MultiSelect.Root>
|
|
375
345
|
* ```
|
|
376
346
|
*/
|
|
377
|
-
declare const MultiSelectSeparatorComponent: {
|
|
378
|
-
({ className, ref, ...props }: ComponentProps<typeof Separator>): import("react").JSX.Element;
|
|
379
|
-
displayName: string;
|
|
380
|
-
};
|
|
347
|
+
declare const MultiSelectSeparatorComponent: ({ className, ref, ...props }: ComponentProps<typeof Separator>) => import("react").JSX.Element;
|
|
381
348
|
type MultiSelectEmptyProps = ComponentProps<"div">;
|
|
382
349
|
/**
|
|
383
350
|
* Renders a message when no items match the current filter.
|
|
@@ -399,10 +366,7 @@ type MultiSelectEmptyProps = ComponentProps<"div">;
|
|
|
399
366
|
* </MultiSelect.Root>
|
|
400
367
|
* ```
|
|
401
368
|
*/
|
|
402
|
-
declare const Empty: {
|
|
403
|
-
({ className, children, ref, ...props }: MultiSelectEmptyProps): import("react").JSX.Element;
|
|
404
|
-
displayName: string;
|
|
405
|
-
};
|
|
369
|
+
declare const Empty: ({ className, children, ref, ...props }: MultiSelectEmptyProps) => import("react").JSX.Element;
|
|
406
370
|
type MultiSelectContentFooterProps = ComponentProps<"div">;
|
|
407
371
|
/**
|
|
408
372
|
* Renders a sticky footer pinned to the bottom inside `MultiSelect.Content`,
|
|
@@ -427,10 +391,7 @@ type MultiSelectContentFooterProps = ComponentProps<"div">;
|
|
|
427
391
|
* </MultiSelect.Root>
|
|
428
392
|
* ```
|
|
429
393
|
*/
|
|
430
|
-
declare const ContentFooter: {
|
|
431
|
-
({ className, children, ref, ...props }: MultiSelectContentFooterProps): import("react").JSX.Element;
|
|
432
|
-
displayName: string;
|
|
433
|
-
};
|
|
394
|
+
declare const ContentFooter: ({ className, children, ref, ...props }: MultiSelectContentFooterProps) => import("react").JSX.Element;
|
|
434
395
|
/**
|
|
435
396
|
* A multi-select combobox that allows users to select multiple values with
|
|
436
397
|
* typeahead filtering. Selected values are displayed as removable tags.
|
package/dist/multi-select.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./compose-refs-BdBMM9ga.js";import{t}from"./cx-IiQEAKf5.js";import{t as n}from"./icon-CGgMKpJg.js";import{t as r}from"./slot-CDk0Bb9z.js";import{a as i,r as a}from"./validation-Bpptk_9t.js";import{t as o}from"./field-context-BR01g789.js";import{n as s}from"./separator-bpE_kooz.js";import{t as c}from"./use-prefers-reduced-motion-CagaNRgm.js";import{createContext as l,useCallback as u,useContext as d,useEffect as f,useMemo as p,useRef as m,useState 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=m(null),i=m(void 0),a=m(null),o=m([]),s=p(()=>({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=({"aria-invalid":n,className:r,children:o,onKeyDown:s,onMouseDown:c,ref:l,validation:u,...f})=>{let p=d(T),{inputRef:m}=d(D),h=x.useComboboxContext(),g=i(),{validation:v}=a({"aria-invalid":n,validation:u??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,l),...f,children:o})};k.displayName=`MultiSelectTrigger`;const A=({className:r,value:i,onRemove:a,locked:o=!1,onKeyDown:s,ref:c,...l})=>{let u=m(null);return v(`span`,{ref:e(u,c),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)},...l,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=m(i);a.current=i;let o=d(E);o.current=t;let s=p(()=>new Set(t),[t]),c=m(new Map),{onInputKeyDownRef:l,inputRef:u}=d(D),h=m(new Set);f(()=>()=>{h.current.forEach(cancelAnimationFrame)},[]);let v=e=>{let t=requestAnimationFrame(()=>{h.current.delete(t),e()});h.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=({className:n,onBlur:r,onChange:i,onFocus:a,onKeyDown:s,onValueChange:c,placeholder:l,ref:u,...f})=>{let p=x.useComboboxContext(),{onInputKeyDownRef:m,inputRef:h}=d(D),g=d(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,u),...f,...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=({asChild:e=!1,backdrop:n=!1,children:i,className:a,modal:o=!0,portalElement:s,preventBodyScroll:c,ref:l,sameWidth:p=!0,unmountOnHide:m=!0,...g})=>{let v=d(T),[y,b]=h(!1);f(()=>{b(v.current?.closest(`[data-mantle-modal-content]`)!=null)},[v]);let S=u(()=>v.current?.getBoundingClientRect()??null,[v]),C=u(e=>typeof s==`function`?s(e):s??v.current?.closest(`[data-mantle-modal-content]`)??e.ownerDocument.body,[s,v]),w=u(e=>!(e.target instanceof Node&&v.current?.contains(e.target)),[v]);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:S,gutter:4,hideOnInteractOutside:w,modal:o,portalElement:C,preventBodyScroll:c??!y,ref:l,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,sameWidth:p,unmountOnHide:m,...g,children:i})};N.displayName=`MultiSelectContent`;const P=({asChild:e=!1,children:i,className:a,focusOnHover:o=!0,value:s,onClick:c,ref:l,...u})=>{let f=d(E),p=s!=null&&f.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:l,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,resetValueOnSelect:!0,value:s,...u,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=({asChild:e=!1,children:t,ref:n,...i})=>_(x.ComboboxGroup,{"data-slot":`multi-select-group`,className:`mx-1`,ref:n,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,...i,children:t});F.displayName=`MultiSelectGroup`;const I=({asChild:e=!1,children:n,className:i,ref:a,...o})=>_(x.ComboboxGroupLabel,{"data-slot":`multi-select-group-label`,className:t(`text-muted px-2 py-1 text-xs font-medium`,i),ref:a,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,...o,children:n});I.displayName=`MultiSelectGroupLabel`;const L=({className:e,children:n,ref:r,...i})=>_(`p`,{"data-slot":`multi-select-group-description`,className:t(`text-muted px-2 pb-1 text-xs`,e),ref:r,...i,children:n});L.displayName=`MultiSelectGroupDescription`;const R=({className:e,ref:n,...r})=>_(s,{"data-slot":`multi-select-separator`,ref:n,className:t(`my-1 w-auto`,e),...r});R.displayName=`MultiSelectSeparator`;const z=({className:e,children:n,ref:r,...i})=>_(`div`,{"data-slot":`multi-select-empty`,className:t(`mx-1 text-muted px-2 py-6 text-center text-sm`,e),ref:r,role:`presentation`,...i,children:n});z.displayName=`MultiSelectEmpty`;const B=({className:e,children:n,ref:r,...i})=>_(`div`,{ref:r,"data-slot":`multi-select-content-footer`,"data-content-footer":!0,className:t(`bg-popover sticky bottom-0 border-t border-popover`,e),...i,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-BdBMM9ga.js";import{t}from"./cx-IiQEAKf5.js";import{t as n}from"./icon-lZ48P8Nn.js";import{t as r}from"./slot-CDk0Bb9z.js";import{a as i,r as a}from"./field-Bpptk_9t.js";import{t as o}from"./field-B1wqeZr4.js";import{n as s}from"./separator-bpE_kooz.js";import{t as c}from"./use-prefers-reduced-motion-CagaNRgm.js";import{createContext as l,useCallback as u,useContext as d,useEffect as f,useMemo as p,useRef as m,useState 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=m(null),i=m(void 0),a=m(null),o=m([]),s=p(()=>({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})})})})},k=({"aria-invalid":n,className:r,children:o,onKeyDown:s,onMouseDown:c,ref:l,validation:u,...f})=>{let p=d(T),{inputRef:m}=d(D),h=x.useComboboxContext(),g=i(),{validation:v}=a({"aria-invalid":n,validation:u??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,l),...f,children:o})},A=({className:r,value:i,onRemove:a,locked:o=!1,onKeyDown:s,ref:c,...l})=>{let u=m(null);return v(`span`,{ref:e(u,c),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(),M(e.currentTarget);return}s?.(e)},...l,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&&M(e);return}a?.()},onMouseDown:e=>{e.preventDefault()},children:_(n,{svg:o?_(S,{}):_(y,{weight:`bold`}),className:`size-4`})})]})},j={Root:O,Trigger:k,TagValues:({children:e,lockedValues:t=w})=>{let n=x.useComboboxContext(),r=x.useStoreState(n,`selectedValue`),i=(C(r)?r:void 0)??w,a=m(i);a.current=i;let o=d(E);o.current=t;let s=p(()=>new Set(t),[t]),c=m(new Map),{onInputKeyDownRef:l,inputRef:u}=d(D),h=m(new Set);f(()=>()=>{h.current.forEach(cancelAnimationFrame)},[]);let v=e=>{let t=requestAnimationFrame(()=>{h.current.delete(t),e()});h.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&&M(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&&M(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&&M(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)})})},Input:({className:n,onBlur:r,onChange:i,onFocus:a,onKeyDown:s,onValueChange:c,placeholder:l,ref:u,...f})=>{let p=x.useComboboxContext(),{onInputKeyDownRef:m,inputRef:h}=d(D),g=d(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,u),...f,...g?{"aria-describedby":g[`aria-describedby`],"aria-errormessage":g[`aria-errormessage`],"aria-invalid":g[`aria-invalid`],id:g.id,name:g.name}:void 0})},Tag:A,Content:({asChild:e=!1,backdrop:n=!1,children:i,className:a,modal:o=!0,portalElement:s,preventBodyScroll:c,ref:l,sameWidth:p=!0,unmountOnHide:m=!0,...g})=>{let v=d(T),[y,b]=h(!1);f(()=>{b(v.current?.closest(`[data-mantle-modal-content]`)!=null)},[v]);let S=u(()=>v.current?.getBoundingClientRect()??null,[v]),C=u(e=>typeof s==`function`?s(e):s??v.current?.closest(`[data-mantle-modal-content]`)??e.ownerDocument.body,[s,v]),w=u(e=>!(e.target instanceof Node&&v.current?.contains(e.target)),[v]);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:S,gutter:4,hideOnInteractOutside:w,modal:o,portalElement:C,preventBodyScroll:c??!y,ref:l,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,sameWidth:p,unmountOnHide:m,...g,children:i})},ContentFooter:({className:e,children:n,ref:r,...i})=>_(`div`,{ref:r,"data-slot":`multi-select-content-footer`,"data-content-footer":!0,className:t(`bg-popover sticky bottom-0 border-t border-popover`,e),...i,children:n}),Item:({asChild:e=!1,children:i,className:a,focusOnHover:o=!0,value:s,onClick:c,ref:l,...u})=>{let f=d(E),p=s!=null&&f.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:l,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,resetValueOnSelect:!0,value:s,...u,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`})})]})},Group:({asChild:e=!1,children:t,ref:n,...i})=>_(x.ComboboxGroup,{"data-slot":`multi-select-group`,className:`mx-1`,ref:n,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,...i,children:t}),GroupLabel:({asChild:e=!1,children:n,className:i,ref:a,...o})=>_(x.ComboboxGroupLabel,{"data-slot":`multi-select-group-label`,className:t(`text-muted px-2 py-1 text-xs font-medium`,i),ref:a,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,...o,children:n}),GroupDescription:({className:e,children:n,ref:r,...i})=>_(`p`,{"data-slot":`multi-select-group-description`,className:t(`text-muted px-2 pb-1 text-xs`,e),ref:r,...i,children:n}),Separator:({className:e,ref:n,...r})=>_(s,{"data-slot":`multi-select-separator`,ref:n,className:t(`my-1 w-auto`,e),...r}),Empty:({className:e,children:n,ref:r,...i})=>_(`div`,{"data-slot":`multi-select-empty`,className:t(`mx-1 text-muted px-2 py-6 text-center text-sm`,e),ref:r,role:`presentation`,...i,children:n})};function M(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{j as MultiSelect};
|
package/dist/otp-input.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { n as WithAsChild } from "./as-child-D23mGo4f.js";
|
|
2
|
-
import { o as WithValidation } from "./
|
|
2
|
+
import { o as WithValidation } from "./field-7QeiTFwl.js";
|
|
3
3
|
import { ComponentProps, ReactNode } from "react";
|
|
4
4
|
import { OTPInput, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
|
|
5
5
|
//#region src/components/otp-input/otp-input.d.ts
|
|
@@ -42,10 +42,7 @@ type OtpInputRootProps = Omit<ComponentProps<typeof OTPInput>, "render" | "child
|
|
|
42
42
|
* </OtpInput.Root>
|
|
43
43
|
* ```
|
|
44
44
|
*/
|
|
45
|
-
declare const Root: {
|
|
46
|
-
({ "aria-invalid": ariaInvalid, children, className, containerClassName, ref, validation: _validation, ...props }: OtpInputRootProps): import("react").JSX.Element;
|
|
47
|
-
displayName: string;
|
|
48
|
-
};
|
|
45
|
+
declare const Root: ({ "aria-invalid": ariaInvalid, children, className, containerClassName, ref, validation: _validation, ...props }: OtpInputRootProps) => import("react").JSX.Element;
|
|
49
46
|
type OtpInputGroupProps = ComponentProps<"div"> & WithAsChild;
|
|
50
47
|
/**
|
|
51
48
|
* Groups one or more `OtpInput.Slot` parts into a visually-connected segment.
|
|
@@ -71,10 +68,7 @@ type OtpInputGroupProps = ComponentProps<"div"> & WithAsChild;
|
|
|
71
68
|
* </OtpInput.Root>
|
|
72
69
|
* ```
|
|
73
70
|
*/
|
|
74
|
-
declare const Group: {
|
|
75
|
-
({ asChild, children, className, ref, ...props }: OtpInputGroupProps): import("react").JSX.Element;
|
|
76
|
-
displayName: string;
|
|
77
|
-
};
|
|
71
|
+
declare const Group: ({ asChild, children, className, ref, ...props }: OtpInputGroupProps) => import("react").JSX.Element;
|
|
78
72
|
type OtpInputSlotProps = ComponentProps<"div"> & {
|
|
79
73
|
/**
|
|
80
74
|
* The zero-based index of the character slot to render. Must be a valid
|
|
@@ -107,10 +101,7 @@ type OtpInputSlotProps = ComponentProps<"div"> & {
|
|
|
107
101
|
* </OtpInput.Root>
|
|
108
102
|
* ```
|
|
109
103
|
*/
|
|
110
|
-
declare const OtpInputSlotImpl: {
|
|
111
|
-
({ className, index, ref, ...props }: OtpInputSlotProps): import("react").JSX.Element;
|
|
112
|
-
displayName: string;
|
|
113
|
-
};
|
|
104
|
+
declare const OtpInputSlotImpl: ({ className, index, ref, ...props }: OtpInputSlotProps) => import("react").JSX.Element;
|
|
114
105
|
type OtpInputSeparatorProps = ComponentProps<"div"> & WithAsChild & {
|
|
115
106
|
/**
|
|
116
107
|
* If `true`, the separator will be rendered with `role="separator"` so
|
|
@@ -146,10 +137,7 @@ type OtpInputSeparatorProps = ComponentProps<"div"> & WithAsChild & {
|
|
|
146
137
|
* </OtpInput.Root>
|
|
147
138
|
* ```
|
|
148
139
|
*/
|
|
149
|
-
declare const Separator: {
|
|
150
|
-
({ asChild, children, className, ref, semantic, ...props }: OtpInputSeparatorProps): import("react").JSX.Element;
|
|
151
|
-
displayName: string;
|
|
152
|
-
};
|
|
140
|
+
declare const Separator: ({ asChild, children, className, ref, semantic, ...props }: OtpInputSeparatorProps) => import("react").JSX.Element;
|
|
153
141
|
/**
|
|
154
142
|
* Compound component for capturing one-time passcodes (OTP). Combines a
|
|
155
143
|
* single hidden input (handling paste, autofill, and IME) with a row of
|
package/dist/otp-input.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CDk0Bb9z.js";import{t as n}from"./types-D85fCNV3.js";import{a as r,r as i}from"./
|
|
1
|
+
import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CDk0Bb9z.js";import{t as n}from"./types-D85fCNV3.js";import{a as r,r as i}from"./field-Bpptk_9t.js";import{t as a}from"./field-B1wqeZr4.js";import{useContext as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{MinusIcon as l}from"@phosphor-icons/react/Minus";import{OTPInput as u,OTPInputContext as d,REGEXP_ONLY_CHARS as f,REGEXP_ONLY_DIGITS as p,REGEXP_ONLY_DIGITS_AND_CHARS as m}from"input-otp";const h={error:`danger`,success:`success`,warning:`warning`},g=e=>`var(--color-${e}-600)`,_=e=>`var(--ring-color-focus-${e})`,v=({totalActive:e,total:t})=>e===0?`idle`:e===1?`caret`:e===t?`all`:`range`,y=({children:e,validation:t})=>{let r=o(d),i=r.slots.length,a=r.slots.reduce((e,t)=>e+ +!!t.isActive,0),c=v({totalActive:a,total:i}),l=t?h[t]:void 0,u=l?n({"--otp-validation-border":g(l),"--otp-validation-ring":_(l)}):void 0;return s(`div`,{className:`group/otp contents`,"data-otp-state":c,"data-validation":t||void 0,style:u,children:e})},b={Root:({"aria-invalid":t,children:n,className:c,containerClassName:l,ref:d,validation:f,...p})=>{let m=r(),h=o(a),{ariaInvalid:g,validation:_}=i({"aria-invalid":t,defaultAriaInvalid:!1,validation:f??m});return s(u,{ref:d,"aria-invalid":g,"data-slot":`otp-input`,containerClassName:e(`flex items-center gap-2 has-disabled:opacity-50`,l),className:e(`disabled:cursor-not-allowed`,c),...p,...h?{"aria-describedby":h[`aria-describedby`],"aria-errormessage":h[`aria-errormessage`],id:h.id,name:h.name}:void 0,children:s(y,{validation:_,children:n})})},Group:({asChild:n,children:r,className:i,ref:a,...o})=>s(n?t:`div`,{ref:a,"data-slot":`otp-input-group`,className:e(`relative flex items-center rounded-md`,`has-[[data-active]~[data-active]]:ring-focus-accent has-[[data-active]~[data-active]]:ring-4`,`group-data-validation/otp:has-[[data-active]~[data-active]]:ring-(--otp-validation-ring)`,i),...o,children:r}),Slot:({className:t,index:n,ref:r,...i})=>{let a=o(d).slots[n],l=a?.char??null,u=a?.hasFakeCaret??!1;return c(`div`,{ref:r,"data-slot":`otp-input-slot`,"data-active":a?.isActive??!1?``:void 0,className:e(`border-form bg-form text-strong relative flex h-10 w-10 items-center justify-center border-y border-r text-sm shadow-sm outline-hidden transition-all duration-150 ease-out`,`first:rounded-l-md first:border-l last:rounded-r-md`,`[&:has(+[data-active])]:group-data-[otp-state=caret]/otp:border-r-transparent`,`data-active:group-data-[otp-state=caret]/otp:border-accent-600`,`data-active:group-data-[otp-state=caret]/otp:border-l`,`data-active:group-data-[otp-state=caret]/otp:ring-focus-accent`,`data-active:group-data-[otp-state=caret]/otp:z-20`,`data-active:group-data-[otp-state=caret]/otp:ring-4`,`group-data-[otp-state=all]/otp:border-accent-600`,`group-data-validation/otp:border-y-(--otp-validation-border)`,`group-data-validation/otp:first:border-l-(--otp-validation-border)`,`group-data-validation/otp:last:border-r-(--otp-validation-border)`,`group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:border-(--otp-validation-border)`,`group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:ring-(--otp-validation-ring)`,`group-data-validation/otp:group-data-[otp-state=all]/otp:border-(--otp-validation-border)`,t),...i,children:[l,u&&s(`div`,{className:`pointer-events-none absolute inset-0 flex items-center justify-center`,children:s(`div`,{className:`bg-strong h-4 w-px animate-pulse`})})]})},Separator:({asChild:n,children:r,className:i,ref:a,semantic:o=!1,...c})=>{let u=n?t:`div`,d=o?{role:`separator`}:{"aria-hidden":!0,role:`none`};return s(u,{ref:a,"data-slot":`otp-input-separator`,className:e(`text-separator flex items-center`,i),...d,...c,children:r??s(l,{weight:`bold`})})}};export{b as OtpInput,f as REGEXP_ONLY_CHARS,p as REGEXP_ONLY_DIGITS,m as REGEXP_ONLY_DIGITS_AND_CHARS};
|
package/dist/pagination.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { n as WithAsChild } from "./as-child-D23mGo4f.js";
|
|
2
|
-
import { t as ButtonGroup } from "./
|
|
3
|
-
import { t as Select } from "./select-
|
|
2
|
+
import { t as ButtonGroup } from "./button-C-gMbPso.js";
|
|
3
|
+
import { t as Select } from "./select-0z7HVS6r.js";
|
|
4
4
|
import { ComponentProps } from "react";
|
|
5
5
|
//#region src/components/pagination/cursor-pagination.d.ts
|
|
6
6
|
type CursorPaginationProps = ComponentProps<"div"> & {
|
|
@@ -33,10 +33,7 @@ type CursorPaginationProps = ComponentProps<"div"> & {
|
|
|
33
33
|
* </CursorPagination>
|
|
34
34
|
* ```
|
|
35
35
|
*/
|
|
36
|
-
declare const Root: {
|
|
37
|
-
({ className, children, defaultPageSize, ref, ...props }: CursorPaginationProps): import("react").JSX.Element;
|
|
38
|
-
displayName: string;
|
|
39
|
-
};
|
|
36
|
+
declare const Root: ({ className, children, defaultPageSize, ref, ...props }: CursorPaginationProps) => import("react").JSX.Element;
|
|
40
37
|
type CursorButtonsProps = Omit<ComponentProps<typeof ButtonGroup>, "appearance"> & {
|
|
41
38
|
/**
|
|
42
39
|
* Whether there is a next page of data to load.
|
|
@@ -70,10 +67,7 @@ type CursorButtonsProps = Omit<ComponentProps<typeof ButtonGroup>, "appearance">
|
|
|
70
67
|
* />
|
|
71
68
|
* ```
|
|
72
69
|
*/
|
|
73
|
-
declare const Buttons: {
|
|
74
|
-
({ hasNextPage, hasPreviousPage, onNextPage, onPreviousPage, ref, ...props }: CursorButtonsProps): import("react").JSX.Element;
|
|
75
|
-
displayName: string;
|
|
76
|
-
};
|
|
70
|
+
declare const Buttons: ({ hasNextPage, hasPreviousPage, onNextPage, onPreviousPage, ref, ...props }: CursorButtonsProps) => import("react").JSX.Element;
|
|
77
71
|
declare const defaultPageSizes: readonly [5, 10, 20, 50, 100];
|
|
78
72
|
type CursorPageSizeSelectProps = Omit<ComponentProps<typeof Select.Trigger>, "children"> & {
|
|
79
73
|
/**
|
|
@@ -98,10 +92,7 @@ type CursorPageSizeSelectProps = Omit<ComponentProps<typeof Select.Trigger>, "ch
|
|
|
98
92
|
* />
|
|
99
93
|
* ```
|
|
100
94
|
*/
|
|
101
|
-
declare const PageSizeSelect: {
|
|
102
|
-
({ className, pageSizes, onChangePageSize, ref, ...rest }: CursorPageSizeSelectProps): import("react").JSX.Element;
|
|
103
|
-
displayName: string;
|
|
104
|
-
};
|
|
95
|
+
declare const PageSizeSelect: ({ className, pageSizes, onChangePageSize, ref, ...rest }: CursorPageSizeSelectProps) => import("react").JSX.Element;
|
|
105
96
|
type CursorPageSizeValueProps = Omit<ComponentProps<"span">, "children"> & WithAsChild;
|
|
106
97
|
/**
|
|
107
98
|
* Displays the current page size when using cursor-based pagination as a read-only value.
|
package/dist/pagination.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CDk0Bb9z.js";import{t as n}from"./
|
|
1
|
+
import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CDk0Bb9z.js";import{t as n}from"./button-BAno7KIU.js";import{t as r}from"./button-D9n09xUg.js";import{n as i}from"./separator-bpE_kooz.js";import{t as a}from"./select-BCHWvmyC.js";import{createContext as o,useContext as s,useEffect as c,useMemo as l,useState as u}from"react";import d from"tiny-invariant";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{CaretRightIcon as m}from"@phosphor-icons/react/CaretRight";import{CaretLeftIcon as h}from"@phosphor-icons/react/CaretLeft";const g=o(void 0),_=({className:t,children:n,defaultPageSize:r,ref:i,...a})=>{let[o,s]=u(r),c=l(()=>({defaultPageSize:r,pageSize:o,setPageSize:s}),[r,o]);return f(g.Provider,{value:c,children:f(`div`,{"data-slot":`cursor-pagination`,className:e(`inline-flex items-center justify-between gap-2`,t),ref:i,...a,children:n})})},v=({hasNextPage:e,hasPreviousPage:t,onNextPage:a,onPreviousPage:o,ref:s,...c})=>p(r,{"data-slot":`cursor-pagination-buttons`,appearance:`panel`,ref:s,...c,children:[f(n,{"data-slot":`cursor-pagination-previous`,appearance:`ghost`,disabled:!t,icon:f(h,{}),intent:`neutral`,label:`Previous page`,onClick:o,size:`sm`,type:`button`}),f(i,{"data-slot":`cursor-pagination-separator`,orientation:`vertical`,className:`min-h-5`}),f(n,{"data-slot":`cursor-pagination-next`,appearance:`ghost`,disabled:!e,icon:f(m,{}),intent:`neutral`,label:`Next page`,onClick:a,size:`sm`,type:`button`})]}),y=[5,10,20,50,100],b=({className:t,pageSizes:n=y,onChangePageSize:r,ref:i,...o})=>{let c=s(g);return d(c,`CursorPageSizeSelect must be used as a child of a CursorPagination component`),d(n.includes(c.defaultPageSize),`CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes`),d(n.includes(c.pageSize),`CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes`),p(a.Root,{defaultValue:`${c.pageSize}`,onValueChange:e=>{let t=Number.parseInt(e,10);Number.isNaN(t)&&(t=c.defaultPageSize),c.setPageSize(t),r?.(t)},children:[f(a.Trigger,{ref:i,"data-slot":`cursor-pagination-page-size-select`,className:e(`w-auto min-w-36`,t),value:c.pageSize,...o,children:f(a.Value,{})}),f(a.Content,{width:`trigger`,children:n.map(e=>p(a.Item,{value:`${e}`,children:[e,` per page`]},e))})]})};function x({asChild:n=!1,className:r,...i}){let a=s(g);return d(a,`CursorPageSizeValue must be used as a child of a CursorPagination component`),p(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`]})}const S={Root:_,Buttons:v,PageSizeSelect:b,PageSizeValue:x};function C({listSize:e,pageSize:t}){let[n,r]=u(1),[i,a]=u(t);c(()=>{a(t),r(1)},[t]),c(()=>{r(1)},[e]);let o=Math.ceil(e/i),s=(n-1)*i,l=n>1,d=n<o;function f(e){r(Math.max(1,Math.min(e,o)))}function p(){d&&r(e=>Math.min(e+1,o))}function m(){l&&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:d,hasPreviousPage:l,nextPage:p,offset:s,pageSize:i,previousPage:m,setPageSize:h,totalPages:o}}function w(e,t){return e.slice(t.offset,t.offset+t.pageSize)}export{S as CursorPagination,w as getOffsetPaginatedSlice,C as useOffsetPagination};
|
|
@@ -35,10 +35,7 @@ type PopoverContentProps = ComponentProps<typeof PopoverPrimitive.Content> & {
|
|
|
35
35
|
* </Popover.Root>
|
|
36
36
|
* ```
|
|
37
37
|
*/
|
|
38
|
-
declare const Content: {
|
|
39
|
-
({ align, className, onClick, preferredWidth, ref, sideOffset, ...props }: PopoverContentProps): import("react").JSX.Element;
|
|
40
|
-
displayName: string;
|
|
41
|
-
};
|
|
38
|
+
declare const Content: ({ align, className, onClick, preferredWidth, ref, sideOffset, ...props }: PopoverContentProps) => import("react").JSX.Element;
|
|
42
39
|
/**
|
|
43
40
|
* A floating overlay that displays rich content in a portal, triggered by a button.
|
|
44
41
|
*
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as e}from"./cx-IiQEAKf5.js";import{jsx as t}from"react/jsx-runtime";import*as n from"@radix-ui/react-popover";const r=n.Root,i=n.Trigger,a={Root:r,Anchor:n.Anchor,Close:n.Close,Content:({align:r=`center`,className:i,onClick:a,preferredWidth:o=`max-w-72`,ref:s,sideOffset:c=4,...l})=>t(n.Portal,{children:t(n.Content,{align:r,"data-slot":`popover-content`,className:e(`text-popover-foreground border-popover bg-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 z-50 rounded-md border p-4 shadow-md outline-hidden`,o,i),onClick:e=>{e.stopPropagation(),a?.(e)},ref:s,sideOffset:c,...l})}),Trigger:i};export{a as t};
|
package/dist/popover.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as Popover } from "./
|
|
1
|
+
import { t as Popover } from "./popover-CE4OlWkd.js";
|
|
2
2
|
export { Popover };
|
package/dist/popover.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./popover-
|
|
1
|
+
import{t as e}from"./popover-CQ9s7jG5.js";export{e as Popover};
|