mosuk-ui 1.0.10 → 1.0.12

package/components/actions/input/(otp)/component/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { InputOtpProps } from './component.interface';
+export declare function InputOtp<C extends ElementType = 'div'>({ as, children, length, ...rest }: InputOtpProps<C>): React.JSX.Element;

package/components/actions/input/(otp)/component/component.interface.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+import { OTPFieldPreview as BaseOTPField } from '@base-ui/react/otp-field';
+export type InputOtpProps<C extends ElementType = 'div'> = {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'> & Omit<BaseOTPField.Root.Props, 'className' | 'style'>;

package/components/actions/input/(otp)/component/component.js

@@ -0,0 +1,33 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 classNames from 'classnames';
+import React, { useId } from 'react';
+import { OTPFieldPreview as OTPField } from '@base-ui/react/otp-field';
+import styles from './component.module.css';
+export function InputOtp(_a) {
+    var _b;
+    var as = _a.as, children = _a.children, length = _a.length, rest = __rest(_a, ["as", "children", "length"]);
+    var Component = (as || OTPField.Root);
+    var id = (_b = rest === null || rest === void 0 ? void 0 : rest.id) !== null && _b !== void 0 ? _b : useId();
+    return (React.createElement(Component, __assign({}, rest, { id: id, length: length, className: classNames(styles.root, 'mosuk-input-otp', rest === null || rest === void 0 ? void 0 : rest.className) }), children));
+}

package/components/actions/input/(otp)/component/component.module.css

@@ -0,0 +1,49 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .root {
+            display: flex;
+            width: 100%;
+            gap: var(--spacing-2, calc(var(--spacing, 0.25rem) * 2));
+        }
+
+        .input {
+            box-sizing: border-box;
+            margin: 0;
+            height: var(--spacing-11, calc(var(--spacing, 0.25rem) * 11));
+            width: var(--spacing-10, calc(var(--spacing, 0.25rem) * 10));
+            border-radius: var(--radius-lg, calc(var(--spacing, 0.25rem) * 2));
+            border: 1px solid var(--color-gray-300, rgb(209 213 219));
+            background-color: transparent;
+            text-align: center;
+            font-family: inherit;
+            font-size: var(--text-xl, calc(var(--spacing, 0.25rem) * 4.5));
+            font-weight: var(--font-medium, 500);
+            color: var(--color-black, #000);
+            outline: none;
+            transition: all 200ms ease-in-out;
+
+            &::placeholder {
+                color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+            }
+
+            &:focus {
+                outline: none;
+                border-color: var(--color-blue-500, oklch(0.623 0.214 259.815));
+            }
+
+            &:read-only {
+                opacity: 50%;
+                pointer-events: none;
+            }
+        }
+
+        .separator {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+            font-size: var(--text-xl, calc(var(--spacing, 0.25rem) * 4.5));
+            font-weight: var(--font-medium, 500);
+        }
+    }
+}

package/components/actions/input/(otp)/component/field/component.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { OTPFieldInputProps } from "@base-ui/react";
+export interface InputOtpFieldProps extends OTPFieldInputProps {
+    index?: number;
+    length?: number;
+}
+export declare function InputOtpField({ index, length, className, ...rest }: InputOtpFieldProps): React.JSX.Element;

package/components/actions/input/(otp)/component/field/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 classNames from 'classnames';
+import React from 'react';
+import { OTPFieldPreview as OTPField } from '@base-ui/react/otp-field';
+import styles from '../component.module.css';
+export function InputOtpField(_a) {
+    var index = _a.index, length = _a.length, className = _a.className, rest = __rest(_a, ["index", "length", "className"]);
+    return (React.createElement(OTPField.Input, __assign({ className: classNames(styles.input, 'mosuk-input-otp-field', className), "aria-label": "Character ".concat(index !== null && index !== void 0 ? index : 1, " of ").concat(length) }, rest)));
+}

package/components/actions/input/(otp)/component/index.d.ts

@@ -0,0 +1,13 @@
+import { InputOtp as Component } from './component';
+import { InputOtpProps as ComponentProps } from './component.interface';
+import { InputOtpField, InputOtpFieldProps } from './field/component';
+import { InputOtpSeparator, InputOtpSeparatorProps } from './separator/component';
+export declare const InputOtp: typeof Component & {
+    Field: typeof InputOtpField;
+    Separator: typeof InputOtpSeparator;
+};
+export declare namespace InputOtp {
+    type Props = ComponentProps;
+    type FieldProps = InputOtpFieldProps;
+    type SeparatorProps = InputOtpSeparatorProps;
+}

package/components/actions/input/(otp)/component/index.js

@@ -0,0 +1,7 @@
+import { InputOtp as Component } from './component';
+import { InputOtpField } from './field/component';
+import { InputOtpSeparator } from './separator/component';
+export var InputOtp = Object.assign(Component, {
+    Field: InputOtpField,
+    Separator: InputOtpSeparator,
+});

package/components/actions/input/(otp)/component/separator/component.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SeparatorProps } from "@base-ui/react";
+export interface InputOtpSeparatorProps extends SeparatorProps {
+    index?: number;
+    length?: number;
+}
+export declare function InputOtpSeparator({ index, length, className, ...rest }: InputOtpSeparatorProps): React.JSX.Element;

package/components/actions/input/(otp)/component/separator/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 classNames from 'classnames';
+import React from 'react';
+import { OTPFieldPreview as OTPField } from '@base-ui/react/otp-field';
+import styles from '../component.module.css';
+export function InputOtpSeparator(_a) {
+    var index = _a.index, length = _a.length, className = _a.className, rest = __rest(_a, ["index", "length", "className"]);
+    return (React.createElement(OTPField.Separator, __assign({ className: classNames(styles.separator, 'mosuk-input-otp-separator', className), "aria-label": "Character ".concat(index !== null && index !== void 0 ? index : 1, " of ").concat(length) }, rest)));
+}

package/components/actions/input/(otp)/skeleton/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { InputOtpSkeletonProps } from './component.interface';
+export declare function InputOtpSkeleton<C extends ElementType = 'div'>({ as, slots, children, ...rest }: InputOtpSkeletonProps<C>): React.JSX.Element;

package/components/actions/{toggle/skeleton/component.props.d.ts → input/(otp)/skeleton/component.interface.d.ts}

@@ -1,5 +1,6 @@
 import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
-export type ToggleSkeletonProps<C extends ElementType = 'div'> = {
+export type InputOtpSkeletonProps<C extends ElementType = 'div'> = {
     as?: C;
     ref?: Ref<any>;
+    slots?: number;
 } & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/actions/{toggle → input/(otp)}/skeleton/component.js

@@ -23,8 +23,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import classNames from 'classnames';
 import React from 'react';
 import styles from './component.module.css';
-export function ToggleSkeleton(_a) {
-    var as = _a.as, rest = __rest(_a, ["as"]);
+export function InputOtpSkeleton(_a) {
+    var as = _a.as, _b = _a.slots, slots = _b === void 0 ? 6 : _b, children = _a.children, rest = __rest(_a, ["as", "slots", "children"]);
     var Component = (as || 'div');
-    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-toggle-skeleton', styles.toggle, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-input-otp-skeleton', styles.otp, rest === null || rest === void 0 ? void 0 : rest.className) }), children));
 }

package/components/actions/input/(otp)/skeleton/component.module.css

@@ -0,0 +1,18 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .otp {
+            display: flex;
+            gap: calc(var(--spacing, .25rem) * 2);
+            width: 100%;
+        }
+
+        .slot {
+            width: calc(var(--spacing, .25rem) * 10);
+            height: calc(var(--spacing, .25rem) * 10);
+            min-width: calc(var(--spacing, .25rem) * 10);
+            min-height: calc(var(--spacing, .25rem) * 10);
+
+            border-radius: calc(var(--spacing, .25rem) * 2);
+        }
+    }
+}

package/components/actions/input/(otp)/skeleton/index.d.ts

@@ -0,0 +1,6 @@
+import { InputOtpSkeleton as Component } from './component';
+import { InputOtpSkeletonProps as ComponentProps } from './component.interface';
+export declare const InputOtpSkeleton: typeof Component;
+export declare namespace InputOtpSkeleton {
+    type Props = ComponentProps;
+}

package/components/actions/input/(otp)/skeleton/index.js

@@ -0,0 +1,2 @@
+import { InputOtpSkeleton as Component } from './component';
+export var InputOtpSkeleton = Object.assign(Component, {});

package/components/actions/toggle/component/{button → .partials/components/button}/component.js

@@ -22,9 +22,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import classNames from 'classnames';
 import React, { useCallback } from 'react';
-import { Button } from '../../../button/component/component';
-import styles from '../component.module.css';
-import { useToggle } from '../hooks/hook';
+import { Button } from '../../../../../button/component/component';
+import { useToggle } from '../../hooks/hook';
+import styles from '../../styles/component.module.css';
 export function ToggleButton(_a) {
     var _b;
     var as = _a.as, value = _a.value, rest = __rest(_a, ["as", "value"]);

package/components/actions/toggle/component/{component.d.ts → .partials/components/component.d.ts}

@@ -1,3 +1,3 @@
 import React, { ElementType } from 'react';
 import { ToggleProps } from './component.props';
-export declare function Toggle<C extends ElementType = 'div'>({ as, value, onChange, className, onClickCapture, ref, ...rest }: ToggleProps<C>): React.JSX.Element;
+export declare function Toggle<C extends ElementType = 'div'>({ as, value, onChange, orientation, className, onClickCapture, ref, ...rest }: ToggleProps<C>): React.JSX.Element;

package/components/actions/toggle/component/{component.js → .partials/components/component.js}

@@ -22,10 +22,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import classNames from 'classnames';
 import React, { useCallback, useEffect, useRef } from 'react';
-import styles from './component.module.css';
-import { ToggleProvider } from './providers/provider';
+import { ToggleProvider } from '../providers/provider';
+import styles from '../styles/component.module.css';
+import { scrollToggleOptionIntoView } from '../utilities/scroll-toggle-option-into-view';
 export function Toggle(_a) {
-    var as = _a.as, value = _a.value, onChange = _a.onChange, className = _a.className, onClickCapture = _a.onClickCapture, ref = _a.ref, rest = __rest(_a, ["as", "value", "onChange", "className", "onClickCapture", "ref"]);
+    var as = _a.as, value = _a.value, onChange = _a.onChange, _b = _a.orientation, orientation = _b === void 0 ? 'horizontal' : _b, className = _a.className, onClickCapture = _a.onClickCapture, ref = _a.ref, rest = __rest(_a, ["as", "value", "onChange", "orientation", "className", "onClickCapture", "ref"]);
     var Component = (as || 'div');
     var containerRef = useRef(null);
     var resizeObserverRef = useRef(null);
@@ -41,7 +42,12 @@ export function Toggle(_a) {
             return;
         }
         var containerEl = containerRef.current;
-        if (containerEl.scrollWidth <= containerEl.clientWidth) {
+        var overflowsHorizontally = containerEl.scrollWidth > containerEl.clientWidth;
+        var overflowsVertically = containerEl.scrollHeight > containerEl.clientHeight;
+        var overflows = orientation === 'vertical'
+            ? overflowsVertically
+            : overflowsHorizontally;
+        if (!overflows) {
             return;
         }
         var optionEl = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, '.mosuk-toggle-button');
@@ -49,15 +55,9 @@ export function Toggle(_a) {
             return;
         }
         requestAnimationFrame(function () {
-            var _a, _b;
-            var prefersReducedMotion = (_b = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(prefers-reduced-motion: reduce)')) === null || _b === void 0 ? void 0 : _b.matches;
-            optionEl.scrollIntoView({
-                behavior: prefersReducedMotion ? 'auto' : 'smooth',
-                block: 'nearest',
-                inline: 'nearest',
-            });
+            scrollToggleOptionIntoView(containerEl, optionEl, orientation, 'smooth');
         });
-    }, [onClickCapture]);
+    }, [onClickCapture, orientation]);
     var setRef = useCallback(function (node) {
         containerRef.current = node;
         if (typeof ref === 'function') {
@@ -84,6 +84,6 @@ export function Toggle(_a) {
             el.style.setProperty('--toggle-padding', getComputedStyle(el).paddingTop);
         }
     }, [className]);
-    return (React.createElement(ToggleProvider, { value: value, onChange: onChange, containerRef: containerRef },
-        React.createElement(Component, __assign({}, rest, { ref: setRef, onClickCapture: handleClickCapture, className: classNames('mosuk-toggle', styles.toggle, className) }), rest === null || rest === void 0 ? void 0 : rest.children)));
+    return (React.createElement(ToggleProvider, { value: value, onChange: onChange, containerRef: containerRef, orientation: orientation },
+        React.createElement(Component, __assign({}, rest, { ref: setRef, "data-orientation": orientation, onClickCapture: handleClickCapture, className: classNames('mosuk-toggle', styles.toggle, className) }), rest === null || rest === void 0 ? void 0 : rest.children)));
 }

package/components/actions/toggle/component/{component.props.d.ts → .partials/components/component.props.d.ts}

@@ -1,7 +1,9 @@
 import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+import type { ToggleOrientation } from '../providers/context/context.interface';
 export type ToggleProps<C extends ElementType = 'div'> = {
     as?: C;
     ref?: Ref<any>;
     value?: any | null;
     onChange?: (value: any) => void;
-} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref' | 'value' | 'onChange'>;
+    orientation?: ToggleOrientation;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref' | 'value' | 'onChange' | 'orientation'>;

package/components/actions/toggle/component/{indicator → .partials/components/indicator}/component.js

@@ -22,28 +22,38 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import classNames from 'classnames';
 import React, { useEffect, useState } from 'react';
-import styles from '../component.module.css';
-import { useToggle } from '../hooks/hook';
+import { useToggle } from '../../hooks/hook';
+import styles from '../../styles/component.module.css';
 export function ToggleIndicator(_a) {
     var _b;
     var as = _a.as, rest = __rest(_a, ["as"]);
     var Component = (as || 'div');
-    var _c = useToggle(), value = _c.value, containerRef = _c.containerRef, optionRefs = _c.optionRefs;
-    var _d = useState(null), style = _d[0], setStyle = _d[1];
+    var _c = useToggle(), value = _c.value, containerRef = _c.containerRef, optionRefs = _c.optionRefs, orientation = _c.orientation;
+    var _d = useState(null), layout = _d[0], setLayout = _d[1];
     useEffect(function () {
-        if (!value) {
+        if (value === null || value === undefined) {
+            setLayout(null);
             return;
         }
         var updatePosition = function () {
             var el = optionRefs.current.get(value);
-            if (el) {
-                setStyle({
-                    left: el.offsetLeft,
-                    width: el.offsetWidth,
+            if (!el) {
+                setLayout(null);
+                return;
+            }
+            if (orientation === 'vertical') {
+                setLayout({
+                    orientation: 'vertical',
+                    top: el.offsetTop,
+                    height: el.offsetHeight,
                 });
             }
             else {
-                setStyle(null);
+                setLayout({
+                    orientation: 'horizontal',
+                    left: el.offsetLeft,
+                    width: el.offsetWidth,
+                });
             }
         };
         updatePosition();
@@ -71,11 +81,19 @@ export function ToggleIndicator(_a) {
             resizeObserver.disconnect();
             mutationObserver === null || mutationObserver === void 0 ? void 0 : mutationObserver.disconnect();
         };
-    }, [value, containerRef, optionRefs]);
-    return (React.createElement(Component, __assign({}, rest, { style: __assign(__assign({}, rest === null || rest === void 0 ? void 0 : rest.style), (style && {
-            '--toggle-indicator-width': "".concat(style.width, "px"),
-            '--toggle-indicator-translate-x': "".concat(style.left, "px"),
-        })), className: classNames('mosuk-toggle-indicator', styles.indicator, (_b = {},
-            _b[styles.hidden] = !value,
+    }, [value, containerRef, optionRefs, orientation]);
+    var inlineStyle = (layout === null || layout === void 0 ? void 0 : layout.orientation) === 'vertical'
+        ? {
+            '--toggle-indicator-height': "".concat(layout.height, "px"),
+            '--toggle-indicator-translate-y': "".concat(layout.top, "px"),
+        }
+        : (layout === null || layout === void 0 ? void 0 : layout.orientation) === 'horizontal'
+            ? {
+                '--toggle-indicator-width': "".concat(layout.width, "px"),
+                '--toggle-indicator-translate-x': "".concat(layout.left, "px"),
+            }
+            : undefined;
+    return (React.createElement(Component, __assign({}, rest, { style: __assign(__assign({}, rest === null || rest === void 0 ? void 0 : rest.style), inlineStyle), className: classNames('mosuk-toggle-indicator', styles.indicator, (_b = {},
+            _b[styles.hidden] = value === null || value === undefined,
             _b), rest === null || rest === void 0 ? void 0 : rest.className) })));
 }

package/components/actions/toggle/component/.partials/providers/context/context.interface.d.ts

@@ -0,0 +1,10 @@
+import type { RefObject } from 'react';
+export type ToggleOrientation = 'horizontal' | 'vertical';
+export interface ToggleContextProps {
+    value: any | null;
+    onChange: (value: any) => void;
+    containerRef: RefObject<HTMLElement | null>;
+    optionRefs: RefObject<Map<any, HTMLElement>>;
+    registerOption: (value: any, el: HTMLElement | null) => void;
+    orientation: ToggleOrientation;
+}

package/components/actions/toggle/component/{providers → .partials/providers}/provider.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { ToggleProviderProps } from './provider.interface';
-export declare function ToggleProvider({ value: controlledValue, onChange: controlledOnChange, containerRef, children, }: ToggleProviderProps): React.JSX.Element;
+export declare function ToggleProvider({ value: controlledValue, onChange: controlledOnChange, containerRef, orientation, children, }: ToggleProviderProps): React.JSX.Element;

package/components/actions/toggle/component/{providers → .partials/providers}/provider.interface.d.ts

@@ -1,7 +1,9 @@
 import { ReactNode, RefObject } from 'react';
+import type { ToggleOrientation } from './context/context.interface';
 export interface ToggleProviderProps {
     value?: any | null;
     onChange?: (value: any) => void;
     containerRef?: RefObject<HTMLElement | null>;
+    orientation?: ToggleOrientation;
     children?: ReactNode;
 }

package/components/actions/toggle/component/.partials/providers/provider.js

@@ -0,0 +1,92 @@
+'use client';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { scrollToggleOptionIntoView } from '../utilities/scroll-toggle-option-into-view';
+import { ToggleContext } from './context/context';
+export function ToggleProvider(_a) {
+    var controlledValue = _a.value, controlledOnChange = _a.onChange, containerRef = _a.containerRef, _b = _a.orientation, orientation = _b === void 0 ? 'horizontal' : _b, children = _a.children;
+    var _c = useState(null), uncontrolledValue = _c[0], setUncontrolledValue = _c[1];
+    var optionRefs = useRef(new Map());
+    var fallbackContainerRef = useRef(null);
+    var value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+    var valueRef = useRef(value);
+    var orientationRef = useRef(orientation);
+    valueRef.current = value;
+    orientationRef.current = orientation;
+    var onChange = useCallback(function (nextValue) {
+        if (controlledOnChange) {
+            controlledOnChange(nextValue);
+        }
+        else {
+            setUncontrolledValue(nextValue);
+        }
+    }, [controlledOnChange]);
+    var registerOption = useCallback(function (val, el) {
+        if (el) {
+            optionRefs.current.set(val, el);
+        }
+        else {
+            optionRefs.current.delete(val);
+        }
+    }, []);
+    var contextValue = useMemo(function () { return ({
+        value: value,
+        onChange: onChange,
+        containerRef: containerRef !== null && containerRef !== void 0 ? containerRef : fallbackContainerRef,
+        optionRefs: optionRefs,
+        registerOption: registerOption,
+        orientation: orientation,
+    }); }, [value, onChange, containerRef, orientation]);
+    var rootRef = containerRef !== null && containerRef !== void 0 ? containerRef : fallbackContainerRef;
+    useLayoutEffect(function () {
+        if (value === null || value === undefined) {
+            return;
+        }
+        var cancelled = false;
+        var attempt = function (n) {
+            if (cancelled) {
+                return;
+            }
+            var container = rootRef.current;
+            var el = optionRefs.current.get(value);
+            if (!container || !el) {
+                if (n < 12) {
+                    requestAnimationFrame(function () { return attempt(n + 1); });
+                }
+                return;
+            }
+            scrollToggleOptionIntoView(container, el, orientation, 'smooth');
+        };
+        attempt(0);
+        return function () {
+            cancelled = true;
+        };
+    }, [value, orientation, rootRef]);
+    useEffect(function () {
+        var container = rootRef.current;
+        if (!container) {
+            return;
+        }
+        var runPassiveScroll = function () {
+            var v = valueRef.current;
+            if (v === null || v === undefined) {
+                return;
+            }
+            var el = optionRefs.current.get(v);
+            if (!el) {
+                return;
+            }
+            requestAnimationFrame(function () {
+                scrollToggleOptionIntoView(container, el, orientationRef.current, 'auto');
+            });
+        };
+        var resizeObserver = new ResizeObserver(runPassiveScroll);
+        resizeObserver.observe(container);
+        var mutationObserver = new MutationObserver(runPassiveScroll);
+        mutationObserver.observe(container, { childList: true, subtree: true });
+        return function () {
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+        };
+    }, [rootRef]);
+    return (React.createElement(ToggleContext.Provider, { value: contextValue }, children));
+}