@cl-light-ds/ui 0.2.0 → 0.4.0

package/src/components/table/TableHead.astro

@@ -1,21 +1,90 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"th"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<th
-  data-slot="table-head"
-  class={cn("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
-  {...rest}
->
-  <slot />
-</th>
+---
+import { ArrowDown, ArrowUp, ArrowUpDown } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+import { cellAlign, cellBase, type CellAlign } from "./table-cell-variants";
+
+type SortDirection = "asc" | "desc" | "none";
+
+interface Props extends HTMLAttributes<"th"> {
+  class?: string;
+  /** Column key. Used by sorting, resize/hide and pinned columns, and matched against `TableCell` `column`. */
+  column?: string;
+  /** Renders the header label as a sort button (cycles asc → desc → none). */
+  sortable?: boolean;
+  /** Initial sort direction for this column. */
+  sort?: SortDirection;
+  align?: CellAlign;
+  /** Shows a drag handle to resize the column. */
+  resizable?: boolean;
+  /** Initial column width, e.g. "240px". */
+  width?: string;
+}
+
+const {
+  class: className = "",
+  column,
+  sortable = false,
+  sort = "none",
+  align = "left",
+  resizable = false,
+  width,
+  ...rest
+} = Astro.props as Props;
+
+const ariaSort =
+  sortable ? (sort === "asc" ? "ascending" : sort === "desc" ? "descending" : "none") : undefined;
+---
+
+<th
+  data-slot="table-head"
+  data-column={column}
+  data-sortable={sortable ? "" : undefined}
+  data-sort={sortable ? sort : undefined}
+  data-align={align}
+  aria-sort={ariaSort}
+  scope="col"
+  style={width ? `width: ${width}; min-width: ${width}` : undefined}
+  class={cn(
+    cellBase,
+    cellAlign({ align }),
+    "group/th h-11 bg-muted text-xs font-semibold text-foreground uppercase",
+    "group-data-[sticky-header]/table:sticky group-data-[sticky-header]/table:top-0 group-data-[sticky-header]/table:z-10 data-[pinned]:z-20 data-[pinned]:bg-muted",
+    "[&:has([type=checkbox])]:w-15 [&:has([type=checkbox])]:text-center",
+    className,
+  )}
+  {...rest}
+>
+  {
+    sortable ? (
+      <button
+        type="button"
+        data-slot="table-sort-button"
+        class={cn(
+          "-mx-1.5 inline-flex w-[calc(100%+0.75rem)] items-center justify-between gap-2 rounded-md px-1.5 py-1 uppercase",
+          "cursor-pointer outline-none hover:bg-background-hover focus-visible:ring-2 focus-visible:ring-ring",
+          "disabled:cursor-default disabled:hover:bg-transparent",
+          align === "right" && "flex-row-reverse",
+        )}
+      >
+        <span class="truncate"><slot /></span>
+        <span class="shrink-0 [&_svg]:size-3.5 [button:disabled_&]:hidden" aria-hidden="true">
+          <ArrowUpDown class="text-muted-foreground group-data-[sort=asc]/th:hidden group-data-[sort=desc]/th:hidden group-has-[button:hover]/th:text-foreground" />
+          <ArrowUp class="hidden text-primary group-data-[sort=asc]/th:block" />
+          <ArrowDown class="hidden text-primary group-data-[sort=desc]/th:block" />
+        </span>
+      </button>
+    ) : (
+      <slot />
+    )
+  }
+  {
+    resizable && (
+      <span
+        data-slot="table-resize-handle"
+        aria-hidden="true"
+        class="absolute top-0 right-0 z-[1] h-full w-1.5 cursor-col-resize touch-none select-none after:absolute after:inset-y-2 after:right-0.5 after:w-px after:bg-border hover:after:w-0.5 hover:after:bg-primary"
+      />
+    )
+  }
+</th>

package/src/components/table/TableHeader.astro

@@ -1,17 +1,17 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"thead"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<thead data-slot="table-header" class={cn("[&_tr]:border-b", className)} {...rest}>
-  <slot />
-</thead>
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"thead"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<thead data-slot="table-header" class={cn("", className)} {...rest}>
+  <slot />
+</thead>

package/src/components/table/TablePagination.astro

@@ -0,0 +1,57 @@
+---
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+import { Button } from "../button";
+import { ButtonGroup } from "../button-group";
+import { NativeSelect, NativeSelectOption } from "../native-select";
+
+interface Props extends HTMLAttributes<"nav"> {
+  class?: string;
+  /** Current page, 1-based. */
+  page?: number;
+  pageSize?: number;
+  totalCount: number;
+  pageSizes?: number[];
+}
+
+const {
+  class: className = "",
+  page = 1,
+  pageSize = 10,
+  totalCount,
+  pageSizes = [10, 25, 50],
+  ...rest
+} = Astro.props as Props;
+
+const pageCount = Math.max(1, Math.ceil(totalCount / pageSize));
+const from = totalCount === 0 ? 0 : (page - 1) * pageSize + 1;
+const to = Math.min(page * pageSize, totalCount);
+---
+
+<nav
+  data-slot="table-pagination"
+  aria-label="Pagination"
+  data-page={page}
+  data-page-size={pageSize}
+  data-total-count={totalCount}
+  class={cn("flex flex-wrap items-center justify-between gap-4 px-6 py-3 text-sm text-muted-foreground", className)}
+  {...rest}
+>
+  <p data-slot="table-pagination-summary">Showing {from}–{to} of {totalCount}</p>
+  <div class="flex flex-wrap items-center gap-4">
+    <label class="flex items-center gap-2">
+      <span>Rows per page</span>
+      <NativeSelect size="sm" data-table-page-size aria-label="Rows per page">
+        {pageSizes.map((s) => <NativeSelectOption value={String(s)} selected={s === pageSize}>{s}</NativeSelectOption>)}
+      </NativeSelect>
+    </label>
+    <span data-slot="table-pagination-status" class="text-foreground">Page {page} of {pageCount}</span>
+    <ButtonGroup>
+      <Button variant="outline" size="icon-sm" data-table-page="first" aria-label="First page" disabled={page <= 1}><ChevronsLeft /></Button>
+      <Button variant="outline" size="icon-sm" data-table-page="prev" aria-label="Previous page" disabled={page <= 1}><ChevronLeft /></Button>
+      <Button variant="outline" size="icon-sm" data-table-page="next" aria-label="Next page" disabled={page >= pageCount}><ChevronRight /></Button>
+      <Button variant="outline" size="icon-sm" data-table-page="last" aria-label="Last page" disabled={page >= pageCount}><ChevronsRight /></Button>
+    </ButtonGroup>
+  </div>
+</nav>

package/src/components/table/TableRow.astro

@@ -1,21 +1,52 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"tr"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<tr
-  data-slot="table-row"
-  class={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)}
-  {...rest}
->
-  <slot />
-</tr>
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"tr"> {
+  class?: string;
+  /** Stable id reported in `table:selection`, `table:edit` and `table:toggle-row` events. */
+  rowId?: string;
+  /** Row id of the parent folder row. Rows under a collapsed parent are hidden. */
+  parentId?: string;
+  /** Nesting level (1–3) for tree tables. */
+  level?: 1 | 2 | 3;
+  /** Marks a folder row that can expand/collapse its children. */
+  folder?: boolean;
+  /** Initial expanded state of a folder row. */
+  expanded?: boolean;
+  /** Initial selected state. Pair with a checked `TableSelectCell`. */
+  selected?: boolean;
+}
+
+const {
+  class: className = "",
+  rowId,
+  parentId,
+  level,
+  folder = false,
+  expanded = false,
+  selected = false,
+  ...rest
+} = Astro.props as Props;
+---
+
+<tr
+  data-slot="table-row"
+  data-row-id={rowId}
+  data-parent-id={parentId}
+  data-level={level}
+  data-folder={folder ? "" : undefined}
+  data-expanded={folder && expanded ? "" : undefined}
+  data-state={selected ? "selected" : undefined}
+  aria-level={level}
+  aria-expanded={folder ? String(expanded) : undefined}
+  aria-selected={selected ? "true" : undefined}
+  class={cn(
+    "group/row bg-background transition-colors",
+    "[tbody_&]:hover:bg-table-row-hover data-[state=selected]:bg-table-row-selected [tbody_&]:data-[state=selected]:hover:bg-table-row-selected",
+    className,
+  )}
+  {...rest}
+>
+  <slot />
+</tr>

package/src/components/table/TableSelectAllBanner.astro

@@ -0,0 +1,34 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  /** Plural noun for the rows, e.g. "invoices". */
+  noun?: string;
+}
+
+const { class: className = "", noun = "results", ...rest } = Astro.props as Props;
+const linkClass =
+  "cursor-pointer rounded-sm font-semibold text-primary outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring";
+---
+
+<div
+  data-slot="table-select-all-banner"
+  hidden
+  class={cn("items-center justify-center gap-2 border-b border-border bg-muted/60 px-4 py-2 text-sm [&:not([hidden])]:flex", className)}
+  {...rest}
+>
+  <span data-banner-page>
+    All <span data-slot="table-page-count">0</span> rows on this page are selected.
+  </span>
+  <button type="button" data-banner-page data-table-action="select-all-results" class={linkClass}>
+    Select all <span data-slot="table-total-count">0</span> {noun}
+  </button>
+  <span data-banner-all hidden>
+    All <span data-slot="table-total-count">0</span> {noun} are selected.
+  </span>
+  <button type="button" data-banner-all hidden data-table-action="clear-selection" class={linkClass}>
+    Clear selection
+  </button>
+</div>

package/src/components/table/TableSelectCell.astro

@@ -0,0 +1,50 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+import { Checkbox } from "../checkbox";
+import { cellBase } from "./table-cell-variants";
+
+interface Props extends HTMLAttributes<"td"> {
+  class?: string;
+  /** Renders the header "select all on this page" checkbox in a `<th>`. */
+  header?: boolean;
+  checked?: boolean;
+  disabled?: boolean;
+  /** Accessible label. Defaults to "Select all rows" / "Select row". */
+  label?: string;
+}
+
+const {
+  class: className = "",
+  header = false,
+  checked = false,
+  disabled = false,
+  label = header ? "Select all rows" : "Select row",
+  ...rest
+} = Astro.props as Props;
+
+const Tag = header ? "th" : "td";
+---
+
+<Tag
+  data-slot={header ? "table-head" : "table-cell"}
+  data-select-cell
+  scope={header ? "col" : undefined}
+  class={cn(
+    cellBase,
+    "w-15 text-center",
+    header
+      ? "h-11 bg-muted group-data-[sticky-header]/table:sticky group-data-[sticky-header]/table:top-0 group-data-[sticky-header]/table:z-10 data-[pinned]:z-20 data-[pinned]:bg-muted"
+      : "h-12 py-2",
+    className,
+  )}
+  {...rest}
+>
+  <Checkbox
+    data-table-select={header ? "all" : "row"}
+    aria-label={label}
+    checked={checked}
+    disabled={disabled}
+    class="align-middle"
+  />
+</Tag>

package/src/components/table/TableSkeletonRow.astro

@@ -0,0 +1,21 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { Skeleton } from "../skeleton";
+import { cellBase } from "./table-cell-variants";
+
+interface Props {
+  /** Number of cells to render. */
+  columns: number;
+  class?: string;
+}
+
+const { columns, class: className = "" } = Astro.props as Props;
+---
+
+<tr data-slot="table-skeleton-row" aria-hidden="true" class={cn("bg-background", className)}>
+  {Array.from({ length: columns }, (_, i) => (
+    <td class={cn(cellBase, "h-12 py-2")}>
+      <Skeleton class={i === 0 ? "mx-auto size-4 rounded-sm" : "h-4 w-full max-w-32"} />
+    </td>
+  ))}
+</tr>

package/src/components/table/index.ts

@@ -1,9 +1,19 @@
-export { default as Table } from "./Table.astro";
-export { default as TableHeader } from "./TableHeader.astro";
-export { default as TableBody } from "./TableBody.astro";
-export { default as TableFooter } from "./TableFooter.astro";
-export { default as TableHead } from "./TableHead.astro";
-export { default as TableRow } from "./TableRow.astro";
-export { default as TableCell } from "./TableCell.astro";
-export { default as TableCaption } from "./TableCaption.astro";
-
+export { default as Table } from "./Table.astro";
+export { default as TableHeader } from "./TableHeader.astro";
+export { default as TableBody } from "./TableBody.astro";
+export { default as TableFooter } from "./TableFooter.astro";
+export { default as TableHead } from "./TableHead.astro";
+export { default as TableRow } from "./TableRow.astro";
+export { default as TableCell } from "./TableCell.astro";
+export { default as TableCaption } from "./TableCaption.astro";
+export { default as TableCellText } from "./TableCellText.astro";
+export { default as TableEditableCell } from "./TableEditableCell.astro";
+export { default as TableFolderCell } from "./TableFolderCell.astro";
+export { default as TableSelectCell } from "./TableSelectCell.astro";
+export { default as TableBulkToolbar } from "./TableBulkToolbar.astro";
+export { default as TableSelectAllBanner } from "./TableSelectAllBanner.astro";
+export { default as TablePagination } from "./TablePagination.astro";
+export { default as TableColumnMenu } from "./TableColumnMenu.astro";
+export { default as TableSkeletonRow } from "./TableSkeletonRow.astro";
+export { default as TableEmpty } from "./TableEmpty.astro";
+export type { TableCellOption } from "./TableEditableCell.astro";

package/src/components/table/table-cell-variants.ts

@@ -0,0 +1,29 @@
+import { cva } from "class-variance-authority";
+
+/** Shared padding, borders and pinning for header and data cells. */
+export const cellBase = [
+  "relative border-b border-border px-4 align-middle whitespace-nowrap first:pl-6 last:pr-6",
+  "outline-none focus-visible:z-[2] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+  "data-[pinned]:sticky data-[pinned]:z-[1] data-[pinned]:bg-inherit data-[pinned-last]:shadow-[inset_-1px_0_0_var(--border)]",
+];
+
+export const cellAlign = cva("", {
+  variants: {
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+    },
+  },
+  defaultVariants: {
+    align: "left",
+  },
+});
+
+export type CellAlign = "left" | "center" | "right";
+
+/** Indent for nested rows: 20px per level, matching the Figma folder tree. */
+export function levelIndentStyle(level: number | undefined): string | undefined {
+  if (!level || level <= 1) return undefined;
+  return `padding-inline-start: calc(1rem + ${(level - 1) * 1.25}rem)`;
+}

package/src/components/tabs/CHANGELOG.md

@@ -1,5 +1,5 @@
-# Changelog
-
-All notable changes to the `Tabs` component will be documented in this file.
-
-## Unreleased
+# Changelog
+
+All notable changes to the `Tabs` component will be documented in this file.
+
+## Unreleased