storybook-addon-theme-provider/dist/manager.js

Storybook addon to manage global themes provided by Styled components, Emotion or any other solution based on React component. Compatible with Storybook versions 7 and 8

import { addons as n, types as h } from "@storybook/manager-api";
import { jsx as t } from "react/jsx-runtime";
import { memo as m, useCallback as p } from "react";
import { ListItem as g, TooltipMessage as u, WithTooltipPure as T, IconButton as f } from "@storybook/components";
import { Palette as y } from "@phosphor-icons/react";
import { a as l } from "./useGlobalThemes-CslCgoSs.js";
import { styled as k } from "@storybook/theming";
const c = "storybook/theme-provider", a = `${c}/tool`, O = "linear-gradient(-45deg, transparent, transparent 45%, pink 45%, pink 55%, transparent 55%, transparent 100%)", b = ({ colorName: e = O }) => /* @__PURE__ */ t(C, { style: { background: e } }), C = k.div({
  width: "16px",
  height: "16px",
  borderRadius: "8px",
  border: "1px solid lightgray"
}), v = ({ themes: e, onSelect: i }) => {
  const { selectedTheme: r } = l();
  return !!e && Array.isArray(e) && !!r ? /* @__PURE__ */ t("div", { children: e.map(({ name: o, color: d }) => /* @__PURE__ */ t(
    g,
    {
      active: r === o,
      onClick: () => {
        r !== o && i(o);
      },
      title: o,
      right: /* @__PURE__ */ t(b, { colorName: d })
    },
    o
  )) }) : /* @__PURE__ */ t(
    u,
    {
      title: "Missing theme config",
      desc: "Add themes list and selected theme to .storybook/preview.js"
    }
  );
}, S = m(function() {
  const { themes: i, setSelectedTheme: r } = l(), s = p(
    (o) => {
      r(o);
    },
    [i]
  );
  return /* @__PURE__ */ t(
    T,
    {
      trigger: "click",
      closeOnTriggerHidden: !0,
      closeOnOutsideClick: !0,
      tooltip: /* @__PURE__ */ t(v, { onSelect: s, themes: i }),
      children: /* @__PURE__ */ t(f, { title: "Switch theme", children: /* @__PURE__ */ t(y, { size: 16, color: "#73828c", weight: "regular" }) }, a)
    }
  );
});
n.register(c, () => {
  n.add(a, {
    type: h.TOOL,
    title: "Theme provider",
    match: ({ viewMode: e }) => !!(e && e.match(/^(story|docs)$/)),
    render: S
  });
});
//# sourceMappingURL=manager.js.map