torch-glare 2.4.4 → 2.4.5

package/docs/components/form-builder.md

@@ -106,17 +106,26 @@ renders a repeating list — its `children` is a render fn `(rowName, index, rem
 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 +167,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/section-block.md

@@ -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/table.md

@@ -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/how-to/forms-with-form-builder.md

@@ -116,7 +116,9 @@ export function ItemForm({
 ```
 
 `FormBuilder.Section` groups fields in a `SectionBlock` (`color` is one of `Blue`, `Yellow`,
-`Green`, `Red`, `Orange`, `Purple`, `Pink`, `Gray`). Pass the Save via `actions` — a
+`Green`, `Red`, `Orange`, `Purple`, `Pink`, `Gray`). It also takes `icon`, `action`
+(right-aligned buttons on the title row) and `variant` — `variant="Table"` switches to the
+full-bleed table shell that `FormBuilder.Table` uses internally. Pass the Save via `actions` — a
 `FormBuilder.Submit`, which is loading-aware; it renders in the header action pill. (With raw
 `FormBuilder`, put the same `FormBuilder.Submit` in a `FormBuilder.Header`.)
 
@@ -140,7 +142,7 @@ Every field, its underlying control, and the value your `onSubmit` receives:
 | `.Otp` (`length`)                                                | `string`                                                       |
 | `.Slider` (`min`, `max`, `step`, `range`, `suffix`)              | `number` (or `[number, number]` with `range`)                  |
 | `.Color` (`presets`, `alpha`)                                    | hex `string`                                                   |
-| `.Phone` (`defaultCountry`, defaults to `+964`)                  | `string` (`"+<dial> <number>"`)                                |
+| `.Phone` (`defaultCountry`, defaults to `+964`)                  | `string` (`"+<dial> <number>"`) — collapses to a plain number input inside a `.Table` cell, where `defaultCountry` does not apply |
 | `.Date`                                                          | `Date`                                                         |
 | `.DateRange`                                                     | `{ from, to }`                                                 |
 | `.DateMultiple`                                                  | `Date[]`                                                       |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "torch-glare",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "type": "module",
   "license": "MIT",
   "description": "A copy-in React component library (TypeScript + Radix UI + Tailwind CSS). Its CLI copies component source directly into your project — you own the code.",