@saas-ui/storybook-addon 1.0.0

package/dist/chunk-GII4NPN2.js

@@ -0,0 +1,81 @@
+import {
+  useDirection
+} from "./chunk-N4JZ67DU.js";
+import {
+  ColorModeSync
+} from "./chunk-SVHNULTN.js";
+import {
+  DIRECTION_TOOL_ID,
+  EVENTS
+} from "./chunk-HSBRF2QZ.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-UK7U2PBM.js";
+
+// src/feature/decorator/ChakraProviderDecorator.tsx
+import React, { useMemo } from "react";
+import { addons } from "@storybook/addons";
+import { extendTheme } from "@chakra-ui/react";
+import { SaasProvider, useLocalStorage } from "@saas-ui/react";
+import { baseTheme, theme as suiTheme } from "@saas-ui/theme";
+import { theme as baseGlassTheme } from "@saas-ui/theme-glass";
+import { jsx, jsxs } from "react/jsx-runtime";
+var glassTheme = extendTheme(baseGlassTheme, suiTheme);
+var useThemeSync = () => {
+  const [themeId, setTheme] = useLocalStorage("storybook.theme", "0");
+  React.useEffect(() => {
+    const channel = addons.getChannel();
+    const themeCallback = (value) => setTheme(value);
+    channel.on(EVENTS.SET_THEME, themeCallback);
+    return () => {
+      channel.removeListener(EVENTS.SET_THEME, themeCallback);
+    };
+  }, [setTheme]);
+  return themeId;
+};
+function ChakraProviderDecorator(Story, context) {
+  const {
+    parameters: { saasui: saasuiParams },
+    globals: { [DIRECTION_TOOL_ID]: globalDirection }
+  } = context;
+  const themeId = useThemeSync();
+  const getTheme = React.useCallback(() => {
+    switch (themeId) {
+      case "1":
+        return suiTheme;
+      case "2":
+        return glassTheme;
+      default:
+        return baseTheme;
+    }
+  }, [themeId]);
+  const theme = (saasuiParams == null ? void 0 : saasuiParams.theme) || getTheme();
+  const themeOverride = !!(saasuiParams == null ? void 0 : saasuiParams.theme);
+  const chakraTheme = (saasuiParams == null ? void 0 : saasuiParams.theme) ? typeof saasuiParams.theme === "function" ? saasuiParams.theme(context) : saasuiParams.theme : theme;
+  const direction = useDirection(globalDirection || (chakraTheme == null ? void 0 : chakraTheme.direction));
+  const themeWithDirectionOverride = useMemo(
+    () => extendTheme(
+      {
+        direction,
+        styles: {
+          global: {
+            body: {
+              minHeight: "var(--chakra-vh)"
+            }
+          }
+        }
+      },
+      chakraTheme
+    ),
+    [chakraTheme, direction]
+  );
+  return /* @__PURE__ */ jsxs(SaasProvider, __spreadProps(__spreadValues({}, saasuiParams), { theme: themeWithDirectionOverride, children: [
+    /* @__PURE__ */ jsx(ColorModeSync, {}),
+    /* @__PURE__ */ jsx(Story, __spreadValues({}, context))
+  ] }));
+}
+
+export {
+  ChakraProviderDecorator
+};

package/dist/chunk-HSBRF2QZ.js

@@ -0,0 +1,18 @@
+// src/constants.ts
+var ADDON_ID = "@saas-ui/storybook-addon";
+var COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`;
+var DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`;
+var THEME_TOOL_ID = `${ADDON_ID}/theme-tool`;
+var EVENTS = {
+  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,
+  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,
+  SET_THEME: `${ADDON_ID}/setTheme`
+};
+
+export {
+  ADDON_ID,
+  COLOR_MODE_TOOL_ID,
+  DIRECTION_TOOL_ID,
+  THEME_TOOL_ID,
+  EVENTS
+};

package/dist/chunk-N4JZ67DU.js

@@ -0,0 +1,26 @@
+import {
+  EVENTS
+} from "./chunk-HSBRF2QZ.js";
+
+// src/feature/direction/useDirection.tsx
+import { useEffect, useState } from "react";
+import { addons } from "@storybook/addons";
+var useDirection = (initialDirection = "ltr") => {
+  const [direction, setDirection] = useState(initialDirection.toLowerCase());
+  useEffect(() => {
+    document.documentElement.dir = direction;
+  }, [direction]);
+  useEffect(() => {
+    const channel = addons.getChannel();
+    const callback = (value) => setDirection(value);
+    channel.on(EVENTS.TOGGLE_DIRECTION, callback);
+    return () => {
+      channel.removeListener(EVENTS.TOGGLE_DIRECTION, callback);
+    };
+  }, [setDirection]);
+  return direction;
+};
+
+export {
+  useDirection
+};

package/dist/chunk-NOGSFSIA.js

@@ -0,0 +1,52 @@
+// src/feature/arg-types.ts
+function validateColorScheme(value) {
+  const valueKeys = Object.keys(value || {});
+  return [
+    "50",
+    "100",
+    "200",
+    "300",
+    "400",
+    "500",
+    "600",
+    "700",
+    "800",
+    "900"
+  ].every((term) => valueKeys.includes(term));
+}
+function getThemingArgTypes(theme, componentName) {
+  var _a, _b, _c, _d;
+  const component = theme.components[componentName];
+  if (!component) {
+    return void 0;
+  }
+  const argTypes = {};
+  const variantOptions = Object.keys(component.variants || {});
+  if (variantOptions.length) {
+    argTypes.variant = {
+      type: { name: "enum", value: variantOptions },
+      defaultValue: (_a = component.defaultProps) == null ? void 0 : _a.variant
+    };
+  }
+  const sizeOptions = Object.keys(component.sizes || {});
+  if (sizeOptions.length) {
+    argTypes.size = {
+      type: { name: "enum", value: sizeOptions },
+      defaultValue: (_b = component.defaultProps) == null ? void 0 : _b.size
+    };
+  }
+  if ((_c = component.defaultProps) == null ? void 0 : _c["colorScheme"]) {
+    const colorSchemes = Object.entries(theme.colors).filter(([, value]) => validateColorScheme(value)).map(([key]) => key);
+    if (colorSchemes.length) {
+      argTypes.colorScheme = {
+        type: { name: "enum", value: colorSchemes },
+        defaultValue: (_d = component.defaultProps) == null ? void 0 : _d.colorScheme
+      };
+    }
+  }
+  return argTypes;
+}
+
+export {
+  getThemingArgTypes
+};

package/dist/chunk-QNOLFHPG.js

@@ -0,0 +1,63 @@
+import {
+  ADDON_ID,
+  EVENTS
+} from "./chunk-HSBRF2QZ.js";
+
+// src/feature/color-mode/ColorModeTool.tsx
+import { useAddonState } from "@storybook/api";
+import { IconButton } from "@storybook/components";
+import { addons } from "@storybook/addons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MoonIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", focusable: "false", children: /* @__PURE__ */ 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"
+  }
+) });
+var SunIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", focusable: "false", children: /* @__PURE__ */ jsxs(
+  "g",
+  {
+    strokeLinejoin: "round",
+    strokeLinecap: "round",
+    strokeWidth: "2",
+    fill: "none",
+    stroke: "currentColor",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "5" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 1v2" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 21v2" }),
+      /* @__PURE__ */ jsx("path", { d: "M4.22 4.22l1.42 1.42" }),
+      /* @__PURE__ */ jsx("path", { d: "M18.36 18.36l1.42 1.42" }),
+      /* @__PURE__ */ jsx("path", { d: "M1 12h2" }),
+      /* @__PURE__ */ jsx("path", { d: "M21 12h2" }),
+      /* @__PURE__ */ jsx("path", { d: "M4.22 19.78l1.42-1.42" }),
+      /* @__PURE__ */ jsx("path", { d: "M18.36 5.64l1.42-1.42" })
+    ]
+  }
+) });
+var ColorModeTool = () => {
+  const isDarkMode = localStorage.getItem("chakra-ui-color-mode") === "dark";
+  const [darkMode, setDarkMode] = useAddonState(
+    `${ADDON_ID}/dark-mode`,
+    isDarkMode
+  );
+  const channel = addons.getChannel();
+  const toggleDarkMode = () => {
+    channel.emit(EVENTS.TOGGLE_COLOR_MODE, !darkMode ? "dark" : "light");
+    setDarkMode(!darkMode);
+  };
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      active: darkMode,
+      title: `Set color mode to ${darkMode ? "light" : "dark"}`,
+      onClick: toggleDarkMode,
+      children: darkMode ? /* @__PURE__ */ jsx(SunIcon, {}) : /* @__PURE__ */ jsx(MoonIcon, {})
+    }
+  );
+};
+
+export {
+  ColorModeTool
+};

package/dist/chunk-SGM3YTWS.js

@@ -0,0 +1,82 @@
+import {
+  DIRECTION_TOOL_ID,
+  EVENTS
+} from "./chunk-HSBRF2QZ.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-UK7U2PBM.js";
+
+// src/feature/direction/DirectionTool.tsx
+import { useCallback, useEffect } from "react";
+import { useAddonState, useGlobals } from "@storybook/api";
+import { addons } from "@storybook/addons";
+import { IconButton } from "@storybook/components";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LTRIcon = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  __spreadProps(__spreadValues({
+    stroke: "currentColor",
+    fill: "currentColor",
+    strokeWidth: "0",
+    viewBox: "0 0 24 24",
+    height: "1em",
+    width: "1em",
+    style: {
+      transform: "scale(1.2)"
+    }
+  }, props), {
+    children: [
+      /* @__PURE__ */ jsx("path", { fill: "none", d: "M0 0h24v24H0V0z" }),
+      /* @__PURE__ */ 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" })
+    ]
+  })
+);
+var RTLIcon = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  __spreadProps(__spreadValues({
+    stroke: "currentColor",
+    fill: "currentColor",
+    strokeWidth: "0",
+    viewBox: "0 0 24 24",
+    height: "1em",
+    width: "1em",
+    style: {
+      transform: "scale(1.2)"
+    }
+  }, props), {
+    children: [
+      /* @__PURE__ */ jsx("path", { fill: "none", d: "M0 0h24v24H0V0z" }),
+      /* @__PURE__ */ 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" })
+    ]
+  })
+);
+var DirectionTool = () => {
+  const [globals, setGlobals] = useGlobals();
+  const [direction, setDirection] = useAddonState(
+    DIRECTION_TOOL_ID,
+    globals[DIRECTION_TOOL_ID] || "ltr"
+  );
+  const targetDirection = direction !== "ltr" ? "ltr" : "rtl";
+  useEffect(() => {
+    setGlobals({ [DIRECTION_TOOL_ID]: direction });
+  }, [direction, setGlobals]);
+  const toggleDirection = useCallback(() => {
+    const channel = addons.getChannel();
+    channel.emit(EVENTS.TOGGLE_DIRECTION, targetDirection);
+    setDirection(targetDirection);
+  }, [setDirection, targetDirection]);
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      active: direction === "rtl",
+      title: `Set layout direction to ${targetDirection}`,
+      onClick: toggleDirection,
+      children: targetDirection === "ltr" ? /* @__PURE__ */ jsx(LTRIcon, {}) : /* @__PURE__ */ jsx(RTLIcon, {})
+    }
+  );
+};
+
+export {
+  DirectionTool
+};

package/dist/chunk-SVHNULTN.js

@@ -0,0 +1,24 @@
+import {
+  EVENTS
+} from "./chunk-HSBRF2QZ.js";
+
+// src/feature/color-mode/ColorModeSync.tsx
+import { useEffect } from "react";
+import { useColorMode } from "@chakra-ui/react";
+import { addons } from "@storybook/addons";
+function ColorModeSync() {
+  const { setColorMode } = useColorMode();
+  useEffect(() => {
+    const channel = addons.getChannel();
+    const colorModeToolCallback = (value) => setColorMode(value);
+    channel.on(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback);
+    return () => {
+      channel.removeListener(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback);
+    };
+  }, [setColorMode]);
+  return null;
+}
+
+export {
+  ColorModeSync
+};

package/dist/chunk-UK7U2PBM.js

@@ -0,0 +1,70 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw new Error('Dynamic require of "' + x + '" is not supported');
+});
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __commonJS = (cb, mod) => function __require2() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __require,
+  __objRest,
+  __commonJS,
+  __toESM
+};

package/dist/constants.cjs

@@ -0,0 +1,46 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/constants.ts
+var constants_exports = {};
+__export(constants_exports, {
+  ADDON_ID: () => ADDON_ID,
+  COLOR_MODE_TOOL_ID: () => COLOR_MODE_TOOL_ID,
+  DIRECTION_TOOL_ID: () => DIRECTION_TOOL_ID,
+  EVENTS: () => EVENTS,
+  THEME_TOOL_ID: () => THEME_TOOL_ID
+});
+module.exports = __toCommonJS(constants_exports);
+var ADDON_ID = "@saas-ui/storybook-addon";
+var COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`;
+var DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`;
+var THEME_TOOL_ID = `${ADDON_ID}/theme-tool`;
+var EVENTS = {
+  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,
+  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,
+  SET_THEME: `${ADDON_ID}/setTheme`
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ADDON_ID,
+  COLOR_MODE_TOOL_ID,
+  DIRECTION_TOOL_ID,
+  EVENTS,
+  THEME_TOOL_ID
+});

package/dist/constants.d.ts

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

package/dist/constants.js

@@ -0,0 +1,15 @@
+import {
+  ADDON_ID,
+  COLOR_MODE_TOOL_ID,
+  DIRECTION_TOOL_ID,
+  EVENTS,
+  THEME_TOOL_ID
+} from "./chunk-HSBRF2QZ.js";
+import "./chunk-UK7U2PBM.js";
+export {
+  ADDON_ID,
+  COLOR_MODE_TOOL_ID,
+  DIRECTION_TOOL_ID,
+  EVENTS,
+  THEME_TOOL_ID
+};

package/dist/feature/arg-types.cjs

@@ -0,0 +1,76 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/feature/arg-types.ts
+var arg_types_exports = {};
+__export(arg_types_exports, {
+  getThemingArgTypes: () => getThemingArgTypes
+});
+module.exports = __toCommonJS(arg_types_exports);
+function validateColorScheme(value) {
+  const valueKeys = Object.keys(value || {});
+  return [
+    "50",
+    "100",
+    "200",
+    "300",
+    "400",
+    "500",
+    "600",
+    "700",
+    "800",
+    "900"
+  ].every((term) => valueKeys.includes(term));
+}
+function getThemingArgTypes(theme, componentName) {
+  var _a, _b, _c, _d;
+  const component = theme.components[componentName];
+  if (!component) {
+    return void 0;
+  }
+  const argTypes = {};
+  const variantOptions = Object.keys(component.variants || {});
+  if (variantOptions.length) {
+    argTypes.variant = {
+      type: { name: "enum", value: variantOptions },
+      defaultValue: (_a = component.defaultProps) == null ? void 0 : _a.variant
+    };
+  }
+  const sizeOptions = Object.keys(component.sizes || {});
+  if (sizeOptions.length) {
+    argTypes.size = {
+      type: { name: "enum", value: sizeOptions },
+      defaultValue: (_b = component.defaultProps) == null ? void 0 : _b.size
+    };
+  }
+  if ((_c = component.defaultProps) == null ? void 0 : _c["colorScheme"]) {
+    const colorSchemes = Object.entries(theme.colors).filter(([, value]) => validateColorScheme(value)).map(([key]) => key);
+    if (colorSchemes.length) {
+      argTypes.colorScheme = {
+        type: { name: "enum", value: colorSchemes },
+        defaultValue: (_d = component.defaultProps) == null ? void 0 : _d.colorScheme
+      };
+    }
+  }
+  return argTypes;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getThemingArgTypes
+});

package/dist/feature/arg-types.d.ts

@@ -0,0 +1,46 @@
+import { ArgTypes } from '@storybook/react';
+import { ThemingProps } from '@chakra-ui/react';
+
+/**
+ * `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 { ThemingArgTypeKey, getThemingArgTypes };

package/dist/feature/arg-types.js

@@ -0,0 +1,7 @@
+import {
+  getThemingArgTypes
+} from "../chunk-NOGSFSIA.js";
+import "../chunk-UK7U2PBM.js";
+export {
+  getThemingArgTypes
+};