reshaped 3.3.10 → 3.3.12

package/dist/utilities/scroll/lockStandard.d.ts

@@ -1,2 +1,5 @@
-declare const lockStandardScroll: (containerEl?: HTMLElement | null) => () => void;
+declare const lockStandardScroll: (args: {
+    containerEl?: HTMLElement | null;
+    originEl?: HTMLElement | null;
+}) => () => void;
 export default lockStandardScroll;

package/dist/utilities/scroll/lockStandard.js

@@ -1,8 +1,13 @@
+import { findClosestRenderContainer } from "../dom/index.js";
 import { getScrollbarWidth } from "./helpers.js";
 import { StyleCache } from "../css.js";
 const styleCache = new StyleCache();
-const lockStandardScroll = (containerEl) => {
-    const container = containerEl || document.body;
+const lockStandardScroll = (args) => {
+    let container = document.body;
+    if (args.originEl)
+        container = findClosestRenderContainer({ el: args.originEl });
+    if (args.containerEl)
+        container = args.containerEl;
     const rect = container.getBoundingClientRect();
     const isOverflowing = rect.left + rect.right < window.innerWidth;
     styleCache.set(container, { overflow: "hidden" });

package/dist/utilities/storybook/Example.js

@@ -1,14 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import View from "../../components/View/index.js";
 import Text from "../../components/Text/index.js";
-import s from "./Example.module.css";
 const Example = (props) => {
     return (_jsxs(View, { gap: 3, attributes: props.title ? { style: { marginTop: -17 } } : undefined, children: [props.title && (_jsx(View, { bleed: 4, paddingInline: 4, paddingBlock: 3, backgroundColor: "neutral-faded", borderColor: "neutral-faded", position: "sticky", insetTop: 0, zIndex: 100, children: props.title })), props.children] }));
 };
 const ExampleItem = (props) => {
     const { children } = props;
     const title = typeof props.title === "string" ? [props.title] : props.title;
-    return (_jsxs(View, { borderColor: "neutral-faded", borderRadius: "medium", overflow: "hidden", backgroundColor: "elevation-base", children: [title && (_jsx(View, { paddingInline: 4, paddingBlock: 3, backgroundColor: "neutral-faded", children: title.map((line, index) => (_jsx(Text, { variant: "body-3", color: index > 0 ? "neutral-faded" : "neutral", children: line }, index))) })), _jsx(View, { padding: 4, className: s.root, children: children })] }));
+    return (_jsxs(View, { borderColor: "neutral-faded", borderRadius: "medium", overflow: "hidden", backgroundColor: "elevation-base", children: [title && (_jsx(View, { paddingInline: 4, paddingBlock: 3, backgroundColor: "neutral-faded", children: title.map((line, index) => (_jsx(Text, { variant: "body-3", color: index > 0 ? "neutral-faded" : "neutral", children: line }, index))) })), _jsx(View, { padding: 4, backgroundColor: "page", children: children })] }));
 };
 Example.Item = ExampleItem;
 export default Example;

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.3.10",
+	"version": "3.3.12",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -63,7 +63,7 @@
 		"reshaped": "./bin/cli.js"
 	},
 	"scripts": {
-		"dev": "storybook dev -c tools/storybook -p 3001 --disable-telemetry",
+		"dev": "storybook dev -p 3001 --disable-telemetry",
 		"clean": "sh ./bin/clean.sh",
 		"build": "yarn clean && yarn build:stories && yarn build:esm && yarn build:css && yarn build:cjs && yarn build:bundle",
 		"build:themes": "node bin/cli.js theming --config dist/cjs/cli/theming/reshaped.config.js --output src/themes",
@@ -71,9 +71,11 @@
 		"build:cjs": "tsc -p tsconfig.cjs.json && resolve-tspaths -p tsconfig.cjs.json && node ./bin/format-cjs-build.js",
 		"build:css": "postcss \"src/**/*.css\" --dir dist --base src --config tools/build",
 		"build:stories": "tsc -p tsconfig.stories.json && resolve-tspaths -p tsconfig.stories.json",
-		"build:bundle": "vite build && mv dist/bundle.umd.js dist/bundle.js && cp dist/index.d.ts dist/bundle.d.ts",
-		"build:storybook": "storybook build -c tools/storybook -o dist/app --disable-telemetry",
-		"build:chromatic": "STORYBOOK_ENV=chromatic storybook build -c tools/storybook",
+		"build:bundle:vite": "vite build",
+		"build:bundle": "yarn build:bundle:vite && cp dist/index.d.ts dist/bundle.d.ts",
+		"build:size": "yarn clean && yarn build:esm && yarn build:bundle:vite",
+		"build:storybook": "storybook build -o dist/app --disable-telemetry",
+		"build:chromatic": "STORYBOOK_ENV=chromatic storybook build",
 		"release": "read -p 'Have you updated chromatic tests?' && yarn release:lib && yarn release:source && yarn build:storybook && yarn release:copy",
 		"release:lib": "yarn build && yarn publish",
 		"release:beta": "yarn build && yarn publish --tag beta",
@@ -82,7 +84,8 @@
 		"release:copy": "sh ./bin/release-copy.sh",
 		"chromatic": "chromatic -b build:chromatic --project-token=$(cat .chromatic)",
 		"test:vrt": "yarn chromatic",
-		"test:unit": "jest --config tools/jest/jest.config.ts",
+		"test:browser": "vitest run --project=storybook",
+		"test:unit": "vitest run --project=unit",
 		"test:size": "size-limit",
 		"lint": "yarn lint:js && yarn lint:css",
 		"lint:js": "eslint './src/**/*.{ts,tsx}' --fix",
@@ -99,24 +102,24 @@
 		"@eslint/js": "9.16.0",
 		"@size-limit/preset-big-lib": "11.1.6",
 		"@storybook/addon-a11y": "8.5.2",
+		"@storybook/addon-actions": "8.5.2",
 		"@storybook/addon-controls": "8.5.2",
 		"@storybook/addon-docs": "8.5.2",
 		"@storybook/addon-storysource": "8.5.2",
+		"@storybook/experimental-addon-test": "8.5.2",
 		"@storybook/react": "8.5.2",
 		"@storybook/react-vite": "8.5.2",
-		"@testing-library/dom": "10.4.0",
-		"@testing-library/jest-dom": "6.6.3",
-		"@testing-library/react": "16.0.1",
-		"@testing-library/user-event": "14.5.2",
 		"@types/culori": "2.1.1",
 		"@types/events": "3.0.3",
-		"@types/jest": "29.5.14",
 		"@types/node": "22.10.1",
 		"@types/react": "19.0.8",
 		"@types/react-dom": "19.0.3",
 		"@typescript-eslint/eslint-plugin": "7.18.0",
 		"@typescript-eslint/parser": "7.18.0",
 		"@vitejs/plugin-react": "4.3.4",
+		"@vitest/browser": "2.1.8",
+		"@vitest/coverage-istanbul": "2.1.8",
+		"@vitest/coverage-v8": "2.1.8",
 		"chromatic": "11.19.0",
 		"cz-conventional-changelog": "3.3.0",
 		"eslint": "8.57.1",
@@ -127,18 +130,15 @@
 		"eslint-plugin-react": "7.37.2",
 		"eslint-plugin-react-hooks": "5.0.0",
 		"globals": "15.12.0",
-		"identity-obj-proxy": "3.0.0",
-		"jest": "29.7.0",
-		"jest-environment-jsdom": "29.7.0",
-		"jest-matchmedia-mock": "1.1.0",
 		"lefthook": "1.8.4",
+		"playwright": "1.49.1",
 		"postcss": "8.4.49",
 		"postcss-cli": "11.0.0",
 		"postcss-each": "1.1.0",
 		"postcss-nested": "7.0.2",
 		"prettier": "3.4.1",
-		"react": "19.0.0",
-		"react-dom": "19.0.0",
+		"react": "18",
+		"react-dom": "18",
 		"react-shadow": "20.5.0",
 		"resolve-tspaths": "0.8.23",
 		"size-limit": "11.1.6",
@@ -146,17 +146,18 @@
 		"stylelint": "16.11.0",
 		"stylelint-config-prettier": "9.0.5",
 		"stylelint-config-standard": "36.0.1",
-		"ts-jest": "29.2.5",
 		"ts-node": "10.9.2",
 		"typescript": "5.7.2",
 		"typescript-eslint": "8.16.0",
 		"vite": "6.0.1",
-		"vite-tsconfig-paths": "5.1.3"
+		"vite-tsconfig-paths": "5.1.3",
+		"vitest": "2.1.8",
+		"vitest-browser-react": "0.0.4"
 	},
 	"peerDependencies": {
 		"postcss": "^8",
-		"react": "^18",
-		"react-dom": "^18"
+		"react": "^18 || ^19",
+		"react-dom": "^18 || ^19"
 	},
 	"dependencies": {
 		"@csstools/postcss-global-data": "3.0.0",

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

@@ -1,13 +0,0 @@
-declare const _default: {
-    title: string;
-    component: (props: import("./..").ThemeProps) => import("react").JSX.Element;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const uncontrolled: () => import("react").JSX.Element;
-export declare const nestedReshaped: () => import("react").JSX.Element;
-export declare const edgeCases: () => import("react").JSX.Element;

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

@@ -1,80 +0,0 @@
-import Card from "../../Card/index.js";
-import Button from "../../Button/index.js";
-import View from "../../View/index.js";
-import MenuItem from "../../MenuItem/index.js";
-import Theme, { useTheme } from "../index.js";
-import { Example } from "../../../utilities/storybook/index.js";
-import Reshaped from "../../Reshaped/index.js";
-export default {
-    title: "Utilities/Theme",
-    component: Theme,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/utilities/theme",
-        },
-    },
-};
-const UncontrolledDemo = () => {
-    const { setTheme, theme } = useTheme();
-    return (<Button color="primary" onClick={() => setTheme(theme === "reshaped" ? "slate" : "reshaped")}>
-			Toggle theme
-		</Button>);
-};
-export const uncontrolled = () => {
-    return (<Example>
-			<Example.Item title="switches theme using useTheme hooks">
-				<UncontrolledDemo />
-			</Example.Item>
-		</Example>);
-};
-const Nested = () => {
-    const { invertColorMode, colorMode } = useTheme();
-    return (<Button color="primary" variant="faded" onClick={invertColorMode}>
-			Slate: {colorMode}
-		</Button>);
-};
-export const nestedReshaped = () => {
-    const { invertColorMode, colorMode } = useTheme();
-    return (<Example>
-			<Example.Item title="reshaped + scoped slate">
-				<View gap={2} direction="row">
-					<Button color="primary" variant="faded" onClick={invertColorMode}>
-						Reshaped: {colorMode}
-					</Button>
-					<Reshaped theme="slate" scoped>
-						<Nested />
-					</Reshaped>
-				</View>
-			</Example.Item>
-
-			<Example.Item title="reshaped + not scoped slate">
-				<View gap={2} direction="row">
-					<Button color="primary" variant="faded" onClick={invertColorMode}>
-						Reshaped: {colorMode}
-					</Button>
-					<Reshaped theme="slate">
-						<Nested />
-					</Reshaped>
-				</View>
-			</Example.Item>
-		</Example>);
-};
-const Demo = () => {
-    const { invertColorMode } = useTheme();
-    return (<View gap={3}>
-			<Button onClick={invertColorMode}>Invert mode</Button>
-
-			<MenuItem selected>Test transition</MenuItem>
-
-			<Card>Default card</Card>
-
-			<Theme colorMode="inverted">
-				<Card>Inverted card</Card>
-			</Theme>
-		</View>);
-};
-export const edgeCases = () => (<Example>
-		<Example.Item title="should have no transitions while switching color mode">
-			<Demo />
-		</Example.Item>
-	</Example>);

package/dist/utilities/storybook/Example.module.css

@@ -1 +0,0 @@
-.root{--demo-bg:var(--rs-color-background-elevation-base);--dot-color:var(--rs-color-border-neutral-faded);background:linear-gradient(90deg,var(--demo-bg) 10px,transparent 1%) 50%,linear-gradient(var(--demo-bg) 10px,transparent 1%) 50%,var(--dot-color);background-size:12px 12px}