@bunnix/components 0.9.0 → 0.9.2

package/src/components/DatePicker.mjs

@@ -1,4 +1,5 @@
 import Bunnix, { ForEach, useMemo, useRef, useState } from "@bunnix/core";
+import { clampSize, toSizeToken } from "../utils/sizeUtils.mjs";
 import Icon from "./Icon.mjs";
 const { div, button, span, hr } = Bunnix;
 
@@ -51,7 +52,7 @@ export default function DatePicker({
   placeholder,
   range = false,
   variant = "regular",
-  size = "md",
+  size = "regular",
   class: className = ""
 } = {}) {
   const popoverRef = useRef(null);
@@ -161,25 +162,22 @@ export default function DatePicker({
 
   const hasValue = inputValue.map(v => !!v);
 
-  const normalizeSize = (value) => {
-    if (!value || value === "default" || value === "regular" || value === "md") return "md";
-    if (value === "sm") return "md";
-    if (value === "lg" || value === "xl") return value;
-    return value;
-  };
+  // DatePicker does not support small size (clamps to regular)
+  const normalizeSize = (value) => clampSize(value, ["xsmall", "regular", "large", "xlarge"], "regular");
   const normalizedSize = normalizeSize(size);
+  const sizeToken = toSizeToken(normalizedSize);
   const variantClass = variant === "rounded" ? "rounded-full" : "";
-  const triggerSizeClass = normalizedSize === "xl"
+  const triggerSizeClass = sizeToken === "xl"
     ? "dropdown-xl"
-    : normalizedSize === "lg"
+    : sizeToken === "lg"
       ? "dropdown-lg"
       : "";
-  const iconSizeValue = normalizedSize === "sm"
-    ? "sm"
-    : normalizedSize === "lg"
-      ? "lg"
-      : normalizedSize === "xl"
-        ? "xl"
+  const iconSizeValue = normalizedSize === "small"
+    ? "small"
+    : normalizedSize === "large"
+      ? "large"
+      : normalizedSize === "xlarge"
+        ? "xlarge"
         : undefined;
 
   return div({ class: `datepicker-wrapper ${className}`.trim() }, [

package/src/components/Dialog.mjs

@@ -11,6 +11,8 @@ const defaultDialog = {
   open: false,
   title: "",
   message: "",
+  minWidth: 400,
+  minHeight: null,
   confirmation: {
     text: "",
     action: null,
@@ -26,11 +28,17 @@ const defaultDialog = {
 
 export const dialogState = useState(defaultDialog);
 
-export const showDialog = ({ title, message, confirmation, content } = {}) => {
+export const showDialog = (options = {}) => {
+  const { title, message, confirmation, content, minWidth, minHeight } = options;
+  const hasMinWidth = Object.prototype.hasOwnProperty.call(options, "minWidth");
+  const hasMinHeight = Object.prototype.hasOwnProperty.call(options, "minHeight");
+
   dialogState.set({
     open: true,
     title: title ?? "",
     message: message ?? "",
+    minWidth: hasMinWidth ? minWidth : defaultDialog.minWidth,
+    minHeight: hasMinHeight ? minHeight : defaultDialog.minHeight,
     confirmation: {
       text: confirmation?.text ?? defaultDialog.confirmation.text,
       action: confirmation?.action ?? null,
@@ -51,6 +59,7 @@ export const hideDialog = () => {
 
 export default function Dialog() {
   const dialogRef = useRef(null);
+  const panelRef = useRef(null);
   const setConfirmDisabled = (disabled) => {
     const current = dialogState.get();
     dialogState.set({
@@ -62,6 +71,13 @@ export default function Dialog() {
     });
   };
 
+  const resolveSizeValue = (size) => {
+    if (size == null || size === "") return "";
+    if (size === "auto") return "auto";
+    if (typeof size === "number") return `${size}px`;
+    return String(size);
+  };
+
   useEffect((value) => {
     const element = dialogRef.current;
     if (!element) return;
@@ -73,6 +89,14 @@ export default function Dialog() {
     } else if (element.open) {
       element.close();
     }
+
+    const panel = panelRef.current;
+    if (panel) {
+      const minWidth = resolveSizeValue(value?.minWidth);
+      const minHeight = resolveSizeValue(value?.minHeight);
+      panel.style.minWidth = minWidth || "";
+      panel.style.minHeight = minHeight || "";
+    }
   }, [dialogState]);
 
   const confirmationText = dialogState.map((value) => value.confirmation?.text ?? defaultDialog.confirmation.text);
@@ -109,7 +133,11 @@ export default function Dialog() {
       hideDialog();
     }
   }, [
-    VStack({ gap: "regular", class: "box-capsule shadow bg-base w-full max-w-400 p-lg items-stretch dialog-appear" }, [
+    VStack({
+      ref: panelRef,
+      gap: "regular",
+      class: "box-capsule dialog-panel shadow bg-base p-lg items-stretch dialog-appear"
+    }, [
       HStack({ alignment: "leading", gap: "small", class: "items-center w-full" }, [
         Text({ type: "heading4", class: "no-margin" }, dialogState.map((value) => value.title)),
         div({ class: "spacer-h" }),
@@ -127,7 +155,10 @@ export default function Dialog() {
       Show(showContent, () => {
         const current = dialogState.get();
         if (typeof current.content !== "function") return null;
-        return div({ class: "column-container gap-sm" }, current.content({ setConfirmDisabled }));
+        return div(
+          { class: "column-container gap-sm w-full h-full flex-1" },
+          current.content({ setConfirmDisabled })
+        );
       }),
       HStack({ alignment: "trailing", gap: "regular", class: "w-full" }, [
         Show(showExtra, () => Button({
@@ -156,7 +187,7 @@ export default function Dialog() {
         }, [
           confirmationText,
           kbd({ class: "text-white text-sm whitespace-nowrap" }, [
-            Icon({ name: "return-arrow", fill: "white", size: "xs" }),
+            Icon({ name: "return-arrow", fill: "white", size: "xsmall" }),
             "Enter"
           ])
         ]))

package/src/components/DropdownMenu.mjs

@@ -1,4 +1,6 @@
 import Bunnix, { useRef, useState, useMemo } from "@bunnix/core";
+import { clampSize, toSizeToken } from "../utils/sizeUtils.mjs";
+import { resolveIconClass } from "../utils/iconUtils.mjs";
 const { div, button, hr, span } = Bunnix;
 
 let dropdownCounter = 0;
@@ -12,13 +14,10 @@ export default function DropdownMenu({
   onSelect,
   class: className = ""
 }) {
-  const normalizeSize = (value) => {
-    if (!value || value === "default" || value === "regular" || value === "md") return "md";
-    if (value === "sm") return "sm";
-    if (value === "lg" || value === "xl") return value;
-    return value;
-  };
+  // DropdownMenu supports all sizes
+  const normalizeSize = (value) => clampSize(value, ["xsmall", "small", "regular", "large", "xlarge"], "regular");
   const normalizedSize = normalizeSize(size);
+  const sizeToken = toSizeToken(normalizedSize);
   const popoverRef = useRef(null);
   const dropdownId = id || `dropdown-instance-${++dropdownCounter}`;
   const anchorName = `--${dropdownId}`;
@@ -48,13 +47,13 @@ export default function DropdownMenu({
     }
   };
 
-  const sizeClass = normalizedSize === "lg" ? "dropdown-lg" : normalizedSize === "xl" ? "dropdown-xl" : "";
-  const itemSizeClass = normalizedSize === "lg" ? "btn-lg" : normalizedSize === "xl" ? "btn-xl" : "";
-  const iconSizeClass = normalizedSize === "sm"
+  const sizeClass = sizeToken === "lg" ? "dropdown-lg" : sizeToken === "xl" ? "dropdown-xl" : "";
+  const itemSizeClass = sizeToken === "lg" ? "btn-lg" : sizeToken === "xl" ? "btn-xl" : "";
+  const iconSizeClass = sizeToken === "sm"
     ? "icon-sm"
-    : normalizedSize === "lg"
+    : sizeToken === "lg"
       ? "icon-lg"
-      : normalizedSize === "xl"
+      : sizeToken === "xl"
         ? "icon-xl"
         : "";
 
@@ -68,9 +67,10 @@ export default function DropdownMenu({
       // Reactive Icon: stable element, reactive class
       span({ 
         class: selectedItem.map(s => {
-          if (!s?.icon) return "hidden";
+          const resolvedIcon = resolveIconClass(s?.icon);
+          if (!resolvedIcon) return "hidden";
           const tint = s.destructive ? "bg-destructive" : "bg-primary";
-          return `icon ${iconSizeClass} ${s.icon} ${tint}`.trim();
+          return `icon ${iconSizeClass} ${resolvedIcon} ${tint}`.trim();
         })
       }),
       // Reactive Title: text with dimmed style when empty
@@ -97,8 +97,10 @@ export default function DropdownMenu({
           }, [
             span({
               class: isCurrent.map(active => {
+                const resolvedIcon = resolveIconClass(item.icon);
+                if (!resolvedIcon) return "hidden";
                 const tint = active ? "bg-white" : item.destructive ? "bg-destructive" : "bg-primary";
-                return `icon ${iconSizeClass} ${item.icon} ${tint}`.trim();
+                return `icon ${iconSizeClass} ${resolvedIcon} ${tint}`.trim();
               })
             }),
             item.title

package/src/components/HStack.mjs

@@ -1,7 +1,7 @@
 import Bunnix from "@bunnix/core";
 const { div } = Bunnix;
 
-export default function HStack(props = {}, children) {
+export default function HStack(props = {}, ...children) {
   if (props === null || props === undefined || Array.isArray(props) || typeof props !== "object") {
     children = props;
     props = {};
@@ -9,6 +9,7 @@ export default function HStack(props = {}, children) {
 
   const {
     alignment = "leading",
+    verticalAlignment = "center",
     gap = "regular",
     class: className = "",
     ...rest
@@ -19,16 +20,23 @@ export default function HStack(props = {}, children) {
     trailing: "justify-end"
   };
 
+  const verticalAlignmentMap = {
+    top: "items-start",
+    center: "items-center",
+    bottom: "items-end"
+  };
+
   const gapMap = {
+    xsmall: "gap-xs",
     small: "gap-sm",
     regular: "gap-md",
     large: "gap-lg"
   };
 
-  const combinedClass = `row-container ${alignmentMap[alignment]} ${gapMap[gap]} ${className}`.trim();
+  const combinedClass = `row-container ${alignmentMap[alignment]} ${verticalAlignmentMap[verticalAlignment]} ${gapMap[gap]} ${className}`.trim();
 
   return div({
     class: combinedClass,
     ...rest
-  }, children);
+  }, ...children);
 }

package/src/components/Icon.mjs

@@ -1,9 +1,10 @@
 import Bunnix from "@bunnix/core";
+import { normalizeSize, toSizeToken } from "../utils/sizeUtils.mjs";
 const { span } = Bunnix;
 
 export default function Icon({
   name,
-  fill = "base",
+  fill = "default",
   size,
   class: className = "",
   ...rest
@@ -16,12 +17,15 @@ export default function Icon({
   // fill mapping: "base" -> "icon-base", "white" -> "icon-white", etc.
   const fillClass = fill.startsWith("icon-") ? fill : `icon-${fill}`;
   
-  const normalizeSize = (value) => {
-    if (!value || value === "default" || value === "regular" || value === "md") return "";
+  const normalizeSizeClass = (value) => {
+    if (!value) return "";
     if (typeof value === "string" && value.startsWith("icon-")) return value;
-    return `icon-${value}`;
+    const normalized = normalizeSize(value);
+    if (normalized === "regular") return "";
+    const sizeToken = toSizeToken(normalized);
+    return sizeToken ? `icon-${sizeToken}` : "";
   };
-  const sizeClass = normalizeSize(size);
+  const sizeClass = normalizeSizeClass(size);
   
   const combinedClass = `icon ${iconName} ${fillClass} ${sizeClass} ${className}`.trim();
 

package/src/components/InputField.mjs

@@ -1,10 +1,12 @@
 import Bunnix, { useRef, useEffect } from "@bunnix/core";
+import { clampSize, toSizeToken } from "../utils/sizeUtils.mjs";
 const { div, label, input: inputEl, datalist, option, span } = Bunnix;
 
 export default function InputField({
   class: className = "",
   type = "text",
   variant = "regular",
+  size,
   value,
   placeholder,
   label: labelText,
@@ -25,6 +27,12 @@ export default function InputField({
   const inputRef = useRef(null);
   const listId = suggestions.length > 0 ? `list-${Math.random().toString(36).slice(2, 8)}` : null;
 
+  // InputField supports regular, large, xlarge (no xsmall, small)
+  const normalizeSize = (value) => clampSize(value, ["regular", "large", "xlarge"], "regular");
+  const normalizedSize = normalizeSize(size);
+  const sizeToken = toSizeToken(normalizedSize);
+  const sizeClass = sizeToken === "xl" ? "input-xl" : sizeToken === "lg" ? "input-lg" : "";
+
   useEffect((el) => {
     if (el && listId) {
       el.setAttribute('list', listId);
@@ -32,7 +40,7 @@ export default function InputField({
   }, inputRef);
 
   const variantClass = variant === "rounded" ? "rounded-full" : "";
-  const combinedClass = `${className} ${variantClass}`.trim();
+  const combinedClass = `${className} ${sizeClass} ${variantClass}`.trim();
 
   const handleInput = onInput ?? input;
   const handleChange = onChange ?? change;
@@ -55,15 +63,15 @@ export default function InputField({
     ...rest
   });
 
-  const sizeClass = className.includes("input-xl")
+  const iconSizeClass = sizeToken === "xl"
     ? "icon-xl"
-    : className.includes("input-lg")
+    : sizeToken === "lg"
       ? "icon-lg"
       : "";
 
   const inputBlock = type === "search"
     ? div({ class: "input-search w-full" }, [
-        span({ class: `icon icon-search icon-quaternary ${sizeClass}`.trim() }),
+        span({ class: `icon icon-search icon-quaternary ${iconSizeClass}`.trim() }),
         inputElement
       ])
     : inputElement;

package/src/components/NavigationBar.mjs

@@ -3,7 +3,20 @@ import SearchBox from "./SearchBox.mjs";
 
 const { nav, div, h2 } = Bunnix;
 
-const renderNode = (node) => (typeof node === "function" ? node() : node);
+const resolveNode = (node) => {
+  if (node && typeof node.map === "function") {
+    return node.map((value) => resolveNode(value));
+  }
+  if (node && typeof node.get === "function") {
+    return resolveNode(node.get());
+  }
+  return typeof node === "function" ? node() : node;
+};
+
+const isState = (value) =>
+  value &&
+  typeof value.get === "function" &&
+  typeof value.subscribe === "function";
 
 export default function NavigationBar({
   title,
@@ -18,30 +31,47 @@ export default function NavigationBar({
   class: className = "",
   ...rest
 } = {}) {
-  const titleNode = typeof title === "string"
-    ? h2({ class: "whitespace-nowrap" }, title)
-    : renderNode(title);
+  const titleContent = isState(title)
+    ? title.map((value) => {
+        if (value === null || value === undefined) return "";
+        return typeof value === "string" || typeof value === "number"
+          ? String(value)
+          : value;
+      })
+    : title === null || title === undefined
+      ? ""
+      : typeof title === "string" || typeof title === "number"
+        ? String(title)
+        : title;
 
-  const leadingNode = renderNode(leading);
-  const trailingNode = renderNode(trailing);
+  const titleNode = h2({ class: "whitespace-nowrap" }, titleContent);
+  const leadingNode = resolveNode(leading);
+  const trailingNode = resolveNode(trailing);
 
-  return nav({
-    class: `navigation-bar row-container items-center gap-md w-full sticky-top bg-base ${className}`.trim(),
-    ...rest
-  }, [
-    titleNode,
-    leadingNode && div({ class: "shrink-0" }, leadingNode),
-    div({ class: "w-full" }),
-    trailingNode && div({ class: "shrink-0" }, trailingNode),
-    searchable && SearchBox({
-      data: searchData,
-      value: searchValue,
-      onInput: onSearchInput,
-      onSelect: onSearchSelect,
-      placeholder: "Search components",
-      variant: "rounded",
-      class: "w-300",
-      ...searchProps
-    })
-  ]);
+  return nav(
+    {
+      class:
+        `navigation-bar row-container items-center gap-md w-full sticky-top bg-base ${className}`.trim(),
+      ...rest,
+    },
+    [
+      title ? titleNode : null,
+      leadingNode &&
+        div({ class: "shrink-0 row-container items-center" }, leadingNode),
+      div({ class: "w-full" }),
+      trailingNode &&
+        div({ class: "shrink-0 row-container items-center" }, trailingNode),
+      searchable &&
+        SearchBox({
+          data: searchData,
+          value: searchValue,
+          onInput: onSearchInput,
+          onSelect: onSearchSelect,
+          placeholder: "Search components",
+          variant: "rounded",
+          class: "w-300",
+          ...searchProps,
+        }),
+    ],
+  );
 }

package/src/components/PageHeader.mjs

@@ -1,13 +1,16 @@
 import Bunnix from "@bunnix/core";
-const { div, h1, p } = Bunnix;
+const { div, h2, p } = Bunnix;
+
+export default function PageHeader({ title, description, trailing } = {}) {
+  const trailingContent = typeof trailing === "function" ? trailing() : trailing;
 
-export default function PageHeader({ title, description } = {}) {
   return div({
-    class: "row-container no-margin"
+    class: "row-container items-center gap-md no-margin"
   }, [
-    div({ class: "column-container gap-xs flex-1" }, [
-      h1({ class: "no-margin" }, title),
-      p({ class: "text-secondary no-margin" }, description)
-    ])
-  ]);
+    div({ class: "column-container gap-xs flex-1 w-full" }, [
+      h2({ class: "no-margin" }, title),
+      description ? p({ class: "text-secondary no-margin" }, description) : null
+    ]),
+    trailingContent ? div({ class: "shrink-0" }, trailingContent) : null
+  ].filter(Boolean));
 }

package/src/components/PageSection.mjs

@@ -1,20 +1,30 @@
 import Bunnix from "@bunnix/core";
 const { div, h5 } = Bunnix;
 
-export default function PageSection({ title, stickyOffset = 0, gap = "regular" } = {}, children) {
+export default function PageSection(
+  { title, stickyOffset = 0, gap = "regular", trailing } = {},
+  children,
+) {
   const gapMap = {
     small: "gap-sm",
     regular: "gap-md",
-    large: "gap-lg"
+    large: "gap-lg",
   };
 
-  return div({ class: "column-container no-margin" }, [
-    div({
-      class: "pt-sm pb-sm",
-      style: ` --sticky-offset: ${stickyOffset}`
-    }, [
-      h5({ class: "no-margin select-none" }, title)
-    ]),
-    div({ class: `column-container py-xs ${gapMap[gap]}`.trim() }, children)
+  const trailingContent =
+    typeof trailing === "function" ? trailing() : trailing;
+
+  return div({ class: "column-container no-margin w-full" }, [
+    div(
+      {
+        class: "row-container items-center gap-md pt-sm pb-sm",
+        style: ` --sticky-offset: ${stickyOffset}`,
+      },
+      [
+        h5({ class: "no-margin select-none flex-1 w-full" }, title),
+        trailingContent ? div({ class: "shrink-0" }, trailingContent) : null,
+      ].filter(Boolean),
+    ),
+    div({ class: `column-container py-xs ${gapMap[gap]}`.trim() }, children),
   ]);
 }

package/src/components/PopoverMenu.mjs

@@ -1,24 +1,26 @@
 import Bunnix, { useRef } from "@bunnix/core";
+import { resolveIconClass } from "../utils/iconUtils.mjs";
+import { clampSize, toSizeToken } from "../utils/sizeUtils.mjs";
 const { div, button, hr, span } = Bunnix;
 
 let menuCounter = 0;
 
-export default function PopoverMenu({
-  trigger,
-  items = [],
-  id,
-  align = "left",
-  size,
-  onSelect,
-  class: className = ""
-}) {
-  const normalizeSize = (value) => {
-    if (!value || value === "default" || value === "regular" || value === "md") return "md";
-    if (value === "sm") return "sm";
-    if (value === "lg" || value === "xl") return value;
-    return value;
-  };
+export default function PopoverMenu(
+  {
+    trigger,
+    menuItems = [],
+    id,
+    align = "left",
+    size,
+    onSelect,
+    class: className = "",
+  } = {},
+  children,
+) {
+  const normalizeSize = (value) =>
+    clampSize(value, ["xsmall", "small", "regular", "large", "xlarge"], "regular");
   const normalizedSize = normalizeSize(size);
+  const sizeToken = toSizeToken(normalizedSize);
   const popoverRef = useRef(null);
 
   const menuId = id || `menu-instance-${++menuCounter}`;
@@ -44,44 +46,86 @@ export default function PopoverMenu({
     }
   };
 
-  const sizeClass = normalizedSize === "lg" ? "btn-lg" : normalizedSize === "xl" ? "btn-xl" : "";
-  const iconSizeClass = normalizedSize === "sm"
-    ? "icon-sm"
-    : normalizedSize === "lg"
-      ? "icon-lg"
-      : normalizedSize === "xl"
-        ? "icon-xl"
+  const sizeClass =
+    sizeToken === "lg"
+      ? "btn-lg"
+      : sizeToken === "xl"
+        ? "btn-xl"
         : "";
+  const iconSizeClass =
+    sizeToken === "sm"
+      ? "icon-sm"
+      : sizeToken === "lg"
+        ? "icon-lg"
+        : sizeToken === "xl"
+          ? "icon-xl"
+          : "";
+
+  const triggerProps = {
+    id: menuId,
+    type: 'button',
+    style: `anchor-name: ${anchorName}`,
+    class: `btn btn-flat ${sizeClass} ${className}`.trim(),
+    click: handleToggle,
+  };
+
+  // Determine what to use as trigger:
+  // 1. If children are provided, use children as trigger content
+  // 2. Otherwise use trigger prop
+  const hasTriggerContent =
+    children !== undefined &&
+    children !== null &&
+    (Array.isArray(children) ? children.length > 0 : true);
+
+  const resolvedTrigger = hasTriggerContent ? children : trigger;
+
+  // If trigger is a function, call it to get the content, then wrap in button
+  // Otherwise use the trigger/children directly as content
+  const triggerContent =
+    typeof resolvedTrigger === "function" ? resolvedTrigger() : resolvedTrigger;
+
+  const triggerElement = button(triggerProps, triggerContent);
 
   return div({ class: "menu-wrapper" }, [
-    button({
-      id: menuId,
-      style: `anchor-name: ${anchorName}`,
-      class: `btn btn-flat ${sizeClass} ${className}`.trim(),
-      click: handleToggle
-    }, trigger),
+    triggerElement,
 
-    div({
-      ref: popoverRef,
-      popover: "auto",
-      class: `menu-popover popover-base menu-anchor-${align}`, 
-      style: `--anchor-id: ${anchorName}`
-    }, [
-      /* All design system styles go here to avoid overriding popover visibility */
-      div({ class: "card column-container shadow gap-sm w-min-150 p-sm bg-base" },
-        items.map((item) => {
-          if (item.isSeparator) {
-            return hr({ class: "no-margin" });
-          }
-          return button({
-            class: `btn btn-flat justify-start w-full ${sizeClass}`.trim(),
-            click: () => handleItemClick(item)
-          }, [
-            item.icon ? span({ class: `icon ${iconSizeClass} ${item.icon} ${item.destructive ? 'bg-destructive' : 'bg-primary'}`.trim() }) : null,
-            item.title
-          ]);
-        })
-      )
-    ])
+    div(
+      {
+        ref: popoverRef,
+        popover: "auto",
+        class: `menu-popover popover-base menu-anchor-${align}`,
+        style: `--anchor-id: ${anchorName}`,
+      },
+      [
+        /* All design system styles go here to avoid overriding popover visibility */
+        div(
+          {
+            class: "card column-container shadow gap-sm w-min-150 p-sm bg-base",
+          },
+          menuItems.map((item) => {
+            if (item.isSeparator) {
+              return hr({ class: "no-margin" });
+            }
+            return button(
+              {
+                class: `btn btn-flat justify-start w-full ${sizeClass}`.trim(),
+                click: () => handleItemClick(item),
+              },
+              [
+                item.icon
+                  ? span({
+                      class: (() => {
+                        const resolvedIcon = resolveIconClass(item.icon);
+                        return `icon ${iconSizeClass} ${resolvedIcon} ${item.destructive ? "bg-destructive" : "bg-primary"}`.trim();
+                      })(),
+                    })
+                  : null,
+                item.title,
+              ],
+            );
+          }),
+        ),
+      ],
+    ),
   ]);
 }