@harjs/react-ui 1.1.5 → 1.1.6

package/dist/components/form/date-picker/index.js

@@ -6,21 +6,9 @@ import Button from "../button";
 import Alert from "../../feedback/alert";
 import ReactDOM from "react-dom";
 import DATE from "./DATE";
-const weekdays = ["Pzt", "Sal", "Çar", "Per", "Cum", "Cmt", "Paz"];
-const months = [
-    { value: 0, text: "Ocak" },
-    { value: 1, text: "Şubat" },
-    { value: 2, text: "Mart" },
-    { value: 3, text: "Nisan" },
-    { value: 4, text: "Mayıs" },
-    { value: 5, text: "Haziran" },
-    { value: 6, text: "Temmuz" },
-    { value: 7, text: "Ağustos" },
-    { value: 8, text: "Eylül" },
-    { value: 9, text: "Ekim" },
-    { value: 10, text: "Kasım" },
-    { value: 11, text: "Aralık" },
-];
+import DatePickerTR from "../../../libs/core/application/locales/date-picker/tr";
+import DatePickerEN from "../../../libs/core/application/locales/date-picker/en";
+import { useTranslation } from "@harjs/translation";
 const DatePicker = ({ variant, color, onChange, config, validation, ...attributes }) => {
     // refs
     const _arCalendar = useRef(null);
@@ -57,6 +45,33 @@ const DatePicker = ({ variant, color, onChange, config, validation, ...attribute
     const [selectedDay, setSelectedDay] = useState(_currentDate.getDate());
     const [selectedHours, setSelectedHours] = useState(_currentDate.getHours());
     const [selectedMinutes, setSelectedMinutes] = useState(_currentDate.getMinutes());
+    const { t } = useTranslation(String(config?.locale ?? "tr"), {
+        tr: { ...DatePickerTR },
+        en: { ...DatePickerEN },
+    });
+    const weekdays = [
+        t("DatePicker.Mon"),
+        t("DatePicker.Tue"),
+        t("DatePicker.Wed"),
+        t("DatePicker.Thu"),
+        t("DatePicker.Fri"),
+        t("DatePicker.Sat"),
+        t("DatePicker.Sun"),
+    ];
+    const months = [
+        { value: 0, text: t("DatePicker.January") },
+        { value: 1, text: t("DatePicker.February") },
+        { value: 2, text: t("DatePicker.March") },
+        { value: 3, text: t("DatePicker.April") },
+        { value: 4, text: t("DatePicker.May") },
+        { value: 5, text: t("DatePicker.June") },
+        { value: 6, text: t("DatePicker.July") },
+        { value: 7, text: t("DatePicker.August") },
+        { value: 8, text: t("DatePicker.September") },
+        { value: 9, text: t("DatePicker.October") },
+        { value: 10, text: t("DatePicker.November") },
+        { value: 11, text: t("DatePicker.December") },
+    ];
     // methods
     const handleClickOutSide = (event) => {
         const target = event.target;
@@ -134,7 +149,7 @@ const DatePicker = ({ variant, color, onChange, config, validation, ...attribute
         onChange(inputDate.toISOString());
     };
     const okayButton = () => {
-        return (React.createElement(Button, { variant: "borderless", color: "green", onClick: () => handleOk() }, "Tamam"));
+        return (React.createElement(Button, { variant: "borderless", color: "green", onClick: () => handleOk() }, t("DatePicker.Button.Okay")));
     };
     const closeCalendar = () => {
         const { year, month, day, hours, minutes } = DATE.Parse(String(attributes.value), config?.isClock);
@@ -346,10 +361,10 @@ const DatePicker = ({ variant, color, onChange, config, validation, ...attribute
                                 } })))),
                 React.createElement("div", { className: "content" }, !isNaN(_month.current) && !isNaN(_year.current) ? (React.createElement("div", { className: "calendar" },
                     React.createElement("div", { className: "weekdays" }, weekdays.map((weekday, index) => (React.createElement("span", { key: index }, weekday)))),
-                    React.createElement("div", { className: "days" }, calendarDays))) : (React.createElement(Alert, { status: "warning" }, "Ay veya y\u0131l se\u00E7imi yapman\u0131z gerekmektedir."))),
+                    React.createElement("div", { className: "days" }, calendarDays))) : (React.createElement(Alert, { status: "warning" }, t("DatePicker.Alert.1.Text")))),
                 config?.isFooterButton && (React.createElement("div", { ref: _calendarFooter, className: "footer" },
                     React.createElement("div", null,
-                        React.createElement(Button, { variant: "borderless", onClick: () => setNowButton() }, "\u015Eimdi")),
+                        React.createElement(Button, { variant: "borderless", onClick: () => setNowButton() }, t("DatePicker.Button.Now"))),
                     React.createElement("div", null, !config?.isClock && okayButton()))),
                 config?.isClock && (React.createElement("div", { ref: _arClock, className: "clock" },
                     React.createElement("div", { ref: _clockHeader, className: "header" },

package/dist/components/form/input/IProps.d.ts

@@ -1,12 +1,6 @@
-import IButtonProps from "../button/IProps";
-import { Variants } from "../../../libs/infrastructure/types";
-import { IBorderProps, IColorProps, IIconProps, IUpperCaseProps, IValidationProps, IVariantProps } from "../../../libs/infrastructure/types/IGlobalProps";
-interface IProps extends IVariantProps, IColorProps, IBorderProps, IIconProps, IUpperCaseProps, IValidationProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "color"> {
-    button?: Omit<IButtonProps, "size" | "shape" | "position" | "fullWidth">;
-    addon?: {
-        variant?: Variants;
-        before?: string | number;
-        after?: string | number;
-    };
+import { IBorderProps, IChildrenProps, IColorProps, ISizeProps, IUpperCaseProps, IValidationProps, IVariantProps } from "../../../libs/infrastructure/types/IGlobalProps";
+interface IProps extends IChildrenProps, IVariantProps<{
+    component: "input";
+}>, IColorProps, IBorderProps, ISizeProps, IUpperCaseProps, IValidationProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "color" | "size"> {
 }
 export default IProps;

package/dist/components/form/input/decimal/Decimal.js

@@ -1,8 +1,12 @@
 "use client";
 import React, { useRef, useState, useEffect, useMemo } from "react";
 import Input from "..";
-const Decimal = ({ variant, color, name, value, onChange, placeholder, validation, disabled, locale = "tr-TR", }) => {
+import Utils from "../../../../libs/infrastructure/shared/Utils";
+const Decimal = ({ variant, color, validation, locale = "tr-TR", ...attributes }) => {
+    // refs
     const _input = useRef(null);
+    const _lastEmitted = useRef(null);
+    // states
     const [_value, setValue] = useState("");
     // methods
     const decimalSeparator = useMemo(() => {
@@ -11,44 +15,44 @@ const Decimal = ({ variant, color, name, value, onChange, placeholder, validatio
     }, [locale]);
     const handleChange = (event) => {
         let inputValue = event.target.value;
-        // Locale’a göre izin verilen karakterler. (rakam, decimal, -)
         const regex = new RegExp(`[^0-9\\${decimalSeparator}-]`, "g");
         inputValue = inputValue.replace(regex, "");
-        // Sadece başta negatif işarete izin ver.
         if (inputValue.includes("-")) {
             inputValue = (inputValue.startsWith("-") ? "-" : "") + inputValue.replace(/-/g, "");
         }
-        // Tek decimal separator’a izin ver.
         const parts = inputValue.split(decimalSeparator);
         if (parts.length > 2) {
             inputValue = parts[0] + decimalSeparator + parts.slice(1).join("");
         }
         setValue(inputValue);
-        // Parent’a normalize edilmiş "." decimal gönder.
         const normalized = inputValue.replace(decimalSeparator, ".");
-        onChange?.({
+        _lastEmitted.current = normalized; // <-- ekle
+        attributes.onChange?.({
             ...event,
-            target: {
-                ...event.target,
-                name,
-                value: normalized,
-            },
+            target: { ...event.target, value: normalized },
         });
     };
     // useEffects
     useEffect(() => {
-        if (value === undefined || value === null || value === "") {
+        if (Utils.IsNullOrEmpty(attributes.value)) {
             setValue("");
             return;
         }
-        const stringValue = String(value);
+        const stringValue = String(attributes.value);
+        // Parent, az önce gönderdiğimiz değeri (farklı formatta da olsa) aynen
+        // yansıtıyorsa, kullanıcının henüz yazmakta olduğu local state'i ezme.
+        if (_lastEmitted.current !== null &&
+            !Number.isNaN(Number(stringValue)) &&
+            Number(stringValue) === Number(_lastEmitted.current)) {
+            return;
+        }
         const localized = stringValue.replace(".", decimalSeparator);
         setValue(localized);
-    }, [value, decimalSeparator]);
-    return (React.createElement(Input, { ref: _input, name: name, variant: variant, color: color, type: "text", inputMode: "decimal", value: _value, onChange: (e) => {
-            if (disabled)
+    }, [attributes.value, decimalSeparator]);
+    return (React.createElement(Input, { ref: _input, variant: variant, color: color, type: "text", inputMode: "decimal", ...attributes, value: _value, onChange: (e) => {
+            if (attributes.disabled)
                 return;
             handleChange(e);
-        }, placeholder: placeholder, validation: validation, disabled: disabled }));
+        }, validation: validation }));
 };
 export default Decimal;

package/dist/components/form/input/decimal/IProps.d.ts

@@ -1,8 +1,6 @@
-import { IBorderProps, IColorProps, IDisabledProps, IPlaceholderProps, IUpperCaseProps, IValidationProps, IVariantProps } from "../../../../libs/infrastructure/types/IGlobalProps";
-interface IProps extends IVariantProps, IColorProps, IBorderProps, IUpperCaseProps, IValidationProps, IPlaceholderProps, IDisabledProps {
-    name: string;
-    value: string | number | readonly string[] | undefined;
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+import { ComponentProps } from "react";
+import Input from "..";
+interface IProps extends ComponentProps<typeof Input> {
     locale?: Intl.LocalesArgument;
 }
 export default IProps;

package/dist/components/form/input/formatted-decimal/FormattedDecimal.js

@@ -2,7 +2,8 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import Input from "..";
 import NUMBER from "../../../../libs/infrastructure/shared/NUMBER";
-const FormattedDecimal = ({ variant, color, name, value, onChange, locale = "tr-TR", digits, placeholder, validation, disabled, }) => {
+import Utils from "../../../../libs/infrastructure/shared/Utils";
+const FormattedDecimal = ({ variant, color, locale = "tr-TR", digits, validation, ...attributes }) => {
     const _input = useRef(null);
     const [_value, setValue] = useState("");
     // methods
@@ -47,27 +48,27 @@ const FormattedDecimal = ({ variant, color, name, value, onChange, locale = "tr-
         const numericValue = isNaN(parsed) ? 0 : parsed;
         const formatted = value === "" ? "" : getFormatter.format(numericValue);
         setValue(formatted);
-        onChange?.({
-            ...event,
-            target: {
-                ...event.target,
-                name,
-                value: normalized,
-            },
-        });
+        // attributes.onChange?.({
+        //   ...event,
+        //   target: {
+        //     ...event.target,
+        //     // ...attributes.onChange,
+        //     value: normalized,
+        //   },
+        // });
     };
     // useEffects
     useEffect(() => {
-        if (value === undefined || value === null || value === "") {
+        if (Utils.IsNullOrEmpty(attributes.value)) {
             setValue("");
             return;
         }
-        setValue(getFormatter.format(Number(value)));
-    }, [value, getFormatter]);
-    return (React.createElement(Input, { ref: _input, name: name, variant: variant, color: color, value: _value, type: "text", inputMode: "decimal", onChange: (event) => {
-            if (disabled)
+        setValue(getFormatter.format(Number(attributes.value)));
+    }, [attributes.value, getFormatter]);
+    return (React.createElement(Input, { ref: _input, variant: variant, color: color, ...attributes, value: _value, type: "text", inputMode: "decimal", onChange: (event) => {
+            if (attributes.disabled)
                 return;
             handleChange(event);
-        }, onClick: handleClick, onKeyUp: handleKeyUp, placeholder: placeholder, validation: validation, disabled: disabled }));
+        }, onClick: handleClick, onKeyUp: handleKeyUp, validation: validation }));
 };
 export default FormattedDecimal;

package/dist/components/form/input/formatted-decimal/IProps.d.ts

@@ -1,8 +1,6 @@
-import { IBorderProps, IColorProps, IDisabledProps, IPlaceholderProps, IUpperCaseProps, IValidationProps, IVariantProps } from "../../../../libs/infrastructure/types/IGlobalProps";
-interface IProps extends IVariantProps, IColorProps, IBorderProps, IUpperCaseProps, IValidationProps, IPlaceholderProps, IDisabledProps {
-    name: string;
-    value: string | number | readonly string[] | undefined;
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+import { ComponentProps } from "react";
+import Input from "..";
+interface IProps extends ComponentProps<typeof Input> {
     locale?: Intl.LocalesArgument;
     digits?: {
         minimum?: number;

package/dist/components/form/input/index.d.ts

@@ -1,15 +1,21 @@
-import React from "react";
+import React, { ComponentProps } from "react";
 import "../../../assets/css/components/form/input/styles.css";
 import IProps from "./IProps";
-import Otp from "./otp/Otp";
 import FormattedDecimal from "./formatted-decimal/FormattedDecimal";
 import Phone from "./phone/Phone";
 import Decimal from "./decimal/Decimal";
+import { IChildrenProps } from "../../../libs/infrastructure/types/IGlobalProps";
+import Pin from "./pin/Pin";
 interface InputCompound extends React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLInputElement>> {
+    AddonBefore: ({ children }: IChildrenProps) => React.JSX.Element;
+    AddonAfter: ({ children }: IChildrenProps) => React.JSX.Element;
+    Icon: ({ children, position }: ComponentProps<typeof Input> & {
+        position: "start" | "end";
+    }) => React.JSX.Element;
     Decimal: typeof Decimal;
     FormattedDecimal: typeof FormattedDecimal;
+    Pin: typeof Pin;
     Phone: typeof Phone;
-    Otp: typeof Otp;
 }
 declare const Input: InputCompound;
 export default Input;

package/dist/components/form/input/index.js

@@ -1,38 +1,27 @@
 "use client";
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import React, { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from "react";
 import "../../../assets/css/components/form/input/styles.css";
-import Button from "../button";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import { ARIcon } from "../../icons";
-import Otp from "./otp/Otp";
 import FormattedDecimal from "./formatted-decimal/FormattedDecimal";
 import Phone from "./phone/Phone";
 import Decimal from "./decimal/Decimal";
-const BaseInput = forwardRef(({ variant = "outlined", color = "light", icon, border = { radius: "sm" }, button, addon, upperCase, validation, ...attributes }, ref) => {
+import Pin from "./pin/Pin";
+const BaseInput = forwardRef(({ children, variant = "outlined", color = "gray", border = { radius: "4" }, size = "md", upperCase, validation, ...attributes }, ref) => {
     // refs
     const _innerRef = useRef(null);
     const _label = useRef(null);
     // states
     const [value, setValue] = useState("");
+    const [labelWidth, setLabelWidth] = useState(0);
     // hooks
     // Dışarıdan gelen ref'i _innerRef'e bağla.
     useImperativeHandle(ref, () => _innerRef.current);
     // variables
-    const _wrapperClassName = ["ar-input-wrapper"];
-    const _inputClassName = [];
-    const _addonBeforeClassName = ["addon-before"];
-    const _addonAfterClassName = ["addon-after"];
-    _inputClassName.push(...Utils.GetClassName(variant, undefined, !Utils.IsNullOrEmpty(validation?.text) ? "red" : color, border, undefined, icon, attributes.className));
-    // addon className
-    if (addon) {
-        _wrapperClassName.push("addon");
-        _addonBeforeClassName.push(`${addon.variant || "filled"}`);
-        _addonBeforeClassName.push(`${status}`);
-        _addonAfterClassName.push(`${addon.variant || "filled"}`);
-        _addonAfterClassName.push(`${status}`);
-        _addonBeforeClassName.push(`border-radius-${border.radius}`);
-        _addonAfterClassName.push(`border-radius-${border.radius}`);
-    }
+    const _wrapperClassName = ["har-input-wrapper"];
+    _wrapperClassName.push(...Utils.GetClassName(variant, undefined, !Utils.IsNullOrEmpty(validation?.text) ? "red" : color, border, size, undefined, attributes.className));
+    if (attributes.disabled)
+        _wrapperClassName.push("disabled");
     // methods
     const handleNumberChange = (delta) => {
         const current = Number(value) || 0;
@@ -49,6 +38,40 @@ const BaseInput = forwardRef(({ variant = "outlined", color = "light", icon, bor
             },
         });
     };
+    const renderIcon = () => {
+        const iconElements = React.Children.toArray(children).filter((child) => {
+            return React.isValidElement(child) && child.type === Input.Icon;
+        });
+        if (iconElements.length === 0)
+            return null;
+        return iconElements.map((child) => {
+            if (React.isValidElement(child))
+                return React.cloneElement(child);
+            return child;
+        });
+    };
+    const renderAddon = (position) => {
+        const addons = React.Children.toArray(children).filter((child) => {
+            return (React.isValidElement(child) && child.type === (position === "before" ? Input.AddonBefore : Input.AddonAfter));
+        });
+        if (addons.length === 0)
+            return null;
+        return addons.map((child, index) => {
+            const isFirst = index === 0;
+            const isLast = index === addons.length - 1 && addons.length > 1;
+            const isMiddle = !isFirst && !isLast;
+            if (React.isValidElement(child))
+                return (React.createElement("div", { className: [
+                        `addon-${position}`,
+                        position === "after" && isFirst && addons.length > 1 ? "n-first" : "first",
+                        isMiddle && "middle",
+                        isLast && "last",
+                    ]
+                        .filter(Boolean)
+                        .join(" ") }, React.cloneElement(child)));
+            return child;
+        });
+    };
     // Özel büyük harfe dönüştürme işlevi.
     const convertToUpperCase = (str) => {
         return str
@@ -71,15 +94,21 @@ const BaseInput = forwardRef(({ variant = "outlined", color = "light", icon, bor
         if (attributes.value !== undefined)
             setValue(attributes.value ?? "");
     }, [attributes.value]);
+    useLayoutEffect(() => {
+        if (_label.current) {
+            const width = _label.current.getBoundingClientRect().width;
+            setLabelWidth(width);
+        }
+    }, [value, attributes.placeholder]);
     return (React.createElement("div", { className: _wrapperClassName.map((c) => c).join(" ") },
-        addon?.before && React.createElement("span", { className: _addonBeforeClassName.map((c) => c).join(" ") }, addon?.before),
-        React.createElement("div", { className: "ar-input" },
-            icon?.element && React.createElement("span", { className: "icon-element" }, icon.element),
-            attributes.placeholder && (React.createElement("label", { ref: _label, className: value ? "visible" : "hidden", ...(value ? { style: { maxWidth: _innerRef.current?.getBoundingClientRect().width } } : {}) },
+        renderAddon("before"),
+        React.createElement("div", { className: "har-input" },
+            renderIcon() && React.createElement("div", { className: "icon-element" }, renderIcon()),
+            attributes.placeholder && (React.createElement("label", { ref: _label, className: value ? "visible" : "hidden", ...(value ? { style: { maxWidth: labelWidth } } : {}) },
                 validation && "* ",
                 attributes.placeholder)),
-            React.createElement("div", { className: "input" },
-                React.createElement("input", { ref: _innerRef, ...attributes, type: attributes.type === "number" ? "text" : attributes.type, placeholder: `${validation ? "* " : ""}${attributes.placeholder ?? ""}`, value: value ?? attributes.value, size: attributes.size || 20, className: _inputClassName.map((c) => c).join(" "), ...(attributes.type === "number"
+            React.createElement("div", { className: "input", style: { width: attributes.width } },
+                React.createElement("input", { ref: _innerRef, ...attributes, type: attributes.type === "number" ? "text" : attributes.type, placeholder: `${validation ? "* " : ""}${attributes.placeholder ?? ""}`, value: value ?? attributes.value, ...(attributes.type === "number"
                         ? {
                             onKeyDown: (event) => {
                                 const allowedKeys = ["Backspace", "Tab", "ArrowLeft", "ArrowRight", "Delete"];
@@ -88,24 +117,23 @@ const BaseInput = forwardRef(({ variant = "outlined", color = "light", icon, bor
                                     event.preventDefault();
                             },
                         }
-                        : {}), ...(value
+                        : {}), ...(value && labelWidth > 0 && attributes.placeholder
                         ? {
                             style: {
                                 ...attributes.style,
                                 clipPath: `polygon(
-                            -15px 0,
-                            10px -5px,
-                            10px 5px,
-                            calc(${_label.current?.getBoundingClientRect().width}px + 7px) 5px,
-                            calc(${_label.current?.getBoundingClientRect().width}px + 7px) -5px,
-                            100% -70px,
-                            calc(100% + 5px) calc(100% + 5px),
-                            -5px calc(100% + 5px)
-                          )`,
+                                        -15px 0,
+                                        10px -5px,
+                                        10px 5px,
+                                        calc(${labelWidth}px + 7px) 5px,
+                                        calc(${labelWidth}px + 7px) -5px,
+                                        100% -70px,
+                                        calc(100% + 5px) calc(100% + 5px),
+                                        -5px calc(100% + 5px)
+                                      )`,
                             },
                         }
                         : { style: { ...attributes.style } }), onChange: (event) => {
-                        // Disabled gelmesi durumunda işlem yapmasına izin verme...
                         if (attributes.disabled)
                             return;
                         (() => {
@@ -139,14 +167,18 @@ const BaseInput = forwardRef(({ variant = "outlined", color = "light", icon, bor
                         React.createElement(ARIcon, { icon: "ChevronUp", size: 12, fill: "var(--gray-500)" })),
                     React.createElement("span", { onClick: () => handleNumberChange(-1) },
                         React.createElement(ARIcon, { icon: "ChevronDown", size: 12, fill: "var(--gray-500)" }))))),
-            validation?.text && React.createElement("span", { className: "validation" }, validation.text)),
-        addon?.after && React.createElement("span", { className: _addonAfterClassName.map((c) => c).join(" ") }, addon?.after),
-        button && React.createElement(Button, { ...button, border: { radius: border.radius }, disabled: attributes.disabled })));
+            validation?.text && React.createElement("span", { className: "har-validation-text" }, validation.text)),
+        renderAddon("after")));
 });
 const Input = BaseInput;
+Input.AddonBefore = ({ children }) => React.createElement(React.Fragment, null, children);
+Input.AddonAfter = ({ children }) => React.createElement(React.Fragment, null, children);
+Input.Icon = ({ children, position, ...attributes }) => {
+    return (React.createElement("span", { ...attributes, className: `icon ${position} ${attributes.className} ${attributes.onClick ? "cursor-pointer" : "cursor-text"}` }, children));
+};
 Input.Decimal = Decimal;
 Input.FormattedDecimal = FormattedDecimal;
 Input.Phone = Phone;
-Input.Otp = Otp;
+Input.Pin = Pin;
 BaseInput.displayName = "Input";
 export default Input;

package/dist/components/form/input/phone/IProps.d.ts

@@ -1,6 +1,7 @@
-import { IBorderProps, IColorProps, IValidationProps, IVariantProps } from "../../../../libs/infrastructure/types/IGlobalProps";
 import { Option } from "../../../../libs/infrastructure/types";
-interface IProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "color">, IVariantProps, IColorProps, IBorderProps, IValidationProps {
+import { ComponentProps } from "react";
+import Input from "..";
+interface IProps extends ComponentProps<typeof Input> {
     options?: Option[];
     values: {
         option?: string;

package/dist/components/form/input/phone/Phone.js

@@ -26,16 +26,20 @@ const Phone = ({ variant, color, options, values, onSelected, validation, ...att
         setSelected(options?.find((option) => option.value === values.option));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [values.value, values.option, optionsKey]);
-    return (React.createElement("div", { className: "ar-input-phone-wrapper" },
-        options && (React.createElement(Select, { style: { width: 130 }, variant: "outlined", color: "light", options: options, value: selected, onChange: (option) => {
-                onSelected?.(option);
-                setSelected(option);
-            }, validation: validation, config: { validation: { text: "hidden" } } })),
-        React.createElement(Input, { ref: _input, ...attributes, ...(!options ? { style: { borderRadius: "var(--border-radius-sm)" } } : {}), variant: variant, color: color, value: PHONE.FormatByMask(selected?.value, _value), type: "tel", inputMode: "decimal", onChange: (event) => {
-                if (attributes.disabled)
-                    return;
-                setValue(event.target.value);
-                attributes.onChange?.(event);
-            }, onClick: handleClick, validation: validation })));
+    return (React.createElement(Input, { ref: _input, ...attributes, ...(!options ? { style: { borderRadius: "var(--radius-4)" } } : {}), variant: variant, color: color, value: PHONE.FormatByMask(selected?.value, _value), type: "tel", inputMode: "decimal", onChange: (event) => {
+            if (attributes.disabled)
+                return;
+            setValue(event.target.value);
+            attributes.onChange?.(event);
+        }, onClick: handleClick, validation: validation },
+        React.createElement(Input.AddonBefore, null,
+            React.createElement(Select
+            // style={{ width: 130 }}
+            , { 
+                // style={{ width: 130 }}
+                variant: "outlined", color: "gray", options: options ?? [], value: selected, onChange: (option) => {
+                    onSelected?.(option);
+                    setSelected(option);
+                }, validation: validation, config: { validation: { text: "hidden" } } }))));
 };
 export default Phone;

package/dist/components/form/input/pin/IProps.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps } from "react";
+import Input from "..";
+interface IProps extends ComponentProps<typeof Input> {
+    character: number;
+}
+export default IProps;

package/dist/components/form/input/pin/IProps.js

@@ -0,0 +1 @@
+export {};

package/dist/components/form/input/pin/Pin.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import IProps from "./IProps";
+declare const Pin: {
+    ({ character, ...attributes }: IProps): React.JSX.Element;
+    displayName: string;
+};
+export default Pin;

package/dist/components/form/input/{otp/Otp.js → pin/Pin.js}

@@ -1,7 +1,8 @@
 "use client";
 import React, { useRef, useCallback, useState, useEffect } from "react";
 import Input from "..";
-const Otp = ({ character, onChange, ...attributes }) => {
+import Flex from "../../../data-display/grid-system/flex/Flex";
+const Pin = ({ character, ...attributes }) => {
     // refs
     const _inputs = useRef([]);
     // states
@@ -10,7 +11,7 @@ const Otp = ({ character, onChange, ...attributes }) => {
     const triggerChange = (newValues, event) => {
         setOtpValues(newValues);
         const combinedValue = newValues.join("");
-        onChange?.({
+        attributes.onChange?.({
             ...event,
             target: {
                 ...event.currentTarget,
@@ -84,7 +85,7 @@ const Otp = ({ character, onChange, ...attributes }) => {
                 setTimeout(() => currentInput?.select(), 0);
             }
         }
-    }, [character, otpValues, attributes.disabled, onChange, attributes.name]);
+    }, [character, otpValues, attributes.disabled, attributes.onChange, attributes.name]);
     const handlePaste = useCallback((index) => (event) => {
         event.preventDefault();
         if (attributes.disabled)
@@ -113,10 +114,9 @@ const Otp = ({ character, onChange, ...attributes }) => {
     useEffect(() => {
         setOtpValues(Array(character).fill(""));
     }, [character]);
-    return (React.createElement("div", { className: "ar-input-otp-wrapper" }, Array.from({ length: character }, (_, index) => (React.createElement("span", { key: index },
-        React.createElement(Input, { ref: (el) => {
-                _inputs.current[index] = el;
-            }, ...attributes, value: otpValues[index], onChange: () => { }, onKeyDown: handleKeyDown(index), onPaste: handlePaste(index), onFocus: (event) => event.target.select(), onClick: handleClick, size: 1, maxLength: 1, placeholder: undefined, autoFocus: index === 0, autoComplete: "off" }))))));
+    return (React.createElement(Flex, { gap: "var(--space-10)", alignItems: "center", justifyContent: "center" }, Array.from({ length: character }, (_, index) => (React.createElement(Input, { ref: (el) => {
+            _inputs.current[index] = el;
+        }, key: index, ...attributes, className: `pin-input ${attributes.className ?? ""}`, value: otpValues[index], onChange: () => { }, onKeyDown: handleKeyDown(index), onPaste: handlePaste(index), onFocus: (event) => event.target.select(), onClick: handleClick, maxLength: 1, ...(otpValues[index] === "" ? { placeholder: attributes.placeholder ?? "○" } : {}), ...(attributes.autoFocus === true ? { autoFocus: index === 0 } : {}), autoComplete: "off", inputMode: "numeric" })))));
 };
-Otp.displayName = "Input.Otp";
-export default Otp;
+Pin.displayName = "Input.Otp";
+export default Pin;

package/dist/components/form/radio/IProps.d.ts

@@ -1,7 +1,7 @@
-import { IBorderProps, IColorProps, IIconProps, ISizeProps, IUpperCaseProps, IValidationProps, IVariantProps } from "../../../libs/infrastructure/types/IGlobalProps";
+import { ComponentProps } from "react";
+import Checkbox from "../checkbox";
 import { Color } from "../../../libs/infrastructure/types";
-interface IProps extends IVariantProps, IColorProps, IBorderProps, IIconProps, ISizeProps, IUpperCaseProps, IValidationProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size" | "color"> {
-    label?: string;
+interface IProps extends Omit<ComponentProps<typeof Checkbox>, "border"> {
     trace?: {
         color: Color;
     };

package/dist/components/form/radio/index.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
 import IProps from "./IProps";
-import "../../../assets/css/components/form/radio/radio.css";
-declare const Radio: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLInputElement>>;
+declare const Radio: React.ForwardRefExoticComponent<Omit<IProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default Radio;