@skalfa/skalfa-component 1.0.2 → 1.0.3

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

@@ -1,30 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputCurrencyComponent = InputCurrencyComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const _utils_1 = require("@utils");
-function InputCurrencyComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, format, register, unregister, onChange, 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);
-    return ((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 ? _utils_1.conversion.currency(inputHandler.value, format?.locale, format?.currency) : "", onChange: (e) => {
-                            const val = Number(e.target.value.replace(/[^0-9]/g, ""));
-                            inputHandler.setValue(val);
-                            inputHandler.setIdle(false);
-                            onChange?.(val);
-                        }, 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", 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 }))] }));
-}

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

@@ -1,24 +0,0 @@
-import { InputHTMLAttributes, ReactNode } from "react";
-import { ValidationRules } from "@utils";
-export interface InputDateProps 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 InputDateComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className, ...props }: InputDateProps): import("react").JSX.Element;
-export interface InputDatePickerProps {
-    onChange?: (date: string) => void;
-    minDate?: string;
-    maxDate?: string;
-    rightElement?: ReactNode;
-}
-export declare const InputDatePickerComponent: React.FC<InputDatePickerProps>;

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

@@ -1,107 +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.InputDatePickerComponent = void 0;
-exports.InputDateComponent = InputDateComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const moment_1 = __importDefault(require("moment"));
-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");
-function InputDateComponent({ 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"), 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", "error")), 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.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", !!invalidMessage && (0, _utils_1.pcn)(className, "input", "error")), value: inputHandler.value, onChange: (e) => {
-                                        inputHandler.setValue(e.target.value);
-                                        inputHandler.setValue(false);
-                                        onChange?.(e.target.value);
-                                    }, onFocus: (e) => {
-                                        props.onFocus?.(e);
-                                        inputHandler.setFocus(true);
-                                    }, onBlur: (e) => {
-                                        props.onBlur?.(e);
-                                    }, 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"), 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 })), !isSm && inputHandler.focus && ((0, jsx_runtime_1.jsx)("div", { className: "input-date-picker-popover", children: (0, jsx_runtime_1.jsx)(exports.InputDatePickerComponent, { 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: 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.InputDatePickerComponent, { onChange: (e) => {
-                            inputHandler.setValue(e);
-                            onChange?.(e);
-                        } }) }) }))] }));
-}
-;
-const InputDatePickerComponent = ({ onChange, minDate, maxDate, rightElement, }) => {
-    const activeYearRef = (0, react_1.useRef)(null);
-    const containerYearRef = (0, react_1.useRef)(null);
-    const [currentDate, setCurrentDate] = (0, react_1.useState)((0, moment_1.default)());
-    const [selectedDate, setSelectedDate] = (0, react_1.useState)((0, moment_1.default)());
-    const startDate = (0, moment_1.default)(currentDate).startOf("month").startOf("week");
-    const endDate = (0, moment_1.default)(currentDate).endOf("month").endOf("week");
-    const handlePrevMonth = () => setCurrentDate((0, moment_1.default)(currentDate).subtract(1, "month"));
-    const handleNextMonth = () => setCurrentDate((0, moment_1.default)(currentDate).add(1, "month"));
-    const handleDateClick = (date) => {
-        if ((minDate && date.isBefore((0, moment_1.default)(minDate))) || (maxDate && date.isAfter((0, moment_1.default)(maxDate)))) {
-            return;
-        }
-        setSelectedDate(date);
-        onChange?.(date.format("YYYY-MM-DD"));
-    };
-    const renderDays = () => {
-        const days = [];
-        const startDay = (0, moment_1.default)(startDate);
-        for (let i = 0; i < 7; i++) {
-            days.push((0, jsx_runtime_1.jsx)("div", { className: "text-center font-bold", children: startDay.add(i, "days").format("dd") }, i));
-        }
-        return days;
-    };
-    const renderCells = () => {
-        const rows = [];
-        let days = [];
-        const day = (0, moment_1.default)(startDate);
-        while (day.isBefore(endDate) || day.isSame(endDate, "day")) {
-            for (let i = 0; i < 7; i++) {
-                const cloneDay = (0, moment_1.default)(day);
-                days.push((0, jsx_runtime_1.jsx)("div", { className: `w-8 aspect-square flex items-center justify-center text-center rounded-lg transition-all 
-              ${day.isSame(currentDate, "month") ? "text-foreground" : "text-light-foreground"} 
-              ${day.isSame(selectedDate, "day") ? "bg-primary text-background" : "hover:bg-light-primary"}
-              ${day.isSame((0, moment_1.default)(), "day") ? "border !border-primary" : "hover:bg-light-primary"} 
-              ${(minDate && day.isBefore((0, moment_1.default)(minDate))) || (maxDate && day.isAfter((0, moment_1.default)(maxDate))) ? "opacity-10 cursor-not-allowed" : "cursor-pointer"}`, onClick: () => handleDateClick(cloneDay), children: day.format("D") }, day.toString()));
-                day.add(1, "day");
-            }
-            rows.push((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-7 gap-1", children: days }, day.toString()));
-            days = [];
-        }
-        return rows;
-    };
-    const years = (0, react_1.useMemo)(() => {
-        const dumpYears = [];
-        for (let i = 1945; i <= (0, moment_1.default)().year(); i++) {
-            dumpYears.push(i);
-        }
-        return dumpYears;
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (activeYearRef.current && containerYearRef.current) {
-            containerYearRef.current.scrollTo({
-                top: activeYearRef.current.offsetTop - containerYearRef.current.offsetTop,
-            });
-        }
-    }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full flex gap-2 max-h-[260]", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-1/5 overflow-y-auto input-scroll pr-1", ref: containerYearRef, children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col", children: years?.map((item) => {
-                        const isActive = currentDate?.year() === item;
-                        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { ref: isActive ? activeYearRef : null, className: `py-1 px-2 font-semibold rounded-[6px] cursor-pointer ${isActive && "bg-light-primary"}`, onClick: () => setCurrentDate((0, moment_1.default)().set("year", item)), children: item }, item) }));
-                    }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "w-4/5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center mb-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: handlePrevMonth, className: "w-8 text-sm aspect-square rounded-full cursor-pointer", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronLeft }) }), (0, jsx_runtime_1.jsx)("h2", { className: "font-semibold", children: currentDate.format("MMMM") }), (0, jsx_runtime_1.jsx)("button", { onClick: handleNextMonth, className: "w-8 text-sm aspect-square rounded-full cursor-pointer", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronRight }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: renderDays() }), (0, jsx_runtime_1.jsx)("div", { children: renderCells() })] }), rightElement && (0, jsx_runtime_1.jsx)("div", { children: rightElement })] }));
-};
-exports.InputDatePickerComponent = InputDatePickerComponent;

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

@@ -1,17 +0,0 @@
-import { InputHTMLAttributes, ReactNode } from "react";
-import { ValidationRules } from "@utils";
-export interface InputDateTimeProps 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::", "suggest::", "suggest-item::". */
-    className?: string;
-}
-export declare function InputDatetimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className, ...props }: InputDateTimeProps): import("react").JSX.Element;

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

@@ -1,75 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputDatetimeComponent = InputDatetimeComponent;
-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 InputDatetimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className = "", ...props }) {
-    const { isSm } = (0, _utils_1.useResponsive)();
-    const [pickerType, setPickerType] = (0, react_1.useState)("date");
-    const [dateValue, setDateValue] = (0, react_1.useState)("");
-    const [timeValue, setTimeValue] = (0, react_1.useState)("");
-    // =========================>
-    // ## 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
-    // =========================>
-    (0, react_1.useEffect)(() => {
-        inputHandler.setValue(value || "");
-        value && inputHandler.setValue(false);
-        if (value) {
-            const [d, t] = value.split(" ");
-            setDateValue(d || "");
-            setTimeValue(t || "");
-        }
-    }, [value]);
-    const handleChange = (date, time) => {
-        const newVal = `${date} ${time}`;
-        inputHandler.setValue(newVal.trim());
-        onChange?.(newVal.trim());
-    };
-    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, readOnly: true, 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, 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)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "input-datetime-picker-popover", children: [(0, jsx_runtime_1.jsx)(_components_1.TabbarComponent, { items: [
-                                                    {
-                                                        label: "Tanggal",
-                                                        value: 'date'
-                                                    },
-                                                    {
-                                                        label: "Jam",
-                                                        value: 'time'
-                                                    },
-                                                ], active: pickerType, onChange: (e) => setPickerType(e), className: "mb-4" }), pickerType === "date" ? ((0, jsx_runtime_1.jsx)(_components_1.InputDatePickerComponent, { onChange: (e) => {
-                                                    setDateValue(e);
-                                                    handleChange(e, timeValue);
-                                                } })) : ((0, jsx_runtime_1.jsx)(_components_1.InputTimePickerComponent, { onChange: (e) => {
-                                                    setTimeValue(e);
-                                                    handleChange(dateValue, 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: 430, 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.jsxs)("div", { className: "p-4", children: [(0, jsx_runtime_1.jsx)(_components_1.TabbarComponent, { items: [
-                                {
-                                    label: "Tanggal",
-                                    value: 'date'
-                                },
-                                {
-                                    label: "Jam",
-                                    value: 'time'
-                                },
-                            ], active: pickerType, onChange: (e) => setPickerType(e), className: "mb-4" }), pickerType === "date" ? ((0, jsx_runtime_1.jsx)(_components_1.InputDatePickerComponent, { onChange: (e) => {
-                                setDateValue(e);
-                                handleChange(e, timeValue);
-                            } })) : ((0, jsx_runtime_1.jsx)(_components_1.InputTimePickerComponent, { onChange: (e) => {
-                                setTimeValue(e);
-                                handleChange(dateValue, e);
-                            } }))] }) }))] }));
-}

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

@@ -1,22 +0,0 @@
-import { InputHTMLAttributes, ReactNode } from "react";
-import { ValidationRules } from "@utils";
-export interface InputDocumentProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
-    label?: string;
-    tip?: string | 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;
-    /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
-    className?: string;
-}
-export declare function InputDocumentComponent({ label, tip, leftIcon, rightIcon, className, value, invalid, validations, register, unregister, onChange, ...props }: InputDocumentProps): import("react").JSX.Element;
-export interface InputDocumentPickerProps {
-    value?: any[];
-    onChange?: (value: any[]) => void;
-}
-export declare const InputDocumentPicker: React.FC<InputDocumentPickerProps>;

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

@@ -1,88 +0,0 @@
-"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/src/input/InputImage.component.d.ts

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