@skalfa/skalfa-component 1.0.0 → 1.0.3

package/dist/src/input/InputOtp.component.js

@@ -1,65 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputOtpComponent = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const _utils_1 = require("@utils");
-const InputOtpComponent = ({ label, tip, name, disabled, value, invalid, length = 6, onChange, className = "", }) => {
-    const [isFocus, setIsFocus] = (0, react_1.useState)(false);
-    const inputsRef = (0, react_1.useRef)([]);
-    const [otp, setOtp] = (0, react_1.useState)((value || "").split("").concat(Array(length).fill("")).slice(0, length));
-    (0, react_1.useEffect)(() => {
-        const handleFocusChange = () => {
-            const anyFocused = inputsRef.current.some((input) => input === document.activeElement);
-            setIsFocus(anyFocused);
-        };
-        window.addEventListener("focusin", handleFocusChange);
-        window.addEventListener("focusout", handleFocusChange);
-        return () => {
-            window.removeEventListener("focusin", handleFocusChange);
-            window.removeEventListener("focusout", handleFocusChange);
-        };
-    }, []);
-    const emitChange = (newOtp) => {
-        const val = newOtp.join("");
-        onChange?.(val);
-    };
-    const handleChange = (val, index) => {
-        if (!/^[0-9]?$/.test(val))
-            return;
-        const newOtp = [...otp];
-        newOtp[index] = val;
-        setOtp(newOtp);
-        emitChange(newOtp);
-        (val && index < length - 1) && inputsRef.current[index + 1]?.focus();
-    };
-    const handleKeyDown = (e, index) => {
-        if (e.key === "Backspace") {
-            if (otp[index]) {
-                const newOtp = [...otp];
-                newOtp[index] = "";
-                setOtp(newOtp);
-                emitChange(newOtp);
-            }
-            else if (index > 0) {
-                inputsRef.current[index - 1]?.focus();
-            }
-        }
-    };
-    const handlePaste = (e) => {
-        e.preventDefault();
-        const paste = e.clipboardData.getData("text").trim();
-        if (!/^[0-9]+$/.test(paste))
-            return;
-        const pasted = paste.slice(0, length).split("");
-        const newOtp = [...otp];
-        for (let i = 0; i < pasted.length; i++)
-            newOtp[i] = pasted[i];
-        setOtp(newOtp);
-        emitChange(newOtp);
-        inputsRef.current[Math.min(pasted.length, length - 1)]?.focus();
-    };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "input-container", children: [(0, jsx_runtime_1.jsx)("label", { className: (0, _utils_1.cn)("input-label", disabled && "input-label-disabled", isFocus && "input-label-focus", !!invalid && "input-label-error", (0, _utils_1.pcn)(className, "label"), disabled && (0, _utils_1.pcn)(className, "label", "disabled"), isFocus && (0, _utils_1.pcn)(className, "label", "focus"), !!invalid && (0, _utils_1.pcn)(className, "label", "error")), children: label }), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip"), disabled && (0, _utils_1.pcn)(className, "tip", "disabled")), children: tip })), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("input input-otp-box", isFocus && "input-otp-box-focus", !!invalid && "input-error"), children: [(0, jsx_runtime_1.jsx)("div", { className: "input-otp-digits-container", children: otp.map((digit, index) => ((0, jsx_runtime_1.jsx)("input", { type: "text", ref: (el) => { inputsRef.current[index] = el; }, inputMode: "numeric", maxLength: 1, value: digit, onChange: (e) => handleChange(e.target.value, index), onKeyDown: (e) => handleKeyDown(e, index), onPaste: handlePaste, className: "input-otp-cell", placeholder: "-", autoFocus: index === 0 }, index))) }), (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: otp.join("") })] }), invalid && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalid }))] }) }));
-};
-exports.InputOtpComponent = InputOtpComponent;

package/dist/src/input/InputPassword.component.d.ts

@@ -1,17 +0,0 @@
-import { InputHTMLAttributes, ReactNode } from "react";
-import { ValidationRules } from "@utils";
-export interface InputPasswordProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
-    label?: string;
-    tip?: string | ReactNode;
-    leftIcon?: any;
-    rightIcon?: any;
-    value?: string;
-    invalid?: string;
-    validations?: ValidationRules;
-    onChange?: (value: string, confirm?: string) => any;
-    register?: (name: string, validations?: ValidationRules) => void;
-    unregister?: (name: string) => void;
-    /** Use custom class with: "label::", "tip::", "error::", "icon::". */
-    className?: string;
-}
-export declare function InputPasswordComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className, ...props }: InputPasswordProps): import("react").JSX.Element;

package/dist/src/input/InputPassword.component.js

@@ -1,59 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputPasswordComponent = InputPasswordComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const _utils_1 = require("@utils");
-function InputPasswordComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className = "", ...props }) {
-    const [password, setPassword] = (0, react_1.useState)("");
-    const [confirmPassword, setConfirmPassword] = (0, react_1.useState)("");
-    const [strength, setStrength] = (0, react_1.useState)("");
-    // =========================>
-    // ## Initial
-    // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, unregister, false);
-    const randomId = (0, _utils_1.useInputRandomId)();
-    const randomConfirmId = (0, _utils_1.useInputRandomId)();
-    // =========================>
-    // ## Invalid handler
-    // =========================>
-    const [invalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
-    // =========================>
-    // ## Password strength handler
-    // =========================>
-    (0, react_1.useEffect)(() => {
-        if (!password)
-            return setStrength("");
-        const hasLetter = /[A-Za-z]/.test(password);
-        const hasNumber = /\d/.test(password);
-        const hasSymbol = /[^A-Za-z0-9]/.test(password);
-        if (hasLetter && !hasNumber && !hasSymbol)
-            setStrength("weak");
-        else if (hasLetter && hasNumber && !hasSymbol)
-            setStrength("strong");
-        else if (hasLetter && hasNumber && hasSymbol)
-            setStrength("excellent");
-        else
-            setStrength("weak");
-    }, [password]);
-    // =========================>
-    // ## Check match confirm password
-    // =========================>
-    const isConfirmMismatch = confirmPassword && password !== confirmPassword;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "input-container", children: [label && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", props.disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", !!invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] })), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", props.disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip")), children: tip })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { ...props, type: "password", id: randomId, className: (0, _utils_1.cn)("input", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", !!invalidMessage && "input-error", (0, _utils_1.pcn)(className, "base")), value: password, onChange: (e) => {
-                            setPassword(e.target.value);
-                            inputHandler.setIdle(false);
-                            onChange?.(e.target.value, confirmPassword);
-                        }, onFocus: (e) => {
-                            props.onFocus?.(e);
-                            inputHandler.setFocus(true);
-                        }, onBlur: (e) => {
-                            props.onBlur?.(e);
-                            setTimeout(() => inputHandler.setFocus(false), 100);
-                        }, autoComplete: "off" }), leftIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", (0, _utils_1.pcn)(className, "icon")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", (0, _utils_1.pcn)(className, "icon")), icon: rightIcon }))] }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: "input-error-message", children: invalidMessage })), strength && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mt-1", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("password-strength-bar", strength === "weak" && "password-strength-bar-weak", strength === "strong" && "password-strength-bar-strong", strength === "excellent" && "password-strength-bar-excellent") }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("password-strength-bar", strength === "weak" && "password-strength-bar-empty", strength === "strong" && "password-strength-bar-strong", strength === "excellent" && "password-strength-bar-excellent") }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("password-strength-bar", (strength === "weak" || strength === "strong") && "password-strength-bar-empty", strength === "excellent" && "password-strength-bar-excellent") }), (0, jsx_runtime_1.jsx)("span", { className: (0, _utils_1.cn)("password-strength-text", strength === "weak" && "password-strength-text-weak", strength === "strong" && "password-strength-text-strong", strength === "excellent" && "password-strength-text-excellent"), children: strength === "weak" ? "Weak" : strength === "strong" ? "Strong" : "Excellent" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "input-password-confirm-wrapper", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: randomConfirmId, className: (0, _utils_1.cn)("input-label", (0, _utils_1.pcn)(className, "label")), children: "Password Confirm" }), (0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("input", { ...props, id: randomConfirmId, type: "password", className: (0, _utils_1.cn)("input", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", (0, _utils_1.pcn)(className, "base"), isConfirmMismatch && "input-error"), value: confirmPassword, onChange: (e) => {
-                                setConfirmPassword(e.target.value);
-                                onChange?.(password, e.target.value);
-                            }, autoComplete: "off" }) })] }), isConfirmMismatch && ((0, jsx_runtime_1.jsx)("small", { className: "input-error-message", children: "Password confirmation not match" }))] }));
-}

package/dist/src/input/InputRadio.component.d.ts

@@ -1,27 +0,0 @@
-import { ReactNode } from "react";
-import { ApiType, ValidationRules } from "@utils";
-export type InputRadioOptionProps = {
-    value: string | number;
-    label: string;
-};
-export type InputRadioProps = {
-    name: string;
-    label?: string;
-    tip?: string | ReactNode;
-    vertical?: boolean;
-    value?: string | number;
-    disabled?: boolean;
-    invalid?: string;
-    options?: InputRadioOptionProps[];
-    serverOptionControl?: ApiType;
-    customOptions?: any;
-    validations?: ValidationRules;
-    onChange?: (value: string | number) => any;
-    register?: (name: string, validations?: ValidationRules) => void;
-    unregister?: (name: string) => void;
-    /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
-    className?: string;
-    /** Use custom class with: "label::", "checked::", "error::". */
-    classNameCheckbox?: string;
-};
-export declare function InputRadioComponent({ name, label, tip, vertical, value, disabled, invalid, options, serverOptionControl, customOptions, validations, onChange, register, unregister, className, classNameCheckbox, }: InputRadioProps): import("react").JSX.Element;

package/dist/src/input/InputRadio.component.js

@@ -1,56 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputRadioComponent = InputRadioComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const _utils_1 = require("@utils");
-const _components_1 = require("@components");
-function InputRadioComponent({ name, label, tip, vertical, value, disabled, invalid, options, serverOptionControl, customOptions, validations, onChange, register, unregister, className = "", classNameCheckbox = "", }) {
-    const [dataOptions, setDataOptions] = (0, react_1.useState)([]);
-    const [loading, setLoading] = (0, react_1.useState)(false);
-    // =========================>
-    // ## Initial
-    // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, unregister, false);
-    // =========================>
-    // ## Invalid handler
-    // =========================>
-    const [invalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
-    // =========================>
-    // ## Fetch option
-    // =========================>
-    (0, react_1.useEffect)(() => {
-        const fetchOptions = async () => {
-            setLoading(true);
-            const mutateOptions = await (0, _utils_1.api)(serverOptionControl || {});
-            if (mutateOptions?.status == 200) {
-                customOptions
-                    ? setDataOptions([customOptions, ...mutateOptions.data])
-                    : setDataOptions(mutateOptions.data);
-                setLoading(false);
-            }
-        };
-        if (serverOptionControl?.path || serverOptionControl?.url) {
-            fetchOptions();
-        }
-        else {
-            !options && setDataOptions([]);
-        }
-    }, [serverOptionControl?.path, serverOptionControl?.url]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "input-container w-full", children: [(0, jsx_runtime_1.jsxs)("label", { className: (0, _utils_1.cn)("input-label", disabled && "input-label-disabled", !!invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label"), disabled && (0, _utils_1.pcn)(className, "label", "disabled"), !!invalidMessage && (0, _utils_1.pcn)(className, "label", "focus")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] }), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip"), disabled && (0, _utils_1.pcn)(className, "tip", "disabled")), children: tip })), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("input input-radio-list", vertical && "input-radio-list-vertical", (0, _utils_1.pcn)(className, "input"), !!invalidMessage && "input-error", !!invalidMessage && (0, _utils_1.pcn)(className, "input", "error")), children: [loading && (vertical ? [1, 2, 3, 4, 5, 6, 7, 8, 9] : [1, 2, 3]).map((_, key) => {
-                            return (0, jsx_runtime_1.jsx)("div", { className: "w-1/3 h-6 rounded-lg" }, key);
-                        }), (options || dataOptions) &&
-                            (options || dataOptions)?.map((option, key) => {
-                                return ((0, jsx_runtime_1.jsx)(_components_1.RadioComponent, { label: option.label, name: `option[${option.value}]#${name}`, checked: inputHandler.value == option.value, disabled: disabled, className: classNameCheckbox, onChange: () => {
-                                        if (inputHandler.value == option.value) {
-                                            inputHandler.setValue("");
-                                            onChange?.("");
-                                        }
-                                        else {
-                                            inputHandler.setValue(option.value || "");
-                                            onChange?.(option.value || "");
-                                        }
-                                    } }, key));
-                            })] }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }) }));
-}

package/dist/src/input/InputTime.component.d.ts

@@ -1,23 +0,0 @@
-import { FC, InputHTMLAttributes, ReactNode } from "react";
-import { ValidationRules } from "@utils";
-export interface InputTimeProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
-    label?: string;
-    tip?: string | ReactNode;
-    leftIcon?: any;
-    rightIcon?: any;
-    value?: string;
-    invalid?: string;
-    validations?: ValidationRules;
-    onChange?: (value: string) => any;
-    register?: (name: string, validations?: ValidationRules) => void;
-    unregister?: (name: string) => void;
-    /** Use custom class with: "label::", "tip::", "error::", "icon::". */
-    className?: string;
-}
-export declare function InputTimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className, ...props }: InputTimeProps): import("react").JSX.Element;
-interface InputTimePickerProps {
-    onChange?: (time: string) => void;
-    rightElement?: ReactNode;
-}
-export declare const InputTimePickerComponent: FC<InputTimePickerProps>;
-export {};

package/dist/src/input/InputTime.component.js

@@ -1,73 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputTimePickerComponent = void 0;
-exports.InputTimeComponent = InputTimeComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const _utils_1 = require("@utils");
-const _components_1 = require("@components");
-function InputTimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className = "", ...props }) {
-    const { isSm } = (0, _utils_1.useResponsive)();
-    // =========================>
-    // ## Initial
-    // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, unregister, false);
-    const randomId = (0, _utils_1.useInputRandomId)();
-    // =========================>
-    // ## Invalid handler
-    // =========================>
-    const [invalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-container", children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", props.disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", !!invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] }), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", props.disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip")), children: tip })), (0, jsx_runtime_1.jsx)(_components_1.OutsideClickComponent, { onOutsideClick: !isSm ? () => inputHandler.setFocus(false) : undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { ...props, id: randomId, className: (0, _utils_1.cn)("input", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", (0, _utils_1.pcn)(className, "input"), !!invalidMessage && "input-error"), value: inputHandler.value, onChange: (e) => {
-                                        inputHandler.setValue(e.target.value);
-                                        inputHandler.setIdle(false);
-                                        onChange?.(e.target.value);
-                                    }, onFocus: (e) => {
-                                        props.onFocus?.(e);
-                                        inputHandler.setFocus(true);
-                                    }, autoComplete: "off", inputMode: isSm ? "none" : undefined }), leftIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: rightIcon })), !isSm && inputHandler.focus && ((0, jsx_runtime_1.jsx)("div", { className: "input-time-picker-popover", children: (0, jsx_runtime_1.jsx)(exports.InputTimePickerComponent, { onChange: (time) => {
-                                            inputHandler.setValue(time);
-                                            onChange?.(time);
-                                        } }) }))] }) }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }), isSm && ((0, jsx_runtime_1.jsx)(_components_1.BottomSheetComponent, { show: inputHandler.focus, onClose: () => inputHandler.setFocus(false), size: 380, footer: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: () => inputHandler.setFocus(false), block: true }) }), children: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.InputTimePickerComponent, { onChange: (time) => {
-                            inputHandler.setValue(time);
-                            onChange?.(time);
-                        } }) }) }))] }));
-}
-;
-const InputTimePickerComponent = ({ onChange, rightElement, }) => {
-    const [hour, setHour] = (0, react_1.useState)(0);
-    const [minute, setMinute] = (0, react_1.useState)(0);
-    const [second, setSecond] = (0, react_1.useState)(0);
-    const hours = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, "0"));
-    const minutes = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
-    const seconds = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
-    const handleSelect = (type, val) => {
-        if (type === "h")
-            setHour(Number(val));
-        if (type === "m")
-            setMinute(Number(val));
-        if (type === "s")
-            setSecond(Number(val));
-    };
-    (0, react_1.useEffect)(() => {
-        const formatted = `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}:${String(second).padStart(2, "0")}`;
-        onChange?.(formatted);
-    }, [hour, minute, second]);
-    const renderColumn = (items, type, activeValue) => ((0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto text-center input-scroll", children: items.map((item) => {
-            const active = Number(item) === activeValue;
-            return ((0, jsx_runtime_1.jsx)("div", { onClick: () => handleSelect(type, item), className: (0, _utils_1.cn)("p-2 cursor-pointer rounded text-sm", active ? "bg-primary text-background font-semibold" : "hover:bg-light-primary"), children: item }, item));
-        }) }));
-    const timeSlots = (0, react_1.useMemo)(() => {
-        const newTimeSlots = [];
-        for (let i = 0; i <= 24 * 60; i += 30) {
-            const hours = Math.floor(i / 60);
-            const minutes = i % 60;
-            const label = `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
-            newTimeSlots.push(label);
-        }
-        return newTimeSlots;
-    }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full max-h-[260] flex gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-1/3 overflow-y-auto bg-background rounded-[6px] input-scroll", children: timeSlots.map((time) => ((0, jsx_runtime_1.jsx)("div", { className: "p-2 text-sm rounded cursor-pointer hover:bg-light-primary text-center", onClick: () => onChange?.(time), children: time }, time))) }), (0, jsx_runtime_1.jsxs)("div", { className: "w-2/3 flex gap-2", children: [renderColumn(hours, "h", hour), renderColumn(minutes, "m", minute), renderColumn(seconds, "s", second)] }), rightElement && (0, jsx_runtime_1.jsx)("div", { children: rightElement })] }));
-};
-exports.InputTimePickerComponent = InputTimePickerComponent;

package/dist/src/input/InputValues.component.d.ts

@@ -1,9 +0,0 @@
-import { CSSProperties } from 'react';
-export declare function InputValues({ value, className, onDelete, isFocus, onFocus, style, }: {
-    value?: string[] | number[];
-    className?: string;
-    onDelete?: (val: string | number, index: string | number) => void;
-    isFocus?: boolean;
-    onFocus?: () => void;
-    style?: CSSProperties;
-}): import("react").JSX.Element;

package/dist/src/input/InputValues.component.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputValues = InputValues;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const _utils_1 = require("@utils");
-function InputValues({ value, className, onDelete, isFocus, onFocus, style, }) {
-    if (isFocus) {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !!value?.length && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("input-values-dropdown", className), onClick: () => onFocus?.(), children: value?.map((item, key) => {
-                    return ((0, jsx_runtime_1.jsxs)("div", { className: "input-values-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "", children: item }), (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faTimes, className: "input-values-delete", onClick: () => onDelete?.(item, key) })] }, key));
-                }) })) }));
-    }
-    else {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("input-values-preview", className), style: style, onClick: () => onFocus?.(), children: (0, jsx_runtime_1.jsx)("div", { className: "input-values-container", children: value?.map((item, key) => {
-                        return ((0, jsx_runtime_1.jsxs)("div", { className: "input-values-item", children: [(0, jsx_runtime_1.jsx)("span", { children: item }), (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faTimes, className: "input-values-delete", onClick: () => onDelete?.(item, key) })] }, key));
-                    }) }) }) }));
-    }
-}

package/dist/src/input/Radio.component.d.ts

@@ -1,12 +0,0 @@
-export interface RadioProps {
-    name: string;
-    label?: string;
-    value?: string;
-    disabled?: boolean;
-    checked?: boolean;
-    invalid?: string;
-    onChange?: () => void;
-    /** Use custom class with: "label::", "checked::", "error::". */
-    className?: string;
-}
-export declare function RadioComponent({ name, label, value, disabled, checked, invalid, onChange, className, }: RadioProps): import("react").JSX.Element;

package/dist/src/input/Radio.component.js

@@ -1,22 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioComponent = RadioComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const _utils_1 = require("@utils");
-;
-function RadioComponent({ name, label, value, disabled, checked, invalid, onChange, className = "", }) {
-    // =========================>
-    // ## initial
-    // =========================>
-    const randomId = (0, _utils_1.useInputRandomId)();
-    const [invalidMessage, setInvalidMessage] = (0, react_1.useState)("");
-    // =========================>
-    // ## invalid handler
-    // =========================>
-    (0, react_1.useEffect)(() => {
-        setInvalidMessage(invalid || "");
-    }, [invalid]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "radio-container", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "hidden", id: randomId, name: name, onChange: onChange, defaultChecked: checked, value: value, disabled: disabled }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("radio-wrapper", disabled && "radio-wrapper-disabled"), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("radio-input", checked && "radio-input-checked", checked && (0, _utils_1.pcn)(className, "checked"), (0, _utils_1.pcn)(className, "input")) }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("radio-label", checked && "radio-label-checked", (0, _utils_1.pcn)(className, "label"), checked && (0, _utils_1.pcn)(className, "label", "checked"), disabled && (0, _utils_1.pcn)(className, "label", "disabled")), children: label })] }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }) }));
-}

package/dist/src/input/Select.component.d.ts

@@ -1,47 +0,0 @@
-import { ReactNode } from "react";
-import { ApiType, ValidationRules } from "@utils";
-export interface SelectOptionProps {
-    label: string | ReactNode;
-    value: string | number;
-    searchable?: string[];
-    customLabel?: ReactNode;
-}
-export interface SelectProps {
-    name: string;
-    label?: string;
-    placeholder?: string;
-    tip?: string | ReactNode;
-    leftIcon?: any;
-    rightIcon?: any;
-    value?: string | number | (string | number)[];
-    invalid?: string;
-    disabled?: boolean;
-    validations?: ValidationRules;
-    multiple?: boolean;
-    autoFocus?: boolean;
-    clearable?: boolean;
-    options?: SelectOptionProps[];
-    searchable?: boolean;
-    serverOptionControl?: ApiType & {
-        cacheName?: string | false;
-    };
-    idbOptionControl?: {
-        store: string;
-        labelKey: string;
-        valueKey: string;
-    };
-    serverSearchable?: boolean;
-    includedOptions?: SelectOptionProps[];
-    exceptOptions?: (string | number)[];
-    tempOptions?: SelectOptionProps[];
-    newOption?: SelectOptionProps;
-    maxShowOption?: number;
-    onChange?: (value: string | number | (string | number)[], data?: any) => any;
-    register?: (name: string, validations?: ValidationRules) => void;
-    unregister?: (name: string) => void;
-    onFocus?: () => void;
-    onBlur?: () => void;
-    /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
-    className?: string;
-}
-export declare function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, value, invalid, disabled, validations, multiple, autoFocus, clearable, options, searchable, serverOptionControl, idbOptionControl, serverSearchable, includedOptions, exceptOptions, tempOptions, newOption, maxShowOption, register, unregister, onChange, onFocus, onBlur, className, }: SelectProps): import("react").JSX.Element;