@inf-monkeys-tech/monkeys-design 0.4.32 → 0.4.34

package/dist/theme-system/index.js

@@ -8548,7 +8548,41 @@ var baseSlots = {
   tableEmptyActions: "mt-4 flex flex-wrap items-center justify-center gap-2",
   tableLoadingRow: "border-b border-border/60",
   tableLoadingCell: "px-3 py-2",
-  tableLoadingSkeleton: "h-4 w-full rounded-md bg-muted/70"
+  tableLoadingSkeleton: "h-4 w-full rounded-md bg-muted/70",
+  layoutRoot: cn(
+    "grid min-w-0 overflow-hidden grid-rows-[auto_minmax(0,1fr)_auto] gap-3 rounded-lg border border-border/70 bg-background p-3 text-foreground",
+    motionBase
+  ),
+  layoutRootFull: "h-full min-h-0",
+  layoutHeader: "min-w-0",
+  layoutBody: "grid min-h-0 min-w-0 overflow-hidden gap-3",
+  layoutSidebar: "min-h-0 min-w-0 overflow-hidden",
+  layoutMain: "min-h-0 min-w-0 overflow-hidden",
+  layoutAside: "min-h-0 min-w-0 overflow-hidden",
+  layoutFooter: "min-w-0",
+  layoutPane: cn(
+    "h-full max-h-full min-h-0 min-w-0 overflow-hidden rounded-lg bg-background text-foreground",
+    motionBase
+  ),
+  layoutPaneScrollable: "overflow-auto",
+  layoutPaneBordered: "border border-border/70",
+  layoutPaneMuted: "bg-muted/25",
+  layoutPaneSoft: "bg-background/95 shadow-sm",
+  layoutPaneTransparent: "bg-transparent shadow-none",
+  layoutSplitRoot: "grid min-h-0 min-w-0 overflow-hidden",
+  layoutSplitHorizontal: "grid-flow-col",
+  layoutSplitVertical: "grid-flow-row",
+  layoutSplitPane: "min-h-0 min-w-0 overflow-hidden",
+  layoutSplitPrimary: "",
+  layoutSplitSecondary: "",
+  layoutResizeHandle: cn(
+    "group/resize relative z-10 flex shrink-0 items-center justify-center bg-transparent text-muted-foreground hover:bg-border/60 active:bg-border/70 focus-visible:bg-border/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+    motionInteractive
+  ),
+  layoutResizeHandleHorizontal: "w-2 cursor-col-resize",
+  layoutResizeHandleVertical: "h-2 cursor-row-resize",
+  layoutResizeHandleDisabled: "cursor-default opacity-60",
+  layoutResizeHandleIndicator: "rounded-full bg-muted-foreground/45 group-hover/resize:bg-primary/70"
 };
 var densitySlots = {
   compact: {
@@ -8622,7 +8656,12 @@ var densitySlots = {
     tableCell: "px-2 py-1.5 text-xs",
     tableHeadLabel: "text-[11px]",
     tableHeadDescription: "text-[10px] leading-3",
-    tableLoadingCell: "px-2 py-1.5"
+    tableLoadingCell: "px-2 py-1.5",
+    layoutRoot: "gap-2 p-2",
+    layoutBody: "gap-2",
+    layoutPane: "rounded-md text-xs",
+    layoutResizeHandleHorizontal: "w-1.5",
+    layoutResizeHandleVertical: "h-1.5"
   },
   default: {
     buttonBase: "h-9"
@@ -8673,7 +8712,12 @@ var densitySlots = {
     menuSubTrigger: "min-h-9 px-3 py-2",
     tableHead: "h-12 px-4 py-3",
     tableCell: "px-4 py-3",
-    tableLoadingCell: "px-4 py-3"
+    tableLoadingCell: "px-4 py-3",
+    layoutRoot: "gap-4 p-4",
+    layoutBody: "gap-4",
+    layoutPane: "rounded-xl",
+    layoutResizeHandleHorizontal: "w-2.5",
+    layoutResizeHandleVertical: "h-2.5"
   }
 };
 var radiusSlots = {
@@ -8717,7 +8761,9 @@ var radiusSlots = {
     menuSubContent: "rounded-none",
     tableContainer: "rounded-none",
     tableEmptyIcon: "rounded-none",
-    tableLoadingSkeleton: "rounded-none"
+    tableLoadingSkeleton: "rounded-none",
+    layoutRoot: "rounded-none",
+    layoutPane: "rounded-none"
   },
   sm: {
     buttonBase: "rounded-sm",
@@ -8759,7 +8805,9 @@ var radiusSlots = {
     menuSubContent: "rounded-sm",
     tableContainer: "rounded-sm",
     tableEmptyIcon: "rounded-sm",
-    tableLoadingSkeleton: "rounded-sm"
+    tableLoadingSkeleton: "rounded-sm",
+    layoutRoot: "rounded-sm",
+    layoutPane: "rounded-sm"
   },
   md: {},
   lg: {
@@ -8796,7 +8844,9 @@ var radiusSlots = {
     menuSubContent: "rounded-lg",
     tableContainer: "rounded-xl",
     tableEmptyIcon: "rounded-xl",
-    tableLoadingSkeleton: "rounded-lg"
+    tableLoadingSkeleton: "rounded-lg",
+    layoutRoot: "rounded-xl",
+    layoutPane: "rounded-xl"
   },
   xl: {
     buttonBase: "rounded-xl",
@@ -8834,7 +8884,9 @@ var radiusSlots = {
     menuSubContent: "rounded-xl",
     tableContainer: "rounded-2xl",
     tableEmptyIcon: "rounded-2xl",
-    tableLoadingSkeleton: "rounded-xl"
+    tableLoadingSkeleton: "rounded-xl",
+    layoutRoot: "rounded-2xl",
+    layoutPane: "rounded-2xl"
   },
   full: {
     buttonBase: "rounded-full",
@@ -8876,7 +8928,9 @@ var radiusSlots = {
     menuSubContent: "rounded-2xl",
     tableContainer: "rounded-2xl",
     tableEmptyIcon: "rounded-full",
-    tableLoadingSkeleton: "rounded-full"
+    tableLoadingSkeleton: "rounded-full",
+    layoutRoot: "rounded-2xl",
+    layoutPane: "rounded-2xl"
   }
 };
 var borderSlots = {
@@ -8918,7 +8972,10 @@ var borderSlots = {
     tableFooterBarAttached: "border-t border-transparent",
     tableRow: "border-transparent",
     tableEmptyRow: "border-transparent",
-    tableLoadingRow: "border-transparent"
+    tableLoadingRow: "border-transparent",
+    layoutRoot: "border-transparent",
+    layoutPaneBordered: "border-transparent",
+    layoutResizeHandle: "bg-transparent hover:bg-transparent active:bg-transparent focus-visible:bg-transparent"
   },
   subtle: {
     buttonDefault: "border-border/60",
@@ -8958,7 +9015,9 @@ var borderSlots = {
     tableFooterBarAttached: "border-t border-border/60",
     tableRow: "border-border/50",
     tableEmptyRow: "border-border/50",
-    tableLoadingRow: "border-border/50"
+    tableLoadingRow: "border-border/50",
+    layoutRoot: "border-border/60",
+    layoutPaneBordered: "border-border/60"
   },
   solid: {},
   strong: {
@@ -8999,7 +9058,10 @@ var borderSlots = {
     tableFooterBarAttached: "border-t border-foreground/20",
     tableRow: "border-foreground/15",
     tableEmptyRow: "border-foreground/15",
-    tableLoadingRow: "border-foreground/15"
+    tableLoadingRow: "border-foreground/15",
+    layoutRoot: "border-foreground/20",
+    layoutPaneBordered: "border-foreground/20",
+    layoutResizeHandle: "hover:bg-foreground/15 active:bg-foreground/20 focus-visible:bg-foreground/15"
   }
 };
 var backgroundSlots = {
@@ -9041,7 +9103,11 @@ var backgroundSlots = {
     tableFooter: "bg-muted/35",
     tableFooterBar: "bg-muted/30 shadow-none",
     tableRowInteractive: "cursor-pointer hover:bg-muted/45",
-    tableLoadingSkeleton: "bg-muted"
+    tableLoadingSkeleton: "bg-muted",
+    layoutRoot: "bg-card",
+    layoutPane: "bg-card",
+    layoutPaneMuted: "bg-muted/35",
+    layoutResizeHandle: "hover:bg-border/70 active:bg-border/80 focus-visible:bg-border/70"
   },
   soft: {
     buttonDefault: "bg-muted/30 hover:bg-muted/55",
@@ -9077,7 +9143,10 @@ var backgroundSlots = {
     tableFooter: "bg-muted/25",
     tableFooterBar: "bg-muted/25 shadow-none",
     tableRowInteractive: "cursor-pointer hover:bg-muted/35",
-    tableLoadingSkeleton: "bg-muted/65"
+    tableLoadingSkeleton: "bg-muted/65",
+    layoutRoot: "bg-background/95 shadow-sm",
+    layoutPane: "bg-background/95 shadow-sm",
+    layoutPaneSoft: "bg-background/95 shadow-md"
   },
   glass: {
     buttonBase: "backdrop-blur-md",
@@ -9138,7 +9207,13 @@ var backgroundSlots = {
     tableRow: "border-white/10",
     tableRowInteractive: "cursor-pointer hover:bg-white/[0.08]",
     tableHeadLabel: "text-foreground",
-    tableLoadingSkeleton: "bg-white/[0.16]"
+    tableLoadingSkeleton: "bg-white/[0.16]",
+    layoutRoot: "border-white/10 bg-white/[0.05] shadow-none backdrop-blur-md",
+    layoutPane: "border-white/10 bg-white/[0.06] shadow-none backdrop-blur-md",
+    layoutPaneMuted: "bg-white/[0.08]",
+    layoutPaneSoft: "bg-white/[0.10] shadow-none backdrop-blur-md",
+    layoutResizeHandle: "text-foreground/65 hover:bg-white/10 active:bg-white/15 focus-visible:bg-white/10",
+    layoutResizeHandleIndicator: "bg-white/45 group-hover/resize:bg-white/75"
   },
   dark: {
     buttonBase: "border-white/15 text-white shadow-lg backdrop-blur",
@@ -9267,7 +9342,13 @@ var backgroundSlots = {
     menuSubTrigger: "text-white focus:bg-white/[0.10] focus:text-white data-[highlighted]:bg-white/[0.10] data-[highlighted]:text-white data-[state=open]:bg-white/[0.12]",
     menuSubTriggerIcon: "text-white/55",
     menuSubContent: "border-white/10 bg-slate-950 text-white shadow-2xl",
-    tableLoadingSkeleton: "bg-white/[0.14]"
+    tableLoadingSkeleton: "bg-white/[0.14]",
+    layoutRoot: "border-white/10 bg-slate-950 text-white shadow-none",
+    layoutPane: "border-white/10 bg-slate-950 text-white shadow-none",
+    layoutPaneMuted: "bg-white/[0.06]",
+    layoutPaneSoft: "bg-white/[0.08] shadow-none",
+    layoutResizeHandle: "text-white/65 hover:bg-white/10 active:bg-white/15 focus-visible:bg-white/10",
+    layoutResizeHandleIndicator: "bg-white/45 group-hover/resize:bg-white/75"
   }
 };
 var presetDefaults = {
@@ -9695,6 +9776,448 @@ react.forwardRef(
     );
   }
 );
+function normalizeValues(values) {
+  const nextValues = [];
+  const seen = /* @__PURE__ */ new Set();
+  values?.forEach((value) => {
+    if (seen.has(value)) return;
+    seen.add(value);
+    nextValues.push(value);
+  });
+  return nextValues;
+}
+function getNextEnabledIndex(options, currentIndex, direction) {
+  if (!options.length) return -1;
+  const startIndex = currentIndex >= 0 ? currentIndex : 0;
+  for (let offset = 1; offset <= options.length; offset += 1) {
+    const nextIndex = (startIndex + offset * direction + options.length) % options.length;
+    if (!options[nextIndex]?.disabled) {
+      return nextIndex;
+    }
+  }
+  return -1;
+}
+function getFirstEnabledIndex(options) {
+  return options.findIndex((option) => !option.disabled);
+}
+function getSafeTagCount(maxTagCount, total) {
+  if (maxTagCount === void 0) return total;
+  if (!Number.isFinite(maxTagCount)) return total;
+  return Math.max(0, Math.min(total, Math.floor(maxTagCount)));
+}
+function getDefaultRemoveLabel(option) {
+  return `Remove ${option.value}`;
+}
+react.forwardRef(
+  function BaseMultiSelect2({
+    options,
+    value,
+    defaultValue,
+    name,
+    placeholder = "Select options",
+    icon,
+    invalid = false,
+    disabled = false,
+    required = false,
+    openForPreview = false,
+    maxTagCount,
+    removeLabel = getDefaultRemoveLabel,
+    emptyLabel = "No options",
+    appearance,
+    className,
+    classNames,
+    style,
+    id,
+    "aria-invalid": nativeAriaInvalid,
+    "aria-label": nativeAriaLabel,
+    "aria-labelledby": nativeAriaLabelledBy,
+    onValueChange,
+    ...rootProps
+  }, ref) {
+    const theme = resolveBaseAppearance(appearance);
+    const generatedId = react.useId();
+    const multiSelectId = id ?? generatedId;
+    const controlId = `${multiSelectId}-control`;
+    const listboxId = `${multiSelectId}-listbox`;
+    const rootRef = react.useRef(null);
+    const optionList = options ?? [];
+    const forceOpen = openForPreview;
+    const [uncontrolledOpen, setUncontrolledOpen] = react.useState(false);
+    const open = forceOpen || uncontrolledOpen;
+    const [uncontrolledValue, setUncontrolledValue] = react.useState(
+      () => normalizeValues(defaultValue)
+    );
+    const [activeIndex, setActiveIndex] = react.useState(
+      () => getFirstEnabledIndex(optionList)
+    );
+    const isControlled = value !== void 0;
+    const selectedValues = react.useMemo(
+      () => normalizeValues(isControlled ? value : uncontrolledValue),
+      [isControlled, uncontrolledValue, value]
+    );
+    const selectedValueSet = react.useMemo(
+      () => new Set(selectedValues),
+      [selectedValues]
+    );
+    const optionByValue = react.useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      optionList.forEach((option) => {
+        if (!map.has(option.value)) {
+          map.set(option.value, option);
+        }
+      });
+      return map;
+    }, [optionList]);
+    const selectedOptions = react.useMemo(
+      () => selectedValues.map((selectedValue) => optionByValue.get(selectedValue)).filter(
+        (option) => option !== void 0
+      ),
+      [optionByValue, selectedValues]
+    );
+    const firstEnabledIndex = react.useMemo(
+      () => getFirstEnabledIndex(optionList),
+      [optionList]
+    );
+    const resolvedActiveIndex = activeIndex >= 0 && !optionList[activeIndex]?.disabled ? activeIndex : firstEnabledIndex;
+    const visibleTagCount = getSafeTagCount(
+      maxTagCount,
+      selectedOptions.length
+    );
+    const visibleOptions = selectedOptions.slice(0, visibleTagCount);
+    const overflowCount = selectedOptions.length - visibleOptions.length;
+    const isPlaceholder = selectedOptions.length === 0;
+    const setRootRef = (node) => {
+      rootRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    };
+    const setOpen = (nextOpen) => {
+      if (disabled || forceOpen) return;
+      setUncontrolledOpen(nextOpen);
+      if (nextOpen) {
+        setActiveIndex(resolvedActiveIndex);
+      }
+    };
+    react.useEffect(() => {
+      if (!open || forceOpen) return void 0;
+      const handlePointerDown = (event) => {
+        if (!rootRef.current?.contains(event.target)) {
+          setUncontrolledOpen(false);
+        }
+      };
+      document.addEventListener("pointerdown", handlePointerDown);
+      return () => {
+        document.removeEventListener("pointerdown", handlePointerDown);
+      };
+    }, [forceOpen, open]);
+    react.useEffect(() => {
+      if (resolvedActiveIndex >= 0 && resolvedActiveIndex !== activeIndex) {
+        setActiveIndex(resolvedActiveIndex);
+      }
+    }, [activeIndex, resolvedActiveIndex]);
+    const commitValues = (nextValues) => {
+      const normalizedValues = normalizeValues(nextValues);
+      if (!isControlled) {
+        setUncontrolledValue(normalizedValues);
+      }
+      onValueChange?.(normalizedValues);
+    };
+    const toggleOption = (option) => {
+      if (!option || option.disabled || disabled) return;
+      const nextValues = selectedValueSet.has(option.value) ? selectedValues.filter((selectedValue) => selectedValue !== option.value) : [...selectedValues, option.value];
+      commitValues(nextValues);
+    };
+    const removeOption = (option) => {
+      if (disabled) return;
+      commitValues(
+        selectedValues.filter((selectedValue) => selectedValue !== option.value)
+      );
+    };
+    const focusOption = (direction) => {
+      const nextIndex = getNextEnabledIndex(
+        optionList,
+        resolvedActiveIndex,
+        direction
+      );
+      if (nextIndex >= 0) {
+        setActiveIndex(nextIndex);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (disabled) return;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        if (!open) {
+          setOpen(true);
+          setActiveIndex(firstEnabledIndex);
+          return;
+        }
+        focusOption(event.key === "ArrowDown" ? 1 : -1);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        setOpen(true);
+        setActiveIndex(firstEnabledIndex);
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        setOpen(true);
+        for (let index = optionList.length - 1; index >= 0; index -= 1) {
+          if (!optionList[index]?.disabled) {
+            setActiveIndex(index);
+            break;
+          }
+        }
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        if (!open) {
+          setOpen(true);
+          return;
+        }
+        toggleOption(optionList[resolvedActiveIndex]);
+        return;
+      }
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ...rootProps,
+        id,
+        ref: setRootRef,
+        className: cn(
+          theme.slots.controlWrapper,
+          "overflow-visible",
+          open && "z-50",
+          invalid && theme.slots.controlInvalid,
+          disabled && theme.slots.controlDisabled,
+          classNames?.root,
+          className
+        ),
+        style: {
+          ...theme.styles.control,
+          ...invalid ? theme.styles.controlInvalid : void 0,
+          ...disabled ? theme.styles.controlDisabled : void 0,
+          ...style
+        },
+        children: [
+          hasRenderableNode(icon) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(theme.slots.controlIcon, classNames?.icon), children: icon }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: controlId,
+              role: "combobox",
+              tabIndex: disabled ? -1 : 0,
+              "aria-haspopup": "listbox",
+              "aria-expanded": open,
+              "aria-controls": listboxId,
+              "aria-disabled": disabled || void 0,
+              "aria-required": required || void 0,
+              "aria-invalid": nativeAriaInvalid ?? (invalid || void 0),
+              "aria-label": nativeAriaLabel,
+              "aria-labelledby": nativeAriaLabelledBy,
+              className: cn(
+                theme.slots.controlBase,
+                "flex min-h-9 cursor-pointer flex-wrap items-center gap-1.5 py-1.5 pr-9 text-left",
+                disabled && "!cursor-not-allowed",
+                classNames?.control
+              ),
+              onClick: () => setOpen(!open),
+              onKeyDown: handleKeyDown,
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: cn(
+                    "flex min-w-0 flex-1 flex-wrap items-center gap-1.5",
+                    classNames?.tagList
+                  ),
+                  children: [
+                    visibleOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+                      "span",
+                      {
+                        className: cn(
+                          "inline-flex max-w-full items-center gap-1 rounded-full border border-border/70 bg-muted/65 px-2 py-0.5 text-xs font-medium text-foreground",
+                          classNames?.tag
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              className: cn(
+                                "max-w-40 truncate",
+                                classNames?.tagLabel
+                              ),
+                              children: option.label
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              type: "button",
+                              "aria-label": removeLabel(option),
+                              disabled,
+                              className: cn(
+                                "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-background/80 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:!cursor-not-allowed",
+                                classNames?.tagRemove
+                              ),
+                              onClick: (event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                removeOption(option);
+                              },
+                              onMouseDown: (event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                              },
+                              onKeyDown: (event) => event.stopPropagation(),
+                              children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "x" })
+                            }
+                          )
+                        ]
+                      },
+                      option.value
+                    )),
+                    overflowCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
+                      "span",
+                      {
+                        className: cn(
+                          "inline-flex max-w-full items-center rounded-full border border-border/70 bg-muted/45 px-2 py-0.5 text-xs font-medium text-muted-foreground",
+                          classNames?.tag
+                        ),
+                        children: [
+                          "+",
+                          overflowCount
+                        ]
+                      }
+                    ) : null,
+                    isPlaceholder ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "min-w-0 truncate",
+                          theme.slots.selectPlaceholder,
+                          classNames?.placeholder
+                        ),
+                        children: placeholder
+                      }
+                    ) : null
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                theme.slots.selectChevron,
+                open && "rotate-[225deg]",
+                classNames?.chevron
+              )
+            }
+          ),
+          name ? selectedValues.map((selectedValue) => /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "hidden",
+              name,
+              value: selectedValue,
+              className: classNames?.hiddenInput
+            },
+            selectedValue
+          )) : null,
+          open ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: listboxId,
+              role: "listbox",
+              "aria-multiselectable": "true",
+              "aria-labelledby": controlId,
+              className: cn(theme.slots.selectMenu, classNames?.menu),
+              style: theme.styles.selectMenu,
+              children: optionList.length > 0 ? optionList.map((option, index) => {
+                const selected = selectedValueSet.has(option.value);
+                const active = index === resolvedActiveIndex;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": selected,
+                    disabled: option.disabled,
+                    className: cn(
+                      theme.slots.selectOption,
+                      "gap-2",
+                      active && theme.slots.selectOptionActive,
+                      selected && theme.slots.selectOptionSelected,
+                      option.disabled && theme.slots.selectOptionDisabled,
+                      classNames?.option
+                    ),
+                    style: {
+                      ...theme.styles.selectOption,
+                      ...active ? theme.styles.selectOptionActive : void 0,
+                      ...selected ? theme.styles.selectOptionSelected : void 0
+                    },
+                    onMouseEnter: () => {
+                      if (!option.disabled) {
+                        setActiveIndex(index);
+                      }
+                    },
+                    onMouseDown: (event) => event.preventDefault(),
+                    onClick: () => toggleOption(option),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          className: cn(
+                            "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-border/70 text-[10px]",
+                            selected && "border-primary/40 bg-primary text-primary-foreground",
+                            classNames?.optionIndicator
+                          ),
+                          children: selected ? "\u2713" : null
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "min-w-0 flex-1 truncate",
+                            classNames?.optionLabel
+                          ),
+                          children: option.label
+                        }
+                      )
+                    ]
+                  },
+                  option.value
+                );
+              }) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "px-2.5 py-2 text-sm text-muted-foreground",
+                    classNames?.empty
+                  ),
+                  children: emptyLabel
+                }
+              )
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
 function findOption(options, value) {
   if (value === void 0) return void 0;
   return options.find((option) => option.value === value);
@@ -9705,7 +10228,7 @@ function getInitialValue(options, defaultValue) {
   }
   return "";
 }
-function getNextEnabledIndex(options, currentIndex, direction) {
+function getNextEnabledIndex2(options, currentIndex, direction) {
   if (!options.length) return -1;
   for (let offset = 1; offset <= options.length; offset += 1) {
     const nextIndex = (currentIndex + offset * direction + options.length) % options.length;
@@ -9807,7 +10330,7 @@ react.forwardRef(
     };
     const focusOption = (direction) => {
       const currentIndex = activeIndex >= 0 ? activeIndex : 0;
-      const nextIndex = getNextEnabledIndex(optionList, currentIndex, direction);
+      const nextIndex = getNextEnabledIndex2(optionList, currentIndex, direction);
       if (nextIndex >= 0) {
         commitValue(optionList[nextIndex].value, optionList[nextIndex].disabled);
       }
@@ -10118,7 +10641,308 @@ react.forwardRef(
     );
   }
 );
-react.createContext(null);
+var DATA_TRANSFER_COLUMN_TYPE = "application/x-monkeys-base-table-column";
+var BaseTableContext = react.createContext(null);
+function useBaseTableContext(appearance) {
+  const context = react.useContext(BaseTableContext);
+  if (context) {
+    return {
+      ...context,
+      theme: appearance ? resolveBaseAppearance(appearance) : context.theme,
+      appearance: appearance ?? context.appearance
+    };
+  }
+  const theme = resolveBaseAppearance(appearance);
+  return {
+    appearance,
+    theme,
+    setDraggingColumnId: () => {
+    }
+  };
+}
+function toCssSize(value) {
+  if (value === void 0) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+function clampWidth(value, minWidth, maxWidth) {
+  const min5 = minWidth ?? 48;
+  const max5 = maxWidth ?? Number.POSITIVE_INFINITY;
+  return Math.min(Math.max(value, min5), max5);
+}
+function getNextColumnOrder(order, columnId, targetColumnId) {
+  if (!order || columnId === targetColumnId) return void 0;
+  const fromIndex = order.indexOf(columnId);
+  const toIndex = order.indexOf(targetColumnId);
+  if (fromIndex < 0 || toIndex < 0) return void 0;
+  const next = [...order];
+  const [moved] = next.splice(fromIndex, 1);
+  next.splice(toIndex, 0, moved);
+  return next;
+}
+function sortAriaValue(direction) {
+  switch (direction) {
+    case "asc":
+      return "ascending";
+    case "desc":
+      return "descending";
+    default:
+      return void 0;
+  }
+}
+function SortIndicator({
+  direction,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        className,
+        direction === "desc" && "rotate-180",
+        (!direction || direction === "none") && "opacity-45"
+      ),
+      children: "\u25B2"
+    }
+  );
+}
+function DragHandleIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": "true", className: "grid gap-0.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-current" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-current" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-current" })
+  ] });
+}
+react.forwardRef(function BaseTableHead2({
+  columnId,
+  align = "left",
+  icon,
+  label,
+  description,
+  meta,
+  actions,
+  trailing,
+  sortable,
+  sortDirection = "none",
+  sortLabel,
+  onSort,
+  draggable,
+  dragLabel,
+  resizable,
+  resizeLabel,
+  width,
+  minWidth,
+  maxWidth,
+  appearance,
+  className,
+  classNames,
+  style,
+  children,
+  onDragOver,
+  onDrop,
+  ...headProps
+}, forwardedRef) {
+  const tableContext = useBaseTableContext(appearance);
+  const { theme } = tableContext;
+  const headRef = react.useRef(null);
+  const setHeadRef = (node) => {
+    headRef.current = node;
+    if (typeof forwardedRef === "function") {
+      forwardedRef(node);
+    } else if (forwardedRef) {
+      forwardedRef.current = node;
+    }
+  };
+  const controlledWidth = columnId && tableContext.columnSizes?.[columnId] !== void 0 ? tableContext.columnSizes[columnId] : width;
+  const canDrag = Boolean(
+    columnId && draggable !== false && (draggable || tableContext.columnDragEnabled) && tableContext.columnOrder && tableContext.onColumnOrderChange
+  );
+  const canResize = Boolean(
+    columnId && resizable !== false && (resizable || tableContext.columnResizeEnabled) && tableContext.onColumnSizeChange
+  );
+  const interactiveSort = Boolean(sortable || onSort);
+  const ariaSort = sortAriaValue(sortDirection);
+  const content = hasRenderableNode(label) ? label : children;
+  const usesRichHeader = canDrag || hasRenderableNode(icon) || hasRenderableNode(label) || hasRenderableNode(description) || hasRenderableNode(meta) || hasRenderableNode(actions) || hasRenderableNode(trailing) || interactiveSort;
+  const renderedContent = usesRichHeader ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(theme.slots.tableHeadContent, classNames?.content), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(theme.slots.tableHeadMain, classNames?.main), children: [
+      canDrag ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          draggable: true,
+          title: dragLabel,
+          "aria-label": dragLabel ?? `Drag column ${columnId}`,
+          className: cn(theme.slots.tableHeadDragHandle, classNames?.dragHandle),
+          onClick: (event) => event.stopPropagation(),
+          onDragStart: (event) => {
+            event.stopPropagation();
+            tableContext.setDraggingColumnId(columnId);
+            event.dataTransfer.effectAllowed = "move";
+            event.dataTransfer.setData(DATA_TRANSFER_COLUMN_TYPE, columnId);
+          },
+          onDragEnd: (event) => {
+            event.stopPropagation();
+            tableContext.setDraggingColumnId(void 0);
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(DragHandleIcon, {})
+        }
+      ) : null,
+      icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(theme.slots.tableHeadIcon, classNames?.icon), children: icon }) : null,
+      interactiveSort ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          disabled: !onSort,
+          title: sortLabel,
+          className: cn(theme.slots.tableHeadSortButton, classNames?.sortButton),
+          onClick: (event) => {
+            event.stopPropagation();
+            onSort?.(columnId);
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(theme.slots.tableHeadText, classNames?.text), children: [
+              hasRenderableNode(content) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(theme.slots.tableHeadLabel, classNames?.label), children: content }) : null,
+              hasRenderableNode(description) ? /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    theme.slots.tableHeadDescription,
+                    classNames?.description
+                  ),
+                  children: description
+                }
+              ) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SortIndicator,
+              {
+                direction: sortDirection,
+                className: cn(theme.slots.tableHeadSortIcon, classNames?.sortIcon)
+              }
+            )
+          ]
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(theme.slots.tableHeadText, classNames?.text), children: [
+        hasRenderableNode(content) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(theme.slots.tableHeadLabel, classNames?.label), children: content }) : null,
+        hasRenderableNode(description) ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              theme.slots.tableHeadDescription,
+              classNames?.description
+            ),
+            children: description
+          }
+        ) : null
+      ] })
+    ] }),
+    hasRenderableNode(meta) || hasRenderableNode(actions) || hasRenderableNode(trailing) ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(theme.slots.tableHeadActions, classNames?.actions), children: [
+      hasRenderableNode(meta) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(theme.slots.tableHeadMeta, classNames?.meta), children: meta }) : null,
+      actions,
+      trailing
+    ] }) : null
+  ] }) : children;
+  const handleDragOver = (event) => {
+    onDragOver?.(event);
+    if (!canDrag || !tableContext.draggingColumnId || tableContext.draggingColumnId === columnId) {
+      return;
+    }
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+  };
+  const handleDrop = (event) => {
+    onDrop?.(event);
+    if (!canDrag || !columnId) return;
+    const sourceColumnId = tableContext.draggingColumnId || event.dataTransfer.getData(DATA_TRANSFER_COLUMN_TYPE);
+    if (!sourceColumnId || sourceColumnId === columnId) return;
+    const nextOrder = getNextColumnOrder(
+      tableContext.columnOrder,
+      sourceColumnId,
+      columnId
+    );
+    if (nextOrder) {
+      event.preventDefault();
+      tableContext.onColumnOrderChange?.(nextOrder, {
+        columnId: sourceColumnId,
+        targetColumnId: columnId
+      });
+    }
+    tableContext.setDraggingColumnId(void 0);
+  };
+  const handleResizePointerDown = (event) => {
+    if (!canResize || !columnId || !tableContext.onColumnSizeChange) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const startX = event.clientX;
+    const currentWidth = typeof controlledWidth === "number" ? controlledWidth : headRef.current?.offsetWidth ?? minWidth ?? 96;
+    const previousWidth = clampWidth(currentWidth, minWidth, maxWidth);
+    const pointerId = event.pointerId;
+    const target = event.currentTarget;
+    target.setPointerCapture?.(pointerId);
+    const handlePointerMove = (moveEvent) => {
+      const nextWidth = clampWidth(
+        previousWidth + moveEvent.clientX - startX,
+        minWidth,
+        maxWidth
+      );
+      tableContext.onColumnSizeChange?.(columnId, nextWidth, {
+        columnId,
+        previousWidth,
+        minWidth,
+        maxWidth
+      });
+    };
+    const cleanup = () => {
+      target.releasePointerCapture?.(pointerId);
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", cleanup);
+      window.removeEventListener("pointercancel", cleanup);
+    };
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", cleanup);
+    window.addEventListener("pointercancel", cleanup);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "th",
+    {
+      ...headProps,
+      ref: setHeadRef,
+      scope: headProps.scope ?? "col",
+      "aria-sort": ariaSort,
+      className: cn(
+        theme.slots.tableHead,
+        align === "center" && theme.slots.tableCellAlignCenter,
+        align === "right" && theme.slots.tableCellAlignRight,
+        classNames?.root,
+        className
+      ),
+      style: {
+        ...theme.styles.tableHead,
+        width: toCssSize(controlledWidth),
+        minWidth: toCssSize(minWidth),
+        maxWidth: toCssSize(maxWidth),
+        ...style
+      },
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      children: [
+        renderedContent,
+        canResize ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            title: resizeLabel,
+            "aria-label": resizeLabel ?? `Resize column ${columnId}`,
+            className: cn(theme.slots.tableHeadResizeHandle, classNames?.resizeHandle),
+            onClick: (event) => event.stopPropagation(),
+            onPointerDown: handleResizePointerDown
+          }
+        ) : null
+      ]
+    }
+  );
+});
 react.forwardRef(
   function BaseTextarea2({
     invalid = false,