@ngrok/mantle 0.77.0 → 0.79.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion.d.ts +63 -21
- package/dist/accordion.js +1 -1
- package/dist/agent.json +4 -1
- package/dist/alert-dialog.d.ts +102 -70
- package/dist/alert-dialog.js +1 -1
- package/dist/alert.d.ts +39 -39
- package/dist/alert.js +1 -1
- package/dist/{anchor-BtgEJoPN.js → anchor-C_tjSVy6.js} +1 -1
- package/dist/anchor.d.ts +3 -4
- package/dist/anchor.js +1 -1
- package/dist/{as-child-uN_018tj.d.ts → as-child-CYEVu1WY.d.ts} +0 -7
- package/dist/badge.d.ts +5 -56
- package/dist/badge.js +1 -1
- package/dist/breadcrumb.d.ts +212 -0
- package/dist/breadcrumb.js +1 -0
- package/dist/browser-only.d.ts +2 -6
- package/dist/{button-CERx95KE.js → button-5t6-JS_I.js} +1 -1
- package/dist/button-ClC60Nzg.js +1 -0
- package/dist/button-DcXOWUYo.d.ts +131 -0
- package/dist/button.d.ts +6 -4
- package/dist/button.js +1 -1
- package/dist/calendar.d.ts +2 -8
- package/dist/calendar.js +1 -1
- package/dist/card.d.ts +8 -8
- package/dist/card.js +1 -1
- package/dist/centered-layout.d.ts +147 -0
- package/dist/centered-layout.js +1 -0
- package/dist/checkbox-DJ2xl7Rc.js +1 -0
- package/dist/checkbox.d.ts +9 -11
- package/dist/checkbox.js +1 -1
- package/dist/{choice-D6S38dPs.js → choice-DOdyNzFC.js} +1 -1
- package/dist/choice.d.ts +16 -14
- package/dist/choice.js +1 -1
- package/dist/code-block.d.ts +5 -17
- package/dist/code-block.js +1 -1
- package/dist/code-block_highlight-utils.d.ts +1 -1
- package/dist/code-block_highlight-utils.js +1 -1
- package/dist/code.d.ts +4 -5
- package/dist/code.js +1 -1
- package/dist/combobox.d.ts +40 -19
- package/dist/combobox.js +1 -1
- package/dist/command.d.ts +71 -49
- package/dist/command.js +1 -1
- package/dist/cx-IiQEAKf5.js +1 -0
- package/dist/cx.js +1 -1
- package/dist/data-slot-CChfb_cv.d.ts +17 -0
- package/dist/data-table.d.ts +77 -137
- package/dist/data-table.js +1 -1
- package/dist/description-list.d.ts +7 -7
- package/dist/description-list.js +1 -1
- package/dist/{dialog-uyJcNks7.js → dialog-ZCgG41hx.js} +1 -1
- package/dist/dialog.d.ts +213 -88
- package/dist/dialog.js +1 -1
- package/dist/{direction-CcTY0FmA.d.ts → direction-BjU0bPST.d.ts} +1 -1
- package/dist/{dropdown-menu-OEuW4GLp.js → dropdown-menu-ByUQkAvJ.js} +1 -1
- package/dist/{dropdown-menu-CADgs9gz.d.ts → dropdown-menu-DMNw8ItM.d.ts} +26 -27
- package/dist/dropdown-menu.d.ts +2 -1
- package/dist/dropdown-menu.js +1 -1
- package/dist/empty.d.ts +139 -59
- package/dist/empty.js +1 -1
- package/dist/{field-context-4k1kI7Bo.js → field-context-BR01g789.js} +1 -1
- package/dist/field.d.ts +41 -36
- package/dist/field.js +1 -1
- package/dist/flag.d.ts +2 -9
- package/dist/flag.js +1 -1
- package/dist/hooks.d.ts +13 -15
- package/dist/hooks.js +1 -1
- package/dist/hover-card.d.ts +42 -20
- package/dist/hover-card.js +1 -1
- package/dist/icon-CDtYjF_H.js +1 -0
- package/dist/{icon-n49kOh4_.d.ts → icon-Cevjo93X.d.ts} +2 -3
- package/dist/{icon-button-D7hs6bX2.d.ts → icon-button-B7uEj1qq.d.ts} +73 -11
- package/dist/icon-button-DV2-GZHf.js +1 -0
- package/dist/icon.d.ts +3 -3
- package/dist/icon.js +1 -1
- package/dist/icons.d.ts +7 -19
- package/dist/icons.js +1 -1
- package/dist/{in-view-bItE1fkG.d.ts → in-view-nkSOdED2.d.ts} +1 -6
- package/dist/{index-CTU6apE6.d.ts → index-BivvYYs-.d.ts} +8 -7
- package/dist/{index-Bed_XLWa.d.ts → index-D47aqlpz.d.ts} +3 -2
- package/dist/index-DZRbVkZa.d.ts +1 -0
- package/dist/index-Rv8RL7xy.d.ts +25 -0
- package/dist/{input-B3TS9yAP.js → input-Ct1YOqSy.js} +1 -1
- package/dist/input.d.ts +10 -11
- package/dist/input.js +1 -1
- package/dist/intents-DdSKSj1c.d.ts +28 -0
- package/dist/{kbd-D6k4Dnrf.js → kbd-K8iaZ-Ti.js} +1 -1
- package/dist/kbd.d.ts +3 -8
- package/dist/kbd.js +1 -1
- package/dist/{label-BLXfnQmn.js → label-BMlHW_2D.js} +1 -1
- package/dist/{label-PY0qM0G5.d.ts → label-v2-bv98k.d.ts} +1 -1
- package/dist/label.d.ts +1 -1
- package/dist/label.js +1 -1
- package/dist/list.d.ts +18 -60
- package/dist/list.js +1 -1
- package/dist/llms.txt +4 -1
- package/dist/main.d.ts +4 -27
- package/dist/main.js +1 -1
- package/dist/mantle.css +6 -6
- package/dist/media-object.d.ts +6 -7
- package/dist/media-object.js +1 -1
- package/dist/multi-select.d.ts +80 -33
- package/dist/multi-select.js +1 -1
- package/dist/otp-input.d.ts +7 -8
- package/dist/otp-input.js +1 -1
- package/dist/pagination.d.ts +11 -22
- package/dist/pagination.js +1 -1
- package/dist/{popover-Bq52EC7X.js → popover-D5WxxnBY.js} +1 -1
- package/dist/popover.d.ts +17 -18
- package/dist/popover.js +1 -1
- package/dist/{primitive-FoWela9a.d.ts → primitive-C64-m48O.d.ts} +0 -1
- package/dist/{primitive-BuVqb6zf.js → primitive-M-kZdNIS.js} +1 -1
- package/dist/progress.d.ts +55 -46
- package/dist/progress.js +1 -1
- package/dist/qr-code.d.ts +10 -9
- package/dist/qr-code.js +1 -1
- package/dist/radio-group.d.ts +71 -60
- package/dist/radio-group.js +1 -1
- package/dist/{resolve-pre-rendered-props-DxJ9-DAl.d.ts → resolve-pre-rendered-props-B6OlZrSI.d.ts} +13 -26
- package/dist/{resolve-pre-rendered-props-DwIF_M_K.js → resolve-pre-rendered-props-C3e5Auo3.js} +1 -1
- package/dist/sandboxed-on-click.d.ts +4 -8
- package/dist/sandboxed-on-click.js +1 -1
- package/dist/{select-BUGOJMER.d.ts → select-Bwt2YduR.d.ts} +11 -12
- package/dist/{select-Bxq_N-_o.js → select-D-5u0Blc.js} +1 -1
- package/dist/select.d.ts +1 -1
- package/dist/select.js +1 -1
- package/dist/selectable-list.d.ts +160 -146
- package/dist/selectable-list.js +1 -1
- package/dist/{separator-CqohKk4z.js → separator-kBnnv3Cw.js} +1 -1
- package/dist/separator.d.ts +6 -37
- package/dist/separator.js +1 -1
- package/dist/sheet.d.ts +302 -89
- package/dist/sheet.js +1 -1
- package/dist/sizes-BCoI4bhP.d.ts +29 -0
- package/dist/skeleton-Bu3tgNcW.js +1 -0
- package/dist/skeleton.d.ts +2 -2
- package/dist/skeleton.js +1 -1
- package/dist/skip-to-main-link.d.ts +4 -34
- package/dist/skip-to-main-link.js +1 -1
- package/dist/slider.d.ts +2 -21
- package/dist/slider.js +1 -1
- package/dist/slot-DmPrjM7N.js +1 -0
- package/dist/slot.d.ts +1 -1
- package/dist/slot.js +1 -1
- package/dist/split-button.d.ts +21 -13
- package/dist/split-button.js +1 -1
- package/dist/{svg-only-f6ToFLH0.d.ts → svg-only-BFeFS1aa.d.ts} +2 -3
- package/dist/{svg-only-CSOaF1tL.js → svg-only-DDx6FtJd.js} +1 -1
- package/dist/switch.d.ts +4 -5
- package/dist/switch.js +1 -1
- package/dist/{table-CAitdL78.js → table-CPH2md2-.js} +1 -1
- package/dist/{table-BWD9IlIN.d.ts → table-CwFHXC-G.d.ts} +10 -10
- package/dist/table.d.ts +1 -1
- package/dist/table.js +1 -1
- package/dist/tabs.d.ts +29 -15
- package/dist/tabs.js +1 -1
- package/dist/text-area.d.ts +2 -3
- package/dist/text-area.js +1 -1
- package/dist/theme-D8kZCOzM.js +1 -0
- package/dist/theme-provider-Djj_jBo6.js +1 -0
- package/dist/theme-switcher.d.ts +53 -0
- package/dist/theme-switcher.js +1 -0
- package/dist/theme.d.ts +15 -101
- package/dist/theme.js +1 -1
- package/dist/toast-D3ntBmn4.js +1 -0
- package/dist/toast.d.ts +32 -50
- package/dist/toast.js +1 -1
- package/dist/tooltip.d.ts +16 -50
- package/dist/tooltip.js +1 -1
- package/dist/{types-CTam1uIW.d.ts → types-C19IR7jf.d.ts} +1 -0
- package/dist/{types-BvUzforF.d.ts → types-D1RY5Tcj.d.ts} +0 -1
- package/dist/types.d.ts +3 -3
- package/dist/use-prefers-reduced-motion-CagaNRgm.js +1 -0
- package/dist/utils.d.ts +2 -3
- package/dist/{validation-xyX_6kph.d.ts → validation-7QeiTFwl.d.ts} +3 -12
- package/dist/{validation-DCyx-ceH.js → validation-Bpptk_9t.js} +1 -1
- package/dist/{virtual-PBNiHjMK.js → virtual-DZMBu7Ch.js} +1 -1
- package/dist/well.d.ts +3 -3
- package/dist/well.js +1 -1
- package/dist/{with-style-props-CyImx7vd.d.ts → with-style-props-Dq5Vntqy.d.ts} +0 -1
- package/package.json +17 -14
- package/dist/button-C9GW9nAr.js +0 -1
- package/dist/button-mfYak6Rx.d.ts +0 -71
- package/dist/checkbox-Apow0ipK.js +0 -1
- package/dist/cx-C1UYP5We.js +0 -1
- package/dist/icon-SUx16Sl3.js +0 -1
- package/dist/icon-button-DiX9iZ9n.js +0 -1
- package/dist/index-CJbKEKr2.d.ts +0 -20
- package/dist/slot-DT_E5BQx.js +0 -1
- package/dist/theme-provider-C5XYi2-H.js +0 -1
- package/dist/toast-CZBWjXcP.js +0 -1
- package/dist/use-prefers-reduced-motion-DBqNw1wB.js +0 -1
|
@@ -1,18 +1,47 @@
|
|
|
1
|
-
import { t as WithAsChild } from "./as-child-
|
|
2
|
-
import { i as DeepNonNullable, r as VariantProps } from "./index-
|
|
1
|
+
import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
|
|
2
|
+
import { i as DeepNonNullable, r as VariantProps } from "./index-D47aqlpz.js";
|
|
3
|
+
import { t as ButtonIntent } from "./intents-DdSKSj1c.js";
|
|
3
4
|
import { ButtonHTMLAttributes, ReactNode } from "react";
|
|
4
|
-
|
|
5
5
|
//#region src/components/button/icon-button.d.ts
|
|
6
|
+
/**
|
|
7
|
+
* The visual style of an `IconButton`: how much visual weight it carries,
|
|
8
|
+
* independent of its tone (`intent`). IconButton has no `filled` or `link`
|
|
9
|
+
* appearance — a filled icon-only box reads as a toggle, and an icon-only
|
|
10
|
+
* link has no text to read as a link.
|
|
11
|
+
*/
|
|
12
|
+
type IconButtonAppearance = "ghost" | "outlined";
|
|
6
13
|
declare const iconButtonVariants: (props?: ({
|
|
7
14
|
appearance?: "ghost" | "outlined" | null | undefined;
|
|
15
|
+
intent?: "accent" | "danger" | "neutral" | null | undefined;
|
|
8
16
|
isLoading?: boolean | null | undefined;
|
|
9
|
-
size?: "
|
|
17
|
+
size?: "lg" | "md" | "sm" | "xl" | "xs" | null | undefined;
|
|
10
18
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
11
19
|
type IconButtonVariants = VariantProps<typeof iconButtonVariants>;
|
|
12
20
|
/**
|
|
13
21
|
* The props for the `IconButton` component.
|
|
14
22
|
*/
|
|
15
|
-
type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & IconButtonVariants & {
|
|
23
|
+
type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & Omit<IconButtonVariants, "appearance" | "intent"> & {
|
|
24
|
+
/**
|
|
25
|
+
* The visual style of the IconButton. Required — there is no default,
|
|
26
|
+
* so every call site states the weight it means.
|
|
27
|
+
*
|
|
28
|
+
* @enum
|
|
29
|
+
* - `"ghost"`: no border or fill until hovered
|
|
30
|
+
* - `"outlined"`: bordered on the form background
|
|
31
|
+
*/
|
|
32
|
+
appearance: IconButtonAppearance;
|
|
33
|
+
/**
|
|
34
|
+
* The tone of the IconButton — the purpose its color communicates to
|
|
35
|
+
* the user. Required — there is no default, so every call site states
|
|
36
|
+
* the tone it means. `"neutral"` is the workhorse tone (and matches
|
|
37
|
+
* how IconButton rendered before it had an intent axis).
|
|
38
|
+
*
|
|
39
|
+
* @enum
|
|
40
|
+
* - `"neutral"`: the workhorse tone — routine and secondary actions
|
|
41
|
+
* - `"accent"`: deliberate brand emphasis; reach for it when an action should carry the brand color
|
|
42
|
+
* - `"danger"`: a destructive or irreversible action
|
|
43
|
+
*/
|
|
44
|
+
intent: ButtonIntent;
|
|
16
45
|
/**
|
|
17
46
|
* The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.
|
|
18
47
|
*/
|
|
@@ -48,7 +77,11 @@ type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & I
|
|
|
48
77
|
* as submitting a form or opening a dialog.
|
|
49
78
|
* Renders only a single icon as children with an accessible, screen-reader-only label.
|
|
50
79
|
*
|
|
51
|
-
*
|
|
80
|
+
* `appearance` (visual weight) and `intent` (tone) are required — every call
|
|
81
|
+
* site states what it means; there are no implicit defaults. `intent="neutral"`
|
|
82
|
+
* matches how IconButton rendered before it had an intent axis.
|
|
83
|
+
*
|
|
84
|
+
* @see https://mantle.ngrok.com/components/actions/icon-button
|
|
52
85
|
*
|
|
53
86
|
* @example
|
|
54
87
|
* ```tsx
|
|
@@ -56,6 +89,7 @@ type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & I
|
|
|
56
89
|
* icon={<TrashIcon />}
|
|
57
90
|
* label="Delete item"
|
|
58
91
|
* appearance="ghost"
|
|
92
|
+
* intent="danger"
|
|
59
93
|
* size="sm"
|
|
60
94
|
* onClick={handleDelete}
|
|
61
95
|
* />
|
|
@@ -64,14 +98,42 @@ type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & I
|
|
|
64
98
|
* @example
|
|
65
99
|
* Submit a form — opt in with `type="submit"` (the default `"button"` does not submit):
|
|
66
100
|
* ```tsx
|
|
67
|
-
* <IconButton
|
|
101
|
+
* <IconButton
|
|
102
|
+
* type="submit"
|
|
103
|
+
* appearance="outlined"
|
|
104
|
+
* intent="neutral"
|
|
105
|
+
* icon={<MagnifyingGlassIcon />}
|
|
106
|
+
* label="Search"
|
|
107
|
+
* />
|
|
68
108
|
* ```
|
|
69
109
|
*/
|
|
70
|
-
declare const IconButton: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & Partial<DeepNonNullable<import("class-variance-authority").VariantProps<(props?: ({
|
|
110
|
+
declare const IconButton: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & Omit<Partial<DeepNonNullable<import("class-variance-authority").VariantProps<(props?: ({
|
|
71
111
|
appearance?: "ghost" | "outlined" | null | undefined;
|
|
112
|
+
intent?: "accent" | "danger" | "neutral" | null | undefined;
|
|
72
113
|
isLoading?: boolean | null | undefined;
|
|
73
|
-
size?: "
|
|
74
|
-
} & import("class-variance-authority/types").ClassProp) | undefined) => string
|
|
114
|
+
size?: "lg" | "md" | "sm" | "xl" | "xs" | null | undefined;
|
|
115
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string>>>, "appearance" | "intent"> & {
|
|
116
|
+
/**
|
|
117
|
+
* The visual style of the IconButton. Required — there is no default,
|
|
118
|
+
* so every call site states the weight it means.
|
|
119
|
+
*
|
|
120
|
+
* @enum
|
|
121
|
+
* - `"ghost"`: no border or fill until hovered
|
|
122
|
+
* - `"outlined"`: bordered on the form background
|
|
123
|
+
*/
|
|
124
|
+
appearance: IconButtonAppearance;
|
|
125
|
+
/**
|
|
126
|
+
* The tone of the IconButton — the purpose its color communicates to
|
|
127
|
+
* the user. Required — there is no default, so every call site states
|
|
128
|
+
* the tone it means. `"neutral"` is the workhorse tone (and matches
|
|
129
|
+
* how IconButton rendered before it had an intent axis).
|
|
130
|
+
*
|
|
131
|
+
* @enum
|
|
132
|
+
* - `"neutral"`: the workhorse tone — routine and secondary actions
|
|
133
|
+
* - `"accent"`: deliberate brand emphasis; reach for it when an action should carry the brand color
|
|
134
|
+
* - `"danger"`: a destructive or irreversible action
|
|
135
|
+
*/
|
|
136
|
+
intent: ButtonIntent;
|
|
75
137
|
/**
|
|
76
138
|
* The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.
|
|
77
139
|
*/
|
|
@@ -101,4 +163,4 @@ declare const IconButton: import("react").ForwardRefExoticComponent<ButtonHTMLAt
|
|
|
101
163
|
type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
|
|
102
164
|
} & import("react").RefAttributes<HTMLButtonElement>>;
|
|
103
165
|
//#endregion
|
|
104
|
-
export {
|
|
166
|
+
export { IconButtonAppearance as n, IconButtonProps as r, IconButton as t };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-CDtYjF_H.js";import{t as n}from"./slot-DmPrjM7N.js";import{t as r}from"./booleanish-BfvnW6vy.js";import{Children as i,cloneElement as a,forwardRef as o,isValidElement as s}from"react";import c from"tiny-invariant";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";import{cva as f}from"class-variance-authority";import{CircleNotchIcon as p}from"@phosphor-icons/react/CircleNotch";const m=f(e(`icon-button`,`inline-flex shrink-0 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border`,`focus:outline-hidden focus-visible:ring-4`,`disabled:cursor-default disabled:opacity-50`,`not-disabled:active:scale-97 ease-out transition-transform duration-150`),{variants:{appearance:{ghost:`text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 border-transparent`,outlined:`border-accent-600 bg-form text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-accent-700 not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700`},intent:{accent:``,danger:``,neutral:``},isLoading:{false:``,true:`opacity-50`},size:{xs:`size-6`,sm:`size-7`,md:`size-9`,lg:`size-10`,xl:`size-12`}},defaultVariants:{intent:`neutral`,size:`md`},compoundVariants:[{appearance:`ghost`,intent:`danger`,class:`text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 border-transparent`},{appearance:`outlined`,intent:`danger`,class:`border-danger-600 bg-form text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:border-danger-700 not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700`},{appearance:`ghost`,intent:`neutral`,class:`text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong border-transparent`},{appearance:`outlined`,intent:`neutral`,class:`border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong focus-visible:not-disabled:hover:border-accent-600 focus-visible:not-disabled:active:border-accent-600`}]}),h=o(({"aria-disabled":o,appearance:f,asChild:h=!1,children:g,className:_,disabled:v,icon:y,intent:b,isLoading:x=!1,label:S,size:C=`md`,type:w,...T},E)=>{let D=r(o??v??x),O=x?u(p,{className:`animate-spin`}):y,k={"aria-disabled":D,"data-slot":`icon-button`,className:e(m({appearance:f,intent:b,isLoading:x,size:C}),_),"data-appearance":f,"data-disabled":D,"data-icon-button":!0,"data-intent":b,"data-loading":x,"data-size":C,disabled:D,ref:E,...T},A=d(l,{children:[u(`span`,{className:`sr-only`,children:S}),u(t,{svg:O})]});return h?(c(s(g)&&i.only(g),"When using `asChild`, IconButton must be passed a single child as a JSX tag."),u(n,{...k,children:a(g,{},A)})):u(`button`,{...k,type:w??`button`,children:A})});h.displayName=`IconButton`;export{m as n,h as t};
|
package/dist/icon.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as SvgAttributes } from "./types-
|
|
2
|
-
import { n as IconProps, t as Icon } from "./icon-
|
|
3
|
-
import { n as SvgOnlyProps, t as SvgOnly } from "./svg-only-
|
|
1
|
+
import { t as SvgAttributes } from "./types-D1RY5Tcj.js";
|
|
2
|
+
import { n as IconProps, t as Icon } from "./icon-Cevjo93X.js";
|
|
3
|
+
import { n as SvgOnlyProps, t as SvgOnly } from "./svg-only-BFeFS1aa.js";
|
|
4
4
|
export { Icon, type IconProps, type SvgAttributes, SvgOnly, type SvgOnlyProps };
|
package/dist/icon.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./svg-only-
|
|
1
|
+
import{t as e}from"./svg-only-DDx6FtJd.js";import{t}from"./icon-CDtYjF_H.js";export{t as Icon,e as SvgOnly};
|
package/dist/icons.d.ts
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { t as SvgAttributes } from "./types-
|
|
2
|
-
import { a as AlphanumericSortingDirection, c as TimeSortingDirection, o as SortingDirection, s as SortingMode } from "./direction-
|
|
1
|
+
import { t as SvgAttributes } from "./types-D1RY5Tcj.js";
|
|
2
|
+
import { a as AlphanumericSortingDirection, c as TimeSortingDirection, o as SortingDirection, s as SortingMode } from "./direction-BjU0bPST.js";
|
|
3
3
|
import { i as Theme } from "./themes-CYNpplwN.js";
|
|
4
4
|
import { ComponentProps } from "react";
|
|
5
|
-
|
|
6
5
|
//#region src/components/icons/sort.d.ts
|
|
7
6
|
type Props = SvgAttributes & ({
|
|
8
7
|
mode: Extract<SortingMode, "alphanumeric">;
|
|
@@ -21,18 +20,10 @@ type Props = SvgAttributes & ({
|
|
|
21
20
|
*/
|
|
22
21
|
direction: TimeSortingDirection | SortingDirection;
|
|
23
22
|
});
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
declare const SortIcon: {
|
|
29
|
-
({
|
|
30
|
-
mode,
|
|
31
|
-
direction,
|
|
32
|
-
...props
|
|
33
|
-
}: Props): import("react").JSX.Element;
|
|
34
|
-
displayName: string;
|
|
35
|
-
};
|
|
23
|
+
declare function SortIcon({ mode, direction, ...props }: Props): import("react").JSX.Element;
|
|
24
|
+
declare namespace SortIcon {
|
|
25
|
+
var displayName: string;
|
|
26
|
+
}
|
|
36
27
|
//#endregion
|
|
37
28
|
//#region src/components/icons/traffic-policy-file.d.ts
|
|
38
29
|
/**
|
|
@@ -67,10 +58,7 @@ type ThemeIconProps = SvgAttributes & {
|
|
|
67
58
|
* - `light-high-contrast`: SunIcon (fill)
|
|
68
59
|
* - `dark-high-contrast`: MoonIcon (fill)
|
|
69
60
|
*/
|
|
70
|
-
declare function ThemeIcon({
|
|
71
|
-
theme,
|
|
72
|
-
...props
|
|
73
|
-
}: ThemeIconProps): import("react").JSX.Element;
|
|
61
|
+
declare function ThemeIcon({ theme, ...props }: ThemeIconProps): import("react").JSX.Element;
|
|
74
62
|
declare namespace ThemeIcon {
|
|
75
63
|
var displayName: string;
|
|
76
64
|
}
|
package/dist/icons.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{t as e}from"./traffic-policy-file-0g5RXFqu.js";import{t}from"./sort-BPX2Fk9t.js";import{n,t as r}from"./theme-D8kZCOzM.js";import{jsx as i}from"react/jsx-runtime";function a(e){return i(`svg`,{fill:`currentColor`,height:`1em`,viewBox:`0 0 94 36`,width:`2.61em`,...e,children:i(`path`,{d:`M32.272 12.011c-1.298-1.466-2.904-2.205-4.812-2.205-1.176 0-2.26.233-3.255.7a7.995 7.995 0 0 0-2.581 1.906 9.205 9.205 0 0 0-1.715 2.853 9.773 9.773 0 0 0-.628 3.546c0 1.25.194 2.39.58 3.419.362.98.918 1.877 1.635 2.636A7.543 7.543 0 0 0 24 26.584c.965.41 2.025.617 3.176.617.522 0 1.005-.041 1.445-.116.439-.075.858-.2 1.26-.37.4-.175.79-.398 1.18-.664.385-.27.792-.612 1.21-1.018v4.353h-.005v.421h-5.33l-4.005 4.64v.798h15.037v-24.98h-5.697v1.746Zm-.014 7.979a4.25 4.25 0 0 1-.786 1.215 3.555 3.555 0 0 1-2.592 1.1 3.627 3.627 0 0 1-1.464-.292 3.508 3.508 0 0 1-1.166-.808 3.93 3.93 0 0 1-1.054-2.72c0-.519.097-1.006.298-1.457a3.77 3.77 0 0 1 .804-1.181 4.114 4.114 0 0 1 1.162-.808 3.484 3.484 0 0 1 2.817-.016c.448.19.844.463 1.181.81.336.347.6.743.804 1.194.202.452.298.95.298 1.493 0 .505-.104 1.005-.302 1.47m-16.261-7.708a6.173 6.173 0 0 0-2.06-1.602 4.875 4.875 0 0 0-.57-.22 6.383 6.383 0 0 0-.923-.216H8.383L5.697 13.39v-3.082H.002v16.61h5.695V15.712h5.35l.444-.01v11.214h5.697V16.528c0-.885-.084-1.674-.25-2.366a4.655 4.655 0 0 0-.941-1.877zm38.367-2.018h-6.213l-2.47 2.863v-2.864h-5.7v16.61h5.71l.004-11.117h4.144l4.526-5.26zm31.051 7.672 7.79-7.392v-.281H85.7l-5.975 5.991V0h-5.696v26.87h5.696v-6.766l6.262 6.763h7.663v-.316l-8.233-8.617zm-16.11-5.78a9.436 9.436 0 0 0-3.085-1.842 10.953 10.953 0 0 0-3.855-.664c-1.407 0-2.705.226-3.884.678a9.611 9.611 0 0 0-3.072 1.858 8.488 8.488 0 0 0-2.016 2.788 8.281 8.281 0 0 0-.722 3.449c0 1.362.24 2.596.722 3.707a8.52 8.52 0 0 0 2.002 2.862c.85.798 1.86 1.415 3.036 1.847 1.177.432 2.455.647 3.842.647 1.406 0 2.707-.215 3.919-.647 1.204-.431 2.24-1.04 3.098-1.833a8.583 8.583 0 0 0 2.031-2.816c.493-1.09.742-2.29.742-3.611 0-1.316-.244-2.52-.722-3.612a8.424 8.424 0 0 0-2.035-2.81Zm-3.558 7.864c-.2.461-.463.869-.786 1.215a3.573 3.573 0 0 1-2.592 1.1c-.502 0-.981-.096-1.434-.291a3.44 3.44 0 0 1-1.16-.809 4.155 4.155 0 0 1-.788-1.215 3.825 3.825 0 0 1-.297-1.537c0-.517.098-1.004.297-1.456.201-.451.46-.849.787-1.194a3.579 3.579 0 0 1 2.597-1.1c.502 0 .98.096 1.43.29.448.19.839.461 1.16.81.328.345.586.752.786 1.214.2.461.297.954.297 1.471 0 .538-.096 1.04-.297 1.502`})})}function o(e){return i(`svg`,{fill:`currentColor`,height:`1em`,viewBox:`0 0 32 32`,width:`1em`,...e,children:i(`path`,{d:`M27.2 6.18a9.47 9.47 0 0 0-3.12-2.5A9.42 9.42 0 0 0 21.82 3h-6.14l-4.06 4.9V3.1H3V29h8.62V11.53h8.09l.67-.02v17.48H29V12.8c0-1.37-.13-2.6-.38-3.68a7.35 7.35 0 0 0-1.42-2.93Z`})})}export{r as AutoThemeIcon,o as NgrokLettermarkIcon,a as NgrokWordmarkIcon,t as SortIcon,n as ThemeIcon,e as TrafficPolicyFileIcon};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { Ref } from "react";
|
|
2
|
-
|
|
3
2
|
//#region src/utils/copy-to-clipboard.d.ts
|
|
4
3
|
/**
|
|
5
4
|
* Copy the given string to the clipboard. Uses the Clipboard API when
|
|
@@ -102,10 +101,6 @@ type ViewChangeHandler = (entry: IntersectionObserverEntry) => void;
|
|
|
102
101
|
* // Later, stop observing:
|
|
103
102
|
* stop();
|
|
104
103
|
*/
|
|
105
|
-
declare function inView(element: Element, onStart: (element: Element, entry: IntersectionObserverEntry) => void | ViewChangeHandler, {
|
|
106
|
-
root,
|
|
107
|
-
margin: rootMargin,
|
|
108
|
-
amount
|
|
109
|
-
}?: InViewOptions): VoidFunction;
|
|
104
|
+
declare function inView(element: Element, onStart: (element: Element, entry: IntersectionObserverEntry) => void | ViewChangeHandler, { root, margin: rootMargin, amount }?: InViewOptions): VoidFunction;
|
|
110
105
|
//#endregion
|
|
111
106
|
export { composeRefs as a, inView as i, MarginType as n, useComposedRefs as o, ViewChangeHandler as r, copyToClipboard as s, InViewOptions as t };
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { t as WithAsChild } from "./as-child-
|
|
2
|
-
import { r as VariantProps } from "./index-
|
|
1
|
+
import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
|
|
2
|
+
import { r as VariantProps } from "./index-D47aqlpz.js";
|
|
3
|
+
import "./button-DcXOWUYo.js";
|
|
4
|
+
import "./icon-button-B7uEj1qq.js";
|
|
3
5
|
import { ComponentProps } from "react";
|
|
4
|
-
|
|
5
6
|
//#region src/components/button/button-group.d.ts
|
|
6
7
|
declare const buttonGroupVariants: (props?: ({
|
|
7
8
|
appearance?: "ghost" | "outlined" | "panel" | null | undefined;
|
|
@@ -11,14 +12,14 @@ type ButtonGroupProps = ComponentProps<"div"> & ButtonGroupVariants & WithAsChil
|
|
|
11
12
|
/**
|
|
12
13
|
* A contained group of related buttons.
|
|
13
14
|
*
|
|
14
|
-
* @see https://mantle.ngrok.com/components/button
|
|
15
|
+
* @see https://mantle.ngrok.com/components/actions/button
|
|
15
16
|
*
|
|
16
17
|
* @example
|
|
17
18
|
* ```tsx
|
|
18
19
|
* <ButtonGroup appearance="panel">
|
|
19
|
-
* <IconButton icon={<Bold />} label="Bold" />
|
|
20
|
-
* <IconButton icon={<Italic />} label="Italic" />
|
|
21
|
-
* <IconButton icon={<Underline />} label="Underline" />
|
|
20
|
+
* <IconButton appearance="ghost" intent="neutral" icon={<Bold />} label="Bold" />
|
|
21
|
+
* <IconButton appearance="ghost" intent="neutral" icon={<Italic />} label="Italic" />
|
|
22
|
+
* <IconButton appearance="ghost" intent="neutral" icon={<Underline />} label="Underline" />
|
|
22
23
|
* </ButtonGroup>
|
|
23
24
|
* ```
|
|
24
25
|
*/
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import "./as-child-CYEVu1WY.js";
|
|
2
|
+
import "./with-style-props-Dq5Vntqy.js";
|
|
1
3
|
import { CSSProperties } from "react";
|
|
2
4
|
import { VariantProps } from "class-variance-authority";
|
|
3
|
-
|
|
4
5
|
//#region src/types/booleanish.d.ts
|
|
5
6
|
type Booleanish = boolean | "true" | "false";
|
|
6
7
|
/**
|
|
@@ -13,7 +14,7 @@ declare function parseBooleanish(value: Booleanish | (string & {}) | undefined |
|
|
|
13
14
|
/**
|
|
14
15
|
* Makes all properties in an object non-nullable, recursively.
|
|
15
16
|
*/
|
|
16
|
-
type DeepNonNullable<Type> = { [Property in keyof Type]-?: Type[Property] & {} };
|
|
17
|
+
type DeepNonNullable<Type> = { [Property in keyof Type]-?: Type[Property] & {}; };
|
|
17
18
|
//#endregion
|
|
18
19
|
//#region src/types/variant-props.d.ts
|
|
19
20
|
/**
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "./dropdown-menu-DMNw8ItM.js";
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
|
|
2
|
+
import { ComponentProps } from "react";
|
|
3
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
4
|
+
//#region src/components/slot/slot.d.ts
|
|
5
|
+
type Props = ComponentProps<typeof Slot> & WithDataSlot;
|
|
6
|
+
/**
|
|
7
|
+
* Merges its props onto its immediate child. This is useful for creating
|
|
8
|
+
* components that can be rendered as different elements. Automatically merges
|
|
9
|
+
* className props using `cx` for proper Tailwind class handling, and
|
|
10
|
+
* concatenates `data-slot` values in DOM order (the composing parent's slot
|
|
11
|
+
* chain first, then the child's own) so `asChild` composition accumulates the
|
|
12
|
+
* whole slot chain instead of one side clobbering the other.
|
|
13
|
+
*
|
|
14
|
+
* @see https://mantle.ngrok.com/components/primitives/slot
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```tsx
|
|
18
|
+
* <Slot className="custom-class">
|
|
19
|
+
* <a href="/">Home</a>
|
|
20
|
+
* </Slot>
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
declare const Slot$1: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLElement>>;
|
|
24
|
+
//#endregion
|
|
25
|
+
export { Slot$1 as t };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./compose-refs-Cjf2gfB8.js";import{t}from"./cx-
|
|
1
|
+
import{t as e}from"./compose-refs-Cjf2gfB8.js";import{t}from"./cx-IiQEAKf5.js";import{t as n}from"./icon-CDtYjF_H.js";import{t as r}from"./clsx-DUGZgXfJ.js";import{a as i,r as a}from"./validation-Bpptk_9t.js";import{createContext as o,forwardRef as s,useContext as c,useMemo as l,useRef as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{CheckCircleIcon as p}from"@phosphor-icons/react/CheckCircle";import{WarningIcon as m}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as h}from"@phosphor-icons/react/WarningDiamond";const g=s(({children:e,className:t,...n},r)=>{let i=!!e,a=u(null);return i?d(y,{className:t,forwardedRef:r,innerRef:a,...n,children:e}):d(y,{...n,className:t,forwardedRef:r,innerRef:a,children:d(_,{...n})})});g.displayName=`Input`;const _=s(({"aria-invalid":n,className:r,validation:o,...s},l)=>{let{"aria-invalid":u,forwardedRef:f,innerRef:p,validation:m,...h}=c(v),g=i(),{ariaInvalid:_,validation:y}=a({"aria-invalid":u??n,validation:m??o??g}),b={...h,...s,type:s.type??h.type??`text`};return d(`input`,{"aria-invalid":_,"data-slot":`input-capture`,"data-validation":y,className:t(`placeholder:text-placeholder min-w-0 flex-1 bg-transparent text-left autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] focus:outline-hidden`,r),ref:e(l,f,p),...b})});_.displayName=`InputCapture`;const v=o({validation:void 0,innerRef:{current:null}}),y=({"aria-invalid":e,"aria-disabled":n,"data-slot":r=`input`,children:o,className:s,disabled:c,forwardedRef:u,innerRef:p,style:m,type:h,validation:g,..._})=>{let y=i(),{validation:x}=a({"aria-invalid":e,validation:g??y}),S=l(()=>({"aria-invalid":e,"aria-disabled":n,disabled:c,type:h,validation:g,..._,forwardedRef:u,innerRef:p}),[e,n,c,h,g,_,u,p]);return d(v.Provider,{value:S,children:f(`div`,{role:`none`,"data-slot":r,"data-disabled":(c??n)||void 0,"data-validation":x||void 0,className:t(`pointer-coarse:text-base h-9 text-sm`,`bg-form relative flex w-full items-center gap-1.5 rounded-md border px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-hidden focus-within:ring-4`,`data-disabled:opacity-50`,`has-[input:not(:first-child)]:ps-2.5 has-[input:not(:last-child)]:pe-2.5 [&>:not(input)]:shrink-0 [&_svg]:size-5`,`border-form text-strong focus-within:border-accent-600 focus-within:ring-focus-accent`,`data-validation-success:border-success-600 focus-within:data-validation-success:border-success-600 focus-within:data-validation-success:ring-focus-success`,`data-validation-warning:border-warning-600 focus-within:data-validation-warning:border-warning-600 focus-within:data-validation-warning:ring-focus-warning`,`data-validation-error:border-danger-600 focus-within:data-validation-error:border-danger-600 focus-within:data-validation-error:ring-focus-danger`,`autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] has-autofill:bg-blue-50 has-autofill:[-webkit-text-fill-color:var(--text-color-strong)]`,s),onMouseDown:e=>{e.target!==p?.current&&e.preventDefault()},onClick:()=>{p?.current?.focus()},onKeyDown:()=>{p?.current!==document.activeElement&&p?.current?.focus()},style:m,children:[o,d(b,{name:_.name,validation:x})]})})};y.displayName=`InputContainer`;const b=({name:e,validation:t})=>{switch(t){case`error`:return f(`div`,{className:`text-danger-600 order-last select-none`,children:[d(`span`,{className:`sr-only`,children:r(`The value entered for the`,e,`input has failed validation.`)}),d(n,{svg:d(m,{"aria-hidden":!0,weight:`fill`})})]});case`success`:return d(`div`,{className:`text-success-600 order-last select-none`,children:d(n,{svg:d(p,{weight:`fill`})})});case`warning`:return d(`div`,{className:`text-warning-600 order-last select-none`,children:d(n,{svg:d(h,{weight:`fill`})})});default:return null}};b.displayName=`ValidationFeedback`;export{_ as n,g as t};
|
package/dist/input.d.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { o as WithValidation, r as Validation } from "./validation-
|
|
2
|
-
import { i as WithInputType, n as InputType, r as WithAutoComplete, t as AutoComplete } from "./types-
|
|
1
|
+
import { o as WithValidation, r as Validation } from "./validation-7QeiTFwl.js";
|
|
2
|
+
import { i as WithInputType, n as InputType, r as WithAutoComplete, t as AutoComplete } from "./types-C19IR7jf.js";
|
|
3
3
|
import { InputHTMLAttributes, PropsWithChildren } from "react";
|
|
4
|
-
|
|
5
4
|
//#region src/components/input/input.d.ts
|
|
6
5
|
type BaseProps = WithAutoComplete & WithInputType & WithValidation;
|
|
7
6
|
/**
|
|
@@ -12,7 +11,7 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "
|
|
|
12
11
|
* Used to create interactive controls for web-based forms in order to accept data from the user.
|
|
13
12
|
* A versatile input element that supports various types, validation states, and can be composed with other elements.
|
|
14
13
|
*
|
|
15
|
-
* @see https://mantle.ngrok.com/components/input
|
|
14
|
+
* @see https://mantle.ngrok.com/components/forms/input
|
|
16
15
|
*
|
|
17
16
|
* @example
|
|
18
17
|
* ```tsx
|
|
@@ -23,7 +22,7 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "
|
|
|
23
22
|
* />
|
|
24
23
|
* ```
|
|
25
24
|
*/
|
|
26
|
-
declare const Input: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "
|
|
25
|
+
declare const Input: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithAutoComplete & WithInputType & WithValidation & {
|
|
27
26
|
children?: import("react").ReactNode | undefined;
|
|
28
27
|
} & import("react").RefAttributes<HTMLInputElement>>;
|
|
29
28
|
type InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & BaseProps;
|
|
@@ -31,7 +30,7 @@ type InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComple
|
|
|
31
30
|
* The actual <input /> element that captures user input.
|
|
32
31
|
* Used internally by Input component or when you need direct control over the input element.
|
|
33
32
|
*
|
|
34
|
-
* @see https://mantle.ngrok.com/components/input
|
|
33
|
+
* @see https://mantle.ngrok.com/components/forms/input
|
|
35
34
|
*
|
|
36
35
|
* @example
|
|
37
36
|
* ```tsx
|
|
@@ -41,7 +40,7 @@ type InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComple
|
|
|
41
40
|
* </Input>
|
|
42
41
|
* ```
|
|
43
42
|
*/
|
|
44
|
-
declare const InputCapture: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "
|
|
43
|
+
declare const InputCapture: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithAutoComplete & WithInputType & WithValidation & import("react").RefAttributes<HTMLInputElement>>;
|
|
45
44
|
//#endregion
|
|
46
45
|
//#region src/components/input/password-input.d.ts
|
|
47
46
|
type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {
|
|
@@ -66,7 +65,7 @@ type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoCompl
|
|
|
66
65
|
* accurately and may want to verify visually before submitting.
|
|
67
66
|
*
|
|
68
67
|
* **When not to use**
|
|
69
|
-
* - For values that are never sensitive — use a plain {@link https://mantle.ngrok.com/components/input Input}.
|
|
68
|
+
* - For values that are never sensitive — use a plain {@link https://mantle.ngrok.com/components/forms/input Input}.
|
|
70
69
|
* - For controls where the toggle would be confusing (e.g. masked input
|
|
71
70
|
* formatting like phone numbers).
|
|
72
71
|
*
|
|
@@ -75,7 +74,7 @@ type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoCompl
|
|
|
75
74
|
* UI control toggles multiple password fields), and `onValueVisibilityChange`
|
|
76
75
|
* to be notified when the user toggles via the built-in button.
|
|
77
76
|
*
|
|
78
|
-
* **Accessibility.** Always pair with a {@link https://mantle.ngrok.com/components/label Label}.
|
|
77
|
+
* **Accessibility.** Always pair with a {@link https://mantle.ngrok.com/components/forms/label Label}.
|
|
79
78
|
* The toggle button has its own accessible name announcing the current
|
|
80
79
|
* state. The input keeps `autocomplete="current-password"` /
|
|
81
80
|
* `"new-password"` semantics — set `autoComplete` explicitly per flow.
|
|
@@ -84,7 +83,7 @@ type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoCompl
|
|
|
84
83
|
* `type="text"` — some password managers may pause autofill in this state,
|
|
85
84
|
* which is the intended security tradeoff.
|
|
86
85
|
*
|
|
87
|
-
* @see https://mantle.ngrok.com/components/password-input
|
|
86
|
+
* @see https://mantle.ngrok.com/components/forms/password-input
|
|
88
87
|
*
|
|
89
88
|
* @example
|
|
90
89
|
* ```tsx
|
|
@@ -113,7 +112,7 @@ type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoCompl
|
|
|
113
112
|
* }
|
|
114
113
|
* ```
|
|
115
114
|
*/
|
|
116
|
-
declare const PasswordInput: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "
|
|
115
|
+
declare const PasswordInput: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {
|
|
117
116
|
/**
|
|
118
117
|
* Callback for when the visibility of the password value changes.
|
|
119
118
|
*/
|
package/dist/input.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./icon-
|
|
1
|
+
import{t as e}from"./icon-CDtYjF_H.js";import{n as t,t as n}from"./input-Ct1YOqSy.js";import{t as r}from"./use-prefers-reduced-motion-CagaNRgm.js";import{t as i}from"./is-input-CXmS0OFN.js";import{forwardRef as a,useEffect as o,useRef as s,useState as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{EyeIcon as d}from"@phosphor-icons/react/Eye";import{EyeClosedIcon as f}from"@phosphor-icons/react/EyeClosed";import{flushSync as p}from"react-dom";const m=a(({onValueVisibilityChange:i,showValue:a=!1,...m},h)=>{let[g,_]=c(a),v=g?`text`:`password`,y=g?d:f,b=s(null),x=s(null);return o(()=>{_(a)},[a]),u(n,{"data-slot":`password-input`,type:v,ref:h,...m,children:[l(t,{}),u(`button`,{type:`button`,tabIndex:-1,className:`text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0`,onClick:()=>{x.current&&=(x.current.cancel(),null);let e=!g;p(()=>{_(e)}),i?.(e);let t=b.current;t&&!r()&&(x.current=t.animate([{transform:`scaleY(0)`},{transform:`scaleY(1)`}],{duration:200,easing:`ease-out`}),x.current.onfinish=()=>{x.current=null})},children:[u(`span`,{className:`sr-only`,children:[`Turn password visibility `,g?`off`:`on`]}),l(e,{ref:b,svg:l(y,{"aria-hidden":!0})})]})]})});m.displayName=`PasswordInput`;export{n as Input,t as InputCapture,m as PasswordInput,i as isInput};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
//#region src/components/button/intents.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* The tone axis shared by the button family (`Button` and `IconButton`) —
|
|
4
|
+
* the purpose a button's color communicates to the user:
|
|
5
|
+
*
|
|
6
|
+
* - `"neutral"` — the workhorse tone: routine and secondary actions, and the
|
|
7
|
+
* default primary action (`appearance="filled" intent="neutral"`)
|
|
8
|
+
* - `"accent"` — deliberate brand emphasis, colored with the accent tokens
|
|
9
|
+
* (e.g. `bg-filled-accent`, `text-accent-600`); reach for it when an
|
|
10
|
+
* action should carry the brand color, not as the routine primary
|
|
11
|
+
* - `"danger"` — a destructive or irreversible action
|
|
12
|
+
*
|
|
13
|
+
* There is no default: `intent` is a required prop on the button family so
|
|
14
|
+
* every call site states the tone it means.
|
|
15
|
+
*
|
|
16
|
+
* See `decisions/2026-07-13-button-size-and-intent-api.md`.
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* ```tsx
|
|
20
|
+
* <Button appearance="filled" intent="neutral">Save</Button>
|
|
21
|
+
* <Button appearance="outlined" intent="neutral">Cancel</Button>
|
|
22
|
+
* <Button appearance="filled" intent="danger">Delete</Button>
|
|
23
|
+
* <Button appearance="filled" intent="accent">Upgrade to Pro</Button>
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
26
|
+
type ButtonIntent = "accent" | "danger" | "neutral";
|
|
27
|
+
//#endregion
|
|
28
|
+
export { ButtonIntent as t };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./cx-
|
|
1
|
+
import{t as e}from"./cx-IiQEAKf5.js";import{jsx as t}from"react/jsx-runtime";function n({children:n,className:r,...i}){return t(`kbd`,{"data-slot":`kbd`,className:e(`[font-kerning:normal] [font-variant-ligatures:common-ligatures_contextual]`,`appearance-none tabular-nums inline-grid place-items-center size-5 bg-neutral-500/15 px-1 rounded text-mono leading-none font-mono`,r),...i,children:n})}export{n as t};
|
package/dist/kbd.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { ComponentProps } from "react";
|
|
2
|
-
|
|
3
2
|
//#region src/components/kbd/kbd.d.ts
|
|
4
3
|
/**
|
|
5
4
|
* A square, centered keyboard "key" chip for rendering shortcut hints —
|
|
@@ -13,7 +12,7 @@ import { ComponentProps } from "react";
|
|
|
13
12
|
* - Inline with prose: "Press `Kbd K` to open search."
|
|
14
13
|
*
|
|
15
14
|
* **When not to use**
|
|
16
|
-
* - For arbitrary monospace text — use {@link https://mantle.ngrok.com/components/code Code}.
|
|
15
|
+
* - For arbitrary monospace text — use {@link https://mantle.ngrok.com/components/data-display/code Code}.
|
|
17
16
|
* - For chord-style multi-key shortcuts as a single chip — render multiple
|
|
18
17
|
* `<Kbd>` elements separated by `+` text instead.
|
|
19
18
|
*
|
|
@@ -22,7 +21,7 @@ import { ComponentProps } from "react";
|
|
|
22
21
|
* `aria-label` on the `<Kbd>` or include a visually-hidden label inside,
|
|
23
22
|
* and mark the visible glyph `aria-hidden`.
|
|
24
23
|
*
|
|
25
|
-
* @see https://mantle.ngrok.com/components/kbd
|
|
24
|
+
* @see https://mantle.ngrok.com/components/data-display/kbd
|
|
26
25
|
*
|
|
27
26
|
* @example
|
|
28
27
|
* ```tsx
|
|
@@ -43,10 +42,6 @@ import { ComponentProps } from "react";
|
|
|
43
42
|
* </Kbd>
|
|
44
43
|
* ```
|
|
45
44
|
*/
|
|
46
|
-
declare function Kbd({
|
|
47
|
-
children,
|
|
48
|
-
className,
|
|
49
|
-
...props
|
|
50
|
-
}: ComponentProps<"kbd">): import("react").JSX.Element;
|
|
45
|
+
declare function Kbd({ children, className, ...props }: ComponentProps<"kbd">): import("react").JSX.Element;
|
|
51
46
|
//#endregion
|
|
52
47
|
export { Kbd };
|
package/dist/kbd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./kbd-
|
|
1
|
+
import{t as e}from"./kbd-K8iaZ-Ti.js";export{e as Kbd};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./cx-
|
|
1
|
+
import{t as e}from"./cx-IiQEAKf5.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";const r=t(({"aria-disabled":t,children:r,className:i,disabled:a,onMouseDown:o,...s},c)=>n(`label`,{"aria-disabled":a??t,"data-slot":`label`,className:e(`text-strong cursor-pointer text-sm peer-disabled:cursor-default has-disabled:cursor-default aria-disabled:cursor-default font-sans`,`[:where(&:not(:has(input,textarea,select,button,[contenteditable])))]:font-medium`,i),onMouseDown:e=>{e.target.closest(`button, input, select, textarea`)||(o?.(e),!e.defaultPrevented&&e.detail>1&&e.preventDefault())},ref:c,...s,children:r}));r.displayName=`Label`;export{r as t};
|
package/dist/label.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as Label } from "./label-
|
|
1
|
+
import { t as Label } from "./label-v2-bv98k.js";
|
|
2
2
|
export { Label };
|
package/dist/label.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./label-
|
|
1
|
+
import{t as e}from"./label-BMlHW_2D.js";export{e as Label};
|