reshaped 3.9.0-canary.1 → 3.9.0-canary.10

package/dist/components/Radio/Radio.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
-import HiddenInput from "../_private/HiddenInput/index.js";
-import Text from "../Text/index.js";
-import { useRadioGroup } from "../RadioGroup/index.js";
 import { useFormControl } from "../FormControl/index.js";
+import HiddenInput from "../HiddenInput/index.js";
+import { useRadioGroup } from "../RadioGroup/index.js";
+import Text from "../Text/index.js";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Radio.module.css";
 const Radio = (props) => {
     const { children, value, onChange, onFocus, onBlur, size = "medium", className, attributes, inputAttributes, } = props;
@@ -16,17 +16,7 @@ const Radio = (props) => {
     const defaultChecked = radioGroup ? undefined : props.defaultChecked;
     const name = radioGroup ? radioGroup.name : props.name;
     const rootClassName = classNames(s.root, className, hasError && s["--error"], disabled && s["--disabled"], size && responsiveClassNames(s, "--size", size));
-    const handleChange = (event) => {
-        if (!name)
-            return;
-        const { checked } = event.target;
-        const changeArgs = { name, value, checked, event };
-        if (onChange)
-            onChange(changeArgs);
-        if (radioGroup?.onChange)
-            radioGroup.onChange(changeArgs);
-    };
-    return (_jsxs("label", { ...attributes, className: rootClassName, children: [_jsxs("span", { className: s.field, children: [_jsx(HiddenInput, { className: s.input, type: "radio", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, attributes: inputAttributes }), _jsx("div", { className: s.decorator })] }), children && (_jsx(Text, { as: "span", variant: responsivePropDependency(size, (size) => {
+    return (_jsxs("label", { ...attributes, className: rootClassName, children: [_jsxs("span", { className: s.field, children: [_jsx(HiddenInput, { className: s.input, type: "radio", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, attributes: inputAttributes }), _jsx("div", { className: s.decorator })] }), children && (_jsx(Text, { as: "span", variant: responsivePropDependency(size, (size) => {
                     if (size === "large")
                         return "body-2";
                     if (size === "small")

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

@@ -1,6 +1,6 @@
+import type { RadioProps } from "../Radio";
 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;

package/dist/components/Reshaped/Reshaped.js

@@ -1,15 +1,15 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
 import { GlobalColorMode, PrivateTheme } from "../Theme/index.js";
-import { ToastProvider } from "../Toast/index.js";
 import { useGlobalColorMode } from "../Theme/useTheme.js";
+import { ToastProvider } from "../Toast/index.js";
 import { SingletonEnvironmentContext, useSingletonEnvironment, } from "../../hooks/_private/useSingletonEnvironment.js";
-import { SingletonKeyboardModeProvider } from "../../hooks/_private/useSingletonKeyboardMode.js";
 import { SingletonHotkeysProvider } from "../../hooks/_private/useSingletonHotkeys.js";
-import "./Reshaped.css";
+import { SingletonKeyboardModeProvider } from "../../hooks/_private/useSingletonKeyboardMode.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Reshaped.module.css";
+import "./Reshaped.css";
 const ReshapedInner = (props) => {
     const { children, defaultRTL, defaultViewport = "s", toastOptions } = props;
     const rtlState = useSingletonEnvironment(defaultRTL);

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

@@ -1,6 +1,6 @@
-import type React from "react";
 import type { GlobalColorModeProps, ThemeProps } from "../Theme";
 import type { ToastProviderProps } from "../Toast";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
     /** Node for inserting children */

package/dist/components/Resizable/Resizable.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
 import View from "../View/index.js";
-import { ResizableHandleContext } from "./ResizableHandle.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Resizable.module.css";
+import { ResizableHandleContext } from "./ResizableHandle.js";
 export const ResizableItem = () => null;
 const PrivateResizableItem = React.forwardRef((props, ref) => {
     const { children, defaultSize, minSize, maxSize } = props;

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

@@ -1,6 +1,6 @@
-import type React from "react";
 import type { ViewProps } from "../View";
 import type { UseDragCallbackArgs } from "../../hooks/_private/useDrag";
+import type React from "react";
 export type Props = {
     /** Component render variant */
     variant?: "bordered" | "borderless";

package/dist/components/Resizable/ResizableHandle.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
 import View from "../View/index.js";
 import useDrag from "../../hooks/_private/useDrag.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Resizable.module.css";
 export const ResizableHandleContext = React.createContext({});
 const ResizableHandle = (props) => {

package/dist/components/Scrim/Scrim.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import View from "../View/index.js";
 import { classNames } from "../../utilities/props.js";
 import s from "./Scrim.module.css";
 const Scrim = (props) => {
-    const { children, backgroundSlot, position = "cover", attributes, className, scrimClassName, } = props;
-    const rootClassNames = classNames(s.root, !!backgroundSlot && s["--with-background"], position && s[`--position-${position}`], className);
+    const { children, backgroundSlot, position = "cover", paddingInline, paddingBlock, padding, borderRadius, attributes, className, scrimClassName, } = props;
+    const rootClassNames = classNames(s.root, position && s[`--position-${position}`], className);
     const scrimClassNames = classNames(s.scrim, scrimClassName);
-    return (_jsxs("div", { ...attributes, className: rootClassNames, children: [backgroundSlot, _jsx("div", { className: scrimClassNames, children: _jsx("div", { className: s.content, children: children }) })] }));
+    return (_jsxs(View, { borderRadius: borderRadius, attributes: attributes, className: rootClassNames, position: backgroundSlot ? "relative" : "absolute", inset: backgroundSlot ? undefined : 0, overflow: "hidden", children: [backgroundSlot, _jsx("div", { className: scrimClassNames, children: _jsx(View, { paddingInline: paddingInline ?? padding ?? 4, paddingBlock: paddingBlock ?? padding ?? 3, zIndex: 5, height: ["start", "end"].includes(position) ? "100%" : undefined, width: ["top", "bottom", "cover"].includes(position) ? "100%" : undefined, textAlign: position === "cover" ? "center" : undefined, children: children }) })] }));
 };
 Scrim.displayName = "Scrim";
 export default Scrim;

package/dist/components/Scrim/Scrim.module.css

@@ -1 +1 @@
-.root,.scrim{inset:0;position:absolute}.root{--rs-overlay-gradient:rgba(var(--rs-color-rgb-black),0%),rgba(var(--rs-color-rgb-black),0.52%),rgba(var(--rs-color-rgb-black),2.13%),rgba(var(--rs-color-rgb-black),4.9%),rgba(var(--rs-color-rgb-black),8.84%),rgba(var(--rs-color-rgb-black),13.91%),rgba(var(--rs-color-rgb-black),19.91%),rgba(var(--rs-color-rgb-black),26.56%),rgba(var(--rs-color-rgb-black),33.44%),rgba(var(--rs-color-rgb-black),40.09%),rgba(var(--rs-color-rgb-black),46.09%),rgba(var(--rs-color-rgb-black),51.16%),rgba(var(--rs-color-rgb-black),55.1%),rgba(var(--rs-color-rgb-black),57.87%),rgba(var(--rs-color-rgb-black),59.48%),rgba(var(--rs-color-rgb-black),60%);pointer-events:none}.scrim{color:var(--rs-color-white);padding:var(--rs-unit-x3) var(--rs-unit-x4);transform:translateZ(0)}.content{pointer-events:all;position:relative;z-index:5}.--position-cover .scrim{align-items:center;display:flex;justify-content:center}.--position-cover .scrim:after{background-color:var(--rs-color-black);content:"";inset:0;opacity:.5;position:absolute}.--position-cover .content{text-align:center}.--position-bottom .content,.--position-cover .content,.--position-top .content{width:100%}.--position-end .content,.--position-start .content{height:100%}.--position-top .scrim{background:linear-gradient(to top,var(--rs-overlay-gradient));inset-block-end:auto;padding-block-end:calc(var(--rs-unit-x10) * 2)}.--position-bottom .scrim{background:linear-gradient(to bottom,var(--rs-overlay-gradient));inset-block-start:auto;padding-block-start:calc(var(--rs-unit-x10) * 2)}.--position-start .scrim{background:linear-gradient(to left,var(--rs-overlay-gradient));inset-inline-end:auto;padding-inline-end:calc(var(--rs-unit-x10) * 2);width:auto}.--position-end .scrim,[dir=rtl] .--position-start .scrim{background:linear-gradient(to right,var(--rs-overlay-gradient))}.--position-end .scrim{inset-inline-start:auto;padding-inline-start:calc(var(--rs-unit-x10) * 2);width:auto}[dir=rtl] .--position-end .scrim{background:linear-gradient(to left,var(--rs-overlay-gradient))}.--with-background{position:relative}
+.root{--rs-scrim-gradient-padding:calc(var(--rs-unit-x1) * 16);--rs-scrim-gradient:rgba(var(--rs-color-rgb-black),0%),rgba(var(--rs-color-rgb-black),0.52%),rgba(var(--rs-color-rgb-black),2.13%),rgba(var(--rs-color-rgb-black),4.9%),rgba(var(--rs-color-rgb-black),8.84%),rgba(var(--rs-color-rgb-black),13.91%),rgba(var(--rs-color-rgb-black),19.91%),rgba(var(--rs-color-rgb-black),26.56%),rgba(var(--rs-color-rgb-black),33.44%),rgba(var(--rs-color-rgb-black),40.09%),rgba(var(--rs-color-rgb-black),46.09%),rgba(var(--rs-color-rgb-black),51.16%),rgba(var(--rs-color-rgb-black),55.1%),rgba(var(--rs-color-rgb-black),57.87%),rgba(var(--rs-color-rgb-black),59.48%),rgba(var(--rs-color-rgb-black),60%);pointer-events:none}.scrim{color:var(--rs-color-white);inset:0;position:absolute;transform:translateZ(0)}.--position-cover .scrim{align-items:center;display:flex;justify-content:center}.--position-cover .scrim:after{background-color:var(--rs-color-black);content:"";inset:0;opacity:.5;position:absolute}.--position-top .scrim{background:linear-gradient(to top,var(--rs-scrim-gradient));inset-block-end:auto;padding-block-end:var(--rs-scrim-gradient-padding)}.--position-bottom .scrim{background:linear-gradient(to bottom,var(--rs-scrim-gradient));inset-block-start:auto;padding-block-start:var(--rs-scrim-gradient-padding)}.--position-start .scrim{background:linear-gradient(to left,var(--rs-scrim-gradient));inset-inline-end:auto;padding-inline-end:var(--rs-scrim-gradient-padding);width:auto}.--position-end .scrim,[dir=rtl] .--position-start .scrim{background:linear-gradient(to right,var(--rs-scrim-gradient))}.--position-end .scrim{inset-inline-start:auto;padding-inline-start:var(--rs-scrim-gradient-padding);width:auto}[dir=rtl] .--position-end .scrim{background:linear-gradient(to left,var(--rs-scrim-gradient))}

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

@@ -1,4 +1,5 @@
 import React from "react";
+import type { ViewProps } from "../View";
 import type * as G from "../../types/global";
 export type Props = {
     /** Node for inserting content */
@@ -13,4 +14,4 @@ export type Props = {
     className?: G.ClassName;
     /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
-};
+} & Pick<ViewProps, "paddingInline" | "paddingBlock" | "padding" | "borderRadius">;

package/dist/components/ScrollArea/ScrollArea.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { forwardRef } from "react";
-import { classNames } from "../../utilities/props.js";
-import { disableUserSelect, enableUserSelect } from "../../utilities/dom/index.js";
-import { resolveMixin } from "../../styles/mixin.js";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import { resolveMixin } from "../../styles/mixin.js";
+import { disableUserSelect, enableUserSelect } from "../../utilities/dom/index.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./ScrollArea.module.css";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
 const ScrollAreaBar = (props) => {
     const { ratio, position, vertical, onThumbMove } = props;
     const onThumbMoveRef = useHandlerRef(onThumbMove);
@@ -109,7 +109,7 @@ const ScrollArea = forwardRef((props, ref) => {
         const scrollableEl = scrollableRef.current;
         if (!scrollableEl)
             return;
-        const value = scrollableEl.clientWidth * args.value;
+        const value = scrollableEl.scrollWidth * args.value;
         if (args.type === "absolute") {
             scrollableEl.scrollLeft = value;
         }

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

@@ -1,9 +1,9 @@
 import React from "react";
-import type * as G from "../../types/global";
-import type { IconProps } from "../Icon";
+import { DropdownMenuProps } from "../DropdownMenu";
 import type { ActionableProps } from "../Actionable";
+import type { IconProps } from "../Icon";
 import type { MenuItemProps } from "../MenuItem";
-import { DropdownMenuProps } from "../DropdownMenu";
+import type * as G from "../../types/global";
 type Size = G.Responsive<"small" | "medium" | "large" | "xlarge">;
 type RenderSingleValue = (args: {
     value: string;

package/dist/components/Select/SelectCustomControlled.js

@@ -3,13 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import DropdownMenu from "../DropdownMenu/index.js";
 import Icon from "../Icon/index.js";
+import View from "../View/index.js";
 import CheckmarkIcon from "../../icons/Checkmark.js";
 import { responsivePropDependency } from "../../utilities/props.js";
+import SelectGroup from "./SelectGroup.js";
+import SelectOption from "./SelectOption.js";
 import SelectRoot from "./SelectRoot.js";
 import SelectTrigger from "./SelectTrigger.js";
-import SelectOption from "./SelectOption.js";
-import SelectGroup from "./SelectGroup.js";
-import View from "../View/index.js";
 const SelectCustomControlled = (props) => {
     const { children, value, name, placeholder, size, multiple, width = "trigger", position, fallbackPositions, positionRef, renderValue: passedRenderValue, } = props;
     const initialFocusRef = React.useRef(null);
@@ -72,6 +72,9 @@ const SelectCustomControlled = (props) => {
     const resolvedChildren = traverseOptionList(children);
     const handleKeyDown = (e) => {
         const key = e.key;
+        // Ignore search when user is typing, e.g. if there is a filter input inside the dropdown
+        if (document.activeElement?.tagName === "INPUT")
+            return;
         // Only handle alphanumeric and space characters for type-ahead
         if (key.length !== 1 || !key.match(/[\w\s]/))
             return;

package/dist/components/Select/SelectEndContent.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Icon from "../Icon/index.js";
-import { responsivePropDependency } from "../../utilities/props.js";
 import IconArrow from "../../icons/ChevronVertical.js";
+import { responsivePropDependency } from "../../utilities/props.js";
 import s from "./Select.module.css";
 const SelectEndContent = (props) => {
     const { disabled, size } = props;

package/dist/components/Select/SelectGroup.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import View from "../View/index.js";
 import Text from "../Text/index.js";
+import View from "../View/index.js";
 import s from "./Select.module.css";
 const SelectGroup = (props) => {
     const { label, children } = props;

package/dist/components/Select/SelectNative.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "../../utilities/props.js";
-import SelectStartContent from "./SelectStartContent.js";
-import SelectEndContent from "./SelectEndContent.js";
 import s from "./Select.module.css";
+import SelectEndContent from "./SelectEndContent.js";
+import SelectStartContent from "./SelectStartContent.js";
 const SelectNative = (props) => {
     const { startSlot, icon, size, inputAttributes, onFocus, onBlur, disabled, name, value, defaultValue, onChange, onClick, placeholder, id, children, } = props;
     const [empty, setEmpty] = React.useState(value === undefined ? !defaultValue : !value);

package/dist/components/Select/SelectRoot.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import useElementId from "../../hooks/useElementId.js";
 import { useFormControl } from "../FormControl/index.js";
+import useElementId from "../../hooks/useElementId.js";
 import { classNames, responsiveClassNames } from "../../utilities/props.js";
 import s from "./Select.module.css";
 const SelectRoot = (passedProps) => {

package/dist/components/Select/SelectTrigger.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Actionable from "../Actionable/index.js";
 import Text from "../Text/index.js";
-import SelectStartContent from "./SelectStartContent.js";
 import s from "./Select.module.css";
 import SelectEndContent from "./SelectEndContent.js";
+import SelectStartContent from "./SelectStartContent.js";
 const SelectTrigger = (props) => {
     const { children, disabled, onClick, onFocus, onBlur, inputAttributes, startSlot, icon, size, placeholder, value, name, id, } = props;
     return (_jsxs(_Fragment, { children: [_jsxs(Actionable, { className: s.input, disabled: disabled, disableFocusRing: true, onClick: onClick, attributes: {

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

@@ -1,7 +1,7 @@
 import Select from "./Select";
 import SelectCustom from "./SelectCustom";
-import SelectOption from "./SelectOption";
 import SelectGroup from "./SelectGroup";
+import SelectOption from "./SelectOption";
 declare const SelectRoot: typeof Select & {
     Custom: typeof SelectCustom;
     Option: typeof SelectOption;

package/dist/components/Select/index.js

@@ -1,7 +1,7 @@
 import Select from "./Select.js";
 import SelectCustom from "./SelectCustom.js";
-import SelectOption from "./SelectOption.js";
 import SelectGroup from "./SelectGroup.js";
+import SelectOption from "./SelectOption.js";
 const SelectRoot = Select;
 SelectRoot.Custom = SelectCustom;
 SelectRoot.Option = SelectOption;

package/dist/components/Skeleton/Skeleton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../utilities/props.js";
 import View from "../View/index.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Skeleton.module.css";
 const Skeleton = (props) => {
     const { borderRadius = "small", width, height, className, attributes } = props;

package/dist/components/Slider/SliderControlled.js

@@ -1,16 +1,16 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
+import { useFormControl } from "../FormControl/index.js";
+import useElementId from "../../hooks/useElementId.js";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
+import useRTL from "../../hooks/useRTL.js";
 import { enableUserSelect, disableUserSelect, triggerChangeEvent } from "../../utilities/dom/index.js";
+import { classNames } from "../../utilities/props.js";
 import { disableScroll, enableScroll } from "../../utilities/scroll/index.js";
-import useRTL from "../../hooks/useRTL.js";
-import useElementId from "../../hooks/useElementId.js";
-import { useFormControl } from "../FormControl/index.js";
-import SliderThumb from "./SliderThumb.js";
-import { applyStepToValue, getDragCoord } from "./Slider.utilities.js";
 import s from "./Slider.module.css";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
+import { applyStepToValue, getDragCoord } from "./Slider.utilities.js";
+import SliderThumb from "./SliderThumb.js";
 const THUMB_SIZE = 16;
 const SliderControlled = (props) => {
     const { name, range, max, min, step = 1, onChange, onChangeCommit, renderValue, className, attributes, orientation = "horizontal", } = props;

package/dist/components/Slider/SliderThumb.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
-import Theme from "../Theme/index.js";
 import Text from "../Text/index.js";
-import { getPrecision } from "./Slider.utilities.js";
+import Theme from "../Theme/index.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Slider.module.css";
+import { getPrecision } from "./Slider.utilities.js";
 const SliderThumb = React.forwardRef((props, ref) => {
     const { name, value, disabled, active, position, max, min, step, onChange, onDragStart, renderValue, tooltipRef, inputRef, orientation, } = props;
     const id = React.useId();

package/dist/components/Stepper/Stepper.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { responsivePropDependency } from "../../utilities/props.js";
 import Expandable from "../_private/Expandable/index.js";
-import View from "../View/index.js";
-import Text from "../Text/index.js";
 import Divider from "../Divider/index.js";
-import Icon from "../Icon/index.js";
 import Hidden from "../Hidden/index.js";
+import Icon from "../Icon/index.js";
+import Text from "../Text/index.js";
+import View from "../View/index.js";
 import IconCheckmark from "../../icons/Checkmark.js";
+import { responsivePropDependency } from "../../utilities/props.js";
 import s from "./Stepper.module.css";
 const StepperItemPrivate = (props) => {
     const { title, subtitle, children, direction, className, attributes, labelDisplay, step, completed, active, last, } = props;

package/dist/components/Switch/Switch.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import { useFormControl } from "../FormControl/index.js";
 import Text from "../Text/index.js";
 import useElementId from "../../hooks/useElementId.js";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Switch.module.css";
 const Switch = (props) => {
     const { children, name, checked, size = "medium", reversed, defaultChecked, onChange, onFocus, onBlur, className, attributes, } = props;

package/dist/components/Table/Table.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { isValidElement } from "react";
-import { classNames, responsiveVariables } from "../../utilities/props.js";
+import useFadeSide from "../../hooks/_private/useFadeSide.js";
 import { resolveMixin } from "../../styles/mixin.js";
+import { classNames, responsiveVariables } from "../../utilities/props.js";
 import s from "./Table.module.css";
-import useFadeSide from "../../hooks/_private/useFadeSide.js";
 const TableCellPrivate = (props) => {
     const { minWidth, rowSpan, colSpan, align, verticalAlign, tagName: TagName, padding, paddingInline, paddingBlock, children, className, attributes, } = props;
     const width = props.width === "auto" ? "0px" : props.width;

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;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-shadow-focus-inset)}.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-shadow-focus)}.--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}.--item-width-equal .listItem{flex-basis:0;flex-grow:1;margin:0;overflow:hidden}.--item-width-equal .buttonText{overflow:hidden;text-overflow:ellipsis}.--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{--rs-tabs-gap:var(--rs-unit-x6);box-sizing:initial;isolation:isolate;max-width:100%;position:relative}.inner:after{background-color:var(--rs-color-border-neutral-faded);content:"";position:absolute;z-index:2}.list{gap:var(--rs-tabs-gap)}.list,.listItem{position:relative}.listItem{flex-shrink:0}.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)}.icon:not(:last-child){margin-inline-end:var(--rs-unit-x2)}[data-rs-keyboard] .radio:focus+.buttonContent{box-shadow:var(--rs-shadow-focus-inset)}.item{color:var(--rs-color-foreground-neutral)}.item:after{content:"";opacity:0;pointer-events:none}.item--active.item:after{opacity:1}.item.item--disabled{color:var(--rs-color-foreground-disabled)}.root:not(:has(.selector)) .item:after{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.item:after,.selector{background:var(--rs-color-border-primary);border-radius:var(--rs-radius-medium);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.selector--hidden{visibility:hidden}.selector.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.control--next{inset-inline-end:0}.control.control--prev{inset-inline-start:0}.panel{outline:none}[data-rs-keyboard] .panel:focus{box-shadow:var(--rs-shadow-focus)}.panel.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:after{inset-inline:0;bottom:0;height:2px}.--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{--rs-tabs-gap:var(--rs-unit-x1)}.--direction-column .inner:after{height:100%;inset-block:0;inset-inline-end:0;width:1px}.--direction-column .list{display:flex;flex-direction:column}.--direction-column .item{padding-inline-end:var(--rs-unit-x1)}.--direction-column .item:after{inset-block:0;inset-inline-end:0;width:2px}.--direction-column .selector{height:calc(var(--rs-tab-selection-scale-y) * 1px);inset-inline-end:0;top:0;width:2px}.--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,.--variant-pills-elevated{--rs-tabs-gap:var(--rs-unit-x1)}.--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)}.--variant-pills .selector,.--variant-pills-elevated .selector{background-color:var(--rs-color-background-neutral);height:calc(var(--rs-tab-selection-scale-y) * 1px);width:calc(var(--rs-tab-selection-scale-x) * 1px);z-index:0}.--variant-pills .item:after,.--variant-pills-elevated .item:after{background-color:var(--rs-color-background-neutral);z-index:0}.--variant-pills-elevated.--direction-column .item:after,.--variant-pills.--direction-column .item:after{width:100%}.--variant-pills-elevated.--direction-column .selector,.--variant-pills.--direction-column .selector{left:0}.--variant-pills-elevated.--direction-row .item:after,.--variant-pills.--direction-row .item:after{height:100%}.--variant-pills-elevated.--direction-row .selector,.--variant-pills.--direction-row .selector{top:0}.--variant-pills .item--active:after,.--variant-pills .selector{opacity:.6}.--variant-pills-elevated .list{background:var(--rs-color-background-neutral-faded);border:2px solid transparent;border-radius:var(--rs-radius-medium)}.--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-elevated .item:after,.--variant-pills-elevated .selector{background:var(--rs-color-background-elevation-raised);border-radius:calc(var(--rs-radius-medium) - 1px);box-shadow:var(--rs-shadow-raised);box-sizing:border-box}.--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}.--item-width-equal .listItem{flex-basis:0;flex-grow:1;margin:0;overflow:hidden}.--item-width-equal .buttonText{overflow:hidden;text-overflow:ellipsis}.--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

@@ -1,5 +1,5 @@
-import type React from "react";
 import type { IconProps } from "../Icon";
+import type React from "react";
 import type * as G from "../../types/global";
 export type SelectionState = {
     left: number;
@@ -53,6 +53,8 @@ export type BaseProps = {
     size?: "medium" | "large";
     /** Name of the tab buttons group when used as a form control */
     name?: string;
+    /** Disable the animation of the tab button selection */
+    disableSelectionAnimation?: boolean;
     /** Callback when the active tab value changes */
     onChange?: (args: {
         value: string;
@@ -75,7 +77,7 @@ export type UncontrolledProps = BaseProps & {
     defaultValue?: string;
 };
 export type Props = ControlledProps | UncontrolledProps;
-export type Context = Pick<BaseProps, "itemWidth" | "onChange" | "variant" | "name" | "direction"> & {
+export type Context = Pick<BaseProps, "itemWidth" | "onChange" | "variant" | "name" | "direction" | "disableSelectionAnimation"> & {
     size: NonNullable<BaseProps["size"]>;
     value?: string;
     setDefaultValue: (value: string) => void;

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

@@ -12,6 +12,7 @@ export declare const useTabs: (value?: string) => {
         name?: string;
     }) => void) | undefined;
     itemWidth?: "equal" | undefined;
+    disableSelectionAnimation?: boolean | undefined;
     size: NonNullable<T.BaseProps["size"]>;
     value?: string;
     setDefaultValue: (value: string) => void;

package/dist/components/Tabs/TabsControlled.js

@@ -4,7 +4,7 @@ import React from "react";
 import useElementId from "../../hooks/useElementId.js";
 import { TabsProvider } from "./TabsContext.js";
 const TabsControlled = (props) => {
-    const { children, value, onChange, onSilentChange, itemWidth, variant, name, direction = "row", size = "medium", } = props;
+    const { children, value, onChange, onSilentChange, itemWidth, variant, name, disableSelectionAnimation, direction = "row", size = "medium", } = props;
     const id = useElementId();
     const elActiveRef = React.useRef(null);
     // eslint-disable-next-line react-hooks/refs
@@ -38,6 +38,7 @@ const TabsControlled = (props) => {
             elScrollableRef,
             selection,
             setSelection,
+            disableSelectionAnimation,
         }, children: children }));
 };
 TabsControlled.displayName = "TabsControlled";

package/dist/components/Tabs/TabsItem.js

@@ -1,22 +1,22 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
-import HiddenInput from "../_private/HiddenInput/index.js";
 import Actionable from "../Actionable/index.js";
+import HiddenInput from "../HiddenInput/index.js";
 import Icon from "../Icon/index.js";
 import Text from "../Text/index.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import { findParent } from "../../utilities/dom/index.js";
-import { useTabs } from "./TabsContext.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Tabs.module.css";
+import { useTabs } from "./TabsContext.js";
 const TabsItem = React.forwardRef((props, ref) => {
     const { value, children, icon, href, disabled, attributes } = props;
     const { onChange, panelId, buttonId, name, size, value: tabsValue, selection, elActiveRef, elPrevActiveRef, elScrollableRef, } = useTabs(value);
     const itemRef = React.useRef(null);
     const active = tabsValue === value;
     const visuallySelected = active && selection.status === "idle";
-    const itemClassNames = classNames(s.item, visuallySelected && s["--item-active"], disabled && s["--item-disabled"]);
+    const itemClassNames = classNames(s.item, visuallySelected && s["item--active"], disabled && s["item--disabled"]);
     const isFormControl = !!name;
     const tabAttributes = {
         role: "tab",

package/dist/components/Tabs/TabsList.js

@@ -1,18 +1,18 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
-import useRTL from "../../hooks/useRTL.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import useKeyboardArrowNavigation from "../../hooks/useKeyboardArrowNavigation.js";
-import useFadeSide from "../../hooks/_private/useFadeSide.js";
 import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
-import IconChevronRight from "../../icons/ChevronRight.js";
+import useFadeSide from "../../hooks/_private/useFadeSide.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import useKeyboardArrowNavigation from "../../hooks/useKeyboardArrowNavigation.js";
+import useRTL from "../../hooks/useRTL.js";
 import IconChevronLeft from "../../icons/ChevronLeft.js";
-import TabsItem from "./TabsItem.js";
-import { useTabs } from "./TabsContext.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Tabs.module.css";
+import { useTabs } from "./TabsContext.js";
+import TabsItem from "./TabsItem.js";
 const findParentItem = (el, rootEl) => {
     if (el === rootEl || !el)
         return null;
@@ -22,11 +22,11 @@ const findParentItem = (el, rootEl) => {
 };
 const TabsList = (props) => {
     const { children, className, attributes } = props;
-    const { value, setDefaultValue, itemWidth, variant, name, direction, size, selection, setSelection, elActiveRef, elPrevActiveRef, elScrollableRef, } = useTabs();
+    const { value, setDefaultValue, itemWidth, variant, name, direction, size, selection, setSelection, elActiveRef, elPrevActiveRef, elScrollableRef, disableSelectionAnimation, } = useTabs();
     const [rtl] = useRTL();
     const fadeSide = useFadeSide(elScrollableRef, { disabled: itemWidth === "equal" });
     const rootClassNames = classNames(s.root, size && s[`--size-${size}`], direction && s[`--direction-${direction}`], itemWidth && s[`--item-width-${itemWidth}`], variant && s[`--variant-${variant}`], fadeSide && s["--scrollable"], (fadeSide === "start" || fadeSide === "both") && s["--fade-start"], (fadeSide === "end" || fadeSide === "both") && s["--fade-end"], className);
-    const selectorClassNames = classNames(s.selector, selection.status === "idle" && s["--selector-hidden"], selection.status === "animated" && s["--selector-animated"]);
+    const selectorClassNames = classNames(s.selector, selection.status === "idle" && s["selector--hidden"], selection.status === "animated" && s["selector--animated"]);
     const handleNextClick = () => {
         elScrollableRef.current.scrollBy({
             // Using ceil here since during the second navigation half of the value may be
@@ -79,8 +79,12 @@ const TabsList = (props) => {
         const selectionStyle = getElementSelectionStyle(elPrevActiveRef.current);
         if (!selectionStyle)
             return;
+        if (disableSelectionAnimation) {
+            setSelection({ ...selectionStyle, status: "idle" });
+            return;
+        }
         setSelection({ ...selectionStyle, status: "prepared" });
-    }, [value, getElementSelectionStyle]);
+    }, [value, getElementSelectionStyle, disableSelectionAnimation]);
     useIsomorphicLayoutEffect(() => {
         if (selection.status !== "prepared" || !elActiveRef.current)
             return;
@@ -94,12 +98,12 @@ const TabsList = (props) => {
                                 return null;
                             const props = child.props;
                             return (_jsx("div", { className: s.listItem, "data-rs-tabs-item": true, children: child }, props.value || child.key || index));
-                        }), _jsx("div", { onTransitionEnd: handleTransitionEnd, className: selectorClassNames, style: {
+                        }), !disableSelectionAnimation && (_jsx("div", { onTransitionEnd: handleTransitionEnd, className: selectorClassNames, style: {
                                 "--rs-tab-selection-x": selection.left,
                                 "--rs-tab-selection-y": selection.top,
                                 "--rs-tab-selection-scale-x": selection.scaleX,
                                 "--rs-tab-selection-scale-y": selection.scaleY,
-                            } })] }) }), _jsx(Actionable, { onClick: handlePrevClick, touchHitbox: true, attributes: { "aria-hidden": true, tabIndex: -1 }, className: [
+                            } }))] }) }), _jsx(Actionable, { onClick: handlePrevClick, touchHitbox: true, attributes: { "aria-hidden": true, tabIndex: -1 }, className: [
                     s.control,
                     s["control--prev"],
                     (fadeSide === "start" || fadeSide === "both") && s["control--active"],

package/dist/components/Tabs/TabsPanel.js

@@ -1,17 +1,17 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
 import { getFocusableElements } from "../../utilities/a11y/index.js";
-import { useTabs } from "./TabsContext.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Tabs.module.css";
+import { useTabs } from "./TabsContext.js";
 const TabsPanel = (props) => {
     const { value: panelValue, children, className, attributes } = props;
     const { value, panelId, buttonId } = useTabs(panelValue);
     const [needsTabIndex, setNeedsTabIndex] = React.useState(true);
     const rootRef = React.useRef(null);
     const active = panelValue === value;
-    const panelClassNames = classNames(s.panel, !active && s["--panel-hidden"], className);
+    const panelClassNames = classNames(s.panel, !active && s["panel--hidden"], className);
     React.useEffect(() => {
         const el = rootRef.current;
         if (!el)