reshaped 3.9.0-canary.20 → 3.9.0-canary.24

package/dist/components/Actionable/Actionable.module.css

@@ -1 +1 @@
-@layer rs.reset{.root{background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;isolation:isolate;line-height:inherit;margin:0;padding:0;position:relative;text-align:initial;text-decoration:none;vertical-align:top;-webkit-tap-highlight-color:transparent}}.touch{height:100%;inset:50%;min-height:24px;min-width:24px;position:absolute;transform:translate(-50%,-50%);width:100%}.root:focus{outline:none}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-shadow-focus);outline:none;z-index:var(--rs-z-index-relative)}[data-rs-keyboard] .root.--inset:focus{box-shadow:var(--rs-shadow-focus-inset)}[data-rs-keyboard] .root.--disabled-focus-ring:focus,[data-rs-keyboard] .root.--radius-inherit:focus{box-shadow:none}[data-rs-keyboard] .root.--radius-inherit:focus>*{box-shadow:var(--rs-shadow-focus)}[data-rs-keyboard] .root.--radius-inherit.--inset:focus>*{box-shadow:var(--rs-shadow-focus-inset)}[role=button].root,button.root{cursor:pointer;user-select:none}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.root.--full-width{width:100%}
+@layer rs.reset{.root{background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;isolation:isolate;line-height:inherit;margin:0;padding:0;position:relative;text-align:initial;text-decoration:none;vertical-align:top;-webkit-tap-highlight-color:transparent}}.touch{height:100%;inset:50%;min-height:24px;min-width:24px;position:absolute;transform:translate(-50%,-50%);width:100%}.root:focus{outline:none}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-shadow-focus);outline:none;z-index:var(--rs-z-index-relative)}[data-rs-keyboard] .root.--inset:focus{box-shadow:var(--rs-shadow-focus-inset)}[data-rs-keyboard] .root.--disabled-focus-ring:focus,[data-rs-keyboard] .root.--radius-inherit:focus{box-shadow:none}[data-rs-keyboard] .root.--radius-inherit:focus>*{box-shadow:var(--rs-shadow-focus)}[data-rs-keyboard] .root.--radius-inherit.--inset:focus>*{box-shadow:var(--rs-shadow-focus-inset)}[role=button].root,button.root{cursor:pointer;user-select:none}label.root:has([data-rs-hidden-input]:focus){box-shadow:var(--rs-shadow-focus);z-index:var(--rs-z-index-relative)}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.root.--full-width{width:100%}

package/dist/components/Badge/Badge.js

@@ -7,7 +7,7 @@ import IconClose from "../../icons/Close.js";
 import { classNames } from "../../utilities/props.js";
 import s from "./Badge.module.css";
 const Badge = forwardRef((props, ref) => {
-    const { children, color, rounded, size = "medium", icon, endIcon, variant, hidden, highlighted, href, onClick, onDismiss, dismissAriaLabel, className, attributes, } = props;
+    const { children, color, rounded, size = "medium", icon, endIcon, variant, hidden, highlighted, href, onClick, onDismiss, dismissAriaLabel, className, attributes, as, } = props;
     const isActionable = !!(onClick || href);
     const iconSize = size === "small" ? 3 : 4;
     const rootClassName = classNames(s.root, className, rounded && s["--rounded"], hidden && s["--hidden"], size && s[`--size-${size}`], color && s[`--color-${color}`], variant && s[`--variant-${variant}`], isActionable && s["--actionable"], highlighted && s["--highlighted"]);
@@ -15,7 +15,7 @@ const Badge = forwardRef((props, ref) => {
         e.stopPropagation();
         onDismiss?.();
     };
-    return (_jsxs(Actionable, { onClick: onClick, href: href, className: rootClassName, attributes: attributes, ref: ref, touchHitbox: true, children: [icon && _jsx(Icon, { svg: icon, autoWidth: true, size: iconSize, className: s.icon }), children && (_jsx(Text, { variant: size === "large" ? "body-3" : "caption-1", weight: "medium", attributes: {
+    return (_jsxs(Actionable, { onClick: onClick, href: href, className: rootClassName, attributes: attributes, ref: ref, as: as, touchHitbox: true, children: [icon && _jsx(Icon, { svg: icon, autoWidth: true, size: iconSize, className: s.icon }), children && (_jsx(Text, { variant: size === "large" ? "body-3" : "caption-1", weight: "medium", attributes: {
                     "aria-hidden": hidden ? "true" : undefined,
                 }, children: children })), endIcon && _jsx(Icon, { svg: endIcon, autoWidth: true, size: iconSize, className: s.icon }), onDismiss && (_jsx(Actionable, { onClick: hnadleDismiss, className: s.dismiss, as: "span", attributes: { "aria-label": dismissAriaLabel }, touchHitbox: true, children: _jsx(Icon, { svg: IconClose, size: iconSize }) }))] }));
 });

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

@@ -1 +1 @@
-.root{--rs-badge-border-color:transparent;align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);box-shadow:0 0 0 1px var(--rs-badge-border-color) inset;box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-height:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));min-width:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity;vertical-align:top}.root:empty{height:var(--rs-badge-empty-size);min-height:auto;min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.icon:only-child{margin-inline:calc(var(--rs-unit-x1) * -1)}.dismiss{border-radius:var(--rs-radius-small);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--highlighted{opacity:.8}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{--rs-badge-border-color:var(--rs-color-border-neutral);background:none}.root.--color-positive{background:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{--rs-badge-border-color:var(--rs-color-border-positive-faded);background:none;color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{--rs-badge-border-color:var(--rs-color-border-critical-faded);background:none;color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{--rs-badge-border-color:var(--rs-color-border-warning-faded);background:none;color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{--rs-badge-border-color:var(--rs-color-border-primary-faded);background:none;color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:calc(var(--rs-unit-x1) / 2);--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);user-select:none;z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}
+.root{--rs-badge-border-color:transparent;align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);box-shadow:0 0 0 1px var(--rs-badge-border-color) inset;box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-height:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));min-width:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity,box-shadow,background-color;vertical-align:top}.root:empty{height:var(--rs-badge-empty-size);min-height:auto;min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.icon:only-child{margin-inline:calc(var(--rs-unit-x1) * -1)}.dismiss{border-radius:var(--rs-radius-small);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--highlighted{opacity:.8}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{--rs-badge-border-color:var(--rs-color-border-neutral);background:none}.root.--color-positive{background:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{--rs-badge-border-color:var(--rs-color-border-positive-faded);background:none;color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{--rs-badge-border-color:var(--rs-color-border-critical-faded);background:none;color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{--rs-badge-border-color:var(--rs-color-border-warning-faded);background:none;color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{--rs-badge-border-color:var(--rs-color-border-primary-faded);background:none;color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:calc(var(--rs-unit-x1) / 2);--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);user-select:none;z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}

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

@@ -21,7 +21,7 @@ type BaseProps = {
     hidden?: boolean;
     /** Additional classname for the root element */
     className?: G.ClassName;
-} & Pick<ActionableProps, "href" | "onClick" | "attributes">;
+} & Pick<ActionableProps, "href" | "onClick" | "attributes" | "as">;
 type WithChildren = BaseProps & {
     /** Node for inserting text or other content */
     children?: React.ReactNode;

package/dist/components/Flyout/utilities/flyout.js

@@ -77,7 +77,6 @@ const flyout = (args) => {
             left: window.scrollX,
             top: window.scrollY,
         };
-        console.log("visualContainerBounds", calculated.position, visualContainerBounds, calculated.boundaries);
         return isFullyVisible({
             flyoutBounds: calculated.boundaries,
             visualContainerBounds,

package/dist/components/HiddenInput/HiddenInput.js

@@ -12,8 +12,7 @@ const HiddenInput = (props) => {
     const formControl = useFormControl();
     const name = checkboxGroup?.name ?? radioGroup?.name ?? props.name;
     const disabled = formControl?.disabled ?? props.disabled ?? checkboxGroup?.disabled ?? radioGroup?.disabled;
-    const checked = (value && checkboxGroup?.value?.includes(value)) ||
-        (value && radioGroup?.value === value) ||
+    const checked = (value && (checkboxGroup?.value?.includes(value) ?? radioGroup?.value === value)) ||
         props.checked;
     const defaultChecked = checkboxGroup ? undefined : props.defaultChecked;
     const handleChange = (event) => {
@@ -28,7 +27,7 @@ const HiddenInput = (props) => {
         if (radioGroup?.onChange)
             radioGroup.onChange(changeArgs);
     };
-    return (_jsx("input", { ...attributes, className: rootClassNames, type: type, name: name, value: value, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus || attributes?.onFocus, onBlur: onBlur || attributes?.onBlur }));
+    return (_jsx("input", { ...attributes, className: rootClassNames, type: type, name: name, value: value, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus || attributes?.onFocus, onBlur: onBlur || attributes?.onBlur, "data-rs-hidden-input": true }));
 };
 HiddenInput.displayName = "HiddenInput";
 export default HiddenInput;

package/dist/components/Modal/Modal.js

@@ -7,7 +7,6 @@ import useElementId from "../../hooks/useElementId.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 import useResponsiveClientValue from "../../hooks/useResponsiveClientValue.js";
 import { resolveMixin } from "../../styles/mixin.js";
-import { enableUserSelect, disableUserSelect } from "../../utilities/dom/index.js";
 import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
 import { enableScroll, disableScroll } from "../../utilities/scroll/index.js";
 import s from "./Modal.module.css";
@@ -90,7 +89,6 @@ const Modal = (props) => {
         // Prevent the drag handling when browser is trying to navigate to a previous page
         if (clientPosition === "start" && e.targetTouches[0].clientX < DRAG_EDGE_BOUNDARY)
             return;
-        disableUserSelect();
         disableScroll();
         setDragging(true);
     };
@@ -108,7 +106,6 @@ const Modal = (props) => {
         if (!dragging)
             return;
         const handleDragEnd = () => {
-            enableUserSelect();
             enableScroll();
             setDragging(false);
             // Close only when dragging in the closing direction

package/dist/components/ScrollArea/ScrollArea.js

@@ -4,8 +4,8 @@ import React, { forwardRef } from "react";
 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 { disableScroll, enableScroll } from "../../utilities/scroll/index.js";
 import s from "./ScrollArea.module.css";
 const ScrollAreaBar = (props) => {
     const { ratio, position, vertical, onThumbMove } = props;
@@ -41,14 +41,14 @@ const ScrollAreaBar = (props) => {
         const total = vertical ? elBar.scrollHeight : elBar.scrollWidth;
         onThumbMoveRef.current?.({ value: diff / total, type: "relative" });
     }, [vertical, dragging, onThumbMoveRef]);
-    const handleDragEnd = React.useCallback(() => {
-        setDragging(false);
-        enableUserSelect();
-    }, []);
     const handleDragStart = () => {
         setDragging(true);
-        disableUserSelect();
+        disableScroll();
     };
+    const handleDragEnd = React.useCallback(() => {
+        setDragging(false);
+        enableScroll();
+    }, []);
     React.useEffect(() => {
         if (!dragging)
             return;

package/dist/components/Slider/SliderControlled.js

@@ -5,7 +5,7 @@ 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 { triggerChangeEvent } from "../../utilities/dom/index.js";
 import { classNames } from "../../utilities/props.js";
 import { disableScroll, enableScroll } from "../../utilities/scroll/index.js";
 import s from "./Slider.module.css";
@@ -144,20 +144,21 @@ const SliderControlled = (props) => {
             handleMinChange(nextValue);
         if (closestId === maxId)
             handleMaxChange(nextValue);
-        disableUserSelect();
-        disableScroll();
         setDraggingId(closestId);
     };
     const handleMinDragStart = (e) => {
         if (disabled)
             return;
+        console.log("handleMinDragStart");
         e.stopPropagation();
+        disableScroll();
         setDraggingId(minId);
     };
     const handleMaxDragStart = (e) => {
         if (disabled)
             return;
         e.stopPropagation();
+        disableScroll();
         setDraggingId(maxId);
     };
     const handleDragStop = React.useCallback(() => {
@@ -167,7 +168,6 @@ const SliderControlled = (props) => {
         if (draggingId === maxId) {
             handleMaxChange(maxValue, { commit: true });
         }
-        enableUserSelect();
         enableScroll();
         setDraggingId(null);
     }, [minValue, maxValue, handleMinChange, handleMaxChange, draggingId, minId, maxId]);

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{--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{--rs-tabs-focus-ring-inset:calc(var(--rs-unit-x2) * -1);position:relative;width:100%;z-index:1;-webkit-tap-highlight-color:transparent;border-radius:var(--rs-radius-medium)}[data-rs-keyboard] .button:focus:after{border-radius:var(--rs-radius-medium);box-shadow:var(--rs-shadow-focus-inset);content:"";inset:0;inset-inline:var(--rs-tabs-focus-ring-inset);pointer-events:none;position:absolute}.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)}.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-block:var(--rs-unit-x1)}.--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{--rs-tabs-focus-ring-inset:0;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{--rs-tabs-focus-ring-inset:0;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}.--item-width-equal .button{--rs-tabs-focus-ring-inset: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{--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{--rs-tabs-focus-ring-inset:calc(var(--rs-unit-x2) * -1);position:relative;width:100%;z-index:1;-webkit-tap-highlight-color:transparent;border-radius:var(--rs-radius-medium)}[data-rs-keyboard] .button:focus:after{border-radius:var(--rs-radius-medium);box-shadow:var(--rs-shadow-focus-inset);content:"";inset:0;inset-inline:var(--rs-tabs-focus-ring-inset);pointer-events:none;position:absolute}.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)}.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-block:var(--rs-unit-x1)}.--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{--rs-tabs-focus-ring-inset:0;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{--rs-tabs-focus-ring-inset:0;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;min-width:0}.--item-width-equal .buttonText{overflow:hidden;text-overflow:ellipsis}.--item-width-equal .button{--rs-tabs-focus-ring-inset: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/hooks/_private/useDrag.js

@@ -4,7 +4,6 @@ import * as keys from "../../constants/keys.js";
 import useHandlerRef from "../useHandlerRef.js";
 import useHotkeys from "../useHotkeys.js";
 import useToggle from "../useToggle.js";
-import { disableUserSelect, enableUserSelect } from "../../utilities/dom/index.js";
 import { disableScroll, enableScroll } from "../../utilities/scroll/index.js";
 const useDrag = (cb, options) => {
     const { disabled, containerRef: passedContainerRef, orientation = "all" } = options || {};
@@ -76,7 +75,6 @@ const useDrag = (cb, options) => {
         const handleDragEnd = () => {
             triggerCompensationRef.current = { x: 0, y: 0 };
             toggle.deactivate();
-            enableUserSelect();
             enableScroll();
         };
         document.addEventListener("touchmove", handleDrag, { passive: true });
@@ -103,7 +101,6 @@ const useDrag = (cb, options) => {
                 y: resolvedEvent.clientY - triggerRect.y,
             };
             toggle.activate();
-            disableUserSelect();
             disableScroll();
         };
         triggerEl.addEventListener("touchstart", handleStart, { passive: true });

package/dist/utilities/dom/index.d.ts

@@ -1,5 +1,4 @@
 export { getRectFromCoordinates } from "./flyout";
 export { getShadowRoot } from "./shadowDom";
-export { enableUserSelect, disableUserSelect } from "./userSelect";
 export { findParent, findClosestScrollableContainer, findClosestPositionContainer } from "./find";
 export { triggerChangeEvent } from "./event";

package/dist/utilities/dom/index.js

@@ -1,5 +1,4 @@
 export { getRectFromCoordinates } from "./flyout.js";
 export { getShadowRoot } from "./shadowDom.js";
-export { enableUserSelect, disableUserSelect } from "./userSelect.js";
 export { findParent, findClosestScrollableContainer, findClosestPositionContainer } from "./find.js";
 export { triggerChangeEvent } from "./event.js";

package/dist/utilities/scroll/disable.js

@@ -4,10 +4,12 @@ export const preventDefault = (e) => e.preventDefault();
  * without locking the page with overflow
  */
 export const disableScroll = () => {
-    window.addEventListener("wheel", preventDefault);
-    window.addEventListener("touchmove", preventDefault);
+    window.addEventListener("wheel", preventDefault, { passive: false });
+    window.addEventListener("touchmove", preventDefault, { passive: false });
+    document.body.style.userSelect = "none";
 };
 export const enableScroll = () => {
     window.removeEventListener("wheel", preventDefault);
     window.removeEventListener("touchmove", preventDefault);
+    document.body.style.userSelect = "";
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reshaped",
   "description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-  "version": "3.9.0-canary.20",
+  "version": "3.9.0-canary.24",
   "license": "MIT",
   "email": "hello@reshaped.so",
   "homepage": "https://reshaped.so",

package/dist/utilities/dom/userSelect.d.ts

@@ -1,2 +0,0 @@
-export declare const disableUserSelect: () => void;
-export declare const enableUserSelect: () => void;

package/dist/utilities/dom/userSelect.js

@@ -1,6 +0,0 @@
-export const disableUserSelect = () => {
-    document.body.style.userSelect = "none";
-};
-export const enableUserSelect = () => {
-    document.body.style.userSelect = "";
-};