@close-by/clay 0.2.9 → 0.2.10

package/docs/elements.md

@@ -31,6 +31,13 @@ Each factory creates an `Element` with a wire `type` string. The React client ma
 | `field` | `field` | Label + description + error wrapper for one control |
 | `nativeSelect` | `nativeSelect` | Styled native `<select>` |
 | `navigationMenu` | `navigationmenu` (+ sub/link children) | Top nav mega-menu |
+| `inputGroup` | `inputGroup` | Input with prefix/suffix addons |
+| `toggle` | `toggle` | Pressed toolbar toggle |
+| `descriptionList` | `descriptionList` | Key-value detail rows |
+| `staticTable` | `staticTable` | Read-only HTML table |
+| `aspectRatio` | `aspectRatio` | Fixed-ratio child wrapper |
+| `itemList` | `itemList` | Settings / notification rows |
+| `checkboxGroup` | `checkboxGroup` | Multi-select checkboxes |
 | `notice` | `notice` | Dismissible app banner |
 | `eventCalendar` | `eventCalendar` | Month grid + day event list (`events` API → wire `items`) |
 | `timeline` | `timeline` | Vertical or horizontal event timeline |

package/docs/examples.md

@@ -19,6 +19,7 @@ After `bun run build:client && bun run demo` (or `bun run demo:cli`), open http:
 | `/examples/datatable` | `DataTableDemo.ts` | Multi-sort (Shift+click / badges), footer aggregates + a11y hints, column pin, remote filter/sort + pagination; density/zebra, editors (Enter/Esc + focus restore), resize, virtualization (≥40, coexists with reorder via windowed drop targets); facets, bulk, collapse/expand, loading/empty; `ui.table` sugar |
 | `/examples/composed` | `ComposedDemo.ts` | ReUI batch 1: `ui.timeline`, `ui.stepper`, `ui.dateRange`, `ui.feedList`/`ui.feedRow`, `ui.sparkline` |
 | `/examples/reui-batches` | `ReuiBatchesDemo.ts` | ReUI batches 3–6: `buttonGroup`, `empty`, `pagination`, `filterBar`, form inputs, `navigationMenu`, `notice`, `stat`+sparkline, `eventCalendar`, datatable `showFilterChips` |
+| `/examples/reui-batch-7` | `ReuiBatch7Demo.ts` | ReUI batch 7: `inputGroup`, `toggle`, `descriptionList`, `staticTable`, `aspectRatio`, `itemList`, `checkboxGroup` |
 | `/examples/charts` | `ChartDemo.ts` | `ui.chart.*`, `ui.sparkline`, composed/scatter charts |
 | `/examples/slider-demo` | `SliderDemo.ts` | Slider, checkbox, select + bindings |
 | `/examples/feedback` | `FeedbackDemo.ts` | Alerts, progress, timer, `ui.theme`, `ui.runJavaScript` / `ui.scroll` |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@close-by/clay",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "NiceGUI-like ui.* facade for Clay apps",
   "license": "MIT",
   "type": "module",
@@ -37,10 +37,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@close-by/clay-compiler": "0.2.9",
-    "@close-by/clay-core": "0.2.9",
-    "@close-by/clay-components": "0.2.9",
-    "@close-by/clay-server": "0.2.9",
+    "@close-by/clay-compiler": "0.2.10",
+    "@close-by/clay-core": "0.2.10",
+    "@close-by/clay-components": "0.2.10",
+    "@close-by/clay-server": "0.2.10",
     "@tailwindcss/cli": "^4.3.3",
     "tailwindcss": "^4.3.3"
   }

package/src/index.ts

@@ -43,6 +43,13 @@ import {
   notice as noticeFactory,
   eventCalendar as eventCalendarFactory,
   stat as statFactory,
+  inputGroup as inputGroupFactory,
+  toggleControl as toggleControlFactory,
+  descriptionList as descriptionListFactory,
+  staticTable as staticTableFactory,
+  aspectRatio as aspectRatioFactory,
+  itemList as itemListFactory,
+  checkboxGroup as checkboxGroupFactory,
   dataTable as dataTableFactory,
   areaChart as areaChartFactory,
   barChart as barChartFactory,
@@ -166,6 +173,19 @@ import {
   type NoticeVariant,
   type EventCalendarProps,
   type EventCalendarEvent,
+  type InputGroupProps,
+  type ToggleControlProps,
+  type ToggleControlVariant,
+  type ToggleControlSize,
+  type DescriptionListProps,
+  type DescriptionListItem,
+  type StaticTableProps,
+  type StaticTableColumn,
+  type AspectRatioProps,
+  type ItemListProps,
+  type ItemListEntry,
+  type CheckboxGroupProps,
+  type CheckboxGroupOption,
   type StatItem,
   type DataTableProps,
   type DataTableAction,
@@ -972,6 +992,43 @@ export function eventCalendar(props?: EventCalendarProps): Element {
   return eventCalendarFactory(props);
 }
 
+/** Input with prefix/suffix addons. See {@link InputGroupProps}. */
+export function inputGroup(props?: InputGroupProps): Element {
+  return inputGroupFactory(props);
+}
+
+/** Toolbar pressed toggle. See {@link ToggleControlProps}. */
+export function toggle(props?: ToggleControlProps): Element {
+  return toggleControlFactory(props);
+}
+
+/** Key-value detail rows. See {@link DescriptionListProps}. */
+export function descriptionList(props: DescriptionListProps): Element {
+  return descriptionListFactory(props);
+}
+
+/** Read-only HTML table. See {@link StaticTableProps}. */
+export function staticTable(props: StaticTableProps): Element {
+  return staticTableFactory(props);
+}
+
+/** Fixed aspect ratio wrapper. See {@link AspectRatioProps}. */
+export function aspectRatio(fn: () => void, props?: AspectRatioProps): Element;
+export function aspectRatio(props: AspectRatioProps, fn: () => void): Element;
+export function aspectRatio(a: any, b?: any): Element {
+  return aspectRatioFactory(a, b);
+}
+
+/** Settings / notification list rows. See {@link ItemListProps}. */
+export function itemList(props: ItemListProps): Element {
+  return itemListFactory(props);
+}
+
+/** Multi-select checkbox group. See {@link CheckboxGroupProps}. */
+export function checkboxGroup(props: CheckboxGroupProps): Element {
+  return checkboxGroupFactory(props);
+}
+
 /** Render markdown to HTML. Prefer `ui.markdown`. See {@link MarkdownProps}. */
 export function markdown(text?: string, props?: MarkdownProps): Element {
   return markdownFactory(text, props);
@@ -1741,6 +1798,13 @@ export const ui = {
   navigationMenu,
   notice,
   eventCalendar,
+  inputGroup,
+  toggle,
+  descriptionList,
+  staticTable,
+  aspectRatio,
+  itemList,
+  checkboxGroup,
   markdown,
   html,
   image,