@bunnix/components 0.9.0

package/src/components/Sidebar.mjs

@@ -0,0 +1,187 @@
+import Bunnix, { useMemo, useState, ForEach, Show } from "@bunnix/core";
+import SearchBox from "./SearchBox.mjs";
+import Badge from "./Badge.mjs";
+const { div, a, span, h4, h6, hr } = Bunnix;
+
+export default function Sidebar({
+  items = [],
+  selection,
+  onSelect,
+  onItemSelect,
+  searchable = false,
+  searchProps = {}
+} = {}) {
+  const selected = useState(selection ?? 'home');
+  const searchValue = useState("");
+
+  // Initialize expanded state from items' isExpanded property
+  const initialExpanded = items.reduce((acc, item) => {
+    if (item.children && item.isExpanded) {
+      acc[item.id] = true;
+    }
+    return acc;
+  }, {});
+
+  const expanded = useState(initialExpanded);
+
+  const handleClick = (id, href) => {
+    selected.set(id);
+    if (href !== null) {
+      const target = href ?? `#${id}`;
+      if (target && window?.location) {
+        window.location.hash = target;
+      }
+    }
+    if (onSelect) onSelect(id);
+    if (onItemSelect) onItemSelect(id);
+  };
+
+  const toggleExpand = (id) => {
+    const current = expanded.get();
+    expanded.set({ ...current, [id]: !current[id] });
+  };
+
+  const renderItem = (item, isChild = false) => {
+    const isSearching = (searchValue.get() ?? "").trim() !== "";
+    if (item.isSeparator) {
+      return div({ class: "py-xs px-base" }, hr({ class: "no-margin" }));
+    }
+
+    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)
+      );
+    }
+
+    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 handleItemClick = (e) => {
+      if (hasChildren && !isSearching) {
+        toggleExpand(item.id);
+      } else {
+        handleClick(item.id, item.href);
+      }
+    };
+
+    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'}`)
+            })
+          ])
+        ])
+      ),
+      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 normalized = query.trim().toLowerCase();
+    if (!normalized) return rawItems;
+
+    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;
+        if (!matched) return null;
+        return { ...item, children: filteredChildren };
+      }
+      return label.includes(normalized) ? item : null;
+    };
+
+    const result = [];
+    let currentHeader = null;
+    let currentGroup = [];
+    const flush = () => {
+      if (currentHeader) {
+        if (currentGroup.length > 0) {
+          result.push(currentHeader, ...currentGroup);
+        }
+      } else if (currentGroup.length > 0) {
+        result.push(...currentGroup);
+      }
+      currentHeader = null;
+      currentGroup = [];
+    };
+
+    for (const item of rawItems) {
+      if (item.isHeader) {
+        flush();
+        currentHeader = item;
+        continue;
+      }
+      if (item.isSeparator) {
+        if (currentGroup.length > 0) {
+          currentGroup.push(item);
+        }
+        continue;
+      }
+      const filtered = filterItem(item);
+      if (filtered) {
+        currentGroup.push(filtered);
+      }
+    }
+    flush();
+    return result;
+  };
+
+  const filteredItems = useMemo(
+    [items, searchValue],
+    (list, query) => filterSidebarItems(list, (query ?? "").trim())
+  );
+
+  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(ForEach(filteredItems, "id", (item) => renderItem(item)));
+
+  return div({ class: "sidebar" }, [
+    div({ class: "column-container py-xs" }, content),
+  ]);
+}

package/src/components/Table.mjs

@@ -0,0 +1,254 @@
+import Bunnix, { ForEach, useMemo, useState } from "@bunnix/core";
+import Checkbox from "./Checkbox.mjs";
+const { table, thead, tbody, tr, th, td, colgroup, col, span } = Bunnix;
+
+const normalizeKey = (value) =>
+  String(value ?? "")
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "_")
+    .replace(/^_+|_+$/g, "");
+
+const fallbackKey = (row, index) => {
+  if (row && typeof row === "object") {
+    const values = Object.values(row).map((val) => normalizeKey(val));
+    return `${values.filter(Boolean).join("_")}_${index}`;
+  }
+  return `${normalizeKey(row)}_${index}`;
+};
+
+const resolveColumnWidth = (size) => {
+  if (!size || size === "auto") return "auto";
+  if (typeof size === "number") return `${size}px`;
+  return size;
+};
+
+const stableSort = (rows, compare) =>
+  rows
+    .map((item, index) => ({ item, index }))
+    .sort((a, b) => {
+      const result = compare(a.item, b.item);
+      return result === 0 ? a.index - b.index : result;
+    })
+    .map((entry) => entry.item);
+
+const compareValues = (aValue, bValue, sortType) => {
+  const aEmpty = aValue == null || aValue === "";
+  const bEmpty = bValue == null || bValue === "";
+  if (aEmpty && bEmpty) return 0;
+  if (aEmpty) return 1;
+  if (bEmpty) return -1;
+
+  if (sortType === "number") {
+    const aNum = Number(aValue);
+    const bNum = Number(bValue);
+    return aNum - bNum;
+  }
+
+  if (sortType === "date") {
+    const aDate = new Date(aValue).getTime();
+    const bDate = new Date(bValue).getTime();
+    return aDate - bDate;
+  }
+
+  return String(aValue).localeCompare(String(bValue), undefined, { sensitivity: "base" });
+};
+
+export default function Table({
+  columns = [],
+  data = [],
+  key: keyField,
+  renderCell,
+  cell,
+  searchable,
+  sortable = [],
+  selection,
+  sort,
+  variant = "regular",
+  interactive = 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 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"
+        }
+      : 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 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);
+    });
+  };
+
+  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);
+    if (!sortableEntry) return rows;
+
+    const direction = sortValue.direction === "desc" ? -1 : 1;
+
+    if (sort) {
+      const comparator = sort(sortValue.field);
+      if (typeof comparator === "function") {
+        return stableSort(rows, (a, b) => comparator(a, b) * direction);
+      }
+    }
+
+    return stableSort(rows, (a, b) => {
+      const aValue = a && typeof a === "object" ? a[sortValue.field] : "";
+      const bValue = b && typeof b === "object" ? b[sortValue.field] : "";
+      return compareValues(aValue, bValue, sortableEntry?.sortType) * direction;
+    });
+  };
+
+  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
+    }));
+
+  const normalizedRows = useMemo(
+    [data, searchTextState ?? searchText, sortState],
+    (rows, textValue, sortValue) => buildRows(rows, textValue, sortValue)
+  );
+
+  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))
+      )
+    : selectedKeys.map((keys) => keys.length > 0);
+
+  const handleSelectionChange = (next) => {
+    selectedKeys.set(next);
+    if (selectionEnabled) selection(next);
+  };
+
+  const handleToggleAll = () => {
+    const visibleKeys = visibleKeysState ? visibleKeysState.get() : [];
+    const allSelected = isAllSelected.get();
+    handleSelectionChange(allSelected ? [] : visibleKeys);
+  };
+
+  const handleToggleRow = (rowKey) => {
+    const current = selectedKeys.get();
+    const next = current.includes(rowKey)
+      ? current.filter((key) => key !== rowKey)
+      : [...current, rowKey];
+    handleSelectionChange(next);
+  };
+
+  const handleSort = (field) => {
+    const current = sortState.get();
+    if (!current || current.field !== field) {
+      sortState.set({ field, direction: "asc" });
+      return;
+    }
+    sortState.set({
+      field,
+      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(
+          [
+            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)
+        );
+      })
+    ])
+  ]);
+}

package/src/components/Text.mjs

@@ -0,0 +1,38 @@
+import Bunnix from "@bunnix/core";
+const { span, p, h1, h2, h3, h4 } = Bunnix;
+
+export default function Text({
+  type = "text",
+  color = "primary",
+  design = "regular",
+  class: className = "",
+  ...rest
+} = {}, children) {
+  const tagMap = {
+    text: span,
+    paragraph: p,
+    heading1: h1,
+    heading2: h2,
+    heading3: h3,
+    heading4: h4
+  };
+
+  const tag = tagMap[type] || span;
+  
+  // Color mapping: primary -> text-primary, secondary -> text-secondary, etc.
+  const colorClass = color ? `text-${color}` : "";
+  
+  // Design mapping: mono -> text-mono, regular -> ""
+  const designClass = design === "mono" ? "text-mono" : "";
+  
+  const isState = className && typeof className.map === "function";
+
+  const combinedClass = isState
+    ? className.map((value) => `${colorClass} ${designClass} ${value}`.trim())
+    : `${colorClass} ${designClass} ${className}`.trim();
+
+  return tag({
+    class: combinedClass,
+    ...rest
+  }, children);
+}

package/src/components/TimePicker.mjs

@@ -0,0 +1,172 @@
+import Bunnix, { useRef, useState, useMemo } from "@bunnix/core";
+import Icon from "./Icon.mjs";
+const { div, button, span, hr, input } = Bunnix;
+
+const formatSegment = (val) => val.toString().padStart(2, '0');
+
+export default function TimePicker({
+  id,
+  placeholder,
+  variant = "regular",
+  size = "md",
+  class: className = ""
+} = {}) {
+  const popoverRef = useRef(null);
+  const hourInputRef = useRef(null);
+  const minuteInputRef = useRef(null);
+  const pickerId = id || `timepicker-${Math.random().toString(36).slice(2, 8)}`;
+  const anchorName = `--${pickerId}`;
+
+  // State as strings for better input handling
+  const now = new Date();
+  const hour = useState(formatSegment(now.getHours()));
+  const minute = useState(formatSegment(now.getMinutes()));
+  const isModified = useState(false);
+
+  const openPopover = () => {
+    const popover = popoverRef.current;
+    if (popover && !popover.matches(":popover-open")) {
+      popover.showPopover();
+    }
+  };
+
+  const closePopover = () => {
+    const popover = popoverRef.current;
+    if (popover && popover.matches(":popover-open")) {
+      popover.hidePopover();
+    }
+  };
+
+  const handleNow = () => {
+    const d = new Date();
+    hour.set(formatSegment(d.getHours()));
+    minute.set(formatSegment(d.getMinutes()));
+    isModified.set(true);
+  };
+
+  const handleHourInput = (e) => {
+    let raw = e.target.value.replace(/\D/g, '').slice(0, 2);
+    if (raw !== "") {
+      const val = parseInt(raw, 10);
+      if (val > 23) raw = "23";
+    }
+    hour.set(raw);
+    isModified.set(true);
+
+    // Auto-focus minutes if we have 2 digits or a digit that can't be leading (3-9)
+    if (raw.length === 2 || (raw.length === 1 && parseInt(raw, 10) > 2)) {
+      minuteInputRef.current?.focus();
+      minuteInputRef.current?.select();
+    }
+  };
+
+  const handleMinuteInput = (e) => {
+    let raw = e.target.value.replace(/\D/g, '').slice(0, 2);
+    if (raw !== "") {
+      const val = parseInt(raw, 10);
+      if (val > 59) raw = "59";
+    }
+    minute.set(raw);
+    isModified.set(true);
+  };
+
+  const handleBlur = (type) => {
+    const state = type === 'hour' ? hour : minute;
+    let val = state.get();
+    if (val === "") val = "00";
+    state.set(val.padStart(2, '0'));
+  };
+
+  // Reactive display label for the trigger
+  const displayLabel = useMemo([hour, minute, isModified], (h, m, mod) => {
+    if (!mod && placeholder) return placeholder;
+    // Ensure we show padded values in the trigger even if input is mid-edit
+    const hh = h === "" ? "00" : h.padStart(2, '0');
+    const mm = m === "" ? "00" : m.padStart(2, '0');
+    return `${hh}:${hh === h ? '' : ''}${mm}`; // Trigger re-render correctly
+  });
+
+  // Refined display label using state directly for consistency
+  const finalLabel = useMemo([hour, minute, isModified], (h, m, mod) => {
+    if (!mod && placeholder) return placeholder;
+    const hh = h.padStart(2, '0');
+    const mm = m.padStart(2, '0');
+    return `${hh}:${mm}`;
+  });
+
+  const hasValue = isModified.map(m => !!m);
+
+  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;
+  };
+  const normalizedSize = normalizeSize(size);
+  const variantClass = variant === "rounded" ? "rounded-full" : "";
+  const triggerSizeClass = normalizedSize === "xl"
+    ? "dropdown-xl"
+    : normalizedSize === "lg"
+      ? "dropdown-lg"
+      : "";
+  const iconSizeValue = normalizedSize === "sm"
+    ? "sm"
+    : normalizedSize === "lg"
+      ? "lg"
+      : normalizedSize === "xl"
+        ? "xl"
+        : undefined;
+
+  return div({ class: `timepicker-wrapper ${className}`.trim() }, [
+    button({
+      id: pickerId,
+      class: `dropdown-trigger timepicker-trigger justify-start ${variantClass} ${triggerSizeClass} no-chevron`.trim(),
+      style: `anchor-name: ${anchorName}`,
+      click: openPopover
+    }, [
+      span({ class: hasValue.map(h => h ? "" : "text-tertiary") }, finalLabel),
+      Icon({ name: "clock", fill: "quaternary", size: iconSizeValue, class: "ml-auto" })
+    ]),
+
+    div({
+      ref: popoverRef,
+      popover: "auto",
+      class: "timepicker-popover popover-base",
+      style: `--anchor-id: ${anchorName}`
+    }, [
+      div({ class: "card column-container shadow gap-0 p-0 bg-base timepicker-card" }, [
+        div({ class: "timepicker-display" }, [
+          input({
+            ref: hourInputRef,
+            type: "text",
+            class: "time-segment",
+            value: hour,
+            placeholder: "00",
+            input: handleHourInput,
+            blur: () => handleBlur('hour'),
+            focus: (e) => e.target.select()
+          }),
+          span({ class: "time-separator" }, ":"),
+          input({
+            ref: minuteInputRef,
+            type: "text",
+            class: "time-segment",
+            value: minute,
+            placeholder: "00",
+            input: handleMinuteInput,
+            blur: () => handleBlur('minute'),
+            focus: (e) => e.target.select()
+          })
+        ]),
+
+        hr({ class: "no-margin" }),
+
+        div({ class: "row-container justify-center items-center gap-md p-base shrink-0" }, [
+          button({ class: "btn btn-flat", click: () => { isModified.set(false); closePopover(); } }, "Clear"),
+          button({ class: "btn btn-flat", click: handleNow }, "Now"),
+          button({ class: "btn", click: closePopover }, "OK")
+        ])
+      ])
+    ])
+  ]);
+}