reshaped 2.11.12 → 3.0.1

package/components/Theme/useTheme.js

@@ -1,18 +0,0 @@
-"use client";
-import React from "react";
-import { ThemeContext, GlobalColorModeContext } from "./Theme.context.js";
-export const useGlobalColorMode = () => {
-    const { mode } = React.useContext(GlobalColorModeContext);
-    return mode;
-};
-export const useTheme = () => {
-    const { colorMode, theme, setTheme } = React.useContext(ThemeContext);
-    const { mode, setMode, invertMode } = React.useContext(GlobalColorModeContext);
-    return React.useMemo(() => ({
-        theme,
-        setTheme,
-        colorMode: colorMode || mode,
-        setColorMode: setMode,
-        invertColorMode: invertMode,
-    }), [colorMode, mode, setMode, invertMode, theme, setTheme]);
-};

package/components/Timeline/Timeline.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { classNames } from "../../utilities/helpers.js";
-import View from "../View/index.js";
-import s from "./Timeline.module.css";
-const TimelineItem = (props) => {
-    const { children, markerSlot, className, attributes } = props;
-    const hasMarker = markerSlot !== null;
-    const itemClassNames = classNames(s.item, !hasMarker && s["item--full-width"], className);
-    return (_jsxs(View, { as: "li", direction: "row", align: "stretch", gap: 3, attributes: attributes, className: itemClassNames, children: [hasMarker && _jsx("span", { className: s.marker, children: markerSlot }), _jsx(View.Item, { grow: true, children: children })] }));
-};
-const Timeline = (props) => {
-    const { children, className, attributes } = props;
-    const rootClassNames = classNames(className);
-    return (_jsx("ul", Object.assign({}, attributes, { className: rootClassNames, children: React.Children.map(children, (child, index) => {
-            return (child === null || child === void 0 ? void 0 : child.type) === TimelineItem ? (child) : (_jsx(TimelineItem, { children: child }, index));
-        }) })));
-};
-Timeline.Item = TimelineItem;
-export default Timeline;

package/components/Timeline/Timeline.types.d.ts

@@ -1,13 +0,0 @@
-import type React from "react";
-import type * as G from "../../types/global";
-export type Props = {
-    children?: React.ReactNode;
-    className?: G.ClassName;
-    attributes?: G.Attributes<"ul", Props>;
-};
-export type ItemProps = {
-    markerSlot?: React.ReactNode | null;
-    children?: React.ReactNode;
-    className?: G.ClassName;
-    attributes?: G.Attributes<"li", ItemProps>;
-};

package/components/Toast/Toast.constants.js

@@ -1,21 +0,0 @@
-export const timeouts = {
-    short: 4000,
-    long: 8000,
-};
-export const positions = [
-    "top-start",
-    "top",
-    "top-end",
-    "bottom-start",
-    "bottom",
-    "bottom-end",
-];
-const defaultPositionData = positions.reduce((acc, cur) => (Object.assign({ [cur]: [] }, acc)), {});
-export const defaultContextData = {
-    queues: defaultPositionData,
-    id: "",
-    show: () => { },
-    hide: () => { },
-    remove: () => { },
-    add: () => "",
-};

package/components/Toast/Toast.js

@@ -1,44 +0,0 @@
-"use client";
-import { createElement as _createElement } from "react";
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import View from "../View/index.js";
-import Button from "../Button/index.js";
-import Icon from "../Icon/index.js";
-import Theme from "../Theme/index.js";
-import Text from "../Text/index.js";
-import s from "./Toast.module.css";
-const Toast = (props) => {
-    const { size = "small", text, children, color = "inverted", icon, title, actionsSlot, startSlot, collapsed, className, attributes, } = props;
-    let backgroundColor = color === "inverted" || color === "neutral" ? "elevation-overlay" : color;
-    if (color === "neutral")
-        backgroundColor = collapsed ? "neutral" : "elevation-overlay";
-    const borderColor = color === "neutral" ? "neutral-faded" : "transparent";
-    const textTagName = size === "small" ? "span" : "div";
-    const isLarge = size === "large";
-    let actions = [];
-    if (actionsSlot) {
-        actions = Array.isArray(actionsSlot) ? actionsSlot : [actionsSlot];
-    }
-    const textContent = (title || text) && (_jsxs(_Fragment, { children: [title && (_jsxs(Text, { variant: "body-3", weight: "bold", as: textTagName, children: [title, " "] })), _jsx(Text, { variant: "body-3", as: textTagName, children: text })] }));
-    const toastNode = (_jsxs(View, { backgroundColor: backgroundColor, borderColor: borderColor, padding: 4, borderRadius: "medium", animated: true, direction: "row", gap: 3, align: isLarge ? "start" : "center", className: [s.toast, className], attributes: attributes, children: [icon && _jsx(Icon, { size: 5, svg: icon, className: s.icon }), startSlot && !icon && _jsx(View.Item, { children: startSlot }), _jsx(View.Item, { grow: true, children: _jsxs(View, { direction: isLarge ? "column" : "row", align: isLarge ? "start" : "center", gap: 3, children: [_jsx(View.Item, { grow: true, children: (textContent && children) || size !== "small" ? (_jsxs(View, { gap: 0.5, children: [textContent, children && _jsx(View, { gap: 3, children: children })] })) : (textContent || children) }), actions.length && (_jsx(View, { direction: "row", align: "center", gap: 2, children: actions.map((slot, index) => {
-                                const isPrimary = size === "large" ? index === 0 : index === actions.length - 1;
-                                const primaryColor = color === "neutral" || color === "inverted" ? "neutral" : "white";
-                                const defaultProps = {
-                                    variant: isPrimary ? "solid" : "ghost",
-                                    size: "small",
-                                    color: isPrimary ? primaryColor : "inherit",
-                                    elevated: color !== "neutral",
-                                };
-                                if (slot.type === Button) {
-                                    return _createElement(Button, Object.assign({}, defaultProps, slot.props, { key: index }));
-                                }
-                                else {
-                                    return slot;
-                                }
-                            }) }))] }) })] }));
-    if (color === "inverted") {
-        return _jsx(Theme, { colorMode: "inverted", children: toastNode });
-    }
-    return toastNode;
-};
-export default Toast;

package/components/Toast/Toast.module.css

@@ -1 +0,0 @@
-.container{display:block;opacity:0;position:relative;transition:var(--rs-duration-medium) ease-out;transition-property:transform,height,opacity;width:100%}.container--visible{opacity:1}.container--visible .wrapper{height:calc(100% - var(--rs-unit-x2))}.container--index-0{z-index:var(--rs-z-index-raised)}.container--index-1{height:var(--rs-unit-x2)!important}.container--index-1 .wrapper{height:100%;transform:translateY(calc(var(--rs-unit-x1) * -1)) translateZ(0) scaleX(.9)}.container--index-2{height:var(--rs-unit-x2)!important}.container--index-2 .wrapper{height:100%;transform:translateY(calc(var(--rs-unit-x2) * -1)) translateZ(0) scaleX(.8)}.container--index-overflow{height:0!important}.container--index-overflow .wrapper{height:100%;opacity:0;transform:translateY(calc(var(--rs-unit-x3) * -1)) translateZ(0) scaleX(.8)}.wrapper{border-radius:var(--rs-unit-radius-medium);box-shadow:var(--rs-shadow-overlay);height:100%;margin-top:var(--rs-unit-x2);overflow:hidden;transform-origin:50% 0;transition:var(--rs-duration-medium) ease-out;transition-property:height,transform,opacity}.region,.wrapper{display:flex;flex-direction:column}.region{max-width:100%;padding:var(--rs-unit-x4);position:fixed;width:100%;z-index:var(--rs-z-index-notification)}.region--nested{position:absolute}.region--position-top{align-items:center;left:50%;top:0;transform:translateX(-50%)}.region--position-top-start{align-items:start;inset-inline-start:0;top:0}.region--position-top-end{inset-inline-end:0;top:0}.region--position-top,.region--position-top-end,.region--position-top-start{flex-direction:column-reverse}.region--position-top .wrapper,.region--position-top-end .wrapper,.region--position-top-start .wrapper{justify-content:flex-end;margin-bottom:var(--rs-unit-x2);margin-top:0;transform-origin:bottom}.region--position-top .container--index-2 .wrapper,.region--position-top-end .container--index-2 .wrapper,.region--position-top-start .container--index-2 .wrapper{transform:translateY(0) translateZ(0) scaleX(.8)}.region--position-top .container--index-overflow .wrapper,.region--position-top-end .container--index-overflow .wrapper,.region--position-top-start .container--index-overflow .wrapper{transform:translateY(var(--rs-unit-x1)) translateZ(0) scaleX(.8)}.region--position-bottom{align-items:center;bottom:0;left:50%;transform:translateX(-50%)}.region--position-bottom-start{align-items:start;bottom:0;inset-inline-start:0}.region--position-bottom-end{align-items:end;bottom:0;inset-inline-end:0}@media (--rs-viewport-m ){.region{width:360px}}

package/components/Toast/Toast.types.d.ts

@@ -1,80 +0,0 @@
-import type React from "react";
-import type { IconProps } from "../Icon";
-import type * as G from "../../types/global";
-export type Status = "entering" | "entered" | "exited";
-export type TimeoutAlias = "short" | "long";
-export type Timeout = TimeoutAlias | number;
-export type Position = "top" | "top-end" | "top-start" | "bottom" | "bottom-start" | "bottom-end";
-export type Props = {
-    size?: "small" | "medium" | "large";
-    icon?: IconProps["svg"];
-    startSlot?: React.ReactNode;
-    title?: React.ReactNode;
-    text?: React.ReactNode;
-    children?: React.ReactNode;
-    actionsSlot?: React.ReactNode;
-    color?: "neutral" | "primary" | "critical" | "positive" | "inverted";
-    className?: G.ClassName;
-    attributes?: G.Attributes<"div", Props>;
-};
-export type ProviderProps = {
-    children?: React.ReactNode;
-    options?: Partial<Record<RegionProps["position"], {
-        width?: string;
-        expanded?: boolean;
-    }>>;
-};
-export type RegionProps = {
-    position: Position;
-    nested?: boolean;
-};
-export type ContainerProps = {
-    id: string;
-    toastProps: Props & {
-        timeout?: Timeout;
-    };
-    index: number;
-    status?: "entering" | "entered" | "exiting";
-    inspected: boolean;
-};
-export type Context = {
-    options?: ProviderProps["options"];
-    queues: Record<RegionProps["position"], Array<ContainerProps>>;
-    add: (toast: Props & ShowOptions) => string;
-    show: (id: string) => void;
-    hide: (id: string) => void;
-    remove: (id: string) => void;
-    id: string;
-};
-export type ShowOptions = {
-    timeout?: Timeout;
-    position?: Position;
-};
-type AddAction = {
-    type: "add";
-    payload: {
-        toastProps: Props & ShowOptions;
-        id: string;
-    };
-};
-type ShowAction = {
-    type: "show";
-    payload: {
-        id: string;
-    };
-};
-type HideAction = {
-    type: "hide";
-    payload: {
-        id: string;
-    };
-};
-type RemoveAction = {
-    type: "remove";
-    payload: {
-        id: string;
-    };
-};
-type Action = AddAction | ShowAction | HideAction | RemoveAction;
-export type Reducer = (state: Context["queues"], action: Action) => Context["queues"];
-export {};

package/components/Toast/ToastContainer.js

@@ -1,96 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { classNames } from "../../utilities/helpers.js";
-import { onNextFrame } from "../../utilities/animation.js";
-import { checkKeyboardMode } from "../../utilities/a11y/keyboardMode.js";
-import TrapFocus from "../../utilities/a11y/TrapFocus.js";
-import Toast from "./Toast.js";
-import ToastContext from "./Toast.context.js";
-import { timeouts } from "./Toast.constants.js";
-import s from "./Toast.module.css";
-const ToastContainer = (props) => {
-    const { toastProps, id, status, inspected, index } = props;
-    const { timeout = "short" } = toastProps;
-    const { show, hide, remove } = React.useContext(ToastContext);
-    const [toastHeight, setToastHeight] = React.useState();
-    const timeoutRef = React.useRef();
-    const resizingRef = React.useRef(false);
-    const wrapperRef = React.useRef(null);
-    const visible = status === "entered";
-    const containerClassNames = classNames(s.container, visible && s[`container--visible`], index === 0 && s[`container--index-${index}`], !inspected && (index === 1 || index === 2) && s[`container--index-${index}`], !inspected && index >= 3 && s["container--index-overflow"]);
-    const stopTimer = React.useCallback(() => {
-        if (!timeoutRef.current)
-            return;
-        clearTimeout(timeoutRef.current);
-    }, []);
-    const startTimer = React.useCallback(() => {
-        stopTimer();
-        const timeoutValue = typeof timeout === "string" ? timeouts[timeout] : timeout;
-        if (timeout === 0)
-            return;
-        timeoutRef.current = setTimeout(() => {
-            hide(id);
-        }, timeoutValue !== null && timeoutValue !== void 0 ? timeoutValue : timeouts.short);
-    }, [hide, id, timeout, stopTimer]);
-    const handleTransitionEnd = (e) => {
-        if (e.propertyName !== "height")
-            return;
-        if (visible)
-            return;
-        remove(id);
-    };
-    React.useEffect(() => {
-        if (!visible)
-            return;
-        if (inspected) {
-            stopTimer();
-        }
-        else {
-            startTimer();
-        }
-    }, [inspected, startTimer, stopTimer, visible]);
-    React.useEffect(() => {
-        if (wrapperRef.current) {
-            setToastHeight(wrapperRef.current.clientHeight);
-        }
-        show(id);
-        startTimer();
-    }, [show, id, startTimer]);
-    React.useEffect(() => {
-        if (!wrapperRef.current)
-            return;
-        const trapFocus = new TrapFocus(wrapperRef.current);
-        if (visible) {
-            trapFocus.trap({
-                includeTrigger: true,
-                mode: "content-menu",
-            });
-        }
-        else if (checkKeyboardMode()) {
-            trapFocus.release();
-        }
-    }, [visible]);
-    React.useEffect(() => {
-        if (!visible || index > 0)
-            return;
-        const handleResize = () => {
-            resizingRef.current = true;
-            onNextFrame(() => {
-                resizingRef.current = false;
-            });
-            if (wrapperRef.current) {
-                setToastHeight(wrapperRef.current.clientHeight);
-            }
-        };
-        window.addEventListener("resize", handleResize);
-        return () => window.removeEventListener("resize", handleResize);
-    }, [visible, index]);
-    return (_jsx("li", { className: containerClassNames, style: {
-            // Height + padding + borders
-            height: status === "entered" ? `calc(${toastHeight}px + var(--rs-unit-x2) + 2px)` : 0,
-            // Disable transition when height of the toast can change
-            transitionDuration: resizingRef.current ? "0s" : undefined,
-        }, onTransitionEnd: handleTransitionEnd, onFocus: stopTimer, onBlur: startTimer, children: _jsx("span", { className: s.wrapper, children: _jsx(Toast, Object.assign({}, toastProps, { collapsed: index > 0 && !inspected, attributes: Object.assign(Object.assign({}, toastProps.attributes), { ref: wrapperRef }) })) }) }));
-};
-export default ToastContainer;

package/components/Toast/ToastProvider.js

@@ -1,85 +0,0 @@
-"use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import ToastContext from "./Toast.context.js";
-import ToastRegion from "./ToastRegion.js";
-import useToast from "./useToast.js";
-import { positions, defaultContextData } from "./Toast.constants.js";
-let counter = 0;
-const generateId = () => `__rs-toast-${counter++}`;
-const toastReducer = (state, action) => {
-    let nextState;
-    switch (action.type) {
-        case "add":
-            const _a = action.payload.toastProps || {}, { position = "bottom-end" } = _a, toastProps = __rest(_a, ["position"]);
-            return Object.assign(Object.assign({}, state), { [position]: [...state[position], { id: action.payload.id, toastProps, status: "entering" }] });
-        case "show":
-            const { id: showId } = action.payload;
-            nextState = Object.assign({}, state);
-            positions.forEach((position) => {
-                nextState[position] = nextState[position].map((item) => {
-                    if (item.status !== "entering")
-                        return item;
-                    return item.id === showId ? Object.assign(Object.assign({}, item), { status: "entered" }) : item;
-                });
-            });
-            return nextState;
-        case "hide":
-            const { id: hideId } = action.payload;
-            nextState = Object.assign({}, state);
-            positions.forEach((position) => {
-                nextState[position] = nextState[position].map((item) => item.id === hideId ? Object.assign(Object.assign({}, item), { status: "exiting" }) : item);
-            });
-            return nextState;
-        case "remove":
-            const { id: removeId } = action.payload;
-            nextState = Object.assign({}, state);
-            positions.forEach((position) => {
-                nextState[position] = nextState[position].filter((item) => item.id !== removeId);
-            });
-            return nextState;
-    }
-};
-const ToastProvider = (props) => {
-    const { children, options } = props;
-    const toast = useToast();
-    const id = React.useId();
-    const [data, dispatch] = React.useReducer(toastReducer, defaultContextData.queues);
-    const add = React.useCallback((toastProps) => {
-        const id = generateId();
-        dispatch({ type: "add", payload: { toastProps, id } });
-        return id;
-    }, []);
-    const show = React.useCallback((id) => {
-        dispatch({ type: "show", payload: { id } });
-    }, []);
-    const hide = React.useCallback((id) => {
-        dispatch({ type: "hide", payload: { id } });
-    }, []);
-    const remove = React.useCallback((id) => {
-        dispatch({ type: "remove", payload: { id } });
-    }, []);
-    const value = React.useMemo(() => ({
-        queues: data,
-        id,
-        add,
-        show,
-        hide,
-        remove,
-        inspecting: false,
-        options,
-    }), [data, show, hide, add, remove, id, options]);
-    return (_jsxs(ToastContext.Provider, { value: value, children: [children, positions.map((position) => (_jsx(ToastRegion, { position: position, nested: !!toast.id }, position)))] }));
-};
-export default ToastProvider;

package/components/Toast/ToastRegion.js

@@ -1,64 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { classNames } from "../../utilities/helpers.js";
-import { focusableSelector } from "../../utilities/a11y/focus.js";
-import ToastContainer from "./ToastContainer.js";
-import ToastContext from "./Toast.context.js";
-import s from "./Toast.module.css";
-const ToastRegion = (props) => {
-    const { position, nested } = props;
-    const { queues, options } = React.useContext(ToastContext);
-    const [inspecting, setInspecting] = React.useState(false);
-    const ignoreHoverRef = React.useRef(false);
-    const rootRef = React.useRef(null);
-    const queue = queues[position];
-    const { width, expanded } = (options === null || options === void 0 ? void 0 : options[position]) || {};
-    const regionClassNames = classNames(s.region, s[`region--position-${position}`], nested && s["region--nested"]);
-    const filteredLength = queue.filter((item) => item.status === "entered").length;
-    let hiddenCount = 0;
-    // If touch event was triggered – ignore hover events
-    const handleTouchStart = () => {
-        ignoreHoverRef.current = true;
-    };
-    const handleClick = (e) => {
-        let currentEl = e.target;
-        let isFocusable = false;
-        while (currentEl && currentEl !== rootRef.current && !isFocusable) {
-            isFocusable = currentEl.matches(focusableSelector);
-            currentEl = currentEl.parentElement;
-        }
-        // Change inspecting mode when clicking on static content
-        if (!isFocusable) {
-            setInspecting((prevInspecting) => !prevInspecting);
-        }
-        // Click is called last so we reset our hover events ignore
-        ignoreHoverRef.current = false;
-    };
-    const handleMouseEnter = () => {
-        if (ignoreHoverRef.current)
-            return;
-        setInspecting(true);
-    };
-    const handleMouseLeave = () => {
-        if (ignoreHoverRef.current)
-            return;
-        setInspecting(false);
-    };
-    React.useEffect(() => {
-        if (queue.length === 0)
-            setInspecting(false);
-    }, [queue.length]);
-    if (!queue.length)
-        return null;
-    return (
-    // We only use onClick for touch devices since touchend is not supported
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    _jsx("ul", { role: "region", "aria-live": "polite", className: regionClassNames, ref: rootRef, onTouchStart: handleTouchStart, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { width }, children: queue.map((data, index) => {
-            const visibleIndex = filteredLength - index + hiddenCount - 1;
-            if (data.status !== "entered")
-                hiddenCount += 1;
-            return (_jsx(ToastContainer, Object.assign({}, data, { index: visibleIndex, inspected: inspecting || !!expanded }), data.id));
-        }) }));
-};
-export default ToastRegion;