reshaped 2.8.3 → 2.9.0

package/components/Timeline/tests/Timeline.stories.d.ts

@@ -1,7 +1,15 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: {
+        (props: import("./..").TimelineProps): import("react").JSX.Element;
+        Item: (props: import("./..").TimelineItemProps) => import("react").JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const base: () => React.JSX.Element;
-export declare const marker: () => React.JSX.Element;
+export declare const base: () => import("react").JSX.Element;
+export declare const marker: () => import("react").JSX.Element;

package/components/Timeline/tests/Timeline.stories.js

@@ -1,7 +1,14 @@
-import React from "react";
 import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import Timeline from "../index.js";
-export default { title: "Components/Timeline" };
+export default {
+    title: "Components/Timeline",
+    component: Timeline,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/timeline",
+        },
+    },
+};
 export const base = () => (<Example>
 		<Example.Item title="children passed directly">
 			<Timeline>

package/components/Toast/tests/Toast.stories.d.ts

@@ -1,13 +1,17 @@
-import React from "react";
 declare const _default: {
     title: string;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const base: () => React.JSX.Element;
-export declare const size: () => React.JSX.Element;
-export declare const position: () => React.JSX.Element;
-export declare const color: () => React.JSX.Element;
-export declare const timeout: () => React.JSX.Element;
-export declare const regionOptions: () => React.JSX.Element;
-export declare const slots: () => React.JSX.Element;
-export declare const edgeCases: () => React.JSX.Element;
+export declare const base: () => import("react").JSX.Element;
+export declare const size: () => import("react").JSX.Element;
+export declare const position: () => import("react").JSX.Element;
+export declare const color: () => import("react").JSX.Element;
+export declare const timeout: () => import("react").JSX.Element;
+export declare const regionOptions: () => import("react").JSX.Element;
+export declare const slots: () => import("react").JSX.Element;
+export declare const edgeCases: () => import("react").JSX.Element;

package/components/Toast/tests/Toast.stories.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import { useToast } from "../index.js";
 import Button from "../../Button/index.js";
@@ -7,7 +6,14 @@ import Image from "../../Image/index.js";
 import Text from "../../Text/index.js";
 import Dismissible from "../../Dismissible/index.js";
 import IconZap from "../../../icons/Zap.js";
-export default { title: "Components/Toast" };
+export default {
+    title: "Components/Toast",
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/toast",
+        },
+    },
+};
 const Base = () => {
     const toast = useToast();
     return (<Button onClick={() => {

package/components/Tooltip/tests/Tooltip.stories.d.ts

@@ -1,7 +1,12 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: (props: import("./..").TooltipProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const position: () => React.JSX.Element;
-export declare const controlled: () => React.JSX.Element;
+export declare const position: () => import("react").JSX.Element;
+export declare const controlled: () => import("react").JSX.Element;

package/components/Tooltip/tests/Tooltip.stories.js

@@ -9,12 +9,19 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import Tooltip from "../index.js";
 import Button from "../../Button/index.js";
 import View from "../../View/index.js";
-export default { title: "Components/Tooltip" };
+export default {
+    title: "Components/Tooltip",
+    component: Tooltip,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/tooltip",
+        },
+    },
+};
 const Demo = (props) => {
     const { position } = props, rest = __rest(props, ["position"]);
     return (<Tooltip text={position} position={position} {...rest}>

package/components/View/tests/View.stories.d.ts

@@ -1,6 +1,16 @@
 import React from "react";
+import { ViewProps } from "./..";
 declare const _default: {
     title: string;
+    component: {
+        <As extends keyof JSX.IntrinsicElements = "div">(props: ViewProps<As>): React.JSX.Element;
+        Item: <As_1 extends keyof JSX.IntrinsicElements = "div">(props: import("./..").ViewItemProps<As_1>) => React.JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
 export declare const padding: () => React.JSX.Element;

package/components/View/tests/View.stories.js

@@ -7,7 +7,15 @@ import Tabs from "../../Tabs/index.js";
 import Avatar from "../../Avatar/index.js";
 import MenuItem from "../../MenuItem/index.js";
 import Button from "../../Button/index.js";
-export default { title: "Utilities/View" };
+export default {
+    title: "Utilities/View",
+    component: View,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/view",
+        },
+    },
+};
 export const padding = () => (<Example title="Border is used to highlight the padding value">
 		<Example.Item title="padding: 4">
 			<View padding={4} borderColor="neutral">

package/index.d.ts

@@ -73,6 +73,8 @@ export { default as Reshaped } from "./components/Reshaped";
 export type { ReshapedProps } from "./components/Reshaped";
 export { default as Scrim } from "./components/Scrim";
 export type { ScrimProps } from "./components/Scrim";
+export { default as ScrollArea } from "./components/ScrollArea";
+export type { ScrollAreaProps } from "./components/ScrollArea";
 export { default as Select } from "./components/Select";
 export type { SelectProps } from "./components/Select";
 export { default as Skeleton } from "./components/Skeleton";

package/index.js

@@ -37,6 +37,7 @@ export { default as Radio } from "./components/Radio/index.js";
 export { default as RadioGroup } from "./components/RadioGroup/index.js";
 export { default as Reshaped } from "./components/Reshaped/index.js";
 export { default as Scrim } from "./components/Scrim/index.js";
+export { default as ScrollArea } from "./components/ScrollArea/index.js";
 export { default as Select } from "./components/Select/index.js";
 export { default as Skeleton } from "./components/Skeleton/index.js";
 export { default as Slider } from "./components/Slider/index.js";

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.8.3",
+	"version": "2.9.0",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -84,9 +84,12 @@
 		"@commitlint/config-conventional": "18.4.3",
 		"@commitlint/types": "18.4.3",
 		"@size-limit/preset-big-lib": "11.0.1",
-		"@storybook/addon-a11y": "7.6.6",
-		"@storybook/react": "7.6.6",
-		"@storybook/react-vite": "7.6.6",
+		"@storybook/addon-a11y": "7.6.10",
+		"@storybook/addon-controls": "7.6.10",
+		"@storybook/addon-docs": "7.6.10",
+		"@storybook/addon-storysource": "7.6.10",
+		"@storybook/react": "7.6.10",
+		"@storybook/react-vite": "7.6.10",
 		"@testing-library/jest-dom": "6.1.6",
 		"@testing-library/react": "14.1.2",
 		"@testing-library/user-event": "14.5.2",
@@ -122,14 +125,14 @@
 		"react-dom": "18.2.0",
 		"resolve-tspaths": "0.8.17",
 		"size-limit": "11.0.1",
-		"storybook": "7.6.6",
+		"storybook": "7.6.10",
 		"stylelint": "15.11.0",
 		"stylelint-config-prettier": "9.0.5",
 		"stylelint-config-standard": "34.0.0",
 		"ts-jest": "29.1.1",
 		"typescript": "5.3.3",
-		"vite": "5.0.10",
-		"vite-tsconfig-paths": "4.2.3"
+		"vite": "5.0.11",
+		"vite-tsconfig-paths": "4.3.1"
 	},
 	"peerDependencies": {
 		"postcss": "^8",

package/styles/width/width.module.css

@@ -1 +1 @@
-.literal{width:var(--rs-w-s,auto)}.unit{width:calc(var(--rs-w-s) * var(--rs-unit-x1))}@media (--rs-viewport-m ){.literal--m{width:var(--rs-w-m)}.unit--m{width:calc(var(--rs-w-m) * var(--rs-unit-x1))}}@media (--rs-viewport-l ){.literal--l{width:var(--rs-w-l)}.unit--l{width:calc(var(--rs-w-l) * var(--rs-unit-x1))}}@media (--rs-viewport-xl ){.literal--xl{width:var(--rs-w-xl)}.unit--xl{width:calc(var(--rs-w-xl) * var(--rs-unit-x1))}}
+.literal{width:var(--rs-w-s,auto)!important}.unit{width:calc(var(--rs-w-s) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.literal--m{width:var(--rs-w-m)!important}.unit--m{width:calc(var(--rs-w-m) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.literal--l{width:var(--rs-w-l)!important}.unit--l{width:calc(var(--rs-w-l) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.literal--xl{width:var(--rs-w-xl)!important}.unit--xl{width:calc(var(--rs-w-xl) * var(--rs-unit-x1))!important}}

package/themes/_generator/tests/themes.stories.d.ts

@@ -1,8 +1,12 @@
-import React from "react";
 declare const _default: {
     title: string;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const base: () => React.JSX.Element;
-export declare const generation: () => React.JSX.Element;
-export declare const onColors: () => React.JSX.Element;
+export declare const base: () => import("react").JSX.Element;
+export declare const generation: () => import("react").JSX.Element;
+export declare const onColors: () => import("react").JSX.Element;

package/themes/_generator/tests/themes.stories.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import View from "../../../components/View/index.js";
 import Button from "../../../components/Button/index.js";
@@ -9,7 +8,12 @@ import Avatar from "../../../components/Avatar/index.js";
 import DropdownMenu from "../../../components/DropdownMenu/index.js";
 import Theme from "../../../components/Theme/index.js";
 import { getThemeCSS, generateThemeColors, baseThemeDefinition } from "../../index.js";
-export default { title: "Themes" };
+export default {
+    title: "Themes",
+    parameters: {
+        iframe: { url: "https://reshaped.so/docs/tokens/theming/runtime-theming" },
+    },
+};
 const css = getThemeCSS("green", {
     color: {
         backgroundPrimary: { hex: "#1abc9c", hexDark: "#00E5C4" },

package/utilities/dom.d.ts

@@ -1 +1,3 @@
 export declare const getClosestFlyoutTarget: (el: HTMLElement | null) => HTMLElement;
+export declare const disableUserSelect: () => void;
+export declare const enableUserSelect: () => void;

package/utilities/dom.js

@@ -10,3 +10,9 @@ export const getClosestFlyoutTarget = (el) => {
         return el;
     return getClosestFlyoutTarget(el.parentElement);
 };
+export const disableUserSelect = () => {
+    document.body.style.userSelect = "none";
+};
+export const enableUserSelect = () => {
+    document.body.style.userSelect = "";
+};