reshaped 3.7.3 → 3.8.0-canary.0

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

@@ -6,21 +6,39 @@ export type TimeoutAlias = "short" | "long";
 export type Timeout = TimeoutAlias | number;
 export type Position = "top" | "top-end" | "top-start" | "bottom" | "bottom-start" | "bottom-end";
 export type Props = {
+    /** Component size
+     * @default "small"
+     */
     size?: "small" | "medium" | "large";
+    /** Icon at the inline start position of the toast */
     icon?: IconProps["svg"];
+    /** Node for inserting content at the inline start position of the toast */
     startSlot?: React.ReactNode;
+    /** Title value for the toast */
     title?: React.ReactNode;
+    /** Text content for the toast */
     text?: React.ReactNode;
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Node for inserting content after the toast actions */
     actionsSlot?: React.ReactNode;
+    /** Color of the toast
+     * @default "inverted"
+     */
     color?: "neutral" | "primary" | "critical" | "positive" | "warning" | "inverted";
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };
 export type ProviderProps = {
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Options for the toast */
     options?: Partial<Record<RegionProps["position"], {
+        /** Width of the toasts rendered inside the region */
         width?: string;
+        /** Always render the toast stack as expanded inside the region */
         expanded?: boolean;
     }>>;
 };

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

@@ -1,7 +1,12 @@
 import type { ButtonProps } from "../Button";
 type BaseProps = Omit<ButtonProps, "variant" | "higlighted"> & {
+    /** Component render variant
+     * @default "outline"
+     */
     variant?: Extract<ButtonProps["variant"], "outline" | "ghost">;
+    /** Value of the toggle button, enables controlled mode for the ToggleButtonGroup */
     value?: string;
+    /** Callback when the toggle button value changes */
     onChange?: (args: {
         checked: boolean;
         value: string;
@@ -9,11 +14,15 @@ type BaseProps = Omit<ButtonProps, "variant" | "higlighted"> & {
     }) => void;
 };
 export type ControlledProps = BaseProps & {
+    /** Default value of the toggle button, enables uncontrolled mode */
     defaultChecked?: never;
+    /** Value of the toggle button, enables controlled mode */
     checked: boolean;
 };
 export type UncontrolledProps = BaseProps & {
+    /** Default value of the toggle button, enables uncontrolled mode */
     defaultChecked?: boolean;
+    /** Value of the toggle button, enables controlled mode */
     checked?: never;
 };
 export type Props = ControlledProps | UncontrolledProps;

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

@@ -2,18 +2,26 @@ import type React from "react";
 import type { ButtonGroupProps } from "../Button";
 import type { ToggleButtonProps } from "../ToggleButton";
 type BaseProps = {
+    /** Selection mode for the toggle button group
+     * @default "single"
+     */
     selectionMode?: "single" | "multiple";
+    /** Callback when the toggle button group value changes */
     onChange?: (args: {
         value: string[];
         event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
     }) => void;
 } & ButtonGroupProps;
 export type ControlledProps = BaseProps & {
+    /** Selected values in the group, enables controlled mode */
     value: string[];
+    /** Default selected values in the group, enables uncontrolled mode */
     defaultValue?: never;
 };
 export type UncontrolledProps = BaseProps & {
+    /** Selected values in the group, enables controlled mode */
     value?: never;
+    /** Default selected values in the group, enables uncontrolled mode */
     defaultValue?: string[];
 };
 export type Props = ControlledProps | UncontrolledProps;

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

@@ -1,7 +1,12 @@
 import React from "react";
 import type { FlyoutProps, FlyoutTriggerProps } from "../Flyout";
 export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "contentGap" | "contentShift" | "originCoordinates" | "contentAttributes" | "contentClassName"> & {
+    /** Node for inserting children */
     children: (attributes: Parameters<FlyoutTriggerProps["children"]>[0] | {}) => React.ReactNode;
+    /** Text content for the tooltip */
     text?: React.ReactNode;
+    /** Color of the tooltip
+     * @default "inverted"
+     */
     color?: "inverted" | "dark";
 };

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

@@ -4,62 +4,117 @@ import type * as TStyles from "../../styles/types";
 type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "auto";
 export type Direction = "row" | "column" | "row-reverse" | "column-reverse";
 export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
+    /** Node for inserting the content */
     children?: React.ReactNode;
+    /** Render as a different element */
     as?: TagName;
+    /** Render a divider between each child */
     divided?: boolean;
+    /** Flex direction for the content */
     direction?: G.Responsive<Direction>;
+    /** Gap between children, base unit token number multiplier */
     gap?: G.Responsive<number>;
+    /** Flex wrap for the content */
     wrap?: G.Responsive<boolean>;
+    /** Flex align-items for the content */
     align?: G.Responsive<TStyles.Align>;
+    /** Flex justify-content for the content */
     justify?: G.Responsive<TStyles.Justify>;
+    /** Height style, literal string value or a base unit token number multiplier */
     height?: G.Responsive<string | number>;
+    /** Width style, literal string value or a base unit token number multiplier */
     width?: G.Responsive<string | number>;
+    /** Aspect ratio style, represented as width / height */
     aspectRatio?: G.Responsive<number>;
+    /** Maximum height style, literal string value or a base unit token number multiplier */
     maxHeight?: G.Responsive<string | number>;
+    /** Maximum width style, literal string value or a base unit token number multiplier */
     maxWidth?: G.Responsive<string | number>;
+    /** Minimum height style, literal string value or a base unit token number multiplier */
     minHeight?: G.Responsive<string | number>;
+    /** Minimum width style, literal string value or a base unit token number multiplier */
     minWidth?: G.Responsive<string | number>;
+    /** Padding style for all sides, base unit token number multiplier */
     padding?: G.Responsive<number>;
+    /** Padding top, base unit token number multiplier */
     paddingTop?: G.Responsive<number>;
+    /** Padding bottom, base unit token number multiplier */
     paddingBottom?: G.Responsive<number>;
+    /** Padding inline start, base unit token number multiplier */
     paddingStart?: G.Responsive<number>;
+    /** Padding inline end, base unit token number multiplier */
     paddingEnd?: G.Responsive<number>;
+    /** Padding inline, base unit token number multiplier */
     paddingInline?: G.Responsive<number>;
+    /** Padding block, base unit token number multiplier */
     paddingBlock?: G.Responsive<number>;
+    /** Apply negative margin and remove side borders, base unit token number multiplier */
     bleed?: G.Responsive<number>;
+    /** Text align for the content */
     textAlign?: G.Responsive<TStyles.TextAlign>;
+    /** Background color, based on the color tokens */
     backgroundColor?: "neutral" | "neutral-faded" | "critical" | "critical-faded" | "positive" | "warning" | "warning-faded" | "positive-faded" | "primary" | "primary-faded" | "elevation-base" | "elevation-raised" | "elevation-overlay" | "page" | "page-faded" | "disabled" | "disabled-faded" | "brand" | "white" | "black";
+    /** Border color, based on the color tokens */
     borderColor?: G.Responsive<TStyles.BorderColor>;
+    /** Add border to all sides */
     border?: G.Responsive<TStyles.Border>;
+    /** Add border to the top side */
     borderTop?: G.Responsive<TStyles.Border>;
+    /** Add border to the bottom side */
     borderBottom?: G.Responsive<TStyles.Border>;
+    /** Add border to the inline start side */
     borderStart?: G.Responsive<TStyles.Border>;
+    /** Add border to the inline end side */
     borderEnd?: G.Responsive<TStyles.Border>;
+    /** Add border to the inline direction */
     borderInline?: G.Responsive<TStyles.Border>;
+    /** Add border to the block direction */
     borderBlock?: G.Responsive<TStyles.Border>;
+    /** Border radius, based on the radius tokens */
     borderRadius?: G.Responsive<TStyles.Radius>;
+    /** Position style */
     position?: G.Responsive<TStyles.Position>;
+    /** Inset style, base unit token number multiplier when used as a number */
     inset?: G.Responsive<TStyles.Inset>;
+    /** Inset start, base unit token number multiplier when used as a number */
     insetStart?: G.Responsive<TStyles.Inset>;
+    /** Inset end, base unit token number multiplier when used as a number */
     insetEnd?: G.Responsive<TStyles.Inset>;
+    /** Inset top, base unit token number multiplier when used as a number */
     insetTop?: G.Responsive<TStyles.Inset>;
+    /** Inset bottom, base unit token number multiplier when used as a number */
     insetBottom?: G.Responsive<TStyles.Inset>;
+    /** z-index style */
     zIndex?: number;
-    shadow?: "raised" | "overlay";
+    /** Shadow style, based on the shadow tokens */
+    shadow?: "raised" | "overlay" | "inset";
+    /** Overflow style */
     overflow?: "hidden" | "auto";
+    /** Add transition for the properties */
     animated?: boolean;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<TagName>;
 } & Pick<ItemProps, "grow" | "shrink">;
 export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
+    /** Flex order of the item inside the parent */
     order?: G.Responsive<number>;
+    /** Number of columns the item should span in the parent, View uses 12 columns */
     columns?: G.Responsive<Columns>;
+    /** Apply flex-grow, using it on View.Item applies additional styles on the parent View	*/
     grow?: G.Responsive<boolean>;
+    /** Apply flex-shrink */
     shrink?: boolean;
+    /** Individual gap before the item, overrides the parent View gap */
     gapBefore?: G.Responsive<number> | "auto";
+    /** Render as a different element */
     as?: TagName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<TagName>;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Node for inserting the item content */
     children?: React.ReactNode;
 };
 export type RenderItem = (args: {

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

@@ -1,9 +1,15 @@
 import type * as G from "../../../types/global";
 type Side = "start" | "end" | "top" | "bottom" | "inline" | "block" | "all";
 export type Props = {
+    /** Node for inserting children components */
     children: React.ReactElement;
+    /** Side of the parent element to align the component with, applies negative margin on the chosen sides
+     * @default "all"
+     */
     side?: Side | Side[];
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };
 export {};

package/dist/themes/index.d.ts

@@ -19,4 +19,5 @@ export type { Name as ViewportTokenName } from "./_generator/tokens/viewport/vie
  */
 export { default as baseThemeDefinition } from "./_generator/definitions/reshaped";
 export { default as generateThemeColors } from "./_generator/tokens/color/utilities/generateColors";
+export { default as transform } from "./_generator/transform";
 export declare const getThemeCSS: (name: string, definition: PassedThemeDefinition, options?: T.PublicOptions["themeOptions"]) => string;

package/dist/themes/index.js

@@ -4,6 +4,7 @@ import transform from "./_generator/transform.js";
  */
 export { default as baseThemeDefinition } from "./_generator/definitions/reshaped.js";
 export { default as generateThemeColors } from "./_generator/tokens/color/utilities/generateColors.js";
+export { default as transform } from "./_generator/transform.js";
 export const getThemeCSS = (name, definition, options) => {
     const code = transform(name, definition, { themeOptions: options, isFragment: true });
     return code.variables;

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.7.3",
+	"version": "3.8.0-canary.0",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -73,14 +73,19 @@
 		"build:size": "yarn clean && yarn build:esm && yarn build:bundle",
 		"build:storybook": "storybook build -o dist/app --disable-telemetry",
 		"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",
+		"changelog": "node bin/generate-changelog.js",
+		"version": "yarn changelog && git add CHANGELOG.md",
+		"release": "node bin/release.js",
+		"release:patch": "node bin/release.js patch",
+		"release:minor": "node bin/release.js minor",
+		"release:major": "node bin/release.js major",
 		"release:lib": "yarn build && yarn publish",
 		"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",
 		"chromatic": "chromatic -b build:chromatic --project-token=$(cat .chromatic)",
 		"test:vrt": "yarn chromatic",
+		"test:vrt:turbo": "yarn chromatic --only-changed",
 		"test:browser": "vitest run --project=storybook",
 		"test:unit": "vitest run --project=unit",
 		"test:size": "size-limit",
@@ -96,17 +101,17 @@
 		"@commitlint/cli": "19.8.1",
 		"@commitlint/config-conventional": "19.8.1",
 		"@commitlint/types": "19.8.1",
-		"@eslint/js": "9.33.0",
+		"@eslint/js": "9.34.0",
 		"@size-limit/preset-big-lib": "11.2.0",
-		"@storybook/addon-a11y": "9.1.2",
-		"@storybook/addon-docs": "9.1.2",
-		"@storybook/addon-vitest": "9.1.2",
-		"@storybook/react-vite": "9.1.2",
+		"@storybook/addon-a11y": "9.1.3",
+		"@storybook/addon-docs": "9.1.3",
+		"@storybook/addon-vitest": "9.1.3",
+		"@storybook/react-vite": "9.1.3",
 		"@types/culori": "4.0.0",
 		"@types/events": "3.0.3",
 		"@types/node": "24.3.0",
-		"@types/react": "19.1.10",
-		"@types/react-dom": "19.1.7",
+		"@types/react": "19.1.12",
+		"@types/react-dom": "19.1.9",
 		"@vitejs/plugin-react": "4.6.0",
 		"@vitest/browser": "3.2.4",
 		"@vitest/coverage-istanbul": "3.2.4",
@@ -114,14 +119,14 @@
 		"chromatic": "13.1.3",
 		"conventional-changelog-cli": "5.0.0",
 		"cz-conventional-changelog": "3.3.0",
-		"eslint": "9.33.0",
+		"eslint": "9.34.0",
 		"eslint-config-prettier": "10.1.8",
 		"eslint-plugin-jsx-a11y": "6.10.2",
 		"eslint-plugin-prettier": "5.5.4",
 		"eslint-plugin-react": "7.37.5",
 		"eslint-plugin-react-hooks": "5.2.0",
 		"lefthook": "1.12.3",
-		"playwright": "1.54.2",
+		"playwright": "1.55.0",
 		"postcss": "8.5.6",
 		"postcss-cli": "11.0.1",
 		"postcss-each": "1.1.0",
@@ -132,14 +137,14 @@
 		"react-shadow": "20.6.0",
 		"resolve-tspaths": "0.8.23",
 		"size-limit": "11.2.0",
-		"storybook": "9.1.2",
+		"storybook": "9.1.3",
 		"stylelint": "16.23.1",
 		"stylelint-config-prettier": "9.0.5",
 		"stylelint-config-standard": "39.0.0",
 		"ts-node": "10.9.2",
 		"typescript": "5.9.2",
-		"typescript-eslint": "8.39.1",
-		"vite": "7.1.2",
+		"typescript-eslint": "8.41.0",
+		"vite": "7.1.3",
 		"vite-tsconfig-paths": "5.1.4",
 		"vitest": "3.2.4",
 		"vitest-browser-react": "1.0.1"
@@ -153,7 +158,7 @@
 		"@csstools/postcss-global-data": "3.0.0",
 		"chalk": "4.1.2",
 		"commander": "14.0.0",
-		"cssnano": "7.1.0",
+		"cssnano": "7.1.1",
 		"csstype": "3.1.3",
 		"culori": "4.0.2",
 		"postcss-custom-media": "11.0.6"
@@ -181,7 +186,6 @@
 		}
 	],
 	"engines": {
-		"yarn": ">=1.0.0",
 		"node": ">=22"
 	}
 }

package/LICENSE-SOURCE.md

@@ -1,40 +0,0 @@
-# Reshaped Pro License
-
-Reshaped grants you a non-exclusive license and permission to use the Design system.
-When using the Reshaped Pro License it grants the same permissions to all Employees and Contractors of the Licensee to access and use the Design system.
-
-Reshaped Pro license is only including the Design system source code.
-Reshaped package publicly distributed on NPM is using a separate MIT license and is provided together with the package when it's installed.
-
-You can:
-
-- Modify the Design system components to create custom components. Those components are subject to this license.
-- Use the Design system to create unlimited Products for yourself, your company or a Client.
-- Sell products created with the Design system to the Users.
-
-You cannot:
-
-- Share your access to the Design system with other people.
-- Redistribute the Design System under other names.
-- Reimplement the Design System using other frameworks and make it available publicly or for sale.
-- Distribute design kits based on the Design system.
-- Distribute design or development tools for building Products using the Design system components.
-- Distribute page templates or UI libraries based on the Design system.
-- Create any Product that is not the sole property of either you, your company or a Client. For example your Employees and Contractors can't use your company Reshaped Pro license to build their own websites or side projects.
-
-## License Definitions
-
-- Licensee is a person or a business entity who has purchased a License.
-- Design system is the source code and design assets made available to the Licensee after purchasing an Reshaped license.
-- Product is any artifact produced that incorporates the Design system.
-- User is a user of a Product.
-- Employee is a full-time or part-time employee of the Licensee.
-- Contractor is an individual or business entity contracted to perform services for the Licensee.
-- Client is an individual or entity receiving custom professional services directly from the Licensee, produced specifically for that individual or entity.
-
-The ownership of the Design system remains with the Reshaped development team.
-You are required to abide by the licensing terms to avoid termination in case of non-compliance with the agreed terms.
-
----
-
-Got any further questions? [Send us an email](mailto:hello@reshaped.so)

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

@@ -1,23 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: {
-        <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").GridProps<As>): import("react").JSX.Element;
-        Item: {
-            <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").GridItemProps<As>): import("react").JSX.Element;
-            displayName: string;
-        };
-        displayName: string;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const as: StoryObj;
-export declare const className: StoryObj;

package/dist/components/Grid/tests/Grid.test.stories.js

@@ -1,42 +0,0 @@
-import { expect } from "storybook/test";
-import Grid from "../index.js";
-export default {
-    title: "Utility components/Grid/tests",
-    component: Grid,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/utilities/grid",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const as = {
-    name: "as",
-    render: () => (<Grid as="ul">
-			<Grid.Item as="li">Content</Grid.Item>
-		</Grid>),
-    play: ({ canvas }) => {
-        const ul = canvas.getByRole("list");
-        const li = canvas.getByRole("listitem");
-        expect(ul).toBeInTheDocument();
-        expect(li).toBeInTheDocument();
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Grid className="test-class" attributes={{ id: "test-id" }}>
-				<Grid.Item className="test-item-class" attributes={{ id: "test-item-id" }}>
-					Content
-				</Grid.Item>
-			</Grid>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        const item = root?.firstChild;
-        expect(root).toHaveAttribute("id", "test-id");
-        expect(root).toHaveClass("test-class");
-        expect(item).toHaveAttribute("id", "test-item-id");
-        expect(item).toHaveClass("test-item-class");
-    },
-};