neba 1.8.1 → 1.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (196) hide show
  1. package/README.md +7 -7
  2. package/dist/components/accordion/Accordion.js +1 -1
  3. package/dist/components/alert/Alert.js +1 -1
  4. package/dist/components/anchor/Anchor.d.ts +73 -0
  5. package/dist/components/anchor/Anchor.js +1 -0
  6. package/dist/components/anchor/index.d.ts +2 -0
  7. package/dist/components/anchor/index.js +1 -0
  8. package/dist/components/animate-marquee/AnimateMarquee.js +1 -1
  9. package/dist/components/app-logo/AppLogo.js +1 -1
  10. package/dist/components/aspect-ratio/AspectRatio.js +1 -1
  11. package/dist/components/avatar/Avatar.js +1 -1
  12. package/dist/components/avatar-group/AvatarGroup.d.ts +47 -0
  13. package/dist/components/avatar-group/AvatarGroup.js +1 -0
  14. package/dist/components/avatar-group/index.d.ts +2 -0
  15. package/dist/components/avatar-group/index.js +1 -0
  16. package/dist/components/badge/Badge.js +1 -1
  17. package/dist/components/blockquote/Blockquote.js +1 -1
  18. package/dist/components/box/Box.js +1 -1
  19. package/dist/components/button/Button.js +1 -1
  20. package/dist/components/button-group/ButtonGroup.js +1 -1
  21. package/dist/components/card/Card.js +1 -1
  22. package/dist/components/carousel/Carousel.js +1 -1
  23. package/dist/components/chat-bubble/ChatBubble.js +1 -1
  24. package/dist/components/checkbox/Checkbox.d.ts +13 -1
  25. package/dist/components/checkbox/Checkbox.js +1 -1
  26. package/dist/components/combobox/Combobox.d.ts +17 -2
  27. package/dist/components/combobox/Combobox.js +1 -1
  28. package/dist/components/command-palette/CommandPalette.d.ts +105 -0
  29. package/dist/components/command-palette/CommandPalette.js +1 -0
  30. package/dist/components/command-palette/index.d.ts +2 -0
  31. package/dist/components/command-palette/index.js +1 -0
  32. package/dist/components/container/Container.js +1 -1
  33. package/dist/components/data-list/DataList.d.ts +55 -0
  34. package/dist/components/data-list/DataList.js +1 -0
  35. package/dist/components/data-list/index.d.ts +2 -0
  36. package/dist/components/data-list/index.js +1 -0
  37. package/dist/components/data-table/DataTable.js +1 -1
  38. package/dist/components/dialog/Dialog.d.ts +19 -2
  39. package/dist/components/dialog/Dialog.js +1 -1
  40. package/dist/components/divider/Divider.js +1 -1
  41. package/dist/components/drawer/Drawer.js +1 -1
  42. package/dist/components/empty/Empty.js +1 -1
  43. package/dist/components/fieldset/Fieldset.d.ts +33 -0
  44. package/dist/components/fieldset/Fieldset.js +1 -0
  45. package/dist/components/fieldset/index.d.ts +2 -0
  46. package/dist/components/fieldset/index.js +1 -0
  47. package/dist/components/file-picker/FilePicker.js +1 -1
  48. package/dist/components/floating-bottom-navigation/FloatingBottomNavigation.js +1 -1
  49. package/dist/components/form/Form.d.ts +58 -0
  50. package/dist/components/form/Form.js +1 -0
  51. package/dist/components/form/index.d.ts +2 -0
  52. package/dist/components/form/index.js +1 -0
  53. package/dist/components/gauge-chart/GaugeChart.d.ts +62 -0
  54. package/dist/components/gauge-chart/GaugeChart.js +1 -0
  55. package/dist/components/gauge-chart/index.d.ts +2 -0
  56. package/dist/components/gauge-chart/index.js +1 -0
  57. package/dist/components/grid/Grid.js +1 -1
  58. package/dist/components/grid-container/GridContainer.js +1 -1
  59. package/dist/components/heatmap-chart/HeatmapChart.js +1 -1
  60. package/dist/components/highlight/Highlight.js +1 -1
  61. package/dist/components/hover-card/HoverCard.d.ts +78 -0
  62. package/dist/components/hover-card/HoverCard.js +1 -0
  63. package/dist/components/hover-card/index.d.ts +2 -0
  64. package/dist/components/hover-card/index.js +1 -0
  65. package/dist/components/how-to-steps/HowToSteps.d.ts +11 -25
  66. package/dist/components/how-to-steps/HowToSteps.js +1 -1
  67. package/dist/components/icon/Icon.js +1 -1
  68. package/dist/components/list/List.js +1 -1
  69. package/dist/components/menu/Menu.d.ts +16 -4
  70. package/dist/components/menu/Menu.js +1 -1
  71. package/dist/components/menubar/Menubar.d.ts +56 -0
  72. package/dist/components/menubar/Menubar.js +1 -0
  73. package/dist/components/menubar/index.d.ts +2 -0
  74. package/dist/components/menubar/index.js +1 -0
  75. package/dist/components/meter/Meter.d.ts +52 -0
  76. package/dist/components/meter/Meter.js +1 -0
  77. package/dist/components/meter/index.d.ts +2 -0
  78. package/dist/components/meter/index.js +1 -0
  79. package/dist/components/mockup/Mockup.js +1 -1
  80. package/dist/components/navigation-menu/NavigationMenu.d.ts +100 -0
  81. package/dist/components/navigation-menu/NavigationMenu.js +1 -0
  82. package/dist/components/navigation-menu/index.d.ts +2 -0
  83. package/dist/components/navigation-menu/index.js +1 -0
  84. package/dist/components/number-field/NumberField.d.ts +17 -2
  85. package/dist/components/number-field/NumberField.js +1 -1
  86. package/dist/components/otp-field/OtpField.js +1 -1
  87. package/dist/components/overlay/Overlay.js +1 -1
  88. package/dist/components/page-layout/PageLayout.js +1 -1
  89. package/dist/components/pagination/Pagination.js +1 -1
  90. package/dist/components/panes/Panes.js +1 -1
  91. package/dist/components/pie-chart/PieChart.js +1 -1
  92. package/dist/components/pill/Pill.js +1 -1
  93. package/dist/components/popover/Popover.js +1 -1
  94. package/dist/components/progress-box/ProgressBox.js +1 -1
  95. package/dist/components/progress-circular/ProgressCircular.js +1 -1
  96. package/dist/components/progress-linear/ProgressLinear.js +1 -1
  97. package/dist/components/radio-group/RadioGroup.d.ts +22 -1
  98. package/dist/components/radio-group/RadioGroup.js +1 -1
  99. package/dist/components/rating/Rating.js +1 -1
  100. package/dist/components/scroll-area/ScrollArea.d.ts +50 -0
  101. package/dist/components/scroll-area/ScrollArea.js +1 -0
  102. package/dist/components/scroll-area/index.d.ts +2 -0
  103. package/dist/components/scroll-area/index.js +1 -0
  104. package/dist/components/scroll-zone/ScrollZone.d.ts +35 -17
  105. package/dist/components/scroll-zone/ScrollZone.js +1 -1
  106. package/dist/components/segmented-button/SegmentedButton.js +1 -1
  107. package/dist/components/select/Select.d.ts +16 -1
  108. package/dist/components/select/Select.js +1 -1
  109. package/dist/components/shortcut/Shortcut.js +1 -1
  110. package/dist/components/sidebar/Sidebar.js +1 -1
  111. package/dist/components/skeleton/Skeleton.js +1 -1
  112. package/dist/components/slider/Slider.js +1 -1
  113. package/dist/components/spoiler/Spoiler.js +1 -1
  114. package/dist/components/statistic/Statistic.js +1 -1
  115. package/dist/components/switch/Switch.d.ts +13 -1
  116. package/dist/components/switch/Switch.js +1 -1
  117. package/dist/components/table/Table.d.ts +21 -2
  118. package/dist/components/table/Table.js +1 -1
  119. package/dist/components/tabs/Tabs.js +1 -1
  120. package/dist/components/text-field/TextField.d.ts +16 -1
  121. package/dist/components/text-field/TextField.js +1 -1
  122. package/dist/components/text-link/TextLink.js +1 -1
  123. package/dist/components/toast/Toast.d.ts +17 -2
  124. package/dist/components/toast/Toast.js +1 -1
  125. package/dist/components/toggle/Toggle.d.ts +53 -0
  126. package/dist/components/toggle/Toggle.js +1 -0
  127. package/dist/components/toggle/index.d.ts +2 -0
  128. package/dist/components/toggle/index.js +1 -0
  129. package/dist/components/toggle-group/ToggleGroup.d.ts +51 -0
  130. package/dist/components/toggle-group/ToggleGroup.js +1 -0
  131. package/dist/components/toggle-group/index.d.ts +2 -0
  132. package/dist/components/toggle-group/index.js +1 -0
  133. package/dist/components/toolbar/Toolbar.js +1 -1
  134. package/dist/components/tooltip/Tooltip.js +1 -1
  135. package/dist/components/tour/Tour.d.ts +97 -0
  136. package/dist/components/tour/Tour.js +1 -0
  137. package/dist/components/tour/index.d.ts +2 -0
  138. package/dist/components/tour/index.js +1 -0
  139. package/dist/components/transfer/Transfer.d.ts +52 -0
  140. package/dist/components/transfer/Transfer.js +1 -0
  141. package/dist/components/transfer/index.d.ts +2 -0
  142. package/dist/components/transfer/index.js +1 -0
  143. package/dist/components/tree-view/TreeView.js +1 -1
  144. package/dist/components/typography/Typography.js +1 -1
  145. package/dist/components/window-pane/WindowPane.js +1 -1
  146. package/dist/index.d.ts +16 -0
  147. package/dist/index.js +1 -1
  148. package/dist/internal/animate.d.ts +7 -1
  149. package/dist/internal/animate.js +1 -1
  150. package/dist/internal/avatar-group.d.ts +22 -0
  151. package/dist/internal/avatar-group.js +1 -0
  152. package/dist/internal/button-group.d.ts +6 -2
  153. package/dist/internal/chart-frame.d.ts +18 -1
  154. package/dist/internal/chart-frame.js +1 -1
  155. package/dist/internal/data-table.d.ts +0 -14
  156. package/dist/internal/data-table.js +1 -1
  157. package/dist/internal/drag.d.ts +62 -0
  158. package/dist/internal/drag.js +1 -0
  159. package/dist/internal/highlight.js +1 -1
  160. package/dist/internal/i18n.d.ts +82 -0
  161. package/dist/internal/i18n.js +1 -1
  162. package/dist/internal/link.d.ts +19 -0
  163. package/dist/internal/link.js +1 -0
  164. package/dist/internal/media.d.ts +29 -0
  165. package/dist/internal/media.js +1 -0
  166. package/dist/internal/observe.d.ts +42 -0
  167. package/dist/internal/observe.js +1 -0
  168. package/dist/internal/page-layout.js +1 -1
  169. package/dist/internal/picker.js +1 -1
  170. package/dist/internal/progress.d.ts +5 -0
  171. package/dist/internal/search.d.ts +33 -0
  172. package/dist/internal/search.js +1 -0
  173. package/dist/internal/styles.d.ts +39 -0
  174. package/dist/internal/styles.js +1 -1
  175. package/dist/locales/ar.js +1 -1
  176. package/dist/locales/de.js +1 -1
  177. package/dist/locales/es.js +1 -1
  178. package/dist/locales/fr.js +1 -1
  179. package/dist/locales/hi.js +1 -1
  180. package/dist/locales/id.js +1 -1
  181. package/dist/locales/it.js +1 -1
  182. package/dist/locales/ja.js +1 -1
  183. package/dist/locales/ko.js +1 -1
  184. package/dist/locales/nl.js +1 -1
  185. package/dist/locales/pl.js +1 -1
  186. package/dist/locales/pt.js +1 -1
  187. package/dist/locales/ru.js +1 -1
  188. package/dist/locales/th.js +1 -1
  189. package/dist/locales/tr.js +1 -1
  190. package/dist/locales/vi.js +1 -1
  191. package/dist/locales/zh-hans.js +1 -1
  192. package/dist/locales/zh-hant.js +1 -1
  193. package/dist/styles.css +1 -1
  194. package/dist/tailwind.css +104 -0
  195. package/dist/types.d.ts +55 -0
  196. package/package.json +2 -2
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import type { NebaElevation, NebaStyleProps } from '../../types.js';
2
+ import type { NebaElevation, NebaFieldSlot, NebaSlots, NebaStyleProps } from '../../types.js';
3
3
  /**
4
4
  * What a Combobox's value may be — the same two types a [Select](../select)
5
5
  * submits, and for the same reason: a form control's value is what a form
@@ -25,6 +25,15 @@ export interface ComboboxOption {
25
25
  }
26
26
  /** One value, or an array of them, depending on `multiple`. */
27
27
  type Selection<Multiple extends boolean | undefined> = Multiple extends true ? ComboboxValue[] : ComboboxValue | null;
28
+ /**
29
+ * The parts a Combobox draws behind its root.
30
+ *
31
+ * `shell` is the framed box, `control` the `<input>` the reader types into, and
32
+ * `chip` one of the tokens a multiple-selection combobox puts in front of it.
33
+ * `popup` and `item` are portalled, so nothing written against the root reaches
34
+ * them.
35
+ */
36
+ export type ComboboxSlot = NebaFieldSlot | 'shell' | 'chip' | 'popup' | 'item';
28
37
  export interface ComboboxProps<Multiple extends boolean | undefined = false> extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
29
38
  /**
30
39
  * The options, as data — the same shape Select takes, and for the same
@@ -120,6 +129,12 @@ export interface ComboboxProps<Multiple extends boolean | undefined = false> ext
120
129
  /** A ref to the text input the user types into. */
121
130
  inputRef?: React.Ref<HTMLInputElement>;
122
131
  id?: string;
132
+ /**
133
+ * Class names for the parts behind the root. `className` is the root — the
134
+ * column holding the label, the shell and the two lines under it — so the
135
+ * `<input>` itself is `classNames.control`.
136
+ */
137
+ classNames?: NebaSlots<ComboboxSlot>;
123
138
  }
124
139
  /**
125
140
  * A field you can type into and also choose from.
@@ -139,5 +154,5 @@ export interface ComboboxProps<Multiple extends boolean | undefined = false> ext
139
154
  * navigation across both the list and the chips, and the hidden input that
140
155
  * makes the whole thing submit with a form.
141
156
  */
142
- export declare function Combobox<Multiple extends boolean | undefined = false>({ variant, size, color, density, elevation, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, locale, emptyMessage, limit, placeholder, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, name, open, defaultOpen, onOpenChange, clearLabel, removeLabel, inputRef, id, className, style, ...props }: ComboboxProps<Multiple>): React.JSX.Element;
157
+ export declare function Combobox<Multiple extends boolean | undefined = false>({ variant, size, color, density, elevation, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, locale, emptyMessage, limit, placeholder, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, name, open, defaultOpen, onOpenChange, clearLabel, removeLabel, inputRef, id, className, classNames, style, ...props }: ComboboxProps<Multiple>): React.JSX.Element;
143
158
  export {};
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Combobox as n}from"@base-ui/react/combobox";import{Field as t}from"@base-ui/react/field";import{Chip as i}from"../chip/Chip.js";import{actionMessages as r,comboboxMessages as s,fillMessage as o,useMessages as c}from"../../internal/i18n.js";import{CheckIcon as d,ChevronIcon as u,CloseIcon as m,PlusIcon as p}from"../../internal/icons.js";import{chipRemoveClasses as h,controlHeightClasses as b,controlTextLeadingClasses as f,disabledClasses as g,fieldReadOnlyClasses as x,fieldRestClasses as v,focusWithinRingClasses as y,gapClasses as w,hasContent as N,iconClasses as j,metaTextClasses as C,paddingXClasses as L,radiusClasses as I,stackGapClasses as S,surfaceClasses as $,surfaceSlots as O,transitionClasses as V}from"../../internal/styles.js";const _=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",V,"focus-within:[transition-duration:0ms]",y,j].join(" "),z={xs:"min-h-5.5 py-0",sm:"min-h-6.5 py-[2px]",md:"min-h-8 py-[3px]",lg:"min-h-10 py-[4px]",xl:"min-h-12 py-[4px]"},A=[$,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","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(" "),M=["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--neba-radius-xs) py-1.5 pe-2 ps-7",V,"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(" "),k=["inline-flex h-[1lh] shrink-0 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg)","[transition:color_var(--neba-duration)_var(--neba-ease)]","hover:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:text-(--neba-disabled-fg)"].join(" ");function R(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function Combobox({variant:y="outline",size:j="md",color:$="primary",density:V="default",elevation:T=0,items:q,multiple:E,value:F,defaultValue:P,onValueChange:B,onInputValueChange:D,allowCustom:G=!0,customLabel:H,clearable:W=!1,locale:J,emptyMessage:K,limit:Q,placeholder:U,label:X,description:Y,error:Z,invalid:ee,startIcon:ae,fullWidth:le=!1,disabled:ne=!1,readOnly:te=!1,required:ie=!1,name:re,open:se,defaultOpen:oe,onOpenChange:ce,clearLabel:de,removeLabel:ue,inputRef:me,id:pe,className:he,style:be,...fe}){const ge=c(s,J),xe=c(r,J),ve=ue??(e=>o(ge.remove,{label:e})),ye=N(Z),we=ee??ye,Ne=we?"danger":$,je=!0===E,Ce=l.useMemo(()=>q.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[q]),[Le,Ie]=l.useState(()=>R(P)),Se=void 0===F?Le:R(F),[$e,Oe]=l.useState(""),Ve=l.useMemo(()=>new Map(Ce.map(e=>[e.value,e])),[Ce]),_e=l.useCallback(e=>Ve.get(e)??{value:e,label:String(e),custom:!0},[Ve]),ze=$e.trim(),Ae=ze.toLocaleLowerCase(),Me=""===ze||Ce.some(e=>e.label.toLocaleLowerCase()===Ae||String(e.value).toLocaleLowerCase()===Ae)||Se.some(e=>String(e).toLocaleLowerCase()===Ae),ke=!G||te||ne||Me?null:ze,Re=l.useMemo(()=>null===ke?Ce:[...Ce,{value:ke,label:ke,custom:!0}],[Ce,ke]),Te=je?Se.map(_e):Se.length>0?_e(Se[0]):null;const qe=L[V][j],Ee=[_,f[j],I[j],w[j],je?z[j]:b[j],`${qe} pe-1.5`,ne?g[y]:te?x[y]:v[y]].join(" "),Fe=["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed"].join(" "),Pe=a=>e(n.Input,{ref:me,placeholder:U,className:je?`${Fe} min-w-16 ${a?"ms-1.5":""}`:Fe});return a(t.Root,{disabled:ne,invalid:we,className:["flex-col align-top",S[j],le?"flex w-full":"inline-flex",he??""].filter(Boolean).join(" "),style:{...O(Ne,T),...be},...fe,children:[X?e(t.Label,{className:[C[j],"font-medium",ne?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:X}):null,a(n.Root,{id:pe,name:re,items:Re,multiple:je,value:Te,onValueChange:e=>{!function(e){void 0===F&&Ie(e),B?.(je?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{Oe(e),D?.(e)},open:se,defaultOpen:oe,onOpenChange:e=>ce?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:Q,disabled:ne,readOnly:te,required:ie,children:[a(n.InputGroup,{className:Ee,children:[ae?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:ae}):null,je?e(n.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(n.Value,{children:t=>a(l.Fragment,{children:[t.map(a=>e(n.Chip,{render:e(i,{variant:"outline",size:j,color:Ne,density:"compact",disabled:ne,endIcon:te||ne?null:e(n.ChipRemove,{"aria-label":ve(a.label),className:h,children:e(m,{})})}),children:a.label},String(a.value))),Pe(t.length>0)]})})}):Pe(!1),W&&!te?e(n.Clear,{"aria-label":de??xe.clear,className:k,children:e(m,{})}):null,e(n.Trigger,{"aria-label":"string"==typeof X?void 0:"Open",className:k,children:e(n.Icon,{className:["flex items-center","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[popup-open]:rotate-180"].join(" "),children:e(u,{})})})]}),e(n.Portal,{children:e(n.Positioner,{className:"neba-portal z-50 [outline:none]",sideOffset:6,children:a(n.Popup,{className:`${A} ${I[j]} ${f[j]}`,style:O(Ne,3),children:[e(n.Empty,{className:"px-2 py-1.5 text-(--neba-muted-fg) empty:hidden",children:K??ge.empty}),e(n.List,{children:t=>e(n.Item,{value:t,disabled:t.disabled,className:M,children:t.custom?a(l.Fragment,{children:[e("span",{className:"absolute start-1.5 flex size-4 items-center justify-center text-(--n-accent) [&_svg]:size-4",children:e(p,{})}),e("span",{className:"truncate",children:H?H(t.label):`Add “${t.label}”`})]}):a(l.Fragment,{children:[e(n.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(d,{})}),e("span",{className:"truncate",children:t.label})]})},`${t.custom?"custom:":""}${String(t.value)}`)})]})})})]}),Y?e(t.Description,{className:`${C[j]} text-(--neba-muted-fg)`,children:Y}):null,ye?e(t.Error,{match:!0,className:`${C[j]} text-(--n-accent)`,children:Z}):null]})}
1
+ "use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Combobox as t}from"@base-ui/react/combobox";import{Field as n}from"@base-ui/react/field";import{Chip as i}from"../chip/Chip.js";import{actionMessages as r,comboboxMessages as s,fillMessage as o,useMessages as c}from"../../internal/i18n.js";import{CheckIcon as d,ChevronIcon as m,CloseIcon as u,PlusIcon as p}from"../../internal/icons.js";import{chipRemoveClasses as h,controlHeightClasses as b,controlTextLeadingClasses as f,cx as g,disabledClasses as x,fieldReadOnlyClasses as v,fieldRestClasses as y,focusWithinRingClasses as N,gapClasses as w,hasContent as C,iconClasses as j,metaTextClasses as L,paddingXClasses as I,radiusClasses as S,stackGapClasses as O,surfaceClasses as V,surfaceSlots as _,transitionClasses as z}from"../../internal/styles.js";const $=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",z,"focus-within:[transition-duration:0ms]",N,j].join(" "),A={xs:"min-h-5.5 py-0",sm:"min-h-6.5 py-[2px]",md:"min-h-8 py-[3px]",lg:"min-h-10 py-[4px]",xl:"min-h-12 py-[4px]"},M=[V,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","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(" "),k=["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--neba-radius-xs) py-1.5 pe-2 ps-7",z,"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(" "),R=["inline-flex h-[1lh] shrink-0 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg)","[transition:color_var(--neba-duration)_var(--neba-ease)]","hover:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:text-(--neba-disabled-fg)"].join(" ");function T(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function Combobox({variant:N="outline",size:j="md",color:V="primary",density:z="default",elevation:q=0,items:E,multiple:F,value:P,defaultValue:B,onValueChange:D,onInputValueChange:G,allowCustom:H=!0,customLabel:W,clearable:J=!1,locale:K,emptyMessage:Q,limit:U,placeholder:X,label:Y,description:Z,error:ee,invalid:ae,startIcon:le,fullWidth:te=!1,disabled:ne=!1,readOnly:ie=!1,required:re=!1,name:se,open:oe,defaultOpen:ce,onOpenChange:de,clearLabel:me,removeLabel:ue,inputRef:pe,id:he,className:be,classNames:fe,style:ge,...xe}){const ve=c(s,K),ye=c(r,K),Ne=ue??(e=>o(ve.remove,{label:e})),we=C(ee),Ce=ae??we,je=Ce?"danger":V,Le=!0===F,Ie=l.useMemo(()=>E.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[E]),[Se,Oe]=l.useState(()=>T(B)),Ve=void 0===P?Se:T(P),[_e,ze]=l.useState(""),$e=l.useMemo(()=>new Map(Ie.map(e=>[e.value,e])),[Ie]),Ae=l.useCallback(e=>$e.get(e)??{value:e,label:String(e),custom:!0},[$e]),Me=_e.trim(),ke=Me.toLocaleLowerCase(),Re=""===Me||Ie.some(e=>e.label.toLocaleLowerCase()===ke||String(e.value).toLocaleLowerCase()===ke)||Ve.some(e=>String(e).toLocaleLowerCase()===ke),Te=!H||ie||ne||Re?null:Me,qe=l.useMemo(()=>null===Te?Ie:[...Ie,{value:Te,label:Te,custom:!0}],[Ie,Te]),Ee=Le?Ve.map(Ae):Ve.length>0?Ae(Ve[0]):null;const Fe=I[z][j],Pe=[$,f[j],S[j],w[j],Le?A[j]:b[j],`${Fe} pe-1.5`,ne?x[N]:ie?v[N]:y[N],fe?.shell].filter(Boolean).join(" "),Be=["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",fe?.control].filter(Boolean).join(" "),De=a=>e(t.Input,{ref:pe,placeholder:X,className:Le?`${Be} min-w-16 ${a?"ms-1.5":""}`:Be});return a(n.Root,{disabled:ne,invalid:Ce,className:g("flex-col align-top",O[j],te?"flex w-full":"inline-flex",be??""),style:{..._(je,q),...ge},...xe,children:[Y?e(n.Label,{className:g(L[j],"font-medium",ne?"text-(--neba-disabled-fg)":"text-(--neba-fg)",fe?.label),children:Y}):null,a(t.Root,{id:he,name:se,items:qe,multiple:Le,value:Ee,onValueChange:e=>{!function(e){void 0===P&&Oe(e),D?.(Le?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{ze(e),G?.(e)},open:oe,defaultOpen:ce,onOpenChange:e=>de?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:U,disabled:ne,readOnly:ie,required:re,children:[a(t.InputGroup,{className:Pe,children:[le?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:le}):null,Le?e(t.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(t.Value,{children:n=>a(l.Fragment,{children:[n.map(a=>e(t.Chip,{render:e(i,{variant:"outline",size:j,color:je,density:"compact",disabled:ne,className:fe?.chip,endIcon:ie||ne?null:e(t.ChipRemove,{"aria-label":Ne(a.label),className:h,children:e(u,{})})}),children:a.label},String(a.value))),De(n.length>0)]})})}):De(!1),J&&!ie?e(t.Clear,{"aria-label":me??ye.clear,className:R,children:e(u,{})}):null,e(t.Trigger,{"aria-label":"string"==typeof Y?void 0:"Open",className:R,children:e(t.Icon,{className:["flex items-center","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[popup-open]:rotate-180"].join(" "),children:e(m,{})})})]}),e(t.Portal,{children:e(t.Positioner,{className:"neba-portal z-50 [outline:none]",sideOffset:6,children:a(t.Popup,{className:g(M,S[j],f[j],fe?.popup),style:_(je,3),children:[e(t.Empty,{className:"px-2 py-1.5 text-(--neba-muted-fg) empty:hidden",children:Q??ve.empty}),e(t.List,{children:n=>e(t.Item,{value:n,disabled:n.disabled,className:g(k,fe?.item),children:n.custom?a(l.Fragment,{children:[e("span",{className:"absolute start-1.5 flex size-4 items-center justify-center text-(--n-accent) [&_svg]:size-4",children:e(p,{})}),e("span",{className:"truncate",children:W?W(n.label):`Add “${n.label}”`})]}):a(l.Fragment,{children:[e(t.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(d,{})}),e("span",{className:"truncate",children:n.label})]})},`${n.custom?"custom:":""}${String(n.value)}`)})]})})})]}),Z?e(n.Description,{className:g(L[j],"text-(--neba-muted-fg)",fe?.description),children:Z}):null,e(n.Error,we?{match:!0,className:g(L[j],"text-(--n-accent)",fe?.error),children:ee}:{className:g(L[j],"text-(--n-accent)",fe?.error)})]})}
@@ -0,0 +1,105 @@
1
+ import * as React from 'react';
2
+ import type { NebaSlots, NebaStyleProps } from '../../types.js';
3
+ /**
4
+ * The parts a CommandPalette draws around its sheet.
5
+ *
6
+ * `className` is the sheet — the panel the search field and the rows sit on.
7
+ * `backdrop` and `viewport` render outside it and have no other way in.
8
+ *
9
+ * `group` is one heading between the rows, not the rows under it: a group is
10
+ * named by its first item's `group`, and the rows themselves are `item`.
11
+ */
12
+ export type CommandPaletteSlot = 'backdrop' | 'viewport' | 'input' | 'list' | 'group' | 'item' | 'empty';
13
+ /** One thing the palette can do. */
14
+ export interface CommandItem {
15
+ /** What identifies the command. */
16
+ value: string;
17
+ /** What the row says, and what the query is matched against. */
18
+ label: string;
19
+ /** A second line under it — where the command goes, or what it changes. */
20
+ description?: React.ReactNode;
21
+ /** A glyph before the label. */
22
+ icon?: React.ReactNode;
23
+ /**
24
+ * The keystroke that does the same thing, set at the end of the row. Written
25
+ * the way [Shortcut](../display/shortcut) writes them, so `Mod` resolves per
26
+ * platform. The palette does not bind it — the application does.
27
+ */
28
+ shortcut?: string;
29
+ /**
30
+ * The heading this command sits under. Commands are drawn in the order they
31
+ * are given, and a heading is drawn each time the group changes — so a group's
32
+ * commands have to be listed together.
33
+ */
34
+ group?: string;
35
+ /**
36
+ * Extra words the query is matched against but that are never drawn — the
37
+ * name somebody else's product gives the same command, an abbreviation, the
38
+ * word they would have searched for.
39
+ */
40
+ keywords?: readonly string[];
41
+ /** In the list but not runnable. */
42
+ disabled?: boolean;
43
+ /** What running it does. */
44
+ onSelect?: () => void;
45
+ }
46
+ export interface CommandPaletteProps extends Pick<NebaStyleProps, 'size' | 'color' | 'density'> {
47
+ /** Everything the palette can do. */
48
+ items: readonly CommandItem[];
49
+ /** Whether the palette is open. Use with `onOpenChange` for a controlled one. */
50
+ open?: boolean;
51
+ /** Whether it starts open, for an uncontrolled one. @default false */
52
+ defaultOpen?: boolean;
53
+ onOpenChange?: (open: boolean) => void;
54
+ /**
55
+ * Called when a command is run, after its own `onSelect`. The palette closes
56
+ * either way.
57
+ */
58
+ onSelect?: (item: CommandItem) => void;
59
+ /**
60
+ * The keystroke that opens the palette, bound on the window. Written the way
61
+ * [Shortcut](../display/shortcut) writes them, so `Mod` is Command on a Mac
62
+ * and Control everywhere else. `false` binds nothing.
63
+ * @default 'Mod+K'
64
+ */
65
+ shortcut?: string | false;
66
+ /** How wide the sheet may get. A number of pixels or any CSS length. */
67
+ width?: number | string;
68
+ /** How tall the list may get before it scrolls. @default 320 */
69
+ maxHeight?: number | string;
70
+ /**
71
+ * Which language the placeholder, the empty line and the dialog's own name
72
+ * are written in — a BCP 47 tag such as `ko`, `pt-BR` or `zh-Hant`.
73
+ * Unsupported tags fall back to English.
74
+ */
75
+ locale?: string;
76
+ /** The placeholder in the field. Defaults to the `locale`'s wording. */
77
+ placeholder?: string;
78
+ /** The line where the rows would be, when nothing matched. */
79
+ emptyMessage?: React.ReactNode;
80
+ /** The accessible name of the dialog, which has no visible title. */
81
+ label?: string;
82
+ /** Class names for the sheet. */
83
+ className?: string;
84
+ /**
85
+ * Class names for the parts around it. `className` is the sheet, so the scrim
86
+ * behind it is `classNames.backdrop`.
87
+ */
88
+ classNames?: NebaSlots<CommandPaletteSlot>;
89
+ }
90
+ /**
91
+ * Everything an application can do, behind one field.
92
+ *
93
+ * The shape a keyboard-first product takes once it has more actions than a menu
94
+ * bar can hold: a reader types what they want instead of remembering where it
95
+ * was put. It is not a [Menu](./menu) — a menu is a short list in one place, and
96
+ * every row is visible before you look for it. It is not a
97
+ * [Combobox](./combobox) either: what comes back is not a value, it is
98
+ * something happening.
99
+ *
100
+ * Base UI's Autocomplete owns the list — the highlight the pointer and the arrow
101
+ * keys share, `aria-activedescendant`, Enter running the highlighted row — and
102
+ * its Dialog owns the sheet, the scrim, the focus trap and returning the focus
103
+ * to wherever the reader was.
104
+ */
105
+ export declare function CommandPalette({ items, open, defaultOpen, onOpenChange, onSelect, shortcut, width, maxHeight, locale, placeholder, emptyMessage, label, size, color, density, className, classNames }: CommandPaletteProps): React.JSX.Element;
@@ -0,0 +1 @@
1
+ "use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Autocomplete as n}from"@base-ui/react/autocomplete";import{Dialog as l}from"@base-ui/react/dialog";import{Shortcut as r}from"../shortcut/Shortcut.js";import{commandMessages as s,useMessages as o}from"../../internal/i18n.js";import{searchHaystack as i,searchText as c}from"../../internal/search.js";import{controlTextLeadingClasses as d,cx as m,hasContent as p,metaTextClasses as u,radiusClasses as h,surfaceClasses as x,surfaceSlots as f,toLength as b}from"../../internal/styles.js";const g=["fixed inset-0 z-50 bg-(--neba-scrim)","[backdrop-filter:blur(2px)]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),y=[x,"relative flex w-full flex-col overflow-hidden","border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),v={xs:"max-w-sm",sm:"max-w-md",md:"max-w-xl",lg:"max-w-2xl",xl:"max-w-3xl"},w={xs:"h-9",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},N={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},k={xs:"px-2.5",sm:"px-3",md:"px-3.5",lg:"px-4",xl:"px-5"},j=["flex cursor-pointer items-center gap-3 select-none","[transition:background-color_var(--neba-duration)_var(--neba-ease)]","data-[highlighted]:bg-(--n-soft) data-[highlighted]:text-(--n-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)"].join(" ");function C(e){return i([e.label,e.group,...e.keywords??[]])}export function CommandPalette({items:i,open:x,defaultOpen:K=!1,onOpenChange:S,onSelect:_,shortcut:z="Mod+K",width:L,maxHeight:E=320,locale:M,placeholder:O,emptyMessage:P,label:V,size:D="md",color:F="primary",density:H="default",className:I,classNames:R}){const $=o(s,M),[A,B]=a.useState(K),[T,W]=a.useState(""),q=x??A,G=a.useCallback(e=>{void 0===x&&B(e),S?.(e)},[x,S]);a.useEffect(()=>{if(!1===z)return;const e=e=>{(function(e,t){const a=t.toLowerCase().split("+"),n=a[a.length-1],l=new Set(a.slice(0,-1)),r=/mac|iphone|ipad/i.test("undefined"==typeof navigator?"":navigator.platform||navigator.userAgent)?e.metaKey:e.ctrlKey;return!(l.has("mod")!==r||l.has("shift")!==e.shiftKey||l.has("alt")!==e.altKey||!l.has("mod")&&l.has("ctrl")!==e.ctrlKey||!l.has("mod")&&l.has("meta")!==e.metaKey||e.key.toLowerCase()!==n)})(e,z)&&(e.preventDefault(),G(!0))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[z,G]);const J=a.useMemo(()=>i.map(C),[i]),Q=a.useMemo(()=>{const e=c(T);return""===e?i:i.filter((t,a)=>J[a].includes(e))},[i,J,T]),U=b(L),X=b(E);return e(l.Root,{open:q,onOpenChange:e=>{e||W(""),G(e)},children:t(l.Portal,{children:[e(l.Backdrop,{className:m("neba-portal",g,R?.backdrop)}),e(l.Viewport,{className:m("neba-portal fixed inset-0 z-50 flex justify-center p-4 pt-[12vh]",R?.viewport),children:e(l.Popup,{"aria-label":V??$.label,className:m(y,h[D],d[D],void 0===U?v[D]:"","self-start",I),style:{...f(F,3),...void 0===U?null:{maxWidth:U}},children:t(n.Root,{open:!0,mode:"list",items:Q,filter:null,value:T,onValueChange:e=>W(e),itemToStringValue:e=>e.label,children:[e("div",{className:`flex shrink-0 items-center border-b [border-color:var(--n-line)] ${k[D]}`,children:e(n.Input,{autoFocus:!0,placeholder:O??$.search,className:m("min-w-0 flex-1 bg-transparent [font:inherit] text-inherit [outline:none]","placeholder:text-(--neba-muted-fg) caret-(--n-accent)",w[D],R?.input)})}),e(n.List,{className:m("min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",R?.list),style:{maxHeight:X},children:(l,s)=>t(a.Fragment,{children:[l.group&&l.group!==Q[s-1]?.group?e("div",{role:"presentation",className:m(k[D],"pt-2 pb-1 font-medium text-(--neba-muted-fg)",u[D],R?.group),children:l.group}):null,t(n.Item,{index:s,value:l,disabled:l.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),_?.(e),G(!1))})(l),className:m(j,h[D],k[D],N["compact"===H?"xs":D],R?.item),children:[p(l.icon)?e("span",{className:"flex h-[1lh] shrink-0 items-center [&_svg]:size-[1.15em]",children:l.icon}):null,t("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:"truncate",children:l.label}),p(l.description)?e("span",{className:`truncate text-(--neba-muted-fg) ${u[D]}`,children:l.description}):null]}),l.shortcut?e(r,{size:"xs",keys:l.shortcut,className:"shrink-0"}):null]})]},l.value)}),e(n.Empty,{className:m(k[D],"py-6 text-center text-(--neba-muted-fg)",u[D],R?.empty),children:P??$.empty})]})})})]})})}
@@ -0,0 +1,2 @@
1
+ export { CommandPalette } from './CommandPalette.js';
2
+ export type { CommandItem, CommandPaletteProps } from './CommandPalette.js';
@@ -0,0 +1 @@
1
+ export{CommandPalette}from"./CommandPalette.js";
@@ -1 +1 @@
1
- "use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{boxPaddingXClasses as m}from"../box/Box.js";const o={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"};export const Container=/*@__PURE__*/e.forwardRef(function({maxWidth:e="none",padded:n=!0,size:a="md",density:t="default",centered:s=!0,render:d,className:i,children:c,...l},x){const f=["block w-full","none"===e?"":o[e],s?"mx-auto":"",n?m[t][a]:"",i??""].filter(Boolean).join(" ");return r({render:d,ref:x,props:{className:f,children:c,...l}})});
1
+ "use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{boxPaddingXClasses as m}from"../box/Box.js";import{cx as n}from"../../internal/styles.js";const o={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"};export const Container=/*@__PURE__*/e.forwardRef(function({maxWidth:e="none",padded:t=!0,size:a="md",density:s="default",centered:d=!0,render:i,className:c,children:l,...x},f){const p=n("block w-full","none"===e?"":o[e],d?"mx-auto":"",t?m[s][a]:"",c??"");return r({render:i,ref:f,props:{className:p,children:l,...x}})});
@@ -0,0 +1,55 @@
1
+ import * as React from 'react';
2
+ import type { NebaDensity, NebaOrientation, NebaSize } from '../../types.js';
3
+ export interface DataListProps extends Omit<React.ComponentPropsWithoutRef<'dl'>, 'color'> {
4
+ /**
5
+ * Where the label sits.
6
+ *
7
+ * - `horizontal` — beside the value, in a column of its own. The default, and
8
+ * the shape a details panel takes.
9
+ * - `vertical` — above it. For a narrow column, and for values long enough
10
+ * that a label beside them would leave most of the row empty.
11
+ * @default 'horizontal'
12
+ */
13
+ orientation?: NebaOrientation;
14
+ /**
15
+ * How wide the label column is when `horizontal`. A number of pixels or any
16
+ * CSS length. Left out, it is as wide as the widest label — which is what
17
+ * keeps every value in the list starting at the same place.
18
+ */
19
+ labelWidth?: number | string;
20
+ /** Draws a hairline between the rows. @default false */
21
+ dividers?: boolean;
22
+ /** @default 'md' */
23
+ size?: NebaSize;
24
+ /** Changes the gaps between rows and columns, and nothing else. @default 'default' */
25
+ density?: NebaDensity;
26
+ /** The rows. */
27
+ children?: React.ReactNode;
28
+ }
29
+ export interface DataListItemProps {
30
+ /** What the value is called. */
31
+ label: React.ReactNode;
32
+ /** The value. A node, so a Chip, a link or a piece of code all fit. */
33
+ children?: React.ReactNode;
34
+ }
35
+ /**
36
+ * One pair: what it is called, and what it is.
37
+ *
38
+ * A fragment rather than an element, so the `<dt>` and the `<dd>` land as direct
39
+ * children of the `<dl>` and the grid can line every label up against every
40
+ * other. It has no `size` or `density` of its own — those belong to the list.
41
+ */
42
+ export declare function DataListItem({ label, children }: DataListItemProps): React.JSX.Element;
43
+ /**
44
+ * A list of things and what they are called — a details panel, a summary of a
45
+ * record, the metadata under a heading.
46
+ *
47
+ * It is a real `<dl>` with real `<dt>`/`<dd>` pairs, which is the whole reason
48
+ * it is a component rather than a two-column [Table](./table): a table is a grid
49
+ * of *rows*, all of the same shape, and a screen reader reads it by walking a
50
+ * grid. This is a set of *pairs*, and each one is read as "label, value" — which
51
+ * is what a details panel actually is.
52
+ *
53
+ * It draws no surface. Put it in a [Card](../surfaces/card) when one is wanted.
54
+ */
55
+ export declare const DataList: React.ForwardRefExoticComponent<DataListProps & React.RefAttributes<HTMLDListElement>>;
@@ -0,0 +1 @@
1
+ "use client";import{jsx as t,Fragment as e,jsxs as n}from"react/jsx-runtime";import*as d from"react";import{controlTextLeadingClasses as a,hasContent as o,metaTextClasses as p,toLength as r}from"../../internal/styles.js";const l=/*@__PURE__*/d.createContext({size:"md",density:"default",orientation:"horizontal"}),s={default:{xs:"gap-x-3",sm:"gap-x-4",md:"gap-x-5",lg:"gap-x-6",xl:"gap-x-8"},compact:{xs:"gap-x-2",sm:"gap-x-2.5",md:"gap-x-3",lg:"gap-x-4",xl:"gap-x-5"}},i={default:{xs:"gap-y-2",sm:"gap-y-2.5",md:"gap-y-3",lg:"gap-y-3.5",xl:"gap-y-4"},compact:{xs:"gap-y-1",sm:"gap-y-1.5",md:"gap-y-2",lg:"gap-y-2",xl:"gap-y-2.5"}},m=["[&>dt:nth-of-type(n+2)]:border-t [&>dd:nth-of-type(n+2)]:border-t","[&>dt]:[border-color:var(--neba-border)] [&>dd]:[border-color:var(--neba-border)]"].join(" "),f={default:{xs:"[&>dt:nth-of-type(n+2)]:pt-2 [&>dd:nth-of-type(n+2)]:pt-2",sm:"[&>dt:nth-of-type(n+2)]:pt-2.5 [&>dd:nth-of-type(n+2)]:pt-2.5",md:"[&>dt:nth-of-type(n+2)]:pt-3 [&>dd:nth-of-type(n+2)]:pt-3",lg:"[&>dt:nth-of-type(n+2)]:pt-3.5 [&>dd:nth-of-type(n+2)]:pt-3.5",xl:"[&>dt:nth-of-type(n+2)]:pt-4 [&>dd:nth-of-type(n+2)]:pt-4"},compact:{xs:"[&>dt:nth-of-type(n+2)]:pt-1 [&>dd:nth-of-type(n+2)]:pt-1",sm:"[&>dt:nth-of-type(n+2)]:pt-1.5 [&>dd:nth-of-type(n+2)]:pt-1.5",md:"[&>dt:nth-of-type(n+2)]:pt-2 [&>dd:nth-of-type(n+2)]:pt-2",lg:"[&>dt:nth-of-type(n+2)]:pt-2 [&>dd:nth-of-type(n+2)]:pt-2",xl:"[&>dt:nth-of-type(n+2)]:pt-2.5 [&>dd:nth-of-type(n+2)]:pt-2.5"}};export function DataListItem({label:r,children:s}){const{size:i,orientation:m}=d.useContext(l);return n(e,{children:[t("dt",{className:["min-w-0 text-(--neba-muted-fg)",p[i],"vertical"===m?"mb-0.5":"py-px"].join(" "),children:r}),t("dd",{className:`m-0 min-w-0 text-(--neba-fg) ${a[i]}`,children:o(s)?s:null})]})}export const DataList=/*@__PURE__*/d.forwardRef(function({orientation:e="horizontal",labelWidth:n,dividers:a=!1,size:o="md",density:p="default",className:y,style:x,children:c,...h},g){const u=d.useMemo(()=>({size:o,density:p,orientation:e}),[o,p,e]),b=r(n);return t(l.Provider,{value:u,children:t("dl",{ref:g,className:["m-0 min-w-0","vertical"===e?"flex flex-col":"grid [grid-template-columns:var(--n-label)_minmax(0,1fr)] items-baseline",s[p][o],i[p][o],a?`${m} ${f[p][o]}`:"",y??""].filter(Boolean).join(" "),style:{"--n-label":b??"max-content",...x},...h,children:c})})});
@@ -0,0 +1,2 @@
1
+ export { DataList, DataListItem } from './DataList.js';
2
+ export type { DataListItemProps, DataListProps } from './DataList.js';
@@ -0,0 +1 @@
1
+ export{DataList,DataListItem}from"./DataList.js";
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as r from"react";import{Box as a}from"../box/Box.js";import{Checkbox as o}from"../checkbox/Checkbox.js";import{Pagination as l}from"../pagination/Pagination.js";import{Select as s}from"../select/Select.js";import{TextField as i}from"../text-field/TextField.js";import{compareValues as c,dataHeaderHeights as u,dataRowHeights as d,dataTickWidths as p,defaultColumnWidth as m,keysBetween as h,minColumnWidth as f,nextSort as g,pageBounds as v,searchText as y,sortRows as b,virtualWindow as k}from"../../internal/data-table.js";import{emptyMessages as w,fillMessage as x,tableMessages as C,useMessages as S}from"../../internal/i18n.js";import{ChevronIcon as M}from"../../internal/icons.js";import{controlTextLeadingClasses as N,cx as K,hasContent as z,metaTextClasses as $,paddingXValues as j,srOnlyClasses as E}from"../../internal/styles.js";const _=["[--n-row:transparent]","[transition:background-color_var(--neba-duration)_var(--neba-ease)]"].join(" "),R={"--n-stripe":"color-mix(in oklab, var(--neba-fg) 4%, transparent)"},D=["group/sort flex w-full min-w-0 cursor-pointer items-center gap-1","text-inherit [outline:none]","[transition:color_var(--neba-duration)_var(--neba-ease)]","hover:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","[&_svg]:pointer-events-none [&_svg]:size-[1.15em] [&_svg]:shrink-0"].join(" "),L=["absolute inset-y-0 z-10 w-2 cursor-col-resize select-none","end-0 translate-x-1/2 rtl:-translate-x-1/2","after:absolute after:inset-y-1 after:start-1/2 after:w-px","after:[background:transparent]","after:[transition:background_var(--neba-duration)_var(--neba-ease)]","hover:after:[background:var(--n-accent)]"].join(" ");function P(){return t("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("circle",{cx:"7.25",cy:"7.25",r:"4.75",stroke:"currentColor",strokeWidth:"1.5"}),e("path",{d:"m10.75 10.75 2.75 2.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}function A(e){return"number"==typeof e?`${e}px`:e}export function DataTable({headers:T,items:H,getRowKey:B,variant:I="outline",size:W="sm",color:F="primary",density:O="compact",elevation:q=0,height:U,maxHeight:X,rowHeight:Y,striped:V=!1,hoverable:G=!0,stickyHeader:J=!0,caption:Q,label:Z,empty:ee,virtual:te=!0,overscan:ne=8,sortable:re=!1,sortMode:ae="single",sort:oe,defaultSort:le,onSortChange:se,resizable:ie=!1,columnWidths:ce,defaultColumnWidths:ue,onColumnWidthsChange:de,selectionMode:pe="none",selected:me,defaultSelected:he,onSelectedChange:fe,checkboxes:ge=!1,onRowClick:ve,onRowActivate:ye,paging:be="scroll",page:ke,defaultPage:we=1,onPageChange:xe,pageSize:Ce,defaultPageSize:Se=25,onPageSizeChange:Me,pageSizeOptions:Ne=[10,25,50,100],footer:Ke,search:ze,defaultSearch:$e,onSearchChange:je,searchable:Ee=!1,searchPlaceholder:_e,filter:Re,toolbar:De,manual:Le=!1,rowCount:Pe,locale:Ae,className:Te,style:He,...Be}){const Ie=S(C,Ae),We=S(w,Ae),Fe=r.useId(),Oe=Y??d[O][W],qe=u[O][W],Ue=j[O][W],Xe=r.useMemo(()=>new Set(!0===Le?["sort","filter","pages"]:Le||[]),[Le]),Ye=r.useMemo(()=>T.filter(e=>!e.hidden),[T]),Ve=Ye.some(e=>void 0!==e.group),Ge="none"!==pe,Je="multiple"===pe,Qe=Ge&&ge,Ze=r.useMemo(()=>H.map((e,t)=>{const n=B?B(e,t):t;return{row:e,identity:n,key:String(n),origin:t}}),[H,B]),[et,tt]=r.useState($e??""),nt=(ze??et).trim(),rt=r.useMemo(()=>{if(Xe.has("filter"))return Ze;const e=y(nt),t=Ye.filter(e=>!1!==e.searchable);let n=Ze;return""!==e&&t.length>0&&(n=n.filter(n=>t.some(t=>{const r=t.value?t.value(n.row):n.row[t.key];return y(r).includes(e)}))),Re?n.filter(e=>Re(e.row,e.origin)):n},[Ze,Ye,nt,Re,Xe]),at=r.useMemo(()=>new Intl.Collator(Ae,{numeric:!0,sensitivity:"base"}),[Ae]),[ot,lt]=r.useState(le??[]),st=oe??ot,it=r.useMemo(()=>Xe.has("sort")?rt:b(rt,st,e=>{const t=Ye.find(t=>t.key===e);if(!t)return null;if(t.compare)return(e,n)=>t.compare(e.row,n.row);const n=t.value?t.value:e=>e[t.key];return(e,t)=>c(n(e.row),n(t.row),at)}),[rt,st,Ye,at,Xe]),[ct,ut]=r.useState(we),[dt,pt]=r.useState(Se),mt=Ce??dt,ht=Xe.has("pages")?Pe??it.length:it.length,ft=v(ht,ke??ct,mt),gt=r.useMemo(()=>"pages"!==be||Xe.has("pages")?it:it.slice(ft.start,ft.end),[it,be,Xe,ft.start,ft.end]),vt="pages"===be?ft.start:0,yt=r.useMemo(()=>gt.map(e=>e.key),[gt]),bt=r.useMemo(()=>new Map(Ze.map(e=>[e.key,e])),[Ze]),[kt,wt]=r.useState(he??[]),xt=me??kt,Ct=r.useMemo(()=>new Set(xt.map(String)),[xt]),[St,Mt]=r.useState(null),Nt=r.useRef(null),Kt=r.useRef({paged:gt,pagedKeys:yt,byKey:bt,selectedKeys:Ct,multiple:Je});Kt.current={paged:gt,pagedKeys:yt,byKey:bt,selectedKeys:Ct,multiple:Je};const zt=r.useCallback(e=>{const t=[],n=[];for(const r of e){const e=Kt.current.byKey.get(r);e&&(t.push(e.identity),n.push(e.row))}void 0===me&&wt(t),fe?.(t,n)},[me,fe]),$t=r.useCallback(e=>{Nt.current=e,zt([e])},[zt]),jt=r.useCallback(e=>{const t=Kt.current.selectedKeys,n=new Set(t);n.has(e)?n.delete(e):n.add(e),Nt.current=e,zt([...n])},[zt]),Et=r.useCallback((e,t)=>{const n=Kt.current.pagedKeys,r=Nt.current??n[0];if(void 0===r)return;const a=h(n,r,e);0!==a.length&&zt(t?[...new Set([...Kt.current.selectedKeys,...a])]:a)},[zt]),_t=r.useRef(null),Rt=r.useRef(null),Dt=r.useRef(null),[Lt,Pt]=r.useState(0),[At,Tt]=r.useState(0),Ht=void 0!==U||void 0!==X,Bt=te&&Ht&&gt.length>0;r.useLayoutEffect(()=>{const e=_t.current;if(!e||!Bt)return;const t=new ResizeObserver(([e])=>{Pt(e.contentRect.height)});return t.observe(e),Pt(e.clientHeight),()=>t.disconnect()},[Bt]);const It=r.useCallback(e=>{if(!Bt)return;const t=Math.floor(e.currentTarget.scrollTop/Oe)*Oe;Tt(e=>e===t?e:t)},[Bt,Oe]),Wt=Bt?k(At,Lt,Oe,gt.length,ne):{start:0,end:gt.length,before:0,after:0},Ft=gt.slice(Wt.start,Wt.end),Ot=Ge&&null!==St&&Ft.some(e=>e.key===St),[qt,Ut]=r.useState(ue??{}),Xt=ce??qt,Yt=r.useCallback(e=>{void 0===ce&&Ut(e),de?.(e)},[ce,de]),Vt=r.useRef(new Map),Gt=r.useCallback(e=>{const t=_t.current;if(!t||!Ht)return;const n=J?qe*(Ve?2:1):0,r=e*Oe;r<t.scrollTop+n?t.scrollTop=Math.max(0,r-n):r+Oe>t.scrollTop+t.clientHeight&&(t.scrollTop=r+Oe-t.clientHeight)},[Ht,J,qe,Ve,Oe]),Jt=(e,t)=>{const n=Kt.current.paged,r=Math.min(Math.max(e,0),n.length-1),a=n[r];a&&(t.preventDefault(),Mt(a.key),Gt(r),t.shiftKey&&Kt.current.multiple?Et(a.key,!1):t.ctrlKey||t.metaKey||$t(a.key))};const Qt=r.useCallback(e=>{const t=Rt.current,n=Kt.current.paged;if(!t||0===n.length)return null;const r=t.getBoundingClientRect().top,a=Math.floor((e-r)/Oe);return Math.min(Math.max(a,0),n.length-1)},[Oe]),Zt=r.useRef(null),en=r.useCallback(e=>{const t=Qt(e),n=null===t?void 0:Kt.current.paged[t];n&&(Mt(n.key),Et(n.key,!1))},[Qt,Et]),tn=r.useRef(en);tn.current=en;function nn(e,t){if(Ge&&!t.target.closest('button, a, input, select, textarea, [role="button"]'))if(Dt.current?.focus({preventScroll:!0}),Mt(e.key),2!==t.button){if(0===t.button)return t.shiftKey&&Je?(t.preventDefault(),void Et(e.key,t.ctrlKey||t.metaKey)):void((t.ctrlKey||t.metaKey)&&Je?jt(e.key):($t(e.key),Je&&(e=>{if(Zt.current)return;const t=e=>{const t=Zt.current,r=_t.current;if(!t)return;if(t.y=e.clientY,tn.current(t.y),!r||!Ht)return;const a=r.getBoundingClientRect(),o=a.top+Oe-t.y,l=t.y-(a.bottom-Oe);t.speed=o>0?-Math.min(o,40):l>0?Math.min(l,40):0,0!==t.speed&&null===t.frame&&(t.frame=requestAnimationFrame(n))},n=()=>{const e=Zt.current,t=_t.current;e&&t&&0!==e.speed?(t.scrollTop+=e.speed,tn.current(e.y),e.frame=requestAnimationFrame(n)):e&&(e.frame=null)},r=()=>{const e=Zt.current;null!=e?.frame&&cancelAnimationFrame(e.frame),Zt.current=null,window.removeEventListener("pointermove",t),window.removeEventListener("pointerup",r),window.removeEventListener("pointercancel",r)};Zt.current={y:e,speed:0,frame:null,stop:r},window.addEventListener("pointermove",t),window.addEventListener("pointerup",r),window.addEventListener("pointercancel",r)})(t.clientY)))}else Kt.current.selectedKeys.has(e.key)||$t(e.key)}r.useEffect(()=>()=>Zt.current?.stop(),[]);const rn=r.useMemo(()=>yt.reduce((e,t)=>Ct.has(t)?e+1:e,0),[yt,Ct]),an=yt.length>0&&rn===yt.length,on=p[W],ln=e=>Xt[e.key]??e.width,sn=(Qe?on:0)+Ye.reduce((e,t)=>e+(ln(t)??f),0),cn=Ye.length>0&&Ye.every(e=>void 0!==ln(e)),un=Ye.length+(Qe?1:0)+(cn?1:0),dn=r.useMemo(()=>{const e=[];return Ye.forEach((t,n)=>{const r=e[e.length-1];r&&void 0!==r.label&&r.label===t.group?r.span+=1:e.push({label:t.group,span:1,from:n})}),e},[Ye]),pn={padding:`0 ${Ue}`,borderBottom:"1px solid var(--n-line)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},mn={...pn,height:`${qe}px`,backgroundColor:"var(--n-panel-press)"},hn="odd"===V?0:1,fn=r.useMemo(()=>new Intl.NumberFormat(Ae),[Ae]),gn=Ke??"pages"===be,vn=x(Ie.range,{start:fn.format(0===ht?0:("pages"===be?ft.start:0)+1),end:fn.format("pages"===be?ft.end:ht),total:fn.format(ht)}),yn=e=>{void 0===ke&&ut(e),xe?.(e)},bn=(n,r,a)=>{const o=n.sortable??re,l=n.resizable??ie,s=(i=n.key,st.find(e=>e.key===i));var i;const c=s?st.findIndex(e=>e.key===n.key)+1:0,u=n.headerAlign??n.align??"start";return t("th",{ref:e=>{e?Vt.current.set(n.key,e):Vt.current.delete(n.key)},scope:"col",rowSpan:a,"aria-sort":s?"asc"===s.direction?"ascending":"descending":void 0,className:K("relative font-semibold select-none",s?"text-(--n-accent)":"text-(--neba-muted-fg)",J?"sticky z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...mn,top:J?2!==a&&Ve?qe:0:void 0,textAlign:u},children:[o?t("button",{type:"button",className:K(D,"end"===u?"justify-end":"center"===u?"justify-center":"justify-start"),onClick:e=>((e,t)=>{const n=g(st,e,t&&"multiple"===ae);void 0===oe&&lt(n),se?.(n)})(n.key,e.shiftKey),children:[e("span",{className:"min-w-0 truncate",children:n.label??n.key}),e("span",{"aria-hidden":"true",className:K("flex items-center","desc"===s?.direction?"rotate-0":"rotate-180",s?"":"text-transparent group-hover/sort:text-inherit group-focus-visible/sort:text-inherit"),children:e(M,{})}),c>1?e("span",{"aria-hidden":"true",className:"text-[0.85em] tabular-nums",children:c}):null]}):e("span",{className:"block truncate",children:n.label??n.key}),l&&r<Ye.length-1?e("span",{"aria-hidden":"true",className:L,onPointerDown:e=>((e,t)=>{t.preventDefault(),t.stopPropagation();const n=t.currentTarget,r={...Xt};for(const e of Ye){const t=Vt.current.get(e.key);t&&void 0===r[e.key]&&(r[e.key]=Math.round(t.getBoundingClientRect().width))}const a="rtl"===getComputedStyle(n).direction,o=t.clientX,l=r[e]??m,s=Ye.find(t=>t.key===e)?.minWidth??f;n.setPointerCapture(t.pointerId);const i=t=>{const n=(t.clientX-o)*(a?-1:1);Yt({...r,[e]:Math.max(s,Math.round(l+n))})},c=()=>{n.removeEventListener("pointermove",i),n.removeEventListener("pointerup",c),n.removeEventListener("pointercancel",c)};n.addEventListener("pointermove",i),n.addEventListener("pointerup",c),n.addEventListener("pointercancel",c)})(n.key,e),onDoubleClick:()=>(e=>{const t={...Xt};delete t[e],Yt(t)})(n.key)}):null]},n.key)},kn=t=>e("span",{className:"flex items-center justify-center",children:t}),wn=t=>e("td",{role:Ge?"gridcell":void 0,style:{...pn,padding:0,overflow:"visible"},children:kn(e(o,{size:W,color:F,checked:Ct.has(t.key),"aria-label":Ie.selectRow,onCheckedChange:()=>{Je?jt(t.key):$t(t.key)}}))}),xn=Je?kn(e(o,{size:W,color:F,checked:an,indeterminate:rn>0&&!an,"aria-label":Ie.selectAll,onCheckedChange:()=>{if(an){const e=new Set(yt);zt([...Ct].filter(t=>!e.has(t)))}else zt([...new Set([...Ct,...yt])])}})):null,Cn=cn?e("th",{"aria-hidden":"true",className:K(J?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...mn,padding:0}}):null,Sn=(t,n)=>n>0?e("tr",{"aria-hidden":"true",style:{height:`${n}px`},children:e("td",{colSpan:un,style:{padding:0,border:0}})},t):null;return t(a,{variant:I,size:W,color:F,density:O,elevation:q,padded:!1,className:K("flex flex-col overflow-hidden",Ge?"has-[:focus-visible]:[outline:2px_solid_var(--n-ring)] has-[:focus-visible]:outline-offset-2":"",Te),style:{...R,...He},...Be,children:[Ee||z(De)?t("div",{className:"flex items-center gap-2",style:{padding:`${Ue} ${Ue}`,borderBottom:"1px solid var(--n-line)"},children:[Ee?e(i,{size:W,color:F,density:O,variant:"outline",type:"search",className:"w-full max-w-64",startIcon:e(P,{}),placeholder:_e??Ie.search,"aria-label":_e??Ie.search,value:ze??et,onChange:e=>{const t=e.target.value;void 0===ze&&tt(t),yn(1),je?.(t)}}):null,z(De)?e("div",{className:"ms-auto flex items-center gap-2",children:De}):null]}):null,e("div",{ref:_t,className:"min-h-0 flex-auto overflow-auto overscroll-contain",style:{height:A(U),maxHeight:A(X)},onScroll:It,children:t("table",{ref:Dt,role:Ge?"grid":void 0,"aria-label":Z,"aria-multiselectable":Je||void 0,"aria-rowcount":Bt?gt.length+1:void 0,"aria-activedescendant":Ot?`${Fe}-${St}`:void 0,tabIndex:Ge?0:void 0,className:K("w-full text-start [outline:none]",N[W],"text-(--neba-fg)",Ge?"select-none":""),style:{tableLayout:"fixed",borderCollapse:"separate",borderSpacing:0,minWidth:`${sn}px`},onKeyDown:function(e){if(!Ge||e.target!==e.currentTarget)return;const t=Kt.current.paged;if(0===t.length)return;const n=null===St?-1:Kt.current.pagedKeys.indexOf(St),r=Math.max(1,Math.floor((Lt||10*Oe)/Oe)-1);switch(e.key){case"ArrowDown":Jt(n+1,e);break;case"ArrowUp":Jt(-1===n?0:n-1,e);break;case"Home":Jt(0,e);break;case"End":Jt(t.length-1,e);break;case"PageDown":Jt(-1===n?0:n+r,e);break;case"PageUp":Jt(-1===n?0:n-r,e);break;case" ":-1!==n&&(e.preventDefault(),(e.ctrlKey||e.metaKey)&&Je?jt(t[n].key):$t(t[n].key));break;case"a":case"A":(e.ctrlKey||e.metaKey)&&Je&&(e.preventDefault(),zt(Kt.current.pagedKeys));break;case"Escape":e.preventDefault(),zt([]);break;case"Enter":-1!==n&&ye&&(e.preventDefault(),ye(t[n].row,vt+n))}},children:[Q?e("caption",{className:K($[W],"text-(--neba-muted-fg)"),style:{padding:`0.5rem ${Ue}`,textAlign:"start"},children:Q}):null,t("colgroup",{children:[Qe?e("col",{style:{width:`${on}px`}}):null,Ye.map(t=>{const n=ln(t);return e("col",{style:void 0===n?void 0:{width:`${n}px`}},t.key)}),cn?e("col",{}):null]}),t("thead",{children:[Ve?t("tr",{style:{height:`${qe}px`},children:[Qe?e("th",{scope:"col",rowSpan:2,className:K(J?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...mn,padding:0,overflow:"visible"},children:xn}):null,dn.map(t=>void 0===t.label?bn(Ye[t.from],t.from,2):e("th",{scope:"colgroup",colSpan:t.span,className:K("font-semibold text-(--neba-muted-fg) select-none",J?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...mn,textAlign:"center"},children:t.label},`group-${t.from}`)),cn?r.cloneElement(Cn,{rowSpan:2}):null]}):null,t("tr",{style:{height:`${qe}px`},children:[Qe&&!Ve?e("th",{scope:"col",className:K(J?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...mn,padding:0,overflow:"visible"},children:xn}):null,Ye.map((e,t)=>Ve&&void 0===e.group?null:bn(e,t)),cn&&!Ve?Cn:null]})]}),e("tbody",{ref:Rt,children:0===gt.length?e("tr",{children:e("td",{colSpan:un,className:"text-(--neba-muted-fg)",style:{padding:`2rem ${Ue}`,textAlign:"center"},children:ee??We.title})}):t(n,{children:[Sn("before",Wt.before),Ft.map((n,r)=>{const a=Wt.start+r,o=Ct.has(n.key),l=St===n.key;return t("tr",{id:`${Fe}-${n.key}`,"aria-selected":Ge?o:void 0,"aria-rowindex":Bt?a+2:void 0,"data-neba-row":n.key,className:K(_,o?"[--n-row:var(--n-soft-press)]":!1!==V&&a%2===hn?"[--n-row:var(--n-stripe)]":"",!o&&G?"hover:[--n-row:var(--n-soft)]":"",l&&Ge?"[box-shadow:inset_0_0_0_1px_var(--n-ring)]":"",Ge||ve?"cursor-default":""),style:{height:`${Oe}px`,backgroundColor:"var(--n-row)"},onPointerDown:e=>nn(n,e),onClick:e=>ve?.(n.row,vt+a,e),onDoubleClick:()=>ye?.(n.row,vt+a),children:[Qe?wn(n):null,Ye.map(t=>e("td",{role:Ge?"gridcell":void 0,style:{...pn,textAlign:t.align??"start"},children:t.render?t.render(n.row,vt+a):n.row[t.key]},t.key)),cn?e("td",{"aria-hidden":"true",style:{...pn,padding:0}}):null]},n.key)}),Sn("after",Wt.after)]})})]})}),gn?t("div",{className:K("flex flex-wrap items-center gap-3",$[W]),style:{padding:`0.375rem ${Ue}`,borderTop:"1px solid var(--n-line)"},children:[e("span",{className:"text-(--neba-muted-fg) tabular-nums",children:vn}),Ge&&Ct.size>0?e("span",{className:"text-(--n-accent) tabular-nums",children:x(Ie.selected,{count:fn.format(Ct.size)})}):null,t("div",{className:"ms-auto flex items-center gap-2",children:["pages"===be&&Ne.length>0?e(n,{children:e(s,{size:W,color:F,density:O,variant:"outline",label:Ie.rowsPerPage,items:Ne.map(e=>({value:e})),value:mt,onValueChange:e=>{const t=Number(e);void 0===Ce&&pt(t),yn(Math.floor(ft.start/t)+1),Me?.(t)}})}):null,"pages"===be?e(l,{size:W,color:F,count:ft.pages,page:ft.page,siblingCount:0,onPageChange:yn}):null]})]}):null,!gn&&Bt?e("span",{className:E,"aria-live":"polite",children:vn}):null]})}
1
+ "use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{Box as a}from"../box/Box.js";import{Checkbox as l}from"../checkbox/Checkbox.js";import{Pagination as o}from"../pagination/Pagination.js";import{Select as s}from"../select/Select.js";import{TextField as i}from"../text-field/TextField.js";import{compareValues as c,dataHeaderHeights as u,dataRowHeights as d,dataTickWidths as p,defaultColumnWidth as m,keysBetween as h,minColumnWidth as f,nextSort as g,pageBounds as y,sortRows as v,virtualWindow as b}from"../../internal/data-table.js";import{beginPointerDrag as k}from"../../internal/drag.js";import{emptyMessages as w,fillMessage as x,tableMessages as C,useMessages as S}from"../../internal/i18n.js";import{searchHaystack as M,searchText as N}from"../../internal/search.js";import{ChevronIcon as K}from"../../internal/icons.js";import{observeResize as z}from"../../internal/observe.js";import{controlTextLeadingClasses as j,cx as $,hasContent as _,metaTextClasses as R,paddingXValues as D,srOnlyClasses as E,toLength as A}from"../../internal/styles.js";const P=["[--n-row:transparent]","[transition:background-color_var(--neba-duration)_var(--neba-ease)]"].join(" "),T={"--n-stripe":"color-mix(in oklab, var(--neba-fg) 4%, transparent)"},L=["group/sort flex w-full min-w-0 cursor-pointer items-center gap-1","text-inherit [outline:none]","[transition:color_var(--neba-duration)_var(--neba-ease)]","hover:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","[&_svg]:pointer-events-none [&_svg]:size-[1.15em] [&_svg]:shrink-0"].join(" "),H=["absolute inset-y-0 z-10 w-2 cursor-col-resize select-none","end-0 translate-x-1/2 rtl:-translate-x-1/2","after:absolute after:inset-y-1 after:start-1/2 after:w-px","after:[background:transparent]","after:[transition:background_var(--neba-duration)_var(--neba-ease)]","hover:after:[background:var(--n-accent)] data-[dragging]:after:[background:var(--n-accent)]"].join(" ");function I(){return t("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("circle",{cx:"7.25",cy:"7.25",r:"4.75",stroke:"currentColor",strokeWidth:"1.5"}),e("path",{d:"m10.75 10.75 2.75 2.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function DataTable({headers:B,items:W,getRowKey:F,variant:O="outline",size:q="sm",color:U="primary",density:X="compact",elevation:Y=0,height:V,maxHeight:G,rowHeight:J,striped:Q=!1,hoverable:Z=!0,stickyHeader:ee=!0,caption:te,label:re,empty:ne,virtual:ae=!0,overscan:le=8,sortable:oe=!1,sortMode:se="single",sort:ie,defaultSort:ce,onSortChange:ue,resizable:de=!1,columnWidths:pe,defaultColumnWidths:me,onColumnWidthsChange:he,selectionMode:fe="none",selected:ge,defaultSelected:ye,onSelectedChange:ve,checkboxes:be=!1,onRowClick:ke,onRowActivate:we,paging:xe="scroll",page:Ce,defaultPage:Se=1,onPageChange:Me,pageSize:Ne,defaultPageSize:Ke=25,onPageSizeChange:ze,pageSizeOptions:je=[10,25,50,100],footer:$e,search:_e,defaultSearch:Re,onSearchChange:De,searchable:Ee=!1,searchPlaceholder:Ae,filter:Pe,toolbar:Te,manual:Le=!1,rowCount:He,locale:Ie,className:Be,style:We,...Fe}){const Oe=S(C,Ie),qe=S(w,Ie),Ue=n.useId(),Xe=J??d[X][q],Ye=u[X][q],Ve=D[X][q],Ge=n.useMemo(()=>new Set(!0===Le?["sort","filter","pages"]:Le||[]),[Le]),Je=n.useMemo(()=>B.filter(e=>!e.hidden),[B]),Qe=Je.some(e=>void 0!==e.group),Ze="none"!==fe,et="multiple"===fe,tt=Ze&&be,rt=n.useMemo(()=>W.map((e,t)=>{const r=F?F(e,t):t;return{row:e,identity:r,key:String(r),origin:t}}),[W,F]),[nt,at]=n.useState(Re??""),lt=(_e??nt).trim(),ot=""!==lt&&!Ge.has("filter"),st=n.useMemo(()=>Je.filter(e=>!1!==e.searchable),[Je]),it=n.useMemo(()=>ot&&0!==st.length?rt.map(e=>M(st.map(t=>t.value?t.value(e.row):e.row[t.key]))):null,[rt,st,ot]),ct=n.useMemo(()=>{if(Ge.has("filter"))return rt;const e=N(lt),t=""!==e&&it?rt.filter(t=>it[t.origin].includes(e)):rt;return Pe?t.filter(e=>Pe(e.row,e.origin)):t},[rt,lt,Pe,Ge,it]),ut=n.useMemo(()=>new Intl.Collator(Ie,{numeric:!0,sensitivity:"base"}),[Ie]),[dt,pt]=n.useState(ce??[]),mt=ie??dt,ht=n.useMemo(()=>Ge.has("sort")?ct:v(ct,mt,e=>{const t=Je.find(t=>t.key===e);if(!t)return null;if(t.compare)return(e,r)=>t.compare(e.row,r.row);const r=t.value?t.value:e=>e[t.key];return(e,t)=>c(r(e.row),r(t.row),ut)}),[ct,mt,Je,ut,Ge]),[ft,gt]=n.useState(Se),[yt,vt]=n.useState(Ke),bt=Ne??yt,kt=Ge.has("pages")?He??ht.length:ht.length,wt=y(kt,Ce??ft,bt),xt=n.useMemo(()=>"pages"!==xe||Ge.has("pages")?ht:ht.slice(wt.start,wt.end),[ht,xe,Ge,wt.start,wt.end]),Ct="pages"===xe?wt.start:0,St=n.useMemo(()=>xt.map(e=>e.key),[xt]),Mt=n.useMemo(()=>new Map(rt.map(e=>[e.key,e])),[rt]),[Nt,Kt]=n.useState(ye??[]),zt=ge??Nt,jt=n.useMemo(()=>new Set(zt.map(String)),[zt]),[$t,_t]=n.useState(null),Rt=n.useRef(null),Dt=n.useRef({paged:xt,pagedKeys:St,byKey:Mt,selectedKeys:jt,multiple:et});Dt.current={paged:xt,pagedKeys:St,byKey:Mt,selectedKeys:jt,multiple:et};const Et=n.useCallback(e=>{const t=[],r=[];for(const n of e){const e=Dt.current.byKey.get(n);e&&(t.push(e.identity),r.push(e.row))}void 0===ge&&Kt(t),ve?.(t,r)},[ge,ve]),At=n.useCallback(e=>{Rt.current=e,Et([e])},[Et]),Pt=n.useCallback(e=>{const t=Dt.current.selectedKeys,r=new Set(t);r.has(e)?r.delete(e):r.add(e),Rt.current=e,Et([...r])},[Et]),Tt=n.useCallback((e,t)=>{const r=Dt.current.pagedKeys,n=Rt.current??r[0];if(void 0===n)return;const a=h(r,n,e);0!==a.length&&Et(t?[...new Set([...Dt.current.selectedKeys,...a])]:a)},[Et]),Lt=n.useRef(null),Ht=n.useRef(null),It=n.useRef(null),[Bt,Wt]=n.useState(0),[Ft,Ot]=n.useState(0),qt=void 0!==V||void 0!==G,Ut=ae&&qt&&xt.length>0;n.useLayoutEffect(()=>{const e=Lt.current;if(e&&Ut)return Wt(e.clientHeight),z(e,e=>Wt(e.contentRect.height))},[Ut]);const Xt=n.useCallback(e=>{if(!Ut)return;const t=Math.floor(e.currentTarget.scrollTop/Xe)*Xe;Ot(e=>e===t?e:t)},[Ut,Xe]),Yt=Ut?b(Ft,Bt,Xe,xt.length,le):{start:0,end:xt.length,before:0,after:0},Vt=xt.slice(Yt.start,Yt.end),Gt=Ze&&null!==$t&&Vt.some(e=>e.key===$t),[Jt,Qt]=n.useState(me??{}),Zt=pe??Jt,er=n.useCallback(e=>{void 0===pe&&Qt(e),he?.(e)},[pe,he]),tr=n.useRef(new Map),rr=n.useRef(null);n.useEffect(()=>()=>rr.current?.(),[]);const nr=n.useCallback(e=>{const t=Lt.current;if(!t||!qt)return;const r=ee?Ye*(Qe?2:1):0,n=e*Xe;n<t.scrollTop+r?t.scrollTop=Math.max(0,n-r):n+Xe>t.scrollTop+t.clientHeight&&(t.scrollTop=n+Xe-t.clientHeight)},[qt,ee,Ye,Qe,Xe]),ar=(e,t)=>{const r=Dt.current.paged,n=Math.min(Math.max(e,0),r.length-1),a=r[n];a&&(t.preventDefault(),_t(a.key),nr(n),t.shiftKey&&Dt.current.multiple?Tt(a.key,!1):t.ctrlKey||t.metaKey||At(a.key))};const lr=n.useCallback(e=>{const t=Ht.current,r=Dt.current.paged;if(!t||0===r.length)return null;const n=t.getBoundingClientRect().top,a=Math.floor((e-n)/Xe);return Math.min(Math.max(a,0),r.length-1)},[Xe]),or=n.useRef(null),sr=n.useCallback(e=>{const t=lr(e),r=null===t?void 0:Dt.current.paged[t];r&&(_t(r.key),Tt(r.key,!1))},[lr,Tt]),ir=n.useRef(sr);ir.current=sr;function cr(e,t){if(Ze&&!t.target.closest('button, a, input, select, textarea, [role="button"]'))if(It.current?.focus({preventScroll:!0}),_t(e.key),2!==t.button){if(0===t.button)return t.shiftKey&&et?(t.preventDefault(),void Tt(e.key,t.ctrlKey||t.metaKey)):void((t.ctrlKey||t.metaKey)&&et?Pt(e.key):(At(e.key),et&&(e=>{if(or.current)return;const t=e=>{const t=or.current,n=Lt.current;if(!t)return;if(t.y=e.clientY,ir.current(t.y),!n||!qt)return;const a=n.getBoundingClientRect(),l=a.top+Xe-t.y,o=t.y-(a.bottom-Xe);t.speed=l>0?-Math.min(l,40):o>0?Math.min(o,40):0,0!==t.speed&&null===t.frame&&(t.frame=requestAnimationFrame(r))},r=()=>{const e=or.current,t=Lt.current;e&&t&&0!==e.speed?(t.scrollTop+=e.speed,ir.current(e.y),e.frame=requestAnimationFrame(r)):e&&(e.frame=null)},n=()=>{const e=or.current;null!=e?.frame&&cancelAnimationFrame(e.frame),or.current=null,window.removeEventListener("pointermove",t),window.removeEventListener("pointerup",n),window.removeEventListener("pointercancel",n)};or.current={y:e,speed:0,frame:null,stop:n},window.addEventListener("pointermove",t),window.addEventListener("pointerup",n),window.addEventListener("pointercancel",n)})(t.clientY)))}else Dt.current.selectedKeys.has(e.key)||At(e.key)}n.useEffect(()=>()=>or.current?.stop(),[]);const ur=n.useMemo(()=>St.reduce((e,t)=>jt.has(t)?e+1:e,0),[St,jt]),dr=St.length>0&&ur===St.length,pr=p[q],mr=e=>Zt[e.key]??e.width,hr=(tt?pr:0)+Je.reduce((e,t)=>e+(mr(t)??f),0),fr=Je.length>0&&Je.every(e=>void 0!==mr(e)),gr=Je.length+(tt?1:0)+(fr?1:0),yr=n.useMemo(()=>{const e=[];return Je.forEach((t,r)=>{const n=e[e.length-1];n&&void 0!==n.label&&n.label===t.group?n.span+=1:e.push({label:t.group,span:1,from:r})}),e},[Je]),vr={padding:`0 ${Ve}`,borderBottom:"1px solid var(--n-line)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},br={...vr,height:`${Ye}px`,backgroundColor:"var(--n-panel-press)"},kr="odd"===Q?0:1,wr=n.useMemo(()=>new Intl.NumberFormat(Ie),[Ie]),xr=$e??"pages"===xe,Cr=x(Oe.range,{start:wr.format(0===kt?0:("pages"===xe?wt.start:0)+1),end:wr.format("pages"===xe?wt.end:kt),total:wr.format(kt)}),Sr=e=>{void 0===Ce&&gt(e),Me?.(e)},Mr=(r,n,a)=>{const l=r.sortable??oe,o=r.resizable??de,s=(i=r.key,mt.find(e=>e.key===i));var i;const c=s?mt.findIndex(e=>e.key===r.key)+1:0,u=r.headerAlign??r.align??"start";return t("th",{ref:e=>{e?tr.current.set(r.key,e):tr.current.delete(r.key)},scope:"col",rowSpan:a,"aria-sort":s?"asc"===s.direction?"ascending":"descending":void 0,className:$("relative font-semibold select-none",s?"text-(--n-accent)":"text-(--neba-muted-fg)",ee?"sticky z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...br,top:ee?2!==a&&Qe?Ye:0:void 0,textAlign:u},children:[l?t("button",{type:"button",className:$(L,"end"===u?"justify-end":"center"===u?"justify-center":"justify-start"),onClick:e=>((e,t)=>{const r=g(mt,e,t&&"multiple"===se);void 0===ie&&pt(r),ue?.(r)})(r.key,e.shiftKey),children:[e("span",{className:"min-w-0 truncate",children:r.label??r.key}),e("span",{"aria-hidden":"true",className:$("flex items-center","desc"===s?.direction?"rotate-0":"rotate-180",s?"":"text-transparent group-hover/sort:text-inherit group-focus-visible/sort:text-inherit"),children:e(K,{})}),c>1?e("span",{"aria-hidden":"true",className:"text-[0.85em] tabular-nums",children:c}):null]}):e("span",{className:"block truncate",children:r.label??r.key}),o&&n<Je.length-1?e("span",{"aria-hidden":"true",className:H,onPointerDown:e=>((e,t)=>{t.preventDefault(),t.stopPropagation();const r=t.currentTarget,n={...Zt};for(const e of Je){const t=tr.current.get(e.key);t&&void 0===n[e.key]&&(n[e.key]=Math.round(t.getBoundingClientRect().width))}const a="rtl"===getComputedStyle(r).direction,l=t.clientX,o=n[e]??m,s=Je.find(t=>t.key===e)?.minWidth??f;rr.current=k({target:r,pointerId:t.pointerId,onMove:t=>{const r=(t.clientX-l)*(a?-1:1);er({...n,[e]:Math.max(s,Math.round(o+r))})},onEnd:()=>{rr.current=null}})})(r.key,e),onDoubleClick:()=>(e=>{const t={...Zt};delete t[e],er(t)})(r.key)}):null]},r.key)},Nr=t=>e("span",{className:"flex items-center justify-center",children:t}),Kr=t=>e("td",{role:Ze?"gridcell":void 0,style:{...vr,padding:0,overflow:"visible"},children:Nr(e(l,{size:q,color:U,checked:jt.has(t.key),"aria-label":Oe.selectRow,onCheckedChange:()=>{et?Pt(t.key):At(t.key)}}))}),zr=et?Nr(e(l,{size:q,color:U,checked:dr,indeterminate:ur>0&&!dr,"aria-label":Oe.selectAll,onCheckedChange:()=>{if(dr){const e=new Set(St);Et([...jt].filter(t=>!e.has(t)))}else Et([...new Set([...jt,...St])])}})):null,jr=fr?e("th",{"aria-hidden":"true",className:$(ee?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...br,padding:0}}):null,$r=(t,r)=>r>0?e("tr",{"aria-hidden":"true",style:{height:`${r}px`},children:e("td",{colSpan:gr,style:{padding:0,border:0}})},t):null;return t(a,{variant:O,size:q,color:U,density:X,elevation:Y,padded:!1,className:$("flex flex-col overflow-hidden",Ze?"has-[:focus-visible]:[outline:2px_solid_var(--n-ring)] has-[:focus-visible]:outline-offset-2":"",Be),style:{...T,...We},...Fe,children:[Ee||_(Te)?t("div",{className:"flex items-center gap-2",style:{padding:`${Ve} ${Ve}`,borderBottom:"1px solid var(--n-line)"},children:[Ee?e(i,{size:q,color:U,density:X,variant:"outline",type:"search",className:"w-full max-w-64",startIcon:e(I,{}),placeholder:Ae??Oe.search,"aria-label":Ae??Oe.search,value:_e??nt,onChange:e=>{const t=e.target.value;void 0===_e&&at(t),Sr(1),De?.(t)}}):null,_(Te)?e("div",{className:"ms-auto flex items-center gap-2",children:Te}):null]}):null,e("div",{ref:Lt,className:"min-h-0 flex-auto overflow-auto overscroll-contain",style:{height:A(V),maxHeight:A(G)},onScroll:Xt,children:t("table",{ref:It,role:Ze?"grid":void 0,"aria-label":re,"aria-multiselectable":et||void 0,"aria-rowcount":Ut?xt.length+1:void 0,"aria-activedescendant":Gt?`${Ue}-${$t}`:void 0,tabIndex:Ze?0:void 0,className:$("w-full text-start [outline:none]",j[q],"text-(--neba-fg)",Ze?"select-none":""),style:{tableLayout:"fixed",borderCollapse:"separate",borderSpacing:0,minWidth:`${hr}px`},onKeyDown:function(e){if(!Ze||e.target!==e.currentTarget)return;const t=Dt.current.paged;if(0===t.length)return;const r=null===$t?-1:Dt.current.pagedKeys.indexOf($t),n=Math.max(1,Math.floor((Bt||10*Xe)/Xe)-1);switch(e.key){case"ArrowDown":ar(r+1,e);break;case"ArrowUp":ar(-1===r?0:r-1,e);break;case"Home":ar(0,e);break;case"End":ar(t.length-1,e);break;case"PageDown":ar(-1===r?0:r+n,e);break;case"PageUp":ar(-1===r?0:r-n,e);break;case" ":-1!==r&&(e.preventDefault(),(e.ctrlKey||e.metaKey)&&et?Pt(t[r].key):At(t[r].key));break;case"a":case"A":(e.ctrlKey||e.metaKey)&&et&&(e.preventDefault(),Et(Dt.current.pagedKeys));break;case"Escape":e.preventDefault(),Et([]);break;case"Enter":-1!==r&&we&&(e.preventDefault(),we(t[r].row,Ct+r))}},children:[te?e("caption",{className:$(R[q],"text-(--neba-muted-fg)"),style:{padding:`0.5rem ${Ve}`,textAlign:"start"},children:te}):null,t("colgroup",{children:[tt?e("col",{style:{width:`${pr}px`}}):null,Je.map(t=>{const r=mr(t);return e("col",{style:void 0===r?void 0:{width:`${r}px`}},t.key)}),fr?e("col",{}):null]}),t("thead",{children:[Qe?t("tr",{style:{height:`${Ye}px`},children:[tt?e("th",{scope:"col",rowSpan:2,className:$(ee?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...br,padding:0,overflow:"visible"},children:zr}):null,yr.map(t=>void 0===t.label?Mr(Je[t.from],t.from,2):e("th",{scope:"colgroup",colSpan:t.span,className:$("font-semibold text-(--neba-muted-fg) select-none",ee?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...br,textAlign:"center"},children:t.label},`group-${t.from}`)),fr?n.cloneElement(jr,{rowSpan:2}):null]}):null,t("tr",{style:{height:`${Ye}px`},children:[tt&&!Qe?e("th",{scope:"col",className:$(ee?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...br,padding:0,overflow:"visible"},children:zr}):null,Je.map((e,t)=>Qe&&void 0===e.group?null:Mr(e,t)),fr&&!Qe?jr:null]})]}),e("tbody",{ref:Ht,children:0===xt.length?e("tr",{children:e("td",{colSpan:gr,className:"text-(--neba-muted-fg)",style:{padding:`2rem ${Ve}`,textAlign:"center"},children:ne??qe.title})}):t(r,{children:[$r("before",Yt.before),Vt.map((r,n)=>{const a=Yt.start+n,l=jt.has(r.key),o=$t===r.key;return t("tr",{id:`${Ue}-${r.key}`,"aria-selected":Ze?l:void 0,"aria-rowindex":Ut?a+2:void 0,"data-neba-row":r.key,className:$(P,l?"[--n-row:var(--n-soft-press)]":!1!==Q&&a%2===kr?"[--n-row:var(--n-stripe)]":"",!l&&Z?"hover:[--n-row:var(--n-soft)]":"",o&&Ze?"[box-shadow:inset_0_0_0_1px_var(--n-ring)]":"",Ze||ke?"cursor-default":""),style:{height:`${Xe}px`,backgroundColor:"var(--n-row)"},onPointerDown:e=>cr(r,e),onClick:e=>ke?.(r.row,Ct+a,e),onDoubleClick:()=>we?.(r.row,Ct+a),children:[tt?Kr(r):null,Je.map(t=>e("td",{role:Ze?"gridcell":void 0,style:{...vr,textAlign:t.align??"start"},children:t.render?t.render(r.row,Ct+a):r.row[t.key]},t.key)),fr?e("td",{"aria-hidden":"true",style:{...vr,padding:0}}):null]},r.key)}),$r("after",Yt.after)]})})]})}),xr?t("div",{className:$("flex flex-wrap items-center gap-3",R[q]),style:{padding:`0.375rem ${Ve}`,borderTop:"1px solid var(--n-line)"},children:[e("span",{className:"text-(--neba-muted-fg) tabular-nums",children:Cr}),Ze&&jt.size>0?e("span",{className:"text-(--n-accent) tabular-nums",children:x(Oe.selected,{count:wr.format(jt.size)})}):null,t("div",{className:"ms-auto flex items-center gap-2",children:["pages"===xe&&je.length>0?e(r,{children:e(s,{size:q,color:U,density:X,variant:"outline",label:Oe.rowsPerPage,items:je.map(e=>({value:e})),value:bt,onValueChange:e=>{const t=Number(e);void 0===Ne&&vt(t),Sr(Math.floor(wt.start/t)+1),ze?.(t)}})}):null,"pages"===xe?e(o,{size:q,color:U,count:wt.pages,page:wt.page,siblingCount:0,onPageChange:Sr}):null]})]}):null,!xr&&Ut?e("span",{className:E,"aria-live":"polite",children:Cr}):null]})}
@@ -1,6 +1,18 @@
1
1
  import * as React from 'react';
2
2
  import { Dialog as BaseUIDialog } from '@base-ui/react/dialog';
3
- import type { NebaStyleProps } from '../../types.js';
3
+ import type { NebaSlots, NebaStyleProps } from '../../types.js';
4
+ /**
5
+ * The parts a Dialog draws around its popup.
6
+ *
7
+ * `className` is the popup — the sheet itself — which is the one element a
8
+ * caller means by "the dialog". Everything named here sits either outside it
9
+ * (`backdrop`, `viewport`) or inside it (the rest).
10
+ *
11
+ * The first two are the ones that could not be reached any other way: both
12
+ * render at the end of `<body>`, outside the popup, so no selector written
13
+ * against the sheet finds them.
14
+ */
15
+ export type DialogSlot = 'backdrop' | 'viewport' | 'title' | 'description' | 'close' | 'body' | 'actions';
4
16
  /**
5
17
  * A dialog takes `size`, `color` and `density` and stops there.
6
18
  *
@@ -85,6 +97,11 @@ export interface DialogProps extends Pick<NebaStyleProps, 'size' | 'color' | 'de
85
97
  * @default true
86
98
  */
87
99
  dismissible?: boolean;
100
+ /**
101
+ * Class names for the parts around the popup. `className` is the popup — the
102
+ * sheet — so the scrim behind it is `classNames.backdrop`.
103
+ */
104
+ classNames?: NebaSlots<DialogSlot>;
88
105
  /** The body. */
89
106
  children?: React.ReactNode;
90
107
  }
@@ -114,4 +131,4 @@ export declare const DialogClose: React.ForwardRefExoticComponent<Omit<import("@
114
131
  * the header and the actions stay put while only the body scrolls, which is why
115
132
  * `dividers` matters more here than on a Card.
116
133
  */
117
- export declare function Dialog({ size, color, density, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, locale, closeLabel, width, fullWidth, fullScreen, modal, dismissible, className, style, children, ...props }: DialogProps): React.JSX.Element;
134
+ export declare function Dialog({ size, color, density, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, locale, closeLabel, width, fullWidth, fullScreen, modal, dismissible, className, classNames, style, children, ...props }: DialogProps): React.JSX.Element;
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as l}from"@base-ui/react/dialog";import{boxPaddingXClasses as n,boxPaddingYClasses as i}from"../box/Box.js";import{actionMessages as o,useMessages as r}from"../../internal/i18n.js";import{CloseIcon as t}from"../../internal/icons.js";import{hasContent as s,metaTextClasses as c,radiusClasses as d,sheetBodyClasses as m,sheetHeaderGapClasses as f,sheetSectionGapClasses as u,sheetTitleClasses as p,surfaceClasses as x,surfaceSlots as b}from"../../internal/styles.js";const h={xs:"max-w-80",sm:"max-w-96",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl"},g=[x,"relative flex w-full flex-col overflow-hidden","border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),v=["fixed inset-0 z-50 bg-(--neba-scrim)","[backdrop-filter:blur(2px)]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),y="border-t [border-color:var(--n-line)]";export const DialogClose=l.Close;export function Dialog({size:x="md",color:j="primary",density:w="default",open:$,defaultOpen:_,onOpenChange:N,trigger:k,title:C,description:z,actions:B,dividers:D=!1,showClose:O=!0,locale:P,closeLabel:T,width:W,fullWidth:L=!0,fullScreen:R=!1,modal:S=!0,dismissible:V=!0,className:q,style:A,children:E,...F}){const G=r(o,P),H=n[w][x],I=i[w][x],J=D?`${H} ${I}`:H,K=s(C)||s(z),M=s(B);return a(l.Root,{open:$,defaultOpen:_,modal:S,disablePointerDismissal:!V,onOpenChange:(e,a)=>{V||e||"escape-key"!==a.reason?N?.(e):a.cancel()},children:[k?e(l.Trigger,{render:k}):null,a(l.Portal,{children:[e(l.Backdrop,{className:`neba-portal ${v}`}),e(l.Viewport,{className:["neba-portal fixed inset-0 z-50 flex justify-center",R?"items-stretch":"items-center p-4"].join(" "),children:a(l.Popup,{className:[g,m[x],R?"h-full max-w-none rounded-none":`max-h-full ${d[x]} ${void 0===W?h[x]:""}`,R||L?"":"w-auto",D?"":`${I} ${u[x]}`,q??""].filter(Boolean).join(" "),style:{...b(j,3),...void 0===W?null:{maxWidth:"number"==typeof W?`${W}px`:W},...A},...F,children:[K||O?a("div",{className:`flex shrink-0 items-start gap-3 ${J}`,children:[a("div",{className:`flex min-w-0 flex-1 flex-col ${f[x]}`,children:[s(C)?e(l.Title,{className:`font-semibold ${p[x]} m-0`,children:C}):null,s(z)?e(l.Description,{className:`m-0 text-(--neba-muted-fg) ${c[x]}`,children:z}):null]}),O?e(l.Close,{"aria-label":T??G.close,className:["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--neba-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),children:e(t,{})}):null]}):null,s(E)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",J,D&&(K||O)?y:"",D?"":"py-1 -my-1"].filter(Boolean).join(" "),children:E}):null,M?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",J,D?y:""].filter(Boolean).join(" "),children:B}):null]})})]})]})}
1
+ "use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as l}from"@base-ui/react/dialog";import{boxPaddingXClasses as n,boxPaddingYClasses as i}from"../box/Box.js";import{actionMessages as o,useMessages as r}from"../../internal/i18n.js";import{CloseIcon as s}from"../../internal/icons.js";import{cx as t,hasContent as c,metaTextClasses as d,radiusClasses as m,sheetBodyClasses as p,sheetHeaderGapClasses as f,sheetSectionGapClasses as u,sheetTitleClasses as b,surfaceClasses as x,surfaceSlots as h}from"../../internal/styles.js";const v={xs:"max-w-80",sm:"max-w-96",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl"},g=[x,"relative flex w-full flex-col overflow-hidden","border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),y=["fixed inset-0 z-50 bg-(--neba-scrim)","[backdrop-filter:blur(2px)]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),w="border-t [border-color:var(--n-line)]";export const DialogClose=l.Close;export function Dialog({size:x="md",color:j="primary",density:N="default",open:_,defaultOpen:k,onOpenChange:$,trigger:C,title:z,description:D,actions:O,dividers:P=!1,showClose:B=!0,locale:T,closeLabel:W,width:L,fullWidth:R=!0,fullScreen:S=!1,modal:V=!0,dismissible:q=!0,className:A,classNames:E,style:F,children:G,...H}){const I=r(o,T),J=n[N][x],K=i[N][x],M=P?`${J} ${K}`:J,Q=c(z)||c(D),U=c(O);return a(l.Root,{open:_,defaultOpen:k,modal:V,disablePointerDismissal:!q,onOpenChange:(e,a)=>{q||e||"escape-key"!==a.reason?$?.(e):a.cancel()},children:[C?e(l.Trigger,{render:C}):null,a(l.Portal,{children:[e(l.Backdrop,{className:t("neba-portal",y,E?.backdrop)}),e(l.Viewport,{className:t("neba-portal fixed inset-0 z-50 flex justify-center",S?"items-stretch":"items-center p-4",E?.viewport),children:a(l.Popup,{className:t(g,p[x],S?"h-full max-w-none rounded-none":`max-h-full ${m[x]} ${void 0===L?v[x]:""}`,S||R?"":"w-auto",P?"":`${K} ${u[x]}`,A??""),style:{...h(j,3),...void 0===L?null:{maxWidth:"number"==typeof L?`${L}px`:L},...F},...H,children:[Q||B?a("div",{className:`flex shrink-0 items-start gap-3 ${M}`,children:[a("div",{className:`flex min-w-0 flex-1 flex-col ${f[x]}`,children:[c(z)?e(l.Title,{className:t("font-semibold",b[x],"m-0",E?.title),children:z}):null,c(D)?e(l.Description,{className:t("m-0 text-(--neba-muted-fg)",d[x],E?.description),children:D}):null]}),B?e(l.Close,{"aria-label":W??I.close,className:t("flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--neba-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",E?.close),children:e(s,{})}):null]}):null,c(G)?e("div",{className:t("min-h-0 flex-1 overflow-y-auto overscroll-contain",M,P&&(Q||B)?w:"",P?"":"py-1 -my-1",E?.body),children:G}):null,U?e("div",{className:t("flex shrink-0 flex-wrap items-center justify-end gap-2",M,P?w:"",E?.actions),children:O}):null]})})]})]})}
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{Separator as n}from"@base-ui/react/separator";import{metaTextClasses as l}from"../../internal/styles.js";const i="[border-color:var(--n-line)]";function a(e){return"number"==typeof e?`${e}px`:e}const o={horizontal:{start:["w-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","w-4 shrink-0"]},vertical:{start:["h-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","h-4 shrink-0"]}},s={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const Divider=/*@__PURE__*/t.forwardRef(function({orientation:t="horizontal",color:c="primary",size:d="md",length:f,thickness:h,textAlign:m="center",className:p,style:u,children:x,...w},b){const v="vertical"===t,g=null!=x&&!1!==x&&""!==x,$={"--n-line":`var(--neba-${c}-line)`,"--n-rule":a(h)??"1px"},j=a(f),y={...$,...void 0===j?null:v?{height:j}:{width:j},...u};if(!g)return e(n,{ref:b,orientation:t,className:[v?"w-0 border-l [border-left-width:var(--n-rule)] "+(void 0===j?"self-stretch":""):"h-0 w-full border-t [border-top-width:var(--n-rule)]",i,p??""].filter(Boolean).join(" "),style:y,...w});const[k,N]=o[t][m],z=v?"w-0 border-l [border-left-width:var(--n-rule)]":"h-0 border-t [border-top-width:var(--n-rule)]";return r(n,{ref:b,orientation:t,"aria-label":"string"==typeof x?x:void 0,className:["flex items-center",v?"w-auto flex-col "+(void 0===j?"self-stretch":""):"w-full",s[d],p??""].filter(Boolean).join(" "),style:y,...w,children:[e("span",{"aria-hidden":"true",className:`${z} ${k} ${i}`}),e("span",{className:["shrink-0 whitespace-nowrap text-(--neba-muted-fg)",l[d],v?"[writing-mode:vertical-rl]":""].filter(Boolean).join(" "),children:x}),e("span",{"aria-hidden":"true",className:`${z} ${N} ${i}`})]})});
1
+ "use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{Separator as l}from"@base-ui/react/separator";import{cx as a,metaTextClasses as n,toLength as i}from"../../internal/styles.js";const s="[border-color:var(--n-line)]",o={horizontal:{start:["w-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","w-4 shrink-0"]},vertical:{start:["h-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","h-4 shrink-0"]}},d={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const Divider=/*@__PURE__*/t.forwardRef(function({orientation:t="horizontal",color:c="primary",size:f="md",length:h,thickness:m,textAlign:p="center",className:u,style:x,children:w,...v},b){const g="vertical"===t,$=null!=w&&!1!==w&&""!==w,k={"--n-line":`var(--neba-${c}-line)`,"--n-rule":i(m)??"1px"},y=i(h),N={...k,...void 0===y?null:g?{height:y}:{width:y},...x};if(!$)return e(l,{ref:b,orientation:t,className:a(g?"w-0 border-l [border-left-width:var(--n-rule)] "+(void 0===y?"self-stretch":""):"h-0 w-full border-t [border-top-width:var(--n-rule)]",s,u??""),style:N,...v});const[j,z]=o[t][p],A=g?"w-0 border-l [border-left-width:var(--n-rule)]":"h-0 border-t [border-top-width:var(--n-rule)]";return r(l,{ref:b,orientation:t,"aria-label":"string"==typeof w?w:void 0,className:a("flex items-center",g?"w-auto flex-col "+(void 0===y?"self-stretch":""):"w-full",d[f],u??""),style:N,...v,children:[e("span",{"aria-hidden":"true",className:`${A} ${j} ${s}`}),e("span",{className:["shrink-0 whitespace-nowrap text-(--neba-muted-fg)",n[f],g?"[writing-mode:vertical-rl]":""].filter(Boolean).join(" "),children:w}),e("span",{"aria-hidden":"true",className:`${A} ${z} ${s}`})]})});
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as r,Fragment as a}from"react/jsx-runtime";import{Dialog as l}from"@base-ui/react/dialog";import{boxPaddingXClasses as n,boxPaddingYClasses as o}from"../box/Box.js";import{actionMessages as s,useMessages as i}from"../../internal/i18n.js";import{CloseIcon as d}from"../../internal/icons.js";import{hasContent as t,metaTextClasses as u,sheetBodyClasses as b,sheetHeaderGapClasses as m,sheetSectionGapClasses as c,sheetTitleClasses as f,surfaceClasses as x,surfaceSlots as p}from"../../internal/styles.js";const g={xs:"w-56",sm:"w-64",md:"w-80",lg:"w-96",xl:"w-[28rem]"},h={left:{xs:"rounded-r-(--neba-radius-xs)",sm:"rounded-r-(--neba-radius-sm)",md:"rounded-r-(--neba-radius-md)",lg:"rounded-r-(--neba-radius-lg)",xl:"rounded-r-(--neba-radius-xl)"},right:{xs:"rounded-l-(--neba-radius-xs)",sm:"rounded-l-(--neba-radius-sm)",md:"rounded-l-(--neba-radius-md)",lg:"rounded-l-(--neba-radius-lg)",xl:"rounded-l-(--neba-radius-xl)"},top:{xs:"rounded-b-(--neba-radius-xs)",sm:"rounded-b-(--neba-radius-sm)",md:"rounded-b-(--neba-radius-md)",lg:"rounded-b-(--neba-radius-lg)",xl:"rounded-b-(--neba-radius-xl)"},bottom:{xs:"rounded-t-(--neba-radius-xs)",sm:"rounded-t-(--neba-radius-sm)",md:"rounded-t-(--neba-radius-md)",lg:"rounded-t-(--neba-radius-lg)",xl:"rounded-t-(--neba-radius-xl)"}},v={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},y={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},w=[x,"relative flex flex-col overflow-hidden","text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[outline:none]"].join(" "),j=["[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),N=["fixed inset-0 z-50 bg-(--neba-scrim)","[backdrop-filter:blur(2px)]",j].join(" "),$="border-t [border-color:var(--n-line)]",_=["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--neba-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" ");export const DrawerClose=l.Close;export function Drawer({side:x="left",mode:k="overlay",size:C="md",color:z="primary",density:B="default",open:D,defaultOpen:O,onOpenChange:P,trigger:T,title:F,description:L,actions:R,dividers:V=!1,showClose:q,locale:A,closeLabel:E,extent:G,rounded:H=!0,modal:I=!0,dismissible:J=!0,className:K,style:M,children:Q,...S}){const U=i(s,A),W="overlay"===k,X="left"===x||"right"===x,Y=q??W,Z=n[B][C],ee=o[B][C],re=V?`${Z} ${ee}`:Z,ae=t(F)||t(L),le=t(R),ne=void 0===G?null:{[X?"width":"height"]:"number"==typeof G?`${G}px`:G},oe=[w,b[C],v[x],H?h[x][C]:"",W?"[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]":"[box-shadow:var(--neba-plate-glass)]",W?j:"",X?`h-full max-w-full ${void 0===G?g[C]:""}`:"w-full "+(void 0===G?"max-h-[85%]":""),V?"":`${ee} ${c[C]}`,K??""].filter(Boolean).join(" "),se=W?l.Title:"h2",ie=W?l.Description:"p",de=r(a,{children:[ae||Y?r("div",{className:`flex shrink-0 items-start gap-3 ${re}`,children:[r("div",{className:`flex min-w-0 flex-1 flex-col ${m[C]}`,children:[t(F)?e(se,{className:`m-0 font-semibold ${f[C]}`,children:F}):null,t(L)?e(ie,{className:`m-0 text-(--neba-muted-fg) ${u[C]}`,children:L}):null]}),Y?W?e(l.Close,{"aria-label":E??U.close,className:_,children:e(d,{})}):e("button",{type:"button","aria-label":E??U.close,className:_,onClick:()=>P?.(!1),children:e(d,{})}):null]}):null,t(Q)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",re,V&&(ae||Y)?$:"",V?"":"py-1 -my-1"].filter(Boolean).join(" "),children:Q}):null,le?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",re,V?$:""].filter(Boolean).join(" "),children:R}):null]});return W?r(l.Root,{open:D,defaultOpen:O,modal:I,disablePointerDismissal:!J,onOpenChange:(e,r)=>{J||e||"escape-key"!==r.reason?P?.(e):r.cancel()},children:[T?e(l.Trigger,{render:T}):null,r(l.Portal,{children:[e(l.Backdrop,{className:`neba-portal ${N}`}),e(l.Viewport,{className:`neba-portal fixed inset-0 z-50 flex ${y[x]}`,children:e(l.Popup,{className:oe,style:{...p(z,3),...ne,...M},...S,children:de})})]})]}):D??O??!0?e("div",{className:oe,style:{...p(z,0),...ne,...M},children:de}):null}
1
+ "use client";import{jsx as e,jsxs as r,Fragment as a}from"react/jsx-runtime";import{Dialog as l}from"@base-ui/react/dialog";import{boxPaddingXClasses as n,boxPaddingYClasses as s}from"../box/Box.js";import{actionMessages as o,useMessages as i}from"../../internal/i18n.js";import{CloseIcon as d}from"../../internal/icons.js";import{cx as t,hasContent as u,metaTextClasses as b,sheetBodyClasses as m,sheetHeaderGapClasses as c,sheetSectionGapClasses as f,sheetTitleClasses as x,surfaceClasses as p,surfaceSlots as g}from"../../internal/styles.js";const h={xs:"w-56",sm:"w-64",md:"w-80",lg:"w-96",xl:"w-[28rem]"},v={left:{xs:"rounded-r-(--neba-radius-xs)",sm:"rounded-r-(--neba-radius-sm)",md:"rounded-r-(--neba-radius-md)",lg:"rounded-r-(--neba-radius-lg)",xl:"rounded-r-(--neba-radius-xl)"},right:{xs:"rounded-l-(--neba-radius-xs)",sm:"rounded-l-(--neba-radius-sm)",md:"rounded-l-(--neba-radius-md)",lg:"rounded-l-(--neba-radius-lg)",xl:"rounded-l-(--neba-radius-xl)"},top:{xs:"rounded-b-(--neba-radius-xs)",sm:"rounded-b-(--neba-radius-sm)",md:"rounded-b-(--neba-radius-md)",lg:"rounded-b-(--neba-radius-lg)",xl:"rounded-b-(--neba-radius-xl)"},bottom:{xs:"rounded-t-(--neba-radius-xs)",sm:"rounded-t-(--neba-radius-sm)",md:"rounded-t-(--neba-radius-md)",lg:"rounded-t-(--neba-radius-lg)",xl:"rounded-t-(--neba-radius-xl)"}},y={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},w={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},j=[p,"relative flex flex-col overflow-hidden","text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[outline:none]"].join(" "),N=["[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),$=["fixed inset-0 z-50 bg-(--neba-scrim)","[backdrop-filter:blur(2px)]",N].join(" "),_="border-t [border-color:var(--n-line)]",k=["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--neba-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" ");export const DrawerClose=l.Close;export function Drawer({side:p="left",mode:C="overlay",size:z="md",color:D="primary",density:O="default",open:P,defaultOpen:B,onOpenChange:T,trigger:F,title:L,description:R,actions:V,dividers:q=!1,showClose:A,locale:E,closeLabel:G,extent:H,rounded:I=!0,modal:J=!0,dismissible:K=!0,className:M,style:Q,children:S,...U}){const W=i(o,E),X="overlay"===C,Y="left"===p||"right"===p,Z=A??X,ee=n[O][z],re=s[O][z],ae=q?`${ee} ${re}`:ee,le=u(L)||u(R),ne=u(V),se=void 0===H?null:{[Y?"width":"height"]:"number"==typeof H?`${H}px`:H},oe=t(j,m[z],y[p],I?v[p][z]:"",X?"[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]":"[box-shadow:var(--neba-plate-glass)]",X?N:"",Y?`h-full max-w-full ${void 0===H?h[z]:""}`:"w-full "+(void 0===H?"max-h-[85%]":""),q?"":`${re} ${f[z]}`,M??""),ie=X?l.Title:"h2",de=X?l.Description:"p",te=r(a,{children:[le||Z?r("div",{className:`flex shrink-0 items-start gap-3 ${ae}`,children:[r("div",{className:`flex min-w-0 flex-1 flex-col ${c[z]}`,children:[u(L)?e(ie,{className:`m-0 font-semibold ${x[z]}`,children:L}):null,u(R)?e(de,{className:`m-0 text-(--neba-muted-fg) ${b[z]}`,children:R}):null]}),Z?X?e(l.Close,{"aria-label":G??W.close,className:k,children:e(d,{})}):e("button",{type:"button","aria-label":G??W.close,className:k,onClick:()=>T?.(!1),children:e(d,{})}):null]}):null,u(S)?e("div",{className:t("min-h-0 flex-1 overflow-y-auto overscroll-contain",ae,q&&(le||Z)?_:"",q?"":"py-1 -my-1"),children:S}):null,ne?e("div",{className:t("flex shrink-0 flex-wrap items-center justify-end gap-2",ae,q?_:""),children:V}):null]});return X?r(l.Root,{open:P,defaultOpen:B,modal:J,disablePointerDismissal:!K,onOpenChange:(e,r)=>{K||e||"escape-key"!==r.reason?T?.(e):r.cancel()},children:[F?e(l.Trigger,{render:F}):null,r(l.Portal,{children:[e(l.Backdrop,{className:`neba-portal ${$}`}),e(l.Viewport,{className:`neba-portal fixed inset-0 z-50 flex ${w[p]}`,children:e(l.Popup,{className:oe,style:{...g(D,3),...se,...Q},...U,children:te})})]})]}):P??B??!0?e("div",{className:oe,style:{...g(D,0),...se,...Q},children:te}):null}
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{useRender as l}from"@base-ui/react/use-render";import{boxPaddingXClasses as a}from"../box/Box.js";import{transitionProps as o}from"../../internal/animate.js";import{emptyMessages as s,useMessages as i}from"../../internal/i18n.js";import{hasContent as m,iconClasses as c,radiusClasses as d,sheetBodyClasses as x,sheetHeaderGapClasses as p,sheetSectionGapClasses as f,sheetTitleClasses as u,surfaceClasses as h,surfaceSlots as v,transitionClasses as y}from"../../internal/styles.js";const b={default:{xs:"py-5",sm:"py-6",md:"py-8",lg:"py-10",xl:"py-12"},compact:{xs:"py-3",sm:"py-3.5",md:"py-4",lg:"py-5",xl:"py-6"}},g={xs:"text-[1.25rem]",sm:"text-[1.5rem]",md:"text-[1.75rem]",lg:"text-[2.125rem]",xl:"text-[2.5rem]"},j={solid:[h,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[h,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"};function N(){return t("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M1.75 9.75h3l.9 1.6h4.7l.9-1.6h3",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"m1.75 9.75 2.1-6a1.5 1.5 0 0 1 1.42-1h5.46a1.5 1.5 0 0 1 1.42 1l2.1 6v2a1.5 1.5 0 0 1-1.5 1.5h-9.5a1.5 1.5 0 0 1-1.5-1.5Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinejoin:"round"})]})}export const Empty=/*@__PURE__*/n.forwardRef(function({variant:n="text",size:h="md",color:k="secondary",density:w="default",elevation:$=0,title:B,icon:L,action:C,locale:W,transition:z,render:E,className:F,style:M,children:R,...Z},q){const A=i(s,W),D=void 0===B?A.title:B,G=void 0===L?e(N,{}):L,H=o(z),I=m(D),J=["flex w-full flex-col items-center justify-center text-center",a[w][h],b[w][h],d[h],f[h],y,j[n],H.className,F??""].filter(Boolean).join(" ");return l({render:E,ref:q,props:{role:"status",className:J,style:{...v(k,$),...H.style,...M},children:t(r,{children:[m(G)?e("span",{className:`flex items-center text-(--neba-muted-fg) ${g[h]} ${c}`,children:G}):null,I||m(R)?t("div",{className:`flex max-w-prose flex-col items-center ${p[h]}`,children:[I?e("div",{className:`neba-title font-semibold ${u[h]}`,children:D}):null,m(R)?e("div",{className:`${x[h]} ${I?"text-(--neba-muted-fg)":""}`,children:R}):null]}):null,m(C)?e("div",{className:"flex flex-wrap items-center justify-center gap-2",children:C}):null]}),...Z}})});
1
+ "use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{useRender as l}from"@base-ui/react/use-render";import{boxPaddingXClasses as a}from"../box/Box.js";import{transitionProps as s}from"../../internal/animate.js";import{emptyMessages as o,useMessages as i}from"../../internal/i18n.js";import{cx as m,hasContent as c,iconClasses as d,radiusClasses as x,sheetBodyClasses as p,sheetHeaderGapClasses as f,sheetSectionGapClasses as u,sheetTitleClasses as h,surfaceClasses as v,surfaceSlots as y,transitionClasses as b}from"../../internal/styles.js";const g={default:{xs:"py-5",sm:"py-6",md:"py-8",lg:"py-10",xl:"py-12"},compact:{xs:"py-3",sm:"py-3.5",md:"py-4",lg:"py-5",xl:"py-6"}},j={xs:"text-[1.25rem]",sm:"text-[1.5rem]",md:"text-[1.75rem]",lg:"text-[2.125rem]",xl:"text-[2.5rem]"},N={solid:[v,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[v,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"};function k(){return t("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M1.75 9.75h3l.9 1.6h4.7l.9-1.6h3",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"m1.75 9.75 2.1-6a1.5 1.5 0 0 1 1.42-1h5.46a1.5 1.5 0 0 1 1.42 1l2.1 6v2a1.5 1.5 0 0 1-1.5 1.5h-9.5a1.5 1.5 0 0 1-1.5-1.5Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinejoin:"round"})]})}export const Empty=/*@__PURE__*/n.forwardRef(function({variant:n="text",size:v="md",color:w="secondary",density:$="default",elevation:L=0,title:B,icon:C,action:W,locale:z,transition:E,render:F,className:M,style:R,children:Z,...q},A){const D=i(o,z),G=void 0===B?D.title:B,H=void 0===C?e(k,{}):C,I=s(E),J=c(G),K=m("flex w-full flex-col items-center justify-center text-center",a[$][v],g[$][v],x[v],u[v],b,N[n],I.className,M??"");return l({render:F,ref:A,props:{role:"status",className:K,style:{...y(w,L),...I.style,...R},children:t(r,{children:[c(H)?e("span",{className:`flex items-center text-(--neba-muted-fg) ${j[v]} ${d}`,children:H}):null,J||c(Z)?t("div",{className:`flex max-w-prose flex-col items-center ${f[v]}`,children:[J?e("div",{className:`neba-title font-semibold ${h[v]}`,children:G}):null,c(Z)?e("div",{className:`${p[v]} ${J?"text-(--neba-muted-fg)":""}`,children:Z}):null]}):null,c(W)?e("div",{className:"flex flex-wrap items-center justify-center gap-2",children:W}):null]}),...q}})});
@@ -0,0 +1,33 @@
1
+ import * as React from 'react';
2
+ import type { NebaSize } from '../../types.js';
3
+ export interface FieldsetProps extends Omit<React.ComponentPropsWithoutRef<'fieldset'>, 'color'> {
4
+ /**
5
+ * What the group is called. It becomes the accessible name of every control
6
+ * inside, so it has to be a phrase that still reads correctly in front of each
7
+ * of them — "Billing address", not "Where should we send it?".
8
+ */
9
+ legend?: React.ReactNode;
10
+ /** A line under the legend. */
11
+ description?: React.ReactNode;
12
+ /** Disables every control inside at once, the way a `<fieldset>` always has. */
13
+ disabled?: boolean;
14
+ /** The type scale of the legend and the gap between the controls. @default 'md' */
15
+ size?: NebaSize;
16
+ children?: React.ReactNode;
17
+ }
18
+ /**
19
+ * A group of controls that answer one question together, with a name on it.
20
+ *
21
+ * It draws no surface, and that is deliberate: a group of fields is a *grouping*
22
+ * and not a sheet, and the sheet already exists — put this inside a
23
+ * [Card](../surfaces/card) or a [Box](../surfaces/box) when one is wanted. What
24
+ * it owns is the legend, the gap the controls stand at, and the one thing only a
25
+ * real `<fieldset>` can do: `disabled` reaches every control inside it,
26
+ * including ones a component three levels down rendered and never heard of it.
27
+ *
28
+ * The legend is a `<div>` pointed at by `aria-labelledby` rather than a
29
+ * `<legend>` — Base UI's decision, and the one that makes the group a normal
30
+ * flex container: a real rendered legend is lifted out of its fieldset's content
31
+ * box by every browser, so a `gap` would put no space under it at all.
32
+ */
33
+ export declare const Fieldset: React.ForwardRefExoticComponent<FieldsetProps & React.RefAttributes<HTMLFieldSetElement>>;
@@ -0,0 +1 @@
1
+ "use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as l from"react";import{Fieldset as r}from"@base-ui/react/fieldset";import{cx as n,hasContent as a,metaTextClasses as i,sheetHeaderGapClasses as t,sheetSectionGapClasses as o,sheetTitleClasses as c}from"../../internal/styles.js";export const Fieldset=/*@__PURE__*/l.forwardRef(function({legend:l,description:d,disabled:m=!1,size:f="md",className:p,children:u,...x},b){const h=a(l)||a(d);return s(r.Root,{ref:b,disabled:m,className:n("m-0 flex min-w-0 flex-col border-0 p-0",o[f],p??""),...x,children:[h?s(r.Legend,{className:`flex min-w-0 flex-col p-0 ${t[f]}`,children:[a(l)?e("span",{className:`font-semibold ${c[f]}`,children:l}):null,a(d)?e("span",{className:`text-(--neba-muted-fg) ${i[f]}`,children:d}):null]}):null,u]})});
@@ -0,0 +1,2 @@
1
+ export { Fieldset } from './Fieldset.js';
2
+ export type { FieldsetProps } from './Fieldset.js';
@@ -0,0 +1 @@
1
+ export{Fieldset}from"./Fieldset.js";