reshaped 2.11.12 → 3.0.1

package/dist/components/Tabs/TabsList.js

@@ -0,0 +1,156 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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/focus.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 [fadeSide, setFadeSide] = 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}`], (fadeSide === "start" || fadeSide === "both") && s["--fade-start"], (fadeSide === "end" || fadeSide === "both") && s["--fade-end"], 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) => ({
+            ...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({ ...selectionStyle, status: "prepared" });
+    }, [value, getElementSelectionStyle]);
+    useIsomorphicLayoutEffect(() => {
+        if (selection.status !== "prepared" || !elActiveRef.current)
+            return;
+        const selectionStyle = getElementSelectionStyle(elActiveRef.current);
+        if (!selectionStyle)
+            return;
+        setSelection({ ...selectionStyle, status: "animated" });
+    }, [selection]);
+    useIsomorphicLayoutEffect(() => {
+        const elScrollable = elScrollableRef.current;
+        if (!elScrollable || direction === "column")
+            return;
+        const updateArrowNav = () => {
+            const isScrollable = elScrollable.clientWidth < elScrollable.scrollWidth;
+            if (!isScrollable)
+                setFadeSide(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 setFadeSide("both");
+            if (cutOffStart)
+                return setFadeSide("start");
+            if (cutOffEnd)
+                return setFadeSide("end");
+        };
+        const debouncedUpdateArrowNav = throttle(updateArrowNav, 16);
+        // 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 (_jsxs("div", { ...attributes, className: rootClassNames, children: [_jsx("div", { className: s.inner, ref: elScrollableRef, children: _jsxs("div", { className: s.list, role: "tablist", ref: hotkeysRef, children: [React.Children.map(children, (child, index) => {
+                            if (!child)
+                                return null;
+                            return (_jsx("div", { className: s.listItem, children: child }, child.props.value || child.key || index));
+                        }), _jsx("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,
+                            } })] }) }), (fadeSide === "start" || fadeSide === "both") && (_jsx("span", { className: s.prev, children: _jsx(Button, { onClick: handlePrevClick, size: "small", icon: IconChevronLeft, rounded: true, attributes: { "aria-hidden": true, tabIndex: -1 } }) })), (fadeSide === "end" || fadeSide === "both") && (_jsx("span", { className: s.next, children: _jsx(Button, { onClick: handleNextClick, size: "small", icon: IconChevronRight, rounded: true, attributes: { "aria-hidden": true, tabIndex: -1 } }) }))] }));
+};
+export default TabsList;

package/dist/components/Tabs/TabsUncontrolled.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+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 (_jsx(TabsControlled, { ...props, onChange: handleChange, onSilentChange: handleSilentChange, value: value, defaultValue: undefined }));
+};
+export default TabsUncontrolled;

package/dist/components/Text/Text.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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, wrap, children, className, attributes, } = props;
+    const largestVariant = typeof variant === "string" ? variant : variant?.xl || variant?.l || variant?.m || 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"], wrap && s[`--wrap-${wrap}`], className);
+    const style = {
+        ...attributes?.style,
+        "--rs-text-lines": maxLines,
+    };
+    return (_jsx(TagName, { ...attributes, className: rootClassName, style: style, children: children }));
+};
+export default Text;

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

@@ -0,0 +1,16 @@
+import type 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 = "div"> = {
+    variant?: G.Responsive<Variant>;
+    weight?: "regular" | "medium" | "bold";
+    color?: "neutral" | "neutral-faded" | "critical" | "warning" | "positive" | "primary" | "disabled";
+    align?: G.Responsive<"start" | "center" | "end">;
+    wrap?: "balance";
+    decoration?: "line-through";
+    maxLines?: number;
+    as?: TagName;
+    children?: React.ReactNode;
+    className?: G.ClassName;
+    attributes?: G.Attributes<TagName>;
+};

package/dist/components/Text/tests/Text.stories.js

@@ -0,0 +1,134 @@
+import { Example } from "../../../utilities/storybook/index.js";
+import Text from "../index.js";
+export default {
+    title: "Utilities/Text",
+    component: Text,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/text",
+        },
+    },
+};
+export const variant = () => (<Example>
+		<Example.Item title="variant: title-1">
+			<Text variant="title-1">Title 1</Text>
+		</Example.Item>
+		<Example.Item title="variant: title-2">
+			<Text variant="title-2">Title 2</Text>
+		</Example.Item>
+		<Example.Item title="variant: title-3">
+			<Text variant="title-3">Title 3</Text>
+		</Example.Item>
+		<Example.Item title="variant: title-4">
+			<Text variant="title-4">Title 4</Text>
+		</Example.Item>
+		<Example.Item title="variant: title-5">
+			<Text variant="title-5">Title 5</Text>
+		</Example.Item>
+		<Example.Item title="variant: title-6">
+			<Text variant="title-6">Title 6</Text>
+		</Example.Item>
+		<Example.Item title="variant: featured-1">
+			<Text variant="featured-1">Featured 1</Text>
+		</Example.Item>
+		<Example.Item title="variant: featured-2">
+			<Text variant="featured-2">Featured 2</Text>
+		</Example.Item>
+		<Example.Item title="variant: featured-3">
+			<Text variant="featured-3">Featured 3</Text>
+		</Example.Item>
+		<Example.Item title="variant: body-1">
+			<Text variant="body-1">Body 1</Text>
+		</Example.Item>
+		<Example.Item title="variant: body-2">
+			<Text variant="body-2">Body 2</Text>
+		</Example.Item>
+		<Example.Item title="variant: body-3">
+			<Text variant="body-3">Body 3</Text>
+		</Example.Item>
+		<Example.Item title="variant: caption-1">
+			<Text variant="caption-1">Caption 1</Text>
+		</Example.Item>
+		<Example.Item title="variant: caption-2">
+			<Text variant="caption-2">Caption 2</Text>
+		</Example.Item>
+		<Example.Item title={["responsive variant", "[s] body-3", "[m+] title-4"]}>
+			<Text variant={{ s: "body-3", m: "title-4" }}>Responsive</Text>
+		</Example.Item>
+	</Example>);
+export const weight = () => (<Example>
+		<Example.Item title="weight: regular">
+			<Text weight="regular">Regular</Text>
+		</Example.Item>
+		<Example.Item title="weight: medium">
+			<Text weight="medium">Medium</Text>
+		</Example.Item>
+		<Example.Item title="weight: bold">
+			<Text weight="bold">Bold</Text>
+		</Example.Item>
+	</Example>);
+export const color = () => (<Example>
+		<Example.Item title="color: inherit">
+			<Text>Neutral</Text>
+		</Example.Item>
+		<Example.Item title="color: neutral-faded">
+			<Text color="neutral-faded">Faded</Text>
+		</Example.Item>
+		<Example.Item title="color: positive">
+			<Text color="positive">Positive</Text>
+		</Example.Item>
+		<Example.Item title="color: warning">
+			<Text color="warning">Warning</Text>
+		</Example.Item>
+		<Example.Item title="color: critical">
+			<Text color="critical">Critical</Text>
+		</Example.Item>
+		<Example.Item title="color: primary">
+			<Text color="primary">Primary</Text>
+		</Example.Item>
+		<Example.Item title="color: disabled">
+			<Text color="disabled">Disabled</Text>
+		</Example.Item>
+	</Example>);
+export const decoration = () => (<Example>
+		<Example.Item title="decoration: line-through">
+			<Text decoration="line-through">Line through</Text>
+		</Example.Item>
+	</Example>);
+export const wrap = () => (<Example>
+		<Example.Item title="wrap: balance">
+			<Text wrap="balance" variant="title-3">
+				The design system you want to build
+			</Text>
+		</Example.Item>
+	</Example>);
+export const maxLines = () => (<Example>
+		<Example.Item title="maxLines: 2">
+			<Text maxLines={2}>
+				There are many variations of passages of Lorem Ipsum available, but the majority have
+				suffered alteration in some form, by injected humour, or randomised words which don't look
+				even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be
+				sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum
+				generators on the Internet tend to repeat predefined chunks as necessary, making this the
+				first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined
+				with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.
+				The generated Lorem Ipsum is therefore always free from repetition, injected humour, or
+				non-characteristic words etc.
+			</Text>
+		</Example.Item>
+	</Example>);
+export const align = () => (<Example>
+		<Example.Item title="align: start">
+			<Text align="start">Text content</Text>
+		</Example.Item>
+		<Example.Item title="align: center">
+			<Text align="center">Text content</Text>
+		</Example.Item>
+		<Example.Item title="align: end">
+			<Text align="end">Text content</Text>
+		</Example.Item>
+
+		<Example.Item title={["responsive alignment", "[s]: center", "[m+] start"]}>
+			<Text align={{ s: "center", m: "start" }}>Text content</Text>
+		</Example.Item>
+	</Example>);

package/dist/components/TextArea/TextArea.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+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) => {
+    const { onChange, onFocus, onBlur, name, value, defaultValue, placeholder, size = "medium", variant = "outline", resize, className, attributes, } = props;
+    const [autogrowValue, setAutogrowValue] = React.useState(value || defaultValue || "");
+    const formControl = useFormControl();
+    const id = useElementId(props.id);
+    const inputId = formControl?.attributes?.id || props.inputAttributes?.id || id;
+    const disabled = formControl?.disabled || props.disabled;
+    const hasError = formControl?.hasError || props.hasError;
+    const inputAttributes = { ...props.inputAttributes, ...formControl?.attributes };
+    const rootClassName = classNames(s.root, size && responsiveClassNames(s, "--size", size), hasError && s["--status-error"], disabled && s["--disabled"], variant && s[`--variant-${variant}`], resize !== undefined && s[`--resize-${resize}`], className);
+    const handleChange = (event) => {
+        const nextValue = event.target.value;
+        onChange?.({ name, value: nextValue, event });
+        if (resize === "auto" && typeof value !== "string") {
+            setAutogrowValue(nextValue);
+        }
+    };
+    React.useEffect(() => {
+        if (typeof value !== "string" || resize !== "auto")
+            return;
+        setAutogrowValue(value);
+    }, [value, resize]);
+    return (_jsx("div", { ...attributes, "data-rs-aligner-target": true, className: rootClassName, "data-rs-textarea-value": autogrowValue, children: _jsx("textarea", { rows: 3, ...inputAttributes, className: s.input, disabled: disabled, name: name, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, onFocus: onFocus || inputAttributes?.onFocus, onBlur: onBlur || inputAttributes?.onBlur, id: inputId }) }));
+};
+TextArea.Aligner = Aligner;
+export default TextArea;

package/dist/components/TextArea/TextArea.module.css

@@ -0,0 +1 @@
+.root{display:grid;position:relative}.root:after{content:attr(data-rs-textarea-value) " ";visibility:hidden;white-space:pre-wrap}.input,.root:after{border:1px solid var(--rs-color-border-neutral);box-sizing:border-box;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);grid-area:1/1/2/2;padding:calc(var(--rs-p) - 1px);width:100%;word-break:break-word}.input{background:var(--rs-color-background-elevation-base);border-radius:var(--rs-radius-small);color:var(--rs-color-foreground-neutral);outline:none;position:relative;z-index:1}.input:focus{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input[disabled]{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-medium{--rs-p:var(--rs-unit-x2);border-radius:var(--rs-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.root.--variant-faded .input{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded .input:focus{border-color:var(--rs-color-border-primary)}.root.--variant-headless .input{background:transparent;border-color:transparent}.root.--variant-headless .input:focus,.root.--variant-headless.--status-error .input,.root.--variant-headless.--status-error .input:focus{border-color:transparent;box-shadow:none}.root.--status-error .input{border-color:var(--rs-color-border-critical)}.root.--status-error .input:active,.root.--status-error .input:focus{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.root.--resize-auto .input,.root.--resize-none .input{resize:none}@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-p:var(--rs-unit-x2);border-radius:var(--rs-radius-small)}.--size-medium--m .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--m{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-radius-medium)}.--size-large--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--m{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-radius-medium)}.--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-p:var(--rs-unit-x2);border-radius:var(--rs-radius-small)}.--size-medium--l .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--l{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-radius-medium)}.--size-large--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--l{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-radius-medium)}.--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-p:var(--rs-unit-x2);border-radius:var(--rs-radius-small)}.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--xl{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-radius-medium)}.--size-large--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--xl{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-radius-medium)}.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}

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

@@ -0,0 +1,29 @@
+import React from "react";
+import type * as G from "../../types/global";
+import { type FormControlProps } from "../FormControl";
+type Size = G.Responsive<"medium" | "large" | "xlarge">;
+type BaseProps = {
+    id?: string;
+    name: string;
+    size?: Size;
+    variant?: "outline" | "faded" | "headless";
+    disabled?: boolean;
+    placeholder?: string;
+    onChange?: G.ChangeHandler<string, React.ChangeEvent<HTMLTextAreaElement>>;
+    onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div">;
+    inputAttributes?: G.Attributes<"textarea">;
+    resize?: "none" | "auto";
+} & 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 {};

package/dist/components/TextField/TextField.js

@@ -0,0 +1,44 @@
+"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) => {
+    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?.attributes.id || props.inputAttributes?.id || id;
+    const disabled = formControl?.disabled || props.disabled;
+    const hasError = formControl?.hasError || props.hasError;
+    const inputAttributes = { ...props.inputAttributes, ...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", { ...attributes, "data-rs-aligner-target": true, className: rootClassName, children: [_jsx(TextFieldSlot, { position: "start", icon: icon, slot: startSlot, size: size, affix: prefix }), _jsx("input", { ...inputAttributes, className: s.input, disabled: disabled, name: name, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, onFocus: onFocus || inputAttributes?.onFocus, onBlur: onBlur || inputAttributes?.onBlur, id: inputId }), _jsx(TextFieldSlot, { position: "end", icon: endIcon, slot: endSlot, size: size, affix: suffix })] }));
+};
+TextField.Aligner = Aligner;
+export default TextField;

package/dist/components/TextField/TextField.module.css

@@ -0,0 +1 @@
+.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{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.root:focus-within:has(button:focus,a:focus){border-color:transparent;box-shadow:none}.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:calc(var(--rs-unit-x1) - 1px)}.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-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-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-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-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-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-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-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-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-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-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-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-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/dist/components/TextField/TextField.types.d.ts

@@ -0,0 +1,42 @@
+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">;
+    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/dist/components/Theme/Theme.context.js

@@ -0,0 +1,16 @@
+"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: "",
+    rootTheme: "",
+    colorMode: "light",
+    setTheme: () => { },
+    setRootTheme: () => { },
+});
+/* Context used to globally define mode, used only within the library */
+export const GlobalColorModeContext = React.createContext({
+    mode: "light",
+    setMode: () => { },
+    invertMode: () => { },
+});

package/dist/components/Theme/Theme.js

@@ -0,0 +1,60 @@
+"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 rootTheme = isRootProvider ? usedTheme : parentTheme.rootTheme;
+    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 setRootTheme = React.useCallback((theme) => {
+        if (isRootProvider) {
+            setStateTheme(theme);
+        }
+        else {
+            parentTheme.setRootTheme(theme);
+        }
+    }, [isRootProvider, parentTheme]);
+    const setTheme = React.useCallback((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]);
+    const value = React.useMemo(() => ({
+        theme: usedTheme,
+        rootTheme,
+        colorMode: usedColorMode,
+        setTheme,
+        setRootTheme,
+    }), [usedTheme, usedColorMode, setTheme, setRootTheme, rootTheme]);
+    return (_jsx(ThemeContext.Provider, { value: value, 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/dist/components/Theme/Theme.types.d.ts

@@ -0,0 +1,26 @@
+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;
+    rootTheme: string;
+    setRootTheme: (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/dist/components/Theme/useTheme.d.ts

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