@dimaan/ui 0.0.27 → 0.0.28

package/dist/index.d.cts

@@ -213,6 +213,23 @@ interface SidebarNavGroupProps extends Omit<ButtonHTMLAttributes<HTMLButtonEleme
     onOpenChange?: (open: boolean) => void;
     children: ReactNode;
 }
+/**
+ * Collapsible group of nav links inside a `<SidebarNav>`.
+ *
+ * Route-aware out of the box: when one of its `<SidebarNavItem>` children
+ * matches the current route, the group auto-opens and highlights itself — no
+ * need to wire `active`/`open` by hand. It opens on navigation into a child but
+ * stays user-closable; pass `open`/`onOpenChange` for full control, or
+ * `defaultOpen` / `active` to override the initial/derived state.
+ *
+ * @example
+ * ```tsx
+ * <SidebarNavGroup label="Platform" icon={<Settings />}>
+ *   <SidebarNavItem to="/platform/branches">Branches</SidebarNavItem>
+ *   <SidebarNavItem to="/platform/warehouses">Warehouses</SidebarNavItem>
+ * </SidebarNavGroup>
+ * ```
+ */
 declare function SidebarNavGroup({ icon, label, endSlot, active, defaultOpen, open: openProp, onOpenChange, className, children, onClick, ...props }: SidebarNavGroupProps): react_jsx_runtime.JSX.Element;
 
 type SidebarNavItemRenderProps = {
@@ -1538,6 +1555,17 @@ interface SelectProps {
     options?: SelectOptions;
     /** Placeholder shown when no value is selected. */
     placeholder?: string;
+    /**
+     * Show a loading indicator — in the trigger (when a `value` is set but its
+     * option hasn't arrived yet) and as a row inside the popup. Use it while the
+     * `options` are still being fetched so the control reads as "loading" instead
+     * of blank. Flip back to `false` once the data lands.
+     */
+    loading?: boolean;
+    /** Message shown while `loading`. Defaults to `'Loading…'`. */
+    loadingText?: ReactNode;
+    /** Message shown when `options` is empty (and not loading). Defaults to `'No options'`. */
+    emptyText?: ReactNode;
     /** Controlled value. */
     value?: string;
     /** Initial value for uncontrolled usage. */
@@ -1598,6 +1626,19 @@ interface SelectProps {
  *   { label: 'Levant', options: [{ value: 'jo', label: 'Jordan' }] },
  * ]} />
  * ```
+ *
+ * @example Async options (edit page) — show loading, then the fetched value
+ * ```tsx
+ * <Select
+ *   options={categories}            // [] until the request resolves
+ *   loading={isLoading}             // spinner in the trigger + popup meanwhile
+ *   value={String(item.categoryId)} // ⚠️ value must be a string that matches an option's value
+ *   onValueChange={(v) => setCategoryId(Number(v))}
+ *   placeholder="Category"
+ *   loadingText="جارٍ التحميل…"
+ *   emptyText="لا توجد عناصر"
+ * />
+ * ```
  */
 declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
 
@@ -1811,6 +1852,8 @@ interface MultiSelectLabels {
     search?: string;
     /** Empty-state text when the search matches nothing. Default: `"No results"` / `"لا نتائج"`. */
     empty?: string;
+    /** Loading text shown while `loading`. Default: `"Loading…"` / `"جارٍ التحميل…"`. */
+    loading?: string;
 }
 interface MultiSelectProps {
     variant?: SelectVariant;
@@ -1820,6 +1863,12 @@ interface MultiSelectProps {
     options: SelectOption[];
     /** Placeholder shown when nothing is selected. */
     placeholder?: string;
+    /**
+     * Show a loading indicator — in the trigger and as a row inside the popup —
+     * while the `options` are still being fetched. Flip back to `false` once the
+     * data lands. The empty state (`labels.empty`) covers a resolved empty list.
+     */
+    loading?: boolean;
     /** Controlled value (array of selected option values). */
     value?: string[];
     /** Initial value for uncontrolled usage. */
@@ -1876,6 +1925,17 @@ interface MultiSelectProps {
  *   aria-label="Roles filter"
  * />
  * ```
+ *
+ * @example Async options — show loading while fetching
+ * ```tsx
+ * <MultiSelect
+ *   options={roleOptions}       // [] until the request resolves
+ *   loading={isLoading}         // spinner in the trigger + popup meanwhile
+ *   value={roleIds.map(String)} // ⚠️ values must be strings matching option values
+ *   onValueChange={setRoleIds}
+ *   placeholder="Roles"
+ * />
+ * ```
  */
 declare const MultiSelect: react.ForwardRefExoticComponent<MultiSelectProps & react.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -213,6 +213,23 @@ interface SidebarNavGroupProps extends Omit<ButtonHTMLAttributes<HTMLButtonEleme
     onOpenChange?: (open: boolean) => void;
     children: ReactNode;
 }
+/**
+ * Collapsible group of nav links inside a `<SidebarNav>`.
+ *
+ * Route-aware out of the box: when one of its `<SidebarNavItem>` children
+ * matches the current route, the group auto-opens and highlights itself — no
+ * need to wire `active`/`open` by hand. It opens on navigation into a child but
+ * stays user-closable; pass `open`/`onOpenChange` for full control, or
+ * `defaultOpen` / `active` to override the initial/derived state.
+ *
+ * @example
+ * ```tsx
+ * <SidebarNavGroup label="Platform" icon={<Settings />}>
+ *   <SidebarNavItem to="/platform/branches">Branches</SidebarNavItem>
+ *   <SidebarNavItem to="/platform/warehouses">Warehouses</SidebarNavItem>
+ * </SidebarNavGroup>
+ * ```
+ */
 declare function SidebarNavGroup({ icon, label, endSlot, active, defaultOpen, open: openProp, onOpenChange, className, children, onClick, ...props }: SidebarNavGroupProps): react_jsx_runtime.JSX.Element;
 
 type SidebarNavItemRenderProps = {
@@ -1538,6 +1555,17 @@ interface SelectProps {
     options?: SelectOptions;
     /** Placeholder shown when no value is selected. */
     placeholder?: string;
+    /**
+     * Show a loading indicator — in the trigger (when a `value` is set but its
+     * option hasn't arrived yet) and as a row inside the popup. Use it while the
+     * `options` are still being fetched so the control reads as "loading" instead
+     * of blank. Flip back to `false` once the data lands.
+     */
+    loading?: boolean;
+    /** Message shown while `loading`. Defaults to `'Loading…'`. */
+    loadingText?: ReactNode;
+    /** Message shown when `options` is empty (and not loading). Defaults to `'No options'`. */
+    emptyText?: ReactNode;
     /** Controlled value. */
     value?: string;
     /** Initial value for uncontrolled usage. */
@@ -1598,6 +1626,19 @@ interface SelectProps {
  *   { label: 'Levant', options: [{ value: 'jo', label: 'Jordan' }] },
  * ]} />
  * ```
+ *
+ * @example Async options (edit page) — show loading, then the fetched value
+ * ```tsx
+ * <Select
+ *   options={categories}            // [] until the request resolves
+ *   loading={isLoading}             // spinner in the trigger + popup meanwhile
+ *   value={String(item.categoryId)} // ⚠️ value must be a string that matches an option's value
+ *   onValueChange={(v) => setCategoryId(Number(v))}
+ *   placeholder="Category"
+ *   loadingText="جارٍ التحميل…"
+ *   emptyText="لا توجد عناصر"
+ * />
+ * ```
  */
 declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
 
@@ -1811,6 +1852,8 @@ interface MultiSelectLabels {
     search?: string;
     /** Empty-state text when the search matches nothing. Default: `"No results"` / `"لا نتائج"`. */
     empty?: string;
+    /** Loading text shown while `loading`. Default: `"Loading…"` / `"جارٍ التحميل…"`. */
+    loading?: string;
 }
 interface MultiSelectProps {
     variant?: SelectVariant;
@@ -1820,6 +1863,12 @@ interface MultiSelectProps {
     options: SelectOption[];
     /** Placeholder shown when nothing is selected. */
     placeholder?: string;
+    /**
+     * Show a loading indicator — in the trigger and as a row inside the popup —
+     * while the `options` are still being fetched. Flip back to `false` once the
+     * data lands. The empty state (`labels.empty`) covers a resolved empty list.
+     */
+    loading?: boolean;
     /** Controlled value (array of selected option values). */
     value?: string[];
     /** Initial value for uncontrolled usage. */
@@ -1876,6 +1925,17 @@ interface MultiSelectProps {
  *   aria-label="Roles filter"
  * />
  * ```
+ *
+ * @example Async options — show loading while fetching
+ * ```tsx
+ * <MultiSelect
+ *   options={roleOptions}       // [] until the request resolves
+ *   loading={isLoading}         // spinner in the trigger + popup meanwhile
+ *   value={roleIds.map(String)} // ⚠️ values must be strings matching option values
+ *   onValueChange={setRoleIds}
+ *   placeholder="Roles"
+ * />
+ * ```
  */
 declare const MultiSelect: react.ForwardRefExoticComponent<MultiSelectProps & react.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -5,7 +5,7 @@ import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Loader2, Check, Minus, Calendar, X, ChevronLeft, ChevronRight, Upload, File as File$1, ChevronDown, Search, ChevronUp, ArrowLeft, Menu, FileQuestion, ChevronsUpDown, Inbox, RefreshCw, SearchX, Trash2, Pencil, Eye } from 'lucide-react';
 import { DirectionProvider } from '@radix-ui/react-direction';
-import { Link, useLocation, useResolvedPath, useNavigate } from 'react-router-dom';
+import { Link, useResolvedPath, useMatch, useNavigate } from 'react-router-dom';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { DayPicker } from 'react-day-picker';
 import * as RadixDialog from '@radix-ui/react-dialog';
@@ -574,6 +574,7 @@ function SidebarHeader({ className, children, ...props }) {
 function SidebarNav({ className, children, ...props }) {
   return /* @__PURE__ */ jsx("nav", { className: cn("flex flex-1 flex-col gap-1 overflow-y-auto p-2", className), ...props, children });
 }
+var SidebarNavGroupContext = createContext(null);
 function SidebarNavGroup({
   icon,
   label,
@@ -599,19 +600,39 @@ function SidebarNavGroup({
     },
     [isControlled, onOpenChange]
   );
+  const [activeChildIds, setActiveChildIds] = useState(() => /* @__PURE__ */ new Set());
+  const reportActive = useCallback((id, isItemActive) => {
+    setActiveChildIds((prev) => {
+      if (isItemActive === prev.has(id)) return prev;
+      const next = new Set(prev);
+      if (isItemActive) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+  }, []);
+  const contextValue = useMemo(() => ({ reportActive }), [reportActive]);
+  const hasActiveChild = activeChildIds.size > 0;
+  const isActive = active || hasActiveChild;
+  const prevHasActiveChild = useRef(false);
+  useEffect(() => {
+    if (hasActiveChild && !prevHasActiveChild.current && !collapsed) {
+      setOpen(true);
+    }
+    prevHasActiveChild.current = hasActiveChild;
+  }, [hasActiveChild, collapsed, setOpen]);
   useEffect(() => {
     if (collapsed && open) setOpen(false);
   }, [collapsed, open, setOpen]);
   const titleAttr = collapsed && typeof label === "string" ? label : props.title ?? void 0;
   const showChildren = !collapsed;
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col", children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
         "aria-expanded": showChildren ? open : void 0,
         "aria-controls": showChildren ? submenuId : void 0,
-        "data-active": active ? "true" : void 0,
+        "data-active": isActive ? "true" : void 0,
         title: titleAttr,
         onClick: (e) => {
           if (showChildren) setOpen(!open);
@@ -621,12 +642,19 @@ function SidebarNavGroup({
           "group relative flex h-9 w-full items-center gap-3 rounded-md px-3 text-sm font-medium outline-none transition-colors",
           "text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-sidebar",
-          active && "bg-sidebar-accent text-sidebar-accent-foreground",
+          isActive && "bg-sidebar-accent text-sidebar-accent-foreground",
           collapsed && "justify-center px-0",
           className
         ),
         ...props,
         children: [
+          isActive ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "absolute inset-y-1.5 start-0 w-1 rounded-full bg-primary"
+            }
+          ) : null,
           icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }) : null,
           /* @__PURE__ */ jsx(
             "span",
@@ -652,7 +680,7 @@ function SidebarNavGroup({
           "grid transition-[grid-template-rows] duration-200 ease-out",
           showChildren && open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
         ),
-        children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5 ps-7 pt-1", children }) })
+        children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5 ps-7 pt-1", children: /* @__PURE__ */ jsx(SidebarNavGroupContext.Provider, { value: contextValue, children }) }) })
       }
     )
   ] });
@@ -682,13 +710,20 @@ function SidebarNavItem({
   ...props
 }) {
   const { collapsed } = useDashboardLayout();
-  const location = useLocation();
   const resolved = useResolvedPath(to);
-  const isActive = forcedActive || (end ? location.pathname === resolved.pathname : location.pathname.startsWith(resolved.pathname));
+  const group = useContext(SidebarNavGroupContext);
+  const itemId = useId();
+  const routeMatch = useMatch({ path: resolved.pathname, end: end ?? false });
+  const isActive = forcedActive || routeMatch != null;
+  useEffect(() => {
+    if (!group) return;
+    group.reportActive(itemId, isActive);
+    return () => group.reportActive(itemId, false);
+  }, [group, itemId, isActive]);
   const labelContent = label ?? children;
   const titleAttr = collapsed && typeof labelContent === "string" ? labelContent : props.title;
   const getClassName = (active) => cn(
-    "group relative flex h-9 items-center gap-3 rounded-md px-3 text-sm font-medium outline-none transition-colors",
+    "group relative flex h-9 shrink-0 items-center gap-3 rounded-md px-3 text-sm font-medium outline-none transition-colors",
     "text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
     "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-sidebar",
     active && "bg-sidebar-accent text-sidebar-accent-foreground",
@@ -696,6 +731,13 @@ function SidebarNavItem({
     className
   );
   const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    isActive ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "absolute inset-y-1.5 start-0 w-1 rounded-full bg-primary"
+      }
+    ) : null,
     icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }) : null,
     /* @__PURE__ */ jsx(
       "span",
@@ -2593,6 +2635,7 @@ var selectItemClass = "relative flex w-full cursor-pointer select-none items-cen
 var selectItemIndicatorClass = "absolute start-2 inline-flex h-3.5 w-3.5 items-center justify-center [&_svg]:h-3.5 [&_svg]:w-3.5";
 var selectGroupLabelClass = "px-2 py-1.5 text-xs font-semibold text-muted-foreground";
 var selectSeparatorClass = "-mx-1 my-1 h-px bg-border";
+var selectStatusClass = "flex items-center justify-center gap-2 px-2 py-6 text-center text-sm text-muted-foreground";
 
 // src/components/multi-select/multiSelectVariants.ts
 var multiSelectTriggerSizeClass = {
@@ -2610,11 +2653,13 @@ var multiSelectOptionClass = "flex w-full cursor-pointer select-none items-cente
 var multiSelectEmptyClass = "px-2 py-6 text-center text-sm text-muted-foreground";
 var DEFAULT_LABELS_LTR4 = {
   search: "Search\u2026",
-  empty: "No results"
+  empty: "No results",
+  loading: "Loading\u2026"
 };
 var DEFAULT_LABELS_RTL4 = {
   search: "\u0628\u062D\u062B\u2026",
-  empty: "\u0644\u0627 \u0646\u062A\u0627\u0626\u062C"
+  empty: "\u0644\u0627 \u0646\u062A\u0627\u0626\u062C",
+  loading: "\u062C\u0627\u0631\u064D \u0627\u0644\u062A\u062D\u0645\u064A\u0644\u2026"
 };
 function toArray(value) {
   return Array.isArray(value) ? value : [];
@@ -2624,6 +2669,7 @@ var MultiSelect = forwardRef(function MultiSelect2({
   selectSize = "md",
   options,
   placeholder,
+  loading = false,
   value,
   defaultValue,
   onValueChange,
@@ -2704,7 +2750,10 @@ var MultiSelect = forwardRef(function MultiSelect2({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx("span", { className: multiSelectValueRowClass, children: selected.length === 0 ? /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: multiSelectValueRowClass, children: loading ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "size-4 shrink-0 animate-spin" }),
+            labels.loading
+          ] }) : selected.length === 0 ? /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             shownValues.map((v) => /* @__PURE__ */ jsxs(Badge, { variant: "default", size: "sm", className: multiSelectChipClass, children: [
               /* @__PURE__ */ jsx("span", { className: "truncate", children: labelByValue.get(v) ?? v }),
               /* @__PURE__ */ jsx(
@@ -2739,7 +2788,7 @@ var MultiSelect = forwardRef(function MultiSelect2({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(
       RadixPopover.Content,
       {
         align: "start",
@@ -2749,7 +2798,10 @@ var MultiSelect = forwardRef(function MultiSelect2({
         onOpenAutoFocus: (event) => {
           if (!searchable) event.preventDefault();
         },
-        children: [
+        children: loading ? /* @__PURE__ */ jsx("div", { className: multiSelectEmptyClass, children: /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center gap-2", children: [
+          /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "size-4 shrink-0 animate-spin" }),
+          labels.loading
+        ] }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           searchable ? /* @__PURE__ */ jsx("div", { className: multiSelectSearchRowClass, children: /* @__PURE__ */ jsx(
             Input,
             {
@@ -2789,7 +2841,7 @@ var MultiSelect = forwardRef(function MultiSelect2({
               option.value
             );
           }) })
-        ]
+        ] })
       }
     ) })
   ] });
@@ -2803,6 +2855,9 @@ var Select = forwardRef(function Select2({
   selectSize = "md",
   options,
   placeholder,
+  loading = false,
+  loadingText = "Loading\u2026",
+  emptyText = "No options",
   value,
   defaultValue,
   onValueChange,
@@ -2861,7 +2916,7 @@ var Select = forwardRef(function Select2({
               className
             ),
             children: [
-              /* @__PURE__ */ jsx(RadixSelect.Value, { placeholder }),
+              /* @__PURE__ */ jsx(RadixSelect.Value, { placeholder, children: loading ? /* @__PURE__ */ jsx("span", { className: "flex items-center gap-2 text-muted-foreground", children: /* @__PURE__ */ jsx(SelectLoading, { text: loadingText }) }) : void 0 }),
               /* @__PURE__ */ jsx(RadixSelect.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "pointer-events-none absolute end-3 top-1/2 size-4 shrink-0 -translate-y-1/2 text-muted-foreground" }) })
             ]
           }
@@ -2875,7 +2930,7 @@ var Select = forwardRef(function Select2({
             className: selectContentClass,
             children: [
               /* @__PURE__ */ jsx(RadixSelect.ScrollUpButton, { className: "flex h-6 cursor-default items-center justify-center bg-popover text-muted-foreground", children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-4" }) }),
-              /* @__PURE__ */ jsx(RadixSelect.Viewport, { className: selectViewportClass, children: children ?? (options ? renderOptions(options) : null) }),
+              /* @__PURE__ */ jsx(RadixSelect.Viewport, { className: selectViewportClass, children: children ?? renderViewportContent({ loading, options, loadingText, emptyText }) }),
               /* @__PURE__ */ jsx(RadixSelect.ScrollDownButton, { className: "flex h-6 cursor-default items-center justify-center bg-popover text-muted-foreground", children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" }) })
             ]
           }
@@ -2884,6 +2939,26 @@ var Select = forwardRef(function Select2({
     }
   );
 });
+function SelectLoading({ text }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "size-4 shrink-0 animate-spin" }),
+    text
+  ] });
+}
+function renderViewportContent({
+  loading,
+  options,
+  loadingText,
+  emptyText
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: selectStatusClass, role: "presentation", children: /* @__PURE__ */ jsx(SelectLoading, { text: loadingText }) });
+  }
+  if (!options || options.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: selectStatusClass, role: "presentation", children: emptyText });
+  }
+  return renderOptions(options);
+}
 function renderOptions(options) {
   if (isGroupedOptions(options)) {
     const lastIndex = options.length - 1;
@@ -2924,6 +2999,7 @@ function DebouncedFilterInput({
   value,
   onChange,
   debounceMs,
+  id,
   ariaLabel,
   placeholder,
   wrapperClassName,
@@ -2961,6 +3037,7 @@ function DebouncedFilterInput({
   return /* @__PURE__ */ jsx(
     Input,
     {
+      id,
       type: "search",
       "aria-label": ariaLabel,
       placeholder,
@@ -3045,6 +3122,16 @@ function ListPageFilterBar({
 }
 function FilterControl({ filter, value, onChange, disabled, mode }) {
   const spanClass = FILTER_SPAN_CLASS[filter.width ?? "default"];
+  const label = filter.label ?? filter.key;
+  return /* @__PURE__ */ jsx(Field, { label, className: spanClass, children: renderFilterControl({ filter, value, onChange, disabled, mode }) });
+}
+function renderFilterControl({
+  filter,
+  value,
+  onChange,
+  disabled,
+  mode
+}) {
   const ariaLabel = typeof filter.label === "string" ? filter.label : filter.key;
   switch (filter.type) {
     case "select":
@@ -3055,7 +3142,6 @@ function FilterControl({ filter, value, onChange, disabled, mode }) {
           value: value ?? filterDefaultValue(filter),
           onValueChange: (v) => onChange?.(filter.key, v),
           options: filter.options,
-          className: spanClass,
           disabled
         }
       );
@@ -3068,7 +3154,6 @@ function FilterControl({ filter, value, onChange, disabled, mode }) {
           debounceMs: mode === "live" ? filter.debounceMs ?? DEFAULT_TEXT_DEBOUNCE_MS : 0,
           ariaLabel,
           placeholder: filter.placeholder,
-          wrapperClassName: spanClass,
           disabled
         }
       );
@@ -3080,7 +3165,6 @@ function FilterControl({ filter, value, onChange, disabled, mode }) {
           placeholder: filter.placeholder,
           value: value ?? "",
           onValueChange: (v) => onChange?.(filter.key, v),
-          className: spanClass,
           disabled
         }
       );
@@ -3093,7 +3177,6 @@ function FilterControl({ filter, value, onChange, disabled, mode }) {
           options: filter.options,
           value: value ? value.split(",").filter(Boolean) : [],
           onValueChange: (values) => onChange?.(filter.key, values.join(",")),
-          className: spanClass,
           disabled
         }
       );