neba 1.10.0 → 1.12.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 (288) hide show
  1. package/README.md +36 -6
  2. package/dist/components/accordion/Accordion.js +1 -1
  3. package/dist/components/alert/Alert.js +1 -1
  4. package/dist/components/anchor/Anchor.js +1 -1
  5. package/dist/components/animate-appear/AnimateAppear.d.ts +2 -13
  6. package/dist/components/animate-appear/AnimateAppear.js +1 -1
  7. package/dist/components/animate-blink/AnimateBlink.d.ts +2 -2
  8. package/dist/components/animate-blink/AnimateBlink.js +1 -1
  9. package/dist/components/animate-counter/AnimateCounter.d.ts +45 -0
  10. package/dist/components/animate-counter/AnimateCounter.js +1 -0
  11. package/dist/components/animate-counter/index.d.ts +1 -0
  12. package/dist/components/animate-counter/index.js +1 -0
  13. package/dist/components/animate-fade/AnimateFade.d.ts +2 -2
  14. package/dist/components/animate-fade/AnimateFade.js +1 -1
  15. package/dist/components/animate-float/AnimateFloat.d.ts +35 -0
  16. package/dist/components/animate-float/AnimateFloat.js +1 -0
  17. package/dist/components/animate-float/index.d.ts +1 -0
  18. package/dist/components/animate-float/index.js +1 -0
  19. package/dist/components/animate-grow/AnimateGrow.d.ts +2 -2
  20. package/dist/components/animate-grow/AnimateGrow.js +1 -1
  21. package/dist/components/animate-lighting/AnimateLighting.js +1 -1
  22. package/dist/components/animate-reveal/AnimateReveal.d.ts +41 -0
  23. package/dist/components/animate-reveal/AnimateReveal.js +1 -0
  24. package/dist/components/animate-reveal/index.d.ts +1 -0
  25. package/dist/components/animate-reveal/index.js +1 -0
  26. package/dist/components/animate-rotate/AnimateRotate.d.ts +2 -2
  27. package/dist/components/animate-rotate/AnimateRotate.js +1 -1
  28. package/dist/components/animate-scramble/AnimateScramble.d.ts +48 -0
  29. package/dist/components/animate-scramble/AnimateScramble.js +1 -0
  30. package/dist/components/animate-scramble/index.d.ts +1 -0
  31. package/dist/components/animate-scramble/index.js +1 -0
  32. package/dist/components/animate-shake/AnimateShake.d.ts +39 -0
  33. package/dist/components/animate-shake/AnimateShake.js +1 -0
  34. package/dist/components/animate-shake/index.d.ts +1 -0
  35. package/dist/components/animate-shake/index.js +1 -0
  36. package/dist/components/animate-slide/AnimateSlide.d.ts +2 -2
  37. package/dist/components/animate-slide/AnimateSlide.js +1 -1
  38. package/dist/components/animate-split/AnimateSplit.d.ts +61 -0
  39. package/dist/components/animate-split/AnimateSplit.js +1 -0
  40. package/dist/components/animate-split/index.d.ts +1 -0
  41. package/dist/components/animate-split/index.js +1 -0
  42. package/dist/components/animate-typing/AnimateTyping.js +1 -1
  43. package/dist/components/animate-zoom/AnimateZoom.d.ts +2 -2
  44. package/dist/components/animate-zoom/AnimateZoom.js +1 -1
  45. package/dist/components/app-logo/AppLogo.js +1 -1
  46. package/dist/components/aspect-ratio/AspectRatio.js +1 -1
  47. package/dist/components/avatar/Avatar.js +1 -1
  48. package/dist/components/badge/Badge.js +1 -1
  49. package/dist/components/bar-chart/BarChart.d.ts +1 -1
  50. package/dist/components/bar-chart/BarChart.js +1 -1
  51. package/dist/components/blockquote/Blockquote.js +1 -1
  52. package/dist/components/bottom-navigation/BottomNavigation.js +1 -1
  53. package/dist/components/box/Box.js +1 -1
  54. package/dist/components/breadcrumb/Breadcrumb.js +1 -1
  55. package/dist/components/button/Button.js +1 -1
  56. package/dist/components/button-group/ButtonGroup.js +1 -1
  57. package/dist/components/calendar/Calendar.d.ts +72 -0
  58. package/dist/components/calendar/Calendar.js +1 -0
  59. package/dist/components/calendar/index.d.ts +2 -0
  60. package/dist/components/calendar/index.js +1 -0
  61. package/dist/components/card/Card.js +1 -1
  62. package/dist/components/carousel/Carousel.js +1 -1
  63. package/dist/components/chat-bubble/ChatBubble.js +1 -1
  64. package/dist/components/checkbox/Checkbox.js +1 -1
  65. package/dist/components/chip/Chip.js +1 -1
  66. package/dist/components/code-block/CodeBlock.js +1 -1
  67. package/dist/components/collapsible/Collapsible.js +1 -1
  68. package/dist/components/color-picker/ColorPicker.js +1 -1
  69. package/dist/components/combobox/Combobox.d.ts +14 -2
  70. package/dist/components/combobox/Combobox.js +1 -1
  71. package/dist/components/command-palette/CommandPalette.d.ts +1 -1
  72. package/dist/components/command-palette/CommandPalette.js +1 -1
  73. package/dist/components/confirm/Confirm.d.ts +83 -0
  74. package/dist/components/confirm/Confirm.js +1 -0
  75. package/dist/components/confirm/index.d.ts +2 -0
  76. package/dist/components/confirm/index.js +1 -0
  77. package/dist/components/container/Container.d.ts +12 -4
  78. package/dist/components/container/Container.js +1 -1
  79. package/dist/components/data-list/DataList.js +1 -1
  80. package/dist/components/data-table/DataTable.d.ts +104 -1
  81. package/dist/components/data-table/DataTable.js +1 -1
  82. package/dist/components/date-picker/DatePicker.d.ts +40 -8
  83. package/dist/components/date-picker/DatePicker.js +1 -1
  84. package/dist/components/date-range-picker/DateRangePicker.js +1 -1
  85. package/dist/components/date-time-picker/DateTimePicker.js +1 -1
  86. package/dist/components/dialog/Dialog.d.ts +1 -1
  87. package/dist/components/dialog/Dialog.js +1 -1
  88. package/dist/components/divider/Divider.js +1 -1
  89. package/dist/components/drawer/Drawer.d.ts +1 -1
  90. package/dist/components/drawer/Drawer.js +1 -1
  91. package/dist/components/empty/Empty.js +1 -1
  92. package/dist/components/file-picker/FilePicker.js +1 -1
  93. package/dist/components/flex/Flex.d.ts +93 -0
  94. package/dist/components/flex/Flex.js +1 -0
  95. package/dist/components/flex/index.d.ts +2 -0
  96. package/dist/components/flex/index.js +1 -0
  97. package/dist/components/floating-action-button/FloatingActionButton.js +1 -1
  98. package/dist/components/floating-bottom-navigation/FloatingBottomNavigation.js +1 -1
  99. package/dist/components/footer/Footer.d.ts +4 -3
  100. package/dist/components/footer/Footer.js +1 -1
  101. package/dist/components/gallery/Gallery.d.ts +150 -0
  102. package/dist/components/gallery/Gallery.js +1 -0
  103. package/dist/components/gallery/GalleryViewer.d.ts +30 -0
  104. package/dist/components/gallery/GalleryViewer.js +1 -0
  105. package/dist/components/gallery/index.d.ts +2 -0
  106. package/dist/components/gallery/index.js +1 -0
  107. package/dist/components/gauge-chart/GaugeChart.d.ts +1 -1
  108. package/dist/components/gauge-chart/GaugeChart.js +1 -1
  109. package/dist/components/grid/Grid.js +1 -1
  110. package/dist/components/grid-container/GridContainer.js +1 -1
  111. package/dist/components/header/Header.d.ts +5 -4
  112. package/dist/components/header/Header.js +1 -1
  113. package/dist/components/heatmap-chart/HeatmapChart.d.ts +1 -1
  114. package/dist/components/heatmap-chart/HeatmapChart.js +1 -1
  115. package/dist/components/highlight/Highlight.js +1 -1
  116. package/dist/components/hover-card/HoverCard.d.ts +1 -1
  117. package/dist/components/hover-card/HoverCard.js +1 -1
  118. package/dist/components/how-to-steps/HowToSteps.js +1 -1
  119. package/dist/components/image/Image.d.ts +190 -0
  120. package/dist/components/image/Image.js +1 -0
  121. package/dist/components/image/index.d.ts +2 -0
  122. package/dist/components/image/index.js +1 -0
  123. package/dist/components/list/List.js +1 -1
  124. package/dist/components/menu/Menu.js +1 -1
  125. package/dist/components/menubar/Menubar.js +1 -1
  126. package/dist/components/meter/Meter.js +1 -1
  127. package/dist/components/mockup/Mockup.js +1 -1
  128. package/dist/components/navigation-menu/NavigationMenu.js +1 -1
  129. package/dist/components/number-field/NumberField.d.ts +12 -2
  130. package/dist/components/number-field/NumberField.js +1 -1
  131. package/dist/components/otp-field/OtpField.js +1 -1
  132. package/dist/components/overlay/Overlay.d.ts +1 -1
  133. package/dist/components/overlay/Overlay.js +1 -1
  134. package/dist/components/page-layout/PageLayout.js +1 -1
  135. package/dist/components/pagination/Pagination.js +1 -1
  136. package/dist/components/panes/Panes.js +1 -1
  137. package/dist/components/pie-chart/PieChart.d.ts +1 -1
  138. package/dist/components/pie-chart/PieChart.js +1 -1
  139. package/dist/components/pill/Pill.js +1 -1
  140. package/dist/components/popconfirm/Popconfirm.d.ts +71 -0
  141. package/dist/components/popconfirm/Popconfirm.js +1 -0
  142. package/dist/components/popconfirm/index.d.ts +2 -0
  143. package/dist/components/popconfirm/index.js +1 -0
  144. package/dist/components/popover/Popover.d.ts +1 -1
  145. package/dist/components/popover/Popover.js +1 -1
  146. package/dist/components/portal/Portal.d.ts +48 -0
  147. package/dist/components/portal/Portal.js +1 -0
  148. package/dist/components/portal/index.d.ts +2 -0
  149. package/dist/components/portal/index.js +1 -0
  150. package/dist/components/progress-box/ProgressBox.js +1 -1
  151. package/dist/components/progress-circular/ProgressCircular.js +1 -1
  152. package/dist/components/progress-linear/ProgressLinear.js +1 -1
  153. package/dist/components/provider/NebaProvider.d.ts +99 -0
  154. package/dist/components/provider/NebaProvider.js +1 -0
  155. package/dist/components/provider/index.d.ts +3 -0
  156. package/dist/components/provider/index.js +1 -0
  157. package/dist/components/radio-group/RadioGroup.js +1 -1
  158. package/dist/components/rating/Rating.js +1 -1
  159. package/dist/components/scatter-chart/ScatterChart.d.ts +1 -1
  160. package/dist/components/scatter-chart/ScatterChart.js +1 -1
  161. package/dist/components/scroll-area/ScrollArea.js +1 -1
  162. package/dist/components/scroll-zone/ScrollZone.d.ts +9 -4
  163. package/dist/components/scroll-zone/ScrollZone.js +1 -1
  164. package/dist/components/select/Select.js +1 -1
  165. package/dist/components/shortcut/Shortcut.d.ts +2 -1
  166. package/dist/components/shortcut/Shortcut.js +1 -1
  167. package/dist/components/show/Show.d.ts +60 -0
  168. package/dist/components/show/Show.js +1 -0
  169. package/dist/components/show/index.d.ts +2 -0
  170. package/dist/components/show/index.js +1 -0
  171. package/dist/components/sidebar/Sidebar.js +1 -1
  172. package/dist/components/sidebar/SidebarTrigger.js +1 -1
  173. package/dist/components/skeleton/Skeleton.js +1 -1
  174. package/dist/components/slider/Slider.js +1 -1
  175. package/dist/components/sparkline/Sparkline.js +1 -1
  176. package/dist/components/spoiler/Spoiler.js +1 -1
  177. package/dist/components/stack/Stack.d.ts +126 -0
  178. package/dist/components/stack/Stack.js +1 -0
  179. package/dist/components/stack/index.d.ts +1 -0
  180. package/dist/components/stack/index.js +1 -0
  181. package/dist/components/statistic/Statistic.d.ts +8 -3
  182. package/dist/components/statistic/Statistic.js +1 -1
  183. package/dist/components/switch/Switch.js +1 -1
  184. package/dist/components/table/Table.d.ts +1 -1
  185. package/dist/components/table/Table.js +1 -1
  186. package/dist/components/tabs/Tabs.d.ts +28 -0
  187. package/dist/components/tabs/Tabs.js +1 -1
  188. package/dist/components/text-field/TextField.d.ts +12 -1
  189. package/dist/components/text-field/TextField.js +1 -1
  190. package/dist/components/text-link/TextLink.js +1 -1
  191. package/dist/components/time-picker/TimePicker.js +1 -1
  192. package/dist/components/timeline-chart/TimelineChart.d.ts +1 -1
  193. package/dist/components/timeline-chart/TimelineChart.js +1 -1
  194. package/dist/components/toast/Toast.d.ts +1 -1
  195. package/dist/components/toast/Toast.js +1 -1
  196. package/dist/components/toggle/Toggle.js +1 -1
  197. package/dist/components/toggle-group/ToggleGroup.js +1 -1
  198. package/dist/components/toolbar/Toolbar.js +1 -1
  199. package/dist/components/tooltip/Tooltip.d.ts +1 -1
  200. package/dist/components/tooltip/Tooltip.js +1 -1
  201. package/dist/components/tour/Tour.d.ts +1 -1
  202. package/dist/components/tour/Tour.js +1 -1
  203. package/dist/components/transfer/Transfer.js +1 -1
  204. package/dist/components/tree-select/TreeSelect.d.ts +88 -0
  205. package/dist/components/tree-select/TreeSelect.js +1 -0
  206. package/dist/components/tree-select/index.d.ts +2 -0
  207. package/dist/components/tree-select/index.js +1 -0
  208. package/dist/components/tree-view/TreeView.js +1 -1
  209. package/dist/components/visually-hidden/VisuallyHidden.d.ts +37 -0
  210. package/dist/components/visually-hidden/VisuallyHidden.js +1 -0
  211. package/dist/components/visually-hidden/index.d.ts +2 -0
  212. package/dist/components/visually-hidden/index.js +1 -0
  213. package/dist/components/window-pane/WindowPane.js +1 -1
  214. package/dist/hooks/index.d.ts +10 -0
  215. package/dist/hooks/index.js +1 -0
  216. package/dist/hooks/useDisclosure.d.ts +21 -0
  217. package/dist/hooks/useDisclosure.js +1 -0
  218. package/dist/hooks/useElementSize.d.ts +23 -0
  219. package/dist/hooks/useElementSize.js +1 -0
  220. package/dist/hooks/useMediaQuery.d.ts +61 -0
  221. package/dist/hooks/useMediaQuery.js +1 -0
  222. package/dist/hooks/useOnScreen.d.ts +24 -0
  223. package/dist/hooks/useOnScreen.js +1 -0
  224. package/dist/hooks/useShortcut.d.ts +34 -0
  225. package/dist/hooks/useShortcut.js +1 -0
  226. package/dist/index.d.ts +19 -1
  227. package/dist/index.js +1 -1
  228. package/dist/internal/animate.d.ts +65 -2
  229. package/dist/internal/animate.js +1 -1
  230. package/dist/internal/calendar.d.ts +31 -5
  231. package/dist/internal/calendar.js +1 -1
  232. package/dist/internal/chart-frame.d.ts +32 -0
  233. package/dist/internal/chart-frame.js +1 -1
  234. package/dist/internal/chart-line.js +1 -1
  235. package/dist/internal/chart.d.ts +16 -0
  236. package/dist/internal/chart.js +1 -1
  237. package/dist/internal/csv.d.ts +40 -0
  238. package/dist/internal/csv.js +1 -0
  239. package/dist/internal/date.d.ts +39 -1
  240. package/dist/internal/date.js +1 -1
  241. package/dist/internal/defaults.d.ts +46 -0
  242. package/dist/internal/defaults.js +1 -0
  243. package/dist/internal/grid.d.ts +13 -27
  244. package/dist/internal/grid.js +1 -1
  245. package/dist/internal/i18n.d.ts +43 -0
  246. package/dist/internal/i18n.js +1 -1
  247. package/dist/internal/keys.d.ts +92 -0
  248. package/dist/internal/keys.js +1 -0
  249. package/dist/internal/media.d.ts +34 -0
  250. package/dist/internal/media.js +1 -1
  251. package/dist/internal/page-layout.d.ts +18 -9
  252. package/dist/internal/page-layout.js +1 -1
  253. package/dist/internal/picker.d.ts +7 -1
  254. package/dist/internal/picker.js +1 -1
  255. package/dist/internal/responsive.d.ts +97 -0
  256. package/dist/internal/responsive.js +1 -0
  257. package/dist/internal/styles.d.ts +68 -0
  258. package/dist/internal/styles.js +1 -1
  259. package/dist/internal/text.d.ts +42 -0
  260. package/dist/internal/text.js +1 -0
  261. package/dist/locales/ar.js +1 -1
  262. package/dist/locales/de.js +1 -1
  263. package/dist/locales/es.js +1 -1
  264. package/dist/locales/fr.js +1 -1
  265. package/dist/locales/hi.js +1 -1
  266. package/dist/locales/id.js +1 -1
  267. package/dist/locales/it.js +1 -1
  268. package/dist/locales/ja.js +1 -1
  269. package/dist/locales/ko.js +1 -1
  270. package/dist/locales/nl.js +1 -1
  271. package/dist/locales/pl.js +1 -1
  272. package/dist/locales/pt.js +1 -1
  273. package/dist/locales/ru.js +1 -1
  274. package/dist/locales/th.js +1 -1
  275. package/dist/locales/tr.js +1 -1
  276. package/dist/locales/vi.js +1 -1
  277. package/dist/locales/zh-hans.js +1 -1
  278. package/dist/locales/zh-hant.js +1 -1
  279. package/dist/styles.css +1 -1
  280. package/dist/tailwind.css +280 -24
  281. package/dist/types.d.ts +153 -6
  282. package/package.json +23 -17
  283. package/dist/components/avatar-group/AvatarGroup.d.ts +0 -47
  284. package/dist/components/avatar-group/AvatarGroup.js +0 -1
  285. package/dist/components/avatar-group/index.d.ts +0 -2
  286. package/dist/components/avatar-group/index.js +0 -1
  287. package/dist/internal/avatar-group.d.ts +0 -22
  288. package/dist/internal/avatar-group.js +0 -1
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Select as l}from"@base-ui/react/select";import{Field as n}from"@base-ui/react/field";import{CheckIcon as r,ChevronIcon as i}from"../../internal/icons.js";import{WidthSizer as s}from"../../internal/sizer.js";import{controlHeightClasses as o,controlTextLeadingClasses as c,cx as d,disabledClasses as m,fieldReadOnlyClasses as u,fieldRestClasses as h,focusWithinRingClasses as f,gapClasses as p,hasContent as b,iconClasses as g,metaTextClasses as x,paddingXClasses as v,radiusClasses as N,stackGapClasses as w,surfaceClasses as j,surfaceSlots as y,transitionClasses as I}from"../../internal/styles.js";const S=["group relative flex w-full cursor-pointer items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",I,"focus-within:[transition-duration:0ms]",f,g].join(" "),V=[j,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","min-w-[var(--anchor-width)] border bg-(--n-panel-press) p-1","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]"].join(" "),z=["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--neba-radius-xs) py-1.5 pe-2 ps-7",I,"data-[highlighted]:bg-(--n-soft-hover) data-[highlighted]:text-(--n-accent)","data-[selected]:text-(--n-accent) data-[selected]:font-medium","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]"].join(" ");export const Select=/*@__PURE__*/t.forwardRef(function({variant:f="outline",size:g="md",color:j="primary",density:I="default",elevation:k=0,items:O,value:P,defaultValue:R,onValueChange:T,placeholder:q,label:C,description:M,error:W,invalid:_,startIcon:D,fullWidth:E=!1,disabled:L=!1,readOnly:$=!1,required:A=!1,name:B,id:F,className:G,classNames:H,style:J,...K},Q){const U=null!=W&&!1!==W&&""!==W,X=_??U,Y=X?"danger":j,Z=t.useMemo(()=>O.map(e=>({label:e.label??String(e.value),value:e.value})),[O]),ee=t.useMemo(()=>[...O.map(e=>e.label??String(e.value)),...b(q)?[q]:[]],[O,q]);return a(n.Root,{disabled:L,invalid:X,className:d("flex-col align-top",w[g],E?"flex w-full":"inline-flex",G??""),style:{...y(Y,k),...J},...K,children:[C?e(n.Label,{className:d(x[g],"font-medium",L?"text-(--neba-disabled-fg)":"text-(--neba-fg)",H?.label),children:C}):null,a(l.Root,{id:F,name:B,items:Z,value:P,defaultValue:R,onValueChange:e=>T?.(e),disabled:L,readOnly:$,required:A,children:[a(l.Trigger,{ref:Q,className:d(S,o[g],c[g],N[g],p[g],v[I][g],L?m[f]:$?`${u[f]} cursor-default`:h[f],H?.control),children:[D?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:D}):null,a("span",{className:"flex min-w-0 flex-1 flex-col",children:[e(l.Value,{className:["w-full truncate text-start","data-[placeholder]:text-(--neba-muted-fg)"].join(" "),placeholder:q}),e(s,{samples:ee})]}),e(l.Icon,{className:["flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[popup-open]:rotate-180"].join(" "),children:e(i,{})})]}),e(l.Portal,{children:e(l.Positioner,{className:"neba-portal z-50 [outline:none]",sideOffset:6,alignItemWithTrigger:!1,children:e(l.Popup,{className:d(V,N[g],c[g],H?.popup),style:y(Y,3),children:O.map(t=>a(l.Item,{value:t.value,disabled:t.disabled,className:d(z,H?.item),children:[e(l.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(r,{})}),e(l.ItemText,{className:"truncate",children:t.label??String(t.value)})]},String(t.value)))})})})]}),M?e(n.Description,{className:d(x[g],"text-(--neba-muted-fg)",H?.description),children:M}):null,e(n.Error,U?{match:!0,className:d(x[g],"text-(--n-accent)",H?.error),children:W}:{className:d(x[g],"text-(--n-accent)",H?.error)})]})});
1
+ "use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Select as l}from"@base-ui/react/select";import{Field as n}from"@base-ui/react/field";import{CheckIcon as r,ChevronIcon as i}from"../../internal/icons.js";import{WidthSizer as s}from"../../internal/sizer.js";import{controlHeightClasses as o,controlTextLeadingClasses as c,cx as d,disabledClasses as m,fieldReadOnlyClasses as u,fieldRestClasses as f,focusWithinRingClasses as h,gapClasses as p,hasContent as b,iconClasses as g,metaTextClasses as x,paddingXClasses as v,popupFadeClasses as N,radiusClasses as j,stackGapClasses as w,surfaceClasses as y,surfaceSlots as I,transitionClasses as S}from"../../internal/styles.js";import{useStyleDefaults as z}from"../../internal/defaults.js";const V=["group relative flex w-full cursor-pointer items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",S,"focus-within:[transition-duration:0ms]",h,g].join(" "),k=[y,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","min-w-[var(--anchor-width)] border bg-(--n-panel-press) p-1","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]",N].join(" "),O=["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--neba-radius-xs) py-1.5 pe-2 ps-7",S,"data-[highlighted]:bg-(--n-soft-hover) data-[highlighted]:text-(--n-accent)","data-[selected]:text-(--n-accent) data-[selected]:font-medium","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]"].join(" ");export const Select=/*@__PURE__*/t.forwardRef(function(h,g){const{variant:N="outline",size:y="md",color:S="primary",density:P="default",elevation:R=0,items:T,value:q,defaultValue:C,onValueChange:M,placeholder:W,label:_,description:D,error:E,invalid:L,startIcon:$,fullWidth:A=!1,disabled:B=!1,readOnly:F=!1,required:G=!1,name:H,id:J,className:K,classNames:Q,style:U,...X}=z(h,["size","density","variant"]),Y=null!=E&&!1!==E&&""!==E,Z=L??Y,ee=Z?"danger":S,ae=t.useMemo(()=>T.map(e=>({label:e.label??String(e.value),value:e.value})),[T]),te=t.useMemo(()=>[...T.map(e=>e.label??String(e.value)),...b(W)?[W]:[]],[T,W]);return a(n.Root,{disabled:B,invalid:Z,className:d("flex-col align-top",w[y],A?"flex w-full":"inline-flex",K??""),style:{...I(ee,R),...U},...X,children:[_?e(n.Label,{className:d(x[y],"font-medium",B?"text-(--neba-disabled-fg)":"text-(--neba-fg)",Q?.label),children:_}):null,a(l.Root,{id:J,name:H,items:ae,value:q,defaultValue:C,onValueChange:e=>M?.(e),disabled:B,readOnly:F,required:G,children:[a(l.Trigger,{ref:g,className:d(V,o[y],c[y],j[y],p[y],v[P][y],B?m[N]:F?`${u[N]} cursor-default`:f[N],Q?.control),children:[$?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:$}):null,a("span",{className:"flex min-w-0 flex-1 flex-col",children:[e(l.Value,{className:["w-full truncate text-start","data-[placeholder]:text-(--neba-muted-fg)"].join(" "),placeholder:W}),e(s,{samples:te})]}),e(l.Icon,{className:["flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[popup-open]:rotate-180"].join(" "),children:e(i,{})})]}),e(l.Portal,{children:e(l.Positioner,{className:"neba-portal z-50 [outline:none]",sideOffset:6,alignItemWithTrigger:!1,children:e(l.Popup,{className:d(k,j[y],c[y],Q?.popup),style:I(ee,3),children:T.map(t=>a(l.Item,{value:t.value,disabled:t.disabled,className:d(O,Q?.item),children:[e(l.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(r,{})}),e(l.ItemText,{className:"truncate",children:t.label??String(t.value)})]},String(t.value)))})})})]}),D?e(n.Description,{className:d(x[y],"text-(--neba-muted-fg)",Q?.description),children:D}):null,e(n.Error,Y?{match:!0,className:d(x[y],"text-(--n-accent)",Q?.error),children:E}:{className:d(x[y],"text-(--n-accent)",Q?.error)})]})});
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import { type ResolvedOS } from '../../internal/keys.js';
2
3
  import type { NebaElevation, NebaStyleProps } from '../../types.js';
3
4
  /**
4
5
  * Which keyboard the shortcut is being read on.
@@ -8,7 +9,7 @@ import type { NebaElevation, NebaStyleProps } from '../../types.js';
8
9
  * platform rather than the reader's own — a support page describing the Windows
9
10
  * build, a table comparing the two.
10
11
  */
11
- export type ShortcutOS = 'auto' | 'mac' | 'windows' | 'linux';
12
+ export type ShortcutOS = 'auto' | ResolvedOS;
12
13
  export interface ShortcutProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'span'>, 'color' | 'children'> {
13
14
  /**
14
15
  * The keys, innermost punctuation and all.
@@ -1 +1 @@
1
- "use client";import{jsx as n,Fragment as e,jsxs as a}from"react/jsx-runtime";import*as o from"react";import{controlHeightClasses as t,controlSlots as r,controlTextClasses as l,cx as s,paddingXClasses as m,radiusClasses as i,srOnlyClasses as c,surfaceClasses as d,transitionClasses as w}from"../../internal/styles.js";const u=n=>({symbol:n,name:n}),p={mod:{mac:{symbol:"⌘",name:"Command"},windows:u("Ctrl"),linux:u("Ctrl")},meta:{mac:{symbol:"⌘",name:"Command"},windows:u("Win"),linux:u("Super")},ctrl:{mac:{symbol:"⌃",name:"Control"},windows:u("Ctrl"),linux:u("Ctrl")},alt:{mac:{symbol:"⌥",name:"Option"},windows:u("Alt"),linux:u("Alt")},shift:{mac:{symbol:"⇧",name:"Shift"},windows:u("Shift"),linux:u("Shift")},enter:{mac:{symbol:"↩",name:"Enter"},windows:u("Enter"),linux:u("Enter")},tab:{mac:{symbol:"⇥",name:"Tab"},windows:u("Tab"),linux:u("Tab")},escape:{mac:{symbol:"⎋",name:"Escape"},windows:u("Esc"),linux:u("Esc")},backspace:{mac:{symbol:"⌫",name:"Backspace"},windows:u("Backspace"),linux:u("Backspace")},delete:{mac:{symbol:"⌦",name:"Delete"},windows:u("Del"),linux:u("Del")},capslock:{mac:{symbol:"⇪",name:"Caps Lock"},windows:u("Caps Lock"),linux:u("Caps Lock")}},b={cmdorctrl:"mod",commandorcontrol:"mod",cmd:"meta",command:"meta",super:"meta",win:"meta",windows:"meta",control:"ctrl",option:"alt",opt:"alt",return:"enter",esc:"escape",del:"delete",caps:"capslock"},f={up:{symbol:"↑",name:"Arrow up"},down:{symbol:"↓",name:"Arrow down"},left:{symbol:"←",name:"Arrow left"},right:{symbol:"→",name:"Arrow right"},arrowup:{symbol:"↑",name:"Arrow up"},arrowdown:{symbol:"↓",name:"Arrow down"},arrowleft:{symbol:"←",name:"Arrow left"},arrowright:{symbol:"→",name:"Arrow right"}};let y=null;function x(){return y??=function(){if("undefined"==typeof navigator)return"windows";const n=navigator.userAgentData,e=`${n?.platform??""} ${navigator.platform??""} ${navigator.userAgent??""}`;return/mac|iphone|ipad|ipod/i.test(e)?"mac":/win/i.test(e)?"windows":"linux"}(),y}function g(){return()=>{}}function h(){return"windows"}const v={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},A={solid:[d,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[d,"border text-(--n-accent) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--n-accent) bg-(--n-soft)"},k={xs:"min-w-5.5",sm:"min-w-6.5",md:"min-w-8",lg:"min-w-10",xl:"min-w-12"};export const Shortcut=/*@__PURE__*/o.forwardRef(function({variant:d="outline",size:y="md",color:C="secondary",density:j="compact",elevation:E=0,keys:S,os:B="auto",separator:N,className:D,style:L,...T},$){const F=o.useSyncExternalStore(g,x,h),z="auto"===B?F:B,O=v[y],R=function(n){return Array.isArray(n)?n.map(n=>n.trim()).filter(Boolean):n.split("+").map(n=>n.trim()).filter(Boolean)}(S),U=R.map(n=>function(n,e){const a=n.toLowerCase().replace(/[\s_-]/g,""),o=b[a]??a,t=f[o];if(t)return t;const r=p[o];return r?r[e]:u(1===n.length?n.toUpperCase():n)}(n,z)),W=void 0===N?"mac"===z?null:"+":N,_=["inline-flex shrink-0 items-center justify-center","font-mono font-medium leading-none whitespace-nowrap tabular-nums",t[O],l[O],k[O],m[j][O],i[O],A[d],w].join(" ");return n("span",{ref:$,className:s("inline-flex max-w-full items-center gap-1 align-middle",D??""),style:{...r(C,E,d),...L},...T,children:U.map((t,r)=>a(o.Fragment,{children:[r>0&&null!==W?n("span",{"aria-hidden":"true",className:"text-(--neba-muted-fg)",children:W}):null,n("kbd",{className:_,children:t.symbol===t.name?t.symbol:a(e,{children:[n("span",{"aria-hidden":"true",children:t.symbol}),n("span",{className:c,children:t.name})]})})]},r))})});
1
+ "use client";import{jsx as n,Fragment as e,jsxs as a}from"react/jsx-runtime";import*as s from"react";import{controlHeightClasses as o,controlSlots as l,controlTextClasses as t,cx as r,paddingXClasses as m,radiusClasses as i,srOnlyClasses as c,surfaceClasses as d,transitionClasses as w}from"../../internal/styles.js";import{canonicalKey as u,readOS as b,tokenize as p}from"../../internal/keys.js";import{useStyleDefaults as x}from"../../internal/defaults.js";const f=n=>({symbol:n,name:n}),y={mod:{mac:{symbol:"⌘",name:"Command"},windows:f("Ctrl"),linux:f("Ctrl")},meta:{mac:{symbol:"⌘",name:"Command"},windows:f("Win"),linux:f("Super")},ctrl:{mac:{symbol:"⌃",name:"Control"},windows:f("Ctrl"),linux:f("Ctrl")},alt:{mac:{symbol:"⌥",name:"Option"},windows:f("Alt"),linux:f("Alt")},shift:{mac:{symbol:"⇧",name:"Shift"},windows:f("Shift"),linux:f("Shift")},enter:{mac:{symbol:"↩",name:"Enter"},windows:f("Enter"),linux:f("Enter")},tab:{mac:{symbol:"⇥",name:"Tab"},windows:f("Tab"),linux:f("Tab")},escape:{mac:{symbol:"⎋",name:"Escape"},windows:f("Esc"),linux:f("Esc")},backspace:{mac:{symbol:"⌫",name:"Backspace"},windows:f("Backspace"),linux:f("Backspace")},delete:{mac:{symbol:"⌦",name:"Delete"},windows:f("Del"),linux:f("Del")},capslock:{mac:{symbol:"⇪",name:"Caps Lock"},windows:f("Caps Lock"),linux:f("Caps Lock")}},h={arrowup:{symbol:"↑",name:"Arrow up"},arrowdown:{symbol:"↓",name:"Arrow down"},arrowleft:{symbol:"←",name:"Arrow left"},arrowright:{symbol:"→",name:"Arrow right"}};function g(){return()=>{}}function k(){return"windows"}const v={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},C={solid:[d,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[d,"border text-(--n-accent) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--n-accent) bg-(--n-soft)"},j={xs:"min-w-5.5",sm:"min-w-6.5",md:"min-w-8",lg:"min-w-10",xl:"min-w-12"};export const Shortcut=/*@__PURE__*/s.forwardRef(function(d,E){const{variant:S="outline",size:A="md",color:N="secondary",density:B="compact",elevation:D=0,keys:L,os:T="auto",separator:z,className:F,style:O,...R}=x(d,["size","density","variant"]),U=s.useSyncExternalStore(g,b,k),W="auto"===T?U:T,q=v[A],G=p(L).map(n=>function(n,e){const a=u(n),s=h[a];if(s)return s;const o=y[a];return o?o[e]:f(1===n.length?n.toUpperCase():n)}(n,W)),H=void 0===z?"mac"===W?null:"+":z,I=["inline-flex shrink-0 items-center justify-center","font-mono font-medium leading-none whitespace-nowrap tabular-nums",o[q],t[q],j[q],m[B][q],i[q],C[S],w].join(" ");return n("span",{ref:E,className:r("inline-flex max-w-full items-center gap-1 align-middle",F??""),style:{...l(N,D,S),...O},...R,children:G.map((o,l)=>a(s.Fragment,{children:[l>0&&null!==H?n("span",{"aria-hidden":"true",className:"text-(--neba-muted-fg)",children:H}):null,n("kbd",{className:I,children:o.symbol===o.name?o.symbol:a(e,{children:[n("span",{"aria-hidden":"true",children:o.symbol}),n("span",{className:c,children:o.name})]})})]},l))})});
@@ -0,0 +1,60 @@
1
+ import * as React from 'react';
2
+ import { useRender } from '@base-ui/react/use-render';
3
+ import type { NebaBreakpoint } from '../../types.js';
4
+ export interface ShowProps extends React.ComponentPropsWithoutRef<'div'> {
5
+ /**
6
+ * The narrowest width the children are drawn at, inclusive. Below it they
7
+ * are not drawn.
8
+ *
9
+ * `above="md"` is the desktop half of a pair; `xs` is a floor of zero and so
10
+ * means "always", which is what makes it safe to pass a value straight
11
+ * through from a variable.
12
+ */
13
+ above?: NebaBreakpoint;
14
+ /**
15
+ * The width at which the children stop being drawn, exclusive — so
16
+ * `below="md"` is drawn under 48rem and not at it, and pairs exactly with
17
+ * `above="md"` to cover every width once.
18
+ *
19
+ * `below="xs"` draws nothing at all: there is no width under a floor of zero.
20
+ */
21
+ below?: NebaBreakpoint;
22
+ /**
23
+ * Renders something other than a `<div>`: `render={<li />}`,
24
+ * `render={<td />}`. Base UI's own escape hatch, and the way to put this
25
+ * somewhere a `<div>` is not allowed.
26
+ */
27
+ render?: useRender.RenderProp;
28
+ children?: React.ReactNode;
29
+ }
30
+ /**
31
+ * Its children at some widths and not at others.
32
+ *
33
+ * `above` and `below` are a floor and a ceiling on the same ladder every other
34
+ * breakpoint in the library uses, and they compose: `above="sm" below="lg"` is
35
+ * drawn from 40rem up to but not including 64rem. Either alone is the common
36
+ * case — a pair of them, with the same breakpoint in both, is the two halves of
37
+ * one decision and covers every width exactly once.
38
+ *
39
+ * **The children are always rendered.** What changes is `display`, which is
40
+ * deliberate on both sides of it: the answer is right in the first frame the
41
+ * browser paints, so nothing flashes and nothing has to wait for JavaScript to
42
+ * find out how wide the window is, and it is the same answer on a server, where
43
+ * there is no window to ask. It also costs nothing to change — a resize repaints
44
+ * rather than re-rendering React.
45
+ *
46
+ * That is also its limit. A component that must not *run* below a width — one
47
+ * that fetches, or that mounts a map — is a decision CSS cannot make, and
48
+ * `useBreakpoint` is what makes it:
49
+ *
50
+ * ```tsx
51
+ * {useBreakpoint('md') && <Map />}
52
+ * ```
53
+ *
54
+ * The wrapper is `display: contents`, so it adds no box: a `Show` inside a
55
+ * `GridContainer` leaves its children as grid items, and one inside a flex row
56
+ * leaves them as flex items. Nothing it is given to style — padding, a
57
+ * background — would have anywhere to land, so put those on an element inside
58
+ * it or name the element with `render`.
59
+ */
60
+ export declare const Show: React.ForwardRefExoticComponent<ShowProps & React.RefAttributes<HTMLDivElement>>;
@@ -0,0 +1 @@
1
+ "use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{hiddenBelowClasses as o,hiddenFromClasses as n}from"../../internal/responsive.js";import{cx as s}from"../../internal/styles.js";export const Show=/*@__PURE__*/e.forwardRef(function({above:e,below:t,render:a,className:i,children:c,...m},l){const f=s("contents",e?o[e]:"",t?n[t]:"",i??"");return r({render:a,ref:l,props:{className:f,children:c,...m}})});
@@ -0,0 +1,2 @@
1
+ export { Show } from './Show.js';
2
+ export type { ShowProps } from './Show.js';
@@ -0,0 +1 @@
1
+ export{Show}from"./Show.js";
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{boxPaddingXClasses as n,boxPaddingYClasses as o}from"../box/Box.js";import{Drawer as a}from"../drawer/Drawer.js";import{beginPointerDrag as i}from"../../internal/drag.js";import{layoutMessages as l,useMessages as s}from"../../internal/i18n.js";import{drawerSide as d,expandedOnlyClasses as c,PageLayoutContext as u,SidebarSideContext as p,useCollapsed as f}from"../../internal/page-layout.js";import{cx as m,surfaceClasses as b,surfaceSlots as v,toLength as g,toPixels as h,transitionClasses as x}from"../../internal/styles.js";const y={xs:"11rem",sm:"13rem",md:"16rem",lg:"18rem",xl:"21rem"},w={solid:[b,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[b,"text-(--neba-fg) bg-(--n-panel)","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"};export const Sidebar=/*@__PURE__*/r.forwardRef(function({side:b,width:j,minWidth:C=160,maxWidth:R=480,resizable:z=!1,onResize:k,onResizeEnd:S,collapseBelow:B,open:N,defaultOpen:O=!1,onOpenChange:D,sticky:M=!0,title:A,variant:E="outline",size:I="md",color:T="primary",density:W="default",elevation:L=0,divider:P=!0,padded:X=!0,label:_,locale:K,className:$,style:q,children:F,...G},H){const J=r.useContext(u),Q=r.useContext(p),U=b??Q??"start",V=K??J.locale,Y=s(l,V),Z=B??(J.present?J.collapseBelow:"none"),ee=f(Z),[te,re]=r.useState(O),ne=void 0!==N,oe=ne?N:J.present?J.open[U]:te,ae=e=>{ne||(J.present?J.setOpen(U,e):re(e)),D?.(e)},ie=g(j)??y[I],le=r.useRef(null),se=r.useCallback(e=>{le.current=e,"function"==typeof H?H(e):H&&(H.current=e)},[H]),de=r.useRef(null);r.useEffect(()=>()=>de.current?.(),[]);const ce=e=>{const t=le.current;if(!t)return e;const r=(e,r)=>null==e?r:"number"==typeof e?e:h(e,{percentOf:"undefined"==typeof window?0:window.innerWidth,relativeTo:t})??r,n=Math.min(r(R,480),Math.max(r(C,160),Math.round(e)));return t.style.setProperty("--n-sidebar-w",`${n}px`),n},ue=e("div",{className:m("min-h-0 flex-1 overflow-y-auto overscroll-contain",X?m(n[W][I],o[W][I]):""),children:F});return ee?e(a,{side:d(U),mode:"overlay",open:oe,onOpenChange:ae,title:A,size:I,color:T,density:W,locale:V,closeLabel:Y.closeSidebar,extent:void 0===j?void 0:ie,"aria-label":A?void 0:_??Y.sidebar,className:$,style:q,children:F}):t("aside",{ref:se,"aria-label":_??Y.sidebar,className:m("relative flex min-w-0 shrink-0 flex-col","w-(--n-sidebar-w)",w[E],P?m("start"===U?"border-e":"border-s","[border-color:var(--n-line)]"):"","content"===J.scroll?"h-full":M?m("self-start","sticky [top:var(--n-layout-header,0px)]","[height:calc(100dvh-var(--n-layout-header,0px)-var(--n-layout-footer,0px))]"):"",c[Z],x,$),style:{...v(T,L),"--n-sidebar-w":ie,...q},...G,children:[ue,z?e("div",{role:"separator","aria-orientation":"vertical","aria-label":Y.resizeSidebar,tabIndex:0,className:m("absolute inset-y-0 z-1 w-2 cursor-col-resize","start"===U?"end-0 -me-1":"start-0 -ms-1","bg-transparent hover:bg-(--n-soft) data-[dragging]:bg-(--n-soft)",x,"[outline:none] focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-0"),onPointerDown:e=>{const t=le.current;if(!t||0!==e.button)return;const r=e.currentTarget,n=e.clientX,o=t.getBoundingClientRect().width,a="rtl"===getComputedStyle(t).direction,l="start"===U===a?-1:1;let s=o;de.current=i({target:r,pointerId:e.pointerId,onMove:e=>{s=ce(o+(e.clientX-n)*l),k?.(s)},onEnd:()=>{de.current=null,S?.(s)}})},onKeyDown:e=>{if("ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;e.preventDefault();const t="rtl"===getComputedStyle(e.currentTarget).direction,r="start"===U===t?-1:1;(e=>{const t=le.current;if(!t)return;const r=ce(t.getBoundingClientRect().width+e);k?.(r),S?.(r)})(("ArrowRight"===e.key?16:-16)*r)}}):null]})});
1
+ "use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{boxPaddingXClasses as n,boxPaddingYClasses as o}from"../box/Box.js";import{Drawer as a}from"../drawer/Drawer.js";import{beginPointerDrag as i}from"../../internal/drag.js";import{layoutMessages as l,useMessages as s}from"../../internal/i18n.js";import{drawerSide as d,expandedOnlyClasses as c,PageLayoutContext as u,SidebarSideContext as p,useCollapsed as f}from"../../internal/page-layout.js";import{cx as m,surfaceClasses as b,surfaceSlots as v,toLength as g,toPixels as h,transitionClasses as x}from"../../internal/styles.js";import{useStyleDefaults as y}from"../../internal/defaults.js";const w={xs:"11rem",sm:"13rem",md:"16rem",lg:"18rem",xl:"21rem"},j={solid:[b,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[b,"text-(--neba-fg) bg-(--n-panel)","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"};export const Sidebar=/*@__PURE__*/r.forwardRef(function(b,z){const{side:C,width:R,minWidth:k=160,maxWidth:S=480,resizable:B=!1,onResize:N,onResizeEnd:O,collapseBelow:D,open:M,defaultOpen:A=!1,onOpenChange:E,sticky:I=!0,title:T,variant:W="outline",size:L="md",color:P="primary",density:X="default",elevation:_=0,divider:K=!0,padded:$=!0,label:q,locale:F,className:G,style:H,children:J,...Q}=y(b,["size","density","variant","locale"]),U=r.useContext(u),V=r.useContext(p),Y=C??V??"start",Z=F??U.locale,ee=s(l,Z),te=D??(U.present?U.collapseBelow:"none"),re=f(te),[ne,oe]=r.useState(A),ae=void 0!==M,ie=ae?M:U.present?U.open[Y]:ne,le=e=>{ae||(U.present?U.setOpen(Y,e):oe(e)),E?.(e)},se=g(R)??w[L],de=r.useRef(null),ce=r.useCallback(e=>{de.current=e,"function"==typeof z?z(e):z&&(z.current=e)},[z]),ue=r.useRef(null);r.useEffect(()=>()=>ue.current?.(),[]);const pe=e=>{const t=de.current;if(!t)return e;const r=(e,r)=>null==e?r:"number"==typeof e?e:h(e,{percentOf:"undefined"==typeof window?0:window.innerWidth,relativeTo:t})??r,n=Math.min(r(S,480),Math.max(r(k,160),Math.round(e)));return t.style.setProperty("--n-sidebar-w",`${n}px`),n},fe=e("div",{className:m("min-h-0 flex-1 overflow-y-auto overscroll-contain",$?m(n[X][L],o[X][L]):""),children:J});return re?e(a,{side:d(Y),mode:"overlay",open:ie,onOpenChange:le,title:T,size:L,color:P,density:X,locale:Z,closeLabel:ee.closeSidebar,extent:void 0===R?void 0:se,"aria-label":T?void 0:q??ee.sidebar,className:G,style:H,...Q,children:J}):t("aside",{ref:ce,"aria-label":q??ee.sidebar,className:m("relative flex min-w-0 shrink-0 flex-col","w-(--n-sidebar-w)",j[W],K?m("start"===Y?"border-e":"border-s","[border-color:var(--n-line)]"):"","content"===U.scroll?"h-full":I?m("self-start","sticky [top:var(--n-layout-header,0px)]","[height:calc(100dvh-var(--n-layout-header,0px)-var(--n-layout-footer,0px))]"):"",c[te],x,G),style:{...v(P,_),"--n-sidebar-w":se,...H},...Q,children:[fe,B?e("div",{role:"separator","aria-orientation":"vertical","aria-label":ee.resizeSidebar,tabIndex:0,className:m("absolute inset-y-0 z-1 w-2 cursor-col-resize","start"===Y?"end-0 -me-1":"start-0 -ms-1","bg-transparent hover:bg-(--n-soft) data-[dragging]:bg-(--n-soft)",x,"[outline:none] focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-0"),onPointerDown:e=>{const t=de.current;if(!t||0!==e.button)return;const r=e.currentTarget,n=e.clientX,o=t.getBoundingClientRect().width,a="rtl"===getComputedStyle(t).direction,l="start"===Y===a?-1:1;let s=o;ue.current=i({target:r,pointerId:e.pointerId,onMove:e=>{s=pe(o+(e.clientX-n)*l),N?.(s)},onEnd:()=>{ue.current=null,O?.(s)}})},onKeyDown:e=>{if("ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;e.preventDefault();const t="rtl"===getComputedStyle(e.currentTarget).direction,r="start"===Y===t?-1:1;(e=>{const t=de.current;if(!t)return;const r=pe(t.getBoundingClientRect().width+e);N?.(r),O?.(r)})(("ArrowRight"===e.key?16:-16)*r)}}):null]})});
@@ -1 +1 @@
1
- "use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{IconButton as o}from"../icon-button/IconButton.js";import{layoutMessages as t,useMessages as n}from"../../internal/i18n.js";import{collapsedOnlyClasses as a,PageLayoutContext as i}from"../../internal/page-layout.js";import{cx as l}from"../../internal/styles.js";function s(){return e("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2","aria-hidden":"true",children:e("path",{d:"M4 7h16M4 12h16M4 17h16",strokeLinecap:"round"})})}export const SidebarTrigger=/*@__PURE__*/r.forwardRef(function({side:c="start",collapseBelow:p,icon:m,label:u,locale:d,variant:f="text",className:h,onClick:x,...b},j){const k=r.useContext(i),g=d??k.locale,v=n(t,g);if(!k.present)return null;const w=p??k.collapseBelow,B=k.open[c];return e(o,{ref:j,variant:f,icon:m??e(s,{}),label:u??(B?v.closeSidebar:v.openSidebar),"aria-expanded":B,className:l(a[w],h),onClick:e=>{k.setOpen(c,!B),x?.(e)},...b})});
1
+ "use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{IconButton as o}from"../icon-button/IconButton.js";import{layoutMessages as t,useMessages as n}from"../../internal/i18n.js";import{collapsedOnlyClasses as a,PageLayoutContext as i}from"../../internal/page-layout.js";import{cx as l}from"../../internal/styles.js";import{useStyleDefaults as s}from"../../internal/defaults.js";function c(){return e("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2","aria-hidden":"true",children:e("path",{d:"M4 7h16M4 12h16M4 17h16",strokeLinecap:"round"})})}export const SidebarTrigger=/*@__PURE__*/r.forwardRef(function(p,m){const{side:u="start",collapseBelow:f,icon:d,label:h,locale:j,variant:x="text",className:b,onClick:k,...v}=s(p,["variant","locale"]),g=r.useContext(i),w=j??g.locale,B=n(t,w);if(!g.present)return null;const C=f??g.collapseBelow,M=g.open[u];return e(o,{ref:m,variant:x,icon:d??e(c,{}),label:h??(M?B.closeSidebar:B.openSidebar),"aria-expanded":M,className:l(a[C],b),onClick:e=>{g.setOpen(u,!M),k?.(e)},...v})});
@@ -1 +1 @@
1
- "use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useRender as l}from"@base-ui/react/use-render";import{controlHeightClasses as d,controlSquareClasses as n,cx as s,surfaceSlots as a}from"../../internal/styles.js";const o={xs:"h-[0.6875rem]",sm:"h-[0.75rem]",md:"h-[0.8125rem]",lg:"h-[0.9375rem]",xl:"h-[1.0625rem]"},m={xs:"gap-[0.3125rem]",sm:"gap-[0.375rem]",md:"gap-[0.5625rem]",lg:"gap-[0.5625rem]",xl:"gap-[0.6875rem]"},i={xs:"rounded-[0.3125rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"},t={xs:"h-12",sm:"h-16",md:"h-20",lg:"h-28",xl:"h-36"},u={xs:"rounded-(--neba-radius-xs)",sm:"rounded-(--neba-radius-sm)",md:"rounded-(--neba-radius-md)",lg:"rounded-(--neba-radius-lg)",xl:"rounded-(--neba-radius-xl)"},h="relative overflow-hidden bg-(--n-soft-hover)";function f(e){if(void 0!==e)return"number"==typeof e?`${e}px`:e}export const Skeleton=/*@__PURE__*/r.forwardRef(function({shape:r="line",lines:c=1,size:x="md",color:g="secondary",width:p,height:b,animated:w=!0,label:y,render:$,className:v,style:j,...k},N){const z=w?"neba-skeleton":"",A="circle"===r?`rounded-full ${d[x]} ${n[x]} shrink-0`:"rect"===r?`w-full ${u[x]} ${void 0===b?t[x]:""}`:`w-full ${i[x]} ${o[x]}`,B=y?{role:"status","aria-busy":!0,"aria-label":y}:{"aria-hidden":!0},R="line"===r&&c>1;return l({render:$,ref:N,props:{className:(R?["flex w-full flex-col",m[x],v??""]:[h,z,A,v??""]).filter(Boolean).join(" "),style:{...a(g,0),width:f(p),height:f(b),...j},...B,...R?{children:Array.from({length:c},(r,l)=>e("div",{className:s(h,z,i[x],o[x],l===c-1?"w-3/5":"w-full")},l))}:null,...k}})});
1
+ "use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useRender as l}from"@base-ui/react/use-render";import{controlHeightClasses as n,controlSquareClasses as s,cx as d,surfaceSlots as a}from"../../internal/styles.js";import{useStyleDefaults as o}from"../../internal/defaults.js";const m={xs:"h-[0.6875rem]",sm:"h-[0.75rem]",md:"h-[0.8125rem]",lg:"h-[0.9375rem]",xl:"h-[1.0625rem]"},i={xs:"gap-[0.3125rem]",sm:"gap-[0.375rem]",md:"gap-[0.5625rem]",lg:"gap-[0.5625rem]",xl:"gap-[0.6875rem]"},t={xs:"rounded-[0.3125rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"},u={xs:"h-12",sm:"h-16",md:"h-20",lg:"h-28",xl:"h-36"},f={xs:"rounded-(--neba-radius-xs)",sm:"rounded-(--neba-radius-sm)",md:"rounded-(--neba-radius-md)",lg:"rounded-(--neba-radius-lg)",xl:"rounded-(--neba-radius-xl)"},h="relative overflow-hidden bg-(--n-soft-hover)";function c(e){if(void 0!==e)return"number"==typeof e?`${e}px`:e}export const Skeleton=/*@__PURE__*/r.forwardRef(function(r,x){const{shape:p="line",lines:g=1,size:b="md",color:w="secondary",width:y,height:$,animated:v=!0,label:j,render:k,className:N,style:z,...A}=o(r,["size"]),B=v?"neba-skeleton":"",R="circle"===p?`rounded-full ${n[b]} ${s[b]} shrink-0`:"rect"===p?`w-full ${f[b]} ${void 0===$?u[b]:""}`:`w-full ${t[b]} ${m[b]}`,S=j?{role:"status","aria-busy":!0,"aria-label":j}:{"aria-hidden":!0},q="line"===p&&g>1;return l({render:k,ref:x,props:{className:(q?["flex w-full flex-col",i[b],N??""]:[h,B,R,N??""]).filter(Boolean).join(" "),style:{...a(w,0),width:c(y),height:c($),...z},...S,...q?{children:Array.from({length:g},(r,l)=>e("div",{className:d(h,B,t[b],m[b],l===g-1?"w-3/5":"w-full")},l))}:null,...A}})});
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{Slider as s}from"@base-ui/react/slider";import{cx as r,metaTextClasses as n,surfaceClasses as o,transitionClasses as t}from"../../internal/styles.js";const i={xs:"h-1",sm:"h-1.5",md:"h-1.5",lg:"h-2",xl:"h-2.5"},c={xs:"w-1",sm:"w-1.5",md:"w-1.5",lg:"w-2",xl:"w-2.5"},d={xs:"size-3",sm:"size-3.5",md:"size-4",lg:"size-5",xl:"size-6"},f={xs:"h-4",sm:"h-4.5",md:"h-5",lg:"h-6",xl:"h-7"},u={xs:"w-4",sm:"w-4.5",md:"w-5",lg:"w-6",xl:"w-7"},m="rounded-full bg-(--n-soft)",h=`rounded-full bg-(--n-fill) ${t}`,b=["rounded-full border bg-(--neba-surface)",o,"[border-color:var(--n-line-hover)]","[box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]","cursor-grab select-none active:cursor-grabbing",t,"hover:[box-shadow:var(--neba-shadow-2),0_0_0_4px_var(--n-soft)]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2","data-[dragging]:[box-shadow:var(--neba-shadow-1),0_0_0_6px_var(--n-soft-hover)]"].join(" ");export const Slider=/*@__PURE__*/a.forwardRef(function({size:a="md",color:o="primary",orientation:t="horizontal",label:x,description:v,showValue:g=!1,disabled:w=!1,className:p,style:$,..._},y){const N="vertical"===t,j={"--n-fill":`var(--neba-${o}-fill)`,"--n-accent":`var(--neba-${o}-accent)`,"--n-soft":`var(--neba-${o}-soft)`,"--n-soft-hover":`var(--neba-${o}-soft-hover)`,"--n-line-hover":`var(--neba-${o}-line-hover)`,"--n-ring":`var(--neba-${o}-ring)`},z=_.value??_.defaultValue,A=Array.isArray(z)?z.length:1;return l(s.Root,{ref:y,orientation:t,disabled:w,className:r("flex",N?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1.5",w?"[filter:saturate(0.25)] opacity-70 [&_*]:cursor-not-allowed":"",p??""),style:{...j,...$},..._,children:[x||g?l("div",{className:`flex w-full items-baseline gap-2 ${n[a]}`,children:[x?e(s.Label,{className:w?"font-medium text-(--neba-disabled-fg)":"font-medium text-(--neba-fg)",children:x}):null,g?e(s.Value,{className:"ms-auto tabular-nums text-(--neba-muted-fg)",children:"function"==typeof g?g:null}):null]}):null,e(s.Control,{className:["flex touch-none select-none items-center justify-center",N?`${u[a]} h-40 flex-col`:`w-full ${f[a]}`].join(" "),children:l(s.Track,{className:[m,N?`${c[a]} h-full`:`${i[a]} w-full`].join(" "),children:[e(s.Indicator,{className:h}),Array.from({length:A},(l,r)=>e(s.Thumb,{index:r,className:`${b} ${d[a]}`},r))]})}),v?e("div",{className:`${n[a]} text-(--neba-muted-fg)`,children:v}):null]})});
1
+ "use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{Slider as s}from"@base-ui/react/slider";import{cx as r,metaTextClasses as n,surfaceClasses as o,transitionClasses as t}from"../../internal/styles.js";import{useStyleDefaults as i}from"../../internal/defaults.js";const c={xs:"h-1",sm:"h-1.5",md:"h-1.5",lg:"h-2",xl:"h-2.5"},d={xs:"w-1",sm:"w-1.5",md:"w-1.5",lg:"w-2",xl:"w-2.5"},f={xs:"size-3",sm:"size-3.5",md:"size-4",lg:"size-5",xl:"size-6"},u={xs:"h-4",sm:"h-4.5",md:"h-5",lg:"h-6",xl:"h-7"},m={xs:"w-4",sm:"w-4.5",md:"w-5",lg:"w-6",xl:"w-7"},h="rounded-full bg-(--n-soft)",b=`rounded-full bg-(--n-fill) ${t}`,x=["rounded-full border bg-(--neba-surface)",o,"[border-color:var(--n-line-hover)]","[box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]","cursor-grab select-none active:cursor-grabbing",t,"hover:[box-shadow:var(--neba-shadow-2),0_0_0_4px_var(--n-soft)]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2","data-[dragging]:[box-shadow:var(--neba-shadow-1),0_0_0_6px_var(--n-soft-hover)]"].join(" ");export const Slider=/*@__PURE__*/a.forwardRef(function(a,o){const{size:t="md",color:v="primary",orientation:g="horizontal",label:w,description:p,showValue:$=!1,disabled:_=!1,className:y,style:N,...j}=i(a,["size"]),z="vertical"===g,A={"--n-fill":`var(--neba-${v}-fill)`,"--n-accent":`var(--neba-${v}-accent)`,"--n-soft":`var(--neba-${v}-soft)`,"--n-soft-hover":`var(--neba-${v}-soft-hover)`,"--n-line-hover":`var(--neba-${v}-line-hover)`,"--n-ring":`var(--neba-${v}-ring)`},V=j.value??j.defaultValue,R=Array.isArray(V)?V.length:1;return l(s.Root,{ref:o,orientation:g,disabled:_,className:r("flex",z?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1.5",_?"[filter:saturate(0.25)] opacity-70 [&_*]:cursor-not-allowed":"",y??""),style:{...A,...N},...j,children:[w||$?l("div",{className:`flex w-full items-baseline gap-2 ${n[t]}`,children:[w?e(s.Label,{className:_?"font-medium text-(--neba-disabled-fg)":"font-medium text-(--neba-fg)",children:w}):null,$?e(s.Value,{className:"ms-auto tabular-nums text-(--neba-muted-fg)",children:"function"==typeof $?$:null}):null]}):null,e(s.Control,{className:["flex touch-none select-none items-center justify-center",z?`${m[t]} h-40 flex-col`:`w-full ${u[t]}`].join(" "),children:l(s.Track,{className:[h,z?`${d[t]} h-full`:`${c[t]} w-full`].join(" "),children:[e(s.Indicator,{className:b}),Array.from({length:R},(l,a)=>e(s.Thumb,{index:a,className:`${x} ${f[t]}`},a))]})}),p?e("div",{className:`${n[t]} text-(--neba-muted-fg)`,children:p}):null]})});
@@ -1 +1 @@
1
- "use client";import{jsx as a,jsxs as e,Fragment as l}from"react/jsx-runtime";import*as t from"react";import{areaPath as r,barMaxThickness as n,barPath as i,barRadius as o,extentOf as s,lineWidths as h,markerRadii as m,markGap as c,resolveColor as u,sparklineHeights as d,toValue as p}from"../../internal/chart.js";import{useMeasuredWidth as f}from"../../internal/chart-frame.js";import{cx as x,srOnlyClasses as v}from"../../internal/styles.js";import{linePath as b}from"../../internal/chart.js";export const Sparkline=/*@__PURE__*/t.forwardRef(function({data:g,shape:M="line",curve:k="linear",size:y="md",color:j,endDot:w=!1,baseline:$,min:N,max:W,width:C,label:L,className:R,style:z,...B},D){const F=t.useRef(null),G=f(F),I=t.useId().replace(/:/g,""),S=t.useMemo(()=>g.map(p),[g]),q=d[y],A=h[y],E=m[y],H=s([S],!1),J=N??(H?Math.min(H.min,$??H.min):0),K=(W??(H?Math.max(H.max,$??H.max):1))-J||1,O="number"==typeof C?C:G,P=u(j??"var(--neba-chart-1)"),Q="bar"===M?0:A/2+(w?E:0),T=Q,U=Math.max(1,q-2*Q),V=a=>T+(1-(a-J)/K)*U,X=S.length>1?O/(S.length-1):O,Y=S.map((a,e)=>null===a.value?null:{x:e*X,y:V(a.value)}),Z=(()=>{for(let a=S.length-1;a>=0;a--)if(null!==S[a].value)return a;return-1})(),_=Math.min(n[y]/2,Math.max(1,O/Math.max(1,S.length)-c));return e("div",{ref:D,className:x("relative block",R??void 0),style:{width:C??"100%",height:q,...z},...B,children:[a("div",{ref:F,className:"absolute inset-0",children:O>0&&S.length>0?e("svg",{width:O,height:q,viewBox:`0 0 ${O} ${q}`,role:L?"img":"presentation","aria-label":L,"aria-hidden":!L||void 0,className:"block overflow-visible",children:["area"===M?e(l,{children:[a("defs",{children:e("linearGradient",{id:`${I}-fill`,x1:"0",y1:"0",x2:"0",y2:"1",children:[a("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${P} 32%, transparent)`}),a("stop",{offset:"100%",stopColor:`color-mix(in oklab, ${P} 2%, transparent)`})]})}),a("path",{d:r(Y,q,k),fill:`url(#${I}-fill)`})]}):null,void 0!==$?a("line",{x1:0,x2:O,y1:V($),y2:V($),stroke:"var(--neba-chart-baseline)",strokeWidth:1}):null,"bar"===M?S.map((e,l)=>null===e.value?null:a("path",{d:i(l*(O/Math.max(1,S.length))+(O/Math.max(1,S.length)-_)/2,Math.min(V(e.value),V(Math.max(J,0))),_,Math.max(1,Math.abs(V(e.value)-V(Math.max(J,0)))),o/2,e.value>=0?"up":"down"),fill:e.color??P},l)):a("path",{d:b(Y,k),fill:"none",stroke:P,strokeWidth:A,strokeLinecap:"round",strokeLinejoin:"round"}),w&&Z>=0&&"bar"!==M?a("circle",{cx:Y[Z].x,cy:Y[Z].y,r:E,fill:P,stroke:"var(--neba-chart-gap)",strokeWidth:c}):null]}):null}),L?a("span",{className:v,children:S.map(a=>null===a.value?"—":a.value).join(", ")}):null]})});
1
+ "use client";import{jsx as a,jsxs as e,Fragment as l}from"react/jsx-runtime";import*as t from"react";import{areaPath as r,barMaxThickness as n,barPath as i,barRadius as o,extentOf as s,lineWidths as m,markerRadii as h,markGap as u,resolveColor as c,sparklineHeights as d,toValue as f}from"../../internal/chart.js";import{useMeasuredWidth as p}from"../../internal/chart-frame.js";import{cx as x,srOnlyClasses as v}from"../../internal/styles.js";import{linePath as b}from"../../internal/chart.js";import{useStyleDefaults as g}from"../../internal/defaults.js";export const Sparkline=/*@__PURE__*/t.forwardRef(function(M,k){const{data:y,shape:j="line",curve:w="linear",size:$="md",color:N,endDot:W=!1,baseline:z,min:C,max:L,width:R,label:B,className:D,style:F,...G}=g(M,["size"]),I=t.useRef(null),S=p(I),q=t.useId().replace(/:/g,""),A=t.useMemo(()=>y.map(f),[y]),E=d[$],H=m[$],J=h[$],K=s([A],!1),O=C??(K?Math.min(K.min,z??K.min):0),P=(L??(K?Math.max(K.max,z??K.max):1))-O||1,Q="number"==typeof R?R:S,T=c(N??"var(--neba-chart-1)"),U="bar"===j?0:H/2+(W?J:0),V=U,X=Math.max(1,E-2*U),Y=a=>V+(1-(a-O)/P)*X,Z=A.length>1?Q/(A.length-1):Q,_=A.map((a,e)=>null===a.value?null:{x:e*Z,y:Y(a.value)}),aa=(()=>{for(let a=A.length-1;a>=0;a--)if(null!==A[a].value)return a;return-1})(),ea=Math.min(n[$]/2,Math.max(1,Q/Math.max(1,A.length)-u));return e("div",{ref:k,className:x("relative block",D??void 0),style:{width:R??"100%",height:E,...F},...G,children:[a("div",{ref:I,className:"absolute inset-0",children:Q>0&&A.length>0?e("svg",{width:Q,height:E,viewBox:`0 0 ${Q} ${E}`,role:B?"img":"presentation","aria-label":B,"aria-hidden":!B||void 0,className:"block overflow-visible",children:["area"===j?e(l,{children:[a("defs",{children:e("linearGradient",{id:`${q}-fill`,x1:"0",y1:"0",x2:"0",y2:"1",children:[a("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${T} 32%, transparent)`}),a("stop",{offset:"100%",stopColor:`color-mix(in oklab, ${T} 2%, transparent)`})]})}),a("path",{d:r(_,E,w),fill:`url(#${q}-fill)`})]}):null,void 0!==z?a("line",{x1:0,x2:Q,y1:Y(z),y2:Y(z),stroke:"var(--neba-chart-baseline)",strokeWidth:1}):null,"bar"===j?A.map((e,l)=>null===e.value?null:a("path",{d:i(l*(Q/Math.max(1,A.length))+(Q/Math.max(1,A.length)-ea)/2,Math.min(Y(e.value),Y(Math.max(O,0))),ea,Math.max(1,Math.abs(Y(e.value)-Y(Math.max(O,0)))),o/2,e.value>=0?"up":"down"),fill:e.color??T},l)):a("path",{d:b(_,w),fill:"none",stroke:T,strokeWidth:H,strokeLinecap:"round",strokeLinejoin:"round"}),W&&aa>=0&&"bar"!==j?a("circle",{cx:_[aa].x,cy:_[aa].y,r:J,fill:T,stroke:"var(--neba-chart-gap)",strokeWidth:u}):null]}):null}),B?a("span",{className:v,children:A.map(a=>null===a.value?"—":a.value).join(", ")}):null]})});
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{Button as r}from"../button/Button.js";import{spoilerMessages as i,useMessages as l}from"../../internal/i18n.js";import{boxPaddingClasses as o,boxPaddingXClasses as t,boxPaddingYClasses as s}from"../box/Box.js";import{cx as d,hasContent as c,metaTextClasses as m,radiusClasses as v,surfaceClasses as u,surfaceSlots as f,transitionClasses as b}from"../../internal/styles.js";const p={solid:[u,"bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[u,"border bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"bg-transparent"},x="[background-color:color-mix(in_oklab,var(--neba-surface)_55%,transparent)]";export const Spoiler=/*@__PURE__*/n.forwardRef(function({revealed:u,defaultRevealed:h=!1,onRevealedChange:j,locale:g,label:y,hideLabel:w,description:N,action:k,reversible:z=!1,maxHeight:_,blur:C=10,padded:R=!0,variant:B="outline",size:H="md",color:S="primary",density:$="default",elevation:I=0,className:L,style:q,children:A,...D},E){const F=l(i,g),G=n.useId(),[J,K]=n.useState(h),M=u??J,O=e=>{void 0===u&&K(e),j?.(e)},P=!1===N?null:N??F.notice;return a("div",{ref:E,className:d("relative isolate overflow-hidden",v[H],p[B],b,L??""),style:{...f(S,I),...q},...D,children:[e("div",{id:G,className:d("min-w-0",R?o[$][H]:"","[transition:filter_var(--neba-duration-fill)_var(--neba-ease)]","motion-reduce:[transition-duration:0ms]",M?"":"select-none"),style:{filter:M?void 0:`blur(${C}px)`,maxHeight:M?void 0:_,overflow:M?void 0:"hidden"},inert:!M,children:A}),M?null:a("div",{className:["absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 text-center",o[$][H],x].join(" "),children:[c(P)?e("p",{className:`m-0 text-(--neba-muted-fg) ${m[H]}`,children:P}):null,k??e(r,{size:H,color:S,density:$,onClick:()=>O(!0),"aria-expanded":!1,"aria-controls":G,children:y??F.reveal})]}),M&&z?e("div",{className:["flex justify-end",t[$][H],s[$][H],"pt-0"].join(" "),children:e(r,{variant:"text",size:H,color:S,density:$,onClick:()=>O(!1),"aria-expanded":!0,"aria-controls":G,children:w??F.hide})}):null]})});
1
+ "use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import*as r from"react";import{Button as a}from"../button/Button.js";import{spoilerMessages as n,useMessages as t}from"../../internal/i18n.js";import{boxPaddingClasses as l,boxPaddingXClasses as o,boxPaddingYClasses as s}from"../box/Box.js";import{cx as d,hasContent as c,metaTextClasses as m,radiusClasses as v,surfaceClasses as u,surfaceSlots as f,transitionClasses as p}from"../../internal/styles.js";import{useStyleDefaults as b}from"../../internal/defaults.js";const x={solid:[u,"bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[u,"border bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"bg-transparent"};export const Spoiler=/*@__PURE__*/r.forwardRef(function(u,h){const{revealed:g,defaultRevealed:j=!1,onRevealedChange:y,locale:w,label:N,hideLabel:z,description:C,action:R,reversible:k=!1,maxHeight:_,blur:A=10,padded:B=!0,variant:H="outline",size:S="md",color:T="primary",density:$="default",elevation:I=0,className:L,style:q,children:D,...E}=b(u,["size","density","variant","locale"]),F=t(n,w),G=r.useId(),[J,K]=r.useState(j),M=g??J,O=e=>{void 0===g&&K(e),y?.(e)},P=!1===C?null:C??F.notice;return i("div",{ref:h,className:d("isolate grid overflow-hidden",v[S],x[H],p,L??""),style:{gridTemplateColumns:"minmax(0, 1fr)",gridTemplateRows:k?"auto auto":"auto",...f(T,I),...q},...E,children:[e("div",{id:G,className:d("min-w-0",B?l[$][S]:"","[transition:filter_var(--neba-duration-fill)_var(--neba-ease)]","motion-reduce:[transition-duration:0ms]",M?"":"select-none"),style:{gridArea:"1 / 1",filter:M?void 0:`blur(${A}px)`,maxHeight:M?void 0:_,overflow:M?void 0:"hidden"},inert:!M,children:D}),k?e("div",{className:[M?"":"invisible","flex justify-end",o[$][S],s[$][S],"pt-0"].join(" "),style:{gridArea:"2 / 1"},inert:!M,children:e(a,{variant:"text",size:S,color:T,density:$,onClick:()=>O(!1),"aria-expanded":!0,"aria-controls":G,children:z??F.hide})}):null,i("div",{className:d("z-10 flex flex-col items-center justify-center gap-2 text-center",l[$][S],M?"invisible":"[background-color:color-mix(in_oklab,var(--neba-surface)_55%,transparent)]"),style:{gridRow:"1 / -1",gridColumn:"1"},inert:M,children:[c(P)?e("p",{className:`m-0 text-(--neba-muted-fg) ${m[S]}`,children:P}):null,R??e(a,{size:S,color:T,density:$,onClick:()=>O(!0),"aria-expanded":!1,"aria-controls":G,children:N??F.reveal})]})]})});
@@ -0,0 +1,126 @@
1
+ import * as React from 'react';
2
+ import type { NebaSize, NebaStaggerProps, NebaTransition } from '../../types.js';
3
+ /**
4
+ * Which way the pile grows.
5
+ *
6
+ * - `horizontal` — each item sits under the one before it along the inline
7
+ * axis. A row of faces, a row of coins.
8
+ * - `vertical` — the same down the block axis. A pile seen from the front.
9
+ * - `diagonal` — flows along the inline axis like `horizontal` and drops each
10
+ * item as it goes, which is a fanned deck: the item behind shows its corner
11
+ * rather than its edge. How far it drops is `drop`.
12
+ */
13
+ export type StackDirection = 'horizontal' | 'vertical' | 'diagonal';
14
+ export interface StackProps extends NebaStaggerProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
15
+ /** Which way the pile grows. @default 'horizontal' */
16
+ direction?: StackDirection;
17
+ /**
18
+ * How far each item sits **under** the one before it — a CSS length, or a
19
+ * number of pixels — along the axis the stack flows on.
20
+ *
21
+ * Left out it is a fraction of `size`, roughly a third of a control at every
22
+ * step: enough that the pile reads as a pile, and not so much that the item
23
+ * behind is gone.
24
+ */
25
+ overlap?: number | string;
26
+ /**
27
+ * How far each item falls on the axis the stack does **not** flow along.
28
+ * Only `diagonal` moves on two axes, so only `diagonal` reads it.
29
+ *
30
+ * Defaults to `overlap`, which is a shallow fan. A true forty-five degrees
31
+ * would be the item's own width, which is the one number a stack cannot know
32
+ * without measuring what it was handed.
33
+ */
34
+ drop?: number | string;
35
+ /**
36
+ * The size of the things being stacked, which is only ever read to work out
37
+ * the default `overlap`. Set `overlap` and this does nothing.
38
+ * @default 'md'
39
+ */
40
+ size?: NebaSize;
41
+ /**
42
+ * How many items are drawn before the rest become an overflow marker. Left
43
+ * out, every one of them is drawn.
44
+ */
45
+ max?: number;
46
+ /**
47
+ * How many there are altogether, when the stack was handed only the first
48
+ * few. Without it the count is worked out from the children, which is right
49
+ * only when all of them were passed.
50
+ */
51
+ total?: number;
52
+ /**
53
+ * What stands in for the ones that did not fit, given how many those are.
54
+ * Drawn as one more item at the back of the pile.
55
+ *
56
+ * A function rather than a node, because the number is the whole point of it:
57
+ * `(hidden) => <Avatar initials={`+${hidden}`} />`.
58
+ */
59
+ overflow?: (hidden: number) => React.ReactNode;
60
+ /**
61
+ * Which end of the list is at the front of the pile.
62
+ *
63
+ * `first` — the default — puts the first child on top, so a stack read from
64
+ * its leading edge is read front to back and the item the pile is *about*
65
+ * comes first rather than last.
66
+ * @default 'first'
67
+ */
68
+ front?: 'first' | 'last';
69
+ /**
70
+ * What each item is multiplied by against the one in front of it — `0.94`
71
+ * takes six per cent off at every step, so the pile recedes.
72
+ *
73
+ * It is the `scale` property rather than a `transform`, which is what lets it
74
+ * sit on the same element as an entrance without the two fighting: the
75
+ * individual transform properties are applied before the shorthand.
76
+ * @default 1
77
+ */
78
+ scaleStep?: number;
79
+ /**
80
+ * The same for opacity: `0.8` leaves each item four fifths as solid as the
81
+ * one in front. It multiplies with an entrance's own fade rather than
82
+ * replacing it.
83
+ * @default 1
84
+ */
85
+ opacityStep?: number;
86
+ /**
87
+ * Draws a hairline in the page's own surface colour around each item.
88
+ *
89
+ * The one place the library draws a hard outline rather than an acrylic edge,
90
+ * and it is not decoration: two shapes of similar tone laid over each other
91
+ * have no edge between them at all and the pile reads as one smeared shape.
92
+ * Written onto the items themselves, so it follows a circle round.
93
+ * @default false
94
+ */
95
+ ring?: boolean;
96
+ /**
97
+ * How each item arrives — the library's own `transition` vocabulary, so a
98
+ * Stack's fade and an `AnimateFade` are the same fade.
99
+ *
100
+ * `stagger` is what turns it into a pile being dealt rather than a pile
101
+ * appearing: it is added to each item's delay in turn.
102
+ */
103
+ transition?: NebaTransition;
104
+ /** The things being stacked. Every top-level child is one item. */
105
+ children?: React.ReactNode;
106
+ }
107
+ /**
108
+ * Things laid over each other, so the set reads as a pile rather than a row.
109
+ *
110
+ * The overlap is a **margin** rather than a `translate`, which is the whole
111
+ * reason a Stack can sit in a paragraph: a translated pile draws outside a box
112
+ * that is still the size of one item, so everything after it is laid out
113
+ * against the wrong width. Margins make the box exactly as big as what is in
114
+ * it, at every direction and every overlap.
115
+ *
116
+ * Each item is drawn into a wrapper of its own rather than cloned onto. Cloning
117
+ * would need every child to accept a `className` and a `style` — which a
118
+ * Tooltip around an avatar, or anything produced by a `.map()` through somebody
119
+ * else's component, is not obliged to do. The wrapper carries the offset, the
120
+ * depth and the entrance; the child is left exactly as it was passed.
121
+ *
122
+ * The one thing written onto the children is `ring`, and only because a ring
123
+ * has to follow the shape it is around: a hairline on the wrapper of a circular
124
+ * avatar is a square.
125
+ */
126
+ export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
@@ -0,0 +1 @@
1
+ "use client";import{jsx as t}from"react/jsx-runtime";import*as e from"react";import{animBaseClass as r,animationClasses as a,animationSlots as l,transitionParts as i}from"../../internal/animate.js";import{lengthOf as n}from"../../internal/responsive.js";import{cx as s}from"../../internal/styles.js";import{useStyleDefaults as o}from"../../internal/defaults.js";const m={xs:"0.375rem",sm:"0.5rem",md:"0.625rem",lg:"0.75rem",xl:"0.875rem"};export const Stack=/*@__PURE__*/e.forwardRef(function(c,d){const{direction:f="horizontal",overlap:p,drop:g,size:u="md",max:h,total:x,overflow:v,front:y="first",scaleStep:S=1,opacityStep:j=1,ring:$=!1,transition:k,stagger:z=0,durationStep:M=0,reverse:N=!1,className:b,style:w,children:B,...I}=o(c,["size"]),A=e.Children.toArray(B),C=void 0===h?A:A.slice(0,Math.max(0,h)),R=Math.max(0,(x??A.length)-C.length),q=R>0?v?.(R):null,D=null==q?C:[...C,q],E=n(p??m[u]),F=n(g??p??m[u]),G="vertical"===f,H="diagonal"===f,J=i(k),K=J?`${r} ${a[J.effect]}`:"";return t("div",{ref:d,className:s("isolate inline-flex",G?"flex-col items-start":"items-start",$?"[&>*>*>*]:ring-2 [&>*>*>*]:ring-(--neba-surface)":"",b??""),style:w,...I,children:D.map((e,r)=>{const a=N?D.length-1-r:r,i=J?l({...J.slots,delay:J.slots.delay+a*z,duration:Math.max(0,J.slots.duration+a*M)}):void 0;return t("span",{"data-neba-stack-item":"",className:K||void 0,style:{...i,...0===r?null:G?{marginBlockStart:`calc(${E} * -1)`}:{marginInlineStart:`calc(${E} * -1)`},...H?{marginBlockStart:`calc(${F} * ${r})`}:null,zIndex:"first"===y?D.length-r:r+1},children:t("span",{style:{display:"inline-flex",scale:1===S?void 0:String(S**r),opacity:1===j?void 0:j**r},children:e})},r)})})});
@@ -0,0 +1 @@
1
+ export * from './Stack.js';
@@ -0,0 +1 @@
1
+ export*from"./Stack.js";
@@ -12,10 +12,15 @@ export interface StatisticProps extends Omit<BoxProps, 'title' | 'prefix'> {
12
12
  */
13
13
  label?: React.ReactNode;
14
14
  /**
15
- * The figure. A number is formatted; a string is printed exactly as given, for
16
- * the values that are not numbers at all — "3h 42m", "A+", "—".
15
+ * The figure. A number is formatted; anything else is rendered exactly as
16
+ * given — a string, for the values that are not numbers at all ("3h 42m",
17
+ * "A+", "—"), or a node for the ones that have to do something on the way in,
18
+ * which is what an [AnimateCounter](../transitions/animate-counter) is.
19
+ *
20
+ * `delta` and `previous` are arithmetic and so only mean anything against a
21
+ * number; with anything else there is nothing to compare.
17
22
  */
18
- value: number | string;
23
+ value: React.ReactNode;
19
24
  /**
20
25
  * How to write a numeric `value` — `Intl.NumberFormat` options, the same prop
21
26
  * the progress indicators take. Without it a number is grouped by the reader's
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Box as n}from"../box/Box.js";import{Chip as a}from"../chip/Chip.js";import{MinusIcon as r,TrendDownIcon as s,TrendUpIcon as m}from"../../internal/icons.js";import{numberFormatter as i}from"../../internal/format.js";import{cx as o,hasContent as c,metaTextClasses as u,sheetSectionGapClasses as d}from"../../internal/styles.js";const x={xs:"text-[1.125rem]/[1.375rem]",sm:"text-[1.375rem]/[1.625rem]",md:"text-[1.75rem]/[2rem]",lg:"text-[2.25rem]/[2.5rem]",xl:"text-[2.875rem]/[3.25rem]"},f={xs:"text-[0.75rem]",sm:"text-[0.875rem]",md:"text-[1rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},p={xs:"gap-y-0.5",sm:"gap-y-0.5",md:"gap-y-1",lg:"gap-y-1",xl:"gap-y-1.5"},h={start:"items-start text-start",center:"items-center text-center",end:"items-end text-end"},b={up:e(m,{}),down:e(s,{}),flat:e(r,{})};export const Statistic=/*@__PURE__*/l.forwardRef(function({size:l="md",color:r="primary",density:s="default",label:m,value:g,format:w,locale:N,prefix:j,unit:y,icon:$,previousValue:v,delta:z="percent",betterWhen:M="up",caption:k,align:B="start",className:C,children:F,...I},R){const S="number"==typeof g?g:null,V=null===S?g:i(N,w).format(S),W=null!==S&&void 0!==v?S-v:null,q=null!==W&&0!==v&&void 0!==v?W/Math.abs(v):null,A=null===W?null:W>0?"up":W<0?"down":"flat";let D=null;if(null!==W&&null!==A&&"none"!==z){const e=W>0?"+":W<0?"-":"",t=`${e}${i(N,w).format(Math.abs(W))}`,l=null===q?null:`${e}${(100*Math.abs(q)).toFixed(1).replace(/\.0$/,"")}%`;D="absolute"===z?t:"both"===z?[l,t].filter(Boolean).join(" · "):l??t}const E=null===A||"flat"===A?"secondary":A===M?"success":"danger",G=null!==D||c(k);return t(n,{ref:R,size:l,color:r,density:s,className:o("flex flex-col",d[l],h[B],C??""),...I,children:[c(m)||c($)?t("div",{className:["flex min-w-0 items-center gap-1.5 font-medium text-(--neba-muted-fg)",u[l]].join(" "),children:[c($)?e("span",{className:"flex shrink-0 items-center",children:$}):null,c(m)?e("span",{className:"min-w-0 truncate",children:m}):null]}):null,t("div",{className:["flex min-w-0 flex-wrap items-baseline gap-1 font-semibold text-(--neba-fg) tabular-nums",x[l]].join(" "),children:[c(j)?e("span",{className:`font-medium text-(--neba-muted-fg) ${f[l]}`,children:j}):null,e("span",{className:"min-w-0 break-words",children:V}),c(y)?e("span",{className:`font-medium text-(--neba-muted-fg) ${f[l]}`,children:y}):null]}),G?t("div",{className:`flex min-w-0 flex-wrap items-center gap-x-2 ${p[l]}`,children:[null!==D&&null!==A?e(a,{size:l,variant:"text",color:E,startIcon:b[A],className:"tabular-nums",children:D}):null,c(k)?e("span",{className:`min-w-0 text-(--neba-muted-fg) ${u[l]}`,children:k}):null]}):null,F]})});
1
+ "use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Box as n}from"../box/Box.js";import{Chip as a}from"../chip/Chip.js";import{MinusIcon as r,TrendDownIcon as s,TrendUpIcon as m}from"../../internal/icons.js";import{numberFormatter as i}from"../../internal/format.js";import{cx as o,hasContent as c,metaTextClasses as u,sheetSectionGapClasses as d}from"../../internal/styles.js";import{useStyleDefaults as f}from"../../internal/defaults.js";const x={xs:"text-[1.125rem]/[1.375rem]",sm:"text-[1.375rem]/[1.625rem]",md:"text-[1.75rem]/[2rem]",lg:"text-[2.25rem]/[2.5rem]",xl:"text-[2.875rem]/[3.25rem]"},p={xs:"text-[0.75rem]",sm:"text-[0.875rem]",md:"text-[1rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},h={xs:"gap-y-0.5",sm:"gap-y-0.5",md:"gap-y-1",lg:"gap-y-1",xl:"gap-y-1.5"},b={start:"items-start text-start",center:"items-center text-center",end:"items-end text-end"},g={up:e(m,{}),down:e(s,{}),flat:e(r,{})};export const Statistic=/*@__PURE__*/l.forwardRef(function(l,r){const{size:s="md",color:m="primary",density:j="default",label:w,value:y,format:N,locale:$,prefix:v,unit:z,icon:M,previousValue:k,delta:B="percent",betterWhen:C="up",caption:F,align:I="start",className:R,children:S,...V}=f(l,["size","density","locale"]),W="number"==typeof y?y:null,q=null===W?y:i($,N).format(W),A=null!==W&&void 0!==k?W-k:null,D=null!==A&&0!==k&&void 0!==k?A/Math.abs(k):null,E=null===A?null:A>0?"up":A<0?"down":"flat";let G=null;if(null!==A&&null!==E&&"none"!==B){const e=A>0?"+":A<0?"-":"",t=`${e}${i($,N).format(Math.abs(A))}`,l=null===D?null:`${e}${(100*Math.abs(D)).toFixed(1).replace(/\.0$/,"")}%`;G="absolute"===B?t:"both"===B?[l,t].filter(Boolean).join(" · "):l??t}const H=null===E||"flat"===E?"secondary":E===C?"success":"danger",J=null!==G||c(F);return t(n,{ref:r,size:s,color:m,density:j,className:o("flex flex-col",d[s],b[I],R??""),...V,children:[c(w)||c(M)?t("div",{className:["flex min-w-0 items-center gap-1.5 font-medium text-(--neba-muted-fg)",u[s]].join(" "),children:[c(M)?e("span",{className:"flex shrink-0 items-center",children:M}):null,c(w)?e("span",{className:"min-w-0 truncate",children:w}):null]}):null,t("div",{className:["flex min-w-0 flex-wrap items-baseline gap-1 font-semibold text-(--neba-fg) tabular-nums",x[s]].join(" "),children:[c(v)?e("span",{className:`font-medium text-(--neba-muted-fg) ${p[s]}`,children:v}):null,e("span",{className:"min-w-0 break-words",children:q}),c(z)?e("span",{className:`font-medium text-(--neba-muted-fg) ${p[s]}`,children:z}):null]}),J?t("div",{className:`flex min-w-0 flex-wrap items-center gap-x-2 ${h[s]}`,children:[null!==G&&null!==E?e(a,{size:s,variant:"text",color:H,startIcon:g[E],className:"tabular-nums",children:G}):null,c(F)?e("span",{className:`min-w-0 text-(--neba-muted-fg) ${u[s]}`,children:F}):null]}):null,S]})});
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as a,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{Switch as l}from"@base-ui/react/switch";import{Field as t}from"@base-ui/react/field";import{controlTextClasses as o,cx as i,hitAreaClasses as c,metaTextClasses as s,surfaceClasses as d,tickRowLeadingClasses as b}from"../../internal/styles.js";const h={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},f={xs:"data-[checked]:left-[calc(100%-0.75rem)]",sm:"data-[checked]:left-[calc(100%-0.875rem)]",md:"data-[checked]:left-[calc(100%-1.125rem)]",lg:"data-[checked]:left-[calc(100%-1.375rem)]",xl:"data-[checked]:left-[calc(100%-1.625rem)]"},m=["relative inline-flex shrink-0 border",c,"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","rounded-full","[transition-property:background-color,border-color,box-shadow]","[transition-duration:var(--neba-duration-fill),var(--neba-duration),var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),u=[d,"cursor-pointer bg-(--n-panel) [border-color:var(--n-line)]","hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]","data-[checked]:bg-(--n-fill) data-[checked]:[border-color:transparent]","data-[checked]:hover:bg-(--n-fill-hover)"].join(" "),v=[d,"cursor-default bg-(--n-panel) [border-color:var(--n-line)]","[filter:saturate(0.55)]","data-[checked]:bg-(--n-fill) data-[checked]:[border-color:transparent]"].join(" "),p=["cursor-not-allowed bg-transparent [border-color:var(--neba-disabled-border)] shadow-none","data-[checked]:bg-(--neba-disabled-bg)"].join(" "),g=["absolute inset-y-0.5 left-0.5 aspect-square rounded-full bg-(--neba-surface)","[box-shadow:var(--neba-shadow-1)]","[transition:left_var(--neba-duration)_var(--neba-ease)]"].join(" ");export const Switch=/*@__PURE__*/n.forwardRef(function({size:n="md",color:c="primary",label:d,description:x,error:w,invalid:k,labelPlacement:N="end",disabled:j=!1,readOnly:y=!1,className:$,classNames:_,style:R,...O},S){const q=null!=w&&!1!==w&&""!==w,z=k??q,D=z?"danger":c,E={"--n-fill":`var(--neba-${D}-fill)`,"--n-fill-hover":`var(--neba-${D}-fill-hover)`,"--n-accent":`var(--neba-${D}-accent)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-line":`var(--neba-${D}-line)`,"--n-line-hover":`var(--neba-${D}-line-hover)`,"--n-ring":`var(--neba-${D}-ring)`},F=e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(l.Root,{ref:S,className:i(m,h[n],j?p:y?v:u,_?.control),disabled:j,readOnly:y,...O,children:e(l.Thumb,{className:i(g,f[n],_?.thumb)})})}),L=d||x?a("span",{className:i("flex min-w-0 flex-col gap-0.5","start"===N?"flex-1":""),children:[d?e(t.Label,{className:i("leading-[1.4]",j?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)",_?.label),children:d}):null,x?e(t.Description,{className:i(s[n],"text-(--neba-muted-fg)",_?.description),children:x}):null]}):null;return a(t.Root,{disabled:j,invalid:z,className:i("inline-flex flex-col gap-1 align-top",$??""),style:{...E,...R},children:[e("div",{className:`flex items-start gap-2.5 ${o[n]} ${b}`,children:a(r,"start"===N?{children:[L,F]}:{children:[F,L]})}),e(t.Error,q?{match:!0,className:i(s[n],"text-(--n-accent)",_?.error),children:w}:{className:i(s[n],"text-(--n-accent)",_?.error)})]})});
1
+ "use client";import{jsx as e,jsxs as a,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{Switch as l}from"@base-ui/react/switch";import{Field as t}from"@base-ui/react/field";import{controlTextClasses as o,cx as i,hitAreaClasses as c,metaTextClasses as s,surfaceClasses as d,tickRowLeadingClasses as b}from"../../internal/styles.js";import{useStyleDefaults as h}from"../../internal/defaults.js";const f={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},m={xs:"data-[checked]:left-[calc(100%-0.75rem)]",sm:"data-[checked]:left-[calc(100%-0.875rem)]",md:"data-[checked]:left-[calc(100%-1.125rem)]",lg:"data-[checked]:left-[calc(100%-1.375rem)]",xl:"data-[checked]:left-[calc(100%-1.625rem)]"},u=["relative inline-flex shrink-0 border",c,"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","rounded-full","[transition-property:background-color,border-color,box-shadow]","[transition-duration:var(--neba-duration-fill),var(--neba-duration),var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),v=[d,"cursor-pointer bg-(--n-panel) [border-color:var(--n-line)]","hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]","data-[checked]:bg-(--n-fill) data-[checked]:[border-color:transparent]","data-[checked]:hover:bg-(--n-fill-hover)"].join(" "),p=[d,"cursor-default bg-(--n-panel) [border-color:var(--n-line)]","[filter:saturate(0.55)]","data-[checked]:bg-(--n-fill) data-[checked]:[border-color:transparent]"].join(" "),g=["cursor-not-allowed bg-transparent [border-color:var(--neba-disabled-border)] shadow-none","data-[checked]:bg-(--neba-disabled-bg)"].join(" "),x=["absolute inset-y-0.5 left-0.5 aspect-square rounded-full bg-(--neba-surface)","[box-shadow:var(--neba-shadow-1)]","[transition:left_var(--neba-duration)_var(--neba-ease)]"].join(" ");export const Switch=/*@__PURE__*/n.forwardRef(function(n,c){const{size:d="md",color:w="primary",label:k,description:N,error:j,invalid:y,labelPlacement:$="end",disabled:_=!1,readOnly:R=!1,className:z,classNames:O,style:S,...q}=h(n,["size"]),D=null!=j&&!1!==j&&""!==j,E=y??D,F=E?"danger":w,L={"--n-fill":`var(--neba-${F}-fill)`,"--n-fill-hover":`var(--neba-${F}-fill-hover)`,"--n-accent":`var(--neba-${F}-accent)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-line":`var(--neba-${F}-line)`,"--n-line-hover":`var(--neba-${F}-line-hover)`,"--n-ring":`var(--neba-${F}-ring)`},P=e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(l.Root,{ref:c,className:i(u,f[d],_?g:R?p:v,O?.control),disabled:_,readOnly:R,...q,children:e(l.Thumb,{className:i(x,m[d],O?.thumb)})})}),T=k||N?a("span",{className:i("flex min-w-0 flex-col gap-0.5","start"===$?"flex-1":""),children:[k?e(t.Label,{className:i("leading-[1.4]",_?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)",O?.label),children:k}):null,N?e(t.Description,{className:i(s[d],"text-(--neba-muted-fg)",O?.description),children:N}):null]}):null;return a(t.Root,{disabled:_,invalid:E,className:i("inline-flex flex-col gap-1 align-top",z??""),style:{...L,...S},children:[e("div",{className:`flex items-start gap-2.5 ${o[d]} ${b}`,children:a(r,"start"===$?{children:[T,P]}:{children:[P,T]})}),e(t.Error,D?{match:!0,className:i(s[d],"text-(--n-accent)",O?.error),children:j}:{className:i(s[d],"text-(--n-accent)",O?.error)})]})});
@@ -107,4 +107,4 @@ export interface TableProps<Row> extends Omit<BoxProps, 'padded' | 'children' |
107
107
  * might sit next to. What Table adds is the part that is genuinely tabular: the
108
108
  * columns, the rows, and the fact that the two cannot drift apart.
109
109
  */
110
- export declare function Table<Row>({ headers, items, getRowKey, caption, locale, empty, striped, hoverable, stickyHeader, onRowClick, size, density, className, classNames, ...boxProps }: TableProps<Row>): React.JSX.Element;
110
+ export declare function Table<Row>(rawProps: TableProps<Row>): React.JSX.Element;
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Box as r}from"../box/Box.js";import{tableMessages as a,useMessages as l}from"../../internal/i18n.js";import{controlTextLeadingClasses as n,cx as o,metaTextClasses as s,paddingXValues as i}from"../../internal/styles.js";const d={default:{xs:"0.25rem",sm:"0.375rem",md:"0.625rem",lg:"0.75rem",xl:"0.875rem"},compact:{xs:"0.125rem",sm:"0.25rem",md:"0.375rem",lg:"0.5rem",xl:"0.625rem"}},c=["[--n-row:transparent]","[transition:background-color_var(--neba-duration)_var(--neba-ease)]"].join(" "),m=["cursor-pointer [outline:none]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]"].join(" "),p={borderTop:"1px solid var(--n-line)",backgroundColor:"var(--n-row)"};export function Table({headers:h,items:y,getRowKey:b,caption:u,locale:x,empty:g,striped:f=!1,hoverable:v=!1,stickyHeader:w=!1,onRowClick:k,size:N="md",density:j="default",className:C,classNames:A,...$}){const _=l(a,x),z=i[j][N],T=d[j][N],B=Boolean(k),D=v||B,K={padding:`${T} ${z}`},R={...K,backgroundColor:"var(--n-panel-press)"};return e(r,{size:N,density:j,padded:!1,className:o("overflow-x-auto",C??""),...$,children:t("table",{className:o("w-full text-start",n[N],"text-(--neba-fg)",A?.table),style:{borderCollapse:"collapse"},children:[u?e("caption",{className:o(s[N],"text-(--neba-muted-fg)",A?.caption),style:{...K,textAlign:"start"},children:u}):null,e("colgroup",{children:h.map(t=>e("col",{style:void 0===t.width?void 0:{width:"number"==typeof t.width?`${t.width}px`:t.width}},t.key))}),e("thead",{className:A?.head,children:e("tr",{children:h.map(t=>e("th",{scope:"col",className:o("font-semibold whitespace-nowrap text-(--neba-muted-fg)",w?"sticky top-0 z-10 [backdrop-filter:var(--neba-blur)]":"",A?.headCell),style:{...R,textAlign:t.align??"start"},children:t.label??t.key},t.key))})}),e("tbody",{className:A?.body,children:0===y.length?e("tr",{className:o(c,A?.row),style:p,children:e("td",{colSpan:h.length,className:o("text-(--neba-muted-fg)",A?.empty),style:{padding:`2rem ${z}`,textAlign:"center"},children:g??_.empty})}):y.map((t,r)=>e("tr",{className:o(c,f&&r%2==1?"[--n-row:var(--n-panel-hover)]":"",D?"hover:[--n-row:var(--n-soft)]":"",B?m:"",A?.row),style:p,tabIndex:B?0:void 0,onClick:k?()=>k(t,r):void 0,onKeyDown:k?e=>{e.target===e.currentTarget&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),k(t,r)))}:void 0,children:h.map(a=>e("td",{className:A?.cell,style:{...K,textAlign:a.align??"start"},children:a.render?a.render(t,r):t[a.key]},a.key))},b?b(t,r):r))})]})})}
1
+ "use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Box as r}from"../box/Box.js";import{tableMessages as a,useMessages as l}from"../../internal/i18n.js";import{controlTextLeadingClasses as n,cx as o,metaTextClasses as s,paddingXValues as i}from"../../internal/styles.js";import{useStyleDefaults as d}from"../../internal/defaults.js";const c={default:{xs:"0.25rem",sm:"0.375rem",md:"0.625rem",lg:"0.75rem",xl:"0.875rem"},compact:{xs:"0.125rem",sm:"0.25rem",md:"0.375rem",lg:"0.5rem",xl:"0.625rem"}},m=["[--n-row:transparent]","[transition:background-color_var(--neba-duration)_var(--neba-ease)]"].join(" "),p=["cursor-pointer [outline:none]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]"].join(" "),y={borderTop:"1px solid var(--n-line)",backgroundColor:"var(--n-row)"};export function Table(h){const{headers:u,items:b,getRowKey:x,caption:f,locale:g,empty:v,striped:w=!1,hoverable:k=!1,stickyHeader:N=!1,onRowClick:j,size:C="md",density:z="default",className:A,classNames:$,..._}=d(h,["size","density","locale"]),T=l(a,g),B=i[z][C],D=c[z][C],K=Boolean(j),R=k||K,E={padding:`${D} ${B}`},H={...E,backgroundColor:"var(--n-panel-press)"};return e(r,{size:C,density:z,padded:!1,className:o("overflow-x-auto",A??""),..._,children:t("table",{className:o("w-full text-start",n[C],"text-(--neba-fg)",$?.table),style:{borderCollapse:"collapse"},children:[f?e("caption",{className:o(s[C],"text-(--neba-muted-fg)",$?.caption),style:{...E,textAlign:"start"},children:f}):null,e("colgroup",{children:u.map(t=>e("col",{style:void 0===t.width?void 0:{width:"number"==typeof t.width?`${t.width}px`:t.width}},t.key))}),e("thead",{className:$?.head,children:e("tr",{children:u.map(t=>e("th",{scope:"col",className:o("font-semibold whitespace-nowrap text-(--neba-muted-fg)",N?"sticky top-0 z-10 [backdrop-filter:var(--neba-blur)]":"",$?.headCell),style:{...H,textAlign:t.align??"start"},children:t.label??t.key},t.key))})}),e("tbody",{className:$?.body,children:0===b.length?e("tr",{className:o(m,$?.row),style:y,children:e("td",{colSpan:u.length,className:o("text-(--neba-muted-fg)",$?.empty),style:{padding:`2rem ${B}`,textAlign:"center"},children:v??T.empty})}):b.map((t,r)=>e("tr",{className:o(m,w&&r%2==1?"[--n-row:var(--n-panel-hover)]":"",R?"hover:[--n-row:var(--n-soft)]":"",K?p:"",$?.row),style:y,tabIndex:K?0:void 0,onClick:j?()=>j(t,r):void 0,onKeyDown:j?e=>{e.target===e.currentTarget&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),j(t,r)))}:void 0,children:u.map(a=>e("td",{className:$?.cell,style:{...E,textAlign:a.align??"start"},children:a.render?a.render(t,r):t[a.key]},a.key))},x?x(t,r):r))})]})})}
@@ -2,6 +2,17 @@ import * as React from 'react';
2
2
  import type { NebaOrientation, NebaStyleProps, NebaVariant } from '../../types.js';
3
3
  /** A tab's value. The same restraint Select puts on its own — an identifier. */
4
4
  export type TabValue = string | number;
5
+ /**
6
+ * What a bar with more tabs than room does about it.
7
+ *
8
+ * - `scroll` — stays one line and scrolls along it. The default: a tab bar is a
9
+ * row, and the indicator has one place to be. The ends fade while there is
10
+ * more bar in that direction, which is the only cue there is — the scrollbar
11
+ * is hidden, and on macOS it would have been invisible anyway.
12
+ * - `wrap` — takes as many lines as it needs, and the indicator rides the line
13
+ * its tab is on. For a bar whose tabs all have to be visible at once.
14
+ */
15
+ export type TabsOverflow = 'scroll' | 'wrap';
5
16
  export interface TabsProps extends Omit<NebaStyleProps, 'variant'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
6
17
  /**
7
18
  * Weight of the tab *bar*, not of the panels under it.
@@ -41,6 +52,23 @@ export interface TabsProps extends Omit<NebaStyleProps, 'variant'>, Omit<React.C
41
52
  * @default true
42
53
  */
43
54
  loopFocus?: boolean;
55
+ /**
56
+ * What the bar does when there are more tabs than there is room for.
57
+ * @default 'scroll'
58
+ */
59
+ overflow?: TabsOverflow;
60
+ /**
61
+ * The most tab-rows tall the bar may be, which is a cap and not a target — a
62
+ * bar that fits on one line stays on one line.
63
+ *
64
+ * On a horizontal bar those rows are the lines it wraps onto; on a vertical
65
+ * one they are the tabs in a column before it starts another. Past the cap the
66
+ * bar scrolls in the direction it ran out of room in.
67
+ *
68
+ * Only read when `overflow` is `wrap`, since a `scroll` bar is one row by
69
+ * definition. Left out, a wrapping bar takes every line it needs.
70
+ */
71
+ lines?: number;
44
72
  /** The tabs share the bar's full width, each taking an equal share of it. */
45
73
  fullWidth?: boolean;
46
74
  children?: React.ReactNode;
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tabs as i}from"@base-ui/react/tabs";import{controlHeightClasses as l,controlTextClasses as n,cx as o,gapClasses as r,hasContent as s,iconClasses as c,paddingXClasses as d,radiusClasses as u,surfaceClasses as f,surfaceSlots as h,transitionClasses as b}from"../../internal/styles.js";const v=/*@__PURE__*/a.createContext({variant:"outline",size:"md",density:"default",orientation:"horizontal",fullWidth:!1}),p={solid:{horizontal:`${f} inline-flex bg-(--n-panel) p-1 [box-shadow:var(--neba-plate-glass)]`,vertical:`${f} inline-flex flex-col bg-(--n-panel) p-1 [box-shadow:var(--neba-plate-glass)]`},outline:{horizontal:"flex border-b [border-color:var(--n-line)]",vertical:"flex flex-col border-e [border-color:var(--n-line)]"},text:{horizontal:"flex",vertical:"flex flex-col"}},x={solid:{horizontal:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width)",vertical:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width)"},outline:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"},text:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"}},m={solid:`${f} bg-(--n-panel-press) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,outline:"bg-(--n-accent)",text:"bg-(--n-accent)"},g={solid:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)",outline:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)",text:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)"};export const Tab=/*@__PURE__*/a.forwardRef(function({value:f,startIcon:h,endIcon:p,disabled:x=!1,className:m,children:w,...z},y){const{variant:N,size:j,density:k,fullWidth:C}=a.useContext(v);return t(i.Tab,{ref:y,value:f,disabled:x,className:o("relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center select-none","whitespace-nowrap font-medium","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",l[j],n[j],r[j],d[k][j],"solid"===N?u[j]:"",b,c,g[N],"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)",C?"flex-1":"",m??""),...z,children:[s(h)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:h}):null,w,s(p)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:p}):null]})});export const TabPanel=/*@__PURE__*/a.forwardRef(function({value:t,keepMounted:l=!1,className:n,children:o,...r},s){const{size:c}=a.useContext(v);return e(i.Panel,{ref:s,value:t,keepMounted:l,className:["min-w-0 flex-1 text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",u[c],n??""].filter(Boolean).join(" "),...r,children:o})});export const Tabs=/*@__PURE__*/a.forwardRef(function({variant:l="outline",size:n="md",color:r="primary",density:s="default",value:c,defaultValue:d,onValueChange:f,orientation:b="horizontal",activateOnFocus:g=!1,loopFocus:w=!0,fullWidth:z=!1,className:y,style:N,children:j,...k},C){const T=a.useMemo(()=>({variant:l,size:n,density:s,orientation:b,fullWidth:z}),[l,n,s,b,z]),V=[],F=[];return a.Children.forEach(j,e=>{a.isValidElement(e)&&e.type===TabPanel?F.push(e):null!=e&&!1!==e&&V.push(e)}),e(v.Provider,{value:T,children:t(i.Root,{ref:C,value:c,defaultValue:d,onValueChange:e=>f?.(e),orientation:b,className:o("flex min-w-0","vertical"===b?"flex-row gap-4":"flex-col gap-4",y??""),style:{...h(r,0),...N},...k,children:[t(i.List,{activateOnFocus:g,loopFocus:w,className:o("relative shrink-0",p[l][b],"solid"===l?u[n]:"",z&&"horizontal"===b?"w-full":"","horizontal"===b?"overflow-x-auto overflow-y-hidden":""),children:[V,e(i.Indicator,{className:["pointer-events-none",x[l][b],m[l],"solid"===l?u[n]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]"].join(" ")})]}),F]})})});
1
+ "use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tabs as o}from"@base-ui/react/tabs";import{controlHeightClasses as l,controlHeightValues as i,controlTextClasses as n,cx as r,gapClasses as s,hasContent as c,iconClasses as d,paddingXClasses as u,radiusClasses as f,surfaceClasses as b,surfaceSlots as h,transitionClasses as v}from"../../internal/styles.js";import{observeResize as p}from"../../internal/observe.js";const x=/*@__PURE__*/a.createContext({variant:"outline",size:"md",density:"default",orientation:"horizontal",fullWidth:!1}),m={solid:{horizontal:`${b} inline-flex bg-(--n-panel) p-1 [box-shadow:var(--neba-plate-glass)]`,vertical:`${b} inline-flex flex-col bg-(--n-panel) p-1 [box-shadow:var(--neba-plate-glass)]`},outline:{horizontal:"flex border-b [border-color:var(--n-line)]",vertical:"flex flex-col border-e [border-color:var(--n-line)]"},text:{horizontal:"flex",vertical:"flex flex-col"}},g={solid:{horizontal:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width)",vertical:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width)"},outline:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"},text:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"}},w={horizontal:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width) border-b-2 [border-color:var(--n-accent)] !bg-transparent",vertical:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width) border-e-2 [border-color:var(--n-accent)] !bg-transparent"},y={solid:`${b} bg-(--n-panel-press) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,outline:"bg-(--n-accent)",text:"bg-(--n-accent)"},z={solid:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)",outline:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)",text:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)"};export const Tab=/*@__PURE__*/a.forwardRef(function({value:i,startIcon:b,endIcon:h,disabled:p=!1,className:m,children:g,...w},y){const{variant:N,size:$,density:j,fullWidth:k}=a.useContext(x);return t(o.Tab,{ref:y,value:i,disabled:p,className:r("relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center select-none","whitespace-nowrap font-medium","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",l[$],n[$],s[$],u[j][$],"solid"===N?f[$]:"",v,d,z[N],"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)",k?"flex-1":"",m??""),...w,children:[c(b)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:b}):null,g,c(h)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:h}):null]})});export const TabPanel=/*@__PURE__*/a.forwardRef(function({value:t,keepMounted:l=!1,className:i,children:n,...r},s){const{size:c}=a.useContext(x);return e(o.Panel,{ref:s,value:t,keepMounted:l,className:["min-w-0 flex-1 text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2","data-[starting-style]:opacity-0","[transition:opacity_var(--neba-duration)_var(--neba-ease)]",f[c],i??""].filter(Boolean).join(" "),...r,children:n})});export const Tabs=/*@__PURE__*/a.forwardRef(function({variant:l="outline",size:n="md",color:s="primary",density:c="default",value:d,defaultValue:u,onValueChange:b,orientation:v="horizontal",activateOnFocus:z=!1,loopFocus:N=!0,overflow:$="scroll",lines:j,fullWidth:k=!1,className:T,style:C,children:M,...R},W){const _="horizontal"===v,E="wrap"===$,V=a.useRef(null),A=a.useRef(null),F=a.useMemo(()=>({variant:l,size:n,density:c,orientation:v,fullWidth:k}),[l,n,c,v,k]),L=[],P=[];a.Children.forEach(M,e=>{a.isValidElement(e)&&e.type===TabPanel?P.push(e):null!=e&&!1!==e&&L.push(e)});const H=L.length;return a.useEffect(()=>{const e=A.current,t=V.current;if(!e||!t)return;const a=()=>{const a=Math.abs(_?e.scrollLeft:e.scrollTop),o=_?e.clientWidth:e.clientHeight,l=_?e.scrollWidth:e.scrollHeight,i=_?"x":"y",n=_?"y":"x";t.toggleAttribute(`data-overflow-${i}-start`,a>1),t.toggleAttribute(`data-overflow-${i}-end`,l-o-a>1),t.removeAttribute(`data-overflow-${n}-start`),t.removeAttribute(`data-overflow-${n}-end`)};a(),e.addEventListener("scroll",a,{passive:!0});const o=p(e,a);return()=>{e.removeEventListener("scroll",a),o()}},[_,H]),e(x.Provider,{value:F,children:t(o.Root,{ref:e=>{V.current=e,"function"==typeof W?W(e):W&&(W.current=e)},value:d,defaultValue:u,onValueChange:e=>b?.(e),orientation:v,className:r("flex min-w-0","vertical"===v?"flex-row gap-4":"flex-col gap-4",T??""),style:{...h(s,0),...C},...R,children:[t(o.List,{ref:A,activateOnFocus:z,loopFocus:N,className:r("relative shrink-0",m[l][v],"solid"===l?f[n]:"",k&&"horizontal"===v?"w-full":"",E?"flex-wrap":_?"overflow-x-auto":"",E&&void 0!==j?_?"overflow-y-auto":"overflow-x-auto":"",!E&&_?"overflow-y-hidden":"","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","neba-scroll-fade"),style:{"--n-fade":"2rem",maxHeight:E&&void 0!==j?`calc(${i[n]} * ${Math.max(1,Math.round(j))}${"solid"===l?" + 0.5rem":""})`:void 0},children:[L,e(o.Indicator,{className:["pointer-events-none",E&&"solid"!==l?w[v]:g[l][v],y[l],"solid"===l?f[n]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]"].join(" ")})]}),P]})})});