reshaped 3.6.0-canary.3 → 3.6.0-canary.4

package/dist/components/Avatar/Avatar.module.css

@@ -1 +1 @@
-.root{align-items:center;aspect-ratio:1;display:flex;font-size:calc(var(--rs-h) / 3);font-weight:700;justify-content:center;line-height:100%}.img{border-radius:inherit;height:100%;object-fit:cover;width:100%}.--variant-faded.--color-neutral{color:var(--rs-color-foreground-neutral)}.--variant-faded.--color-critical{color:var(--rs-color-foreground-critical)}.--variant-faded.--color-positive{color:var(--rs-color-foreground-positive)}.--variant-faded.--color-warning{color:var(--rs-color-foreground-warning)}.--variant-faded.--color-primary{color:var(--rs-color-foreground-primary)}
+.root{align-items:center;aspect-ratio:1;display:flex;font-size:calc(var(--rs-h) / 3);font-weight:var(--rs-font-weight-bold);justify-content:center;line-height:100%}.img{border-radius:inherit;height:100%;object-fit:cover;width:100%}.--variant-faded.--color-neutral{color:var(--rs-color-foreground-neutral)}.--variant-faded.--color-critical{color:var(--rs-color-foreground-critical)}.--variant-faded.--color-positive{color:var(--rs-color-foreground-positive)}.--variant-faded.--color-warning{color:var(--rs-color-foreground-warning)}.--variant-faded.--color-primary{color:var(--rs-color-foreground-primary)}

package/dist/components/Reshaped/Reshaped.js

@@ -16,11 +16,11 @@ const ReshapedInner = (props) => {
     return (_jsx(SingletonKeyboardModeProvider, { children: _jsx(SingletonEnvironmentContext.Provider, { value: { rtl: rtlState, defaultViewport }, children: _jsx(SingletonHotkeysProvider, { children: _jsx(ToastProvider, { options: toastOptions, children: children }) }) }) }));
 };
 const Reshaped = (props) => {
-    const { theme, defaultTheme = "reshaped", defaultColorMode, scoped, className } = props;
+    const { theme, defaultTheme = "reshaped", colorMode, defaultColorMode, scoped, className, } = props;
     const rootClassNames = classNames(s.root, className);
     const scopeRef = React.useRef(null);
     const parentGlobalColorMode = useGlobalColorMode();
-    return (_jsx(GlobalColorMode, { defaultMode: defaultColorMode || parentGlobalColorMode.mode || "light", scopeRef: !!parentGlobalColorMode && scoped ? scopeRef : undefined, children: _jsx(PrivateTheme, { name: theme, defaultName: defaultTheme, className: rootClassNames, scoped: scoped, scopeRef: !!parentGlobalColorMode && scoped ? scopeRef : undefined, children: _jsx(ReshapedInner, { ...props, children: props.children }) }) }));
+    return (_jsx(GlobalColorMode, { defaultMode: defaultColorMode || parentGlobalColorMode.mode || "light", mode: colorMode, scopeRef: !!parentGlobalColorMode && scoped ? scopeRef : undefined, children: _jsx(PrivateTheme, { name: theme, defaultName: defaultTheme, className: rootClassNames, scoped: scoped, scopeRef: !!parentGlobalColorMode && scoped ? scopeRef : undefined, children: _jsx(ReshapedInner, { ...props, children: props.children }) }) }));
 };
 Reshaped.displayName = "Reshaped";
 export default Reshaped;

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

@@ -7,6 +7,7 @@ export type Props = {
     theme?: NonNullable<ThemeProps["name"]>;
     defaultTheme?: NonNullable<ThemeProps["defaultName"]>;
     defaultRTL?: boolean;
+    colorMode?: GlobalColorModeProps["mode"];
     defaultColorMode?: GlobalColorModeProps["defaultMode"];
     defaultViewport?: G.Viewport;
     toastOptions?: ToastProviderProps["options"];

package/dist/components/Reshaped/tests/Reshaped.stories.d.ts

@@ -10,6 +10,7 @@ export declare const rtl: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const controlledMode: StoryObj;
 export declare const lightMode: {
     name: string;
     render: () => import("react").JSX.Element;

package/dist/components/Reshaped/tests/Reshaped.stories.js

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { expect, userEvent } from "storybook/test";
 import { useTheme } from "../../Theme/index.js";
 import Button from "../../Button/index.js";
@@ -14,6 +15,25 @@ export const rtl = {
 			Hello
 		</Reshaped>),
 };
+export const controlledMode = {
+    name: "colorMode, controlled",
+    render: () => {
+        const [mode, setMode] = useState("dark");
+        return (<Reshaped theme="reshaped" colorMode={mode}>
+				<Button onClick={() => {
+                setMode(mode === "dark" ? "light" : "dark");
+            }}>
+					Toggle color mode
+				</Button>
+			</Reshaped>);
+    },
+    play: async ({ canvas }) => {
+        const button = canvas.getAllByRole("button")[0];
+        expect(document.documentElement.getAttribute("data-rs-color-mode")).toEqual("dark");
+        await userEvent.click(button);
+        expect(document.documentElement.getAttribute("data-rs-color-mode")).toEqual("light");
+    },
+};
 export const lightMode = {
     name: "defaultColorMode=light",
     render: () => <Reshaped theme="reshaped">Hello</Reshaped>,

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/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/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.3",
+	"version": "3.6.0-canary.4",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",