@inshorts/glint-ui 0.3.0

package/src/spreadsheet-grid.tsx

@@ -0,0 +1,264 @@
+"use client";
+
+import * as React from "react";
+
+import { type CellRange, type CellRef } from "./clipboard";
+
+/**
+ * A column knows three things: its heading, the text it contributes to a copy
+ * or CSV export, and optionally how to draw itself.
+ *
+ * Keeping `value` and `render` together is what stops an exported sheet from
+ * drifting from the visible grid.
+ */
+export type GridColumn<Row> = {
+  key: string;
+  title: string;
+  /** Text used for clipboard and CSV. Never JSX. */
+  value: (row: Row) => string;
+  /** Defaults to `value`. Use for links, tiles, truncation. */
+  render?: (row: Row) => React.ReactNode;
+  /** Extra classes for the <td>. */
+  className?: string;
+};
+
+export interface SpreadsheetGridProps<Row> {
+  columns: GridColumn<Row>[];
+  rows: Row[];
+  /** Stable React key per row. Defaults to the row index. */
+  rowKey?: (row: Row, index: number) => string;
+  loading?: boolean;
+  emptyMessage?: string;
+  loadingMessage?: string;
+  ariaLabel?: string;
+  /** Lifted so a toolbar can copy and describe the current selection. */
+  range: CellRange | null;
+  onRangeChange: (selection: {
+    anchor: CellRef | null;
+    focus: CellRef | null;
+  }) => void;
+  onCopy: () => void;
+}
+
+function isInRange(range: CellRange | null, r: number, c: number): boolean {
+  if (!range) return false;
+  return r >= range.r1 && r <= range.r2 && c >= range.c1 && c <= range.c2;
+}
+
+/**
+ * Spreadsheet-like grid: click-drag a range, shift+click to extend, arrows to
+ * move, click a heading to take the column, click the row number to take the
+ * row, Cmd/Ctrl+A for everything, Escape to clear, Cmd/Ctrl+C to copy.
+ *
+ * Ported from video-shorts-panel's ExcelTable, which several panels share for
+ * exactly this reason — a table people paste into a sheet.
+ */
+export function SpreadsheetGrid<Row>({
+  columns,
+  rows,
+  rowKey,
+  loading,
+  emptyMessage = "Nothing to show.",
+  loadingMessage = "Loading…",
+  ariaLabel = "Data grid",
+  range,
+  onRangeChange,
+  onCopy,
+}: SpreadsheetGridProps<Row>) {
+  const gridRef = React.useRef<HTMLDivElement>(null);
+  const anchorRef = React.useRef<CellRef | null>(null);
+  const focusRef = React.useRef<CellRef | null>(null);
+  const [dragging, setDragging] = React.useState(false);
+
+  const setSelection = React.useCallback(
+    (anchor: CellRef | null, focus: CellRef | null) => {
+      anchorRef.current = anchor;
+      focusRef.current = focus;
+      onRangeChange({ anchor, focus });
+    },
+    [onRangeChange],
+  );
+
+  const selectCell = React.useCallback(
+    (r: number, c: number, extend?: boolean) => {
+      if (extend && anchorRef.current)
+        setSelection(anchorRef.current, { r, c });
+      else setSelection({ r, c }, { r, c });
+    },
+    [setSelection],
+  );
+
+  const selectColumn = React.useCallback(
+    (c: number, extend?: boolean) => {
+      const lastRow = Math.max(rows.length - 1, 0);
+      const anchorCol = extend && anchorRef.current ? anchorRef.current.c : c;
+      setSelection({ r: 0, c: anchorCol }, { r: lastRow, c });
+    },
+    [rows.length, setSelection],
+  );
+
+  const selectRow = React.useCallback(
+    (r: number, extend?: boolean) => {
+      const lastCol = columns.length - 1;
+      const anchorRow = extend && anchorRef.current ? anchorRef.current.r : r;
+      setSelection({ r: anchorRow, c: 0 }, { r, c: lastCol });
+    },
+    [columns.length, setSelection],
+  );
+
+  const selectAll = React.useCallback(() => {
+    if (!rows.length || !columns.length) return;
+    setSelection({ r: 0, c: 0 }, { r: rows.length - 1, c: columns.length - 1 });
+  }, [rows.length, columns.length, setSelection]);
+
+  const scrollCellIntoView = React.useCallback((r: number, c: number) => {
+    const cell = gridRef.current?.querySelector(`[data-cell="${r}-${c}"]`);
+    cell?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, []);
+
+  const moveFocus = React.useCallback(
+    (dr: number, dc: number, extend?: boolean) => {
+      if (!rows.length || !columns.length) return;
+      const base = focusRef.current || { r: 0, c: 0 };
+      const r = Math.min(Math.max(base.r + dr, 0), rows.length - 1);
+      const c = Math.min(Math.max(base.c + dc, 0), columns.length - 1);
+      selectCell(r, c, extend);
+      scrollCellIntoView(r, c);
+    },
+    [rows.length, columns.length, selectCell, scrollCellIntoView],
+  );
+
+  // Dragging must end even if the pointer is released outside the grid.
+  React.useEffect(() => {
+    if (!dragging) return;
+    const stop = () => setDragging(false);
+    window.addEventListener("mouseup", stop);
+    return () => window.removeEventListener("mouseup", stop);
+  }, [dragging]);
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    const meta = event.metaKey || event.ctrlKey;
+    if (meta && event.key.toLowerCase() === "c") {
+      event.preventDefault();
+      onCopy();
+      return;
+    }
+    if (meta && event.key.toLowerCase() === "a") {
+      event.preventDefault();
+      selectAll();
+      return;
+    }
+    switch (event.key) {
+      case "ArrowUp":
+        event.preventDefault();
+        moveFocus(-1, 0, event.shiftKey);
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        moveFocus(1, 0, event.shiftKey);
+        break;
+      case "ArrowLeft":
+        event.preventDefault();
+        moveFocus(0, -1, event.shiftKey);
+        break;
+      case "ArrowRight":
+      case "Tab":
+        event.preventDefault();
+        moveFocus(0, 1, event.shiftKey && event.key !== "Tab");
+        break;
+      case "Escape":
+        setSelection(null, null);
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <div
+      ref={gridRef}
+      tabIndex={0}
+      role="grid"
+      aria-label={ariaLabel}
+      onKeyDown={handleKeyDown}
+      className="border-border bg-background/80 overflow-x-auto rounded-lg border outline-none"
+    >
+      <table className="w-full text-sm whitespace-nowrap select-none">
+        <thead className="text-muted-foreground border-border border-b text-left">
+          <tr>
+            <th
+              scope="col"
+              className="w-10 cursor-pointer px-2 py-2 text-center font-medium"
+              title="Select everything"
+              onMouseDown={() => selectAll()}
+            >
+              #
+            </th>
+            {columns.map((column, c) => (
+              <th
+                key={column.key}
+                scope="col"
+                className="cursor-pointer px-3 py-2 font-medium"
+                title={`Select the ${column.title} column`}
+                onMouseDown={(event) => selectColumn(c, event.shiftKey)}
+              >
+                {column.title}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.length === 0 ? (
+            <tr>
+              <td
+                colSpan={columns.length + 1}
+                className="text-muted-foreground px-3 py-6 text-center"
+              >
+                {loading ? loadingMessage : emptyMessage}
+              </td>
+            </tr>
+          ) : (
+            rows.map((row, r) => (
+              <tr
+                key={rowKey ? rowKey(row, r) : String(r)}
+                className="border-border border-b"
+              >
+                <td
+                  className="text-muted-foreground w-10 cursor-pointer px-2 py-2 text-center text-xs"
+                  title="Select this row"
+                  onMouseDown={(event) => selectRow(r, event.shiftKey)}
+                >
+                  {r + 1}
+                </td>
+                {columns.map((column, c) => (
+                  <td
+                    key={column.key}
+                    data-cell={`${r}-${c}`}
+                    onMouseDown={(event) => {
+                      selectCell(r, c, event.shiftKey);
+                      setDragging(true);
+                      gridRef.current?.focus();
+                    }}
+                    onMouseEnter={() => {
+                      if (dragging) setSelection(anchorRef.current, { r, c });
+                    }}
+                    className={`px-3 py-2 ${column.className || ""} ${
+                      isInRange(range, r, c) ? "bg-primary/15" : ""
+                    }`}
+                    title={
+                      column.className?.includes("truncate")
+                        ? column.value(row)
+                        : undefined
+                    }
+                  >
+                    {column.render ? column.render(row) : column.value(row)}
+                  </td>
+                ))}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/state-panel.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+
+import { Spinner } from "./spinner";
+import { cn } from "./utils";
+
+/**
+ * The bordered block a list shows instead of rows: loading, or nothing found.
+ *
+ * Fourteen copies of the same
+ * `border-border bg-background/80 … rounded-lg border px-4 py-6 text-center`
+ * across the panels, each with its own wording — "Loading users…", "Loading
+ * taxonomy…", "Loading showcases…". The wording is worth keeping (it says what
+ * is loading), the markup is not.
+ *
+ * `loading` adds two things the hand-rolled versions did not have: a spinner,
+ * so a slow panel does not look like an empty one, and `role="status"` with
+ * `aria-live="polite"`, so a screen reader is told the list arrived instead of
+ * silently finding rows on the next tab press.
+ */
+export interface StatePanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Shows a spinner and announces politely. */
+  loading?: boolean;
+}
+
+export function StatePanel({
+  loading,
+  className,
+  children,
+  ...props
+}: StatePanelProps) {
+  return (
+    <div
+      role={loading ? "status" : undefined}
+      aria-live={loading ? "polite" : undefined}
+      className={cn(
+        "border-border bg-background/80 text-muted-foreground rounded-lg border px-4 py-6 text-center text-sm",
+        loading && "flex items-center justify-center gap-2",
+        className,
+      )}
+      {...props}
+    >
+      {loading ? <Spinner size="md" /> : null}
+      {children}
+    </div>
+  );
+}

package/src/switch.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "./utils";
+
+export type SwitchProps = Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "onChange"
+> & {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+};
+
+/** Compact accessible toggle — use instead of full-width checkbox inputs. */
+export const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+  ({ checked, onCheckedChange, className, disabled, id, ...props }, ref) => (
+    <button
+      ref={ref}
+      id={id}
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => onCheckedChange(!checked)}
+      className={cn(
+        "relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border transition-colors",
+        "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        checked ? "border-primary bg-primary" : "border-border bg-muted",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        aria-hidden
+        className={cn(
+          "bg-background pointer-events-none block size-4 rounded-full shadow-sm transition-transform",
+          checked ? "translate-x-4" : "translate-x-0.5",
+        )}
+      />
+    </button>
+  ),
+);
+
+Switch.displayName = "Switch";

package/src/table.tsx

@@ -0,0 +1,110 @@
+import * as React from "react";
+
+import { cn } from "./utils";
+
+/**
+ * Low-level table primitives. Prefer `DataTable` for list panels; use these
+ * when the row markup is custom (nested actions, expandable rows, etc.).
+ */
+export const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+export const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+export const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
+
+export const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+export const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+export const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+export const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+export const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("text-muted-foreground mt-4 text-sm", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";

package/src/tabs.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "./utils";
+
+/**
+ * The tab strip five Managers were each drawing by hand, with the same
+ * `rounded-t-md px-3 py-1.5 text-sm font-medium` and their own idea of what an
+ * active tab looks like.
+ *
+ * It is a controlled component with no state of its own: every caller already
+ * held the active key, usually because a URL or a query depends on it.
+ *
+ * Roles are the reason to use this rather than styling buttons again. A hand
+ * -rolled strip is a row of buttons to a screen reader, which says nothing
+ * about how many tabs there are or which is selected; `tablist` / `tab` /
+ * `aria-selected` do. Arrow-key navigation comes with that expectation, so it
+ * is implemented here too.
+ */
+export interface TabItem<Key extends string = string> {
+  key: Key;
+  label: React.ReactNode;
+  /** Rendered after the label — a count, usually. */
+  badge?: React.ReactNode;
+  disabled?: boolean;
+}
+
+export interface TabsProps<Key extends string = string> {
+  tabs: ReadonlyArray<TabItem<Key>>;
+  value: Key;
+  onChange: (key: Key) => void;
+  /** Names the strip for screen readers. */
+  ariaLabel?: string;
+  className?: string;
+}
+
+export function Tabs<Key extends string = string>({
+  tabs,
+  value,
+  onChange,
+  ariaLabel,
+  className,
+}: TabsProps<Key>) {
+  const refs = React.useRef(new Map<Key, HTMLButtonElement | null>());
+
+  function focusTab(key: Key) {
+    onChange(key);
+    // The newly selected tab has to take focus, or the next arrow press is
+    // still measured from the old one.
+    refs.current.get(key)?.focus();
+  }
+
+  function onKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
+    const step =
+      event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+    if (step === 0) return;
+
+    const selectable = tabs.filter((tab) => !tab.disabled);
+    if (selectable.length < 2) return;
+
+    const current = selectable.findIndex((tab) => tab.key === value);
+    // Wraps, which is what a tablist is expected to do.
+    const next =
+      selectable[(current + step + selectable.length) % selectable.length];
+
+    event.preventDefault();
+    focusTab(next.key);
+  }
+
+  return (
+    <div
+      role="tablist"
+      aria-label={ariaLabel}
+      onKeyDown={onKeyDown}
+      className={cn("border-border flex flex-wrap gap-1 border-b", className)}
+    >
+      {tabs.map((tab) => {
+        const active = tab.key === value;
+        return (
+          <button
+            key={tab.key}
+            ref={(node) => {
+              refs.current.set(tab.key, node);
+            }}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            disabled={tab.disabled}
+            // Only the active tab is reachable by Tab; arrows move within the
+            // strip. Without this a keyboard user pages through every tab to
+            // get past the strip.
+            tabIndex={active ? 0 : -1}
+            onClick={() => onChange(tab.key)}
+            className={cn(
+              "cursor-pointer rounded-t-md px-3 py-1.5 text-sm font-medium transition",
+              "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              // The filled-pill active state the five hand-rolled strips
+              // already used. Adopting it keeps this a deduplication rather
+              // than a restyle of every panel that has tabs.
+              active
+                ? "bg-slate-950 text-white dark:bg-white dark:text-slate-950"
+                : "text-muted-foreground hover:bg-muted",
+            )}
+          >
+            {tab.label}
+            {tab.badge != null ? (
+              <span className="text-muted-foreground ml-1.5 text-xs">
+                {tab.badge}
+              </span>
+            ) : null}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/textarea.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+
+import { cn } from "./utils";
+
+/**
+ * The multi-line counterpart to `Input`.
+ *
+ * There was no shared textarea, so sixteen of them were styled individually
+ * and no two agreed — different borders, different focus rings, some with no
+ * focus ring at all, which is a keyboard user losing their place.
+ *
+ * Deliberately not `inputClass`: that fixes `h-9`, which is a one-line
+ * control. Everything else is shared so a textarea and an input sitting in the
+ * same form look related.
+ */
+export const textareaClass =
+  "border-border bg-background focus-visible:ring-ring w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50";
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, rows = 3, ...props }, ref) => (
+    <textarea
+      ref={ref}
+      rows={rows}
+      className={cn(textareaClass, className)}
+      {...props}
+    />
+  ),
+);
+
+Textarea.displayName = "Textarea";

package/src/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/theme.css

@@ -0,0 +1,2 @@
+/* Re-export shared tokens. Prefer `@import "@inshorts/glint-theme";` in new panels. */
+@import "@inshorts/glint-theme/theme.css";