@mesob/ui 0.1.1 → 0.2.0

package/dist/components/entity/index.js

@@ -355,7 +355,7 @@ function EntityBulkActions({
 }
 
 // src/components/entity/entity-detail-header.tsx
-import { IconChevronDown as IconChevronDown2 } from "@tabler/icons-react";
+import { IconChevronDown as IconChevronDown3, IconMenu2 } from "@tabler/icons-react";
 import { motion } from "motion/react";
 import { useLayoutEffect, useMemo, useRef, useState as useState2 } from "react";
 
@@ -375,8 +375,137 @@ function Card({ className, ...props }) {
   );
 }
 
-// src/components/entity/entity-detail-header.tsx
+// src/components/select.tsx
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { IconCheck as IconCheck2, IconChevronDown as IconChevronDown2, IconChevronUp } from "@tabler/icons-react";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function Select({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectValue({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs4(
+    SelectPrimitive.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx6(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx6(IconChevronDown2, { className: "size-4 opacity-50" }) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  align = "center",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs4(
+    SelectPrimitive.Content,
+    {
+      "data-slot": "select-content",
+      className: cn(
+        "bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position,
+      align,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx6(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx6(
+          SelectPrimitive.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx6(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs4(
+    SelectPrimitive.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx6("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx6(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx6(IconCheck2, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx6(SelectPrimitive.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    SelectPrimitive.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx6(IconChevronUp, { className: "size-4" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    SelectPrimitive.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx6(IconChevronDown2, { className: "size-4" })
+    }
+  );
+}
+
+// src/components/entity/entity-detail-header.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function EntityDetailHeader({
   title,
   icon,
@@ -408,6 +537,11 @@ function EntityDetailHeader({
   };
   useLayoutEffect(() => {
     const updateTabs = () => {
+      if (typeof window !== "undefined" && !window.matchMedia("(min-width: 640px)").matches) {
+        setVisibleTabs(tabs);
+        setOverflowTabs([]);
+        return;
+      }
       if (!containerRef.current) {
         return;
       }
@@ -507,7 +641,7 @@ function EntityDetailHeader({
       }
     };
     if (tab.href && LinkComponent) {
-      return /* @__PURE__ */ jsx6(
+      return /* @__PURE__ */ jsx7(
         LinkComponent,
         {
           href: tab.href,
@@ -518,7 +652,7 @@ function EntityDetailHeader({
         tab.value
       );
     }
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -537,9 +671,9 @@ function EntityDetailHeader({
       isActive && "bg-accent font-medium"
     );
     if (tab.href && LinkComponent) {
-      return /* @__PURE__ */ jsx6(DropdownMenuItem, { asChild: true, className: itemClassName, children: /* @__PURE__ */ jsx6(LinkComponent, { href: tab.href, children: tab.name }) }, tab.value);
+      return /* @__PURE__ */ jsx7(DropdownMenuItem, { asChild: true, className: itemClassName, children: /* @__PURE__ */ jsx7(LinkComponent, { href: tab.href, children: tab.name }) }, tab.value);
     }
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       DropdownMenuItem,
       {
         onClick: () => handleTabChange(tab.value),
@@ -549,59 +683,75 @@ function EntityDetailHeader({
       tab.value
     );
   };
-  return /* @__PURE__ */ jsxs4("div", { className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsxs4(Card, { className: "overflow-hidden p-0 gap-0", children: [
-      /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-2 p-4 pb-2 ", children: [
-        /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs5("div", { className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ jsxs5(Card, { className: "overflow-hidden p-0 gap-0", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between gap-2 p-4 pb-2 ", children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
           backButton,
           icon,
-          /* @__PURE__ */ jsx6("span", { className: "text-lg font-semibold", children: title })
+          /* @__PURE__ */ jsx7("span", { className: "text-lg font-semibold", children: title })
         ] }),
-        actions && /* @__PURE__ */ jsx6("div", { className: "flex items-center gap-2", children: actions })
+        actions && /* @__PURE__ */ jsx7("div", { className: "flex items-center gap-2", children: actions })
       ] }),
-      /* @__PURE__ */ jsx6("div", { ref: containerRef, className: "w-full px-4 ", children: /* @__PURE__ */ jsxs4("div", { ref: tabsListRef, className: "relative flex items-center", children: [
-        visibleTabs.map((tab) => {
-          const originalIndex = tabs.findIndex(
-            (t) => t.value === tab.value
-          );
-          return renderTab(tab, originalIndex);
-        }),
-        overflowTabs.length > 0 && /* @__PURE__ */ jsxs4(DropdownMenu, { children: [
-          /* @__PURE__ */ jsxs4(
-            DropdownMenuTrigger,
-            {
-              ref: dropdownTriggerRef,
-              className: cn(
-                "relative z-10 flex items-center gap-1 px-4 py-3 text-sm font-medium transition-all duration-200",
-                "hover:bg-muted/60 rounded-t-md",
-                overflowTabs.some((tab) => tab.value === activeTab) ? "text-primary" : "text-muted-foreground hover:text-foreground"
-              ),
-              children: [
-                "More",
-                /* @__PURE__ */ jsx6(IconChevronDown2, { className: "h-4 w-4" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx6(DropdownMenuContent, { align: "start", className: "min-w-40", children: overflowTabs.map(renderDropdownItem) })
-        ] }),
-        /* @__PURE__ */ jsx6(
-          motion.div,
+      /* @__PURE__ */ jsxs5("div", { ref: containerRef, className: "w-full px-4", children: [
+        /* @__PURE__ */ jsx7("div", { className: "mb-3 w-full sm:hidden", children: /* @__PURE__ */ jsxs5(Select, { value: activeTab, onValueChange: handleTabChange, children: [
+          /* @__PURE__ */ jsxs5(SelectTrigger, { className: "h-9 w-full gap-2 [&>svg:first-child]:shrink-0", children: [
+            /* @__PURE__ */ jsx7(IconMenu2, { className: "size-4 text-muted-foreground" }),
+            /* @__PURE__ */ jsx7(SelectValue, {})
+          ] }),
+          /* @__PURE__ */ jsx7(SelectContent, { children: tabs.map((tab) => /* @__PURE__ */ jsx7(SelectItem, { value: tab.value, children: tab.name }, tab.value)) })
+        ] }) }),
+        /* @__PURE__ */ jsxs5(
+          "div",
           {
-            className: "absolute bottom-0 left-0 z-20 h-0.5 bg-primary",
-            animate: {
-              left: underlineStyle.left,
-              width: underlineStyle.width
-            },
-            transition: {
-              type: "spring",
-              stiffness: 400,
-              damping: 40
-            }
+            ref: tabsListRef,
+            className: "relative hidden items-center sm:flex",
+            children: [
+              visibleTabs.map((tab) => {
+                const originalIndex = tabs.findIndex(
+                  (t) => t.value === tab.value
+                );
+                return renderTab(tab, originalIndex);
+              }),
+              overflowTabs.length > 0 && /* @__PURE__ */ jsxs5(DropdownMenu, { children: [
+                /* @__PURE__ */ jsxs5(
+                  DropdownMenuTrigger,
+                  {
+                    ref: dropdownTriggerRef,
+                    className: cn(
+                      "relative z-10 flex items-center gap-1 px-4 py-3 text-sm font-medium transition-all duration-200",
+                      "hover:bg-muted/60 rounded-t-md",
+                      overflowTabs.some((tab) => tab.value === activeTab) ? "text-primary" : "text-muted-foreground hover:text-foreground"
+                    ),
+                    children: [
+                      "More",
+                      /* @__PURE__ */ jsx7(IconChevronDown3, { className: "h-4 w-4" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx7(DropdownMenuContent, { align: "start", className: "min-w-40", children: overflowTabs.map(renderDropdownItem) })
+              ] }),
+              /* @__PURE__ */ jsx7(
+                motion.div,
+                {
+                  className: "absolute bottom-0 left-0 z-20 h-0.5 bg-primary",
+                  animate: {
+                    left: underlineStyle.left,
+                    width: underlineStyle.width
+                  },
+                  transition: {
+                    type: "spring",
+                    stiffness: 400,
+                    damping: 40
+                  }
+                }
+              )
+            ]
           }
         )
-      ] }) })
+      ] })
     ] }),
-    activeTabData?.content && /* @__PURE__ */ jsx6("div", { className: "flex-1", children: activeTabData.content })
+    activeTabData?.content && /* @__PURE__ */ jsx7("div", { className: "flex-1", children: activeTabData.content })
   ] });
 }
 
@@ -611,20 +761,20 @@ import { useState as useState3 } from "react";
 // src/components/sheet.tsx
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { IconX } from "@tabler/icons-react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function Sheet({ ...props }) {
-  return /* @__PURE__ */ jsx7(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+  return /* @__PURE__ */ jsx8(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
 }
 function SheetPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+  return /* @__PURE__ */ jsx8(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
 }
 function SheetOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     SheetPrimitive.Overlay,
     {
       "data-slot": "sheet-overlay",
@@ -642,9 +792,9 @@ function SheetContent({
   side = "right",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs5(SheetPortal, { children: [
-    /* @__PURE__ */ jsx7(SheetOverlay, {}),
-    /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(SheetPortal, { children: [
+    /* @__PURE__ */ jsx8(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs6(
       SheetPrimitive.Content,
       {
         "data-slot": "sheet-content",
@@ -659,9 +809,9 @@ function SheetContent({
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsxs5(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
-            /* @__PURE__ */ jsx7(IconX, { className: "size-4" }),
-            /* @__PURE__ */ jsx7("span", { className: "sr-only", children: "Close" })
+          /* @__PURE__ */ jsxs6(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
+            /* @__PURE__ */ jsx8(IconX, { className: "size-4" }),
+            /* @__PURE__ */ jsx8("span", { className: "sr-only", children: "Close" })
           ] })
         ]
       }
@@ -669,7 +819,7 @@ function SheetContent({
   ] });
 }
 function SheetHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       "data-slot": "sheet-header",
@@ -682,7 +832,7 @@ function SheetTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     SheetPrimitive.Title,
     {
       "data-slot": "sheet-title",
@@ -693,7 +843,7 @@ function SheetTitle({
 }
 
 // src/components/entity/entity-drawer.tsx
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var sizeClasses = {
   sm: "sm:max-w-sm",
   md: "sm:max-w-md",
@@ -721,8 +871,8 @@ function EntityDrawer({
     setShowConfirm(false);
     onClose();
   };
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx8(Sheet, { open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsx9(Sheet, { open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: /* @__PURE__ */ jsxs7(
       SheetContent,
       {
         className: `${sizeClasses[size]} flex flex-col p-0`,
@@ -739,20 +889,20 @@ function EntityDrawer({
           }
         },
         children: [
-          /* @__PURE__ */ jsx8(SheetHeader, { className: "border-b px-6 py-4", children: /* @__PURE__ */ jsx8(SheetTitle, { children: title }) }),
-          /* @__PURE__ */ jsx8("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: form }),
-          /* @__PURE__ */ jsx8("div", { className: "border-t px-6 py-4", children: actions })
+          /* @__PURE__ */ jsx9(SheetHeader, { className: "border-b px-6 py-4", children: /* @__PURE__ */ jsx9(SheetTitle, { children: title }) }),
+          /* @__PURE__ */ jsx9("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: form }),
+          /* @__PURE__ */ jsx9("div", { className: "border-t px-6 py-4", children: actions })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx8(AlertDialog, { open: showConfirm, onOpenChange: setShowConfirm, children: /* @__PURE__ */ jsxs6(AlertDialogContent, { children: [
-      /* @__PURE__ */ jsxs6(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsx8(AlertDialogTitle, { children: "Discard changes?" }),
-        /* @__PURE__ */ jsx8(AlertDialogDescription, { children: "You have unsaved changes. Are you sure you want to discard them?" })
+    /* @__PURE__ */ jsx9(AlertDialog, { open: showConfirm, onOpenChange: setShowConfirm, children: /* @__PURE__ */ jsxs7(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs7(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx9(AlertDialogTitle, { children: "Discard changes?" }),
+        /* @__PURE__ */ jsx9(AlertDialogDescription, { children: "You have unsaved changes. Are you sure you want to discard them?" })
       ] }),
-      /* @__PURE__ */ jsxs6(AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsx8(AlertDialogCancel, { children: "Cancel" }),
-        /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsxs7(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx9(AlertDialogCancel, { children: "Cancel" }),
+        /* @__PURE__ */ jsx9(
           AlertDialogAction,
           {
             onClick: handleConfirmDiscard,
@@ -768,7 +918,7 @@ function EntityDrawer({
 // src/components/entity/entity-drawer-trigger.tsx
 import { IconChevronRight as IconChevronRight2, IconPencil, IconPlus } from "@tabler/icons-react";
 import { useState as useState4 } from "react";
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function EntityDrawerTrigger({
   mode,
   entity,
@@ -798,8 +948,8 @@ function EntityDrawerTrigger({
     }
   };
   const buttonLabel = label || (mode === "new" ? `New ${entity}` : `Edit ${entity}`);
-  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
-    mode === "edit" && variant === "icon" && /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    mode === "edit" && variant === "icon" && /* @__PURE__ */ jsx10(
       Button,
       {
         variant: "ghost",
@@ -807,10 +957,10 @@ function EntityDrawerTrigger({
         className: `h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity ${className}`,
         onClick: handleOpen,
         disabled,
-        children: /* @__PURE__ */ jsx9(IconChevronRight2, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx10(IconChevronRight2, { className: "h-4 w-4" })
       }
     ),
-    mode === "edit" && variant !== "icon" && /* @__PURE__ */ jsxs7(
+    mode === "edit" && variant !== "icon" && /* @__PURE__ */ jsxs8(
       Button,
       {
         variant: variant === "outline" ? "outline" : "default",
@@ -819,22 +969,25 @@ function EntityDrawerTrigger({
         disabled,
         className,
         children: [
-          /* @__PURE__ */ jsx9(IconPencil, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsx10(IconPencil, { className: "mr-2 h-4 w-4" }),
           buttonLabel
         ]
       }
     ),
-    mode === "new" && /* @__PURE__ */ jsxs7(
+    mode === "new" && /* @__PURE__ */ jsxs8(
       Button,
       {
         variant: variant === "outline" ? "outline" : "default",
         size: "sm",
         onClick: handleOpen,
         disabled,
-        className,
+        className: cn(
+          "max-sm:h-8 max-sm:w-8 max-sm:shrink-0 max-sm:justify-center max-sm:p-0",
+          className
+        ),
         children: [
-          /* @__PURE__ */ jsx9(IconPlus, { className: "mr-2 h-4 w-4" }),
-          buttonLabel
+          /* @__PURE__ */ jsx10(IconPlus, { className: "h-4 w-4 sm:mr-2" }),
+          /* @__PURE__ */ jsx10("span", { className: "hidden sm:inline", children: buttonLabel })
         ]
       }
     ),
@@ -847,9 +1000,9 @@ import { IconPackage } from "@tabler/icons-react";
 
 // src/components/empty.tsx
 import { cva as cva2 } from "class-variance-authority";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function Empty({ className, ...props }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       "data-slot": "empty",
@@ -862,7 +1015,7 @@ function Empty({ className, ...props }) {
   );
 }
 function EmptyHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       "data-slot": "empty-header",
@@ -893,7 +1046,7 @@ function EmptyMedia({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       "data-slot": "empty-icon",
@@ -904,7 +1057,7 @@ function EmptyMedia({
   );
 }
 function EmptyTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       "data-slot": "empty-title",
@@ -914,7 +1067,7 @@ function EmptyTitle({ className, ...props }) {
   );
 }
 function EmptyDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       "data-slot": "empty-description",
@@ -927,7 +1080,7 @@ function EmptyDescription({ className, ...props }) {
   );
 }
 function EmptyContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       "data-slot": "empty-content",
@@ -941,7 +1094,7 @@ function EmptyContent({ className, ...props }) {
 }
 
 // src/components/entity/entity-empty-state.tsx
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function EntityEmptyState({
   icon: Icon2 = IconPackage,
   title,
@@ -955,185 +1108,56 @@ function EntityEmptyState({
   const defaultTitle = `No ${entityName}s yet`;
   const defaultDescription = `Get started by creating your first ${entityName}.`;
   const defaultActionLabel = `Create ${entityName}`;
-  return /* @__PURE__ */ jsxs8(Empty, { className: cn("border py-12", className), children: [
-    /* @__PURE__ */ jsxs8(EmptyHeader, { children: [
-      /* @__PURE__ */ jsx11(EmptyMedia, { variant: "icon", children: /* @__PURE__ */ jsx11(Icon2, { className: "size-5" }) }),
-      /* @__PURE__ */ jsx11(EmptyTitle, { children: title ?? defaultTitle }),
-      /* @__PURE__ */ jsx11(EmptyDescription, { children: description ?? defaultDescription })
+  return /* @__PURE__ */ jsxs9(Empty, { className: cn("border py-12", className), children: [
+    /* @__PURE__ */ jsxs9(EmptyHeader, { children: [
+      /* @__PURE__ */ jsx12(EmptyMedia, { variant: "icon", children: /* @__PURE__ */ jsx12(Icon2, { className: "size-5" }) }),
+      /* @__PURE__ */ jsx12(EmptyTitle, { children: title ?? defaultTitle }),
+      /* @__PURE__ */ jsx12(EmptyDescription, { children: description ?? defaultDescription })
     ] }),
-    /* @__PURE__ */ jsx11(EmptyContent, { children: children ?? (onAction && /* @__PURE__ */ jsx11(Button, { onClick: onAction, children: actionLabel ?? defaultActionLabel })) })
+    /* @__PURE__ */ jsx12(EmptyContent, { children: children ?? (onAction && /* @__PURE__ */ jsx12(Button, { onClick: onAction, children: actionLabel ?? defaultActionLabel })) })
   ] });
 }
 
 // src/components/entity/entity-filter.tsx
 import { IconFilter } from "@tabler/icons-react";
-import { parseAsString, useQueryState } from "nuqs";
-
-// src/components/select.tsx
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { IconCheck as IconCheck2, IconChevronDown as IconChevronDown3, IconChevronUp } from "@tabler/icons-react";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
-function Select({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx12(SelectPrimitive.Root, { "data-slot": "select", ...props });
-}
-function SelectValue({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx12(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
-}
-function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs9(
-    SelectPrimitive.Trigger,
-    {
-      "data-slot": "select-trigger",
-      "data-size": size,
-      className: cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx12(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx12(IconChevronDown3, { className: "size-4 opacity-50" }) })
-      ]
-    }
-  );
-}
-function SelectContent({
-  className,
-  children,
-  position = "popper",
-  align = "center",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx12(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs9(
-    SelectPrimitive.Content,
-    {
-      "data-slot": "select-content",
-      className: cn(
-        "bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
-        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
-      ),
-      position,
-      align,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx12(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx12(
-          SelectPrimitive.Viewport,
-          {
-            className: cn(
-              "p-1",
-              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
-            ),
-            children
-          }
-        ),
-        /* @__PURE__ */ jsx12(SelectScrollDownButton, {})
-      ]
-    }
-  ) });
-}
-function SelectItem({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs9(
-    SelectPrimitive.Item,
-    {
-      "data-slot": "select-item",
-      className: cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx12("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx12(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx12(IconCheck2, { className: "size-4" }) }) }),
-        /* @__PURE__ */ jsx12(SelectPrimitive.ItemText, { children })
-      ]
-    }
-  );
-}
-function SelectScrollUpButton({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx12(
-    SelectPrimitive.ScrollUpButton,
-    {
-      "data-slot": "select-scroll-up-button",
-      className: cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx12(IconChevronUp, { className: "size-4" })
-    }
-  );
-}
-function SelectScrollDownButton({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx12(
-    SelectPrimitive.ScrollDownButton,
-    {
-      "data-slot": "select-scroll-down-button",
-      className: cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx12(IconChevronDown3, { className: "size-4" })
-    }
-  );
-}
-
-// src/components/entity/entity-filter.tsx
+import { parseAsInteger, parseAsString, useQueryState } from "nuqs";
 import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 function EntityFilter({
-  paramKey = "filter",
   options,
   placeholder = "Filter",
   className,
   label
 }) {
-  const [filter, setFilter] = useQueryState(
-    paramKey,
-    parseAsString.withDefault("").withOptions({ shallow: false })
-  );
-  return /* @__PURE__ */ jsxs10("div", { className: cn("flex items-center gap-2", className), children: [
-    label && /* @__PURE__ */ jsx13("span", { className: "text-sm text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsxs10(
-      Select,
-      {
-        value: filter || void 0,
-        onValueChange: (value) => setFilter(value || null),
-        children: [
-          /* @__PURE__ */ jsxs10(SelectTrigger, { className: "w-[150px] h-9", children: [
-            /* @__PURE__ */ jsx13(IconFilter, { className: "mr-2 h-4 w-4" }),
-            /* @__PURE__ */ jsx13(SelectValue, { placeholder })
-          ] }),
-          /* @__PURE__ */ jsx13(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx13(SelectItem, { value: option.value, children: option.label }, option.value)) })
-        ]
-      }
-    )
+  const [value, setValue] = useQueryState("filter", parseAsString);
+  const [, setPage] = useQueryState("page", parseAsInteger.withDefault(1));
+  const handleChange = (newValue) => {
+    if (newValue === "__all__") {
+      setValue(null);
+    } else {
+      setValue(newValue || null);
+    }
+    setPage(1);
+  };
+  const validOptions = options.filter((opt) => opt.value !== "");
+  const displayValue = value || (options.some((opt) => opt.value === "") ? "__all__" : void 0);
+  return /* @__PURE__ */ jsxs10("div", { className: cn("flex w-full items-center gap-2", className), children: [
+    label && /* @__PURE__ */ jsx13("span", { className: "shrink-0 text-sm text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx13("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs10(Select, { value: displayValue, onValueChange: handleChange, children: [
+      /* @__PURE__ */ jsxs10(SelectTrigger, { className: "h-9 w-full min-w-[150px]", children: [
+        /* @__PURE__ */ jsx13(IconFilter, { className: "mr-2 h-4 w-4" }),
+        /* @__PURE__ */ jsx13(SelectValue, { placeholder })
+      ] }),
+      /* @__PURE__ */ jsxs10(SelectContent, { children: [
+        options.some((opt) => opt.value === "") && /* @__PURE__ */ jsx13(SelectItem, { value: "__all__", children: options.find((opt) => opt.value === "")?.label || "All" }, "__all__"),
+        validOptions.map((option) => /* @__PURE__ */ jsx13(SelectItem, { value: option.value, children: option.label }, option.value))
+      ] })
+    ] }) })
   ] });
 }
 
 // src/components/entity/entity-form-actions.tsx
 import {
-  IconCheck as IconCheck3,
-  IconPlus as IconPlus2,
+  IconDeviceFloppy,
   IconRotateClockwise,
   IconTrash as IconTrash2
 } from "@tabler/icons-react";
@@ -1181,9 +1205,8 @@ function EntityFormActions({
         disabled: disabled || isSubmitting,
         className: "cursor-pointer",
         children: [
-          isSubmitting && /* @__PURE__ */ jsx15(Spinner, { className: "mr-2 h-4 w-4" }),
-          !isSubmitting && mode === "new" && /* @__PURE__ */ jsx15(IconPlus2, { className: "mr-2 h-4 w-4" }),
-          !isSubmitting && mode === "edit" && /* @__PURE__ */ jsx15(IconCheck3, { className: "mr-2 h-4 w-4" }),
+          isSubmitting && /* @__PURE__ */ jsx15(Spinner, { className: " h-4 w-4" }),
+          !isSubmitting && /* @__PURE__ */ jsx15(IconDeviceFloppy, { className: " h-4 w-4" }),
           label
         ]
       }
@@ -1196,7 +1219,7 @@ function EntityFormActions({
         disabled,
         className: "cursor-pointer",
         children: [
-          /* @__PURE__ */ jsx15(IconRotateClockwise, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsx15(IconRotateClockwise, { className: " h-4 w-4" }),
           "Reset"
         ]
       }
@@ -1209,8 +1232,8 @@ function EntityFormActions({
           disabled: disabled || isDeleting,
           className: "cursor-pointer",
           children: [
-            isDeleting && /* @__PURE__ */ jsx15(Spinner, { className: "mr-2 h-4 w-4" }),
-            /* @__PURE__ */ jsx15(IconTrash2, { className: "mr-2 h-4 w-4" }),
+            isDeleting && /* @__PURE__ */ jsx15(Spinner, { className: "  h-4 w-4" }),
+            /* @__PURE__ */ jsx15(IconTrash2, { className: "  h-4 w-4" }),
             deleteLabel
           ]
         }
@@ -1251,6 +1274,8 @@ function EntityFormActions({
 }
 
 // src/components/entity/entity-header.tsx
+import { IconChevronDown as IconChevronDown4, IconChevronUp as IconChevronUp2 } from "@tabler/icons-react";
+import { useState as useState5 } from "react";
 import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function EntityHeader({
   title,
@@ -1261,22 +1286,48 @@ function EntityHeader({
   sort,
   view
 }) {
+  const [toolbarOpen, setToolbarOpen] = useState5(false);
+  const hasToolbar = [search, filter, sort, view].some(Boolean);
   return /* @__PURE__ */ jsx16(Card, { className: "p-4", children: /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between gap-2", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
         icon,
         /* @__PURE__ */ jsx16("span", { className: "text-lg font-semibold", children: title })
       ] }),
-      actions
-    ] }),
-    /* @__PURE__ */ jsxs12("div", { className: "flex flex-col md:flex-row md:items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsx16("div", { className: "grow", children: search }),
       /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
-        filter,
-        sort,
-        view
+        actions,
+        hasToolbar && /* @__PURE__ */ jsx16(
+          Button,
+          {
+            variant: "secondary",
+            size: "icon-sm",
+            className: "md:hidden",
+            onClick: () => setToolbarOpen((o) => !o),
+            "aria-expanded": toolbarOpen,
+            "aria-label": toolbarOpen ? "Hide filters" : "Show filters",
+            children: toolbarOpen ? /* @__PURE__ */ jsx16(IconChevronUp2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx16(IconChevronDown4, { className: "h-4 w-4" })
+          }
+        )
       ] })
-    ] })
+    ] }),
+    hasToolbar && /* @__PURE__ */ jsxs12(
+      "div",
+      {
+        className: cn(
+          "flex flex-col gap-2 md:flex-row md:items-center md:justify-between",
+          !toolbarOpen && "hidden",
+          "md:flex"
+        ),
+        children: [
+          /* @__PURE__ */ jsx16("div", { className: "w-full *:w-full *:max-w-none md:*:max-w-md md:grow", children: search }),
+          /* @__PURE__ */ jsxs12("div", { className: "flex w-full flex-col gap-2 *:w-full md:w-auto md:flex-row md:items-center md:gap-2 md:*:w-auto", children: [
+            filter,
+            sort,
+            view
+          ] })
+        ]
+      }
+    )
   ] }) });
 }
 
@@ -1305,7 +1356,7 @@ function Table({ className, ...props }) {
         "table",
         {
           "data-slot": "table",
-          className: cn("w-full caption-bottom text-sm", className),
+          className: cn("w-full caption-bottom text-sm px-2", className),
           ...props
         }
       )
@@ -1413,7 +1464,7 @@ function EntityLoadingState({
 
 // src/components/entity/entity-search.tsx
 import { IconSearch, IconX as IconX2 } from "@tabler/icons-react";
-import { parseAsString as parseAsString2, useQueryState as useQueryState2 } from "nuqs";
+import { parseAsInteger as parseAsInteger2, parseAsString as parseAsString2, useQueryState as useQueryState2 } from "nuqs";
 import { useRef as useRef2 } from "react";
 import { useDebouncedCallback } from "use-debounce";
 
@@ -1443,33 +1494,36 @@ function EntitySearch({
   placeholder = "Search...",
   className
 }) {
-  const ref = useRef2(null);
-  const [search, setSearch] = useQueryState2(
+  const [value, setValue] = useQueryState2(
     paramKey,
-    parseAsString2.withDefault("").withOptions({ shallow: false })
+    parseAsString2.withDefault("")
   );
+  const [, setPage] = useQueryState2("page", parseAsInteger2.withDefault(1));
+  const ref = useRef2(null);
   const handleSearch = useDebouncedCallback((term) => {
-    setSearch(term || null);
+    setValue(term || null);
+    setPage(1);
   }, 300);
   const handleClear = () => {
-    setSearch(null);
+    setValue(null);
+    setPage(1);
     if (ref.current) {
       ref.current.value = "";
     }
   };
-  return /* @__PURE__ */ jsxs14("div", { className: cn("relative", className), children: [
+  return /* @__PURE__ */ jsxs14("div", { className: cn("relative w-full min-w-0", className), children: [
     /* @__PURE__ */ jsx21(IconSearch, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
     /* @__PURE__ */ jsx21(
       Input,
       {
         ref,
         placeholder,
-        defaultValue: search,
+        defaultValue: value,
         onChange: (e) => handleSearch(e.target.value),
-        className: "pl-9 pr-9"
+        className: "w-full min-w-0 pl-9 pr-9"
       }
     ),
-    search && /* @__PURE__ */ jsx21(
+    value && /* @__PURE__ */ jsx21(
       "button",
       {
         type: "button",
@@ -1486,37 +1540,42 @@ import {
   IconSortAscendingLetters,
   IconSortDescendingLetters
 } from "@tabler/icons-react";
-import { parseAsString as parseAsString3, useQueryState as useQueryState3 } from "nuqs";
+import { parseAsInteger as parseAsInteger3, parseAsString as parseAsString3, useQueryState as useQueryState3 } from "nuqs";
 import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 function EntitySort({
-  sortKey = "sort",
-  orderKey = "order",
   options,
-  defaultSort,
+  defaultSort = "createdAt",
+  defaultOrder = "desc",
   className
 }) {
   const [sort, setSort] = useQueryState3(
-    sortKey,
-    parseAsString3.withDefault(defaultSort || options[0]?.value || "").withOptions({ shallow: false })
+    "sort",
+    parseAsString3.withDefault(defaultSort)
   );
   const [order, setOrder] = useQueryState3(
-    orderKey,
-    parseAsString3.withDefault("desc").withOptions({ shallow: false })
+    "order",
+    parseAsString3.withDefault(defaultOrder)
   );
+  const [, setPage] = useQueryState3("page", parseAsInteger3.withDefault(1));
+  const handleSortChange = (value) => {
+    setSort(value);
+    setPage(1);
+  };
   const toggleOrder = () => {
     setOrder(order === "asc" ? "desc" : "asc");
+    setPage(1);
   };
-  return /* @__PURE__ */ jsxs15("div", { className: cn("flex items-center gap-0", className), children: [
-    /* @__PURE__ */ jsxs15(Select, { value: sort, onValueChange: setSort, children: [
-      /* @__PURE__ */ jsx22(SelectTrigger, { className: "w-[150px] h-9 rounded-r-none border-r-0", children: /* @__PURE__ */ jsx22(SelectValue, { placeholder: "Sort by" }) }),
+  return /* @__PURE__ */ jsxs15("div", { className: cn("flex w-full items-center gap-0", className), children: [
+    /* @__PURE__ */ jsx22("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs15(Select, { value: sort, onValueChange: handleSortChange, children: [
+      /* @__PURE__ */ jsx22(SelectTrigger, { className: "h-9 w-full min-w-[150px] rounded-r-none border-r-0", children: /* @__PURE__ */ jsx22(SelectValue, { placeholder: "Sort by" }) }),
       /* @__PURE__ */ jsx22(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx22(SelectItem, { value: option.value, children: option.label }, option.value)) })
-    ] }),
+    ] }) }),
     /* @__PURE__ */ jsx22(
       Button,
       {
         variant: "outline",
         size: "icon",
-        className: "h-9 rounded-l-none",
+        className: "h-9 shrink-0 rounded-l-none",
         onClick: toggleOrder,
         children: order === "asc" ? /* @__PURE__ */ jsx22(IconSortAscendingLetters, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx22(IconSortDescendingLetters, { className: "h-4 w-4" })
       }
@@ -1625,28 +1684,26 @@ var viewIcons = {
   list: /* @__PURE__ */ jsx25(IconList, { className: "h-4 w-4" })
 };
 function EntityViewToggle({
-  paramKey = "view",
-  defaultView = "table",
   views = ["table", "card"],
   className
 }) {
-  const [view, setView] = useQueryState4(
-    paramKey,
-    parseAsString4.withDefault(defaultView).withOptions({ shallow: false })
+  const [value, setValue] = useQueryState4(
+    "view",
+    parseAsString4.withDefault("table")
   );
   return /* @__PURE__ */ jsx25(
     ToggleGroup,
     {
       type: "single",
-      value: view,
-      onValueChange: (value) => value && setView(value),
-      className: cn("border rounded-md", className),
+      value,
+      onValueChange: (v) => v && setValue(v),
+      className: cn("w-full! border rounded-md md:w-auto!", className),
       children: views.map((v) => /* @__PURE__ */ jsx25(
         ToggleGroupItem,
         {
           value: v,
           "aria-label": `${v} view`,
-          className: "h-9 px-3",
+          className: "h-9 min-w-0 flex-1 px-3",
           children: viewIcons[v]
         },
         v
@@ -1654,6 +1711,67 @@ function EntityViewToggle({
     }
   );
 }
+
+// src/components/entity/use-entity-pagination.ts
+function useEntityPagination({
+  items,
+  total,
+  pageSize
+}) {
+  const totalCount = Number(total ?? items.length);
+  const pageCount = Math.ceil(totalCount / pageSize);
+  return {
+    total: totalCount,
+    pageCount,
+    hasData: items.length > 0,
+    isEmpty: totalCount === 0
+  };
+}
+
+// src/components/entity/use-entity-params.ts
+import { parseAsInteger as parseAsInteger4, parseAsString as parseAsString5, useQueryStates } from "nuqs";
+import { useMemo as useMemo2 } from "react";
+function useEntityParams(config = {}) {
+  const {
+    searchKey = "search",
+    searchParamName,
+    defaultSort = "createdAt",
+    defaultOrder = "desc",
+    defaultPageSize = 10
+  } = config;
+  const [params, setParams] = useQueryStates({
+    ...searchKey && {
+      [searchKey]: parseAsString5.withDefault("")
+    },
+    view: parseAsString5.withDefault("table"),
+    page: parseAsInteger4.withDefault(1),
+    pageSize: parseAsInteger4.withDefault(defaultPageSize),
+    filter: parseAsString5,
+    sort: parseAsString5.withDefault(defaultSort),
+    order: parseAsString5.withDefault(defaultOrder)
+  });
+  const queryConfig = useMemo2(
+    () => ({
+      params: {
+        query: {
+          page: params.page,
+          limit: params.pageSize,
+          ...searchKey && params[searchKey] && {
+            [searchParamName || (searchKey === "search" ? "search" : "handle")]: params[searchKey]
+          },
+          ...params.filter && { filter: params.filter },
+          ...params.sort && { sort: params.sort, order: params.order }
+        }
+      }
+    }),
+    [params, searchKey, searchParamName]
+  );
+  return {
+    params,
+    setParams,
+    queryConfig
+  };
+}
 export {
   EntityBulkActions,
   EntityDetailHeader,
@@ -1666,6 +1784,8 @@ export {
   EntityLoadingState,
   EntitySearch,
   EntitySort,
-  EntityViewToggle
+  EntityViewToggle,
+  useEntityPagination,
+  useEntityParams
 };
 //# sourceMappingURL=index.js.map