b44ui 0.2.2 → 0.2.3

package/dist/index.d.ts

@@ -56,7 +56,7 @@ export declare const Muted: ({ children, cn, cnIgnoreWrongUsage, grow, gap, p, w
 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, click, color, ghost, sm, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, onClick, ...rest }: DProps & {
+export declare const Btn: ({ children, click, color, ghost, sm, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, row, col, align, onClick, ...rest }: DProps & {
     click?: () => void;
     color?: Color;
     ghost?: boolean;

package/dist/index.js

@@ -24,6 +24,7 @@ const colorMap = {
 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); };
@@ -34,7 +35,7 @@ const dStyle = ({ gap, p, wd, ht, 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 = ({ 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 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: 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);
     const wrap = center || width !== undefined || htScreen;
@@ -59,7 +60,7 @@ export const Chip = ({ children, click, cn, cnIgnoreWrongUsage, grow, gap, p, wd
             onClick?.(e);
         }, children: children });
 };
-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 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);
@@ -87,9 +88,9 @@ export const A = ({ children, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, clic
             onKeyDown?.(e);
         }, children: children });
 };
-export const Btn = ({ children, click, color, ghost, sm, cn, cnIgnoreWrongUsage, grow, gap, p, wd, ht, onClick, ...rest }) => {
+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', growCn(grow), c), style: dStyle({ gap, p, wd, ht, style: rest.style }), onClick: e => {
+    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 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "b44ui",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "type": "module",
   "sideEffects": [
     "./index.js",

package/readme.md

@@ -32,7 +32,7 @@ export default defineConfig({
 | `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` | `row`, `col`, `cn`, `grow` | Bordered zinc-900 card, column by default |
+| `Card` | `row`, `col`, `align`, `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 |
@@ -40,7 +40,7 @@ export default defineConfig({
 | `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 |
+| `Btn` | `click`, `color`, `ghost`, `row`, `col`, `align`, `cn`, `grow` | Button, supports `Color`, ghost style, and layout props |
 | `A` | `href`, `click`, `cn`, `grow` | Link-styled anchor, works with `onClick` or `href` |
 | `Chip` | `click`, `cn` | Small inline badge, clickable if `click` provided |
 | `Tint` | `color`, `cn`, `grow` | Tinted background block |