b44ui 0.0.5 → 0.0.6

package/README.md

@@ -7,7 +7,7 @@ minimal dark-mode react components, via tailwind
 
 pnpm add b44ui
 
-echo 'optimizeDeps: { include: ["highlight.js"] }' >> vite.config.ts
+echo 'optimizeDeps: { include: ["b44ui", "highlight.js"] }' >> vite.config.ts
 
 echo '@import "tailwindcss";
 @source "../node_modules/b44ui/index.tsx";

package/index.tsx

@@ -7,51 +7,82 @@ import clsx from "clsx"
 import { twMerge } from "tailwind-merge"
 
 export type Color = 'red' | 'blue' | 'orange' | 'purple' | 'yellow'
-const tintCn = (c: Color) => `bg-${c}-500/20 border-${c}-500`
-const colorCn = (c: Color) => `bg-${c}-600 hover:bg-${c}-500`
+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',
+}
+const colorMap: Record<Color, string> = {
+  red: 'bg-red-600 hover:bg-red-500',
+  blue: 'bg-blue-600 hover:bg-blue-500',
+  orange: 'bg-orange-600 hover:bg-orange-500',
+  purple: 'bg-purple-600 hover:bg-purple-500',
+  yellow: 'bg-yellow-600 hover:bg-yellow-500',
+}
+const tintCn = (c: Color) => tintMap[c]
+const colorCn = (c: Color) => colorMap[c]
 
 export const CN = (...inputs: ClassValue[]) => twMerge(clsx(inputs))
 
-export type DProps = { children?: ReactNode, cn?: any, style?: React.CSSProperties, grow?: boolean }
-export const D = ({ children, cn, style, grow }: DProps) =>
-  <div className={CN(cn, grow && "flex-1")} style={style}>{children}</div>
+const sc = (n?: number) => n !== undefined ? n * 4 : undefined // tailwind scale -> px
 
-export const App = ({ children, center = true, width, cn }: DProps & { center?: boolean, width?: number }) => {
-  const inner = Children.map(children, c => typeof c == 'string' ? <Md>{c.trim()}</Md> : c)
+export type DProps = {
+  children?: ReactNode
+  cn?: any
+  style?: React.CSSProperties
+  grow?: boolean
+  gap?: number
+  p?: number
+}
 
-  return <D cn={["min-h-screen w-full bg-[#111] text-[#eee] font-[Inter]", center && "flex justify-center items-center", cn]}>
+const dStyle = ({ gap, p, 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 }
+}
+
+export const D = (props: DProps) =>
+  <div className={CN(props.cn, props.grow && "flex-1")} style={dStyle(props)}>{props.children}</div>
+
+export const App = ({ children, center = true, width, cn, gap, p }: DProps & { center?: boolean, width?: number }) => {
+  const inner = Children.map(children, c => typeof c == 'string' ? <Md>{c.trim()}</Md> : c)
+  return <D cn={["min-h-screen w-full bg-[#111] text-[#eee] font-[Inter]", center && "flex justify-center items-center", cn]} gap={gap} p={p}>
     {center ? <div className="max-w-full px-5 py-10 space-y-5 *:mx-auto" style={{ width }}>{inner}</div> : inner}
   </D>
 }
 
-export const Centered = ({ children, cn, grow, width = 700 }: DProps & { width?: number }) =>
-  <D cn={["mx-auto max-w-full px-6", cn]} grow={grow} style={{ width }}>{children}</D>
+export const Centered = ({ children, cn, grow, gap, p, width = 700 }: DProps & { width?: number }) =>
+  <D cn={["mx-auto max-w-full px-6", cn]} grow={grow} gap={gap} p={p} style={{ width }}>{children}</D>
 
-export const Block = ({ label, children, row, dashed, cn, grow }: DProps & { label?: ReactNode, row?: boolean, dashed?: boolean }) =>
-  <D cn={["rounded p-4 flex flex-col items-center gap-2", dashed && "border border-dashed border-zinc-700", cn]} grow={grow}>
+export const Block = ({ label, children, row, dashed, cn, grow, gap, p }: DProps & { label?: ReactNode, row?: boolean, dashed?: boolean }) =>
+  <D cn={["rounded flex flex-col items-center", dashed && "border border-dashed border-zinc-700", cn]} grow={grow} gap={gap ?? 4} p={p ?? 4}>
     {label && <span className="opacity-75">{label}</span>}
-    <div className={CN(row ? "flex-row" : "flex-col", "flex items-center gap-2")}>{children}</div>
+    <div className={CN(row ? "flex-row" : "flex-col", "flex items-center")} style={{ gap: sc(gap ?? 4) }}>{children}</div>
   </D>
 
-export const BlockSm = ({ children, dashed, cn, grow }: DProps & { dashed?: boolean }) =>
-  <D cn={["rounded px-3 py-2 text-sm", dashed && "border border-dashed border-zinc-700", cn]} grow={grow}>{children}</D>
+export const BlockSm = ({ children, dashed, cn, grow, gap, p }: DProps & { dashed?: boolean }) =>
+  <D cn={["rounded text-sm", dashed && "border border-dashed border-zinc-700", cn]} grow={grow} gap={gap} p={p ?? 2}
+    style={{ paddingLeft: sc(3), paddingRight: sc(3) }}>{children}</D>
 
 export const Chip = ({ children, cn, click }: DProps & { click?: () => void }) =>
   <span className={CN("bg-zinc-800 rounded px-2 py-0.5 text-xs", click && "cursor-pointer hover:bg-zinc-700", cn)}
     onClick={click}>{children}</span>
 
-export const Card = ({ children, cn, grow }: DProps) =>
-  <D cn={["rounded border border-zinc-700 bg-zinc-900 p-4 space-y-3", cn]} grow={grow}>{children}</D>
+export const Card = ({ children, cn, grow, gap, p }: DProps) =>
+  <D cn={["rounded border border-zinc-700 bg-zinc-900", cn]} grow={grow} gap={gap ?? 4} p={p ?? 4}
+    style={{ display: 'flex', flexDirection: 'column' }}>{children}</D>
 
-export const Col = ({ children, cn, grow }: DProps) =>
-  <D cn={["flex flex-col gap-3", cn]} grow={grow}>{children}</D>
+export const Col = ({ children, cn, grow, gap, p }: DProps) =>
+  <D cn={["flex flex-col", cn]} grow={grow} gap={gap ?? 4} p={p}>{children}</D>
 
 export const Popover = ({ children, text, color, cn }: DProps & { text: ReactNode, color?: Color }) => {
   const [open, setOpen] = useState(false)
   return <span className="relative inline-block" onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
     <span className={CN("cursor-pointer", color && tintCn(color), color && "border-b-2", cn)}>{children}</span>
     {open && <div className="absolute left-0 top-full z-10 mt-1">
-      <Card cn="w-64 p-3 shadow-lg text-sm">{text}</Card>
+      <Card cn="w-64 shadow-lg text-sm" p={3}>{text}</Card>
     </div>}
   </span>
 }
@@ -59,21 +90,24 @@ export const Popover = ({ children, text, color, cn }: DProps & { text: ReactNod
 export const Muted = ({ children, cn, grow }: DProps) =>
   <span className={CN("text-sm text-zinc-400", grow && "flex-1", cn)}>{children}</span>
 
-export const Btn = ({ children, cn, grow, click, color, ghost, ...rest }: DProps & { click?: () => void, color?: Color, ghost?: boolean } & React.ButtonHTMLAttributes<HTMLButtonElement>) =>
-  <button className={CN("rounded px-4 py-2 text-sm cursor-pointer",
+export const Btn = ({ children, cn, grow, gap, p, click, color, ghost, sm, ...rest }: DProps & { click?: () => void, color?: Color, ghost?: boolean, sm?: boolean } & React.ButtonHTMLAttributes<HTMLButtonElement>) =>
+  <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", cn)}
-    onClick={click} {...rest}>{children}</button>
+    style={dStyle({ gap, p })} onClick={click} {...rest}>{children}</button>
+
+export const Tint = ({ children, color, cn, grow, gap, p }: DProps & { color: Color }) =>
+  <D cn={["rounded text-sm", tintCn(color), cn]} grow={grow} gap={gap} p={p ?? 3}>{children}</D>
 
-export const Tint = ({ children, color, cn, grow }: DProps & { color: Color }) =>
-  <D cn={["p-3 rounded text-sm", tintCn(color), cn]} grow={grow}>{children}</D>
+export const Row = ({ children, ratio, align, cn, grow, gap, p }: DProps & { ratio?: number, align?: 'mid' | 'start' | 'end' }) =>
+  <div className={CN("flex items-center justify-center", align === 'mid' && "justify-between", align == 'end' && "justify-end", align == 'start' && "justify-start", grow && "flex-1", cn)}
+    style={{ gap: sc(gap ?? 4), ...(p !== undefined && { padding: sc(p) }), ...(ratio ? { width: `${ratio * 100}%` } : {}) }}>{children}</div>
 
-export const Row = ({ children, ratio, align, cn, grow }: DProps & { ratio?: number, align?: 'mid' | 'start' | 'end' }) =>
-  <div className={CN("flex gap-2 items-center", align === 'mid' && "justify-between", align == 'end' && "justify-end", align == 'start' && "justify-start", grow && "flex-1", cn)}
-    style={ratio ? { width: `${ratio * 100}%` } : undefined}>{children}</div>
+export const Toolbar = ({ children, cn, gap, p }: DProps) =>
+  <Row cn={["border-b border-zinc-700", cn]} gap={gap} p={p ?? 2} align="mid">{children}</Row>
 
-export const Modal = ({ children, open, cn }: DProps & { open: boolean }) =>
+export const Modal = ({ children, open, cn, gap, p }: DProps & { open: boolean }) =>
   open ? <div className="fixed inset-0 flex items-center justify-center bg-black/50 z-50">
-    <Card cn={["max-h-[80vh] overflow-y-auto w-lg", cn]}>{children}</Card>
+    <Card cn={["max-h-[80vh] overflow-y-auto w-lg", cn]} gap={gap} p={p}>{children}</Card>
   </div> : null
 
 export const Input = ({ cn, grow, ...rest }: { cn?: any, grow?: boolean } & React.InputHTMLAttributes<HTMLInputElement>) =>
@@ -85,8 +119,8 @@ export const Textarea = ({ cn, grow, ...rest }: { cn?: any, grow?: boolean } & R
 export const Select = ({ cn, grow, ...rest }: { cn?: any, grow?: boolean } & React.SelectHTMLAttributes<HTMLSelectElement>) =>
   <select className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none cursor-pointer", grow && "flex-1", cn)} {...rest} />
 
-export const Grid = ({ children, cols, cn, grow }: DProps & { cols?: number }) =>
-  <D cn={["grid gap-4", cn]} grow={grow} style={{ gridTemplateColumns: `repeat(${cols ?? Children.count(children)}, 1fr)` }}>{children}</D>
+export const Grid = ({ children, cols, cn, grow, gap, p }: DProps & { cols?: number }) =>
+  <D cn={["grid", cn]} grow={grow} p={p} style={{ gap: sc(gap ?? 4), gridTemplateColumns: `repeat(${cols ?? Children.count(children)}, 1fr)` }}>{children}</D>
 
 const marked = new Marked(markedHighlight({ langPrefix: "hljs language-", highlight: c => hljs.highlightAuto(c).value }))
 export const Md = ({ children, className }: { children: string, className?: string }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "b44ui",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "type": "module",
   "scripts": {
     "dev": "npm run dev --prefix example"

package/styles.css

@@ -1,18 +1,19 @@
 @import "highlight.js/styles/github-dark.css";
 
-/* markdown - todo rewrite in tailwind */
-:root { line-height: 1.6; }
-h1, h2, h3 { font-weight: 700; margin: 1em 0 0.5em; }
-h1 { font-size: 1.5em; }
-h2 { font-size: 1.25em; }
-h3 { font-size: 1.1em; }
-p { margin: 1em 0; }
-pre { background: #1a1a2e; border-radius: 4px; padding: 0; overflow-x: auto; margin: 0.75em 0; }
-code { font-family: ui-monospace, monospace; font-size: 0.9em; padding: 4px; }
-:not(pre) > code { background: #1a1a2e; padding: 2px 5px; border-radius: 3px; }
-ul, ol { padding-left: 1.5em; margin: 0.5em 0; }
-blockquote { border-left: 3px solid #444; padding-left: 1em; opacity: 0.8; margin: 0.5em 0; }
-a { color: #93c5fd; text-decoration: underline; }
-table { border-collapse: collapse; margin: 0.75em 0; }
-th, td { border: 1px solid #333; padding: 6px 12px; }
-img { max-width: 100%; border-radius: 6px; }
+.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; }
+.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; }