@mesob/ui 0.1.1 → 0.2.1

package/dist/components/entity/index.js

@@ -12,18 +12,18 @@ function cn(...inputs) {
 // src/components/button.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { jsx } from "react/jsx-runtime";
+import { jsxs } from "react/jsx-runtime";
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        default: "bg-primary text-primary-foreground hover:bg-primary-600 dark:hover:bg-primary-400",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-600 dark:hover:bg-secondary-400",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
+        link: "text-primary underline-offset-4 hover:text-primary-600 dark:hover:text-primary-400 hover:underline"
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -45,47 +45,55 @@ function Button({
   variant,
   size,
   asChild = false,
+  leftIcon,
+  rightIcon,
+  children,
   ...props
 }) {
   const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Comp,
     {
       "data-slot": "button",
       className: cn(buttonVariants({ variant, size, className })),
-      ...props
+      ...props,
+      children: [
+        leftIcon,
+        children,
+        rightIcon
+      ]
     }
   );
 }
 
 // src/components/alert-dialog.tsx
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs as jsxs2 } from "react/jsx-runtime";
 function AlertDialog({
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
 }
 function AlertDialogTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
 }
 function AlertDialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
 }
 function AlertDialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Overlay,
     {
       "data-slot": "alert-dialog-overlay",
       className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:opacity-100 fixed inset-0 z-50 bg-[var(--overlay,oklch(0_0_0/0.5))]",
         className
       ),
       ...props
@@ -96,14 +104,14 @@ function AlertDialogContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
-    /* @__PURE__ */ jsx2(AlertDialogOverlay, {}),
-    /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs2(AlertDialogPortal, { children: [
+    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsx(
       AlertDialogPrimitive.Content,
       {
         "data-slot": "alert-dialog-content",
         className: cn(
-          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          "bg-background text-foreground border-border 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 fixed top-[50%] left-[50%] z-[51] grid w-full min-w-[280px] max-w-[calc(100vw-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:min-w-[320px] sm:max-w-[32rem]",
           className
         ),
         ...props
@@ -115,7 +123,7 @@ function AlertDialogHeader({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "alert-dialog-header",
@@ -128,7 +136,7 @@ function AlertDialogFooter({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "alert-dialog-footer",
@@ -144,7 +152,7 @@ function AlertDialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Title,
     {
       "data-slot": "alert-dialog-title",
@@ -157,7 +165,7 @@ function AlertDialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Description,
     {
       "data-slot": "alert-dialog-description",
@@ -170,7 +178,7 @@ function AlertDialogAction({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Action,
     {
       className: cn(buttonVariants(), className),
@@ -182,7 +190,7 @@ function AlertDialogCancel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Cancel,
     {
       className: cn(buttonVariants({ variant: "outline" }), className),
@@ -194,16 +202,16 @@ function AlertDialogCancel({
 // src/components/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { IconCheck, IconChevronRight, IconCircle } from "@tabler/icons-react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs3 } from "react/jsx-runtime";
 function DropdownMenu({
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+  return /* @__PURE__ */ jsx2(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
 }
 function DropdownMenuTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     DropdownMenuPrimitive.Trigger,
     {
       "data-slot": "dropdown-menu-trigger",
@@ -216,13 +224,13 @@ function DropdownMenuContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx2(
     DropdownMenuPrimitive.Content,
     {
       "data-slot": "dropdown-menu-content",
       sideOffset,
       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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        "bg-popover text-popover-foreground border-border 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
         className
       ),
       ...props
@@ -235,7 +243,7 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     DropdownMenuPrimitive.Item,
     {
       "data-slot": "dropdown-menu-item",
@@ -253,7 +261,7 @@ function DropdownMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     DropdownMenuPrimitive.Separator,
     {
       "data-slot": "dropdown-menu-separator",
@@ -264,7 +272,7 @@ function DropdownMenuSeparator({
 }
 
 // src/components/entity/entity-bulk-actions.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs4 } from "react/jsx-runtime";
 function EntityBulkActions({
   selectedCount,
   actions,
@@ -278,22 +286,22 @@ function EntityBulkActions({
   if (onExport) {
     defaultActions.push({
       label: "Export",
-      icon: /* @__PURE__ */ jsx4(IconDownload, { className: "mr-2 h-4 w-4" }),
+      icon: /* @__PURE__ */ jsx3(IconDownload, { className: "mr-2 h-4 w-4" }),
       onClick: onExport
     });
   }
   if (onDelete) {
     defaultActions.push({
       label: "Delete",
-      icon: /* @__PURE__ */ jsx4(IconTrash, { className: "mr-2 h-4 w-4" }),
+      icon: /* @__PURE__ */ jsx3(IconTrash, { className: "mr-2 h-4 w-4" }),
       onClick: () => setShowDeleteConfirm(true),
       variant: "destructive"
     });
   }
   const allActions = actions ? [...actions, ...defaultActions] : defaultActions;
-  return /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsxs3(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx4(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsxs4(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx3(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs4(
         Button,
         {
           variant: "outline",
@@ -302,13 +310,13 @@ function EntityBulkActions({
           className: "min-w-[140px]",
           children: [
             hasSelection ? `${selectedCount} selected` : "Bulk Actions",
-            /* @__PURE__ */ jsx4(IconChevronDown, { className: "ml-2 h-4 w-4" })
+            /* @__PURE__ */ jsx3(IconChevronDown, { className: "ml-2 h-4 w-4" })
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx4(DropdownMenuContent, { align: "end", children: allActions.map((action, index) => /* @__PURE__ */ jsxs3("div", { children: [
-        action.variant === "destructive" && index > 0 && /* @__PURE__ */ jsx4(DropdownMenuSeparator, {}),
-        /* @__PURE__ */ jsxs3(
+      /* @__PURE__ */ jsx3(DropdownMenuContent, { align: "end", children: allActions.map((action, index) => /* @__PURE__ */ jsxs4("div", { children: [
+        action.variant === "destructive" && index > 0 && /* @__PURE__ */ jsx3(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxs4(
           DropdownMenuItem,
           {
             onClick: action.onClick,
@@ -321,24 +329,24 @@ function EntityBulkActions({
         )
       ] }, action.label)) })
     ] }),
-    /* @__PURE__ */ jsx4(AlertDialog, { open: showDeleteConfirm, onOpenChange: setShowDeleteConfirm, children: /* @__PURE__ */ jsxs3(AlertDialogContent, { children: [
-      /* @__PURE__ */ jsxs3(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsxs3(AlertDialogTitle, { children: [
+    /* @__PURE__ */ jsx3(AlertDialog, { open: showDeleteConfirm, onOpenChange: setShowDeleteConfirm, children: /* @__PURE__ */ jsxs4(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs4(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsxs4(AlertDialogTitle, { children: [
           "Delete ",
           selectedCount,
           " ",
           itemName,
           "(s)?"
         ] }),
-        /* @__PURE__ */ jsxs3(AlertDialogDescription, { children: [
+        /* @__PURE__ */ jsxs4(AlertDialogDescription, { children: [
           "This will permanently delete the selected ",
           itemName,
           "(s). This action cannot be undone."
         ] })
       ] }),
-      /* @__PURE__ */ jsxs3(AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsx4(AlertDialogCancel, { children: "Cancel" }),
-        /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsxs4(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx3(AlertDialogCancel, { children: "Cancel" }),
+        /* @__PURE__ */ jsx3(
           AlertDialogAction,
           {
             onClick: () => {
@@ -355,19 +363,19 @@ 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";
 
 // src/components/card.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function Card({ className, ...props }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       "data-slot": "card",
       className: cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 ",
+        "bg-card text-card-foreground border-border flex flex-col gap-6 rounded-xl border py-6",
         className
       ),
       ...props
@@ -375,8 +383,137 @@ function Card({ className, ...props }) {
   );
 }
 
+// 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 jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function Select({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectValue({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs5(
+    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__ */ jsx5(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx5(IconChevronDown2, { className: "size-4 opacity-50" }) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  align = "center",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs5(
+    SelectPrimitive.Content,
+    {
+      "data-slot": "select-content",
+      className: cn(
+        "bg-popover text-popover-foreground border-border 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__ */ jsx5(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx5(
+          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__ */ jsx5(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs5(
+    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__ */ jsx5("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx5(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx5(IconCheck2, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx5(SelectPrimitive.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    SelectPrimitive.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx5(IconChevronUp, { className: "size-4" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    SelectPrimitive.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx5(IconChevronDown2, { className: "size-4" })
+    }
+  );
+}
+
 // src/components/entity/entity-detail-header.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function EntityDetailHeader({
   title,
   icon,
@@ -408,6 +545,11 @@ function EntityDetailHeader({
   };
   useLayoutEffect(() => {
     const updateTabs = () => {
+      if (typeof window !== "undefined" && !window.matchMedia("(min-width: 640px)").matches) {
+        setVisibleTabs(tabs);
+        setOverflowTabs([]);
+        return;
+      }
       if (!containerRef.current) {
         return;
       }
@@ -549,57 +691,73 @@ 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__ */ jsxs6("div", { className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ jsxs6(Card, { className: "overflow-hidden p-0 gap-0", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between gap-2 p-4 pb-2 ", children: [
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
           backButton,
           icon,
           /* @__PURE__ */ jsx6("span", { className: "text-lg font-semibold", children: title })
         ] }),
         actions && /* @__PURE__ */ jsx6("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__ */ jsxs6("div", { ref: containerRef, className: "w-full px-4", children: [
+        /* @__PURE__ */ jsx6("div", { className: "mb-3 w-full sm:hidden", children: /* @__PURE__ */ jsxs6(Select, { value: activeTab, onValueChange: handleTabChange, children: [
+          /* @__PURE__ */ jsxs6(SelectTrigger, { className: "h-9 w-full gap-2 [&>svg:first-child]:shrink-0", children: [
+            /* @__PURE__ */ jsx6(IconMenu2, { className: "size-4 text-muted-foreground" }),
+            /* @__PURE__ */ jsx6(SelectValue, {})
+          ] }),
+          /* @__PURE__ */ jsx6(SelectContent, { children: tabs.map((tab) => /* @__PURE__ */ jsx6(SelectItem, { value: tab.value, children: tab.name }, tab.value)) })
+        ] }) }),
+        /* @__PURE__ */ jsxs6(
+          "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__ */ jsxs6(DropdownMenu, { children: [
+                /* @__PURE__ */ jsxs6(
+                  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(IconChevronDown3, { className: "h-4 w-4" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx6(DropdownMenuContent, { align: "start", className: "min-w-40", children: overflowTabs.map(renderDropdownItem) })
+              ] }),
+              /* @__PURE__ */ jsx6(
+                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 })
   ] });
@@ -611,7 +769,7 @@ 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 jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function Sheet({ ...props }) {
   return /* @__PURE__ */ jsx7(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
 }
@@ -629,7 +787,7 @@ function SheetOverlay({
     {
       "data-slot": "sheet-overlay",
       className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:opacity-100 fixed inset-0 z-50 bg-[var(--overlay,oklch(0_0_0/0.5))]",
         className
       ),
       ...props
@@ -642,14 +800,14 @@ function SheetContent({
   side = "right",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs5(SheetPortal, { children: [
+  return /* @__PURE__ */ jsxs7(SheetPortal, { children: [
     /* @__PURE__ */ jsx7(SheetOverlay, {}),
-    /* @__PURE__ */ jsxs5(
+    /* @__PURE__ */ jsxs7(
       SheetPrimitive.Content,
       {
         "data-slot": "sheet-content",
         className: cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          "bg-background text-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:opacity-100 fixed z-[51] flex min-w-0 flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
           side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
           side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
           side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
@@ -659,7 +817,7 @@ 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__ */ jsxs7(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" })
           ] })
@@ -693,12 +851,12 @@ 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 jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var sizeClasses = {
-  sm: "sm:max-w-sm",
-  md: "sm:max-w-md",
-  lg: "sm:max-w-lg",
-  xl: "sm:max-w-xl"
+  sm: "w-full min-w-0 sm:!max-w-[24rem]",
+  md: "w-full min-w-0 sm:!max-w-[28rem]",
+  lg: "w-full min-w-0 sm:!max-w-[32rem]",
+  xl: "w-full min-w-0 sm:!max-w-[36rem]"
 };
 function EntityDrawer({
   title,
@@ -721,11 +879,11 @@ function EntityDrawer({
     setShowConfirm(false);
     onClose();
   };
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx8(Sheet, { open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx8(Sheet, { open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: /* @__PURE__ */ jsxs8(
       SheetContent,
       {
-        className: `${sizeClasses[size]} flex flex-col p-0`,
+        className: `${sizeClasses[size]} flex min-h-0 flex-col overflow-hidden p-0`,
         onInteractOutside: (e) => {
           if (isDirty) {
             e.preventDefault();
@@ -739,18 +897,18 @@ 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__ */ jsx8(SheetHeader, { className: "border-border bg-background border-b px-6 py-4", children: /* @__PURE__ */ jsx8(SheetTitle, { children: title }) }),
+          /* @__PURE__ */ jsx8("div", { className: "bg-background flex-1 overflow-y-auto px-6 py-4", children: form }),
+          /* @__PURE__ */ jsx8("div", { className: "border-border bg-background 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(AlertDialog, { open: showConfirm, onOpenChange: setShowConfirm, children: /* @__PURE__ */ jsxs8(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs8(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__ */ jsxs6(AlertDialogFooter, { children: [
+      /* @__PURE__ */ jsxs8(AlertDialogFooter, { children: [
         /* @__PURE__ */ jsx8(AlertDialogCancel, { children: "Cancel" }),
         /* @__PURE__ */ jsx8(
           AlertDialogAction,
@@ -768,7 +926,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 jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function EntityDrawerTrigger({
   mode,
   entity,
@@ -798,19 +956,19 @@ function EntityDrawerTrigger({
     }
   };
   const buttonLabel = label || (mode === "new" ? `New ${entity}` : `Edit ${entity}`);
-  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
     mode === "edit" && variant === "icon" && /* @__PURE__ */ jsx9(
       Button,
       {
         variant: "ghost",
         size: "icon",
-        className: `h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity ${className}`,
+        className: `size-8 opacity-0 group-hover:opacity-100 transition-opacity ${className}`,
         onClick: handleOpen,
         disabled,
-        children: /* @__PURE__ */ jsx9(IconChevronRight2, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx9(IconChevronRight2, { className: "size-4" })
       }
     ),
-    mode === "edit" && variant !== "icon" && /* @__PURE__ */ jsxs7(
+    mode === "edit" && variant !== "icon" && /* @__PURE__ */ jsx9(
       Button,
       {
         variant: variant === "outline" ? "outline" : "default",
@@ -818,24 +976,23 @@ function EntityDrawerTrigger({
         onClick: handleOpen,
         disabled,
         className,
-        children: [
-          /* @__PURE__ */ jsx9(IconPencil, { className: "mr-2 h-4 w-4" }),
-          buttonLabel
-        ]
+        leftIcon: /* @__PURE__ */ jsx9(IconPencil, { className: "size-4" }),
+        children: buttonLabel
       }
     ),
-    mode === "new" && /* @__PURE__ */ jsxs7(
+    mode === "new" && /* @__PURE__ */ jsx9(
       Button,
       {
         variant: variant === "outline" ? "outline" : "default",
         size: "sm",
         onClick: handleOpen,
         disabled,
-        className,
-        children: [
-          /* @__PURE__ */ jsx9(IconPlus, { className: "mr-2 h-4 w-4" }),
-          buttonLabel
-        ]
+        className: cn(
+          "max-sm:h-8 max-sm:w-8 max-sm:shrink-0 max-sm:justify-center max-sm:p-0",
+          className
+        ),
+        leftIcon: /* @__PURE__ */ jsx9(IconPlus, { className: "size-4" }),
+        children: /* @__PURE__ */ jsx9("span", { className: "hidden sm:inline", children: buttonLabel })
       }
     ),
     open && children(open, handleClose)
@@ -941,7 +1098,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 jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function EntityEmptyState({
   icon: Icon2 = IconPackage,
   title,
@@ -955,8 +1112,8 @@ 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: [
+  return /* @__PURE__ */ jsxs10(Empty, { className: cn("border py-12", className), children: [
+    /* @__PURE__ */ jsxs10(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 })
@@ -967,185 +1124,56 @@ function EntityEmptyState({
 
 // 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 { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { parseAsInteger, parseAsString, useQueryState } from "nuqs";
+import { jsx as jsx12, jsxs as jsxs11 } 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__ */ jsxs11("div", { className: cn("flex w-full items-center gap-2", className), children: [
+    label && /* @__PURE__ */ jsx12("span", { className: "shrink-0 text-sm text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx12("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs11(Select, { value: displayValue, onValueChange: handleChange, children: [
+      /* @__PURE__ */ jsxs11(SelectTrigger, { className: "h-9 w-full min-w-[150px]", children: [
+        /* @__PURE__ */ jsx12(IconFilter, { className: "size-4" }),
+        /* @__PURE__ */ jsx12(SelectValue, { placeholder })
+      ] }),
+      /* @__PURE__ */ jsxs11(SelectContent, { children: [
+        options.some((opt) => opt.value === "") && /* @__PURE__ */ jsx12(SelectItem, { value: "__all__", children: options.find((opt) => opt.value === "")?.label || "All" }, "__all__"),
+        validOptions.map((option) => /* @__PURE__ */ jsx12(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";
 
 // src/components/spinner.tsx
 import { IconLoader2 } from "@tabler/icons-react";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function Spinner({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx13(
     IconLoader2,
     {
       role: "status",
@@ -1157,7 +1185,7 @@ function Spinner({
 }
 
 // src/components/entity/entity-form-actions.tsx
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function EntityFormActions({
   mode,
   onSubmit,
@@ -1173,22 +1201,18 @@ function EntityFormActions({
 }) {
   const defaultSubmitLabel = mode === "new" ? "Create" : "Update";
   const label = submitLabel || defaultSubmitLabel;
-  return /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-3", children: [
-    onSubmit && /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-3", children: [
+    onSubmit && /* @__PURE__ */ jsx14(
       Button,
       {
         onClick: onSubmit,
         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" }),
-          label
-        ]
+        leftIcon: isSubmitting ? /* @__PURE__ */ jsx14(Spinner, { className: "size-4" }) : /* @__PURE__ */ jsx14(IconDeviceFloppy, { className: "size-4" }),
+        children: label
       }
     ),
-    mode === "new" && onReset && /* @__PURE__ */ jsxs11(
+    mode === "new" && onReset && /* @__PURE__ */ jsxs12(
       Button,
       {
         variant: "outline",
@@ -1196,37 +1220,34 @@ function EntityFormActions({
         disabled,
         className: "cursor-pointer",
         children: [
-          /* @__PURE__ */ jsx15(IconRotateClockwise, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsx14(IconRotateClockwise, { className: " h-4 w-4" }),
           "Reset"
         ]
       }
     ),
-    mode === "edit" && onDelete && /* @__PURE__ */ jsxs11(AlertDialog, { children: [
-      /* @__PURE__ */ jsx15(AlertDialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs11(
+    mode === "edit" && onDelete && /* @__PURE__ */ jsxs12(AlertDialog, { children: [
+      /* @__PURE__ */ jsx14(AlertDialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx14(
         Button,
         {
           variant: "destructive",
           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" }),
-            deleteLabel
-          ]
+          leftIcon: isDeleting ? /* @__PURE__ */ jsx14(Spinner, { className: "size-4" }) : /* @__PURE__ */ jsx14(IconTrash2, { className: "size-4" }),
+          children: deleteLabel
         }
       ) }),
-      /* @__PURE__ */ jsxs11(AlertDialogContent, { children: [
-        /* @__PURE__ */ jsxs11(AlertDialogHeader, { children: [
-          /* @__PURE__ */ jsx15(AlertDialogTitle, { children: "Are you sure?" }),
-          /* @__PURE__ */ jsxs11(AlertDialogDescription, { children: [
+      /* @__PURE__ */ jsxs12(AlertDialogContent, { children: [
+        /* @__PURE__ */ jsxs12(AlertDialogHeader, { children: [
+          /* @__PURE__ */ jsx14(AlertDialogTitle, { children: "Are you sure?" }),
+          /* @__PURE__ */ jsxs12(AlertDialogDescription, { children: [
             "This will permanently delete this ",
             itemName,
             ". This action cannot be undone."
           ] })
         ] }),
-        /* @__PURE__ */ jsxs11(AlertDialogFooter, { children: [
-          /* @__PURE__ */ jsx15(AlertDialogCancel, { children: "Cancel" }),
-          /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsxs12(AlertDialogFooter, { children: [
+          /* @__PURE__ */ jsx14(AlertDialogCancel, { children: "Cancel" }),
+          /* @__PURE__ */ jsx14(
             AlertDialogAction,
             {
               onClick: onDelete,
@@ -1237,7 +1258,7 @@ function EntityFormActions({
         ] })
       ] })
     ] }),
-    onCancel && /* @__PURE__ */ jsx15(
+    onCancel && /* @__PURE__ */ jsx14(
       Button,
       {
         variant: "ghost",
@@ -1251,7 +1272,9 @@ function EntityFormActions({
 }
 
 // src/components/entity/entity-header.tsx
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { IconChevronDown as IconChevronDown4, IconChevronUp as IconChevronUp2 } from "@tabler/icons-react";
+import { useState as useState5 } from "react";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 function EntityHeader({
   title,
   icon,
@@ -1261,29 +1284,55 @@ function EntityHeader({
   sort,
   view
 }) {
-  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 gap-2", children: [
+  const [toolbarOpen, setToolbarOpen] = useState5(false);
+  const hasToolbar = [search, filter, sort, view].some(Boolean);
+  return /* @__PURE__ */ jsx15(Card, { className: "p-4", children: /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
         icon,
-        /* @__PURE__ */ jsx16("span", { className: "text-lg font-semibold", children: title })
+        /* @__PURE__ */ jsx15("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
+      /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3", children: [
+        actions,
+        hasToolbar && /* @__PURE__ */ jsx15(
+          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__ */ jsx15(IconChevronUp2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx15(IconChevronDown4, { className: "h-4 w-4" })
+          }
+        )
       ] })
-    ] })
+    ] }),
+    hasToolbar && /* @__PURE__ */ jsxs13(
+      "div",
+      {
+        className: cn(
+          "flex flex-col gap-2 md:flex-row md:items-center md:gap-2 md:justify-between",
+          !toolbarOpen && "hidden",
+          "md:flex"
+        ),
+        children: [
+          /* @__PURE__ */ jsx15("div", { className: "w-full min-w-0 flex-1 md:min-w-[12rem]", children: search }),
+          /* @__PURE__ */ jsxs13("div", { className: "flex w-full shrink-0 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
+          ] })
+        ]
+      }
+    )
   ] }) });
 }
 
 // src/components/skeleton.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       "data-slot": "skeleton",
@@ -1294,18 +1343,18 @@ function Skeleton({ className, ...props }) {
 }
 
 // src/components/table.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function Table({ className, ...props }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       "data-slot": "table-container",
       className: "relative w-full overflow-x-auto",
-      children: /* @__PURE__ */ jsx18(
+      children: /* @__PURE__ */ jsx17(
         "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
         }
       )
@@ -1313,7 +1362,7 @@ function Table({ className, ...props }) {
   );
 }
 function TableHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx17(
     "thead",
     {
       "data-slot": "table-header",
@@ -1323,7 +1372,7 @@ function TableHeader({ className, ...props }) {
   );
 }
 function TableBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx17(
     "tbody",
     {
       "data-slot": "table-body",
@@ -1333,7 +1382,7 @@ function TableBody({ className, ...props }) {
   );
 }
 function TableRow({ className, ...props }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx17(
     "tr",
     {
       "data-slot": "table-row",
@@ -1346,7 +1395,7 @@ function TableRow({ className, ...props }) {
   );
 }
 function TableHead({ className, ...props }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx17(
     "th",
     {
       "data-slot": "table-head",
@@ -1359,7 +1408,7 @@ function TableHead({ className, ...props }) {
   );
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx17(
     "td",
     {
       "data-slot": "table-cell",
@@ -1373,7 +1422,7 @@ function TableCell({ className, ...props }) {
 }
 
 // src/components/entity/entity-loading-state.tsx
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function EntityLoadingState({
   view,
   rowCount = 5,
@@ -1382,45 +1431,52 @@ function EntityLoadingState({
   className
 }) {
   if (view === "table") {
-    return /* @__PURE__ */ jsx19("div", { className: cn("rounded-md border", className), children: /* @__PURE__ */ jsxs13(Table, { children: [
-      /* @__PURE__ */ jsx19(TableHeader, { children: /* @__PURE__ */ jsx19(TableRow, { children: Array.from({ length: columnCount }).map((_, i) => /* @__PURE__ */ jsx19(TableHead, { children: /* @__PURE__ */ jsx19(Skeleton, { className: "h-4 w-24" }) }, `header-${i}`)) }) }),
-      /* @__PURE__ */ jsx19(TableBody, { children: Array.from({ length: rowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx19(TableRow, { children: Array.from({ length: columnCount }).map((_2, colIndex) => /* @__PURE__ */ jsx19(TableCell, { children: /* @__PURE__ */ jsx19(Skeleton, { className: "h-4 w-full" }) }, `cell-${rowIndex}-${colIndex}`)) }, `row-${rowIndex}`)) })
+    return /* @__PURE__ */ jsx18("div", { className: cn("rounded-md border", className), children: /* @__PURE__ */ jsxs14(Table, { children: [
+      /* @__PURE__ */ jsx18(TableHeader, { children: /* @__PURE__ */ jsx18(TableRow, { children: Array.from({ length: columnCount }).map((_, i) => /* @__PURE__ */ jsx18(TableHead, { children: /* @__PURE__ */ jsx18(Skeleton, { className: "h-4 w-24" }) }, `header-${i}`)) }) }),
+      /* @__PURE__ */ jsx18(TableBody, { children: Array.from({ length: rowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx18(TableRow, { children: Array.from({ length: columnCount }).map((_2, colIndex) => /* @__PURE__ */ jsx18(TableCell, { children: /* @__PURE__ */ jsx18(Skeleton, { className: "h-4 w-full" }) }, `cell-${rowIndex}-${colIndex}`)) }, `row-${rowIndex}`)) })
     ] }) });
   }
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       className: cn(
         "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4",
         className
       ),
-      children: Array.from({ length: cardCount }).map((_, i) => /* @__PURE__ */ jsxs13("div", { className: "space-y-3 rounded-lg border p-4", children: [
-        /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx19(Skeleton, { className: "h-4 w-4 rounded-full" }),
-          /* @__PURE__ */ jsx19(Skeleton, { className: "h-5 w-32" })
-        ] }),
-        /* @__PURE__ */ jsxs13("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsx19(Skeleton, { className: "h-5 w-16" }),
-          /* @__PURE__ */ jsx19(Skeleton, { className: "h-5 w-16" })
-        ] }),
-        /* @__PURE__ */ jsx19(Skeleton, { className: "h-4 w-full" }),
-        /* @__PURE__ */ jsx19(Skeleton, { className: "h-4 w-3/4" }),
-        /* @__PURE__ */ jsx19(Skeleton, { className: "h-3 w-24" })
-      ] }, `card-${i}`))
+      children: Array.from({ length: cardCount }).map((_, i) => /* @__PURE__ */ jsxs14(
+        "div",
+        {
+          className: "border-border space-y-3 rounded-lg border p-4",
+          children: [
+            /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx18(Skeleton, { className: "h-4 w-4 rounded-full" }),
+              /* @__PURE__ */ jsx18(Skeleton, { className: "h-5 w-32" })
+            ] }),
+            /* @__PURE__ */ jsxs14("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx18(Skeleton, { className: "h-5 w-16" }),
+              /* @__PURE__ */ jsx18(Skeleton, { className: "h-5 w-16" })
+            ] }),
+            /* @__PURE__ */ jsx18(Skeleton, { className: "h-4 w-full" }),
+            /* @__PURE__ */ jsx18(Skeleton, { className: "h-4 w-3/4" }),
+            /* @__PURE__ */ jsx18(Skeleton, { className: "h-3 w-24" })
+          ]
+        },
+        `card-${i}`
+      ))
     }
   );
 }
 
 // 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";
 
 // src/components/input.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx19(
     "input",
     {
       type,
@@ -1437,45 +1493,48 @@ function Input({ className, type, ...props }) {
 }
 
 // src/components/entity/entity-search.tsx
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 function EntitySearch({
   paramKey = "search",
   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: [
-    /* @__PURE__ */ jsx21(IconSearch, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-    /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs15("div", { className: cn("relative w-full min-w-0", className), children: [
+    /* @__PURE__ */ jsx20(IconSearch, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+    /* @__PURE__ */ jsx20(
       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__ */ jsx20(
       "button",
       {
         type: "button",
         onClick: handleClear,
         className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-        children: /* @__PURE__ */ jsx21(IconX2, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx20(IconX2, { className: "h-4 w-4" })
       }
     )
   ] });
@@ -1486,39 +1545,44 @@ import {
   IconSortAscendingLetters,
   IconSortDescendingLetters
 } from "@tabler/icons-react";
-import { parseAsString as parseAsString3, useQueryState as useQueryState3 } from "nuqs";
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { parseAsInteger as parseAsInteger3, parseAsString as parseAsString3, useQueryState as useQueryState3 } from "nuqs";
+import { jsx as jsx21, jsxs as jsxs16 } 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" }) }),
-      /* @__PURE__ */ jsx22(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx22(SelectItem, { value: option.value, children: option.label }, option.value)) })
-    ] }),
-    /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs16("div", { className: cn("flex w-full items-center gap-0", className), children: [
+    /* @__PURE__ */ jsx21("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs16(Select, { value: sort, onValueChange: handleSortChange, children: [
+      /* @__PURE__ */ jsx21(SelectTrigger, { className: "h-9 w-full min-w-[150px] rounded-r-none border-r-0", children: /* @__PURE__ */ jsx21(SelectValue, { placeholder: "Sort by" }) }),
+      /* @__PURE__ */ jsx21(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx21(SelectItem, { value: option.value, children: option.label }, option.value)) })
+    ] }) }),
+    /* @__PURE__ */ jsx21(
       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" })
+        children: order === "asc" ? /* @__PURE__ */ jsx21(IconSortAscendingLetters, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx21(IconSortDescendingLetters, { className: "h-4 w-4" })
       }
     )
   ] });
@@ -1531,7 +1595,7 @@ import { parseAsString as parseAsString4, useQueryState as useQueryState4 } from
 // src/components/toggle.tsx
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva as cva3 } from "class-variance-authority";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var toggleVariants = cva3(
   "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
   {
@@ -1556,7 +1620,7 @@ var toggleVariants = cva3(
 // src/components/toggle-group.tsx
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import * as React from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var ToggleGroupContext = React.createContext({
   size: "default",
   variant: "default",
@@ -1570,7 +1634,7 @@ function ToggleGroup({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx23(
     ToggleGroupPrimitive.Root,
     {
       "data-slot": "toggle-group",
@@ -1583,7 +1647,7 @@ function ToggleGroup({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx24(ToggleGroupContext.Provider, { value: { variant, size, spacing }, children })
+      children: /* @__PURE__ */ jsx23(ToggleGroupContext.Provider, { value: { variant, size, spacing }, children })
     }
   );
 }
@@ -1595,7 +1659,7 @@ function ToggleGroupItem({
   ...props
 }) {
   const context = React.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx23(
     ToggleGroupPrimitive.Item,
     {
       "data-slot": "toggle-group-item",
@@ -1618,35 +1682,33 @@ function ToggleGroupItem({
 }
 
 // src/components/entity/entity-view-toggle.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var viewIcons = {
-  table: /* @__PURE__ */ jsx25(IconTable, { className: "h-4 w-4" }),
-  card: /* @__PURE__ */ jsx25(IconGridDots, { className: "h-4 w-4" }),
-  list: /* @__PURE__ */ jsx25(IconList, { className: "h-4 w-4" })
+  table: /* @__PURE__ */ jsx24(IconTable, { className: "h-4 w-4" }),
+  card: /* @__PURE__ */ jsx24(IconGridDots, { className: "h-4 w-4" }),
+  list: /* @__PURE__ */ jsx24(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(
+  return /* @__PURE__ */ jsx24(
     ToggleGroup,
     {
       type: "single",
-      value: view,
-      onValueChange: (value) => value && setView(value),
-      className: cn("border rounded-md", className),
-      children: views.map((v) => /* @__PURE__ */ jsx25(
+      value,
+      onValueChange: (v) => v && setValue(v),
+      className: cn("w-full! border rounded-md md:w-auto!", className),
+      children: views.map((v) => /* @__PURE__ */ jsx24(
         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 +1716,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 +1789,8 @@ export {
   EntityLoadingState,
   EntitySearch,
   EntitySort,
-  EntityViewToggle
+  EntityViewToggle,
+  useEntityPagination,
+  useEntityParams
 };
 //# sourceMappingURL=index.js.map