reshaped 3.6.0-canary.6 → 3.6.0-canary.8

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

@@ -0,0 +1,3 @@
+import type * as T from "./ToggleButton.types";
+declare const ToggleButtonControlled: React.FC<T.ControlledProps>;
+export default ToggleButtonControlled;

package/dist/components/ToggleButton/ToggleButtonControlled.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import Button from "../Button/index.js";
+import { useToggleButtonGroup } from "../ToggleButtonGroup/index.js";
+const ToggleButtonControlled = (props) => {
+    const { variant = "outline", value, onChange, onClick, ...buttonProps } = props;
+    const toggleButtonGroup = useToggleButtonGroup();
+    const checked = (value ? toggleButtonGroup?.value?.includes(value) : undefined) ?? props.checked;
+    const handleClick = (event) => {
+        const changeArgs = { checked: !checked, value: value ?? "", event };
+        onClick?.(event);
+        if (toggleButtonGroup) {
+            toggleButtonGroup?.onChange?.(changeArgs);
+        }
+        else {
+            onChange?.(changeArgs);
+        }
+    };
+    return _jsx(Button, { ...buttonProps, variant: variant, onClick: handleClick, highlighted: checked });
+};
+ToggleButtonControlled.displayName = "ToggleButtonControlled";
+export default ToggleButtonControlled;

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

@@ -0,0 +1,3 @@
+import type * as T from "./ToggleButton.types";
+declare const ToggleButtonUncontrolled: React.FC<T.UncontrolledProps>;
+export default ToggleButtonUncontrolled;

package/dist/components/ToggleButton/ToggleButtonUncontrolled.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import useToggle from "../../hooks/useToggle.js";
+import ToggleButtonControlled from "./ToggleButtonControlled.js";
+const ToggleButtonUncontrolled = (props) => {
+    const { defaultChecked, onChange, ...buttonProps } = props;
+    const buttonToggle = useToggle(defaultChecked);
+    const handleChange = (args) => {
+        onChange?.(args);
+        buttonToggle.toggle(args.checked);
+    };
+    return (_jsx(ToggleButtonControlled, { ...buttonProps, onChange: handleChange, checked: buttonToggle.active }));
+};
+ToggleButtonUncontrolled.displayName = "ToggleButtonUncontrolled";
+export default ToggleButtonUncontrolled;

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

@@ -0,0 +1,2 @@
+export { default } from "./ToggleButton";
+export type { Props as ToggleButtonProps } from "./ToggleButton.types";

package/dist/components/ToggleButton/index.js

@@ -0,0 +1 @@
+export { default } from "./ToggleButton.js";

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

@@ -0,0 +1,23 @@
+import { type StoryObj } from "@storybook/react-vite";
+import { type Mock } from "storybook/test";
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("..").ToggleButtonProps>;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
+};
+export default _default;
+export declare const variant: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const onChange: StoryObj<{
+    handleUncontrolledChange: Mock;
+    handleControlledChange: Mock;
+}>;
+export declare const onClick: StoryObj<{
+    handleClick: Mock;
+}>;

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

@@ -0,0 +1,87 @@
+import { expect, fn, userEvent } from "storybook/test";
+import { Example } from "../../../utilities/storybook/index.js";
+import ToggleButton from "../ToggleButton.js";
+export default {
+    title: "Components/ToggleButton",
+    component: ToggleButton,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/toggle-button",
+        },
+    },
+};
+export const variant = {
+    name: "variant",
+    render: () => (<Example>
+			<Example.Item title="outline">
+				<ToggleButton>Button</ToggleButton>
+			</Example.Item>
+			<Example.Item title="ghost">
+				<ToggleButton variant="ghost">Button</ToggleButton>
+			</Example.Item>
+		</Example>),
+};
+export const onChange = {
+    name: "checked, defaultChecked, onChange",
+    args: {
+        handleUncontrolledChange: fn(),
+        handleControlledChange: fn(),
+    },
+    render: (args) => (<Example>
+				<Example.Item title="defaultChecked, onChange">
+					<ToggleButton defaultChecked onChange={args.handleUncontrolledChange} value="1">
+						Button
+					</ToggleButton>
+				</Example.Item>
+				<Example.Item title="checked, onChange">
+					<ToggleButton checked onChange={args.handleControlledChange} value="2">
+						Button
+					</ToggleButton>
+				</Example.Item>
+			</Example>),
+    play: async ({ canvas, args }) => {
+        const [uncontrolledButton, controlledButton] = canvas.getAllByRole("button");
+        await userEvent.click(uncontrolledButton);
+        expect(args.handleUncontrolledChange).toHaveBeenCalledTimes(1);
+        expect(args.handleUncontrolledChange).toHaveBeenLastCalledWith({
+            checked: false,
+            value: "1",
+            event: expect.objectContaining({ target: uncontrolledButton }),
+        });
+        await userEvent.click(uncontrolledButton);
+        expect(args.handleUncontrolledChange).toHaveBeenCalledTimes(2);
+        expect(args.handleUncontrolledChange).toHaveBeenLastCalledWith({
+            checked: true,
+            value: "1",
+            event: expect.objectContaining({ target: uncontrolledButton }),
+        });
+        await userEvent.click(controlledButton);
+        expect(args.handleControlledChange).toHaveBeenCalledTimes(1);
+        expect(args.handleControlledChange).toHaveBeenLastCalledWith({
+            checked: false,
+            value: "2",
+            event: expect.objectContaining({ target: controlledButton }),
+        });
+        await userEvent.click(controlledButton);
+        // Stayed checked after the first click
+        expect(args.handleControlledChange).toHaveBeenCalledTimes(2);
+        expect(args.handleControlledChange).toHaveBeenLastCalledWith({
+            checked: false,
+            value: "2",
+            event: expect.objectContaining({ target: uncontrolledButton }),
+        });
+    },
+};
+export const onClick = {
+    name: "onClick",
+    args: {
+        handleClick: fn(),
+    },
+    render: (args) => <ToggleButton onClick={args.handleClick}>Button</ToggleButton>,
+    play: async ({ canvas, args }) => {
+        const [button] = canvas.getAllByRole("button");
+        await userEvent.click(button);
+        expect(args.handleClick).toHaveBeenCalledOnce();
+        expect(args.handleClick).toHaveBeenLastCalledWith(expect.objectContaining({ target: button }));
+    },
+};

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

@@ -0,0 +1,5 @@
+import React from "react";
+import type * as T from "./ToggleButtonGroup.types";
+declare const ToggleButtonGroupContext: React.Context<T.Context | null>;
+export declare const useToggleButtonGroup: () => T.Context | null;
+export default ToggleButtonGroupContext;

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.context.js

@@ -0,0 +1,5 @@
+"use client";
+import React from "react";
+const ToggleButtonGroupContext = React.createContext(null);
+export const useToggleButtonGroup = () => React.useContext(ToggleButtonGroupContext);
+export default ToggleButtonGroupContext;

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

@@ -0,0 +1,3 @@
+import type * as T from "./ToggleButtonGroup.types";
+declare const ToggleButtonGroup: React.FC<T.Props>;
+export default ToggleButtonGroup;

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ToggleButtonGroupControlled from "./ToggleButtonGroupControlled.js";
+import ToggleButtonGroupUncontrolled from "./ToggleButtonGroupUncontrolled.js";
+const ToggleButtonGroup = (props) => {
+    const { value } = props;
+    if (value !== undefined)
+        return _jsx(ToggleButtonGroupControlled, { ...props });
+    return _jsx(ToggleButtonGroupUncontrolled, { ...props });
+};
+ToggleButtonGroup.displayName = "ToggleButtonGroup";
+export default ToggleButtonGroup;

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

@@ -0,0 +1,24 @@
+import type React from "react";
+import type { ToggleButtonProps } from "../ToggleButton";
+type BaseProps = {
+    children?: React.ReactNode;
+    selectionMode?: "single" | "multiple";
+    onChange?: (args: {
+        value: string[];
+        event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
+    }) => void;
+};
+export type ControlledProps = BaseProps & {
+    value: string[];
+    defaultValue?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    value?: never;
+    defaultValue?: string[];
+};
+export type Props = ControlledProps | UncontrolledProps;
+export type Context = {
+    onChange: ToggleButtonProps["onChange"];
+    value?: string[];
+};
+export {};

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+import type * as T from "./ToggleButtonGroup.types";
+declare const ToggleButtonGroupControlled: React.FC<T.ControlledProps>;
+export default ToggleButtonGroupControlled;

package/dist/components/ToggleButtonGroup/ToggleButtonGroupControlled.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import Button from "../Button/index.js";
+import useHotkeys from "../../hooks/useHotkeys.js";
+import Context from "./ToggleButtonGroup.context.js";
+import { focusFirstElement, focusLastElement, focusNextElement, focusPreviousElement, } from "../../utilities/a11y/index.js";
+const ToggleButtonGroupControlled = (props) => {
+    const { onChange, value, children, selectionMode = "single" } = props;
+    const handleChange = (args) => {
+        const { event, value: itemValue, checked } = args;
+        if (!itemValue)
+            return;
+        let nextValue = selectionMode === "single" ? [itemValue] : [...value];
+        if (selectionMode === "multiple") {
+            if (checked) {
+                nextValue.push(itemValue);
+            }
+            else {
+                nextValue = nextValue.filter((v) => v !== itemValue);
+            }
+        }
+        if (onChange)
+            onChange({ value: nextValue, event });
+    };
+    const { ref: hotkeysRef } = useHotkeys({
+        "ArrowLeft, ArrowUp": () => {
+            focusPreviousElement(hotkeysRef.current);
+        },
+        "ArrowRight, ArrowDown": () => {
+            focusNextElement(hotkeysRef.current);
+        },
+        Home: () => {
+            focusFirstElement(hotkeysRef.current);
+        },
+        End: () => {
+            focusLastElement(hotkeysRef.current);
+        },
+    }, [], {
+        preventDefault: true,
+    });
+    return (_jsx(Context.Provider, { value: { onChange: handleChange, value }, children: _jsx(Button.Group, { attributes: { ref: hotkeysRef }, children: children }) }));
+};
+ToggleButtonGroupControlled.displayName = "ToggleButtonGroupControlled";
+export default ToggleButtonGroupControlled;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./ToggleButtonGroup.types";
+declare const ToggleButtonGroupUncontrolled: React.FC<T.UncontrolledProps>;
+export default ToggleButtonGroupUncontrolled;

package/dist/components/ToggleButtonGroup/ToggleButtonGroupUncontrolled.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import ToggleButtonGroupControlled from "./ToggleButtonGroupControlled.js";
+const ToggleButtonGroupUncontrolled = (props) => {
+    const { defaultValue, onChange } = props;
+    const [value, setValue] = React.useState(defaultValue || []);
+    const handleChange = (args) => {
+        if (!args.value)
+            return;
+        setValue(args.value);
+        if (onChange)
+            onChange(args);
+    };
+    return (_jsx(ToggleButtonGroupControlled, { ...props, value: value, defaultValue: undefined, onChange: handleChange }));
+};
+ToggleButtonGroupUncontrolled.displayName = "ToggleButtonGroupUncontrolled";
+export default ToggleButtonGroupUncontrolled;

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

@@ -0,0 +1,3 @@
+export { default } from "./ToggleButtonGroup";
+export type { Props as ToggleButtonGroupProps } from "./ToggleButtonGroup.types";
+export { useToggleButtonGroup } from "./ToggleButtonGroup.context";

package/dist/components/ToggleButtonGroup/index.js

@@ -0,0 +1,2 @@
+export { default } from "./ToggleButtonGroup.js";
+export { useToggleButtonGroup } from "./ToggleButtonGroup.context.js";

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

@@ -0,0 +1,21 @@
+import { StoryObj } from "@storybook/react-vite";
+import { Mock } from "storybook/test";
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./..").ToggleButtonGroupProps>;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
+};
+export default _default;
+export declare const single: StoryObj<{
+    handleUncontrolledChange: Mock;
+    handleControlledChange: Mock;
+    handleItemChange: Mock;
+}>;
+export declare const multiple: StoryObj<{
+    handleUncontrolledChange: Mock;
+    handleControlledChange: Mock;
+}>;

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

@@ -0,0 +1,115 @@
+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 }),
+        });
+    },
+};

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

@@ -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",