@attrus-ds/core 0.1.1 → 0.2.0

package/dist/react/SmartSearch/SmartSearch.tsx

@@ -0,0 +1,271 @@
+import * as React from 'react';
+
+/**
+ * ATTRUS SmartSearch — typed shell over the canonical `.ss` system
+ * (preview/components/smart-search.css). The global ⌘K command palette.
+ *
+ * The 8 canonical states (combobox.html §03) COMPOSE from props — the
+ * component renders whatever slices it receives, in the doc's order:
+ *   input → chips → sections/list → hint → typeButtons → empty/loading/
+ *   error illo → footer (kbd hints).
+ *
+ *   inactive    → no popover content (flat input)
+ *   active      → chips + sections (recents/suggestions)
+ *   word        → resultLabel + sections
+ *   similar     → hint + sections
+ *   id          → hint + typeButtons
+ *   partial id  → hint only
+ *   no results  → empty
+ *   loading     → loading
+ *   error       → error (retry)
+ *
+ * Keyboard: ↑/↓ move `.is-active` across items, Enter selects, Esc → onClose.
+ */
+
+export interface SSItem {
+  key: string;
+  /** Leading 28px tile glyph. */
+  icon?: React.ReactNode;
+  title: React.ReactNode;
+  /** Muted second line. */
+  sub?: React.ReactNode;
+  /** Right-aligned mono hint (id, shortcut). */
+  trailing?: React.ReactNode;
+}
+
+export interface SSSection {
+  /** Uppercase section label (e.g. "Counterparties"). */
+  label?: React.ReactNode;
+  items: SSItem[];
+}
+
+export interface SSTypeButton {
+  key: string;
+  icon?: React.ReactNode;
+  label: React.ReactNode;
+  /** Muted right hint (e.g. "transaction"). */
+  hint?: React.ReactNode;
+}
+
+export interface SmartSearchProps {
+  value: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  /** Leading input glyph (search icon). */
+  icon?: React.ReactNode;
+  /** Shows the × clear button when value is non-empty. */
+  onClear?: () => void;
+  /** Esc inside the input. */
+  onClose?: () => void;
+  /** Suggestion chips row (active state). */
+  chips?: Array<{ key: string; icon?: React.ReactNode; label: React.ReactNode }>;
+  onChipClick?: (key: string) => void;
+  /** Grouped result rows. */
+  sections?: SSSection[];
+  onSelect?: (key: string) => void;
+  /** "RESULTS (N)" line above the list. */
+  resultLabel?: React.ReactNode;
+  /** Tip card (similar match, ID format hint). */
+  hint?: React.ReactNode;
+  /** ID-disambiguation buttons. */
+  typeButtons?: SSTypeButton[];
+  onTypeSelect?: (key: string) => void;
+  /** No-results state. */
+  empty?: { title: React.ReactNode; sub?: React.ReactNode; illo?: React.ReactNode };
+  /** Skeleton rows while fetching. */
+  loading?: boolean;
+  /** Fetch failed — retry. */
+  error?: { title: React.ReactNode; sub?: React.ReactNode; retryLabel?: React.ReactNode; onRetry?: () => void; illo?: React.ReactNode };
+  /** Kbd hint footer (↑↓ navigate · ↵ open · esc close). Default true when the popover has content. */
+  footer?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  'aria-label'?: string;
+}
+
+const SearchGlyph: React.FC = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />
+  </svg>
+);
+
+export const SmartSearch: React.FC<SmartSearchProps> = ({
+  value,
+  onChange,
+  placeholder = 'Search or jump to…',
+  icon,
+  onClear,
+  onClose,
+  chips,
+  onChipClick,
+  sections,
+  onSelect,
+  resultLabel,
+  hint,
+  typeButtons,
+  onTypeSelect,
+  empty,
+  loading = false,
+  error,
+  footer,
+  className,
+  style,
+  ...rest
+}) => {
+  const [active, setActive] = React.useState<string | null>(null);
+  const flat = React.useMemo(() => (sections || []).reduce<SSItem[]>((a, s) => a.concat(s.items), []), [sections]);
+
+  const hasBody = Boolean(
+    (chips && chips.length) || (sections && sections.length) || hint != null ||
+    (typeButtons && typeButtons.length) || empty != null || loading || error != null
+  );
+  const showFooter = footer != null ? footer : hasBody;
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') { if (onClose) onClose(); return; }
+    if (!flat.length) return;
+    const idx = flat.findIndex((i) => i.key === active);
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      const next = e.key === 'ArrowDown'
+        ? flat[Math.min(idx + 1, flat.length - 1)]
+        : flat[Math.max(idx - 1, 0)];
+      setActive(next.key);
+    } else if (e.key === 'Enter') {
+      const hit = flat.find((i) => i.key === active);
+      if (hit && onSelect) { e.preventDefault(); onSelect(hit.key); }
+    }
+  };
+
+  const renderItem = (it: SSItem) => (
+    <li
+      key={it.key}
+      className={['ss-list-item', it.key === active ? 'is-active' : ''].filter(Boolean).join(' ')}
+      onMouseEnter={() => setActive(it.key)}
+      onClick={() => onSelect && onSelect(it.key)}
+    >
+      {it.icon != null ? <span className="icon-leading">{it.icon}</span> : null}
+      <span className="text">
+        <span className="label">{it.title}</span>
+        {it.sub != null ? <span className="meta">{it.sub}</span> : null}
+      </span>
+      {it.trailing != null ? (
+        <span style={{ marginLeft: 'auto', flexShrink: 0, fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-xxs)', color: 'var(--color-foreground-muted)' }}>{it.trailing}</span>
+      ) : null}
+    </li>
+  );
+
+  return (
+    <div className={['ss', className || ''].filter(Boolean).join(' ')} style={style} role="search" aria-label={rest['aria-label'] || 'Smart search'}>
+      <div className={['ss-input', hasBody ? '' : 'ss-input-flat'].filter(Boolean).join(' ')}>
+        {icon != null ? icon : <SearchGlyph />}
+        <input
+          value={value}
+          placeholder={placeholder}
+          onChange={(e) => onChange && onChange(e.target.value)}
+          onKeyDown={onKeyDown}
+          role="combobox"
+          aria-expanded={hasBody}
+        />
+        {onClear && value ? (
+          <button type="button" className="ss-clear" aria-label="Clear" onClick={onClear}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.25} strokeLinecap="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
+          </button>
+        ) : null}
+      </div>
+
+      {chips && chips.length ? (
+        <div className="ss-section">
+          <div className="ss-chips">
+            {chips.map((c) => (
+              <button key={c.key} type="button" className="ss-chip" onClick={() => onChipClick && onChipClick(c.key)}>
+                {c.icon}
+                {c.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      {resultLabel != null ? (
+        <div className="ss-section ss-result-label" style={{ borderBottom: 0, paddingBottom: 0 }}><span className="l">{resultLabel}</span></div>
+      ) : null}
+
+      {sections && sections.length ? sections.map((s, i) => (
+        <div key={i} className="ss-section">
+          {s.label != null ? <div className="ss-section-label">{s.label}</div> : null}
+          <ul className="ss-list">{s.items.map(renderItem)}</ul>
+        </div>
+      )) : null}
+
+      {hint != null ? (
+        <div className="ss-section"><div className="ss-hint">{hint}</div></div>
+      ) : null}
+
+      {typeButtons && typeButtons.length ? (
+        <div className="ss-section">
+          <div className="ss-typebtns">
+            {typeButtons.map((b) => (
+              <button key={b.key} type="button" className="ss-typebtn" onClick={() => onTypeSelect && onTypeSelect(b.key)}>
+                {b.icon}
+                <span className="grow">{b.label}</span>
+                {b.hint != null ? <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-xxs)', color: 'var(--color-foreground-muted)' }}>{b.hint}</span> : null}
+              </button>
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      {empty != null && !loading && !error ? (
+        <div className="ss-section">
+          <div className="ss-illo">
+            {empty.illo}
+            <span className="title">{empty.title}</span>
+            {empty.sub != null ? <span className="body">{empty.sub}</span> : null}
+          </div>
+        </div>
+      ) : null}
+
+      {loading ? (
+        <div className="ss-skeleton" aria-busy="true" aria-hidden="true">
+          {[0, 1, 2].map((i) => (
+            <div key={i} className="ss-skel-row">
+              <span className="ss-skel-circle ss-skel-shimmer" />
+              <span className="ss-skel-bars">
+                <span className="ss-skel-bar long ss-skel-shimmer" />
+                <span className="ss-skel-bar short ss-skel-shimmer" />
+              </span>
+            </div>
+          ))}
+        </div>
+      ) : null}
+
+      {error != null ? (
+        <div className="ss-section">
+          <div className="ss-illo" role="alert">
+            {error.illo}
+            <span className="title">{error.title}</span>
+            {error.sub != null ? <span className="body">{error.sub}</span> : null}
+            {error.onRetry ? (
+              <button type="button" className="ss-typebtn" style={{ marginTop: 'var(--space-2)' }} onClick={error.onRetry}>
+                {error.retryLabel != null ? error.retryLabel : 'Try again'}
+              </button>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+
+      {showFooter ? (
+        <div className="ss-foot">
+          <span className="kbd-group"><kbd className="ss-kbd">↑</kbd><kbd className="ss-kbd">↓</kbd> navigate</span>
+          <span className="sep" />
+          <span className="kbd-group"><kbd className="ss-kbd">↵</kbd> open</span>
+          <span className="sep" />
+          <span className="kbd-group"><kbd className="ss-kbd">esc</kbd> close</span>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default SmartSearch;

package/dist/react/Stepper/Stepper.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+export type StepState = 'todo' | 'current' | 'done' | 'error' | 'skipped';
+
+export interface StepItem {
+  key: string;
+  label: React.ReactNode;
+  help?: React.ReactNode;
+  state?: StepState;
+}
+
+export interface StepperProps extends React.OlHTMLAttributes<HTMLOListElement> {
+  steps: StepItem[];
+  vertical?: boolean;
+  compact?: boolean;
+  /** Minimal capsule+label variant (.is-rule) for tight headers. */
+  rule?: boolean;
+  /** ≤640px: hide labels, keep markers (.is-collapse-sm). */
+  collapseOnMobile?: boolean;
+  /** Step click (e.g. jump back to a done step). */
+  onStepClick?: (key: string) => void;
+}
+
+export declare const Stepper: React.FC<StepperProps>;
+export default Stepper;

package/dist/react/Stepper/Stepper.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+
+/**
+ * ATTRUS Stepper — typed wrapper over the canonical `.stepper` flow
+ * indicator (preview/components/stepper.css). States: todo / current /
+ * done / error / skipped. Orientations: horizontal (default), vertical.
+ * Density: compact. Minimal: rule (4px capsule, mono labels).
+ */
+
+export type StepState = 'todo' | 'current' | 'done' | 'error' | 'skipped';
+
+export interface StepItem {
+  key: string;
+  label: React.ReactNode;
+  help?: React.ReactNode;
+  state?: StepState;
+}
+
+export interface StepperProps extends React.OlHTMLAttributes<HTMLOListElement> {
+  steps: StepItem[];
+  vertical?: boolean;
+  compact?: boolean;
+  /** Minimal capsule+label variant (.is-rule) for tight headers. */
+  rule?: boolean;
+  /** ≤640px: hide labels, keep markers (.is-collapse-sm). */
+  collapseOnMobile?: boolean;
+  /** Step click (e.g. jump back to a done step). */
+  onStepClick?: (key: string) => void;
+}
+
+const CheckGlyph: React.FC = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+);
+const XGlyph: React.FC = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>
+);
+
+export const Stepper: React.FC<StepperProps> = ({
+  steps,
+  vertical = false,
+  compact = false,
+  rule = false,
+  collapseOnMobile = false,
+  onStepClick,
+  className,
+  ...rest
+}) => {
+  const cls = [
+    'stepper',
+    vertical ? 'is-vertical' : '',
+    compact ? 'is-compact' : '',
+    rule ? 'is-rule' : '',
+    collapseOnMobile ? 'is-collapse-sm' : '',
+    className || '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <ol className={cls} {...rest}>
+      {steps.map((s, i) => {
+        const state = s.state || 'todo';
+        const stepCls = ['step', state !== 'todo' ? `is-${state}` : ''].filter(Boolean).join(' ');
+        const marker =
+          state === 'done' ? <CheckGlyph /> : state === 'error' ? <XGlyph /> : <span>{i + 1}</span>;
+        const clickable = onStepClick && (state === 'done' || state === 'error');
+        return (
+          <li key={s.key} className={stepCls} aria-current={state === 'current' ? 'step' : undefined}>
+            <span
+              className="step-marker"
+              role={clickable ? 'button' : undefined}
+              tabIndex={clickable ? 0 : undefined}
+              style={clickable ? { cursor: 'pointer' } : undefined}
+              onClick={clickable ? () => onStepClick!(s.key) : undefined}
+            >
+              {marker}
+            </span>
+            <span className="step-body">
+              <span className="step-label">{s.label}</span>
+              {s.help != null ? <span className="step-help">{s.help}</span> : null}
+            </span>
+          </li>
+        );
+      })}
+    </ol>
+  );
+};
+
+export default Stepper;

package/dist/react/Tabs/Tabs.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+export interface TabItem {
+  /** Stable identity — also what onChange receives. */
+  key: string;
+  /** Label. Strings get the bold-width reservation (no reflow on select). */
+  label: React.ReactNode;
+  /** Optional count badge (.tab-count). */
+  count?: number | string;
+  /** Icon-only segment (`.tab.is-icon`, pill variant) — label becomes aria-label; pass the glyph here. */
+  icon?: React.ReactNode;
+  disabled?: boolean;
+}
+
+export type TabsVariant = 'underline' | 'pill';
+export type TabsSize = 'sm' | 'md' | 'lg';
+export type TabsLayout = 'auto' | 'block' | 'equal' | 'scroll';
+
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  items: TabItem[];
+  /** Key of the selected tab (controlled). */
+  value: string;
+  onChange?: (key: string) => void;
+  variant?: TabsVariant;
+  size?: TabsSize;
+  layout?: TabsLayout;
+  /** Sliding indicator (`.is-animated` + `.tab-indicator`), ON by default; false = static indicator. */
+  animated?: boolean;
+}
+
+export declare const Tabs: React.FC<TabsProps>;
+export default Tabs;

package/dist/react/Tabs/Tabs.tsx

@@ -0,0 +1,147 @@
+import * as React from 'react';
+
+/**
+ * ATTRUS Tabs — typed wrapper over the canonical `.tabs` system
+ * (preview/components/tabs.css). CSS stays the visual source of truth.
+ *
+ * Variants: underline (default) | pill (segmented control).
+ * Sizes: sm | md (default) | lg (lg steps down to md on mobile via CSS).
+ * Layout: auto (content-sized) | block (full-width, equal columns) |
+ *         equal (equal columns, content width) | scroll (force h-scroll).
+ * Animated BY DEFAULT: sliding indicator (underline → bar, pill → lifted
+ * surface) wired via `.is-animated` + `--ind-x/--ind-w`; pass
+ * animated={false} to opt out (static per-tab indicator).
+ * Mobile: underline rows scroll horizontally by default; the pill shell
+ * fills the row and scrolls internally — both handled by the CSS.
+ */
+
+export interface TabItem {
+  /** Stable identity — also what onChange receives. */
+  key: string;
+  /** Label. Strings get the bold-width reservation (no reflow on select). */
+  label: React.ReactNode;
+  /** Optional count badge (.tab-count). */
+  count?: number | string;
+  /** Icon-only segment (`.tab.is-icon`, pill variant) — label becomes aria-label; pass the glyph here. */
+  icon?: React.ReactNode;
+  disabled?: boolean;
+}
+
+export type TabsVariant = 'underline' | 'pill';
+export type TabsSize = 'sm' | 'md' | 'lg';
+export type TabsLayout = 'auto' | 'block' | 'equal' | 'scroll';
+
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  items: TabItem[];
+  /** Key of the selected tab (controlled). */
+  value: string;
+  onChange?: (key: string) => void;
+  variant?: TabsVariant;
+  size?: TabsSize;
+  layout?: TabsLayout;
+  /** Sliding indicator (`.is-animated` + `.tab-indicator`): underline → sliding bar,
+   *  pill → sliding lifted surface. ON by default; pass false for the static indicator.
+   *  Positioning JS (--ind-x/--ind-w + resize) is wired here. */
+  animated?: boolean;
+}
+
+const LAYOUT_CLASS: Record<TabsLayout, string> = {
+  auto: '',
+  block: 'is-block',
+  equal: 'is-equal',
+  scroll: 'is-scroll',
+};
+
+export const Tabs: React.FC<TabsProps> = ({
+  items,
+  value,
+  onChange,
+  variant = 'underline',
+  size = 'md',
+  layout = 'auto',
+  animated = true,
+  className,
+  ...rest
+}) => {
+  const listRef = React.useRef<HTMLDivElement>(null);
+
+  // .is-animated contract: set --ind-x/--ind-w from the active tab; recompute on resize.
+  React.useLayoutEffect(() => {
+    if (!animated) return;
+    const list = listRef.current;
+    if (!list) return;
+    const position = () => {
+      const active = list.querySelector<HTMLElement>('.tab[aria-selected="true"]');
+      if (!active) return;
+      list.style.setProperty('--ind-x', active.offsetLeft + 'px');
+      list.style.setProperty('--ind-w', active.offsetWidth + 'px');
+    };
+    position();
+    const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(position) : null;
+    ro?.observe(list);
+    // Late font load changes tab widths without resizing a fixed-width list —
+    // reposition once webfonts settle so the indicator never sits misaligned.
+    if (typeof document !== 'undefined' && (document as Document & { fonts?: { ready: Promise<unknown> } }).fonts) {
+      (document as Document & { fonts: { ready: Promise<unknown> } }).fonts.ready.then(position).catch(() => undefined);
+    }
+    return () => ro?.disconnect();
+  }, [animated, value, items]);
+
+  const cls = [
+    'tabs',
+    variant === 'pill' ? 'tabs-pill' : '',
+    size !== 'md' ? `tabs-${size}` : '',
+    LAYOUT_CLASS[layout],
+    animated ? 'is-animated' : '',
+    className || '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div ref={listRef} className={cls} role="tablist" {...rest}>
+      {items.map((it) => (
+        <button
+          key={it.key}
+          type="button"
+          role="tab"
+          className={it.icon != null ? 'tab is-icon' : 'tab'}
+          aria-selected={value === it.key}
+          aria-label={it.icon != null && typeof it.label === 'string' ? it.label : undefined}
+          tabIndex={value === it.key ? 0 : -1}
+          disabled={it.disabled}
+          onClick={() => {
+            if (!it.disabled && onChange) onChange(it.key);
+          }}
+          onKeyDown={(e) => {
+            // Roving focus — ←/→ move between tabs, wrapping; Home/End jump.
+            if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight' && e.key !== 'Home' && e.key !== 'End') return;
+            e.preventDefault();
+            const enabled = items.filter((x) => !x.disabled);
+            if (!enabled.length) return;
+            const idx = enabled.findIndex((x) => x.key === it.key);
+            let next = idx;
+            if (e.key === 'ArrowRight') next = (idx + 1) % enabled.length;
+            else if (e.key === 'ArrowLeft') next = (idx - 1 + enabled.length) % enabled.length;
+            else if (e.key === 'Home') next = 0;
+            else next = enabled.length - 1;
+            const btns = listRef.current?.querySelectorAll<HTMLButtonElement>('.tab:not([disabled])');
+            btns?.[next]?.focus();
+          }}
+        >
+          {it.icon != null ? (
+            it.icon
+          ) : (
+            <span className="tab-label" data-label={typeof it.label === 'string' ? it.label : undefined}>
+              {it.label}
+            </span>
+          )}
+          {it.icon == null && it.count != null ? <span className="tab-count">{it.count}</span> : null}
+        </button>
+      ))}
+      {animated ? <span className="tab-indicator" aria-hidden="true" /> : null}
+    </div>
+  );
+};
+
+export default Tabs;

package/dist/react/Toast/Toast.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+export type ToastTone = 'success' | 'warning' | 'danger' | 'info' | 'brand' | 'inverse';
+export type ToastStackPosition = 'tr' | 'tl' | 'tc' | 'br' | 'bl' | 'bc';
+
+export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
+  tone?: ToastTone;
+  /** Leading icon slot (.toast-icon). */
+  icon?: React.ReactNode;
+  /** Bold first line. */
+  title?: React.ReactNode;
+  /** Inline action link (.toast-action). */
+  action?: React.ReactNode;
+  onActionClick?: () => void;
+  /** Renders the × and calls back. */
+  onClose?: () => void;
+  /** Auto-dismiss countdown hairline (.toast-progress). */
+  progress?: boolean;
+  /** Exit animation hook (.is-leaving) — set just before removal. */
+  leaving?: boolean;
+}
+
+export interface ToastStackProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Corner: tr (default) · tl · tc · br · bl · bc. */
+  position?: ToastStackPosition;
+}
+
+export declare const Toast: React.FC<ToastProps>;
+export declare const ToastStack: React.FC<ToastStackProps>;
+export default Toast;