reshaped 3.7.4 → 3.8.0-canary.1

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

@@ -1,5 +1,7 @@
+import { expect, fn, userEvent, waitFor } from "storybook/internal/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import PinField from "../index.js";
+import FormControl from "../../FormControl/index.js";
 export default {
     title: "Components/PinField",
     component: PinField,
@@ -9,54 +11,199 @@ export default {
         },
     },
 };
-export const base = () => (<Example>
-		<Example.Item title="no value">
-			<PinField name="pin" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-
-		<Example.Item title="defaultValue: 1234">
-			<PinField name="pin2" defaultValue="1234" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-
-		<Example.Item title="value: 12">
-			<PinField name="pin3" value="12" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-
-		<Example.Item title="defaultValue: 12, valueLength: 6">
-			<PinField name="pin4" defaultValue="12" valueLength={6} inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-
-		<Example.Item title="defaultValue: ab, charPattern: alphabetic">
-			<PinField name="pin5" defaultValue="ab" pattern="alphabetic" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-
-		<Example.Item title="defaultValue: ab, charPattern: alphanumeric">
-			<PinField name="pin6" defaultValue="ab" pattern="alphanumeric" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-	</Example>);
-export const variant = () => (<Example>
-		<Example.Item title="variant: faded">
-			<PinField name="pin" variant="faded" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-	</Example>);
-export const size = () => (<Example>
-		<Example.Item title="size: small">
-			<PinField name="pin" size="small" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
+export const base = {
+    name: "base",
+    render: () => <PinField name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
+    play: async ({ canvas }) => {
+        const elInput = canvas.getByRole("textbox");
+        expect(elInput).toBeInTheDocument();
+        expect(elInput).toHaveAttribute("name", "test-name");
+        expect(elInput).toHaveAttribute("autocomplete", "one-time-code");
+        expect(elInput).toHaveAttribute("inputmode", "numeric");
+    },
+};
+export const variant = {
+    name: "variant",
+    render: () => (<Example>
+			<Example.Item title="variant: faded">
+				<PinField name="pin" variant="faded" inputAttributes={{ "aria-label": "Pin" }}/>
+			</Example.Item>
+		</Example>),
+};
+export const size = {
+    name: "size",
+    render: () => (<Example>
+			<Example.Item title="size: small">
+				<PinField name="pin" size="small" inputAttributes={{ "aria-label": "Pin" }}/>
+			</Example.Item>
 
-		<Example.Item title="size: medium">
-			<PinField name="pin" size="medium" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
+			<Example.Item title="size: medium">
+				<PinField name="pin" size="medium" inputAttributes={{ "aria-label": "Pin" }}/>
+			</Example.Item>
 
-		<Example.Item title="size: large">
-			<PinField name="pin" size="large" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
+			<Example.Item title="size: large">
+				<PinField name="pin" size="large" inputAttributes={{ "aria-label": "Pin" }}/>
+			</Example.Item>
 
-		<Example.Item title="size: xlarge">
-			<PinField name="pin" size="xlarge" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
+			<Example.Item title="size: xlarge">
+				<PinField name="pin" size="xlarge" inputAttributes={{ "aria-label": "Pin" }}/>
+			</Example.Item>
 
-		<Example.Item title="size: responsive, s: medium, m+: xlarge">
-			<PinField name="pin" size={{ s: "medium", m: "xlarge" }} inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-	</Example>);
+			<Example.Item title="size: responsive, s: medium, m+: xlarge">
+				<PinField name="pin" size={{ s: "medium", m: "xlarge" }} inputAttributes={{ "aria-label": "Pin" }}/>
+			</Example.Item>
+		</Example>),
+};
+export const valueLength = {
+    name: "valueLength",
+    render: () => (<PinField name="test-name" valueLength={6} inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas }) => {
+        const elInput = canvas.getByRole("textbox");
+        expect(elInput).toHaveAttribute("maxlength", "6");
+    },
+};
+export const defaultValue = {
+    name: "defaultValue, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<PinField name="test-name" onChange={args.handleChange} defaultValue="12" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const elInput = canvas.getByRole("textbox");
+        elInput.focus();
+        await userEvent.keyboard("3");
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            value: "123",
+            name: "test-name",
+            event: expect.objectContaining({ target: elInput }),
+        });
+        expect(elInput).toHaveValue("123");
+    },
+};
+export const value = {
+    name: "value, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<PinField name="test-name" onChange={args.handleChange} value="12" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const elInput = canvas.getByRole("textbox");
+        elInput.focus();
+        await userEvent.keyboard("3");
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            value: "123",
+            name: "test-name",
+            event: expect.objectContaining({ target: elInput }),
+        });
+        expect(elInput).toHaveValue("12");
+    },
+};
+export const pattern = {
+    name: "pattern",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<PinField name="test-name" pattern="alphabetic" defaultValue="ab" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const elInput = canvas.getByRole("textbox");
+        elInput.focus();
+        await userEvent.keyboard("3");
+        expect(elInput).toHaveValue("ab");
+        expect(args.handleChange).toHaveBeenCalledTimes(0);
+        await userEvent.keyboard("c");
+        expect(elInput).toHaveValue("abc");
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<PinField name="test-name" className="test-classname" attributes={{ id: "test-id" }} inputAttributes={{ "aria-label": "Label", id: "test-input-id" }}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const input = canvas.queryByLabelText("Label");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("id", "test-input-id");
+    },
+};
+export const formControl = {
+    name: "test: with FormControl",
+    render: () => (<FormControl>
+			<FormControl.Label>Label</FormControl.Label>
+			<PinField name="test-name"/>
+		</FormControl>),
+    play: async ({ canvas }) => {
+        const elInput = canvas.getByRole("textbox");
+        expect(elInput).toHaveAccessibleName("Label");
+    },
+};
+export const keyboard = {
+    name: "test: keyboard navigation",
+    render: () => <PinField name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
+    play: async ({ canvas }) => {
+        const elInput = canvas.getByRole("textbox");
+        elInput.focus();
+        expect(elInput.selectionStart).toEqual(0);
+        expect(elInput.selectionEnd).toEqual(0);
+        await userEvent.keyboard("1");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(1);
+            expect(elInput.selectionEnd).toEqual(1);
+        });
+        await userEvent.keyboard("234");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(3);
+            expect(elInput.selectionEnd).toEqual(4);
+        });
+        // Move back to the first character
+        await userEvent.keyboard("{ArrowLeft/}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(2);
+            expect(elInput.selectionEnd).toEqual(3);
+        });
+        await userEvent.keyboard("{ArrowLeft/}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(1);
+            expect(elInput.selectionEnd).toEqual(2);
+        });
+        await userEvent.keyboard("{ArrowLeft}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(0);
+            expect(elInput.selectionEnd).toEqual(1);
+        });
+        // Move to the third character
+        await userEvent.keyboard("{ArrowRight}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(1);
+            expect(elInput.selectionEnd).toEqual(2);
+        });
+        await userEvent.keyboard("{ArrowRight}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(2);
+            expect(elInput.selectionEnd).toEqual(3);
+        });
+        expect(elInput).toHaveValue("1234");
+        await userEvent.keyboard("{backspace}");
+        expect(elInput).toHaveValue("124");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(2);
+            expect(elInput.selectionEnd).toEqual(3);
+        });
+        // Switched to type mode
+        await userEvent.keyboard("{ArrowRight}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(3);
+            expect(elInput.selectionStart).toEqual(3);
+        });
+        // Can't move further
+        await userEvent.keyboard("{ArrowRight}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(3);
+            expect(elInput.selectionStart).toEqual(3);
+        });
+    },
+};

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

@@ -1,9 +1,12 @@
 import type React from "react";
 import type { FlyoutProps, FlyoutInstance } from "../Flyout";
 export type Instance = FlyoutInstance;
-export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "contentShift" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "autoFocus" | "containerRef" | "initialFocusRef" | "originCoordinates"> & {
+export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "contentShift" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "autoFocus" | "containerRef" | "initialFocusRef" | "originCoordinates"> & {
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Content element padding, unit token multiplier */
     padding?: number;
+    /** Component elevation level */
     elevation?: "raised" | "overlay";
     /** @deprecated use Flyout utility instead, will be removed in v4 */
     variant?: "elevated" | "headless";

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

@@ -1,12 +1,21 @@
 import type * as G from "../../types/global";
 export type Props = {
+    /** Value of the progress bar controlling the size of the fill */
     value?: number;
+    /** Lower value boundary of the progress bar */
     max?: number;
+    /** Upper value boundary of the progress bar */
     min?: number;
+    /** Component size */
     size?: "small" | "medium";
+    /** Component color scheme */
     color?: "primary" | "critical" | "warning" | "positive" | "media";
+    /** Duration of the progress bar animation in milliseconds */
     duration?: number;
+    /** aria-label attribute for the root element */
     ariaLabel?: string;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };

package/dist/components/ProgressIndicator/ProgressIndicator.js

@@ -1,30 +1,12 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
 import { classNames } from "../../utilities/props.js";
-import { onNextFrame } from "../../utilities/animation.js";
-import usePrevious from "../../hooks/_private/usePrevious.js";
 import s from "./ProgressIndicator.module.css";
-const MAX_RENDERED_ITEMS = 7;
-const BOUNDARY = (MAX_RENDERED_ITEMS - 1) / 2;
+const VISIBLE_ITEMS = 7;
+const HALF_ITEMS = Math.floor(VISIBLE_ITEMS / 2);
 const ProgressIndicator = (props) => {
     const { total, activeIndex = 0, color = "primary", ariaLabel, className, attributes } = props;
-    const allItemsVisible = total < MAX_RENDERED_ITEMS;
-    const firstRenderedIndex = React.useMemo(() => {
-        if (allItemsVisible)
-            return 0;
-        if (activeIndex <= BOUNDARY)
-            return 0;
-        if (activeIndex >= total - 1 - BOUNDARY)
-            return total - MAX_RENDERED_ITEMS;
-        return activeIndex - BOUNDARY;
-    }, [activeIndex, allItemsVisible, total]);
-    const [startIndex, setStartIndex] = React.useState(firstRenderedIndex);
-    const previousActiveIndex = usePrevious(activeIndex);
-    const [shift, setShift] = React.useState(null);
-    const [animated, setAnimatedState] = React.useState(true);
-    const animatedRef = React.useRef(true);
-    const rootClassName = classNames(s.root, className, shift && s[`--shift-${shift}`], color && s[`--color-${color}`], animated && s["--animated"]);
+    const rootClassName = classNames(s.root, className, color && s[`--color-${color}`]);
     const barAttributes = ariaLabel
         ? {
             "aria-label": ariaLabel,
@@ -34,69 +16,16 @@ const ProgressIndicator = (props) => {
             "aria-valuemax": total - 1,
         }
         : {};
-    const setAnimated = (animated) => {
-        setAnimatedState(animated);
-        animatedRef.current = animated;
-    };
-    /**
-     * After the shift transition, disable the animation and reset the items position
-     */
-    const handleTransitionEnd = (event) => {
-        if (event.target !== event.currentTarget || event.pseudoElement)
-            return;
-        setAnimated(false);
-    };
-    React.useEffect(() => {
-        if (animated)
-            return;
-        setShift(null);
-    }, [animated]);
-    React.useEffect(() => {
-        if (shift)
-            return;
-        onNextFrame(() => setAnimated(true));
-    }, [shift, firstRenderedIndex]);
-    React.useEffect(() => {
-        if (previousActiveIndex === activeIndex)
-            return;
-        const direction = previousActiveIndex && activeIndex < previousActiveIndex ? "start" : "end";
-        const lastIndex = total - 1;
-        const endThreshold = lastIndex - BOUNDARY;
-        const isAtStartEdge = activeIndex < BOUNDARY || (direction === "end" && activeIndex === BOUNDARY);
-        const isAtEndEdge = activeIndex > endThreshold || (direction === "start" && activeIndex === endThreshold);
-        const isAtEdge = isAtStartEdge || isAtEndEdge;
-        if (allItemsVisible || isAtEdge || !animatedRef.current) {
-            setStartIndex(firstRenderedIndex);
-            return;
-        }
-        setStartIndex(firstRenderedIndex);
-        setShift(direction);
-    }, [activeIndex, firstRenderedIndex, allItemsVisible, previousActiveIndex, total]);
-    const renderItems = () => {
-        let selectionDelta = 0;
-        if (shift === "start")
-            selectionDelta = -1;
-        if (shift === "end")
-            selectionDelta = 1;
-        const itemAmount = Math.min(MAX_RENDERED_ITEMS, total);
-        const items = [];
-        const lastIndex = total - 1;
-        const activeVisibleIndex = activeIndex - startIndex + selectionDelta;
-        const rightExtra = Math.max(BOUNDARY - activeIndex, 0);
-        const leftExtra = Math.max(BOUNDARY - (lastIndex - activeIndex), 0);
-        const rightModifierIndex = activeVisibleIndex + rightExtra + 1;
-        const leftModifierIndex = activeVisibleIndex - leftExtra - 1;
-        for (let i = 0; i < itemAmount; i += 1) {
-            const isActive = i === activeVisibleIndex;
-            const isSmall = i === rightModifierIndex + 1 || i === leftModifierIndex - 1;
-            const isSmaller = i === rightModifierIndex + 2 || i === leftModifierIndex - 2;
-            const isHidden = i > rightModifierIndex + 2 || i < leftModifierIndex - 2;
-            const itemClassName = classNames(s.item, isActive && s["item--active"], !allItemsVisible && isSmall && s["item--variant-secondary"], !allItemsVisible && isSmaller && s["item--variant-tertiary"], !allItemsVisible && isHidden && s["item--variant-hidden"]);
-            items.push(_jsx("div", { className: itemClassName }, i));
-        }
-        return items;
-    };
-    return (_jsx("div", { ...attributes, className: rootClassName, children: _jsx("div", { ...barAttributes, className: s.container, onTransitionEnd: handleTransitionEnd, children: renderItems() }) }));
+    const transformIndex = total > VISIBLE_ITEMS
+        ? Math.min(total - VISIBLE_ITEMS, Math.max(0, activeIndex - HALF_ITEMS))
+        : 0;
+    return (_jsx("div", { ...attributes, className: rootClassName, children: _jsx("div", { ...barAttributes, className: s.container, style: {
+                "--rs-progress-indicator-mod": transformIndex,
+            }, children: Array.from({ length: total }).map((_, i) => {
+                const itemClassName = classNames(s.item, i === activeIndex && s["item--active"], (i < activeIndex - (HALF_ITEMS - 1) || i > activeIndex + (HALF_ITEMS - 1)) &&
+                    s["item--variant-secondary"]);
+                return _jsx("div", { className: itemClassName }, i);
+            }) }) }));
 };
 ProgressIndicator.displayName = "ProgressIndicator";
 export default ProgressIndicator;

package/dist/components/ProgressIndicator/ProgressIndicator.module.css

@@ -1 +1 @@
-.root{line-height:0}.container{display:inline-flex;position:relative;vertical-align:top}.container:after,.container:before{content:"";inset-inline-start:calc(var(--rs-unit-x4) * -1);opacity:0;position:absolute}.container:after,.container:before,.item{background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-circular);height:var(--rs-unit-x2);width:var(--rs-unit-x2)}.item{margin-inline-start:var(--rs-unit-x2)}.item:first-child{margin-inline-start:0}.item.item--active{background:var(--rs-color-background-primary);transform:scale(1.2)}.item.item--variant-secondary{opacity:.6}.item.item--variant-tertiary{opacity:.3}.item.item--variant-hidden{opacity:0}.--color-media .container:after,.--color-media .container:before,.--color-media .item{background:var(--rs-color-white)}.--color-media .item{opacity:.6}.--color-media .item.item--active{opacity:1}.--color-media .item.item--variant-secondary{opacity:.3}.--color-media .item.item--variant-tertiary{opacity:.1}.--color-media .item.item--variant-hidden{opacity:0}.--shift-start .container,[dir=rtl] .--shift-end .container{transform:translateX(var(--rs-unit-x4))}.--shift-end .container,[dir=rtl] .--shift-start .container{transform:translateX(calc(var(--rs-unit-x4) * -1))}.--shift-end .container:after,.--shift-start .container:before{opacity:.3}.--shift-end.--color-media .container:after,.--shift-start.--color-media .container:before{opacity:.1}.--shift-start .container:before{inset-inline-end:auto;inset-inline-start:calc(var(--rs-unit-x4) * -1)}.--shift-end .container:after{inset-inline-end:calc(var(--rs-unit-x4) * -1);inset-inline-start:auto}.--animated .container,.--animated .container:after,.--animated .container:before,.--animated .item{transition:var(--rs-duration-slow) var(--rs-easing-decelerate);transition-property:transform,opacity,background-color}
+.root{box-sizing:initial;line-height:0;margin-inline:calc(var(--rs-unit-x4) * -1);mask-image:linear-gradient(to right,transparent 0,#000 var(--rs-unit-x4),#000 calc(100% - var(--rs-unit-x4)),transparent 100%);max-width:calc(var(--rs-unit-x2) * 15);overflow:hidden;padding-inline:var(--rs-unit-x4)}.container{display:inline-flex;position:relative;transform:translateX(calc(var(--rs-unit-x4) * -1 * var(--rs-progress-indicator-mod)));transition:var(--rs-duration-slow) var(--rs-easing-decelerate);transition-property:transform;vertical-align:top}.item{background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-circular);height:var(--rs-unit-x2);margin-inline-start:var(--rs-unit-x2);transform:translateZ(0);transition:var(--rs-duration-slow) var(--rs-easing-decelerate);transition-property:transform,opacity,background-color,width;width:var(--rs-unit-x2)}.item:first-child{margin-inline-start:0}.item.item--active{background:var(--rs-color-background-primary);width:var(--rs-unit-x6)}.item.item--variant-secondary{opacity:.5}.--color-media .item{background:var(--rs-color-white);opacity:.5}.--color-media .item.item--active{opacity:1}.--color-media .item.item--variant-secondary{opacity:.25}

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

@@ -1,9 +1,17 @@
 import type * as G from "../../types/global";
 export type Props = {
+    /** Total amount of progress indicator dots */
     total: number;
+    /** Index of the active progress indicator dot */
     activeIndex?: number;
+    /** Component size */
+    size?: "small" | "medium";
+    /** Component color scheme */
     color?: "primary" | "media";
+    /** aria-label attribute for the root element */
     ariaLabel?: string;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };

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

@@ -36,7 +36,14 @@ export const base = {
 							</Button>
 							<Text weight="medium">Index: {activeIndex}</Text>
 						</View>
-						<ProgressIndicator total={total} activeIndex={activeIndex}/>
+
+						<View borderRadius="medium" overflow="hidden" width="300px">
+							<Scrim position="bottom" backgroundSlot={<View aspectRatio={16 / 9} backgroundColor="neutral-faded"/>}>
+								<View align="center">
+									<ProgressIndicator total={total} activeIndex={activeIndex} color="media"/>
+								</View>
+							</Scrim>
+						</View>
 					</View>
 				</Example.Item>
 			</Example>);

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

@@ -1,17 +1,29 @@
 import type React from "react";
 import type * as G from "../../types/global";
 type BaseProps = {
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Name of the input element */
     name?: string;
+    /** Disable the form field from the form submission */
     disabled?: boolean;
+    /** Indicate that the form field has an error */
     hasError?: boolean;
+    /** Value of the input element */
     value: string;
+    /** Component size */
     size?: G.Responsive<"small" | "medium" | "large">;
+    /** Callback when the input value changes */
     onChange?: G.ChangeHandler<boolean>;
+    /** Callback when the input is focused */
     onFocus?: (e: React.FocusEvent) => void;
+    /** Callback when the input is blurred */
     onBlur?: (e: React.FocusEvent) => void;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"label">;
+    /** Additional attributes for the input element */
     inputAttributes?: G.Attributes<"input">;
 };
 export type ControlledProps = BaseProps & {

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

@@ -2,19 +2,33 @@ import type React from "react";
 import type * as G from "../../types/global";
 import type { RadioProps } from "../Radio";
 type BaseProps = {
+    /** Unique identifier for the radio group */
     id?: string;
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Disable the form field from the form submission */
     disabled?: boolean;
+    /** Name of the input element */
     name: string;
+    /** Indicate that the form field has an error */
     hasError?: boolean;
+    /** Callback when the input value changes */
     onChange?: G.ChangeHandler<string>;
+    /** Additional classname for the root element */
+    className?: G.ClassName;
+    /** Additional attributes for the root element */
+    attributes?: G.Attributes<"div">;
 };
 export type ControlledProps = BaseProps & {
+    /** Value of the input element, enables controlled mode */
     value: string | null;
+    /** Default value of the input element, enables uncontrolled mode */
     defaultValue?: never;
 };
 export type UncontrolledProps = BaseProps & {
+    /** Value of the input element, enables controlled mode */
     value?: never;
+    /** Default value of the input element, enables uncontrolled mode */
     defaultValue?: string;
 };
 export type Props = ControlledProps | UncontrolledProps;

package/dist/components/Reshaped/Reshaped.css

@@ -1 +1 @@
-@layer rs.reset{[data-rs-theme]{--rs-radius-circular:9999px;--rs-shadow-border-faded:0px 0px 0px 1px var(--rs-color-border-neutral-faded)}[data-rs-theme] blockquote,[data-rs-theme] body,[data-rs-theme] dd,[data-rs-theme] dl,[data-rs-theme] figcaption,[data-rs-theme] figure,[data-rs-theme] h1,[data-rs-theme] h2,[data-rs-theme] h3,[data-rs-theme] h4,[data-rs-theme] h5,[data-rs-theme] h6,[data-rs-theme] li,[data-rs-theme] ol,[data-rs-theme] p,[data-rs-theme] ul{margin:0;padding:0}[data-rs-theme] ol[class],[data-rs-theme] ul[class]{list-style:none}[data-rs-theme] textarea{resize:vertical}[data-rs-theme] table{border-collapse:collapse;border-spacing:0}[data-rs-theme] fieldset{border:0;margin:0;padding:0}[data-rs-theme] img{display:block;max-width:100%}[data-rs-theme] button,[data-rs-theme] input,[data-rs-theme] select,[data-rs-theme] textarea{font:inherit}[data-rs-theme] option{background:var(--rs-color-background-elevation-base)}[data-rs-theme] label{cursor:pointer}[data-rs-theme] input::placeholder,[data-rs-theme] textarea::placeholder{color:var(--rs-color-foreground-disabled)}html[data-rs-theme]{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-size:100%;text-rendering:optimizelegibility;touch-action:manipulation}[data-rs-theme] *{box-sizing:border-box}[data-rs-theme] body,html[data-rs-theme]{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);height:100%;scroll-behavior:smooth}}[data-rs-theme] body,[data-rs-theme]:not(html){font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}
+@layer rs.reset{[data-rs-theme]{--rs-radius-circular:9999px;--rs-shadow-border-faded:0px 0px 0px 1px var(--rs-color-border-neutral-faded)}[data-rs-theme] blockquote,[data-rs-theme] body,[data-rs-theme] dd,[data-rs-theme] dl,[data-rs-theme] figcaption,[data-rs-theme] figure,[data-rs-theme] h1,[data-rs-theme] h2,[data-rs-theme] h3,[data-rs-theme] h4,[data-rs-theme] h5,[data-rs-theme] h6,[data-rs-theme] li,[data-rs-theme] ol,[data-rs-theme] p,[data-rs-theme] ul{margin:0;padding:0}[data-rs-theme] ol[class],[data-rs-theme] ul[class]{list-style:none}[data-rs-theme] textarea{resize:vertical}[data-rs-theme] table{border-collapse:collapse;border-spacing:0}[data-rs-theme] fieldset{border:0;margin:0;padding:0}[data-rs-theme] img{display:block;max-width:100%}[data-rs-theme] button,[data-rs-theme] input,[data-rs-theme] select,[data-rs-theme] textarea{font:inherit}[data-rs-theme] option{background:var(--rs-color-background-elevation-base)}[data-rs-theme] label{cursor:pointer}[data-rs-theme] input::placeholder,[data-rs-theme] textarea::placeholder{color:var(--rs-color-foreground-disabled)}html[data-rs-theme]{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-size:100%;text-rendering:optimizelegibility;touch-action:manipulation}[data-rs-theme] *{box-sizing:border-box}[data-rs-theme] body,html[data-rs-theme]{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);min-height:100vh;scroll-behavior:smooth}}[data-rs-theme] body,[data-rs-theme]:not(html){font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}

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

@@ -3,14 +3,26 @@ import type { GlobalColorModeProps, ThemeProps } from "../Theme";
 import type { ToastProviderProps } from "../Toast";
 import type * as G from "../../types/global";
 export type Props = {
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Theme of the application, enables controlled mode */
     theme?: NonNullable<ThemeProps["name"]>;
+    /** Default theme of the application, enables uncontrolled mode */
     defaultTheme?: NonNullable<ThemeProps["defaultName"]>;
+    /** Default content direction of the application */
     defaultRTL?: boolean;
+    /** Color mode of the application, enables controlled mode */
     colorMode?: GlobalColorModeProps["mode"];
+    /** Default color mode of the application, enables uncontrolled mode */
     defaultColorMode?: GlobalColorModeProps["defaultMode"];
+    /** Default viewport size of the application */
     defaultViewport?: G.Viewport;
+    /** Global options for the ToastProvider */
     toastOptions?: ToastProviderProps["options"];
+    /** Enable scoped mode for applications not using Reshaped provider at the application root */
     scoped?: boolean;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
+    attributes?: G.Attributes<"div">;
 };

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

@@ -2,19 +2,26 @@ import type React from "react";
 import type { ViewProps } from "../View";
 import type { UseDragCallbackArgs } from "../../hooks/_private/useDrag";
 export type Props = {
+    /** Component render variant */
     variant?: "bordered" | "borderless";
+    /** Component content direction with the resize handle rendered in between the chidlren */
     direction?: Extract<ViewProps["direction"], "row" | "column">;
 } & Pick<ViewProps, "children" | "className" | "attributes" | "height" | "gap">;
 export type ItemProps = {
+    /** Node for inserting content */
     children: React.ReactNode;
+    /** Minimum size of the resizable pane */
     minSize?: `${number}px`;
+    /** Maximum size of the resizable pane */
     maxSize?: `${number}px`;
+    /** Default size of the resizable pane */
     defaultSize?: `${number}px`;
 };
 export type PrivateItemProps = ItemProps & {
     index: number;
 };
 export type HandleProps = {
+    /** Render function for custom resize handles with attributes and props passed as arguments */
     children?: (attributes: {
         ref: React.RefObject<HTMLButtonElement | null>;
     }, props: Pick<Props, "direction"> & {

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

@@ -1,11 +1,16 @@
 import React from "react";
 import type * as G from "../../types/global";
 export type Props = {
+    /** Node for inserting content */
     children?: React.ReactNode;
+    /** Node for inserting background content behind the scrim */
     backgroundSlot?: React.ReactNode;
+    /** Component content position */
     position?: "full" | "top" | "bottom" | "start" | "end";
-    fill?: boolean;
+    /** Additional classname for the scrim element */
     scrimClassName?: G.ClassName;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };

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

@@ -1,12 +1,19 @@
 import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
+    /** Node for inserting content */
     children: React.ReactNode;
+    /** Scrollbar visibility behavior based on the user interaction */
     scrollbarDisplay?: "visible" | "hover" | "hidden";
+    /** Callback when the scroll area is scrolled */
     onScroll?: (args: G.Coordinates) => void;
+    /** Height of the scroll area, literal css value or unit token multiplier */
     height?: G.Responsive<string | number>;
+    /** Maximum height of the scroll area, literal css value or unit token multiplier */
     maxHeight?: G.Responsive<string | number>;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };
 export type BarProps = {