eidotter 0.16.0 → 0.16.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +241 -250
  2. package/dist/components/Input/components/Input.d.ts +10 -4
  3. package/dist/components/Modal/components/Modal.d.ts +13 -21
  4. package/dist/components/Tabs/components/Tabs.d.ts +2 -2
  5. package/dist/eidotter.css +1 -1
  6. package/dist/index.d.ts +2 -1
  7. package/dist/index.es.js +7990 -3705
  8. package/dist/index.umd.js +24 -3
  9. package/guidelines/README.md +118 -106
  10. package/package.json +5 -2
package/guidelines/README.md CHANGED
@@ -1,106 +1,118 @@
1
- # eidotter Design System
2
-
3
- A DOS-themed React component library with authentic CGA/amber phosphor aesthetics.
4
-
5
- ## Overview
6
-
7
- eidotter provides 18 ready-to-use components with consistent DOS terminal styling:
8
-
9
- - **Dark theme only** - Amber-on-black phosphor CRT aesthetic
10
- - **CGA color palette** - 16 authentic CGA colors + amber extensions
11
- - **Monospace typography** - JetBrains Mono with system fallbacks
12
- - **Minimal rounded corners** - 2-4px max (DOS aesthetic)
13
- - **Phosphor glow effects** - Authentic CRT visual effects
14
-
15
- ## Quick Start
16
-
17
- ```tsx
18
- import { Button, Card, Input } from 'eidotter';
19
- import 'eidotter/styles';
20
-
21
- function App() {
22
- return (
23
- <Card title="Login">
24
- <Input placeholder="Username" />
25
- <Button variant="primary">Submit</Button>
26
- </Card>
27
- );
28
- }
29
- ```
30
-
31
- ## Available Components
32
-
33
- | Component | Purpose |
34
- |-----------|---------|
35
- | Alert | Dismissible notification messages |
36
- | Badge | Status indicators and tags |
37
- | Breadcrumb | Navigation path display |
38
- | Button | User actions and form submission |
39
- | Card | Content container with optional header/footer |
40
- | Checkbox | Boolean form inputs |
41
- | CommandPrompt | DOS command line display |
42
- | Icon | 89 DOS-styled icons |
43
- | Input | Text entry fields |
44
- | Modal | Dialog overlays |
45
- | Progress | Loading and completion bars |
46
- | RetroEffects | CRT scanlines and phosphor glow |
47
- | Accordion | Collapsible sections (Section, AccordionFill) |
48
- | Stat | Metric display with trends |
49
- | Switch | Toggle controls |
50
- | Tabs | Tab-based navigation |
51
- | Terminal | Window container with title bar |
52
- | TimelineNode | Timeline markers |
53
-
54
- ## Key Design Principle
55
-
56
- **NEVER hardcode colors.** Always use design tokens:
57
-
58
- ```tsx
59
- // Correct - use semantic tokens
60
- <div className="bg-dos-bg-primary text-dos-text-accent">
61
-
62
- // Wrong - hardcoded values
63
- <div style={{ background: '#020003', color: '#e5b936' }}>
64
- ```
65
-
66
- ## Files in This Guide
67
-
68
- - [components.md](./components.md) - When to use each component, props, examples
69
- - [tokens.md](./tokens.md) - Color palette, typography, spacing reference
70
- - [patterns.md](./patterns.md) - Common composition and layout patterns
71
-
72
- ## Integration
73
-
74
- ### CSS Import
75
-
76
- ```css
77
- @import "eidotter/tokens.css";
78
- @import "eidotter/styles";
79
-
80
- :root { color-scheme: dark; }
81
- html { background: var(--color-semantic-background-primary); }
82
- body {
83
- color: var(--color-semantic-text-primary);
84
- font-family: var(--typography-font-family-primary);
85
- }
86
- ```
87
-
88
- ### Tailwind Preset
89
-
90
- ```js
91
- // tailwind.config.js
92
- module.exports = {
93
- presets: [require('eidotter/tailwind.preset.cjs')],
94
- }
95
- ```
96
-
97
- ## Anti-Patterns
98
-
99
- These patterns break the eidotter aesthetic:
100
-
101
- - Hardcoded hex colors (`color: #FFB000`)
102
- - Light backgrounds
103
- - Sans-serif fonts
104
- - Rounded corners > 4px (`rounded-xl`, `rounded-full`)
105
- - `prefers-color-scheme` (eidotter is dark-only)
106
- - Arbitrary Tailwind values for colors (`bg-[#1a1a1a]`)
1
+ # eidotter Design System
2
+
3
+ A DOS-themed React component library with authentic CGA/amber phosphor aesthetics.
4
+
5
+ ## Overview
6
+
7
+ eidotter provides 31 ready-to-use components with consistent DOS terminal styling:
8
+
9
+ - **Dark theme only** - Amber-on-black phosphor CRT aesthetic
10
+ - **CGA color palette** - 16 authentic CGA colors + amber extensions
11
+ - **Monospace typography** - JetBrains Mono with system fallbacks
12
+ - **Minimal rounded corners** - 2-4px max (DOS aesthetic)
13
+ - **Phosphor glow effects** - Authentic CRT visual effects
14
+ - **React Aria** - Accessible keyboard/focus handling on interactive components
15
+
16
+ ## Quick Start
17
+
18
+ ```tsx
19
+ import { Button, Card, Input } from 'eidotter';
20
+ import 'eidotter/styles'; // Component CSS (includes Tailwind utilities)
21
+ import 'eidotter/tokens.css'; // CSS variable definitions (required)
22
+
23
+ function App() {
24
+ return (
25
+ <Card title="Login">
26
+ <Input label="Username" placeholder="Enter username..." />
27
+ <Button variant="primary">Submit</Button>
28
+ </Card>
29
+ );
30
+ }
31
+ ```
32
+
33
+ ## Available Components
34
+
35
+ | Component | Purpose |
36
+ |-----------|---------|
37
+ | Accordion | Collapsible sections (Section, AccordionFill) |
38
+ | Alert | Dismissible notification messages |
39
+ | Badge | Status indicators and tags |
40
+ | Breadcrumb | Navigation path display |
41
+ | Button | User actions and form submission |
42
+ | Card | Content container with optional header/footer |
43
+ | ChatMessage | Chat message with role-based styling |
44
+ | ChatHistory | Scrollable message list with auto-scroll |
45
+ | ChatInput | Multiline textarea with Enter-to-send |
46
+ | ChatContainer | Composes ChatHistory + ChatInput |
47
+ | Checkbox | Boolean form inputs with DOS bracket indicator |
48
+ | CommandPrompt | DOS command line display |
49
+ | FilterBar | Multi-select toggle group |
50
+ | Footer | Site footer with legal links |
51
+ | Icon | 89 DOS-styled icons |
52
+ | InlineExpand | Inline disclosure widget |
53
+ | Input | Text entry fields with label and error support |
54
+ | Modal | Dialog overlays |
55
+ | Nav | Responsive navigation (desktop + mobile) |
56
+ | Progress | Loading and completion bars |
57
+ | RetroEffects | CRT scanlines and phosphor glow |
58
+ | Separator | Horizontal/vertical dividers |
59
+ | Stat | Metric display with trends |
60
+ | Switch | Toggle controls |
61
+ | Tabs | Tab-based navigation |
62
+ | Tag | Interactive labels and filter chips |
63
+ | Terminal | Window container with title bar |
64
+ | TextScramble | DOS text decode animation |
65
+ | TimelineContainer | Multi-zoom timeline views |
66
+ | TimelineNode | Timeline markers |
67
+
68
+ ## Key Design Principle
69
+
70
+ **NEVER hardcode colors.** Always use design tokens:
71
+
72
+ ```tsx
73
+ // Correct - use semantic tokens
74
+ <div className="bg-dos-bg-primary text-dos-text-accent">
75
+
76
+ // Wrong - hardcoded values
77
+ <div style={{ background: '#020003', color: '#e5b936' }}>
78
+ ```
79
+
80
+ ## Files in This Guide
81
+
82
+ - [components.md](./components.md) - When to use each component, props, examples
83
+ - [patterns.md](./patterns.md) - Common composition and layout patterns
84
+
85
+ ## Integration
86
+
87
+ ### CSS Import (required)
88
+
89
+ ```tsx
90
+ import 'eidotter/styles'; // Component CSS (includes compiled Tailwind utilities)
91
+ import 'eidotter/tokens.css'; // Design token CSS variables
92
+
93
+ // Optional: import a theme
94
+ import 'eidotter/themes/amber-mono.css';
95
+ ```
96
+
97
+ ### Tailwind Preset (optional)
98
+
99
+ Use eidotter tokens as Tailwind classes in your own code:
100
+
101
+ ```js
102
+ // tailwind.config.js
103
+ module.exports = {
104
+ presets: [require('eidotter/tailwind.preset')],
105
+ content: ['./src/**/*.{js,jsx,ts,tsx}'],
106
+ };
107
+ ```
108
+
109
+ ## Anti-Patterns
110
+
111
+ These patterns break the eidotter aesthetic:
112
+
113
+ - Hardcoded hex colors (`color: #FFB000`)
114
+ - Light backgrounds
115
+ - Sans-serif fonts
116
+ - Rounded corners > 4px (`rounded-xl`, `rounded-full`)
117
+ - `prefers-color-scheme` (eidotter is dark-only)
118
+ - Arbitrary Tailwind values for colors (`bg-[#1a1a1a]`)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "eidotter",
3
- "version": "0.16.0",
3
+ "version": "0.16.2",
4
4
  "type": "module",
5
5
  "description": "A DOS Themed Design System",
6
6
  "main": "./dist/index.umd.js",
@@ -101,11 +101,12 @@
101
101
  "@types/react": "^19.1.2",
102
102
  "@types/react-dom": "^19.0.0",
103
103
  "@vitejs/plugin-react": "^5.1.2",
104
+ "autoprefixer": "^10.4.27",
104
105
  "chromatic": "^15.2.0",
105
106
  "cross-env": "^10.1.0",
106
107
  "dotenv": "^17.3.1",
107
108
  "eslint": "^10.0.3",
108
- "eslint-plugin-react-hooks": "^7.1.0-canary-e33071c6-20260224",
109
+ "eslint-plugin-react-hooks": "^7.0.1",
109
110
  "figma-js": "^1.16.1-0",
110
111
  "gh-pages": "^6.3.0",
111
112
  "glob": "^13.0.0",
@@ -113,10 +114,12 @@
113
114
  "jest": "^30.2.0",
114
115
  "jest-environment-jsdom": "^30.0.2",
115
116
  "leva": "^0.10.1",
117
+ "postcss": "^8.5.8",
116
118
  "remark-gfm": "^4.0.1",
117
119
  "storybook": "^10.2.7",
118
120
  "style-dictionary": "^5.1.1",
119
121
  "tailwind-merge": "^3.5.0",
122
+ "tailwindcss": "^3.4.19",
120
123
  "tailwindcss-animate": "^1.0.7",
121
124
  "tailwindcss-react-aria-components": "^2.0.1",
122
125
  "ts-jest": "^29.4.0",