@sarunyu/system-one 4.1.0 → 4.1.1

package/dist/src/components/table.d.ts

@@ -41,6 +41,8 @@ export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
 export declare const Table: import('react').ForwardRefExoticComponent<TableProps & import('react').RefAttributes<HTMLTableElement>>;
 export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
     selected?: boolean;
+    /** Fires when a `<TableCell type="checkbox" />` inside this row is toggled. Set this together with `selected` to make rows selectable — the cell's checkbox is wired automatically. */
+    onSelectedChange?: (next: boolean) => void;
     /** Enables built-in hover state propagation to cells in this row. */
     hoverable?: boolean;
 }

package/dist/src/components/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/table.tsx"],"names":[],"mappings":"AAGA,OAAO,EAQL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACd,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAY,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAO,KAAK,UAAU,EAAE,MAAM,OAAO,CAAC;AAG7C,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;AAChE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,YAAY,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAC5G,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,MAAM,GAAG,kBAAkB,CAAC;AAEzE,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE,sFAAsF;IACtF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IAClF,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,KAAK,IAAI,CAAC;IACvD,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAChC;AAED,MAAM,WAAW,cAAe,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IAC5E,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAChC;AAsED,eAAO,MAAM,KAAK,yGA0DhB,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,mBAAmB,CAAC;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,+GAkCpB,CAAC;AAEF,eAAO,MAAM,eAAe,uHAwH3B,CAAC;AAEF,eAAO,MAAM,SAAS,iHA0JpB,CAAC"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/table.tsx"],"names":[],"mappings":"AAGA,OAAO,EAQL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACd,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAY,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAO,KAAK,UAAU,EAAE,MAAM,OAAO,CAAC;AAG7C,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;AAChE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,YAAY,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAC5G,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,MAAM,GAAG,kBAAkB,CAAC;AAEzE,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE,sFAAsF;IACtF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IAClF,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,KAAK,IAAI,CAAC;IACvD,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAChC;AAED,MAAM,WAAW,cAAe,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IAC5E,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAChC;AAuED,eAAO,MAAM,KAAK,yGA0DhB,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,mBAAmB,CAAC;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uLAAuL;IACvL,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,+GA0CpB,CAAC;AAEF,eAAO,MAAM,eAAe,uHAwH3B,CAAC;AAEF,eAAO,MAAM,SAAS,iHA8JpB,CAAC"}

package/llms.txt

@@ -500,11 +500,55 @@ Key rules for sort:
 - Only one column sorts at a time — when a column's `sortKey` changes, previous columns naturally read `"none"` via the `dirFor` helper.
 - Columns that shouldn't sort (status, actions) → `sortable={false}`.
 
+**Selectable rows.** To make rows selectable with checkboxes, pair `<TableRow selected onSelectedChange>` with a `<TableCell type="checkbox" />`. The cell renders its own checkbox wired to the row — **do not put a `<Checkbox>` inside the cell yourself.** The row background turns brand-tinted automatically when `selected` is true.
+
+```tsx
+import { useMemo, useState } from "react";
+import { Table, TableRow, TableHeaderCell, TableCell } from "@sarunyu/system-one";
+
+export function SelectableTable({ rows }: { rows: Row[] }) {
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+
+  const toggle = (id: string) => (next: boolean) =>
+    setSelected(prev => {
+      const copy = new Set(prev);
+      next ? copy.add(id) : copy.delete(id);
+      return copy;
+    });
+
+  const headerState =
+    selected.size === 0 ? false : selected.size === rows.length ? true : "indeterminate";
+  const toggleAll = (next: boolean) =>
+    setSelected(next ? new Set(rows.map(r => r.id)) : new Set());
+
+  return (
+    <Table>
+      <TableRow header>
+        <TableHeaderCell type="check" checkState={headerState} onCheckChange={toggleAll} />
+        <TableHeaderCell>Symbol</TableHeaderCell>
+        <TableHeaderCell>Name</TableHeaderCell>
+      </TableRow>
+      {rows.map(r => (
+        <TableRow
+          key={r.id}
+          selected={selected.has(r.id)}
+          onSelectedChange={toggle(r.id)}
+        >
+          <TableCell type="checkbox" />
+          <TableCell>{r.symbol}</TableCell>
+          <TableCell>{r.name}</TableCell>
+        </TableRow>
+      ))}
+    </Table>
+  );
+}
+```
+
 Props:
 - `Table` — `className`, native `<table>` props.
-- `TableRow` — `header?`, `selected?`, `hoverable?` (default `true`), `onClick`, `className`.
-- `TableHeaderCell` — `children` (label), `sortable?` (default `true`, set `false` to hide the arrow), `sortDirection?: "none" | "asc" | "desc"`, `onSortChange?(next)`, `contentAlign?: "start" | "center" | "end"`, `className`.
-- `TableCell` — `children` (content), `contentAlign?`, `fixed?`, `className`.
+- `TableRow` — `header?`, `selected?`, `onSelectedChange?(next: boolean)` (fires when a `type="checkbox"` cell in this row is toggled), `hoverable?` (default `true`), `onClick`, `className`.
+- `TableHeaderCell` — `children` (label), `type?: "text" | "icon" | "check"` (use `"check"` for select-all column), `checkState?: boolean | "indeterminate"`, `onCheckChange?(next)`, `sortable?` (default `true`, set `false` to hide the arrow), `sortDirection?: "none" | "asc" | "desc"`, `onSortChange?(next)`, `contentAlign?: "start" | "center" | "end"`, `className`.
+- `TableCell` — `children` (content), `type?: "default" | "text-icon" | "text-image" | "tag" | "icon" | "button" | "checkbox"`, `contentAlign?`, `fixed?`, `className`. For `type="checkbox"` the cell renders its own checkbox — bind selection via the parent `TableRow`, not by nesting a `<Checkbox>`.
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarunyu/system-one",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "type": "module",
   "description": "A production-ready React design system built for AI-powered web generation tools (Figma Make, Lovable, V0). Tailwind CSS v4 + CSS custom properties for full theming support.",
   "keywords": [