@skalfa/skalfa-component 1.0.0

package/dist/input/InputDocument.component.js

@@ -0,0 +1,88 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputDocumentPicker = void 0;
+exports.InputDocumentComponent = InputDocumentComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+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");
+const _components_1 = require("@components");
+const DocumentViewerComponent = (props) => {
+    const Comp = _utils_1.registry.get("DocumentViewerComponent");
+    return Comp ? (0, jsx_runtime_1.jsx)(Comp, { ...props }) : null;
+};
+const DocumentViewerIcon = (ext) => {
+    const getIcon = _utils_1.registry.get("DocumentViewerIcon");
+    return getIcon ? getIcon(ext) : null;
+};
+function InputDocumentComponent({ label, tip, leftIcon, rightIcon, className = "", value, invalid, validations, register, unregister, onChange, ...props }) {
+    const { isSm } = (0, _utils_1.useResponsive)();
+    // =========================>
+    // ## Initial
+    // =========================>
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, unregister, props.type == "file");
+    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"), 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, placeholder: !inputHandler.value ? props.placeholder : "", className: (0, _utils_1.cn)("input cursor-pointer", props.type == "file" && "input-file", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", (0, _utils_1.pcn)(className, "base"), !!invalidMessage && "input-error", !!invalidMessage && (0, _utils_1.pcn)(className, "base", "error")), onFocus: (e) => {
+                                    props.onFocus?.(e);
+                                    inputHandler.setFocus(true);
+                                }, inputMode: "none" }), (inputHandler.value) && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("input-document-values", leftIcon ? "input-document-values-left-icon" : "input-document-values-no-icon"), style: { maxWidth: `calc(100% - ${leftIcon ? "5.2rem" : "2rem"})` }, onClick: () => {
+                                    inputHandler.setFocus(true);
+                                }, children: (Array.isArray(inputHandler.value) ? inputHandler.value : []).map((f) => {
+                                    return ((0, jsx_runtime_1.jsxs)("span", { className: "input-document-value-item", children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: DocumentViewerIcon(f.file.name.split(".").pop()?.toLowerCase()), className: "text-light-foreground" }), (0, jsx_runtime_1.jsx)("span", { className: "line-clamp-1", children: f.file.name })] }, f.id));
+                                }) })), 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 })), 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"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: rightIcon }))] }), 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.FloatingPageComponent, { show: inputHandler.focus, onClose: () => inputHandler.setFocus(false), title: label, footer: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: () => inputHandler.setFocus(false), block: true }), children: (0, jsx_runtime_1.jsx)(exports.InputDocumentPicker, { value: inputHandler.value, onChange: (e) => {
+                        inputHandler.setValue(e);
+                        if (inputHandler.idle)
+                            inputHandler.setIdle(false);
+                        onChange?.(e);
+                    } }) })) : ((0, jsx_runtime_1.jsx)(_components_1.BottomSheetComponent, { show: inputHandler.focus, onClose: () => inputHandler.setFocus(false), size: '98vh', footer: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: () => inputHandler.setFocus(false), block: true }), children: (0, jsx_runtime_1.jsx)(exports.InputDocumentPicker, { value: inputHandler.value, onChange: (e) => {
+                        inputHandler.setValue(e);
+                        if (inputHandler.idle)
+                            inputHandler.setIdle(false);
+                        onChange?.(e);
+                    } }) }))] }));
+}
+const InputDocumentPicker = ({ value, onChange }) => {
+    const { isSm } = (0, _utils_1.useResponsive)();
+    const fileInputRef = (0, react_1.useRef)(null);
+    const [previewActive, setPreviewActive] = (0, react_1.useState)(null);
+    const files = Array.isArray(value) ? value : [];
+    function updateFiles(next) {
+        onChange?.(next);
+    }
+    function handleFilePick(e) {
+        const picked = e.target.files;
+        if (!picked)
+            return;
+        const next = [...files];
+        Array.from(picked).forEach((f) => {
+            const id = Math.random().toString(36).substring(7);
+            next.push({
+                id,
+                file: f,
+                url: URL.createObjectURL(f),
+                type: f.type,
+            });
+            if (!previewActive)
+                setPreviewActive(id);
+        });
+        updateFiles(next);
+        e.target.value = "";
+    }
+    function removeFile(id) {
+        const next = files.filter((x) => x.id !== id);
+        updateFiles(next);
+        if (previewActive === id) {
+            setPreviewActive(next[0]?.id || null);
+        }
+    }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "p-4 flex flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "input-document-dropzone", children: files.find((x) => x.id === previewActive)?.file ? ((0, jsx_runtime_1.jsx)(DocumentViewerComponent, { file: files.find((x) => x.id === previewActive)?.file })) : ((0, jsx_runtime_1.jsxs)("div", { className: "input-document-empty-box", onClick: () => fileInputRef.current?.click(), children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faPlus, className: "text-3xl" }), (0, jsx_runtime_1.jsx)("p", { className: "text-lg", children: "Tambah Dokumen" })] })) }), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", multiple: true, className: "hidden", onChange: handleFilePick }), (0, jsx_runtime_1.jsx)("div", { className: "input-document-thumbs-container", children: (0, jsx_runtime_1.jsxs)("div", { className: "input-document-thumbs-grid", children: [files.map((f) => {
+                                return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("input-document-thumb-wrapper", previewActive === f.id && "input-document-thumb-wrapper-active"), onClick: () => setPreviewActive(f.id), children: [(0, jsx_runtime_1.jsx)(DocumentViewerComponent, { file: f.file, mode: "thumb" }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, onClick: () => removeFile(f.id), variant: "light", paint: "danger", className: "absolute top-2 right-2", size: isSm ? "xs" : "sm" })] }, f.id));
+                            }), (0, jsx_runtime_1.jsxs)("div", { className: "input-document-upload-box", onClick: () => fileInputRef.current?.click(), children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faPlus }), (0, jsx_runtime_1.jsx)("p", { className: "text-[10px] text-center", children: "Tambah Dokumen" })] })] }) })] }) }));
+};
+exports.InputDocumentPicker = InputDocumentPicker;

package/dist/input/InputImage.component.d.ts

@@ -0,0 +1,23 @@
+import { ValidationRules } from "@utils";
+export interface InputImageProps {
+    name: string;
+    label?: string;
+    tip?: string;
+    value?: string | File;
+    aspect?: string;
+    invalid?: string;
+    disabled?: boolean;
+    validations?: ValidationRules;
+    onChange?: (file?: File | null) => void;
+    register?: (name: string, validations?: ValidationRules) => void;
+    unregister?: (name: string) => void;
+    className?: string;
+}
+export declare const InputImageComponent: React.FC<InputImageProps>;
+interface CropperProps {
+    src: string;
+    aspect: number;
+    onDone?: (file: File) => void;
+}
+export declare const CanvasCropper: React.FC<CropperProps>;
+export {};

package/dist/input/InputImage.component.js

@@ -0,0 +1,260 @@
+"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/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/input/InputMap.component.js

@@ -0,0 +1,103 @@
+"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 LoadScriptComponent = api_1.LoadScript;
+const GoogleMapComponent = api_1.GoogleMap;
+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)(LoadScriptComponent, { googleMapsApiKey: process.env.NEXT_PUBLIC_MAP_KEY || "", children: (0, jsx_runtime_1.jsx)(GoogleMapComponent, { 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/input/InputNumber.component.d.ts

@@ -0,0 +1,19 @@
+import { 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): import("react").JSX.Element;

package/dist/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/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>;