@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.
Files changed (192) hide show
  1. package/dist/accordion.d.ts +63 -21
  2. package/dist/accordion.js +1 -1
  3. package/dist/agent.json +4 -1
  4. package/dist/alert-dialog.d.ts +102 -70
  5. package/dist/alert-dialog.js +1 -1
  6. package/dist/alert.d.ts +39 -39
  7. package/dist/alert.js +1 -1
  8. package/dist/{anchor-BtgEJoPN.js → anchor-C_tjSVy6.js} +1 -1
  9. package/dist/anchor.d.ts +3 -4
  10. package/dist/anchor.js +1 -1
  11. package/dist/{as-child-uN_018tj.d.ts → as-child-CYEVu1WY.d.ts} +0 -7
  12. package/dist/badge.d.ts +5 -56
  13. package/dist/badge.js +1 -1
  14. package/dist/breadcrumb.d.ts +212 -0
  15. package/dist/breadcrumb.js +1 -0
  16. package/dist/browser-only.d.ts +2 -6
  17. package/dist/{button-CERx95KE.js → button-5t6-JS_I.js} +1 -1
  18. package/dist/button-ClC60Nzg.js +1 -0
  19. package/dist/button-DcXOWUYo.d.ts +131 -0
  20. package/dist/button.d.ts +6 -4
  21. package/dist/button.js +1 -1
  22. package/dist/calendar.d.ts +2 -8
  23. package/dist/calendar.js +1 -1
  24. package/dist/card.d.ts +8 -8
  25. package/dist/card.js +1 -1
  26. package/dist/centered-layout.d.ts +147 -0
  27. package/dist/centered-layout.js +1 -0
  28. package/dist/checkbox-DJ2xl7Rc.js +1 -0
  29. package/dist/checkbox.d.ts +9 -11
  30. package/dist/checkbox.js +1 -1
  31. package/dist/{choice-D6S38dPs.js → choice-DOdyNzFC.js} +1 -1
  32. package/dist/choice.d.ts +16 -14
  33. package/dist/choice.js +1 -1
  34. package/dist/code-block.d.ts +5 -17
  35. package/dist/code-block.js +1 -1
  36. package/dist/code-block_highlight-utils.d.ts +1 -1
  37. package/dist/code-block_highlight-utils.js +1 -1
  38. package/dist/code.d.ts +4 -5
  39. package/dist/code.js +1 -1
  40. package/dist/combobox.d.ts +40 -19
  41. package/dist/combobox.js +1 -1
  42. package/dist/command.d.ts +71 -49
  43. package/dist/command.js +1 -1
  44. package/dist/cx-IiQEAKf5.js +1 -0
  45. package/dist/cx.js +1 -1
  46. package/dist/data-slot-CChfb_cv.d.ts +17 -0
  47. package/dist/data-table.d.ts +77 -137
  48. package/dist/data-table.js +1 -1
  49. package/dist/description-list.d.ts +7 -7
  50. package/dist/description-list.js +1 -1
  51. package/dist/{dialog-uyJcNks7.js → dialog-ZCgG41hx.js} +1 -1
  52. package/dist/dialog.d.ts +213 -88
  53. package/dist/dialog.js +1 -1
  54. package/dist/{direction-CcTY0FmA.d.ts → direction-BjU0bPST.d.ts} +1 -1
  55. package/dist/{dropdown-menu-OEuW4GLp.js → dropdown-menu-ByUQkAvJ.js} +1 -1
  56. package/dist/{dropdown-menu-CADgs9gz.d.ts → dropdown-menu-DMNw8ItM.d.ts} +26 -27
  57. package/dist/dropdown-menu.d.ts +2 -1
  58. package/dist/dropdown-menu.js +1 -1
  59. package/dist/empty.d.ts +139 -59
  60. package/dist/empty.js +1 -1
  61. package/dist/{field-context-4k1kI7Bo.js → field-context-BR01g789.js} +1 -1
  62. package/dist/field.d.ts +41 -36
  63. package/dist/field.js +1 -1
  64. package/dist/flag.d.ts +2 -9
  65. package/dist/flag.js +1 -1
  66. package/dist/hooks.d.ts +13 -15
  67. package/dist/hooks.js +1 -1
  68. package/dist/hover-card.d.ts +42 -20
  69. package/dist/hover-card.js +1 -1
  70. package/dist/icon-CDtYjF_H.js +1 -0
  71. package/dist/{icon-n49kOh4_.d.ts → icon-Cevjo93X.d.ts} +2 -3
  72. package/dist/{icon-button-D7hs6bX2.d.ts → icon-button-B7uEj1qq.d.ts} +73 -11
  73. package/dist/icon-button-DV2-GZHf.js +1 -0
  74. package/dist/icon.d.ts +3 -3
  75. package/dist/icon.js +1 -1
  76. package/dist/icons.d.ts +7 -19
  77. package/dist/icons.js +1 -1
  78. package/dist/{in-view-bItE1fkG.d.ts → in-view-nkSOdED2.d.ts} +1 -6
  79. package/dist/{index-CTU6apE6.d.ts → index-BivvYYs-.d.ts} +8 -7
  80. package/dist/{index-Bed_XLWa.d.ts → index-D47aqlpz.d.ts} +3 -2
  81. package/dist/index-DZRbVkZa.d.ts +1 -0
  82. package/dist/index-Rv8RL7xy.d.ts +25 -0
  83. package/dist/{input-B3TS9yAP.js → input-Ct1YOqSy.js} +1 -1
  84. package/dist/input.d.ts +10 -11
  85. package/dist/input.js +1 -1
  86. package/dist/intents-DdSKSj1c.d.ts +28 -0
  87. package/dist/{kbd-D6k4Dnrf.js → kbd-K8iaZ-Ti.js} +1 -1
  88. package/dist/kbd.d.ts +3 -8
  89. package/dist/kbd.js +1 -1
  90. package/dist/{label-BLXfnQmn.js → label-BMlHW_2D.js} +1 -1
  91. package/dist/{label-PY0qM0G5.d.ts → label-v2-bv98k.d.ts} +1 -1
  92. package/dist/label.d.ts +1 -1
  93. package/dist/label.js +1 -1
  94. package/dist/list.d.ts +18 -60
  95. package/dist/list.js +1 -1
  96. package/dist/llms.txt +4 -1
  97. package/dist/main.d.ts +4 -27
  98. package/dist/main.js +1 -1
  99. package/dist/mantle.css +6 -6
  100. package/dist/media-object.d.ts +6 -7
  101. package/dist/media-object.js +1 -1
  102. package/dist/multi-select.d.ts +80 -33
  103. package/dist/multi-select.js +1 -1
  104. package/dist/otp-input.d.ts +7 -8
  105. package/dist/otp-input.js +1 -1
  106. package/dist/pagination.d.ts +11 -22
  107. package/dist/pagination.js +1 -1
  108. package/dist/{popover-Bq52EC7X.js → popover-D5WxxnBY.js} +1 -1
  109. package/dist/popover.d.ts +17 -18
  110. package/dist/popover.js +1 -1
  111. package/dist/{primitive-FoWela9a.d.ts → primitive-C64-m48O.d.ts} +0 -1
  112. package/dist/{primitive-BuVqb6zf.js → primitive-M-kZdNIS.js} +1 -1
  113. package/dist/progress.d.ts +55 -46
  114. package/dist/progress.js +1 -1
  115. package/dist/qr-code.d.ts +10 -9
  116. package/dist/qr-code.js +1 -1
  117. package/dist/radio-group.d.ts +71 -60
  118. package/dist/radio-group.js +1 -1
  119. package/dist/{resolve-pre-rendered-props-DxJ9-DAl.d.ts → resolve-pre-rendered-props-B6OlZrSI.d.ts} +13 -26
  120. package/dist/{resolve-pre-rendered-props-DwIF_M_K.js → resolve-pre-rendered-props-C3e5Auo3.js} +1 -1
  121. package/dist/sandboxed-on-click.d.ts +4 -8
  122. package/dist/sandboxed-on-click.js +1 -1
  123. package/dist/{select-BUGOJMER.d.ts → select-Bwt2YduR.d.ts} +11 -12
  124. package/dist/{select-Bxq_N-_o.js → select-D-5u0Blc.js} +1 -1
  125. package/dist/select.d.ts +1 -1
  126. package/dist/select.js +1 -1
  127. package/dist/selectable-list.d.ts +160 -146
  128. package/dist/selectable-list.js +1 -1
  129. package/dist/{separator-CqohKk4z.js → separator-kBnnv3Cw.js} +1 -1
  130. package/dist/separator.d.ts +6 -37
  131. package/dist/separator.js +1 -1
  132. package/dist/sheet.d.ts +302 -89
  133. package/dist/sheet.js +1 -1
  134. package/dist/sizes-BCoI4bhP.d.ts +29 -0
  135. package/dist/skeleton-Bu3tgNcW.js +1 -0
  136. package/dist/skeleton.d.ts +2 -2
  137. package/dist/skeleton.js +1 -1
  138. package/dist/skip-to-main-link.d.ts +4 -34
  139. package/dist/skip-to-main-link.js +1 -1
  140. package/dist/slider.d.ts +2 -21
  141. package/dist/slider.js +1 -1
  142. package/dist/slot-DmPrjM7N.js +1 -0
  143. package/dist/slot.d.ts +1 -1
  144. package/dist/slot.js +1 -1
  145. package/dist/split-button.d.ts +21 -13
  146. package/dist/split-button.js +1 -1
  147. package/dist/{svg-only-f6ToFLH0.d.ts → svg-only-BFeFS1aa.d.ts} +2 -3
  148. package/dist/{svg-only-CSOaF1tL.js → svg-only-DDx6FtJd.js} +1 -1
  149. package/dist/switch.d.ts +4 -5
  150. package/dist/switch.js +1 -1
  151. package/dist/{table-CAitdL78.js → table-CPH2md2-.js} +1 -1
  152. package/dist/{table-BWD9IlIN.d.ts → table-CwFHXC-G.d.ts} +10 -10
  153. package/dist/table.d.ts +1 -1
  154. package/dist/table.js +1 -1
  155. package/dist/tabs.d.ts +29 -15
  156. package/dist/tabs.js +1 -1
  157. package/dist/text-area.d.ts +2 -3
  158. package/dist/text-area.js +1 -1
  159. package/dist/theme-D8kZCOzM.js +1 -0
  160. package/dist/theme-provider-Djj_jBo6.js +1 -0
  161. package/dist/theme-switcher.d.ts +53 -0
  162. package/dist/theme-switcher.js +1 -0
  163. package/dist/theme.d.ts +15 -101
  164. package/dist/theme.js +1 -1
  165. package/dist/toast-D3ntBmn4.js +1 -0
  166. package/dist/toast.d.ts +32 -50
  167. package/dist/toast.js +1 -1
  168. package/dist/tooltip.d.ts +16 -50
  169. package/dist/tooltip.js +1 -1
  170. package/dist/{types-CTam1uIW.d.ts → types-C19IR7jf.d.ts} +1 -0
  171. package/dist/{types-BvUzforF.d.ts → types-D1RY5Tcj.d.ts} +0 -1
  172. package/dist/types.d.ts +3 -3
  173. package/dist/use-prefers-reduced-motion-CagaNRgm.js +1 -0
  174. package/dist/utils.d.ts +2 -3
  175. package/dist/{validation-xyX_6kph.d.ts → validation-7QeiTFwl.d.ts} +3 -12
  176. package/dist/{validation-DCyx-ceH.js → validation-Bpptk_9t.js} +1 -1
  177. package/dist/{virtual-PBNiHjMK.js → virtual-DZMBu7Ch.js} +1 -1
  178. package/dist/well.d.ts +3 -3
  179. package/dist/well.js +1 -1
  180. package/dist/{with-style-props-CyImx7vd.d.ts → with-style-props-Dq5Vntqy.d.ts} +0 -1
  181. package/package.json +17 -14
  182. package/dist/button-C9GW9nAr.js +0 -1
  183. package/dist/button-mfYak6Rx.d.ts +0 -71
  184. package/dist/checkbox-Apow0ipK.js +0 -1
  185. package/dist/cx-C1UYP5We.js +0 -1
  186. package/dist/icon-SUx16Sl3.js +0 -1
  187. package/dist/icon-button-DiX9iZ9n.js +0 -1
  188. package/dist/index-CJbKEKr2.d.ts +0 -20
  189. package/dist/slot-DT_E5BQx.js +0 -1
  190. package/dist/theme-provider-C5XYi2-H.js +0 -1
  191. package/dist/toast-CZBWjXcP.js +0 -1
  192. package/dist/use-prefers-reduced-motion-DBqNw1wB.js +0 -1
@@ -1,18 +1,47 @@
1
- import { t as WithAsChild } from "./as-child-uN_018tj.js";
2
- import { i as DeepNonNullable, r as VariantProps } from "./index-Bed_XLWa.js";
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?: "xs" | "sm" | "md" | null | undefined;
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
- * @see https://mantle.ngrok.com/components/icon-button
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 type="submit" icon={<MagnifyingGlassIcon />} label="Search" />
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?: "xs" | "sm" | "md" | null | undefined;
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 { IconButtonProps as n, IconButton as t };
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-BvUzforF.js";
2
- import { n as IconProps, t as Icon } from "./icon-n49kOh4_.js";
3
- import { n as SvgOnlyProps, t as SvgOnly } from "./svg-only-f6ToFLH0.js";
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-CSOaF1tL.js";import{t}from"./icon-SUx16Sl3.js";export{t as Icon,e as SvgOnly};
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-BvUzforF.js";
2
- import { a as AlphanumericSortingDirection, c as TimeSortingDirection, o as SortingDirection, s as SortingMode } from "./direction-CcTY0FmA.js";
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
- * A sorting icon that can be used to indicate the sorting direction of a table column or list.
26
- * It is aware of the sorting mode (alphanumeric or time) and the sorting direction (ascending or descending).
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{s as e}from"./theme-provider-C5XYi2-H.js";import{t}from"./traffic-policy-file-0g5RXFqu.js";import{t as n}from"./sort-BPX2Fk9t.js";import{jsx as r}from"react/jsx-runtime";import{DesktopIcon as i}from"@phosphor-icons/react/Desktop";import{MoonIcon as a}from"@phosphor-icons/react/Moon";import{SunIcon as o}from"@phosphor-icons/react/Sun";function s(t){return r(c,{theme:e(),...t})}s.displayName=`AutoThemeIcon`;function c({theme:e,...t}){switch(e){case`system`:return r(i,{...t});case`light`:return r(o,{...t});case`dark`:return r(a,{...t});case`light-high-contrast`:return r(o,{...t,weight:`fill`});case`dark-high-contrast`:return r(a,{...t,weight:`fill`})}}c.displayName=`ThemeIcon`;function l(e){return r(`svg`,{fill:`currentColor`,height:`1em`,viewBox:`0 0 94 36`,width:`2.61em`,...e,children:r(`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 u(e){return r(`svg`,{fill:`currentColor`,height:`1em`,viewBox:`0 0 32 32`,width:`1em`,...e,children:r(`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{s as AutoThemeIcon,u as NgrokLettermarkIcon,l as NgrokWordmarkIcon,n as SortIcon,c as ThemeIcon,t as TrafficPolicyFileIcon};
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-uN_018tj.js";
2
- import { r as VariantProps } from "./index-Bed_XLWa.js";
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-group#api-button-group
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-C1UYP5We.js";import{t as n}from"./icon-SUx16Sl3.js";import{t as r}from"./clsx-DUGZgXfJ.js";import{a as i,r as a}from"./validation-DCyx-ceH.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};
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-xyX_6kph.js";
2
- import { i as WithInputType, n as InputType, r as WithAutoComplete, t as AutoComplete } from "./types-CTam1uIW.js";
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>, "type" | "autoComplete"> & WithAutoComplete & WithInputType & WithValidation & {
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>, "type" | "autoComplete"> & WithAutoComplete & WithInputType & WithValidation & import("react").RefAttributes<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>, "type" | "autoComplete"> & WithValidation & WithAutoComplete & {
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-SUx16Sl3.js";import{n as t,t as n}from"./input-B3TS9yAP.js";import{t as r}from"./use-prefers-reduced-motion-DBqNw1wB.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};
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-C1UYP5We.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};
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-D6k4Dnrf.js";export{e as Kbd};
1
+ import{t as e}from"./kbd-K8iaZ-Ti.js";export{e as Kbd};
@@ -1 +1 @@
1
- import{t as e}from"./cx-C1UYP5We.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};
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};
@@ -33,7 +33,7 @@
33
33
  * passing a font-weight utility on the `Label` itself, e.g.
34
34
  * `<Label className="font-bold">`.
35
35
  *
36
- * @see https://mantle.ngrok.com/components/label
36
+ * @see https://mantle.ngrok.com/components/forms/label
37
37
  *
38
38
  * @example
39
39
  * ```tsx
package/dist/label.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { t as Label } from "./label-PY0qM0G5.js";
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-BLXfnQmn.js";export{e as Label};
1
+ import{t as e}from"./label-BMlHW_2D.js";export{e as Label};