@mindlogic-ai/logician-ui 4.0.0-alpha.38 → 4.0.0-alpha.40

package/dist/components/PinInput/PinInput.d.ts

@@ -1,6 +1,3 @@
 import { PinInputProps } from './PinInput.types';
-export declare const PinInput: {
-    ({ value, onChange, inputStyle, autoFocus, isNumberOnly, ...rest }: PinInputProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const PinInput: import("react").ForwardRefExoticComponent<PinInputProps & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=PinInput.d.ts.map

package/dist/components/PinInput/PinInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PinInput.d.ts","sourceRoot":"","sources":["../../../src/components/PinInput/PinInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,eAAO,MAAM,QAAQ;wEAOlB,aAAa;;CAkCf,CAAC"}
+{"version":3,"file":"PinInput.d.ts","sourceRoot":"","sources":["../../../src/components/PinInput/PinInput.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,QAAQ,4GAgDpB,CAAC"}

package/dist/components/PinInput/PinInput.js

@@ -3,30 +3,13 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var ReactPinInput = require('react-pin-input');
 var react = require('@chakra-ui/react');
+var formControls = require('../../theme/formControls.js');
 
-// TODO: forwardRef
-const PinInput = ({ value, onChange, inputStyle, autoFocus = true, isNumberOnly = true, ...rest }) => {
-    const pinInputRef = React.useRef(null);
-    const primaryColor = react.useToken('colors', 'primary.main')[0];
-    const grayColor = react.useToken('colors', 'border.default')[0];
-    React.useEffect(() => {
-        // Automatically focus the PinInput component on mount
-        if (autoFocus)
-            pinInputRef.current?.focus();
-    }, []);
-    return (jsxRuntime.jsx(ReactPinInput, { ref: pinInputRef, initialValue: value, onChange: onChange, type: isNumberOnly ? 'numeric' : 'custom', inputMode: isNumberOnly ? 'number' : 'text', inputStyle: {
-            borderColor: grayColor,
-            borderRadius: '8px',
-            width: '48px',
-            height: '48px',
-            ...inputStyle,
-        }, inputFocusStyle: {
-            borderColor: primaryColor,
-            boxShadow: `0 0 0 1px ${primaryColor}`,
-        }, onComplete: onChange, autoSelect: true, regexCriteria: isNumberOnly ? /^[0-9]*$/ : undefined, ...rest }));
-};
+const PinInput = React.forwardRef(function PinInput({ length, value, onChange, onComplete, placeholder = '', inputProps, ...rest }, ref) {
+    const valueArray = Array.from({ length }, (_, i) => value?.[i] ?? '');
+    return (jsxRuntime.jsxs(react.PinInput.Root, { count: length, value: valueArray, onValueChange: (d) => onChange?.(d.valueAsString), onValueComplete: (d) => onComplete?.(d.valueAsString), placeholder: placeholder, ...rest, children: [jsxRuntime.jsx(react.PinInput.HiddenInput, { ref: ref, ...inputProps }), jsxRuntime.jsx(react.PinInput.Control, { children: Array.from({ length }).map((_, i) => (jsxRuntime.jsx(react.PinInput.Input, { index: i, w: 12, h: 12, fontSize: "lg", borderRadius: "md", bg: "bg.surface", color: "fg.default", borderColor: "border.default", _hover: { borderColor: 'primary.lighter' }, _focus: { borderColor: 'primary.main' }, _invalid: { borderColor: 'danger.main' }, _disabled: { borderColor: 'border.subtle', bg: 'bg.subtle' }, css: formControls.noZoomOnFocus }, i))) })] }));
+});
 PinInput.displayName = 'PinInput';
 
 exports.PinInput = PinInput;

package/dist/components/PinInput/PinInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PinInput.js","sources":["../../../src/components/PinInput/PinInput.tsx"],"sourcesContent":[null],"names":["useRef","useToken","useEffect","_jsx"],"mappings":";;;;;;;;AAMA;AACO,MAAM,QAAQ,GAAG,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,UAAU,EACV,SAAS,GAAG,IAAI,EAChB,YAAY,GAAG,IAAI,EACnB,GAAG,IAAI,EACO,KAAI;AAClB,IAAA,MAAM,WAAW,GAAGA,YAAM,CAAgB,IAAI,CAAC;IAC/C,MAAM,YAAY,GAAGC,cAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAC1D,MAAM,SAAS,GAAGA,cAAQ,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAEzDC,eAAS,CAAC,MAAK;;AAEb,QAAA,IAAI,SAAS;AAAE,YAAA,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE;IAC7C,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACEC,cAAA,CAAC,aAAa,IACZ,GAAG,EAAE,WAAW,EAChB,YAAY,EAAE,KAAK,EACnB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,GAAG,SAAS,GAAG,QAAQ,EACzC,SAAS,EAAE,YAAY,GAAG,QAAQ,GAAG,MAAM,EAC3C,UAAU,EAAE;AACV,YAAA,WAAW,EAAE,SAAS;AACtB,YAAA,YAAY,EAAE,KAAK;AACnB,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,GAAG,UAAU;AACd,SAAA,EACD,eAAe,EAAE;AACf,YAAA,WAAW,EAAE,YAAY;YACzB,SAAS,EAAE,CAAA,UAAA,EAAa,YAAY,CAAA,CAAE;SACvC,EACD,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAA,IAAA,EACV,aAAa,EAAE,YAAY,GAAG,UAAU,GAAG,SAAS,EAAA,GAChD,IAAI,EAAA,CACR;AAEN;AAEA,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"PinInput.js","sources":["../../../src/components/PinInput/PinInput.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsxs","ChakraPinInput","_jsx","noZoomOnFocus"],"mappings":";;;;;;;;AASO,MAAM,QAAQ,GAAGA,gBAAU,CAChC,SAAS,QAAQ,CACf,EACE,MAAM,EACN,KAAK,EACL,QAAQ,EACR,UAAU,EACV,WAAW,GAAG,EAAE,EAChB,UAAU,EACV,GAAG,IAAI,EACR,EACD,GAAG,EAAA;IAEH,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AAErE,IAAA,QACEC,eAAA,CAACC,cAAc,CAAC,IAAI,IAClB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,UAAU,EACjB,aAAa,EAAE,CAAC,CAAC,KAAK,QAAQ,GAAG,CAAC,CAAC,aAAa,CAAC,EACjD,eAAe,EAAE,CAAC,CAAC,KAAK,UAAU,GAAG,CAAC,CAAC,aAAa,CAAC,EACrD,WAAW,EAAE,WAAW,EAAA,GACpB,IAAI,aAERC,cAAA,CAACD,cAAc,CAAC,WAAW,IAAC,GAAG,EAAE,GAAG,EAAA,GAAM,UAAU,GAAI,EACxDC,cAAA,CAACD,cAAc,CAAC,OAAO,EAAA,EAAA,QAAA,EACpB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MAC/BC,cAAA,CAACD,cAAc,CAAC,KAAK,EAAA,EAEnB,KAAK,EAAE,CAAC,EACR,CAAC,EAAE,EAAE,EACL,CAAC,EAAE,EAAE,EACL,QAAQ,EAAC,IAAI,EACb,YAAY,EAAC,IAAI,EACjB,EAAE,EAAC,YAAY,EACf,KAAK,EAAC,YAAY,EAClB,WAAW,EAAC,gBAAgB,EAC5B,MAAM,EAAE,EAAE,WAAW,EAAE,iBAAiB,EAAE,EAC1C,MAAM,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,EACvC,QAAQ,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE,EACxC,SAAS,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,EAAE,EAAE,WAAW,EAAE,EAC5D,GAAG,EAAEE,0BAAa,EAAA,EAbb,CAAC,CAcN,CACH,CAAC,EAAA,CACqB,CAAA,EAAA,CACL;AAE1B,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/components/PinInput/PinInput.mjs

@@ -1,30 +1,13 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
-import ReactPinInput from 'react-pin-input';
-import { useToken } from '@chakra-ui/react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { PinInput as PinInput$1 } from '@chakra-ui/react';
+import { noZoomOnFocus } from '../../theme/formControls.mjs';
 
-// TODO: forwardRef
-const PinInput = ({ value, onChange, inputStyle, autoFocus = true, isNumberOnly = true, ...rest }) => {
-    const pinInputRef = useRef(null);
-    const primaryColor = useToken('colors', 'primary.main')[0];
-    const grayColor = useToken('colors', 'border.default')[0];
-    useEffect(() => {
-        // Automatically focus the PinInput component on mount
-        if (autoFocus)
-            pinInputRef.current?.focus();
-    }, []);
-    return (jsx(ReactPinInput, { ref: pinInputRef, initialValue: value, onChange: onChange, type: isNumberOnly ? 'numeric' : 'custom', inputMode: isNumberOnly ? 'number' : 'text', inputStyle: {
-            borderColor: grayColor,
-            borderRadius: '8px',
-            width: '48px',
-            height: '48px',
-            ...inputStyle,
-        }, inputFocusStyle: {
-            borderColor: primaryColor,
-            boxShadow: `0 0 0 1px ${primaryColor}`,
-        }, onComplete: onChange, autoSelect: true, regexCriteria: isNumberOnly ? /^[0-9]*$/ : undefined, ...rest }));
-};
+const PinInput = forwardRef(function PinInput({ length, value, onChange, onComplete, placeholder = '', inputProps, ...rest }, ref) {
+    const valueArray = Array.from({ length }, (_, i) => value?.[i] ?? '');
+    return (jsxs(PinInput$1.Root, { count: length, value: valueArray, onValueChange: (d) => onChange?.(d.valueAsString), onValueComplete: (d) => onComplete?.(d.valueAsString), placeholder: placeholder, ...rest, children: [jsx(PinInput$1.HiddenInput, { ref: ref, ...inputProps }), jsx(PinInput$1.Control, { children: Array.from({ length }).map((_, i) => (jsx(PinInput$1.Input, { index: i, w: 12, h: 12, fontSize: "lg", borderRadius: "md", bg: "bg.surface", color: "fg.default", borderColor: "border.default", _hover: { borderColor: 'primary.lighter' }, _focus: { borderColor: 'primary.main' }, _invalid: { borderColor: 'danger.main' }, _disabled: { borderColor: 'border.subtle', bg: 'bg.subtle' }, css: noZoomOnFocus }, i))) })] }));
+});
 PinInput.displayName = 'PinInput';
 
 export { PinInput };

package/dist/components/PinInput/PinInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PinInput.mjs","sources":["../../../src/components/PinInput/PinInput.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;AAMA;AACO,MAAM,QAAQ,GAAG,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,UAAU,EACV,SAAS,GAAG,IAAI,EAChB,YAAY,GAAG,IAAI,EACnB,GAAG,IAAI,EACO,KAAI;AAClB,IAAA,MAAM,WAAW,GAAG,MAAM,CAAgB,IAAI,CAAC;IAC/C,MAAM,YAAY,GAAG,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAC1D,MAAM,SAAS,GAAG,QAAQ,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAEzD,SAAS,CAAC,MAAK;;AAEb,QAAA,IAAI,SAAS;AAAE,YAAA,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE;IAC7C,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACEA,GAAA,CAAC,aAAa,IACZ,GAAG,EAAE,WAAW,EAChB,YAAY,EAAE,KAAK,EACnB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,GAAG,SAAS,GAAG,QAAQ,EACzC,SAAS,EAAE,YAAY,GAAG,QAAQ,GAAG,MAAM,EAC3C,UAAU,EAAE;AACV,YAAA,WAAW,EAAE,SAAS;AACtB,YAAA,YAAY,EAAE,KAAK;AACnB,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,GAAG,UAAU;AACd,SAAA,EACD,eAAe,EAAE;AACf,YAAA,WAAW,EAAE,YAAY;YACzB,SAAS,EAAE,CAAA,UAAA,EAAa,YAAY,CAAA,CAAE;SACvC,EACD,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAA,IAAA,EACV,aAAa,EAAE,YAAY,GAAG,UAAU,GAAG,SAAS,EAAA,GAChD,IAAI,EAAA,CACR;AAEN;AAEA,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"PinInput.mjs","sources":["../../../src/components/PinInput/PinInput.tsx"],"sourcesContent":[null],"names":["_jsxs","ChakraPinInput","_jsx"],"mappings":";;;;;;AASO,MAAM,QAAQ,GAAG,UAAU,CAChC,SAAS,QAAQ,CACf,EACE,MAAM,EACN,KAAK,EACL,QAAQ,EACR,UAAU,EACV,WAAW,GAAG,EAAE,EAChB,UAAU,EACV,GAAG,IAAI,EACR,EACD,GAAG,EAAA;IAEH,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AAErE,IAAA,QACEA,IAAA,CAACC,UAAc,CAAC,IAAI,IAClB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,UAAU,EACjB,aAAa,EAAE,CAAC,CAAC,KAAK,QAAQ,GAAG,CAAC,CAAC,aAAa,CAAC,EACjD,eAAe,EAAE,CAAC,CAAC,KAAK,UAAU,GAAG,CAAC,CAAC,aAAa,CAAC,EACrD,WAAW,EAAE,WAAW,EAAA,GACpB,IAAI,aAERC,GAAA,CAACD,UAAc,CAAC,WAAW,IAAC,GAAG,EAAE,GAAG,EAAA,GAAM,UAAU,GAAI,EACxDC,GAAA,CAACD,UAAc,CAAC,OAAO,EAAA,EAAA,QAAA,EACpB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MAC/BC,GAAA,CAACD,UAAc,CAAC,KAAK,EAAA,EAEnB,KAAK,EAAE,CAAC,EACR,CAAC,EAAE,EAAE,EACL,CAAC,EAAE,EAAE,EACL,QAAQ,EAAC,IAAI,EACb,YAAY,EAAC,IAAI,EACjB,EAAE,EAAC,YAAY,EACf,KAAK,EAAC,YAAY,EAClB,WAAW,EAAC,gBAAgB,EAC5B,MAAM,EAAE,EAAE,WAAW,EAAE,iBAAiB,EAAE,EAC1C,MAAM,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,EACvC,QAAQ,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE,EACxC,SAAS,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,EAAE,EAAE,WAAW,EAAE,EAC5D,GAAG,EAAE,aAAa,EAAA,EAbb,CAAC,CAcN,CACH,CAAC,EAAA,CACqB,CAAA,EAAA,CACL;AAE1B,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

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

@@ -1,27 +1,10 @@
-interface ReactPinInputProps {
+import type { InputHTMLAttributes } from 'react';
+import type { PinInput as ChakraPinInput } from '@chakra-ui/react';
+export interface PinInputProps extends Omit<ChakraPinInput.RootProps, 'count' | 'value' | 'defaultValue' | 'onValueChange' | 'onValueComplete' | 'onChange' | 'children'> {
     length: number;
-    initialValue?: number | string;
-    type?: 'numeric' | 'custom';
-    inputMode?: string;
-    secret?: boolean;
-    secretDelay?: number;
-    disabled?: boolean;
-    focus?: boolean;
-    onChange?: (value: string, index: number) => void;
-    onComplete?: (value: string, index: number) => void;
-    style?: React.CSSProperties;
-    inputStyle?: React.CSSProperties;
-    inputFocusStyle?: React.CSSProperties;
-    validate?: (value: string) => string;
-    autoSelect?: boolean;
-    regexCriteria?: any;
-    ariaLabel?: string;
-    placeholder?: string;
-}
-export type PinInputProps = ReactPinInputProps & {
     value?: string;
-    autoFocus?: boolean;
-    isNumberOnly?: boolean;
-};
-export {};
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+}
 //# sourceMappingURL=PinInput.types.d.ts.map

package/dist/components/PinInput/PinInput.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PinInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/PinInput/PinInput.types.ts"],"names":[],"mappings":"AACA,UAAU,kBAAkB;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,aAAa,GAAG,kBAAkB,GAAG;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC"}
+{"version":3,"file":"PinInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/PinInput/PinInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEnE,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,cAAc,CAAC,SAAS,EACtB,OAAO,GACP,OAAO,GACP,cAAc,GACd,eAAe,GACf,iBAAiB,GACjB,UAAU,GACV,UAAU,CACb;IACC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;CACpD"}

package/dist/theme/formControls.d.ts

@@ -27,16 +27,14 @@ import type { SystemStyleObject } from '@chakra-ui/react';
  * browser zoom has a ~640px CSS viewport, so a width rule enlarges their form
  * controls and pushes wide tables off-screen, making the low-vision case worse.
  *
- * `Input` and `Textarea` already spread this, so their call sites need nothing,
- * and `PasswordInput` composes `Input` so it inherits.
+ * `Input`, `Textarea` and `PinInput` already spread this, so their call sites
+ * need nothing, and `PasswordInput` composes `Input` so it inherits.
  *
- * Two components deliberately do NOT, because the zoom does not reach them.
- * `Select` is a listbox — a `<button>` trigger over a portalled list, plus a
+ * `Select` deliberately does NOT, because the zoom does not reach it. It is a
+ * listbox — a `<button>` trigger over a portalled list, plus a
  * visually hidden native `<select>` that exists only for form submission and
  * never takes visible focus; Safari zooms toward text entry, not toward a
- * button. `PinInput` wraps `react-pin-input`, which takes an inline `style`
- * object, and an inline style cannot carry a media query at all — a consumer
- * that builds OTP boxes on `ChakraPinInput` instead has to spread this itself.
+ * button.
  *
  * Spread it yourself on any editable surface the design system does not own —
  * a Lexical/ProseMirror `contenteditable`, a bare Chakra `Input`, or a

package/dist/theme/formControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formControls.d.ts","sourceRoot":"","sources":["../../src/theme/formControls.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,eAAO,MAAM,aAAa,EAAE,iBAE3B,CAAC"}
+{"version":3,"file":"formControls.d.ts","sourceRoot":"","sources":["../../src/theme/formControls.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,eAAO,MAAM,aAAa,EAAE,iBAE3B,CAAC"}

package/dist/theme/formControls.js

@@ -29,16 +29,14 @@
  * browser zoom has a ~640px CSS viewport, so a width rule enlarges their form
  * controls and pushes wide tables off-screen, making the low-vision case worse.
  *
- * `Input` and `Textarea` already spread this, so their call sites need nothing,
- * and `PasswordInput` composes `Input` so it inherits.
+ * `Input`, `Textarea` and `PinInput` already spread this, so their call sites
+ * need nothing, and `PasswordInput` composes `Input` so it inherits.
  *
- * Two components deliberately do NOT, because the zoom does not reach them.
- * `Select` is a listbox — a `<button>` trigger over a portalled list, plus a
+ * `Select` deliberately does NOT, because the zoom does not reach it. It is a
+ * listbox — a `<button>` trigger over a portalled list, plus a
  * visually hidden native `<select>` that exists only for form submission and
  * never takes visible focus; Safari zooms toward text entry, not toward a
- * button. `PinInput` wraps `react-pin-input`, which takes an inline `style`
- * object, and an inline style cannot carry a media query at all — a consumer
- * that builds OTP boxes on `ChakraPinInput` instead has to spread this itself.
+ * button.
  *
  * Spread it yourself on any editable surface the design system does not own —
  * a Lexical/ProseMirror `contenteditable`, a bare Chakra `Input`, or a

package/dist/theme/formControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"formControls.js","sources":["../../src/theme/formControls.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDG;AACI,MAAM,aAAa,GAAsB;AAC9C,IAAA,0BAA0B,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE;;;;;"}
+{"version":3,"file":"formControls.js","sources":["../../src/theme/formControls.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDG;AACI,MAAM,aAAa,GAAsB;AAC9C,IAAA,0BAA0B,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE;;;;;"}

package/dist/theme/formControls.mjs

@@ -27,16 +27,14 @@
  * browser zoom has a ~640px CSS viewport, so a width rule enlarges their form
  * controls and pushes wide tables off-screen, making the low-vision case worse.
  *
- * `Input` and `Textarea` already spread this, so their call sites need nothing,
- * and `PasswordInput` composes `Input` so it inherits.
+ * `Input`, `Textarea` and `PinInput` already spread this, so their call sites
+ * need nothing, and `PasswordInput` composes `Input` so it inherits.
  *
- * Two components deliberately do NOT, because the zoom does not reach them.
- * `Select` is a listbox — a `<button>` trigger over a portalled list, plus a
+ * `Select` deliberately does NOT, because the zoom does not reach it. It is a
+ * listbox — a `<button>` trigger over a portalled list, plus a
  * visually hidden native `<select>` that exists only for form submission and
  * never takes visible focus; Safari zooms toward text entry, not toward a
- * button. `PinInput` wraps `react-pin-input`, which takes an inline `style`
- * object, and an inline style cannot carry a media query at all — a consumer
- * that builds OTP boxes on `ChakraPinInput` instead has to spread this itself.
+ * button.
  *
  * Spread it yourself on any editable surface the design system does not own —
  * a Lexical/ProseMirror `contenteditable`, a bare Chakra `Input`, or a

package/dist/theme/formControls.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"formControls.mjs","sources":["../../src/theme/formControls.ts"],"sourcesContent":[null],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDG;AACI,MAAM,aAAa,GAAsB;AAC9C,IAAA,0BAA0B,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE;;;;;"}
+{"version":3,"file":"formControls.mjs","sources":["../../src/theme/formControls.ts"],"sourcesContent":[null],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDG;AACI,MAAM,aAAa,GAAsB;AAC9C,IAAA,0BAA0B,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE;;;;;"}

package/dist/utils/mergeCss.js

@@ -1,11 +1,11 @@
 "use client";
 'use strict';
 
-var lodash = require('lodash');
+var merge = require('lodash/merge');
 
 const mergeCss = (...styles) => styles.reduce((acc, style) => {
     if (style && typeof style === 'object') {
-        lodash.merge(acc, style);
+        merge(acc, style);
     }
     return acc;
 }, {});

package/dist/utils/mergeCss.js.map

@@ -1 +1 @@
-{"version":3,"file":"mergeCss.js","sources":["../../src/utils/mergeCss.ts"],"sourcesContent":[null],"names":["merge"],"mappings":";;;;;AAGO,MAAM,QAAQ,GAAG,CACtB,GAAG,MAAwD,KAE3D,MAAM,CAAC,MAAM,CAAoB,CAAC,GAAG,EAAE,KAAK,KAAI;AAC9C,IAAA,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AACtC,QAAAA,YAAK,CAAC,GAAG,EAAE,KAAK,CAAC;IACnB;AACA,IAAA,OAAO,GAAG;AACZ,CAAC,EAAE,EAAuB;;;;"}
+{"version":3,"file":"mergeCss.js","sources":["../../src/utils/mergeCss.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAGO,MAAM,QAAQ,GAAG,CACtB,GAAG,MAAwD,KAE3D,MAAM,CAAC,MAAM,CAAoB,CAAC,GAAG,EAAE,KAAK,KAAI;AAC9C,IAAA,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AACtC,QAAA,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC;IACnB;AACA,IAAA,OAAO,GAAG;AACZ,CAAC,EAAE,EAAuB;;;;"}

package/dist/utils/mergeCss.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 
 const mergeCss = (...styles) => styles.reduce((acc, style) => {
     if (style && typeof style === 'object') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindlogic-ai/logician-ui",
-  "version": "4.0.0-alpha.38",
+  "version": "4.0.0-alpha.40",
   "description": "A comprehensive React design system built on Chakra UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -77,7 +77,6 @@
     "next-themes": "^0.4.6",
     "polished": "^4.3.0",
     "react-markdown": "^10.1.0",
-    "react-pin-input": "^1.3.0",
     "recharts": "^3.1.2",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",

package/src/components/PinInput/PinInput.stories.tsx

@@ -11,6 +11,14 @@ const meta = {
   },
   argTypes: {
     length: { control: 'number' },
+    type: {
+      control: 'select',
+      options: ['numeric', 'alphanumeric', 'alphabetic'],
+    },
+    autoFocus: { control: 'boolean' },
+    otp: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    invalid: { control: 'boolean' },
   },
 } satisfies Meta<typeof PinInput>;
 
@@ -18,13 +26,32 @@ export default meta;
 
 type Story = StoryObj<typeof PinInput>;
 
-export const Basic: Story = {
-  args: {
-    length: 5,
-  },
-  render: (args) => {
-    const [value, setValue] = useState('');
+const Controlled = (args: React.ComponentProps<typeof PinInput>) => {
+  const [value, setValue] = useState('');
+  return <PinInput {...args} value={value} onChange={setValue} />;
+};
 
-    return <PinInput {...args} value={value} onChange={setValue} />;
-  },
-}
+export const Numeric: Story = {
+  args: { length: 6, type: 'numeric' },
+  render: (args) => <Controlled {...args} />,
+};
+
+export const Alphanumeric: Story = {
+  args: { length: 6, type: 'alphanumeric' },
+  render: (args) => <Controlled {...args} />,
+};
+
+export const Otp: Story = {
+  args: { length: 6, type: 'numeric', otp: true, autoFocus: true },
+  render: (args) => <Controlled {...args} />,
+};
+
+export const Disabled: Story = {
+  args: { length: 5, disabled: true },
+  render: (args) => <Controlled {...args} />,
+};
+
+export const Invalid: Story = {
+  args: { length: 5, invalid: true },
+  render: (args) => <Controlled {...args} />,
+};

package/src/components/PinInput/PinInput.tsx

@@ -1,51 +1,60 @@
-import React, { useEffect, useRef } from 'react';
-import ReactPinInput from 'react-pin-input';
-import { useToken } from '@chakra-ui/react';
+'use client';
 
-import { PinInputProps } from './PinInput.types';
+import { forwardRef } from 'react';
+import { PinInput as ChakraPinInput } from '@chakra-ui/react';
+
+import { noZoomOnFocus } from '@/theme/formControls';
 
-// TODO: forwardRef
-export const PinInput = ({
-  value,
-  onChange,
-  inputStyle,
-  autoFocus = true,
-  isNumberOnly = true,
-  ...rest
-}: PinInputProps) => {
-  const pinInputRef = useRef<ReactPinInput>(null);
-  const primaryColor = useToken('colors', 'primary.main')[0];
-  const grayColor = useToken('colors', 'border.default')[0];
+import { PinInputProps } from './PinInput.types';
 
-  useEffect(() => {
-    // Automatically focus the PinInput component on mount
-    if (autoFocus) pinInputRef.current?.focus();
-  }, []);
+export const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
+  function PinInput(
+    {
+      length,
+      value,
+      onChange,
+      onComplete,
+      placeholder = '',
+      inputProps,
+      ...rest
+    },
+    ref
+  ) {
+    const valueArray = Array.from({ length }, (_, i) => value?.[i] ?? '');
 
-  return (
-    <ReactPinInput
-      ref={pinInputRef} // Attach the ref to the PinInput component
-      initialValue={value}
-      onChange={onChange}
-      type={isNumberOnly ? 'numeric' : 'custom'}
-      inputMode={isNumberOnly ? 'number' : 'text'}
-      inputStyle={{
-        borderColor: grayColor,
-        borderRadius: '8px',
-        width: '48px',
-        height: '48px',
-        ...inputStyle,
-      }}
-      inputFocusStyle={{
-        borderColor: primaryColor,
-        boxShadow: `0 0 0 1px ${primaryColor}`,
-      }}
-      onComplete={onChange}
-      autoSelect
-      regexCriteria={isNumberOnly ? /^[0-9]*$/ : undefined}
-      {...rest}
-    />
-  );
-};
+    return (
+      <ChakraPinInput.Root
+        count={length}
+        value={valueArray}
+        onValueChange={(d) => onChange?.(d.valueAsString)}
+        onValueComplete={(d) => onComplete?.(d.valueAsString)}
+        placeholder={placeholder}
+        {...rest}
+      >
+        <ChakraPinInput.HiddenInput ref={ref} {...inputProps} />
+        <ChakraPinInput.Control>
+          {Array.from({ length }).map((_, i) => (
+            <ChakraPinInput.Input
+              key={i}
+              index={i}
+              w={12}
+              h={12}
+              fontSize="lg"
+              borderRadius="md"
+              bg="bg.surface"
+              color="fg.default"
+              borderColor="border.default"
+              _hover={{ borderColor: 'primary.lighter' }}
+              _focus={{ borderColor: 'primary.main' }}
+              _invalid={{ borderColor: 'danger.main' }}
+              _disabled={{ borderColor: 'border.subtle', bg: 'bg.subtle' }}
+              css={noZoomOnFocus}
+            />
+          ))}
+        </ChakraPinInput.Control>
+      </ChakraPinInput.Root>
+    );
+  }
+);
 
 PinInput.displayName = 'PinInput';

package/src/components/PinInput/PinInput.types.ts

@@ -1,27 +1,19 @@
-// TODO: This interface is copied from the react-pin-input package. Find a more scalable way to import this interface if it gets updated
-interface ReactPinInputProps {
-  length: number;
-  initialValue?: number | string;
-  type?: 'numeric' | 'custom';
-  inputMode?: string;
-  secret?: boolean;
-  secretDelay?: number;
-  disabled?: boolean;
-  focus?: boolean;
-  onChange?: (value: string, index: number) => void;
-  onComplete?: (value: string, index: number) => void;
-  style?: React.CSSProperties;
-  inputStyle?: React.CSSProperties;
-  inputFocusStyle?: React.CSSProperties;
-  validate?: (value: string) => string;
-  autoSelect?: boolean;
-  regexCriteria?: any;
-  ariaLabel?: string;
-  placeholder?: string;
-}
+import type { InputHTMLAttributes } from 'react';
+import type { PinInput as ChakraPinInput } from '@chakra-ui/react';
 
-export type PinInputProps = ReactPinInputProps & {
+export interface PinInputProps extends Omit<
+  ChakraPinInput.RootProps,
+  | 'count'
+  | 'value'
+  | 'defaultValue'
+  | 'onValueChange'
+  | 'onValueComplete'
+  | 'onChange'
+  | 'children'
+> {
+  length: number;
   value?: string;
-  autoFocus?: boolean;
-  isNumberOnly?: boolean;
-};
+  onChange?: (value: string) => void;
+  onComplete?: (value: string) => void;
+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
+}

package/src/theme/formControls.ts

@@ -28,16 +28,14 @@ import type { SystemStyleObject } from '@chakra-ui/react';
  * browser zoom has a ~640px CSS viewport, so a width rule enlarges their form
  * controls and pushes wide tables off-screen, making the low-vision case worse.
  *
- * `Input` and `Textarea` already spread this, so their call sites need nothing,
- * and `PasswordInput` composes `Input` so it inherits.
+ * `Input`, `Textarea` and `PinInput` already spread this, so their call sites
+ * need nothing, and `PasswordInput` composes `Input` so it inherits.
  *
- * Two components deliberately do NOT, because the zoom does not reach them.
- * `Select` is a listbox — a `<button>` trigger over a portalled list, plus a
+ * `Select` deliberately does NOT, because the zoom does not reach it. It is a
+ * listbox — a `<button>` trigger over a portalled list, plus a
  * visually hidden native `<select>` that exists only for form submission and
  * never takes visible focus; Safari zooms toward text entry, not toward a
- * button. `PinInput` wraps `react-pin-input`, which takes an inline `style`
- * object, and an inline style cannot carry a media query at all — a consumer
- * that builds OTP boxes on `ChakraPinInput` instead has to spread this itself.
+ * button.
  *
  * Spread it yourself on any editable surface the design system does not own —
  * a Lexical/ProseMirror `contenteditable`, a bare Chakra `Input`, or a

package/src/utils/mergeCss.ts

@@ -1,5 +1,5 @@
 import type { SystemStyleObject } from '@chakra-ui/react';
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 
 export const mergeCss = (
   ...styles: (SystemStyleObject | undefined | null | false)[]