b44ui 0.2.0 → 0.2.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/dist/example.d.ts +1 -0
- package/dist/example.js +9 -0
- package/dist/index.d.ts +45 -40
- package/dist/index.js +100 -117
- package/dist/styles.css +898 -0
- package/dist/vite.config.d.ts +2 -0
- package/dist/vite.config.js +5 -0
- package/index.js +3 -0
- package/package.json +18 -9
- package/readme.md +8 -7
- package/tailwind.css +1 -23
- package/styles.css +0 -21
package/index.js
ADDED
package/package.json
CHANGED
|
@@ -1,39 +1,48 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "b44ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"type": "module",
|
|
5
|
+
"sideEffects": [
|
|
6
|
+
"./index.js",
|
|
7
|
+
"./dist/styles.css"
|
|
8
|
+
],
|
|
5
9
|
"files": [
|
|
10
|
+
"index.js",
|
|
6
11
|
"dist",
|
|
7
|
-
"styles.css",
|
|
8
12
|
"tailwind.css"
|
|
9
13
|
],
|
|
10
14
|
"scripts": {
|
|
11
|
-
"build": "
|
|
12
|
-
"
|
|
15
|
+
"build": "npm run build:js && npm run build:css",
|
|
16
|
+
"build:css": "node scripts/build-css.mjs",
|
|
17
|
+
"build:js": "tsc -p tsconfig.json",
|
|
18
|
+
"dev": "vite",
|
|
13
19
|
"prepare": "npm run build",
|
|
14
20
|
"prepublishOnly": "npm run build"
|
|
15
21
|
},
|
|
16
22
|
"exports": {
|
|
17
23
|
".": {
|
|
18
24
|
"types": "./dist/index.d.ts",
|
|
19
|
-
"import": "./
|
|
25
|
+
"import": "./index.js"
|
|
20
26
|
},
|
|
21
27
|
"./tailwind.css": "./tailwind.css",
|
|
22
|
-
"./styles.css": "./styles.css"
|
|
28
|
+
"./styles.css": "./dist/styles.css"
|
|
23
29
|
},
|
|
24
30
|
"dependencies": {
|
|
31
|
+
"@vitejs/plugin-react": "^6.0.1",
|
|
25
32
|
"clsx": "^2.1.1",
|
|
26
33
|
"highlight.js": "^11.11.0",
|
|
27
34
|
"marked": "^17.0.0",
|
|
28
35
|
"marked-highlight": "^2.2.3",
|
|
29
|
-
"tailwind-merge": "^3.0.0"
|
|
36
|
+
"tailwind-merge": "^3.0.0",
|
|
37
|
+
"vite": "^8.0.2"
|
|
30
38
|
},
|
|
31
39
|
"peerDependencies": {
|
|
32
|
-
"react": "^19.0.0"
|
|
33
|
-
"tailwindcss": "^4.0.0"
|
|
40
|
+
"react": "^19.0.0"
|
|
34
41
|
},
|
|
35
42
|
"devDependencies": {
|
|
36
43
|
"@types/react": "^19.2.14",
|
|
44
|
+
"@types/react-dom": "^19.2.3",
|
|
45
|
+
"react-dom": "^19.2.4",
|
|
37
46
|
"tailwindcss": "^4.0.0"
|
|
38
47
|
}
|
|
39
48
|
}
|
package/readme.md
CHANGED
|
@@ -26,14 +26,13 @@ export default defineConfig({
|
|
|
26
26
|
|
|
27
27
|
| Component | Props | Description |
|
|
28
28
|
|-----------|-------|-------------|
|
|
29
|
-
| `App` | `center`, `width`, `cn` | Root layout, dark background, wraps strings in `Md` |
|
|
29
|
+
| `App` | `center`, `width`, `htScreen`, `cn`, native `div` props | Root layout, dark background, wraps strings in `Md` |
|
|
30
30
|
| `Centered` | `width`, `cn`, `grow` | Centered max-width container |
|
|
31
|
-
| `D` | `cn`, `style`, `grow`, `wd` | Plain div
|
|
32
|
-
| `
|
|
33
|
-
| `Col` | `cn`, `grow`, `wd` | Flex column |
|
|
31
|
+
| `D` | `row`, `col`, `align`, `ratio`, `cn`, `style`, `grow`, `wd` | Plain div, also handles row/col layout |
|
|
32
|
+
| `Scroll` | `grow` (defaults `true`), native `div` props | Vertical scroll container for growable layouts |
|
|
34
33
|
| `Code` | `highlight` | Code block |
|
|
35
34
|
| `Grid` | `cols`, `cn`, `grow` | CSS grid, defaults to one column per child |
|
|
36
|
-
| `Card` | `cn`, `grow` | Bordered zinc-900 card |
|
|
35
|
+
| `Card` | `row`, `col`, `cn`, `grow` | Bordered zinc-900 card, column by default |
|
|
37
36
|
| `Block` | `label`, `row`, `dashed`, `cn`, `grow` | Padded container with optional label |
|
|
38
37
|
| `BlockSm` | `dashed`, `cn`, `grow` | Smaller padded container |
|
|
39
38
|
| `TabList` | `gap`, `p`, `wd` | Simple tab row wrapper |
|
|
@@ -46,13 +45,15 @@ export default defineConfig({
|
|
|
46
45
|
| `Chip` | `click`, `cn` | Small inline badge, clickable if `click` provided |
|
|
47
46
|
| `Tint` | `color`, `cn`, `grow` | Tinted background block |
|
|
48
47
|
| `Muted` | `cn`, `grow` | Small muted text |
|
|
49
|
-
| `Input` | `cn`, `grow`, ...input attrs | Styled text input |
|
|
48
|
+
| `Input` | `state`, `cn`, `grow`, ...input attrs | Styled text input, `state={[value, setValue]}` supported |
|
|
50
49
|
| `Textarea` | `cn`, `grow`, ...textarea attrs | Styled textarea |
|
|
51
50
|
| `Select` | `cn`, `grow`, ...select attrs | Styled select |
|
|
52
51
|
| `Modal` | `open`, `cn` | Fixed overlay modal |
|
|
53
52
|
| `Popover` | `text`, `color`, `cn` | Hover popover |
|
|
54
53
|
| `Md` | `className` | Markdown renderer with syntax highlighting |
|
|
55
54
|
|
|
56
|
-
`Color
|
|
55
|
+
`Color` = `red | blue | orange | purple | yellow | green`
|
|
56
|
+
|
|
57
|
+
All rendered components forward native rest props to their underlying element, so `style`, `onClick`, `data-*`, and native element attributes work directly.
|
|
57
58
|
|
|
58
59
|
All components accept `cn` for additional Tailwind classes (merged via `tailwind-merge`).
|
package/tailwind.css
CHANGED
|
@@ -1,25 +1,3 @@
|
|
|
1
1
|
@import "tailwindcss";
|
|
2
2
|
@source "./index.tsx";
|
|
3
|
-
@import "
|
|
4
|
-
|
|
5
|
-
h1, .ui-markdown h2, .ui-markdown h3 { font-weight: 700; margin: 0; }
|
|
6
|
-
h1 { font-size: 1.5em; }
|
|
7
|
-
h2 { font-size: 1.25em; }
|
|
8
|
-
h3 { font-size: 1.1em; }
|
|
9
|
-
p { margin: 0.4em 0; }
|
|
10
|
-
a { color: #93c5fd; text-decoration: underline; }
|
|
11
|
-
pre { background: #1a1a2e; border-radius: 4px; padding: 0; overflow-x: auto; margin: 0.4em 0; }
|
|
12
|
-
code { font-family: ui-monospace, monospace; font-size: 0.9em; }
|
|
13
|
-
blockquote { border-left: 3px solid #444; padding-left: 1em; opacity: 0.8; margin: 0.25em 0; }
|
|
14
|
-
img { max-width: 100%; border-radius: 6px; }
|
|
15
|
-
|
|
16
|
-
.ui-grid { grid-template-columns: repeat(var(--cols), 1fr); }
|
|
17
|
-
@media (max-width: 640px) { .ui-grid { grid-template-columns: 1fr; } }
|
|
18
|
-
|
|
19
|
-
.ui-markdown { line-height: 1.5; }
|
|
20
|
-
.ui-markdown p:first-child { margin-top: 0; }
|
|
21
|
-
.ui-markdown p:last-child { margin-bottom: 0; }
|
|
22
|
-
.ui-markdown :not(pre) > code { background: #1a1a2e; padding: 2px 5px; border-radius: 3px; }
|
|
23
|
-
.ui-markdown ul, .ui-markdown ol { padding-left: 1.5em; margin: 0.25em 0; }
|
|
24
|
-
.ui-markdown table { border-collapse: collapse; margin: 0.4em 0; }
|
|
25
|
-
.ui-markdown th, .ui-markdown td { border: 1px solid #333; padding: 4px 10px; }
|
|
3
|
+
@import "./styles.css";
|
package/styles.css
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
@import "highlight.js/styles/github-dark.css";
|
|
2
|
-
|
|
3
|
-
.ui-markdown { line-height: 1.5; }
|
|
4
|
-
h1, .ui-markdown h2, .ui-markdown h3 { font-weight: 700; margin: 0; }
|
|
5
|
-
h1 { font-size: 1.5em; }
|
|
6
|
-
h2 { font-size: 1.25em; }
|
|
7
|
-
h3 { font-size: 1.1em; }
|
|
8
|
-
p { margin: 0.4em 0; }
|
|
9
|
-
a { color: #93c5fd; text-decoration: underline; }
|
|
10
|
-
pre { background: #1a1a2e; border-radius: 4px; padding: 0; overflow-x: auto; margin: 0.4em 0; }
|
|
11
|
-
code { font-family: ui-monospace, monospace; font-size: 0.9em; }
|
|
12
|
-
blockquote { border-left: 3px solid #444; padding-left: 1em; opacity: 0.8; margin: 0.25em 0; }
|
|
13
|
-
img { max-width: 100%; border-radius: 6px; }
|
|
14
|
-
.ui-markdown p:first-child { margin-top: 0; }
|
|
15
|
-
.ui-markdown p:last-child { margin-bottom: 0; }
|
|
16
|
-
.ui-markdown :not(pre) > code { background: #1a1a2e; padding: 2px 5px; border-radius: 3px; }
|
|
17
|
-
.ui-markdown ul, .ui-markdown ol { padding-left: 1.5em; margin: 0.25em 0; }
|
|
18
|
-
.ui-markdown table { border-collapse: collapse; margin: 0.4em 0; }
|
|
19
|
-
.ui-markdown th, .ui-markdown td { border: 1px solid #333; padding: 4px 10px; }
|
|
20
|
-
.ui-grid { grid-template-columns: repeat(var(--cols), 1fr); }
|
|
21
|
-
@media (max-width: 640px) { .ui-grid { grid-template-columns: 1fr; } }
|