@optimum-intelligence/opti-ui 0.5.1 → 0.6.0

package/dist/llms-full.txt

@@ -714,6 +714,7 @@ import { Select } from '@optimum-intelligence/opti-ui';
 | `description?` | `React.ReactNode` |  | Help text under the trigger. |
 | `error?` | `React.ReactNode` |  | Error message. When set, the field is marked invalid. |
 | `placeholder?` | `React.ReactNode` | `'Select…'` | Text shown while nothing is selected. |
+| `allLabel?` | `React.ReactNode` |  | Adds a first option for "no choice", such as "All" in a filter. Choosing it reports `null`, and it shows while the value is `null`. |
 | `size?` | `'sm' \| 'md' \| 'lg'` | `'md'` | Control height. |
 | `triggerProps?` | `Omit<SelectTriggerProps, 'size' \| 'placeholder'>` |  | Props passed to the trigger button (className, style, aria-*). |
 | `contentProps?` | `Omit<SelectContentProps, 'children'>` |  | Props for the popup (side, align, className…). |
@@ -1359,6 +1360,7 @@ import { Button } from '@optimum-intelligence/opti-ui';
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `variant?` | `'primary' \| 'accent' \| 'secondary' \| 'soft' \| 'ghost' \| 'danger'` | `'primary'` | Visual emphasis. |
+| `tone?` | `ButtonTone` |  | Status colour on top of the variant: a filled button in that colour for `primary`/`accent`, tinted text and borders for the others. |
 | `size?` | `'sm' \| 'md' \| 'lg'` | `'md'` | Height and padding. |
 | `shape?` | `'pill' \| 'rounded'` | `'pill'` | `pill` (default) or `rounded` corners. Override with `--oui-button-radius`. |
 | `fullWidth?` | `boolean` |  | Stretch to the container width. |
@@ -1426,6 +1428,7 @@ import { IconButton } from '@optimum-intelligence/opti-ui';
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `variant?` | `'primary' \| 'accent' \| 'secondary' \| 'soft' \| 'ghost' \| 'danger'` | `'ghost'` | Visual emphasis. |
+| `tone?` | `ButtonTone` |  | Status colour on top of the variant: a filled button in that colour for `primary`/`accent`, tinted text and borders for the others. |
 | `size?` | `'sm' \| 'md' \| 'lg'` | `'md'` | Height and padding. |
 | `loading?` | `boolean` |  | Shows a spinner and blocks interaction while keeping focus. |
 | `aria-label` | `string` |  | Required: icon-only buttons need an accessible name. |
@@ -1610,6 +1613,8 @@ Base UI `AlertDialog.Trigger` re-exported unchanged. See https://base-ui.com/rea
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `size?` | `Exclude<DialogSize, 'full'>` | `'sm'` | Dialog width. |
+| `backdropBlur?` | `'none' \| 'sm' \| 'md' \| 'lg'` | `'md'` | How strongly the page behind the dialog is blurred. Override the radius with `--oui-backdrop-blur`. |
+| `nestedBackdrop?` | `boolean` | `false` | Blur the dialog or drawer this one opens from, instead of showing no backdrop. |
 
 Also accepts all props of: `BaseAlertDialog.Popup.Props`.
 
@@ -1667,6 +1672,53 @@ import { CommandPalette } from '@optimum-intelligence/opti-ui';
 
 Also accepts all props of: `CommandItem = CommandItem>`.
 
+## ConfirmDialog
+
+component · Overlays
+
+Asks before an action runs: title, description, cancel and confirm buttons,
+a pending state that keeps the dialog open, and room for the error.
+For other layouts compose `AlertDialog`.
+
+```tsx
+import { ConfirmDialog } from '@optimum-intelligence/opti-ui';
+```
+
+```tsx
+<ConfirmDialog
+  open={deleting}
+  onOpenChange={setDeleting}
+  title="Delete this truck?"
+  description="Its trips stay, without a truck."
+  confirmLabel="Delete"
+  destructive
+  pending={mutation.isPending}
+  error={mutation.error?.message}
+  onConfirm={() => mutation.mutate()}
+/>
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `ref?` | `React.Ref<HTMLDivElement>` |  | Ref to the dialog popup. |
+| `open?` | `boolean` |  | Whether the dialog is open (controlled). |
+| `defaultOpen?` | `boolean` |  | Initial state when uncontrolled. |
+| `onOpenChange?` | `(open: boolean) => void` |  | Called when the dialog opens or closes. Not called to close while `pending`. |
+| `onOpenChangeComplete?` | `(open: boolean) => void` |  | Called once the open or close transition has finished, e.g. to unmount the dialog. |
+| `trigger?` | `React.ReactElement` |  | Element that opens the dialog, e.g. `<Button>Delete</Button>`. Omit when `open` is controlled. |
+| `title` | `React.ReactNode` |  | The question, e.g. "Delete this truck?". |
+| `description?` | `React.ReactNode` |  | What happens when confirmed. |
+| `children?` | `React.ReactNode` |  | Extra content between the description and the buttons. |
+| `confirmLabel` | `React.ReactNode` |  | Text of the confirm button. |
+| `cancelLabel?` | `React.ReactNode` | `'Cancel'` | Text of the cancel button. |
+| `onConfirm` | `() => void` |  | Called by the confirm button. The dialog stays open; close it when the action succeeds. |
+| `destructive?` | `boolean` | `false` | Red confirm button, for actions that delete or cannot be undone. |
+| `pending?` | `boolean` | `false` | The action is running: the confirm button spins and the dialog cannot be closed. |
+| `error?` | `React.ReactNode` |  | Why the action failed, shown above the buttons. |
+| `size?` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Dialog width. |
+| `backdropBlur?` | `'none' \| 'sm' \| 'md' \| 'lg'` |  | How strongly the page behind the dialog is blurred. |
+| `nestedBackdrop?` | `boolean` |  | Blur the dialog or drawer this one opens from, instead of showing no backdrop. |
+
 ## createToastManager
 
 function · Overlays
@@ -1705,7 +1757,9 @@ Base UI `Dialog.Trigger` re-exported unchanged. See https://base-ui.com/react/co
 | `placement?` | `'center' \| 'right' \| 'left' \| 'bottom'` | `'center'` | `center` modal, or a sheet docked to an edge. |
 | `showClose?` | `boolean` | `true` | Render the corner close button. |
 | `closeLabel?` | `string` | `'Close'` | Accessible name of the close button. |
+| `backdropBlur?` | `'none' \| 'sm' \| 'md' \| 'lg'` | `'md'` | How strongly the page behind the dialog is blurred. Override the radius with `--oui-backdrop-blur`. |
 | `backdropProps?` | `BaseDialog.Backdrop.Props` |  | Props for the backdrop behind the dialog. |
+| `nestedBackdrop?` | `boolean` | `false` | Blur the dialog or drawer this one opens from. Nested dialogs otherwise show no backdrop, so the parent stays sharp behind them. |
 
 Also accepts all props of: `BaseDialog.Popup.Props`.
 
@@ -1751,6 +1805,7 @@ import { Drawer } from '@optimum-intelligence/opti-ui';
 | `open?` | `boolean` |  | Whether the drawer is open (controlled). |
 | `defaultOpen?` | `boolean` | `false` | Initial state when uncontrolled. |
 | `onOpenChange?` | `(open: boolean) => void` |  | Called when the drawer opens or closes. |
+| `onOpenChangeComplete?` | `(open: boolean) => void` |  | Called once the open or close transition has finished, e.g. to unmount the drawer after it slid out. |
 | `trigger?` | `React.ReactElement` |  | Element that opens the drawer, e.g. `<Button>Details</Button>`. Omit when `open` is controlled. |
 | `title` | `React.ReactNode` |  | Header title; also the drawer's accessible name. |
 | `eyebrow?` | `React.ReactNode` |  | Small label above the title, e.g. the record type. |
@@ -1761,6 +1816,7 @@ import { Drawer } from '@optimum-intelligence/opti-ui';
 | `size?` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Width: sm 24rem, md 32rem (default), lg 48rem, xl 60rem. Override with `--oui-drawer-width`. |
 | `dismissible?` | `boolean` | `true` | Set to `false` to block Esc, outside clicks and the close button, e.g. while a form inside is saving. |
 | `modal?` | `boolean` | `true` | `false` leaves the page behind interactive and drops the backdrop. |
+| `backdropBlur?` | `'none' \| 'sm' \| 'md' \| 'lg'` | `'md'` | How strongly the page behind a modal drawer is blurred. Override the radius with `--oui-backdrop-blur`. |
 | `closeLabel?` | `string` | `'Close'` | Accessible name of the close button. |
 | `className?` | `string` |  | Class name for the drawer panel. |
 | `bodyProps?` | `React.HTMLAttributes<HTMLDivElement>` |  | Props for the scrolling content area. |
@@ -2169,7 +2225,7 @@ import { Badge } from '@optimum-intelligence/opti-ui';
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `tone?` | `'neutral' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'` | `'neutral'` | Semantic color. |
+| `tone?` | `BadgeTone` | `'neutral'` | Status colour, or a plain colour from `ColorTone` for categories. |
 | `variant?` | `'soft' \| 'solid' \| 'outline'` | `'soft'` | `soft` tinted, `solid` filled, `outline` bordered. |
 | `size?` | `'sm' \| 'md'` | `'md'` | Badge height and text size. |
 
@@ -2204,7 +2260,10 @@ import { DataTable } from '@optimum-intelligence/opti-ui';
 | `tableProps?` | `Omit<TableProps, 'children'>` |  | Props for the underlying `Table` (className, wrapperProps, aria-*). |
 | `pageSizeOptions?` | `number[]` |  | Choices in the rows-per-page select. |
 | `controlSize?` | `'sm' \| 'md'` |  | Size of the search box and the filters. |
-| `toolbar?` | `React.ReactNode \| ((context: DataTableToolbarContext<T>) => React.ReactNode)` |  | Extra toolbar content (export, add…). A function receives the processed rows. |
+| `toolbar?` | `React.ReactNode \| ((context: DataTableToolbarContext<T>) => React.ReactNode)` |  | Extra toolbar content (add, bulk actions…). A function receives the processed rows. |
+| `showToolbar?` | `boolean` | `true` | `false` drops the search, filters, summary and toolbar content: rows only, for short tables under their own heading. |
+| `exportName?` | `string` |  | Adds an export button that saves the filtered, sorted rows as `<exportName>.csv`. Columns choose their text with `exportValue`. |
+| `fill?` | `boolean` | `false` | Grow to fill the height of a flex column container (a page, or a `Card` whose content holds the table); only the rows scroll. `maxHeight` still caps it. |
 | `className?` | `string` |  | Class name for the table's root element. |
 
 Also accepts all props of: `UseDataTableOptions<T>`, `Pick<TableProps, 'density' \| 'striped' \| 'stickyHeader'>`.
@@ -2249,7 +2308,7 @@ Also accepts all props of: `React.HTMLAttributes<HTMLDivElement>`.
 
 ### DataTable.Filter
 
-The control of one filter: a dropdown, a toggle chip or a date range picker.
+The control of one filter: a dropdown, a toggle chip, a row of chips or a date range picker.
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -2295,6 +2354,48 @@ Page navigation of the table. Renders nothing when there are no rows, or the tab
 
 Also accepts all props of: `Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>`.
 
+## DescriptionItem
+
+component · Feedback & data display
+
+One label and value pair inside a `DescriptionList`.
+
+```tsx
+import { DescriptionItem } from '@optimum-intelligence/opti-ui';
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `ref?` | `React.Ref<HTMLDivElement>` |  | Ref to the item's wrapper. |
+| `label` | `React.ReactNode` |  | The term, e.g. "Plate". |
+| `children?` | `React.ReactNode` |  | The value. Line breaks in text are kept. |
+
+Also accepts all props of: `Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>`.
+
+## DescriptionList
+
+component · Feedback & data display
+
+Label and value pairs, such as a record's details. Holds `DescriptionItem`s.
+
+```tsx
+import { DescriptionList } from '@optimum-intelligence/opti-ui';
+```
+
+```tsx
+<DescriptionList>
+  <DescriptionItem label="Plate">ABC-123</DescriptionItem>
+  <DescriptionItem label="Depot">North</DescriptionItem>
+</DescriptionList>
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `ref?` | `React.Ref<HTMLDListElement>` |  | Ref to the `<dl>` element. |
+| `layout?` | `'rows' \| 'grid'` | `'rows'` | How the label and value pairs are laid out. |
+
+Also accepts all props of: `React.HTMLAttributes<HTMLDListElement>`.
+
 ## EmptyState
 
 component · Feedback & data display
@@ -2552,7 +2653,7 @@ import { Tag } from '@optimum-intelligence/opti-ui';
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `tone?` | `'neutral' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'` | `'neutral'` | Semantic color. |
+| `tone?` | `BadgeTone` | `'neutral'` | Semantic color. |
 | `size?` | `'sm' \| 'md'` | `'md'` | Tag height. |
 | `icon?` | `React.ReactNode` |  | Leading icon. |
 | `onRemove?` | `() => void` |  | Adds the remove button. |
@@ -2650,7 +2751,7 @@ Small built-in stroke icon set. Every icon renders an `<svg>` that follows the f
 import { ArrowDownIcon } from '@optimum-intelligence/opti-ui';
 ```
 
-Icons: `ArrowDownIcon`, `ArrowUpIcon`, `CalendarIcon`, `CheckIcon`, `ChevronDownIcon`, `ChevronLeftIcon`, `ChevronRightIcon`, `ChevronUpIcon`, `ChevronsLeftIcon`, `ChevronsRightIcon`, `ChevronsUpDownIcon`, `CircleCheckIcon`, `CircleIcon`, `CircleXIcon`, `ClockIcon`, `ExternalLinkIcon`, `EyeIcon`, `EyeOffIcon`, `FileIcon`, `InfoIcon`, `MenuIcon`, `MinusIcon`, `MoreHorizontalIcon`, `PencilIcon`, `PlusIcon`, `SearchIcon`, `TrashIcon`, `TrendingDownIcon`, `TrendingUpIcon`, `TriangleAlertIcon`, `UploadIcon`, `XIcon`
+Icons: `ArrowDownIcon`, `ArrowUpIcon`, `CalendarIcon`, `CheckIcon`, `ChevronDownIcon`, `ChevronLeftIcon`, `ChevronRightIcon`, `ChevronUpIcon`, `ChevronsLeftIcon`, `ChevronsRightIcon`, `ChevronsUpDownIcon`, `CircleCheckIcon`, `CircleIcon`, `CircleXIcon`, `ClockIcon`, `DownloadIcon`, `ExternalLinkIcon`, `EyeIcon`, `EyeOffIcon`, `FileIcon`, `InfoIcon`, `MenuIcon`, `MinusIcon`, `MoreHorizontalIcon`, `PencilIcon`, `PlusIcon`, `SearchIcon`, `TrashIcon`, `TrendingDownIcon`, `TrendingUpIcon`, `TriangleAlertIcon`, `UploadIcon`, `XIcon`
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |

package/dist/llms.txt

@@ -122,6 +122,7 @@ so the components work in Next.js App Router.
 
 - `AlertDialog` — Confirmation dialog that requires an explicit choice (no outside-click dismissal). (parts: Root, Trigger, Content, Header, Title, Description, Body, Footer, Close)
 - `CommandPalette` — Searchable command menu in a dialog (Ctrl / ⌘ + K) for navigation and quick actions. Keyboard: arrows move, Enter chooses, Esc closes.
+- `ConfirmDialog` — Asks before an action runs: title, description, cancel and confirm buttons, a pending state that keeps the dialog open, and room for the error. For other layouts compose `AlertDialog`.
 - `createToastManager` — Base UI `Toast.createToastManager` re-exported unchanged. See https://base-ui.com/react/components/toast.
 - `Dialog` — Modal dialog and side sheet. Compose: `Dialog.Root` › `Dialog.Trigger` + `Dialog.Content` › `Dialog.Header` (`Title`, `Description`), `Dialog.Body`, `Dialog.Footer`. Use `render={<Button />}` on `Dialog.Trigger` / `Dialog.Close` to style them as buttons. (parts: Root, Trigger, Content, Header, Title, Description, Body, Footer, Close, createHandle)
 - `Drawer` — Side panel for inspecting or editing a record without leaving the page: pinned header, scrolling body, optional pinned footer. For a free-form sheet use `Dialog.Content` with `placement`.
@@ -149,6 +150,8 @@ so the components work in Next.js App Router.
 - `AvatarGroup` — Overlapping row of `Avatar` children, with an optional "+N" overflow counter.
 - `Badge` — Small status label.
 - `DataTable` — `<DataTable data={…} columns={…} />` renders a complete table with search, filters, sorting, pagination, row selection, row actions and inline editing; columns declare what they take part in. Every piece of state works uncontrolled or controlled (`search` / `filterValues` / `sort` / `page` / `selection`), and with `mode="server"` the same state drives an API. (parts: Root, Toolbar, Search, Filters, Filter, Actions, Summary, Content, Pagination)
+- `DescriptionItem` — One label and value pair inside a `DescriptionList`.
+- `DescriptionList` — Label and value pairs, such as a record's details. Holds `DescriptionItem`s.
 - `EmptyState` — Placeholder for empty lists, searches without results and first-run screens.
 - `Meter` — A measurement within a known range (quota, capacity, score).
 - `Progress` — Task completion. Pass `value={null}` for an indeterminate bar.