@harjs/react-ui 1.0.0

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

@@ -0,0 +1,8 @@
+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>;
+    locale?: Intl.LocalesArgument;
+}
+export default IProps;

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

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

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

@@ -0,0 +1,4 @@
+import React from "react";
+import IProps from "./IProps";
+declare const FormattedDecimal: React.FC<IProps>;
+export default FormattedDecimal;

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

@@ -0,0 +1,73 @@
+"use client";
+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, }) => {
+    const _input = useRef(null);
+    const [_value, setValue] = useState("");
+    // methods
+    const getSeparators = (locale) => {
+        const parts = new Intl.NumberFormat(locale).formatToParts(1000.1);
+        const group = parts.find((p) => p.type === "group")?.value ?? ",";
+        const decimal = parts.find((p) => p.type === "decimal")?.value ?? ".";
+        return { group, decimal };
+    };
+    const getFormatter = useMemo(() => NUMBER.Decimal(locale, digits), [locale, digits]);
+    const handleClick = () => {
+        const input = _input.current;
+        if (!input)
+            return;
+        const caret = input.selectionStart ?? 0;
+        input.setSelectionRange(caret, caret + 1);
+    };
+    const handleKeyUp = (event) => {
+        const input = _input.current;
+        if (!input)
+            return;
+        const caret = input.selectionStart ?? 0;
+        if (event.code === "ArrowRight") {
+            input.setSelectionRange(caret, caret + 1);
+        }
+        else if (event.code === "ArrowLeft" && caret > 0) {
+            input.setSelectionRange(caret - 1, caret);
+        }
+        else if (["ArrowUp", "ArrowDown"].includes(event.code)) {
+            input.setSelectionRange(caret, caret + 1);
+        }
+    };
+    const handleChange = (event) => {
+        let { value } = event.target;
+        const { group, decimal } = getSeparators(locale);
+        // Locale’a göre izin verilen karakterleri temizle.
+        const regex = new RegExp(`[^0-9\\${group}\\${decimal}]`, "g");
+        value = value.replace(regex, "");
+        // Normalize et (decimal her zaman "." olacak şekilde)
+        let normalized = value.replace(new RegExp(`\\${group}`, "g"), "").replace(decimal, ".");
+        const parsed = parseFloat(normalized);
+        const numericValue = isNaN(parsed) ? 0 : parsed;
+        const formatted = value === "" ? "" : getFormatter.format(numericValue);
+        setValue(formatted);
+        onChange?.({
+            ...event,
+            target: {
+                ...event.target,
+                name,
+                value: normalized,
+            },
+        });
+    };
+    // useEffects
+    useEffect(() => {
+        if (value === undefined || value === null || 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)
+                return;
+            handleChange(event);
+        }, onClick: handleClick, onKeyUp: handleKeyUp, placeholder: placeholder, validation: validation, disabled: disabled }));
+};
+export default FormattedDecimal;

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

@@ -0,0 +1,12 @@
+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>;
+    locale?: Intl.LocalesArgument;
+    digits?: {
+        minimum?: number;
+        maximum?: number;
+    };
+}
+export default IProps;

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

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

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

@@ -0,0 +1,15 @@
+import React 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";
+interface InputCompound extends React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLInputElement>> {
+    Decimal: typeof Decimal;
+    FormattedDecimal: typeof FormattedDecimal;
+    Phone: typeof Phone;
+    Otp: typeof Otp;
+}
+declare const Input: InputCompound;
+export default Input;

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

@@ -0,0 +1,152 @@
+"use client";
+import React, { forwardRef, useEffect, useImperativeHandle, 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) => {
+    // refs
+    const _innerRef = useRef(null);
+    const _label = useRef(null);
+    // states
+    const [value, setValue] = useState("");
+    // 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}`);
+    }
+    // methods
+    const handleNumberChange = (delta) => {
+        const current = Number(value) || 0;
+        const newValue = current + delta;
+        const dataset = _innerRef.current?.dataset ?? {};
+        setValue(newValue);
+        attributes.onChange?.({
+            target: {
+                id: attributes.id ?? "",
+                name: attributes.name ?? "",
+                value: String(newValue),
+                type: attributes.type ?? "number",
+                dataset: dataset,
+            },
+        });
+    };
+    // Özel büyük harfe dönüştürme işlevi.
+    const convertToUpperCase = (str) => {
+        return str
+            .replace(/ş/g, "S")
+            .replace(/Ş/g, "S")
+            .replace(/ı/g, "I")
+            .replace(/I/g, "I")
+            .replace(/ç/g, "C")
+            .replace(/Ç/g, "C")
+            .replace(/ğ/g, "G")
+            .replace(/Ğ/g, "G")
+            .replace(/ö/g, "O")
+            .replace(/Ö/g, "O")
+            .replace(/ü/g, "U")
+            .replace(/Ü/g, "U")
+            .replace(/[a-z]/g, (match) => match.toUpperCase());
+    };
+    // useEffects
+    useEffect(() => {
+        if (attributes.value !== undefined)
+            setValue(attributes.value ?? "");
+    }, [attributes.value]);
+    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 } } : {}) },
+                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"
+                        ? {
+                            onKeyDown: (event) => {
+                                const allowedKeys = ["Backspace", "Tab", "ArrowLeft", "ArrowRight", "Delete"];
+                                const isNumberKey = /^[0-9]$/.test(event.key);
+                                if (!isNumberKey && !allowedKeys.includes(event.key))
+                                    event.preventDefault();
+                            },
+                        }
+                        : {}), ...(value
+                        ? {
+                            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)
+                          )`,
+                            },
+                        }
+                        : { style: { ...attributes.style } }), onChange: (event) => {
+                        // Disabled gelmesi durumunda işlem yapmasına izin verme...
+                        if (attributes.disabled)
+                            return;
+                        (() => {
+                            if (upperCase)
+                                event.target.value = convertToUpperCase(event.target.value);
+                            setValue(event.target.value);
+                        })();
+                        (() => {
+                            if (attributes.onChange) {
+                                // Mevcut değeri alın
+                                const { value } = event.target;
+                                const currentValue = upperCase ? convertToUpperCase(value) : value;
+                                // Yeni değeri oluşturun ve onChange fonksiyonunu çağırın
+                                // const newValue = `${addon?.before ?? ""}${currentValue}${addon?.after ?? ""}`;
+                                attributes.onChange({
+                                    ...event,
+                                    target: {
+                                        ...event.target,
+                                        id: event.target.id,
+                                        name: event.target.name,
+                                        value: currentValue,
+                                        type: event.target.type,
+                                        dataset: event.target.dataset,
+                                    },
+                                });
+                            }
+                        })();
+                    } }),
+                !attributes.disabled && attributes.type === "number" && (React.createElement("div", { className: "handle-number-button" },
+                    React.createElement("span", { onClick: () => handleNumberChange(1) },
+                        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 })));
+});
+const Input = BaseInput;
+Input.Decimal = Decimal;
+Input.FormattedDecimal = FormattedDecimal;
+Input.Phone = Phone;
+Input.Otp = Otp;
+BaseInput.displayName = "Input";
+export default Input;

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

@@ -0,0 +1,6 @@
+import { IColorProps, IVariantProps } from "../../../../libs/infrastructure/types/IGlobalProps";
+interface IProps extends IVariantProps, IColorProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "color"> {
+    character: number;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+export default IProps;

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

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

package/dist/components/form/input/otp/Otp.d.ts

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

package/dist/components/form/input/otp/Otp.js

@@ -0,0 +1,122 @@
+"use client";
+import React, { useRef, useCallback, useState, useEffect } from "react";
+import Input from "..";
+const Otp = ({ character, onChange, ...attributes }) => {
+    // refs
+    const _inputs = useRef([]);
+    // states
+    const [otpValues, setOtpValues] = useState(() => Array(character).fill(""));
+    // methods
+    const triggerChange = (newValues, event) => {
+        setOtpValues(newValues);
+        const combinedValue = newValues.join("");
+        onChange?.({
+            ...event,
+            target: {
+                ...event.currentTarget,
+                name: attributes.name ?? "",
+                value: combinedValue,
+            },
+        });
+    };
+    const handleKeyDown = useCallback((index) => (event) => {
+        if (attributes.disabled)
+            return;
+        const { key } = event;
+        const currentInput = _inputs.current[index];
+        // Sol / Aşağı Ok Tuşları
+        if (key === "ArrowDown" || key === "ArrowLeft") {
+            event.preventDefault(); // Tarayıcı imleç hareketini engelle
+            if (index > 0) {
+                const prevInput = _inputs.current[index - 1];
+                prevInput?.focus();
+                setTimeout(() => prevInput?.select(), 0);
+            }
+            return;
+        }
+        // Sağ / Yukarı Ok Tuşları
+        if (key === "ArrowUp" || key === "ArrowRight") {
+            event.preventDefault(); // Tarayıcı imleç hareketini engelle
+            if (index < character - 1) {
+                const nextInput = _inputs.current[index + 1];
+                nextInput?.focus();
+                setTimeout(() => nextInput?.select(), 0);
+            }
+            return;
+        }
+        // Backspace (Silme) İşlemi
+        if (key === "Backspace") {
+            event.preventDefault();
+            const newValues = [...otpValues];
+            if (otpValues[index] !== "") {
+                // Mevcut kutu doluysa temizle
+                newValues[index] = "";
+                triggerChange(newValues, event);
+            }
+            else if (index > 0) {
+                // Mevcut kutu boşsa bir öncekini temizle ve focus ol
+                newValues[index - 1] = "";
+                triggerChange(newValues, event);
+                _inputs.current[index - 1]?.focus();
+                setTimeout(() => _inputs.current[index - 1]?.select(), 0);
+            }
+            return;
+        }
+        // Sadece rakamlara izin ver (Meta tuşları hariç: Ctrl+V, Cmd+V vb.)
+        if (!/[0-9]/.test(key) && key.length === 1 && !event.ctrlKey && !event.metaKey) {
+            event.preventDefault();
+            return;
+        }
+        // Eğer tek bir rakam basıldıysa ve input seçiliyse (üzerine yazma mantığı)
+        if (/[0-9]/.test(key) && key.length === 1) {
+            event.preventDefault();
+            const newValues = [...otpValues];
+            newValues[index] = key; // Değeri set et (seçili olduğu için direkt üzerine yazar)
+            triggerChange(newValues, event);
+            // Son kutuda değilsek bir sonrakine geç ve seç
+            if (index < character - 1) {
+                const nextInput = _inputs.current[index + 1];
+                nextInput?.focus();
+                setTimeout(() => nextInput?.select(), 0);
+            }
+            else {
+                // Son kutudaysa sadece seçili bırak ki tekrar basıldığında üzerine yazabilsin
+                setTimeout(() => currentInput?.select(), 0);
+            }
+        }
+    }, [character, otpValues, attributes.disabled, onChange, attributes.name]);
+    const handlePaste = useCallback((index) => (event) => {
+        event.preventDefault();
+        if (attributes.disabled)
+            return;
+        const pastedData = event.clipboardData.getData("text").trim();
+        if (!/^\d+$/.test(pastedData))
+            return; // Sadece rakam ise kabul et
+        const digits = pastedData.split("").slice(0, character - index);
+        const newValues = [...otpValues];
+        digits.forEach((digit, i) => {
+            if (index + i < character) {
+                newValues[index + i] = digit;
+            }
+        });
+        triggerChange(newValues, event);
+        // Yapıştırılan son karaktere veya son input'a focus at
+        const focusIndex = Math.min(index + digits.length, character - 1);
+        const targetInput = _inputs.current[focusIndex];
+        targetInput?.focus();
+        setTimeout(() => targetInput?.select(), 0);
+    }, [character, otpValues, attributes.disabled]);
+    const handleClick = useCallback((event) => {
+        event.currentTarget.select();
+    }, []);
+    // useEffects
+    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" }))))));
+};
+Otp.displayName = "Input.Otp";
+export default Otp;

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

@@ -0,0 +1,11 @@
+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 {
+    options?: Option[];
+    values: {
+        option?: string;
+        value: string | number | readonly string[] | undefined;
+    };
+    onSelected?: (option: Option | undefined) => void;
+}
+export default IProps;

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

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

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

@@ -0,0 +1,4 @@
+import React from "react";
+import IProps from "./IProps";
+declare const Phone: React.FC<IProps>;
+export default Phone;

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

@@ -0,0 +1,41 @@
+"use client";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import Input from "..";
+import Select from "../../select";
+import PHONE from "../../../../libs/infrastructure/shared/PHONE";
+const Phone = ({ variant, color, options, values, onSelected, validation, ...attributes }) => {
+    // refs
+    const _input = useRef(null);
+    // states
+    const [_value, setValue] = useState("");
+    const [selected, setSelected] = useState(undefined);
+    // options referans kararlılığı için JSON key
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const optionsKey = useMemo(() => JSON.stringify(options), [options]);
+    // methods
+    const handleClick = () => {
+        const input = _input.current;
+        if (!input)
+            return;
+        const caret = input.selectionStart ?? 0;
+        input.setSelectionRange(caret, caret + 1);
+    };
+    // useEffects
+    useEffect(() => {
+        setValue(values.value);
+        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 })));
+};
+export default Phone;

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

@@ -0,0 +1,12 @@
+import { IBorderProps, IColorProps, IIconProps, ISizeProps, IUpperCaseProps, IValidationProps, IVariantProps } from "../../../libs/infrastructure/types/IGlobalProps";
+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;
+    trace?: {
+        color: Color;
+    };
+    pastTrace?: {
+        color: Color;
+    };
+}
+export default IProps;

package/dist/components/form/radio/IProps.js

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

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

@@ -0,0 +1,5 @@
+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>>;
+export default Radio;

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

@@ -0,0 +1,38 @@
+"use client";
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
+import "../../../assets/css/components/form/radio/radio.css";
+import Utils from "../../../libs/infrastructure/shared/Utils";
+const Radio = forwardRef(({ label, size = "normal", color = "blue", border = { radius: "pill" }, trace, pastTrace, upperCase, validation, ...attributes }, ref) => {
+    // refs
+    const _innerRef = useRef(null);
+    const _checkbox = useRef(null);
+    const _checkboxClassName = ["ar-radio"];
+    const _traceClassName = ["trace", "filled"];
+    const _pastTraceClassName = ["past-trace", "filled"];
+    // hooks
+    // Dışarıdan gelen ref'i _innerRef'e bağla.
+    useImperativeHandle(ref, () => _innerRef.current);
+    _checkboxClassName.push(...Utils.GetClassName("filled", undefined, attributes.checked ? color : "light", border, size, undefined, attributes.className));
+    if (trace && Object.keys(trace).length > 0)
+        _traceClassName.push(trace.color);
+    if (pastTrace && Object.keys(pastTrace).length > 0)
+        _pastTraceClassName.push(pastTrace.color);
+    return (React.createElement("div", { className: "ar-radio-wrapper" },
+        React.createElement("label", null,
+            React.createElement("input", { ref: _innerRef, type: "radio", ...attributes, size: 0, onChange: (event) => {
+                    (() => {
+                        const _current = _checkbox.current;
+                        if (!_current)
+                            return;
+                    })();
+                    (() => attributes.onChange && attributes.onChange(event))();
+                } }),
+            React.createElement("span", null,
+                React.createElement("span", { ref: _checkbox, className: _checkboxClassName.map((c) => c).join(" ") }),
+                trace && Object.keys(trace).length > 0 && (React.createElement("span", { className: _traceClassName.map((c) => c).join(" ") })),
+                pastTrace && Object.keys(pastTrace).length > 0 && (React.createElement("span", { className: _pastTraceClassName.map((c) => c).join(" ") })),
+                label && React.createElement("span", { className: "label" }, upperCase ? label.toUpperCase() : label)),
+            validation?.text && React.createElement("span", { className: "validation" }, validation.text))));
+});
+Radio.displayName = "Radio";
+export default Radio;

package/dist/components/form/select/Props.d.ts

@@ -0,0 +1,35 @@
+import { Variants, Option, Status, Color } from "../../../libs/infrastructure/types";
+import { IBorderProps, IDisabledProps, IIconProps, ISizeProps, IColorProps, IUpperCaseProps, IValidationProps, IVariantProps } from "../../../libs/infrastructure/types/IGlobalProps";
+export interface IMultiple {
+    status?: {
+        color?: Color;
+        selected?: {
+            variant?: Variants;
+            color?: Color;
+        };
+    };
+    value: Option[];
+    onChange: (option: Option[]) => void;
+    multiple: true;
+}
+export interface ISingle {
+    status?: Status;
+    value: Option | undefined;
+    onChange: (option: Option | undefined) => void;
+    multiple?: false;
+}
+export type Props = {
+    style?: React.CSSProperties | undefined;
+    options: Option[];
+    onSearch?: (searchText: string) => void;
+    onClick?: () => void;
+    onCreate?: (option: Option) => void;
+    placeholder?: string;
+    readOnly?: boolean;
+    config?: {
+        clear?: boolean;
+        validation?: {
+            text: "visible" | "hidden";
+        };
+    };
+} & (IMultiple | ISingle) & IVariantProps & IColorProps & IBorderProps & IIconProps & ISizeProps & IUpperCaseProps & IValidationProps & IDisabledProps;

package/dist/components/form/select/Props.js

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

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { Props } from "./Props";
+import "../../../assets/css/components/form/select/styles.css";
+declare const Select: React.FC<Props>;
+export default Select;