@attrus-ds/core 0.1.1 → 0.2.0

package/dist/react/Modal/Modal.tsx

@@ -0,0 +1,173 @@
+import * as React from 'react';
+
+/**
+ * ATTRUS Modal — typed wrapper over the canonical `.modal` + `.scrim`
+ * (preview/components/overlays.css). Centered dialog with header/body/
+ * footer, sizes sm→xl and the destructive variant (top accent strip).
+ *
+ * Open/close: mount with open=true; an internal flag flips `.is-open`
+ * a tick later via setTimeout (NOT requestAnimationFrame — rAF is
+ * throttled in background tabs and the overlay would stay invisible).
+ * Esc and scrim-click call onClose. Exit: on open=false the dialog stays
+ * mounted for the exit transition (fade + slide, --duration-base = 200ms)
+ * and only then unmounts — closing mirrors opening.
+ */
+
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export interface ModalProps {
+  open: boolean;
+  onClose?: () => void;
+  size?: ModalSize;
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  /** Icon tile above the title (destructive confirmations). */
+  icon?: React.ReactNode;
+  /** Danger accent strip + icon tint (.modal-destructive). */
+  destructive?: boolean;
+  /** Footer row (.modal-footer) — canonical Buttons, right-aligned. */
+  footer?: React.ReactNode;
+  /** Left-side footer aux content (enables space-between). */
+  footerAux?: React.ReactNode;
+  /** Gallery/doc rendering: panel only (no scrim), overlay behaviours off
+      (focus trap, scroll-lock, Esc). Position it inside a relative frame. */
+  static?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+const XGlyph: React.FC = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="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 Modal: React.FC<ModalProps> = ({
+  open,
+  onClose,
+  size = 'md',
+  title,
+  subtitle,
+  icon,
+  destructive = false,
+  footer,
+  footerAux,
+  static: isStatic = false,
+  children,
+  className,
+}) => {
+  const [shown, setShown] = React.useState(false);
+  const [mounted, setMounted] = React.useState(open);
+  const panelRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (open) {
+      setMounted(true);
+      return undefined;
+    }
+    // Closing: drop .is-open → CSS exit transition plays → unmount after.
+    setShown(false);
+    const t = setTimeout(() => setMounted(false), 200);
+    return () => clearTimeout(t);
+  }, [open]);
+
+  // Entry: commit the CLOSED state, force a layout flush, then flip
+  // .is-open — the fade+slide entry plays deterministically (a bare
+  // 10ms timer raced the first style calc and often skipped it).
+  React.useEffect(() => {
+    if (!open || !mounted || shown) return;
+    void panelRef.current?.offsetHeight;
+    setShown(true);
+  }, [open, mounted, shown]);
+
+  React.useEffect(() => {
+    if (!open || isStatic) return undefined;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && onClose) onClose();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [open, onClose, isStatic]);
+
+  // Body scroll-lock while open (doc a11y contract).
+  React.useEffect(() => {
+    if (!open || !mounted || isStatic) return undefined;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => { document.body.style.overflow = prev; };
+  }, [open, mounted, isStatic]);
+
+  // Focus: into the dialog on open, restore the opener on close; Tab cycles.
+  const prevFocus = React.useRef<HTMLElement | null>(null);
+  React.useEffect(() => {
+    if (isStatic) return;
+    if (shown) {
+      prevFocus.current = document.activeElement as HTMLElement | null;
+      const first = panelRef.current?.querySelector<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      (first || panelRef.current)?.focus?.();
+    } else if (prevFocus.current) {
+      prevFocus.current.focus?.();
+      prevFocus.current = null;
+    }
+  }, [shown]);
+
+  const onTrapKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key !== 'Tab' || !panelRef.current) return;
+    const focusables = Array.from(
+      panelRef.current.querySelectorAll<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )
+    ).filter((el) => !el.hasAttribute('disabled'));
+    if (!focusables.length) return;
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
+  };
+
+  if (!mounted) return null;
+
+  const cls = [
+    'modal',
+    `modal-${size}`,
+    destructive ? 'modal-destructive' : '',
+    shown ? 'is-open' : '',
+    className || '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <React.Fragment>
+      {isStatic ? null : <div className={['scrim', shown ? 'is-open' : ''].filter(Boolean).join(' ')} onClick={onClose} />}
+      <div ref={panelRef} className={cls} role="dialog" aria-modal="true" tabIndex={-1} onKeyDown={onTrapKeyDown}>
+        {title != null || subtitle != null || onClose ? (
+          <div className="modal-header">
+            <div className="modal-header-text">
+              {icon != null ? <span className="modal-icon">{icon}</span> : null}
+              {title != null ? <div className="modal-title">{title}</div> : null}
+              {subtitle != null ? <div className="modal-subtitle">{subtitle}</div> : null}
+            </div>
+            {onClose ? (
+              <button type="button" className="modal-close" aria-label="Close" onClick={onClose}>
+                <XGlyph />
+              </button>
+            ) : null}
+          </div>
+        ) : null}
+        {children != null ? <div className="modal-body">{children}</div> : null}
+        {footer != null ? (
+          <div className={['modal-footer', footerAux != null ? 'modal-footer-spread' : ''].filter(Boolean).join(' ')}>
+            {footerAux != null ? <div className="modal-footer-aux">{footerAux}</div> : null}
+            {footer}
+          </div>
+        ) : null}
+      </div>
+    </React.Fragment>
+  );
+};
+
+export default Modal;

package/dist/react/NumberInput/NumberInput.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+export type NumberInputSize = 'sm' | 'md' | 'lg';
+
+export interface NumberInputProps {
+  value: number;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  size?: NumberInputSize;
+  /** Static cell before the field (e.g. "$"). */
+  prefix?: React.ReactNode;
+  /** Static cell after the field (e.g. "%", "days"). */
+  suffix?: React.ReactNode;
+  disabled?: boolean;
+  invalid?: boolean;
+  'aria-label'?: string;
+  id?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export declare const NumberInput: React.FC<NumberInputProps>;
+export default NumberInput;

package/dist/react/NumberInput/NumberInput.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+
+/**
+ * ATTRUS NumberInput — typed wrapper over the canonical `.number-input`
+ * (preview/components/number-input.css): − / + accelerator buttons
+ * around a numeric field. For bounded quantities (counts, %, days).
+ */
+
+export type NumberInputSize = 'sm' | 'md' | 'lg';
+
+export interface NumberInputProps {
+  value: number;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  size?: NumberInputSize;
+  /** Static cell before the field (e.g. "$"). */
+  prefix?: React.ReactNode;
+  /** Static cell after the field (e.g. "%", "days"). */
+  suffix?: React.ReactNode;
+  disabled?: boolean;
+  invalid?: boolean;
+  'aria-label'?: string;
+  id?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const Minus: React.FC = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.4} strokeLinecap="round" aria-hidden="true">
+    <line x1="5" y1="12" x2="19" y2="12" />
+  </svg>
+);
+const Plus: React.FC = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.4} strokeLinecap="round" aria-hidden="true">
+    <line x1="12" y1="5" x2="12" y2="19" />
+    <line x1="5" y1="12" x2="19" y2="12" />
+  </svg>
+);
+
+function clamp(v: number, min?: number, max?: number): number {
+  if (min != null && v < min) return min;
+  if (max != null && v > max) return max;
+  return v;
+}
+
+export const NumberInput: React.FC<NumberInputProps> = ({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  size = 'md',
+  prefix,
+  suffix,
+  disabled = false,
+  invalid = false,
+  className,
+  style,
+  ...rest
+}) => {
+  const cls = [
+    'number-input',
+    size !== 'md' ? `number-input-${size}` : '',
+    disabled ? 'is-disabled' : '',
+    invalid ? 'is-invalid' : '',
+    className || '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const set = (v: number) => {
+    if (!disabled && onChange) onChange(clamp(v, min, max));
+  };
+
+  return (
+    <div className={cls} style={style}>
+      <button
+        type="button"
+        className="number-input-btn"
+        aria-label="Decrease"
+        disabled={disabled || (min != null && value <= min)}
+        onClick={() => set(value - step)}
+      >
+        <Minus />
+      </button>
+      {prefix != null ? <span className="number-input-prefix">{prefix}</span> : null}
+      <input
+        type="number"
+        className="number-input-field"
+        value={value}
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        onChange={(e) => {
+          const v = parseFloat(e.target.value);
+          if (!isNaN(v)) set(v);
+        }}
+        {...rest}
+      />
+      {suffix != null ? <span className="number-input-suffix">{suffix}</span> : null}
+      <button
+        type="button"
+        className="number-input-btn"
+        aria-label="Increase"
+        disabled={disabled || (max != null && value >= max)}
+        onClick={() => set(value + step)}
+      >
+        <Plus />
+      </button>
+    </div>
+  );
+};
+
+export default NumberInput;

package/dist/react/Pill/Pill.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+export type PillTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'brand';
+export type PillSize = 'sm' | 'md' | 'lg';
+export type PillAppearance = 'soft' | 'solid' | 'outline';
+
+export interface PillProps extends React.HTMLAttributes<HTMLElement> {
+  /** Semantic tone. Variant carries meaning; label is required. Default: 'neutral'. */
+  tone?: PillTone;
+  /** sm=20px, md=24px (default), lg=28px. */
+  size?: PillSize;
+  /** soft (tinted, default) | solid (filled) | outline (transparent bg). */
+  appearance?: PillAppearance;
+  /** Leading status dot (decorative — meaning lives in label + tone). */
+  dot?: boolean;
+  /** Leading icon slot. */
+  icon?: React.ReactNode;
+  /** Renders a <button> with hover/focus/selected states (filter chips). */
+  interactive?: boolean;
+  /** Selected state for interactive pills (sets aria-pressed). */
+  selected?: boolean;
+  /** Glassy translucent treatment for dark surfaces. */
+  onInverse?: boolean;
+  /** Renders the trailing close (×) — `.pill-x` — and calls back on click (removable filter chips). */
+  onRemove?: (e: React.MouseEvent) => void;
+  /** Dimmed, non-interactive. */
+  disabled?: boolean;
+}
+
+export declare const Pill: React.FC<PillProps>;
+export default Pill;

package/dist/react/Pill/Pill.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+
+/**
+ * ATTRUS Pill — typed wrapper over the canonical `.pill` system
+ * (preview/components/status-pills.css). CSS stays the visual source
+ * of truth; this component only composes class names.
+ */
+
+export type PillTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'brand';
+export type PillSize = 'sm' | 'md' | 'lg';
+export type PillAppearance = 'soft' | 'solid' | 'outline';
+
+export interface PillProps extends React.HTMLAttributes<HTMLElement> {
+  /** Semantic tone. Variant carries meaning; label is required. Default: 'neutral'. */
+  tone?: PillTone;
+  /** sm=20px, md=24px (default), lg=28px. */
+  size?: PillSize;
+  /** soft (tinted, default) | solid (filled) | outline (transparent bg). */
+  appearance?: PillAppearance;
+  /** Leading status dot (decorative — meaning lives in label + tone). */
+  dot?: boolean;
+  /** Leading icon slot. */
+  icon?: React.ReactNode;
+  /** Renders a <button> with hover/focus/selected states (filter chips). */
+  interactive?: boolean;
+  /** Selected state for interactive pills (sets aria-pressed). */
+  selected?: boolean;
+  /** Glassy translucent treatment for dark surfaces. */
+  onInverse?: boolean;
+  /** Renders the trailing close (×) — `.pill-x` — and calls back on click (removable filter chips). */
+  onRemove?: (e: React.MouseEvent) => void;
+  /** Dimmed, non-interactive. */
+  disabled?: boolean;
+}
+
+export const Pill: React.FC<PillProps> = ({
+  tone = 'neutral',
+  size = 'md',
+  appearance = 'soft',
+  dot = false,
+  icon,
+  interactive = false,
+  selected = false,
+  onInverse = false,
+  onRemove,
+  disabled = false,
+  className,
+  children,
+  ...rest
+}) => {
+  const cls = [
+    'pill',
+    tone,
+    size !== 'md' ? size : '',
+    appearance !== 'soft' ? appearance : '',
+    interactive ? 'interactive' : '',
+    onInverse ? 'on-inverse' : '',
+    className || '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const content = (
+    <React.Fragment>
+      {dot ? <span className="dot" /> : null}
+      {icon}
+      {children != null ? <span className="pill-label">{children}</span> : null}
+      {onRemove ? (
+        <span
+          className="pill-x"
+          role="button"
+          tabIndex={0}
+          aria-label="Remove"
+          onClick={(e) => { e.stopPropagation(); onRemove(e); }}
+          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); onRemove(e as unknown as React.MouseEvent); } }}
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>
+        </span>
+      ) : null}
+    </React.Fragment>
+  );
+
+  if (interactive) {
+    return (
+      <button
+        type="button"
+        className={cls}
+        aria-pressed={selected}
+        disabled={disabled}
+        {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+      >
+        {content}
+      </button>
+    );
+  }
+
+  return (
+    <span className={cls} aria-disabled={disabled || undefined} {...rest}>
+      {content}
+    </span>
+  );
+};
+
+export default Pill;

package/dist/react/SearchPill/SearchPill.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+export interface SearchPillProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /** Keyboard hint rendered as a .kbd chip (e.g. "⌘K"). */
+  shortcut?: string;
+  /** Leading icon — defaults to the canonical search glyph. */
+  icon?: React.ReactNode;
+  /** Wrapper (pill) className/style — the input itself fills it. */
+  wrapperClassName?: string;
+  wrapperStyle?: React.CSSProperties;
+}
+
+export declare const SearchPill: React.FC<SearchPillProps>;
+export default SearchPill;

package/dist/react/SearchPill/SearchPill.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+/**
+ * ATTRUS SearchPill — typed wrapper over the canonical `.pill-search`
+ * (preview/components/inputs.css): leading icon + borderless input +
+ * optional .kbd shortcut hint. The ⌘K-style global search bar.
+ */
+
+export interface SearchPillProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /** Keyboard hint rendered as a .kbd chip (e.g. "⌘K"). */
+  shortcut?: string;
+  /** Leading icon — defaults to the canonical search glyph. */
+  icon?: React.ReactNode;
+  /** Wrapper (pill) className/style — the input itself fills it. */
+  wrapperClassName?: string;
+  wrapperStyle?: React.CSSProperties;
+}
+
+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 SearchPill: React.FC<SearchPillProps> = ({
+  shortcut,
+  icon,
+  wrapperClassName,
+  wrapperStyle,
+  ...rest
+}) => (
+  <div className={['pill-search', wrapperClassName || ''].filter(Boolean).join(' ')} style={wrapperStyle}>
+    {icon != null ? icon : <SearchGlyph />}
+    <input type="search" {...rest} />
+    {shortcut ? <span className="kbd">{shortcut}</span> : null}
+  </div>
+);
+
+export default SearchPill;

package/dist/react/SmartSearch/SmartSearch.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+
+export interface SSItem {
+  key: string;
+  /** Leading 28px tile glyph (`.icon-leading`). */
+  icon?: React.ReactNode;
+  title: React.ReactNode;
+  /** Muted second line (`.text .meta`). */
+  sub?: React.ReactNode;
+  /** Right-aligned mono hint (id). */
+  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 — `.ss-chips`). */
+  chips?: Array<{ key: string; icon?: React.ReactNode; label: React.ReactNode }>;
+  onChipClick?: (key: string) => void;
+  /** Grouped result rows (`.ss-section` + `.ss-list`). */
+  sections?: SSSection[];
+  onSelect?: (key: string) => void;
+  /** "RESULTS (N)" line above the list (`.ss-result-label`). */
+  resultLabel?: React.ReactNode;
+  /** Tip card — similar match / ID format hint (`.ss-hint`). */
+  hint?: React.ReactNode;
+  /** ID-disambiguation buttons (`.ss-typebtns`). */
+  typeButtons?: SSTypeButton[];
+  onTypeSelect?: (key: string) => void;
+  /** No-results state (`.ss-illo`). */
+  empty?: { title: React.ReactNode; sub?: React.ReactNode; illo?: React.ReactNode };
+  /** Skeleton rows while fetching (`.ss-skeleton`). */
+  loading?: boolean;
+  /** Fetch failed — retry. */
+  error?: { title: React.ReactNode; sub?: React.ReactNode; retryLabel?: React.ReactNode; onRetry?: () => void; illo?: React.ReactNode };
+  /** Kbd hint footer (`.ss-foot`). Default: true when the popover has content. */
+  footer?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  'aria-label'?: string;
+}
+
+export declare const SmartSearch: React.FC<SmartSearchProps>;
+export default SmartSearch;