@storybook/addon-themes 9.2.0-alpha.2 → 10.0.0-beta.0

package/README.md

@@ -1,6 +1,6 @@
 # @storybook/addon-themes
 
-Storybook Addon Themes can be used which between multiple themes for components inside the preview in [Storybook](https://storybook.js.org).
+Storybook Addon Themes can be used to switch between multiple themes for components inside the preview in [Storybook](https://storybook.js.org?ref=readme).
 
 ![React Storybook Screenshot](https://user-images.githubusercontent.com/18172605/274302488-77a39112-cdbe-4d16-9966-0d8e9e7e3399.gif)
 
@@ -12,7 +12,7 @@ Requires Storybook 7.0 or later. If you need to add it to your Storybook, you ca
 npm i -D @storybook/addon-themes
 ```
 
-Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
+Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project?ref=readme):
 
 ```js
 export default {
@@ -65,3 +65,5 @@ export const PrimaryDark = {
   globals: { theme: 'dark' },
 };
 ```
+
+Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).

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

@@ -0,0 +1,32 @@
+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
+};

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

@@ -0,0 +1,18 @@
+import {
+  GLOBAL_KEY,
+  __export
+} from "./chunk-D4FRO6NL.js";
+
+// src/preview.ts
+var preview_exports = {};
+__export(preview_exports, {
+  initialGlobals: () => initialGlobals
+});
+var initialGlobals = {
+  [GLOBAL_KEY]: ""
+};
+
+export {
+  initialGlobals,
+  preview_exports
+};

package/dist/index.d.ts

@@ -61,13 +61,9 @@ declare const helpers_initializeThemeState: typeof initializeThemeState;
 declare const helpers_pluckThemeFromContext: typeof pluckThemeFromContext;
 declare const helpers_useThemeParameters: typeof useThemeParameters;
 declare namespace helpers {
-  export {
-    helpers_initializeThemeState as initializeThemeState,
-    helpers_pluckThemeFromContext as pluckThemeFromContext,
-    helpers_useThemeParameters as useThemeParameters,
-  };
+  export { helpers_initializeThemeState as initializeThemeState, helpers_pluckThemeFromContext as pluckThemeFromContext, helpers_useThemeParameters as useThemeParameters };
 }
 
 declare const _default: () => storybook_internal_csf.PreviewAddon<ThemesTypes>;
 
-export { ClassNameStrategyConfiguration, DataAttributeStrategyConfiguration, helpers as DecoratorHelpers, ProviderStrategyConfiguration, ThemesTypes, _default as default, withThemeByClassName, withThemeByDataAttribute, withThemeFromJSXProvider };
+export { type ClassNameStrategyConfiguration, type DataAttributeStrategyConfiguration, helpers as DecoratorHelpers, type ProviderStrategyConfiguration, type ThemesTypes, _default as default, withThemeByClassName, withThemeByDataAttribute, withThemeFromJSXProvider };

package/dist/index.js

@@ -1,24 +1,147 @@
-'use strict';
+import {
+  preview_exports
+} from "./_browser-chunks/chunk-R6XDDBXB.js";
+import {
+  DEFAULT_THEME_PARAMETERS,
+  GLOBAL_KEY,
+  PARAM_KEY,
+  THEMING_EVENTS,
+  __export,
+  __name
+} from "./_browser-chunks/chunk-D4FRO6NL.js";
 
-Object.defineProperty(exports, '__esModule', { value: true });
+// src/index.ts
+import { definePreviewAddon } from "storybook/internal/csf";
 
-var csf = require('storybook/internal/csf');
-var previewApi = require('storybook/preview-api');
-var clientLogger = require('storybook/internal/client-logger');
-var dedent = require('ts-dedent');
-var React = require('react');
+// src/decorators/class-name.decorator.tsx
+import { useEffect } from "storybook/preview-api";
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+// src/decorators/helpers.ts
+var helpers_exports = {};
+__export(helpers_exports, {
+  initializeThemeState: () => initializeThemeState,
+  pluckThemeFromContext: () => pluckThemeFromContext,
+  useThemeParameters: () => useThemeParameters
+});
+import { deprecate } from "storybook/internal/client-logger";
+import { addons, useParameter } from "storybook/preview-api";
+import { dedent } from "ts-dedent";
+function pluckThemeFromContext({ globals }) {
+  return globals[GLOBAL_KEY] || "";
+}
+__name(pluckThemeFromContext, "pluckThemeFromContext");
+function useThemeParameters(context) {
+  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;
+}
+__name(useThemeParameters, "useThemeParameters");
+function initializeThemeState(themeNames, defaultTheme) {
+  addons.getChannel().emit(THEMING_EVENTS.REGISTER_THEMES, {
+    defaultTheme,
+    themes: themeNames
+  });
+}
+__name(initializeThemeState, "initializeThemeState");
 
-var dedent__default = /*#__PURE__*/_interopDefault(dedent);
-var React__default = /*#__PURE__*/_interopDefault(React);
+// 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(({
+  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");
 
-var __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};var preview_exports={};__export(preview_exports,{initialGlobals:()=>initialGlobals});var PARAM_KEY="themes",ADDON_ID=`storybook/${PARAM_KEY}`,GLOBAL_KEY="theme";var DEFAULT_THEME_PARAMETERS={},THEMING_EVENTS={REGISTER_THEMES:`${ADDON_ID}/REGISTER_THEMES`};var initialGlobals={[GLOBAL_KEY]:""};var helpers_exports={};__export(helpers_exports,{initializeThemeState:()=>initializeThemeState,pluckThemeFromContext:()=>pluckThemeFromContext,useThemeParameters:()=>useThemeParameters});function pluckThemeFromContext({globals}){return globals[GLOBAL_KEY]||""}function useThemeParameters(context){return clientLogger.deprecate(dedent__default.default`The useThemeParameters function is deprecated. Please access parameters via the context directly instead e.g.
-    - const { themeOverride } = context.parameters.themes ?? {};
-    `),context?context.parameters[PARAM_KEY]??DEFAULT_THEME_PARAMETERS:previewApi.useParameter(PARAM_KEY,DEFAULT_THEME_PARAMETERS)}function initializeThemeState(themeNames,defaultTheme){previewApi.addons.getChannel().emit(THEMING_EVENTS.REGISTER_THEMES,{defaultTheme,themes:themeNames});}var DEFAULT_ELEMENT_SELECTOR="html",classStringToArray=classString=>classString.split(" ").filter(Boolean),withThemeByClassName=({themes,defaultTheme,parentSelector=DEFAULT_ELEMENT_SELECTOR})=>(initializeThemeState(Object.keys(themes),defaultTheme),(storyFn,context)=>{let{themeOverride}=context.parameters[PARAM_KEY]??{},selected=pluckThemeFromContext(context);return previewApi.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()});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),(storyFn,context)=>{let{themeOverride}=context.parameters[PARAM_KEY]??{},selected=pluckThemeFromContext(context);return previewApi.useEffect(()=>{let parentElement=document.querySelector(parentSelector),themeKey=themeOverride||selected||defaultTheme;parentElement&&parentElement.setAttribute(attributeName,themes[themeKey]);},[themeOverride,selected]),storyFn()});var pluckThemeFromKeyPairTuple=([_,themeConfig])=>themeConfig,withThemeFromJSXProvider=({Provider,GlobalStyles,defaultTheme,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=previewApi.useMemo(()=>{let selectedThemeName=themeOverride||selected||initialTheme,pairs=Object.entries(themes);return pairs.length===1?pluckThemeFromKeyPairTuple(pairs[0]):themes[selectedThemeName]},[selected,themeOverride]);return Provider?React__default.default.createElement(Provider,{theme},GlobalStyles&&React__default.default.createElement(GlobalStyles,null),storyFn()):React__default.default.createElement(React__default.default.Fragment,null,GlobalStyles&&React__default.default.createElement(GlobalStyles,null),storyFn())}};var index_default=()=>csf.definePreviewAddon(preview_exports);
+// 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(({
+  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");
+
+// 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(({
+  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);
+      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());
+  };
+}, "withThemeFromJSXProvider");
 
-exports.DecoratorHelpers = helpers_exports;
-exports.default = index_default;
-exports.withThemeByClassName = withThemeByClassName;
-exports.withThemeByDataAttribute = withThemeByDataAttribute;
-exports.withThemeFromJSXProvider = withThemeFromJSXProvider;
+// src/index.ts
+var index_default = /* @__PURE__ */ __name(() => definePreviewAddon(preview_exports), "default");
+export {
+  helpers_exports as DecoratorHelpers,
+  index_default as default,
+  withThemeByClassName,
+  withThemeByDataAttribute,
+  withThemeFromJSXProvider
+};

package/dist/manager.js

@@ -1,7 +1,129 @@
-import { useParameter, useGlobals, addons, useAddonState, useChannel, types } from 'storybook/manager-api';
-import React from 'react';
-import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/components';
-import { PaintBrushIcon } from '@storybook/icons';
-import { styled } from 'storybook/theming';
+import {
+  ADDON_ID,
+  DEFAULT_ADDON_STATE,
+  DEFAULT_THEME_PARAMETERS,
+  GLOBAL_KEY,
+  PARAM_KEY,
+  THEME_SWITCHER_ID,
+  THEMING_EVENTS,
+  __name
+} from "./_browser-chunks/chunk-D4FRO6NL.js";
 
-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`};var IconButtonLabel=styled.div(({theme})=>({fontSize:theme.typography.size.s2-1})),hasMultipleThemes=themesList=>themesList.length>1,hasTwoThemes=themesList=>themesList.length===2,ThemeSwitcher=React.memo(function(){let{themeOverride,disable}=useParameter(PARAM_KEY,DEFAULT_THEME_PARAMETERS),[{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||""}),[{themesList,themeDefault},updateState]=useAddonState(THEME_SWITCHER_ID,initializeThemeState),isLocked=GLOBAL_KEY in storyGlobals||!!themeOverride;useChannel({[THEMING_EVENTS.REGISTER_THEMES]:({themes,defaultTheme})=>{updateState(state=>({...state,themesList:themes,themeDefault:defaultTheme}));}});let themeName=selected||themeDefault,label="";if(isLocked?label="Story override":themeName&&(label=`${themeName} theme`),disable)return null;if(hasTwoThemes(themesList)){let currentTheme=selected||themeDefault,alternateTheme=themesList.find(theme=>theme!==currentTheme);return React.createElement(IconButton,{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)}return hasMultipleThemes(themesList)?React.createElement(WithTooltip,{placement:"top",trigger:"click",closeOnOutsideClick:!0,tooltip:({onHide})=>React.createElement(TooltipLinkList,{links:themesList.map(theme=>({id:theme,title:theme,active:selected===theme,onClick:()=>{updateGlobals({theme}),onHide();}}))})},React.createElement(IconButton,{key:THEME_SWITCHER_ID,active:!themeOverride,title:"Theme",disabled:isLocked},React.createElement(PaintBrushIcon,null),label&&React.createElement(IconButtonLabel,null,label))):null});addons.register(ADDON_ID,()=>{addons.add(THEME_SWITCHER_ID,{title:"Themes",type:types.TOOL,match:({viewMode,tabId})=>!!(viewMode&&viewMode.match(/^(story|docs)$/))&&!tabId,render:ThemeSwitcher,paramKey:PARAM_KEY});});
+// 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 { 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(
+    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, {
+    themesList: fromLast?.[0]?.themes || [],
+    themeDefault: fromLast?.[0]?.defaultTheme || ""
+  });
+  const [{ themesList, themeDefault }, updateState] = useAddonState(
+    THEME_SWITCHER_ID,
+    initializeThemeState
+  );
+  const isLocked = GLOBAL_KEY in storyGlobals || !!themeOverride;
+  useChannel({
+    [THEMING_EVENTS.REGISTER_THEMES]: ({ themes, defaultTheme }) => {
+      updateState((state) => ({
+        ...state,
+        themesList: themes,
+        themeDefault: defaultTheme
+      }));
+    }
+  });
+  const themeName = selected || themeDefault;
+  let label = "";
+  if (isLocked) {
+    label = "Story override";
+  } else if (themeName) {
+    label = `${themeName} theme`;
+  }
+  if (disable) {
+    return null;
+  }
+  if (hasTwoThemes(themesList)) {
+    const currentTheme = selected || themeDefault;
+    const alternateTheme = themesList.find((theme) => theme !== currentTheme);
+    return React.createElement(
+      IconButton,
+      {
+        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)
+      )
+    );
+  }
+  return null;
+}, "ThemeSwitcher"));
+
+// 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"),
+    render: ThemeSwitcher,
+    paramKey: PARAM_KEY
+  });
+});

package/dist/postinstall.js

@@ -0,0 +1,39 @@
+import CJS_COMPAT_NODE_URL_l6cypphj3q from 'node:url';
+import CJS_COMPAT_NODE_PATH_l6cypphj3q from 'node:path';
+import CJS_COMPAT_NODE_MODULE_l6cypphj3q from "node:module";
+
+var __filename = CJS_COMPAT_NODE_URL_l6cypphj3q.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_l6cypphj3q.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_l6cypphj3q.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";
+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");
+var spawnPackageManagerScript = /* @__PURE__ */ __name(async (packageManager, args) => {
+  const [command, ...baseArgs] = selectPackageManagerCommand(packageManager);
+  await spawn(command, [...baseArgs, ...args], {
+    stdio: "inherit",
+    cwd: process.cwd(),
+    shell: true
+  });
+}, "spawnPackageManagerScript");
+async function postinstall({ packageManager = "npm" }) {
+  await spawnPackageManagerScript(packageManager, ["@storybook/auto-config", "themes"]);
+}
+__name(postinstall, "postinstall");
+export {
+  postinstall as default
+};

package/dist/preview.js

@@ -1,5 +1,7 @@
-'use strict';
-
-var GLOBAL_KEY="theme";var initialGlobals={[GLOBAL_KEY]:""};
-
-exports.initialGlobals = initialGlobals;
+import {
+  initialGlobals
+} from "./_browser-chunks/chunk-R6XDDBXB.js";
+import "./_browser-chunks/chunk-D4FRO6NL.js";
+export {
+  initialGlobals
+};

package/manager.js

@@ -1 +1 @@
-import './dist/manager';
+export * from './dist/manager.js';

package/package.json

@@ -1,15 +1,22 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "9.2.0-alpha.2",
-  "description": "Switch between multiple themes for you components in Storybook",
+  "version": "10.0.0-beta.0",
+  "description": "Storybook Themes addon: Switch between themes from the toolbar",
   "keywords": [
     "css",
     "essentials",
+    "storybook",
     "storybook-addon",
-    "storybook-addons",
     "style",
     "themes",
-    "toggle"
+    "toggle",
+    "component",
+    "components",
+    "react",
+    "vue",
+    "angular",
+    "svelte",
+    "web-components"
   ],
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/themes",
   "bugs": {
@@ -29,29 +36,14 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    },
-    "./preview": {
-      "types": "./dist/preview.d.ts",
-      "import": "./dist/preview.mjs",
-      "require": "./dist/preview.js"
+      "default": "./dist/index.js"
     },
     "./manager": "./dist/manager.js",
     "./package.json": "./package.json",
-    "./postinstall": "./postinstall.js"
-  },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "*": [
-        "dist/index.d.ts"
-      ],
-      "preview": [
-        "dist/preview.d.ts"
-      ]
+    "./postinstall": "./dist/postinstall.js",
+    "./preview": {
+      "types": "./dist/preview.d.ts",
+      "default": "./dist/preview.js"
     }
   },
   "files": [
@@ -62,8 +54,8 @@
     "!src/**/*"
   ],
   "scripts": {
-    "check": "jiti ../../../scripts/prepare/check.ts",
-    "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
+    "check": "jiti ../../../scripts/check/check-package.ts",
+    "prep": "jiti ../../../scripts/build/build-package.ts"
   },
   "dependencies": {
     "ts-dedent": "^2.0.0"
@@ -75,23 +67,12 @@
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "storybook": "^9.2.0-alpha.2"
+    "storybook": "^10.0.0-beta.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "bundler": {
-    "exportEntries": [
-      "./src/index.ts"
-    ],
-    "managerEntries": [
-      "./src/manager.tsx"
-    ],
-    "previewEntries": [
-      "./src/preview.tsx"
-    ]
-  },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae16",
   "storybook": {
     "displayName": "Themes",
     "unsupportedFrameworks": [

package/preview.js

@@ -1 +1 @@
-export * from './dist/preview';
+export * from './dist/preview.js';

package/dist/index.mjs

@@ -1,11 +0,0 @@
-import { definePreviewAddon } from 'storybook/internal/csf';
-import { useParameter, addons, useEffect, useMemo } from 'storybook/preview-api';
-import { deprecate } from 'storybook/internal/client-logger';
-import dedent from 'ts-dedent';
-import React from 'react';
-
-var __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};var preview_exports={};__export(preview_exports,{initialGlobals:()=>initialGlobals});var PARAM_KEY="themes",ADDON_ID=`storybook/${PARAM_KEY}`,GLOBAL_KEY="theme";var DEFAULT_THEME_PARAMETERS={},THEMING_EVENTS={REGISTER_THEMES:`${ADDON_ID}/REGISTER_THEMES`};var initialGlobals={[GLOBAL_KEY]:""};var helpers_exports={};__export(helpers_exports,{initializeThemeState:()=>initializeThemeState,pluckThemeFromContext:()=>pluckThemeFromContext,useThemeParameters:()=>useThemeParameters});function pluckThemeFromContext({globals}){return globals[GLOBAL_KEY]||""}function useThemeParameters(context){return deprecate(dedent`The useThemeParameters function is deprecated. Please access parameters via the context directly instead e.g.
-    - const { themeOverride } = context.parameters.themes ?? {};
-    `),context?context.parameters[PARAM_KEY]??DEFAULT_THEME_PARAMETERS:useParameter(PARAM_KEY,DEFAULT_THEME_PARAMETERS)}function initializeThemeState(themeNames,defaultTheme){addons.getChannel().emit(THEMING_EVENTS.REGISTER_THEMES,{defaultTheme,themes:themeNames});}var DEFAULT_ELEMENT_SELECTOR="html",classStringToArray=classString=>classString.split(" ").filter(Boolean),withThemeByClassName=({themes,defaultTheme,parentSelector=DEFAULT_ELEMENT_SELECTOR})=>(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()});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),(storyFn,context)=>{let{themeOverride}=context.parameters[PARAM_KEY]??{},selected=pluckThemeFromContext(context);return useEffect(()=>{let parentElement=document.querySelector(parentSelector),themeKey=themeOverride||selected||defaultTheme;parentElement&&parentElement.setAttribute(attributeName,themes[themeKey]);},[themeOverride,selected]),storyFn()});var pluckThemeFromKeyPairTuple=([_,themeConfig])=>themeConfig,withThemeFromJSXProvider=({Provider,GlobalStyles,defaultTheme,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]);return Provider?React.createElement(Provider,{theme},GlobalStyles&&React.createElement(GlobalStyles,null),storyFn()):React.createElement(React.Fragment,null,GlobalStyles&&React.createElement(GlobalStyles,null),storyFn())}};var index_default=()=>definePreviewAddon(preview_exports);
-
-export { helpers_exports as DecoratorHelpers, index_default as default, withThemeByClassName, withThemeByDataAttribute, withThemeFromJSXProvider };

package/dist/preview.mjs

@@ -1,3 +0,0 @@
-var GLOBAL_KEY="theme";var initialGlobals={[GLOBAL_KEY]:""};
-
-export { initialGlobals };

package/postinstall.js

@@ -1,25 +0,0 @@
-const { spawn } = require('child_process');
-
-const PACKAGE_MANAGER_TO_COMMAND = {
-  npm: ['npx'],
-  pnpm: ['pnpm', 'dlx'],
-  yarn1: ['npx'],
-  yarn2: ['yarn', 'dlx'],
-  bun: ['bunx'],
-};
-
-const selectPackageManagerCommand = (packageManager) => PACKAGE_MANAGER_TO_COMMAND[packageManager];
-
-const spawnPackageManagerScript = async (packageManager, args) => {
-  const [command, ...baseArgs] = selectPackageManagerCommand(packageManager);
-
-  await spawn(command, [...baseArgs, ...args], {
-    stdio: 'inherit',
-    cwd: process.cwd(),
-    shell: true,
-  });
-};
-
-module.exports = async function postinstall({ packageManager = 'npm' }) {
-  await spawnPackageManagerScript(packageManager, ['@storybook/auto-config', 'themes']);
-};