@mesob/ui 0.2.0 → 0.2.2

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 { Fragment, jsx, 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,6 +45,9 @@ function Button({
   variant,
   size,
   asChild = false,
+  leftIcon,
+  rightIcon,
+  children,
   ...props
 }) {
   const Comp = asChild ? Slot : "button";
@@ -53,14 +56,19 @@ function Button({
     {
       "data-slot": "button",
       className: cn(buttonVariants({ variant, size, className })),
-      ...props
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { 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 as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function AlertDialog({
   ...props
 }) {
@@ -85,7 +93,7 @@ function AlertDialogOverlay({
     {
       "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: [
+  return /* @__PURE__ */ jsxs2(AlertDialogPortal, { children: [
     /* @__PURE__ */ jsx2(AlertDialogOverlay, {}),
     /* @__PURE__ */ jsx2(
       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
@@ -194,7 +202,7 @@ 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 jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function DropdownMenu({
   ...props
 }) {
@@ -222,7 +230,7 @@ function DropdownMenuContent({
       "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
@@ -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 as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function EntityBulkActions({
   selectedCount,
   actions,
@@ -291,9 +299,9 @@ function EntityBulkActions({
     });
   }
   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(Fragment2, { children: [
+    /* @__PURE__ */ jsxs4(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx4(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs4(
         Button,
         {
           variant: "outline",
@@ -306,9 +314,9 @@ function EntityBulkActions({
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx4(DropdownMenuContent, { align: "end", children: allActions.map((action, index) => /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsx4(DropdownMenuContent, { align: "end", children: allActions.map((action, index) => /* @__PURE__ */ jsxs4("div", { children: [
         action.variant === "destructive" && index > 0 && /* @__PURE__ */ jsx4(DropdownMenuSeparator, {}),
-        /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsxs4(
           DropdownMenuItem,
           {
             onClick: action.onClick,
@@ -321,22 +329,22 @@ 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__ */ jsx4(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__ */ jsxs4(AlertDialogFooter, { children: [
         /* @__PURE__ */ jsx4(AlertDialogCancel, { children: "Cancel" }),
         /* @__PURE__ */ jsx4(
           AlertDialogAction,
@@ -367,7 +375,7 @@ function Card({ className, ...props }) {
     {
       "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
@@ -378,7 +386,7 @@ 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 jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function Select({
   ...props
 }) {
@@ -395,7 +403,7 @@ function SelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     SelectPrimitive.Trigger,
     {
       "data-slot": "select-trigger",
@@ -419,12 +427,12 @@ function SelectContent({
   align = "center",
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx6(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs5(
     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",
+        "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
       ),
@@ -453,7 +461,7 @@ function SelectItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     SelectPrimitive.Item,
     {
       "data-slot": "select-item",
@@ -505,7 +513,7 @@ function SelectScrollDownButton({
 }
 
 // src/components/entity/entity-detail-header.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function EntityDetailHeader({
   title,
   icon,
@@ -683,25 +691,25 @@ function EntityDetailHeader({
       tab.value
     );
   };
-  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: [
+  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__ */ jsx7("span", { className: "text-lg font-semibold", children: title })
         ] }),
         actions && /* @__PURE__ */ jsx7("div", { className: "flex items-center gap-2", children: actions })
       ] }),
-      /* @__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__ */ jsxs6("div", { ref: containerRef, className: "w-full px-4", children: [
+        /* @__PURE__ */ jsx7("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__ */ 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(
+        /* @__PURE__ */ jsxs6(
           "div",
           {
             ref: tabsListRef,
@@ -713,8 +721,8 @@ function EntityDetailHeader({
                 );
                 return renderTab(tab, originalIndex);
               }),
-              overflowTabs.length > 0 && /* @__PURE__ */ jsxs5(DropdownMenu, { children: [
-                /* @__PURE__ */ jsxs5(
+              overflowTabs.length > 0 && /* @__PURE__ */ jsxs6(DropdownMenu, { children: [
+                /* @__PURE__ */ jsxs6(
                   DropdownMenuTrigger,
                   {
                     ref: dropdownTriggerRef,
@@ -761,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 jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function Sheet({ ...props }) {
   return /* @__PURE__ */ jsx8(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
 }
@@ -779,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
@@ -792,14 +800,14 @@ function SheetContent({
   side = "right",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs6(SheetPortal, { children: [
+  return /* @__PURE__ */ jsxs7(SheetPortal, { children: [
     /* @__PURE__ */ jsx8(SheetOverlay, {}),
-    /* @__PURE__ */ jsxs6(
+    /* @__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",
@@ -809,7 +817,7 @@ function SheetContent({
         ...props,
         children: [
           children,
-          /* @__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__ */ 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__ */ jsx8(IconX, { className: "size-4" }),
             /* @__PURE__ */ jsx8("span", { className: "sr-only", children: "Close" })
           ] })
@@ -843,12 +851,12 @@ function SheetTitle({
 }
 
 // src/components/entity/entity-drawer.tsx
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9, 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,
@@ -871,11 +879,11 @@ function EntityDrawer({
     setShowConfirm(false);
     onClose();
   };
-  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx9(Sheet, { open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    /* @__PURE__ */ jsx9(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();
@@ -889,18 +897,18 @@ function EntityDrawer({
           }
         },
         children: [
-          /* @__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__ */ jsx9(SheetHeader, { className: "border-border bg-background border-b px-6 py-4", children: /* @__PURE__ */ jsx9(SheetTitle, { children: title }) }),
+          /* @__PURE__ */ jsx9("div", { className: "bg-background flex-1 overflow-y-auto px-6 py-4", children: form }),
+          /* @__PURE__ */ jsx9("div", { className: "border-border bg-background border-t px-6 py-4", children: actions })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx9(AlertDialog, { open: showConfirm, onOpenChange: setShowConfirm, children: /* @__PURE__ */ jsxs7(AlertDialogContent, { children: [
-      /* @__PURE__ */ jsxs7(AlertDialogHeader, { children: [
+    /* @__PURE__ */ jsx9(AlertDialog, { open: showConfirm, onOpenChange: setShowConfirm, children: /* @__PURE__ */ jsxs8(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs8(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__ */ jsxs7(AlertDialogFooter, { children: [
+      /* @__PURE__ */ jsxs8(AlertDialogFooter, { children: [
         /* @__PURE__ */ jsx9(AlertDialogCancel, { children: "Cancel" }),
         /* @__PURE__ */ jsx9(
           AlertDialogAction,
@@ -918,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 jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function EntityDrawerTrigger({
   mode,
   entity,
@@ -948,19 +956,19 @@ function EntityDrawerTrigger({
     }
   };
   const buttonLabel = label || (mode === "new" ? `New ${entity}` : `Edit ${entity}`);
-  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
     mode === "edit" && variant === "icon" && /* @__PURE__ */ jsx10(
       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__ */ jsx10(IconChevronRight2, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx10(IconChevronRight2, { className: "size-4" })
       }
     ),
-    mode === "edit" && variant !== "icon" && /* @__PURE__ */ jsxs8(
+    mode === "edit" && variant !== "icon" && /* @__PURE__ */ jsx10(
       Button,
       {
         variant: variant === "outline" ? "outline" : "default",
@@ -968,13 +976,11 @@ function EntityDrawerTrigger({
         onClick: handleOpen,
         disabled,
         className,
-        children: [
-          /* @__PURE__ */ jsx10(IconPencil, { className: "mr-2 h-4 w-4" }),
-          buttonLabel
-        ]
+        leftIcon: /* @__PURE__ */ jsx10(IconPencil, { className: "size-4" }),
+        children: buttonLabel
       }
     ),
-    mode === "new" && /* @__PURE__ */ jsxs8(
+    mode === "new" && /* @__PURE__ */ jsx10(
       Button,
       {
         variant: variant === "outline" ? "outline" : "default",
@@ -985,10 +991,8 @@ function EntityDrawerTrigger({
           "max-sm:h-8 max-sm:w-8 max-sm:shrink-0 max-sm:justify-center max-sm:p-0",
           className
         ),
-        children: [
-          /* @__PURE__ */ jsx10(IconPlus, { className: "h-4 w-4 sm:mr-2" }),
-          /* @__PURE__ */ jsx10("span", { className: "hidden sm:inline", children: buttonLabel })
-        ]
+        leftIcon: /* @__PURE__ */ jsx10(IconPlus, { className: "size-4" }),
+        children: /* @__PURE__ */ jsx10("span", { className: "hidden sm:inline", children: buttonLabel })
       }
     ),
     open && children(open, handleClose)
@@ -1094,7 +1098,7 @@ function EmptyContent({ className, ...props }) {
 }
 
 // src/components/entity/entity-empty-state.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 function EntityEmptyState({
   icon: Icon2 = IconPackage,
   title,
@@ -1108,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__ */ jsxs9(Empty, { className: cn("border py-12", className), children: [
-    /* @__PURE__ */ jsxs9(EmptyHeader, { children: [
+  return /* @__PURE__ */ jsxs10(Empty, { className: cn("border py-12", className), children: [
+    /* @__PURE__ */ jsxs10(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 })
@@ -1121,7 +1125,7 @@ function EntityEmptyState({
 // src/components/entity/entity-filter.tsx
 import { IconFilter } from "@tabler/icons-react";
 import { parseAsInteger, parseAsString, useQueryState } from "nuqs";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function EntityFilter({
   options,
   placeholder = "Filter",
@@ -1140,14 +1144,14 @@ function EntityFilter({
   };
   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: [
+  return /* @__PURE__ */ jsxs11("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("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__ */ jsx13(IconFilter, { className: "size-4" }),
         /* @__PURE__ */ jsx13(SelectValue, { placeholder })
       ] }),
-      /* @__PURE__ */ jsxs10(SelectContent, { children: [
+      /* @__PURE__ */ jsxs11(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))
       ] })
@@ -1181,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 jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 function EntityFormActions({
   mode,
   onSubmit,
@@ -1197,21 +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__ */ jsx15(
       Button,
       {
         onClick: onSubmit,
         disabled: disabled || isSubmitting,
         className: "cursor-pointer",
-        children: [
-          isSubmitting && /* @__PURE__ */ jsx15(Spinner, { className: " h-4 w-4" }),
-          !isSubmitting && /* @__PURE__ */ jsx15(IconDeviceFloppy, { className: " h-4 w-4" }),
-          label
-        ]
+        leftIcon: isSubmitting ? /* @__PURE__ */ jsx15(Spinner, { className: "size-4" }) : /* @__PURE__ */ jsx15(IconDeviceFloppy, { className: "size-4" }),
+        children: label
       }
     ),
-    mode === "new" && onReset && /* @__PURE__ */ jsxs11(
+    mode === "new" && onReset && /* @__PURE__ */ jsxs12(
       Button,
       {
         variant: "outline",
@@ -1224,30 +1225,27 @@ function EntityFormActions({
         ]
       }
     ),
-    mode === "edit" && onDelete && /* @__PURE__ */ jsxs11(AlertDialog, { children: [
-      /* @__PURE__ */ jsx15(AlertDialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs11(
+    mode === "edit" && onDelete && /* @__PURE__ */ jsxs12(AlertDialog, { children: [
+      /* @__PURE__ */ jsx15(AlertDialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx15(
         Button,
         {
           variant: "destructive",
           disabled: disabled || isDeleting,
           className: "cursor-pointer",
-          children: [
-            isDeleting && /* @__PURE__ */ jsx15(Spinner, { className: "  h-4 w-4" }),
-            /* @__PURE__ */ jsx15(IconTrash2, { className: "  h-4 w-4" }),
-            deleteLabel
-          ]
+          leftIcon: isDeleting ? /* @__PURE__ */ jsx15(Spinner, { className: "size-4" }) : /* @__PURE__ */ jsx15(IconTrash2, { className: "size-4" }),
+          children: deleteLabel
         }
       ) }),
-      /* @__PURE__ */ jsxs11(AlertDialogContent, { children: [
-        /* @__PURE__ */ jsxs11(AlertDialogHeader, { children: [
+      /* @__PURE__ */ jsxs12(AlertDialogContent, { children: [
+        /* @__PURE__ */ jsxs12(AlertDialogHeader, { children: [
           /* @__PURE__ */ jsx15(AlertDialogTitle, { children: "Are you sure?" }),
-          /* @__PURE__ */ jsxs11(AlertDialogDescription, { children: [
+          /* @__PURE__ */ jsxs12(AlertDialogDescription, { children: [
             "This will permanently delete this ",
             itemName,
             ". This action cannot be undone."
           ] })
         ] }),
-        /* @__PURE__ */ jsxs11(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsxs12(AlertDialogFooter, { children: [
           /* @__PURE__ */ jsx15(AlertDialogCancel, { children: "Cancel" }),
           /* @__PURE__ */ jsx15(
             AlertDialogAction,
@@ -1276,7 +1274,7 @@ 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";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 function EntityHeader({
   title,
   icon,
@@ -1288,13 +1286,13 @@ function EntityHeader({
 }) {
   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", children: [
-      /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsx16(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__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3", children: [
         actions,
         hasToolbar && /* @__PURE__ */ jsx16(
           Button,
@@ -1310,17 +1308,17 @@ function EntityHeader({
         )
       ] })
     ] }),
-    hasToolbar && /* @__PURE__ */ jsxs12(
+    hasToolbar && /* @__PURE__ */ jsxs13(
       "div",
       {
         className: cn(
-          "flex flex-col gap-2 md:flex-row md:items-center md:justify-between",
+          "flex flex-col gap-2 md:flex-row md:items-center md:gap-2 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: [
+          /* @__PURE__ */ jsx16("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
@@ -1424,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 jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 function EntityLoadingState({
   view,
   rowCount = 5,
@@ -1433,7 +1431,7 @@ function EntityLoadingState({
   className
 }) {
   if (view === "table") {
-    return /* @__PURE__ */ jsx19("div", { className: cn("rounded-md border", className), children: /* @__PURE__ */ jsxs13(Table, { children: [
+    return /* @__PURE__ */ jsx19("div", { className: cn("rounded-md border", className), children: /* @__PURE__ */ jsxs14(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}`)) })
     ] }) });
@@ -1445,19 +1443,26 @@ function EntityLoadingState({
         "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__ */ jsx19(Skeleton, { className: "h-4 w-4 rounded-full" }),
+              /* @__PURE__ */ jsx19(Skeleton, { className: "h-5 w-32" })
+            ] }),
+            /* @__PURE__ */ jsxs14("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}`
+      ))
     }
   );
 }
@@ -1488,7 +1493,7 @@ 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 jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 function EntitySearch({
   paramKey = "search",
   placeholder = "Search...",
@@ -1511,7 +1516,7 @@ function EntitySearch({
       ref.current.value = "";
     }
   };
-  return /* @__PURE__ */ jsxs14("div", { className: cn("relative w-full min-w-0", className), children: [
+  return /* @__PURE__ */ jsxs15("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,
@@ -1541,7 +1546,7 @@ import {
   IconSortDescendingLetters
 } from "@tabler/icons-react";
 import { parseAsInteger as parseAsInteger3, parseAsString as parseAsString3, useQueryState as useQueryState3 } from "nuqs";
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 function EntitySort({
   options,
   defaultSort = "createdAt",
@@ -1565,8 +1570,8 @@ function EntitySort({
     setOrder(order === "asc" ? "desc" : "asc");
     setPage(1);
   };
-  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: [
+  return /* @__PURE__ */ jsxs16("div", { className: cn("flex w-full items-center gap-0", className), children: [
+    /* @__PURE__ */ jsx22("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs16(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)) })
     ] }) }),