Added support for media queries

.gitignore

@@ -1,5 +1,5 @@
-dist/
 node_modules/
 storybook-static/
 build-storybook.log
 .env
+.idea/

FORK-README.md

@@ -0,0 +1,4 @@
+Fork was added just to add support for media queries. Unfortunately the original project does not support them. 
+We'll try to merge the change into the main project and get rid of the fork then. 
+
+https://github.com/chromaui/storybook-addon-pseudo-states/pull/75 - Pr into the main library 

dist/chunk-A7FPDXSC.mjs

@@ -0,0 +1,21 @@
+// src/constants.ts
+var ADDON_ID = "storybook/pseudo-states";
+var TOOL_ID = `${ADDON_ID}/tool`;
+var EXCLUDED_PSEUDO_ELEMENTS = ["::-webkit-scrollbar-thumb"];
+var PSEUDO_STATES = {
+  hover: "hover",
+  active: "active",
+  focusVisible: "focus-visible",
+  focusWithin: "focus-within",
+  focus: "focus",
+  visited: "visited",
+  link: "link",
+  target: "target"
+};
+
+export {
+  ADDON_ID,
+  TOOL_ID,
+  EXCLUDED_PSEUDO_ELEMENTS,
+  PSEUDO_STATES
+};

dist/index.d.ts

@@ -0,0 +1,3 @@
+declare const _default: {};
+
+export { _default as default };

dist/index.js

@@ -0,0 +1,31 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}
+var src_default = {};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

dist/index.mjs

@@ -0,0 +1,8 @@
+// src/index.ts
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}
+var src_default = {};
+export {
+  src_default as default
+};

dist/manager.d.ts

@@ -0,0 +1 @@
+

dist/manager.js

@@ -0,0 +1,100 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/manager.ts
+var import_manager_api2 = require("@storybook/manager-api");
+
+// src/constants.ts
+var ADDON_ID = "storybook/pseudo-states";
+var TOOL_ID = `${ADDON_ID}/tool`;
+var PSEUDO_STATES = {
+  hover: "hover",
+  active: "active",
+  focusVisible: "focus-visible",
+  focusWithin: "focus-within",
+  focus: "focus",
+  visited: "visited",
+  link: "link",
+  target: "target"
+};
+
+// src/manager/PseudoStateTool.tsx
+var import_react = __toESM(require("react"));
+var import_components = require("@storybook/components");
+var import_manager_api = require("@storybook/manager-api");
+var import_theming = require("@storybook/theming");
+var LinkTitle = import_theming.styled.span(({ active }) => ({
+  color: active ? import_theming.color.secondary : "inherit"
+}));
+var LinkIcon = (0, import_theming.styled)(import_components.Icons)(({ active }) => ({
+  opacity: active ? 1 : 0,
+  path: { fill: active ? import_theming.color.secondary : "inherit" }
+}));
+var options = Object.keys(PSEUDO_STATES).sort();
+var PseudoStateTool = () => {
+  const [{ pseudo }, updateGlobals] = (0, import_manager_api.useGlobals)();
+  const isActive = (0, import_react.useCallback)((option) => {
+    if (!pseudo)
+      return false;
+    return pseudo[option] === true;
+  }, [pseudo]);
+  const toggleOption = (0, import_react.useCallback)(
+    (option) => () => updateGlobals({ pseudo: { ...pseudo, [option]: !isActive(option) } }),
+    [pseudo]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.WithTooltip,
+    {
+      placement: "top",
+      trigger: "click",
+      tooltip: () => /* @__PURE__ */ import_react.default.createElement(
+        import_components.TooltipLinkList,
+        {
+          links: options.map((option) => ({
+            id: option,
+            title: /* @__PURE__ */ import_react.default.createElement(LinkTitle, { active: isActive(option) }, ":", PSEUDO_STATES[option]),
+            right: /* @__PURE__ */ import_react.default.createElement(LinkIcon, { icon: "check", width: 12, height: 12, active: isActive(option) }),
+            onClick: toggleOption(option),
+            active: isActive(option)
+          }))
+        }
+      )
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.IconButton,
+      {
+        key: "pseudo-state",
+        title: "Select CSS pseudo states",
+        active: options.some(isActive)
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_components.Icons, { icon: "button" })
+    )
+  );
+};
+
+// src/manager.ts
+import_manager_api2.addons.register(ADDON_ID, () => {
+  import_manager_api2.addons.add(TOOL_ID, {
+    type: import_manager_api2.types.TOOL,
+    title: "CSS pseudo states",
+    match: ({ viewMode }) => viewMode === "story",
+    render: PseudoStateTool
+  });
+});

dist/manager.mjs

@@ -0,0 +1,72 @@
+import {
+  ADDON_ID,
+  PSEUDO_STATES,
+  TOOL_ID
+} from "./chunk-A7FPDXSC.mjs";
+
+// src/manager.ts
+import { addons, types } from "@storybook/manager-api";
+
+// src/manager/PseudoStateTool.tsx
+import React, { useCallback } from "react";
+import { Icons, IconButton, WithTooltip, TooltipLinkList } from "@storybook/components";
+import { useGlobals } from "@storybook/manager-api";
+import { styled, color } from "@storybook/theming";
+var LinkTitle = styled.span(({ active }) => ({
+  color: active ? color.secondary : "inherit"
+}));
+var LinkIcon = styled(Icons)(({ active }) => ({
+  opacity: active ? 1 : 0,
+  path: { fill: active ? color.secondary : "inherit" }
+}));
+var options = Object.keys(PSEUDO_STATES).sort();
+var PseudoStateTool = () => {
+  const [{ pseudo }, updateGlobals] = useGlobals();
+  const isActive = useCallback((option) => {
+    if (!pseudo)
+      return false;
+    return pseudo[option] === true;
+  }, [pseudo]);
+  const toggleOption = useCallback(
+    (option) => () => updateGlobals({ pseudo: { ...pseudo, [option]: !isActive(option) } }),
+    [pseudo]
+  );
+  return /* @__PURE__ */ React.createElement(
+    WithTooltip,
+    {
+      placement: "top",
+      trigger: "click",
+      tooltip: () => /* @__PURE__ */ React.createElement(
+        TooltipLinkList,
+        {
+          links: options.map((option) => ({
+            id: option,
+            title: /* @__PURE__ */ React.createElement(LinkTitle, { active: isActive(option) }, ":", PSEUDO_STATES[option]),
+            right: /* @__PURE__ */ React.createElement(LinkIcon, { icon: "check", width: 12, height: 12, active: isActive(option) }),
+            onClick: toggleOption(option),
+            active: isActive(option)
+          }))
+        }
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        key: "pseudo-state",
+        title: "Select CSS pseudo states",
+        active: options.some(isActive)
+      },
+      /* @__PURE__ */ React.createElement(Icons, { icon: "button" })
+    )
+  );
+};
+
+// src/manager.ts
+addons.register(ADDON_ID, () => {
+  addons.add(TOOL_ID, {
+    type: types.TOOL,
+    title: "CSS pseudo states",
+    match: ({ viewMode }) => viewMode === "story",
+    render: PseudoStateTool
+  });
+});

dist/preview.d.ts

@@ -0,0 +1,5 @@
+import * as _storybook_types from '@storybook/types';
+
+declare const decorators: _storybook_types.DecoratorFunction<_storybook_types.Renderer, _storybook_types.Args>[];
+
+export { decorators };