@dcs-tech/ui 0.8.0 → 0.10.0

package/README.md

@@ -30,14 +30,24 @@ export const Example = () => (
 
 ## What's in it
 
-- **Fields** — Input, Select, Suggest, Checkbox, Radio, Switch, ChipInput, all
-  sharing one control surface, a 6-step size scale and one state model
-- **Primitives** — Button, Typography, Tooltip
+- **Fields** — Input, Select, Suggest, DatePicker (a day, a range, or `picker="month"` /
+  `"year"`), Checkbox, Radio, Switch, ChipInput (including free-text `tags`), all sharing one
+  control surface, a 6-step size scale and one state model
+- **Images** — ImagePicker, ImageStrip, ImageViewer, and ImageEditor (crop, zoom, rotate,
+  straighten, flip; each tool can be allowed or restricted). `prepareImage` applies the same
+  transform with no UI
+- **Overlays** — Dialog (`useDialog()` for confirms; `DialogHost` if you do not use `UIProvider`),
+  Popover, DropdownMenu, Toast
+- **Primitives** — Button, Typography, Tooltip, Alert (with a page-wide `banner` form)
+- **Navigation** — Link (`as` takes a router's link), Pagination, CommandPaletteTrigger,
+  PageProgress (a route-change bar, driven by `active`), NavList (a vertical link list for
+  inside a page)
 - **Layout** — Collapsible, FieldWrapper
+- **Lists** — ReorderList (drag to reorder: rows slide live, with mouse, touch or keyboard)
 - **Composites** — Form, Fields, EditableTable
 - **Data** — DataTable (client data or a server `dataSource`: views, search, filters,
-  sort, grouping, column chooser, table / card / split layouts, selection + bulk
-  actions, header / footer summaries with charts, export to xlsx / pdf / csv / html /
+  sort, grouping, column chooser, table / card / split layouts, `toolbarActions`, selection + bulk
+  actions (the table reports what `onRun` returns, and nothing if it returns nothing), header / footer summaries with charts, export to xlsx / pdf / csv / html /
   json / xml) and Charts (Chart, ColumnChart, BarList, Donut, Progress, Legend,
   ChartTable, LineChart, Funnel, Gauge, Treemap, … with a picture menu)
 - **Scroll** — one scrollbar rule (thin, hidden until needed) in `style.css`, edge
@@ -129,6 +139,47 @@ Every colour, size and spacing value is a CSS custom property. Override them on
 `variant` is per family — `outlined | filled | standard | underlined` for text
 fields, `outlined | filled | standard` for Checkbox and Radio, none for Switch.
 
+### Field width
+
+A text field fills the space its parent gives it, up to 320px. `width` changes that:
+
+| `width` | The field is |
+| --- | --- |
+| not given | the available space, up to 320px |
+| `"full"` | the whole row, with no limit |
+| `"auto"` | as wide as its content |
+| `240`, `"15rem"` | exactly that, never wider than its parent |
+
+In a table cell (`layout="cell"`) the column decides and `width` is ignored. With `layout="horizontal"`
+it sizes the control; the label keeps its column.
+
+### List width
+
+A Select or Suggest list fits its content: never narrower than its field, up to 320px (Select) or
+480px (Suggest), and always on screen. `listWidth="field"` makes it exactly the field's width.
+
+### Icon size
+
+An icon-only button or a Sidebar row sizes its icon with the `--icon-size-xxs` … `--icon-size-xl`
+tokens, which follow `--ui-scale`. Override them on `:root` to change icon sizes across the app. An
+icon given its own `size` keeps it.
+
+### Dialog width
+
+`Dialog` takes `size="sm | md | lg | xl | full"` (420 / 560 / 720 / 960 px / the whole
+window). For any other width, set `--dialog-width`. It is the supported way, and it wins
+over `size`:
+
+```tsx
+<Dialog open title="Wide" style={{ '--dialog-width': '840px' } as React.CSSProperties} />
+```
+
+```css
+.invoice-dialog { --dialog-width: min(1100px, 95vw); }  /* <Dialog className="invoice-dialog"> */
+```
+
+For a side or top/bottom sheet (`placement`), it sets the panel's width or its max width.
+
 ## Licence
 
 UNLICENSED — © 2026 Noyyal Tech. All rights reserved.