reshaped 2.11.12 → 3.0.1

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

@@ -0,0 +1,194 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import Modal from "../index.js";
+import View from "../../View/index.js";
+import Button from "../../Button/index.js";
+import Dismissible from "../../Dismissible/index.js";
+import DropdownMenu from "../../DropdownMenu/index.js";
+import Switch from "../../Switch/index.js";
+import TextField from "../../TextField/index.js";
+import useToggle from "../../../hooks/useToggle.js";
+import Radio from "../../Radio/index.js";
+export default {
+    title: "Components/Modal",
+    component: Modal,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/modal",
+        },
+    },
+};
+const Demo = (props) => {
+    const { active: activeProp, title, subtitle, children, ...modalProps } = props;
+    const { active, activate, deactivate } = useToggle(activeProp);
+    return (<>
+			<Button onClick={activate}>Open dialog</Button>
+			<Modal {...modalProps} active={active} onClose={deactivate}>
+				<View gap={3}>
+					{(title || subtitle) && (<Dismissible onClose={deactivate} closeAriaLabel="Close modal">
+							{title && <Modal.Title>{title}</Modal.Title>}
+							{subtitle && <Modal.Subtitle>{subtitle}</Modal.Subtitle>}
+						</Dismissible>)}
+					{children ||
+            "Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups."}
+					<Button onClick={deactivate}>Close</Button>
+					<TextField name="hey"/>
+				</View>
+			</Modal>
+		</>);
+};
+export const position = () => (<Example>
+		<Example.Item title={["responsive position", "[s] full-screen", "[m] center", "[l] end"]}>
+			<Demo position={{ s: "full-screen", m: "center", l: "end" }}/>
+		</Example.Item>
+		<Example.Item title="position: center">
+			<Demo position="center"/>
+		</Example.Item>
+		<Example.Item title="position: bottom">
+			<Demo position="bottom"/>
+		</Example.Item>
+		<Example.Item title="position: start">
+			<Demo position="start"/>
+		</Example.Item>
+		<Example.Item title="position: end">
+			<Demo position="end"/>
+		</Example.Item>
+		<Example.Item title="position: full-screen">
+			<Demo position="full-screen"/>
+		</Example.Item>
+	</Example>);
+export const size = () => {
+    return (<Example>
+			<Example.Item title="size: default">
+				<Demo />
+			</Example.Item>
+			<Example.Item title="size: 300px">
+				<Demo size="300px"/>
+			</Example.Item>
+			<Example.Item title={["size: 800px", "should have max width of 100% minus gaps on the sides"]}>
+				<Demo size="800px"/>
+			</Example.Item>
+			<Example.Item title={[
+            "responsive size, responsive position",
+            "[s] auto",
+            "[m+] 600px",
+            "bottom position changes height instead of width",
+        ]}>
+				<Demo position={{ s: "bottom", m: "center", l: "end" }} size={{ s: "auto", m: "600px" }}/>
+			</Example.Item>
+		</Example>);
+};
+export const padding = () => (<Example>
+		<Example.Item title="padding: 0">
+			<Demo padding={0}/>
+		</Example.Item>
+		<Example.Item title="padding: 6">
+			<Demo padding={6}/>
+		</Example.Item>
+		<Example.Item title={["responsive padding", "[s] 2", "[m+]: 6"]}>
+			<Demo padding={{ s: 2, m: 6 }}/>
+		</Example.Item>
+	</Example>);
+export const composition = () => (<Example>
+		<Example.Item title="title, subtitle, dismissible">
+			<Demo title="Modal title" subtitle="Modal subtitle"/>
+		</Example.Item>
+	</Example>);
+export const overlay = () => (<Example>
+		<Example.Item title="transparentOverlay, doesn't lock scroll">
+			<Demo transparentOverlay/>
+			<View height="1000px"/>
+		</Example.Item>
+	</Example>);
+export const edgeCases = () => {
+    const menuModalToggle = useToggle();
+    const scrollModalToggle = useToggle();
+    const inputRef = React.useRef(null);
+    return (<Example>
+			<Example.Item title="trap focus works with custom children components">
+				<Demo title="Modal title" autoFocus={false}/>
+			</Example.Item>
+			<Example.Item title="trap focus works with custom children components">
+				<Demo title="Modal title">
+					<View gap={3} direction="row">
+						<Button onClick={() => { }}>Button</Button>
+						<Switch name="switch"/>
+					</View>
+				</Demo>
+			</Example.Item>
+			<Example.Item title="focus moves to the input">
+				<Demo title="Modal title" onOpen={() => {
+            inputRef.current?.focus();
+        }}>
+					<View gap={3} direction="row">
+						<Button onClick={() => { }}>Button</Button>
+						<TextField name="name" inputAttributes={{ ref: inputRef }}/>
+					</View>
+				</Demo>
+			</Example.Item>
+			<Example.Item title="scrollable area in modal ignores swipe-to-close">
+				<View gap={3} direction="row">
+					<Button onClick={scrollModalToggle.activate}>Open</Button>
+					<Modal active={scrollModalToggle.active} onClose={scrollModalToggle.deactivate} size="300px" position="bottom">
+						<View height="1000px" backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
+							Content
+						</View>
+					</Modal>
+				</View>
+			</Example.Item>
+			<Example.Item title={[
+            "trap focus works correctly when it was already trapped",
+            "focus return back to the dropdown trigger on modal close",
+            "closing dropdown inside the modal doesn't close the modal",
+        ]}>
+				<DropdownMenu>
+					<DropdownMenu.Trigger>
+						{(attributes) => <Button attributes={attributes}>Open menu</Button>}
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content>
+						<DropdownMenu.Item onClick={menuModalToggle.activate}>Open dialog</DropdownMenu.Item>
+						<DropdownMenu.Item>Item 2</DropdownMenu.Item>
+					</DropdownMenu.Content>
+				</DropdownMenu>
+				<Modal active={menuModalToggle.active} onClose={menuModalToggle.deactivate}>
+					<View gap={3}>
+						<DropdownMenu>
+							<DropdownMenu.Trigger>
+								{(attributes) => <Button attributes={attributes}>Open menu</Button>}
+							</DropdownMenu.Trigger>
+							<DropdownMenu.Content>
+								<DropdownMenu.Item>Item 1</DropdownMenu.Item>
+								<DropdownMenu.Item>Item 2</DropdownMenu.Item>
+							</DropdownMenu.Content>
+						</DropdownMenu>
+						<Button onClick={menuModalToggle.deactivate}>Close</Button>
+					</View>
+				</Modal>
+			</Example.Item>
+
+			<Example.Item title="scroll locks on open">
+				<Demo />
+				<View height="1000px"/>
+			</Example.Item>
+		</Example>);
+};
+export const trapFocusEdgeCases = () => {
+    const toggle = useToggle();
+    return (<Example>
+			<Example.Item title="Radio should be navigatable with arrow keys">
+				<Button onClick={toggle.activate}>Open modal</Button>
+				<Modal active={toggle.active} onClose={toggle.deactivate}>
+					<View gap={2}>
+						<Button onClick={() => { }}>Action 1</Button>
+						<Radio name="radio" value="1">
+							Option 1
+						</Radio>
+						<Radio name="radio" value="2">
+							Option 2
+						</Radio>
+						<Button onClick={() => { }}>Action 2</Button>
+					</View>
+				</Modal>
+			</Example.Item>
+		</Example>);
+};

package/dist/components/Overlay/Overlay.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { onNextFrame } from "../../utilities/animation.js";
+import { classNames } from "../../utilities/helpers.js";
+import TrapFocus from "../../utilities/a11y/TrapFocus.js";
+import useToggle from "../../hooks/useToggle.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import useHotkeys from "../../hooks/useHotkeys.js";
+import useScrollLock from "../../hooks/useScrollLock.js";
+import useIsDismissible from "../../hooks/_private/useIsDismissible.js";
+import Portal from "../_private/Portal/index.js";
+import s from "./Overlay.module.css";
+const Overlay = (props) => {
+    const { active, children, transparent, onClose, onOpen, className, attributes } = props;
+    const clickThrough = transparent === true;
+    const opacity = clickThrough ? 0 : (1 - (transparent || 0)) * 0.7;
+    const [mounted, setMounted] = React.useState(false);
+    const [animated, setAnimated] = React.useState(false);
+    const contentRef = React.useRef(null);
+    const isMouseDownValidRef = React.useRef(false);
+    const { lockScroll, unlockScroll } = useScrollLock();
+    const { active: rendered, activate: render, deactivate: remove } = useToggle(active || false);
+    const { active: visible, activate: show, deactivate: hide } = useToggle(active || false);
+    const isDismissible = useIsDismissible(active, contentRef);
+    const rootClassNames = classNames(s.root, visible && s["--visible"], clickThrough && s["--click-through"], animated && s["--animated"], className);
+    const isInsideChild = (el) => {
+        if (!contentRef.current)
+            return;
+        const firstChild = contentRef.current.firstChild;
+        if (!firstChild)
+            return;
+        return firstChild.contains(el);
+    };
+    const close = React.useCallback(() => {
+        if (!visible || !isDismissible())
+            return;
+        if (onClose)
+            onClose();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visible, isDismissible]);
+    const handleMouseDown = (event) => {
+        isMouseDownValidRef.current = !isInsideChild(event.target);
+    };
+    const handleMouseUp = (event) => {
+        const isMouseUpValid = !isInsideChild(event.target);
+        const shouldClose = isMouseDownValidRef.current && isMouseUpValid && !clickThrough;
+        if (!shouldClose)
+            return;
+        close();
+    };
+    const handleTransitionEnd = (e) => {
+        if (e.propertyName !== "transform" || !e.pseudoElement)
+            return;
+        setAnimated(false);
+        if (visible)
+            return;
+        if (!clickThrough)
+            unlockScroll();
+        remove();
+    };
+    useHotkeys({ Escape: close }, [close]);
+    React.useEffect(() => {
+        setAnimated(true);
+        if (active && !rendered)
+            render();
+        if (!active && rendered)
+            hide();
+    }, [active, render, hide, rendered]);
+    // Show overlay after it was rendered
+    React.useEffect(() => {
+        if (!rendered)
+            return;
+        if (!clickThrough)
+            lockScroll();
+        onNextFrame(() => {
+            show();
+        });
+    }, [rendered, show, lockScroll, clickThrough]);
+    React.useEffect(() => {
+        if (!rendered || !contentRef.current)
+            return;
+        const trapFocus = new TrapFocus(contentRef.current);
+        trapFocus.trap({
+            initialFocusEl: contentRef.current.querySelector("[role=dialog][tabindex='-1']"),
+        });
+        onOpen?.();
+        return () => trapFocus.release();
+        // Ignoring onOpen since it might be not memoized when passed
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [rendered]);
+    // Unlock scroll on unmount
+    React.useEffect(() => {
+        return () => {
+            if (!clickThrough)
+                unlockScroll();
+        };
+    }, [unlockScroll, clickThrough]);
+    useIsomorphicLayoutEffect(() => {
+        setMounted(true);
+    }, []);
+    if (!rendered || !mounted)
+        return null;
+    return (_jsx(Portal, { children: _jsx(Portal.Scope, { children: (ref) => (_jsx("div", { ...attributes, ref: ref, style: { "--rs-overlay-opacity": opacity }, role: "button", tabIndex: -1, className: rootClassNames, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTransitionEnd: handleTransitionEnd, children: _jsx("div", { className: s.wrapper, children: _jsx("div", { className: s.inner, children: _jsx("div", { className: s.content, ref: contentRef, children: typeof children === "function" ? children({ active: visible }) : children }) }) }) })) }) }));
+};
+export default Overlay;

package/dist/components/Overlay/Overlay.module.css

@@ -0,0 +1 @@
+.root{overflow:auto;-webkit-overflow-scrolling:touch;color:var(--rs-color-white);cursor:default!important;z-index:var(--rs-z-index-overlay)}.root,.root:after{inset:0;position:fixed}.root:after{background:var(--rs-color-black);content:"";opacity:0;pointer-events:none;transform:scale(1.01)}.wrapper{display:table;height:100%;width:100%}.inner{display:table-cell;text-align:center}.content,.inner{vertical-align:middle}.content{display:inline-block;position:relative;text-align:initial;z-index:var(--rs-z-index-raised)}.root.--visible:after{opacity:var(--rs-overlay-opacity);transform:scale(1)}.root.--click-through{color:inherit;pointer-events:none}.root.--click-through .content,.root.--click-through>:not(.wrapper){pointer-events:all}.root.--animated:after{transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:opacity,transform}

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

@@ -0,0 +1,13 @@
+import type React from "react";
+import type * as G from "../../types/global";
+export type Props = {
+    transparent?: boolean | number;
+    children?: React.ReactNode | ((props: {
+        active: boolean;
+    }) => React.ReactNode);
+    active?: boolean;
+    onClose?: () => void;
+    onOpen?: () => void;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div">;
+};

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PaginationControlled from "./PaginationControlled.js";
+import PaginationUncontrolled from "./PaginationUncontrolled.js";
+const Pagination = (props) => {
+    const { page } = props;
+    if (page !== undefined)
+        return _jsx(PaginationControlled, { ...props });
+    return _jsx(PaginationUncontrolled, { ...props });
+};
+export default Pagination;

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

@@ -0,0 +1,52 @@
+import type * as G from "../../types/global";
+export type BaseProps = {
+    /**
+     * Total number of pages available
+     */
+    total: number;
+    /**
+     * Event handler triggered when the current page changes
+     */
+    onChange?: (args: {
+        page: number;
+    }) => void;
+    /**
+     * Function to dynamically get an aria-label for each
+     */
+    pageAriaLabel?: (args: {
+        page: number;
+    }) => string;
+    /**
+     * aria-label for the previous page button
+     */
+    previousAriaLabel: string;
+    /**
+     * aria-label for the next page button
+     */
+    nextAriaLabel: string;
+    /**
+     * Custom root element className
+     */
+    className?: G.ClassName;
+    /**
+     * Custom root element attributes
+     */
+    attributes?: G.Attributes<"div">;
+};
+export type ControlledProps = BaseProps & {
+    /**
+     * Currently selected page number, starts with 1.
+     * Enables controlled component behavior.
+     */
+    page: number;
+    defaultPage?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    page?: never;
+    /**
+     * Default selected page number, starts with 1.
+     * Enables uncontrolled component behavior.
+     */
+    defaultPage?: number;
+};
+export type Props = ControlledProps | UncontrolledProps;

package/dist/components/Pagination/PaginationControlled.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from "../Button/index.js";
+import View from "../View/index.js";
+import IconChevronLeft from "../../icons/ChevronLeft.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
+import { range } from "../../utilities/helpers.js";
+import s from "./Pagination.module.css";
+const PaginationControlled = (props) => {
+    const { total, page: selectedPage = 1, onChange, pageAriaLabel, previousAriaLabel, nextAriaLabel, className, attributes, } = props;
+    const selectionRadius = 1;
+    const edgeRadius = 1;
+    const pages = [];
+    const hasHead = selectedPage - selectionRadius > edgeRadius + 2;
+    const hasTail = selectedPage + selectionRadius < total - edgeRadius;
+    /**
+     * Calculate the amount of rendered pages + dots
+     * Removing head or tail also removes their dots
+     */
+    let count = selectionRadius * 2 + 1;
+    if (!hasHead)
+        count += edgeRadius + 1;
+    if (!hasTail)
+        count += edgeRadius + 1;
+    const selectionStart = hasHead
+        ? Math.min(total - count + 1, Math.max(1, selectedPage - selectionRadius))
+        : 1;
+    const selectionEnd = hasTail ? Math.min(selectionStart + count - 1, total) : total;
+    if (hasHead)
+        pages.push(...range(1, edgeRadius), null);
+    pages.push(...range(selectionStart, selectionEnd));
+    if (hasTail)
+        pages.push(null, ...range(total - edgeRadius + 1, total));
+    const changePage = (page) => {
+        const resolvedValue = Math.min(total, Math.max(1, page));
+        onChange?.({ page: resolvedValue });
+    };
+    return (_jsxs(View, { direction: "row", align: "center", gap: 1, className: className, attributes: attributes, children: [_jsx(Button, { variant: "ghost", size: "small", icon: IconChevronLeft, onClick: () => changePage(selectedPage - 1), disabled: selectedPage === 1, attributes: { "aria-label": previousAriaLabel } }), pages.map((page, index) => {
+                if (page === null) {
+                    return (_jsx(View, { width: 7, align: "center", children: "..." }, `dots-${index}`));
+                }
+                return (_jsx(Button, { size: "small", variant: page === selectedPage ? "solid" : "ghost", color: page === selectedPage ? "primary" : "neutral", onClick: () => changePage(page), attributes: {
+                        "aria-label": pageAriaLabel?.({ page }),
+                        "aria-current": page === selectedPage,
+                    }, className: s.page, children: page }, index));
+            }), _jsx(Button, { variant: "ghost", size: "small", className: s.page, icon: IconChevronRight, onClick: () => changePage(selectedPage + 1), disabled: selectedPage === total, attributes: { "aria-label": nextAriaLabel } })] }));
+};
+export default PaginationControlled;

package/dist/components/Pagination/PaginationUncontrolled.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import PaginationControlled from "./PaginationControlled.js";
+const PaginationUncontrolled = (props) => {
+    const { defaultPage = 1, onChange, ...controlledProps } = props;
+    const [page, setPage] = React.useState(defaultPage || 1);
+    const handleChange = (args) => {
+        setPage(args.page);
+        onChange?.(args);
+    };
+    return _jsx(PaginationControlled, { ...controlledProps, onChange: handleChange, page: page });
+};
+export default PaginationUncontrolled;

package/dist/components/PinField/PinField.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PinFieldControlled from "./PinFieldControlled.js";
+import PinFieldUncontrolled from "./PinFieldUncontrolled.js";
+const PinField = (props) => {
+    const { value } = props;
+    if (value !== undefined)
+        return _jsx(PinFieldControlled, { ...props });
+    return _jsx(PinFieldUncontrolled, { ...props });
+};
+export default PinField;

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

@@ -0,0 +1,23 @@
+import type * as G from "../../types/global";
+export type Size = "medium" | "large" | "xlarge";
+type BaseProps = {
+    name: string;
+    valueLength?: number;
+    pattern?: "alphabetic" | "numeric" | "alphanumeric";
+    size?: G.Responsive<Size>;
+    variant?: "outline" | "faded";
+    onChange?: G.ChangeHandler<string>;
+    inputAttributes?: G.Attributes<"input">;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div">;
+};
+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/PinField/PinFieldControlled.js

@@ -0,0 +1,160 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { responsivePropDependency } from "../../utilities/helpers.js";
+import View from "../View/index.js";
+import Text from "../Text/index.js";
+import useHotkeys from "../../hooks/useHotkeys.js";
+import { useFormControl } from "../FormControl/index.js";
+import { onNextFrame } from "../../utilities/animation.js";
+import * as keys from "../../constants/keys.js";
+import { regExpNumericChar, regExpAlphabeticChar, regExpAlphaNumericChar, } from "./PinField.constants.js";
+import s from "./PinField.module.css";
+const sizeMap = {
+    medium: 9,
+    large: 12,
+    xlarge: 14,
+};
+const patternMap = {
+    numeric: regExpNumericChar,
+    alphabetic: regExpAlphabeticChar,
+    alphanumeric: regExpAlphaNumericChar,
+};
+const PinFieldControlled = (props) => {
+    const { valueLength = 4, value, onChange, name, pattern = "numeric", size = "medium", variant = "outline", className, attributes, inputAttributes, } = props;
+    const patternRegexp = patternMap[pattern];
+    const responsiveInputSize = responsivePropDependency(size, (value) => sizeMap[value]);
+    const responsiveTextVariant = responsivePropDependency(size, (value) => value === "medium" ? "body-3" : "body-2");
+    const responsiveRadius = responsivePropDependency(size, (value) => value === "xlarge" ? "medium" : "small");
+    const [focusedIndex, setFocusedIndex] = React.useState(null);
+    const formControl = useFormControl();
+    /**
+     * Most of the logic works based on this mode parameter
+     * `edit` mode means user has selected an already filled item and is changing its value,
+     * so caret position is related to the value rendered before it
+     * `type` means user is typing a new value in an empty item,
+     * so caret is positioned before the value that's going to be added
+     */
+    const modeRef = React.useRef(value.length === valueLength ? "edit" : "type");
+    const inputRef = React.useRef(null);
+    const nodes = [];
+    /**
+     * Update displayed item focus based on the current caret position and current mode
+     */
+    const syncSelection = React.useCallback((index) => {
+        const el = inputRef.current;
+        if (!el || el.selectionStart === null)
+            return;
+        const mode = modeRef.current;
+        const selectionStart = index ?? el.selectionStart ?? 0;
+        const nextSelectionStart = Math.min(mode === "type" ? el.value.length : el.value.length - 1, Math.max(0, selectionStart));
+        if (modeRef.current === "type") {
+            el.selectionStart = nextSelectionStart;
+            el.selectionEnd = nextSelectionStart;
+        }
+        else {
+            el.selectionStart = nextSelectionStart;
+            el.selectionEnd = nextSelectionStart + 1;
+        }
+        setFocusedIndex(Math.min(el.selectionStart, valueLength - 1));
+    }, [valueLength]);
+    /**
+     * Using onNextFrame here to wait for the native behavior first
+     */
+    useHotkeys({
+        [`${keys.LEFT},${keys.UP}`]: () => {
+            onNextFrame(() => {
+                const el = inputRef.current;
+                if (!el || el.selectionStart === null)
+                    return;
+                const mode = modeRef.current;
+                const nextMode = !value.length ? "type" : "edit";
+                modeRef.current = nextMode;
+                syncSelection(mode === "type" && nextMode === "edit" ? el.selectionStart : el.selectionStart - 1);
+            });
+        },
+        [`${keys.RIGHT},${keys.DOWN}`]: () => {
+            onNextFrame(() => {
+                const el = inputRef.current;
+                if (!el || el.selectionStart === null)
+                    return;
+                const nextMode = el.selectionStart === value.length && el.selectionStart !== valueLength
+                    ? "type"
+                    : "edit";
+                modeRef.current = nextMode;
+                syncSelection(el.selectionStart);
+            });
+        },
+    }, [value, syncSelection, valueLength], {
+        ref: inputRef,
+    });
+    const handleFocus = () => {
+        /**
+         * Tabing into the input might select the whole value
+         * so we're resetting that behavior
+         */
+        syncSelection(value.length);
+    };
+    const handleBlur = () => {
+        setFocusedIndex(null);
+    };
+    const handlePaste = (e) => {
+        if (focusedIndex === null || !inputRef.current)
+            return;
+        /**
+         * Input might not have enough space for pasting the value so we free up space based on the pasted value length
+         */
+        const data = e.clipboardData.getData("text");
+        const updatedValue = value.slice(0, focusedIndex) + value.slice(focusedIndex + data.length);
+        /**
+         * Manually update the value and selection to preserve all not affected values and keep caret in the correct position
+         */
+        inputRef.current.value = updatedValue;
+        inputRef.current.selectionEnd = focusedIndex;
+        inputRef.current.selectionStart = inputRef.current.selectionStart;
+    };
+    const handleInput = (event) => {
+        const el = event.target;
+        const nextValue = el.value;
+        const matcher = new RegExp(`^${patternRegexp}+$`);
+        if (nextValue && !nextValue.match(matcher))
+            return;
+        if (el.selectionStart === null)
+            return;
+        const nextMode = 
+        // Finished editing the last character
+        nextValue.length === valueLength ||
+            // Staying inside the sequence
+            nextValue.length > el.selectionStart
+            ? "edit"
+            : "type";
+        modeRef.current = nextMode;
+        onChange?.({ event, name, value: nextValue });
+        onNextFrame(() => {
+            syncSelection();
+        });
+    };
+    /**
+     * Manually handle correct caret position when any of the items are clicked
+     */
+    const handleItemClick = (event, index) => {
+        if (!inputRef.current)
+            return;
+        event.preventDefault();
+        inputRef.current.focus();
+        modeRef.current = index >= value.length ? "type" : "edit";
+        syncSelection(index);
+    };
+    for (let i = 0; i < valueLength; i++) {
+        nodes.push(_jsx(View, { height: responsiveInputSize, width: responsiveInputSize, borderRadius: responsiveRadius, borderColor: variant === "faded" ? "transparent" : "neutral", backgroundColor: variant === "faded" ? "neutral-faded" : "elevation-base", align: "center", justify: "center", className: [s.item, focusedIndex === i && s["item--focused"]], attributes: {
+                onMouseDown: (e) => {
+                    handleItemClick(e, i);
+                },
+                onTouchStart: (e) => {
+                    handleItemClick(e, i);
+                },
+            }, children: value[i] && _jsx(Text, { variant: responsiveTextVariant, children: value[i] }) }, i));
+    }
+    return (_jsxs(View, { gap: 2, direction: "row", className: [s.root, className], attributes: attributes, children: [nodes, _jsx("input", { ...inputAttributes, ...formControl.attributes, type: "text", className: s.input, onFocus: handleFocus, onBlur: handleBlur, onPaste: handlePaste, onInput: handleInput, value: value, name: name, maxLength: valueLength, ref: inputRef, autoComplete: inputAttributes?.autoComplete || "one-time-code", inputMode: pattern === "numeric" ? "numeric" : undefined, pattern: `${patternRegexp}{${valueLength}}` })] }));
+};
+export default PinFieldControlled;

package/dist/components/PinField/PinFieldUncontrolled.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import PinFieldControlled from "./PinFieldControlled.js";
+const PinFieldUncontrolled = (props) => {
+    const { defaultValue, onChange, ...controlledProps } = props;
+    const [value, setValue] = React.useState(defaultValue || "");
+    const handleChange = (args) => {
+        setValue(args.value);
+        onChange?.(args);
+    };
+    return _jsx(PinFieldControlled, { ...controlledProps, value: value, onChange: handleChange });
+};
+export default PinFieldUncontrolled;