@optilogic/core 1.2.2 → 1.2.3

package/dist/index.cjs

@@ -388,17 +388,26 @@ var SelectItem = React20__namespace.forwardRef(({ className, children, ...props
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-start rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center mt-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
     ]
   }
 ));
 SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
+var SelectItemDescription = React20__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "span",
+  {
+    ref,
+    className: cn("text-xs text-muted-foreground", className),
+    ...props
+  }
+));
+SelectItemDescription.displayName = "SelectItemDescription";
 var SelectSeparator = React20__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.Separator,
   {
@@ -409,41 +418,85 @@ var SelectSeparator = React20__namespace.forwardRef(({ className, ...props }, re
 ));
 SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
 var Tabs = TabsPrimitive__namespace.Root;
-var TabsList = React20__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var tabsListVariants = classVarianceAuthority.cva(
+  "inline-flex h-10 items-center justify-start bg-transparent",
+  {
+    variants: {
+      variant: {
+        default: "border-b border-border",
+        pill: "gap-1 rounded-lg bg-muted p-1",
+        unstyled: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var tabsTriggerVariants = classVarianceAuthority.cva(
+  [
+    "inline-flex items-center justify-center whitespace-nowrap",
+    "px-4 py-2.5 text-sm font-medium",
+    "transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "-mb-px",
+          "border-transparent text-muted-foreground",
+          "hover:text-foreground hover:border-muted-foreground/50",
+          "data-[state=active]:border-foreground data-[state=active]:text-foreground"
+        ],
+        pill: [
+          "rounded-md",
+          "text-muted-foreground",
+          "hover:text-foreground",
+          "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
+        ],
+        unstyled: [
+          "text-muted-foreground",
+          "hover:text-foreground",
+          "data-[state=active]:text-foreground"
+        ]
+      },
+      indicatorSize: {
+        sm: "border-b",
+        default: "border-b-2",
+        lg: "border-b-[3px]"
+      }
+    },
+    compoundVariants: [
+      { variant: "pill", indicatorSize: "sm", className: "border-b-0" },
+      { variant: "pill", indicatorSize: "default", className: "border-b-0" },
+      { variant: "pill", indicatorSize: "lg", className: "border-b-0" },
+      { variant: "unstyled", indicatorSize: "sm", className: "border-b-0" },
+      { variant: "unstyled", indicatorSize: "default", className: "border-b-0" },
+      { variant: "unstyled", indicatorSize: "lg", className: "border-b-0" }
+    ],
+    defaultVariants: {
+      variant: "default",
+      indicatorSize: "default"
+    }
+  }
+);
+var TabsList = React20__namespace.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.List,
   {
     ref,
-    className: cn(
-      "inline-flex h-10 items-center justify-start",
-      "border-b border-border",
-      "bg-transparent",
-      className
-    ),
+    className: cn(tabsListVariants({ variant }), className),
     ...props
   }
 ));
 TabsList.displayName = TabsPrimitive__namespace.List.displayName;
-var TabsTrigger = React20__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TabsTrigger = React20__namespace.forwardRef(({ className, variant, indicatorSize, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.Trigger,
   {
     ref,
     className: cn(
-      // Base styles
-      "inline-flex items-center justify-center whitespace-nowrap",
-      "px-4 py-2.5 text-sm font-medium",
-      "transition-colors",
-      // Border-bottom indicator style
-      "border-b-2 -mb-px",
-      // Default state
-      "border-transparent text-muted-foreground",
-      // Hover state
-      "hover:text-foreground hover:border-muted-foreground/50",
-      // Active/selected state
-      "data-[state=active]:border-foreground data-[state=active]:text-foreground",
-      // Focus styles
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      // Disabled styles
-      "disabled:pointer-events-none disabled:opacity-50",
+      tabsTriggerVariants({ variant, indicatorSize }),
       className
     ),
     ...props
@@ -456,7 +509,6 @@ var TabsContent = React20__namespace.forwardRef(({ className, ...props }, ref) =
     ref,
     className: cn(
       "mt-2",
-      // Focus styles
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className
     ),
@@ -3419,6 +3471,7 @@ function HeaderCell({
   sorting,
   filter,
   isResizable,
+  fillWidth,
   onSort,
   onFilterChange,
   onResizeMouseDown,
@@ -3462,7 +3515,8 @@ function HeaderCell({
     "div",
     {
       className: cn(
-        "relative flex-shrink-0 border-r border-border last:border-r-0",
+        "relative border-r border-border last:border-r-0",
+        !fillWidth && "flex-shrink-0",
         "bg-muted select-none",
         isResizing && "bg-accent/20"
       ),
@@ -4402,11 +4456,15 @@ function useColumnResizeManager(options) {
     resizableColumns,
     onColumnResize,
     onColumnResizeStart,
-    onColumnResizeEnd
+    onColumnResizeEnd,
+    fillWidth,
+    containerWidth,
+    effectiveColumnWidths
   } = options;
   const [resizingColumn, setResizingColumn] = React20.useState(null);
   const startXRef = React20.useRef(0);
   const startWidthRef = React20.useRef(0);
+  const startEffectiveWidthsRef = React20.useRef({});
   const getColumn = React20.useCallback(
     (columnKey) => {
       return columns.find((c) => c.key === columnKey);
@@ -4430,9 +4488,20 @@ function useColumnResizeManager(options) {
         resizingColumn,
         startWidthRef.current + deltaX
       );
+      if (fillWidth && containerWidth) {
+        const otherCols = columns.filter((c) => c.key !== resizingColumn);
+        const startEffective = startEffectiveWidthsRef.current;
+        const otherTotal = otherCols.reduce((s, c) => s + (startEffective[c.key] || 0), 0);
+        const remaining = containerWidth - newWidth;
+        for (const col of otherCols) {
+          const proportion = (startEffective[col.key] || 0) / otherTotal;
+          const adjusted = clampWidth(col.key, Math.floor(remaining * proportion));
+          onColumnResize(col.key, adjusted);
+        }
+      }
       onColumnResize(resizingColumn, newWidth);
     },
-    [resizingColumn, clampWidth, onColumnResize]
+    [resizingColumn, clampWidth, onColumnResize, fillWidth, containerWidth, columns]
   );
   const handleMouseUp = React20.useCallback(() => {
     if (!resizingColumn) return;
@@ -4466,6 +4535,9 @@ function useColumnResizeManager(options) {
         document.body.style.userSelect = "none";
         document.body.style.cursor = "col-resize";
         onColumnResizeStart?.(columnKey);
+        if (fillWidth && effectiveColumnWidths) {
+          startEffectiveWidthsRef.current = { ...effectiveColumnWidths };
+        }
       };
       const handleDoubleClick = (event) => {
         if (!isResizable) return;
@@ -4491,7 +4563,9 @@ function useColumnResizeManager(options) {
       resizingColumn,
       onColumnResize,
       onColumnResizeStart,
-      onColumnResizeEnd
+      onColumnResizeEnd,
+      fillWidth,
+      effectiveColumnWidths
     ]
   );
   return {
@@ -4716,6 +4790,7 @@ function DataGrid({
   tooltipMinLength = 30,
   enableKeyboardNavigation = true,
   showColumnBorders = true,
+  fillWidth,
   enableInternalSorting = true,
   enableInternalFiltering = true,
   // Controlled sorting
@@ -4770,6 +4845,16 @@ function DataGrid({
   const headerRef = React20__namespace.useRef(null);
   const [headerHeight, setHeaderHeight] = React20__namespace.useState(40);
   const [hoveredCell, setHoveredCell] = React20__namespace.useState(null);
+  const [containerWidth, setContainerWidth] = React20__namespace.useState(0);
+  React20__namespace.useLayoutEffect(() => {
+    if (!fillWidth || !parentRef.current) return;
+    const observer = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect.width;
+      if (w && w > 0) setContainerWidth(w);
+    });
+    observer.observe(parentRef.current);
+    return () => observer.disconnect();
+  }, [fillWidth]);
   const visibleColumns = React20__namespace.useMemo(
     () => columns.filter((col) => !col.hidden),
     [columns]
@@ -4823,14 +4908,6 @@ function DataGrid({
     visibleColumns
   ]);
   processedDataRef.current = processedData;
-  const { resizingColumn, getResizeProps } = useColumnResizeManager({
-    columns: visibleColumns,
-    columnWidths: state.columnWidths,
-    resizableColumns,
-    onColumnResize: actions.setColumnWidth,
-    onColumnResizeStart,
-    onColumnResizeEnd
-  });
   const shouldVirtualize = virtualized ?? processedData.length > 100;
   React20__namespace.useLayoutEffect(() => {
     if (headerRef.current && shouldVirtualize) {
@@ -4844,12 +4921,38 @@ function DataGrid({
     overscan: DEFAULT_OVERSCAN,
     enabled: shouldVirtualize
   });
-  const tableWidth = React20__namespace.useMemo(() => {
-    return visibleColumns.reduce((acc, col) => {
-      const width = state.columnWidths[col.key] || col.width || estimateColumnWidth(col);
-      return acc + width;
-    }, 0);
-  }, [visibleColumns, state.columnWidths]);
+  const { tableWidth, effectiveColumnWidths } = React20__namespace.useMemo(() => {
+    const rawWidths = {};
+    let rawTotal = 0;
+    for (const col of visibleColumns) {
+      const w = state.columnWidths[col.key] || col.width || estimateColumnWidth(col);
+      rawWidths[col.key] = w;
+      rawTotal += w;
+    }
+    if (!fillWidth || !containerWidth || rawTotal >= containerWidth) {
+      return { tableWidth: rawTotal, effectiveColumnWidths: rawWidths };
+    }
+    const scale = containerWidth / rawTotal;
+    const scaled = {};
+    for (const col of visibleColumns) {
+      let w = Math.floor(rawWidths[col.key] * scale);
+      if (col.minWidth) w = Math.max(w, col.minWidth);
+      if (col.maxWidth) w = Math.min(w, col.maxWidth);
+      scaled[col.key] = w;
+    }
+    return { tableWidth: containerWidth, effectiveColumnWidths: scaled };
+  }, [visibleColumns, state.columnWidths, fillWidth, containerWidth]);
+  const { resizingColumn, getResizeProps } = useColumnResizeManager({
+    columns: visibleColumns,
+    columnWidths: state.columnWidths,
+    resizableColumns,
+    onColumnResize: actions.setColumnWidth,
+    onColumnResizeStart,
+    onColumnResizeEnd,
+    fillWidth,
+    containerWidth,
+    effectiveColumnWidths
+  });
   const visibleRowCount = React20__namespace.useMemo(() => {
     if (!parentRef.current) return 10;
     return Math.floor(parentRef.current.clientHeight / DEFAULT_ROW_HEIGHT);
@@ -5081,7 +5184,7 @@ function DataGrid({
                         },
                         role: "row",
                         children: visibleColumns.map((column, colIndex) => {
-                          const width = state.columnWidths[column.key] || column.width || estimateColumnWidth(column);
+                          const width = effectiveColumnWidths[column.key];
                           const resizeProps = getResizeProps(column.key);
                           return /* @__PURE__ */ jsxRuntime.jsx(
                             HeaderCell,
@@ -5092,6 +5195,7 @@ function DataGrid({
                               sorting: getColumnSort(column.key),
                               filter: getColumnFilter(column.key),
                               isResizable: resizableColumns && column.resizable !== false,
+                              fillWidth,
                               onSort: () => handleSort(column.key),
                               onFilterChange: (filter) => handleFilterChange(column.key, filter),
                               onResizeMouseDown: resizeProps.handleMouseDown,
@@ -5140,7 +5244,7 @@ function DataGrid({
                           "aria-rowindex": virtualRow.index + 1,
                           "aria-selected": isSelected,
                           children: visibleColumns.map((column, colIndex) => {
-                            const width = state.columnWidths[column.key] || column.width || estimateColumnWidth(column);
+                            const width = effectiveColumnWidths[column.key];
                             const isEditingThisCell = state.editingCell?.rowIndex === virtualRow.index && state.editingCell?.columnKey === column.key;
                             const isFocused = state.focusedCell?.rowIndex === virtualRow.index && state.focusedCell?.columnKey === column.key;
                             const cellContent = renderCell(
@@ -5155,7 +5259,8 @@ function DataGrid({
                               "div",
                               {
                                 className: cn(
-                                  "flex-shrink-0 px-3 py-2 text-sm overflow-hidden",
+                                  "px-3 py-2 text-sm overflow-hidden",
+                                  !fillWidth && "flex-shrink-0",
                                   showColumnBorders && "border-r border-border last:border-r-0",
                                   isFocused && !isEditingThisCell && "ring-2 ring-inset ring-primary",
                                   isEditingThisCell && "ring-2 ring-inset ring-primary bg-background",
@@ -5267,7 +5372,7 @@ function DataGrid({
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-auto min-h-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: parentRef, className: "flex-1 overflow-auto min-h-0", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -5278,7 +5383,7 @@ function DataGrid({
               style: { width: tableWidth ? `${tableWidth}px` : "100%" },
               role: "row",
               children: visibleColumns.map((column, colIndex) => {
-                const width = state.columnWidths[column.key] || column.width || estimateColumnWidth(column);
+                const width = effectiveColumnWidths[column.key];
                 const resizeProps = getResizeProps(column.key);
                 return /* @__PURE__ */ jsxRuntime.jsx(
                   HeaderCell,
@@ -5289,6 +5394,7 @@ function DataGrid({
                     sorting: getColumnSort(column.key),
                     filter: getColumnFilter(column.key),
                     isResizable: resizableColumns && column.resizable !== false,
+                    fillWidth,
                     onSort: () => handleSort(column.key),
                     onFilterChange: (filter) => handleFilterChange(column.key, filter),
                     onResizeMouseDown: resizeProps.handleMouseDown,
@@ -5318,14 +5424,15 @@ function DataGrid({
                 onDoubleClick: () => onRowDoubleClick?.(row, rowIndex),
                 role: "row",
                 children: visibleColumns.map((column) => {
-                  const width = state.columnWidths[column.key] || column.width || estimateColumnWidth(column);
+                  const width = effectiveColumnWidths[column.key];
                   const isEditingThisCell = state.editingCell?.rowIndex === rowIndex && state.editingCell?.columnKey === column.key;
                   const isFocused = state.focusedCell?.rowIndex === rowIndex && state.focusedCell?.columnKey === column.key;
                   return /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
                       className: cn(
-                        "flex-shrink-0 px-3 py-2 text-sm overflow-hidden",
+                        "px-3 py-2 text-sm overflow-hidden",
+                        !fillWidth && "flex-shrink-0",
                         showColumnBorders && "border-r border-border last:border-r-0",
                         isFocused && !isEditingThisCell && "ring-2 ring-inset ring-primary",
                         isEditingThisCell && "ring-2 ring-inset ring-primary bg-background",
@@ -5650,6 +5757,504 @@ function Autocomplete({
     )
   ] });
 }
+function MultiSelect({
+  options,
+  value,
+  onChange,
+  placeholder = "Select items...",
+  searchPlaceholder = "Search...",
+  emptyText = "No options found.",
+  disabled = false,
+  className,
+  clearable = true,
+  maxDisplayItems = 3,
+  showSelectAll = false,
+  selectAllLabel = "Select all"
+}) {
+  const [open, setOpen] = React20__namespace.useState(false);
+  const [search, setSearch] = React20__namespace.useState("");
+  const inputRef = React20__namespace.useRef(null);
+  const safeOptions = options ?? [];
+  const safeValue = value ?? [];
+  const selectedSet = React20__namespace.useMemo(() => new Set(safeValue), [safeValue]);
+  const filteredOptions = React20__namespace.useMemo(() => {
+    if (!search.trim()) return safeOptions;
+    const searchLower = search.toLowerCase();
+    return safeOptions.filter(
+      (opt) => opt.label.toLowerCase().includes(searchLower) || opt.description?.toLowerCase().includes(searchLower)
+    );
+  }, [safeOptions, search]);
+  const groupedOptions = React20__namespace.useMemo(() => {
+    const groups = {};
+    const ungrouped = [];
+    filteredOptions.forEach((opt) => {
+      if (opt.group) {
+        if (!groups[opt.group]) groups[opt.group] = [];
+        groups[opt.group].push(opt);
+      } else {
+        ungrouped.push(opt);
+      }
+    });
+    return { groups, ungrouped };
+  }, [filteredOptions]);
+  const hasGroups = Object.keys(groupedOptions.groups).length > 0;
+  const selectableFiltered = React20__namespace.useMemo(
+    () => filteredOptions.filter((opt) => !opt.disabled),
+    [filteredOptions]
+  );
+  const allFilteredSelected = React20__namespace.useMemo(
+    () => selectableFiltered.length > 0 && selectableFiltered.every((opt) => selectedSet.has(opt.value)),
+    [selectableFiltered, selectedSet]
+  );
+  const someFilteredSelected = React20__namespace.useMemo(
+    () => !allFilteredSelected && selectableFiltered.some((opt) => selectedSet.has(opt.value)),
+    [selectableFiltered, selectedSet, allFilteredSelected]
+  );
+  const handleToggle = React20__namespace.useCallback(
+    (optionValue) => {
+      const next = selectedSet.has(optionValue) ? safeValue.filter((v) => v !== optionValue) : [...safeValue, optionValue];
+      onChange?.(next);
+    },
+    [onChange, safeValue, selectedSet]
+  );
+  const handleRemove = React20__namespace.useCallback(
+    (optionValue, e) => {
+      e.stopPropagation();
+      onChange?.(safeValue.filter((v) => v !== optionValue));
+    },
+    [onChange, safeValue]
+  );
+  const handleClearAll = React20__namespace.useCallback(
+    (e) => {
+      e.stopPropagation();
+      onChange?.([]);
+    },
+    [onChange]
+  );
+  const handleSelectAll = React20__namespace.useCallback(() => {
+    if (allFilteredSelected) {
+      const filteredValues = new Set(selectableFiltered.map((o) => o.value));
+      onChange?.(safeValue.filter((v) => !filteredValues.has(v)));
+    } else {
+      const existing = new Set(safeValue);
+      const next = [...safeValue];
+      for (const opt of selectableFiltered) {
+        if (!existing.has(opt.value)) {
+          next.push(opt.value);
+        }
+      }
+      onChange?.(next);
+    }
+  }, [allFilteredSelected, selectableFiltered, safeValue, onChange]);
+  React20__namespace.useEffect(() => {
+    if (open) {
+      const timeout = setTimeout(() => inputRef.current?.focus(), 0);
+      return () => clearTimeout(timeout);
+    } else {
+      setSearch("");
+    }
+  }, [open]);
+  const handleKeyDown = React20__namespace.useCallback((e) => {
+    if (e.key === "Escape") setOpen(false);
+  }, []);
+  const selectedLabels = React20__namespace.useMemo(
+    () => safeValue.map((v) => safeOptions.find((o) => o.value === v)?.label ?? v).slice(0, maxDisplayItems),
+    [safeValue, safeOptions, maxDisplayItems]
+  );
+  const overflow = safeValue.length - maxDisplayItems;
+  const isSearching = search.trim().length > 0;
+  const renderOption = (option) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      disabled: option.disabled,
+      onClick: () => handleToggle(option.value),
+      className: cn(
+        "relative flex w-full cursor-pointer select-none items-start gap-2 rounded-sm px-2 py-1.5 text-sm outline-none",
+        "hover:bg-accent hover:text-accent-foreground",
+        option.disabled && "pointer-events-none opacity-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Checkbox,
+          {
+            checked: selectedSet.has(option.value),
+            tabIndex: -1,
+            className: "mt-0.5 pointer-events-none"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate", children: option.label }),
+          option.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground truncate", children: option.description })
+        ] })
+      ]
+    },
+    option.value
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        disabled,
+        className: cn(
+          "flex min-h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm ring-offset-background",
+          "hover:border-input-hover",
+          "focus:outline-none focus:ring-1 focus:ring-ring",
+          "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-input",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-wrap gap-1 items-center min-w-0", children: safeValue.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            selectedLabels.map((label, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                className: "inline-flex items-center gap-0.5 rounded-sm bg-accent px-1.5 py-0.5 text-xs font-medium text-accent-foreground",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate max-w-[100px]", children: label }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      role: "button",
+                      tabIndex: -1,
+                      onClick: (e) => handleRemove(safeValue[i], e),
+                      className: "rounded-sm hover:bg-foreground/10 p-0.5",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" })
+                    }
+                  )
+                ]
+              },
+              safeValue[i]
+            )),
+            overflow > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+              "+",
+              overflow
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+            clearable && safeValue.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                role: "button",
+                tabIndex: -1,
+                onClick: handleClearAll,
+                className: "rounded-sm hover:bg-muted p-0.5",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3.5 w-3.5 text-muted-foreground" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 opacity-50" })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      PopoverContent,
+      {
+        className: "w-[--radix-popover-trigger-width] p-0",
+        align: "start",
+        sideOffset: 4,
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b border-border px-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                value: search,
+                onChange: (e) => setSearch(e.target.value),
+                placeholder: searchPlaceholder,
+                className: "flex h-9 w-full bg-transparent py-2 text-sm outline-none placeholder:text-muted-foreground"
+              }
+            ),
+            search && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setSearch(""),
+                className: "p-1 hover:bg-muted rounded-sm",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3.5 w-3.5 text-muted-foreground" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-[300px] overflow-y-auto p-1", children: [
+            showSelectAll && selectableFiltered.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleSelectAll,
+                  className: cn(
+                    "relative flex w-full cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none",
+                    "hover:bg-accent hover:text-accent-foreground"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Checkbox,
+                      {
+                        checked: allFilteredSelected ? true : someFilteredSelected ? "indeterminate" : false,
+                        tabIndex: -1,
+                        className: "pointer-events-none"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: isSearching ? `${selectAllLabel} (filtered)` : selectAllLabel })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-mx-1 my-1 h-px bg-border" })
+            ] }),
+            filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center text-sm text-muted-foreground", children: emptyText }) : hasGroups ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              groupedOptions.ungrouped.map(renderOption),
+              Object.entries(groupedOptions.groups).map(([group, opts]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground", children: group }),
+                opts.map(renderOption)
+              ] }, group))
+            ] }) : filteredOptions.map(renderOption)
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+MultiSelect.displayName = "MultiSelect";
+function Combobox({
+  options,
+  value,
+  onChange,
+  onInputChange,
+  placeholder = "Type or select...",
+  emptyText = "No options found.",
+  disabled = false,
+  className,
+  clearable = false,
+  allowCustomValue = true
+}) {
+  const [open, setOpen] = React20__namespace.useState(false);
+  const [inputValue, setInputValue] = React20__namespace.useState("");
+  const inputRef = React20__namespace.useRef(null);
+  const wrapperRef = React20__namespace.useRef(null);
+  const selectedOption = React20__namespace.useMemo(
+    () => options.find((opt) => opt.value === value),
+    [options, value]
+  );
+  React20__namespace.useEffect(() => {
+    if (!open) {
+      setInputValue(selectedOption?.label ?? value ?? "");
+    }
+  }, [value, selectedOption, open]);
+  const filteredOptions = React20__namespace.useMemo(() => {
+    if (!inputValue.trim()) return options;
+    const searchLower = inputValue.toLowerCase();
+    return options.filter(
+      (opt) => opt.label.toLowerCase().includes(searchLower) || opt.description?.toLowerCase().includes(searchLower)
+    );
+  }, [options, inputValue]);
+  const groupedOptions = React20__namespace.useMemo(() => {
+    const groups = {};
+    const ungrouped = [];
+    filteredOptions.forEach((opt) => {
+      if (opt.group) {
+        if (!groups[opt.group]) groups[opt.group] = [];
+        groups[opt.group].push(opt);
+      } else {
+        ungrouped.push(opt);
+      }
+    });
+    return { groups, ungrouped };
+  }, [filteredOptions]);
+  const hasGroups = Object.keys(groupedOptions.groups).length > 0;
+  const handleInputChange = React20__namespace.useCallback(
+    (e) => {
+      const newValue = e.target.value;
+      setInputValue(newValue);
+      onInputChange?.(newValue);
+      if (!open) setOpen(true);
+    },
+    [onInputChange, open]
+  );
+  const handleSelect = React20__namespace.useCallback(
+    (optionValue) => {
+      const option = options.find((o) => o.value === optionValue);
+      onChange?.(optionValue);
+      setInputValue(option?.label ?? optionValue);
+      setOpen(false);
+    },
+    [onChange, options]
+  );
+  const handleClear = React20__namespace.useCallback(
+    (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      onChange?.(void 0);
+      setInputValue("");
+      inputRef.current?.focus();
+    },
+    [onChange]
+  );
+  const handleFocus = React20__namespace.useCallback(() => {
+    setOpen(true);
+    inputRef.current?.select();
+  }, []);
+  const handleBlur = React20__namespace.useCallback(() => {
+    setTimeout(() => {
+      if (!wrapperRef.current?.contains(document.activeElement)) {
+        setOpen(false);
+      }
+      if (allowCustomValue && inputValue.trim()) {
+        const matchingOption = options.find(
+          (opt) => opt.label.toLowerCase() === inputValue.toLowerCase()
+        );
+        if (matchingOption) {
+          onChange?.(matchingOption.value);
+          setInputValue(matchingOption.label);
+        } else {
+          onChange?.(inputValue.trim());
+        }
+      } else if (!allowCustomValue) {
+        setInputValue(selectedOption?.label ?? "");
+      }
+    }, 200);
+  }, [allowCustomValue, inputValue, options, onChange, selectedOption]);
+  const handleKeyDown = React20__namespace.useCallback(
+    (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+        setInputValue(selectedOption?.label ?? value ?? "");
+        inputRef.current?.blur();
+      } else if (e.key === "Enter" && open) {
+        e.preventDefault();
+        if (filteredOptions.length === 1) {
+          handleSelect(filteredOptions[0].value);
+        } else if (allowCustomValue && inputValue.trim()) {
+          const exactMatch = filteredOptions.find(
+            (opt) => opt.label.toLowerCase() === inputValue.toLowerCase()
+          );
+          if (exactMatch) {
+            handleSelect(exactMatch.value);
+          } else {
+            onChange?.(inputValue.trim());
+            setOpen(false);
+          }
+        }
+      }
+    },
+    [
+      open,
+      filteredOptions,
+      handleSelect,
+      allowCustomValue,
+      inputValue,
+      onChange,
+      selectedOption,
+      value
+    ]
+  );
+  const renderOption = (option) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      disabled: option.disabled,
+      onMouseDown: (e) => e.preventDefault(),
+      onClick: () => handleSelect(option.value),
+      className: cn(
+        "relative flex w-full cursor-pointer select-none items-start gap-2 rounded-sm px-2 py-1.5 text-sm outline-none",
+        "hover:bg-accent hover:text-accent-foreground",
+        "focus:bg-accent focus:text-accent-foreground",
+        option.disabled && "pointer-events-none opacity-50",
+        value === option.value && "bg-accent/50"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-4 items-center justify-center flex-shrink-0 mt-0.5", children: value === option.value && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate", children: option.label }),
+          option.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground truncate", children: option.description })
+        ] })
+      ]
+    },
+    option.value
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: wrapperRef,
+        className: cn(
+          "flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 text-sm shadow-sm ring-offset-background",
+          "hover:border-input-hover",
+          "focus-within:outline-none focus-within:ring-1 focus-within:ring-ring",
+          disabled && "cursor-not-allowed opacity-50 hover:border-input",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value: inputValue,
+              onChange: handleInputChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              placeholder,
+              disabled,
+              className: "flex-1 min-w-0 bg-transparent py-2 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
+              role: "combobox",
+              "aria-expanded": open,
+              "aria-haspopup": "listbox",
+              "aria-autocomplete": "list"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+            clearable && value && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                role: "button",
+                tabIndex: -1,
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: handleClear,
+                className: "rounded-sm hover:bg-muted p-0.5",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3.5 w-3.5 text-muted-foreground" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 opacity-50" })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PopoverContent,
+      {
+        className: "p-0",
+        style: { width: wrapperRef.current?.offsetWidth },
+        align: "start",
+        sideOffset: 4,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        onFocusOutside: (e) => {
+          if (wrapperRef.current?.contains(e.target)) {
+            e.preventDefault();
+          }
+        },
+        onInteractOutside: (e) => {
+          if (wrapperRef.current?.contains(e.target)) {
+            e.preventDefault();
+          }
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[300px] overflow-y-auto p-1", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center text-sm text-muted-foreground", children: emptyText }) : hasGroups ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          groupedOptions.ungrouped.map(renderOption),
+          Object.entries(groupedOptions.groups).map(([group, opts]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground", children: group }),
+            opts.map(renderOption)
+          ] }, group))
+        ] }) : filteredOptions.map(renderOption) })
+      }
+    )
+  ] });
+}
+Combobox.displayName = "Combobox";
 var iconButtonVariants = classVarianceAuthority.cva(
   // Base styles
   [
@@ -7963,6 +8568,7 @@ exports.CellEditor = CellEditor;
 exports.Checkbox = Checkbox;
 exports.Chip = Chip;
 exports.CodeRenderer = CodeRenderer;
+exports.Combobox = Combobox;
 exports.ConfirmationModal = ConfirmationModal;
 exports.ContextMenu = ContextMenu;
 exports.CopyButton = CopyButton;
@@ -8005,6 +8611,7 @@ exports.MODERN_LIGHT_THEME = MODERN_LIGHT_THEME;
 exports.MarkdownRenderer = MarkdownRenderer;
 exports.Modal = Modal;
 exports.ModalButton = ModalButton;
+exports.MultiSelect = MultiSelect;
 exports.OPTILOGIC_DARK_THEME = OPTILOGIC_DARK_THEME;
 exports.OPTILOGIC_LEGACY_THEME = OPTILOGIC_LEGACY_THEME;
 exports.OptilogicLogo = OptilogicLogo;
@@ -8022,6 +8629,7 @@ exports.Select = Select;
 exports.SelectContent = SelectContent;
 exports.SelectGroup = SelectGroup;
 exports.SelectItem = SelectItem;
+exports.SelectItemDescription = SelectItemDescription;
 exports.SelectLabel = SelectLabel;
 exports.SelectScrollDownButton = SelectScrollDownButton;
 exports.SelectScrollUpButton = SelectScrollUpButton;
@@ -8089,6 +8697,8 @@ exports.labelVariants = labelVariants;
 exports.loadingSpinnerVariants = loadingSpinnerVariants;
 exports.mergeRenderers = mergeRenderers;
 exports.resolveRenderer = resolveRenderer;
+exports.tabsListVariants = tabsListVariants;
+exports.tabsTriggerVariants = tabsTriggerVariants;
 exports.themeToHsl = themeToHsl;
 exports.useColumnResize = useColumnResize;
 exports.useColumnResizeManager = useColumnResizeManager;