@choice-ui/react 1.5.4 → 1.5.5

package/dist/components/slot/dist/index.js

@@ -1,22 +1,14 @@
-import React, { forwardRef, useMemo } from "react";
+import React__default, { forwardRef, useMemo } from "react";
 import { jsx, Fragment } from "react/jsx-runtime";
-var REACT_MAJOR = parseInt(React.version.split(".")[0], 10);
-var IS_REACT_19 = REACT_MAJOR >= 19;
-function getChildRef(children) {
-  if (IS_REACT_19) {
-    return children.props.ref;
-  }
-  return void 0;
-}
 var Slot = forwardRef(
   ({ children, ...slotProps }, forwardedRef) => {
     const slottedChild = useMemo(() => {
-      if (!React.isValidElement(children)) {
+      if (!React__default.isValidElement(children)) {
         return children;
       }
-      const childRef = getChildRef(children);
+      const childRef = children.ref;
       const mergedProps = mergeProps(slotProps, children.props);
-      return React.cloneElement(children, {
+      return React__default.cloneElement(children, {
         ...mergedProps,
         ref: forwardedRef ? composeRefs(forwardedRef, childRef) : childRef
       });
@@ -28,12 +20,12 @@ Slot.displayName = "Slot";
 var SlotClone = forwardRef(
   ({ children, ...slotProps }, forwardedRef) => {
     const slottedChild = useMemo(() => {
-      if (!React.isValidElement(children)) {
+      if (!React__default.isValidElement(children)) {
         return children;
       }
-      const childRef = getChildRef(children);
+      const childRef = children.ref;
       const mergedProps = mergeProps(slotProps, children.props);
-      return React.cloneElement(children, {
+      return React__default.cloneElement(children, {
         ...mergedProps,
         ref: forwardedRef ? composeRefs(forwardedRef, childRef) : childRef
       });

package/dist/components/slot/src/slot.d.ts

@@ -6,28 +6,28 @@ interface SlotCloneProps {
     children: React.ReactNode;
 }
 /**
- * Optimized Slot component implementation
+ * 优化的 Slot 组件实现
  *
- * Compared to performance optimization of @radix-ui/react-slot:
- * 1. Use useMemo to cache children processing results
- * 2. Simplify props merging logic
- * 3. Avoid unnecessary deep traversal
- * 4. Better type safety
+ * 相比 @radix-ui/react-slot 的性能优化：
+ * 1. 使用 useMemo 缓存 children 处理结果
+ * 2. 简化 props 合并逻辑
+ * 3. 避免不必要的深度遍历
+ * 4. 更好的类型安全
  */
 export declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
 /**
- * SlotClone component - used for deep cloning
- * When nested structures need to be processed
+ * SlotClone 组件 - 用于深度克隆
+ * 当需要处理嵌套结构时使用
  */
 export declare const SlotClone: React.ForwardRefExoticComponent<SlotCloneProps & React.RefAttributes<HTMLElement>>;
 /**
- * Hook version of Slot logic
- * Used for scenarios that require more granular control
+ * Hook 版本的 Slot 逻辑
+ * 用于需要更细粒度控制的场景
  */
 export declare function useSlot(children: React.ReactNode, slotProps: Record<string, unknown>, forwardedRef?: React.Ref<unknown>): string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined;
 /**
- * Performance optimized asChild mode Hook
- * Used to replace `const Component = asChild ? Slot : "button"` mode
+ * 性能优化的 asChild 模式 Hook
+ * 用于替代 `const Component = asChild ? Slot : "button"` 模式
  */
 export declare function useAsChild<T extends React.ElementType = "button">(asChild: boolean | undefined, defaultElement: T): T | typeof Slot;
 export {};

package/dist/components/slot/src/slot.js

@@ -1,22 +1,14 @@
 import { jsx, Fragment } from "react/jsx-runtime";
-import React, { forwardRef, useMemo } from "react";
-const REACT_MAJOR = parseInt(React.version.split(".")[0], 10);
-const IS_REACT_19 = REACT_MAJOR >= 19;
-function getChildRef(children) {
-  if (IS_REACT_19) {
-    return children.props.ref;
-  }
-  return void 0;
-}
+import React__default, { forwardRef, useMemo } from "react";
 const Slot = forwardRef(
   ({ children, ...slotProps }, forwardedRef) => {
     const slottedChild = useMemo(() => {
-      if (!React.isValidElement(children)) {
+      if (!React__default.isValidElement(children)) {
         return children;
       }
-      const childRef = getChildRef(children);
+      const childRef = children.ref;
       const mergedProps = mergeProps(slotProps, children.props);
-      return React.cloneElement(children, {
+      return React__default.cloneElement(children, {
         ...mergedProps,
         ref: forwardedRef ? composeRefs(forwardedRef, childRef) : childRef
       });
@@ -28,12 +20,12 @@ Slot.displayName = "Slot";
 const SlotClone = forwardRef(
   ({ children, ...slotProps }, forwardedRef) => {
     const slottedChild = useMemo(() => {
-      if (!React.isValidElement(children)) {
+      if (!React__default.isValidElement(children)) {
         return children;
       }
-      const childRef = getChildRef(children);
+      const childRef = children.ref;
       const mergedProps = mergeProps(slotProps, children.props);
-      return React.cloneElement(children, {
+      return React__default.cloneElement(children, {
         ...mergedProps,
         ref: forwardedRef ? composeRefs(forwardedRef, childRef) : childRef
       });
@@ -86,12 +78,12 @@ function composeRefs(...refs) {
 }
 function useSlot(children, slotProps, forwardedRef) {
   return useMemo(() => {
-    if (!React.isValidElement(children)) {
+    if (!React__default.isValidElement(children)) {
       return children;
     }
-    const childRef = getChildRef(children);
+    const childRef = children.ref;
     const mergedProps = mergeProps(slotProps, children.props);
-    return React.cloneElement(children, {
+    return React__default.cloneElement(children, {
       ...mergedProps,
       ref: forwardedRef ? composeRefs(forwardedRef, childRef) : childRef
     });

package/dist/components/textarea/dist/index.js

@@ -1,5 +1,5 @@
 import { ScrollArea } from "../../scroll-area/dist/index.js";
-import React, { forwardRef, useRef, useState, useImperativeHandle, useMemo, useEffect, Children, isValidElement, memo } from "react";
+import React__default, { forwardRef, useRef, useState, useImperativeHandle, useMemo, useEffect, Children, isValidElement, memo } from "react";
 import { useUnmount, useEventCallback, useIsomorphicLayoutEffect } from "usehooks-ts";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { mergeRefs } from "../../../shared/utils/merge-refs/merge-refs.js";
@@ -217,12 +217,12 @@ var getSizingData = (node) => {
 };
 var get_sizing_data_default = getSizingData;
 function useLatest(value) {
-  const ref = React.useRef(value);
+  const ref = React__default.useRef(value);
   ref.current = value;
   return ref;
 }
 function useComposedRef(libRef, userRef) {
-  return React.useCallback(
+  return React__default.useCallback(
     (node) => {
       libRef.current = node;
       if (typeof userRef === "function") {
@@ -256,7 +256,7 @@ function useListener(target, type, listener) {
   }, [target, type, latestListener]);
 }
 var useFormResetListener = (libRef, listener) => {
-  const stableListener = React.useCallback(
+  const stableListener = React__default.useCallback(
     (ev) => {
       var _a;
       if (((_a = libRef.current) == null ? void 0 : _a.form) === ev.target) {
@@ -271,7 +271,7 @@ var useWindowResizeListener = (listener) => {
   useListener(isBrowser ? window : null, "resize", listener);
 };
 var useFontsLoadedListener = (listener) => {
-  const safeListener = React.useCallback(
+  const safeListener = React__default.useCallback(
     (event) => {
       try {
         listener(event);
@@ -334,14 +334,14 @@ var TextareaAutosize = forwardRef(
     ...props
   }, userRef) {
     const isControlled = props.value !== void 0;
-    const libRef = React.useRef(null);
+    const libRef = React__default.useRef(null);
     const ref = useComposedRef(libRef, userRef);
-    const heightRef = React.useRef(0);
-    const measurementsCacheRef = React.useRef();
-    const lastValueRef = React.useRef("");
+    const heightRef = React__default.useRef(0);
+    const measurementsCacheRef = React__default.useRef();
+    const lastValueRef = React__default.useRef("");
     const normalizedMinRows = Math.max(minRows, 1);
     const normalizedMaxRows = maxRows && maxRows >= normalizedMinRows ? maxRows : void 0;
-    const resizeTextarea = React.useCallback(() => {
+    const resizeTextarea = React__default.useCallback(() => {
       const node = libRef.current;
       if (!node || !isBrowser) return;
       const currentValue = node.value || node.placeholder || "";
@@ -388,7 +388,7 @@ var TextareaAutosize = forwardRef(
       }
     }, [cacheMeasurements, normalizedMinRows, normalizedMaxRows, onHeightChange]);
     const debouncedResize = useDebounce(resizeTextarea, debounceMs);
-    const handleChange = React.useCallback(
+    const handleChange = React__default.useCallback(
       (event) => {
         if (!isControlled) {
           if (debounceMs > 0) {
@@ -401,7 +401,7 @@ var TextareaAutosize = forwardRef(
       },
       [isControlled, debounceMs, debouncedResize, resizeTextarea, onChange]
     );
-    const formResetCallback = React.useCallback(() => {
+    const formResetCallback = React__default.useCallback(() => {
       var _a;
       if (!isControlled) {
         const currentValue = ((_a = libRef.current) == null ? void 0 : _a.value) || "";
@@ -417,7 +417,7 @@ var TextareaAutosize = forwardRef(
     useFormResetListener(libRef, formResetCallback);
     useWindowResizeListener(resizeTextarea);
     useFontsLoadedListener(resizeTextarea);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
       const node = libRef.current;
       if (!node || !isBrowser || typeof IntersectionObserver === "undefined") {
         return;
@@ -439,7 +439,7 @@ var TextareaAutosize = forwardRef(
         observer.disconnect();
       };
     }, [resizeTextarea]);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
       resizeTextarea();
     }, [style == null ? void 0 : style.lineHeight, style == null ? void 0 : style.padding, resizeTextarea]);
     const mergedStyle = useMemo(() => {

package/dist/components/textarea/src/components/autosize/hooks.js

@@ -1,13 +1,13 @@
-import React from "react";
+import React__default from "react";
 import { isBrowser } from "./utils.js";
 import { useIsomorphicLayoutEffect } from "usehooks-ts";
 function useLatest(value) {
-  const ref = React.useRef(value);
+  const ref = React__default.useRef(value);
   ref.current = value;
   return ref;
 }
 function useComposedRef(libRef, userRef) {
-  return React.useCallback(
+  return React__default.useCallback(
     (node) => {
       libRef.current = node;
       if (typeof userRef === "function") {
@@ -41,7 +41,7 @@ function useListener(target, type, listener) {
   }, [target, type, latestListener]);
 }
 const useFormResetListener = (libRef, listener) => {
-  const stableListener = React.useCallback(
+  const stableListener = React__default.useCallback(
     (ev) => {
       var _a;
       if (((_a = libRef.current) == null ? void 0 : _a.form) === ev.target) {
@@ -56,7 +56,7 @@ const useWindowResizeListener = (listener) => {
   useListener(isBrowser ? window : null, "resize", listener);
 };
 const useFontsLoadedListener = (listener) => {
-  const safeListener = React.useCallback(
+  const safeListener = React__default.useCallback(
     (event) => {
       try {
         listener(event);

package/dist/components/textarea/src/components/autosize/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import React, { forwardRef, useMemo, useRef } from "react";
+import React__default, { forwardRef, useMemo, useRef } from "react";
 import { isBrowser, noop } from "./utils.js";
 import calculateNodeHeight from "./calculate-node-height.js";
 import getSizingData from "./get-sizing-data.js";
@@ -53,14 +53,14 @@ const TextareaAutosize = forwardRef(
     ...props
   }, userRef) {
     const isControlled = props.value !== void 0;
-    const libRef = React.useRef(null);
+    const libRef = React__default.useRef(null);
     const ref = useComposedRef(libRef, userRef);
-    const heightRef = React.useRef(0);
-    const measurementsCacheRef = React.useRef();
-    const lastValueRef = React.useRef("");
+    const heightRef = React__default.useRef(0);
+    const measurementsCacheRef = React__default.useRef();
+    const lastValueRef = React__default.useRef("");
     const normalizedMinRows = Math.max(minRows, 1);
     const normalizedMaxRows = maxRows && maxRows >= normalizedMinRows ? maxRows : void 0;
-    const resizeTextarea = React.useCallback(() => {
+    const resizeTextarea = React__default.useCallback(() => {
       const node = libRef.current;
       if (!node || !isBrowser) return;
       const currentValue = node.value || node.placeholder || "";
@@ -107,7 +107,7 @@ const TextareaAutosize = forwardRef(
       }
     }, [cacheMeasurements, normalizedMinRows, normalizedMaxRows, onHeightChange]);
     const debouncedResize = useDebounce(resizeTextarea, debounceMs);
-    const handleChange = React.useCallback(
+    const handleChange = React__default.useCallback(
       (event) => {
         if (!isControlled) {
           if (debounceMs > 0) {
@@ -120,7 +120,7 @@ const TextareaAutosize = forwardRef(
       },
       [isControlled, debounceMs, debouncedResize, resizeTextarea, onChange]
     );
-    const formResetCallback = React.useCallback(() => {
+    const formResetCallback = React__default.useCallback(() => {
       var _a;
       if (!isControlled) {
         const currentValue = ((_a = libRef.current) == null ? void 0 : _a.value) || "";
@@ -136,7 +136,7 @@ const TextareaAutosize = forwardRef(
     useFormResetListener(libRef, formResetCallback);
     useWindowResizeListener(resizeTextarea);
     useFontsLoadedListener(resizeTextarea);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
       const node = libRef.current;
       if (!node || !isBrowser || typeof IntersectionObserver === "undefined") {
         return;
@@ -158,7 +158,7 @@ const TextareaAutosize = forwardRef(
         observer.disconnect();
       };
     }, [resizeTextarea]);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
       resizeTextarea();
     }, [style == null ? void 0 : style.lineHeight, style == null ? void 0 : style.padding, resizeTextarea]);
     const mergedStyle = useMemo(() => {

package/dist/components/tree-list/src/tree-list.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { ScrollArea } from "../../scroll-area/dist/index.js";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import React, { useState, useRef, useCallback, useEffect, useImperativeHandle, useMemo, createContext } from "react";
+import React__default, { useState, useRef, useCallback, useEffect, useImperativeHandle, useMemo, createContext } from "react";
 import { flattenTree, findNodePathById } from "./utils/tree.js";
 import { useSelection } from "./hooks/use-selection.js";
 import { useRenaming } from "./hooks/use-renaming.js";
@@ -11,14 +11,14 @@ import { TreeNodeWrapper } from "./components/tree-node-wrapper.js";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
 const TreeContext = createContext(null);
 const useTreeContext = () => {
-  const context = React.useContext(TreeContext);
+  const context = React__default.useContext(TreeContext);
   if (!context) {
     throw new Error("useTreeContext must be used within a TreeList");
   }
   return context;
 };
 const DEFAULT_NODE_HEIGHT = 32;
-const TreeList = React.forwardRef((props, ref) => {
+const TreeList = React__default.forwardRef((props, ref) => {
   const {
     data,
     selectedNodeIds,

package/dist/components/virtualized-grid/src/error-boundary.js

@@ -3,8 +3,8 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "../../button/dist/index.js";
-import React from "react";
-class VirtualizedGridErrorBoundary extends React.Component {
+import React__default from "react";
+class VirtualizedGridErrorBoundary extends React__default.Component {
   constructor(props) {
     super(props);
     __publicField(this, "retry", () => {

package/dist/index.js

@@ -174,6 +174,7 @@ import { NumericInput } from "./components/numeric-input/src/numeric-input.js";
 import { NumericInputElement } from "./components/numeric-input/src/components/numeric-input-element.js";
 import { NumericInputMenuTrigger } from "./components/numeric-input/src/components/numeric-input-menu-trigger.js";
 import { NumericInputVariable } from "./components/numeric-input/src/components/numeric-input-variable.js";
+import { OtpInput } from "./components/otp-input/src/otp-input.js";
 import { Pagination } from "./components/pagination/src/pagination.js";
 import { Panel, PanelBase } from "./components/panel/src/panel.js";
 import { PanelRow } from "./components/panel/src/components/panel-row.js";
@@ -379,6 +380,7 @@ export {
   NumericInputMenuTrigger,
   NumericInputVariable,
   OPERATOR_CONFIGS,
+  OtpInput,
   PRESET_EASINGS,
   PREVIEW_KEYFRAMES,
   Pagination,

package/dist/node_modules/.pnpm/input-otp@1.4.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/input-otp/dist/index.js

@@ -0,0 +1,200 @@
+import * as React from "react";
+var Bt = Object.defineProperty, At = Object.defineProperties;
+var kt = Object.getOwnPropertyDescriptors;
+var Y = Object.getOwnPropertySymbols;
+var gt = Object.prototype.hasOwnProperty, Et = Object.prototype.propertyIsEnumerable;
+var vt = (r, s, e) => s in r ? Bt(r, s, { enumerable: true, configurable: true, writable: true, value: e }) : r[s] = e, St = (r, s) => {
+  for (var e in s || (s = {})) gt.call(s, e) && vt(r, e, s[e]);
+  if (Y) for (var e of Y(s)) Et.call(s, e) && vt(r, e, s[e]);
+  return r;
+}, bt = (r, s) => At(r, kt(s));
+var Pt = (r, s) => {
+  var e = {};
+  for (var u in r) gt.call(r, u) && s.indexOf(u) < 0 && (e[u] = r[u]);
+  if (r != null && Y) for (var u of Y(r)) s.indexOf(u) < 0 && Et.call(r, u) && (e[u] = r[u]);
+  return e;
+};
+function ht(r) {
+  let s = setTimeout(r, 0), e = setTimeout(r, 10), u = setTimeout(r, 50);
+  return [s, e, u];
+}
+function _t(r) {
+  let s = React.useRef();
+  return React.useEffect(() => {
+    s.current = r;
+  }), s.current;
+}
+var Ot = 18, wt = 40, Gt = `${wt}px`, xt = ["[data-lastpass-icon-root]", "com-1password-button", "[data-dashlanecreated]", '[style$="2147483647 !important;"]'].join(",");
+function Tt({ containerRef: r, inputRef: s, pushPasswordManagerStrategy: e, isFocused: u }) {
+  let [P, D] = React.useState(false), [G, H] = React.useState(false), [F, W] = React.useState(false), Z = React.useMemo(() => e === "none" ? false : (e === "increase-width" || e === "experimental-no-flickering") && P && G, [P, G, e]), T = React.useCallback(() => {
+    let f = r.current, h = s.current;
+    if (!f || !h || F || e === "none") return;
+    let a = f, B = a.getBoundingClientRect().left + a.offsetWidth, A = a.getBoundingClientRect().top + a.offsetHeight / 2, z = B - Ot, q = A;
+    document.querySelectorAll(xt).length === 0 && document.elementFromPoint(z, q) === f || (D(true), W(true));
+  }, [r, s, F, e]);
+  return React.useEffect(() => {
+    let f = r.current;
+    if (!f || e === "none") return;
+    function h() {
+      let A = window.innerWidth - f.getBoundingClientRect().right;
+      H(A >= wt);
+    }
+    h();
+    let a = setInterval(h, 1e3);
+    return () => {
+      clearInterval(a);
+    };
+  }, [r, e]), React.useEffect(() => {
+    let f = u || document.activeElement === s.current;
+    if (e === "none" || !f) return;
+    let h = setTimeout(T, 0), a = setTimeout(T, 2e3), B = setTimeout(T, 5e3), A = setTimeout(() => {
+      W(true);
+    }, 6e3);
+    return () => {
+      clearTimeout(h), clearTimeout(a), clearTimeout(B), clearTimeout(A);
+    };
+  }, [s, u, e, T]), { hasPWMBadge: P, willPushPWMBadge: Z, PWM_BADGE_SPACE_WIDTH: Gt };
+}
+var jt = React.createContext({}), Lt = React.forwardRef((A, B) => {
+  var z = A, { value: r, onChange: s, maxLength: e, textAlign: u = "left", pattern: P, placeholder: D, inputMode: G = "numeric", onComplete: H, pushPasswordManagerStrategy: F = "increase-width", pasteTransformer: W, containerClassName: Z, noScriptCSSFallback: T = Nt, render: f, children: h } = z, a = Pt(z, ["value", "onChange", "maxLength", "textAlign", "pattern", "placeholder", "inputMode", "onComplete", "pushPasswordManagerStrategy", "pasteTransformer", "containerClassName", "noScriptCSSFallback", "render", "children"]);
+  var X, lt, ut, dt, ft;
+  let [q, nt] = React.useState(typeof a.defaultValue == "string" ? a.defaultValue : ""), i = r != null ? r : q, I = _t(i), x = React.useCallback((t) => {
+    s == null || s(t), nt(t);
+  }, [s]), m = React.useMemo(() => P ? typeof P == "string" ? new RegExp(P) : P : null, [P]), l = React.useRef(null), K = React.useRef(null), J = React.useRef({ value: i, onChange: x, isIOS: typeof window != "undefined" && ((lt = (X = window == null ? void 0 : window.CSS) == null ? void 0 : X.supports) == null ? void 0 : lt.call(X, "-webkit-touch-callout", "none")) }), V = React.useRef({ prev: [(ut = l.current) == null ? void 0 : ut.selectionStart, (dt = l.current) == null ? void 0 : dt.selectionEnd, (ft = l.current) == null ? void 0 : ft.selectionDirection] });
+  React.useImperativeHandle(B, () => l.current, []), React.useEffect(() => {
+    let t = l.current, o = K.current;
+    if (!t || !o) return;
+    J.current.value !== t.value && J.current.onChange(t.value), V.current.prev = [t.selectionStart, t.selectionEnd, t.selectionDirection];
+    function d() {
+      if (document.activeElement !== t) {
+        L(null), N(null);
+        return;
+      }
+      let c = t.selectionStart, b = t.selectionEnd, mt = t.selectionDirection, v = t.maxLength, C = t.value, _ = V.current.prev, g = -1, E = -1, w;
+      if (C.length !== 0 && c !== null && b !== null) {
+        let Dt = c === b, Ht = c === C.length && C.length < v;
+        if (Dt && !Ht) {
+          let y = c;
+          if (y === 0) g = 0, E = 1, w = "forward";
+          else if (y === v) g = y - 1, E = y, w = "backward";
+          else if (v > 1 && C.length > 1) {
+            let et = 0;
+            if (_[0] !== null && _[1] !== null) {
+              w = y < _[1] ? "backward" : "forward";
+              let Wt = _[0] === _[1] && _[0] < v;
+              w === "backward" && !Wt && (et = -1);
+            }
+            g = et + y, E = et + y + 1;
+          }
+        }
+        g !== -1 && E !== -1 && g !== E && l.current.setSelectionRange(g, E, w);
+      }
+      let pt = g !== -1 ? g : c, Rt = E !== -1 ? E : b, yt = w != null ? w : mt;
+      L(pt), N(Rt), V.current.prev = [pt, Rt, yt];
+    }
+    if (document.addEventListener("selectionchange", d, { capture: true }), d(), document.activeElement === t && Q(true), !document.getElementById("input-otp-style")) {
+      let c = document.createElement("style");
+      if (c.id = "input-otp-style", document.head.appendChild(c), c.sheet) {
+        let b = "background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;";
+        $(c.sheet, "[data-input-otp]::selection { background: transparent !important; color: transparent !important; }"), $(c.sheet, `[data-input-otp]:autofill { ${b} }`), $(c.sheet, `[data-input-otp]:-webkit-autofill { ${b} }`), $(c.sheet, "@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }"), $(c.sheet, "[data-input-otp] + * { pointer-events: all !important; }");
+      }
+    }
+    let R = () => {
+      o && o.style.setProperty("--root-height", `${t.clientHeight}px`);
+    };
+    R();
+    let p = new ResizeObserver(R);
+    return p.observe(t), () => {
+      document.removeEventListener("selectionchange", d, { capture: true }), p.disconnect();
+    };
+  }, []);
+  let [ot, rt] = React.useState(false), [j, Q] = React.useState(false), [M, L] = React.useState(null), [k, N] = React.useState(null);
+  React.useEffect(() => {
+    ht(() => {
+      var R, p, c, b;
+      (R = l.current) == null || R.dispatchEvent(new Event("input"));
+      let t = (p = l.current) == null ? void 0 : p.selectionStart, o = (c = l.current) == null ? void 0 : c.selectionEnd, d = (b = l.current) == null ? void 0 : b.selectionDirection;
+      t !== null && o !== null && (L(t), N(o), V.current.prev = [t, o, d]);
+    });
+  }, [i, j]), React.useEffect(() => {
+    I !== void 0 && i !== I && I.length < e && i.length === e && (H == null || H(i));
+  }, [e, H, I, i]);
+  let O = Tt({ containerRef: K, inputRef: l, pushPasswordManagerStrategy: F, isFocused: j }), st = React.useCallback((t) => {
+    let o = t.currentTarget.value.slice(0, e);
+    if (o.length > 0 && m && !m.test(o)) {
+      t.preventDefault();
+      return;
+    }
+    typeof I == "string" && o.length < I.length && document.dispatchEvent(new Event("selectionchange")), x(o);
+  }, [e, x, I, m]), at = React.useCallback(() => {
+    var t;
+    if (l.current) {
+      let o = Math.min(l.current.value.length, e - 1), d = l.current.value.length;
+      (t = l.current) == null || t.setSelectionRange(o, d), L(o), N(d);
+    }
+    Q(true);
+  }, [e]), ct = React.useCallback((t) => {
+    var g, E;
+    let o = l.current;
+    if (!W && (!J.current.isIOS || !t.clipboardData || !o)) return;
+    let d = t.clipboardData.getData("text/plain"), R = W ? W(d) : d;
+    t.preventDefault();
+    let p = (g = l.current) == null ? void 0 : g.selectionStart, c = (E = l.current) == null ? void 0 : E.selectionEnd, v = (p !== c ? i.slice(0, p) + R + i.slice(c) : i.slice(0, p) + R + i.slice(p)).slice(0, e);
+    if (v.length > 0 && m && !m.test(v)) return;
+    o.value = v, x(v);
+    let C = Math.min(v.length, e - 1), _ = v.length;
+    o.setSelectionRange(C, _), L(C), N(_);
+  }, [e, x, m, i]), It = React.useMemo(() => ({ position: "relative", cursor: a.disabled ? "default" : "text", userSelect: "none", WebkitUserSelect: "none", pointerEvents: "none" }), [a.disabled]), it = React.useMemo(() => ({ position: "absolute", inset: 0, width: O.willPushPWMBadge ? `calc(100% + ${O.PWM_BADGE_SPACE_WIDTH})` : "100%", clipPath: O.willPushPWMBadge ? `inset(0 ${O.PWM_BADGE_SPACE_WIDTH} 0 0)` : void 0, height: "100%", display: "flex", textAlign: u, opacity: "1", color: "transparent", pointerEvents: "all", background: "transparent", caretColor: "transparent", border: "0 solid transparent", outline: "0 solid transparent", boxShadow: "none", lineHeight: "1", letterSpacing: "-.5em", fontSize: "var(--root-height)", fontFamily: "monospace", fontVariantNumeric: "tabular-nums" }), [O.PWM_BADGE_SPACE_WIDTH, O.willPushPWMBadge, u]), Mt = React.useMemo(() => React.createElement("input", bt(St({ autoComplete: a.autoComplete || "one-time-code" }, a), { "data-input-otp": true, "data-input-otp-placeholder-shown": i.length === 0 || void 0, "data-input-otp-mss": M, "data-input-otp-mse": k, inputMode: G, pattern: m == null ? void 0 : m.source, "aria-placeholder": D, style: it, maxLength: e, value: i, ref: l, onPaste: (t) => {
+    var o;
+    ct(t), (o = a.onPaste) == null || o.call(a, t);
+  }, onChange: st, onMouseOver: (t) => {
+    var o;
+    rt(true), (o = a.onMouseOver) == null || o.call(a, t);
+  }, onMouseLeave: (t) => {
+    var o;
+    rt(false), (o = a.onMouseLeave) == null || o.call(a, t);
+  }, onFocus: (t) => {
+    var o;
+    at(), (o = a.onFocus) == null || o.call(a, t);
+  }, onBlur: (t) => {
+    var o;
+    Q(false), (o = a.onBlur) == null || o.call(a, t);
+  } })), [st, at, ct, G, it, e, k, M, a, m == null ? void 0 : m.source, i]), tt = React.useMemo(() => ({ slots: Array.from({ length: e }).map((t, o) => {
+    var c;
+    let d = j && M !== null && k !== null && (M === k && o === M || o >= M && o < k), R = i[o] !== void 0 ? i[o] : null, p = i[0] !== void 0 ? null : (c = D == null ? void 0 : D[o]) != null ? c : null;
+    return { char: R, placeholderChar: p, isActive: d, hasFakeCaret: d && R === null };
+  }), isFocused: j, isHovering: !a.disabled && ot }), [j, ot, e, k, M, a.disabled, i]), Ct = React.useMemo(() => f ? f(tt) : React.createElement(jt.Provider, { value: tt }, h), [h, tt, f]);
+  return React.createElement(React.Fragment, null, T !== null && React.createElement("noscript", null, React.createElement("style", null, T)), React.createElement("div", { ref: K, "data-input-otp-container": true, style: It, className: Z }, Ct, React.createElement("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" } }, Mt)));
+});
+Lt.displayName = "Input";
+function $(r, s) {
+  try {
+    r.insertRule(s);
+  } catch (e) {
+    console.error("input-otp could not insert CSS rule:", s);
+  }
+}
+var Nt = `
+[data-input-otp] {
+  --nojs-bg: white !important;
+  --nojs-fg: black !important;
+
+  background-color: var(--nojs-bg) !important;
+  color: var(--nojs-fg) !important;
+  caret-color: var(--nojs-fg) !important;
+  letter-spacing: .25em !important;
+  text-align: center !important;
+  border: 1px solid var(--nojs-fg) !important;
+  border-radius: 4px !important;
+  width: 100% !important;
+}
+@media (prefers-color-scheme: dark) {
+  [data-input-otp] {
+    --nojs-bg: black !important;
+    --nojs-fg: white !important;
+  }
+}`;
+export {
+  Lt as OTPInput,
+  jt as OTPInputContext
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@choice-ui/react",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "description": "A desktop-first React UI component library built for professional desktop applications with comprehensive documentation",
   "sideEffects": false,
   "type": "module",