reshaped 3.6.0-canary.7 → 3.6.0

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

@@ -0,0 +1,129 @@
+import { expect, fn, userEvent } from "storybook/test";
+import { Example } from "../../../utilities/storybook/index.js";
+import ToggleButtonGroup from "../index.js";
+import ToggleButton from "../../ToggleButton/index.js";
+export default {
+    title: "Components/ToggleButtonGroup",
+    component: ToggleButtonGroup,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/toggle-button-group",
+        },
+    },
+};
+export const single = {
+    name: "checked, defaultChecked, onChange",
+    args: {
+        handleUncontrolledChange: fn(),
+        handleControlledChange: fn(),
+        handleItemChange: fn(),
+    },
+    render: (args) => (<Example>
+			<Example.Item title="single, uncontrolled, onChange">
+				<ToggleButtonGroup onChange={args.handleUncontrolledChange}>
+					<ToggleButton value="1" onChange={args.handleItemChange}>
+						Button
+					</ToggleButton>
+					<ToggleButton value="2">Button</ToggleButton>
+				</ToggleButtonGroup>
+			</Example.Item>
+			<Example.Item title="single, controlled, onChange">
+				<ToggleButtonGroup onChange={args.handleControlledChange} value={[]}>
+					<ToggleButton value="3" onChange={args.handleItemChange}>
+						Button
+					</ToggleButton>
+					<ToggleButton value="4">Button</ToggleButton>
+				</ToggleButtonGroup>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas, args }) => {
+        const [uncontrolledButton1, uncontrolledButton2, controlledButton1, controlledButton2] = canvas.getAllByRole("button");
+        await userEvent.click(uncontrolledButton1);
+        expect(args.handleUncontrolledChange).toHaveBeenCalledTimes(1);
+        expect(args.handleUncontrolledChange).toHaveBeenLastCalledWith({
+            value: ["1"],
+            event: expect.objectContaining({ target: uncontrolledButton1 }),
+        });
+        await userEvent.click(uncontrolledButton2);
+        expect(args.handleUncontrolledChange).toHaveBeenCalledTimes(2);
+        expect(args.handleUncontrolledChange).toHaveBeenLastCalledWith({
+            value: ["2"],
+            event: expect.objectContaining({ target: uncontrolledButton2 }),
+        });
+        await userEvent.click(controlledButton1);
+        expect(args.handleControlledChange).toHaveBeenCalledTimes(1);
+        expect(args.handleControlledChange).toHaveBeenLastCalledWith({
+            value: ["3"],
+            event: expect.objectContaining({ target: controlledButton1 }),
+        });
+        await userEvent.click(controlledButton2);
+        expect(args.handleControlledChange).toHaveBeenCalledTimes(2);
+        expect(args.handleControlledChange).toHaveBeenLastCalledWith({
+            value: ["4"],
+            event: expect.objectContaining({ target: controlledButton2 }),
+        });
+        expect(args.handleItemChange).not.toHaveBeenCalled();
+    },
+};
+export const multiple = {
+    name: "selectionMode, checked, defaultChecked, onChange",
+    args: {
+        handleUncontrolledChange: fn(),
+        handleControlledChange: fn(),
+    },
+    render: (args) => (<Example>
+			<Example.Item title="multiple, uncontrolled, onChange">
+				<ToggleButtonGroup onChange={args.handleUncontrolledChange} selectionMode="multiple">
+					<ToggleButton value="1">Button</ToggleButton>
+					<ToggleButton value="2">Button</ToggleButton>
+				</ToggleButtonGroup>
+			</Example.Item>
+			<Example.Item title="multiple, controlled, onChange">
+				<ToggleButtonGroup onChange={args.handleControlledChange} value={[]} selectionMode="multiple">
+					<ToggleButton value="3">Button</ToggleButton>
+					<ToggleButton value="4">Button</ToggleButton>
+				</ToggleButtonGroup>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas, args }) => {
+        const [uncontrolledButton1, uncontrolledButton2, controlledButton1, controlledButton2] = canvas.getAllByRole("button");
+        await userEvent.click(uncontrolledButton1);
+        expect(args.handleUncontrolledChange).toHaveBeenCalledTimes(1);
+        expect(args.handleUncontrolledChange).toHaveBeenLastCalledWith({
+            value: ["1"],
+            event: expect.objectContaining({ target: uncontrolledButton1 }),
+        });
+        await userEvent.click(uncontrolledButton2);
+        expect(args.handleUncontrolledChange).toHaveBeenCalledTimes(2);
+        expect(args.handleUncontrolledChange).toHaveBeenLastCalledWith({
+            value: ["1", "2"],
+            event: expect.objectContaining({ target: uncontrolledButton2 }),
+        });
+        await userEvent.click(controlledButton1);
+        expect(args.handleControlledChange).toHaveBeenCalledTimes(1);
+        expect(args.handleControlledChange).toHaveBeenLastCalledWith({
+            value: ["3"],
+            event: expect.objectContaining({ target: controlledButton1 }),
+        });
+        await userEvent.click(controlledButton2);
+        expect(args.handleControlledChange).toHaveBeenCalledTimes(2);
+        expect(args.handleControlledChange).toHaveBeenLastCalledWith({
+            value: ["4"],
+            event: expect.objectContaining({ target: controlledButton2 }),
+        });
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<ToggleButtonGroup className="test-classname" attributes={{ id: "test-id" }}>
+				<ToggleButton>Button 1</ToggleButton>
+				<ToggleButton>Button 1</ToggleButton>
+			</ToggleButtonGroup>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/hooks/tests/useDrag.stories.js

@@ -28,7 +28,7 @@ function Example() {
             style: { translate: `${state.x}px ${state.y}px`, cursor: active ? "grabbing" : "grab" },
         }}/>
 			</View>
-			<Button onClick={disabledToggle.toggle}>
+			<Button onClick={() => disabledToggle.toggle()}>
 				{disabledToggle.active ? "Enable" : "Disable"}
 			</Button>
 		</View>);

package/dist/hooks/tests/useToggle.stories.js

@@ -12,7 +12,7 @@ export const toggle = {
     name: "toggle",
     render: () => {
         const { toggle, active } = useToggle();
-        return (<Button onClick={toggle} attributes={{ "data-active": active }}>
+        return (<Button onClick={() => toggle()} attributes={{ "data-active": active }}>
 				{active ? "Deactivate" : "Activate"}
 			</Button>);
     },

package/dist/hooks/useToggle.d.ts

@@ -2,6 +2,6 @@ declare const useToggle: (defaultValue?: boolean) => {
     active: boolean;
     activate: () => void;
     deactivate: () => void;
-    toggle: () => void;
+    toggle: (targetValue?: boolean) => void;
 };
 export default useToggle;

package/dist/hooks/useToggle.js

@@ -8,8 +8,8 @@ const useToggle = (defaultValue) => {
     const deactivate = React.useCallback(() => {
         setActive(false);
     }, []);
-    const toggle = React.useCallback(() => {
-        setActive((active) => !active);
+    const toggle = React.useCallback((targetValue) => {
+        setActive(targetValue ?? ((active) => !active));
     }, []);
     return React.useMemo(() => ({ active, activate, deactivate, toggle }), [activate, deactivate, toggle, active]);
 };

package/dist/index.d.ts

@@ -12,7 +12,7 @@ export type { AvatarProps } from "./components/Avatar";
 export { default as Badge } from "./components/Badge";
 export type { BadgeProps } from "./components/Badge";
 export { default as Button } from "./components/Button";
-export type { ButtonProps, ButtonAlignerProps } from "./components/Button";
+export type { ButtonProps, ButtonAlignerProps, ButtonGroupProps } from "./components/Button";
 export { default as Breadcrumbs } from "./components/Breadcrumbs";
 export type { BreadcrumbsProps } from "./components/Breadcrumbs";
 export { default as Calendar } from "./components/Calendar";
@@ -83,6 +83,10 @@ export { default as Timeline } from "./components/Timeline";
 export type { TimelineProps, TimelineItemProps } from "./components/Timeline";
 export { useToast, ToastProvider } from "./components/Toast";
 export type { ToastProps, ToastProviderProps, ToastShowProps } from "./components/Toast";
+export { default as ToggleButton } from "./components/ToggleButton";
+export type { ToggleButtonProps } from "./components/ToggleButton";
+export { default as ToggleButtonGroup } from "./components/ToggleButtonGroup";
+export type { ToggleButtonGroupProps } from "./components/ToggleButtonGroup";
 export { default as Tooltip } from "./components/Tooltip";
 export type { TooltipProps } from "./components/Tooltip";
 /**

package/dist/index.js

@@ -42,6 +42,8 @@ export { default as TextArea } from "./components/TextArea/index.js";
 export { default as TextField } from "./components/TextField/index.js";
 export { default as Timeline } from "./components/Timeline/index.js";
 export { useToast, ToastProvider } from "./components/Toast/index.js";
+export { default as ToggleButton } from "./components/ToggleButton/index.js";
+export { default as ToggleButtonGroup } from "./components/ToggleButtonGroup/index.js";
 export { default as Tooltip } from "./components/Tooltip/index.js";
 /**
  * Utility components

package/dist/styles/bleed/bleed.module.css

@@ -1 +1 @@
-.root[style*="--rs-bleed-"]{margin-left:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);margin-right:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);--rs-bleed-s:0;--rs-bleed-m:var(--rs-bleed-s);--rs-bleed-l:var(--rs-bleed-m);--rs-bleed-xl:var(--rs-bleed-l);--rs-bleed:var(--rs-bleed-s)}.--bleed{border-left-style:none!important;border-radius:0;border-right-style:none!important}@media (--rs-viewport-m ){.root[style*="--rs-bleed-"]{--rs-bleed:var(--rs-bleed-m)}.--bleed-true--m{border-left-style:none!important;border-radius:0;border-right-style:none!important}.--bleed-false--m{border-left-style:solid!important;border-radius:var(--rs-radius);border-right-style:solid!important}}@media (--rs-viewport-l ){.root[style*="--rs-bleed-"]{--rs-bleed:var(--rs-bleed-l)}.--bleed-true--l{border-left-style:none!important;border-radius:0;border-right-style:none!important}.--bleed-false--l{border-left-style:solid!important;border-radius:var(--rs-radius);border-right-style:solid!important}}@media (--rs-viewport-xl ){.root[style*="--rs-bleed-"]{--rs-bleed:var(--rs-bleed-xl)}.--bleed-true--xl{border-left-style:none!important;border-radius:0;border-right-style:none!important}.--bleed-false--xl{border-left-style:solid!important;border-radius:var(--rs-radius);border-right-style:solid!important}}
+.root[style*="--rs-bleed-"]{margin-left:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);margin-right:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);--rs-bleed-s:0;--rs-bleed-m:var(--rs-bleed-s);--rs-bleed-l:var(--rs-bleed-m);--rs-bleed-xl:var(--rs-bleed-l);--rs-bleed:var(--rs-bleed-s)}.--bleed{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}@media (--rs-viewport-m ){.root[style*="--rs-bleed-"]{--rs-bleed:var(--rs-bleed-m)}.--bleed-true--m{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}.--bleed-false--m{border-left-style:solid!important;border-radius:var(--rs-radius)!important;border-right-style:solid!important}}@media (--rs-viewport-l ){.root[style*="--rs-bleed-"]{--rs-bleed:var(--rs-bleed-l)}.--bleed-true--l{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}.--bleed-false--l{border-left-style:solid!important;border-radius:var(--rs-radius)!important;border-right-style:solid!important}}@media (--rs-viewport-xl ){.root[style*="--rs-bleed-"]{--rs-bleed:var(--rs-bleed-xl)}.--bleed-true--xl{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}.--bleed-false--xl{border-left-style:solid!important;border-radius:var(--rs-radius)!important;border-right-style:solid!important}}

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

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

package/dist/themes/_generator/tokens/color/color.transforms.js

@@ -1,6 +1,6 @@
-const transformTokenForMode = (args) => {
+const transformTokenForMode = (args, themeOptions) => {
     const { hex, oklch } = args;
-    if (oklch) {
+    if (oklch && themeOptions?.colorOutputFormat !== "hex") {
         const components = `${Number(oklch.l.toFixed(4))} ${Number(oklch.c.toFixed(4))} ${Number(oklch.h?.toFixed(4) || 0)}`;
         const alphaSuffix = oklch?.alpha === undefined ? "" : ` / ${Number(oklch.alpha.toFixed(4))}`;
         return `oklch(${components}${alphaSuffix})`;
@@ -9,12 +9,14 @@ const transformTokenForMode = (args) => {
         return hex;
     throw new Error(`[Reshaped] ${JSON.stringify(args)} is missing a color value`);
 };
-const transformToken = (name, token) => {
+const transformToken = (name, token, { themeOptions }) => {
     const { hex, hexDark, oklch, oklchDark } = token;
     // Apply color to both modes if dark mode is not available
     const hasDark = !!hexDark || !!oklchDark;
-    const value = transformTokenForMode({ oklch, hex });
-    const darkValue = hasDark ? transformTokenForMode({ oklch: oklchDark, hex: hexDark }) : undefined;
+    const value = transformTokenForMode({ oklch, hex }, themeOptions);
+    const darkValue = hasDark
+        ? transformTokenForMode({ oklch: oklchDark, hex: hexDark }, themeOptions)
+        : undefined;
     const separateModes = hasDark && value !== darkValue;
     const defaultMode = separateModes ? "light" : undefined;
     const result = [

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

@@ -10,7 +10,7 @@ export type RgbColor = {
 };
 export type OklchColor = Omit<Oklch, "mode">;
 export type HexColor = string;
-export type ColorValue = HexColor | Token;
+export type ColorValue = HexColor | PassedToken;
 export type OklchOnlyToken = {
     oklch: OklchColor;
     oklchDark?: OklchColor;
@@ -25,8 +25,9 @@ export type HexToken = {
     oklch?: never;
     oklchDark?: never;
 };
-export type Token = OklchToken | HexToken;
+export type PassedToken = HexToken | OklchToken;
 export type InternalToken = {
     oklch: Oklch;
     oklchDark?: Oklch;
 };
+export type Token = Pick<HexToken, "hex" | "hexDark"> & Partial<OklchOnlyToken>;

package/dist/themes/_generator/tokens/color/utilities/convert.d.ts

@@ -8,4 +8,4 @@ export declare const oklchToRgb: (oklch: Oklch) => {
     mode: "rgb";
     alpha?: number;
 };
-export declare const tokenToOklchToken: (token: TColor.Token) => TColor.InternalToken;
+export declare const tokenToOklchToken: (token: TColor.PassedToken) => TColor.InternalToken;

package/dist/themes/_generator/tokens/color/utilities/generateColors.d.ts

@@ -1,4 +1,4 @@
-import type { ThemeDefinition } from "../../types";
+import type { PassedThemeDefinition } from "../../types";
 import { type ColorValue, Hue } from "../color.types";
-declare const generateColors: (args?: Partial<Record<Hue, ColorValue>>) => ThemeDefinition["color"];
+declare const generateColors: (args?: Partial<Record<Hue, ColorValue>>) => NonNullable<PassedThemeDefinition["color"]>;
 export default generateColors;

package/dist/themes/_generator/tokens/color/utilities/generateColors.js

@@ -135,7 +135,7 @@ const getOklchToken = (color) => {
     return tokenToOklchToken(token);
 };
 const generateColors = (args = {}) => {
-    const { primary = { oklch: { l: 0.55, c: 0.24, h: 262.67 } }, critical = { oklch: { l: 0.59, c: 0.22, h: 26.97 } }, warning = { oklch: { l: 0.86, c: 0.18, h: 89.84 } }, positive = { oklch: { l: 0.53, c: 0.13, h: 153.78 } }, neutral = { oklch: { l: 0.92, c: 0.01, h: 262.67 } }, brand, } = args;
+    const { primary = { oklch: { l: 0.55, c: 0.24, h: 262.67 } }, critical = { oklch: { l: 0.59, c: 0.22, h: 26.97 } }, warning = { oklch: { l: 0.83, c: 0.2, h: 80 } }, positive = { oklch: { l: 0.53, c: 0.13, h: 153.78 } }, neutral = { oklch: { l: 0.92, c: 0.01, h: 262.67 } }, brand, } = args;
     return {
         ...generateColorValues("primary", getOklchToken(primary)),
         ...generateColorValues("critical", getOklchToken(critical)),

package/dist/themes/_generator/tokens/color/utilities/generateMetaColors.d.ts

@@ -1,4 +1,4 @@
 import type * as T from "../../../types";
-import { GeneratedThemeDefinition, PassedThemeDefinition } from "../../types";
-declare const generateMetaColors: (definition: PassedThemeDefinition, themeOptions?: T.PublicOptions["themeOptions"]) => GeneratedThemeDefinition["color"] | undefined;
+import { PassedThemeDefinition } from "../../types";
+declare const generateMetaColors: (definition: PassedThemeDefinition, themeOptions?: T.PublicOptions["themeOptions"]) => PassedThemeDefinition["color"] | undefined;
 export default generateMetaColors;

package/dist/themes/_generator/tokens/shadow/shadow.transforms.js

@@ -1,5 +1,5 @@
 import { hexToOklch, oklchToRgb } from "../color/utilities/convert.js";
-const transformToken = (name, token, theme) => [
+const transformToken = (name, token, { theme }) => [
     {
         name,
         tokenType: "shadow",

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

@@ -8,7 +8,7 @@ import type * as TShadow from "./shadow/shadow.types";
 import type * as TUnit from "./unit/unit.types";
 import type * as TRadius from "./radius/radius.types";
 import type * as TViewport from "./viewport/viewport.types";
-import { PartialDeep } from "../types";
+import { PartialDeep, PrivateOptions } from "../types";
 export type TokenType = "fontFamily" | "fontWeight" | "unit" | "radius" | "viewport" | "font" | "color" | "duration" | "easing" | "shadow";
 type TokenSet<Name extends string, Token> = Record<Name, Token> & {
     [tokenName: string]: Token;
@@ -22,7 +22,7 @@ export type ThemeDefinition = {
     fontFamily: TokenSet<TFontFamily.Name, TFontFamily.Token>;
     fontWeight: TokenSet<TFontWeight.Name, TFontWeight.Token>;
     font: TokenSet<TFont.Name, TFont.Token>;
-    color: TokenSet<TColor.Name, TColor.Token>;
+    color: TokenSet<TColor.Name, TColor.PassedToken>;
     duration: TokenSet<TDuration.Name, TDuration.Token>;
     easing: TokenSet<TEasing.Name, TEasing.Token>;
     shadow: TokenSet<TShadow.Name, TShadow.Token>;
@@ -33,7 +33,7 @@ export type ThemeDefinition = {
  * but also might include custom "on" colors
  */
 export type PassedThemeDefinition = Omit<PartialDeep<ThemeDefinition>, "color"> & {
-    color?: Partial<TokenSet<TColor.Name | TColor.GeneratedOnName, TColor.Token>>;
+    color?: Partial<TokenSet<TColor.Name | TColor.GeneratedOnName, TColor.PassedToken>>;
 };
 /**
  * Theme generation output which includes all generated tokens
@@ -53,5 +53,8 @@ export type TransformedToken = {
     private?: boolean;
     viewport?: string;
 };
-export type Transformer<Token> = (name: string, token: Token, theme: GeneratedThemeDefinition) => TransformedToken[];
+export type Transformer<Token> = (name: string, token: Token, options: {
+    theme: GeneratedThemeDefinition;
+    themeOptions: PrivateOptions["themeOptions"];
+}) => TransformedToken[];
 export {};

package/dist/themes/_generator/transform.js

@@ -52,7 +52,10 @@ const transform = (name, definition, options) => {
             return;
         const transform = transforms.css[tokenType];
         Object.entries(tokenValues).forEach(([tokenName, token]) => {
-            const transformedTokens = transform(tokenName, token, theme);
+            const transformedTokens = transform(tokenName, token, {
+                theme,
+                themeOptions: options.themeOptions,
+            });
             transformedTokens.forEach((transformedToken) => {
                 transformedStorage[transformedToken.type].push(transformedToken);
             });

package/dist/themes/slate/theme.css

@@ -1 +1 @@
-[data-rs-theme=slate]{--rs-font-family-title:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-body:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-title-1:6rem;--rs-line-height-title-1:6.25rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-1:normal;--rs-font-size-title-2:5rem;--rs-line-height-title-2:5.25rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-2:normal;--rs-font-size-title-3:4rem;--rs-line-height-title-3:4.25rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-3:normal;--rs-font-size-title-4:3.5rem;--rs-line-height-title-4:3.75rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-bold);--rs-letter-spacing-title-4:normal;--rs-font-size-title-5:3rem;--rs-line-height-title-5:3.25rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-bold);--rs-letter-spacing-title-5:normal;--rs-font-size-title-6:2.25rem;--rs-line-height-title-6:2.5rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-bold);--rs-letter-spacing-title-6:normal;--rs-font-size-featured-1:2rem;--rs-line-height-featured-1:2.5rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-letter-spacing-featured-1:normal;--rs-font-size-featured-2:1.5rem;--rs-line-height-featured-2:2rem;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-letter-spacing-featured-2:normal;--rs-font-size-featured-3:1.25rem;--rs-line-height-featured-3:1.75rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-letter-spacing-featured-3:normal;--rs-font-size-body-1:1.125rem;--rs-line-height-body-1:1.75rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-letter-spacing-body-1:normal;--rs-font-size-body-2:1rem;--rs-line-height-body-2:1.5rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-letter-spacing-body-2:normal;--rs-font-size-body-3:0.875rem;--rs-line-height-body-3:1.25rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-letter-spacing-body-3:normal;--rs-font-size-caption-1:0.75rem;--rs-line-height-caption-1:1rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-letter-spacing-caption-1:normal;--rs-font-size-caption-2:0.625rem;--rs-line-height-caption-2:0.75rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-letter-spacing-caption-2:normal;--rs-unit-base:4px;--rs-unit-x1:4px;--rs-unit-x2:8px;--rs-unit-x3:12px;--rs-unit-x4:16px;--rs-unit-x5:20px;--rs-unit-x6:24px;--rs-unit-x7:28px;--rs-unit-x8:32px;--rs-unit-x9:36px;--rs-unit-x10:40px;--rs-radius-small:4px;--rs-radius-medium:8px;--rs-radius-large:12px;--rs-color-brand:oklch(0.55 0.24 262.67);--rs-color-white:oklch(1 0 0);--rs-color-black:oklch(0 0 0);--rs-color-on-background-primary:oklch(1 0 0);--rs-color-on-background-critical:oklch(1 0 0);--rs-color-on-background-warning:oklch(0 0 0);--rs-color-on-background-positive:oklch(1 0 0);--rs-color-on-brand:oklch(1 0 0);--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--rs-duration-rapid:100ms;--rs-duration-fast:200ms;--rs-duration-medium:300ms;--rs-duration-slow:400ms;--rs-easing-standard:cubic-bezier(0.4,0,0.2,1);--rs-easing-accelerate:cubic-bezier(0.4,0,1,1);--rs-easing-decelerate:cubic-bezier(0,0,0.2,1);--rs-shadow-raised:0px 1px 5px -4px rgba(0,0,0,.5),0px 4px 8px 0px rgba(0,0,0,.05);--rs-shadow-overlay:0px 5px 10px 0px rgba(0,0,0,.05),0px 15px 25px 0px rgba(0,0,0,.07);--rs-viewport-m-min:660;--rs-viewport-l-min:900;--rs-viewport-xl-min:1280}[data-rs-theme=slate][data-rs-color-mode=light]{--rs-color-background-primary:oklch(0.55 0.24 262.67);--rs-color-background-primary-faded:oklch(0.97 0.02 262.67);--rs-color-border-primary:oklch(0.47 0.24 262.67);--rs-color-border-primary-faded:oklch(0.92 0.03 262.67);--rs-color-foreground-primary:oklch(0.5 0.24 262.67);--rs-color-background-critical:oklch(0.59 0.22 26.97);--rs-color-background-critical-faded:oklch(0.97 0.02 26.97);--rs-color-border-critical:oklch(0.51 0.22 26.97);--rs-color-border-critical-faded:oklch(0.92 0.03 26.97);--rs-color-foreground-critical:oklch(0.5 0.22 26.97);--rs-color-background-warning:oklch(0.86 0.18 89.84);--rs-color-background-warning-faded:oklch(0.97 0.04 89.84);--rs-color-border-warning:oklch(0.78 0.18 89.84);--rs-color-border-warning-faded:oklch(0.92 0.05 89.84);--rs-color-foreground-warning:oklch(0.5 0.18 89.84);--rs-color-background-positive:oklch(0.53 0.13 153.78);--rs-color-background-positive-faded:oklch(0.97 0.02 153.78);--rs-color-border-positive:oklch(0.45 0.13 153.78);--rs-color-border-positive-faded:oklch(0.92 0.03 153.78);--rs-color-foreground-positive:oklch(0.5 0.13 153.78);--rs-color-background-neutral:oklch(0.92 0.01 262.67);--rs-color-background-neutral-faded:oklch(0.97 0.005 262.67);--rs-color-border-neutral:oklch(0 0.01 262.67/0.12);--rs-color-border-neutral-faded:oklch(0 0.005 262.67/0.08);--rs-color-foreground-neutral:oklch(0.2 0.01 262.67);--rs-color-foreground-neutral-faded:oklch(0.45 0.01 262.67);--rs-color-background-disabled:oklch(0.95 0 262.67);--rs-color-background-disabled-faded:oklch(0.98 0 262.67);--rs-color-border-disabled:oklch(0 0.01 262.67/0.06);--rs-color-foreground-disabled:oklch(0.84 0 262.67);--rs-color-background-elevation-base:oklch(1 0 262.67);--rs-color-background-elevation-raised:oklch(1 0 262.67);--rs-color-background-elevation-overlay:oklch(1 0 262.67);--rs-color-background-page:oklch(1 0 262.67);--rs-color-background-page-faded:oklch(0.97 0 262.67);--rs-color-rgb-background-primary:23.536499999999997,95.6505,250.1295;--rs-color-rgb-background-primary-faded:238.017,245.4885,259.182;--rs-color-rgb-background-critical:226.593,39.168,41.0295;--rs-color-rgb-background-critical-faded:258.5445,240.3885,237.8895;--rs-color-rgb-background-warning:254.92350000000002,201.5775,-26.724;--rs-color-rgb-background-warning-faded:255.612,244.596,215.2965;--rs-color-rgb-background-positive:14.177999999999999,128.673,70.788;--rs-color-rgb-background-positive-faded:235.4415,249.3645,239.0115;--rs-color-on-background-neutral:oklch(0 0 0);--rs-color-rgb-background-neutral:224.96099999999998,228.6585,235.416;--rs-color-rgb-background-neutral-faded:243.219,245.10600000000002,248.523;--rs-color-rgb-background-disabled:238.29749999999999,238.29749999999999,238.29749999999999;--rs-color-rgb-background-disabled-faded:248.2935,248.2935,248.2935;--rs-color-rgb-background-elevation-base:255,255,255;--rs-color-rgb-background-elevation-raised:255,255,255;--rs-color-rgb-background-elevation-overlay:255,255,255;--rs-color-rgb-background-page:255,255,255;--rs-color-rgb-background-page-faded:244.953,244.953,244.953}[data-rs-theme=slate][data-rs-color-mode=dark]{--rs-color-background-primary:oklch(0.5498 0.192 262.67);--rs-color-background-primary-faded:oklch(0.25 0.0384 262.67);--rs-color-border-primary:oklch(0.6298 0.192 262.67);--rs-color-border-primary-faded:oklch(0.35 0.0384 262.67);--rs-color-foreground-primary:oklch(0.75 0.204 262.67);--rs-color-background-critical:oklch(0.5874 0.176 26.97);--rs-color-background-critical-faded:oklch(0.25 0.0352 26.97);--rs-color-border-critical:oklch(0.6674 0.176 26.97);--rs-color-border-critical-faded:oklch(0.35 0.0352 26.97);--rs-color-foreground-critical:oklch(0.75 0.187 26.97);--rs-color-background-warning:oklch(0.8036 0.144 89.84);--rs-color-background-warning-faded:oklch(0.25 0.0288 89.84);--rs-color-border-warning:oklch(0.8836 0.144 89.84);--rs-color-border-warning-faded:oklch(0.35 0.0288 89.84);--rs-color-foreground-warning:oklch(0.75 0.153 89.84);--rs-color-background-positive:oklch(0.5162 0.104 153.78);--rs-color-background-positive-faded:oklch(0.25 0.0208 153.78);--rs-color-border-positive:oklch(0.5962 0.104 153.78);--rs-color-border-positive-faded:oklch(0.35 0.0208 153.78);--rs-color-foreground-positive:oklch(0.75 0.1105 153.78);--rs-color-background-neutral:oklch(0.36 0.008 262.67);--rs-color-background-neutral-faded:oklch(0.25 0.01 262.67);--rs-color-border-neutral:oklch(1 0.008 262.67/0.16);--rs-color-border-neutral-faded:oklch(1 0.01 262.67/0.08);--rs-color-foreground-neutral:oklch(0.96 0.008 262.67);--rs-color-foreground-neutral-faded:oklch(0.81 0.008 262.67);--rs-color-background-disabled:oklch(0.28 0 262.67);--rs-color-background-disabled-faded:oklch(0.23 0 262.67);--rs-color-border-disabled:oklch(0.28 0 262.67);--rs-color-foreground-disabled:oklch(0.4 0 262.67);--rs-color-background-elevation-base:oklch(0.2 0 262.67);--rs-color-background-elevation-raised:oklch(0.21 0 262.67);--rs-color-background-elevation-overlay:oklch(0.22 0 262.67);--rs-color-background-page:oklch(0.16 0 262.67);--rs-color-background-page-faded:oklch(0.18 0 262.67);--rs-color-rgb-background-primary:47.277,104.0655,223.3545;--rs-color-rgb-background-primary-faded:23.6385,33.456,52.122;--rs-color-rgb-background-critical:208.437,69.87,62.526;--rs-color-rgb-background-critical-faded:48.6285,26.877,24.378;--rs-color-rgb-background-warning:227.0265,185.7675,61.353;--rs-color-rgb-background-warning-faded:38.9895,33.047999999999995,17.0595;--rs-color-rgb-background-positive:45.5685,120.86999999999999,75.1995;--rs-color-rgb-background-positive-faded:25.9335,36.643499999999996,29.0445;--rs-color-on-background-neutral:oklch(1 0 0);--rs-color-rgb-background-neutral:58.8285,61.149,65.43299999999999;--rs-color-rgb-background-neutral-faded:31.0335,33.6855,38.556;--rs-color-rgb-background-disabled:40.774499999999996,40.774499999999996,40.774499999999996;--rs-color-rgb-background-disabled-faded:28.815,28.815,28.815;--rs-color-rgb-background-elevation-base:21.9555,21.9555,21.9555;--rs-color-rgb-background-elevation-raised:24.225,24.225,24.225;--rs-color-rgb-background-elevation-overlay:26.52,26.52,26.52;--rs-color-rgb-background-page:13.209,13.209,13.209;--rs-color-rgb-background-page-faded:17.5185,17.5185,17.5185}
+[data-rs-theme=slate]{--rs-font-family-title:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-body:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-title-1:6rem;--rs-line-height-title-1:6.25rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-1:normal;--rs-font-size-title-2:5rem;--rs-line-height-title-2:5.25rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-2:normal;--rs-font-size-title-3:4rem;--rs-line-height-title-3:4.25rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-3:normal;--rs-font-size-title-4:3.5rem;--rs-line-height-title-4:3.75rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-bold);--rs-letter-spacing-title-4:normal;--rs-font-size-title-5:3rem;--rs-line-height-title-5:3.25rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-bold);--rs-letter-spacing-title-5:normal;--rs-font-size-title-6:2.25rem;--rs-line-height-title-6:2.5rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-bold);--rs-letter-spacing-title-6:normal;--rs-font-size-featured-1:2rem;--rs-line-height-featured-1:2.5rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-letter-spacing-featured-1:normal;--rs-font-size-featured-2:1.5rem;--rs-line-height-featured-2:2rem;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-letter-spacing-featured-2:normal;--rs-font-size-featured-3:1.25rem;--rs-line-height-featured-3:1.75rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-letter-spacing-featured-3:normal;--rs-font-size-body-1:1.125rem;--rs-line-height-body-1:1.75rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-letter-spacing-body-1:normal;--rs-font-size-body-2:1rem;--rs-line-height-body-2:1.5rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-letter-spacing-body-2:normal;--rs-font-size-body-3:0.875rem;--rs-line-height-body-3:1.25rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-letter-spacing-body-3:normal;--rs-font-size-caption-1:0.75rem;--rs-line-height-caption-1:1rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-letter-spacing-caption-1:normal;--rs-font-size-caption-2:0.625rem;--rs-line-height-caption-2:0.75rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-letter-spacing-caption-2:normal;--rs-unit-base:4px;--rs-unit-x1:4px;--rs-unit-x2:8px;--rs-unit-x3:12px;--rs-unit-x4:16px;--rs-unit-x5:20px;--rs-unit-x6:24px;--rs-unit-x7:28px;--rs-unit-x8:32px;--rs-unit-x9:36px;--rs-unit-x10:40px;--rs-radius-small:4px;--rs-radius-medium:8px;--rs-radius-large:12px;--rs-color-brand:oklch(0.55 0.24 262.67);--rs-color-white:oklch(1 0 0);--rs-color-black:oklch(0 0 0);--rs-color-on-background-primary:oklch(1 0 0);--rs-color-on-background-critical:oklch(1 0 0);--rs-color-on-background-warning:oklch(0 0 0);--rs-color-on-background-positive:oklch(1 0 0);--rs-color-on-brand:oklch(1 0 0);--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--rs-duration-rapid:100ms;--rs-duration-fast:200ms;--rs-duration-medium:300ms;--rs-duration-slow:400ms;--rs-easing-standard:cubic-bezier(0.4,0,0.2,1);--rs-easing-accelerate:cubic-bezier(0.4,0,1,1);--rs-easing-decelerate:cubic-bezier(0,0,0.2,1);--rs-shadow-raised:0px 1px 5px -4px rgba(0,0,0,.5),0px 4px 8px 0px rgba(0,0,0,.05);--rs-shadow-overlay:0px 5px 10px 0px rgba(0,0,0,.05),0px 15px 25px 0px rgba(0,0,0,.07);--rs-viewport-m-min:660;--rs-viewport-l-min:900;--rs-viewport-xl-min:1280}[data-rs-theme=slate][data-rs-color-mode=light]{--rs-color-background-primary:oklch(0.55 0.24 262.67);--rs-color-background-primary-faded:oklch(0.97 0.02 262.67);--rs-color-border-primary:oklch(0.47 0.24 262.67);--rs-color-border-primary-faded:oklch(0.92 0.03 262.67);--rs-color-foreground-primary:oklch(0.5 0.24 262.67);--rs-color-background-critical:oklch(0.59 0.22 26.97);--rs-color-background-critical-faded:oklch(0.97 0.02 26.97);--rs-color-border-critical:oklch(0.51 0.22 26.97);--rs-color-border-critical-faded:oklch(0.92 0.03 26.97);--rs-color-foreground-critical:oklch(0.5 0.22 26.97);--rs-color-background-warning:oklch(0.83 0.2 80);--rs-color-background-warning-faded:oklch(0.97 0.04 80);--rs-color-border-warning:oklch(0.75 0.2 80);--rs-color-border-warning-faded:oklch(0.92 0.05 80);--rs-color-foreground-warning:oklch(0.5 0.2 80);--rs-color-background-positive:oklch(0.53 0.13 153.78);--rs-color-background-positive-faded:oklch(0.97 0.02 153.78);--rs-color-border-positive:oklch(0.45 0.13 153.78);--rs-color-border-positive-faded:oklch(0.92 0.03 153.78);--rs-color-foreground-positive:oklch(0.5 0.13 153.78);--rs-color-background-neutral:oklch(0.92 0.01 262.67);--rs-color-background-neutral-faded:oklch(0.97 0.005 262.67);--rs-color-border-neutral:oklch(0 0.01 262.67/0.12);--rs-color-border-neutral-faded:oklch(0 0.005 262.67/0.08);--rs-color-foreground-neutral:oklch(0.2 0.01 262.67);--rs-color-foreground-neutral-faded:oklch(0.45 0.01 262.67);--rs-color-background-disabled:oklch(0.95 0 262.67);--rs-color-background-disabled-faded:oklch(0.98 0 262.67);--rs-color-border-disabled:oklch(0 0.01 262.67/0.06);--rs-color-foreground-disabled:oklch(0.84 0 262.67);--rs-color-background-elevation-base:oklch(1 0 262.67);--rs-color-background-elevation-raised:oklch(1 0 262.67);--rs-color-background-elevation-overlay:oklch(1 0 262.67);--rs-color-background-page:oklch(1 0 262.67);--rs-color-background-page-faded:oklch(0.97 0 262.67);--rs-color-rgb-background-primary:23.536499999999997,95.6505,250.1295;--rs-color-rgb-background-primary-faded:238.017,245.4885,259.182;--rs-color-rgb-background-critical:226.593,39.168,41.0295;--rs-color-rgb-background-critical-faded:258.5445,240.3885,237.8895;--rs-color-rgb-background-warning:265.7865,180.5145,-70.15050000000001;--rs-color-rgb-background-warning-faded:259.6665,242.862,215.577;--rs-color-rgb-background-positive:14.177999999999999,128.673,70.788;--rs-color-rgb-background-positive-faded:235.4415,249.3645,239.0115;--rs-color-on-background-neutral:oklch(0 0 0);--rs-color-rgb-background-neutral:224.96099999999998,228.6585,235.416;--rs-color-rgb-background-neutral-faded:243.219,245.10600000000002,248.523;--rs-color-rgb-background-disabled:238.29749999999999,238.29749999999999,238.29749999999999;--rs-color-rgb-background-disabled-faded:248.2935,248.2935,248.2935;--rs-color-rgb-background-elevation-base:255,255,255;--rs-color-rgb-background-elevation-raised:255,255,255;--rs-color-rgb-background-elevation-overlay:255,255,255;--rs-color-rgb-background-page:255,255,255;--rs-color-rgb-background-page-faded:244.953,244.953,244.953}[data-rs-theme=slate][data-rs-color-mode=dark]{--rs-color-background-primary:oklch(0.5498 0.192 262.67);--rs-color-background-primary-faded:oklch(0.25 0.0384 262.67);--rs-color-border-primary:oklch(0.6298 0.192 262.67);--rs-color-border-primary-faded:oklch(0.35 0.0384 262.67);--rs-color-foreground-primary:oklch(0.75 0.204 262.67);--rs-color-background-critical:oklch(0.5874 0.176 26.97);--rs-color-background-critical-faded:oklch(0.25 0.0352 26.97);--rs-color-border-critical:oklch(0.6674 0.176 26.97);--rs-color-border-critical-faded:oklch(0.35 0.0352 26.97);--rs-color-foreground-critical:oklch(0.75 0.187 26.97);--rs-color-background-warning:oklch(0.8036 0.16 80);--rs-color-background-warning-faded:oklch(0.25 0.032 80);--rs-color-border-warning:oklch(0.8836 0.16 80);--rs-color-border-warning-faded:oklch(0.35 0.032 80);--rs-color-foreground-warning:oklch(0.75 0.17 80);--rs-color-background-positive:oklch(0.5162 0.104 153.78);--rs-color-background-positive-faded:oklch(0.25 0.0208 153.78);--rs-color-border-positive:oklch(0.5962 0.104 153.78);--rs-color-border-positive-faded:oklch(0.35 0.0208 153.78);--rs-color-foreground-positive:oklch(0.75 0.1105 153.78);--rs-color-background-neutral:oklch(0.36 0.008 262.67);--rs-color-background-neutral-faded:oklch(0.25 0.01 262.67);--rs-color-border-neutral:oklch(1 0.008 262.67/0.16);--rs-color-border-neutral-faded:oklch(1 0.01 262.67/0.08);--rs-color-foreground-neutral:oklch(0.96 0.008 262.67);--rs-color-foreground-neutral-faded:oklch(0.81 0.008 262.67);--rs-color-background-disabled:oklch(0.28 0 262.67);--rs-color-background-disabled-faded:oklch(0.23 0 262.67);--rs-color-border-disabled:oklch(0.28 0 262.67);--rs-color-foreground-disabled:oklch(0.4 0 262.67);--rs-color-background-elevation-base:oklch(0.2 0 262.67);--rs-color-background-elevation-raised:oklch(0.21 0 262.67);--rs-color-background-elevation-overlay:oklch(0.22 0 262.67);--rs-color-background-page:oklch(0.16 0 262.67);--rs-color-background-page-faded:oklch(0.18 0 262.67);--rs-color-rgb-background-primary:47.277,104.0655,223.3545;--rs-color-rgb-background-primary-faded:23.6385,33.456,52.122;--rs-color-rgb-background-critical:208.437,69.87,62.526;--rs-color-rgb-background-critical-faded:48.6285,26.877,24.378;--rs-color-rgb-background-warning:244.1625,177.3525,31.7985;--rs-color-rgb-background-warning-faded:41.6925,31.900499999999997,15.1215;--rs-color-rgb-background-positive:45.5685,120.86999999999999,75.1995;--rs-color-rgb-background-positive-faded:25.9335,36.643499999999996,29.0445;--rs-color-on-background-neutral:oklch(1 0 0);--rs-color-rgb-background-neutral:58.8285,61.149,65.43299999999999;--rs-color-rgb-background-neutral-faded:31.0335,33.6855,38.556;--rs-color-rgb-background-disabled:40.774499999999996,40.774499999999996,40.774499999999996;--rs-color-rgb-background-disabled-faded:28.815,28.815,28.815;--rs-color-rgb-background-elevation-base:21.9555,21.9555,21.9555;--rs-color-rgb-background-elevation-raised:24.225,24.225,24.225;--rs-color-rgb-background-elevation-overlay:26.52,26.52,26.52;--rs-color-rgb-background-page:13.209,13.209,13.209;--rs-color-rgb-background-page-faded:17.5185,17.5185,17.5185}

package/dist/types/config.d.ts

@@ -4,6 +4,7 @@ export type ReshapedConfig = {
     themes?: Record<string, PassedThemeDefinition>;
     themeFragments?: Record<string, PassedThemeDefinition>;
     themeOptions?: {
+        colorOutputFormat?: "oklch" | "hex";
         colorContrastAlgorithm?: "wcag" | "apca";
         generateOnColorsFor?: string[];
         onColorValues?: {

package/dist/utilities/a11y/index.d.ts

@@ -1,4 +1,4 @@
-export { focusableSelector, getActiveElement, focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, } from "./focus";
+export { focusableSelector, getActiveElement, getFocusableElements, focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, } from "./focus";
 export { activateKeyboardMode, deactivateKeyboardMode, checkKeyboardMode } from "./keyboardMode";
 export { default as TrapFocus } from "./TrapFocus";
 export type { TrapMode, FocusableElement } from "./types";

package/dist/utilities/a11y/index.js

@@ -1,3 +1,3 @@
-export { focusableSelector, getActiveElement, focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, } from "./focus.js";
+export { focusableSelector, getActiveElement, getFocusableElements, focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, } from "./focus.js";
 export { activateKeyboardMode, deactivateKeyboardMode, checkKeyboardMode } from "./keyboardMode.js";
 export { default as TrapFocus } from "./TrapFocus.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": "3.6.0-canary.7",
+	"version": "3.6.0",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -96,53 +96,53 @@
 		"@commitlint/cli": "19.8.1",
 		"@commitlint/config-conventional": "19.8.1",
 		"@commitlint/types": "19.8.1",
-		"@eslint/js": "9.28.0",
+		"@eslint/js": "9.29.0",
 		"@size-limit/preset-big-lib": "11.2.0",
-		"@storybook/addon-a11y": "9.0.4",
-		"@storybook/addon-docs": "9.0.4",
-		"@storybook/addon-vitest": "9.0.4",
-		"@storybook/react-vite": "9.0.4",
+		"@storybook/addon-a11y": "9.0.13",
+		"@storybook/addon-docs": "9.0.13",
+		"@storybook/addon-vitest": "9.0.13",
+		"@storybook/react-vite": "9.0.13",
 		"@types/culori": "4.0.0",
 		"@types/events": "3.0.3",
-		"@types/node": "22.15.29",
-		"@types/react": "19.1.6",
-		"@types/react-dom": "19.1.5",
-		"@vitejs/plugin-react": "4.5.0",
-		"@vitest/browser": "3.2.0",
-		"@vitest/coverage-istanbul": "3.2.0",
-		"@vitest/coverage-v8": "3.2.0",
-		"chromatic": "12.0.0",
+		"@types/node": "24.0.4",
+		"@types/react": "19.1.8",
+		"@types/react-dom": "19.1.6",
+		"@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.0.1",
 		"conventional-changelog-cli": "5.0.0",
 		"cz-conventional-changelog": "3.3.0",
-		"eslint": "9.28.0",
+		"eslint": "9.29.0",
 		"eslint-config-prettier": "10.1.5",
 		"eslint-plugin-jsx-a11y": "6.10.2",
-		"eslint-plugin-prettier": "5.4.1",
+		"eslint-plugin-prettier": "5.5.1",
 		"eslint-plugin-react": "7.37.5",
 		"eslint-plugin-react-hooks": "5.2.0",
-		"lefthook": "1.11.13",
-		"playwright": "1.52.0",
-		"postcss": "8.5.4",
+		"lefthook": "1.11.14",
+		"playwright": "1.53.1",
+		"postcss": "8.5.6",
 		"postcss-cli": "11.0.1",
 		"postcss-each": "1.1.0",
 		"postcss-nested": "7.0.2",
-		"prettier": "3.5.3",
+		"prettier": "3.6.2",
 		"react": "18",
 		"react-dom": "18",
 		"react-shadow": "20.6.0",
 		"resolve-tspaths": "0.8.23",
 		"size-limit": "11.2.0",
-		"storybook": "9.0.4",
-		"stylelint": "16.20.0",
+		"storybook": "9.0.13",
+		"stylelint": "16.21.0",
 		"stylelint-config-prettier": "9.0.5",
 		"stylelint-config-standard": "38.0.0",
 		"ts-node": "10.9.2",
 		"typescript": "5.8.3",
-		"typescript-eslint": "8.33.1",
-		"vite": "6.3.5",
+		"typescript-eslint": "8.35.0",
+		"vite": "7.0.0",
 		"vite-tsconfig-paths": "5.1.4",
-		"vitest": "3.2.0",
-		"vitest-browser-react": "0.2.0"
+		"vitest": "3.2.4",
+		"vitest-browser-react": "1.0.0"
 	},
 	"peerDependencies": {
 		"postcss": "^8",
@@ -182,6 +182,6 @@
 	],
 	"engines": {
 		"yarn": ">=1.0.0",
-		"node": ">=20"
+		"node": ">=22"
 	}
 }

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

@@ -1,18 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").ResizableProps> & {
-        Item: React.FC<import("./..").ResizableItemProps>;
-        Handle: React.FC<import("./..").ResizableHandleProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const className: StoryObj;

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

@@ -1,25 +0,0 @@
-import { expect } from "storybook/test";
-import Resizable from "../index.js";
-export default {
-    title: "Components/Resizable/tests",
-    component: Resizable,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/utilities/Resizable",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Resizable className="test-classname" attributes={{ id: "test-id" }}>
-				<Resizable.Item>Content</Resizable.Item>
-			</Resizable>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};