{"_id":"@chakra-v2/storybook-addon","_rev":"2-a10dac7d94f8d673532575f9816c99a0","name":"@chakra-v2/storybook-addon","dist-tags":{"next":"6.0.0-next.0","latest":"6.0.0-next.1"},"versions":{"6.0.0-next.0":{"name":"@chakra-v2/storybook-addon","version":"6.0.0-next.0","keywords":["storybook-addon","chakra-ui","storybook","addons","dark-mode"],"author":{"name":"Andres Tuñón","email":"andressp@ngxcoder.dev"},"license":"MIT","_id":"@chakra-v2/storybook-addon@6.0.0-next.0","maintainers":[{"name":"anilanar","email":"anilanar@hotmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c2ddaaebeee8cc900001f23ab593e230510f4e08","tarball":"https://registry.npmjs.org/@chakra-v2/storybook-addon/-/storybook-addon-6.0.0-next.0.tgz","fileCount":34,"integrity":"sha512-CdjAgZXm0LyfZhHm1G6Y1oZSzTVZokrCfX8+jFF2d6s90rxcjiS+wNZ+YrjmiH640BtxyDqWmjRnfr7QH6H04A==","signatures":[{"sig":"MEYCIQDle/bMA/k0LHM1WCSRIO3ziJ3tVkQE6zEtgGAVQEBsLQIhANnYq+fPn4gD8iKVer6IigHo+6ZFmmG1EXE11FQfmSd6","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":84525},"main":"dist/cjs/index.cjs","_from":"file:chakra-v2-storybook-addon-6.0.0-next.0.tgz","types":"dist/types/index.d.ts","module":"dist/esm/index.mjs","exports":{".":{"import":{"types":"./dist/types/index.d.ts","default":"./dist/esm/index.mjs"},"require":{"types":"./dist/types/index.d.ts","default":"./dist/cjs/index.cjs"}},"./manager":{"import":{"types":"./dist/types/manager.d.ts","default":"./dist/esm/manager.mjs"},"require":{"types":"./dist/types/manager.d.ts","default":"./dist/cjs/manager.cjs"}},"./preview":{"import":{"types":"./dist/types/preview.d.ts","default":"./dist/esm/preview.mjs"},"require":{"types":"./dist/types/preview.d.ts","default":"./dist/cjs/preview.cjs"}},"./arg-types":{"import":{"types":"./dist/types/arg-types.d.ts","default":"./dist/esm/arg-types.mjs"},"require":{"types":"./dist/types/arg-types.d.ts","default":"./dist/cjs/arg-types.cjs"}},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast --watch","build":"tsup --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup"},"_npmUser":{"name":"anilanar","email":"anilanar@hotmail.com"},"_resolved":"/private/var/folders/sc/c83kyhpn38x5kj_mbj8yx7s80000gn/T/ac05f5d8db7b3ef4dbb937ed5c98992e/chakra-v2-storybook-addon-6.0.0-next.0.tgz","storybook":{"icon":"https://raw.githubusercontent.com/chakra-ui/chakra-ui/main/logo/logomark-colored.svg","displayName":"Chakra UI","supportedFrameworks":["react"],"unsupportedFrameworks":["Vue","Angular","Svelte"]},"_integrity":"sha512-CdjAgZXm0LyfZhHm1G6Y1oZSzTVZokrCfX8+jFF2d6s90rxcjiS+wNZ+YrjmiH640BtxyDqWmjRnfr7QH6H04A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"tooling/storybook-addon"},"_npmVersion":"10.8.2","description":"The official Storybook Addon for Chakra UI","directories":{},"_nodeVersion":"20.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","@chakra-v2/react":"2.11.0-next.0","@storybook/types":"^7.3.2","@storybook/components":"^7.5.3","@storybook/manager-api":"^7.5.3","@storybook/preview-api":"^7.5.3"},"peerDependencies":{"react":">=16.8.x","@chakra-v2/react":">=2.11.0-next.0","@storybook/types":">=7.0.24","@storybook/components":">=7.0.12","@storybook/manager-api":">=7.0.12","@storybook/preview-api":">=7.0.12"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/storybook-addon_6.0.0-next.0_1738573198389_0.886532289428765","host":"s3://npm-registry-packages-npm-production"}},"6.0.0-next.1":{"name":"@chakra-v2/storybook-addon","version":"6.0.0-next.1","description":"The official Storybook Addon for Chakra UI","main":"dist/cjs/index.cjs","module":"dist/esm/index.mjs","types":"dist/types/index.d.ts","repository":{"type":"git","url":"git+https://github.com/chakra-ui/chakra-ui.git","directory":"tooling/storybook-addon"},"keywords":["storybook-addon","chakra-ui","storybook","addons","dark-mode"],"author":{"name":"Andres Tuñón","email":"andressp@ngxcoder.dev"},"license":"MIT","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"homepage":"https://github.com/chakra-ui/chakra-ui#readme","devDependencies":{"@storybook/components":"^7.5.3","@storybook/manager-api":"^7.5.3","@storybook/preview-api":"^7.5.3","@storybook/types":"^7.3.2","react":"^18.2.0","@chakra-v2/react":"3.0.0-next.11"},"peerDependencies":{"@chakra-v2/react":">=3.0.0-next.11","@storybook/components":">=7.0.12","@storybook/manager-api":">=7.0.12","@storybook/preview-api":">=7.0.12","@storybook/types":">=7.0.24","react":">=16.8.x"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"publishConfig":{"access":"public"},"storybook":{"displayName":"Chakra UI","supportedFrameworks":["react"],"unsupportedFrameworks":["Vue","Angular","Svelte"],"icon":"https://raw.githubusercontent.com/chakra-ui/chakra-ui/main/logo/logomark-colored.svg"},"exports":{".":{"import":{"types":"./dist/types/index.d.ts","default":"./dist/esm/index.mjs"},"require":{"types":"./dist/types/index.d.ts","default":"./dist/cjs/index.cjs"}},"./arg-types":{"import":{"types":"./dist/types/arg-types.d.ts","default":"./dist/esm/arg-types.mjs"},"require":{"types":"./dist/types/arg-types.d.ts","default":"./dist/cjs/arg-types.cjs"}},"./manager":{"import":{"types":"./dist/types/manager.d.ts","default":"./dist/esm/manager.mjs"},"require":{"types":"./dist/types/manager.d.ts","default":"./dist/cjs/manager.cjs"}},"./preview":{"import":{"types":"./dist/types/preview.d.ts","default":"./dist/esm/preview.mjs"},"require":{"types":"./dist/types/preview.d.ts","default":"./dist/cjs/preview.cjs"}},"./package.json":"./package.json"},"scripts":{"build":"tsup --dts","build:fast":"tsup","dev":"pnpm build:fast --watch","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit"},"_id":"@chakra-v2/storybook-addon@6.0.0-next.1","_integrity":"sha512-I8WRDAV8Rwiud7Wg+9hslZuHRmNpfRzKesviK90U2c85hZ+yt/+ldNJnGje97od7AxjosJA1OImUs3xFaR7pgw==","_resolved":"/private/var/folders/sc/c83kyhpn38x5kj_mbj8yx7s80000gn/T/d65372662d34ebd2cc96606275b7f53f/chakra-v2-storybook-addon-6.0.0-next.1.tgz","_from":"file:chakra-v2-storybook-addon-6.0.0-next.1.tgz","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-I8WRDAV8Rwiud7Wg+9hslZuHRmNpfRzKesviK90U2c85hZ+yt/+ldNJnGje97od7AxjosJA1OImUs3xFaR7pgw==","shasum":"618b73f80b5a2ac63409dff893e316526664be41","tarball":"https://registry.npmjs.org/@chakra-v2/storybook-addon/-/storybook-addon-6.0.0-next.1.tgz","fileCount":34,"unpackedSize":84525,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEZtsZBBrHo+8m84dvvvWTaAWb0dv1TZR75KCYOvtc/6AiEA0mjW6ZMkXhybuuaWkuo5Gb45OXi5Y+sKgGQsMelp51E="}]},"_npmUser":{"name":"anilanar","email":"anilanar@hotmail.com"},"directories":{},"maintainers":[{"name":"anilanar","email":"anilanar@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/storybook-addon_6.0.0-next.1_1764073175673_0.9304850719258964"},"_hasShrinkwrap":false}},"time":{"created":"2025-02-03T08:59:58.284Z","modified":"2025-11-25T12:19:36.065Z","6.0.0-next.0":"2025-02-03T08:59:58.573Z","6.0.0-next.1":"2025-11-25T12:19:35.869Z"},"bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"author":{"name":"Andres Tuñón","email":"andressp@ngxcoder.dev"},"license":"MIT","homepage":"https://github.com/chakra-ui/chakra-ui#readme","keywords":["storybook-addon","chakra-ui","storybook","addons","dark-mode"],"repository":{"type":"git","url":"git+https://github.com/chakra-ui/chakra-ui.git","directory":"tooling/storybook-addon"},"description":"The official Storybook Addon for Chakra UI","maintainers":[{"name":"anilanar","email":"anilanar@hotmail.com"}],"readme":"# @chakra-ui/storybook-addon\n\nUse Chakra UI in your Storybook stories.\n\nThis Plugin wraps each of your stories with [`ChakraProvider`][chakraprovider]\nwhich can be configured using Storybook parameters.\n\n## Installation\n\n### yarn\n\n```sh\nyarn add -D @chakra-ui/storybook-addon\n```\n\n### npm\n\n```sh\nnpm i -D @chakra-ui/storybook-addon\n```\n\nAdd the addon to your configuration in `.storybook/main.js` and disable the\nemotion alias (available with Storybook >6.4).\n\n```js\nmodule.exports = {\n  addons: [\"@chakra-ui/storybook-addon\"],\n  features: {\n    emotionAlias: false,\n  },\n}\n```\n\n## Configuring `ChakraProvider`\n\nIf you need to customize the props passed to `ChakraProvider` for your stories\n(to use a custom `theme`, for example), you'll need to create custom Storybook\nparameters.\n\nTo set global parameters for this addon, add a `chakra` object to the\n`parameters` export in `.storybook/preview.js`:\n\n```js\nimport myTheme from \"../theme\"\n\nexport const parameters = {\n  chakra: {\n    theme: myTheme,\n  },\n}\n```\n\nThe `chakra` parameters take the same shape as the `props` for `ChakraProvider`.\n[See the `ChakraProvider` props table][chakraprovider] to see the list of\npossible parameters.\n\n### Overriding `ChakraProvider` configuration for individual components or stories\n\nStorybook allows you to define parameters at multiple levels: global, component,\nand story. We recommend setting default parameters at the global level, and\noverriding them at the component or story when necessary. See the\n[Storybook Parameters documentation](https://storybook.js.org/docs/react/writing-stories/parameters)\nfor more information.\n\n## Color Mode Tool\n\nYou will be able to toggle your color mode with the button in the toolbar. It\ntries to sync with your theme through the localstorage key.\n\n## Story Controls for Theme Components\n\nGet controls for the theming props `variant`, `size` and `colorScheme` in your\nstories with `getThemingArgTypes(theme, componentName)`.\n\n```tsx\nimport { Meta, StoryFn } from \"@storybook/react\"\nimport { getThemingArgTypes } from \"@chakra-ui/storybook-addon\"\nimport { theme } from \"<your-theme>\"\n\nexport default {\n  title: \"Components / Forms / Button\",\n  // get controls for `variant`, `size` and `colorScheme`\n  argTypes: getThemingArgTypes(theme, \"Button\"),\n} as Meta\n\ninterface StoryProps extends ThemingProps<\"Button\"> {}\n\nexport const Basic: StoryFn<StoryProps> = (props) => (\n  <Button {...props}>Button</Button>\n)\n```\n\nThis will render input fields to choose the theming prop values:\n\n![Storybook screenshot with controls tab](theming-arg-types.png)\n\n[chakraprovider]:\n  https://v2.chakra-ui.com/docs/getting-started#chakraprovider-props\n","readmeFilename":"README.md"}