@saas-ui/storybook-addon 2.0.2 → 3.0.0

package/dist/arg-types.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/arg-types.ts"],"names":["validateColorScheme","value","valueKeys","term","getThemingArgTypes","theme","componentName","_a","_b","_c","_d","component","argTypes","variantOptions","sizeOptions","colorSchemes","key"],"mappings":"AAiBA,SAASA,EAAoBC,EAAe,CAC1C,IAAMC,EAAY,OAAO,KAAKD,GAAS,CAAC,CAAC,EACzC,MAAO,CACL,KACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,KACF,EAAE,MAAOE,GAASD,EAAU,SAASC,CAAI,CAAC,CAC5C,CAkCO,SAASC,EAMdC,EAAcC,EAA8B,CAvE9C,IAAAC,EAAAC,EAAAC,EAAAC,EAwEE,IAAMC,EAAYN,EAAM,WAAWC,CAAa,EAChD,GAAI,CAACK,EACH,OAGF,IAAMC,EAEF,CAAC,EAECC,EAAiB,OAAO,KAAKF,EAAU,UAAY,CAAC,CAAC,EACvDE,EAAe,SACjBD,EAAS,QAAU,CACjB,KAAM,CAAE,KAAM,OAAQ,MAAOC,CAAe,EAC5C,cAAcN,EAAAI,EAAU,eAAV,YAAAJ,EAAwB,OACxC,GAGF,IAAMO,EAAc,OAAO,KAAKH,EAAU,OAAS,CAAC,CAAC,EAQrD,GAPIG,EAAY,SACdF,EAAS,KAAO,CACd,KAAM,CAAE,KAAM,OAAQ,MAAOE,CAAY,EACzC,cAAcN,EAAAG,EAAU,eAAV,YAAAH,EAAwB,IACxC,IAGEC,EAAAE,EAAU,eAAV,MAAAF,EAAyB,YAAgB,CAC3C,IAAMM,EAAe,OAAO,QAAQV,EAAM,MAAM,EAC7C,OAAO,CAAC,CAAC,CAAEJ,CAAK,IAAMD,EAAoBC,CAAK,CAAC,EAChD,IAAI,CAAC,CAACe,CAAG,IAAMA,CAAG,EAEjBD,EAAa,SACfH,EAAS,YAAc,CACrB,KAAM,CAAE,KAAM,OAAQ,MAAOG,CAAa,EAC1C,cAAcL,EAAAC,EAAU,eAAV,YAAAD,EAAwB,WACxC,GAIJ,OAAOE,CACT","sourcesContent":["import type { ArgTypes } from '@storybook/react'\nimport type { ThemingProps } from '@chakra-ui/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<\n    Partial<Pick<ThemingProps<ComponentName>, ThemingArgTypeKey>>\n  > = {}\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.mjs

@@ -1,9 +0,0 @@
-import { useEffect } from 'react';
-import { useColorMode } from '@chakra-ui/react';
-import { addons } from '@storybook/preview-api';
-
-var o="@saas-ui/storybook-addon2",t={TOGGLE_COLOR_MODE:`${o}/toggleColorMode`,TOGGLE_DIRECTION:`${o}/toggleDirection`,SET_THEME:`${o}/setTheme`};function d(){let{setColorMode:e}=useColorMode();return useEffect(()=>{let r=addons.getChannel(),n=O=>e(O);return r.on(t.TOGGLE_COLOR_MODE,n),()=>{r.removeListener(t.TOGGLE_COLOR_MODE,n);}},[e]),null}
-
-export { d as ColorModeSync };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=ColorModeSync.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/color-mode/ColorModeSync.tsx","../../src/constants.ts"],"names":["useEffect","useColorMode","addons","ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","ColorModeSync","setColorMode","channel","colorModeToolCallback","value"],"mappings":"AAAA,OAAS,aAAAA,MAAiB,QAC1B,OAAS,gBAAAC,MAAoB,mBAC7B,OAAS,UAAAC,MAAc,yBCFhB,IAAMC,EAAW,4BACXC,EAAqB,GAAGD,oBACxBE,EAAoB,GAAGF,mBACvBG,EAAgB,GAAGH,eAEnBI,EAAS,CACpB,kBAAmB,GAAGJ,oBACtB,iBAAkB,GAAGA,oBACrB,UAAW,GAAGA,YAChB,EDDO,SAASK,GAAgB,CAC9B,GAAM,CAAE,aAAAC,CAAa,EAAIR,EAAa,EAEtC,OAAAD,EAAU,IAAM,CACd,IAAMU,EAAUR,EAAO,WAAW,EAE5BS,EAAyBC,GAAkBH,EAAaG,CAAK,EACnE,OAAAF,EAAQ,GAAGH,EAAO,kBAAmBI,CAAqB,EAEnD,IAAM,CACXD,EAAQ,eAAeH,EAAO,kBAAmBI,CAAqB,CACxE,CACF,EAAG,CAACF,CAAY,CAAC,EAEV,IACT","sourcesContent":["import { useEffect } from 'react'\nimport { useColorMode } from '@chakra-ui/react'\nimport { addons } from '@storybook/preview-api'\nimport { EVENTS } from '../constants'\n\n/**\n * Render <ColorModeSync /> to sync the storybook color mode with Chakra UI\n */\nexport function ColorModeSync() {\n  const { setColorMode } = useColorMode()\n\n  useEffect(() => {\n    const channel = addons.getChannel()\n\n    const colorModeToolCallback = (value: string) => setColorMode(value)\n    channel.on(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback)\n\n    return () => {\n      channel.removeListener(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback)\n    }\n  }, [setColorMode])\n\n  return null\n}\n","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/color-mode/ColorModeTool.mjs

@@ -1,10 +0,0 @@
-import * as c from 'react';
-import { IconButton } from '@storybook/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`,TOGGLE_DIRECTION:`${t}/toggleDirection`,SET_THEME:`${t}/setTheme`};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=out.js.map
-//# sourceMappingURL=ColorModeTool.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/color-mode/ColorModeTool.tsx","../../src/constants.ts"],"names":["React","IconButton","addons","ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","jsx","jsxs","MoonIcon","SunIcon","ColorModeTool","isDarkMode","darkMode","setDarkMode","channel","prev"],"mappings":"AAAA,UAAYA,MAAW,QACvB,OAAS,cAAAC,MAAkB,wBAC3B,OAAS,UAAAC,MAAc,yBCFhB,IAAMC,EAAW,4BACXC,EAAqB,GAAGD,oBACxBE,EAAoB,GAAGF,mBACvBG,EAAgB,GAAGH,eAEnBI,EAAS,CACpB,kBAAmB,GAAGJ,oBACtB,iBAAkB,GAAGA,oBACrB,UAAW,GAAGA,YAChB,EDDI,cAAAK,EASA,QAAAC,MATA,oBAFJ,IAAMC,EAAW,IACfF,EAAC,OAAI,QAAQ,YAAY,UAAU,QACjC,SAAAA,EAAC,QACC,KAAK,eACL,EAAE,qOACH,EACH,EAGIG,EAAU,IACdH,EAAC,OAAI,QAAQ,YAAY,UAAU,QACjC,SAAAC,EAAC,KACC,eAAe,QACf,cAAc,QACd,YAAY,IACZ,KAAK,OACL,OAAO,eAEP,UAAAD,EAAC,UAAO,GAAG,KAAK,GAAG,KAAK,EAAE,IAAI,EAC9BA,EAAC,QAAK,EAAE,UAAU,EAClBA,EAAC,QAAK,EAAE,WAAW,EACnBA,EAAC,QAAK,EAAE,uBAAuB,EAC/BA,EAAC,QAAK,EAAE,yBAAyB,EACjCA,EAAC,QAAK,EAAE,UAAU,EAClBA,EAAC,QAAK,EAAE,WAAW,EACnBA,EAAC,QAAK,EAAE,wBAAwB,EAChCA,EAAC,QAAK,EAAE,wBAAwB,GAClC,EACF,EAGWI,EAAgB,IAAM,CACjC,IAAMC,EAAa,aAAa,QAAQ,sBAAsB,IAAM,OAE9D,CAACC,EAAUC,CAAW,EAAU,WAASF,CAAU,EAEnDG,EAAUd,EAAO,WAAW,EAOlC,OACEM,EAACP,EAAA,CACC,MAAO,qBAAqBa,EAAW,QAAU,SACjD,OAAQA,EACR,QATiB,IAAM,CACzBE,EAAQ,KAAKT,EAAO,kBAAoBO,EAAoB,QAAT,MAAgB,EACnEC,EAAaE,GAAS,CAACA,CAAI,CAC7B,EAQK,SAAAH,EAAWN,EAACG,EAAA,EAAQ,EAAKH,EAACE,EAAA,EAAS,EACtC,CAEJ","sourcesContent":["import * as React from 'react'\nimport { IconButton } from '@storybook/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","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.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/constants.ts"],"names":["ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS"],"mappings":"AAAO,IAAMA,EAAW,4BACXC,EAAqB,GAAGD,oBACxBE,EAAoB,GAAGF,mBACvBG,EAAgB,GAAGH,eAEnBI,EAAS,CACpB,kBAAmB,GAAGJ,oBACtB,iBAAkB,GAAGA,oBACrB,UAAW,GAAGA,YAChB","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.mjs

@@ -1,10 +0,0 @@
-import { useEffect, useCallback } from 'react';
-import { useGlobals, useAddonState, addons } from '@storybook/manager-api';
-import { IconButton } from '@storybook/components';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var T=Object.defineProperty,d=Object.defineProperties;var D=Object.getOwnPropertyDescriptors;var a=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var m=(o,t,e)=>t in o?T(o,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[t]=e,c=(o,t)=>{for(var e in t||(t={}))I.call(t,e)&&m(o,e,t[e]);if(a)for(var e of a(t))p.call(t,e)&&m(o,e,t[e]);return o},i=(o,t)=>d(o,D(t));var l="@saas-ui/storybook-addon2",s=`${l}/direction-tool`,O={TOGGLE_COLOR_MODE:`${l}/toggleColorMode`,TOGGLE_DIRECTION:`${l}/toggleDirection`,SET_THEME:`${l}/setTheme`};var u=o=>jsxs("svg",i(c({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"})]})),L=o=>jsxs("svg",i(c({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"})]})),b=()=>{let[o,t]=useGlobals(),[e,h]=useAddonState(s,o[s]||"ltr"),n=e!=="ltr"?"ltr":"rtl";useEffect(()=>{t({[s]:e});},[e,t]);let E=useCallback(()=>{addons.getChannel().emit(O.TOGGLE_DIRECTION,n),h(n);},[h,n]);return jsx(IconButton,{active:e==="rtl",title:`Set layout direction to ${n}`,onClick:E,children:n==="ltr"?jsx(u,{}):jsx(L,{})})};
-
-export { b as DirectionTool };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=DirectionTool.mjs.map

package/dist/direction/DirectionTool.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/direction/DirectionTool.tsx","../../src/constants.ts"],"names":["useCallback","useEffect","addons","useAddonState","useGlobals","IconButton","ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","jsx","jsxs","LTRIcon","props","__spreadProps","__spreadValues","RTLIcon","DirectionTool","globals","setGlobals","direction","setDirection","targetDirection","toggleDirection"],"mappings":"6aAAA,OAAS,eAAAA,EAAa,aAAAC,MAAiB,QACvC,OAAS,UAAAC,EAAQ,iBAAAC,EAAe,cAAAC,MAAkB,yBAClD,OAAS,cAAAC,MAAkB,wBCFpB,IAAMC,EAAW,4BACXC,EAAqB,GAAGD,oBACxBE,EAAoB,GAAGF,mBACvBG,EAAgB,GAAGH,eAEnBI,EAAS,CACpB,kBAAmB,GAAGJ,oBACtB,iBAAkB,GAAGA,oBACrB,UAAW,GAAGA,YAChB,EDHE,OAYE,OAAAK,EAZF,QAAAC,MAAA,oBADF,IAAMC,EAAWC,GACfF,EAAC,MAAAG,EAAAC,EAAA,CACC,OAAO,eACP,KAAK,eACL,YAAY,IACZ,QAAQ,YACR,OAAO,MACP,MAAM,MACN,MAAO,CACL,UAAW,YACb,GACIF,GAVL,CAYC,UAAAH,EAAC,QAAK,KAAK,OAAO,EAAE,kBAAkB,EACtCA,EAAC,QAAK,EAAE,kHAAkH,IAC5H,EAGIM,EAAWH,GACfF,EAAC,MAAAG,EAAAC,EAAA,CACC,OAAO,eACP,KAAK,eACL,YAAY,IACZ,QAAQ,YACR,OAAO,MACP,MAAM,MACN,MAAO,CACL,UAAW,YACb,GACIF,GAVL,CAYC,UAAAH,EAAC,QAAK,KAAK,OAAO,EAAE,kBAAkB,EACtCA,EAAC,QAAK,EAAE,wHAAwH,IAClI,EAMWO,EAAgB,IAAM,CACjC,GAAM,CAACC,EAASC,CAAU,EAAIhB,EAAW,EACnC,CAACiB,EAAWC,CAAY,EAAInB,EAChCK,EACAW,EAAQX,CAAiB,GAAK,KAChC,EACMe,EAAkBF,IAAc,MAAQ,MAAQ,MACtDpB,EAAU,IAAM,CACdmB,EAAW,CAAE,CAACZ,CAAiB,EAAGa,CAAU,CAAC,CAC/C,EAAG,CAACA,EAAWD,CAAU,CAAC,EAE1B,IAAMI,EAAkBxB,EAAY,IAAM,CACxBE,EAAO,WAAW,EAC1B,KAAKQ,EAAO,iBAAkBa,CAAe,EACrDD,EAAaC,CAAe,CAC9B,EAAG,CAACD,EAAcC,CAAe,CAAC,EAElC,OACEZ,EAACN,EAAA,CACC,OAAQgB,IAAc,MACtB,MAAO,2BAA2BE,IAClC,QAASC,EAER,SAAAD,IAAoB,MAAQZ,EAACE,EAAA,EAAQ,EAAKF,EAACM,EAAA,EAAQ,EACtD,CAEJ","sourcesContent":["import { useCallback, useEffect } from 'react'\nimport { addons, useAddonState, useGlobals } from '@storybook/manager-api'\nimport { IconButton } from '@storybook/components'\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","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/useDirection.mjs

@@ -1,8 +0,0 @@
-import { useState, useEffect } from 'react';
-import { addons } from '@storybook/preview-api';
-
-var o="@saas-ui/storybook-addon2",e={TOGGLE_COLOR_MODE:`${o}/toggleColorMode`,TOGGLE_DIRECTION:`${o}/toggleDirection`,SET_THEME:`${o}/setTheme`};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=out.js.map
-//# sourceMappingURL=useDirection.mjs.map

package/dist/direction/useDirection.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/direction/useDirection.tsx","../../src/constants.ts"],"names":["useEffect","useState","addons","ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","useDirection","initialDirection","direction","setDirection","channel","callback","value"],"mappings":"AAAA,OAAS,aAAAA,EAAW,YAAAC,MAAgB,QACpC,OAAS,UAAAC,MAAc,yBCDhB,IAAMC,EAAW,4BACXC,EAAqB,GAAGD,oBACxBE,EAAoB,GAAGF,mBACvBG,EAAgB,GAAGH,eAEnBI,EAAS,CACpB,kBAAmB,GAAGJ,oBACtB,iBAAkB,GAAGA,oBACrB,UAAW,GAAGA,YAChB,EDFO,IAAMK,EAAe,CAACC,EAAkC,QAAU,CACvE,GAAM,CAACC,EAAWC,CAAY,EAAIV,EAASQ,EAAiB,YAAY,CAAC,EAEzE,OAAAT,EAAU,IAAM,CACd,SAAS,gBAAgB,IAAMU,CACjC,EAAG,CAACA,CAAS,CAAC,EAEdV,EAAU,IAAM,CACd,IAAMY,EAAUV,EAAO,WAAW,EAC5BW,EAAYC,GAAkBH,EAAaG,CAAK,EACtD,OAAAF,EAAQ,GAAGL,EAAO,iBAAkBM,CAAQ,EACrC,IAAM,CACXD,EAAQ,eAAeL,EAAO,iBAAkBM,CAAQ,CAC1D,CACF,EAAG,CAACF,CAAY,CAAC,EAEVD,CACT","sourcesContent":["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","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/index.mjs.map

@@ -1 +0,0 @@
-{"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","_a","_b","_c","_d","component","argTypes","variantOptions","sizeOptions","colorSchemes","key"],"mappings":"AAAO,IAAMA,EAAW,4BACXC,EAAqB,GAAGD,oBACxBE,EAAoB,GAAGF,mBACvBG,EAAgB,GAAGH,eAEnBI,EAAS,CACpB,kBAAmB,GAAGJ,oBACtB,iBAAkB,GAAGA,oBACrB,UAAW,GAAGA,YAChB,ECQA,SAASK,EAAoBC,EAAe,CAC1C,IAAMC,EAAY,OAAO,KAAKD,GAAS,CAAC,CAAC,EACzC,MAAO,CACL,KACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,KACF,EAAE,MAAOE,GAASD,EAAU,SAASC,CAAI,CAAC,CAC5C,CAkCO,SAASC,EAMdC,EAAcC,EAA8B,CAvE9C,IAAAC,EAAAC,EAAAC,EAAAC,EAwEE,IAAMC,EAAYN,EAAM,WAAWC,CAAa,EAChD,GAAI,CAACK,EACH,OAGF,IAAMC,EAEF,CAAC,EAECC,EAAiB,OAAO,KAAKF,EAAU,UAAY,CAAC,CAAC,EACvDE,EAAe,SACjBD,EAAS,QAAU,CACjB,KAAM,CAAE,KAAM,OAAQ,MAAOC,CAAe,EAC5C,cAAcN,EAAAI,EAAU,eAAV,YAAAJ,EAAwB,OACxC,GAGF,IAAMO,EAAc,OAAO,KAAKH,EAAU,OAAS,CAAC,CAAC,EAQrD,GAPIG,EAAY,SACdF,EAAS,KAAO,CACd,KAAM,CAAE,KAAM,OAAQ,MAAOE,CAAY,EACzC,cAAcN,EAAAG,EAAU,eAAV,YAAAH,EAAwB,IACxC,IAGEC,EAAAE,EAAU,eAAV,MAAAF,EAAyB,YAAgB,CAC3C,IAAMM,EAAe,OAAO,QAAQV,EAAM,MAAM,EAC7C,OAAO,CAAC,CAAC,CAAEJ,CAAK,IAAMD,EAAoBC,CAAK,CAAC,EAChD,IAAI,CAAC,CAACe,CAAG,IAAMA,CAAG,EAEjBD,EAAa,SACfH,EAAS,YAAc,CACrB,KAAM,CAAE,KAAM,OAAQ,MAAOG,CAAa,EAC1C,cAAcL,EAAAC,EAAU,eAAV,YAAAD,EAAwB,WACxC,GAIJ,OAAOE,CACT","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'\nimport type { ThemingProps } from '@chakra-ui/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<\n    Partial<Pick<ThemingProps<ComponentName>, ThemingArgTypeKey>>\n  > = {}\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.mjs

@@ -1,12 +0,0 @@
-import * as Co from '@storybook/manager-api';
-import { addons, types, useGlobals, useAddonState } from '@storybook/manager-api';
-import * as M from 'react';
-import { useEffect, useCallback } from 'react';
-import { IconButton, WithTooltip, TooltipLinkList, Icons } from '@storybook/components';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import '@storybook/types';
-import '@storybook/preview-api/dist/addons';
-
-var E=Object.defineProperty,V=Object.defineProperties,x=Object.getOwnPropertyDescriptor,y=Object.getOwnPropertyDescriptors,N=Object.getOwnPropertyNames,C=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,B=Object.prototype.propertyIsEnumerable;var u=(t,o,e)=>o in t?E(t,o,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[o]=e,p=(t,o)=>{for(var e in o||(o={}))I.call(o,e)&&u(t,e,o[e]);if(C)for(var e of C(o))B.call(o,e)&&u(t,e,o[e]);return t},T=(t,o)=>V(t,y(o));var f=(t,o,e,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of N(o))!I.call(t,r)&&r!==e&&E(t,r,{get:()=>o[r],enumerable:!(c=x(o,r))||c.enumerable});return t},D=(t,o,e)=>(f(t,o,"default"),e&&f(e,o,"default"));var s="@saas-ui/storybook-addon2",k=`${s}/color-mode-tool`,i=`${s}/direction-tool`,v=`${s}/theme-tool`,h={TOGGLE_COLOR_MODE:`${s}/toggleColorMode`,TOGGLE_DIRECTION:`${s}/toggleDirection`,SET_THEME:`${s}/setTheme`};var H=()=>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"})}),A=()=>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"})]})}),_=()=>{let t=localStorage.getItem("chakra-ui-color-mode")==="dark",[o,e]=M.useState(t),c=addons.getChannel();return jsx(IconButton,{title:`Set color mode to ${o?"light":"dark"}`,active:o,onClick:()=>{c.emit(h.TOGGLE_COLOR_MODE,o?"light":"dark"),e(l=>!l);},children:o?jsx(A,{}):jsx(H,{})})};var J=t=>jsxs("svg",T(p({stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"}},t),{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"})]})),K=t=>jsxs("svg",T(p({stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",height:"1em",width:"1em",style:{transform:"scale(1.2)"}},t),{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"})]})),S=()=>{let[t,o]=useGlobals(),[e,c]=useAddonState(i,t[i]||"ltr"),r=e!=="ltr"?"ltr":"rtl";useEffect(()=>{o({[i]:e});},[e,o]);let l=useCallback(()=>{addons.getChannel().emit(h.TOGGLE_DIRECTION,r),c(r);},[c,r]);return jsx(IconButton,{active:e==="rtl",title:`Set layout direction to ${r}`,onClick:l,children:r==="ltr"?jsx(J,{}):jsx(K,{})})};var m={};D(m,Co);var j={0:"Chakra UI",1:"Saas UI",2:"Glass"},R=()=>{let t=localStorage.getItem("saas-ui-theme"),[o,e]=(0, m.useAddonState)(`${s}/theme`,t),c=addons.getChannel(),r=l=>{c.emit(h.SET_THEME,l||"1"),e(l);};return jsx(WithTooltip,{placement:"top",closeOnClick:!0,trigger:"click",tooltip:({onHide:l})=>jsx(TooltipLinkList,{links:[{id:"0",title:"Chakra UI",onClick:()=>{r("0"),l();}},{id:"1",title:"Saas UI",onClick:()=>{r("1"),l();}},{id:"2",title:"Glass",onClick:()=>{r("2"),l();}}]}),children:jsxs(IconButton,{title:"Select theme",children:[jsx(Icons,{icon:"eye"})," ",j[o||"1"]]})})};addons.register(s,()=>{let t=({viewMode:o})=>!!(o&&o.match(/^(story|docs)$/));addons.add(i,{type:types.TOOL,title:"Direction",render:S,match:t}),addons.add(k,{type:types.TOOL,title:"Color Mode",render:_,match:t}),addons.add(v,{type:types.TOOL,title:"Theme",render:R,match:t});});
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=manager.mjs.map

package/dist/manager.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/manager.ts","../src/constants.ts","../src/color-mode/ColorModeTool.tsx","../src/direction/DirectionTool.tsx","../../../node_modules/@storybook/api/dist/entry.mjs","../src/theme/ThemeTool.tsx","../../../node_modules/@storybook/addons/dist/index.mjs"],"names":["addons","types","ADDON_ID","COLOR_MODE_TOOL_ID","DIRECTION_TOOL_ID","THEME_TOOL_ID","EVENTS","React","IconButton","jsx","jsxs","MoonIcon","SunIcon","ColorModeTool","isDarkMode","darkMode","setDarkMode","channel","prev","useCallback","useEffect","useAddonState","useGlobals","LTRIcon","props","__spreadProps","__spreadValues","RTLIcon","DirectionTool","globals","setGlobals","direction","setDirection","targetDirection","toggleDirection","entry_exports","__reExport","manager_api_star","WithTooltip","TooltipLinkList","Icons","Addon_TypesEnum","mockChannel","HooksContext","applyHooks","makeDecorator","useArgs","useChannel","useMemo","useParameter","useReducer","useRef","useState","useStoryContext","themes","ThemeTool","themeId","theme","setTheme","setActiveTheme","onHide","match","viewMode"],"mappings":"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","sourcesContent":["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","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/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 { addons, useAddonState, useGlobals } from '@storybook/manager-api'\nimport { IconButton } from '@storybook/components'\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","// shim-mmode\nexport * from '@storybook/manager-api';","import { useAddonState } from '@storybook/api'\nimport {\n  IconButton,\n  WithTooltip,\n  TooltipLinkList,\n  Icons,\n} from '@storybook/components'\nimport { addons } from '@storybook/addons'\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      closeOnClick\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        <Icons icon=\"eye\" /> {themes[theme || '1']}\n      </IconButton>\n    </WithTooltip>\n  )\n}\n","export { Addon_TypesEnum as types } from '@storybook/types';\nexport { addons, mockChannel } from '@storybook/manager-api';\nexport { HooksContext, applyHooks, makeDecorator, useArgs, useCallback, useChannel, useEffect, useGlobals, useMemo, useParameter, useReducer, useRef, useState, useStoryContext } from '@storybook/preview-api/dist/addons';\n"]}