reshaped 4.0.3 → 4.1.0

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 Icon from "../../components/Icon";
+import { responsivePropDependency } from "../../utilities/props";
+import IconArrow from "../../icons/ChevronVertical";
 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 Text from "../Text/index.js";
-import View from "../View/index.js";
+import Text from "../../components/Text";
+import View from "../../components/View";
 import s from "./Select.module.css";
 const SelectGroup = (props) => {
     const { label, children } = props;

package/dist/components/Select/SelectNative.js

@@ -2,10 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
-import { responsiveClassNames } from "../../utilities/props.js";
-import { resolveMixin } from "../../styles/mixin.js";
-import SelectEndContent from "./SelectEndContent.js";
-import SelectStartContent from "./SelectStartContent.js";
+import { responsiveClassNames } from "../../utilities/props";
+import { resolveMixin } from "../../styles/mixin";
+import SelectEndContent from "./SelectEndContent";
+import SelectStartContent from "./SelectStartContent";
 import s from "./Select.module.css";
 const SelectNative = (props) => {
     const { startSlot, icon, size = "medium", inputAttributes, disabled, name, value, defaultValue, onChange, onClick, variant = "outline", hasError, className, attributes, placeholder, id, children, } = props;

package/dist/components/Select/SelectOption.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import DropdownMenu from "../DropdownMenu/index.js";
+import DropdownMenu from "../../components/DropdownMenu";
 import s from "./Select.module.css";
 const SelectOption = (props) => {
     const { value, ...menuItemProps } = props;

package/dist/components/Select/SelectStartContent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Icon from "../Icon/index.js";
-import { responsivePropDependency } from "../../utilities/props.js";
+import Icon from "../../components/Icon";
+import { responsivePropDependency } from "../../utilities/props";
 import s from "./Select.module.css";
 const SelectStartContent = (props) => {
     const { startSlot, icon, size } = props;

package/dist/components/Select/SelectTrigger.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "@reshaped/utilities";
-import Actionable from "../Actionable/index.js";
-import Text from "../Text/index.js";
-import { responsiveClassNames } from "../../utilities/props.js";
-import { resolveMixin } from "../../styles/mixin.js";
-import SelectEndContent from "./SelectEndContent.js";
-import SelectStartContent from "./SelectStartContent.js";
+import Actionable from "../../components/Actionable";
+import Text from "../../components/Text";
+import { responsiveClassNames } from "../../utilities/props";
+import { resolveMixin } from "../../styles/mixin";
+import SelectEndContent from "./SelectEndContent";
+import SelectStartContent from "./SelectStartContent";
 import s from "./Select.module.css";
 const SelectTrigger = (props) => {
     const { children, disabled, onClick, attributes, className, variant = "outline", hasError, inputAttributes, triggerAttributes, startSlot, icon, size = "medium", placeholder, value, name, id, } = props;

package/dist/components/Select/index.js

@@ -1,9 +1,9 @@
-import Select from "./Select.js";
-import SelectGroup from "./SelectGroup.js";
-import SelectOption from "./SelectOption.js";
+import Select from "./Select";
+import SelectGroup from "./SelectGroup";
+import SelectOption from "./SelectOption";
 const SelectRoot = Select;
 SelectRoot.Option = SelectOption;
 SelectRoot.Group = SelectGroup;
 SelectRoot.OptionGroup = SelectGroup;
 export default SelectRoot;
-export { default as SelectTrigger } from "./SelectTrigger.js";
+export { default as SelectTrigger } from "./SelectTrigger";

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

@@ -39,12 +39,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.triggerOnly = exports.defaultHandlers = exports.nativeHandlers = exports.nativeOptgroup = exports.nativeRender = exports.testComposition = exports.formControl = exports.fallback = exports.className = exports.disabled = exports.error = exports.renderValue = exports.startSlot = exports.size = exports.variant = exports.multiple = exports.selectedIconPosition = exports.base = void 0;
 const react_1 = __importDefault(require("react"));
 const test_1 = require("storybook/test");
-const Badge_1 = __importDefault(require("../../Badge"));
-const FormControl_1 = __importDefault(require("../../FormControl"));
-const MenuItem_1 = __importDefault(require("../../MenuItem"));
-const Modal_1 = __importDefault(require("../../Modal"));
-const Select_1 = __importStar(require("./.."));
-const Text_1 = __importDefault(require("../../Text"));
+const Badge_1 = __importDefault(require("../../../components/Badge"));
+const FormControl_1 = __importDefault(require("../../../components/FormControl"));
+const MenuItem_1 = __importDefault(require("../../../components/MenuItem"));
+const Modal_1 = __importDefault(require("../../../components/Modal"));
+const Select_1 = __importStar(require("../../../components/Select"));
+const Text_1 = __importDefault(require("../../../components/Text"));
 const useToggle_1 = __importDefault(require("../../../hooks/useToggle"));
 const storybook_1 = require("../../../utilities/storybook");
 const Zap_1 = __importDefault(require("../../../icons/Zap"));

package/dist/components/Skeleton/Skeleton.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "@reshaped/utilities";
-import View from "../View/index.js";
+import View from "../../components/View";
 import s from "./Skeleton.module.css";
 const Skeleton = (props) => {
     const { borderRadius = "small", width, height, className, attributes } = props;
     const rootClassNames = classNames(s.root, className);
-    return (_jsx(View, { backgroundColor: "neutral-faded", width: width, height: height, borderRadius: borderRadius, className: rootClassNames, attributes: attributes }));
+    return (_jsx(View, { backgroundColor: "neutral", width: width, height: height, borderRadius: borderRadius, className: rootClassNames, attributes: attributes }));
 };
 Skeleton.displayName = "Skeleton";
 export default Skeleton;

package/dist/components/Skeleton/Skeleton.module.css

@@ -1 +1 @@
-.root{animation:rs-skeleton-pulse 2.5s ease-in-out infinite;min-height:var(--rs-unit-x5)}@media (prefers-reduced-motion){.root{animation:none}}@keyframes rs-skeleton-pulse{0%{opacity:1}50%{opacity:.6}to{opacity:1}}
+.root{--rs-skeleton-opacity-start:0.5;--rs-skeleton-opacity-end:0.25;animation:rs-skeleton-pulse 2.5s ease-in-out infinite;min-height:var(--rs-unit-x5)}[data-rs-color-mode=dark] .root{--rs-skeleton-opacity-start:0.3;--rs-skeleton-opacity-end:0.2}@media (prefers-reduced-motion){.root{animation:none}}@keyframes rs-skeleton-pulse{0%{opacity:var(--rs-skeleton-opacity-start)}50%{opacity:var(--rs-skeleton-opacity-end)}to{opacity:var(--rs-skeleton-opacity-start)}}

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

@@ -1,5 +1,5 @@
 import type { ClassName } from "@reshaped/utilities";
-import type { ViewProps } from "../View";
+import type { ViewProps } from "../../components/View";
 import type { Attributes } from "../../types/global";
 export type Props = Pick<ViewProps, "width" | "height" | "borderRadius"> & {
     /** Additional classname for the root element */

package/dist/components/Skeleton/index.js

@@ -1 +1 @@
-export { default } from "./Skeleton.js";
+export { default } from "./Skeleton";

package/dist/components/Skeleton/tests/Skeleton.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("./..").SkeletonProps>;
+    component: import("react").FC<import("../../../components/Skeleton").SkeletonProps>;
     parameters: {
         iframe: {
             url: string;

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

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.className = exports.radius = exports.variant = void 0;
 const test_1 = require("storybook/test");
-const Skeleton_1 = __importDefault(require("./.."));
+const Skeleton_1 = __importDefault(require("../../../components/Skeleton"));
 const storybook_1 = require("../../../utilities/storybook");
 exports.default = {
     title: "Components/Skeleton",

package/dist/components/Slider/Slider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import SliderControlled from "./SliderControlled.js";
-import SliderUncontrolled from "./SliderUncontrolled.js";
+import SliderControlled from "./SliderControlled";
+import SliderUncontrolled from "./SliderUncontrolled";
 const Slider = (props) => {
     const { min = 0, max = 100, ...rest } = props;
     if (("value" in props && props.value !== undefined) ||

package/dist/components/Slider/Slider.module.css

@@ -1 +1 @@
-.root{--rs-slider-overflow-gap:var(--rs-unit-x1);--rs-slider-thumb-size:var(--rs-unit-x4);align-items:center;cursor:pointer;display:flex;position:relative;user-select:none;-webkit-tap-highlight-color:transparent}.root:has(.thumb:hover,.thumb--active,.input:focus-visible){overflow:visible}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);position:relative}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);position:absolute}.tooltip{--rs-slider-tooltip-translate:calc(-50% + var(--rs-slider-tooltip-offset, 0px));background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);box-sizing:initial;color:var(--rs-color-foreground-neutral);font-variant-numeric:tabular-nums;min-width:var(--rs-line-height-caption-1);opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);pointer-events:none;text-align:center;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;user-select:none;white-space:nowrap;will-change:transform}.thumb,.thumbs,.tooltip{position:absolute}.thumb:before{background:var(--rs-color-background-primary);border-radius:var(--rs-radius-circular);box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-slider-thumb-size);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-slider-thumb-size)}.thumb:after,.thumb:before{content:"";position:absolute}.thumb:after{cursor:grab;height:var(--rs-unit-x7);width:var(--rs-unit-x7)}.thumb:hover .tooltip{opacity:1}.thumb--active:after,[data-rs-keyboard] .input:focus+.thumb:after{cursor:grabbing}.thumb--active:before,[data-rs-keyboard] .input:focus+.thumb:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.thumb--active .tooltip,[data-rs-keyboard] .input:focus+.thumb .tooltip{opacity:1}[data-rs-keyboard] .input:focus+.thumb:before{box-shadow:var(--rs-outline-shadow)}.--orientation-horizontal{height:var(--rs-slider-thumb-size);margin-inline:calc(var(--rs-slider-overflow-gap) * -1);overflow-x:clip;padding-inline:var(--rs-slider-overflow-gap)}.--orientation-horizontal .bar{height:var(--rs-unit-x1);width:100%}.--orientation-horizontal .selection{height:100%;inset-inline-start:var(--rs-slider-selection-start);width:var(--rs-slider-selection-size)}.--orientation-horizontal .tooltip{bottom:100%;left:50%;transform:translate(var(--rs-slider-tooltip-translate))}.--orientation-horizontal .thumbs{height:100%;inset-inline:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap))}.--orientation-horizontal .thumb{height:100%;inset-inline-start:var(--ts-slider-thumb-position);width:0}.--orientation-horizontal .thumb:after,.--orientation-horizontal .thumb:before{left:0;top:50%;transform:translate(-50%,-50%)}.--orientation-horizontal .input:focus+.thumb .tooltip,.--orientation-horizontal .thumb--active .tooltip,.--orientation-horizontal .thumb:hover .tooltip{transform:translate(var(--rs-slider-tooltip-translate),calc(var(--rs-unit-x1) * -1.5))}.--orientation-vertical{flex-direction:column;height:100%;margin-block:calc(var(--rs-slider-overflow-gap) * -1);overflow-y:clip;padding-block:var(--rs-slider-overflow-gap);width:var(--rs-slider-thumb-size)}.--orientation-vertical .bar{height:100%;width:var(--rs-unit-x1)}.--orientation-vertical .selection{height:var(--rs-slider-selection-size);inset-block-end:var(--rs-slider-selection-start);inset-inline-start:auto;width:100%}.--orientation-vertical .tooltip{inset-inline-start:100%;top:50%;transform:translateY(var(--rs-slider-tooltip-translate))}.--orientation-vertical .thumbs{inset-block:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap));width:100%}.--orientation-vertical .thumb{height:0;inset-block-end:var(--ts-slider-thumb-position);width:100%}.--orientation-vertical .thumb:after,.--orientation-vertical .thumb:before{left:50%;top:0;transform:translate(-50%,-50%)}.--orientation-vertical .input:focus+.thumb .tooltip,.--orientation-vertical .thumb--active .tooltip,.--orientation-vertical .thumb:hover .tooltip{transform:translate(calc(var(--rs-unit-x1) * 1.5),-50%)}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}
+.root{--rs-slider-overflow-gap:var(--rs-unit-x1);--rs-slider-thumb-size:var(--rs-unit-x4);position:relative;display:flex;align-items:center;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}.root:has(.thumb:hover,.thumb--active,.input:focus-visible){overflow:visible}.bar{border-radius:var(--rs-radius-small);background:var(--rs-color-background-neutral);position:relative}.bar,.input{overflow:hidden}.input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.selection{position:absolute;background:var(--rs-color-background-primary)}.tooltip{--rs-slider-tooltip-translate:calc(-50% + var(--rs-slider-tooltip-offset, 0px));min-width:var(--rs-line-height-caption-1);box-sizing:initial;text-align:center;opacity:0;user-select:none;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;color:var(--rs-color-foreground-neutral);background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);border-radius:var(--rs-radius-small);padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);white-space:nowrap;will-change:transform;pointer-events:none;font-variant-numeric:tabular-nums}.thumb,.thumbs,.tooltip{position:absolute}.thumb:before{width:var(--rs-slider-thumb-size);height:var(--rs-slider-thumb-size);border-radius:var(--rs-radius-circular);background:var(--rs-color-background-primary);box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow}.thumb:after,.thumb:before{content:"";position:absolute}.thumb:after{width:var(--rs-unit-x7);height:var(--rs-unit-x7);cursor:grab}.thumb:hover .tooltip{opacity:1}.thumb--active:after,[data-rs-keyboard] .input:focus+.thumb:after{cursor:grabbing}.thumb--active:before,[data-rs-keyboard] .input:focus+.thumb:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.thumb--active .tooltip,[data-rs-keyboard] .input:focus+.thumb .tooltip{opacity:1}[data-rs-keyboard] .input:focus+.thumb:before{box-shadow:var(--rs-outline-shadow)}.--orientation-horizontal{height:var(--rs-slider-thumb-size);overflow-x:clip;margin-inline:calc(var(--rs-slider-overflow-gap) * -1);padding-inline:var(--rs-slider-overflow-gap)}.--orientation-horizontal .bar{height:var(--rs-unit-x1);width:100%}.--orientation-horizontal .selection{height:100%;inset-inline-start:var(--rs-slider-selection-start);width:var(--rs-slider-selection-size)}.--orientation-horizontal .tooltip{bottom:100%;left:50%;transform:translate(var(--rs-slider-tooltip-translate))}.--orientation-horizontal .thumbs{inset-inline:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap));height:100%}.--orientation-horizontal .thumb{width:0;height:100%;inset-inline-start:var(--ts-slider-thumb-position)}.--orientation-horizontal .thumb:after,.--orientation-horizontal .thumb:before{left:0;top:50%;transform:translate(-50%,-50%)}.--orientation-horizontal .input:focus+.thumb .tooltip,.--orientation-horizontal .thumb--active .tooltip,.--orientation-horizontal .thumb:hover .tooltip{transform:translate(var(--rs-slider-tooltip-translate),calc(var(--rs-unit-x1) * -1.5))}.--orientation-vertical{height:100%;width:var(--rs-slider-thumb-size);flex-direction:column;overflow-y:clip;margin-block:calc(var(--rs-slider-overflow-gap) * -1);padding-block:var(--rs-slider-overflow-gap)}.--orientation-vertical .bar{width:var(--rs-unit-x1);height:100%}.--orientation-vertical .selection{width:100%;inset-inline-start:auto;inset-block-end:var(--rs-slider-selection-start);height:var(--rs-slider-selection-size)}.--orientation-vertical .tooltip{top:50%;inset-inline-start:100%;transform:translateY(var(--rs-slider-tooltip-translate))}.--orientation-vertical .thumbs{inset-block:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap));width:100%}.--orientation-vertical .thumb{height:0;width:100%;inset-block-end:var(--ts-slider-thumb-position)}.--orientation-vertical .thumb:after,.--orientation-vertical .thumb:before{top:0;left:50%;transform:translate(-50%,-50%)}.--orientation-vertical .input:focus+.thumb .tooltip,.--orientation-vertical .thumb--active .tooltip,.--orientation-vertical .thumb:hover .tooltip{transform:translate(calc(var(--rs-unit-x1) * 1.5),-50%)}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}

package/dist/components/Slider/SliderControlled.js

@@ -3,12 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
 import { disableScroll, enableScroll } from "@reshaped/utilities/internal";
-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 { applyStepToValue, getDragCoord, triggerChangeEvent } from "./Slider.utilities.js";
-import SliderThumb from "./SliderThumb.js";
+import { useFormControl } from "../../components/FormControl";
+import useElementId from "../../hooks/useElementId";
+import useHandlerRef from "../../hooks/useHandlerRef";
+import useRTL from "../../hooks/useRTL";
+import { applyStepToValue, getDragCoord, triggerChangeEvent } from "./Slider.utilities";
+import SliderThumb from "./SliderThumb";
 import s from "./Slider.module.css";
 const THUMB_SIZE = 16;
 const SliderControlled = (props) => {
@@ -186,7 +186,7 @@ const SliderControlled = (props) => {
         let nextDraggingId = draggingId;
         if (draggingId === minId && nextValue > maxValue)
             nextDraggingId = maxId;
-        if (draggingId === maxId && minValue && nextValue < minValue)
+        if (draggingId === maxId && minValue !== undefined && nextValue < minValue)
             nextDraggingId = minId;
         if (nextDraggingId === minId)
             handleMinChange(nextValue);

package/dist/components/Slider/SliderThumb.js

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

package/dist/components/Slider/SliderUncontrolled.js

@@ -1,16 +1,17 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import SliderControlled from "./SliderControlled.js";
+import SliderControlled from "./SliderControlled";
 const normalizeValue = (value, min, max) => Math.min(Math.max(value, min), max);
 const SliderUncontrolled = (props) => {
     const { min, max, onChange, range } = props;
-    const defaultMinValue = ("defaultMinValue" in props && props.defaultMinValue !== undefined && props.defaultMinValue) ||
-        ("defaultValue" in props && props.defaultValue !== undefined && props.defaultValue) ||
-        min;
-    const defaultMaxValue = ("defaultMaxValue" in props && props.defaultMaxValue !== undefined && props.defaultMaxValue) ||
-        ("defaultValue" in props && props.defaultValue !== undefined && props.defaultValue) ||
-        (range ? max : min);
+    const defaultValue = "defaultValue" in props && props.defaultValue !== undefined ? props.defaultValue : undefined;
+    const defaultMinValue = "defaultMinValue" in props && props.defaultMinValue !== undefined
+        ? props.defaultMinValue
+        : (defaultValue ?? min);
+    const defaultMaxValue = "defaultMaxValue" in props && props.defaultMaxValue !== undefined
+        ? props.defaultMaxValue
+        : (defaultValue ?? (range ? max : min));
     const [minValue, setMinValue] = React.useState(normalizeValue(defaultMinValue, min, max));
     const [maxValue, setMaxValue] = React.useState(normalizeValue(defaultMaxValue, min, max));
     const handleSingleChange = (args) => {

package/dist/components/Slider/index.js

@@ -1 +1 @@
-export { default } from "./Slider.js";
+export { default } from "./Slider";

package/dist/components/Slider/tests/Slider.stories.d.ts

@@ -3,7 +3,7 @@ import React from "react";
 import { Mock } from "storybook/test";
 declare const _default: {
     title: string;
-    component: React.FC<import("./..").SliderProps>;
+    component: React.FC<import("../../../components/Slider").SliderProps>;
     parameters: {
         iframe: {
             url: string;

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

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.testSwipe = exports.testForm = exports.className = exports.rangeValue = exports.rangeDefaultValue = exports.value = exports.defaultValue = exports.renderValue = exports.disabled = exports.step = exports.minMax = exports.orientation = exports.base = void 0;
 const react_1 = __importDefault(require("react"));
 const test_1 = require("storybook/test");
-const Modal_1 = __importDefault(require("../../Modal"));
-const Slider_1 = __importDefault(require("./.."));
-const View_1 = __importDefault(require("../../View"));
+const Modal_1 = __importDefault(require("../../../components/Modal"));
+const Slider_1 = __importDefault(require("../../../components/Slider"));
+const View_1 = __importDefault(require("../../../components/View"));
 const useToggle_1 = __importDefault(require("../../../hooks/useToggle"));
 const storybook_1 = require("../../../utilities/storybook");
 exports.default = {

package/dist/components/Switch/Switch.js

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

package/dist/components/Switch/Switch.module.css

@@ -1 +1 @@
-.root{align-items:center;display:inline-flex;gap:var(--rs-switch-gap);position:relative;vertical-align:top;-webkit-tap-highlight-color:transparent}.root.--reversed{flex-direction:row-reverse}.input{border:0;height:1px;left:0;opacity:0;outline:none;position:absolute;top:0;width:1px}.input:checked+.area{background:var(--rs-color-background-primary);border-color:transparent}.input:checked+.area .thumb{transform:translateX(calc(var(--rs-switch-width) - var(--rs-switch-height)))}[dir=rtl] .input:checked+.area .thumb{transform:translateX(calc(var(--rs-switch-height) - var(--rs-switch-width)))}[data-rs-keyboard] .input:focus+.area{outline:var(--rs-outline);outline-offset:var(--rs-outline-width)}.input[disabled]+.area{background:var(--rs-color-background-disabled);cursor:not-allowed}.input[disabled]+.area .thumb{opacity:.8}.input[disabled]:checked+.area{background:var(--rs-color-background-primary);opacity:.4}.input[disabled]:checked+.area .thumb{opacity:1}.area{align-items:center;background:var(--rs-color-background-neutral);border:2px solid transparent;border-radius:var(--rs-radius-circular);box-sizing:border-box;cursor:pointer;display:flex;height:var(--rs-switch-height);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background,border;width:var(--rs-switch-width)}.hitbox{height:24px;inset-inline:0;position:absolute;top:50%;transform:translateY(-50%)}.thumb{background:var(--rs-color-white);border-radius:var(--rs-radius-circular);box-shadow:var(--rs-shadow-raised);height:calc(var(--rs-switch-height) - var(--rs-unit-x1));transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:transform;width:calc(var(--rs-switch-height) - var(--rs-unit-x1))}.--size-small{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1-5);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}.--size-large{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-1);--rs-switch-font-size:var(--rs-font-size-body-1)}@media (--rs-viewport-m ){.--size-small--m{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1-5);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium--m{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}.--size-large--m{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-1);--rs-switch-font-size:var(--rs-font-size-body-1)}}@media (--rs-viewport-l ){.--size-small--l{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1-5);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium--l{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}.--size-large--l{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-1);--rs-switch-font-size:var(--rs-font-size-body-1)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1-5);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium--xl{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}.--size-large--xl{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-1);--rs-switch-font-size:var(--rs-font-size-body-1)}}
+.root{display:inline-flex;align-items:center;gap:var(--rs-switch-gap);position:relative;vertical-align:top;-webkit-tap-highlight-color:transparent}.root.--reversed{flex-direction:row-reverse}.input{position:absolute;top:0;left:0;width:1px;height:1px;border:0;opacity:0;outline:none}.input:checked+.area{background:var(--rs-color-background-primary);border-color:transparent}.input:checked+.area .thumb{transform:translateX(calc(var(--rs-switch-width) - var(--rs-switch-height)))}[dir=rtl] .input:checked+.area .thumb{transform:translateX(calc(var(--rs-switch-height) - var(--rs-switch-width)))}[data-rs-keyboard] .input:focus+.area{outline:var(--rs-outline);outline-offset:var(--rs-outline-width)}.input[disabled]+.area{cursor:not-allowed;background:var(--rs-color-background-disabled)}.input[disabled]+.area .thumb{opacity:.8}.input[disabled]:checked+.area{background:var(--rs-color-background-primary);opacity:.4}.input[disabled]:checked+.area .thumb{opacity:1}.area{cursor:pointer;border:2px solid transparent;height:var(--rs-switch-height);width:var(--rs-switch-width);border-radius:var(--rs-radius-circular);box-sizing:border-box;display:flex;align-items:center;background:var(--rs-color-background-neutral);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background,border}.hitbox{position:absolute;height:24px;inset-inline:0;top:50%;transform:translateY(-50%)}.thumb{height:calc(var(--rs-switch-height) - var(--rs-unit-x1));width:calc(var(--rs-switch-height) - var(--rs-unit-x1));background:var(--rs-color-white);border-radius:var(--rs-radius-circular);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:transform;box-shadow:var(--rs-shadow-raised)}.--size-small{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1-5);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}.--size-large{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-1);--rs-switch-font-size:var(--rs-font-size-body-1)}@media (--rs-viewport-m ){.--size-small--m{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1-5);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium--m{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}.--size-large--m{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-1);--rs-switch-font-size:var(--rs-font-size-body-1)}}@media (--rs-viewport-l ){.--size-small--l{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1-5);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium--l{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}.--size-large--l{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-1);--rs-switch-font-size:var(--rs-font-size-body-1)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1-5);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium--xl{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}.--size-large--xl{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-1);--rs-switch-font-size:var(--rs-font-size-body-1)}}

package/dist/components/Switch/index.js

@@ -1 +1 @@
-export { default } from "./Switch.js";
+export { default } from "./Switch";

package/dist/components/Switch/tests/Switch.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("./..").SwitchProps>;
+    component: import("react").FC<import("../../../components/Switch").SwitchProps>;
     parameters: {
         iframe: {
             url: string;

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

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.className = exports.disabled = exports.checked = exports.defaultChecked = exports.label = exports.size = void 0;
 const test_1 = require("storybook/test");
-const Switch_1 = __importDefault(require("./.."));
-const View_1 = __importDefault(require("../../View"));
+const Switch_1 = __importDefault(require("../../../components/Switch"));
+const View_1 = __importDefault(require("../../../components/View"));
 const storybook_1 = require("../../../utilities/storybook");
 exports.default = {
     title: "Components/Switch",

package/dist/components/Table/Table.js

@@ -2,9 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { isValidElement } from "react";
 import { classNames } from "@reshaped/utilities";
-import useFadeSide from "../../hooks/_internal/useFadeSide.js";
-import { responsiveVariables } from "../../utilities/props.js";
-import { resolveMixin } from "../../styles/mixin.js";
+import { responsiveVariables } from "../../utilities/props";
+import { resolveMixin } from "../../styles/mixin";
 import s from "./Table.module.css";
 const TableCellPrivate = (props) => {
     const { minWidth, rowSpan, colSpan, align, verticalAlign, tagName: TagName, padding, paddingInline, paddingBlock, children, className, attributes, } = props;
@@ -40,14 +39,12 @@ export const TableHead = (props) => {
 };
 const Table = (props) => {
     const { children, border, columnBorder, className, attributes } = props;
-    const rootRef = React.useRef(null);
-    const fadeSide = useFadeSide(rootRef);
-    const rootClassNames = classNames(s.root, className, border && s["--border-outer"], columnBorder && s["--border-column"], (fadeSide === "start" || fadeSide === "both") && s["--fade-start"], (fadeSide === "end" || fadeSide === "both") && s["--fade-end"]);
+    const rootClassNames = classNames(s.root, className, border && s["--border-outer"], columnBorder && s["--border-column"]);
     const [firstChild] = React.Children.toArray(children);
     const isElement = isValidElement(firstChild);
     const isBody = isElement && firstChild.type === TableBody;
     const isHead = isElement && firstChild.type === TableHead;
-    return (_jsx("div", { ...attributes, className: rootClassNames, ref: rootRef, children: _jsx("table", { className: s.table, children: isBody || isHead ? children : _jsx(TableBody, { children: children }) }) }));
+    return (_jsx("div", { ...attributes, className: rootClassNames, children: _jsx("table", { className: s.table, children: isBody || isHead ? children : _jsx(TableBody, { children: children }) }) }));
 };
 Table.displayName = "Table";
 TableCell.displayName = "TableCell";

package/dist/components/Table/Table.module.css

@@ -1 +1 @@
-@property --rs-table-fade-start{syntax:"<length>";initial-value:0;inherits:false}@property --rs-table-fade-end{syntax:"<length>";initial-value:0;inherits:false}.root{mask-image:linear-gradient(to right,transparent 0,#000 var(--rs-table-fade-start),#000 calc(100% - var(--rs-table-fade-end)),transparent 100%);overflow:auto;transition:var(--rs-duration-fast) var(--rs-easing-decelerate);transition-property:--rs-table-fade-start,--rs-table-fade-end}.table{border-collapse:separate;min-width:100%;overflow:hidden}.row{transition:background-color var(--rs-duration-fast) var(--rs-easing-standard)}.row[tabindex]{cursor:pointer}[data-rs-keyboard] .row:focus{box-shadow:var(--rs-outline-shadow);outline:none;z-index:var(--rs-z-index-relative)}.cell{--rs-table-p-vertical-s:3;--rs-table-p-horizontal-s:4;padding:calc(var(--rs-unit-x1) * var(--rs-table-p-vertical-s)) calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s));text-align:start;vertical-align:top}.cell:not(:last-child){padding-inline-end:0}.head+.body .row:first-child .cell,.row:not(:first-child) .cell{border-top:1px solid var(--rs-color-border-neutral-faded)}.cell--align-start{text-align:start}.cell--align-center{text-align:center}.cell--align-end{text-align:end}.cell--valign-start{vertical-align:top}.cell--valign-center{vertical-align:middle}.cell--valign-end{vertical-align:bottom}.cell--width-auto{white-space:nowrap}.--row-highlighted{background-color:var(--rs-color-background-neutral-highlighted-faded)}.--border-outer .table{border:1px solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-radius-medium)}.--border-column .cell:not(:first-child){border-inline-start:1px solid var(--rs-color-border-neutral-faded)}.--border-column .cell:not(:last-child){padding-inline-end:calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s))}.--fade-start,[dir=rtl] .--fade-end{--rs-table-fade-start:var(--rs-unit-x4)}.--fade-end,[dir=rtl] .--fade-start{--rs-table-fade-end:var(--rs-unit-x4)}
+@property --rs-table-fade-start{syntax:"<length>";initial-value:0;inherits:false}@property --rs-table-fade-end{syntax:"<length>";initial-value:0;inherits:false}.root{--rs-table-fade-size:var(--rs-unit-x8);overflow:auto}@keyframes fade-start{0%{--rs-table-fade-start:0px}to{--rs-table-fade-start:var(--rs-table-fade-size)}}@keyframes fade-end{0%{--rs-table-fade-end:var(--rs-table-fade-size)}to{--rs-table-fade-end:0px}}@supports (animation-timeline:scroll(self inline)){.root{--rs-table-fade-direction:to right;mask-image:linear-gradient(var(--rs-table-fade-direction),transparent 0,rgba(0,0,0,.1) calc(var(--rs-table-fade-start) * .2),rgba(0,0,0,.35) calc(var(--rs-table-fade-start) * .4),rgba(0,0,0,.65) calc(var(--rs-table-fade-start) * .6),rgba(0,0,0,.9) calc(var(--rs-table-fade-start) * .8),#000 var(--rs-table-fade-start),#000 calc(100% - var(--rs-table-fade-end)),rgba(0,0,0,.9) calc(100% - var(--rs-table-fade-end) * .8),rgba(0,0,0,.65) calc(100% - var(--rs-table-fade-end) * .6),rgba(0,0,0,.35) calc(100% - var(--rs-table-fade-end) * .4),rgba(0,0,0,.1) calc(100% - var(--rs-table-fade-end) * .2),transparent 100%);animation-name:fade-start,fade-end;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(self inline),scroll(self inline);animation-range:0 var(--rs-table-fade-size),calc(100% - var(--rs-table-fade-size)) 100%}[dir=rtl] .root{--rs-table-fade-direction:to left}}.table{min-width:100%;border-collapse:separate;overflow:hidden}.row{transition:background-color var(--rs-duration-fast) var(--rs-easing-standard)}.row[tabindex]{cursor:pointer}[data-rs-keyboard] .row:focus{outline:none;z-index:var(--rs-z-index-relative);box-shadow:var(--rs-outline-shadow)}.cell{--rs-table-p-vertical-s:3;--rs-table-p-horizontal-s:4;padding:calc(var(--rs-unit-x1) * var(--rs-table-p-vertical-s)) calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s));text-align:start;vertical-align:top}.cell:not(:last-child){padding-inline-end:0}.head+.body .row:first-child .cell,.row:not(:first-child) .cell{border-top:1px solid var(--rs-color-border-neutral-faded)}.cell--align-start{text-align:start}.cell--align-center{text-align:center}.cell--align-end{text-align:end}.cell--valign-start{vertical-align:top}.cell--valign-center{vertical-align:middle}.cell--valign-end{vertical-align:bottom}.cell--width-auto{white-space:nowrap}.--row-highlighted{background-color:var(--rs-color-background-neutral-highlighted-faded)}.--border-outer .table{border-radius:var(--rs-radius-medium);border:1px solid var(--rs-color-border-neutral-faded)}.--border-column .cell:not(:first-child){border-inline-start:1px solid var(--rs-color-border-neutral-faded)}.--border-column .cell:not(:last-child){padding-inline-end:calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s))}

package/dist/components/Table/index.js

@@ -1,4 +1,4 @@
-import Table, { TableBody, TableCell, TableHead, TableHeading, TableRow } from "./Table.js";
+import Table, { TableBody, TableCell, TableHead, TableHeading, TableRow } from "./Table";
 const TableRoot = Table;
 TableRoot.Cell = TableCell;
 TableRoot.Heading = TableHeading;

package/dist/components/Table/tests/Table.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 declare const _default: {
     title: string;
-    component: React.FC<import("./..").TableProps> & {
+    component: React.FC<import("../../../components/Table").TableProps> & {
         Cell: typeof import("../Table").TableCell;
         Heading: typeof import("../Table").TableHeading;
         Row: typeof import("../Table").TableRow;

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

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.examples = exports.edgeCases = exports.className = exports.tabIndex = exports.tbody = exports.render = exports.rows = exports.border = exports.layout = void 0;
 const react_1 = __importDefault(require("react"));
 const test_1 = require("storybook/test");
-const Card_1 = __importDefault(require("../../Card"));
-const Checkbox_1 = __importDefault(require("../../Checkbox"));
-const Table_1 = __importDefault(require("./.."));
-const View_1 = __importDefault(require("../../View"));
+const Card_1 = __importDefault(require("../../../components/Card"));
+const Checkbox_1 = __importDefault(require("../../../components/Checkbox"));
+const Table_1 = __importDefault(require("../../../components/Table"));
+const View_1 = __importDefault(require("../../../components/View"));
 const storybook_1 = require("../../../utilities/storybook");
 exports.default = {
     title: "Components/Table",
@@ -257,8 +257,8 @@ exports.edgeCases = {
 			<storybook_1.Example.Item title="scroll fade">
 				<Table_1.default>
 					<Table_1.default.Row>
-						<Table_1.default.Heading width="500px">Column 1</Table_1.default.Heading>
-						<Table_1.default.Heading width="500px">Column 2</Table_1.default.Heading>
+						<Table_1.default.Heading minWidth="300px">Column 1</Table_1.default.Heading>
+						<Table_1.default.Heading minWidth="300px">Column 2</Table_1.default.Heading>
 					</Table_1.default.Row>
 					<Table_1.default.Row>
 						<Table_1.default.Cell>Cell 1</Table_1.default.Cell>

package/dist/components/Tabs/Tabs.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import TabsControlled from "./TabsControlled.js";
-import TabsUncontrolled from "./TabsUncontrolled.js";
+import TabsControlled from "./TabsControlled";
+import TabsUncontrolled from "./TabsUncontrolled";
 const Tabs = (props) => {
     const { value } = props;
     if (value !== undefined)

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-x5);--rs-tabs-radius:var(--rs-radius-medium);box-sizing:initial;isolation:isolate;max-width:100%}.inner,.list,.root{position:relative}.list{gap:var(--rs-tabs-gap)}.button{border-radius:var(--rs-tabs-radius);color:var(--rs-color-foreground-neutral);display:block;flex-shrink:0;padding:var(--rs-tabs-item-p-v) var(--rs-tabs-item-p-h);position:relative;z-index:var(--rs-z-index-relative);-webkit-tap-highlight-color:transparent}[data-rs-keyboard] .button:focus:before{border-radius:var(--rs-tabs-radius);content:"";inset:0;outline:var(--rs-outline);pointer-events:none;position:absolute}.button:after{content:"";opacity:0;pointer-events:none}.button--active.button:after{opacity:1}.button.button--disabled{color:var(--rs-color-foreground-disabled)}.buttonContent{align-items:center;display:flex;gap:var(--rs-tabs-icon-gap);justify-content:center;position:relative;z-index:var(--rs-z-index-relative)}.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}.root:not(:has(.selector)) .button:after{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.button:after,.selector{border-radius:var(--rs-tabs-radius);position:absolute;z-index:0}.selector{--rs-tab-selection-x:0;--rs-tab-selection-y:0;--rs-tab-selection-scale-x:0;--rs-tab-selection-scale-y:0;height:calc(var(--rs-tab-selection-scale-y) * 1px);left:0;position:absolute;top:0;transform:translate(calc(var(--rs-tab-selection-x) * 1px),calc(var(--rs-tab-selection-y) * 1px)) translateZ(0);transform-origin:0 0;width:calc(var(--rs-tab-selection-scale-x) * 1px);z-index:0}.selector.selector--hidden{visibility:hidden}.selector.selector--animated{transition:var(--rs-duration-medium) var(--rs-easing-standard);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{outline:var(--rs-outline)}.panel.panel--hidden{display:none}.--direction-row .inner{white-space:nowrap}.--direction-row .list{align-items:center;display:inline-flex;flex-wrap:nowrap;vertical-align:top}.--direction-column{--rs-tabs-gap:var(--rs-unit-x1)}.--direction-column .list{display:flex;flex-direction:column}.--direction-column .buttonContent{justify-content:flex-start}.--variant-bordered .inner:after{background-color:var(--rs-color-border-neutral-faded);content:"";position:absolute;z-index:var(--rs-z-index-relative)}.--variant-bordered.--direction-row .inner:after{height:1px;inset-block-end:0;inset-inline:0}.--variant-bordered.--direction-column .inner:after{inset-block:0;inset-inline-end:0;width:1px}.--variant-bordered .button,.--variant-borderless .button{padding-inline:0}[data-rs-keyboard] .--variant-bordered .button:focus:before,[data-rs-keyboard] .--variant-borderless .button:focus:before{inset-block:var(--rs-unit-x0-5);inset-inline:calc(var(--rs-unit-x1-5) * -1)}.--variant-bordered .button:after,.--variant-bordered .selector,.--variant-borderless .button:after,.--variant-borderless .selector{background:var(--rs-color-border-primary)}.--variant-bordered.--direction-row .button,.--variant-borderless.--direction-row .button{margin-block-end:var(--rs-unit-x1)}.--variant-bordered.--direction-row .button:after,.--variant-borderless.--direction-row .button:after{inset-block-end:calc(var(--rs-unit-x1) * -1);inset-inline:0}.--variant-bordered.--direction-row .selector,.--variant-borderless.--direction-row .selector{inset-block-end:0;inset-block-start:auto}.--variant-bordered.--direction-row .button:after,.--variant-bordered.--direction-row .selector,.--variant-borderless.--direction-row .button:after,.--variant-borderless.--direction-row .selector{height:2px}.--variant-bordered.--direction-column .button:after,.--variant-borderless.--direction-column .button:after{inset-block:0;inset-inline-end:0}[data-rs-keyboard] .--variant-bordered.--direction-column .button:focus:before,[data-rs-keyboard] .--variant-borderless.--direction-column .button:focus:before{inset-inline-end:var(--rs-unit-x2)}.--variant-bordered.--direction-column .selector,.--variant-borderless.--direction-column .selector{inset-inline-end:0;inset-inline-start:auto}.--variant-bordered.--direction-column .button:after,.--variant-bordered.--direction-column .selector,.--variant-borderless.--direction-column .button:after,.--variant-borderless.--direction-column .selector{width:2px}.--variant-pills .button--active:after,.--variant-pills .selector{opacity:.6}.--variant-pills .button:after,.--variant-pills .selector{background-color:var(--rs-color-background-neutral)}.--variant-pills .button:after{inset:0}.--variant-pills-raised .list{background:var(--rs-color-background-neutral-faded);border-radius:var(--rs-radius-medium)}.--variant-pills-raised .button--active:before,.--variant-pills-raised .selector:before{background:var(--rs-color-background-elevation-raised);border:1px solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-radius-medium);box-sizing:border-box;content:"";inset:0;position:absolute}.--variant-pills-raised .button--active:after,.--variant-pills-raised .selector:after{background:transparent;border-radius:calc(var(--rs-radius-medium) - 1px);box-shadow:var(--rs-shadow-raised);content:"";height:auto;inset:1px;position:absolute;transform:translateZ(0);width:auto}.--variant-pills-raised.--direction-column .button{width:100%}.--variant-pills,.--variant-pills-raised{--rs-tabs-gap:var(--rs-unit-x1)}.--size-small{--rs-tabs-item-p-v:var(--rs-unit-x1);--rs-tabs-item-p-h:var(--rs-unit-x2);--rs-tabs-icon-gap:var(--rs-unit-x1-5);--rs-tabs-radius:var(--rs-radius-small)}.--size-medium{--rs-tabs-item-p-v:var(--rs-unit-x2);--rs-tabs-item-p-h:var(--rs-unit-x3);--rs-tabs-icon-gap:var(--rs-unit-x2);--rs-tabs-radius:var(--rs-radius-medium)}.--size-large{--rs-tabs-item-p-v:var(--rs-unit-x3);--rs-tabs-item-p-h:var(--rs-unit-x4);--rs-tabs-icon-gap:var(--rs-unit-x2);--rs-tabs-radius:var(--rs-radius-medium)}.--item-width-equal{max-width:none}.--item-width-equal .inner{flex-wrap:wrap}.--item-width-equal .list{display:flex}.--item-width-equal .button{flex-basis:0;flex-grow:1;margin:0;min-width:0}.--item-width-equal .buttonText{overflow:hidden;text-overflow:ellipsis}.--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-slow) 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}.--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-x5);--rs-tabs-radius:var(--rs-radius-medium);isolation:isolate;box-sizing:initial;max-width:100%}.inner,.list,.root{position:relative}.list{gap:var(--rs-tabs-gap)}.button{display:block;color:var(--rs-color-foreground-neutral);flex-shrink:0;position:relative;border-radius:var(--rs-tabs-radius);padding:var(--rs-tabs-item-p-v) var(--rs-tabs-item-p-h);z-index:var(--rs-z-index-relative);-webkit-tap-highlight-color:transparent}[data-rs-keyboard] .button:focus:before{content:"";pointer-events:none;position:absolute;border-radius:var(--rs-tabs-radius);outline:var(--rs-outline);inset:0}.button:after{content:"";opacity:0;pointer-events:none}.button--active.button:after{opacity:1}.button.button--disabled{color:var(--rs-color-foreground-disabled)}.buttonContent{display:flex;align-items:center;justify-content:center;gap:var(--rs-tabs-icon-gap);position:relative;z-index:var(--rs-z-index-relative)}.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}.root:not(:has(.selector)) .button:after{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.button:after,.selector{position:absolute;border-radius:var(--rs-tabs-radius);z-index:0}.selector{--rs-tab-selection-x:0;--rs-tab-selection-y:0;--rs-tab-selection-scale-x:0;--rs-tab-selection-scale-y:0;position:absolute;left:0;top:0;z-index:0;height:calc(var(--rs-tab-selection-scale-y) * 1px);width:calc(var(--rs-tab-selection-scale-x) * 1px);transform-origin:0 0;transform:translate(calc(var(--rs-tab-selection-x) * 1px),calc(var(--rs-tab-selection-y) * 1px)) translateZ(0)}.selector.selector--hidden{visibility:hidden}.selector.selector--animated{transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,height,width;will-change:transform,height,width}.control{position:absolute;inset-block:0;display:none;align-items:center;z-index:var(--rs-z-index-relative);transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:opacity,transform;opacity:0;pointer-events:none}.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{outline:var(--rs-outline)}.panel.panel--hidden{display:none}.--direction-row .inner{white-space:nowrap}.--direction-row .list{display:inline-flex;vertical-align:top;flex-wrap:nowrap;align-items:center}.--direction-column{--rs-tabs-gap:var(--rs-unit-x1)}.--direction-column .list{display:flex;flex-direction:column}.--direction-column .buttonContent{justify-content:flex-start}.--variant-bordered .inner:after{content:"";position:absolute;background-color:var(--rs-color-border-neutral-faded);z-index:var(--rs-z-index-relative)}.--variant-bordered.--direction-row .inner:after{inset-block-end:0;inset-inline:0;height:1px}.--variant-bordered.--direction-column .inner:after{inset-inline-end:0;inset-block:0;width:1px}.--variant-bordered .button,.--variant-borderless .button{padding-inline:0}[data-rs-keyboard] .--variant-bordered .button:focus:before,[data-rs-keyboard] .--variant-borderless .button:focus:before{inset-block:var(--rs-unit-x0-5);inset-inline:calc(var(--rs-unit-x1-5) * -1)}.--variant-bordered .button:after,.--variant-bordered .selector,.--variant-borderless .button:after,.--variant-borderless .selector{background:var(--rs-color-border-primary)}.--variant-bordered.--direction-row .button,.--variant-borderless.--direction-row .button{margin-block-end:var(--rs-unit-x1)}.--variant-bordered.--direction-row .button:after,.--variant-borderless.--direction-row .button:after{inset-inline:0;inset-block-end:calc(var(--rs-unit-x1) * -1)}.--variant-bordered.--direction-row .selector,.--variant-borderless.--direction-row .selector{inset-block-start:auto;inset-block-end:0}.--variant-bordered.--direction-row .button:after,.--variant-bordered.--direction-row .selector,.--variant-borderless.--direction-row .button:after,.--variant-borderless.--direction-row .selector{height:2px}.--variant-bordered.--direction-column .button:after,.--variant-borderless.--direction-column .button:after{inset-block:0;inset-inline-end:0}[data-rs-keyboard] .--variant-bordered.--direction-column .button:focus:before,[data-rs-keyboard] .--variant-borderless.--direction-column .button:focus:before{inset-inline-end:var(--rs-unit-x2)}.--variant-bordered.--direction-column .selector,.--variant-borderless.--direction-column .selector{inset-inline-start:auto;inset-inline-end:0}.--variant-bordered.--direction-column .button:after,.--variant-bordered.--direction-column .selector,.--variant-borderless.--direction-column .button:after,.--variant-borderless.--direction-column .selector{width:2px}.--variant-pills .button--active:after,.--variant-pills .selector{opacity:.6}.--variant-pills .button:after,.--variant-pills .selector{background-color:var(--rs-color-background-neutral)}.--variant-pills .button:after{inset:0}.--variant-pills-raised .list{border-radius:var(--rs-radius-medium);background:var(--rs-color-background-neutral-faded)}.--variant-pills-raised .button--active:before,.--variant-pills-raised .selector:before{content:"";position:absolute;inset:0;border-radius:var(--rs-radius-medium);background:var(--rs-color-background-elevation-raised);border:1px solid var(--rs-color-border-neutral-faded);box-sizing:border-box}.--variant-pills-raised .button--active:after,.--variant-pills-raised .selector:after{content:"";position:absolute;inset:1px;height:auto;width:auto;border-radius:calc(var(--rs-radius-medium) - 1px);box-shadow:var(--rs-shadow-raised);background:transparent;transform:translateZ(0)}.--variant-pills-raised.--direction-column .button{width:100%}.--variant-pills,.--variant-pills-raised{--rs-tabs-gap:var(--rs-unit-x1)}.--size-small{--rs-tabs-item-p-v:var(--rs-unit-x1);--rs-tabs-item-p-h:var(--rs-unit-x2);--rs-tabs-icon-gap:var(--rs-unit-x1-5);--rs-tabs-radius:var(--rs-radius-small)}.--size-medium{--rs-tabs-item-p-v:var(--rs-unit-x2);--rs-tabs-item-p-h:var(--rs-unit-x3);--rs-tabs-icon-gap:var(--rs-unit-x2);--rs-tabs-radius:var(--rs-radius-medium)}.--size-large{--rs-tabs-item-p-v:var(--rs-unit-x3);--rs-tabs-item-p-h:var(--rs-unit-x4);--rs-tabs-icon-gap:var(--rs-unit-x2);--rs-tabs-radius:var(--rs-radius-medium)}.--item-width-equal{max-width:none}.--item-width-equal .inner{flex-wrap:wrap}.--item-width-equal .list{display:flex}.--item-width-equal .button{flex-grow:1;flex-basis:0;min-width:0;margin:0}.--item-width-equal .buttonText{overflow:hidden;text-overflow:ellipsis}.--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-slow) 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}.--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,7 +1,7 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { ActionableProps } from "../Actionable";
-import type { IconProps } from "../Icon";
+import type { ActionableProps } from "../../components/Actionable";
+import type { IconProps } from "../../components/Icon";
 import type { Attributes } from "../../types/global";
 export type SelectionState = {
     left: number;

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

@@ -2,17 +2,15 @@ import React from "react";
 import type * as T from "./Tabs.types";
 export declare const TabsProvider: React.Provider<T.Context>;
 export declare const useTabs: (value?: string) => {
-    panelId: string | undefined;
-    buttonId: string | undefined;
-    variant?: "bordered" | "borderless" | "pills" | "pills-raised" | undefined;
-    name?: string | undefined;
-    onChange?: ((args: {
+    direction?: "column" | "row";
+    itemWidth?: "equal";
+    variant?: "bordered" | "borderless" | "pills" | "pills-raised";
+    name?: string;
+    disableSelectionAnimation?: boolean;
+    onChange?: (args: {
         value: string;
         name?: string;
-    }) => void) | undefined;
-    direction?: "column" | "row" | undefined;
-    itemWidth?: "equal" | undefined;
-    disableSelectionAnimation?: boolean | undefined;
+    }) => void;
     size: NonNullable<T.BaseProps["size"]>;
     value?: string;
     registerPanel: (value: string) => void;
@@ -22,4 +20,6 @@ export declare const useTabs: (value?: string) => {
     elScrollableRef: React.RefObject<HTMLDivElement | null>;
     selection: T.SelectionState;
     setSelection: React.Dispatch<React.SetStateAction<T.SelectionState>>;
+    panelId: string | undefined;
+    buttonId: string | undefined;
 };

package/dist/components/Tabs/TabsControlled.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import useElementId from "../../hooks/useElementId.js";
-import { TabsProvider } from "./TabsContext.js";
+import useElementId from "../../hooks/useElementId";
+import { TabsProvider } from "./TabsContext";
 const TabsControlled = (props) => {
     const { children, value, onChange, itemWidth, variant = "bordered", name, disableSelectionAnimation, direction = "row", size = "medium", } = props;
     const id = useElementId();

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { type ActionableRef } from "../Actionable";
+import { type ActionableRef } from "../../components/Actionable";
 import type * as T from "./Tabs.types";
 declare const TabsItem: React.ForwardRefExoticComponent<T.ItemProps & React.RefAttributes<ActionableRef>>;
 export default TabsItem;