@cl-light-ds/ui 0.2.0 → 0.3.0

package/src/components/table/TableBulkToolbar.astro

@@ -0,0 +1,37 @@
+---
+import { X } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+import { Badge } from "../badge";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  data-slot="table-bulk-toolbar"
+  role="toolbar"
+  aria-label="Bulk actions"
+  class={cn(
+    "flex min-h-14 items-center justify-between gap-3 rounded-lg border border-primary/15 bg-table-row-selected px-4 py-2",
+    className,
+  )}
+  {...rest}
+>
+  <Badge
+    as="button"
+    type="button"
+    data-table-action="clear-selection"
+    aria-label="Clear selection"
+    class="cursor-pointer"
+  >
+    <span><span data-slot="table-selection-count">0</span> selected</span>
+    <X slot="tail-icon" aria-hidden="true" />
+  </Badge>
+  <div class="flex items-center gap-3">
+    <slot />
+  </div>
+</div>

package/src/components/table/TableCaption.astro

@@ -1,17 +1,17 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"caption"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<caption data-slot="table-caption" class={cn("text-muted-foreground mt-4 text-sm", className)} {...rest}>
-  <slot />
-</caption>
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"caption"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<caption data-slot="table-caption" class={cn("text-muted-foreground mt-4 text-sm", className)} {...rest}>
+  <slot />
+</caption>

package/src/components/table/TableCell.astro

@@ -1,21 +1,45 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"td"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<td
-  data-slot="table-cell"
-  class={cn("p-2 align-middle whitespace-nowrap font-medium [&:has([role=checkbox])]:pr-0", className)}
-  {...rest}
->
-  <slot />
-</td>
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+import { cellAlign, cellBase, levelIndentStyle, type CellAlign } from "./table-cell-variants";
+
+interface Props extends HTMLAttributes<"td"> {
+  class?: string;
+  /** Column key, matched against `TableHead` `column` for hide/pin/resize. */
+  column?: string;
+  align?: CellAlign;
+  /** Number content: right-aligned, semibold, tabular figures. */
+  numeric?: boolean;
+  /** Nesting level (1–3). Indents the cell content 20px per level. */
+  level?: 1 | 2 | 3;
+}
+
+const {
+  class: className = "",
+  column,
+  numeric = false,
+  align = numeric ? "right" : "left",
+  level,
+  style,
+  ...rest
+} = Astro.props as Props;
+
+const indent = levelIndentStyle(level);
+---
+
+<td
+  data-slot="table-cell"
+  data-column={column}
+  style={indent ? [indent, typeof style === "string" ? style : ""].filter(Boolean).join("; ") : style}
+  class={cn(
+    cellBase,
+    cellAlign({ align }),
+    "h-12 py-2 font-medium",
+    numeric && "font-semibold tabular-nums",
+    "[&:has([type=checkbox])]:w-15 [&:has([type=checkbox])]:text-center",
+    className,
+  )}
+  {...rest}
+>
+  <slot />
+</td>

package/src/components/table/TableCellText.astro

@@ -0,0 +1,17 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  /** Secondary line under the label (Figma "2-Line Text"). */
+  subtitle?: string;
+}
+
+const { class: className = "", subtitle, ...rest } = Astro.props as Props;
+---
+
+<div data-slot="table-cell-text" class={cn("flex min-w-0 flex-col gap-0.5", className)} {...rest}>
+  <span class="truncate text-sm leading-5 font-medium text-foreground"><slot /></span>
+  {subtitle && <span class="truncate text-xs leading-4 font-normal text-muted-foreground">{subtitle}</span>}
+</div>

package/src/components/table/TableColumnMenu.astro

@@ -0,0 +1,50 @@
+---
+import { Columns3 } from "@lucide/astro";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "../dropdown-menu";
+
+interface ColumnOption {
+  column: string;
+  label: string;
+  /** Initially hidden. */
+  hidden?: boolean;
+  /** Always visible (e.g. the name column). */
+  disabled?: boolean;
+}
+
+interface Props {
+  columns: ColumnOption[];
+  label?: string;
+  class?: string;
+}
+
+const { columns, label = "Columns", class: className = "" } = Astro.props as Props;
+---
+
+<DropdownMenu
+  data-table-column-menu
+  data-columns={JSON.stringify(columns.map((c) => c.column))}
+  closeOnSelect={false}
+  defaultValues={columns.filter((c) => !c.hidden).map((c) => c.column)}
+  class={className}
+>
+  <DropdownMenuTrigger variant="outline" size="sm">
+    <Columns3 aria-hidden="true" />
+    {label}
+  </DropdownMenuTrigger>
+  <DropdownMenuContent align="end" class="w-auto min-w-44">
+    <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+    {
+      columns.map((c) => (
+        <DropdownMenuCheckboxItem value={c.column} defaultChecked={!c.hidden} disabled={c.disabled}>
+          {c.label}
+        </DropdownMenuCheckboxItem>
+      ))
+    }
+  </DropdownMenuContent>
+</DropdownMenu>

package/src/components/table/TableEditableCell.astro

@@ -0,0 +1,287 @@
+---
+import { Check, ChevronDown, Pencil, X } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+import { Badge } from "../badge";
+import { Button } from "../button";
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "../combobox";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "../dropdown-menu";
+import { Input } from "../input";
+import { Spinner } from "../spinner";
+import { cellAlign, cellBase, levelIndentStyle, type CellAlign } from "./table-cell-variants";
+
+type BadgeVariant =
+  | "default"
+  | "secondary"
+  | "destructive"
+  | "outline"
+  | "success"
+  | "warning"
+  | "accent"
+  | "ghost";
+
+export interface TableCellOption {
+  value: string;
+  label: string;
+  /** Badge variant used to render this option in select/multiselect cells. */
+  variant?: BadgeVariant;
+}
+
+interface Props extends Omit<HTMLAttributes<"td">, "value"> {
+  class?: string;
+  /** Column key reported in `table:edit`. */
+  column: string;
+  /** Current value. Use a string array for `multiselect`. */
+  value?: string | string[];
+  /**
+   * - `text`: click to edit, confirm with ✓ / Enter, cancel with ✕ / Esc.
+   * - `select`: badge dropdown, commits on pick.
+   * - `combobox`: searchable single select, commits on pick.
+   * - `multiselect`: badge tags with checkboxes, commits when the menu closes.
+   */
+  editor?: "text" | "select" | "combobox" | "multiselect";
+  options?: TableCellOption[];
+  /** Accessible column name, e.g. "Status". Defaults to `column`. */
+  label?: string;
+  /** Secondary line under a text value (not editable). */
+  subtitle?: string;
+  placeholder?: string;
+  /** Renders the value without edit affordances. */
+  readOnly?: boolean;
+  align?: CellAlign;
+  numeric?: boolean;
+  level?: 1 | 2 | 3;
+  /** Badges shown before collapsing the rest into "+N" (multiselect). */
+  maxVisible?: number;
+  /** Native validation for the text editor. */
+  required?: boolean;
+  pattern?: string;
+  minLength?: number;
+  maxLength?: number;
+  inputType?: "text" | "number" | "email" | "url";
+}
+
+const {
+  class: className = "",
+  column,
+  value = "",
+  editor = "text",
+  options = [],
+  label = column,
+  subtitle,
+  placeholder = "Empty",
+  readOnly = false,
+  numeric = false,
+  align = numeric ? "right" : "left",
+  level,
+  maxVisible = 2,
+  required = false,
+  pattern,
+  minLength,
+  maxLength,
+  inputType = "text",
+  ...rest
+} = Astro.props as Props;
+
+const values = Array.isArray(value) ? value : value ? [value] : [];
+const optionFor = (v: string): TableCellOption =>
+  options.find((o) => o.value === v) ?? { value: v, label: v };
+const selected = values.map(optionFor);
+const visible = selected.slice(0, maxVisible);
+const overflow = selected.length - visible.length;
+const textValue = editor === "text" ? String(values[0] ?? "") : selected.map((o) => o.label).join(", ");
+const usesBadges = editor === "select" || editor === "multiselect";
+const dataValue = editor === "multiselect" ? JSON.stringify(values) : String(values[0] ?? "");
+
+const affordance =
+  "group/editable -mx-2 flex min-h-8 max-w-full items-center gap-1.5 rounded-md px-2 text-left outline-none transition-[background-color,box-shadow] hover:bg-background hover:ring-1 hover:ring-border focus-visible:ring-2 focus-visible:ring-ring";
+const affordanceIcon =
+  "size-3.5 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/editable:opacity-100 group-focus-visible/editable:opacity-100 group-focus/cell:opacity-100";
+---
+
+<td
+  data-slot="table-cell"
+  data-column={column}
+  data-editable={readOnly ? undefined : ""}
+  data-readonly={readOnly ? "" : undefined}
+  data-editor={editor}
+  data-value={dataValue}
+  data-label={label}
+  data-max-visible={maxVisible}
+  data-placeholder={placeholder}
+  data-state="idle"
+  style={levelIndentStyle(level)}
+  class={cn(
+    cellBase,
+    cellAlign({ align }),
+    "group/cell h-12 py-2 font-medium",
+    numeric && "font-semibold tabular-nums",
+    className,
+  )}
+  {...rest}
+>
+  {
+    readOnly ? (
+      usesBadges ? (
+        <span class="inline-flex items-center gap-1">
+          {visible.map((o) => <Badge size="sm" variant={o.variant ?? "secondary"}>{o.label}</Badge>)}
+          {overflow > 0 && <Badge size="sm" variant="outline">+{overflow}</Badge>}
+        </span>
+      ) : (
+        <span class="block truncate">{textValue}</span>
+      )
+    ) : editor === "text" ? (
+      <>
+        <div
+          data-slot="table-cell-display"
+          role="button"
+          tabindex="-1"
+          aria-label={`Edit ${label}`}
+          class={cn(affordance, "cursor-text group-data-[state=editing]/cell:hidden group-data-[state=saving]/cell:hidden group-data-[state=error]/cell:hidden", align === "right" && "justify-end")}
+        >
+          <div class="min-w-0 flex-1">
+            <span data-slot="table-cell-value" class={cn("block truncate", !textValue && "text-muted-foreground font-normal")}>
+              {textValue || placeholder}
+            </span>
+            {subtitle && <span class="block truncate text-xs leading-4 font-normal text-muted-foreground">{subtitle}</span>}
+          </div>
+          <Pencil class={affordanceIcon} aria-hidden="true" />
+        </div>
+        <div
+          data-slot="table-cell-editor"
+          class="-mx-2 hidden items-center gap-1 group-data-[state=editing]/cell:flex group-data-[state=saving]/cell:flex group-data-[state=error]/cell:flex"
+        >
+          <Input
+            data-table-input
+            size="sm"
+            type={inputType}
+            value={textValue}
+            aria-label={label}
+            required={required}
+            pattern={pattern}
+            minlength={minLength}
+            maxlength={maxLength}
+            class={cn("min-w-24 flex-1", align === "right" && "text-right")}
+          />
+          <Button data-table-action="confirm" variant="ghost" size="icon-sm" aria-label="Save" class="text-primary">
+            <Check class="group-data-[state=saving]/cell:hidden" aria-hidden="true" />
+            <Spinner class="hidden group-data-[state=saving]/cell:block" aria-label="Saving" />
+          </Button>
+          <Button data-table-action="cancel" variant="ghost" size="icon-sm" aria-label="Cancel">
+            <X aria-hidden="true" />
+          </Button>
+        </div>
+      </>
+    ) : editor === "combobox" ? (
+      <>
+        <button
+          type="button"
+          data-slot="table-cell-display"
+          tabindex="-1"
+          aria-label={`Edit ${label}`}
+          class={cn(affordance, "cursor-pointer group-data-[state=editing]/cell:hidden")}
+        >
+          <span data-slot="table-cell-value" class={cn("truncate", !textValue && "text-muted-foreground font-normal")}>
+            {textValue || placeholder}
+          </span>
+          <ChevronDown class={affordanceIcon} aria-hidden="true" />
+        </button>
+        <div data-slot="table-cell-editor" class="-mx-2 hidden group-data-[state=editing]/cell:block">
+          <Combobox data-table-combobox defaultValue={values[0]} autoHighlight>
+            <ComboboxInput size="sm" placeholder={`Search ${label.toLowerCase()}…`} aria-label={label} class="w-full min-w-40" />
+            <ComboboxContent align="start">
+              <ComboboxList>
+                {options.map((o) => (
+                  <ComboboxItem value={o.value} label={o.label}>{o.label}</ComboboxItem>
+                ))}
+              </ComboboxList>
+              <ComboboxEmpty>No results</ComboboxEmpty>
+            </ComboboxContent>
+          </Combobox>
+        </div>
+      </>
+    ) : (
+      <DropdownMenu
+        data-table-menu
+        defaultValue={editor === "select" ? values[0] ?? null : undefined}
+        defaultValues={editor === "multiselect" ? values : undefined}
+        closeOnSelect={editor === "select"}
+        class="-mx-2 max-w-[calc(100%+1rem)]"
+      >
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            data-slot="table-cell-display"
+            tabindex="-1"
+            aria-label={`Edit ${label}`}
+            class={cn(affordance, "mx-0 cursor-pointer group-data-[state=saving]/cell:opacity-60")}
+          >
+            <span data-slot="table-cell-value" class="inline-flex min-w-0 items-center gap-1">
+              {visible.map((o) => <Badge size="sm" variant={o.variant ?? "secondary"}>{o.label}</Badge>)}
+              {overflow > 0 && <Badge size="sm" variant="outline">+{overflow}</Badge>}
+              {selected.length === 0 && <span class="text-muted-foreground font-normal">{placeholder}</span>}
+            </span>
+            <ChevronDown class={affordanceIcon} aria-hidden="true" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent class="w-auto min-w-44">
+          {
+            editor === "select" ? (
+              <DropdownMenuRadioGroup>
+                {options.map((o) => (
+                  <DropdownMenuRadioItem value={o.value}>
+                    <Badge size="sm" variant={o.variant ?? "secondary"}>{o.label}</Badge>
+                  </DropdownMenuRadioItem>
+                ))}
+              </DropdownMenuRadioGroup>
+            ) : (
+              options.map((o) => (
+                <DropdownMenuCheckboxItem value={o.value} defaultChecked={values.includes(o.value)}>
+                  <Badge size="sm" variant={o.variant ?? "secondary"}>{o.label}</Badge>
+                </DropdownMenuCheckboxItem>
+              ))
+            )
+          }
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+  }
+  {
+    !readOnly && editor !== "text" && (
+      <template data-slot="table-cell-templates">
+        {options.map((o) =>
+          usesBadges ? (
+            <Badge data-option={o.value} size="sm" variant={o.variant ?? "secondary"}>{o.label}</Badge>
+          ) : (
+            <span data-option={o.value}>{o.label}</span>
+          ),
+        )}
+        {usesBadges && <Badge data-option-overflow size="sm" variant="outline">+0</Badge>}
+      </template>
+    )
+  }
+  {
+    !readOnly && (
+      <div
+        data-slot="table-cell-error"
+        role="alert"
+        hidden
+        class="fixed z-50 max-w-64 rounded-md bg-destructive px-2 py-1 text-xs font-medium whitespace-normal text-destructive-foreground shadow-md"
+      />
+    )
+  }
+</td>

package/src/components/table/TableEmpty.astro

@@ -0,0 +1,17 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props {
+  /** Number of columns to span. */
+  colspan: number;
+  class?: string;
+}
+
+const { colspan, class: className = "" } = Astro.props as Props;
+---
+
+<tr data-slot="table-empty" class="bg-background">
+  <td colspan={colspan} class={cn("h-40 border-b border-border px-6 text-center text-sm text-muted-foreground", className)}>
+    <slot>No results.</slot>
+  </td>
+</tr>

package/src/components/table/TableFolderCell.astro

@@ -0,0 +1,38 @@
+---
+import { ChevronRight, Folder, FolderOpen } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+import { cellBase, levelIndentStyle } from "./table-cell-variants";
+
+interface Props extends HTMLAttributes<"td"> {
+  class?: string;
+  column?: string;
+  /** Nesting level (1–3). Match the parent `TableRow` `level`. */
+  level?: 1 | 2 | 3;
+}
+
+const { class: className = "", column, level, ...rest } = Astro.props as Props;
+---
+
+<td
+  data-slot="table-cell"
+  data-column={column}
+  data-folder-cell
+  style={levelIndentStyle(level)}
+  class={cn(cellBase, "h-12 py-2 font-medium", className)}
+  {...rest}
+>
+  <div class="flex items-center gap-1.5">
+    <button
+      type="button"
+      data-slot="table-row-toggle"
+      aria-label="Expand row"
+      class="-ml-1 inline-flex size-6 shrink-0 items-center justify-center rounded-md outline-none hover:bg-background-hover focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      <ChevronRight class="size-4 transition-transform group-data-[expanded]/row:rotate-90" aria-hidden="true" />
+    </button>
+    <Folder class="size-4 shrink-0 group-data-[expanded]/row:hidden" aria-hidden="true" />
+    <FolderOpen class="hidden size-4 shrink-0 group-data-[expanded]/row:block" aria-hidden="true" />
+    <span class="truncate"><slot /></span>
+  </div>
+</td>

package/src/components/table/TableFooter.astro

@@ -1,21 +1,21 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"tfoot"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<tfoot
-  data-slot="table-footer"
-  class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
-  {...rest}
->
-  <slot />
-</tfoot>
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"tfoot"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<tfoot
+  data-slot="table-footer"
+  class={cn("font-medium [&_tr]:bg-muted [&_tr]:hover:bg-muted [&_td]:font-semibold", className)}
+  {...rest}
+>
+  <slot />
+</tfoot>