reshaped 3.7.4 → 3.8.0-canary.0

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

@@ -1,82 +1,138 @@
 import type * as G from "../../types/global";
 export type SingleChangeArgs = {
+    /** Value of the slider, enables controlled mode */
     value: number;
+    /** Minimum value of the slider */
     minValue?: never;
+    /** Maximum value of the slider */
     maxValue?: never;
+    /** Name of the slider input element */
     name: string;
+    /** Name of the slider min value input element, overrides the name */
     minName?: never;
+    /** Name of the slider max value input element, overrides the name */
     maxName?: never;
 };
 export type RangeChangeArgs = {
+    /** Value of the slider, enables controlled mode */
     value?: never;
+    /** Minimum value of the slider */
     minValue: number;
+    /** Maximum value of the slider */
     maxValue: number;
+    /** Name of the slider input element, overrides the name */
     name: string;
+    /** Name of the slider min value input element, overrides the name */
     minName?: never;
+    /** Name of the slider max value input element, overrides the name */
     maxName?: never;
 };
 export type NameRangeChangeArgs = {
+    /** Value of the slider, enables controlled mode */
     value?: never;
+    /** Minimum value of the slider */
     minValue: number;
+    /** Maximum value of the slider */
     maxValue: number;
+    /** Name of the slider input element */
     name?: never;
+    /** Name of the slider min value input element, overrides the name */
     minName: string;
+    /** Name of the slider max value input element, overrides the name */
     maxName: string;
 };
 type SingleSelectionProps = {
+    /** Enables range slider with two thumbs */
     range?: false;
+    /** Name of the slider input element */
     name: string;
+    /** Name of the slider min value input element, overrides the name */
     minName?: never;
+    /** Name of the slider max value input element, overrides the name */
     maxName?: never;
+    /** Callback when the slider value changes */
     onChange?: (args: SingleChangeArgs) => void;
+    /** Callback when the user commits the change by releasing the thumb */
     onChangeCommit?: (args: SingleChangeArgs) => void;
 };
 type RangeSelectionProps = {
+    /** Enables range slider with two thumbs */
     range: true;
+    /** Name of the slider input element */
     name: string;
+    /** Name of the slider min value input element, overrides the name */
     minName?: never;
+    /** Name of the slider max value input element, overrides the name */
     maxName?: never;
+    /** Callback when the slider value changes */
     onChange?: (args: RangeChangeArgs) => void;
+    /** Callback when the user commits the change by releasing the thumbs */
     onChangeCommit?: (args: RangeChangeArgs) => void;
 };
 type NameRangeSelectionProps = {
+    /** Enables range slider with two thumbs */
     range: true;
+    /** Name of the slider input element */
     name?: never;
+    /** Name of the slider min value input element, overrides the name */
     minName: string;
+    /** Name of the slider max value input element, overrides the name */
     maxName: string;
+    /** Callback when the slider value changes */
     onChange?: (args: RangeChangeArgs) => void;
+    /** Callback when the user commits the change by releasing the thumbs */
     onChangeCommit?: (args: RangeChangeArgs) => void;
 };
 type ControlledSingleProps = {
+    /** Value of the slider, enables controlled mode */
     value: number;
+    /** Default value of the slider, enables uncontrolled mode */
     defaultValue?: never;
 };
 type ControlledRangeProps = {
+    /** Minimum value of the slider */
     minValue: number;
+    /** Maximum value of the slider */
     maxValue: number;
+    /** Default minimum value of the slider, enables uncontrolled mode */
     defaultMinValue?: never;
+    /** Default maximum value of the slider, enables uncontrolled mode */
     defaultMaxValue?: never;
 };
 type UncontrolledSingleProps = {
+    /** Value of the slider, enables controlled mode */
     value?: never;
+    /** Default value of the slider, enables uncontrolled mode */
     defaultValue?: number;
 };
 type UncontrolledRangeProps = {
+    /** Minimum value of the slider */
     minValue?: never;
+    /** Maximum value of the slider */
     maxValue?: never;
+    /** Default minimum value of the slider, enables uncontrolled mode */
     defaultMinValue?: number;
+    /** Default maximum value of the slider, enables uncontrolled mode */
     defaultMaxValue?: number;
 };
 type BaseProps = {
+    /** Step of the slider */
     step?: number;
+    /** Disable the slider user interaction */
     disabled?: boolean;
+    /** Minimum value of the slider */
     min?: number;
+    /** Maximum value of the slider */
     max?: number;
+    /** Orientation of the slider */
     orientation?: "vertical" | "horizontal";
+    /** Render a custom value in the thumb tooltip */
     renderValue?: ((args: {
         value: number;
     }) => string) | false;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };
 export type ControlledProps = BaseProps & ((ControlledSingleProps & SingleSelectionProps) | (ControlledRangeProps & (RangeSelectionProps | NameRangeSelectionProps)));

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

@@ -1,20 +1,33 @@
 import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
+    /** Id of the item to display as active */
     activeId?: string | number;
+    /** Display variant for the item label */
     labelDisplay?: G.Responsive<"inline" | "hidden">;
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Direction of the stepper */
     direction?: "row" | "column";
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };
 export type ItemProps = {
+    /** Id of the item, used for selecting the active item */
     id?: string;
+    /** Indicate that the item is completed */
     completed?: boolean;
+    /** Title of the item */
     title?: React.ReactNode;
+    /** Subtitle of the item */
     subtitle?: React.ReactNode;
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };
 export type ItemPrivateProps = ItemProps & {

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

@@ -1,25 +1,41 @@
 import React from "react";
 import type * as G from "../../types/global";
 type BaseProps = {
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Unique identifier for the switch */
     id?: string;
+    /** Name of the switch input element */
     name: string;
+    /** Disable the switch user interaction */
     disabled?: boolean;
+    /** Reverse the children position */
     reversed?: boolean;
+    /** Component size */
     size?: G.Responsive<"medium" | "small" | "large">;
+    /** Callback when the switch value changes */
     onChange?: G.ChangeHandler<boolean>;
+    /** Callback when the switch is focused */
     onFocus?: (e: React.FocusEvent) => void;
+    /** Callback when the switch 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 & {
+    /** Default value of the switch, enables uncontrolled mode */
     defaultChecked?: never;
+    /** Value of the switch, enables controlled mode */
     checked: boolean;
 };
 export type UncontrolledProps = BaseProps & {
+    /** Default value of the switch, enables uncontrolled mode */
     defaultChecked?: boolean;
+    /** Value of the switch, enables controlled mode */
     checked?: boolean;
 };
 export type Props = ControlledProps | UncontrolledProps;

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

@@ -1,44 +1,73 @@
 import React from "react";
 import type * as G from "../../types/global";
 export type Props = {
+    /** Add border around the table */
     border?: boolean;
+    /** Add border between the table columns */
     columnBorder?: boolean;
+    /** Node for inserting children */
     children: React.ReactNode;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };
 export type RowProps = {
+    /** Indicate that the row is selected */
     highlighted?: boolean;
+    /** Callback when the row is clicked */
     onClick?: (e: React.MouseEvent) => void;
+    /** Node for inserting children */
     children: React.ReactNode;
+    /** Additional classname for the row element */
     className?: G.ClassName;
+    /** Additional attributes for the row element */
     attributes?: G.Attributes<"tr">;
 };
 export type CellProps = {
+    /** Align the cell content */
     align?: "start" | "center" | "end";
+    /** Align the cell content vertically */
     verticalAlign?: "start" | "center" | "end";
+    /** Merge the cell with the cells below */
     rowSpan?: number;
+    /** Merge the cell with the cells to the right */
     colSpan?: number;
+    /** Padding of the cell */
     padding?: number;
+    /** Padding of the cell inline, base unit token number multiplier */
     paddingInline?: number;
+    /** Padding of the cell block, base unit token number multiplier */
     paddingBlock?: number;
+    /** Width of the cell, literal css value or a base unit token number multiplier */
     width?: "auto" | string | number;
+    /** Minimum width of the cell, literal css value or a base unit token number multiplier */
     minWidth?: string | number;
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Additional classname for the cell element */
     className?: G.ClassName;
+    /** Additional attributes for the cell element */
     attributes?: G.Attributes<"td">;
 };
 export type HeadingProps = CellProps & {
+    /** Additional attributes for the heading element */
     attributes?: G.Attributes<"th">;
 };
 export type BodyProps = {
+    /** Node for inserting children */
     children: React.ReactNode;
+    /** Additional classname for the body element */
     className?: G.ClassName;
+    /** Additional attributes for the body element */
     attributes?: G.Attributes<"tbody">;
 };
 export type HeadProps = {
+    /** Node for inserting children */
     children: React.ReactNode;
+    /** Additional classname for the head element */
     className?: G.ClassName;
+    /** Additional attributes for the head element */
     attributes?: G.Attributes<"thead">;
 };
 export type PrivateCellProps = CellProps & {

package/dist/components/Tabs/Tabs.module.css

@@ -1 +1 @@
-@property --rs-tabs-mid-l{syntax:"<length>";initial-value:-24px;inherits:false}@property --rs-tabs-stop-l{syntax:"<length>";initial-value:0;inherits:false}@property --rs-tabs-stop-r{syntax:"<length-percentage>";initial-value:100%;inherits:false}@property --rs-tabs-mid-r{syntax:"<length-percentage>";initial-value:calc(100% + 24px);inherits:false}.root{box-sizing:initial;isolation:isolate;max-width:100%}.list,.root{position:relative}.list{--rs-tabs-gap:var(--rs-unit-x6);gap:var(--rs-tabs-gap)}.inner:after{background-color:var(--rs-color-border-neutral-faded);content:"";position:absolute;z-index:2}.listItem{flex-shrink:0;position:relative}.button{overflow:hidden;position:relative;width:100%;z-index:1;-webkit-tap-highlight-color:transparent;border-radius:var(--rs-radius-medium)}@media (hover:hover) and (pointer:fine){.button:not(.button--disabled):hover{color:var(--rs-color-foreground-neutral-faded)}}.button.button--disabled{color:var(--rs-color-foreground-disabled)}.buttonContent{align-items:center;border-radius:var(--rs-radius-medium);box-sizing:border-box;display:flex;width:100%}.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}[data-rs-keyboard] .radio:focus+.buttonContent{box-shadow:var(--rs-focus-inset-shadow)}.icon:not(:last-child){margin-inline-end:var(--rs-unit-x2)}.--item-active:after{content:""}.--item-active:after,.selector{background:var(--rs-color-border-primary);border-radius:calc(var(--rs-radius-medium) - 1px);position:absolute;z-index:var(--rs-z-index-relative)}.selector{--rs-tab-selection-x:0;--rs-tab-selection-y:0;--rs-tab-selection-scale-x:0;--rs-tab-selection-scale-y:0;transform:translate(calc(var(--rs-tab-selection-x) * 1px),calc(var(--rs-tab-selection-y) * 1px)) translateZ(0);transform-origin:0 0}.--selector-hidden{visibility:hidden}.--selector-animated{transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:transform,height,width;will-change:transform,height,width}.control{align-items:center;display:none;inset-block:0;opacity:0;pointer-events:none;position:absolute;transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:opacity,transform;z-index:var(--rs-z-index-relative)}.control.control--active{opacity:1;pointer-events:all}[dir=rtl] .control{transform:scaleX(-1)}.control--next{inset-inline-end:0}.control--prev{inset-inline-start:0}.panel{outline:none}[data-rs-keyboard] .panel:focus{box-shadow:var(--rs-focus-shadow)}.--panel-hidden{display:none}.--scrollable .inner{overflow:auto;overflow:-moz-scrollbars-none;scrollbar-width:none;-ms-overflow-style:none;mask-image:linear-gradient(to right,transparent 0,transparent var(--rs-tabs-mid-l),#000 var(--rs-tabs-stop-l),#000 var(--rs-tabs-stop-r),transparent var(--rs-tabs-mid-r),transparent 100%);transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:--rs-tabs-stop-l,--rs-tabs-stop-r,--rs-tabs-mid-l,--rs-tabs-mid-r}.--scrollable .inner::-webkit-scrollbar{display:none}.--direction-row .inner{white-space:nowrap}.--direction-row .inner:after{bottom:0;height:1px;inset-inline:0}.--direction-row .list{align-items:center;display:inline-flex;flex-wrap:nowrap;vertical-align:top}.--direction-row .--item-active:after{height:2px;inset-inline:0;bottom:0}.--direction-row .selector{bottom:0;height:2px;left:0;width:calc(var(--rs-tab-selection-scale-x) * 1px)}.--direction-row .button{box-sizing:initial;margin:var(--rs-unit-x1) calc(var(--rs-unit-x2) * -1);padding:0 var(--rs-unit-x2)}.--direction-row .buttonContent{justify-content:center;padding:var(--rs-tabs-item-p-v) 0}.--direction-column .inner:after{height:100%;inset-block:0;inset-inline-end:0;width:1px}.--direction-column .list{--rs-tabs-gap:var(--rs-unit-x1);display:flex;flex-direction:column}.--direction-column .item{padding-inline-end:var(--rs-unit-x1)}.--direction-column .--item-active:after{bottom:0}.--direction-column .--item-active:after,.--direction-column .selector{height:100%;inset-inline-end:0;width:2px}.--direction-column .selector{height:calc(var(--rs-tab-selection-scale-y) * 1px);top:0}.--direction-column .button{margin-inline-start:calc(var(--rs-unit-x2) * -1);padding:var(--rs-unit-x2);width:calc(100% + var(--rs-unit-x1))}.--direction-column .buttonContent{justify-content:flex-start}.--variant-borderless .inner:after,.--variant-pills .inner:after,.--variant-pills-elevated .inner:after{content:none}.--variant-pills .button,.--variant-pills-elevated .button{margin:0;padding:0}.--variant-pills .buttonContent,.--variant-pills-elevated .buttonContent{margin:0;padding:var(--rs-tabs-item-p-v) var(--rs-tabs-item-p-h)}@media (hover:hover) and (pointer:fine){.--variant-pills .buttonContent:hover,.--variant-pills-elevated .buttonContent:hover{background:none}}.--variant-pills-elevated .buttonContent{padding:calc(var(--rs-tabs-item-p-v) - var(--rs-unit-x1) / 2) var(--rs-tabs-item-p-h)}.--variant-pills .list,.--variant-pills-elevated .list{--rs-tabs-gap:var(--rs-unit-x1)}.--variant-pills .selector,.--variant-pills-elevated .selector{background-color:var(--rs-color-background-neutral);height:calc(var(--rs-tab-selection-scale-y) * 1px);opacity:.6;width:calc(var(--rs-tab-selection-scale-x) * 1px);z-index:0}.--direction-column.--variant-pills .selector,.--direction-column.--variant-pills-elevated .selector{left:0}.--direction-row.--variant-pills .selector,.--direction-row.--variant-pills-elevated .selector{top:0}.--variant-pills .--item-active:after,.--variant-pills-elevated .--item-active:after{background-color:var(--rs-color-background-neutral);opacity:.6;z-index:0}.--direction-column.--variant-pills .--item-active:after,.--direction-column.--variant-pills-elevated .--item-active:after{width:100%}.--direction-row.--variant-pills .--item-active:after,.--direction-row.--variant-pills-elevated .--item-active:after{height:100%}.--variant-pills-elevated .list{background:var(--rs-color-background-neutral-faded);border:2px solid transparent;border-radius:var(--rs-radius-medium)}.--variant-pills-elevated .--item-active:after,.--variant-pills-elevated .selector{background:var(--rs-color-background-elevation-raised);box-shadow:var(--rs-shadow-raised);box-sizing:border-box;opacity:1}.--size-medium{--rs-tabs-item-p-v:var(--rs-unit-x2);--rs-tabs-item-p-h:var(--rs-unit-x3)}.--size-large{--rs-tabs-item-p-v:var(--rs-unit-x3);--rs-tabs-item-p-h:var(--rs-unit-x4)}.--item-width-equal{max-width:none}.--item-width-equal .inner{flex-wrap:wrap}.--item-width-equal .list{display:flex;overflow:hidden}.--item-width-equal .listItem{flex-basis:0;flex-grow:1;margin:0}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:100%;--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:0px;--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}@media (pointer:fine){.control{display:flex}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:calc(100% - var(--rs-unit-x1) * 4);--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:calc(var(--rs-unit-x1) * 4);--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}}
+@property --rs-tabs-mid-l{syntax:"<length>";initial-value:-24px;inherits:false}@property --rs-tabs-stop-l{syntax:"<length>";initial-value:0;inherits:false}@property --rs-tabs-stop-r{syntax:"<length-percentage>";initial-value:100%;inherits:false}@property --rs-tabs-mid-r{syntax:"<length-percentage>";initial-value:calc(100% + 24px);inherits:false}.root{box-sizing:initial;isolation:isolate;max-width:100%}.list,.root{position:relative}.list{--rs-tabs-gap:var(--rs-unit-x6);gap:var(--rs-tabs-gap)}.inner:after{background-color:var(--rs-color-border-neutral-faded);content:"";position:absolute;z-index:2}.listItem{flex-shrink:0;position:relative}.button{overflow:hidden;position:relative;z-index:1;-webkit-tap-highlight-color:transparent}.button,.buttonContent{border-radius:var(--rs-radius-medium);width:100%}.buttonContent{align-items:center;box-sizing:border-box;display:flex}.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}[data-rs-keyboard] .radio:focus+.buttonContent{box-shadow:var(--rs-focus-inset-shadow)}.icon:not(:last-child){margin-inline-end:var(--rs-unit-x2)}.item{color:var(--rs-color-foreground-neutral)}@media (hover:hover) and (pointer:fine){.item:not(.--item-disabled,.--item-active):hover{color:var(--rs-color-foreground-neutral-faded)}}.item.--item-disabled{color:var(--rs-color-foreground-disabled)}.--item-active:after{content:""}.--item-active:after,.selector{background:var(--rs-color-border-primary);border-radius:calc(var(--rs-radius-medium) - 1px);position:absolute;z-index:var(--rs-z-index-relative)}.selector{--rs-tab-selection-x:0;--rs-tab-selection-y:0;--rs-tab-selection-scale-x:0;--rs-tab-selection-scale-y:0;transform:translate(calc(var(--rs-tab-selection-x) * 1px),calc(var(--rs-tab-selection-y) * 1px)) translateZ(0);transform-origin:0 0}.--selector-hidden{visibility:hidden}.--selector-animated{transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:transform,height,width;will-change:transform,height,width}.control{align-items:center;display:none;inset-block:0;opacity:0;pointer-events:none;position:absolute;transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:opacity,transform;z-index:var(--rs-z-index-relative)}.control.control--active{opacity:1;pointer-events:all}[dir=rtl] .control{transform:scaleX(-1)}.control--next{inset-inline-end:0}.control--prev{inset-inline-start:0}.panel{outline:none}[data-rs-keyboard] .panel:focus{box-shadow:var(--rs-focus-shadow)}.--panel-hidden{display:none}.--scrollable .inner{overflow:auto;overflow:-moz-scrollbars-none;scrollbar-width:none;-ms-overflow-style:none;mask-image:linear-gradient(to right,transparent 0,transparent var(--rs-tabs-mid-l),#000 var(--rs-tabs-stop-l),#000 var(--rs-tabs-stop-r),transparent var(--rs-tabs-mid-r),transparent 100%);transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:--rs-tabs-stop-l,--rs-tabs-stop-r,--rs-tabs-mid-l,--rs-tabs-mid-r}.--scrollable .inner::-webkit-scrollbar{display:none}.--direction-row .inner{white-space:nowrap}.--direction-row .inner:after{bottom:0;height:1px;inset-inline:0}.--direction-row .list{align-items:center;display:inline-flex;flex-wrap:nowrap;vertical-align:top}.--direction-row .--item-active:after{height:2px;inset-inline:0;bottom:0}.--direction-row .selector{bottom:0;height:2px;left:0;width:calc(var(--rs-tab-selection-scale-x) * 1px)}.--direction-row .button{box-sizing:initial;margin:var(--rs-unit-x1) calc(var(--rs-unit-x2) * -1);padding:0 var(--rs-unit-x2)}.--direction-row .buttonContent{justify-content:center;padding:var(--rs-tabs-item-p-v) 0}.--direction-column .inner:after{height:100%;inset-block:0;inset-inline-end:0;width:1px}.--direction-column .list{--rs-tabs-gap:var(--rs-unit-x1);display:flex;flex-direction:column}.--direction-column .item{padding-inline-end:var(--rs-unit-x1)}.--direction-column .--item-active:after{bottom:0}.--direction-column .--item-active:after,.--direction-column .selector{height:100%;inset-inline-end:0;width:2px}.--direction-column .selector{height:calc(var(--rs-tab-selection-scale-y) * 1px);top:0}.--direction-column .button{margin-inline-start:calc(var(--rs-unit-x2) * -1);padding:var(--rs-unit-x2);width:calc(100% + var(--rs-unit-x1))}.--direction-column .buttonContent{justify-content:flex-start}.--variant-borderless .inner:after,.--variant-pills .inner:after,.--variant-pills-elevated .inner:after{content:none}.--variant-pills .button,.--variant-pills-elevated .button{margin:0;padding:0}.--variant-pills .buttonContent,.--variant-pills-elevated .buttonContent{margin:0;padding:var(--rs-tabs-item-p-v) var(--rs-tabs-item-p-h)}@media (hover:hover) and (pointer:fine){.--variant-pills .buttonContent:hover,.--variant-pills-elevated .buttonContent:hover{background:none}}.--variant-pills-elevated .buttonContent{padding:calc(var(--rs-tabs-item-p-v) - var(--rs-unit-x1) / 2) var(--rs-tabs-item-p-h)}.--variant-pills .list,.--variant-pills-elevated .list{--rs-tabs-gap:var(--rs-unit-x1)}.--variant-pills .selector,.--variant-pills-elevated .selector{background-color:var(--rs-color-background-neutral);height:calc(var(--rs-tab-selection-scale-y) * 1px);opacity:.6;width:calc(var(--rs-tab-selection-scale-x) * 1px);z-index:0}.--direction-column.--variant-pills .selector,.--direction-column.--variant-pills-elevated .selector{left:0}.--direction-row.--variant-pills .selector,.--direction-row.--variant-pills-elevated .selector{top:0}.--variant-pills .--item-active:after,.--variant-pills-elevated .--item-active:after{background-color:var(--rs-color-background-neutral);opacity:.6;z-index:0}.--direction-column.--variant-pills .--item-active:after,.--direction-column.--variant-pills-elevated .--item-active:after{width:100%}.--direction-row.--variant-pills .--item-active:after,.--direction-row.--variant-pills-elevated .--item-active:after{height:100%}.--variant-pills-elevated .list{background:var(--rs-color-background-neutral-faded);border:2px solid transparent;border-radius:var(--rs-radius-medium)}.--variant-pills-elevated .--item-active:after,.--variant-pills-elevated .selector{background:var(--rs-color-background-elevation-raised);box-shadow:var(--rs-shadow-raised);box-sizing:border-box;opacity:1}.--size-medium{--rs-tabs-item-p-v:var(--rs-unit-x2);--rs-tabs-item-p-h:var(--rs-unit-x3)}.--size-large{--rs-tabs-item-p-v:var(--rs-unit-x3);--rs-tabs-item-p-h:var(--rs-unit-x4)}.--item-width-equal{max-width:none}.--item-width-equal .inner{flex-wrap:wrap}.--item-width-equal .list{display:flex;overflow:hidden}.--item-width-equal .listItem{flex-basis:0;flex-grow:1;margin:0}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:100%;--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:0px;--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}@media (pointer:fine){.control{display:flex}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:calc(100% - var(--rs-unit-x1) * 4);--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:calc(var(--rs-unit-x1) * 4);--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}}

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

@@ -9,45 +9,69 @@ export type SelectionState = {
     status: "idle" | "prepared" | "animated";
 };
 export type ItemProps = {
+    /** Value of the item used for the active item selection */
     value: string;
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Icon of the item at the start position */
     icon?: IconProps["svg"];
+    /** Link of the item, renders as an anchor element */
     href?: string;
+    /** Disable the item user interaction */
     disabled?: boolean;
+    /** Additional attributes for the item element */
     attributes?: G.Attributes<"div">;
 };
 export type ListProps = {
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Additional classname for the list element */
     className?: G.ClassName;
+    /** Additional attributes for the list element */
     attributes?: G.Attributes<"div">;
 };
 export type PanelProps = {
+    /** Value of the panel used for the active panel selection */
     value: string;
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Additional classname for the panel element */
     className?: G.ClassName;
+    /** Additional attributes for the panel element */
     attributes?: G.Attributes<"div">;
 };
 export type BaseProps = {
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Direction of the tab buttons */
     direction?: "column" | "row";
+    /** Equal width for the tab buttons */
     itemWidth?: "equal";
+    /** Render variant for component */
     variant?: "bordered" | "borderless" | "pills" | "pills-elevated";
+    /** Component size */
     size?: "medium" | "large";
+    /** Name of the tab buttons group when used as a form control */
     name?: string;
+    /** Callback when the active tab value changes */
     onChange?: (args: {
         value: string;
         name?: string;
     }) => void;
 };
 export type ControlledProps = BaseProps & {
+    /** Value of the active tab, enables controlled mode */
     value?: string;
+    /** Default value of the active tab, enables uncontrolled mode */
     defaultValue?: never;
 };
 export type PrivateControlledProps = ControlledProps & {
     onSilentChange: BaseProps["onChange"];
 };
 export type UncontrolledProps = BaseProps & {
+    /** Value of the active tab, enables controlled mode */
     value?: never;
+    /** Default value of the active tab, enables uncontrolled mode */
     defaultValue?: string;
 };
 export type Props = ControlledProps | UncontrolledProps;

package/dist/components/Tabs/TabsItem.js

@@ -16,7 +16,7 @@ const TabsItem = React.forwardRef((props, ref) => {
     const itemRef = React.useRef(null);
     const active = tabsValue === value;
     const visuallySelected = active && selection.status === "idle";
-    const itemClassNames = classNames(s.item, visuallySelected && s["--item-active"]);
+    const itemClassNames = classNames(s.item, visuallySelected && s["--item-active"], disabled && s["--item-disabled"]);
     const isFormControl = !!name;
     const tabAttributes = {
         role: "tab",
@@ -60,7 +60,7 @@ const TabsItem = React.forwardRef((props, ref) => {
             return;
         updateRefs();
     }, [active, updateRefs]);
-    return (_jsx("div", { ...attributes, className: itemClassNames, ref: itemRef, role: "presentation", children: _jsxs(Actionable, { ref: ref, href: href, insetFocus: true, disabled: disabled, onClick: !name ? handleChange : undefined, className: [s.button, disabled && s["button--disabled"]], as: name ? "label" : undefined, attributes: {
+    return (_jsx("div", { ...attributes, className: itemClassNames, ref: itemRef, role: "presentation", children: _jsxs(Actionable, { ref: ref, href: href, insetFocus: true, disabled: disabled, onClick: !name ? handleChange : undefined, className: s.button, as: name ? "label" : undefined, attributes: {
                 ...(!isFormControl && tabAttributes),
                 "aria-controls": panelId,
                 id: buttonId,

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

@@ -60,17 +60,17 @@ export const variant = {
     name: "variant",
     render: () => (<Example>
 			<Example.Item title="variant: default">
-				<Tabs>
+				<Tabs defaultValue="0">
 					<Tabs.List>
-						<Tabs.Item value="1">Long item 2</Tabs.Item>
-						<Tabs.Item value="0">Item 1</Tabs.Item>
+						<Tabs.Item value="0">Long item 2</Tabs.Item>
+						<Tabs.Item value="1">Item 1</Tabs.Item>
 						<Tabs.Item value="2">Very long item 3</Tabs.Item>
 					</Tabs.List>
 				</Tabs>
 			</Example.Item>
 
 			<Example.Item title="variant: pills">
-				<Tabs variant="pills">
+				<Tabs variant="pills" defaultValue="0">
 					<Tabs.List>
 						<Tabs.Item value="0">Item 1</Tabs.Item>
 						<Tabs.Item value="1">Long item 2</Tabs.Item>
@@ -80,7 +80,7 @@ export const variant = {
 			</Example.Item>
 
 			<Example.Item title="variant: pills-elevated">
-				<Tabs variant="pills-elevated">
+				<Tabs variant="pills-elevated" defaultValue="0">
 					<Tabs.List>
 						<Tabs.Item value="0">Item 1</Tabs.Item>
 						<Tabs.Item value="1">Long item 2</Tabs.Item>
@@ -90,7 +90,7 @@ export const variant = {
 			</Example.Item>
 
 			<Example.Item title="variant: borderless">
-				<Tabs variant="borderless">
+				<Tabs variant="borderless" defaultValue="0">
 					<Tabs.List>
 						<Tabs.Item value="0">Item 1</Tabs.Item>
 						<Tabs.Item value="1">Long item 2</Tabs.Item>

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

@@ -2,16 +2,28 @@ import type React from "react";
 import type * as G from "../../types/global";
 export type Variant = "title-1" | "title-2" | "title-3" | "title-4" | "title-5" | "title-6" | "featured-1" | "featured-2" | "featured-3" | "body-1" | "body-2" | "body-3" | "caption-1" | "caption-2";
 export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
+    /** Text render variant */
     variant?: G.Responsive<Variant>;
+    /** Text font weight */
     weight?: G.Responsive<"regular" | "medium" | "bold">;
+    /** Render monospace font */
     monospace?: boolean;
+    /** Text color, based on the color tokens */
     color?: "neutral" | "neutral-faded" | "critical" | "warning" | "positive" | "primary" | "disabled";
+    /** Text alignment */
     align?: G.Responsive<"start" | "center" | "end">;
+    /** CSS wrapping style */
     wrap?: "balance";
+    /** CSS text decoration style */
     decoration?: "line-through";
+    /** Maximum number of lines to render, used for text truncation */
     maxLines?: number;
+    /** Render as a different html tag */
     as?: TagName;
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<TagName>;
 };

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

@@ -3,18 +3,35 @@ import type * as G from "../../types/global";
 import { type FormControlProps } from "../FormControl";
 type Size = G.Responsive<"medium" | "large" | "xlarge">;
 type BaseProps = {
+    /** Unique identifier for the text area */
     id?: string;
+    /** Name of the text area input element */
     name: string;
+    /** Component size
+     * @default "medium"
+     */
     size?: Size;
+    /** Component render variant
+     * @default "outline"
+     */
     variant?: "outline" | "faded" | "headless";
+    /** Disable the text area user interaction */
     disabled?: boolean;
+    /** Placeholder text when there is no value */
     placeholder?: string;
+    /** Callback when the text area value changes */
     onChange?: G.ChangeHandler<string, React.ChangeEvent<HTMLTextAreaElement>>;
+    /** Callback when the text area is focused */
     onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    /** Callback when the text area is blurred */
     onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
+    /** Additional attributes for the input element */
     inputAttributes?: G.Attributes<"textarea">;
+    /** Enable or disable the text area resizing, supports auto-sizing */
     resize?: "none" | "auto";
 } & Pick<FormControlProps, "hasError">;
 export type ControlledProps = BaseProps & {

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

@@ -4,34 +4,63 @@ import type { FormControlProps } from "../FormControl";
 import type { IconProps } from "../Icon";
 type Size = G.Responsive<"small" | "medium" | "large" | "xlarge">;
 export type BaseProps = {
+    /** Unique identifier for the text field */
     id?: string;
+    /** Name of the text field input element */
     name: string;
+    /** Component size
+     * @default "medium"
+     */
     size?: Size;
+    /** Disable the text field user interaction */
     disabled?: boolean;
+    /** Render in the focused state */
     focused?: boolean;
+    /** Enable multiline text field wrapping */
     multiline?: boolean;
+    /** Change border radius to be fully rounded */
     rounded?: boolean;
+    /** Placeholder text when there is no value */
     placeholder?: string;
+    /** Icon of the text field at the start position */
     icon?: SlotProps["icon"];
+    /** Icon of the text field at the end position */
     endIcon?: SlotProps["icon"];
+    /** Node for inserting content before the text field value */
     startSlot?: SlotProps["slot"];
+    /** Node for inserting content after the text field value */
     endSlot?: SlotProps["slot"];
+    /** Node for inserting text content before the text field value */
     prefix?: React.ReactNode;
+    /** Node for inserting textcontent after the text field value */
     suffix?: React.ReactNode;
+    /** Component render variant
+     * @default "outline"
+     */
     variant?: "outline" | "faded" | "headless";
+    /** Callback when the text field value changes */
     onChange?: G.ChangeHandler<string>;
+    /** Callback when the text field is focused */
     onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** Callback when the text field is blurred */
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
+    /** Additional attributes for the input element */
     inputAttributes?: G.Attributes<"input">;
 } & Pick<FormControlProps, "hasError">;
 export type ControlledProps = BaseProps & {
+    /** Value of the text field, enables controlled mode */
     value: string;
+    /** Default value of the text field, enables uncontrolled mode */
     defaultValue?: never;
 };
 export type UncontrolledProps = BaseProps & {
+    /** Value of the text field, enables controlled mode */
     value?: never;
+    /** Default value of the text field, enables uncontrolled mode */
     defaultValue?: string;
 };
 export type Props = ControlledProps | UncontrolledProps;

package/dist/components/Theme/Theme.js

@@ -45,7 +45,10 @@ export const PrivateTheme = (props) => {
             return;
         const themeRootEl = getRootThemeEl(scopeRef?.current);
         const hasColorModeApplied = themeRootEl.getAttribute("data-rs-color-mode");
-        themeRootEl.setAttribute("data-rs-theme", getThemeAttribute(usedTheme));
+        const themeAttribute = getThemeAttribute(usedTheme);
+        // Checking in case there is no global theme applied
+        if (themeAttribute)
+            themeRootEl.setAttribute("data-rs-theme", themeAttribute);
         if (!hasColorModeApplied)
             themeRootEl.setAttribute("data-rs-color-mode", usedColorMode);
         return () => {

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

@@ -13,10 +13,15 @@ export type ThemeContextData = {
     setRootTheme: (theme: G.Theme) => void;
 };
 export type Props = {
+    /** Name of the theme to use, enables controlled mode */
     name?: G.Theme;
+    /** Default name of the theme to use, enables uncontrolled mode */
     defaultName?: G.Theme;
+    /** Color mode to use */
     colorMode?: G.ColorMode | "inverted";
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Node for inserting children */
     children?: React.ReactNode;
 };
 export type PrivateProps = Props & {

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

@@ -1,13 +1,20 @@
 import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"ul">;
 };
 export type ItemProps = {
+    /** Node for rendering custom item markers */
     markerSlot?: React.ReactNode | null;
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Additional classname for the item element */
     className?: G.ClassName;
+    /** Additional attributes for the item element */
     attributes?: G.Attributes<"li">;
 };