@ngrok/mantle 0.79.3 → 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 (193) 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.d.ts +3 -2
  37. package/dist/code.js +1 -1
  38. package/dist/combobox.d.ts +190 -11
  39. package/dist/combobox.js +1 -1
  40. package/dist/command.d.ts +285 -81
  41. package/dist/command.js +1 -1
  42. package/dist/compose-refs-BdBMM9ga.js +1 -0
  43. package/dist/data-table.d.ts +33 -5
  44. package/dist/data-table.js +1 -1
  45. package/dist/description-list.d.ts +79 -6
  46. package/dist/description-list.js +1 -1
  47. package/dist/dialog-CQ2C6vkE.js +1 -0
  48. package/dist/dialog.d.ts +239 -18
  49. package/dist/dialog.js +1 -1
  50. package/dist/dropdown-menu-CSCDdA3K.js +1 -0
  51. package/dist/{dropdown-menu-DP_Ne9Mr.d.ts → dropdown-menu-CoyozLzy.d.ts} +170 -29
  52. package/dist/dropdown-menu.d.ts +2 -2
  53. package/dist/dropdown-menu.js +1 -1
  54. package/dist/empty.d.ts +1 -1
  55. package/dist/empty.js +1 -1
  56. package/dist/field.d.ts +596 -45
  57. package/dist/field.js +1 -1
  58. package/dist/flag.d.ts +0 -3
  59. package/dist/flag.js +1 -1
  60. package/dist/hooks.d.ts +3 -4
  61. package/dist/hooks.js +1 -1
  62. package/dist/hover-card.d.ts +54 -4
  63. package/dist/hover-card.js +1 -1
  64. package/dist/{icon-Cevjo93X.d.ts → icon-BDqpcZ-n.d.ts} +1 -1
  65. package/dist/icon-CGgMKpJg.js +1 -0
  66. package/dist/{icon-button-BvQvT790.d.ts → icon-button-C1AfGnQx.d.ts} +6 -60
  67. package/dist/icon-button-DiOhreJD.js +1 -0
  68. package/dist/icon.d.ts +2 -2
  69. package/dist/icon.js +1 -1
  70. package/dist/icons.d.ts +5 -13
  71. package/dist/icons.js +1 -1
  72. package/dist/{in-view-nkSOdED2.d.ts → in-view-DDEGUKDR.d.ts} +17 -9
  73. package/dist/index-B8mIWKIU.d.ts +211 -0
  74. package/dist/{index-Rv8RL7xy.d.ts → index-BtwKJTLq.d.ts} +1 -1
  75. package/dist/{index-BSAizFod.d.ts → index-C2jj8U4a.d.ts} +5 -5
  76. package/dist/index-CdPXa9h1.d.ts +1 -0
  77. package/dist/{index-D47aqlpz.d.ts → index-DA4ig3gj.d.ts} +1 -1
  78. package/dist/input-CVyAVbim.js +1 -0
  79. package/dist/{types-C19IR7jf.d.ts → input-DV9M6K4v.d.ts} +42 -2
  80. package/dist/input.d.ts +4 -55
  81. package/dist/input.js +1 -1
  82. package/dist/{label-v2-bv98k.d.ts → label-C6YH9skg.d.ts} +8 -6
  83. package/dist/label-D-D11mlp.js +1 -0
  84. package/dist/label.d.ts +1 -1
  85. package/dist/label.js +1 -1
  86. package/dist/list.d.ts +150 -6
  87. package/dist/list.js +1 -1
  88. package/dist/llms.txt +1 -1
  89. package/dist/main.d.ts +20 -4
  90. package/dist/main.js +1 -1
  91. package/dist/media-object.d.ts +27 -4
  92. package/dist/media-object.js +1 -1
  93. package/dist/multi-select.d.ts +312 -15
  94. package/dist/multi-select.js +1 -1
  95. package/dist/otp-input.d.ts +129 -5
  96. package/dist/otp-input.js +1 -1
  97. package/dist/pagination.d.ts +70 -6
  98. package/dist/pagination.js +1 -1
  99. package/dist/popover-CBMADtjV.js +1 -0
  100. package/dist/popover.d.ts +1 -181
  101. package/dist/popover.js +1 -1
  102. package/dist/primitive-CJRIlrLz.d.ts +31 -0
  103. package/dist/primitive-DCPHJsRs.js +1 -0
  104. package/dist/progress.js +1 -1
  105. package/dist/qr-code.d.ts +113 -5
  106. package/dist/qr-code.js +1 -1
  107. package/dist/radio-group.d.ts +128 -23
  108. package/dist/radio-group.js +1 -1
  109. package/dist/sandboxed-on-click.d.ts +2 -2
  110. package/dist/sandboxed-on-click.js +1 -1
  111. package/dist/select-SR_9-bxA.js +1 -0
  112. package/dist/select-idm1jy7y.d.ts +600 -0
  113. package/dist/select.d.ts +1 -1
  114. package/dist/select.js +1 -1
  115. package/dist/selectable-list.d.ts +252 -298
  116. package/dist/selectable-list.js +1 -1
  117. package/dist/separator-B5UmkVRL.d.ts +75 -0
  118. package/dist/separator-bpE_kooz.js +1 -0
  119. package/dist/separator.d.ts +1 -52
  120. package/dist/separator.js +1 -1
  121. package/dist/sheet.d.ts +295 -21
  122. package/dist/sheet.js +1 -1
  123. package/dist/skeleton-CsbUHbBA.js +1 -0
  124. package/dist/skeleton.d.ts +4 -7
  125. package/dist/skeleton.js +1 -1
  126. package/dist/skip-to-main-link.d.ts +24 -4
  127. package/dist/skip-to-main-link.js +1 -1
  128. package/dist/slot-CDk0Bb9z.js +1 -0
  129. package/dist/slot.d.ts +1 -1
  130. package/dist/slot.js +1 -1
  131. package/dist/{sort-BPX2Fk9t.js → sort-B_DDQcVD.js} +1 -1
  132. package/dist/split-button.d.ts +28 -13
  133. package/dist/split-button.js +1 -1
  134. package/dist/{svg-only-BFeFS1aa.d.ts → svg-only-CdI_v82i.d.ts} +1 -1
  135. package/dist/svg-only-d-nMCfAI.js +1 -0
  136. package/dist/switch.d.ts +9 -6
  137. package/dist/switch.js +1 -1
  138. package/dist/table-DUSvU_Jw.d.ts +875 -0
  139. package/dist/table-GDkapNFi.js +1 -0
  140. package/dist/table.d.ts +1 -1
  141. package/dist/table.js +1 -1
  142. package/dist/tabs.d.ts +135 -21
  143. package/dist/tabs.js +1 -1
  144. package/dist/text-area.d.ts +1 -1
  145. package/dist/text-area.js +1 -1
  146. package/dist/theme-provider-BftkIiZn.js +1 -0
  147. package/dist/theme-switcher.d.ts +110 -29
  148. package/dist/theme-switcher.js +1 -1
  149. package/dist/theme-wVnzzx2F.js +1 -0
  150. package/dist/theme.d.ts +53 -14
  151. package/dist/theme.js +1 -1
  152. package/dist/toast-DKgMRv4F.js +1 -0
  153. package/dist/toast.d.ts +98 -10
  154. package/dist/toast.js +1 -1
  155. package/dist/tooltip.d.ts +28 -1
  156. package/dist/tooltip.js +1 -1
  157. package/dist/{traffic-policy-file-0g5RXFqu.js → traffic-policy-file-CF1lbWtp.js} +1 -1
  158. package/dist/types.d.ts +2 -2
  159. package/dist/utils.d.ts +1 -1
  160. package/dist/utils.js +1 -1
  161. package/dist/virtual-UrzmaSQm.js +1 -0
  162. package/dist/well.d.ts +3 -3
  163. package/dist/well.js +1 -1
  164. package/package.json +3 -3
  165. package/dist/anchor-C_tjSVy6.js +0 -1
  166. package/dist/as-child-CYEVu1WY.d.ts +0 -23
  167. package/dist/button-5t6-JS_I.js +0 -1
  168. package/dist/button-ClC60Nzg.js +0 -1
  169. package/dist/checkbox-DJ2xl7Rc.js +0 -1
  170. package/dist/choice-DOdyNzFC.js +0 -1
  171. package/dist/compose-refs-Cjf2gfB8.js +0 -1
  172. package/dist/dialog-vxLIvB8M.js +0 -1
  173. package/dist/dropdown-menu-Bt1aKF1g.js +0 -1
  174. package/dist/icon-CDtYjF_H.js +0 -1
  175. package/dist/icon-button-DV2-GZHf.js +0 -1
  176. package/dist/index-g2rfwNCH.d.ts +0 -1
  177. package/dist/input-Ct1YOqSy.js +0 -1
  178. package/dist/label-BMlHW_2D.js +0 -1
  179. package/dist/popover-D5WxxnBY.js +0 -1
  180. package/dist/primitive-C64-m48O.d.ts +0 -13
  181. package/dist/primitive-IKruV2iB.js +0 -1
  182. package/dist/select-Bwt2YduR.d.ts +0 -345
  183. package/dist/select-D-5u0Blc.js +0 -1
  184. package/dist/separator-kBnnv3Cw.js +0 -1
  185. package/dist/skeleton-Bu3tgNcW.js +0 -1
  186. package/dist/slot-DmPrjM7N.js +0 -1
  187. package/dist/svg-only-DDx6FtJd.js +0 -1
  188. package/dist/table-CPH2md2-.js +0 -1
  189. package/dist/table-CwFHXC-G.d.ts +0 -414
  190. package/dist/theme-D3MDng6U.js +0 -1
  191. package/dist/theme-provider-C9zpDyJW.js +0 -1
  192. package/dist/toast-BsCjaMVS.js +0 -1
  193. package/dist/virtual-DZMBu7Ch.js +0 -1
@@ -1,4 +1,4 @@
1
- import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
1
+ import { n as WithAsChild } from "./as-child-D23mGo4f.js";
2
2
  import { o as WithValidation } from "./validation-7QeiTFwl.js";
3
3
  import { ComponentProps, ReactNode } from "react";
4
4
  import { OTPInput, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
@@ -6,7 +6,75 @@ import { OTPInput, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND
6
6
  type OtpInputRootProps = Omit<ComponentProps<typeof OTPInput>, "render" | "children"> & WithValidation & {
7
7
  children?: ReactNode;
8
8
  };
9
+ /**
10
+ * The root of the OTP input. Renders an accessible single hidden input that
11
+ * captures keystrokes, paste events, and autofill, and exposes per-slot state
12
+ * (active, char, fake caret) to descendant `OtpInput.Slot` parts via context.
13
+ *
14
+ * Wraps the `input-otp` library by Guilherme Rodz.
15
+ *
16
+ * Pass `validation="error"` (or `"success"` / `"warning"`) to recolor each
17
+ * group's outer borders and the active focus ring with the matching validation hue.
18
+ * `validation="error"` also sets `aria-invalid` on the underlying input so
19
+ * assistive tech announces the failure state.
20
+ *
21
+ * When composing with `Field.Item`, wrap `OtpInput.Root` in `Field.Control`.
22
+ * `Field.Control` flows the generated `id`, `aria-invalid`, `aria-describedby`,
23
+ * and `aria-errormessage` through to the underlying focusable input via
24
+ * `FieldControlContext`.
25
+ *
26
+ * @see https://mantle.ngrok.com/components/forms/otp-input
27
+ *
28
+ * @example
29
+ * ```tsx
30
+ * <OtpInput.Root maxLength={6}>
31
+ * <OtpInput.Group>
32
+ * <OtpInput.Slot index={0} />
33
+ * <OtpInput.Slot index={1} />
34
+ * <OtpInput.Slot index={2} />
35
+ * </OtpInput.Group>
36
+ * <OtpInput.Separator />
37
+ * <OtpInput.Group>
38
+ * <OtpInput.Slot index={3} />
39
+ * <OtpInput.Slot index={4} />
40
+ * <OtpInput.Slot index={5} />
41
+ * </OtpInput.Group>
42
+ * </OtpInput.Root>
43
+ * ```
44
+ */
45
+ declare const Root: {
46
+ ({ "aria-invalid": ariaInvalid, children, className, containerClassName, ref, validation: _validation, ...props }: OtpInputRootProps): import("react").JSX.Element;
47
+ displayName: string;
48
+ };
9
49
  type OtpInputGroupProps = ComponentProps<"div"> & WithAsChild;
50
+ /**
51
+ * Groups one or more `OtpInput.Slot` parts into a visually-connected segment.
52
+ * Slots inside a group share rounded corners on the outer edges and join with
53
+ * shared borders between adjacent slots.
54
+ *
55
+ * @see https://mantle.ngrok.com/components/forms/otp-input
56
+ *
57
+ * @example
58
+ * ```tsx
59
+ * <OtpInput.Root maxLength={6}>
60
+ * <OtpInput.Group>
61
+ * <OtpInput.Slot index={0} />
62
+ * <OtpInput.Slot index={1} />
63
+ * <OtpInput.Slot index={2} />
64
+ * </OtpInput.Group>
65
+ * <OtpInput.Separator />
66
+ * <OtpInput.Group>
67
+ * <OtpInput.Slot index={3} />
68
+ * <OtpInput.Slot index={4} />
69
+ * <OtpInput.Slot index={5} />
70
+ * </OtpInput.Group>
71
+ * </OtpInput.Root>
72
+ * ```
73
+ */
74
+ declare const Group: {
75
+ ({ asChild, children, className, ref, ...props }: OtpInputGroupProps): import("react").JSX.Element;
76
+ displayName: string;
77
+ };
10
78
  type OtpInputSlotProps = ComponentProps<"div"> & {
11
79
  /**
12
80
  * The zero-based index of the character slot to render. Must be a valid
@@ -14,6 +82,35 @@ type OtpInputSlotProps = ComponentProps<"div"> & {
14
82
  */
15
83
  index: number;
16
84
  };
85
+ /**
86
+ * Renders a single character slot for the OTP input. Reads its display state
87
+ * (the typed character, active/focused state, and fake caret position) from
88
+ * the nearest `OtpInput.Root` via context — so this part must always be
89
+ * rendered inside an `OtpInput.Root`.
90
+ *
91
+ * @see https://mantle.ngrok.com/components/forms/otp-input
92
+ *
93
+ * @example
94
+ * ```tsx
95
+ * <OtpInput.Root maxLength={6}>
96
+ * <OtpInput.Group>
97
+ * <OtpInput.Slot index={0} />
98
+ * <OtpInput.Slot index={1} />
99
+ * <OtpInput.Slot index={2} />
100
+ * </OtpInput.Group>
101
+ * <OtpInput.Separator />
102
+ * <OtpInput.Group>
103
+ * <OtpInput.Slot index={3} />
104
+ * <OtpInput.Slot index={4} />
105
+ * <OtpInput.Slot index={5} />
106
+ * </OtpInput.Group>
107
+ * </OtpInput.Root>
108
+ * ```
109
+ */
110
+ declare const OtpInputSlotImpl: {
111
+ ({ className, index, ref, ...props }: OtpInputSlotProps): import("react").JSX.Element;
112
+ displayName: string;
113
+ };
17
114
  type OtpInputSeparatorProps = ComponentProps<"div"> & WithAsChild & {
18
115
  /**
19
116
  * If `true`, the separator will be rendered with `role="separator"` so
@@ -26,6 +123,33 @@ type OtpInputSeparatorProps = ComponentProps<"div"> & WithAsChild & {
26
123
  */
27
124
  semantic?: boolean;
28
125
  };
126
+ /**
127
+ * A visual separator between two `OtpInput.Group` segments. Renders a minus
128
+ * icon by default; pass `children` to override the visual.
129
+ *
130
+ * @see https://mantle.ngrok.com/components/forms/otp-input
131
+ *
132
+ * @example
133
+ * ```tsx
134
+ * <OtpInput.Root maxLength={6}>
135
+ * <OtpInput.Group>
136
+ * <OtpInput.Slot index={0} />
137
+ * <OtpInput.Slot index={1} />
138
+ * <OtpInput.Slot index={2} />
139
+ * </OtpInput.Group>
140
+ * <OtpInput.Separator />
141
+ * <OtpInput.Group>
142
+ * <OtpInput.Slot index={3} />
143
+ * <OtpInput.Slot index={4} />
144
+ * <OtpInput.Slot index={5} />
145
+ * </OtpInput.Group>
146
+ * </OtpInput.Root>
147
+ * ```
148
+ */
149
+ declare const Separator: {
150
+ ({ asChild, children, className, ref, semantic, ...props }: OtpInputSeparatorProps): import("react").JSX.Element;
151
+ displayName: string;
152
+ };
29
153
  /**
30
154
  * Compound component for capturing one-time passcodes (OTP). Combines a
31
155
  * single hidden input (handling paste, autofill, and IME) with a row of
@@ -86,7 +210,7 @@ declare const OtpInput: {
86
210
  * </OtpInput.Root>
87
211
  * ```
88
212
  */
89
- readonly Root: import("react").ForwardRefExoticComponent<Omit<OtpInputRootProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
213
+ readonly Root: typeof Root;
90
214
  /**
91
215
  * Groups one or more `OtpInput.Slot` parts into a visually-connected
92
216
  * segment with shared rounded corners and joined borders.
@@ -110,7 +234,7 @@ declare const OtpInput: {
110
234
  * </OtpInput.Root>
111
235
  * ```
112
236
  */
113
- readonly Group: import("react").ForwardRefExoticComponent<Omit<OtpInputGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
237
+ readonly Group: typeof Group;
114
238
  /**
115
239
  * A single character slot. Must be rendered inside an `OtpInput.Root`.
116
240
  * Reads its character, active state, and fake caret position from the
@@ -135,7 +259,7 @@ declare const OtpInput: {
135
259
  * </OtpInput.Root>
136
260
  * ```
137
261
  */
138
- readonly Slot: import("react").ForwardRefExoticComponent<Omit<OtpInputSlotProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
262
+ readonly Slot: typeof OtpInputSlotImpl;
139
263
  /**
140
264
  * A visual separator between two `OtpInput.Group` segments. Renders a
141
265
  * minus icon by default; pass `children` to override.
@@ -159,7 +283,7 @@ declare const OtpInput: {
159
283
  * </OtpInput.Root>
160
284
  * ```
161
285
  */
162
- readonly Separator: import("react").ForwardRefExoticComponent<Omit<OtpInputSeparatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
286
+ readonly Separator: typeof Separator;
163
287
  };
164
288
  //#endregion
165
289
  export { OtpInput, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS };
package/dist/otp-input.js CHANGED
@@ -1 +1 @@
1
- import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-DmPrjM7N.js";import{t as n}from"./types-D85fCNV3.js";import{a as r,r as i}from"./validation-Bpptk_9t.js";import{t as a}from"./field-context-BR01g789.js";import{forwardRef as o,useContext as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{MinusIcon as u}from"@phosphor-icons/react/Minus";import{OTPInput as d,OTPInputContext as f,REGEXP_ONLY_CHARS as p,REGEXP_ONLY_DIGITS as m,REGEXP_ONLY_DIGITS_AND_CHARS as h}from"input-otp";const g={error:`danger`,success:`success`,warning:`warning`},_=e=>`var(--color-${e}-600)`,v=e=>`var(--ring-color-focus-${e})`,y=({totalActive:e,total:t})=>e===0?`idle`:e===1?`caret`:e===t?`all`:`range`,b=({children:e,validation:t})=>{let r=s(f),i=r.slots.length,a=r.slots.reduce((e,t)=>e+ +!!t.isActive,0),o=y({totalActive:a,total:i}),l=t?g[t]:void 0,u=l?n({"--otp-validation-border":_(l),"--otp-validation-ring":v(l)}):void 0;return c(`div`,{className:`group/otp contents`,"data-otp-state":o,"data-validation":t||void 0,style:u,children:e})},x=o(({"aria-invalid":t,children:n,className:o,containerClassName:l,validation:u,...f},p)=>{let m=r(),h=s(a),{ariaInvalid:g,validation:_}=i({"aria-invalid":t,defaultAriaInvalid:!1,validation:u??m});return c(d,{ref:p,"aria-invalid":g,"data-slot":`otp-input`,containerClassName:e(`flex items-center gap-2 has-disabled:opacity-50`,l),className:e(`disabled:cursor-not-allowed`,o),...f,...h?{"aria-describedby":h[`aria-describedby`],"aria-errormessage":h[`aria-errormessage`],id:h.id,name:h.name}:void 0,children:c(b,{validation:_,children:n})})});x.displayName=`OtpInput`;const S=o(({asChild:n,children:r,className:i,...a},o)=>c(n?t:`div`,{ref:o,"data-slot":`otp-input-group`,className:e(`relative flex items-center rounded-md`,`has-[[data-active]~[data-active]]:ring-focus-accent has-[[data-active]~[data-active]]:ring-4`,`group-data-validation/otp:has-[[data-active]~[data-active]]:ring-(--otp-validation-ring)`,i),...a,children:r}));S.displayName=`OtpInputGroup`;const C=o(({className:t,index:n,...r},i)=>{let a=s(f).slots[n],o=a?.char??null,u=a?.hasFakeCaret??!1;return l(`div`,{ref:i,"data-slot":`otp-input-slot`,"data-active":a?.isActive??!1?``:void 0,className:e(`border-form bg-form text-strong relative flex h-10 w-10 items-center justify-center border-y border-r text-sm shadow-sm outline-hidden transition-all duration-150 ease-out`,`first:rounded-l-md first:border-l last:rounded-r-md`,`[&:has(+[data-active])]:group-data-[otp-state=caret]/otp:border-r-transparent`,`data-active:group-data-[otp-state=caret]/otp:border-accent-600`,`data-active:group-data-[otp-state=caret]/otp:border-l`,`data-active:group-data-[otp-state=caret]/otp:ring-focus-accent`,`data-active:group-data-[otp-state=caret]/otp:z-20`,`data-active:group-data-[otp-state=caret]/otp:ring-4`,`group-data-[otp-state=all]/otp:border-accent-600`,`group-data-validation/otp:border-y-(--otp-validation-border)`,`group-data-validation/otp:first:border-l-(--otp-validation-border)`,`group-data-validation/otp:last:border-r-(--otp-validation-border)`,`group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:border-(--otp-validation-border)`,`group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:ring-(--otp-validation-ring)`,`group-data-validation/otp:group-data-[otp-state=all]/otp:border-(--otp-validation-border)`,t),...r,children:[o,u&&c(`div`,{className:`pointer-events-none absolute inset-0 flex items-center justify-center`,children:c(`div`,{className:`bg-strong h-4 w-px animate-pulse`})})]})});C.displayName=`OtpInputSlot`;const w=o(({asChild:n,children:r,className:i,semantic:a=!1,...o},s)=>{let l=n?t:`div`,d=a?{role:`separator`}:{"aria-hidden":!0,role:`none`};return c(l,{ref:s,"data-slot":`otp-input-separator`,className:e(`text-separator flex items-center`,i),...d,...o,children:r??c(u,{weight:`bold`})})});w.displayName=`OtpInputSeparator`;const T={Root:x,Group:S,Slot:C,Separator:w};export{T as OtpInput,p as REGEXP_ONLY_CHARS,m as REGEXP_ONLY_DIGITS,h as REGEXP_ONLY_DIGITS_AND_CHARS};
1
+ import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CDk0Bb9z.js";import{t as n}from"./types-D85fCNV3.js";import{a as r,r as i}from"./validation-Bpptk_9t.js";import{t as a}from"./field-context-BR01g789.js";import{useContext as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{MinusIcon as l}from"@phosphor-icons/react/Minus";import{OTPInput as u,OTPInputContext as d,REGEXP_ONLY_CHARS as f,REGEXP_ONLY_DIGITS as p,REGEXP_ONLY_DIGITS_AND_CHARS as m}from"input-otp";const h={error:`danger`,success:`success`,warning:`warning`},g=e=>`var(--color-${e}-600)`,_=e=>`var(--ring-color-focus-${e})`,v=({totalActive:e,total:t})=>e===0?`idle`:e===1?`caret`:e===t?`all`:`range`,y=({children:e,validation:t})=>{let r=o(d),i=r.slots.length,a=r.slots.reduce((e,t)=>e+ +!!t.isActive,0),c=v({totalActive:a,total:i}),l=t?h[t]:void 0,u=l?n({"--otp-validation-border":g(l),"--otp-validation-ring":_(l)}):void 0;return s(`div`,{className:`group/otp contents`,"data-otp-state":c,"data-validation":t||void 0,style:u,children:e})},b=({"aria-invalid":t,children:n,className:c,containerClassName:l,ref:d,validation:f,...p})=>{let m=r(),h=o(a),{ariaInvalid:g,validation:_}=i({"aria-invalid":t,defaultAriaInvalid:!1,validation:f??m});return s(u,{ref:d,"aria-invalid":g,"data-slot":`otp-input`,containerClassName:e(`flex items-center gap-2 has-disabled:opacity-50`,l),className:e(`disabled:cursor-not-allowed`,c),...p,...h?{"aria-describedby":h[`aria-describedby`],"aria-errormessage":h[`aria-errormessage`],id:h.id,name:h.name}:void 0,children:s(y,{validation:_,children:n})})};b.displayName=`OtpInput`;const x=({asChild:n,children:r,className:i,ref:a,...o})=>s(n?t:`div`,{ref:a,"data-slot":`otp-input-group`,className:e(`relative flex items-center rounded-md`,`has-[[data-active]~[data-active]]:ring-focus-accent has-[[data-active]~[data-active]]:ring-4`,`group-data-validation/otp:has-[[data-active]~[data-active]]:ring-(--otp-validation-ring)`,i),...o,children:r});x.displayName=`OtpInputGroup`;const S=({className:t,index:n,ref:r,...i})=>{let a=o(d).slots[n],l=a?.char??null,u=a?.hasFakeCaret??!1;return c(`div`,{ref:r,"data-slot":`otp-input-slot`,"data-active":a?.isActive??!1?``:void 0,className:e(`border-form bg-form text-strong relative flex h-10 w-10 items-center justify-center border-y border-r text-sm shadow-sm outline-hidden transition-all duration-150 ease-out`,`first:rounded-l-md first:border-l last:rounded-r-md`,`[&:has(+[data-active])]:group-data-[otp-state=caret]/otp:border-r-transparent`,`data-active:group-data-[otp-state=caret]/otp:border-accent-600`,`data-active:group-data-[otp-state=caret]/otp:border-l`,`data-active:group-data-[otp-state=caret]/otp:ring-focus-accent`,`data-active:group-data-[otp-state=caret]/otp:z-20`,`data-active:group-data-[otp-state=caret]/otp:ring-4`,`group-data-[otp-state=all]/otp:border-accent-600`,`group-data-validation/otp:border-y-(--otp-validation-border)`,`group-data-validation/otp:first:border-l-(--otp-validation-border)`,`group-data-validation/otp:last:border-r-(--otp-validation-border)`,`group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:border-(--otp-validation-border)`,`group-data-validation/otp:data-active:group-data-[otp-state=caret]/otp:ring-(--otp-validation-ring)`,`group-data-validation/otp:group-data-[otp-state=all]/otp:border-(--otp-validation-border)`,t),...i,children:[l,u&&s(`div`,{className:`pointer-events-none absolute inset-0 flex items-center justify-center`,children:s(`div`,{className:`bg-strong h-4 w-px animate-pulse`})})]})};S.displayName=`OtpInputSlot`;const C=({asChild:n,children:r,className:i,ref:a,semantic:o=!1,...c})=>{let u=n?t:`div`,d=o?{role:`separator`}:{"aria-hidden":!0,role:`none`};return s(u,{ref:a,"data-slot":`otp-input-separator`,className:e(`text-separator flex items-center`,i),...d,...c,children:r??s(l,{weight:`bold`})})};C.displayName=`OtpInputSeparator`;const w={Root:b,Group:x,Slot:S,Separator:C};export{w as OtpInput,f as REGEXP_ONLY_CHARS,p as REGEXP_ONLY_DIGITS,m as REGEXP_ONLY_DIGITS_AND_CHARS};
@@ -1,6 +1,6 @@
1
- import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
2
- import { t as ButtonGroup } from "./index-BSAizFod.js";
3
- import { t as Select } from "./select-Bwt2YduR.js";
1
+ import { n as WithAsChild } from "./as-child-D23mGo4f.js";
2
+ import { t as ButtonGroup } from "./index-C2jj8U4a.js";
3
+ import { t as Select } from "./select-idm1jy7y.js";
4
4
  import { ComponentProps } from "react";
5
5
  //#region src/components/pagination/cursor-pagination.d.ts
6
6
  type CursorPaginationProps = ComponentProps<"div"> & {
@@ -9,6 +9,34 @@ type CursorPaginationProps = ComponentProps<"div"> & {
9
9
  */
10
10
  defaultPageSize: number;
11
11
  };
12
+ /**
13
+ * A pagination component for use with cursor-based pagination.
14
+ *
15
+ * Cursor-based pagination is a way of loading data in chunks by using a cursor
16
+ * from the last item on the current page to know where to start the next set,
17
+ * making sure nothing is missed or repeated. Like a linked list, but for chunks
18
+ * of data. It doesn't let you jump to a specific page or know how many total pages
19
+ * there are, but it's more efficient for large or real-time data sets.
20
+ *
21
+ * @see https://mantle.ngrok.com/components/navigation/pagination#cursorpaginationroot
22
+ *
23
+ * @example
24
+ * ```tsx
25
+ * <CursorPagination defaultPageSize={10}>
26
+ * <CursorPagination.Buttons
27
+ * hasNextPage={hasNext}
28
+ * hasPreviousPage={hasPrevious}
29
+ * onNextPage={handleNext}
30
+ * onPreviousPage={handlePrevious}
31
+ * />
32
+ * <CursorPagination.PageSizeSelect />
33
+ * </CursorPagination>
34
+ * ```
35
+ */
36
+ declare const Root: {
37
+ ({ className, children, defaultPageSize, ref, ...props }: CursorPaginationProps): import("react").JSX.Element;
38
+ displayName: string;
39
+ };
12
40
  type CursorButtonsProps = Omit<ComponentProps<typeof ButtonGroup>, "appearance"> & {
13
41
  /**
14
42
  * Whether there is a next page of data to load.
@@ -27,6 +55,25 @@ type CursorButtonsProps = Omit<ComponentProps<typeof ButtonGroup>, "appearance">
27
55
  */
28
56
  onPreviousPage?: () => void;
29
57
  };
58
+ /**
59
+ * A pair of buttons for navigating between pages of data when using cursor-based pagination.
60
+ *
61
+ * @see https://mantle.ngrok.com/components/navigation/pagination#cursorpaginationbuttons
62
+ *
63
+ * @example
64
+ * ```tsx
65
+ * <CursorPagination.Buttons
66
+ * hasNextPage={hasNext}
67
+ * hasPreviousPage={hasPrevious}
68
+ * onNextPage={() => loadNextPage()}
69
+ * onPreviousPage={() => loadPreviousPage()}
70
+ * />
71
+ * ```
72
+ */
73
+ declare const Buttons: {
74
+ ({ hasNextPage, hasPreviousPage, onNextPage, onPreviousPage, ref, ...props }: CursorButtonsProps): import("react").JSX.Element;
75
+ displayName: string;
76
+ };
30
77
  declare const defaultPageSizes: readonly [5, 10, 20, 50, 100];
31
78
  type CursorPageSizeSelectProps = Omit<ComponentProps<typeof Select.Trigger>, "children"> & {
32
79
  /**
@@ -38,6 +85,23 @@ type CursorPageSizeSelectProps = Omit<ComponentProps<typeof Select.Trigger>, "ch
38
85
  */
39
86
  onChangePageSize?: (value: number) => void;
40
87
  };
88
+ /**
89
+ * A select input for changing the number of items per page when using cursor-based pagination.
90
+ *
91
+ * @see https://mantle.ngrok.com/components/navigation/pagination#cursorpaginationpagesizeselect
92
+ *
93
+ * @example
94
+ * ```tsx
95
+ * <CursorPagination.PageSizeSelect
96
+ * pageSizes={[10, 20, 50, 100]}
97
+ * onChangePageSize={(size) => console.log('Page size changed to:', size)}
98
+ * />
99
+ * ```
100
+ */
101
+ declare const PageSizeSelect: {
102
+ ({ className, pageSizes, onChangePageSize, ref, ...rest }: CursorPageSizeSelectProps): import("react").JSX.Element;
103
+ displayName: string;
104
+ };
41
105
  type CursorPageSizeValueProps = Omit<ComponentProps<"span">, "children"> & WithAsChild;
42
106
  /**
43
107
  * Displays the current page size when using cursor-based pagination as a read-only value.
@@ -105,7 +169,7 @@ declare const CursorPagination: {
105
169
  * </CursorPagination.Root>
106
170
  * ```
107
171
  */
108
- readonly Root: import("react").ForwardRefExoticComponent<Omit<CursorPaginationProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
172
+ readonly Root: typeof Root;
109
173
  /**
110
174
  * A pair of buttons for navigating between pages of data when using cursor-based pagination.
111
175
  *
@@ -121,7 +185,7 @@ declare const CursorPagination: {
121
185
  * />
122
186
  * ```
123
187
  */
124
- readonly Buttons: import("react").ForwardRefExoticComponent<Omit<CursorButtonsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
188
+ readonly Buttons: typeof Buttons;
125
189
  /**
126
190
  * A select input for changing the number of items per page when using cursor-based pagination.
127
191
  *
@@ -135,7 +199,7 @@ declare const CursorPagination: {
135
199
  * />
136
200
  * ```
137
201
  */
138
- readonly PageSizeSelect: import("react").ForwardRefExoticComponent<Omit<CursorPageSizeSelectProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
202
+ readonly PageSizeSelect: typeof PageSizeSelect;
139
203
  /**
140
204
  * Displays the current page size when using cursor-based pagination as a read-only value.
141
205
  *
@@ -1 +1 @@
1
- import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-DmPrjM7N.js";import{t as n}from"./icon-button-DV2-GZHf.js";import{t as r}from"./button-5t6-JS_I.js";import{n as i}from"./separator-kBnnv3Cw.js";import{t as a}from"./select-D-5u0Blc.js";import{createContext as o,forwardRef as s,useContext as c,useEffect as l,useMemo as u,useState as d}from"react";import f from"tiny-invariant";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{CaretRightIcon as h}from"@phosphor-icons/react/CaretRight";import{CaretLeftIcon as g}from"@phosphor-icons/react/CaretLeft";const _=o(void 0),v=s(({className:t,children:n,defaultPageSize:r,...i},a)=>{let[o,s]=d(r),c=u(()=>({defaultPageSize:r,pageSize:o,setPageSize:s}),[r,o]);return p(_.Provider,{value:c,children:p(`div`,{"data-slot":`cursor-pagination`,className:e(`inline-flex items-center justify-between gap-2`,t),ref:a,...i,children:n})})});v.displayName=`CursorPagination`;const y=s(({hasNextPage:e,hasPreviousPage:t,onNextPage:a,onPreviousPage:o,...s},c)=>m(r,{"data-slot":`cursor-pagination-buttons`,appearance:`panel`,ref:c,...s,children:[p(n,{"data-slot":`cursor-pagination-previous`,appearance:`ghost`,disabled:!t,icon:p(g,{}),intent:`neutral`,label:`Previous page`,onClick:o,size:`sm`,type:`button`}),p(i,{"data-slot":`cursor-pagination-separator`,orientation:`vertical`,className:`min-h-5`}),p(n,{"data-slot":`cursor-pagination-next`,appearance:`ghost`,disabled:!e,icon:p(h,{}),intent:`neutral`,label:`Next page`,onClick:a,size:`sm`,type:`button`})]}));y.displayName=`CursorButtons`;const b=[5,10,20,50,100],x=s(({className:t,pageSizes:n=b,onChangePageSize:r,...i},o)=>{let s=c(_);return f(s,`CursorPageSizeSelect must be used as a child of a CursorPagination component`),f(n.includes(s.defaultPageSize),`CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes`),f(n.includes(s.pageSize),`CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes`),m(a.Root,{defaultValue:`${s.pageSize}`,onValueChange:e=>{let t=Number.parseInt(e,10);Number.isNaN(t)&&(t=s.defaultPageSize),s.setPageSize(t),r?.(t)},children:[p(a.Trigger,{ref:o,"data-slot":`cursor-pagination-page-size-select`,className:e(`w-auto min-w-36`,t),value:s.pageSize,...i,children:p(a.Value,{})}),p(a.Content,{width:`trigger`,children:n.map(e=>m(a.Item,{value:`${e}`,children:[e,` per page`]},e))})]})});x.displayName=`CursorPageSizeSelect`;function S({asChild:n=!1,className:r,...i}){let a=c(_);return f(a,`CursorPageSizeValue must be used as a child of a CursorPagination component`),m(n?t:`span`,{"data-slot":`cursor-pagination-page-size-value`,className:e(`text-muted text-sm font-normal`,r),...i,children:[a.pageSize,` per page`]})}S.displayName=`CursorPageSizeValue`;const C={Root:v,Buttons:y,PageSizeSelect:x,PageSizeValue:S};function w({listSize:e,pageSize:t}){let[n,r]=d(1),[i,a]=d(t);l(()=>{a(t),r(1)},[t]),l(()=>{r(1)},[e]);let o=Math.ceil(e/i),s=(n-1)*i,c=n>1,u=n<o;function f(e){r(Math.max(1,Math.min(e,o)))}function p(){u&&r(e=>Math.min(e+1,o))}function m(){c&&r(e=>Math.max(e-1,1))}function h(e){a(e),r(1)}function g(){r(o)}function _(){r(1)}return{currentPage:n,goToFirstPage:_,goToLastPage:g,goToPage:f,hasNextPage:u,hasPreviousPage:c,nextPage:p,offset:s,pageSize:i,previousPage:m,setPageSize:h,totalPages:o}}function T(e,t){return e.slice(t.offset,t.offset+t.pageSize)}export{C as CursorPagination,T as getOffsetPaginatedSlice,w as useOffsetPagination};
1
+ import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CDk0Bb9z.js";import{t as n}from"./icon-button-DiOhreJD.js";import{t as r}from"./button-D9n09xUg.js";import{n as i}from"./separator-bpE_kooz.js";import{t as a}from"./select-SR_9-bxA.js";import{createContext as o,useContext as s,useEffect as c,useMemo as l,useState as u}from"react";import d from"tiny-invariant";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{CaretRightIcon as m}from"@phosphor-icons/react/CaretRight";import{CaretLeftIcon as h}from"@phosphor-icons/react/CaretLeft";const g=o(void 0),_=({className:t,children:n,defaultPageSize:r,ref:i,...a})=>{let[o,s]=u(r),c=l(()=>({defaultPageSize:r,pageSize:o,setPageSize:s}),[r,o]);return f(g.Provider,{value:c,children:f(`div`,{"data-slot":`cursor-pagination`,className:e(`inline-flex items-center justify-between gap-2`,t),ref:i,...a,children:n})})};_.displayName=`CursorPagination`;const v=({hasNextPage:e,hasPreviousPage:t,onNextPage:a,onPreviousPage:o,ref:s,...c})=>p(r,{"data-slot":`cursor-pagination-buttons`,appearance:`panel`,ref:s,...c,children:[f(n,{"data-slot":`cursor-pagination-previous`,appearance:`ghost`,disabled:!t,icon:f(h,{}),intent:`neutral`,label:`Previous page`,onClick:o,size:`sm`,type:`button`}),f(i,{"data-slot":`cursor-pagination-separator`,orientation:`vertical`,className:`min-h-5`}),f(n,{"data-slot":`cursor-pagination-next`,appearance:`ghost`,disabled:!e,icon:f(m,{}),intent:`neutral`,label:`Next page`,onClick:a,size:`sm`,type:`button`})]});v.displayName=`CursorButtons`;const y=[5,10,20,50,100],b=({className:t,pageSizes:n=y,onChangePageSize:r,ref:i,...o})=>{let c=s(g);return d(c,`CursorPageSizeSelect must be used as a child of a CursorPagination component`),d(n.includes(c.defaultPageSize),`CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes`),d(n.includes(c.pageSize),`CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes`),p(a.Root,{defaultValue:`${c.pageSize}`,onValueChange:e=>{let t=Number.parseInt(e,10);Number.isNaN(t)&&(t=c.defaultPageSize),c.setPageSize(t),r?.(t)},children:[f(a.Trigger,{ref:i,"data-slot":`cursor-pagination-page-size-select`,className:e(`w-auto min-w-36`,t),value:c.pageSize,...o,children:f(a.Value,{})}),f(a.Content,{width:`trigger`,children:n.map(e=>p(a.Item,{value:`${e}`,children:[e,` per page`]},e))})]})};b.displayName=`CursorPageSizeSelect`;function x({asChild:n=!1,className:r,...i}){let a=s(g);return d(a,`CursorPageSizeValue must be used as a child of a CursorPagination component`),p(n?t:`span`,{"data-slot":`cursor-pagination-page-size-value`,className:e(`text-muted text-sm font-normal`,r),...i,children:[a.pageSize,` per page`]})}x.displayName=`CursorPageSizeValue`;const S={Root:_,Buttons:v,PageSizeSelect:b,PageSizeValue:x};function C({listSize:e,pageSize:t}){let[n,r]=u(1),[i,a]=u(t);c(()=>{a(t),r(1)},[t]),c(()=>{r(1)},[e]);let o=Math.ceil(e/i),s=(n-1)*i,l=n>1,d=n<o;function f(e){r(Math.max(1,Math.min(e,o)))}function p(){d&&r(e=>Math.min(e+1,o))}function m(){l&&r(e=>Math.max(e-1,1))}function h(e){a(e),r(1)}function g(){r(o)}function _(){r(1)}return{currentPage:n,goToFirstPage:_,goToLastPage:g,goToPage:f,hasNextPage:d,hasPreviousPage:l,nextPage:p,offset:s,pageSize:i,previousPage:m,setPageSize:h,totalPages:o}}function w(e,t){return e.slice(t.offset,t.offset+t.pageSize)}export{S as CursorPagination,w as getOffsetPaginatedSlice,C as useOffsetPagination};
@@ -0,0 +1 @@
1
+ import{t as e}from"./cx-IiQEAKf5.js";import{jsx as t}from"react/jsx-runtime";import*as n from"@radix-ui/react-popover";const r=n.Root;r.displayName=`Popover`;const i=n.Trigger;i.displayName=`PopoverTrigger`;const a=n.Anchor;a.displayName=`PopoverAnchor`;const o=n.Close;o.displayName=`PopoverClose`;const s=({align:r=`center`,className:i,onClick:a,preferredWidth:o=`max-w-72`,ref:s,sideOffset:c=4,...l})=>t(n.Portal,{children:t(n.Content,{align:r,"data-slot":`popover-content`,className:e(`text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 rounded-md border p-4 shadow-md outline-hidden`,o,i),onClick:e=>{e.stopPropagation(),a?.(e)},ref:s,sideOffset:c,...l})});s.displayName=`PopoverContent`;const c={Root:r,Anchor:a,Close:o,Content:s,Trigger:i};export{c as t};
package/dist/popover.d.ts CHANGED
@@ -1,182 +1,2 @@
1
- import * as PopoverPrimitive from "@radix-ui/react-popover";
2
- //#region src/components/popover/popover.d.ts
3
- /**
4
- * A floating overlay that displays rich content in a portal, triggered by a button.
5
- *
6
- * Use `Popover` for INTERACTIVE overlay content — small forms, settings
7
- * menus, color pickers, action lists. The user opens it deliberately
8
- * (click/tap or focus + space). For short, non-interactive label hints
9
- * triggered by hover, use `Tooltip` instead. For non-essential preview
10
- * content shown on hover, use `HoverCard`.
11
- *
12
- * `Popover` is a non-modal dialog by default: focus moves into the content
13
- * when it opens, `Escape` closes and returns focus to the trigger, clicking
14
- * outside dismisses, and the page (body and any scroll containers) continues
15
- * to scroll normally. Pass `modal` on `Popover.Root` to trap focus inside
16
- * the content, block interaction with the rest of the page, and lock body
17
- * scroll while the popover is open.
18
- *
19
- * `Popover.Content` renders at Tailwind `z-50`, Mantle's shared floating
20
- * z-index. When multiple shared layers are open, the most recently mounted
21
- * layer renders on top.
22
- *
23
- * @see https://mantle.ngrok.com/components/overlays/popover
24
- * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
25
- *
26
- * @example
27
- * Composition:
28
- * ```
29
- * Popover.Root
30
- * ├── Popover.Trigger
31
- * ├── Popover.Anchor
32
- * └── Popover.Content
33
- * └── Popover.Close
34
- * ```
35
- *
36
- * @example
37
- * ```tsx
38
- * <Popover.Root>
39
- * <Popover.Trigger asChild>
40
- * <Button type="button" appearance="outlined" intent="neutral">
41
- * Open Popover
42
- * </Button>
43
- * </Popover.Trigger>
44
- * <Popover.Content>
45
- * <p>This is the popover content.</p>
46
- * </Popover.Content>
47
- * </Popover.Root>
48
- * ```
49
- */
50
- declare const Popover: {
51
- /**
52
- * The root, stateful component that manages the open/closed state of the popover.
53
- *
54
- * `Popover.Content` renders at Tailwind `z-50`, Mantle's shared floating
55
- * z-index. When multiple shared layers are open, the most recently mounted
56
- * layer renders on top.
57
- *
58
- * @see https://mantle.ngrok.com/components/overlays/popover#popoverroot
59
- *
60
- * @example
61
- * ```tsx
62
- * <Popover.Root>
63
- * <Popover.Trigger asChild>
64
- * <Button type="button" appearance="outlined" intent="neutral">Open popover</Button>
65
- * </Popover.Trigger>
66
- * <Popover.Content>
67
- * <p>This is the popover content.</p>
68
- * </Popover.Content>
69
- * </Popover.Root>
70
- * ```
71
- */
72
- readonly Root: import("react").FC<PopoverPrimitive.PopoverProps>;
73
- /**
74
- * An optional element to position the PopoverContent against. If not used, content positions alongside the trigger.
75
- *
76
- * @see https://mantle.ngrok.com/components/overlays/popover#popoveranchor
77
- *
78
- * @example
79
- * ```tsx
80
- * <Popover.Root>
81
- * <Popover.Anchor asChild>
82
- * <div>Position relative to this element</div>
83
- * </Popover.Anchor>
84
- * <Popover.Trigger asChild>
85
- * <Button type="button" appearance="outlined" intent="neutral">Open Popover</Button>
86
- * </Popover.Trigger>
87
- * <Popover.Content>
88
- * <p>This popover is positioned relative to the anchor.</p>
89
- * <Popover.Close asChild>
90
- * <Button type="button" appearance="outlined" intent="neutral">Close</Button>
91
- * </Popover.Close>
92
- * </Popover.Content>
93
- * </Popover.Root>
94
- * ```
95
- */
96
- readonly Anchor: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
97
- /**
98
- * A button that closes an open popover. Can be placed anywhere within the popover content.
99
- *
100
- * @see https://mantle.ngrok.com/components/overlays/popover#popoverclose
101
- *
102
- * @example
103
- * ```tsx
104
- * <Popover.Root>
105
- * <Popover.Trigger asChild>
106
- * <Button type="button" appearance="outlined" intent="neutral">Settings</Button>
107
- * </Popover.Trigger>
108
- * <Popover.Content>
109
- * <div className="flex items-center justify-between">
110
- * <Text>Settings Panel</Text>
111
- * <Popover.Close asChild>
112
- * <IconButton type="button" appearance="ghost" intent="neutral" size="sm" label="Close" icon={<XIcon />} />
113
- * </Popover.Close>
114
- * </div>
115
- * <Text>Configure your preferences here.</Text>
116
- * </Popover.Content>
117
- * </Popover.Root>
118
- * ```
119
- */
120
- readonly Close: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
121
- /**
122
- * The content to render inside the popover. Appears in a portal with rich styling and animations.
123
- *
124
- * `Popover.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/overlays/popover#popovercontent
129
- *
130
- * @example
131
- * ```tsx
132
- * <Popover.Root>
133
- * <Popover.Trigger asChild>
134
- * <Button type="button" appearance="outlined" intent="neutral">Show Info</Button>
135
- * </Popover.Trigger>
136
- * <Popover.Content side="top" align="center">
137
- * <div className="space-y-2">
138
- * <Text weight="strong">Additional Information</Text>
139
- * <Text>This is the content inside the popover.</Text>
140
- * <Button type="button" appearance="filled" intent="neutral" size="sm">Action</Button>
141
- * </div>
142
- * </Popover.Content>
143
- * </Popover.Root>
144
- * ```
145
- */
146
- readonly Content: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
147
- /**
148
- * The preferred width of the `PopoverContent` as a tailwind `max-w-` class.
149
- *
150
- * By default, a `Popover`'s content width is responsive with a default
151
- * preferred width: the maximum width of the `PopoverContent`
152
- *
153
- * @default `max-w-72`
154
- */
155
- preferredWidth?: `max-w-${string}`;
156
- } & import("react").RefAttributes<HTMLDivElement>>;
157
- /**
158
- * The trigger button that opens the popover when clicked or focused.
159
- *
160
- * @see https://mantle.ngrok.com/components/overlays/popover#popovertrigger
161
- *
162
- * @example
163
- * ```tsx
164
- * <Popover.Root>
165
- * <Popover.Trigger asChild>
166
- * <Button type="button" appearance="outlined" intent="neutral">
167
- * Options
168
- * </Button>
169
- * </Popover.Trigger>
170
- * <Popover.Content>
171
- * <div className="space-y-2">
172
- * <Button type="button" appearance="ghost" intent="neutral">Edit</Button>
173
- * <Button type="button" appearance="ghost" intent="danger">Delete</Button>
174
- * </div>
175
- * </Popover.Content>
176
- * </Popover.Root>
177
- * ```
178
- */
179
- readonly Trigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
180
- };
181
- //#endregion
1
+ import { t as Popover } from "./index-B8mIWKIU.js";
182
2
  export { Popover };
package/dist/popover.js CHANGED
@@ -1 +1 @@
1
- import{t as e}from"./popover-D5WxxnBY.js";export{e as Popover};
1
+ import{t as e}from"./popover-CBMADtjV.js";export{e as Popover};
@@ -0,0 +1,31 @@
1
+ import { ComponentProps, ComponentPropsWithoutRef, Ref } from "react";
2
+ import * as DialogPrimitive from "@radix-ui/react-dialog";
3
+ //#region src/components/dialog/primitive.d.ts
4
+ type DialogPrimitiveContentProps = ComponentProps<typeof DialogPrimitive.Content>;
5
+ declare function Root(props: ComponentPropsWithoutRef<typeof DialogPrimitive.Root>): import("react").JSX.Element;
6
+ declare namespace Root {
7
+ var displayName: string;
8
+ }
9
+ declare const Trigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
10
+ declare const Close: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
11
+ declare function Overlay(props: ComponentProps<typeof DialogPrimitive.Overlay>): import("react").JSX.Element;
12
+ declare namespace Overlay {
13
+ var displayName: string;
14
+ }
15
+ declare function Content({ onEscapeKeyDown, onInteractOutside, onPointerDownOutside, ref, ...props }: DialogPrimitiveContentProps): import("react").JSX.Element;
16
+ declare namespace Content {
17
+ var displayName: string;
18
+ }
19
+ declare const Title: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
20
+ declare function Description({ asChild, children, ref, ...props }: ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {
21
+ ref?: Ref<HTMLDivElement>;
22
+ }): import("react").JSX.Element;
23
+ declare namespace Description {
24
+ var displayName: string;
25
+ }
26
+ /**
27
+ * Type guard to check if the event target is the overlay component
28
+ */
29
+ declare function isDialogOverlayTarget(target: EventTarget | null): boolean;
30
+ //#endregion
31
+ export { Root as a, isDialogOverlayTarget as c, Overlay as i, Content as n, Title as o, Description as r, Trigger as s, Close as t };
@@ -0,0 +1 @@
1
+ import{t as e}from"./slot-CDk0Bb9z.js";import{t}from"./booleanish-BfvnW6vy.js";import{i as n}from"./toast-DKgMRv4F.js";import{createContext as r,useContext as i,useEffect as a,useMemo as o,useState as s}from"react";import{jsx as c}from"react/jsx-runtime";import*as l from"@radix-ui/react-dialog";const u=r({hasDescription:!1,setHasDescription:()=>{}});function d(e){let[t,n]=s(!1),r=o(()=>({hasDescription:t,setHasDescription:n}),[t]);return c(u.Provider,{value:r,children:c(l.Root,{...e})})}d.displayName=`DialogPrimitiveRoot`;const f=l.Trigger;f.displayName=`DialogPrimitiveTrigger`;const p=l.Portal;p.displayName=`DialogPrimitivePortal`;const m=l.Close;m.displayName=`DialogPrimitiveClose`;const h=e=>c(l.Overlay,{"data-overlay":!0,...e});h.displayName=`DialogPrimitiveOverlay`;const g=({onEscapeKeyDown:e,onInteractOutside:t,onPointerDownOutside:r,ref:a,...o})=>{let s=i(u);return c(l.Content,{ref:a,onEscapeKeyDown:t=>{b(t),e?.(t)},onInteractOutside:e=>{n(e),t?.(e)},onPointerDownOutside:e=>{n(e),r?.(e)},...s.hasDescription?{}:{"aria-describedby":void 0},...o})};g.displayName=`DialogPrimitiveContent`;const _=l.Title,v=({asChild:t,children:n,ref:r,...o})=>{let s=i(u);a(()=>(s.setHasDescription(!0),()=>s.setHasDescription(!1)),[s]);let d=t?e:`div`;return c(l.Description,{ref:r,asChild:!0,children:c(d,{...o,children:n})})};v.displayName=`DialogPrimitiveDescription`;function y(e){return e instanceof HTMLElement&&e.hasAttribute(`data-overlay`)}function b(e){if(!w(e.currentTarget))return;let n=e.currentTarget,r=n instanceof Document?n.activeElement:n.ownerDocument?.activeElement??null,i=x(e.target)??x(r),a=i?S(i):null;i!=null&&t(i.getAttribute(`aria-expanded`))&&a!=null&&n.contains(i)&&n.contains(a)&&(a.getAttribute(`data-open`)===`true`||a.getAttribute(`data-state`)===`open`)&&e.preventDefault()}function x(e){return C(e)?e.closest(`[aria-expanded='true'][aria-controls]`):null}function S(e){let t=e.getAttribute(`aria-controls`);if(!t)return null;let n=e.ownerDocument.getElementById(t);return n instanceof HTMLElement?n:null}function C(e){return e instanceof HTMLElement}function w(e){return e instanceof Node&&`querySelector`in e}export{p as a,f as c,h as i,y as l,g as n,d as o,v as r,_ as s,m as t};
package/dist/progress.js CHANGED
@@ -1 +1 @@
1
- import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./types-D85fCNV3.js";import{t as n}from"./clsx-DUGZgXfJ.js";import{createContext as r,useContext as i,useId as a,useMemo as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import*as l from"@radix-ui/react-progress";function u(e,{min:t,max:n}){return Math.min(n,Math.max(t,e))}function d(e){return typeof e==`number`}function f(e,t){return d(e)&&!Number.isNaN(e)&&e<=t&&e>=0}function p(e){return d(e)&&!Number.isNaN(e)&&e>0}const m={max:100,strokeWidth:`0.25rem`,value:0},h=r(m),g=({children:n,className:r,max:i=100,strokeWidth:a=4,value:l,indeterminateRotationSpeed:u,...g})=>{let _=p(i)?i:100,v=f(l,_)?l:l==null?0:`indeterminate`,x=y(a??m.strokeWidth),S=d(v)?v:void 0,C=b(x),w=o(()=>({max:_,strokeWidth:x,value:v}),[_,x,v]);return s(h.Provider,{value:w,children:c(`svg`,{"data-slot":`progress-donut`,"aria-valuemax":_,"aria-valuemin":0,"aria-valuenow":S,className:e(`size-6 text-gray-200 dark:text-gray-300`,v===`indeterminate`&&[`animate-spin`,u??`animation-duration-[15s]`],r),"data-max":_,"data-min":0,"data-value":S,height:`100%`,role:`progressbar`,width:`100%`,...g,children:[s(`circle`,{className:`[r:var(--radius)]`,cx:`50%`,cy:`50%`,fill:`transparent`,stroke:`currentColor`,strokeWidth:x,style:t({"--radius":C})}),n]})})};g.displayName=`ProgressDonut`;const _=({className:r,...o})=>{let l=a(),u=i(h)??m,d=(u.value===`indeterminate`?.6:u.value/u.max)*100,f=y(u.strokeWidth),p=b(f);return c(`g`,{"data-slot":`progress-donut-indicator`,className:e(`text-accent-600`,r),...o,children:[u.value===`indeterminate`&&s(`defs`,{children:c(`linearGradient`,{id:l,children:[s(`stop`,{className:`stop-opacity-100 stop-color-current`,offset:`0%`}),s(`stop`,{className:`stop-opacity-0 stop-color-current`,offset:`95%`})]})}),s(`circle`,{className:n(`[r:var(--radius)]`,`origin-center`),cx:`50%`,cy:`50%`,fill:`transparent`,pathLength:100,stroke:u.value===`indeterminate`?`url(#${l})`:`currentColor`,strokeDasharray:100,strokeDashoffset:100-d,strokeLinecap:`round`,strokeWidth:f,style:t({"--radius":p}),transform:`rotate(-90)`})]})};_.displayName=`ProgressDonutIndicator`;const v={Root:g,Indicator:_};function y(e){let t=4;return e==null?t:(t=typeof e==`number`?e:e.endsWith(`rem`)?Number(e.replace(`rem`,``))*16:Number(e),u(Number.isNaN(t)?4:t,{min:1,max:12}))}function b(e){return`calc(50% - ${e/2}px)`}const x=r({max:100,value:0});function S({className:t,children:n,max:r=100,value:i,...a}){let c=p(r)?r:100,u=f(i,c)?i:i==null?0:`indeterminate`,m=d(u)?u:void 0,h=o(()=>({max:c,value:u}),[c,u]);return s(x.Provider,{value:h,children:s(l.Root,{"data-slot":`progress-bar`,className:e(`bg-base-hover dark:bg-base shadow-inner relative h-3 w-full overflow-hidden rounded-md`,t),value:m,max:c,...a,children:n})})}S.displayName=`Root`;function C({className:t,style:n,...r}){let a=i(x),{max:o}=a,c=(o-(a.value===`indeterminate`?0:a.value))/o*100;return s(l.Indicator,{"data-slot":`progress-bar-indicator`,className:e(`bg-accent-600 h-full w-full flex-1 transition-all`,t),style:{...n,transform:`translateX(-${c}%)`},...r})}C.displayName=`Indicator`;const w={Root:S,Indicator:C};export{w as ProgressBar,v as ProgressDonut};
1
+ import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./types-D85fCNV3.js";import{t as n}from"./clsx-DUGZgXfJ.js";import{createContext as r,useContext as i,useId as a,useMemo as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import*as l from"@radix-ui/react-progress";function u(e,{min:t,max:n}){return Math.min(n,Math.max(t,e))}function d(e){return typeof e==`number`}function f(e,t){return d(e)&&!Number.isNaN(e)&&e<=t&&e>=0}function p(e){return d(e)&&!Number.isNaN(e)&&e>0}const m={max:100,strokeWidth:`0.25rem`,value:0},h=r(m),g=({children:n,className:r,max:i=100,strokeWidth:a=4,value:l,indeterminateRotationSpeed:u,...g})=>{let _=p(i)?i:100,v=f(l,_)?l:l==null?0:`indeterminate`,x=y(a??m.strokeWidth),S=d(v)?v:void 0,C=b(x),w=o(()=>({max:_,strokeWidth:x,value:v}),[_,x,v]);return s(h.Provider,{value:w,children:c(`svg`,{"data-slot":`progress-donut`,"aria-valuemax":_,"aria-valuemin":0,"aria-valuenow":S,className:e(`size-6 text-gray-200 dark:text-gray-300`,v===`indeterminate`&&[`animate-spin`,u??`animation-duration-[15s]`],r),"data-max":_,"data-min":0,"data-value":S,height:`100%`,role:`progressbar`,width:`100%`,...g,children:[s(`circle`,{className:`[r:var(--radius)]`,cx:`50%`,cy:`50%`,fill:`transparent`,stroke:`currentColor`,strokeWidth:x,style:t({"--radius":C})}),n]})})};g.displayName=`ProgressDonut`;const _=({className:r,...o})=>{let l=a(),u=i(h)??m,d=(u.value===`indeterminate`?.6:u.value/u.max)*100,f=y(u.strokeWidth),p=b(f);return c(`g`,{"data-slot":`progress-donut-indicator`,className:e(`text-accent-600`,r),...o,children:[u.value===`indeterminate`&&s(`defs`,{children:c(`linearGradient`,{id:l,children:[s(`stop`,{className:`stop-opacity-100 stop-color-current`,offset:`0%`}),s(`stop`,{className:`stop-opacity-0 stop-color-current`,offset:`95%`})]})}),s(`circle`,{className:n(`[r:var(--radius)]`,`origin-center`),cx:`50%`,cy:`50%`,fill:`transparent`,pathLength:100,stroke:u.value===`indeterminate`?`url(#${l})`:`currentColor`,strokeDasharray:100,strokeDashoffset:100-d,strokeLinecap:`round`,strokeWidth:f,style:t({"--radius":p}),transform:`rotate(-90)`})]})};_.displayName=`ProgressDonutIndicator`;const v={Root:g,Indicator:_};function y(e){let t=4;return e==null?t:(t=typeof e==`number`?e:e.endsWith(`rem`)?Number(e.replace(`rem`,``))*16:Number(e),u(Number.isNaN(t)?4:t,{min:1,max:12}))}function b(e){return`calc(50% - ${e/2}px)`}const x=r({max:100,value:0});function S({className:t,children:n,max:r=100,value:i,...a}){let c=p(r)?r:100,u=f(i,c)?i:i==null?0:`indeterminate`,m=d(u)?u:void 0,h=o(()=>({max:c,value:u}),[c,u]);return s(x.Provider,{value:h,children:s(l.Root,{"data-slot":`progress-bar`,className:e(`bg-base-hover dark:bg-base shadow-inner relative h-3 w-full overflow-hidden rounded-md`,t),value:m,max:c,...a,children:n})})}function C({className:t,style:n,...r}){let a=i(x),{max:o}=a,c=(o-(a.value===`indeterminate`?0:a.value))/o*100;return s(l.Indicator,{"data-slot":`progress-bar-indicator`,className:e(`bg-accent-600 h-full w-full flex-1 transition-all`,t),style:{...n,transform:`translateX(-${c}%)`},...r})}const w={Root:S,Indicator:C};export{w as ProgressBar,v as ProgressDonut};