@attrus-ds/core 0.2.0 → 1.0.0

package/dist/react/Stepper/Stepper.tsx

@@ -1,94 +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;
+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

@@ -1,32 +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;
+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

@@ -1,147 +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;
+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

@@ -1,30 +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;
+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;