b44ui 0.2.6 → 0.3.0

package/core.tsx

@@ -0,0 +1,89 @@
+import React, { useState, type CSSProperties, type ReactNode, type Ref } from "react"
+
+export type Color = 'purple'
+
+const units = {
+    p: 'padding', m: 'margin', wd: 'width', ht: 'height',
+    minHt: 'minHeight', maxHt: 'maxHeight', minWd: 'minWidth', maxWd: 'maxWidth'
+} as const
+
+const passthrough = [
+    'font', 'fontSize', 'fontFamily', 'fontWeight', 'lineHeight',
+    'border', 'borderLeft', 'borderTop', 'borderRadius',
+    'background', 'color', 'opacity',
+    'gap', 'cursor', 'overflow', 'overflowX', 'overflowY',
+    'transition', 'userSelect', 'resize',
+    'position', 'inset', 'top', 'bottom', 'left', 'right', 'zIndex',
+    'alignSelf', 'flex', 'flexDirection', 'outline',
+    'display', 'gridTemplateColumns',
+] as const
+
+type Passthrough = typeof passthrough[number]
+
+// props that are consumed by Core and must NOT be forwarded to the DOM
+const consumed = new Set(['children', 'style', 'ref', 'contentEditable', 'click', 'hover', 'input', 'href', 'grow', 'row', 'col', 'align', 'textAlign'])
+
+export type Props = {
+    children?: ReactNode
+    ref?: Ref<HTMLDivElement>
+    contentEditable?: boolean
+    click?: (e: MouseEvent) => void
+    hover?: Partial<Record<Passthrough, string | number>>
+    input?: (v: string) => void
+    href?: string
+    grow?: boolean
+    row?: boolean
+    col?: boolean
+    align?: string
+    [key: string]: unknown
+} & { [u in keyof typeof units]?: string | number }
+    & { [p in Passthrough]?: string | number }
+
+const maybePx = (v: string | number) => typeof v == 'number' ? `${v}px` : v
+
+export const Core = (props: Props) => {
+    const [isHover, setIsHover] = useState(false)
+
+    const style: CSSProperties = { ...(props.style as CSSProperties ?? {}) }
+    const rest: Record<string, unknown> = {}
+
+    if (props.contentEditable) rest.suppressContentEditableWarning = true
+
+    rest.onClick = (e: MouseEvent) => {
+        if (props.click) props.click(e)
+        if (props.href) window.location.href = props.href
+    }
+    rest.onInput = (e: Event) => {
+        if (props.input) props.input((e.currentTarget as HTMLElement).textContent ?? '')
+    }
+    rest.onMouseEnter = () => setIsHover(true)
+    rest.onMouseLeave = () => setIsHover(false)
+
+    for (const key in props) {
+        if (consumed.has(key)) continue
+        const keyu = key as keyof typeof units
+        const keyp = key as Passthrough
+        if (keyu in units) style[units[keyu]] = maybePx(props[keyu] as string | number)
+        else if (passthrough.includes(keyp)) style[keyp as keyof CSSProperties] = props[keyp] as never
+        else rest[key] = props[key]
+    }
+
+    if (props.grow) style.flex = 1, style.minHeight = 0
+    if (props.row) style.display = 'flex', style.flexDirection = 'row'
+    if (props.col) style.display = 'flex', style.flexDirection = 'column'
+
+    for (const word of (props.align ?? '').split(' ')) {
+        if (word === 'between') style.justifyContent = 'space-between'
+        const x = props.row ? 'justifyContent' : 'alignItems', y = props.row ? 'alignItems' : 'justifyContent'
+        if (word === 'left') style[x] = 'flex-start'
+        if (word === 'center') style[x] = 'center'
+        if (word === 'right') style[x] = 'flex-end'
+        if (word === 'top') style[y] = 'flex-start'
+        if (word === 'mid') style[y] = 'center'
+        if (word === 'bot') style[y] = 'flex-end'
+    }
+
+    if (isHover && props.hover) Object.assign(style, props.hover)
+
+    return <div style={style} {...rest}>{props.children as ReactNode}</div>
+}

package/lib.tsx

@@ -0,0 +1,123 @@
+import React from 'react'
+import { Core, type Props } from "./core"
+import { useEffect, useRef, type ReactNode } from "react"
+import Markdown from 'marked-react'
+import { Prism } from 'react-syntax-highlighter'
+
+export const D = (props: Props) => <Core gap={8} {...props} />
+
+export const A = (props: Props & { href: string }) => <D {...props} />
+
+export const App = (props: Props) =>
+  <D col wd='100vw' p={32} gap={16} minHt='100vh' background='#111' color='#eee' fontFamily='Inter, sans-serif' align='center mid' {...props}>{props.children}</D>
+
+export const Card = (props: Props) =>
+  <D col borderRadius={4} border='1px solid #333' background='#222' gap={16} p={16} {...props} />
+
+export const Btn = ({ purple, sm, ...props }: Props & { purple?: boolean, sm?: boolean }) => {
+  if (sm) props.gap = 6, props.p = '4px 12px', props.fontSize = 13
+  else props.gap = 8, props.p = '8px 16px', props.fontSize = 14
+  props.border = '1px solid ' + (purple ? '#63a' : '#444')
+  props.background = purple ? '#63a' : '#333'
+  props.hover = { background: purple ? '#74b' : '#444', border: '1px solid ' + (purple ? '#74b' : '#444') } as Props
+  return <D row borderRadius={4} cursor='pointer' align='center mid' transition='background 0.15s, border-color 0.15s' {...props} />
+}
+
+export const Chip = ({ ...props }: Props) =>
+  <D row align='center mid' p='4px 10px' borderRadius={999}
+    border='1px solid #3f3f46' background='#222' fontSize={13}
+    cursor='pointer' userSelect='none' transition='background 0.15s'
+    hover={{ background: '#333' } as Props} {...props} />
+
+export const Code = ({ lang, children }: Props & { lang: string }) =>
+  <Prism language={lang}>{children as string}</Prism>
+
+export const Dropzone = ({ onFiles, accept, multiple, dashed, ...props }:
+  Props & { onFiles?: (f: File[]) => void, accept?: string, multiple?: boolean, dashed?: boolean }) => {
+  const ref = useRef<HTMLInputElement>(null)
+  const push = (l: FileList | null) => { if (l?.length) onFiles?.(Array.from(l)) }
+  return <D cursor='pointer' transition='border-color 0.2s' border={dashed ? '2px dashed #3f3f46' : undefined} borderRadius={dashed ? 6 : undefined}
+    hover={dashed ? { border: '2px dashed #6633aa' } : {}} click={() => ref.current?.click()} {...props}>
+    <input ref={ref} type='file' hidden accept={accept} multiple={multiple} onChange={e => push(e.target.files)} />
+    {props.children}
+  </D>
+}
+
+export const Grid = ({ cols, ...props }: Props & { cols?: number }) =>
+  <D display='grid' gridTemplateColumns={`repeat(${cols || 2}, 1fr)`} gap={16} {...props} />
+
+export const Hr = ({ vertical: vert, ...props }: Props & { vertical?: boolean }) =>
+  vert ? <D alignSelf='stretch' borderLeft='1px solid #444' wd='1.5px' {...props} />
+    : <D wd='100%' borderTop='1px solid #444' {...props} />
+
+export const Input = ({ state: [x, setX], ...props }: Props & { state: [string, (v: string) => void] }) => {
+  const ref = useRef<HTMLDivElement>(null)
+  useEffect(() => { if (ref.current && document.activeElement != ref.current) ref.current.textContent = x }, [x])
+  return <Core p='8px 12px' borderRadius={4} border='1px solid #333' background='#111' color='#eee' fontSize={14} outline='none' minHt='1em' {...props} ref={ref} contentEditable input={setX} />
+}
+
+export const Md = (props: Props) =>
+  <D {...props}><Markdown>{props.children as string}</Markdown></D>
+
+export const Modal = ({ open, onClose, bare, ...props }: Props & { open: boolean, onClose?: () => void, bare?: boolean }) =>
+  open && <D position='fixed' inset='0' background={bare ? 'transparent' : '#0004'} zIndex={50} wd='100vw' ht='100%' row align='center mid' click={() => onClose?.()} {...(bare ? props : {})}>
+    {bare ? props.children : <Card p='24px' {...props}>{props.children}</Card>}
+  </D>
+
+export const Muted = (props: Props) =>
+  <D color='#71717a' fontSize={13} {...props} />
+
+export const Popover = ({ text, ...props }: Props & { text: ReactNode }) =>
+  <D position='relative' display='inline-flex' {...props}>
+    {props.children}
+    {props.hover && <D position='absolute' top='100%' left='0' zIndex={20} p='6px 0 0'>
+      <Card p='8px 12px' maxWd='260px' fontSize={13}>{text}</Card>
+    </D>}
+  </D>
+
+export const Progress = ({ dot, value, ht = 6 }: { ht?: number, value: number | boolean, dot?: number }) =>
+  <D ht={ht} wd={dot ? ht : '100%'} borderRadius={ht} background='#222' overflow='hidden'>
+    <D ht='100%' borderRadius={ht} background='#63a' transition='width 0.3s'
+      wd={`${Math.max(0, Math.min(1, Number(value))) * 100}%`} />
+  </D>
+
+export const Scroll = (props: Props) =>
+  <D grow overflow='auto' minHt='0' {...props} />
+
+export const Select = <T,>({ state: [x, setX], options, ...props }: Props & { options: Record<string, T>, state: [T, (v: T) => void] }) =>
+  <select value={String(x)} onChange={e => { const entry = Object.entries(options).find(([, v]) => String(v) === e.target.value); if (entry) setX(entry[1] as T) }} style={{
+    background: '#111', color: '#eee', border: '1px solid #333',
+    borderRadius: 4, padding: '6px 10px', fontSize: 14, outline: 'none', cursor: 'pointer',
+  }}>
+    {Object.entries(options).map(([k, v]) => <option key={k} value={String(v)}>{k}</option>)}
+  </select>
+
+export const Tab = ({ active, click, ...props }: Props & { active?: boolean, click?: () => void }) =>
+  <D p='6px 14px' borderRadius={4} cursor='pointer' fontSize={14}
+    userSelect='none' transition='all 0.15s' click={click}
+    background={active ? '#222' : 'transparent'}
+    border={active ? '1px solid #333' : '1px solid transparent'}
+    hover={!active ? { background: '#111' } as Props : undefined}
+    {...props} />
+
+export const Tabs = ({ state: [active, setActive], list, ...props }: Props & {
+  state: [string, (v: string) => void], list: string[]
+}) =>
+  <D row gap={4} p='4px' border='1px solid #222' {...props}>
+    {list.map(t => <Btn purple={active == t} click={() => setActive(t)}>{t}</Btn>)}
+  </D>
+
+export const Textarea = ({ state: [x, setX] = ['', () => { }], ...props }: Props & { state?: [string, (v: string) => void] }) =>
+  <textarea value={x} onChange={e => setX(e.target.value)}
+    style={{
+      background: '#111', color: '#eee', border: '1px solid #333',
+      borderRadius: 4, padding: '8px 12px', fontSize: 14, outline: 'none',
+      resize: 'vertical', fontFamily: 'inherit', lineHeight: 1.6
+    }} />
+
+export const H1 = (props: Props) => <D fontWeight={800} fontSize={32} {...props} />
+export const H2 = (props: Props) => <D fontWeight={800} fontSize={24} {...props} />
+export const H3 = (props: Props) => <D fontWeight={700} fontSize={20} {...props} />
+export const H4 = (props: Props) => <D fontWeight={700} fontSize={18} {...props} />
+export const H5 = (props: Props) => <D fontWeight={700} fontSize={16} {...props} />
+export const H6 = (props: Props) => <D fontWeight={700} fontSize={14} {...props} />

package/package.json

@@ -1,48 +1,26 @@
 {
   "name": "b44ui",
-  "version": "0.2.6",
+  "version": "0.3.0",
   "type": "module",
-  "sideEffects": [
-    "./index.js",
-    "./dist/styles.css"
-  ],
-  "files": [
-    "index.js",
-    "dist",
-    "tailwind.css"
-  ],
-  "scripts": {
-    "build": "npm run build:js && npm run build:css",
-    "build:css": "node scripts/build-css.mjs",
-    "build:js": "tsc -p tsconfig.json",
-    "dev": "vite",
-    "prepare": "npm run build",
-    "prepublishOnly": "npm run build"
-  },
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./index.js"
-    },
-    "./tailwind.css": "./tailwind.css",
-    "./styles.css": "./dist/styles.css"
-  },
-  "dependencies": {
-    "@vitejs/plugin-react": "^6.0.1",
-    "clsx": "^2.1.1",
-    "highlight.js": "^11.11.0",
-    "marked": "^17.0.0",
-    "marked-highlight": "^2.2.3",
-    "tailwind-merge": "^3.0.0",
-    "vite": "^8.0.2"
+    ".": "./lib.tsx",
+    "./server": "./server.tsx"
   },
   "peerDependencies": {
-    "react": "^19.0.0"
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "dependencies": {
+    "esbuild": "^0.28.0",
+    "marked": "^18.0.3",
+    "marked-react": "^4.0.0",
+    "react-syntax-highlighter": "^16.1.1"
   },
   "devDependencies": {
+    "@types/node": "^25.6.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "react-dom": "^19.2.4",
-    "tailwindcss": "^4.0.0"
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "typescript": "^6.0.3"
   }
 }

package/readme.md

@@ -1,64 +1,18 @@
-# b44ui
+# b4ui
 
-minimal dark-mode react components, via tailwind
+nice react components. also bundles a server cause why not
 
-```bash
-npm add b44ui
+```tsx
+import { Card, React, server } from "./more"
+server(() => <Card>hello world</Card>)
 ```
 
-```css
-@import "b44ui/tailwind.css";
-```
-
-if your app already has `@import "tailwindcss";`, replace that line with the one above.
+# components
 
-the host app still needs tailwind v4 processing. with vite:
+### D
 
-```ts
-import { defineConfig } from "vite"
-import react from "@vitejs/plugin-react"
-import tailwindcss from "@tailwindcss/vite"
+the div replacement. supports a bunch of shorthands:
 
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-})
+```jsx
+<D row wd="50%"></D>
 ```
-
-shared `d` props on `d`-based components:
-
-- layout: `grow`, `gap`, `p`, `wd`, `ht`, `row`, `col`, `align`
-- styling: `cn`
-- dom: native rest props like `style`, `onClick`, `data-*`
-
-`ratio` is only on `D`.
-
-| Component | Extra Props | Description |
-|-----------|-------------|-------------|
-| `App` | `center`, `width`, `htScreen` | Root layout, dark background, wraps strings in `Md` |
-| `Centered` | `width` | Centered max-width container |
-| `D` | `ratio` | Plain div, also handles row/col layout |
-| `H1` `H2` `H3` `H4` `B` `I` | none | Semantic html tags with shared `D` props |
-| `Scroll` | `grow=true` | Vertical scroll container for growable layouts |
-| `Code` | `highlight` | Code block |
-| `Grid` | `cols` | CSS grid, defaults to one column per child |
-| `Card` | none | Bordered zinc-900 card, column by default |
-| `Block` | `label`, `dashed` | Padded container with optional label |
-| `BlockSm` | `dashed` | Smaller padded container |
-| `TabList` | none | Simple tab row wrapper |
-| `Tab` | `title`, `active`, `click` | String-first tab primitive |
-| `Hr` | `vertical`, `color` | Horizontal or vertical divider |
-| `Progress` | `value`, `color`, `dot` | Progress bar or dot |
-| `Dropzone` | `onFiles`, `multiple`, `accept` | Hidden file input wrapper for click/drop |
-| `Btn` | `click`, `color`, `ghost`, `sm` | Button with optional layout props from `D` |
-| `A` | `href`, `click` | Link-styled anchor, works with `onClick` or `href` |
-| `Chip` | `click` | Small inline badge, clickable if `click` provided |
-| `Tint` | `color` | Tinted background block |
-| `Muted` | none | Small muted text |
-| `Input` | `state`, native input attrs | Styled text input, `state={[value, setValue]}` supported |
-| `Textarea` | native textarea attrs | Styled textarea |
-| `Select` | native select attrs | Styled select |
-| `Modal` | `open` | Fixed overlay modal |
-| `Popover` | `text`, `color` | Hover popover |
-| `Md` | `className` | Markdown renderer with syntax highlighting |
-
-`Color` = `red | blue | orange | purple | yellow | green`

package/server.tsx

@@ -0,0 +1,50 @@
+import { createServer } from 'node:http'
+import { build } from 'esbuild'
+import { writeFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import type { ReactNode } from 'react'
+import { App } from './lib'
+
+export const server = async (Component: () => ReactNode, port = 6767, Wrapper = App) => {
+  const serverPath = resolve('./server')
+
+  writeFileSync(resolve('./.shim.tsx'), `
+import React, { createElement } from 'react'
+import { createRoot } from 'react-dom/client'
+import { App } from './lib'
+
+export const server = (C: () => React.ReactNode, p?: number, W: any = App) =>
+  createRoot(document.getElementById('root')!).render(createElement(W, null, createElement(C)))
+`)
+
+  const shim = {
+    name: 'shim',
+    setup(build: any) {
+      build.onResolve({ filter: /.*/ }, (args: any) => {
+        const abs = resolve(args.resolveDir, args.path)
+        if (abs === serverPath || abs === serverPath + '.tsx')
+          return { path: resolve('./.shim.tsx') }
+      })
+    },
+  }
+
+  const result = await build({ entryPoints: [resolve(process.argv[1])], bundle: true, write: false, platform: 'browser', plugins: [shim] })
+
+  const clientJs = result.outputFiles[0].text
+  const html = `<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>* { box-sizing: border-box; } body { margin: 0; padding: 0; }</style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module">${clientJs}</script>
+  </body>
+</html>`
+
+  createServer((req, res) => {
+    res.writeHead(200, { 'Content-Type': 'text/html' })
+    res.end(html)
+  }).listen(port, () => console.log(`listening on ${port}`))
+}

package/showcase.tsx

@@ -0,0 +1,126 @@
+import {
+    D, App, Card, Grid, Hr, Btn, Chip, Tabs, H1, H2, H3, H4, H5, H6, Muted,
+    Input, Textarea, Select, Progress, Modal, Dropzone
+} from "./lib"
+import { server } from "./server"
+import React from "react"
+
+server(() => {
+    const [tab, setTab] = React.useState('buttons')
+    const [inputVal, setInputVal] = React.useState('editable text')
+    const [textarea, setTextarea] = React.useState('some notes here')
+    const [select, setSelect] = React.useState(2)
+    const [progress, setProgress] = React.useState(0.6)
+    const [modal, setModal] = React.useState(false)
+    const [dropped, setDropped] = React.useState<string[]>([])
+    const [count, setCount] = React.useState(0)
+
+    return <App align='top' wd='50%'>
+        <H1>b44ui</H1>
+        <D color='#888'>component showcase</D>
+
+        <Hr />
+
+        <D color='#888'>typography</D>
+        <H1>heading no. 1</H1>
+        <H2>heading no. 2</H2>
+        <H3>heading no. 3</H3>
+        <H4>heading no. 4</H4>
+        <H5>heading no. 5</H5>
+        <H6>heading no. 6</H6>
+        <Muted>also, muted</Muted>
+
+        <Hr />
+
+        <D color='#888'>buttons</D>
+        <D row>
+            <Btn click={() => setCount(c => c + 1)}>default</Btn>
+            <Btn purple click={() => setCount(c => c + 1)}>purple</Btn>
+            <Btn sm click={() => setCount(c => c + 1)}>small</Btn>
+            <Btn sm purple click={() => setCount(c => c + 1)}>small purple</Btn>
+        </D>
+        <Muted>clicks: {count}</Muted>
+
+        <Hr />
+
+        <D color='#888'>chips</D>
+        <D row>
+            <Chip>design</Chip>
+            <Chip>react</Chip>
+            <Chip>typescript</Chip>
+            <Chip>ui library</Chip>
+        </D>
+
+        <Hr />
+
+        <D color='#888'>tabs</D>
+        <Tabs state={[tab, setTab]} list={['buttons', 'inputs', 'layout']} />
+        <Card>
+            {tab === 'buttons' && <Muted>Buttons tab content</Muted>}
+            {tab === 'inputs' && <Muted>Inputs tab content</Muted>}
+            {tab === 'layout' && <Muted>Layout tab content</Muted>}
+        </Card>
+
+        <Hr />
+
+        <D color='#888'>input / textarea / select</D>
+        <D col>
+            <Muted>Input</Muted>
+            <Input state={[inputVal, setInputVal]} />
+        </D>
+        <D col>
+            <Muted>Textarea</Muted>
+            <Textarea state={[textarea, setTextarea]} />
+        </D>
+        <D col>
+            <Muted>Select</Muted>
+            <Select state={[select, setSelect]} options={{ 'use 1': 1, 'use 2': 2, 'use 3': 3 }} />
+            <Muted>Selected: {select}</Muted>
+        </D>
+
+        <Hr />
+
+        <D color='#888'>progress</D>
+        <Progress value={progress} />
+        <D row >
+            <Btn sm click={() => setProgress(p => Math.max(0, p - 0.1))}>−10%</Btn>
+            <Btn sm click={() => setProgress(p => Math.min(1, p + 0.1))}>+10%</Btn>
+            <Muted>{Math.round(progress * 100)}%</Muted>
+        </D>
+
+        <Hr />
+
+        <D color='#888'>grid</D>
+        <Grid cols={3} gap={16}>
+            {['one', 'two', 'three', 'four', 'five', 'six'].map(n => <Card key={n}>{n}</Card>)}
+        </Grid>
+
+        <Hr />
+
+        <D color='#888'>dropzone</D>
+        <Dropzone dashed onFiles={files => setDropped(files.map(f => f.name))}
+            p={32} borderRadius={6} align='center mid' col >
+            <Muted>Drop files here or click to upload</Muted>
+            {dropped.length > 0 && dropped.map(n => <Chip key={n}>{n}</Chip>)}
+        </Dropzone>
+
+        <Hr />
+
+        <D color='#888'>modal</D>
+        <Btn click={() => setModal(true)}>Open Modal</Btn>
+        <Modal open={modal} onClose={() => setModal(false)} gap={16}>
+            <H3>my cool modal</H3>
+            <Muted>you can write things here if you want</Muted>
+            <Btn click={() => setModal(false)}>nice</Btn>
+        </Modal>
+
+        <Hr />
+
+        <D color='#888'>vertical hr</D>
+        <D row ht={40} gap={16} align='left mid'>
+            <Muted>left</Muted>
+            <Hr vertical />
+            <Muted>right</Muted>
+        </D>
+    </App>
+})

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "types": ["node"],
+    "lib": ["esnext", "dom"]
+  },
+  "include": ["**/*.tsx", "**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/dist/example.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/example.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { App, Card, D, Input, Scroll } from './index';
-const Example = () => {
-    let [text, setText] = useState('');
-    return _jsxs(App, { htScreen: true, children: [_jsxs(Card, { row: true, children: [_jsx("h1", { children: "b44ui" }), _jsx(Input, { state: [text, setText], placeholder: 'input supports useState natively' })] }), _jsx(Card, { grow: true, children: _jsx(Scroll, { children: Array.from({ length: 24 }, (_, i) => _jsxs(D, { children: ["item ", i + 1] }, i)) }) })] });
-};
-import { createRoot } from 'react-dom/client';
-createRoot(document.getElementById('root')).render(_jsx(Example, {}));