@dimaan/ui 0.0.21 → 0.0.23

package/dist/index.cjs

@@ -299,7 +299,9 @@ function DashboardContent({ className, children, ...props }) {
     "main",
     {
       className: cn(
-        "flex min-h-[calc(100vh-var(--header-height))] flex-1 flex-col gap-6 p-4 sm:p-6 lg:p-8",
+        // `min-w-0` keeps wide children (Table, code blocks) scrolling within
+        // this column instead of widening the page past 100%.
+        "flex min-h-[calc(100vh-var(--header-height))] min-w-0 flex-1 flex-col gap-6 p-4 sm:p-6 lg:p-8",
         className
       ),
       ...props,
@@ -365,7 +367,10 @@ function DashboardMain({ className, children, ...props }) {
     "div",
     {
       className: cn(
-        "flex min-h-screen flex-1 flex-col transition-[margin] duration-200 ease-out",
+        // `min-w-0` lets this flex column shrink below its content's intrinsic
+        // width so wide children (e.g. a Table) scroll internally instead of
+        // stretching the whole layout past 100%.
+        "flex min-h-screen min-w-0 flex-1 flex-col transition-[margin] duration-200 ease-out",
         // On desktop, push the main column past the fixed sidebar using logical margin.
         collapsed ? "lg:ms-[var(--sidebar-width-collapsed)]" : "lg:ms-[var(--sidebar-width)]",
         className
@@ -1375,15 +1380,20 @@ var detailPageBaseClass = "flex w-full flex-col gap-6";
 var detailPageBodyClass = "flex flex-col gap-6";
 var detailPageSkeletonRowClass = "h-5 w-full animate-pulse rounded-md bg-muted";
 var detailPageEmptyClass = "rounded-md border border-border bg-card";
-var DEFAULT_LABELS = {
+var DEFAULT_LABELS_LTR = {
+  back: "Back",
   notFoundTitle: "Not found",
   notFoundDescription: "The record you\u2019re looking for does not exist or has been removed."
 };
+var DEFAULT_LABELS_RTL = {
+  back: "\u0631\u062C\u0648\u0639",
+  notFoundTitle: "\u063A\u064A\u0631 \u0645\u0648\u062C\u0648\u062F",
+  notFoundDescription: "\u0627\u0644\u0633\u062C\u0644 \u0627\u0644\u0630\u064A \u062A\u0628\u062D\u062B \u0639\u0646\u0647 \u063A\u064A\u0631 \u0645\u0648\u062C\u0648\u062F \u0623\u0648 \u062A\u0645 \u062D\u0630\u0641\u0647."
+};
 var DEFAULT_SKELETON_ROW_COUNT = 6;
 function DetailPage({
   title,
   description,
-  back,
   actions,
   bordered = true,
   isLoading = false,
@@ -1395,7 +1405,10 @@ function DetailPage({
   className,
   bodyClassName
 }) {
-  const labels = { ...DEFAULT_LABELS, ...labelsProp };
+  const navigate = reactRouterDom.useNavigate();
+  const dir = useDirection();
+  const defaults = dir === "rtl" ? DEFAULT_LABELS_RTL : DEFAULT_LABELS_LTR;
+  const labels = { ...defaults, ...labelsProp };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1409,7 +1422,7 @@ function DetailPage({
           {
             title,
             description,
-            back,
+            back: { label: labels.back, onClick: () => navigate(-1) },
             actions,
             bordered
           }
@@ -1717,19 +1730,231 @@ function mergeRefs(...refs) {
   };
 }
 
+// src/components/file-upload/fileUploadVariants.ts
+var fileUploadBaseClass = "flex w-full min-w-0 flex-col gap-2";
+var fileUploadDropzoneClass = "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-input bg-muted/40 px-6 py-8 text-center transition-colors hover:border-ring peer-focus-visible:border-ring peer-focus-visible:ring-2 peer-focus-visible:ring-ring/40 data-[drag-active=true]:border-ring data-[drag-active=true]:bg-accent data-[invalid=true]:border-destructive data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 data-[disabled=true]:hover:border-input";
+var fileUploadIconClass = "size-8 text-muted-foreground";
+var fileUploadPromptClass = "text-sm text-foreground";
+var fileUploadHintClass = "text-xs text-muted-foreground";
+var fileUploadFileRowClass = "flex items-center justify-between gap-2 rounded-md border border-border bg-card px-3 py-2";
+var fileUploadFileNameClass = "truncate text-sm font-medium text-foreground";
+var fileUploadFileSizeClass = "text-xs text-muted-foreground";
+var fileUploadRemoveClass = "inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50";
+var DEFAULT_MAX_SIZE_MB = 5;
+var DEFAULT_LABELS_LTR2 = {
+  prompt: "Drag & drop a file or click to browse",
+  remove: "Remove"
+};
+var DEFAULT_LABELS_RTL2 = {
+  prompt: "\u0627\u0633\u062D\u0628 \u0648\u0623\u0641\u0644\u062A \u0645\u0644\u0641\u064B\u0627 \u0623\u0648 \u0627\u0636\u063A\u0637 \u0644\u0644\u0627\u062E\u062A\u064A\u0627\u0631",
+  remove: "\u0625\u0632\u0627\u0644\u0629"
+};
+function normalizeFiles(value) {
+  if (Array.isArray(value)) return value.filter((f) => f instanceof File);
+  return value instanceof File ? [value] : [];
+}
+function fileKey(file) {
+  return `${file.name}:${file.size}:${file.lastModified}`;
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  const kb = bytes / 1024;
+  if (kb < 1024) return `${kb.toFixed(1)} KB`;
+  return `${(kb / 1024).toFixed(1)} MB`;
+}
+function matchesAccept(file, accept) {
+  if (!accept) return true;
+  const tokens = accept.split(",").map((t) => t.trim().toLowerCase()).filter(Boolean);
+  if (tokens.length === 0 || tokens.includes("*") || tokens.includes("*/*")) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return tokens.some((token) => {
+    if (token.startsWith(".")) return name.endsWith(token);
+    if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+    return type === token;
+  });
+}
+var FileUploadImpl = react.forwardRef(
+  function FileUpload(props, ref) {
+    const {
+      multiple = false,
+      accept,
+      maxSize = DEFAULT_MAX_SIZE_MB,
+      disabled = false,
+      required,
+      name,
+      id,
+      onError,
+      onBlur,
+      labels: labelsProp,
+      className,
+      value,
+      defaultValue,
+      onValueChange,
+      onChange,
+      "aria-invalid": ariaInvalid,
+      "aria-describedby": ariaDescribedBy,
+      "aria-label": ariaLabel
+    } = props;
+    const dir = useDirection();
+    const generatedId = react.useId();
+    const inputId = id ?? generatedId;
+    const [dragActive, setDragActive] = react.useState(false);
+    const baseLabels = dir === "rtl" ? DEFAULT_LABELS_RTL2 : DEFAULT_LABELS_LTR2;
+    const prompt = labelsProp?.prompt ?? baseLabels.prompt;
+    const removeLabel = labelsProp?.remove ?? baseLabels.remove;
+    const hint = labelsProp?.hint ?? (dir === "rtl" ? `\u0627\u0644\u062D\u062F \u0627\u0644\u0623\u0642\u0635\u0649 ${maxSize} \u0645\u064A\u062C\u0627\u0628\u0627\u064A\u062A` : `Max ${maxSize} MB`);
+    const isControlled = value !== void 0;
+    const [internal, setInternal] = react.useState(() => normalizeFiles(defaultValue));
+    const files = isControlled ? normalizeFiles(value) : internal;
+    const invalid = ariaInvalid === true || ariaInvalid === "true";
+    const emit = (next) => {
+      if (!isControlled) setInternal(next);
+      onValueChange?.(multiple ? next : next[0] ?? null);
+      onChange?.(multiple ? next : next[0] ?? null);
+    };
+    const tooLargeMessage = (file) => dir === "rtl" ? `${file.name} \u0623\u0643\u0628\u0631 \u0645\u0646 ${maxSize} \u0645\u064A\u062C\u0627\u0628\u0627\u064A\u062A` : `${file.name} is larger than ${maxSize} MB`;
+    const wrongTypeMessage = (file) => dir === "rtl" ? `${file.name} \u0644\u064A\u0633 \u0646\u0648\u0639 \u0645\u0644\u0641 \u0645\u0642\u0628\u0648\u0644` : `${file.name} is not an accepted file type`;
+    const addFiles = (incoming) => {
+      if (disabled) return;
+      const accepted = [];
+      for (const file of Array.from(incoming)) {
+        if (!matchesAccept(file, accept)) {
+          onError?.({ code: "file-type-rejected", message: wrongTypeMessage(file), file });
+          continue;
+        }
+        if (maxSize && file.size > maxSize * 1024 * 1024) {
+          onError?.({ code: "file-too-large", message: tooLargeMessage(file), file });
+          continue;
+        }
+        accepted.push(file);
+      }
+      if (accepted.length === 0) return;
+      if (!multiple) {
+        const [first] = accepted;
+        if (first) emit([first]);
+        return;
+      }
+      const byKey = new Map(files.map((f) => [fileKey(f), f]));
+      for (const f of accepted) byKey.set(fileKey(f), f);
+      emit([...byKey.values()]);
+    };
+    const handleInputChange = (event) => {
+      if (event.target.files) addFiles(event.target.files);
+      event.target.value = "";
+    };
+    const handleDrag = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (disabled) return;
+      if (event.type === "dragenter" || event.type === "dragover") setDragActive(true);
+      else if (event.type === "dragleave") setDragActive(false);
+    };
+    const handleDrop = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setDragActive(false);
+      if (!disabled && event.dataTransfer.files) addFiles(event.dataTransfer.files);
+    };
+    const remove = (file) => emit(files.filter((f) => fileKey(f) !== fileKey(file)));
+    const showDropzone = multiple || files.length === 0;
+    return (
+      // biome-ignore lint/a11y/noStaticElementInteractions: drag-and-drop is a wrapper affordance; keyboard/click access is the inner <label> + focusable <input>.
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          "data-slot": "file-upload",
+          className: cn(fileUploadBaseClass, className),
+          onDragEnter: handleDrag,
+          onDragOver: handleDrag,
+          onDragLeave: handleDrag,
+          onDrop: handleDrop,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                id: inputId,
+                type: "file",
+                accept,
+                multiple,
+                name,
+                required,
+                disabled,
+                onChange: handleInputChange,
+                onBlur,
+                "aria-invalid": ariaInvalid,
+                "aria-describedby": ariaDescribedBy,
+                "aria-label": ariaLabel,
+                className: "peer sr-only"
+              }
+            ),
+            showDropzone ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "label",
+              {
+                htmlFor: inputId,
+                "data-slot": "file-upload-dropzone",
+                "data-drag-active": dragActive ? "true" : void 0,
+                "data-invalid": invalid ? "true" : void 0,
+                "data-disabled": disabled ? "true" : void 0,
+                className: fileUploadDropzoneClass,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { "aria-hidden": "true", className: fileUploadIconClass }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: fileUploadPromptClass, children: prompt }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: fileUploadHintClass, children: hint })
+                ]
+              }
+            ) : null,
+            files.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-2", children: files.map((file) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "li",
+              {
+                "data-slot": "file-upload-file",
+                className: fileUploadFileRowClass,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.File, { "aria-hidden": "true", className: "size-5 shrink-0 text-muted-foreground" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: fileUploadFileNameClass, children: file.name }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: fileUploadFileSizeClass, children: formatBytes(file.size) })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      disabled,
+                      "aria-label": `${removeLabel}: ${file.name}`,
+                      "data-slot": "file-upload-remove",
+                      className: fileUploadRemoveClass,
+                      onClick: () => remove(file),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true", className: "size-4" })
+                    }
+                  )
+                ]
+              },
+              fileKey(file)
+            )) }) : null
+          ]
+        }
+      )
+    );
+  }
+);
+var FileUpload2 = FileUploadImpl;
+
 // src/components/form-page/formPageVariants.ts
 var formPageBaseClass = "flex w-full flex-col gap-6";
 var formPageBodyClass = "flex-1";
 var formPageActionsBarClass = "sticky bottom-0 -mx-6 -mb-6 mt-6 flex items-center justify-end gap-2 border-t border-border bg-background/95 px-6 py-3 backdrop-blur supports-[backdrop-filter]:bg-background/80";
 var formPageSkeletonRowClass = "h-10 w-full animate-pulse rounded-md bg-muted";
 var DEFAULT_SKELETON_ROW_COUNT2 = 6;
-var DEFAULT_LABELS_LTR = {
+var DEFAULT_LABELS_LTR3 = {
   back: "Back",
   cancel: "Cancel",
   save: "Save",
   saving: "Saving\u2026"
 };
-var DEFAULT_LABELS_RTL = {
+var DEFAULT_LABELS_RTL3 = {
   back: "\u0631\u062C\u0648\u0639",
   cancel: "\u0625\u0644\u063A\u0627\u0621",
   save: "\u062D\u0641\u0638",
@@ -1756,7 +1981,7 @@ function FormPage({
   const dir = useDirection();
   const formContext = reactHookForm.useFormContext();
   const submitting = isSubmitting ?? formContext?.formState?.isSubmitting ?? false;
-  const defaults = dir === "rtl" ? DEFAULT_LABELS_RTL : DEFAULT_LABELS_LTR;
+  const defaults = dir === "rtl" ? DEFAULT_LABELS_RTL3 : DEFAULT_LABELS_LTR3;
   const labels = { ...defaults, ...labelsProp };
   const goBack = () => navigate(-1);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "form-page", className: cn(formPageBaseClass, className), children: [
@@ -1924,132 +2149,6 @@ function LanguageSwitcher({
     }
   );
 }
-
-// src/components/select/selectVariants.ts
-var selectVariantClass = {
-  default: "border border-input bg-background hover:border-ring",
-  filled: "border border-transparent bg-muted hover:bg-muted/80",
-  ghost: "border border-transparent bg-transparent hover:bg-accent"
-};
-var selectSizeClass = {
-  sm: "h-8 rounded-md ps-2.5 pe-8 text-sm",
-  md: "h-9 rounded-md ps-3 pe-9 text-sm",
-  lg: "h-11 rounded-md ps-4 pe-10 text-base"
-};
-var selectBaseClass = "group/select relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus:ring-2 focus:ring-ring/40 focus:ring-offset-1 focus:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer data-[placeholder]:text-muted-foreground";
-var selectContentClass = "z-50 max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width) overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
-var selectViewportClass = "p-1";
-var selectItemClass = "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
-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";
-function isGroupedOptions(options) {
-  const first = options[0];
-  return first !== void 0 && "options" in first;
-}
-var Select = react.forwardRef(function Select2({
-  variant = "default",
-  selectSize = "md",
-  options,
-  placeholder,
-  value,
-  defaultValue,
-  onValueChange,
-  onChange,
-  onBlur,
-  name,
-  disabled,
-  required,
-  id,
-  className,
-  "aria-invalid": ariaInvalid,
-  "aria-describedby": ariaDescribedBy,
-  "aria-label": ariaLabel,
-  children
-}, ref) {
-  const generatedId = react.useId();
-  const triggerId = id ?? generatedId;
-  const handleValueChange = react.useCallback(
-    (next) => {
-      onValueChange?.(next);
-      if (onChange) {
-        const synthetic = {
-          target: { value: next, name },
-          currentTarget: { value: next, name },
-          type: "change"
-        };
-        onChange(synthetic);
-      }
-    },
-    [onValueChange, onChange, name]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    RadixSelect__namespace.Root,
-    {
-      value,
-      defaultValue,
-      onValueChange: handleValueChange,
-      disabled,
-      required,
-      name,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          RadixSelect__namespace.Trigger,
-          {
-            ref,
-            id: triggerId,
-            "aria-label": ariaLabel,
-            "aria-invalid": ariaInvalid,
-            "aria-describedby": ariaDescribedBy,
-            onBlur,
-            "data-slot": "select-trigger",
-            className: cn(
-              selectBaseClass,
-              selectVariantClass[variant],
-              selectSizeClass[selectSize],
-              className
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Value, { placeholder }),
-              /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "pointer-events-none absolute end-3 top-1/2 size-4 shrink-0 -translate-y-1/2 text-muted-foreground" }) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-          RadixSelect__namespace.Content,
-          {
-            position: "popper",
-            sideOffset: 4,
-            "data-slot": "select-content",
-            className: selectContentClass,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.ScrollUpButton, { className: "flex h-6 cursor-default items-center justify-center bg-popover text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "size-4" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Viewport, { className: selectViewportClass, children: children ?? (options ? renderOptions(options) : null) }),
-              /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.ScrollDownButton, { className: "flex h-6 cursor-default items-center justify-center bg-popover text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4" }) })
-            ]
-          }
-        ) })
-      ]
-    }
-  );
-});
-function renderOptions(options) {
-  if (isGroupedOptions(options)) {
-    const lastIndex = options.length - 1;
-    return options.map((group, idx) => /* @__PURE__ */ jsxRuntime.jsxs(RadixSelect__namespace.Group, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Label, { className: selectGroupLabelClass, children: group.label }),
-      group.options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value)),
-      idx < lastIndex && /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Separator, { className: selectSeparatorClass })
-    ] }, group.label));
-  }
-  return options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value));
-}
-var SelectItem = react.forwardRef(function SelectItem2({ className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(RadixSelect__namespace.Item, { ref, className: cn(selectItemClass, className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.ItemIndicator, { className: selectItemIndicatorClass, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.ItemText, { children })
-  ] });
-});
 var EN_LABELS = {
   rowsPerPage: "Rows per page",
   pageRangeOf: "of",
@@ -2173,17 +2272,17 @@ var tableSizeClass = {
   sm: {
     row: "",
     cell: "px-3 py-1.5 text-xs",
-    head: "px-3 py-2 text-xs font-medium"
+    head: "whitespace-nowrap px-3 py-2 text-xs font-medium"
   },
   md: {
     row: "",
     cell: "px-4 py-2.5 text-sm",
-    head: "px-4 py-2.5 text-xs font-medium uppercase tracking-wide"
+    head: "whitespace-nowrap px-4 py-2.5 text-xs font-medium uppercase tracking-wide"
   },
   lg: {
     row: "",
     cell: "px-5 py-3.5 text-sm",
-    head: "px-5 py-3 text-sm font-medium"
+    head: "whitespace-nowrap px-5 py-3 text-sm font-medium"
   }
 };
 var tableBaseClass = "w-full caption-bottom border-collapse";
@@ -2300,7 +2399,7 @@ function Table(props) {
   const sizeClasses = tableSizeClass[size];
   const showToolbar = enableRowSelection && bulkActions !== void 0 && selected.size > 0;
   const skeletonCount = loadingRowCount ?? pageSize;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full flex-col gap-3", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full min-w-0 flex-col gap-3", className), children: [
     showToolbar && /* @__PURE__ */ jsxRuntime.jsx(
       Toolbar,
       {
@@ -2333,7 +2432,9 @@ function Table(props) {
                 "thead",
                 {
                   className: cn(
-                    "bg-muted/40 text-muted-foreground",
+                    // Opaque (not bg-muted/40) so a sticky header fully hides the rows
+                    // scrolling underneath it.
+                    "bg-muted text-muted-foreground",
                     maxHeight !== void 0 && "sticky top-0 z-10"
                   ),
                   children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
@@ -2501,20 +2602,446 @@ function SortIndicator({ active, direction }) {
   if (!active) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { "aria-hidden": "true", className });
   return direction === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { "aria-hidden": "true", className }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true", className });
 }
-var DEFAULT_LABELS2 = {
-  searchPlaceholder: "Search\u2026",
-  searchAriaLabel: "Search",
+
+// src/components/select/selectVariants.ts
+var selectVariantClass = {
+  default: "border border-input bg-background hover:border-ring",
+  filled: "border border-transparent bg-muted hover:bg-muted/80",
+  ghost: "border border-transparent bg-transparent hover:bg-accent"
+};
+var selectSizeClass = {
+  sm: "h-8 rounded-md ps-2.5 pe-8 text-sm",
+  md: "h-9 rounded-md ps-3 pe-9 text-sm",
+  lg: "h-11 rounded-md ps-4 pe-10 text-base"
+};
+var selectBaseClass = "group/select relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus:ring-2 focus:ring-ring/40 focus:ring-offset-1 focus:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer data-[placeholder]:text-muted-foreground";
+var selectContentClass = "z-50 max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width) overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
+var selectViewportClass = "p-1";
+var selectItemClass = "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+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";
+
+// src/components/multi-select/multiSelectVariants.ts
+var multiSelectTriggerSizeClass = {
+  sm: "min-h-8 rounded-md ps-2.5 pe-8 py-1 text-sm",
+  md: "min-h-9 rounded-md ps-3 pe-9 py-1 text-sm",
+  lg: "min-h-11 rounded-md ps-4 pe-10 py-1.5 text-base"
+};
+var multiSelectValueRowClass = "flex min-w-0 flex-1 flex-wrap items-center gap-1";
+var multiSelectChipClass = "max-w-full gap-1 pe-1";
+var multiSelectChipRemoveClass = "inline-flex size-3.5 shrink-0 items-center justify-center rounded-sm hover:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40";
+var multiSelectContentClass = "z-50 w-(--radix-popover-trigger-width) overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
+var multiSelectSearchRowClass = "border-b border-border p-1";
+var multiSelectListClass = "max-h-60 overflow-y-auto overflow-x-hidden p-1";
+var multiSelectOptionClass = "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 has-[:focus-visible]:bg-accent has-[:disabled]:pointer-events-none has-[:disabled]:opacity-50";
+var multiSelectEmptyClass = "px-2 py-6 text-center text-sm text-muted-foreground";
+var DEFAULT_LABELS_LTR4 = {
+  search: "Search\u2026",
+  empty: "No results"
+};
+var DEFAULT_LABELS_RTL4 = {
+  search: "\u0628\u062D\u062B\u2026",
+  empty: "\u0644\u0627 \u0646\u062A\u0627\u0626\u062C"
+};
+function toArray(value) {
+  return Array.isArray(value) ? value : [];
+}
+var MultiSelect = react.forwardRef(function MultiSelect2({
+  variant = "default",
+  selectSize = "md",
+  options,
+  placeholder,
+  value,
+  defaultValue,
+  onValueChange,
+  onChange,
+  onBlur,
+  searchable = true,
+  maxTagCount,
+  labels: labelsProp,
+  name,
+  disabled = false,
+  required,
+  id,
+  className,
+  contentClassName,
+  "aria-invalid": ariaInvalid,
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel
+}, ref) {
+  const dir = useDirection();
+  const labels = { ...dir === "rtl" ? DEFAULT_LABELS_RTL4 : DEFAULT_LABELS_LTR4, ...labelsProp };
+  const generatedId = react.useId();
+  const triggerId = id ?? generatedId;
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = react.useState(() => toArray(defaultValue));
+  const selected = isControlled ? toArray(value) : internal;
+  const [open, setOpen] = react.useState(false);
+  const [query, setQuery] = react.useState("");
+  const labelByValue = react.useMemo(() => new Map(options.map((o) => [o.value, o.label])), [options]);
+  const filtered = react.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!searchable || q === "") return options;
+    return options.filter((o) => o.label.toLowerCase().includes(q));
+  }, [options, query, searchable]);
+  const emit = (next) => {
+    if (!isControlled) setInternal(next);
+    onValueChange?.(next);
+    onChange?.(next);
+  };
+  const toggle = (optionValue) => {
+    emit(
+      selected.includes(optionValue) ? selected.filter((v) => v !== optionValue) : [...selected, optionValue]
+    );
+  };
+  const remove = (optionValue) => emit(selected.filter((v) => v !== optionValue));
+  const openOnKeys = (event) => {
+    if (disabled) return;
+    if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+      event.preventDefault();
+      setOpen(true);
+    }
+  };
+  const shownValues = maxTagCount !== void 0 ? selected.slice(0, maxTagCount) : selected;
+  const overflowCount = selected.length - shownValues.length;
+  return /* @__PURE__ */ jsxRuntime.jsxs(RadixPopover__namespace.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        id: triggerId,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-disabled": disabled || void 0,
+        "aria-label": ariaLabel,
+        "aria-invalid": ariaInvalid,
+        "aria-describedby": ariaDescribedBy,
+        "data-slot": "multi-select-trigger",
+        "data-state": open ? "open" : "closed",
+        "data-placeholder": selected.length === 0 ? "" : void 0,
+        onClick: () => !disabled && setOpen(true),
+        onKeyDown: openOnKeys,
+        onBlur,
+        className: cn(
+          selectBaseClass,
+          selectVariantClass[variant],
+          multiSelectTriggerSizeClass[selectSize],
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: multiSelectValueRowClass, children: selected.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            shownValues.map((v) => /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "default", size: "sm", className: multiSelectChipClass, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: labelByValue.get(v) ?? v }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  "aria-label": `Remove ${labelByValue.get(v) ?? v}`,
+                  "data-slot": "multi-select-chip-remove",
+                  className: multiSelectChipRemoveClass,
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    if (!disabled) remove(v);
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true", className: "size-3" })
+                }
+              )
+            ] }, v)),
+            overflowCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", size: "sm", children: `+${overflowCount}` }) : null
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "pointer-events-none absolute end-3 top-1/2 size-4 shrink-0 -translate-y-1/2 text-muted-foreground" }),
+          name ? /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "hidden",
+              name,
+              value: selected.join(","),
+              required,
+              readOnly: true
+            }
+          ) : null
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      RadixPopover__namespace.Content,
+      {
+        align: "start",
+        sideOffset: 4,
+        "data-slot": "multi-select-content",
+        className: cn(multiSelectContentClass, contentClassName),
+        onOpenAutoFocus: (event) => {
+          if (!searchable) event.preventDefault();
+        },
+        children: [
+          searchable ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: multiSelectSearchRowClass, children: /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              type: "search",
+              inputSize: "sm",
+              value: query,
+              onChange: (e) => setQuery(e.target.value),
+              placeholder: labels.search,
+              "aria-label": labels.search,
+              leadingIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "size-4" })
+            }
+          ) }) : null,
+          filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: multiSelectEmptyClass, children: labels.empty }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: multiSelectListClass, children: filtered.map((option) => {
+            const isSelected = selected.includes(option.value);
+            const optionId = `${triggerId}-opt-${option.value}`;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "label",
+              {
+                htmlFor: optionId,
+                "data-slot": "multi-select-option",
+                "data-selected": isSelected ? "true" : void 0,
+                className: multiSelectOptionClass,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Checkbox,
+                    {
+                      id: optionId,
+                      size: "sm",
+                      checked: isSelected,
+                      disabled: option.disabled,
+                      onCheckedChange: () => toggle(option.value)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: option.label })
+                ]
+              },
+              option.value
+            );
+          }) })
+        ]
+      }
+    ) })
+  ] });
+});
+function isGroupedOptions(options) {
+  const first = options[0];
+  return first !== void 0 && "options" in first;
+}
+var Select = react.forwardRef(function Select2({
+  variant = "default",
+  selectSize = "md",
+  options,
+  placeholder,
+  value,
+  defaultValue,
+  onValueChange,
+  onChange,
+  onBlur,
+  name,
+  disabled,
+  required,
+  id,
+  className,
+  "aria-invalid": ariaInvalid,
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
+  children
+}, ref) {
+  const generatedId = react.useId();
+  const triggerId = id ?? generatedId;
+  const handleValueChange = react.useCallback(
+    (next) => {
+      onValueChange?.(next);
+      if (onChange) {
+        const synthetic = {
+          target: { value: next, name },
+          currentTarget: { value: next, name },
+          type: "change"
+        };
+        onChange(synthetic);
+      }
+    },
+    [onValueChange, onChange, name]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    RadixSelect__namespace.Root,
+    {
+      value,
+      defaultValue,
+      onValueChange: handleValueChange,
+      disabled,
+      required,
+      name,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          RadixSelect__namespace.Trigger,
+          {
+            ref,
+            id: triggerId,
+            "aria-label": ariaLabel,
+            "aria-invalid": ariaInvalid,
+            "aria-describedby": ariaDescribedBy,
+            onBlur,
+            "data-slot": "select-trigger",
+            className: cn(
+              selectBaseClass,
+              selectVariantClass[variant],
+              selectSizeClass[selectSize],
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Value, { placeholder }),
+              /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "pointer-events-none absolute end-3 top-1/2 size-4 shrink-0 -translate-y-1/2 text-muted-foreground" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+          RadixSelect__namespace.Content,
+          {
+            position: "popper",
+            sideOffset: 4,
+            "data-slot": "select-content",
+            className: selectContentClass,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.ScrollUpButton, { className: "flex h-6 cursor-default items-center justify-center bg-popover text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "size-4" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Viewport, { className: selectViewportClass, children: children ?? (options ? renderOptions(options) : null) }),
+              /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.ScrollDownButton, { className: "flex h-6 cursor-default items-center justify-center bg-popover text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4" }) })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+});
+function renderOptions(options) {
+  if (isGroupedOptions(options)) {
+    const lastIndex = options.length - 1;
+    return options.map((group, idx) => /* @__PURE__ */ jsxRuntime.jsxs(RadixSelect__namespace.Group, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Label, { className: selectGroupLabelClass, children: group.label }),
+      group.options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value)),
+      idx < lastIndex && /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Separator, { className: selectSeparatorClass })
+    ] }, group.label));
+  }
+  return options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value));
+}
+var SelectItem = react.forwardRef(function SelectItem2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(RadixSelect__namespace.Item, { ref, className: cn(selectItemClass, className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.ItemIndicator, { className: selectItemIndicatorClass, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.ItemText, { children })
+  ] });
+});
+
+// src/components/list-page/listPageFilters.ts
+var FILTER_SPAN_CLASS = {
+  narrow: "",
+  default: "",
+  wide: "sm:col-span-2"
+};
+function filterDefaultValue(filter) {
+  return filter.type === "select" ? filter.options[0]?.value ?? "" : "";
+}
+function hasActiveFilters(filters, values) {
+  for (const filter of filters ?? []) {
+    const current = values?.[filter.key];
+    if (current === void 0) continue;
+    const value = filter.type === "text" ? current.trim() : current;
+    if (value !== filterDefaultValue(filter)) return true;
+  }
+  return false;
+}
+function ListPageFilterBar({
+  filters,
+  values,
+  onChange,
+  disabled = false,
+  labels
+}) {
+  const active = hasActiveFilters(filters, values);
+  const reset = () => {
+    for (const filter of filters ?? []) {
+      onChange?.(filter.key, filterDefaultValue(filter));
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "list-page-filter-bar", className: "space-y-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: filters?.map((filter) => /* @__PURE__ */ jsxRuntime.jsx(
+      FilterControl,
+      {
+        filter,
+        value: values?.[filter.key],
+        onChange,
+        disabled
+      },
+      filter.key
+    )) }),
+    active && !disabled ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", onClick: reset, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "size-4" }),
+      labels.reset
+    ] }) }) : null
+  ] });
+}
+function FilterControl({ filter, value, onChange, disabled }) {
+  const spanClass = FILTER_SPAN_CLASS[filter.width ?? "default"];
+  const ariaLabel = typeof filter.label === "string" ? filter.label : filter.key;
+  switch (filter.type) {
+    case "select":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Select,
+        {
+          "aria-label": ariaLabel,
+          value: value ?? filterDefaultValue(filter),
+          onValueChange: (v) => onChange?.(filter.key, v),
+          options: filter.options,
+          className: spanClass,
+          disabled
+        }
+      );
+    case "text":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          type: "search",
+          "aria-label": ariaLabel,
+          placeholder: filter.placeholder,
+          value: value ?? "",
+          onChange: (e) => onChange?.(filter.key, e.target.value),
+          leadingIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "size-4" }),
+          wrapperClassName: spanClass,
+          disabled
+        }
+      );
+    case "date":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DatePicker,
+        {
+          "aria-label": ariaLabel,
+          placeholder: filter.placeholder,
+          value: value ?? "",
+          onValueChange: (v) => onChange?.(filter.key, v),
+          className: spanClass,
+          disabled
+        }
+      );
+    case "multiselect":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        MultiSelect,
+        {
+          "aria-label": ariaLabel,
+          placeholder: filter.placeholder,
+          options: filter.options,
+          value: value ? value.split(",").filter(Boolean) : [],
+          onValueChange: (values) => onChange?.(filter.key, values.join(",")),
+          className: spanClass,
+          disabled
+        }
+      );
+  }
+}
+var DEFAULT_LABELS = {
   reset: "Reset filters",
   emptyTitle: "No results",
   emptyDescription: "Try clearing the search or adjusting the filters.",
   noDataTitle: "No data yet",
   noDataDescription: "Nothing has been added here so far."
 };
-var FILTER_WIDTH_CLASS = {
-  narrow: "w-32",
-  default: "w-44",
-  wide: "w-56"
-};
 function ListPage({
   title,
   description,
@@ -2525,8 +3052,6 @@ function ListPage({
   getRowId,
   isLoading = false,
   loadingRowCount,
-  searchValue,
-  onSearchChange,
   filters,
   filterValues,
   onFilterChange,
@@ -2541,59 +3066,30 @@ function ListPage({
   labels: labelsProp,
   className
 }) {
-  const labels = { ...DEFAULT_LABELS2, ...labelsProp };
-  const showSearch = onSearchChange !== void 0;
-  const showFilterBar = showSearch || Boolean(filters?.length);
-  const hasActiveQuery = react.useMemo(() => {
-    if ((searchValue ?? "").trim() !== "") return true;
-    for (const f of filters ?? []) {
-      const current = filterValues?.[f.key];
-      const def = f.options[0]?.value ?? "";
-      if (current !== void 0 && current !== def) return true;
-    }
-    return false;
-  }, [searchValue, filters, filterValues]);
+  const labels = { ...DEFAULT_LABELS, ...labelsProp };
+  const showFilterBar = Boolean(filters?.length);
+  const hasActiveQuery = react.useMemo(
+    () => hasActiveFilters(filters, filterValues),
+    [filters, filterValues]
+  );
   const reset = () => {
-    onSearchChange?.("");
     for (const f of filters ?? []) {
-      const def = f.options[0]?.value ?? "";
-      onFilterChange?.(f.key, def);
+      onFilterChange?.(f.key, filterDefaultValue(f));
     }
   };
   const tableMode = isLoading ? "loading" : data.length === 0 && !hasActiveQuery ? "no-data" : data.length === 0 && hasActiveQuery ? "no-results" : "rows";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "list-page", className: cn("space-y-6", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(PageHeader, { title, description, bordered, actions }),
-    showFilterBar ? /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "list-page-filter-bar", className: "flex flex-wrap items-center gap-3", children: [
-      showSearch ? /* @__PURE__ */ jsxRuntime.jsx(
-        Input,
-        {
-          type: "search",
-          placeholder: labels.searchPlaceholder,
-          "aria-label": labels.searchAriaLabel || labels.searchPlaceholder,
-          value: searchValue ?? "",
-          onChange: (e) => onSearchChange?.(e.target.value),
-          leadingIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}),
-          wrapperClassName: "sm:max-w-xs",
-          disabled: isLoading
-        }
-      ) : null,
-      filters?.map((f) => /* @__PURE__ */ jsxRuntime.jsx(
-        Select,
-        {
-          "aria-label": typeof f.label === "string" ? f.label : f.key,
-          value: filterValues?.[f.key] ?? f.options[0]?.value ?? "",
-          onValueChange: (v) => onFilterChange?.(f.key, v),
-          options: f.options,
-          className: FILTER_WIDTH_CLASS[f.width ?? "default"],
-          disabled: isLoading
-        },
-        f.key
-      )),
-      hasActiveQuery && !isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", onClick: reset, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, {}),
-        labels.reset
-      ] }) : null
-    ] }) : null,
+    showFilterBar ? /* @__PURE__ */ jsxRuntime.jsx(
+      ListPageFilterBar,
+      {
+        filters,
+        values: filterValues,
+        onChange: onFilterChange,
+        disabled: isLoading,
+        labels: { reset: labels.reset }
+      }
+    ) : null,
     tableMode === "loading" || tableMode === "rows" ? /* @__PURE__ */ jsxRuntime.jsx(
       Table,
       {
@@ -3061,6 +3557,7 @@ exports.DropdownMenuShortcut = DropdownMenuShortcut;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.EmptyState = EmptyState;
 exports.Field = Field;
+exports.FileUpload = FileUpload2;
 exports.FormPage = FormPage;
 exports.HeaderActions = HeaderActions;
 exports.HeaderCollapseTrigger = HeaderCollapseTrigger;
@@ -3070,6 +3567,7 @@ exports.HeaderTitle = HeaderTitle;
 exports.Input = Input;
 exports.LanguageSwitcher = LanguageSwitcher;
 exports.ListPage = ListPage;
+exports.MultiSelect = MultiSelect;
 exports.PageHeader = PageHeader;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupItem = RadioGroupItem;
@@ -3142,6 +3640,15 @@ exports.emptyStateDescriptionSizeClass = emptyStateDescriptionSizeClass;
 exports.emptyStateIconWrapperBaseClass = emptyStateIconWrapperBaseClass;
 exports.emptyStateIconWrapperSizeClass = emptyStateIconWrapperSizeClass;
 exports.emptyStateTitleSizeClass = emptyStateTitleSizeClass;
+exports.fileUploadBaseClass = fileUploadBaseClass;
+exports.fileUploadDropzoneClass = fileUploadDropzoneClass;
+exports.fileUploadFileNameClass = fileUploadFileNameClass;
+exports.fileUploadFileRowClass = fileUploadFileRowClass;
+exports.fileUploadFileSizeClass = fileUploadFileSizeClass;
+exports.fileUploadHintClass = fileUploadHintClass;
+exports.fileUploadIconClass = fileUploadIconClass;
+exports.fileUploadPromptClass = fileUploadPromptClass;
+exports.fileUploadRemoveClass = fileUploadRemoveClass;
 exports.formPageActionsBarClass = formPageActionsBarClass;
 exports.formPageBaseClass = formPageBaseClass;
 exports.formPageBodyClass = formPageBodyClass;
@@ -3149,6 +3656,15 @@ exports.formPageSkeletonRowClass = formPageSkeletonRowClass;
 exports.inputBaseClass = inputBaseClass;
 exports.inputSizeClass = inputSizeClass;
 exports.inputVariantClass = inputVariantClass;
+exports.multiSelectChipClass = multiSelectChipClass;
+exports.multiSelectChipRemoveClass = multiSelectChipRemoveClass;
+exports.multiSelectContentClass = multiSelectContentClass;
+exports.multiSelectEmptyClass = multiSelectEmptyClass;
+exports.multiSelectListClass = multiSelectListClass;
+exports.multiSelectOptionClass = multiSelectOptionClass;
+exports.multiSelectSearchRowClass = multiSelectSearchRowClass;
+exports.multiSelectTriggerSizeClass = multiSelectTriggerSizeClass;
+exports.multiSelectValueRowClass = multiSelectValueRowClass;
 exports.pageHeaderActionsClass = pageHeaderActionsClass;
 exports.pageHeaderBackClass = pageHeaderBackClass;
 exports.pageHeaderBackIconClass = pageHeaderBackIconClass;