reshaped 3.5.0 → 3.5.1-canary.1

package/dist/components/TextField/TextField.d.ts

@@ -1,10 +1,7 @@
+import React from "react";
+import Aligner from "../_private/Aligner";
 import type * as T from "./TextField.types";
-declare const TextField: {
-    (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    Aligner: {
-        (props: import("../_private/Aligner").AlignerProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    displayName: string;
+declare const TextField: React.FC<T.Props> & {
+    Aligner: typeof Aligner;
 };
 export default TextField;

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

@@ -1,12 +1,7 @@
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").TextFieldProps): import("react").JSX.Element;
-        Aligner: {
-            (props: import("../../_private/Aligner").AlignerProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        displayName: string;
+    component: import("react").FC<import("./..").TextFieldProps> & {
+        Aligner: import("react").FC<import("../../_private/Aligner").AlignerProps>;
     };
     parameters: {
         iframe: {

package/dist/components/TextField/tests/TextField.test.stories.d.ts

@@ -2,13 +2,8 @@ import { StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").TextFieldProps): import("react").JSX.Element;
-        Aligner: {
-            (props: import("../../_private/Aligner").AlignerProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        displayName: string;
+    component: import("react").FC<import("./..").TextFieldProps> & {
+        Aligner: import("react").FC<import("../../_private/Aligner").AlignerProps>;
     };
     parameters: {
         iframe: {

package/dist/components/Theme/GlobalColorMode.d.ts

@@ -1,6 +1,4 @@
+import React from "react";
 import type * as T from "./Theme.types";
-declare const GlobalColorMode: {
-    (props: T.GlobalColorModeProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const GlobalColorMode: React.FC<T.GlobalColorModeProps>;
 export default GlobalColorMode;

package/dist/components/Theme/Theme.d.ts

@@ -1,7 +1,5 @@
+import React from "react";
 import * as T from "./Theme.types";
-declare const Theme: {
-    (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export declare const PrivateTheme: (props: T.PrivateProps) => import("react/jsx-runtime").JSX.Element;
+declare const Theme: React.FC<T.Props>;
+export declare const PrivateTheme: React.FC<T.PrivateProps>;
 export default Theme;

package/dist/components/Theme/tests/Theme.test.stories.d.ts

@@ -1,10 +1,7 @@
 import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").ThemeProps): import("react").JSX.Element;
-        displayName: string;
-    };
+    component: import("react").FC<import("./..").ThemeProps>;
     parameters: {
         iframe: {
             url: string;

package/dist/components/Timeline/Timeline.d.ts

@@ -1,10 +1,7 @@
+import React from "react";
 import type * as T from "./Timeline.types";
-declare const Timeline: {
-    (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    Item: {
-        (props: T.ItemProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    displayName: string;
+declare const TimelineItem: React.FC<T.ItemProps>;
+declare const Timeline: React.FC<T.Props> & {
+    Item: typeof TimelineItem;
 };
 export default Timeline;

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

@@ -1,12 +1,7 @@
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").TimelineProps): import("react").JSX.Element;
-        Item: {
-            (props: import("./..").TimelineItemProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        displayName: string;
+    component: import("react").FC<import("./..").TimelineProps> & {
+        Item: import("react").FC<import("./..").TimelineItemProps>;
     };
     parameters: {
         iframe: {

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

@@ -1,13 +1,8 @@
 import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").TimelineProps): import("react").JSX.Element;
-        Item: {
-            (props: import("./..").TimelineItemProps): import("react").JSX.Element;
-            displayName: string;
-        };
-        displayName: string;
+    component: import("react").FC<import("./..").TimelineProps> & {
+        Item: import("react").FC<import("./..").TimelineItemProps>;
     };
     parameters: {
         iframe: {

package/dist/components/Toast/Toast.d.ts

@@ -1,8 +1,6 @@
+import React from "react";
 import type * as T from "./Toast.types";
-declare const Toast: {
-    (props: T.Props & {
-        collapsed: boolean;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const Toast: React.FC<T.Props & {
+    collapsed: boolean;
+}>;
 export default Toast;

package/dist/components/Toast/ToastContainer.d.ts

@@ -1,6 +1,4 @@
+import React from "react";
 import type * as T from "./Toast.types";
-declare const ToastContainer: {
-    (props: T.ContainerProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const ToastContainer: React.FC<T.ContainerProps>;
 export default ToastContainer;

package/dist/components/Toast/ToastProvider.d.ts

@@ -1,6 +1,4 @@
+import React from "react";
 import * as T from "./Toast.types";
-declare const ToastProvider: {
-    (props: T.ProviderProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const ToastProvider: React.FC<T.ProviderProps>;
 export default ToastProvider;

package/dist/components/Toast/ToastRegion.d.ts

@@ -1,6 +1,4 @@
+import React from "react";
 import * as T from "./Toast.types";
-declare const ToastRegion: {
-    (props: T.RegionProps): import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
-};
+declare const ToastRegion: React.FC<T.RegionProps>;
 export default ToastRegion;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,6 +1,3 @@
 import type * as T from "./Tooltip.types";
-declare const Tooltip: {
-    (props: T.Props): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null | undefined;
-    displayName: string;
-};
+declare const Tooltip: React.FC<T.Props>;
 export default Tooltip;

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

@@ -1,9 +1,6 @@
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").TooltipProps): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
-        displayName: string;
-    };
+    component: import("react").FC<import("./..").TooltipProps>;
     parameters: {
         iframe: {
             url: string;

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

@@ -2,10 +2,7 @@ import { StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").TooltipProps): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
-        displayName: string;
-    };
+    component: import("react").FC<import("./..").TooltipProps>;
     parameters: {
         iframe: {
             url: string;

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

@@ -1,9 +1,9 @@
 import React from "react";
 import type * as T from "./View.types";
 declare const View: {
-    <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.Props<As>): React.ReactNode;
+    <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.Props<As>): import("react/jsx-runtime").JSX.Element;
     Item: {
-        <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.ItemProps<As>): React.ReactNode;
+        <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.ItemProps<As>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     displayName: string;

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

@@ -3,9 +3,9 @@ import { type ViewProps } from "./..";
 declare const _default: {
     title: string;
     component: {
-        <As extends keyof React.JSX.IntrinsicElements = "div">(props: ViewProps<As>): React.ReactNode;
+        <As extends keyof React.JSX.IntrinsicElements = "div">(props: ViewProps<As>): React.JSX.Element;
         Item: {
-            <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").ViewItemProps<As>): React.ReactNode;
+            <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").ViewItemProps<As>): React.JSX.Element;
             displayName: string;
         };
         displayName: string;

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

@@ -2,9 +2,9 @@ import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
     component: {
-        <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").ViewProps<As>): React.ReactNode;
+        <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").ViewProps<As>): import("react").JSX.Element;
         Item: {
-            <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").ViewItemProps<As>): React.ReactNode;
+            <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").ViewItemProps<As>): import("react").JSX.Element;
             displayName: string;
         };
         displayName: string;

package/dist/components/_private/Aligner/Aligner.d.ts

@@ -7,8 +7,5 @@
  * on the --rs-p, --rs-p-v and --rs-p-h css variables
  */
 import type * as T from "./Aligner.types";
-declare const Aligner: {
-    (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const Aligner: React.FC<T.Props>;
 export default Aligner;

package/dist/components/_private/Aligner/Aligner.js

@@ -1,4 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Aligner is a utility used across multiple components to apply
+ * negative margin based on the component padding to align its text content
+ * visually with the rest of the page
+ *
+ * It relies on using a data-rs-aligner-target attribute in other components and works based
+ * on the --rs-p, --rs-p-v and --rs-p-h css variables
+ */
 import { classNames } from "../../../utilities/helpers.js";
 import s from "./Aligner.module.css";
 const Aligner = (props) => {

package/dist/components/_private/Expandable/Expandable.d.ts

@@ -1,6 +1,4 @@
+import React from "react";
 import * as T from "./Expandable.types";
-declare const Expandable: {
-    (props: T.ContentProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const Expandable: React.FC<T.ContentProps>;
 export default Expandable;

package/dist/components/_private/Flyout/Flyout.d.ts

@@ -1,14 +1,8 @@
+import FlyoutTrigger from "./FlyoutTrigger";
+import FlyoutContent from "./FlyoutContent";
 import type * as T from "./Flyout.types";
-declare const Flyout: {
-    (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    Trigger: {
-        (props: T.TriggerProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Content: {
-        (props: T.ContentProps): import("react/jsx-runtime").JSX.Element | null;
-        displayName: string;
-    };
-    displayName: string;
+declare const Flyout: React.FC<T.Props> & {
+    Trigger: typeof FlyoutTrigger;
+    Content: typeof FlyoutContent;
 };
 export default Flyout;

package/dist/components/_private/Flyout/FlyoutContent.d.ts

@@ -1,6 +1,4 @@
+import React from "react";
 import type * as T from "./Flyout.types";
-declare const FlyoutContent: {
-    (props: T.ContentProps): import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
-};
+declare const FlyoutContent: React.FC<T.ContentProps>;
 export default FlyoutContent;

package/dist/components/_private/Flyout/FlyoutControlled.d.ts

@@ -1,6 +1,4 @@
+import React from "react";
 import type * as T from "./Flyout.types";
-declare const FlyoutControlled: {
-    (props: T.ControlledProps & T.DefaultProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const FlyoutControlled: React.FC<T.ControlledProps & T.DefaultProps>;
 export default FlyoutControlled;

package/dist/components/_private/Flyout/FlyoutTrigger.d.ts

@@ -1,6 +1,3 @@
 import type * as T from "./Flyout.types";
-declare const FlyoutTrigger: {
-    (props: T.TriggerProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const FlyoutTrigger: React.FC<T.TriggerProps>;
 export default FlyoutTrigger;

package/dist/components/_private/Flyout/FlyoutUncontrolled.d.ts

@@ -1,6 +1,4 @@
+import React from "react";
 import type * as T from "./Flyout.types";
-declare const FlyoutUncontrolled: {
-    (props: T.UncontrolledProps & T.DefaultProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const FlyoutUncontrolled: React.FC<T.UncontrolledProps & T.DefaultProps>;
 export default FlyoutUncontrolled;

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

@@ -11,15 +11,6 @@ import TextField from "../../../TextField/index.js";
 import MenuItem from "../../../MenuItem/index.js";
 import { sleep } from "../../../../utilities/helpers.js";
 export default { title: "Internal/Flyout" };
-/**
- * Unit
- * - groupTimeouts
- * - id
- * - contentClassName
- * - contentAttributes
- * - content attributes
- * - content className
- */
 const Content = (props) => (<div style={{
         background: "var(--rs-color-background-elevation-overlay)",
         padding: "var(--rs-unit-x4)",

package/dist/components/_private/HiddenInput/HiddenInput.d.ts

@@ -1,6 +1,3 @@
 import type * as T from "./HiddenInput.types";
-declare const HiddenInput: {
-    (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const HiddenInput: React.FC<T.Props>;
 export default HiddenInput;

package/dist/components/_private/Portal/Portal.d.ts

@@ -1,15 +1,14 @@
+import React from "react";
 import type * as T from "./Portal.types";
 export declare const usePortalScope: () => T.Context;
 /**
  * Disclaimer: Works only for components that don't show the portal immediately
  * That gives Portal time to receive scope on first render
  */
-declare const Portal: {
-    (props: T.Props): import("react/jsx-runtime").JSX.Element[];
+declare const Portal: React.FC<T.Props> & {
     Scope: typeof PortalScope;
-    displayName: string;
 };
-declare function PortalScope<T extends HTMLElement>(props: T.ScopeProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function PortalScope<T extends HTMLElement>(props: T.ScopeProps<T>): React.ReactNode;
 declare namespace PortalScope {
     var displayName: string;
 }

package/dist/hooks/_private/useSingletonHotkeys.d.ts

@@ -28,8 +28,8 @@ export declare class HotkeyStore {
  * Components / Hooks
  */
 export declare const HotkeyContext: React.Context<Context>;
-export declare const SingletonHotkeysProvider: (props: {
+export declare const SingletonHotkeysProvider: React.FC<{
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}>;
 declare const useSingletonHotkeys: () => Context;
 export default useSingletonHotkeys;

package/dist/hooks/_private/useSingletonKeyboardMode.d.ts

@@ -7,7 +7,7 @@ type ContextProps = {
     deactivate: () => void;
 };
 export declare const SingletonKeyboardModeContext: React.Context<ContextProps>;
-export declare const SingletonKeyboardModeProvider: (props: {
+export declare const SingletonKeyboardModeProvider: React.FC<{
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}>;
 export {};

package/dist/utilities/storybook/Example.d.ts

@@ -3,11 +3,11 @@ type Props = {
     title?: string | string[];
     children?: React.ReactNode;
 };
-declare const Example: {
-    (props: {
-        children: React.ReactNode;
-        title?: React.ReactNode;
-    }): import("react/jsx-runtime").JSX.Element;
-    Item: (props: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Example: React.FC<{
+    children: React.ReactNode;
+    title?: React.ReactNode;
+}> & {
+    Item: typeof ExampleItem;
 };
+declare const ExampleItem: React.FC<Props>;
 export default Example;

package/dist/utilities/storybook/Placeholder.d.ts

@@ -6,5 +6,5 @@ type Props = {
     children?: React.ReactNode;
     inverted?: boolean;
 };
-declare const Placeholder: (props: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Placeholder: React.FC<Props>;
 export default Placeholder;

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.5.0",
+	"version": "3.5.1-canary.1",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -77,7 +77,7 @@
 		"build:chromatic": "STORYBOOK_ENV=chromatic storybook build",
 		"release": "read -p 'Have you updated chromatic tests?' && yarn release:lib && yarn release:source && yarn build:storybook && yarn release:copy",
 		"release:lib": "yarn build && yarn publish",
-		"release:beta": "yarn build && yarn publish --tag beta",
+		"release:canary": "yarn build && yarn publish --tag canary",
 		"release:test": "yarn build && yarn pack --filename reshaped-test.tgz",
 		"release:source": "sh ./bin/release-source.sh",
 		"release:copy": "sh ./bin/release-copy.sh",
@@ -98,7 +98,7 @@
 		"@commitlint/cli": "19.8.0",
 		"@commitlint/config-conventional": "19.8.0",
 		"@commitlint/types": "19.8.0",
-		"@eslint/js": "9.25.0",
+		"@eslint/js": "9.25.1",
 		"@size-limit/preset-big-lib": "11.2.0",
 		"@storybook/addon-a11y": "8.6.12",
 		"@storybook/addon-actions": "8.6.12",
@@ -113,19 +113,19 @@
 		"@types/node": "22.14.1",
 		"@types/react": "19.1.2",
 		"@types/react-dom": "19.1.2",
-		"@vitejs/plugin-react": "4.4.0",
-		"@vitest/browser": "3.1.1",
-		"@vitest/coverage-istanbul": "3.1.1",
-		"@vitest/coverage-v8": "3.1.1",
+		"@vitejs/plugin-react": "4.4.1",
+		"@vitest/browser": "3.1.2",
+		"@vitest/coverage-istanbul": "3.1.2",
+		"@vitest/coverage-v8": "3.1.2",
 		"chromatic": "11.28.2",
 		"cz-conventional-changelog": "3.3.0",
-		"eslint": "9.25.0",
+		"eslint": "9.25.1",
 		"eslint-config-prettier": "10.1.2",
 		"eslint-plugin-jsx-a11y": "6.10.2",
 		"eslint-plugin-prettier": "5.2.6",
 		"eslint-plugin-react": "7.37.5",
 		"eslint-plugin-react-hooks": "5.2.0",
-		"lefthook": "1.11.10",
+		"lefthook": "1.11.11",
 		"playwright": "1.52.0",
 		"postcss": "8.5.3",
 		"postcss-cli": "11.0.1",
@@ -146,7 +146,7 @@
 		"typescript-eslint": "8.30.1",
 		"vite": "6.3.2",
 		"vite-tsconfig-paths": "5.1.4",
-		"vitest": "3.1.1",
+		"vitest": "3.1.2",
 		"vitest-browser-react": "0.1.1"
 	},
 	"peerDependencies": {

package/dist/components/FormControl/FormControlClient.d.ts

@@ -1,3 +0,0 @@
-import type * as T from "./FormControl.types";
-declare const FormControl: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
-export default FormControl;

package/dist/components/FormControl/FormControlClient.js

@@ -1,28 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import useElementId from "../../hooks/useElementId.js";
-import { Provider } from "./FormControl.context.js";
-import { getCaptionId } from "./FormControl.utilities.js";
-const FormControl = (props) => {
-    const { children, id: passedId, required, hasError, group, disabled, size } = props;
-    const id = useElementId(passedId);
-    const WrapperTagName = group ? "fieldset" : "div";
-    const [helperRendered, setHelperRendered] = React.useState(false);
-    const [errorRendered, setErrorRendered] = React.useState(false);
-    const describedby = [
-        helperRendered && getCaptionId(id),
-        errorRendered && getCaptionId(id, "error"),
-    ]
-        .filter(Boolean)
-        .join(" ");
-    const attributes = { id, "aria-describedby": describedby };
-    const errorRef = () => {
-        setErrorRendered(true);
-    };
-    const helperRef = () => {
-        setHelperRendered(true);
-    };
-    return (_jsx(WrapperTagName, { children: _jsx(Provider, { value: { required, hasError, errorRef, helperRef, attributes, group, disabled, size }, children: children }) }));
-};
-export default FormControl;