b44ui 0.0.4 → 0.0.6
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 +41 -0
- package/example/pnpm-lock.yaml +1499 -0
- package/example/vite.config.ts +3 -0
- package/index.tsx +68 -40
- package/package.json +1 -1
- package/styles.css +17 -16
- package/prompt.md +0 -257
package/README.md
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
# b44ui
|
|
2
|
+
|
|
3
|
+
minimal dark-mode react components, via tailwind
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
# setup
|
|
7
|
+
|
|
8
|
+
pnpm add b44ui
|
|
9
|
+
|
|
10
|
+
echo 'optimizeDeps: { include: ["b44ui", "highlight.js"] }' >> vite.config.ts
|
|
11
|
+
|
|
12
|
+
echo '@import "tailwindcss";
|
|
13
|
+
@source "../node_modules/b44ui/index.tsx";
|
|
14
|
+
@import "b44ui/styles.css";' > src/index.css
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
| Component | Props | Description |
|
|
18
|
+
|-----------|-------|-------------|
|
|
19
|
+
| `App` | `center`, `width`, `cn` | Root layout, dark background, wraps strings in `Md` |
|
|
20
|
+
| `Centered` | `width`, `cn`, `grow` | Centered max-width container |
|
|
21
|
+
| `D` | `cn`, `style`, `grow` | Plain div with `cn` |
|
|
22
|
+
| `Row` | `align`, `ratio`, `cn`, `grow` | Flex row, `align`: `start \| mid \| end` |
|
|
23
|
+
| `Col` | `cn`, `grow` | Flex column |
|
|
24
|
+
| `Grid` | `cols`, `cn`, `grow` | CSS grid, defaults to one column per child |
|
|
25
|
+
| `Card` | `cn`, `grow` | Bordered zinc-900 card |
|
|
26
|
+
| `Block` | `label`, `row`, `dashed`, `cn`, `grow` | Padded container with optional label |
|
|
27
|
+
| `BlockSm` | `dashed`, `cn`, `grow` | Smaller padded container |
|
|
28
|
+
| `Btn` | `click`, `color`, `ghost`, `cn`, `grow` | Button, supports `Color` and ghost style |
|
|
29
|
+
| `Chip` | `click`, `cn` | Small inline badge, clickable if `click` provided |
|
|
30
|
+
| `Tint` | `color`, `cn`, `grow` | Tinted background block |
|
|
31
|
+
| `Muted` | `cn`, `grow` | Small muted text |
|
|
32
|
+
| `Input` | `cn`, `grow`, ...input attrs | Styled text input |
|
|
33
|
+
| `Textarea` | `cn`, `grow`, ...textarea attrs | Styled textarea |
|
|
34
|
+
| `Select` | `cn`, `grow`, ...select attrs | Styled select |
|
|
35
|
+
| `Modal` | `open`, `cn` | Fixed overlay modal |
|
|
36
|
+
| `Popover` | `text`, `color`, `cn` | Hover popover |
|
|
37
|
+
| `Md` | `className` | Markdown renderer with syntax highlighting |
|
|
38
|
+
|
|
39
|
+
`Color`: `red \| blue \| orange \| purple \| yellow`
|
|
40
|
+
|
|
41
|
+
All components accept `cn` for additional Tailwind classes (merged via `tailwind-merge`).
|