hazo_ui 1.0.3 → 2.0.0

package/README.md

@@ -10,17 +10,25 @@ npm install hazo_ui
 
 ## Components
 
-### MultiFilterDialog
+### Component Overview
+
+- **[MultiFilterDialog](#multifilterdialog)** - A powerful dialog component for multi-field filtering with support for text, number, combobox, boolean, and date fields. Includes operator support, validation, and visual feedback.
+
+- **[MultiSortDialog](#multisortdialog)** - A flexible dialog component for multi-field sorting with drag-and-drop reordering. Allows users to set sort priority and direction (ascending/descending) for multiple fields.
+
+---
+
+## MultiFilterDialog
 
 A powerful, flexible dialog component for multi-field filtering with support for various input types. Perfect for table headers, grid views, or any interface where users need to apply multiple filters simultaneously.
 
-![MultiFilterDialog - Dialog with Multiple Filters](https://github.com/pub12/hazo_ui/raw/main/docs/Screenshot%202025-11-06%20at%202.51.24%E2%80%AFPM.png)
+![MultiFilterDialog - Filter Button with Active Filters Tooltip](https://github.com/pub12/hazo_ui/raw/main/docs/multifilterdialog/filter-button-tooltip.png)
 
-![MultiFilterDialog - Filter Button with Active Filters Tooltip](https://github.com/pub12/hazo_ui/raw/main/docs/Screenshot%202025-11-06%20at%202.51.34%E2%80%AFPM.png)
+![MultiFilterDialog - Dialog with Multiple Filters](https://github.com/pub12/hazo_ui/raw/main/docs/multifilterdialog/filter-dialog.png)
 
-![MultiFilterDialog - Calendar Date Picker](https://github.com/pub12/hazo_ui/raw/main/docs/Screenshot%202025-11-06%20at%202.51.37%E2%80%AFPM.png)
+![MultiFilterDialog - Calendar Date Picker](https://github.com/pub12/hazo_ui/raw/main/docs/multifilterdialog/filter-dialog-calendar.png)
 
-![MultiFilterDialog - Filter Output Example](https://github.com/pub12/hazo_ui/raw/main/docs/Screenshot%202025-11-06%20at%202.51.53%E2%80%AFPM.png)
+![MultiFilterDialog - Filter Output Example](https://github.com/pub12/hazo_ui/raw/main/docs/multifilterdialog/filter-output.png)
 
 #### Features
 
@@ -29,6 +37,7 @@ A powerful, flexible dialog component for multi-field filtering with support for
 - **Dynamic Field Addition**: Users can add and remove filter fields dynamically
 - **Field Validation**: Built-in validation for text length, number ranges, and decimal precision
 - **Visual Feedback**: Tooltip shows active filters when hovering over the filter button
+- **Clear All Button**: Quickly clear all filters at once
 - **Responsive Design**: Works seamlessly on mobile and desktop devices
 - **TypeScript Support**: Fully typed with TypeScript interfaces
 - **Accessible**: Built with accessibility in mind using Radix UI primitives
@@ -226,40 +235,218 @@ When users apply filters, the `onFilterChange` callback receives an array of `Fi
 ]
 ```
 
+---
+
+## MultiSortDialog
+
+A powerful dialog component for multi-field sorting with drag-and-drop reordering. Allows users to select multiple fields for sorting, reorder them by priority, and set ascending/descending direction for each field.
+
+![MultiSortDialog - Sort Button with Active Sorts Tooltip](https://github.com/pub12/hazo_ui/raw/main/docs/multisortdialog/sort-button-tooltip.png)
+
+![MultiSortDialog - Dialog with Multiple Sort Fields](https://github.com/pub12/hazo_ui/raw/main/docs/multisortdialog/sort-dialog.png)
+
+![MultiSortDialog - Drag and Drop Reordering](https://github.com/pub12/hazo_ui/raw/main/docs/multisortdialog/sort-drag-drop.png)
+
+![MultiSortDialog - Sort Output Example](https://github.com/pub12/hazo_ui/raw/main/docs/multisortdialog/sort-output.png)
+
+#### Features
+
+- **Drag-and-Drop Reordering**: Intuitively reorder sort fields by dragging them
+- **Multiple Sort Fields**: Add multiple fields to sort by with priority ordering
+- **Direction Toggle**: Switch between ascending and descending for each field
+- **Visual Feedback**: Drag handle with grip icon, opacity changes during drag
+- **Clear All Button**: Quickly clear all sort fields at once
+- **Tooltip Display**: Shows active sort configuration when hovering over the sort button
+- **Keyboard Accessible**: Full keyboard navigation support for drag and drop
+- **Responsive Design**: Works seamlessly on mobile and desktop devices
+- **TypeScript Support**: Fully typed with TypeScript interfaces
+- **Accessible**: Built with accessibility in mind using Radix UI primitives
+
+#### How It Works
+
+1. **Adding Sort Fields**: Click the "Add field" button to select from available fields
+2. **Reordering**: Drag fields using the grip icon (⋮⋮) to change their priority
+3. **Changing Direction**: Toggle the switch next to each field to change between ascending (A→Z, 0→9) and descending (Z→A, 9→0)
+4. **Removing Fields**: Click the trash icon to remove a field from sorting
+5. **Applying Sorts**: Click "Apply" to save the sort configuration
+6. **Clearing All**: Click "Clear All" to remove all sort fields at once
+
+The component returns an array of sort configurations in priority order, where the first item is the primary sort field, second is secondary, and so on.
+
+#### Usage
+
+```tsx
+import { MultiSortDialog, type SortField, type SortConfig } from 'hazo_ui';
+import { useState } from 'react';
+
+function DataTable() {
+  const [sorts, setSorts] = useState<SortConfig[]>([]);
+
+  // Define available sort fields
+  const availableFields: SortField[] = [
+    {
+      value: "name",
+      label: "Name",
+    },
+    {
+      value: "age",
+      label: "Age",
+    },
+    {
+      value: "price",
+      label: "Price",
+    },
+    {
+      value: "status",
+      label: "Status",
+    },
+    {
+      value: "created_date",
+      label: "Created Date",
+    },
+  ];
+
+  // Handle sort changes
+  const handleSortChange = (sortConfig: SortConfig[]) => {
+    setSorts(sortConfig);
+    // Apply sorts to your data
+    console.log('Applied sorts:', sortConfig);
+    // Sort your data based on the configuration
+    // First item is primary sort, second is secondary, etc.
+  };
+
+  return (
+    <div>
+      <MultiSortDialog
+        availableFields={availableFields}
+        onSortChange={handleSortChange}
+        initialSortFields={sorts}
+      />
+      {/* Your table/grid component */}
+    </div>
+  );
+}
+```
+
+#### Example Input
+
+```tsx
+// Available sort fields configuration
+const availableFields: SortField[] = [
+  {
+    value: "name",
+    label: "Name",
+  },
+  {
+    value: "price",
+    label: "Price",
+  },
+  {
+    value: "created_date",
+    label: "Created Date",
+  },
+];
+
+// Initial sort fields (optional)
+const initialSortFields: SortConfig[] = [
+  {
+    field: "name",
+    direction: "asc",
+  },
+  {
+    field: "price",
+    direction: "desc",
+  },
+];
+```
+
+#### Expected Output
+
+When users apply sorts, the `onSortChange` callback receives an array of `SortConfig` objects in priority order:
+
+```typescript
+// Example output when user applies sorts:
+[
+  {
+    field: "name",
+    direction: "asc"      // Primary sort: Name ascending
+  },
+  {
+    field: "price",
+    direction: "desc"     // Secondary sort: Price descending
+  },
+  {
+    field: "created_date",
+    direction: "desc"     // Tertiary sort: Created Date descending
+  }
+]
+```
+
+**Important**: The order of the array matters! The first item is the primary sort field, the second is secondary, and so on. This allows for multi-level sorting (e.g., sort by name first, then by price for items with the same name).
+
 #### TypeScript Interfaces
 
 ```typescript
-interface FilterField {
-  value: string;                    // Unique identifier for the field
-  label: string;                    // Display label
-  type: 'text' | 'number' | 'combobox' | 'boolean' | 'date';
-  textConfig?: {
-    minLength?: number;
-    maxLength?: number;
-  };
-  numberConfig?: {
-    min?: number;
-    max?: number;
-    allowDecimal?: boolean;
-    decimalLength?: number;
-  };
-  comboboxOptions?: Array<{ label: string; value: string }>;
-  booleanLabels?: {
-    trueLabel?: string;
-    falseLabel?: string;
-  };
+interface SortField {
+  value: string;          // Unique identifier for the field
+  label: string;          // Display label
 }
 
-interface FilterConfig {
-  field: string;                   // Field identifier
-  operator?: string;               // For number/date: 'equals', 'not_equals', 'greater_than', 'less_than', 'greater_equal', 'less_equal'
-  value: any;                      // Filter value (string, number, boolean, or Date)
+interface SortConfig {
+  field: string;          // Field identifier
+  direction: 'asc' | 'desc';  // Sort direction: 'asc' for ascending, 'desc' for descending
 }
 ```
 
-#### Styling
+#### Implementing the Sort Logic
+
+Here's an example of how to apply the sort configuration to your data:
+
+```typescript
+function applySorts(data: any[], sortConfigs: SortConfig[]): any[] {
+  if (sortConfigs.length === 0) return data;
+
+  return [...data].sort((a, b) => {
+    for (const sortConfig of sortConfigs) {
+      const aValue = a[sortConfig.field];
+      const bValue = b[sortConfig.field];
+      
+      let comparison = 0;
+      
+      // Handle different value types
+      if (typeof aValue === 'string' && typeof bValue === 'string') {
+        comparison = aValue.localeCompare(bValue);
+      } else if (aValue instanceof Date && bValue instanceof Date) {
+        comparison = aValue.getTime() - bValue.getTime();
+      } else {
+        comparison = (aValue ?? 0) - (bValue ?? 0);
+      }
+      
+      // Apply direction
+      if (sortConfig.direction === 'desc') {
+        comparison = -comparison;
+      }
+      
+      // If values are different, return the comparison
+      // Otherwise, continue to next sort field
+      if (comparison !== 0) {
+        return comparison;
+      }
+    }
+    
+    return 0; // All sort fields are equal
+  });
+}
+
+// Usage
+const sortedData = applySorts(originalData, sorts);
+```
+
+---
+
+## Styling
 
-The component uses Tailwind CSS and follows shadcn/ui design patterns. Make sure your project has Tailwind CSS configured with the following CSS variables:
+Both components use Tailwind CSS and follow shadcn/ui design patterns. Make sure your project has Tailwind CSS configured with the following CSS variables:
 
 ```css
 :root {
@@ -267,7 +454,18 @@ The component uses Tailwind CSS and follows shadcn/ui design patterns. Make sure
   --foreground: 222.2 84% 4.9%;
   --primary: 222.2 47.4% 11.2%;
   --primary-foreground: 210 40% 98%;
-  /* ... other CSS variables */
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 84% 4.9%;
+  --radius: 0.5rem;
 }
 ```
 

package/dist/index.cjs

@@ -13,6 +13,10 @@ var SelectPrimitive = require('@radix-ui/react-select');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var reactDayPicker = require('react-day-picker');
 var dateFns = require('date-fns');
+var SwitchPrimitives = require('@radix-ui/react-switch');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
+var utilities = require('@dnd-kit/utilities');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -37,6 +41,7 @@ var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive)
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
+var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
 
 var ExampleComponent = ({ children, className = "" }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `cls_example_component ${className}`, children });
@@ -695,6 +700,9 @@ function MultiFilterDialog({
     setFilterFields(initialFilters);
     setIsOpen(false);
   };
+  const handleClearAll = () => {
+    setFilterFields([]);
+  };
   const availableFieldsToAdd = availableFields.filter(
     (af) => !filterFields.some((ff) => ff.field === af.value)
   );
@@ -821,6 +829,333 @@ function MultiFilterDialog({
         }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_empty_filter_fields text-center py-8 text-sm text-muted-foreground", children: 'No filter fields added. Click "Add field" to add filtering criteria.' })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { children: [
+        filterFields.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            variant: "outline",
+            onClick: handleClearAll,
+            className: "cls_clear_all_btn",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "cls_clear_all_icon h-4 w-4 mr-2" }),
+              "Clear All"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            onClick: handleApply,
+            className: "cls_apply_btn",
+            children: "Apply"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "outline",
+            onClick: handleCancel,
+            className: "cls_cancel_btn",
+            children: "Cancel"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+var Switch = React6__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SwitchPrimitives__namespace.Root,
+  {
+    className: cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    ),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      SwitchPrimitives__namespace.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
+var Label2 = React6__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        ref,
+        className: cn(
+          "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Label2.displayName = "Label";
+function SortableSortFieldItem({
+  sortConfig,
+  fieldLabel,
+  onDirectionChange,
+  onDelete
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = sortable.useSortable({ id: sortConfig.field });
+  const style = {
+    transform: utilities.CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: "cls_sortable_sort_field_item flex items-center gap-3 p-3 border rounded-md bg-card",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ...attributes,
+            ...listeners,
+            className: "cls_drag_handle cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { className: "cls_drag_icon h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_field_label flex-1 text-sm font-medium", children: fieldLabel }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_direction_control flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: `switch-${sortConfig.field}`, className: "cls_direction_label text-xs text-muted-foreground", children: sortConfig.direction === "asc" ? "Ascending" : "Descending" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Switch,
+            {
+              id: `switch-${sortConfig.field}`,
+              checked: sortConfig.direction === "desc",
+              onCheckedChange: (checked) => onDirectionChange(checked ? "desc" : "asc"),
+              "aria-label": `Toggle sort direction for ${fieldLabel}`
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: onDelete,
+            className: "cls_delete_btn h-8 w-8 p-0 text-destructive hover:text-destructive",
+            "aria-label": `Remove ${fieldLabel} from sort`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "cls_delete_icon h-4 w-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function MultiSortDialog({
+  availableFields,
+  onSortChange,
+  initialSortFields = []
+}) {
+  const [isOpen, setIsOpen] = React6.useState(false);
+  const [sortFields, setSortFields] = React6.useState(initialSortFields);
+  const [isComboboxOpen, setIsComboboxOpen] = React6.useState(false);
+  const sensors = core.useSensors(
+    core.useSensor(core.PointerSensor),
+    core.useSensor(core.KeyboardSensor, {
+      coordinateGetter: sortable.sortableKeyboardCoordinates
+    })
+  );
+  React6.useEffect(() => {
+    if (isOpen) {
+      setSortFields(initialSortFields);
+    }
+  }, [isOpen, initialSortFields]);
+  const handleAddField = (fieldValue) => {
+    if (sortFields.some((sf) => sf.field === fieldValue)) {
+      return;
+    }
+    const newField = {
+      field: fieldValue,
+      direction: "asc"
+    };
+    setSortFields([...sortFields, newField]);
+    setIsComboboxOpen(false);
+  };
+  const handleDeleteField = (fieldValue) => {
+    setSortFields(sortFields.filter((sf) => sf.field !== fieldValue));
+  };
+  const handleDirectionChange = (fieldValue, direction) => {
+    setSortFields(
+      sortFields.map(
+        (sf) => sf.field === fieldValue ? { ...sf, direction } : sf
+      )
+    );
+  };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) {
+      return;
+    }
+    const oldIndex = sortFields.findIndex((sf) => sf.field === active.id);
+    const newIndex = sortFields.findIndex((sf) => sf.field === over.id);
+    if (oldIndex !== -1 && newIndex !== -1) {
+      setSortFields(sortable.arrayMove(sortFields, oldIndex, newIndex));
+    }
+  };
+  const handleApply = () => {
+    onSortChange([...sortFields]);
+    setIsOpen(false);
+  };
+  const handleCancel = () => {
+    setSortFields(initialSortFields);
+    setIsOpen(false);
+  };
+  const handleClearAll = () => {
+    setSortFields([]);
+  };
+  const availableFieldsToAdd = availableFields.filter(
+    (af) => !sortFields.some((sf) => sf.field === af.value)
+  );
+  const getFieldLabel = (fieldValue) => {
+    return availableFields.find((af) => af.value === fieldValue)?.label || fieldValue;
+  };
+  const hasActiveSorts = initialSortFields.length > 0;
+  const tooltipContent = hasActiveSorts ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_sort_tooltip_content space-y-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_tooltip_title text-xs font-semibold mb-1", children: "Active Sorts:" }),
+    initialSortFields.map((sortConfig, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_tooltip_item text-xs", children: [
+      index + 1,
+      ". ",
+      getFieldLabel(sortConfig.field),
+      " (",
+      sortConfig.direction === "asc" ? "Asc" : "Desc",
+      ")"
+    ] }, sortConfig.field))
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_sort_tooltip_content text-xs", children: "No active sorts" });
+  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "cls_sort_button",
+          "aria-label": "Open sort dialog",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.ArrowUpDown,
+              {
+                className: cn(
+                  "cls_sort_icon h-4 w-4 mr-2",
+                  hasActiveSorts && "text-blue-600"
+                )
+              }
+            ),
+            "Sort"
+          ]
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: tooltipContent })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "cls_sort_dialog_content max-w-lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Sort Images" }),
+        /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: "Add multiple fields to sort by and reorder them. Use the switch to toggle between ascending and descending." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_sort_dialog_body space-y-4 py-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_add_field_section", children: /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isComboboxOpen, onOpenChange: setIsComboboxOpen, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              variant: "outline",
+              role: "combobox",
+              "aria-expanded": isComboboxOpen,
+              className: "cls_add_field_combobox w-full justify-between",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_combobox_content flex items-center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "cls_plus_icon h-4 w-4 mr-2" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Add field" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "cls_chevron_icon ml-2 h-4 w-4 shrink-0 opacity-50" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "cls_combobox_popover w-full p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(Command, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CommandInput, { placeholder: "Search fields...", className: "cls_command_input" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(CommandList, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: "No fields found." }),
+              /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: availableFieldsToAdd.map((field) => /* @__PURE__ */ jsxRuntime.jsxs(
+                CommandItem,
+                {
+                  value: field.value,
+                  onSelect: () => handleAddField(field.value),
+                  className: "cls_command_item",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      lucideReact.Check,
+                      {
+                        className: cn(
+                          "cls_check_icon mr-2 h-4 w-4",
+                          "opacity-0"
+                        )
+                      }
+                    ),
+                    field.label
+                  ]
+                },
+                field.value
+              )) })
+            ] })
+          ] }) })
+        ] }) }),
+        sortFields.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_sort_fields_list space-y-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+          core.DndContext,
+          {
+            sensors,
+            collisionDetection: core.closestCenter,
+            onDragEnd: handleDragEnd,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              sortable.SortableContext,
+              {
+                items: sortFields.map((sf) => sf.field),
+                strategy: sortable.verticalListSortingStrategy,
+                children: sortFields.map((sortConfig) => /* @__PURE__ */ jsxRuntime.jsx(
+                  SortableSortFieldItem,
+                  {
+                    sortConfig,
+                    fieldLabel: getFieldLabel(sortConfig.field),
+                    onDirectionChange: (direction) => handleDirectionChange(sortConfig.field, direction),
+                    onDelete: () => handleDeleteField(sortConfig.field)
+                  },
+                  sortConfig.field
+                ))
+              }
+            )
+          }
+        ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_empty_sort_fields text-center py-8 text-sm text-muted-foreground", children: 'No sort fields added. Click "Add field" to add sorting criteria.' })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { children: [
+        sortFields.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            variant: "outline",
+            onClick: handleClearAll,
+            className: "cls_clear_all_btn",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "cls_clear_all_icon h-4 w-4 mr-2" }),
+              "Clear All"
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
@@ -845,5 +1180,6 @@ function MultiFilterDialog({
 
 exports.ExampleComponent = ExampleComponent;
 exports.MultiFilterDialog = MultiFilterDialog;
+exports.MultiSortDialog = MultiSortDialog;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map