create-bearnie 0.4.0 → 0.4.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.
- package/README.md +15 -4
- package/dist/index.js +56 -74
- package/package.json +3 -3
- package/template/package.json +3 -3
- package/template/src/styles/bearnie.css +259 -0
- package/template/src/styles/global.css +1 -168
- package/dist/index.d.ts +0 -1
package/README.md
CHANGED
|
@@ -22,19 +22,21 @@ Include all components from the start:
|
|
|
22
22
|
npx create-bearnie my-app --full
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
-
This fetches all components from the registry
|
|
25
|
+
This fetches all components from the registry, installs them in `src/components/bearnie/`, and adds a barrel export at `src/components/bearnie/index.ts`.
|
|
26
26
|
|
|
27
27
|
## What's included
|
|
28
28
|
|
|
29
|
-
- Astro
|
|
29
|
+
- Astro 7 with TypeScript
|
|
30
30
|
- Tailwind CSS v4 (via `@tailwindcss/vite`)
|
|
31
31
|
- Bearnie CSS variables and theme
|
|
32
32
|
- Simple landing page to get started
|
|
33
33
|
- Ready for components via `npx bearnie add`
|
|
34
34
|
|
|
35
35
|
With `--full` flag:
|
|
36
|
-
|
|
37
|
-
-
|
|
36
|
+
|
|
37
|
+
- All Bearnie UI components in `src/components/bearnie/`
|
|
38
|
+
- Barrel export (`src/components/bearnie/index.ts`) for named imports
|
|
39
|
+
- Utility functions (`cn`, runtime helpers, `focus-trap`)
|
|
38
40
|
- Additional dependencies (`clsx`, `tailwind-merge`)
|
|
39
41
|
|
|
40
42
|
## After creating your project
|
|
@@ -49,6 +51,15 @@ Without `--full`, add components as needed:
|
|
|
49
51
|
|
|
50
52
|
```bash
|
|
51
53
|
npx bearnie add button card dialog
|
|
54
|
+
npx bearnie add barrel
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Import from the barrel after adding it:
|
|
58
|
+
|
|
59
|
+
```astro
|
|
60
|
+
---
|
|
61
|
+
import { Button, Card } from "@/components/bearnie";
|
|
62
|
+
---
|
|
52
63
|
```
|
|
53
64
|
|
|
54
65
|
## Learn more
|
package/dist/index.js
CHANGED
|
@@ -14,65 +14,25 @@ function parseFullArg() {
|
|
|
14
14
|
return process.argv.includes("--full");
|
|
15
15
|
}
|
|
16
16
|
var REGISTRY_URL = "https://bearnie.dev/registry";
|
|
17
|
-
var
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"button",
|
|
26
|
-
"button-group",
|
|
27
|
-
"card",
|
|
28
|
-
"carousel",
|
|
29
|
-
"checkbox",
|
|
30
|
-
"collapsible",
|
|
31
|
-
"command",
|
|
32
|
-
"context-menu",
|
|
33
|
-
"dialog",
|
|
34
|
-
"dropdown-menu",
|
|
35
|
-
"empty",
|
|
36
|
-
"file-upload",
|
|
37
|
-
"hover-card",
|
|
38
|
-
"input",
|
|
39
|
-
"input-group",
|
|
40
|
-
"input-otp",
|
|
41
|
-
"kbd",
|
|
42
|
-
"label",
|
|
43
|
-
"menubar",
|
|
44
|
-
"pagination",
|
|
45
|
-
"popover",
|
|
46
|
-
"progress",
|
|
47
|
-
"radio",
|
|
48
|
-
"scroll-area",
|
|
49
|
-
"select",
|
|
50
|
-
"separator",
|
|
51
|
-
"sheet",
|
|
52
|
-
"sidebar",
|
|
53
|
-
"skeleton",
|
|
54
|
-
"slider",
|
|
55
|
-
"spinner",
|
|
56
|
-
"stepper",
|
|
57
|
-
"switch",
|
|
58
|
-
"table",
|
|
59
|
-
"tabs",
|
|
60
|
-
"textarea",
|
|
61
|
-
"toast",
|
|
62
|
-
"toggle",
|
|
63
|
-
"tooltip",
|
|
64
|
-
"tree"
|
|
17
|
+
var UTILITY_NAMES = [
|
|
18
|
+
"focus-trap",
|
|
19
|
+
"ui-runtime-loader",
|
|
20
|
+
"ui-runtime-boot",
|
|
21
|
+
"ui-runtime-disclosure-triggers",
|
|
22
|
+
"ui-runtime-popover",
|
|
23
|
+
"ui-runtime-command",
|
|
24
|
+
"ui-runtime-combobox"
|
|
65
25
|
];
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
return null;
|
|
26
|
+
function resolveInstallPath(targetDir, filePath, type) {
|
|
27
|
+
if (type === "utility" || filePath.startsWith("utils/")) {
|
|
28
|
+
return path.join(targetDir, "src/utils", filePath.replace(/^utils\//, ""));
|
|
29
|
+
}
|
|
30
|
+
if (type === "styles" || filePath.startsWith("styles/")) {
|
|
31
|
+
return path.join(targetDir, "src/styles", filePath.replace(/^styles\//, ""));
|
|
73
32
|
}
|
|
33
|
+
return path.join(targetDir, "src/components/bearnie", filePath);
|
|
74
34
|
}
|
|
75
|
-
async function
|
|
35
|
+
async function fetchRegistryEntry(name) {
|
|
76
36
|
try {
|
|
77
37
|
const response = await fetch(`${REGISTRY_URL}/${name}.json`);
|
|
78
38
|
if (!response.ok) return null;
|
|
@@ -81,6 +41,20 @@ async function fetchUtility(name) {
|
|
|
81
41
|
return null;
|
|
82
42
|
}
|
|
83
43
|
}
|
|
44
|
+
async function fetchRegistryIndex() {
|
|
45
|
+
const response = await fetch(`${REGISTRY_URL}/index.json`);
|
|
46
|
+
if (!response.ok) {
|
|
47
|
+
throw new Error("Failed to fetch registry index");
|
|
48
|
+
}
|
|
49
|
+
return await response.json();
|
|
50
|
+
}
|
|
51
|
+
async function writeRegistryFiles(targetDir, entry) {
|
|
52
|
+
for (const file of entry.files) {
|
|
53
|
+
const filePath = resolveInstallPath(targetDir, file.path, entry.type);
|
|
54
|
+
await fs.ensureDir(path.dirname(filePath));
|
|
55
|
+
await fs.writeFile(filePath, file.content);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
84
58
|
async function main() {
|
|
85
59
|
const fullInstall = parseFullArg();
|
|
86
60
|
console.log(`
|
|
@@ -144,16 +118,16 @@ ${fullInstall ? ` ${pc.dim("Full install: including all components")}
|
|
|
144
118
|
console.log(`
|
|
145
119
|
${pc.dim("Fetching components from registry...")}
|
|
146
120
|
`);
|
|
147
|
-
await fs.ensureDir(path.join(targetDir, "src", "components", "
|
|
121
|
+
await fs.ensureDir(path.join(targetDir, "src", "components", "bearnie"));
|
|
148
122
|
await fs.ensureDir(path.join(targetDir, "src", "utils"));
|
|
149
|
-
const
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
123
|
+
for (const utilityName of UTILITY_NAMES) {
|
|
124
|
+
const utility = await fetchRegistryEntry(utilityName);
|
|
125
|
+
if (utility?.files) {
|
|
126
|
+
await writeRegistryFiles(targetDir, utility);
|
|
127
|
+
console.log(` ${pc.green("\u2713")} Added ${utilityName} utility`);
|
|
128
|
+
} else {
|
|
129
|
+
console.log(` ${pc.yellow("!")} Failed to fetch ${utilityName} utility`);
|
|
155
130
|
}
|
|
156
|
-
console.log(` ${pc.green("\u2713")} Added focus-trap utility`);
|
|
157
131
|
}
|
|
158
132
|
const cnContent = `import { clsx, type ClassValue } from "clsx";
|
|
159
133
|
import { twMerge } from "tailwind-merge";
|
|
@@ -164,23 +138,30 @@ export function cn(...inputs: ClassValue[]) {
|
|
|
164
138
|
`;
|
|
165
139
|
await fs.writeFile(path.join(targetDir, "src", "utils", "cn.ts"), cnContent);
|
|
166
140
|
console.log(` ${pc.green("\u2713")} Added cn utility`);
|
|
141
|
+
const registryIndex = await fetchRegistryIndex();
|
|
142
|
+
const componentNames = registryIndex.components.map((component) => component.name).filter((name) => name !== "styles" && name !== "barrel");
|
|
167
143
|
let installed = 0;
|
|
168
144
|
let failed = 0;
|
|
169
|
-
for (const componentName of
|
|
170
|
-
const component = await
|
|
145
|
+
for (const componentName of componentNames) {
|
|
146
|
+
const component = await fetchRegistryEntry(componentName);
|
|
171
147
|
if (component?.files) {
|
|
172
|
-
|
|
173
|
-
const filePath = path.join(targetDir, "src", file.name);
|
|
174
|
-
await fs.ensureDir(path.dirname(filePath));
|
|
175
|
-
await fs.writeFile(filePath, file.content);
|
|
176
|
-
}
|
|
148
|
+
await writeRegistryFiles(targetDir, component);
|
|
177
149
|
installed++;
|
|
178
|
-
process.stdout.write(
|
|
150
|
+
process.stdout.write(
|
|
151
|
+
`\r ${pc.green("\u2713")} Installed ${installed}/${componentNames.length} components`
|
|
152
|
+
);
|
|
179
153
|
} else {
|
|
180
154
|
failed++;
|
|
181
155
|
}
|
|
182
156
|
}
|
|
183
157
|
console.log("");
|
|
158
|
+
const barrel = await fetchRegistryEntry("barrel");
|
|
159
|
+
if (barrel?.files) {
|
|
160
|
+
await writeRegistryFiles(targetDir, barrel);
|
|
161
|
+
console.log(` ${pc.green("\u2713")} Added barrel export`);
|
|
162
|
+
} else {
|
|
163
|
+
console.log(` ${pc.yellow("!")} Failed to fetch barrel export`);
|
|
164
|
+
}
|
|
184
165
|
if (failed > 0) {
|
|
185
166
|
console.log(` ${pc.yellow("!")} ${failed} components failed to fetch`);
|
|
186
167
|
}
|
|
@@ -188,7 +169,7 @@ export function cn(...inputs: ClassValue[]) {
|
|
|
188
169
|
const pkg2 = await fs.readJson(pkgPath2);
|
|
189
170
|
pkg2.dependencies = {
|
|
190
171
|
...pkg2.dependencies,
|
|
191
|
-
|
|
172
|
+
clsx: "^2.1.1",
|
|
192
173
|
"tailwind-merge": "^3.3.0"
|
|
193
174
|
};
|
|
194
175
|
await fs.writeJson(pkgPath2, pkg2, { spaces: 2 });
|
|
@@ -230,7 +211,8 @@ Thumbs.db
|
|
|
230
211
|
${pc.dim("2.")} npm install
|
|
231
212
|
${pc.dim("3.")} npm run dev
|
|
232
213
|
|
|
233
|
-
${pc.dim("All components are in")} ${pc.cyan("src/components/
|
|
214
|
+
${pc.dim("All components are in")} ${pc.cyan("src/components/bearnie/")}
|
|
215
|
+
${pc.dim("Import from")} ${pc.cyan("@/components/bearnie")} ${pc.dim("via")} ${pc.cyan("index.ts")}
|
|
234
216
|
|
|
235
217
|
${pc.dim("Browse components at")} ${link("bearnie.dev/docs/components", "https://bearnie.dev/docs/components")}
|
|
236
218
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "create-bearnie",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.2",
|
|
4
4
|
"description": "Create a new Astro project with Bearnie UI components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"template"
|
|
13
13
|
],
|
|
14
14
|
"scripts": {
|
|
15
|
-
"build": "tsup src/index.ts --format esm --
|
|
15
|
+
"build": "tsup src/index.ts --format esm --clean",
|
|
16
16
|
"dev": "tsup src/index.ts --format esm --watch"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"@types/node": "^20.14.9",
|
|
26
26
|
"@types/prompts": "^2.4.9",
|
|
27
27
|
"tsup": "^8.1.0",
|
|
28
|
-
"typescript": "^5.
|
|
28
|
+
"typescript": "^5.7.3"
|
|
29
29
|
},
|
|
30
30
|
"engines": {
|
|
31
31
|
"node": ">=18"
|
package/template/package.json
CHANGED
|
@@ -8,11 +8,11 @@
|
|
|
8
8
|
"preview": "astro preview"
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"astro": "^
|
|
11
|
+
"astro": "^7.1.6"
|
|
12
12
|
},
|
|
13
13
|
"devDependencies": {
|
|
14
|
-
"@tailwindcss/vite": "^4.
|
|
14
|
+
"@tailwindcss/vite": "^4.3.3",
|
|
15
15
|
"@tailwindcss/forms": "^0.5.11",
|
|
16
|
-
"tailwindcss": "^4.
|
|
16
|
+
"tailwindcss": "^4.3.3"
|
|
17
17
|
}
|
|
18
18
|
}
|
|
@@ -0,0 +1,259 @@
|
|
|
1
|
+
@theme {
|
|
2
|
+
/* Typography */
|
|
3
|
+
--font-sans: Inter, sans-serif;
|
|
4
|
+
--font-mono: Geist Mono, monospace;
|
|
5
|
+
|
|
6
|
+
/* Border Radius - Base: 0.625rem (10px) */
|
|
7
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
8
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
9
|
+
--radius-lg: var(--radius);
|
|
10
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
11
|
+
--radius-2xl: calc(var(--radius) + 8px);
|
|
12
|
+
--radius-full: 9999px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@theme inline {
|
|
16
|
+
/* Semantic Colors - mapped to CSS variables */
|
|
17
|
+
--color-background: var(--background);
|
|
18
|
+
--color-foreground: var(--foreground);
|
|
19
|
+
--color-card: var(--card);
|
|
20
|
+
--color-card-foreground: var(--card-foreground);
|
|
21
|
+
--color-popover: var(--popover);
|
|
22
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
23
|
+
--color-primary: var(--primary);
|
|
24
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
25
|
+
--color-secondary: var(--secondary);
|
|
26
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
27
|
+
--color-muted: var(--muted);
|
|
28
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
29
|
+
--color-accent: var(--accent);
|
|
30
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
31
|
+
--color-destructive: var(--destructive);
|
|
32
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
33
|
+
--color-success: var(--success);
|
|
34
|
+
--color-success-foreground: var(--success-foreground);
|
|
35
|
+
--color-warning: var(--warning);
|
|
36
|
+
--color-warning-foreground: var(--warning-foreground);
|
|
37
|
+
--color-info: var(--info);
|
|
38
|
+
--color-info-foreground: var(--info-foreground);
|
|
39
|
+
--color-border: var(--border);
|
|
40
|
+
--color-input: var(--input);
|
|
41
|
+
--color-ring: var(--ring);
|
|
42
|
+
--color-chart-1: var(--chart-1);
|
|
43
|
+
--color-chart-2: var(--chart-2);
|
|
44
|
+
--color-chart-3: var(--chart-3);
|
|
45
|
+
--color-chart-4: var(--chart-4);
|
|
46
|
+
--color-chart-5: var(--chart-5);
|
|
47
|
+
|
|
48
|
+
/* Sidebar Colors */
|
|
49
|
+
--color-sidebar: var(--sidebar);
|
|
50
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
51
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
52
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
53
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
54
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
55
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
56
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
57
|
+
|
|
58
|
+
/* Overlay */
|
|
59
|
+
--color-overlay: var(--overlay);
|
|
60
|
+
|
|
61
|
+
/* Surface */
|
|
62
|
+
--color-surface: var(--surface);
|
|
63
|
+
|
|
64
|
+
/* Shadows — theme-aware via elevation tokens */
|
|
65
|
+
--shadow-xs: var(--elevation-xs);
|
|
66
|
+
--shadow-sm: var(--elevation-sm);
|
|
67
|
+
--shadow: var(--elevation);
|
|
68
|
+
--shadow-md: var(--elevation-md);
|
|
69
|
+
--shadow-lg: var(--elevation-lg);
|
|
70
|
+
--shadow-xl: var(--elevation-xl);
|
|
71
|
+
--shadow-2xl: var(--elevation-2xl);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
:root {
|
|
75
|
+
--radius: 0.625rem;
|
|
76
|
+
--background: oklch(1 0 0);
|
|
77
|
+
--foreground: oklch(0.145 0 0);
|
|
78
|
+
--card: oklch(1 0 0);
|
|
79
|
+
--card-foreground: oklch(0.145 0 0);
|
|
80
|
+
--popover: oklch(1 0 0);
|
|
81
|
+
--popover-foreground: oklch(0.145 0 0);
|
|
82
|
+
--primary: oklch(0.205 0 0);
|
|
83
|
+
--primary-foreground: oklch(0.985 0 0);
|
|
84
|
+
--secondary: oklch(0.97 0 0);
|
|
85
|
+
--secondary-foreground: oklch(0.205 0 0);
|
|
86
|
+
--muted: oklch(0.97 0 0);
|
|
87
|
+
--muted-foreground: oklch(0.556 0 0);
|
|
88
|
+
--accent: oklch(0.97 0 0);
|
|
89
|
+
--accent-foreground: oklch(0.205 0 0);
|
|
90
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
91
|
+
--destructive-foreground: oklch(0.577 0.245 27.325);
|
|
92
|
+
--success: oklch(0.564 0.168 143.8);
|
|
93
|
+
--success-foreground: oklch(0.564 0.168 143.8);
|
|
94
|
+
--warning: oklch(0.681 0.150 59.0);
|
|
95
|
+
--warning-foreground: oklch(0.681 0.150 59.0);
|
|
96
|
+
--info: oklch(0.609 0.202 257.2);
|
|
97
|
+
--info-foreground: oklch(0.609 0.202 257.2);
|
|
98
|
+
--border: oklch(0.922 0 0);
|
|
99
|
+
--input: oklch(0.922 0 0);
|
|
100
|
+
--ring: oklch(0.708 0 0);
|
|
101
|
+
--chart-1: oklch(0.646 0.222 41.116);
|
|
102
|
+
--chart-2: oklch(0.6 0.118 184.704);
|
|
103
|
+
--chart-3: oklch(0.398 0.07 227.392);
|
|
104
|
+
--chart-4: oklch(0.828 0.189 84.429);
|
|
105
|
+
--chart-5: oklch(0.769 0.188 70.08);
|
|
106
|
+
|
|
107
|
+
--overlay: oklch(0 0 0);
|
|
108
|
+
--surface: oklch(1 0 0);
|
|
109
|
+
|
|
110
|
+
--sidebar: oklch(0.985 0 0);
|
|
111
|
+
--sidebar-foreground: oklch(0.145 0 0);
|
|
112
|
+
--sidebar-primary: oklch(0.205 0 0);
|
|
113
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
114
|
+
--sidebar-accent: oklch(0.97 0 0);
|
|
115
|
+
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
116
|
+
--sidebar-border: oklch(0.922 0 0);
|
|
117
|
+
--sidebar-ring: oklch(0.708 0 0);
|
|
118
|
+
|
|
119
|
+
--elevation-xs:
|
|
120
|
+
rgba(14, 63, 126, 0.03) 0px 0px 0px 1px,
|
|
121
|
+
rgba(42, 51, 69, 0.03) 0px 1px 1px -0.5px;
|
|
122
|
+
--elevation-sm:
|
|
123
|
+
rgba(14, 63, 126, 0.04) 0px 0px 0px 1px,
|
|
124
|
+
rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px,
|
|
125
|
+
rgba(42, 51, 70, 0.04) 0px 2px 2px -1px;
|
|
126
|
+
--elevation:
|
|
127
|
+
rgba(14, 63, 126, 0.04) 0px 0px 0px 1px,
|
|
128
|
+
rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px,
|
|
129
|
+
rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px,
|
|
130
|
+
rgba(42, 51, 70, 0.04) 0px 6px 6px -3px,
|
|
131
|
+
rgba(14, 63, 126, 0.04) 0px 12px 12px -6px,
|
|
132
|
+
rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
|
|
133
|
+
--elevation-md:
|
|
134
|
+
rgba(14, 63, 126, 0.06) 0px 0px 0px 1px,
|
|
135
|
+
rgba(42, 51, 69, 0.06) 0px 1px 1px -0.5px,
|
|
136
|
+
rgba(42, 51, 70, 0.06) 0px 3px 3px -1.5px,
|
|
137
|
+
rgba(42, 51, 70, 0.06) 0px 6px 6px -3px,
|
|
138
|
+
rgba(14, 63, 126, 0.06) 0px 12px 12px -6px,
|
|
139
|
+
rgba(14, 63, 126, 0.06) 0px 24px 24px -12px;
|
|
140
|
+
--elevation-lg:
|
|
141
|
+
rgba(14, 63, 126, 0.07) 0px 0px 0px 1px,
|
|
142
|
+
rgba(42, 51, 69, 0.07) 0px 1px 1px -0.5px,
|
|
143
|
+
rgba(42, 51, 70, 0.07) 0px 4px 4px -2px,
|
|
144
|
+
rgba(42, 51, 70, 0.07) 0px 8px 8px -4px,
|
|
145
|
+
rgba(14, 63, 126, 0.07) 0px 16px 16px -8px,
|
|
146
|
+
rgba(14, 63, 126, 0.07) 0px 32px 32px -16px;
|
|
147
|
+
--elevation-xl:
|
|
148
|
+
rgba(14, 63, 126, 0.08) 0px 0px 0px 1px,
|
|
149
|
+
rgba(42, 51, 69, 0.08) 0px 2px 2px -1px,
|
|
150
|
+
rgba(42, 51, 70, 0.08) 0px 6px 6px -3px,
|
|
151
|
+
rgba(42, 51, 70, 0.08) 0px 12px 12px -6px,
|
|
152
|
+
rgba(14, 63, 126, 0.08) 0px 24px 24px -12px,
|
|
153
|
+
rgba(14, 63, 126, 0.08) 0px 48px 48px -24px;
|
|
154
|
+
--elevation-2xl:
|
|
155
|
+
rgba(14, 63, 126, 0.1) 0px 0px 0px 1px,
|
|
156
|
+
rgba(42, 51, 69, 0.1) 0px 3px 3px -1.5px,
|
|
157
|
+
rgba(42, 51, 70, 0.1) 0px 8px 8px -4px,
|
|
158
|
+
rgba(42, 51, 70, 0.1) 0px 16px 16px -8px,
|
|
159
|
+
rgba(14, 63, 126, 0.1) 0px 32px 32px -16px,
|
|
160
|
+
rgba(14, 63, 126, 0.1) 0px 64px 64px -32px;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.dark {
|
|
164
|
+
--background: oklch(0.145 0 0);
|
|
165
|
+
--foreground: oklch(0.985 0 0);
|
|
166
|
+
--card: oklch(0.145 0 0);
|
|
167
|
+
--card-foreground: oklch(0.985 0 0);
|
|
168
|
+
--popover: oklch(0.145 0 0);
|
|
169
|
+
--popover-foreground: oklch(0.985 0 0);
|
|
170
|
+
--primary: oklch(0.985 0 0);
|
|
171
|
+
--primary-foreground: oklch(0.205 0 0);
|
|
172
|
+
--secondary: oklch(0.269 0 0);
|
|
173
|
+
--secondary-foreground: oklch(0.985 0 0);
|
|
174
|
+
--muted: oklch(0.269 0 0);
|
|
175
|
+
--muted-foreground: oklch(0.708 0 0);
|
|
176
|
+
--accent: oklch(0.269 0 0);
|
|
177
|
+
--accent-foreground: oklch(0.985 0 0);
|
|
178
|
+
--destructive: oklch(0.396 0.141 25.723);
|
|
179
|
+
--destructive-foreground: oklch(0.985 0 0);
|
|
180
|
+
--success: oklch(0.634 0.188 142.8);
|
|
181
|
+
--success-foreground: oklch(0.985 0 0);
|
|
182
|
+
--warning: oklch(0.785 0.162 64.8);
|
|
183
|
+
--warning-foreground: oklch(0.985 0 0);
|
|
184
|
+
--info: oklch(0.701 0.156 247.3);
|
|
185
|
+
--info-foreground: oklch(0.985 0 0);
|
|
186
|
+
--border: oklch(0.269 0 0);
|
|
187
|
+
--input: oklch(0.269 0 0);
|
|
188
|
+
--ring: oklch(0.439 0 0);
|
|
189
|
+
--chart-1: oklch(0.488 0.243 264.376);
|
|
190
|
+
--chart-2: oklch(0.696 0.17 162.48);
|
|
191
|
+
--chart-3: oklch(0.769 0.188 70.08);
|
|
192
|
+
--chart-4: oklch(0.627 0.265 303.9);
|
|
193
|
+
--chart-5: oklch(0.645 0.246 16.439);
|
|
194
|
+
|
|
195
|
+
--overlay: oklch(0 0 0);
|
|
196
|
+
--surface: oklch(0.19 0 0);
|
|
197
|
+
|
|
198
|
+
--sidebar: oklch(0.205 0 0);
|
|
199
|
+
--sidebar-foreground: oklch(0.985 0 0);
|
|
200
|
+
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
201
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
202
|
+
--sidebar-accent: oklch(0.269 0 0);
|
|
203
|
+
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
204
|
+
--sidebar-border: oklch(0.269 0 0);
|
|
205
|
+
--sidebar-ring: oklch(0.439 0 0);
|
|
206
|
+
|
|
207
|
+
--elevation-xs:
|
|
208
|
+
rgba(0, 0, 0, 0.12) 0px 0px 0px 1px,
|
|
209
|
+
rgba(0, 0, 0, 0.1) 0px 1px 1px -0.5px;
|
|
210
|
+
--elevation-sm:
|
|
211
|
+
rgba(0, 0, 0, 0.15) 0px 0px 0px 1px,
|
|
212
|
+
rgba(0, 0, 0, 0.12) 0px 1px 1px -0.5px,
|
|
213
|
+
rgba(0, 0, 0, 0.12) 0px 2px 2px -1px;
|
|
214
|
+
--elevation:
|
|
215
|
+
rgba(0, 0, 0, 0.15) 0px 0px 0px 1px,
|
|
216
|
+
rgba(0, 0, 0, 0.15) 0px 1px 1px -0.5px,
|
|
217
|
+
rgba(0, 0, 0, 0.15) 0px 3px 3px -1.5px,
|
|
218
|
+
rgba(0, 0, 0, 0.15) 0px 6px 6px -3px,
|
|
219
|
+
rgba(0, 0, 0, 0.15) 0px 12px 12px -6px,
|
|
220
|
+
rgba(0, 0, 0, 0.15) 0px 24px 24px -12px;
|
|
221
|
+
--elevation-md:
|
|
222
|
+
rgba(0, 0, 0, 0.2) 0px 0px 0px 1px,
|
|
223
|
+
rgba(0, 0, 0, 0.18) 0px 1px 1px -0.5px,
|
|
224
|
+
rgba(0, 0, 0, 0.18) 0px 3px 3px -1.5px,
|
|
225
|
+
rgba(0, 0, 0, 0.18) 0px 6px 6px -3px,
|
|
226
|
+
rgba(0, 0, 0, 0.18) 0px 12px 12px -6px,
|
|
227
|
+
rgba(0, 0, 0, 0.18) 0px 24px 24px -12px;
|
|
228
|
+
--elevation-lg:
|
|
229
|
+
rgba(0, 0, 0, 0.25) 0px 0px 0px 1px,
|
|
230
|
+
rgba(0, 0, 0, 0.2) 0px 1px 1px -0.5px,
|
|
231
|
+
rgba(0, 0, 0, 0.2) 0px 4px 4px -2px,
|
|
232
|
+
rgba(0, 0, 0, 0.2) 0px 8px 8px -4px,
|
|
233
|
+
rgba(0, 0, 0, 0.2) 0px 16px 16px -8px,
|
|
234
|
+
rgba(0, 0, 0, 0.2) 0px 32px 32px -16px;
|
|
235
|
+
--elevation-xl:
|
|
236
|
+
rgba(0, 0, 0, 0.3) 0px 0px 0px 1px,
|
|
237
|
+
rgba(0, 0, 0, 0.25) 0px 2px 2px -1px,
|
|
238
|
+
rgba(0, 0, 0, 0.25) 0px 6px 6px -3px,
|
|
239
|
+
rgba(0, 0, 0, 0.25) 0px 12px 12px -6px,
|
|
240
|
+
rgba(0, 0, 0, 0.25) 0px 24px 24px -12px,
|
|
241
|
+
rgba(0, 0, 0, 0.25) 0px 48px 48px -24px;
|
|
242
|
+
--elevation-2xl:
|
|
243
|
+
rgba(0, 0, 0, 0.35) 0px 0px 0px 1px,
|
|
244
|
+
rgba(0, 0, 0, 0.3) 0px 3px 3px -1.5px,
|
|
245
|
+
rgba(0, 0, 0, 0.3) 0px 8px 8px -4px,
|
|
246
|
+
rgba(0, 0, 0, 0.3) 0px 16px 16px -8px,
|
|
247
|
+
rgba(0, 0, 0, 0.3) 0px 32px 32px -16px,
|
|
248
|
+
rgba(0, 0, 0, 0.3) 0px 64px 64px -32px;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
/* Base styles */
|
|
252
|
+
* {
|
|
253
|
+
border-color: var(--border);
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
body {
|
|
257
|
+
background-color: var(--background);
|
|
258
|
+
color: var(--foreground);
|
|
259
|
+
}
|
|
@@ -1,170 +1,3 @@
|
|
|
1
1
|
@import "tailwindcss";
|
|
2
2
|
@plugin "@tailwindcss/forms";
|
|
3
|
-
|
|
4
|
-
@theme {
|
|
5
|
-
/* Typography */
|
|
6
|
-
--font-sans: Inter, sans-serif;
|
|
7
|
-
--font-mono: Geist Mono, monospace;
|
|
8
|
-
|
|
9
|
-
/* Border Radius - Base: 0.625rem (10px) */
|
|
10
|
-
--radius-sm: calc(var(--radius) - 4px);
|
|
11
|
-
--radius-md: calc(var(--radius) - 2px);
|
|
12
|
-
--radius-lg: var(--radius);
|
|
13
|
-
--radius-xl: calc(var(--radius) + 4px);
|
|
14
|
-
--radius-2xl: calc(var(--radius) + 8px);
|
|
15
|
-
--radius-full: 9999px;
|
|
16
|
-
|
|
17
|
-
/* Shadows - Layered elevation scale */
|
|
18
|
-
--shadow-xs: rgba(14, 63, 126, 0.03) 0px 0px 0px 1px, rgba(42, 51, 69, 0.03) 0px 1px 1px -0.5px;
|
|
19
|
-
--shadow-sm: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px;
|
|
20
|
-
--shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
|
|
21
|
-
--shadow-md: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 69, 0.06) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.06) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.06) 0px 6px 6px -3px, rgba(14, 63, 126, 0.06) 0px 12px 12px -6px, rgba(14, 63, 126, 0.06) 0px 24px 24px -12px;
|
|
22
|
-
--shadow-lg: rgba(14, 63, 126, 0.07) 0px 0px 0px 1px, rgba(42, 51, 69, 0.07) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.07) 0px 4px 4px -2px, rgba(42, 51, 70, 0.07) 0px 8px 8px -4px, rgba(14, 63, 126, 0.07) 0px 16px 16px -8px, rgba(14, 63, 126, 0.07) 0px 32px 32px -16px;
|
|
23
|
-
--shadow-xl: rgba(14, 63, 126, 0.08) 0px 0px 0px 1px, rgba(42, 51, 69, 0.08) 0px 2px 2px -1px, rgba(42, 51, 70, 0.08) 0px 6px 6px -3px, rgba(42, 51, 70, 0.08) 0px 12px 12px -6px, rgba(14, 63, 126, 0.08) 0px 24px 24px -12px, rgba(14, 63, 126, 0.08) 0px 48px 48px -24px;
|
|
24
|
-
--shadow-2xl: rgba(14, 63, 126, 0.1) 0px 0px 0px 1px, rgba(42, 51, 69, 0.1) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.1) 0px 8px 8px -4px, rgba(42, 51, 70, 0.1) 0px 16px 16px -8px, rgba(14, 63, 126, 0.1) 0px 32px 32px -16px, rgba(14, 63, 126, 0.1) 0px 64px 64px -32px;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
@theme inline {
|
|
28
|
-
/* Semantic Colors */
|
|
29
|
-
--color-background: var(--background);
|
|
30
|
-
--color-foreground: var(--foreground);
|
|
31
|
-
--color-card: var(--card);
|
|
32
|
-
--color-card-foreground: var(--card-foreground);
|
|
33
|
-
--color-popover: var(--popover);
|
|
34
|
-
--color-popover-foreground: var(--popover-foreground);
|
|
35
|
-
--color-primary: var(--primary);
|
|
36
|
-
--color-primary-foreground: var(--primary-foreground);
|
|
37
|
-
--color-secondary: var(--secondary);
|
|
38
|
-
--color-secondary-foreground: var(--secondary-foreground);
|
|
39
|
-
--color-muted: var(--muted);
|
|
40
|
-
--color-muted-foreground: var(--muted-foreground);
|
|
41
|
-
--color-accent: var(--accent);
|
|
42
|
-
--color-accent-foreground: var(--accent-foreground);
|
|
43
|
-
--color-destructive: var(--destructive);
|
|
44
|
-
--color-destructive-foreground: var(--destructive-foreground);
|
|
45
|
-
--color-success: var(--success);
|
|
46
|
-
--color-success-foreground: var(--success-foreground);
|
|
47
|
-
--color-warning: var(--warning);
|
|
48
|
-
--color-warning-foreground: var(--warning-foreground);
|
|
49
|
-
--color-info: var(--info);
|
|
50
|
-
--color-info-foreground: var(--info-foreground);
|
|
51
|
-
--color-border: var(--border);
|
|
52
|
-
--color-input: var(--input);
|
|
53
|
-
--color-ring: var(--ring);
|
|
54
|
-
--color-chart-1: var(--chart-1);
|
|
55
|
-
--color-chart-2: var(--chart-2);
|
|
56
|
-
--color-chart-3: var(--chart-3);
|
|
57
|
-
--color-chart-4: var(--chart-4);
|
|
58
|
-
--color-chart-5: var(--chart-5);
|
|
59
|
-
|
|
60
|
-
/* Sidebar Colors */
|
|
61
|
-
--color-sidebar: var(--sidebar);
|
|
62
|
-
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
63
|
-
--color-sidebar-primary: var(--sidebar-primary);
|
|
64
|
-
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
65
|
-
--color-sidebar-accent: var(--sidebar-accent);
|
|
66
|
-
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
67
|
-
--color-sidebar-border: var(--sidebar-border);
|
|
68
|
-
--color-sidebar-ring: var(--sidebar-ring);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
:root {
|
|
72
|
-
--radius: 0.625rem;
|
|
73
|
-
--background: oklch(1 0 0);
|
|
74
|
-
--foreground: oklch(0.145 0 0);
|
|
75
|
-
--card: oklch(1 0 0);
|
|
76
|
-
--card-foreground: oklch(0.145 0 0);
|
|
77
|
-
--popover: oklch(1 0 0);
|
|
78
|
-
--popover-foreground: oklch(0.145 0 0);
|
|
79
|
-
--primary: oklch(0.205 0 0);
|
|
80
|
-
--primary-foreground: oklch(0.985 0 0);
|
|
81
|
-
--secondary: oklch(0.97 0 0);
|
|
82
|
-
--secondary-foreground: oklch(0.205 0 0);
|
|
83
|
-
--muted: oklch(0.97 0 0);
|
|
84
|
-
--muted-foreground: oklch(0.556 0 0);
|
|
85
|
-
--accent: oklch(0.97 0 0);
|
|
86
|
-
--accent-foreground: oklch(0.205 0 0);
|
|
87
|
-
--destructive: oklch(0.577 0.245 27.325);
|
|
88
|
-
--destructive-foreground: oklch(0.577 0.245 27.325);
|
|
89
|
-
--success: oklch(0.564 0.168 143.8);
|
|
90
|
-
--success-foreground: oklch(0.564 0.168 143.8);
|
|
91
|
-
--warning: oklch(0.681 0.150 59.0);
|
|
92
|
-
--warning-foreground: oklch(0.681 0.150 59.0);
|
|
93
|
-
--info: oklch(0.609 0.202 257.2);
|
|
94
|
-
--info-foreground: oklch(0.609 0.202 257.2);
|
|
95
|
-
--border: oklch(0.922 0 0);
|
|
96
|
-
--input: oklch(0.922 0 0);
|
|
97
|
-
--ring: oklch(0.708 0 0);
|
|
98
|
-
--chart-1: oklch(0.646 0.222 41.116);
|
|
99
|
-
--chart-2: oklch(0.6 0.118 184.704);
|
|
100
|
-
--chart-3: oklch(0.398 0.07 227.392);
|
|
101
|
-
--chart-4: oklch(0.828 0.189 84.429);
|
|
102
|
-
--chart-5: oklch(0.769 0.188 70.08);
|
|
103
|
-
|
|
104
|
-
/* Sidebar */
|
|
105
|
-
--sidebar: oklch(0.985 0 0);
|
|
106
|
-
--sidebar-foreground: oklch(0.145 0 0);
|
|
107
|
-
--sidebar-primary: oklch(0.205 0 0);
|
|
108
|
-
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
109
|
-
--sidebar-accent: oklch(0.97 0 0);
|
|
110
|
-
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
111
|
-
--sidebar-border: oklch(0.922 0 0);
|
|
112
|
-
--sidebar-ring: oklch(0.708 0 0);
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
.dark {
|
|
116
|
-
--background: oklch(0.145 0 0);
|
|
117
|
-
--foreground: oklch(0.985 0 0);
|
|
118
|
-
--card: oklch(0.145 0 0);
|
|
119
|
-
--card-foreground: oklch(0.985 0 0);
|
|
120
|
-
--popover: oklch(0.145 0 0);
|
|
121
|
-
--popover-foreground: oklch(0.985 0 0);
|
|
122
|
-
--primary: oklch(0.985 0 0);
|
|
123
|
-
--primary-foreground: oklch(0.205 0 0);
|
|
124
|
-
--secondary: oklch(0.269 0 0);
|
|
125
|
-
--secondary-foreground: oklch(0.985 0 0);
|
|
126
|
-
--muted: oklch(0.269 0 0);
|
|
127
|
-
--muted-foreground: oklch(0.708 0 0);
|
|
128
|
-
--accent: oklch(0.269 0 0);
|
|
129
|
-
--accent-foreground: oklch(0.985 0 0);
|
|
130
|
-
--destructive: oklch(0.396 0.141 25.723);
|
|
131
|
-
--destructive-foreground: oklch(0.985 0 0);
|
|
132
|
-
--success: oklch(0.634 0.188 142.8);
|
|
133
|
-
--success-foreground: oklch(0.985 0 0);
|
|
134
|
-
--warning: oklch(0.785 0.162 64.8);
|
|
135
|
-
--warning-foreground: oklch(0.985 0 0);
|
|
136
|
-
--info: oklch(0.701 0.156 247.3);
|
|
137
|
-
--info-foreground: oklch(0.985 0 0);
|
|
138
|
-
--border: oklch(0.269 0 0);
|
|
139
|
-
--input: oklch(0.269 0 0);
|
|
140
|
-
--ring: oklch(0.439 0 0);
|
|
141
|
-
--chart-1: oklch(0.488 0.243 264.376);
|
|
142
|
-
--chart-2: oklch(0.696 0.17 162.48);
|
|
143
|
-
--chart-3: oklch(0.769 0.188 70.08);
|
|
144
|
-
--chart-4: oklch(0.627 0.265 303.9);
|
|
145
|
-
--chart-5: oklch(0.645 0.246 16.439);
|
|
146
|
-
|
|
147
|
-
/* Sidebar */
|
|
148
|
-
--sidebar: oklch(0.205 0 0);
|
|
149
|
-
--sidebar-foreground: oklch(0.985 0 0);
|
|
150
|
-
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
151
|
-
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
152
|
-
--sidebar-accent: oklch(0.269 0 0);
|
|
153
|
-
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
154
|
-
--sidebar-border: oklch(0.269 0 0);
|
|
155
|
-
--sidebar-ring: oklch(0.439 0 0);
|
|
156
|
-
|
|
157
|
-
/* Dark mode shadows */
|
|
158
|
-
--shadow-xs: rgba(0, 0, 0, 0.12) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 1px -0.5px;
|
|
159
|
-
--shadow-sm: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.12) 0px 1px 1px -0.5px, rgba(0, 0, 0, 0.12) 0px 2px 2px -1px;
|
|
160
|
-
--shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.15) 0px 1px 1px -0.5px, rgba(0, 0, 0, 0.15) 0px 3px 3px -1.5px, rgba(0, 0, 0, 0.15) 0px 6px 6px -3px, rgba(0, 0, 0, 0.15) 0px 12px 12px -6px, rgba(0, 0, 0, 0.15) 0px 24px 24px -12px;
|
|
161
|
-
--shadow-md: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px, rgba(0, 0, 0, 0.18) 0px 1px 1px -0.5px, rgba(0, 0, 0, 0.18) 0px 3px 3px -1.5px, rgba(0, 0, 0, 0.18) 0px 6px 6px -3px, rgba(0, 0, 0, 0.18) 0px 12px 12px -6px, rgba(0, 0, 0, 0.18) 0px 24px 24px -12px;
|
|
162
|
-
--shadow-lg: rgba(0, 0, 0, 0.25) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 1px 1px -0.5px, rgba(0, 0, 0, 0.2) 0px 4px 4px -2px, rgba(0, 0, 0, 0.2) 0px 8px 8px -4px, rgba(0, 0, 0, 0.2) 0px 16px 16px -8px, rgba(0, 0, 0, 0.2) 0px 32px 32px -16px;
|
|
163
|
-
--shadow-xl: rgba(0, 0, 0, 0.3) 0px 0px 0px 1px, rgba(0, 0, 0, 0.25) 0px 2px 2px -1px, rgba(0, 0, 0, 0.25) 0px 6px 6px -3px, rgba(0, 0, 0, 0.25) 0px 12px 12px -6px, rgba(0, 0, 0, 0.25) 0px 24px 24px -12px, rgba(0, 0, 0, 0.25) 0px 48px 48px -24px;
|
|
164
|
-
--shadow-2xl: rgba(0, 0, 0, 0.35) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 3px 3px -1.5px, rgba(0, 0, 0, 0.3) 0px 8px 8px -4px, rgba(0, 0, 0, 0.3) 0px 16px 16px -8px, rgba(0, 0, 0, 0.3) 0px 32px 32px -16px, rgba(0, 0, 0, 0.3) 0px 64px 64px -32px;
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
/* Base styles */
|
|
168
|
-
* {
|
|
169
|
-
border-color: var(--border);
|
|
170
|
-
}
|
|
3
|
+
@import "./bearnie.css";
|
package/dist/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
#!/usr/bin/env node
|