reshaped 2.11.11 → 3.0.0

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

@@ -1,193 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { 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 } = props, modalProps = __rest(props, ["active", "title", "subtitle", "children"]);
-    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();
-    return (<Example>
-			<Example.Item title="trap focus works with custom children components">
-				<Demo title="Modal title" autoFocus={false} active/>
-			</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="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/components/Overlay/Overlay.js

@@ -1,105 +0,0 @@
-"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, 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(() => {
-        console.log(1221212121, rendered, contentRef);
-        if (!rendered || !contentRef.current)
-            return;
-        const trapFocus = new TrapFocus(contentRef.current);
-        console.log("efffect", contentRef.current.querySelector("[role=dialog]"));
-        trapFocus.trap({
-            initialFocusEl: contentRef.current.querySelector("[role=dialog][tabindex='-1']"),
-        });
-        return () => trapFocus.release();
-    }, [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", Object.assign({}, 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/components/Overlay/Overlay.module.css

@@ -1 +0,0 @@
-.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;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/components/Overlay/Overlay.types.d.ts

@@ -1,12 +0,0 @@
-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;
-    className?: G.ClassName;
-    attributes?: G.Attributes<"div", Props>;
-};

package/components/Pagination/Pagination.js

@@ -1,10 +0,0 @@
-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, Object.assign({}, props));
-    return _jsx(PaginationUncontrolled, Object.assign({}, props));
-};
-export default Pagination;

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

@@ -1,52 +0,0 @@
-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", Props>;
-};
-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/components/Pagination/PaginationControlled.js

@@ -1,48 +0,0 @@
-"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 === null || onChange === void 0 ? void 0 : 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 === null || pageAriaLabel === void 0 ? void 0 : 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/components/Pagination/PaginationUncontrolled.js

@@ -1,25 +0,0 @@
-"use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import PaginationControlled from "./PaginationControlled.js";
-const PaginationUncontrolled = (props) => {
-    const { defaultPage = 1, onChange } = props, controlledProps = __rest(props, ["defaultPage", "onChange"]);
-    const [page, setPage] = React.useState(defaultPage || 1);
-    const handleChange = (args) => {
-        setPage(args.page);
-        onChange === null || onChange === void 0 ? void 0 : onChange(args);
-    };
-    return _jsx(PaginationControlled, Object.assign({}, controlledProps, { onChange: handleChange, page: page }));
-};
-export default PaginationUncontrolled;

package/components/PinField/PinField.js

@@ -1,10 +0,0 @@
-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, Object.assign({}, props));
-    return _jsx(PinFieldUncontrolled, Object.assign({}, props));
-};
-export default PinField;

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

@@ -1,23 +0,0 @@
-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", BaseProps>;
-    className?: G.ClassName;
-    attributes?: G.Attributes<"div", BaseProps>;
-};
-export type ControlledProps = BaseProps & {
-    value: string;
-    defaultValue?: never;
-};
-export type UncontrolledProps = BaseProps & {
-    value?: never;
-    defaultValue?: string;
-};
-export type Props = ControlledProps | UncontrolledProps;
-export {};

package/components/PinField/PinFieldControlled.js

@@ -1,161 +0,0 @@
-"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("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) => {
-        var _a;
-        const el = inputRef.current;
-        if (!el || el.selectionStart === null)
-            return;
-        const mode = modeRef.current;
-        const selectionStart = (_a = index !== null && index !== void 0 ? index : el.selectionStart) !== null && _a !== void 0 ? _a : 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 === null || onChange === void 0 ? void 0 : 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", Object.assign({}, 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 === null || inputAttributes === void 0 ? void 0 : inputAttributes.autoComplete) || "one-time-code", inputMode: pattern === "numeric" ? "numeric" : undefined, pattern: `${patternRegexp}{${valueLength}}` }))] }));
-};
-export default PinFieldControlled;