@skalfa/skalfa-component 1.0.0

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

@@ -0,0 +1,25 @@
+import { ValidationRules } from "@utils";
+export interface ValueMapProps {
+    lat: number | null;
+    lng: number | null;
+    address?: string;
+}
+export interface InputMapProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    label?: string;
+    tip?: string | React.ReactNode;
+    leftIcon?: any;
+    rightIcon?: any;
+    value?: any;
+    invalid?: string;
+    validations?: ValidationRules;
+    onChange?: (value: any) => any;
+    register?: (name: string, validations?: ValidationRules) => void;
+    unregister?: (name: string) => void;
+    className?: string;
+}
+export declare function InputMapComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className, ...props }: InputMapProps): import("react").JSX.Element;
+export interface MapPickerProps {
+    value?: any;
+    onChange?: (value: any) => any;
+}
+export declare const InputMapPickerComponent: React.FC<MapPickerProps>;

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

@@ -0,0 +1,101 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputMapPickerComponent = void 0;
+exports.InputMapComponent = InputMapComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const axios_1 = __importDefault(require("axios"));
+const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+const api_1 = require("@react-google-maps/api");
+const _utils_1 = require("@utils");
+const _components_1 = require("@components");
+function InputMapComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className = "", ...props }) {
+    const { isSm } = (0, _utils_1.useResponsive)();
+    // =========================>
+    // ## Invalid handler
+    // =========================>
+    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: [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.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?.address || "", readOnly: true, onFocus: (e) => {
+                                        props.onFocus?.(e);
+                                        inputHandler.setFocus(true);
+                                        inputHandler.setIdle(false);
+                                    }, autoComplete: "off" }), 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-map-suggest-container", style: { height: 300 }, children: (0, jsx_runtime_1.jsx)(exports.InputMapPickerComponent, { value: inputHandler.value, onChange: (e) => {
+                                            inputHandler.setValue(e);
+                                            onChange?.(e);
+                                        } }) }))] }) }), 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: 450, 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.InputMapPickerComponent, { onChange: (e) => {
+                            inputHandler.setValue(e);
+                            onChange?.(e);
+                        } }) }) }))] }));
+}
+const InputMapPickerComponent = ({ onChange, value }) => {
+    const mapRef = (0, react_1.useRef)(null);
+    const [addressLoading, setAddressLoading] = (0, react_1.useState)(false);
+    const [drag, setDrag] = (0, react_1.useState)(false);
+    // =========================>
+    // ## Map Events
+    // =========================>
+    const setCurrentPosition = () => {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition((pos) => {
+                const newPos = {
+                    lat: pos.coords.latitude,
+                    lng: pos.coords.longitude,
+                    address: "",
+                };
+                onChange?.(newPos);
+                mapRef.current?.panTo(new google.maps.LatLng(newPos.lat, newPos.lng));
+            });
+        }
+    };
+    const handleDragEnd = (0, react_1.useCallback)(() => {
+        if (mapRef.current) {
+            const center = mapRef.current.getCenter();
+            if (center) {
+                onChange?.({
+                    lat: center.lat(),
+                    lng: center.lng(),
+                    address: "",
+                });
+            }
+            setDrag(false);
+        }
+    }, []);
+    // =========================>
+    // ## Reverse Geocode
+    // =========================>
+    (0, react_1.useEffect)(() => {
+        if (value?.lat && value?.lng) {
+            setAddressLoading(true);
+            onChange?.((prev) => ({ ...prev, address: "" }));
+            axios_1.default.get(`https://api.geoapify.com/v1/geocode/reverse?lat=${value?.lat}&lon=${value?.lng}&apiKey=${process.env.NEXT_PUBLIC_GEOAPIFY_KEY}`)
+                .then((res) => {
+                if (res.status === 200 && !res.data.error) {
+                    const data = res.data.features?.at(0)?.properties;
+                    const address = (data?.address_line1 || "") + " " + (data?.address_line2 || "");
+                    onChange?.((prev) => ({ ...prev, address }));
+                    onChange?.({ ...value, address });
+                }
+            })
+                .finally(() => setAddressLoading(false));
+        }
+    }, [value?.lat, value?.lng]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative w-full", children: [(0, jsx_runtime_1.jsx)(api_1.LoadScript, { googleMapsApiKey: process.env.NEXT_PUBLIC_MAP_KEY || "", children: (0, jsx_runtime_1.jsx)(api_1.GoogleMap, { mapContainerStyle: { width: "100%", height: "100%" }, center: {
+                        lat: value?.lat || -6.208,
+                        lng: value?.lng || 106.689,
+                    }, zoom: 18, options: {
+                        streetViewControl: false,
+                        mapTypeControl: false,
+                        fullscreenControl: false,
+                    }, onLoad: (map) => { mapRef.current = map; }, onDrag: () => setDrag(true), onDragEnd: handleDragEnd }) }), (0, jsx_runtime_1.jsx)("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faLocationDot, className: (0, _utils_1.cn)("input-map-marker", drag && "input-map-marker-drag") }) }), (0, jsx_runtime_1.jsx)("div", { className: "input-map-badge-left", children: addressLoading && !value?.address ? ((0, jsx_runtime_1.jsx)("div", { className: "py-4 w-[200px]" })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-sm", children: value?.address })) }), (0, jsx_runtime_1.jsx)("div", { className: "input-map-badge-right", onClick: () => setCurrentPosition(), children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faLocationCrosshairs, className: "text-lg" }) })] }));
+};
+exports.InputMapPickerComponent = InputMapPickerComponent;

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

@@ -0,0 +1,19 @@
+import React, { InputHTMLAttributes, ReactNode } from "react";
+import { ValidationRules } from "@utils";
+export interface InputNumberProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    label?: string;
+    tip?: string | ReactNode;
+    leftIcon?: any;
+    rightIcon?: any;
+    value?: number;
+    invalid?: string;
+    validations?: ValidationRules;
+    min?: number;
+    max?: number;
+    onChange?: (value: 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;
+}
+export declare function InputNumberComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, min, max, onChange, register, unregister, className, ...props }: InputNumberProps): React.JSX.Element;

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

@@ -0,0 +1,40 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputNumberComponent = InputNumberComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+const _utils_1 = require("@utils");
+function InputNumberComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, min, max, onChange, register, unregister, className = "", ...props }) {
+    // =========================>
+    // ## 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);
+    // =========================>
+    // ## Change value handler
+    // =========================>
+    const handleInputChange = (e) => {
+        const newValue = e.target.value;
+        const regex = /^-?\d*\.?\d*$/;
+        if (regex.test(newValue)) {
+            inputHandler.setValue(newValue);
+            inputHandler.setIdle(false);
+            onChange?.(Number(newValue));
+        }
+    };
+    const handleBlur = (e) => {
+        props.onBlur?.(e);
+        setTimeout(() => inputHandler.setFocus(false), 100);
+    };
+    const handleFocus = (e) => {
+        props.onFocus?.(e);
+        inputHandler.setFocus(true);
+    };
+    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.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"), props.disabled && (0, _utils_1.pcn)(className, "label", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "label", "focus"), !!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", props.disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip"), props.disabled && (0, _utils_1.pcn)(className, "tip", "disabled")), children: tip })), (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", !!invalidMessage && (0, _utils_1.pcn)(className, "input", "error")), value: inputHandler.value, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, autoComplete: "off", min: min, max: max }), 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"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: leftIcon })), (0, jsx_runtime_1.jsx)("label", { htmlFor: randomId, 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"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), children: (0, jsx_runtime_1.jsxs)("div", { className: "input-number-sort-container", children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: "input-number-sort-up", icon: free_solid_svg_icons_1.faSortUp, onClick: () => inputHandler.setValue(String(Number(inputHandler.value) + 1)) }), (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: "input-number-sort-down", icon: free_solid_svg_icons_1.faSortDown, onClick: () => inputHandler.setValue(String(Number(inputHandler.value) - 1)) })] }) })] }), 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/InputOtp.component.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from "react";
+export interface InputOtpProps {
+    label?: string;
+    tip?: string | ReactNode;
+    name: string;
+    disabled?: boolean;
+    value?: string;
+    invalid?: string;
+    length?: number;
+    onChange?: (value: string) => any;
+    /** Use custom class with: "label::", "tip::", "error::". */
+    className?: string;
+}
+export declare const InputOtpComponent: FC<InputOtpProps>;

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

@@ -0,0 +1,65 @@
+"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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,59 @@
+"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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,56 @@
+"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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,73 @@
+"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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,19 @@
+"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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,22 @@
+"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 }))] }) }));
+}