@sarunyu/system-one 4.0.4 → 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

@@ -439,6 +439,117 @@ Data tables. Compose with TableRow + TableHeaderCell + TableCell.
 
 Align numeric columns `right`, status center. Don't stuff StatusTag inside the Table header.
 
+**TableCell content** — pass content as children (`<TableCell>{u.name}</TableCell>`).
+Do NOT pass a `label` prop for dynamic data — if children are omitted, the cell
+shows the placeholder `"Text label"`.
+
+**Sorting is not automatic.** `TableHeaderCell` is a UI primitive — it only
+toggles its own arrow icon. The parent must own sort state AND sort the data.
+
+```tsx
+import { useMemo, useState } from "react";
+import { Table, TableRow, TableHeaderCell, TableCell } from "@sarunyu/system-one";
+
+type SortDir = "none" | "asc" | "desc";
+
+export function UsersTable({ users }: { users: User[] }) {
+  const [sortKey, setSortKey] = useState<keyof User | null>(null);
+  const [sortDir, setSortDir] = useState<SortDir>("none");
+
+  const sorted = useMemo(() => {
+    if (!sortKey || sortDir === "none") return users;
+    const copy = [...users];
+    copy.sort((a, b) => {
+      const av = a[sortKey]; const bv = b[sortKey];
+      if (av < bv) return sortDir === "asc" ? -1 : 1;
+      if (av > bv) return sortDir === "asc" ?  1 : -1;
+      return 0;
+    });
+    return copy;
+  }, [users, sortKey, sortDir]);
+
+  const dirFor = (k: keyof User): SortDir => (sortKey === k ? sortDir : "none");
+  const handleSort = (k: keyof User) => (next: SortDir) => {
+    setSortKey(next === "none" ? null : k);
+    setSortDir(next);
+  };
+
+  return (
+    <Table>
+      <TableRow header>
+        <TableHeaderCell sortDirection={dirFor("name")} onSortChange={handleSort("name")}>Name</TableHeaderCell>
+        <TableHeaderCell sortDirection={dirFor("role")} onSortChange={handleSort("role")}>Role</TableHeaderCell>
+        <TableHeaderCell sortable={false}>Status</TableHeaderCell>
+      </TableRow>
+      {sorted.map(u => (
+        <TableRow key={u.id}>
+          <TableCell>{u.name}</TableCell>
+          <TableCell>{u.role}</TableCell>
+          <TableCell><StatusTag type={u.status} /></TableCell>
+        </TableRow>
+      ))}
+    </Table>
+  );
+}
+```
+
+Key rules for sort:
+- Parent owns `sortKey` + `sortDir` state.
+- Parent derives `sorted` data via `useMemo` — the Table never mutates data.
+- Pass `sortDirection` (controlled) + `onSortChange` to every sortable header.
+- 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?`, `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>`.
+
 ---
 
 ### DateInput / TimeInput
@@ -657,11 +768,42 @@ export function SettingsPage() {
 ### Data table page
 
 ```tsx
+import { useMemo, useState } from "react";
 import {
   SearchInput, Button, Table, TableRow, TableHeaderCell, TableCell, StatusTag,
 } from "@sarunyu/system-one";
 
+type SortDir = "none" | "asc" | "desc";
+type OrderKey = "id" | "customer" | "amount";
+
 export function OrdersPage() {
+  const [q, setQ]             = useState("");
+  const [sortKey, setSortKey] = useState<OrderKey | null>(null);
+  const [sortDir, setSortDir] = useState<SortDir>("none");
+
+  const filtered = useMemo(
+    () => orders.filter(o => o.customer.toLowerCase().includes(q.toLowerCase())),
+    [q],
+  );
+
+  const sorted = useMemo(() => {
+    if (!sortKey || sortDir === "none") return filtered;
+    const copy = [...filtered];
+    copy.sort((a, b) => {
+      const av = a[sortKey]; const bv = b[sortKey];
+      if (av < bv) return sortDir === "asc" ? -1 : 1;
+      if (av > bv) return sortDir === "asc" ?  1 : -1;
+      return 0;
+    });
+    return copy;
+  }, [filtered, sortKey, sortDir]);
+
+  const dirFor = (k: OrderKey): SortDir => (sortKey === k ? sortDir : "none");
+  const handleSort = (k: OrderKey) => (next: SortDir) => {
+    setSortKey(next === "none" ? null : k);
+    setSortDir(next);
+  };
+
   return (
     <main className="mx-auto w-full max-w-[1200px] px-6 py-10 flex flex-col gap-6">
       <header className="flex items-center justify-between">
@@ -673,12 +815,12 @@ export function OrdersPage() {
       </div>
       <Table>
         <TableRow header>
-          <TableHeaderCell>Order</TableHeaderCell>
-          <TableHeaderCell>Customer</TableHeaderCell>
-          <TableHeaderCell>Amount</TableHeaderCell>
-          <TableHeaderCell>Status</TableHeaderCell>
+          <TableHeaderCell sortDirection={dirFor("id")}       onSortChange={handleSort("id")}>Order</TableHeaderCell>
+          <TableHeaderCell sortDirection={dirFor("customer")} onSortChange={handleSort("customer")}>Customer</TableHeaderCell>
+          <TableHeaderCell sortDirection={dirFor("amount")}   onSortChange={handleSort("amount")}>Amount</TableHeaderCell>
+          <TableHeaderCell sortable={false}>Status</TableHeaderCell>
         </TableRow>
-        {orders.map(o => (
+        {sorted.map(o => (
           <TableRow key={o.id}>
             <TableCell>#{o.id}</TableCell>
             <TableCell>{o.customer}</TableCell>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarunyu/system-one",
-  "version": "4.0.4",
+  "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": [