reshaped 3.0.0 → 3.0.2

package/dist/cjs/cli/theming/reshaped.config.d.ts

@@ -1,3 +1,3 @@
-import { ReshapedConfig } from "../../types/config";
+import type { ReshapedConfig } from "../../types/config";
 declare const config: ReshapedConfig;
 export default config;

package/dist/cjs/config/tailwind.d.ts

@@ -1,2 +1,2 @@
-import { ThemeDefinition } from "../themes/_generator/tokens/types";
+import type { ThemeDefinition } from "../themes/_generator/tokens/types";
 export declare const getTheme: (theme?: ThemeDefinition) => Record<"backgroundColor" | "textColor" | "borderColor" | "colors" | "borderRadius" | "spacing" | "boxShadow" | "screens", Record<string, string>>;

package/dist/cjs/themes/_generator/constants.d.ts

@@ -1,2 +1,2 @@
-import { Name } from "./tokens/color/color.types";
+import type { Name } from "./tokens/color/color.types";
 export declare const bgWithDynamicForeground: Name[];

package/dist/cjs/themes/_generator/definitions/figma.d.ts

@@ -1,3 +1,3 @@
-import { ThemeDefinition } from "../tokens/types";
+import type { ThemeDefinition } from "../tokens/types";
 declare const theme: ThemeDefinition;
 export default theme;

package/dist/cjs/themes/_generator/definitions/reshaped.d.ts

@@ -1,3 +1,3 @@
-import { ThemeDefinition } from "../tokens/types";
+import type { ThemeDefinition } from "../tokens/types";
 declare const theme: ThemeDefinition;
 export default theme;

package/dist/cjs/themes/_generator/definitions/slate.d.ts

@@ -1,3 +1,3 @@
-import { ThemeDefinition } from "../tokens/types";
+import type { ThemeDefinition } from "../tokens/types";
 declare const theme: ThemeDefinition;
 export default theme;

package/dist/cjs/themes/_generator/types.d.ts

@@ -1,4 +1,4 @@
-import { ReshapedConfig } from "../../types/config";
+import type { ReshapedConfig } from "../../types/config";
 export type Color = string | {
     hex: string;
     hexDark: string;

package/dist/cjs/types/config.d.ts

@@ -1,4 +1,4 @@
-import { PartialThemeDefinition, ColorHue } from "../themes/_generator/tokens/types";
+import type { PartialThemeDefinition, ColorHue } from "../themes/_generator/tokens/types";
 export type ReshapedConfig = {
     themes?: Record<string, PartialThemeDefinition>;
     themeFragments?: Record<string, PartialThemeDefinition>;

package/dist/cli/theming/reshaped.config.d.ts

@@ -1,3 +1,3 @@
-import { ReshapedConfig } from "../../types/config";
+import type { ReshapedConfig } from "../../types/config";
 declare const config: ReshapedConfig;
 export default config;

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

@@ -96,8 +96,8 @@ const RefDemo = () => {
     const carouselRef = React.useRef();
     return (<View gap={3}>
 			<View gap={3} direction="row">
-				<Button onClick={() => { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.navigateBack(); }}>Back</Button>
-				<Button onClick={() => { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.navigateForward(); }}>Forward</Button>
+				<Button onClick={() => carouselRef.current?.navigateBack()}>Back</Button>
+				<Button onClick={() => carouselRef.current?.navigateForward()}>Forward</Button>
 			</View>
 			<Carousel visibleItems={2} instanceRef={carouselRef} navigationDisplay="hidden">
 				<Placeholder h={100}>Item 1</Placeholder>

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -1,4 +1,4 @@
-import { MenuItemProps } from "../MenuItem";
+import { type MenuItemProps } from "../MenuItem";
 import type * as T from "./DropdownMenu.types";
 declare const DropdownMenu: {
     (props: T.Props): import("react/jsx-runtime").JSX.Element;

package/dist/components/Modal/Modal.js

@@ -39,13 +39,14 @@ const ModalSubtitle = (props) => {
     return (_jsx(Text, { variant: "body-3", color: "neutral-faded", attributes: { id: `${id}-subtitle` }, children: children }));
 };
 const Modal = (props) => {
-    const { children, onClose, onOpen, active, size, padding = 4, position = "center", transparentOverlay, ariaLabel, autoFocus = true, overlayClassName, className, attributes, } = props;
+    const { children, onClose, onOpen, active, size, padding = 4, position = "center", transparentOverlay, ariaLabel, autoFocus = true, disableSwipeGesture, overlayClassName, className, attributes, } = props;
     const id = useElementId();
     const clientPosition = useResponsiveClientValue(position);
     const [titleMounted, setTitleMounted] = React.useState(false);
     const [subtitleMounted, setSubtitleMounted] = React.useState(false);
     const [dragging, setDragging] = React.useState(false);
-    const rootRef = React.useRef(null);
+    const internalRootRef = React.useRef(null);
+    const rootRef = attributes?.ref || internalRootRef;
     const dragStartCoordinatesRef = React.useRef({ x: 0, y: 0 });
     const dragLastCoordinateRef = React.useRef(0);
     const dragDistanceRef = React.useRef(0);
@@ -67,6 +68,8 @@ const Modal = (props) => {
         setDragDistance(0);
     };
     const handleDragStart = (e) => {
+        if (disableSwipeGesture)
+            return;
         let currentEl = e.target;
         const rootEl = rootRef.current;
         while (currentEl && (currentEl === rootEl || rootEl?.contains(currentEl))) {
@@ -155,7 +158,7 @@ const Modal = (props) => {
         const progress = Math.abs(dragDistance) / size;
         setHideProgress(progress / 2);
         dragDistanceRef.current = dragDistance;
-    }, [dragDistance, clientPosition]);
+    }, [dragDistance, clientPosition, rootRef]);
     return (_jsx(Overlay, { onClose: onClose, onOpen: onOpen, active: active, transparent: transparentOverlay || hideProgress, className: overlayClassName, attributes: {
             onTouchStart: handleDragStart,
         }, children: ({ active }) => {

package/dist/components/Modal/Modal.types.d.ts

@@ -20,11 +20,14 @@ export type Props = {
     padding?: G.Responsive<number>;
     active?: boolean;
     transparentOverlay?: boolean;
+    disableSwipeGesture?: boolean;
     autoFocus?: boolean;
     onClose?: () => void;
     onOpen?: () => void;
     ariaLabel?: string;
     className?: G.ClassName;
     overlayClassName?: G.ClassName;
-    attributes?: G.Attributes<"div">;
+    attributes?: G.Attributes<"div"> & {
+        ref?: React.RefObject<HTMLDivElement | null>;
+    };
 };

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

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import Modal from "../index.js";
@@ -30,7 +19,7 @@ export default {
     },
 };
 const Demo = (props) => {
-    const { active: activeProp, title, subtitle, children } = props, modalProps = __rest(props, ["active", "title", "subtitle", "children"]);
+    const { active: activeProp, title, subtitle, children, ...modalProps } = props;
     const { active, activate, deactivate } = useToggle(activeProp);
     return (<>
 			<Button onClick={activate}>Open dialog</Button>
@@ -129,8 +118,7 @@ export const edgeCases = () => {
 			</Example.Item>
 			<Example.Item title="focus moves to the input">
 				<Demo title="Modal title" onOpen={() => {
-            var _a;
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            inputRef.current?.focus();
         }}>
 					<View gap={3} direction="row">
 						<Button onClick={() => { }}>Button</Button>
@@ -178,6 +166,10 @@ export const edgeCases = () => {
 				</Modal>
 			</Example.Item>
 
+			<Example.Item title="disableSwipeGesture">
+				<Demo disableSwipeGesture position="start"/>
+			</Example.Item>
+
 			<Example.Item title="scroll locks on open">
 				<Demo />
 				<View height="1000px"/>

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

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { Example } from "../../../utilities/storybook/index.js";
 import View from "../../View/index.js";
 import Popover from "../index.js";
@@ -24,7 +13,7 @@ export default {
     },
 };
 const Demo = (props) => {
-    const { position } = props, rest = __rest(props, ["position"]);
+    const { position, ...rest } = props;
     return (<Popover position={position} {...rest}>
 			<Popover.Trigger>
 				{(attributes) => <Button attributes={attributes}>{position || "Open"}</Button>}
@@ -110,7 +99,10 @@ export const edgeCases = () => (<Example>
 			<Tooltip position="top" text="Hello">
 				{(tooltipAttributes) => (<Popover position="bottom">
 						<Popover.Trigger>
-							{(attributes) => (<Button attributes={Object.assign(Object.assign({}, attributes), tooltipAttributes)}>
+							{(attributes) => (<Button attributes={{
+                ...attributes,
+                ...tooltipAttributes,
+            }}>
 									Open
 								</Button>)}
 						</Popover.Trigger>

package/dist/components/Reshaped/Reshaped.css

@@ -1 +1 @@
-:root{--rs-z-index-raised:5;--rs-z-index-flyout:80;--rs-z-index-fixed:90;--rs-z-index-overlay:100;--rs-z-index-notification:110}blockquote,body,dd,dl,figcaption,figure,h1,h2,h3,h4,h5,h6,li,ol,p,ul{margin:0;padding:0}ol[class],ul[class]{list-style:none}textarea{resize:vertical}table{border-collapse:collapse;border-spacing:0}fieldset{border:0;margin:0;padding:0}img{display:block;max-width:100%}button,input,select,textarea{font:inherit}option{background:var(--rs-color-background-elevation-base)}label{cursor:pointer}input::placeholder,textarea::placeholder{color:var(--rs-color-foreground-neutral-faded);opacity:.5}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-family:var(--rs-font-family-body);font-size:87.5%;font-weight:var(--rs-font-weight-regular);line-height:var(--rs-line-height-body-3);text-rendering:optimizelegibility;touch-action:manipulation}*{box-sizing:border-box}body,html{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);height:100%;scroll-behavior:smooth}[data-rs-theme]:not(html){font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);line-height:var(--rs-line-height-body-3)}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}@layer rs.reset;
+:root{--rs-z-index-raised:5;--rs-z-index-flyout:80;--rs-z-index-fixed:90;--rs-z-index-overlay:100;--rs-z-index-notification:110}blockquote,body,dd,dl,figcaption,figure,h1,h2,h3,h4,h5,h6,li,ol,p,ul{margin:0;padding:0}ol[class],ul[class]{list-style:none}textarea{resize:vertical}table{border-collapse:collapse;border-spacing:0}fieldset{border:0;margin:0;padding:0}img{display:block;max-width:100%}button,input,select,textarea{font:inherit}option{background:var(--rs-color-background-elevation-base)}label{cursor:pointer}input::placeholder,textarea::placeholder{color:var(--rs-color-foreground-neutral-faded);opacity:.5}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-family:var(--rs-font-family-body);font-size:87.5%;font-weight:var(--rs-font-weight-regular);line-height:var(--rs-line-height-body-3);text-rendering:optimizelegibility;touch-action:manipulation}*{box-sizing:border-box}body,html{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);height:100%;scroll-behavior:smooth}[data-rs-theme]:not(html){font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);line-height:var(--rs-line-height-body-3)}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}

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

@@ -15,7 +15,7 @@ export default {
 const Demo = () => {
     const ref = useRef(null);
     return (<View gap={4}>
-			<Button onClick={() => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: 100, behavior: "smooth" }); }}>
+			<Button onClick={() => ref.current?.scrollTo({ top: 100, behavior: "smooth" })}>
 				Scroll
 			</Button>
 			<ScrollArea height="100px" scrollbarDisplay="visible" ref={ref}>

package/dist/components/Select/Select.types.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
 import type * as G from "../../types/global";
-import { FormControlProps } from "../FormControl";
-import { ActionableProps } from "../Actionable";
-import { IconProps } from "../Icon";
+import type { FormControlProps } from "../FormControl";
+import type { ActionableProps } from "../Actionable";
+import type { IconProps } from "../Icon";
 type Size = G.Responsive<"medium" | "large" | "xlarge">;
 type Option = {
     label: string;

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

@@ -13,8 +13,7 @@ export default {
     },
 };
 const Demo = (props) => {
-    var _a;
-    const [activeId, setActiveId] = React.useState((_a = props.activeId) !== null && _a !== void 0 ? _a : 1);
+    const [activeId, setActiveId] = React.useState(props.activeId ?? 1);
     const content = (<View gap={3}>
 			<Placeholder />
 			<View direction="row" gap={3}>

package/dist/components/TextArea/TextArea.types.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type * as G from "../../types/global";
-import { FormControlProps } from "../FormControl";
+import { type FormControlProps } from "../FormControl";
 type Size = G.Responsive<"medium" | "large" | "xlarge">;
 type BaseProps = {
     id?: string;

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

@@ -46,21 +46,21 @@ const Size = () => {
     return (<Example>
 			<Example.Item title="size: small">
 				<Button onClick={() => {
-            toast.show(Object.assign({}, props));
+            toast.show({ ...props });
         }}>
 					Show toast
 				</Button>
 			</Example.Item>
 			<Example.Item title="size: medium">
 				<Button onClick={() => {
-            toast.show(Object.assign(Object.assign({}, props), { size: "medium" }));
+            toast.show({ ...props, size: "medium" });
         }}>
 					Show toast
 				</Button>
 			</Example.Item>
 			<Example.Item title="large">
 				<Button onClick={() => {
-            toast.show(Object.assign(Object.assign({}, props), { size: "large" }));
+            toast.show({ ...props, size: "large" });
         }}>
 					Show toast
 				</Button>

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

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { Example } from "../../../utilities/storybook/index.js";
 import Tooltip from "../index.js";
 import Popover from "../../Popover/index.js";
@@ -25,13 +14,13 @@ export default {
     },
 };
 const Demo = (props) => {
-    const { position } = props, rest = __rest(props, ["position"]);
+    const { position, ...rest } = props;
     return (<Tooltip text={position} position={position} {...rest}>
 			{(attributes) => <Button attributes={attributes}>Show tooltip</Button>}
 		</Tooltip>);
 };
 const DemoResponsive = (props) => {
-    const { position } = props, rest = __rest(props, ["position"]);
+    const { position, ...rest } = props;
     const screenSize = useResponsiveClientValue({
         s: "small",
         m: "medium",
@@ -87,7 +76,7 @@ export const edgeCases = () => (<Example>
 			<Tooltip text="Tooltip" position="top">
 				{(attributes) => (<Popover position="bottom">
 						<Popover.Trigger>
-							{(popoverAttributes) => (<Button attributes={Object.assign(Object.assign({}, attributes), popoverAttributes)}>Action</Button>)}
+							{(popoverAttributes) => (<Button attributes={{ ...attributes, ...popoverAttributes }}>Action</Button>)}
 						</Popover.Trigger>
 						<Popover.Content>Popover</Popover.Content>
 					</Popover>)}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { ViewProps } from "./..";
+import { type ViewProps } from "./..";
 declare const _default: {
     title: string;
     component: {

package/dist/components/_private/Flyout/tests/Flyout.stories.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import { Example } from "../../../../utilities/storybook/index.js";
 import View from "../../../View/index.js";
@@ -17,7 +6,7 @@ import Button from "../../../Button/index.js";
 import Flyout from "../index.js";
 export default { title: "Utilities/Internal/Flyout" };
 const Demo = (props) => {
-    const { position = "bottom-start", children } = props, rest = __rest(props, ["position", "children"]);
+    const { position = "bottom-start", children, ...rest } = props;
     return (<Flyout triggerType="click" position={position} {...rest}>
 			<Flyout.Trigger>
 				{(attributes) => <Button attributes={attributes}>{position}</Button>}

package/dist/config/tailwind.d.ts

@@ -1,2 +1,2 @@
-import { ThemeDefinition } from "../themes/_generator/tokens/types";
+import type { ThemeDefinition } from "../themes/_generator/tokens/types";
 export declare const getTheme: (theme?: ThemeDefinition) => Record<"borderRadius" | "backgroundColor" | "borderColor" | "spacing" | "boxShadow" | "textColor" | "colors" | "screens", Record<string, string>>;

package/dist/themes/_generator/constants.d.ts

@@ -1,2 +1,2 @@
-import { Name } from "./tokens/color/color.types";
+import type { Name } from "./tokens/color/color.types";
 export declare const bgWithDynamicForeground: Name[];

package/dist/themes/_generator/definitions/figma.d.ts

@@ -1,3 +1,3 @@
-import { ThemeDefinition } from "../tokens/types";
+import type { ThemeDefinition } from "../tokens/types";
 declare const theme: ThemeDefinition;
 export default theme;

package/dist/themes/_generator/definitions/reshaped.d.ts

@@ -1,3 +1,3 @@
-import { ThemeDefinition } from "../tokens/types";
+import type { ThemeDefinition } from "../tokens/types";
 declare const theme: ThemeDefinition;
 export default theme;

package/dist/themes/_generator/definitions/slate.d.ts

@@ -1,3 +1,3 @@
-import { ThemeDefinition } from "../tokens/types";
+import type { ThemeDefinition } from "../tokens/types";
 declare const theme: ThemeDefinition;
 export default theme;

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

@@ -30,10 +30,16 @@ const css2 = getThemeCSS("peach", {
         backgroundPrimaryHighlighted: { hex: "#ffbe76" },
     },
 });
-const cssGenerated = getThemeCSS("generated", Object.assign(Object.assign({}, baseThemeDefinition), { color: generateThemeColors({
+const cssGenerated = getThemeCSS("generated", {
+    ...baseThemeDefinition,
+    color: generateThemeColors({
         primary: "#0369a1" /*"#5a58f2"*/ /* "#2563eb" */,
-    }) }));
-const cssGenerated2 = getThemeCSS("generated2", Object.assign(Object.assign({}, baseThemeDefinition), { color: generateThemeColors({ primary: "#2383e2" }) }));
+    }),
+});
+const cssGenerated2 = getThemeCSS("generated2", {
+    ...baseThemeDefinition,
+    color: generateThemeColors({ primary: "#2383e2" }),
+});
 const componentExamples = (<View gap={4} padding={6} backgroundColor="page">
 		<Text variant="featured-2">Hello world</Text>
 		<Text color="neutral-faded" variant="featured-2">

package/dist/themes/_generator/types.d.ts

@@ -1,4 +1,4 @@
-import { ReshapedConfig } from "../../types/config";
+import type { ReshapedConfig } from "../../types/config";
 export type Color = string | {
     hex: string;
     hexDark: string;

package/dist/types/config.d.ts

@@ -1,4 +1,4 @@
-import { PartialThemeDefinition, ColorHue } from "../themes/_generator/tokens/types";
+import type { PartialThemeDefinition, ColorHue } from "../themes/_generator/tokens/types";
 export type ReshapedConfig = {
     themes?: Record<string, PartialThemeDefinition>;
     themeFragments?: Record<string, PartialThemeDefinition>;

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.0.0",
+	"version": "3.0.2",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",