reshaped 3.8.0-canary.1 → 3.8.0-canary.11

package/dist/components/Accordion/AccordionControlled.js

@@ -14,6 +14,7 @@ const AccordionControlled = (props) => {
         triggerId: `${id}-trigger`,
         contentId: `${id}-content`,
         active,
+        // eslint-disable-next-line react-hooks/refs
         onToggle: onToggleRef.current,
         iconPosition,
         iconSize,

package/dist/components/Actionable/Actionable.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { classNames } from "../../utilities/props.js";
 import * as keys from "../../constants/keys.js";
 import s from "./Actionable.module.css";
 const Actionable = forwardRef((props, ref) => {
-    const { children, href, onClick, type, disabled, insetFocus, disableFocusRing, borderRadius, as, stopPropagation, fullWidth, touchHitbox, className, attributes, } = props;
+    const { children, render, href, onClick, type, disabled, insetFocus, disableFocusRing, borderRadius, as, stopPropagation, fullWidth, touchHitbox, className, attributes, } = props;
     const rootClassNames = classNames(s.root, className, disabled && s["--disabled"], borderRadius && s[`--radius-${borderRadius}`], insetFocus && s["--inset"], disableFocusRing && s["--disabled-focus-ring"], fullWidth && s["--full-width"]);
     const rootAttributes = { ...attributes };
     const hasClickHandler = onClick || attributes?.onClick;
@@ -57,7 +57,21 @@ const Actionable = forwardRef((props, ref) => {
         event.preventDefault();
         handlePress(event);
     };
-    return (_jsxs(TagName, { ref: ref, ...rootAttributes, "aria-disabled": disabled ? true : undefined, className: rootClassNames, onClick: handlePress, onKeyDown: handleKeyDown, children: [touchHitbox && (isLink || isButton) && !disabled && _jsx("span", { className: s.touch }), children] }));
+    const childrenNode = (_jsxs(_Fragment, { children: [touchHitbox && (isLink || isButton) && !disabled && _jsx("span", { className: s.touch }), children] }));
+    const tagAttributes = {
+        ref: ref,
+        // rootAttributes can receive ref from Flyout
+        ...rootAttributes,
+        className: rootClassNames,
+        onClick: handlePress,
+        onKeyDown: handleKeyDown,
+        "aria-disabled": disabled ? true : undefined,
+        children: childrenNode,
+    };
+    // eslint-disable-next-line react-hooks/refs
+    if (render)
+        return render(tagAttributes);
+    return _jsx(TagName, { ...tagAttributes });
 });
 Actionable.displayName = "Actionable";
 export default Actionable;

package/dist/components/Actionable/Actionable.module.css

@@ -1 +1 @@
-@layer rs.reset{.root{background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;isolation:isolate;line-height:inherit;margin:0;padding:0;position:relative;text-align:initial;text-decoration:none;vertical-align:top;-webkit-tap-highlight-color:transparent}}.touch{height:100%;inset:50%;min-height:24px;min-width:24px;position:absolute;transform:translate(-50%,-50%);width:100%}.root:focus{outline:none}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow);outline:none;z-index:var(--rs-z-index-relative)}[data-rs-keyboard] .root.--inset:focus{box-shadow:var(--rs-focus-inset-shadow)}[data-rs-keyboard] .root.--disabled-focus-ring:focus,[data-rs-keyboard] .root.--radius-inherit:focus{box-shadow:none}[data-rs-keyboard] .root.--radius-inherit:focus>*{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--radius-inherit.--inset:focus>*{box-shadow:var(--rs-focus-inset-shadow)}[role=button].root,button.root{cursor:pointer;user-select:none}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.root.--full-width{width:100%}
+@layer rs.reset{.root{background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;isolation:isolate;line-height:inherit;margin:0;padding:0;position:relative;text-align:initial;text-decoration:none;vertical-align:top;-webkit-tap-highlight-color:transparent}}.touch{height:100%;inset:50%;min-height:24px;min-width:24px;position:absolute;transform:translate(-50%,-50%);width:100%}.root:focus{outline:none}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-shadow-focus);outline:none;z-index:var(--rs-z-index-relative)}[data-rs-keyboard] .root.--inset:focus{box-shadow:var(--rs-shadow-focus-inset)}[data-rs-keyboard] .root.--disabled-focus-ring:focus,[data-rs-keyboard] .root.--radius-inherit:focus{box-shadow:none}[data-rs-keyboard] .root.--radius-inherit:focus>*{box-shadow:var(--rs-shadow-focus)}[data-rs-keyboard] .root.--radius-inherit.--inset:focus>*{box-shadow:var(--rs-shadow-focus-inset)}[role=button].root,button.root{cursor:pointer;user-select:none}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.root.--full-width{width:100%}

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

@@ -1,8 +1,21 @@
 import type React from "react";
 import type * as G from "../../types/global";
+export type AttributesRef = React.RefObject<HTMLButtonElement | null>;
+type Attributes = G.Attributes<"button"> & Omit<React.JSX.IntrinsicElements["a"], keyof G.Attributes<"button">> & {
+    ref?: AttributesRef;
+};
 export type Props = {
     /** Node for inserting the content */
     children?: React.ReactNode;
+    /** Render a custom root element, useful for integrating with routers */
+    render?: (attributes: Attributes & {
+        ref: AttributesRef;
+        className: string;
+        onClick: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+        onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
+        "aria-disabled"?: boolean;
+        children: React.ReactNode;
+    }) => React.ReactNode;
     /** Callback when clicked, renders it as a button tag if href is not provided */
     onClick?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
     /** URL, renders it as an anchor tag */
@@ -28,8 +41,7 @@ export type Props = {
     /** Additional classname for the root element */
     className?: G.ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"button"> & Omit<React.JSX.IntrinsicElements["a"], keyof G.Attributes<"button">> & {
-        ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;
-    };
+    attributes?: Attributes;
 };
 export type Ref = React.Ref<HTMLButtonElement | HTMLAnchorElement>;
+export {};

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

@@ -1,4 +1,5 @@
 import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<import("./..").ActionableProps & import("react").RefAttributes<import("./..").ActionableRef>>;
@@ -9,7 +10,10 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const base: StoryObj;
+export declare const base: StoryObj<{
+    handleClick: ReturnType<typeof fn>;
+    handleSecondClick: ReturnType<typeof fn>;
+}>;
 export declare const disabled: StoryObj;
 export declare const fullWidth: StoryObj;
 export declare const insetFocus: {
@@ -27,3 +31,11 @@ export declare const borderRadius: {
     render: () => import("react").JSX.Element;
     play: () => Promise<void>;
 };
+export declare const type: StoryObj<{
+    handleSubmit: ReturnType<typeof fn>;
+}>;
+export declare const as: StoryObj;
+export declare const stopPropagation: StoryObj<{
+    handleParentClick: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;

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

@@ -1,4 +1,4 @@
-import { userEvent, expect } from "storybook/test";
+import { userEvent, expect, fn } from "storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import Actionable from "../index.js";
 import View from "../../View/index.js";
@@ -12,17 +12,64 @@ export default {
     },
 };
 export const base = {
-    name: "base",
-    render: () => (<Example>
-			<Example.Item title="link">
+    name: "href, onClick",
+    args: {
+        handleClick: fn(),
+        handleSecondClick: fn(),
+    },
+    render: (args) => (<Example>
+			<Example.Item title="span">
+				<Actionable>Span</Actionable>
+			</Example.Item>
+			<Example.Item title="onClick">
+				<Actionable onClick={args.handleClick}>Button</Actionable>
+			</Example.Item>
+			<Example.Item title="href">
 				<Actionable href="https://reshaped.so" attributes={{ target: "_blank" }}>
 					Link
 				</Actionable>
 			</Example.Item>
-			<Example.Item title="button">
-				<Actionable onClick={() => { }}>Button</Actionable>
+
+			<Example.Item title="attributes.href">
+				<Actionable attributes={{ href: "https://reshaped.so" }}>Link with attributes</Actionable>
+			</Example.Item>
+
+			<Example.Item title="href, onClick">
+				<Actionable onClick={(e) => {
+            e.preventDefault();
+            args.handleSecondClick(e);
+        }} href="https://reshaped.so">
+					Link with onClick
+				</Actionable>
 			</Example.Item>
 		</Example>),
+    play: async ({ canvas, args }) => {
+        const span = canvas.getByText("Span");
+        const link = canvas.getByText("Link");
+        const button = canvas.getByText("Button");
+        const linkWithAttributes = canvas.getByText("Link with attributes");
+        const linkWithOnClick = canvas.getByText("Link with onClick");
+        expect(span).toBeInTheDocument();
+        expect(span.tagName).toBe("SPAN");
+        expect(link).toBeInTheDocument();
+        expect(link).toHaveRole("link");
+        expect(link).toHaveAttribute("href", "https://reshaped.so");
+        await userEvent.click(button);
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveRole("button");
+        expect(button).toHaveAttribute("type", "button");
+        expect(args.handleClick).toHaveBeenCalledTimes(1);
+        expect(args.handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: button }));
+        expect(linkWithAttributes).toBeInTheDocument();
+        expect(linkWithAttributes).toHaveRole("link");
+        expect(linkWithAttributes).toHaveAttribute("href", "https://reshaped.so");
+        await userEvent.click(linkWithOnClick);
+        expect(linkWithOnClick).toBeInTheDocument();
+        expect(linkWithOnClick).toHaveRole("link");
+        expect(linkWithOnClick).toHaveAttribute("href", "https://reshaped.so");
+        expect(args.handleSecondClick).toHaveBeenCalledTimes(1);
+        expect(args.handleSecondClick).toHaveBeenCalledWith(expect.objectContaining({ target: linkWithOnClick }));
+    },
 };
 export const disabled = {
     name: "disabled",
@@ -88,7 +135,7 @@ export const disableFocusRing = {
 export const borderRadius = {
     name: "borderRadius",
     render: () => (<Example>
-			<Example.Item title="radius: inherit">
+			<Example.Item title="borderRadius: inherit">
 				<Actionable borderRadius="inherit" onClick={() => { }}>
 					<View borderRadius="large">Actionable</View>
 				</Actionable>
@@ -98,3 +145,76 @@ export const borderRadius = {
         await userEvent.keyboard("{Tab/}");
     },
 };
+export const type = {
+    name: "type",
+    args: {
+        handleSubmit: fn(),
+    },
+    render: (args) => (<Example>
+			<Example.Item title="type: submit">
+				<form onSubmit={(e) => {
+            e.preventDefault();
+            args.handleSubmit();
+        }}>
+					<Actionable onClick={() => { }} type="submit">
+						Submit
+					</Actionable>
+				</form>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas, args }) => {
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        expect(args.handleSubmit).toHaveBeenCalledTimes(1);
+    },
+};
+export const as = {
+    name: "as, render",
+    render: () => (<Example>
+			<Example.Item title="as: span">
+				<Actionable onClick={() => { }} as="span">
+					Trigger
+				</Actionable>
+			</Example.Item>
+			<Example.Item title="render, disabled">
+				<Actionable disabled onClick={() => { }} render={(props) => <section {...props}/>}>
+					Trigger
+				</Actionable>
+			</Example.Item>
+		</Example>),
+    play: ({ canvas }) => {
+        const [asEl, renderEl] = canvas.getAllByText("Trigger");
+        expect(asEl.tagName).toBe("SPAN");
+        expect(renderEl.tagName).toBe("SECTION");
+        expect(renderEl).toHaveAttribute("aria-disabled", "true");
+    },
+};
+export const stopPropagation = {
+    name: "stopPropagation",
+    args: {
+        handleParentClick: fn(),
+    },
+    render: (args) => (<div onClick={args.handleParentClick}>
+			<Actionable stopPropagation onClick={() => { }}>
+				Trigger
+			</Actionable>
+		</div>),
+    play: async ({ canvas, args }) => {
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        expect(args.handleParentClick).not.toHaveBeenCalled();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Actionable className="test-classname" attributes={{ id: "test-id" }}>
+				Trigger
+			</Actionable>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

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

@@ -1,7 +1,7 @@
-import React from "react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
-    component: React.FC<import("./..").AlertProps>;
+    component: import("react").FC<import("./..").AlertProps>;
     parameters: {
         iframe: {
             url: string;
@@ -11,13 +11,14 @@ declare const _default: {
 export default _default;
 export declare const color: {
     name: string;
-    render: () => React.JSX.Element;
+    render: () => import("react").JSX.Element;
 };
 export declare const inline: {
     name: string;
-    render: () => React.JSX.Element;
+    render: () => import("react").JSX.Element;
 };
 export declare const bleed: {
     name: string;
-    render: () => React.JSX.Element;
+    render: () => import("react").JSX.Element;
 };
+export declare const className: StoryObj;

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

@@ -1,8 +1,8 @@
-import React from "react";
-import { Example } from "../../../utilities/storybook/index.js";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import Alert from "../index.js";
 import Link from "../../Link/index.js";
 import IconZap from "../../../icons/Zap.js";
+import { expect } from "storybook/test";
 export default {
     title: "Components/Alert",
     component: Alert,
@@ -63,3 +63,16 @@ export const bleed = {
 			</Example.Item>
 		</Example>),
 };
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Alert className="test-classname" attributes={{ id: "test-id" }}>
+				<Placeholder />
+			</Alert>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/Autocomplete/Autocomplete.js

@@ -11,7 +11,7 @@ import useElementId from "../../hooks/useElementId.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 const AutocompleteContext = React.createContext({});
 const Autocomplete = (props) => {
-    const { children, onChange, onInput, onItemSelect, name, containerRef, instanceRef, onBackspace, onEnter, active, onOpen, onClose, ...textFieldProps } = props;
+    const { children, onChange, onInput, onItemSelect, name, containerRef, instanceRef, onBackspace, onEnter, active, onOpen, onClose, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, ...textFieldProps } = props;
     const [highlightedId, setHighlightedId] = React.useState();
     const onBackspaceRef = useHandlerRef(onBackspace);
     const contentRef = React.useRef(null);
@@ -120,7 +120,7 @@ const Autocomplete = (props) => {
         highlightedId,
         setHighlightedId,
     }), [highlightedId, handleItemClick]);
-    return (_jsx(AutocompleteContext.Provider, { value: contextValue, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: false, active: isDropdownActive, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: isDropdownActive, attributes: {
+    return (_jsx(AutocompleteContext.Provider, { value: contextValue, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: false, active: isDropdownActive, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, fallbackAdjustLayout: fallbackAdjustLayout, fallbackMinWidth: fallbackMinWidth, fallbackMinHeight: fallbackMinHeight, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: isDropdownActive, attributes: {
                             ...textFieldProps.attributes,
                             // Ignoring the type check since TS can't infer the correct html element type
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -7,7 +7,7 @@ type SelectArgs = {
     /** Additional data that will be passed to the onItemSelect callback */
     data?: unknown;
 };
-export type Props = TextFieldProps & Pick<DropdownMenuProps, "containerRef" | "instanceRef" | "active" | "onOpen" | "onClose"> & {
+export type Props = TextFieldProps & Pick<DropdownMenuProps, "containerRef" | "instanceRef" | "active" | "onOpen" | "onClose" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight"> & {
     /** Callback for when value changes from user input */
     onInput?: TextFieldProps["onChange"];
     /** Callback for when an item is selected in the dropdown */

package/dist/components/Badge/Badge.module.css

@@ -1 +1 @@
-.root{align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border:1px solid transparent;border-radius:var(--rs-radius-small);box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-height:calc(var(--rs-badge-line-height) + 2px + (var(--rs-badge-p-v) * 2));min-width:calc(var(--rs-badge-line-height) + 2px + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity;vertical-align:top}.root:empty{height:var(--rs-badge-empty-size);min-height:auto;min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.icon:only-child{margin-inline:calc(var(--rs-unit-x1) * -1)}.dismiss{border-radius:var(--rs-radius-small);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{background:none;border-color:var(--rs-color-border-neutral)}.root.--color-positive{background:var(--rs-color-background-positive);border-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);border-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{background:none;border-color:var(--rs-color-border-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);border-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);border-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{background:none;border-color:var(--rs-color-border-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);border-color:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);border-color:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{background:none;border-color:var(--rs-color-border-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);border-color:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{background:none;border-color:var(--rs-color-border-primary-faded);color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:1px;--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:calc(var(--rs-unit-x1) - 1px);--rs-badge-p-h:calc(var(--rs-unit-x2) - 1px);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:calc(var(--rs-unit-x1) - 1px);--rs-badge-p-h:calc(var(--rs-unit-x2) - 1px);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;pointer-events:none;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}
+.root{--rs-badge-border-color:transparent;align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);box-shadow:0 0 0 1px var(--rs-badge-border-color) inset;box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-height:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));min-width:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity;vertical-align:top}.root:empty{height:var(--rs-badge-empty-size);min-height:auto;min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.icon:only-child{margin-inline:calc(var(--rs-unit-x1) * -1)}.dismiss{border-radius:var(--rs-radius-small);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{--rs-badge-border-color:var(--rs-color-border-neutral);background:none}.root.--color-positive{background:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{--rs-badge-border-color:var(--rs-color-border-positive-faded);background:none;color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{--rs-badge-border-color:var(--rs-color-border-critical-faded);background:none;color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{--rs-badge-border-color:var(--rs-color-border-warning-faded);background:none;color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{--rs-badge-border-color:var(--rs-color-border-primary-faded);background:none;color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:calc(var(--rs-unit-x1) / 2);--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;pointer-events:none;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}

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

@@ -42,3 +42,8 @@ export declare const container: {
     name: string;
     render: () => React.JSX.Element;
 };
+export declare const href: StoryObj;
+export declare const onClick: StoryObj<{
+    handleClick: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;

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

@@ -282,3 +282,37 @@ export const container = {
 			</Example>);
     },
 };
+export const href = {
+    name: "href",
+    render: () => (<Badge href="https://reshaped.so" dismissAriaLabel="Dismiss">
+			Badge
+		</Badge>),
+    play: async ({ canvas }) => {
+        const link = canvas.getByRole("link");
+        expect(link).toHaveAttribute("href", "https://reshaped.so");
+    },
+};
+export const onClick = {
+    name: "onClick",
+    args: {
+        handleClick: fn(),
+    },
+    render: (args) => <Badge onClick={args.handleClick}>Badge</Badge>,
+    play: async ({ canvas, args }) => {
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        expect(args.handleClick).toHaveBeenCalledTimes(1);
+        expect(args.handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: button }));
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Badge color="primary" className="test-classname" attributes={{ id: "test-id" }}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -27,6 +27,7 @@ const Breadcrumbs = (props) => {
                 const isAfterCollapse = renderIndex > lastCollapsedIndex;
                 const isDisplayed = !visibleItems || isBeforeCollapse || isAfterCollapse || expanded;
                 const isCollapseButton = renderIndex === lastCollapsedIndex;
+                // eslint-disable-next-line react-hooks/immutability
                 renderIndex += 1;
                 let itemNode = null;
                 if (isDisplayed) {

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

@@ -1,3 +1,5 @@
+import { fn } from "storybook/test";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").BreadcrumbsProps> & {
@@ -26,11 +28,13 @@ export declare const slots: {
     name: string;
     render: () => import("react").JSX.Element;
 };
-export declare const collapsed: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
+export declare const collapsed: StoryObj;
 export declare const multiline: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const onClick: StoryObj<{
+    handleClick: ReturnType<typeof fn>;
+}>;
+export declare const href: StoryObj;
+export declare const className: StoryObj;

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

@@ -1,3 +1,4 @@
+import { expect, fn, userEvent } from "storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import Breadcrumbs from "../index.js";
 import Badge from "../../Badge/index.js";
@@ -84,7 +85,7 @@ export const slots = {
 		</Example>),
 };
 export const collapsed = {
-    name: "collapse",
+    name: "collapsed",
     render: () => (<Example>
 			<Example.Item title="collapsed, 3 items shown by default">
 				<Breadcrumbs defaultVisibleItems={3} ariaLabel="breadcrumbs one" expandAriaLabel="Expand items">
@@ -116,6 +117,18 @@ export const collapsed = {
 				</Breadcrumbs>
 			</Example.Item>
 		</Example>),
+    play: async ({ canvas }) => {
+        let triggers = canvas.getAllByRole("button");
+        expect(triggers[0]).toHaveTextContent("Item 1");
+        expect(triggers[1]).toHaveAccessibleName("Expand items");
+        expect(triggers[2]).toHaveTextContent("Item 4");
+        await userEvent.click(triggers[1]);
+        triggers = canvas.getAllByRole("button");
+        expect(triggers[0]).toHaveTextContent("Item 1");
+        expect(triggers[1]).toHaveTextContent("Item 2");
+        expect(triggers[2]).toHaveTextContent("Item 3");
+        expect(triggers[3]).toHaveTextContent("Item 4");
+    },
 };
 export const multiline = {
     name: "composition, multiline",
@@ -129,3 +142,46 @@ export const multiline = {
 			</Example.Item>
 		</Example>),
 };
+export const onClick = {
+    name: "item, onClick, disabled",
+    args: {
+        handleClick: fn(),
+    },
+    render: (args) => (<Breadcrumbs>
+			<Breadcrumbs.Item onClick={args.handleClick}>Trigger</Breadcrumbs.Item>
+			<Breadcrumbs.Item onClick={args.handleClick} disabled>
+				Trigger
+			</Breadcrumbs.Item>
+		</Breadcrumbs>),
+    play: async ({ args, canvas }) => {
+        const triggers = canvas.getAllByRole("button");
+        await userEvent.click(triggers[0]);
+        expect(args.handleClick).toHaveBeenCalledTimes(1);
+        expect(args.handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: triggers[0] }));
+        await userEvent.click(triggers[1]);
+        expect(args.handleClick).toHaveBeenCalledTimes(1);
+    },
+};
+export const href = {
+    name: "item, href",
+    render: () => (<Breadcrumbs>
+			<Breadcrumbs.Item href="https://reshaped.so">Trigger</Breadcrumbs.Item>
+		</Breadcrumbs>),
+    play: async ({ canvas }) => {
+        const triggers = canvas.getAllByRole("link");
+        expect(triggers[0]).toHaveAttribute("href", "https://reshaped.so");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Breadcrumbs className="test-classname" attributes={{ id: "test-id" }}>
+				<Breadcrumbs.Item>Trigger</Breadcrumbs.Item>
+			</Breadcrumbs>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/Button/Button.js

@@ -8,7 +8,7 @@ import ButtonGroup from "./ButtonGroup.js";
 import ButtonAligner from "./ButtonAligner.js";
 import s from "./Button.module.css";
 const Button = forwardRef((props, ref) => {
-    const { variant = "solid", color = "neutral", elevated, highlighted, fullWidth, loading, loadingAriaLabel, disabled, type, href, size = "medium", children, rounded, onClick, icon, endIcon, stopPropagation, as, className, attributes, } = props;
+    const { variant = "solid", color = "neutral", elevated, highlighted, fullWidth, loading, loadingAriaLabel, disabled, type, href, size = "medium", children, rounded, onClick, icon, endIcon, stopPropagation, as, render, className, attributes, } = props;
     const iconOnly = (icon || endIcon) && !children;
     const rootClassName = classNames(s.root, className, color && s[`--color-${color}`], variant && s[`--variant-${variant}`], responsiveClassNames(s, "--size", size), responsiveClassNames(s, "--full-width", fullWidth), elevated && variant !== "ghost" && s["--elevated"], rounded && s["--rounded"], disabled && s["--disabled"], loading && s["--loading"], highlighted && s["--highlighted"], iconOnly && s["--icon-only"]);
     const renderIcon = (position) => {
@@ -30,7 +30,7 @@ const Button = forwardRef((props, ref) => {
     return (_jsxs(Actionable, { disabled: disabled || loading, className: rootClassName, attributes: {
             ...attributes,
             "data-rs-aligner-target": true,
-        }, type: type, onClick: onClick, href: href, ref: ref, as: as, stopPropagation: stopPropagation, children: [loading && (_jsx("div", { className: s.loader, children: _jsx(Loader, { color: "inherit", attributes: { "aria-label": loadingAriaLabel } }) })), renderIcon("start"), children && _jsx("span", { className: s.text, children: children }), renderIcon("end")] }));
+        }, type: type, onClick: onClick, href: href, ref: ref, as: as, stopPropagation: stopPropagation, render: render, children: [loading && (_jsx("div", { className: s.loader, children: _jsx(Loader, { color: "inherit", attributes: { "aria-label": loadingAriaLabel } }) })), renderIcon("start"), children && _jsx("span", { className: s.text, children: children }), renderIcon("end")] }));
 });
 Button.Group = ButtonGroup;
 Button.Aligner = ButtonAligner;

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

@@ -4,7 +4,7 @@ import type { ActionableProps, ActionableRef } from "../Actionable";
 import type { AlignerProps as BaseAlignerProps } from "../_private/Aligner";
 import type * as G from "../../types/global";
 export type Size = "xlarge" | "large" | "medium" | "small";
-export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "type" | "as" | "stopPropagation"> & {
+export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "type" | "as" | "stopPropagation" | "render"> & {
     /** Component color scheme
      * @default "neutral"
      */