reshaped 3.5.4-canary.0 → 3.6.0-canary.1

package/dist/utilities/helpers.js

@@ -6,139 +6,17 @@ export const range = (start, end) => {
         return [];
     return Array.from({ length: end - start + 1 }, (_, i) => start + i);
 };
-// from https://gist.github.com/ca0v/73a31f57b397606c9813472f7493a940
-// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
-export const debounce = (cb, wait = 20) => {
-    let timer;
-    const callable = (...args) => {
-        clearTimeout(timer);
-        timer = setTimeout(() => cb(...args), wait);
-    };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return callable;
-};
-export function debounceHandler(handler, timeout) {
-    const debounced = debounce(handler, timeout);
-    return (event) => {
-        if ("persist" in event)
-            event.persist();
-        return debounced(event);
-    };
-}
-// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
-export const throttle = (cb, wait) => {
-    let waiting = false;
-    return (...args) => {
-        if (!waiting) {
-            cb(...args);
-            waiting = true;
-            setTimeout(() => {
-                waiting = false;
-                setTimeout(() => {
-                    if (waiting)
-                        return;
-                    cb(...args);
-                }, wait);
-            }, wait);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const rafThrottle = (fn) => {
+    let rafId = null;
+    let args = null;
+    return function (...newArgs) {
+        args = newArgs;
+        if (rafId === null) {
+            rafId = requestAnimationFrame(() => {
+                rafId = null;
+                fn(...args);
+            });
         }
     };
 };
-export function throttleHandler(handler, timeout) {
-    const throttled = throttle(handler, timeout);
-    return (event) => {
-        if ("persist" in event)
-            event.persist();
-        return throttled(event);
-    };
-}
-export const classNames = (...args) => {
-    return args.reduce((acc, cur) => {
-        if (Array.isArray(cur)) {
-            const className = classNames(...cur);
-            if (!className)
-                return acc;
-            return `${acc} ${className}`;
-        }
-        if (cur)
-            return `${acc} ${cur}`;
-        return acc;
-    }, "");
-};
-const applyClassName = (passedClassName, value, options) => {
-    const { base, excludeValueFromClassName } = options || {};
-    const className = typeof passedClassName === "string" ? passedClassName : passedClassName(value);
-    if ((value === true && base) || excludeValueFromClassName)
-        return className;
-    // CSS should be turned on/off for non base viewport with mobile first approach
-    if (value === true && !base)
-        return `${className}-true`;
-    if (value === false && !base)
-        return `${className}-false`;
-    if (value !== undefined)
-        return `${className}-${value}`;
-    return null;
-};
-export const responsiveClassNames = (s, className, value, options) => {
-    if (typeof value !== "object") {
-        const staticClassName = applyClassName(className, value, {
-            base: true,
-            excludeValueFromClassName: options?.excludeValueFromClassName,
-        });
-        return staticClassName ? [s[staticClassName]] : [];
-    }
-    return Object.keys(value).reduce((acc, viewport) => {
-        const base = viewport === "s";
-        const viewportClassName = applyClassName(className, value[viewport], {
-            base,
-            excludeValueFromClassName: options?.excludeValueFromClassName,
-        });
-        const suffix = base ? "" : `--${viewport}`;
-        return [...acc, s[`${viewportClassName}${suffix}`]];
-    }, []);
-};
-export const responsiveVariables = (variableName, value) => {
-    if (value === undefined)
-        return {};
-    if (typeof value !== "object")
-        return { [`${variableName}-s`]: value };
-    return Object.keys(value).reduce((acc, key) => {
-        const viewportValue = value[key];
-        if (viewportValue === undefined)
-            return acc;
-        if (viewportValue === false)
-            return acc;
-        return {
-            ...acc,
-            [`${variableName}-${key}`]: viewportValue,
-        };
-    }, {});
-};
-const isResponsive = (prop) => {
-    if (prop === null)
-        return false;
-    return typeof prop === "object" && prop !== null && "s" in prop;
-};
-export const responsivePropDependency = (prop, resolver) => {
-    if (!isResponsive(prop))
-        return resolver(prop, "s");
-    const keys = Object.keys(prop);
-    return keys.reduce((acc, viewport) => {
-        const viewportValue = prop[viewport];
-        if (viewportValue === undefined || viewportValue === null)
-            return acc;
-        return { ...acc, [viewport]: resolver(viewportValue, viewport) };
-    }, {});
-};
-const viewports = ["s", "m", "l", "xl"];
-export const resolveViewportValue = (viewport, value) => {
-    let result;
-    if (!isResponsive(value))
-        return value;
-    for (const currentViewport of viewports) {
-        const viewportValue = value[currentViewport];
-        if (viewportValue !== undefined)
-            result = viewportValue;
-        if (currentViewport === viewport)
-            return result;
-    }
-};

package/dist/utilities/props.d.ts

@@ -0,0 +1,13 @@
+import type * as G from "../types/global";
+type Value = string | boolean | number | undefined;
+type ClassNameResolver = string | ((value: Value) => string);
+/**
+ * Resolve an array of values into a classname string
+ */
+export declare const classNames: (...args: G.ClassName[]) => string;
+export declare const responsiveClassNames: <V extends G.Responsive<Value>>(s: Record<string, string>, className: ClassNameResolver, value: V, options?: {
+    excludeValueFromClassName?: boolean;
+}) => string[];
+export declare const responsiveVariables: <V extends Value = Value>(variableName: G.CSSVariable, value?: G.Responsive<V>) => Record<G.CSSVariable, V>;
+export declare const responsivePropDependency: <Result, T>(prop: G.Responsive<T>, resolver: (value: T, key: G.Viewport) => Result) => Result;
+export {};

package/dist/utilities/props.js

@@ -0,0 +1,83 @@
+/**
+ * Resolve an array of values into a classname string
+ */
+export const classNames = (...args) => {
+    return args
+        .reduce((acc, cur) => {
+        if (Array.isArray(cur)) {
+            const className = classNames(...cur);
+            if (!className)
+                return acc;
+            return `${acc} ${className}`;
+        }
+        if (cur)
+            return `${acc} ${cur}`;
+        return acc;
+    }, "")
+        .trim();
+};
+const applyClassName = (passedClassName, value, options) => {
+    const { base, excludeValueFromClassName } = options || {};
+    const className = typeof passedClassName === "string" ? passedClassName : passedClassName(value);
+    if ((value === true && base) || excludeValueFromClassName)
+        return className;
+    // CSS should be turned on/off for non base viewport with mobile first approach
+    if (value === true && !base)
+        return `${className}-true`;
+    if (value === false && !base)
+        return `${className}-false`;
+    if (value !== undefined)
+        return `${className}-${value}`;
+    return null;
+};
+export const responsiveClassNames = (s, className, value, options) => {
+    if (typeof value !== "object") {
+        const staticClassName = applyClassName(className, value, {
+            base: true,
+            excludeValueFromClassName: options?.excludeValueFromClassName,
+        });
+        return staticClassName ? [s[staticClassName]] : [];
+    }
+    return Object.keys(value).reduce((acc, viewport) => {
+        const base = viewport === "s";
+        const viewportClassName = applyClassName(className, value[viewport], {
+            base,
+            excludeValueFromClassName: options?.excludeValueFromClassName,
+        });
+        const suffix = base ? "" : `--${viewport}`;
+        return [...acc, s[`${viewportClassName}${suffix}`]];
+    }, []);
+};
+export const responsiveVariables = (variableName, value) => {
+    if (value === undefined)
+        return {};
+    if (typeof value !== "object")
+        return { [`${variableName}-s`]: value };
+    return Object.keys(value).reduce((acc, key) => {
+        const viewportValue = value[key];
+        if (viewportValue === undefined)
+            return acc;
+        if (viewportValue === false)
+            return acc;
+        return {
+            ...acc,
+            [`${variableName}-${key}`]: viewportValue,
+        };
+    }, {});
+};
+const isResponsive = (prop) => {
+    if (prop === null)
+        return false;
+    return typeof prop === "object" && prop !== null && "s" in prop;
+};
+export const responsivePropDependency = (prop, resolver) => {
+    if (!isResponsive(prop))
+        return resolver(prop, "s");
+    const keys = Object.keys(prop);
+    return keys.reduce((acc, viewport) => {
+        const viewportValue = prop[viewport];
+        if (viewportValue === undefined || viewportValue === null)
+            return acc;
+        return { ...acc, [viewport]: resolver(viewportValue, viewport) };
+    }, {});
+};

package/dist/utilities/scroll/lock.js

@@ -1,5 +1,5 @@
 import { isIOS } from "../platform.js";
-import { findClosestRenderContainer } from "../dom/index.js";
+import { findClosestScrollableContainer } from "../dom/index.js";
 import lockSafariScroll from "./lockSafari.js";
 import lockStandardScroll from "./lockStandard.js";
 let bodyLockedCount = 0;
@@ -7,8 +7,9 @@ let reset = () => { };
 export const lockScroll = (args) => {
     const isIOSLock = isIOS() && !args.containerEl && !args.originEl;
     let container = document.body;
-    if (args.originEl && !isIOSLock)
-        container = findClosestRenderContainer({ el: args.originEl }).el;
+    if (args.originEl && !isIOSLock) {
+        container = findClosestScrollableContainer({ el: args.originEl });
+    }
     if (args.containerEl && !isIOSLock)
         container = args.containerEl;
     if (container === document.body)

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.5.4-canary.0",
+	"version": "3.6.0-canary.1",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -74,8 +74,8 @@
 		"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 && sh ./bin/update-changelog.sh",
-		"release:canary": "yarn build && yarn version && sh ./bin/update-changelog.sh && yarn publish --tag canary",
+		"release:lib": "yarn build && yarn publish",
+		"release:canary": "yarn build && yarn publish --tag canary",
 		"release:test": "yarn build && yarn pack --filename reshaped-test.tgz",
 		"release:source": "sh ./bin/release-source.sh",
 		"release:copy": "sh ./bin/release-copy.sh",
@@ -87,16 +87,16 @@
 		"lint": "yarn lint:js && yarn lint:css",
 		"lint:js": "eslint './src/**/*.{ts,tsx}' --fix",
 		"lint:css": "stylelint 'src/**/*.css'",
-		"commit": "sh ./bin/commit.sh"
+		"commit": "git-cz"
 	},
 	"browserslist": [
 		"defaults and not IE 11"
 	],
 	"devDependencies": {
-		"@commitlint/cli": "19.8.0",
-		"@commitlint/config-conventional": "19.8.0",
-		"@commitlint/types": "19.8.0",
-		"@eslint/js": "9.25.1",
+		"@commitlint/cli": "19.8.1",
+		"@commitlint/config-conventional": "19.8.1",
+		"@commitlint/types": "19.8.1",
+		"@eslint/js": "9.26.0",
 		"@size-limit/preset-big-lib": "11.2.0",
 		"@storybook/addon-a11y": "8.6.12",
 		"@storybook/addon-actions": "8.6.12",
@@ -106,25 +106,25 @@
 		"@storybook/experimental-addon-test": "8.6.12",
 		"@storybook/react": "8.6.12",
 		"@storybook/react-vite": "8.6.12",
-		"@types/culori": "2.1.1",
+		"@types/culori": "4.0.0",
 		"@types/events": "3.0.3",
-		"@types/node": "22.14.1",
-		"@types/react": "19.1.2",
-		"@types/react-dom": "19.1.2",
+		"@types/node": "22.15.17",
+		"@types/react": "19.1.3",
+		"@types/react-dom": "19.1.3",
 		"@vitejs/plugin-react": "4.4.1",
-		"@vitest/browser": "3.1.2",
-		"@vitest/coverage-istanbul": "3.1.2",
-		"@vitest/coverage-v8": "3.1.2",
+		"@vitest/browser": "3.1.3",
+		"@vitest/coverage-istanbul": "3.1.3",
+		"@vitest/coverage-v8": "3.1.3",
 		"chromatic": "11.28.2",
 		"conventional-changelog-cli": "^5.0.0",
 		"cz-conventional-changelog": "3.3.0",
-		"eslint": "9.25.1",
-		"eslint-config-prettier": "10.1.2",
+		"eslint": "9.26.0",
+		"eslint-config-prettier": "10.1.5",
 		"eslint-plugin-jsx-a11y": "6.10.2",
-		"eslint-plugin-prettier": "5.2.6",
+		"eslint-plugin-prettier": "5.4.0",
 		"eslint-plugin-react": "7.37.5",
 		"eslint-plugin-react-hooks": "5.2.0",
-		"lefthook": "1.11.11",
+		"lefthook": "1.11.12",
 		"playwright": "1.52.0",
 		"postcss": "8.5.3",
 		"postcss-cli": "11.0.1",
@@ -137,15 +137,15 @@
 		"resolve-tspaths": "0.8.23",
 		"size-limit": "11.2.0",
 		"storybook": "8.6.12",
-		"stylelint": "16.18.0",
+		"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.30.1",
-		"vite": "6.3.2",
+		"typescript-eslint": "8.32.0",
+		"vite": "6.3.5",
 		"vite-tsconfig-paths": "5.1.4",
-		"vitest": "3.1.2",
+		"vitest": "3.1.3",
 		"vitest-browser-react": "0.1.1"
 	},
 	"peerDependencies": {
@@ -157,7 +157,7 @@
 		"@csstools/postcss-global-data": "3.0.0",
 		"chalk": "4.1.2",
 		"commander": "13.1.0",
-		"cssnano": "7.0.6",
+		"cssnano": "7.0.7",
 		"csstype": "3.1.3",
 		"culori": "4.0.1",
 		"postcss-custom-media": "11.0.5"

package/CHANGELOG-old.md

@@ -1,14 +0,0 @@
-## WIP 3.5.2
-
-- Tailwind 3: Preflight compatibility
-- ScrollArea: fixed maxHeight
-- Updated sideEffects to \*.css
-
-## 3.5.1
-
-- NumberField: user-select none for touch devices
-- Tabs: Fixed arrow navigation
-- Slider: Fixed drag propagation when used in swipeable modals
-- Card: Removed internal content wrapper to fix Safari absolute positioning of contents inside the card
-- [Pro] Storybook: Preserve theme and mode values while navigating stories
-- [Pro] Storybook config: switched to js to resolve TS resolving issues

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

@@ -1,39 +0,0 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").PopoverProps> & {
-        Dismissible: import("react").FC<import("../../Dismissible").DismissibleProps>;
-        Trigger: import("react").FC<import("../../_private/Flyout").FlyoutTriggerProps>;
-        Content: import("react").FC<import("../../_private/Flyout").FlyoutContentProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const defaultActive: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const active: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const activeFalse: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const dismissible: StoryObj<{
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const triggerType: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const className: StoryObj;

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

@@ -1,167 +0,0 @@
-import { expect, fn, userEvent, within, waitFor } from "@storybook/test";
-import Popover from "../index.js";
-import Button from "../../Button/index.js";
-import { sleep } from "../../../utilities/helpers.js";
-export default {
-    title: "Components/Popover/tests",
-    component: Popover,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/popover",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const defaultActive = {
-    name: "defaultActive, uncontrolled",
-    args: {
-        handleOpen: fn(),
-        handleClose: fn(),
-    },
-    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} defaultActive>
-			<Popover.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</Popover.Trigger>
-			<Popover.Content>Content</Popover.Content>
-		</Popover>),
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const trigger = canvas.getAllByRole("button")[0];
-        let item = canvas.getByText("Content");
-        // Wait for the open animation
-        await sleep(500);
-        await userEvent.click(document.body);
-        await waitFor(() => {
-            expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
-            expect(item).not.toBeInTheDocument();
-        });
-        await userEvent.click(trigger);
-        await waitFor(() => {
-            expect(args.handleOpen).toHaveBeenCalledTimes(1);
-            expect(args.handleOpen).toHaveBeenCalledWith();
-        });
-        item = canvas.getByText("Content");
-        expect(item).toBeInTheDocument();
-    },
-};
-export const active = {
-    name: "active, controlled",
-    args: {
-        handleOpen: fn(),
-        handleClose: fn(),
-    },
-    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} active>
-			<Popover.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</Popover.Trigger>
-			<Popover.Content>Content</Popover.Content>
-		</Popover>),
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const item = canvas.getByText("Content");
-        await userEvent.click(document.body);
-        await waitFor(() => {
-            expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
-        });
-        expect(item).toBeInTheDocument();
-    },
-};
-export const activeFalse = {
-    name: "active false, controlled",
-    args: {
-        handleOpen: fn(),
-        handleClose: fn(),
-    },
-    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} active={false}>
-			<Popover.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</Popover.Trigger>
-			<Popover.Content>Content</Popover.Content>
-		</Popover>),
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const trigger = canvas.getAllByRole("button")[0];
-        await userEvent.click(trigger);
-        await waitFor(() => {
-            expect(args.handleOpen).toHaveBeenCalledTimes(1);
-            expect(args.handleOpen).toHaveBeenCalledWith();
-        });
-        const item = canvas.queryByText("Content");
-        expect(item).not.toBeInTheDocument();
-    },
-};
-export const dismissible = {
-    name: "dismissible, onClose, className, attributes, closeAriaLabel",
-    args: {
-        handleClose: fn(),
-    },
-    render: (args) => (<Popover onClose={args.handleClose} defaultActive>
-			<Popover.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</Popover.Trigger>
-			<Popover.Content>
-				<Popover.Dismissible closeAriaLabel="Close" attributes={{ "data-testid": "test-id" }} className="test-classname">
-					Content
-				</Popover.Dismissible>
-			</Popover.Content>
-		</Popover>),
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const dismissible = canvas.getByTestId("test-id");
-        const closeButton = within(dismissible).getByRole("button");
-        expect(dismissible).toHaveClass("test-classname");
-        expect(closeButton).toHaveAccessibleName("Close");
-        await userEvent.click(closeButton);
-        await waitFor(() => {
-            expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith({});
-        });
-    },
-};
-export const triggerType = {
-    name: "triggerType hover",
-    args: {
-        handleOpen: fn(),
-        handleClose: fn(),
-    },
-    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} triggerType="hover">
-			<Popover.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</Popover.Trigger>
-			<Popover.Content>Content</Popover.Content>
-		</Popover>),
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const trigger = canvas.getAllByRole("button")[0];
-        await userEvent.hover(trigger);
-        await waitFor(() => {
-            expect(args.handleOpen).toHaveBeenCalledTimes(1);
-            expect(args.handleOpen).toHaveBeenCalledWith();
-        });
-        await userEvent.unhover(trigger);
-        await waitFor(() => {
-            expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith({});
-        });
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Popover active>
-				<Popover.Trigger>
-					{(attributes) => <Button attributes={attributes}>Open</Button>}
-				</Popover.Trigger>
-				<Popover.Content className="test-classname" attributes={{ "data-testid": "test-id" }}>
-					Content
-				</Popover.Content>
-			</Popover>
-		</div>),
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const menu = await canvas.findByTestId("test-id");
-        expect(menu).toHaveClass("test-classname");
-    },
-};

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

@@ -1,38 +0,0 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").SliderProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const defaultValue: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-    handleChangeCommit: ReturnType<typeof fn>;
-}>;
-export declare const value: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-    handleChangeCommit: ReturnType<typeof fn>;
-}>;
-export declare const rangeDefaultValue: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-    handleChangeCommit: ReturnType<typeof fn>;
-}>;
-export declare const rangeValue: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-    handleChangeCommit: ReturnType<typeof fn>;
-}>;
-export declare const minMax: StoryObj;
-export declare const step: StoryObj;
-export declare const stepFloat: StoryObj;
-export declare const renderValue: StoryObj;
-export declare const withoutTooltipValue: StoryObj;
-export declare const disabled: StoryObj;
-export declare const className: StoryObj;