@ngrok/mantle 0.71.1 → 0.73.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/README.md +0 -33
- package/dist/accordion.d.ts +1 -1
- package/dist/agent.json +2 -1
- package/dist/alert-dialog.d.ts +8 -8
- package/dist/alert.d.ts +3 -3
- package/dist/anchor.d.ts +1 -1
- package/dist/{as-child-DQHfEmYB.d.ts → as-child-C2PttRwz.d.ts} +1 -1
- package/dist/badge.d.ts +2 -2
- package/dist/{button-Bq0x5Pv4.d.ts → button-CoGmk7_d.d.ts} +6 -6
- package/dist/button.d.ts +3 -3
- package/dist/card.d.ts +1 -1
- package/dist/checkbox.d.ts +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/checkbox.js.map +1 -1
- package/dist/code-block.d.ts +41 -15
- package/dist/code-block.js +2 -2
- package/dist/code-block.js.map +1 -1
- package/dist/code-block_highlight-utils.d.ts +2 -2
- package/dist/code-block_highlight-utils.js +1 -1
- package/dist/code.d.ts +1 -1
- package/dist/color.d.ts +1 -1
- package/dist/combobox.d.ts +2 -2
- package/dist/combobox.js +1 -1
- package/dist/combobox.js.map +1 -1
- package/dist/command.d.ts +8 -8
- package/dist/command.js +1 -1
- package/dist/compose-refs-DZ3cPi47.js.map +1 -1
- package/dist/{copy-to-clipboard-DjOD_Mwb.js → copy-to-clipboard-CNMRyck4.js} +1 -1
- package/dist/{copy-to-clipboard-DjOD_Mwb.js.map → copy-to-clipboard-CNMRyck4.js.map} +1 -1
- package/dist/data-table.d.ts +3 -3
- package/dist/data-table.js +1 -1
- package/dist/data-table.js.map +1 -1
- package/dist/{deep-non-nullable-VFm1T3JZ.d.ts → deep-non-nullable-CT7hWCFG.d.ts} +1 -1
- package/dist/description-list.d.ts +1 -1
- package/dist/{dialog-BHzl9eye.js → dialog-B1KCB7JT.js} +2 -2
- package/dist/dialog-B1KCB7JT.js.map +1 -0
- package/dist/dialog.d.ts +2 -2
- package/dist/dialog.js +1 -1
- package/dist/{direction-DtBAQn7p.d.ts → direction-CVntIxOS.d.ts} +1 -1
- package/dist/{direction-DsB-pD9V.js → direction-HqPHXGIs.js} +1 -1
- package/dist/{direction-DsB-pD9V.js.map → direction-HqPHXGIs.js.map} +1 -1
- package/dist/{dropdown-menu-CzUNYIfA.d.ts → dropdown-menu-DVvNlA72.d.ts} +2 -2
- package/dist/{dropdown-menu-Ducs2SEn.js → dropdown-menu-DY4w933w.js} +2 -2
- package/dist/{dropdown-menu-Ducs2SEn.js.map → dropdown-menu-DY4w933w.js.map} +1 -1
- package/dist/dropdown-menu.d.ts +1 -1
- package/dist/dropdown-menu.js +1 -1
- package/dist/empty.d.ts +2 -2
- package/dist/field.d.ts +569 -0
- package/dist/field.js +2 -0
- package/dist/field.js.map +1 -0
- package/dist/hooks.d.ts +1 -1
- package/dist/hooks.js +1 -1
- package/dist/hooks.js.map +1 -1
- package/dist/{icon-DKMJm20j.d.ts → icon-D_BMDi_q.d.ts} +2 -2
- package/dist/{icon-button-BnK4K7YK.d.ts → icon-button-Dty-yfE2.d.ts} +3 -3
- package/dist/icon.d.ts +3 -3
- package/dist/icons.d.ts +3 -3
- package/dist/icons.js +1 -1
- package/dist/{in-view-pia_SVdE.js → in-view-BLZVEGFC.js} +1 -1
- package/dist/{in-view-pia_SVdE.js.map → in-view-BLZVEGFC.js.map} +1 -1
- package/dist/{in-view-Da08Bx6l.d.ts → in-view-DdIrfU4u.d.ts} +1 -1
- package/dist/{index-DkMUaYsw.d.ts → index-CVk4t5hk.d.ts} +1 -1
- package/dist/{index-DOJUH34Z.d.ts → index-DIBURJqf.d.ts} +3 -3
- package/dist/{index-rtz7SwEq.d.ts → index-TI92Xpg5.d.ts} +1 -1
- package/dist/index-j46YISoN.d.ts +22 -0
- package/dist/input.d.ts +192 -3
- package/dist/input.js +1 -1
- package/dist/input.js.map +1 -1
- package/dist/{is-input-CUEWaxtA.js → is-input-CEEoHxXN.js} +1 -1
- package/dist/{is-input-CUEWaxtA.js.map → is-input-CEEoHxXN.js.map} +1 -1
- package/dist/{kbd-CAVUiqBT.js → kbd-CbMxDL9E.js} +1 -1
- package/dist/{kbd-CAVUiqBT.js.map → kbd-CbMxDL9E.js.map} +1 -1
- package/dist/kbd.js +1 -1
- package/dist/label-x6FcOpxc.js +2 -0
- package/dist/label-x6FcOpxc.js.map +1 -0
- package/dist/label.d.ts +9 -0
- package/dist/label.js +1 -2
- package/dist/llms.txt +2 -1
- package/dist/mantle.css +73 -0
- package/dist/media-object.d.ts +1 -1
- package/dist/multi-select.d.ts +2 -2
- package/dist/multi-select.js +1 -1
- package/dist/multi-select.js.map +1 -1
- package/dist/otp-input.d.ts +3 -2
- package/dist/otp-input.js +1 -1
- package/dist/otp-input.js.map +1 -1
- package/dist/pagination.d.ts +3 -3
- package/dist/pagination.js +1 -1
- package/dist/popover-CoZxokw_.js +2 -0
- package/dist/popover-CoZxokw_.js.map +1 -0
- package/dist/popover.js +1 -2
- package/dist/{primitive-tyw4V7Vf.d.ts → primitive-Ed9cel2r.d.ts} +1 -1
- package/dist/progress.js +1 -1
- package/dist/progress.js.map +1 -1
- package/dist/radio-group.d.ts +1 -1
- package/dist/radio-group.js +1 -1
- package/dist/resolve-pre-rendered-props-BfWe69-w.js +13 -0
- package/dist/resolve-pre-rendered-props-BfWe69-w.js.map +1 -0
- package/dist/{resolve-pre-rendered-props-CNUnH1fU.d.ts → resolve-pre-rendered-props-DxvamgE6.d.ts} +152 -4
- package/dist/sandboxed-on-click.d.ts +1 -1
- package/dist/{select-DZutJxyr.d.ts → select-8ymlL8kC.d.ts} +3 -3
- package/dist/select-BBB_e15a.js +2 -0
- package/dist/select-BBB_e15a.js.map +1 -0
- package/dist/select.d.ts +1 -1
- package/dist/select.js +1 -1
- package/dist/{separator-DSOIrnhj.js → separator-awchG4LI.js} +1 -1
- package/dist/{separator-DSOIrnhj.js.map → separator-awchG4LI.js.map} +1 -1
- package/dist/separator.d.ts +1 -1
- package/dist/separator.js +1 -1
- package/dist/sheet.d.ts +2 -2
- package/dist/sheet.js +1 -1
- package/dist/sheet.js.map +1 -1
- package/dist/slot.d.ts +2 -22
- package/dist/{sort-DzCsa6Qj.js → sort-mXo37xN2.js} +2 -2
- package/dist/{sort-DzCsa6Qj.js.map → sort-mXo37xN2.js.map} +1 -1
- package/dist/split-button.d.ts +3 -3
- package/dist/split-button.js +1 -1
- package/dist/{svg-only-BtBvFy-N.d.ts → svg-only-CLbMy439.d.ts} +2 -2
- package/dist/switch.d.ts +2 -1
- package/dist/switch.js +1 -1
- package/dist/switch.js.map +1 -1
- package/dist/{table-BsNJBKiq.d.ts → table-BWxS7pXj.d.ts} +1 -1
- package/dist/{table-Cl4nlRMR.js → table-CHd39aT-.js} +1 -1
- package/dist/{table-Cl4nlRMR.js.map → table-CHd39aT-.js.map} +1 -1
- package/dist/table.d.ts +1 -1
- package/dist/table.js +1 -1
- package/dist/tabs.js +1 -1
- package/dist/text-area.d.ts +1 -1
- package/dist/text-area.js +1 -1
- package/dist/text-area.js.map +1 -1
- package/dist/theme.d.ts +2 -2
- package/dist/{themes-DIEYkvNl.d.ts → themes-f2W5S6xS.d.ts} +1 -1
- package/dist/toast.d.ts +3 -3
- package/dist/{traffic-policy-file-C6LHYrIU.js → traffic-policy-file-BwHHdhWJ.js} +1 -1
- package/dist/{traffic-policy-file-C6LHYrIU.js.map → traffic-policy-file-BwHHdhWJ.js.map} +1 -1
- package/dist/{types-DoV0R5Ja.d.ts → types-DnghL1WE.d.ts} +1 -1
- package/dist/types.d.ts +5 -5
- package/dist/use-copy-to-clipboard-CTgtLjUg.js +2 -0
- package/dist/{use-copy-to-clipboard-C7vsjJe-.js.map → use-copy-to-clipboard-CTgtLjUg.js.map} +1 -1
- package/dist/use-isomorphic-layout-effect-CNSD0lhi.js +2 -0
- package/dist/use-isomorphic-layout-effect-CNSD0lhi.js.map +1 -0
- package/dist/{use-prefers-reduced-motion-aXfsyo-k.js → use-prefers-reduced-motion-YUurmkwx.js} +1 -1
- package/dist/{use-prefers-reduced-motion-aXfsyo-k.js.map → use-prefers-reduced-motion-YUurmkwx.js.map} +1 -1
- package/dist/utils.d.ts +2 -2
- package/dist/utils.js +1 -1
- package/dist/validation-BYME8rWN.js +2 -0
- package/dist/validation-BYME8rWN.js.map +1 -0
- package/dist/validation-DF1z7YDr.d.ts +108 -0
- package/dist/{variant-props-DUmSIQK8.d.ts → variant-props-B4io4uA_.d.ts} +2 -2
- package/dist/{with-style-props-3iFrBR08.d.ts → with-style-props-CW8buMhK.d.ts} +1 -1
- package/package.json +15 -10
- package/dist/dialog-BHzl9eye.js.map +0 -1
- package/dist/index-C91lxoX9.d.ts +0 -146
- package/dist/label.js.map +0 -1
- package/dist/popover.js.map +0 -1
- package/dist/resolve-pre-rendered-props-C-kiaLHj.js +0 -13
- package/dist/resolve-pre-rendered-props-C-kiaLHj.js.map +0 -1
- package/dist/select-DOgdZO0Q.js +0 -2
- package/dist/select-DOgdZO0Q.js.map +0 -1
- package/dist/types-DG0WQLTL.d.ts +0 -78
- package/dist/use-copy-to-clipboard-C7vsjJe-.js +0 -2
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import { AriaAttributes, ReactNode } from "react";
|
|
2
|
+
|
|
3
|
+
//#region src/components/field/validation.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* The shared validation state vocabulary for Mantle form controls.
|
|
6
|
+
*
|
|
7
|
+
* `false` is useful with short-circuiting logic, e.g.
|
|
8
|
+
*
|
|
9
|
+
* ```tsx
|
|
10
|
+
* validation={errors.length > 0 && "error"}
|
|
11
|
+
* ```
|
|
12
|
+
*/
|
|
13
|
+
type Validation = "error" | "success" | "warning" | false;
|
|
14
|
+
/**
|
|
15
|
+
* A resolved visual validation state. Unlike `Validation`, this excludes
|
|
16
|
+
* `false` because parsed validation normalizes the absence value to
|
|
17
|
+
* `undefined`.
|
|
18
|
+
*/
|
|
19
|
+
type ValidationState = Exclude<Validation, false>;
|
|
20
|
+
/**
|
|
21
|
+
* A validation prop value accepted by Mantle controls. The function form is
|
|
22
|
+
* useful when validation state is expensive or should be read lazily from
|
|
23
|
+
* nearby state.
|
|
24
|
+
*/
|
|
25
|
+
type ValidationProp = Validation | (() => Validation);
|
|
26
|
+
/**
|
|
27
|
+
* Props for Mantle controls that accept a validation state.
|
|
28
|
+
*/
|
|
29
|
+
type WithValidation = {
|
|
30
|
+
/**
|
|
31
|
+
* Visual validation state for the control. `validation="error"` also maps
|
|
32
|
+
* to `aria-invalid=true` unless an explicit `aria-invalid` prop is present.
|
|
33
|
+
*/
|
|
34
|
+
validation?: ValidationProp;
|
|
35
|
+
};
|
|
36
|
+
/**
|
|
37
|
+
* The React-supported value type for the `aria-invalid` attribute.
|
|
38
|
+
*/
|
|
39
|
+
type AriaInvalid = AriaAttributes["aria-invalid"];
|
|
40
|
+
/**
|
|
41
|
+
* Options used to resolve a control's visual validation state and matching
|
|
42
|
+
* `aria-invalid` value.
|
|
43
|
+
*/
|
|
44
|
+
type ParseValidationOptions = {
|
|
45
|
+
/**
|
|
46
|
+
* The explicit ARIA invalid state supplied by the consumer or inherited
|
|
47
|
+
* from a parent control context.
|
|
48
|
+
*/
|
|
49
|
+
"aria-invalid"?: AriaInvalid;
|
|
50
|
+
/**
|
|
51
|
+
* The control's visual validation state.
|
|
52
|
+
*/
|
|
53
|
+
validation?: ValidationProp;
|
|
54
|
+
/**
|
|
55
|
+
* When true, neutral controls resolve `ariaInvalid` to `false` instead of
|
|
56
|
+
* leaving it unset. This preserves the historical behavior of most Mantle
|
|
57
|
+
* inputs while still allowing components like `OtpInput` to omit it.
|
|
58
|
+
*/
|
|
59
|
+
defaultAriaInvalid?: boolean;
|
|
60
|
+
};
|
|
61
|
+
/**
|
|
62
|
+
* The normalized validation state Mantle controls use for DOM attributes and
|
|
63
|
+
* validation styling.
|
|
64
|
+
*/
|
|
65
|
+
type ParsedValidation = {
|
|
66
|
+
/**
|
|
67
|
+
* `true` when the resolved ARIA invalid state represents any invalid value.
|
|
68
|
+
*/
|
|
69
|
+
isInvalid: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* The resolved value to pass to `aria-invalid`.
|
|
72
|
+
*/
|
|
73
|
+
ariaInvalid: AriaInvalid | undefined;
|
|
74
|
+
/**
|
|
75
|
+
* The resolved visual validation state. `false` is normalized away.
|
|
76
|
+
*/
|
|
77
|
+
validation: ValidationState | undefined;
|
|
78
|
+
};
|
|
79
|
+
/**
|
|
80
|
+
* Provides a resolved field validation state to Mantle controls rendered
|
|
81
|
+
* inside a `Field.Item` or `Field.Control`.
|
|
82
|
+
*/
|
|
83
|
+
/**
|
|
84
|
+
* Returns `true` when an `aria-invalid` value represents an invalid control.
|
|
85
|
+
* ARIA treats any value except `false` as an invalid state, including
|
|
86
|
+
* `"grammar"` and `"spelling"`.
|
|
87
|
+
*/
|
|
88
|
+
declare const isAriaInvalid: (ariaInvalid: AriaInvalid | undefined) => ariaInvalid is true | "true" | "grammar" | "spelling";
|
|
89
|
+
/**
|
|
90
|
+
* Resolves a `validation` prop to a concrete validation state and normalizes
|
|
91
|
+
* `false` to `undefined` so it can be used directly with `data-validation`.
|
|
92
|
+
*/
|
|
93
|
+
declare const resolveValidation: (validation: ValidationProp | undefined) => "success" | "warning" | "error" | undefined;
|
|
94
|
+
/**
|
|
95
|
+
* Resolves the shared Mantle validation contract for form controls.
|
|
96
|
+
*
|
|
97
|
+
* Explicit invalid ARIA state wins and forces visual `"error"` styling.
|
|
98
|
+
* Otherwise, `validation="error"` maps to `aria-invalid=true`, and neutral
|
|
99
|
+
* controls receive `aria-invalid=false` unless `defaultAriaInvalid` is false.
|
|
100
|
+
*/
|
|
101
|
+
declare const parseValidation: ({
|
|
102
|
+
"aria-invalid": ariaInvalid,
|
|
103
|
+
defaultAriaInvalid,
|
|
104
|
+
validation: validationProp
|
|
105
|
+
}: ParseValidationOptions) => ParsedValidation;
|
|
106
|
+
//#endregion
|
|
107
|
+
export { ValidationState as a, parseValidation as c, ValidationProp as i, resolveValidation as l, ParsedValidation as n, WithValidation as o, Validation as r, isAriaInvalid as s, AriaInvalid as t };
|
|
108
|
+
//# sourceMappingURL=validation-DF1z7YDr.d.ts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as DeepNonNullable } from "./deep-non-nullable-
|
|
1
|
+
import { t as DeepNonNullable } from "./deep-non-nullable-CT7hWCFG.js";
|
|
2
2
|
import { VariantProps } from "class-variance-authority";
|
|
3
3
|
|
|
4
4
|
//#region src/types/variant-props.d.ts
|
|
@@ -10,4 +10,4 @@ import { VariantProps } from "class-variance-authority";
|
|
|
10
10
|
type VariantProps$1<Variants extends (props: Record<PropertyKey, unknown> | undefined) => string> = Partial<DeepNonNullable<VariantProps<Variants>>>;
|
|
11
11
|
//#endregion
|
|
12
12
|
export { VariantProps$1 as t };
|
|
13
|
-
//# sourceMappingURL=variant-props-
|
|
13
|
+
//# sourceMappingURL=variant-props-B4io4uA_.d.ts.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ngrok/mantle",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.73.0",
|
|
4
4
|
"description": "mantle is ngrok's UI library and design system.",
|
|
5
5
|
"homepage": "https://mantle.ngrok.com",
|
|
6
6
|
"license": "MIT",
|
|
@@ -160,6 +160,11 @@
|
|
|
160
160
|
"types": "./dist/empty.d.ts",
|
|
161
161
|
"import": "./dist/empty.js"
|
|
162
162
|
},
|
|
163
|
+
"./field": {
|
|
164
|
+
"@ngrok/src-live-types": "./src/components/field/index.ts",
|
|
165
|
+
"types": "./dist/field.d.ts",
|
|
166
|
+
"import": "./dist/field.js"
|
|
167
|
+
},
|
|
163
168
|
"./flag": {
|
|
164
169
|
"@ngrok/src-live-types": "./src/components/flag/index.ts",
|
|
165
170
|
"types": "./dist/flag.d.ts",
|
|
@@ -354,7 +359,7 @@
|
|
|
354
359
|
"input-otp": "1.4.2",
|
|
355
360
|
"react-day-picker": "9.14.0",
|
|
356
361
|
"sonner": "2.0.7",
|
|
357
|
-
"tailwind-merge": "3.
|
|
362
|
+
"tailwind-merge": "3.6.0",
|
|
358
363
|
"tiny-invariant": "1.3.3",
|
|
359
364
|
"tw-animate-css": "1.4.0"
|
|
360
365
|
},
|
|
@@ -364,18 +369,18 @@
|
|
|
364
369
|
"@testing-library/jest-dom": "6.9.1",
|
|
365
370
|
"@testing-library/react": "16.3.2",
|
|
366
371
|
"@testing-library/user-event": "14.6.1",
|
|
367
|
-
"@tsdown/css": "0.
|
|
372
|
+
"@tsdown/css": "0.22.0",
|
|
368
373
|
"@types/react": "19.2.14",
|
|
369
374
|
"@types/react-dom": "19.2.3",
|
|
370
|
-
"@vitest/browser-playwright": "4.1.
|
|
375
|
+
"@vitest/browser-playwright": "4.1.6",
|
|
371
376
|
"browserslist": "4.28.2",
|
|
372
377
|
"date-fns": "4.1.0",
|
|
373
378
|
"happy-dom": "20.9.0",
|
|
374
|
-
"playwright": "1.
|
|
375
|
-
"react": "19.2.
|
|
376
|
-
"react-dom": "19.2.
|
|
377
|
-
"tailwindcss": "4.
|
|
378
|
-
"tsdown": "0.
|
|
379
|
+
"playwright": "1.60.0",
|
|
380
|
+
"react": "19.2.6",
|
|
381
|
+
"react-dom": "19.2.6",
|
|
382
|
+
"tailwindcss": "4.3.0",
|
|
383
|
+
"tsdown": "0.22.0",
|
|
379
384
|
"typescript": "6.0.3",
|
|
380
385
|
"@cfg/tsconfig": "1.0.0"
|
|
381
386
|
},
|
|
@@ -384,7 +389,7 @@
|
|
|
384
389
|
"date-fns": "^4.1.0",
|
|
385
390
|
"react": "^18 || ^19",
|
|
386
391
|
"react-dom": "^18 || ^19",
|
|
387
|
-
"tailwindcss": "^4.
|
|
392
|
+
"tailwindcss": "^4.3.0"
|
|
388
393
|
},
|
|
389
394
|
"browserslist": [
|
|
390
395
|
"last 2 years, not dead, > 0.2%"
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"dialog-BHzl9eye.js","names":["DialogPrimitive.Root","DialogPrimitive.Trigger","DialogPrimitive.Portal","DialogPrimitive.Close","DialogPrimitive.Overlay","DialogPrimitive.Content","DialogPrimitive.Title","DialogPrimitive.Description"],"sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import { XIcon } from \"@phosphor-icons/react/X\";\nimport type { ComponentProps, ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport * as DialogPrimitive from \"./primitive.js\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n * The root stateful component for the Dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogroot\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>This is an optional description.</Dialog.Description>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Dialog.Close asChild>\n * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n * </Dialog.Close>\n * <Button type=\"button\" appearance=\"filled\">Save</Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Root = DialogPrimitive.Root;\nRoot.displayName = \"Dialog\";\n\n/**\n * A button that opens the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogtrigger\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>This is an optional description.</Dialog.Description>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Dialog.Close asChild>\n * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n * </Dialog.Close>\n * <Button type=\"button\" appearance=\"filled\">Save</Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Trigger = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Trigger>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>\n>((props, ref) => <DialogPrimitive.Trigger ref={ref} data-slot=\"dialog-trigger\" {...props} />);\nTrigger.displayName = \"DialogTrigger\";\n\n/**\n * The portal container for the dialog. Renders the overlay and content into a\n * portal so the dialog escapes its parent's stacking context.\n *\n * Most consumers should not need to use this directly — `Dialog.Content`\n * already wraps its children in a portal. Use this only when you need to\n * customize the portal target or render the overlay yourself.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-reference\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n * </Dialog.Trigger>\n * <Dialog.Portal>\n * <Dialog.Overlay />\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>This is an optional description.</Dialog.Description>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Dialog.Close asChild>\n * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n * </Dialog.Close>\n * <Button type=\"button\" appearance=\"filled\">Save</Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Portal>\n * </Dialog.Root>\n * ```\n */\nconst Portal = DialogPrimitive.Portal;\nPortal.displayName = \"DialogPortal\";\n\n/**\n * A button that closes the dialog when clicked. Wrap an interactive element\n * with `asChild` to delegate the close behavior to your own button.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogclose\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>This is an optional description.</Dialog.Description>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Dialog.Close asChild>\n * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n * </Dialog.Close>\n * <Button type=\"button\" appearance=\"filled\">Save</Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Close = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Close>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Close>\n>((props, ref) => <DialogPrimitive.Close ref={ref} data-slot=\"dialog-close\" {...props} />);\nClose.displayName = \"DialogClose\";\n\n/**\n * The backdrop overlay for the dialog. Sits between the page and the dialog\n * content and applies a blur and dim effect.\n *\n * Most consumers should not need to use this directly — `Dialog.Content`\n * renders an overlay automatically. Use this only when composing a custom\n * `Dialog.Portal` tree.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-reference\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n * </Dialog.Trigger>\n * <Dialog.Portal>\n * <Dialog.Overlay />\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>This is an optional description.</Dialog.Description>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Dialog.Close asChild>\n * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n * </Dialog.Close>\n * <Button type=\"button\" appearance=\"filled\">Save</Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Portal>\n * </Dialog.Root>\n * ```\n */\nconst Overlay = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay\n\t\tref={ref}\n\t\tdata-slot=\"dialog-overlay\"\n\t\tclassName={cx(\n\t\t\t\"bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nOverlay.displayName = \"DialogOverlay\";\n\ntype ContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `Dialog.Content` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Dialog`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `Dialog.Content`\n\t *\n\t * @default `max-w-lg`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The container for the dialog content.\n * Renders on top of the overlay and is centered in the viewport.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogcontent\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>This is an optional description.</Dialog.Description>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Dialog.Close asChild>\n * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n * </Dialog.Close>\n * <Button type=\"button\" appearance=\"filled\">Save</Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ContentProps>(\n\t({ children, className, preferredWidth = \"max-w-lg\", ...props }, ref) => (\n\t\t<Portal>\n\t\t\t<Overlay />\n\t\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t\t<DialogPrimitive.Content\n\t\t\t\t\tdata-mantle-modal-content\n\t\t\t\t\tdata-slot=\"dialog-content\"\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex max-h-full w-full flex-1 flex-col\",\n\t\t\t\t\t\t\"outline-hidden focus-within:outline-hidden\",\n\t\t\t\t\t\t\"border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200\",\n\t\t\t\t\t\t\"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\",\n\t\t\t\t\t\tpreferredWidth,\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</DialogPrimitive.Content>\n\t\t\t</div>\n\t\t</Portal>\n\t),\n);\nContent.displayName = \"DialogContent\";\n\n/**\n * Contains the header content of the dialog, including the title and close button.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogheader\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>This is an optional description.</Dialog.Description>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Dialog.Close asChild>\n * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n * </Dialog.Close>\n * <Button type=\"button\" appearance=\"filled\">Save</Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Header = ({ className, children, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tdata-slot=\"dialog-header\"\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4\",\n\t\t\t\"has-[.icon-button]:pr-4\", // when there are actions in the header, shorten the padding\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</div>\n);\nHeader.displayName = \"DialogHeader\";\n\ntype CloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\n\n/**\n * An icon button that closes the dialog when clicked.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogcloseiconbutton\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>This is an optional description.</Dialog.Description>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Dialog.Close asChild>\n * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n * </Dialog.Close>\n * <Button type=\"button\" appearance=\"filled\">Save</Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst CloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Dialog\",\n\tappearance = \"ghost\",\n\t...props\n}: CloseIconButtonProps) => (\n\t<DialogPrimitive.Close asChild>\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\tdata-slot=\"dialog-close-icon-button\"\n\t\t\ticon={<XIcon />}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t/>\n\t</DialogPrimitive.Close>\n);\nCloseIconButton.displayName = \"DialogCloseIconButton\";\n\n/**\n * Contains the main content of the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogbody\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>This is an optional description.</Dialog.Description>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Dialog.Close asChild>\n * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n * </Dialog.Close>\n * <Button type=\"button\" appearance=\"filled\">Save</Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Body = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tdata-slot=\"dialog-body\"\n\t\tclassName={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)}\n\t\t{...props}\n\t/>\n);\nBody.displayName = \"DialogBody\";\n\n/**\n * Contains the footer content of the dialog, including action buttons.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogfooter\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>This is an optional description.</Dialog.Description>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Dialog.Close asChild>\n * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n * </Dialog.Close>\n * <Button type=\"button\" appearance=\"filled\">Save</Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Footer = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tdata-slot=\"dialog-footer\"\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nFooter.displayName = \"DialogFooter\";\n\n/**\n * An accessible name to be announced when the dialog is opened.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogtitle\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>This is an optional description.</Dialog.Description>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Dialog.Close asChild>\n * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n * </Dialog.Close>\n * <Button type=\"button\" appearance=\"filled\">Save</Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Title = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tdata-slot=\"dialog-title\"\n\t\tclassName={cx(\"text-strong truncate text-lg font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nTitle.displayName = \"DialogTitle\";\n\n/**\n * An accessible description to be announced when the dialog is opened.\n * Renders as a `div` by default, but can be changed to any other element using\n * the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogdescription\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>This is an optional description.</Dialog.Description>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Dialog.Close asChild>\n * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n * </Dialog.Close>\n * <Button type=\"button\" appearance=\"filled\">Save</Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tdata-slot=\"dialog-description\"\n\t\tclassName={cx(\"text-muted\", className)}\n\t\t{...props}\n\t/>\n));\nDescription.displayName = \"DialogDescription\";\n\n/**\n * A window overlaid on either the primary window or another dialog window. Use\n * Dialog for a focused modal that interrupts the user to gather input or\n * confirm a non-destructive choice. For destructive or irreversible\n * confirmations (delete, sign out, leave without saving), prefer `AlertDialog`.\n * For side-panel content that slides in from an edge (filter panels, detail\n * views, navigation drawers), prefer `Sheet`.\n *\n * @see https://mantle.ngrok.com/components/dialog\n *\n * @example\n * Composition:\n * ```\n * Dialog.Root\n * ├── Dialog.Trigger\n * └── Dialog.Content\n * ├── Dialog.Header\n * │ ├── Dialog.Title\n * │ ├── Dialog.Description\n * │ └── Dialog.CloseIconButton\n * ├── Dialog.Body\n * └── Dialog.Footer\n * └── Dialog.Close\n * ```\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>This is an optional description.</Dialog.Description>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Dialog.Close asChild>\n * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n * </Dialog.Close>\n * <Button type=\"button\" appearance=\"filled\">Save</Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Dialog = {\n\t/**\n\t * A window overlaid on either the primary window or another dialog window.\n\t * The root stateful component for the Dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the main content of the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogbody\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * A button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * An icon button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogcloseiconbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tCloseIconButton,\n\t/**\n\t * The container for the dialog content.\n\t * Renders on top of the overlay and is centered in the viewport.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * An accessible description to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * Contains the footer content of the dialog, including action buttons.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogfooter\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * Contains the header content of the dialog, including the title and close button.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The overlay backdrop for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-reference\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Portal>\n\t * <Dialog.Overlay />\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tOverlay,\n\t/**\n\t * The portal container for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-reference\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Portal>\n\t * <Dialog.Overlay />\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tPortal,\n\t/**\n\t * An accessible name to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogtitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * A button that opens the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogtrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>This is an optional description.</Dialog.Description>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tDialog,\n};\n"],"mappings":"sSAsCA,MAAM,EAAOA,EACb,EAAK,YAAc,SAgCnB,MAAM,EAAU,GAGb,EAAO,IAAQ,EAACC,EAAD,CAA8B,MAAK,YAAU,iBAAiB,GAAI,EAAS,CAAA,CAAC,CAC9F,EAAQ,YAAc,gBAwCtB,MAAM,EAASC,EACf,EAAO,YAAc,eAiCrB,MAAM,EAAQ,GAGX,EAAO,IAAQ,EAACC,EAAD,CAA4B,MAAK,YAAU,eAAe,GAAI,EAAS,CAAA,CAAC,CAC1F,EAAM,YAAc,cAwCpB,MAAM,EAAU,GAGb,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACC,EAAD,CACM,MACL,YAAU,iBACV,UAAW,EACV,iKACA,EACA,CACD,GAAI,EACH,CAAA,CACD,CACF,EAAQ,YAAc,gBA6CtB,MAAM,EAAU,GACd,CAAE,WAAU,YAAW,iBAAiB,WAAY,GAAG,GAAS,IAChE,EAAC,EAAD,CAAA,SAAA,CACC,EAAC,EAAD,EAAW,CAAA,CACX,EAAC,MAAD,CAAK,UAAU,+DACd,EAACC,EAAD,CACC,4BAAA,GACA,YAAU,iBACV,UAAW,EACV,yCACA,6CACA,wFACA,2KACA,EACA,EACA,CACI,MACL,GAAI,EAEH,WACwB,CAAA,CACrB,CAAA,CACE,CAAA,CAAA,CAEV,CACD,EAAQ,YAAc,gBAgCtB,MAAM,GAAU,CAAE,YAAW,WAAU,GAAG,KACzC,EAAC,MAAD,CACC,YAAU,gBACV,UAAW,EACV,+GACA,0BACA,EACA,CACD,GAAI,EAEH,WACI,CAAA,CAEP,EAAO,YAAc,eAkCrB,MAAM,GAAmB,CACxB,OAAO,KACP,OAAO,SACP,QAAQ,eACR,aAAa,QACb,GAAG,KAEH,EAACF,EAAD,CAAuB,QAAA,YACtB,EAAC,EAAD,CACa,aACZ,YAAU,2BACV,KAAM,EAAC,EAAD,EAAS,CAAA,CACR,QACD,OACA,OACN,GAAI,EACH,CAAA,CACqB,CAAA,CAEzB,EAAgB,YAAc,wBAgC9B,MAAM,GAAQ,CAAE,YAAW,GAAG,KAC7B,EAAC,MAAD,CACC,YAAU,cACV,UAAW,EAAG,iDAAkD,EAAU,CAC1E,GAAI,EACH,CAAA,CAEH,EAAK,YAAc,aAgCnB,MAAM,GAAU,CAAE,YAAW,GAAG,KAC/B,EAAC,MAAD,CACC,YAAU,gBACV,UAAW,EACV,8EACA,EACA,CACD,GAAI,EACH,CAAA,CAEH,EAAO,YAAc,eAgCrB,MAAM,EAAQ,GAGX,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACG,EAAD,CACM,MACL,YAAU,eACV,UAAW,EAAG,2CAA4C,EAAU,CACpE,GAAI,EACH,CAAA,CACD,CACF,EAAM,YAAc,cAkCpB,MAAM,EAAc,GAGjB,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACC,EAAD,CACM,MACL,YAAU,qBACV,UAAW,EAAG,aAAc,EAAU,CACtC,GAAI,EACH,CAAA,CACD,CACF,EAAY,YAAc,oBAoD1B,MAAM,EAAS,CAgCd,OA+BA,OA+BA,QA+BA,kBAgCA,UA+BA,cA+BA,SA+BA,SAkCA,UAkCA,SA+BA,QA+BA,UACA"}
|
package/dist/index-C91lxoX9.d.ts
DELETED
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
import { a as WithInputType, i as WithAutoComplete, o as WithValidation } from "./types-DG0WQLTL.js";
|
|
2
|
-
import * as _$react from "react";
|
|
3
|
-
import { InputHTMLAttributes, PropsWithChildren } from "react";
|
|
4
|
-
|
|
5
|
-
//#region src/components/input/input.d.ts
|
|
6
|
-
type BaseProps = WithAutoComplete & WithInputType & WithValidation;
|
|
7
|
-
/**
|
|
8
|
-
* The props for the `Input` component.
|
|
9
|
-
*/
|
|
10
|
-
type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & BaseProps & PropsWithChildren;
|
|
11
|
-
/**
|
|
12
|
-
* Used to create interactive controls for web-based forms in order to accept data from the user.
|
|
13
|
-
* A versatile input element that supports various types, validation states, and can be composed with other elements.
|
|
14
|
-
*
|
|
15
|
-
* @see https://mantle.ngrok.com/components/input
|
|
16
|
-
*
|
|
17
|
-
* @example
|
|
18
|
-
* ```tsx
|
|
19
|
-
* <Input
|
|
20
|
-
* type="email"
|
|
21
|
-
* placeholder="Enter your email"
|
|
22
|
-
* validation="success"
|
|
23
|
-
* />
|
|
24
|
-
* ```
|
|
25
|
-
*/
|
|
26
|
-
declare const Input: _$react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "autoComplete"> & WithAutoComplete & WithInputType & WithValidation & {
|
|
27
|
-
children?: _$react.ReactNode | undefined;
|
|
28
|
-
} & _$react.RefAttributes<HTMLInputElement>>;
|
|
29
|
-
type InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & BaseProps;
|
|
30
|
-
/**
|
|
31
|
-
* The actual <input /> element that captures user input.
|
|
32
|
-
* Used internally by Input component or when you need direct control over the input element.
|
|
33
|
-
*
|
|
34
|
-
* @see https://mantle.ngrok.com/components/input
|
|
35
|
-
*
|
|
36
|
-
* @example
|
|
37
|
-
* ```tsx
|
|
38
|
-
* <Input>
|
|
39
|
-
* <InputCapture />
|
|
40
|
-
* <Icon svg={<SearchIcon />} />
|
|
41
|
-
* </Input>
|
|
42
|
-
* ```
|
|
43
|
-
*/
|
|
44
|
-
declare const InputCapture: _$react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "autoComplete"> & WithAutoComplete & WithInputType & WithValidation & _$react.RefAttributes<HTMLInputElement>>;
|
|
45
|
-
//#endregion
|
|
46
|
-
//#region src/components/input/password-input.d.ts
|
|
47
|
-
type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {
|
|
48
|
-
/**
|
|
49
|
-
* Callback for when the visibility of the password value changes.
|
|
50
|
-
*/
|
|
51
|
-
onValueVisibilityChange?: (visible: boolean) => void;
|
|
52
|
-
/**
|
|
53
|
-
* Show/hide the password value as a controlled state.
|
|
54
|
-
* @default false
|
|
55
|
-
*/
|
|
56
|
-
showValue?: boolean;
|
|
57
|
-
};
|
|
58
|
-
/**
|
|
59
|
-
* An input optimized for password and other sensitive-value entry. Renders a
|
|
60
|
-
* native `<input type="password">` with a built-in trailing button that
|
|
61
|
-
* toggles between hidden (`••••`) and revealed (`text`) display.
|
|
62
|
-
*
|
|
63
|
-
* **When to use**
|
|
64
|
-
* - Password fields on login, signup, and reset flows.
|
|
65
|
-
* - One-time tokens, recovery codes, or secrets the user needs to type
|
|
66
|
-
* accurately and may want to verify visually before submitting.
|
|
67
|
-
*
|
|
68
|
-
* **When not to use**
|
|
69
|
-
* - For values that are never sensitive — use a plain {@link https://mantle.ngrok.com/components/input Input}.
|
|
70
|
-
* - For controls where the toggle would be confusing (e.g. masked input
|
|
71
|
-
* formatting like phone numbers).
|
|
72
|
-
*
|
|
73
|
-
* **Visibility state.** The toggle is uncontrolled by default. Pass
|
|
74
|
-
* `showValue` to control the visibility from the outside (useful when one
|
|
75
|
-
* UI control toggles multiple password fields), and `onValueVisibilityChange`
|
|
76
|
-
* to be notified when the user toggles via the built-in button.
|
|
77
|
-
*
|
|
78
|
-
* **Accessibility.** Always pair with a {@link https://mantle.ngrok.com/components/label Label}.
|
|
79
|
-
* The toggle button has its own accessible name announcing the current
|
|
80
|
-
* state. The input keeps `autocomplete="current-password"` /
|
|
81
|
-
* `"new-password"` semantics — set `autoComplete` explicitly per flow.
|
|
82
|
-
*
|
|
83
|
-
* **Browser password managers.** When revealed, the input switches to
|
|
84
|
-
* `type="text"` — some password managers may pause autofill in this state,
|
|
85
|
-
* which is the intended security tradeoff.
|
|
86
|
-
*
|
|
87
|
-
* @see https://mantle.ngrok.com/components/password-input
|
|
88
|
-
*
|
|
89
|
-
* @example
|
|
90
|
-
* ```tsx
|
|
91
|
-
* import { PasswordInput } from "@ngrok/mantle/input";
|
|
92
|
-
* import { Label } from "@ngrok/mantle/label";
|
|
93
|
-
* import { useState } from "react";
|
|
94
|
-
*
|
|
95
|
-
* // Basic — uncontrolled visibility.
|
|
96
|
-
* <Label className="grid gap-1">
|
|
97
|
-
* <span>Password</span>
|
|
98
|
-
* <PasswordInput name="password" autoComplete="current-password" />
|
|
99
|
-
* </Label>
|
|
100
|
-
*
|
|
101
|
-
* // Validation state.
|
|
102
|
-
* <PasswordInput validation="error" />
|
|
103
|
-
*
|
|
104
|
-
* // Controlled visibility — one toggle reveals multiple fields.
|
|
105
|
-
* function PasswordPair() {
|
|
106
|
-
* const [show, setShow] = useState(false);
|
|
107
|
-
* return (
|
|
108
|
-
* <>
|
|
109
|
-
* <PasswordInput showValue={show} onValueVisibilityChange={setShow} />
|
|
110
|
-
* <PasswordInput showValue={show} onValueVisibilityChange={setShow} />
|
|
111
|
-
* </>
|
|
112
|
-
* );
|
|
113
|
-
* }
|
|
114
|
-
* ```
|
|
115
|
-
*/
|
|
116
|
-
declare const PasswordInput: _$react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "autoComplete"> & WithValidation & WithAutoComplete & {
|
|
117
|
-
/**
|
|
118
|
-
* Callback for when the visibility of the password value changes.
|
|
119
|
-
*/
|
|
120
|
-
onValueVisibilityChange?: (visible: boolean) => void;
|
|
121
|
-
/**
|
|
122
|
-
* Show/hide the password value as a controlled state.
|
|
123
|
-
* @default false
|
|
124
|
-
*/
|
|
125
|
-
showValue?: boolean;
|
|
126
|
-
} & _$react.RefAttributes<HTMLInputElement>>;
|
|
127
|
-
//#endregion
|
|
128
|
-
//#region src/components/input/is-input.d.ts
|
|
129
|
-
/**
|
|
130
|
-
* Type guard for an HTMLInputElement.
|
|
131
|
-
*
|
|
132
|
-
* @example
|
|
133
|
-
* ```tsx
|
|
134
|
-
* function handleElement(element: HTMLElement) {
|
|
135
|
-
* if (isInput(element)) {
|
|
136
|
-
* // TypeScript now knows element is HTMLInputElement
|
|
137
|
-
* element.value = "new value";
|
|
138
|
-
* element.focus();
|
|
139
|
-
* }
|
|
140
|
-
* }
|
|
141
|
-
* ```
|
|
142
|
-
*/
|
|
143
|
-
declare function isInput(value: unknown): value is HTMLInputElement;
|
|
144
|
-
//#endregion
|
|
145
|
-
export { InputCapture as a, Input as i, PasswordInput as n, InputCaptureProps as o, PasswordInputProps as r, InputProps as s, isInput as t };
|
|
146
|
-
//# sourceMappingURL=index-C91lxoX9.d.ts.map
|
package/dist/label.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"label.js","names":[],"sources":["../src/components/label/label.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype LabelProps = ComponentPropsWithoutRef<\"label\"> & {\n\t/**\n\t * If set, the label will appear disabled.\n\t */\n\tdisabled?: boolean;\n};\n\n/**\n * A caption for a form control — input, checkbox, radio, switch, select.\n * Renders a native `<label>`. Pair every form control with a `Label` so the\n * control has an accessible name, clicks on the label focus the control, and\n * screen readers announce the field correctly.\n *\n * **When to use**\n * - Every visible form control. Always.\n * - Above or beside an input to describe it (\"Email\", \"API key\").\n * - Wrapping a checkbox or radio next to its descriptive text.\n *\n * **When not to use**\n * - For static UI text that isn't labeling a control — use a heading or\n * plain `<p>`/`<span>`.\n * - As a substitute for `aria-label` on non-`<input>` widgets that don't\n * support `<label for>` association.\n *\n * **Two ways to associate.** Either wrap the control inside the `<Label>`\n * (implicit association — simplest) or set `htmlFor` to the control's `id`\n * (explicit — required when the control isn't a child).\n *\n * **Disabled state.** Pass `disabled` to render the label in a disabled\n * style. Typically you'll want this to mirror the underlying control's\n * disabled state so the visual treatment stays consistent.\n *\n * @see https://mantle.ngrok.com/components/label\n *\n * @example\n * ```tsx\n * import { Label } from \"@ngrok/mantle/label\";\n * import { Input } from \"@ngrok/mantle/input\";\n *\n * // Implicit — control nested inside the label.\n * <Label className=\"grid gap-1\">\n * <span>Email</span>\n * <Input type=\"email\" name=\"email\" />\n * </Label>\n *\n * // Explicit — htmlFor matches the control's id.\n * <div className=\"grid gap-1\">\n * <Label htmlFor=\"api-key\">API key</Label>\n * <Input id=\"api-key\" name=\"apiKey\" />\n * </div>\n *\n * // Inline label for a checkbox.\n * <Label className=\"flex items-center gap-2\">\n * <Checkbox name=\"terms\" />\n * <span>I agree to the terms</span>\n * </Label>\n * ```\n */\nconst Label = forwardRef<ComponentRef<\"label\">, LabelProps>(\n\t(\n\t\t{ \"aria-disabled\": _ariaDisabled, children, className, disabled, onMouseDown, ...props },\n\t\tref,\n\t) => (\n\t\t// biome-ignore lint/a11y/noLabelWithoutControl: this is a composable label component\n\t\t<label\n\t\t\taria-disabled={disabled ?? _ariaDisabled}\n\t\t\tdata-slot=\"label\"\n\t\t\tclassName={cx(\n\t\t\t\t\"text-strong cursor-pointer text-sm peer-disabled:cursor-default has-disabled:cursor-default aria-disabled:cursor-default font-sans\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonMouseDown={(event) => {\n\t\t\t\t// only prevent text selection if clicking inside the label itself\n\t\t\t\tconst target = event.target as HTMLElement;\n\t\t\t\tif (target.closest(\"button, input, select, textarea\")) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tonMouseDown?.(event);\n\n\t\t\t\t// prevent text selection when double clicking label\n\t\t\t\tif (!event.defaultPrevented && event.detail > 1) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t}}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</label>\n\t),\n);\nLabel.displayName = \"Label\";\n\nexport {\n\t//\n\tLabel,\n};\n"],"mappings":"gHA8DA,MAAM,EAAQ,GAEZ,CAAE,gBAAiB,EAAe,WAAU,YAAW,WAAU,cAAa,GAAG,GACjF,IAGA,EAAC,QAAD,CACC,gBAAe,GAAY,EAC3B,YAAU,QACV,UAAW,EACV,qIACA,EACA,CACD,YAAc,GAAU,CAER,EAAM,OACV,QAAQ,kCAAkC,GAIrD,IAAc,EAAM,CAGhB,CAAC,EAAM,kBAAoB,EAAM,OAAS,GAC7C,EAAM,gBAAgB,GAGnB,MACL,GAAI,EAEH,WACM,CAAA,CAET,CACD,EAAM,YAAc"}
|
package/dist/popover.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"popover.js","names":[],"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A floating overlay that displays rich content in a portal, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popoverroot\n *\n * @example\n * ```tsx\n * <Popover.Root>\n * <Popover.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Popover\n * </Button>\n * </Popover.Trigger>\n * <Popover.Content>\n * <p>This is the popover content.</p>\n * </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Root = PopoverPrimitive.Root;\nRoot.displayName = \"Popover\";\n\n/**\n * The trigger button that opens the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popovertrigger\n *\n * @example\n * ```tsx\n * <Popover.Root>\n * <Popover.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Popover\n * </Button>\n * </Popover.Trigger>\n * <Popover.Content>\n * <p>This is the popover content.</p>\n * </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Trigger = PopoverPrimitive.Trigger;\nTrigger.displayName = \"PopoverTrigger\";\n\n/**\n * An optional element to position the PopoverContent against. If this part is not used, the content will position alongside the PopoverTrigger.\n *\n * @see https://mantle.ngrok.com/components/popover#popoveranchor\n *\n * @example\n * ```tsx\n * <Popover.Root>\n * <Popover.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Popover\n * </Button>\n * </Popover.Trigger>\n * <Popover.Anchor asChild>\n * <div>Anchor element</div>\n * </Popover.Anchor>\n * <Popover.Content>\n * <p>This is the popover content.</p>\n * </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Anchor = PopoverPrimitive.Anchor;\nAnchor.displayName = \"PopoverAnchor\";\n\n/**\n * A button that closes an open popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popoverclose\n *\n * @example\n * ```tsx\n * <Popover.Root>\n * <Popover.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Popover\n * </Button>\n * </Popover.Trigger>\n * <Popover.Content>\n * <p>This is the popover content.</p>\n * <Popover.Close asChild>\n * <Button type=\"button\">Close</Button>\n * </Popover.Close>\n * </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Close = PopoverPrimitive.Close;\nClose.displayName = \"PopoverClose\";\n\ntype PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `PopoverContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Popover`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `PopoverContent`\n\t *\n\t * @default `max-w-72`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The content to render inside the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popovercontent\n *\n * @example\n * ```tsx\n * <Popover.Root>\n * <Popover.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Popover\n * </Button>\n * </Popover.Trigger>\n * <Popover.Content>\n * <p>This is the popover content.</p>\n * </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, PopoverContentProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\talign = \"center\",\n\t\t\tclassName,\n\t\t\tonClick,\n\t\t\tpreferredWidth = \"max-w-72\",\n\t\t\tsideOffset = 4,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<PopoverPrimitive.Portal>\n\t\t\t<PopoverPrimitive.Content\n\t\t\t\talign={align}\n\t\t\t\tdata-slot=\"popover-content\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"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\",\n\t\t\t\t\tpreferredWidth,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\t/**\n\t\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t\t * of the PopoverContent\n\t\t\t\t\t */\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</PopoverPrimitive.Portal>\n\t),\n);\nContent.displayName = \"PopoverContent\";\n\n/**\n * A floating overlay that displays rich content in a portal, triggered by a button.\n *\n * Use `Popover` for INTERACTIVE overlay content — small forms, settings\n * menus, color pickers, action lists. The user opens it deliberately\n * (click/tap or focus + space). For short, non-interactive label hints\n * triggered by hover, use `Tooltip` instead. For non-essential preview\n * content shown on hover, use `HoverCard`.\n *\n * `Popover` is a non-modal dialog by default: focus moves into the content\n * when it opens, `Escape` closes and returns focus to the trigger, clicking\n * outside dismisses, and the page (body and any scroll containers) continues\n * to scroll normally. Pass `modal` on `Popover.Root` to trap focus inside\n * the content, block interaction with the rest of the page, and lock body\n * scroll while the popover is open.\n *\n * @see https://mantle.ngrok.com/components/popover\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n *\n * @example\n * Composition:\n * ```\n * Popover.Root\n * ├── Popover.Trigger\n * ├── Popover.Anchor\n * └── Popover.Content\n * └── Popover.Close\n * ```\n *\n * @example\n * ```tsx\n * <Popover.Root>\n * <Popover.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Popover\n * </Button>\n * </Popover.Trigger>\n * <Popover.Content>\n * <p>This is the popover content.</p>\n * </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Popover = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the popover.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoverroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t * <Popover.Trigger asChild>\n\t * <Button>Open popover</Button>\n\t * </Popover.Trigger>\n\t * <Popover.Content>\n\t * <p>This is the popover content.</p>\n\t * </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * An optional element to position the PopoverContent against. If not used, content positions alongside the trigger.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoveranchor\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t * <Popover.Anchor asChild>\n\t * <div>Position relative to this element</div>\n\t * </Popover.Anchor>\n\t * <Popover.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Popover</Button>\n\t * </Popover.Trigger>\n\t * <Popover.Content>\n\t * <p>This popover is positioned relative to the anchor.</p>\n\t * <Popover.Close asChild>\n\t * <Button type=\"button\">Close</Button>\n\t * </Popover.Close>\n\t * </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tAnchor,\n\t/**\n\t * A button that closes an open popover. Can be placed anywhere within the popover content.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoverclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t * <Popover.Trigger asChild>\n\t * <Button type=\"button\">Settings</Button>\n\t * </Popover.Trigger>\n\t * <Popover.Content>\n\t * <div className=\"flex items-center justify-between\">\n\t * <Text>Settings Panel</Text>\n\t * <Popover.Close asChild>\n\t * <Button type=\"button\" appearance=\"ghost\" size=\"sm\">✕</Button>\n\t * </Popover.Close>\n\t * </div>\n\t * <Text>Configure your preferences here.</Text>\n\t * </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * The content to render inside the popover. Appears in a portal with rich styling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popovercontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t * <Popover.Trigger asChild>\n\t * <Button type=\"button\">Show Info</Button>\n\t * </Popover.Trigger>\n\t * <Popover.Content side=\"top\" align=\"center\">\n\t * <div className=\"space-y-2\">\n\t * <Text weight=\"strong\">Additional Information</Text>\n\t * <Text>This is the content inside the popover.</Text>\n\t * <Button type=\"button\" size=\"sm\">Action</Button>\n\t * </div>\n\t * </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The trigger button that opens the popover when clicked or focused.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popovertrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t * <Popover.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Options\n\t * </Button>\n\t * </Popover.Trigger>\n\t * <Popover.Content>\n\t * <div className=\"space-y-2\">\n\t * <Button type=\"button\" variant=\"ghost\">Edit</Button>\n\t * <Button type=\"button\" variant=\"ghost\">Delete</Button>\n\t * </div>\n\t * </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tPopover,\n};\n"],"mappings":"0JAyBA,MAAM,EAAO,EAAiB,KAC9B,EAAK,YAAc,UAqBnB,MAAM,EAAU,EAAiB,QACjC,EAAQ,YAAc,iBAwBtB,MAAM,EAAS,EAAiB,OAChC,EAAO,YAAc,gBAwBrB,MAAM,EAAQ,EAAiB,MAC/B,EAAM,YAAc,eAiCpB,MAAM,EAAU,GAEd,CAEC,QAAQ,SACR,YACA,UACA,iBAAiB,WACjB,aAAa,EACb,GAAG,GAEJ,IAEA,EAAC,EAAiB,OAAlB,CAAA,SACC,EAAC,EAAiB,QAAlB,CACQ,QACP,YAAU,kBACV,UAAW,EACV,qaACA,EACA,EACA,CACD,QAAU,GAAU,CAKnB,EAAM,iBAAiB,CACvB,IAAU,EAAM,EAEZ,MACO,aACZ,GAAI,EACH,CAAA,CACuB,CAAA,CAE3B,CACD,EAAQ,YAAc,iBA6CtB,MAAM,EAAU,CAkBf,OAwBA,SAwBA,QAsBA,UAuBA,UACA"}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./booleanish-CBGdPL3Q.js";const n=new Set([`bash`,`sh`,`shell`]);function r(e,t){return!(n.has(e)&&!t.trim().includes(`
|
|
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){let t=new Set;for(let n of e)if(typeof n==`number`){if(!l(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(!l(a)||!l(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 l=e=>e!=null&&!Number.isNaN(e)&&e>0&&Number.isFinite(e);function u(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 d(e){let t=u(e).replaceAll(`\r
|
|
3
|
-
`,`
|
|
4
|
-
`).replaceAll(`\r`,`
|
|
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 f({highlightLines:t,html:n,lineNumberStart:r=1,showLineNumbers:i=!1}){let a=c(...t??[]),o=d(n),s=``;for(let t=0;t<o.length;t++){let n=o[t]??``,c=r+t,l=e(`mantle-code-line`,a.has(c)&&`mantle-code-line-highlighted`),u=i?`<span class="mantle-code-line-number" data-slot="line-number">${c}</span>`:``;s+=`<span class="${l}" data-line-number="${c}">${u}<span class="mantle-code-line-content" data-slot="line-content">${n===``?` `:n}</span></span>`}return s}const p=[`tabs`,`spaces`];function m(e){return p.includes(e)}function h(e,t){return t||(v(e)?`tabs`:(y(e),`spaces`))}const g=new Set([`csharp`,`css`,`go`,`html`,`java`,`javascript`,`js`,`jsx`,`ts`,`tsx`,`typescript`,`xml`]),_=new Set([`python`,`py`,`yaml`,`yml`,`ruby`,`rb`]);function v(e){return g.has(e)}function y(e){return _.has(e)}function b(e,t){let n=t?.indentation??`spaces`,r=e.replace(/\r\n?/g,`
|
|
7
|
-
`),i=r.trim();if(i===``)return``;let a=C(r),o=i.split(`
|
|
8
|
-
`),s=Array(o.length);for(let e=0;e<o.length;e++){let t=o[e];t!=null&&(s[e]=x(S(t)?t:t.slice(a),n))}return s.join(`
|
|
9
|
-
`)}function x(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 S(e){let t=e[0];return t!=null&&t!==` `&&t!==` `}function C(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===`
|
|
10
|
-
`||a===`\r`){n=0;continue}if(n<t&&(t=n,t===0))return 0;r=!1;continue}(a===`
|
|
11
|
-
`||a===`\r`)&&(r=!0,n=0)}return t===1/0?0:t}const w=`bash.cs.csharp.css.go.html.java.javascript.js.json.jsx.plain.plaintext.py.python.rb.ruby.rust.sh.shell.text.ts.tsx.txt.typescript.xml.yaml.yml`.split(`.`),T=new Set(w),E=`text`;function D(e){let t=e?.trim()??``;if(!t)return E;let n=t.indexOf(`-`),r=n===-1?t:t.slice(n+1);return O(r)?r:E}const O=e=>typeof e==`string`&&T.has(e);function k(e){if(typeof e==`boolean`)return e;if(typeof e==`string`){if(e===`true`)return!0;if(e===`false`)return!1}}function A(e){if(typeof e==`number`&&Number.isFinite(e)&&e>0)return Math.floor(e);if(typeof e==`string`&&/^\d+$/.test(e)){let t=Number.parseInt(e,10);return t>0?t:void 0}}function j(e){let t=e=>{if(typeof e==`number`)return Number.isFinite(e)&&e>0?Math.floor(e):void 0;if(typeof e==`string`){let t=e.trim();if(/^\d+$/.test(t)){let e=Number.parseInt(t,10);return e>0?e:void 0}if(/^\d+-\d+$/.test(t)){let[e,n]=t.split(`-`);return Number.parseInt(e??``,10)>0&&Number.parseInt(n??``,10)>0?t:void 0}}};if(typeof e==`string`){let n=[],r=e.split(`,`);for(let e of r){let r=t(e);r!=null&&n.push(r)}return n.length>0?n:void 0}if(!Array.isArray(e))return;let n=[];for(let r of e){let e=t(r);e!=null&&n.push(e)}return n.length>0?n:void 0}const M={collapsible:!1,disableCopy:!1,indentation:void 0,mode:void 0,title:void 0};function N(e){let t=e?.trim()??``;if(!t)return M;let n={},r=F(t);for(let e of r){let t=e.indexOf(`=`),r=t===-1?e:e.slice(0,t),i=t===-1?void 0:e.slice(t+1);r&&(n[r]=P(i)??!0)}return R(n)}function P(e){if(e==null)return;let t=e.trim(),n=t.length-1;return n>=1&&t.charCodeAt(0)===34&&t.charCodeAt(n)===34?t.slice(1,n):t}function F(e){let t=e?.trim()??``,n=[],r=``,i=!1;for(let e=0;e<t.length;e++){let a=t[e]??``;!i&&I(a)?r&&=(n.push(r),``):(a===`"`&&(i=!i),r+=a)}return r&&n.push(r),n}function I(e){return e===` `||e===` `||e===`
|
|
12
|
-
`||e===`\r`}function L(e){return e===`cli`||e===`file`||e===`traffic-policy`}function R(e){let{collapsible:n=M.collapsible,disableCopy:r=M.disableCopy,indentation:i=M.indentation,mode:a=M.mode,title:o=M.title}=e;return{collapsible:typeof n==`string`||typeof n==`boolean`?t(n):M.collapsible,disableCopy:typeof r==`string`||typeof r==`boolean`?t(r):M.disableCopy,indentation:m(i)?i:M.indentation,mode:L(a)?a:M.mode,title:typeof o==`string`?o.trim():M.title}}function z(e){let{collapsible:n,disableCopy:r,mantleCode:i,mantleCollapsible:a,mantleDisableCopy:o,mantleHighlightLines:s,mantleLanguage:c,mantleLineNumberStart:l,mantleMode:u,mantlePreHtml:d,mantleShowLineNumbers:f,mantleTitle:p,mode:m,title:h,...g}=e;return c!=null||i!=null||d!=null||f!=null||s!=null||l!=null||a!=null||o!=null||u!=null||p!=null?{mantleCode:{code:typeof i==`string`?i:void 0,collapsible:(typeof a==`string`||typeof a==`boolean`?t(a):void 0)??(typeof n==`string`||typeof n==`boolean`?t(n):void 0),disableCopy:typeof o==`string`||typeof o==`boolean`?t(o):typeof r==`string`||typeof r==`boolean`?t(r):void 0,highlightLines:j(s),language:typeof c==`string`&&O(c)?c:void 0,lineNumberStart:A(l),mode:L(u)?u:L(m)?m:void 0,preHtml:typeof d==`string`?d:void 0,rawLanguage:c,showLineNumbers:k(f),title:typeof p==`string`?p.trim():typeof h==`string`?h.trim():void 0},props:g}:{mantleCode:void 0,props:g}}export{r as _,F as a,k as c,w as d,b as f,a as g,f as h,z as i,O as l,m,P as n,j as o,h as p,N as r,A as s,M as t,D as u,s as v};
|
|
13
|
-
//# sourceMappingURL=resolve-pre-rendered-props-C-kiaLHj.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"resolve-pre-rendered-props-C-kiaLHj.js","names":[],"sources":["../src/components/code-block/mantle-code.ts","../src/components/code-block/line-numbers.ts","../src/components/code-block/decorate-highlighted-html.ts","../src/components/code-block/indentation.ts","../src/components/code-block/normalize-indentation.ts","../src/components/code-block/supported-languages.ts","../src/components/code-block/parse-line-options.ts","../src/components/code-block/resolve-pre-rendered-props.ts"],"sourcesContent":["import type { SupportedLanguage } from \"../code-block/supported-languages.js\";\nimport type { LineRange } from \"../code-block/line-numbers.js\";\nimport type { Indentation } from \"../code-block/indentation.js\";\n\n/** Languages that represent shell/terminal commands. */\nconst shellLanguages = new Set<SupportedLanguage>([\"bash\", \"sh\", \"shell\"]);\n\n/** Returns the default `showLineNumbers` value for a given language and code string. Single-line shell snippets default to `false`; everything else defaults to `true`. */\nfunction defaultShowLineNumbers(language: SupportedLanguage, code: string): boolean {\n\tif (shellLanguages.has(language) && !code.trim().includes(\"\\n\")) {\n\t\treturn false;\n\t}\n\treturn true;\n}\n\nconst mantleCodeBlockValueBrand: unique symbol = Symbol(\"MantleCodeBlockValue\");\n\n/**\n * The value produced by `mantleCode()`. Contains pre-rendered Shiki HTML (injected\n * by the Vite plugin at build time) and the original code string for the copy button.\n *\n * `~preHtml` is required at render time. Runtime syntax highlighting is intentionally\n * unsupported; only placeholder substitution for interpolated values is performed.\n */\ntype MantleCodeBlockValue = {\n\t/**\n\t * Nominal type brand to prevent accidental use of plain objects.\n\t */\n\t[mantleCodeBlockValueBrand]: true;\n\t/**\n\t * The language used for syntax highlighting.\n\t */\n\tlanguage: SupportedLanguage;\n\t/**\n\t * The original code string (used by the copy button).\n\t */\n\tcode: string;\n\t/**\n\t * Fully pre-rendered Shiki HTML injected by the Vite plugin or server highlighter.\n\t * This must be present for rendering.\n\t *\n\t * **Security:** This HTML is injected via `dangerouslySetInnerHTML`. It must\n\t * come from a trusted source (Shiki output from the Vite plugin or\n\t * `createMantleServerSyntaxHighlighter`). Never pass unsanitized user input.\n\t */\n\t\"~preHtml\"?: string | undefined;\n\t/**\n\t * Runtime values used to replace `SHIKI_VAL_N` placeholders in `~preHtml`.\n\t * This enables interpolated template expressions while preserving build-time highlighting.\n\t */\n\t\"~preVals\"?: unknown[] | undefined;\n\t/**\n\t * Placeholder token prefix used by the Vite transform for interpolated values.\n\t * When omitted, CodeBlock falls back to the legacy `SHIKI_VAL_<n>` format.\n\t */\n\t\"~preValToken\"?: string | undefined;\n\t/**\n\t * Optional default for line-number rendering when this value is displayed.\n\t */\n\t\"~showLineNumbers\"?: boolean | undefined;\n\t/**\n\t * Optional default highlighted line numbers/ranges when this value is displayed.\n\t */\n\t\"~highlightLines\"?: (LineRange | number)[] | undefined;\n\t/**\n\t * Optional default start line number when line numbers are displayed.\n\t * @default 1\n\t */\n\t\"~lineNumberStart\"?: number | undefined;\n};\n\n/** Maps each key starting with `OldPrefix` to `NewPrefix`, leaving other keys unchanged. */\ntype ReplacePrefix<T, OldPrefix extends string, NewPrefix extends string> = {\n\t[K in keyof T as K extends `${OldPrefix}${infer Rest}` ? `${NewPrefix}${Rest}` : K]: T[K];\n};\n\n/** Public input shape for `createMantleCodeBlockValue`, with `~`-prefixed keys renamed to unprefixed. */\ntype MantleCodeBlockValueInput = ReplacePrefix<\n\tOmit<MantleCodeBlockValue, typeof mantleCodeBlockValueBrand>,\n\t\"~\",\n\t\"\"\n>;\n\n/** Options for configuring line numbers, highlights, and indentation in `mantleCode()`. */\ntype MantleCodeOptions = {\n\t/** Line numbers or ranges to visually highlight in the code block. */\n\thighlightLines?: (LineRange | number)[] | undefined;\n\t/** The indentation style to use when normalizing the code string. */\n\tindentation?: Indentation | undefined;\n\t/**\n\t * The starting line number when line numbers are displayed.\n\t * @default 1\n\t */\n\tlineNumberStart?: number | undefined;\n\t/**\n\t * Whether to show line numbers in the code block. Defaults to `true` for most\n\t * languages, but `false` for single-line shell snippets (`bash`, `sh`, `shell`).\n\t */\n\tshowLineNumbers?: boolean | undefined;\n};\n\n/**\n * Creates a `MantleCodeBlockValue` for use with `CodeBlock.Code`.\n *\n * **Security:** The `preHtml` field is rendered via `dangerouslySetInnerHTML`.\n * Only pass HTML produced by Shiki (via the Vite plugin or\n * `createMantleServerSyntaxHighlighter`). Never pass unsanitized user input as `preHtml`.\n */\nfunction createMantleCodeBlockValue({\n\tpreHtml,\n\tpreValToken,\n\tpreVals,\n\thighlightLines,\n\tlineNumberStart,\n\tshowLineNumbers,\n\tcode,\n\tlanguage,\n}: MantleCodeBlockValueInput): MantleCodeBlockValue {\n\treturn {\n\t\t[mantleCodeBlockValueBrand]: true,\n\t\tlanguage,\n\t\tcode,\n\t\t\"~preHtml\": preHtml,\n\t\t\"~preValToken\": preValToken,\n\t\t\"~preVals\": preVals,\n\t\t\"~highlightLines\": highlightLines,\n\t\t\"~lineNumberStart\": lineNumberStart,\n\t\t\"~showLineNumbers\": showLineNumbers,\n\t};\n}\n\n/** Joins a `TemplateStringsArray` and its interpolated values into a single code string. */\nfunction buildCodeFromTemplate(strings: TemplateStringsArray, values: unknown[]): string {\n\tlet code = \"\";\n\tfor (let index = 0; index < strings.length; index += 1) {\n\t\tcode += strings[index] ?? \"\";\n\t\tif (index < values.length) {\n\t\t\tcode += String(values[index]);\n\t\t}\n\t}\n\treturn code;\n}\n\n/**\n * Tagged template literal for Shiki syntax highlighting.\n *\n * Returns a `MantleCodeBlockValue` that `CodeBlock.Code` renders.\n * The Vite transform plugin rewrites calls to this function at build time,\n * inlining pre-rendered Shiki HTML so that no highlighting work happens in the browser.\n * Configure it via `mantleCodeBlockPlugins()` in `vite.config.ts`.\n *\n * Interpolated template expressions are supported via placeholder substitution.\n *\n * Line numbers are shown by default (`showLineNumbers` defaults to `true`),\n * except for single-line shell snippets (`bash`, `sh`, `shell`) where they default to `false`.\n *\n * @example\n * ```tsx\n * // Static string (line numbers shown by default)\n * mantleCode(\"typescript\")`const x: string = \"hello\";`\n * // Interpolated string\n * mantleCode(\"typescript\")`const greeting = \"Hello, ${name}!\";`\n * // Disable line numbers\n * mantleCode(\"typescript\", { showLineNumbers: false })`const x = 1;`\n * // Single-line shell — line numbers hidden by default\n * mantleCode(\"bash\")`npm install @ngrok/mantle`\n * ```\n */\nfunction mantleCode(\n\tlanguage: SupportedLanguage,\n\toptions: MantleCodeOptions = {},\n): (strings: TemplateStringsArray, ...values: unknown[]) => MantleCodeBlockValue {\n\tconst { showLineNumbers, highlightLines, lineNumberStart } = options;\n\n\treturn (strings, ...values) => {\n\t\tconst code = buildCodeFromTemplate(strings, values);\n\n\t\treturn createMantleCodeBlockValue({\n\t\t\tlanguage,\n\t\t\tcode,\n\t\t\tpreHtml: undefined,\n\t\t\tpreVals: values.length > 0 ? values : undefined,\n\t\t\thighlightLines,\n\t\t\tlineNumberStart,\n\t\t\tshowLineNumbers: showLineNumbers ?? defaultShowLineNumbers(language, code),\n\t\t});\n\t};\n}\n\nexport { defaultShowLineNumbers, mantleCode };\nexport { createMantleCodeBlockValue };\nexport type { MantleCodeBlockValue, MantleCodeOptions };\n","/**\n * A line range is a string in the format of `start-end` where `start` and `end` are line numbers.\n */\nexport type LineRange = `${number}-${number}`;\n\nconst MAX_EXPANDED_LINE_RANGE_LENGTH = 1_000;\n\n/**\n * Given a list of line ranges and numbers, resolves them into a unique list of line numbers as a set.\n *\n * @example\n * ```tsx\n * const highlightedLines = resolveLineNumbers(1, \"3-5\", 7, \"10-12\");\n * // Returns: Set {1, 3, 4, 5, 7, 10, 11, 12}\n *\n * const singleLine = resolveLineNumbers(42);\n * // Returns: Set {42}\n * ```\n */\nexport function resolveLineNumbers(...items: (LineRange | number)[]): Set<number> {\n\tconst lineNumberSet = new Set<number>();\n\n\tfor (const item of items) {\n\t\tif (typeof item === \"number\") {\n\t\t\tif (!isPositiveLineNumber(item)) {\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\t// only support integer line numbers\n\t\t\tconst int = Math.floor(item);\n\t\t\tlineNumberSet.add(int);\n\t\t} else {\n\t\t\tconst separatorIndex = item.indexOf(\"-\");\n\t\t\tconst startPart = item.slice(0, separatorIndex);\n\t\t\tconst endPart = item.slice(separatorIndex + 1);\n\t\t\tlet start = Number.parseInt(startPart, 10);\n\t\t\tlet end = Number.parseInt(endPart, 10);\n\n\t\t\t// ignore invalid ranges that don't contain valid line numbers\n\t\t\tif (!isPositiveLineNumber(start) || !isPositiveLineNumber(end)) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t// swap start and end if they are backwards\n\t\t\tif (start > end) {\n\t\t\t\t[start, end] = [end, start];\n\t\t\t}\n\n\t\t\tif (end - start + 1 > MAX_EXPANDED_LINE_RANGE_LENGTH) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t// add all line numbers in the range, inclusive\n\t\t\tfor (let i = start; i <= end; i++) {\n\t\t\t\tlineNumberSet.add(i);\n\t\t\t}\n\t\t}\n\t}\n\n\treturn lineNumberSet;\n}\n\n/**\n * Type Predicate: checks if a value is a positive, finite integer.\n */\nconst isPositiveLineNumber = (value: number | undefined): value is number =>\n\tvalue != null && !Number.isNaN(value) && value > 0 && Number.isFinite(value);\n","import type { LineRange } from \"./line-numbers.js\";\nimport { resolveLineNumbers } from \"./line-numbers.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/** Removes trailing `\\n` and `\\r` characters from the end of a string. */\nfunction trimTrailingNewlines(input: string): string {\n\tlet end = input.length;\n\twhile (end > 0 && (input.charCodeAt(end - 1) === 10 || input.charCodeAt(end - 1) === 13)) {\n\t\tend -= 1;\n\t}\n\treturn end === input.length ? input : input.slice(0, end);\n}\n\n/** Splits Shiki-highlighted HTML into per-line content, unwrapping `<span class=\"line\">` wrappers. */\nfunction splitHighlightedHtmlIntoLines(html: string): string[] {\n\tconst normalizedHtml = trimTrailingNewlines(html).replaceAll(\"\\r\\n\", \"\\n\").replaceAll(\"\\r\", \"\\n\");\n\tconst shikiLines = normalizedHtml.split(\"\\n\");\n\tconst linePrefix = '<span class=\"line\">';\n\tconst lineSuffix = \"</span>\";\n\n\tfor (let i = 0; i < shikiLines.length; i++) {\n\t\tconst line = shikiLines[i] ?? \"\";\n\t\tif (line.startsWith(linePrefix) && line.endsWith(lineSuffix)) {\n\t\t\tshikiLines[i] = line.slice(linePrefix.length, line.length - lineSuffix.length);\n\t\t}\n\t}\n\n\treturn shikiLines;\n}\n\n/** Input for {@link decorateHighlightedHtml}. */\ntype DecorateHighlightedHtmlInput = {\n\thighlightLines?: (LineRange | number)[] | undefined;\n\thtml: string;\n\tlineNumberStart?: number | undefined;\n\tshowLineNumbers?: boolean | undefined;\n};\n\n/**\n * Wraps each line of Shiki-highlighted HTML in Mantle's line-number and\n * line-highlight markup, producing the final HTML rendered by `CodeBlock.Code`.\n */\nfunction decorateHighlightedHtml({\n\thighlightLines,\n\thtml,\n\tlineNumberStart = 1,\n\tshowLineNumbers = false,\n}: DecorateHighlightedHtmlInput): string {\n\tconst highlightedLineNumbers = resolveLineNumbers(...(highlightLines ?? []));\n\tconst lines = splitHighlightedHtmlIntoLines(html);\n\tlet output = \"\";\n\tfor (let i = 0; i < lines.length; i++) {\n\t\tconst line = lines[i] ?? \"\";\n\t\tconst lineNumber = lineNumberStart + i;\n\t\tconst lineClassName = cx(\n\t\t\t\"mantle-code-line\",\n\t\t\thighlightedLineNumbers.has(lineNumber) && \"mantle-code-line-highlighted\",\n\t\t);\n\n\t\tconst lineNumberHtml = showLineNumbers\n\t\t\t? `<span class=\"mantle-code-line-number\" data-slot=\"line-number\">${lineNumber}</span>`\n\t\t\t: \"\";\n\n\t\toutput += `<span class=\"${lineClassName}\" data-line-number=\"${lineNumber}\">${lineNumberHtml}<span class=\"mantle-code-line-content\" data-slot=\"line-content\">${line === \"\" ? \" \" : line}</span></span>`;\n\t}\n\treturn output;\n}\n\nexport { decorateHighlightedHtml };\nexport type { DecorateHighlightedHtmlInput };\n","import type { SupportedLanguage } from \"./supported-languages.js\";\n\nconst indentations = [\"tabs\", \"spaces\"] as const;\ntype Indentation = (typeof indentations)[number];\n\n/**\n * Type Predicate: checks if the given value is a valid indentation type.\n */\nfunction isIndentation(input: unknown): input is Indentation {\n\treturn indentations.includes(input as Indentation);\n}\n\n/**\n * Infers the indentation type based on the language and preferred indentation.\n *\n * @param language - The language to check.\n * @param preferredIndentation - The preferred indentation type (overrides what is detected).\n */\nfunction inferIndentation(\n\tlanguage: SupportedLanguage,\n\tpreferredIndentation: Indentation | undefined,\n) {\n\t// if the user has a preferred indentation, use that regardless of the language\n\tif (preferredIndentation) {\n\t\treturn preferredIndentation;\n\t}\n\n\tif (isTabIndentedLanguage(language)) {\n\t\treturn \"tabs\";\n\t}\n\n\tif (isSpaceIndentedLanguage(language)) {\n\t\treturn \"spaces\";\n\t}\n\n\treturn \"spaces\";\n}\n\nexport {\n\t//,\n\tindentations,\n\tinferIndentation,\n\tisIndentation,\n};\n\nexport type {\n\t//,\n\tIndentation,\n};\n\n/**\n * Languages that require or strongly prefer tabs\n */\nconst tabIndentedLanguages = [\n\t\"csharp\",\n\t\"css\",\n\t\"go\",\n\t\"html\",\n\t\"java\",\n\t\"javascript\",\n\t\"js\",\n\t\"jsx\",\n\t\"ts\",\n\t\"tsx\",\n\t\"typescript\",\n\t\"xml\",\n] as const satisfies SupportedLanguage[];\n\nconst tabIndentedLanguageSet = new Set<string>(tabIndentedLanguages);\n\n/**\n * Languages that require or strongly prefer spaces\n */\nconst spaceIndentedLanguages = [\n\t\"python\",\n\t\"py\",\n\t\"yaml\",\n\t\"yml\",\n\t\"ruby\",\n\t\"rb\",\n] as const satisfies SupportedLanguage[];\n\nconst spaceIndentedLanguageSet = new Set<string>(spaceIndentedLanguages);\n\ntype TabIndentedLanguage = (typeof tabIndentedLanguages)[number];\ntype SpaceIndentedLanguage = (typeof spaceIndentedLanguages)[number];\n\n/**\n * Type Predicate: checks if the given value is a required/preferred tab-indented language.\n */\nfunction isTabIndentedLanguage(value: SupportedLanguage): value is TabIndentedLanguage {\n\treturn tabIndentedLanguageSet.has(value);\n}\n\n/**\n * Type Predicate: checks if the given value is a required/preferred space-indented language.\n */\nfunction isSpaceIndentedLanguage(value: SupportedLanguage): value is SpaceIndentedLanguage {\n\treturn spaceIndentedLanguageSet.has(value);\n}\n","import type { Indentation } from \"./indentation.js\";\n\ntype Options = {\n\t/**\n\t * The indentation type to use. Can be either \"tabs\" or \"spaces\".\n\t * @default \"spaces\"\n\t */\n\tindentation?: Indentation;\n};\n\n/**\n * Trim any leading and trailing whitespace/empty lines, convert leading\n * indentation to the given options.indentation\n */\nfunction normalizeIndentation(value: string, options?: Options): string {\n\tconst indentation = options?.indentation ?? \"spaces\";\n\tconst normalizedLineEndings = value.replace(/\\r\\n?/g, \"\\n\");\n\tconst trimmed = normalizedLineEndings.trim();\n\n\tif (trimmed === \"\") {\n\t\treturn \"\";\n\t}\n\n\tconst minIndent = findMinIndent(normalizedLineEndings);\n\tconst lines = trimmed.split(\"\\n\");\n\tconst normalizedLines = new Array<string>(lines.length);\n\n\tfor (let i = 0; i < lines.length; i++) {\n\t\tconst line = lines[i];\n\t\tif (line == null) {\n\t\t\tcontinue;\n\t\t}\n\t\tconst dedentedLine = startsWithNonWhitespace(line) ? line : line.slice(minIndent);\n\t\tnormalizedLines[i] = normalizeLeadingIndentation(dedentedLine, indentation);\n\t}\n\n\treturn normalizedLines.join(\"\\n\");\n}\n\nexport {\n\t//,\n\tnormalizeIndentation,\n};\n\n/**\n * Rewrites only the leading indentation of a non-empty line into the requested\n * indentation style, leaving the rest of the line untouched.\n */\nfunction normalizeLeadingIndentation(line: string, indentation: Indentation): string {\n\tlet indentEnd = 0;\n\twhile (indentEnd < line.length) {\n\t\tconst character = line[indentEnd];\n\t\tif (character !== \" \" && character !== \"\\t\") {\n\t\t\tbreak;\n\t\t}\n\t\tindentEnd += 1;\n\t}\n\n\tif (indentEnd === 0 || indentEnd === line.length) {\n\t\treturn line;\n\t}\n\n\tconst leadingWhitespace = line.slice(0, indentEnd);\n\tconst normalizedLeadingWhitespace =\n\t\tindentation === \"spaces\"\n\t\t\t? leadingWhitespace.replace(/\\t/g, \" \")\n\t\t\t: leadingWhitespace.replace(/ {2}/g, \"\\t\");\n\n\treturn normalizedLeadingWhitespace + line.slice(indentEnd);\n}\n\n/**\n * Returns true when a line begins with visible content instead of indentation.\n */\nfunction startsWithNonWhitespace(line: string): boolean {\n\tconst firstCharacter = line[0];\n\treturn firstCharacter != null && firstCharacter !== \" \" && firstCharacter !== \"\\t\";\n}\n\n/**\n * Find the shortest indentation of a multiline string.\n */\nfunction findMinIndent(value: string): number {\n\tlet minIndent = Number.POSITIVE_INFINITY;\n\tlet indent = 0;\n\tlet atLineStart = true;\n\n\tfor (let i = 0; i < value.length; i++) {\n\t\tconst char = value[i];\n\n\t\tif (atLineStart) {\n\t\t\tif (char === \" \" || char === \"\\t\") {\n\t\t\t\tindent += 1;\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\tif (char === \"\\n\" || char === \"\\r\") {\n\t\t\t\tindent = 0;\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tif (indent < minIndent) {\n\t\t\t\tminIndent = indent;\n\t\t\t\tif (minIndent === 0) {\n\t\t\t\t\treturn 0;\n\t\t\t\t}\n\t\t\t}\n\t\t\tatLineStart = false;\n\t\t\tcontinue;\n\t\t}\n\n\t\tif (char === \"\\n\" || char === \"\\r\") {\n\t\t\tatLineStart = true;\n\t\t\tindent = 0;\n\t\t}\n\t}\n\n\treturn minIndent === Number.POSITIVE_INFINITY ? 0 : minIndent;\n}\n","/**\n * List of supported languages for syntax highlighting.\n * @private\n */\nexport const supportedLanguages = [\n\t\"bash\",\n\t\"cs\",\n\t\"csharp\",\n\t\"css\",\n\t\"go\",\n\t\"html\",\n\t\"java\",\n\t\"javascript\",\n\t\"js\",\n\t\"json\",\n\t\"jsx\",\n\t\"plain\",\n\t\"plaintext\",\n\t\"py\",\n\t\"python\",\n\t\"rb\",\n\t\"ruby\",\n\t\"rust\",\n\t\"sh\",\n\t\"shell\",\n\t\"text\",\n\t\"ts\",\n\t\"tsx\",\n\t\"txt\",\n\t\"typescript\",\n\t\"xml\",\n\t\"yaml\",\n\t\"yml\",\n] as const;\n\n/**\n * Supported languages for syntax highlighting.\n */\ntype SupportedLanguage = (typeof supportedLanguages)[number];\nconst supportedLanguageSet = new Set<SupportedLanguage>(supportedLanguages);\nconst defaultLanguage = \"text\" satisfies SupportedLanguage;\n\n/**\n * Parses a markdown code block (```) language class into a SupportedLanguage.\n * Defaults to \"text\" if no supported language is found.\n */\nfunction parseLanguage(\n\tvalue: `language-${string}` | `lang-${string}` | (string & {}) | undefined,\n): SupportedLanguage {\n\tconst trimmed = value?.trim() ?? \"\";\n\tif (!trimmed) {\n\t\treturn defaultLanguage;\n\t}\n\n\t// remove leading \"language-\" and \"lang-\" prefixes\n\t// find first '-' and slice from there\n\tconst prefixSeparatorIndex = trimmed.indexOf(\"-\");\n\tconst maybeLanguage =\n\t\tprefixSeparatorIndex === -1 ? trimmed : trimmed.slice(prefixSeparatorIndex + 1);\n\n\treturn isSupportedLanguage(maybeLanguage) ? maybeLanguage : defaultLanguage;\n}\n\n/**\n * Type Predicate: checks if an arbitrary value is a supported syntax highlighting language.\n */\nconst isSupportedLanguage = (value: unknown): value is SupportedLanguage => {\n\treturn typeof value === \"string\" && supportedLanguageSet.has(value as SupportedLanguage);\n};\n\nexport {\n\t//,\n\tisSupportedLanguage,\n\tparseLanguage,\n};\n\nexport type { SupportedLanguage };\n","import type { LineRange } from \"./line-numbers.js\";\n\n/** Parses a boolean or `\"true\"`/`\"false\"` string into a boolean. Returns `undefined` for unrecognized values. */\nfunction parseCodeBlockShowLineNumbers(value: unknown): boolean | undefined {\n\tif (typeof value === \"boolean\") {\n\t\treturn value;\n\t}\n\tif (typeof value === \"string\") {\n\t\tif (value === \"true\") {\n\t\t\treturn true;\n\t\t}\n\t\tif (value === \"false\") {\n\t\t\treturn false;\n\t\t}\n\t}\n\treturn undefined;\n}\n\n/** Parses a positive integer (or its string representation) for the starting line number. Returns `undefined` for invalid values. */\nfunction parseCodeBlockLineNumberStart(value: unknown): number | undefined {\n\tif (typeof value === \"number\" && Number.isFinite(value) && value > 0) {\n\t\treturn Math.floor(value);\n\t}\n\tif (typeof value === \"string\" && /^\\d+$/.test(value)) {\n\t\tconst parsed = Number.parseInt(value, 10);\n\t\treturn parsed > 0 ? parsed : undefined;\n\t}\n\treturn undefined;\n}\n\n/** Parses highlight line specifications from an array or comma-separated string (e.g. `[1, \"3-5\"]` or `\"1,3-5\"`). Returns `undefined` when no valid entries are found. */\nfunction parseCodeBlockHighlightLines(value: unknown): (LineRange | number)[] | undefined {\n\tconst parseSingle = (item: unknown): LineRange | number | undefined => {\n\t\tif (typeof item === \"number\") {\n\t\t\treturn Number.isFinite(item) && item > 0 ? Math.floor(item) : undefined;\n\t\t}\n\t\tif (typeof item === \"string\") {\n\t\t\tconst trimmed = item.trim();\n\t\t\tif (/^\\d+$/.test(trimmed)) {\n\t\t\t\tconst parsed = Number.parseInt(trimmed, 10);\n\t\t\t\treturn parsed > 0 ? parsed : undefined;\n\t\t\t}\n\t\t\tif (/^\\d+-\\d+$/.test(trimmed)) {\n\t\t\t\tconst [startStr, endStr] = trimmed.split(\"-\");\n\t\t\t\tconst start = Number.parseInt(startStr ?? \"\", 10);\n\t\t\t\tconst end = Number.parseInt(endStr ?? \"\", 10);\n\t\t\t\tif (start > 0 && end > 0) {\n\t\t\t\t\treturn trimmed as LineRange;\n\t\t\t\t}\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t}\n\t\treturn undefined;\n\t};\n\n\tif (typeof value === \"string\") {\n\t\tconst parsed: (LineRange | number)[] = [];\n\t\tconst segments = value.split(\",\");\n\t\tfor (const segment of segments) {\n\t\t\tconst maybe = parseSingle(segment);\n\t\t\tif (maybe != null) {\n\t\t\t\tparsed.push(maybe);\n\t\t\t}\n\t\t}\n\t\treturn parsed.length > 0 ? parsed : undefined;\n\t}\n\n\tif (!Array.isArray(value)) {\n\t\treturn undefined;\n\t}\n\tconst parsed: (LineRange | number)[] = [];\n\tfor (const item of value) {\n\t\tconst maybe = parseSingle(item);\n\t\tif (maybe != null) {\n\t\t\tparsed.push(maybe);\n\t\t}\n\t}\n\treturn parsed.length > 0 ? parsed : undefined;\n}\n\nexport {\n\t//,\n\tparseCodeBlockHighlightLines,\n\tparseCodeBlockLineNumberStart,\n\tparseCodeBlockShowLineNumbers,\n};\n","import type { SupportedLanguage } from \"./supported-languages.js\";\nimport { isSupportedLanguage } from \"./supported-languages.js\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\nimport { type Indentation, isIndentation } from \"./indentation.js\";\nimport {\n\tparseCodeBlockHighlightLines,\n\tparseCodeBlockLineNumberStart,\n\tparseCodeBlockShowLineNumbers,\n} from \"./parse-line-options.js\";\n\nconst modes = [\n\t//,\n\t\"cli\",\n\t\"file\",\n\t\"traffic-policy\",\n] as const;\n/** The visual mode preset for a code block (determines header icon). */\ntype Mode = (typeof modes)[number];\n\n/** User-facing input shape for code block metadata (metastring key-value pairs). */\ntype MetaInput = {\n\tcollapsible?: boolean | undefined;\n\tdisableCopy?: boolean | undefined;\n\tindentation?: Indentation | undefined;\n\tmode?: Mode | undefined;\n\ttitle?: string | undefined;\n};\n\n/** Resolved code block metadata with defaults applied. */\ntype Meta = {\n\tcollapsible: boolean;\n\tdisableCopy: boolean;\n\tindentation?: Indentation | undefined;\n\tmode?: Mode | undefined;\n\ttitle?: string | undefined;\n};\n\nconst defaultMeta = {\n\tcollapsible: false,\n\tdisableCopy: false,\n\tindentation: undefined,\n\tmode: undefined,\n\ttitle: undefined,\n} as const satisfies Meta;\n\n/** The type of the default metadata constant. */\ntype DefaultMeta = typeof defaultMeta;\n\n/** Parses a code fence metastring (e.g. `title=\"example\" collapsible`) into a structured `Meta` object. */\nfunction parseMetastring(input: string | undefined): Meta {\n\tconst metastring = input?.trim() ?? \"\";\n\tif (!metastring) {\n\t\treturn defaultMeta;\n\t}\n\n\tconst metaJson: Record<string, unknown> = {};\n\tconst tokens = tokenizeMetastring(metastring);\n\tfor (const token of tokens) {\n\t\tconst separatorIndex = token.indexOf(\"=\");\n\t\tconst key = separatorIndex === -1 ? token : token.slice(0, separatorIndex);\n\t\tconst value = separatorIndex === -1 ? undefined : token.slice(separatorIndex + 1);\n\n\t\tif (!key) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tconst normalized = normalizeValue(value);\n\t\tmetaJson[key] = normalized ?? true;\n\t}\n\n\treturn parseMetaJson(metaJson);\n}\n\n/** Strips surrounding double-quotes and trims whitespace from a metastring value. */\nfunction normalizeValue(value: string | undefined) {\n\tif (value == null) {\n\t\treturn undefined;\n\t}\n\tconst trimmed = value.trim();\n\tconst lastIndex = trimmed.length - 1;\n\tif (lastIndex >= 1 && trimmed.charCodeAt(0) === 34 && trimmed.charCodeAt(lastIndex) === 34) {\n\t\treturn trimmed.slice(1, lastIndex);\n\t}\n\treturn trimmed;\n}\n\n/** Splits a metastring into whitespace-delimited tokens, respecting double-quoted segments. */\nfunction tokenizeMetastring(value: string | undefined): string[] {\n\tconst input = value?.trim() ?? \"\";\n\tconst result: string[] = [];\n\n\tlet current = \"\";\n\tlet inQuotes = false;\n\n\tfor (let i = 0; i < input.length; i++) {\n\t\tconst char = input[i] ?? \"\";\n\t\tif (!inQuotes && isMetastringWhitespace(char)) {\n\t\t\tif (current) {\n\t\t\t\tresult.push(current);\n\t\t\t\tcurrent = \"\";\n\t\t\t}\n\t\t} else if (char === '\"') {\n\t\t\tinQuotes = !inQuotes;\n\t\t\tcurrent += char;\n\t\t} else {\n\t\t\tcurrent += char;\n\t\t}\n\t}\n\n\tif (current) {\n\t\tresult.push(current);\n\t}\n\n\treturn result;\n}\n\n/** Returns `true` for the ASCII whitespace characters a metastring may use to separate tokens. */\nfunction isMetastringWhitespace(char: string): boolean {\n\treturn char === \" \" || char === \"\\t\" || char === \"\\n\" || char === \"\\r\";\n}\n\n/** Type predicate: checks if a value is a valid code block `Mode`. */\nfunction isMode(input: unknown): input is Mode {\n\treturn input === \"cli\" || input === \"file\" || input === \"traffic-policy\";\n}\n\n/** Converts a raw key-value record (from tokenized metastring) into a validated `Meta` object. */\nfunction parseMetaJson(input: Record<string, unknown>): Meta {\n\tconst {\n\t\tcollapsible = defaultMeta.collapsible,\n\t\tdisableCopy = defaultMeta.disableCopy,\n\t\tindentation = defaultMeta.indentation,\n\t\tmode = defaultMeta.mode,\n\t\ttitle = defaultMeta.title,\n\t} = input;\n\n\treturn {\n\t\tcollapsible:\n\t\t\ttypeof collapsible === \"string\" || typeof collapsible === \"boolean\"\n\t\t\t\t? parseBooleanish(collapsible)\n\t\t\t\t: defaultMeta.collapsible,\n\t\tdisableCopy:\n\t\t\ttypeof disableCopy === \"string\" || typeof disableCopy === \"boolean\"\n\t\t\t\t? parseBooleanish(disableCopy)\n\t\t\t\t: defaultMeta.disableCopy,\n\t\tindentation: isIndentation(indentation) ? indentation : defaultMeta.indentation,\n\t\tmode: isMode(mode) ? mode : defaultMeta.mode,\n\t\ttitle: typeof title === \"string\" ? title.trim() : defaultMeta.title,\n\t};\n}\n\n/** Props that the rehype plugin attaches to `<pre>` elements for pre-rendered code blocks. */\ntype ResolvePreRenderedCodeBlockPropsInput = {\n\tcollapsible?: unknown;\n\tdisableCopy?: unknown;\n\tmantleCode?: unknown;\n\tmantleCollapsible?: unknown;\n\tmantleDisableCopy?: unknown;\n\tmantleHighlightLines?: unknown;\n\tmantleLanguage?: unknown;\n\tmantleLineNumberStart?: unknown;\n\tmantleMode?: unknown;\n\tmantlePreHtml?: unknown;\n\tmantleShowLineNumbers?: unknown;\n\tmantleTitle?: unknown;\n\tmode?: unknown;\n\ttitle?: unknown;\n};\n\n/** Combined input type for a `<pre>` element that may carry both metastring and pre-rendered props. */\ntype CodeBlockPreElementInput = MetaInput & ResolvePreRenderedCodeBlockPropsInput;\n\ntype PreRenderedCodeBlockPropKey = keyof ResolvePreRenderedCodeBlockPropsInput;\n\n/** Normalized code block props extracted from pre-rendered `<pre>` element attributes. */\ntype ResolvedPreRenderedCodeBlockProps = {\n\tcode: string | undefined;\n\tcollapsible: boolean | undefined;\n\tdisableCopy: boolean | undefined;\n\thighlightLines: (number | `${number}-${number}`)[] | undefined;\n\tlanguage: SupportedLanguage | undefined;\n\tlineNumberStart: number | undefined;\n\tmode: Mode | undefined;\n\tpreHtml: string | undefined;\n\trawLanguage: unknown;\n\tshowLineNumbers: boolean | undefined;\n\ttitle: string | undefined;\n};\n\n/** Result of {@link resolvePreRenderedCodeBlockProps}: extracted Mantle props and remaining pass-through props. */\ntype ResolvePreRenderedCodeBlockPropsResult<T extends Record<string, unknown>> = {\n\tmantleCode: ResolvedPreRenderedCodeBlockProps | undefined;\n\tprops: Omit<T, PreRenderedCodeBlockPropKey>;\n};\n\n/**\n * Extracts and normalizes `mantle*` props from a `<pre>` element's attributes,\n * separating them from pass-through props. Returns `undefined` for the Mantle\n * payload when no pre-rendered attributes are present.\n */\nfunction resolvePreRenderedCodeBlockProps<\n\tT extends ResolvePreRenderedCodeBlockPropsInput & Record<string, unknown>,\n>(input: T): ResolvePreRenderedCodeBlockPropsResult<T> {\n\tconst {\n\t\tcollapsible,\n\t\tdisableCopy,\n\t\tmantleCode,\n\t\tmantleCollapsible,\n\t\tmantleDisableCopy,\n\t\tmantleHighlightLines,\n\t\tmantleLanguage,\n\t\tmantleLineNumberStart,\n\t\tmantleMode,\n\t\tmantlePreHtml,\n\t\tmantleShowLineNumbers,\n\t\tmantleTitle,\n\t\tmode,\n\t\ttitle,\n\t\t...props\n\t} = input;\n\n\tconst hasPayload =\n\t\tmantleLanguage != null ||\n\t\tmantleCode != null ||\n\t\tmantlePreHtml != null ||\n\t\tmantleShowLineNumbers != null ||\n\t\tmantleHighlightLines != null ||\n\t\tmantleLineNumberStart != null ||\n\t\tmantleCollapsible != null ||\n\t\tmantleDisableCopy != null ||\n\t\tmantleMode != null ||\n\t\tmantleTitle != null;\n\n\tif (!hasPayload) {\n\t\treturn {\n\t\t\tmantleCode: undefined,\n\t\t\tprops: props as Omit<T, PreRenderedCodeBlockPropKey>,\n\t\t};\n\t}\n\n\treturn {\n\t\tmantleCode: {\n\t\t\tcode: typeof mantleCode === \"string\" ? mantleCode : undefined,\n\t\t\tcollapsible:\n\t\t\t\t(typeof mantleCollapsible === \"string\" || typeof mantleCollapsible === \"boolean\"\n\t\t\t\t\t? parseBooleanish(mantleCollapsible)\n\t\t\t\t\t: undefined) ??\n\t\t\t\t(typeof collapsible === \"string\" || typeof collapsible === \"boolean\"\n\t\t\t\t\t? parseBooleanish(collapsible)\n\t\t\t\t\t: undefined),\n\t\t\tdisableCopy:\n\t\t\t\ttypeof mantleDisableCopy === \"string\" || typeof mantleDisableCopy === \"boolean\"\n\t\t\t\t\t? parseBooleanish(mantleDisableCopy)\n\t\t\t\t\t: typeof disableCopy === \"string\" || typeof disableCopy === \"boolean\"\n\t\t\t\t\t\t? parseBooleanish(disableCopy)\n\t\t\t\t\t\t: undefined,\n\t\t\thighlightLines: parseCodeBlockHighlightLines(mantleHighlightLines),\n\t\t\tlanguage:\n\t\t\t\ttypeof mantleLanguage === \"string\" && isSupportedLanguage(mantleLanguage)\n\t\t\t\t\t? mantleLanguage\n\t\t\t\t\t: undefined,\n\t\t\tlineNumberStart: parseCodeBlockLineNumberStart(mantleLineNumberStart),\n\t\t\tmode: isMode(mantleMode) ? mantleMode : isMode(mode) ? mode : undefined,\n\t\t\tpreHtml: typeof mantlePreHtml === \"string\" ? mantlePreHtml : undefined,\n\t\t\trawLanguage: mantleLanguage,\n\t\t\tshowLineNumbers: parseCodeBlockShowLineNumbers(mantleShowLineNumbers),\n\t\t\ttitle:\n\t\t\t\ttypeof mantleTitle === \"string\"\n\t\t\t\t\t? mantleTitle.trim()\n\t\t\t\t\t: typeof title === \"string\"\n\t\t\t\t\t\t? title.trim()\n\t\t\t\t\t\t: undefined,\n\t\t},\n\t\tprops: props as Omit<T, PreRenderedCodeBlockPropKey>,\n\t};\n}\n\nexport { resolvePreRenderedCodeBlockProps };\nexport {\n\t//,\n\tdefaultMeta,\n\tnormalizeValue,\n\tparseMetastring,\n\ttokenizeMetastring,\n};\n\nexport type {\n\tCodeBlockPreElementInput,\n\tDefaultMeta,\n\tMeta,\n\tMetaInput,\n\tMode,\n\tResolvePreRenderedCodeBlockPropsInput,\n\tResolvePreRenderedCodeBlockPropsResult,\n\tResolvedPreRenderedCodeBlockProps,\n};\n"],"mappings":"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"}
|
package/dist/select-DOgdZO0Q.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-bWc5yC3-.js";import{t as n}from"./compose-refs-DZ3cPi47.js";import{n as r}from"./separator-DSOIrnhj.js";import{CaretDownIcon as i}from"@phosphor-icons/react/CaretDown";import{createContext as a,forwardRef as o,useContext as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{CheckIcon as u}from"@phosphor-icons/react/Check";import{CaretUpIcon as d}from"@phosphor-icons/react/CaretUp";import*as f from"@radix-ui/react-select";const p=a({}),m=o(({"aria-invalid":e,children:t,id:n,validation:r,onBlur:i,onValueChange:a,onChange:o,...s},l)=>c(f.Root,{...s,onValueChange:e=>{o?.(e),a?.(e)},children:c(p.Provider,{value:{"aria-invalid":e,id:n,validation:r,onBlur:i,ref:l},children:t})}));m.displayName=`Select`;const h=o(({className:t,...n},r)=>c(f.Group,{ref:r,"data-slot":`select-group`,className:e(`space-y-px`,t),...n}));h.displayName=`SelectGroup`;const g=f.Value;g.displayName=`SelectValue`;const _=o(({"aria-invalid":r,className:a,children:o,id:u,validation:d,...m},h)=>{let g=s(p),_=g[`aria-invalid`]??r,v=_!=null&&_!==`false`,y=g.validation??d,b=v?`error`:typeof y==`function`?y():y,x=_??b===`error`,S=g.id??u;return l(f.Trigger,{"aria-invalid":x,"data-slot":`select-trigger`,className:e(`h-9 text-sm`,`border-form bg-form text-strong font-sans placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left`,`hover:border-neutral-400`,`focus:outline-hidden focus:ring-4 aria-expanded:ring-4`,`focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger`,a),"data-validation":b||void 0,id:S,ref:n(h,g.ref),...m,children:[o,c(f.Icon,{asChild:!0,children:c(t,{svg:c(i,{weight:`bold`}),className:`size-4`})})]})});_.displayName=`SelectTrigger`;const v=o(({className:n,...r},i)=>c(f.ScrollUpButton,{ref:i,className:e(`flex cursor-default items-center justify-center py-1`,n),...r,children:c(t,{svg:c(d,{weight:`bold`}),className:`size-4`})}));v.displayName=`SelectScrollUpButton`;const y=o(({className:n,...r},a)=>c(f.ScrollDownButton,{ref:a,className:e(`flex cursor-default items-center justify-center py-1`,n),...r,children:c(t,{svg:c(i,{weight:`bold`}),className:`size-4`})}));y.displayName=`SelectScrollDownButton`;const b=o(({className:t,children:n,position:r=`popper`,width:i=`trigger`,...a},o)=>c(f.Portal,{children:l(f.Content,{ref:o,"data-slot":`select-content`,className:e(`border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md`,`bg-popover font-sans`,r===`popper`&&`data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-(--radix-select-content-available-height)`,i===`trigger`&&`w-(--radix-select-trigger-width)`,t),position:r,...a,children:[c(v,{}),c(f.Viewport,{className:e(`p-1 space-y-px`,r===`popper`&&`h-(--radix-select-trigger-height) w-full`),children:n}),c(y,{})]})}));b.displayName=`SelectContent`;const x=o(({className:t,...n},r)=>c(f.Label,{ref:r,"data-slot":`select-label`,className:e(`px-2 py-1.5 text-sm font-medium`,t),...n}));x.displayName=`SelectLabel`;const S=o(({className:n,children:r,icon:i,...a},o)=>l(f.Item,{ref:o,"data-slot":`select-item`,className:e(`relative flex gap-2 w-full cursor-pointer select-none items-center rounded-md py-1.5 pl-2 pr-8 text-strong text-sm outline-hidden`,`focus:bg-active-menu-item`,`data-disabled:pointer-events-none data-disabled:opacity-50`,`data-state-checked:bg-selected-menu-item`,`focus:data-state-checked:bg-active-selected-menu-item`,n),...a,children:[i&&c(t,{svg:i}),c(f.ItemText,{children:r}),c(f.ItemIndicator,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,children:c(t,{svg:c(u,{weight:`bold`}),className:`size-4 text-accent-600`})})]}));S.displayName=`SelectItem`;const C=o(({className:t,...n},i)=>c(r,{ref:i,"data-slot":`select-separator`,className:e(`-mx-1 my-1 h-px w-auto`,t),...n}));C.displayName=`SelectSeparator`;const w={Root:m,Content:b,Group:h,Item:S,Label:x,Separator:C,Trigger:_,Value:g};export{w as t};
|
|
2
|
-
//# sourceMappingURL=select-DOgdZO0Q.js.map
|