@bunnix/components 0.10.2 → 0.11.0

package/src/core/sidebar.mjs

@@ -1,88 +1,209 @@
 /**
- * Sidebar Components (Next-Gen Core)
- *
- * Sidebar navigation component with items and selection state.
- *
- * Components:
- * - Sidebar: Sidebar navigation with headers and clickable items
+ * Sidebar navigation with selectable items and optional nested groups.
  *
  * Features:
- * - State binding for items and selected key
- * - Automatic state resolution (useState object or raw value)
+ * - State binding for items and selection key
  * - Headers support for grouping items
- * - Icon support for items
+ * - Recursive nested items with internal expand/collapse state
+ * - Parent items stay selectable while toggling their child groups
  */
-import Bunnix, { ForEach, useState, Show } from "@bunnix/core";
-import { withNormalizedArgs, withExtractedStyles, isStateLike } from "./utils.mjs";
-import { Column, Row } from "./layout.mjs";
+import { Compute, Show, useEffect, useState } from "@bunnix/core";
+import { withNormalizedArgs, withExtractedStyles, resolveCollectionState } from "./utils.mjs";
+import { Column, Row, Spacer } from "./layout.mjs";
 import { Button } from "./buttons.mjs";
 import { Icon } from "./media.mjs";
-import { Heading } from "./typography.mjs";
+import { Heading, Text } from "./typography.mjs";
 
-const SidebarCore = (props, ...children) => {
-  // Resolve items (state or raw value)
-  let itemsValue = props.items?.get && props.items?.set
-    ? props.items
-    : useState(props.items ?? []);
+const resolveSelectionValue = (selection) => {
+  if (selection?.get) return selection.get();
+  return selection ?? "";
+};
 
-  // Resolve selected (state or raw value)
-  let selectedValue = props.selected?.get && props.selected?.set
-    ? props.selected
-    : useState(props.selected ?? "");
+const buildExpansionState = (items = [], currentState = {}, selectedKey = "") => {
+  const nextState = { ...currentState };
 
-  delete props.items;
-  delete props.selected;
+  for (const item of items) {
+    if (Array.isArray(item.children) && item.children.length > 0) {
+      if (!(item.key in nextState)) {
+        nextState[item.key] = item.key === selectedKey || (item.expanded ?? false);
+      }
+
+      Object.assign(nextState, buildExpansionState(item.children, nextState, selectedKey));
+    }
+  }
+
+  return nextState;
+};
+
+const hasSidebarItem = (items = [], key) => {
+  for (const item of items) {
+    if (item.key === key) return true;
+    if (Array.isArray(item.children) && hasSidebarItem(item.children, key)) return true;
+  }
+
+  return false;
+};
+
+const renderSidebarItem = ({
+  item,
+  index,
+  level,
+  selected,
+  expandedItems,
+  setSelection,
+  toggleExpanded,
+}) => {
+  if (item.isHeader) {
+    return Heading(
+      {
+        h4: true,
+        color: "tertiary",
+        textSize: "1rem",
+        marginTop: index > 0 ? "regular" : 0,
+        ...(level > 0 ? { paddingLeft: level * 20 } : {}),
+      },
+      item.text,
+    );
+  }
+
+  const hasChildren = Array.isArray(item.children) && item.children.length > 0;
+  const isExpanded = !!expandedItems[item.key];
+  const isSelected = selected === item.key;
+
+  const button = Button(
+    {
+      variant: isSelected ? "primary" : "tertiary",
+      click: () => {
+        setSelection(item.key);
+        if (hasChildren) toggleExpanded(item.key);
+      },
+    },
+    Row(
+      {
+        fillWidth: true,
+        alignItems: "center",
+        gap: "small",
+        ...(level > 0 ? { paddingLeft: level * 20 } : {}),
+      },
+      ...(level === 0 && item.icon
+        ? [
+            Icon({
+              size: 18,
+              name: item.icon,
+              ...(isSelected ? {} : { color: "secondary" }),
+            }),
+          ]
+        : []),
+      Text({ weight: "heavy" }, item.text),
+      Spacer(),
+      ...(hasChildren
+        ? [
+            Icon({
+              name: isExpanded ? "chevron_down" : "chevron_right",
+              size: 16,
+              ...(isSelected ? {} : { color: "secondary" }),
+            }),
+          ]
+        : []),
+    ),
+  );
+
+  if (!hasChildren) return button;
 
   return Column(
-    { ...props },
-    ForEach(itemsValue, "key", (item) =>
-      item.isHeader
-        ? Heading(
-            { h4: true, color: "tertiary", textSize: "1rem" },
-            item.text,
-          )
-        : Show(selectedValue, (selected) =>
-            Button(
-              {
-                variant: selected === item.key ? "primary" : "tertiary",
-                click: () => selectedValue.set(item.key),
-              },
-              Row(
-                { fillWidth: true, alignItems: "center" },
-                item.icon && Icon({
-                  size: 20,
-                  name: item.icon,
-                  ...(selected !== item.key && { color: "secondary" })
-                }),
-                Row(item.text),
-              ),
-            )
+    { gap: 4 },
+    button,
+    ...(isExpanded
+      ? [
+          Column(
+            { gap: 4 },
+            ...item.children.map((child, childIndex) =>
+              renderSidebarItem({
+                item: child,
+                index: childIndex,
+                level: level + 1,
+                selected,
+                expandedItems,
+                setSelection,
+                toggleExpanded,
+              }),
+            ),
           ),
+        ]
+      : []),
+  );
+};
+
+const SidebarCore = (props, ...children) => {
+  const initialSelection = resolveSelectionValue(props.selection);
+  let itemsValue = resolveCollectionState(props.items, []);
+  let selectionValue = props.selection?.get && props.selection?.set
+    ? props.selection
+    : useState(props.selection ?? null);
+  let expandedItemsValue = useState(
+    buildExpansionState(itemsValue.get?.() ?? props.items ?? [], {}, initialSelection),
+  );
+  const sidebarState = Compute(
+    [itemsValue, expandedItemsValue, selectionValue],
+    (resolvedItems, expandedItems, selected) => ({
+      resolvedItems: resolvedItems ?? [],
+      expandedItems: expandedItems ?? {},
+      selected,
+    }),
+  );
+
+  useEffect((nextItems) => {
+    const currentState = expandedItemsValue.get() ?? {};
+    const resolvedSelection = resolveSelectionValue(selectionValue);
+
+    if (resolvedSelection && !hasSidebarItem(nextItems ?? [], resolvedSelection)) {
+      selectionValue.set && selectionValue.set(null);
+    }
+
+    const nextState = buildExpansionState(
+      nextItems ?? [],
+      currentState,
+      resolveSelectionValue(selectionValue),
+    );
+
+    if (JSON.stringify(currentState) !== JSON.stringify(nextState)) {
+      expandedItemsValue.set(nextState);
+    }
+  }, itemsValue);
+
+  delete props.items;
+  delete props.selection;
+
+  const setSelection = (key) => {
+    selectionValue.set && selectionValue.set(key);
+  };
+
+  const toggleExpanded = (key) => {
+    const currentState = expandedItemsValue.get() ?? {};
+    expandedItemsValue.set({
+      ...currentState,
+      [key]: !currentState[key],
+    });
+  };
+
+  return Show(sidebarState, ({ resolvedItems, expandedItems, selected }) =>
+    Column(
+      { ...props, gap: 4 },
+      ...resolvedItems.map((item, index) =>
+        renderSidebarItem({
+          item,
+          index,
+          level: 0,
+          selected,
+          expandedItems,
+          setSelection,
+          toggleExpanded,
+        }),
+      ),
     ),
   );
 };
 
-/**
- * Sidebar navigation component with item selection state.
- * 
- * @param {Object} props - Component props
- * @param {Array<{key: string, text: string, icon?: string, isHeader?: boolean}>|*} props.items - Navigation items array or state object containing items
- * @param {string|*} props.selected - Currently selected item key or state object for selection
- * @param {string} [props.padding="regular"] - Padding size: "small" | "regular" | "large"
- * @param {string} [props.class] - Additional CSS classes
- * @param {...*} children - Child elements
- * @returns {*} Sidebar component
- * 
- * @example
- * const selected = useState("home");
- * Sidebar({
- *   items: [
- *     { key: "home", text: "Home", icon: "home" },
- *     { key: "settings", text: "Settings", icon: "settings", isHeader: true }
- *   ],
- *   selected: selected
- * })
- */
 export const Sidebar = withNormalizedArgs((props, ...children) =>
   withExtractedStyles((finalProps, ...children) =>
     SidebarCore(finalProps, ...children),

package/src/core/sliderUtils.mjs

@@ -0,0 +1,51 @@
+export function toSliderNumber(value, fallback = 0) {
+  const nextValue = Number(value);
+  return Number.isFinite(nextValue) ? nextValue : fallback;
+}
+
+export function isValidSliderSteps(steps) {
+  if (!Array.isArray(steps) || steps.length < 2) return false;
+
+  let previousValue = -Infinity;
+
+  for (const step of steps) {
+    const nextValue = toSliderNumber(step?.value, NaN);
+    if (!Number.isFinite(nextValue) || nextValue <= previousValue) return false;
+    previousValue = nextValue;
+  }
+
+  return true;
+}
+
+export function findNearestSliderStepIndex(steps, value) {
+  if (!isValidSliderSteps(steps)) return 0;
+
+  const targetValue = toSliderNumber(value, Number(steps[0].value));
+  let nearestIndex = 0;
+  let nearestDistance = Math.abs(Number(steps[0].value) - targetValue);
+
+  for (let index = 1; index < steps.length; index += 1) {
+    const distance = Math.abs(Number(steps[index].value) - targetValue);
+    if (distance < nearestDistance) {
+      nearestIndex = index;
+      nearestDistance = distance;
+    }
+  }
+
+  return nearestIndex;
+}
+
+export function getSliderStepValue(steps, index) {
+  if (!isValidSliderSteps(steps)) return 0;
+
+  const safeIndex = Math.min(
+    steps.length - 1,
+    Math.max(0, Math.round(toSliderNumber(index, 0))),
+  );
+
+  return Number(steps[safeIndex].value);
+}
+
+export function hasSliderStepLabels(steps) {
+  return Array.isArray(steps) && steps.some((step) => !!step?.label);
+}

package/src/core/table.css

@@ -10,11 +10,13 @@
 .table thead td,
 .table th {
   font-weight: var(--font-weight-heavier);
+  height: 40px;
   padding: calc(var(--padding-md) * 0.75) var(--padding-md);
   border-bottom: 1px solid var(--color-border-primary);
 }
 
 .table td {
+  height: 40px;
   padding: calc(var(--padding-md) * 0.5) var(--padding-md);
   border-bottom: 1px solid var(--color-border-primary);
 }
@@ -22,3 +24,24 @@
 .table tr:last-child td {
   border-bottom: none;
 }
+
+.table.table-alternate-rows thead td,
+.table.table-alternate-rows tbody td,
+.table.table-alternate-rows th {
+  border-bottom: none;
+}
+
+.table.table-alternate-rows thead td,
+.table.table-alternate-rows thead th {
+  background-color: var(--color-bg-primary-dimmed);
+}
+
+.table.table-alternate-rows thead + tbody tr:nth-child(even) td,
+.table.table-alternate-rows thead + tbody tr:nth-child(even) th {
+  background-color: var(--color-bg-primary-dimmed);
+}
+
+.table.table-alternate-rows.table-hide-headers tbody tr:nth-child(odd) td,
+.table.table-alternate-rows.table-hide-headers tbody tr:nth-child(odd) th {
+  background-color: var(--color-bg-primary-dimmed);
+}

package/src/core/table.mjs

@@ -12,39 +12,54 @@
  * - Column-based data mapping with headers array (content, key, size)
  * - Row rendering from data objects mapped to header keys
  */
-import Bunnix from "@bunnix/core";
-import { withNormalizedArgs, withExtractedStyles } from "./utils.mjs";
+import Bunnix, { ForEach } from "@bunnix/core";
+import { withNormalizedArgs, withExtractedStyles, resolveCollectionState } from "./utils.mjs";
 
 const { table, colgroup, col, thead, tbody, tr, td } = Bunnix;
 
 const TableCore = withNormalizedArgs((props, ...children) => {
   return withExtractedStyles((finalProps, ...children) => {
-    let headers = finalProps.headers ?? [];
-    let rows = finalProps.rows ?? [];
+    const headersValue = resolveCollectionState(finalProps.headers, []);
+    const rowsValue = resolveCollectionState(finalProps.rows, []);
+    let type = finalProps.type ?? "regular";
+    let border = finalProps.border;
+    let hideHeaders = finalProps.hideHeaders ?? false;
+    let renderCell = finalProps.renderCell;
 
     delete finalProps.headers;
     delete finalProps.rows;
-
-    let tcols = headers.map((h) => col({ width: h.size ?? 0 }));
-    let theaders = headers.map((h) => td(h.content ?? ""));
-    let trows = rows.map((r) =>
-      tr(
-        headers.map((h) => {
-          if (!h.key) return td("");
-          if (!(h.key in r)) return td("");
-          return td({ "data-label": h.content }, r[h.key]);
-        }),
-      ),
-    );
+    delete finalProps.type;
+    delete finalProps.border;
+    delete finalProps.hideHeaders;
+    delete finalProps.renderCell;
 
     return table(
       {
         ...finalProps,
-        class: `table ${finalProps.class || ""}`,
+        class: `table ${type !== "regular" ? `table-${type} ` : ""}${hideHeaders ? "table-hide-headers " : ""}${border ? `border-${border} ` : ""}${finalProps.class || ""}`.trim(),
       },
-      colgroup(tcols),
-      thead(theaders),
-      tbody(trows),
+      colgroup(ForEach(headersValue, "key", (h) => col({ width: h.size ?? 0 }))),
+      ...(!hideHeaders
+        ? [thead(ForEach(headersValue, "key", (h) => td(h.content ?? "")))]
+        : []),
+      tbody(
+        ForEach(rowsValue, {}, (r, rowIndex) =>
+          tr(
+            ForEach(headersValue, "key", (h) => {
+              if (!h.key) return td("");
+              let renderedCell = renderCell?.(r, rowIndex, h.key);
+              if (renderedCell !== undefined) {
+                return td({ "data-label": h.content }, renderedCell);
+              }
+              if (!(h.key in r)) return td("");
+              return td(
+                { "data-label": h.content },
+                r[h.key],
+              );
+            }),
+          ),
+        ),
+      ),
     );
   })(props, ...children);
 });

package/src/core/textareaUtils.mjs

@@ -0,0 +1,31 @@
+export function resolveTextAreaLines(value, fallback = 3) {
+  const lines = Number(value);
+
+  if (!Number.isFinite(lines)) return fallback;
+
+  return Math.max(1, Math.floor(lines));
+}
+
+export function getTextAreaHeightMetrics({
+  lineHeight,
+  scrollHeight,
+  minLines,
+  maxLines,
+  verticalInset = 0,
+}) {
+  const normalizedMinLines = resolveTextAreaLines(minLines, 3);
+  const normalizedMaxLines = Math.max(
+    normalizedMinLines,
+    resolveTextAreaLines(maxLines, 3),
+  );
+  const minHeight = (lineHeight * normalizedMinLines) + verticalInset;
+  const maxHeight = (lineHeight * normalizedMaxLines) + verticalInset;
+  const nextHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);
+
+  return {
+    minHeight,
+    maxHeight,
+    nextHeight,
+    shouldScroll: scrollHeight > maxHeight,
+  };
+}

package/src/core/utils.mjs

@@ -1,8 +1,32 @@
+import { useState } from "@bunnix/core";
+
 export const isStateLike = (value) =>
   value &&
   typeof value.get === "function" &&
   typeof value.subscribe === "function";
 
+export const resolveCollectionState = (value, fallback = []) =>
+  isStateLike(value) ? value : useState(value ?? fallback);
+
+const resolvePadding = (value) => {
+  if (typeof value === "number") return `${value}px`;
+  if (value === "none") return "0";
+  if (value === "sm" || value === "small") return "var(--padding-sm)";
+  if (value === "md" || value === "regular") return "var(--padding-md)";
+  if (value === "lg" || value === "large") return "var(--padding-lg)";
+  return value; // pass-through for custom values (e.g. "8px", "1rem")
+};
+
+const resolveBorderRadius = (value) => {
+  if (typeof value === "number") return `${value}px`;
+  if (value === "none") return "0";
+  if (value === "md" || value === "regular") return "var(--radius-md)";
+  if (value === "lg" || value === "large") return "var(--radius-lg)";
+  if (value === "pill") return "9999px";
+  if (value === "circle") return "9999%";
+  return value;
+};
+
 export function withNormalizedArgs(fn) {
   return (props = {}, ...children) => {
     const isProps =
@@ -51,6 +75,14 @@ export function withExtractedStyles(fn) {
       delete finalProps.textSize;
     }
 
+    if ("fontSize" in props) {
+      style.fontSize =
+        typeof props.fontSize === "number"
+          ? `${props.fontSize}px`
+          : props.fontSize;
+      delete finalProps.fontSize;
+    }
+
     if ("weight" in props) {
       if (typeof props.weight === "number") {
         style.fontWeight = props.weight;
@@ -70,8 +102,26 @@ export function withExtractedStyles(fn) {
       delete finalProps.overflow;
     }
 
+    if ("overflowX" in props) {
+      style.overflowX = props.overflowX;
+      delete finalProps.overflowX;
+    }
+
+    if ("overflowY" in props) {
+      style.overflowY = props.overflowY;
+      delete finalProps.overflowY;
+    }
+
     if ("bgColor" in props) {
       style.backgroundColor = props.bgColor;
+      if (props.bgColor === "primary") style.backgroundColor = "var(--color-bg-primary)";
+      if (props.bgColor === "primary-dimmed") style.backgroundColor = "var(--color-bg-primary-dimmed)";
+      if (props.bgColor === "secondary") style.backgroundColor = "var(--color-bg-secondary)";
+      if (props.bgColor === "success") style.backgroundColor = "var(--color-success)";
+      if (props.bgColor === "success-dimmed") style.backgroundColor = "var(--color-success-dimmed)";
+      if (props.bgColor === "warning") style.backgroundColor = "var(--color-warning)";
+      if (props.bgColor === "warning-dimmed") style.backgroundColor = "var(--color-warning-dimmed)";
+      if (props.bgColor === "danger") style.backgroundColor = "var(--color-danger)";
       delete finalProps.bgColor;
     }
 
@@ -141,6 +191,12 @@ export function withExtractedStyles(fn) {
       delete finalProps.size;
     }
 
+    if ("margin" in props) {
+      style.margin =
+        typeof props.margin === "number" ? `${props.margin}px` : props.margin;
+      delete finalProps.margin;
+    }
+
     if ("marginX" in props) {
       const marginXValue =
         typeof props.marginX === "number"
@@ -193,6 +249,50 @@ export function withExtractedStyles(fn) {
       delete finalProps.marginBottom;
     }
 
+    if ("padding" in props) {
+      style.padding = resolvePadding(props.padding);
+      delete finalProps.padding;
+    }
+
+    if ("paddingX" in props) {
+      const v = resolvePadding(props.paddingX);
+      style.paddingLeft = v;
+      style.paddingRight = v;
+      delete finalProps.paddingX;
+    }
+
+    if ("paddingY" in props) {
+      const v = resolvePadding(props.paddingY);
+      style.paddingTop = v;
+      style.paddingBottom = v;
+      delete finalProps.paddingY;
+    }
+
+    if ("paddingTop" in props) {
+      style.paddingTop = resolvePadding(props.paddingTop);
+      delete finalProps.paddingTop;
+    }
+
+    if ("paddingBottom" in props) {
+      style.paddingBottom = resolvePadding(props.paddingBottom);
+      delete finalProps.paddingBottom;
+    }
+
+    if ("paddingLeft" in props) {
+      style.paddingLeft = resolvePadding(props.paddingLeft);
+      delete finalProps.paddingLeft;
+    }
+
+    if ("paddingRight" in props) {
+      style.paddingRight = resolvePadding(props.paddingRight);
+      delete finalProps.paddingRight;
+    }
+
+    if ("borderRadius" in props) {
+      style.borderRadius = resolveBorderRadius(props.borderRadius);
+      delete finalProps.borderRadius;
+    }
+
     if ("top" in props) {
       style.top =
         typeof props.top === "number"
@@ -235,6 +335,11 @@ export function withExtractedStyles(fn) {
       delete finalProps.flexShrink;
     }
 
+    if ("zIndex" in props) {
+      style.zIndex = props.zIndex;
+      delete finalProps.zIndex;
+    }
+
     finalProps.style = style;
     return fn(finalProps, ...children);
   };

package/src/index.mjs

@@ -19,7 +19,7 @@ export { Media, Icon, Spinner, Avatar } from "./core/media.mjs";
 export { Button, LinkButton } from "./core/buttons.mjs";
 
 // Inputs
-export { TextInput, Select, CheckBox } from "./core/inputs.mjs";
+export { TextInput, TextArea, Select, CheckBox, Switch, SegmentedPicker, Slider } from "./core/inputs.mjs";
 
 // Data Display
 export { Table } from "./core/table.mjs";
@@ -27,7 +27,9 @@ export { Code } from "./core/code.mjs";
 
 // Navigation
 export { Sidebar } from "./core/sidebar.mjs";
+export { Picker } from "./core/inputs.mjs";
 export { Menu } from "./core/menu.mjs";
+export { Outline } from "./core/outline.mjs";
 
 // Feedback
 export { useDialog } from "./core/dialog.mjs";