neba 1.9.0 → 1.11.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 (204) hide show
  1. package/README.md +35 -5
  2. package/dist/components/accordion/Accordion.js +1 -1
  3. package/dist/components/alert/Alert.js +1 -1
  4. package/dist/components/anchor/Anchor.js +1 -1
  5. package/dist/components/animate-lighting/AnimateLighting.js +1 -1
  6. package/dist/components/app-logo/AppLogo.js +1 -1
  7. package/dist/components/aspect-ratio/AspectRatio.js +1 -1
  8. package/dist/components/avatar/Avatar.js +1 -1
  9. package/dist/components/avatar-group/AvatarGroup.js +1 -1
  10. package/dist/components/badge/Badge.js +1 -1
  11. package/dist/components/bar-chart/BarChart.d.ts +1 -1
  12. package/dist/components/bar-chart/BarChart.js +1 -1
  13. package/dist/components/blockquote/Blockquote.js +1 -1
  14. package/dist/components/bottom-navigation/BottomNavigation.js +1 -1
  15. package/dist/components/box/Box.js +1 -1
  16. package/dist/components/breadcrumb/Breadcrumb.js +1 -1
  17. package/dist/components/button/Button.js +1 -1
  18. package/dist/components/button-group/ButtonGroup.js +1 -1
  19. package/dist/components/calendar/Calendar.d.ts +72 -0
  20. package/dist/components/calendar/Calendar.js +1 -0
  21. package/dist/components/calendar/index.d.ts +2 -0
  22. package/dist/components/calendar/index.js +1 -0
  23. package/dist/components/card/Card.js +1 -1
  24. package/dist/components/carousel/Carousel.js +1 -1
  25. package/dist/components/chat-bubble/ChatBubble.js +1 -1
  26. package/dist/components/checkbox/Checkbox.d.ts +13 -1
  27. package/dist/components/checkbox/Checkbox.js +1 -1
  28. package/dist/components/chip/Chip.js +1 -1
  29. package/dist/components/code-block/CodeBlock.js +1 -1
  30. package/dist/components/collapsible/Collapsible.js +1 -1
  31. package/dist/components/color-picker/ColorPicker.js +1 -1
  32. package/dist/components/combobox/Combobox.d.ts +29 -2
  33. package/dist/components/combobox/Combobox.js +1 -1
  34. package/dist/components/command-palette/CommandPalette.d.ts +19 -2
  35. package/dist/components/command-palette/CommandPalette.js +1 -1
  36. package/dist/components/confirm/Confirm.d.ts +83 -0
  37. package/dist/components/confirm/Confirm.js +1 -0
  38. package/dist/components/confirm/index.d.ts +2 -0
  39. package/dist/components/confirm/index.js +1 -0
  40. package/dist/components/container/Container.js +1 -1
  41. package/dist/components/data-list/DataList.js +1 -1
  42. package/dist/components/data-table/DataTable.d.ts +104 -1
  43. package/dist/components/data-table/DataTable.js +1 -1
  44. package/dist/components/date-picker/DatePicker.d.ts +40 -8
  45. package/dist/components/date-picker/DatePicker.js +1 -1
  46. package/dist/components/date-range-picker/DateRangePicker.js +1 -1
  47. package/dist/components/date-time-picker/DateTimePicker.js +1 -1
  48. package/dist/components/dialog/Dialog.d.ts +19 -2
  49. package/dist/components/dialog/Dialog.js +1 -1
  50. package/dist/components/divider/Divider.js +1 -1
  51. package/dist/components/drawer/Drawer.d.ts +1 -1
  52. package/dist/components/drawer/Drawer.js +1 -1
  53. package/dist/components/empty/Empty.js +1 -1
  54. package/dist/components/file-picker/FilePicker.js +1 -1
  55. package/dist/components/floating-action-button/FloatingActionButton.js +1 -1
  56. package/dist/components/floating-bottom-navigation/FloatingBottomNavigation.js +1 -1
  57. package/dist/components/footer/Footer.js +1 -1
  58. package/dist/components/gauge-chart/GaugeChart.d.ts +1 -1
  59. package/dist/components/gauge-chart/GaugeChart.js +1 -1
  60. package/dist/components/grid-container/GridContainer.js +1 -1
  61. package/dist/components/header/Header.js +1 -1
  62. package/dist/components/heatmap-chart/HeatmapChart.d.ts +1 -1
  63. package/dist/components/heatmap-chart/HeatmapChart.js +1 -1
  64. package/dist/components/highlight/Highlight.js +1 -1
  65. package/dist/components/hover-card/HoverCard.d.ts +1 -1
  66. package/dist/components/hover-card/HoverCard.js +1 -1
  67. package/dist/components/how-to-steps/HowToSteps.js +1 -1
  68. package/dist/components/image/Image.d.ts +70 -0
  69. package/dist/components/image/Image.js +1 -0
  70. package/dist/components/image/index.d.ts +2 -0
  71. package/dist/components/image/index.js +1 -0
  72. package/dist/components/list/List.js +1 -1
  73. package/dist/components/menubar/Menubar.js +1 -1
  74. package/dist/components/meter/Meter.js +1 -1
  75. package/dist/components/mockup/Mockup.js +1 -1
  76. package/dist/components/number-field/NumberField.d.ts +27 -2
  77. package/dist/components/number-field/NumberField.js +1 -1
  78. package/dist/components/otp-field/OtpField.js +1 -1
  79. package/dist/components/overlay/Overlay.d.ts +1 -1
  80. package/dist/components/overlay/Overlay.js +1 -1
  81. package/dist/components/page-layout/PageLayout.js +1 -1
  82. package/dist/components/pagination/Pagination.js +1 -1
  83. package/dist/components/panes/Panes.js +1 -1
  84. package/dist/components/pie-chart/PieChart.d.ts +1 -1
  85. package/dist/components/pie-chart/PieChart.js +1 -1
  86. package/dist/components/pill/Pill.js +1 -1
  87. package/dist/components/popconfirm/Popconfirm.d.ts +71 -0
  88. package/dist/components/popconfirm/Popconfirm.js +1 -0
  89. package/dist/components/popconfirm/index.d.ts +2 -0
  90. package/dist/components/popconfirm/index.js +1 -0
  91. package/dist/components/popover/Popover.d.ts +1 -1
  92. package/dist/components/popover/Popover.js +1 -1
  93. package/dist/components/portal/Portal.d.ts +48 -0
  94. package/dist/components/portal/Portal.js +1 -0
  95. package/dist/components/portal/index.d.ts +2 -0
  96. package/dist/components/portal/index.js +1 -0
  97. package/dist/components/progress-box/ProgressBox.js +1 -1
  98. package/dist/components/progress-circular/ProgressCircular.js +1 -1
  99. package/dist/components/progress-linear/ProgressLinear.js +1 -1
  100. package/dist/components/provider/NebaProvider.d.ts +99 -0
  101. package/dist/components/provider/NebaProvider.js +1 -0
  102. package/dist/components/provider/index.d.ts +3 -0
  103. package/dist/components/provider/index.js +1 -0
  104. package/dist/components/radio-group/RadioGroup.d.ts +22 -1
  105. package/dist/components/radio-group/RadioGroup.js +1 -1
  106. package/dist/components/rating/Rating.js +1 -1
  107. package/dist/components/scatter-chart/ScatterChart.d.ts +1 -1
  108. package/dist/components/scatter-chart/ScatterChart.js +1 -1
  109. package/dist/components/scroll-area/ScrollArea.js +1 -1
  110. package/dist/components/scroll-zone/ScrollZone.js +1 -1
  111. package/dist/components/select/Select.d.ts +16 -1
  112. package/dist/components/select/Select.js +1 -1
  113. package/dist/components/shortcut/Shortcut.d.ts +2 -1
  114. package/dist/components/shortcut/Shortcut.js +1 -1
  115. package/dist/components/sidebar/Sidebar.js +1 -1
  116. package/dist/components/sidebar/SidebarTrigger.js +1 -1
  117. package/dist/components/skeleton/Skeleton.js +1 -1
  118. package/dist/components/slider/Slider.js +1 -1
  119. package/dist/components/sparkline/Sparkline.js +1 -1
  120. package/dist/components/spoiler/Spoiler.js +1 -1
  121. package/dist/components/statistic/Statistic.js +1 -1
  122. package/dist/components/switch/Switch.d.ts +13 -1
  123. package/dist/components/switch/Switch.js +1 -1
  124. package/dist/components/table/Table.d.ts +21 -2
  125. package/dist/components/table/Table.js +1 -1
  126. package/dist/components/text-field/TextField.d.ts +27 -1
  127. package/dist/components/text-field/TextField.js +1 -1
  128. package/dist/components/text-link/TextLink.js +1 -1
  129. package/dist/components/time-picker/TimePicker.js +1 -1
  130. package/dist/components/timeline-chart/TimelineChart.d.ts +1 -1
  131. package/dist/components/timeline-chart/TimelineChart.js +1 -1
  132. package/dist/components/toast/Toast.d.ts +17 -2
  133. package/dist/components/toast/Toast.js +1 -1
  134. package/dist/components/toggle/Toggle.js +1 -1
  135. package/dist/components/toggle-group/ToggleGroup.js +1 -1
  136. package/dist/components/toolbar/Toolbar.js +1 -1
  137. package/dist/components/tooltip/Tooltip.d.ts +1 -1
  138. package/dist/components/tooltip/Tooltip.js +1 -1
  139. package/dist/components/tour/Tour.d.ts +17 -2
  140. package/dist/components/tour/Tour.js +1 -1
  141. package/dist/components/transfer/Transfer.js +1 -1
  142. package/dist/components/tree-select/TreeSelect.d.ts +88 -0
  143. package/dist/components/tree-select/TreeSelect.js +1 -0
  144. package/dist/components/tree-select/index.d.ts +2 -0
  145. package/dist/components/tree-select/index.js +1 -0
  146. package/dist/components/tree-view/TreeView.js +1 -1
  147. package/dist/components/visually-hidden/VisuallyHidden.d.ts +37 -0
  148. package/dist/components/visually-hidden/VisuallyHidden.js +1 -0
  149. package/dist/components/visually-hidden/index.d.ts +2 -0
  150. package/dist/components/visually-hidden/index.js +1 -0
  151. package/dist/components/window-pane/WindowPane.js +1 -1
  152. package/dist/hooks/index.d.ts +10 -0
  153. package/dist/hooks/index.js +1 -0
  154. package/dist/hooks/useDisclosure.d.ts +21 -0
  155. package/dist/hooks/useDisclosure.js +1 -0
  156. package/dist/hooks/useElementSize.d.ts +23 -0
  157. package/dist/hooks/useElementSize.js +1 -0
  158. package/dist/hooks/useMediaQuery.d.ts +27 -0
  159. package/dist/hooks/useMediaQuery.js +1 -0
  160. package/dist/hooks/useOnScreen.d.ts +24 -0
  161. package/dist/hooks/useOnScreen.js +1 -0
  162. package/dist/hooks/useShortcut.d.ts +34 -0
  163. package/dist/hooks/useShortcut.js +1 -0
  164. package/dist/index.d.ts +9 -0
  165. package/dist/index.js +1 -1
  166. package/dist/internal/calendar.d.ts +31 -5
  167. package/dist/internal/calendar.js +1 -1
  168. package/dist/internal/csv.d.ts +40 -0
  169. package/dist/internal/csv.js +1 -0
  170. package/dist/internal/date.d.ts +39 -1
  171. package/dist/internal/date.js +1 -1
  172. package/dist/internal/defaults.d.ts +46 -0
  173. package/dist/internal/defaults.js +1 -0
  174. package/dist/internal/i18n.d.ts +23 -0
  175. package/dist/internal/i18n.js +1 -1
  176. package/dist/internal/keys.d.ts +92 -0
  177. package/dist/internal/keys.js +1 -0
  178. package/dist/internal/media.d.ts +27 -0
  179. package/dist/internal/media.js +1 -1
  180. package/dist/internal/page-layout.d.ts +7 -0
  181. package/dist/internal/page-layout.js +1 -1
  182. package/dist/internal/picker.d.ts +7 -1
  183. package/dist/internal/picker.js +1 -1
  184. package/dist/locales/ar.js +1 -1
  185. package/dist/locales/de.js +1 -1
  186. package/dist/locales/es.js +1 -1
  187. package/dist/locales/fr.js +1 -1
  188. package/dist/locales/hi.js +1 -1
  189. package/dist/locales/id.js +1 -1
  190. package/dist/locales/it.js +1 -1
  191. package/dist/locales/ja.js +1 -1
  192. package/dist/locales/ko.js +1 -1
  193. package/dist/locales/nl.js +1 -1
  194. package/dist/locales/pl.js +1 -1
  195. package/dist/locales/pt.js +1 -1
  196. package/dist/locales/ru.js +1 -1
  197. package/dist/locales/th.js +1 -1
  198. package/dist/locales/tr.js +1 -1
  199. package/dist/locales/vi.js +1 -1
  200. package/dist/locales/zh-hans.js +1 -1
  201. package/dist/locales/zh-hant.js +1 -1
  202. package/dist/styles.css +1 -1
  203. package/dist/types.d.ts +73 -0
  204. package/package.json +6 -1
@@ -90,6 +90,19 @@ export interface DataTableColumn<Row> {
90
90
  searchable?: boolean;
91
91
  /** Leaves the column out without removing it from the list. */
92
92
  hidden?: boolean;
93
+ /**
94
+ * Freezes the column against one edge while the rest scroll past it.
95
+ *
96
+ * A pinned column needs a `width`: the offsets the sticky cells sit at are
97
+ * the sum of the widths before them, and a column that has not said how wide
98
+ * it is has no number to add. Without one it is measured at the default.
99
+ *
100
+ * Pinning also **moves** the column: everything pinned to the start is drawn
101
+ * first, in the order given, and everything pinned to the end last. A frozen
102
+ * column in the middle of the scrolling ones would be a column that overlaps
103
+ * its neighbours instead of holding still.
104
+ */
105
+ pinned?: 'start' | 'end';
93
106
  /**
94
107
  * The value behind the cell: what is sorted, and what the search is matched
95
108
  * against. Defaults to `row[key]`.
@@ -107,6 +120,39 @@ export interface DataTableColumn<Row> {
107
120
  * running row number.
108
121
  */
109
122
  render?: (row: Row, index: number) => React.ReactNode;
123
+ /**
124
+ * What an export writes for this cell.
125
+ *
126
+ * Defaults to `value`, and then to `row[key]`. It is separate from `render`
127
+ * on purpose: a cell that draws a Chip, an Avatar or a progress bar has no
128
+ * text to put in a file, and `render`'s return is a React element rather than
129
+ * something a spreadsheet can hold.
130
+ */
131
+ exportValue?: (row: Row) => unknown;
132
+ /** Leaves this column out of an export. @default true */
133
+ exportable?: boolean;
134
+ /**
135
+ * Lets a cell in this column be edited in place.
136
+ *
137
+ * A function decides per row — a locked record, a computed field, a row
138
+ * somebody else is holding. `onCellEdit` is what receives the new value; a
139
+ * column with no handler above it is not editable however this is set.
140
+ */
141
+ editable?: boolean | ((row: Row) => boolean);
142
+ /**
143
+ * What kind of field the editor is. `number` keeps the keypad on a phone and
144
+ * hands back a number rather than a string.
145
+ * @default 'text'
146
+ */
147
+ editType?: 'text' | 'number';
148
+ /**
149
+ * The one number that stands for a whole group of rows in this column.
150
+ *
151
+ * Called with the rows of one group. There is no `'sum' | 'avg'` shorthand
152
+ * on purpose: the moment a table has one column that needs a weighted mean
153
+ * or a distinct count, half the columns are functions and half are strings.
154
+ */
155
+ aggregate?: (rows: Row[]) => React.ReactNode;
110
156
  }
111
157
  export interface DataTableProps<Row> extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children' | 'onSelect' | 'defaultValue'> {
112
158
  /** The columns, in the order they appear. */
@@ -204,6 +250,26 @@ export interface DataTableProps<Row> extends NebaStyleProps, Omit<React.Componen
204
250
  resizable?: boolean;
205
251
  /** The widths, keyed by column. Use with `onColumnWidthsChange`. */
206
252
  columnWidths?: Readonly<Record<string, number>>;
253
+ /**
254
+ * The order the columns are drawn in, as a list of keys.
255
+ *
256
+ * A key the list does not mention keeps its place behind the ones it does —
257
+ * so an order that names two columns moves those two and leaves the rest
258
+ * alone, and a column added to `columns` later appears without the stored
259
+ * order having to be migrated.
260
+ */
261
+ columnOrder?: readonly string[];
262
+ defaultColumnOrder?: readonly string[];
263
+ onColumnOrderChange?: (order: string[]) => void;
264
+ /**
265
+ * Lets a header be dragged along the row to move its column.
266
+ *
267
+ * Off by default. It is a real gesture on a real control, and a table whose
268
+ * columns move when a reader meant to press a heading is worse than one whose
269
+ * columns do not move at all.
270
+ * @default false
271
+ */
272
+ reorderable?: boolean;
207
273
  /** What they start as, for an uncontrolled table. */
208
274
  defaultColumnWidths?: Readonly<Record<string, number>>;
209
275
  onColumnWidthsChange?: (widths: Record<string, number>) => void;
@@ -273,6 +339,43 @@ export interface DataTableProps<Row> extends NebaStyleProps, Omit<React.Componen
273
339
  filter?: (row: Row, index: number) => boolean;
274
340
  /** Content at the end of the bar the search field sits in. */
275
341
  toolbar?: React.ReactNode;
342
+ /**
343
+ * Adds a button that writes the rows out as a CSV file.
344
+ *
345
+ * **Every row the reader is currently looking at, not the page they are on.**
346
+ * The search and the sort are applied and the paging is not, because a file
347
+ * of page 3 is not a file anybody asked for. A `manual` table exports the
348
+ * rows it was handed, which is the same rule seen from the server's side.
349
+ * @default false
350
+ */
351
+ exportable?: boolean;
352
+ /** What the downloaded file is called. @default 'table.csv' */
353
+ exportFileName?: string;
354
+ /**
355
+ * Takes the CSV instead of downloading it — to post it somewhere, to open it
356
+ * in a viewer of your own, or to add a sheet around it.
357
+ */
358
+ onExport?: (csv: string) => void;
359
+ /**
360
+ * Called when an edited cell is committed. Without it, nothing is editable.
361
+ *
362
+ * The table holds no copy of the rows: it hands the new value over and draws
363
+ * whatever comes back in `items`. A table that wrote into its own copy would
364
+ * be a table showing something the application does not know about.
365
+ */
366
+ onCellEdit?: (row: Row, column: DataTableColumn<Row>, value: string | number) => void;
367
+ /**
368
+ * Groups the rows under a heading row, by whatever this returns.
369
+ *
370
+ * The grouping runs after the search and the sort, so a sorted table stays
371
+ * sorted inside each group and a filtered one groups only what is left.
372
+ * `undefined` from a row puts it in no group at all, above the rest.
373
+ */
374
+ groupBy?: (row: Row) => string | undefined;
375
+ /** Whether a group can be folded away. @default true */
376
+ collapsibleGroups?: boolean;
377
+ /** Which groups start folded, by the label `groupBy` returned. */
378
+ defaultCollapsedGroups?: readonly string[];
276
379
  /**
277
380
  * Which stages the caller has already done — for a table whose rows come from
278
381
  * a server a page at a time. `true` is all three.
@@ -320,4 +423,4 @@ export interface DataTableProps<Row> extends NebaStyleProps, Omit<React.Componen
320
423
  * is doing it. Both paths render the same, which is what stops a table that
321
424
  * starts local and grows remote from becoming a second component.
322
425
  */
323
- export declare function DataTable<Row>({ headers, items, getRowKey, variant, size, color, density, elevation, height, maxHeight, rowHeight: rowHeightProp, striped, hoverable, stickyHeader, caption, label, empty, virtual, overscan, sortable, sortMode, sort: sortProp, defaultSort, onSortChange, resizable, columnWidths, defaultColumnWidths, onColumnWidthsChange, selectionMode, selected, defaultSelected, onSelectedChange, checkboxes, onRowClick, onRowActivate, paging, page: pageProp, defaultPage, onPageChange, pageSize: pageSizeProp, defaultPageSize, onPageSizeChange, pageSizeOptions, footer, search: searchProp, defaultSearch, onSearchChange, searchable, searchPlaceholder, filter, toolbar, manual, rowCount, locale, className, style, ...boxProps }: DataTableProps<Row>): React.JSX.Element;
426
+ export declare function DataTable<Row>(rawProps: DataTableProps<Row>): React.JSX.Element;
@@ -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{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
+ "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{Button as l}from"../button/Button.js";import{Checkbox as o}from"../checkbox/Checkbox.js";import{Pagination as s}from"../pagination/Pagination.js";import{Select as i}from"../select/Select.js";import{TextField as c}from"../text-field/TextField.js";import{compareValues as u,dataHeaderHeights as d,dataRowHeights as p,dataTickWidths as m,defaultColumnWidth as g,keysBetween as f,minColumnWidth as h,nextSort as y,pageBounds as b,sortRows as v,virtualWindow as k}from"../../internal/data-table.js";import{beginPointerDrag as w}from"../../internal/drag.js";import{emptyMessages as x,fillMessage as C,tableMessages as S,useMessages as M}from"../../internal/i18n.js";import{searchHaystack as N,searchText as K}from"../../internal/search.js";import{ChevronIcon as z}from"../../internal/icons.js";import{observeResize as _}from"../../internal/observe.js";import{downloadText as j,toCsv as $}from"../../internal/csv.js";import{controlTextLeadingClasses as E,cx as D,hasContent as P,metaTextClasses as R,paddingXValues as T,srOnlyClasses as A,toLength as I}from"../../internal/styles.js";import{useStyleDefaults as B}from"../../internal/defaults.js";const L=["[--n-row:transparent]","[transition:background-color_var(--neba-duration)_var(--neba-ease)]"].join(" "),F={"--n-stripe":"color-mix(in oklab, var(--neba-fg) 4%, transparent)"},O=["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 W(){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(X){const{headers:V,items:q,getRowKey:G,variant:U="outline",size:Y="sm",color:J="primary",density:Q="compact",elevation:Z=0,height:ee,maxHeight:te,rowHeight:ne,striped:re=!1,hoverable:ae=!0,stickyHeader:le=!0,caption:oe,label:se,empty:ie,virtual:ce=!0,overscan:ue=8,sortable:de=!1,sortMode:pe="single",sort:me,defaultSort:ge,onSortChange:fe,resizable:he=!1,columnWidths:ye,columnOrder:be,defaultColumnOrder:ve,onColumnOrderChange:ke,reorderable:we=!1,defaultColumnWidths:xe,onColumnWidthsChange:Ce,selectionMode:Se="none",selected:Me,defaultSelected:Ne,onSelectedChange:Ke,checkboxes:ze=!1,onRowClick:_e,onRowActivate:je,paging:$e="scroll",page:Ee,defaultPage:De=1,onPageChange:Pe,pageSize:Re,defaultPageSize:Te=25,onPageSizeChange:Ae,pageSizeOptions:Ie=[10,25,50,100],footer:Be,search:Le,defaultSearch:Fe,onSearchChange:Oe,searchable:He=!1,searchPlaceholder:We,filter:Xe,toolbar:Ve,exportable:qe=!1,exportFileName:Ge="table.csv",onExport:Ue,onCellEdit:Ye,groupBy:Je,collapsibleGroups:Qe=!0,defaultCollapsedGroups:Ze,manual:et=!1,rowCount:tt,locale:nt,className:rt,style:at,...lt}=B(X,["size","density","variant","locale"]),ot=M(S,nt),st=M(x,nt),it=r.useId(),ct=ne??p[Q][Y],ut=d[Q][Y],dt=T[Q][Y],pt=r.useMemo(()=>new Set(!0===et?["sort","filter","pages"]:et||[]),[et]),[mt,gt]=r.useState(()=>ve??[]),ft=be??mt,ht=r.useMemo(()=>{const e=V.filter(e=>!e.hidden),t=ft.map(t=>e.find(e=>e.key===t)).filter(e=>void 0!==e),n=e.filter(e=>!ft.includes(e.key)),r=0===ft.length?e:[...t,...n],a=e=>"start"===e.pinned?0:"end"===e.pinned?2:1;return r.map((e,t)=>({column:e,index:t})).sort((e,t)=>a(e.column)-a(t.column)||e.index-t.index).map(e=>e.column)},[V,ft]),yt=ht.some(e=>void 0!==e.group),bt="none"!==Se,vt="multiple"===Se,kt=bt&&ze,wt=r.useMemo(()=>q.map((e,t)=>{const n=G?G(e,t):t;return{row:e,identity:n,key:String(n),origin:t}}),[q,G]),[xt,Ct]=r.useState(Fe??""),St=(Le??xt).trim(),Mt=""!==St&&!pt.has("filter"),Nt=r.useMemo(()=>ht.filter(e=>!1!==e.searchable),[ht]),Kt=r.useMemo(()=>Mt&&0!==Nt.length?wt.map(e=>N(Nt.map(t=>t.value?t.value(e.row):e.row[t.key]))):null,[wt,Nt,Mt]),zt=r.useMemo(()=>{if(pt.has("filter"))return wt;const e=K(St),t=""!==e&&Kt?wt.filter(t=>Kt[t.origin].includes(e)):wt;return Xe?t.filter(e=>Xe(e.row,e.origin)):t},[wt,St,Xe,pt,Kt]),_t=r.useMemo(()=>new Intl.Collator(nt,{numeric:!0,sensitivity:"base"}),[nt]),[jt,$t]=r.useState(ge??[]),Et=me??jt,Dt=r.useMemo(()=>pt.has("sort")?zt:v(zt,Et,e=>{const t=ht.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)=>u(n(e.row),n(t.row),_t)}),[zt,Et,ht,_t,pt]),[Pt,Rt]=r.useState(De),[Tt,At]=r.useState(Te),It=Re??Tt,[Bt,Lt]=r.useState(()=>new Set(Ze??[])),Ft=r.useMemo(()=>{if(!Je)return null;const e=[],t=new Map;for(const n of Dt){const r=Je(n.row)??"";t.has(r)||(t.set(r,[]),e.push(r)),t.get(r).push(n)}return{order:[...e].sort((e,t)=>""===e?-1:""===t?1:0),byLabel:t}},[Dt,Je]),Ot=r.useMemo(()=>Ft?Ft.order.flatMap(e=>Bt.has(e)?[]:Ft.byLabel.get(e)??[]):Dt,[Ft,Bt,Dt]),Ht=pt.has("pages")?tt??Ot.length:Ot.length,Wt=b(Ht,Ee??Pt,It),Xt=r.useMemo(()=>"pages"!==$e||pt.has("pages")?Ot:Ot.slice(Wt.start,Wt.end),[Ot,$e,pt,Wt.start,Wt.end]),Vt="pages"===$e?Wt.start:0,qt=r.useMemo(()=>Xt.map(e=>e.key),[Xt]),Gt=r.useMemo(()=>new Map(wt.map(e=>[e.key,e])),[wt]),[Ut,Yt]=r.useState(Ne??[]),Jt=Me??Ut,Qt=r.useMemo(()=>new Set(Jt.map(String)),[Jt]),[Zt,en]=r.useState(null),tn=r.useRef(null),nn=r.useRef({paged:Xt,pagedKeys:qt,byKey:Gt,selectedKeys:Qt,multiple:vt});nn.current={paged:Xt,pagedKeys:qt,byKey:Gt,selectedKeys:Qt,multiple:vt};const rn=r.useCallback(e=>{const t=[],n=[];for(const r of e){const e=nn.current.byKey.get(r);e&&(t.push(e.identity),n.push(e.row))}void 0===Me&&Yt(t),Ke?.(t,n)},[Me,Ke]),an=r.useCallback(e=>{tn.current=e,rn([e])},[rn]),ln=r.useCallback(e=>{const t=nn.current.selectedKeys,n=new Set(t);n.has(e)?n.delete(e):n.add(e),tn.current=e,rn([...n])},[rn]),on=r.useCallback((e,t)=>{const n=nn.current.pagedKeys,r=tn.current??n[0];if(void 0===r)return;const a=f(n,r,e);0!==a.length&&rn(t?[...new Set([...nn.current.selectedKeys,...a])]:a)},[rn]),sn=r.useRef(null),cn=r.useRef(null),un=r.useRef(null),[dn,pn]=r.useState(0),[mn,gn]=r.useState(0),fn=void 0!==ee||void 0!==te,hn=ce&&fn&&Xt.length>0&&!Je;r.useLayoutEffect(()=>{const e=sn.current;if(e&&hn)return pn(e.clientHeight),_(e,e=>pn(e.contentRect.height))},[hn]);const yn=r.useCallback(e=>{if(!hn)return;const t=Math.floor(e.currentTarget.scrollTop/ct)*ct;gn(e=>e===t?e:t)},[hn,ct]),bn=hn?k(mn,dn,ct,Xt.length,ue):{start:0,end:Xt.length,before:0,after:0},vn=Xt.slice(bn.start,bn.end),kn=bt&&null!==Zt&&vn.some(e=>e.key===Zt),[wn,xn]=r.useState(xe??{}),Cn=ye??wn,Sn=r.useCallback(e=>{void 0===ye&&xn(e),Ce?.(e)},[ye,Ce]),Mn=r.useRef(new Map),Nn=r.useRef(null),Kn=r.useRef(null),[zn,_n]=r.useState(null),[jn,$n]=r.useState(null);r.useEffect(()=>()=>{Nn.current?.(),Kn.current?.()},[]);const En=(e,t)=>{if(0!==t.button)return;const n=t.currentTarget,r=t.clientX;let a=!1;Kn.current=w({target:n,pointerId:t.pointerId,onMove:t=>{if(!a){if(Math.abs(t.clientX-r)<6)return;a=!0,_n(e)}const n=ht.find(e=>{if(e.pinned)return!1;const n=Mn.current.get(e.key);if(!n)return!1;const r=n.getBoundingClientRect();return t.clientX>=r.left&&t.clientX<=r.right});$n(n&&n.key!==e?n.key:null)},onEnd:()=>{Kn.current=null,_n(e=>($n(t=>{if(e&&t&&e!==t){const r=ht.map(e=>e.key),a=r.indexOf(e),l=r.indexOf(t);r.splice(l,0,...r.splice(a,1)),n=r,void 0===be&&gt(n),ke?.(n)}var n;return null}),null))}})},Dn=r.useCallback(e=>{const t=sn.current;if(!t||!fn)return;const n=le?ut*(yt?2:1):0,r=e*ct;r<t.scrollTop+n?t.scrollTop=Math.max(0,r-n):r+ct>t.scrollTop+t.clientHeight&&(t.scrollTop=r+ct-t.clientHeight)},[fn,le,ut,yt,ct]),Pn=(e,t)=>{const n=nn.current.paged,r=Math.min(Math.max(e,0),n.length-1),a=n[r];a&&(t.preventDefault(),en(a.key),Dn(r),t.shiftKey&&nn.current.multiple?on(a.key,!1):t.ctrlKey||t.metaKey||an(a.key))};const Rn=r.useCallback(e=>{const t=cn.current,n=nn.current.paged;if(!t||0===n.length)return null;const r=t.getBoundingClientRect().top,a=Math.floor((e-r)/ct);return Math.min(Math.max(a,0),n.length-1)},[ct]),Tn=r.useRef(null),An=r.useCallback(e=>{const t=Rn(e),n=null===t?void 0:nn.current.paged[t];n&&(en(n.key),on(n.key,!1))},[Rn,on]),In=r.useRef(An);In.current=An;function Bn(e,t){if(bt&&!t.target.closest('button, a, input, select, textarea, [role="button"]'))if(un.current?.focus({preventScroll:!0}),en(e.key),2!==t.button){if(0===t.button)return t.shiftKey&&vt?(t.preventDefault(),void on(e.key,t.ctrlKey||t.metaKey)):void((t.ctrlKey||t.metaKey)&&vt?ln(e.key):(an(e.key),vt&&(e=>{if(Tn.current)return;const t=e=>{const t=Tn.current,r=sn.current;if(!t)return;if(t.y=e.clientY,In.current(t.y),!r||!fn)return;const a=r.getBoundingClientRect(),l=a.top+ct-t.y,o=t.y-(a.bottom-ct);t.speed=l>0?-Math.min(l,40):o>0?Math.min(o,40):0,0!==t.speed&&null===t.frame&&(t.frame=requestAnimationFrame(n))},n=()=>{const e=Tn.current,t=sn.current;e&&t&&0!==e.speed?(t.scrollTop+=e.speed,In.current(e.y),e.frame=requestAnimationFrame(n)):e&&(e.frame=null)},r=()=>{const e=Tn.current;null!=e?.frame&&cancelAnimationFrame(e.frame),Tn.current=null,window.removeEventListener("pointermove",t),window.removeEventListener("pointerup",r),window.removeEventListener("pointercancel",r)};Tn.current={y:e,speed:0,frame:null,stop:r},window.addEventListener("pointermove",t),window.addEventListener("pointerup",r),window.addEventListener("pointercancel",r)})(t.clientY)))}else nn.current.selectedKeys.has(e.key)||an(e.key)}r.useEffect(()=>()=>Tn.current?.stop(),[]);const Ln=r.useMemo(()=>qt.reduce((e,t)=>Qt.has(t)?e+1:e,0),[qt,Qt]),Fn=qt.length>0&&Ln===qt.length,On=m[Y],Hn=e=>Cn[e.key]??e.width,Wn=(kt?On:0)+ht.reduce((e,t)=>e+(Hn(t)??h),0),Xn=ht.length>0&&ht.every(e=>void 0!==Hn(e)),Vn=ht.length+(kt?1:0)+(Xn?1:0),qn=r.useMemo(()=>{const e=[];return ht.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},[ht]),Gn=r.useMemo(()=>{const e=new Map,t=new Map;let n=kt?On:0;for(const t of ht)"start"===t.pinned&&(e.set(t.key,n),n+=Hn(t)??g);let r=0;for(let e=ht.length-1;e>=0;e-=1){const n=ht[e];"end"===n.pinned&&(t.set(n.key,r),r+=Hn(n)??g)}return{start:e,end:t}},[ht,Cn,kt,On]),Un=(e,t)=>{if(!e.pinned)return{};const n="start"===e.pinned?Gn.start.get(e.key):Gn.end.get(e.key);return{position:"sticky",insetInlineStart:"start"===e.pinned?`${n??0}px`:void 0,insetInlineEnd:"end"===e.pinned?`${n??0}px`:void 0,zIndex:t?3:1,backgroundColor:"var(--n-panel-press)",backgroundImage:t?void 0:"linear-gradient(var(--n-row), var(--n-row))"}},Yn={padding:`0 ${dt}`,borderBottom:"1px solid var(--n-line)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},Jn={...Yn,height:`${ut}px`,backgroundColor:"var(--n-panel-press)"},Qn="odd"===re?0:1,Zn=r.useMemo(()=>new Intl.NumberFormat(nt),[nt]),er=Be??"pages"===$e,tr=C(ot.range,{start:Zn.format(0===Ht?0:("pages"===$e?Wt.start:0)+1),end:Zn.format("pages"===$e?Wt.end:Ht),total:Zn.format(Ht)}),nr=e=>{void 0===Ee&&Rt(e),Pe?.(e)},rr=(n,r)=>{const a=Qt.has(n.key),l=Zt===n.key;return t("tr",{id:`${it}-${n.key}`,"aria-selected":bt?a:void 0,"aria-rowindex":hn?r+2:void 0,"data-neba-row":n.key,className:D(L,a?"[--n-row:var(--n-soft-press)]":!1!==re&&r%2===Qn?"[--n-row:var(--n-stripe)]":"",!a&&ae?"hover:[--n-row:var(--n-soft)]":"",l&&bt?"[box-shadow:inset_0_0_0_1px_var(--n-ring)]":"",bt||_e?"cursor-default":""),style:{height:`${ct}px`,backgroundColor:"var(--n-row)"},onPointerDown:e=>Bn(n,e),onClick:e=>_e?.(n.row,Vt+r,e),onDoubleClick:()=>je?.(n.row,Vt+r),children:[kt?dr(n):null,ht.map(t=>{const a=ir(t,n.row),l=or?.key===n.key&&or.column===t.key;return e("td",{role:bt?"gridcell":void 0,style:{...Yn,...Un(t,!1),textAlign:t.align??"start",cursor:a&&!l?"cell":void 0},onDoubleClick:a?e=>{e.stopPropagation(),sr({key:n.key,column:t.key})}:void 0,children:l?cr(n,t):t.render?t.render(n.row,Vt+r):n.row[t.key]},t.key)}),Xn?e("td",{"aria-hidden":"true",style:{...Yn,padding:0}}):null]})},ar=(n,r,a)=>{const l=n.sortable??de,o=n.resizable??he,s=we&&!n.pinned,i=(c=n.key,Et.find(e=>e.key===c));var c;const u=i?Et.findIndex(e=>e.key===n.key)+1:0,d=n.headerAlign??n.align??"start";return t("th",{ref:e=>{e?Mn.current.set(n.key,e):Mn.current.delete(n.key)},scope:"col",rowSpan:a,"aria-sort":i?"asc"===i.direction?"ascending":"descending":void 0,"data-column":n.key,"data-dragging":zn===n.key||void 0,className:D("relative font-semibold select-none",i?"text-(--n-accent)":"text-(--neba-muted-fg)",le?"sticky z-20 [backdrop-filter:var(--neba-blur)]":"",s?"cursor-grab":"",zn===n.key?"opacity-60":"",jn===n.key?"shadow-[inset_2px_0_0_var(--n-accent)]":""),style:{...Jn,...Un(n,!0),top:le?2!==a&&yt?ut:0:void 0,textAlign:d},onPointerDown:s?e=>En(n.key,e):void 0,children:[l?t("button",{type:"button",className:D(O,"end"===d?"justify-end":"center"===d?"justify-center":"justify-start"),onClick:e=>((e,t)=>{const n=y(Et,e,t&&"multiple"===pe);void 0===me&&$t(n),fe?.(n)})(n.key,e.shiftKey),children:[e("span",{className:"min-w-0 truncate",children:n.label??n.key}),e("span",{"aria-hidden":"true",className:D("flex items-center","desc"===i?.direction?"rotate-0":"rotate-180",i?"":"text-transparent group-hover/sort:text-inherit group-focus-visible/sort:text-inherit"),children:e(z,{})}),u>1?e("span",{"aria-hidden":"true",className:"text-[0.85em] tabular-nums",children:u}):null]}):e("span",{className:"block truncate",children:n.label??n.key}),o&&r<ht.length-1?e("span",{"aria-hidden":"true",className:H,onPointerDown:e=>((e,t)=>{t.preventDefault(),t.stopPropagation();const n=t.currentTarget,r={...Cn};for(const e of ht){const t=Mn.current.get(e.key);t&&void 0===r[e.key]&&(r[e.key]=Math.round(t.getBoundingClientRect().width))}const a="rtl"===getComputedStyle(n).direction,l=t.clientX,o=r[e]??g,s=ht.find(t=>t.key===e)?.minWidth??h;Nn.current=w({target:n,pointerId:t.pointerId,onMove:t=>{const n=(t.clientX-l)*(a?-1:1);Sn({...r,[e]:Math.max(s,Math.round(o+n))})},onEnd:()=>{Nn.current=null}})})(n.key,e),onDoubleClick:()=>(e=>{const t={...Cn};delete t[e],Sn(t)})(n.key)}):null]},n.key)},lr=(n,r)=>{const a=Bt.has(n),l=Qe,o=r.map(e=>e.row),s=()=>Lt(e=>{const t=new Set(e);return t.has(n)?t.delete(n):t.add(n),t}),i=t("span",{className:"flex min-w-0 items-center gap-1.5",children:[l?e("span",{"aria-hidden":"true",className:D("flex items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]",a?"-rotate-90 rtl:rotate-90":""),children:e(z,{})}):null,e("span",{className:"truncate font-semibold",children:""===n?st.title:n}),e("span",{className:"shrink-0 text-(--neba-muted-fg) tabular-nums",children:Zn.format(r.length)})]});return t("tr",{"data-neba-group":n,style:{height:`${ct}px`,backgroundColor:"var(--n-soft)"},children:[kt?e("td",{style:{...Yn,padding:0}}):null,ht.map((t,n)=>e("td",{colSpan:1,style:{...Yn,...Un(t,!1),textAlign:0===n?"start":t.align??"start"},children:0===n?l?e("button",{type:"button","aria-expanded":!a,className:"flex w-full min-w-0 items-center text-start [outline:none] focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]",onClick:s,children:i}):i:t.aggregate?e("span",{className:"tabular-nums",children:t.aggregate(o)}):null},t.key)),Xn?e("td",{"aria-hidden":"true",style:{...Yn,padding:0}}):null]})},[or,sr]=r.useState(null),ir=(e,t)=>void 0!==Ye&&("function"==typeof e.editable?e.editable(t):Boolean(e.editable)),cr=(t,n)=>{const r=n.value?n.value(t.row):t.row[n.key],a=e=>{sr(null);const a="number"===n.editType?Number(e):e;"number"===n.editType&&Number.isNaN(a)||String(a)!==String(r??"")&&Ye?.(t.row,n,a)};return e("input",{autoFocus:!0,type:"number"===n.editType?"number":"text",defaultValue:null==r?"":String(r),"aria-label":"string"==typeof n.label?n.label:n.key,className:"w-full bg-transparent [font:inherit] text-inherit [outline:none]",style:{textAlign:n.align??"start"},onPointerDown:e=>e.stopPropagation(),onBlur:e=>a(e.currentTarget.value),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),e.stopPropagation(),a(e.currentTarget.value)),"Escape"===e.key&&(e.stopPropagation(),sr(null))}})},ur=t=>e("span",{className:"flex items-center justify-center",children:t}),dr=t=>e("td",{role:bt?"gridcell":void 0,style:{...Yn,padding:0,overflow:"visible"},children:ur(e(o,{size:Y,color:J,checked:Qt.has(t.key),"aria-label":ot.selectRow,onCheckedChange:()=>{vt?ln(t.key):an(t.key)}}))}),pr=vt?ur(e(o,{size:Y,color:J,checked:Fn,indeterminate:Ln>0&&!Fn,"aria-label":ot.selectAll,onCheckedChange:()=>{if(Fn){const e=new Set(qt);rn([...Qt].filter(t=>!e.has(t)))}else rn([...new Set([...Qt,...qt])])}})):null,mr=Xn?e("th",{"aria-hidden":"true",className:D(le?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...Jn,padding:0}}):null,gr=(t,n)=>n>0?e("tr",{"aria-hidden":"true",style:{height:`${n}px`},children:e("td",{colSpan:Vn,style:{padding:0,border:0}})},t):null;return t(a,{variant:U,size:Y,color:J,density:Q,elevation:Z,padded:!1,className:D("flex flex-col overflow-hidden",bt?"has-[:focus-visible]:[outline:2px_solid_var(--n-ring)] has-[:focus-visible]:outline-offset-2":"",rt),style:{...F,...at},...lt,children:[He||qe||P(Ve)?t("div",{className:"flex items-center gap-2",style:{padding:`${dt} ${dt}`,borderBottom:"1px solid var(--n-line)"},children:[He?e(c,{size:Y,color:J,density:Q,variant:"outline",type:"search",className:"w-full max-w-64",startIcon:e(W,{}),placeholder:We??ot.search,"aria-label":We??ot.search,value:Le??xt,onChange:e=>{const t=e.target.value;void 0===Le&&Ct(t),nr(1),Oe?.(t)}}):null,qe||P(Ve)?t("div",{className:"ms-auto flex items-center gap-2",children:[Ve,qe?e(l,{size:Y,color:J,density:Q,variant:"outline",onClick:()=>{const e=ht.filter(e=>!1!==e.exportable),t=e.map(e=>"string"==typeof e.label?e.label:e.key),n=Dt.map(t=>e.map(e=>e.exportValue?e.exportValue(t.row):e.value?e.value(t.row):t.row[e.key])),r=$([t,...n]);Ue?Ue(r):j(r,Ge,"text/csv;charset=utf-8")},children:ot.exportCsv}):null]}):null]}):null,e("div",{ref:sn,className:"min-h-0 flex-auto overflow-auto overscroll-contain",style:{height:I(ee),maxHeight:I(te)},onScroll:yn,children:t("table",{ref:un,role:bt?"grid":void 0,"aria-label":se,"aria-multiselectable":vt||void 0,"aria-rowcount":hn?Xt.length+1:void 0,"aria-activedescendant":kn?`${it}-${Zt}`:void 0,tabIndex:bt?0:void 0,className:D("w-full text-start [outline:none]",E[Y],"text-(--neba-fg)",bt?"select-none":""),style:{tableLayout:"fixed",borderCollapse:"separate",borderSpacing:0,minWidth:`${Wn}px`},onKeyDown:function(e){if(!bt||e.target!==e.currentTarget)return;const t=nn.current.paged;if(0===t.length)return;const n=null===Zt?-1:nn.current.pagedKeys.indexOf(Zt),r=Math.max(1,Math.floor((dn||10*ct)/ct)-1);switch(e.key){case"ArrowDown":Pn(n+1,e);break;case"ArrowUp":Pn(-1===n?0:n-1,e);break;case"Home":Pn(0,e);break;case"End":Pn(t.length-1,e);break;case"PageDown":Pn(-1===n?0:n+r,e);break;case"PageUp":Pn(-1===n?0:n-r,e);break;case" ":-1!==n&&(e.preventDefault(),(e.ctrlKey||e.metaKey)&&vt?ln(t[n].key):an(t[n].key));break;case"a":case"A":(e.ctrlKey||e.metaKey)&&vt&&(e.preventDefault(),rn(nn.current.pagedKeys));break;case"Escape":e.preventDefault(),rn([]);break;case"Enter":-1!==n&&je&&(e.preventDefault(),je(t[n].row,Vt+n))}},children:[oe?e("caption",{className:D(R[Y],"text-(--neba-muted-fg)"),style:{padding:`0.5rem ${dt}`,textAlign:"start"},children:oe}):null,t("colgroup",{children:[kt?e("col",{style:{width:`${On}px`}}):null,ht.map(t=>{const n=Hn(t);return e("col",{style:void 0===n?void 0:{width:`${n}px`}},t.key)}),Xn?e("col",{}):null]}),t("thead",{children:[yt?t("tr",{style:{height:`${ut}px`},children:[kt?e("th",{scope:"col",rowSpan:2,className:D(le?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...Jn,padding:0,overflow:"visible"},children:pr}):null,qn.map(t=>void 0===t.label?ar(ht[t.from],t.from,2):e("th",{scope:"colgroup",colSpan:t.span,className:D("font-semibold text-(--neba-muted-fg) select-none",le?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...Jn,textAlign:"center"},children:t.label},`group-${t.from}`)),Xn?r.cloneElement(mr,{rowSpan:2}):null]}):null,t("tr",{style:{height:`${ut}px`},children:[kt&&!yt?e("th",{scope:"col",className:D(le?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...Jn,padding:0,overflow:"visible"},children:pr}):null,ht.map((e,t)=>yt&&void 0===e.group?null:ar(e,t)),Xn&&!yt?mr:null]})]}),e("tbody",{ref:cn,children:0===Xt.length?e("tr",{children:e("td",{colSpan:Vn,className:"text-(--neba-muted-fg)",style:{padding:`2rem ${dt}`,textAlign:"center"},children:ie??st.title})}):t(n,{children:[gr("before",bn.before),Ft?Ft.order.map(e=>{const n=Ft.byLabel.get(e)??[],a=n.filter(e=>qt.includes(e.key));return t(r.Fragment,{children:[lr(e,n),a.map(e=>rr(e,Xt.indexOf(e)))]},e||"\0")}):vn.map((e,t)=>rr(e,bn.start+t)),gr("after",bn.after)]})})]})}),er?t("div",{className:D("flex flex-wrap items-center gap-3",R[Y]),style:{padding:`0.375rem ${dt}`,borderTop:"1px solid var(--n-line)"},children:[e("span",{className:"text-(--neba-muted-fg) tabular-nums",children:tr}),bt&&Qt.size>0?e("span",{className:"text-(--n-accent) tabular-nums",children:C(ot.selected,{count:Zn.format(Qt.size)})}):null,t("div",{className:"ms-auto flex items-center gap-2",children:["pages"===$e&&Ie.length>0?e(n,{children:e(i,{size:Y,color:J,density:Q,variant:"outline",label:ot.rowsPerPage,items:Ie.map(e=>({value:e})),value:It,onValueChange:e=>{const t=Number(e);void 0===Re&&At(t),nr(Math.floor(Wt.start/t)+1),Ae?.(t)}})}):null,"pages"===$e?e(s,{size:Y,color:J,count:Wt.pages,page:Wt.page,siblingCount:0,onPageChange:nr}):null]})]}):null,!er&&hn?e("span",{className:A,"aria-live":"polite",children:tr}):null]})}
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { type PickerLabels } from '../../internal/calendar.js';
3
3
  import { type PickerShellProps } from '../../internal/picker.js';
4
- import type { NebaWeekday } from '../../types.js';
4
+ import type { NebaDateGranularity, NebaWeekday } from '../../types.js';
5
5
  /**
6
6
  * What the four pickers agree on, so a caller who has learned one has learned
7
7
  * the others. Spelled out here rather than in `internal/` because these are the
@@ -17,15 +17,34 @@ export interface DatePickerProps extends PickerShellProps {
17
17
  open?: boolean;
18
18
  defaultOpen?: boolean;
19
19
  onOpenChange?: (open: boolean) => void;
20
+ /**
21
+ * Which unit the picker asks for: a day, a whole month, or a whole year.
22
+ *
23
+ * At `month` and `year` the calendar opens on that grid and stops there, and
24
+ * the value is the first day of what was chosen — 1 March, 1 January. The
25
+ * grid above is still reachable, so a year picker is one control and a month
26
+ * picker is still two clicks from any month of any year.
27
+ *
28
+ * Everything else follows it: the trigger's default `format`, what the
29
+ * footer's shortcut says, how `name` submits, and the unit `minDate`,
30
+ * `maxDate` and `shouldDisableDate` are read at.
31
+ * @default 'day'
32
+ */
33
+ granularity?: NebaDateGranularity;
20
34
  /** Which month the calendar opens on when there is no value. @default this one */
21
35
  defaultMonth?: Date;
22
- /** The earliest day that may be chosen. Day-granular — the time is ignored. */
36
+ /**
37
+ * The earliest date that may be chosen, compared at `granularity`. A minimum
38
+ * of 15 March leaves the 14th out at `day` and leaves March in at `month`:
39
+ * the cell stands for the whole month, and part of that month is allowed.
40
+ */
23
41
  minDate?: Date | null;
24
- /** The latest day that may be chosen. */
42
+ /** The latest date that may be chosen, read the same way. */
25
43
  maxDate?: Date | null;
26
44
  /**
27
- * Blocks individual days that are inside the range but still not available —
28
- * weekends, holidays, a room that is already booked.
45
+ * Blocks individual cells that are inside the range but still not available —
46
+ * weekends, holidays, a room that is already booked. Called with the value
47
+ * that cell would produce, so at `month` it is handed the 1st.
29
48
  */
30
49
  shouldDisableDate?: (date: Date) => boolean;
31
50
  /**
@@ -38,20 +57,28 @@ export interface DatePickerProps extends PickerShellProps {
38
57
  /**
39
58
  * How the trigger writes the chosen date. Passed straight to `Intl`, so
40
59
  * `{ dateStyle: 'full' }` and `{ year: '2-digit', month: 'narrow' }` both work.
41
- * @default { dateStyle: 'medium' }
60
+ * Defaults to what `granularity` asked for — a medium date, a month and a
61
+ * year, or a bare year.
42
62
  */
43
63
  format?: Intl.DateTimeFormatOptions;
44
64
  /** Shown in the trigger while nothing is chosen. */
45
65
  placeholder?: React.ReactNode;
46
66
  /** Offers the × that empties the control. @default false */
47
67
  clearable?: boolean;
48
- /** Offers the shortcut to today in the footer. @default true */
68
+ /**
69
+ * Offers the shortcut to the current unit in the footer — today, this month
70
+ * or this year, whichever `granularity` is asking for. @default true
71
+ */
49
72
  showTodayButton?: boolean;
50
73
  /** Closes the popup as soon as a day is chosen. @default true */
51
74
  closeOnSelect?: boolean;
52
75
  /** The strings a screen reader hears. Every one has an English default. */
53
76
  labels?: Partial<PickerLabels>;
54
- /** Identifies the field when a form is submitted, as `YYYY-MM-DD`. */
77
+ /**
78
+ * Identifies the field when a form is submitted. The value is written at
79
+ * `granularity` — `YYYY-MM-DD`, `YYYY-MM` or `YYYY` — so a month is never
80
+ * submitted as a day nobody chose.
81
+ */
55
82
  name?: string;
56
83
  }
57
84
  /**
@@ -67,6 +94,11 @@ export interface DatePickerProps extends PickerShellProps {
67
94
  * its own — twelve months, then twelve years at a time. Any month of the year on
68
95
  * screen is two clicks; any year at all is three.
69
96
  *
97
+ * `granularity` turns that header into the answer. A month picker opens on the
98
+ * grid of twelve months and stops there; a year picker opens on the years. The
99
+ * value stays a `Date` — the 1st of what was chosen — because a second value
100
+ * type would mean a second set of props to compare it with.
101
+ *
70
102
  * There is no typing into the trigger. Parsing a date out of free text is
71
103
  * locale-dependent in a way that cannot be done honestly without a date library,
72
104
  * and a field that understands `27/7/26` in one browser and not in the next is
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Button as l}from"../button/Button.js";import{Calendar as o,usePickerLabels as n}from"../../internal/calendar.js";import{CalendarIcon as r}from"../../internal/icons.js";import{PickerFooter as s,PickerShell as i}from"../../internal/picker.js";import{displaySamples as c,formatDate as d,isDayOutside as m,isValidDate as u,localeWeekStart as p,mergeDateAndTime as f,startOfDay as h,startOfMonth as b,toISODate as y,today as x,withPlaceholder as j}from"../../internal/date.js";import{cx as v}from"../../internal/styles.js";export const DatePicker=/*@__PURE__*/t.forwardRef(function({value:D,defaultValue:O,onValueChange:S,open:g,defaultOpen:C,onOpenChange:k,defaultMonth:z,minDate:w,maxDate:M,shouldDisableDate:V,locale:B,weekStartsOn:I,format:R={dateStyle:"medium"},placeholder:E,clearable:F=!1,showTodayButton:N=!0,closeOnSelect:P=!0,labels:T,name:q,size:A="md",color:G="primary",readOnly:H=!1,disabled:J=!1,startIcon:K,...L},Q){const U=n(T),W=I??p(B),[X,Y]=t.useState(O??null),Z=void 0!==D?D:X,[$,_]=t.useState(C??!1),ee=g??$,[ae,te]=t.useState(()=>b(u(Z)?Z:z??x()));t.useEffect(()=>{ee&&te(b(u(Z)?Z:z??x()))},[ee]);const le=e=>{e&&(H||J)||(void 0===g&&_(e),k?.(e))},oe=e=>{void 0===D&&Y(e),S?.(e)},ne=e=>{const a=u(Z)?f(e,Z):h(e);oe(a),te(b(a)),P&&le(!1)},re=x(),se=m(re,w,M)||(V?.(re)??!1),ie=N||F,ce=t.useMemo(()=>j(c(B,R),E),[B,R,E]);return e(i,{...L,size:A,color:G,readOnly:H,disabled:J,triggerRef:Q,startIcon:K??e(r,{}),display:u(Z)?d(Z,B,R):E??"",samples:ce,empty:!u(Z),clearable:F,onClear:()=>oe(null),open:ee,onOpenChange:le,labels:U,hiddenValues:q?[{name:q,value:u(Z)?y(Z):""}]:void 0,children:a("div",{className:v("flex flex-col",ie&&"gap-1.5"),children:[e(o,{size:A,color:G,locale:B,weekStartsOn:W,month:ae,onMonthChange:te,selected:[Z],onSelect:ne,minDate:w,maxDate:M,shouldDisableDate:V,labels:U,autoFocus:!0}),ie?a(s,{size:A,children:[F?e(l,{variant:"text",size:A,color:G,density:"compact",onClick:()=>{oe(null),le(!1)},children:U.clear}):null,N?e(l,{variant:"text",size:A,color:G,density:"compact",disabled:se,onClick:()=>ne(re),children:U.today}):null]}):null]})})});
1
+ "use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Button as l}from"../button/Button.js";import{Calendar as n,usePickerLabels as o}from"../../internal/calendar.js";import{CalendarIcon as r}from"../../internal/icons.js";import{PickerFooter as s,PickerShell as i}from"../../internal/picker.js";import{displaySamples as c,formatDate as m,isUnitOutside as d,isValidDate as u,localeWeekStart as h,mergeDateAndTime as p,startOfMonth as f,startOfUnit as y,toISODate as b,toISOMonth as g,toISOYear as j,today as x,withPlaceholder as v}from"../../internal/date.js";import{cx as D}from"../../internal/styles.js";import{useStyleDefaults as O}from"../../internal/defaults.js";const S={day:{dateStyle:"medium"},month:{year:"numeric",month:"long"},year:{year:"numeric"}},z={day:b,month:g,year:j};export const DatePicker=/*@__PURE__*/t.forwardRef(function(b,g){const{value:j,defaultValue:C,onValueChange:k,open:w,defaultOpen:M,onOpenChange:V,granularity:B="day",defaultMonth:I,minDate:R,maxDate:E,shouldDisableDate:F,locale:N,weekStartsOn:P,format:T,placeholder:Y,clearable:q=!1,showTodayButton:A=!0,closeOnSelect:G=!0,labels:H,name:J,size:K="md",color:L="primary",readOnly:Q=!1,disabled:U=!1,startIcon:W,...X}=O(b,["size","locale"]),Z=o(H),$=P??h(N),_=T??S[B],[ee,ae]=t.useState(C??null),te=void 0!==j?j:ee,[le,ne]=t.useState(M??!1),oe=w??le,[re,se]=t.useState(()=>f(u(te)?te:I??x()));t.useEffect(()=>{oe&&se(f(u(te)?te:I??x()))},[oe]);const ie=e=>{e&&(Q||U)||(void 0===w&&ne(e),V?.(e))},ce=e=>{void 0===j&&ae(e),k?.(e)},me=e=>{const a=y(e,B),t=u(te)?p(a,te):a;ce(t),se(f(t)),G&&ie(!1)},de=x(),ue=y(de,B),he=d(de,B,R,E)||(F?.(ue)??!1),pe="year"===B?Z.thisYear:"month"===B?Z.thisMonth:Z.today,fe=A||q,ye=t.useMemo(()=>v(c(N,_),Y),[N,_,Y]);return e(i,{...X,size:K,color:L,readOnly:Q,disabled:U,triggerRef:g,startIcon:W??e(r,{}),display:u(te)?m(te,N,_):Y??"",samples:ye,empty:!u(te),clearable:q,onClear:()=>ce(null),open:oe,onOpenChange:ie,labels:Z,hiddenValues:J?[{name:J,value:u(te)?z[B](te):""}]:void 0,children:a("div",{className:D("flex flex-col",fe&&"gap-1.5"),children:[e(n,{size:K,color:L,locale:N,weekStartsOn:$,month:re,onMonthChange:se,selected:[te],onSelect:me,granularity:B,minDate:R,maxDate:E,shouldDisableDate:F,labels:Z,autoFocus:!0}),fe?a(s,{size:K,children:[q?e(l,{variant:"text",size:K,color:L,density:"compact",onClick:()=>{ce(null),ie(!1)},children:Z.clear}):null,A?e(l,{variant:"text",size:K,color:L,density:"compact",disabled:he,onClick:()=>me(de),children:pe}):null]}):null]})})});
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as n from"react";import{Button as a}from"../button/Button.js";import{Calendar as t,usePickerLabels as s}from"../../internal/calendar.js";import{ArrowRightIcon as r,CalendarIcon as o}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as c}from"../../internal/picker.js";import{WidthSizer as u}from"../../internal/sizer.js";import{addMonths as d,compareDay as m,displaySamples as h,formatDate as p,isValidDate as f,localeWeekStart as x,startOfDay as v,startOfMonth as g,toISODate as b,today as w,withPlaceholder as y}from"../../internal/date.js";import{cx as N,gapClasses as j,metaTextClasses as S}from"../../internal/styles.js";const C={start:null,end:null};export const DateRangePicker=/*@__PURE__*/n.forwardRef(function({value:D,defaultValue:O,onValueChange:k,open:z,defaultOpen:P,onOpenChange:B,defaultMonth:M,minDate:R,maxDate:V,shouldDisableDate:E,locale:I,weekStartsOn:F,format:q={dateStyle:"medium"},monthCount:A=2,startPlaceholder:G,endPlaceholder:H,presets:J,clearable:K=!1,closeOnSelect:L=!0,labels:Q,name:T,size:U="md",color:W="primary",readOnly:X=!1,disabled:Y=!1,startIcon:Z,...$},_){const ee=s(Q),le=F??x(I),[ne,ae]=n.useState(O??C),te=void 0!==D?D??C:ne,se=f(te.start)?te.start:null,re=f(te.end)?te.end:null,[oe,ie]=n.useState(P??!1),ce=z??oe,[ue,de]=n.useState(null),[me,he]=n.useState(null),[pe,fe]=n.useState(()=>g(se??M??w()));n.useEffect(()=>{ce?fe(g(se??M??w())):(de(null),he(null))},[ce]);const xe=e=>{e&&(X||Y)||(void 0===z&&ie(e),B?.(e))},ve=e=>{void 0===D&&ae(e),k?.(e)},ge=ue??se,be=null!==ue?me:re,we=(l,n)=>f(l)?p(l,I,q):e("span",{className:"text-(--neba-muted-fg)",children:n??""}),ye=d(pe,1),Ne=2===A,je=h(I,q),Se=null!==ue?ee.end:null===se?ee.start:null,Ce={size:U,color:W,locale:I,weekStartsOn:le,selected:[se,re,ue],rangeStart:ge,rangeEnd:be,onSelect:e=>{const l=v(e);if(null===ue)return de(l),he(l),void ve({start:l,end:null});const[n,a]=m(l,ue)<0?[l,ue]:[ue,l];de(null),he(null),ve({start:n,end:a}),L&&xe(!1)},onPreviewChange:e=>{null!==ue&&he(e??ue)},minDate:R,maxDate:V,shouldDisableDate:E,showOutsideDays:!1,labels:ee};return e(c,{...$,size:U,color:W,readOnly:X,disabled:Y,triggerRef:_,startIcon:Z??e(o,{}),display:l("span",{className:"flex min-w-0 items-center gap-1.5",children:[l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:we(se,G)}),e(u,{samples:y(je,G)})]}),e("span",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--neba-muted-fg) rtl:rotate-180",children:e(r,{})}),l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:we(re,H)}),e(u,{samples:y(je,H)})]})]}),empty:null===se&&null===re,clearable:K,onClear:()=>ve(C),open:ce,onOpenChange:xe,labels:ee,hiddenValues:T?[{name:T,value:se?b(se):""},{name:T,value:re?b(re):""}]:void 0,children:l("div",{className:"flex flex-col gap-1.5",children:[l("div",{className:N("flex items-stretch",j[U]),children:[J&&J.length>0?e("div",{className:N("flex max-h-[calc(var(--n-cell,2rem)*8)] flex-col overflow-y-auto border-e pe-1.5","[border-color:var(--n-line)]"),children:J.map((l,n)=>e(a,{variant:"text",size:U,color:W,density:"compact",className:"justify-start whitespace-nowrap",onClick:()=>(e=>{const l="function"==typeof e.value?e.value():e.value;de(null),he(null),ve(l),f(l.start)&&fe(g(l.start)),L&&xe(!1)})(l),children:l.label},n))}):null,e(t,{...Ce,month:pe,onMonthChange:fe,showNextButton:!Ne,autoFocus:!0}),Ne?e(t,{...Ce,month:ye,onMonthChange:e=>fe(d(e,-1)),showPreviousButton:!1}):null]}),K||null!==Se?l(i,{size:U,children:[null!==Se?e("span",{className:N("me-auto text-(--neba-muted-fg)",S[U]),children:Se}):null,K?e(a,{variant:"text",size:U,color:W,density:"compact",onClick:()=>{de(null),he(null),ve(C),xe(!1)},children:ee.clear}):null]}):null]})})});
1
+ "use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as n from"react";import{Button as a}from"../button/Button.js";import{Calendar as t,usePickerLabels as s}from"../../internal/calendar.js";import{ArrowRightIcon as r,CalendarIcon as o}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as c}from"../../internal/picker.js";import{WidthSizer as u}from"../../internal/sizer.js";import{addMonths as m,compareDay as d,displaySamples as h,formatDate as f,isValidDate as p,localeWeekStart as x,startOfDay as v,startOfMonth as g,toISODate as b,today as w,withPlaceholder as y}from"../../internal/date.js";import{cx as N,gapClasses as j,metaTextClasses as S}from"../../internal/styles.js";import{useStyleDefaults as C}from"../../internal/defaults.js";const D={start:null,end:null};export const DateRangePicker=/*@__PURE__*/n.forwardRef(function(O,z){const{value:k,defaultValue:P,onValueChange:B,open:M,defaultOpen:R,onOpenChange:V,defaultMonth:E,minDate:I,maxDate:F,shouldDisableDate:q,locale:A,weekStartsOn:G,format:H={dateStyle:"medium"},monthCount:J=2,startPlaceholder:K,endPlaceholder:L,presets:Q,clearable:T=!1,closeOnSelect:U=!0,labels:W,name:X,size:Y="md",color:Z="primary",readOnly:$=!1,disabled:_=!1,startIcon:ee,...le}=C(O,["size","locale"]),ne=s(W),ae=G??x(A),[te,se]=n.useState(P??D),re=void 0!==k?k??D:te,oe=p(re.start)?re.start:null,ie=p(re.end)?re.end:null,[ce,ue]=n.useState(R??!1),me=M??ce,[de,he]=n.useState(null),[fe,pe]=n.useState(null),[xe,ve]=n.useState(()=>g(oe??E??w()));n.useEffect(()=>{me?ve(g(oe??E??w())):(he(null),pe(null))},[me]);const ge=e=>{e&&($||_)||(void 0===M&&ue(e),V?.(e))},be=e=>{void 0===k&&se(e),B?.(e)},we=de??oe,ye=null!==de?fe:ie,Ne=(l,n)=>p(l)?f(l,A,H):e("span",{className:"text-(--neba-muted-fg)",children:n??""}),je=m(xe,1),Se=2===J,Ce=h(A,H),De=null!==de?ne.end:null===oe?ne.start:null,Oe={size:Y,color:Z,locale:A,weekStartsOn:ae,selected:[oe,ie,de],rangeStart:we,rangeEnd:ye,onSelect:e=>{const l=v(e);if(null===de)return he(l),pe(l),void be({start:l,end:null});const[n,a]=d(l,de)<0?[l,de]:[de,l];he(null),pe(null),be({start:n,end:a}),U&&ge(!1)},onPreviewChange:e=>{null!==de&&pe(e??de)},minDate:I,maxDate:F,shouldDisableDate:q,showOutsideDays:!1,labels:ne};return e(c,{...le,size:Y,color:Z,readOnly:$,disabled:_,triggerRef:z,startIcon:ee??e(o,{}),display:l("span",{className:"flex min-w-0 items-center gap-1.5",children:[l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Ne(oe,K)}),e(u,{samples:y(Ce,K)})]}),e("span",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--neba-muted-fg) rtl:rotate-180",children:e(r,{})}),l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Ne(ie,L)}),e(u,{samples:y(Ce,L)})]})]}),empty:null===oe&&null===ie,clearable:T,onClear:()=>be(D),open:me,onOpenChange:ge,labels:ne,hiddenValues:X?[{name:X,value:oe?b(oe):""},{name:X,value:ie?b(ie):""}]:void 0,children:l("div",{className:"flex flex-col gap-1.5",children:[l("div",{className:N("flex items-stretch",j[Y]),children:[Q&&Q.length>0?e("div",{className:N("flex max-h-[calc(var(--n-cell,2rem)*8)] flex-col overflow-y-auto border-e pe-1.5","[border-color:var(--n-line)]"),children:Q.map((l,n)=>e(a,{variant:"text",size:Y,color:Z,density:"compact",className:"justify-start whitespace-nowrap",onClick:()=>(e=>{const l="function"==typeof e.value?e.value():e.value;he(null),pe(null),be(l),p(l.start)&&ve(g(l.start)),U&&ge(!1)})(l),children:l.label},n))}):null,e(t,{...Oe,month:xe,onMonthChange:ve,showNextButton:!Se,autoFocus:!0}),Se?e(t,{...Oe,month:je,onMonthChange:e=>ve(m(e,-1)),showPreviousButton:!1}):null]}),T||null!==De?l(i,{size:Y,children:[null!==De?e("span",{className:N("me-auto text-(--neba-muted-fg)",S[Y]),children:De}):null,T?e(a,{variant:"text",size:Y,color:Z,density:"compact",onClick:()=>{he(null),pe(null),be(D),ge(!1)},children:ne.clear}):null]}):null]})})});
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Button as n}from"../button/Button.js";import{Calendar as o,TimeGrid as a,usePickerLabels as s}from"../../internal/calendar.js";import{CalendarIcon as i}from"../../internal/icons.js";import{PickerDivider as r,PickerFooter as c,PickerShell as d}from"../../internal/picker.js";import{displaySamples as m,formatDate as u,isDayOutside as h,isHour12 as p,isValidDate as f,localeWeekStart as S,mergeDateAndTime as b,startOfDay as y,startOfMonth as D,timeUnitSpan as g,toISODateTime as v,today as x,withPlaceholder as C,withTime as j}from"../../internal/date.js";import{cx as w,gapClasses as k}from"../../internal/styles.js";export const DateTimePicker=/*@__PURE__*/l.forwardRef(function({value:z,defaultValue:O,onValueChange:T,open:N,defaultOpen:V,onOpenChange:B,defaultMonth:I,minDate:M,maxDate:R,shouldDisableDate:E,shouldDisableTime:F,locale:P,weekStartsOn:q,format:A={dateStyle:"medium",timeStyle:"short"},hour12:G,showSeconds:H=!1,hourStep:J=1,minuteStep:K=1,secondStep:L=1,placeholder:Q,clearable:U=!1,showNowButton:W=!0,closeOnSelect:X=!1,labels:Y,name:Z,size:$="md",color:_="primary",density:ee="default",readOnly:te=!1,disabled:le=!1,startIcon:ne,...oe},ae){const se=s(Y),ie=q??S(P),re=G??p(P),[ce,de]=l.useState(O??null),me=void 0!==z?z:ce,[ue,he]=l.useState(V??!1),pe=N??ue,[fe,Se]=l.useState(()=>D(f(me)?me:I??x()));l.useEffect(()=>{pe&&Se(D(f(me)?me:I??x()))},[pe]);const be=e=>{e&&(te||le)||(void 0===N&&he(e),B?.(e))},ye=e=>{void 0===z&&de(e),T?.(e)},De=l.useCallback((e,t)=>{const[l,n]=g(t,e),o=y(e).getTime();return!!(f(M)&&o+1e3*n<M.getTime())||(!!(f(R)&&o+1e3*l>R.getTime())||(F?.(e,t)??!1))},[M,R,F]),ge=new Date,ve=j(ge,{seconds:H?ge.getSeconds():0}),xe=h(ve,M,R)||(E?.(ve)??!1)||De(ve,"second"),Ce=C(m(P,A),Q);return e(d,{...oe,size:$,color:_,density:ee,readOnly:te,disabled:le,triggerRef:ae,startIcon:ne??e(i,{}),display:f(me)?u(me,P,A):Q??"",samples:Ce,empty:!f(me),clearable:U,onClear:()=>ye(null),open:pe,onOpenChange:be,labels:se,hiddenValues:Z?[{name:Z,value:f(me)?v(me,H):""}]:void 0,children:t("div",{className:"flex flex-col gap-1.5",children:[t("div",{className:w("flex items-stretch",k[$]),children:[e(o,{size:$,color:_,locale:P,weekStartsOn:ie,month:fe,onMonthChange:Se,selected:[me],onSelect:e=>{const t=f(me)?b(e,me):y(e);ye(t),Se(D(t)),X&&be(!1)},minDate:M,maxDate:R,shouldDisableDate:E,labels:se,autoFocus:!0}),e(r,{}),e(a,{size:$,density:ee,locale:P,value:f(me)?me:null,referenceDate:f(me)?me:x(),onChange:ye,hour12:re,showSeconds:H,hourStep:J,minuteStep:K,secondStep:L,shouldDisableTime:De,labels:se})]}),t(c,{size:$,children:[U?e(n,{variant:"text",size:$,color:_,density:"compact",onClick:()=>{ye(null),be(!1)},children:se.clear}):null,W?e(n,{variant:"text",size:$,color:_,density:"compact",disabled:xe,onClick:()=>{ye(ve),Se(D(ve))},children:se.now}):null,e(n,{variant:"solid",size:$,color:_,density:"compact",onClick:()=>be(!1),children:se.done})]})]})})});
1
+ "use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Button as n}from"../button/Button.js";import{Calendar as o,TimeGrid as a,usePickerLabels as s}from"../../internal/calendar.js";import{CalendarIcon as i}from"../../internal/icons.js";import{PickerDivider as r,PickerFooter as c,PickerShell as d}from"../../internal/picker.js";import{displaySamples as m,formatDate as u,isDayOutside as p,isHour12 as h,isValidDate as f,localeWeekStart as S,mergeDateAndTime as b,startOfDay as y,startOfMonth as D,timeUnitSpan as g,toISODateTime as v,today as x,withPlaceholder as j,withTime as C}from"../../internal/date.js";import{cx as w,gapClasses as z}from"../../internal/styles.js";import{useStyleDefaults as k}from"../../internal/defaults.js";export const DateTimePicker=/*@__PURE__*/l.forwardRef(function(O,T){const{value:N,defaultValue:V,onValueChange:B,open:I,defaultOpen:M,onOpenChange:R,defaultMonth:E,minDate:F,maxDate:P,shouldDisableDate:q,shouldDisableTime:A,locale:G,weekStartsOn:H,format:J={dateStyle:"medium",timeStyle:"short"},hour12:K,showSeconds:L=!1,hourStep:Q=1,minuteStep:U=1,secondStep:W=1,placeholder:X,clearable:Y=!1,showNowButton:Z=!0,closeOnSelect:$=!1,labels:_,name:ee,size:te="md",color:le="primary",density:ne="default",readOnly:oe=!1,disabled:ae=!1,startIcon:se,...ie}=k(O,["size","density","locale"]),re=s(_),ce=H??S(G),de=K??h(G),[me,ue]=l.useState(V??null),pe=void 0!==N?N:me,[he,fe]=l.useState(M??!1),Se=I??he,[be,ye]=l.useState(()=>D(f(pe)?pe:E??x()));l.useEffect(()=>{Se&&ye(D(f(pe)?pe:E??x()))},[Se]);const De=e=>{e&&(oe||ae)||(void 0===I&&fe(e),R?.(e))},ge=e=>{void 0===N&&ue(e),B?.(e)},ve=l.useCallback((e,t)=>{const[l,n]=g(t,e),o=y(e).getTime();return!!(f(F)&&o+1e3*n<F.getTime())||(!!(f(P)&&o+1e3*l>P.getTime())||(A?.(e,t)??!1))},[F,P,A]),xe=new Date,je=C(xe,{seconds:L?xe.getSeconds():0}),Ce=p(je,F,P)||(q?.(je)??!1)||ve(je,"second"),we=j(m(G,J),X);return e(d,{...ie,size:te,color:le,density:ne,readOnly:oe,disabled:ae,triggerRef:T,startIcon:se??e(i,{}),display:f(pe)?u(pe,G,J):X??"",samples:we,empty:!f(pe),clearable:Y,onClear:()=>ge(null),open:Se,onOpenChange:De,labels:re,hiddenValues:ee?[{name:ee,value:f(pe)?v(pe,L):""}]:void 0,children:t("div",{className:"flex flex-col gap-1.5",children:[t("div",{className:w("flex items-stretch",z[te]),children:[e(o,{size:te,color:le,locale:G,weekStartsOn:ce,month:be,onMonthChange:ye,selected:[pe],onSelect:e=>{const t=f(pe)?b(e,pe):y(e);ge(t),ye(D(t)),$&&De(!1)},minDate:F,maxDate:P,shouldDisableDate:q,labels:re,autoFocus:!0}),e(r,{}),e(a,{size:te,density:ne,locale:G,value:f(pe)?pe:null,referenceDate:f(pe)?pe:x(),onChange:ge,hour12:de,showSeconds:L,hourStep:Q,minuteStep:U,secondStep:W,shouldDisableTime:ve,labels:re})]}),t(c,{size:te,children:[Y?e(n,{variant:"text",size:te,color:le,density:"compact",onClick:()=>{ge(null),De(!1)},children:re.clear}):null,Z?e(n,{variant:"text",size:te,color:le,density:"compact",disabled:Ce,onClick:()=>{ge(je),ye(D(je))},children:re.now}):null,e(n,{variant:"solid",size:te,color:le,density:"compact",onClick:()=>De(!1),children:re.done})]})]})})});
@@ -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(rawProps: 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 s}from"../../internal/icons.js";import{cx as t,hasContent as c,metaTextClasses as d,radiusClasses as m,sheetBodyClasses as f,sheetHeaderGapClasses as u,sheetSectionGapClasses as p,sheetTitleClasses as x,surfaceClasses as b,surfaceSlots as h}from"../../internal/styles.js";const g={xs:"max-w-80",sm:"max-w-96",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl"},v=[b,"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:b="md",color:j="primary",density:$="default",open:_,defaultOpen:N,onOpenChange:k,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,style:E,children:F,...G}){const H=r(o,T),I=n[$][b],J=i[$][b],K=P?`${I} ${J}`:I,M=c(z)||c(D),Q=c(O);return a(l.Root,{open:_,defaultOpen:N,modal:V,disablePointerDismissal:!q,onOpenChange:(e,a)=>{q||e||"escape-key"!==a.reason?k?.(e):a.cancel()},children:[C?e(l.Trigger,{render:C}):null,a(l.Portal,{children:[e(l.Backdrop,{className:`neba-portal ${y}`}),e(l.Viewport,{className:["neba-portal fixed inset-0 z-50 flex justify-center",S?"items-stretch":"items-center p-4"].join(" "),children:a(l.Popup,{className:t(v,f[b],S?"h-full max-w-none rounded-none":`max-h-full ${m[b]} ${void 0===L?g[b]:""}`,S||R?"":"w-auto",P?"":`${J} ${p[b]}`,A??""),style:{...h(j,3),...void 0===L?null:{maxWidth:"number"==typeof L?`${L}px`:L},...E},...G,children:[M||B?a("div",{className:`flex shrink-0 items-start gap-3 ${K}`,children:[a("div",{className:`flex min-w-0 flex-1 flex-col ${u[b]}`,children:[c(z)?e(l.Title,{className:`font-semibold ${x[b]} m-0`,children:z}):null,c(D)?e(l.Description,{className:`m-0 text-(--neba-muted-fg) ${d[b]}`,children:D}):null]}),B?e(l.Close,{"aria-label":W??H.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(s,{})}):null]}):null,c(F)?e("div",{className:t("min-h-0 flex-1 overflow-y-auto overscroll-contain",K,P&&(M||B)?w:"",P?"":"py-1 -my-1"),children:F}):null,Q?e("div",{className:t("flex shrink-0 flex-wrap items-center justify-end gap-2",K,P?w:""),children:O}):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 f,sheetHeaderGapClasses as p,sheetSectionGapClasses as u,sheetTitleClasses as b,surfaceClasses as x,surfaceSlots as h}from"../../internal/styles.js";import{useStyleDefaults as v}from"../../internal/defaults.js";const g={xs:"max-w-80",sm:"max-w-96",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl"},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(" "),w=["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(" "),j="border-t [border-color:var(--n-line)]";export const DialogClose=l.Close;export function Dialog(x){const{size:N="md",color:_="primary",density:k="default",open:$,defaultOpen:z,onOpenChange:C,trigger:D,title:O,description:P,actions:B,dividers:T=!1,showClose:W=!0,locale:L,closeLabel:R,width:S,fullWidth:V=!0,fullScreen:q=!1,modal:A=!0,dismissible:E=!0,className:F,classNames:G,style:H,children:I,...J}=v(x,["size","density","locale"]),K=r(o,L),M=n[k][N],Q=i[k][N],U=T?`${M} ${Q}`:M,X=c(O)||c(P),Y=c(B);return a(l.Root,{open:$,defaultOpen:z,modal:A,disablePointerDismissal:!E,onOpenChange:(e,a)=>{E||e||"escape-key"!==a.reason?C?.(e):a.cancel()},children:[D?e(l.Trigger,{render:D}):null,a(l.Portal,{children:[e(l.Backdrop,{className:t("neba-portal",w,G?.backdrop)}),e(l.Viewport,{className:t("neba-portal fixed inset-0 z-50 flex justify-center",q?"items-stretch":"items-center p-4",G?.viewport),children:a(l.Popup,{className:t(y,f[N],q?"h-full max-w-none rounded-none":`max-h-full ${m[N]} ${void 0===S?g[N]:""}`,q||V?"":"w-auto",T?"":`${Q} ${u[N]}`,F??""),style:{...h(_,3),...void 0===S?null:{maxWidth:"number"==typeof S?`${S}px`:S},...H},...J,children:[X||W?a("div",{className:`flex shrink-0 items-start gap-3 ${U}`,children:[a("div",{className:`flex min-w-0 flex-1 flex-col ${p[N]}`,children:[c(O)?e(l.Title,{className:t("font-semibold",b[N],"m-0",G?.title),children:O}):null,c(P)?e(l.Description,{className:t("m-0 text-(--neba-muted-fg)",d[N],G?.description),children:P}):null]}),W?e(l.Close,{"aria-label":R??K.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",G?.close),children:e(s,{})}):null]}):null,c(I)?e("div",{className:t("min-h-0 flex-1 overflow-y-auto overscroll-contain",U,T&&(X||W)?j:"",T?"":"py-1 -my-1",G?.body),children:I}):null,Y?e("div",{className:t("flex shrink-0 flex-wrap items-center justify-end gap-2",U,T?j:"",G?.actions),children:B}):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 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
+ "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 i,toLength as n}from"../../internal/styles.js";import{useStyleDefaults as s}from"../../internal/defaults.js";const o="[border-color:var(--n-line)]",d={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"]}},c={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const Divider=/*@__PURE__*/t.forwardRef(function(t,f){const{orientation:h="horizontal",color:m="primary",size:p="md",length:u,thickness:x,textAlign:w="center",className:v,style:b,children:g,...$}=s(t,["size"]),j="vertical"===h,k=null!=g&&!1!==g&&""!==g,y={"--n-line":`var(--neba-${m}-line)`,"--n-rule":n(x)??"1px"},N=n(u),z={...y,...void 0===N?null:j?{height:N}:{width:N},...b};if(!k)return e(l,{ref:f,orientation:h,className:a(j?"w-0 border-l [border-left-width:var(--n-rule)] "+(void 0===N?"self-stretch":""):"h-0 w-full border-t [border-top-width:var(--n-rule)]",o,v??""),style:z,...$});const[A,B]=d[h][w],D=j?"w-0 border-l [border-left-width:var(--n-rule)]":"h-0 border-t [border-top-width:var(--n-rule)]";return r(l,{ref:f,orientation:h,"aria-label":"string"==typeof g?g:void 0,className:a("flex items-center",j?"w-auto flex-col "+(void 0===N?"self-stretch":""):"w-full",c[p],v??""),style:z,...$,children:[e("span",{"aria-hidden":"true",className:`${D} ${A} ${o}`}),e("span",{className:["shrink-0 whitespace-nowrap text-(--neba-muted-fg)",i[p],j?"[writing-mode:vertical-rl]":""].filter(Boolean).join(" "),children:g}),e("span",{"aria-hidden":"true",className:`${D} ${B} ${o}`})]})});
@@ -148,4 +148,4 @@ export declare const DrawerClose: React.ForwardRefExoticComponent<Omit<import("@
148
148
  * scroll lock, the `aria-labelledby` / `aria-describedby` wiring, restoring
149
149
  * focus to the trigger, and the inert page behind.
150
150
  */
151
- export declare function Drawer({ side, mode, size, color, density, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, locale, closeLabel, extent, rounded, modal, dismissible, className, style, children, ...props }: DrawerProps): React.JSX.Element | null;
151
+ export declare function Drawer(rawProps: DrawerProps): React.JSX.Element | null;
@@ -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 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
+ "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 m,sheetBodyClasses as b,sheetHeaderGapClasses as c,sheetSectionGapClasses as f,sheetTitleClasses as x,surfaceClasses as p,surfaceSlots as g}from"../../internal/styles.js";import{useStyleDefaults as h}from"../../internal/defaults.js";const v={xs:"w-56",sm:"w-64",md:"w-80",lg:"w-96",xl:"w-[28rem]"},y={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)"}},w={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},j={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},N=[p,"relative flex flex-col overflow-hidden","text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[outline:none]"].join(" "),$=["[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)]",$].join(" "),k="border-t [border-color:var(--n-line)]",C=["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(p){const{side:z="left",mode:D="overlay",size:O="md",color:P="primary",density:B="default",open:T,defaultOpen:F,onOpenChange:L,trigger:R,title:V,description:q,actions:A,dividers:E=!1,showClose:G,locale:H,closeLabel:I,extent:J,rounded:K=!0,modal:M=!0,dismissible:Q=!0,className:S,style:U,children:W,...X}=h(p,["size","density","locale"]),Y=i(o,H),Z="overlay"===D,ee="left"===z||"right"===z,re=G??Z,ae=n[B][O],le=s[B][O],ne=E?`${ae} ${le}`:ae,se=u(V)||u(q),oe=u(A),ie=void 0===J?null:{[ee?"width":"height"]:"number"==typeof J?`${J}px`:J},de=t(N,b[O],w[z],K?y[z][O]:"",Z?"[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]":"[box-shadow:var(--neba-plate-glass)]",Z?$:"",ee?`h-full max-w-full ${void 0===J?v[O]:""}`:"w-full "+(void 0===J?"max-h-[85%]":""),E?"":`${le} ${f[O]}`,S??""),te=Z?l.Title:"h2",ue=Z?l.Description:"p",me=r(a,{children:[se||re?r("div",{className:`flex shrink-0 items-start gap-3 ${ne}`,children:[r("div",{className:`flex min-w-0 flex-1 flex-col ${c[O]}`,children:[u(V)?e(te,{className:`m-0 font-semibold ${x[O]}`,children:V}):null,u(q)?e(ue,{className:`m-0 text-(--neba-muted-fg) ${m[O]}`,children:q}):null]}),re?Z?e(l.Close,{"aria-label":I??Y.close,className:C,children:e(d,{})}):e("button",{type:"button","aria-label":I??Y.close,className:C,onClick:()=>L?.(!1),children:e(d,{})}):null]}):null,u(W)?e("div",{className:t("min-h-0 flex-1 overflow-y-auto overscroll-contain",ne,E&&(se||re)?k:"",E?"":"py-1 -my-1"),children:W}):null,oe?e("div",{className:t("flex shrink-0 flex-wrap items-center justify-end gap-2",ne,E?k:""),children:A}):null]});return Z?r(l.Root,{open:T,defaultOpen:F,modal:M,disablePointerDismissal:!Q,onOpenChange:(e,r)=>{Q||e||"escape-key"!==r.reason?L?.(e):r.cancel()},children:[R?e(l.Trigger,{render:R}):null,r(l.Portal,{children:[e(l.Backdrop,{className:`neba-portal ${_}`}),e(l.Viewport,{className:`neba-portal fixed inset-0 z-50 flex ${j[z]}`,children:e(l.Popup,{className:de,style:{...g(P,3),...ie,...U},...X,children:me})})]})]}):T??F??!0?e("div",{className:de,style:{...g(P,0),...ie,...U},children:me}):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 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}})});
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";import{useStyleDefaults as g}from"../../internal/defaults.js";const j={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"}},N={xs:"text-[1.25rem]",sm:"text-[1.5rem]",md:"text-[1.75rem]",lg:"text-[2.125rem]",xl:"text-[2.5rem]"},k={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 w(){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(n,v){const{variant:$="text",size:L="md",color:z="secondary",density:B="default",elevation:C=0,title:W,icon:E,action:F,locale:M,transition:R,render:Z,className:q,style:A,children:D,...G}=g(n,["size","density","variant","locale"]),H=i(o,M),I=void 0===W?H.title:W,J=void 0===E?e(w,{}):E,K=s(R),O=c(I),P=m("flex w-full flex-col items-center justify-center text-center",a[B][L],j[B][L],x[L],u[L],b,k[$],K.className,q??"");return l({render:Z,ref:v,props:{role:"status",className:P,style:{...y(z,C),...K.style,...A},children:t(r,{children:[c(J)?e("span",{className:`flex items-center text-(--neba-muted-fg) ${N[L]} ${d}`,children:J}):null,O||c(D)?t("div",{className:`flex max-w-prose flex-col items-center ${f[L]}`,children:[O?e("div",{className:`neba-title font-semibold ${h[L]}`,children:I}):null,c(D)?e("div",{className:`${p[L]} ${O?"text-(--neba-muted-fg)":""}`,children:D}):null]}):null,c(F)?e("div",{className:"flex flex-wrap items-center justify-center gap-2",children:F}):null]}),...G}})});