b44ui 0.0.8 → 0.0.10
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/index.tsx +1 -1
- package/package.json +11 -3
- package/{README.md → readme.md} +17 -6
- package/tailwind.css +3 -0
- package/example/index.html +0 -12
- package/example/package.json +0 -22
- package/example/pnpm-lock.yaml +0 -1499
- package/example/src/App.tsx +0 -147
- package/example/src/index.css +0 -3
- package/example/src/main.tsx +0 -5
- package/example/tsconfig.json +0 -12
- package/example/vite.config.ts +0 -10
- package/tsconfig.json +0 -14
package/index.tsx
CHANGED
|
@@ -102,7 +102,7 @@ export const Popover = (props: DProps & { text: ReactNode, color?: Color }) => {
|
|
|
102
102
|
return <span className="relative inline-block" onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
|
|
103
103
|
<span className={CN("cursor-pointer", color && tintCn(color), color && "border-b-2", c)}>{children}</span>
|
|
104
104
|
{open && <div className="absolute left-0 top-full z-10 mt-1">
|
|
105
|
-
<Card cn="w-64 shadow-lg text-sm" p={3}>{text}</Card>
|
|
105
|
+
<Card cn="w-64 shadow-lg text-sm" p={props.p ?? 3} gap={props.gap}>{text}</Card>
|
|
106
106
|
</div>}
|
|
107
107
|
</span>
|
|
108
108
|
}
|
package/package.json
CHANGED
|
@@ -1,12 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "b44ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.10",
|
|
4
4
|
"type": "module",
|
|
5
|
+
"files": [
|
|
6
|
+
"index.tsx",
|
|
7
|
+
"styles.css",
|
|
8
|
+
"tailwind.css"
|
|
9
|
+
],
|
|
5
10
|
"scripts": {
|
|
6
11
|
"dev": "npm run dev --prefix example"
|
|
7
12
|
},
|
|
8
13
|
"exports": {
|
|
9
14
|
".": "./index.tsx",
|
|
15
|
+
"./tailwind.css": "./tailwind.css",
|
|
10
16
|
"./styles.css": "./styles.css"
|
|
11
17
|
},
|
|
12
18
|
"dependencies": {
|
|
@@ -17,9 +23,11 @@
|
|
|
17
23
|
"tailwind-merge": "^3.0.0"
|
|
18
24
|
},
|
|
19
25
|
"peerDependencies": {
|
|
20
|
-
"react": "^19.0.0"
|
|
26
|
+
"react": "^19.0.0",
|
|
27
|
+
"tailwindcss": "^4.0.0"
|
|
21
28
|
},
|
|
22
29
|
"devDependencies": {
|
|
23
|
-
"@types/react": "^19.2.14"
|
|
30
|
+
"@types/react": "^19.2.14",
|
|
31
|
+
"tailwindcss": "^4.0.0"
|
|
24
32
|
}
|
|
25
33
|
}
|
package/{README.md → readme.md}
RENAMED
|
@@ -3,15 +3,25 @@
|
|
|
3
3
|
minimal dark-mode react components, via tailwind
|
|
4
4
|
|
|
5
5
|
```bash
|
|
6
|
-
|
|
6
|
+
npm add b44ui
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
```css
|
|
10
|
+
@import "b44ui/tailwind.css";
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
if your app already has `@import "tailwindcss";`, replace that line with the one above.
|
|
7
14
|
|
|
8
|
-
|
|
15
|
+
the host app still needs tailwind v4 processing. with vite:
|
|
9
16
|
|
|
10
|
-
|
|
17
|
+
```ts
|
|
18
|
+
import { defineConfig } from "vite"
|
|
19
|
+
import react from "@vitejs/plugin-react"
|
|
20
|
+
import tailwindcss from "@tailwindcss/vite"
|
|
11
21
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
22
|
+
export default defineConfig({
|
|
23
|
+
plugins: [react(), tailwindcss()],
|
|
24
|
+
})
|
|
15
25
|
```
|
|
16
26
|
|
|
17
27
|
| Component | Props | Description |
|
|
@@ -21,6 +31,7 @@ echo '@import "tailwindcss";
|
|
|
21
31
|
| `D` | `cn`, `style`, `grow` | Plain div with `cn` |
|
|
22
32
|
| `Row` | `align`, `ratio`, `cn`, `grow` | Flex row, `align`: `start \| mid \| end` |
|
|
23
33
|
| `Col` | `cn`, `grow` | Flex column |
|
|
34
|
+
| `Code` | `highlight` | Code block |
|
|
24
35
|
| `Grid` | `cols`, `cn`, `grow` | CSS grid, defaults to one column per child |
|
|
25
36
|
| `Card` | `cn`, `grow` | Bordered zinc-900 card |
|
|
26
37
|
| `Block` | `label`, `row`, `dashed`, `cn`, `grow` | Padded container with optional label |
|
package/tailwind.css
ADDED
package/example/index.html
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
-
<title>ui kitchen sink</title>
|
|
7
|
-
</head>
|
|
8
|
-
<body>
|
|
9
|
-
<div id="root"></div>
|
|
10
|
-
<script type="module" src="/src/main.tsx"></script>
|
|
11
|
-
</body>
|
|
12
|
-
</html>
|
package/example/package.json
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "ui-kitchen-sink",
|
|
3
|
-
"private": true,
|
|
4
|
-
"type": "module",
|
|
5
|
-
"scripts": {
|
|
6
|
-
"dev": "vite"
|
|
7
|
-
},
|
|
8
|
-
"dependencies": {
|
|
9
|
-
"react": "^19.0.0",
|
|
10
|
-
"react-dom": "^19.0.0",
|
|
11
|
-
"ui": "file:.."
|
|
12
|
-
},
|
|
13
|
-
"devDependencies": {
|
|
14
|
-
"@types/react": "^19.0.0",
|
|
15
|
-
"@types/react-dom": "^19.0.0",
|
|
16
|
-
"@tailwindcss/vite": "^4.0.0",
|
|
17
|
-
"tailwindcss": "^4.0.0",
|
|
18
|
-
"typescript": "^5.7.0",
|
|
19
|
-
"vite": "^6.0.0",
|
|
20
|
-
"@vitejs/plugin-react": "^4.3.0"
|
|
21
|
-
}
|
|
22
|
-
}
|