eidotter 0.17.2 → 0.18.0

package/README.md

@@ -12,6 +12,7 @@ npm install eidotter
 
 ```tsx
 import { Terminal, Button, Alert } from 'eidotter';
+import 'eidotter/fonts.css';   // Flexi IBM VGA False @font-face (required)
 import 'eidotter/styles';      // Component CSS (includes Tailwind utilities)
 import 'eidotter/tokens.css';  // Design token CSS variables (required)
 
@@ -31,16 +32,19 @@ function App() {
 
 ### Basic (no Tailwind needed)
 
-Import the styles and tokens. All component styling is pre-compiled — no build tools required.
+Import the styles, tokens, and font. All component styling is pre-compiled — no build tools required.
 
 ```tsx
-import 'eidotter/styles';      // Component CSS
+import 'eidotter/fonts.css';   // Flexi IBM VGA False @font-face (required)
+import 'eidotter/styles';      // Component CSS (includes Tailwind utilities)
 import 'eidotter/tokens.css';  // CSS variable definitions
 
 // Optional: import a theme
 import 'eidotter/themes/amber-mono.css';
 ```
 
+**Font:** eiDotter uses [Flexi IBM VGA False](https://int10h.org/blog/2018/05/flexi-ibm-vga-scalable-truetype-font/) — a vector remake of the IBM VGA BIOS font (CC BY-SA 4.0). It scales cleanly at any size. The `fonts.css` import loads the bundled TTF via `@font-face`. No fallback fonts are configured so you'll immediately see if the font isn't loading.
+
 ### With Tailwind CSS
 
 Use eidotter's design tokens as Tailwind utility classes in your own code.
@@ -70,7 +74,7 @@ For React Aria state variants and animations, use the enhanced preset:
 presets: [require('eidotter/tailwind.preset.enhanced')],
 ```
 
-## Available Components (v0.17.1)
+## Available Components (v0.18.0)
 
 | Component | Description |
 |-----------|-------------|
@@ -209,11 +213,11 @@ Available themes: `amber-mono`, `cga-amber`, `cga-mode4-p0`, `cga-mode4-p1`, `cg
 
 **Semantic Colors:** `dos-bg-primary`, `dos-bg-secondary`, `dos-text-primary`, `dos-text-accent`, `dos-border-default`, `dos-border-focus`, `dos-success`, `dos-warning`, `dos-error`, `dos-info`
 
-**Typography:** `font-dos`, `text-dos-xs` through `text-dos-4xl`, `leading-dos-tight/normal/loose`
+**Typography:** `font-dos` (Flexi IBM VGA False), `text-dos-xs` through `text-dos-4xl`, `leading-dos-tight/normal/loose`
 
-**Spacing:** `dos-0` through `dos-16` (4px grid)
+**Spacing:** 4px grid via design tokens
 
-**Border Radius:** `rounded-dos-none` (0), `rounded-dos-sm` (2px), `rounded-dos-base` (4px max)
+**Border Radius:** `rounded-dos-sm` (2px), `rounded-dos-base` (4px max)
 
 ## Development
 

package/dist/components/Alert/components/Alert.d.ts

@@ -35,4 +35,4 @@ export interface AlertProps {
  *
  * Backward-compatible with `type` and `onClickHere` props from pre-V.37.
  */
-export declare const Alert: React.FC<AlertProps>;
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Badge/components/Badge.d.ts

@@ -3,7 +3,7 @@ import './Badge.css';
 export interface BadgeProps {
     /** The variant determines the badge's color scheme */
     variant?: 'default' | 'success' | 'warning' | 'error' | 'info' | 'accent' | 'brand' | 'gray' | 'blue' | 'indigo' | 'purple' | 'pink' | 'orange';
-    /** The size of the badge */
+    /** Size variant. Use sm/md/lg — small/medium are @deprecated aliases. */
     size?: 'sm' | 'md' | 'lg' | 'small' | 'medium';
     /** Show a dot indicator before the text */
     dot?: boolean;
@@ -18,4 +18,4 @@ export interface BadgeProps {
  * DOS-styled Badge for status indicators, labels, and counts.
  * Pure presentational — no React Aria needed.
  */
-export declare const Badge: React.FC<BadgeProps>;
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Button/components/Button.d.ts

@@ -1,17 +1,22 @@
 import React from 'react';
+import { type PressEvent } from 'react-aria-components';
 import '../../../styles/keyframes.css';
 import './Button.css';
 export interface ButtonProps {
     variant?: 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'ghost' | 'link';
+    /** Size variant. Use xs/sm/md/lg/xl — small/medium/large are @deprecated aliases. */
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'small' | 'medium' | 'large';
     type?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
     loading?: boolean;
     children: React.ReactNode;
+    /** Press handler — receives React Aria PressEvent with pointer type info */
+    onPress?: (e: PressEvent) => void;
+    /** @deprecated Use `onPress` instead. onClick receives a minimal synthetic event that lacks most MouseEvent properties. */
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     className?: string;
     'aria-label'?: string;
     fullWidth?: boolean;
     iconOnly?: boolean;
 }
-export declare const Button: React.FC<ButtonProps>;
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Card/components/Card.d.ts

@@ -22,4 +22,4 @@ export interface CardProps {
      */
     className?: string;
 }
-export declare const Card: React.FC<CardProps>;
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Chat/components/ChatContainer.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './ChatContainer.css';
 import { ChatMessageEntry } from './ChatHistory';
 export interface ChatContainerProps {
     /** Array of messages to display */

package/dist/components/Checkbox/components/Checkbox.d.ts

@@ -29,4 +29,4 @@ export interface CheckboxProps {
  * DOS-styled Checkbox with bracket text indicator [ ] / [X].
  * Built on React Aria for accessible keyboard/focus handling.
  */
-export declare const Checkbox: React.FC<CheckboxProps>;
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLLabelElement>>;

package/dist/components/FilterBar/components/FilterBar.d.ts

@@ -28,7 +28,7 @@ export interface FilterBarProps {
     showAll?: boolean;
     /** Label for the "All" toggle. Default: 'All' */
     allLabel?: string;
-    /** The size of the filter bar */
+    /** Size variant. Use sm/md/lg — small/medium/large are @deprecated aliases. */
     size?: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
     /**
      * Callback when selection changes.

package/dist/components/Header/components/Header.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { NavItem, NavProps } from '../../Nav';
+import './Header.css';
+export interface HeaderProps {
+    /** Site branding — text string or custom ReactNode (logo, icon + text, etc.) */
+    branding: React.ReactNode;
+    /** Href for the branding link (default: "/") */
+    brandingHref?: string;
+    /** Navigation items */
+    items: NavItem[];
+    /** Currently active href (highlights matching nav link) */
+    activeHref?: string;
+    /** Visual variant */
+    variant?: 'retro' | 'modern';
+    /** Custom link component for framework routing (e.g., Next.js Link, React Router Link) */
+    linkComponent?: NavProps['linkComponent'];
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * Standard site header composing branding + Nav.
+ * Provides the canonical layout for all eidotter-consuming sites:
+ * branding left, desktop nav right, hamburger on mobile.
+ */
+export declare const Header: React.FC<HeaderProps>;

package/dist/components/Header/components/index.d.ts

@@ -0,0 +1,2 @@
+export { Header } from './Header';
+export type { HeaderProps } from './Header';

package/dist/components/Header/index.d.ts

@@ -0,0 +1,2 @@
+export { Header } from './components';
+export type { HeaderProps } from './components';

package/dist/components/Modal/components/Modal.d.ts

@@ -3,13 +3,10 @@ import './Modal.css';
 export interface ModalProps {
     /** Whether the modal is open */
     isOpen: boolean;
-    /** Called when modal should close (escape, backdrop, close button) */
-    onClose: () => void;
-    /**
-     * Called when the modal's open state changes.
-     * Enables agents to observe state transitions.
-     */
+    /** Called when the modal's open state changes (React Aria convention) */
     onOpenChange?: (isOpen: boolean) => void;
+    /** @deprecated Use `onOpenChange` instead. Called when modal should close. */
+    onClose?: () => void;
     /** Modal title (required for accessibility) */
     title: string;
     /** Modal body content */
@@ -23,5 +20,6 @@ export interface ModalProps {
  * DOS-styled Modal with React Aria Dialog.
  * React Aria provides focus trapping, scroll lock, backdrop dismiss, and escape handling.
  * CRT phosphor enter/exit animations via isEntering/isExiting render props.
+ * Ref forwards to the inner AriaDialog element (not the overlay).
  */
-export declare const Modal: React.FC<ModalProps>;
+export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLElement>>;

package/dist/components/Progress/components/Progress.d.ts

@@ -9,7 +9,7 @@ export interface ProgressProps {
     indeterminate?: boolean;
     /** Visual variant */
     variant?: 'default' | 'success' | 'warning' | 'error';
-    /** Size of the progress bar */
+    /** Size variant. Use sm/md/lg — small/medium/large are @deprecated aliases. */
     size?: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
     /** Track display style */
     trackStyle?: 'block' | 'bordered' | 'gradient';
@@ -32,4 +32,4 @@ export interface ProgressProps {
  * DOS-styled Progress bar with block characters, phosphor glow, and track styles.
  * Pure presentational — no React Aria needed.
  */
-export declare const Progress: React.FC<ProgressProps>;
+export declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Stat/components/Stat.d.ts

@@ -9,7 +9,7 @@ export interface StatProps {
     trend?: 'up' | 'down' | 'neutral';
     /** Optional trend value (e.g., "+5%", "-12") */
     trendValue?: string;
-    /** Size variant */
+    /** Size variant. Use sm/md/lg — small/medium/large are @deprecated aliases. */
     size?: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
     /** Whether to animate value changes with a text scramble effect */
     scramble?: boolean;
@@ -20,4 +20,4 @@ export interface StatProps {
  * DOS-styled Stat component for displaying metrics with optional trends.
  * Pure presentational — no React Aria needed.
  */
-export declare const Stat: React.FC<StatProps>;
+export declare const Stat: React.ForwardRefExoticComponent<StatProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Switch/components/Switch.d.ts

@@ -6,6 +6,8 @@ export interface SwitchProps {
     /** Default state (uncontrolled) */
     defaultChecked?: boolean;
     /** Callback when state changes */
+    onChange?: (checked: boolean) => void;
+    /** @deprecated Use `onChange` instead */
     onCheckedChange?: (checked: boolean) => void;
     /** Whether the switch is disabled */
     disabled?: boolean;
@@ -28,4 +30,4 @@ export interface SwitchProps {
  * DOS-styled Switch with phosphor glow toggle effect.
  * Built on React Aria for accessible toggle behavior.
  */
-export declare const Switch: React.FC<SwitchProps>;
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLLabelElement>>;

package/dist/components/Tabs/components/Tabs.d.ts

@@ -13,13 +13,19 @@ export interface TabsProps {
     tabs: TabItem[];
     /** The variant determines the tab styling */
     variant?: 'underline' | 'pills';
-    /** The size of the tabs */
+    /** Size variant. Use sm/md/lg — small/medium/large are @deprecated aliases. */
     size?: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
     /** Currently active tab ID (controlled mode) */
     activeTab?: string;
     /** Default active tab ID (uncontrolled mode) */
     defaultActiveTab?: string;
-    /** Callback when active tab changes */
+    /**
+     * Callback when active tab changes. Receives new and previous tab IDs.
+     * Note: differs from React Aria's native onSelectionChange(key: Key) — this
+     * wraps it with eidotter's two-arg signature for backward compatibility.
+     */
+    onSelectionChange?: (tabId: string, previousTabId: string) => void;
+    /** @deprecated Use `onSelectionChange` instead */
     onTabChange?: (tabId: string, previousTabId: string) => void;
     /** Optional CSS class name */
     className?: string;
@@ -30,4 +36,4 @@ export interface TabsProps {
  * DOS-styled Tabs with React Aria keyboard navigation and phosphor indicator.
  * React Aria handles arrow keys, Home, End, roving tabindex, and ARIA roles.
  */
-export declare const Tabs: React.FC<TabsProps>;
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Tag/components/Tag.d.ts

@@ -5,7 +5,7 @@ export interface TagProps {
     children: React.ReactNode;
     /** Visual variant */
     variant?: 'default' | 'outlined' | 'filled';
-    /** Size */
+    /** Size variant. Use sm/md/lg — small/medium are @deprecated aliases. */
     size?: 'sm' | 'md' | 'lg' | 'small' | 'medium';
     /** CGA color token for border and text */
     color?: string;

package/dist/components/Terminal/components/Terminal.d.ts

@@ -2,10 +2,8 @@ import React from 'react';
 import '../../../styles/keyframes.css';
 import './Terminal.css';
 export interface TerminalProps {
-    /**
-     * The size variant of the terminal window
-     */
-    size?: 'small' | 'medium' | 'large';
+    /** Size variant. Use sm/md/lg — small/medium/large are @deprecated aliases. */
+    size?: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
     /**
      * The title displayed in the terminal title bar
      */

package/dist/components/TextScramble/components/TextScramble.d.ts

@@ -10,4 +10,4 @@ export interface TextScrambleProps extends Omit<React.HTMLAttributes<HTMLSpanEle
     /** Milliseconds before scramble starts (default: 0) */
     delay?: number;
 }
-export declare const TextScramble: React.FC<TextScrambleProps>;
+export declare const TextScramble: React.ForwardRefExoticComponent<TextScrambleProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/TimelineNode/components/TimelineNode.d.ts

@@ -28,10 +28,10 @@ export interface TimelineNodeProps {
      */
     labelPosition?: 'left' | 'right' | 'top' | 'bottom';
     /**
-     * Size of the node
-     * @default 'medium'
+     * Size variant. Use sm/md/lg — small/medium/large are @deprecated aliases.
+     * @default 'md'
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
     /**
      * Additional CSS class name
      */
@@ -49,4 +49,4 @@ export interface TimelineNodeProps {
  *
  * Uses DOS/CGA aesthetic with amber phosphor glow effects.
  */
-export declare const TimelineNode: React.FC<TimelineNodeProps>;
+export declare const TimelineNode: React.ForwardRefExoticComponent<TimelineNodeProps & React.RefAttributes<HTMLDivElement>>;