reshaped 3.7.4 → 3.8.0-canary.0

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

@@ -1,19 +1,29 @@
 import type { TextFieldBaseProps } from "../TextField";
 import type * as G from "../../types/global";
 export type BaseProps = Omit<TextFieldBaseProps, "endSlot" | "onChange" | "rounded" | "multiline"> & {
+    /** Callback when the component value is changed */
     onChange?: G.ChangeHandler<number>;
+    /** aria-label attribute for the increase button */
     increaseAriaLabel: string;
+    /** aria-label attribute for the decrease button */
     decreaseAriaLabel: string;
+    /** Minimum value supported in the form field	 */
     min?: number;
+    /** Maximum value supported in the form field */
     max?: number;
+    /** Step at which the value will increase or decrease when clicking the button controls */
     step?: number;
 };
 export type ControlledProps = BaseProps & {
+    /** Value of the form field, enables controlled mode */
     value: number | null;
+    /** Default value of the form field, enables uncontrolled mode */
     defaultValue?: never;
 };
 export type UncontrolledProps = BaseProps & {
+    /** Value of the form field, enables controlled mode */
     value?: never;
+    /** Default value of the form field, enables uncontrolled mode */
     defaultValue?: number;
 };
 export type Props = ControlledProps | UncontrolledProps;

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

@@ -2,21 +2,34 @@ import type React from "react";
 import type * as G from "../../types/global";
 export type CloseReason = "overlay-click" | "escape-key";
 export type Props = {
+    /** Make the overlay transparent */
     transparent?: boolean | number;
+    /** Make the overlay blurred */
     blurred?: boolean;
+    /** Control the overflow of the component content */
     overflow?: "auto" | "hidden";
+    /** Node for inserting children, render function receives the state of the component as an argument */
     children?: React.ReactNode | ((props: {
         active: boolean;
     }) => React.ReactNode);
+    /** Control the visibility of the component */
     active?: boolean;
+    /** Callback when the component is closed */
     onClose?: (args: {
         reason: CloseReason;
     }) => void;
+    /** Callback after the component close transition is complete */
     onAfterClose?: () => void;
+    /** Callback when the component is opened */
     onOpen?: () => void;
+    /** Callback after the component open transition is complete */
     onAfterOpen?: () => void;
+    /** Disable closing the component on outside click */
     disableCloseOnClick?: boolean;
+    /** Element to render the component in */
     containerRef?: React.RefObject<HTMLElement | null>;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };

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

@@ -1,52 +1,34 @@
 import type * as G from "../../types/global";
 export type BaseProps = {
-    /**
-     * Total number of pages available
-     */
+    /** Total number of pages available */
     total: number;
-    /**
-     * Event handler triggered when the current page changes
-     */
+    /** Callback when the current page changes */
     onChange?: (args: {
         page: number;
     }) => void;
-    /**
-     * Function to dynamically get an aria-label for each
-     */
+    /** Function to dynamically get an aria-label for each page */
     pageAriaLabel?: (args: {
         page: number;
     }) => string;
-    /**
-     * aria-label for the previous page button
-     */
+    /** aria-label attribute for the previous page button */
     previousAriaLabel: string;
-    /**
-     * aria-label for the next page button
-     */
+    /** aria-label attribute for the next page button */
     nextAriaLabel: string;
-    /**
-     * Custom root element className
-     */
+    /** Additional classname for the root element */
     className?: G.ClassName;
-    /**
-     * Custom root element attributes
-     */
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };
 export type ControlledProps = BaseProps & {
-    /**
-     * Currently selected page number, starts with 1.
-     * Enables controlled component behavior.
-     */
+    /** Currently selected page number, starts with 1, enables controlled mode */
     page: number;
+    /** Default selected page number, starts with 1, enables uncontrolled mode */
     defaultPage?: never;
 };
 export type UncontrolledProps = BaseProps & {
+    /** Currently selected page number, starts with 1, enables controlled mode */
     page?: never;
-    /**
-     * Default selected page number, starts with 1.
-     * Enables uncontrolled component behavior.
-     */
+    /** Default selected page number, starts with 1, enables uncontrolled mode */
     defaultPage?: number;
 };
 export type Props = ControlledProps | UncontrolledProps;

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

@@ -1,22 +1,35 @@
 import type * as G from "../../types/global";
 export type Size = "small" | "medium" | "large" | "xlarge";
 type BaseProps = {
+    /** Name of the input element */
     name: string;
+    /** Amount of characters in the pin */
     valueLength?: number;
+    /** Character pattern used in the input value */
     pattern?: "alphabetic" | "numeric" | "alphanumeric";
+    /** Component size */
     size?: G.Responsive<Size>;
+    /** Input fields render variant */
     variant?: "outline" | "faded";
+    /** Callback when the input value changes */
     onChange?: G.ChangeHandler<string>;
+    /** Additional attributes for the input element */
     inputAttributes?: G.Attributes<"input">;
+    /** 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;
+    /** 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/Popover/Popover.types.d.ts

@@ -2,8 +2,11 @@ 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"> & {
+    /** 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.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 = {

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

@@ -5,38 +5,65 @@ import type { ActionableProps } from "../Actionable";
 import type { IconProps } from "../Icon";
 type Size = G.Responsive<"small" | "medium" | "large" | "xlarge">;
 type Option = {
+    /** Option text label */
     label: string;
+    /** Option value used in the form submission */
     value: string;
+    /** Disable the option from the selection */
     disabled?: boolean;
 };
 export type ButtonTriggerProps = {
+    /** Callback when the button is clicked */
     onClick?: () => void;
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Additional attributes for the input element */
     inputAttributes?: ActionableProps["attributes"];
+    /** Callback when the input is focused */
     onFocus?: (e: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Callback when the input is blurred */
     onBlur?: (e: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Options for the select */
     options?: never;
+    /** Callback when the input value changes */
     onChange?: never;
 };
 export type SelectTriggerProps = {
+    /** Options for the select */
     options: Option[];
+    /** Callback when the input value changes */
     onChange?: G.ChangeHandler<string, React.ChangeEvent<HTMLSelectElement>>;
+    /** Callback when the input is focused */
     onFocus?: (e: React.FocusEvent<HTMLSelectElement>) => void;
+    /** Callback when the input is blurred */
     onBlur?: (e: React.FocusEvent<HTMLSelectElement>) => void;
+    /** Additional attributes for the input element */
     inputAttributes?: G.Attributes<"select">;
+    /** Callback when the button is clicked */
     onClick?: never;
+    /** Node for inserting children */
     children?: never;
 };
 type BaseProps = ((ButtonTriggerProps | SelectTriggerProps) & Pick<FormControlProps, "hasError">) & {
+    /** Unique identifier for the select */
     id?: string;
+    /** Name of the input element */
     name: string;
+    /** Component size */
     size?: Size;
+    /** Component render variant */
     variant?: "outline" | "faded" | "headless";
+    /** Disable the select user interaction and form submission */
     disabled?: boolean;
+    /** Placeholder text when there is no value selected */
     placeholder?: string;
+    /** Icon to display in the select start position */
     icon?: IconProps["svg"];
+    /** Node for inserting content before the select value */
     startSlot?: React.ReactNode;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };
 export type ControlledProps = BaseProps & {

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

@@ -1,6 +1,8 @@
 import type { ViewProps } from "../View";
 import type * as G from "../../types/global";
 export type Props = Pick<ViewProps, "width" | "height" | "borderRadius"> & {
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };