@mesob/ui 0.0.2

package/dist/components/entity/index.js

@@ -0,0 +1,1671 @@
+// src/components/entity/entity-bulk-actions.tsx
+import { IconChevronDown, IconDownload, IconTrash } from "@tabler/icons-react";
+import { useState } from "react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx } 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",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/alert-dialog.tsx
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function AlertDialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+}
+function AlertDialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
+}
+function AlertDialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    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",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(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",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+}
+function AlertDialogHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "alert-dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function AlertDialogFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "alert-dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    AlertDialogPrimitive.Title,
+    {
+      "data-slot": "alert-dialog-title",
+      className: cn("text-lg font-semibold", className),
+      ...props
+    }
+  );
+}
+function AlertDialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    AlertDialogPrimitive.Description,
+    {
+      "data-slot": "alert-dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function AlertDialogAction({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    AlertDialogPrimitive.Action,
+    {
+      className: cn(buttonVariants(), className),
+      ...props
+    }
+  );
+}
+function AlertDialogCancel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    AlertDialogPrimitive.Cancel,
+    {
+      className: cn(buttonVariants({ variant: "outline" }), className),
+      ...props
+    }
+  );
+}
+
+// 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";
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    DropdownMenuPrimitive.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
+    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",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    DropdownMenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+
+// src/components/entity/entity-bulk-actions.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function EntityBulkActions({
+  selectedCount,
+  actions,
+  onDelete,
+  onExport,
+  itemName = "item"
+}) {
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const hasSelection = selectedCount > 0;
+  const defaultActions = [];
+  if (onExport) {
+    defaultActions.push({
+      label: "Export",
+      icon: /* @__PURE__ */ jsx4(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" }),
+      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(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          disabled: !hasSelection,
+          className: "min-w-[140px]",
+          children: [
+            hasSelection ? `${selectedCount} selected` : "Bulk Actions",
+            /* @__PURE__ */ jsx4(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(
+          DropdownMenuItem,
+          {
+            onClick: action.onClick,
+            className: action.variant === "destructive" ? "text-destructive" : "",
+            children: [
+              action.icon,
+              action.label
+            ]
+          }
+        )
+      ] }, action.label)) })
+    ] }),
+    /* @__PURE__ */ jsx4(AlertDialog, { open: showDeleteConfirm, onOpenChange: setShowDeleteConfirm, children: /* @__PURE__ */ jsxs3(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs3(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsxs3(AlertDialogTitle, { children: [
+          "Delete ",
+          selectedCount,
+          " ",
+          itemName,
+          "(s)?"
+        ] }),
+        /* @__PURE__ */ jsxs3(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(
+          AlertDialogAction,
+          {
+            onClick: () => {
+              onDelete?.();
+              setShowDeleteConfirm(false);
+            },
+            className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            children: "Delete"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/components/entity/entity-detail-header.tsx
+import { IconChevronDown as IconChevronDown2 } 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";
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      "data-slot": "card",
+      className: cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 ",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/entity/entity-detail-header.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function EntityDetailHeader({
+  title,
+  icon,
+  backButton,
+  actions,
+  tabs,
+  activeTab: controlledActiveTab,
+  defaultTab,
+  onTabChange,
+  className,
+  linkComponent: LinkComponent
+}) {
+  const [internalActiveTab, setInternalActiveTab] = useState2(
+    defaultTab ?? tabs[0]?.value ?? ""
+  );
+  const activeTab = controlledActiveTab ?? internalActiveTab;
+  const [visibleTabs, setVisibleTabs] = useState2(tabs);
+  const [overflowTabs, setOverflowTabs] = useState2([]);
+  const containerRef = useRef(null);
+  const tabsListRef = useRef(null);
+  const dropdownTriggerRef = useRef(null);
+  const tabRefs = useRef([]);
+  const [underlineStyle, setUnderlineStyle] = useState2({ left: 0, width: 0 });
+  const handleTabChange = (newValue) => {
+    if (!controlledActiveTab) {
+      setInternalActiveTab(newValue);
+    }
+    onTabChange?.(newValue);
+  };
+  useLayoutEffect(() => {
+    const updateTabs = () => {
+      if (!containerRef.current) {
+        return;
+      }
+      if (!tabsListRef.current) {
+        return;
+      }
+      const containerWidth = containerRef.current.offsetWidth;
+      const dropdownWidth = 80;
+      const padding = 16;
+      const availableWidth = containerWidth - padding;
+      let totalWidth = 0;
+      const visible = [];
+      const overflow = [];
+      let hasOverflow = false;
+      for (const [i, tab] of tabs.entries()) {
+        const tabEl = tabRefs.current[i];
+        if (!tabEl || tabEl.offsetWidth === 0) {
+          if (hasOverflow) {
+            overflow.push(tab);
+          } else {
+            visible.push(tab);
+          }
+          continue;
+        }
+        const tabWidth = tabEl.scrollWidth || tabEl.offsetWidth;
+        const wouldFitWithoutDropdown = totalWidth + tabWidth <= availableWidth;
+        const wouldFitWithDropdown = totalWidth + tabWidth + dropdownWidth <= availableWidth;
+        if (!hasOverflow && wouldFitWithoutDropdown) {
+          visible.push(tab);
+          totalWidth += tabWidth;
+        } else if (!hasOverflow && wouldFitWithDropdown) {
+          visible.push(tab);
+          totalWidth += tabWidth;
+          hasOverflow = true;
+        } else {
+          hasOverflow = true;
+          overflow.push(tab);
+        }
+      }
+      setVisibleTabs(visible);
+      setOverflowTabs(overflow);
+    };
+    const timeoutId = setTimeout(updateTabs, 100);
+    const resizeObserver = new ResizeObserver(() => {
+      setTimeout(updateTabs, 0);
+    });
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+    if (tabsListRef.current) {
+      resizeObserver.observe(tabsListRef.current);
+    }
+    window.addEventListener("resize", updateTabs);
+    return () => {
+      clearTimeout(timeoutId);
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", updateTabs);
+    };
+  }, [tabs]);
+  useLayoutEffect(() => {
+    const updateUnderline = () => {
+      const isInOverflow = overflowTabs.some((tab) => tab.value === activeTab);
+      if (isInOverflow && dropdownTriggerRef.current) {
+        const { offsetLeft, offsetWidth } = dropdownTriggerRef.current;
+        setUnderlineStyle({
+          left: offsetLeft,
+          width: offsetWidth
+        });
+        return;
+      }
+      const activeTabIndex = tabs.findIndex((tab) => tab.value === activeTab);
+      const activeTabElement = tabRefs.current[activeTabIndex];
+      if (activeTabElement && visibleTabs.some((tab) => tab.value === activeTab)) {
+        const { offsetLeft, offsetWidth } = activeTabElement;
+        setUnderlineStyle({
+          left: offsetLeft,
+          width: offsetWidth
+        });
+      }
+    };
+    updateUnderline();
+  }, [activeTab, visibleTabs, overflowTabs, tabs]);
+  const activeTabData = useMemo(
+    () => tabs.find((tab) => tab.value === activeTab),
+    [tabs, activeTab]
+  );
+  const renderTab = (tab, originalIndex) => {
+    const isActive = activeTab === tab.value;
+    const tabClassName = cn(
+      "relative z-10 px-4 py-3 text-sm font-medium transition-all duration-200",
+      "hover:bg-muted/60 rounded-t-md cursor-pointer",
+      isActive ? "text-primary" : "text-muted-foreground hover:text-foreground"
+    );
+    const setRef = (el) => {
+      if (originalIndex >= 0) {
+        tabRefs.current[originalIndex] = el;
+      }
+    };
+    if (tab.href && LinkComponent) {
+      return /* @__PURE__ */ jsx6(
+        LinkComponent,
+        {
+          href: tab.href,
+          className: tabClassName,
+          ref: setRef,
+          children: tab.name
+        },
+        tab.value
+      );
+    }
+    return /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        ref: setRef,
+        onClick: () => handleTabChange(tab.value),
+        className: tabClassName,
+        children: tab.name
+      },
+      tab.value
+    );
+  };
+  const renderDropdownItem = (tab) => {
+    const isActive = activeTab === tab.value;
+    const itemClassName = cn(
+      "cursor-pointer",
+      isActive && "bg-accent font-medium"
+    );
+    if (tab.href && LinkComponent) {
+      return /* @__PURE__ */ jsx6(DropdownMenuItem, { asChild: true, className: itemClassName, children: /* @__PURE__ */ jsx6(LinkComponent, { href: tab.href, children: tab.name }) }, tab.value);
+    }
+    return /* @__PURE__ */ jsx6(
+      DropdownMenuItem,
+      {
+        onClick: () => handleTabChange(tab.value),
+        className: itemClassName,
+        children: tab.name
+      },
+      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: [
+          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,
+          {
+            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 })
+  ] });
+}
+
+// src/components/entity/entity-drawer.tsx
+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";
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ jsx7(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+}
+function SheetPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    SheetPrimitive.Overlay,
+    {
+      "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",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs5(SheetPortal, { children: [
+    /* @__PURE__ */ jsx7(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs5(
+      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",
+          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",
+          side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsxs5(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
+            /* @__PURE__ */ jsx7(IconX, { className: "size-4" }),
+            /* @__PURE__ */ jsx7("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-1.5 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    SheetPrimitive.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("text-foreground font-semibold", className),
+      ...props
+    }
+  );
+}
+
+// src/components/entity/entity-drawer.tsx
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } 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"
+};
+function EntityDrawer({
+  title,
+  form,
+  actions,
+  open,
+  onClose,
+  isDirty = false,
+  size = "lg"
+}) {
+  const [showConfirm, setShowConfirm] = useState3(false);
+  const handleClose = () => {
+    if (isDirty) {
+      setShowConfirm(true);
+    } else {
+      onClose();
+    }
+  };
+  const handleConfirmDiscard = () => {
+    setShowConfirm(false);
+    onClose();
+  };
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsx8(Sheet, { open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: /* @__PURE__ */ jsxs6(
+      SheetContent,
+      {
+        className: `${sizeClasses[size]} flex flex-col p-0`,
+        onInteractOutside: (e) => {
+          if (isDirty) {
+            e.preventDefault();
+            setShowConfirm(true);
+          }
+        },
+        onEscapeKeyDown: (e) => {
+          if (isDirty) {
+            e.preventDefault();
+            setShowConfirm(true);
+          }
+        },
+        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(AlertDialog, { open: showConfirm, onOpenChange: setShowConfirm, children: /* @__PURE__ */ jsxs6(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs6(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx8(AlertDialogTitle, { children: "Discard changes?" }),
+        /* @__PURE__ */ jsx8(AlertDialogDescription, { children: "You have unsaved changes. Are you sure you want to discard them?" })
+      ] }),
+      /* @__PURE__ */ jsxs6(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx8(AlertDialogCancel, { children: "Cancel" }),
+        /* @__PURE__ */ jsx8(
+          AlertDialogAction,
+          {
+            onClick: handleConfirmDiscard,
+            className: "bg-destructive text-white hover:bg-destructive/90",
+            children: "Discard"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+
+// 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";
+function EntityDrawerTrigger({
+  mode,
+  entity,
+  label,
+  children,
+  variant = "default",
+  disabled = false,
+  className,
+  open: controlledOpen,
+  onOpenChange
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState4(false);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const handleOpen = () => {
+    if (isControlled) {
+      onOpenChange?.(true);
+    } else {
+      setUncontrolledOpen(true);
+    }
+  };
+  const handleClose = () => {
+    if (isControlled) {
+      onOpenChange?.(false);
+    } else {
+      setUncontrolledOpen(false);
+    }
+  };
+  const buttonLabel = label || (mode === "new" ? `New ${entity}` : `Edit ${entity}`);
+  return /* @__PURE__ */ jsxs7(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}`,
+        onClick: handleOpen,
+        disabled,
+        children: /* @__PURE__ */ jsx9(IconChevronRight2, { className: "h-4 w-4" })
+      }
+    ),
+    mode === "edit" && variant !== "icon" && /* @__PURE__ */ jsxs7(
+      Button,
+      {
+        variant: variant === "outline" ? "outline" : "default",
+        size: "sm",
+        onClick: handleOpen,
+        disabled,
+        className,
+        children: [
+          /* @__PURE__ */ jsx9(IconPencil, { className: "mr-2 h-4 w-4" }),
+          buttonLabel
+        ]
+      }
+    ),
+    mode === "new" && /* @__PURE__ */ jsxs7(
+      Button,
+      {
+        variant: variant === "outline" ? "outline" : "default",
+        size: "sm",
+        onClick: handleOpen,
+        disabled,
+        className,
+        children: [
+          /* @__PURE__ */ jsx9(IconPlus, { className: "mr-2 h-4 w-4" }),
+          buttonLabel
+        ]
+      }
+    ),
+    open && children(open, handleClose)
+  ] });
+}
+
+// src/components/entity/entity-empty-state.tsx
+import { IconPackage } from "@tabler/icons-react";
+
+// src/components/empty.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function Empty({ className, ...props }) {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      "data-slot": "empty",
+      className: cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function EmptyHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      "data-slot": "empty-header",
+      className: cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var emptyMediaVariants = cva2(
+  "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      "data-slot": "empty-icon",
+      "data-variant": variant,
+      className: cn(emptyMediaVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function EmptyTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      "data-slot": "empty-title",
+      className: cn("text-lg font-medium tracking-tight", className),
+      ...props
+    }
+  );
+}
+function EmptyDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      "data-slot": "empty-description",
+      className: cn(
+        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function EmptyContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      "data-slot": "empty-content",
+      className: cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/entity/entity-empty-state.tsx
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function EntityEmptyState({
+  icon: Icon2 = IconPackage,
+  title,
+  description,
+  entityName = "item",
+  actionLabel,
+  onAction,
+  children,
+  className
+}) {
+  const defaultTitle = `No ${entityName}s yet`;
+  const defaultDescription = `Get started by creating your first ${entityName}.`;
+  const defaultActionLabel = `Create ${entityName}`;
+  return /* @__PURE__ */ jsxs8(Empty, { className: cn("border py-12", className), children: [
+    /* @__PURE__ */ jsxs8(EmptyHeader, { children: [
+      /* @__PURE__ */ jsx11(EmptyMedia, { variant: "icon", children: /* @__PURE__ */ jsx11(Icon2, { className: "size-5" }) }),
+      /* @__PURE__ */ jsx11(EmptyTitle, { children: title ?? defaultTitle }),
+      /* @__PURE__ */ jsx11(EmptyDescription, { children: description ?? defaultDescription })
+    ] }),
+    /* @__PURE__ */ jsx11(EmptyContent, { children: children ?? (onAction && /* @__PURE__ */ jsx11(Button, { onClick: onAction, children: actionLabel ?? defaultActionLabel })) })
+  ] });
+}
+
+// src/components/entity/entity-filter.tsx
+import { IconFilter } from "@tabler/icons-react";
+import { parseAsString, useQueryState } from "nuqs";
+
+// src/components/select.tsx
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { IconCheck as IconCheck2, IconChevronDown as IconChevronDown3, IconChevronUp } from "@tabler/icons-react";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function Select({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx12(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectValue({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx12(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs9(
+    SelectPrimitive.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx12(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx12(IconChevronDown3, { className: "size-4 opacity-50" }) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  align = "center",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx12(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs9(
+    SelectPrimitive.Content,
+    {
+      "data-slot": "select-content",
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position,
+      align,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx12(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx12(
+          SelectPrimitive.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx12(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs9(
+    SelectPrimitive.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx12("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx12(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx12(IconCheck2, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx12(SelectPrimitive.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx12(
+    SelectPrimitive.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx12(IconChevronUp, { className: "size-4" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx12(
+    SelectPrimitive.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx12(IconChevronDown3, { className: "size-4" })
+    }
+  );
+}
+
+// src/components/entity/entity-filter.tsx
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+function EntityFilter({
+  paramKey = "filter",
+  options,
+  placeholder = "Filter",
+  className,
+  label
+}) {
+  const [filter, setFilter] = useQueryState(
+    paramKey,
+    parseAsString.withDefault("").withOptions({ shallow: false })
+  );
+  return /* @__PURE__ */ jsxs10("div", { className: cn("flex items-center gap-2", className), children: [
+    label && /* @__PURE__ */ jsx13("span", { className: "text-sm text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsxs10(
+      Select,
+      {
+        value: filter || void 0,
+        onValueChange: (value) => setFilter(value || null),
+        children: [
+          /* @__PURE__ */ jsxs10(SelectTrigger, { className: "w-[150px] h-9", children: [
+            /* @__PURE__ */ jsx13(IconFilter, { className: "mr-2 h-4 w-4" }),
+            /* @__PURE__ */ jsx13(SelectValue, { placeholder })
+          ] }),
+          /* @__PURE__ */ jsx13(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx13(SelectItem, { value: option.value, children: option.label }, option.value)) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/entity/entity-form-actions.tsx
+import {
+  IconCheck as IconCheck3,
+  IconPlus as IconPlus2,
+  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";
+function Spinner({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx14(
+    IconLoader2,
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: cn("size-4 animate-spin", className),
+      ...props
+    }
+  );
+}
+
+// src/components/entity/entity-form-actions.tsx
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+function EntityFormActions({
+  mode,
+  onSubmit,
+  onReset,
+  onDelete,
+  onCancel,
+  isSubmitting = false,
+  isDeleting = false,
+  disabled = false,
+  submitLabel,
+  deleteLabel = "Delete",
+  itemName = "item"
+}) {
+  const defaultSubmitLabel = mode === "new" ? "Create" : "Update";
+  const label = submitLabel || defaultSubmitLabel;
+  return /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-3", children: [
+    onSubmit && /* @__PURE__ */ jsxs11(
+      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
+        ]
+      }
+    ),
+    mode === "new" && onReset && /* @__PURE__ */ jsxs11(
+      Button,
+      {
+        variant: "outline",
+        onClick: onReset,
+        disabled,
+        className: "cursor-pointer",
+        children: [
+          /* @__PURE__ */ jsx15(IconRotateClockwise, { className: "mr-2 h-4 w-4" }),
+          "Reset"
+        ]
+      }
+    ),
+    mode === "edit" && onDelete && /* @__PURE__ */ jsxs11(AlertDialog, { children: [
+      /* @__PURE__ */ jsx15(AlertDialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs11(
+        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
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs11(AlertDialogContent, { children: [
+        /* @__PURE__ */ jsxs11(AlertDialogHeader, { children: [
+          /* @__PURE__ */ jsx15(AlertDialogTitle, { children: "Are you sure?" }),
+          /* @__PURE__ */ jsxs11(AlertDialogDescription, { children: [
+            "This will permanently delete this ",
+            itemName,
+            ". This action cannot be undone."
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs11(AlertDialogFooter, { children: [
+          /* @__PURE__ */ jsx15(AlertDialogCancel, { children: "Cancel" }),
+          /* @__PURE__ */ jsx15(
+            AlertDialogAction,
+            {
+              onClick: onDelete,
+              className: "bg-destructive text-white hover:bg-destructive/90",
+              children: "Delete"
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    onCancel && /* @__PURE__ */ jsx15(
+      Button,
+      {
+        variant: "ghost",
+        onClick: onCancel,
+        disabled,
+        className: "cursor-pointer",
+        children: "Cancel"
+      }
+    )
+  ] });
+}
+
+// src/components/entity/entity-header.tsx
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+function EntityHeader({
+  title,
+  icon,
+  actions,
+  search,
+  filter,
+  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: [
+        icon,
+        /* @__PURE__ */ jsx16("span", { className: "text-lg font-semibold", children: title })
+      ] }),
+      actions
+    ] }),
+    /* @__PURE__ */ jsxs12("div", { className: "flex flex-col md:flex-row md:items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx16("div", { className: "grow", children: search }),
+      /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+        filter,
+        sort,
+        view
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/components/skeleton.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx17(
+    "div",
+    {
+      "data-slot": "skeleton",
+      className: cn("bg-accent animate-pulse rounded-md", className),
+      ...props
+    }
+  );
+}
+
+// src/components/table.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+function Table({ className, ...props }) {
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      "data-slot": "table-container",
+      className: "relative w-full overflow-x-auto",
+      children: /* @__PURE__ */ jsx18(
+        "table",
+        {
+          "data-slot": "table",
+          className: cn("w-full caption-bottom text-sm", className),
+          ...props
+        }
+      )
+    }
+  );
+}
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx18(
+    "thead",
+    {
+      "data-slot": "table-header",
+      className: cn("[&_tr]:border-b", className),
+      ...props
+    }
+  );
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx18(
+    "tbody",
+    {
+      "data-slot": "table-body",
+      className: cn("[&_tr:last-child]:border-0", className),
+      ...props
+    }
+  );
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx18(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ jsx18(
+    "th",
+    {
+      "data-slot": "table-head",
+      className: cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ jsx18(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/entity/entity-loading-state.tsx
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+function EntityLoadingState({
+  view,
+  rowCount = 5,
+  columnCount = 5,
+  cardCount = 8,
+  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__ */ jsx19(
+    "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}`))
+    }
+  );
+}
+
+// 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 { useRef as useRef2 } from "react";
+import { useDebouncedCallback } from "use-debounce";
+
+// src/components/input.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx20(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "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",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/entity/entity-search.tsx
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+function EntitySearch({
+  paramKey = "search",
+  placeholder = "Search...",
+  className
+}) {
+  const ref = useRef2(null);
+  const [search, setSearch] = useQueryState2(
+    paramKey,
+    parseAsString2.withDefault("").withOptions({ shallow: false })
+  );
+  const handleSearch = useDebouncedCallback((term) => {
+    setSearch(term || null);
+  }, 300);
+  const handleClear = () => {
+    setSearch(null);
+    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(
+      Input,
+      {
+        ref,
+        placeholder,
+        defaultValue: search,
+        onChange: (e) => handleSearch(e.target.value),
+        className: "pl-9 pr-9"
+      }
+    ),
+    search && /* @__PURE__ */ jsx21(
+      "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" })
+      }
+    )
+  ] });
+}
+
+// src/components/entity/entity-sort.tsx
+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";
+function EntitySort({
+  sortKey = "sort",
+  orderKey = "order",
+  options,
+  defaultSort,
+  className
+}) {
+  const [sort, setSort] = useQueryState3(
+    sortKey,
+    parseAsString3.withDefault(defaultSort || options[0]?.value || "").withOptions({ shallow: false })
+  );
+  const [order, setOrder] = useQueryState3(
+    orderKey,
+    parseAsString3.withDefault("desc").withOptions({ shallow: false })
+  );
+  const toggleOrder = () => {
+    setOrder(order === "asc" ? "desc" : "asc");
+  };
+  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(
+      Button,
+      {
+        variant: "outline",
+        size: "icon",
+        className: "h-9 rounded-l-none",
+        onClick: toggleOrder,
+        children: order === "asc" ? /* @__PURE__ */ jsx22(IconSortAscendingLetters, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx22(IconSortDescendingLetters, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+}
+
+// src/components/entity/entity-view-toggle.tsx
+import { IconGridDots, IconList, IconTable } from "@tabler/icons-react";
+import { parseAsString as parseAsString4, useQueryState as useQueryState4 } from "nuqs";
+
+// 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";
+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",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+
+// 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";
+var ToggleGroupContext = React.createContext({
+  size: "default",
+  variant: "default",
+  spacing: 0
+});
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx24(
+    ToggleGroupPrimitive.Root,
+    {
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size,
+      "data-spacing": spacing,
+      style: { "--gap": spacing },
+      className: cn(
+        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx24(ToggleGroupContext.Provider, { value: { variant, size, spacing }, children })
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}) {
+  const context = React.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx24(
+    ToggleGroupPrimitive.Item,
+    {
+      "data-slot": "toggle-group-item",
+      "data-variant": context.variant || variant,
+      "data-size": context.size || size,
+      "data-spacing": context.spacing,
+      className: cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
+        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/entity/entity-view-toggle.tsx
+import { jsx as jsx25 } 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" })
+};
+function EntityViewToggle({
+  paramKey = "view",
+  defaultView = "table",
+  views = ["table", "card"],
+  className
+}) {
+  const [view, setView] = useQueryState4(
+    paramKey,
+    parseAsString4.withDefault(defaultView).withOptions({ shallow: false })
+  );
+  return /* @__PURE__ */ jsx25(
+    ToggleGroup,
+    {
+      type: "single",
+      value: view,
+      onValueChange: (value) => value && setView(value),
+      className: cn("border rounded-md", className),
+      children: views.map((v) => /* @__PURE__ */ jsx25(
+        ToggleGroupItem,
+        {
+          value: v,
+          "aria-label": `${v} view`,
+          className: "h-9 px-3",
+          children: viewIcons[v]
+        },
+        v
+      ))
+    }
+  );
+}
+export {
+  EntityBulkActions,
+  EntityDetailHeader,
+  EntityDrawer,
+  EntityDrawerTrigger,
+  EntityEmptyState,
+  EntityFilter,
+  EntityFormActions,
+  EntityHeader,
+  EntityLoadingState,
+  EntitySearch,
+  EntitySort,
+  EntityViewToggle
+};
+//# sourceMappingURL=index.js.map