@rovula/ui 0.1.7 → 0.1.9

package/dist/components/Form/Form.stories.js

@@ -0,0 +1,221 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useMemo, useState } from "react";
+import * as yup from "yup";
+import Button from "@/components/Button/Button";
+import TextInput from "@/components/TextInput/TextInput";
+import Dropdown from "@/components/Dropdown/Dropdown";
+import DatePicker from "@/components/DatePicker/DatePicker";
+import { NumberInput } from "@/components/NumberInput/NumberInput";
+import { Switch } from "@/components/Switch/Switch";
+import { Field } from "./Field";
+import { Form, useControlledForm, } from "./Form";
+const roleOptions = [
+    { value: "dev", label: "Developer" },
+    { value: "pm", label: "Product Manager" },
+    { value: "qa", label: "QA Engineer" },
+];
+const meta = {
+    title: "Components/Form",
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "w-[520px] max-w-full p-5 bg-bg-bg2 rounded-md", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const loginSchema = yup.object({
+    email: yup
+        .string()
+        .email("Invalid email format")
+        .required("Email is required"),
+    password: yup
+        .string()
+        .required("Password is required")
+        .min(6, "Password must be at least 6 characters"),
+});
+export const BasicYupLogin = {
+    args: {},
+    render: () => {
+        const [lastEmailChange, setLastEmailChange] = useState("");
+        return (_jsxs(Form, { className: "flex flex-col gap-3", defaultValues: {
+                email: "",
+                password: "",
+            }, validationSchema: loginSchema, onSubmit: (values) => {
+                // eslint-disable-next-line no-console
+                console.log("Submitted form values:", values);
+            }, children: [_jsx(Field, { name: "email", component: TextInput, componentProps: {
+                        label: "Email",
+                        type: "email",
+                        helperText: "Use your work email",
+                        required: true,
+                    }, onChange: (value) => {
+                        setLastEmailChange(String(value !== null && value !== void 0 ? value : ""));
+                    } }), _jsx(Field, { name: "password", component: TextInput, componentProps: {
+                        label: "Password",
+                        type: "password",
+                        required: true,
+                    } }), _jsxs("div", { className: "text-xs text-text-g-contrast-medium", children: ["Last email change: ", lastEmailChange || "-"] }), _jsx(Button, { type: "submit", children: "Sign in" })] }));
+    },
+};
+export const MixedUiKitControls = {
+    args: {},
+    render: () => {
+        const selectedRole = useMemo(() => roleOptions.find((item) => item.value === "dev"), []);
+        return (_jsxs(Form, { className: "flex flex-col gap-4", defaultValues: {
+                fullName: "",
+                role: (selectedRole === null || selectedRole === void 0 ? void 0 : selectedRole.value) || "",
+                salary: undefined,
+                startDate: undefined,
+                isActive: true,
+            }, validationSchema: yup.object({
+                fullName: yup.string().required("Full name is required"),
+                role: yup.string().required("Please select a role"),
+            }), onSubmit: (values) => {
+                // eslint-disable-next-line no-console
+                console.log("Submitted employee values:", values);
+            }, children: [_jsx(Field, { name: "fullName", component: TextInput, componentProps: {
+                        label: "Full name",
+                        required: true,
+                    } }), _jsx(Field, { name: "role", component: Dropdown, componentProps: {
+                        label: "Role",
+                        options: roleOptions,
+                        required: true,
+                        helperText: "Choose one role",
+                    }, valuePropName: "value", changePropName: "onSelect", parseValue: (incoming) => {
+                        const option = incoming;
+                        return (option === null || option === void 0 ? void 0 : option.value) || "";
+                    }, formatValue: (value) => roleOptions.find((option) => option.value === value) }), _jsx(Field, { name: "salary", component: NumberInput, componentProps: {
+                        label: "Salary",
+                        min: 0,
+                        thousandSeparator: ",",
+                        formatDisplay: true,
+                    }, parseValue: (incoming) => typeof incoming === "number" ? incoming : undefined }), _jsx(Field, { name: "startDate", component: DatePicker, componentProps: {
+                        date: undefined,
+                        onSelect: () => undefined,
+                        textInputProps: { label: "Start date", required: false },
+                    }, valuePropName: "date", changePropName: "onSelect", blurPropName: false, refPropName: false, errorMessagePropName: false, invalidPropName: false, parseValue: (incoming) => incoming }), _jsxs("div", { className: "flex items-center justify-between rounded-md border border-bg-stroke1 px-3 py-2", children: [_jsx("span", { className: "text-sm text-text-contrast-max", children: "Active employee" }), _jsx(Field, { name: "isActive", component: Switch, valuePropName: "checked", changePropName: "onCheckedChange", blurPropName: false, errorMessagePropName: false, invalidPropName: false, parseValue: (incoming) => Boolean(incoming) })] }), _jsx(Button, { type: "submit", children: "Create employee" })] }));
+    },
+};
+export const ResolverBasedValidation = {
+    args: {},
+    render: () => {
+        const resolver = async (values) => {
+            var _a;
+            const errors = {};
+            if (!((_a = values.email) === null || _a === void 0 ? void 0 : _a.includes("@"))) {
+                errors.email = { type: "validate", message: "Email must include @" };
+            }
+            if (!values.password || values.password.length < 8) {
+                errors.password = {
+                    type: "validate",
+                    message: "Password must be at least 8 characters",
+                };
+            }
+            return {
+                values: Object.keys(errors).length ? {} : values,
+                errors,
+            };
+        };
+        return (_jsxs(Form, { className: "flex flex-col gap-3", defaultValues: {
+                email: "",
+                password: "",
+            }, resolver: resolver, onSubmit: (values) => {
+                // eslint-disable-next-line no-console
+                console.log("Resolver submit values:", values);
+            }, children: [_jsx(Field, { name: "email", component: TextInput, componentProps: {
+                        label: "Email",
+                        type: "email",
+                        required: true,
+                    } }), _jsx(Field, { name: "password", component: TextInput, componentProps: {
+                        label: "Password",
+                        type: "password",
+                        helperText: "This story demonstrates custom resolver.",
+                        required: true,
+                    } }), _jsx(Button, { type: "submit", children: "Validate" })] }));
+    },
+};
+export const RenderPropsCodeControl = {
+    args: {},
+    render: () => {
+        const codeControlSchema = yup.object({
+            title: yup.string().required("Title is required"),
+            description: yup
+                .string()
+                .required("Description is required")
+                .min(10, "Description must be at least 10 characters"),
+        });
+        return (_jsx(Form, { className: "flex flex-col gap-3", defaultValues: {
+                title: "",
+                description: "",
+            }, mode: "onChange", validationSchema: codeControlSchema, onSubmit: (values) => {
+                // eslint-disable-next-line no-console
+                console.log("Submit with code:", values);
+            }, children: ({ formState, getValues, handleSubmit }) => (_jsxs(_Fragment, { children: [_jsx(Field, { name: "title", component: TextInput, componentProps: {
+                            label: "Title",
+                            required: true,
+                        } }), _jsx(Field, { name: "description", component: TextInput, componentProps: {
+                            label: "Description",
+                            helperText: "Try at least 10 characters",
+                            required: true,
+                        } }), _jsx("div", { className: "flex gap-2", children: _jsx(Button, { type: "submit", disabled: !formState.isValid || formState.isSubmitting, isLoading: formState.isSubmitting, children: "Submit with code" }) })] })) }));
+    },
+};
+export const HigherLayerCodeControl = {
+    args: {},
+    render: () => {
+        const [stateSnapshot, setStateSnapshot] = useState("-");
+        const [submitCount, setSubmitCount] = useState(0);
+        const formRef = React.useRef(null);
+        const schema = yup.object({
+            title: yup.string().required("Title is required"),
+            description: yup
+                .string()
+                .required("Description is required")
+                .min(10, "Description must be at least 10 characters"),
+        });
+        const { methods, FormRoot } = useControlledForm({
+            defaultValues: {
+                title: "",
+                description: "",
+            },
+            validationSchema: schema,
+            mode: "onChange",
+        });
+        const onSubmit = (values) => {
+            setSubmitCount((prev) => prev + 1);
+            // eslint-disable-next-line no-console
+            console.log("Higher layer submit with code:", values);
+        };
+        return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "rounded-md border border-bg-stroke1 bg-bg-bg2 p-3 text-xs text-text-g-contrast-medium", children: ["Higher layer state: ", methods.formState.isValid ? "valid" : "invalid", " ", "/", methods.formState.isDirty ? " dirty" : " pristine", " / submits:", " ", submitCount] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => {
+                                const snapshot = JSON.stringify({
+                                    values: methods.getValues(),
+                                    isValid: methods.formState.isValid,
+                                    isDirty: methods.formState.isDirty,
+                                });
+                                setStateSnapshot(snapshot);
+                            }, children: "Get state with code (outside Form)" }), _jsx(Button, { type: "button", disabled: !methods.formState.isValid || methods.formState.isSubmitting, isLoading: methods.formState.isSubmitting, onClick: () => {
+                                methods.handleSubmit(onSubmit)();
+                            }, children: "Submit with code (outside Form)" }), _jsx(Button, { type: "button", variant: "outline", onClick: async () => {
+                                var _a;
+                                await ((_a = formRef.current) === null || _a === void 0 ? void 0 : _a.submit());
+                            }, children: "Submit with ref" }), _jsx(Button, { type: "button", variant: "outline", onClick: () => {
+                                var _a;
+                                const valuesFromRef = (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.getValues();
+                                if (!valuesFromRef)
+                                    return;
+                                setStateSnapshot(JSON.stringify({
+                                    values: valuesFromRef,
+                                    via: "controllerRef",
+                                }));
+                            }, children: "Get state with ref" })] }), _jsxs("div", { className: "rounded-md border border-bg-stroke1 bg-bg-bg2 p-3 text-xs text-text-g-contrast-medium", children: ["Snapshot: ", stateSnapshot] }), _jsxs(FormRoot, { ref: formRef, className: "flex flex-col gap-3", onSubmit: onSubmit, children: [_jsx(Field, { name: "title", component: TextInput, componentProps: {
+                                label: "Title",
+                                required: true,
+                            } }), _jsx(Field, { name: "description", component: TextInput, componentProps: {
+                                label: "Description",
+                                helperText: "Try at least 10 characters",
+                                required: true,
+                            } })] })] }));
+    },
+};

package/dist/components/Form/ValidationHintList.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleCheck } from "lucide-react";
+import { cn } from "@/utils/cn";
+const resolveHintState = (values, rule) => {
+    const shouldEvaluate = rule.when ? rule.when(values) : true;
+    if (!shouldEvaluate)
+        return "pending";
+    return rule.validate(values) ? "valid" : "invalid";
+};
+const hintLabelStateClass = {
+    valid: "text-text-g-contrast-high",
+    invalid: "text-input-error",
+    pending: "text-text-g-contrast-high",
+};
+const hintIconStateClass = {
+    valid: "text-primary",
+    invalid: "text-input-error",
+    pending: "text-text-g-contrast-low",
+};
+export const ValidationHintList = ({ values, rules, mode = ["pending", "valid", "invalid"], className, itemClassName, labelStateClassName, iconStateClassName, }) => {
+    const enabledStates = new Set(mode);
+    return (_jsx("ul", { className: cn("mt-2 flex flex-col gap-3", className), children: rules.map((rule) => {
+            const state = resolveHintState(values, rule);
+            const normalizedState = enabledStates.has(state)
+                ? state
+                : "pending";
+            return (_jsxs("li", { className: cn("flex items-center gap-2 typography-small2 ", hintLabelStateClass[normalizedState], labelStateClassName === null || labelStateClassName === void 0 ? void 0 : labelStateClassName[normalizedState], itemClassName), children: [_jsx(CircleCheck, { className: cn("size-4", hintIconStateClass[normalizedState], iconStateClassName === null || iconStateClassName === void 0 ? void 0 : iconStateClassName[normalizedState]) }), _jsx("span", { children: rule.label })] }, rule.id));
+        }) }));
+};
+export default ValidationHintList;

package/dist/components/Form/ValidationHintList.stories.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import PasswordInput from "@/components/PasswordInput";
+import { ValidationHintList } from "./ValidationHintList";
+const rules = [
+    {
+        id: "min-length",
+        label: "Minimum 12 characters",
+        validate: (values) => values.password.length >= 12,
+        when: (values) => Boolean(values.password),
+    },
+    {
+        id: "upper-lower",
+        label: "At least one upper and lower case",
+        validate: (values) => /[a-z]/.test(values.password) && /[A-Z]/.test(values.password),
+        when: (values) => Boolean(values.password),
+    },
+    {
+        id: "match",
+        label: "Password and confirmation are matching",
+        validate: (values) => Boolean(values.password) && values.password === values.confirmPassword,
+        when: (values) => Boolean(values.password) && Boolean(values.confirmPassword),
+    },
+];
+const meta = {
+    title: "Components/Form/ValidationHintList",
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+export const ThreeState = {
+    render: () => {
+        const [values, setValues] = useState({
+            password: "",
+            confirmPassword: "",
+        });
+        return (_jsxs("div", { className: "w-[420px] max-w-full rounded-md bg-bg-bg2 p-4", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(PasswordInput, { label: "Password", value: values.password, onChange: (event) => setValues((prev) => (Object.assign(Object.assign({}, prev), { password: event.target.value }))) }), _jsx(PasswordInput, { label: "Confirm password", value: values.confirmPassword, onChange: (event) => setValues((prev) => (Object.assign(Object.assign({}, prev), { confirmPassword: event.target.value }))) })] }), _jsx(ValidationHintList, { values: values, rules: rules })] }));
+    },
+};
+export const TwoState = {
+    render: () => {
+        const [values, setValues] = useState({
+            password: "",
+            confirmPassword: "",
+        });
+        return (_jsxs("div", { className: "w-[420px] max-w-full rounded-md bg-bg-bg2 p-4", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(PasswordInput, { label: "Password", value: values.password, onChange: (event) => setValues((prev) => (Object.assign(Object.assign({}, prev), { password: event.target.value }))) }), _jsx(PasswordInput, { label: "Confirm password", value: values.confirmPassword, onChange: (event) => setValues((prev) => (Object.assign(Object.assign({}, prev), { confirmPassword: event.target.value }))) })] }), _jsx(ValidationHintList, { values: values, rules: rules, mode: ["pending", "valid"] })] }));
+    },
+};

package/dist/components/Form/index.js

@@ -0,0 +1,5 @@
+export { Form, createControlledForm, createYupResolver, useControlledForm, } from "./Form";
+export { Field } from "./Field";
+export { FieldMessage } from "./FieldMessage";
+export { ValidationHintList } from "./ValidationHintList";
+export { useOptionBridge } from "./useOptionBridge";

package/dist/components/Form/useOptionBridge.js

@@ -0,0 +1,27 @@
+import { useMemo } from "react";
+export const useOptionBridge = ({ options, loading = false, buildFallbackOption, }) => {
+    const optionsByValue = useMemo(() => {
+        return new Map(options.map((option) => [option.value, option]));
+    }, [options]);
+    const toOption = (value) => {
+        if (value === null || value === undefined)
+            return undefined;
+        return optionsByValue.get(value);
+    };
+    const toValue = (option) => {
+        return option === null || option === void 0 ? void 0 : option.value;
+    };
+    const toOptionWithFallback = (value) => {
+        var _a;
+        if (value === null || value === undefined)
+            return undefined;
+        return (_a = toOption(value)) !== null && _a !== void 0 ? _a : buildFallbackOption === null || buildFallbackOption === void 0 ? void 0 : buildFallbackOption(value, loading);
+    };
+    return {
+        toOption,
+        toOptionWithFallback,
+        toValue,
+        optionsByValue,
+    };
+};
+export default useOptionBridge;

package/dist/components/InputFilter/InputFilter.js

@@ -77,7 +77,7 @@ const InputFilter = forwardRef((_a, ref) => {
                 onClick: handleOptionClick,
             });
         }
-        return (_jsxs("ul", { className: cn("absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-10 max-h-60 overflow-y-auto", optionContainerClassName), children: [optionsFiltered.map((option) => {
+        return (_jsxs("ul", { className: cn("absolute text-text-g-contrast-high mt-1 w-full bg-modal-surface border border-modal-surface text-text-contrast-low rounded-md shadow-md z-10 max-h-60 overflow-y-auto", optionContainerClassName), children: [optionsFiltered.map((option) => {
                     if (option.renderLabel) {
                         return (_jsx(Fragment, { children: option.renderLabel({
                                 value: option.value,
@@ -88,8 +88,8 @@ const InputFilter = forwardRef((_a, ref) => {
                                     : ""}`,
                             }) }, option.value));
                     }
-                    return (_jsxs("li", { onMouseDown: () => handleOptionClick(option), className: `p-4 typography-subtitle4 hover:bg-primary-hover-bg cursor-pointer  flex items-center gap-3 ${selectedOptions.some((selected) => selected.value === option.value)
-                            ? "bg-base-popup-highlight"
+                    return (_jsxs("li", { onMouseDown: () => handleOptionClick(option), className: `p-4 text-text-g-contrast-high typography-subtitle4 hover:bg-primary-hover-bg cursor-pointer  flex items-center gap-3 ${selectedOptions.some((selected) => selected.value === option.value)
+                            ? "bg-modal-highlight"
                             : ""}`, children: [_jsx(Checkbox, { checked: selectedOptions.some((selected) => selected.value === option.value) }), option.label] }, option.value));
                 }), optionsFiltered.length === 0 && (_jsx("li", { className: "px-4 py-14 text-center text-input-text", children: "Not found" }))] }));
     };
@@ -119,6 +119,7 @@ const InputFilter = forwardRef((_a, ref) => {
         active: !!values.length,
         disabled,
     });
-    return (_jsxs("div", { ref: containerRef, className: `relative ${fullwidth ? "w-full" : ""}`, children: [_jsx(TextInput, Object.assign({ hasClearIcon: false, endIcon: _jsx(Icon, { type: "heroicons", name: "adjustments-horizontal", variant: "outline", color: "inherit", stroke: "inherit", fill: "transparent" }), classes: { endIconWrapper: filterIconClassName } }, props, { ref: ref, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: customInputVariant({ size }), onFocus: handleOnFocus, onKeyDown: handleOnKeyDown })), isFocused && renderOptions()] }));
+    const filterIconSizeClassName = size === "lg" ? "size-8" : size === "md" ? "size-[22px]" : "size-[18px]";
+    return (_jsxs("div", { ref: containerRef, className: `relative ${fullwidth ? "w-full" : ""}`, children: [_jsx(TextInput, Object.assign({ hasClearIcon: false, endIcon: _jsx(Icon, { type: "heroicons", name: "adjustments-horizontal", variant: "outline", color: "inherit", stroke: "inherit", fill: "transparent", className: filterIconSizeClassName }), classes: { endIconWrapper: filterIconClassName } }, props, { ref: ref, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: customInputVariant({ size }), onFocus: handleOnFocus, onKeyDown: handleOnKeyDown })), isFocused && renderOptions()] }));
 });
 export { InputFilter };

package/dist/components/InputFilter/InputFilter.stories.js

@@ -9,7 +9,7 @@ const meta = {
         layout: "fullscreen",
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-base-bg2", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-bg-bg2", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;

package/dist/components/InputFilter/InputFilter.styles.js

@@ -23,7 +23,7 @@ export const filterIconVariant = cva([
         },
         rounded: {
             none: "rounded-r-none",
-            normal: "rounded-r-xl",
+            normal: "",
             full: "rounded-r-full",
         },
         error: {
@@ -48,12 +48,25 @@ export const filterIconVariant = cva([
         },
         disabled: {
             true: [
+                "cursor-default pointer-events-none",
                 "border-l-input-disable-stroke",
                 "fill-input-disable-stroke",
                 "stroke-input-disable-stroke",
             ],
         },
     },
+    compoundVariants: [
+        {
+            rounded: "normal",
+            size: "sm",
+            className: "rounded-r-sm",
+        },
+        {
+            rounded: "normal",
+            size: ["md", "lg"],
+            className: "rounded-r-md",
+        },
+    ],
     defaultVariants: {
         size: "md",
         rounded: "normal",

package/dist/components/Label/Label.styles.js

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 export const labelVariant = cva([
-    "block cursor-pointer duration-450 transition-all px-[2px] text-foreground peer-focus:text-input-text-active",
+    "block cursor-pointer duration-450 transition-all px-[2px] text-input-default-text peer-focus:text-input-text-active",
 ], {
     variants: {
         size: {

package/dist/components/Menu/Menu.js

@@ -4,7 +4,7 @@ import { cn } from "@/utils/cn";
 import Icon from "../Icon/Icon";
 // ==================== Menu Container ====================
 export const Menu = forwardRef(({ items, selectedValues = [], onSelect, className, style, isAbove = false }, ref) => {
-    return (_jsx("div", { ref: ref, className: cn("z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground", "border border-base-popup", className), style: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, style), children: items.map((item, index) => {
+    return (_jsx("div", { ref: ref, className: cn("z-50 min-w-[154px] overflow-hidden rounded-md bg-modal-surface text-text-g-contrast-high", "border border-modal-surface", className), style: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, style), children: items.map((item, index) => {
             var _a;
             if (item.type === "separator") {
                 return _jsx(MenuSeparator, {}, `separator-${index}`);
@@ -57,7 +57,7 @@ export const MenuSeparator = forwardRef(({ className }, ref) => {
 });
 MenuSeparator.displayName = "MenuSeparator";
 export const MenuLabel = forwardRef(({ children, className }, ref) => {
-    return (_jsx("div", { ref: ref, className: cn("px-3 py-2 typography-small4 text-text-grey-medium", className), children: children }));
+    return (_jsx("div", { ref: ref, className: cn("px-3 py-2 typography-small4 text-text-g-contrast-medium", className), children: children }));
 });
 MenuLabel.displayName = "MenuLabel";
 // ==================== Exports ====================

package/dist/components/NumberInput/NumberInput.stories.js

@@ -8,7 +8,7 @@ const meta = {
     },
     tags: ["autodocs"],
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 flex h-screen w-full bg-base-bg2", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 flex h-screen w-full bg-bg-bg2", children: _jsx(Story, {}) })),
     ],
     argTypes: {
         size: {

package/dist/components/OtpInput/OtpInput.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useMemo, useRef, } from "react";
+import { cn } from "@/utils/cn";
+const sanitizeChars = (raw, charPattern, maxLength) => {
+    const chars = Array.from(raw).filter((char) => charPattern.test(char));
+    return chars.slice(0, maxLength);
+};
+export const OtpInput = forwardRef(({ value, onChange, onBlur, onComplete, length = 6, disabled = false, invalid = false, autoFocus = false, inputMode = "numeric", charPattern = /^\d$/, className, inputClassName, }, ref) => {
+    const inputRefs = useRef([]);
+    const containerRef = useRef(null);
+    const slots = useMemo(() => {
+        const normalizedValue = value || "";
+        return Array.from({ length }, (_, index) => normalizedValue[index] || "");
+    }, [length, value]);
+    useImperativeHandle(ref, () => inputRefs.current[0], []);
+    const setCode = (nextSlots) => {
+        const nextValue = nextSlots.join("");
+        onChange(nextValue);
+        if (onComplete && nextSlots.every((slot) => slot !== "")) {
+            onComplete(nextValue);
+        }
+    };
+    const focusInput = (index) => {
+        var _a, _b;
+        const clamped = Math.max(0, Math.min(length - 1, index));
+        (_a = inputRefs.current[clamped]) === null || _a === void 0 ? void 0 : _a.focus();
+        (_b = inputRefs.current[clamped]) === null || _b === void 0 ? void 0 : _b.select();
+    };
+    const handleInputChange = (index, rawValue) => {
+        if (disabled)
+            return;
+        if (!rawValue) {
+            const nextSlots = [...slots];
+            nextSlots[index] = "";
+            setCode(nextSlots);
+            return;
+        }
+        const incomingChars = sanitizeChars(rawValue, charPattern, length);
+        if (!incomingChars.length)
+            return;
+        const nextSlots = [...slots];
+        let cursor = index;
+        incomingChars.forEach((char) => {
+            if (cursor < length) {
+                nextSlots[cursor] = char;
+                cursor += 1;
+            }
+        });
+        setCode(nextSlots);
+        if (cursor < length) {
+            focusInput(cursor);
+        }
+        else {
+            focusInput(length - 1);
+        }
+    };
+    const handlePaste = (index, event) => {
+        event.preventDefault();
+        if (disabled)
+            return;
+        const pasted = event.clipboardData.getData("text");
+        const incomingChars = sanitizeChars(pasted, charPattern, length - index);
+        if (!incomingChars.length)
+            return;
+        const nextSlots = [...slots];
+        incomingChars.forEach((char, offset) => {
+            nextSlots[index + offset] = char;
+        });
+        setCode(nextSlots);
+        const nextFocusIndex = Math.min(index + incomingChars.length, length - 1);
+        focusInput(nextFocusIndex);
+    };
+    const handleKeyDown = (index, event) => {
+        if (disabled)
+            return;
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            focusInput(index - 1);
+            return;
+        }
+        if (event.key === "ArrowRight") {
+            event.preventDefault();
+            focusInput(index + 1);
+            return;
+        }
+        if (event.key !== "Backspace")
+            return;
+        if (slots[index]) {
+            event.preventDefault();
+            const nextSlots = [...slots];
+            nextSlots[index] = "";
+            setCode(nextSlots);
+            return;
+        }
+        if (index > 0) {
+            event.preventDefault();
+            const nextSlots = [...slots];
+            nextSlots[index - 1] = "";
+            setCode(nextSlots);
+            focusInput(index - 1);
+        }
+    };
+    return (_jsx("div", { className: cn("flex items-center gap-3", className), ref: containerRef, children: slots.map((slot, index) => (_jsx("input", { ref: (element) => {
+                inputRefs.current[index] = element;
+            }, type: "text", inputMode: inputMode, autoComplete: index === 0 ? "one-time-code" : "off", value: slot, maxLength: 1, disabled: disabled, autoFocus: autoFocus && index === 0, "aria-invalid": invalid || undefined, className: cn("h-14 w-[46px] rounded-[8px] text-input-filled-text border bg-transparent text-center text-2xl font-semibold outline-none transition-all duration-200", "border-input-default-stroke focus:border-input-active-stroke", "disabled:cursor-not-allowed disabled:opacity-50", invalid && "border-input-error focus:border-input-error", inputClassName), onFocus: (event) => {
+                event.target.select();
+            }, onBlur: (event) => {
+                var _a;
+                const nextFocused = event.relatedTarget;
+                const stillInside = nextFocused && ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(nextFocused));
+                // Notify RHF only when focus leaves the whole OTP control.
+                if (!stillInside) {
+                    onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+                }
+            }, onChange: (event) => handleInputChange(index, event.target.value), onPaste: (event) => handlePaste(index, event), onKeyDown: (event) => handleKeyDown(index, event) }, index))) }));
+});
+OtpInput.displayName = "OtpInput";
+export default OtpInput;

package/dist/components/OtpInput/OtpInput.stories.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import * as yup from "yup";
+import Button from "@/components/Button/Button";
+import { Field } from "@/components/Form/Field";
+import { Form } from "@/components/Form/Form";
+import OtpInput from "./OtpInput";
+import { OtpInputGroup } from "./OtpInputGroup";
+const meta = {
+    title: "Components/OtpInput",
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+export const Basic = {
+    render: () => {
+        const [value, setValue] = useState("");
+        const [completed, setCompleted] = useState("-");
+        return (_jsx("div", { className: "w-[420px] max-w-full rounded-md bg-bg-bg2 p-4", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(OtpInput, { value: value, onChange: setValue, onComplete: (code) => setCompleted(code) }), _jsxs("div", { className: "text-xs text-text-g-contrast-medium", children: ["Value: ", value || "-"] }), _jsxs("div", { className: "text-xs text-text-g-contrast-medium", children: ["Last completed: ", completed] })] }) }));
+    },
+};
+const otpSchema = yup.object({
+    otp: yup
+        .string()
+        .required("OTP is required")
+        .length(6, "OTP must be 6 digits"),
+});
+export const WithFormField = {
+    render: () => {
+        return (_jsx("div", { className: "w-[420px] max-w-full rounded-md bg-bg-bg2 p-4", children: _jsx(Form, { defaultValues: { otp: "" }, validationSchema: otpSchema, mode: "onTouched", className: "flex flex-col gap-3", onSubmit: (values) => {
+                    // eslint-disable-next-line no-console
+                    console.log("OTP submit:", values);
+                }, children: ({ formState }) => (_jsxs(_Fragment, { children: [_jsx(Field, { name: "otp", component: OtpInput, componentProps: {
+                                autoFocus: true,
+                            }, invalidPropName: "invalid" }), _jsx(Button, { type: "submit", disabled: !formState.isValid || formState.isSubmitting, isLoading: formState.isSubmitting, children: "Verify OTP" })] })) }) }));
+    },
+};
+export const GroupWithLabelAndError = {
+    render: () => {
+        const [value, setValue] = useState("");
+        const isInvalid = value.length > 0 && value.length < 6;
+        return (_jsx("div", { className: "w-[420px] max-w-full rounded-md bg-bg-bg2 p-4", children: _jsx(OtpInputGroup, { id: "otp-group", label: "Verification code", required: true, value: value, onChange: setValue, helperText: "Enter the 6-digit code from your authenticator app", error: isInvalid, errorMessage: isInvalid ? "OTP must be 6 digits" : undefined, autoFocus: true }) }));
+    },
+};
+export const GroupWithFormField = {
+    render: () => {
+        return (_jsx("div", { className: "w-[420px] max-w-full rounded-md bg-bg-bg2 p-4", children: _jsx(Form, { defaultValues: { otp: "" }, validationSchema: otpSchema, mode: "onTouched", className: "flex flex-col gap-3", onSubmit: (values) => {
+                    // eslint-disable-next-line no-console
+                    console.log("OTP group submit:", values);
+                }, children: ({ formState }) => (_jsxs(_Fragment, { children: [_jsx(Field, { name: "otp", component: OtpInputGroup, componentProps: {
+                                id: "otp-field-group",
+                                label: "Verification code",
+                                helperText: "Paste is supported",
+                                required: true,
+                                autoFocus: true,
+                            }, invalidPropName: "error" }), _jsx(Button, { type: "submit", disabled: !formState.isValid || formState.isSubmitting, isLoading: formState.isSubmitting, children: "Verify OTP" })] })) }) }));
+    },
+};