reshaped 2.8.0 → 2.8.1

package/dist/components/Icon/Icon.d.ts

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

package/dist/components/Icon/Icon.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import getHeightStyles from "../../styles/height/index.js";
+import s from "./Icon.module.css";
+const Icon = (props) => {
+    const { svg: Component, className, color, size = "1em", autoWidth, attributes } = props;
+    const heightStyles = getHeightStyles(size);
+    const rootClassName = classNames(s.root, className, heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.classNames, color && s[`--color-${color}`], autoWidth && s["--auto"]);
+    const icon = React.isValidElement(Component) ? (Component) : (
+    // @ts-ignore
+    _jsx(Component, {}));
+    const style = Object.assign(Object.assign({}, attributes === null || attributes === void 0 ? void 0 : attributes.style), heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.variables);
+    return (
+    // All icons are decorative, a11y attributes should be set for buttons wrapping them
+    _jsx("span", Object.assign({}, attributes, { "aria-hidden": "true", className: rootClassName, style: style, children: React.cloneElement(icon, { focusable: false }) })));
+};
+export default Icon;

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

@@ -0,0 +1,10 @@
+import type React from "react";
+import type * as G from "../../types/global";
+export type Props = {
+    svg: React.ReactElement | React.ComponentType;
+    size?: G.Responsive<number | string>;
+    color?: "neutral" | "neutral-faded" | "positive" | "critical" | "warning" | "primary" | "disabled";
+    autoWidth?: boolean;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"span", Props>;
+};

package/dist/components/Image/Image.d.ts

@@ -0,0 +1,3 @@
+import * as T from "./Image.types";
+declare const Image: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
+export default Image;

package/dist/components/Image/Image.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import s from "./Image.module.css";
+import getRadiusStyles from "../../styles/radius/index.js";
+import getWidthStyles from "../../styles/width/index.js";
+import getHeightStyles from "../../styles/height/index.js";
+const Image = (props) => {
+    const { src, alt, width, height, onLoad, onError, fallback, displayMode = "cover", borderRadius, className, attributes, imageAttributes, } = props;
+    const [status, setStatus] = React.useState("loading");
+    const radiusStyles = getRadiusStyles(borderRadius);
+    const widthStyles = getWidthStyles(width);
+    const heightStyles = getHeightStyles(height);
+    const baseClassNames = classNames(s.root, radiusStyles === null || radiusStyles === void 0 ? void 0 : radiusStyles.classNames, widthStyles === null || widthStyles === void 0 ? void 0 : widthStyles.classNames, heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.classNames, displayMode && s[`--display-mode-${displayMode}`], className);
+    const imgClassNames = classNames(s.image, baseClassNames);
+    const fallbackClassNames = classNames(s.fallback, baseClassNames);
+    const style = Object.assign(Object.assign({}, widthStyles === null || widthStyles === void 0 ? void 0 : widthStyles.variables), heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.variables);
+    const handleLoad = (e) => {
+        setStatus("success");
+        onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
+    };
+    const handleError = (e) => {
+        setStatus("error");
+        onError === null || onError === void 0 ? void 0 : onError(e);
+    };
+    React.useEffect(() => {
+        setStatus("loading");
+    }, [src]);
+    if ((status === "error" || !src) && !!fallback) {
+        if (typeof fallback === "string") {
+            return (_jsx("img", Object.assign({}, attributes, { src: fallback, alt: alt, role: alt ? undefined : "presentation", className: fallbackClassNames, style: style })));
+        }
+        return (_jsx("div", Object.assign({}, attributes, { className: fallbackClassNames, style: style, children: fallback })));
+    }
+    return (_jsx("img", Object.assign({}, attributes, imageAttributes, { src: src, alt: alt, role: alt ? undefined : "presentation", onLoad: handleLoad, onError: handleError, className: imgClassNames, style: style })));
+};
+export default Image;

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

@@ -0,0 +1,19 @@
+import type React from "react";
+import type * as G from "../../types/global";
+import type * as TStyles from "../../styles/types";
+export type Props = {
+    src?: string;
+    alt?: string;
+    width?: G.Responsive<string | number>;
+    height?: G.Responsive<string | number>;
+    onLoad?: (e: React.SyntheticEvent) => void;
+    onError?: (e: React.SyntheticEvent) => void;
+    fallback?: string | React.ReactNode | boolean;
+    displayMode?: "cover" | "contain";
+    borderRadius?: Extract<TStyles.Radius, "small" | "medium" | "large">;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props & {
+        ref: any;
+    }>;
+    imageAttributes?: G.Attributes<"img", Props>;
+};

package/dist/components/Link/Link.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import Actionable from "../Actionable/index.js";
+import Icon from "../Icon/index.js";
+import s from "./Link.module.css";
+const Link = (props, ref) => {
+    const { icon, disabled, href, color = "primary", variant = "underline", className, children, attributes, type, onClick, } = props;
+    const rootClassNames = classNames(s.root, className, disabled && s["--disabled"], variant && s[`--variant-${variant}`], color && s[`--color-${color}`], icon && s["--with-icon"]);
+    return (_jsxs(Actionable, { href: href, disabled: disabled, className: rootClassNames, attributes: attributes, type: type, onClick: onClick, ref: ref, children: [icon && _jsx(Icon, { svg: icon }), children] }));
+};
+export default React.forwardRef(Link);

package/dist/components/Loader/Loader.d.ts

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

package/dist/components/Loader/Loader.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames, responsiveClassNames } from "../../utilities/helpers.js";
+import s from "./Loader.module.css";
+const Loader = (props) => {
+    const { size = "small", color = "primary", className, attributes } = props;
+    const ariaLabel = attributes === null || attributes === void 0 ? void 0 : attributes["aria-label"];
+    const rootClassNames = classNames(s.root, className, responsiveClassNames(s, "--size", size), color && s[`--color-${color}`]);
+    return (_jsx("span", Object.assign({}, attributes, { role: "progressbar", "aria-live": ariaLabel ? "assertive" : undefined, "aria-label": ariaLabel, className: rootClassNames, children: _jsx("span", { className: s.inner }) })));
+};
+export default Loader;

package/dist/components/MenuItem/MenuItem.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/helpers.js";
+import Actionable from "../Actionable/index.js";
+import Icon from "../Icon/index.js";
+import View from "../View/index.js";
+import MenuItemAligner from "./MenuItemAligner.js";
+import s from "./MenuItem.module.css";
+const MenuItemBase = (props, ref) => {
+    const { icon, startSlot, endSlot, children, color = "primary", selected, disabled, onClick, href, size = "medium", roundedCorners, className, attributes, } = props;
+    const rootClassNames = classNames(s.root, className, responsiveClassNames(s, "--size", size), responsiveClassNames(s, "--rounded-corners", roundedCorners), color && s[`--color-${color}`], selected && s["--selected"], disabled && s["--disabled"]);
+    const gapSize = responsivePropDependency(size, (size) => (size === "large" ? 3 : 2));
+    const iconSize = responsivePropDependency(size, (size) => (size === "large" ? 5 : 4));
+    return (_jsx(Actionable, { disabled: disabled, className: rootClassNames, attributes: Object.assign(Object.assign({}, attributes), { "data-rs-aligner-target": true }), onClick: onClick, href: href, ref: ref, children: _jsxs(View, { direction: "row", gap: gapSize, align: "center", children: [icon && _jsx(Icon, { svg: icon, className: s.icon, size: iconSize }), !icon && startSlot, children && (_jsx(View.Item, { grow: true, className: s.content, children: children })), endSlot] }) }));
+};
+const MenuItem = React.forwardRef(MenuItemBase);
+MenuItem.Aligner = MenuItemAligner;
+export default MenuItem;

package/dist/components/MenuItem/MenuItemAligner.d.ts

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

package/dist/components/MenuItem/MenuItemAligner.js

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

package/dist/components/Modal/Modal.d.ts

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

package/dist/components/Modal/Modal.js

@@ -0,0 +1,163 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+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 (_jsx(Text, { variant: "featured-3", weight: "bold", attributes: { id: `${id}-title` }, children: children }));
+};
+const ModalSubtitle = (props) => {
+    const { children } = props;
+    const { id, setSubtitleMounted } = useModal();
+    React.useEffect(() => {
+        setSubtitleMounted(true);
+        return () => setSubtitleMounted(false);
+    }, [setSubtitleMounted]);
+    return (_jsx(Text, { variant: "body-3", color: "neutral-faded", attributes: { id: `${id}-subtitle` }, children: 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 (_jsx(Overlay, { onClose: onClose, active: active, transparent: transparentOverlay || hideProgress, attributes: {
+            onTouchStart: handleDragStart,
+        }, children: ({ 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 (_jsx(Context.Provider, { value: value, children: _jsx("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: children })) }));
+        } }));
+};
+Modal.Title = ModalTitle;
+Modal.Subtitle = ModalSubtitle;
+export default Modal;

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

@@ -0,0 +1,26 @@
+import type 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/dist/components/Overlay/Overlay.d.ts

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

package/dist/components/Overlay/Overlay.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+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 (_jsx(Portal, { children: _jsx(Portal.Scope, { children: (ref) => (_jsx("div", Object.assign({}, attributes, { ref: ref, style: { "--rs-overlay-opacity": opacity }, role: "button", tabIndex: -1, className: rootClassNames, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTransitionEnd: handleTransitionEnd, children: _jsx("div", { className: s.wrapper, children: _jsx("div", { className: s.inner, children: _jsx("div", { className: s.content, ref: contentRef, children: typeof children === "function" ? children({ active: visible }) : children }) }) }) }))) }) }));
+};
+export default Overlay;

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

@@ -0,0 +1,12 @@
+import type 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/dist/components/Popover/Popover.d.ts

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

package/dist/components/Popover/Popover.js

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

@@ -0,0 +1,7 @@
+import type 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/dist/components/Progress/Progress.d.ts

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

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", 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/dist/components/Radio/Radio.d.ts

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

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 === 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/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", 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/dist/components/RadioGroup/RadioGroup.d.ts

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

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, Object.assign({}, props));
+    return _jsx(RadioGroupUncontrolled, Object.assign({}, props));
+};
+export default RadioGroup;