reshaped 2.7.5-beta.0 → 2.8.1

package/components/Tabs/Tabs.types.d.ts

@@ -1,61 +0,0 @@
-import React from "react";
-import { IconProps } from "../Icon";
-import type * as G from "../../types/global";
-export type SelectionState = {
-    left: number;
-    top: number;
-    scaleX: number;
-    scaleY: number;
-    status: "idle" | "prepared" | "animated";
-};
-export type ItemProps = {
-    value: string;
-    children?: React.ReactNode;
-    icon?: IconProps["svg"];
-    href?: string;
-    attributes?: G.Attributes<"div", Props>;
-};
-export type ListProps = {
-    children?: React.ReactNode;
-    className?: G.ClassName;
-    attributes?: G.Attributes<"div", Props>;
-};
-export type PanelProps = {
-    value: string;
-    children?: React.ReactNode;
-};
-export type BaseProps = {
-    children?: React.ReactNode;
-    direction?: "column" | "row";
-    itemWidth?: "equal";
-    variant?: "bordered" | "borderless" | "pills" | "pills-elevated";
-    size?: "medium" | "large";
-    name?: string;
-    onChange?: (args: {
-        value: string;
-        name?: string;
-    }) => void;
-};
-export type ControlledProps = BaseProps & {
-    value?: string;
-    defaultValue?: never;
-};
-export type PrivateControlledProps = ControlledProps & {
-    onSilentChange: BaseProps["onChange"];
-};
-export type UncontrolledProps = BaseProps & {
-    value?: never;
-    defaultValue?: string;
-};
-export type Props = ControlledProps | UncontrolledProps;
-export type Context = Pick<BaseProps, "itemWidth" | "onChange" | "variant" | "name" | "direction"> & {
-    size: NonNullable<BaseProps["size"]>;
-    value?: string;
-    setDefaultValue: (value: string) => void;
-    id: string;
-    elActiveRef: React.MutableRefObject<HTMLDivElement | null>;
-    elPrevActiveRef: React.MutableRefObject<HTMLDivElement | null>;
-    elScrollableRef: React.MutableRefObject<HTMLDivElement | null>;
-    selection: SelectionState;
-    setSelection: React.Dispatch<React.SetStateAction<SelectionState>>;
-};

package/components/Tabs/TabsControlled.d.ts

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

package/components/Tabs/TabsControlled.js

@@ -1,41 +0,0 @@
-"use client";
-import React from "react";
-import useElementId from "../../hooks/useElementId.js";
-import { TabsProvider } from "./TabsContext.js";
-const TabsControlled = (props) => {
-    const { children, value, onChange, onSilentChange, itemWidth, variant, name, direction = "row", size = "medium", } = props;
-    const id = useElementId();
-    const elActiveRef = React.useRef(null);
-    const elPrevActiveRef = React.useRef(elActiveRef.current);
-    const elScrollableRef = React.useRef(null);
-    const [selection, setSelection] = React.useState({
-        scaleX: 0,
-        scaleY: 0,
-        left: 0,
-        top: 0,
-        status: "idle",
-    });
-    const setDefaultValue = (value) => {
-        if (value === undefined)
-            return;
-        if (onSilentChange)
-            onSilentChange({ value, name });
-    };
-    return (React.createElement(TabsProvider, { value: {
-            value,
-            name,
-            size,
-            direction,
-            itemWidth,
-            variant,
-            onChange,
-            id,
-            setDefaultValue,
-            elActiveRef,
-            elPrevActiveRef,
-            elScrollableRef,
-            selection,
-            setSelection,
-        } }, children));
-};
-export default TabsControlled;

package/components/Tabs/TabsItem.js

@@ -1,65 +0,0 @@
-"use client";
-import React from "react";
-import { classNames } from "../../utilities/helpers.js";
-import HiddenInput from "../_private/HiddenInput/index.js";
-import Actionable from "../Actionable/index.js";
-import Icon from "../Icon/index.js";
-import Text from "../Text/index.js";
-import { useTabs } from "./TabsContext.js";
-import s from "./Tabs.module.css";
-const TabsItem = (props, ref) => {
-    const { value, children, icon, href, attributes } = props;
-    const { onChange, panelId, name, size, value: tabsValue, selection, elActiveRef, elPrevActiveRef, elScrollableRef, } = useTabs(value);
-    const itemRef = React.useRef(null);
-    const active = tabsValue === value;
-    const visuallySelected = active && selection.status === "idle";
-    const itemClassNames = classNames(s.item, visuallySelected && s["--item-active"]);
-    const isFormControl = !!name;
-    const tabAttributes = {
-        role: "tab",
-        tabIndex: active ? 0 : -1,
-        "aria-selected": active,
-    };
-    const updateRefs = React.useCallback(() => {
-        if (!("current" in itemRef)) {
-            throw new Error("Reshaped, Tabs: TabItem is expecting an object ref format but received a function ref");
-        }
-        elPrevActiveRef.current = elActiveRef.current;
-        elActiveRef.current = itemRef.current;
-    }, [elActiveRef, elPrevActiveRef]);
-    const handleChange = () => {
-        var _a, _b, _c;
-        if (href && !onChange)
-            return;
-        const listEl = elScrollableRef.current;
-        const currentListItem = (_a = itemRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
-        const prevListItem = (_b = elActiveRef.current) === null || _b === void 0 ? void 0 : _b.parentElement;
-        // Updating refs after saving the elements
-        updateRefs();
-        if (onChange)
-            onChange({ value, name });
-        if (!listEl || !currentListItem || !prevListItem || listEl.scrollWidth === listEl.clientWidth) {
-            return;
-        }
-        const navigatingBack = currentListItem.offsetLeft < prevListItem.offsetLeft;
-        const threshold = (currentListItem.offsetLeft - listEl.scrollLeft) / listEl.clientWidth;
-        // Only scroll if the item is close to getting clipped
-        // Back navigation threshold is 0.3 since its calculated based on offsetLeft
-        const shouldScroll = navigatingBack ? threshold < 0.3 : threshold > 0.5;
-        if (!shouldScroll)
-            return;
-        (_c = itemRef.current) === null || _c === void 0 ? void 0 : _c.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
-    };
-    React.useEffect(() => {
-        if (!active)
-            return;
-        updateRefs();
-    }, [active, updateRefs]);
-    return (React.createElement("div", Object.assign({}, attributes, { className: itemClassNames, ref: itemRef, role: "presentation" }),
-        React.createElement(Actionable, { ref: ref, href: href, insetFocus: true, onClick: !name ? handleChange : undefined, className: s.button, as: name ? "label" : undefined, attributes: Object.assign(Object.assign({}, (!isFormControl && tabAttributes)), { "aria-controls": panelId }) },
-            name && (React.createElement(HiddenInput, { type: "radio", name: name, value: value, checked: visuallySelected, onChange: handleChange, className: s.radio })),
-            React.createElement("span", { className: s.buttonContent },
-                icon && React.createElement(Icon, { svg: icon, className: s.icon, size: 4 }),
-                children && React.createElement(Text, { variant: size === "large" ? "body-2" : "body-3" }, children)))));
-};
-export default React.forwardRef(TabsItem);

package/components/Tabs/TabsList.d.ts

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

package/components/Tabs/TabsList.js

@@ -1,160 +0,0 @@
-"use client";
-import React from "react";
-import { classNames, throttle } from "../../utilities/helpers.js";
-import useRTL from "../../hooks/useRTL.js";
-import { focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, } from "../../utilities/a11y.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import useHotkeys from "../../hooks/useHotkeys.js";
-import Button from "../Button/index.js";
-import IconChevronRight from "../../icons/ChevronRight.js";
-import IconChevronLeft from "../../icons/ChevronLeft.js";
-import TabsItem from "./TabsItem.js";
-import { useTabs } from "./TabsContext.js";
-import s from "./Tabs.module.css";
-const findParentItem = (el, rootEl) => {
-    if (el === rootEl || !el)
-        return null;
-    if (el.classList.contains(s.listItem))
-        return el;
-    return findParentItem(el.parentElement, rootEl);
-};
-const TabsList = (props) => {
-    const { children, className, attributes } = props;
-    const { value, setDefaultValue, itemWidth, variant, name, direction, size, selection, setSelection, elActiveRef, elPrevActiveRef, elScrollableRef, } = useTabs();
-    const [rtl] = useRTL();
-    const [cutOffSide, setCutOffSide] = React.useState(null);
-    const rootClassNames = classNames(s.root, size && s[`--size-${size}`], direction && s[`--direction-${direction}`], itemWidth && s[`--item-width-${itemWidth}`], variant && s[`--variant-${variant}`], cutOffSide && s[`--cut-off-${cutOffSide}`], className);
-    const selectorClassNames = classNames(s.selector, selection.status === "idle" && s["--selector-hidden"], selection.status === "animated" && s["--selector-animated"]);
-    const handleNextClick = () => {
-        elScrollableRef.current.scrollBy({
-            // Using ceil here since during the second navigation half of the value may be
-            // smaller than during the first navigation because of the odd numbers
-            left: Math.ceil(elScrollableRef.current.clientWidth / 2) * (rtl ? -1 : 1),
-            behavior: "smooth",
-        });
-    };
-    const handlePrevClick = () => {
-        elScrollableRef.current.scrollBy({
-            left: Math.ceil(elScrollableRef.current.clientWidth / 2) * (rtl ? 1 : -1),
-            behavior: "smooth",
-        });
-    };
-    const handleTransitionEnd = () => {
-        setSelection((selectionStyle) => (Object.assign(Object.assign({}, selectionStyle), { status: "idle" })));
-    };
-    const getElementSelectionStyle = React.useCallback((el) => {
-        if (!elScrollableRef.current)
-            return null;
-        const itemEl = findParentItem(el, elScrollableRef.current);
-        if (!itemEl)
-            return null;
-        return {
-            scaleX: itemEl.clientWidth,
-            scaleY: itemEl.clientHeight,
-            top: itemEl.offsetTop,
-            left: itemEl.offsetLeft,
-        };
-    }, [elScrollableRef]);
-    const { ref: hotkeysRef } = useHotkeys({
-        "ArrowLeft, ArrowUp": (e) => {
-            if (name)
-                return;
-            e.preventDefault();
-            focusPreviousElement(elScrollableRef.current);
-        },
-        "ArrowRight, ArrowDown": (e) => {
-            if (name)
-                return;
-            e.preventDefault();
-            focusNextElement(elScrollableRef.current);
-        },
-        Home: (e) => {
-            if (name)
-                return;
-            e.preventDefault();
-            focusFirstElement(elScrollableRef.current);
-        },
-        End: (e) => {
-            if (name)
-                return;
-            e.preventDefault();
-            focusLastElement(elScrollableRef.current);
-        },
-    });
-    useIsomorphicLayoutEffect(() => {
-        if (value)
-            return;
-        const firstItem = React.Children.toArray(children)[0];
-        if (!firstItem || firstItem.type !== TabsItem)
-            return;
-        setDefaultValue(firstItem.props.value);
-    }, [value]);
-    useIsomorphicLayoutEffect(() => {
-        // Do not update selection on mount, until we receive new activeId
-        if (!elPrevActiveRef.current || elPrevActiveRef.current === elActiveRef.current)
-            return;
-        const selectionStyle = getElementSelectionStyle(elPrevActiveRef.current);
-        if (!selectionStyle)
-            return;
-        setSelection(Object.assign(Object.assign({}, selectionStyle), { status: "prepared" }));
-    }, [value, getElementSelectionStyle]);
-    useIsomorphicLayoutEffect(() => {
-        if (selection.status !== "prepared" || !elActiveRef.current)
-            return;
-        const selectionStyle = getElementSelectionStyle(elActiveRef.current);
-        if (!selectionStyle)
-            return;
-        setSelection(Object.assign(Object.assign({}, selectionStyle), { status: "animated" }));
-    }, [selection]);
-    useIsomorphicLayoutEffect(() => {
-        const elScrollable = elScrollableRef.current;
-        if (!elScrollable || direction === "column")
-            return;
-        const updateArrowNav = () => {
-            const isScrollable = elScrollable.clientWidth < elScrollable.scrollWidth;
-            if (!isScrollable)
-                setCutOffSide(null);
-            // scrollLeft in RTL starts from 1 instead of 0, so we compare values using this delta
-            const scrollLeft = elScrollable.scrollLeft * (rtl ? -1 : 1);
-            const cutOffStart = scrollLeft > 1;
-            const cutOffEnd = scrollLeft + elScrollable.clientWidth < elScrollable.scrollWidth - 1;
-            if (cutOffEnd && cutOffStart)
-                return setCutOffSide("both");
-            if (cutOffStart)
-                return setCutOffSide("start");
-            if (cutOffEnd)
-                return setCutOffSide("end");
-        };
-        const debouncedUpdateArrowNav = throttle(updateArrowNav, 100);
-        // Use RaF when scroll to have scrollWidth calculated correctly on the first effect
-        // For example: And edge case inside the complex flexbox layout
-        requestAnimationFrame(() => {
-            updateArrowNav();
-        });
-        window.addEventListener("resize", debouncedUpdateArrowNav);
-        elScrollable.addEventListener("scroll", debouncedUpdateArrowNav);
-        return () => {
-            window.removeEventListener("resize", debouncedUpdateArrowNav);
-            elScrollable.removeEventListener("scroll", debouncedUpdateArrowNav);
-        };
-    }, [rtl]);
-    return (React.createElement("div", Object.assign({}, attributes, { className: rootClassNames }),
-        React.createElement("div", { className: s.inner, ref: elScrollableRef },
-            React.createElement("div", { className: s.list, role: "tablist", ref: hotkeysRef },
-                React.Children.map(children, (child, index) => {
-                    if (!child)
-                        return null;
-                    return (React.createElement("div", { className: s.listItem, key: child.props.value || child.key || index }, child));
-                }),
-                React.createElement("div", { onTransitionEnd: handleTransitionEnd, className: selectorClassNames, style: {
-                        "--rs-tab-selection-x": selection.left,
-                        "--rs-tab-selection-y": selection.top,
-                        "--rs-tab-selection-scale-x": selection.scaleX,
-                        "--rs-tab-selection-scale-y": selection.scaleY,
-                    } }))),
-        (cutOffSide === "start" || cutOffSide === "both") && (React.createElement("span", { className: s.prev },
-            React.createElement(Button, { onClick: handlePrevClick, size: "small", icon: IconChevronLeft, rounded: true, attributes: { "aria-hidden": true, tabIndex: -1 } }))),
-        (cutOffSide === "end" || cutOffSide === "both") && (React.createElement("span", { className: s.next },
-            React.createElement(Button, { onClick: handleNextClick, size: "small", icon: IconChevronRight, rounded: true, attributes: { "aria-hidden": true, tabIndex: -1 } })))));
-};
-export default TabsList;

package/components/Tabs/TabsPanel.d.ts

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

package/components/Tabs/TabsPanel.js

@@ -1,13 +0,0 @@
-"use client";
-import React from "react";
-import { classNames } from "../../utilities/helpers.js";
-import { useTabs } from "./TabsContext.js";
-import s from "./Tabs.module.css";
-const TabsPanel = (props) => {
-    const { value: panelValue, children } = props;
-    const { value, panelId, buttonId } = useTabs(panelValue);
-    const active = panelValue === value;
-    const panelClassNames = classNames(s.panel, !active && s["--panel-hidden"]);
-    return (React.createElement("div", { className: panelClassNames, tabIndex: 0, role: "tabpanel", id: panelId, "aria-labelledby": buttonId }, active && children));
-};
-export default TabsPanel;

package/components/Tabs/TabsUncontrolled.d.ts

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

package/components/Tabs/TabsUncontrolled.js

@@ -1,18 +0,0 @@
-"use client";
-import React from "react";
-import TabsControlled from "./TabsControlled.js";
-const TabsUncontrolled = (props) => {
-    const { defaultValue, onChange } = props;
-    const [value, setValue] = React.useState(defaultValue);
-    const handleChange = ({ value }) => {
-        setValue(value);
-        if (onChange)
-            onChange({ value });
-    };
-    // Silently handle the default id selection if it's not passed
-    const handleSilentChange = ({ value }) => {
-        setValue(value);
-    };
-    return (React.createElement(TabsControlled, Object.assign({}, props, { onChange: handleChange, onSilentChange: handleSilentChange, value: value, defaultValue: undefined })));
-};
-export default TabsUncontrolled;

package/components/Text/Text.d.ts

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

package/components/Text/Text.js

@@ -1,24 +0,0 @@
-import React from "react";
-import { classNames, responsiveClassNames } from "../../utilities/helpers.js";
-import s from "./Text.module.css";
-const tagMap = {
-    "title-1": "h1",
-    "title-2": "h2",
-    "title-3": "h3",
-    "title-4": "h4",
-    "title-5": "h5",
-    "title-6": "h6",
-};
-const Text = (props) => {
-    const { variant, color, weight, align, decoration, maxLines, children, className, attributes } = props;
-    const largestVariant = typeof variant === "string" ? variant : (variant === null || variant === void 0 ? void 0 : variant.xl) || (variant === null || variant === void 0 ? void 0 : variant.l) || (variant === null || variant === void 0 ? void 0 : variant.m) || (variant === null || variant === void 0 ? void 0 : variant.s);
-    /**
-     * Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
-     * It still resolves the attributes correctly based on the tag
-     */
-    const TagName = props.as || (largestVariant && tagMap[largestVariant]) || "div";
-    const rootClassName = classNames(s.root, color && s[`--color-${color}`], ...responsiveClassNames(s, "--variant", variant), ...responsiveClassNames(s, "--align", align), weight && s[`--weight-${weight}`], decoration && s[`--decoration-${decoration}`], maxLines !== undefined && s[`--clamp`], maxLines === 1 && s["--break-all"], className);
-    const style = Object.assign(Object.assign({}, attributes === null || attributes === void 0 ? void 0 : attributes.style), { "--rs-text-lines": maxLines });
-    return (React.createElement(TagName, Object.assign({}, attributes, { className: rootClassName, style: style }), children));
-};
-export default Text;

package/components/Text/Text.module.css

@@ -1 +0,0 @@
-.root{transition:color var(--rs-duration-fast) var(--rs-easing-standard)}.--clamp{-webkit-box-orient:vertical;-webkit-line-clamp:var(--rs-text-lines);display:-webkit-box;overflow:hidden}.--break-all{word-break:break-all}.--align-start{text-align:start}.--align-center{text-align:center}.--align-end{text-align:end}.--variant-title-1{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold{font-weight:var(--rs-font-weight-bold)!important}.--color-neutral{color:var(--rs-color-foreground-neutral)}.--color-neutral-faded{color:var(--rs-color-foreground-neutral-faded)}.--color-primary{color:var(--rs-color-foreground-primary)}.--color-warning{color:var(--rs-color-foreground-warning)}.--color-positive{color:var(--rs-color-foreground-positive)}.--color-critical{color:var(--rs-color-foreground-critical)}.--color-disabled{color:var(--rs-color-foreground-disabled)}.--decoration-line-through{text-decoration:line-through}@media (--rs-viewport-m ){.--align-start--m{text-align:start}.--align-center--m{text-align:center}.--align-end--m{text-align:end}.--variant-title-1--m{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--m{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--m{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--m{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--m{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--m{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--m{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--m{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--m{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--m{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--m{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--m{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--m{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--m{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);line-height:var(--rs-line-height-caption-2)}}@media (--rs-viewport-l ){.--align-start--l{text-align:start}.--align-center--l{text-align:center}.--align-end--l{text-align:end}.--variant-title-1--l{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--l{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--l{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--l{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--l{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--l{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--l{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--l{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--l{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--l{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--l{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--l{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--l{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--l{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);line-height:var(--rs-line-height-caption-2)}}@media (--rs-viewport-xl ){.--align-start--xl{text-align:start}.--align-center--xl{text-align:center}.--align-end--xl{text-align:end}.--variant-title-1--xl{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--xl{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--xl{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--xl{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--xl{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--xl{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--xl{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--xl{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--xl{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--xl{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--xl{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--xl{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--xl{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--xl{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);line-height:var(--rs-line-height-caption-2)}}

package/components/Text/Text.types.d.ts

@@ -1,15 +0,0 @@
-import React from "react";
-import type * as G from "../../types/global";
-export type Variant = "title-1" | "title-2" | "title-3" | "title-4" | "title-5" | "title-6" | "featured-1" | "featured-2" | "featured-3" | "body-1" | "body-2" | "body-3" | "caption-1" | "caption-2";
-export type Props<TagName extends keyof JSX.IntrinsicElements | void = void> = {
-    variant?: G.Responsive<Variant>;
-    weight?: "regular" | "medium" | "bold";
-    color?: "neutral" | "neutral-faded" | "critical" | "warning" | "positive" | "primary" | "disabled";
-    align?: G.Responsive<"start" | "center" | "end">;
-    decoration?: "line-through";
-    maxLines?: number;
-    as?: TagName;
-    children?: React.ReactNode;
-    className?: G.ClassName;
-    attributes?: G.Attributes<TagName>;
-};

package/components/TextArea/TextArea.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import type * as T from "./TextArea.types";
-declare const TextArea: {
-    (props: T.Props): React.JSX.Element;
-    Aligner: (props: import("../_private/Aligner").AlignerProps) => React.JSX.Element;
-};
-export default TextArea;

package/components/TextArea/TextArea.js

@@ -1,27 +0,0 @@
-"use client";
-import React from "react";
-import { classNames, responsiveClassNames } from "../../utilities/helpers.js";
-import { useFormControl } from "../FormControl/index.js";
-import Aligner from "../_private/Aligner/index.js";
-import useElementId from "../../hooks/useElementId.js";
-import s from "./TextArea.module.css";
-const TextArea = (props) => {
-    var _a, _b;
-    const { onChange, onFocus, onBlur, name, value, defaultValue, placeholder, size = "medium", variant = "outline", className, attributes, } = props;
-    const formControl = useFormControl();
-    const id = useElementId(props.id);
-    const inputId = ((_a = formControl === null || formControl === void 0 ? void 0 : formControl.attributes) === null || _a === void 0 ? void 0 : _a.id) || ((_b = props.inputAttributes) === null || _b === void 0 ? void 0 : _b.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, size && responsiveClassNames(s, "--size", size), hasError && s["--status-error"], disabled && s["--disabled"], variant && s[`--variant-${variant}`], className);
-    const handleChange = (event) => {
-        if (!onChange)
-            return;
-        onChange({ name, value: event.target.value, event });
-    };
-    return (React.createElement("div", Object.assign({}, attributes, { "data-rs-aligner-target": true, className: rootClassName }),
-        React.createElement("textarea", Object.assign({ rows: 3 }, 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 }))));
-};
-TextArea.Aligner = Aligner;
-export default TextArea;

package/components/TextField/TextField.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import type * as T from "./TextField.types";
-declare const TextField: {
-    (props: T.Props): React.JSX.Element;
-    Aligner: (props: import("../_private/Aligner").AlignerProps) => React.JSX.Element;
-};
-export default TextField;

package/components/TextField/TextField.js

@@ -1,49 +0,0 @@
-"use client";
-import React from "react";
-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 && (React.createElement("div", { className: s.slot, key: "slot" }, slot)),
-        icon && (React.createElement("div", { className: s.icon, key: "icon" },
-            React.createElement(Icon, { size: responsivePropDependency(size, (size) => {
-                    if (size === "large")
-                        return 5;
-                    if (size === "xlarge")
-                        return 6;
-                    return 4;
-                }), svg: icon }))),
-        affix && (React.createElement("div", { className: s.affix, key: "affix" }, affix)),
-    ].filter(Boolean);
-    return (React.createElement("span", { className: attachmentClassNames }, 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 (React.createElement("div", Object.assign({}, attributes, { "data-rs-aligner-target": true, className: rootClassName }),
-        React.createElement(TextFieldSlot, { position: "start", icon: icon, slot: startSlot, size: size, affix: prefix }),
-        React.createElement("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 })),
-        React.createElement(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;overflow:hidden;padding:calc(var(--rs-p-v) - 1px) 0;position:relative;z-index:0}.root:focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{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-text-fill-color:var(--rs-color-foreground-neutral);-webkit-background-clip:text}.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 React from "react";
-import type * as G from "../../types/global";
-import { FormControlProps } from "../FormControl";
-import { 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/GlobalColorMode.d.ts

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