@storybook/addon-themes 10.1.0-alpha.9 → 10.1.0-beta.0

package/dist/_browser-chunks/chunk-DN7ZGZUH.js

@@ -0,0 +1,24 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+};
+
+// src/constants.ts
+var PARAM_KEY = "themes", ADDON_ID = `storybook/${PARAM_KEY}`, GLOBAL_KEY = "theme", THEME_SWITCHER_ID = `${ADDON_ID}/theme-switcher`, DEFAULT_ADDON_STATE = {
+  themesList: [],
+  themeDefault: void 0
+}, DEFAULT_THEME_PARAMETERS = {}, THEMING_EVENTS = {
+  REGISTER_THEMES: `${ADDON_ID}/REGISTER_THEMES`
+};
+
+export {
+  __export,
+  PARAM_KEY,
+  ADDON_ID,
+  GLOBAL_KEY,
+  THEME_SWITCHER_ID,
+  DEFAULT_ADDON_STATE,
+  DEFAULT_THEME_PARAMETERS,
+  THEMING_EVENTS
+};

package/dist/_browser-chunks/{chunk-R6XDDBXB.js → chunk-R3GPJ3N7.js}

@@ -1,7 +1,7 @@
 import {
   GLOBAL_KEY,
   __export
-} from "./chunk-D4FRO6NL.js";
+} from "./chunk-DN7ZGZUH.js";
 
 // src/preview.ts
 var preview_exports = {};

package/dist/index.js

@@ -1,14 +1,13 @@
 import {
   preview_exports
-} from "./_browser-chunks/chunk-R6XDDBXB.js";
+} from "./_browser-chunks/chunk-R3GPJ3N7.js";
 import {
   DEFAULT_THEME_PARAMETERS,
   GLOBAL_KEY,
   PARAM_KEY,
   THEMING_EVENTS,
-  __export,
-  __name
-} from "./_browser-chunks/chunk-D4FRO6NL.js";
+  __export
+} from "./_browser-chunks/chunk-DN7ZGZUH.js";
 
 // src/index.ts
 import { definePreviewAddon } from "storybook/internal/csf";
@@ -29,115 +28,76 @@ import { dedent } from "ts-dedent";
 function pluckThemeFromContext({ globals }) {
   return globals[GLOBAL_KEY] || "";
 }
-__name(pluckThemeFromContext, "pluckThemeFromContext");
 function useThemeParameters(context) {
-  deprecate(
+  return deprecate(
     dedent`The useThemeParameters function is deprecated. Please access parameters via the context directly instead e.g.
     - const { themeOverride } = context.parameters.themes ?? {};
     `
-  );
-  if (!context) {
-    return useParameter(PARAM_KEY, DEFAULT_THEME_PARAMETERS);
-  }
-  return context.parameters[PARAM_KEY] ?? DEFAULT_THEME_PARAMETERS;
+  ), context ? context.parameters[PARAM_KEY] ?? DEFAULT_THEME_PARAMETERS : useParameter(PARAM_KEY, DEFAULT_THEME_PARAMETERS);
 }
-__name(useThemeParameters, "useThemeParameters");
 function initializeThemeState(themeNames, defaultTheme) {
   addons.getChannel().emit(THEMING_EVENTS.REGISTER_THEMES, {
     defaultTheme,
     themes: themeNames
   });
 }
-__name(initializeThemeState, "initializeThemeState");
 
 // src/decorators/class-name.decorator.tsx
-var DEFAULT_ELEMENT_SELECTOR = "html";
-var classStringToArray = /* @__PURE__ */ __name((classString) => classString.split(" ").filter(Boolean), "classStringToArray");
-var withThemeByClassName = /* @__PURE__ */ __name(({
+var DEFAULT_ELEMENT_SELECTOR = "html", classStringToArray = (classString) => classString.split(" ").filter(Boolean), withThemeByClassName = ({
   themes,
   defaultTheme,
   parentSelector = DEFAULT_ELEMENT_SELECTOR
-}) => {
-  initializeThemeState(Object.keys(themes), defaultTheme);
-  return (storyFn, context) => {
-    const { themeOverride } = context.parameters[PARAM_KEY] ?? {};
-    const selected = pluckThemeFromContext(context);
-    useEffect(() => {
-      const selectedThemeName = themeOverride || selected || defaultTheme;
-      const parentElement = document.querySelector(parentSelector);
-      if (!parentElement) {
-        return;
-      }
-      Object.entries(themes).filter(([themeName]) => themeName !== selectedThemeName).forEach(([themeName, className]) => {
-        const classes = classStringToArray(className);
-        if (classes.length > 0) {
-          parentElement.classList.remove(...classes);
-        }
-      });
-      const newThemeClasses = classStringToArray(themes[selectedThemeName]);
-      if (newThemeClasses.length > 0) {
-        parentElement.classList.add(...newThemeClasses);
-      }
-    }, [themeOverride, selected]);
-    return storyFn();
-  };
-}, "withThemeByClassName");
+}) => (initializeThemeState(Object.keys(themes), defaultTheme), (storyFn, context) => {
+  let { themeOverride } = context.parameters[PARAM_KEY] ?? {}, selected = pluckThemeFromContext(context);
+  return useEffect(() => {
+    let selectedThemeName = themeOverride || selected || defaultTheme, parentElement = document.querySelector(parentSelector);
+    if (!parentElement)
+      return;
+    Object.entries(themes).filter(([themeName]) => themeName !== selectedThemeName).forEach(([themeName, className]) => {
+      let classes = classStringToArray(className);
+      classes.length > 0 && parentElement.classList.remove(...classes);
+    });
+    let newThemeClasses = classStringToArray(themes[selectedThemeName]);
+    newThemeClasses.length > 0 && parentElement.classList.add(...newThemeClasses);
+  }, [themeOverride, selected]), storyFn();
+});
 
 // src/decorators/data-attribute.decorator.tsx
 import { useEffect as useEffect2 } from "storybook/preview-api";
-var DEFAULT_ELEMENT_SELECTOR2 = "html";
-var DEFAULT_DATA_ATTRIBUTE = "data-theme";
-var withThemeByDataAttribute = /* @__PURE__ */ __name(({
+var DEFAULT_ELEMENT_SELECTOR2 = "html", DEFAULT_DATA_ATTRIBUTE = "data-theme", withThemeByDataAttribute = ({
   themes,
   defaultTheme,
   parentSelector = DEFAULT_ELEMENT_SELECTOR2,
   attributeName = DEFAULT_DATA_ATTRIBUTE
-}) => {
-  initializeThemeState(Object.keys(themes), defaultTheme);
-  return (storyFn, context) => {
-    const { themeOverride } = context.parameters[PARAM_KEY] ?? {};
-    const selected = pluckThemeFromContext(context);
-    useEffect2(() => {
-      const parentElement = document.querySelector(parentSelector);
-      const themeKey = themeOverride || selected || defaultTheme;
-      if (parentElement) {
-        parentElement.setAttribute(attributeName, themes[themeKey]);
-      }
-    }, [themeOverride, selected]);
-    return storyFn();
-  };
-}, "withThemeByDataAttribute");
+}) => (initializeThemeState(Object.keys(themes), defaultTheme), (storyFn, context) => {
+  let { themeOverride } = context.parameters[PARAM_KEY] ?? {}, selected = pluckThemeFromContext(context);
+  return useEffect2(() => {
+    let parentElement = document.querySelector(parentSelector), themeKey = themeOverride || selected || defaultTheme;
+    parentElement && parentElement.setAttribute(attributeName, themes[themeKey]);
+  }, [themeOverride, selected]), storyFn();
+});
 
 // src/decorators/provider.decorator.tsx
 import React from "react";
 import { useMemo } from "storybook/preview-api";
-var pluckThemeFromKeyPairTuple = /* @__PURE__ */ __name(([_, themeConfig]) => themeConfig, "pluckThemeFromKeyPairTuple");
-var withThemeFromJSXProvider = /* @__PURE__ */ __name(({
+var pluckThemeFromKeyPairTuple = ([_, themeConfig]) => themeConfig, withThemeFromJSXProvider = ({
   Provider,
   GlobalStyles,
   defaultTheme,
   themes = {}
 }) => {
-  const themeNames = Object.keys(themes);
-  const initialTheme = defaultTheme || themeNames[0];
-  initializeThemeState(themeNames, initialTheme);
-  return (storyFn, context) => {
-    const { themeOverride } = context.parameters[PARAM_KEY] ?? {};
-    const selected = pluckThemeFromContext(context);
-    const theme = useMemo(() => {
-      const selectedThemeName = themeOverride || selected || initialTheme;
-      const pairs = Object.entries(themes);
+  let themeNames = Object.keys(themes), initialTheme = defaultTheme || themeNames[0];
+  return initializeThemeState(themeNames, initialTheme), (storyFn, context) => {
+    let { themeOverride } = context.parameters[PARAM_KEY] ?? {}, selected = pluckThemeFromContext(context), theme = useMemo(() => {
+      let selectedThemeName = themeOverride || selected || initialTheme, pairs = Object.entries(themes);
       return pairs.length === 1 ? pluckThemeFromKeyPairTuple(pairs[0]) : themes[selectedThemeName];
     }, [selected, themeOverride]);
-    if (!Provider) {
-      return React.createElement(React.Fragment, null, GlobalStyles && React.createElement(GlobalStyles, null), storyFn());
-    }
-    return React.createElement(Provider, { theme }, GlobalStyles && React.createElement(GlobalStyles, null), storyFn());
+    return Provider ? React.createElement(Provider, { theme }, GlobalStyles && React.createElement(GlobalStyles, null), storyFn()) : React.createElement(React.Fragment, null, GlobalStyles && React.createElement(GlobalStyles, null), storyFn());
   };
-}, "withThemeFromJSXProvider");
+};
 
 // src/index.ts
-var index_default = /* @__PURE__ */ __name(() => definePreviewAddon(preview_exports), "default");
+var index_default = () => definePreviewAddon(preview_exports);
 export {
   helpers_exports as DecoratorHelpers,
   index_default as default,

package/dist/manager.js

@@ -5,41 +5,28 @@ import {
   GLOBAL_KEY,
   PARAM_KEY,
   THEME_SWITCHER_ID,
-  THEMING_EVENTS,
-  __name
-} from "./_browser-chunks/chunk-D4FRO6NL.js";
+  THEMING_EVENTS
+} from "./_browser-chunks/chunk-DN7ZGZUH.js";
 
 // src/manager.tsx
 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() {
-  const { themeOverride, disable } = useParameter(
+var hasMultipleThemes = (themesList) => themesList.length > 1, hasTwoThemes = (themesList) => themesList.length === 2, ThemeSwitcher = React.memo(function() {
+  let { themeOverride, disable } = useParameter(
     PARAM_KEY,
     DEFAULT_THEME_PARAMETERS
-  );
-  const [{ theme: selected }, updateGlobals, storyGlobals] = useGlobals();
-  const channel = addons.getChannel();
-  const fromLast = channel.last(THEMING_EVENTS.REGISTER_THEMES);
-  const initializeThemeState = Object.assign({}, DEFAULT_ADDON_STATE, {
+  ), [{ theme: selected }, updateGlobals, storyGlobals] = useGlobals(), fromLast = addons.getChannel().last(THEMING_EVENTS.REGISTER_THEMES), initializeThemeState = Object.assign({}, DEFAULT_ADDON_STATE, {
     themesList: fromLast?.[0]?.themes || [],
     themeDefault: fromLast?.[0]?.defaultTheme || ""
-  });
-  const [{ themesList, themeDefault }, updateState] = useAddonState(
+  }), [{ themesList, themeDefault }, updateState] = useAddonState(
     THEME_SWITCHER_ID,
     initializeThemeState
-  );
-  const isLocked = GLOBAL_KEY in storyGlobals || !!themeOverride;
+  ), isLocked = GLOBAL_KEY in storyGlobals || !!themeOverride;
   useChannel({
     [THEMING_EVENTS.REGISTER_THEMES]: ({ themes, defaultTheme }) => {
       updateState((state) => ({
@@ -49,80 +36,51 @@ var ThemeSwitcher = React.memo(/* @__PURE__ */ __name(function ThemeSwitcher2()
       }));
     }
   });
-  const themeName = selected || themeDefault;
-  let label = "";
-  if (isLocked) {
-    label = "Story override";
-  } else if (themeName) {
-    label = `${themeName} theme`;
-  }
-  if (disable) {
+  let currentTheme = selected || themeDefault, ariaLabel = "", label = "", tooltip = "";
+  if (isLocked ? (label = "Story override", ariaLabel = "Theme set by story parameters", tooltip = "Theme set by story parameters") : currentTheme && (label = `${currentTheme} theme`, ariaLabel = "Theme", tooltip = "Change theme"), disable)
     return null;
-  }
   if (hasTwoThemes(themesList)) {
-    const currentTheme = selected || themeDefault;
-    const alternateTheme = themesList.find((theme) => theme !== currentTheme);
+    let 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
-    );
-  }
-  if (hasMultipleThemes(themesList)) {
-    return React.createElement(
-      WithTooltip,
-      {
-        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")
-              }))
-            }
-          );
-        }
-      },
-      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;
-}, "ThemeSwitcher"));
+  return hasMultipleThemes(themesList) ? React.createElement(
+    Select,
+    {
+      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 })
+    },
+    label
+  ) : null;
+});
 
 // src/manager.tsx
 addons2.register(ADDON_ID, () => {
   addons2.add(THEME_SWITCHER_ID, {
     title: "Themes",
     type: types.TOOL,
-    match: /* @__PURE__ */ __name(({ viewMode, tabId }) => !!(viewMode && viewMode.match(/^(story|docs)$/)) && !tabId, "match"),
+    match: ({ viewMode, tabId }) => !!(viewMode && viewMode.match(/^(story|docs)$/)) && !tabId,
     render: ThemeSwitcher,
     paramKey: PARAM_KEY
   });

package/dist/postinstall.js

@@ -1,36 +1,32 @@
-import CJS_COMPAT_NODE_URL_dftftohiehi from 'node:url';
-import CJS_COMPAT_NODE_PATH_dftftohiehi from 'node:path';
-import CJS_COMPAT_NODE_MODULE_dftftohiehi from "node:module";
+import CJS_COMPAT_NODE_URL_k7lqsfji4o from 'node:url';
+import CJS_COMPAT_NODE_PATH_k7lqsfji4o from 'node:path';
+import CJS_COMPAT_NODE_MODULE_k7lqsfji4o from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_dftftohiehi.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_dftftohiehi.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_dftftohiehi.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_k7lqsfji4o.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_k7lqsfji4o.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_k7lqsfji4o.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
 // src/postinstall.ts
-import { spawn } from "child_process";
+import { PackageManagerName } from "storybook/internal/common";
+import { spawnSync } from "child_process";
 var PACKAGE_MANAGER_TO_COMMAND = {
-  npm: "npx",
-  pnpm: "pnpm dlx",
-  yarn1: "npx",
-  yarn2: "yarn dlx",
-  bun: "bunx"
-};
-var selectPackageManagerCommand = /* @__PURE__ */ __name((packageManager) => PACKAGE_MANAGER_TO_COMMAND[packageManager], "selectPackageManagerCommand");
-async function postinstall({ packageManager = "npm" }) {
-  const command = selectPackageManagerCommand(packageManager);
-  await spawn(`${command} @storybook/auto-config themes`, {
+  [PackageManagerName.NPM]: "npx",
+  [PackageManagerName.PNPM]: "pnpm dlx",
+  [PackageManagerName.YARN1]: "npx",
+  [PackageManagerName.YARN2]: "yarn dlx",
+  [PackageManagerName.BUN]: "bunx"
+}, selectPackageManagerCommand = (packageManager) => PACKAGE_MANAGER_TO_COMMAND[packageManager];
+async function postinstall({ packageManager = PackageManagerName.NPM }) {
+  let commandString = selectPackageManagerCommand(packageManager), [command, ...commandArgs] = commandString.split(" ");
+  spawnSync(command, [...commandArgs, "@storybook/auto-config", "themes"], {
     stdio: "inherit",
-    cwd: process.cwd(),
-    shell: true
+    cwd: process.cwd()
   });
 }
-__name(postinstall, "postinstall");
 export {
   postinstall as default
 };

package/dist/preview.js

@@ -1,7 +1,7 @@
 import {
   initialGlobals
-} from "./_browser-chunks/chunk-R6XDDBXB.js";
-import "./_browser-chunks/chunk-D4FRO6NL.js";
+} from "./_browser-chunks/chunk-R3GPJ3N7.js";
+import "./_browser-chunks/chunk-DN7ZGZUH.js";
 export {
   initialGlobals
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "10.1.0-alpha.9",
+  "version": "10.1.0-beta.0",
   "description": "Storybook Themes addon: Switch between themes from the toolbar",
   "keywords": [
     "css",
@@ -61,18 +61,18 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.6.0",
+    "@storybook/icons": "^2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "storybook": "^10.1.0-alpha.9"
+    "storybook": "^10.1.0-beta.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae16",
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae1l",
   "storybook": {
     "displayName": "Themes",
     "unsupportedFrameworks": [

package/dist/_browser-chunks/chunk-D4FRO6NL.js

@@ -1,32 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-
-// src/constants.ts
-var PARAM_KEY = "themes";
-var ADDON_ID = `storybook/${PARAM_KEY}`;
-var GLOBAL_KEY = "theme";
-var THEME_SWITCHER_ID = `${ADDON_ID}/theme-switcher`;
-var DEFAULT_ADDON_STATE = {
-  themesList: [],
-  themeDefault: void 0
-};
-var DEFAULT_THEME_PARAMETERS = {};
-var THEMING_EVENTS = {
-  REGISTER_THEMES: `${ADDON_ID}/REGISTER_THEMES`
-};
-
-export {
-  __name,
-  __export,
-  PARAM_KEY,
-  ADDON_ID,
-  GLOBAL_KEY,
-  THEME_SWITCHER_ID,
-  DEFAULT_ADDON_STATE,
-  DEFAULT_THEME_PARAMETERS,
-  THEMING_EVENTS
-};