b44ui 0.2.7 → 0.3.0

package/dist/index.js

@@ -1,213 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, createElement, 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',
-    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 = {
-    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',
-    green: 'bg-green-600 hover:bg-green-500',
-};
-const tintCn = (c) => tintMap[c];
-const colorCn = (c) => colorMap[c];
-const growCn = (grow) => grow && 'flex-1 min-h-0';
-const layoutCn = ({ row, col, align }) => 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');
-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, 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 };
-};
-const boxStyle = ({ ratio, ...props }) => dStyle({ ...props, style: { ...(ratio ? { width: `${ratio * 100}%` } : {}), ...props.style } });
-const headingTag = (tag) => ({ children, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, row, col, ratio, align, ...rest }) => createElement(tag, {
-    ...rest,
-    className: CN(layoutCn({ row, col, align }), rcn({ cn, cnIgnoreWrongUsage, className: rest.className }), growCn(grow)),
-    style: boxStyle({ gap, p, wd, ht, ratio, style: rest.style }),
-}, children);
-const textTag = (tag) => ({ children, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, row, col, ratio, align, ...rest }) => createElement(tag, {
-    ...rest,
-    className: CN(layoutCn({ row, col, align }), rcn({ cn, cnIgnoreWrongUsage, className: rest.className }), growCn(grow)),
-    style: boxStyle({ gap, p, wd, ht, ratio, style: rest.style }),
-}, children);
-export const D = ({ children, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, row, col, ratio, align, ...rest }) => _jsx("div", { ...rest, className: CN(layoutCn({ row, col, align }), rcn({ cn, cnIgnoreWrongUsage, className: rest.className }), growCn(grow)), style: boxStyle({ gap, p, wd, ht, ratio, style: rest.style }), children: children });
-export const H1 = headingTag('h1');
-export const H2 = headingTag('h2');
-export const H3 = headingTag('h3');
-export const H4 = headingTag('h4');
-export const B = textTag('b');
-export const I = textTag('i');
-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);
-    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 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 Card = ({ row, col, gap, p, ...rest }) => _jsx(D, { ...rest, row: row, col: col ?? !row, cn: CN('rounded border border-zinc-700 bg-zinc-900 min-h-0', 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', 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);
-            }
-            onKeyDown?.(e);
-        }, children: children });
-};
-export const Btn = ({ children, click, color, ghost, sm, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, row, col, align, 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', layoutCn({ row, col, align }), growCn(grow), c), style: dStyle({ gap, p, wd, ht, style: rest.style }), onClick: e => {
-            click?.();
-            onClick?.(e);
-        }, children: children });
-};
-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 = ({ state, options, title, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, onChange, children, ...rest }) => {
-    const c = rcn({ cn, cnIgnoreWrongUsage, className: rest.className });
-    const entries = options ? Object.entries(options) : undefined;
-    const [showTitle, setShowTitle] = useState(!!title);
-    const [innerValue, setInnerValue] = useState(rest.defaultValue);
-    const value = showTitle ? '' : state ? state[0] : rest.value ?? innerValue;
-    return _jsxs("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 }), value: value, onChange: e => {
-            if (title && e.target.value === '') {
-                setShowTitle(true);
-                onChange?.(e);
-                return;
-            }
-            const value = entries?.find(([, value]) => String(value) === e.target.value)?.[1] ?? e.target.value;
-            setShowTitle(false);
-            if (!state && rest.value === undefined)
-                setInnerValue(value);
-            state?.[1](value);
-            onChange?.(e);
-        }, children: [title && _jsx("option", { value: '', children: title }), entries
-                ? entries.map(([label, value]) => _jsx("option", { value: value, children: label }, `${label}:${value}`))
-                : children] });
-};
-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", { ...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, 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'
-            : color === 'purple' ? 'bg-purple-500'
-                : color === 'yellow' ? 'bg-yellow-500'
-                    : color === 'green' ? 'bg-green-500'
-                        : 'bg-blue-500';
-    if (dot)
-        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, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, onClick, onDragOver, onDrop, ...rest }) => {
-    const input = useRef(null);
-    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", { ...rest, className: CN(growCn(grow), c), style: dStyle({ gap, p, wd, ht, style: rest.style }), onClick: e => {
-            click?.();
-            input.current?.click();
-            onClick?.(e);
-        }, onDragOver: e => {
-            e.preventDefault();
-            onDragOver?.(e);
-        }, onDrop: e => {
-            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] });
-};
-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", { ...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, ...rest }) => {
-    const html = useMemo(() => marked.parse(children), [children]);
-    return _jsx("div", { ...rest, className: CN('ui-markdown', rest.className), dangerouslySetInnerHTML: { __html: html } });
-};