@attrus-ds/core 1.0.10 → 1.0.12

package/dist/react/Input/Input.tsx

@@ -367,7 +367,7 @@ export const Otp: React.FC<OtpProps> = ({ length = 6, value, onChange, error = f
   );
 };
 
-export interface FileDropProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface FileDropProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
   /** Called with the dropped/browsed files. */
   onFiles?: (files: File[]) => void;
   multiple?: boolean;

package/dist/react/Modal/Modal.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { createPortal } from 'react-dom';
 
 /**
  * ATTRUS Modal — typed wrapper over the canonical `.modal` + `.scrim`
@@ -140,7 +141,7 @@ export const Modal: React.FC<ModalProps> = ({
     .filter(Boolean)
     .join(' ');
 
-  return (
+  const overlay = (
     <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}>
@@ -168,6 +169,12 @@ export const Modal: React.FC<ModalProps> = ({
       </div>
     </React.Fragment>
   );
+
+  // Portal the live overlay to <body> so the scrim + dialog escape any clipping
+  // / stacking ancestor (e.g. a Drawer: position:fixed; overflow:auto). Static
+  // (gallery/doc) renders inline inside its relative frame, as documented.
+  if (isStatic || typeof document === 'undefined') return overlay;
+  return createPortal(overlay, document.body);
 };
 
 export default Modal;

package/dist/react/SelectableCard/SelectableCard.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+export interface SelectableCardProps {
+  /** Primary line. */
+  title: React.ReactNode;
+  /** Supporting copy under the title. */
+  desc?: React.ReactNode;
+  /** Leading index chip — "01", "02"… */
+  index?: React.ReactNode;
+  /** Selected state (controlled). */
+  selected?: boolean;
+  onSelect?: (next: boolean) => void;
+  /** Radio group name (single-select). */
+  name?: string;
+  value?: string;
+  /** Pick-many: square marker + checkbox input. */
+  multi?: boolean;
+  disabled?: boolean;
+  /** Dense padding + smaller type. */
+  size?: 'md' | 'sm';
+  /** Dark-surface treatment. */
+  onInverse?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export declare const SelectableCard: React.FC<SelectableCardProps>;
+
+export interface SelectableCardGroupProps {
+  children?: React.ReactNode;
+  /** Auto-fit grid instead of a single column. */
+  grid?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export declare const SelectableCardGroup: React.FC<SelectableCardGroupProps>;
+
+export default SelectableCard;

package/dist/react/SelectableCard/SelectableCard.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+
+/**
+ * ATTRUS SelectableCard — typed wrapper over the canonical `.sel-card`
+ * (preview/components/sel-card.css): a card that IS a control.
+ *
+ * Prefer this over hand-rolling `.card + .radio` in onboarding / KYC /
+ * plan-picker flows — that composition reinvents padding, radius and the
+ * selected state every time.
+ *
+ * `multi` switches the marker to a square (checkbox semantics) and renders a
+ * checkbox input; the default is radio semantics. Pass `name` to group radios.
+ */
+export interface SelectableCardProps {
+  title: React.ReactNode;
+  /** Supporting copy under the title. */
+  desc?: React.ReactNode;
+  /** Leading index chip — "01", "02"… */
+  index?: React.ReactNode;
+  selected?: boolean;
+  onSelect?: (next: boolean) => void;
+  /** Radio group name (single-select). */
+  name?: string;
+  value?: string;
+  /** Pick-many: square marker + checkbox input. */
+  multi?: boolean;
+  disabled?: boolean;
+  /** Dense padding + smaller type. */
+  size?: 'md' | 'sm';
+  /** Dark-surface treatment (hero, permanently-dark onboarding). */
+  onInverse?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export const SelectableCard: React.FC<SelectableCardProps> = ({
+  title,
+  desc,
+  index,
+  selected = false,
+  onSelect,
+  name,
+  value,
+  multi = false,
+  disabled = false,
+  size = 'md',
+  onInverse = false,
+  className,
+  style,
+}) => {
+  const cls = [
+    'sel-card',
+    size === 'sm' ? 'sel-card-sm' : '',
+    multi ? 'sel-card-multi' : '',
+    selected ? 'is-selected' : '',
+    onInverse ? 'on-inverse' : '',
+    className || '',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <label className={cls} style={style} aria-disabled={disabled || undefined}>
+      <input
+        type={multi ? 'checkbox' : 'radio'}
+        name={name}
+        value={value}
+        checked={selected}
+        disabled={disabled}
+        onChange={(e) => onSelect?.(e.target.checked)}
+      />
+      {index != null ? <span className="sel-card-index">{index}</span> : null}
+      <span className="sel-card-body">
+        <span className="sel-card-title">{title}</span>
+        {desc != null ? <span className="sel-card-desc">{desc}</span> : null}
+      </span>
+      <span className="sel-card-mark" aria-hidden="true" />
+    </label>
+  );
+};
+
+export interface SelectableCardGroupProps {
+  children?: React.ReactNode;
+  /** Auto-fit grid instead of a single column. */
+  grid?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export const SelectableCardGroup: React.FC<SelectableCardGroupProps> = ({ children, grid = false, className, style }) => (
+  <div className={['sel-card-group', grid ? 'is-grid' : '', className || ''].filter(Boolean).join(' ')} style={style} role="group">
+    {children}
+  </div>
+);
+
+export default SelectableCard;

package/dist/react/SmartSearch/SmartSearch.tsx

@@ -150,7 +150,7 @@ export const SmartSearch: React.FC<SmartSearchProps> = ({
         {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>
+        <span style={{ marginLeft: 'auto', flexShrink: 0, fontFamily: 'var(--font-mono)', fontSizeAdjust: 'var(--font-mono-adjust)', fontSize: 'var(--fs-xxs)', color: 'var(--color-foreground-muted)' }}>{it.trailing}</span>
       ) : null}
     </li>
   );
@@ -209,7 +209,7 @@ export const SmartSearch: React.FC<SmartSearchProps> = ({
               <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}
+                {b.hint != null ? <span style={{ fontFamily: 'var(--font-mono)', fontSizeAdjust: 'var(--font-mono-adjust)', fontSize: 'var(--fs-xxs)', color: 'var(--color-foreground-muted)' }}>{b.hint}</span> : null}
               </button>
             ))}
           </div>

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

@@ -13,6 +13,9 @@ export interface StepperProps extends React.OlHTMLAttributes<HTMLOListElement> {
   steps: StepItem[];
   vertical?: boolean;
   compact?: boolean;
+  /** Type scale for the label + helper, independent of marker density.
+      Composes with `compact`: geometry and type are separate axes. */
+  labelSize?: 'sm' | 'md' | 'lg';
   /** Minimal capsule+label variant (.is-rule) for tight headers. */
   rule?: boolean;
   /** ≤640px: hide labels, keep markers (.is-collapse-sm). */

package/dist/react/Stepper/Stepper.tsx

@@ -5,6 +5,8 @@ import * as React from 'react';
  * indicator (preview/components/stepper.css). States: todo / current /
  * done / error / skipped. Orientations: horizontal (default), vertical.
  * Density: compact. Minimal: rule (4px capsule, mono labels).
+ * Label type scale: labelSize sm | md | lg — a separate axis from density, so a
+ * compact stepper can still carry a large label.
  */
 
 export type StepState = 'todo' | 'current' | 'done' | 'error' | 'skipped';
@@ -20,6 +22,9 @@ export interface StepperProps extends React.OlHTMLAttributes<HTMLOListElement> {
   steps: StepItem[];
   vertical?: boolean;
   compact?: boolean;
+  /** Type scale for the label + helper, independent of marker density.
+      Composes with `compact`: geometry and type are separate axes. */
+  labelSize?: 'sm' | 'md' | 'lg';
   /** Minimal capsule+label variant (.is-rule) for tight headers. */
   rule?: boolean;
   /** ≤640px: hide labels, keep markers (.is-collapse-sm). */
@@ -44,6 +49,7 @@ export const Stepper: React.FC<StepperProps> = ({
   steps,
   vertical = false,
   compact = false,
+  labelSize,
   rule = false,
   collapseOnMobile = false,
   onStepClick,
@@ -54,6 +60,7 @@ export const Stepper: React.FC<StepperProps> = ({
     'stepper',
     vertical ? 'is-vertical' : '',
     compact ? 'is-compact' : '',
+    labelSize ? 'stepper-label-' + labelSize : '',
     rule ? 'is-rule' : '',
     collapseOnMobile ? 'is-collapse-sm' : '',
     className || '',

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

@@ -3,7 +3,7 @@ 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> {
+export interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
   tone?: ToastTone;
   /** Leading icon slot (.toast-icon). */
   icon?: React.ReactNode;

package/dist/react/Toast/Toast.tsx

@@ -10,7 +10,7 @@ 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> {
+export interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
   tone?: ToastTone;
   /** Leading icon slot (.toast-icon). */
   icon?: React.ReactNode;

package/dist/react/ToggleChip/ToggleChip.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+export interface ToggleChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+  children?: React.ReactNode;
+  /** Leading icon. */
+  icon?: React.ReactNode;
+  /** Trailing count. */
+  count?: React.ReactNode;
+  /** On state (controlled) — drives aria-pressed. */
+  pressed?: boolean;
+  onToggle?: (next: boolean) => void;
+  disabled?: boolean;
+  size?: 'md' | 'sm';
+  /** Dark-surface treatment. */
+  onInverse?: boolean;
+}
+
+export declare const ToggleChip: React.FC<ToggleChipProps>;
+
+export interface ToggleChipGroupProps {
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  'aria-label'?: string;
+}
+
+export declare const ToggleChipGroup: React.FC<ToggleChipGroupProps>;
+
+export default ToggleChip;

package/dist/react/ToggleChip/ToggleChip.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+
+/**
+ * ATTRUS ToggleChip — typed wrapper over the canonical `.toggle-chip`
+ * (preview/components/toggle-chip.css): a chip that is a FORM CONTROL.
+ *
+ * Use for multi-select filters, tag pickers and preference pills. Do NOT use
+ * `.chip` (that is a removable token, it ships `.chip-x`) or `.pill.interactive`
+ * (that is a status pill) for selection.
+ *
+ * Renders a `<button aria-pressed>` by default — the accessible pattern for a
+ * toggle. Provide `name` to render a hidden checkbox instead (form submission).
+ */
+export interface ToggleChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+  children?: React.ReactNode;
+  /** Leading icon. */
+  icon?: React.ReactNode;
+  /** Trailing count. */
+  count?: React.ReactNode;
+  pressed?: boolean;
+  onToggle?: (next: boolean) => void;
+  disabled?: boolean;
+  size?: 'md' | 'sm';
+  /** Dark-surface treatment. */
+  onInverse?: boolean;
+}
+
+export const ToggleChip: React.FC<ToggleChipProps> = ({
+  children,
+  icon,
+  count,
+  pressed = false,
+  onToggle,
+  disabled = false,
+  size = 'md',
+  onInverse = false,
+  className,
+  ...rest
+}) => {
+  const cls = [
+    'toggle-chip',
+    size === 'sm' ? 'toggle-chip-sm' : '',
+    onInverse ? 'on-inverse' : '',
+    className || '',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <button
+      type="button"
+      className={cls}
+      aria-pressed={pressed}
+      disabled={disabled}
+      onClick={() => onToggle?.(!pressed)}
+      {...rest}
+    >
+      {icon}
+      {children}
+      {count != null ? <span className="toggle-chip-count">{count}</span> : null}
+    </button>
+  );
+};
+
+export interface ToggleChipGroupProps {
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  'aria-label'?: string;
+}
+
+export const ToggleChipGroup: React.FC<ToggleChipGroupProps> = ({ children, className, ...rest }) => (
+  <div className={['toggle-chip-group', className || ''].filter(Boolean).join(' ')} role="group" {...rest}>
+    {children}
+  </div>
+);
+
+export default ToggleChip;

package/dist/react/Tooltip/Tooltip.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
 
-export interface TooltipProps extends React.HTMLAttributes<HTMLSpanElement> {
+export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'content'> {
   /** Tooltip content — plain label, or rich blocks when rich=true. */
   content: React.ReactNode;
   placement?: TooltipPlacement;

package/dist/react/Tooltip/Tooltip.tsx

@@ -9,7 +9,7 @@ import * as React from 'react';
 
 export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
 
-export interface TooltipProps extends React.HTMLAttributes<HTMLSpanElement> {
+export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'content'> {
   /** Tooltip content — plain label, or rich blocks when rich=true. */
   content: React.ReactNode;
   placement?: TooltipPlacement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@attrus-ds/core",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "ATTRUS / Cabiros design system — design tokens, component styles, brand assets, fonts and an optional typed React component layer.",
   "keywords": [
     "design-system",