@skalfa/skalfa-component 1.0.2 → 1.0.3

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

@@ -1,260 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CanvasCropper = exports.InputImageComponent = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-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");
-const _components_1 = require("@components");
-const InputImageComponent = ({ name, label, tip, value, disabled, aspect = "1/1", invalid, validations, onChange, register, unregister, className = "", }) => {
-    const { isSm } = (0, _utils_1.useResponsive)();
-    const randomId = (0, _utils_1.useInputRandomId)();
-    const inputRef = (0, react_1.useRef)(null);
-    const [preview, setPreview] = (0, react_1.useState)("");
-    const [drag, setDrag] = (0, react_1.useState)(false);
-    const [cropSrc, setCropSrc] = (0, react_1.useState)(null);
-    const [openCrop, setOpenCrop] = (0, react_1.useState)(false);
-    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, unregister, true);
-    const [invalidMessage, setInvalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
-    (0, react_1.useEffect)(() => {
-        if (value) {
-            const url = typeof value === "object" ? URL.createObjectURL(value) : value;
-            setPreview(url);
-            return () => {
-                typeof value === "object" && URL.revokeObjectURL(url);
-            };
-        }
-        else {
-            setPreview("");
-        }
-    }, [value]);
-    const openCropper = (file) => {
-        const reader = new FileReader();
-        reader.onload = () => {
-            setCropSrc(reader.result);
-            setOpenCrop(true);
-        };
-        reader.readAsDataURL(file);
-    };
-    const onUpload = (e) => {
-        const file = e.target.files?.[0];
-        if (!file)
-            return;
-        const allowed = ["image/jpeg", "image/jpg", "image/png", "image/webp"];
-        if (!allowed.includes(file.type)) {
-            setInvalidMessage("Format gambar tidak diperbolehkan (JPG/PNG/WebP)");
-            return;
-        }
-        openCropper(file);
-    };
-    const onCropDone = (file) => {
-        const url = URL.createObjectURL(file);
-        setPreview(url);
-        onChange?.(file);
-        setOpenCrop(false);
-    };
-    const onCropCancel = () => {
-        setOpenCrop(false);
-        inputRef.current.value = "";
-    };
-    const remove = () => {
-        setPreview("");
-        onChange?.(null);
-        inputRef.current && (inputRef.current.value = "");
-    };
-    const onDropFile = (e) => {
-        e.preventDefault();
-        setDrag(false);
-        const file = e.dataTransfer.files?.[0];
-        file && openCropper(file);
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "input-container w-full", children: [label && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", 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", disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip")), children: tip })), (0, jsx_runtime_1.jsx)("label", { htmlFor: randomId, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("input-image-dropzone", drag ? "input-image-dropzone-drag" : "", invalidMessage && "input-image-dropzone-error", (0, _utils_1.pcn)(className, "input")), style: {
-                        aspectRatio: aspect,
-                        backgroundImage: preview ? `url(${preview})` : undefined,
-                        backgroundSize: "cover",
-                        backgroundPosition: "center",
-                    }, onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => {
-                        e.preventDefault();
-                        setDrag(true);
-                    }, onDragLeave: () => setDrag(false), onDrop: onDropFile, children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-image-dropzone-content", children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: drag ? free_solid_svg_icons_1.faHandHolding : free_solid_svg_icons_1.faImages, className: "text-3xl" }), (0, jsx_runtime_1.jsx)("p", { className: "input-image-dropzone-text", children: drag ? "Letakkan di sini" : preview ? "Klik atau seret untuk ganti Gambar" : "Klik atau seret gambar" })] }), (0, jsx_runtime_1.jsx)("input", { id: randomId, ref: inputRef, type: "file", accept: "image/*", className: "hidden", disabled: disabled, onChange: onUpload })] }) }), preview && !disabled && ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, paint: "danger", size: "sm", className: "absolute top-10 right-4", onClick: remove })), 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.ModalComponent, { show: openCrop, onClose: onCropCancel, title: "Sesuaikan Gambar", className: "w-max max-w-[350px]", children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(aspect.replace(":", "/")), onDone: onCropDone }) })) })) : ((0, jsx_runtime_1.jsx)(_components_1.BottomSheetComponent, { show: openCrop, onClose: onCropCancel, size: 400, children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(aspect.replace(":", "/")), onDone: onCropDone }) })) }))] }));
-};
-exports.InputImageComponent = InputImageComponent;
-const CanvasCropper = ({ src, aspect, onDone, }) => {
-    const canvasRef = (0, react_1.useRef)(null);
-    const previewRef = (0, react_1.useRef)(null);
-    const pinchDistRef = (0, react_1.useRef)(0);
-    const pinchStartZoomRef = (0, react_1.useRef)(1);
-    const [img, setImg] = (0, react_1.useState)(null);
-    const [zoom, setZoom] = (0, react_1.useState)(1);
-    const [minZoom, setMinZoom] = (0, react_1.useState)(1);
-    const [maxZoom, setMaxZoom] = (0, react_1.useState)(4);
-    const [pos, setPos] = (0, react_1.useState)({ x: 0, y: 0 });
-    const [dragging, setDragging] = (0, react_1.useState)(false);
-    const [start, setStart] = (0, react_1.useState)({ x: 0, y: 0 });
-    const CROP_SIZE = 280;
-    const CROP_W = CROP_SIZE * aspect;
-    const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
-    (0, react_1.useEffect)(() => {
-        const i = new Image();
-        i.onload = () => setImg(i);
-        i.src = src;
-    }, [src]);
-    const renderCanvas = () => {
-        if (!img)
-            return;
-        const canvas = canvasRef.current;
-        const ctx = canvas.getContext("2d");
-        canvas.width = CROP_W;
-        canvas.height = CROP_SIZE;
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        const scaledW = img.width * zoom;
-        const scaledH = img.height * zoom;
-        const x = pos.x - scaledW / 2 + CROP_W / 2;
-        const y = pos.y - scaledH / 2 + CROP_SIZE / 2;
-        ctx.drawImage(img, x, y, scaledW, scaledH);
-    };
-    (0, react_1.useEffect)(() => {
-        renderCanvas();
-    }, [img, zoom, pos]);
-    (0, react_1.useEffect)(() => {
-        if (!img)
-            return;
-        const imgW = img.naturalWidth;
-        const imgH = img.naturalHeight;
-        const scaleW = CROP_W / imgW;
-        const scaleH = CROP_SIZE / imgH;
-        const base = Math.max(scaleW, scaleH);
-        setMinZoom(base);
-        setZoom(base);
-        setMaxZoom(base * 4);
-    }, [img]);
-    const handleDown = (e) => {
-        setDragging(true);
-        setStart({ x: e.clientX, y: e.clientY });
-    };
-    const handleUp = () => setDragging(false);
-    const handleMove = (e) => {
-        if (!dragging)
-            return;
-        const dx = e.clientX - start.x;
-        const dy = e.clientY - start.y;
-        setStart({ x: e.clientX, y: e.clientY });
-        setPos((p) => {
-            const scaledW = img.naturalWidth * zoom;
-            const scaledH = img.naturalHeight * zoom;
-            const minX = (scaledW - CROP_W) / 2;
-            const maxX = -(scaledW - CROP_W) / 2;
-            const minY = (scaledH - CROP_SIZE) / 2;
-            const maxY = -(scaledH - CROP_SIZE) / 2;
-            return {
-                x: clamp(p.x + dx, maxX, minX),
-                y: clamp(p.y + dy, maxY, minY),
-            };
-        });
-    };
-    const performCrop = () => {
-        if (!img)
-            return;
-        const preview = previewRef.current;
-        const pctx = preview.getContext("2d");
-        preview.width = CROP_W;
-        preview.height = CROP_SIZE;
-        const scaledW = img.width * zoom;
-        const scaledH = img.height * zoom;
-        const x = pos.x - scaledW / 2 + CROP_W / 2;
-        const y = pos.y - scaledH / 2 + CROP_SIZE / 2;
-        pctx.drawImage(img, x, y, scaledW, scaledH);
-        preview.toBlob((blob) => {
-            const file = new File([blob], "cropped.png", { type: "image/png" });
-            onDone?.(file);
-        });
-    };
-    const handleWheel = (e) => {
-        e.preventDefault();
-        setZoom((z) => {
-            let next = z - e.deltaY * 0.002;
-            next = Math.max(minZoom, Math.min(maxZoom, next));
-            const scaledW = img.naturalWidth * next;
-            const scaledH = img.naturalHeight * next;
-            const minX = (scaledW - CROP_W) / 2;
-            const maxX = -(scaledW - CROP_W) / 2;
-            const minY = (scaledH - CROP_SIZE) / 2;
-            const maxY = -(scaledH - CROP_SIZE) / 2;
-            setPos((p) => ({
-                x: clamp(p.x, maxX, minX),
-                y: clamp(p.y, maxY, minY),
-            }));
-            return next;
-        });
-    };
-    const handleTouchStart = (e) => {
-        if (e.touches.length === 2) {
-            const t1 = e.touches[0];
-            const t2 = e.touches[1];
-            const dist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
-            pinchDistRef.current = dist;
-            pinchStartZoomRef.current = zoom;
-            e.preventDefault();
-        }
-        // Jika satu jari → drag
-        if (e.touches.length === 1) {
-            setDragging(true);
-            setStart({
-                x: e.touches[0].clientX,
-                y: e.touches[0].clientY,
-            });
-        }
-    };
-    const handleTouchMove = (e) => {
-        if (e.touches.length === 2) {
-            const t1 = e.touches[0];
-            const t2 = e.touches[1];
-            const currDist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
-            const diff = currDist - pinchDistRef.current;
-            let nextZoom = pinchStartZoomRef.current + diff * 0.005;
-            nextZoom = Math.max(minZoom, Math.min(maxZoom, nextZoom));
-            setZoom(nextZoom);
-            setPos((p) => {
-                const scaledW = img.naturalWidth * nextZoom;
-                const scaledH = img.naturalHeight * nextZoom;
-                const minX = (scaledW - CROP_W) / 2;
-                const maxX = -(scaledW - CROP_W) / 2;
-                const minY = (scaledH - CROP_SIZE) / 2;
-                const maxY = -(scaledH - CROP_SIZE) / 2;
-                return {
-                    x: Math.max(maxX, Math.min(minX, p.x)),
-                    y: Math.max(maxY, Math.min(minY, p.y)),
-                };
-            });
-            e.preventDefault();
-            return;
-        }
-        if (dragging && e.touches.length === 1) {
-            const { clientX, clientY } = e.touches[0];
-            const dx = clientX - start.x;
-            const dy = clientY - start.y;
-            setStart({ x: clientX, y: clientY });
-            setPos((p) => {
-                const scaledW = img.naturalWidth * zoom;
-                const scaledH = img.naturalHeight * zoom;
-                const minX = (scaledW - CROP_W) / 2;
-                const maxX = -(scaledW - CROP_W) / 2;
-                const minY = (scaledH - CROP_SIZE) / 2;
-                const maxY = -(scaledH - CROP_SIZE) / 2;
-                return {
-                    x: Math.max(maxX, Math.min(minX, p.x + dx)),
-                    y: Math.max(maxY, Math.min(minY, p.y + dy)),
-                };
-            });
-            e.preventDefault();
-        }
-    };
-    const handleTouchEnd = () => {
-        setDragging(false);
-        pinchDistRef.current = 0;
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { touchAction: "none" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-image-cropper-wrapper", style: { width: CROP_W, height: CROP_SIZE }, onMouseMove: handleMove, onMouseUp: handleUp, onMouseLeave: handleUp, onWheel: handleWheel, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, children: [(0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, width: CROP_W, height: CROP_SIZE, onMouseDown: handleDown, className: "cursor-move" }), (0, jsx_runtime_1.jsxs)("div", { className: "input-image-cropper-grid-container", style: { width: CROP_W, height: CROP_SIZE }, children: [(0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-border" }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-h input-image-cropper-grid-line-h-1" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-h input-image-cropper-grid-line-h-2" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-v input-image-cropper-grid-line-v-1" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-v input-image-cropper-grid-line-v-2" })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "p-4 pb-2", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: performCrop, block: true }) }), (0, jsx_runtime_1.jsx)("canvas", { ref: previewRef, className: "hidden" })] }));
-};
-exports.CanvasCropper = CanvasCropper;

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

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

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

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

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

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

@@ -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" }))] }));
-}