@ngrok/mantle 0.79.2 → 0.80.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 (196) hide show
  1. package/dist/accordion.d.ts +169 -12
  2. package/dist/accordion.js +1 -1
  3. package/dist/agent.json +1 -1
  4. package/dist/alert-dialog.d.ts +496 -30
  5. package/dist/alert-dialog.js +1 -1
  6. package/dist/alert.d.ts +129 -9
  7. package/dist/alert.js +1 -1
  8. package/dist/anchor-_2meGDfj.js +1 -0
  9. package/dist/anchor.d.ts +2 -2
  10. package/dist/anchor.js +1 -1
  11. package/dist/as-child-D23mGo4f.d.ts +49 -0
  12. package/dist/badge.d.ts +44 -5
  13. package/dist/badge.js +1 -1
  14. package/dist/breadcrumb.d.ts +214 -14
  15. package/dist/breadcrumb.js +1 -1
  16. package/dist/button-5WsvzIQ6.js +1 -0
  17. package/dist/{button-DcXOWUYo.d.ts → button-BPMwa2jN.d.ts} +3 -3
  18. package/dist/button-D9n09xUg.js +1 -0
  19. package/dist/button.d.ts +3 -3
  20. package/dist/button.js +1 -1
  21. package/dist/calendar.d.ts +0 -3
  22. package/dist/calendar.js +1 -1
  23. package/dist/card.d.ts +146 -9
  24. package/dist/card.js +1 -1
  25. package/dist/centered-layout.d.ts +224 -8
  26. package/dist/centered-layout.js +1 -1
  27. package/dist/checkbox-Cq17y0-R.js +1 -0
  28. package/dist/checkbox.d.ts +12 -10
  29. package/dist/checkbox.js +1 -1
  30. package/dist/choice-Cc8dA5r8.js +1 -0
  31. package/dist/choice-Ct0KK8jw.d.ts +269 -0
  32. package/dist/choice.d.ts +1 -252
  33. package/dist/choice.js +1 -1
  34. package/dist/code-block.d.ts +270 -50
  35. package/dist/code-block.js +6 -6
  36. package/dist/code-block_highlight-utils.js +1 -1
  37. package/dist/code.d.ts +3 -2
  38. package/dist/code.js +1 -1
  39. package/dist/combobox.d.ts +190 -11
  40. package/dist/combobox.js +1 -1
  41. package/dist/command.d.ts +285 -81
  42. package/dist/command.js +1 -1
  43. package/dist/compose-refs-BdBMM9ga.js +1 -0
  44. package/dist/data-table.d.ts +33 -5
  45. package/dist/data-table.js +1 -1
  46. package/dist/description-list.d.ts +79 -6
  47. package/dist/description-list.js +1 -1
  48. package/dist/dialog-CQ2C6vkE.js +1 -0
  49. package/dist/dialog.d.ts +239 -18
  50. package/dist/dialog.js +1 -1
  51. package/dist/dropdown-menu-CSCDdA3K.js +1 -0
  52. package/dist/{dropdown-menu-DP_Ne9Mr.d.ts → dropdown-menu-CoyozLzy.d.ts} +170 -29
  53. package/dist/dropdown-menu.d.ts +2 -2
  54. package/dist/dropdown-menu.js +1 -1
  55. package/dist/empty.d.ts +1 -1
  56. package/dist/empty.js +1 -1
  57. package/dist/field.d.ts +596 -45
  58. package/dist/field.js +1 -1
  59. package/dist/flag.d.ts +0 -3
  60. package/dist/flag.js +1 -1
  61. package/dist/hooks.d.ts +3 -4
  62. package/dist/hooks.js +1 -1
  63. package/dist/hover-card.d.ts +54 -4
  64. package/dist/hover-card.js +1 -1
  65. package/dist/{icon-Cevjo93X.d.ts → icon-BDqpcZ-n.d.ts} +1 -1
  66. package/dist/icon-CGgMKpJg.js +1 -0
  67. package/dist/{icon-button-B7uEj1qq.d.ts → icon-button-C1AfGnQx.d.ts} +11 -60
  68. package/dist/icon-button-DiOhreJD.js +1 -0
  69. package/dist/icon.d.ts +2 -2
  70. package/dist/icon.js +1 -1
  71. package/dist/icons.d.ts +5 -13
  72. package/dist/icons.js +1 -1
  73. package/dist/{in-view-nkSOdED2.d.ts → in-view-DDEGUKDR.d.ts} +17 -9
  74. package/dist/index-B8mIWKIU.d.ts +211 -0
  75. package/dist/{index-Rv8RL7xy.d.ts → index-BtwKJTLq.d.ts} +1 -1
  76. package/dist/{index-BivvYYs-.d.ts → index-C2jj8U4a.d.ts} +8 -5
  77. package/dist/index-CdPXa9h1.d.ts +1 -0
  78. package/dist/{index-D47aqlpz.d.ts → index-DA4ig3gj.d.ts} +1 -1
  79. package/dist/input-CVyAVbim.js +1 -0
  80. package/dist/{types-C19IR7jf.d.ts → input-DV9M6K4v.d.ts} +42 -2
  81. package/dist/input.d.ts +4 -55
  82. package/dist/input.js +1 -1
  83. package/dist/{label-v2-bv98k.d.ts → label-C6YH9skg.d.ts} +8 -6
  84. package/dist/label-D-D11mlp.js +1 -0
  85. package/dist/label.d.ts +1 -1
  86. package/dist/label.js +1 -1
  87. package/dist/list.d.ts +150 -6
  88. package/dist/list.js +1 -1
  89. package/dist/llms.txt +1 -1
  90. package/dist/main.d.ts +20 -4
  91. package/dist/main.js +1 -1
  92. package/dist/mantle.css +21 -7
  93. package/dist/media-object.d.ts +27 -4
  94. package/dist/media-object.js +1 -1
  95. package/dist/multi-select.d.ts +312 -15
  96. package/dist/multi-select.js +1 -1
  97. package/dist/otp-input.d.ts +129 -5
  98. package/dist/otp-input.js +1 -1
  99. package/dist/pagination.d.ts +70 -6
  100. package/dist/pagination.js +1 -1
  101. package/dist/popover-CBMADtjV.js +1 -0
  102. package/dist/popover.d.ts +1 -181
  103. package/dist/popover.js +1 -1
  104. package/dist/primitive-CJRIlrLz.d.ts +31 -0
  105. package/dist/primitive-DCPHJsRs.js +1 -0
  106. package/dist/progress.js +1 -1
  107. package/dist/qr-code.d.ts +113 -5
  108. package/dist/qr-code.js +1 -1
  109. package/dist/radio-group.d.ts +128 -23
  110. package/dist/radio-group.js +1 -1
  111. package/dist/{resolve-pre-rendered-props-C3e5Auo3.js → resolve-pre-rendered-props-C9uaM9-V.js} +1 -1
  112. package/dist/sandboxed-on-click.d.ts +2 -2
  113. package/dist/sandboxed-on-click.js +1 -1
  114. package/dist/select-SR_9-bxA.js +1 -0
  115. package/dist/select-idm1jy7y.d.ts +600 -0
  116. package/dist/select.d.ts +1 -1
  117. package/dist/select.js +1 -1
  118. package/dist/selectable-list.d.ts +252 -298
  119. package/dist/selectable-list.js +1 -1
  120. package/dist/separator-B5UmkVRL.d.ts +75 -0
  121. package/dist/separator-bpE_kooz.js +1 -0
  122. package/dist/separator.d.ts +1 -52
  123. package/dist/separator.js +1 -1
  124. package/dist/sheet.d.ts +295 -21
  125. package/dist/sheet.js +1 -1
  126. package/dist/skeleton-CsbUHbBA.js +1 -0
  127. package/dist/skeleton.d.ts +4 -7
  128. package/dist/skeleton.js +1 -1
  129. package/dist/skip-to-main-link.d.ts +24 -4
  130. package/dist/skip-to-main-link.js +1 -1
  131. package/dist/slot-CDk0Bb9z.js +1 -0
  132. package/dist/slot.d.ts +1 -1
  133. package/dist/slot.js +1 -1
  134. package/dist/{sort-BPX2Fk9t.js → sort-B_DDQcVD.js} +1 -1
  135. package/dist/split-button.d.ts +28 -13
  136. package/dist/split-button.js +1 -1
  137. package/dist/{svg-only-BFeFS1aa.d.ts → svg-only-CdI_v82i.d.ts} +1 -1
  138. package/dist/svg-only-d-nMCfAI.js +1 -0
  139. package/dist/switch.d.ts +9 -6
  140. package/dist/switch.js +1 -1
  141. package/dist/table-DUSvU_Jw.d.ts +875 -0
  142. package/dist/table-GDkapNFi.js +1 -0
  143. package/dist/table.d.ts +1 -1
  144. package/dist/table.js +1 -1
  145. package/dist/tabs.d.ts +139 -12
  146. package/dist/tabs.js +1 -1
  147. package/dist/text-area.d.ts +1 -1
  148. package/dist/text-area.js +1 -1
  149. package/dist/theme-provider-BftkIiZn.js +1 -0
  150. package/dist/theme-switcher.d.ts +110 -29
  151. package/dist/theme-switcher.js +1 -1
  152. package/dist/theme-wVnzzx2F.js +1 -0
  153. package/dist/theme.d.ts +53 -14
  154. package/dist/theme.js +1 -1
  155. package/dist/toast-DKgMRv4F.js +1 -0
  156. package/dist/toast.d.ts +98 -10
  157. package/dist/toast.js +1 -1
  158. package/dist/tooltip.d.ts +28 -1
  159. package/dist/tooltip.js +1 -1
  160. package/dist/{traffic-policy-file-0g5RXFqu.js → traffic-policy-file-CF1lbWtp.js} +1 -1
  161. package/dist/types.d.ts +2 -2
  162. package/dist/utils.d.ts +1 -1
  163. package/dist/utils.js +1 -1
  164. package/dist/virtual-UrzmaSQm.js +1 -0
  165. package/dist/well.d.ts +3 -3
  166. package/dist/well.js +1 -1
  167. package/package.json +5 -5
  168. package/dist/anchor-C_tjSVy6.js +0 -1
  169. package/dist/as-child-CYEVu1WY.d.ts +0 -23
  170. package/dist/button-5t6-JS_I.js +0 -1
  171. package/dist/button-ClC60Nzg.js +0 -1
  172. package/dist/checkbox-DJ2xl7Rc.js +0 -1
  173. package/dist/choice-DOdyNzFC.js +0 -1
  174. package/dist/compose-refs-Cjf2gfB8.js +0 -1
  175. package/dist/dialog-ZCgG41hx.js +0 -1
  176. package/dist/dropdown-menu-Bt1aKF1g.js +0 -1
  177. package/dist/icon-CDtYjF_H.js +0 -1
  178. package/dist/icon-button-DV2-GZHf.js +0 -1
  179. package/dist/index-g2rfwNCH.d.ts +0 -1
  180. package/dist/input-Ct1YOqSy.js +0 -1
  181. package/dist/label-BMlHW_2D.js +0 -1
  182. package/dist/popover-D5WxxnBY.js +0 -1
  183. package/dist/primitive-C64-m48O.d.ts +0 -13
  184. package/dist/primitive-M-kZdNIS.js +0 -1
  185. package/dist/select-Bwt2YduR.d.ts +0 -345
  186. package/dist/select-D-5u0Blc.js +0 -1
  187. package/dist/separator-kBnnv3Cw.js +0 -1
  188. package/dist/skeleton-Bu3tgNcW.js +0 -1
  189. package/dist/slot-DmPrjM7N.js +0 -1
  190. package/dist/svg-only-DDx6FtJd.js +0 -1
  191. package/dist/table-CPH2md2-.js +0 -1
  192. package/dist/table-CwFHXC-G.d.ts +0 -414
  193. package/dist/theme-D8kZCOzM.js +0 -1
  194. package/dist/theme-provider-Djj_jBo6.js +0 -1
  195. package/dist/toast-D3ntBmn4.js +0 -1
  196. package/dist/virtual-DZMBu7Ch.js +0 -1
@@ -1,345 +0,0 @@
1
- import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
2
- import { o as WithValidation } from "./validation-7QeiTFwl.js";
3
- import { FocusEvent, ReactNode, SelectHTMLAttributes } from "react";
4
- import * as SelectPrimitive from "@radix-ui/react-select";
5
- //#region src/components/select/select.d.ts
6
- type WithAriaInvalid = Pick<SelectHTMLAttributes<HTMLSelectElement>, "aria-invalid">;
7
- /**
8
- * Displays a list of options for the user to pick from—triggered by a button.
9
- *
10
- * Use Select for a small, finite list of options (~2-15) where the user picks exactly one
11
- * and search/filtering is unnecessary. For larger lists or async/searchable data, use
12
- * Combobox. For picking multiple options, use MultiSelect.
13
- *
14
- * `Select.Content` renders at Tailwind `z-50`, Mantle's shared floating
15
- * z-index. When multiple shared layers are open, the most recently mounted
16
- * layer renders on top.
17
- *
18
- * @see https://mantle.ngrok.com/components/forms/select
19
- *
20
- * @example
21
- * Composition:
22
- * ```
23
- * Select.Root
24
- * ├── Select.Trigger
25
- * │ └── Select.Value
26
- * └── Select.Content
27
- * ├── Select.Group
28
- * │ ├── Select.Label
29
- * │ └── Select.Item
30
- * └── Select.Separator
31
- * ```
32
- *
33
- * @example
34
- * ```tsx
35
- * <Select.Root>
36
- * <Select.Trigger>
37
- * <Select.Value placeholder="Select a fruit" />
38
- * </Select.Trigger>
39
- * <Select.Content>
40
- * <Select.Group>
41
- * <Select.Label>Fruits</Select.Label>
42
- * <Select.Item value="apple">Apple</Select.Item>
43
- * <Select.Item value="banana">Banana</Select.Item>
44
- * <Select.Item value="cherry">Cherry</Select.Item>
45
- * </Select.Group>
46
- * <Select.Separator />
47
- * <Select.Group>
48
- * <Select.Label>Veggies</Select.Label>
49
- * <Select.Item value="carrot">Carrot</Select.Item>
50
- * <Select.Item value="cucumber">Cucumber</Select.Item>
51
- * </Select.Group>
52
- * </Select.Content>
53
- * </Select.Root>
54
- * ```
55
- */
56
- declare const Select: {
57
- /**
58
- * Displays a list of options for the user to pick from—triggered by a button.
59
- *
60
- * Use Select for a small, finite list of options (~2-15) where the user picks exactly one
61
- * and search/filtering is unnecessary. For larger lists or async/searchable data, use
62
- * Combobox. For picking multiple options, use MultiSelect.
63
- *
64
- * `Select.Content` renders at Tailwind `z-50`, Mantle's shared floating
65
- * z-index. When multiple shared layers are open, the most recently mounted
66
- * layer renders on top.
67
- *
68
- * @see https://mantle.ngrok.com/components/forms/select#selectroot
69
- *
70
- * @example
71
- * ```tsx
72
- * <Select.Root>
73
- * <Select.Trigger>
74
- * <Select.Value placeholder="Select a fruit" />
75
- * </Select.Trigger>
76
- * <Select.Content>
77
- * <Select.Group>
78
- * <Select.Label>Fruits</Select.Label>
79
- * <Select.Item value="apple">Apple</Select.Item>
80
- * <Select.Item value="banana">Banana</Select.Item>
81
- * <Select.Item value="cherry">Cherry</Select.Item>
82
- * </Select.Group>
83
- * <Select.Separator />
84
- * <Select.Group>
85
- * <Select.Label>Veggies</Select.Label>
86
- * <Select.Item value="carrot">Carrot</Select.Item>
87
- * <Select.Item value="cucumber">Cucumber</Select.Item>
88
- * </Select.Group>
89
- * </Select.Content>
90
- * </Select.Root>
91
- * ```
92
- */
93
- readonly Root: import("react").ForwardRefExoticComponent<{
94
- children?: ReactNode | undefined;
95
- } & {
96
- autoComplete?: string;
97
- defaultOpen?: boolean;
98
- defaultValue?: string;
99
- dir?: "ltr" | "rtl";
100
- disabled?: boolean;
101
- form?: string;
102
- id?: string;
103
- name?: string;
104
- /**
105
- * Event handler called when Select blurs.
106
- * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur
107
- */
108
- onBlur?: (event: FocusEvent<HTMLButtonElement>) => void;
109
- /**
110
- * Event handler called when the value changes.
111
- * @deprecated Use `onValueChange` instead.
112
- */
113
- onChange?: (value: string) => void;
114
- onOpenChange?(open: boolean): void;
115
- onValueChange?(value: string): void;
116
- open?: boolean;
117
- required?: boolean;
118
- value?: string;
119
- } & WithValidation & WithAriaInvalid & import("react").RefAttributes<HTMLButtonElement>>;
120
- /**
121
- * The component that pops out when the select is open as a portal adjacent to the trigger button.
122
- * It contains a scrolling viewport of the select items.
123
- *
124
- * `Select.Content` renders at Tailwind `z-50`, Mantle's shared floating
125
- * z-index. When multiple shared layers are open, the most recently mounted
126
- * layer renders on top.
127
- *
128
- * @see https://mantle.ngrok.com/components/forms/select#selectcontent
129
- *
130
- * @example
131
- * ```tsx
132
- * <Select.Root>
133
- * <Select.Trigger>
134
- * <Select.Value placeholder="Select a fruit" />
135
- * </Select.Trigger>
136
- * <Select.Content>
137
- * <Select.Group>
138
- * <Select.Label>Fruits</Select.Label>
139
- * <Select.Item value="apple">Apple</Select.Item>
140
- * <Select.Item value="banana">Banana</Select.Item>
141
- * <Select.Item value="cherry">Cherry</Select.Item>
142
- * </Select.Group>
143
- * <Select.Separator />
144
- * <Select.Group>
145
- * <Select.Label>Veggies</Select.Label>
146
- * <Select.Item value="carrot">Carrot</Select.Item>
147
- * <Select.Item value="cucumber">Cucumber</Select.Item>
148
- * </Select.Group>
149
- * </Select.Content>
150
- * </Select.Root>
151
- * ```
152
- */
153
- readonly Content: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
154
- /**
155
- * The width of the content. Defaults to the width of the trigger.
156
- * If set to "content", the content will use the intrinsic content width; it will be the width of the longest/widest item.
157
- * @default "trigger"
158
- */
159
- width?: "trigger" | "content";
160
- } & import("react").RefAttributes<HTMLDivElement>>;
161
- /**
162
- * A group of related options within a select menu. Similar to an html `<optgroup>` element.
163
- * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.
164
- *
165
- * @see https://mantle.ngrok.com/components/forms/select#selectgroup
166
- *
167
- * @example
168
- * ```tsx
169
- * <Select.Root>
170
- * <Select.Trigger>
171
- * <Select.Value placeholder="Select a fruit" />
172
- * </Select.Trigger>
173
- * <Select.Content>
174
- * <Select.Group>
175
- * <Select.Label>Fruits</Select.Label>
176
- * <Select.Item value="apple">Apple</Select.Item>
177
- * <Select.Item value="banana">Banana</Select.Item>
178
- * <Select.Item value="cherry">Cherry</Select.Item>
179
- * </Select.Group>
180
- * <Select.Separator />
181
- * <Select.Group>
182
- * <Select.Label>Veggies</Select.Label>
183
- * <Select.Item value="carrot">Carrot</Select.Item>
184
- * <Select.Item value="cucumber">Cucumber</Select.Item>
185
- * </Select.Group>
186
- * </Select.Content>
187
- * </Select.Root>
188
- * ```
189
- */
190
- readonly Group: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
191
- /**
192
- * An option within a select menu. Similar to an html `<option>` element.
193
- * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.
194
- * Displays the children as the option's text.
195
- *
196
- * @see https://mantle.ngrok.com/components/forms/select#selectitem
197
- *
198
- * @example
199
- * ```tsx
200
- * <Select.Root>
201
- * <Select.Trigger>
202
- * <Select.Value placeholder="Select a fruit" />
203
- * </Select.Trigger>
204
- * <Select.Content>
205
- * <Select.Group>
206
- * <Select.Label>Fruits</Select.Label>
207
- * <Select.Item value="apple">Apple</Select.Item>
208
- * <Select.Item value="banana">Banana</Select.Item>
209
- * <Select.Item value="cherry">Cherry</Select.Item>
210
- * </Select.Group>
211
- * <Select.Separator />
212
- * <Select.Group>
213
- * <Select.Label>Veggies</Select.Label>
214
- * <Select.Item value="carrot">Carrot</Select.Item>
215
- * <Select.Item value="cucumber">Cucumber</Select.Item>
216
- * </Select.Group>
217
- * </Select.Content>
218
- * </Select.Root>
219
- * ```
220
- */
221
- readonly Item: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
222
- icon?: ReactNode;
223
- } & import("react").RefAttributes<HTMLDivElement>>;
224
- /**
225
- * Used to render the label of a group. It won't be focusable using arrow keys.
226
- *
227
- * @see https://mantle.ngrok.com/components/forms/select#selectlabel
228
- *
229
- * @example
230
- * ```tsx
231
- * <Select.Root>
232
- * <Select.Trigger>
233
- * <Select.Value placeholder="Select a fruit" />
234
- * </Select.Trigger>
235
- * <Select.Content>
236
- * <Select.Group>
237
- * <Select.Label>Fruits</Select.Label>
238
- * <Select.Item value="apple">Apple</Select.Item>
239
- * <Select.Item value="banana">Banana</Select.Item>
240
- * <Select.Item value="cherry">Cherry</Select.Item>
241
- * </Select.Group>
242
- * <Select.Separator />
243
- * <Select.Group>
244
- * <Select.Label>Veggies</Select.Label>
245
- * <Select.Item value="carrot">Carrot</Select.Item>
246
- * <Select.Item value="cucumber">Cucumber</Select.Item>
247
- * </Select.Group>
248
- * </Select.Content>
249
- * </Select.Root>
250
- * ```
251
- */
252
- readonly Label: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
253
- /**
254
- * Used to visually separate items or groups of items in the select content.
255
- *
256
- * @see https://mantle.ngrok.com/components/forms/select#selectseparator
257
- *
258
- * @example
259
- * ```tsx
260
- * <Select.Root>
261
- * <Select.Trigger>
262
- * <Select.Value placeholder="Select a fruit" />
263
- * </Select.Trigger>
264
- * <Select.Content>
265
- * <Select.Group>
266
- * <Select.Label>Fruits</Select.Label>
267
- * <Select.Item value="apple">Apple</Select.Item>
268
- * <Select.Item value="banana">Banana</Select.Item>
269
- * <Select.Item value="cherry">Cherry</Select.Item>
270
- * </Select.Group>
271
- * <Select.Separator />
272
- * <Select.Group>
273
- * <Select.Label>Veggies</Select.Label>
274
- * <Select.Item value="carrot">Carrot</Select.Item>
275
- * <Select.Item value="cucumber">Cucumber</Select.Item>
276
- * </Select.Group>
277
- * </Select.Content>
278
- * </Select.Root>
279
- * ```
280
- */
281
- readonly Separator: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & WithAsChild & {
282
- orientation?: "horizontal" | "vertical";
283
- semantic?: boolean;
284
- }, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
285
- /**
286
- * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.
287
- *
288
- * @see https://mantle.ngrok.com/components/forms/select#selecttrigger
289
- *
290
- * @example
291
- * ```tsx
292
- * <Select.Root>
293
- * <Select.Trigger>
294
- * <Select.Value placeholder="Select a fruit" />
295
- * </Select.Trigger>
296
- * <Select.Content>
297
- * <Select.Group>
298
- * <Select.Label>Fruits</Select.Label>
299
- * <Select.Item value="apple">Apple</Select.Item>
300
- * <Select.Item value="banana">Banana</Select.Item>
301
- * <Select.Item value="cherry">Cherry</Select.Item>
302
- * </Select.Group>
303
- * <Select.Separator />
304
- * <Select.Group>
305
- * <Select.Label>Veggies</Select.Label>
306
- * <Select.Item value="carrot">Carrot</Select.Item>
307
- * <Select.Item value="cucumber">Cucumber</Select.Item>
308
- * </Select.Group>
309
- * </Select.Content>
310
- * </Select.Root>
311
- * ```
312
- */
313
- readonly Trigger: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & WithAriaInvalid & WithValidation & import("react").RefAttributes<HTMLButtonElement>>;
314
- /**
315
- * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.
316
- *
317
- * @see https://mantle.ngrok.com/components/forms/select#selectvalue
318
- *
319
- * @example
320
- * ```tsx
321
- * <Select.Root>
322
- * <Select.Trigger>
323
- * <Select.Value placeholder="Select a fruit" />
324
- * </Select.Trigger>
325
- * <Select.Content>
326
- * <Select.Group>
327
- * <Select.Label>Fruits</Select.Label>
328
- * <Select.Item value="apple">Apple</Select.Item>
329
- * <Select.Item value="banana">Banana</Select.Item>
330
- * <Select.Item value="cherry">Cherry</Select.Item>
331
- * </Select.Group>
332
- * <Select.Separator />
333
- * <Select.Group>
334
- * <Select.Label>Veggies</Select.Label>
335
- * <Select.Item value="carrot">Carrot</Select.Item>
336
- * <Select.Item value="cucumber">Cucumber</Select.Item>
337
- * </Select.Group>
338
- * </Select.Content>
339
- * </Select.Root>
340
- * ```
341
- */
342
- readonly Value: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
343
- };
344
- //#endregion
345
- export { Select as t };
@@ -1 +0,0 @@
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{a as r,r as i}from"./validation-Bpptk_9t.js";import{t as a}from"./field-context-BR01g789.js";import{n as o}from"./separator-kBnnv3Cw.js";import{CaretDownIcon as s}from"@phosphor-icons/react/CaretDown";import{createContext as c,forwardRef as l,useContext as u,useMemo as d}from"react";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{CheckIcon as m}from"@phosphor-icons/react/Check";import{CaretUpIcon as h}from"@phosphor-icons/react/CaretUp";import*as g from"@radix-ui/react-select";const _=c({}),v=l(({"aria-invalid":e,children:t,id:n,validation:r,onBlur:i,onValueChange:a,onChange:o,...s},c)=>{let l=d(()=>({"aria-invalid":e,id:n,validation:r,onBlur:i,ref:c}),[e,n,r,i,c]);return f(g.Root,{...s,onValueChange:e=>{o?.(e),a?.(e)},children:f(_.Provider,{value:l,children:t})})});v.displayName=`Select`;const y=l(({className:e,...n},r)=>f(g.Group,{ref:r,"data-slot":`select-group`,className:t(`space-y-px`,e),...n}));y.displayName=`SelectGroup`;const b=g.Value;b.displayName=`SelectValue`;const x=l(({"aria-invalid":o,className:c,children:l,id:d,validation:m,...h},v)=>{let y=u(_),b=u(a),x=r(),{ariaInvalid:S,validation:C}=i({"aria-invalid":b?b[`aria-invalid`]:y[`aria-invalid`]??o,validation:y.validation??m??x}),w=b?b.id:y.id??d;return p(g.Trigger,{"data-slot":`select-trigger`,className:t(`h-9 text-sm`,`border-form bg-form text-strong font-sans placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left`,`hover:border-neutral-400`,`focus:outline-hidden focus:ring-4 aria-expanded:ring-4`,`focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger`,c),"data-validation":C||void 0,id:w,ref:e(v,y.ref),...h,...b?{"aria-describedby":b[`aria-describedby`],"aria-errormessage":b[`aria-errormessage`]}:void 0,"aria-invalid":S,children:[l,f(g.Icon,{asChild:!0,children:f(n,{svg:f(s,{weight:`bold`}),className:`size-4`})})]})});x.displayName=`SelectTrigger`;const S=l(({className:e,...r},i)=>f(g.ScrollUpButton,{ref:i,className:t(`flex cursor-default items-center justify-center py-1`,e),...r,children:f(n,{svg:f(h,{weight:`bold`}),className:`size-4`})}));S.displayName=`SelectScrollUpButton`;const C=l(({className:e,...r},i)=>f(g.ScrollDownButton,{ref:i,className:t(`flex cursor-default items-center justify-center py-1`,e),...r,children:f(n,{svg:f(s,{weight:`bold`}),className:`size-4`})}));C.displayName=`SelectScrollDownButton`;const w=l(({className:e,children:n,position:r=`popper`,width:i=`trigger`,...a},o)=>f(g.Portal,{children:p(g.Content,{ref:o,"data-slot":`select-content`,className:t(`border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md`,`bg-popover font-sans`,r===`popper`&&`data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-(--radix-select-content-available-height)`,i===`trigger`&&`w-(--radix-select-trigger-width)`,e),position:r,...a,children:[f(S,{}),f(g.Viewport,{className:t(`p-1 space-y-px`,r===`popper`&&`h-(--radix-select-trigger-height) w-full`),children:n}),f(C,{})]})}));w.displayName=`SelectContent`;const T=l(({className:e,...n},r)=>f(g.Label,{ref:r,"data-slot":`select-label`,className:t(`px-2 py-1.5 text-sm font-medium`,e),...n}));T.displayName=`SelectLabel`;const E=l(({className:e,children:r,icon:i,...a},o)=>p(g.Item,{ref:o,"data-slot":`select-item`,className:t(`relative flex gap-2 w-full cursor-pointer select-none items-center rounded-md py-1.5 pl-2 pr-8 text-strong text-sm outline-hidden`,`focus:bg-active-menu-item`,`data-disabled:pointer-events-none data-disabled:opacity-50`,`data-state-checked:bg-selected-menu-item`,`focus:data-state-checked:bg-active-selected-menu-item`,e),...a,children:[i&&f(n,{svg:i}),f(g.ItemText,{children:r}),f(g.ItemIndicator,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,children:f(n,{svg:f(m,{weight:`bold`}),className:`size-4 text-accent-600`})})]}));E.displayName=`SelectItem`;const D=l(({className:e,...n},r)=>f(o,{ref:r,"data-slot":`select-separator`,className:t(`-mx-1 my-1 h-px w-auto`,e),...n}));D.displayName=`SelectSeparator`;const O={Root:v,Content:w,Group:y,Item:E,Label:T,Separator:D,Trigger:x,Value:b};export{O as t};
@@ -1 +0,0 @@
1
- import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-DmPrjM7N.js";import{createContext as n,forwardRef as r,useContext as i}from"react";import{jsx as a}from"react/jsx-runtime";const o=[`horizontal`,`vertical`],s=n({}),c={orientation:`horizontal`},l=({className:n,children:r,asChild:i,...o})=>{let l=i?t:`div`;return a(s.Provider,{value:c,children:a(l,{"data-slot":`horizontal-separator-group`,"data-horizontal-separator-group":!0,className:e(`group flex items-center gap-2 [&>*:not([data-separator])]:shrink-0`,n),...o,children:r})})};l.displayName=`HorizontalSeparatorGroup`;const u=r(({asChild:n=!1,children:r,className:o,orientation:c,semantic:l=!1,...u},f)=>{let p=n?t:`div`,m=i(s).orientation??(d(c)?c:`horizontal`),h=l?{"aria-orientation":m===`vertical`?m:void 0,role:`separator`}:{role:`none`};return a(p,{"data-slot":`separator`,className:e(`separator`,`bg-separator`,m===`horizontal`?`h-px w-full group-data-horizontal-separator-group:flex-1`:`h-full w-px`,o),"data-orientation":m,"data-separator":!0,...h,ref:f,...n?{children:r}:{},...u})});u.displayName=`Separator`;function d(e){return typeof e==`string`&&o.includes(e)}export{u as n,l as t};
@@ -1 +0,0 @@
1
- import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-DmPrjM7N.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({asChild:n=!1,className:i,...a},o)=>r(n?t:`div`,{"data-slot":`skeleton`,className:e(`dark-high-contrast:bg-black/30 high-contrast:bg-black/30 h-4 animate-pulse rounded-md bg-gray-300/25 dark:bg-gray-950/10`,i),ref:o,...a}));i.displayName=`Skeleton`;export{i as t};
@@ -1 +0,0 @@
1
- import{t as e}from"./cx-IiQEAKf5.js";import{Children as t,cloneElement as n,forwardRef as r,isValidElement as i}from"react";import{jsx as a}from"react/jsx-runtime";import{Slot as o}from"@radix-ui/react-slot";function s(...e){let t=e.filter(e=>e!=null&&e!==``).join(` `);return t===``?void 0:t}const c=r(function({children:r,className:c,"data-slot":l,...u},d){return i(r)?a(o,{ref:d,...u,children:n(r,{...r.props,className:e(c,r.props.className),"data-slot":s(l,r.props[`data-slot`])})}):t.only(r)});export{s as n,c as t};
@@ -1 +0,0 @@
1
- import{t as e}from"./cx-IiQEAKf5.js";import{Children as t,cloneElement as n,forwardRef as r,isValidElement as i}from"react";import a from"tiny-invariant";const o=r(({className:r,style:o,svg:s,...c},l)=>(a(i(s)&&t.only(s),`SvgOnly must be passed a single SVG icon as a JSX tag.`),n(s,{"data-slot":`svg-only`,...c,className:e(`shrink-0`,r,s.props.className),style:{...o,...s.props.style},ref:l})));o.displayName=`SvgOnly`;export{o as t};
@@ -1 +0,0 @@
1
- import{t as e}from"./compose-refs-Cjf2gfB8.js";import{t}from"./cx-IiQEAKf5.js";import{forwardRef as n,useLayoutEffect as r,useMemo as i,useRef as a,useState as o}from"react";import{jsx as s}from"react/jsx-runtime";const c=n(({children:n,className:r,...i},a)=>{let o=v();return s(`div`,{"data-slot":`table`,className:t(`group/table relative w-full overflow-hidden rounded-lg border border-card bg-white dark:bg-gray-100`,r),"data-sticky-active":o.state.hasOverflow&&!o.state.scrolledToEnd||void 0,"data-x-overflow":o.state.hasOverflow,"data-x-scroll-end":o.state.hasOverflow&&o.state.scrolledToEnd,...i,children:s(`div`,{className:t(`scrollbar scroll-fade-x overflow-x-auto overflow-y-clip overscroll-x-none`,`has-data-mantle-table-sticky-right:[--_fade-right:black]`),ref:e(o.ref,a),children:n})})});c.displayName=`TableRoot`;const l=n(({children:e,className:n,...r},i)=>s(`table`,{"data-slot":`table-element`,ref:i,className:t(`table-auto border-separate border-spacing-0 caption-bottom w-full min-w-full text-left`,n),...r,children:e}));l.displayName=`TableElement`;const u=n(({children:e,className:n,...r},i)=>s(`thead`,{"data-slot":`table-head`,ref:i,className:t(`[&>tr:last-child>*]:border-b [&>tr:last-child>*]:border-card-muted`,`[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted`,`text-muted bg-base`,`[&>tr]:bg-base`,n),...r,children:e}));u.displayName=`TableHead`;const d=n(({children:e,className:n,...r},i)=>s(`tbody`,{"data-slot":`table-body`,className:t(`[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted`,`text-body`,`[&>tr]:bg-card [&>tr]:not-only:hover:bg-card-hover`,n),ref:i,...r,children:e}));d.displayName=`TableBody`;const f=n(({children:e,className:n,...r},i)=>s(`tfoot`,{"data-slot":`table-foot`,ref:i,className:t(`font-medium text-body`,`[&>tr:first-child>*]:border-t [&>tr:first-child>*]:border-card-muted`,`[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted`,`[&>tr]:bg-gray-50/50 [&>tr]:hover:bg-card-hover`,n),...r,children:e}));f.displayName=`TableFoot`;const p=n(({children:e,className:n,...r},i)=>s(`tr`,{"data-slot":`table-row`,ref:i,className:t(n),...r,children:e}));p.displayName=`TableRow`;const m=n(({children:e,className:n,...r},i)=>s(`th`,{"data-slot":`table-header`,ref:i,className:t(`h-11 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0`,n),...r,children:e}));m.displayName=`TableHeader`;const h=n(({children:e,className:n,...r},i)=>s(`td`,{"data-slot":`table-cell`,ref:i,className:t(`p-3 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-mono`,n),...r,children:e}));h.displayName=`TableCell`;const g=n(({children:e,className:n,...r},i)=>s(`caption`,{"data-slot":`table-caption`,ref:i,className:t(`py-4 text-sm text-gray-500`,`border-t border-card-muted`,n),...r,children:e}));g.displayName=`TableCaption`;const _={Body:d,Caption:g,Cell:h,Element:l,Foot:f,Head:u,Header:m,Root:c,Row:p};function v(){let e=a(null),[t,n]=o({hasOverflow:!1,scrolledToStart:!0,scrolledToEnd:!1});return r(()=>{let t=e.current;if(!t)return;let r=0,i=()=>{let e=t.scrollWidth>t.clientWidth,r=t.scrollLeft<1,i=Math.abs(t.scrollWidth-t.scrollLeft-t.clientWidth)<1;n(t=>t.hasOverflow!==e||t.scrolledToStart!==r||t.scrolledToEnd!==i?{hasOverflow:e,scrolledToStart:r,scrolledToEnd:i}:t)},a=()=>{r===0&&(r=requestAnimationFrame(()=>{r=0,i()}))},o=new ResizeObserver(a);o.observe(t);let s=new MutationObserver(a);return s.observe(t,{childList:!0,subtree:!0}),t.addEventListener(`scroll`,a,{passive:!0}),i(),()=>{cancelAnimationFrame(r),o.disconnect(),s.disconnect(),t.removeEventListener(`scroll`,a)}},[]),i(()=>({ref:e,state:t}),[t])}export{_ as t};