b44ui 0.2.2 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.d.ts +1689 -1
  2. package/dist/index.js +23 -5
  3. package/package.json +1 -1
  4. package/readme.md +33 -28
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Children, useMemo, useRef, useState } from 'react';
2
+ import { Children, createElement, useMemo, useRef, useState } from 'react';
3
3
  import { Marked } from 'marked';
4
4
  import { markedHighlight } from 'marked-highlight';
5
5
  import hljs from 'highlight.js';
@@ -24,6 +24,7 @@ const colorMap = {
24
24
  const tintCn = (c) => tintMap[c];
25
25
  const colorCn = (c) => colorMap[c];
26
26
  const growCn = (grow) => grow && 'flex-1 min-h-0';
27
+ 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');
27
28
  export const CN = (...inputs) => twMerge(clsx(inputs));
28
29
  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}"`);
29
30
  const rcn = ({ cn, cnIgnoreWrongUsage, className }) => { warnCn(cn); return CN(className, cn ?? cnIgnoreWrongUsage); };
@@ -34,7 +35,24 @@ const dStyle = ({ gap, p, wd, ht, style }) => {
34
35
  return undefined;
35
36
  return { ...(g !== undefined && { gap: g }), ...(pd !== undefined && { padding: pd }), ...(wd !== undefined && { width: `${wd * 100}%` }), ...(ht !== undefined && { height: `${ht * 100}%` }), ...style };
36
37
  };
37
- 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 });
38
+ const boxStyle = ({ ratio, ...props }) => dStyle({ ...props, style: { ...(ratio ? { width: `${ratio * 100}%` } : {}), ...props.style } });
39
+ const headingTag = (tag) => ({ children, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, row, col, ratio, align, ...rest }) => createElement(tag, {
40
+ ...rest,
41
+ className: CN(layoutCn({ row, col, align }), rcn({ cn, cnIgnoreWrongUsage, className: rest.className }), growCn(grow)),
42
+ style: boxStyle({ gap, p, wd, ht, ratio, style: rest.style }),
43
+ }, children);
44
+ const textTag = (tag) => ({ children, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, row, col, ratio, align, ...rest }) => createElement(tag, {
45
+ ...rest,
46
+ className: CN(layoutCn({ row, col, align }), rcn({ cn, cnIgnoreWrongUsage, className: rest.className }), growCn(grow)),
47
+ style: boxStyle({ gap, p, wd, ht, ratio, style: rest.style }),
48
+ }, children);
49
+ 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 });
50
+ export const H1 = headingTag('h1');
51
+ export const H2 = headingTag('h2');
52
+ export const H3 = headingTag('h3');
53
+ export const H4 = headingTag('h4');
54
+ export const B = textTag('b');
55
+ export const I = textTag('i');
38
56
  export const App = ({ children, center = true, width, htScreen, cn, cnIgnoreWrongUsage, gap, p, wd, ht, ...rest }) => {
39
57
  const inner = Children.map(children, c => typeof c == 'string' ? _jsx(Md, { children: c.trim() }) : c);
40
58
  const wrap = center || width !== undefined || htScreen;
@@ -59,7 +77,7 @@ export const Chip = ({ children, click, cn, cnIgnoreWrongUsage, grow, gap, p, wd
59
77
  onClick?.(e);
60
78
  }, children: children });
61
79
  };
62
- 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 });
80
+ 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 });
63
81
  export const Popover = ({ children, text, color, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, onMouseEnter, onMouseLeave, ...rest }) => {
64
82
  const c = rcn({ cn, cnIgnoreWrongUsage });
65
83
  const [open, setOpen] = useState(false);
@@ -87,9 +105,9 @@ export const A = ({ children, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, clic
87
105
  onKeyDown?.(e);
88
106
  }, children: children });
89
107
  };
90
- export const Btn = ({ children, click, color, ghost, sm, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, onClick, ...rest }) => {
108
+ export const Btn = ({ children, click, color, ghost, sm, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, row, col, align, onClick, ...rest }) => {
91
109
  const c = rcn({ cn, cnIgnoreWrongUsage, className: rest.className });
92
- 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 => {
110
+ 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 => {
93
111
  click?.();
94
112
  onClick?.(e);
95
113
  }, children: children });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "b44ui",
3
- "version": "0.2.2",
3
+ "version": "0.2.4",
4
4
  "type": "module",
5
5
  "sideEffects": [
6
6
  "./index.js",
package/readme.md CHANGED
@@ -24,36 +24,41 @@ export default defineConfig({
24
24
  })
25
25
  ```
26
26
 
27
- | Component | Props | Description |
28
- |-----------|-------|-------------|
29
- | `App` | `center`, `width`, `htScreen`, `cn`, native `div` props | Root layout, dark background, wraps strings in `Md` |
30
- | `Centered` | `width`, `cn`, `grow` | Centered max-width container |
31
- | `D` | `row`, `col`, `align`, `ratio`, `cn`, `style`, `grow`, `wd` | Plain div, also handles row/col layout |
32
- | `Scroll` | `grow` (defaults `true`), native `div` props | Vertical scroll container for growable layouts |
27
+ shared `d` props on `d`-based components:
28
+
29
+ - layout: `grow`, `gap`, `p`, `wd`, `ht`, `row`, `col`, `align`
30
+ - styling: `cn`
31
+ - dom: native rest props like `style`, `onClick`, `data-*`
32
+
33
+ `ratio` is only on `D`.
34
+
35
+ | Component | Extra Props | Description |
36
+ |-----------|-------------|-------------|
37
+ | `App` | `center`, `width`, `htScreen` | Root layout, dark background, wraps strings in `Md` |
38
+ | `Centered` | `width` | Centered max-width container |
39
+ | `D` | `ratio` | Plain div, also handles row/col layout |
40
+ | `H1` `H2` `H3` `H4` `B` `I` | none | Semantic html tags with shared `D` props |
41
+ | `Scroll` | `grow=true` | Vertical scroll container for growable layouts |
33
42
  | `Code` | `highlight` | Code block |
34
- | `Grid` | `cols`, `cn`, `grow` | CSS grid, defaults to one column per child |
35
- | `Card` | `row`, `col`, `cn`, `grow` | Bordered zinc-900 card, column by default |
36
- | `Block` | `label`, `row`, `dashed`, `cn`, `grow` | Padded container with optional label |
37
- | `BlockSm` | `dashed`, `cn`, `grow` | Smaller padded container |
38
- | `TabList` | `gap`, `p`, `wd` | Simple tab row wrapper |
39
- | `Tab` | `title`, `active`, `click`, `wd` | String-first tab primitive |
40
- | `Hr` | `vertical`, `color`, `wd` | Horizontal or vertical divider |
41
- | `Progress` | `value`, `color`, `dot`, `wd` | Progress bar or dot |
43
+ | `Grid` | `cols` | CSS grid, defaults to one column per child |
44
+ | `Card` | none | Bordered zinc-900 card, column by default |
45
+ | `Block` | `label`, `dashed` | Padded container with optional label |
46
+ | `BlockSm` | `dashed` | Smaller padded container |
47
+ | `TabList` | none | Simple tab row wrapper |
48
+ | `Tab` | `title`, `active`, `click` | String-first tab primitive |
49
+ | `Hr` | `vertical`, `color` | Horizontal or vertical divider |
50
+ | `Progress` | `value`, `color`, `dot` | Progress bar or dot |
42
51
  | `Dropzone` | `onFiles`, `multiple`, `accept` | Hidden file input wrapper for click/drop |
43
- | `Btn` | `click`, `color`, `ghost`, `cn`, `grow` | Button, supports `Color` and ghost style |
44
- | `A` | `href`, `click`, `cn`, `grow` | Link-styled anchor, works with `onClick` or `href` |
45
- | `Chip` | `click`, `cn` | Small inline badge, clickable if `click` provided |
46
- | `Tint` | `color`, `cn`, `grow` | Tinted background block |
47
- | `Muted` | `cn`, `grow` | Small muted text |
48
- | `Input` | `state`, `cn`, `grow`, ...input attrs | Styled text input, `state={[value, setValue]}` supported |
49
- | `Textarea` | `cn`, `grow`, ...textarea attrs | Styled textarea |
50
- | `Select` | `cn`, `grow`, ...select attrs | Styled select |
51
- | `Modal` | `open`, `cn` | Fixed overlay modal |
52
- | `Popover` | `text`, `color`, `cn` | Hover popover |
52
+ | `Btn` | `click`, `color`, `ghost`, `sm` | Button with optional layout props from `D` |
53
+ | `A` | `href`, `click` | Link-styled anchor, works with `onClick` or `href` |
54
+ | `Chip` | `click` | Small inline badge, clickable if `click` provided |
55
+ | `Tint` | `color` | Tinted background block |
56
+ | `Muted` | none | Small muted text |
57
+ | `Input` | `state`, native input attrs | Styled text input, `state={[value, setValue]}` supported |
58
+ | `Textarea` | native textarea attrs | Styled textarea |
59
+ | `Select` | native select attrs | Styled select |
60
+ | `Modal` | `open` | Fixed overlay modal |
61
+ | `Popover` | `text`, `color` | Hover popover |
53
62
  | `Md` | `className` | Markdown renderer with syntax highlighting |
54
63
 
55
64
  `Color` = `red | blue | orange | purple | yellow | green`
56
-
57
- All rendered components forward native rest props to their underlying element, so `style`, `onClick`, `data-*`, and native element attributes work directly.
58
-
59
- All components accept `cn` for additional Tailwind classes (merged via `tailwind-merge`).