@storybook/addon-themes 10.1.0-alpha.1 → 10.1.0-alpha.10

package/dist/manager.js

@@ -14,13 +14,9 @@ import { addons as addons2, types } from "storybook/manager-api";
 
 // src/theme-switcher.tsx
 import React from "react";
-import { IconButton, TooltipLinkList, WithTooltip } from "storybook/internal/components";
+import { Button, Select } from "storybook/internal/components";
 import { PaintBrushIcon } from "@storybook/icons";
 import { addons, useAddonState, useChannel, useGlobals, useParameter } from "storybook/manager-api";
-import { styled } from "storybook/theming";
-var IconButtonLabel = styled.div(({ theme }) => ({
-  fontSize: theme.typography.size.s2 - 1
-}));
 var hasMultipleThemes = /* @__PURE__ */ __name((themesList) => themesList.length > 1, "hasMultipleThemes");
 var hasTwoThemes = /* @__PURE__ */ __name((themesList) => themesList.length === 2, "hasTwoThemes");
 var ThemeSwitcher = React.memo(/* @__PURE__ */ __name(function ThemeSwitcher2() {
@@ -49,69 +45,56 @@ var ThemeSwitcher = React.memo(/* @__PURE__ */ __name(function ThemeSwitcher2()
       }));
     }
   });
-  const themeName = selected || themeDefault;
+  const currentTheme = selected || themeDefault;
+  let ariaLabel = "";
   let label = "";
+  let tooltip = "";
   if (isLocked) {
     label = "Story override";
-  } else if (themeName) {
-    label = `${themeName} theme`;
+    ariaLabel = "Theme set by story parameters";
+    tooltip = "Theme set by story parameters";
+  } else if (currentTheme) {
+    label = `${currentTheme} theme`;
+    ariaLabel = "Theme";
+    tooltip = "Change theme";
   }
   if (disable) {
     return null;
   }
   if (hasTwoThemes(themesList)) {
-    const currentTheme = selected || themeDefault;
     const alternateTheme = themesList.find((theme) => theme !== currentTheme);
     return React.createElement(
-      IconButton,
+      Button,
       {
+        ariaLabel,
+        tooltip,
+        variant: "ghost",
         disabled: isLocked,
         key: THEME_SWITCHER_ID,
-        active: !themeOverride,
-        title: "Theme",
         onClick: () => {
           updateGlobals({ theme: alternateTheme });
         }
       },
       React.createElement(PaintBrushIcon, null),
-      label ? React.createElement(IconButtonLabel, null, label) : null
+      label
     );
   }
   if (hasMultipleThemes(themesList)) {
     return React.createElement(
-      WithTooltip,
+      Select,
       {
-        placement: "top",
-        trigger: "click",
-        closeOnOutsideClick: true,
-        tooltip: ({ onHide }) => {
-          return React.createElement(
-            TooltipLinkList,
-            {
-              links: themesList.map((theme) => ({
-                id: theme,
-                title: theme,
-                active: selected === theme,
-                onClick: /* @__PURE__ */ __name(() => {
-                  updateGlobals({ theme });
-                  onHide();
-                }, "onClick")
-              }))
-            }
-          );
-        }
+        icon: React.createElement(PaintBrushIcon, null),
+        ariaLabel,
+        disabled: isLocked,
+        key: THEME_SWITCHER_ID,
+        defaultOptions: currentTheme,
+        options: themesList.map((theme) => ({
+          title: theme,
+          value: theme
+        })),
+        onSelect: (selected2) => updateGlobals({ theme: selected2 })
       },
-      React.createElement(
-        IconButton,
-        {
-          key: THEME_SWITCHER_ID,
-          active: !themeOverride,
-          title: "Theme",
-          disabled: isLocked
-        },
-        React.createElement(PaintBrushIcon, null),
-        label && React.createElement(IconButtonLabel, null, label)
-      )
+      label
     );
   }
   return null;

package/dist/postinstall.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_sutnjoodbd from 'node:url';
-import CJS_COMPAT_NODE_PATH_sutnjoodbd from 'node:path';
-import CJS_COMPAT_NODE_MODULE_sutnjoodbd from "node:module";
+import CJS_COMPAT_NODE_URL_tw4bunchjjq from 'node:url';
+import CJS_COMPAT_NODE_PATH_tw4bunchjjq from 'node:path';
+import CJS_COMPAT_NODE_MODULE_tw4bunchjjq from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_sutnjoodbd.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_sutnjoodbd.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_sutnjoodbd.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_tw4bunchjjq.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_tw4bunchjjq.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_tw4bunchjjq.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "10.1.0-alpha.1",
+  "version": "10.1.0-alpha.10",
   "description": "Storybook Themes addon: Switch between themes from the toolbar",
   "keywords": [
     "css",
@@ -67,12 +67,12 @@
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "storybook": "^10.1.0-alpha.1"
+    "storybook": "^10.1.0-alpha.10"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae16",
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae17",
   "storybook": {
     "displayName": "Themes",
     "unsupportedFrameworks": [