@algenium/blocks 1.9.0 → 1.10.0

package/dist/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var React2 = require('react');
@@ -3665,6 +3666,158 @@ function ThemeSwitcher({
     }
   );
 }
+var defaultLabels2 = {
+  heading: "Organizations",
+  create: "Create organization",
+  empty: "No organization selected"
+};
+function TenantAvatar({
+  name,
+  logo,
+  size = "md"
+}) {
+  const sizeClass = size === "sm" ? "size-6 rounded-md" : "size-8 rounded-lg";
+  const textClass = size === "sm" ? "text-xs" : "text-sm";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "flex shrink-0 items-center justify-center overflow-hidden bg-muted font-medium text-muted-foreground",
+        sizeClass
+      ),
+      children: logo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: "", className: "size-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: textClass, children: name.charAt(0).toUpperCase() })
+    }
+  );
+}
+function SwitcherSkeleton({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-testid": "org-switcher-skeleton",
+      className: cn(
+        "pointer-events-none flex h-12 min-h-12 w-full items-center gap-2 rounded-md px-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-8 shrink-0 animate-pulse rounded-lg bg-muted" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-24 animate-pulse rounded bg-muted" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-16 animate-pulse rounded bg-muted" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto size-4 shrink-0 animate-pulse rounded-sm bg-muted" })
+      ]
+    }
+  );
+}
+var triggerClassName = "flex h-12 min-h-12 w-full items-center gap-2 rounded-md px-2 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-accent-foreground";
+function OrgSwitcher({
+  activeTenant,
+  tenants,
+  onSelectTenant,
+  createUrl,
+  isLoading = false,
+  collapsed = false,
+  isMobile = false,
+  activeSubtitle,
+  labels: userLabels,
+  className,
+  triggerClassName: triggerClassNameProp
+}) {
+  const labels = { ...defaultLabels2, ...userLabels };
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(SwitcherSkeleton, { className });
+  }
+  if (!activeTenant) {
+    if (createUrl) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "a",
+        {
+          href: createUrl,
+          "data-testid": "org-switcher-empty",
+          className: cn(triggerClassName, className, triggerClassNameProp),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-8 items-center justify-center rounded-lg bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { className: "size-4 text-muted-foreground" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid min-w-0 flex-1 text-left leading-tight", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: labels.empty }) })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-testid": "org-switcher-empty",
+        className: cn(triggerClassName, "pointer-events-none", className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-8 items-center justify-center rounded-lg bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { className: "size-4 text-muted-foreground" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid min-w-0 flex-1 text-left leading-tight", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium text-muted-foreground", children: labels.empty }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        "data-testid": "org-switcher",
+        className: cn(
+          triggerClassName,
+          "h-auto justify-start font-normal",
+          className,
+          triggerClassNameProp
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TenantAvatar, { name: activeTenant.name, logo: activeTenant.logo }),
+          !collapsed ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid min-w-0 flex-1 text-left leading-tight", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-semibold", children: activeTenant.name }),
+              activeSubtitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs text-muted-foreground", children: activeSubtitle }) : null
+            ] }),
+            activeTenant.statusBadge,
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "ml-auto size-4 shrink-0 opacity-50" })
+          ] }) : null
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DropdownMenuContent,
+      {
+        className: "min-w-64 rounded-lg",
+        align: "start",
+        side: isMobile ? "bottom" : "right",
+        sideOffset: 4,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: labels.heading }),
+          tenants.map((tenant, index) => {
+            const isActive = tenant.id === activeTenant.id;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              DropdownMenuItem,
+              {
+                onClick: () => onSelectTenant(tenant.id),
+                className: "gap-2 p-2",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(TenantAvatar, { name: tenant.name, logo: tenant.logo, size: "sm" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 whitespace-normal break-words", children: tenant.name }),
+                  tenant.statusBadge,
+                  isActive ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-4 shrink-0 opacity-70" }) : /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuShortcut, { children: String.fromCharCode(65 + index) })
+                ]
+              },
+              tenant.id
+            );
+          }),
+          createUrl ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { className: "gap-2 p-2", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: createUrl, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "size-4" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-muted-foreground", children: labels.create })
+            ] }) })
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+}
 var defaultLanguages = [
   { key: "en", label: "EN", nativeName: "English" },
   { key: "es", label: "ES", nativeName: "Espa\xF1ol" }
@@ -3721,7 +3874,7 @@ function LanguageSwitcher({
   const onLanguageChange = propOnLanguageChange ?? context?.setLanguage;
   const sizes = sizeClasses2[size];
   const shapeClass = shapeClasses2[shape];
-  const defaultLabels4 = {
+  const defaultLabels5 = {
     language: labels.language ?? "Language"
   };
   if (variant === "mini") {
@@ -3731,7 +3884,7 @@ function LanguageSwitcher({
         {
           variant: "ghost",
           size: "icon",
-          "aria-label": defaultLabels4.language,
+          "aria-label": defaultLabels5.language,
           className: cn(sizes.buttonMini, shapeClass, className),
           children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Languages, { className: sizes.iconMini })
         }
@@ -3816,7 +3969,7 @@ function LanguageSwitcher({
     }
   );
 }
-var defaultLabels2 = {
+var defaultLabels3 = {
   environment: "Data environment",
   live: "Live",
   staging: "Staging",
@@ -3889,7 +4042,7 @@ function EnvironmentMiniBadge({
   abbreviated = true
 }) {
   const ctx = useEnvironmentContext();
-  const labels = { ...defaultLabels2, ...userLabels };
+  const labels = { ...defaultLabels3, ...userLabels };
   const environment = propEnvironment ?? ctx?.environment ?? "production";
   const text = abbreviated ? abbreviateEnvironment(environment) : getEnvironmentLabel(environment, labels);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3946,7 +4099,7 @@ function EnvironmentSwitcher({
   side = "bottom"
 }) {
   const ctx = useEnvironmentContext();
-  const labels = { ...defaultLabels2, ...userLabels };
+  const labels = { ...defaultLabels3, ...userLabels };
   const environments = propEnvironments ?? ctx?.environments ?? [...BLOCKS_DATA_ENVIRONMENTS];
   const environment = propEnvironment ?? ctx?.environment ?? "production";
   const setEnvironment = propOnEnvironmentChange ?? ctx?.setEnvironment ?? (() => {
@@ -4101,7 +4254,7 @@ function EnvironmentSwitcher({
     }
   );
 }
-var defaultLabels3 = {
+var defaultLabels4 = {
   stagingMessage: "You are viewing staging data \u2014 changes do not affect live customers.",
   developmentMessage: "You are viewing development data \u2014 for testing only.",
   dismiss: "Dismiss"
@@ -4113,7 +4266,7 @@ function EnvironmentBanner({
   enabled = true
 }) {
   const ctx = useEnvironmentContext();
-  const labels = { ...defaultLabels3, ...userLabels };
+  const labels = { ...defaultLabels4, ...userLabels };
   const [dismissed, setDismissed] = React2.useState(false);
   const environment = propEnvironment ?? ctx?.environment ?? "production";
   const handleDismiss = React2.useCallback(() => {
@@ -8261,6 +8414,7 @@ exports.LoadingState = LoadingState;
 exports.MiniCalendar = MiniCalendar;
 exports.NotificationsContext = NotificationsContext;
 exports.NotificationsWidget = NotificationsWidget;
+exports.OrgSwitcher = OrgSwitcher;
 exports.Popover = Popover;
 exports.PopoverAnchor = PopoverAnchor;
 exports.PopoverContent = PopoverContent;