@milktop/react-ui 0.2.5 → 0.3.0

package/dist/table/Table.d.ts

@@ -33,7 +33,7 @@
  * - `size`: 'sm', 'md' (default) or 'lg' (roomier rows)
  * - `flush`: no border or rounding, to sit edge to edge in a card
  * - `onRowClick`: called with the row when a row is clicked (outside its
- *   controls), unless rows are ticked
+ *   controls), unless rows are ticked; rows then show the pointer
  *
  * Or write the <table> yourself as its content, for the look alone (no
  * sorting, selection or loading states); `data-align` on cells works too.

package/dist/table/Table.js

@@ -34,7 +34,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * - `size`: 'sm', 'md' (default) or 'lg' (roomier rows)
  * - `flush`: no border or rounding, to sit edge to edge in a card
  * - `onRowClick`: called with the row when a row is clicked (outside its
- *   controls), unless rows are ticked
+ *   controls), unless rows are ticked; rows then show the pointer
  *
  * Or write the <table> yourself as its content, for the look alone (no
  * sorting, selection or loading states); `data-align` on cells works too.
@@ -141,7 +141,7 @@ export function Table({ columns = [], rows = [], rowKey = 'id', selectable = fal
             onRowClick?.(row);
     }
     const columnCount = columns.length + (selectable ? 1 : 0);
-    return (_jsx("div", { ...rest, ...part('root'), className: cx(className, classes?.root), "data-size": size, "data-flush": flush || undefined, "data-selecting": selecting || undefined, "data-loading": (loading && rows.length > 0) || undefined, children: _jsx("div", { ...part('scroll'), "data-sticky": maxHeight ? '' : undefined, style: maxHeight ? { maxHeight } : undefined, children: !columns.length ? children : (_jsxs("table", { ...part('table'), "aria-busy": loading, children: [label && _jsx("caption", { ...part('caption'), children: label }), _jsx("thead", { children: _jsxs("tr", { children: [selectable && (_jsx("th", { ...part('select-cell'), scope: "col", children: _jsx(Checkbox, { label: t.table.selectAll, labelHidden: true, disabled: !rows.length, checked: allState, onCheckedChange: (on) => toggleAll(on) }) })), columns.map((column) => (_jsx("th", { scope: "col", "data-align": column.align ?? 'start', "aria-sort": ariaSort(column), style: column.width ? { width: column.width } : undefined, children: column.sortable
+    return (_jsx("div", { ...rest, ...part('root'), className: cx(className, classes?.root), "data-size": size, "data-flush": flush || undefined, "data-clickable": onRowClick ? '' : undefined, "data-selecting": selecting || undefined, "data-loading": (loading && rows.length > 0) || undefined, children: _jsx("div", { ...part('scroll'), "data-sticky": maxHeight ? '' : undefined, style: maxHeight ? { maxHeight } : undefined, children: !columns.length ? children : (_jsxs("table", { ...part('table'), "aria-busy": loading, children: [label && _jsx("caption", { ...part('caption'), children: label }), _jsx("thead", { children: _jsxs("tr", { children: [selectable && (_jsx("th", { ...part('select-cell'), scope: "col", children: _jsx(Checkbox, { label: t.table.selectAll, labelHidden: true, disabled: !rows.length, checked: allState, onCheckedChange: (on) => toggleAll(on) }) })), columns.map((column) => (_jsx("th", { scope: "col", "data-align": column.align ?? 'start', "aria-sort": ariaSort(column), style: column.width ? { width: column.width } : undefined, children: column.sortable
                                         ? _jsxs("button", { ...part('sort'), type: "button", "data-dir": sortDir(column) ?? undefined, onClick: () => toggleSort(column), children: [_jsx("span", { children: column.label }), _jsx("span", { ...part('sort-icon'), children: _jsx("iconify-icon", { icon: sortDir(column) === 'asc' ? 'lucide:chevron-up'
                                                             : sortDir(column) === 'desc' ? 'lucide:chevron-down' : 'lucide:chevrons-up-down' }) })] })
                                         : column.label }, column.key)))] }) }), _jsx("tbody", { onPointerDownCapture: noteShift, onMouseDownCapture: noteShift, onKeyDownCapture: noteShift, children: loading && !rows.length

package/dist/table/table.css

@@ -23,8 +23,8 @@
     & tbody tr:last-child td { border-bottom: none; }
     & tbody tr:hover { background: color-mix(in srgb, var(--ui-hover) 60%, transparent); }
     & tbody tr[data-selected] { background: color-mix(in srgb, var(--ui-accent-soft) 45%, transparent); }
-    /* While rows are ticked, a click on a row ticks it. */
-    [data-selecting] > & tbody tr { cursor: pointer; }
+    /* A click on a row opens it (`onRowClick`) or, while rows are ticked, ticks it. */
+    :is([data-clickable], [data-selecting]) > & tbody tr { cursor: pointer; }
     /* Outer cells line up with a card's padding. */
     [data-flush] > & :is(th, td):first-child { padding-left: 1.25rem; }
     [data-flush] > & :is(th, td):last-child { padding-right: 1.25rem; } }

package/dist/theme.css

@@ -80,8 +80,11 @@
     --ui-control-height-lg: 2.75rem;
     /* Stroke icons' line weight (Lucide's own is 2, in a 24-unit grid). */
     --ui-icon-stroke: 2;
-    /* Sidebar and its items. */
-    --ui-sidebar-width: 15rem;
+    /* Sidebar and its items. Open, it's -wide, or -narrow below 1280px; set
+       --ui-sidebar-width for one fixed width. */
+    --ui-sidebar-width-wide: 15rem;
+    --ui-sidebar-width-narrow: 13rem;
+    --ui-sidebar-width: var(--ui-sidebar-width-wide);
     --ui-sidebar-rail-width: 3.5rem;
     --ui-sidebar-item-height: 2.125rem;
     --ui-sidebar-item-padding: 0 0.5rem 0 0.75rem;
@@ -114,6 +117,10 @@
     --ui-sidebar-inset-active-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
   }
 
+  @media (max-width: 1279px) {
+    :root { --ui-sidebar-width: var(--ui-sidebar-width-narrow); }
+  }
+
   :root.dark, [data-theme=dark] {
     --ui-text: #fafafa;
     --ui-muted: #a1a1aa;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milktop/react-ui",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "description": "React components on Ark UI (Zag state machines), with imba-ui's API and design",
   "license": "MIT",
   "author": "André Goldstein",