reshaped 3.9.0-canary.0 → 3.9.0-canary.2

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.9.0-canary.0",
+  "version": "3.9.0-canary.2",
   "license": "MIT",
   "email": "hello@reshaped.so",
   "homepage": "https://reshaped.so",
@@ -41,11 +41,13 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./themes": {
       "types": "./dist/themes/index.d.ts",
-      "import": "./dist/themes/index.js"
+      "import": "./dist/themes/index.js",
+      "default": "./dist/themes/index.js"
     },
     "./config/postcss": {
       "types": "./dist/config/postcss.d.ts",
@@ -54,11 +56,13 @@
     },
     "./config/tailwind": {
       "types": "./dist/config/tailwind.d.ts",
-      "import": "./dist/config/tailwind.js"
+      "import": "./dist/config/tailwind.js",
+      "default": "./dist/config/tailwind.js"
     },
     "./bundle": {
       "types": "./dist/bundle.d.ts",
-      "import": "./dist/bundle.js"
+      "import": "./dist/bundle.js",
+      "default": "./dist/bundle.js"
     },
     "./bundle.css": "./dist/bundle.css",
     "./themes/reshaped/*": "./dist/themes/reshaped/*",
@@ -74,36 +78,39 @@
     "defaults and not IE 11"
   ],
   "devDependencies": {
-    "@changesets/cli": "2.27.8",
-    "@commitlint/cli": "19.8.1",
-    "@commitlint/config-conventional": "19.8.1",
-    "@commitlint/types": "19.8.1",
-    "@eslint/js": "9.37.0",
+    "@changesets/cli": "2.29.7",
+    "@commitlint/cli": "20.1.0",
+    "@commitlint/config-conventional": "20.0.0",
+    "@commitlint/types": "20.0.0",
+    "@eslint/js": "9.38.0",
     "@size-limit/preset-big-lib": "11.2.0",
-    "@storybook/addon-a11y": "9.1.10",
-    "@storybook/addon-docs": "9.1.10",
-    "@storybook/addon-vitest": "9.1.10",
-    "@storybook/react": "9.1.10",
-    "@storybook/react-vite": "9.1.10",
+    "@storybook/addon-a11y": "10.0.0",
+    "@storybook/addon-docs": "10.0.0",
+    "@storybook/addon-vitest": "10.0.0",
+    "@storybook/react": "10.0.0",
+    "@storybook/react-vite": "10.0.0",
     "@testing-library/user-event": "14.6.1",
     "@types/culori": "4.0.1",
     "@types/events": "3.0.3",
-    "@types/node": "24.7.0",
-    "@types/react": "19.2.1",
-    "@types/react-dom": "19.2.0",
-    "@vitejs/plugin-react": "4.6.0",
-    "@vitest/browser": "3.2.4",
-    "@vitest/coverage-istanbul": "3.2.4",
-    "@vitest/coverage-v8": "3.2.4",
-    "chromatic": "13.3.0",
-    "eslint": "9.37.0",
+    "@types/node": "24.9.2",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
+    "@vitejs/plugin-react": "5.1.0",
+    "@vitest/browser": "4.0.4",
+    "@vitest/browser-playwright": "4.0.4",
+    "@vitest/coverage-istanbul": "4.0.4",
+    "@vitest/coverage-v8": "4.0.4",
+    "chromatic": "13.3.2",
+    "eslint": "9.38.0",
     "eslint-config-prettier": "10.1.8",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "2.32.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-prettier": "5.5.4",
     "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "6.1.1",
-    "lefthook": "1.13.6",
-    "playwright": "1.56.0",
+    "eslint-plugin-react-hooks": "7.0.1",
+    "lefthook": "2.0.1",
+    "playwright": "1.56.1",
     "postcss": "8.5.6",
     "postcss-cli": "11.0.1",
     "postcss-each": "1.1.0",
@@ -114,17 +121,17 @@
     "react-shadow": "20.6.0",
     "resolve-tspaths": "0.8.23",
     "size-limit": "11.2.0",
-    "storybook": "9.1.10",
+    "storybook": "10.0.0",
     "stylelint": "16.25.0",
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-standard": "39.0.1",
     "ts-node": "10.9.2",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.46.0",
-    "vite": "7.1.9",
+    "typescript-eslint": "8.46.2",
+    "vite": "7.1.12",
     "vite-tsconfig-paths": "5.1.4",
-    "vitest": "3.2.4",
-    "vitest-browser-react": "1.0.1"
+    "vitest": "4.0.4",
+    "vitest-browser-react": "2.0.2"
   },
   "peerDependencies": {
     "postcss": "^8",
@@ -135,7 +142,7 @@
     "@changesets/changelog-github": "0.5.1",
     "@csstools/postcss-global-data": "3.1.0",
     "chalk": "4.1.2",
-    "commander": "14.0.1",
+    "commander": "14.0.2",
     "cssnano": "7.1.1",
     "csstype": "3.1.3",
     "culori": "4.0.2",
@@ -171,8 +178,8 @@
     "clean": "sh ./bin/clean.sh",
     "commit": "git-cz",
     "changeset": "changeset",
-    "build": "pnpm clean && pnpm build:stories && pnpm build:esm && pnpm build:css && pnpm build:bundle",
-    "build:themes": "node bin/cli.js theming --config dist/cjs/cli/theming/reshaped.config.js --output src/themes",
+    "build": "pnpm clean && pnpm build:esm && pnpm build:css && pnpm build:bundle",
+    "build:themes": "node bin/cli.js theming --config dist/cli/theming/reshaped.config.js --output src/themes",
     "build:esm": "tsc -p tsconfig.esm.json && resolve-tspaths -p tsconfig.esm.json",
     "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",

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

@@ -1,44 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { Mock } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").AccordionProps> & {
-        Trigger: import("react").FC<import("../Accordion.types").TriggerProps>;
-        Content: import("react").FC<import("../Accordion.types").ContentProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const base: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const iconSize: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const iconPosition: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const gap: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const onToggle: StoryObj<{
-    handleToggle: Mock;
-}>;
-export declare const active: StoryObj<{
-    handleToggle: Mock;
-}>;
-export declare const defaultActive: StoryObj<{
-    handleToggle: Mock;
-}>;
-export declare const renderProps: StoryObj<{
-    handleToggle: Mock;
-}>;
-export declare const className: StoryObj;

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

@@ -1,204 +0,0 @@
-import { userEvent, expect, fn } from "storybook/test";
-import { Placeholder } from "../../../utilities/storybook/index.js";
-import Accordion from "../index.js";
-import Button from "../../Button/index.js";
-import View from "../../View/index.js";
-export default {
-    title: "Utility components/Accordion",
-    component: Accordion,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/utilities/accordion",
-        },
-    },
-};
-export const base = {
-    name: "base",
-    render: () => (<Accordion defaultActive>
-			<Accordion.Trigger>
-				<Placeholder>Trigger</Placeholder>
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<View paddingTop={2}>
-					<Placeholder />
-				</View>
-			</Accordion.Content>
-		</Accordion>),
-};
-export const iconSize = {
-    name: "iconSize",
-    render: () => (<Accordion iconSize={6}>
-			<Accordion.Trigger>
-				<Placeholder>Trigger</Placeholder>
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<View paddingTop={2}>
-					<Placeholder />
-				</View>
-			</Accordion.Content>
-		</Accordion>),
-};
-export const iconPosition = {
-    name: "iconPosition",
-    render: () => (<Accordion iconPosition="start">
-			<Accordion.Trigger>
-				<Placeholder>Trigger</Placeholder>
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<View paddingTop={2}>
-					<Placeholder />
-				</View>
-			</Accordion.Content>
-		</Accordion>),
-};
-export const gap = {
-    name: "gap",
-    render: () => (<Accordion defaultActive gap={4}>
-			<Accordion.Trigger>
-				<Placeholder>Trigger</Placeholder>
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<Placeholder />
-			</Accordion.Content>
-		</Accordion>),
-};
-export const onToggle = {
-    name: "onToggle",
-    args: {
-        handleToggle: fn(),
-    },
-    render: (args) => (<Accordion onToggle={args.handleToggle}>
-			<Accordion.Trigger>
-				<Placeholder>Trigger</Placeholder>
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<View paddingTop={2}>
-					<Placeholder />
-				</View>
-			</Accordion.Content>
-		</Accordion>),
-    play: async ({ canvas, args }) => {
-        const { handleToggle } = args;
-        const trigger = canvas.getAllByRole("button")[0];
-        const content = canvas.getByRole("region", { hidden: true });
-        expect(trigger).toHaveAttribute("aria-expanded", "false");
-        await userEvent.click(trigger);
-        const triggerId = trigger.getAttribute("id");
-        const contentId = content.getAttribute("id");
-        expect(handleToggle).toBeCalledTimes(1);
-        expect(handleToggle).toBeCalledWith(true);
-        expect(trigger).toHaveAttribute("aria-expanded", "true");
-        expect(content).toBeInTheDocument();
-        expect(content.getAttribute("aria-labelledby")).toBe(triggerId);
-        expect(trigger.getAttribute("aria-controls")).toBe(contentId);
-        await userEvent.click(trigger);
-        expect(handleToggle).toBeCalledTimes(2);
-        expect(handleToggle).toBeCalledWith(false);
-        expect(trigger).toHaveAttribute("aria-expanded", "false");
-    },
-};
-export const active = {
-    name: "active",
-    args: {
-        handleToggle: fn(),
-    },
-    render: (args) => (<Accordion onToggle={args.handleToggle} active>
-			<Accordion.Trigger>
-				<Placeholder>Trigger</Placeholder>
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<View paddingTop={2}>
-					<Placeholder />
-				</View>
-			</Accordion.Content>
-		</Accordion>),
-    play: async ({ canvas, args }) => {
-        const { handleToggle } = args;
-        const trigger = canvas.getAllByRole("button")[0];
-        // Opened by default
-        expect(trigger).toHaveAttribute("aria-expanded", "true");
-        await userEvent.click(trigger);
-        // Calls handle toggle with a new state
-        expect(handleToggle).toBeCalledWith(false);
-        // Keeps content opened since it's controlled
-        expect(trigger).toHaveAttribute("aria-expanded", "true");
-    },
-};
-export const defaultActive = {
-    name: "defaultActive",
-    args: {
-        handleToggle: fn(),
-    },
-    render: (args) => (<Accordion onToggle={args.handleToggle} defaultActive>
-			<Accordion.Trigger>
-				<Placeholder>Trigger</Placeholder>
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<View paddingTop={2}>
-					<Placeholder />
-				</View>
-			</Accordion.Content>
-		</Accordion>),
-    play: async ({ canvas, args }) => {
-        const { handleToggle } = args;
-        const trigger = canvas.getAllByRole("button")[0];
-        // Opened by default
-        expect(trigger).toHaveAttribute("aria-expanded", "true");
-        await userEvent.click(trigger);
-        // Calls handle toggle with a new state
-        expect(handleToggle).toBeCalledWith(false);
-        // Keeps content opened since it's controlled
-        expect(trigger).toHaveAttribute("aria-expanded", "false");
-    },
-};
-export const renderProps = {
-    name: "children: render props",
-    args: {
-        handleToggle: fn(),
-    },
-    render: (args) => (<Accordion onToggle={args.handleToggle}>
-			<Accordion.Trigger>
-				{(attributes, { active }) => (<Button attributes={{ ...attributes, "data-active": active }}>Trigger</Button>)}
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<View paddingTop={2}>
-					<Placeholder />
-				</View>
-			</Accordion.Content>
-		</Accordion>),
-    play: async ({ canvas, args }) => {
-        const { handleToggle } = args;
-        const trigger = canvas.getAllByRole("button")[0];
-        const content = canvas.getByRole("region", { hidden: true });
-        const triggerId = trigger.getAttribute("id");
-        const contentId = content.getAttribute("id");
-        expect(trigger).toHaveAttribute("aria-expanded", "false");
-        expect(trigger).toHaveAttribute("id", triggerId);
-        expect(trigger).toHaveAttribute("aria-controls", contentId);
-        expect(trigger).toHaveAttribute("data-active", "false");
-        await userEvent.click(trigger);
-        expect(handleToggle).toBeCalledTimes(1);
-        expect(handleToggle).toBeCalledWith(true);
-        expect(trigger).toHaveAttribute("data-active", "true");
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Accordion className="test-classname" attributes={{ id: "test-id" }}>
-				<Accordion.Trigger>
-					<Placeholder>Trigger</Placeholder>
-				</Accordion.Trigger>
-				<Accordion.Content>
-					<View paddingTop={2}>
-						<Placeholder />
-					</View>
-				</Accordion.Content>
-			</Accordion>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};

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

@@ -1,40 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").ActionBarProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const positionRelative: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const positionAbsolute: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const positionFixed: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const elevated: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const offset: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const active: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const padding: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const className: StoryObj;

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

@@ -1,223 +0,0 @@
-import { expect } from "storybook/test";
-import { Placeholder, Example } from "../../../utilities/storybook/index.js";
-import ActionBar from "../index.js";
-import View from "../../View/index.js";
-import Button from "../../Button/index.js";
-import useToggle from "../../../hooks/useToggle.js";
-export default {
-    title: "Components/ActionBar",
-    component: ActionBar,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/action-bar",
-        },
-    },
-};
-const Fixtures = {
-    Container: (props) => (<View backgroundColor="neutral-faded" height="160px" overflow="hidden" borderRadius="medium">
-			{props.children}
-		</View>),
-    Actions: () => (<View direction="row" gap={2}>
-			<Button onClick={() => { }}>Action</Button>
-			<Button onClick={() => { }} variant="outline">
-				Action
-			</Button>
-		</View>),
-};
-export const positionRelative = {
-    name: "position, positionType: relative",
-    render: () => (<Example>
-			<Example.Item title="position: top">
-				<ActionBar position="top">
-					<Placeholder />
-				</ActionBar>
-			</Example.Item>
-
-			<Example.Item title="position: bottom">
-				<ActionBar position="bottom">
-					<Placeholder />
-				</ActionBar>
-			</Example.Item>
-		</Example>),
-};
-export const positionAbsolute = {
-    name: "position, positionType: absolute",
-    render: () => (<Example>
-			<Example.Item title="position: top-start">
-				<Fixtures.Container>
-					<ActionBar padding={2} position="top-start" positionType="absolute">
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-
-			<Example.Item title="position: top">
-				<Fixtures.Container>
-					<ActionBar padding={2} position="top" positionType="absolute">
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-
-			<Example.Item title="position: top-end">
-				<Fixtures.Container>
-					<ActionBar padding={2} position="top-end" positionType="absolute">
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-
-			<Example.Item title="position: bottom-start">
-				<Fixtures.Container>
-					<ActionBar padding={2} position="bottom-start" positionType="absolute">
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-
-			<Example.Item title="position: bottom">
-				<Fixtures.Container>
-					<ActionBar padding={2} position="bottom" positionType="absolute">
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-
-			<Example.Item title="position: bottom-end">
-				<Fixtures.Container>
-					<ActionBar padding={2} position="bottom-end" positionType="absolute">
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-		</Example>),
-};
-export const positionFixed = {
-    name: "position, positionType: fixed",
-    render: () => (<>
-			<ActionBar padding={2} position="top-start" positionType="fixed">
-				<Fixtures.Actions />
-			</ActionBar>
-
-			<ActionBar padding={2} position="top" positionType="fixed">
-				<Fixtures.Actions />
-			</ActionBar>
-
-			<ActionBar padding={2} position="top-end" positionType="fixed">
-				<Fixtures.Actions />
-			</ActionBar>
-
-			<ActionBar padding={2} position="bottom-start" positionType="fixed">
-				<Fixtures.Actions />
-			</ActionBar>
-
-			<ActionBar padding={2} position="bottom" positionType="fixed">
-				<Fixtures.Actions />
-			</ActionBar>
-
-			<ActionBar padding={2} position="bottom-end" positionType="fixed">
-				<Fixtures.Actions />
-			</ActionBar>
-
-			<div style={{ height: 2000 }}/>
-		</>),
-};
-export const elevated = {
-    name: "elevated",
-    render: () => (<Example>
-			<Example.Item title="elevated, position: top">
-				<ActionBar position="top" elevated>
-					<Placeholder />
-				</ActionBar>
-			</Example.Item>
-
-			<Example.Item title="elevated, position: bottom">
-				<ActionBar elevated>
-					<Placeholder />
-				</ActionBar>
-			</Example.Item>
-
-			<Example.Item title="auto elevated, position: bottom">
-				<Fixtures.Container>
-					<ActionBar position="bottom-end">
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-		</Example>),
-};
-export const offset = {
-    name: "offset",
-    render: () => (<Example>
-			<Example.Item title="offset 2, position: top">
-				<Fixtures.Container>
-					<ActionBar position="top" positionType="absolute" offset={2}>
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-
-			<Example.Item title="offset 2, position: bottom-end">
-				<Fixtures.Container>
-					<ActionBar position="bottom-end" offset={2}>
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-
-			<Example.Item title="offset s: 2, m: 4, position: bottom-end">
-				<Fixtures.Container>
-					<ActionBar position="bottom-end" offset={{ s: 2, m: 4 }}>
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-		</Example>),
-};
-export const active = {
-    name: "active",
-    render: () => {
-        const barToggle = useToggle();
-        return (<>
-				<Button onClick={() => barToggle.toggle()}>Toggle</Button>
-				<ActionBar active={barToggle.active} positionType="fixed" position="top-end">
-					<Fixtures.Actions />
-				</ActionBar>
-			</>);
-    },
-};
-export const padding = {
-    name: "padding, paddingBlock, paddingInline",
-    render: () => (<Example>
-			<Example.Item title="padding: 6">
-				<ActionBar padding={6}>
-					<Placeholder />
-				</ActionBar>
-			</Example.Item>
-
-			<Example.Item title="paddingBlock: 2, paddingInline: 4">
-				<ActionBar paddingBlock={2} paddingInline={4}>
-					<Placeholder />
-				</ActionBar>
-			</Example.Item>
-
-			<Example.Item title="padding: [s] 4, [m+] 6">
-				<ActionBar padding={{ s: 4, m: 6 }}>
-					<Placeholder />
-				</ActionBar>
-			</Example.Item>
-		</Example>),
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<ActionBar className="test-classname" attributes={{ id: "test-id" }}>
-				<Placeholder />
-			</ActionBar>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};