@bunnix/components 0.9.0

package/src/components/HStack.mjs

@@ -0,0 +1,34 @@
+import Bunnix from "@bunnix/core";
+const { div } = Bunnix;
+
+export default function HStack(props = {}, children) {
+  if (props === null || props === undefined || Array.isArray(props) || typeof props !== "object") {
+    children = props;
+    props = {};
+  }
+
+  const {
+    alignment = "leading",
+    gap = "regular",
+    class: className = "",
+    ...rest
+  } = props;
+  const alignmentMap = {
+    leading: "justify-start",
+    middle: "justify-center",
+    trailing: "justify-end"
+  };
+
+  const gapMap = {
+    small: "gap-sm",
+    regular: "gap-md",
+    large: "gap-lg"
+  };
+
+  const combinedClass = `row-container ${alignmentMap[alignment]} ${gapMap[gap]} ${className}`.trim();
+
+  return div({
+    class: combinedClass,
+    ...rest
+  }, children);
+}

package/src/components/Icon.mjs

@@ -0,0 +1,32 @@
+import Bunnix from "@bunnix/core";
+const { span } = Bunnix;
+
+export default function Icon({
+  name,
+  fill = "base",
+  size,
+  class: className = "",
+  ...rest
+} = {}) {
+  // name is expected to be just the slug, e.g. "add" or "person"
+  // but we handle "icon-name" too for backward compatibility
+  const safeName = typeof name === "string" ? name : "";
+  const iconName = safeName.startsWith("icon-") ? safeName : `icon-${safeName}`;
+  
+  // 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 "";
+    if (typeof value === "string" && value.startsWith("icon-")) return value;
+    return `icon-${value}`;
+  };
+  const sizeClass = normalizeSize(size);
+  
+  const combinedClass = `icon ${iconName} ${fillClass} ${sizeClass} ${className}`.trim();
+
+  return span({
+    class: combinedClass,
+    ...rest
+  });
+}

package/src/components/InputField.mjs

@@ -0,0 +1,78 @@
+import Bunnix, { useRef, useEffect } from "@bunnix/core";
+const { div, label, input: inputEl, datalist, option, span } = Bunnix;
+
+export default function InputField({
+  class: className = "",
+  type = "text",
+  variant = "regular",
+  value,
+  placeholder,
+  label: labelText,
+  disabled = false,
+  suggestions = [],
+  onInput,
+  onChange,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  input,
+  change,
+  focus,
+  blur,
+  keydown,
+  ...rest
+} = {}) {
+  const inputRef = useRef(null);
+  const listId = suggestions.length > 0 ? `list-${Math.random().toString(36).slice(2, 8)}` : null;
+
+  useEffect((el) => {
+    if (el && listId) {
+      el.setAttribute('list', listId);
+    }
+  }, inputRef);
+
+  const variantClass = variant === "rounded" ? "rounded-full" : "";
+  const combinedClass = `${className} ${variantClass}`.trim();
+
+  const handleInput = onInput ?? input;
+  const handleChange = onChange ?? change;
+  const handleFocus = onFocus ?? focus;
+  const handleBlur = onBlur ?? blur;
+  const handleKeyDown = onKeyDown ?? keydown;
+
+  const inputElement = inputEl({
+    ref: inputRef,
+    type,
+    value: value ?? "",
+    placeholder: placeholder ?? "", // Ensure placeholder is never undefined to avoid "false" text
+    disabled,
+    class: `input ${combinedClass}`.trim(),
+    input: handleInput,
+    change: handleChange,
+    focus: handleFocus,
+    blur: handleBlur,
+    keydown: handleKeyDown,
+    ...rest
+  });
+
+  const sizeClass = className.includes("input-xl")
+    ? "icon-xl"
+    : className.includes("input-lg")
+      ? "icon-lg"
+      : "";
+
+  const inputBlock = type === "search"
+    ? div({ class: "input-search w-full" }, [
+        span({ class: `icon icon-search icon-quaternary ${sizeClass}`.trim() }),
+        inputElement
+      ])
+    : inputElement;
+
+  return div({ class: "column-container no-margin shrink-0" }, [
+    labelText && label({ class: "label select-none" }, labelText),
+    inputBlock,
+    listId && datalist({ id: listId },
+      suggestions.map(s => option({ value: s }))
+    )
+  ]);
+}

package/src/components/NavigationBar.mjs

@@ -0,0 +1,47 @@
+import Bunnix from "@bunnix/core";
+import SearchBox from "./SearchBox.mjs";
+
+const { nav, div, h2 } = Bunnix;
+
+const renderNode = (node) => (typeof node === "function" ? node() : node);
+
+export default function NavigationBar({
+  title,
+  leading,
+  trailing,
+  searchable = false,
+  searchData,
+  searchValue,
+  onSearchInput,
+  onSearchSelect,
+  searchProps = {},
+  class: className = "",
+  ...rest
+} = {}) {
+  const titleNode = typeof title === "string"
+    ? h2({ class: "whitespace-nowrap" }, title)
+    : renderNode(title);
+
+  const leadingNode = renderNode(leading);
+  const trailingNode = renderNode(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
+    })
+  ]);
+}

package/src/components/PageHeader.mjs

@@ -0,0 +1,13 @@
+import Bunnix from "@bunnix/core";
+const { div, h1, p } = Bunnix;
+
+export default function PageHeader({ title, description } = {}) {
+  return div({
+    class: "row-container no-margin"
+  }, [
+    div({ class: "column-container gap-xs flex-1" }, [
+      h1({ class: "no-margin" }, title),
+      p({ class: "text-secondary no-margin" }, description)
+    ])
+  ]);
+}

package/src/components/PageSection.mjs

@@ -0,0 +1,20 @@
+import Bunnix from "@bunnix/core";
+const { div, h5 } = Bunnix;
+
+export default function PageSection({ title, stickyOffset = 0, gap = "regular" } = {}, children) {
+  const gapMap = {
+    small: "gap-sm",
+    regular: "gap-md",
+    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)
+  ]);
+}

package/src/components/PopoverMenu.mjs

@@ -0,0 +1,87 @@
+import Bunnix, { useRef } from "@bunnix/core";
+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;
+  };
+  const normalizedSize = normalizeSize(size);
+  const popoverRef = useRef(null);
+
+  const menuId = id || `menu-instance-${++menuCounter}`;
+  const anchorName = `--${menuId}`;
+
+  const handleToggle = (e) => {
+    const popover = popoverRef.current;
+    if (!popover) return;
+
+    if (popover.matches(":popover-open")) {
+      popover.hidePopover();
+    } else {
+      popover.showPopover();
+    }
+  };
+
+  const handleItemClick = (item) => {
+    if (item?.click) item.click();
+    if (onSelect) onSelect(item);
+    const popover = popoverRef.current;
+    if (popover) {
+      popover.hidePopover();
+    }
+  };
+
+  const sizeClass = normalizedSize === "lg" ? "btn-lg" : normalizedSize === "xl" ? "btn-xl" : "";
+  const iconSizeClass = normalizedSize === "sm"
+    ? "icon-sm"
+    : normalizedSize === "lg"
+      ? "icon-lg"
+      : normalizedSize === "xl"
+        ? "icon-xl"
+        : "";
+
+  return div({ class: "menu-wrapper" }, [
+    button({
+      id: menuId,
+      style: `anchor-name: ${anchorName}`,
+      class: `btn btn-flat ${sizeClass} ${className}`.trim(),
+      click: handleToggle
+    }, trigger),
+
+    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
+          ]);
+        })
+      )
+    ])
+  ]);
+}

package/src/components/RadioCheckbox.mjs

@@ -0,0 +1,36 @@
+import Bunnix from "@bunnix/core";
+const { label, input, span } = Bunnix;
+
+export default function RadioCheckbox({
+  labelText,
+  size,
+  onCheck,
+  check,
+  onChange,
+  class: className = "",
+  ...inputProps
+}) {
+  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;
+  };
+  const normalizedSize = normalizeSize(size);
+  const sizeClass = normalizedSize === "lg" ? "checkbox-lg" : normalizedSize === "xl" ? "checkbox-xl" : "";
+  const nativeChange = onChange ?? inputProps.change;
+  const checkHandler = onCheck ?? check;
+
+  return label({ class: `selection-control ${className}`.trim() }, [
+    input({
+      type: "radio",
+      class: sizeClass,
+      ...inputProps,
+      change: (e) => {
+        if (nativeChange) nativeChange(e);
+        if (checkHandler) checkHandler(e.target.checked);
+      }
+    }),
+    labelText ? span({ class: "text-base" }, labelText) : null
+  ]);
+}

package/src/components/SearchBox.mjs

@@ -0,0 +1,207 @@
+import Bunnix, { ForEach, useEffect, useMemo, useRef, useState } from "@bunnix/core";
+import InputField from "./InputField.mjs";
+import Icon from "./Icon.mjs";
+
+const sizeClassMap = {
+  sm: "",
+  md: "",
+  lg: "input-lg",
+  xl: "input-xl"
+};
+
+const { div, button, span } = Bunnix;
+
+export default function SearchBox({
+  data,
+  value,
+  placeholder = "Search",
+  onInput,
+  input,
+  size,
+  variant = "regular",
+  class: className = "",
+  onSelect,
+  select,
+  ...rest
+} = {}) {
+  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;
+  };
+  const normalizedSize = normalizeSize(size);
+  const sizeClass = sizeClassMap[normalizedSize] || "";
+  const variantClass = variant === "rounded" ? "rounded-full" : "";
+  const combinedClass = `${sizeClass} ${variantClass} ${className}`.trim();
+
+  const handleInputExternal = onInput ?? input;
+  const handleSelectExternal = onSelect ?? select;
+
+  if (!Array.isArray(data)) {
+    return InputField({
+      type: "search",
+      value,
+      placeholder,
+      onInput: handleInputExternal,
+      class: combinedClass,
+      ...rest
+    });
+  }
+
+  const popoverRef = useRef(null);
+  const searchId = `searchbox-${Math.random().toString(36).slice(2, 8)}`;
+  const anchorName = `--${searchId}`;
+  const internalValue = useState("");
+  const activeIndex = useState(-1);
+  const valueState = value && typeof value.map === "function" ? value : null;
+  const currentValue = valueState ? valueState : (value ?? internalValue);
+
+  const filteredData = useMemo([data, currentValue], (list, query) => {
+    const needle = String(query ?? "").trim().toLowerCase();
+    if (!needle) return [];
+    return (Array.isArray(list) ? list : [])
+      .filter((item) => {
+        const title = String(item?.title ?? "").toLowerCase();
+        const snippet = String(item?.snippet ?? "").toLowerCase();
+        return title.includes(needle) || snippet.includes(needle);
+      })
+      .slice(0, 5);
+  });
+
+  const indexedData = useMemo([filteredData], (list) =>
+    (list || []).map((item, index) => ({ ...item, __index: index }))
+  );
+
+  useEffect((text) => {
+    const popover = popoverRef.current;
+    if (!popover) return;
+    const hasText = String(text ?? "").trim().length > 0;
+    const list = indexedData.get();
+    const hasItems = Array.isArray(list) && list.length > 0;
+    if (hasText && hasItems && !popover.matches(":popover-open")) {
+      popover.showPopover();
+    } else if ((!hasText || !hasItems) && popover.matches(":popover-open")) {
+      popover.hidePopover();
+    }
+  }, [currentValue]);
+
+  useEffect((list) => {
+    if (!Array.isArray(list) || list.length === 0) {
+      activeIndex.set(-1);
+      return;
+    }
+    activeIndex.set(0);
+  }, [indexedData]);
+
+  const handleInput = (event) => {
+    const next = event?.target?.value ?? "";
+    if (valueState) {
+      valueState.set(next);
+    } else if (typeof value === "string") {
+      // leave to external control
+    } else {
+      internalValue.set(next);
+    }
+    if (handleInputExternal) handleInputExternal(event);
+  };
+
+  const handleSelect = (item) => {
+    const next = item?.title ?? "";
+    if (valueState) {
+      valueState.set(next);
+    } else if (typeof value === "string") {
+      // leave to external control
+    } else {
+      internalValue.set(next);
+    }
+    if (handleSelectExternal) handleSelectExternal(item);
+    const popover = popoverRef.current;
+    if (popover && popover.matches(":popover-open")) {
+      popover.hidePopover();
+    }
+  };
+
+  const itemSizeClass = normalizedSize === "lg" ? "btn-lg" : normalizedSize === "xl" ? "btn-xl" : "";
+  const iconSizeValue = normalizedSize === "sm"
+    ? "sm"
+    : normalizedSize === "lg"
+      ? "lg"
+      : normalizedSize === "xl"
+        ? "xl"
+        : undefined;
+  const hasResults = indexedData.map((list) => (list || []).length > 0);
+
+  const handleKeyDown = (event) => {
+    if (!event || !Array.isArray(indexedData.get())) return;
+    const list = indexedData.get();
+    if (list.length === 0) return;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      const current = activeIndex.get();
+      const next = current < 0 ? 0 : Math.min(current + 1, list.length - 1);
+      activeIndex.set(next);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      const current = activeIndex.get();
+      const next = current <= 0 ? 0 : current - 1;
+      activeIndex.set(next);
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      const current = activeIndex.get();
+      const item = list[current];
+      if (item) handleSelect(item);
+      return;
+    }
+    if (event.key === "Escape") {
+      const popover = popoverRef.current;
+      if (popover && popover.matches(":popover-open")) {
+        popover.hidePopover();
+      }
+    }
+  };
+
+  return div({ class: "menu-wrapper w-full" }, [
+    div({ class: "w-full" }, [
+      InputField({
+        type: "search",
+        value: currentValue,
+        placeholder,
+        onInput: handleInput,
+        class: combinedClass,
+        keydown: handleKeyDown,
+        style: `anchor-name: ${anchorName}`,
+        ...rest
+      })
+    ]),
+    div({
+      ref: popoverRef,
+      popover: "auto",
+      class: "menu-popover popover-base menu-anchor-left match-anchor",
+      style: `--anchor-id: ${anchorName}`
+    }, [
+      div({ class: "card column-container shadow gap-sm w-full p-sm bg-base" }, [
+        ForEach(indexedData, "key", (item) => (
+          button({
+            class: activeIndex.map((index) =>
+              `btn btn-flat justify-start w-full ${itemSizeClass} ${index === item.__index ? "selected" : ""}`.trim()
+            ),
+            click: () => handleSelect(item)
+          }, [
+            item.icon
+              ? Icon({ name: item.icon, fill: "tertiary", size: iconSizeValue })
+              : null,
+            div({ class: "column-container gap-xs" }, [
+              span({ class: "text-base" }, item.title ?? ""),
+              item.snippet ? span({ class: "text-sm text-secondary" }, item.snippet) : null
+            ])
+          ])
+        ))
+      ])
+    ])
+  ]);
+}