@bunnix/components 0.9.0 → 0.9.2

package/src/components/RadioCheckbox.mjs

@@ -1,4 +1,5 @@
 import Bunnix from "@bunnix/core";
+import { clampSize, toSizeToken } from "../utils/sizeUtils.mjs";
 const { label, input, span } = Bunnix;
 
 export default function RadioCheckbox({
@@ -10,14 +11,11 @@ export default function RadioCheckbox({
   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;
-  };
+  // RadioCheckbox supports all sizes
+  const normalizeSize = (value) => clampSize(value, ["xsmall", "small", "regular", "large", "xlarge"], "regular");
   const normalizedSize = normalizeSize(size);
-  const sizeClass = normalizedSize === "lg" ? "checkbox-lg" : normalizedSize === "xl" ? "checkbox-xl" : "";
+  const sizeToken = toSizeToken(normalizedSize);
+  const sizeClass = sizeToken === "xl" ? "checkbox-xl" : sizeToken === "lg" ? "checkbox-lg" : "";
   const nativeChange = onChange ?? inputProps.change;
   const checkHandler = onCheck ?? check;
 

package/src/components/SearchBox.mjs

@@ -1,14 +1,8 @@
 import Bunnix, { ForEach, useEffect, useMemo, useRef, useState } from "@bunnix/core";
+import { clampSize, toSizeToken } from "../utils/sizeUtils.mjs";
 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({
@@ -24,14 +18,11 @@ export default function SearchBox({
   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;
-  };
+  // SearchBox supports all sizes
+  const normalizeSize = (value) => clampSize(value, ["xsmall", "small", "regular", "large", "xlarge"], "regular");
   const normalizedSize = normalizeSize(size);
-  const sizeClass = sizeClassMap[normalizedSize] || "";
+  const sizeToken = toSizeToken(normalizedSize);
+  const sizeClass = sizeToken === "xl" ? "input-xl" : sizeToken === "lg" ? "input-lg" : "";
   const variantClass = variant === "rounded" ? "rounded-full" : "";
   const combinedClass = `${sizeClass} ${variantClass} ${className}`.trim();
 
@@ -122,13 +113,13 @@ export default function SearchBox({
     }
   };
 
-  const itemSizeClass = normalizedSize === "lg" ? "btn-lg" : normalizedSize === "xl" ? "btn-xl" : "";
-  const iconSizeValue = normalizedSize === "sm"
-    ? "sm"
-    : normalizedSize === "lg"
-      ? "lg"
-      : normalizedSize === "xl"
-        ? "xl"
+  const itemSizeClass = sizeToken === "lg" ? "btn-lg" : sizeToken === "xl" ? "btn-xl" : "";
+  const iconSizeValue = normalizedSize === "small"
+    ? "small"
+    : normalizedSize === "large"
+      ? "large"
+      : normalizedSize === "xlarge"
+        ? "xlarge"
         : undefined;
   const hasResults = indexedData.map((list) => (list || []).length > 0);
 

package/src/components/Sidebar.mjs

@@ -1,21 +1,37 @@
 import Bunnix, { useMemo, useState, ForEach, Show } from "@bunnix/core";
 import SearchBox from "./SearchBox.mjs";
 import Badge from "./Badge.mjs";
+import { resolveIconClass } from "../utils/iconUtils.mjs";
 const { div, a, span, h4, h6, hr } = Bunnix;
 
 export default function Sidebar({
-  items = [],
+  items,
   selection,
-  onSelect,
   onItemSelect,
   searchable = false,
-  searchProps = {}
+  searchProps = {},
+  leading,
+  trailing,
+  class: className = "",
 } = {}) {
-  const selected = useState(selection ?? 'home');
+  const selectionState =
+    selection &&
+    typeof selection.map === "function" &&
+    typeof selection.get === "function" &&
+    typeof selection.set === "function"
+      ? selection
+      : null;
+  const selected = selectionState ?? useState(selection ?? "home");
   const searchValue = useState("");
 
+  const resolveItems = (value) => {
+    const resolved =
+      value && typeof value.get === "function" ? value.get() : value;
+    return Array.isArray(resolved) ? resolved : [];
+  };
+
   // Initialize expanded state from items' isExpanded property
-  const initialExpanded = items.reduce((acc, item) => {
+  const initialExpanded = resolveItems(items).reduce((acc, item) => {
     if (item.children && item.isExpanded) {
       acc[item.id] = true;
     }
@@ -32,7 +48,6 @@ export default function Sidebar({
         window.location.hash = target;
       }
     }
-    if (onSelect) onSelect(id);
     if (onItemSelect) onItemSelect(id);
   };
 
@@ -48,16 +63,22 @@ export default function Sidebar({
     }
 
     if (item.isHeader) {
-      return div({ class: "row-container px-base py-md select-none sticky-top" },
-        h6({ class: "no-margin text-tertiary font-bold" }, item.label)
+      return div(
+        { class: "row-container px-base py-sm pt-md select-none sticky-top" },
+        span(
+          {
+            class:
+              "no-margin text-tertiary text-sm bold text-uppercase no-selectable",
+          },
+          item.label,
+        ),
       );
     }
 
     const hasChildren = item.children && item.children.length > 0;
-    const isSelected = selected.map(v => v === item.id);
-    const isExpanded = useMemo(
-      [expanded, searchValue],
-      (ex, query) => (String(query ?? "").trim() ? true : !!ex[item.id])
+    const isSelected = selected.map((v) => v === item.id);
+    const isExpanded = useMemo([expanded, searchValue], (ex, query) =>
+      String(query ?? "").trim() ? true : !!ex[item.id],
     );
 
     const handleItemClick = (e) => {
@@ -69,53 +90,95 @@ export default function Sidebar({
     };
 
     return div({ class: "column-container" }, [
-      div({ class: `box-sm ${isChild ? "pl-md" : ""}` },
-        div({
-            class: isSelected.map(s => `box-control hoverable ${s ? 'selected' : ''}`),
-            click: handleItemClick
-          }, [
-          div({ class: "row-container items-center gap-sm no-margin w-full" }, [
-            span({ class: isSelected.map(s => `icon ${item.icon} ${s ? 'bg-white' : 'icon-base'}`) }),
-            h4({ class: "no-margin text-base font-inherit" }, item.label),
-            (item.badge || hasChildren) ? div({ class: "spacer-h" }) : null,
-            (() => {
-              if (!item.badge) return null;
-              if (typeof item.badge === "string" || typeof item.badge === "number") {
-                return Badge({ tone: "accent", size: "xs", shape: "capsule" }, String(item.badge));
-              }
-              const value = item.badge.value;
-              if (value === undefined || value === null || value === "") return null;
-              return Badge({
-                tone: item.badge.tone || "accent",
-                variant: item.badge.variant || "solid",
-                size: item.badge.size || "xs",
-                shape: "capsule"
-              }, String(value));
-            })(),
-            hasChildren && span({
-              class: isExpanded.map(ex => `icon icon-chevron-down ml-auto transition-transform ${ex ? 'rotate-180' : 'icon-base'}`)
-            })
-          ])
-        ])
+      div(
+        { class: `box-sm no-selectable ${isChild ? "pl-md" : ""}` },
+        div(
+          {
+            class: isSelected.map(
+              (s) => `box-control hoverable ${s ? "selected" : ""}`,
+            ),
+            click: handleItemClick,
+          },
+          [
+            div(
+              { class: "row-container items-center gap-sm no-margin w-full" },
+              [
+                item.icon
+                  ? (() => {
+                      const resolvedIconClass = resolveIconClass(item.icon);
+                      return span({
+                        class: isSelected.map(
+                          (s) =>
+                            `icon ${resolvedIconClass} ${s ? "bg-white" : "icon-base"}`,
+                        ),
+                      });
+                    })()
+                  : null,
+                h4({ class: "no-margin text-base font-inherit" }, item.label),
+                item.badge || hasChildren ? div({ class: "spacer-h" }) : null,
+                (() => {
+                  if (!item.badge) return null;
+                  if (
+                    typeof item.badge === "string" ||
+                    typeof item.badge === "number"
+                  ) {
+                    return Badge(
+                      { tone: "accent", size: "xsmall", shape: "capsule" },
+                      String(item.badge),
+                    );
+                  }
+                  const value = item.badge.value;
+                  if (value === undefined || value === null || value === "")
+                    return null;
+                  return Badge(
+                    {
+                      tone: item.badge.tone || "accent",
+                      variant: item.badge.variant || "solid",
+                      size: item.badge.size || "xsmall",
+                      shape: "capsule",
+                    },
+                    String(value),
+                  );
+                })(),
+                hasChildren &&
+                  span({
+                    class: isExpanded.map(
+                      (ex) =>
+                        `icon icon-chevron-down icon-base ml-auto transition-transform ${ex ? "rotate-180" : ""}`,
+                    ),
+                  }),
+              ],
+            ),
+          ],
+        ),
       ),
-      hasChildren && Show(isExpanded, div({ class: "column-container py-xs" },
-        item.children.map(child => renderItem(child, true))
-      ))
+      hasChildren &&
+        Show(
+          isExpanded,
+          div(
+            { class: "column-container py-xs" },
+            item.children.map((child) => renderItem(child, true)),
+          ),
+        ),
     ]);
   };
 
   const filterSidebarItems = (rawItems, query) => {
-    if (!query) return rawItems;
+    const list = Array.isArray(rawItems) ? rawItems : [];
+    if (!query) return list;
     const normalized = query.trim().toLowerCase();
-    if (!normalized) return rawItems;
+    if (!normalized) return list;
 
     const filterItem = (item) => {
       if (item.isHeader || item.isSeparator) return item;
       const label = (item.label ?? "").toLowerCase();
       const hasChildren = item.children && item.children.length > 0;
       if (hasChildren) {
-        const filteredChildren = item.children.map(child => filterItem(child)).filter(Boolean);
-        const matched = label.includes(normalized) || filteredChildren.length > 0;
+        const filteredChildren = item.children
+          .map((child) => filterItem(child))
+          .filter(Boolean);
+        const matched =
+          label.includes(normalized) || filteredChildren.length > 0;
         if (!matched) return null;
         return { ...item, children: filteredChildren };
       }
@@ -137,7 +200,7 @@ export default function Sidebar({
       currentGroup = [];
     };
 
-    for (const item of rawItems) {
+    for (const item of list) {
       if (item.isHeader) {
         flush();
         currentHeader = item;
@@ -158,30 +221,42 @@ export default function Sidebar({
     return result;
   };
 
-  const filteredItems = useMemo(
-    [items, searchValue],
-    (list, query) => filterSidebarItems(list, (query ?? "").trim())
-  );
+  const filteredItems = useMemo([items, searchValue], (list, query) => {
+    return filterSidebarItems(resolveItems(list), (query ?? "").trim());
+  });
+
+  const leadingContent = typeof leading === "function" ? leading() : leading;
+  const trailingContent =
+    typeof trailing === "function" ? trailing() : trailing;
 
   const content = [];
   if (searchable) {
-    content.push(div({ class: "px-base py-xs" },
-      SearchBox({
-        placeholder: "Search",
-        variant: "rounded",
-        class: "w-full",
-        value: searchValue.get(),
-        onInput: (event) => {
-          const value = event?.target?.value ?? "";
-          searchValue.set(value);
-        },
-        ...searchProps
-      })
-    ));
+    content.push(
+      div(
+        { class: "px-base py-xs" },
+        SearchBox({
+          placeholder: "Search",
+          variant: "rounded",
+          class: "w-full",
+          value: searchValue.get(),
+          onInput: (event) => {
+            const value = event?.target?.value ?? "";
+            searchValue.set(value);
+          },
+          ...searchProps,
+        }),
+      ),
+    );
+  }
+  if (leadingContent) {
+    content.push(div({ class: "px-base py-xs" }, leadingContent));
   }
   content.push(ForEach(filteredItems, "id", (item) => renderItem(item)));
+  if (trailingContent) {
+    content.push(div({ class: "px-base py-xs" }, trailingContent));
+  }
 
-  return div({ class: "sidebar" }, [
-    div({ class: "column-container py-xs" }, content),
+  return div({ class: `sidebar ${className}` }, [
+    div({ class: "column-container py-xs w-full h-full" }, content),
   ]);
 }

package/src/components/Table.mjs

@@ -51,7 +51,9 @@ const compareValues = (aValue, bValue, sortType) => {
     return aDate - bDate;
   }
 
-  return String(aValue).localeCompare(String(bValue), undefined, { sensitivity: "base" });
+  return String(aValue).localeCompare(String(bValue), undefined, {
+    sensitivity: "base",
+  });
 };
 
 export default function Table({
@@ -66,47 +68,59 @@ export default function Table({
   sort,
   variant = "regular",
   interactive = false,
-  class: className = ""
+  hideHeaders = false,
+  class: className = "",
 } = {}) {
   const renderer = renderCell || cell;
   const searchField = searchable?.field;
   const searchText = searchable?.searchText;
-  const searchTextState = searchText && typeof searchText.map === "function" ? searchText : null;
+  const searchTextState =
+    searchText && typeof searchText.map === "function" ? searchText : null;
   const sortableConfig = Array.isArray(sortable) ? sortable : [];
   const initialSort = sortableConfig.find((entry) => entry.sorted);
   const sortState = useState(
     initialSort
       ? {
           field: initialSort.field,
-          direction: initialSort.direction === "desc" ? "desc" : "asc"
+          direction: initialSort.direction === "desc" ? "desc" : "asc",
         }
-      : null
+      : null,
   );
   const selectionEnabled = typeof selection === "function";
   const selectedKeys = useState([]);
 
-  const variantClass = variant === "background"
-    ? "table-bg"
-    : variant === "bordered"
-      ? "table-bordered"
-      : "";
-  const interactiveClass = interactive ? "table-hover-rows table-interactive" : "";
+  const variantClass =
+    variant === "background"
+      ? "table-bg"
+      : variant === "bordered"
+        ? "table-bordered"
+        : "";
+  const interactiveClass = interactive
+    ? "table-hover-rows table-interactive"
+    : "";
 
   const filterRows = (rows, textValue) => {
     if (!searchField || textValue == null || textValue === "") return rows;
     const needle = String(textValue).toLowerCase();
     return (rows || []).filter((row) => {
       const value = row && typeof row === "object" ? row[searchField] : "";
-      return String(value ?? "").toLowerCase().includes(needle);
+      return String(value ?? "")
+        .toLowerCase()
+        .includes(needle);
     });
   };
 
-  const resolvedSearchText = searchTextState ? searchTextState.get() : searchText;
-  const isDataState = data && typeof data.get === "function" && typeof data.map === "function";
+  const resolvedSearchText = searchTextState
+    ? searchTextState.get()
+    : searchText;
+  const isDataState =
+    data && typeof data.get === "function" && typeof data.map === "function";
 
   const applySort = (rows, sortValue) => {
     if (!sortValue || !sortValue.field) return rows;
-    const sortableEntry = sortableConfig.find((entry) => entry.field === sortValue.field);
+    const sortableEntry = sortableConfig.find(
+      (entry) => entry.field === sortValue.field,
+    );
     if (!sortableEntry) return rows;
 
     const direction = sortValue.direction === "desc" ? -1 : 1;
@@ -127,22 +141,28 @@ export default function Table({
 
   const buildRows = (rows, textValue, sortValue) =>
     applySort(filterRows(rows, textValue), sortValue).map((row, index) => ({
-      __key: (keyField && row && row[keyField] != null) ? row[keyField] : fallbackKey(row, index),
-      __row: row
+      __key:
+        keyField && row && row[keyField] != null
+          ? row[keyField]
+          : fallbackKey(row, index),
+      __row: row,
     }));
 
   const normalizedRows = useMemo(
     [data, searchTextState ?? searchText, sortState],
-    (rows, textValue, sortValue) => buildRows(rows, textValue, sortValue)
+    (rows, textValue, sortValue) => buildRows(rows, textValue, sortValue),
   );
 
-  const visibleKeysState = normalizedRows && typeof normalizedRows.map === "function"
-    ? normalizedRows.map((rows) => (rows || []).map((row) => row.__key))
-    : null;
+  const visibleKeysState =
+    normalizedRows && typeof normalizedRows.map === "function"
+      ? normalizedRows.map((rows) => (rows || []).map((row) => row.__key))
+      : null;
 
   const isAllSelected = visibleKeysState
-    ? useMemo([selectedKeys, visibleKeysState], (keys, visible) =>
-        visible.length > 0 && visible.every((key) => keys.includes(key))
+    ? useMemo(
+        [selectedKeys, visibleKeysState],
+        (keys, visible) =>
+          visible.length > 0 && visible.every((key) => keys.includes(key)),
       )
     : selectedKeys.map((keys) => keys.length > 0);
 
@@ -173,82 +193,111 @@ export default function Table({
     }
     sortState.set({
       field,
-      direction: current.direction === "asc" ? "desc" : "asc"
+      direction: current.direction === "asc" ? "desc" : "asc",
     });
   };
 
-  return table({ class: `table ${variantClass} ${interactiveClass} ${className}`.trim() }, [
-    colgroup(
-      [
-        selectionEnabled ? col({ style: "width: 40px;" }) : null,
-        ...columns.map((column) => col({ style: `width: ${resolveColumnWidth(column.size)};` }))
-      ].filter(Boolean)
-    ),
-    thead([
-      tr(
-        [
-          selectionEnabled ? th({ class: "table-checkbox-cell" }, [
-            Checkbox({
-              class: "table-checkbox",
-              checked: isAllSelected,
-              change: handleToggleAll
-            })
-          ]) : null,
-          ...columns.map((column) => {
-            const sortableEntry = sortableConfig.find((entry) => entry.field === column.field);
-            if (!sortableEntry) {
-              return th(column.label ?? column.field ?? "");
-            }
-            const iconClass = sortState.map((sortValue) => {
-              const isSorted = sortValue && sortValue.field === column.field;
-              const isAsc = isSorted && sortValue.direction === "asc";
-              return `icon icon-chevron-down table-sort-icon ${isSorted ? "icon-base" : "icon-quaternary"} ${isAsc ? "rotate-180" : ""}`.trim();
-            });
-
-            return th({
-              class: sortState.map((sortValue) => {
-                const isSorted = sortValue && sortValue.field === column.field;
-                return `table-sortable hoverable ${isSorted ? "is-sorted" : ""}`.trim();
-              }),
-              click: () => handleSort(column.field)
-            }, [
-              span({ class: "row-container items-center gap-xs w-full" }, [
-                span(column.label ?? column.field ?? ""),
-                span({ class: iconClass.map(cls => `${cls} ml-auto`.trim()) })
-              ])
-            ]);
-          })
-        ].filter(Boolean)
-      )
-    ]),
-    tbody([
-      ForEach(normalizedRows, "__key", (item, rowIndex) => {
-        const row = item.__row;
-        return tr(
+  const header = hideHeaders
+    ? null
+    : thead([
+        tr(
           [
-            selectionEnabled ? td({ class: "table-checkbox-cell" }, [
-              Checkbox({
-                class: "table-checkbox",
-                checked: selectedKeys.map((keys) => keys.includes(item.__key)),
-                change: () => handleToggleRow(item.__key)
-              })
-            ]) : null,
-            ...columns.map((column, columnIndex) => {
-              if (renderer) {
-                const rendered = renderer(columnIndex, column.field, row, column);
-                if (rendered !== undefined && rendered !== null) {
-                  return td(rendered);
-                }
-              }
-              const value = row && typeof row === "object" ? row[column.field] : "";
-              if (value && typeof value.map === "function") {
-                return td(value.map((val) => span(val)));
+            selectionEnabled
+              ? th({ class: "table-checkbox-cell" }, [
+                  Checkbox({
+                    class: "table-checkbox",
+                    checked: isAllSelected,
+                    change: handleToggleAll,
+                  }),
+                ])
+              : null,
+            ...columns.map((column) => {
+              const sortableEntry = sortableConfig.find(
+                (entry) => entry.field === column.field,
+              );
+              if (!sortableEntry) {
+                return th(column.label ?? column.field ?? "");
               }
-              return td(String(value ?? ""));
-            })
-          ].filter(Boolean)
-        );
-      })
-    ])
-  ]);
+              const iconClass = sortState.map((sortValue) => {
+                const isSorted = sortValue && sortValue.field === column.field;
+                const isAsc = isSorted && sortValue.direction === "asc";
+                return `icon icon-chevron-down table-sort-icon ${isSorted ? "icon-base" : "icon-quaternary"} ${isAsc ? "rotate-180" : ""}`.trim();
+              });
+
+              return th(
+                {
+                  class: sortState.map((sortValue) => {
+                    const isSorted =
+                      sortValue && sortValue.field === column.field;
+                    return `table-sortable hoverable ${isSorted ? "is-sorted" : ""}`.trim();
+                  }),
+                  click: () => handleSort(column.field),
+                },
+                [
+                  span({ class: "row-container items-center gap-xs w-full" }, [
+                    span(column.label ?? column.field ?? ""),
+                    span({
+                      class: iconClass.map((cls) => `${cls} ml-auto`.trim()),
+                    }),
+                  ]),
+                ],
+              );
+            }),
+          ].filter(Boolean),
+        ),
+      ]);
+
+  return table(
+    { class: `table ${variantClass} ${interactiveClass} ${className}`.trim() },
+    [
+      colgroup(
+        [
+          selectionEnabled ? col({ style: "width: 40px;" }) : null,
+          ...columns.map((column) =>
+            col({ style: `width: ${resolveColumnWidth(column.size)};` }),
+          ),
+        ].filter(Boolean),
+      ),
+      header,
+      tbody([
+        ForEach(normalizedRows, "__key", (item, rowIndex) => {
+          const row = item.__row;
+          return tr(
+            [
+              selectionEnabled
+                ? td({ class: "table-checkbox-cell" }, [
+                    Checkbox({
+                      class: "table-checkbox",
+                      checked: selectedKeys.map((keys) =>
+                        keys.includes(item.__key),
+                      ),
+                      change: () => handleToggleRow(item.__key),
+                    }),
+                  ])
+                : null,
+              ...columns.map((column, columnIndex) => {
+                if (renderer) {
+                  const rendered = renderer(
+                    columnIndex,
+                    column.field,
+                    row,
+                    column,
+                  );
+                  if (rendered !== undefined && rendered !== null) {
+                    return td(rendered);
+                  }
+                }
+                const value =
+                  row && typeof row === "object" ? row[column.field] : "";
+                if (value && typeof value.map === "function") {
+                  return td(value.map((val) => span(val)));
+                }
+                return td(String(value ?? ""));
+              }),
+            ].filter(Boolean),
+          );
+        }),
+      ]),
+    ],
+  );
 }