reshaped 2.11.12 → 3.0.0

package/dist/components/Popover/Popover.js

@@ -0,0 +1,18 @@
+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) => {
+    const { id, forcePosition, onOpen, onClose, active, defaultActive, children, width, contentGap, variant = "elevated", triggerType = "click", position = "bottom", disableHideAnimation, instanceRef, } = props;
+    const padding = props.padding ?? (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?.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: { ...paddingStyles?.variables } }, children: children }));
+};
+Popover.Trigger = Flyout.Trigger;
+Popover.Content = Flyout.Content;
+export default Popover;

package/dist/components/Popover/Popover.module.css

@@ -0,0 +1 @@
+.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-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/dist/components/Progress/Progress.js

@@ -0,0 +1,17 @@
+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", { 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/dist/components/Progress/Progress.module.css

@@ -0,0 +1 @@
+.root{align-items:flex-start;display:flex;overflow:hidden}.root,.value{background:var(--rs-color-background-neutral-faded);border-radius:var(--rs-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-media{background:rgba(var(--rs-color-rgb-white),28%)}.--color-media .value{background:var(--rs-color-white)}

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

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

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

@@ -0,0 +1,66 @@
+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: media, value: 50">
+			<View padding={4} backgroundColor="black" borderRadius="medium">
+				<Progress value={50} color="media"/>
+			</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/dist/components/Radio/Radio.js

@@ -0,0 +1,30 @@
+"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?.hasError || props.hasError || radioGroup?.hasError;
+    const disabled = formControl?.disabled || props.disabled || 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?.onChange)
+            radioGroup.onChange(changeArgs);
+    };
+    return (_jsxs("label", { ...attributes, className: rootClassName, children: [_jsxs("span", { className: s.field, children: [_jsx(HiddenInput, { className: s.input, type: "radio", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, attributes: inputAttributes }), _jsx("div", { className: s.decorator })] }), children && _jsx("span", { className: s.text, children: children })] }));
+};
+export default Radio;

package/dist/components/Radio/Radio.module.css

@@ -0,0 +1 @@
+.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{--rs-radio-decorator-size:var(--rs-line-height-body-3);background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:50%;height:var(--rs-radio-decorator-size);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-radio-decorator-size)}.decorator:after{background:var(--rs-color-on-background-primary);border-radius:50%;content:"";height:calc(var(--rs-radio-decorator-size) * .4);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:calc(var(--rs-radio-decorator-size) * .4)}[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/dist/components/Radio/Radio.types.d.ts

@@ -0,0 +1,25 @@
+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">;
+    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/dist/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,10 @@
+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, { ...props });
+    return _jsx(RadioGroupUncontrolled, { ...props });
+};
+export default RadioGroup;

package/dist/components/RadioGroup/RadioGroupUncontrolled.js

@@ -0,0 +1,17 @@
+"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, { ...props, value: value, defaultValue: undefined, onChange: handleChange }));
+};
+export default RadioGroupUncontrolled;

package/dist/components/Reshaped/Reshaped.css

@@ -0,0 +1 @@
+: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;font-family:var(--rs-font-family-body);font-size:87.5%;font-weight:var(--rs-font-weight-regular);line-height:var(--rs-line-height-body-3);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]:not(html){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/dist/components/Reshaped/Reshaped.js

@@ -0,0 +1,22 @@
+"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, { ...props, children: props.children }) }) }));
+};
+export default Reshaped;

package/dist/components/Scrim/Scrim.js

@@ -0,0 +1,10 @@
+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", { ...attributes, className: rootClassNames, children: [backgroundSlot, _jsx("div", { className: scrimClassNames, children: _jsx("div", { className: s.content, children: children }) })] }));
+};
+export default Scrim;

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

@@ -0,0 +1,11 @@
+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">;
+};

package/dist/components/ScrollArea/ScrollArea.js

@@ -0,0 +1,141 @@
+"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?.classNames, maxHeightStyles?.classNames, className);
+    const rootVariables = {
+        ...heightStyles?.variables,
+        ...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?.(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 () => {
+            resizeObserverRef.current?.disconnect();
+        };
+    }, [updateScroll]);
+    return (_jsxs("div", { ...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/dist/components/ScrollArea/ScrollArea.module.css

@@ -0,0 +1 @@
+.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}.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}.--display-hover:hover .--scrollbar-dragging .thumb:before,.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.32}

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

@@ -0,0 +1,23 @@
+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">;
+};
+export type BarProps = {
+    ratio: number;
+    position: number;
+    vertical?: boolean;
+    onThumbMove: (args: {
+        value: number;
+        type: "absolute" | "relative";
+    }) => void;
+};

package/dist/components/Select/Select.js

@@ -0,0 +1,52 @@
+"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) => {
+    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 = formControl?.attributes?.id || props.inputAttributes?.id || id;
+    const disabled = formControl?.disabled || props.disabled;
+    const hasError = formControl?.hasError || props.hasError;
+    const inputAttributes = { ...props.inputAttributes, ...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", { ...attributes, className: rootClassName, children: [options ? (_jsxs(_Fragment, { children: [startContent, _jsxs("select", { ...inputAttributes, onFocus: (onFocus || inputAttributes?.onFocus), onBlur: (onBlur || inputAttributes?.onBlur), className: s.input, disabled: disabled, name: name, value: value, defaultValue: defaultValue, onChange: handleChange, 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: {
+                            ...inputAttributes,
+                            onFocus: onFocus || inputAttributes?.onFocus,
+                            onBlur: onBlur || 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/dist/components/Select/Select.module.css

@@ -0,0 +1 @@
+.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-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-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-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-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-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-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-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-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-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-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-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-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/dist/components/Select/Select.types.d.ts

@@ -0,0 +1,51 @@
+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"];
+    onFocus?: (e: React.FocusEvent<HTMLButtonElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLButtonElement>) => void;
+    options?: never;
+    onChange?: never;
+};
+export type SelectTriggerProps = {
+    options: Option[];
+    onChange?: G.ChangeHandler<string, React.ChangeEvent<HTMLSelectElement>>;
+    onFocus?: (e: React.FocusEvent<HTMLSelectElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLSelectElement>) => void;
+    inputAttributes?: G.Attributes<"select">;
+    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;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div">;
+};
+export type ControlledProps = BaseProps & {
+    value: string;
+    defaultValue?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    value?: never;
+    defaultValue?: string;
+};
+export type Props = ControlledProps | UncontrolledProps;
+export {};

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

@@ -0,0 +1,6 @@
+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">;
+};

package/dist/components/Slider/Slider.js

@@ -0,0 +1,15 @@
+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, ...rest } = props;
+    if (("value" in props && props.value !== undefined) ||
+        ("minValue" in props &&
+            "maxValue" in props &&
+            props.minValue !== undefined &&
+            props.maxValue !== undefined)) {
+        return _jsx(SliderControlled, { ...rest, min: min, max: max });
+    }
+    return _jsx(SliderUncontrolled, { ...rest, min: min, max: max });
+};
+export default Slider;

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

@@ -0,0 +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;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-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-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}