reshaped 2.7.5-beta.0 → 2.8.1

package/components/MenuItem/MenuItem.module.css

@@ -1 +0,0 @@
-.root{background-color:var(--rs-menu-item-bg-color);color:var(--rs-menu-item-color);display:block;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);padding:var(--rs-p-v) var(--rs-p-h);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,transform,box-shadow}.icon{color:var(--rs-menu-item-icon-color,inherit)}.content,.icon{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color}.--rounded-corners{border-radius:var(--rs-menu-item-radius)}.--size-small{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-unit-radius-small)}.--size-medium,.--size-small{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--color-neutral{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-neutral.--selected,.--color-neutral:hover,.--color-neutral[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),40%)}.--color-critical{--rs-menu-item-color:var(--rs-color-foreground-critical)}.--color-critical.--selected,.--color-critical:hover,.--color-critical[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}.--color-primary{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-primary:hover,.--color-primary[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),40%)}.--color-primary.--selected,.--color-primary.--selected:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-primary),12%);--rs-menu-item-color:var(--rs-color-foreground-primary);--rs-menu-item-icon-color:var(--rs-color-foreground-primary)}.--selected,.--selected:hover{cursor:default}.--disabled,.--disabled:hover{--rs-menu-item-color:var(--rs-color-foreground-disabled);--rs-menu-item-bg-color:none;--rs-menu-item-icon-color:var(--rs-color-foreground-disabled)}button.root{width:100%}.aligner button.root{box-sizing:initial}@media (--rs-viewport-m ){.--rounded-corners-true--m{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--m{border-radius:0}.--size-small--m{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-unit-radius-small)}.--size-medium--m,.--size-small--m{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--m{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large--m{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--rounded-corners-true--l{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--l{border-radius:0}.--size-small--l{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-unit-radius-small)}.--size-medium--l,.--size-small--l{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--l{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large--l{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--rounded-corners-true--xl{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--xl{border-radius:0}.--size-small--xl{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-unit-radius-small)}.--size-medium--xl,.--size-small--xl{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--xl{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large--xl{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}

package/components/MenuItem/MenuItemAligner.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { type AlignerProps } from "../_private/Aligner";
-declare const MenuItemAligner: (props: AlignerProps) => React.JSX.Element;
-export default MenuItemAligner;

package/components/MenuItem/MenuItemAligner.js

@@ -1,7 +0,0 @@
-import React from "react";
-import Aligner from "../_private/Aligner/index.js";
-import s from "./MenuItem.module.css";
-const MenuItemAligner = (props) => {
-    return (React.createElement(Aligner, Object.assign({}, props, { side: props.side || "inline", className: [s.aligner, props.className] })));
-};
-export default MenuItemAligner;

package/components/Modal/Modal.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import type * as T from "./Modal.types";
-declare const Modal: {
-    (props: T.Props): React.JSX.Element;
-    Title: (props: T.TitleProps) => React.JSX.Element;
-    Subtitle: (props: T.SubtitleProps) => React.JSX.Element;
-};
-export default Modal;

package/components/Modal/Modal.js

@@ -1,163 +0,0 @@
-"use client";
-import React from "react";
-import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/helpers.js";
-import useResponsiveClientValue from "../../hooks/useResponsiveClientValue.js";
-import Text from "../Text/index.js";
-import Overlay from "../Overlay/index.js";
-import useElementId from "../../hooks/useElementId.js";
-import s from "./Modal.module.css";
-import getPaddingStyles from "../../styles/padding/index.js";
-const DRAG_THRESHOLD = 32;
-const DRAG_OPPOSITE_THRESHOLD = 100;
-const DRAG_EDGE_BOUNDARY = 32;
-const Context = React.createContext({
-    id: "",
-    titleMounted: false,
-    setTitleMounted: () => { },
-    subtitleMounted: false,
-    setSubtitleMounted: () => { },
-});
-const useModal = () => React.useContext(Context);
-const ModalTitle = (props) => {
-    const { children } = props;
-    const { id, setTitleMounted } = useModal();
-    React.useEffect(() => {
-        setTitleMounted(true);
-        return () => setTitleMounted(false);
-    }, [setTitleMounted]);
-    return (React.createElement(Text, { variant: "featured-3", weight: "bold", attributes: { id: `${id}-title` } }, children));
-};
-const ModalSubtitle = (props) => {
-    const { children } = props;
-    const { id, setSubtitleMounted } = useModal();
-    React.useEffect(() => {
-        setSubtitleMounted(true);
-        return () => setSubtitleMounted(false);
-    }, [setSubtitleMounted]);
-    return (React.createElement(Text, { variant: "body-3", color: "neutral-faded", attributes: { id: `${id}-subtitle` } }, children));
-};
-const Modal = (props) => {
-    const { children, onClose, active, size, padding = 4, position = "center", transparentOverlay, className, attributes, } = props;
-    const id = useElementId();
-    const clientPosition = useResponsiveClientValue(position);
-    const [titleMounted, setTitleMounted] = React.useState(false);
-    const [subtitleMounted, setSubtitleMounted] = React.useState(false);
-    const [dragging, setDragging] = React.useState(false);
-    const rootRef = React.useRef(null);
-    const dragStartCoordinatesRef = React.useRef({ x: 0, y: 0 });
-    const dragLastCoordinateRef = React.useRef(0);
-    const dragDistanceRef = React.useRef(0);
-    const dragDirectionRef = React.useRef(0);
-    const [dragDistance, setDragDistance] = React.useState(0);
-    const [hideProgress, setHideProgress] = React.useState(0);
-    const paddingStyles = getPaddingStyles(padding);
-    const value = React.useMemo(() => ({
-        titleMounted,
-        setTitleMounted,
-        subtitleMounted,
-        setSubtitleMounted,
-        id,
-    }), [id, subtitleMounted, titleMounted]);
-    const resetDragData = () => {
-        dragStartCoordinatesRef.current = { x: 0, y: 0 };
-        dragLastCoordinateRef.current = 0;
-        dragDirectionRef.current = 0;
-        setDragDistance(0);
-    };
-    const handleDragStart = (e) => {
-        const el = e.target;
-        // Prioritize scrolling over modal swiping
-        if (el.scrollTop !== 0 || el.scrollLeft !== 0)
-            return;
-        // Start dragging only when starting on static elements
-        if (el.matches("input,textarea"))
-            return;
-        // Prevent the drag handling when browser tab swiping is triggering
-        if (clientPosition === "start" && e.targetTouches[0].clientX < DRAG_EDGE_BOUNDARY)
-            return;
-        setDragging(true);
-    };
-    // Once modal is closed - reset its drag data
-    const handleTransitionEnd = (e) => {
-        if (active)
-            return;
-        if (e.propertyName !== "transform")
-            return;
-        if (e.currentTarget !== e.target)
-            return;
-        resetDragData();
-    };
-    React.useEffect(() => {
-        if (!dragging)
-            return;
-        const handleDragEnd = () => {
-            setDragging(false);
-            // Close only when dragging in the closing direction
-            // Changing to a different direction will keep the modal opened
-            const shouldClose = clientPosition === "start" ? dragDirectionRef.current < 0 : dragDirectionRef.current > 0;
-            if (Math.abs(dragDistanceRef.current) > DRAG_THRESHOLD && shouldClose) {
-                onClose === null || onClose === void 0 ? void 0 : onClose();
-            }
-            else {
-                resetDragData();
-            }
-        };
-        const handleDrag = (e) => {
-            if (!dragging || clientPosition === "center")
-                return;
-            const target = e.targetTouches[0];
-            const coordinate = { x: target.clientX, y: target.clientY };
-            const key = clientPosition === "bottom" ? "y" : "x";
-            const oppositeKey = clientPosition === "bottom" ? "x" : "y";
-            // Save the initial coordinates
-            if (!dragStartCoordinatesRef.current[key]) {
-                dragStartCoordinatesRef.current = coordinate;
-                dragLastCoordinateRef.current = coordinate[key];
-            }
-            const next = Math.abs(coordinate[key] - dragStartCoordinatesRef.current[key]);
-            const nextOpposite = Math.abs(coordinate[oppositeKey] - dragStartCoordinatesRef.current[oppositeKey]);
-            // For start/end drawers - ignore the swiping
-            // If user is scrolling vertically more than swiping
-            if (position !== "bottom" &&
-                (next < nextOpposite || nextOpposite > DRAG_OPPOSITE_THRESHOLD)) {
-                dragLastCoordinateRef.current = coordinate[key];
-                return;
-            }
-            dragDirectionRef.current = coordinate[key] - dragLastCoordinateRef.current;
-            dragLastCoordinateRef.current = coordinate[key];
-            setDragDistance((prev) => clientPosition === "start"
-                ? Math.min(0, prev + dragDirectionRef.current)
-                : Math.max(0, prev + dragDirectionRef.current));
-        };
-        document.addEventListener("touchmove", handleDrag);
-        document.addEventListener("touchend", handleDragEnd);
-        return () => {
-            document.removeEventListener("touchmove", handleDrag);
-            document.removeEventListener("touchend", handleDragEnd);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [dragging, clientPosition]);
-    // Syncing distance to the ref to avoid having a dependency on dragDistance in handleDragEnd
-    React.useEffect(() => {
-        const rootEl = rootRef.current;
-        if (!rootEl || !clientPosition)
-            return;
-        const isInline = ["start", "end"].includes(clientPosition);
-        const size = isInline ? rootEl.clientWidth : rootEl.clientHeight;
-        const progress = Math.abs(dragDistance) / size;
-        setHideProgress(progress / 2);
-        dragDistanceRef.current = dragDistance;
-    }, [dragDistance, clientPosition]);
-    return (React.createElement(Overlay, { onClose: onClose, active: active, transparent: transparentOverlay || hideProgress, attributes: {
-            onTouchStart: handleDragStart,
-        } }, ({ active }) => {
-        const rootClassNames = classNames(s.root, className, paddingStyles === null || paddingStyles === void 0 ? void 0 : paddingStyles.classNames, active && s["--active"], dragging && s["--dragging"], responsiveClassNames(s, "--position", position));
-        return (React.createElement(Context.Provider, { value: value },
-            React.createElement("div", Object.assign({}, attributes, { style: Object.assign(Object.assign(Object.assign({}, paddingStyles === null || paddingStyles === void 0 ? void 0 : paddingStyles.variables), responsiveVariables("--rs-modal-size", size)), { "--rs-modal-drag": Math.abs(dragDistance) < DRAG_THRESHOLD
-                        ? "0px"
-                        : `${dragDistance + DRAG_THRESHOLD * (clientPosition === "start" ? 1 : -1)}px` }), "aria-labelledby": titleMounted ? `${id}-title` : undefined, "aria-describedby": subtitleMounted ? `${id}-subtitle` : undefined, className: rootClassNames, "aria-modal": "true", role: "dialog", ref: rootRef, onTransitionEnd: handleTransitionEnd }), children)));
-    }));
-};
-Modal.Title = ModalTitle;
-Modal.Subtitle = ModalSubtitle;
-export default Modal;

package/components/Modal/Modal.types.d.ts

@@ -1,26 +0,0 @@
-import React from "react";
-import type * as G from "../../types/global";
-export type Context = {
-    id: string;
-    titleMounted: boolean;
-    setTitleMounted: (b: boolean) => void;
-    subtitleMounted: boolean;
-    setSubtitleMounted: (b: boolean) => void;
-};
-export type TitleProps = {
-    children: React.ReactNode;
-};
-export type SubtitleProps = {
-    children: React.ReactNode;
-};
-export type Props = {
-    children?: React.ReactNode;
-    position?: G.Responsive<"center" | "end" | "bottom" | "start">;
-    size?: G.Responsive<string>;
-    padding?: G.Responsive<number>;
-    active?: boolean;
-    transparentOverlay?: boolean;
-    onClose?: () => void;
-    className?: G.ClassName;
-    attributes?: G.Attributes<"div", Props>;
-};

package/components/Overlay/Overlay.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import type * as T from "./Overlay.types";
-declare const Overlay: (props: T.Props) => React.JSX.Element | null;
-export default Overlay;

package/components/Overlay/Overlay.js

@@ -1,115 +0,0 @@
-"use client";
-import React from "react";
-import { onNextFrame } from "../../utilities/animation.js";
-import { classNames } from "../../utilities/helpers.js";
-import { trapFocus } from "../../utilities/a11y.js";
-import useToggle from "../../hooks/useToggle.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import useHotkeys from "../../hooks/useHotkeys.js";
-import useScrollLock from "../../hooks/useScrollLock.js";
-import useIsDismissible from "../../hooks/_private/useIsDismissible.js";
-import Portal from "../_private/Portal/index.js";
-import s from "./Overlay.module.css";
-const Overlay = (props) => {
-    const { active, children, transparent, onClose, className, attributes } = props;
-    const clickThrough = transparent === true;
-    const opacity = clickThrough ? 0 : (1 - (transparent || 0)) * 0.7;
-    const [mounted, setMounted] = React.useState(false);
-    const [animated, setAnimated] = React.useState(false);
-    const contentRef = React.useRef(null);
-    const isMouseDownValidRef = React.useRef(false);
-    const releaseFocusRef = React.useRef(null);
-    const { lockScroll, unlockScroll } = useScrollLock();
-    const { active: rendered, activate: render, deactivate: remove } = useToggle(active || false);
-    const { active: visible, activate: show, deactivate: hide } = useToggle(active || false);
-    const isDismissible = useIsDismissible(active, contentRef);
-    const rootClassNames = classNames(s.root, visible && s["--visible"], clickThrough && s["--click-through"], animated && s["--animated"], className);
-    const isInsideChild = (el) => {
-        if (!contentRef.current)
-            return;
-        const firstChild = contentRef.current.firstChild;
-        if (!firstChild)
-            return;
-        return firstChild.contains(el);
-    };
-    const trapFocusInside = () => {
-        if (!contentRef.current)
-            return;
-        releaseFocusRef.current = trapFocus(contentRef.current);
-    };
-    const cancelTrapFocus = () => {
-        if (!releaseFocusRef.current)
-            return;
-        releaseFocusRef.current();
-        releaseFocusRef.current = null;
-    };
-    const close = React.useCallback(() => {
-        if (!visible || !isDismissible())
-            return;
-        if (onClose)
-            onClose();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [visible, isDismissible]);
-    const handleMouseDown = (event) => {
-        isMouseDownValidRef.current = !isInsideChild(event.target);
-    };
-    const handleMouseUp = (event) => {
-        const isMouseUpValid = !isInsideChild(event.target);
-        const shouldClose = isMouseDownValidRef.current && isMouseUpValid && !clickThrough;
-        if (!shouldClose)
-            return;
-        close();
-    };
-    const handleTransitionEnd = (e) => {
-        if (e.propertyName !== "transform" || !e.pseudoElement)
-            return;
-        setAnimated(false);
-        if (visible)
-            return;
-        if (!clickThrough)
-            unlockScroll();
-        remove();
-    };
-    useHotkeys({ Escape: close }, [close]);
-    React.useEffect(() => {
-        setAnimated(true);
-        if (active && !rendered)
-            render();
-        if (!active && rendered)
-            hide();
-    }, [active, render, hide, rendered]);
-    // Show overlay after it was rendered
-    React.useEffect(() => {
-        if (!rendered)
-            return;
-        if (!clickThrough)
-            lockScroll();
-        onNextFrame(() => {
-            show();
-        });
-    }, [rendered, show, lockScroll, clickThrough]);
-    React.useEffect(() => {
-        if (!rendered)
-            return;
-        trapFocusInside();
-        return () => cancelTrapFocus();
-    }, [rendered]);
-    // Unlock scroll on unmount
-    React.useEffect(() => {
-        return () => {
-            if (!clickThrough)
-                unlockScroll();
-        };
-    }, [unlockScroll, clickThrough]);
-    useIsomorphicLayoutEffect(() => {
-        setMounted(true);
-    }, []);
-    if (!rendered || !mounted)
-        return null;
-    return (React.createElement(Portal, null,
-        React.createElement(Portal.Scope, null, (ref) => (React.createElement("div", Object.assign({}, attributes, { ref: ref, style: { "--rs-overlay-opacity": opacity }, role: "button", tabIndex: -1, className: rootClassNames, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTransitionEnd: handleTransitionEnd }),
-            React.createElement("div", { className: s.wrapper },
-                React.createElement("div", { className: s.inner },
-                    React.createElement("div", { className: s.content, ref: contentRef }, typeof children === "function" ? children({ active: visible }) : children))))))));
-};
-export default Overlay;

package/components/Overlay/Overlay.module.css

@@ -1 +0,0 @@
-.root{-webkit-overflow-scrolling:touch;color:var(--rs-color-white);cursor:default!important;overflow:auto;z-index:var(--rs-z-index-overlay)}.root,.root:after{inset:0;position:fixed}.root:after{background:var(--rs-color-black);content:"";opacity:0;transform:scale(1.01)}.wrapper{display:table;height:100%;width:100%}.inner{display:table-cell;text-align:center}.content,.inner{vertical-align:middle}.content{display:inline-block;position:relative;text-align:initial;z-index:var(--rs-z-index-raised)}.root.--visible:after{opacity:var(--rs-overlay-opacity);transform:scale(1)}.root.--click-through{color:inherit;pointer-events:none}.root.--click-through .content,.root.--click-through>:not(.wrapper){pointer-events:all}.root.--animated:after{transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:opacity,transform}

package/components/Overlay/Overlay.types.d.ts

@@ -1,12 +0,0 @@
-import React from "react";
-import type * as G from "../../types/global";
-export type Props = {
-    transparent?: boolean | number;
-    children?: React.ReactNode | ((props: {
-        active: boolean;
-    }) => React.ReactNode);
-    active?: boolean;
-    onClose?: () => void;
-    className?: G.ClassName;
-    attributes?: G.Attributes<"div", Props>;
-};

package/components/Popover/Popover.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import type * as T from "./Popover.types";
-declare const Popover: {
-    (props: T.Props): React.JSX.Element;
-    Trigger: (props: import("../_private/Flyout").FlyoutTriggerProps) => React.JSX.Element;
-    Content: (props: import("../_private/Flyout").FlyoutContentProps) => React.JSX.Element | null;
-};
-export default Popover;

package/components/Popover/Popover.js

@@ -1,19 +0,0 @@
-import React from "react";
-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
-    React.createElement(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));
-};
-Popover.Trigger = Flyout.Trigger;
-Popover.Content = Flyout.Content;
-export default Popover;

package/components/Popover/Popover.types.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import type { FlyoutProps } from "../_private/Flyout";
-export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "instanceRef" | "triggerType" | "disableHideAnimation"> & {
-    children?: React.ReactNode;
-    padding?: number;
-    variant?: "elevated" | "headless";
-};

package/components/Progress/Progress.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import type * as T from "./Progress.types";
-declare const Progress: (props: T.Props) => React.JSX.Element;
-export default Progress;

package/components/Progress/Progress.js

@@ -1,18 +0,0 @@
-import React from "react";
-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 (React.createElement("div", Object.assign({ role: "progressbar" }, attributes, { className: rootClassNames, "aria-valuemax": max, "aria-valuemin": min, "aria-valuenow": value }),
-        React.createElement("div", { className: s.value, style: {
-                "--rs-progress-value": translate,
-                "--rs-progress-duration": duration ? `${duration}ms` : undefined,
-            } })));
-};
-export default Progress;

package/components/Radio/Radio.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import type * as T from "./Radio.types";
-declare const Radio: (props: T.Props) => React.JSX.Element;
-export default Radio;

package/components/Radio/Radio.js

@@ -1,34 +0,0 @@
-"use client";
-import React from "react";
-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 (React.createElement("label", Object.assign({}, attributes, { className: rootClassName }),
-        React.createElement("span", { className: s.field },
-            React.createElement(HiddenInput, { className: s.input, type: "radio", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, attributes: inputAttributes }),
-            React.createElement("div", { className: s.decorator })),
-        children && React.createElement("span", { className: s.text }, children)));
-};
-export default Radio;

package/components/Radio/Radio.module.css

@@ -1 +0,0 @@
-.root{-webkit-tap-highlight-color:transparent;align-items:center;cursor:pointer;display:inline-flex;user-select:none;vertical-align:top}.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 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.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import type * as T from "./RadioGroup.types";
-declare const RadioGroup: (props: T.Props) => React.JSX.Element;
-export default RadioGroup;

package/components/RadioGroup/RadioGroup.js

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

package/components/RadioGroup/RadioGroup.types.d.ts

@@ -1,28 +0,0 @@
-import React from "react";
-import type * as G from "../../types/global";
-import { RadioProps } from "../Radio";
-type BaseProps = {
-    id?: string;
-    children?: React.ReactNode;
-    disabled?: boolean;
-    name: string;
-    hasError?: boolean;
-    onChange?: G.ChangeHandler<string>;
-};
-export type ControlledProps = BaseProps & {
-    value: string | null;
-    defaultValue?: never;
-};
-export type UncontrolledProps = BaseProps & {
-    value?: never;
-    defaultValue?: string;
-};
-export type Props = ControlledProps | UncontrolledProps;
-export type Context = {
-    onChange: RadioProps["onChange"];
-    hasError?: boolean;
-    disabled?: boolean;
-    name: string;
-    value?: string | null;
-};
-export {};

package/components/RadioGroup/RadioGroupControlled.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import type * as T from "./RadioGroup.types";
-declare const RadioGroupControlled: (props: T.ControlledProps) => React.JSX.Element;
-export default RadioGroupControlled;

package/components/RadioGroup/RadioGroupControlled.js

@@ -1,14 +0,0 @@
-"use client";
-import React from "react";
-import Context from "./RadioGroup.context.js";
-const RadioGroupControlled = (props) => {
-    const { onChange, name, disabled, value, children, hasError } = props;
-    const handleChange = ({ event, value }) => {
-        if (!value)
-            return;
-        if (onChange)
-            onChange({ name, value, event });
-    };
-    return (React.createElement(Context.Provider, { value: { onChange: handleChange, disabled, value, name, hasError } }, children));
-};
-export default RadioGroupControlled;

package/components/RadioGroup/RadioGroupUncontrolled.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import type * as T from "./RadioGroup.types";
-declare const RadioGroupUncontrolled: (props: T.UncontrolledProps) => React.JSX.Element;
-export default RadioGroupUncontrolled;

package/components/RadioGroup/RadioGroupUncontrolled.js

@@ -1,16 +0,0 @@
-"use client";
-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 (React.createElement(RadioGroupControlled, Object.assign({}, props, { value: value, defaultValue: undefined, onChange: handleChange })));
-};
-export default RadioGroupUncontrolled;

package/components/Reshaped/Reshaped.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-import type * as T from "./Reshaped.types";
-import "./Reshaped.css";
-declare const Reshaped: (props: T.Props) => React.JSX.Element;
-export default Reshaped;

package/components/Reshaped/Reshaped.js

@@ -1,26 +0,0 @@
-"use client";
-import React from "react";
-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 (React.createElement(SingletonEnvironmentContext.Provider, { value: { rtl: rtlState, defaultViewport } },
-        React.createElement(SingletonHotkeysProvider, null,
-            React.createElement(ToastProvider, { options: toastOptions }, children))));
-};
-const Reshaped = (props) => {
-    const { theme, defaultTheme = "reshaped", defaultColorMode, className } = props;
-    const rootClassNames = classNames(s.root, className);
-    return (React.createElement(GlobalColorMode, { defaultMode: defaultColorMode },
-        React.createElement(Theme, { name: theme, defaultName: defaultTheme, className: rootClassNames },
-            React.createElement(ReshapedInner, Object.assign({}, props), props.children))));
-};
-export default Reshaped;

package/components/Scrim/Scrim.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import type * as T from "./Scrim.types";
-declare const Scrim: (props: T.Props) => React.JSX.Element;
-export default Scrim;