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

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,9 +5,8 @@ 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";
@@ -17,25 +16,17 @@ import React from "react";
 import { Button, Select } from "storybook/internal/components";
 import { PaintBrushIcon } from "@storybook/icons";
 import { addons, useAddonState, useChannel, useGlobals, useParameter } from "storybook/manager-api";
-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) => ({
@@ -45,24 +36,11 @@ var ThemeSwitcher = React.memo(/* @__PURE__ */ __name(function ThemeSwitcher2()
       }));
     }
   });
-  const currentTheme = selected || themeDefault;
-  let ariaLabel = "";
-  let label = "";
-  let tooltip = "";
-  if (isLocked) {
-    label = "Story override";
-    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) {
+  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 alternateTheme = themesList.find((theme) => theme !== currentTheme);
+    let alternateTheme = themesList.find((theme) => theme !== currentTheme);
     return React.createElement(
       Button,
       {
@@ -79,33 +57,30 @@ var ThemeSwitcher = React.memo(/* @__PURE__ */ __name(function ThemeSwitcher2()
       label
     );
   }
-  if (hasMultipleThemes(themesList)) {
-    return 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
-    );
-  }
-  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,16 +1,14 @@
-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";
+import CJS_COMPAT_NODE_URL_307wuhz3cn from 'node:url';
+import CJS_COMPAT_NODE_PATH_307wuhz3cn from 'node:path';
+import CJS_COMPAT_NODE_MODULE_307wuhz3cn from "node:module";
 
-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);
+var __filename = CJS_COMPAT_NODE_URL_307wuhz3cn.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_307wuhz3cn.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_307wuhz3cn.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";
@@ -20,17 +18,15 @@ var PACKAGE_MANAGER_TO_COMMAND = {
   yarn1: "npx",
   yarn2: "yarn dlx",
   bun: "bunx"
-};
-var selectPackageManagerCommand = /* @__PURE__ */ __name((packageManager) => PACKAGE_MANAGER_TO_COMMAND[packageManager], "selectPackageManagerCommand");
+}, selectPackageManagerCommand = (packageManager) => PACKAGE_MANAGER_TO_COMMAND[packageManager];
 async function postinstall({ packageManager = "npm" }) {
-  const command = selectPackageManagerCommand(packageManager);
+  let command = selectPackageManagerCommand(packageManager);
   await spawn(`${command} @storybook/auto-config themes`, {
     stdio: "inherit",
     cwd: process.cwd(),
-    shell: true
+    shell: !0
   });
 }
-__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.10",
+  "version": "10.1.0-alpha.12",
   "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.10"
+    "storybook": "^10.1.0-alpha.12"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae17",
+  "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
-};