@beaket/ui 1.9.1 → 2.1.0
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.
- package/README.md +34 -28
- package/dist/index.js +59 -8
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,53 +1,59 @@
|
|
|
1
1
|
# @beaket/ui
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Copy-paste component library for React. Brutalist design system with multiple themes.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Components are copied into your project — you own the code.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
[Documentation](https://beaket.github.io/ui/) · [Themes](https://beaket.github.io/ui/themes) · [Components](https://beaket.github.io/ui/components)
|
|
8
|
+
|
|
9
|
+
## Quick Start
|
|
8
10
|
|
|
9
11
|
```bash
|
|
10
12
|
npx @beaket/ui init
|
|
11
13
|
npx @beaket/ui add button
|
|
12
14
|
```
|
|
13
15
|
|
|
16
|
+
```tsx
|
|
17
|
+
import { Button } from "@/components/ui/button";
|
|
18
|
+
```
|
|
19
|
+
|
|
14
20
|
## Requirements
|
|
15
21
|
|
|
16
22
|
- React 18+
|
|
17
|
-
- Tailwind CSS
|
|
23
|
+
- Tailwind CSS 4+
|
|
24
|
+
- TypeScript
|
|
18
25
|
|
|
19
|
-
|
|
26
|
+
Supports **Vite** and **Next.js**. Paths and CSS files are auto-detected.
|
|
20
27
|
|
|
21
|
-
|
|
22
|
-
| --------------------------- | -------------------------------- |
|
|
23
|
-
| `init` | Setup project configuration |
|
|
24
|
-
| `init -y` | Setup with defaults (no prompts) |
|
|
25
|
-
| `add <component>` | Add a component |
|
|
26
|
-
| `add <component> [more...]` | Add multiple components at once |
|
|
28
|
+
## CLI Reference
|
|
27
29
|
|
|
28
|
-
|
|
30
|
+
### `init`
|
|
29
31
|
|
|
30
|
-
|
|
31
|
-
# Initialize with prompts
|
|
32
|
-
npx @beaket/ui init
|
|
32
|
+
Set up configuration, select a theme, and inject CSS tokens.
|
|
33
33
|
|
|
34
|
-
|
|
35
|
-
npx @beaket/ui init
|
|
34
|
+
```bash
|
|
35
|
+
npx @beaket/ui init [options]
|
|
36
|
+
```
|
|
36
37
|
|
|
37
|
-
|
|
38
|
-
|
|
38
|
+
| Option | Description |
|
|
39
|
+
| ---------------- | -------------------------------------------------------- |
|
|
40
|
+
| `-y, --yes` | Skip prompts, use defaults |
|
|
41
|
+
| `--theme <name>` | Pre-select a [theme](https://beaket.github.io/ui/themes) |
|
|
39
42
|
|
|
40
|
-
|
|
41
|
-
npx @beaket/ui add alert button label input
|
|
43
|
+
Creates `beaket.ui.json` in your project root.
|
|
42
44
|
|
|
43
|
-
|
|
44
|
-
npx @beaket/ui add button --overwrite
|
|
45
|
-
```
|
|
45
|
+
### `add`
|
|
46
46
|
|
|
47
|
-
|
|
47
|
+
Add [components](https://beaket.github.io/ui/components) to your project. Dependencies are installed automatically.
|
|
48
48
|
|
|
49
49
|
```bash
|
|
50
|
-
npx @beaket/ui
|
|
51
|
-
npx @beaket/ui init --help
|
|
52
|
-
npx @beaket/ui add --help
|
|
50
|
+
npx @beaket/ui add <components...> [options]
|
|
53
51
|
```
|
|
52
|
+
|
|
53
|
+
| Option | Description |
|
|
54
|
+
| ----------------- | ------------------------ |
|
|
55
|
+
| `-o, --overwrite` | Overwrite existing files |
|
|
56
|
+
|
|
57
|
+
## License
|
|
58
|
+
|
|
59
|
+
MIT
|
package/dist/index.js
CHANGED
|
@@ -189,9 +189,29 @@ import pc2 from "picocolors";
|
|
|
189
189
|
import prompts2 from "prompts";
|
|
190
190
|
|
|
191
191
|
// ../../src/css-variables.css
|
|
192
|
-
var css_variables_default = "/*\n * Beaket UI Design System - Core Variables\n * This file is the single source of truth for CSS variables.\n * Used by: styles.css (via @import) and CLI init command (via build script)\n
|
|
192
|
+
var css_variables_default = "/*\n * Beaket UI Design System - Core Variables (Porcelain)\n * This file is the single source of truth for CSS variables.\n * Used by: styles.css (via @import) and CLI init command (via build script)\n *\n * BREAKING CHANGE: Colors now use --color-* prefix (Tailwind v4 convention).\n * Components use clean utilities: bg-paper, text-ink, border-chrome\n */\n\n@theme {\n /* Neutral palette */\n --color-graphite: #030509;\n --color-ink: #080b12;\n --color-branch: #05070d;\n --color-iron: #282b30;\n --color-slate: #3e4146;\n --color-zinc: #53565c;\n --color-steel: #686b70;\n --color-muted: #7a7d82;\n --color-aluminum: #a0a3a8;\n --color-chrome: #c0c5cc;\n --color-silver: #d5d8dd;\n --color-platinum: #e8eaed;\n --color-frost: #f3f4f6;\n --color-paper: #ffffff;\n --color-inverse: var(--color-paper);\n\n /* Signal colors \u2014 cold, precise, teal accent */\n --color-signal-blue: #0c6daa;\n --color-signal-red: #c41028;\n --color-signal-red-hover: #a80d22;\n --color-signal-red-active: #8c0b1c;\n --color-signal-red-text: #a80d22;\n --color-signal-green: #0a7855;\n --color-signal-green-hover: #08644a;\n --color-signal-green-active: #06503c;\n --color-signal-amber: #b58a00;\n --color-signal-amber-hover: #9a7500;\n --color-signal-amber-active: #7f6000;\n --color-signal-purple: #6122aa;\n --color-signal-cyan: #007e8c;\n\n /* Surface layers (visual depth) */\n --color-surface-0: #eff0f2;\n --color-surface-1: #f8f8fa;\n --color-surface-2: #ffffff;\n\n /* Shadows \u2014 ghostly, precise */\n --shadow-offset: 1px 1px 0px 0px var(--color-chrome);\n --shadow-offset-dark: 1px 1px 0px 0px var(--color-aluminum);\n --shadow-offset-hover: 2px 2px 0px 0px var(--color-chrome);\n --shadow-offset-active: 0px 0px 0px 0px var(--color-chrome);\n\n /* Animations */\n --animate-navigation-progress: navigation-progress 1s ease-in-out infinite;\n}\n\n@keyframes navigation-progress {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(400%);\n }\n}\n";
|
|
193
|
+
|
|
194
|
+
// ../../src/themes/eucalyptus.css
|
|
195
|
+
var eucalyptus_default = "/*\n * Beaket UI Design System - Eucalyptus Theme\n * Enterprise titanium. Navy ink, blue-gray surfaces, structured shadows.\n * Cold precision for office and productivity applications.\n */\n\n@theme {\n /* Neutral palette */\n --color-graphite: #0a1025;\n --color-ink: #162036;\n --color-branch: #1c2a42;\n --color-iron: #243250;\n --color-slate: #2f3f58;\n --color-zinc: #384d68;\n --color-steel: #3d5170;\n --color-muted: #5a6d88;\n --color-aluminum: #8295ae;\n --color-chrome: #c0cddb;\n --color-silver: #cdd8e4;\n --color-platinum: #dce3ed;\n --color-frost: #eff2f8;\n --color-paper: #f8f9fc;\n --color-inverse: var(--color-paper);\n\n /* Signal colors \u2014 deep cobalt, formal crimson, jade, brass */\n --color-signal-blue: #1535c0;\n --color-signal-red: #b81c38;\n --color-signal-red-hover: #9e1830;\n --color-signal-red-active: #841428;\n --color-signal-red-text: #9e1830;\n --color-signal-green: #0a7860;\n --color-signal-green-hover: #086450;\n --color-signal-green-active: #065040;\n --color-signal-amber: #b87500;\n --color-signal-amber-hover: #9c6300;\n --color-signal-amber-active: #805200;\n --color-signal-purple: #5b22c8;\n --color-signal-cyan: #0078a8;\n\n /* Surface layers (visual depth) */\n --color-surface-0: #e6ebf2;\n --color-surface-1: #f8f9fc;\n --color-surface-2: #ffffff;\n\n /* Shadows \u2014 blue-gray, structured */\n --shadow-offset: 2px 2px 0px 0px var(--color-chrome);\n --shadow-offset-dark: 2px 2px 0px 0px var(--color-aluminum);\n --shadow-offset-hover: 3px 3px 0px 0px var(--color-chrome);\n --shadow-offset-active: 1px 1px 0px 0px var(--color-chrome);\n\n /* Animations */\n --animate-navigation-progress: navigation-progress 1s ease-in-out infinite;\n}\n\n/*\n * Dark mode \u2014 mission control.\n * Command center at night. Navy-blue darkness with structured panels.\n * Navy-tinted neutrals. Signals glow with focused intensity.\n */\n@media (prefers-color-scheme: dark) {\n :root {\n /* Neutral palette \u2014 navy-tinted for professional dark authority */\n --color-graphite: #e8ecf4;\n --color-ink: #dce2ec;\n --color-branch: #c4cede;\n --color-iron: #b0bace;\n --color-slate: #98a2b8;\n --color-zinc: #808aa2;\n --color-steel: #687288;\n --color-muted: #546070;\n --color-aluminum: #3c4858;\n --color-chrome: #283444;\n --color-silver: #1e2836;\n --color-platinum: #141a2a;\n --color-frost: #0c1020;\n --color-paper: #060a14;\n\n /* Signal colors \u2014 professional, brightened for dark canvas */\n --color-signal-blue: #3060e0;\n --color-signal-red: #d43450;\n --color-signal-red-hover: #bc2e46;\n --color-signal-red-active: #a4283c;\n --color-signal-red-text: #e84c64;\n --color-signal-green: #14a878;\n --color-signal-green-hover: #108e64;\n --color-signal-green-active: #0c7450;\n --color-signal-amber: #d89420;\n --color-signal-amber-hover: #bc801c;\n --color-signal-amber-active: #a06c18;\n --color-signal-purple: #9454e8;\n --color-signal-cyan: #2094c8;\n\n /* Surface layers \u2014 elevation = lighter */\n --color-surface-0: #0a0e1a;\n --color-surface-1: #101422;\n --color-surface-2: #18202e;\n }\n}\n\n@keyframes navigation-progress {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(400%);\n }\n}\n";
|
|
196
|
+
|
|
197
|
+
// ../../src/themes/marigold.css
|
|
198
|
+
var marigold_default = "/*\n * Beaket UI Design System - Marigold Theme\n * A neon sign snapping on. Screen-printed posters in a design studio.\n * Light: pure white canvas, ink-black heavy shadows, maximum saturation.\n * Dark: neon signs at night \u2014 vivid electric colors on near-black canvas.\n */\n\n@theme {\n /* Neutral palette */\n --color-graphite: #0a0a0a;\n --color-ink: #121212;\n --color-branch: #1a1a1a;\n --color-iron: #262626;\n --color-slate: #3a3a3a;\n --color-zinc: #4e4e4e;\n --color-steel: #5a5a5a;\n --color-muted: #6e6e6e;\n --color-aluminum: #949494;\n --color-chrome: #c0c0c0;\n --color-silver: #cfcfcf;\n --color-platinum: #e0e0e0;\n --color-frost: #f0f0f0;\n --color-paper: #ffffff;\n --color-inverse: var(--color-paper);\n\n /* Signal colors \u2014 LOUD, max saturation, screen-print ink */\n --color-signal-blue: #0044ee;\n --color-signal-red: #e82010;\n --color-signal-red-hover: #cc1c0e;\n --color-signal-red-active: #b0180c;\n --color-signal-red-text: #cc1c0e;\n --color-signal-green: #008050;\n --color-signal-green-hover: #006a42;\n --color-signal-green-active: #005535;\n --color-signal-amber: #f07800;\n --color-signal-amber-hover: #d06800;\n --color-signal-amber-active: #b05800;\n --color-signal-purple: #8b22ff;\n --color-signal-cyan: #00b4cc;\n\n /* Surface layers (visual depth) */\n --color-surface-0: #ebebeb;\n --color-surface-1: #f8f8f8;\n --color-surface-2: #ffffff;\n\n /* Shadows \u2014 ink-black, heavy, graphic */\n --shadow-offset: 3px 3px 0px 0px var(--color-ink);\n --shadow-offset-dark: 3px 3px 0px 0px var(--color-graphite);\n --shadow-offset-hover: 4px 4px 0px 0px var(--color-ink);\n --shadow-offset-active: 1px 1px 0px 0px var(--color-ink);\n\n /* Animations */\n --animate-navigation-progress: navigation-progress 1s ease-in-out infinite;\n}\n\n/*\n * Dark mode \u2014 neon signs at night.\n * Neutrals flip (paper\u2192black, ink\u2192white). Shadows auto-flip via token\n * references (white edge on black = neon glow effect). Signal colors\n * brightened to neon-max for dark canvas contrast.\n */\n@media (prefers-color-scheme: dark) {\n :root {\n /* Neutral palette \u2014 pure achromatic for maximum neon contrast */\n --color-graphite: #f5f5f5;\n --color-ink: #ececec;\n --color-branch: #e0e0e0;\n --color-iron: #d0d0d0;\n --color-slate: #bfbfbf;\n --color-zinc: #acacac;\n --color-steel: #999999;\n --color-muted: #858585;\n --color-aluminum: #666666;\n --color-chrome: #404040;\n --color-silver: #303030;\n --color-platinum: #222222;\n --color-frost: #161616;\n --color-paper: #0a0a0a;\n\n /* Signal colors \u2014 neon-bright for dark canvas */\n --color-signal-blue: #4488ff;\n --color-signal-red: #ff2a1a;\n --color-signal-red-hover: #e52518;\n --color-signal-red-active: #cc2012;\n --color-signal-red-text: #ff4838;\n --color-signal-green: #00cc66;\n --color-signal-green-hover: #00b058;\n --color-signal-green-active: #009448;\n --color-signal-amber: #ff8800;\n --color-signal-amber-hover: #e07800;\n --color-signal-amber-active: #c06800;\n --color-signal-purple: #bb55ff;\n --color-signal-cyan: #00ccdd;\n\n /* Surface layers \u2014 elevation = lighter */\n --color-surface-0: #141414;\n --color-surface-1: #1a1a1a;\n --color-surface-2: #222222;\n }\n}\n\n@keyframes navigation-progress {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(400%);\n }\n}\n";
|
|
199
|
+
|
|
200
|
+
// ../../src/themes/porcelain.css
|
|
201
|
+
var porcelain_default = "/*\n * Beaket UI Design System - Porcelain Theme\n * Industrial precision. Etched on control panels in black synthetic lacquer.\n * Pure white, cold blue-black ink, ghostly shadows, teal accent.\n */\n\n@theme {\n /* Neutral palette */\n --color-graphite: #030508;\n --color-ink: #080b10;\n --color-branch: #05070c;\n --color-iron: #282b2f;\n --color-slate: #3e4145;\n --color-zinc: #53565b;\n --color-steel: #686b6f;\n --color-muted: #7a7d81;\n --color-aluminum: #a0a3a7;\n --color-chrome: #c0c4ca;\n --color-silver: #d5d8dc;\n --color-platinum: #e8eaec;\n --color-frost: #f3f4f6;\n --color-paper: #ffffff;\n --color-inverse: var(--color-paper);\n\n /* Signal colors \u2014 cold, precise, teal accent */\n --color-signal-blue: #0c6bae;\n --color-signal-red: #c41028;\n --color-signal-red-hover: #a80d22;\n --color-signal-red-active: #8c0b1c;\n --color-signal-red-text: #a80d22;\n --color-signal-green: #0a7653;\n --color-signal-green-hover: #086248;\n --color-signal-green-active: #064e3a;\n --color-signal-amber: #b58a00;\n --color-signal-amber-hover: #9a7500;\n --color-signal-amber-active: #7f6000;\n --color-signal-purple: #6122aa;\n --color-signal-cyan: #007e8c;\n\n /* Surface layers (visual depth) */\n --color-surface-0: #eff0f1;\n --color-surface-1: #f8f8f9;\n --color-surface-2: #ffffff;\n\n /* Shadows \u2014 ghostly, precise */\n --shadow-offset: 1px 1px 0px 0px var(--color-chrome);\n --shadow-offset-dark: 1px 1px 0px 0px var(--color-aluminum);\n --shadow-offset-hover: 2px 2px 0px 0px var(--color-chrome);\n --shadow-offset-active: 0px 0px 0px 0px var(--color-chrome);\n\n /* Animations */\n --animate-navigation-progress: navigation-progress 1s ease-in-out infinite;\n}\n\n/*\n * Dark mode \u2014 X-ray lightbox.\n * Cold blue-steel instruments in a dark examination room.\n * Neutrals tinted cold blue-black. Ghostly shadows become spectral.\n */\n@media (prefers-color-scheme: dark) {\n :root {\n /* Neutral palette \u2014 cold blue-tinted for clinical dark precision */\n --color-graphite: #e6eaee;\n --color-ink: #dce0e6;\n --color-branch: #c8d0da;\n --color-iron: #b4bcc6;\n --color-slate: #9ca4b2;\n --color-zinc: #848c9e;\n --color-steel: #6c7486;\n --color-muted: #586070;\n --color-aluminum: #3e4454;\n --color-chrome: #2a303e;\n --color-silver: #1e242e;\n --color-platinum: #161a22;\n --color-frost: #0e1016;\n --color-paper: #06080c;\n\n /* Signal colors \u2014 cold, brightened for dark canvas */\n --color-signal-blue: #1a8ed8;\n --color-signal-red: #e03040;\n --color-signal-red-hover: #c82a38;\n --color-signal-red-active: #b02430;\n --color-signal-red-text: #f04852;\n --color-signal-green: #10a66e;\n --color-signal-green-hover: #0e8e5e;\n --color-signal-green-active: #0c764e;\n --color-signal-amber: #d4a010;\n --color-signal-amber-hover: #b88c0e;\n --color-signal-amber-active: #9c780c;\n --color-signal-purple: #7e3ec4;\n --color-signal-cyan: #1aa0b8;\n\n /* Surface layers \u2014 elevation = lighter */\n --color-surface-0: #0c0e15;\n --color-surface-1: #12141d;\n --color-surface-2: #1a1c27;\n }\n}\n\n@keyframes navigation-progress {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(400%);\n }\n}\n";
|
|
202
|
+
|
|
203
|
+
// ../../src/themes/tobacco.css
|
|
204
|
+
var tobacco_default = "/*\n * Beaket UI Design System - Tobacco Theme\n * Golden hour in a library. Pampas warmth, terracotta accent.\n * Warm gray-cream surface, brown shadows, earthy signals.\n */\n\n@theme {\n /* Neutral palette */\n --color-graphite: #111110;\n --color-ink: #1a1a18;\n --color-branch: #222120;\n --color-iron: #312f2c;\n --color-slate: #46443e;\n --color-zinc: #585650;\n --color-steel: #5e5d54;\n --color-muted: #6b6a60;\n --color-aluminum: #9c9a90;\n --color-chrome: #d0cec5;\n --color-silver: #dddbd3;\n --color-platinum: #e8e7e0;\n --color-frost: #edece6;\n --color-paper: #f4f3ee;\n --color-inverse: var(--color-paper);\n\n /* Signal colors \u2014 warm, earthy: old ink, fired brick, forest, ochre */\n --color-signal-blue: #35388a;\n --color-signal-red: #b03525;\n --color-signal-red-hover: #962d1f;\n --color-signal-red-active: #7c2519;\n --color-signal-red-text: #962d1f;\n --color-signal-green: #3a7040;\n --color-signal-green-hover: #305c35;\n --color-signal-green-active: #26482a;\n --color-signal-amber: #a57218;\n --color-signal-amber-hover: #8c6014;\n --color-signal-amber-active: #734f10;\n --color-signal-purple: #7c336e;\n --color-signal-cyan: #187566;\n\n /* Surface layers (visual depth) */\n --color-surface-0: #e8e7e0;\n --color-surface-1: #f4f3ee;\n --color-surface-2: #faf9f5;\n\n /* Shadows \u2014 warm brown, grounded */\n --shadow-offset: 2px 2px 0px 0px var(--color-iron);\n --shadow-offset-dark: 2px 2px 0px 0px var(--color-slate);\n --shadow-offset-hover: 3px 3px 0px 0px var(--color-iron);\n --shadow-offset-active: 1px 1px 0px 0px var(--color-iron);\n\n /* Animations */\n --animate-navigation-progress: navigation-progress 1s ease-in-out infinite;\n}\n\n/*\n * Dark mode \u2014 whiskey bar at midnight.\n * Late-night library, amber reading lamps, worn leather.\n * Warm sepia-tinted neutrals. Signals glow like stained glass.\n */\n@media (prefers-color-scheme: dark) {\n :root {\n /* Neutral palette \u2014 warm sepia-tinted for intimate darkness */\n --color-graphite: #eceae0;\n --color-ink: #e2e0d6;\n --color-branch: #d4d0c6;\n --color-iron: #c0bcb2;\n --color-slate: #a8a49a;\n --color-zinc: #908c82;\n --color-steel: #787468;\n --color-muted: #646054;\n --color-aluminum: #4a4840;\n --color-chrome: #343230;\n --color-silver: #282624;\n --color-platinum: #1e1c1a;\n --color-frost: #141312;\n --color-paper: #0c0b0a;\n\n /* Signal colors \u2014 warm stained glass glow */\n --color-signal-blue: #5068c0;\n --color-signal-red: #d04838;\n --color-signal-red-hover: #b84030;\n --color-signal-red-active: #a03828;\n --color-signal-red-text: #e06050;\n --color-signal-green: #48a850;\n --color-signal-green-hover: #3c8e44;\n --color-signal-green-active: #307438;\n --color-signal-amber: #d09828;\n --color-signal-amber-hover: #b48420;\n --color-signal-amber-active: #987018;\n --color-signal-purple: #a05088;\n --color-signal-cyan: #28a890;\n\n /* Surface layers \u2014 elevation = lighter */\n --color-surface-0: #121110;\n --color-surface-1: #1a1918;\n --color-surface-2: #222120;\n }\n}\n\n@keyframes navigation-progress {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(400%);\n }\n}\n";
|
|
193
205
|
|
|
194
206
|
// src/commands/init.ts
|
|
207
|
+
var THEME_CSS = {
|
|
208
|
+
porcelain: porcelain_default,
|
|
209
|
+
tobacco: tobacco_default,
|
|
210
|
+
marigold: marigold_default,
|
|
211
|
+
eucalyptus: eucalyptus_default,
|
|
212
|
+
default: css_variables_default
|
|
213
|
+
};
|
|
214
|
+
var VALID_THEMES = Object.keys(THEME_CSS);
|
|
195
215
|
async function detectAliasPath() {
|
|
196
216
|
const cwd = process.cwd();
|
|
197
217
|
for (const configFile of ["tsconfig.json", "tsconfig.app.json"]) {
|
|
@@ -244,13 +264,24 @@ async function init(options) {
|
|
|
244
264
|
console.log();
|
|
245
265
|
console.log(pc2.bold("Initializing Beaket UI..."));
|
|
246
266
|
console.log();
|
|
267
|
+
if (options.theme && !VALID_THEMES.includes(options.theme)) {
|
|
268
|
+
console.log(
|
|
269
|
+
pc2.red("Error:"),
|
|
270
|
+
`Invalid theme "${options.theme}". Choose from: ${VALID_THEMES.join(", ")}`
|
|
271
|
+
);
|
|
272
|
+
process.exit(1);
|
|
273
|
+
}
|
|
247
274
|
const detectedComponentsPath = await detectAliasPath();
|
|
248
275
|
const detectedCssPath = await detectCssPath();
|
|
249
276
|
let response;
|
|
250
277
|
if (options.yes) {
|
|
251
|
-
response = {
|
|
278
|
+
response = {
|
|
279
|
+
components: detectedComponentsPath,
|
|
280
|
+
css: detectedCssPath,
|
|
281
|
+
theme: options.theme || "porcelain"
|
|
282
|
+
};
|
|
252
283
|
} else {
|
|
253
|
-
|
|
284
|
+
const answers = await prompts2([
|
|
254
285
|
{
|
|
255
286
|
type: "text",
|
|
256
287
|
name: "components",
|
|
@@ -262,26 +293,46 @@ async function init(options) {
|
|
|
262
293
|
name: "css",
|
|
263
294
|
message: "Where is your Tailwind CSS file?",
|
|
264
295
|
initial: detectedCssPath
|
|
296
|
+
},
|
|
297
|
+
{
|
|
298
|
+
type: options.theme ? null : "select",
|
|
299
|
+
name: "theme",
|
|
300
|
+
message: "Choose a theme",
|
|
301
|
+
choices: [
|
|
302
|
+
{ title: "Porcelain \u2014 pure white, cold precision, teal accent", value: "porcelain" },
|
|
303
|
+
{ title: "Tobacco \u2014 warm pampas cream, terracotta, brown shadows", value: "tobacco" },
|
|
304
|
+
{ title: "Marigold \u2014 pure white, ink-black shadows, loud signals", value: "marigold" },
|
|
305
|
+
{ title: "Eucalyptus \u2014 titanium blue-gray, navy ink, enterprise", value: "eucalyptus" }
|
|
306
|
+
],
|
|
307
|
+
initial: 0
|
|
265
308
|
}
|
|
266
309
|
]);
|
|
267
|
-
if (!
|
|
310
|
+
if (!answers.components) {
|
|
268
311
|
console.log(pc2.red("Cancelled."));
|
|
269
312
|
process.exit(1);
|
|
270
313
|
}
|
|
314
|
+
response = {
|
|
315
|
+
components: answers.components,
|
|
316
|
+
css: answers.css,
|
|
317
|
+
theme: options.theme || answers.theme || "porcelain"
|
|
318
|
+
};
|
|
271
319
|
}
|
|
272
320
|
const config = {
|
|
273
321
|
$schema: "https://beaket.dev/schema.json",
|
|
274
|
-
components: response.components
|
|
322
|
+
components: response.components,
|
|
323
|
+
theme: response.theme
|
|
275
324
|
};
|
|
276
325
|
await writeConfig(config);
|
|
277
326
|
console.log(pc2.green("\u2714"), "Created beaket.ui.json");
|
|
327
|
+
const selectedCss = THEME_CSS[response.theme];
|
|
278
328
|
if (response.css) {
|
|
279
329
|
const cssPath = path4.join(process.cwd(), response.css);
|
|
280
330
|
if (await fs3.pathExists(cssPath)) {
|
|
281
331
|
const cssContent = await fs3.readFile(cssPath, "utf-8");
|
|
282
332
|
if (!cssContent.includes("Beaket UI Design System")) {
|
|
283
|
-
await fs3.writeFile(cssPath, cssContent +
|
|
333
|
+
await fs3.writeFile(cssPath, cssContent + selectedCss);
|
|
284
334
|
console.log(pc2.green("\u2714"), `Added CSS variables to ${response.css}`);
|
|
335
|
+
console.log(pc2.green("\u2714"), `Using ${response.theme} theme`);
|
|
285
336
|
} else {
|
|
286
337
|
console.log(pc2.yellow("\u2139"), "CSS variables already exist");
|
|
287
338
|
}
|
|
@@ -300,9 +351,9 @@ async function init(options) {
|
|
|
300
351
|
}
|
|
301
352
|
|
|
302
353
|
// src/index.ts
|
|
303
|
-
var version = "1.
|
|
354
|
+
var version = "2.1.0";
|
|
304
355
|
var program = new Command();
|
|
305
356
|
program.name("@beaket/ui").description("CLI for adding Beaket UI components to your project").version(version);
|
|
306
|
-
program.command("init").description("Initialize Beaket UI in your project").option("-y, --yes", "Use defaults without prompting").action(init);
|
|
357
|
+
program.command("init").description("Initialize Beaket UI in your project").option("-y, --yes", "Use defaults without prompting").option("--theme <preset>", "Theme: porcelain, tobacco, marigold, or eucalyptus").action(init);
|
|
307
358
|
program.command("add").description("Add components to your project").argument("<components...>", "Component names to add").option("-o, --overwrite", "Overwrite existing files").action(add);
|
|
308
359
|
program.parse();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@beaket/ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "2.1.0",
|
|
4
4
|
"description": "CLI tool for adding Beaket UI components to your project",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"commander": "14.0.3",
|
|
26
|
-
"fs-extra": "11.3.
|
|
26
|
+
"fs-extra": "11.3.4",
|
|
27
27
|
"picocolors": "1.1.1",
|
|
28
28
|
"prompts": "2.4.2"
|
|
29
29
|
},
|