@algenium/blocks 1.3.0 → 1.4.0

package/dist/index.cjs

@@ -68,6 +68,20 @@ var LanguageContext = React2.createContext(null);
 function useLanguageContext() {
   return React2.useContext(LanguageContext);
 }
+var BLOCKS_DATA_ENVIRONMENTS = [
+  "production",
+  "staging",
+  "development"
+];
+function isBlocksDataEnvironment(value) {
+  return BLOCKS_DATA_ENVIRONMENTS.includes(value);
+}
+var EnvironmentContext = React2.createContext(
+  null
+);
+function useEnvironmentContext() {
+  return React2.useContext(EnvironmentContext);
+}
 
 // node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -3669,7 +3683,7 @@ function LanguageSwitcher({
   const onLanguageChange = propOnLanguageChange ?? context?.setLanguage;
   const sizes = sizeClasses2[size];
   const shapeClass = shapeClasses2[shape];
-  const defaultLabels2 = {
+  const defaultLabels4 = {
     language: labels.language ?? "Language"
   };
   if (variant === "mini") {
@@ -3680,7 +3694,7 @@ function LanguageSwitcher({
           {
             variant: "ghost",
             size: "icon",
-            "aria-label": defaultLabels2.language,
+            "aria-label": defaultLabels4.language,
             className: cn(sizes.buttonMini, shapeClass, className),
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Languages, { className: sizes.iconMini })
           }
@@ -3691,7 +3705,7 @@ function LanguageSwitcher({
             side: tooltipSide,
             align: tooltipAlign,
             sideOffset: tooltipSideOffset,
-            children: defaultLabels2.language
+            children: defaultLabels4.language
           }
         )
       ] }),
@@ -3774,6 +3788,286 @@ function LanguageSwitcher({
     }
   );
 }
+var defaultLabels2 = {
+  environment: "Data environment",
+  live: "Live",
+  staging: "Staging",
+  development: "Development"
+};
+var sizeClasses3 = {
+  sm: {
+    container: "h-7 p-0.5 text-xs",
+    button: "h-6 px-2",
+    buttonMini: "h-7 gap-1.5 px-2",
+    dot: "size-2",
+    iconMini: "size-3.5"
+  },
+  md: {
+    container: "h-8 p-0.5 text-xs",
+    button: "h-7 px-2.5",
+    buttonMini: "h-8 gap-2 px-2.5",
+    dot: "size-2.5",
+    iconMini: "size-4"
+  },
+  lg: {
+    container: "h-9 p-0.5 text-sm",
+    button: "h-8 px-3",
+    buttonMini: "h-9 gap-2 px-3",
+    dot: "size-2.5",
+    iconMini: "size-4"
+  }
+};
+var shapeClasses3 = {
+  rounded: "rounded-md",
+  pill: "rounded-full"
+};
+function envDotClass(env) {
+  switch (env) {
+    case "production":
+      return "bg-emerald-500";
+    case "staging":
+      return "bg-orange-500";
+    case "development":
+      return "bg-amber-400";
+    default:
+      return "bg-muted-foreground";
+  }
+}
+function labelForEnv(env, labels) {
+  switch (env) {
+    case "production":
+      return labels.live;
+    case "staging":
+      return labels.staging;
+    case "development":
+      return labels.development;
+    default:
+      return env;
+  }
+}
+function EnvironmentSwitcher({
+  className,
+  environment: propEnvironment,
+  onEnvironmentChange: propOnEnvironmentChange,
+  environments: propEnvironments,
+  labels: userLabels,
+  size = "sm",
+  shape = "rounded",
+  variant = "mini",
+  align = "end",
+  side = "bottom",
+  tooltipSide = "bottom",
+  tooltipAlign = "center",
+  tooltipSideOffset = 8
+}) {
+  const ctx = useEnvironmentContext();
+  const labels = { ...defaultLabels2, ...userLabels };
+  const environments = propEnvironments ?? ctx?.environments ?? [...BLOCKS_DATA_ENVIRONMENTS];
+  const environment = propEnvironment ?? ctx?.environment ?? "production";
+  const setEnvironment = propOnEnvironmentChange ?? ctx?.setEnvironment ?? (() => {
+  });
+  const sizes = sizeClasses3[size];
+  const shapeClass = shapeClasses3[shape];
+  const handleSelect = (next) => {
+    if (next === environment) return;
+    setEnvironment(next);
+  };
+  if (variant === "mini") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { modal: false, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            "data-testid": "environment-switcher",
+            variant: "outline",
+            size: "sm",
+            "aria-label": labels.environment,
+            className: cn(
+              sizes.buttonMini,
+              shapeClass,
+              "font-medium tabular-nums border-border bg-background",
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    "rounded-full shrink-0 ring-1 ring-background",
+                    sizes.dot,
+                    envDotClass(environment)
+                  ),
+                  "aria-hidden": true
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-[5.5rem] truncate", children: labelForEnv(environment, labels) })
+            ]
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TooltipContent,
+          {
+            side: tooltipSide,
+            align: tooltipAlign,
+            sideOffset: tooltipSideOffset,
+            children: labels.environment
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { side, align, sideOffset: 8, children: environments.map((env) => /* @__PURE__ */ jsxRuntime.jsxs(
+        DropdownMenuItem,
+        {
+          onClick: () => handleSelect(env),
+          className: cn(
+            "gap-2 cursor-pointer",
+            environment === env && "bg-accent"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "rounded-full shrink-0 ring-1 ring-background",
+                  sizes.dot,
+                  envDotClass(env)
+                ),
+                "aria-hidden": true
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: labelForEnv(env, labels) })
+          ]
+        },
+        env
+      )) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-testid": "environment-switcher",
+      className: cn(
+        "relative isolate flex items-center bg-background ring-1 ring-border",
+        sizes.container,
+        shapeClass,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.FlaskConical,
+          {
+            className: cn(sizes.iconMini, "ml-1.5 mr-1 text-muted-foreground"),
+            "aria-hidden": true
+          }
+        ),
+        environments.map((env) => {
+          const isActive = environment === env;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              "aria-label": labelForEnv(env, labels),
+              "aria-pressed": isActive,
+              className: cn(
+                "relative min-w-0 font-semibold capitalize",
+                sizes.button,
+                shapeClass
+              ),
+              onClick: () => handleSelect(env),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isActive && /* @__PURE__ */ jsxRuntime.jsx(
+                  framerMotion.motion.div,
+                  {
+                    className: cn("absolute inset-0 bg-secondary", shapeClass),
+                    layoutId: "activeEnvironment",
+                    initial: { opacity: 0 },
+                    animate: { opacity: 1 },
+                    exit: { opacity: 0 },
+                    transition: { type: "spring", duration: 0.5 }
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: cn(
+                      "relative z-10 flex max-w-[4.5rem] items-center justify-center gap-1 truncate sm:max-w-[6rem]",
+                      isActive ? "text-foreground" : "text-muted-foreground"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "rounded-full shrink-0 ring-1 ring-background",
+                            "h-1.5 w-1.5",
+                            envDotClass(env)
+                          ),
+                          "aria-hidden": true
+                        }
+                      ),
+                      labelForEnv(env, labels)
+                    ]
+                  }
+                )
+              ]
+            },
+            env
+          );
+        })
+      ]
+    }
+  );
+}
+var defaultLabels3 = {
+  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"
+};
+function EnvironmentBanner({
+  className,
+  environment: propEnvironment,
+  labels: userLabels,
+  enabled = true
+}) {
+  const ctx = useEnvironmentContext();
+  const labels = { ...defaultLabels3, ...userLabels };
+  const [dismissed, setDismissed] = React2.useState(false);
+  const environment = propEnvironment ?? ctx?.environment ?? "production";
+  const handleDismiss = React2.useCallback(() => {
+    setDismissed(true);
+  }, []);
+  if (!enabled || dismissed || environment === "production") {
+    return null;
+  }
+  const isStaging = environment === "staging";
+  const message = isStaging ? labels.stagingMessage : labels.developmentMessage;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "status",
+      "data-testid": "environment-banner",
+      className: cn(
+        "flex w-full items-center justify-center gap-2 border-b px-3 py-2 text-center text-sm font-medium",
+        isStaging ? "border-orange-500/30 bg-orange-500/15 text-orange-950 dark:text-orange-100" : "border-amber-500/30 bg-amber-500/15 text-amber-950 dark:text-amber-100",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1", children: message }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon",
+            className: "h-7 w-7 shrink-0 opacity-80 hover:opacity-100",
+            onClick: handleDismiss,
+            "aria-label": labels.dismiss,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
+          }
+        )
+      ]
+    }
+  );
+}
 function Slider({
   className,
   defaultValue,
@@ -6999,6 +7293,7 @@ function formatRelativeTime(dateStr) {
 
 exports.AvatarEditor = AvatarEditor;
 exports.AvatarEditorDialog = AvatarEditorDialog;
+exports.BLOCKS_DATA_ENVIRONMENTS = BLOCKS_DATA_ENVIRONMENTS;
 exports.Button = Button;
 exports.CalendarContext = CalendarContext;
 exports.CalendarSubscribeButton = CalendarSubscribeButton;
@@ -7043,6 +7338,9 @@ exports.DropdownMenuSub = DropdownMenuSub;
 exports.DropdownMenuSubContent = DropdownMenuSubContent;
 exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
+exports.EnvironmentBanner = EnvironmentBanner;
+exports.EnvironmentContext = EnvironmentContext;
+exports.EnvironmentSwitcher = EnvironmentSwitcher;
 exports.EventDialog = EventDialog;
 exports.EventRsvpBadge = EventRsvpBadge;
 exports.LanguageContext = LanguageContext;
@@ -7067,10 +7365,12 @@ exports.UpcomingEvents = UpcomingEvents;
 exports.buttonVariants = buttonVariants;
 exports.cn = cn;
 exports.defaultLanguages = defaultLanguages;
+exports.isBlocksDataEnvironment = isBlocksDataEnvironment;
 exports.toggleVariants = toggleVariants;
 exports.useCalendarContext = useCalendarContext;
 exports.useChatRoom = useChatRoom;
 exports.useChatSidebar = useChatSidebar;
+exports.useEnvironmentContext = useEnvironmentContext;
 exports.useLanguageContext = useLanguageContext;
 exports.useNotificationsContext = useNotificationsContext;
 //# sourceMappingURL=index.cjs.map