@prediktif/ui 0.1.27 → 0.1.28

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>;

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>;

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 })

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 })
@@ -2685,7 +2738,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 +4253,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 +4529,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.28",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",