reshaped 3.6.0-canary.2 → 3.6.0-canary.4

package/dist/components/TextArea/tests/TextArea.test.stories.d.ts

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").TextAreaProps> & {

package/dist/components/TextArea/tests/TextArea.test.stories.js

@@ -1,4 +1,4 @@
-import { expect, fn, userEvent } from "@storybook/test";
+import { expect, fn, userEvent } from "storybook/test";
 import TextArea from "../index.js";
 export default {
     title: "Components/TextArea/tests",

package/dist/components/TextField/tests/TextField.test.stories.d.ts

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").TextFieldProps> & {

package/dist/components/TextField/tests/TextField.test.stories.js

@@ -1,4 +1,4 @@
-import { expect, fn, userEvent } from "@storybook/test";
+import { expect, fn, userEvent } from "storybook/test";
 import TextField from "../index.js";
 export default {
     title: "Components/TextField/tests",

package/dist/components/Theme/GlobalColorMode.js

@@ -7,7 +7,7 @@ import { useGlobalColorMode } from "./useTheme.js";
 import { GlobalColorModeContext } from "./Theme.context.js";
 import { getRootThemeEl } from "./Theme.utilities.js";
 const GlobalColorMode = (props) => {
-    const { defaultMode, scopeRef, children } = props;
+    const { defaultMode, mode: passedMode, scopeRef, children } = props;
     const [mode, setMode] = React.useState(defaultMode);
     const parentGlobalColorMode = useGlobalColorMode();
     const changeColorMode = React.useCallback((targetMode) => {
@@ -15,19 +15,14 @@ const GlobalColorMode = (props) => {
         if (parentGlobalColorMode.mode && !scopeRef) {
             parentGlobalColorMode.setMode(targetMode);
         }
-        setMode((prevMode) => {
-            if (prevMode !== targetMode) {
-                // Avoid components styles animating when switching to another color mode
-                disableTransitions();
-            }
-            return targetMode;
-        });
+        setMode(targetMode);
     }, [scopeRef, parentGlobalColorMode]);
     useIsomorphicLayoutEffect(() => {
+        disableTransitions();
         onNextFrame(() => {
             enableTransitions();
         });
-    }, [mode]);
+    }, [mode, passedMode]);
     /**
      * In case color mode was set in html but was not provided to the provider - hydrate the state
      * This could happen if we're receiving the mode on the client but before React hydration
@@ -38,12 +33,12 @@ const GlobalColorMode = (props) => {
             changeColorMode(nextColorMode);
     }, [changeColorMode, scopeRef]);
     const value = React.useMemo(() => ({
-        mode,
+        mode: passedMode || mode,
         setMode: changeColorMode,
         invertMode: () => {
             changeColorMode(mode === "light" ? "dark" : "light");
         },
-    }), [mode, changeColorMode]);
+    }), [mode, passedMode, changeColorMode]);
     return (_jsx(GlobalColorModeContext.Provider, { value: value, children: children }));
 };
 GlobalColorMode.displayName = "GlobalColorMode";

package/dist/components/Theme/Theme.types.d.ts

@@ -25,6 +25,7 @@ export type PrivateProps = Props & {
     scopeRef?: React.RefObject<HTMLDivElement | null>;
 };
 export type GlobalColorModeProps = {
+    mode?: ColorMode;
     defaultMode: ColorMode;
     scopeRef?: React.RefObject<HTMLDivElement | null>;
     children?: React.ReactNode;

package/dist/components/Theme/index.d.ts

@@ -1,4 +1,4 @@
 export { default, PrivateTheme } from "./Theme";
 export { default as GlobalColorMode } from "./GlobalColorMode";
 export { useTheme } from "./useTheme";
-export type { Props as ThemeProps, GlobalColorModeProps } from "./Theme.types";
+export type { Props as ThemeProps, GlobalColorModeProps, ColorMode } from "./Theme.types";

package/dist/components/Theme/tests/Theme.test.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").ThemeProps>;

package/dist/components/Theme/tests/Theme.test.stories.js

@@ -1,4 +1,4 @@
-import { expect, userEvent } from "@storybook/test";
+import { expect, userEvent } from "storybook/test";
 import Card from "../../Card/index.js";
 import Button from "../../Button/index.js";
 import View from "../../View/index.js";

package/dist/components/Timeline/tests/Timeline.test.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").TimelineProps> & {

package/dist/components/Timeline/tests/Timeline.test.stories.js

@@ -1,4 +1,4 @@
-import { expect } from "@storybook/test";
+import { expect } from "storybook/test";
 import Timeline from "../index.js";
 export default {
     title: "Components/Timeline/tests",

package/dist/components/Toast/tests/Toast.test.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     parameters: {

package/dist/components/Toast/tests/Toast.test.stories.js

@@ -1,4 +1,4 @@
-import { expect, within, userEvent, waitFor } from "@storybook/test";
+import { expect, within, userEvent, waitFor } from "storybook/test";
 import { useToast, ToastProvider } from "../index.js";
 import Button from "../../Button/index.js";
 export default {

package/dist/components/Tooltip/tests/Tooltip.test.stories.d.ts

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").TooltipProps>;

package/dist/components/Tooltip/tests/Tooltip.test.stories.js

@@ -1,4 +1,4 @@
-import { expect, fn, userEvent, within, waitFor } from "@storybook/test";
+import { expect, fn, userEvent, within, waitFor } from "storybook/test";
 import Tooltip from "../index.js";
 import Button from "../../Button/index.js";
 export default {

package/dist/components/View/tests/View.test.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: {

package/dist/components/View/tests/View.test.stories.js

@@ -1,4 +1,4 @@
-import { expect } from "@storybook/test";
+import { expect } from "storybook/test";
 import View from "../index.js";
 export default {
     title: "Utility components/View/tests",

package/dist/hooks/tests/useDrag.stories.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     parameters: {

package/dist/hooks/tests/useDrag.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { fireEvent, fn, expect } from "@storybook/test";
+import { fireEvent, fn, expect } from "storybook/test";
 import View from "../../components/View/index.js";
 import useDrag from "../_private/useDrag.js";
 import useToggle from "../useToggle.js";

package/dist/hooks/tests/useElementId.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     parameters: {

package/dist/hooks/tests/useElementId.stories.js

@@ -1,4 +1,4 @@
-import { expect, waitFor } from "@storybook/test";
+import { expect, waitFor } from "storybook/test";
 import useElementId from "../useElementId.js";
 export default {
     title: "Hooks/useElementId",

package/dist/hooks/tests/useHandlerRef.stories.d.ts

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { Mock } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { Mock } from "storybook/test";
 declare const _default: {
     title: string;
     parameters: {

package/dist/hooks/tests/useHandlerRef.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { expect, fn, userEvent } from "@storybook/test";
+import { expect, fn, userEvent } from "storybook/test";
 import Button from "../../components/Button/index.js";
 import View from "../../components/View/index.js";
 import useHandlerRef from "../useHandlerRef.js";

package/dist/hooks/tests/useHotkeys.stories.d.ts

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     parameters: {

package/dist/hooks/tests/useHotkeys.stories.js

@@ -1,4 +1,4 @@
-import { expect, fn, userEvent } from "@storybook/test";
+import { expect, fn, userEvent } from "storybook/test";
 import View from "../../components/View/index.js";
 import useHotkeys from "../useHotkeys.js";
 export default {

package/dist/hooks/tests/useKeyboardMode.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     parameters: {

package/dist/hooks/tests/useKeyboardMode.stories.js

@@ -1,4 +1,4 @@
-import { expect, userEvent } from "@storybook/test";
+import { expect, userEvent } from "storybook/test";
 import Button from "../../components/Button/index.js";
 import View from "../../components/View/index.js";
 import useKeyboardMode from "../useKeyboardMode.js";

package/dist/hooks/tests/useOnClickOutside.stories.d.ts

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { type Mock } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { type Mock } from "storybook/test";
 declare const _default: {
     title: string;
     parameters: {

package/dist/hooks/tests/useOnClickOutside.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { expect, fn, userEvent } from "@storybook/test";
+import { expect, fn, userEvent } from "storybook/test";
 import Button from "../../components/Button/index.js";
 import useOnClickOutside from "../useOnClickOutside.js";
 import View from "../../components/View/index.js";

package/dist/hooks/tests/useRTL.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     parameters: {

package/dist/hooks/tests/useRTL.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { expect } from "@storybook/test";
+import { expect } from "storybook/test";
 import useRTL from "../useRTL.js";
 export default {
     title: "Hooks/useRTL",

package/dist/hooks/tests/useScrollLock.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     parameters: {

package/dist/hooks/tests/useScrollLock.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { expect, userEvent } from "@storybook/test";
+import { expect, userEvent } from "storybook/test";
 import { Example } from "../../utilities/storybook/index.js";
 import Button from "../../components/Button/index.js";
 import useScrollLock from "../useScrollLock.js";

package/dist/hooks/tests/useToggle.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     parameters: {

package/dist/hooks/tests/useToggle.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { expect, userEvent } from "@storybook/test";
+import { expect, userEvent } from "storybook/test";
 import Button from "../../components/Button/index.js";
 import useToggle from "../useToggle.js";
 export default {

package/dist/index.d.ts

@@ -127,6 +127,7 @@ export type { ViewProps, ViewItemProps } from "./components/View";
  */
 export { useFormControl } from "./components/FormControl";
 export { default as Theme, useTheme, type ThemeProps } from "./components/Theme";
+export type { ColorMode } from "./components/Theme";
 export { default as useHandlerRef } from "./hooks/useHandlerRef";
 export { default as useHotkeys } from "./hooks/useHotkeys";
 export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect";

package/dist/utilities/a11y/tests/TrapFocus.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
 };

package/dist/utilities/a11y/tests/TrapFocus.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { expect, userEvent } from "@storybook/test";
+import { expect, userEvent } from "storybook/test";
 import { Example } from "../../storybook/index.js";
 import Button from "../../../components/Button/index.js";
 import useToggle from "../../../hooks/useToggle.js";

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "3.6.0-canary.2",
+	"version": "3.6.0-canary.4",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -96,35 +96,31 @@
 		"@commitlint/cli": "19.8.1",
 		"@commitlint/config-conventional": "19.8.1",
 		"@commitlint/types": "19.8.1",
-		"@eslint/js": "9.26.0",
+		"@eslint/js": "9.27.0",
 		"@size-limit/preset-big-lib": "11.2.0",
-		"@storybook/addon-a11y": "8.6.12",
-		"@storybook/addon-actions": "8.6.12",
-		"@storybook/addon-controls": "8.6.12",
-		"@storybook/addon-docs": "8.6.12",
-		"@storybook/addon-storysource": "8.6.12",
-		"@storybook/experimental-addon-test": "8.6.12",
-		"@storybook/react": "8.6.12",
-		"@storybook/react-vite": "8.6.12",
+		"@storybook/addon-a11y": "9.0.0-rc.2",
+		"@storybook/addon-docs": "9.0.0-rc.2",
+		"@storybook/addon-vitest": "9.0.0-rc.2",
+		"@storybook/react-vite": "9.0.0-rc.2",
 		"@types/culori": "4.0.0",
 		"@types/events": "3.0.3",
-		"@types/node": "22.15.17",
-		"@types/react": "19.1.3",
-		"@types/react-dom": "19.1.3",
+		"@types/node": "22.15.19",
+		"@types/react": "19.1.4",
+		"@types/react-dom": "19.1.5",
 		"@vitejs/plugin-react": "4.4.1",
-		"@vitest/browser": "3.1.3",
-		"@vitest/coverage-istanbul": "3.1.3",
-		"@vitest/coverage-v8": "3.1.3",
+		"@vitest/browser": "3.1.4",
+		"@vitest/coverage-istanbul": "3.1.4",
+		"@vitest/coverage-v8": "3.1.4",
 		"chromatic": "11.28.2",
-		"conventional-changelog-cli": "^5.0.0",
+		"conventional-changelog-cli": "5.0.0",
 		"cz-conventional-changelog": "3.3.0",
-		"eslint": "9.26.0",
+		"eslint": "9.27.0",
 		"eslint-config-prettier": "10.1.5",
 		"eslint-plugin-jsx-a11y": "6.10.2",
 		"eslint-plugin-prettier": "5.4.0",
 		"eslint-plugin-react": "7.37.5",
 		"eslint-plugin-react-hooks": "5.2.0",
-		"lefthook": "1.11.12",
+		"lefthook": "1.11.13",
 		"playwright": "1.52.0",
 		"postcss": "8.5.3",
 		"postcss-cli": "11.0.1",
@@ -136,17 +132,17 @@
 		"react-shadow": "20.6.0",
 		"resolve-tspaths": "0.8.23",
 		"size-limit": "11.2.0",
-		"storybook": "8.6.12",
+		"storybook": "9.0.0-rc.2",
 		"stylelint": "16.19.1",
 		"stylelint-config-prettier": "9.0.5",
 		"stylelint-config-standard": "38.0.0",
 		"ts-node": "10.9.2",
 		"typescript": "5.8.3",
-		"typescript-eslint": "8.32.0",
+		"typescript-eslint": "8.32.1",
 		"vite": "6.3.5",
 		"vite-tsconfig-paths": "5.1.4",
-		"vitest": "3.1.3",
-		"vitest-browser-react": "0.1.1"
+		"vitest": "3.1.4",
+		"vitest-browser-react": "0.2.0"
 	},
 	"peerDependencies": {
 		"postcss": "^8",