neba 1.12.0 → 1.15.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 (348) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +50 -56
  3. package/dist/a2ui/catalog.json +1466 -0
  4. package/dist/a2ui/components.d.ts +21 -0
  5. package/dist/a2ui/components.js +1 -0
  6. package/dist/a2ui/index.d.ts +62 -0
  7. package/dist/a2ui/index.js +1 -0
  8. package/dist/a2ui/schema.d.ts +47 -0
  9. package/dist/a2ui/schema.js +1 -0
  10. package/dist/components/accordion/Accordion.d.ts +23 -1
  11. package/dist/components/accordion/Accordion.js +1 -1
  12. package/dist/components/agent-steps/AgentSteps.d.ts +80 -0
  13. package/dist/components/agent-steps/AgentSteps.js +1 -0
  14. package/dist/components/agent-steps/index.d.ts +2 -0
  15. package/dist/components/agent-steps/index.js +1 -0
  16. package/dist/components/alert/Alert.js +1 -1
  17. package/dist/components/anchor/Anchor.d.ts +3 -2
  18. package/dist/components/anchor/Anchor.js +1 -1
  19. package/dist/components/animate-appear/AnimateAppear.js +1 -1
  20. package/dist/components/animate-blink/AnimateBlink.d.ts +3 -0
  21. package/dist/components/animate-blink/AnimateBlink.js +1 -1
  22. package/dist/components/animate-counter/AnimateCounter.d.ts +3 -1
  23. package/dist/components/animate-counter/AnimateCounter.js +1 -1
  24. package/dist/components/animate-fade/AnimateFade.js +1 -1
  25. package/dist/components/animate-float/AnimateFloat.js +1 -1
  26. package/dist/components/animate-grow/AnimateGrow.js +1 -1
  27. package/dist/components/animate-headline/AnimateHeadline.d.ts +9 -2
  28. package/dist/components/animate-headline/AnimateHeadline.js +1 -1
  29. package/dist/components/animate-lighting/AnimateLighting.d.ts +1 -1
  30. package/dist/components/animate-lighting/AnimateLighting.js +1 -1
  31. package/dist/components/animate-marquee/AnimateMarquee.d.ts +19 -8
  32. package/dist/components/animate-marquee/AnimateMarquee.js +1 -1
  33. package/dist/components/animate-reveal/AnimateReveal.js +1 -1
  34. package/dist/components/animate-rotate/AnimateRotate.js +1 -1
  35. package/dist/components/animate-scramble/AnimateScramble.d.ts +5 -3
  36. package/dist/components/animate-scramble/AnimateScramble.js +1 -1
  37. package/dist/components/animate-shake/AnimateShake.js +1 -1
  38. package/dist/components/animate-slide/AnimateSlide.js +1 -1
  39. package/dist/components/animate-split/AnimateSplit.d.ts +3 -1
  40. package/dist/components/animate-split/AnimateSplit.js +1 -1
  41. package/dist/components/animate-typing/AnimateTyping.d.ts +12 -4
  42. package/dist/components/animate-typing/AnimateTyping.js +1 -1
  43. package/dist/components/animate-zoom/AnimateZoom.js +1 -1
  44. package/dist/components/app-logo/AppLogo.js +1 -1
  45. package/dist/components/approval/Approval.d.ts +115 -0
  46. package/dist/components/approval/Approval.js +1 -0
  47. package/dist/components/approval/index.d.ts +2 -0
  48. package/dist/components/approval/index.js +1 -0
  49. package/dist/components/area-chart/AreaChart.js +1 -1
  50. package/dist/components/aspect-ratio/AspectRatio.d.ts +6 -4
  51. package/dist/components/aspect-ratio/AspectRatio.js +1 -1
  52. package/dist/components/avatar/Avatar.js +1 -1
  53. package/dist/components/badge/Badge.js +1 -1
  54. package/dist/components/bar-chart/BarChart.d.ts +1 -1
  55. package/dist/components/bar-chart/BarChart.js +1 -1
  56. package/dist/components/blockquote/Blockquote.js +1 -1
  57. package/dist/components/bottom-navigation/BottomNavigation.d.ts +12 -1
  58. package/dist/components/bottom-navigation/BottomNavigation.js +1 -1
  59. package/dist/components/box/Box.d.ts +5 -0
  60. package/dist/components/box/Box.js +1 -1
  61. package/dist/components/breadcrumb/Breadcrumb.d.ts +10 -0
  62. package/dist/components/breadcrumb/Breadcrumb.js +1 -1
  63. package/dist/components/button/Button.d.ts +11 -0
  64. package/dist/components/button/Button.js +1 -1
  65. package/dist/components/button-group/ButtonGroup.js +1 -1
  66. package/dist/components/calendar/Calendar.js +1 -1
  67. package/dist/components/card/Card.js +1 -1
  68. package/dist/components/carousel/Carousel.d.ts +17 -0
  69. package/dist/components/carousel/Carousel.js +1 -1
  70. package/dist/components/chat-bubble/ChatBubble.js +1 -1
  71. package/dist/components/checkbox/Checkbox.js +1 -1
  72. package/dist/components/chip/Chip.d.ts +3 -1
  73. package/dist/components/chip/Chip.js +1 -1
  74. package/dist/components/code-block/CodeBlock.d.ts +6 -3
  75. package/dist/components/code-block/CodeBlock.js +1 -1
  76. package/dist/components/collapsible/Collapsible.d.ts +11 -1
  77. package/dist/components/collapsible/Collapsible.js +1 -1
  78. package/dist/components/color-picker/ColorPicker.js +1 -1
  79. package/dist/components/combobox/Combobox.d.ts +29 -1
  80. package/dist/components/combobox/Combobox.js +1 -1
  81. package/dist/components/command-palette/CommandPalette.js +1 -1
  82. package/dist/components/confirm/Confirm.js +1 -1
  83. package/dist/components/container/Container.js +1 -1
  84. package/dist/components/context-window/ContextWindow.d.ts +103 -0
  85. package/dist/components/context-window/ContextWindow.js +1 -0
  86. package/dist/components/context-window/index.d.ts +2 -0
  87. package/dist/components/context-window/index.js +1 -0
  88. package/dist/components/data-list/DataList.js +1 -1
  89. package/dist/components/data-table/DataTable.d.ts +12 -1
  90. package/dist/components/data-table/DataTable.js +1 -1
  91. package/dist/components/date-picker/DatePicker.js +1 -1
  92. package/dist/components/date-range-picker/DateRangePicker.js +1 -1
  93. package/dist/components/date-time-picker/DateTimePicker.js +1 -1
  94. package/dist/components/dialog/Dialog.d.ts +12 -0
  95. package/dist/components/dialog/Dialog.js +1 -1
  96. package/dist/components/divider/Divider.js +1 -1
  97. package/dist/components/drawer/Drawer.d.ts +7 -0
  98. package/dist/components/drawer/Drawer.js +1 -1
  99. package/dist/components/empty/Empty.js +1 -1
  100. package/dist/components/fieldset/Fieldset.js +1 -1
  101. package/dist/components/file-picker/FilePicker.d.ts +12 -4
  102. package/dist/components/file-picker/FilePicker.js +1 -1
  103. package/dist/components/flex/Flex.d.ts +8 -2
  104. package/dist/components/flex/Flex.js +1 -1
  105. package/dist/components/floating-action-button/FloatingActionButton.d.ts +16 -1
  106. package/dist/components/floating-action-button/FloatingActionButton.js +1 -1
  107. package/dist/components/floating-bottom-navigation/FloatingBottomNavigation.js +1 -1
  108. package/dist/components/footer/Footer.d.ts +8 -0
  109. package/dist/components/footer/Footer.js +1 -1
  110. package/dist/components/form/Form.d.ts +4 -2
  111. package/dist/components/form/Form.js +1 -1
  112. package/dist/components/gallery/Gallery.d.ts +56 -3
  113. package/dist/components/gallery/Gallery.js +1 -1
  114. package/dist/components/gallery/GalleryViewer.js +1 -1
  115. package/dist/components/gauge-chart/GaugeChart.js +1 -1
  116. package/dist/components/grid/Grid.d.ts +11 -1
  117. package/dist/components/grid/Grid.js +1 -1
  118. package/dist/components/grid-container/GridContainer.js +1 -1
  119. package/dist/components/header/Header.js +1 -1
  120. package/dist/components/heatmap-chart/HeatmapChart.js +1 -1
  121. package/dist/components/highlight/Highlight.js +1 -1
  122. package/dist/components/hover-card/HoverCard.js +1 -1
  123. package/dist/components/how-to-steps/HowToSteps.d.ts +26 -1
  124. package/dist/components/how-to-steps/HowToSteps.js +1 -1
  125. package/dist/components/icon/Icon.js +1 -1
  126. package/dist/components/icon-button/IconButton.d.ts +0 -20
  127. package/dist/components/icon-button/IconButton.js +1 -1
  128. package/dist/components/image/Image.d.ts +162 -8
  129. package/dist/components/image/Image.js +1 -1
  130. package/dist/components/image/index.d.ts +1 -1
  131. package/dist/components/inline-citation/InlineCitation.d.ts +53 -0
  132. package/dist/components/inline-citation/InlineCitation.js +1 -0
  133. package/dist/components/inline-citation/index.d.ts +2 -0
  134. package/dist/components/inline-citation/index.js +1 -0
  135. package/dist/components/list/List.js +1 -1
  136. package/dist/components/menu/Menu.d.ts +7 -4
  137. package/dist/components/menu/Menu.js +1 -1
  138. package/dist/components/menubar/Menubar.js +1 -1
  139. package/dist/components/meter/Meter.d.ts +13 -0
  140. package/dist/components/meter/Meter.js +1 -1
  141. package/dist/components/mockup/Mockup.js +1 -1
  142. package/dist/components/navigation-menu/NavigationMenu.d.ts +10 -1
  143. package/dist/components/navigation-menu/NavigationMenu.js +1 -1
  144. package/dist/components/number-field/NumberField.d.ts +20 -6
  145. package/dist/components/number-field/NumberField.js +1 -1
  146. package/dist/components/otp-field/OtpField.d.ts +7 -0
  147. package/dist/components/otp-field/OtpField.js +1 -1
  148. package/dist/components/overlay/Overlay.d.ts +1 -1
  149. package/dist/components/overlay/Overlay.js +1 -1
  150. package/dist/components/page-layout/PageLayout.d.ts +11 -0
  151. package/dist/components/page-layout/PageLayout.js +1 -1
  152. package/dist/components/pagination/Pagination.js +1 -1
  153. package/dist/components/panes/Panes.d.ts +11 -0
  154. package/dist/components/panes/Panes.js +1 -1
  155. package/dist/components/pie-chart/PieChart.d.ts +5 -3
  156. package/dist/components/pie-chart/PieChart.js +1 -1
  157. package/dist/components/pill/Pill.d.ts +8 -0
  158. package/dist/components/pill/Pill.js +1 -1
  159. package/dist/components/popconfirm/Popconfirm.d.ts +10 -3
  160. package/dist/components/popconfirm/Popconfirm.js +1 -1
  161. package/dist/components/popover/Popover.d.ts +8 -1
  162. package/dist/components/popover/Popover.js +1 -1
  163. package/dist/components/portal/Portal.js +1 -1
  164. package/dist/components/progress-box/ProgressBox.js +1 -1
  165. package/dist/components/progress-circular/ProgressCircular.d.ts +10 -1
  166. package/dist/components/progress-circular/ProgressCircular.js +1 -1
  167. package/dist/components/progress-linear/ProgressLinear.d.ts +7 -1
  168. package/dist/components/progress-linear/ProgressLinear.js +1 -1
  169. package/dist/components/prompt-input/PromptInput.d.ts +104 -0
  170. package/dist/components/prompt-input/PromptInput.js +1 -0
  171. package/dist/components/prompt-input/index.d.ts +2 -0
  172. package/dist/components/prompt-input/index.js +1 -0
  173. package/dist/components/provider/NebaProvider.d.ts +3 -3
  174. package/dist/components/provider/NebaProvider.js +1 -1
  175. package/dist/components/radio-group/RadioGroup.js +1 -1
  176. package/dist/components/rating/Rating.d.ts +4 -1
  177. package/dist/components/rating/Rating.js +1 -1
  178. package/dist/components/reasoning/Reasoning.d.ts +78 -0
  179. package/dist/components/reasoning/Reasoning.js +1 -0
  180. package/dist/components/reasoning/index.d.ts +2 -0
  181. package/dist/components/reasoning/index.js +1 -0
  182. package/dist/components/scatter-chart/ScatterChart.js +1 -1
  183. package/dist/components/scroll-area/ScrollArea.js +1 -1
  184. package/dist/components/scroll-zone/ScrollZone.d.ts +18 -7
  185. package/dist/components/scroll-zone/ScrollZone.js +1 -1
  186. package/dist/components/segmented-button/SegmentedButton.js +1 -1
  187. package/dist/components/select/Select.d.ts +13 -0
  188. package/dist/components/select/Select.js +1 -1
  189. package/dist/components/shortcut/Shortcut.js +1 -1
  190. package/dist/components/show/Show.d.ts +6 -5
  191. package/dist/components/show/Show.js +1 -1
  192. package/dist/components/sidebar/Sidebar.d.ts +7 -5
  193. package/dist/components/sidebar/Sidebar.js +1 -1
  194. package/dist/components/sidebar/SidebarTrigger.js +1 -1
  195. package/dist/components/skeleton/Skeleton.d.ts +1 -1
  196. package/dist/components/skeleton/Skeleton.js +1 -1
  197. package/dist/components/slider/Slider.d.ts +49 -2
  198. package/dist/components/slider/Slider.js +1 -1
  199. package/dist/components/sources/Sources.d.ts +78 -0
  200. package/dist/components/sources/Sources.js +1 -0
  201. package/dist/components/sources/index.d.ts +2 -0
  202. package/dist/components/sources/index.js +1 -0
  203. package/dist/components/sparkline/Sparkline.js +1 -1
  204. package/dist/components/spoiler/Spoiler.js +1 -1
  205. package/dist/components/stack/Stack.d.ts +2 -2
  206. package/dist/components/stack/Stack.js +1 -1
  207. package/dist/components/statistic/Statistic.js +1 -1
  208. package/dist/components/streaming-text/StreamingText.d.ts +75 -0
  209. package/dist/components/streaming-text/StreamingText.js +1 -0
  210. package/dist/components/streaming-text/index.d.ts +2 -0
  211. package/dist/components/streaming-text/index.js +1 -0
  212. package/dist/components/switch/Switch.js +1 -1
  213. package/dist/components/table/Table.d.ts +8 -2
  214. package/dist/components/table/Table.js +1 -1
  215. package/dist/components/tabs/Tabs.d.ts +18 -0
  216. package/dist/components/tabs/Tabs.js +1 -1
  217. package/dist/components/text-field/TextField.js +1 -1
  218. package/dist/components/text-link/TextLink.js +1 -1
  219. package/dist/components/time-picker/TimePicker.js +1 -1
  220. package/dist/components/timeline/Timeline.d.ts +8 -0
  221. package/dist/components/timeline/Timeline.js +1 -1
  222. package/dist/components/timeline-chart/TimelineChart.js +1 -1
  223. package/dist/components/toast/Toast.d.ts +9 -3
  224. package/dist/components/toast/Toast.js +1 -1
  225. package/dist/components/toggle/Toggle.js +1 -1
  226. package/dist/components/toggle-group/ToggleGroup.js +1 -1
  227. package/dist/components/tool-call/ToolCall.d.ts +104 -0
  228. package/dist/components/tool-call/ToolCall.js +1 -0
  229. package/dist/components/tool-call/index.d.ts +2 -0
  230. package/dist/components/tool-call/index.js +1 -0
  231. package/dist/components/toolbar/Toolbar.d.ts +8 -0
  232. package/dist/components/toolbar/Toolbar.js +1 -1
  233. package/dist/components/tooltip/Tooltip.js +1 -1
  234. package/dist/components/tour/Tour.d.ts +2 -0
  235. package/dist/components/tour/Tour.js +1 -1
  236. package/dist/components/transfer/Transfer.js +1 -1
  237. package/dist/components/tree-select/TreeSelect.d.ts +2 -0
  238. package/dist/components/tree-select/TreeSelect.js +1 -1
  239. package/dist/components/tree-view/TreeView.d.ts +6 -0
  240. package/dist/components/tree-view/TreeView.js +1 -1
  241. package/dist/components/typography/Typography.js +1 -1
  242. package/dist/components/visually-hidden/VisuallyHidden.d.ts +9 -7
  243. package/dist/components/visually-hidden/VisuallyHidden.js +1 -1
  244. package/dist/components/window-pane/WindowPane.d.ts +2 -2
  245. package/dist/components/window-pane/WindowPane.js +1 -1
  246. package/dist/hooks/useElementSize.d.ts +3 -1
  247. package/dist/hooks/useElementSize.js +1 -1
  248. package/dist/hooks/useOnScreen.d.ts +3 -0
  249. package/dist/hooks/useOnScreen.js +1 -1
  250. package/dist/index.d.ts +9 -0
  251. package/dist/index.js +1 -1
  252. package/dist/internal/animate.d.ts +63 -16
  253. package/dist/internal/animate.js +1 -1
  254. package/dist/internal/cache.d.ts +24 -0
  255. package/dist/internal/cache.js +1 -0
  256. package/dist/internal/calendar.d.ts +21 -43
  257. package/dist/internal/calendar.js +1 -1
  258. package/dist/internal/chart-frame.d.ts +80 -25
  259. package/dist/internal/chart-frame.js +1 -1
  260. package/dist/internal/chart-line.js +1 -1
  261. package/dist/internal/chart.d.ts +55 -4
  262. package/dist/internal/chart.js +1 -1
  263. package/dist/internal/children.d.ts +15 -0
  264. package/dist/internal/children.js +1 -0
  265. package/dist/internal/color.d.ts +4 -0
  266. package/dist/internal/color.js +1 -1
  267. package/dist/internal/csv.d.ts +12 -1
  268. package/dist/internal/csv.js +1 -1
  269. package/dist/internal/data-table.d.ts +28 -10
  270. package/dist/internal/data-table.js +1 -1
  271. package/dist/internal/date.d.ts +12 -5
  272. package/dist/internal/date.js +1 -1
  273. package/dist/internal/defaults.d.ts +6 -1
  274. package/dist/internal/defaults.js +1 -1
  275. package/dist/internal/drag.d.ts +21 -7
  276. package/dist/internal/drag.js +1 -1
  277. package/dist/internal/drop.d.ts +61 -0
  278. package/dist/internal/drop.js +1 -0
  279. package/dist/internal/fieldset.d.ts +13 -0
  280. package/dist/internal/fieldset.js +1 -0
  281. package/dist/internal/format.d.ts +21 -7
  282. package/dist/internal/format.js +1 -1
  283. package/dist/internal/glow.d.ts +58 -0
  284. package/dist/internal/glow.js +1 -0
  285. package/dist/internal/grid.d.ts +16 -0
  286. package/dist/internal/grid.js +1 -1
  287. package/dist/internal/highlight.js +1 -1
  288. package/dist/internal/i18n.d.ts +302 -11
  289. package/dist/internal/i18n.js +1 -1
  290. package/dist/internal/icons.d.ts +38 -2
  291. package/dist/internal/icons.js +1 -1
  292. package/dist/internal/inert.d.ts +13 -0
  293. package/dist/internal/inert.js +1 -0
  294. package/dist/internal/initials.d.ts +8 -3
  295. package/dist/internal/initials.js +1 -1
  296. package/dist/internal/keys.d.ts +13 -0
  297. package/dist/internal/keys.js +1 -1
  298. package/dist/internal/link.d.ts +13 -14
  299. package/dist/internal/link.js +1 -1
  300. package/dist/internal/media.d.ts +9 -17
  301. package/dist/internal/media.js +1 -1
  302. package/dist/internal/menu.d.ts +6 -1
  303. package/dist/internal/mockup.d.ts +5 -4
  304. package/dist/internal/mockup.js +1 -1
  305. package/dist/internal/observe.d.ts +12 -0
  306. package/dist/internal/observe.js +1 -1
  307. package/dist/internal/page-layout.d.ts +10 -8
  308. package/dist/internal/page-layout.js +1 -1
  309. package/dist/internal/picker.d.ts +8 -3
  310. package/dist/internal/picker.js +1 -1
  311. package/dist/internal/progress.d.ts +35 -6
  312. package/dist/internal/progress.js +1 -1
  313. package/dist/internal/responsive.d.ts +0 -8
  314. package/dist/internal/responsive.js +1 -1
  315. package/dist/internal/run.d.ts +71 -0
  316. package/dist/internal/run.js +1 -0
  317. package/dist/internal/screen.d.ts +12 -0
  318. package/dist/internal/screen.js +1 -0
  319. package/dist/internal/styles.d.ts +245 -4
  320. package/dist/internal/styles.js +1 -1
  321. package/dist/internal/text.d.ts +3 -13
  322. package/dist/internal/text.js +1 -1
  323. package/dist/internal/wheel.d.ts +38 -0
  324. package/dist/internal/wheel.js +1 -0
  325. package/dist/internal/window.js +1 -1
  326. package/dist/locales/ar.js +1 -1
  327. package/dist/locales/de.js +1 -1
  328. package/dist/locales/es.js +1 -1
  329. package/dist/locales/fr.js +1 -1
  330. package/dist/locales/hi.js +1 -1
  331. package/dist/locales/id.js +1 -1
  332. package/dist/locales/it.js +1 -1
  333. package/dist/locales/ja.js +1 -1
  334. package/dist/locales/ko.js +1 -1
  335. package/dist/locales/nl.js +1 -1
  336. package/dist/locales/pl.js +1 -1
  337. package/dist/locales/pt.js +1 -1
  338. package/dist/locales/ru.js +1 -1
  339. package/dist/locales/th.js +1 -1
  340. package/dist/locales/tr.js +1 -1
  341. package/dist/locales/vi.js +1 -1
  342. package/dist/locales/zh-hans.js +1 -1
  343. package/dist/locales/zh-hant.js +1 -1
  344. package/dist/styles.css +1 -1
  345. package/dist/tailwind.css +632 -59
  346. package/dist/types.d.ts +34 -7
  347. package/dist/types.js +0 -8
  348. package/package.json +44 -10
@@ -0,0 +1 @@
1
+ export{InlineCitation}from"./InlineCitation.js";
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as r,Fragment as s}from"react/jsx-runtime";import*as n from"react";import{useRender as t}from"@base-ui/react/use-render";import{boxPaddingXClasses as l}from"../box/Box.js";import{cx as a,focusRingClasses as i,gapClasses as o,hasContent as d,iconClasses as c,metaTextClasses as m,radiusClasses as f,sheetBodyClasses as x,surfaceClasses as p,surfaceSlots as u,transitionClasses as h}from"../../internal/styles.js";import{useStyleDefaults as b}from"../../internal/defaults.js";const v=/*@__PURE__*/n.createContext({size:"md",density:"default",dividers:!1}),y={solid:[p,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[p,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},g={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},N={xs:f.xs,sm:f.xs,md:f.sm,lg:f.sm,xl:f.md};export const List=/*@__PURE__*/n.forwardRef(function(r,s){const{variant:l="outline",size:i="md",color:o="primary",density:d="default",elevation:c=0,dividers:m=!1,render:x,className:p,style:g,children:N,...w}=b(r,["size","density","variant"]),j=n.useMemo(()=>({size:i,density:d,dividers:m}),[i,d,m]),k=a("flex flex-col",f[i],y[l],h,m?"overflow-hidden [&>li+li]:border-t [&>li+li]:[border-color:var(--n-line)]":"p-1",p??""),z=t({render:x,ref:s,props:{role:"list",className:k,style:{...u(o,c),...g},children:N,...w}});return e(v.Provider,{value:j,children:z})});export const ListItem=/*@__PURE__*/n.forwardRef(function({startIcon:t,endIcon:f,description:p,action:u,href:b,selected:y=!1,disabled:w=!1,className:j,children:k,onClick:z,...C},I){const{size:$,density:B,dividers:L}=n.useContext(v),R=Boolean(z||b)&&!w,F=l[B][$],M=g[B][$],P=a("flex min-w-0 flex-1 items-center text-start",F,M,o[$],x[$],h,c,L?"":N[$],w?"cursor-not-allowed text-(--neba-disabled-fg)":y?"bg-(--n-soft-press) font-medium text-(--n-accent)":"",R?`cursor-pointer ${i}`:"",R&&!y?"hover:bg-(--n-soft)":"",R&&y?"hover:bg-(--n-soft-press)":""),q=r(s,{children:[d(t)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:t}):null,r("span",{className:"flex min-w-0 flex-1 flex-col",children:[d(k)?e("span",{className:"truncate",children:k}):null,d(p)?e("span",{className:`truncate text-(--neba-muted-fg) ${m[$]}`,children:p}):null]}),d(f)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:f}):null]});return r("li",{ref:I,className:a("flex w-full items-center",j??""),...C,children:[R&&b?e("a",{href:b,className:P,"aria-current":y?"page":void 0,onClick:z,children:q}):R?e("button",{type:"button",className:P,"aria-current":!!y||void 0,onClick:z,children:q}):e("div",{className:P,"aria-disabled":w||void 0,children:q}),d(u)?e("div",{className:`flex shrink-0 items-center ${F}`,children:u}):null]})});
1
+ "use client";import{jsx as e,jsxs as n,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{safeHref as s}from"../../internal/link.js";import{useRender as l}from"@base-ui/react/use-render";import{boxPaddingXClasses as i}from"../box/Box.js";import{cx as a,focusRingClasses as o,gapClasses as d,hasContent as c,iconClasses as m,metaTextClasses as f,radiusClasses as p,sheetBodyClasses as x,surfaceClasses as u,surfaceSlots as h,transitionClasses as v}from"../../internal/styles.js";import{useStyleDefaults as b}from"../../internal/defaults.js";const g=/*@__PURE__*/t.createContext({size:"md",density:"default",dividers:!1}),y={solid:[u,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[u,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},N={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},j={xs:p.xs,sm:p.xs,md:p.sm,lg:p.sm,xl:p.md};export const List=/*@__PURE__*/t.forwardRef(function List(n,r){const{variant:s="outline",size:i="md",color:o="primary",density:d="default",elevation:c=0,dividers:m=!1,render:f,className:x,style:u,children:N,...j}=b(n,["size","density","variant"]),w=t.useMemo(()=>({size:i,density:d,dividers:m}),[i,d,m]),k=a("flex flex-col",p[i],y[s],v,m?"overflow-hidden [&>li+li]:border-t [&>li+li]:[border-color:var(--n-line)]":"p-1",x??""),z=l({render:f,ref:r,props:{role:"list",className:k,style:{...h(o,c),...u},children:N,...j}});return e(g.Provider,{value:w,children:z})});export const ListItem=/*@__PURE__*/t.forwardRef(function ListItem({startIcon:l,endIcon:p,description:u,action:h,href:b,selected:y=!1,disabled:w=!1,className:k,children:z,onClick:C,...I},L){const{size:_,density:B,dividers:R}=t.useContext(g),$=s(b),F=Boolean(C||$)&&!w,M=i[B][_],P=N[B][_],q=a("flex min-w-0 flex-1 items-center text-start",M,P,d[_],x[_],v,m,R?"":j[_],w?"cursor-not-allowed text-(--neba-disabled-fg)":y?"bg-(--n-soft-press) font-medium text-(--n-on-tint)":"",F?`cursor-pointer ${R?"[outline:0_solid_var(--n-ring)] outline-offset-[-2px] focus-visible:[outline:2px_solid_var(--n-ring)]":o}`:"",F&&!y?"hover:bg-(--n-soft)":"",F&&y?"hover:bg-(--n-soft-press)":""),A=n(r,{children:[c(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:l}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[c(z)?e("span",{className:"truncate",children:z}):null,c(u)?e("span",{className:a("truncate",f[_],y?"":"text-(--neba-muted-fg)"),children:u}):null]}),c(p)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:p}):null]});return n("li",{ref:L,className:a("flex w-full items-center",k??""),...I,children:[F&&$?e("a",{href:$,className:q,"aria-current":y?"page":void 0,onClick:C,children:A}):F?e("button",{type:"button",className:q,"aria-current":!!y||void 0,onClick:C,children:A}):e("div",{className:q,"aria-disabled":w||void 0,"aria-current":!!y||void 0,children:A}),c(h)?e("div",{className:`flex shrink-0 items-center ${M}`,children:h}):null]})});
@@ -120,7 +120,10 @@ export interface MenuSubmenuProps {
120
120
  label?: React.ReactNode;
121
121
  startIcon?: React.ReactNode;
122
122
  disabled?: boolean;
123
- /** Which edge of the parent row it opens against. @default 'right' */
123
+ /**
124
+ * Which edge of the parent row it opens against. Left out, it opens at the
125
+ * row's inline end: to the right, or to the left under RTL.
126
+ */
124
127
  side?: NebaSide;
125
128
  /** Distance from the parent menu, in pixels. @default 4 */
126
129
  sideOffset?: number;
@@ -170,7 +173,7 @@ export type MenuSeparatorProps = React.ComponentPropsWithoutRef<'div'>;
170
173
  * links that are not links cannot be opened in a new tab, cannot be copied, and
171
174
  * tells a screen reader the wrong thing about every one of them.
172
175
  */
173
- export declare function MenuItem({ onClick, href, target, rel, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MenuItemProps): React.JSX.Element;
176
+ export declare function MenuItem({ onClick, href: hrefProp, target, rel, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MenuItemProps): React.JSX.Element;
174
177
  /** A row that ticks. The tick lands in the same slot a `startIcon` would. */
175
178
  export declare function MenuCheckboxItem({ checked, defaultChecked, onCheckedChange, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MenuCheckboxItemProps): React.JSX.Element;
176
179
  /** One choice out of a set. Wraps the rows that make up the set. */
@@ -214,7 +217,7 @@ export declare function MenuSubmenu({ label, startIcon, disabled, side, sideOffs
214
217
  * shape a row can take, which is a component tree spelled as a discriminated
215
218
  * union.
216
219
  */
217
- export declare function Menu({ size, color, density, trigger, open, defaultOpen, onOpenChange, side, align, sideOffset, modal, openOnHover, loopFocus, disabled, className, style, children }: MenuProps): React.JSX.Element;
220
+ export declare function Menu(rawProps: MenuProps): React.JSX.Element;
218
221
  /**
219
222
  * The same menu, opened by a right-click or a long press instead of by a button.
220
223
  *
@@ -224,5 +227,5 @@ export declare function Menu({ size, color, density, trigger, open, defaultOpen,
224
227
  * wrapped. Base UI positions the popup at the pointer rather than against an
225
228
  * anchor, and the long press is what makes it reachable on a touch screen at all.
226
229
  */
227
- export declare function ContextMenu({ size, color, density, content, children, open, defaultOpen, onOpenChange, loopFocus, disabled, className, style }: ContextMenuProps): React.JSX.Element;
230
+ export declare function ContextMenu(rawProps: ContextMenuProps): React.JSX.Element;
228
231
  export {};
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as n,Fragment as l}from"react/jsx-runtime";import*as t from"react";import{Menu as s}from"@base-ui/react/menu";import{ContextMenu as a}from"@base-ui/react/context-menu";import{MenuContext as o}from"../../internal/menu.js";import{CheckIcon as r,ChevronIcon as i,DotIcon as c}from"../../internal/icons.js";import{safeRel as d}from"../../internal/link.js";import{controlTextLeadingClasses as u,cx as m,gapClasses as p,hasContent as h,iconClasses as x,metaTextClasses as f,popupFadeClasses as b,radiusClasses as g,surfaceClasses as N,surfaceSlots as y,transitionClasses as C}from"../../internal/styles.js";const k=[N,"max-h-[min(24rem,var(--available-height))] min-w-40 overflow-y-auto overscroll-contain","border bg-(--n-panel-press) p-1","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]",b].join(" "),v={default:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-2",xl:"px-3.5 py-2.5"},compact:{xs:"px-1 py-0.5",sm:"px-1.5 py-0.5",md:"px-2 py-1",lg:"px-2.5 py-1",xl:"px-3 py-1.5"}},O={xs:g.xs,sm:g.xs,md:g.sm,lg:g.sm,xl:g.md};function z(e,n,l,t){return m("relative flex w-full cursor-pointer items-center select-none",l?"text-(--n-accent)":"text-(--neba-fg)",v[n][e],O[e],p[e],u[e],C,x,"data-[highlighted]:bg-(--n-soft-hover)","data-[popup-open]:bg-(--n-soft)","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]",t??"")}const I="flex h-[1lh] w-[1.2em] shrink-0 items-center justify-center";function M({children:l,description:t,size:s}){return h(t)?n("span",{className:"flex min-w-0 flex-1 flex-col text-start",children:[e("span",{className:"truncate",children:l}),e("span",{className:`truncate text-(--neba-muted-fg) ${f[s]}`,children:t})]}):e("span",{className:"min-w-0 flex-1 truncate text-start",children:l})}export function MenuItem({onClick:a,href:r,target:i,rel:c,startIcon:u,endIcon:m,shortcut:p,description:x,color:b,closeOnClick:g=!0,disabled:N=!1,label:C,children:k,className:v,style:O}){const j=t.useContext(o),{size:$,density:w}=j,P=n(l,{children:[h(u)?e("span",{className:`${I} text-(--neba-muted-fg)`,children:u}):null,e(M,{description:x,size:$,children:k}),h(m)?e("span",{className:`${I} text-(--neba-muted-fg)`,children:m}):null,h(p)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${f[$]}`,children:p}):null]}),R=b?y(b,0):void 0,F=R||O?{...R,...O}:void 0;return void 0!==r?e(s.LinkItem,{href:r,target:i,rel:d(i,c),label:C,closeOnClick:g,onClick:a,className:z($,w,Boolean(b),v),style:F,children:P}):e(s.Item,{disabled:N,label:C,closeOnClick:g,onClick:a,className:z($,w,Boolean(b),v),style:F,children:P})}export function MenuCheckboxItem({checked:l,defaultChecked:a,onCheckedChange:i,endIcon:c,shortcut:d,description:u,color:m,closeOnClick:p=!1,disabled:x=!1,label:b,children:g,className:N,style:C}){const{size:k,density:v}=t.useContext(o),O=m?y(m,0):void 0;return n(s.CheckboxItem,{checked:l,defaultChecked:a,onCheckedChange:e=>i?.(e),disabled:x,label:b,closeOnClick:p,className:z(k,v,Boolean(m),N),style:O||C?{...O,...C}:void 0,children:[e("span",{className:`${I} text-(--n-accent)`,children:e(s.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(r,{})})}),e(M,{description:u,size:k,children:g}),h(c)?e("span",{className:`${I} text-(--neba-muted-fg)`,children:c}):null,h(d)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${f[k]}`,children:d}):null]})}export function MenuRadioGroup({value:n,defaultValue:l,onValueChange:t,disabled:a=!1,children:o,className:r}){return e(s.RadioGroup,{value:n,defaultValue:l,onValueChange:e=>t?.(e),disabled:a,className:r,children:o})}export function MenuRadioItem({value:l,endIcon:a,shortcut:r,description:i,color:d,closeOnClick:u=!1,disabled:m=!1,label:p,children:x,className:b,style:g}){const{size:N,density:C}=t.useContext(o),k=d?y(d,0):void 0;return n(s.RadioItem,{value:l,disabled:m,label:p,closeOnClick:u,className:z(N,C,Boolean(d),b),style:k||g?{...k,...g}:void 0,children:[e("span",{className:`${I} text-(--n-accent)`,children:e(s.RadioItemIndicator,{className:"flex items-center justify-center",children:e(c,{})})}),e(M,{description:i,size:N,children:x}),h(a)?e("span",{className:`${I} text-(--neba-muted-fg)`,children:a}):null,h(r)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${f[N]}`,children:r}):null]})}export function MenuGroup({label:l,children:a,className:r}){const{size:i,density:c}=t.useContext(o);return n(s.Group,{className:r,children:[h(l)?e(s.GroupLabel,{className:[v[c][i],f[i],"font-semibold tracking-wide text-(--neba-muted-fg) uppercase"].join(" "),children:l}):null,a]})}export function MenuSeparator({className:n,...l}){return e(s.Separator,{className:m("-mx-1 my-1 h-px bg-(--n-line)",n??""),...l})}export function MenuSubmenu({label:l,startIcon:a,disabled:r=!1,side:c="right",sideOffset:d=4,children:p,className:x,style:f}){const b=t.useContext(o),{size:N,density:C,color:v}=b;return n(s.SubmenuRoot,{children:[n(s.SubmenuTrigger,{disabled:r,className:z(N,C,!1),children:[h(a)?e("span",{className:`${I} text-(--neba-muted-fg)`,children:a}):null,e("span",{className:"min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:`${I} text-(--neba-muted-fg) -rotate-90`,children:e(i,{})})]}),e(s.Portal,{children:e(s.Positioner,{className:"neba-portal z-50 [outline:none]",side:c,sideOffset:d,align:"start",children:e(s.Popup,{className:m(k,g[N],u[N],x??""),style:{...y(v,3),...f},children:p})})})]})}export function Menu({size:l="md",color:a="primary",density:r="default",trigger:i,open:c,defaultOpen:d,onOpenChange:p,side:h="bottom",align:x="start",sideOffset:f=6,modal:b,openOnHover:N=!1,loopFocus:C=!0,disabled:v=!1,className:O,style:z,children:I}){const M=t.useMemo(()=>({size:l,color:a,density:r}),[l,a,r]);return e(o.Provider,{value:M,children:n(s.Root,{open:c,defaultOpen:d,onOpenChange:e=>p?.(e),modal:b,loopFocus:C,disabled:v,children:[i?e(s.Trigger,{render:i,openOnHover:N,disabled:v}):null,e(s.Portal,{children:e(s.Positioner,{className:"neba-portal z-50 [outline:none]",side:h,align:x,sideOffset:f,children:e(s.Popup,{className:m(k,g[l],u[l],O??""),style:{...y(a,3),...z},children:I})})})]})})}export function ContextMenu({size:l="md",color:s="primary",density:r="default",content:i,children:c,open:d,defaultOpen:p,onOpenChange:h,loopFocus:x=!0,disabled:f=!1,className:b,style:N}){const C=t.useMemo(()=>({size:l,color:s,density:r}),[l,s,r]);return e(o.Provider,{value:C,children:n(a.Root,{open:d,defaultOpen:p,onOpenChange:e=>h?.(e),loopFocus:x,disabled:f,children:[e(a.Trigger,{children:c}),e(a.Portal,{children:e(a.Positioner,{className:"neba-portal z-50 [outline:none]",children:e(a.Popup,{className:m(k,g[l],u[l],b??""),style:{...y(s,3),...N},children:i})})})]})})}
1
+ "use client";import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{glowClasses as a,spotlightSlot as s,trackPointer as o}from"../../internal/glow.js";import{Menu as r}from"@base-ui/react/menu";import{useDirection as i}from"@base-ui/react/direction-provider";import{ContextMenu as c}from"@base-ui/react/context-menu";import{MenuContext as d}from"../../internal/menu.js";import{CheckIcon as u,ChevronIcon as m,DotIcon as p}from"../../internal/icons.js";import{safeHref as h,safeRel as f}from"../../internal/link.js";import{controlTextLeadingClasses as x,cx as b,gapClasses as g,hasContent as y,iconClasses as N,metaTextClasses as v,popupFadeClasses as C,radiusClasses as k,surfaceClasses as z,surfaceSlots as O,transitionClasses as M}from"../../internal/styles.js";import{useStyleDefaults as w}from"../../internal/defaults.js";const I=[z,"max-h-[min(24rem,var(--available-height))] min-w-40 overflow-y-auto overscroll-contain","border bg-(--n-panel-press) p-1","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]",C].join(" "),P={default:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-2",xl:"px-3.5 py-2.5"},compact:{xs:"px-1 py-0.5",sm:"px-1.5 py-0.5",md:"px-2 py-1",lg:"px-2.5 py-1",xl:"px-3 py-1.5"}},j={xs:k.xs,sm:k.xs,md:k.sm,lg:k.sm,xl:k.md};function $(e,n,t,l,s){return b("relative flex w-full cursor-pointer items-center select-none",l?a:"",t?"text-(--n-on-tint)":"text-(--neba-fg)",P[n][e],j[e],g[e],x[e],M,N,"data-[highlighted]:bg-(--n-soft-hover)","data-[popup-open]:bg-(--n-soft)","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]",s??"")}const R="flex h-[1lh] w-[1.2em] shrink-0 items-center justify-center";function RowBody({children:t,description:l,size:a}){return y(l)?n("span",{className:"flex min-w-0 flex-1 flex-col text-start",children:[e("span",{className:"truncate",children:t}),e("span",{className:`truncate text-(--neba-muted-fg) ${v[a]}`,children:l})]}):e("span",{className:"min-w-0 flex-1 truncate text-start",children:t})}export function MenuItem({onClick:a,href:i,target:c,rel:u,startIcon:m,endIcon:p,shortcut:x,description:b,color:g,closeOnClick:N=!0,disabled:C=!1,label:k,children:z,className:M,style:w}){const I=l.useContext(d),{size:P,density:j}=I,B=n(t,{children:[y(m)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:m}):null,e(RowBody,{description:b,size:P,children:z}),y(p)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:p}):null,y(x)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${v[P]}`,children:x}):null]}),F={...g?O(g,0):void 0,...s,...w},G=h(i);return void 0===G||C?e(r.Item,{disabled:C,label:k,closeOnClick:N,onClick:a,className:$(P,j,Boolean(g),!C,M),style:F,onPointerMove:o(void 0,!C),children:B}):e(r.LinkItem,{href:G,target:c,rel:f(c,u),label:k,closeOnClick:N,onClick:a,className:$(P,j,Boolean(g),!C,M),style:F,onPointerMove:o(void 0,!0),children:B})}export function MenuCheckboxItem({checked:t,defaultChecked:a,onCheckedChange:i,endIcon:c,shortcut:m,description:p,color:h,closeOnClick:f=!1,disabled:x=!1,label:b,children:g,className:N,style:C}){const{size:k,density:z}=l.useContext(d),M=h?O(h,0):void 0;return n(r.CheckboxItem,{checked:t,defaultChecked:a,onCheckedChange:e=>i?.(e),disabled:x,label:b,closeOnClick:f,className:$(k,z,Boolean(h),!x,N),style:{...M,...s,...C},onPointerMove:o(void 0,!x),children:[e("span",{className:`${R} text-(--n-accent)`,children:e(r.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(u,{})})}),e(RowBody,{description:p,size:k,children:g}),y(c)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:c}):null,y(m)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${v[k]}`,children:m}):null]})}export function MenuRadioGroup({value:n,defaultValue:t,onValueChange:l,disabled:a=!1,children:s,className:o}){return e(r.RadioGroup,{value:n,defaultValue:t,onValueChange:e=>l?.(e),disabled:a,className:o,children:s})}export function MenuRadioItem({value:t,endIcon:a,shortcut:i,description:c,color:u,closeOnClick:m=!1,disabled:h=!1,label:f,children:x,className:b,style:g}){const{size:N,density:C}=l.useContext(d),k=u?O(u,0):void 0;return n(r.RadioItem,{value:t,disabled:h,label:f,closeOnClick:m,className:$(N,C,Boolean(u),!h,b),style:{...k,...s,...g},onPointerMove:o(void 0,!h),children:[e("span",{className:`${R} text-(--n-accent)`,children:e(r.RadioItemIndicator,{className:"flex items-center justify-center",children:e(p,{})})}),e(RowBody,{description:c,size:N,children:x}),y(a)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:a}):null,y(i)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${v[N]}`,children:i}):null]})}export function MenuGroup({label:t,children:a,className:s}){const{size:o,density:i}=l.useContext(d);return n(r.Group,{className:s,children:[y(t)?e(r.GroupLabel,{className:[P[i][o],v[o],"font-semibold tracking-wide text-(--neba-muted-fg) uppercase"].join(" "),children:t}):null,a]})}export function MenuSeparator({className:n,...t}){return e(r.Separator,{className:b("-mx-1 my-1 h-px bg-(--n-line)",n??""),...t})}export function MenuSubmenu({label:t,startIcon:a,disabled:c=!1,side:u,sideOffset:p=4,children:h,className:f,style:g}){const N=l.useContext(d),{size:v,density:C,color:z}=N,M=i();return n(r.SubmenuRoot,{children:[n(r.SubmenuTrigger,{disabled:c,className:$(v,C,!1,!c),style:s,onPointerMove:o(void 0,!c),children:[y(a)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:a}):null,e("span",{className:"min-w-0 flex-1 truncate text-start",children:t}),e("span",{className:`${R} text-(--neba-muted-fg) ${"rtl"===M?"rotate-90":"-rotate-90"}`,children:e(m,{})})]}),e(r.Portal,{children:e(r.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",side:u??"inline-end",sideOffset:p,align:"start",children:e(r.Popup,{className:b(I,k[v],x[v],f??""),style:{...O(z,3),...g},children:h})})})]})}export function Menu(t){const{size:a="md",color:s="primary",density:o="default",trigger:i,open:c,defaultOpen:u,onOpenChange:m,side:p="bottom",align:h="start",sideOffset:f=6,modal:g,openOnHover:y=!1,loopFocus:N=!0,disabled:v=!1,className:C,style:z,children:M}=w(t,["size","density"]),P=l.useMemo(()=>({size:a,color:s,density:o}),[a,s,o]);return e(d.Provider,{value:P,children:n(r.Root,{open:c,defaultOpen:u,onOpenChange:e=>m?.(e),modal:g,loopFocus:N,disabled:v,children:[i?e(r.Trigger,{render:i,openOnHover:y,disabled:v}):null,e(r.Portal,{children:e(r.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",side:p,align:h,sideOffset:f,children:e(r.Popup,{className:b(I,k[a],x[a],C??""),style:{...O(s,3),...z},children:M})})})]})})}export function ContextMenu(t){const{size:a="md",color:s="primary",density:o="default",content:r,children:i,open:u,defaultOpen:m,onOpenChange:p,loopFocus:h=!0,disabled:f=!1,className:g,style:y}=w(t,["size","density"]),N=l.useMemo(()=>({size:a,color:s,density:o}),[a,s,o]);return e(d.Provider,{value:N,children:n(c.Root,{open:u,defaultOpen:m,onOpenChange:e=>p?.(e),loopFocus:h,disabled:f,children:[e(c.Trigger,{children:i}),e(c.Portal,{children:e(c.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",children:e(c.Popup,{className:b(I,k[a],x[a],g??""),style:{...O(s,3),...y},children:r})})})]})})}
@@ -1 +1 @@
1
- "use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import*as n from"react";import{Menubar as o}from"@base-ui/react/menubar";import{Menu as r}from"../menu/Menu.js";import{MenuContext as s}from"../../internal/menu.js";import{controlTextClasses as i,cx as a,gapClasses as l,hasContent as c,iconClasses as d,paddingXClasses as u,radiusClasses as f,transitionClasses as m}from"../../internal/styles.js";import{useStyleDefaults as p}from"../../internal/defaults.js";const b={xs:"h-4.5",sm:"h-5.5",md:"h-6.5",lg:"h-8",xl:"h-10"},h=["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none","text-(--neba-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",m,d,"hover:bg-(--n-soft)","data-[popup-open]:bg-(--n-soft-hover) data-[popup-open]:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]","disabled:cursor-not-allowed disabled:text-(--neba-disabled-fg) disabled:hover:bg-transparent"].join(" ");export function MenubarMenu({label:o,startIcon:a,disabled:d=!1,children:m}){const{size:p,color:x,density:v}=n.useContext(s);return t(r,{size:p,color:x,density:v,disabled:d,openOnHover:!0,sideOffset:4,trigger:e("button",{type:"button",disabled:d,className:[h,b[p],i[p],l[p],u["default"===v?"compact":v][p],f[p]].join(" "),children:[c(a)?a:null,o]}),children:m})}export const Menubar=/*@__PURE__*/n.forwardRef(function(e,r){const{size:i="md",color:c="primary",density:d="default",orientation:u="horizontal",modal:f=!0,loopFocus:m=!0,disabled:b=!1,className:h,style:x,children:v,...g}=p(e,["size","density"]),y=n.useMemo(()=>({size:i,color:c,density:d}),[i,c,d]);return t(s.Provider,{value:y,children:t(o,{ref:r,orientation:u,modal:f,loopFocus:m,disabled:b,className:a("flex items-center","vertical"===u?"flex-col items-stretch":"flex-row",l[i],h??""),style:{"--n-soft":`var(--neba-${c}-soft)`,"--n-soft-hover":`var(--neba-${c}-soft-hover)`,"--n-accent":`var(--neba-${c}-accent)`,"--n-ring":`var(--neba-${c}-ring)`,...x},...g,children:v})})});
1
+ "use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import*as n from"react";import{useDirection as o}from"@base-ui/react/direction-provider";import{Menubar as r}from"@base-ui/react/menubar";import{Menu as i}from"../menu/Menu.js";import{MenuContext as a}from"../../internal/menu.js";import{controlTextClasses as s,cx as l,gapClasses as c,hasContent as d,iconClasses as u,paddingXClasses as f,radiusClasses as m,transitionClasses as p}from"../../internal/styles.js";import{useStyleDefaults as b}from"../../internal/defaults.js";const h={xs:"h-4.5",sm:"h-5.5",md:"h-6.5",lg:"h-8",xl:"h-10"},v=["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none","text-(--neba-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",p,u,"hover:bg-(--n-soft)","data-[popup-open]:bg-(--n-soft-hover) data-[popup-open]:text-(--n-on-tint)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]","disabled:cursor-not-allowed disabled:text-(--neba-disabled-fg) disabled:hover:bg-transparent"].join(" ");export function MenubarMenu({label:r,startIcon:l,disabled:u=!1,children:p}){const{size:b,color:x,density:g,orientation:y}=n.useContext(a),j=o();return t(i,{size:b,color:x,density:g,disabled:u,side:"vertical"===y?"rtl"===j?"left":"right":void 0,openOnHover:!0,sideOffset:4,trigger:e("button",{type:"button",disabled:u,className:[v,h[b],s[b],c[b],f["default"===g?"compact":g][b],m[b]].join(" "),children:[d(l)?l:null,r]}),children:p})}export const Menubar=/*@__PURE__*/n.forwardRef(function Menubar(e,o){const{size:i="md",color:s="primary",density:d="default",orientation:u="horizontal",modal:f=!0,loopFocus:m=!0,disabled:p=!1,className:h,style:v,children:x,...g}=b(e,["size","density"]),y=n.useMemo(()=>({size:i,color:s,density:d,orientation:u}),[i,s,d,u]);return t(a.Provider,{value:y,children:t(r,{ref:o,orientation:u,modal:f,loopFocus:m,disabled:p,className:l("flex items-center","vertical"===u?"flex-col items-stretch":"flex-row",c[i],h??""),style:{"--n-soft":`var(--neba-${s}-soft)`,"--n-soft-hover":`var(--neba-${s}-soft-hover)`,"--n-accent":`var(--neba-${s}-accent)`,"--n-on-tint":`var(--neba-${s}-on-tint)`,"--n-ring":`var(--neba-${s}-ring)`,...v},...g,children:x})})});
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import { type ProgressThickness } from '../../internal/progress.js';
2
3
  import type { NebaColor, NebaSize, NebaThreshold } from '../../types.js';
3
4
  export interface MeterProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
4
5
  /**
@@ -25,6 +26,12 @@ export interface MeterProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
25
26
  * this matters more than it does on a progress bar.
26
27
  */
27
28
  format?: Intl.NumberFormatOptions;
29
+ /**
30
+ * The language the value is written in, as a BCP 47 tag such as `de-DE`. Left
31
+ * out, it is a provider's `locale`, and then the reader's runtime, which a
32
+ * server and a browser do not always share.
33
+ */
34
+ locale?: string;
28
35
  /**
29
36
  * Where the bar changes colour, smallest `from` first. The family of the last
30
37
  * threshold the value has reached wins; below all of them `color` stands.
@@ -32,6 +39,12 @@ export interface MeterProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
32
39
  thresholds?: readonly NebaThreshold[];
33
40
  /** Thickness of the groove. Nothing else on a bar has a size. @default 'md' */
34
41
  size?: NebaSize;
42
+ /**
43
+ * The groove's thickness in pixels, when the step's own is not the one you
44
+ * want. The same prop a [ProgressLinear](./progress-linear) takes, because
45
+ * the two draw the same groove.
46
+ */
47
+ thickness?: ProgressThickness;
35
48
  /** The family the bar carries before any threshold is reached. @default 'primary' */
36
49
  color?: NebaColor;
37
50
  }
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Meter as l}from"@base-ui/react/meter";import{barThicknessClasses as t,progressFraction as n,progressSlots as s}from"../../internal/progress.js";import{cx as o,metaTextClasses as i,stackGapClasses as m}from"../../internal/styles.js";import{useStyleDefaults as f}from"../../internal/defaults.js";export const Meter=/*@__PURE__*/a.forwardRef(function(a,u){const{value:c,min:d=0,max:b=100,label:h,showValue:p=!1,format:x,thresholds:v,size:j="md",color:g="primary",className:w,style:N,...y}=f(a,["size"]),_=n(c,d,b),k=function(e,r,a){if(!a||0===a.length)return r;let l=r;for(const r of a)e>=r.from&&(l=r.color);return l}(c,g,v),M=void 0!==x;return r(l.Root,{ref:u,value:c,min:d,max:b,format:x,className:o("flex w-full flex-col",m[j],w??""),style:{...s(k),...N},...y,children:[h||p?r("div",{className:["flex items-baseline gap-2",h?"justify-between":"justify-end",i[j]].join(" "),children:[h?e(l.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:h}):null,p?e(l.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>M?e:`${Math.round(100*(_??0))}%`}):null]}):null,e(l.Track,{className:`relative w-full overflow-hidden rounded-full bg-(--n-soft) ${t[j]}`,children:e(l.Indicator,{className:"absolute top-0 rounded-full bg-(--n-fill) [transition:width_var(--neba-duration-fill)_var(--neba-ease),background-color_var(--neba-duration)_var(--neba-ease)]"})})]})});
1
+ "use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Meter as r}from"@base-ui/react/meter";import{barThicknessClasses as t,progressAriaText as s,progressFraction as n,progressSlots as o,thresholdColor as i}from"../../internal/progress.js";import{cx as m,metaTextClasses as u,stackGapClasses as c}from"../../internal/styles.js";import{useStyleDefaults as f}from"../../internal/defaults.js";export const Meter=/*@__PURE__*/l.forwardRef(function Meter(l,d){const{value:b,min:h=0,max:x=100,label:p,showValue:v=!1,format:g,locale:j,thresholds:w,thickness:y,size:N="md",color:k="primary",className:M,style:_,...V}=f(l,["size","locale"]),$=n(b,h,x),z=i(b,k,w),R=void 0!==g;return a(r.Root,{ref:d,value:b,min:h,max:x,format:g,locale:j,getAriaValueText:s($,R),className:m("flex w-full flex-col",c[N],M??""),style:{...o(z),..._},...V,children:[p||v?a("div",{className:["flex items-baseline gap-2",p?"justify-between":"justify-end",u[N]].join(" "),children:[p?e(r.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:p}):null,v?e(r.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>R?e:`${Math.round(100*($??0))}%`}):null]}):null,e(r.Track,{className:`relative w-full overflow-hidden rounded-full bg-(--n-soft) ${t[N]}`,style:void 0===y?void 0:{height:`${y}px`},children:e(r.Indicator,{className:"absolute top-0 rounded-full bg-(--n-fill) [transition:width_var(--neba-duration-fill)_var(--neba-ease),background-color_var(--neba-duration)_var(--neba-ease)]"})})]})});
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import*as r from"react";import{useRender as a}from"@base-ui/react/use-render";import{transitionProps as n}from"../../internal/animate.js";import{MockupCutout as o,defaultNotch as s,elevationFilters as h,finishSlots as d,mockupChrome as l,mockupMetrics as c,resolveOs as u,shellClasses as m}from"../../internal/mockup.js";import{observeResize as p}from"../../internal/observe.js";import{cx as f,surfaceSlots as g}from"../../internal/styles.js";import{useStyleDefaults as b}from"../../internal/defaults.js";const v="undefined"==typeof document?r.useEffect:r.useLayoutEffect;export const Mockup=/*@__PURE__*/r.forwardRef(function(w,y){const{device:x,os:k,hardware:N="monitor",size:R="md",resolution:$,orientation:z="portrait",bezel:j="standard",finish:M="graphite",notch:W,systemUi:H=!0,scroll:B=!1,wallpaper:C,time:E="9:41",width:L,height:P,color:S="primary",elevation:F=0,transition:I,render:T,className:U,style:q,children:A,...D}=b(w,["size"]),G=u(x,k),J=W??s(x,G),K="desktop"!==x&&"landscape"===z,O=c({device:x,size:R,resolution:$,orientation:z,bezel:j,hardware:N}),{screen:Q,frame:V,body:X,stand:Y,base:Z}=O,_=r.useRef(null),[ee,te]=r.useState(null);v(()=>{const e=_.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect();if(t.width<=0||t.height<=0)return;const i=Math.min(t.width/V.width,t.height/V.height);te(e=>null!==e&&Math.abs(e-i)<1e-4?e:i)};return t(),p(e,t)},[V.width,V.height]);const ie=r.useCallback(e=>{_.current=e,"function"==typeof y?y(e):y&&(y.current=e)},[y]),re=H?l({os:G,notch:J,landscape:K,time:E}):{},ae=n(I),ne="none"===j,oe=t("div",{className:"neba-mockup-screen relative flex flex-col overflow-hidden",style:{width:Q.width,height:Q.height,borderRadius:O.screenRadius,background:C??"var(--neba-surface)",boxShadow:ne?void 0:"inset 0 0 0 1px var(--n-shell-shade)"},children:[re.top?.node,t("div",{className:"flex min-h-0 flex-1",children:[re.start?.node,e("div",{className:"min-w-0 flex-1 "+(B?"overflow-auto":"overflow-hidden"),style:{containerType:"size",containerName:"neba-screen"},children:A})]}),re.bottom?.node,e(o,{notch:J,screen:Q,landscape:K})]}),se=f("neba-mockup relative block",ae.className,U??"");return a({render:T,ref:ie,props:{className:se,style:{...g(S,F),...d[M],...ae.style,width:L??(void 0===P?"100%":"auto"),height:P??"auto",aspectRatio:`${V.width} / ${V.height}`,filter:h[F],...q},children:t("div",{className:"absolute top-1/2 left-1/2 flex flex-col items-center",style:{width:V.width,height:V.height,transform:`translate(-50%, -50%) scale(${ee??1})`,visibility:null===ee?"hidden":void 0},children:[e("div",{className:ne?"":m,style:{width:X.width,height:X.height,borderRadius:O.frameRadius,paddingBlock:`${O.bezel.top}px ${O.bezel.bottom}px`,paddingInline:O.bezel.x},children:oe}),Y?t(i,{children:[e("div",{"aria-hidden":"true",style:{width:Y.neckWidth,height:Y.neckHeight,background:"var(--n-shell-shade)",clipPath:"polygon(16% 0, 84% 0, 100% 100%, 0 100%)"}}),e("div",{"aria-hidden":"true",className:m,style:{width:Y.footWidth,height:Y.footHeight,borderRadius:Y.footHeight/2}})]}):null,Z?e("div",{"aria-hidden":"true",className:`relative ${m}`,style:{width:Z.width,height:Z.height,borderRadius:`0 0 ${Math.round(.55*Z.height)}px ${Math.round(.55*Z.height)}px`,clipPath:"polygon(0 0, 100% 0, 98.5% 100%, 1.5% 100%)"},children:e("div",{className:"absolute top-0 left-1/2",style:{width:Z.lipWidth,height:Math.round(.34*Z.height),marginLeft:-Z.lipWidth/2,borderRadius:`0 0 ${Math.round(.2*Z.height)}px ${Math.round(.2*Z.height)}px`,background:"var(--n-shell-shade)"}})}):null]}),...D}})});
1
+ "use client";import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import*as r from"react";import{ScreenContext as n}from"../../internal/screen.js";import{useRender as a}from"@base-ui/react/use-render";import{transitionProps as o}from"../../internal/animate.js";import{MockupCutout as h,defaultNotch as s,elevationFilters as d,finishSlots as l,mockupChrome as c,mockupMetrics as u,resolveOs as m,shellClasses as p}from"../../internal/mockup.js";import{observeResize as f}from"../../internal/observe.js";import{cx as g,surfaceSlots as b}from"../../internal/styles.js";import{useStyleDefaults as v}from"../../internal/defaults.js";const w="undefined"==typeof document?r.useEffect:r.useLayoutEffect;export const Mockup=/*@__PURE__*/r.forwardRef(function Mockup(y,x){const{device:k,os:N,hardware:R="monitor",size:M="md",resolution:$,orientation:j="portrait",bezel:z="standard",finish:W="graphite",notch:H,systemUi:P=!0,scroll:B=!1,wallpaper:C,time:E="9:41",width:L,height:S,color:F="primary",elevation:I=0,transition:T,render:U,className:q,style:A,children:D,...G}=v(y,["size"]),J=m(k,N),K=H??s(k,J),O="desktop"!==k&&"landscape"===j,Q=u({device:k,size:M,resolution:$,orientation:j,bezel:z,hardware:R}),{screen:V,frame:X,body:Y,stand:Z,base:_}=Q,ee=r.useRef(null),[te,ie]=r.useState(null),re="number"==typeof L?"number"==typeof S?Math.min(L/X.width,S/X.height):L/X.width:"number"==typeof S&&void 0===L?S/X.height:null,ne=te??re;w(()=>{const e=ee.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect();if(t.width<=0||t.height<=0)return;const i=Math.min(t.width/X.width,t.height/X.height);ie(e=>null!==e&&Math.abs(e-i)<1e-4?e:i)};return t(),f(e,t)},[X.width,X.height]);const ae=r.useCallback(e=>{ee.current=e,"function"==typeof x?x(e):x&&(x.current=e)},[x]),oe=P?c({os:J,notch:K,landscape:O,time:E}):{},he=o(T),se="none"===z,de=t("div",{className:"neba-mockup-screen relative flex flex-col overflow-hidden",style:{width:V.width,height:V.height,borderRadius:Q.screenRadius,background:C??"var(--neba-surface)",boxShadow:se?void 0:"inset 0 0 0 1px var(--n-shell-shade)"},children:[oe.top?.node,t("div",{className:"flex min-h-0 flex-1",children:[oe.start?.node,e("div",{className:"min-w-0 flex-1 "+(B?"overflow-auto":"overflow-hidden"),style:{containerType:"size",containerName:"neba-screen"},children:e(n.Provider,{value:!0,children:D})})]}),oe.bottom?.node,e(h,{notch:K,screen:V,landscape:O})]}),le=g("neba-mockup relative block overflow-hidden",he.className,q??"");return a({render:U,ref:ae,props:{className:le,style:{...b(F,I),...l[W],...he.style,width:L??(void 0===S?"100%":"auto"),height:S??"auto",aspectRatio:`${X.width} / ${X.height}`,filter:d[I],...A},children:t("div",{className:"absolute top-1/2 left-1/2 flex flex-col items-center",style:{width:X.width,height:X.height,transform:`translate(-50%, -50%) scale(${ne??1})`,visibility:null===ne?"hidden":void 0},children:[e("div",{className:se?"":p,style:{width:Y.width,height:Y.height,borderRadius:Q.frameRadius,paddingBlock:`${Q.bezel.top}px ${Q.bezel.bottom}px`,paddingInline:Q.bezel.x},children:de}),Z?t(i,{children:[e("div",{"aria-hidden":"true",style:{width:Z.neckWidth,height:Z.neckHeight,background:"var(--n-shell-shade)",clipPath:"polygon(16% 0, 84% 0, 100% 100%, 0 100%)"}}),e("div",{"aria-hidden":"true",className:p,style:{width:Z.footWidth,height:Z.footHeight,borderRadius:Z.footHeight/2}})]}):null,_?e("div",{"aria-hidden":"true",className:`relative ${p}`,style:{width:_.width,height:_.height,borderRadius:`0 0 ${Math.round(.55*_.height)}px ${Math.round(.55*_.height)}px`,clipPath:"polygon(0 0, 100% 0, 98.5% 100%, 1.5% 100%)"},children:e("div",{className:"absolute top-0 left-1/2",style:{width:_.lipWidth,height:Math.round(.34*_.height),marginLeft:-_.lipWidth/2,borderRadius:`0 0 ${Math.round(.2*_.height)}px ${Math.round(.2*_.height)}px`,background:"var(--n-shell-shade)"}})}):null]}),...G}})});
@@ -51,6 +51,15 @@ export interface NavigationMenuItemProps {
51
51
  disabled?: boolean;
52
52
  /** How many columns the panel lays its links out in. @default 1 */
53
53
  columns?: number;
54
+ /**
55
+ * Renders the panel's links, hidden, before the panel is ever opened.
56
+ *
57
+ * On by default, because a link that is only created when a pointer rests on
58
+ * the row is a link a server render does not contain and a crawler never
59
+ * follows. Turn it off for a panel whose contents are expensive to build.
60
+ * @default true
61
+ */
62
+ keepMounted?: boolean;
54
63
  /** The panel's contents — usually `NavigationMenuLink`s. */
55
64
  children?: React.ReactNode;
56
65
  }
@@ -81,7 +90,7 @@ export declare const NavigationMenuLink: React.ForwardRefExoticComponent<Navigat
81
90
  * is a link, and the difference is not cosmetic — the second one is announced as
82
91
  * a destination and the first as something that expands.
83
92
  */
84
- export declare function NavigationMenuItem({ label, href, target, rel, startIcon, value, disabled, columns, children }: NavigationMenuItemProps): React.JSX.Element;
93
+ export declare function NavigationMenuItem({ label, href: hrefProp, target, rel, startIcon, value, disabled, columns, keepMounted, children }: NavigationMenuItemProps): React.JSX.Element;
85
94
  /**
86
95
  * A site's navigation: a row of destinations, some of which open a panel of
87
96
  * more of them.
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as n,Fragment as a}from"react/jsx-runtime";import*as t from"react";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{ChevronIcon as r}from"../../internal/icons.js";import{safeRel as o}from"../../internal/link.js";import{controlHeightClasses as s,controlTextClasses as l,controlTextLeadingClasses as d,cx as c,gapClasses as u,hasContent as f,iconClasses as p,metaTextClasses as m,paddingXClasses as h,popupFadeStateClasses as b,radiusClasses as v,surfaceClasses as g,surfaceSlots as x,transitionClasses as N}from"../../internal/styles.js";const y=/*@__PURE__*/t.createContext({size:"md",density:"default"}),w=["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none no-underline","text-(--neba-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",N,p,"hover:bg-(--n-soft)","data-[popup-open]:bg-(--n-soft-hover) data-[popup-open]:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","data-[disabled]:hover:bg-transparent"].join(" "),j=[g,"relative border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none] overflow-hidden","[transition:opacity_var(--neba-duration)_var(--neba-ease),width_var(--neba-duration)_var(--neba-ease),height_var(--neba-duration)_var(--neba-ease)]",b].join(" "),_=["flex min-w-0 cursor-pointer items-start no-underline","text-(--neba-fg) bg-transparent",N,p,"hover:bg-(--n-soft)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]"].join(" "),k={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const NavigationMenuLink=/*@__PURE__*/t.forwardRef(function({href:a,title:r,description:o,startIcon:s,className:l,children:p,...b},g){const{size:x,density:N}=t.useContext(y);return n(i.Link,{ref:g,href:a,className:c(_,v[x],u[x],h[N??"default"][x],"py-2",l??""),...b,children:[f(s)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:s}):null,n("span",{className:"flex min-w-0 flex-col gap-0.5",children:[e("span",{className:`font-medium ${d[x]}`,children:r}),f(o)?e("span",{className:`text-(--neba-muted-fg) ${m[x]}`,children:o}):null,p]})]})});export function NavigationMenuItem({label:d,href:c,target:p,rel:m,startIcon:b,value:g,disabled:x=!1,columns:N=1,children:j}){const{size:_,density:z}=t.useContext(y),C=void 0!==c&&!f(j),$=[w,s[_],l[_],u[_],h[z??"default"][_],v[_]].join(" ");return e(i.Item,{value:g,children:C?n(i.Link,{href:c,target:p,rel:o(p,m),className:$,children:[f(b)?b:null,d]}):n(a,{children:[n(i.Trigger,{disabled:x,className:$,children:[f(b)?b:null,d,e(i.Icon,{className:"flex items-center [transition:rotate_var(--neba-duration)_var(--neba-ease)] data-[popup-open]:rotate-180",children:e(r,{})})]}),e(i.Content,{className:`grid gap-1 ${k[_]}`,style:N>1?{gridTemplateColumns:`repeat(${N}, minmax(0, 1fr))`}:void 0,children:j})]})})}export const NavigationMenu=/*@__PURE__*/t.forwardRef(function({size:a="md",color:r="primary",density:o="default",orientation:s="horizontal",value:l,defaultValue:d,onValueChange:c,delay:f,closeDelay:p,sideOffset:m=8,className:h,style:b,children:g,...N},w){const _=t.useMemo(()=>({size:a,density:o}),[a,o]);return e(y.Provider,{value:_,children:n(i.Root,{ref:w,orientation:s,value:l,defaultValue:d,onValueChange:e=>c?.(e),delay:f,closeDelay:p,className:h,style:{...x(r,3),"--n-soft-hover":`var(--neba-${r}-soft-hover)`,...b},...N,children:[e(i.List,{className:["flex items-center","vertical"===s?"flex-col items-stretch":"flex-row",u[a]].join(" "),children:g}),e(i.Portal,{children:e(i.Positioner,{className:"neba-portal z-50 [outline:none]",sideOffset:m,collisionPadding:12,children:e(i.Popup,{className:`${j} ${v[a]}`,children:e(i.Viewport,{})})})})]})})});
1
+ "use client";import{jsx as e,jsxs as n,Fragment as a}from"react/jsx-runtime";import*as t from"react";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{ChevronIcon as r}from"../../internal/icons.js";import{safeHref as s,safeRel as o}from"../../internal/link.js";import{controlHeightClasses as l,controlTextClasses as d,controlTextLeadingClasses as c,cx as u,gapClasses as p,hasContent as f,iconClasses as m,metaTextClasses as h,paddingXClasses as b,popupFadeStateClasses as g,radiusClasses as v,surfaceClasses as x,surfaceSlots as N,transitionClasses as y}from"../../internal/styles.js";import{useStyleDefaults as w}from"../../internal/defaults.js";const j=/*@__PURE__*/t.createContext({size:"md",density:"default"}),_=["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none no-underline","text-(--neba-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",y,m,"hover:bg-(--n-soft)","data-[popup-open]:bg-(--n-soft-hover) data-[popup-open]:text-(--n-on-tint)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","data-[disabled]:hover:bg-transparent"].join(" "),k=[x,"relative border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none] overflow-hidden","[transition:opacity_var(--neba-duration)_var(--neba-ease),width_var(--neba-duration)_var(--neba-ease),height_var(--neba-duration)_var(--neba-ease)]",g].join(" "),z=["flex min-w-0 cursor-pointer items-start no-underline","text-(--neba-fg) bg-transparent",y,m,"hover:bg-(--n-soft)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]"].join(" "),M={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const NavigationMenuLink=/*@__PURE__*/t.forwardRef(function NavigationMenuLink({href:a,title:r,description:l,startIcon:d,target:m,rel:g,className:x,children:N,...y},w){const{size:_,density:k}=t.useContext(j);return n(i.Link,{ref:w,href:s(a),target:m,rel:o(m,g),className:u(z,v[_],p[_],b[k??"default"][_],"py-2",x??""),...y,children:[f(d)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:d}):null,n("span",{className:"flex min-w-0 flex-col gap-0.5",children:[e("span",{className:`font-medium ${c[_]}`,children:r}),f(l)?e("span",{className:`text-(--neba-muted-fg) ${h[_]}`,children:l}):null,N]})]})});export function NavigationMenuItem({label:c,href:u,target:m,rel:h,startIcon:g,value:x,disabled:N=!1,columns:y=1,keepMounted:w=!0,children:k}){const{size:z,density:C}=t.useContext(j),$=s(u),I=void 0!==$&&!f(k),L=[_,l[z],d[z],p[z],b[C??"default"][z],v[z]].join(" ");return e(i.Item,{value:x,children:I&&N?n("span",{"aria-disabled":"true","data-disabled":"",className:L,children:[f(g)?g:null,c]}):I?n(i.Link,{href:$,target:m,rel:o(m,h),className:L,children:[f(g)?g:null,c]}):n(a,{children:[n(i.Trigger,{disabled:N,className:L,children:[f(g)?g:null,c,e(i.Icon,{className:"flex items-center [transition:rotate_var(--neba-duration)_var(--neba-ease)] data-[popup-open]:rotate-180",children:e(r,{})})]}),e(i.Content,{keepMounted:w,className:`grid gap-1 [&[hidden]]:hidden ${M[z]}`,style:y>1?{gridTemplateColumns:`repeat(${y}, minmax(0, 1fr))`}:void 0,children:k})]})})}export const NavigationMenu=/*@__PURE__*/t.forwardRef(function NavigationMenu(a,r){const{size:s="md",color:o="primary",density:l="default",orientation:d="horizontal",value:c,defaultValue:u,onValueChange:f,delay:m,closeDelay:h,sideOffset:b=8,className:g,style:x,children:y,..._}=w(a,["size","density"]),z=t.useMemo(()=>({size:s,density:l}),[s,l]),M=N(o,3);return e(j.Provider,{value:z,children:n(i.Root,{ref:r,orientation:d,value:c,defaultValue:u,onValueChange:e=>f?.(e),delay:m,closeDelay:h,className:g,style:{...M,...x},..._,children:[e(i.List,{className:["flex items-center","vertical"===d?"flex-col items-stretch":"flex-row",p[s]].join(" "),children:y}),e(i.Portal,{children:e(i.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",side:"vertical"===d?"inline-end":"bottom",sideOffset:b,collisionPadding:12,children:e(i.Popup,{className:`${k} ${v[s]}`,style:M,children:e(i.Viewport,{})})})})]})})});
@@ -54,12 +54,26 @@ export interface NumberFieldProps extends NebaStyleProps, Omit<React.ComponentPr
54
54
  /** Whether stepping snaps to multiples of the step. @default false */
55
55
  snapOnStep?: boolean;
56
56
  /**
57
- * Whether the wheel changes the value while the field is focused and hovered.
58
- * Off by default: a page that scrolls under the pointer and a field that
59
- * changes under it are the same gesture, and only one of them was meant.
60
- * @default false
57
+ * Whether the wheel changes the value while the field is focused and the
58
+ * pointer is over the number.
59
+ *
60
+ * On, because both halves of that sentence have to be true before anything
61
+ * happens: a reader who has not put the caret in the field scrolls the page
62
+ * over it as they would over any other box, and one who has is working the
63
+ * field and expects the wheel to reach it — which is what a browser's own
64
+ * number input does. The gesture is taken from the page only for as long as
65
+ * the field holds the focus and the pointer is on it.
66
+ *
67
+ * Off is for a field inside something that scrolls under a pointer that has
68
+ * to stay put — a long form in a Drawer, a cell in a table body.
69
+ *
70
+ * The same prop [ScrollZone](../layout/scroll-zone) and
71
+ * [Tabs](../surfaces/tabs) have, and deliberately the same word: "does this
72
+ * answer the wheel" is one question, and a library that spells it three ways
73
+ * is a library you have to look up three times.
74
+ * @default true
61
75
  */
62
- allowWheelScrub?: boolean;
76
+ wheel?: boolean;
63
77
  /**
64
78
  * How the number is written — currency, percent, decimal places. Passed
65
79
  * straight to `Intl.NumberFormat`, so the field shows `$1,240.00` and still
@@ -139,4 +153,4 @@ export interface NumberFieldProps extends NebaStyleProps, Omit<React.ComponentPr
139
153
  * clamping, the press-and-hold repeat on the steppers, and the hidden input
140
154
  * that submits with a form.
141
155
  */
142
- export declare function NumberField(rawProps: NumberFieldProps): React.JSX.Element;
156
+ export declare const NumberField: React.ForwardRefExoticComponent<NumberFieldProps & React.RefAttributes<HTMLInputElement>>;
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import{NumberField as t}from"@base-ui/react/number-field";import{Field as a}from"@base-ui/react/field";import{numberMessages as l,useMessages as r}from"../../internal/i18n.js";import{MinusIcon as s,PlusIcon as i}from"../../internal/icons.js";import{keyHandler as o}from"../../internal/keys.js";import{controlHeightClasses as c,controlTextLeadingClasses as d,cx as m,disabledClasses as u,fieldReadOnlyClasses as p,fieldRestClasses as f,focusWithinRingClasses as b,gapClasses as h,hasContent as x,iconClasses as g,metaTextClasses as v,paddingXClasses as N,radiusClasses as j,stackGapClasses as y,surfaceSlots as w,transitionClasses as k}from"../../internal/styles.js";import{useStyleDefaults as S}from"../../internal/defaults.js";const _=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",k,"focus-within:[transition-duration:0ms]",b,g].join(" "),V=["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","active:[transition-duration:0ms]","hover:bg-(--n-soft) hover:text-(--n-accent)","active:bg-(--n-soft-press)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:bg-transparent disabled:text-(--neba-disabled-fg)"].join(" ");export function NumberField(b){const{variant:g="outline",size:k="md",color:z="primary",density:C="default",elevation:I=0,value:O,defaultValue:D,onValueChange:L,onValueCommitted:W,min:q,max:F,step:R,largeStep:B,smallStep:E,snapOnStep:G,allowWheelScrub:K=!1,format:$,locale:A,steppers:H="end",incrementLabel:J,decrementLabel:M,label:P,description:Q,error:T,invalid:U,startIcon:X,endIcon:Y,fullWidth:Z=!1,disabled:ee=!1,readOnly:ne=!1,required:te=!1,name:ae,placeholder:le,id:re,className:se,classNames:ie,shortcuts:oe,style:ce,...de}=S(b,["size","density","variant","locale"]),me=r(l,"string"==typeof A?A:void 0),ue=x(T),pe=U??ue,fe=pe?"danger":z,be=N[C][k],he={end:`${be} pe-1`,split:"px-1",none:be},xe=e(t.Decrement,{"aria-label":M??me.decrease,className:m(V,ie?.stepper),children:e(s,{})}),ge=e(t.Increment,{"aria-label":J??me.increase,className:m(V,ie?.stepper),children:e(i,{})}),ve="none"!==H&&!ne;return n(a.Root,{disabled:ee,invalid:pe,className:m("flex-col align-top",y[k],Z?"flex w-full":"inline-flex",se??""),style:{...w(fe,I),...ce},...de,children:[P?e(a.Label,{className:m(v[k],"font-medium",ee?"text-(--neba-disabled-fg)":"text-(--neba-fg)",ie?.label),children:P}):null,e(t.Root,{id:re,name:ae,className:"contents",value:O,defaultValue:D,onValueChange:e=>L?.(e),onValueCommitted:e=>W?.(e),min:q,max:F,step:R,largeStep:B,smallStep:E,snapOnStep:G,allowWheelScrub:K,format:$,locale:A,disabled:ee,readOnly:ne,required:te,children:n(t.Group,{className:m(_,c[k],d[k],j[k],h[k],ve?he[H]:be,ee?u[g]:ne?p[g]:f[g],ie?.shell),children:[ve&&"split"===H?xe:null,X?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:X}):null,e(t.Input,{onKeyDown:o(oe),placeholder:le,className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===H&&ve?"text-center":"","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",ie?.control].filter(Boolean).join(" ")}),Y?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:Y}):null,ve&&"end"===H?n("span",{className:"flex shrink-0 items-center gap-0.5",children:[xe,ge]}):null,ve&&"split"===H?ge:null]})}),Q?e(a.Description,{className:m(v[k],"text-(--neba-muted-fg)",ie?.description),children:Q}):null,e(a.Error,ue?{match:!0,className:m(v[k],"text-(--n-accent)",ie?.error),children:T}:{className:m(v[k],"text-(--n-accent)",ie?.error)})]})}
1
+ "use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{NumberField as n}from"@base-ui/react/number-field";import{Field as l}from"@base-ui/react/field";import{numberMessages as r,useMessages as i}from"../../internal/i18n.js";import{MinusIcon as s,PlusIcon as o}from"../../internal/icons.js";import{keyHandler as c}from"../../internal/keys.js";import{controlTextLeadingClasses as d,cx as m,disabledClasses as u,fieldFocusTransitionClasses as p,fieldHeightClasses as f,fieldReadOnlyClasses as b,fieldRestClasses as h,fieldRingClasses as g,gapClasses as x,hasContent as v,iconClasses as N,metaTextClasses as y,paddingXClasses as j,radiusClasses as w,stackGapClasses as k,surfaceSlots as _,transitionClasses as S}from"../../internal/styles.js";import{useStyleDefaults as V}from"../../internal/defaults.js";import{spotlightSlot as z,glowClasses as C,trackPointer as I}from"../../internal/glow.js";import{useFieldsetDisabled as O}from"../../internal/fieldset.js";const D=["group relative flex w-full items-center","[-webkit-tap-highlight-color:transparent]",S,p,g,N].join(" "),F=["relative inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","neba-hit-row","rounded-(--neba-radius-xs) text-(--neba-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","active:[transition-duration:0ms]","hover:bg-(--n-soft) hover:text-(--n-on-tint)","active:bg-(--n-soft-press)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:bg-transparent disabled:text-(--neba-disabled-fg)"].join(" ");export const NumberField=/*@__PURE__*/a.forwardRef(function NumberField(a,p){const{variant:g="outline",size:N="md",color:S="primary",density:L="default",elevation:R=0,value:$,defaultValue:q,onValueChange:W,onValueCommitted:B,min:E,max:G,step:K,largeStep:M,smallStep:P,snapOnStep:A,wheel:H=!0,format:J,locale:Q,steppers:T="end",incrementLabel:U,decrementLabel:X,label:Y,description:Z,error:ee,invalid:te,startIcon:ae,endIcon:ne,fullWidth:le=!1,disabled:re,readOnly:ie=!1,required:se=!1,name:oe,placeholder:ce,id:de,className:me,classNames:ue,shortcuts:pe,style:fe,"aria-label":be,"aria-labelledby":he,...ge}=V(a,["size","density","variant","locale"]),xe=O(re),ve=!xe&&!ie,Ne=i(r,"string"==typeof Q?Q:void 0),ye=v(ee),je=te??ye,we=je?"danger":S,ke=j[L][N],_e={end:`${ke} pe-1`,split:"px-1",none:ke},Se=e(n.Decrement,{"aria-label":X??Ne.decrease,className:m(F,ue?.stepper),children:e(s,{})}),Ve=e(n.Increment,{"aria-label":U??Ne.increase,className:m(F,ue?.stepper),children:e(o,{})}),ze="none"!==T&&!ie;return t(l.Root,{disabled:xe,invalid:je,className:m("flex-col align-top",k[N],le?"flex w-full":"inline-flex",me??""),style:{..._(we,R),...ve?z:void 0,...fe},...ge,children:[Y?e(l.Label,{className:m(y[N],"font-medium",xe?"text-(--neba-disabled-fg)":"text-(--neba-fg)",ue?.label),children:Y}):null,e(n.Root,{id:de,name:oe,className:"contents",value:$,defaultValue:q,onValueChange:e=>W?.(e),onValueCommitted:e=>B?.(e),min:E,max:G,step:K,largeStep:M,smallStep:P,snapOnStep:A,allowWheelScrub:H,format:J,locale:Q,disabled:xe,readOnly:ie,required:se,children:t(n.Group,{onPointerMove:I(void 0,ve),className:m(D,f[N],d[N],w[N],x[N],ze?_e[T]:ke,xe?u[g]:ie?b[g]:`${h[g]} ${C}`,xe?"":"cursor-text",ue?.shell),children:[ze&&"split"===T?Se:null,ae?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:ae}):null,e(n.Input,{ref:p,"aria-label":be,"aria-labelledby":he,onKeyDown:c(pe),placeholder:ce,className:["neba-input min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===T&&ze?"text-center":"","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",ue?.control].filter(Boolean).join(" ")}),ne?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:ne}):null,ze&&"end"===T?t("span",{className:"flex shrink-0 items-center gap-0.5",style:{"--n-hit-gap":"0.125rem"},children:[Se,Ve]}):null,ze&&"split"===T?Ve:null]})}),Z?e(l.Description,{className:m(y[N],"text-(--neba-muted-fg)",ue?.description),children:Z}):null,e(l.Error,ye?{match:!0,className:m(y[N],"text-(--n-accent)",ue?.error),children:ee}:{className:m(y[N],"text-(--n-accent)",ue?.error)})]})});
@@ -67,6 +67,13 @@ export interface OtpFieldProps extends NebaStyleProps, Omit<React.ComponentProps
67
67
  readOnly?: boolean;
68
68
  /** Puts the caret in the first slot on mount. @default false */
69
69
  autoFocus?: boolean;
70
+ /**
71
+ * Which language the slots are named in — a BCP 47 tag. The first slot takes
72
+ * `label`; every other is "Character 2 of 6" in the `locale`'s words.
73
+ */
74
+ locale?: string;
75
+ /** Names a slot after the first, by its position. Overrides the `locale`'s words. */
76
+ slotLabel?: (index: number, total: number) => string;
70
77
  }
71
78
  /**
72
79
  * A row of one-character slots: a PIN, a texted verification code, an invite
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Field as n}from"@base-ui/react/field";import{OTPField as l}from"@base-ui/react/otp-field";import{cx as r,disabledClasses as i,fieldReadOnlyClasses as s,fieldRestClasses as o,metaTextClasses as m,stackGapClasses as d,surfaceSlots as u,transitionClasses as c}from"../../internal/styles.js";import{useStyleDefaults as p}from"../../internal/defaults.js";const f={xs:"h-7 w-6",sm:"h-8 w-7",md:"h-10 w-8",lg:"h-12 w-10",xl:"h-14 w-12"},x={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},g={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},h={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},b={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const OtpField=/*@__PURE__*/t.forwardRef(function(y,v){const{variant:N="outline",size:V="md",color:w="primary",density:j="default",elevation:C=0,length:F=6,charset:M="numeric",mask:z=!1,groupSize:I,separator:O="–",value:R,defaultValue:S,onValueChange:k,onComplete:q,onValueInvalid:_,autoSubmit:A=!1,label:D,description:E,error:L,invalid:T,name:B,required:G=!1,disabled:H=!1,readOnly:J=!1,autoFocus:K=!1,className:P,style:Q,...U}=p(y,["size","density","variant"]),W=Math.min(12,Math.max(2,Math.round(F))),X=null!=L&&!1!==L&&""!==L,Y=T??X,Z=Y?"danger":w,$=r("text-center font-medium [font-family:inherit]",f[V],g[V],x[V],c,"caret-(--n-accent) selection:bg-(--n-soft-press)","focus:[outline:2px_solid_var(--n-ring)] focus:outline-offset-1","focus:[transition-duration:0ms]",H?i[N]:J?s[N]:o[N]),ee=I&&I>0?Math.round(I):0;return a(n.Root,{disabled:H,invalid:Y,className:r("inline-flex flex-col align-top",d[V],P),style:{...u(Z,C),...Q},children:[D?e(n.Label,{className:r(m[V],"font-medium",H?"text-(--neba-disabled-fg)":"text-(--neba-fg)"),children:D}):null,e(l.Root,{ref:v,length:W,validationType:b[M],mask:z,name:B,required:G,disabled:H,readOnly:J,autoSubmit:A,value:R,defaultValue:S,onValueChange:e=>k?.(e),onValueComplete:e=>q?.(e),onValueInvalid:e=>_?.(e),className:r("flex items-center",h[j][V]),...U,children:Array.from({length:W},(n,i)=>a(t.Fragment,{children:[ee>0&&i>0&&i%ee===0?e("span",{"aria-hidden":"true",className:r("select-none px-0.5 text-(--neba-muted-fg)",g[V]),children:O}):null,e(l.Input,{className:$,autoFocus:K&&0===i})]},i))}),E?e(n.Description,{className:r(m[V],"text-(--neba-muted-fg)"),children:E}):null,e(n.Error,X?{match:!0,className:r(m[V],"text-(--n-accent)"),children:L}:{className:r(m[V],"text-(--n-accent)")})]})});
1
+ "use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Field as n}from"@base-ui/react/field";import{OTPField as l}from"@base-ui/react/otp-field";import{fillMessage as r,otpMessages as i,useMessages as o}from"../../internal/i18n.js";import{cx as s,disabledClasses as m,fieldReadOnlyClasses as d,fieldRestClasses as u,metaTextClasses as c,ringRestClasses as p,stackGapClasses as f,surfaceSlots as x,transitionClasses as g}from"../../internal/styles.js";import{useStyleDefaults as h}from"../../internal/defaults.js";import{useFieldsetDisabled as b}from"../../internal/fieldset.js";const v={xs:"h-7 w-6",sm:"h-8 w-7",md:"h-10 w-8",lg:"h-12 w-10",xl:"h-14 w-12"},y={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},N={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},j={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},V={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const OtpField=/*@__PURE__*/t.forwardRef(function OtpField(w,F){const{variant:S="outline",size:C="md",color:M="primary",density:O="default",elevation:z=0,length:I=6,charset:R="numeric",mask:k=!1,groupSize:q,separator:L="–",value:_,defaultValue:A,onValueChange:D,onComplete:E,onValueInvalid:T,autoSubmit:$=!1,label:B,description:G,error:H,invalid:J,name:K,required:P=!1,disabled:Q,readOnly:U=!1,autoFocus:W=!1,locale:X,slotLabel:Y,className:Z,style:ee,...ae}=h(w,["size","density","variant","locale"]),te=b(Q),ne=o(i,X),le=Y??((e,a)=>r(ne.slot,{index:String(e),total:String(a)})),re=Math.min(12,Math.max(2,Math.round(I))),ie=null!=H&&!1!==H&&""!==H,oe=J??ie,se=oe?"danger":M,me=s("text-center font-medium [font-family:inherit]","xs"===C||"sm"===C?"neba-input":"",v[C],N[C],y[C],g,"caret-(--n-accent) selection:bg-(--n-soft-press)",`${p} outline-offset-0 focus:[outline:2px_solid_var(--n-ring)]`,"focus:[transition-duration:var(--neba-duration)]",te?m[S]:U?d[S]:u[S]),de=q&&q>0?Math.round(q):0;return a(n.Root,{disabled:te,invalid:oe,className:s("inline-flex flex-col align-top",f[C],Z),style:{...x(se,z),...ee},children:[B?e(n.Label,{className:s(c[C],"font-medium",te?"text-(--neba-disabled-fg)":"text-(--neba-fg)"),children:B}):null,e(l.Root,{ref:F,length:re,validationType:V[R],mask:k,name:K,required:P,disabled:te,readOnly:U,autoSubmit:$,value:_,defaultValue:A,onValueChange:e=>D?.(e),onValueComplete:e=>E?.(e),onValueInvalid:e=>T?.(e),className:s("flex items-center",j[O][C]),...ae,children:Array.from({length:re},(n,r)=>a(t.Fragment,{children:[de>0&&r>0&&r%de===0?e("span",{"aria-hidden":"true",className:s("select-none px-0.5 text-(--neba-muted-fg)",N[C]),children:L}):null,e(l.Input,{className:me,autoFocus:W&&0===r,"aria-label":0===r?void 0:le(r+1,re)})]},r))}),G?e(n.Description,{className:s(c[C],"text-(--neba-muted-fg)"),children:G}):null,e(n.Error,ie?{match:!0,className:s(c[C],"text-(--n-accent)"),children:H}:{className:s(c[C],"text-(--n-accent)")})]})});
@@ -68,7 +68,7 @@ export interface OverlayProps extends Omit<React.ComponentPropsWithoutRef<'div'>
68
68
  /**
69
69
  * The accessible name of the overlay. An overlay that holds nothing readable
70
70
  * — a bare spinner, a `clear` sheet — still has to say what it is, so this
71
- * falls back to the `locale`'s word for it rather than to nothing.
71
+ * falls back to the `locale`'s word for "Loading" rather than to nothing.
72
72
  */
73
73
  label?: string;
74
74
  /** What sits on top of the scrim — a spinner, a line of text, a small card. */
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as l}from"@base-ui/react/dialog";import{overlayMessages as r,useMessages as s}from"../../internal/i18n.js";import{cx as n,popupFadeClasses as t,surfaceSlots as i}from"../../internal/styles.js";import{useStyleDefaults as o}from"../../internal/defaults.js";const c={scrim:"bg-(--neba-scrim) [backdrop-filter:blur(2px)]",blur:"[background-color:color-mix(in_oklab,var(--neba-scrim)_55%,transparent)] [backdrop-filter:blur(14px)_saturate(1.4)]",solid:"bg-(--neba-surface)",clear:""},m={start:"items-start",center:"items-center",end:"items-end"},p={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"};export function Overlay(d){const{open:f,defaultOpen:b,onOpenChange:u,tone:x="scrim",dismissible:g=!1,modal:j=!0,align:h="center",size:y="md",color:k="primary",locale:O,label:z,className:N,style:P,children:_,...v}=o(d,["size","locale"]),w=s(r,O);return e(l.Root,{open:f,defaultOpen:b,modal:j,disablePointerDismissal:!g,onOpenChange:(e,a)=>{g||e||"escape-key"!==a.reason?u?.(e):a.cancel()},children:a(l.Portal,{children:[e(l.Backdrop,{className:`neba-portal fixed inset-0 z-50 ${t} ${c[x]}`}),e(l.Viewport,{className:["neba-portal fixed inset-0 z-50 flex justify-center",m[h],p[y]].join(" "),children:e(l.Popup,{"aria-label":z??w.label,className:n("flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",t,N??""),style:{...i(k,0),...P},...v,children:_})})]})})}
1
+ "use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as n}from"@base-ui/react/dialog";import{overlayMessages as r,useMessages as l}from"../../internal/i18n.js";import{cx as t,popupFadeClasses as s,surfaceSlots as o}from"../../internal/styles.js";import{useStyleDefaults as i}from"../../internal/defaults.js";const c={scrim:"bg-(--neba-scrim) [backdrop-filter:blur(2px)]",blur:"[background-color:color-mix(in_oklab,var(--neba-scrim)_55%,transparent)] [backdrop-filter:blur(14px)_saturate(1.4)]",solid:"bg-(--neba-surface)",clear:""},p={start:"items-start",center:"items-center",end:"items-end"},m={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"};export function Overlay(d){const{open:b,defaultOpen:f,onOpenChange:u,tone:x="scrim",dismissible:g=!1,modal:j=!0,align:h="center",size:y="md",color:k="primary",locale:z,label:v,className:O,style:N,children:P,..._}=i(d,["size","locale"]),w=l(r,z);return e(n.Root,{open:b,defaultOpen:f,modal:j,disablePointerDismissal:!g,onOpenChange:(e,a)=>{g||e||"escape-key"!==a.reason?u?.(e):a.cancel()},children:a(n.Portal,{children:[e(n.Backdrop,{className:t("neba-portal fixed inset-0 z-(--neba-z-portal)",s,c[x],!0===j?"":"pointer-events-none")}),e(n.Viewport,{className:["neba-portal fixed inset-0 z-(--neba-z-portal) flex justify-center",p[h],m[y],!0===j?"":"pointer-events-none"].join(" "),children:e(n.Popup,{"aria-label":v??w.label,className:t("flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",!0===j?"":"pointer-events-auto",s,O??""),style:{...o(k,0),...N},..._,children:P})})]})})}
@@ -99,6 +99,17 @@ export interface PageLayoutProps extends React.ComponentPropsWithoutRef<'div'> {
99
99
  skipLink?: boolean;
100
100
  /** What that link says. Defaults to the `locale`'s word for it. */
101
101
  skipLabel?: string;
102
+ /**
103
+ * Whether the content goes in a `<main>` named by `mainId`, with the skip
104
+ * link in front of it.
105
+ *
106
+ * A document has one `<main>` and one element for each `id`, so a layout that
107
+ * is not the page — a preview of an app shell inside the page's own layout —
108
+ * turns it off, and the content goes in a plain `<div>` with no skip link. A
109
+ * layout on a [Mockup]'s screen is off unless it says otherwise.
110
+ * @default true
111
+ */
112
+ main?: boolean;
102
113
  /**
103
114
  * The `id` the skip link jumps to, put on the `<main>`.
104
115
  * @default 'main'
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as o from"react";import{layoutMessages as n,useMessages as t}from"../../internal/i18n.js";import{PageLayoutContext as r,SidebarSideContext as a}from"../../internal/page-layout.js";import{observeResize as s}from"../../internal/observe.js";import{controlSlots as i,cx as u,hasContent as f,toLength as c}from"../../internal/styles.js";import{useStyleDefaults as d}from"../../internal/defaults.js";const p=["header","footer"];export const PageLayout=/*@__PURE__*/o.forwardRef(function(m,h){const{header:v,footer:x,sidebar:y,endSidebar:b,headerSpan:g="full",footerSpan:w="full",scroll:S="page",height:k="viewport",collapseBelow:C="md",sidebarOpen:P,defaultSidebarOpen:j=!1,onSidebarOpenChange:N,endSidebarOpen:O,defaultEndSidebarOpen:$=!1,onEndSidebarOpenChange:R,skipLink:z=!0,skipLabel:E,mainId:L="main",mainProps:B,locale:H,color:M="primary",className:_,style:I,children:T,...q}=d(m,["locale"]),A=t(n,H),[D,F]=o.useState(j),[G,J]=o.useState($),K=o.useMemo(()=>({start:P??D,end:O??G}),[P,D,O,G]),Q=o.useCallback((e,l)=>{if("start"===e)return void 0===P&&F(l),void N?.(l);void 0===O&&J(l),R?.(l)},[P,O,N,R]),U=o.useRef(null),V=o.useCallback(e=>{U.current=e,"function"==typeof h?h(e):h&&(h.current=e)},[h]),W=o.useRef({header:null,footer:null}),X=o.useRef({header:null,footer:null}),Y=o.useCallback(()=>{const e=U.current;if(e)for(const l of p){const o=W.current[l],n="header"===l?g:w;if(!o){e.style.setProperty(`--n-layout-${l}`,"0px"),e.style.setProperty(`--n-layout-${l}-inset`,"0px");continue}const t=getComputedStyle(o).position,r=`${o.offsetHeight}px`,a="sticky"===t||"fixed"===t;e.style.setProperty(`--n-layout-${l}`,a&&"full"===n?r:"0px"),e.style.setProperty(`--n-layout-${l}-inset`,"fixed"===t?r:"0px")}},[g,w]),Z=o.useCallback(()=>{for(const e of p){X.current[e]?.();const l=W.current[e];X.current[e]=l?s(l,()=>Y()):null}Y()},[Y]);o.useEffect(()=>{const e=X.current;return Z(),()=>{for(const l of p)e[l]?.(),e[l]=null}},[Z]);const ee=o.useCallback((e,l)=>{W.current[e]=l,Z()},[Z]),le=o.useMemo(()=>({present:!0,register:ee,collapseBelow:C,open:K,setOpen:Q,scroll:S,locale:H}),[ee,C,K,Q,S,H]),oe="content"===S,ne=c("viewport"===k||"auto"===k?void 0:k),te=void 0!==ne?"":"auto"===k?oe?"h-full":"min-h-full":oe?"h-dvh":"min-h-dvh",re=f(v)?v:null,ae=f(x)?x:null;return e(r.Provider,{value:le,children:l("div",{ref:V,className:u("relative flex w-full flex-col",oe?"overflow-hidden":"",te,"full"===g?"[padding-top:var(--n-layout-header-inset,0px)]":"","full"===w?"[padding-bottom:var(--n-layout-footer-inset,0px)]":"",_),style:void 0===ne?I:{...oe?{height:ne}:{minHeight:ne},...I},...q,children:[z?e("a",{href:`#${L}`,className:u("absolute start-3 top-3 z-50 size-px overflow-hidden whitespace-nowrap","[clip-path:inset(50%)] focus:size-auto focus:overflow-visible focus:[clip-path:none]","focus:rounded-(--neba-radius-md) focus:bg-(--n-fill) focus:px-4 focus:py-2","focus:font-medium focus:text-(--n-on-solid) focus:no-underline","focus:[box-shadow:var(--neba-shadow-2),var(--neba-plate-solid)]","focus:[outline:2px_solid_var(--n-ring)] focus:outline-offset-2"),style:i(M,2,"solid"),children:E??A.skipToContent}):null,"full"===g?re:null,l("div",{className:u("flex w-full flex-1",oe?"min-h-0":""),children:[f(y)?e(a.Provider,{value:"start",children:y}):null,l("div",{className:u("flex min-w-0 flex-1 flex-col",oe?"min-h-0":"","content"===g?"[padding-top:var(--n-layout-header-inset,0px)]":"","content"===w?"[padding-bottom:var(--n-layout-footer-inset,0px)]":""),children:["content"===g?re:null,e("main",{...B,id:L,className:u("min-w-0 flex-1",oe?"min-h-0 overflow-y-auto":"",B?.className),children:T}),"content"===w?ae:null]}),f(b)?e(a.Provider,{value:"end",children:b}):null]}),"full"===w?ae:null]})})});
1
+ "use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as l from"react";import{layoutMessages as n,useMessages as t}from"../../internal/i18n.js";import{PageLayoutContext as r,SidebarSideContext as a,PageLayoutSlotContext as s}from"../../internal/page-layout.js";import{observeResize as i}from"../../internal/observe.js";import{controlSlots as u,cx as c,hasContent as d,toLength as f}from"../../internal/styles.js";import{useStyleDefaults as p}from"../../internal/defaults.js";import{ScreenContext as m}from"../../internal/screen.js";const h=["header","footer"];export const PageLayout=/*@__PURE__*/l.forwardRef(function PageLayout(v,x){const{header:y,footer:b,sidebar:w,endSidebar:g,headerSpan:P="full",footerSpan:S="full",scroll:k="page",height:C="viewport",collapseBelow:j="md",sidebarOpen:N,defaultSidebarOpen:O=!1,onSidebarOpenChange:$,endSidebarOpen:L,defaultEndSidebarOpen:R=!1,onEndSidebarOpenChange:z,skipLink:E=!0,skipLabel:B,main:H,mainId:M="main",mainProps:_,locale:I,color:T="primary",className:q,style:A,children:D,...F}=p(v,["locale"]),G=t(n,I),J=l.useContext(m),K=H??!J,[Q,U]=l.useState(O),[V,W]=l.useState(R),X=l.useMemo(()=>({start:N??Q,end:L??V}),[N,Q,L,V]),Y=l.useCallback((e,o)=>{if("start"===e)return void 0===N&&U(o),void $?.(o);void 0===L&&W(o),z?.(o)},[N,L,$,z]),Z=l.useRef(null),ee=l.useCallback(e=>{Z.current=e,"function"==typeof x?x(e):x&&(x.current=e)},[x]),oe=l.useRef({header:null,footer:null}),le=l.useRef({header:null,footer:null}),ne=l.useCallback(()=>{const e=Z.current;if(e)for(const o of h){const l=oe.current[o],n="header"===o?P:S;if(!l){e.style.setProperty(`--n-layout-${o}`,"0px"),e.style.setProperty(`--n-layout-${o}-inset`,"0px");continue}const t=getComputedStyle(l).position,r=`${l.offsetHeight}px`,a="sticky"===t||"fixed"===t;e.style.setProperty(`--n-layout-${o}`,a&&"full"===n?r:"0px"),e.style.setProperty(`--n-layout-${o}-inset`,"fixed"===t?r:"0px")}},[P,S]),te=l.useCallback(()=>{for(const e of h){le.current[e]?.();const o=oe.current[e];le.current[e]=o?i(o,()=>ne()):null}ne()},[ne]);l.useEffect(()=>{const e=le.current;return te(),()=>{for(const o of h)e[o]?.(),e[o]=null}},[te]);const re=l.useCallback((e,o)=>{oe.current[e]=o,te()},[te]),ae=l.useMemo(()=>({present:!0,register:re,collapseBelow:j,open:X,setOpen:Y,scroll:k,locale:I}),[re,j,X,Y,k,I]),se="content"===k,ie=f("viewport"===C||"auto"===C?void 0:C),ue=void 0!==ie?"":"auto"===C?se?"h-full":"min-h-full":se?"h-dvh":"min-h-dvh",ce=d(y)?e(s.Provider,{value:"header",children:y}):null,de=d(b)?e(s.Provider,{value:"footer",children:b}):null;return e(r.Provider,{value:ae,children:o("div",{ref:ee,className:c("relative flex w-full flex-col",se?"overflow-hidden":"",ue,"full"===P?"[padding-top:var(--n-layout-header-inset,0px)]":"","full"===S?"[padding-bottom:var(--n-layout-footer-inset,0px)]":"",q),style:void 0===ie?A:{...se?{height:ie}:{minHeight:ie},...A},...F,children:[E&&K?e("a",{href:`#${M}`,className:c("absolute start-3 top-3 z-50 size-px overflow-hidden whitespace-nowrap","[clip-path:inset(50%)] focus:size-auto focus:overflow-visible focus:[clip-path:none]","focus:rounded-(--neba-radius-md) focus:bg-(--n-fill) focus:px-4 focus:py-2","focus:font-medium focus:text-(--n-on-solid) focus:no-underline","focus:[box-shadow:var(--neba-shadow-2),var(--neba-plate-solid)]","focus:[outline:2px_solid_var(--n-ring)] focus:outline-offset-2"),style:u(T,2,"solid"),children:B??G.skipToContent}):null,"full"===P?ce:null,o("div",{className:c("flex w-full flex-1",se?"min-h-0":""),children:[d(w)?e(a.Provider,{value:"start",children:w}):null,o("div",{className:c("flex min-w-0 flex-1 flex-col",se?"min-h-0":"","content"===P?"[padding-top:var(--n-layout-header-inset,0px)]":"","content"===S?"[padding-bottom:var(--n-layout-footer-inset,0px)]":""),children:["content"===P?ce:null,K?e("main",{..._,id:M,className:c("min-w-0 flex-1",se?"min-h-0 overflow-y-auto":"",_?.className),children:D}):e("div",{..._,className:c("min-w-0 flex-1",se?"min-h-0 overflow-y-auto":"",_?.className),children:D}),"content"===S?de:null]}),d(g)?e(a.Provider,{value:"end",children:g}):null]}),"full"===S?de:null]})})});
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Button as n}from"../button/Button.js";import{fillMessage as r,paginationMessages as l,useMessages as i}from"../../internal/i18n.js";import{ChevronIcon as s}from"../../internal/icons.js";import{controlTextClasses as o,cx as m,gapClasses as c,srOnlyClasses as u}from"../../internal/styles.js";import{useStyleDefaults as d}from"../../internal/defaults.js";function h(e,t){return Array.from({length:Math.max(0,t-e+1)},(t,a)=>e+a)}function f(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"m7.5 4.5 3.5 3.5-3.5 3.5M3.5 4.5 7 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const p={xs:"h-5.5 min-w-5.5",sm:"h-6.5 min-w-6.5",md:"h-8 min-w-8",lg:"h-10 min-w-10",xl:"h-12 min-w-12"};export const Pagination=/*@__PURE__*/a.forwardRef(function(x,g){const{variant:b="text",size:v="md",color:y="primary",density:M="compact",elevation:j=0,count:w,page:N,defaultPage:L=1,onPageChange:k,siblingCount:C=1,boundaryCount:z=1,showEdges:K=!1,showArrows:P=!0,disabled:S=!1,getPageHref:$,locale:A,label:B,pageLabel:D,previousLabel:E,nextLabel:H,firstLabel:I,lastLabel:R,className:W,children:q,...F}=d(x,["size","density","variant","locale"]),G=i(l,A),J=D??(e=>r(G.page,{page:String(e)})),[O,Q]=a.useState(L),T=Math.min(Math.max(N??O,1),Math.max(w,1));if(w<2)return null;const U=function(e,t,a,n){const r=h(1,Math.min(n,e)),l=h(Math.max(e-n+1,n+1),e),i=Math.max(Math.min(t-a,e-n-2*a-1),n+2),s=Math.min(Math.max(t+a,n+2*a+2),l.length>0?l[0]-2:e-1);return[...r,...i>n+2?["start-ellipsis"]:n+1<e-n?[n+1]:[],...h(i,s),...s<e-n-1?["end-ellipsis"]:e-n>n?[e-n]:[],...l]}(w,T,C,z),V=T<=1,X=T>=w,Y=(t,a,n)=>$&&!a?{render:e("a",{href:$(t),rel:n})}:null,Z=(e,t)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||$&&!k||(e.preventDefault(),(e=>{const t=Math.min(Math.max(e,1),w);t!==T&&(void 0===N&&Q(t),k?.(t))})(t))},_=(t,a,r,l,i,s,o)=>e("li",{className:"flex",children:e(n,{variant:b,size:v,color:y,density:M,elevation:j,disabled:S||l,"aria-label":a,startIcon:e("span",{className:`flex items-center ${i}`,children:s}),onClick:e=>Z(e,r),...Y(r,S||l,o)})},t);return t("nav",{ref:g,"aria-label":B??G.label,className:m("flex items-center",W??""),...F,children:[t("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${c[v]}`,children:[K?_("first",I??G.first,1,V,"rotate-180 rtl:rotate-0",e(f,{})):null,P?_("previous",E??G.previous,T-1,V,"rotate-90 rtl:-rotate-90",e(s,{}),"prev"):null,U.map((t,a)=>e("li","number"==typeof t?{className:"flex",children:e(n,{variant:t===T?"solid":b,size:v,color:y,density:M,elevation:j,disabled:S,"aria-label":J(t),"aria-current":t===T?"page":void 0,className:"tabular-nums",onClick:e=>Z(e,t),...Y(t,S||t===T),children:t})}:{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--neba-muted-fg)",o[v],p[v]].join(" "),children:"…"},`slot-${a}`)),P?_("next",H??G.next,T+1,X,"-rotate-90 rtl:rotate-90",e(s,{}),"next"):null,K?_("last",R??G.last,w,X,"rtl:rotate-180",e(f,{})):null]}),e("span",{className:u,"aria-live":"polite",children:r(G.status,{page:String(T),total:String(w)})}),q]})});
1
+ "use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{safeHref as n}from"../../internal/link.js";import{Button as r}from"../button/Button.js";import{fillMessage as l,paginationMessages as i,useMessages as o}from"../../internal/i18n.js";import{ChevronIcon as s}from"../../internal/icons.js";import{controlTextClasses as m,cx as c,gapClasses as u,srOnlyClasses as d}from"../../internal/styles.js";import{useStyleDefaults as h}from"../../internal/defaults.js";function f(e,t){return Array.from({length:Math.max(0,t-e+1)},(t,a)=>e+a)}function DoubleChevronIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"m7.5 4.5 3.5 3.5-3.5 3.5M3.5 4.5 7 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const p={xs:"h-5.5 min-w-5.5",sm:"h-6.5 min-w-6.5",md:"h-8 min-w-8",lg:"h-10 min-w-10",xl:"h-12 min-w-12"};export const Pagination=/*@__PURE__*/a.forwardRef(function Pagination(x,b){const{variant:g="text",size:v="md",color:y="primary",density:M="compact",elevation:j=0,count:w,page:C,defaultPage:N=1,onPageChange:k,siblingCount:L=1,boundaryCount:D=1,showEdges:I=!1,showArrows:P=!0,disabled:z=!1,getPageHref:K,locale:S,label:$,pageLabel:A,previousLabel:B,nextLabel:W,firstLabel:E,lastLabel:H,className:R,children:q,...F}=h(x,["size","density","variant","locale"]),G=o(i,S),J=A??(e=>l(G.page,{page:String(e)})),[O,Q]=a.useState(N),T=Math.min(Math.max(C??O,1),Math.max(w,1));if(w<2)return null;const U=function(e,t,a,n){const r=f(1,Math.min(n,e)),l=f(Math.max(e-n+1,n+1),e),i=Math.max(Math.min(t-a,e-n-2*a-1),n+2),o=Math.min(Math.max(t+a,n+2*a+2),l.length>0?l[0]-2:e-1);return[...r,...i>n+2?["start-ellipsis"]:n+1<e-n?[n+1]:[],...f(i,o),...o<e-n-1?["end-ellipsis"]:e-n>n?[e-n]:[],...l]}(w,T,L,D),V=T<=1,X=T>=w,Y=(t,a,r)=>!K||z?null:a?{render:e("a",{role:"link","aria-disabled":"true",tabIndex:0})}:{render:e("a",{href:n(K(t)),rel:r})},Z=(e,t)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||K&&!k||(e.preventDefault(),(e=>{const t=Math.min(Math.max(e,1),w);t!==T&&(void 0===C&&Q(t),k?.(t))})(t))},_=(t,a,n,l,i,o,s)=>e("li",{className:"flex",children:e(r,{variant:g,size:v,color:y,density:M,elevation:j,disabled:z||l,focusableWhenDisabled:!z,"aria-label":a,startIcon:e("span",{className:`flex items-center ${i}`,children:o}),onClick:e=>Z(e,n),...Y(n,l,s)})},t);return t("nav",{ref:b,"aria-label":$??G.label,className:c("flex items-center",R??""),...F,children:[t("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${u[v]}`,children:[I?_("first",E??G.first,1,V,"rotate-180 rtl:rotate-0",e(DoubleChevronIcon,{})):null,P?_("previous",B??G.previous,T-1,V,"rotate-90 rtl:-rotate-90",e(s,{}),"prev"):null,U.map((t,a)=>e("li","number"==typeof t?{className:"flex",children:e(r,{variant:t===T?"solid":g,size:v,color:y,density:M,elevation:j,disabled:z,"aria-label":J(t),"aria-current":t===T?"page":void 0,className:"tabular-nums",onClick:e=>Z(e,t),...Y(t,t===T),children:t})}:{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--neba-muted-fg)",m[v],p[v]].join(" "),children:"…"},`slot-${a}`)),P?_("next",W??G.next,T+1,X,"-rotate-90 rtl:rotate-90",e(s,{}),"next"):null,I?_("last",H??G.last,w,X,"rtl:rotate-180",e(DoubleChevronIcon,{})):null]}),e("span",{className:d,"aria-live":"polite",children:l(G.status,{page:String(T),total:String(w)})}),q]})});
@@ -32,6 +32,17 @@ export interface PanesProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
32
32
  onResize?: (sizes: number[]) => void;
33
33
  /** Fires once, with the same shape, when the handle is let go. */
34
34
  onResizeEnd?: (sizes: number[]) => void;
35
+ /**
36
+ * Names each handle. A string names them all; a function is handed the
37
+ * handle's index, from 0, for a split of more than two panes where each handle
38
+ * wants a name of its own. Defaults to the `locale`'s words for resizing panes.
39
+ */
40
+ handleLabel?: string | ((index: number) => string);
41
+ /**
42
+ * Which language the handle's default name is in — a BCP 47 tag such as `ko`,
43
+ * `pt-BR` or `zh-Hant`.
44
+ */
45
+ locale?: string;
35
46
  /** The Panes. Anything that is not a Pane is still laid out, but has no size. */
36
47
  children?: React.ReactNode;
37
48
  }
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{beginPointerDrag as r}from"../../internal/drag.js";import{observeResize as i}from"../../internal/observe.js";import{cx as o,toPixels as a,transitionClasses as l}from"../../internal/styles.js";import{useStyleDefaults as s}from"../../internal/defaults.js";const c=/*@__PURE__*/t.createContext({basis:null}),u={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},f={xs:4,sm:6,md:8,lg:10,xl:12};function m(e,n,t){if(null!=e)return"number"==typeof e?n*e/100:a(e,{percentOf:n,relativeTo:t})}export const Panes=/*@__PURE__*/t.forwardRef(function(a,d){const{orientation:h="horizontal",resizable:p=!0,color:g="primary",size:x="md",onResize:v,onResizeEnd:b,className:z,style:w,children:y,...R}=s(a,["size"]),M=t.Children.toArray(y).filter(t.isValidElement),S=M.length,j=t.useRef(null),C=t.useCallback(e=>{j.current=e,"function"==typeof d?d(e):d&&(d.current=e)},[d]),k=t.useRef([]);k.current=M.map(e=>e.props);const[N,$]=t.useState(null),A=N&&N.length===S?N:null,E=t.useRef(null);E.current=A;const D="horizontal"===h,P=f[x]*Math.max(0,S-1);function I(e){const n=j.current,t=E.current;if(!p||!n||!t||void 0===t[e+1])return null;const r=n.getBoundingClientRect(),i=(D?r.width:r.height)-P;if(i<=0)return null;const o=k.current[e],a=k.current[e+1],l=t[e]*i,s=l+t[e+1]*i,c=Math.max(m(o?.minSize,i,n)??0,s-(m(a?.maxSize,i,n)??s)),u=Math.min(m(o?.maxSize,i,n)??s,s-(m(a?.minSize,i,n)??0));return u<c?null:{root:n,current:t,extent:i,start:l,pair:s,resize(n){const r=Math.min(u,Math.max(c,l+n)),o=[...t];return o[e]=r/i,o[e+1]=(s-r)/i,$(o),v?.(o.map(e=>100*e)),o}}}t.useEffect(()=>{const e=j.current;if(!e)return;const n=()=>{const n=e.getBoundingClientRect(),t=(D?n.width:n.height)-P;t<=0||$(n=>n&&n.length===S?n:function(e,n,t){const r=e.map(e=>m(e.defaultSize,n,t)),i=r.reduce((e,n)=>e+(n??0),0),o=r.filter(e=>void 0===e).length,a=o>0?Math.max(0,n-i)/o:0,l=r.map(e=>Math.max(0,e??a)),s=l.reduce((e,n)=>e+n,0);return s<=0?l.map(()=>1/Math.max(1,l.length)):l.map(e=>e/s)}(k.current,t,e))};return n(),i(e,n)},[S,D,P]);const B=t.useRef(null);t.useEffect(()=>()=>B.current?.(),[]);const F=o("group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",u[x],l,"[outline:none] focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-0",p?o(D?"cursor-col-resize":"cursor-row-resize","hover:bg-(--n-soft) data-[dragging]:bg-(--n-soft)"):"");return e("div",{ref:C,className:o("flex h-full w-full",D?"flex-row":"flex-col","min-h-0 min-w-0",z),style:{"--n-accent":`var(--neba-${g}-accent)`,"--n-soft":`var(--neba-${g}-soft)`,"--n-ring":`var(--neba-${g}-ring)`,...w},...R,children:M.map((i,a)=>n(t.Fragment,{children:[a>0?e("div",{role:"separator","aria-orientation":D?"vertical":"horizontal","aria-valuenow":A?Math.round(100*A[a-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!p||void 0,tabIndex:p?0:-1,className:F,onPointerDown:e=>{0===e.button&&function(e,n){const t=I(e);if(!t)return;const i=n.currentTarget,o=D?n.clientX:n.clientY,a=D&&"rtl"===getComputedStyle(t.root).direction?-1:1;let l=t.current;B.current=r({target:i,pointerId:n.pointerId,onMove:e=>{const n=D?e.clientX:e.clientY;l=t.resize((n-o)*a)},onEnd:()=>{B.current=null,b?.(l.map(e=>100*e))}})}(a-1,e)},onKeyDown:e=>{const n=D?"ArrowLeft":"ArrowUp",t=D?"ArrowRight":"ArrowDown";e.key!==n&&e.key!==t||(e.preventDefault(),function(e,n){const t=I(e);if(!t)return;const r=t.resize(n);b?.(r.map(e=>100*e))}(a-1,e.key===t?16:-16))},children:e("span",{"aria-hidden":"true",className:o("pointer-events-none bg-(--neba-border)",l,D?"h-full w-px":"h-px w-full",p?"group-hover/handle:bg-(--n-accent) group-focus-visible/handle:bg-(--n-accent) group-data-[dragging]/handle:bg-(--n-accent)":"")})}):null,e(c.Provider,{value:{basis:A?`calc((100% - ${P}px) * ${A[a].toFixed(6)})`:null},children:i})]},i.key??a))})});export const Pane=/*@__PURE__*/t.forwardRef(function({defaultSize:n,minSize:r,maxSize:i,className:a,style:l,children:s,...u},f){const{basis:m}=t.useContext(c);return e("div",{ref:f,className:o("relative min-h-0 min-w-0 overflow-auto",a),style:{flex:m?`0 0 ${m}`:"1 1 0%",...l},...u,children:s})});
1
+ "use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{beginPointerDrag as r}from"../../internal/drag.js";import{observeResize as i}from"../../internal/observe.js";import{cx as o,toPixels as a,transitionClasses as l}from"../../internal/styles.js";import{useStyleDefaults as s}from"../../internal/defaults.js";import{panesMessages as c,useMessages as u}from"../../internal/i18n.js";const f=/*@__PURE__*/t.createContext({basis:null}),d={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},m={xs:4,sm:6,md:8,lg:10,xl:12};function h(e,n,t){if(null!=e)return"number"==typeof e?n*e/100:a(e,{percentOf:n,relativeTo:t})}export const Panes=/*@__PURE__*/t.forwardRef(function Panes(a,p){const{orientation:g="horizontal",resizable:x=!0,color:b="primary",size:v="md",onResize:w,onResizeEnd:z,handleLabel:y,locale:R,className:S,style:M,children:$,...j}=s(a,["size","locale"]),C=t.Children.toArray($).filter(t.isValidElement),A=C.length,E=u(c,R),k=t.useId(),N=e=>C[e]?.props.id??`${k}-pane-${e}`,P=t.useRef(null),D=t.useCallback(e=>{P.current=e,"function"==typeof p?p(e):p&&(p.current=e)},[p]),I=t.useRef([]);I.current=C.map(e=>e.props);const[L,T]=t.useState(null),B=L&&L.length===A?L:null,F=t.useRef(null);t.useEffect(()=>{F.current=B});const X="horizontal"===g,Y=m[v]*Math.max(0,A-1);function _(e){const n=P.current,t=F.current;if(!x||!n||!t||void 0===t[e+1])return null;const r=n.getBoundingClientRect(),i=(X?r.width:r.height)-Y;if(i<=0)return null;const o=I.current[e],a=I.current[e+1],l=t[e]*i,s=l+t[e+1]*i,c=Math.max(h(o?.minSize,i,n)??0,s-(h(a?.maxSize,i,n)??s)),u=Math.min(h(o?.maxSize,i,n)??s,s-(h(a?.minSize,i,n)??0));return u<c?null:{root:n,current:t,extent:i,start:l,pair:s,resize(n){const r=Math.min(u,Math.max(c,l+n)),o=[...t];return o[e]=r/i,o[e+1]=(s-r)/i,T(o),w?.(o.map(e=>100*e)),o}}}t.useEffect(()=>{const e=P.current;if(!e)return;const n=()=>{const n=e.getBoundingClientRect(),t=(X?n.width:n.height)-Y;t<=0||T(n=>n&&n.length===A?n:function(e,n,t){const r=e.map(e=>h(e.defaultSize,n,t)),i=r.reduce((e,n)=>e+(n??0),0),o=r.filter(e=>void 0===e).length,a=o>0?Math.max(0,n-i)/o:0,l=r.map(e=>Math.max(0,e??a)),s=l.reduce((e,n)=>e+n,0);return s<=0?l.map(()=>1/Math.max(1,l.length)):l.map(e=>e/s)}(I.current,t,e))};return n(),i(e,n)},[A,X,Y]);const K=t.useRef(null);t.useEffect(()=>()=>K.current?.(),[]);const O=o("group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",d[v],l,"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-0",x?o(X?"cursor-col-resize":"cursor-row-resize","neba-hit","touch-none","hover:bg-(--n-soft) data-[dragging]:bg-(--n-soft)"):"");return e("div",{ref:D,className:o("flex h-full w-full",X?"flex-row":"flex-col","min-h-0 min-w-0",S),style:{"--n-accent":`var(--neba-${b}-accent)`,"--n-soft":`var(--neba-${b}-soft)`,"--n-ring":`var(--neba-${b}-ring)`,...M},...j,children:C.map((i,a)=>n(t.Fragment,{children:[a>0?e("div",{role:"separator","aria-label":"function"==typeof y?y(a-1):y??E.handle,"aria-controls":`${N(a-1)} ${N(a)}`,"aria-orientation":X?"vertical":"horizontal","aria-valuenow":B?Math.round(100*B[a-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!x||void 0,tabIndex:x?0:-1,className:O,onPointerDown:e=>{0===e.button&&function(e,n){const t=_(e);if(!t)return;const i=n.currentTarget,o=X?n.clientX:n.clientY,a=X&&"rtl"===getComputedStyle(t.root).direction?-1:1;let l=t.current;K.current=r({target:i,pointerId:n.pointerId,onMove:e=>{const n=X?e.clientX:e.clientY;l=t.resize((n-o)*a)},onEnd:()=>{K.current=null,z?.(l.map(e=>100*e))}})}(a-1,e)},onKeyDown:e=>{const n=X&&"rtl"===getComputedStyle(e.currentTarget).direction,t=X?n?"ArrowRight":"ArrowLeft":"ArrowUp",r=X?n?"ArrowLeft":"ArrowRight":"ArrowDown";e.key!==t&&e.key!==r||(e.preventDefault(),function(e,n){const t=_(e);if(!t)return;const r=t.resize(n);z?.(r.map(e=>100*e))}(a-1,e.key===r?16:-16))},children:e("span",{"aria-hidden":"true",className:o("pointer-events-none bg-(--neba-border)",l,X?"h-full w-px":"h-px w-full",x?"group-hover/handle:bg-(--n-accent) group-focus-visible/handle:bg-(--n-accent) group-data-[dragging]/handle:bg-(--n-accent)":"")})}):null,e(f.Provider,{value:{basis:B?`calc((100% - ${Y}px) * ${B[a].toFixed(6)})`:null},children:void 0===i.props.id?t.cloneElement(i,{id:N(a)}):i})]},i.key??a))})});export const Pane=/*@__PURE__*/t.forwardRef(function Pane({defaultSize:n,minSize:r,maxSize:i,className:a,style:l,children:s,...c},u){const{basis:d}=t.useContext(f);return e("div",{ref:u,className:o("relative min-h-0 min-w-0 overflow-auto",a),style:{flex:d?`0 0 ${d}`:"1 1 0%",...l},...c,children:s})});
@@ -50,9 +50,11 @@ export interface PieChartProps extends ChartBaseProps {
50
50
  * a poor thing to compare — two slices within a few percent of each other are
51
51
  * indistinguishable, and a reader cannot rank six of them — so the pie is right
52
52
  * for exactly one question: *is one of these most of it?* Anything finer than
53
- * that, and anything past six slices, is a [BarChart](./bar-chart).
53
+ * that, and anything past six slices, is a [BarChart](./bar-chart); a pie of
54
+ * two slices is a [Statistic](./statistic).
54
55
  *
55
- * A slice's colour follows the slice and not its size, so a chart that is
56
- * refiltered or resorted keeps every category the colour it had.
56
+ * A slice's colour follows its place in `data`, so a filter that drops one
57
+ * moves every slice after it onto the next colour; a point's own `color`
58
+ * holds it.
57
59
  */
58
60
  export declare function PieChart(rawProps: PieChartProps): React.JSX.Element;