@formant/aesthetics 0.0.10 → 0.1.1
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 +23 -122
- package/formant-aesthetics.css +1956 -0
- package/package.json +24 -77
- package/dist/components.css +0 -685
- package/dist/index.d.ts +0 -454
- package/dist/index.js +0 -5086
- package/dist/index.js.map +0 -1
- package/styles/globals.css +0 -200
package/README.md
CHANGED
|
@@ -1,131 +1,32 @@
|
|
|
1
1
|
# @formant/aesthetics
|
|
2
2
|
|
|
3
|
-
Formant
|
|
4
|
-
|
|
5
|
-
[](https://www.npmjs.com/package/@formant/aesthetics)
|
|
6
|
-
|
|
7
|
-
## Installation
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
npm install @formant/aesthetics
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
Peer dependencies required:
|
|
14
|
-
```bash
|
|
15
|
-
npm install react react-dom
|
|
16
|
-
```
|
|
3
|
+
A classless CSS framework based on the Formant Design System. No classes required—just semantic HTML that works out of the box.
|
|
17
4
|
|
|
18
5
|
## Quick Start
|
|
19
6
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
```tsx
|
|
23
|
-
import { FormantAesthetics } from "@formant/aesthetics";
|
|
24
|
-
|
|
25
|
-
function App() {
|
|
26
|
-
return (
|
|
27
|
-
<FormantAesthetics>
|
|
28
|
-
<YourApp />
|
|
29
|
-
</FormantAesthetics>
|
|
30
|
-
);
|
|
31
|
-
}
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
The `FormantAesthetics` component automatically injects all necessary CSS including:
|
|
35
|
-
- Google Fonts (Inter, Space Grotesk, JetBrains Mono)
|
|
36
|
-
- CSS variables for the Formant dark theme
|
|
37
|
-
- All utility classes used by components
|
|
38
|
-
|
|
39
|
-
### 2. Use Components
|
|
40
|
-
|
|
41
|
-
```tsx
|
|
42
|
-
import { Button, Card, CardHeader, CardTitle, Badge } from "@formant/aesthetics";
|
|
7
|
+
Add the CDN link to your HTML:
|
|
43
8
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
<div className="min-h-screen bg-background text-foreground p-8">
|
|
47
|
-
<Card>
|
|
48
|
-
<CardHeader>
|
|
49
|
-
<CardTitle>Hello @formant/aesthetics</CardTitle>
|
|
50
|
-
<Badge>v0.0.3</Badge>
|
|
51
|
-
</CardHeader>
|
|
52
|
-
<div className="p-6 space-y-4">
|
|
53
|
-
<Button>Default</Button>
|
|
54
|
-
<Button variant="secondary">Secondary</Button>
|
|
55
|
-
<Button variant="destructive">Destructive</Button>
|
|
56
|
-
</div>
|
|
57
|
-
</Card>
|
|
58
|
-
</div>
|
|
59
|
-
);
|
|
60
|
-
}
|
|
9
|
+
```html
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@formant/aesthetics/formant-aesthetics.css">
|
|
61
11
|
```
|
|
62
12
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
13
|
+
Write semantic HTML:
|
|
14
|
+
|
|
15
|
+
```html
|
|
16
|
+
<!DOCTYPE html>
|
|
17
|
+
<html lang="en">
|
|
18
|
+
<head>
|
|
19
|
+
<meta charset="UTF-8">
|
|
20
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
21
|
+
<title>My App</title>
|
|
22
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@formant/aesthetics/formant-aesthetics.css">
|
|
23
|
+
</head>
|
|
24
|
+
<body>
|
|
25
|
+
<main>
|
|
26
|
+
<h1>Hello, Operator</h1>
|
|
27
|
+
<p>Your fleet is <strong>online</strong> and ready for <em>mission control</em>.</p>
|
|
28
|
+
<button>Deploy Fleet</button>
|
|
29
|
+
</main>
|
|
30
|
+
</body>
|
|
31
|
+
</html>
|
|
71
32
|
```
|
|
72
|
-
|
|
73
|
-
Then use the `ThemeProvider` directly instead of `FormantAesthetics`:
|
|
74
|
-
|
|
75
|
-
```tsx
|
|
76
|
-
import { ThemeProvider } from "@formant/aesthetics";
|
|
77
|
-
|
|
78
|
-
function App() {
|
|
79
|
-
return (
|
|
80
|
-
<ThemeProvider>
|
|
81
|
-
<YourApp />
|
|
82
|
-
</ThemeProvider>
|
|
83
|
-
);
|
|
84
|
-
}
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
## What's Included
|
|
88
|
-
|
|
89
|
-
- **40+ shadcn/ui components** — Accordion, Alert, Badge, Button, Card, Dialog, Dropdown, Form, Input, Select, Table, Tabs, Toast, etc.
|
|
90
|
-
- **Formant brand components** — `FormantLogo`, `FormantLogoWithText`, `AIChat`, `KnowledgeGraph`
|
|
91
|
-
- **Theme provider** — `ThemeProvider` from next-themes (dark/light mode)
|
|
92
|
-
- **Charts** — Recharts components (BarChart, LineChart, PieChart, etc.)
|
|
93
|
-
- **Utilities** — `cn()` for class merging
|
|
94
|
-
|
|
95
|
-
## Development
|
|
96
|
-
|
|
97
|
-
```bash
|
|
98
|
-
# Install dependencies
|
|
99
|
-
npm install
|
|
100
|
-
|
|
101
|
-
# Build the library
|
|
102
|
-
npm run build
|
|
103
|
-
|
|
104
|
-
# Watch mode for development
|
|
105
|
-
npm run dev
|
|
106
|
-
|
|
107
|
-
# Type check
|
|
108
|
-
npm run typecheck
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
## Architecture
|
|
112
|
-
|
|
113
|
-
- **Source**: TypeScript React components in `components/`
|
|
114
|
-
- **Build**: `tsup` compiles to `dist/index.js` + `dist/index.d.ts`
|
|
115
|
-
- **Styling**: Static CSS injected by `FormantAesthetics` component — no external CSS build step required
|
|
116
|
-
- **Distribution**: Published to npm as `@formant/aesthetics`
|
|
117
|
-
|
|
118
|
-
## Migration from Tailwind
|
|
119
|
-
|
|
120
|
-
If you were previously using the Tailwind version of @formant/aesthetics:
|
|
121
|
-
|
|
122
|
-
1. Remove Tailwind CSS from your project
|
|
123
|
-
2. Remove `@tailwindcss/postcss` from your PostCSS config
|
|
124
|
-
3. Remove the safelist copy script from your `postinstall`
|
|
125
|
-
4. Wrap your app with `FormantAesthetics` instead of importing CSS files
|
|
126
|
-
|
|
127
|
-
All component props and APIs remain exactly the same.
|
|
128
|
-
|
|
129
|
-
## License
|
|
130
|
-
|
|
131
|
-
MIT
|