reshaped 2.11.12 → 3.0.0

package/dist/utilities/a11y/focus.js

@@ -0,0 +1,89 @@
+const pseudoFocusAttribute = "data-rs-focus";
+export const focusableSelector = 'a,button,input:not([type="hidden"]),textarea,select,details,[tabindex]:not([tabindex="-1"])';
+export const getActiveElement = () => {
+    const pseudoFocusedEl = document.querySelector(`[${pseudoFocusAttribute}]`);
+    return (pseudoFocusedEl || document.activeElement);
+};
+export const focusElement = (el, options) => {
+    document.querySelector(`[${pseudoFocusAttribute}]`)?.removeAttribute(pseudoFocusAttribute);
+    if (options?.pseudoFocus) {
+        el.setAttribute(pseudoFocusAttribute, "true");
+    }
+    else {
+        el.focus();
+    }
+};
+export const getFocusableElements = (rootEl, options) => {
+    const focusableElements = Array.from(rootEl.querySelectorAll(focusableSelector));
+    const filteredElements = focusableElements.filter((el) => {
+        if (el.hasAttribute("disabled"))
+            return false;
+        if (el.clientHeight === 0)
+            return false;
+        if (el.type === "radio") {
+            let sameNameRadioEls;
+            if (el.form) {
+                const formInputs = el.form.elements.namedItem(el.name);
+                // Synthetic error handling for narrowing down types
+                // Radio element can't find itself in the form, so we don't need to include it in the array
+                if (!formInputs)
+                    return false;
+                const multipleElementsFound = "length" in formInputs;
+                if (!multipleElementsFound) {
+                    // Single element found is always an input radio since we're inside the condition
+                    sameNameRadioEls = [formInputs];
+                }
+                else {
+                    sameNameRadioEls = Array.from(formInputs).filter((el) => "type" in el && el.type === "radio");
+                }
+            }
+            else {
+                sameNameRadioEls = Array.from(rootEl.querySelectorAll(`[type="radio"][name="${el.name}"]`));
+            }
+            if (sameNameRadioEls?.length) {
+                const checkedEl = Array.from(sameNameRadioEls).find((el) => el.checked);
+                if (checkedEl && el !== checkedEl)
+                    return false;
+                if (!checkedEl && el !== sameNameRadioEls[0])
+                    return false;
+            }
+        }
+        return true;
+    });
+    if (options?.additionalElement && filteredElements.length) {
+        filteredElements.unshift(options.additionalElement);
+    }
+    return filteredElements;
+};
+export const getFocusData = (args) => {
+    const { root, target, options } = args;
+    const focusable = getFocusableElements(root, { additionalElement: options?.additionalElement });
+    const focusableLimit = focusable.length - 1;
+    const currentElement = getActiveElement();
+    const currentIndex = focusable.indexOf(currentElement);
+    const positions = {
+        next: currentIndex + 1,
+        prev: currentIndex - 1,
+        first: 0,
+        last: focusableLimit,
+    };
+    let nextIndex = positions[target];
+    const isOverflow = nextIndex > focusableLimit || nextIndex < 0;
+    if (isOverflow) {
+        if (options?.circular) {
+            nextIndex = target === "prev" ? positions.last : positions.first;
+        }
+        else {
+            nextIndex = target === "prev" ? positions.first : positions.last;
+        }
+    }
+    return { overflow: isOverflow, el: focusable[nextIndex] };
+};
+const focusTargetElement = (root, target) => {
+    const data = getFocusData({ root, target });
+    focusElement(data.el);
+};
+export const focusNextElement = (root) => focusTargetElement(root, "next");
+export const focusPreviousElement = (root) => focusTargetElement(root, "prev");
+export const focusFirstElement = (root) => focusTargetElement(root, "first");
+export const focusLastElement = (root) => focusTargetElement(root, "last");

package/dist/utilities/a11y/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utilities/dom.js

@@ -0,0 +1,18 @@
+export const getClosestFlyoutTarget = (el) => {
+    const style = el && window.getComputedStyle(el);
+    const overflowY = style?.overflowY;
+    const position = style?.position;
+    const isScrollable = overflowY?.includes("scroll");
+    const isFixed = position === "fixed" || position === "sticky";
+    if (el === document.body || !el)
+        return document.body;
+    if ((isScrollable && el.scrollHeight > el.clientHeight) || isFixed)
+        return el;
+    return getClosestFlyoutTarget(el.parentElement);
+};
+export const disableUserSelect = () => {
+    document.body.style.userSelect = "none";
+};
+export const enableUserSelect = () => {
+    document.body.style.userSelect = "";
+};

package/dist/utilities/helpers.js

@@ -0,0 +1,138 @@
+export const range = (start, end) => {
+    if (start > end)
+        return [];
+    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+};
+// from https://gist.github.com/ca0v/73a31f57b397606c9813472f7493a940
+export const debounce = (cb, wait = 20) => {
+    let timer;
+    const callable = (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => cb(...args), wait);
+    };
+    return callable;
+};
+export function debounceHandler(handler, timeout) {
+    const debounced = debounce(handler, timeout);
+    return (event) => {
+        if ("persist" in event)
+            event.persist();
+        return debounced(event);
+    };
+}
+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);
+        }
+    };
+};
+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 (let currentViewport of viewports) {
+        const viewportValue = value[currentViewport];
+        if (viewportValue !== undefined)
+            result = viewportValue;
+        if (currentViewport === viewport)
+            return result;
+    }
+};

package/dist/utilities/storybook/Example.js

@@ -0,0 +1,14 @@
+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 })] }));
+};
+Example.Item = ExampleItem;
+export default Example;

package/dist/utilities/storybook/Placeholder.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const Placeholder = (props) => {
+    const { w = "auto", h = 50, children } = props;
+    return (_jsx("div", { style: {
+            width: w,
+            height: h,
+            minWidth: h,
+            padding: "var(--rs-unit-x2)",
+            background: "rgba(var(--rs-color-rgb-background-neutral), 0.32)",
+            boxSizing: "border-box",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: "var(--rs-radius-small)",
+        }, children: children }));
+};
+export default Placeholder;

package/dist/utilities/string.d.ts

@@ -0,0 +1,2 @@
+export declare const camelToKebab: (s: string) => string;
+export declare const capitalize: (s: string) => string;

package/dist/utilities/string.js

@@ -0,0 +1,6 @@
+export const camelToKebab = (s) => {
+    return s.replace(/([a-z][a-z])([A-Z]|[0-9])/g, "$1-$2").toLowerCase();
+};
+export const capitalize = (s) => {
+    return s.charAt(0).toUpperCase() + s.slice(1);
+};

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": "2.11.12",
+	"version": "3.0.0",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -25,27 +25,38 @@
 		"type": "git",
 		"url": "https://github.com/formaat-design/reshaped"
 	},
-	"main": "./index.js",
-	"module": "./index.js",
-	"types": "./index.d.ts",
 	"files": [
-		"bin/**/*",
-		"cli/**/*",
-		"components/**/*",
-		"config/**/*",
-		"constants/**/*",
-		"hooks/**/*",
-		"icons/**/*",
-		"styles/**/*",
-		"themes/**/*",
-		"types/**/*",
-		"utilities/**/*",
-		"bundle.css",
-		"bundle.d.ts",
-		"bundle.js",
-		"index.d.ts",
-		"index.js"
+		"bin/cli.js",
+		"dist/**/*"
 	],
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js"
+		},
+		"./themes": {
+			"types": "./dist/themes/index.d.ts",
+			"default": "./dist/cjs/themes/index.js"
+		},
+		"./config/postcss": {
+			"types": "./dist/config/postcss.d.ts",
+			"default": "./dist/cjs/config/postcss.js"
+		},
+		"./config/tailwind": {
+			"types": "./dist/config/tailwind.d.ts",
+			"default": "./dist/cjs/config/tailwind.js"
+		},
+		"./bundle": {
+			"types": "./dist/bundle.d.ts",
+			"import": "./dist/bundle.js"
+		},
+		"./bundle.css": "./dist/bundle.css",
+		"./themes/reshaped/theme.css": "./dist/themes/reshaped/theme.css",
+		"./themes/slate/theme.css": "./dist/themes/slate/theme.css",
+		"./themes/figma/theme.css": "./dist/themes/figma/theme.css",
+		"./themes/fragments/twitter/theme.css": "./dist/themes/fragments/twitter/theme.css",
+		"./package.json": "./package.json"
+	},
 	"sideEffects": false,
 	"bin": {
 		"reshaped": "./bin/cli.js"
@@ -53,12 +64,12 @@
 	"scripts": {
 		"dev": "storybook dev -c tools/storybook -p 3001 --disable-telemetry",
 		"clean": "sh ./bin/clean.sh",
-		"build": "yarn clean && yarn build:stories && yarn build:esm && yarn build:cjs && yarn build:css && yarn build:bundle && resolve-tspaths && cp -r dist/* ./",
-		"build:themes": "node bin/cli.js theming --config cli/theming/reshaped.config.js --output src/themes",
-		"build:esm": "tsc -p tsconfig.esm.json",
-		"build:cjs": "tsc -p tsconfig.cjs.json",
+		"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",
+		"build:esm": "tsc -p tsconfig.esm.json && resolve-tspaths -p tsconfig.esm.json",
+		"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",
+		"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",
@@ -70,7 +81,7 @@
 		"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.js",
+		"test:unit": "jest --config tools/jest/jest.config.ts",
 		"test:size": "size-limit",
 		"lint": "yarn lint:js && yarn lint:css",
 		"lint:js": "eslint --quiet --fix",
@@ -94,6 +105,7 @@
 		"@testing-library/jest-dom": "6.4.2",
 		"@testing-library/react": "14.3.0",
 		"@testing-library/user-event": "14.5.2",
+		"@types/culori": "^2.1.0",
 		"@types/events": "3.0.3",
 		"@types/jest": "29.5.12",
 		"@types/node": "20.12.5",
@@ -131,7 +143,8 @@
 		"stylelint-config-prettier": "9.0.5",
 		"stylelint-config-standard": "36.0.0",
 		"ts-jest": "29.1.2",
-		"typescript": "5.4.4",
+		"ts-node": "10.9.2",
+		"typescript": "5.5.3",
 		"vite": "5.2.8",
 		"vite-tsconfig-paths": "4.3.2"
 	},
@@ -145,6 +158,7 @@
 		"chalk": "4.1.2",
 		"commander": "11.1.0",
 		"cssnano": "6.1.2",
+		"culori": "4.0.1",
 		"postcss-custom-media": "10.0.4"
 	},
 	"resolutions": {

package/bin/clean.sh

@@ -1,3 +0,0 @@
-find ./src -type d -mindepth 1 -maxdepth 1 | xargs -L1 basename | xargs -L1 rm -rf
-rm -rf dist
-rm -f index.js index.d.ts bundle.js bundle.js.map bundle.css bundle.css.map bundle.d.ts

package/bin/release-copy.sh

@@ -1,8 +0,0 @@
-# Copy release files to the website repository
-version=$(jq -r .version package.json)
-mkdir -p ../reshaped-website/releases/$version
-mv ./reshaped-source-v$version.zip ../reshaped-website/releases/$version/reshaped-source-v$version.zip
-
-# Move storybook build
-rm -rf ../reshaped-website/public/storybook
-cp -r ./dist/app ../reshaped-website/public/storybook

package/bin/release-source.sh

@@ -1,20 +0,0 @@
-LICENSE_PATH="LICENSE.md"
-LICENSE_SOURCE_PATH="LICENSE-SOURCE.md"
-LICENSE_TMP_PATH="LICENSE-TEMP.md"
-
-PKG_JSON_PATH="./package.json"
-PKG_JSON_TMP_PATH="./package-temp.json"
-
-
-mv $LICENSE_PATH $LICENSE_TMP_PATH
-mv $LICENSE_SOURCE_PATH $LICENSE_PATH
-
-cp $PKG_JSON_PATH $PKG_JSON_TMP_PATH
-jq --arg license "SEE LICENSE IN LICENSE.md" '.license = $license' $PKG_JSON_PATH > ./temp.json && mv temp.json $PKG_JSON_PATH
-
-git archive -o reshaped-source-v$(jq -r .version package.json).zip HEAD . ':!.chromatic'
-
-mv $LICENSE_PATH $LICENSE_SOURCE_PATH
-mv $LICENSE_TMP_PATH $LICENSE_PATH
-
-mv $PKG_JSON_TMP_PATH $PKG_JSON_PATH