reshaped 2.11.11 → 3.0.0

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/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;
-};

package/components/Select/Select.js

@@ -1,49 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from "react";
-import Icon from "../Icon/index.js";
-import { useFormControl } from "../FormControl/index.js";
-import Actionable from "../Actionable/index.js";
-import Text from "../Text/index.js";
-import IconArrow from "../../icons/ChevronVertical.js";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/helpers.js";
-import useElementId from "../../hooks/useElementId.js";
-import s from "./Select.module.css";
-const Select = (props) => {
-    var _a, _b;
-    const { onChange, onClick, onFocus, onBlur, name, value, defaultValue, placeholder, options, children, icon, startSlot, size = "medium", variant = "outline", className, attributes, } = props;
-    const [empty, setEmpty] = React.useState(value === undefined ? !defaultValue : !value);
-    const formControl = useFormControl();
-    const id = useElementId(props.id);
-    const inputId = ((_a = formControl === null || formControl === void 0 ? void 0 : formControl.attributes) === null || _a === void 0 ? void 0 : _a.id) || ((_b = props.inputAttributes) === null || _b === void 0 ? void 0 : _b.id) || id;
-    const disabled = (formControl === null || formControl === void 0 ? void 0 : formControl.disabled) || props.disabled;
-    const hasError = (formControl === null || formControl === void 0 ? void 0 : formControl.hasError) || props.hasError;
-    const inputAttributes = Object.assign(Object.assign({}, props.inputAttributes), formControl === null || formControl === void 0 ? void 0 : formControl.attributes);
-    const rootClassName = classNames(s.root, className, size && responsiveClassNames(s, "--size", size), hasError && s["--status-error"], disabled && s["--disabled"], empty && options && s["--placeholder"], variant && s[`--variant-${variant}`]);
-    const handleChange = (event) => {
-        const nextValue = event.target.value;
-        // Uncontrolled placeholder
-        if (value === undefined)
-            setEmpty(!nextValue);
-        if (!onChange)
-            return;
-        onChange({ name, value: nextValue, event });
-    };
-    // Controlled placeholder
-    React.useEffect(() => {
-        if (value === undefined)
-            return;
-        setEmpty(!value);
-    }, [value]);
-    const startContent = (startSlot || icon) && (_jsx("div", { className: s.slot, children: icon ? (_jsx(Icon, { size: responsivePropDependency(size, (size) => {
-                if (size === "large")
-                    return 5;
-                if (size === "xlarge")
-                    return 6;
-                return 4;
-            }), svg: icon })) : (startSlot) }));
-    return (_jsxs("div", Object.assign({}, attributes, { className: rootClassName, children: [options ? (_jsxs(_Fragment, { children: [startContent, _jsxs("select", Object.assign({}, inputAttributes, { className: s.input, disabled: disabled, name: name, value: value, defaultValue: defaultValue, onChange: handleChange, onFocus: onFocus || (inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.onFocus), onBlur: onBlur || (inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.onBlur), id: inputId, children: [placeholder && _jsx("option", { value: "", children: placeholder }), options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }))] })) : (_jsxs(_Fragment, { children: [_jsxs(Actionable, { className: s.input, disabled: disabled, onClick: onClick, attributes: Object.assign(Object.assign({}, inputAttributes), { onFocus: onFocus || (inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.onFocus), onBlur: onBlur || (inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.onBlur) }), children: [startContent, children || (placeholder ? _jsx(Text, { color: "neutral-faded", children: placeholder }) : null)] }), _jsx("input", { type: "hidden", value: value, name: name })] })), _jsx("div", { className: s.arrow, children: _jsx(Icon, { svg: IconArrow, color: disabled ? "disabled" : "neutral-faded", size: responsivePropDependency(size, (size) => {
-                        return size === "large" || size === "xlarge" ? 5 : 4;
-                    }) }) })] })));
-};
-export default Select;

package/components/Select/Select.module.css

@@ -1 +0,0 @@
-.root{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;overflow:hidden;padding:calc(var(--rs-unit-x1) - 1px) 0;position:relative;z-index:0}.root:focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;color:var(--rs-color-foreground-neutral);cursor:pointer;display:flex;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);outline:none;padding-inline-end:calc(var(--rs-select-chevron-size) + var(--rs-select-gap) * 2 + var(--rs-unit-x1));padding-inline-start:var(--rs-select-gap);position:relative;width:100%;z-index:1}.input::-ms-expand{display:none}.slot{align-items:center;display:flex;flex-shrink:0;padding-inline-start:var(--rs-select-gap);position:relative;z-index:5}.input .slot{padding-inline-end:var(--rs-select-gap);padding-inline-start:0}.arrow{color:var(--rs-color-foreground-neutral-faded);display:flex;inset-block-start:50%;inset-inline-end:var(--rs-select-gap);pointer-events:none;position:absolute;transform:translateY(-50%);z-index:5}.--size-medium{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}.root.--placeholder .input{color:var(--rs-color-foreground-neutral-faded)}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .arrow,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-medium--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium--m .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--m{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--m{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}@media (--rs-viewport-l ){.--size-medium--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium--l .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--l{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--l{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}@media (--rs-viewport-xl ){.--size-medium--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--xl{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--xl{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}

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

@@ -1,49 +0,0 @@
-import React from "react";
-import type * as G from "../../types/global";
-import { FormControlProps } from "../FormControl";
-import { ActionableProps } from "../Actionable";
-import { IconProps } from "../Icon";
-type Size = G.Responsive<"medium" | "large" | "xlarge">;
-type Option = {
-    label: string;
-    value: string;
-    disabled?: boolean;
-};
-export type ButtonTriggerProps = {
-    onClick?: () => void;
-    children?: React.ReactNode;
-    inputAttributes?: ActionableProps["attributes"];
-    options?: never;
-    onChange?: never;
-};
-export type SelectTriggerProps = {
-    options: Option[];
-    onChange?: G.ChangeHandler<string, React.ChangeEvent<HTMLSelectElement>>;
-    inputAttributes?: G.Attributes<"select", Omit<Props, "id">>;
-    onClick?: never;
-    children?: never;
-};
-type BaseProps = ((ButtonTriggerProps | SelectTriggerProps) & Pick<FormControlProps, "hasError">) & {
-    id?: string;
-    name: string;
-    size?: Size;
-    variant?: "outline" | "faded" | "headless";
-    disabled?: boolean;
-    placeholder?: string;
-    icon?: IconProps["svg"];
-    startSlot?: React.ReactNode;
-    onFocus?: (e: React.FocusEvent) => void;
-    onBlur?: (e: React.FocusEvent) => void;
-    className?: G.ClassName;
-    attributes?: G.Attributes<"div", Props>;
-};
-export type ControlledProps = BaseProps & {
-    value: string;
-    defaultValue?: never;
-};
-export type UncontrolledProps = BaseProps & {
-    value?: never;
-    defaultValue?: string;
-};
-export type Props = ControlledProps | UncontrolledProps;
-export {};

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

@@ -1,6 +0,0 @@
-import type { ViewProps } from "../View";
-import type * as G from "../../types/global";
-export type Props = Pick<ViewProps, "width" | "height" | "borderRadius"> & {
-    className?: G.ClassName;
-    attributes?: G.Attributes<"div", Props>;
-};

package/components/Slider/Slider.js

@@ -1,26 +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 { jsx as _jsx } from "react/jsx-runtime";
-import SliderControlled from "./SliderControlled.js";
-import SliderUncontrolled from "./SliderUncontrolled.js";
-const Slider = (props) => {
-    const { min = 0, max = 100 } = props, rest = __rest(props, ["min", "max"]);
-    if (("value" in props && props.value !== undefined) ||
-        ("minValue" in props &&
-            "maxValue" in props &&
-            props.minValue !== undefined &&
-            props.maxValue !== undefined)) {
-        return _jsx(SliderControlled, Object.assign({}, rest, { min: min, max: max }));
-    }
-    return _jsx(SliderUncontrolled, Object.assign({}, rest, { min: min, max: max }));
-};
-export default Slider;

package/components/Slider/Slider.module.css

@@ -1 +0,0 @@
-.root{--rs-slider-overflow-gap:var(--rs-unit-x1);--rs-slider-thumb-size:var(--rs-unit-x4);align-items:center;cursor:pointer;display:flex;height:var(--rs-slider-thumb-size);position:relative;user-select:none;-webkit-tap-highlight-color:transparent;margin-inline:calc(var(--rs-slider-overflow-gap) * -1);overflow-x:clip;padding-inline:var(--rs-slider-overflow-gap)}.root:has(.thumb:hover,.thumb--active,.input:focus){overflow:visible}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-unit-x1);position:relative;width:100%}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);height:100%;position:absolute}.tooltip{--rs-slider-tooltip-translate-x:calc(-50% + var(--rs-slider-tooltip-offset, 0px));background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-unit-radius-small);bottom:100%;box-shadow:var(--rs-shadow-overlay);box-sizing:initial;color:var(--rs-color-foreground-neutral);font-variant-numeric:tabular-nums;left:50%;min-width:var(--rs-line-height-caption-1);opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);pointer-events:none;position:absolute;text-align:center;transform:translate(var(--rs-slider-tooltip-translate-x));transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;user-select:none;white-space:nowrap;will-change:transform}.thumbs{inset-inline:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap))}.thumb,.thumbs{height:100%;position:absolute}.thumb{width:0}.thumb:before{background:var(--rs-color-background-primary);border-radius:999px;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:"";left:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.thumb:after{cursor:grab;height:var(--rs-unit-x7);width:var(--rs-unit-x7)}.thumb:hover .tooltip{opacity:1;transform:translate(var(--rs-slider-tooltip-translate-x),calc(var(--rs-unit-x1) * -1.5))}.input:focus+.thumb:after,.thumb--active:after{cursor:grabbing}.input:focus+.thumb:before,.thumb--active:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.input:focus+.thumb .tooltip,.thumb--active .tooltip{opacity:1;transform:translate(var(--rs-slider-tooltip-translate-x),calc(var(--rs-unit-x1) * -1.5))!important}.input:focus+.thumb:before{box-shadow:var(--rs-focus-shadow)}.--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}