@deepfuture/dui-cdn 0.0.2 → 0.0.3

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 (2) hide show
  1. package/README.md +183 -0
  2. package/package.json +2 -2
package/README.md ADDED
@@ -0,0 +1,183 @@
1
+ # DUI
2
+
3
+ [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
4
+ [![npm](https://img.shields.io/npm/v/@deepfuture/dui-core.svg)](https://www.npmjs.com/package/@deepfuture/dui-core)
5
+
6
+ Unstyled [Lit](https://lit.dev) web component library with composable themes.
7
+
8
+ Components provide structure and behavior with zero visual opinions. Themes provide all aesthetics — colors, spacing, typography, borders. Swap the theme to completely change the look without touching component code.
9
+
10
+ **[Live Docs & Demos →](https://deepfuturenow.github.io/dui/)**
11
+
12
+ ## Install
13
+
14
+ **npm / pnpm / yarn:**
15
+
16
+ ```bash
17
+ npm install @deepfuture/dui-core @deepfuture/dui-components @deepfuture/dui-theme-default
18
+ ```
19
+
20
+ **Deno:**
21
+
22
+ ```typescript
23
+ import { applyTheme } from "npm:@deepfuture/dui-core/apply-theme";
24
+ import { defaultTheme } from "npm:@deepfuture/dui-theme-default";
25
+ import { allComponents } from "npm:@deepfuture/dui-components/all";
26
+ ```
27
+
28
+ **CDN (zero setup):**
29
+
30
+ ```html
31
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@deepfuture/dui-cdn/dui.min.js"></script>
32
+ ```
33
+
34
+ ## Quick Start
35
+
36
+ ```typescript
37
+ import { applyTheme } from "@deepfuture/dui-core/apply-theme";
38
+ import { defaultTheme } from "@deepfuture/dui-theme-default";
39
+ import { DuiButton } from "@deepfuture/dui-components/button";
40
+ import { DuiDialog, DuiDialogTrigger, DuiDialogPopup, DuiDialogClose } from "@deepfuture/dui-components/dialog";
41
+
42
+ // Register components with a theme — this is the only setup needed
43
+ applyTheme({
44
+ theme: defaultTheme,
45
+ components: [DuiButton, DuiDialog, DuiDialogTrigger, DuiDialogPopup, DuiDialogClose],
46
+ });
47
+ ```
48
+
49
+ ```html
50
+ <dui-dialog>
51
+ <dui-dialog-trigger>
52
+ <dui-button>Open Dialog</dui-button>
53
+ </dui-dialog-trigger>
54
+ <dui-dialog-popup>
55
+ <h2>Hello</h2>
56
+ <p>This is a dialog.</p>
57
+ <dui-dialog-close>
58
+ <dui-button variant="outline">Close</dui-button>
59
+ </dui-dialog-close>
60
+ </dui-dialog-popup>
61
+ </dui-dialog>
62
+ ```
63
+
64
+ Or register everything at once:
65
+
66
+ ```typescript
67
+ import { applyTheme } from "@deepfuture/dui-core/apply-theme";
68
+ import { defaultTheme } from "@deepfuture/dui-theme-default";
69
+ import { allComponents } from "@deepfuture/dui-components/all";
70
+
71
+ applyTheme({ theme: defaultTheme, components: allComponents });
72
+ ```
73
+
74
+ ## How It Works
75
+
76
+ `applyTheme()` takes unstyled component classes and a theme, creates themed subclasses with composed styles, and registers them as custom elements.
77
+
78
+ ```
79
+ Component structural CSS → Theme base styles → Theme component styles
80
+ ```
81
+
82
+ No build step, no decorators, no code generation — just a function call. Components are standard web components that work in any framework or plain HTML.
83
+
84
+ ## Components
85
+
86
+ 43 component families, 85+ elements total.
87
+
88
+ | Category | Components |
89
+ |----------|-----------|
90
+ | **Actions** | Button, Link, Toggle, Toggle Group, Toolbar |
91
+ | **Forms** | Input, Textarea, Select, Combobox, Checkbox, Checkbox Group, Radio, Radio Group, Switch, Slider, Number Field, Dropzone |
92
+ | **Data Display** | Badge, Avatar, Calendar, Data Table, Progress, Spinner, Separator, Trunc |
93
+ | **Overlays** | Dialog, Alert Dialog, Popover, Tooltip, Menu, Menubar, Preview Card, Command |
94
+ | **Disclosure** | Accordion, Collapsible, Tabs |
95
+ | **Navigation** | Breadcrumb, Sidebar (with 12 sub-components) |
96
+ | **Layout** | HStack, VStack, Center, Page Inset, Scroll Area, Portal |
97
+ | **Utility** | Icon |
98
+
99
+ ## Styling
100
+
101
+ DUI uses a two-layer styling approach:
102
+
103
+ ### CSS Variables — for the variant system
104
+
105
+ Variables control values that variants, sizes, and states toggle:
106
+
107
+ ```css
108
+ /* Override variant colors */
109
+ dui-button {
110
+ --button-bg: linear-gradient(135deg, pink, purple);
111
+ --button-radius: var(--radius-full);
112
+ }
113
+ ```
114
+
115
+ ### `::part(root)` — for everything else
116
+
117
+ Every component exposes a `root` CSS part for full CSS expressiveness:
118
+
119
+ ```css
120
+ /* Frosted glass effect */
121
+ dui-dialog-popup::part(root) {
122
+ backdrop-filter: blur(12px);
123
+ }
124
+
125
+ /* Custom hover animation */
126
+ dui-button::part(root):hover {
127
+ filter: brightness(1.25);
128
+ transform: translateY(-1px);
129
+ }
130
+
131
+ /* Glow shadow */
132
+ dui-badge::part(root) {
133
+ box-shadow: 0 0 16px oklch(0.7 0.2 280 / 0.4);
134
+ }
135
+ ```
136
+
137
+ No need for the library to anticipate every CSS property — `::part()` gives you direct access.
138
+
139
+ ## Dark Mode
140
+
141
+ DUI uses CSS custom properties for theming. Toggle dark mode by adding `class="dark"` to a parent element:
142
+
143
+ ```html
144
+ <body class="dark">
145
+ <!-- All DUI components render in dark mode -->
146
+ </body>
147
+ ```
148
+
149
+ ## Packages
150
+
151
+ | Package | Purpose |
152
+ |---------|---------|
153
+ | [`@deepfuture/dui-core`](https://www.npmjs.com/package/@deepfuture/dui-core) | `applyTheme()`, event factory, base styles |
154
+ | [`@deepfuture/dui-components`](https://www.npmjs.com/package/@deepfuture/dui-components) | Unstyled component classes |
155
+ | [`@deepfuture/dui-theme-default`](https://www.npmjs.com/package/@deepfuture/dui-theme-default) | Design tokens + aesthetic styles |
156
+ | [`@deepfuture/dui-cdn`](https://www.npmjs.com/package/@deepfuture/dui-cdn) | Pre-bundled CDN build (all deps inlined) |
157
+
158
+ ## Dev Tools
159
+
160
+ ### Theme Editor
161
+
162
+ A visual editor for design tokens. Edit colors with OKLCH sliders, tweak spacing and typography, and export your customized `tokens.css`.
163
+
164
+ ### Inspector
165
+
166
+ Toggle with **Ctrl+Shift+I** to inspect any DUI component at runtime — view properties, design tokens, style layers, slots, and CSS parts. Also exposes `window.__dui_inspect()` for programmatic access by LLM agents via Chrome DevTools.
167
+
168
+ ## Documentation
169
+
170
+ - **[Live Docs](https://deepfuturenow.github.io/dui/)** — interactive demos for every component
171
+ - [Architecture](docs/architecture.md) — mental model, package responsibilities, design decisions
172
+ - [Creating Components](docs/creating-components.md) — guide for adding new components
173
+ - [Theming](docs/theming.md) — theme system, design tokens, writing component styles
174
+ - [Consuming](docs/consuming.md) — integrating DUI into an app
175
+ - [Accessibility](docs/accessibility.md) — accessibility patterns and guidelines
176
+
177
+ ## Contributing
178
+
179
+ See [CONTRIBUTING.md](CONTRIBUTING.md) for dev setup, code conventions, and PR guidelines.
180
+
181
+ ## License
182
+
183
+ [MIT](LICENSE)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deepfuture/dui-cdn",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "description": "DUI CDN bundle — all components, default theme, Lit inlined. Zero dependencies.",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -27,7 +27,7 @@
27
27
  ],
28
28
  "repository": {
29
29
  "type": "git",
30
- "url": "https://github.com/nicholasgasior/dui.git"
30
+ "url": "https://github.com/deepfuturenow/dui.git"
31
31
  },
32
32
  "sideEffects": true
33
33
  }