@zyncat/ui 0.8.0

package/dist/status-badge.js

@@ -0,0 +1,72 @@
+'use client';import { fireGlint } from './chunk-S7B34VGN.js';
+import { UIMotion } from './chunk-S5ZTZANS.js';
+import { Badge } from './chunk-PMECHR3A.js';
+import { cx } from './chunk-QGNC7LH5.js';
+import './badge.css';
+import { useRef, useState, useLayoutEffect, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var SM = UIMotion;
+var POST_STATUS = {
+  draft: { tone: "neutral", label: "Draft" },
+  scheduled: { tone: "info", label: "Scheduled" },
+  processing: { tone: "warning", label: "Processing", live: true },
+  published: { tone: "success", label: "Published" },
+  failed: { tone: "danger", label: "Failed" }
+};
+var TERMINAL = { published: true, failed: true };
+function StatusBadge({ status, morph = false, ...rest }) {
+  if (!morph) {
+    const s = POST_STATUS[status] || POST_STATUS.draft;
+    return /* @__PURE__ */ jsx(Badge, { tone: s.tone, dot: true, live: !!s.live, ...rest, children: s.label });
+  }
+  return /* @__PURE__ */ jsx(StatusMorph, { status, ...rest });
+}
+function StatusMorph({ status, className = "", ...rest }) {
+  const s = POST_STATUS[status] || POST_STATUS.draft;
+  const prev = useRef(status);
+  const keyRef = useRef(1);
+  const labelRef = useRef(null);
+  const ghostRef = useRef(null);
+  const [words, setWords] = useState([{ key: 0, label: s.label, cls: "" }]);
+  const [boxW, setBoxW] = useState();
+  useLayoutEffect(() => {
+    if (ghostRef.current) setBoxW(ghostRef.current.offsetWidth);
+  }, []);
+  useEffect(() => {
+    if (prev.current === status) return;
+    prev.current = status;
+    const next = POST_STATUS[status] || POST_STATUS.draft;
+    const nk = keyRef.current++;
+    const nextW = ghostRef.current?.offsetWidth;
+    setWords((ws) => ws.concat({ key: nk, label: next.label, cls: "badge__word--in" }));
+    const raf = requestAnimationFrame(
+      () => requestAnimationFrame(() => {
+        setWords((ws) => ws.map((w) => w.key === nk ? { ...w, cls: "" } : { ...w, cls: "badge__word--out" }));
+        if (nextW) setBoxW(nextW);
+      })
+    );
+    const drop = setTimeout(
+      () => setWords((ws) => ws.filter((w) => !w.cls.includes("--out"))),
+      SM.dur.base * 1e3 + 80
+    );
+    let stopGlint;
+    if (TERMINAL[status] && labelRef.current) {
+      const chip = labelRef.current.closest(".badge");
+      if (chip) stopGlint = fireGlint(chip);
+    }
+    return () => {
+      cancelAnimationFrame(raf);
+      clearTimeout(drop);
+      stopGlint?.();
+    };
+  }, [status]);
+  return /* @__PURE__ */ jsx(Badge, { tone: s.tone, dot: true, live: !!s.live, className: cx("badge--morph", className), ...rest, children: /* @__PURE__ */ jsxs("span", { className: "badge__morph", ref: labelRef, style: boxW ? { width: boxW } : void 0, children: [
+    /* @__PURE__ */ jsx("span", { className: "badge__ghost", ref: ghostRef, "aria-hidden": "true", children: s.label }),
+    words.map((w) => /* @__PURE__ */ jsx("span", { className: cx("badge__word", w.cls), children: w.label }, w.key))
+  ] }) });
+}
+
+export { POST_STATUS, StatusBadge };
+//# sourceMappingURL=status-badge.js.map
+//# sourceMappingURL=status-badge.js.map

package/dist/status-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/badge/StatusBadge.tsx"],"names":[],"mappings":"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","file":"status-badge.js","sourcesContent":["'use client';\n\nimport './badge.css';\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { Badge, type BadgeProps } from './Badge';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { fireGlint } from '../../internal/glass/glint';\nimport { cx } from '../../internal/utils/cx';\n\nconst SM = UIMotion;\n\nexport type PostStatus = 'draft' | 'scheduled' | 'processing' | 'published' | 'failed';\n\nexport const POST_STATUS: Record<PostStatus, { tone: BadgeProps['tone']; label: string; live?: boolean }> = {\n  draft: { tone: 'neutral', label: 'Draft' },\n  scheduled: { tone: 'info', label: 'Scheduled' },\n  processing: { tone: 'warning', label: 'Processing', live: true },\n  published: { tone: 'success', label: 'Published' },\n  failed: { tone: 'danger', label: 'Failed' },\n};\n\nconst TERMINAL: Partial<Record<PostStatus, boolean>> = { published: true, failed: true };\n\nexport interface StatusBadgeProps extends Omit<BadgeProps, 'children' | 'tone'> {\n  /** Lifecycle state - maps to a canonical `tone` + label (`processing` also pulses live). Unknown falls back to `draft`. */\n  status: PostStatus;\n  /** Morph in place as `status` changes instead of swapping. */\n  morph?: boolean;\n}\n\nexport function StatusBadge({ status, morph = false, ...rest }: StatusBadgeProps) {\n  if (!morph) {\n    const s = POST_STATUS[status] || POST_STATUS.draft;\n    return (\n      <Badge tone={s.tone} dot live={!!s.live} {...rest}>\n        {s.label}\n      </Badge>\n    );\n  }\n  return <StatusMorph status={status} {...rest} />;\n}\n\ninterface StatusMorphProps extends Omit<BadgeProps, 'children' | 'tone'> {\n  status: PostStatus;\n}\n\ninterface Word {\n  key: number;\n  label: string;\n  cls: string;\n}\n\nfunction StatusMorph({ status, className = '', ...rest }: StatusMorphProps) {\n  const s = POST_STATUS[status] || POST_STATUS.draft;\n\n  const prev = useRef(status);\n  const keyRef = useRef(1);\n  const labelRef = useRef<HTMLSpanElement>(null);\n  const ghostRef = useRef<HTMLSpanElement>(null);\n  const [words, setWords] = useState<Word[]>([{ key: 0, label: s.label, cls: '' }]);\n  const [boxW, setBoxW] = useState<number>();\n\n  useLayoutEffect(() => {\n    if (ghostRef.current) setBoxW(ghostRef.current.offsetWidth);\n  }, []);\n\n  useEffect(() => {\n    if (prev.current === status) return;\n    prev.current = status;\n    const next = POST_STATUS[status] || POST_STATUS.draft;\n    const nk = keyRef.current++;\n    const nextW = ghostRef.current?.offsetWidth;\n\n    setWords((ws) => ws.concat({ key: nk, label: next.label, cls: 'badge__word--in' }));\n    const raf = requestAnimationFrame(() =>\n      requestAnimationFrame(() => {\n        setWords((ws) => ws.map((w) => (w.key === nk ? { ...w, cls: '' } : { ...w, cls: 'badge__word--out' })));\n        if (nextW) setBoxW(nextW);\n      }),\n    );\n    const drop = setTimeout(\n      () => setWords((ws) => ws.filter((w) => !w.cls.includes('--out'))),\n      SM.dur.base * 1000 + 80,\n    );\n    let stopGlint: (() => void) | undefined;\n    if (TERMINAL[status] && labelRef.current) {\n      const chip = labelRef.current.closest('.badge') as HTMLElement | null;\n      if (chip) stopGlint = fireGlint(chip);\n    }\n    return () => {\n      cancelAnimationFrame(raf);\n      clearTimeout(drop);\n      stopGlint?.();\n    };\n  }, [status]);\n\n  return (\n    <Badge tone={s.tone} dot live={!!s.live} className={cx('badge--morph', className)} {...rest}>\n      <span className=\"badge__morph\" ref={labelRef} style={boxW ? { width: boxW } : undefined}>\n        <span className=\"badge__ghost\" ref={ghostRef} aria-hidden=\"true\">\n          {s.label}\n        </span>\n        {words.map((w) => (\n          <span key={w.key} className={cx('badge__word', w.cls)}>\n            {w.label}\n          </span>\n        ))}\n      </span>\n    </Badge>\n  );\n}\n"]}

package/dist/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/dist/table.d.ts

@@ -0,0 +1,75 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
+import { D as DataAttributes } from './dom-props-C0jrllBw.js';
+
+type TableAlign = 'start' | 'end' | 'center';
+type TableHideBelow = 'sm' | 'md';
+interface TableColumn<Row = any> {
+    /** Unique column id; also the default data accessor (row[key]). */
+    key: string;
+    /** Header cell content; omit for a header-less column (e.g. an actions column). */
+    label?: ReactNode;
+    /** Cell + header alignment. Default 'start'. */
+    align?: TableAlign;
+    /** Mono + tabular numerals (timestamps, counts, IDs - section E). */
+    mono?: boolean;
+    /** Identity emphasis: strong text, medium weight. */
+    strong?: boolean;
+    /** The one greedy column - absorbs slack width. Others size to content. */
+    grow?: boolean;
+    /** Header becomes a sort control. Sort is local; asc - desc, no third state. */
+    sortable?: boolean;
+    /** Sort accessor: a row property name, or a function. Defaults to row[key]. */
+    sortBy?: string | ((row: Row) => unknown);
+    /** Collapse this column below a container breakpoint (30rem / 42rem). */
+    hideBelow?: TableHideBelow;
+    /** Custom cell renderer. Defaults to row[key]. */
+    render?: (row: Row) => ReactNode;
+}
+interface TableSort {
+    /** `key` of the column being sorted by. */
+    key: string;
+    /** Sort direction - `asc` or `desc`. */
+    dir: 'asc' | 'desc';
+}
+interface TableProps<Row = any> {
+    /** Column defs, rendered left to right. */
+    columns: TableColumn<Row>[];
+    /** The row data; sorted locally per the active sort before render. */
+    rows: Row[];
+    /** Row identity property. Default 'id'. Must be unique and stable. */
+    rowKey?: string;
+    /** Accessible name for the <table>. */
+    ariaLabel?: string;
+    /** Checkbox column + bulk bar. Selection is a Set of row keys, owned here. */
+    selectable?: boolean;
+    /** Fires with the selected row keys after every selection change. */
+    onSelectionChange?: (keys: Array<string | number>) => void;
+    /** Rendered in the bulk bar between the count and the built-in Clear. */
+    bulkActions?: (keys: Array<string | number>, clear: () => void) => ReactNode;
+    /** Per-row checkbox aria-label. Default 'Select row'. */
+    selectionLabel?: (row: Row) => string;
+    /** Initial sort; sorting stays local and uncontrolled after that. */
+    defaultSort?: TableSort | null;
+    /** Notification only - fires after the local sort updates. */
+    onSortChange?: (sort: TableSort) => void;
+    /** Row rhythm. Default 'cozy' (46px rows); 'compact' is 38px. */
+    density?: 'cozy' | 'compact';
+    /** Pin checkbox + first column under horizontal overflow. Default true. */
+    pinFirst?: boolean;
+    /** Rows recede and go inert (list-fetch convention). */
+    loading?: boolean;
+    /** Shown when rows is empty and not loading. Default 'Nothing to show'. */
+    empty?: ReactNode;
+    /** Footer strip - pagination, summaries. */
+    footer?: ReactNode;
+    /** Makes rows clickable (checkbox cell excluded). */
+    onRowClick?: (row: Row) => void;
+    /** Size the table here - the internal scroller absorbs the constraint. */
+    className?: string;
+    /** Standard <div> attributes (style, data-*, aria-*, ...) forwarded to the table wrapper. */
+    htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, 'className'> & DataAttributes;
+}
+declare function Table<Row = any>({ columns, rows, rowKey, ariaLabel, selectable, onSelectionChange, bulkActions, selectionLabel, defaultSort, onSortChange, density, pinFirst, loading, empty, footer, onRowClick, className, htmlProps, }: TableProps<Row>): react.JSX.Element;
+
+export { Table, type TableAlign, type TableColumn, type TableHideBelow, type TableProps, type TableSort };