@the12company/ui 0.1.2 → 0.1.3

package/dist/index.js

@@ -2,7 +2,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as React11 from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { ChevronDown, X, PanelLeft, ArrowLeft, ArrowRight, Check, Search, ChevronRight, Circle, Dot, ChevronUp, MoreHorizontal, ChevronLeft, GripVertical, CircleX } from 'lucide-react';
+import { ChevronDown, X, PanelLeft, ArrowLeft, ArrowRight, Check, Search, ChevronRight, Circle, Dot, ChevronUp, MoreHorizontal, ChevronLeft, GripVertical, ChevronsUpDown, Loader2, CircleX } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
@@ -398,40 +398,6 @@ var AlertDialogCancel = React11.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-function AppChromeHeader({
-  headerRef,
-  className,
-  start,
-  topBar,
-  children
-}) {
-  return /* @__PURE__ */ jsx(
-    "header",
-    {
-      ref: headerRef,
-      className: cn(
-        "absolute left-3.5 right-3.5 top-3.5 z-30 max-w-full rounded-lg shadow-sm",
-        className
-      ),
-      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "pointer-events-none absolute inset-0 rounded-lg bg-content-glass",
-            "aria-hidden": true
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex min-h-14 items-center gap-3 rounded-lg border-b border-border/40 px-3 py-2 sm:gap-2 md:min-h-fit", children: [
-            start,
-            topBar
-          ] }),
-          children
-        ] })
-      ] })
-    }
-  );
-}
 var inputVariants = cva(
   "flex h-10 w-full shadow-[0_2px_6px_hsl(var(--foreground)/0.08)] dark:shadow-[0_1px_3px_-1px_rgba(0,0,0,0.28)] hover:shadow-[0_4px_10px_hsl(var(--foreground)/0.12)] dark:hover:shadow-[0_2px_6px_-2px_rgba(0,0,0,0.32)] focus-visible:shadow-lg rounded-md px-3 py-2 text-base outline-none transition-all duration-300 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
   {
@@ -1191,6 +1157,76 @@ var SidebarMenuSubButton = React11.forwardRef(({ asChild = false, size = "md", i
   );
 });
 SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+function AppChromeBrand({
+  logo,
+  title,
+  subtitle,
+  className,
+  collapsed: collapsedProp
+}) {
+  const { state, isMobile } = useSidebar();
+  const collapsed = collapsedProp ?? (!isMobile && state === "collapsed");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex min-w-0 items-center overflow-hidden transition-all duration-300",
+        collapsed ? "justify-center px-2 py-4" : "gap-2.5 px-4 py-5",
+        className
+      ),
+      children: [
+        logo ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex flex-shrink-0 items-center justify-center rounded-lg transition-all duration-500 hover:scale-105 hover:shadow-lg hover:shadow-sidebar-primary/20",
+              collapsed ? "h-9 w-9" : "h-8 w-8"
+            ),
+            children: logo
+          }
+        ) : null,
+        !collapsed && (title || subtitle) ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: [
+          title ? /* @__PURE__ */ jsx("span", { className: "truncate whitespace-nowrap text-base font-bold tracking-tight text-sidebar-accent-foreground", children: title }) : null,
+          subtitle ? /* @__PURE__ */ jsx("span", { className: "truncate whitespace-nowrap text-xs text-sidebar-foreground/60", children: subtitle }) : null
+        ] }) : null
+      ]
+    }
+  );
+}
+function AppChromeHeader({
+  headerRef,
+  className,
+  start,
+  topBar,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      ref: headerRef,
+      className: cn(
+        "absolute left-3.5 right-3.5 top-3.5 z-30 max-w-full rounded-lg shadow-sm",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pointer-events-none absolute inset-0 rounded-lg bg-content-glass",
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-h-14 items-center gap-3 rounded-lg border-b border-border/40 px-3 py-2 sm:gap-2 md:min-h-fit", children: [
+            start,
+            topBar
+          ] }),
+          children
+        ] })
+      ] })
+    }
+  );
+}
 function AppChromeSidebar({
   header,
   children,
@@ -1903,6 +1939,49 @@ function getPayloadConfigFromPayload(config, payload, key) {
   }
   return configLabelKey in config ? config[configLabelKey] : config[key];
 }
+function ChartCard({
+  title,
+  subtitle,
+  children,
+  action,
+  titleInfo,
+  titleClassName,
+  glass = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-lg p-4 shadow-md sm:p-5",
+        className,
+        glass ? "bg-content-glass" : "bg-card border border-border"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [
+              /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  className: cn(
+                    "text-base font-semibold leading-snug text-foreground",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ),
+              titleInfo ? /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 -translate-y-0.5 items-center justify-center", children: titleInfo }) : null
+            ] }),
+            subtitle ? /* @__PURE__ */ jsx("p", { className: "text-xs leading-snug text-muted-foreground", children: subtitle }) : null
+          ] }),
+          action ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center self-center", children: action }) : null
+        ] }),
+        children
+      ]
+    }
+  );
+}
 var Checkbox = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   CheckboxPrimitive.Root,
   {
@@ -2641,6 +2720,313 @@ var InputOTPSlot = React11.forwardRef(({ index, className, ...props }, ref) => {
 InputOTPSlot.displayName = "InputOTPSlot";
 var InputOTPSeparator = React11.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx(Dot, {}) }));
 InputOTPSeparator.displayName = "InputOTPSeparator";
+
+// src/lib/pagination.ts
+function buildVisiblePages(current, totalPages) {
+  if (totalPages <= 7) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+  const pages = [1];
+  if (current > 3) {
+    pages.push("ellipsis");
+  }
+  const start = Math.max(2, current - 1);
+  const end = Math.min(totalPages - 1, current + 1);
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+  if (current < totalPages - 2) {
+    pages.push("ellipsis");
+  }
+  pages.push(totalPages);
+  return pages;
+}
+function buildRangeLabel(page, pageSize, total, itemLabel = "itens", formatTotal = (n) => n.toLocaleString("pt-BR")) {
+  if (total === 0) return `0 ${itemLabel}`;
+  const from = (page - 1) * pageSize + 1;
+  const to = Math.min(page * pageSize, total);
+  return `${from.toLocaleString("pt-BR")} \u2013 ${to.toLocaleString("pt-BR")} de ${formatTotal(total)} ${itemLabel}`;
+}
+var Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "nav",
+  {
+    role: "navigation",
+    "aria-label": "pagination",
+    className: cn("mx-auto flex w-full justify-center", className),
+    ...props
+  }
+);
+Pagination.displayName = "Pagination";
+var PaginationContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "ul",
+  {
+    ref,
+    className: cn("flex flex-row items-center gap-1", className),
+    ...props
+  }
+));
+PaginationContent.displayName = "PaginationContent";
+var PaginationItem = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("", className), ...props }));
+PaginationItem.displayName = "PaginationItem";
+var PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    "aria-current": isActive ? "page" : void 0,
+    className: cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size
+      }),
+      className
+    ),
+    ...props
+  }
+);
+PaginationLink.displayName = "PaginationLink";
+var PaginationPrevious = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  PaginationLink,
+  {
+    "aria-label": "Go to previous page",
+    size: "default",
+    className: cn("gap-1 pl-2.5", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx("span", { children: "Previous" })
+    ]
+  }
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+var PaginationNext = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  PaginationLink,
+  {
+    "aria-label": "Go to next page",
+    size: "default",
+    className: cn("gap-1 pr-2.5", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { children: "Next" }),
+      /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+    ]
+  }
+);
+PaginationNext.displayName = "PaginationNext";
+var PaginationEllipsis = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "span",
+  {
+    "aria-hidden": true,
+    className: cn("flex h-9 w-9 items-center justify-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
+    ]
+  }
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+function MinimalPageNumbers({
+  page,
+  totalPages,
+  disabled,
+  onPageChange,
+  pageAria
+}) {
+  const visiblePages = buildVisiblePages(page, totalPages);
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 tabular-nums", "aria-live": "polite", children: visiblePages.map(
+    (item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "select-none text-sm text-muted-foreground",
+        "aria-hidden": true,
+        children: "\u2026"
+      },
+      `ellipsis-${index}`
+    ) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled,
+        "aria-label": pageAria(item),
+        "aria-current": item === page ? "page" : void 0,
+        onClick: () => {
+          if (!disabled && item !== page) onPageChange(item);
+        },
+        className: cn(
+          "min-w-[1.25rem] text-sm transition-colors",
+          item === page ? "font-medium text-primary" : "text-muted-foreground hover:text-foreground",
+          disabled && "pointer-events-none opacity-50"
+        ),
+        children: item
+      },
+      item
+    )
+  ) });
+}
+function ListingPagination({
+  page,
+  totalPages,
+  total,
+  pageSize,
+  itemLabel,
+  disabled = false,
+  variant = "default",
+  className,
+  onPageChange,
+  formatTotal,
+  labels
+}) {
+  if (totalPages <= 1) return null;
+  const previous = labels?.previous ?? "Anterior";
+  const next = labels?.next ?? "Pr\xF3xima";
+  const previousAria = labels?.previousAria ?? "P\xE1gina anterior";
+  const nextAria = labels?.nextAria ?? "Pr\xF3xima p\xE1gina";
+  const pageAria = labels?.pageAria ?? ((p) => `P\xE1gina ${p}`);
+  const rangeLabel = total != null && pageSize != null ? buildRangeLabel(page, pageSize, total, itemLabel, formatTotal) : `P\xE1gina ${page} de ${totalPages}`;
+  if (variant === "minimal") {
+    const canGoPrev = !disabled && page > 1;
+    const canGoNext = !disabled && page < totalPages;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-between gap-4 text-xs text-muted-foreground",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "icon",
+                className: "h-7 w-7 shrink-0 rounded-full text-foreground shadow-none hover:translate-y-0 hover:bg-muted hover:text-foreground hover:shadow-none disabled:opacity-40",
+                "aria-label": previousAria,
+                disabled: !canGoPrev,
+                onClick: () => {
+                  if (canGoPrev) onPageChange(page - 1);
+                },
+                children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              MinimalPageNumbers,
+              {
+                page,
+                totalPages,
+                disabled,
+                onPageChange,
+                pageAria
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "icon",
+                className: "h-7 w-7 shrink-0 rounded-full text-foreground shadow-none hover:translate-y-0 hover:bg-muted hover:text-foreground hover:shadow-none disabled:opacity-40",
+                "aria-label": nextAria,
+                disabled: !canGoNext,
+                onClick: () => {
+                  if (canGoNext) onPageChange(page + 1);
+                },
+                children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: rangeLabel })
+        ]
+      }
+    );
+  }
+  const visiblePages = buildVisiblePages(page, totalPages);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-3 rounded-lg border border-border bg-card px-3 py-2.5 sm:flex-row sm:items-center sm:justify-between",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: rangeLabel }),
+        /* @__PURE__ */ jsx(Pagination, { className: "mx-0 w-auto justify-end", children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
+          /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsxs(
+            PaginationLink,
+            {
+              href: "#",
+              size: "default",
+              "aria-label": previousAria,
+              className: cn(
+                "gap-1 pl-2.5",
+                (disabled || page <= 1) && "pointer-events-none opacity-50"
+              ),
+              onClick: (event) => {
+                event.preventDefault();
+                if (!disabled && page > 1) onPageChange(page - 1);
+              },
+              children: [
+                /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx("span", { children: previous })
+              ]
+            }
+          ) }),
+          visiblePages.map(
+            (item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }, `ellipsis-${index}`) : /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+              PaginationLink,
+              {
+                href: "#",
+                isActive: item === page,
+                "aria-label": pageAria(item),
+                "aria-current": item === page ? "page" : void 0,
+                className: cn(disabled && "pointer-events-none opacity-50"),
+                onClick: (event) => {
+                  event.preventDefault();
+                  if (!disabled && item !== page) onPageChange(item);
+                },
+                children: item
+              }
+            ) }, item)
+          ),
+          /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsxs(
+            PaginationLink,
+            {
+              href: "#",
+              size: "default",
+              "aria-label": nextAria,
+              className: cn(
+                "gap-1 pr-2.5",
+                (disabled || page >= totalPages) && "pointer-events-none opacity-50"
+              ),
+              onClick: (event) => {
+                event.preventDefault();
+                if (!disabled && page < totalPages) onPageChange(page + 1);
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { children: next }),
+                /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+              ]
+            }
+          ) })
+        ] }) })
+      ]
+    }
+  );
+}
 var MenubarMenu = MenubarPrimitive.Menu;
 var MenubarGroup = MenubarPrimitive.Group;
 var MenubarPortal = MenubarPrimitive.Portal;
@@ -2890,97 +3276,84 @@ var NavigationMenuIndicator = React11.forwardRef(({ className, ...props }, ref)
   }
 ));
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
-var Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx(
-  "nav",
-  {
-    role: "navigation",
-    "aria-label": "pagination",
-    className: cn("mx-auto flex w-full justify-center", className),
-    ...props
-  }
-);
-Pagination.displayName = "Pagination";
-var PaginationContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "ul",
-  {
-    ref,
-    className: cn("flex flex-row items-center gap-1", className),
-    ...props
-  }
-));
-PaginationContent.displayName = "PaginationContent";
-var PaginationItem = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("", className), ...props }));
-PaginationItem.displayName = "PaginationItem";
-var PaginationLink = ({
-  className,
-  isActive,
-  size = "icon",
-  ...props
-}) => /* @__PURE__ */ jsx(
-  "a",
-  {
-    "aria-current": isActive ? "page" : void 0,
-    className: cn(
-      buttonVariants({
-        variant: isActive ? "outline" : "ghost",
-        size
-      }),
-      className
-    ),
-    ...props
-  }
-);
-PaginationLink.displayName = "PaginationLink";
-var PaginationPrevious = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxs(
-  PaginationLink,
-  {
-    "aria-label": "Go to previous page",
-    size: "default",
-    className: cn("gap-1 pl-2.5", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsx("span", { children: "Previous" })
-    ]
-  }
-);
-PaginationPrevious.displayName = "PaginationPrevious";
-var PaginationNext = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxs(
-  PaginationLink,
-  {
-    "aria-label": "Go to next page",
-    size: "default",
-    className: cn("gap-1 pr-2.5", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", { children: "Next" }),
-      /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
-    ]
-  }
-);
-PaginationNext.displayName = "PaginationNext";
-var PaginationEllipsis = ({
+function PageHeader({
+  label,
+  title,
+  description,
+  titleLoading = false,
+  badge,
+  meta,
+  back,
+  children,
   className,
-  ...props
-}) => /* @__PURE__ */ jsxs(
-  "span",
-  {
-    "aria-hidden": true,
-    className: cn("flex h-9 w-9 items-center justify-center", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
-    ]
-  }
-);
-PaginationEllipsis.displayName = "PaginationEllipsis";
+  titleClassName,
+  descriptionClassName,
+  titleSkeletonClassName
+}) {
+  const titleBlock = titleLoading ? /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      className: cn(
+        "h-7 w-48 max-w-full",
+        label && "mt-1",
+        titleSkeletonClassName
+      ),
+      "aria-label": "Loading"
+    }
+  ) : /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex min-w-0 flex-wrap items-center gap-x-2.5 gap-y-1",
+        label && "mt-1"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "h1",
+          {
+            className: cn(
+              "text-xl font-bold tracking-tight",
+              titleClassName
+            ),
+            children: title
+          }
+        ),
+        badge
+      ]
+    }
+  );
+  const primary = /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+    back,
+    label ? /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: label }) : null,
+    meta ? /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-4", children: [
+      titleBlock,
+      /* @__PURE__ */ jsx("div", { className: "shrink-0", children: meta })
+    ] }) : titleBlock,
+    description ? /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn(
+          "mt-1 max-w-2xl text-sm text-muted-foreground",
+          descriptionClassName
+        ),
+        children: description
+      }
+    ) : null
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        children ? "flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between" : "w-full",
+        className
+      ),
+      children: [
+        primary,
+        children ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children }) : null
+      ]
+    }
+  );
+}
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverContent = React11.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
@@ -3108,6 +3481,330 @@ var ScrollBar = React11.forwardRef(({ className, orientation = "vertical", ...pr
   }
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+function mergeItems(prev, next) {
+  if (next.length === 0) return prev;
+  const seen = new Set(prev.map((item) => item.id));
+  const out = [...prev];
+  for (const item of next) {
+    if (seen.has(item.id)) continue;
+    seen.add(item.id);
+    out.push(item);
+  }
+  return out;
+}
+function SearchableSelect({
+  value,
+  onChange,
+  allValue = "all",
+  allLabel,
+  searchPlaceholder,
+  loadItems,
+  resolveLabel,
+  pageSize = 50,
+  triggerClassName,
+  icon,
+  nestedInPopover = false,
+  disabled = false,
+  resetKey,
+  emptyLabel = "Nenhum resultado.",
+  loadingLabel = "Buscando\u2026",
+  loadingMoreLabel = "Carregando...",
+  debounceMs = 300
+}) {
+  const [open, setOpen] = React11.useState(false);
+  const [search, setSearch] = React11.useState("");
+  const [debouncedSearch, setDebouncedSearch] = React11.useState("");
+  const [items, setItems] = React11.useState([]);
+  const [loading, setLoading] = React11.useState(false);
+  const [loadingMore, setLoadingMore] = React11.useState(false);
+  const [hasMore, setHasMore] = React11.useState(false);
+  const [labelById, setLabelById] = React11.useState({});
+  const listRef = React11.useRef(null);
+  const loadMoreSentinelRef = React11.useRef(null);
+  const fetchOffsetRef = React11.useRef(0);
+  const loadMoreLockRef = React11.useRef(false);
+  const loadItemsRef = React11.useRef(loadItems);
+  const resolveLabelRef = React11.useRef(resolveLabel);
+  React11.useEffect(() => {
+    loadItemsRef.current = loadItems;
+  }, [loadItems]);
+  React11.useEffect(() => {
+    resolveLabelRef.current = resolveLabel;
+  }, [resolveLabel]);
+  React11.useEffect(() => {
+    const t = window.setTimeout(() => setDebouncedSearch(search), debounceMs);
+    return () => window.clearTimeout(t);
+  }, [search, debounceMs]);
+  const loadInitialItems = React11.useCallback(async (q) => {
+    setLoading(true);
+    setHasMore(false);
+    fetchOffsetRef.current = 0;
+    loadMoreLockRef.current = false;
+    try {
+      const { items: list, hasMore: more } = await loadItemsRef.current({
+        query: q,
+        limit: pageSize,
+        offset: 0
+      });
+      fetchOffsetRef.current = list.length;
+      setItems(list);
+      setHasMore(more);
+    } finally {
+      setLoading(false);
+    }
+  }, [pageSize]);
+  const loadMoreItems = React11.useCallback(async () => {
+    if (loadMoreLockRef.current || loading || loadingMore || !hasMore) return;
+    loadMoreLockRef.current = true;
+    setLoadingMore(true);
+    try {
+      const { items: next, hasMore: more } = await loadItemsRef.current({
+        query: debouncedSearch,
+        limit: pageSize,
+        offset: fetchOffsetRef.current
+      });
+      setItems((prev) => {
+        const merged = mergeItems(prev, next);
+        fetchOffsetRef.current = merged.length;
+        if (merged.length === prev.length) {
+          setHasMore(false);
+        } else {
+          setHasMore(more);
+        }
+        return merged;
+      });
+    } finally {
+      setLoadingMore(false);
+      loadMoreLockRef.current = false;
+    }
+  }, [debouncedSearch, hasMore, loading, loadingMore, pageSize]);
+  React11.useEffect(() => {
+    if (!open) return;
+    void loadInitialItems(debouncedSearch);
+  }, [open, debouncedSearch, loadInitialItems]);
+  React11.useEffect(() => {
+    if (!open || loading || loadingMore || !hasMore) return;
+    const root = listRef.current;
+    const sentinel = loadMoreSentinelRef.current;
+    if (!root || !sentinel) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          void loadMoreItems();
+        }
+      },
+      { root, rootMargin: "64px" }
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [open, loading, loadingMore, hasMore, loadMoreItems, items.length]);
+  React11.useEffect(() => {
+    if (!open || loading || loadingMore || !hasMore) return;
+    const root = listRef.current;
+    if (!root) return;
+    const frame = requestAnimationFrame(() => {
+      if (root.scrollHeight <= root.clientHeight + 8) {
+        void loadMoreItems();
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [open, loading, loadingMore, hasMore, loadMoreItems, items.length]);
+  React11.useEffect(() => {
+    setItems([]);
+    setLabelById({});
+    setSearch("");
+    setDebouncedSearch("");
+  }, [resetKey]);
+  React11.useEffect(() => {
+    if (value === allValue) return;
+    let cancelled = false;
+    void (async () => {
+      const resolver = resolveLabelRef.current;
+      if (resolver) {
+        const label = await resolver(value);
+        if (cancelled || !label) return;
+        setLabelById(
+          (prev) => prev[value] ? prev : { ...prev, [value]: label }
+        );
+        return;
+      }
+      const { items: list } = await loadItemsRef.current({
+        query: value,
+        limit: 30,
+        offset: 0
+      });
+      if (cancelled) return;
+      const hit = list.find((i) => i.id === value);
+      if (hit?.label) {
+        setLabelById(
+          (prev) => prev[value] ? prev : { ...prev, [value]: hit.label }
+        );
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [value, allValue, resetKey]);
+  const triggerLabel = React11.useMemo(() => {
+    if (value === allValue) return allLabel;
+    const fromCache = labelById[value];
+    if (fromCache) return fromCache;
+    const fromList = items.find((i) => i.id === value);
+    if (fromList?.label) return fromList.label;
+    return value;
+  }, [value, allValue, allLabel, labelById, items]);
+  const listRows = React11.useMemo(() => {
+    if (value === allValue) return items;
+    const has = items.some((i) => i.id === value);
+    if (has) return items;
+    const label = labelById[value] || value;
+    return [{ id: value, label, secondary: value }, ...items];
+  }, [items, value, allValue, labelById]);
+  React11.useEffect(() => {
+    if (disabled) setOpen(false);
+  }, [disabled]);
+  const isFiltered = value !== allValue && value.trim() !== "";
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      modal: false,
+      open: disabled ? false : open,
+      onOpenChange: (v) => {
+        if (disabled) return;
+        setOpen(v);
+        if (!v) setSearch("");
+      },
+      children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          Dropdown,
+          {
+            open,
+            isFiltered,
+            disabled,
+            className: cn(
+              triggerClassName,
+              disabled && "cursor-not-allowed opacity-50 hover:translate-y-0"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2 text-[14px]", children: [
+                icon ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "h-4 w-4 shrink-0",
+                      isFiltered ? "text-primary" : "text-muted-foreground"
+                    ),
+                    "aria-hidden": true,
+                    children: icon
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn("truncate", isFiltered && "text-foreground"),
+                    title: value !== allValue ? triggerLabel : void 0,
+                    children: triggerLabel
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-3.5 w-3.5 shrink-0 opacity-50" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          PopoverContent,
+          {
+            className: cn(
+              "w-[max(var(--radix-popover-trigger-width),280px)] max-w-[min(90vw,420px)] p-0",
+              nestedInPopover && "z-[100]"
+            ),
+            align: "start",
+            onOpenAutoFocus: nestedInPopover ? (e) => e.preventDefault() : void 0,
+            children: /* @__PURE__ */ jsxs(Command, { shouldFilter: false, children: [
+              /* @__PURE__ */ jsx(
+                CommandInput,
+                {
+                  placeholder: searchPlaceholder,
+                  value: search,
+                  onValueChange: setSearch,
+                  className: "h-9 text-xs"
+                }
+              ),
+              /* @__PURE__ */ jsx(CommandList, { ref: listRef, children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground", children: [
+                /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
+                loadingLabel
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(CommandEmpty, { className: "text-sm", children: emptyLabel }),
+                /* @__PURE__ */ jsxs(CommandGroup, { children: [
+                  /* @__PURE__ */ jsxs(
+                    CommandItem,
+                    {
+                      value: "__all__",
+                      className: "text-xs",
+                      onSelect: () => {
+                        onChange(allValue);
+                        setOpen(false);
+                      },
+                      children: [
+                        value === allValue ? /* @__PURE__ */ jsx(Check, { className: "mr-1 h-3.5 w-3.5 shrink-0" }) : /* @__PURE__ */ jsx("span", { className: "mr-1 h-3.5 w-3.5 shrink-0" }),
+                        allLabel
+                      ]
+                    }
+                  ),
+                  listRows.map((item) => /* @__PURE__ */ jsxs(
+                    CommandItem,
+                    {
+                      value: `${item.id}	${item.label}`,
+                      className: cn(
+                        "mt-0.5 items-start gap-1.5 text-xs",
+                        value === item.id && "bg-primary/45"
+                      ),
+                      onSelect: () => {
+                        onChange(item.id);
+                        setLabelById((prev) => ({
+                          ...prev,
+                          [item.id]: item.label || item.id
+                        }));
+                        setOpen(false);
+                      },
+                      children: [
+                        value === item.id ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 shrink-0" }) : /* @__PURE__ */ jsx("span", { className: "h-3.5 w-3.5 shrink-0" }),
+                        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-start gap-2", children: item.label ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: "min-w-0 flex-1 break-words font-medium leading-snug",
+                              title: item.label,
+                              children: item.label
+                            }
+                          ),
+                          item.secondary ?? item.id ? /* @__PURE__ */ jsx("span", { className: "shrink-0 self-start text-right font-mono text-[11px] opacity-80", children: item.secondary ?? item.id }) : null
+                        ] }) : /* @__PURE__ */ jsx("span", { className: "font-mono", children: item.id }) })
+                      ]
+                    },
+                    item.id
+                  )),
+                  hasMore ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ref: loadMoreSentinelRef,
+                      className: "h-px w-full shrink-0",
+                      "aria-hidden": true
+                    }
+                  ) : null,
+                  loadingMore ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 py-3 text-xs text-muted-foreground", children: [
+                    /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
+                    loadingMoreLabel
+                  ] }) : null
+                ] })
+              ] }) })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
@@ -3618,6 +4315,6 @@ var ToggleGroupItem = React11.forwardRef(({ className, children, variant, size,
 });
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppChromeHeader, AppChromeSidebar, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label3 as Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup4 as RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Toaster as SonnerToaster, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster2 as Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, inputVariants, navigationMenuTriggerStyle, toast, toggleVariants, useFormField, useIsMobile, useSidebar, useToast };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppChromeBrand, AppChromeHeader, AppChromeSidebar, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartCard, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label3 as Label, ListingPagination, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageHeader, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup4 as RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchableSelect, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Toaster as SonnerToaster, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster2 as Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buildRangeLabel, buildVisiblePages, buttonVariants, cn, inputVariants, navigationMenuTriggerStyle, toast, toggleVariants, useFormField, useIsMobile, useSidebar, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map