reshaped 2.11.12 → 3.0.0

package/components/TextField/TextField.js

@@ -1,45 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/helpers.js";
-import useElementId from "../../hooks/useElementId.js";
-import { useFormControl } from "../FormControl/index.js";
-import Icon from "../Icon/index.js";
-import Aligner from "../_private/Aligner/index.js";
-import s from "./TextField.module.css";
-const TextFieldSlot = (props) => {
-    const { slot, icon, size, affix, position } = props;
-    if (!icon && !slot && !affix)
-        return null;
-    const attachmentClassNames = classNames(s.attachment, s[`attachment--position-${position}`]);
-    const content = [
-        slot && (_jsx("div", { className: s.slot, children: slot }, "slot")),
-        icon && (_jsx("div", { className: s.icon, children: _jsx(Icon, { size: responsivePropDependency(size, (size) => {
-                    if (size === "large")
-                        return 5;
-                    if (size === "xlarge")
-                        return 6;
-                    return 4;
-                }), svg: icon }) }, "icon")),
-        affix && (_jsx("div", { className: s.affix, children: affix }, "affix")),
-    ].filter(Boolean);
-    return (_jsx("span", { className: attachmentClassNames, children: position === "end" ? content.reverse() : content }));
-};
-const TextField = (props) => {
-    var _a;
-    const { onChange, onFocus, onBlur, name, value, defaultValue, placeholder, icon, endIcon, startSlot, endSlot, prefix, suffix, size = "medium", variant = "outline", className, attributes, } = props;
-    const formControl = useFormControl();
-    const id = useElementId(props.id);
-    const inputId = (formControl === null || formControl === void 0 ? void 0 : formControl.attributes.id) || ((_a = props.inputAttributes) === null || _a === void 0 ? void 0 : _a.id) || id;
-    const disabled = (formControl === null || formControl === void 0 ? void 0 : formControl.disabled) || props.disabled;
-    const hasError = (formControl === null || formControl === void 0 ? void 0 : formControl.hasError) || props.hasError;
-    const inputAttributes = Object.assign(Object.assign({}, props.inputAttributes), formControl === null || formControl === void 0 ? void 0 : formControl.attributes);
-    const rootClassName = classNames(s.root, className, size && responsiveClassNames(s, "--size", size), hasError && s["--status-error"], disabled && s["--disabled"], variant && s[`--variant-${variant}`]);
-    const handleChange = (event) => {
-        if (!onChange)
-            return;
-        onChange({ name, value: event.target.value, event });
-    };
-    return (_jsxs("div", Object.assign({}, attributes, { "data-rs-aligner-target": true, className: rootClassName, children: [_jsx(TextFieldSlot, { position: "start", icon: icon, slot: startSlot, size: size, affix: prefix }), _jsx("input", Object.assign({}, inputAttributes, { className: s.input, disabled: disabled, name: name, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, onFocus: onFocus || (inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.onFocus), onBlur: onBlur || (inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.onBlur), id: inputId })), _jsx(TextFieldSlot, { position: "end", icon: endIcon, slot: endSlot, size: size, affix: suffix })] })));
-};
-TextField.Aligner = Aligner;
-export default TextField;

package/components/TextField/TextField.module.css

@@ -1 +0,0 @@
-.root{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-text-field-gap);background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;padding:calc(var(--rs-p-v) - 1px) 0;position:relative;z-index:0}.root:focus-within:not(:has(button:focus,a:focus)){border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{background:none;border:none;box-sizing:border-box;color:var(--rs-color-foreground-neutral);flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);margin:calc(var(--rs-unit-x1) * -1) 0;outline:none;padding:0 var(--rs-text-field-gap);position:relative;width:100%;z-index:1}.input:-webkit-autofill{-webkit-background-clip:text;-webkit-text-fill-color:var(--rs-color-foreground-neutral)}.affix,.icon,.slot{align-items:center;display:flex;flex-shrink:0;position:relative;z-index:5}.icon{pointer-events:none}.affix{color:var(--rs-color-foreground-neutral-faded)}.attachment{align-items:center;display:flex;flex-shrink:0}.attachment--position-start{gap:var(--rs-text-field-gap);padding-inline-start:var(--rs-text-field-gap)}.attachment--position-start .affix{border-inline-end:1px solid var(--rs-color-border-neutral-faded);padding-inline-end:var(--rs-text-field-gap)}.attachment--position-end{gap:var(--rs-unit-x1);padding-inline-end:var(--rs-unit-x1)}.attachment--position-end .affix,.attachment--position-end .icon{padding-inline-end:calc(var(--rs-text-field-gap) - var(--rs-unit-x1))}.attachment--position-end .affix{border-inline-start:1px solid var(--rs-color-border-neutral-faded);padding-inline-start:var(--rs-text-field-gap)}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-medium{--rs-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium .affix,.--size-medium .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large .affix,.--size-large .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge{--rs-text-field-gap:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge .affix,.--size-xlarge .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.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)}@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-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium--m .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium--m .affix,.--size-medium--m .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--m{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large--m .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large--m .affix,.--size-large--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--m{--rs-text-field-gap:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge--m .affix,.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--size-medium--l{--rs-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium--l .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium--l .affix,.--size-medium--l .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--l{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large--l .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large--l .affix,.--size-large--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--l{--rs-text-field-gap:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge--l .affix,.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--size-medium--xl{--rs-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium--xl .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium--xl .affix,.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--xl{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large--xl .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large--xl .affix,.--size-large--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--xl{--rs-text-field-gap:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge--xl .affix,.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}

package/components/TextField/TextField.types.d.ts

@@ -1,42 +0,0 @@
-import type React from "react";
-import type * as G from "../../types/global";
-import type { FormControlProps } from "../FormControl";
-import type { IconProps } from "../Icon";
-type Size = G.Responsive<"medium" | "large" | "xlarge">;
-type BaseProps = {
-    id?: string;
-    name: string;
-    size?: Size;
-    disabled?: boolean;
-    placeholder?: string;
-    icon?: SlotProps["icon"];
-    endIcon?: SlotProps["icon"];
-    startSlot?: SlotProps["slot"];
-    endSlot?: SlotProps["slot"];
-    prefix?: React.ReactNode;
-    suffix?: React.ReactNode;
-    variant?: "outline" | "faded" | "headless";
-    onChange?: G.ChangeHandler<string>;
-    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
-    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
-    className?: G.ClassName;
-    attributes?: G.Attributes<"div", Props>;
-    inputAttributes?: G.Attributes<"input">;
-} & Pick<FormControlProps, "hasError">;
-export type ControlledProps = BaseProps & {
-    value: string;
-    defaultValue?: never;
-};
-export type UncontrolledProps = BaseProps & {
-    value?: never;
-    defaultValue?: string;
-};
-export type Props = ControlledProps | UncontrolledProps;
-export type SlotProps = {
-    slot?: React.ReactNode;
-    icon?: IconProps["svg"];
-    size: Size;
-    affix?: React.ReactNode;
-    position: "start" | "end";
-};
-export {};

package/components/Theme/Theme.context.js

@@ -1,14 +0,0 @@
-"use client";
-import React from "react";
-/* Context used to store data responsible for switching between modes of a theme */
-export const ThemeContext = React.createContext({
-    theme: "",
-    colorMode: "light",
-    setTheme: () => { },
-});
-/* Context used to globally define mode, used only within the library */
-export const GlobalColorModeContext = React.createContext({
-    mode: "light",
-    setMode: () => { },
-    invertMode: () => { },
-});

package/components/Theme/Theme.js

@@ -1,48 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { classNames } from "../../utilities/helpers.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import { ThemeContext } from "./Theme.context.js";
-import { useTheme, useGlobalColorMode } from "./useTheme.js";
-import s from "./Theme.module.css";
-const Theme = (props) => {
-    const { name, defaultName, colorMode, children, className } = props;
-    const [mounted, setMounted] = React.useState(false);
-    const [stateTheme, setStateTheme] = React.useState(defaultName);
-    const globalColorMode = useGlobalColorMode();
-    const parentTheme = useTheme();
-    const isRootProvider = !parentTheme.theme;
-    const usedTheme = name || stateTheme || parentTheme.theme;
-    const parentColorMode = isRootProvider ? globalColorMode : parentTheme.colorMode;
-    const invertedColorMode = parentColorMode === "light" ? "dark" : "light";
-    const usedColorMode = colorMode === "inverted" ? invertedColorMode : colorMode || parentColorMode;
-    const rootClassNames = classNames(s.root, className);
-    const setTheme = (theme) => {
-        setStateTheme(theme);
-    };
-    useIsomorphicLayoutEffect(() => {
-        setMounted(true);
-    }, []);
-    useIsomorphicLayoutEffect(() => {
-        if (!document || !isRootProvider)
-            return;
-        const hasColorModeApplied = document.documentElement.getAttribute("data-rs-color-mode");
-        document.documentElement.setAttribute("data-rs-theme", usedTheme);
-        if (!hasColorModeApplied) {
-            document.documentElement.setAttribute("data-rs-color-mode", usedColorMode);
-        }
-        return () => {
-            document.documentElement.removeAttribute("data-rs-theme");
-            if (!hasColorModeApplied) {
-                document.documentElement.removeAttribute("data-rs-color-mode");
-            }
-        };
-    }, [usedTheme, usedColorMode, isRootProvider]);
-    return (_jsx(ThemeContext.Provider, { value: {
-            theme: usedTheme,
-            colorMode: usedColorMode,
-            setTheme,
-        }, children: _jsx("div", { className: rootClassNames, "data-rs-theme": isRootProvider ? undefined : usedTheme, "data-rs-color-mode": isRootProvider || (!colorMode && !mounted) ? undefined : usedColorMode, children: children }) }));
-};
-export default Theme;

package/components/Theme/Theme.types.d.ts

@@ -1,24 +0,0 @@
-import React from "react";
-import * as G from "../../types/global";
-export type ColorMode = "light" | "dark";
-export type GlobalColorModeContextData = {
-    mode: ColorMode;
-    setMode: (mode: ColorMode) => void;
-    invertMode: () => void;
-};
-export type ThemeContextData = {
-    colorMode: ColorMode;
-    theme: string;
-    setTheme: (theme: string) => void;
-};
-export type Props = {
-    name?: string;
-    defaultName?: string;
-    colorMode?: ColorMode | "inverted";
-    className?: G.ClassName;
-    children?: React.ReactNode;
-};
-export type GlobalColorModeProps = {
-    defaultMode?: ColorMode;
-    children?: React.ReactNode;
-};

package/components/Theme/useTheme.d.ts

@@ -1,8 +0,0 @@
-export declare const useGlobalColorMode: () => import("./Theme.types").ColorMode;
-export declare const useTheme: () => {
-    theme: string;
-    setTheme: (theme: string) => void;
-    colorMode: import("./Theme.types").ColorMode;
-    setColorMode: (mode: import("./Theme.types").ColorMode) => void;
-    invertColorMode: () => void;
-};

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;