eidotter 0.17.2 → 0.19.0

package/LICENSE.md

@@ -64,4 +64,44 @@ For the avoidance of doubt, Section 5(b) does not affect any right the Licensor
 
 ---
 
-For more information about the license, visit: https://creativecommons.org/licenses/by-nc/4.0/ 
+For more information about the license, visit: https://creativecommons.org/licenses/by-nc/4.0/
+
+---
+
+# Third-Party Licenses
+
+eidotter bundles the following third-party software into its distributed package. Each third-party component retains its original license, reproduced below in full as required by that license.
+
+## pixelarticons
+
+[pixelarticons](https://github.com/halfmage/pixelarticons) — authentic DOS pixel art icons. Bundled into `dist/index.es.js` and `dist/index.umd.js` via `src/components/Icon/components/Icon.tsx`.
+
+```
+MIT License
+
+Copyright (c) 2019 Gerrit Halfmann
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
+## Flexi IBM VGA True
+
+Flexi IBM VGA True v2 — bitmap-style remake of the IBM VGA BIOS font by VileR (int10h.org). Bundled as `src/styles/fonts/Flexi_IBM_VGA_True.ttf` and loaded via `src/styles/fonts.css`.
+
+Licensed under [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/). Full license text and attribution notice: `src/styles/fonts/Flexi_IBM_VGA_LICENSE.txt`.

package/README.md

@@ -12,6 +12,7 @@ npm install eidotter
 
 ```tsx
 import { Terminal, Button, Alert } from 'eidotter';
+import 'eidotter/fonts.css';   // Flexi IBM VGA True @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 True @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 True v2](https://int10h.org/blog/2018/05/flexi-ibm-vga-scalable-truetype-font/) — an aspect-corrected vector remake of the IBM VGA BIOS font (CC BY-SA 4.0). The "True" variant matches authentic 4:3 VGA proportions with an extended character set (Greek, Cyrillic, Hebrew, Latin). 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 (33)
 
 | Component | Description |
 |-----------|-------------|
@@ -88,7 +92,8 @@ presets: [require('eidotter/tailwind.preset.enhanced')],
 | CommandPrompt | Interactive command-line input with blinking cursor |
 | FilterBar | Multi-select toggle group for faceted filtering |
 | Footer | Site footer with legal links (Impressum + Datenschutz) |
-| Icon | SVG icons backed by @untitledui/icons |
+| Header | Sticky site header composing branding + Nav — retro/modern variants |
+| Icon | SVG icons backed by pixelarticons (MIT) — authentic DOS pixel art |
 | InlineExpand | Inline disclosure widget for expanding text within prose |
 | Input | Text input with DOS styling and error variant |
 | Modal | Dialog overlay with title bar and close button |
@@ -109,6 +114,14 @@ presets: [require('eidotter/tailwind.preset.enhanced')],
 
 ## Component Examples
 
+### Header
+
+```tsx
+<Header brandName="DMNC.TECH" items={navItems} variant="retro">
+  {/* or use children for custom branding */}
+</Header>
+```
+
 ### Terminal
 
 ```tsx
@@ -209,11 +222,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 True v2), `text-dos-text-xs` through `text-dos-display-2xl`, `leading-dos-text-xs` through `leading-dos-display-2xl`
 
-**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,24 @@
+import React from 'react';
+import type { NavItem, NavProps } from '../../Nav';
+import './Header.css';
+export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
+    /** Site brand name displayed in the header */
+    brandName?: string;
+    /** Href for the brand link (default: "/") */
+    brandHref?: string;
+    /** Navigation items passed through to Nav */
+    items: NavItem[];
+    /** Currently active href (highlights matching nav link) */
+    activeHref?: string;
+    /** Visual variant applied to both header and nav */
+    variant?: 'retro' | 'modern';
+    /** Whether the header sticks to viewport top */
+    sticky?: boolean;
+    /** Custom link component for framework routing (Next.js Link, React Router Link, etc.) */
+    linkComponent?: NavProps['linkComponent'];
+    /** Custom branding content — replaces brandName when provided */
+    children?: React.ReactNode;
+    /** Additional CSS class name */
+    className?: string;
+}
+export declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;

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/Icon/components/Icon.d.ts

@@ -1,10 +1,20 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import './Icon.css';
-type UTIIcon = FC<{
-    size?: number;
-    className?: string;
-}>;
-declare const ICON_MAP: Record<string, UTIIcon>;
+type PixelIcon = FC<React.SVGProps<SVGSVGElement>>;
+declare const ICON_MAP: {
+    Info: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    Warning: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    Error: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    Done: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    Check: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    Close: PixelIcon;
+    'Chevron Up': (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    'Chevron Down': (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    App: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    Cancel: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    Fullscreen: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    Add: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+};
 export type IconName = keyof typeof ICON_MAP;
 export type IconSize = 'L' | 'S';
 export interface IconProps {
@@ -24,8 +34,9 @@ export interface IconProps {
     'aria-label'?: string;
 }
 /**
- * Icon component backed by @untitledui/icons.
+ * Icon component backed by pixelarticons (MIT licensed).
  * Renders inline SVG with proper viewBox scaling at any size.
+ * The DOS pixel aesthetic matches eidotter's design language.
  */
 export declare const Icon: FC<IconProps>;
 export {};

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>>;