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

package/dist/index.d.ts

@@ -139,7 +139,7 @@ export { default as useToggle } from "./hooks/useToggle";
 /**
  * Utility functions
  */
-export { classNames, responsiveClassNames, responsivePropDependency } from "./utilities/helpers";
+export { classNames, responsivePropDependency } from "./utilities/props";
 export { TrapFocus } from "./utilities/a11y";
 /**
  * Types

package/dist/index.js

@@ -80,7 +80,7 @@ export { default as useToggle } from "./hooks/useToggle.js";
 /**
  * Utility functions
  */
-export { classNames, responsiveClassNames, responsivePropDependency } from "./utilities/helpers.js";
+export { classNames, responsivePropDependency } from "./utilities/props.js";
 export { TrapFocus } from "./utilities/a11y/index.js";
 /**
  * Dev utilities

package/dist/styles/align/index.js

@@ -1,4 +1,4 @@
-import { responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveVariables } from "../../utilities/props.js";
 import "./align.css";
 const getAlignStyles = (value) => {
     if (!value)

package/dist/styles/aspectRatio/index.js

@@ -1,4 +1,4 @@
-import { responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveVariables } from "../../utilities/props.js";
 import "./aspectRatio.css";
 const getAspectRatioStyles = (value) => {
     if (!value)

package/dist/styles/bleed/index.js

@@ -1,4 +1,4 @@
-import { responsiveClassNames, responsiveVariables, responsivePropDependency, } from "../../utilities/helpers.js";
+import { responsiveClassNames, responsiveVariables, responsivePropDependency, } from "../../utilities/props.js";
 import s from "./bleed.module.css";
 const getBleedStyles = (value) => {
     if (value === undefined)

package/dist/styles/border/index.js

@@ -1,4 +1,4 @@
-import { responsiveClassNames } from "../../utilities/helpers.js";
+import { responsiveClassNames } from "../../utilities/props.js";
 import s from "./border.module.css";
 const getBorderStyles = (value) => {
     if (!value)

package/dist/styles/height/index.js

@@ -1,4 +1,4 @@
-import { responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
 import s from "./height.module.css";
 const getHeightStyles = (value) => {
     if (!value)

package/dist/styles/inset/index.js

@@ -1,4 +1,4 @@
-import { responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveVariables } from "../../utilities/props.js";
 import "./inset.css";
 const getInsetStyles = (value, side) => {
     if (value === undefined)

package/dist/styles/justify/index.js

@@ -1,4 +1,4 @@
-import { responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveVariables } from "../../utilities/props.js";
 import "./justify.css";
 const getJustifyStyles = (value) => {
     if (!value)

package/dist/styles/maxHeight/index.js

@@ -1,4 +1,4 @@
-import { responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
 import s from "./maxHeight.module.css";
 const getMaxHeightStyles = (value) => {
     if (!value)

package/dist/styles/maxWidth/index.js

@@ -1,4 +1,4 @@
-import { responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
 import s from "./maxWidth.module.css";
 const getMaxWidthStyles = (value) => {
     if (!value)

package/dist/styles/minHeight/index.js

@@ -1,4 +1,4 @@
-import { responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
 import s from "./minHeight.module.css";
 const getMinHeightStyles = (value) => {
     if (!value)

package/dist/styles/minWidth/index.js

@@ -1,4 +1,4 @@
-import { responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
 import s from "./minWidth.module.css";
 const getMinWidthStyles = (value) => {
     if (!value)

package/dist/styles/padding/index.js

@@ -1,4 +1,4 @@
-import { responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveVariables } from "../../utilities/props.js";
 import "./padding.css";
 const getPaddingStyles = (value) => {
     if (!value)

package/dist/styles/position/index.js

@@ -1,4 +1,4 @@
-import { responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveVariables } from "../../utilities/props.js";
 import "./position.css";
 const getPositionStyles = (value) => {
     if (!value)

package/dist/styles/radius/index.js

@@ -1,4 +1,4 @@
-import { responsiveClassNames } from "../../utilities/helpers.js";
+import { responsiveClassNames } from "../../utilities/props.js";
 import s from "./radius.module.css";
 const getRadiusStyles = (value) => {
     if (!value)

package/dist/styles/textAlign/index.js

@@ -1,4 +1,4 @@
-import { responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveVariables } from "../../utilities/props.js";
 import "./textAlign.css";
 const getTextAlignStyles = (value) => {
     if (!value)

package/dist/styles/width/index.js

@@ -1,4 +1,4 @@
-import { responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
 import s from "./width.module.css";
 const getWidthStyles = (value) => {
     if (!value)

package/dist/utilities/dom/event.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Workaround for changing a hidden input value with triggerring
+ * React input onChange and form onChange handlers
+ *
+ * Based on https://stackoverflow.com/a/60378508
+ */
+export declare const triggerChangeEvent: (el: HTMLInputElement, value: string) => void;

package/dist/utilities/dom/event.js

@@ -0,0 +1,11 @@
+/**
+ * Workaround for changing a hidden input value with triggerring
+ * React input onChange and form onChange handlers
+ *
+ * Based on https://stackoverflow.com/a/60378508
+ */
+export const triggerChangeEvent = (el, value) => {
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
+    nativeInputValueSetter.call(el, value);
+    el.dispatchEvent(new Event("change", { bubbles: true }));
+};

package/dist/utilities/dom/index.d.ts

@@ -2,3 +2,4 @@ export { getRectFromCoordinates } from "./flyout";
 export { getShadowRoot } from "./shadowDom";
 export { enableUserSelect, disableUserSelect } from "./userSelect";
 export { findParent, findClosestScrollableContainer, findClosestPositionContainer } from "./find";
+export { triggerChangeEvent } from "./event";

package/dist/utilities/dom/index.js

@@ -2,3 +2,4 @@ export { getRectFromCoordinates } from "./flyout.js";
 export { getShadowRoot } from "./shadowDom.js";
 export { enableUserSelect, disableUserSelect } from "./userSelect.js";
 export { findParent, findClosestScrollableContainer, findClosestPositionContainer } from "./find.js";
+export { triggerChangeEvent } from "./event.js";

package/dist/utilities/helpers.d.ts

@@ -1,17 +1,3 @@
-import type * as G from "../types/global";
 export declare const sleep: (milliseconds: number) => Promise<unknown>;
 export declare const range: (start: number, end: number) => number[];
-export declare const debounce: <T extends Function>(cb: T, wait?: number) => T;
-export declare function debounceHandler<T extends React.SyntheticEvent | Event>(handler: (event: T) => void, timeout: number): (event: T) => void;
-export declare const throttle: <T extends Function>(cb: T, wait: number) => (...args: unknown[]) => void;
-export declare function throttleHandler<T extends React.SyntheticEvent | Event>(handler: (event: T) => void, timeout: number): (event: T) => void;
-type Value = string | boolean | number | undefined;
-type ClassNameResolver = string | ((value: Value) => 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 declare const resolveViewportValue: <T>(viewport: G.Viewport, value: G.Responsive<T>) => T | undefined;
-export {};
+export declare const rafThrottle: <T extends (...args: any[]) => void>(fn: T) => T;

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/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.0",
+	"version": "3.6.0-canary.1",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -21,10 +21,9 @@
 	"bugs": {
 		"url": "https://github.com/formaat-design/reshaped/issues"
 	},
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/formaat-design/reshaped"
-	},
+	"sideEffects": [
+		"*.css"
+	],
 	"files": [
 		"bin/cli.js",
 		"dist/**/*"
@@ -58,7 +57,6 @@
 		"./themes/fragments/twitter/*": "./dist/themes/fragments/twitter/*",
 		"./package.json": "./package.json"
 	},
-	"sideEffects": false,
 	"bin": {
 		"reshaped": "./bin/cli.js"
 	},
@@ -95,10 +93,10 @@
 		"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",
@@ -108,24 +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",
@@ -138,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.31.0",
-		"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": {
@@ -158,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/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("../../Flyout").FlyoutTriggerProps>;
-        Content: import("react").FC<import("../../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;