b44ui 0.0.11 → 0.0.12

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,13 @@ export type DProps = {
   grow?: boolean
   gap?: number
   p?: number
+  wd?: number
 }
 
-const dStyle = ({ gap, p, style }: DProps): React.CSSProperties | undefined => {
+const dStyle = ({ gap, p, wd, 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 && !style) return undefined
+  return { ...(g !== undefined && { gap: g }), ...(pd !== undefined && { padding: pd }), ...(wd !== undefined && { width: `${wd * 100}%` }), ...style }
 }
 
 export const D = (props: DProps) =>
@@ -64,6 +67,23 @@ export const Centered = (props: DProps & { width?: number }) => {
   return <D cn={CN("mx-auto max-w-full px-6", rcn(props))} grow={grow} gap={gap} p={p} style={{ width }}>{children}</D>
 }
 
+export const TabList = (props: DProps) => {
+  const { children, grow, gap, p } = props
+  return <D cn={CN("flex items-end gap-4", rcn(props))} grow={grow} gap={gap} p={p}>{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}>
@@ -79,8 +99,9 @@ export const BlockSm = (props: DProps & { dashed?: boolean }) => {
 }
 
 export const Chip = (props: DProps & { click?: () => void }) => {
-  const { children, click } = props
+  const { children, click, grow, gap, p, wd, 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, style })}
     onClick={click}>{children}</span>
 }
 
@@ -144,7 +165,7 @@ 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 }) => {
@@ -153,9 +174,9 @@ export const Tint = (props: DProps & { color: Color }) => {
 }
 
 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, 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, style }), ...(ratio ? { width: `${ratio * 100}%` } : {}) }}>{children}</div>
 }
 
 export const Toolbar = (props: DProps) => {
@@ -172,17 +193,17 @@ export const Modal = (props: DProps & { open: boolean }) => {
 
 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>) => {
   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 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 }) => {
@@ -190,6 +211,86 @@ export const Grid = (props: DProps & { cols?: number }) => {
   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>
 }
 
+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 }) => {
   const { children, highlight } = props
   const c = rcn(props)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "b44ui",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "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`).