@inshorts/glint-ui 0.5.4 → 0.6.0

package/src/spreadsheet-grid.tsx

@@ -1,264 +0,0 @@
-"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

@@ -1,46 +0,0 @@
-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

@@ -1,47 +0,0 @@
-"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(
-        // 24×44px track meets DESIGN.md 24px minimum target size.
-        "relative inline-flex h-6 w-11 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-5 rounded-full shadow-sm transition-transform",
-          checked ? "translate-x-5" : "translate-x-0.5",
-        )}
-      />
-    </button>
-  ),
-);
-
-Switch.displayName = "Switch";

package/src/table.tsx

@@ -1,110 +0,0 @@
-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

@@ -1,201 +0,0 @@
-"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.
- *
- * Optional `panel` on a tab (or a sibling `TabPanel`) wires APG `aria-controls`
- * / `role="tabpanel"`. Callers that already render content from `value` can
- * keep doing so and pass `panelId` for association, or switch to `panel`.
- */
-export interface TabItem<Key extends string = string> {
-  key: Key;
-  label: React.ReactNode;
-  /** Rendered after the label — a count, usually. */
-  badge?: React.ReactNode;
-  disabled?: boolean;
-  /**
-   * Optional panel body. When any tab provides `panel`, panels render under
-   * the strip with `role="tabpanel"`.
-   */
-  panel?: React.ReactNode;
-  /**
-   * External panel element id for `aria-controls` when panels live outside
-   * this component.
-   */
-  panelId?: string;
-}
-
-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 interface TabPanelProps {
-  /** Must match the controlling tab's generated or explicit id. */
-  id: string;
-  /** Id of the tab that labels this panel. */
-  labelledBy: string;
-  active: boolean;
-  children: React.ReactNode;
-  className?: string;
-}
-
-/** Companion panel for callers that keep content outside `Tabs`. */
-export function TabPanel({
-  id,
-  labelledBy,
-  active,
-  children,
-  className,
-}: TabPanelProps) {
-  return (
-    <div
-      role="tabpanel"
-      id={id}
-      aria-labelledby={labelledBy}
-      hidden={!active}
-      className={className}
-    >
-      {active ? children : null}
-    </div>
-  );
-}
-
-export function Tabs<Key extends string = string>({
-  tabs,
-  value,
-  onChange,
-  ariaLabel,
-  className,
-}: TabsProps<Key>) {
-  const refs = React.useRef(new Map<Key, HTMLButtonElement | null>());
-  const reactId = React.useId();
-  const hasInlinePanels = tabs.some((tab) => tab.panel != null);
-
-  function tabDomId(key: Key) {
-    return `${reactId}-tab-${key}`;
-  }
-
-  function panelDomId(tab: TabItem<Key>) {
-    return tab.panelId ?? `${reactId}-panel-${tab.key}`;
-  }
-
-  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);
-  }
-
-  const tablist = (
-    <div
-      role="tablist"
-      aria-label={ariaLabel}
-      onKeyDown={onKeyDown}
-      className={cn(
-        "border-border flex flex-wrap gap-1 border-b",
-        !hasInlinePanels ? className : undefined,
-      )}
-    >
-      {tabs.map((tab) => {
-        const active = tab.key === value;
-        const id = tabDomId(tab.key);
-        const controls =
-          tab.panel != null || tab.panelId ? panelDomId(tab) : undefined;
-        return (
-          <button
-            key={tab.key}
-            id={id}
-            ref={(node) => {
-              refs.current.set(tab.key, node);
-            }}
-            type="button"
-            role="tab"
-            aria-selected={active}
-            aria-controls={controls}
-            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-primary text-primary-foreground"
-                : "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>
-  );
-
-  if (!hasInlinePanels) return tablist;
-
-  return (
-    <div className={cn("space-y-3", className)}>
-      {tablist}
-      {tabs.map((tab) =>
-        tab.panel != null ? (
-          <TabPanel
-            key={tab.key}
-            id={panelDomId(tab)}
-            labelledBy={tabDomId(tab.key)}
-            active={tab.key === value}
-          >
-            {tab.panel}
-          </TabPanel>
-        ) : null,
-      )}
-    </div>
-  );
-}

package/src/textarea.tsx

@@ -1,32 +0,0 @@
-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";