torch-glare 2.4.4 → 2.5.0

package/docs/components/data-views/migration.md

@@ -0,0 +1,79 @@
+---
+title: Migrating to the DataViews component
+description: The DataViewsLayout family was replaced by one compound DataViews component. What each old part maps to, and what was removed.
+group: migration
+keywords: [migration, data-views, dataviews-layout, kanban-view, table-view, inbox-view, tree-view, config-panel, upgrade, breaking]
+---
+
+# Migrating to the DataViews component
+
+The `DataViewsLayout` family — a layout component plus one standalone component per view, wired
+together with `useDataViewsState` — was replaced by a single compound component, `DataViews`.
+
+If you never used those, there is nothing to do here: they were **folder components that the
+registry never listed**, so `npx torch-glare add KanbanView` was never able to install one. The
+docs described them, the CLI could not deliver them. That mismatch is what this release fixes.
+
+## What maps to what
+
+| Old | New |
+| --- | --- |
+| `DataViewsLayout` | `DataViews` |
+| `TableView` | `DataViews.Table` |
+| `KanbanView` | `DataViews.Board` |
+| `InboxView` | `DataViews.Inbox` |
+| `TreeView` | `DataViews.Tree` |
+| `DataViewsConfigPanel` | `DataViews.Panel`, with `Panel.Tab` · `Panel.SavedViews` · `Panel.Columns` · `Panel.Sort` |
+| `useDataViewsState` | the `query` prop + `onQueryChange` |
+
+The shape of the change is that a view is no longer *configured*, it is *rendered*. There is no map
+of which views to enable: render `<DataViews.Board/>` and a Board tab appears; wrap it in a
+condition and it disappears, switching away from it if it was the open one.
+
+```tsx
+// before — composable mode, wired by hand
+const state = useDataViewsState();
+<DataViewsLayout state={state} views={{ table: true, kanban: true }}>
+  <TableView state={state} />
+  <KanbanView state={state} groups={groups} />
+</DataViewsLayout>
+
+// after
+<DataViews rows={rows} total={total} fields={fields} onQueryChange={setQuery}>
+  <DataViews.Header title="Orders">
+    <DataViews.ViewSwitch />
+  </DataViews.Header>
+  <DataViews.Table />
+  <DataViews.Board groups={groups} />
+</DataViews>
+```
+
+## Also removed
+
+Three parts of `DataViews` itself went in the same release.
+
+**`DataViews.Pagination`** — rows now load as you scroll. Pass `onLoadMore` and append each page to
+`rows`; whether there is more is derived from `rows.length < total`, so there is no `hasMore` prop.
+See the *Large datasets* section of the [DataViews doc](./index.md).
+
+**`DataViews.Empty`** — when there is nothing to show, the view shows nothing: the table keeps its
+header band and has no rows, the board keeps its columns and has no cards. A centred message in
+place of the view threw away the chrome, and it could not tell "no results" apart from "not fetched
+yet" — so the first load of every page announced that nothing matched before anything had been
+asked for.
+
+**`DataViews.Loading`** — each view now paints its own skeleton, in its own shape, driven by the
+`loading` prop. A custom view registered with `markView` gets the same thing: read `loading` from
+`useDataViewsData()` and lay out the exported `SkeletonBar` / `skeletonKeys`.
+
+## Upgrading a copied component
+
+`DataViews` is copy-in like everything else, so upgrading means re-running `add` and re-applying any
+local edits:
+
+```bash
+npx torch-glare@latest add DataViews
+```
+
+That copies the folder plus its dependencies — `Table`, `FormBuilder`, `TreeFolder`, the
+`useDragDrop` and `useInfiniteScroll` hooks, and the `dataViews` utilities.

package/docs/components/date-picker.md

@@ -855,4 +855,3 @@ function DatePickerWithStore() {
 - [SlideDatePicker](./slide-date-picker.md) - Mobile-optimized slide picker
 - [InputField](./input-field.md) - Input field used as default trigger
 - [Popover](./popover.md) - Dropdown container
-- [TimePicker](./time-picker.md) - Standalone time picker

package/docs/components/form-builder.md

@@ -81,7 +81,8 @@ Each is a JSX child taking at least `name`, plus `label`, `placeholder`,
 | `FormBuilder.Slider` (`min,max,step,range`)                                 | `@radix-ui/react-slider`                                                              | `number` / `[number,number]`                                 |
 | `FormBuilder.Color` (`presets`, `alpha`)                                    | `ColorPicker` (full palette: SV area, hue, opacity, eyedropper, HEX/RGB/HSL, presets) | hex `string` (`#rrggbb`, or `#rrggbbaa` when opacity < 100%) |
 | `FormBuilder.Phone` (`defaultCountry`)                                      | `SearchableSelect` + `InputField`                                                     | `string`                                                     |
-| `FormBuilder.Select` / `.SearchableSelect` (`options`, async props)         | `SearchableSelect`                                                                    | `string`                                                     |
+| `FormBuilder.Select` (`options`)                                            | `Select`                                                                              | `string`                                                     |
+| `FormBuilder.SearchableSelect` (`options`, async: `onSearchChange`/`onLoadMore`/`hasMore`) | `SearchableSelect`                                                      | `string`                                                     |
 | `FormBuilder.MultiSelect` / `.Tags` (`options`)                             | `BadgeField`                                                                          | `string[]`                                                   |
 | `FormBuilder.RadioList` (`options`, each with optional `description`)       | boxed radio list                                                                      | `string`                                                     |
 | `FormBuilder.CheckboxGroup` (`options`, each with optional `description`)   | boxed checkbox list                                                                   | `string[]`                                                   |
@@ -99,24 +100,33 @@ Each is a JSX child taking at least `name`, plus `label`, `placeholder`,
 | `FormBuilder.Signature` (`penColor`)                                        | canvas pad                                                                            | PNG data-URL `string`                                        |
 | `FormBuilder.FieldArray` (`children` render fn, `defaultItem`)              | RHF `useFieldArray`                                                                   | `object[]`                                                   |
 | `FormBuilder.Table` (`columns`, `selectable`, `reorderable`, `defaultItem`) | editable grid in a `SectionBlock`                                                     | `object[]`                                                   |
-| `FormBuilder.Custom` (`render`, `formatView`)                               | your control                                                                          | anything                                                     |
+| `FormBuilder.Custom` (`render`)                                             | your control                                                                          | anything                                                     |
 
 `FormBuilder.Password` accepts `strengthMeter` (shows a `PasswordLevel` meter). `FormBuilder.FieldArray`
 renders a repeating list — its `children` is a render fn `(rowName, index, remove) => …` and sub-fields
 are named `${rowName}.field`.
 
 `FormBuilder.Table` is the **table-shaped** counterpart of `FieldArray` (value `object[]`): an editable
-grid where each row is a record and each column cell is any `FormBuilder.*` field. It renders **inside a
-`SectionBlock`**, so place it as a **top-level child** of the form (not inside a `FormBuilder.Section`).
+grid where each row is a record and each column cell is any `FormBuilder.*` field. It renders its own
+`SectionBlock` (`variant="Table"` — the full-bleed table shell), so place it as a **top-level child** of
+the form, **not** inside a `FormBuilder.Section` — nesting produces a card inside a card. When you need a
+table that isn't a form field, compose the shell yourself with `SectionBlock variant="Table"` (see
+[SectionBlock → Table Variant](./section-block.md#table-variant)).
+
 Each column pairs a `header` with a `cell(rowName, index)` renderer — name the cell's field
-`${rowName}.<key>`. The section header carries the actions: a **Add New** button (also repeated as the
-bottom footer) and a **Delete Row** button that's disabled until rows are checkbox-selected. Rows support
+`${rowName}.<key>`. Set `width` to size a column; it is applied to both the header and the body cells.
+The section header carries the actions: an **Add New** button and a **Delete Row** button that's disabled
+until rows are checkbox-selected. A second **＋ Add New** sits below the grid. Both live *outside* the
+horizontal scroll container, so they stay put when a wide table is scrolled sideways. Rows support
 **checkbox selection** (+ select-all), **drag-drop reordering**, and — per column, via `sortKey` — a
 sort toggle in the header. Cells render
 "bare" (control only) with validation errors shown as a tooltip on the control, so a row stays one line
 tall, and each field passes `onTable` so it's borderless and blends into the grid. Practical cell fields
 are the compact ones — `Text`, `Number`, `Currency`, `Select`, `SearchableSelect`, `Date`, `Phone`,
 `Checkbox`, `SwitchBox`; wide fields (`RichText`, `Signature`, `File`) work but aren't suited to a cell.
+`FormBuilder.Phone` collapses to a **plain number input** in a cell — two controls in one cell is not a
+table column, so add a separate column (e.g. a `FormBuilder.Select` of dial codes) if you need the
+country code.
 
 ```tsx
 <FormBuilder.Table
@@ -158,8 +168,9 @@ clickable. Multi-select is also available as `.MultiSelect` / `.Tags` (a tag-chi
 renders like any other field — the `label` sits in the normal label column — and the box holds
 an optional inline `subLabel`, a vertical divider, and the switch.
 
-`FormBuilder.Section` (props `title`, `color`, `icon`) groups fields in a Glare
-`SectionBlock`. `FormBuilder.Submit` is a loading-aware submit button. It
+`FormBuilder.Section` (props `title`, `color`, `icon`, `action`, `variant`) groups fields in a Glare
+`SectionBlock`. `action` puts buttons on the title row; `variant="Table"` switches to the
+full-bleed table shell (what `FormBuilder.Table` uses internally). `FormBuilder.Submit` is a loading-aware submit button. It
 **auto-associates with the enclosing form** (via context), so it submits even when placed in a
 header / action bar that renders _outside_ the `<form>` — no manual `form={id}` wiring.
 

package/docs/components/form-renderer.md

@@ -286,4 +286,5 @@ const form = useForm({ resolver, defaultValues })
 
 > `childrenOutside` is the deprecated former name for `summary`. It still works.
 
-`FormRenderer` does **not** forward `summary` — use `FormDrawer` directly when you need one.
+`FormRenderer` forwards `summary` straight into the drawer tray, so you rarely need
+`FormDrawer` directly — reach for it only when you want the drawer without a form.

package/docs/components/form.md

@@ -1,6 +1,6 @@
 ---
 name: Form
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, validation, react-hook-form, accessible, compound]

package/docs/components/input-field.md

@@ -1,6 +1,6 @@
 ---
 name: InputField
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, input, field, popover, tooltip, compound, accessible]

package/docs/components/input-otp.md

@@ -1,6 +1,6 @@
 ---
 name: InputOTP
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, otp, input, verification, authentication, accessible]

package/docs/components/input.md

@@ -1,6 +1,6 @@
 ---
 name: Input
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, input, text, field, accessible, compound]

package/docs/components/labeled-check-box.md

@@ -1,6 +1,6 @@
 ---
 name: LabeledCheckBox
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, checkbox, label, selection, accessible, compound]

package/docs/components/labeled-radio.md

@@ -1,6 +1,6 @@
 ---
 name: LabeledRadio
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, radio, label, selection, accessible, compound]

package/docs/components/radio-card.md

@@ -1,6 +1,6 @@
 ---
 name: RadioCard
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, radio, card, selection, compound, accessible]

package/docs/components/radio.md

@@ -1,6 +1,6 @@
 ---
 name: Radio
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, radio, selection, radix-ui, accessible, group, controlled]

package/docs/components/search-field.md

@@ -1,6 +1,6 @@
 ---
 name: SearchField
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, search, input, field, system-style, glassmorphism]

package/docs/components/section-block.md

@@ -6,7 +6,7 @@ category: layout
 group: Layout & Containers
 tags: [layout, card, section, container, form, group]
 status: stable
-version: 2.4.0
+version: 2.4.5
 dependencies:
   - "class-variance-authority": "^0.7.0"
 ---
@@ -59,6 +59,9 @@ export function Example() {
 |------|------|---------|-------------|
 | `color` | `SectionColor` | `"Blue"` | Color of the title badge. One of `Blue`, `Yellow`, `Green`, `Red`, `Orange`, `Purple`, `Pink`, `Gray`. |
 | `title` | `ReactNode` | — | Title rendered inside the colored badge. Optional — when omitted, the header is hidden entirely. Accepts any ReactNode (string, JSX with icons, links, etc.). |
+| `icon` | `ReactNode` | — | Rendered inside the badge, to the left of `title`. |
+| `action` | `ReactNode` | — | Right-aligned content on the title row — typically action buttons. |
+| `variant` | `SectionVariant` | `"Default"` | `"Default"` is the padded form card. `"Table"` is the full-bleed table shell: no body padding, a rule under the header, no bottom padding, and the card clipped to its radius. See [Table Variant](#table-variant). |
 | `containerClassName` | `string` | — | Class name applied to the outer container (alongside `className`). |
 | `headerClassName` | `string` | — | Class name applied to the header wrapper around the title badge. |
 | `bodyClassName` | `string` | — | Class name applied to the body wrapper holding `children`. |
@@ -79,10 +82,15 @@ export type SectionColor =
   | "Pink"
   | "Gray";
 
+export type SectionVariant = "Default" | "Table";
+
 export interface SectionBlockProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
   color?: SectionColor;
+  variant?: SectionVariant;
   title?: ReactNode;
+  icon?: ReactNode;
+  action?: ReactNode;
   containerClassName?: string;
   headerClassName?: string;
   bodyClassName?: string;
@@ -362,6 +370,74 @@ function RowDivider() {
 }
 ```
 
+### Table Variant
+
+`variant="Table"` swaps the padded form body for the full-bleed table shell: the body loses
+its `px-[42px]` gutter, gains a rule under the header, and the card is clipped to its 16px
+radius with no bottom padding — so an end-action row meets the card edge.
+
+The layout has three stacked parts, and the order matters. Only the **scroller** scrolls
+horizontally; the header actions above it and the end-action below it stay put, which is
+what keeps `Add New` reachable on a wide table.
+
+```tsx
+import { SectionBlock } from "@/components/SectionBlock";
+import { Button } from "@/components/Button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableEndAction,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableScroller,
+} from "@/components/Table";
+
+<SectionBlock
+  variant="Table"
+  color="Purple"
+  title="Items Table"
+  icon={<i className="ri-box-3-line text-[18px]" />}
+  action={
+    <>
+      <Button type="button" size="M" variant="BorderStyle" disabled>
+        Delete Row
+      </Button>
+      <Button type="button" size="M" variant="BluColStyle">
+        Add New
+      </Button>
+    </>
+  }
+>
+  <TableScroller>
+    <Table className="min-w-full">
+      <TableHeader>
+        <TableRow>
+          <TableHead style={{ width: 200 }}>Items</TableHead>
+          <TableHead style={{ width: 200 }}>Label</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell minWidth={0}>Product name</TableCell>
+          <TableCell minWidth={0}>Label</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  </TableScroller>
+
+  <TableEndAction>
+    <i className="ri-add-line" />
+    Add New
+  </TableEndAction>
+</SectionBlock>
+```
+
+For a table that edits form values, don't hand-compose this — use
+[`FormBuilder.Table`](./form-builder.md#formbuildertable), which renders exactly this shell
+and wires rows to `react-hook-form`.
+
 ### Custom Layout (override defaults)
 
 Use `containerClassName`, `headerClassName`, and `bodyClassName` to override the built-in spacing and width without losing the title/body structure.
@@ -384,7 +460,7 @@ Use `containerClassName`, `headerClassName`, and `bodyClassName` to override the
 - **Color coding**: Use distinct colors to help users scan a page of multiple sections (e.g., Blue for primary forms, Yellow for warnings, Red for destructive zones).
 - **No-title sections**: Drop the `title` prop entirely when the section's purpose is obvious from context — keeps the body padding without the visual weight of a header.
 - **Composing with form fields**: `SectionBlock` does not impose any inner layout — pair it with helpers like the `FieldRow` pattern above, or with `InputField`, `Form`, or `FieldSection` for more structured forms.
-- **Default width**: The component ships with `w-[1100px]`. Override via `containerClassName="w-full"` (or any specific width) for narrower containers.
+- **Width**: The component is `w-full` — it fills its parent. Constrain it from the outside, or with `containerClassName="max-w-[1100px]"`.
 
 ## Accessibility
 
@@ -395,7 +471,7 @@ Use `containerClassName`, `headerClassName`, and `bodyClassName` to override the
 
 | Issue | Fix |
 |-------|-----|
-| Card overflows on small screens | Default width is `w-[1100px]`. Override with `containerClassName="w-full"` or a smaller fixed width. |
+| Card overflows on small screens | The card is `w-full`; the overflow is coming from its content. Give the content `min-w-0`, or cap the card with `containerClassName="max-w-[…]"`. |
 | Title not showing | The `title` prop is optional — omitting it hides the entire header. Pass any non-null `ReactNode` to render it. |
 | Badge color looks wrong | `color` only accepts the predefined `SectionColor` values. For custom badge colors, override via `headerClassName` and a custom child node. |
 | Need a different background | The body uses `bg-background-presentation-form-base`. Override via `containerClassName` (your class wins via `cn()` merging). |

package/docs/components/select.md

@@ -1,6 +1,6 @@
 ---
 name: Select
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, select, dropdown, accessible, radix-ui]

package/docs/components/simple-select.md

@@ -1,6 +1,6 @@
 ---
 name: SimpleSelect
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, select, dropdown, custom, system-style, accessible]

package/docs/components/switch.md

@@ -1,6 +1,6 @@
 ---
 name: Switch
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, switch, toggle, radix-ui, accessible, controlled]

package/docs/components/tab-switch.md

@@ -1,6 +1,6 @@
 ---
 name: TabSwitch
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/navigation
 tags: [tab-switch, segmented-control, view-switcher, toggle, list-cards, pills]

package/docs/components/table.md

@@ -1,6 +1,6 @@
 ---
 name: Table
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/data-display
 tags: [table, data, grid, sortable, resizable, accessible, compound]
@@ -386,18 +386,41 @@ function ResizableTable() {
 | `disabled` | `boolean` | `false` | Disables interactions |
 | `sortType` | `'asc' \| 'desc' \| undefined` | - | Sort indicator |
 | `onSort` | `() => void` | - | Sort handler |
+| `sortLabel` | `string` | - | Column name for the sort button's accessible label |
+| `onResize` | `(width: number) => void` | - | Fires while the column is drag-resized. Passing it makes the width **controlled** — you own the value and feed it back via `style.width`. Required whenever the table needs a definite width (`table-layout: fixed`), since only the owner of every column width can total them. Omit for uncontrolled resizing. |
 | `isDummy` | `boolean` | `false` | Non-interactive header |
-| `className` | `string` | - | Additional CSS classes |
+| `className` / `style` | `string` / `CSSProperties` | - | Applied to the `<th>` — this is how you size a column (`style={{ width: 200 }}`) |
+| `contentClassName` | `string` | - | Classes for the inner layout box (the flex row holding the label and sort toggle). Use it for typography or colour; `className` styles the `<th>` itself. |
+
+**Every** prop you pass — `className`, `style`, `aria-*`, `role`, `tabIndex` and event
+handlers alike — lands on the `<th>`. They deliberately share one element: libraries like
+dnd-kit hand back accessibility attributes and event listeners as a matched pair, and
+splitting them across two nodes leaves the focusable element without its handlers. Reach the
+inner layout box with `contentClassName`.
 
 ### TableCell Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `isDummy` | `boolean` | `false` | Non-interactive cell |
+| `minWidth` | `number` | `200` | Minimum width of the content box, in px. Pass `0` when the column width is driven by the caller — otherwise this floor silently overrides any narrower column. |
+| `fade` | `boolean` | `true` | Whether the cell **crops** its content and fades the last 25% of it, signalling text clipped by the column width. Set `false` for cells holding a **control**: the fade washes out whatever sits at the right edge (a Select's chevron, a date button), and the crop — the content box hugs the control exactly — would clip every side of the control's hover/focus drop shadow. `isDummy` cells never fade. |
 | `childrenClassName` | `string` | - | Classes for content wrapper |
 | `className` | `string` | - | Additional CSS classes |
 | `children` | `React.ReactNode` | - | Cell content |
 
+### TableScroller Props
+
+Horizontal scroll container for a table, with the thin design-system scrollbar (4px track
+that thickens and turns blue on hover). Accepts any `div` props. Keep header actions and
+`TableEndAction` **outside** it so they don't scroll away on a wide table.
+
+### TableEndAction Props
+
+The full-width action bar that sits **below** a table — e.g. `＋ Add New`. A `<button>`, not
+a `<tr>`, so it is a sibling of `TableScroller` and stays put while the columns scroll. Accepts
+any `button` props. Use `TableFooterButton` instead when the action should scroll with the grid.
+
 ### TableCheckbox Props
 
 | Prop | Type | Default | Description |
@@ -434,15 +457,24 @@ interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
   disabled?: boolean
   sortType?: 'asc' | 'desc' | undefined
   onSort?: () => void
+  sortLabel?: string
+  onResize?: (width: number) => void
+  contentClassName?: string
   isDummy?: boolean
 }
 
 // TableCell types
 interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
   isDummy?: boolean
+  minWidth?: number
+  fade?: boolean
   childrenClassName?: string
 }
 
+// TableScroller / TableEndAction types
+type TableScrollerProps = HTMLAttributes<HTMLDivElement>
+type TableEndActionProps = ButtonHTMLAttributes<HTMLButtonElement>
+
 // TableCheckbox types
 interface TableCheckboxProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   id: string
@@ -795,7 +827,7 @@ Dates and amounts wrap awkwardly when the column is narrow. Add `whitespace-nowr
 
 ### `TableCell` force-wraps children — use `childrenClassName` to override
 
-`TableCell` unconditionally wraps children in an inner `<div>` with `flex justify-start items-center gap-1 min-w-[200px] overflow-hidden` plus a fade-out gradient mask. Three common breakages:
+`TableCell` unconditionally wraps children in an inner `<div>` with `flex justify-start items-center gap-1`, a `min-width` of 200px, `overflow-hidden`, and a fade-out gradient mask. Three common breakages:
 
 1. **Empty-state rows don't center.** A `flex flex-col items-center` empty state ends up flush left because the outer wrapper's `justify-start` already decided alignment.
 2. **Multi-line content is clipped** by `overflow-hidden` + the gradient mask.
@@ -807,7 +839,9 @@ Dates and amounts wrap awkwardly when the column is narrow. Add `whitespace-nowr
 <TableRow>
   <TableCell
     colSpan={7}
-    childrenClassName="flex flex-col items-center justify-center gap-3 py-12 w-full min-w-0 text-content-presentation-global-secondary"
+    minWidth={0}
+    fade={false}
+    childrenClassName="flex flex-col items-center justify-center gap-3 py-12 w-full text-content-presentation-global-secondary"
   >
     <i className="ri-inbox-line text-4xl opacity-60" />
     <p className="typography-body-medium-regular">No data</p>
@@ -816,11 +850,14 @@ Dates and amounts wrap awkwardly when the column is narrow. Add `whitespace-nowr
 </TableRow>
 ```
 
-Key overrides on `childrenClassName`:
+Key overrides:
 
-- `flex flex-col` overrides the default `flex-row`
-- `items-center justify-center` overrides `justify-start`
-- `w-full min-w-0` overrides the hardcoded `min-w-[200px]`
+- `flex flex-col` on `childrenClassName` overrides the default `flex-row`
+- `items-center justify-center` on `childrenClassName` overrides `justify-start`
+- **`minWidth={0}`** clears the 200px floor. It is an inline style, so a class such as
+  `min-w-0` on `childrenClassName` cannot beat it — use the prop.
+- **`fade={false}`** drops both the gradient mask and the `overflow-hidden` that clips
+  multi-line content.
 
 ## Accessibility
 

package/docs/components/text-editor.md

@@ -1,6 +1,6 @@
 ---
 name: TextEditor
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/editors
 tags: [editor, rich-text, block-editor, editorjs, markdown, rtl, accessible]

package/docs/components/textarea.md

@@ -1,6 +1,6 @@
 ---
 name: Textarea
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, textarea, multiline, input, field, accessible, auto-resize]

package/docs/components/toggle-button.md

@@ -1,6 +1,6 @@
 ---
 name: ToggleButton
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/buttons
 tags: [toggle, button, pressed, radix-ui, accessible, variants]

package/docs/components/toggle.md

@@ -1,6 +1,6 @@
 ---
 name: Toggle
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, toggle, button, radix-ui, accessible, variants]