b44ui 0.0.9 → 0.0.11

package/index.tsx

@@ -112,6 +112,34 @@ export const Muted = (props: DProps) => {
   return <span className={CN("text-sm text-zinc-400", grow && "flex-1", rcn(props))}>{children}</span>
 }
 
+export const A = ({
+  children, cn, cnIgnoreWrongUsage, grow, gap, p, style, click, href, onClick, onKeyDown, role, tabIndex, ...rest
+}: DProps & { click?: () => void } & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+  const c = rcn({ cn, cnIgnoreWrongUsage })
+  const fire = (e: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>) => {
+    click?.()
+    onClick?.(e as React.MouseEvent<HTMLAnchorElement>)
+  }
+  const buttonLike = !href
+
+  return <a
+    {...rest}
+    href={href}
+    role={buttonLike ? role ?? 'button' : role}
+    tabIndex={buttonLike ? tabIndex ?? 0 : tabIndex}
+    className={CN("inline-flex items-center gap-1 text-zinc-300 underline underline-offset-4 cursor-pointer hover:text-zinc-100", grow && "flex-1", c)}
+    style={dStyle({ gap, p, style })}
+    onClick={fire}
+    onKeyDown={e => {
+      if (buttonLike && (e.key === 'Enter' || e.key === ' ')) {
+        e.preventDefault()
+        fire(e)
+      }
+      onKeyDown?.(e)
+    }}
+  >{children}</a>
+}
+
 export const Btn = ({ children, grow, gap, p, click, color, ghost, sm, ...rest }: DProps & { click?: () => void, color?: Color, ghost?: boolean, sm?: boolean } & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
   const c = rcn(rest as DProps)
   return <button className={CN("rounded cursor-pointer", sm ? "px-3 py-1 text-xs" : "px-4 py-2 text-sm",

package/package.json

@@ -1,12 +1,18 @@
 {
   "name": "b44ui",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "type": "module",
+  "files": [
+    "index.tsx",
+    "styles.css",
+    "tailwind.css"
+  ],
   "scripts": {
     "dev": "npm run dev --prefix example"
   },
   "exports": {
     ".": "./index.tsx",
+    "./tailwind.css": "./tailwind.css",
     "./styles.css": "./styles.css"
   },
   "dependencies": {
@@ -17,9 +23,11 @@
     "tailwind-merge": "^3.0.0"
   },
   "peerDependencies": {
-    "react": "^19.0.0"
+    "react": "^19.0.0",
+    "tailwindcss": "^4.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.14"
+    "@types/react": "^19.2.14",
+    "tailwindcss": "^4.0.0"
   }
 }

package/{README.md → readme.md}

@@ -3,15 +3,25 @@
 minimal dark-mode react components, via tailwind
 
 ```bash
-# setup
+npm add b44ui
+```
+
+```css
+@import "b44ui/tailwind.css";
+```
+
+if your app already has `@import "tailwindcss";`, replace that line with the one above.
 
-pnpm add b44ui
+the host app still needs tailwind v4 processing. with vite:
 
-echo 'optimizeDeps: { include: ["b44ui", "highlight.js"] }' >> vite.config.ts
+```ts
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+import tailwindcss from "@tailwindcss/vite"
 
-echo '@import "tailwindcss";
-@source "../node_modules/b44ui/index.tsx";
-@import "b44ui/styles.css";' > src/index.css
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+})
 ```
 
 | Component | Props | Description |
@@ -21,11 +31,13 @@ echo '@import "tailwindcss";
 | `D` | `cn`, `style`, `grow` | Plain div with `cn` |
 | `Row` | `align`, `ratio`, `cn`, `grow` | Flex row, `align`: `start \| mid \| end` |
 | `Col` | `cn`, `grow` | Flex column |
+| `Code` | `highlight` | Code block |
 | `Grid` | `cols`, `cn`, `grow` | CSS grid, defaults to one column per child |
 | `Card` | `cn`, `grow` | Bordered zinc-900 card |
 | `Block` | `label`, `row`, `dashed`, `cn`, `grow` | Padded container with optional label |
 | `BlockSm` | `dashed`, `cn`, `grow` | Smaller padded container |
 | `Btn` | `click`, `color`, `ghost`, `cn`, `grow` | Button, supports `Color` and ghost style |
+| `A` | `href`, `click`, `cn`, `grow` | Link-styled anchor, works with `onClick` or `href` |
 | `Chip` | `click`, `cn` | Small inline badge, clickable if `click` provided |
 | `Tint` | `color`, `cn`, `grow` | Tinted background block |
 | `Muted` | `cn`, `grow` | Small muted text |

package/tailwind.css

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+@source "./index.tsx";
+@import "./styles.css";

package/example/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>ui kitchen sink</title>
-</head>
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-</html>

package/example/package.json

@@ -1,22 +0,0 @@
-{
-  "name": "ui-kitchen-sink",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite"
-  },
-  "dependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "ui": "file:.."
-  },
-  "devDependencies": {
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@tailwindcss/vite": "^4.0.0",
-    "tailwindcss": "^4.0.0",
-    "typescript": "^5.7.0",
-    "vite": "^6.0.0",
-    "@vitejs/plugin-react": "^4.3.0"
-  }
-}