reshaped 2.11.12 → 3.0.1

package/components/PinField/PinFieldUncontrolled.js

@@ -1,25 +0,0 @@
-"use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import PinFieldControlled from "./PinFieldControlled.js";
-const PinFieldUncontrolled = (props) => {
-    const { defaultValue, onChange } = props, controlledProps = __rest(props, ["defaultValue", "onChange"]);
-    const [value, setValue] = React.useState(defaultValue || "");
-    const handleChange = (args) => {
-        setValue(args.value);
-        onChange === null || onChange === void 0 ? void 0 : onChange(args);
-    };
-    return _jsx(PinFieldControlled, Object.assign({}, controlledProps, { value: value, onChange: handleChange }));
-};
-export default PinFieldUncontrolled;

package/components/Popover/Popover.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../utilities/helpers.js";
-import Flyout from "../_private/Flyout/index.js";
-import s from "./Popover.module.css";
-import getPaddingStyles from "../../styles/padding/index.js";
-const Popover = (props) => {
-    var _a;
-    const { id, forcePosition, onOpen, onClose, active, defaultActive, children, width, contentGap, variant = "elevated", triggerType = "click", position = "bottom", disableHideAnimation, instanceRef, } = props;
-    const padding = (_a = props.padding) !== null && _a !== void 0 ? _a : (variant === "headless" ? 0 : 4);
-    const trapFocusMode = props.trapFocusMode || (triggerType === "hover" ? "content-menu" : undefined);
-    const paddingStyles = getPaddingStyles(padding);
-    const contentClassName = classNames(s.content, !!width && s["content--has-width"], variant && s[`content--variant-${variant}`], paddingStyles === null || paddingStyles === void 0 ? void 0 : paddingStyles.classNames);
-    return (
-    // @ts-ignore
-    _jsx(Flyout, { id: id, instanceRef: instanceRef, position: position, forcePosition: forcePosition, onOpen: onOpen, onClose: onClose, trapFocusMode: trapFocusMode, triggerType: triggerType, active: active, defaultActive: defaultActive, width: width, disableHideAnimation: disableHideAnimation, contentGap: contentGap, contentClassName: contentClassName, contentAttributes: { style: Object.assign({}, paddingStyles === null || paddingStyles === void 0 ? void 0 : paddingStyles.variables) }, children: children }));
-};
-Popover.Trigger = Flyout.Trigger;
-Popover.Content = Flyout.Content;
-export default Popover;

package/components/Popover/Popover.module.css

@@ -1 +0,0 @@
-.content{max-width:360px}.content--variant-elevated{background:var(--rs-color-background-elevation-overlay);border:1px solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-unit-radius-medium);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);min-width:220px;overflow:hidden}.content.content--has-width{max-width:none;min-width:0}@media (--rs-viewport-s ){.content{max-width:none}}

package/components/Popover/tests/Popover.stories.js

@@ -1,126 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { Example } from "../../../utilities/storybook/index.js";
-import View from "../../View/index.js";
-import Popover from "../index.js";
-import Tooltip from "../../Tooltip/index.js";
-import Button from "../../Button/index.js";
-export default {
-    title: "Components/Popover",
-    component: Popover,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/popover",
-        },
-    },
-};
-const Demo = (props) => {
-    const { position } = props, rest = __rest(props, ["position"]);
-    return (<Popover position={position} {...rest}>
-			<Popover.Trigger>
-				{(attributes) => <Button attributes={attributes}>{position || "Open"}</Button>}
-			</Popover.Trigger>
-			<Popover.Content>
-				<View gap={2} align="start">
-					Popover content
-					<Button onClick={() => { }}>Button</Button>
-				</View>
-			</Popover.Content>
-		</Popover>);
-};
-export const position = () => (<Example>
-		<Example.Item title="position: bottom">
-			<View align="center" justify="center" gap={8} direction="row">
-				<Demo position="bottom-start"/>
-				<Demo position="bottom"/>
-				<Demo position="bottom-end"/>
-			</View>
-		</Example.Item>
-		<Example.Item title="position: top">
-			<View align="center" justify="center" gap={8} direction="row">
-				<Demo position="top-start"/>
-				<Demo position="top"/>
-				<Demo position="top-end"/>
-			</View>
-		</Example.Item>
-		<Example.Item title="position: start">
-			<View align="center" justify="center" gap={8} direction="row">
-				<Demo position="start-top"/>
-				<Demo position="start"/>
-				<Demo position="start-bottom"/>
-			</View>
-		</Example.Item>
-		<Example.Item title="position: end">
-			<View align="center" justify="center" gap={8} direction="row">
-				<Demo position="end-top"/>
-				<Demo position="end"/>
-				<Demo position="end-bottom"/>
-			</View>
-		</Example.Item>
-		<Example.Item title={["position: bottom", "changes to top-start because it doesn't fit"]}>
-			<View align="center">
-				<Demo position="bottom"/>
-			</View>
-		</Example.Item>
-	</Example>);
-export const width = () => (<Example>
-		<Example.Item title="width: 400">
-			<Demo width="400px"/>
-		</Example.Item>
-		<Example.Item title="width: 100%">
-			<Demo width="100%"/>
-		</Example.Item>
-	</Example>);
-export const variant = () => (<Example>
-		<Example.Item title="variant: headless">
-			<Popover variant="headless">
-				<Popover.Trigger>
-					{(attributes) => <Button attributes={attributes}>Open</Button>}
-				</Popover.Trigger>
-				<Popover.Content>
-					<View height="100px" width="100px" borderColor="primary" borderRadius="medium" backgroundColor="neutral-faded"/>
-				</Popover.Content>
-			</Popover>
-		</Example.Item>
-	</Example>);
-export const padding = () => (<Example>
-		<Example.Item title="padding: 0">
-			<Demo padding={0}/>
-		</Example.Item>
-		<Example.Item title="padding: 6">
-			<Demo padding={6}/>
-		</Example.Item>
-	</Example>);
-export const triggerType = () => (<Example>
-		<Example.Item title="triggerType: hover">
-			<Demo triggerType="hover"/>
-		</Example.Item>
-	</Example>);
-export const edgeCases = () => (<Example>
-		<Example.Item title="Popover with tooltip">
-			<Tooltip position="top" text="Hello">
-				{(tooltipAttributes) => (<Popover position="bottom">
-						<Popover.Trigger>
-							{(attributes) => (<Button attributes={Object.assign(Object.assign({}, attributes), tooltipAttributes)}>
-									Open
-								</Button>)}
-						</Popover.Trigger>
-						<Popover.Content>
-							<View gap={2} align="start">
-								Popover content
-								<Button onClick={() => { }}>Button</Button>
-							</View>
-						</Popover.Content>
-					</Popover>)}
-			</Tooltip>
-		</Example.Item>
-	</Example>);

package/components/Progress/Progress.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../utilities/helpers.js";
-import s from "./Progress.module.css";
-const Progress = (props) => {
-    const { value = 0, min = 0, max = 100, color = "primary", size = "medium", duration, className, attributes, } = props;
-    const rootClassNames = classNames(s.root, className, color && s[`--color-${color}`], size && s[`--size-${size}`], !!duration && s["--duration"]);
-    const total = max - min;
-    const normalizedValue = value - min;
-    const resolvedValue = Math.max(min, Math.min(max, normalizedValue));
-    const width = (resolvedValue / total) * 100;
-    const translate = `${width - 100}%`;
-    return (_jsx("div", Object.assign({ role: "progressbar" }, attributes, { className: rootClassNames, "aria-valuemax": max, "aria-valuemin": min, "aria-valuenow": value, children: _jsx("div", { className: s.value, style: {
-                "--rs-progress-value": translate,
-                "--rs-progress-duration": duration ? `${duration}ms` : undefined,
-            } }) })));
-};
-export default Progress;

package/components/Progress/Progress.module.css

@@ -1 +0,0 @@
-.root{align-items:flex-start;display:flex;overflow:hidden}.root,.value{background:var(--rs-color-background-neutral-faded);border-radius:var(--rs-unit-radius-small)}.value{height:100%;transform:translateX(var(--rs-progress-value));transition:transform var(--rs-easing-decelerate);transition-duration:var(--rs-progress-duration,var(--rs-duration-slow));width:100%}[dir=rtl] .value{transform:translateX(calc(var(--rs-progress-value) * -1))}.--duration .value{transition-timing-function:linear}.--size-small{height:var(--rs-unit-x1)}.--size-medium{height:var(--rs-unit-x2)}.--color-primary .value{background:var(--rs-color-background-primary)}.--color-critical .value{background:var(--rs-color-background-critical)}.--color-warning .value{background:var(--rs-color-background-warning)}.--color-positive .value{background:var(--rs-color-background-positive)}.--color-white{background:rgba(var(--rs-color-rgb-white),32%)}.--color-white .value{background:var(--rs-color-white)}

package/components/Progress/Progress.types.d.ts

@@ -1,11 +0,0 @@
-import type * as G from "../../types/global";
-export type Props = {
-    value?: number;
-    max?: number;
-    min?: number;
-    size?: "small" | "medium";
-    color?: "primary" | "critical" | "warning" | "positive" | "white";
-    duration?: number;
-    className?: G.ClassName;
-    attributes?: G.Attributes<"div", Props>;
-};

package/components/Progress/tests/Progress.stories.js

@@ -1,66 +0,0 @@
-import React from "react";
-import { Example } from "../../../utilities/storybook/index.js";
-import View from "../../View/index.js";
-import Progress from "../index.js";
-import Button from "../../Button/index.js";
-export default {
-    title: "Components/Progress",
-    component: Progress,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/progress",
-        },
-    },
-};
-export const value = () => (<Example>
-		<Example.Item title="value: 50">
-			<Progress value={50}/>
-		</Example.Item>
-		<Example.Item title="value: 20, min: 0, max: 40">
-			<Progress value={20} min={0} max={40}/>
-		</Example.Item>
-		<Example.Item title="value: 50, min: 0, max: 40">
-			<Progress value={50} min={0} max={40}/>
-		</Example.Item>
-	</Example>);
-export const size = () => (<Example>
-		<Example.Item title="size: small, value: 50">
-			<Progress value={50} size="small"/>
-		</Example.Item>
-		<Example.Item title="size: medium, value: 50">
-			<Progress value={50} size="medium"/>
-		</Example.Item>
-	</Example>);
-export const color = () => (<Example>
-		<Example.Item title="color: critical, value: 50">
-			<Progress value={50} color="critical"/>
-		</Example.Item>
-		<Example.Item title="color: warning, value: 50">
-			<Progress value={50} color="warning"/>
-		</Example.Item>
-		<Example.Item title="color: positive, value: 50">
-			<Progress value={50} color="positive"/>
-		</Example.Item>
-		<Example.Item title="color: white, value: 50">
-			<View padding={4} backgroundColor="black" borderRadius="medium">
-				<Progress value={50} color="white"/>
-			</View>
-		</Example.Item>
-	</Example>);
-export const duration = () => {
-    const [active, setActive] = React.useState(false);
-    const handleChange = () => {
-        setActive((state) => !state);
-    };
-    return (<Example>
-			<Example.Item title="duration: 2000">
-				<View gap={3}>
-					<View.Item>
-						<Button onClick={handleChange}>Change</Button>
-					</View.Item>
-
-					<Progress value={active ? 100 : 0} duration={2000}/>
-				</View>
-			</Example.Item>
-		</Example>);
-};

package/components/Radio/Radio.js

@@ -1,30 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "../../utilities/helpers.js";
-import HiddenInput from "../_private/HiddenInput/index.js";
-import { useRadioGroup } from "../RadioGroup/index.js";
-import { useFormControl } from "../FormControl/index.js";
-import s from "./Radio.module.css";
-const Radio = (props) => {
-    const { children, value, onChange, onFocus, onBlur, className, attributes, inputAttributes } = props;
-    const formControl = useFormControl();
-    const radioGroup = useRadioGroup();
-    const hasError = (formControl === null || formControl === void 0 ? void 0 : formControl.hasError) || props.hasError || (radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.hasError);
-    const disabled = (formControl === null || formControl === void 0 ? void 0 : formControl.disabled) || props.disabled || (radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.disabled);
-    const checked = radioGroup ? radioGroup.value === value : props.checked;
-    const defaultChecked = radioGroup ? undefined : props.defaultChecked;
-    const name = radioGroup ? radioGroup.name : props.name;
-    const rootClassName = classNames(s.root, className, hasError && s["--error"], disabled && s["--disabled"]);
-    const handleChange = (event) => {
-        if (!name)
-            return;
-        const { checked } = event.target;
-        const changeArgs = { name, value, checked, event };
-        if (onChange)
-            onChange(changeArgs);
-        if (radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.onChange)
-            radioGroup.onChange(changeArgs);
-    };
-    return (_jsxs("label", Object.assign({}, attributes, { className: rootClassName, children: [_jsxs("span", { className: s.field, children: [_jsx(HiddenInput, { className: s.input, type: "radio", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, attributes: inputAttributes }), _jsx("div", { className: s.decorator })] }), children && _jsx("span", { className: s.text, children: children })] })));
-};
-export default Radio;

package/components/Radio/Radio.module.css

@@ -1 +0,0 @@
-.root{align-items:center;cursor:pointer;display:inline-flex;user-select:none;vertical-align:top;-webkit-tap-highlight-color:transparent}.root:hover .input:not(:checked)+.decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:50%;height:var(--rs-line-height-body-3);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-line-height-body-3)}.decorator:after{background:var(--rs-color-on-background-primary);border-radius:50%;content:"";height:var(--rs-unit-x2);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;width:var(--rs-unit-x2)}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);border-width:2px}.input:checked+.decorator:after,.root.--error .input:checked+.decorator:after,.root.--error:hover .input:checked+.decorator:after{opacity:1;transform:translate(-50%,-50%) scale(1)}.text{margin-inline-start:var(--rs-unit-x2)}.root.--error .decorator,.root.--error:hover .input+.decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .input+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .input:checked+.decorator{border-color:transparent}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}

package/components/Radio/Radio.types.d.ts

@@ -1,25 +0,0 @@
-import type React from "react";
-import type * as G from "../../types/global";
-type BaseProps = {
-    children?: React.ReactNode;
-    name?: string;
-    disabled?: boolean;
-    hasError?: boolean;
-    value: string;
-    onChange?: G.ChangeHandler<boolean>;
-    onFocus?: (e: React.FocusEvent) => void;
-    onBlur?: (e: React.FocusEvent) => void;
-    className?: G.ClassName;
-    attributes?: G.Attributes<"label", Props>;
-    inputAttributes?: G.Attributes<"input">;
-};
-export type ControlledProps = BaseProps & {
-    checked: boolean;
-    defaultChecked?: never;
-};
-export type UncontrolledProps = BaseProps & {
-    checked?: never;
-    defaultChecked?: boolean;
-};
-export type Props = ControlledProps | UncontrolledProps;
-export {};

package/components/RadioGroup/RadioGroup.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import RadioGroupControlled from "./RadioGroupControlled.js";
-import RadioGroupUncontrolled from "./RadioGroupUncontrolled.js";
-const RadioGroup = (props) => {
-    const { value } = props;
-    if (value !== undefined)
-        return _jsx(RadioGroupControlled, Object.assign({}, props));
-    return _jsx(RadioGroupUncontrolled, Object.assign({}, props));
-};
-export default RadioGroup;

package/components/RadioGroup/RadioGroupUncontrolled.js

@@ -1,17 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import RadioGroupControlled from "./RadioGroupControlled.js";
-const RadioGroupUncontrolled = (props) => {
-    const { defaultValue, onChange } = props;
-    const [value, setValue] = React.useState(defaultValue || null);
-    const handleChange = (args) => {
-        if (!args.value)
-            return;
-        setValue(args.value);
-        if (onChange)
-            onChange(args);
-    };
-    return (_jsx(RadioGroupControlled, Object.assign({}, props, { value: value, defaultValue: undefined, onChange: handleChange })));
-};
-export default RadioGroupUncontrolled;

package/components/Reshaped/Reshaped.css

@@ -1 +0,0 @@
-:root{--rs-z-index-raised:5;--rs-z-index-flyout:80;--rs-z-index-fixed:90;--rs-z-index-overlay:100;--rs-z-index-notification:110}blockquote,body,dd,dl,figcaption,figure,h1,h2,h3,h4,h5,h6,li,ol,p,ul{margin:0;padding:0}ol[class],ul[class]{list-style:none}textarea{resize:vertical}table{border-collapse:collapse;border-spacing:0}fieldset{border:0;margin:0;padding:0}img{display:block;max-width:100%}button,input,select,textarea{font:inherit}option{background:var(--rs-color-background-elevation-base)}label{cursor:pointer}input::placeholder,textarea::placeholder{color:var(--rs-color-foreground-neutral-faded);opacity:.5}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;touch-action:manipulation}*{box-sizing:border-box}body,html{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);height:100%;scroll-behavior:smooth}[data-rs-theme],body{font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);line-height:var(--rs-line-height-body-3)}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}@layer rs.reset;

package/components/Reshaped/Reshaped.js

@@ -1,22 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../utilities/helpers.js";
-import Theme, { GlobalColorMode } from "../Theme/index.js";
-import { ToastProvider } from "../Toast/index.js";
-import useSingletonKeyboardMode from "../../hooks/_private/useSingletonKeyboardMode.js";
-import { SingletonEnvironmentContext, useSingletonRTL, } from "../../hooks/_private/useSingletonEnvironment.js";
-import { SingletonHotkeysProvider } from "../../hooks/_private/useSingletonHotkeys.js";
-import "./Reshaped.css";
-import s from "./Reshaped.module.css";
-const ReshapedInner = (props) => {
-    const { children, defaultRTL, defaultViewport = "s", toastOptions } = props;
-    const rtlState = useSingletonRTL(defaultRTL);
-    useSingletonKeyboardMode();
-    return (_jsx(SingletonEnvironmentContext.Provider, { value: { rtl: rtlState, defaultViewport }, children: _jsx(SingletonHotkeysProvider, { children: _jsx(ToastProvider, { options: toastOptions, children: children }) }) }));
-};
-const Reshaped = (props) => {
-    const { theme, defaultTheme = "reshaped", defaultColorMode, className } = props;
-    const rootClassNames = classNames(s.root, className);
-    return (_jsx(GlobalColorMode, { defaultMode: defaultColorMode, children: _jsx(Theme, { name: theme, defaultName: defaultTheme, className: rootClassNames, children: _jsx(ReshapedInner, Object.assign({}, props, { children: props.children })) }) }));
-};
-export default Reshaped;

package/components/Scrim/Scrim.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "../../utilities/helpers.js";
-import s from "./Scrim.module.css";
-const Scrim = (props) => {
-    const { children, backgroundSlot, position = "cover", attributes, className, scrimClassName, } = props;
-    const rootClassNames = classNames(s.root, !!backgroundSlot && s["--with-background"], position && s[`--position-${position}`], className);
-    const scrimClassNames = classNames(s.scrim, scrimClassName);
-    return (_jsxs("div", Object.assign({}, attributes, { className: rootClassNames, children: [backgroundSlot, _jsx("div", { className: scrimClassNames, children: _jsx("div", { className: s.content, children: children }) })] })));
-};
-export default Scrim;

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

@@ -1,11 +0,0 @@
-import React from "react";
-import type * as G from "../../types/global";
-export type Props = {
-    children?: React.ReactNode;
-    backgroundSlot?: React.ReactNode;
-    position?: "full" | "top" | "bottom" | "start" | "end";
-    fill?: boolean;
-    scrimClassName?: G.ClassName;
-    className?: G.ClassName;
-    attributes?: G.Attributes<"div", Props>;
-};

package/components/ScrollArea/ScrollArea.js

@@ -1,139 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { forwardRef } from "react";
-import { classNames } from "../../utilities/helpers.js";
-import { disableUserSelect, enableUserSelect } from "../../utilities/dom.js";
-import getHeightStyles from "../../styles/height/index.js";
-import getMaxHeightStyles from "../../styles/maxHeight/index.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import s from "./ScrollArea.module.css";
-const ScrollAreaBar = (props) => {
-    const { ratio, position, vertical, onThumbMove } = props;
-    const [dragging, setDragging] = React.useState(false);
-    const dragStartPositionRef = React.useRef(0);
-    const barRef = React.useRef(null);
-    const barClassNames = classNames(s.scrollbar, vertical ? s["--scrollbar-y"] : s["--scrollbar-x"], dragging && s["--scrollbar-dragging"]);
-    const handleClick = (e) => {
-        const elBar = barRef.current;
-        const isDirty = dragStartPositionRef.current;
-        dragStartPositionRef.current = 0;
-        if (isDirty)
-            return;
-        if (!elBar || e.currentTarget !== elBar)
-            return;
-        const rect = elBar.getBoundingClientRect();
-        const diff = vertical ? e.pageY - rect.top : e.pageX - rect.left;
-        const total = vertical ? elBar.clientHeight : elBar.clientWidth;
-        // Move the center of the thumb to the clicked coordinates
-        onThumbMove({ value: diff / total - ratio / 2, type: "absolute" });
-    };
-    const handleDrag = React.useCallback((e) => {
-        if (!dragStartPositionRef.current) {
-            dragStartPositionRef.current = vertical ? e.pageY : e.pageX;
-        }
-        const elBar = barRef.current;
-        if (!elBar)
-            return;
-        if (!dragging)
-            return;
-        const diff = vertical ? e.movementY : e.movementX;
-        const total = vertical ? elBar.scrollHeight : elBar.scrollWidth;
-        onThumbMove({ value: diff / total, type: "relative" });
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [ratio, vertical, dragging]);
-    const handleDragEnd = React.useCallback(() => {
-        setDragging(false);
-        enableUserSelect();
-    }, []);
-    const handleDragStart = () => {
-        setDragging(true);
-        disableUserSelect();
-    };
-    React.useEffect(() => {
-        if (!dragging)
-            return;
-        document.addEventListener("mousemove", handleDrag);
-        document.addEventListener("mouseup", handleDragEnd);
-        return () => {
-            document.removeEventListener("mousemove", handleDrag);
-            document.removeEventListener("mouseup", handleDragEnd);
-        };
-    }, [handleDrag, handleDragEnd, dragging]);
-    return (_jsx("div", { className: barClassNames, style: {
-            "--rs-scroll-area-ratio": ratio,
-            "--rs-scroll-area-position": position,
-        }, ref: barRef, onClick: handleClick, onMouseDown: handleDragStart, "aria-hidden": "true", children: _jsx("div", { className: s.thumb }) }));
-};
-const ScrollArea = forwardRef((props, ref) => {
-    const { children, height, maxHeight, scrollbarDisplay = "hover", onScroll, className, attributes, } = props;
-    const [scrollRatio, setScrollRatio] = React.useState({ x: 1, y: 1 });
-    const [scrollPosition, setScrollPosition] = React.useState({ x: 0, y: 0 });
-    const scrollableRef = React.useRef(null);
-    const resizeObserverRef = React.useRef();
-    const heightStyles = getHeightStyles(height);
-    const maxHeightStyles = getMaxHeightStyles(maxHeight);
-    const rootClassNames = classNames(s.root, scrollbarDisplay && s[`--display-${scrollbarDisplay}`], heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.classNames, maxHeightStyles === null || maxHeightStyles === void 0 ? void 0 : maxHeightStyles.classNames, className);
-    const rootVariables = Object.assign(Object.assign({}, heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.variables), maxHeightStyles === null || maxHeightStyles === void 0 ? void 0 : maxHeightStyles.variables);
-    const updateScroll = React.useCallback(() => {
-        const scrollableEl = scrollableRef.current;
-        if (!scrollableEl)
-            return;
-        setScrollRatio({
-            x: scrollableEl.clientWidth / scrollableEl.scrollWidth,
-            y: scrollableEl.clientHeight / scrollableEl.scrollHeight,
-        });
-    }, []);
-    const handleScroll = (e) => {
-        const scrollableEl = scrollableRef.current;
-        if (!scrollableEl)
-            return;
-        const next = {
-            x: e.currentTarget.scrollLeft / scrollableEl.scrollWidth,
-            y: e.currentTarget.scrollTop / scrollableEl.scrollHeight,
-        };
-        setScrollPosition(next);
-        onScroll === null || onScroll === void 0 ? void 0 : onScroll(next);
-    };
-    const handleThumbYMove = (args) => {
-        const scrollableEl = scrollableRef.current;
-        if (!scrollableEl)
-            return;
-        const value = scrollableEl.scrollHeight * args.value;
-        if (args.type === "absolute") {
-            scrollableEl.scrollTop = value;
-        }
-        else {
-            scrollableEl.scrollTop += value;
-        }
-    };
-    const handleThumbXMove = (args) => {
-        const scrollableEl = scrollableRef.current;
-        if (!scrollableEl)
-            return;
-        const value = scrollableEl.clientWidth * args.value;
-        if (args.type === "absolute") {
-            scrollableEl.scrollLeft = value;
-        }
-        else {
-            scrollableEl.scrollLeft += value;
-        }
-    };
-    React.useImperativeHandle(ref, () => scrollableRef.current);
-    useIsomorphicLayoutEffect(() => {
-        updateScroll();
-    }, [updateScroll]);
-    useIsomorphicLayoutEffect(() => {
-        const scrollableEl = scrollableRef.current;
-        if (!scrollableEl)
-            return;
-        resizeObserverRef.current = new ResizeObserver(updateScroll);
-        resizeObserverRef.current.observe(scrollableEl);
-        return () => {
-            var _a;
-            (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
-        };
-    }, [updateScroll]);
-    return (_jsxs("div", Object.assign({}, attributes, { className: rootClassNames, style: rootVariables, children: [_jsx("div", { className: s.scrollable, ref: scrollableRef, onScroll: handleScroll, children: children }), scrollRatio.y < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { vertical: true, onThumbMove: handleThumbYMove, ratio: scrollRatio.y, position: scrollPosition.y })), scrollRatio.x < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { onThumbMove: handleThumbXMove, ratio: scrollRatio.x, position: scrollPosition.x }))] })));
-});
-export default ScrollArea;

package/components/ScrollArea/ScrollArea.module.css

@@ -1 +0,0 @@
-.root{--rs-scroll-area-thumb-size:calc(var(--rs-unit-x1) * 1.5);--rs-scroll-area-thumb-offset:calc(var(--rs-unit-x1) / 2);overflow:hidden}.root,.scrollable{height:100%;position:relative}.scrollable{overflow:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;height:0;width:0}.scrollbar{box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset);position:absolute}.scrollbar.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.4}.thumb{height:100%;position:relative;width:100%}.thumb:before{background:var(--rs-color-foreground-neutral);border-radius:999px;content:"";display:block;opacity:0;position:absolute;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.--scrollbar-y{inset-block:0;inset-inline-end:0;width:var(--rs-scroll-area-thumb-size)}.--scrollbar-y .thumb:before{height:calc(var(--rs-scroll-area-ratio) * 100%);inset-block-start:calc(var(--rs-scroll-area-position) * 100%);width:100%}.--scrollbar-x{height:var(--rs-scroll-area-thumb-size);inset-block-end:0;inset-inline:0}.--scrollbar-x .thumb:before{height:100%;inset-inline-start:calc(var(--rs-scroll-area-position) * 100%);width:calc(var(--rs-scroll-area-ratio) * 100%)}.--scrollbar-y:not(:last-child){inset-block-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--scrollbar-y~.--scrollbar-x{inset-inline-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--display-hover:hover .thumb:before,.--display-visible .thumb:before{opacity:.2}

package/components/ScrollArea/ScrollArea.types.d.ts

@@ -1,23 +0,0 @@
-import type React from "react";
-import type * as G from "../../types/global";
-export type Props = {
-    children: React.ReactNode;
-    scrollbarDisplay?: "visible" | "hover" | "hidden";
-    onScroll?: (args: {
-        x: number;
-        y: number;
-    }) => void;
-    height?: G.Responsive<string | number>;
-    maxHeight?: G.Responsive<string | number>;
-    className?: G.ClassName;
-    attributes?: G.Attributes<"div", Props>;
-};
-export type BarProps = {
-    ratio: number;
-    position: number;
-    vertical?: boolean;
-    onThumbMove: (args: {
-        value: number;
-        type: "absolute" | "relative";
-    }) => void;
-};