@prediktif/ui 0.1.27 → 0.1.29

package/dist/index.d.mts

@@ -16,8 +16,9 @@ interface NavItem {
     locked?: boolean;
 }
 interface OrganizationItem {
+    id?: string;
     name: string;
-    logo?: React.ComponentType<{
+    logo?: string | React.ComponentType<{
         className?: string;
     }> | ReactNode;
     plan?: string;
@@ -27,6 +28,9 @@ interface AppSidebarProps {
     email?: string | null;
     orgRole?: string | null;
     brand?: string;
+    brandLogo?: string | React.ComponentType<{
+        className?: string;
+    }> | ReactNode;
     href?: string;
     confirmDialog?: boolean;
     headerDropdown?: boolean;
@@ -36,7 +40,7 @@ interface AppSidebarProps {
     navSecondaryItems?: NavItem[];
     organizations?: OrganizationItem[];
     activeOrg?: OrganizationItem;
-    setActiveOrg?: (org: OrganizationItem) => void;
+    setActiveOrg?: (org: OrganizationItem) => unknown;
     children?: ReactNode;
 }
 declare const AppSidebar: react.NamedExoticComponent<AppSidebarProps>;
@@ -190,6 +194,7 @@ interface PermissionBadgesProps {
     permissions?: string[] | null;
     maxDisplay?: number;
     className?: string;
+    wrap?: boolean;
 }
 declare const PermissionBadges: react.NamedExoticComponent<PermissionBadgesProps>;
 declare const PermissionsBadges: react.NamedExoticComponent<PermissionBadgesProps>;

package/dist/index.d.ts

@@ -16,8 +16,9 @@ interface NavItem {
     locked?: boolean;
 }
 interface OrganizationItem {
+    id?: string;
     name: string;
-    logo?: React.ComponentType<{
+    logo?: string | React.ComponentType<{
         className?: string;
     }> | ReactNode;
     plan?: string;
@@ -27,6 +28,9 @@ interface AppSidebarProps {
     email?: string | null;
     orgRole?: string | null;
     brand?: string;
+    brandLogo?: string | React.ComponentType<{
+        className?: string;
+    }> | ReactNode;
     href?: string;
     confirmDialog?: boolean;
     headerDropdown?: boolean;
@@ -36,7 +40,7 @@ interface AppSidebarProps {
     navSecondaryItems?: NavItem[];
     organizations?: OrganizationItem[];
     activeOrg?: OrganizationItem;
-    setActiveOrg?: (org: OrganizationItem) => void;
+    setActiveOrg?: (org: OrganizationItem) => unknown;
     children?: ReactNode;
 }
 declare const AppSidebar: react.NamedExoticComponent<AppSidebarProps>;
@@ -190,6 +194,7 @@ interface PermissionBadgesProps {
     permissions?: string[] | null;
     maxDisplay?: number;
     className?: string;
+    wrap?: boolean;
 }
 declare const PermissionBadges: react.NamedExoticComponent<PermissionBadgesProps>;
 declare const PermissionsBadges: react.NamedExoticComponent<PermissionBadgesProps>;

package/dist/index.js

@@ -1379,14 +1379,40 @@ function SidebarMenuBadge(_a) {
 
 // src/components/composed/app-sidebar.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-function renderNavIcon(icon) {
+function renderNavIcon(icon, className) {
   if (!icon) return null;
   if (typeof icon === "function" || typeof icon === "object" && icon !== null && "render" in icon) {
     const IconComp = icon;
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconComp, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconComp, { className });
   }
   return icon;
 }
+function renderOrgLogo(logo, name, className) {
+  if (typeof logo === "string" && logo.trim().length > 0) {
+    return (
+      // biome-ignore lint/performance/noImgElement: library component supports arbitrary external URLs without next.config restrictions
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "img",
+        {
+          src: logo,
+          alt: name || "Organization logo",
+          className: "size-full object-cover"
+        }
+      )
+    );
+  }
+  if (typeof logo === "function" || typeof logo === "object" && logo !== null && "render" in logo) {
+    const IconComp = logo;
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconComp, { className });
+  }
+  if (logo) {
+    return logo;
+  }
+  if (name && name.trim().length > 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "font-semibold text-xs leading-none select-none", children: name.trim().charAt(0).toUpperCase() });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Command, { className });
+}
 function formatSegment(segment, subHref, navMainItems = [], navSecondaryItems = []) {
   if (subHref) {
     const matched = [...navMainItems, ...navSecondaryItems].find(
@@ -1423,6 +1449,7 @@ function AppSidebarInner({
   email = "",
   orgRole = "",
   brand = "Prediktif",
+  brandLogo,
   href = "#",
   confirmDialog = false,
   headerDropdown = false,
@@ -1435,7 +1462,9 @@ function AppSidebarInner({
   children
 }) {
   const pathname = (0, import_navigation.usePathname)();
+  const router = (0, import_navigation.useRouter)();
   const { setOpenMobile } = useSidebar();
+  const [isPending, startTransition] = (0, import_react.useTransition)();
   const segments = pathname ? pathname.split("/").filter(Boolean) : [];
   const allNavItems = [...navMainItems, ...navSecondaryItems];
   (0, import_react.useEffect)(() => {
@@ -1446,6 +1475,19 @@ function AppSidebarInner({
   const handleLinkClick = () => {
     setOpenMobile(false);
   };
+  const handleSelectOrg = (org) => {
+    if (org.id && (activeOrg == null ? void 0 : activeOrg.id) && org.id === activeOrg.id) return;
+    setOpenMobile(false);
+    if (setActiveOrg) {
+      startTransition(async () => {
+        try {
+          await setActiveOrg(org);
+        } finally {
+          router.refresh();
+        }
+      });
+    }
+  };
   const initials = name ? name.trim().split(" ").map((n) => n[0]).join("").substring(0, 2).toUpperCase() : "U";
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Sidebar, { collapsible: "icon", children: [
@@ -1459,7 +1501,11 @@ function AppSidebarInner({
                 size: "lg",
                 className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Command, { className: "size-4" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground overflow-hidden", children: renderOrgLogo(
+                    activeOrg == null ? void 0 : activeOrg.logo,
+                    (activeOrg == null ? void 0 : activeOrg.name) || brand,
+                    "size-4"
+                  ) }),
                   /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate font-medium", children: (activeOrg == null ? void 0 : activeOrg.name) || brand }),
                     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate text-xs capitalize", children: (activeOrg == null ? void 0 : activeOrg.plan) || orgRole })
@@ -1480,17 +1526,24 @@ function AppSidebarInner({
             children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(DropdownMenuGroup, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: "Organizations" }),
               (organizations || []).map((org) => {
+                const isActive = org.id && org.id === (activeOrg == null ? void 0 : activeOrg.id) || org.name === (activeOrg == null ? void 0 : activeOrg.name);
                 return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                   DropdownMenuItem,
                   {
-                    onClick: () => setActiveOrg == null ? void 0 : setActiveOrg(org),
-                    className: "gap-2 p-2",
+                    disabled: isPending,
+                    onClick: () => handleSelectOrg(org),
+                    className: "gap-2 p-2 cursor-pointer",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex size-6 items-center justify-center rounded-md border", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Command, { className: "size-3.5 shrink-0" }) }),
-                      org.name
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex size-6 items-center justify-center rounded-md border overflow-hidden bg-background", children: renderOrgLogo(
+                        org.logo,
+                        org.name,
+                        "size-3.5 shrink-0"
+                      ) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex-1 truncate", children: org.name }),
+                      isActive && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Check, { className: "ml-auto size-4" })
                     ]
                   },
-                  org.name
+                  org.id || org.name
                 );
               })
             ] })
@@ -1502,7 +1555,7 @@ function AppSidebarInner({
           size: "lg",
           render: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_link.default, { href: "/", onClick: handleLinkClick }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Command, { className: "size-4" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground overflow-hidden", children: renderOrgLogo(brandLogo, brand, "size-4") }),
             /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
               /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate font-medium", children: brand }),
               /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate text-xs capitalize", children: orgRole })
@@ -2458,42 +2511,53 @@ var import_jsx_runtime24 = require("react/jsx-runtime");
 var PermissionBadges = (0, import_react12.memo)(function PermissionBadges2({
   permissions,
   maxDisplay = 3,
-  className
+  className,
+  wrap = false
 }) {
   const perms = permissions != null ? permissions : [];
   if (perms.length === 0) return null;
   const visible = perms.slice(0, maxDisplay);
   const remaining = perms.slice(maxDisplay);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: (0, import_cn20.cn)("flex flex-wrap items-center gap-1", className), children: [
-    visible.map((p) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      Badge,
-      {
-        variant: "outline",
-        className: "text-[10px] font-mono py-0 font-normal",
-        children: p
-      },
-      p
-    )),
-    remaining.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-        TooltipTrigger,
-        {
-          render: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-            Badge,
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    "div",
+    {
+      className: (0, import_cn20.cn)(
+        "flex items-center gap-1",
+        wrap ? "flex-wrap" : "flex-nowrap",
+        className
+      ),
+      children: [
+        visible.map((p) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          Badge,
+          {
+            variant: "outline",
+            className: "text-[10px] font-mono py-0 font-normal shrink-0",
+            children: p
+          },
+          p
+        )),
+        remaining.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Tooltip, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            TooltipTrigger,
             {
-              variant: "secondary",
-              className: "text-[10px] font-mono py-0 cursor-default font-normal",
-              children: [
-                "+",
-                remaining.length
-              ]
+              render: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+                Badge,
+                {
+                  variant: "secondary",
+                  className: "text-[10px] font-mono py-0 cursor-default font-normal shrink-0",
+                  children: [
+                    "+",
+                    remaining.length
+                  ]
+                }
+              )
             }
-          )
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TooltipContent, { className: "max-w-xs", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-col gap-0.5 text-xs font-mono", children: remaining.map((p) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: p }, p)) }) })
-    ] })
-  ] });
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TooltipContent, { className: "max-w-xs", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-col gap-0.5 text-xs font-mono", children: remaining.map((p) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: p }, p)) }) })
+        ] })
+      ]
+    }
+  );
 });
 var PermissionsBadges = PermissionBadges;
 

package/dist/index.mjs

@@ -32,10 +32,10 @@ var __objRest = (source, exclude) => {
 };
 
 // src/components/composed/app-sidebar.tsx
-import { ChevronsUpDown, Command, LockIcon } from "lucide-react";
+import { Check, ChevronsUpDown, Command, LockIcon } from "lucide-react";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { memo, useEffect as useEffect3 } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { memo, useEffect as useEffect3, useTransition } from "react";
 
 // src/components/ui/alert-dialog.tsx
 import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
@@ -1288,14 +1288,40 @@ function SidebarMenuBadge(_a) {
 
 // src/components/composed/app-sidebar.tsx
 import { Fragment, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
-function renderNavIcon(icon) {
+function renderNavIcon(icon, className) {
   if (!icon) return null;
   if (typeof icon === "function" || typeof icon === "object" && icon !== null && "render" in icon) {
     const IconComp = icon;
-    return /* @__PURE__ */ jsx12(IconComp, {});
+    return /* @__PURE__ */ jsx12(IconComp, { className });
   }
   return icon;
 }
+function renderOrgLogo(logo, name, className) {
+  if (typeof logo === "string" && logo.trim().length > 0) {
+    return (
+      // biome-ignore lint/performance/noImgElement: library component supports arbitrary external URLs without next.config restrictions
+      /* @__PURE__ */ jsx12(
+        "img",
+        {
+          src: logo,
+          alt: name || "Organization logo",
+          className: "size-full object-cover"
+        }
+      )
+    );
+  }
+  if (typeof logo === "function" || typeof logo === "object" && logo !== null && "render" in logo) {
+    const IconComp = logo;
+    return /* @__PURE__ */ jsx12(IconComp, { className });
+  }
+  if (logo) {
+    return logo;
+  }
+  if (name && name.trim().length > 0) {
+    return /* @__PURE__ */ jsx12("span", { className: "font-semibold text-xs leading-none select-none", children: name.trim().charAt(0).toUpperCase() });
+  }
+  return /* @__PURE__ */ jsx12(Command, { className });
+}
 function formatSegment(segment, subHref, navMainItems = [], navSecondaryItems = []) {
   if (subHref) {
     const matched = [...navMainItems, ...navSecondaryItems].find(
@@ -1332,6 +1358,7 @@ function AppSidebarInner({
   email = "",
   orgRole = "",
   brand = "Prediktif",
+  brandLogo,
   href = "#",
   confirmDialog = false,
   headerDropdown = false,
@@ -1344,7 +1371,9 @@ function AppSidebarInner({
   children
 }) {
   const pathname = usePathname();
+  const router = useRouter();
   const { setOpenMobile } = useSidebar();
+  const [isPending, startTransition] = useTransition();
   const segments = pathname ? pathname.split("/").filter(Boolean) : [];
   const allNavItems = [...navMainItems, ...navSecondaryItems];
   useEffect3(() => {
@@ -1355,6 +1384,19 @@ function AppSidebarInner({
   const handleLinkClick = () => {
     setOpenMobile(false);
   };
+  const handleSelectOrg = (org) => {
+    if (org.id && (activeOrg == null ? void 0 : activeOrg.id) && org.id === activeOrg.id) return;
+    setOpenMobile(false);
+    if (setActiveOrg) {
+      startTransition(async () => {
+        try {
+          await setActiveOrg(org);
+        } finally {
+          router.refresh();
+        }
+      });
+    }
+  };
   const initials = name ? name.trim().split(" ").map((n) => n[0]).join("").substring(0, 2).toUpperCase() : "U";
   return /* @__PURE__ */ jsxs7(Fragment, { children: [
     /* @__PURE__ */ jsxs7(Sidebar, { collapsible: "icon", children: [
@@ -1368,7 +1410,11 @@ function AppSidebarInner({
                 size: "lg",
                 className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
                 children: [
-                  /* @__PURE__ */ jsx12("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground", children: /* @__PURE__ */ jsx12(Command, { className: "size-4" }) }),
+                  /* @__PURE__ */ jsx12("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground overflow-hidden", children: renderOrgLogo(
+                    activeOrg == null ? void 0 : activeOrg.logo,
+                    (activeOrg == null ? void 0 : activeOrg.name) || brand,
+                    "size-4"
+                  ) }),
                   /* @__PURE__ */ jsxs7("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
                     /* @__PURE__ */ jsx12("span", { className: "truncate font-medium", children: (activeOrg == null ? void 0 : activeOrg.name) || brand }),
                     /* @__PURE__ */ jsx12("span", { className: "truncate text-xs capitalize", children: (activeOrg == null ? void 0 : activeOrg.plan) || orgRole })
@@ -1389,17 +1435,24 @@ function AppSidebarInner({
             children: /* @__PURE__ */ jsxs7(DropdownMenuGroup, { children: [
               /* @__PURE__ */ jsx12(DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: "Organizations" }),
               (organizations || []).map((org) => {
+                const isActive = org.id && org.id === (activeOrg == null ? void 0 : activeOrg.id) || org.name === (activeOrg == null ? void 0 : activeOrg.name);
                 return /* @__PURE__ */ jsxs7(
                   DropdownMenuItem,
                   {
-                    onClick: () => setActiveOrg == null ? void 0 : setActiveOrg(org),
-                    className: "gap-2 p-2",
+                    disabled: isPending,
+                    onClick: () => handleSelectOrg(org),
+                    className: "gap-2 p-2 cursor-pointer",
                     children: [
-                      /* @__PURE__ */ jsx12("div", { className: "flex size-6 items-center justify-center rounded-md border", children: /* @__PURE__ */ jsx12(Command, { className: "size-3.5 shrink-0" }) }),
-                      org.name
+                      /* @__PURE__ */ jsx12("div", { className: "flex size-6 items-center justify-center rounded-md border overflow-hidden bg-background", children: renderOrgLogo(
+                        org.logo,
+                        org.name,
+                        "size-3.5 shrink-0"
+                      ) }),
+                      /* @__PURE__ */ jsx12("span", { className: "flex-1 truncate", children: org.name }),
+                      isActive && /* @__PURE__ */ jsx12(Check, { className: "ml-auto size-4" })
                     ]
                   },
-                  org.name
+                  org.id || org.name
                 );
               })
             ] })
@@ -1411,7 +1464,7 @@ function AppSidebarInner({
           size: "lg",
           render: /* @__PURE__ */ jsx12(Link, { href: "/", onClick: handleLinkClick }),
           children: [
-            /* @__PURE__ */ jsx12("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground", children: /* @__PURE__ */ jsx12(Command, { className: "size-4" }) }),
+            /* @__PURE__ */ jsx12("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground overflow-hidden", children: renderOrgLogo(brandLogo, brand, "size-4") }),
             /* @__PURE__ */ jsxs7("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
               /* @__PURE__ */ jsx12("span", { className: "truncate font-medium", children: brand }),
               /* @__PURE__ */ jsx12("span", { className: "truncate text-xs capitalize", children: orgRole })
@@ -2381,42 +2434,53 @@ import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var PermissionBadges = memo12(function PermissionBadges2({
   permissions,
   maxDisplay = 3,
-  className
+  className,
+  wrap = false
 }) {
   const perms = permissions != null ? permissions : [];
   if (perms.length === 0) return null;
   const visible = perms.slice(0, maxDisplay);
   const remaining = perms.slice(maxDisplay);
-  return /* @__PURE__ */ jsxs17("div", { className: cn20("flex flex-wrap items-center gap-1", className), children: [
-    visible.map((p) => /* @__PURE__ */ jsx24(
-      Badge,
-      {
-        variant: "outline",
-        className: "text-[10px] font-mono py-0 font-normal",
-        children: p
-      },
-      p
-    )),
-    remaining.length > 0 && /* @__PURE__ */ jsxs17(Tooltip, { children: [
-      /* @__PURE__ */ jsx24(
-        TooltipTrigger,
-        {
-          render: /* @__PURE__ */ jsxs17(
-            Badge,
+  return /* @__PURE__ */ jsxs17(
+    "div",
+    {
+      className: cn20(
+        "flex items-center gap-1",
+        wrap ? "flex-wrap" : "flex-nowrap",
+        className
+      ),
+      children: [
+        visible.map((p) => /* @__PURE__ */ jsx24(
+          Badge,
+          {
+            variant: "outline",
+            className: "text-[10px] font-mono py-0 font-normal shrink-0",
+            children: p
+          },
+          p
+        )),
+        remaining.length > 0 && /* @__PURE__ */ jsxs17(Tooltip, { children: [
+          /* @__PURE__ */ jsx24(
+            TooltipTrigger,
             {
-              variant: "secondary",
-              className: "text-[10px] font-mono py-0 cursor-default font-normal",
-              children: [
-                "+",
-                remaining.length
-              ]
+              render: /* @__PURE__ */ jsxs17(
+                Badge,
+                {
+                  variant: "secondary",
+                  className: "text-[10px] font-mono py-0 cursor-default font-normal shrink-0",
+                  children: [
+                    "+",
+                    remaining.length
+                  ]
+                }
+              )
             }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx24(TooltipContent, { className: "max-w-xs", children: /* @__PURE__ */ jsx24("div", { className: "flex flex-col gap-0.5 text-xs font-mono", children: remaining.map((p) => /* @__PURE__ */ jsx24("span", { children: p }, p)) }) })
-    ] })
-  ] });
+          ),
+          /* @__PURE__ */ jsx24(TooltipContent, { className: "max-w-xs", children: /* @__PURE__ */ jsx24("div", { className: "flex flex-col gap-0.5 text-xs font-mono", children: remaining.map((p) => /* @__PURE__ */ jsx24("span", { children: p }, p)) }) })
+        ] })
+      ]
+    }
+  );
 });
 var PermissionsBadges = PermissionBadges;
 
@@ -2685,7 +2749,7 @@ import {
   useTable
 } from "@tanstack/react-table";
 import { FolderOpenIcon } from "lucide-react";
-import { useRouter as useRouter2 } from "next/navigation";
+import { useRouter as useRouter3 } from "next/navigation";
 import { useMemo as useMemo5, useState as useState6 } from "react";
 
 // src/components/composed/state-empty.tsx
@@ -4200,11 +4264,11 @@ function DataTableHeaderFilter({
 
 // src/components/composed/data-table/table-header-refresh.tsx
 import { RotateCwIcon } from "lucide-react";
-import { useRouter } from "next/navigation";
+import { useRouter as useRouter2 } from "next/navigation";
 import { useState as useState5 } from "react";
 import { jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
 function DataTableHeaderRefresh() {
-  const router = useRouter();
+  const router = useRouter2();
   const [isRefreshing, setIsRefreshing] = useState5(false);
   const handleRefresh = () => {
     setIsRefreshing(true);
@@ -4476,7 +4540,7 @@ function DataTable({
   showColumnToggleButton = true,
   showAddButton = true
 }) {
-  const router = useRouter2();
+  const router = useRouter3();
   const [createOpen, setCreateOpen] = useState6(false);
   const [sorting, setSorting] = useState6([]);
   const [columnFilters, setColumnFilters] = useState6([]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prediktif/ui",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",