@algenium/blocks 1.4.0 → 1.5.0-rc.2

package/dist/index.cjs

@@ -3168,7 +3168,7 @@ function DropdownMenuItem({
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[highlighted]:[&_svg:not([class*='text-'])]:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:[&_svg:not([class*='text-'])]:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:data-[highlighted]:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 dark:data-[variant=destructive]:data-[highlighted]:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:data-[highlighted]:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -3186,7 +3186,7 @@ function DropdownMenuCheckboxItem({
     {
       "data-slot": "dropdown-menu-checkbox-item",
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[highlighted]:[&_svg:not([class*='text-'])]:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:[&_svg:not([class*='text-'])]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       checked,
@@ -3219,7 +3219,7 @@ function DropdownMenuRadioItem({
     {
       "data-slot": "dropdown-menu-radio-item",
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[highlighted]:[&_svg:not([class*='text-'])]:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:[&_svg:not([class*='text-'])]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -3294,7 +3294,7 @@ function DropdownMenuSubTrigger({
       "data-slot": "dropdown-menu-sub-trigger",
       "data-inset": inset,
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-[inset]:pl-8 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[highlighted]:[&_svg:not([class*='text-'])]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:[&_svg:not([class*='text-'])]:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:[&_svg:not([class*='text-'])]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -3370,9 +3370,9 @@ var buttonVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        outline: "border bg-background text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:text-foreground dark:hover:bg-muted dark:hover:text-foreground",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 dark:hover:text-foreground",
         link: "text-primary underline-offset-4 hover:underline"
       },
       size: {
@@ -3564,7 +3564,7 @@ function ThemeSwitcher({
           onClick: () => handleThemeClick(key),
           className: cn(
             "gap-2 cursor-pointer",
-            currentTheme === key && "bg-accent"
+            currentTheme === key && "bg-accent text-accent-foreground [&_svg]:text-accent-foreground"
           ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4" }),
@@ -3722,7 +3722,7 @@ function LanguageSwitcher({
               onClick: () => onLanguageChange?.(key),
               className: cn(
                 "justify-center text-xs font-semibold cursor-pointer px-3",
-                currentLanguage === key && "bg-accent"
+                currentLanguage === key && "bg-accent text-accent-foreground"
               ),
               children: nativeName
             },
@@ -3794,6 +3794,90 @@ var defaultLabels2 = {
   staging: "Staging",
   development: "Development"
 };
+function getEnvironmentDotClass(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 getEnvironmentLabel(env, labels) {
+  switch (env) {
+    case "production":
+      return labels.live;
+    case "staging":
+      return labels.staging;
+    case "development":
+      return labels.development;
+    default:
+      return env;
+  }
+}
+function abbreviateEnvironment(env) {
+  switch (env) {
+    case "production":
+      return "Prod";
+    case "staging":
+      return "Stg";
+    case "development":
+      return "Dev";
+    default:
+      return env;
+  }
+}
+var environmentDotSizeClasses = {
+  xs: "size-1.5",
+  sm: "size-2",
+  md: "size-2.5"
+};
+function EnvironmentDot({
+  env,
+  size = "sm",
+  className
+}) {
+  const sizeClass = environmentDotSizeClasses[size];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn(
+        "rounded-full shrink-0 ring-1 ring-background",
+        sizeClass,
+        getEnvironmentDotClass(env),
+        className
+      ),
+      "aria-hidden": true
+    }
+  );
+}
+function EnvironmentMiniBadge({
+  className,
+  environment: propEnvironment,
+  labels: userLabels,
+  abbreviated = true
+}) {
+  const ctx = useEnvironmentContext();
+  const labels = { ...defaultLabels2, ...userLabels };
+  const environment = propEnvironment ?? ctx?.environment ?? "production";
+  const text = abbreviated ? abbreviateEnvironment(environment) : getEnvironmentLabel(environment, labels);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex max-w-[4.5rem] items-center gap-1 rounded-full border border-border bg-muted/60 px-1.5 py-0.5 text-[10px] font-semibold tabular-nums text-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(EnvironmentDot, { env: environment, size: "xs" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: text })
+      ]
+    }
+  );
+}
 var sizeClasses3 = {
   sm: {
     container: "h-7 p-0.5 text-xs",
@@ -3821,30 +3905,6 @@ 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,
@@ -3895,12 +3955,12 @@ function EnvironmentSwitcher({
                   className: cn(
                     "rounded-full shrink-0 ring-1 ring-background",
                     sizes.dot,
-                    envDotClass(environment)
+                    getEnvironmentDotClass(environment)
                   ),
                   "aria-hidden": true
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-[5.5rem] truncate", children: labelForEnv(environment, labels) })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-[5.5rem] truncate", children: getEnvironmentLabel(environment, labels) })
             ]
           }
         ) }) }),
@@ -3920,7 +3980,7 @@ function EnvironmentSwitcher({
           onClick: () => handleSelect(env),
           className: cn(
             "gap-2 cursor-pointer",
-            environment === env && "bg-accent"
+            environment === env && "bg-accent text-accent-foreground [&_svg]:text-accent-foreground"
           ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -3929,12 +3989,12 @@ function EnvironmentSwitcher({
                 className: cn(
                   "rounded-full shrink-0 ring-1 ring-background",
                   sizes.dot,
-                  envDotClass(env)
+                  getEnvironmentDotClass(env)
                 ),
                 "aria-hidden": true
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: labelForEnv(env, labels) })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: getEnvironmentLabel(env, labels) })
           ]
         },
         env
@@ -3965,7 +4025,7 @@ function EnvironmentSwitcher({
             "button",
             {
               type: "button",
-              "aria-label": labelForEnv(env, labels),
+              "aria-label": getEnvironmentLabel(env, labels),
               "aria-pressed": isActive,
               className: cn(
                 "relative min-w-0 font-semibold capitalize",
@@ -3999,12 +4059,12 @@ function EnvironmentSwitcher({
                           className: cn(
                             "rounded-full shrink-0 ring-1 ring-background",
                             "h-1.5 w-1.5",
-                            envDotClass(env)
+                            getEnvironmentDotClass(env)
                           ),
                           "aria-hidden": true
                         }
                       ),
-                      labelForEnv(env, labels)
+                      getEnvironmentLabel(env, labels)
                     ]
                   }
                 )
@@ -7340,6 +7400,8 @@ exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.EnvironmentBanner = EnvironmentBanner;
 exports.EnvironmentContext = EnvironmentContext;
+exports.EnvironmentDot = EnvironmentDot;
+exports.EnvironmentMiniBadge = EnvironmentMiniBadge;
 exports.EnvironmentSwitcher = EnvironmentSwitcher;
 exports.EventDialog = EventDialog;
 exports.EventRsvpBadge = EventRsvpBadge;
@@ -7365,6 +7427,8 @@ exports.UpcomingEvents = UpcomingEvents;
 exports.buttonVariants = buttonVariants;
 exports.cn = cn;
 exports.defaultLanguages = defaultLanguages;
+exports.getEnvironmentDotClass = getEnvironmentDotClass;
+exports.getEnvironmentLabel = getEnvironmentLabel;
 exports.isBlocksDataEnvironment = isBlocksDataEnvironment;
 exports.toggleVariants = toggleVariants;
 exports.useCalendarContext = useCalendarContext;