@ngrok/mantle 0.84.0 → 0.84.2

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 (219) hide show
  1. package/dist/accordion.d.ts +14 -10
  2. package/dist/accordion.js +1 -1
  3. package/dist/agent.json +1 -1
  4. package/dist/{alert-Blmunr_D.d.ts → alert-DCVfviBx.d.ts} +18 -3
  5. package/dist/alert-DtBQuuuP.js +1 -0
  6. package/dist/alert-center.d.ts +15 -6
  7. package/dist/alert-center.js +1 -1
  8. package/dist/alert-dialog.d.ts +58 -37
  9. package/dist/alert-dialog.js +1 -1
  10. package/dist/alert.d.ts +1 -1
  11. package/dist/alert.js +1 -1
  12. package/dist/alternate-announcement-BkH4bOKp.js +1 -0
  13. package/dist/anchor-Cqu4GPPV.js +1 -0
  14. package/dist/anchor.d.ts +15 -15
  15. package/dist/anchor.js +1 -1
  16. package/dist/app-layout.js +1 -1
  17. package/dist/area-chart.js +1 -1
  18. package/dist/avatar.js +1 -1
  19. package/dist/badge.d.ts +3 -1
  20. package/dist/badge.js +1 -1
  21. package/dist/bar-chart.d.ts +17 -8
  22. package/dist/bar-chart.js +1 -1
  23. package/dist/breadcrumb.js +1 -1
  24. package/dist/button-B52_vczK.js +1 -0
  25. package/dist/{button-DjsmeoJ2.d.ts → button-B5i9n7Qp.d.ts} +19 -7
  26. package/dist/button-CaM-ZAH5.js +1 -0
  27. package/dist/{button-Bc0lEOJ2.js → button-DGsTE3P2.js} +1 -1
  28. package/dist/{button-CRCNRnk6.d.ts → button-DO53OA70.d.ts} +2 -2
  29. package/dist/{button-DmJkYfyl.js → button-Wn-yt0c_.js} +1 -1
  30. package/dist/{button-C39M5h4K.d.ts → button-crUf0hbR.d.ts} +19 -2
  31. package/dist/button.d.ts +3 -3
  32. package/dist/button.js +1 -1
  33. package/dist/calendar.d.ts +20 -4
  34. package/dist/calendar.js +1 -1
  35. package/dist/card.d.ts +10 -6
  36. package/dist/card.js +1 -1
  37. package/dist/centered-layout.js +1 -1
  38. package/dist/chart-B_rZqf8a.js +2 -0
  39. package/dist/checkbox-Gg6nGUnR.js +1 -0
  40. package/dist/checkbox.js +1 -1
  41. package/dist/choice-CT_AdesL.js +1 -0
  42. package/dist/{choice-CVdQrs-m.d.ts → choice-PESu-9s8.d.ts} +46 -12
  43. package/dist/choice.d.ts +1 -1
  44. package/dist/choice.js +1 -1
  45. package/dist/{code-block-Dj9otiLi.js → code-block-BE3Q0iAo.js} +2 -2
  46. package/dist/code-block.d.ts +26 -2
  47. package/dist/code-block.js +6 -6
  48. package/dist/code-block_highlight-utils.js +1 -1
  49. package/dist/code.js +1 -1
  50. package/dist/combobox.d.ts +19 -2
  51. package/dist/combobox.js +1 -1
  52. package/dist/command.d.ts +32 -13
  53. package/dist/command.js +1 -1
  54. package/dist/compose-refs-DdUwopIY.js +1 -0
  55. package/dist/{cx-IiQEAKf5.js → cx-0HCjnNv1.js} +1 -1
  56. package/dist/cx.d.ts +3 -3
  57. package/dist/cx.js +1 -1
  58. package/dist/data-table.d.ts +114 -61
  59. package/dist/data-table.js +1 -1
  60. package/dist/description-list.d.ts +43 -9
  61. package/dist/description-list.js +1 -1
  62. package/dist/{dialog-u8PtHYES.d.ts → dialog-B8YvfyIo.d.ts} +5 -3
  63. package/dist/{dialog-CnlaqHNh.js → dialog-CA-1Z0Np.js} +1 -1
  64. package/dist/{dialog-CEk0L7M7.d.ts → dialog-CtLI_uex.d.ts} +5 -3
  65. package/dist/dialog.d.ts +2 -2
  66. package/dist/dialog.js +1 -1
  67. package/dist/{dropdown-menu-CpsUJGbn.d.ts → dropdown-menu-BYapTV0f.d.ts} +8 -5
  68. package/dist/dropdown-menu-BkPBh_8y.d.ts +1 -0
  69. package/dist/{dropdown-menu-DJDrRzDU.js → dropdown-menu-lxHsgLiw.js} +1 -1
  70. package/dist/dropdown-menu.d.ts +2 -2
  71. package/dist/dropdown-menu.js +1 -1
  72. package/dist/empty.d.ts +4 -4
  73. package/dist/empty.js +1 -1
  74. package/dist/field.d.ts +91 -38
  75. package/dist/field.js +1 -1
  76. package/dist/flag.d.ts +9 -1
  77. package/dist/flag.js +1 -1
  78. package/dist/hooks.d.ts +28 -19
  79. package/dist/hooks.js +1 -1
  80. package/dist/hover-card.d.ts +11 -3
  81. package/dist/hover-card.js +1 -1
  82. package/dist/{icon-k4E9yNWD.d.ts → icon-BmJ57Tgh.d.ts} +10 -0
  83. package/dist/icon-CGKaq_tV.js +1 -0
  84. package/dist/icon-U24NfYv7.js +1 -0
  85. package/dist/icon-w0HUe7tr.d.ts +42 -0
  86. package/dist/icon.d.ts +2 -2
  87. package/dist/icon.js +1 -1
  88. package/dist/{icons-DEVx1oP9.js → icons-Cie4gcrm.js} +1 -1
  89. package/dist/icons.d.ts +7 -13
  90. package/dist/icons.js +1 -1
  91. package/dist/{in-view-gxyc9Q1_.d.ts → in-view-Ch5vJtWo.d.ts} +10 -5
  92. package/dist/input-BhykQSvJ.js +1 -0
  93. package/dist/input-DQyN6gN0.js +1 -0
  94. package/dist/input.d.ts +22 -10
  95. package/dist/input.js +1 -1
  96. package/dist/interactive-target-BXScNeOr.js +1 -0
  97. package/dist/{kbd-B9qmYaW8.js → kbd-4_0Y_8rx.js} +1 -1
  98. package/dist/kbd.d.ts +15 -9
  99. package/dist/kbd.js +1 -1
  100. package/dist/{label-C6YH9skg.d.ts → label-Bnfe9YJ6.d.ts} +3 -1
  101. package/dist/label-BqIp6kFx.js +1 -0
  102. package/dist/label.d.ts +1 -1
  103. package/dist/label.js +1 -1
  104. package/dist/layer-container-BTcQpd4K.js +1 -0
  105. package/dist/layer-container.js +1 -1
  106. package/dist/line-chart.js +1 -1
  107. package/dist/list-Bo1mExIg.js +1 -0
  108. package/dist/list.d.ts +37 -14
  109. package/dist/list.js +1 -1
  110. package/dist/live-region-CV7kykeo.js +1 -0
  111. package/dist/live-region.js +1 -1
  112. package/dist/llms.txt +1 -1
  113. package/dist/main.d.ts +4 -2
  114. package/dist/main.js +1 -1
  115. package/dist/media-object.d.ts +5 -12
  116. package/dist/media-object.js +1 -1
  117. package/dist/multi-select.d.ts +45 -13
  118. package/dist/multi-select.js +1 -1
  119. package/dist/otp-input.d.ts +9 -3
  120. package/dist/otp-input.js +1 -1
  121. package/dist/pagination.d.ts +165 -19
  122. package/dist/pagination.js +1 -1
  123. package/dist/{popover-D6x6Bq-G.js → popover-Bp-9B3GR.js} +1 -1
  124. package/dist/{popover-DDuw1UaJ.d.ts → popover-s2LhmzfQ.d.ts} +8 -4
  125. package/dist/popover.d.ts +1 -1
  126. package/dist/popover.js +1 -1
  127. package/dist/primitive-CejGAoGb.js +1 -0
  128. package/dist/progress.d.ts +65 -31
  129. package/dist/progress.js +1 -1
  130. package/dist/qr-code.d.ts +10 -4
  131. package/dist/qr-code.js +1 -1
  132. package/dist/radio-group-HDVxTNPi.js +1 -0
  133. package/dist/radio-group.d.ts +50 -25
  134. package/dist/radio-group.js +1 -1
  135. package/dist/sandbar.d.ts +1 -1
  136. package/dist/sandbar.js +1 -1
  137. package/dist/sandboxed-on-click-UagMFl_U.js +1 -0
  138. package/dist/sandboxed-on-click.d.ts +8 -0
  139. package/dist/sandboxed-on-click.js +1 -1
  140. package/dist/scatter-plot.js +1 -1
  141. package/dist/select-Dov9H2CX.js +1 -0
  142. package/dist/{select-DkFkSYBP.d.ts → select-ouAW88jx.d.ts} +30 -9
  143. package/dist/select.d.ts +1 -1
  144. package/dist/select.js +1 -1
  145. package/dist/selectable-list.d.ts +64 -20
  146. package/dist/selectable-list.js +1 -1
  147. package/dist/{separator-CNDs98Dv.d.ts → separator-Bo4nY_3M.d.ts} +13 -2
  148. package/dist/{separator-D0D6VyyM.js → separator-Da8lDnio.js} +1 -1
  149. package/dist/separator.d.ts +1 -1
  150. package/dist/separator.js +1 -1
  151. package/dist/{sheet-BcfnKUit.js → sheet-C6UGAvRk.js} +1 -1
  152. package/dist/sheet.d.ts +5 -5
  153. package/dist/sheet.js +1 -1
  154. package/dist/sidebar.d.ts +7 -6
  155. package/dist/sidebar.js +1 -1
  156. package/dist/skeleton-paJOgf-f.js +1 -0
  157. package/dist/skeleton.d.ts +5 -4
  158. package/dist/skeleton.js +1 -1
  159. package/dist/skip-to-main-link.d.ts +9 -6
  160. package/dist/skip-to-main-link.js +1 -1
  161. package/dist/slider.d.ts +7 -3
  162. package/dist/slider.js +1 -1
  163. package/dist/{slot-DpNWVci8.js → slot-C3gII_9c.js} +1 -1
  164. package/dist/slot.js +1 -1
  165. package/dist/split-button.d.ts +8 -3
  166. package/dist/split-button.js +1 -1
  167. package/dist/switch.js +1 -1
  168. package/dist/{table-D51ZtV4U.d.ts → table-DEI-qvSC.d.ts} +25 -12
  169. package/dist/table-EZNW3nFk.js +1 -0
  170. package/dist/table.d.ts +1 -1
  171. package/dist/table.js +1 -1
  172. package/dist/tabs.js +1 -1
  173. package/dist/text-area.js +1 -1
  174. package/dist/theme-DN-Et3A_.js +1 -0
  175. package/dist/theme-switcher.d.ts +24 -12
  176. package/dist/theme-switcher.js +1 -1
  177. package/dist/theme.d.ts +18 -4
  178. package/dist/theme.js +1 -1
  179. package/dist/toast.d.ts +8 -3
  180. package/dist/toast.js +1 -1
  181. package/dist/tooltip-CkAibjBb.js +1 -0
  182. package/dist/{tooltip-BKWK5c7_.d.ts → tooltip-DA41fxe5.d.ts} +7 -1
  183. package/dist/tooltip.d.ts +1 -1
  184. package/dist/tooltip.js +1 -1
  185. package/dist/{use-breakpoint-Dqu12Szq.js → use-breakpoint-BhJ_3El2.js} +1 -1
  186. package/dist/use-is-apple-platform-CMPzIYjz.js +1 -0
  187. package/dist/use-matches-media-query-DCBT6iNA.js +1 -0
  188. package/dist/use-prefers-reduced-motion-DHYDQk1h.js +1 -0
  189. package/dist/utils.d.ts +1 -1
  190. package/dist/utils.js +1 -1
  191. package/dist/visually-hidden.js +1 -1
  192. package/dist/well.js +1 -1
  193. package/package.json +3 -3
  194. package/dist/alert-DDjzRuGa.js +0 -1
  195. package/dist/anchor-D2So_zuy.js +0 -1
  196. package/dist/button-CC10rP6X.js +0 -1
  197. package/dist/button-DiDlvAOp.js +0 -1
  198. package/dist/chart-BDxpXPfo.js +0 -2
  199. package/dist/checkbox-0EoxOyMA.js +0 -1
  200. package/dist/choice-CnwfjSEu.js +0 -1
  201. package/dist/compose-refs-BdBMM9ga.js +0 -1
  202. package/dist/dropdown-menu-CNaaABck.d.ts +0 -1
  203. package/dist/icon-CX_gj6sW.d.ts +0 -25
  204. package/dist/icon-d-nMCfAI.js +0 -1
  205. package/dist/icon-lZ48P8Nn.js +0 -1
  206. package/dist/input-BnlpQF0c.js +0 -1
  207. package/dist/input-CXmS0OFN.js +0 -1
  208. package/dist/label-D-D11mlp.js +0 -1
  209. package/dist/layer-container-CglTh9-6.js +0 -1
  210. package/dist/list-CwL23L_B.js +0 -1
  211. package/dist/primitive-BWyxJnXn.js +0 -1
  212. package/dist/select-BK6n6OIK.js +0 -1
  213. package/dist/skeleton-BhcJMpem.js +0 -1
  214. package/dist/table-C_Nm_RSV.js +0 -1
  215. package/dist/theme-CVfq037P.js +0 -1
  216. package/dist/tooltip-BZRRJgpm.js +0 -1
  217. package/dist/use-is-apple-platform-Cxwrb86L.js +0 -1
  218. package/dist/use-matches-media-query-Bd_GhhVd.js +0 -1
  219. package/dist/use-prefers-reduced-motion-Bk5zAfHY.js +0 -1
package/dist/flag.d.ts CHANGED
@@ -6,7 +6,15 @@ import { ComponentProps } from "react";
6
6
  declare const countryCodes: readonly ["004", "008", "010", "016", "016", "020", "024", "028", "031", "032", "040", "044", "048", "050", "051", "052", "056", "060", "064", "068", "070", "072", "074", "076", "084", "086", "090", "092", "096", "100", "104", "108", "112", "116", "120", "124", "132", "136", "140", "144", "148", "152", "156", "158", "162", "166", "170", "174", "178", "180", "184", "188", "191", "192", "196", "203", "204", "208", "212", "214", "218", "222", "226", "231", "232", "233", "234", "238", "239", "242", "246", "248", "250", "254", "258", "260", "262", "266", "268", "270", "275", "276", "288", "292", "296", "300", "304", "308", "312", "316", "320", "324", "328", "332", "334", "336", "340", "344", "348", "352", "356", "360", "364", "368", "372", "376", "380", "384", "388", "392", "398", "400", "404", "408", "410", "414", "417", "418", "422", "426", "428", "430", "434", "438", "440", "442", "446", "450", "454", "458", "462", "466", "470", "474", "478", "480", "484", "492", "496", "498", "499", "500", "504", "508", "512", "516", "520", "524", "528", "531", "533", "534", "540", "548", "554", "558", "562", "566", "570", "574", "578", "580", "581", "583", "584", "585", "586", "591", "598", "600", "604", "608", "612", "616", "620", "624", "626", "630", "634", "638", "642", "643", "646", "652", "654", "659", "660", "662", "663", "666", "670", "674", "678", "682", "686", "688", "690", "694", "702", "703", "704", "705", "706", "710", "716", "724", "728", "729", "732", "740", "744", "748", "752", "756", "760", "762", "764", "768", "772", "776", "780", "784", "788", "792", "795", "796", "798", "800", "804", "807", "818", "831", "832", "833", "834", "836", "840", "850", "854", "858", "860", "862", "876", "882", "887", "894", "ABW", "AD", "AE", "AF", "AFG", "AFRUN", "AG", "AGO", "AI", "AIA", "AL", "ALA", "ALB", "AM", "AMS", "AND", "AO", "AQ", "AR", "ARE", "ARG", "ARM", "AS", "ASM", "AT", "ATA", "ATF", "ATG", "AU", "AUS", "AUT", "AW", "AX", "AZ", "AZE", "BA", "BB", "BD", "BDI", "BE", "BEL", "BEN", "BF", "BFA", "BG", "BGD", "BGR", "BH", "BHR", "BHS", "BI", "BIH", "BJ", "BL", "BLM", "BLR", "BLZ", "BM", "BMU", "BN", "BO", "BOL", "BQ-BO", "BQ-SA", "BQ-SE", "BR", "BRA", "BRB", "BRN", "BS", "BT", "BTN", "BV", "BVT", "BW", "BWA", "BY", "BZ", "CA", "CAF", "CAN", "CC", "CCK", "CD", "CF", "CG", "CH", "CHE", "CHL", "CHN", "CI", "CIV", "CK", "CL", "CM", "CMR", "CN", "CO", "COD", "COG", "COK", "COL", "COM", "CPV", "CR", "CRI", "CU", "CUB", "CUW", "CV", "CW", "CX", "CXR", "CY", "CYM", "CYP", "CZ", "CZE", "DE", "DEU", "DJ", "DJI", "DK", "DM", "DMA", "DNK", "DO", "DOM", "EC", "ECU", "EE", "EG", "EGY", "EH", "ER", "ERI", "ES", "ESH", "ESP", "EST", "ET", "ETH", "EU", "FI", "FIN", "FJ", "FJI", "FK", "FLK", "FM", "FO", "FR", "FRA", "FRO", "FSM", "GA", "GAB", "GB-ENG", "GB-NIR", "GB-SCT", "GB-UKM", "GB-WLS", "GB", "GBR", "GD", "GE", "GEO", "GF", "GG", "GGY", "GH", "GHA", "GI", "GIB", "GIN", "GL", "GLP", "GM", "GMB", "GN", "GNB", "GNQ", "GP", "GQ", "GR", "GRC", "GRD", "GRL", "GS", "GT", "GTM", "GU", "GUF", "GUM", "GUY", "GW", "GY", "HK", "HKG", "HM", "HMD", "HN", "HND", "HR", "HRV", "HT", "HTI", "HU", "HUN", "ID", "IDN", "IE", "IL", "IM", "IMN", "IN", "IND", "IO", "IOT", "IQ", "IR", "IRL", "IRN", "IRQ", "IS", "ISL", "ISR", "IT", "ITA", "JAM", "JE", "JEY", "JM", "JO", "JOR", "JP", "JPN", "KAZ", "KE", "KEN", "KG", "KGZ", "KH", "KHM", "KI", "KIR", "KM", "KN-SK", "KNA", "KOR", "KP", "KR", "KW", "KWT", "KY", "KZ", "LA", "LAO", "LB", "LBN", "LBR", "LBY", "LC", "LCA", "LI", "LIE", "LK", "LKA", "LR", "LS", "LSO", "LT", "LTU", "LU", "LUX", "LV", "LVA", "LY", "MA", "MAC", "MAF", "MAR", "MC", "MCO", "MD", "MDA", "MDG", "MDV", "ME", "MEX", "MF", "MG", "MH", "MHL", "MK", "MKD", "ML", "MLI", "MLT", "MM", "MMR", "MN", "MNE", "MNG", "MNP", "MO", "MOZ", "MP", "MQ", "MR", "MRT", "MS", "MSR", "MT", "MTQ", "MU", "MUS", "MV", "MW", "MWI", "MX", "MY", "MYS", "MZ", "NA", "NAM", "NC", "NCL", "NE", "NER", "NF", "NFK", "NG", "NGA", "NI", "NIC", "NIU", "NL", "NLD", "NO", "NOR", "NP", "NPL", "NR", "NRU", "NU", "NZ", "NZL", "OM", "OMN", "PA", "PAK", "PAN", "PCN", "PE", "PER", "PF", "PG", "PH", "PHL", "PK", "PL", "PLW", "PM", "PN", "PNG", "POL", "PR", "PRI", "PRK", "PRT", "PRY", "PS", "PSE", "PT", "PW", "PY", "PYF", "QA", "QAT", "RAINBOW", "RE", "REU", "RO", "ROU", "RS", "RU", "RUS", "RW", "RWA", "SA", "SAU", "SB", "SC", "SD", "SDN", "SE", "SEN", "SG", "SGP", "SGS", "SH", "SHN", "SI", "SJ", "SJM", "SK", "SL", "SLB", "SLE", "SLV", "SM", "SMR", "SN", "SO", "SOM", "SPM", "SR", "SRB", "SS", "SSD", "ST", "STP", "SUR", "SV", "SVK", "SVN", "SWE", "SWZ", "SX", "SXM", "SY", "SYC", "SYR", "SZ", "TC", "TCA", "TCD", "TD", "TF", "TG", "TGO", "TH", "THA", "TJ", "TJK", "TK", "TKL", "TKM", "TL", "TLS", "TM", "TN", "TO", "TON", "TR", "TT", "TTO", "TUN", "TUR", "TUV", "TV", "TW", "TWN", "TZ", "TZA", "UA", "UG", "UGA", "UKR", "UM", "UMI", "UNASUR", "URY", "US", "USA", "UY", "UZ", "UZB", "VA", "VAT", "VC", "VCT", "VE", "VEN", "VG", "VGB", "VI", "VIR", "VN", "VNM", "VU", "VUT", "WF", "WLF", "WS", "WSM", "YE", "YEM", "ZA", "ZAF", "ZM", "ZMB", "ZW", "ZWE"];
7
7
  type CountryCode = (typeof countryCodes)[number];
8
8
  /**
9
- * Type Predicate: check if the given value is a valid country code
9
+ * Narrows an unknown value to a `CountryCode`. Only an exact, case-sensitive
10
+ * entry of `countryCodes` passes; any non-string returns `false`.
11
+ *
12
+ * @example
13
+ * ```ts
14
+ * isCountryCode("GB-ENG"); // true
15
+ * isCountryCode("us"); // false, codes are upper-case
16
+ * isCountryCode(16); // false
17
+ * ```
10
18
  */
11
19
  declare function isCountryCode(value: unknown): value is CountryCode;
12
20
  //#endregion
package/dist/flag.js CHANGED
@@ -1 +1 @@
1
- import{t as e}from"./cx-IiQEAKf5.js";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{cva as r}from"class-variance-authority";const i=r(``,{variants:{size:{s:`rounded-[0.0625rem]`,m:`rounded-[0.09375rem]`,l:`rounded-xs`}}}),a=r(``,{variants:{size:{s:`w-4 h-3`,m:`w-5 h-3.75`,l:`w-8 h-6`}}});function o({className:r,code:o,size:s=`l`,loading:c=`lazy`,...l}){let u=i({size:s}),d=a({size:s});return n(`div`,{"data-slot":`flag`,className:e(`flag relative overflow-hidden`,u,d,r),...l,children:[t(`div`,{"aria-hidden":!0,className:e(`absolute inset-0 border border-[#000]/10`,u)}),t(`img`,{className:`h-full w-full block object-cover`,src:`https://assets.ngrok.com/flags/${s}/${o}.svg`,alt:`flag for ${o}`,loading:c})]})}const s=`004.008.010.016.016.020.024.028.031.032.040.044.048.050.051.052.056.060.064.068.070.072.074.076.084.086.090.092.096.100.104.108.112.116.120.124.132.136.140.144.148.152.156.158.162.166.170.174.178.180.184.188.191.192.196.203.204.208.212.214.218.222.226.231.232.233.234.238.239.242.246.248.250.254.258.260.262.266.268.270.275.276.288.292.296.300.304.308.312.316.320.324.328.332.334.336.340.344.348.352.356.360.364.368.372.376.380.384.388.392.398.400.404.408.410.414.417.418.422.426.428.430.434.438.440.442.446.450.454.458.462.466.470.474.478.480.484.492.496.498.499.500.504.508.512.516.520.524.528.531.533.534.540.548.554.558.562.566.570.574.578.580.581.583.584.585.586.591.598.600.604.608.612.616.620.624.626.630.634.638.642.643.646.652.654.659.660.662.663.666.670.674.678.682.686.688.690.694.702.703.704.705.706.710.716.724.728.729.732.740.744.748.752.756.760.762.764.768.772.776.780.784.788.792.795.796.798.800.804.807.818.831.832.833.834.836.840.850.854.858.860.862.876.882.887.894.ABW.AD.AE.AF.AFG.AFRUN.AG.AGO.AI.AIA.AL.ALA.ALB.AM.AMS.AND.AO.AQ.AR.ARE.ARG.ARM.AS.ASM.AT.ATA.ATF.ATG.AU.AUS.AUT.AW.AX.AZ.AZE.BA.BB.BD.BDI.BE.BEL.BEN.BF.BFA.BG.BGD.BGR.BH.BHR.BHS.BI.BIH.BJ.BL.BLM.BLR.BLZ.BM.BMU.BN.BO.BOL.BQ-BO.BQ-SA.BQ-SE.BR.BRA.BRB.BRN.BS.BT.BTN.BV.BVT.BW.BWA.BY.BZ.CA.CAF.CAN.CC.CCK.CD.CF.CG.CH.CHE.CHL.CHN.CI.CIV.CK.CL.CM.CMR.CN.CO.COD.COG.COK.COL.COM.CPV.CR.CRI.CU.CUB.CUW.CV.CW.CX.CXR.CY.CYM.CYP.CZ.CZE.DE.DEU.DJ.DJI.DK.DM.DMA.DNK.DO.DOM.EC.ECU.EE.EG.EGY.EH.ER.ERI.ES.ESH.ESP.EST.ET.ETH.EU.FI.FIN.FJ.FJI.FK.FLK.FM.FO.FR.FRA.FRO.FSM.GA.GAB.GB-ENG.GB-NIR.GB-SCT.GB-UKM.GB-WLS.GB.GBR.GD.GE.GEO.GF.GG.GGY.GH.GHA.GI.GIB.GIN.GL.GLP.GM.GMB.GN.GNB.GNQ.GP.GQ.GR.GRC.GRD.GRL.GS.GT.GTM.GU.GUF.GUM.GUY.GW.GY.HK.HKG.HM.HMD.HN.HND.HR.HRV.HT.HTI.HU.HUN.ID.IDN.IE.IL.IM.IMN.IN.IND.IO.IOT.IQ.IR.IRL.IRN.IRQ.IS.ISL.ISR.IT.ITA.JAM.JE.JEY.JM.JO.JOR.JP.JPN.KAZ.KE.KEN.KG.KGZ.KH.KHM.KI.KIR.KM.KN-SK.KNA.KOR.KP.KR.KW.KWT.KY.KZ.LA.LAO.LB.LBN.LBR.LBY.LC.LCA.LI.LIE.LK.LKA.LR.LS.LSO.LT.LTU.LU.LUX.LV.LVA.LY.MA.MAC.MAF.MAR.MC.MCO.MD.MDA.MDG.MDV.ME.MEX.MF.MG.MH.MHL.MK.MKD.ML.MLI.MLT.MM.MMR.MN.MNE.MNG.MNP.MO.MOZ.MP.MQ.MR.MRT.MS.MSR.MT.MTQ.MU.MUS.MV.MW.MWI.MX.MY.MYS.MZ.NA.NAM.NC.NCL.NE.NER.NF.NFK.NG.NGA.NI.NIC.NIU.NL.NLD.NO.NOR.NP.NPL.NR.NRU.NU.NZ.NZL.OM.OMN.PA.PAK.PAN.PCN.PE.PER.PF.PG.PH.PHL.PK.PL.PLW.PM.PN.PNG.POL.PR.PRI.PRK.PRT.PRY.PS.PSE.PT.PW.PY.PYF.QA.QAT.RAINBOW.RE.REU.RO.ROU.RS.RU.RUS.RW.RWA.SA.SAU.SB.SC.SD.SDN.SE.SEN.SG.SGP.SGS.SH.SHN.SI.SJ.SJM.SK.SL.SLB.SLE.SLV.SM.SMR.SN.SO.SOM.SPM.SR.SRB.SS.SSD.ST.STP.SUR.SV.SVK.SVN.SWE.SWZ.SX.SXM.SY.SYC.SYR.SZ.TC.TCA.TCD.TD.TF.TG.TGO.TH.THA.TJ.TJK.TK.TKL.TKM.TL.TLS.TM.TN.TO.TON.TR.TT.TTO.TUN.TUR.TUV.TV.TW.TWN.TZ.TZA.UA.UG.UGA.UKR.UM.UMI.UNASUR.URY.US.USA.UY.UZ.UZB.VA.VAT.VC.VCT.VE.VEN.VG.VGB.VI.VIR.VN.VNM.VU.VUT.WF.WLF.WS.WSM.YE.YEM.ZA.ZAF.ZM.ZMB.ZW.ZWE`.split(`.`);function c(e){return s.includes(e)}export{o as Flag,s as countryCodes,c as isCountryCode};
1
+ import{t as e}from"./cx-0HCjnNv1.js";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{cva as r}from"class-variance-authority";const i=r(``,{variants:{size:{s:`rounded-[0.0625rem]`,m:`rounded-[0.09375rem]`,l:`rounded-xs`}}}),a=r(``,{variants:{size:{s:`w-4 h-3`,m:`w-5 h-3.75`,l:`w-8 h-6`}}});function o({className:r,code:o,size:s=`l`,loading:c=`lazy`,...l}){let u=i({size:s}),d=a({size:s});return n(`div`,{"data-slot":`flag`,className:e(`flag relative overflow-hidden`,u,d,r),...l,children:[t(`div`,{"aria-hidden":!0,className:e(`absolute inset-0 border border-[#000]/10`,u)}),t(`img`,{className:`h-full w-full block object-cover`,src:`https://assets.ngrok.com/flags/${s}/${o}.svg`,alt:`flag for ${o}`,loading:c})]})}const s=`004.008.010.016.016.020.024.028.031.032.040.044.048.050.051.052.056.060.064.068.070.072.074.076.084.086.090.092.096.100.104.108.112.116.120.124.132.136.140.144.148.152.156.158.162.166.170.174.178.180.184.188.191.192.196.203.204.208.212.214.218.222.226.231.232.233.234.238.239.242.246.248.250.254.258.260.262.266.268.270.275.276.288.292.296.300.304.308.312.316.320.324.328.332.334.336.340.344.348.352.356.360.364.368.372.376.380.384.388.392.398.400.404.408.410.414.417.418.422.426.428.430.434.438.440.442.446.450.454.458.462.466.470.474.478.480.484.492.496.498.499.500.504.508.512.516.520.524.528.531.533.534.540.548.554.558.562.566.570.574.578.580.581.583.584.585.586.591.598.600.604.608.612.616.620.624.626.630.634.638.642.643.646.652.654.659.660.662.663.666.670.674.678.682.686.688.690.694.702.703.704.705.706.710.716.724.728.729.732.740.744.748.752.756.760.762.764.768.772.776.780.784.788.792.795.796.798.800.804.807.818.831.832.833.834.836.840.850.854.858.860.862.876.882.887.894.ABW.AD.AE.AF.AFG.AFRUN.AG.AGO.AI.AIA.AL.ALA.ALB.AM.AMS.AND.AO.AQ.AR.ARE.ARG.ARM.AS.ASM.AT.ATA.ATF.ATG.AU.AUS.AUT.AW.AX.AZ.AZE.BA.BB.BD.BDI.BE.BEL.BEN.BF.BFA.BG.BGD.BGR.BH.BHR.BHS.BI.BIH.BJ.BL.BLM.BLR.BLZ.BM.BMU.BN.BO.BOL.BQ-BO.BQ-SA.BQ-SE.BR.BRA.BRB.BRN.BS.BT.BTN.BV.BVT.BW.BWA.BY.BZ.CA.CAF.CAN.CC.CCK.CD.CF.CG.CH.CHE.CHL.CHN.CI.CIV.CK.CL.CM.CMR.CN.CO.COD.COG.COK.COL.COM.CPV.CR.CRI.CU.CUB.CUW.CV.CW.CX.CXR.CY.CYM.CYP.CZ.CZE.DE.DEU.DJ.DJI.DK.DM.DMA.DNK.DO.DOM.EC.ECU.EE.EG.EGY.EH.ER.ERI.ES.ESH.ESP.EST.ET.ETH.EU.FI.FIN.FJ.FJI.FK.FLK.FM.FO.FR.FRA.FRO.FSM.GA.GAB.GB-ENG.GB-NIR.GB-SCT.GB-UKM.GB-WLS.GB.GBR.GD.GE.GEO.GF.GG.GGY.GH.GHA.GI.GIB.GIN.GL.GLP.GM.GMB.GN.GNB.GNQ.GP.GQ.GR.GRC.GRD.GRL.GS.GT.GTM.GU.GUF.GUM.GUY.GW.GY.HK.HKG.HM.HMD.HN.HND.HR.HRV.HT.HTI.HU.HUN.ID.IDN.IE.IL.IM.IMN.IN.IND.IO.IOT.IQ.IR.IRL.IRN.IRQ.IS.ISL.ISR.IT.ITA.JAM.JE.JEY.JM.JO.JOR.JP.JPN.KAZ.KE.KEN.KG.KGZ.KH.KHM.KI.KIR.KM.KN-SK.KNA.KOR.KP.KR.KW.KWT.KY.KZ.LA.LAO.LB.LBN.LBR.LBY.LC.LCA.LI.LIE.LK.LKA.LR.LS.LSO.LT.LTU.LU.LUX.LV.LVA.LY.MA.MAC.MAF.MAR.MC.MCO.MD.MDA.MDG.MDV.ME.MEX.MF.MG.MH.MHL.MK.MKD.ML.MLI.MLT.MM.MMR.MN.MNE.MNG.MNP.MO.MOZ.MP.MQ.MR.MRT.MS.MSR.MT.MTQ.MU.MUS.MV.MW.MWI.MX.MY.MYS.MZ.NA.NAM.NC.NCL.NE.NER.NF.NFK.NG.NGA.NI.NIC.NIU.NL.NLD.NO.NOR.NP.NPL.NR.NRU.NU.NZ.NZL.OM.OMN.PA.PAK.PAN.PCN.PE.PER.PF.PG.PH.PHL.PK.PL.PLW.PM.PN.PNG.POL.PR.PRI.PRK.PRT.PRY.PS.PSE.PT.PW.PY.PYF.QA.QAT.RAINBOW.RE.REU.RO.ROU.RS.RU.RUS.RW.RWA.SA.SAU.SB.SC.SD.SDN.SE.SEN.SG.SGP.SGS.SH.SHN.SI.SJ.SJM.SK.SL.SLB.SLE.SLV.SM.SMR.SN.SO.SOM.SPM.SR.SRB.SS.SSD.ST.STP.SUR.SV.SVK.SVN.SWE.SWZ.SX.SXM.SY.SYC.SYR.SZ.TC.TCA.TCD.TD.TF.TG.TGO.TH.THA.TJ.TJK.TK.TKL.TKM.TL.TLS.TM.TN.TO.TON.TR.TT.TTO.TUN.TUR.TUV.TV.TW.TWN.TZ.TZA.UA.UG.UGA.UKR.UM.UMI.UNASUR.URY.US.USA.UY.UZ.UZB.VA.VAT.VC.VCT.VE.VEN.VG.VGB.VI.VIR.VN.VNM.VU.VUT.WF.WLF.WS.WSM.YE.YEM.ZA.ZAF.ZM.ZMB.ZW.ZWE`.split(`.`),c=new Set(s);function l(e){return typeof e==`string`&&c.has(e)}export{o as Flag,s as countryCodes,l as isCountryCode};
package/dist/hooks.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { n as MarginType, o as useComposedRefs, s as copyToClipboard } from "./in-view-gxyc9Q1_.js";
1
+ import { n as MarginType, o as useComposedRefs, s as copyToClipboard } from "./in-view-Ch5vJtWo.js";
2
2
  import { RefObject, useLayoutEffect } from "react";
3
3
  //#region src/hooks/use-breakpoint.d.ts
4
4
  /**
@@ -132,7 +132,7 @@ declare function useIsBelowBreakpoint(breakpoint: TailwindBreakpoint): boolean;
132
132
  *
133
133
  * return <MemoizedList onSelect={onSelect} />;
134
134
  */
135
- declare function useCallbackRef<T extends (...args: unknown[]) => unknown>(callback: T | undefined): T;
135
+ declare function useCallbackRef<T extends (...args: never[]) => unknown>(callback: T | undefined): T;
136
136
  //#endregion
137
137
  //#region src/hooks/use-copy-to-clipboard.d.ts
138
138
  /**
@@ -312,7 +312,7 @@ declare function useIsHydrated(): boolean;
312
312
  *
313
313
  * return <div ref={ref}>Width: {width}</div>;
314
314
  */
315
- declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
315
+ export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
316
316
  //#endregion
317
317
  //#region src/hooks/use-local-storage.d.ts
318
318
  /**
@@ -321,7 +321,7 @@ declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
321
321
  * Contract:
322
322
  *
323
323
  * - Server rendering returns `defaultValue` and never touches localStorage.
324
- * - Values are JSON-encoded on write and JSON-decoded on read the same
324
+ * - Values are JSON-encoded on write and JSON-decoded on read: the same
325
325
  * wire format popular hooks libraries (e.g. `@uidotdev/usehooks`) use,
326
326
  * so existing stored entries remain readable.
327
327
  * - The setter dispatches a synthetic `storage` event (tagged with its
@@ -332,6 +332,12 @@ declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
332
332
  * - Missing, corrupt, or non-string entries resolve to `defaultValue`; the
333
333
  * hook never seeds `defaultValue` into storage on its own (reading is
334
334
  * side-effect free).
335
+ * - Reads and writes never throw. If the browser denies storage access,
336
+ * the value resolves to `defaultValue`. If `setItem` throws (a full
337
+ * origin, Safari private browsing, blocked site data), the hook keeps
338
+ * the value in memory, so every same-key instance still advances until
339
+ * the page reloads. A later write that succeeds, or a `storage` event
340
+ * from another document, restores storage as the source of truth.
335
341
  *
336
342
  * @param key - The localStorage key to read and write.
337
343
  * @param defaultValue - Returned when no valid entry exists for `key` and
@@ -377,7 +383,7 @@ declare function useLocalStorage(key: string, defaultValue: string): readonly [v
377
383
  *
378
384
  * return isPortrait ? <PortraitLayout /> : <LandscapeLayout />;
379
385
  */
380
- declare function useMatchesMediaQuery(query: string): boolean;
386
+ export declare function useMatchesMediaQuery(query: string): boolean;
381
387
  //#endregion
382
388
  //#region src/hooks/use-session-storage.d.ts
383
389
  /**
@@ -393,6 +399,12 @@ declare function useMatchesMediaQuery(query: string): boolean;
393
399
  * - Missing, corrupt, or non-string entries resolve to `defaultValue`; the
394
400
  * hook never seeds `defaultValue` into storage on its own (reading is
395
401
  * side-effect free).
402
+ * - Reads and writes never throw. If the browser denies storage access,
403
+ * the value resolves to `defaultValue`. If `setItem` throws (a full
404
+ * origin, Safari private browsing, blocked site data), the hook keeps
405
+ * the value in memory, so every same-key instance still advances until
406
+ * the page reloads. A later write that succeeds, or a `storage` event
407
+ * from another document, restores storage as the source of truth.
396
408
  *
397
409
  * @param key - The sessionStorage key to read and write.
398
410
  * @param defaultValue - Returned when no valid entry exists for `key` and
@@ -436,25 +448,22 @@ declare function useSessionStorage(key: string, defaultValue: string): readonly
436
448
  * element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 200 });
437
449
  * }
438
450
  */
439
- declare function getPrefersReducedMotion(): boolean;
451
+ export declare function getPrefersReducedMotion(): boolean;
440
452
  /**
441
453
  * React hook that subscribes to the user's `prefers-reduced-motion` media
442
454
  * query and re-renders when it changes.
443
455
  *
444
- * Defaults to `true` (reduce motion) on the server and during the first
445
- * client render to avoid animating before hydration. The initial client
446
- * effect reads the *real* preference and updates state. The underlying
447
- * media query used is `(prefers-reduced-motion: no-preference)` inverted
448
- * "if the system hasn't opted out, animations are allowed."
456
+ * Returns `true` (reduce motion) on the server and during the hydration
457
+ * render, so nothing animates before hydration. React then re-renders once
458
+ * with the real preference. A client mount after hydration reads the real
459
+ * preference in its first render, so a dialog or carousel that opens later
460
+ * starts with the right duration. The underlying media query is
461
+ * `(prefers-reduced-motion: no-preference)` inverted: if the system has not
462
+ * opted out, animations are allowed.
449
463
  *
450
464
  * @returns `true` when the user prefers reduced motion (animations should be
451
465
  * shortened or skipped), `false` when full motion is acceptable.
452
466
  *
453
- * @remarks
454
- * If you need to support very old browsers that lack
455
- * `MediaQueryList.addEventListener`, consider falling back to
456
- * `addListener` / `removeListener`.
457
- *
458
467
  * @example
459
468
  * // Conditionally shorten or skip transitions
460
469
  * const prefersReducedMotion = usePrefersReducedMotion();
@@ -468,7 +477,7 @@ declare function getPrefersReducedMotion(): boolean;
468
477
  *
469
478
  * return <Carousel autoplay={!prefersReducedMotion} />;
470
479
  */
471
- declare function usePrefersReducedMotion(): boolean;
480
+ export declare function usePrefersReducedMotion(): boolean;
472
481
  //#endregion
473
482
  //#region src/hooks/use-scroll-behavior.d.ts
474
483
  /**
@@ -517,7 +526,7 @@ type ScrollBehavior = "auto" | "smooth";
517
526
  * @see {@link usePrefersReducedMotion}
518
527
  * @see CSS `scroll-behavior` property (values: `"auto"`, `"smooth"`).
519
528
  */
520
- declare function useScrollBehavior(): ScrollBehavior;
529
+ export declare function useScrollBehavior(): ScrollBehavior;
521
530
  //#endregion
522
531
  //#region src/hooks/use-in-view.d.ts
523
532
  /**
@@ -671,4 +680,4 @@ type UseUndoRedoReturn<T> = {
671
680
  */
672
681
  declare function useUndoRedo<T extends NonNullable<unknown>>(): UseUndoRedoReturn<T>;
673
682
  //#endregion
674
- export { type Breakpoint, type TailwindBreakpoint, type UseInViewOptions, type UseUndoRedoReturn, breakpoints, getPrefersReducedMotion, useBreakpoint, useCallbackRef, useComposedRefs, useCopyToClipboard, useDebounce, useDebouncedCallback, useInView, useIsBelowBreakpoint, useIsHydrated, useIsomorphicLayoutEffect, useLocalStorage, useMatchesMediaQuery, usePrefersReducedMotion, useScrollBehavior, useSessionStorage, useUndoRedo };
683
+ export { type Breakpoint, type TailwindBreakpoint, type UseInViewOptions, type UseUndoRedoReturn, breakpoints, useBreakpoint, useCallbackRef, useComposedRefs, useCopyToClipboard, useDebounce, useDebouncedCallback, useInView, useIsBelowBreakpoint, useIsHydrated, useLocalStorage, useSessionStorage, useUndoRedo };
package/dist/hooks.js CHANGED
@@ -1 +1 @@
1
- import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-BdBMM9ga.js";import{t as n}from"./use-is-hydrated-DDCqXmju.js";import{t as r}from"./use-copy-to-clipboard-CSyp4Zk0.js";import{t as i}from"./use-callback-ref-IYti9y7x.js";import{t as a}from"./use-matches-media-query-Bd_GhhVd.js";import{n as o,t as s}from"./use-prefers-reduced-motion-Bk5zAfHY.js";import{n as c,r as l,t as u}from"./use-breakpoint-Dqu12Szq.js";import{t as d}from"./in-view-T_AAYaaF.js";import{useCallback as f,useEffect as p,useMemo as m,useReducer as h,useRef as g,useState as _,useSyncExternalStore as v}from"react";function y(e,t){let[n,r]=_(e);return p(()=>{let n=window.setTimeout(()=>{r(e)},t.waitMs);return()=>{window.clearTimeout(n)}},[e,t.waitMs]),n}function b(e,t){let n=i(e),r=g(0);return p(()=>()=>window.clearTimeout(r.current),[]),f((...e)=>{window.clearTimeout(r.current),r.current=window.setTimeout(()=>n(...e),t.waitMs)},[n,t.waitMs])}function x(e){return function(t){function n(n){let r=n.storageArea==null||n.storageArea===window.localStorage,i=n.key==null||n.key===e;r&&i&&t()}return window.addEventListener(`storage`,n),()=>{window.removeEventListener(`storage`,n)}}}function S(){return null}function C(e,t){try{let n=JSON.parse(e);return typeof n==`string`?n:t}catch{return t}}function w(e,t){let n=m(()=>x(e),[e]),r=v(n,()=>window.localStorage.getItem(e),S);return[r==null?t:C(r,t),f(t=>{let n=JSON.stringify(t);window.localStorage.setItem(e,n),window.dispatchEvent(new StorageEvent(`storage`,{key:e,newValue:n,storageArea:window.localStorage}))},[e])]}function T(e){return function(t){function n(n){let r=n.storageArea==null||n.storageArea===window.sessionStorage,i=n.key==null||n.key===e;r&&i&&t()}return window.addEventListener(`storage`,n),()=>{window.removeEventListener(`storage`,n)}}}function E(){return null}function D(e,t){try{let n=JSON.parse(e);return typeof n==`string`?n:t}catch{return t}}function O(e,t){let n=m(()=>T(e),[e]),r=v(n,()=>window.sessionStorage.getItem(e),E);return[r==null?t:D(r,t),f(t=>{let n=JSON.stringify(t);window.sessionStorage.setItem(e,n),window.dispatchEvent(new StorageEvent(`storage`,{key:e,newValue:n,storageArea:window.sessionStorage}))},[e])]}function k(){let e=o();return m(()=>e?`auto`:`smooth`,[e])}function A(e,{root:t,margin:n,amount:r,once:i=!1,initial:a=!1}={}){let[o,s]=_(a);return p(()=>{if(!e.current||i&&o)return;function a(){return s(!0),i?void 0:()=>s(!1)}let c={root:t&&t.current||void 0,margin:n,amount:r};return d(e.current,a,c)},[t,e,n,i,r]),o}function j(){let e=g([]),t=g([]),[,n]=h(e=>e+1,0),r=f(r=>{e.current.push(r),t.current=[],n()},[]),i=f(r=>{let i=e.current[e.current.length-1];if(i!==void 0)return e.current.pop(),t.current.push(r),n(),i},[]),a=f(r=>{let i=t.current[t.current.length-1];if(i!==void 0)return t.current.pop(),e.current.push(r),n(),i},[]),o=e.current.length>0,s=t.current.length>0;return m(()=>({canUndo:o,canRedo:s,push:r,undo:i,redo:a}),[o,s,r,i,a])}export{u as breakpoints,s as getPrefersReducedMotion,c as useBreakpoint,i as useCallbackRef,t as useComposedRefs,r as useCopyToClipboard,y as useDebounce,b as useDebouncedCallback,A as useInView,l as useIsBelowBreakpoint,n as useIsHydrated,e as useIsomorphicLayoutEffect,w as useLocalStorage,a as useMatchesMediaQuery,o as usePrefersReducedMotion,k as useScrollBehavior,O as useSessionStorage,j as useUndoRedo};
1
+ import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-DdUwopIY.js";import{t as n}from"./use-is-hydrated-DDCqXmju.js";import{t as r}from"./use-copy-to-clipboard-CSyp4Zk0.js";import{t as i}from"./use-callback-ref-IYti9y7x.js";import{t as a}from"./use-matches-media-query-DCBT6iNA.js";import{n as o,t as s}from"./use-prefers-reduced-motion-DHYDQk1h.js";import{n as c,r as l,t as u}from"./use-breakpoint-BhJ_3El2.js";import{t as d}from"./in-view-T_AAYaaF.js";import{useCallback as f,useEffect as p,useMemo as m,useRef as h,useState as g,useSyncExternalStore as _}from"react";function v(e,t){let[n,r]=g(e);return p(()=>{let n=window.setTimeout(()=>{r(e)},t.waitMs);return()=>{window.clearTimeout(n)}},[e,t.waitMs]),n}function y(e,t){let n=i(e),r=h(0);return p(()=>()=>window.clearTimeout(r.current),[]),f((...e)=>{window.clearTimeout(r.current),r.current=window.setTimeout(()=>n(...e),t.waitMs)},[n,t.waitMs])}const b=new Map;function x(e){if(e.key==null){b.clear();return}b.has(e.key)&&(e.newValue==null?b.delete(e.key):b.set(e.key,e.newValue))}function S(){try{return window.localStorage}catch{return null}}function C(e){return function(t){function n(n){let r=n.storageArea==null||n.storageArea===S(),i=n.key==null||n.key===e;r&&i&&(x(n),t())}return window.addEventListener(`storage`,n),()=>{window.removeEventListener(`storage`,n)}}}function w(){return null}function T(e){let t=b.get(e);if(t!=null)return t;try{return window.localStorage.getItem(e)}catch{return null}}function E(e,t){try{window.localStorage.setItem(e,t),b.delete(e)}catch{b.set(e,t)}}function D(e,t){try{let n=JSON.parse(e);return typeof n==`string`?n:t}catch{return t}}function O(e,t){let n=m(()=>C(e),[e]),r=_(n,()=>T(e),w);return[r==null?t:D(r,t),f(t=>{let n=JSON.stringify(t);E(e,n),window.dispatchEvent(new StorageEvent(`storage`,{key:e,newValue:n,storageArea:S()}))},[e])]}const k=new Map;function A(e){if(e.key==null){k.clear();return}k.has(e.key)&&(e.newValue==null?k.delete(e.key):k.set(e.key,e.newValue))}function j(){try{return window.sessionStorage}catch{return null}}function M(e){return function(t){function n(n){let r=n.storageArea==null||n.storageArea===j(),i=n.key==null||n.key===e;r&&i&&(A(n),t())}return window.addEventListener(`storage`,n),()=>{window.removeEventListener(`storage`,n)}}}function N(){return null}function P(e){let t=k.get(e);if(t!=null)return t;try{return window.sessionStorage.getItem(e)}catch{return null}}function F(e,t){try{window.sessionStorage.setItem(e,t),k.delete(e)}catch{k.set(e,t)}}function I(e,t){try{let n=JSON.parse(e);return typeof n==`string`?n:t}catch{return t}}function L(e,t){let n=m(()=>M(e),[e]),r=_(n,()=>P(e),N);return[r==null?t:I(r,t),f(t=>{let n=JSON.stringify(t);F(e,n),window.dispatchEvent(new StorageEvent(`storage`,{key:e,newValue:n,storageArea:j()}))},[e])]}function R(){let e=o();return m(()=>e?`auto`:`smooth`,[e])}function z(e,{root:t,margin:n,amount:r,once:i=!1,initial:a=!1}={}){let[o,s]=g(a);return p(()=>{if(!e.current||i&&o)return;function a(){return s(!0),i?void 0:()=>s(!1)}let c={root:t&&t.current||void 0,margin:n,amount:r};return d(e.current,a,c)},[t,e,n,i,r]),o}function B(){let e=h([]),t=h([]),[n,r]=g({undo:0,redo:0}),i=f(n=>{e.current.push(n),t.current=[],r({undo:e.current.length,redo:0})},[]),a=f(n=>{let i=e.current[e.current.length-1];if(i!==void 0)return e.current.pop(),t.current.push(n),r({undo:e.current.length,redo:t.current.length}),i},[]),o=f(n=>{let i=t.current[t.current.length-1];if(i!==void 0)return t.current.pop(),e.current.push(n),r({undo:e.current.length,redo:t.current.length}),i},[]),s=n.undo>0,c=n.redo>0;return m(()=>({canUndo:s,canRedo:c,push:i,undo:a,redo:o}),[s,c,i,a,o])}export{u as breakpoints,s as getPrefersReducedMotion,c as useBreakpoint,i as useCallbackRef,t as useComposedRefs,r as useCopyToClipboard,v as useDebounce,y as useDebouncedCallback,z as useInView,l as useIsBelowBreakpoint,n as useIsHydrated,e as useIsomorphicLayoutEffect,O as useLocalStorage,a as useMatchesMediaQuery,o as usePrefersReducedMotion,R as useScrollBehavior,L as useSessionStorage,B as useUndoRedo};
@@ -56,7 +56,7 @@ declare const Trigger: (props: ComponentProps<typeof HoverCardPrimitive.Trigger>
56
56
  * customize portal placement (e.g., pass a `container` prop) or wrap multiple
57
57
  * `HoverCard.Content` instances in a shared portal.
58
58
  *
59
- * When `container` is omitted, content mounts into the nearest layer container
59
+ * When `container` is omitted, content mounts into the nearest layer container:
60
60
  * an enclosing overlay's positioner when one is open, else `document.body`.
61
61
  *
62
62
  * @see https://mantle.ngrok.com/components/overlays/hover-card#hovercardportal
@@ -230,7 +230,7 @@ declare const HoverCard: {
230
230
  */
231
231
  readonly Arrow: typeof Arrow;
232
232
  /**
233
- * The content to render inside the hover card. Appears in a portal with rich styling and animations.
233
+ * The content to render inside the hover card.
234
234
  *
235
235
  * `HoverCard.Content` renders at Tailwind `z-50`, Mantle's float tier. When
236
236
  * composed inside an open `Dialog`, `AlertDialog`, or `Sheet`, it portals into
@@ -239,6 +239,10 @@ declare const HoverCard: {
239
239
  * (`z-60`). When sibling floats share a container, the most recently mounted
240
240
  * float paints on top.
241
241
  *
242
+ * It sets `position: relative`, so `HoverCard.Arrow`'s absolutely-positioned
243
+ * wrapper keeps one containing block through the open animation. An
244
+ * absolutely-positioned child of the content therefore anchors to the content.
245
+ *
242
246
  * @see https://mantle.ngrok.com/components/overlays/hover-card#hovercardcontent
243
247
  *
244
248
  * @example
@@ -262,7 +266,11 @@ declare const HoverCard: {
262
266
  * The portal container for rendering hover card content outside the normal DOM tree.
263
267
  * `HoverCard.Content` already renders inside this portal internally, so you typically
264
268
  * do not need to use `HoverCard.Portal` directly. Use it only when you need to
265
- * customize portal placement or wrap multiple `HoverCard.Content` instances.
269
+ * customize portal placement (e.g., pass a `container` prop) or wrap multiple
270
+ * `HoverCard.Content` instances in a shared portal.
271
+ *
272
+ * When `container` is omitted, content mounts into the nearest layer container:
273
+ * an enclosing overlay's positioner when one is open, else `document.body`.
266
274
  *
267
275
  * @see https://mantle.ngrok.com/components/overlays/hover-card#hovercardportal
268
276
  *
@@ -1 +1 @@
1
- import{t as e}from"./cx-IiQEAKf5.js";import{n as t,r as n}from"./layer-container-CglTh9-6.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";import*as a from"@radix-ui/react-hover-card";const o=({closeDelay:e=300,openDelay:t=100,...n})=>r(a.Root,{closeDelay:e,openDelay:t,...n}),s=e=>r(a.Trigger,{"data-slot":`hover-card-trigger`,...e}),c=({container:e,...i})=>{let o=n(),s=e??o;return r(t.Provider,{value:s,children:r(a.Portal,{container:s,...i})})},l={Root:o,Arrow:({className:t,height:n=7,width:o=14,...s})=>r(a.Arrow,{"aria-hidden":`true`,asChild:!0,"data-slot":`hover-card-arrow`,height:n,width:o,...s,children:i(`svg`,{className:e(`fill-[var(--background-color-popover)]`,`[clip-path:inset(0_-200%_-200%_-200%)]`,`[filter:drop-shadow(0_0_4px_color-mix(in_oklab,var(--shadow-color)_var(--shadow-first-opacity),transparent))]`,t),children:[r(`polygon`,{points:`0,0 30,0 15,10`}),r(`polyline`,{className:`stroke-[color:var(--border-color-popover)]`,fill:`none`,points:`0,0 15,10 30,0`,strokeWidth:1.5,vectorEffect:`non-scaling-stroke`})]})}),Content:({className:t,onClick:n,align:i=`center`,sideOffset:o=4,...s})=>r(c,{children:r(a.Content,{"data-slot":`hover-card-content`,align:i,sideOffset:o,className:e(`relative`,`bg-popover border-popover z-50 w-64 rounded-md border p-4 shadow-md outline-hidden`,`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 data-state-closed:zoom-out-95 data-state-open:zoom-in-95 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`,t),onClick:e=>{e.stopPropagation(),n?.(e)},...s})}),Portal:c,Trigger:s};export{l as HoverCard};
1
+ import{t as e}from"./cx-0HCjnNv1.js";import{n as t,r as n}from"./layer-container-BTcQpd4K.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";import*as a from"@radix-ui/react-hover-card";const o=({closeDelay:e=300,openDelay:t=100,...n})=>r(a.Root,{closeDelay:e,openDelay:t,...n}),s=e=>r(a.Trigger,{"data-slot":`hover-card-trigger`,...e}),c=({container:e,...i})=>{let o=n(),s=e??o;return r(t.Provider,{value:s,children:r(a.Portal,{container:s,...i})})},l={Root:o,Arrow:({className:t,height:n=7,width:o=14,...s})=>r(a.Arrow,{"aria-hidden":`true`,asChild:!0,"data-slot":`hover-card-arrow`,height:n,width:o,...s,children:i(`svg`,{className:e(`fill-[var(--background-color-popover)]`,`[clip-path:inset(0_-200%_-200%_-200%)]`,`[filter:drop-shadow(0_0_4px_color-mix(in_oklab,var(--shadow-color)_var(--shadow-first-opacity),transparent))]`,t),children:[r(`polygon`,{points:`0,0 30,0 15,10`}),r(`polyline`,{className:`stroke-[color:var(--border-color-popover)]`,fill:`none`,points:`0,0 15,10 30,0`,strokeWidth:1.5,vectorEffect:`non-scaling-stroke`})]})}),Content:({className:t,onClick:n,align:i=`center`,sideOffset:o=4,...s})=>r(c,{children:r(a.Content,{"data-slot":`hover-card-content`,align:i,sideOffset:o,className:e(`relative`,`bg-popover border-popover z-50 w-64 rounded-md border p-4 shadow-md outline-hidden`,`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 data-state-closed:zoom-out-95 data-state-open:zoom-in-95 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`,t),onClick:e=>{e.stopPropagation(),n?.(e)},...s})}),Portal:c,Trigger:s};export{l as HoverCard};
@@ -10,13 +10,23 @@ type IconProps = Omit<SvgAttributes, "children"> & {
10
10
  /**
11
11
  * Decorates an svg icon with automatic sizing styles and a `shrink-0` class.
12
12
  *
13
+ * The icon is decorative by default: it renders `aria-hidden="true"` unless
14
+ * the props or the svg element carry a name (`aria-label`, `aria-labelledby`,
15
+ * a `<title>` child, or Phosphor's `alt`), a `role`, or an explicit
16
+ * `aria-hidden`. Pass `role="img"` and `aria-label` when the icon is the only
17
+ * thing that conveys its meaning.
18
+ *
13
19
  * @see https://mantle.ngrok.com/components/data-display/icon
14
20
  *
15
21
  * @example
16
22
  * ```tsx
17
23
  * import { ShrimpIcon } from "@phosphor-icons/react/Shrimp";
18
24
  *
25
+ * // Decorative: renders aria-hidden="true".
19
26
  * <Icon svg={<ShrimpIcon />} />
27
+ *
28
+ * // Meaningful: the name keeps it exposed.
29
+ * <Icon svg={<ShrimpIcon />} role="img" aria-label="Shrimp" />
20
30
  * ```
21
31
  */
22
32
  declare const Icon: ({ className, style, svg, ref, ...props }: IconProps) => import("react").JSX.Element;
@@ -0,0 +1 @@
1
+ import{t as e}from"./cx-0HCjnNv1.js";import{t}from"./icon-U24NfYv7.js";import{jsx as n}from"react/jsx-runtime";const r=({className:r,style:i,svg:a,ref:o,...s})=>n(t,{ref:o,"data-slot":`icon`,className:e(`size-5`,r),style:i,svg:a,...s});export{r as t};
@@ -0,0 +1 @@
1
+ import{t as e}from"./cx-0HCjnNv1.js";import{Children as t,cloneElement as n,isValidElement as r}from"react";import i from"tiny-invariant";const a=e=>e!=null&&t.toArray(e).some(e=>r(e)&&e.type===`title`),o=e=>e[`aria-label`]!=null||e[`aria-labelledby`]!=null||e[`aria-hidden`]!=null||e.role!=null||e.alt!=null||a(e.children),s=({className:a,style:s,svg:c,ref:l,...u})=>{i(r(c)&&t.only(c),`SvgOnly must be passed a single SVG icon as a JSX tag.`);let d=!o(u)&&!o(c.props);return n(c,{"data-slot":`svg-only`,...d&&{"aria-hidden":!0},...u,className:e(`shrink-0`,a,c.props.className),style:{...s,...c.props.style},ref:l})};export{s as t};
@@ -0,0 +1,42 @@
1
+ import { t as SvgAttributes } from "./icon-D1RY5Tcj.js";
2
+ import { ReactNode } from "react";
3
+ //#region src/components/icon/svg-only.d.ts
4
+ type SvgOnlyProps = Omit<SvgAttributes, "children"> & {
5
+ /**
6
+ * A single SVG icon element.
7
+ */
8
+ svg: ReactNode;
9
+ };
10
+ type NamedSvgProps = SvgAttributes & {
11
+ /**
12
+ * Phosphor's `alt` prop. `IconBase` renders it as a `<title>` child, so it
13
+ * names the svg the same way an authored `<title>` does.
14
+ */
15
+ alt?: string;
16
+ };
17
+ /**
18
+ * Accepts a single SVG icon element and decorates it with `shrink-0` class.
19
+ * You probably want to use the `Icon` component instead.
20
+ *
21
+ * The icon is decorative by default: it renders `aria-hidden="true"` unless
22
+ * the props or the svg element carry a name (`aria-label`, `aria-labelledby`,
23
+ * a `<title>` child, or Phosphor's `alt`), a `role`, or an explicit
24
+ * `aria-hidden`. A bare Phosphor icon sets none of these, so it is hidden from
25
+ * assistive technology.
26
+ *
27
+ * @see https://mantle.ngrok.com/components/data-display/icon
28
+ *
29
+ * @example
30
+ * ```tsx
31
+ * import { ShrimpIcon } from "@phosphor-icons/react/Shrimp";
32
+ *
33
+ * // Decorative: renders aria-hidden="true".
34
+ * <SvgOnly svg={<ShrimpIcon />} />
35
+ *
36
+ * // Meaningful: the name keeps it exposed.
37
+ * <SvgOnly svg={<ShrimpIcon />} role="img" aria-label="Shrimp" />
38
+ * ```
39
+ */
40
+ declare const SvgOnly: ({ className, style, svg, ref, ...props }: SvgOnlyProps) => import("react").ReactElement<NamedSvgProps, string | import("react").JSXElementConstructor<any>>;
41
+ //#endregion
42
+ export { SvgOnlyProps as n, SvgOnly as t };
package/dist/icon.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { t as SvgAttributes } from "./icon-D1RY5Tcj.js";
2
- import { n as IconProps, t as Icon } from "./icon-k4E9yNWD.js";
3
- import { n as SvgOnlyProps, t as SvgOnly } from "./icon-CX_gj6sW.js";
2
+ import { n as IconProps, t as Icon } from "./icon-BmJ57Tgh.js";
3
+ import { n as SvgOnlyProps, t as SvgOnly } from "./icon-w0HUe7tr.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"./icon-d-nMCfAI.js";import{t}from"./icon-lZ48P8Nn.js";export{t as Icon,e as SvgOnly};
1
+ import{t as e}from"./icon-U24NfYv7.js";import{t}from"./icon-CGKaq_tV.js";export{t as Icon,e as SvgOnly};
@@ -1 +1 @@
1
- import{s as e}from"./theme-CVfq037P.js";import{jsx as t}from"react/jsx-runtime";import{DesktopIcon as n}from"@phosphor-icons/react/Desktop";import{MoonIcon as r}from"@phosphor-icons/react/Moon";import{SunIcon as i}from"@phosphor-icons/react/Sun";function a(n){let r=e();return t(o,{theme:r,...n})}function o({theme:e,...a}){switch(e){case`system`:return t(n,{...a});case`light`:return t(i,{...a});case`dark`:return t(r,{...a});case`light-high-contrast`:return t(i,{...a,weight:`fill`});case`dark-high-contrast`:return t(r,{...a,weight:`fill`})}}export{o as n,a as t};
1
+ import{s as e}from"./theme-DN-Et3A_.js";import{jsx as t}from"react/jsx-runtime";import{DesktopIcon as n}from"@phosphor-icons/react/Desktop";import{MoonIcon as r}from"@phosphor-icons/react/Moon";import{SunIcon as i}from"@phosphor-icons/react/Sun";function a(n){let r=e();return t(o,{theme:r,...n})}function o({theme:e,...a}){switch(e){case`system`:return t(n,{...a});case`light`:return t(i,{...a});case`dark`:return t(r,{...a});case`light-high-contrast`:return t(i,{...a,weight:`fill`});case`dark-high-contrast`:return t(r,{...a,weight:`fill`})}}export{o as n,a as t};
package/dist/icons.d.ts CHANGED
@@ -86,26 +86,20 @@ declare function ThemeIcon({ theme, ...props }: ThemeIconProps): import("react")
86
86
  //#endregion
87
87
  //#region src/components/icons/types.d.ts
88
88
  /**
89
- * Props for an inline svg icon.
89
+ * Props for an inline svg icon. The icon owns its `viewBox`, `fill`, and
90
+ * paths, and fills with `currentColor`, so the `color` CSS property sets the
91
+ * fill.
90
92
  *
91
93
  * @see https://mantle.ngrok.com/components/data-display/icons
92
94
  *
93
95
  * @example
94
96
  * ```tsx
95
97
  * function BrandIcon(props: InlineIconProps) {
96
- * return <svg {...props} />;
98
+ * return <svg fill="currentColor" viewBox="0 0 24 24" {...props} />;
97
99
  * }
98
100
  * ```
99
101
  */
100
- type InlineIconProps = Omit<ComponentProps<"svg">, "xmlns" | "fill" | "viewBox" | "color" | "children"> & {
101
- /**
102
- * The fill color mode of the svg icon.
103
- * If set to `"inherit"`, the icon will inherit the color of its parent using `currentColor`
104
- * If set to `"auto"`, the icon will use "branded" fill color(s) that are not inherited.
105
- * @default "auto"
106
- */
107
- color?: "inherit" | "auto";
108
- };
102
+ type InlineIconProps = Omit<ComponentProps<"svg">, "xmlns" | "fill" | "viewBox" | "color" | "children">;
109
103
  //#endregion
110
104
  //#region src/components/icons/ngrok.d.ts
111
105
  /**
@@ -118,7 +112,7 @@ type InlineIconProps = Omit<ComponentProps<"svg">, "xmlns" | "fill" | "viewBox"
118
112
  * <NgrokWordmarkIcon />
119
113
  * ```
120
114
  */
121
- declare function NgrokWordmarkIcon(props: Omit<InlineIconProps, "color">): import("react").JSX.Element;
115
+ declare function NgrokWordmarkIcon(props: InlineIconProps): import("react").JSX.Element;
122
116
  /**
123
117
  * An inline svg icon that renders the ngrok lettermark "n" logo. The `color` CSS property sets the fill.
124
118
  *
@@ -129,6 +123,6 @@ declare function NgrokWordmarkIcon(props: Omit<InlineIconProps, "color">): impor
129
123
  * <NgrokLettermarkIcon />
130
124
  * ```
131
125
  */
132
- declare function NgrokLettermarkIcon(props: Omit<InlineIconProps, "color">): import("react").JSX.Element;
126
+ declare function NgrokLettermarkIcon(props: InlineIconProps): import("react").JSX.Element;
133
127
  //#endregion
134
128
  export { AutoThemeIcon, type InlineIconProps, NgrokLettermarkIcon, NgrokWordmarkIcon, SortIcon, ThemeIcon, TrafficPolicyFileIcon };
package/dist/icons.js CHANGED
@@ -1 +1 @@
1
- import{t as e}from"./icons-CF1lbWtp.js";import{t}from"./icons-B_DDQcVD.js";import{n,t as r}from"./icons-DEVx1oP9.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
+ import{t as e}from"./icons-CF1lbWtp.js";import{t}from"./icons-B_DDQcVD.js";import{n,t as r}from"./icons-Cie4gcrm.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};
@@ -32,10 +32,15 @@ type PossibleRef<T> = Ref<T> | undefined;
32
32
  */
33
33
  declare function composeRefs<T>(...refs: PossibleRef<T>[]): RefCallback<T>;
34
34
  /**
35
- * A custom hook that composes multiple refs into a single stable callback
36
- * ref. Accepts callback refs and RefObject(s); the latest refs passed on
37
- * each render are the ones written to, and any cleanup the composed ref
38
- * returns targets the refs captured when React attached the node (see
35
+ * A custom hook that composes up to three refs into a single callback ref.
36
+ * Accepts callback refs and RefObject(s). The callback keeps one identity
37
+ * while the refs it composes keep theirs, so React attaches it once per
38
+ * mount. If you pass a new ref on a later render, React detaches the old
39
+ * callback and attaches the new one, so the new ref receives the node at
40
+ * once. A consumer callback ref fires once per mount when the consumer
41
+ * passes the same function each render, and on every render when the
42
+ * consumer passes a new function, as it does on a plain element. Any
43
+ * cleanup the composed ref returns targets the refs it composed (see
39
44
  * {@link composeRefs} for the cleanup propagation contract).
40
45
  *
41
46
  * @example
@@ -45,7 +50,7 @@ declare function composeRefs<T>(...refs: PossibleRef<T>[]): RefCallback<T>;
45
50
  * return <input ref={composedRef} {...props} />;
46
51
  * }
47
52
  */
48
- declare function useComposedRefs<T>(...refs: PossibleRef<T>[]): RefCallback<T>;
53
+ declare function useComposedRefs<T>(firstRef: PossibleRef<T>, secondRef: PossibleRef<T>, thirdRef?: PossibleRef<T>): RefCallback<T>;
49
54
  //#endregion
50
55
  //#region src/utils/in-view.d.ts
51
56
  type MarginValue = `${number}${"px" | "%"}`;
@@ -0,0 +1 @@
1
+ import{n as e}from"./compose-refs-DdUwopIY.js";import{t}from"./cx-0HCjnNv1.js";import{t as n}from"./icon-CGKaq_tV.js";import{t as r}from"./booleanish-BfvnW6vy.js";import{t as i}from"./clsx-DUGZgXfJ.js";import{a,r as o}from"./field-Bpptk_9t.js";import{createContext 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=({children:e,className:t,ref:n,...r})=>{let i=!!e,a=u(null);return i?d(y,{className:t,forwardedRef:n,innerRef:a,...r,children:e}):d(y,{...r,className:t,forwardedRef:n,innerRef:a,children:d(_,{...r})})},_=({"aria-invalid":n,className:r,ref:i,validation:s,...l})=>{let{"aria-invalid":u,forwardedRef:f,innerRef:p,validation:m,...h}=c(v),g=a(),{ariaInvalid:_,validation:y}=o({"aria-invalid":u??n,validation:m??s??g}),b={...h,...l,type:l.type??h.type??`text`},x=e(i,f,p);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:x,...b})},v=s({validation:void 0,innerRef:{current:null}}),y=({"aria-invalid":e,"aria-disabled":n,"data-slot":i=`input`,children:s,className:c,disabled:u,forwardedRef:p,innerRef:m,style:h,type:g,validation:_,...y})=>{let x=a(),{validation:S}=o({"aria-invalid":e,validation:_??x}),C=l(()=>({"aria-invalid":e,"aria-disabled":n,disabled:u,type:g,validation:_,...y,forwardedRef:p,innerRef:m}),[e,n,u,g,_,y,p,m]);return d(v.Provider,{value:C,children:f(`div`,{role:`none`,"data-slot":i,"data-disabled":r(u??n)||void 0,"data-validation":S||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)]`,c),onMouseDown:e=>{e.target!==m?.current&&e.preventDefault()},onClick:e=>{let t=m.current;t!=null&&e.detail!==0&&t.focus()},style:h,children:[s,d(b,{name:y.name,validation:S})]})})},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:i(`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}};export{_ as n,g as t};
@@ -0,0 +1 @@
1
+ function e(e){return typeof HTMLInputElement<`u`&&e instanceof HTMLInputElement}export{e as t};
package/dist/input.d.ts CHANGED
@@ -4,12 +4,14 @@ import { ComponentProps } from "react";
4
4
  //#region src/components/input/password-input.d.ts
5
5
  type PasswordInputProps = Omit<ComponentProps<"input">, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {
6
6
  /**
7
- * Callback for when the visibility of the password value changes.
7
+ * Called with the next visibility when the user clicks the toggle. In
8
+ * controlled mode, write the value back into `showValue`.
8
9
  */
9
10
  onValueVisibilityChange?: (visible: boolean) => void;
10
11
  /**
11
- * Show/hide the password value as a controlled state.
12
- * @default false
12
+ * The controlled visibility of the value. When set, the input follows this
13
+ * prop; a click on the toggle only calls `onValueVisibilityChange` with the
14
+ * next value. When omitted, the toggle owns the visibility and starts hidden.
13
15
  */
14
16
  showValue?: boolean;
15
17
  };
@@ -34,9 +36,18 @@ type PasswordInputProps = Omit<ComponentProps<"input">, "autoComplete" | "type">
34
36
  * to be notified when the user toggles via the built-in button.
35
37
  *
36
38
  * **Accessibility.** Always pair with a {@link https://mantle.ngrok.com/components/forms/label Label}.
37
- * The toggle button has its own accessible name announcing the current
38
- * state. The input keeps `autocomplete="current-password"` /
39
- * `"new-password"` semantics set `autoComplete` explicitly per flow.
39
+ * The toggle is a focusable `aria-pressed` button named "Show value". Its
40
+ * name does not change with state, and it does not contain the word
41
+ * "password", so a label query for the input matches one element. Its
42
+ * `aria-controls` points at the input's `id`: the `id` you pass, else a
43
+ * generated one. When `disabled` is set, the toggle is disabled too, so Tab
44
+ * skips the component. The input keeps `autocomplete="current-password"` /
45
+ * `"new-password"` semantics. Set `autoComplete` explicitly per flow.
46
+ *
47
+ * | Data Attribute | Value | Description |
48
+ * | --- | --- | --- |
49
+ * | `data-slot` | `"password-input"` | The chrome around the input. |
50
+ * | `data-slot` | `"password-input-toggle"` | The visibility toggle button. |
40
51
  *
41
52
  * **Browser password managers.** When revealed, the input switches to
42
53
  * `type="text"` — some password managers may pause autofill in this state,
@@ -71,11 +82,12 @@ type PasswordInputProps = Omit<ComponentProps<"input">, "autoComplete" | "type">
71
82
  * }
72
83
  * ```
73
84
  */
74
- declare const PasswordInput: ({ onValueVisibilityChange, ref, showValue, ...props }: PasswordInputProps) => import("react").JSX.Element;
85
+ declare const PasswordInput: ({ disabled, id: idProp, onValueVisibilityChange, ref, showValue, ...props }: PasswordInputProps) => import("react").JSX.Element;
75
86
  //#endregion
76
87
  //#region src/components/input/is-input.d.ts
77
88
  /**
78
- * Type guard for an HTMLInputElement.
89
+ * Type guard for an `HTMLInputElement`. On the server, where `HTMLInputElement`
90
+ * is not defined, it returns `false`.
79
91
  *
80
92
  * @example
81
93
  * ```tsx
@@ -88,6 +100,6 @@ declare const PasswordInput: ({ onValueVisibilityChange, ref, showValue, ...prop
88
100
  * }
89
101
  * ```
90
102
  */
91
- declare function isInput(value: unknown): value is HTMLInputElement;
103
+ export declare function isInput(value: unknown): value is HTMLInputElement;
92
104
  //#endregion
93
- export { type AutoComplete, Input, InputCapture, type InputCaptureProps, type InputProps, type InputType, PasswordInput, type PasswordInputProps, type Validation, type WithAutoComplete, type WithInputType, type WithValidation, isInput };
105
+ export { type AutoComplete, Input, InputCapture, type InputCaptureProps, type InputProps, type InputType, PasswordInput, type PasswordInputProps, type Validation, type WithAutoComplete, type WithInputType, type WithValidation };
package/dist/input.js CHANGED
@@ -1 +1 @@
1
- import{t as e}from"./icon-lZ48P8Nn.js";import{n as t,t as n}from"./input-BnlpQF0c.js";import{t as r}from"./use-prefers-reduced-motion-Bk5zAfHY.js";import{t as i}from"./input-CXmS0OFN.js";import{useEffect as a,useRef as o,useState as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{flushSync as u}from"react-dom";import{EyeIcon as d}from"@phosphor-icons/react/Eye";import{EyeClosedIcon as f}from"@phosphor-icons/react/EyeClosed";const p=({onValueVisibilityChange:i,ref:p,showValue:m=!1,...h})=>{let[g,_]=s(m),v=g?`text`:`password`,y=g?d:f,b=o(null),x=o(null);return a(()=>{_(m)},[m]),l(n,{"data-slot":`password-input`,type:v,ref:p,...h,children:[c(t,{}),c(`button`,{type:`button`,tabIndex:-1,"aria-label":`Turn password visibility ${g?`off`:`on`}`,className:`text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0`,onClick:()=>{x.current&&=(x.current.cancel(),null);let e=!g;u(()=>{_(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:c(e,{ref:b,svg:c(y,{"aria-hidden":!0})})})]})};export{n as Input,t as InputCapture,p as PasswordInput,i as isInput};
1
+ import{t as e}from"./icon-CGKaq_tV.js";import{n as t,t as n}from"./input-BhykQSvJ.js";import{t as r}from"./use-prefers-reduced-motion-DHYDQk1h.js";import{t as i}from"./input-DQyN6gN0.js";import{useId as a,useRef as o,useState as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{flushSync as u}from"react-dom";import{EyeIcon as d}from"@phosphor-icons/react/Eye";import{EyeClosedIcon as f}from"@phosphor-icons/react/EyeClosed";const p=({disabled:i,id:p,onValueVisibilityChange:m,ref:h,showValue:g,..._})=>{let v=a(),y=p??v,b=g!=null,[x,S]=s(!1),C=b?g:x,w=C?`text`:`password`,T=C?d:f,E=o(null),D=o(null);return l(n,{"data-slot":`password-input`,disabled:i,id:y,type:w,ref:h,..._,children:[c(t,{}),c(`button`,{type:`button`,disabled:i,"data-slot":`password-input-toggle`,"aria-label":`Show value`,"aria-pressed":C,"aria-controls":y,className:`text-body hover:text-strong focus-visible:ring-focus-accent ml-1 cursor-pointer rounded-xs bg-inherit p-0 focus-visible:ring-2 focus-visible:outline-hidden`,onClick:()=>{D.current&&=(D.current.cancel(),null);let e=!C;u(()=>{b||S(e),m?.(e)});let t=E.current;t&&!r()&&(D.current=t.animate([{transform:`scaleY(0)`},{transform:`scaleY(1)`}],{duration:200,easing:`ease-out`}),D.current.onfinish=()=>{D.current=null},D.current.finished.catch(()=>{}))},children:c(e,{ref:E,svg:c(T,{"aria-hidden":!0})})})]})};export{n as Input,t as InputCapture,p as PasswordInput,i as isInput};
@@ -0,0 +1 @@
1
+ function e(e,t){if(!(e instanceof Element))return!1;let n=e.closest(`a[href], button, details, input, select, textarea, label, [role="button"], [role="link"], [role="menuitem"], [contenteditable="true"]`);return n!=null&&t.contains(n)}export{e as t};
@@ -1 +1 @@
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,translate:`no`,children:n})}export{n as t};
1
+ import{t as e}from"./cx-0HCjnNv1.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,translate:`no`,children:n})}export{n as t};
package/dist/kbd.d.ts CHANGED
@@ -17,9 +17,10 @@ import { ComponentProps } from "react";
17
17
  * `<Kbd>` elements separated by `+` text instead.
18
18
  *
19
19
  * **Accessibility.** Symbol-only glyphs (`⌘`, `⌃`, `↵`) are not announced
20
- * meaningfully by screen readers. Set an accessible name via
21
- * `aria-label` on the `<Kbd>` or include a visually-hidden label inside,
22
- * and mark the visible glyph `aria-hidden`.
20
+ * meaningfully by screen readers. Put a visually hidden label inside the
21
+ * `<Kbd>` and mark the visible glyph `aria-hidden`. Do not set `aria-label`
22
+ * on the `<Kbd>`: `<kbd>` has the `generic` role, which prohibits naming, so
23
+ * a screen reader does not read the label reliably.
23
24
  *
24
25
  * **Translation.** The `<kbd>` element always carries `translate="no"`, so a
25
26
  * browser translation engine skips the subtree. A translated shortcut names a
@@ -36,16 +37,21 @@ import { ComponentProps } from "react";
36
37
  * // Letter key.
37
38
  * <Kbd>K</Kbd>
38
39
  *
39
- * // Chord render each key separately.
40
- * <span>
41
- * <Kbd aria-label="Command">⌘</Kbd> + <Kbd>K</Kbd>
42
- * </span>
43
- *
44
- * // Symbol with sr-only label.
40
+ * // Symbol: a visually hidden label names the key, and the glyph is hidden.
45
41
  * <Kbd>
46
42
  * <span className="sr-only">Enter</span>
47
43
  * <span aria-hidden>↵</span>
48
44
  * </Kbd>
45
+ *
46
+ * // Chord — render each key separately.
47
+ * <span className="inline-flex items-center gap-1">
48
+ * <Kbd>
49
+ * <span className="sr-only">Command</span>
50
+ * <span aria-hidden>⌘</span>
51
+ * </Kbd>
52
+ * <span>+</span>
53
+ * <Kbd>K</Kbd>
54
+ * </span>
49
55
  * ```
50
56
  */
51
57
  declare function Kbd({ children, className, ...props }: Omit<ComponentProps<"kbd">, "translate">): import("react").JSX.Element;
package/dist/kbd.js CHANGED
@@ -1 +1 @@
1
- import{t as e}from"./kbd-B9qmYaW8.js";export{e as Kbd};
1
+ import{t as e}from"./kbd-4_0Y_8rx.js";export{e as Kbd};
@@ -29,7 +29,9 @@ type LabelProps = ComponentProps<"label"> & {
29
29
  *
30
30
  * **Disabled state.** Pass `disabled` to render the label in a disabled
31
31
  * style. Typically you'll want this to mirror the underlying control's
32
- * disabled state so the visual treatment stays consistent.
32
+ * disabled state so the visual treatment stays consistent. The label stamps
33
+ * `data-disabled` for that style; it never sets `aria-disabled`, because a
34
+ * `<label>` has no role that supports it.
33
35
  *
34
36
  * **Font weight.** A `Label` automatically gets `font-medium` when it does
35
37
  * **not** contain a nested form control (`<input>`, `<textarea>`, `<select>`,