@attrus-ds/core 0.1.0 → 0.2.0

package/dist/react/Card/Card.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+
+/**
+ * ATTRUS Card — typed wrapper over the canonical `.card` system
+ * (preview/components/cards.css). CSS stays the visual source of truth.
+ *
+ * Slots: compose with <CardHeader/>, <CardBody/>, <CardFooter/>,
+ * <CardCanvas/>, <CardDivider/> — the CSS `:has()` rules drop the base
+ * padding automatically when slots are present (each slot pads itself).
+ */
+
+export type CardVariant = 'default' | 'flat' | 'subtle' | 'sunken' | 'raised' | 'floating' | 'hero' | 'inverse';
+export type CardAccent = 'success' | 'warning' | 'danger' | 'info';
+export type CardDensity = 'compact' | 'default' | 'spacious';
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Surface role. Default: surface + hairline + xs shadow. */
+  variant?: CardVariant;
+  /** Semantic banner tint (success/warning/danger/info). */
+  accent?: CardAccent;
+  /** Padding density for the card and its slots. */
+  density?: CardDensity;
+  /** Clip children to the rounded corners (tables, images). */
+  clip?: boolean;
+  /** Hover/press affordance (`.card.interactive`) — wrap the card in an <a>/<button>, or pass onClick. */
+  interactive?: boolean;
+}
+
+export const Card: React.FC<CardProps> = ({
+  variant = 'default',
+  accent,
+  density = 'default',
+  clip = false,
+  interactive = false,
+  className,
+  style,
+  children,
+  ...rest
+}) => {
+  const cls = [
+    'card',
+    variant !== 'default' ? variant : '',
+    accent ? `accent-${accent}` : '',
+    density !== 'default' ? density : '',
+    interactive ? 'interactive' : '',
+    className || '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+  return (
+    <div className={cls} style={clip ? { overflow: 'hidden', ...style } : style} {...rest}>
+      {children}
+    </div>
+  );
+};
+
+export interface CardSlotProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const CardHeader: React.FC<CardSlotProps> = ({ className, ...rest }) => (
+  <div className={['card-header', className || ''].filter(Boolean).join(' ')} {...rest} />
+);
+export const CardBody: React.FC<CardSlotProps> = ({ className, ...rest }) => (
+  <div className={['card-body', className || ''].filter(Boolean).join(' ')} {...rest} />
+);
+export const CardFooter: React.FC<CardSlotProps> = ({ className, ...rest }) => (
+  <div className={['card-footer', className || ''].filter(Boolean).join(' ')} {...rest} />
+);
+export const CardCanvas: React.FC<CardSlotProps> = ({ className, ...rest }) => (
+  <div className={['card-canvas', className || ''].filter(Boolean).join(' ')} {...rest} />
+);
+export const CardDivider: React.FC<CardSlotProps> = ({ className, ...rest }) => (
+  <div className={['card-divider', className || ''].filter(Boolean).join(' ')} {...rest} />
+);
+
+/** KPI/stat layout inside a card — `.card-stat` (mono label, bold value, tinted delta). */
+export interface CardStatProps extends React.HTMLAttributes<HTMLDivElement> {
+  label: React.ReactNode;
+  value: React.ReactNode;
+  /** Delta text, e.g. "+8.2%". */
+  delta?: React.ReactNode;
+  /** Direction tints the delta: up=success, down=danger, flat=muted. Default: 'flat'. */
+  deltaDirection?: 'up' | 'down' | 'flat';
+}
+export const CardStat: React.FC<CardStatProps> = ({ label, value, delta, deltaDirection = 'flat', className, children, ...rest }) => (
+  <div className={['card-stat', className || ''].filter(Boolean).join(' ')} {...rest}>
+    <span className="stat-label">{label}</span>
+    <span className="stat-value">{value}</span>
+    {delta != null ? <span className={`stat-delta ${deltaDirection}`}>{delta}</span> : null}
+    {children}
+  </div>
+);
+
+export default Card;

package/dist/react/Combobox/Combobox.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+export interface ComboOption {
+  value: string;
+  label: React.ReactNode;
+  /** Secondary line under the label. */
+  meta?: React.ReactNode;
+  /** Right-aligned mono hint (e.g. a code). */
+  trailing?: React.ReactNode;
+  /** Optional group header this option sits under. */
+  group?: string;
+  /** Non-selectable (`.is-disabled`). */
+  disabled?: boolean;
+  /** Text used by the search filter when label isn't a plain string. */
+  searchText?: string;
+}
+
+export type ComboboxStatus = 'default' | 'error';
+
+export interface ComboboxProps {
+  options: ComboOption[];
+  value?: string | null;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  /** Shows the search header inside the popover. */
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  /** Trigger leading icon (`.combobox-trigger-icon`). */
+  icon?: React.ReactNode;
+  /** Validation state — error ring on the trigger (`.combobox.is-invalid` on the wrapper). */
+  status?: ComboboxStatus;
+  /** Filter-chip row inside the popover (`.combobox-filters`). */
+  filters?: React.ReactNode;
+  /** Results meta line above the list (`.combobox-meta`). */
+  meta?: React.ReactNode;
+  /** Muted meta line below the list (`.combobox-foot-meta`). */
+  footMeta?: React.ReactNode;
+  /** Popover starts open (galleries/docs). */
+  defaultOpen?: boolean;
+  /** Footer action (e.g. "Create new counterparty"). */
+  footer?: React.ReactNode;
+  onFooterClick?: () => void;
+  emptyTitle?: React.ReactNode;
+  emptySub?: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  'aria-label'?: string;
+}
+
+export declare const Combobox: React.FC<ComboboxProps>;
+export default Combobox;

package/dist/react/Combobox/Combobox.tsx

@@ -0,0 +1,254 @@
+import * as React from 'react';
+
+/**
+ * ATTRUS Combobox — typed wrapper over the canonical `.combobox`
+ * (preview/components/combobox.css): trigger + popover listbox with
+ * filterable options, groups, metas, selected check and footer action.
+ */
+
+export interface ComboOption {
+  value: string;
+  label: React.ReactNode;
+  /** Secondary line under the label. */
+  meta?: React.ReactNode;
+  /** Right-aligned mono hint (e.g. a code). */
+  trailing?: React.ReactNode;
+  /** Optional group header this option sits under. */
+  group?: string;
+  /** Non-selectable (`.is-disabled`). */
+  disabled?: boolean;
+  /** Text used by the search filter when label isn't a plain string. */
+  searchText?: string;
+}
+
+export type ComboboxStatus = 'default' | 'error';
+
+export interface ComboboxProps {
+  options: ComboOption[];
+  value?: string | null;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  /** Shows the search header inside the popover. */
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  /** Trigger leading icon (`.combobox-trigger-icon`). */
+  icon?: React.ReactNode;
+  /** Validation state — error ring on the trigger (`.is-invalid`). */
+  status?: ComboboxStatus;
+  /** Filter-chip row inside the popover (`.combobox-filters`) — use `.combobox-filter-chip` buttons. */
+  filters?: React.ReactNode;
+  /** Results meta line above the list (`.combobox-meta`), e.g. "Results (21)". */
+  meta?: React.ReactNode;
+  /** Muted meta line below the list (`.combobox-foot-meta`). */
+  footMeta?: React.ReactNode;
+  /** Popover starts open (galleries/docs). */
+  defaultOpen?: boolean;
+  /** Footer action (e.g. "Create new counterparty"). */
+  footer?: React.ReactNode;
+  onFooterClick?: () => void;
+  emptyTitle?: React.ReactNode;
+  emptySub?: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  'aria-label'?: string;
+}
+
+const Chevron: React.FC = () => (
+  <svg className="combobox-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="m6 9 6 6 6-6" />
+  </svg>
+);
+const Check: React.FC = () => (
+  <svg className="combobox-option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+);
+
+function optionText(o: ComboOption): string {
+  if (o.searchText) return o.searchText;
+  return typeof o.label === 'string' ? o.label : String(o.value);
+}
+
+export const Combobox: React.FC<ComboboxProps> = ({
+  options,
+  value = null,
+  onChange,
+  placeholder = 'Select…',
+  searchable = false,
+  searchPlaceholder = 'Search…',
+  icon,
+  status = 'default',
+  filters,
+  meta,
+  footMeta,
+  defaultOpen = false,
+  footer,
+  onFooterClick,
+  emptyTitle = 'No matches',
+  emptySub,
+  disabled = false,
+  className,
+  style,
+  ...rest
+}) => {
+  const [open, setOpen] = React.useState(defaultOpen);
+  const [q, setQ] = React.useState('');
+  const [active, setActive] = React.useState<string | null>(null);
+  const wrapRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (!open) return;
+    const onDoc = (e: MouseEvent) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('mousedown', onDoc);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDoc);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  const selected = options.find((o) => o.value === value) || null;
+  const filtered = q
+    ? options.filter((o) => optionText(o).toLowerCase().indexOf(q.toLowerCase()) !== -1)
+    : options;
+  const selectable = filtered.filter((o) => !o.disabled);
+
+  // Keyboard nav — wrapper-level so it works from the trigger AND the search
+  // input. Arrow keys move `.is-active`; Enter commits the active option.
+  const onWrapKeyDown = (e: React.KeyboardEvent) => {
+    if (!open || !selectable.length) return;
+    const idx = selectable.findIndex((o) => o.value === active);
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      const next = e.key === 'ArrowDown'
+        ? selectable[Math.min(idx + 1, selectable.length - 1)]
+        : selectable[Math.max(idx - 1, 0)];
+      setActive(next.value);
+      const list = wrapRef.current?.querySelector('.combobox-list');
+      const el = list?.querySelector(`[data-value="${next.value}"]`) as HTMLElement | null;
+      if (list && el) {
+        const lt = (list as HTMLElement).scrollTop;
+        const lb = lt + (list as HTMLElement).clientHeight;
+        if (el.offsetTop < lt) (list as HTMLElement).scrollTop = el.offsetTop;
+        else if (el.offsetTop + el.offsetHeight > lb) (list as HTMLElement).scrollTop = el.offsetTop + el.offsetHeight - (list as HTMLElement).clientHeight;
+      }
+    } else if (e.key === 'Enter') {
+      const hit = selectable.find((o) => o.value === active);
+      if (hit) {
+        e.preventDefault();
+        if (onChange) onChange(hit.value);
+        setOpen(false);
+        setQ('');
+      }
+    }
+  };
+
+  // group-preserving render order
+  const rendered: React.ReactNode[] = [];
+  let lastGroup: string | undefined;
+  filtered.forEach((o) => {
+    if (o.group && o.group !== lastGroup) {
+      rendered.push(
+        <li key={`g-${o.group}`} className="combobox-group-label">
+          {o.group}
+        </li>
+      );
+      lastGroup = o.group;
+    }
+    const isSel = o.value === value;
+    rendered.push(
+      <li
+        key={o.value}
+        data-value={o.value}
+        className={['combobox-option', isSel ? 'is-selected' : '', o.value === active ? 'is-active' : '', o.disabled ? 'is-disabled' : ''].filter(Boolean).join(' ')}
+        role="option"
+        aria-selected={isSel}
+        aria-disabled={o.disabled || undefined}
+        onMouseEnter={() => { if (!o.disabled) setActive(o.value); }}
+        onClick={() => {
+          if (o.disabled) return;
+          if (onChange) onChange(o.value);
+          setOpen(false);
+          setQ('');
+        }}
+      >
+        <span className="combobox-option-content">
+          <span className="combobox-option-label">{o.label}</span>
+          {o.meta != null ? <span className="combobox-option-meta">{o.meta}</span> : null}
+        </span>
+        {o.trailing != null ? <span className="combobox-option-trailing">{o.trailing}</span> : null}
+        <Check />
+      </li>
+    );
+  });
+
+  return (
+    <div
+      ref={wrapRef}
+      className={['combobox', open ? 'is-open' : '', status === 'error' ? 'is-invalid' : '', className || ''].filter(Boolean).join(' ')}
+      style={style}
+      onKeyDown={onWrapKeyDown}
+    >
+      <button
+        type="button"
+        className="combobox-trigger"
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        disabled={disabled}
+        onClick={() => { setOpen((o) => !o); setActive(value); }}
+        {...rest}
+      >
+        {icon != null ? <span className="combobox-trigger-icon">{icon}</span> : null}
+        <span className="combobox-value">
+          {selected ? selected.label : <span className="combobox-placeholder">{placeholder}</span>}
+        </span>
+        <Chevron />
+      </button>
+      {open ? (
+        <div className="combobox-popover">
+          {searchable ? (
+            <div className="combobox-search">
+              <svg className="combobox-search-icon" 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>
+              <input
+                autoFocus
+                placeholder={searchPlaceholder}
+                value={q}
+                onChange={(e) => setQ(e.target.value)}
+              />
+            </div>
+          ) : null}
+          {filters != null ? <div className="combobox-filters">{filters}</div> : null}
+          {meta != null ? <div className="combobox-meta">{meta}</div> : null}
+          {filtered.length === 0 ? (
+            <div className="combobox-empty">
+              <strong>{emptyTitle}</strong>
+              {emptySub}
+            </div>
+          ) : (
+            <ul className="combobox-list" role="listbox">
+              {rendered}
+            </ul>
+          )}
+          {footMeta != null ? <div className="combobox-foot-meta">{footMeta}</div> : null}
+          {footer ? (
+            <div className="combobox-footer">
+              <button type="button" className="combobox-footer-action" onClick={onFooterClick}>
+                {footer}
+              </button>
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default Combobox;

package/dist/react/DataTable/DataTable.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+
+export type SortDir = 'asc' | 'desc';
+export type DataTableSize = 'sm' | 'md' | 'lg';
+export type RowState = 'muted' | 'error' | undefined;
+
+export interface DataTableColumn<T> {
+  /** Unique column id — also what onSort receives. */
+  key: string;
+  /** Column header. Strings also become the responsive data-label. */
+  header: React.ReactNode;
+  /** Right-aligned tabular numerals (.dt-num). */
+  numeric?: boolean;
+  /** Monospace identifier (.dt-id). */
+  id?: boolean;
+  /** Sortable header (.dt-th-sort with chevron). */
+  sortable?: boolean;
+  /** Cell renderer — defaults to String(row[key]). */
+  render?: (row: T) => React.ReactNode;
+}
+
+export interface DataTableProps<T> {
+  columns: Array<DataTableColumn<T>>;
+  rows: T[];
+  /** Stable row identity. */
+  rowKey: (row: T) => string;
+  /** Makes rows hoverable + clickable (tr.hov). */
+  onRowClick?: (row: T) => void;
+  /** Row tint: 'muted' (cancelled) or 'error' (danger). */
+  rowState?: (row: T) => RowState;
+  /** Keys of persistently selected rows (.is-selected). */
+  selectedKeys?: string[];
+  /** Renders the `.col-select` checkbox column; called with the row key. Pair with selectedKeys. */
+  onSelectToggle?: (key: string) => void;
+  /** Header checkbox — toggle all. */
+  onSelectAll?: () => void;
+  /** Loading state — `.dt-skeleton` shimmer rows instead of the body. */
+  loading?: boolean;
+  /** How many skeleton rows. Default 4. */
+  loadingRows?: number;
+  /** sm | md (default) | lg — .dt--sm / .dt--lg. */
+  size?: DataTableSize;
+  zebra?: boolean;
+  sticky?: boolean;
+  bordered?: boolean;
+  /** Dark-surface treatment (.dt.on-inverse). */
+  onInverse?: boolean;
+  /** Toolbar slot (.dt-toolbar) above the table. */
+  toolbar?: React.ReactNode;
+  /** Pagination slot (.dt-pagination) below the table. */
+  pagination?: React.ReactNode;
+  /** Surrounding card (.dt-wrap). Default true; disable inside a Card. */
+  wrap?: boolean;
+  /** Responsive card-collapse wrapper (.dt-responsive). Default true. */
+  responsive?: boolean;
+  /** Zero state when rows is empty. */
+  empty?: { icon?: React.ReactNode; title: React.ReactNode; sub?: React.ReactNode };
+  /** Controlled sorting (visual). */
+  sortKey?: string;
+  sortDir?: SortDir;
+  onSort?: (key: string) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export declare function DataTable<T>(props: DataTableProps<T>): React.ReactElement;
+export declare const DTCellStack: React.FC<{ pri: React.ReactNode; sec?: React.ReactNode } & React.HTMLAttributes<HTMLDivElement>>;
+export declare const DTCellLead: React.FC<{ lead: React.ReactNode; pri: React.ReactNode; sec?: React.ReactNode } & React.HTMLAttributes<HTMLDivElement>>;
+export declare const DTActions: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+
+export interface DTPaginationProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Left-side mono range text (e.g. "1–10 of 42"). */
+  range?: React.ReactNode;
+  /** Current page (1-based). */
+  page: number;
+  pages: number;
+  onPage?: (page: number) => void;
+}
+export declare const DTPagination: React.FC<DTPaginationProps>;
+
+export default DataTable;