@bunnix/components 0.9.0

package/src/components/Checkbox.mjs

@@ -0,0 +1,36 @@
+import Bunnix from "@bunnix/core";
+const { label, input, span } = Bunnix;
+
+export default function Checkbox({
+  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: "checkbox",
+      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/ComboBox.mjs

@@ -0,0 +1,44 @@
+import Bunnix from "@bunnix/core";
+const { select, option } = Bunnix;
+
+export default function ComboBox({
+  options = [],
+  selection,
+  size,
+  class: className = "",
+  onChange,
+  change,
+  ...rest
+} = {}, children) {
+  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" ? "input-lg" : normalizedSize === "xl" ? "input-xl" : "";
+  const selectionState = selection && typeof selection.map === "function" ? selection : null;
+  const handleChangeExternal = onChange ?? change;
+
+  const handleChange = (event) => {
+    if (selectionState) {
+      selectionState.set(event.target.value);
+    }
+    if (handleChangeExternal) handleChangeExternal(event);
+  };
+
+  const resolvedChildren = children ?? options.map((opt) => {
+    if (typeof opt === "string") {
+      return option({ value: opt }, opt);
+    }
+    return option({ value: opt.value }, opt.label ?? opt.value);
+  });
+
+  return select({
+    class: `${sizeClass} ${className}`.trim(),
+    value: selection ?? "",
+    change: handleChange,
+    ...rest
+  }, resolvedChildren);
+}

package/src/components/Container.mjs

@@ -0,0 +1,27 @@
+import Bunnix from "@bunnix/core";
+
+const { div } = Bunnix;
+
+const typeClassMap = {
+  main: "main-container",
+  content: "main-content",
+  page: "page-layout"
+};
+
+const directionClassMap = {
+  horizontal: "row-container",
+  vertical: "column-container"
+};
+
+export default function Container({
+  type,
+  direction,
+  class: className = "",
+  ...rest
+} = {}, children) {
+  const typeClass = typeClassMap[type] || "";
+  const directionClass = directionClassMap[direction] || "";
+  const combinedClass = `${typeClass} ${directionClass} ${className}`.trim();
+
+  return div({ class: combinedClass, ...rest }, children);
+}

package/src/components/DatePicker.mjs

@@ -0,0 +1,251 @@
+import Bunnix, { ForEach, useMemo, useRef, useState } from "@bunnix/core";
+import Icon from "./Icon.mjs";
+const { div, button, span, hr } = Bunnix;
+
+const WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+
+const isSameDay = (a, b) =>
+  a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+
+const toMidnight = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+
+const formatDate = (date, formatter) => (date ? formatter.format(date) : "");
+
+const buildCalendar = (viewDate) => {
+  if (!viewDate) return [];
+  const year = viewDate.getFullYear();
+  const month = viewDate.getMonth();
+  const startOfMonth = new Date(year, month, 1);
+  const startDay = startOfMonth.getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const daysInPrev = new Date(year, month, 0).getDate();
+
+  const cells = [];
+  for (let i = 0; i < 42; i += 1) {
+    let day;
+    let cellMonth = month;
+    let outside = false;
+
+    if (i < startDay) {
+      day = daysInPrev - startDay + i + 1;
+      cellMonth = month - 1;
+      outside = true;
+    } else if (i >= startDay + daysInMonth) {
+      day = i - (startDay + daysInMonth) + 1;
+      cellMonth = month + 1;
+      outside = true;
+    } else {
+      day = i - startDay + 1;
+    }
+
+    const cellDate = new Date(year, cellMonth, day);
+    const key = `${cellDate.getFullYear()}-${cellDate.getMonth()}-${cellDate.getDate()}-${outside ? "o" : "i"}`;
+    cells.push({ key, date: cellDate, outside });
+  }
+
+  return cells;
+};
+
+export default function DatePicker({
+  id,
+  placeholder,
+  range = false,
+  variant = "regular",
+  size = "md",
+  class: className = ""
+} = {}) {
+  const popoverRef = useRef(null);
+  const pickerId = id || `datepicker-${Math.random().toString(36).slice(2, 8)}`;
+  const anchorName = `--${pickerId}`;
+
+  const formatter = useMemo([], () => {
+    return new Intl.DateTimeFormat(undefined, { day: "2-digit", month: "2-digit", year: "numeric" });
+  });
+
+  const selectedStart = useState(null);
+  const selectedEnd = useState(null);
+  const inputValue = useState("");
+
+  const viewDate = useState(new Date());
+
+  const calendar = useMemo([viewDate], (value) => buildCalendar(value));
+  const monthLabel = useMemo([viewDate], (value) => {
+    try {
+      return new Intl.DateTimeFormat(undefined, { month: "long", year: "numeric" }).format(value);
+    } catch (error) {
+      return new Intl.DateTimeFormat(undefined, { month: "short", year: "numeric" }).format(value);
+    }
+  });
+
+  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 setSelection = (start, end = null) => {
+    selectedStart.set(start);
+    selectedEnd.set(end);
+    if (range) {
+      const startText = formatDate(start, formatter.get());
+      const endText = end ? formatDate(end, formatter.get()) : "";
+      inputValue.set(endText ? `${startText} - ${endText}` : startText);
+    } else {
+      inputValue.set(formatDate(start, formatter.get()));
+    }
+  };
+
+  const handleDayClick = (date) => {
+    if (range) {
+      const start = selectedStart.get();
+      const end = selectedEnd.get();
+      if (!start || end) {
+        setSelection(date, null);
+      } else if (date < start) {
+        setSelection(date, start);
+      } else {
+        setSelection(start, date);
+      }
+    } else {
+      setSelection(date, null);
+      closePopover();
+    }
+    viewDate.set(new Date(date.getFullYear(), date.getMonth(), 1));
+  };
+
+  const handlePrevMonth = () => {
+    const current = viewDate.get();
+    viewDate.set(new Date(current.getFullYear(), current.getMonth() - 1, 1));
+  };
+
+  const handleNextMonth = () => {
+    const current = viewDate.get();
+    viewDate.set(new Date(current.getFullYear(), current.getMonth() + 1, 1));
+  };
+
+  const handleToday = () => {
+    const today = toMidnight(new Date());
+    setSelection(today, null);
+    viewDate.set(new Date(today.getFullYear(), today.getMonth(), 1));
+  };
+
+  const handleClear = () => {
+    selectedStart.set(null);
+    selectedEnd.set(null);
+    inputValue.set("");
+    closePopover();
+  };
+
+  // Single reactive source for the label text
+  const displayLabel = inputValue.map(v => {
+    if (v) return v;
+    if (placeholder) return placeholder;
+
+    const today = new Date();
+    const fmt = formatter.get();
+    if (range) {
+      const tomorrow = new Date(today);
+      tomorrow.setDate(today.getDate() + 1);
+      return `${formatDate(today, fmt)} - ${formatDate(tomorrow, fmt)}`;
+    }
+    return formatDate(today, fmt);
+  });
+
+  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;
+  };
+  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: `datepicker-wrapper ${className}`.trim() }, [
+    button({
+      id: pickerId,
+      class: `dropdown-trigger datepicker-trigger justify-start ${variantClass} ${triggerSizeClass} no-chevron`.trim(),
+      style: `anchor-name: ${anchorName}`,
+      click: openPopover
+    }, [
+      span({ class: hasValue.map(h => h ? "" : "text-tertiary") }, displayLabel),
+      Icon({ name: "calendar", fill: "quaternary", size: iconSizeValue, class: "ml-auto" })
+    ]),
+    div({
+      ref: popoverRef,
+      popover: "auto",
+      class: "datepicker-popover popover-base",
+      style: `--anchor-id: ${anchorName}`
+    }, [
+      div({ class: "card column-container shadow gap-0 p-0 bg-base datepicker-card" }, [
+        div({ class: "row-container items-center justify-between datepicker-header p-sm no-margin" }, [
+          button({ class: "btn btn-flat datepicker-nav", click: handlePrevMonth }, [
+            span({ class: "icon icon-chevron-left icon-base" })
+          ]),
+          span({ class: "datepicker-title" }, monthLabel),
+          button({ class: "btn btn-flat datepicker-nav", click: handleNextMonth }, [
+            span({ class: "icon icon-chevron-right icon-base" })
+          ])
+        ]),
+        div({ class: "datepicker-body" }, [
+          div({ class: "datepicker-weekdays" }, WEEKDAYS.map((day) =>
+            span({ class: "datepicker-weekday" }, day)
+          )),
+          div({ class: "datepicker-grid" },
+            ForEach(calendar, "key", (cell) => {
+              const start = selectedStart.get();
+              const end = selectedEnd.get();
+              const inRange = range && start && end && cell.date >= start && cell.date <= end;
+              const isStart = range && start && isSameDay(cell.date, start);
+              const isEnd = range && end && isSameDay(cell.date, end);
+              const isSelected = !range && start && isSameDay(cell.date, start);
+              const isToday = isSameDay(cell.date, toMidnight(new Date()));
+
+              const classNames = [
+                "datepicker-cell",
+                cell.outside ? "is-outside" : "",
+                inRange ? "is-in-range" : "",
+                isStart ? "is-range-start" : "",
+                isEnd ? "is-range-end" : "",
+                isSelected ? "is-selected" : "",
+                isToday ? "is-today" : ""
+              ].filter(Boolean).join(" ");
+
+              return button({
+                class: classNames,
+                click: () => handleDayClick(cell.date)
+              }, cell.date.getDate().toString());
+            })
+          )
+        ]),
+        hr({ class: "no-margin" }),
+        div({ class: "row-container justify-center items-center gap-md p-base shrink-0 datepicker-footer" }, [
+          button({ class: "btn btn-flat", click: handleClear }, "Clear"),
+          button({ class: "btn btn-flat", click: handleToday }, "Today"),
+          button({ class: "btn", click: closePopover }, "OK")
+        ])
+      ])
+    ])
+  ]);
+}

package/src/components/Dialog.mjs

@@ -0,0 +1,166 @@
+import Bunnix, { useEffect, useRef, useState, Show } from "@bunnix/core";
+import VStack from "./VStack.mjs";
+import HStack from "./HStack.mjs";
+import Button from "./Button.mjs";
+import Text from "./Text.mjs";
+import Icon from "./Icon.mjs";
+
+const { div, dialog, kbd, hr } = Bunnix;
+
+const defaultDialog = {
+  open: false,
+  title: "",
+  message: "",
+  confirmation: {
+    text: "",
+    action: null,
+    variant: "regular",
+    disabled: false
+  },
+  extra: {
+    text: "",
+    action: null
+  },
+  content: null
+};
+
+export const dialogState = useState(defaultDialog);
+
+export const showDialog = ({ title, message, confirmation, content } = {}) => {
+  dialogState.set({
+    open: true,
+    title: title ?? "",
+    message: message ?? "",
+    confirmation: {
+      text: confirmation?.text ?? defaultDialog.confirmation.text,
+      action: confirmation?.action ?? null,
+      variant: confirmation?.variant ?? defaultDialog.confirmation.variant,
+      disabled: confirmation?.disabled ?? defaultDialog.confirmation.disabled
+    },
+    extra: {
+      text: confirmation?.extra?.text ?? defaultDialog.extra.text,
+      action: confirmation?.extra?.action ?? null
+    },
+    content: content ?? null
+  });
+};
+
+export const hideDialog = () => {
+  dialogState.set({ ...dialogState.get(), open: false });
+};
+
+export default function Dialog() {
+  const dialogRef = useRef(null);
+  const setConfirmDisabled = (disabled) => {
+    const current = dialogState.get();
+    dialogState.set({
+      ...current,
+      confirmation: {
+        ...current.confirmation,
+        disabled: !!disabled
+      }
+    });
+  };
+
+  useEffect((value) => {
+    const element = dialogRef.current;
+    if (!element) return;
+
+    if (value.open) {
+      if (!element.open) {
+        element.showModal();
+      }
+    } else if (element.open) {
+      element.close();
+    }
+  }, [dialogState]);
+
+  const confirmationText = dialogState.map((value) => value.confirmation?.text ?? defaultDialog.confirmation.text);
+  const confirmationVariant = dialogState.map((value) => value.confirmation?.variant ?? defaultDialog.confirmation.variant);
+  const confirmationDisabled = dialogState.map((value) => !!value.confirmation?.disabled);
+  const showConfirmation = dialogState.map((value) => !!value.confirmation?.text);
+  const extraText = dialogState.map((value) => value.extra?.text ?? "");
+  const showExtra = dialogState.map((value) => !!value.extra?.text);
+  const showContent = dialogState.map((value) => typeof value.content === "function");
+  const showMessage = dialogState.map((value) => !!value.message && typeof value.content !== "function");
+  const showBody = dialogState.map((value) => !!value.message || typeof value.content === "function");
+
+  return dialog({
+    ref: dialogRef,
+    class: "dialog-base dialog-backdrop fixed inset-0 w-full h-full row-container items-center justify-center",
+    cancel: () => {
+      hideDialog();
+    },
+    keydown: (event) => {
+      if (event?.key !== "Enter") return;
+      const current = dialogState.get();
+      const hasConfirmation = !!current?.confirmation?.text;
+      const isDisabled = !!current?.confirmation?.disabled;
+      if (!hasConfirmation || isDisabled) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      event.preventDefault();
+      const action = current?.confirmation?.action;
+      if (typeof action === "function") {
+        action();
+      }
+      hideDialog();
+    }
+  }, [
+    VStack({ gap: "regular", class: "box-capsule shadow bg-base w-full max-w-400 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" }),
+        Button({
+          variant: "flat",
+          class: "p-xs",
+          click: hideDialog
+        }, Icon({ name: "close" }))
+      ]),
+      Text({
+        type: "paragraph",
+        color: "secondary",
+        class: showMessage.map((value) => `whitespace-pre-line ${value ? "" : "hidden"}`.trim())
+      }, dialogState.map((value) => value.message)),
+      Show(showContent, () => {
+        const current = dialogState.get();
+        if (typeof current.content !== "function") return null;
+        return div({ class: "column-container gap-sm" }, current.content({ setConfirmDisabled }));
+      }),
+      HStack({ alignment: "trailing", gap: "regular", class: "w-full" }, [
+        Show(showExtra, () => Button({
+          variant: "flat",
+          click: () => {
+            const current = dialogState.get();
+            const action = current.extra?.action;
+            if (typeof action === "function") {
+              action();
+            }
+            hideDialog();
+          }
+        }, extraText)),
+        Show(showConfirmation, () => Button({
+          autofocus: true,
+          variant: confirmationVariant,
+          disabled: confirmationDisabled,
+          click: () => {
+            const current = dialogState.get();
+            const action = current.confirmation?.action;
+            if (typeof action === "function") {
+              action();
+            }
+            hideDialog();
+          }
+        }, [
+          confirmationText,
+          kbd({ class: "text-white text-sm whitespace-nowrap" }, [
+            Icon({ name: "return-arrow", fill: "white", size: "xs" }),
+            "Enter"
+          ])
+        ]))
+      ])
+    ])
+  ]);
+}

package/src/components/DropdownMenu.mjs

@@ -0,0 +1,110 @@
+import Bunnix, { useRef, useState, useMemo } from "@bunnix/core";
+const { div, button, hr, span } = Bunnix;
+
+let dropdownCounter = 0;
+
+export default function DropdownMenu({
+  items = [],
+  id,
+  align = "left",
+  placeholder = "Select option...",
+  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 dropdownId = id || `dropdown-instance-${++dropdownCounter}`;
+  const anchorName = `--${dropdownId}`;
+  
+  const initialItem = items.find(item => item.selected) || null;
+  const selectedItem = useState(initialItem);
+  const hasSelection = selectedItem.map(s => !!s);
+  const currentTitle = selectedItem.map(s => s ? s.title : placeholder);
+
+  const handleToggle = () => {
+    const popover = popoverRef.current;
+    if (!popover) return;
+    if (popover.matches(":popover-open")) {
+      popover.hidePopover();
+    } else {
+      popover.showPopover();
+    }
+  };
+
+  const handleItemClick = (item) => {
+    selectedItem.set(item);
+    if (item?.click) item.click();
+    if (onSelect) onSelect(item);
+    const popover = popoverRef.current;
+    if (popover) {
+      popover.hidePopover();
+    }
+  };
+
+  const sizeClass = normalizedSize === "lg" ? "dropdown-lg" : normalizedSize === "xl" ? "dropdown-xl" : "";
+  const itemSizeClass = 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: dropdownId,
+      style: `anchor-name: ${anchorName}`,
+      class: `dropdown-trigger justify-start ${sizeClass} ${className}`.trim(),
+      click: handleToggle
+    }, [
+      // Reactive Icon: stable element, reactive class
+      span({ 
+        class: selectedItem.map(s => {
+          if (!s?.icon) return "hidden";
+          const tint = s.destructive ? "bg-destructive" : "bg-primary";
+          return `icon ${iconSizeClass} ${s.icon} ${tint}`.trim();
+        })
+      }),
+      // Reactive Title: text with dimmed style when empty
+      span({ class: hasSelection.map(selected => selected ? "" : "text-secondary") }, currentTitle)
+    ]),
+
+    div({
+      ref: popoverRef,
+      popover: "auto",
+      class: `menu-popover popover-base menu-anchor-${align}`,
+      style: `--anchor-id: ${anchorName}`
+    }, [
+      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" });
+          }
+          
+          const isCurrent = selectedItem.map(s => s?.title === item.title);
+          
+          return button({
+            class: isCurrent.map(active => `btn btn-flat justify-start w-full ${itemSizeClass} ${active ? 'selected' : ''}`.trim()),
+            click: () => handleItemClick(item)
+          }, [
+            span({
+              class: isCurrent.map(active => {
+                const tint = active ? "bg-white" : item.destructive ? "bg-destructive" : "bg-primary";
+                return `icon ${iconSizeClass} ${item.icon} ${tint}`.trim();
+              })
+            }),
+            item.title
+          ]);
+        })
+      )
+    ])
+  ]);
+}

package/src/components/Grid.mjs

@@ -0,0 +1,40 @@
+import Bunnix from "@bunnix/core";
+const { div } = Bunnix;
+
+export default function Grid({
+  type = "flow",
+  columns = [],
+  gap = "regular",
+  class: className = "",
+  style: inlineStyle = "",
+  ...rest
+} = {}, children) {
+  const gapMap = {
+    small: "gap-sm",
+    regular: "gap-md",
+    large: "gap-lg"
+  };
+
+  const isFixed = type === "fixed";
+  
+  // Base structural class
+  // 'grid-flow' uses flex-wrap: wrap
+  // 'column-container' provides display: flex which we override with display: grid if fixed
+  const baseClass = isFixed ? "column-container" : "grid-flow";
+  
+  let gridStyle = inlineStyle;
+  if (isFixed && columns.length > 0) {
+    const template = columns.map(col => {
+      if (col.size === "auto") return "1fr";
+      if (col.size === "minmax") return "minmax(min-content, 1fr)";
+      return col.size || "1fr";
+    }).join(" ");
+    gridStyle = `display: grid; grid-template-columns: ${template}; ${inlineStyle}`.trim();
+  }
+
+  return div({
+    class: `${baseClass} ${gapMap[gap]} ${className}`.trim(),
+    style: gridStyle,
+    ...rest
+  }, children);
+}