@zyncat/ui 0.8.0

package/src/components/composites/table/table.css

@@ -0,0 +1,348 @@
+/* Table - geometry + paint: sticky header, sortable columns, row selection + bulk bar, pinned identity column. */
+
+.tbl,
+.tbl * {
+  box-sizing: border-box;
+}
+
+.tbl {
+  --tbl-pad-y: var(--space-3);
+  --tbl-head-py: var(--space-3);
+  --tbl-head-h: calc(var(--leading-caption) + 2 * var(--tbl-head-py));
+  /* checkbox column: pad 8 + (8 + 18 + 8 hit area) + pad 8 - all tokens */
+  --tbl-check-w: calc(var(--control-box) + 4 * var(--space-2));
+
+  position: relative;
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  background: var(--bg-surface);
+  border: var(--border-hairline) solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xs);
+  overflow: hidden;
+}
+
+.tbl--compact {
+  --tbl-pad-y: var(--space-2);
+  --tbl-head-py: var(--space-2);
+}
+
+.tbl__viewport {
+  position: relative;
+  display: flex; /* flex sizing, not % height - % inside a max-height parent resolves to auto, scroller would grow to content */
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.tbl__scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+.tbl__table {
+  width: 100%;
+  border-collapse: separate; /* collapse breaks sticky borders */
+  border-spacing: 0;
+}
+
+.tbl__table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  height: var(--tbl-head-h);
+  padding: var(--tbl-head-py) var(--space-3);
+  background: var(--bg-surface);
+  border-bottom: var(--border-hairline) solid var(--border-default);
+  font: var(--type-caption);
+  font-weight: var(--weight-medium);
+  color: var(--text-muted);
+  text-align: left;
+  vertical-align: middle;
+  white-space: nowrap;
+  transition: box-shadow var(--duration-base) var(--ease-standard);
+}
+.tbl[data-scrolled] .tbl__table thead th {
+  box-shadow: var(--shadow-sm);
+}
+
+.tbl__table td {
+  padding: var(--tbl-pad-y) var(--space-3);
+  border-bottom: var(--border-hairline) solid var(--border-subtle);
+  background: var(--row-bg, var(--bg-surface));
+  font: var(--type-body);
+  color: var(--text-body);
+  vertical-align: middle;
+  white-space: nowrap; /* data tables don't wrap - grow column absorbs slack; overflow scrolls + pins */
+  transition: background-color var(--duration-fast) var(--ease-standard);
+}
+.tbl__table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+/* outermost cells breathe a step more (16) - sortables do it via the button */
+.tbl__table th:first-child:not(.tbl__cell--check):not(.tbl__cell--sortable),
+.tbl__table td:first-child:not(.tbl__cell--check) {
+  padding-inline-start: var(--space-4);
+}
+.tbl__table th:last-child:not(.tbl__cell--sortable),
+.tbl__table td:last-child {
+  padding-inline-end: var(--space-4);
+}
+
+/* one opaque --row-bg per row, read by every cell - stays opaque so sticky cells cover scrolled content */
+.tbl__row {
+  --row-bg: var(--bg-surface);
+}
+.tbl__row:hover {
+  --row-bg: var(--bg-subtle);
+}
+.tbl__row[data-selected] {
+  --row-bg: color-mix(in oklab, var(--accent) 5%, var(--bg-surface));
+}
+.tbl__row[data-selected]:hover {
+  --row-bg: color-mix(in oklab, var(--accent) 5%, var(--bg-subtle));
+}
+.tbl--clickable tbody .tbl__row {
+  cursor: pointer;
+}
+
+.tbl__table td.tbl__cell--mono {
+  font: var(--type-mono);
+  font-variant-numeric: tabular-nums;
+}
+.tbl__table td.tbl__cell--strong {
+  color: var(--text-strong);
+  font-weight: var(--weight-medium);
+}
+.tbl__cell--end {
+  text-align: right;
+}
+.tbl__cell--center {
+  text-align: center;
+}
+.tbl__cell--grow {
+  width: 100%;
+} /* greedy column; auto table layout sizes the others to content */
+
+/* sort: full-cell button, inset by a margin so its focus ring isn't clipped */
+.tbl__table th.tbl__cell--sortable {
+  padding: 0;
+}
+.tbl__sort {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  width: calc(100% - 2 * var(--space-1));
+  height: calc(var(--tbl-head-h) - 2 * var(--space-1));
+  margin: var(--space-1);
+  padding-inline: var(--space-2);
+  border-radius: var(--radius-sm);
+  font: inherit;
+  font-weight: inherit;
+  color: inherit;
+  white-space: nowrap;
+  transition: var(--transition-colors);
+}
+.tbl__table th.tbl__cell--sortable:first-child .tbl__sort {
+  padding-inline-start: var(--space-3);
+}
+.tbl__table th.tbl__cell--sortable:last-child .tbl__sort {
+  padding-inline-end: var(--space-3);
+}
+.tbl__cell--end .tbl__sort {
+  justify-content: flex-end;
+}
+.tbl__cell--center .tbl__sort {
+  justify-content: center;
+}
+.tbl__sort:hover {
+  color: var(--text-strong);
+  background: var(--neutral-wash);
+}
+.tbl__sort:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+.tbl__table th[aria-sort] .tbl__sort {
+  color: var(--text-strong);
+}
+
+.tbl__sortIcon {
+  display: inline-flex;
+  flex: none;
+  opacity: 0;
+  transition:
+    opacity var(--duration-fast) var(--ease-standard),
+    transform var(--duration-base) var(--ease-glide);
+}
+.tbl__sort:hover .tbl__sortIcon,
+.tbl__sort:focus-visible .tbl__sortIcon {
+  opacity: 0.5;
+}
+.tbl__sortIcon.is-on {
+  opacity: 1;
+}
+.tbl__sortIcon.is-desc {
+  transform: rotate(180deg);
+}
+
+.tbl__table .tbl__cell--check {
+  width: var(--tbl-check-w);
+  padding: 0 var(--space-2);
+}
+.tbl__cbx {
+  display: inline-flex;
+}
+.tbl__cbx .cbx__box {
+  margin-top: 0;
+} /* no label - no baseline offset */
+
+/* bulk bar: absolute overlay that morphs from the header; the delayed visibility flip removes it from paint + tab order only after the exit fade, while pointer-events dies on close */
+.tbl__bulk {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 4;
+  height: calc(var(--tbl-head-h) + var(--border-hairline));
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding-inline: var(--space-2);
+  background: var(--accent-subtle);
+  border-bottom: var(--border-hairline) solid var(--accent-border);
+  opacity: 0;
+  transform: translateY(calc(-1 * var(--space-2)));
+  visibility: hidden;
+  pointer-events: none;
+  transition:
+    opacity var(--duration-fast) var(--ease-exit),
+    transform var(--duration-fast) var(--ease-exit),
+    visibility 0s linear var(--duration-fast);
+}
+.tbl__bulk[data-open] {
+  opacity: 1;
+  transform: none;
+  visibility: visible;
+  pointer-events: auto;
+  transition:
+    opacity var(--duration-base) var(--ease-standard),
+    transform var(--duration-base) var(--ease-entrance),
+    visibility 0s;
+}
+.tbl__bulk .cbx:not(.cbx--disabled):hover {
+  background: var(--accent-wash);
+}
+.tbl__bulkCount {
+  display: inline-flex;
+  align-items: baseline;
+  font-family: var(--font-mono);
+  font-size: var(--size-caption);
+  line-height: var(--leading-caption);
+  font-weight: var(--weight-medium);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-accent);
+  white-space: pre; /* keep the space before "selected" */
+}
+.tbl__bulkSpacer {
+  flex: 1 1 auto;
+}
+
+.tbl--pin .tbl__cell--pin {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+}
+.tbl--pin thead .tbl__cell--pin {
+  z-index: 3;
+}
+.tbl--pin .tbl__cell--pinOff {
+  left: var(--tbl-check-w);
+}
+
+/* soft cast off the pinned edge once content scrolls behind it (gradient exception, section B3) */
+.tbl--pin .tbl__cell--pinEdge::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: calc(-1 * var(--border-hairline));
+  left: 100%;
+  width: var(--space-3);
+  background: linear-gradient(to right, var(--gray-wash), transparent);
+  opacity: 0;
+  transition: var(--transition-opacity);
+  pointer-events: none;
+}
+.tbl[data-x-back] .tbl__cell--pinEdge::after {
+  opacity: 1;
+}
+
+.tbl__edge {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--space-6);
+  z-index: 3;
+  opacity: 0;
+  transition: var(--transition-opacity);
+  pointer-events: none;
+}
+.tbl__edge--l {
+  left: 0;
+  background: linear-gradient(to right, var(--bg-surface), transparent);
+}
+.tbl__edge--r {
+  right: 0;
+  background: linear-gradient(to left, var(--bg-surface), transparent);
+}
+.tbl[data-x-more] .tbl__edge--r {
+  opacity: 1;
+}
+.tbl[data-x-back]:not(.tbl--pin) .tbl__edge--l {
+  opacity: 1;
+} /* when pinned, the pinned column itself is the left-edge signal */
+
+.tbl__emptyCell {
+  padding: var(--space-7) var(--space-4);
+  text-align: center;
+  font: var(--type-body);
+  color: var(--text-muted);
+}
+
+.tbl__table tbody {
+  transition: var(--transition-opacity);
+}
+.tbl--loading .tbl__table tbody {
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.tbl__foot {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  background: var(--bg-subtle);
+  border-top: var(--border-hairline) solid var(--border-subtle);
+}
+
+/* column collapse at container breakpoints - 30rem / 42rem are intentional constants (no breakpoint tokens yet) */
+@container (max-width: 42rem) {
+  .tbl__cell--hide-md {
+    display: none;
+  }
+}
+@container (max-width: 30rem) {
+  .tbl__cell--hide-sm {
+    display: none;
+  }
+}

package/src/components/composites/tabs/Tabs.tsx

@@ -0,0 +1,278 @@
+'use client';
+
+import './tabs.css';
+import {
+  useId,
+  useLayoutEffect,
+  useRef,
+  type CSSProperties,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type ReactNode,
+} from 'react';
+import { animate } from '../../../engine';
+import { UIMotion } from '../../../tokens/motion-tokens';
+import { IconSlot } from '../../internal/icon/IconSlot';
+import { GlidePill, useGlide } from '../../../motion/glide';
+import { useScrollEdges } from '../../internal/hooks/use-scroll-edges';
+import { type DisableableAnimation } from '../../../motion/timing';
+import { resolveMotionTiming } from '../../../motion/motion-timing';
+import type { DataAttributes } from '../../../dom-props';
+import { cx } from '../../internal/utils/cx';
+
+const SM = UIMotion;
+
+/** One tab in the row. */
+export interface TabItem {
+  /** Stable identity - also used in the tab/panel id pair. */
+  value: string;
+  /** Visible tab text. */
+  label: ReactNode;
+  /** Leading icon - your own node. */
+  icon?: ReactNode;
+  /** Rendered mono + tabular. Pass a number or a preformatted string. */
+  count?: number | string;
+  /** Dims the tab, blocks selection, and skips it during arrow-key travel. */
+  disabled?: boolean;
+}
+
+interface TabsOwnProps {
+  /** The tab row, in order. @default [] */
+  items: TabItem[];
+  /** Controlled - the value of the active tab (null/undefined hides the ink). */
+  value: string | null | undefined;
+  /**
+   * Fires on click and on arrow-key travel (automatic activation).
+   * `dir` is the direction of travel (+1 right / -1 left) - hand it to
+   * TabPanel so content enters from the side the user moved toward.
+   */
+  onChange?: (value: string, dir: 1 | -1) => void;
+  /**
+   * Shared id prefix wiring tab and panel aria. Give Tabs and its TabPanel the
+   * same `name`; omit it when the tabs have no managed panel.
+   */
+  name?: string;
+  /** Accessible name for the tablist (e.g. "Section views"). */
+  ariaLabel?: string;
+  /** Extra class(es) merged onto the root. */
+  className?: string;
+  /** Inline styles merged onto the root. */
+  style?: CSSProperties;
+}
+
+export interface TabsProps extends TabsOwnProps {
+  /** Standard <div> attributes (data-*, aria-*, ...) forwarded to the root. */
+  htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof TabsOwnProps> & DataAttributes;
+}
+
+const TABS_EDGE_PAD = 24;
+const TABS_ENTER_X = 20;
+
+export function Tabs({ items = [], value, onChange, name, ariaLabel, className = '', style, htmlProps }: TabsProps) {
+  const autoId = useId();
+  const base = name || autoId;
+
+  const listRef = useRef<HTMLDivElement>(null);
+  const inkRef = useRef<HTMLSpanElement>(null);
+  const tabRefs = useRef<Record<string, HTMLButtonElement | null>>({});
+  const placedRef = useRef(false);
+  const valueRef = useRef(value);
+  valueRef.current = value;
+
+  const glide = useGlide(listRef);
+
+  const place = (animated: boolean) => {
+    const list = listRef.current,
+      ink = inkRef.current;
+    const el = valueRef.current != null ? tabRefs.current[valueRef.current] : null;
+    if (!list || !ink) return;
+    if (!el) {
+      ink.style.opacity = '0';
+      placedRef.current = false;
+      return;
+    }
+    const next = { x: el.offsetLeft, w: el.offsetWidth };
+    ink.style.opacity = '1';
+
+    if (!animated || !placedRef.current || SM.reduced) {
+      animate(ink, { x: [next.x], width: [next.w], timing: { duration: 0 } });
+    } else {
+      const lr = list.getBoundingClientRect();
+      const ir = ink.getBoundingClientRect();
+      const cur = { x: ir.left - lr.left + list.scrollLeft, w: ir.width };
+      if (Math.abs(cur.x - next.x) > 0.5 || Math.abs(cur.w - next.w) > 0.5) {
+        const dir = next.x + next.w / 2 >= cur.x + cur.w / 2 ? 1 : -1;
+        const span = dir === 1 ? next.x + next.w - cur.x : cur.x + cur.w - next.x;
+        const lead = dir === 1 ? cur.x : next.x;
+        animate(ink, {
+          x: [cur.x, lead, next.x],
+          width: [cur.w, span, next.w],
+          timing: { duration: SM.dur.slow, times: [0, 0.55, 1], ease: [SM.ease.standard, SM.ease.entrance] },
+        });
+      }
+    }
+    placedRef.current = true;
+  };
+
+  const syncEdges = useScrollEdges(listRef, (edges, el) => {
+    el.dataset.fade = ((edges.left ? 'start ' : '') + (edges.right ? 'end' : '')).trim();
+  });
+
+  useLayoutEffect(() => {
+    place(true);
+    const l = listRef.current,
+      el = value != null ? tabRefs.current[value] : null;
+    if (l && el && l.scrollWidth > l.clientWidth) {
+      const behavior: ScrollBehavior = SM.reduced ? 'auto' : 'smooth';
+      if (el.offsetLeft < l.scrollLeft + TABS_EDGE_PAD) {
+        l.scrollTo({ left: el.offsetLeft - TABS_EDGE_PAD, behavior });
+      } else if (el.offsetLeft + el.offsetWidth > l.scrollLeft + l.clientWidth - TABS_EDGE_PAD) {
+        l.scrollTo({ left: el.offsetLeft + el.offsetWidth - l.clientWidth + TABS_EDGE_PAD, behavior });
+      }
+    }
+  }, [value]);
+
+  useLayoutEffect(() => {
+    const ro = new ResizeObserver(() => {
+      place(false);
+      syncEdges();
+    });
+    if (listRef.current) ro.observe(listRef.current);
+    Object.values(tabRefs.current).forEach((el) => el && ro.observe(el));
+    syncEdges();
+    return () => ro.disconnect();
+  }, [items.length]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const select = (v: string) => {
+    if (v === value || !onChange) return;
+    const idx = (x: string | null | undefined) => items.findIndex((i) => i.value === x);
+    onChange(v, idx(v) >= idx(value) ? 1 : -1);
+  };
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    const enabled = items.filter((i) => !i.disabled);
+    if (!enabled.length) return;
+    let next: TabItem | null = null;
+    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+      const step = e.key === 'ArrowRight' ? 1 : -1;
+      const i = enabled.findIndex((it) => it.value === value);
+      next = enabled[(i + step + enabled.length) % enabled.length];
+    } else if (e.key === 'Home') {
+      next = enabled[0];
+    } else if (e.key === 'End') {
+      next = enabled[enabled.length - 1];
+    }
+    if (!next) return;
+    e.preventDefault();
+    select(next.value);
+    const el = tabRefs.current[next.value];
+    if (el) el.focus();
+  };
+
+  const focusValue = items.some((i) => i.value === value && !i.disabled)
+    ? value
+    : (items.find((i) => !i.disabled) || ({} as Partial<TabItem>)).value;
+
+  return (
+    <div className={cx('tabs', className)} style={style} {...htmlProps}>
+      <div
+        className="tabs__list"
+        role="tablist"
+        aria-label={ariaLabel}
+        ref={listRef}
+        onKeyDown={onKeyDown}
+        onPointerLeave={glide.leave}
+      >
+        <GlidePill className="tab__hover" glide={glide} />
+        {items.map((it) => {
+          const selected = it.value === value;
+          return (
+            <button
+              key={it.value}
+              type="button"
+              role="tab"
+              id={base + '-tab-' + it.value}
+              aria-selected={selected}
+              aria-controls={name ? name + '-panel-' + it.value : undefined}
+              tabIndex={it.value === focusValue ? 0 : -1}
+              disabled={it.disabled}
+              className={'tab' + (selected ? ' is-selected' : '')}
+              ref={(el) => {
+                tabRefs.current[it.value] = el;
+              }}
+              onClick={() => select(it.value)}
+              onPointerEnter={
+                it.disabled ? undefined : (e) => glide.enter(e.currentTarget.firstElementChild as HTMLElement)
+              }
+            >
+              <span className="tab__pad">
+                {it.icon && <IconSlot size="sm">{it.icon}</IconSlot>}
+                <span className="tab__label">{it.label}</span>
+                {it.count != null && <span className="tab__count">{it.count}</span>}
+              </span>
+            </button>
+          );
+        })}
+        <span className="tabs__ink" key="ink" ref={inkRef} aria-hidden="true"></span>
+      </div>
+    </div>
+  );
+}
+
+interface TabPanelOwnProps {
+  /** The active tab's value - changing it cuts to the new content. */
+  tab: string;
+  /** Same `name` as the paired Tabs - wires role/id/aria-labelledby. */
+  name?: string;
+  /** Direction of travel from Tabs' onChange; 0 = plain fade. */
+  dir?: -1 | 0 | 1;
+  /** Panel content - only this inner node animates in on `tab` change; the root chrome stays static. */
+  children?: ReactNode;
+  /** Entrance timing for the inner content - motion tokens only, or `null` to disable.
+   *  @default duration 'base' + ease 'entrance' */
+  animation?: DisableableAnimation;
+  /** Extra class(es) merged onto the root. */
+  className?: string;
+  /** Inline styles merged onto the root. */
+  style?: CSSProperties;
+}
+
+export interface TabPanelProps extends TabPanelOwnProps {
+  /** Standard <div> attributes (data-*, aria-*, ...) forwarded to the root. */
+  htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof TabPanelOwnProps> & DataAttributes;
+}
+
+const TABPANEL_TIMING = {
+  open: { duration: 'base', ease: 'entrance' },
+  close: { duration: 'base', ease: 'entrance' },
+} as const;
+
+export function TabPanel({ tab, name, dir = 0, className = '', style, children, animation, htmlProps }: TabPanelProps) {
+  const enter = resolveMotionTiming(animation, TABPANEL_TIMING).open;
+  const innerRef = useRef<HTMLDivElement | null>(null);
+  const enterRef = useRef<ReturnType<typeof animate> | null>(null);
+
+  useLayoutEffect(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    enterRef.current?.stop();
+    enterRef.current = animate(el, { x: [dir * TABS_ENTER_X, 0], y: [4, 0], timing: enter });
+    return () => enterRef.current?.stop();
+  }, [tab]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <div
+      role="tabpanel"
+      tabIndex={0}
+      id={name ? `${name}-panel-${tab}` : undefined}
+      aria-labelledby={name ? `${name}-tab-${tab}` : undefined}
+      className={cx('tab-panel', className)}
+      style={style}
+      {...htmlProps}
+    >
+      <div ref={innerRef} className="tab-panel__inner">
+        {children}
+      </div>
+    </div>
+  );
+}