@saas-ui/storybook-addon 7.0.0-next.8 → 7.0.0-rc.0

package/dist/ChakraProviderDecorator.cjs

@@ -0,0 +1,2 @@
+'use strict';var c=require('react'),react=require('@chakra-ui/react'),chakraPreset=require('@saas-ui/chakra-preset'),previewApi=require('storybook/preview-api'),jsxRuntime=require('react/jsx-runtime');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var c__namespace=/*#__PURE__*/_interopNamespace(c);var m="@saas-ui/storybook-addon2",i=`${m}/direction-tool`,n={TOGGLE_COLOR_MODE:`${m}/toggleColorMode`,TOGGLE_DIRECTION:`${m}/toggleDirection`,SET_THEME:`${m}/setTheme`};function l(){return c.useEffect(()=>{let o=previewApi.addons.getChannel(),t=e=>{let r=e==="dark";document.documentElement.classList.toggle("dark",r),document.documentElement.style.colorScheme=r?"dark":"light";};return o.on(n.TOGGLE_COLOR_MODE,t),()=>{o.removeListener(n.TOGGLE_COLOR_MODE,t);}},[]),null}var E=(o="ltr")=>{let[t,e]=c.useState(o.toLowerCase());return c.useEffect(()=>{document.documentElement.dir=t;},[t]),c.useEffect(()=>{let r=previewApi.addons.getChannel(),s=a=>e(a);return r.on(n.TOGGLE_DIRECTION,s),()=>{r.removeListener(n.TOGGLE_DIRECTION,s);}},[e]),t};function f(o){return typeof o=="object"&&o!==null&&"css"in o&&"token"in o}function I(){let[o,t]=c__namespace.useState(()=>typeof window>"u"?"1":window.localStorage.getItem("storybook.theme")??"1");return c__namespace.useEffect(()=>{let e=previewApi.addons.getChannel(),r=s=>{window.localStorage.setItem("storybook.theme",s),t(s);};return e.on(n.SET_THEME,r),()=>e.removeListener(n.SET_THEME,r)},[]),o}var B=previewApi.makeDecorator({name:"ChakraProviderDecorator",parameterName:"chakra",skipIfNoParametersOrOptions:false,wrapper:(o,t)=>{let{parameters:{saasui:e={}},globals:{[i]:r}}=t;I(),E(r==="rtl"?"rtl":"ltr");let s=typeof e.system=="function"?e.system(t):e.system,a=typeof e.theme=="function"?e.theme(t):e.theme,u=f(s)?s:f(a)?a:chakraPreset.defaultSystem,O=o(t);return jsxRuntime.jsxs(react.ChakraProvider,{value:u,children:[jsxRuntime.jsx(l,{}),O]})}});exports.ChakraProviderDecorator=B;//# sourceMappingURL=ChakraProviderDecorator.cjs.map
+//# sourceMappingURL=ChakraProviderDecorator.cjs.map

package/dist/ChakraProviderDecorator.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts","../src/color-mode/ColorModeSync.tsx","../src/direction/useDirection.tsx","../src/ChakraProviderDecorator.tsx"],"names":["ADDON_ID","DIRECTION_TOOL_ID","EVENTS","ColorModeSync","useEffect","channel","addons","colorModeToolCallback","value","dark","useDirection","initialDirection","direction","setDirection","useState","callback","isSystemContext","useThemeSync","themeId","setThemeId","c","setTheme","ChakraProviderDecorator","makeDecorator","getStory","context","saasuiParams","globalDirection","configuredSystem","legacyTheme","system","defaultSystem","story","jsxs","ChakraProvider","jsx"],"mappings":"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","file":"ChakraProviderDecorator.cjs","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import { useEffect } from 'react'\n\nimport { addons } from 'storybook/preview-api'\n\nimport { EVENTS } from '../constants'\n\n/**\n * Render <ColorModeSync /> to sync the storybook color mode with Chakra UI\n */\nexport function ColorModeSync() {\n  useEffect(() => {\n    const channel = addons.getChannel()\n\n    const colorModeToolCallback = (value: string) => {\n      const dark = value === 'dark'\n      document.documentElement.classList.toggle('dark', dark)\n      document.documentElement.style.colorScheme = dark ? 'dark' : 'light'\n    }\n    channel.on(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback)\n\n    return () => {\n      channel.removeListener(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback)\n    }\n  }, [])\n\n  return null\n}\n","import { useEffect, useState } from 'react'\nimport { addons } from 'storybook/preview-api'\nimport { EVENTS } from '../constants'\n\n/**\n * Sync the layout direction to the html element\n */\nexport const useDirection = (initialDirection: 'ltr' | 'rtl' = 'ltr') => {\n  const [direction, setDirection] = useState(initialDirection.toLowerCase())\n\n  useEffect(() => {\n    document.documentElement.dir = direction\n  }, [direction])\n\n  useEffect(() => {\n    const channel = addons.getChannel()\n    const callback = (value: string) => setDirection(value)\n    channel.on(EVENTS.TOGGLE_DIRECTION, callback)\n    return () => {\n      channel.removeListener(EVENTS.TOGGLE_DIRECTION, callback)\n    }\n  }, [setDirection])\n\n  return direction\n}\n","import * as React from 'react'\n\nimport { ChakraProvider } from '@chakra-ui/react'\nimport { defaultSystem } from '@saas-ui/chakra-preset'\nimport { addons, makeDecorator } from 'storybook/preview-api'\n\nimport { ColorModeSync } from './color-mode/ColorModeSync'\nimport { DIRECTION_TOOL_ID, EVENTS } from './constants'\nimport { useDirection } from './direction/useDirection'\n\nfunction isSystemContext(value: unknown): value is typeof defaultSystem {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    'css' in value &&\n    'token' in value\n  )\n}\n\nfunction useThemeSync() {\n  const [themeId, setThemeId] = React.useState(() => {\n    if (typeof window === 'undefined') return '1'\n    return window.localStorage.getItem('storybook.theme') ?? '1'\n  })\n\n  React.useEffect(() => {\n    const channel = addons.getChannel()\n    const setTheme = (value: string) => {\n      window.localStorage.setItem('storybook.theme', value)\n      setThemeId(value)\n    }\n    channel.on(EVENTS.SET_THEME, setTheme)\n    return () => channel.removeListener(EVENTS.SET_THEME, setTheme)\n  }, [])\n\n  return themeId\n}\n\n/**\n * Chakra v3 decorator backed by the published Saas UI preset.\n *\n * `parameters.saasui.system` is the preferred custom-system override. For\n * compatibility, `parameters.saasui.theme` is also accepted when it is a\n * Chakra v3 SystemContext or a function returning one.\n */\nexport const ChakraProviderDecorator = makeDecorator({\n  name: 'ChakraProviderDecorator',\n  parameterName: 'chakra',\n  skipIfNoParametersOrOptions: false,\n  wrapper: (getStory, context) => {\n    const {\n      parameters: { saasui: saasuiParams = {} },\n      globals: { [DIRECTION_TOOL_ID]: globalDirection },\n    } = context\n\n    useThemeSync()\n    useDirection(globalDirection === 'rtl' ? 'rtl' : 'ltr')\n\n    const configuredSystem =\n      typeof saasuiParams.system === 'function'\n        ? saasuiParams.system(context)\n        : saasuiParams.system\n    const legacyTheme =\n      typeof saasuiParams.theme === 'function'\n        ? saasuiParams.theme(context)\n        : saasuiParams.theme\n    const system = isSystemContext(configuredSystem)\n      ? configuredSystem\n      : isSystemContext(legacyTheme)\n        ? legacyTheme\n        : defaultSystem\n    const story = getStory(context) as React.ReactNode\n\n    return (\n      <ChakraProvider value={system}>\n        <ColorModeSync />\n        {story}\n      </ChakraProvider>\n    )\n  },\n})\n"]}

package/dist/ChakraProviderDecorator.d.cts

@@ -0,0 +1,10 @@
+/**
+ * Chakra v3 decorator backed by the published Saas UI preset.
+ *
+ * `parameters.saasui.system` is the preferred custom-system override. For
+ * compatibility, `parameters.saasui.theme` is also accepted when it is a
+ * Chakra v3 SystemContext or a function returning one.
+ */
+declare const ChakraProviderDecorator: (...args: any) => any;
+
+export { ChakraProviderDecorator };

package/dist/ChakraProviderDecorator.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Chakra v3 decorator backed by the published Saas UI preset.
+ *
+ * `parameters.saasui.system` is the preferred custom-system override. For
+ * compatibility, `parameters.saasui.theme` is also accepted when it is a
+ * Chakra v3 SystemContext or a function returning one.
+ */
+declare const ChakraProviderDecorator: (...args: any) => any;
+
+export { ChakraProviderDecorator };

package/dist/ChakraProviderDecorator.js

@@ -0,0 +1,2 @@
+import*as c from'react';import {useState,useEffect}from'react';import {ChakraProvider}from'@chakra-ui/react';import {defaultSystem}from'@saas-ui/chakra-preset';import {makeDecorator,addons}from'storybook/preview-api';import {jsxs,jsx}from'react/jsx-runtime';var m="@saas-ui/storybook-addon2",i=`${m}/direction-tool`,n={TOGGLE_COLOR_MODE:`${m}/toggleColorMode`,TOGGLE_DIRECTION:`${m}/toggleDirection`,SET_THEME:`${m}/setTheme`};function l(){return useEffect(()=>{let o=addons.getChannel(),t=e=>{let r=e==="dark";document.documentElement.classList.toggle("dark",r),document.documentElement.style.colorScheme=r?"dark":"light";};return o.on(n.TOGGLE_COLOR_MODE,t),()=>{o.removeListener(n.TOGGLE_COLOR_MODE,t);}},[]),null}var E=(o="ltr")=>{let[t,e]=useState(o.toLowerCase());return useEffect(()=>{document.documentElement.dir=t;},[t]),useEffect(()=>{let r=addons.getChannel(),s=a=>e(a);return r.on(n.TOGGLE_DIRECTION,s),()=>{r.removeListener(n.TOGGLE_DIRECTION,s);}},[e]),t};function f(o){return typeof o=="object"&&o!==null&&"css"in o&&"token"in o}function I(){let[o,t]=c.useState(()=>typeof window>"u"?"1":window.localStorage.getItem("storybook.theme")??"1");return c.useEffect(()=>{let e=addons.getChannel(),r=s=>{window.localStorage.setItem("storybook.theme",s),t(s);};return e.on(n.SET_THEME,r),()=>e.removeListener(n.SET_THEME,r)},[]),o}var B=makeDecorator({name:"ChakraProviderDecorator",parameterName:"chakra",skipIfNoParametersOrOptions:false,wrapper:(o,t)=>{let{parameters:{saasui:e={}},globals:{[i]:r}}=t;I(),E(r==="rtl"?"rtl":"ltr");let s=typeof e.system=="function"?e.system(t):e.system,a=typeof e.theme=="function"?e.theme(t):e.theme,u=f(s)?s:f(a)?a:defaultSystem,O=o(t);return jsxs(ChakraProvider,{value:u,children:[jsx(l,{}),O]})}});export{B as ChakraProviderDecorator};//# sourceMappingURL=ChakraProviderDecorator.js.map
+//# sourceMappingURL=ChakraProviderDecorator.js.map

package/dist/ChakraProviderDecorator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts","../src/color-mode/ColorModeSync.tsx","../src/direction/useDirection.tsx","../src/ChakraProviderDecorator.tsx"],"names":["ADDON_ID","DIRECTION_TOOL_ID","EVENTS","ColorModeSync","useEffect","channel","addons","colorModeToolCallback","value","dark","useDirection","initialDirection","direction","setDirection","useState","callback","isSystemContext","useThemeSync","themeId","setThemeId","setTheme","ChakraProviderDecorator","makeDecorator","getStory","context","saasuiParams","globalDirection","configuredSystem","legacyTheme","system","defaultSystem","story","jsxs","ChakraProvider","jsx"],"mappings":"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","file":"ChakraProviderDecorator.js","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import { useEffect } from 'react'\n\nimport { addons } from 'storybook/preview-api'\n\nimport { EVENTS } from '../constants'\n\n/**\n * Render <ColorModeSync /> to sync the storybook color mode with Chakra UI\n */\nexport function ColorModeSync() {\n  useEffect(() => {\n    const channel = addons.getChannel()\n\n    const colorModeToolCallback = (value: string) => {\n      const dark = value === 'dark'\n      document.documentElement.classList.toggle('dark', dark)\n      document.documentElement.style.colorScheme = dark ? 'dark' : 'light'\n    }\n    channel.on(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback)\n\n    return () => {\n      channel.removeListener(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback)\n    }\n  }, [])\n\n  return null\n}\n","import { useEffect, useState } from 'react'\nimport { addons } from 'storybook/preview-api'\nimport { EVENTS } from '../constants'\n\n/**\n * Sync the layout direction to the html element\n */\nexport const useDirection = (initialDirection: 'ltr' | 'rtl' = 'ltr') => {\n  const [direction, setDirection] = useState(initialDirection.toLowerCase())\n\n  useEffect(() => {\n    document.documentElement.dir = direction\n  }, [direction])\n\n  useEffect(() => {\n    const channel = addons.getChannel()\n    const callback = (value: string) => setDirection(value)\n    channel.on(EVENTS.TOGGLE_DIRECTION, callback)\n    return () => {\n      channel.removeListener(EVENTS.TOGGLE_DIRECTION, callback)\n    }\n  }, [setDirection])\n\n  return direction\n}\n","import * as React from 'react'\n\nimport { ChakraProvider } from '@chakra-ui/react'\nimport { defaultSystem } from '@saas-ui/chakra-preset'\nimport { addons, makeDecorator } from 'storybook/preview-api'\n\nimport { ColorModeSync } from './color-mode/ColorModeSync'\nimport { DIRECTION_TOOL_ID, EVENTS } from './constants'\nimport { useDirection } from './direction/useDirection'\n\nfunction isSystemContext(value: unknown): value is typeof defaultSystem {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    'css' in value &&\n    'token' in value\n  )\n}\n\nfunction useThemeSync() {\n  const [themeId, setThemeId] = React.useState(() => {\n    if (typeof window === 'undefined') return '1'\n    return window.localStorage.getItem('storybook.theme') ?? '1'\n  })\n\n  React.useEffect(() => {\n    const channel = addons.getChannel()\n    const setTheme = (value: string) => {\n      window.localStorage.setItem('storybook.theme', value)\n      setThemeId(value)\n    }\n    channel.on(EVENTS.SET_THEME, setTheme)\n    return () => channel.removeListener(EVENTS.SET_THEME, setTheme)\n  }, [])\n\n  return themeId\n}\n\n/**\n * Chakra v3 decorator backed by the published Saas UI preset.\n *\n * `parameters.saasui.system` is the preferred custom-system override. For\n * compatibility, `parameters.saasui.theme` is also accepted when it is a\n * Chakra v3 SystemContext or a function returning one.\n */\nexport const ChakraProviderDecorator = makeDecorator({\n  name: 'ChakraProviderDecorator',\n  parameterName: 'chakra',\n  skipIfNoParametersOrOptions: false,\n  wrapper: (getStory, context) => {\n    const {\n      parameters: { saasui: saasuiParams = {} },\n      globals: { [DIRECTION_TOOL_ID]: globalDirection },\n    } = context\n\n    useThemeSync()\n    useDirection(globalDirection === 'rtl' ? 'rtl' : 'ltr')\n\n    const configuredSystem =\n      typeof saasuiParams.system === 'function'\n        ? saasuiParams.system(context)\n        : saasuiParams.system\n    const legacyTheme =\n      typeof saasuiParams.theme === 'function'\n        ? saasuiParams.theme(context)\n        : saasuiParams.theme\n    const system = isSystemContext(configuredSystem)\n      ? configuredSystem\n      : isSystemContext(legacyTheme)\n        ? legacyTheme\n        : defaultSystem\n    const story = getStory(context) as React.ReactNode\n\n    return (\n      <ChakraProvider value={system}>\n        <ColorModeSync />\n        {story}\n      </ChakraProvider>\n    )\n  },\n})\n"]}

package/dist/arg-types.cjs

@@ -0,0 +1,2 @@
+'use strict';function i(t){let o=Object.keys(t||{});return ["50","100","200","300","400","500","600","700","800","900"].every(e=>o.includes(e))}function l(t,o){let e=t.components[o];if(!e)return;let n={},s=Object.keys(e.variants||{});s.length&&(n.variant={type:{name:"enum",value:s},defaultValue:e.defaultProps?.variant});let a=Object.keys(e.sizes||{});if(a.length&&(n.size={type:{name:"enum",value:a},defaultValue:e.defaultProps?.size}),e.defaultProps?.colorScheme){let c=Object.entries(t.colors).filter(([,r])=>i(r)).map(([r])=>r);c.length&&(n.colorScheme={type:{name:"enum",value:c},defaultValue:e.defaultProps?.colorScheme});}return n}exports.getThemingArgTypes=l;//# sourceMappingURL=arg-types.cjs.map
+//# sourceMappingURL=arg-types.cjs.map

package/dist/arg-types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/arg-types.ts"],"names":["validateColorScheme","value","valueKeys","term","getThemingArgTypes","theme","componentName","component","argTypes","variantOptions","sizeOptions","colorSchemes","key"],"mappings":"aAgBA,SAASA,CAAAA,CAAoBC,CAAAA,CAAe,CAC1C,IAAMC,EAAY,MAAA,CAAO,IAAA,CAAKD,CAAAA,EAAS,EAAE,CAAA,CACzC,OAAO,CACL,IAAA,CACA,MACA,KAAA,CACA,KAAA,CACA,KAAA,CACA,KAAA,CACA,KAAA,CACA,KAAA,CACA,KAAA,CACA,KACF,EAAE,KAAA,CAAOE,CAAAA,EAASD,CAAAA,CAAU,QAAA,CAASC,CAAI,CAAC,CAC5C,CAkCO,SAASC,EAMdC,CAAAA,CAAcC,CAAAA,CAA8B,CAC5C,IAAMC,CAAAA,CAAYF,CAAAA,CAAM,UAAA,CAAWC,CAAa,EAChD,GAAI,CAACC,CAAAA,CACH,OAGF,IAAMC,CAAAA,CAAiE,EAAC,CAElEC,CAAAA,CAAiB,OAAO,IAAA,CAAKF,CAAAA,CAAU,QAAA,EAAY,EAAE,CAAA,CACvDE,CAAAA,CAAe,MAAA,GACjBD,CAAAA,CAAS,QAAU,CACjB,IAAA,CAAM,CAAE,IAAA,CAAM,OAAQ,KAAA,CAAOC,CAAe,CAAA,CAC5C,YAAA,CAAcF,EAAU,YAAA,EAAc,OACxC,CAAA,CAAA,CAGF,IAAMG,CAAAA,CAAc,MAAA,CAAO,IAAA,CAAKH,CAAAA,CAAU,OAAS,EAAE,CAAA,CAQrD,GAPIG,EAAY,MAAA,GACdF,CAAAA,CAAS,IAAA,CAAO,CACd,KAAM,CAAE,IAAA,CAAM,MAAA,CAAQ,KAAA,CAAOE,CAAY,CAAA,CACzC,YAAA,CAAcH,CAAAA,CAAU,cAAc,IACxC,CAAA,CAAA,CAGEA,CAAAA,CAAU,YAAA,EAAe,YAAgB,CAC3C,IAAMI,CAAAA,CAAe,MAAA,CAAO,QAAQN,CAAAA,CAAM,MAAM,CAAA,CAC7C,MAAA,CAAO,CAAC,EAAGJ,CAAK,IAAMD,CAAAA,CAAoBC,CAAK,CAAC,CAAA,CAChD,IAAI,CAAC,CAACW,CAAG,CAAA,GAAMA,CAAG,CAAA,CAEjBD,CAAAA,CAAa,MAAA,GACfH,CAAAA,CAAS,YAAc,CACrB,IAAA,CAAM,CAAE,IAAA,CAAM,OAAQ,KAAA,CAAOG,CAAa,CAAA,CAC1C,YAAA,CAAcJ,EAAU,YAAA,EAAc,WACxC,CAAA,EAEJ,CAEA,OAAOC,CACT","file":"arg-types.cjs","sourcesContent":["import type { ArgTypes } from '@storybook/react'\n\n/**\n * `keyof` alternative which omits non-string keys\n */\ntype KeyOf<T> = [T] extends [never]\n  ? never\n  : T extends object\n    ? Extract<keyof T, string>\n    : never\n\nexport type ThemingArgTypeKey = 'variant' | 'size' | 'colorScheme'\n\n/**\n * Checks if the given color scale object has all required keys: 50, 100, 200...900.\n */\nfunction validateColorScheme(value: object) {\n  const valueKeys = Object.keys(value || {})\n  return [\n    '50',\n    '100',\n    '200',\n    '300',\n    '400',\n    '500',\n    '600',\n    '700',\n    '800',\n    '900',\n  ].every((term) => valueKeys.includes(term))\n}\n\n/**\n * Create Storybook controls based on a Chakra UI theme component.\n *\n * @example\n * export default {\n *   title: \"Components / Forms / Button\",\n *   argTypes: getThemingArgTypes(theme, \"Button\"),\n * }\n *\n * @example full example\n * import { Meta, StoryFn } from \"@storybook/react\"\n * import { getThemingArgTypes } from \"@chakra-ui/storybook-addon\"\n * import { theme } from \"<your-theme>\"\n *\n * export default {\n *   title: \"Components / Forms / Button\",\n *   argTypes: {\n *     ...getThemingArgTypes(theme, \"Button\"),\n *     children: \"string\"\n *   },\n *   args: { children: \"Button\" },\n * } as Meta\n *\n * interface StoryProps extends ThemingProps<\"Button\"> {\n *   children?: React.ReactNode\n * }\n *\n * export const Basic: StoryFn<StoryProps> = (props) => <Button {...props} />\n *\n * @param theme same Chakra UI theme used in .storybook/preview.tsx\n * @param componentName component name to create the ArgTypes for\n */\nexport function getThemingArgTypes<\n  Theme extends {\n    colors: Record<string, any>\n    components: Record<string, any>\n  },\n  ComponentName extends KeyOf<Theme['components']>,\n>(theme: Theme, componentName: ComponentName) {\n  const component = theme.components[componentName]\n  if (!component) {\n    return undefined\n  }\n\n  const argTypes: ArgTypes<Partial<Record<ThemingArgTypeKey, string>>> = {}\n\n  const variantOptions = Object.keys(component.variants || {})\n  if (variantOptions.length) {\n    argTypes.variant = {\n      type: { name: 'enum', value: variantOptions },\n      defaultValue: component.defaultProps?.variant,\n    }\n  }\n\n  const sizeOptions = Object.keys(component.sizes || {})\n  if (sizeOptions.length) {\n    argTypes.size = {\n      type: { name: 'enum', value: sizeOptions },\n      defaultValue: component.defaultProps?.size,\n    }\n  }\n\n  if (component.defaultProps?.['colorScheme']) {\n    const colorSchemes = Object.entries(theme.colors)\n      .filter(([, value]) => validateColorScheme(value))\n      .map(([key]) => key)\n\n    if (colorSchemes.length) {\n      argTypes.colorScheme = {\n        type: { name: 'enum', value: colorSchemes },\n        defaultValue: component.defaultProps?.colorScheme,\n      }\n    }\n  }\n\n  return argTypes\n}\n"]}

package/dist/arg-types.d.cts

@@ -0,0 +1,45 @@
+import { ArgTypes } from 'storybook/internal/types';
+
+/**
+ * `keyof` alternative which omits non-string keys
+ */
+type KeyOf<T> = [T] extends [never] ? never : T extends object ? Extract<keyof T, string> : never;
+type ThemingArgTypeKey = 'variant' | 'size' | 'colorScheme';
+/**
+ * Create Storybook controls based on a Chakra UI theme component.
+ *
+ * @example
+ * export default {
+ *   title: "Components / Forms / Button",
+ *   argTypes: getThemingArgTypes(theme, "Button"),
+ * }
+ *
+ * @example full example
+ * import { Meta, StoryFn } from "@storybook/react"
+ * import { getThemingArgTypes } from "@chakra-ui/storybook-addon"
+ * import { theme } from "<your-theme>"
+ *
+ * export default {
+ *   title: "Components / Forms / Button",
+ *   argTypes: {
+ *     ...getThemingArgTypes(theme, "Button"),
+ *     children: "string"
+ *   },
+ *   args: { children: "Button" },
+ * } as Meta
+ *
+ * interface StoryProps extends ThemingProps<"Button"> {
+ *   children?: React.ReactNode
+ * }
+ *
+ * export const Basic: StoryFn<StoryProps> = (props) => <Button {...props} />
+ *
+ * @param theme same Chakra UI theme used in .storybook/preview.tsx
+ * @param componentName component name to create the ArgTypes for
+ */
+declare function getThemingArgTypes<Theme extends {
+    colors: Record<string, any>;
+    components: Record<string, any>;
+}, ComponentName extends KeyOf<Theme['components']>>(theme: Theme, componentName: ComponentName): ArgTypes<Partial<Record<ThemingArgTypeKey, string>>> | undefined;
+
+export { type ThemingArgTypeKey, getThemingArgTypes };

package/dist/arg-types.d.ts

@@ -0,0 +1,45 @@
+import { ArgTypes } from 'storybook/internal/types';
+
+/**
+ * `keyof` alternative which omits non-string keys
+ */
+type KeyOf<T> = [T] extends [never] ? never : T extends object ? Extract<keyof T, string> : never;
+type ThemingArgTypeKey = 'variant' | 'size' | 'colorScheme';
+/**
+ * Create Storybook controls based on a Chakra UI theme component.
+ *
+ * @example
+ * export default {
+ *   title: "Components / Forms / Button",
+ *   argTypes: getThemingArgTypes(theme, "Button"),
+ * }
+ *
+ * @example full example
+ * import { Meta, StoryFn } from "@storybook/react"
+ * import { getThemingArgTypes } from "@chakra-ui/storybook-addon"
+ * import { theme } from "<your-theme>"
+ *
+ * export default {
+ *   title: "Components / Forms / Button",
+ *   argTypes: {
+ *     ...getThemingArgTypes(theme, "Button"),
+ *     children: "string"
+ *   },
+ *   args: { children: "Button" },
+ * } as Meta
+ *
+ * interface StoryProps extends ThemingProps<"Button"> {
+ *   children?: React.ReactNode
+ * }
+ *
+ * export const Basic: StoryFn<StoryProps> = (props) => <Button {...props} />
+ *
+ * @param theme same Chakra UI theme used in .storybook/preview.tsx
+ * @param componentName component name to create the ArgTypes for
+ */
+declare function getThemingArgTypes<Theme extends {
+    colors: Record<string, any>;
+    components: Record<string, any>;
+}, ComponentName extends KeyOf<Theme['components']>>(theme: Theme, componentName: ComponentName): ArgTypes<Partial<Record<ThemingArgTypeKey, string>>> | undefined;
+
+export { type ThemingArgTypeKey, getThemingArgTypes };

package/dist/arg-types.js

@@ -0,0 +1,2 @@
+function i(t){let o=Object.keys(t||{});return ["50","100","200","300","400","500","600","700","800","900"].every(e=>o.includes(e))}function l(t,o){let e=t.components[o];if(!e)return;let n={},s=Object.keys(e.variants||{});s.length&&(n.variant={type:{name:"enum",value:s},defaultValue:e.defaultProps?.variant});let a=Object.keys(e.sizes||{});if(a.length&&(n.size={type:{name:"enum",value:a},defaultValue:e.defaultProps?.size}),e.defaultProps?.colorScheme){let c=Object.entries(t.colors).filter(([,r])=>i(r)).map(([r])=>r);c.length&&(n.colorScheme={type:{name:"enum",value:c},defaultValue:e.defaultProps?.colorScheme});}return n}export{l as getThemingArgTypes};//# sourceMappingURL=arg-types.js.map
+//# sourceMappingURL=arg-types.js.map

package/dist/arg-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/arg-types.ts"],"names":["validateColorScheme","value","valueKeys","term","getThemingArgTypes","theme","componentName","component","argTypes","variantOptions","sizeOptions","colorSchemes","key"],"mappings":"AAgBA,SAASA,CAAAA,CAAoBC,CAAAA,CAAe,CAC1C,IAAMC,EAAY,MAAA,CAAO,IAAA,CAAKD,CAAAA,EAAS,EAAE,CAAA,CACzC,OAAO,CACL,IAAA,CACA,MACA,KAAA,CACA,KAAA,CACA,KAAA,CACA,KAAA,CACA,KAAA,CACA,KAAA,CACA,KAAA,CACA,KACF,EAAE,KAAA,CAAOE,CAAAA,EAASD,CAAAA,CAAU,QAAA,CAASC,CAAI,CAAC,CAC5C,CAkCO,SAASC,EAMdC,CAAAA,CAAcC,CAAAA,CAA8B,CAC5C,IAAMC,CAAAA,CAAYF,CAAAA,CAAM,UAAA,CAAWC,CAAa,EAChD,GAAI,CAACC,CAAAA,CACH,OAGF,IAAMC,CAAAA,CAAiE,EAAC,CAElEC,CAAAA,CAAiB,OAAO,IAAA,CAAKF,CAAAA,CAAU,QAAA,EAAY,EAAE,CAAA,CACvDE,CAAAA,CAAe,MAAA,GACjBD,CAAAA,CAAS,QAAU,CACjB,IAAA,CAAM,CAAE,IAAA,CAAM,OAAQ,KAAA,CAAOC,CAAe,CAAA,CAC5C,YAAA,CAAcF,EAAU,YAAA,EAAc,OACxC,CAAA,CAAA,CAGF,IAAMG,CAAAA,CAAc,MAAA,CAAO,IAAA,CAAKH,CAAAA,CAAU,OAAS,EAAE,CAAA,CAQrD,GAPIG,EAAY,MAAA,GACdF,CAAAA,CAAS,IAAA,CAAO,CACd,KAAM,CAAE,IAAA,CAAM,MAAA,CAAQ,KAAA,CAAOE,CAAY,CAAA,CACzC,YAAA,CAAcH,CAAAA,CAAU,cAAc,IACxC,CAAA,CAAA,CAGEA,CAAAA,CAAU,YAAA,EAAe,YAAgB,CAC3C,IAAMI,CAAAA,CAAe,MAAA,CAAO,QAAQN,CAAAA,CAAM,MAAM,CAAA,CAC7C,MAAA,CAAO,CAAC,EAAGJ,CAAK,IAAMD,CAAAA,CAAoBC,CAAK,CAAC,CAAA,CAChD,IAAI,CAAC,CAACW,CAAG,CAAA,GAAMA,CAAG,CAAA,CAEjBD,CAAAA,CAAa,MAAA,GACfH,CAAAA,CAAS,YAAc,CACrB,IAAA,CAAM,CAAE,IAAA,CAAM,OAAQ,KAAA,CAAOG,CAAa,CAAA,CAC1C,YAAA,CAAcJ,EAAU,YAAA,EAAc,WACxC,CAAA,EAEJ,CAEA,OAAOC,CACT","file":"arg-types.js","sourcesContent":["import type { ArgTypes } from '@storybook/react'\n\n/**\n * `keyof` alternative which omits non-string keys\n */\ntype KeyOf<T> = [T] extends [never]\n  ? never\n  : T extends object\n    ? Extract<keyof T, string>\n    : never\n\nexport type ThemingArgTypeKey = 'variant' | 'size' | 'colorScheme'\n\n/**\n * Checks if the given color scale object has all required keys: 50, 100, 200...900.\n */\nfunction validateColorScheme(value: object) {\n  const valueKeys = Object.keys(value || {})\n  return [\n    '50',\n    '100',\n    '200',\n    '300',\n    '400',\n    '500',\n    '600',\n    '700',\n    '800',\n    '900',\n  ].every((term) => valueKeys.includes(term))\n}\n\n/**\n * Create Storybook controls based on a Chakra UI theme component.\n *\n * @example\n * export default {\n *   title: \"Components / Forms / Button\",\n *   argTypes: getThemingArgTypes(theme, \"Button\"),\n * }\n *\n * @example full example\n * import { Meta, StoryFn } from \"@storybook/react\"\n * import { getThemingArgTypes } from \"@chakra-ui/storybook-addon\"\n * import { theme } from \"<your-theme>\"\n *\n * export default {\n *   title: \"Components / Forms / Button\",\n *   argTypes: {\n *     ...getThemingArgTypes(theme, \"Button\"),\n *     children: \"string\"\n *   },\n *   args: { children: \"Button\" },\n * } as Meta\n *\n * interface StoryProps extends ThemingProps<\"Button\"> {\n *   children?: React.ReactNode\n * }\n *\n * export const Basic: StoryFn<StoryProps> = (props) => <Button {...props} />\n *\n * @param theme same Chakra UI theme used in .storybook/preview.tsx\n * @param componentName component name to create the ArgTypes for\n */\nexport function getThemingArgTypes<\n  Theme extends {\n    colors: Record<string, any>\n    components: Record<string, any>\n  },\n  ComponentName extends KeyOf<Theme['components']>,\n>(theme: Theme, componentName: ComponentName) {\n  const component = theme.components[componentName]\n  if (!component) {\n    return undefined\n  }\n\n  const argTypes: ArgTypes<Partial<Record<ThemingArgTypeKey, string>>> = {}\n\n  const variantOptions = Object.keys(component.variants || {})\n  if (variantOptions.length) {\n    argTypes.variant = {\n      type: { name: 'enum', value: variantOptions },\n      defaultValue: component.defaultProps?.variant,\n    }\n  }\n\n  const sizeOptions = Object.keys(component.sizes || {})\n  if (sizeOptions.length) {\n    argTypes.size = {\n      type: { name: 'enum', value: sizeOptions },\n      defaultValue: component.defaultProps?.size,\n    }\n  }\n\n  if (component.defaultProps?.['colorScheme']) {\n    const colorSchemes = Object.entries(theme.colors)\n      .filter(([, value]) => validateColorScheme(value))\n      .map(([key]) => key)\n\n    if (colorSchemes.length) {\n      argTypes.colorScheme = {\n        type: { name: 'enum', value: colorSchemes },\n        defaultValue: component.defaultProps?.colorScheme,\n      }\n    }\n  }\n\n  return argTypes\n}\n"]}

package/dist/color-mode/ColorModeSync.cjs

@@ -0,0 +1,2 @@
+'use strict';var react=require('react'),previewApi=require('storybook/preview-api');var o="@saas-ui/storybook-addon2",t={TOGGLE_COLOR_MODE:`${o}/toggleColorMode`};function i(){return react.useEffect(()=>{let e=previewApi.addons.getChannel(),n=O=>{let r=O==="dark";document.documentElement.classList.toggle("dark",r),document.documentElement.style.colorScheme=r?"dark":"light";};return e.on(t.TOGGLE_COLOR_MODE,n),()=>{e.removeListener(t.TOGGLE_COLOR_MODE,n);}},[]),null}exports.ColorModeSync=i;//# sourceMappingURL=ColorModeSync.cjs.map
+//# sourceMappingURL=ColorModeSync.cjs.map

package/dist/color-mode/ColorModeSync.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/constants.ts","../../src/color-mode/ColorModeSync.tsx"],"names":["ADDON_ID","EVENTS","ColorModeSync","useEffect","channel","addons","colorModeToolCallback","value","dark"],"mappings":"oFAAO,IAAMA,CAAAA,CAAW,4BAKXC,CAAAA,CAAS,CACpB,kBAAmB,CAAA,EAAGD,CAAQ,kBAGhC,ECAO,SAASE,CAAAA,EAAgB,CAC9B,OAAAC,eAAAA,CAAU,IAAM,CACd,IAAMC,EAAUC,iBAAAA,CAAO,UAAA,GAEjBC,CAAAA,CAAyBC,CAAAA,EAAkB,CAC/C,IAAMC,CAAAA,CAAOD,IAAU,MAAA,CACvB,QAAA,CAAS,gBAAgB,SAAA,CAAU,MAAA,CAAO,OAAQC,CAAI,CAAA,CACtD,SAAS,eAAA,CAAgB,KAAA,CAAM,YAAcA,CAAAA,CAAO,MAAA,CAAS,QAC/D,CAAA,CACA,OAAAJ,EAAQ,EAAA,CAAGH,CAAAA,CAAO,kBAAmBK,CAAqB,CAAA,CAEnD,IAAM,CACXF,CAAAA,CAAQ,eAAeH,CAAAA,CAAO,iBAAA,CAAmBK,CAAqB,EACxE,CACF,EAAG,EAAE,EAEE,IACT","file":"ColorModeSync.cjs","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import { useEffect } from 'react'\n\nimport { addons } from 'storybook/preview-api'\n\nimport { EVENTS } from '../constants'\n\n/**\n * Render <ColorModeSync /> to sync the storybook color mode with Chakra UI\n */\nexport function ColorModeSync() {\n  useEffect(() => {\n    const channel = addons.getChannel()\n\n    const colorModeToolCallback = (value: string) => {\n      const dark = value === 'dark'\n      document.documentElement.classList.toggle('dark', dark)\n      document.documentElement.style.colorScheme = dark ? 'dark' : 'light'\n    }\n    channel.on(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback)\n\n    return () => {\n      channel.removeListener(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback)\n    }\n  }, [])\n\n  return null\n}\n"]}

package/dist/color-mode/ColorModeSync.d.cts

@@ -0,0 +1,6 @@
+/**
+ * Render <ColorModeSync /> to sync the storybook color mode with Chakra UI
+ */
+declare function ColorModeSync(): null;
+
+export { ColorModeSync };

package/dist/color-mode/ColorModeSync.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Render <ColorModeSync /> to sync the storybook color mode with Chakra UI
+ */
+declare function ColorModeSync(): null;
+
+export { ColorModeSync };

package/dist/color-mode/ColorModeSync.js

@@ -0,0 +1,2 @@
+import {useEffect}from'react';import {addons}from'storybook/preview-api';var o="@saas-ui/storybook-addon2",t={TOGGLE_COLOR_MODE:`${o}/toggleColorMode`};function i(){return useEffect(()=>{let e=addons.getChannel(),n=O=>{let r=O==="dark";document.documentElement.classList.toggle("dark",r),document.documentElement.style.colorScheme=r?"dark":"light";};return e.on(t.TOGGLE_COLOR_MODE,n),()=>{e.removeListener(t.TOGGLE_COLOR_MODE,n);}},[]),null}export{i as ColorModeSync};//# sourceMappingURL=ColorModeSync.js.map
+//# sourceMappingURL=ColorModeSync.js.map

package/dist/color-mode/ColorModeSync.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/constants.ts","../../src/color-mode/ColorModeSync.tsx"],"names":["ADDON_ID","EVENTS","ColorModeSync","useEffect","channel","addons","colorModeToolCallback","value","dark"],"mappings":"yEAAO,IAAMA,CAAAA,CAAW,4BAKXC,CAAAA,CAAS,CACpB,kBAAmB,CAAA,EAAGD,CAAQ,kBAGhC,ECAO,SAASE,CAAAA,EAAgB,CAC9B,OAAAC,SAAAA,CAAU,IAAM,CACd,IAAMC,EAAUC,MAAAA,CAAO,UAAA,GAEjBC,CAAAA,CAAyBC,CAAAA,EAAkB,CAC/C,IAAMC,CAAAA,CAAOD,IAAU,MAAA,CACvB,QAAA,CAAS,gBAAgB,SAAA,CAAU,MAAA,CAAO,OAAQC,CAAI,CAAA,CACtD,SAAS,eAAA,CAAgB,KAAA,CAAM,YAAcA,CAAAA,CAAO,MAAA,CAAS,QAC/D,CAAA,CACA,OAAAJ,EAAQ,EAAA,CAAGH,CAAAA,CAAO,kBAAmBK,CAAqB,CAAA,CAEnD,IAAM,CACXF,CAAAA,CAAQ,eAAeH,CAAAA,CAAO,iBAAA,CAAmBK,CAAqB,EACxE,CACF,EAAG,EAAE,EAEE,IACT","file":"ColorModeSync.js","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import { useEffect } from 'react'\n\nimport { addons } from 'storybook/preview-api'\n\nimport { EVENTS } from '../constants'\n\n/**\n * Render <ColorModeSync /> to sync the storybook color mode with Chakra UI\n */\nexport function ColorModeSync() {\n  useEffect(() => {\n    const channel = addons.getChannel()\n\n    const colorModeToolCallback = (value: string) => {\n      const dark = value === 'dark'\n      document.documentElement.classList.toggle('dark', dark)\n      document.documentElement.style.colorScheme = dark ? 'dark' : 'light'\n    }\n    channel.on(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback)\n\n    return () => {\n      channel.removeListener(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback)\n    }\n  }, [])\n\n  return null\n}\n"]}

package/dist/color-mode/ColorModeTool.cjs

@@ -0,0 +1,2 @@
+'use strict';var c=require('react'),components=require('storybook/internal/components'),managerApi=require('storybook/manager-api'),jsxRuntime=require('react/jsx-runtime');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var c__namespace=/*#__PURE__*/_interopNamespace(c);var t="@saas-ui/storybook-addon2",a={TOGGLE_COLOR_MODE:`${t}/toggleColorMode`};var p=()=>jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsxRuntime.jsx("path",{fill:"currentColor",d:"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z"})}),i=()=>jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsxRuntime.jsxs("g",{strokeLinejoin:"round",strokeLinecap:"round",strokeWidth:"2",fill:"none",stroke:"currentColor",children:[jsxRuntime.jsx("circle",{cx:"12",cy:"12",r:"5"}),jsxRuntime.jsx("path",{d:"M12 1v2"}),jsxRuntime.jsx("path",{d:"M12 21v2"}),jsxRuntime.jsx("path",{d:"M4.22 4.22l1.42 1.42"}),jsxRuntime.jsx("path",{d:"M18.36 18.36l1.42 1.42"}),jsxRuntime.jsx("path",{d:"M1 12h2"}),jsxRuntime.jsx("path",{d:"M21 12h2"}),jsxRuntime.jsx("path",{d:"M4.22 19.78l1.42-1.42"}),jsxRuntime.jsx("path",{d:"M18.36 5.64l1.42-1.42"})]})}),k=()=>{let r=localStorage.getItem("chakra-ui-color-mode")==="dark",[e,n]=c__namespace.useState(r),l=managerApi.addons.getChannel();return jsxRuntime.jsx(components.IconButton,{title:`Set color mode to ${e?"light":"dark"}`,active:e,onClick:()=>{l.emit(a.TOGGLE_COLOR_MODE,e?"light":"dark"),n(s=>!s);},children:e?jsxRuntime.jsx(i,{}):jsxRuntime.jsx(p,{})})};exports.ColorModeTool=k;//# sourceMappingURL=ColorModeTool.cjs.map
+//# sourceMappingURL=ColorModeTool.cjs.map

package/dist/color-mode/ColorModeTool.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/constants.ts","../../src/color-mode/ColorModeTool.tsx"],"names":["ADDON_ID","EVENTS","MoonIcon","jsx","SunIcon","jsxs","ColorModeTool","isDarkMode","darkMode","setDarkMode","c","channel","addons","IconButton","prev"],"mappings":"shBAAaA,CAAAA,CAAW,2BAAA,CAKXC,CAAAA,CAAS,CACpB,iBAAA,CAAmB,CAAA,EAAGD,CAAQ,CAAA,gBAAA,CAGhC,ECHA,IAAME,CAAAA,CAAW,IACfC,eAAC,KAAA,CAAA,CAAI,OAAA,CAAQ,YAAY,SAAA,CAAU,OAAA,CACjC,SAAAA,cAAAA,CAAC,MAAA,CAAA,CACC,KAAK,cAAA,CACL,CAAA,CAAE,qOACH,CAAA,CACH,CAAA,CAGIC,EAAU,IACdD,cAAAA,CAAC,OAAI,OAAA,CAAQ,WAAA,CAAY,SAAA,CAAU,OAAA,CACjC,QAAA,CAAAE,eAAAA,CAAC,KACC,cAAA,CAAe,OAAA,CACf,cAAc,OAAA,CACd,WAAA,CAAY,IACZ,IAAA,CAAK,MAAA,CACL,OAAO,cAAA,CAEP,QAAA,CAAA,CAAAF,eAAC,QAAA,CAAA,CAAO,EAAA,CAAG,KAAK,EAAA,CAAG,IAAA,CAAK,EAAE,GAAA,CAAI,CAAA,CAC9BA,cAAAA,CAAC,MAAA,CAAA,CAAK,CAAA,CAAE,SAAA,CAAU,EAClBA,cAAAA,CAAC,MAAA,CAAA,CAAK,EAAE,UAAA,CAAW,CAAA,CACnBA,eAAC,MAAA,CAAA,CAAK,CAAA,CAAE,uBAAuB,CAAA,CAC/BA,cAAAA,CAAC,QAAK,CAAA,CAAE,wBAAA,CAAyB,EACjCA,cAAAA,CAAC,MAAA,CAAA,CAAK,EAAE,SAAA,CAAU,CAAA,CAClBA,cAAAA,CAAC,MAAA,CAAA,CAAK,CAAA,CAAE,UAAA,CAAW,EACnBA,cAAAA,CAAC,MAAA,CAAA,CAAK,EAAE,uBAAA,CAAwB,CAAA,CAChCA,eAAC,MAAA,CAAA,CAAK,CAAA,CAAE,wBAAwB,CAAA,CAAA,CAClC,CAAA,CACF,EAGWG,CAAAA,CAAgB,IAAM,CACjC,IAAMC,CAAAA,CAAa,aAAa,OAAA,CAAQ,sBAAsB,CAAA,GAAM,MAAA,CAE9D,CAACC,CAAAA,CAAUC,CAAW,CAAA,CAAUC,YAAA,CAAA,QAAA,CAASH,CAAU,CAAA,CAEnDI,CAAAA,CAAUC,kBAAO,UAAA,EAAW,CAOlC,OACET,cAAAA,CAACU,qBAAAA,CAAA,CACC,KAAA,CAAO,CAAA,kBAAA,EAAqBL,EAAW,OAAA,CAAU,MAAM,GACvD,MAAA,CAAQA,CAAAA,CACR,OAAA,CATiB,IAAM,CACzBG,CAAAA,CAAQ,KAAKV,CAAAA,CAAO,iBAAA,CAAoBO,EAAoB,OAAA,CAAT,MAAgB,EACnEC,CAAAA,CAAaK,CAAAA,EAAS,CAACA,CAAI,EAC7B,EAQK,QAAA,CAAAN,CAAAA,CAAWL,eAACC,CAAAA,CAAA,EAAQ,EAAKD,cAAAA,CAACD,CAAAA,CAAA,EAAS,CAAA,CACtC,CAEJ","file":"ColorModeTool.cjs","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import * as React from 'react'\nimport { IconButton } from 'storybook/internal/components'\nimport { addons } from 'storybook/manager-api'\n\nimport { EVENTS } from '../constants'\n\nconst MoonIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <path\n      fill=\"currentColor\"\n      d=\"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z\"\n    ></path>\n  </svg>\n)\n\nconst SunIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <g\n      strokeLinejoin=\"round\"\n      strokeLinecap=\"round\"\n      strokeWidth=\"2\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"5\"></circle>\n      <path d=\"M12 1v2\"></path>\n      <path d=\"M12 21v2\"></path>\n      <path d=\"M4.22 4.22l1.42 1.42\"></path>\n      <path d=\"M18.36 18.36l1.42 1.42\"></path>\n      <path d=\"M1 12h2\"></path>\n      <path d=\"M21 12h2\"></path>\n      <path d=\"M4.22 19.78l1.42-1.42\"></path>\n      <path d=\"M18.36 5.64l1.42-1.42\"></path>\n    </g>\n  </svg>\n)\n\nexport const ColorModeTool = () => {\n  const isDarkMode = localStorage.getItem('chakra-ui-color-mode') === 'dark'\n\n  const [darkMode, setDarkMode] = React.useState(isDarkMode)\n\n  const channel = addons.getChannel()\n\n  const handleToggle = () => {\n    channel.emit(EVENTS.TOGGLE_COLOR_MODE, !darkMode ? 'dark' : 'light')\n    setDarkMode((prev) => !prev)\n  }\n\n  return (\n    <IconButton\n      title={`Set color mode to ${darkMode ? 'light' : 'dark'}`}\n      active={darkMode}\n      onClick={handleToggle}\n    >\n      {darkMode ? <SunIcon /> : <MoonIcon />}\n    </IconButton>\n  )\n}\n"]}

package/dist/color-mode/ColorModeTool.d.cts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const ColorModeTool: () => react_jsx_runtime.JSX.Element;
+
+export { ColorModeTool };

package/dist/color-mode/ColorModeTool.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const ColorModeTool: () => react_jsx_runtime.JSX.Element;
+
+export { ColorModeTool };

package/dist/color-mode/ColorModeTool.js

@@ -0,0 +1,2 @@
+import*as c from'react';import {IconButton}from'storybook/internal/components';import {addons}from'storybook/manager-api';import {jsx,jsxs}from'react/jsx-runtime';var t="@saas-ui/storybook-addon2",a={TOGGLE_COLOR_MODE:`${t}/toggleColorMode`};var p=()=>jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsx("path",{fill:"currentColor",d:"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z"})}),i=()=>jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsxs("g",{strokeLinejoin:"round",strokeLinecap:"round",strokeWidth:"2",fill:"none",stroke:"currentColor",children:[jsx("circle",{cx:"12",cy:"12",r:"5"}),jsx("path",{d:"M12 1v2"}),jsx("path",{d:"M12 21v2"}),jsx("path",{d:"M4.22 4.22l1.42 1.42"}),jsx("path",{d:"M18.36 18.36l1.42 1.42"}),jsx("path",{d:"M1 12h2"}),jsx("path",{d:"M21 12h2"}),jsx("path",{d:"M4.22 19.78l1.42-1.42"}),jsx("path",{d:"M18.36 5.64l1.42-1.42"})]})}),k=()=>{let r=localStorage.getItem("chakra-ui-color-mode")==="dark",[e,n]=c.useState(r),l=addons.getChannel();return jsx(IconButton,{title:`Set color mode to ${e?"light":"dark"}`,active:e,onClick:()=>{l.emit(a.TOGGLE_COLOR_MODE,e?"light":"dark"),n(s=>!s);},children:e?jsx(i,{}):jsx(p,{})})};export{k as ColorModeTool};//# sourceMappingURL=ColorModeTool.js.map
+//# sourceMappingURL=ColorModeTool.js.map

package/dist/color-mode/ColorModeTool.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/constants.ts","../../src/color-mode/ColorModeTool.tsx"],"names":["ADDON_ID","EVENTS","MoonIcon","jsx","SunIcon","jsxs","ColorModeTool","isDarkMode","darkMode","setDarkMode","channel","addons","IconButton","prev"],"mappings":"uKAAaA,CAAAA,CAAW,2BAAA,CAKXC,CAAAA,CAAS,CACpB,iBAAA,CAAmB,CAAA,EAAGD,CAAQ,CAAA,gBAAA,CAGhC,ECHA,IAAME,CAAAA,CAAW,IACfC,IAAC,KAAA,CAAA,CAAI,OAAA,CAAQ,YAAY,SAAA,CAAU,OAAA,CACjC,SAAAA,GAAAA,CAAC,MAAA,CAAA,CACC,KAAK,cAAA,CACL,CAAA,CAAE,qOACH,CAAA,CACH,CAAA,CAGIC,EAAU,IACdD,GAAAA,CAAC,OAAI,OAAA,CAAQ,WAAA,CAAY,SAAA,CAAU,OAAA,CACjC,QAAA,CAAAE,IAAAA,CAAC,KACC,cAAA,CAAe,OAAA,CACf,cAAc,OAAA,CACd,WAAA,CAAY,IACZ,IAAA,CAAK,MAAA,CACL,OAAO,cAAA,CAEP,QAAA,CAAA,CAAAF,IAAC,QAAA,CAAA,CAAO,EAAA,CAAG,KAAK,EAAA,CAAG,IAAA,CAAK,EAAE,GAAA,CAAI,CAAA,CAC9BA,GAAAA,CAAC,MAAA,CAAA,CAAK,CAAA,CAAE,SAAA,CAAU,EAClBA,GAAAA,CAAC,MAAA,CAAA,CAAK,EAAE,UAAA,CAAW,CAAA,CACnBA,IAAC,MAAA,CAAA,CAAK,CAAA,CAAE,uBAAuB,CAAA,CAC/BA,GAAAA,CAAC,QAAK,CAAA,CAAE,wBAAA,CAAyB,EACjCA,GAAAA,CAAC,MAAA,CAAA,CAAK,EAAE,SAAA,CAAU,CAAA,CAClBA,GAAAA,CAAC,MAAA,CAAA,CAAK,CAAA,CAAE,UAAA,CAAW,EACnBA,GAAAA,CAAC,MAAA,CAAA,CAAK,EAAE,uBAAA,CAAwB,CAAA,CAChCA,IAAC,MAAA,CAAA,CAAK,CAAA,CAAE,wBAAwB,CAAA,CAAA,CAClC,CAAA,CACF,EAGWG,CAAAA,CAAgB,IAAM,CACjC,IAAMC,CAAAA,CAAa,aAAa,OAAA,CAAQ,sBAAsB,CAAA,GAAM,MAAA,CAE9D,CAACC,CAAAA,CAAUC,CAAW,CAAA,CAAU,CAAA,CAAA,QAAA,CAASF,CAAU,CAAA,CAEnDG,CAAAA,CAAUC,OAAO,UAAA,EAAW,CAOlC,OACER,GAAAA,CAACS,UAAAA,CAAA,CACC,KAAA,CAAO,CAAA,kBAAA,EAAqBJ,EAAW,OAAA,CAAU,MAAM,GACvD,MAAA,CAAQA,CAAAA,CACR,OAAA,CATiB,IAAM,CACzBE,CAAAA,CAAQ,KAAKT,CAAAA,CAAO,iBAAA,CAAoBO,EAAoB,OAAA,CAAT,MAAgB,EACnEC,CAAAA,CAAaI,CAAAA,EAAS,CAACA,CAAI,EAC7B,EAQK,QAAA,CAAAL,CAAAA,CAAWL,IAACC,CAAAA,CAAA,EAAQ,EAAKD,GAAAA,CAACD,CAAAA,CAAA,EAAS,CAAA,CACtC,CAEJ","file":"ColorModeTool.js","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import * as React from 'react'\nimport { IconButton } from 'storybook/internal/components'\nimport { addons } from 'storybook/manager-api'\n\nimport { EVENTS } from '../constants'\n\nconst MoonIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <path\n      fill=\"currentColor\"\n      d=\"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z\"\n    ></path>\n  </svg>\n)\n\nconst SunIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <g\n      strokeLinejoin=\"round\"\n      strokeLinecap=\"round\"\n      strokeWidth=\"2\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"5\"></circle>\n      <path d=\"M12 1v2\"></path>\n      <path d=\"M12 21v2\"></path>\n      <path d=\"M4.22 4.22l1.42 1.42\"></path>\n      <path d=\"M18.36 18.36l1.42 1.42\"></path>\n      <path d=\"M1 12h2\"></path>\n      <path d=\"M21 12h2\"></path>\n      <path d=\"M4.22 19.78l1.42-1.42\"></path>\n      <path d=\"M18.36 5.64l1.42-1.42\"></path>\n    </g>\n  </svg>\n)\n\nexport const ColorModeTool = () => {\n  const isDarkMode = localStorage.getItem('chakra-ui-color-mode') === 'dark'\n\n  const [darkMode, setDarkMode] = React.useState(isDarkMode)\n\n  const channel = addons.getChannel()\n\n  const handleToggle = () => {\n    channel.emit(EVENTS.TOGGLE_COLOR_MODE, !darkMode ? 'dark' : 'light')\n    setDarkMode((prev) => !prev)\n  }\n\n  return (\n    <IconButton\n      title={`Set color mode to ${darkMode ? 'light' : 'dark'}`}\n      active={darkMode}\n      onClick={handleToggle}\n    >\n      {darkMode ? <SunIcon /> : <MoonIcon />}\n    </IconButton>\n  )\n}\n"]}

package/dist/constants.cjs

@@ -0,0 +1,2 @@
+'use strict';var o="@saas-ui/storybook-addon2",t=`${o}/color-mode-tool`,O=`${o}/direction-tool`,e=`${o}/theme-tool`,E={TOGGLE_COLOR_MODE:`${o}/toggleColorMode`,TOGGLE_DIRECTION:`${o}/toggleDirection`,SET_THEME:`${o}/setTheme`};exports.ADDON_ID=o;exports.COLOR_MODE_TOOL_ID=t;exports.DIRECTION_TOOL_ID=O;exports.EVENTS=E;exports.THEME_TOOL_ID=e;//# sourceMappingURL=constants.cjs.map
+//# sourceMappingURL=constants.cjs.map

package/dist/constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts"],"names":["ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS"],"mappings":"aAAO,IAAMA,CAAAA,CAAW,2BAAA,CACXC,CAAAA,CAAqB,CAAA,EAAGD,CAAQ,CAAA,gBAAA,CAAA,CAChCE,CAAAA,CAAoB,CAAA,EAAGF,CAAQ,CAAA,eAAA,CAAA,CAC/BG,CAAAA,CAAgB,CAAA,EAAGH,CAAQ,CAAA,WAAA,CAAA,CAE3BI,CAAAA,CAAS,CACpB,iBAAA,CAAmB,CAAA,EAAGJ,CAAQ,CAAA,gBAAA,CAAA,CAC9B,gBAAA,CAAkB,CAAA,EAAGA,CAAQ,CAAA,gBAAA,CAAA,CAC7B,SAAA,CAAW,CAAA,EAAGA,CAAQ,CAAA,SAAA,CACxB","file":"constants.cjs","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n"]}

package/dist/constants.d.cts

@@ -0,0 +1,11 @@
+declare const ADDON_ID = "@saas-ui/storybook-addon2";
+declare const COLOR_MODE_TOOL_ID = "@saas-ui/storybook-addon2/color-mode-tool";
+declare const DIRECTION_TOOL_ID = "@saas-ui/storybook-addon2/direction-tool";
+declare const THEME_TOOL_ID = "@saas-ui/storybook-addon2/theme-tool";
+declare const EVENTS: {
+    TOGGLE_COLOR_MODE: string;
+    TOGGLE_DIRECTION: string;
+    SET_THEME: string;
+};
+
+export { ADDON_ID, COLOR_MODE_TOOL_ID, DIRECTION_TOOL_ID, EVENTS, THEME_TOOL_ID };

package/dist/constants.d.ts

@@ -0,0 +1,11 @@
+declare const ADDON_ID = "@saas-ui/storybook-addon2";
+declare const COLOR_MODE_TOOL_ID = "@saas-ui/storybook-addon2/color-mode-tool";
+declare const DIRECTION_TOOL_ID = "@saas-ui/storybook-addon2/direction-tool";
+declare const THEME_TOOL_ID = "@saas-ui/storybook-addon2/theme-tool";
+declare const EVENTS: {
+    TOGGLE_COLOR_MODE: string;
+    TOGGLE_DIRECTION: string;
+    SET_THEME: string;
+};
+
+export { ADDON_ID, COLOR_MODE_TOOL_ID, DIRECTION_TOOL_ID, EVENTS, THEME_TOOL_ID };

package/dist/constants.js

@@ -0,0 +1,2 @@
+var o="@saas-ui/storybook-addon2",t=`${o}/color-mode-tool`,O=`${o}/direction-tool`,e=`${o}/theme-tool`,E={TOGGLE_COLOR_MODE:`${o}/toggleColorMode`,TOGGLE_DIRECTION:`${o}/toggleDirection`,SET_THEME:`${o}/setTheme`};export{o as ADDON_ID,t as COLOR_MODE_TOOL_ID,O as DIRECTION_TOOL_ID,E as EVENTS,e as THEME_TOOL_ID};//# sourceMappingURL=constants.js.map
+//# sourceMappingURL=constants.js.map

package/dist/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts"],"names":["ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS"],"mappings":"AAAO,IAAMA,CAAAA,CAAW,2BAAA,CACXC,CAAAA,CAAqB,CAAA,EAAGD,CAAQ,CAAA,gBAAA,CAAA,CAChCE,CAAAA,CAAoB,CAAA,EAAGF,CAAQ,CAAA,eAAA,CAAA,CAC/BG,CAAAA,CAAgB,CAAA,EAAGH,CAAQ,CAAA,WAAA,CAAA,CAE3BI,CAAAA,CAAS,CACpB,iBAAA,CAAmB,CAAA,EAAGJ,CAAQ,CAAA,gBAAA,CAAA,CAC9B,gBAAA,CAAkB,CAAA,EAAGA,CAAQ,CAAA,gBAAA,CAAA,CAC7B,SAAA,CAAW,CAAA,EAAGA,CAAQ,CAAA,SAAA,CACxB","file":"constants.js","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n"]}

package/dist/direction/DirectionTool.cjs

@@ -0,0 +1,2 @@
+'use strict';var react=require('react'),components=require('storybook/internal/components'),managerApi=require('storybook/manager-api'),jsxRuntime=require('react/jsx-runtime');var t="@saas-ui/storybook-addon2",n=`${t}/direction-tool`,i={TOGGLE_DIRECTION:`${t}/toggleDirection`};var D=e=>jsxRuntime.jsxs("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"},...e,children:[jsxRuntime.jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsxRuntime.jsx("path",{d:"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z"})]}),I=e=>jsxRuntime.jsxs("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"},...e,children:[jsxRuntime.jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsxRuntime.jsx("path",{d:"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z"})]}),L=()=>{let[e,s]=managerApi.useGlobals(),[l,c]=managerApi.useAddonState(n,e[n]||"ltr"),r=l!=="ltr"?"ltr":"rtl";react.useEffect(()=>{s({[n]:l});},[l,s]);let a=react.useCallback(()=>{managerApi.addons.getChannel().emit(i.TOGGLE_DIRECTION,r),c(r);},[c,r]);return jsxRuntime.jsx(components.IconButton,{active:l==="rtl",title:`Set layout direction to ${r}`,onClick:a,children:r==="ltr"?jsxRuntime.jsx(D,{}):jsxRuntime.jsx(I,{})})};exports.DirectionTool=L;//# sourceMappingURL=DirectionTool.cjs.map
+//# sourceMappingURL=DirectionTool.cjs.map

package/dist/direction/DirectionTool.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/constants.ts","../../src/direction/DirectionTool.tsx"],"names":["ADDON_ID","DIRECTION_TOOL_ID","EVENTS","LTRIcon","props","jsxs","jsx","RTLIcon","DirectionTool","globals","setGlobals","useGlobals","direction","setDirection","useAddonState","targetDirection","useEffect","toggleDirection","useCallback","addons","IconButton"],"mappings":"gLAAO,IAAMA,EAAW,2BAAA,CAEXC,CAAAA,CAAoB,GAAGD,CAAQ,CAAA,eAAA,CAAA,CAG/BE,EAAS,CAEpB,gBAAA,CAAkB,GAAGF,CAAQ,CAAA,gBAAA,CAE/B,MCJMG,CAAAA,CAAWC,CAAAA,EACfC,gBAAC,KAAA,CAAA,CACC,MAAA,CAAO,eACP,IAAA,CAAK,cAAA,CACL,WAAA,CAAY,GAAA,CACZ,OAAA,CAAQ,WAAA,CACR,OAAO,KAAA,CACP,KAAA,CAAM,KAAA,CACN,KAAA,CAAO,CACL,SAAA,CAAW,YACb,CAAA,CACC,GAAGD,CAAAA,CAEJ,QAAA,CAAA,CAAAE,cAAAA,CAAC,MAAA,CAAA,CAAK,KAAK,MAAA,CAAO,CAAA,CAAE,iBAAA,CAAkB,CAAA,CACtCA,cAAAA,CAAC,MAAA,CAAA,CAAK,EAAE,iHAAA,CAAkH,CAAA,CAAA,CAC5H,CAAA,CAGIC,CAAAA,CAAWH,CAAAA,EACfC,eAAAA,CAAC,OACC,MAAA,CAAO,cAAA,CACP,IAAA,CAAK,cAAA,CACL,WAAA,CAAY,GAAA,CACZ,QAAQ,WAAA,CACR,MAAA,CAAO,KAAA,CACP,KAAA,CAAM,KAAA,CACN,KAAA,CAAO,CACL,SAAA,CAAW,YACb,EACC,GAAGD,CAAAA,CAEJ,UAAAE,cAAAA,CAAC,MAAA,CAAA,CAAK,IAAA,CAAK,MAAA,CAAO,CAAA,CAAE,iBAAA,CAAkB,EACtCA,cAAAA,CAAC,MAAA,CAAA,CAAK,CAAA,CAAE,uHAAA,CAAwH,CAAA,CAAA,CAClI,CAAA,CAMWE,EAAgB,IAAM,CACjC,GAAM,CAACC,CAAAA,CAASC,CAAU,EAAIC,qBAAAA,EAAW,CACnC,CAACC,CAAAA,CAAWC,CAAY,CAAA,CAAIC,yBAChCb,CAAAA,CACAQ,CAAAA,CAAQR,CAAiB,CAAA,EAAK,KAChC,CAAA,CACMc,EAAkBH,CAAAA,GAAc,KAAA,CAAQ,KAAA,CAAQ,KAAA,CACtDI,eAAAA,CAAU,IAAM,CACdN,CAAAA,CAAW,CAAE,CAACT,CAAiB,EAAGW,CAAU,CAAC,EAC/C,CAAA,CAAG,CAACA,CAAAA,CAAWF,CAAU,CAAC,EAE1B,IAAMO,CAAAA,CAAkBC,iBAAAA,CAAY,IAAM,CACxBC,iBAAAA,CAAO,YAAW,CAC1B,IAAA,CAAKjB,CAAAA,CAAO,gBAAA,CAAkBa,CAAe,CAAA,CACrDF,EAAaE,CAAe,EAC9B,CAAA,CAAG,CAACF,CAAAA,CAAcE,CAAe,CAAC,CAAA,CAElC,OACET,cAAAA,CAACc,qBAAAA,CAAA,CACC,MAAA,CAAQR,IAAc,KAAA,CACtB,KAAA,CAAO,CAAA,wBAAA,EAA2BG,CAAe,CAAA,CAAA,CACjD,OAAA,CAASE,EAER,QAAA,CAAAF,CAAAA,GAAoB,KAAA,CAAQT,cAAAA,CAACH,CAAAA,CAAA,EAAQ,EAAKG,cAAAA,CAACC,CAAAA,CAAA,EAAQ,CAAA,CACtD,CAEJ","file":"DirectionTool.cjs","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import { useCallback, useEffect } from 'react'\nimport { IconButton } from 'storybook/internal/components'\nimport { addons, useAddonState, useGlobals } from 'storybook/manager-api'\nimport { DIRECTION_TOOL_ID, EVENTS } from '../constants'\n\nconst LTRIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z\" />\n  </svg>\n)\n\nconst RTLIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z\" />\n  </svg>\n)\n\n/**\n * This component is rendered in the Storybook toolbar\n */\nexport const DirectionTool = () => {\n  const [globals, setGlobals] = useGlobals()\n  const [direction, setDirection] = useAddonState(\n    DIRECTION_TOOL_ID,\n    globals[DIRECTION_TOOL_ID] || 'ltr'\n  )\n  const targetDirection = direction !== 'ltr' ? 'ltr' : 'rtl'\n  useEffect(() => {\n    setGlobals({ [DIRECTION_TOOL_ID]: direction })\n  }, [direction, setGlobals])\n\n  const toggleDirection = useCallback(() => {\n    const channel = addons.getChannel()\n    channel.emit(EVENTS.TOGGLE_DIRECTION, targetDirection)\n    setDirection(targetDirection)\n  }, [setDirection, targetDirection])\n\n  return (\n    <IconButton\n      active={direction === 'rtl'}\n      title={`Set layout direction to ${targetDirection}`}\n      onClick={toggleDirection}\n    >\n      {targetDirection === 'ltr' ? <LTRIcon /> : <RTLIcon />}\n    </IconButton>\n  )\n}\n"]}

package/dist/direction/DirectionTool.d.cts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * This component is rendered in the Storybook toolbar
+ */
+declare const DirectionTool: () => react_jsx_runtime.JSX.Element;
+
+export { DirectionTool };

package/dist/direction/DirectionTool.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * This component is rendered in the Storybook toolbar
+ */
+declare const DirectionTool: () => react_jsx_runtime.JSX.Element;
+
+export { DirectionTool };

package/dist/direction/DirectionTool.js

@@ -0,0 +1,2 @@
+import {useEffect,useCallback}from'react';import {IconButton}from'storybook/internal/components';import {useGlobals,useAddonState,addons}from'storybook/manager-api';import {jsx,jsxs}from'react/jsx-runtime';var t="@saas-ui/storybook-addon2",n=`${t}/direction-tool`,i={TOGGLE_DIRECTION:`${t}/toggleDirection`};var D=e=>jsxs("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"},...e,children:[jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsx("path",{d:"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z"})]}),I=e=>jsxs("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"},...e,children:[jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsx("path",{d:"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z"})]}),L=()=>{let[e,s]=useGlobals(),[l,c]=useAddonState(n,e[n]||"ltr"),r=l!=="ltr"?"ltr":"rtl";useEffect(()=>{s({[n]:l});},[l,s]);let a=useCallback(()=>{addons.getChannel().emit(i.TOGGLE_DIRECTION,r),c(r);},[c,r]);return jsx(IconButton,{active:l==="rtl",title:`Set layout direction to ${r}`,onClick:a,children:r==="ltr"?jsx(D,{}):jsx(I,{})})};export{L as DirectionTool};//# sourceMappingURL=DirectionTool.js.map
+//# sourceMappingURL=DirectionTool.js.map

package/dist/direction/DirectionTool.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/constants.ts","../../src/direction/DirectionTool.tsx"],"names":["ADDON_ID","DIRECTION_TOOL_ID","EVENTS","LTRIcon","props","jsxs","jsx","RTLIcon","DirectionTool","globals","setGlobals","useGlobals","direction","setDirection","useAddonState","targetDirection","useEffect","toggleDirection","useCallback","addons","IconButton"],"mappings":"8MAAO,IAAMA,EAAW,2BAAA,CAEXC,CAAAA,CAAoB,GAAGD,CAAQ,CAAA,eAAA,CAAA,CAG/BE,EAAS,CAEpB,gBAAA,CAAkB,GAAGF,CAAQ,CAAA,gBAAA,CAE/B,MCJMG,CAAAA,CAAWC,CAAAA,EACfC,KAAC,KAAA,CAAA,CACC,MAAA,CAAO,eACP,IAAA,CAAK,cAAA,CACL,WAAA,CAAY,GAAA,CACZ,OAAA,CAAQ,WAAA,CACR,OAAO,KAAA,CACP,KAAA,CAAM,KAAA,CACN,KAAA,CAAO,CACL,SAAA,CAAW,YACb,CAAA,CACC,GAAGD,CAAAA,CAEJ,QAAA,CAAA,CAAAE,GAAAA,CAAC,MAAA,CAAA,CAAK,KAAK,MAAA,CAAO,CAAA,CAAE,iBAAA,CAAkB,CAAA,CACtCA,GAAAA,CAAC,MAAA,CAAA,CAAK,EAAE,iHAAA,CAAkH,CAAA,CAAA,CAC5H,CAAA,CAGIC,CAAAA,CAAWH,CAAAA,EACfC,IAAAA,CAAC,OACC,MAAA,CAAO,cAAA,CACP,IAAA,CAAK,cAAA,CACL,WAAA,CAAY,GAAA,CACZ,QAAQ,WAAA,CACR,MAAA,CAAO,KAAA,CACP,KAAA,CAAM,KAAA,CACN,KAAA,CAAO,CACL,SAAA,CAAW,YACb,EACC,GAAGD,CAAAA,CAEJ,UAAAE,GAAAA,CAAC,MAAA,CAAA,CAAK,IAAA,CAAK,MAAA,CAAO,CAAA,CAAE,iBAAA,CAAkB,EACtCA,GAAAA,CAAC,MAAA,CAAA,CAAK,CAAA,CAAE,uHAAA,CAAwH,CAAA,CAAA,CAClI,CAAA,CAMWE,EAAgB,IAAM,CACjC,GAAM,CAACC,CAAAA,CAASC,CAAU,EAAIC,UAAAA,EAAW,CACnC,CAACC,CAAAA,CAAWC,CAAY,CAAA,CAAIC,cAChCb,CAAAA,CACAQ,CAAAA,CAAQR,CAAiB,CAAA,EAAK,KAChC,CAAA,CACMc,EAAkBH,CAAAA,GAAc,KAAA,CAAQ,KAAA,CAAQ,KAAA,CACtDI,SAAAA,CAAU,IAAM,CACdN,CAAAA,CAAW,CAAE,CAACT,CAAiB,EAAGW,CAAU,CAAC,EAC/C,CAAA,CAAG,CAACA,CAAAA,CAAWF,CAAU,CAAC,EAE1B,IAAMO,CAAAA,CAAkBC,WAAAA,CAAY,IAAM,CACxBC,MAAAA,CAAO,YAAW,CAC1B,IAAA,CAAKjB,CAAAA,CAAO,gBAAA,CAAkBa,CAAe,CAAA,CACrDF,EAAaE,CAAe,EAC9B,CAAA,CAAG,CAACF,CAAAA,CAAcE,CAAe,CAAC,CAAA,CAElC,OACET,GAAAA,CAACc,UAAAA,CAAA,CACC,MAAA,CAAQR,IAAc,KAAA,CACtB,KAAA,CAAO,CAAA,wBAAA,EAA2BG,CAAe,CAAA,CAAA,CACjD,OAAA,CAASE,EAER,QAAA,CAAAF,CAAAA,GAAoB,KAAA,CAAQT,GAAAA,CAACH,CAAAA,CAAA,EAAQ,EAAKG,GAAAA,CAACC,CAAAA,CAAA,EAAQ,CAAA,CACtD,CAEJ","file":"DirectionTool.js","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import { useCallback, useEffect } from 'react'\nimport { IconButton } from 'storybook/internal/components'\nimport { addons, useAddonState, useGlobals } from 'storybook/manager-api'\nimport { DIRECTION_TOOL_ID, EVENTS } from '../constants'\n\nconst LTRIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z\" />\n  </svg>\n)\n\nconst RTLIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z\" />\n  </svg>\n)\n\n/**\n * This component is rendered in the Storybook toolbar\n */\nexport const DirectionTool = () => {\n  const [globals, setGlobals] = useGlobals()\n  const [direction, setDirection] = useAddonState(\n    DIRECTION_TOOL_ID,\n    globals[DIRECTION_TOOL_ID] || 'ltr'\n  )\n  const targetDirection = direction !== 'ltr' ? 'ltr' : 'rtl'\n  useEffect(() => {\n    setGlobals({ [DIRECTION_TOOL_ID]: direction })\n  }, [direction, setGlobals])\n\n  const toggleDirection = useCallback(() => {\n    const channel = addons.getChannel()\n    channel.emit(EVENTS.TOGGLE_DIRECTION, targetDirection)\n    setDirection(targetDirection)\n  }, [setDirection, targetDirection])\n\n  return (\n    <IconButton\n      active={direction === 'rtl'}\n      title={`Set layout direction to ${targetDirection}`}\n      onClick={toggleDirection}\n    >\n      {targetDirection === 'ltr' ? <LTRIcon /> : <RTLIcon />}\n    </IconButton>\n  )\n}\n"]}

package/dist/direction/useDirection.cjs

@@ -0,0 +1,2 @@
+'use strict';var react=require('react'),previewApi=require('storybook/preview-api');var o="@saas-ui/storybook-addon2",e={TOGGLE_DIRECTION:`${o}/toggleDirection`};var a=(E="ltr")=>{let[t,r]=react.useState(E.toLowerCase());return react.useEffect(()=>{document.documentElement.dir=t;},[t]),react.useEffect(()=>{let n=previewApi.addons.getChannel(),c=O=>r(O);return n.on(e.TOGGLE_DIRECTION,c),()=>{n.removeListener(e.TOGGLE_DIRECTION,c);}},[r]),t};exports.useDirection=a;//# sourceMappingURL=useDirection.cjs.map
+//# sourceMappingURL=useDirection.cjs.map

package/dist/direction/useDirection.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/constants.ts","../../src/direction/useDirection.tsx"],"names":["ADDON_ID","EVENTS","useDirection","initialDirection","direction","setDirection","useState","useEffect","channel","addons","callback","value"],"mappings":"oFAAO,IAAMA,CAAAA,CAAW,4BAKXC,EAAS,CAEpB,iBAAkB,CAAA,EAAGD,CAAQ,CAAA,gBAAA,CAE/B,ECFO,IAAME,CAAAA,CAAe,CAACC,CAAAA,CAAkC,KAAA,GAAU,CACvE,GAAM,CAACC,CAAAA,CAAWC,CAAY,CAAA,CAAIC,cAAAA,CAASH,EAAiB,WAAA,EAAa,EAEzE,OAAAI,eAAAA,CAAU,IAAM,CACd,QAAA,CAAS,eAAA,CAAgB,GAAA,CAAMH,EACjC,CAAA,CAAG,CAACA,CAAS,CAAC,EAEdG,eAAAA,CAAU,IAAM,CACd,IAAMC,CAAAA,CAAUC,iBAAAA,CAAO,UAAA,EAAW,CAC5BC,CAAAA,CAAYC,GAAkBN,CAAAA,CAAaM,CAAK,EACtD,OAAAH,CAAAA,CAAQ,GAAGP,CAAAA,CAAO,gBAAA,CAAkBS,CAAQ,CAAA,CACrC,IAAM,CACXF,EAAQ,cAAA,CAAeP,CAAAA,CAAO,gBAAA,CAAkBS,CAAQ,EAC1D,CACF,EAAG,CAACL,CAAY,CAAC,CAAA,CAEVD,CACT","file":"useDirection.cjs","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import { useEffect, useState } from 'react'\nimport { addons } from 'storybook/preview-api'\nimport { EVENTS } from '../constants'\n\n/**\n * Sync the layout direction to the html element\n */\nexport const useDirection = (initialDirection: 'ltr' | 'rtl' = 'ltr') => {\n  const [direction, setDirection] = useState(initialDirection.toLowerCase())\n\n  useEffect(() => {\n    document.documentElement.dir = direction\n  }, [direction])\n\n  useEffect(() => {\n    const channel = addons.getChannel()\n    const callback = (value: string) => setDirection(value)\n    channel.on(EVENTS.TOGGLE_DIRECTION, callback)\n    return () => {\n      channel.removeListener(EVENTS.TOGGLE_DIRECTION, callback)\n    }\n  }, [setDirection])\n\n  return direction\n}\n"]}

package/dist/direction/useDirection.d.cts

@@ -0,0 +1,6 @@
+/**
+ * Sync the layout direction to the html element
+ */
+declare const useDirection: (initialDirection?: "ltr" | "rtl") => string;
+
+export { useDirection };

package/dist/direction/useDirection.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Sync the layout direction to the html element
+ */
+declare const useDirection: (initialDirection?: "ltr" | "rtl") => string;
+
+export { useDirection };

package/dist/direction/useDirection.js

@@ -0,0 +1,2 @@
+import {useState,useEffect}from'react';import {addons}from'storybook/preview-api';var o="@saas-ui/storybook-addon2",e={TOGGLE_DIRECTION:`${o}/toggleDirection`};var a=(E="ltr")=>{let[t,r]=useState(E.toLowerCase());return useEffect(()=>{document.documentElement.dir=t;},[t]),useEffect(()=>{let n=addons.getChannel(),c=O=>r(O);return n.on(e.TOGGLE_DIRECTION,c),()=>{n.removeListener(e.TOGGLE_DIRECTION,c);}},[r]),t};export{a as useDirection};//# sourceMappingURL=useDirection.js.map
+//# sourceMappingURL=useDirection.js.map

package/dist/direction/useDirection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/constants.ts","../../src/direction/useDirection.tsx"],"names":["ADDON_ID","EVENTS","useDirection","initialDirection","direction","setDirection","useState","useEffect","channel","addons","callback","value"],"mappings":"kFAAO,IAAMA,CAAAA,CAAW,4BAKXC,EAAS,CAEpB,iBAAkB,CAAA,EAAGD,CAAQ,CAAA,gBAAA,CAE/B,ECFO,IAAME,CAAAA,CAAe,CAACC,CAAAA,CAAkC,KAAA,GAAU,CACvE,GAAM,CAACC,CAAAA,CAAWC,CAAY,CAAA,CAAIC,QAAAA,CAASH,EAAiB,WAAA,EAAa,EAEzE,OAAAI,SAAAA,CAAU,IAAM,CACd,QAAA,CAAS,eAAA,CAAgB,GAAA,CAAMH,EACjC,CAAA,CAAG,CAACA,CAAS,CAAC,EAEdG,SAAAA,CAAU,IAAM,CACd,IAAMC,CAAAA,CAAUC,MAAAA,CAAO,UAAA,EAAW,CAC5BC,CAAAA,CAAYC,GAAkBN,CAAAA,CAAaM,CAAK,EACtD,OAAAH,CAAAA,CAAQ,GAAGP,CAAAA,CAAO,gBAAA,CAAkBS,CAAQ,CAAA,CACrC,IAAM,CACXF,EAAQ,cAAA,CAAeP,CAAAA,CAAO,gBAAA,CAAkBS,CAAQ,EAC1D,CACF,EAAG,CAACL,CAAY,CAAC,CAAA,CAEVD,CACT","file":"useDirection.js","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import { useEffect, useState } from 'react'\nimport { addons } from 'storybook/preview-api'\nimport { EVENTS } from '../constants'\n\n/**\n * Sync the layout direction to the html element\n */\nexport const useDirection = (initialDirection: 'ltr' | 'rtl' = 'ltr') => {\n  const [direction, setDirection] = useState(initialDirection.toLowerCase())\n\n  useEffect(() => {\n    document.documentElement.dir = direction\n  }, [direction])\n\n  useEffect(() => {\n    const channel = addons.getChannel()\n    const callback = (value: string) => setDirection(value)\n    channel.on(EVENTS.TOGGLE_DIRECTION, callback)\n    return () => {\n      channel.removeListener(EVENTS.TOGGLE_DIRECTION, callback)\n    }\n  }, [setDirection])\n\n  return direction\n}\n"]}

package/dist/index.cjs

@@ -0,0 +1,2 @@
+'use strict';var o="@saas-ui/storybook-addon2",p=`${o}/color-mode-tool`,m=`${o}/direction-tool`,T=`${o}/theme-tool`,y={TOGGLE_COLOR_MODE:`${o}/toggleColorMode`,TOGGLE_DIRECTION:`${o}/toggleDirection`,SET_THEME:`${o}/setTheme`};function l(t){let r=Object.keys(t||{});return ["50","100","200","300","400","500","600","700","800","900"].every(e=>r.includes(e))}function O(t,r){let e=t.components[r];if(!e)return;let n={},c=Object.keys(e.variants||{});c.length&&(n.variant={type:{name:"enum",value:c},defaultValue:e.defaultProps?.variant});let a=Object.keys(e.sizes||{});if(a.length&&(n.size={type:{name:"enum",value:a},defaultValue:e.defaultProps?.size}),e.defaultProps?.colorScheme){let i=Object.entries(t.colors).filter(([,s])=>l(s)).map(([s])=>s);i.length&&(n.colorScheme={type:{name:"enum",value:i},defaultValue:e.defaultProps?.colorScheme});}return n}exports.ADDON_ID=o;exports.COLOR_MODE_TOOL_ID=p;exports.DIRECTION_TOOL_ID=m;exports.EVENTS=y;exports.THEME_TOOL_ID=T;exports.getThemingArgTypes=O;//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts","../src/arg-types.ts"],"names":["ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","validateColorScheme","value","valueKeys","term","getThemingArgTypes","theme","componentName","component","argTypes","variantOptions","sizeOptions","colorSchemes","key"],"mappings":"aAAO,IAAMA,EAAW,2BAAA,CACXC,CAAAA,CAAqB,GAAGD,CAAQ,CAAA,gBAAA,CAAA,CAChCE,EAAoB,CAAA,EAAGF,CAAQ,kBAC/BG,CAAAA,CAAgB,CAAA,EAAGH,CAAQ,CAAA,WAAA,CAAA,CAE3BI,CAAAA,CAAS,CACpB,iBAAA,CAAmB,CAAA,EAAGJ,CAAQ,CAAA,gBAAA,CAAA,CAC9B,gBAAA,CAAkB,CAAA,EAAGA,CAAQ,mBAC7B,SAAA,CAAW,CAAA,EAAGA,CAAQ,CAAA,SAAA,CACxB,ECOA,SAASK,CAAAA,CAAoBC,CAAAA,CAAe,CAC1C,IAAMC,CAAAA,CAAY,OAAO,IAAA,CAAKD,CAAAA,EAAS,EAAE,CAAA,CACzC,OAAO,CACL,IAAA,CACA,KAAA,CACA,KAAA,CACA,MACA,KAAA,CACA,KAAA,CACA,MACA,KAAA,CACA,KAAA,CACA,KACF,CAAA,CAAE,KAAA,CAAOE,GAASD,CAAAA,CAAU,QAAA,CAASC,CAAI,CAAC,CAC5C,CAkCO,SAASC,CAAAA,CAMdC,EAAcC,CAAAA,CAA8B,CAC5C,IAAMC,CAAAA,CAAYF,EAAM,UAAA,CAAWC,CAAa,EAChD,GAAI,CAACC,EACH,OAGF,IAAMC,EAAiE,EAAC,CAElEC,EAAiB,MAAA,CAAO,IAAA,CAAKF,EAAU,QAAA,EAAY,EAAE,CAAA,CACvDE,CAAAA,CAAe,MAAA,GACjBD,CAAAA,CAAS,QAAU,CACjB,IAAA,CAAM,CAAE,IAAA,CAAM,MAAA,CAAQ,MAAOC,CAAe,CAAA,CAC5C,aAAcF,CAAAA,CAAU,YAAA,EAAc,OACxC,CAAA,CAAA,CAGF,IAAMG,EAAc,MAAA,CAAO,IAAA,CAAKH,EAAU,KAAA,EAAS,EAAE,CAAA,CAQrD,GAPIG,CAAAA,CAAY,MAAA,GACdF,EAAS,IAAA,CAAO,CACd,KAAM,CAAE,IAAA,CAAM,OAAQ,KAAA,CAAOE,CAAY,EACzC,YAAA,CAAcH,CAAAA,CAAU,cAAc,IACxC,CAAA,CAAA,CAGEA,EAAU,YAAA,EAAe,WAAA,CAAgB,CAC3C,IAAMI,EAAe,MAAA,CAAO,OAAA,CAAQN,EAAM,MAAM,CAAA,CAC7C,OAAO,CAAC,EAAGJ,CAAK,CAAA,GAAMD,EAAoBC,CAAK,CAAC,EAChD,GAAA,CAAI,CAAC,CAACW,CAAG,CAAA,GAAMA,CAAG,CAAA,CAEjBD,EAAa,MAAA,GACfH,CAAAA,CAAS,YAAc,CACrB,IAAA,CAAM,CAAE,IAAA,CAAM,MAAA,CAAQ,MAAOG,CAAa,CAAA,CAC1C,aAAcJ,CAAAA,CAAU,YAAA,EAAc,WACxC,CAAA,EAEJ,CAEA,OAAOC,CACT","file":"index.cjs","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import type { ArgTypes } from '@storybook/react'\n\n/**\n * `keyof` alternative which omits non-string keys\n */\ntype KeyOf<T> = [T] extends [never]\n  ? never\n  : T extends object\n    ? Extract<keyof T, string>\n    : never\n\nexport type ThemingArgTypeKey = 'variant' | 'size' | 'colorScheme'\n\n/**\n * Checks if the given color scale object has all required keys: 50, 100, 200...900.\n */\nfunction validateColorScheme(value: object) {\n  const valueKeys = Object.keys(value || {})\n  return [\n    '50',\n    '100',\n    '200',\n    '300',\n    '400',\n    '500',\n    '600',\n    '700',\n    '800',\n    '900',\n  ].every((term) => valueKeys.includes(term))\n}\n\n/**\n * Create Storybook controls based on a Chakra UI theme component.\n *\n * @example\n * export default {\n *   title: \"Components / Forms / Button\",\n *   argTypes: getThemingArgTypes(theme, \"Button\"),\n * }\n *\n * @example full example\n * import { Meta, StoryFn } from \"@storybook/react\"\n * import { getThemingArgTypes } from \"@chakra-ui/storybook-addon\"\n * import { theme } from \"<your-theme>\"\n *\n * export default {\n *   title: \"Components / Forms / Button\",\n *   argTypes: {\n *     ...getThemingArgTypes(theme, \"Button\"),\n *     children: \"string\"\n *   },\n *   args: { children: \"Button\" },\n * } as Meta\n *\n * interface StoryProps extends ThemingProps<\"Button\"> {\n *   children?: React.ReactNode\n * }\n *\n * export const Basic: StoryFn<StoryProps> = (props) => <Button {...props} />\n *\n * @param theme same Chakra UI theme used in .storybook/preview.tsx\n * @param componentName component name to create the ArgTypes for\n */\nexport function getThemingArgTypes<\n  Theme extends {\n    colors: Record<string, any>\n    components: Record<string, any>\n  },\n  ComponentName extends KeyOf<Theme['components']>,\n>(theme: Theme, componentName: ComponentName) {\n  const component = theme.components[componentName]\n  if (!component) {\n    return undefined\n  }\n\n  const argTypes: ArgTypes<Partial<Record<ThemingArgTypeKey, string>>> = {}\n\n  const variantOptions = Object.keys(component.variants || {})\n  if (variantOptions.length) {\n    argTypes.variant = {\n      type: { name: 'enum', value: variantOptions },\n      defaultValue: component.defaultProps?.variant,\n    }\n  }\n\n  const sizeOptions = Object.keys(component.sizes || {})\n  if (sizeOptions.length) {\n    argTypes.size = {\n      type: { name: 'enum', value: sizeOptions },\n      defaultValue: component.defaultProps?.size,\n    }\n  }\n\n  if (component.defaultProps?.['colorScheme']) {\n    const colorSchemes = Object.entries(theme.colors)\n      .filter(([, value]) => validateColorScheme(value))\n      .map(([key]) => key)\n\n    if (colorSchemes.length) {\n      argTypes.colorScheme = {\n        type: { name: 'enum', value: colorSchemes },\n        defaultValue: component.defaultProps?.colorScheme,\n      }\n    }\n  }\n\n  return argTypes\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,3 @@
+export { ADDON_ID, COLOR_MODE_TOOL_ID, DIRECTION_TOOL_ID, EVENTS, THEME_TOOL_ID } from './constants.cjs';
+export { ThemingArgTypeKey, getThemingArgTypes } from './arg-types.cjs';
+import 'storybook/internal/types';

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { ADDON_ID, COLOR_MODE_TOOL_ID, DIRECTION_TOOL_ID, EVENTS, THEME_TOOL_ID } from './constants.js';
+export { ThemingArgTypeKey, getThemingArgTypes } from './arg-types.js';
+import 'storybook/internal/types';

package/dist/index.js

@@ -0,0 +1,2 @@
+var o="@saas-ui/storybook-addon2",p=`${o}/color-mode-tool`,m=`${o}/direction-tool`,T=`${o}/theme-tool`,y={TOGGLE_COLOR_MODE:`${o}/toggleColorMode`,TOGGLE_DIRECTION:`${o}/toggleDirection`,SET_THEME:`${o}/setTheme`};function l(t){let r=Object.keys(t||{});return ["50","100","200","300","400","500","600","700","800","900"].every(e=>r.includes(e))}function O(t,r){let e=t.components[r];if(!e)return;let n={},c=Object.keys(e.variants||{});c.length&&(n.variant={type:{name:"enum",value:c},defaultValue:e.defaultProps?.variant});let a=Object.keys(e.sizes||{});if(a.length&&(n.size={type:{name:"enum",value:a},defaultValue:e.defaultProps?.size}),e.defaultProps?.colorScheme){let i=Object.entries(t.colors).filter(([,s])=>l(s)).map(([s])=>s);i.length&&(n.colorScheme={type:{name:"enum",value:i},defaultValue:e.defaultProps?.colorScheme});}return n}export{o as ADDON_ID,p as COLOR_MODE_TOOL_ID,m as DIRECTION_TOOL_ID,y as EVENTS,T as THEME_TOOL_ID,O as getThemingArgTypes};//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts","../src/arg-types.ts"],"names":["ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","validateColorScheme","value","valueKeys","term","getThemingArgTypes","theme","componentName","component","argTypes","variantOptions","sizeOptions","colorSchemes","key"],"mappings":"AAAO,IAAMA,EAAW,2BAAA,CACXC,CAAAA,CAAqB,GAAGD,CAAQ,CAAA,gBAAA,CAAA,CAChCE,EAAoB,CAAA,EAAGF,CAAQ,kBAC/BG,CAAAA,CAAgB,CAAA,EAAGH,CAAQ,CAAA,WAAA,CAAA,CAE3BI,CAAAA,CAAS,CACpB,iBAAA,CAAmB,CAAA,EAAGJ,CAAQ,CAAA,gBAAA,CAAA,CAC9B,gBAAA,CAAkB,CAAA,EAAGA,CAAQ,mBAC7B,SAAA,CAAW,CAAA,EAAGA,CAAQ,CAAA,SAAA,CACxB,ECOA,SAASK,CAAAA,CAAoBC,CAAAA,CAAe,CAC1C,IAAMC,CAAAA,CAAY,OAAO,IAAA,CAAKD,CAAAA,EAAS,EAAE,CAAA,CACzC,OAAO,CACL,IAAA,CACA,KAAA,CACA,KAAA,CACA,MACA,KAAA,CACA,KAAA,CACA,MACA,KAAA,CACA,KAAA,CACA,KACF,CAAA,CAAE,KAAA,CAAOE,GAASD,CAAAA,CAAU,QAAA,CAASC,CAAI,CAAC,CAC5C,CAkCO,SAASC,CAAAA,CAMdC,EAAcC,CAAAA,CAA8B,CAC5C,IAAMC,CAAAA,CAAYF,EAAM,UAAA,CAAWC,CAAa,EAChD,GAAI,CAACC,EACH,OAGF,IAAMC,EAAiE,EAAC,CAElEC,EAAiB,MAAA,CAAO,IAAA,CAAKF,EAAU,QAAA,EAAY,EAAE,CAAA,CACvDE,CAAAA,CAAe,MAAA,GACjBD,CAAAA,CAAS,QAAU,CACjB,IAAA,CAAM,CAAE,IAAA,CAAM,MAAA,CAAQ,MAAOC,CAAe,CAAA,CAC5C,aAAcF,CAAAA,CAAU,YAAA,EAAc,OACxC,CAAA,CAAA,CAGF,IAAMG,EAAc,MAAA,CAAO,IAAA,CAAKH,EAAU,KAAA,EAAS,EAAE,CAAA,CAQrD,GAPIG,CAAAA,CAAY,MAAA,GACdF,EAAS,IAAA,CAAO,CACd,KAAM,CAAE,IAAA,CAAM,OAAQ,KAAA,CAAOE,CAAY,EACzC,YAAA,CAAcH,CAAAA,CAAU,cAAc,IACxC,CAAA,CAAA,CAGEA,EAAU,YAAA,EAAe,WAAA,CAAgB,CAC3C,IAAMI,EAAe,MAAA,CAAO,OAAA,CAAQN,EAAM,MAAM,CAAA,CAC7C,OAAO,CAAC,EAAGJ,CAAK,CAAA,GAAMD,EAAoBC,CAAK,CAAC,EAChD,GAAA,CAAI,CAAC,CAACW,CAAG,CAAA,GAAMA,CAAG,CAAA,CAEjBD,EAAa,MAAA,GACfH,CAAAA,CAAS,YAAc,CACrB,IAAA,CAAM,CAAE,IAAA,CAAM,MAAA,CAAQ,MAAOG,CAAa,CAAA,CAC1C,aAAcJ,CAAAA,CAAU,YAAA,EAAc,WACxC,CAAA,EAEJ,CAEA,OAAOC,CACT","file":"index.js","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import type { ArgTypes } from '@storybook/react'\n\n/**\n * `keyof` alternative which omits non-string keys\n */\ntype KeyOf<T> = [T] extends [never]\n  ? never\n  : T extends object\n    ? Extract<keyof T, string>\n    : never\n\nexport type ThemingArgTypeKey = 'variant' | 'size' | 'colorScheme'\n\n/**\n * Checks if the given color scale object has all required keys: 50, 100, 200...900.\n */\nfunction validateColorScheme(value: object) {\n  const valueKeys = Object.keys(value || {})\n  return [\n    '50',\n    '100',\n    '200',\n    '300',\n    '400',\n    '500',\n    '600',\n    '700',\n    '800',\n    '900',\n  ].every((term) => valueKeys.includes(term))\n}\n\n/**\n * Create Storybook controls based on a Chakra UI theme component.\n *\n * @example\n * export default {\n *   title: \"Components / Forms / Button\",\n *   argTypes: getThemingArgTypes(theme, \"Button\"),\n * }\n *\n * @example full example\n * import { Meta, StoryFn } from \"@storybook/react\"\n * import { getThemingArgTypes } from \"@chakra-ui/storybook-addon\"\n * import { theme } from \"<your-theme>\"\n *\n * export default {\n *   title: \"Components / Forms / Button\",\n *   argTypes: {\n *     ...getThemingArgTypes(theme, \"Button\"),\n *     children: \"string\"\n *   },\n *   args: { children: \"Button\" },\n * } as Meta\n *\n * interface StoryProps extends ThemingProps<\"Button\"> {\n *   children?: React.ReactNode\n * }\n *\n * export const Basic: StoryFn<StoryProps> = (props) => <Button {...props} />\n *\n * @param theme same Chakra UI theme used in .storybook/preview.tsx\n * @param componentName component name to create the ArgTypes for\n */\nexport function getThemingArgTypes<\n  Theme extends {\n    colors: Record<string, any>\n    components: Record<string, any>\n  },\n  ComponentName extends KeyOf<Theme['components']>,\n>(theme: Theme, componentName: ComponentName) {\n  const component = theme.components[componentName]\n  if (!component) {\n    return undefined\n  }\n\n  const argTypes: ArgTypes<Partial<Record<ThemingArgTypeKey, string>>> = {}\n\n  const variantOptions = Object.keys(component.variants || {})\n  if (variantOptions.length) {\n    argTypes.variant = {\n      type: { name: 'enum', value: variantOptions },\n      defaultValue: component.defaultProps?.variant,\n    }\n  }\n\n  const sizeOptions = Object.keys(component.sizes || {})\n  if (sizeOptions.length) {\n    argTypes.size = {\n      type: { name: 'enum', value: sizeOptions },\n      defaultValue: component.defaultProps?.size,\n    }\n  }\n\n  if (component.defaultProps?.['colorScheme']) {\n    const colorSchemes = Object.entries(theme.colors)\n      .filter(([, value]) => validateColorScheme(value))\n      .map(([key]) => key)\n\n    if (colorSchemes.length) {\n      argTypes.colorScheme = {\n        type: { name: 'enum', value: colorSchemes },\n        defaultValue: component.defaultProps?.colorScheme,\n      }\n    }\n  }\n\n  return argTypes\n}\n"]}

package/dist/manager.cjs

@@ -0,0 +1,2 @@
+'use strict';var managerApi=require('storybook/manager-api'),g=require('react'),components=require('storybook/internal/components'),jsxRuntime=require('react/jsx-runtime'),icons=require('@storybook/icons'),previewApi=require('storybook/preview-api');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var g__namespace=/*#__PURE__*/_interopNamespace(g);var l="@saas-ui/storybook-addon2",T=`${l}/color-mode-tool`,a=`${l}/direction-tool`,O=`${l}/theme-tool`,h={TOGGLE_COLOR_MODE:`${l}/toggleColorMode`,TOGGLE_DIRECTION:`${l}/toggleDirection`,SET_THEME:`${l}/setTheme`};var M=()=>jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsxRuntime.jsx("path",{fill:"currentColor",d:"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z"})}),k=()=>jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsxRuntime.jsxs("g",{strokeLinejoin:"round",strokeLinecap:"round",strokeWidth:"2",fill:"none",stroke:"currentColor",children:[jsxRuntime.jsx("circle",{cx:"12",cy:"12",r:"5"}),jsxRuntime.jsx("path",{d:"M12 1v2"}),jsxRuntime.jsx("path",{d:"M12 21v2"}),jsxRuntime.jsx("path",{d:"M4.22 4.22l1.42 1.42"}),jsxRuntime.jsx("path",{d:"M18.36 18.36l1.42 1.42"}),jsxRuntime.jsx("path",{d:"M1 12h2"}),jsxRuntime.jsx("path",{d:"M21 12h2"}),jsxRuntime.jsx("path",{d:"M4.22 19.78l1.42-1.42"}),jsxRuntime.jsx("path",{d:"M18.36 5.64l1.42-1.42"})]})}),C=()=>{let o=localStorage.getItem("chakra-ui-color-mode")==="dark",[e,c]=g__namespace.useState(o),s=managerApi.addons.getChannel();return jsxRuntime.jsx(components.IconButton,{title:`Set color mode to ${e?"light":"dark"}`,active:e,onClick:()=>{s.emit(h.TOGGLE_COLOR_MODE,e?"light":"dark"),c(r=>!r);},children:e?jsxRuntime.jsx(k,{}):jsxRuntime.jsx(M,{})})};var N=o=>jsxRuntime.jsxs("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"},...o,children:[jsxRuntime.jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsxRuntime.jsx("path",{d:"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z"})]}),y=o=>jsxRuntime.jsxs("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"},...o,children:[jsxRuntime.jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsxRuntime.jsx("path",{d:"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z"})]}),I=()=>{let[o,e]=managerApi.useGlobals(),[c,s]=managerApi.useAddonState(a,o[a]||"ltr"),n=c!=="ltr"?"ltr":"rtl";g.useEffect(()=>{e({[a]:c});},[c,e]);let r=g.useCallback(()=>{managerApi.addons.getChannel().emit(h.TOGGLE_DIRECTION,n),s(n);},[s,n]);return jsxRuntime.jsx(components.IconButton,{active:c==="rtl",title:`Set layout direction to ${n}`,onClick:r,children:n==="ltr"?jsxRuntime.jsx(N,{}):jsxRuntime.jsx(y,{})})};var w={0:"Chakra UI",1:"Saas UI",2:"Glass"},D=()=>{let o=localStorage.getItem("saas-ui-theme"),[e,c]=managerApi.useAddonState(`${l}/theme`,o),s=previewApi.addons.getChannel(),n=r=>{s.emit(h.SET_THEME,r||"1"),c(r);};return jsxRuntime.jsx(components.WithTooltip,{placement:"top",closeOnOutsideClick:true,trigger:"click",tooltip:({onHide:r})=>jsxRuntime.jsx(components.TooltipLinkList,{links:[{id:"0",title:"Chakra UI",onClick:()=>{n("0"),r();}},{id:"1",title:"Saas UI",onClick:()=>{n("1"),r();}},{id:"2",title:"Glass",onClick:()=>{n("2"),r();}}]}),children:jsxRuntime.jsxs(components.IconButton,{title:"Select theme",children:[jsxRuntime.jsx(icons.EyeIcon,{})," ",w[e||"1"]]})})};managerApi.addons.register(l,()=>{let o=({viewMode:e})=>!!(e&&e.match(/^(story|docs)$/));managerApi.addons.add(a,{type:managerApi.types.TOOL,title:"Direction",render:I,match:o}),managerApi.addons.add(T,{type:managerApi.types.TOOL,title:"Color Mode",render:C,match:o}),managerApi.addons.add(O,{type:managerApi.types.TOOL,title:"Theme",render:D,match:o});});//# sourceMappingURL=manager.cjs.map
+//# sourceMappingURL=manager.cjs.map

package/dist/manager.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts","../src/color-mode/ColorModeTool.tsx","../src/direction/DirectionTool.tsx","../src/theme/ThemeTool.tsx","../src/manager.ts"],"names":["ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","MoonIcon","jsx","SunIcon","jsxs","ColorModeTool","isDarkMode","darkMode","setDarkMode","g","channel","addons","IconButton","prev","LTRIcon","props","RTLIcon","DirectionTool","globals","setGlobals","useGlobals","direction","setDirection","useAddonState","targetDirection","useEffect","toggleDirection","useCallback","themes","ThemeTool","themeId","theme","setTheme","setActiveTheme","WithTooltip","onHide","TooltipLinkList","EyeIcon","match","viewMode","types"],"mappings":"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","file":"manager.cjs","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import * as React from 'react'\nimport { IconButton } from 'storybook/internal/components'\nimport { addons } from 'storybook/manager-api'\n\nimport { EVENTS } from '../constants'\n\nconst MoonIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <path\n      fill=\"currentColor\"\n      d=\"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z\"\n    ></path>\n  </svg>\n)\n\nconst SunIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <g\n      strokeLinejoin=\"round\"\n      strokeLinecap=\"round\"\n      strokeWidth=\"2\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"5\"></circle>\n      <path d=\"M12 1v2\"></path>\n      <path d=\"M12 21v2\"></path>\n      <path d=\"M4.22 4.22l1.42 1.42\"></path>\n      <path d=\"M18.36 18.36l1.42 1.42\"></path>\n      <path d=\"M1 12h2\"></path>\n      <path d=\"M21 12h2\"></path>\n      <path d=\"M4.22 19.78l1.42-1.42\"></path>\n      <path d=\"M18.36 5.64l1.42-1.42\"></path>\n    </g>\n  </svg>\n)\n\nexport const ColorModeTool = () => {\n  const isDarkMode = localStorage.getItem('chakra-ui-color-mode') === 'dark'\n\n  const [darkMode, setDarkMode] = React.useState(isDarkMode)\n\n  const channel = addons.getChannel()\n\n  const handleToggle = () => {\n    channel.emit(EVENTS.TOGGLE_COLOR_MODE, !darkMode ? 'dark' : 'light')\n    setDarkMode((prev) => !prev)\n  }\n\n  return (\n    <IconButton\n      title={`Set color mode to ${darkMode ? 'light' : 'dark'}`}\n      active={darkMode}\n      onClick={handleToggle}\n    >\n      {darkMode ? <SunIcon /> : <MoonIcon />}\n    </IconButton>\n  )\n}\n","import { useCallback, useEffect } from 'react'\nimport { IconButton } from 'storybook/internal/components'\nimport { addons, useAddonState, useGlobals } from 'storybook/manager-api'\nimport { DIRECTION_TOOL_ID, EVENTS } from '../constants'\n\nconst LTRIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z\" />\n  </svg>\n)\n\nconst RTLIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z\" />\n  </svg>\n)\n\n/**\n * This component is rendered in the Storybook toolbar\n */\nexport const DirectionTool = () => {\n  const [globals, setGlobals] = useGlobals()\n  const [direction, setDirection] = useAddonState(\n    DIRECTION_TOOL_ID,\n    globals[DIRECTION_TOOL_ID] || 'ltr'\n  )\n  const targetDirection = direction !== 'ltr' ? 'ltr' : 'rtl'\n  useEffect(() => {\n    setGlobals({ [DIRECTION_TOOL_ID]: direction })\n  }, [direction, setGlobals])\n\n  const toggleDirection = useCallback(() => {\n    const channel = addons.getChannel()\n    channel.emit(EVENTS.TOGGLE_DIRECTION, targetDirection)\n    setDirection(targetDirection)\n  }, [setDirection, targetDirection])\n\n  return (\n    <IconButton\n      active={direction === 'rtl'}\n      title={`Set layout direction to ${targetDirection}`}\n      onClick={toggleDirection}\n    >\n      {targetDirection === 'ltr' ? <LTRIcon /> : <RTLIcon />}\n    </IconButton>\n  )\n}\n","import { EyeIcon } from '@storybook/icons'\nimport {\n  IconButton,\n  TooltipLinkList,\n  WithTooltip,\n} from 'storybook/internal/components'\nimport { useAddonState } from 'storybook/manager-api'\nimport { addons } from 'storybook/preview-api'\n\nimport { ADDON_ID, EVENTS } from '../constants'\n\nconst themes: Record<string, string> = {\n  0: 'Chakra UI',\n  1: 'Saas UI',\n  2: 'Glass',\n}\n\n/**\n * This component is rendered in the Storybook toolbar\n */\nexport const ThemeTool = () => {\n  const themeId = localStorage.getItem('saas-ui-theme')\n  const [theme, setTheme] = useAddonState(`${ADDON_ID}/theme`, themeId)\n\n  const channel = addons.getChannel()\n\n  const setActiveTheme = (themeId: string) => {\n    channel.emit(EVENTS.SET_THEME, !themeId ? '1' : themeId)\n    setTheme(themeId)\n  }\n\n  return (\n    <WithTooltip\n      placement=\"top\"\n      closeOnOutsideClick\n      trigger=\"click\"\n      tooltip={({ onHide }) => (\n        <TooltipLinkList\n          links={[\n            {\n              id: '0',\n              title: 'Chakra UI',\n              onClick: () => {\n                setActiveTheme('0')\n                onHide()\n              },\n            },\n            {\n              id: '1',\n              title: 'Saas UI',\n              onClick: () => {\n                setActiveTheme('1')\n                onHide()\n              },\n            },\n            {\n              id: '2',\n              title: 'Glass',\n              onClick: () => {\n                setActiveTheme('2')\n                onHide()\n              },\n            },\n          ]}\n        />\n      )}\n    >\n      <IconButton title=\"Select theme\">\n        <EyeIcon /> {themes[theme || '1']}\n      </IconButton>\n    </WithTooltip>\n  )\n}\n","import { addons, types } from 'storybook/manager-api'\nimport {\n  ADDON_ID,\n  COLOR_MODE_TOOL_ID,\n  DIRECTION_TOOL_ID,\n  THEME_TOOL_ID,\n} from './constants'\nimport { ColorModeTool } from './color-mode/ColorModeTool'\nimport { DirectionTool } from './direction/DirectionTool'\nimport { ThemeTool } from './theme/ThemeTool'\n\naddons.register(ADDON_ID, () => {\n  const match = ({ viewMode }: { viewMode?: string }) =>\n    Boolean(viewMode && viewMode.match(/^(story|docs)$/))\n\n  addons.add(DIRECTION_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Direction',\n    render: DirectionTool,\n    match,\n  })\n\n  addons.add(COLOR_MODE_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Color Mode',\n    render: ColorModeTool,\n    match,\n  })\n\n  addons.add(THEME_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Theme',\n    render: ThemeTool,\n    match,\n  })\n})\n"]}

package/dist/manager.d.cts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/manager.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/manager.js

@@ -0,0 +1,2 @@
+import {addons,types,useGlobals,useAddonState}from'storybook/manager-api';import*as g from'react';import {useEffect,useCallback}from'react';import {IconButton,WithTooltip,TooltipLinkList}from'storybook/internal/components';import {jsx,jsxs}from'react/jsx-runtime';import {EyeIcon}from'@storybook/icons';import {addons as addons$1}from'storybook/preview-api';var l="@saas-ui/storybook-addon2",T=`${l}/color-mode-tool`,a=`${l}/direction-tool`,O=`${l}/theme-tool`,h={TOGGLE_COLOR_MODE:`${l}/toggleColorMode`,TOGGLE_DIRECTION:`${l}/toggleDirection`,SET_THEME:`${l}/setTheme`};var M=()=>jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsx("path",{fill:"currentColor",d:"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z"})}),k=()=>jsx("svg",{viewBox:"0 0 24 24",focusable:"false",children:jsxs("g",{strokeLinejoin:"round",strokeLinecap:"round",strokeWidth:"2",fill:"none",stroke:"currentColor",children:[jsx("circle",{cx:"12",cy:"12",r:"5"}),jsx("path",{d:"M12 1v2"}),jsx("path",{d:"M12 21v2"}),jsx("path",{d:"M4.22 4.22l1.42 1.42"}),jsx("path",{d:"M18.36 18.36l1.42 1.42"}),jsx("path",{d:"M1 12h2"}),jsx("path",{d:"M21 12h2"}),jsx("path",{d:"M4.22 19.78l1.42-1.42"}),jsx("path",{d:"M18.36 5.64l1.42-1.42"})]})}),C=()=>{let o=localStorage.getItem("chakra-ui-color-mode")==="dark",[e,c]=g.useState(o),s=addons.getChannel();return jsx(IconButton,{title:`Set color mode to ${e?"light":"dark"}`,active:e,onClick:()=>{s.emit(h.TOGGLE_COLOR_MODE,e?"light":"dark"),c(r=>!r);},children:e?jsx(k,{}):jsx(M,{})})};var N=o=>jsxs("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"},...o,children:[jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsx("path",{d:"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z"})]}),y=o=>jsxs("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"},...o,children:[jsx("path",{fill:"none",d:"M0 0h24v24H0V0z"}),jsx("path",{d:"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z"})]}),I=()=>{let[o,e]=useGlobals(),[c,s]=useAddonState(a,o[a]||"ltr"),n=c!=="ltr"?"ltr":"rtl";useEffect(()=>{e({[a]:c});},[c,e]);let r=useCallback(()=>{addons.getChannel().emit(h.TOGGLE_DIRECTION,n),s(n);},[s,n]);return jsx(IconButton,{active:c==="rtl",title:`Set layout direction to ${n}`,onClick:r,children:n==="ltr"?jsx(N,{}):jsx(y,{})})};var w={0:"Chakra UI",1:"Saas UI",2:"Glass"},D=()=>{let o=localStorage.getItem("saas-ui-theme"),[e,c]=useAddonState(`${l}/theme`,o),s=addons$1.getChannel(),n=r=>{s.emit(h.SET_THEME,r||"1"),c(r);};return jsx(WithTooltip,{placement:"top",closeOnOutsideClick:true,trigger:"click",tooltip:({onHide:r})=>jsx(TooltipLinkList,{links:[{id:"0",title:"Chakra UI",onClick:()=>{n("0"),r();}},{id:"1",title:"Saas UI",onClick:()=>{n("1"),r();}},{id:"2",title:"Glass",onClick:()=>{n("2"),r();}}]}),children:jsxs(IconButton,{title:"Select theme",children:[jsx(EyeIcon,{})," ",w[e||"1"]]})})};addons.register(l,()=>{let o=({viewMode:e})=>!!(e&&e.match(/^(story|docs)$/));addons.add(a,{type:types.TOOL,title:"Direction",render:I,match:o}),addons.add(T,{type:types.TOOL,title:"Color Mode",render:C,match:o}),addons.add(O,{type:types.TOOL,title:"Theme",render:D,match:o});});//# sourceMappingURL=manager.js.map
+//# sourceMappingURL=manager.js.map

package/dist/manager.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts","../src/color-mode/ColorModeTool.tsx","../src/direction/DirectionTool.tsx","../src/theme/ThemeTool.tsx","../src/manager.ts"],"names":["ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","MoonIcon","jsx","SunIcon","jsxs","ColorModeTool","isDarkMode","darkMode","setDarkMode","channel","addons","IconButton","prev","LTRIcon","props","RTLIcon","DirectionTool","globals","setGlobals","useGlobals","direction","setDirection","useAddonState","targetDirection","useEffect","toggleDirection","useCallback","themes","ThemeTool","themeId","theme","setTheme","setActiveTheme","WithTooltip","onHide","TooltipLinkList","EyeIcon","match","viewMode","types"],"mappings":"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","file":"manager.js","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import * as React from 'react'\nimport { IconButton } from 'storybook/internal/components'\nimport { addons } from 'storybook/manager-api'\n\nimport { EVENTS } from '../constants'\n\nconst MoonIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <path\n      fill=\"currentColor\"\n      d=\"M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z\"\n    ></path>\n  </svg>\n)\n\nconst SunIcon = () => (\n  <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n    <g\n      strokeLinejoin=\"round\"\n      strokeLinecap=\"round\"\n      strokeWidth=\"2\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"5\"></circle>\n      <path d=\"M12 1v2\"></path>\n      <path d=\"M12 21v2\"></path>\n      <path d=\"M4.22 4.22l1.42 1.42\"></path>\n      <path d=\"M18.36 18.36l1.42 1.42\"></path>\n      <path d=\"M1 12h2\"></path>\n      <path d=\"M21 12h2\"></path>\n      <path d=\"M4.22 19.78l1.42-1.42\"></path>\n      <path d=\"M18.36 5.64l1.42-1.42\"></path>\n    </g>\n  </svg>\n)\n\nexport const ColorModeTool = () => {\n  const isDarkMode = localStorage.getItem('chakra-ui-color-mode') === 'dark'\n\n  const [darkMode, setDarkMode] = React.useState(isDarkMode)\n\n  const channel = addons.getChannel()\n\n  const handleToggle = () => {\n    channel.emit(EVENTS.TOGGLE_COLOR_MODE, !darkMode ? 'dark' : 'light')\n    setDarkMode((prev) => !prev)\n  }\n\n  return (\n    <IconButton\n      title={`Set color mode to ${darkMode ? 'light' : 'dark'}`}\n      active={darkMode}\n      onClick={handleToggle}\n    >\n      {darkMode ? <SunIcon /> : <MoonIcon />}\n    </IconButton>\n  )\n}\n","import { useCallback, useEffect } from 'react'\nimport { IconButton } from 'storybook/internal/components'\nimport { addons, useAddonState, useGlobals } from 'storybook/manager-api'\nimport { DIRECTION_TOOL_ID, EVENTS } from '../constants'\n\nconst LTRIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z\" />\n  </svg>\n)\n\nconst RTLIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    stroke=\"currentColor\"\n    fill=\"currentColor\"\n    strokeWidth=\"0\"\n    viewBox=\"0 0 24 24\"\n    height=\"1em\"\n    width=\"1em\"\n    style={{\n      transform: 'scale(1.2)',\n    }}\n    {...props}\n  >\n    <path fill=\"none\" d=\"M0 0h24v24H0V0z\" />\n    <path d=\"M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z\" />\n  </svg>\n)\n\n/**\n * This component is rendered in the Storybook toolbar\n */\nexport const DirectionTool = () => {\n  const [globals, setGlobals] = useGlobals()\n  const [direction, setDirection] = useAddonState(\n    DIRECTION_TOOL_ID,\n    globals[DIRECTION_TOOL_ID] || 'ltr'\n  )\n  const targetDirection = direction !== 'ltr' ? 'ltr' : 'rtl'\n  useEffect(() => {\n    setGlobals({ [DIRECTION_TOOL_ID]: direction })\n  }, [direction, setGlobals])\n\n  const toggleDirection = useCallback(() => {\n    const channel = addons.getChannel()\n    channel.emit(EVENTS.TOGGLE_DIRECTION, targetDirection)\n    setDirection(targetDirection)\n  }, [setDirection, targetDirection])\n\n  return (\n    <IconButton\n      active={direction === 'rtl'}\n      title={`Set layout direction to ${targetDirection}`}\n      onClick={toggleDirection}\n    >\n      {targetDirection === 'ltr' ? <LTRIcon /> : <RTLIcon />}\n    </IconButton>\n  )\n}\n","import { EyeIcon } from '@storybook/icons'\nimport {\n  IconButton,\n  TooltipLinkList,\n  WithTooltip,\n} from 'storybook/internal/components'\nimport { useAddonState } from 'storybook/manager-api'\nimport { addons } from 'storybook/preview-api'\n\nimport { ADDON_ID, EVENTS } from '../constants'\n\nconst themes: Record<string, string> = {\n  0: 'Chakra UI',\n  1: 'Saas UI',\n  2: 'Glass',\n}\n\n/**\n * This component is rendered in the Storybook toolbar\n */\nexport const ThemeTool = () => {\n  const themeId = localStorage.getItem('saas-ui-theme')\n  const [theme, setTheme] = useAddonState(`${ADDON_ID}/theme`, themeId)\n\n  const channel = addons.getChannel()\n\n  const setActiveTheme = (themeId: string) => {\n    channel.emit(EVENTS.SET_THEME, !themeId ? '1' : themeId)\n    setTheme(themeId)\n  }\n\n  return (\n    <WithTooltip\n      placement=\"top\"\n      closeOnOutsideClick\n      trigger=\"click\"\n      tooltip={({ onHide }) => (\n        <TooltipLinkList\n          links={[\n            {\n              id: '0',\n              title: 'Chakra UI',\n              onClick: () => {\n                setActiveTheme('0')\n                onHide()\n              },\n            },\n            {\n              id: '1',\n              title: 'Saas UI',\n              onClick: () => {\n                setActiveTheme('1')\n                onHide()\n              },\n            },\n            {\n              id: '2',\n              title: 'Glass',\n              onClick: () => {\n                setActiveTheme('2')\n                onHide()\n              },\n            },\n          ]}\n        />\n      )}\n    >\n      <IconButton title=\"Select theme\">\n        <EyeIcon /> {themes[theme || '1']}\n      </IconButton>\n    </WithTooltip>\n  )\n}\n","import { addons, types } from 'storybook/manager-api'\nimport {\n  ADDON_ID,\n  COLOR_MODE_TOOL_ID,\n  DIRECTION_TOOL_ID,\n  THEME_TOOL_ID,\n} from './constants'\nimport { ColorModeTool } from './color-mode/ColorModeTool'\nimport { DirectionTool } from './direction/DirectionTool'\nimport { ThemeTool } from './theme/ThemeTool'\n\naddons.register(ADDON_ID, () => {\n  const match = ({ viewMode }: { viewMode?: string }) =>\n    Boolean(viewMode && viewMode.match(/^(story|docs)$/))\n\n  addons.add(DIRECTION_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Direction',\n    render: DirectionTool,\n    match,\n  })\n\n  addons.add(COLOR_MODE_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Color Mode',\n    render: ColorModeTool,\n    match,\n  })\n\n  addons.add(THEME_TOOL_ID, {\n    type: types.TOOL,\n    title: 'Theme',\n    render: ThemeTool,\n    match,\n  })\n})\n"]}

package/dist/preview.cjs

@@ -0,0 +1,2 @@
+'use strict';var m=require('react'),react=require('@chakra-ui/react'),chakraPreset=require('@saas-ui/chakra-preset'),previewApi=require('storybook/preview-api'),jsxRuntime=require('react/jsx-runtime');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var m__namespace=/*#__PURE__*/_interopNamespace(m);var a="@saas-ui/storybook-addon2",i=`${a}/direction-tool`,n={TOGGLE_COLOR_MODE:`${a}/toggleColorMode`,TOGGLE_DIRECTION:`${a}/toggleDirection`,SET_THEME:`${a}/setTheme`};function l(){return m.useEffect(()=>{let o=previewApi.addons.getChannel(),t=e=>{let r=e==="dark";document.documentElement.classList.toggle("dark",r),document.documentElement.style.colorScheme=r?"dark":"light";};return o.on(n.TOGGLE_COLOR_MODE,t),()=>{o.removeListener(n.TOGGLE_COLOR_MODE,t);}},[]),null}var E=(o="ltr")=>{let[t,e]=m.useState(o.toLowerCase());return m.useEffect(()=>{document.documentElement.dir=t;},[t]),m.useEffect(()=>{let r=previewApi.addons.getChannel(),s=c=>e(c);return r.on(n.TOGGLE_DIRECTION,s),()=>{r.removeListener(n.TOGGLE_DIRECTION,s);}},[e]),t};function f(o){return typeof o=="object"&&o!==null&&"css"in o&&"token"in o}function I(){let[o,t]=m__namespace.useState(()=>typeof window>"u"?"1":window.localStorage.getItem("storybook.theme")??"1");return m__namespace.useEffect(()=>{let e=previewApi.addons.getChannel(),r=s=>{window.localStorage.setItem("storybook.theme",s),t(s);};return e.on(n.SET_THEME,r),()=>e.removeListener(n.SET_THEME,r)},[]),o}var p=previewApi.makeDecorator({name:"ChakraProviderDecorator",parameterName:"chakra",skipIfNoParametersOrOptions:false,wrapper:(o,t)=>{let{parameters:{saasui:e={}},globals:{[i]:r}}=t;I(),E(r==="rtl"?"rtl":"ltr");let s=typeof e.system=="function"?e.system(t):e.system,c=typeof e.theme=="function"?e.theme(t):e.theme,u=f(s)?s:f(c)?c:chakraPreset.defaultSystem,O=o(t);return jsxRuntime.jsxs(react.ChakraProvider,{value:u,children:[jsxRuntime.jsx(l,{}),O]})}});var R={decorators:[p]},U=R;module.exports=U;//# sourceMappingURL=preview.cjs.map
+//# sourceMappingURL=preview.cjs.map

package/dist/preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts","../src/color-mode/ColorModeSync.tsx","../src/direction/useDirection.tsx","../src/ChakraProviderDecorator.tsx","../src/preview.ts"],"names":["ADDON_ID","DIRECTION_TOOL_ID","EVENTS","ColorModeSync","useEffect","channel","addons","colorModeToolCallback","value","dark","useDirection","initialDirection","direction","setDirection","useState","callback","isSystemContext","useThemeSync","themeId","setThemeId","m","setTheme","ChakraProviderDecorator","makeDecorator","getStory","context","saasuiParams","globalDirection","configuredSystem","legacyTheme","system","defaultSystem","story","jsxs","ChakraProvider","jsx","preview","preview_default"],"mappings":"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","file":"preview.cjs","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import { useEffect } from 'react'\n\nimport { addons } from 'storybook/preview-api'\n\nimport { EVENTS } from '../constants'\n\n/**\n * Render <ColorModeSync /> to sync the storybook color mode with Chakra UI\n */\nexport function ColorModeSync() {\n  useEffect(() => {\n    const channel = addons.getChannel()\n\n    const colorModeToolCallback = (value: string) => {\n      const dark = value === 'dark'\n      document.documentElement.classList.toggle('dark', dark)\n      document.documentElement.style.colorScheme = dark ? 'dark' : 'light'\n    }\n    channel.on(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback)\n\n    return () => {\n      channel.removeListener(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback)\n    }\n  }, [])\n\n  return null\n}\n","import { useEffect, useState } from 'react'\nimport { addons } from 'storybook/preview-api'\nimport { EVENTS } from '../constants'\n\n/**\n * Sync the layout direction to the html element\n */\nexport const useDirection = (initialDirection: 'ltr' | 'rtl' = 'ltr') => {\n  const [direction, setDirection] = useState(initialDirection.toLowerCase())\n\n  useEffect(() => {\n    document.documentElement.dir = direction\n  }, [direction])\n\n  useEffect(() => {\n    const channel = addons.getChannel()\n    const callback = (value: string) => setDirection(value)\n    channel.on(EVENTS.TOGGLE_DIRECTION, callback)\n    return () => {\n      channel.removeListener(EVENTS.TOGGLE_DIRECTION, callback)\n    }\n  }, [setDirection])\n\n  return direction\n}\n","import * as React from 'react'\n\nimport { ChakraProvider } from '@chakra-ui/react'\nimport { defaultSystem } from '@saas-ui/chakra-preset'\nimport { addons, makeDecorator } from 'storybook/preview-api'\n\nimport { ColorModeSync } from './color-mode/ColorModeSync'\nimport { DIRECTION_TOOL_ID, EVENTS } from './constants'\nimport { useDirection } from './direction/useDirection'\n\nfunction isSystemContext(value: unknown): value is typeof defaultSystem {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    'css' in value &&\n    'token' in value\n  )\n}\n\nfunction useThemeSync() {\n  const [themeId, setThemeId] = React.useState(() => {\n    if (typeof window === 'undefined') return '1'\n    return window.localStorage.getItem('storybook.theme') ?? '1'\n  })\n\n  React.useEffect(() => {\n    const channel = addons.getChannel()\n    const setTheme = (value: string) => {\n      window.localStorage.setItem('storybook.theme', value)\n      setThemeId(value)\n    }\n    channel.on(EVENTS.SET_THEME, setTheme)\n    return () => channel.removeListener(EVENTS.SET_THEME, setTheme)\n  }, [])\n\n  return themeId\n}\n\n/**\n * Chakra v3 decorator backed by the published Saas UI preset.\n *\n * `parameters.saasui.system` is the preferred custom-system override. For\n * compatibility, `parameters.saasui.theme` is also accepted when it is a\n * Chakra v3 SystemContext or a function returning one.\n */\nexport const ChakraProviderDecorator = makeDecorator({\n  name: 'ChakraProviderDecorator',\n  parameterName: 'chakra',\n  skipIfNoParametersOrOptions: false,\n  wrapper: (getStory, context) => {\n    const {\n      parameters: { saasui: saasuiParams = {} },\n      globals: { [DIRECTION_TOOL_ID]: globalDirection },\n    } = context\n\n    useThemeSync()\n    useDirection(globalDirection === 'rtl' ? 'rtl' : 'ltr')\n\n    const configuredSystem =\n      typeof saasuiParams.system === 'function'\n        ? saasuiParams.system(context)\n        : saasuiParams.system\n    const legacyTheme =\n      typeof saasuiParams.theme === 'function'\n        ? saasuiParams.theme(context)\n        : saasuiParams.theme\n    const system = isSystemContext(configuredSystem)\n      ? configuredSystem\n      : isSystemContext(legacyTheme)\n        ? legacyTheme\n        : defaultSystem\n    const story = getStory(context) as React.ReactNode\n\n    return (\n      <ChakraProvider value={system}>\n        <ColorModeSync />\n        {story}\n      </ChakraProvider>\n    )\n  },\n})\n","import type { ProjectAnnotations, Renderer } from 'storybook/internal/types'\n\nimport { ChakraProviderDecorator } from './ChakraProviderDecorator'\n\nconst preview: ProjectAnnotations<Renderer> = {\n  decorators: [ChakraProviderDecorator],\n}\n\nexport default preview\n"]}

package/dist/preview.d.cts

@@ -0,0 +1,5 @@
+import { ProjectAnnotations, Renderer } from 'storybook/internal/types';
+
+declare const preview: ProjectAnnotations<Renderer>;
+
+export { preview as default };

package/dist/preview.d.ts

@@ -0,0 +1,5 @@
+import { ProjectAnnotations, Renderer } from 'storybook/internal/types';
+
+declare const preview: ProjectAnnotations<Renderer>;
+
+export { preview as default };

package/dist/preview.js

@@ -0,0 +1,2 @@
+import*as m from'react';import {useState,useEffect}from'react';import {ChakraProvider}from'@chakra-ui/react';import {defaultSystem}from'@saas-ui/chakra-preset';import {makeDecorator,addons}from'storybook/preview-api';import {jsxs,jsx}from'react/jsx-runtime';var a="@saas-ui/storybook-addon2",i=`${a}/direction-tool`,n={TOGGLE_COLOR_MODE:`${a}/toggleColorMode`,TOGGLE_DIRECTION:`${a}/toggleDirection`,SET_THEME:`${a}/setTheme`};function l(){return useEffect(()=>{let o=addons.getChannel(),t=e=>{let r=e==="dark";document.documentElement.classList.toggle("dark",r),document.documentElement.style.colorScheme=r?"dark":"light";};return o.on(n.TOGGLE_COLOR_MODE,t),()=>{o.removeListener(n.TOGGLE_COLOR_MODE,t);}},[]),null}var E=(o="ltr")=>{let[t,e]=useState(o.toLowerCase());return useEffect(()=>{document.documentElement.dir=t;},[t]),useEffect(()=>{let r=addons.getChannel(),s=c=>e(c);return r.on(n.TOGGLE_DIRECTION,s),()=>{r.removeListener(n.TOGGLE_DIRECTION,s);}},[e]),t};function f(o){return typeof o=="object"&&o!==null&&"css"in o&&"token"in o}function I(){let[o,t]=m.useState(()=>typeof window>"u"?"1":window.localStorage.getItem("storybook.theme")??"1");return m.useEffect(()=>{let e=addons.getChannel(),r=s=>{window.localStorage.setItem("storybook.theme",s),t(s);};return e.on(n.SET_THEME,r),()=>e.removeListener(n.SET_THEME,r)},[]),o}var p=makeDecorator({name:"ChakraProviderDecorator",parameterName:"chakra",skipIfNoParametersOrOptions:false,wrapper:(o,t)=>{let{parameters:{saasui:e={}},globals:{[i]:r}}=t;I(),E(r==="rtl"?"rtl":"ltr");let s=typeof e.system=="function"?e.system(t):e.system,c=typeof e.theme=="function"?e.theme(t):e.theme,u=f(s)?s:f(c)?c:defaultSystem,O=o(t);return jsxs(ChakraProvider,{value:u,children:[jsx(l,{}),O]})}});var R={decorators:[p]},U=R;export{U as default};//# sourceMappingURL=preview.js.map
+//# sourceMappingURL=preview.js.map

package/dist/preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts","../src/color-mode/ColorModeSync.tsx","../src/direction/useDirection.tsx","../src/ChakraProviderDecorator.tsx","../src/preview.ts"],"names":["ADDON_ID","DIRECTION_TOOL_ID","EVENTS","ColorModeSync","useEffect","channel","addons","colorModeToolCallback","value","dark","useDirection","initialDirection","direction","setDirection","useState","callback","isSystemContext","useThemeSync","themeId","setThemeId","setTheme","ChakraProviderDecorator","makeDecorator","getStory","context","saasuiParams","globalDirection","configuredSystem","legacyTheme","system","defaultSystem","story","jsxs","ChakraProvider","jsx","preview","preview_default"],"mappings":"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","file":"preview.js","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import { useEffect } from 'react'\n\nimport { addons } from 'storybook/preview-api'\n\nimport { EVENTS } from '../constants'\n\n/**\n * Render <ColorModeSync /> to sync the storybook color mode with Chakra UI\n */\nexport function ColorModeSync() {\n  useEffect(() => {\n    const channel = addons.getChannel()\n\n    const colorModeToolCallback = (value: string) => {\n      const dark = value === 'dark'\n      document.documentElement.classList.toggle('dark', dark)\n      document.documentElement.style.colorScheme = dark ? 'dark' : 'light'\n    }\n    channel.on(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback)\n\n    return () => {\n      channel.removeListener(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback)\n    }\n  }, [])\n\n  return null\n}\n","import { useEffect, useState } from 'react'\nimport { addons } from 'storybook/preview-api'\nimport { EVENTS } from '../constants'\n\n/**\n * Sync the layout direction to the html element\n */\nexport const useDirection = (initialDirection: 'ltr' | 'rtl' = 'ltr') => {\n  const [direction, setDirection] = useState(initialDirection.toLowerCase())\n\n  useEffect(() => {\n    document.documentElement.dir = direction\n  }, [direction])\n\n  useEffect(() => {\n    const channel = addons.getChannel()\n    const callback = (value: string) => setDirection(value)\n    channel.on(EVENTS.TOGGLE_DIRECTION, callback)\n    return () => {\n      channel.removeListener(EVENTS.TOGGLE_DIRECTION, callback)\n    }\n  }, [setDirection])\n\n  return direction\n}\n","import * as React from 'react'\n\nimport { ChakraProvider } from '@chakra-ui/react'\nimport { defaultSystem } from '@saas-ui/chakra-preset'\nimport { addons, makeDecorator } from 'storybook/preview-api'\n\nimport { ColorModeSync } from './color-mode/ColorModeSync'\nimport { DIRECTION_TOOL_ID, EVENTS } from './constants'\nimport { useDirection } from './direction/useDirection'\n\nfunction isSystemContext(value: unknown): value is typeof defaultSystem {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    'css' in value &&\n    'token' in value\n  )\n}\n\nfunction useThemeSync() {\n  const [themeId, setThemeId] = React.useState(() => {\n    if (typeof window === 'undefined') return '1'\n    return window.localStorage.getItem('storybook.theme') ?? '1'\n  })\n\n  React.useEffect(() => {\n    const channel = addons.getChannel()\n    const setTheme = (value: string) => {\n      window.localStorage.setItem('storybook.theme', value)\n      setThemeId(value)\n    }\n    channel.on(EVENTS.SET_THEME, setTheme)\n    return () => channel.removeListener(EVENTS.SET_THEME, setTheme)\n  }, [])\n\n  return themeId\n}\n\n/**\n * Chakra v3 decorator backed by the published Saas UI preset.\n *\n * `parameters.saasui.system` is the preferred custom-system override. For\n * compatibility, `parameters.saasui.theme` is also accepted when it is a\n * Chakra v3 SystemContext or a function returning one.\n */\nexport const ChakraProviderDecorator = makeDecorator({\n  name: 'ChakraProviderDecorator',\n  parameterName: 'chakra',\n  skipIfNoParametersOrOptions: false,\n  wrapper: (getStory, context) => {\n    const {\n      parameters: { saasui: saasuiParams = {} },\n      globals: { [DIRECTION_TOOL_ID]: globalDirection },\n    } = context\n\n    useThemeSync()\n    useDirection(globalDirection === 'rtl' ? 'rtl' : 'ltr')\n\n    const configuredSystem =\n      typeof saasuiParams.system === 'function'\n        ? saasuiParams.system(context)\n        : saasuiParams.system\n    const legacyTheme =\n      typeof saasuiParams.theme === 'function'\n        ? saasuiParams.theme(context)\n        : saasuiParams.theme\n    const system = isSystemContext(configuredSystem)\n      ? configuredSystem\n      : isSystemContext(legacyTheme)\n        ? legacyTheme\n        : defaultSystem\n    const story = getStory(context) as React.ReactNode\n\n    return (\n      <ChakraProvider value={system}>\n        <ColorModeSync />\n        {story}\n      </ChakraProvider>\n    )\n  },\n})\n","import type { ProjectAnnotations, Renderer } from 'storybook/internal/types'\n\nimport { ChakraProviderDecorator } from './ChakraProviderDecorator'\n\nconst preview: ProjectAnnotations<Renderer> = {\n  decorators: [ChakraProviderDecorator],\n}\n\nexport default preview\n"]}

package/dist/theme/ThemeTool.cjs

@@ -0,0 +1,2 @@
+'use strict';var icons=require('@storybook/icons'),components=require('storybook/internal/components'),managerApi=require('storybook/manager-api'),previewApi=require('storybook/preview-api'),jsxRuntime=require('react/jsx-runtime');var t="@saas-ui/storybook-addon2",s={SET_THEME:`${t}/setTheme`};var I={0:"Chakra UI",1:"Saas UI",2:"Glass"},u=()=>{let n=localStorage.getItem("saas-ui-theme"),[l,r]=managerApi.useAddonState(`${t}/theme`,n),c=previewApi.addons.getChannel(),e=o=>{c.emit(s.SET_THEME,o||"1"),r(o);};return jsxRuntime.jsx(components.WithTooltip,{placement:"top",closeOnOutsideClick:true,trigger:"click",tooltip:({onHide:o})=>jsxRuntime.jsx(components.TooltipLinkList,{links:[{id:"0",title:"Chakra UI",onClick:()=>{e("0"),o();}},{id:"1",title:"Saas UI",onClick:()=>{e("1"),o();}},{id:"2",title:"Glass",onClick:()=>{e("2"),o();}}]}),children:jsxRuntime.jsxs(components.IconButton,{title:"Select theme",children:[jsxRuntime.jsx(icons.EyeIcon,{})," ",I[l||"1"]]})})};exports.ThemeTool=u;//# sourceMappingURL=ThemeTool.cjs.map
+//# sourceMappingURL=ThemeTool.cjs.map

package/dist/theme/ThemeTool.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/constants.ts","../../src/theme/ThemeTool.tsx"],"names":["ADDON_ID","EVENTS","themes","ThemeTool","themeId","theme","setTheme","useAddonState","channel","addons","setActiveTheme","jsx","WithTooltip","onHide","TooltipLinkList","jsxs","IconButton","EyeIcon"],"mappings":"uOAAO,IAAMA,CAAAA,CAAW,4BAKXC,CAAAA,CAAS,CAGpB,SAAA,CAAW,GAAGD,CAAQ,CAAA,SAAA,CACxB,MCEME,CAAAA,CAAiC,CACrC,EAAG,WAAA,CACH,CAAA,CAAG,UACH,CAAA,CAAG,OACL,EAKaC,CAAAA,CAAY,IAAM,CAC7B,IAAMC,CAAAA,CAAU,aAAa,OAAA,CAAQ,eAAe,EAC9C,CAACC,CAAAA,CAAOC,CAAQ,CAAA,CAAIC,wBAAAA,CAAc,GAAGP,CAAQ,CAAA,MAAA,CAAA,CAAUI,CAAO,CAAA,CAE9DI,CAAAA,CAAUC,kBAAO,UAAA,EAAW,CAE5BC,EAAkBN,CAAAA,EAAoB,CAC1CI,EAAQ,IAAA,CAAKP,CAAAA,CAAO,SAAA,CAAYG,CAAAA,EAAU,GAAa,CAAA,CACvDE,CAAAA,CAASF,CAAO,EAClB,CAAA,CAEA,OACEO,cAAAA,CAACC,sBAAAA,CAAA,CACC,SAAA,CAAU,KAAA,CACV,oBAAmB,IAAA,CACnB,OAAA,CAAQ,QACR,OAAA,CAAS,CAAC,CAAE,MAAA,CAAAC,CAAO,IACjBF,cAAAA,CAACG,0BAAAA,CAAA,CACC,KAAA,CAAO,CACL,CACE,EAAA,CAAI,GAAA,CACJ,MAAO,WAAA,CACP,OAAA,CAAS,IAAM,CACbJ,CAAAA,CAAe,GAAG,CAAA,CAClBG,CAAAA,GACF,CACF,CAAA,CACA,CACE,EAAA,CAAI,GAAA,CACJ,MAAO,SAAA,CACP,OAAA,CAAS,IAAM,CACbH,CAAAA,CAAe,GAAG,CAAA,CAClBG,CAAAA,GACF,CACF,CAAA,CACA,CACE,EAAA,CAAI,GAAA,CACJ,MAAO,OAAA,CACP,OAAA,CAAS,IAAM,CACbH,CAAAA,CAAe,GAAG,CAAA,CAClBG,CAAAA,GACF,CACF,CACF,EACF,CAAA,CAGF,QAAA,CAAAE,gBAACC,qBAAAA,CAAA,CAAW,MAAM,cAAA,CAChB,QAAA,CAAA,CAAAL,eAACM,aAAAA,CAAA,EAAQ,EAAE,GAAA,CAAEf,CAAAA,CAAOG,GAAS,GAAG,CAAA,CAAA,CAClC,EACF,CAEJ","file":"ThemeTool.cjs","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import { EyeIcon } from '@storybook/icons'\nimport {\n  IconButton,\n  TooltipLinkList,\n  WithTooltip,\n} from 'storybook/internal/components'\nimport { useAddonState } from 'storybook/manager-api'\nimport { addons } from 'storybook/preview-api'\n\nimport { ADDON_ID, EVENTS } from '../constants'\n\nconst themes: Record<string, string> = {\n  0: 'Chakra UI',\n  1: 'Saas UI',\n  2: 'Glass',\n}\n\n/**\n * This component is rendered in the Storybook toolbar\n */\nexport const ThemeTool = () => {\n  const themeId = localStorage.getItem('saas-ui-theme')\n  const [theme, setTheme] = useAddonState(`${ADDON_ID}/theme`, themeId)\n\n  const channel = addons.getChannel()\n\n  const setActiveTheme = (themeId: string) => {\n    channel.emit(EVENTS.SET_THEME, !themeId ? '1' : themeId)\n    setTheme(themeId)\n  }\n\n  return (\n    <WithTooltip\n      placement=\"top\"\n      closeOnOutsideClick\n      trigger=\"click\"\n      tooltip={({ onHide }) => (\n        <TooltipLinkList\n          links={[\n            {\n              id: '0',\n              title: 'Chakra UI',\n              onClick: () => {\n                setActiveTheme('0')\n                onHide()\n              },\n            },\n            {\n              id: '1',\n              title: 'Saas UI',\n              onClick: () => {\n                setActiveTheme('1')\n                onHide()\n              },\n            },\n            {\n              id: '2',\n              title: 'Glass',\n              onClick: () => {\n                setActiveTheme('2')\n                onHide()\n              },\n            },\n          ]}\n        />\n      )}\n    >\n      <IconButton title=\"Select theme\">\n        <EyeIcon /> {themes[theme || '1']}\n      </IconButton>\n    </WithTooltip>\n  )\n}\n"]}

package/dist/theme/ThemeTool.d.cts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * This component is rendered in the Storybook toolbar
+ */
+declare const ThemeTool: () => react_jsx_runtime.JSX.Element;
+
+export { ThemeTool };

package/dist/theme/ThemeTool.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * This component is rendered in the Storybook toolbar
+ */
+declare const ThemeTool: () => react_jsx_runtime.JSX.Element;
+
+export { ThemeTool };

package/dist/theme/ThemeTool.js

@@ -0,0 +1,2 @@
+import {EyeIcon}from'@storybook/icons';import {WithTooltip,IconButton,TooltipLinkList}from'storybook/internal/components';import {useAddonState}from'storybook/manager-api';import {addons}from'storybook/preview-api';import {jsx,jsxs}from'react/jsx-runtime';var t="@saas-ui/storybook-addon2",s={SET_THEME:`${t}/setTheme`};var I={0:"Chakra UI",1:"Saas UI",2:"Glass"},u=()=>{let n=localStorage.getItem("saas-ui-theme"),[l,r]=useAddonState(`${t}/theme`,n),c=addons.getChannel(),e=o=>{c.emit(s.SET_THEME,o||"1"),r(o);};return jsx(WithTooltip,{placement:"top",closeOnOutsideClick:true,trigger:"click",tooltip:({onHide:o})=>jsx(TooltipLinkList,{links:[{id:"0",title:"Chakra UI",onClick:()=>{e("0"),o();}},{id:"1",title:"Saas UI",onClick:()=>{e("1"),o();}},{id:"2",title:"Glass",onClick:()=>{e("2"),o();}}]}),children:jsxs(IconButton,{title:"Select theme",children:[jsx(EyeIcon,{})," ",I[l||"1"]]})})};export{u as ThemeTool};//# sourceMappingURL=ThemeTool.js.map
+//# sourceMappingURL=ThemeTool.js.map

package/dist/theme/ThemeTool.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/constants.ts","../../src/theme/ThemeTool.tsx"],"names":["ADDON_ID","EVENTS","themes","ThemeTool","themeId","theme","setTheme","useAddonState","channel","addons","setActiveTheme","jsx","WithTooltip","onHide","TooltipLinkList","jsxs","IconButton","EyeIcon"],"mappings":"gQAAO,IAAMA,CAAAA,CAAW,4BAKXC,CAAAA,CAAS,CAGpB,SAAA,CAAW,GAAGD,CAAQ,CAAA,SAAA,CACxB,MCEME,CAAAA,CAAiC,CACrC,EAAG,WAAA,CACH,CAAA,CAAG,UACH,CAAA,CAAG,OACL,EAKaC,CAAAA,CAAY,IAAM,CAC7B,IAAMC,CAAAA,CAAU,aAAa,OAAA,CAAQ,eAAe,EAC9C,CAACC,CAAAA,CAAOC,CAAQ,CAAA,CAAIC,aAAAA,CAAc,GAAGP,CAAQ,CAAA,MAAA,CAAA,CAAUI,CAAO,CAAA,CAE9DI,CAAAA,CAAUC,OAAO,UAAA,EAAW,CAE5BC,EAAkBN,CAAAA,EAAoB,CAC1CI,EAAQ,IAAA,CAAKP,CAAAA,CAAO,SAAA,CAAYG,CAAAA,EAAU,GAAa,CAAA,CACvDE,CAAAA,CAASF,CAAO,EAClB,CAAA,CAEA,OACEO,GAAAA,CAACC,WAAAA,CAAA,CACC,SAAA,CAAU,KAAA,CACV,oBAAmB,IAAA,CACnB,OAAA,CAAQ,QACR,OAAA,CAAS,CAAC,CAAE,MAAA,CAAAC,CAAO,IACjBF,GAAAA,CAACG,eAAAA,CAAA,CACC,KAAA,CAAO,CACL,CACE,EAAA,CAAI,GAAA,CACJ,MAAO,WAAA,CACP,OAAA,CAAS,IAAM,CACbJ,CAAAA,CAAe,GAAG,CAAA,CAClBG,CAAAA,GACF,CACF,CAAA,CACA,CACE,EAAA,CAAI,GAAA,CACJ,MAAO,SAAA,CACP,OAAA,CAAS,IAAM,CACbH,CAAAA,CAAe,GAAG,CAAA,CAClBG,CAAAA,GACF,CACF,CAAA,CACA,CACE,EAAA,CAAI,GAAA,CACJ,MAAO,OAAA,CACP,OAAA,CAAS,IAAM,CACbH,CAAAA,CAAe,GAAG,CAAA,CAClBG,CAAAA,GACF,CACF,CACF,EACF,CAAA,CAGF,QAAA,CAAAE,KAACC,UAAAA,CAAA,CAAW,MAAM,cAAA,CAChB,QAAA,CAAA,CAAAL,IAACM,OAAAA,CAAA,EAAQ,EAAE,GAAA,CAAEf,CAAAA,CAAOG,GAAS,GAAG,CAAA,CAAA,CAClC,EACF,CAEJ","file":"ThemeTool.js","sourcesContent":["export const ADDON_ID = '@saas-ui/storybook-addon2'\nexport const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`\nexport const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`\nexport const THEME_TOOL_ID = `${ADDON_ID}/theme-tool`\n\nexport const EVENTS = {\n  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,\n  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,\n  SET_THEME: `${ADDON_ID}/setTheme`,\n}\n","import { EyeIcon } from '@storybook/icons'\nimport {\n  IconButton,\n  TooltipLinkList,\n  WithTooltip,\n} from 'storybook/internal/components'\nimport { useAddonState } from 'storybook/manager-api'\nimport { addons } from 'storybook/preview-api'\n\nimport { ADDON_ID, EVENTS } from '../constants'\n\nconst themes: Record<string, string> = {\n  0: 'Chakra UI',\n  1: 'Saas UI',\n  2: 'Glass',\n}\n\n/**\n * This component is rendered in the Storybook toolbar\n */\nexport const ThemeTool = () => {\n  const themeId = localStorage.getItem('saas-ui-theme')\n  const [theme, setTheme] = useAddonState(`${ADDON_ID}/theme`, themeId)\n\n  const channel = addons.getChannel()\n\n  const setActiveTheme = (themeId: string) => {\n    channel.emit(EVENTS.SET_THEME, !themeId ? '1' : themeId)\n    setTheme(themeId)\n  }\n\n  return (\n    <WithTooltip\n      placement=\"top\"\n      closeOnOutsideClick\n      trigger=\"click\"\n      tooltip={({ onHide }) => (\n        <TooltipLinkList\n          links={[\n            {\n              id: '0',\n              title: 'Chakra UI',\n              onClick: () => {\n                setActiveTheme('0')\n                onHide()\n              },\n            },\n            {\n              id: '1',\n              title: 'Saas UI',\n              onClick: () => {\n                setActiveTheme('1')\n                onHide()\n              },\n            },\n            {\n              id: '2',\n              title: 'Glass',\n              onClick: () => {\n                setActiveTheme('2')\n                onHide()\n              },\n            },\n          ]}\n        />\n      )}\n    >\n      <IconButton title=\"Select theme\">\n        <EyeIcon /> {themes[theme || '1']}\n      </IconButton>\n    </WithTooltip>\n  )\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/storybook-addon",
-  "version": "7.0.0-next.8",
+  "version": "7.0.0-rc.0",
   "description": "The official Storybook Addon for Saas UI",
   "type": "module",
   "main": "dist/index.js",
@@ -33,7 +33,7 @@
       "manager": [
         "./dist/manager.d.ts"
       ],
-      "previews": [
+      "preview": [
         "./dist/preview.d.ts"
       ]
     }
@@ -58,29 +58,27 @@
   },
   "homepage": "https://github.com/saas-ui/saas-ui#readme",
   "devDependencies": {
-    "@chakra-ui/react": "3.27.0",
+    "@chakra-ui/react": "^3.28.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@storybook/types": "^8.6.9",
+    "@storybook/react": "^9.1.10",
+    "@types/react": "^19.2.0",
     "framer-motion": "^12.23.22",
     "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "storybook": "9.1.10",
     "tsup": "^8.5.0",
-    "@saas-ui/react": "3.0.0-next.43"
+    "@saas-ui/chakra-preset": "3.0.0-rc.0"
   },
   "dependencies": {
-    "@storybook/components": "^8.6.9",
-    "@storybook/manager-api": "^8.6.9",
-    "@storybook/preview-api": "^8.6.9"
+    "@storybook/icons": "^1.6.0"
   },
   "peerDependencies": {
-    "@chakra-ui/react": "3.27.0",
-    "@saas-ui/react": "^3.0.0-next.43",
-    "@storybook/components": ">=8.0.0",
-    "@storybook/manager-api": ">=8.0.0",
-    "@storybook/preview-api": ">=8.0.0",
-    "@storybook/types": ">=8.0.0",
-    "react": "19.1.1",
-    "react-dom": "19.1.1"
+    "@chakra-ui/react": "^3.28.0",
+    "@saas-ui/chakra-preset": "^3.0.0-rc.0",
+    "storybook": ">=9.0.0 <10.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
   },
   "publishConfig": {
     "access": "public"