@saas-ui/storybook-addon 2.0.3 → 3.0.1

package/dist/{arg-types.mjs → arg-types.cjs}

@@ -1,5 +1,7 @@
+'use strict';
+
 function y(t){let o=Object.keys(t||{});return ["50","100","200","300","400","500","600","700","800","900"].every(e=>o.includes(e))}function u(t,o){var c,i,m,p;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:(c=e.defaultProps)==null?void 0:c.variant});let a=Object.keys(e.sizes||{});if(a.length&&(n.size={type:{name:"enum",value:a},defaultValue:(i=e.defaultProps)==null?void 0:i.size}),(m=e.defaultProps)!=null&&m.colorScheme){let l=Object.entries(t.colors).filter(([,r])=>y(r)).map(([r])=>r);l.length&&(n.colorScheme={type:{name:"enum",value:l},defaultValue:(p=e.defaultProps)==null?void 0:p.colorScheme});}return n}
 
-export { u as getThemingArgTypes };
+exports.getThemingArgTypes = u;
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=arg-types.mjs.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","_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,EAEJ,CAEA,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/arg-types.d.cts

@@ -0,0 +1,52 @@
+import { ArgTypes } from '@storybook/types';
+import { ThemingProps } from '@chakra-ui/react';
+
+declare global {
+	interface SymbolConstructor {
+		readonly observable: symbol;
+	}
+}
+
+/**
+ * `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<Pick<ThemingProps<ComponentName>, ThemingArgTypeKey>>> | undefined;
+
+export { type ThemingArgTypeKey, getThemingArgTypes };

package/dist/arg-types.d.ts

@@ -49,4 +49,4 @@ declare function getThemingArgTypes<Theme extends {
     components: Record<string, any>;
 }, ComponentName extends KeyOf<Theme['components']>>(theme: Theme, componentName: ComponentName): ArgTypes<Partial<Pick<ThemingProps<ComponentName>, ThemingArgTypeKey>>> | undefined;
 
-export { ThemingArgTypeKey, getThemingArgTypes };
+export { type ThemingArgTypeKey, getThemingArgTypes };

package/dist/arg-types.js

@@ -1,7 +1,5 @@
-'use strict';
-
 function y(t){let o=Object.keys(t||{});return ["50","100","200","300","400","500","600","700","800","900"].every(e=>o.includes(e))}function u(t,o){var c,i,m,p;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:(c=e.defaultProps)==null?void 0:c.variant});let a=Object.keys(e.sizes||{});if(a.length&&(n.size={type:{name:"enum",value:a},defaultValue:(i=e.defaultProps)==null?void 0:i.size}),(m=e.defaultProps)!=null&&m.colorScheme){let l=Object.entries(t.colors).filter(([,r])=>y(r)).map(([r])=>r);l.length&&(n.colorScheme={type:{name:"enum",value:l},defaultValue:(p=e.defaultProps)==null?void 0:p.colorScheme});}return n}
 
-exports.getThemingArgTypes = u;
+export { u as getThemingArgTypes };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=arg-types.js.map

package/dist/arg-types.js.map

@@ -1 +1 @@
-{"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"]}
+{"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,EAEJ,CAEA,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.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var react$1 = require('react');
+var react = require('@chakra-ui/react');
+var previewApi = require('@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}=react.useColorMode();return react$1.useEffect(()=>{let r=previewApi.addons.getChannel(),n=O=>e(O);return r.on(t.TOGGLE_COLOR_MODE,n),()=>{r.removeListener(t.TOGGLE_COLOR_MODE,n);}},[e]),null}
+
+exports.ColorModeSync = d;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=ColorModeSync.cjs.map

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

@@ -0,0 +1 @@
+{"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,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB,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/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.js

@@ -1,11 +1,9 @@
-'use strict';
+import { useEffect } from 'react';
+import { useColorMode } from '@chakra-ui/react';
+import { addons } from '@storybook/preview-api';
 
-var react$1 = require('react');
-var react = require('@chakra-ui/react');
-var previewApi = require('@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}
 
-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}=react.useColorMode();return react$1.useEffect(()=>{let r=previewApi.addons.getChannel(),n=O=>e(O);return r.on(t.TOGGLE_COLOR_MODE,n),()=>{r.removeListener(t.TOGGLE_COLOR_MODE,n);}},[e]),null}
-
-exports.ColorModeSync = d;
+export { d as ColorModeSync };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=ColorModeSync.js.map

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

@@ -1 +1 @@
-{"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"]}
+{"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,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB,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.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var c = require('react');
+var components = require('@storybook/components');
+var managerApi = require('@storybook/manager-api');
+var 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`,TOGGLE_DIRECTION:`${t}/toggleDirection`,SET_THEME:`${t}/setTheme`};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=out.js.map
+//# sourceMappingURL=ColorModeTool.cjs.map

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

@@ -0,0 +1 @@
+{"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,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB,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,MAAM,GACvD,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/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.js

@@ -1,32 +1,10 @@
-'use strict';
+import * as c from 'react';
+import { IconButton } from '@storybook/components';
+import { addons } from '@storybook/manager-api';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
-var c = require('react');
-var components = require('@storybook/components');
-var managerApi = require('@storybook/manager-api');
-var jsxRuntime = require('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,{})})};
 
-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`,TOGGLE_DIRECTION:`${t}/toggleDirection`,SET_THEME:`${t}/setTheme`};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;
+export { k as ColorModeTool };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=ColorModeTool.js.map

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

@@ -1 +1 @@
-{"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"]}
+{"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,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB,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,MAAM,GACvD,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 → constants.cjs}

@@ -1,5 +1,11 @@
+'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`};
 
-export { o as ADDON_ID, t as COLOR_MODE_TOOL_ID, O as DIRECTION_TOOL_ID, E as EVENTS, e as THEME_TOOL_ID };
+exports.ADDON_ID = o;
+exports.COLOR_MODE_TOOL_ID = t;
+exports.DIRECTION_TOOL_ID = O;
+exports.EVENTS = E;
+exports.THEME_TOOL_ID = e;
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=constants.mjs.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,EAAW,4BACXC,EAAqB,GAAGD,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB","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.js

@@ -1,11 +1,5 @@
-'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;
+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=out.js.map
 //# sourceMappingURL=constants.js.map

package/dist/constants.js.map

@@ -1 +1 @@
-{"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"]}
+{"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,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB","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,12 @@
+'use strict';
+
+var react = require('react');
+var managerApi = require('@storybook/manager-api');
+var components = require('@storybook/components');
+var jsxRuntime = require('react/jsx-runtime');
+
+var t="@saas-ui/storybook-addon2",n=`${t}/direction-tool`,i={TOGGLE_COLOR_MODE:`${t}/toggleColorMode`,TOGGLE_DIRECTION:`${t}/toggleDirection`,SET_THEME:`${t}/setTheme`};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=out.js.map
+//# sourceMappingURL=DirectionTool.cjs.map

package/dist/direction/DirectionTool.cjs.map

@@ -0,0 +1 @@
+{"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","RTLIcon","DirectionTool","globals","setGlobals","direction","setDirection","targetDirection","toggleDirection"],"mappings":"AAAA,OAAS,eAAAA,EAAa,aAAAC,MAAiB,QACvC,OAAS,UAAAC,EAAQ,iBAAAC,EAAe,cAAAC,MAAkB,yBAClD,OAAS,cAAAC,MAAkB,wBCFpB,IAAMC,EAAW,4BACXC,EAAqB,GAAGD,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB,EDHE,OAYE,OAAAK,EAZF,QAAAC,MAAA,oBADF,IAAMC,EAAWC,GACfF,EAAC,OACC,OAAO,eACP,KAAK,eACL,YAAY,IACZ,QAAQ,YACR,OAAO,MACP,MAAM,MACN,MAAO,CACL,UAAW,YACb,EACC,GAAGE,EAEJ,UAAAH,EAAC,QAAK,KAAK,OAAO,EAAE,kBAAkB,EACtCA,EAAC,QAAK,EAAE,kHAAkH,GAC5H,EAGII,EAAWD,GACfF,EAAC,OACC,OAAO,eACP,KAAK,eACL,YAAY,IACZ,QAAQ,YACR,OAAO,MACP,MAAM,MACN,MAAO,CACL,UAAW,YACb,EACC,GAAGE,EAEJ,UAAAH,EAAC,QAAK,KAAK,OAAO,EAAE,kBAAkB,EACtCA,EAAC,QAAK,EAAE,wHAAwH,GAClI,EAMWK,EAAgB,IAAM,CACjC,GAAM,CAACC,EAASC,CAAU,EAAId,EAAW,EACnC,CAACe,EAAWC,CAAY,EAAIjB,EAChCK,EACAS,EAAQT,CAAiB,GAAK,KAChC,EACMa,EAAkBF,IAAc,MAAQ,MAAQ,MACtDlB,EAAU,IAAM,CACdiB,EAAW,CAAE,CAACV,CAAiB,EAAGW,CAAU,CAAC,CAC/C,EAAG,CAACA,EAAWD,CAAU,CAAC,EAE1B,IAAMI,EAAkBtB,EAAY,IAAM,CACxBE,EAAO,WAAW,EAC1B,KAAKQ,EAAO,iBAAkBW,CAAe,EACrDD,EAAaC,CAAe,CAC9B,EAAG,CAACD,EAAcC,CAAe,CAAC,EAElC,OACEV,EAACN,EAAA,CACC,OAAQc,IAAc,MACtB,MAAO,2BAA2BE,CAAe,GACjD,QAASC,EAER,SAAAD,IAAoB,MAAQV,EAACE,EAAA,EAAQ,EAAKF,EAACI,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/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.js

@@ -1,12 +1,10 @@
-'use strict';
+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 react = require('react');
-var managerApi = require('@storybook/manager-api');
-var components = require('@storybook/components');
-var jsxRuntime = require('react/jsx-runtime');
+var t="@saas-ui/storybook-addon2",n=`${t}/direction-tool`,i={TOGGLE_COLOR_MODE:`${t}/toggleColorMode`,TOGGLE_DIRECTION:`${t}/toggleDirection`,SET_THEME:`${t}/setTheme`};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,{})})};
 
-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=>jsxRuntime.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:[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"})]})),L=o=>jsxRuntime.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:[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"})]})),b=()=>{let[o,t]=managerApi.useGlobals(),[e,h]=managerApi.useAddonState(s,o[s]||"ltr"),n=e!=="ltr"?"ltr":"rtl";react.useEffect(()=>{t({[s]:e});},[e,t]);let E=react.useCallback(()=>{managerApi.addons.getChannel().emit(O.TOGGLE_DIRECTION,n),h(n);},[h,n]);return jsxRuntime.jsx(components.IconButton,{active:e==="rtl",title:`Set layout direction to ${n}`,onClick:E,children:n==="ltr"?jsxRuntime.jsx(u,{}):jsxRuntime.jsx(L,{})})};
-
-exports.DirectionTool = b;
+export { L as DirectionTool };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=DirectionTool.js.map

package/dist/direction/DirectionTool.js.map

@@ -1 +1 @@
-{"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"]}
+{"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","RTLIcon","DirectionTool","globals","setGlobals","direction","setDirection","targetDirection","toggleDirection"],"mappings":"AAAA,OAAS,eAAAA,EAAa,aAAAC,MAAiB,QACvC,OAAS,UAAAC,EAAQ,iBAAAC,EAAe,cAAAC,MAAkB,yBAClD,OAAS,cAAAC,MAAkB,wBCFpB,IAAMC,EAAW,4BACXC,EAAqB,GAAGD,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB,EDHE,OAYE,OAAAK,EAZF,QAAAC,MAAA,oBADF,IAAMC,EAAWC,GACfF,EAAC,OACC,OAAO,eACP,KAAK,eACL,YAAY,IACZ,QAAQ,YACR,OAAO,MACP,MAAM,MACN,MAAO,CACL,UAAW,YACb,EACC,GAAGE,EAEJ,UAAAH,EAAC,QAAK,KAAK,OAAO,EAAE,kBAAkB,EACtCA,EAAC,QAAK,EAAE,kHAAkH,GAC5H,EAGII,EAAWD,GACfF,EAAC,OACC,OAAO,eACP,KAAK,eACL,YAAY,IACZ,QAAQ,YACR,OAAO,MACP,MAAM,MACN,MAAO,CACL,UAAW,YACb,EACC,GAAGE,EAEJ,UAAAH,EAAC,QAAK,KAAK,OAAO,EAAE,kBAAkB,EACtCA,EAAC,QAAK,EAAE,wHAAwH,GAClI,EAMWK,EAAgB,IAAM,CACjC,GAAM,CAACC,EAASC,CAAU,EAAId,EAAW,EACnC,CAACe,EAAWC,CAAY,EAAIjB,EAChCK,EACAS,EAAQT,CAAiB,GAAK,KAChC,EACMa,EAAkBF,IAAc,MAAQ,MAAQ,MACtDlB,EAAU,IAAM,CACdiB,EAAW,CAAE,CAACV,CAAiB,EAAGW,CAAU,CAAC,CAC/C,EAAG,CAACA,EAAWD,CAAU,CAAC,EAE1B,IAAMI,EAAkBtB,EAAY,IAAM,CACxBE,EAAO,WAAW,EAC1B,KAAKQ,EAAO,iBAAkBW,CAAe,EACrDD,EAAaC,CAAe,CAC9B,EAAG,CAACD,EAAcC,CAAe,CAAC,EAElC,OACEV,EAACN,EAAA,CACC,OAAQc,IAAc,MACtB,MAAO,2BAA2BE,CAAe,GACjD,QAASC,EAER,SAAAD,IAAoB,MAAQV,EAACE,EAAA,EAAQ,EAAKF,EAACI,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.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var react = require('react');
+var previewApi = require('@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]=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=out.js.map
+//# sourceMappingURL=useDirection.cjs.map

package/dist/direction/useDirection.cjs.map

@@ -0,0 +1 @@
+{"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,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB,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/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.js

@@ -1,10 +1,8 @@
-'use strict';
+import { useState, useEffect } from 'react';
+import { addons } from '@storybook/preview-api';
 
-var react = require('react');
-var previewApi = require('@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};
 
-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]=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;
+export { a as useDirection };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=useDirection.js.map

package/dist/direction/useDirection.js.map

@@ -1 +1 @@
-{"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"]}
+{"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,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB,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 → index.cjs}

@@ -1,5 +1,12 @@
+'use strict';
+
 var o="@saas-ui/storybook-addon2",u=`${o}/color-mode-tool`,O=`${o}/direction-tool`,f=`${o}/theme-tool`,d={TOGGLE_COLOR_MODE:`${o}/toggleColorMode`,TOGGLE_DIRECTION:`${o}/toggleDirection`,SET_THEME:`${o}/setTheme`};function y(t){let r=Object.keys(t||{});return ["50","100","200","300","400","500","600","700","800","900"].every(e=>r.includes(e))}function h(t,r){var i,p,m,l;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:(i=e.defaultProps)==null?void 0:i.variant});let a=Object.keys(e.sizes||{});if(a.length&&(n.size={type:{name:"enum",value:a},defaultValue:(p=e.defaultProps)==null?void 0:p.size}),(m=e.defaultProps)!=null&&m.colorScheme){let T=Object.entries(t.colors).filter(([,s])=>y(s)).map(([s])=>s);T.length&&(n.colorScheme={type:{name:"enum",value:T},defaultValue:(l=e.defaultProps)==null?void 0:l.colorScheme});}return n}
 
-export { o as ADDON_ID, u as COLOR_MODE_TOOL_ID, O as DIRECTION_TOOL_ID, d as EVENTS, f as THEME_TOOL_ID, h as getThemingArgTypes };
+exports.ADDON_ID = o;
+exports.COLOR_MODE_TOOL_ID = u;
+exports.DIRECTION_TOOL_ID = O;
+exports.EVENTS = d;
+exports.THEME_TOOL_ID = f;
+exports.getThemingArgTypes = h;
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=index.mjs.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","_a","_b","_c","_d","component","argTypes","variantOptions","sizeOptions","colorSchemes","key"],"mappings":"AAAO,IAAMA,EAAW,4BACXC,EAAqB,GAAGD,CAAQ,mBAChCE,EAAoB,GAAGF,CAAQ,kBAC/BG,EAAgB,GAAGH,CAAQ,cAE3BI,EAAS,CACpB,kBAAmB,GAAGJ,CAAQ,mBAC9B,iBAAkB,GAAGA,CAAQ,mBAC7B,UAAW,GAAGA,CAAQ,WACxB,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,EAEJ,CAEA,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/index.d.cts

@@ -0,0 +1,4 @@
+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/types';
+import '@chakra-ui/react';

package/dist/index.js

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