b44ui 0.2.1 → 0.2.2

package/dist/example.d.ts

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

package/dist/example.js

@@ -0,0 +1,9 @@
+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, {}));

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { type ReactNode } from "react";
-import type { ClassValue } from "clsx";
+import { type ReactNode } from 'react';
+import type { ClassValue } from 'clsx';
 export type Color = 'red' | 'blue' | 'orange' | 'purple' | 'yellow' | 'green';
 export declare const CN: (...inputs: ClassValue[]) => string;
 export type DProps = {
@@ -12,88 +12,93 @@ export type DProps = {
     p?: number;
     wd?: number;
     ht?: number;
+    row?: boolean;
+    col?: boolean;
+    ratio?: number;
+    align?: 'start' | 'mid' | 'center' | 'end';
 };
-export declare const D: (props: DProps) => import("react/jsx-runtime").JSX.Element;
-export declare const App: (props: DProps & {
+type DivProps = DProps & React.HTMLAttributes<HTMLDivElement>;
+type SpanProps = DProps & React.HTMLAttributes<HTMLSpanElement>;
+type AppProps = DivProps & {
     center?: boolean;
     width?: number;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const Centered: (props: DProps & {
+    htScreen?: boolean;
+};
+type InputState = [string, React.Dispatch<React.SetStateAction<string>>];
+export declare const D: ({ children, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, row, col, ratio, align, ...rest }: DivProps) => import("react/jsx-runtime").JSX.Element;
+export declare const App: ({ children, center, width, htScreen, cn, cnIgnoreWrongUsage, gap, p, wd, ht, ...rest }: AppProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Centered: ({ width, ...rest }: DivProps & {
     width?: number;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const TabList: (props: DProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Tab: ({ title, active, click, grow, gap, p, ...rest }: DProps & {
+export declare const TabList: ({ gap, ...rest }: DivProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tab: ({ title, active, click, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, onClick, ...rest }: DProps & {
     title: ReactNode;
     active?: boolean;
     click?: () => void;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
-export declare const Block: (props: DProps & {
+export declare const Block: ({ label, children, row, dashed, gap, p, ...rest }: DivProps & {
     label?: ReactNode;
     row?: boolean;
     dashed?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const BlockSm: (props: DProps & {
+export declare const BlockSm: ({ dashed, gap, p, ...rest }: DivProps & {
     dashed?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const Chip: (props: DProps & {
+export declare const Chip: ({ children, click, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, onClick, ...rest }: SpanProps & {
     click?: () => void;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const Card: (props: DProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Col: (props: DProps & {
-    align?: "start" | "center" | "end";
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const Popover: (props: DProps & {
+export declare const Card: ({ row, col, gap, p, ...rest }: DivProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Popover: ({ children, text, color, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, onMouseEnter, onMouseLeave, ...rest }: SpanProps & {
     text: ReactNode;
     color?: Color;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const Muted: (props: DProps) => import("react/jsx-runtime").JSX.Element;
-export declare const A: ({ children, cn, cnIgnoreWrongUsage, grow, gap, p, wd, style, click, href, onClick, onKeyDown, role, tabIndex, ...rest }: DProps & {
+export declare const Muted: ({ children, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, ...rest }: SpanProps) => import("react/jsx-runtime").JSX.Element;
+export declare const A: ({ children, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, click, href, onClick, onKeyDown, role, tabIndex, ...rest }: DProps & {
     click?: () => void;
 } & React.AnchorHTMLAttributes<HTMLAnchorElement>) => import("react/jsx-runtime").JSX.Element;
-export declare const Btn: ({ children, grow, gap, p, click, color, ghost, sm, ...rest }: DProps & {
+export declare const Btn: ({ children, click, color, ghost, sm, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, onClick, ...rest }: DProps & {
     click?: () => void;
     color?: Color;
     ghost?: boolean;
     sm?: boolean;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
-export declare const Tint: (props: DProps & {
+export declare const Tint: ({ color, gap, p, ...rest }: DivProps & {
     color: Color;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const Row: (props: DProps & {
-    ratio?: number;
-    align?: "mid" | "start" | "end";
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const Toolbar: (props: DProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Modal: (props: DProps & {
+export declare const Toolbar: ({ p, ...rest }: DivProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ children, open, cn, cnIgnoreWrongUsage, gap, p, wd, ht, ...rest }: DivProps & {
     open: boolean;
 }) => import("react/jsx-runtime").JSX.Element | null;
-export declare const Input: ({ cn, cnIgnoreWrongUsage, grow, ...rest }: DProps & React.InputHTMLAttributes<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
-export declare const Textarea: ({ cn, cnIgnoreWrongUsage, ref, grow, ...rest }: DProps & React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+export declare const Input: ({ state, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, onChange, ...rest }: DProps & React.InputHTMLAttributes<HTMLInputElement> & {
+    state?: InputState;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Textarea: ({ cn, cnIgnoreWrongUsage, ref, grow, gap, p, wd, ht, ...rest }: DProps & React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
     ref?: React.RefObject<HTMLTextAreaElement | null>;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const Select: ({ cn, cnIgnoreWrongUsage, grow, ...rest }: DProps & React.SelectHTMLAttributes<HTMLSelectElement>) => import("react/jsx-runtime").JSX.Element;
-export declare const Grid: (props: DProps & {
+export declare const Select: ({ cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, ...rest }: DProps & React.SelectHTMLAttributes<HTMLSelectElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const Grid: ({ children, cols, gap, ...rest }: DivProps & {
     cols?: number;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const Hr: ({ vertical, color, grow, gap, p, ...rest }: DProps & {
+export declare const Scroll: ({ grow, ...rest }: DivProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Hr: ({ vertical, color, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, ...rest }: DProps & {
     vertical?: boolean;
     color?: Color | "gray";
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const Progress: ({ value, color, dot, grow, gap, p, ...rest }: DProps & {
+} & React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const Progress: ({ value, color, dot, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, ...rest }: DProps & {
     value: number;
     color?: Color;
     dot?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const Dropzone: ({ children, onFiles, multiple, accept, click, onClick, onDragOver, onDrop, ...rest }: DProps & {
+} & React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const Dropzone: ({ children, onFiles, multiple, accept, click, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, onClick, onDragOver, onDrop, ...rest }: DProps & {
     onFiles: (files: File[]) => void;
     multiple?: boolean;
     accept?: string;
     click?: () => void;
 } & React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
-export declare const Code: (props: DProps & {
+export declare const Code: ({ children, highlight, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, ...rest }: DProps & {
     highlight?: string;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const Md: ({ children, className }: {
+} & React.HTMLAttributes<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const Md: ({ children, ...rest }: {
     children: string;
-    className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+} & React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, useMemo, useRef, useState } from "react";
-import { Marked } from "marked";
-import { markedHighlight } from "marked-highlight";
-import hljs from "highlight.js";
-import clsx from "clsx";
-import { twMerge } from "tailwind-merge";
+import { Children, useMemo, useRef, useState } from 'react';
+import { Marked } from 'marked';
+import { markedHighlight } from 'marked-highlight';
+import hljs from 'highlight.js';
+import clsx from 'clsx';
+import { twMerge } from 'tailwind-merge';
 const tintMap = {
     red: 'bg-red-500/20 border-red-500',
     blue: 'bg-blue-500/20 border-blue-500',
@@ -23,73 +23,63 @@ const colorMap = {
 };
 const tintCn = (c) => tintMap[c];
 const colorCn = (c) => colorMap[c];
+const growCn = (grow) => grow && 'flex-1 min-h-0';
 export const CN = (...inputs) => twMerge(clsx(inputs));
 const warnCn = (cn) => typeof cn === 'string' && cn.length > 24 && console.warn(`long cn detected (${cn.length} chars). please avoid using cn. you SHOULD use b44ui builtins instead. you SHOULD NOT use cn to add unnecessary visual enhancements. you MUST NOT have long cns. if you choose to ignore these requirements (ie. because you cannot achieve this otherwise) you MUST instead use <... cnIgnoreWrongUsage="styles..">\n  cn="${cn}"`);
-const rcn = ({ cn, cnIgnoreWrongUsage }) => { warnCn(cn); return cn ?? cnIgnoreWrongUsage; };
-const sc = (n) => n !== undefined ? n * 4 : undefined; // tailwind scale -> px
+const rcn = ({ cn, cnIgnoreWrongUsage, className }) => { warnCn(cn); return CN(className, cn ?? cnIgnoreWrongUsage); };
+const sc = (n) => n !== undefined ? n * 4 : undefined;
 const dStyle = ({ gap, p, wd, ht, style }) => {
     const g = sc(gap), pd = sc(p);
     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) => _jsx("div", { className: CN(props.cn ?? props.cnIgnoreWrongUsage, props.grow && "flex-1"), style: dStyle(props), children: props.children });
-export const App = (props) => {
-    const { children, center = true, width, gap, p } = props;
-    const c = rcn(props);
+export const D = ({ children, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, row, col, ratio, align, ...rest }) => _jsx("div", { ...rest, className: CN(row && 'flex items-center justify-center', col && 'flex flex-col', row && align === 'mid' && 'justify-between', row && align === 'start' && 'justify-start', row && align === 'end' && 'justify-end', col && align === 'start' && 'items-start', col && (align === 'center' || align === 'mid') && 'items-center', col && align === 'end' && 'items-end', rcn({ cn, cnIgnoreWrongUsage, className: rest.className }), growCn(grow)), style: dStyle({ gap, p, wd, ht, style: { ...(ratio ? { width: `${ratio * 100}%` } : {}), ...rest.style } }), children: children });
+export const App = ({ children, center = true, width, htScreen, cn, cnIgnoreWrongUsage, gap, p, wd, ht, ...rest }) => {
     const inner = Children.map(children, c => typeof c == 'string' ? _jsx(Md, { children: c.trim() }) : c);
-    return _jsx(D, { cn: CN("min-h-screen w-full bg-[#111] text-[#eee] font-[Inter]", center && "flex justify-center items-center", c), gap: gap, p: p, children: center ? _jsx("div", { className: "max-w-full px-5 py-10 space-y-5 *:mx-auto", style: { width }, children: inner }) : inner });
-};
-export const Centered = (props) => {
-    const { children, grow, gap, p, wd, ht, width = 700 } = props;
-    return _jsx(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: children });
-};
-export const TabList = (props) => {
-    const { children, grow, gap, p, wd, ht } = props;
-    return _jsx(D, { cn: CN("flex items-end gap-4", rcn(props)), grow: grow, gap: gap, p: p, wd: wd, ht: ht, children: children });
-};
-export const Tab = ({ title, active, click, grow, gap, p, ...rest }) => {
-    const c = rcn(rest);
-    return _jsx("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, children: title });
-};
-export const Block = (props) => {
-    const { label, children, row, dashed, grow, gap, p, wd, ht } = props;
-    return _jsxs(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, children: [label && _jsx("span", { className: "opacity-75", children: label }), _jsx("div", { className: CN(row ? "flex-row" : "flex-col", "flex items-center"), style: { gap: sc(gap ?? 4) }, children: children })] });
-};
-export const BlockSm = (props) => {
-    const { children, dashed, grow, gap, p, wd, ht } = props;
-    return _jsx(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: children });
-};
-export const Chip = (props) => {
-    const { children, click, gap, p, wd, ht, style } = props;
-    return _jsx("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: children });
-};
-export const Card = (props) => {
-    const { children, grow, gap, p, wd, ht } = props;
-    return _jsx(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: children });
-};
-export const Col = (props) => {
-    const { children, grow, gap, p, wd, ht, align } = props;
-    return _jsx(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: children });
-};
-export const Popover = (props) => {
-    const { children, text, color } = props;
-    const c = rcn(props);
-    const [open, setOpen] = useState(false);
-    return _jsxs("span", { className: "relative inline-block", onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false), children: [_jsx("span", { className: CN("cursor-pointer", color && tintCn(color), color && "border-b-2", c), children: children }), open && _jsx("div", { className: "absolute left-0 top-full z-10 mt-1", children: _jsx(Card, { cn: "w-64 shadow-lg text-sm", p: props.p ?? 3, gap: props.gap, children: text }) })] });
+    const wrap = center || width !== undefined || htScreen;
+    const c = rcn({ cn, cnIgnoreWrongUsage, className: rest.className });
+    return _jsx("div", { ...rest, className: CN('w-full bg-[#111] text-[#eee] font-[Inter]', htScreen ? 'h-screen' : 'min-h-screen', center && !htScreen && 'flex justify-center items-center', c), style: dStyle({ gap, p, wd, ht, style: rest.style }), children: wrap ? _jsx("div", { className: CN('max-w-full px-5', htScreen ? 'w-full h-full min-h-0 py-5 flex flex-col gap-5' : 'py-10 space-y-5', center && 'mx-auto', center && !htScreen && '[&>*]:mx-auto'), style: { width }, children: inner }) : inner });
+};
+export const Centered = ({ width = 700, ...rest }) => _jsx(D, { ...rest, cn: CN('mx-auto max-w-full px-6', rcn(rest)), style: { width, ...rest.style } });
+export const TabList = ({ gap, ...rest }) => _jsx(D, { ...rest, cn: CN('flex items-end gap-4', rcn(rest)), gap: gap });
+export const Tab = ({ title, active, click, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, onClick, ...rest }) => {
+    const c = rcn({ cn, cnIgnoreWrongUsage, className: rest.className });
+    return _jsx("button", { ...rest, 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', growCn(grow), c), style: dStyle({ gap, p, wd, ht, style: rest.style }), onClick: e => {
+            click?.();
+            onClick?.(e);
+        }, role: rest.role ?? 'tab', "aria-selected": active, children: title });
 };
-export const Muted = (props) => {
-    const { children, grow } = props;
-    return _jsx("span", { className: CN("text-sm text-zinc-400", grow && "flex-1", rcn(props)), children: children });
+export const Block = ({ label, children, row, dashed, gap, p, ...rest }) => _jsxs(D, { ...rest, cn: CN('rounded flex flex-col items-center', dashed && 'border border-dashed border-zinc-700', rcn(rest)), gap: gap ?? 4, p: p ?? 4, children: [label && _jsx("span", { className: 'opacity-75', children: label }), _jsx("div", { className: CN(row ? 'flex-row' : 'flex-col', 'flex items-center'), style: { gap: sc(gap ?? 4) }, children: children })] });
+export const BlockSm = ({ dashed, gap, p, ...rest }) => _jsx(D, { ...rest, cn: CN('rounded text-sm', dashed && 'border border-dashed border-zinc-700', rcn(rest)), gap: gap, p: p ?? 2, style: { paddingLeft: sc(3), paddingRight: sc(3), ...rest.style } });
+export const Chip = ({ children, click, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, onClick, ...rest }) => {
+    const c = rcn({ cn, cnIgnoreWrongUsage, className: rest.className });
+    return _jsx("span", { ...rest, className: CN('bg-zinc-800 rounded px-2 py-0.5 text-xs', (click || onClick) && 'cursor-pointer hover:bg-zinc-700', growCn(grow), c), style: dStyle({ gap, p, wd, ht, style: rest.style }), onClick: e => {
+            click?.();
+            onClick?.(e);
+        }, children: children });
 };
-export const A = ({ children, cn, cnIgnoreWrongUsage, grow, gap, p, wd, style, click, href, onClick, onKeyDown, role, tabIndex, ...rest }) => {
+export const Card = ({ row, col, gap, p, ...rest }) => _jsx(D, { ...rest, cn: CN('rounded border border-zinc-700 bg-zinc-900 flex min-h-0', row ? 'flex-row' : 'flex-col', col && 'flex-col', rcn(rest)), gap: gap ?? 4, p: p ?? 4 });
+export const Popover = ({ children, text, color, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, onMouseEnter, onMouseLeave, ...rest }) => {
     const c = rcn({ cn, cnIgnoreWrongUsage });
+    const [open, setOpen] = useState(false);
+    return _jsxs("span", { ...rest, className: CN('relative inline-block', growCn(grow), rest.className), style: dStyle({ gap, p, wd, ht, style: rest.style }), onMouseEnter: e => {
+            setOpen(true);
+            onMouseEnter?.(e);
+        }, onMouseLeave: e => {
+            setOpen(false);
+            onMouseLeave?.(e);
+        }, children: [_jsx("span", { className: CN('cursor-pointer', color && tintCn(color), color && 'border-b-2', c), children: children }), open && _jsx("div", { className: 'absolute left-0 top-full z-10 mt-1', children: _jsx(Card, { cn: 'w-64 shadow-lg text-sm', p: p ?? 3, gap: gap, children: text }) })] });
+};
+export const Muted = ({ children, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, ...rest }) => _jsx("span", { ...rest, className: CN('text-sm text-zinc-400', growCn(grow), rcn({ cn, cnIgnoreWrongUsage, className: rest.className })), style: dStyle({ gap, p, wd, ht, style: rest.style }), children: children });
+export const A = ({ children, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, click, href, onClick, onKeyDown, role, tabIndex, ...rest }) => {
+    const c = rcn({ cn, cnIgnoreWrongUsage, className: rest.className });
     const fire = (e) => {
         click?.();
         onClick?.(e);
     };
     const buttonLike = !href;
-    return _jsx("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, wd, style }), onClick: fire, onKeyDown: e => {
+    return _jsx("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', growCn(grow), c), style: dStyle({ gap, p, wd, ht, style: rest.style }), onClick: fire, onKeyDown: e => {
             if (buttonLike && (e.key === 'Enter' || e.key === ' ')) {
                 e.preventDefault();
                 fire(e);
@@ -97,56 +87,50 @@ export const A = ({ children, cn, cnIgnoreWrongUsage, grow, gap, p, wd, style, c
             onKeyDown?.(e);
         }, children: children });
 };
-export const Btn = ({ children, grow, gap, p, click, color, ghost, sm, ...rest }) => {
-    const c = rcn(rest);
-    return _jsx("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, wd: rest.wd, style: rest.style }), onClick: click, ...rest, children: children });
-};
-export const Tint = (props) => {
-    const { children, color, grow, gap, p, wd, ht } = props;
-    return _jsx(D, { cn: CN("rounded text-sm", tintCn(color), rcn(props)), grow: grow, gap: gap, p: p ?? 3, wd: wd, ht: ht, children: children });
-};
-export const Row = (props) => {
-    const { children, ratio, align, grow, gap, p, wd, ht, style } = props;
-    return _jsx("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: { ...dStyle({ gap: gap ?? 4, p, wd, ht, style }), ...(ratio ? { width: `${ratio * 100}%` } : {}) }, children: children });
-};
-export const Toolbar = (props) => {
-    const { children, gap, p, wd, ht } = props;
-    return _jsx(Row, { cn: CN("border-b border-zinc-700", rcn(props)), gap: gap, p: p ?? 2, wd: wd, ht: ht, align: "mid", children: children });
-};
-export const Modal = (props) => {
-    const { children, open, gap, p, wd, ht } = props;
-    return open ? _jsx("div", { className: "fixed inset-0 flex items-center justify-center bg-black/50 z-50", children: _jsx(Card, { cn: CN("max-h-[80vh] overflow-y-auto w-lg", rcn(props)), gap: gap, p: p, wd: wd, ht: ht, children: children }) }) : null;
-};
-export const Input = ({ cn, cnIgnoreWrongUsage, grow, ...rest }) => {
-    const c = rcn({ cn, cnIgnoreWrongUsage });
-    return _jsx("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, ref, grow, ...rest }) => {
-    const c = rcn({ cn, cnIgnoreWrongUsage });
-    return _jsx("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 Btn = ({ children, click, color, ghost, sm, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, onClick, ...rest }) => {
+    const c = rcn({ cn, cnIgnoreWrongUsage, className: rest.className });
+    return _jsx("button", { ...rest, 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', growCn(grow), c), style: dStyle({ gap, p, wd, ht, style: rest.style }), onClick: e => {
+            click?.();
+            onClick?.(e);
+        }, children: children });
 };
-export const Select = ({ cn, cnIgnoreWrongUsage, grow, ...rest }) => {
-    const c = rcn({ cn, cnIgnoreWrongUsage });
-    return _jsx("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) => {
-    const { children, cols, grow, gap, p, wd, ht } = props;
-    return _jsx(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) }, children: children });
-};
-export const Hr = ({ vertical, color = 'gray', grow, gap, p, ...rest }) => {
-    const c = rcn(rest);
-    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",
+export const Tint = ({ color, gap, p, ...rest }) => _jsx(D, { ...rest, cn: CN('rounded text-sm', tintCn(color), rcn(rest)), gap: gap, p: p ?? 3 });
+export const Toolbar = ({ p, ...rest }) => _jsx(D, { ...rest, row: true, cn: CN('border-b border-zinc-700', rcn(rest)), p: p ?? 2, gap: rest.gap ?? 4, align: 'mid' });
+export const Modal = ({ children, open, cn, cnIgnoreWrongUsage, gap, p, wd, ht, ...rest }) => {
+    const c = rcn({ cn, cnIgnoreWrongUsage, className: rest.className });
+    return open ? _jsx("div", { ...rest, className: CN('fixed inset-0 flex items-center justify-center bg-black/50 z-50', c), style: dStyle({ gap, p, wd, ht, style: rest.style }), children: _jsx(Card, { cn: 'max-h-[80vh] overflow-y-auto w-lg', children: children }) }) : null;
+};
+export const Input = ({ state, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, onChange, ...rest }) => {
+    const c = rcn({ cn, cnIgnoreWrongUsage, className: rest.className });
+    return _jsx("input", { ...rest, className: CN('rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none', growCn(grow), c), style: dStyle({ gap, p, wd, ht, style: rest.style }), value: state ? state[0] : rest.value, onChange: e => {
+            state?.[1](e.target.value);
+            onChange?.(e);
+        } });
+};
+export const Textarea = ({ cn, cnIgnoreWrongUsage, ref, grow, gap, p, wd, ht, ...rest }) => {
+    const c = rcn({ cn, cnIgnoreWrongUsage, className: rest.className });
+    return _jsx("textarea", { ref: ref, ...rest, className: CN('rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none w-full', growCn(grow), c), style: dStyle({ gap, p, wd, ht, style: rest.style }) });
+};
+export const Select = ({ cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, ...rest }) => {
+    const c = rcn({ cn, cnIgnoreWrongUsage, className: rest.className });
+    return _jsx("select", { ...rest, className: CN('rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none cursor-pointer', growCn(grow), c), style: dStyle({ gap, p, wd, ht, style: rest.style }) });
+};
+export const Grid = ({ children, cols, gap, ...rest }) => _jsx(D, { ...rest, cn: CN('grid ui-grid', rcn(rest)), gap: gap ?? 4, style: { ['--cols']: cols ?? Children.count(children), ...rest.style }, children: children });
+export const Scroll = ({ grow = true, ...rest }) => _jsx(D, { ...rest, cn: CN('min-h-0 overflow-y-auto', rcn(rest)), grow: grow });
+export const Hr = ({ vertical, color = 'gray', cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, ...rest }) => {
+    const c = rcn({ cn, cnIgnoreWrongUsage, className: rest.className });
+    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',
     }[color];
-    return _jsx("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" });
+    return _jsx("div", { ...rest, className: CN(vertical ? 'self-stretch border-l' : 'w-full border-t', border, growCn(grow), c), style: dStyle({ gap, p, wd, ht, style: rest.style }), "aria-hidden": 'true' });
 };
-export const Progress = ({ value, color = 'blue', dot, grow, gap, p, ...rest }) => {
-    const c = rcn(rest);
+export const Progress = ({ value, color = 'blue', dot, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, ...rest }) => {
+    const c = rcn({ cn, cnIgnoreWrongUsage, className: rest.className });
     const v = Math.max(0, Math.min(1, value));
     const fill = color === 'red' ? 'bg-red-500'
         : color === 'orange' ? 'bg-orange-500'
@@ -155,18 +139,18 @@ export const Progress = ({ value, color = 'blue', dot, grow, gap, p, ...rest })
                     : color === 'green' ? 'bg-green-500'
                         : 'bg-blue-500';
     if (dot)
-        return _jsx("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 } }), children: _jsx("div", { className: CN("h-full rounded-full", fill), style: { opacity: v ? 1 : 0.2 } }) });
-    return _jsx("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 }), children: _jsx("div", { className: CN("h-full rounded-full", fill), style: { width: `${v * 100}%` } }) });
+        return _jsx("div", { ...rest, className: CN('rounded-full border border-zinc-700 bg-zinc-800 overflow-hidden', growCn(grow), c), style: dStyle({ gap, p, wd, ht, style: { aspectRatio: '1 / 1', ...rest.style } }), children: _jsx("div", { className: CN('h-full rounded-full', fill), style: { opacity: v ? 1 : 0.2 } }) });
+    return _jsx("div", { ...rest, className: CN('h-2 overflow-hidden rounded-full bg-zinc-800 border border-zinc-700', growCn(grow), c), style: dStyle({ gap, p, wd, ht, style: rest.style }), children: _jsx("div", { className: CN('h-full rounded-full', fill), style: { width: `${v * 100}%` } }) });
 };
-export const Dropzone = ({ children, onFiles, multiple, accept, click, onClick, onDragOver, onDrop, ...rest }) => {
+export const Dropzone = ({ children, onFiles, multiple, accept, click, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, onClick, onDragOver, onDrop, ...rest }) => {
     const input = useRef(null);
-    const c = rcn(rest);
+    const c = rcn({ cn, cnIgnoreWrongUsage, className: rest.className });
     const push = (list) => {
         const files = list ? Array.from(list) : [];
         if (files.length)
             onFiles(files);
     };
-    return _jsxs("div", { className: CN("contents", c), onClick: e => {
+    return _jsxs("div", { ...rest, className: CN(growCn(grow), c), style: dStyle({ gap, p, wd, ht, style: rest.style }), onClick: e => {
             click?.();
             input.current?.click();
             onClick?.(e);
@@ -177,18 +161,17 @@ export const Dropzone = ({ children, onFiles, multiple, accept, click, onClick,
             e.preventDefault();
             push(e.dataTransfer.files);
             onDrop?.(e);
-        }, children: [_jsx("input", { ref: input, hidden: true, type: "file", multiple: multiple, accept: accept, onChange: e => push(e.target.files) }), children] });
+        }, children: [_jsx("input", { ref: input, hidden: true, type: 'file', multiple: multiple, accept: accept, onChange: e => push(e.target.files) }), children] });
 };
-export const Code = (props) => {
-    const { children, highlight } = props;
-    const c = rcn(props);
+export const Code = ({ children, highlight, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, ...rest }) => {
+    const c = rcn({ cn, cnIgnoreWrongUsage, className: rest.className });
     const html = useMemo(() => highlight ? hljs.highlight(children, { language: highlight }).value : '', [children, highlight]);
     if (highlight)
-        return _jsx("pre", { className: CN("rounded bg-zinc-900 border border-zinc-700 p-3 text-sm overflow-x-auto", c), children: _jsx("code", { className: `hljs language-${highlight}`, dangerouslySetInnerHTML: { __html: html } }) });
-    return _jsx("code", { className: CN("bg-zinc-800 rounded px-1.5 py-0.5 text-sm font-mono", c), children: children });
+        return _jsx("pre", { ...rest, className: CN('rounded bg-zinc-900 border border-zinc-700 p-3 text-sm overflow-x-auto', growCn(grow), c), style: dStyle({ gap, p, wd, ht, style: rest.style }), children: _jsx("code", { className: `hljs language-${highlight}`, dangerouslySetInnerHTML: { __html: html } }) });
+    return _jsx("code", { ...rest, className: CN('bg-zinc-800 rounded px-1.5 py-0.5 text-sm font-mono', growCn(grow), c), style: dStyle({ gap, p, wd, ht, style: rest.style }), children: children });
 };
-const marked = new Marked(markedHighlight({ langPrefix: "hljs language-", highlight: c => hljs.highlightAuto(c).value }));
-export const Md = ({ children, className }) => {
+const marked = new Marked(markedHighlight({ langPrefix: 'hljs language-', highlight: c => hljs.highlightAuto(c).value }));
+export const Md = ({ children, ...rest }) => {
     const html = useMemo(() => marked.parse(children), [children]);
-    return _jsx("div", { className: CN("ui-markdown", className), dangerouslySetInnerHTML: { __html: html } });
+    return _jsx("div", { ...rest, className: CN('ui-markdown', rest.className), dangerouslySetInnerHTML: { __html: html } });
 };

package/dist/styles.css

@@ -223,9 +223,6 @@
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
-  .contents {
-    display: contents;
-  }
   .flex {
     display: flex;
   }
@@ -244,9 +241,15 @@
   .h-full {
     height: 100%;
   }
+  .h-screen {
+    height: 100vh;
+  }
   .max-h-\[80vh\] {
     max-height: 80vh;
   }
+  .min-h-0 {
+    min-height: calc(var(--spacing) * 0);
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -301,6 +304,9 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .gap-5 {
+    gap: calc(var(--spacing) * 5);
+  }
   .space-y-5 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -497,6 +503,9 @@
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
+  .py-5 {
+    padding-block: calc(var(--spacing) * 5);
+  }
   .py-10 {
     padding-block: calc(var(--spacing) * 10);
   }
@@ -690,20 +699,40 @@ code.hljs {
   color: #ffdcd7;
   background-color: #67060c;
 }
+h1, h2, h3, h4 {
+  font-weight: 700;
+  line-height: 1.1;
+  margin: 0;
+}
+h1 {
+  font-size: 2em;
+}
+h2 {
+  font-size: 1.6em;
+}
+h3 {
+  font-size: 1.3em;
+}
+h4 {
+  font-size: 1.1em;
+}
 .ui-markdown {
   line-height: 1.5;
 }
-.ui-markdown h1, .ui-markdown h2, .ui-markdown h3 {
+.ui-markdown h1, .ui-markdown h2, .ui-markdown h3, .ui-markdown h4 {
   font-weight: 700;
   margin: 0;
 }
 .ui-markdown h1 {
-  font-size: 1.5em;
+  font-size: 2em;
 }
 .ui-markdown h2 {
-  font-size: 1.25em;
+  font-size: 1.6em;
 }
 .ui-markdown h3 {
+  font-size: 1.3em;
+}
+.ui-markdown h4 {
   font-size: 1.1em;
 }
 .ui-markdown p {

package/dist/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

package/dist/vite.config.js

@@ -0,0 +1,5 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+export default defineConfig({
+    plugins: [react()],
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "b44ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
   "sideEffects": [
     "./index.js",
@@ -15,7 +15,7 @@
     "build": "npm run build:js && npm run build:css",
     "build:css": "node scripts/build-css.mjs",
     "build:js": "tsc -p tsconfig.json",
-    "dev": "npm run dev --prefix example",
+    "dev": "vite",
     "prepare": "npm run build",
     "prepublishOnly": "npm run build"
   },
@@ -28,17 +28,21 @@
     "./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"
+    "tailwind-merge": "^3.0.0",
+    "vite": "^8.0.2"
   },
   "peerDependencies": {
     "react": "^19.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "react-dom": "^19.2.4",
     "tailwindcss": "^4.0.0"
   }
 }

package/readme.md

@@ -26,14 +26,13 @@ export default defineConfig({
 
 | Component | Props | Description |
 |-----------|-------|-------------|
-| `App` | `center`, `width`, `cn` | Root layout, dark background, wraps strings in `Md` |
+| `App` | `center`, `width`, `htScreen`, `cn`, native `div` props | Root layout, dark background, wraps strings in `Md` |
 | `Centered` | `width`, `cn`, `grow` | Centered max-width container |
-| `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 |
+| `D` | `row`, `col`, `align`, `ratio`, `cn`, `style`, `grow`, `wd` | Plain div, also handles row/col layout |
+| `Scroll` | `grow` (defaults `true`), native `div` props | Vertical scroll container for growable layouts |
 | `Code` | `highlight` | Code block |
 | `Grid` | `cols`, `cn`, `grow` | CSS grid, defaults to one column per child |
-| `Card` | `cn`, `grow` | Bordered zinc-900 card |
+| `Card` | `row`, `col`, `cn`, `grow` | Bordered zinc-900 card, column by default |
 | `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 |
@@ -46,13 +45,15 @@ export default defineConfig({
 | `Chip` | `click`, `cn` | Small inline badge, clickable if `click` provided |
 | `Tint` | `color`, `cn`, `grow` | Tinted background block |
 | `Muted` | `cn`, `grow` | Small muted text |
-| `Input` | `cn`, `grow`, ...input attrs | Styled text input |
+| `Input` | `state`, `cn`, `grow`, ...input attrs | Styled text input, `state={[value, setValue]}` supported |
 | `Textarea` | `cn`, `grow`, ...textarea attrs | Styled textarea |
 | `Select` | `cn`, `grow`, ...select attrs | Styled select |
 | `Modal` | `open`, `cn` | Fixed overlay modal |
 | `Popover` | `text`, `color`, `cn` | Hover popover |
 | `Md` | `className` | Markdown renderer with syntax highlighting |
 
-`Color`: `red \| blue \| orange \| purple \| yellow \| green`
+`Color` = `red | blue | orange | purple | yellow | green`
+
+All rendered components forward native rest props to their underlying element, so `style`, `onClick`, `data-*`, and native element attributes work directly.
 
 All components accept `cn` for additional Tailwind classes (merged via `tailwind-merge`).