reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,144 +1,138 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.className = exports.renderImage = exports.fallback = exports.colors = exports.squared = exports.size = exports.initials = exports.src = void 0;
-const react_1 = require("react");
-const test_1 = require("storybook/test");
-const Avatar_1 = __importDefault(require("../../../components/Avatar"));
-const View_1 = __importDefault(require("../../../components/View"));
-const storybook_1 = require("../../../utilities/storybook");
-const Zap_1 = __importDefault(require("../../../icons/Zap"));
-exports.default = {
+import { useState } from "react";
+import { expect, fn, waitFor } from "storybook/test";
+import Avatar from "../../../components/Avatar/index.js";
+import View from "../../../components/View/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+import IconZap from "../../../icons/Zap.js";
+export default {
     title: "Components/Avatar",
-    component: Avatar_1.default,
+    component: Avatar,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/avatar",
         },
     },
 };
-exports.src = {
+export const src = {
     name: "src, alt",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="src, alt">
-				<Avatar_1.default src="https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80" alt="Amsterdam canal" size={12}/>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="src, alt">
+				<Avatar src="https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80" alt="Amsterdam canal" size={12}/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="src">
-				<Avatar_1.default src="https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80"/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="src">
+				<Avatar src="https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80"/>
+			</Example.Item>
+		</Example>),
     play: ({ canvas }) => {
         const presentation = canvas.getByRole("presentation");
         const img = canvas.getByRole("img");
-        (0, test_1.expect)(presentation).toBeInTheDocument();
-        (0, test_1.expect)(img).toBeInTheDocument();
-        (0, test_1.expect)(img).toHaveAccessibleName("Amsterdam canal");
+        expect(presentation).toBeInTheDocument();
+        expect(img).toBeInTheDocument();
+        expect(img).toHaveAccessibleName("Amsterdam canal");
     },
 };
-exports.initials = {
+export const initials = {
     name: "initials, icon",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="initials">
-				<Avatar_1.default initials="RS"/>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="initials">
+				<Avatar initials="RS"/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="icon">
-				<Avatar_1.default icon={Zap_1.default}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="icon">
+				<Avatar icon={IconZap}/>
+			</Example.Item>
+		</Example>),
 };
-exports.size = {
+export const size = {
     name: "size",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="size: 6">
-				<View_1.default direction="row" gap={3}>
-					<Avatar_1.default size={6} icon={Zap_1.default}/>
-					<Avatar_1.default size={6} initials="RS" squared/>
-				</View_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="size: 6">
+				<View direction="row" gap={3}>
+					<Avatar size={6} icon={IconZap}/>
+					<Avatar size={6} initials="RS" squared/>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="size: 15">
-				<View_1.default direction="row" gap={3}>
-					<Avatar_1.default size={15} icon={Zap_1.default}/>
-					<Avatar_1.default size={15} initials="RS" squared/>
-				</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="size: 15">
+				<View direction="row" gap={3}>
+					<Avatar size={15} icon={IconZap}/>
+					<Avatar size={15} initials="RS" squared/>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="size: 40">
-				<View_1.default direction="row" gap={3}>
-					<Avatar_1.default size={40} icon={Zap_1.default}/>
-					<Avatar_1.default size={40} initials="RS" squared/>
-				</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="size: 40">
+				<View direction="row" gap={3}>
+					<Avatar size={40} icon={IconZap}/>
+					<Avatar size={40} initials="RS" squared/>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title={["responsive size", "[s] 10", "[m+] 20"]}>
-				<View_1.default direction="row" gap={3}>
-					<Avatar_1.default size={{ s: 10, m: 20 }} icon={Zap_1.default}/>
-					<Avatar_1.default size={{ s: 10, m: 20 }} icon={Zap_1.default} squared/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title={["responsive size", "[s] 10", "[m+] 20"]}>
+				<View direction="row" gap={3}>
+					<Avatar size={{ s: 10, m: 20 }} icon={IconZap}/>
+					<Avatar size={{ s: 10, m: 20 }} icon={IconZap} squared/>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.squared = {
+export const squared = {
     name: "squared",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="squared, with image">
-				<Avatar_1.default squared src="https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="squared, with initials">
-				<Avatar_1.default squared initials="RS"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="squared, with initials">
-				<Avatar_1.default squared icon={Zap_1.default}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="squared, with image">
+				<Avatar squared src="https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80"/>
+			</Example.Item>
+			<Example.Item title="squared, with initials">
+				<Avatar squared initials="RS"/>
+			</Example.Item>
+			<Example.Item title="squared, with initials">
+				<Avatar squared icon={IconZap}/>
+			</Example.Item>
+		</Example>),
 };
-exports.colors = {
+export const colors = {
     name: "color, variant",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="color: neutral">
-				<View_1.default gap={4} direction="row">
-					<Avatar_1.default color="neutral" icon={Zap_1.default}/>
-					<Avatar_1.default color="neutral" variant="faded" icon={Zap_1.default}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: primary">
-				<View_1.default gap={4} direction="row">
-					<Avatar_1.default color="primary" icon={Zap_1.default}/>
-					<Avatar_1.default color="primary" variant="faded" icon={Zap_1.default}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: positive">
-				<View_1.default gap={4} direction="row">
-					<Avatar_1.default color="positive" icon={Zap_1.default}/>
-					<Avatar_1.default color="positive" variant="faded" icon={Zap_1.default}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: warning">
-				<View_1.default gap={4} direction="row">
-					<Avatar_1.default color="warning" icon={Zap_1.default}/>
-					<Avatar_1.default color="warning" variant="faded" icon={Zap_1.default}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: critical">
-				<View_1.default gap={4} direction="row">
-					<Avatar_1.default color="critical" icon={Zap_1.default}/>
-					<Avatar_1.default color="critical" variant="faded" icon={Zap_1.default}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="color: neutral">
+				<View gap={4} direction="row">
+					<Avatar color="neutral" icon={IconZap}/>
+					<Avatar color="neutral" variant="faded" icon={IconZap}/>
+				</View>
+			</Example.Item>
+			<Example.Item title="color: primary">
+				<View gap={4} direction="row">
+					<Avatar color="primary" icon={IconZap}/>
+					<Avatar color="primary" variant="faded" icon={IconZap}/>
+				</View>
+			</Example.Item>
+			<Example.Item title="color: positive">
+				<View gap={4} direction="row">
+					<Avatar color="positive" icon={IconZap}/>
+					<Avatar color="positive" variant="faded" icon={IconZap}/>
+				</View>
+			</Example.Item>
+			<Example.Item title="color: warning">
+				<View gap={4} direction="row">
+					<Avatar color="warning" icon={IconZap}/>
+					<Avatar color="warning" variant="faded" icon={IconZap}/>
+				</View>
+			</Example.Item>
+			<Example.Item title="color: critical">
+				<View gap={4} direction="row">
+					<Avatar color="critical" icon={IconZap}/>
+					<Avatar color="critical" variant="faded" icon={IconZap}/>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.fallback = {
+export const fallback = {
     name: "test: fallback",
     args: {
-        handleError: (0, test_1.fn)(),
+        handleError: fn(),
     },
     render: (args) => {
-        const [error, setError] = (0, react_1.useState)(false);
-        return (<Avatar_1.default src={error ? undefined : "/foo"} icon={Zap_1.default} imageAttributes={{
+        const [error, setError] = useState(false);
+        return (<Avatar src={error ? undefined : "/foo"} icon={IconZap} imageAttributes={{
                 onError: () => {
                     setError(true);
                     args.handleError();
@@ -146,39 +140,39 @@ exports.fallback = {
             }}/>);
     },
     play: async ({ args }) => {
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleError).toHaveBeenCalledTimes(1);
+        await waitFor(() => {
+            expect(args.handleError).toHaveBeenCalledTimes(1);
         });
     },
 };
-exports.renderImage = {
+export const renderImage = {
     name: "renderImage",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="renderImage">
-				<Avatar_1.default src="https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80" alt="Amsterdam canal" 
+    render: () => (<Example>
+			<Example.Item title="renderImage">
+				<Avatar src="https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80" alt="Amsterdam canal" 
     // oxlint-disable-next-line jsx_a11y/alt-text
     renderImage={(attributes) => <img {...attributes} id="test-image"/>}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			</Example.Item>
+		</Example>),
     play: ({ canvas }) => {
         const img = canvas.getByRole("img");
-        (0, test_1.expect)(img).toBeInTheDocument();
-        (0, test_1.expect)(img).toHaveAccessibleName("Amsterdam canal");
-        (0, test_1.expect)(img).toHaveAttribute("id", "test-image");
+        expect(img).toBeInTheDocument();
+        expect(img).toHaveAccessibleName("Amsterdam canal");
+        expect(img).toHaveAttribute("id", "test-image");
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes, imageAttributes",
     render: () => (<div data-testid="root">
-			<Avatar_1.default src="https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80" className="test-classname" attributes={{ id: "test-id" }} imageAttributes={{ id: "test-image-id", alt: "test image" }}/>
+			<Avatar src="https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80" className="test-classname" attributes={{ id: "test-id" }} imageAttributes={{ id: "test-image-id", alt: "test image" }}/>
 		</div>),
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root").firstChild;
         const img = canvas.getByRole("img");
-        (0, test_1.expect)(root).toHaveClass("test-classname");
-        (0, test_1.expect)(root).toHaveAttribute("id", "test-id");
-        (0, test_1.expect)(img).toHaveAttribute("id", "test-image-id");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(img).toHaveAttribute("id", "test-image-id");
         // Uses alt attribute in case prop is not passed
-        (0, test_1.expect)(img).toHaveAccessibleName("test image");
+        expect(img).toHaveAccessibleName("test image");
     },
 };

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

@@ -0,0 +1,7 @@
+import React from "react";
+/**
+ * Element of the parent Badge.Container.
+ * Badge reports its size to it for the cutout since css can't read the size of a sibling element.
+ */
+declare const BadgeContainerContext: React.Context<React.RefObject<HTMLDivElement | null> | null>;
+export default BadgeContainerContext;

package/dist/components/Badge/Badge.context.js

@@ -0,0 +1,8 @@
+"use client";
+import React from "react";
+/**
+ * Element of the parent Badge.Container.
+ * Badge reports its size to it for the cutout since css can't read the size of a sibling element.
+ */
+const BadgeContainerContext = React.createContext(null);
+export default BadgeContainerContext;

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

@@ -1,4 +1,5 @@
-import { type ActionableRef } from "../../components/Actionable";
-import type * as T from "./Badge.types";
-declare const Badge: import("react").ForwardRefExoticComponent<T.Props & import("react").RefAttributes<ActionableRef>>;
+import React from "react";
+import { type ActionableRef } from "../../components/Actionable/index.js";
+import type * as T from "./Badge.types.js";
+declare const Badge: React.ForwardRefExoticComponent<T.Props & React.RefAttributes<ActionableRef>>;
 export default Badge;

package/dist/components/Badge/Badge.js

@@ -1,13 +1,18 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import React, { forwardRef } from "react";
 import { classNames } from "@reshaped/utilities";
-import Actionable from "../../components/Actionable";
-import Icon from "../../components/Icon";
-import Text from "../../components/Text";
-import IconClose from "../../icons/Close";
+import Actionable from "../../components/Actionable/index.js";
+import Icon from "../../components/Icon/index.js";
+import Text from "../../components/Text/index.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import IconClose from "../../icons/Close.js";
+import BadgeContainerContext from "./Badge.context.js";
 import s from "./Badge.module.css";
 const Badge = forwardRef((props, ref) => {
     const { children, color, rounded, size = "medium", icon, endIcon, variant, hidden, highlighted, href, onClick, onDismiss, dismissAriaLabel, className, attributes, as, } = props;
+    const rootRef = React.useRef(null);
+    const containerRef = React.useContext(BadgeContainerContext);
     const isActionable = !!(onClick || href);
     const iconSize = {
         small: 3,
@@ -17,6 +22,21 @@ const Badge = forwardRef((props, ref) => {
     const hasText = children !== undefined && children !== null;
     const empty = !hasText && !icon && !endIcon;
     const rootClassName = classNames(s.root, className, rounded && s["--rounded"], hidden && s["--hidden"], size && s[`--size-${size}`], color && s[`--color-${color}`], variant && s[`--variant-${variant}`], isActionable && s["--actionable"], highlighted && s["--highlighted"], empty && s["--empty"]);
+    React.useImperativeHandle(ref, () => rootRef.current);
+    // Pass the badge size to Badge.Container for the cutout mask, border box size ignores the badge transforms
+    useIsomorphicLayoutEffect(() => {
+        const containerEl = containerRef?.current;
+        const badgeEl = rootRef.current;
+        if (!containerEl || !badgeEl)
+            return;
+        const resizeObserver = new ResizeObserver(([entry]) => {
+            const { inlineSize, blockSize } = entry.borderBoxSize[0];
+            containerEl.style.setProperty("--rs-badge-width", `${inlineSize}px`);
+            containerEl.style.setProperty("--rs-badge-height", `${blockSize}px`);
+        });
+        resizeObserver.observe(badgeEl);
+        return () => resizeObserver.disconnect();
+    }, [containerRef]);
     const handleDismiss = (e) => {
         // Prevent the parent Actionable from handling the click,
         // including following the link when the badge is rendered as one
@@ -24,7 +44,7 @@ const Badge = forwardRef((props, ref) => {
         e.stopPropagation();
         onDismiss?.();
     };
-    return (_jsx(Actionable, { onClick: onClick, href: href, className: rootClassName, attributes: attributes, ref: ref, as: as, touchHitbox: isActionable, children: _jsxs("span", { className: s.content, children: [icon && _jsx(Icon, { svg: icon, autoWidth: true, size: iconSize, className: s.icon }), hasText && (_jsx(Text, { variant: size === "large" ? "body-2" : "caption-1", weight: "medium", className: s.text, attributes: {
+    return (_jsx(Actionable, { onClick: onClick, href: href, className: rootClassName, attributes: attributes, ref: rootRef, as: as, touchHitbox: isActionable, children: _jsxs("span", { className: s.content, children: [icon && _jsx(Icon, { svg: icon, autoWidth: true, size: iconSize, className: s.icon }), hasText && (_jsx(Text, { variant: size === "large" ? "body-2" : "caption-1", weight: "medium", className: s.text, attributes: {
                         "aria-hidden": hidden ? "true" : undefined,
                     }, children: children })), endIcon && _jsx(Icon, { svg: endIcon, autoWidth: true, size: iconSize, className: s.icon }), onDismiss && (_jsx(Actionable, { onClick: handleDismiss, className: s.dismiss, as: "span", attributes: { "aria-label": dismissAriaLabel }, touchHitbox: true, children: _jsx(Icon, { svg: IconClose, size: iconSize }) }))] }) }));
 });

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

@@ -1 +1 @@
-.root{--rs-badge-border-color:transparent;padding:var(--rs-badge-p-v) var(--rs-badge-p-h);min-width:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));min-height:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));display:inline-flex;align-items:center;justify-content:center;vertical-align:top;border-radius:var(--rs-radius-small);background:var(--rs-color-background-neutral);color:var(--rs-color-on-background-neutral);box-sizing:border-box;box-shadow:0 0 0 1px var(--rs-badge-border-color) inset;max-width:100%;backface-visibility:hidden;transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity,box-shadow,background-color}.root.--empty{width:var(--rs-badge-empty-size);height:var(--rs-badge-empty-size);min-width:auto;min-height:auto;padding:0}.content{display:inline-flex;align-items:center;gap:var(--rs-badge-gap);max-width:100%;min-width:0}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}.icon{flex-shrink:0}.icon:first-child{margin-inline-start:calc(var(--rs-unit-x0-5) * -1)}.icon:last-child{margin-inline-end:calc(var(--rs-unit-x0-5) * -1)}.icon:only-child{margin-inline:calc(var(--rs-unit-x1) * -1)}.dismiss{flex-shrink:0;border-radius:var(--rs-radius-small);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.dismiss:last-child{margin-inline-end:calc(var(--rs-unit-x0-5) * -1)}.root.--highlighted{opacity:.8}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{--rs-badge-border-color:var(--rs-color-border-neutral-faded);background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--color-positive{background:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{--rs-badge-border-color:var(--rs-color-border-positive-faded);background:var(--rs-color-background-positive-faded);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{--rs-badge-border-color:var(--rs-color-border-critical-faded);background:var(--rs-color-background-critical-faded);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{--rs-badge-border-color:var(--rs-color-border-warning-faded);background:var(--rs-color-background-warning-faded);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{--rs-badge-border-color:var(--rs-color-border-primary-faded);background:var(--rs-color-background-primary-faded);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-5);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:var(--rs-unit-x1)}.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:calc(var(--rs-unit-x0-5) * 5);--rs-badge-line-height:var(--rs-line-height-body-2);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1-5)}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--hidden{transform:scale(.2);opacity:0}.container{position:relative;display:inline-block;vertical-align:top}.container .root{position:absolute;z-index:10;max-width:none;inset-inline-end:0;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);user-select:none}.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%}
+@property --rs-badge-cutout-scale{syntax:"<number>";initial-value:1;inherits:false}.root{--rs-badge-border-color:transparent;padding:var(--rs-badge-p-v) var(--rs-badge-p-h);min-width:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));min-height:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));display:inline-flex;align-items:center;justify-content:center;vertical-align:top;border-radius:var(--rs-radius-small);background:var(--rs-color-background-neutral);color:var(--rs-color-on-background-neutral);box-sizing:border-box;box-shadow:0 0 0 1px var(--rs-badge-border-color) inset;max-width:100%;backface-visibility:hidden;transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity,box-shadow,background-color}.root.--empty{width:var(--rs-badge-empty-size);height:var(--rs-badge-empty-size);min-width:auto;min-height:auto;padding:0}.content{display:inline-flex;align-items:center;gap:var(--rs-badge-gap);max-width:100%;min-width:0}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}.icon{flex-shrink:0}.icon:first-child{margin-inline-start:calc(var(--rs-unit-x0-5) * -1)}.icon:last-child{margin-inline-end:calc(var(--rs-unit-x0-5) * -1)}.icon:only-child{margin-inline:calc(var(--rs-unit-x1) * -1)}.dismiss{flex-shrink:0;border-radius:var(--rs-radius-small);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.dismiss:last-child{margin-inline-end:calc(var(--rs-unit-x0-5) * -1)}.root.--highlighted{opacity:.8}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{--rs-badge-border-color:var(--rs-color-border-neutral-faded);background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--color-positive{background:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{--rs-badge-border-color:var(--rs-color-border-positive-faded);background:var(--rs-color-background-positive-faded);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{--rs-badge-border-color:var(--rs-color-border-critical-faded);background:var(--rs-color-background-critical-faded);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{--rs-badge-border-color:var(--rs-color-border-warning-faded);background:var(--rs-color-background-warning-faded);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{--rs-badge-border-color:var(--rs-color-border-primary-faded);background:var(--rs-color-background-primary-faded);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-5);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:var(--rs-unit-x1)}.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:calc(var(--rs-unit-x0-5) * 5);--rs-badge-line-height:var(--rs-line-height-body-2);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1-5)}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--hidden{transform:scale(.2);opacity:0}.container{--rs-badge-container-inset:0;position:relative;display:inline-block;vertical-align:top}.container .root{position:absolute;z-index:10;max-width:none;inset-inline-end:calc(var(--rs-badge-container-inset) * 100%);transform:translate(50%,var(--rs-badge-translate-y)) scale(1);user-select:none}.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{--rs-badge-container-inset:0.14}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:calc(var(--rs-badge-container-inset) * 100%)}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:calc(var(--rs-badge-container-inset) * 100%)}.container:has(>.root){--rs-badge-cutout-radius:var(--rs-radius-small);--rs-badge-cutout-side-x:right;--rs-badge-cutout-side-y:top}[dir=rtl] .container:has(>.root){--rs-badge-cutout-side-x:left}.container:has(>.root).--container-position-bottom-end{--rs-badge-cutout-side-y:bottom}.container:has(>.root):has(>.root.--rounded){--rs-badge-cutout-radius:var(--rs-radius-circular)}.container:has(>.root):has(>.root.--hidden)>:not(.root){--rs-badge-cutout-scale:0}.container:has(>.root)>:not(.root){--rs-badge-cutout-overflow:var(--rs-unit-x4);--rs-badge-cutout-w:calc((var(--rs-badge-width) + var(--rs-unit-x0-5) * 2) * var(--rs-badge-cutout-scale));--rs-badge-cutout-h:calc((var(--rs-badge-height) + var(--rs-unit-x0-5) * 2) * var(--rs-badge-cutout-scale));--rs-badge-cutout-r:min((var(--rs-badge-cutout-radius) + var(--rs-unit-x0-5)) * var(--rs-badge-cutout-scale),var(--rs-badge-cutout-h)/2);--rs-badge-cutout-end:calc(100% - var(--rs-badge-cutout-r));--rs-badge-cutout-size:var(--rs-badge-cutout-w) var(--rs-badge-cutout-h);--rs-badge-cutout-position:var(--rs-badge-cutout-side-x) calc(var(--rs-badge-container-inset) * 100% + (var(--rs-badge-container-inset) - 0.5) * var(--rs-badge-cutout-w)) var(--rs-badge-cutout-side-y) calc(var(--rs-badge-container-inset) * 100% + (var(--rs-badge-container-inset) - 0.5) * var(--rs-badge-cutout-h));--rs-badge-cutout-band:transparent var(--rs-badge-cutout-r),#000 0 var(--rs-badge-cutout-end),transparent 0;--rs-badge-cutout-circle:#000 calc(var(--rs-badge-cutout-r) - 0.5px),transparent calc(var(--rs-badge-cutout-r) + 0.5px);mask-image:linear-gradient(#000 0 0),linear-gradient(to right,var(--rs-badge-cutout-band)),linear-gradient(to bottom,var(--rs-badge-cutout-band)),radial-gradient(circle at var(--rs-badge-cutout-r) var(--rs-badge-cutout-r),var(--rs-badge-cutout-circle)),radial-gradient(circle at var(--rs-badge-cutout-end) var(--rs-badge-cutout-r),var(--rs-badge-cutout-circle)),radial-gradient(circle at var(--rs-badge-cutout-r) var(--rs-badge-cutout-end),var(--rs-badge-cutout-circle)),radial-gradient(circle at var(--rs-badge-cutout-end) var(--rs-badge-cutout-end),var(--rs-badge-cutout-circle));mask-size:calc(100% + var(--rs-badge-cutout-overflow) * 2) calc(100% + var(--rs-badge-cutout-overflow) * 2),var(--rs-badge-cutout-size),var(--rs-badge-cutout-size),var(--rs-badge-cutout-size),var(--rs-badge-cutout-size),var(--rs-badge-cutout-size),var(--rs-badge-cutout-size);mask-position:calc(var(--rs-badge-cutout-overflow) * -1) calc(var(--rs-badge-cutout-overflow) * -1),var(--rs-badge-cutout-position),var(--rs-badge-cutout-position),var(--rs-badge-cutout-position),var(--rs-badge-cutout-position),var(--rs-badge-cutout-position),var(--rs-badge-cutout-position);mask-repeat:no-repeat;mask-clip:no-clip;mask-composite:subtract,add,add,add,add,add,add;transition:--rs-badge-cutout-scale var(--rs-duration-medium) var(--rs-easing-standard)}

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

@@ -1,8 +1,8 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { ActionableProps } from "../../components/Actionable";
-import type { IconProps } from "../../components/Icon";
-import type { Attributes } from "../../types/global";
+import type { ActionableProps } from "../../components/Actionable/index.js";
+import type { IconProps } from "../../components/Icon/index.js";
+import type { Attributes } from "../../types/global.js";
 type BaseProps = {
     /** Component color scheme
      * @default "neutral"

package/dist/components/Badge/BadgeContainer.d.ts

@@ -1,3 +1,4 @@
-import type * as T from "./Badge.types";
+import React from "react";
+import type * as T from "./Badge.types.js";
 declare const BadgeContainer: React.FC<T.ContainerProps>;
 export default BadgeContainer;

package/dist/components/Badge/BadgeContainer.js

@@ -1,10 +1,14 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
 import { classNames } from "@reshaped/utilities";
+import BadgeContainerContext from "./Badge.context.js";
 import s from "./Badge.module.css";
 const BadgeContainer = (props) => {
     const { children, position = "top-end", overlap, className, attributes } = props;
+    const containerRef = React.useRef(null);
     const rootClassNames = classNames(s.container, className, overlap && s["--container-overlap"], position && s[`--container-position-${position}`]);
-    return (_jsx("div", { ...attributes, className: rootClassNames, children: children }));
+    return (_jsx(BadgeContainerContext.Provider, { value: containerRef, children: _jsx("div", { ...attributes, ref: containerRef, className: rootClassNames, children: children }) }));
 };
 BadgeContainer.displayName = "Badge.Container";
 export default BadgeContainer;

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

@@ -1,7 +1,7 @@
-import Badge from "./Badge";
-import BadgeContainer from "./BadgeContainer";
+import Badge from "./Badge.js";
+import BadgeContainer from "./BadgeContainer.js";
 declare const BadgeRoot: typeof Badge & {
     Container: typeof BadgeContainer;
 };
 export default BadgeRoot;
-export type { Props as BadgeProps } from "./Badge.types";
+export type { Props as BadgeProps } from "./Badge.types.js";

package/dist/components/Badge/index.js

@@ -1,5 +1,5 @@
-import Badge from "./Badge";
-import BadgeContainer from "./BadgeContainer";
+import Badge from "./Badge.js";
+import BadgeContainer from "./BadgeContainer.js";
 const BadgeRoot = Badge;
 BadgeRoot.Container = BadgeContainer;
 export default BadgeRoot;

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

@@ -3,8 +3,8 @@ import React from "react";
 import { fn } from "storybook/test";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("../../../components/Badge").BadgeProps & React.RefAttributes<import("../../Actionable").ActionableRef>> & {
-        Container: React.FC<import("../Badge.types").ContainerProps>;
+    component: React.ForwardRefExoticComponent<import("../../../components/Badge/index.js").BadgeProps & React.RefAttributes<import("../../Actionable/index.js").ActionableRef>> & {
+        Container: React.FC<import("../Badge.types.js").ContainerProps>;
     };
     parameters: {
         iframe: {
@@ -44,6 +44,7 @@ export declare const container: {
     name: string;
     render: () => React.JSX.Element;
 };
+export declare const cutout: StoryObj;
 export declare const href: StoryObj;
 export declare const hrefDismissible: StoryObj<{
     handleDismiss: ReturnType<typeof fn>;