eidotter 0.3.0

package/LICENSE.md

@@ -0,0 +1,67 @@
+# Creative Commons Attribution-NonCommercial 4.0 International
+
+By exercising the Licensed Rights (defined below), You accept and agree to be bound by the terms and conditions of this Creative Commons Attribution-NonCommercial 4.0 International Public License ("Public License"). To the extent this Public License may be interpreted as a contract, You are granted the Licensed Rights in consideration of Your acceptance of these terms and conditions, and the Licensor grants You such rights in consideration of benefits the Licensor receives from making the Licensed Material available under these terms and conditions.
+
+## Section 1 – Definitions
+
+a. **Adapted Material** means material subject to Copyright and Similar Rights that is derived from or based upon the Licensed Material and in which the Licensed Material is translated, altered, arranged, transformed, or otherwise modified in a manner requiring permission under the Copyright and Similar Rights held by the Licensor.
+
+b. **Copyright and Similar Rights** means copyright and/or similar rights closely related to copyright including, without limitation, performance, broadcast, sound recording, and Sui Generis Database Rights, without regard to how the rights are labeled or categorized.
+
+c. **Licensed Material** means the artistic or literary work, database, or other material to which the Licensor applied this License.
+
+d. **Licensed Rights** means the rights granted to You subject to the terms and conditions of this License, which are limited to all Copyright and Similar Rights that apply to Your use of the Licensed Material and that the Licensor has authority to license.
+
+e. **NonCommercial** means not primarily intended for or directed towards commercial advantage or monetary compensation.
+
+## Section 2 – Scope
+
+a. License grant
+
+   1. Subject to the terms and conditions of this Public License, the Licensor hereby grants You a worldwide, royalty-free, non-sublicensable, non-exclusive, irrevocable license to exercise the Licensed Rights in the Licensed Material to:
+      - reproduce and Share the Licensed Material, in whole or in part, for NonCommercial purposes only; and
+      - produce, reproduce, and Share Adapted Material for NonCommercial purposes only.
+
+   2. You may not exercise any of the rights granted to You in Section 2(a)(1) in any manner that is primarily intended for or directed toward commercial advantage or private monetary compensation.
+
+b. Other rights
+   - Moral rights are not licensed under this Public License
+   - Patent and trademark rights are not licensed under this Public License
+   - The Licensor waives or agrees not to assert any right to collect royalties from You for the exercise of the Licensed Rights
+
+## Section 3 – License Conditions
+
+Your exercise of the Licensed Rights is expressly made subject to the following conditions:
+
+a. **Attribution**
+   1. If You Share the Licensed Material (including in modified form), You must:
+      - retain the following if supplied by the Licensor:
+        * identification of the creator(s)
+        * copyright notice
+        * notice referring to this Public License
+        * notice referring to the disclaimer of warranties
+        * URI or hyperlink to the Licensed Material
+      - indicate if You modified the Licensed Material and retain an indication of any previous modifications
+      - indicate the Licensed Material is licensed under this Public License, and include the text of, or the URI or hyperlink to, this Public License
+
+b. You may satisfy the conditions in Section 3(a) in any reasonable manner based on the medium, means, and context in which You Share the Licensed Material.
+
+## Section 4 – Disclaimer of Warranties and Limitation of Liability
+
+a. Unless otherwise separately undertaken by the Licensor, to the extent possible, the Licensor offers the Licensed Material as-is and as-available, and makes no representations or warranties of any kind concerning the Licensed Material, whether express, implied, statutory, or other.
+
+b. To the extent possible, in no event will the Licensor be liable to You on any legal theory (including, without limitation, negligence) or otherwise for any direct, special, indirect, incidental, consequential, punitive, exemplary, or other losses, costs, expenses, or damages arising out of this Public License or use of the Licensed Material, even if the Licensor has been advised of the possibility of such losses, costs, expenses, or damages.
+
+## Section 5 – Term and Termination
+
+a. This Public License applies for the term of the Copyright and Similar Rights licensed here. However, if You fail to comply with this Public License, then Your rights under this Public License terminate automatically.
+
+b. Where Your right to use the Licensed Material has terminated under Section 5(a), it reinstates:
+   1. automatically as of the date the violation is cured, provided it is cured within 30 days of Your discovery of the violation; or
+   2. upon express reinstatement by the Licensor.
+
+For the avoidance of doubt, Section 5(b) does not affect any right the Licensor may have to seek remedies for Your violations of this Public License.
+
+---
+
+For more information about the license, visit: https://creativecommons.org/licenses/by-nc/4.0/ 

package/README.md

@@ -0,0 +1,234 @@
+# eiDotter - DOS Terminal Design System
+
+A DOS-themed React component library with authentic CGA terminal aesthetics.
+
+## Installation
+
+```bash
+npm install eidotter
+# or
+yarn add eidotter
+# or
+pnpm add eidotter
+```
+
+## Quick Start
+
+```jsx
+import { Terminal, Button, Alert } from 'eidotter';
+import 'eidotter/dist/style.css';
+
+function App() {
+  return (
+    <Terminal title="MY-APP.EXE">
+      <Alert type="info" title="Welcome">
+        DOS interface loaded successfully.
+      </Alert>
+      <Button variant="primary">Execute</Button>
+    </Terminal>
+  );
+}
+```
+
+## Available Components (v0.3.0)
+
+| Component | Description |
+|-----------|-------------|
+| Accordion | Collapsible content sections |
+| Alert | System notifications (info, success, warning, error) |
+| Badge | Status indicators with variant support |
+| Breadcrumb | Navigation path display |
+| Button | DOS-style buttons with variants (primary, secondary, ghost, link) |
+| Card | Content container with title, body, and optional footer |
+| Checkbox | DOS-style checkbox with [X] indicator |
+| CommandPrompt | Interactive command-line input with blinking cursor |
+| Icon | SVG icon system with DOS styling |
+| Input | Text input with DOS styling and error variant |
+| Progress | DOS-style progress bar with block characters |
+| RetroEffects | CRT effects (scanlines, noise, phosphor glow) |
+| Switch | Toggle switch for on/off states |
+| Tabs | Tabbed interface navigation |
+| Terminal | DOS window with title bar, controls, and content area |
+| TimelineNode | Timeline/stepper axis markers with shapes and glow |
+
+## Component Examples
+
+### Terminal
+
+```jsx
+<Terminal
+  title="PROGRAM.EXE"
+  size="medium"
+  closeable
+  onClose={() => console.log('closed')}
+>
+  <p>Terminal content here</p>
+</Terminal>
+```
+
+### Button
+
+```jsx
+<Button variant="primary" size="medium">
+  Click Me
+</Button>
+
+<Button variant="ghost" loading>
+  Processing...
+</Button>
+```
+
+### Alert
+
+```jsx
+<Alert
+  type="warning"
+  title="Low Disk Space"
+  onClose={() => {}}
+>
+  Drive C: has only 640KB remaining.
+</Alert>
+```
+
+### Input
+
+```jsx
+<Input
+  placeholder="Enter filename..."
+  variant="default"
+/>
+
+<Input
+  variant="error"
+  placeholder="Invalid path"
+/>
+```
+
+### CommandPrompt
+
+```jsx
+<CommandPrompt
+  prompt="C:\>"
+  onCommand={(cmd) => console.log('Executing:', cmd)}
+  autoFocus
+/>
+```
+
+### Accordion
+
+```jsx
+<AccordionFill
+  sections={[
+    { title: 'Section 1', content: 'Content 1' },
+    { title: 'Section 2', content: 'Content 2' },
+  ]}
+  defaultExpandedIndex={0}
+/>
+```
+
+## Design Tokens
+
+The library uses authentic CGA colors:
+
+```css
+--color-cga-black: #000000;
+--color-cga-blue: #0000AA;
+--color-cga-cyan: #00AAAA;
+--color-cga-yellow: #FFFF55;
+--color-cga-white: #FFFFFF;
+--color-cga-amber: #FFBF00;
+/* ... full 16-color CGA palette + amber */
+```
+
+### Theming
+
+Apply the DOS amber theme (amber-on-black terminal aesthetic):
+
+```html
+<div data-theme="dos-amber">
+  <!-- Components will use amber colors -->
+</div>
+```
+
+Or via CSS class:
+
+```html
+<div class="theme-dos-amber">...</div>
+```
+
+## Tailwind CSS Integration
+
+Use Eidotter tokens in Tailwind projects without importing React components.
+
+### Setup
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  presets: [require('eidotter/tailwind.preset')],
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+};
+```
+
+### Usage
+
+```jsx
+// CGA palette colors
+<div className="bg-cga-black text-cga-yellow">
+  DOS terminal content
+</div>
+
+// Semantic colors
+<div className="bg-dos-bg-primary text-dos-text-accent">
+  Using semantic tokens
+</div>
+
+// Typography
+<p className="font-dos text-dos-base leading-dos-tight">
+  Perfect DOS VGA 437 font
+</p>
+```
+
+### Available Token Classes
+
+**CGA Colors:** `cga-black`, `cga-blue`, `cga-green`, `cga-cyan`, `cga-red`, `cga-magenta`, `cga-brown`, `cga-light-gray`, `cga-dark-gray`, `cga-bright-blue`, `cga-bright-green`, `cga-bright-cyan`, `cga-bright-red`, `cga-bright-magenta`, `cga-yellow`, `cga-white`, `cga-amber`, `cga-amber-bright`, `cga-amber-dim`
+
+**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`
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run Storybook
+npm run storybook
+
+# Build library
+npm run build
+
+# Run tests
+npm run test
+```
+
+## Planned Components
+
+See [ROADMAP.md](./ROADMAP.md) for future components.
+
+## Design Philosophy
+
+The DOS aesthetic isn't nostalgia for nostalgia's sake. It represents values we've lost in modern software:
+
+- **Control** - Every command is explicit and intentional
+- **Clarity** - Information presented without distraction
+- **Personal Sovereignty** - Your tools, your way
+
+Eidotter brings these values to modern interfaces while maintaining accessibility (WCAG AA compliant) and usability standards. The authentic 16-color CGA palette plus amber phosphor variants creates that terminal feel without sacrificing readability.
+
+Part of the **Timeline OS** ecosystem - a vision for personal data management along temporal, thematic, and social axes.
+
+## License
+
+CC-BY-NC-4.0 (Creative Commons Attribution-NonCommercial 4.0 International)

package/dist/components/Accordion/components/AccordionFill.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './AccordionFill.css';
+export interface AccordionFillProps {
+    sections: Array<{
+        title: string;
+        content: string;
+    }>;
+    defaultExpandedIndex?: number;
+}
+export declare const AccordionFill: React.FC<AccordionFillProps>;

package/dist/components/Accordion/components/Section.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import './Section.css';
+export interface SectionProps {
+    /**
+     * The title text of the section
+     */
+    title: string;
+    /**
+     * The content of the section
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the section is expanded by default
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Whether the section is in a hover state
+     */
+    isHovered?: boolean;
+    /**
+     * Whether the section is in an active state
+     */
+    isActive?: boolean;
+    /**
+     * Optional callback when the section is toggled
+     */
+    onToggle?: (isExpanded: boolean) => void;
+}
+export declare const Section: React.FC<SectionProps>;

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

@@ -0,0 +1,2 @@
+export * from './Section';
+export * from './AccordionFill';

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

@@ -0,0 +1 @@
+export * from './components';

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import './Alert.css';
+export interface AlertProps {
+    /**
+     * The size variant of the alert
+     */
+    size?: 'L' | 'S';
+    /**
+     * The type of alert which determines its color and icon
+     */
+    type?: 'info' | 'success' | 'warning' | 'error';
+    /**
+     * The title text of the alert
+     */
+    title?: string;
+    /**
+     * The description text of the alert
+     */
+    children?: React.ReactNode;
+    /**
+     * Optional click handler for the close button
+     */
+    onClose?: () => void;
+    /**
+     * Optional click handler for the "Click here" link
+     */
+    onClickHere?: () => void;
+    /**
+     * Optional CSS class name
+     */
+    className?: string;
+}
+export declare const Alert: React.FC<AlertProps>;

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

@@ -0,0 +1 @@
+export * from './Alert';

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

@@ -0,0 +1 @@
+export * from './components';

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import './Badge.css';
+export interface BadgeProps {
+    /**
+     * The variant determines the badge's color scheme
+     */
+    variant?: 'default' | 'success' | 'warning' | 'error' | 'info' | 'accent';
+    /**
+     * The size of the badge
+     */
+    size?: 'small' | 'medium';
+    /**
+     * Show a dot indicator before the text
+     */
+    dot?: boolean;
+    /**
+     * Badge content
+     */
+    children: React.ReactNode;
+    /**
+     * Optional CSS class name
+     */
+    className?: string;
+    /**
+     * Optional aria-label for accessibility
+     */
+    'aria-label'?: string;
+}
+/**
+ * DOS-styled Badge component for status indicators, labels, and tags
+ *
+ * Features:
+ * - Multiple color variants (default, success, warning, error, info, accent)
+ * - Two sizes (small, medium)
+ * - Optional dot indicator
+ * - DOS-authentic styling with CGA colors
+ * - WCAG 2.1 AA compliant
+ */
+export declare const Badge: React.FC<BadgeProps>;

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

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

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

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

package/dist/components/Breadcrumb/components/Breadcrumb.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import './Breadcrumb.css';
+export interface BreadcrumbItem {
+    /**
+     * URL/path for the breadcrumb link
+     */
+    href: string;
+    /**
+     * Display label for the breadcrumb
+     */
+    label: string;
+}
+export interface BreadcrumbProps {
+    /**
+     * Array of breadcrumb items forming the trail
+     */
+    trail?: BreadcrumbItem[];
+    /**
+     * Current page label (not a link)
+     */
+    currentLabel: string;
+    /**
+     * Show back arrow on the last trail item
+     */
+    showBackArrow?: boolean;
+    /**
+     * Custom separator character
+     */
+    separator?: string;
+    /**
+     * Custom link component (e.g., Next.js Link)
+     * If not provided, uses regular anchor tags
+     */
+    linkComponent?: React.ComponentType<{
+        href: string;
+        className?: string;
+        children: React.ReactNode;
+    }>;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+}
+/**
+ * DOS-styled Breadcrumb navigation component
+ *
+ * Features:
+ * - Configurable trail items
+ * - Optional back arrow on last trail item
+ * - Custom separator support
+ * - Framework-agnostic (works with any router)
+ * - WCAG 2.1 AA compliant
+ * - DOS-authentic styling with CGA colors
+ */
+export declare const Breadcrumb: React.FC<BreadcrumbProps>;

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

@@ -0,0 +1,2 @@
+export { Breadcrumb } from './Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb';

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

@@ -0,0 +1,2 @@
+export { Breadcrumb } from './components';
+export type { BreadcrumbProps, BreadcrumbItem } from './components';

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import './Button.css';
+export interface ButtonProps {
+    /**
+     * The variant of the button which determines its styling
+     */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'link';
+    /**
+     * The size of the button
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The button type
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * Whether the button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button is in a loading state
+     */
+    loading?: boolean;
+    /**
+     * Button content
+     */
+    children: React.ReactNode;
+    /**
+     * Optional click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Optional CSS class name
+     */
+    className?: string;
+    /**
+     * Optional aria-label for accessibility
+     */
+    'aria-label'?: string;
+    /**
+     * Full width button
+     */
+    fullWidth?: boolean;
+}
+/**
+ * DOS-styled Button component with authentic terminal aesthetics
+ *
+ * Features:
+ * - Multiple variants (primary, secondary, ghost, link)
+ * - Three sizes (small, medium, large)
+ * - Loading and disabled states
+ * - Full TypeScript support
+ * - WCAG 2.1 AA compliant
+ * - DOS-authentic styling with CGA colors
+ */
+export declare const Button: React.FC<ButtonProps>;

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

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

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

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

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import './Card.css';
+export interface CardProps {
+    /**
+     * Optional card title displayed in header
+     */
+    title?: string;
+    /**
+     * Card content
+     */
+    children: React.ReactNode;
+    /**
+     * Optional footer content
+     */
+    footer?: React.ReactNode;
+    /**
+     * Visual variant of the card
+     */
+    variant?: 'default' | 'elevated' | 'bordered' | 'glow';
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+}
+export declare const Card: React.FC<CardProps>;

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

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

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

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

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import './Checkbox.css';
+export interface CheckboxProps {
+    /**
+     * Whether the checkbox is checked
+     */
+    checked?: boolean;
+    /**
+     * Default checked state for uncontrolled usage
+     */
+    defaultChecked?: boolean;
+    /**
+     * Callback when checked state changes
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * Label text for the checkbox
+     */
+    label?: string;
+    /**
+     * Whether the checkbox is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Name attribute for form submission
+     */
+    name?: string;
+    /**
+     * Value attribute for form submission
+     */
+    value?: string;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Accessible label for screen readers
+     */
+    'aria-label'?: string;
+}
+export declare const Checkbox: React.FC<CheckboxProps>;

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

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

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

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