@ngrok/mantle 0.84.1 → 0.84.2
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 +14 -10
- package/dist/accordion.js +1 -1
- package/dist/agent.json +1 -1
- package/dist/{alert-Blmunr_D.d.ts → alert-DCVfviBx.d.ts} +18 -3
- package/dist/alert-DtBQuuuP.js +1 -0
- package/dist/alert-center.d.ts +15 -6
- package/dist/alert-center.js +1 -1
- package/dist/alert-dialog.d.ts +58 -37
- package/dist/alert-dialog.js +1 -1
- package/dist/alert.d.ts +1 -1
- package/dist/alert.js +1 -1
- package/dist/alternate-announcement-BkH4bOKp.js +1 -0
- package/dist/anchor-Cqu4GPPV.js +1 -0
- package/dist/anchor.d.ts +15 -15
- package/dist/anchor.js +1 -1
- package/dist/app-layout.js +1 -1
- package/dist/area-chart.js +1 -1
- package/dist/avatar.js +1 -1
- package/dist/badge.d.ts +3 -1
- package/dist/badge.js +1 -1
- package/dist/bar-chart.d.ts +17 -8
- package/dist/bar-chart.js +1 -1
- package/dist/breadcrumb.js +1 -1
- package/dist/button-B52_vczK.js +1 -0
- package/dist/{button-DjsmeoJ2.d.ts → button-B5i9n7Qp.d.ts} +19 -7
- package/dist/button-CaM-ZAH5.js +1 -0
- package/dist/{button-DwFvQWu4.js → button-DGsTE3P2.js} +1 -1
- package/dist/{button-CRCNRnk6.d.ts → button-DO53OA70.d.ts} +2 -2
- package/dist/{button-YkYZ0ymH.js → button-Wn-yt0c_.js} +1 -1
- package/dist/{button-C39M5h4K.d.ts → button-crUf0hbR.d.ts} +19 -2
- package/dist/button.d.ts +3 -3
- package/dist/button.js +1 -1
- package/dist/calendar.d.ts +20 -4
- package/dist/calendar.js +1 -1
- package/dist/card.d.ts +10 -6
- package/dist/card.js +1 -1
- package/dist/centered-layout.js +1 -1
- package/dist/chart-B_rZqf8a.js +2 -0
- package/dist/checkbox-Gg6nGUnR.js +1 -0
- package/dist/checkbox.js +1 -1
- package/dist/choice-CT_AdesL.js +1 -0
- package/dist/{choice-zOjixuj7.d.ts → choice-PESu-9s8.d.ts} +36 -12
- package/dist/choice.d.ts +1 -1
- package/dist/choice.js +1 -1
- package/dist/{code-block-Dj9otiLi.js → code-block-BE3Q0iAo.js} +2 -2
- package/dist/code-block.d.ts +26 -2
- package/dist/code-block.js +6 -6
- package/dist/code-block_highlight-utils.js +1 -1
- package/dist/code.js +1 -1
- package/dist/combobox.d.ts +19 -2
- package/dist/combobox.js +1 -1
- package/dist/command.d.ts +32 -13
- package/dist/command.js +1 -1
- package/dist/compose-refs-DdUwopIY.js +1 -0
- package/dist/{cx-IiQEAKf5.js → cx-0HCjnNv1.js} +1 -1
- package/dist/cx.d.ts +3 -3
- package/dist/cx.js +1 -1
- package/dist/data-table.d.ts +114 -61
- package/dist/data-table.js +1 -1
- package/dist/description-list.d.ts +43 -9
- package/dist/description-list.js +1 -1
- package/dist/{dialog-u8PtHYES.d.ts → dialog-B8YvfyIo.d.ts} +5 -3
- package/dist/{dialog-CSUE-jw8.js → dialog-CA-1Z0Np.js} +1 -1
- package/dist/{dialog-CEk0L7M7.d.ts → dialog-CtLI_uex.d.ts} +5 -3
- package/dist/dialog.d.ts +2 -2
- package/dist/dialog.js +1 -1
- package/dist/{dropdown-menu-CpsUJGbn.d.ts → dropdown-menu-BYapTV0f.d.ts} +8 -5
- package/dist/dropdown-menu-BkPBh_8y.d.ts +1 -0
- package/dist/{dropdown-menu-Cy7mLIpJ.js → dropdown-menu-lxHsgLiw.js} +1 -1
- package/dist/dropdown-menu.d.ts +2 -2
- package/dist/dropdown-menu.js +1 -1
- package/dist/empty.d.ts +4 -4
- package/dist/empty.js +1 -1
- package/dist/field.d.ts +91 -38
- package/dist/field.js +1 -1
- package/dist/flag.d.ts +9 -1
- package/dist/flag.js +1 -1
- package/dist/hooks.d.ts +15 -18
- package/dist/hooks.js +1 -1
- package/dist/hover-card.d.ts +11 -3
- package/dist/hover-card.js +1 -1
- package/dist/{icon-k4E9yNWD.d.ts → icon-BmJ57Tgh.d.ts} +10 -0
- package/dist/icon-CGKaq_tV.js +1 -0
- package/dist/icon-U24NfYv7.js +1 -0
- package/dist/icon-w0HUe7tr.d.ts +42 -0
- package/dist/icon.d.ts +2 -2
- package/dist/icon.js +1 -1
- package/dist/{icons-DEVx1oP9.js → icons-Cie4gcrm.js} +1 -1
- package/dist/icons.d.ts +7 -13
- package/dist/icons.js +1 -1
- package/dist/{in-view-gxyc9Q1_.d.ts → in-view-Ch5vJtWo.d.ts} +10 -5
- package/dist/input-BhykQSvJ.js +1 -0
- package/dist/input-DQyN6gN0.js +1 -0
- package/dist/input.d.ts +22 -10
- package/dist/input.js +1 -1
- package/dist/{kbd-B9qmYaW8.js → kbd-4_0Y_8rx.js} +1 -1
- package/dist/kbd.d.ts +15 -9
- package/dist/kbd.js +1 -1
- package/dist/{label-C6YH9skg.d.ts → label-Bnfe9YJ6.d.ts} +3 -1
- package/dist/label-BqIp6kFx.js +1 -0
- package/dist/label.d.ts +1 -1
- package/dist/label.js +1 -1
- package/dist/layer-container-BTcQpd4K.js +1 -0
- package/dist/layer-container.js +1 -1
- package/dist/line-chart.js +1 -1
- package/dist/{list-7w5k3HiN.js → list-Bo1mExIg.js} +1 -1
- package/dist/list.d.ts +37 -14
- package/dist/list.js +1 -1
- package/dist/live-region-CV7kykeo.js +1 -0
- package/dist/live-region.js +1 -1
- package/dist/llms.txt +1 -1
- package/dist/main.d.ts +4 -2
- package/dist/main.js +1 -1
- package/dist/media-object.d.ts +5 -12
- package/dist/media-object.js +1 -1
- package/dist/multi-select.d.ts +45 -13
- package/dist/multi-select.js +1 -1
- package/dist/otp-input.d.ts +9 -3
- package/dist/otp-input.js +1 -1
- package/dist/pagination.d.ts +165 -19
- package/dist/pagination.js +1 -1
- package/dist/{popover-D6x6Bq-G.js → popover-Bp-9B3GR.js} +1 -1
- package/dist/{popover-DDuw1UaJ.d.ts → popover-s2LhmzfQ.d.ts} +8 -4
- package/dist/popover.d.ts +1 -1
- package/dist/popover.js +1 -1
- package/dist/primitive-CejGAoGb.js +1 -0
- package/dist/progress.d.ts +65 -31
- package/dist/progress.js +1 -1
- package/dist/qr-code.d.ts +10 -4
- package/dist/qr-code.js +1 -1
- package/dist/radio-group-HDVxTNPi.js +1 -0
- package/dist/radio-group.d.ts +50 -25
- package/dist/radio-group.js +1 -1
- package/dist/sandbar.d.ts +1 -1
- package/dist/sandbar.js +1 -1
- package/dist/sandboxed-on-click-UagMFl_U.js +1 -0
- package/dist/sandboxed-on-click.d.ts +8 -0
- package/dist/sandboxed-on-click.js +1 -1
- package/dist/scatter-plot.js +1 -1
- package/dist/select-Dov9H2CX.js +1 -0
- package/dist/{select-DkFkSYBP.d.ts → select-ouAW88jx.d.ts} +30 -9
- package/dist/select.d.ts +1 -1
- package/dist/select.js +1 -1
- package/dist/selectable-list.d.ts +64 -20
- package/dist/selectable-list.js +1 -1
- package/dist/{separator-CNDs98Dv.d.ts → separator-Bo4nY_3M.d.ts} +13 -2
- package/dist/{separator-D1K7DSTv.js → separator-Da8lDnio.js} +1 -1
- package/dist/separator.d.ts +1 -1
- package/dist/separator.js +1 -1
- package/dist/{sheet-2AQT0DNu.js → sheet-C6UGAvRk.js} +1 -1
- package/dist/sheet.d.ts +5 -5
- package/dist/sheet.js +1 -1
- package/dist/sidebar.d.ts +7 -6
- package/dist/sidebar.js +1 -1
- package/dist/skeleton-paJOgf-f.js +1 -0
- package/dist/skeleton.d.ts +5 -4
- package/dist/skeleton.js +1 -1
- package/dist/skip-to-main-link.d.ts +9 -6
- package/dist/skip-to-main-link.js +1 -1
- package/dist/slider.d.ts +7 -3
- package/dist/slider.js +1 -1
- package/dist/{slot-CxM7jdFi.js → slot-C3gII_9c.js} +1 -1
- package/dist/slot.js +1 -1
- package/dist/split-button.d.ts +8 -3
- package/dist/split-button.js +1 -1
- package/dist/switch.js +1 -1
- package/dist/{table-D51ZtV4U.d.ts → table-DEI-qvSC.d.ts} +25 -12
- package/dist/table-EZNW3nFk.js +1 -0
- package/dist/table.d.ts +1 -1
- package/dist/table.js +1 -1
- package/dist/tabs.js +1 -1
- package/dist/text-area.js +1 -1
- package/dist/theme-DN-Et3A_.js +1 -0
- package/dist/theme-switcher.d.ts +24 -12
- package/dist/theme-switcher.js +1 -1
- package/dist/theme.d.ts +18 -4
- package/dist/theme.js +1 -1
- package/dist/toast.d.ts +8 -3
- package/dist/toast.js +1 -1
- package/dist/tooltip-CkAibjBb.js +1 -0
- package/dist/{tooltip-BKWK5c7_.d.ts → tooltip-DA41fxe5.d.ts} +7 -1
- package/dist/tooltip.d.ts +1 -1
- package/dist/tooltip.js +1 -1
- package/dist/{use-breakpoint-Dqu12Szq.js → use-breakpoint-BhJ_3El2.js} +1 -1
- package/dist/use-is-apple-platform-CMPzIYjz.js +1 -0
- package/dist/use-matches-media-query-DCBT6iNA.js +1 -0
- package/dist/use-prefers-reduced-motion-DHYDQk1h.js +1 -0
- package/dist/utils.d.ts +1 -1
- package/dist/utils.js +1 -1
- package/dist/visually-hidden.js +1 -1
- package/dist/well.js +1 -1
- package/package.json +3 -3
- package/dist/alert-D8StKSjK.js +0 -1
- package/dist/anchor-BjyGV6tB.js +0 -1
- package/dist/button-BCk0KpWb.js +0 -1
- package/dist/button-DiDlvAOp.js +0 -1
- package/dist/chart-DVt4hvnu.js +0 -2
- package/dist/checkbox-0EoxOyMA.js +0 -1
- package/dist/choice-BKkfjjAd.js +0 -1
- package/dist/compose-refs-BdBMM9ga.js +0 -1
- package/dist/dropdown-menu-CNaaABck.d.ts +0 -1
- package/dist/icon-CX_gj6sW.d.ts +0 -25
- package/dist/icon-d-nMCfAI.js +0 -1
- package/dist/icon-lZ48P8Nn.js +0 -1
- package/dist/input-BnlpQF0c.js +0 -1
- package/dist/input-CXmS0OFN.js +0 -1
- package/dist/label-D-D11mlp.js +0 -1
- package/dist/layer-container-CglTh9-6.js +0 -1
- package/dist/primitive-BSBmlRyy.js +0 -1
- package/dist/select-B52tWHOB.js +0 -1
- package/dist/skeleton-D86Gsflk.js +0 -1
- package/dist/table-C_Nm_RSV.js +0 -1
- package/dist/theme-CVfq037P.js +0 -1
- package/dist/tooltip-BZRRJgpm.js +0 -1
- package/dist/use-is-apple-platform-Cxwrb86L.js +0 -1
- package/dist/use-matches-media-query-Bd_GhhVd.js +0 -1
- package/dist/use-prefers-reduced-motion-Bk5zAfHY.js +0 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { n as WithAsChild } from "./as-child-D23mGo4f.js";
|
|
2
|
-
import { t as Label } from "./label-
|
|
2
|
+
import { t as Label } from "./label-Bnfe9YJ6.js";
|
|
3
3
|
import { ComponentProps, ReactNode } from "react";
|
|
4
4
|
//#region src/components/choice/choice.d.ts
|
|
5
5
|
/**
|
|
@@ -39,7 +39,7 @@ type ChoiceRootProps = Omit<ComponentProps<"div">, "id"> & {
|
|
|
39
39
|
/**
|
|
40
40
|
* Root of a `Choice`: the indicator-left / content-right layout for pairing a
|
|
41
41
|
* checkbox or radio with a titled, multi-line label. Owns the control's `id` and the
|
|
42
|
-
* description's `id
|
|
42
|
+
* description's `id`. When rendered inside a `Field.Control`, it reads the
|
|
43
43
|
* field's `id` / `name` / `aria-*` from `FieldControlContext` and merges them
|
|
44
44
|
* into the props `Indicator` injects onto the control (the field's
|
|
45
45
|
* `aria-describedby` is concatenated with this `Choice`'s own description id).
|
|
@@ -64,7 +64,7 @@ type ChoiceRootProps = Omit<ComponentProps<"div">, "id"> & {
|
|
|
64
64
|
declare const Root: ({ "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-invalid": ariaInvalid, children, className, disabled, id, name, ref, ...props }: ChoiceRootProps) => import("react").JSX.Element;
|
|
65
65
|
type ChoiceIndicatorProps = ComponentProps<"span">;
|
|
66
66
|
/**
|
|
67
|
-
* The left control slot of a `Choice
|
|
67
|
+
* The left control slot of a `Choice`: drop the control here (a `Checkbox`, a
|
|
68
68
|
* radio indicator, a `Switch`, …). Its single element child is cloned with the
|
|
69
69
|
* shared `id` / `name` / `aria-*` / `disabled` from `Root`, so a control placed
|
|
70
70
|
* here is wired to `Choice.Label` and the description without the caller
|
|
@@ -157,6 +157,10 @@ declare const ChoiceLabel: ({ className, ref, ...props }: ChoiceLabelProps) => i
|
|
|
157
157
|
* control — or inside a `Field` — where the title can be the label, use
|
|
158
158
|
* `Choice.Label`.
|
|
159
159
|
*
|
|
160
|
+
* Inside a `RadioGroup` item, the title registers its id with the radio, so the
|
|
161
|
+
* option's `aria-labelledby` names it by the title alone. The description stays
|
|
162
|
+
* out of the name. The `id` defaults to a generated one.
|
|
163
|
+
*
|
|
160
164
|
* @see https://mantle.ngrok.com/components/forms/choice
|
|
161
165
|
*
|
|
162
166
|
* @example
|
|
@@ -172,11 +176,12 @@ declare const ChoiceLabel: ({ className, ref, ...props }: ChoiceLabelProps) => i
|
|
|
172
176
|
* </Choice.Root>
|
|
173
177
|
* ```
|
|
174
178
|
*/
|
|
175
|
-
declare const Title: ({ asChild, className, ref, ...props }: ComponentProps<"p"> & WithAsChild) => import("react").JSX.Element;
|
|
179
|
+
declare const Title: ({ asChild, className, id, ref, ...props }: ComponentProps<"p"> & WithAsChild) => import("react").JSX.Element;
|
|
176
180
|
/**
|
|
177
181
|
* The de-emphasized supplementary line of a `Choice`, in the muted body color
|
|
178
182
|
* and wired to the control via `aria-describedby` (never a second label).
|
|
179
|
-
* Renders a `<p>`; pass `asChild` to supply your own element.
|
|
183
|
+
* Renders a `<p>`; pass `asChild` to supply your own element. `Choice.Root`
|
|
184
|
+
* owns its `id`, so `id` is not a prop.
|
|
180
185
|
*
|
|
181
186
|
* A click on the description forwards to the sibling `Choice.Label`, so the
|
|
182
187
|
* whole content column toggles the control while the accessible name stays the
|
|
@@ -187,6 +192,9 @@ declare const Title: ({ asChild, className, ref, ...props }: ComponentProps<"p">
|
|
|
187
192
|
* `Choice.Title`, the description forwards nothing, because an ancestor owns
|
|
188
193
|
* that click.
|
|
189
194
|
*
|
|
195
|
+
* Inside a `RadioGroup` item, the description registers its id with the radio,
|
|
196
|
+
* so the option's `aria-describedby` points here.
|
|
197
|
+
*
|
|
190
198
|
* @see https://mantle.ngrok.com/components/forms/choice
|
|
191
199
|
*
|
|
192
200
|
* @example
|
|
@@ -202,7 +210,7 @@ declare const Title: ({ asChild, className, ref, ...props }: ComponentProps<"p">
|
|
|
202
210
|
* </Choice.Root>
|
|
203
211
|
* ```
|
|
204
212
|
*/
|
|
205
|
-
declare const Description: ({ asChild, className, onClick, ref, ...props }: ComponentProps<"p"> & WithAsChild) => import("react").JSX.Element;
|
|
213
|
+
declare const Description: ({ asChild, className, onClick, ref, ...props }: Omit<ComponentProps<"p">, "id"> & WithAsChild) => import("react").JSX.Element;
|
|
206
214
|
/**
|
|
207
215
|
* A reusable indicator-left / content-right layout for a single choice: a
|
|
208
216
|
* control (checkbox, radio, switch) beside an emphasized title and an optional
|
|
@@ -226,6 +234,11 @@ declare const Description: ({ asChild, className, onClick, ref, ...props }: Comp
|
|
|
226
234
|
* `aria-describedby`. Outside a `Field` it uses its own generated ids — the two
|
|
227
235
|
* are aware of each other but neither is required.
|
|
228
236
|
*
|
|
237
|
+
* **Radio interop.** Inside a `RadioGroup` item, `Choice.Title` and
|
|
238
|
+
* `Choice.Description` register their ids with the radio, so the option's
|
|
239
|
+
* accessible name is the title alone and the description is its
|
|
240
|
+
* `aria-describedby`.
|
|
241
|
+
*
|
|
229
242
|
* @see https://mantle.ngrok.com/components/forms/choice
|
|
230
243
|
*
|
|
231
244
|
* @example
|
|
@@ -253,8 +266,14 @@ declare const Description: ({ asChild, className, onClick, ref, ...props }: Comp
|
|
|
253
266
|
*/
|
|
254
267
|
declare const Choice: {
|
|
255
268
|
/**
|
|
256
|
-
* Root
|
|
257
|
-
*
|
|
269
|
+
* Root of a `Choice`: the indicator-left / content-right layout for pairing a
|
|
270
|
+
* checkbox or radio with a titled, multi-line label. Owns the control's `id` and the
|
|
271
|
+
* description's `id`. When rendered inside a `Field.Control`, it reads the
|
|
272
|
+
* field's `id` / `name` / `aria-*` from `FieldControlContext` and merges them
|
|
273
|
+
* into the props `Indicator` injects onto the control (the field's
|
|
274
|
+
* `aria-describedby` is concatenated with this `Choice`'s own description id).
|
|
275
|
+
* Outside a `Field` it falls back to its own generated ids, so the two compose
|
|
276
|
+
* but neither requires the other.
|
|
258
277
|
*
|
|
259
278
|
* @see https://mantle.ngrok.com/components/forms/choice
|
|
260
279
|
*
|
|
@@ -273,8 +292,11 @@ declare const Choice: {
|
|
|
273
292
|
*/
|
|
274
293
|
readonly Root: typeof Root;
|
|
275
294
|
/**
|
|
276
|
-
*
|
|
277
|
-
*
|
|
295
|
+
* The left control slot of a `Choice`: drop the control here (a `Checkbox`, a
|
|
296
|
+
* radio indicator, a `Switch`, …). Its single element child is cloned with the
|
|
297
|
+
* shared `id` / `name` / `aria-*` / `disabled` from `Root`, so a control placed
|
|
298
|
+
* here is wired to `Choice.Label` and the description without the caller
|
|
299
|
+
* threading ids. A non-element child (or none) is rendered untouched.
|
|
278
300
|
*
|
|
279
301
|
* @see https://mantle.ngrok.com/components/forms/choice
|
|
280
302
|
*
|
|
@@ -333,7 +355,8 @@ declare const Choice: {
|
|
|
333
355
|
readonly Label: typeof ChoiceLabel;
|
|
334
356
|
/**
|
|
335
357
|
* Title: the title as label-less text (`<p>`). Use when an ancestor (a
|
|
336
|
-
* clickable row or a Headless radio item) owns labeling.
|
|
358
|
+
* clickable row or a Headless radio item) owns labeling. Inside a
|
|
359
|
+
* `RadioGroup` item it names the radio through `aria-labelledby`.
|
|
337
360
|
*
|
|
338
361
|
* @see https://mantle.ngrok.com/components/forms/choice
|
|
339
362
|
*
|
|
@@ -353,7 +376,8 @@ declare const Choice: {
|
|
|
353
376
|
readonly Title: typeof Title;
|
|
354
377
|
/**
|
|
355
378
|
* Description: the supplementary line, wired via `aria-describedby`. A click
|
|
356
|
-
* on it forwards to `Choice.Label`.
|
|
379
|
+
* on it forwards to `Choice.Label`. Inside a `RadioGroup` item it describes
|
|
380
|
+
* the radio through `aria-describedby`.
|
|
357
381
|
*
|
|
358
382
|
* @see https://mantle.ngrok.com/components/forms/choice
|
|
359
383
|
*
|
package/dist/choice.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as ChoiceRootProps, t as Choice } from "./choice-
|
|
1
|
+
import { n as ChoiceRootProps, t as Choice } from "./choice-PESu-9s8.js";
|
|
2
2
|
export { Choice, type ChoiceRootProps };
|
package/dist/choice.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./choice-
|
|
1
|
+
import{t as e}from"./choice-CT_AdesL.js";export{e as Choice};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import{t as e}from"./cx-
|
|
1
|
+
import{t as e}from"./cx-0HCjnNv1.js";import{t}from"./booleanish-BfvnW6vy.js";const n=new Set([`bash`,`sh`,`shell`]);function r(e,t){return!(n.has(e)&&!t.trim().includes(`
|
|
2
2
|
`))}const i=Symbol(`MantleCodeBlockValue`);function a({preHtml:e,preValToken:t,preVals:n,highlightLines:r,lineNumberStart:a,showLineNumbers:o,code:s,language:c}){return{[i]:!0,language:c,code:s,"~preHtml":e,"~preValToken":t,"~preVals":n,"~highlightLines":r,"~lineNumberStart":a,"~showLineNumbers":o}}function o(e,t){let n=``;for(let r=0;r<e.length;r+=1)n+=e[r]??``,r<t.length&&(n+=String(t[r]));return n}function s(e,t={}){let{showLineNumbers:n,highlightLines:i,lineNumberStart:s}=t;return(t,...c)=>{let l=o(t,c);return a({language:e,code:l,preHtml:void 0,preVals:c.length>0?c:void 0,highlightLines:i,lineNumberStart:s,showLineNumbers:n??r(e,l)})}}function c(e){if(e.length<=1)return e;e.sort((e,t)=>e.startLine===t.startLine?t.endLine-e.endLine:e.startLine-t.startLine);let t=[],n=-1;for(let r of e)r.startLine!==n&&(t.push(r),n=r.startLine);return t}function l(e){let t=e.length;if(t===0)return[];let n=[],r=[],i=1,a=0;for(;a<t;){let o=e.charCodeAt(a);if(o===10){i+=1,a+=1;continue}if(o===13){i+=1,a+=1,a<t&&e.charCodeAt(a)===10&&(a+=1);continue}if(o===34){for(a+=1;a<t;){let t=e.charCodeAt(a);if(t===92){a+=2;continue}if(t===34){a+=1;break}if(t===10||t===13)break;a+=1}continue}if(o===123||o===91){n.push({opener:o,line:i}),a+=1;continue}if(o===125||o===93){let e=o===125?123:91,t=n[n.length-1];t?.opener===e?(n.pop(),t.line!==i&&r.push({id:String(t.line),startLine:t.line,endLine:i})):t!=null&&(n.length=0),a+=1;continue}a+=1}return c(r)}function u(...e){let t=new Set;for(let n of e)if(typeof n==`number`){if(!d(n))continue;let e=Math.floor(n);t.add(e)}else{let e=n.indexOf(`-`),r=n.slice(0,e),i=n.slice(e+1),a=Number.parseInt(r,10),o=Number.parseInt(i,10);if(!d(a)||!d(o)||(a>o&&([a,o]=[o,a]),o-a+1>1e3))continue;for(let e=a;e<=o;e++)t.add(e)}return t}const d=e=>e!=null&&!Number.isNaN(e)&&e>0&&Number.isFinite(e);function f(e){let t=e.length;for(;t>0&&(e.charCodeAt(t-1)===10||e.charCodeAt(t-1)===13);)--t;return t===e.length?e:e.slice(0,t)}function p(e){let t=f(e).replaceAll(`\r
|
|
3
3
|
`,`
|
|
4
4
|
`).replaceAll(`\r`,`
|
|
5
5
|
`).split(`
|
|
6
|
-
`);for(let e=0;e<t.length;e++){let n=t[e]??``;n.startsWith(`<span class="line">`)&&n.endsWith(`</span>`)&&(t[e]=n.slice(19,n.length-7))}return t}function m(e){return encodeURIComponent(e)}function h({foldableRanges:t,highlightLines:n,html:r,lineNumberStart:i=1,showLineNumbers:a=!1}){let o=u(...n??[]),s=p(r),c=new Map,l=new Map,d=t!=null&&t.length>0;if(d&&t!=null)for(let e of t){let t=m(e.id);c.set(e.startLine,t);for(let n=e.startLine+1;n<e.endLine;n+=1){let e=l.get(n);e??(e=[],l.set(n,e)),e.push(t)}}let f=``;for(let t=0;t<s.length;t++){let n=s[t]??``,r=t+1,u=i+t,p=d?c.get(r):void 0,m=e(`mantle-code-line`,o.has(u)&&`mantle-code-line-highlighted`,p!=null&&`mantle-code-line-opener`),h=a?`<span class="mantle-code-line-number" data-slot="line-number">${u}</span>`:``,g=``,_=``,v=``;if(d){p!=null&&(g=`<button type="button" class="mantle-code-fold-toggle" data-slot="fold-toggle" data-fold-line="${p}" aria-expanded="true" aria-label="Toggle code folding"><svg class="mantle-code-fold-caret" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M3.22 5.97a.75.75 0 0 1 1.06 0L8 9.69l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L3.22 7.03a.75.75 0 0 1 0-1.06Z"/></svg></button>`,v=`<span class="mantle-code-fold-ellipsis" data-slot="fold-ellipsis" aria-hidden="true">⋯</span>`);let e=l.get(r);e!=null&&e.length>0&&(_=` data-fold-regions="${e.join(` `)}"`)}let y=`<span class="mantle-code-line-content" data-slot="line-content">${n===``?` `:n}${v}</span>`;f+=`<span class="${m}" data-line-number="${u}"${_}>${h}${g}${y}</span>`}return f}function g(e){switch(e){case`python`:case`py`:case`yaml`:case`yml`:return`indentation`;case`html`:case`xml`:return`tag`;case`bash`:case`sh`:case`shell`:case`plain`:case`plaintext`:case`text`:case`txt`:return`none`;default:return`bracket`}}function _({language:e,tokens:t}){switch(g(e)){case`bracket`:return S(t);case`indentation`:return w(t);case`tag`:return ee(t);case`none`:return[]}}function v(e){if(e.length===0)return!1;let t=e[e.length-1]?.scopeName??``;return t===`string`||t===`comment`||t.startsWith(`string.`)||t.startsWith(`comment.`)||t.startsWith(`constant.character.escape`)}function y(e){return e.explanation!=null&&e.explanation.length>0?e.explanation:[{content:e.content,scopes:[]}]}function b(e){let t=``;for(let n of e){let e=y(n),r=!1;for(let t of e)if(v(t.scopes)){r=!0;break}if(!r){t+=n.content;continue}for(let n of e)v(n.scopes)||(t+=n.content)}return t}function x(e){if(e==null||e.length===0)return-1;let t=0;for(let n of e){let e=n.content;for(let n=0;n<e.length;n+=1){let r=e.charCodeAt(n);if(r===32||r===9){t+=1;continue}return t}}return-1}function S(e){let t=[],n=[];for(let r=0;r<e.length;r+=1){let i=e[r];if(i==null)continue;let a=r+1;for(let e of i)if(C(e.content))for(let r of y(e)){if(v(r.scopes))continue;let e=r.content;for(let r=0;r<e.length;r+=1){let i=e.charCodeAt(r);if(i===123||i===91)t.push(a);else if(i===125||i===93){let e=t.pop();e!=null&&e!==a&&n.push({id:String(e),startLine:e,endLine:a})}}}}return c(n)}function C(e){for(let t=0;t<e.length;t+=1){let n=e.charCodeAt(t);if(n===123||n===125||n===91||n===93)return!0}return!1}function w(e){let t=Array.from({length:e.length});for(let n=0;n<e.length;n+=1)t[n]=x(e[n]);let n=[];for(let e=0;e<t.length;e+=1){let r=t[e]??-1;if(r<0)continue;let i=-1,a=e+1;for(;a<t.length;){let e=t[a]??-1;if(e<0){a+=1;continue}if(e>r){i=a,a+=1;continue}break}i>e&&n.push({id:String(e+1),startLine:e+1,endLine:i+2})}return c(n)}function ee(e){let t=[],n=[];for(let r=0;r<e.length;r+=1){let i=e[r];if(i==null)continue;let a=r+1,o=E(b(i));for(let e of o)if(e.kind===`open`)t.push({name:e.name,line:a});else{let r=t.length>0?t[t.length-1]:void 0;r!=null&&r.name.toLowerCase()===e.name.toLowerCase()&&(t.pop(),r.line!==a&&n.push({id:String(r.line),startLine:r.line,endLine:a}))}}return c(n)}const T=new Set([`area`,`base`,`br`,`col`,`embed`,`hr`,`img`,`input`,`link`,`meta`,`param`,`source`,`track`,`wbr`]);function E(e){let t=[],n=0;for(;n<e.length;){let r=e.indexOf(`<`,n);if(r===-1)break;let i=O(e,r+1),a=e.charCodeAt(i)===47;if(a&&(i=O(e,i+1)),!k(e.charCodeAt(i))){n=r+1;continue}let o=i;for(i+=1;i<e.length&&A(e.charCodeAt(i));)i+=1;let s=e.slice(o,i),c=j(e,i);if(c===-1){n=r+1;continue}if(a){t.push({name:s,kind:`close`}),n=c+1;continue}if(te(e,c)||T.has(s.toLowerCase())){n=c+1;continue}t.push({name:s,kind:`open`}),n=c+1}return t}function D(e){return e===9||e===10||e===11||e===12||e===13||e===32}function O(e,t){let n=t;for(;n<e.length&&D(e.charCodeAt(n));)n+=1;return n}function k(e){return e>=65&&e<=90||e>=97&&e<=122}function A(e){return k(e)||e>=48&&e<=57||e===45||e===58||e===95}function j(e,t){let n;for(let r=t;r<e.length;r+=1){let t=e.charCodeAt(r);if(n!=null){t===n&&(n=void 0);continue}if(t===34||t===39){n=t;continue}if(t===62)return r}return-1}function te(e,t){let n=t-1;for(;n>=0&&D(e.charCodeAt(n));)--n;return n>=0&&e.charCodeAt(n)===47}const ne=[`tabs`,`spaces`];function M(e){return ne.includes(e)}function re(e,t){return t||(F(e)?`tabs`:(I(e),`spaces`))}const N=new Set([`csharp`,`css`,`go`,`html`,`java`,`javascript`,`js`,`jsx`,`ts`,`tsx`,`typescript`,`xml`]),P=new Set([`python`,`py`,`yaml`,`yml`,`ruby`,`rb`,`terraform`,`tf`]);function F(e){return N.has(e)}function I(e){return P.has(e)}function L(e,t){let n=t?.indentation??`spaces`,r=e.replace(/\r\n?/g,`
|
|
6
|
+
`);for(let e=0;e<t.length;e++){let n=t[e]??``;n.startsWith(`<span class="line">`)&&n.endsWith(`</span>`)&&(t[e]=n.slice(19,n.length-7))}return t}function m(e){return encodeURIComponent(e)}function h({foldableRanges:t,highlightLines:n,html:r,lineNumberStart:i=1,showLineNumbers:a=!1}){let o=u(...n??[]),s=p(r),c=new Map,l=new Map,d=t!=null&&t.length>0;if(d&&t!=null)for(let e of t){let t=m(e.id);c.set(e.startLine,t);for(let n=e.startLine+1;n<e.endLine;n+=1){let e=l.get(n);e??(e=[],l.set(n,e)),e.push(t)}}let f=``;for(let t=0;t<s.length;t++){let n=s[t]??``,r=t+1,u=i+t,p=d?c.get(r):void 0,m=e(`mantle-code-line`,o.has(u)&&`mantle-code-line-highlighted`,p!=null&&`mantle-code-line-opener`),h=a?`<span class="mantle-code-line-number" data-slot="line-number" aria-hidden="true">${u}</span>`:``,g=``,_=``,v=``;if(d){p!=null&&(g=`<button type="button" class="mantle-code-fold-toggle" data-slot="fold-toggle" data-fold-line="${p}" aria-expanded="true" aria-label="Toggle code folding"><svg class="mantle-code-fold-caret" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M3.22 5.97a.75.75 0 0 1 1.06 0L8 9.69l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L3.22 7.03a.75.75 0 0 1 0-1.06Z"/></svg></button>`,v=`<span class="mantle-code-fold-ellipsis" data-slot="fold-ellipsis" aria-hidden="true">⋯</span>`);let e=l.get(r);e!=null&&e.length>0&&(_=` data-fold-regions="${e.join(` `)}"`)}let y=`<span class="mantle-code-line-content" data-slot="line-content">${n===``?` `:n}${v}</span>`;f+=`<span class="${m}" data-line-number="${u}"${_}>${h}${g}${y}</span>`}return f}function g(e){switch(e){case`python`:case`py`:case`yaml`:case`yml`:return`indentation`;case`html`:case`xml`:return`tag`;case`bash`:case`sh`:case`shell`:case`plain`:case`plaintext`:case`text`:case`txt`:return`none`;default:return`bracket`}}function _({language:e,tokens:t}){switch(g(e)){case`bracket`:return S(t);case`indentation`:return w(t);case`tag`:return ee(t);case`none`:return[]}}function v(e){if(e.length===0)return!1;let t=e[e.length-1]?.scopeName??``;return t===`string`||t===`comment`||t.startsWith(`string.`)||t.startsWith(`comment.`)||t.startsWith(`constant.character.escape`)}function y(e){return e.explanation!=null&&e.explanation.length>0?e.explanation:[{content:e.content,scopes:[]}]}function b(e){let t=``;for(let n of e){let e=y(n),r=!1;for(let t of e)if(v(t.scopes)){r=!0;break}if(!r){t+=n.content;continue}for(let n of e)v(n.scopes)||(t+=n.content)}return t}function x(e){if(e==null||e.length===0)return-1;let t=0;for(let n of e){let e=n.content;for(let n=0;n<e.length;n+=1){let r=e.charCodeAt(n);if(r===32||r===9){t+=1;continue}return t}}return-1}function S(e){let t=[],n=[];for(let r=0;r<e.length;r+=1){let i=e[r];if(i==null)continue;let a=r+1;for(let e of i)if(C(e.content))for(let r of y(e)){if(v(r.scopes))continue;let e=r.content;for(let r=0;r<e.length;r+=1){let i=e.charCodeAt(r);if(i===123||i===91)t.push(a);else if(i===125||i===93){let e=t.pop();e!=null&&e!==a&&n.push({id:String(e),startLine:e,endLine:a})}}}}return c(n)}function C(e){for(let t=0;t<e.length;t+=1){let n=e.charCodeAt(t);if(n===123||n===125||n===91||n===93)return!0}return!1}function w(e){let t=Array.from({length:e.length});for(let n=0;n<e.length;n+=1)t[n]=x(e[n]);let n=[];for(let e=0;e<t.length;e+=1){let r=t[e]??-1;if(r<0)continue;let i=-1,a=e+1;for(;a<t.length;){let e=t[a]??-1;if(e<0){a+=1;continue}if(e>r){i=a,a+=1;continue}break}i>e&&n.push({id:String(e+1),startLine:e+1,endLine:i+2})}return c(n)}function ee(e){let t=[],n=[];for(let r=0;r<e.length;r+=1){let i=e[r];if(i==null)continue;let a=r+1,o=E(b(i));for(let e of o)if(e.kind===`open`)t.push({name:e.name,line:a});else{let r=t.length>0?t[t.length-1]:void 0;r!=null&&r.name.toLowerCase()===e.name.toLowerCase()&&(t.pop(),r.line!==a&&n.push({id:String(r.line),startLine:r.line,endLine:a}))}}return c(n)}const T=new Set([`area`,`base`,`br`,`col`,`embed`,`hr`,`img`,`input`,`link`,`meta`,`param`,`source`,`track`,`wbr`]);function E(e){let t=[],n=0;for(;n<e.length;){let r=e.indexOf(`<`,n);if(r===-1)break;let i=O(e,r+1),a=e.charCodeAt(i)===47;if(a&&(i=O(e,i+1)),!k(e.charCodeAt(i))){n=r+1;continue}let o=i;for(i+=1;i<e.length&&A(e.charCodeAt(i));)i+=1;let s=e.slice(o,i),c=j(e,i);if(c===-1){n=r+1;continue}if(a){t.push({name:s,kind:`close`}),n=c+1;continue}if(te(e,c)||T.has(s.toLowerCase())){n=c+1;continue}t.push({name:s,kind:`open`}),n=c+1}return t}function D(e){return e===9||e===10||e===11||e===12||e===13||e===32}function O(e,t){let n=t;for(;n<e.length&&D(e.charCodeAt(n));)n+=1;return n}function k(e){return e>=65&&e<=90||e>=97&&e<=122}function A(e){return k(e)||e>=48&&e<=57||e===45||e===58||e===95}function j(e,t){let n;for(let r=t;r<e.length;r+=1){let t=e.charCodeAt(r);if(n!=null){t===n&&(n=void 0);continue}if(t===34||t===39){n=t;continue}if(t===62)return r}return-1}function te(e,t){let n=t-1;for(;n>=0&&D(e.charCodeAt(n));)--n;return n>=0&&e.charCodeAt(n)===47}const ne=[`tabs`,`spaces`];function M(e){return ne.includes(e)}function re(e,t){return t||(F(e)?`tabs`:(I(e),`spaces`))}const N=new Set([`csharp`,`css`,`go`,`html`,`java`,`javascript`,`js`,`jsx`,`ts`,`tsx`,`typescript`,`xml`]),P=new Set([`python`,`py`,`yaml`,`yml`,`ruby`,`rb`,`terraform`,`tf`]);function F(e){return N.has(e)}function I(e){return P.has(e)}function L(e,t){let n=t?.indentation??`spaces`,r=e.replace(/\r\n?/g,`
|
|
7
7
|
`),i=r.trim();if(i===``)return``;let a=B(r),o=i.split(`
|
|
8
8
|
`),s=Array.from({length:o.length});for(let e=0;e<o.length;e++){let t=o[e];if(t==null)continue;let r=z(t)?t:t.slice(a);s[e]=R(r,n)}return s.join(`
|
|
9
9
|
`)}function R(e,t){let n=0;for(;n<e.length;){let t=e[n];if(t!==` `&&t!==` `)break;n+=1}if(n===0||n===e.length)return e;let r=e.slice(0,n);return(t===`spaces`?r.replace(/\t/g,` `):r.replace(/ {2}/g,` `))+e.slice(n)}function z(e){let t=e[0];return t!=null&&t!==` `&&t!==` `}function B(e){let t=1/0,n=0,r=!0;for(let i=0;i<e.length;i++){let a=e[i];if(r){if(a===` `||a===` `){n+=1;continue}if(a===`
|
package/dist/code-block.d.ts
CHANGED
|
@@ -87,6 +87,26 @@ type CodeBlockCodeProps = Omit<ComponentProps<"pre">, "children" | "translate">
|
|
|
87
87
|
* reader copies it anyway. The `translate` prop is omitted from the type, so no
|
|
88
88
|
* call site can turn the guard off.
|
|
89
89
|
*
|
|
90
|
+
* Line numbers render `aria-hidden`, so a screen reader hears the code, not
|
|
91
|
+
* "1 const x".
|
|
92
|
+
*
|
|
93
|
+
* | Data Attribute | Value | Description |
|
|
94
|
+
* | --- | --- | --- |
|
|
95
|
+
* | `data-state` | `"collapsed"` \| `"expanded"` | Present when a `CodeBlock.ExpanderButton` is composed. Drives the collapsed max height. |
|
|
96
|
+
* | `data-highlighted` | `"true"` \| `"false"` | Whether the value carried pre-rendered Shiki HTML. |
|
|
97
|
+
* | `data-lang` | the language id | The value's language. |
|
|
98
|
+
* | `data-mantle-line-numbers` | `"true"` \| `"false"` | Whether the gutter shows line numbers. |
|
|
99
|
+
* | `data-mantle-line-number-start` | a number as a string | The first line number. |
|
|
100
|
+
* | `data-mantle-highlight-lines` | comma-separated line numbers | Present when lines are highlighted. |
|
|
101
|
+
*
|
|
102
|
+
* Inside the highlighted HTML, `data-slot="line-number"`, `"fold-toggle"`, and
|
|
103
|
+
* `"fold-ellipsis"` mark the gutter number, the fold button, and the folded
|
|
104
|
+
* marker.
|
|
105
|
+
*
|
|
106
|
+
* | CSS Variable | Default | Description |
|
|
107
|
+
* | --- | --- | --- |
|
|
108
|
+
* | `--mantle-line-number-start` | `1` | The CSS counter start for the line-number gutter. |
|
|
109
|
+
*
|
|
90
110
|
* @see https://mantle.ngrok.com/components/data-display/code-block#codeblockcode
|
|
91
111
|
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/translate
|
|
92
112
|
*
|
|
@@ -204,11 +224,15 @@ type CodeBlockCopyButtonProps = Omit<ComponentProps<"button">, "aria-label" | "c
|
|
|
204
224
|
* ```
|
|
205
225
|
*/
|
|
206
226
|
declare const CopyButton: ({ className, label, onCopy, onCopyError, onClick, ref, ...props }: CodeBlockCopyButtonProps) => import("react").JSX.Element;
|
|
207
|
-
type CodeBlockExpanderButtonProps = Omit<ComponentProps<"button">, "children" | "aria-controls" | "aria-expanded"
|
|
227
|
+
type CodeBlockExpanderButtonProps = Omit<ComponentProps<"button">, "children" | "aria-controls" | "aria-expanded">;
|
|
208
228
|
/**
|
|
209
229
|
* The (optional) expander button of the `CodeBlock`. Toggles the expanded
|
|
210
230
|
* state of the code block. When present, the code block is collapsible.
|
|
211
231
|
*
|
|
232
|
+
* It carries `aria-expanded` and `aria-controls` that points at the `<pre>`.
|
|
233
|
+
* It does not take `asChild`: it renders its own label and caret, so there is
|
|
234
|
+
* no single child to clone. Style it with `className`.
|
|
235
|
+
*
|
|
212
236
|
* @see https://mantle.ngrok.com/components/data-display/code-block#codeblockexpanderbutton
|
|
213
237
|
*
|
|
214
238
|
* @example
|
|
@@ -226,7 +250,7 @@ type CodeBlockExpanderButtonProps = Omit<ComponentProps<"button">, "children" |
|
|
|
226
250
|
* </CodeBlock.Root>
|
|
227
251
|
* ```
|
|
228
252
|
*/
|
|
229
|
-
declare const ExpanderButton: ({
|
|
253
|
+
declare const ExpanderButton: ({ className, onClick, ref, ...props }: CodeBlockExpanderButtonProps) => import("react").JSX.Element;
|
|
230
254
|
type CodeBlockIconProps = Omit<SvgAttributes, "children"> & ({
|
|
231
255
|
/**
|
|
232
256
|
* A custom icon SVG to display in the code block header.
|
package/dist/code-block.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{t as e}from"./compose-refs-
|
|
2
|
-
`||e===`\r`||e===`{`||e===`}`||e===`[`||e===`]`||e===`:`||e===`,`||e===`"`}function
|
|
3
|
-
`||t===`\r`){s+=1;continue}break}let c=e[s]===`:`?`var(--shiki-token-keyword)`:`var(--shiki-token-string-expression)`;for(let e of i)n(e.text,e.isEscape?`var(--shiki-token-escape, var(--shiki-token-constant))`:c);return o}function
|
|
1
|
+
import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-DdUwopIY.js";import{t as n}from"./cx-0HCjnNv1.js";import{t as r}from"./icon-CGKaq_tV.js";import{t as i}from"./slot-C3gII_9c.js";import{t as a}from"./button-CaM-ZAH5.js";import{t as o}from"./use-copy-to-clipboard-CSyp4Zk0.js";import{t as s}from"./alternate-announcement-BkH4bOKp.js";import{t as c}from"./live-region-CV7kykeo.js";import{t as l}from"./icons-CF1lbWtp.js";import{S as u,_ as d,a as f,b as p,c as m,d as h,f as g,g as _,h as v,i as y,l as b,m as x,n as S,o as C,p as w,r as T,s as E,t as D,u as O,v as k,y as A}from"./code-block-BE3Q0iAo.js";import{CaretDownIcon as ee}from"@phosphor-icons/react/CaretDown";import{createContext as j,useCallback as M,useContext as N,useEffect as P,useId as F,useLayoutEffect as te,useMemo as I,useRef as L,useState as R}from"react";import z from"tiny-invariant";import{jsx as B,jsxs as V}from"react/jsx-runtime";import{CheckIcon as ne}from"@phosphor-icons/react/Check";import{CopyIcon as re}from"@phosphor-icons/react/Copy";import{FileTextIcon as ie}from"@phosphor-icons/react/FileText";import{TerminalIcon as ae}from"@phosphor-icons/react/Terminal";import{Content as oe,List as se,Root as H,Trigger as U}from"@radix-ui/react-tabs";function W(e){let t=-1;for(let n=0;n<e.length;n++){let r=e[n];if(r===`&`||r===`<`||r===`>`||r===`"`||r===`'`){t=n;break}}if(t===-1)return e;let n=e.slice(0,t);for(let r=t;r<e.length;r++){let t=e[r];switch(t){case`&`:n+=`&`;break;case`<`:n+=`<`;break;case`>`:n+=`>`;break;case`"`:n+=`"`;break;case`'`:n+=`'`;break;default:n+=t}}return n}const G=new WeakMap;function K(e){let t=new Set;if(e==null||e===``)return t;for(let n of e.split(` `))n!==``&&t.add(n);return t}function ce(e){let t=G.get(e);if(t!=null&&de(t))return t;let n=new Map,r=new WeakMap,i=e.querySelectorAll(`[data-fold-regions]`);for(let e=0;e<i.length;e+=1){let t=i[e];if(!(t instanceof HTMLElement))continue;let a=K(t.dataset.foldRegions);if(a.size!==0){r.set(t,a);for(let e of a){let r=n.get(e);r??(r=[],n.set(e,r)),r.push(t)}}}let a={regionToLines:n,lineToRegions:r};return G.set(e,a),a}function le(e){G.delete(e)}function ue(e){le(e),e.removeAttribute(`data-folded-regions`)}function de(e){for(let t of e.regionToLines.values()){if(t.length===0)continue;let e=t[0];if(e!=null)return e.isConnected}return!0}function fe(e,t,n){let r=!1;for(let e of n)if(t.has(e)){r=!0;break}r?e.dataset.foldHidden=`true`:delete e.dataset.foldHidden}function pe(e){let t=e.dataset.foldLine;if(t==null||t===``)return!1;let n=e.closest(`[data-slot='code-block-code']`)?.querySelector(`code`);if(n==null)return!1;let r=K(n.getAttribute(`data-folded-regions`)),i=!r.has(t);i?r.add(t):r.delete(t),r.size===0?n.removeAttribute(`data-folded-regions`):n.setAttribute(`data-folded-regions`,[...r].join(` `)),e.setAttribute(`aria-expanded`,i?`false`:`true`);let{regionToLines:a,lineToRegions:o}=ce(n),s=a.get(t);if(s!=null)for(let e of s){let t=o.get(e);t!=null&&fe(e,r,t)}return!0}function me(e){let t=e=>{let t=e.target;if(!(t instanceof Element))return;let n=t.closest(`.mantle-code-fold-toggle`);n instanceof HTMLButtonElement&&pe(n)};return e.addEventListener(`click`,t),()=>{e.removeEventListener(`click`,t)}}const q=j(null);function J(){let e=N(q);return z(e!=null,`CodeBlock subcomponents must be rendered within a <CodeBlock.Root>.`),e}const he=({asChild:e=!1,className:t,defaultTab:r,activeTab:a,onActiveTabChange:o,ref:s,...c})=>{let l=L(``),u=F(),d=L(0),[f,p]=R(!1),[m,h]=R(!1),g=M(()=>{z(d.current===0,`You can only render a single CodeBlock.Code within a CodeBlock.`),d.current+=1},[]),_=M(()=>{--d.current},[]),v=I(()=>({codeId:u,copyTextRef:l,hasCodeExpander:f,isCodeExpanded:m,registerCode:g,setHasCodeExpander:p,setIsCodeExpanded:h,unregisterCode:_}),[u,f,m,g,_]),y=r!=null||a!=null,b=B(e?i:`div`,{"data-slot":`code-block`,className:n(`text-mono w-full overflow-hidden rounded-md border border-gray-300 bg-base font-mono`,`[&_svg]:shrink-0`,t),ref:s,...c});return B(q.Provider,{value:v,children:y?B(H,{asChild:!0,defaultValue:r,value:a,onValueChange:o,children:b}):b})},ge=({asChild:e=!1,className:t,ref:r,...a})=>B(e?i:`div`,{"data-slot":`code-block-body`,className:n(`relative`,`[&_.mantle-code-line]:pr-4`,`[&:has([data-slot=code-block-copy-button])_.mantle-code-line:nth-child(-n+2)]:pr-14`,t),ref:r,...a}),_e=/SHIKI_VAL_(\d+)/g;function ve(e){return e.replace(/[.*+?^${}()|[\]\\]/g,`\\$&`)}const Y=new Map;function ye(e){if(e==null||e.length===0)return _e;let t=Y.get(e);return t??(Y.size>=500&&Y.clear(),t=RegExp(`${ve(e)}(\\d+)__`,`g`),Y.set(e,t)),t}function X(e,t,n,r){if(n==null){if(!e.includes(`SHIKI_VAL_`))return e}else if(!e.includes(n))return e;return e.replaceAll(ye(n),(e,n)=>{let i=Number.parseInt(n,10);return Number.isNaN(i)||i<0||i>=t.length?e:r(t[i])})}function be(e,t,n){return X(e,t,n,e=>W(String(e)))}function xe(e,t,n){return X(e,t,n,e=>String(e))}const Se=({className:e,style:r,value:i,ref:a,...o})=>{let s=L(null),c=t(s,a),{codeId:l,copyTextRef:u,hasCodeExpander:d,isCodeExpanded:f,registerCode:p,unregisterCode:m}=J(),{language:h,code:g,"~preValToken":_,"~preVals":v,"~highlightLines":y,"~lineNumberStart":b,"~preHtml":x,"~showLineNumbers":S}=i,C=y,w=b??1,T=S??!1,E=I(()=>v!=null&&v.length>0?xe(g,v,_):g,[_,v,g]);te(()=>{u.current=E},[u,E]),P(()=>(p(),()=>{m()}),[p,m]);let D=I(()=>{if(x!=null)return v!=null&&v.length>0?be(x,v,_):x},[x,_,v]);P(()=>{let e=s.current;if(e==null)return;let t=e.querySelector(`code`);return t!=null&&ue(t),me(e)},[D]);let O=D!=null,k=D??W(E),A=I(()=>({__html:k}),[k]);return B(`pre`,{"data-slot":`code-block-code`,"data-state":d?f?`expanded`:`collapsed`:void 0,className:n(`scrollbar overflow-x-auto overscroll-x-none overflow-y-hidden py-4`,!O&&`pr-14`,`data-[mantle-line-numbers~='false']:pl-4`,`text-mono m-0 font-mono outline-hidden`,`data-[state=collapsed]:max-h-[13.6rem]`,e),"data-highlighted":O?`true`:`false`,"data-lang":h,"data-mantle-highlight-lines":O&&C!=null&&C.length>0?C.join(`,`):void 0,"data-mantle-line-number-start":O&&T?String(w):`1`,"data-mantle-line-numbers":O&&T?`true`:`false`,id:l,ref:c,style:{...r,"--mantle-line-number-start":String(w),tabSize:2,MozTabSize:2},...o,translate:`no`,children:B(`code`,{className:`text-size-inherit block min-w-full w-max`,dangerouslySetInnerHTML:A})})},Ce=({asChild:e=!1,className:t,ref:r,...a})=>B(e?i:`div`,{"data-slot":`code-block-header`,className:n(`flex items-center gap-1 border-b border-gray-300 bg-base px-4 py-2 text-gray-700`,t),ref:r,...a}),we=({asChild:e=!1,className:t,ref:r,...a})=>B(e?i:`h3`,{"data-slot":`code-block-title`,ref:r,className:n(`m-0 font-sans text-xs font-medium`,t),translate:`no`,...a}),Te=({className:e,label:t=`Copy code`,onCopy:r,onCopyError:i,onClick:l,ref:u,...d})=>{let{copyTextRef:f}=J(),p=o(),[m,h]=R(``),g=m!==``,_=L(!1),v=L(void 0);return P(()=>()=>{v.current!=null&&clearTimeout(v.current)},[]),V(`span`,{"data-slot":`code-block-copy-button`,className:`absolute right-3 top-3 z-10 inline-flex size-7 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] bg-base`,children:[B(c,{children:m}),B(a,{type:`button`,appearance:`ghost`,intent:`neutral`,size:`sm`,label:t,icon:B(g?ne:re,{}),className:n(`bg-base not-disabled:hover:bg-neutral-500/15`,e),ref:u,onClick:async e=>{try{if(l?.(e),e.defaultPrevented){v.current!=null&&clearTimeout(v.current);return}let t=f.current;await p(t),r?.(t),h(s(`Copied`,_)),v.current!=null&&clearTimeout(v.current),v.current=setTimeout(()=>{h(``)},2e3)}catch(e){i?.(e)}},...d})]})},Ee=({className:t,onClick:i,ref:a,...o})=>{let{codeId:s,isCodeExpanded:c,setIsCodeExpanded:l,setHasCodeExpander:u}=J();return e(()=>(u(!0),()=>{u(!1)}),[u]),V(`button`,{...o,"data-slot":`code-block-expander-button`,"aria-controls":s,"aria-expanded":c,className:n(`flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-base px-4 py-2 font-sans text-gray-700 hover:bg-base-hover`,t),ref:a,type:`button`,onClick:e=>{l(e=>!e),i?.(e)},children:[c?`Show less`:`Show more`,` `,B(r,{svg:B(ee,{weight:`bold`}),className:n(`size-4`,c&&`rotate-180`,`transition-all duration-150`)})]})};function De({className:e,preset:t,svg:i,...a}){let o=i;if(t!=null)switch(t){case`file`:o=B(ie,{weight:`fill`});break;case`cli`:o=B(ae,{weight:`fill`});break;case`traffic-policy`:o=B(l,{})}return B(r,{"data-slot":`code-block-icon`,className:n(`size-5`,e),svg:o,...a})}const Oe={Root:he,Body:ge,Code:Se,CopyButton:Te,ExpanderButton:Ee,Header:Ce,Icon:De,TabContent:e=>B(oe,{"data-slot":`code-block-tab-content`,...e}),TabList:({className:e,ref:t,...r})=>B(se,{"data-slot":`code-block-tab-list`,className:n(`scroll-fade-x flex min-w-0 items-center gap-1 overflow-x-auto overscroll-x-none`,`-m-1 p-1`,e),ref:t,...r}),TabTrigger:({className:e,ref:t,...r})=>B(U,{"data-slot":`code-block-tab-trigger`,className:n(`shrink-0 cursor-pointer rounded px-1.5 py-0.5 font-sans text-xs font-medium whitespace-nowrap`,`text-gray-600 outline-hidden`,`hover:text-gray-900`,`data-[state=active]:bg-neutral-500/15 data-[state=active]:text-strong`,`focus-visible:ring-focus-accent focus-visible:ring-4`,e),ref:t,...r}),Title:we},Z=`var(--shiki-foreground)`;function Q(e){return e.replace(/[&<]/g,e=>e===`&`?`&`:`<`)}function ke(e){return e===` `||e===` `||e===`
|
|
2
|
+
`||e===`\r`||e===`{`||e===`}`||e===`[`||e===`]`||e===`:`||e===`,`||e===`"`}function Ae(e,t,n){let r=e.length,i=[],a=`"`,o=t+1;for(;o<r;){let t=e[o];if(t===`\\`){let t=e[o+1]===`u`&&/^[0-9a-fA-F]{4}$/.test(e.slice(o+2,o+6))?6:2;a!==``&&(i.push({text:a,isEscape:!1}),a=``),i.push({text:e.slice(o,o+t),isEscape:!0}),o+=t;continue}if(t===`"`){a+=`"`,o+=1;break}a+=t,o+=1}a!==``&&i.push({text:a,isEscape:!1});let s=o;for(;s<r;){let t=e[s];if(t===` `||t===` `||t===`
|
|
3
|
+
`||t===`\r`){s+=1;continue}break}let c=e[s]===`:`?`var(--shiki-token-keyword)`:`var(--shiki-token-string-expression)`;for(let e of i)n(e.text,e.isEscape?`var(--shiki-token-escape, var(--shiki-token-constant))`:c);return o}function je(e){for(let t=0;t<e.length;t+=1){let n=e[t];if(n!=null&&n.color==null){let r=Z;for(let n=t+1;n<e.length;n+=1){let t=e[n];if(t!=null&&t.color!=null){r=t.color;break}}n.color=r}}let t=``,n=``,r=null,i=()=>{r!=null&&(t+=`<span style="color:${r}">${Q(n)}</span>`),n=``,r=null};for(let t of e)t!=null&&(t.color===r?n+=t.text:(i(),n=t.text,r=t.color));return i(),`<span class="line">${t}</span>`}function $(e){let t=[[]],n=t[0]??[],r=e.length,i=0,a=(e,t)=>{n.push({text:e,color:t})};for(;i<r;){let o=e[i];if(o===`
|
|
4
4
|
`||o===`\r`){o===`\r`&&e[i+1]===`
|
|
5
|
-
`&&(i+=1);let r=[];t.push(r),n=r,i+=1;continue}if(o===` `||o===` `){let t=i+1;for(;t<r;){let n=e[t];if(n!==` `&&n!==` `)break;t+=1}a(e.slice(i,t),null),i=t;continue}if(o===`{`||o===`}`||o===`[`||o===`]`){a(o,
|
|
6
|
-
`)}function
|
|
7
|
-
`&&(n+=1,n>t))return!0;return!1}export{
|
|
5
|
+
`&&(i+=1);let r=[];t.push(r),n=r,i+=1;continue}if(o===` `||o===` `){let t=i+1;for(;t<r;){let n=e[t];if(n!==` `&&n!==` `)break;t+=1}a(e.slice(i,t),null),i=t;continue}if(o===`{`||o===`}`||o===`[`||o===`]`){a(o,Z),i+=1;continue}if(o===`:`||o===`,`){a(o,`var(--shiki-token-punctuation)`),i+=1;continue}if(o===`"`){i=Ae(e,i,a);continue}let s=i+1;for(;s<r&&!ke(e[s]??``);)s+=1;a(e.slice(i,s),`var(--shiki-token-constant)`),i=s}return t.map(je).join(`
|
|
6
|
+
`)}function Me(e){let t=new WeakSet;try{return JSON.stringify(e,(e,n)=>{if(typeof n==`bigint`)return n.toString();if(typeof n==`object`&&n){if(t.has(n))return`[Circular]`;t.add(n)}return n},2)??``}catch{try{return String(e)}catch{return``}}}function Ne(e,{showLineNumbers:t=!1,foldable:n=!0}={}){let r=Me(e),i=d({html:$(r),foldableRanges:n?k(r):void 0,showLineNumbers:t});return p({language:`json`,code:r,preHtml:i,showLineNumbers:t})}function Pe(e,t){let n=1;if(n>t)return!0;for(let r=0;r<e.length;r++)if(e[r]===`
|
|
7
|
+
`&&(n+=1,n>t))return!0;return!1}export{Oe as CodeBlock,v as computeFoldRanges,k as computeJsonFoldRanges,p as createMantleCodeBlockValue,d as decorateHighlightedHtml,D as defaultMeta,W as escapeHtml,A as finalizeFoldRanges,_ as foldStrategyFor,Pe as hasMoreThanNLines,w as inferIndentation,x as isIndentation,b as isSupportedLanguage,Ne as jsonCodeBlockValue,$ as jsonToShikiHtml,u as mantleCode,g as normalizeIndentation,S as normalizeValue,C as parseCodeBlockHighlightLines,E as parseCodeBlockLineNumberStart,m as parseCodeBlockShowLineNumbers,O as parseLanguage,T as parseMetastring,y as resolvePreRenderedCodeBlockProps,h as supportedLanguages,f as tokenizeMetastring};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as e,a as t,c as n,d as r,f as i,g as a,h as o,l as s,m as c,n as l,o as u,p as d,s as f,u as p,v as m,x as h,y as g}from"./code-block-
|
|
1
|
+
import{_ as e,a as t,c as n,d as r,f as i,g as a,h as o,l as s,m as c,n as l,o as u,p as d,s as f,u as p,v as m,x as h,y as g}from"./code-block-BE3Q0iAo.js";export{o as computeFoldRanges,m as computeJsonFoldRanges,e as decorateHighlightedHtml,h as defaultShowLineNumbers,g as finalizeFoldRanges,a as foldStrategyFor,d as inferIndentation,c as isIndentation,s as isSupportedLanguage,i as normalizeIndentation,l as normalizeValue,u as parseCodeBlockHighlightLines,f as parseCodeBlockLineNumberStart,n as parseCodeBlockShowLineNumbers,p as parseLanguage,r as supportedLanguages,t as tokenizeMetastring};
|
package/dist/code.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./cx-
|
|
1
|
+
import{t as e}from"./cx-0HCjnNv1.js";import{t}from"./slot-C3gII_9c.js";import{jsx as n}from"react/jsx-runtime";const r=({asChild:r,className:i,ref:a,...o})=>n(r?t:`code`,{ref:a,"data-slot":`code`,className:e(`border-gray-500/15 rounded-md border bg-gray-500/5 px-1 font-mono text-[0.8em]`,i),translate:`no`,...o});export{r as Code};
|
package/dist/combobox.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { n as WithAsChild } from "./as-child-D23mGo4f.js";
|
|
2
2
|
import { o as WithValidation } from "./field-7QeiTFwl.js";
|
|
3
|
-
import { n as Separator } from "./separator-
|
|
3
|
+
import { n as Separator } from "./separator-Bo4nY_3M.js";
|
|
4
4
|
import { ComponentProps } from "react";
|
|
5
5
|
import * as Primitive from "@ariakit/react";
|
|
6
6
|
//#region src/components/combobox/combobox.d.ts
|
|
@@ -292,6 +292,10 @@ declare const Combobox: {
|
|
|
292
292
|
/**
|
|
293
293
|
* Renders a group for Combobox.Item elements.
|
|
294
294
|
*
|
|
295
|
+
* Optionally, render a Combobox.GroupLabel as a child to label the group.
|
|
296
|
+
*
|
|
297
|
+
* You should only reach for this component when it semantically makes sense to group items together, such as when a label is needed.
|
|
298
|
+
*
|
|
295
299
|
* @see https://mantle.ngrok.com/components/forms/combobox#comboboxgroup
|
|
296
300
|
*
|
|
297
301
|
* @example
|
|
@@ -312,6 +316,10 @@ declare const Combobox: {
|
|
|
312
316
|
/**
|
|
313
317
|
* Renders a label in a combobox group.
|
|
314
318
|
*
|
|
319
|
+
* This component should be wrapped with Combobox.Group so the aria-labelledby is correctly set on the group element.
|
|
320
|
+
*
|
|
321
|
+
* You should only reach for this component when it semantically makes sense to group items together, such as when a label is needed.
|
|
322
|
+
*
|
|
315
323
|
* @see https://mantle.ngrok.com/components/forms/combobox#comboboxgrouplabel
|
|
316
324
|
*
|
|
317
325
|
* @example
|
|
@@ -365,7 +373,16 @@ declare const Combobox: {
|
|
|
365
373
|
*/
|
|
366
374
|
readonly Item: typeof Item;
|
|
367
375
|
/**
|
|
368
|
-
* Highlights the match between the current Combobox.Input value and parent Combobox.Item value.
|
|
376
|
+
* Highlights the match between the current Combobox.Input value (userValue) and parent Combobox.Item value.
|
|
377
|
+
*
|
|
378
|
+
* Renders a span element with the combobox item value as children.
|
|
379
|
+
* The value is split into span elements.
|
|
380
|
+
* Portions of the value matching the user input will have a data-user-value attribute, while the rest will have a data-autocomplete-value attribute.
|
|
381
|
+
*
|
|
382
|
+
* Should only be used as a child of Combobox.Item.
|
|
383
|
+
* The item value is automatically set to the value of the closest Combobox.Item component's value prop.
|
|
384
|
+
* The user input value is automatically set to the combobox store's value state.
|
|
385
|
+
* Passing `value` or `userValue` overrides them, respectively.
|
|
369
386
|
*
|
|
370
387
|
* @see https://mantle.ngrok.com/components/forms/combobox#comboboxitemvalue
|
|
371
388
|
*
|
package/dist/combobox.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./cx-
|
|
1
|
+
import{t as e}from"./cx-0HCjnNv1.js";import{t}from"./slot-C3gII_9c.js";import{a as n,r}from"./field-Bpptk_9t.js";import{n as i}from"./separator-Da8lDnio.js";import{jsx as a}from"react/jsx-runtime";import*as o from"@ariakit/react";const s={Root:({children:e,...t})=>a(o.ComboboxProvider,{...t,children:e}),Content:({asChild:n=!1,children:r,className:i,ref:s,sameWidth:c=!0,unmountOnHide:l=!0,...u})=>a(o.ComboboxPopover,{"data-slot":`combobox-content`,className:e(`border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden rounded-md border shadow-md p-1 my-2 space-y-px font-sans focus:outline-hidden`,i),ref:s,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,sameWidth:c,unmountOnHide:l,...u,children:r}),Group:({asChild:n=!1,children:r,className:i,ref:s,...c})=>a(o.ComboboxGroup,{"data-slot":`combobox-group`,className:e(`space-y-px`,i),ref:s,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,...c,children:r}),GroupLabel:({asChild:n=!1,children:r,className:i,ref:s,...c})=>a(o.ComboboxGroupLabel,{"data-slot":`combobox-group-label`,className:e(`text-muted px-2 py-1 text-xs font-medium`,i),ref:s,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,...c,children:r}),Input:({"aria-invalid":t,autoComplete:i=`list`,autoSelect:s=`always`,className:c,ref:l,validation:u,...d})=>{let f=n(),{ariaInvalid:p,validation:m}=r({"aria-invalid":t,validation:u??f});return a(o.Combobox,{"aria-invalid":p,autoComplete:i,autoSelect:s,"data-slot":`combobox-input`,className:e(`pointer-coarse:text-base h-9 text-sm`,`bg-form relative block w-full rounded-md border px-3 py-2 border-form text-strong font-sans`,`placeholder:text-placeholder`,`aria-disabled:opacity-50`,`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`,`autofill:shadow-(--color-blue-50) autofill:bg-blue-50 autofill:[-webkit-text-fill-color:var(--text-color-strong)]`,c),"data-validation":m||void 0,ref:l,...d})},Item:({asChild:n=!1,children:r,className:i,focusOnHover:s=!0,ref:c,value:l,...u})=>a(o.ComboboxItem,{"data-slot":`combobox-item`,className:e(`cursor-pointer rounded-md px-2 py-1.5 text-strong text-sm flex min-w-0 gap-2 items-center [&>svg]:size-5 [&_svg]:shrink-0`,`data-active-item:bg-active-menu-item`,`aria-disabled:opacity-50`,i),focusOnHover:s,ref:c,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,value:l,...u,children:r}),ItemValue:({asChild:n=!1,className:r,ref:i,...s})=>a(o.ComboboxItemValue,{"data-slot":`combobox-item-value`,className:e(`*:data-user-value:font-medium flex-1 shrink-0 text-strong font-normal`,r),ref:i,render:n?({ref:e,...n})=>a(t,{ref:e,...n}):void 0,...s}),Separator:({className:t,ref:n,...r})=>a(i,{ref:n,"data-slot":`combobox-separator`,className:e(`-mx-1.25 my-1 w-auto`,t),...r})};export{s as Combobox};
|
package/dist/command.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
|
|
2
|
-
import { t as Dialog } from "./dialog-
|
|
2
|
+
import { t as Dialog } from "./dialog-CtLI_uex.js";
|
|
3
3
|
import { t as Slot } from "./slot-DdgxmuI5.js";
|
|
4
4
|
import { ComponentProps, ComponentPropsWithoutRef, ReactElement, ReactNode, Ref } from "react";
|
|
5
5
|
import { Command as Command$1, useCommandState } from "cmdk";
|
|
@@ -228,7 +228,7 @@ type CommandDialogRootProps = Omit<ComponentProps<typeof Dialog.Root>, "children
|
|
|
228
228
|
open?: boolean;
|
|
229
229
|
};
|
|
230
230
|
/**
|
|
231
|
-
* The state owner for a command palette. Renders no DOM of its own
|
|
231
|
+
* The state owner for a command palette. Renders no DOM of its own; it owns
|
|
232
232
|
* the open state, the query text, and the `⌘K` shortcut, and carries them to
|
|
233
233
|
* every part below through `useCommandDialog()`.
|
|
234
234
|
*
|
|
@@ -447,6 +447,11 @@ declare const CommandList: ({ className, ...props }: ComponentProps<typeof Comma
|
|
|
447
447
|
/**
|
|
448
448
|
* The empty-state message; it renders only when no item matches the query.
|
|
449
449
|
*
|
|
450
|
+
* It renders nothing in the server HTML and in the hydration pass. Items
|
|
451
|
+
* register with cmdk in a layout effect, which never runs on the server, so the
|
|
452
|
+
* server counts zero matches for every list. A palette with no items shows its
|
|
453
|
+
* empty state one render after hydration.
|
|
454
|
+
*
|
|
450
455
|
* @see https://mantle.ngrok.com/components/navigation/command#commandempty
|
|
451
456
|
*
|
|
452
457
|
* @example
|
|
@@ -476,7 +481,7 @@ declare const CommandList: ({ className, ...props }: ComponentProps<typeof Comma
|
|
|
476
481
|
* </Command.DialogRoot>
|
|
477
482
|
* ```
|
|
478
483
|
*/
|
|
479
|
-
declare const CommandEmpty: ({ className, ...props }: ComponentProps<typeof Command$1.Empty>) => import("react").JSX.Element;
|
|
484
|
+
declare const CommandEmpty: ({ className, ...props }: ComponentProps<typeof Command$1.Empty>) => import("react").JSX.Element | null;
|
|
480
485
|
/**
|
|
481
486
|
* A labeled section of items; the `heading` prop names it.
|
|
482
487
|
*
|
|
@@ -577,7 +582,8 @@ declare const CommandSeparator: ({ className, ...props }: ComponentProps<typeof
|
|
|
577
582
|
*/
|
|
578
583
|
declare const CommandItem: ({ className, ...props }: ComponentProps<typeof Command$1.Item>) => import("react").JSX.Element;
|
|
579
584
|
/**
|
|
580
|
-
* The keyboard hint for a `Command.Item`, aligned to the end of the row.
|
|
585
|
+
* The keyboard hint for a `Command.Item`, aligned to the end of the row. It
|
|
586
|
+
* locks `translate="no"`: a translated shortcut key names the wrong key.
|
|
581
587
|
*
|
|
582
588
|
* @see https://mantle.ngrok.com/components/navigation/command#commandshortcut
|
|
583
589
|
*
|
|
@@ -608,7 +614,7 @@ declare const CommandItem: ({ className, ...props }: ComponentProps<typeof Comma
|
|
|
608
614
|
* </Command.DialogRoot>
|
|
609
615
|
* ```
|
|
610
616
|
*/
|
|
611
|
-
declare const CommandShortcut: ({ className, ...props }: ComponentProps<"span">) => import("react").JSX.Element;
|
|
617
|
+
declare const CommandShortcut: ({ className, ...props }: Omit<ComponentProps<"span">, "translate">) => import("react").JSX.Element;
|
|
612
618
|
/**
|
|
613
619
|
* A command palette: a modal search field over a filtered, keyboard-navigable
|
|
614
620
|
* list of items. `Command.SearchTrigger` is the field-shaped button that opens
|
|
@@ -703,8 +709,9 @@ declare const Command: {
|
|
|
703
709
|
*/
|
|
704
710
|
readonly Root: typeof CommandRoot;
|
|
705
711
|
/**
|
|
706
|
-
* The state owner for
|
|
707
|
-
* text, and the `⌘K` shortcut, and
|
|
712
|
+
* The state owner for a command palette. Renders no DOM of its own; it owns
|
|
713
|
+
* the open state, the query text, and the `⌘K` shortcut, and carries them to
|
|
714
|
+
* every part below through `useCommandDialog()`.
|
|
708
715
|
*
|
|
709
716
|
* @see https://mantle.ngrok.com/components/navigation/command#commanddialogroot
|
|
710
717
|
*
|
|
@@ -737,8 +744,11 @@ declare const Command: {
|
|
|
737
744
|
*/
|
|
738
745
|
readonly DialogRoot: typeof CommandDialogRoot;
|
|
739
746
|
/**
|
|
740
|
-
*
|
|
741
|
-
* and
|
|
747
|
+
* Makes any control behave like a search field that opens the command palette.
|
|
748
|
+
* It renders no DOM of its own; it clones its child and gives it the wiring,
|
|
749
|
+
* so **presentation belongs entirely to the child** and this part never has an
|
|
750
|
+
* opinion about how the trigger looks or how it behaves in a collapsed sidebar
|
|
751
|
+
* rail.
|
|
742
752
|
*
|
|
743
753
|
* @see https://mantle.ngrok.com/components/navigation/command#commandsearchtrigger
|
|
744
754
|
*
|
|
@@ -811,7 +821,8 @@ declare const Command: {
|
|
|
811
821
|
*/
|
|
812
822
|
readonly DialogTrigger: (props: ComponentProps<import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>>) => import("react").JSX.Element;
|
|
813
823
|
/**
|
|
814
|
-
* The
|
|
824
|
+
* The content of the CommandDialog. Renders the accessible title/description,
|
|
825
|
+
* the command palette UI, and an optional close button.
|
|
815
826
|
*
|
|
816
827
|
* @see https://mantle.ngrok.com/components/navigation/command#commanddialogcontent
|
|
817
828
|
*
|
|
@@ -912,6 +923,11 @@ declare const Command: {
|
|
|
912
923
|
/**
|
|
913
924
|
* The empty-state message; it renders only when no item matches the query.
|
|
914
925
|
*
|
|
926
|
+
* It renders nothing in the server HTML and in the hydration pass. Items
|
|
927
|
+
* register with cmdk in a layout effect, which never runs on the server, so the
|
|
928
|
+
* server counts zero matches for every list. A palette with no items shows its
|
|
929
|
+
* empty state one render after hydration.
|
|
930
|
+
*
|
|
915
931
|
* @see https://mantle.ngrok.com/components/navigation/command#commandempty
|
|
916
932
|
*
|
|
917
933
|
* @example
|
|
@@ -1009,7 +1025,8 @@ declare const Command: {
|
|
|
1009
1025
|
*/
|
|
1010
1026
|
readonly Item: typeof CommandItem;
|
|
1011
1027
|
/**
|
|
1012
|
-
* The keyboard hint for a `Command.Item`, aligned to the end of the row.
|
|
1028
|
+
* The keyboard hint for a `Command.Item`, aligned to the end of the row. It
|
|
1029
|
+
* locks `translate="no"`: a translated shortcut key names the wrong key.
|
|
1013
1030
|
*
|
|
1014
1031
|
* @see https://mantle.ngrok.com/components/navigation/command#commandshortcut
|
|
1015
1032
|
*
|
|
@@ -1174,8 +1191,10 @@ type Props = Omit<ComponentProps<"kbd">, "children">;
|
|
|
1174
1191
|
/**
|
|
1175
1192
|
* Renders the platform-appropriate meta key kbd (⌘ or ⌃).
|
|
1176
1193
|
*
|
|
1177
|
-
* -
|
|
1178
|
-
*
|
|
1194
|
+
* - Renders `"⌃"` in the server HTML and the hydration render, because the
|
|
1195
|
+
* server cannot know the platform. React re-renders it once after hydration.
|
|
1196
|
+
* - A client mount after hydration renders the host's glyph in its first
|
|
1197
|
+
* render, through {@link useIsApplePlatform}.
|
|
1179
1198
|
*
|
|
1180
1199
|
* @see https://mantle.ngrok.com/components/navigation/command#metakey
|
|
1181
1200
|
*
|
package/dist/command.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./cx-
|
|
1
|
+
import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{t}from"./cx-0HCjnNv1.js";import{t as n}from"./data-slot-EM6s2WEU.js";import{t as r}from"./slot-C3gII_9c.js";import{t as i}from"./use-is-hydrated-DDCqXmju.js";import{n as a}from"./separator-Da8lDnio.js";import{t as o}from"./dialog-CA-1Z0Np.js";import{n as s,t as c}from"./use-is-apple-platform-CMPzIYjz.js";import{t as l}from"./use-callback-ref-IYti9y7x.js";import{t as u}from"./kbd-4_0Y_8rx.js";import{createContext as d,useCallback as f,useContext as p,useEffect as m,useMemo as h,useRef as g,useState as _}from"react";import v from"tiny-invariant";import{jsx as y,jsxs as b}from"react/jsx-runtime";import{MagnifyingGlassIcon as x}from"@phosphor-icons/react/MagnifyingGlass";import{Command as S,useCommandState as C}from"cmdk";const w=d(null);function T(){let e=p(w);return v(e,`useCommandDialog must be used within Command.DialogRoot.`),e}function E(){return p(w)}function D(e){let t=p(w);return v(t,`Command.${e} must be rendered inside Command.DialogRoot.`),t}const O=new Set([` `,`Enter`]);function k(e){return e.isComposing||e.key===`Process`||e.keyCode===229?{type:`open`}:e.metaKey||e.ctrlKey||e.altKey||O.has(e.key)?{type:`ignore`}:[...e.key].length===1?{type:`seed`,query:e.key}:{type:`ignore`}}function A(e){let t=(e.clipboardData?.getData(`text/plain`)??``).replace(/\s+/g,` `).trim();return t===``?{type:`open`}:{type:`seed`,query:t}}const j=({"aria-keyshortcuts":e,children:t,"data-slot":i,onKeyDown:a,onPaste:s,...l})=>{let{keyboardShortcut:u,open:d,openWithQuery:f}=D(`SearchTrigger`),p=c(),m=e=>{e.type!==`ignore`&&f(e.type===`seed`?e.query:void 0)},h=p?`Meta+K`:`Control+K`;return y(o.Trigger,{asChild:!0,children:y(r,{...l,"aria-keyshortcuts":e??(u?h:void 0),"data-slot":n(i,`command-search-trigger`),"data-state":d?`open`:`closed`,onKeyDown:e=>{if(a?.(e),e.defaultPrevented)return;let t=k(e.nativeEvent);t.type===`seed`&&e.preventDefault(),m(t)},onPaste:e=>{s?.(e),!e.defaultPrevented&&m(A(e.nativeEvent))},children:t})})},M=[];function N(){let e=Symbol(`command-keyboard-shortcut`);return M.push(e),{isOwner:()=>M[0]===e,release:()=>{let t=M.indexOf(e);t!==-1&&M.splice(t,1)}}}function P(e){return e instanceof HTMLElement?e.isContentEditable||e.tagName===`TEXTAREA`:!1}function F({enabled:e,onTrigger:t}){let n=l(t);m(()=>{if(!e)return;let t=N(),r=s(),i=e=>{if(!t.isOwner()||e.defaultPrevented||e.repeat||P(e.target))return;let i=r?e.metaKey:e.ctrlKey,a=r?e.ctrlKey:e.metaKey;e.key.toLowerCase()===`k`&&i&&!a&&!e.altKey&&!e.shiftKey&&(e.preventDefault(),n())};return window.addEventListener(`keydown`,i),()=>{window.removeEventListener(`keydown`,i),t.release()}},[e,n])}const I=({className:e,...n})=>y(S,{"data-slot":`command`,className:t(`bg-popover flex h-full w-full flex-col overflow-hidden rounded-md`,e),...n}),L={Root:I,DialogRoot:({children:t,defaultOpen:n=!1,keyboardShortcut:r=!0,onOpenChange:i,open:a,...s})=>{let c=a!=null,[l,u]=_(n),d=c?a:l,[p,m]=_(``),v=g(i);e(()=>{v.current=i});let b=f((e,t)=>{e&&m(t??``),c||u(e),v.current?.(e)},[c]),x=f(e=>{b(e)},[b]),S=f(e=>{b(!0,e)},[b]),C=f(()=>{b(!d)},[b,d]);F({enabled:r,onTrigger:C});let T=h(()=>({keyboardShortcut:r,open:d,openWithQuery:S,query:p,setOpen:x,setQuery:m,toggle:C}),[r,d,S,p,x,C]);return y(w.Provider,{value:T,children:y(o.Root,{open:d,onOpenChange:x,...s,children:t})})},SearchTrigger:j,DialogTrigger:o.Trigger,DialogContent:({children:e,className:n,description:r=`Search for a command to run...`,filter:i,shouldFilter:a,showCloseButton:s=!0,title:c=`Command Palette`})=>{let l=g(null);return b(o.Content,{ref:l,className:t(`overflow-hidden p-0 relative`,n),onOpenAutoFocus:e=>{let t=l.current?.querySelector(`[data-slot~="command-input"]`);if(!(t instanceof HTMLInputElement)||t.disabled)return;e.preventDefault(),t.focus({preventScroll:!0});let n=t.value.length;t.setSelectionRange(n,n)},children:[b(o.Header,{className:`sr-only absolute`,children:[y(o.Title,{children:c}),y(o.Description,{children:r})]}),y(I,{className:`**:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-input]]:h-12 **:data-[slot=command-group]:px-2 **:data-[slot=command-list]:pb-1`,filter:i,shouldFilter:a,children:e}),s&&y(`div`,{className:`absolute top-1.5 right-1.5`,children:y(o.CloseIconButton,{})})]})},Input:({className:e,"data-slot":r,onValueChange:i,ref:a,value:o,...s})=>{let c=E(),l=o!=null,u=l?o:c?.query;return b(`div`,{ref:a,"data-slot":`command-input-wrapper`,className:`flex h-9 items-center gap-2 border-b border-popover px-3`,children:[y(x,{"aria-hidden":!0,className:`size-5 shrink-0 opacity-50`}),y(S.Input,{className:t(`placeholder:text-muted flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50`,e),onValueChange:e=>{l||c?.setQuery(e),i?.(e)},value:u,...s,"data-slot":n(r,`command-input`)})]})},List:({className:e,...n})=>y(S.List,{"data-slot":`command-list`,className:t(`max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar`,e),...n}),Empty:({className:e,...n})=>i()?y(S.Empty,{"data-slot":`command-empty`,className:t(`py-6 text-center text-sm`,e),...n}):null,Group:({className:e,...n})=>y(S.Group,{"data-slot":`command-group`,className:t(`[&>[cmdk-group-heading]]:text-muted overflow-hidden p-1 [&>[cmdk-group-heading]]:px-2 [&>[cmdk-group-heading]]:py-1.5 [&>[cmdk-group-heading]]:text-xs [&>[cmdk-group-heading]]:font-medium`,e),...n}),Item:({className:e,...n})=>y(S.Item,{"data-slot":`command-item`,className:t(`data-[selected=true]:bg-active-menu-item [:where(&_svg)]:text-muted relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [:where(&_svg)]:size-5`,e),...n}),Shortcut:({className:e,...n})=>y(`span`,{"data-slot":`command-shortcut`,className:t(`text-muted ml-auto text-xs tracking-widest`,e),...n,translate:`no`}),Separator:({className:e,...n})=>y(S.Separator,{"data-slot":`command-separator`,asChild:!0,...n,children:y(a,{className:t(`-mx-1 my-1 w-auto`,e)})})};function R({className:e,...n}){let r=c(),i=r?`⌘`:`⌃`,a=r?`Command`:`Control`;return b(u,{...n,suppressHydrationWarning:!0,"data-slot":`meta-key`,className:t(i===`⌃`&&`font-medium`,e),children:[y(`span`,{className:`sr-only`,children:a}),y(`span`,{"aria-hidden":!0,children:i})]})}export{L as Command,R as MetaKey,k as searchActionFromKeyDown,A as searchActionFromPaste,T as useCommandDialog,C as useCommandState};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{useCallback as e}from"react";function t(e,t){if(typeof e==`function`)return e(t);e!=null&&(e.current=t)}function n(...e){return n=>{let r=!1,i=e.map(e=>{let i=t(e,n);return typeof i==`function`&&(r=!0),i});if(r)return()=>{for(let n=0;n<i.length;n++){let r=i[n];typeof r==`function`?r():t(e[n],null)}}}}function r(t,r,i){return e(e=>n(t,r,i)(e),[t,r,i])}export{r as n,n as t};
|