b44ui 0.0.11 → 0.0.13

package/index.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, Children, useMemo, useState } from "react"
+import { type ReactNode, Children, useMemo, useRef, useState } from "react"
 import { Marked } from "marked"
 import { markedHighlight } from "marked-highlight"
 import hljs from "highlight.js"
@@ -6,13 +6,14 @@ import type { ClassValue } from "clsx"
 import clsx from "clsx"
 import { twMerge } from "tailwind-merge"
 
-export type Color = 'red' | 'blue' | 'orange' | 'purple' | 'yellow'
+export type Color = 'red' | 'blue' | 'orange' | 'purple' | 'yellow' | 'green'
 const tintMap: Record<Color, string> = {
   red: 'bg-red-500/20 border-red-500',
   blue: 'bg-blue-500/20 border-blue-500',
   orange: 'bg-orange-500/20 border-orange-500',
   purple: 'bg-purple-500/20 border-purple-500',
   yellow: 'bg-yellow-500/20 border-yellow-500',
+  green: 'bg-green-500/20 border-green-500',
 }
 const colorMap: Record<Color, string> = {
   red: 'bg-red-600 hover:bg-red-500',
@@ -20,6 +21,7 @@ const colorMap: Record<Color, string> = {
   orange: 'bg-orange-600 hover:bg-orange-500',
   purple: 'bg-purple-600 hover:bg-purple-500',
   yellow: 'bg-yellow-600 hover:bg-yellow-500',
+  green: 'bg-green-600 hover:bg-green-500',
 }
 const tintCn = (c: Color) => tintMap[c]
 const colorCn = (c: Color) => colorMap[c]
@@ -39,12 +41,14 @@ export type DProps = {
   grow?: boolean
   gap?: number
   p?: number
+  wd?: number
+  ht?: number
 }
 
-const dStyle = ({ gap, p, style }: DProps): React.CSSProperties | undefined => {
+const dStyle = ({ gap, p, wd, ht, style }: DProps): React.CSSProperties | undefined => {
   const g = sc(gap), pd = sc(p)
-  if (!g && !pd && !style) return undefined
-  return { ...(g !== undefined && { gap: g }), ...(pd !== undefined && { padding: pd }), ...style }
+  if (!g && !pd && wd === undefined && ht === undefined && !style) return undefined
+  return { ...(g !== undefined && { gap: g }), ...(pd !== undefined && { padding: pd }), ...(wd !== undefined && { width: `${wd * 100}%` }), ...(ht !== undefined && { height: `${ht * 100}%` }), ...style }
 }
 
 export const D = (props: DProps) =>
@@ -60,39 +64,57 @@ export const App = (props: DProps & { center?: boolean, width?: number }) => {
 }
 
 export const Centered = (props: DProps & { width?: number }) => {
-  const { children, grow, gap, p, width = 700 } = props
-  return <D cn={CN("mx-auto max-w-full px-6", rcn(props))} grow={grow} gap={gap} p={p} style={{ width }}>{children}</D>
+  const { children, grow, gap, p, wd, ht, width = 700 } = props
+  return <D cn={CN("mx-auto max-w-full px-6", rcn(props))} grow={grow} gap={gap} p={p} wd={wd} ht={ht} style={{ width }}>{children}</D>
+}
+
+export const TabList = (props: DProps) => {
+  const { children, grow, gap, p, wd, ht } = props
+  return <D cn={CN("flex items-end gap-4", rcn(props))} grow={grow} gap={gap} p={p} wd={wd} ht={ht}>{children}</D>
+}
+
+export const Tab = ({ title, active, click, grow, gap, p, ...rest }: DProps & { title: ReactNode, active?: boolean, click?: () => void } & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  const c = rcn(rest as DProps)
+  return <button
+    className={CN("cursor-pointer border-b-2 pb-1.5 text-sm font-medium", active ? "border-zinc-100 text-zinc-100" : "border-transparent text-zinc-400 hover:text-zinc-200", grow && "flex-1", c)}
+    style={dStyle({ gap, p, wd: rest.wd, style: rest.style })}
+    onClick={click}
+    role="tab"
+    aria-selected={active}
+    {...rest}
+  >{title}</button>
 }
 
 export const Block = (props: DProps & { label?: ReactNode, row?: boolean, dashed?: boolean }) => {
-  const { label, children, row, dashed, grow, gap, p } = props
-  return <D cn={CN("rounded flex flex-col items-center", dashed && "border border-dashed border-zinc-700", rcn(props))} grow={grow} gap={gap ?? 4} p={p ?? 4}>
+  const { label, children, row, dashed, grow, gap, p, wd, ht } = props
+  return <D cn={CN("rounded flex flex-col items-center", dashed && "border border-dashed border-zinc-700", rcn(props))} grow={grow} gap={gap ?? 4} p={p ?? 4} wd={wd} ht={ht}>
     {label && <span className="opacity-75">{label}</span>}
     <div className={CN(row ? "flex-row" : "flex-col", "flex items-center")} style={{ gap: sc(gap ?? 4) }}>{children}</div>
   </D>
 }
 
 export const BlockSm = (props: DProps & { dashed?: boolean }) => {
-  const { children, dashed, grow, gap, p } = props
-  return <D cn={CN("rounded text-sm", dashed && "border border-dashed border-zinc-700", rcn(props))} grow={grow} gap={gap} p={p ?? 2}
+  const { children, dashed, grow, gap, p, wd, ht } = props
+  return <D cn={CN("rounded text-sm", dashed && "border border-dashed border-zinc-700", rcn(props))} grow={grow} gap={gap} p={p ?? 2} wd={wd} ht={ht}
     style={{ paddingLeft: sc(3), paddingRight: sc(3) }}>{children}</D>
 }
 
 export const Chip = (props: DProps & { click?: () => void }) => {
-  const { children, click } = props
+  const { children, click, grow, gap, p, wd, ht, style } = props
   return <span className={CN("bg-zinc-800 rounded px-2 py-0.5 text-xs", click && "cursor-pointer hover:bg-zinc-700", rcn(props))}
+    style={dStyle({ gap, p, wd, ht, style })}
     onClick={click}>{children}</span>
 }
 
 export const Card = (props: DProps) => {
-  const { children, grow, gap, p } = props
-  return <D cn={CN("rounded border border-zinc-700 bg-zinc-900", rcn(props))} grow={grow} gap={gap ?? 4} p={p ?? 4}
+  const { children, grow, gap, p, wd, ht } = props
+  return <D cn={CN("rounded border border-zinc-700 bg-zinc-900", rcn(props))} grow={grow} gap={gap ?? 4} p={p ?? 4} wd={wd} ht={ht}
     style={{ display: 'flex', flexDirection: 'column' }}>{children}</D>
 }
 
-export const Col = (props: DProps) => {
-  const { children, grow, gap, p } = props
-  return <D cn={CN("flex flex-col", rcn(props))} grow={grow} gap={gap ?? 4} p={p}>{children}</D>
+export const Col = (props: DProps & { align?: 'start' | 'center' | 'end' }) => {
+  const { children, grow, gap, p, wd, ht, align } = props
+  return <D cn={CN("flex flex-col", align === 'start' && 'items-start', align === 'center' && 'items-center', align === 'end' && 'items-end', rcn(props))} grow={grow} gap={gap ?? 4} p={p} wd={wd} ht={ht}>{children}</D>
 }
 
 export const Popover = (props: DProps & { text: ReactNode, color?: Color }) => {
@@ -113,7 +135,7 @@ export const Muted = (props: DProps) => {
 }
 
 export const A = ({
-  children, cn, cnIgnoreWrongUsage, grow, gap, p, style, click, href, onClick, onKeyDown, role, tabIndex, ...rest
+  children, cn, cnIgnoreWrongUsage, grow, gap, p, wd, 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>) => {
@@ -128,7 +150,7 @@ export const A = ({
     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 })}
+    style={dStyle({ gap, p, wd, style })}
     onClick={fire}
     onKeyDown={e => {
       if (buttonLike && (e.key === 'Enter' || e.key === ' ')) {
@@ -144,50 +166,130 @@ export const Btn = ({ children, grow, gap, p, click, color, ghost, sm, ...rest }
   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",
     ghost ? "bg-transparent text-zinc-400 hover:bg-zinc-800" : color ? colorCn(color) : "bg-zinc-800 hover:bg-zinc-700", grow && "flex-1", c)}
-    style={dStyle({ gap, p })} onClick={click} {...rest}>{children}</button>
+    style={dStyle({ gap, p, wd: rest.wd, style: rest.style })} onClick={click} {...rest}>{children}</button>
 }
 
 export const Tint = (props: DProps & { color: Color }) => {
-  const { children, color, grow, gap, p } = props
-  return <D cn={CN("rounded text-sm", tintCn(color), rcn(props))} grow={grow} gap={gap} p={p ?? 3}>{children}</D>
+  const { children, color, grow, gap, p, wd, ht } = props
+  return <D cn={CN("rounded text-sm", tintCn(color), rcn(props))} grow={grow} gap={gap} p={p ?? 3} wd={wd} ht={ht}>{children}</D>
 }
 
 export const Row = (props: DProps & { ratio?: number, align?: 'mid' | 'start' | 'end' }) => {
-  const { children, ratio, align, grow, gap, p } = props
+  const { children, ratio, align, grow, gap, p, wd, ht, style } = props
   return <div className={CN("flex items-center justify-center", align === 'mid' && "justify-between", align == 'end' && "justify-end", align == 'start' && "justify-start", grow && "flex-1", rcn(props))}
-    style={{ gap: sc(gap ?? 4), ...(p !== undefined && { padding: sc(p) }), ...(ratio ? { width: `${ratio * 100}%` } : {}) }}>{children}</div>
+    style={{ ...dStyle({ gap: gap ?? 4, p, wd, ht, style }), ...(ratio ? { width: `${ratio * 100}%` } : {}) }}>{children}</div>
 }
 
 export const Toolbar = (props: DProps) => {
-  const { children, gap, p } = props
-  return <Row cn={CN("border-b border-zinc-700", rcn(props))} gap={gap} p={p ?? 2} align="mid">{children}</Row>
+  const { children, gap, p, wd, ht } = props
+  return <Row cn={CN("border-b border-zinc-700", rcn(props))} gap={gap} p={p ?? 2} wd={wd} ht={ht} align="mid">{children}</Row>
 }
 
 export const Modal = (props: DProps & { open: boolean }) => {
-  const { children, open, gap, p } = props
+  const { children, open, gap, p, wd, ht } = props
   return open ? <div className="fixed inset-0 flex items-center justify-center bg-black/50 z-50">
-    <Card cn={CN("max-h-[80vh] overflow-y-auto w-lg", rcn(props))} gap={gap} p={p}>{children}</Card>
+    <Card cn={CN("max-h-[80vh] overflow-y-auto w-lg", rcn(props))} gap={gap} p={p} wd={wd} ht={ht}>{children}</Card>
   </div> : null
 }
 
 export const Input = ({ cn, cnIgnoreWrongUsage, grow, ...rest }: DProps & React.InputHTMLAttributes<HTMLInputElement>) => {
   const c = rcn({ cn, cnIgnoreWrongUsage })
-  return <input className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none", grow && "flex-1", c)} {...rest} />
+  return <input className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none", grow && "flex-1", c)} style={dStyle({ gap: rest.gap, p: rest.p, wd: rest.wd, style: rest.style })} {...rest} />
 }
 
-export const Textarea = ({ cn, cnIgnoreWrongUsage, grow, ...rest }: DProps & React.TextareaHTMLAttributes<HTMLTextAreaElement>) => {
+export const Textarea = ({ cn, cnIgnoreWrongUsage, ref, grow, ...rest }: DProps & React.TextareaHTMLAttributes<HTMLTextAreaElement> & { ref?: React.RefObject<HTMLTextAreaElement | null> }) => {
   const c = rcn({ cn, cnIgnoreWrongUsage })
-  return <textarea className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none w-full", grow && "flex-1", c)} {...rest} />
+  return <textarea ref={ref} className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none w-full", grow && "flex-1", c)} style={dStyle({ gap: rest.gap, p: rest.p, wd: rest.wd, style: rest.style })} {...rest} />
 }
 
 export const Select = ({ cn, cnIgnoreWrongUsage, grow, ...rest }: DProps & React.SelectHTMLAttributes<HTMLSelectElement>) => {
   const c = rcn({ cn, cnIgnoreWrongUsage })
-  return <select className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none cursor-pointer", grow && "flex-1", c)} {...rest} />
+  return <select className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none cursor-pointer", grow && "flex-1", c)} style={dStyle({ gap: rest.gap, p: rest.p, wd: rest.wd, style: rest.style })} {...rest} />
 }
 
 export const Grid = (props: DProps & { cols?: number }) => {
-  const { children, cols, grow, gap, p } = props
-  return <D cn={CN("grid ui-grid", rcn(props))} grow={grow} p={p} style={{ gap: sc(gap ?? 4), '--cols': cols ?? Children.count(children) } as React.CSSProperties}>{children}</D>
+  const { children, cols, grow, gap, p, wd, ht } = props
+  return <D cn={CN("grid ui-grid", rcn(props))} grow={grow} p={p} wd={wd} ht={ht} style={{ gap: sc(gap ?? 4), '--cols': cols ?? Children.count(children) } as React.CSSProperties}>{children}</D>
+}
+
+export const Hr = ({ vertical, color = 'gray', grow, gap, p, ...rest }: DProps & { vertical?: boolean, color?: Color | 'gray' }) => {
+  const c = rcn(rest as DProps)
+  const border = color === 'gray' ? "border-zinc-700" : ({
+    red: "border-red-500",
+    blue: "border-blue-500",
+    orange: "border-orange-500",
+    purple: "border-purple-500",
+    yellow: "border-yellow-500",
+    green: "border-green-500",
+  } satisfies Record<Color, string>)[color]
+
+  return <div
+    className={CN(vertical ? "self-stretch border-l" : "w-full border-t", border, grow && "flex-1", c)}
+    style={dStyle({ gap, p, wd: rest.wd, style: rest.style })}
+    aria-hidden="true"
+  />
+}
+
+export const Progress = ({ value, color = 'blue', dot, grow, gap, p, ...rest }: DProps & { value: number, color?: Color, dot?: boolean }) => {
+  const c = rcn(rest as DProps)
+  const v = Math.max(0, Math.min(1, value))
+  const fill = color === 'red' ? 'bg-red-500'
+    : color === 'orange' ? 'bg-orange-500'
+    : color === 'purple' ? 'bg-purple-500'
+    : color === 'yellow' ? 'bg-yellow-500'
+    : color === 'green' ? 'bg-green-500'
+    : 'bg-blue-500'
+
+  if (dot) return <div
+    className={CN("rounded-full border border-zinc-700 bg-zinc-800 overflow-hidden", grow && "flex-1", c)}
+    style={dStyle({ gap, p, wd: rest.wd, style: { aspectRatio: '1 / 1', ...rest.style } })}
+  >
+    <div className={CN("h-full rounded-full", fill)} style={{ opacity: v ? 1 : 0.2 }} />
+  </div>
+
+  return <div
+    className={CN("h-2 overflow-hidden rounded-full bg-zinc-800 border border-zinc-700", grow && "flex-1", c)}
+    style={dStyle({ gap, p, wd: rest.wd, style: rest.style })}
+  >
+    <div className={CN("h-full rounded-full", fill)} style={{ width: `${v * 100}%` }} />
+  </div>
+}
+
+export const Dropzone = ({ children, onFiles, multiple, accept, click, ...rest }: DProps & { onFiles: (files: File[]) => void, multiple?: boolean, accept?: string, click?: () => void }) => {
+  const input = useRef<HTMLInputElement>(null)
+  const c = rcn(rest)
+  const push = (list: FileList | null) => {
+    const files = list ? Array.from(list) : []
+    if (files.length) onFiles(files)
+  }
+
+  return <div
+    className={CN("contents", c)}
+    onClick={e => {
+      click?.()
+      input.current?.click()
+      rest.onClick?.(e as any)
+    }}
+    onDragOver={e => {
+      e.preventDefault()
+      rest.onDragOver?.(e)
+    }}
+    onDrop={e => {
+      e.preventDefault()
+      push(e.dataTransfer.files)
+      rest.onDrop?.(e)
+    }}
+  >
+    <input
+      ref={input}
+      hidden
+      type="file"
+      multiple={multiple}
+      accept={accept}
+      onChange={e => push(e.target.files)}
+    />
+    {children}
+  </div>
 }
 
 export const Code = (props: DProps & { highlight?: string }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "b44ui",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "files": [
     "index.tsx",

package/readme.md

@@ -28,14 +28,19 @@ export default defineConfig({
 |-----------|-------|-------------|
 | `App` | `center`, `width`, `cn` | Root layout, dark background, wraps strings in `Md` |
 | `Centered` | `width`, `cn`, `grow` | Centered max-width container |
-| `D` | `cn`, `style`, `grow` | Plain div with `cn` |
-| `Row` | `align`, `ratio`, `cn`, `grow` | Flex row, `align`: `start \| mid \| end` |
-| `Col` | `cn`, `grow` | Flex column |
+| `D` | `cn`, `style`, `grow`, `wd` | Plain div with `cn` |
+| `Row` | `align`, `ratio`, `cn`, `grow`, `wd` | Flex row, `align`: `start \| mid \| end` |
+| `Col` | `cn`, `grow`, `wd` | 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 |
+| `TabList` | `gap`, `p`, `wd` | Simple tab row wrapper |
+| `Tab` | `title`, `active`, `click`, `wd` | String-first tab primitive |
+| `Hr` | `vertical`, `color`, `wd` | Horizontal or vertical divider |
+| `Progress` | `value`, `color`, `dot`, `wd` | Progress bar or dot |
+| `Dropzone` | `onFiles`, `multiple`, `accept` | Hidden file input wrapper for click/drop |
 | `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 |
@@ -48,6 +53,6 @@ export default defineConfig({
 | `Popover` | `text`, `color`, `cn` | Hover popover |
 | `Md` | `className` | Markdown renderer with syntax highlighting |
 
-`Color`: `red \| blue \| orange \| purple \| yellow`
+`Color`: `red \| blue \| orange \| purple \| yellow \| green`
 
 All components accept `cn` for additional Tailwind classes (merged via `tailwind-merge`).

package/styles.css

@@ -1,22 +1,21 @@
 @import "highlight.js/styles/github-dark.css";
 
 .ui-markdown { line-height: 1.5; }
-.ui-markdown h1, .ui-markdown h2, .ui-markdown h3 { font-weight: 700; margin: 0; }
-.ui-markdown h1 { font-size: 1.5em; }
-.ui-markdown h2 { font-size: 1.25em; }
-.ui-markdown h3 { font-size: 1.1em; }
-.ui-markdown p { margin: 0.4em 0; }
+h1, .ui-markdown h2, .ui-markdown h3 { font-weight: 700; margin: 0; }
+h1 { font-size: 1.5em; }
+h2 { font-size: 1.25em; }
+h3 { font-size: 1.1em; }
+p { margin: 0.4em 0; }
+a { color: #93c5fd; text-decoration: underline; }
+pre { background: #1a1a2e; border-radius: 4px; padding: 0; overflow-x: auto; margin: 0.4em 0; }
+code { font-family: ui-monospace, monospace; font-size: 0.9em; }
+blockquote { border-left: 3px solid #444; padding-left: 1em; opacity: 0.8; margin: 0.25em 0; }
+img { max-width: 100%; border-radius: 6px; }
 .ui-markdown p:first-child { margin-top: 0; }
 .ui-markdown p:last-child { margin-bottom: 0; }
-.ui-markdown pre { background: #1a1a2e; border-radius: 4px; padding: 0; overflow-x: auto; margin: 0.4em 0; }
-.ui-markdown code { font-family: ui-monospace, monospace; font-size: 0.9em; }
 .ui-markdown :not(pre) > code { background: #1a1a2e; padding: 2px 5px; border-radius: 3px; }
 .ui-markdown ul, .ui-markdown ol { padding-left: 1.5em; margin: 0.25em 0; }
-.ui-markdown blockquote { border-left: 3px solid #444; padding-left: 1em; opacity: 0.8; margin: 0.25em 0; }
-.ui-markdown a { color: #93c5fd; text-decoration: underline; }
 .ui-markdown table { border-collapse: collapse; margin: 0.4em 0; }
 .ui-markdown th, .ui-markdown td { border: 1px solid #333; padding: 4px 10px; }
-.ui-markdown img { max-width: 100%; border-radius: 6px; }
-
 .ui-grid { grid-template-columns: repeat(var(--cols), 1fr); }
 @media (max-width: 640px) { .ui-grid { grid-template-columns: 1fr; } }