{"version":3,"sources":["../src/constants.ts","../src/components/DirectionArrowsIcon.tsx","../src/components/Tool.tsx","../src/manager.ts"],"names":["ADDON_ID","TOOL_ID","DirectionArrowsIcon","direction","theme","useTheme","React","Tool","globals","setGlobals","useGlobals","storyGlobals","useStorybookApi","title","IconButton","newDirection","addons","types"],"mappings":"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","file":"manager.mjs","sourcesContent":["export const ADDON_ID = \"storybook/rtl\";\nexport const TOOL_ID = `${ADDON_ID}/rtl-tool`;\n\nexport type RTLDirection = \"rtl\" | \"ltr\";\n","import { useTheme } from \"storybook/theming\";\nimport React from \"react\";\nimport { RTLDirection } from \"src/constants\";\n\n// There are a lot of specific translate and scale values in this file that were picked based on trial/error\n// based on what looks the most balanced.\n/**\n * An icon with two arrows pointing in different directions.\n * Depending on the direction parameter, one of the arrows will be emphasized with color and scale.\n */\nexport const DirectionArrowsIcon = ({\n  direction,\n}: {\n  direction: RTLDirection;\n}) => {\n  const theme = useTheme();\n  const ariaLabel =\n    direction === \"ltr\"\n      ? \"Switch direction to right-to-left.\"\n      : \"Switch Direction to left-to-right\";\n  return (\n    <div\n      aria-label={ariaLabel}\n      style={{\n        width: \"20px\",\n        height: \"20px\",\n        position: \"relative\",\n      }}\n    >\n      <div\n        style={{\n          marginBottom: \"-45%\",\n          top: 0,\n          display: \"flex\",\n          justifyContent: \"center\",\n          backgroundColor: \"transparent\",\n          width: \"100%\",\n          transition: \"transform 0.3s\",\n          transform:\n            direction === \"rtl\" ? \"scale(0.5) translate(0, -35%)\" : \"scale(1)\",\n        }}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 512 512\"\n          style={{\n            transition: \"fill 0.3s\",\n\n            fill:\n              direction === \"ltr\" ? theme.barSelectedColor : theme.barTextColor,\n            height: \"100%\",\n            width: \"80%\",\n          }}\n        >\n          <path d=\"M502.6 278.6l-128 128c-12.51 12.51-32.76 12.49-45.25 0c-12.5-12.5-12.5-32.75 0-45.25L402.8 288H32C14.31 288 0 273.7 0 255.1S14.31 224 32 224h370.8l-73.38-73.38c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l128 128C515.1 245.9 515.1 266.1 502.6 278.6z\" />\n        </svg>\n      </div>\n      <div\n        style={{\n          display: \"flex\",\n          justifyContent: \"center\",\n          backgroundColor: \"transparent\",\n          width: \"100%\",\n          scale: direction === \"rtl\" ? 1 : 0.5,\n          transition: \"transform 0.3s\",\n          transform:\n            direction === \"ltr\"\n              ? \"scale(0.5) translate(0, -1px)\"\n              : \"scale(1) translate(0, -20%)\",\n        }}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 512 512\"\n          style={{\n            transition: \"fill 0.3s\",\n\n            fill:\n              direction === \"rtl\" ? theme.barSelectedColor : theme.barTextColor,\n            transform: \"rotate(180deg)\",\n            height: \"100%\",\n            width: \"80%\",\n          }}\n        >\n          <path d=\"M502.6 278.6l-128 128c-12.51 12.51-32.76 12.49-45.25 0c-12.5-12.5-12.5-32.75 0-45.25L402.8 288H32C14.31 288 0 273.7 0 255.1S14.31 224 32 224h370.8l-73.38-73.38c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l128 128C515.1 245.9 515.1 266.1 502.6 278.6z\" />\n        </svg>\n      </div>\n    </div>\n  );\n};\n","import React from \"react\";\nimport { useGlobals, useStorybookApi } from \"storybook/manager-api\";\nimport { IconButton } from \"storybook/internal/components\";\nimport { DirectionArrowsIcon } from \"./DirectionArrowsIcon\";\n\nexport const Tool = () => {\n  const [globals, setGlobals] = useGlobals();\n  const storyGlobals = useStorybookApi().getStoryGlobals();\n  const title =\n    globals.addonRtl === \"ltr\"\n      ? \"Switch direction to right-to-left.\"\n      : \"Switch direction to left-to-right\";\n\n  return (\n    <IconButton\n      title={title}\n      // If the current story has the global set, it can not be toggled in the UI\n      disabled={storyGlobals.addonRtl !== undefined}\n      onClick={() => {\n        const newDirection = globals.addonRtl === \"rtl\" ? \"ltr\" : \"rtl\";\n        setGlobals({ addonRtl: newDirection });\n      }}\n    >\n      <DirectionArrowsIcon direction={globals.addonRtl} />\n    </IconButton>\n  );\n};\n","import { addons, types } from \"storybook/manager-api\";\nimport { ADDON_ID, TOOL_ID } from \"./constants\";\n\nimport { Tool } from \"./components/Tool\";\n\naddons.register(ADDON_ID, () => {\n  addons.add(TOOL_ID, {\n    id: \"rtl-tool\",\n    type: types.TOOL,\n    title: \"RTL\",\n    render: Tool,\n  });\n});\n"]}