@skalfa/skalfa-component 1.0.0

package/dist/input/Checkbox.component.js

@@ -0,0 +1,23 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxComponent = CheckboxComponent;
+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");
+function CheckboxComponent({ name, label, value, disabled = false, checked = false, invalid, onChange, className = "", }) {
+    // =========================>
+    // ## Initial
+    // =========================>
+    const randomId = (0, _utils_1.useInputRandomId)();
+    const [invalidMessage, setInvalidMessage] = (0, react_1.useState)("");
+    // =========================>
+    // ## Invalid handler
+    // =========================>
+    (0, react_1.useEffect)(() => {
+        setInvalidMessage(invalid || "");
+    }, [invalid]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "checkbox-container", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "hidden", id: randomId, name: name, onChange: onChange, defaultChecked: checked, value: value, disabled: disabled }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("checkbox-wrapper", disabled && "checkbox-wrapper-disabled"), children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("checkbox-input", checked && "checkbox-input-checked", checked && (0, _utils_1.pcn)(className, "checked"), (0, _utils_1.pcn)(className, "base")), children: checked && (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faCheck, className: "text-sm" }) }) }), (0, jsx_runtime_1.jsx)("span", { className: (0, _utils_1.cn)("checkbox-label", checked && "checkbox-label-checked", (0, _utils_1.pcn)(className, "label"), checked && (0, _utils_1.pcn)(className, "label", "checked"), disabled && (0, _utils_1.pcn)(className, "label", "disabled")), children: label })] }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }));
+}

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

@@ -0,0 +1,23 @@
+import { InputHTMLAttributes, ReactNode, Ref } from "react";
+import { ValidationRules } from "@utils";
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    label?: string;
+    tip?: string | ReactNode;
+    leftIcon?: any;
+    rightIcon?: any;
+    value?: any;
+    invalid?: string;
+    suggestions?: string[];
+    validations?: ValidationRules;
+    onlyAlphabet?: boolean;
+    uppercase?: boolean;
+    lowercase?: boolean;
+    multiple?: boolean;
+    onChange?: (value: any) => any;
+    register?: (name: string, validations?: ValidationRules) => void;
+    unregister?: (name: string) => void;
+    ref?: Ref<HTMLInputElement>;
+    /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
+    className?: string;
+}
+export declare function InputComponent({ label, tip, leftIcon, rightIcon, className, value, invalid, suggestions, validations, onlyAlphabet, uppercase, lowercase, multiple, register, unregister, onChange, ref, ...props }: InputProps): import("react").JSX.Element;

package/dist/input/Input.component.js

@@ -0,0 +1,134 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputComponent = InputComponent;
+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 InputValues_component_1 = require("./InputValues.component");
+function InputComponent({ label, tip, leftIcon, rightIcon, className = "", value, invalid, suggestions, validations, onlyAlphabet, uppercase, lowercase, multiple, register, unregister, onChange, ref, ...props }) {
+    const [activeSuggestion, setActiveSuggestion] = (0, react_1.useState)(0);
+    const [showSuggestions, setShowSuggestions] = (0, react_1.useState)(false);
+    const [dataSuggestions, setDataSuggestions] = (0, react_1.useState)([]);
+    const [filteredSuggestions, setFilteredSuggestions] = (0, react_1.useState)([]);
+    // =========================>
+    // ## 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);
+    // =========================>
+    // ## Change value handler
+    // =========================>
+    (0, react_1.useEffect)(() => {
+        if (inputHandler.value && typeof inputHandler.value === "string") {
+            let newVal = onlyAlphabet ? inputHandler.value.replace(/[^A-Za-z ]+/g, "") : inputHandler.value;
+            if (uppercase)
+                newVal = newVal.toUpperCase();
+            if (lowercase)
+                newVal = newVal.toLowerCase();
+            if (validations && _utils_1.validation.hasRules(validations, "max"))
+                newVal = newVal.slice(0, parseInt(_utils_1.validation.getRules(validations, "max") || "0"));
+            inputHandler.setValue(newVal);
+        }
+    }, [inputHandler.value, onlyAlphabet, uppercase, lowercase, validations]);
+    // =========================>
+    // ## suggestions handler
+    // =========================>
+    (0, react_1.useEffect)(() => {
+        setDataSuggestions(suggestions);
+    }, [suggestions]);
+    const filterSuggestion = (e) => {
+        if (dataSuggestions?.length) {
+            let filteredSuggestion = [];
+            if (e.target.value) {
+                filteredSuggestion = dataSuggestions
+                    .filter((suggestion) => suggestion.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1)
+                    .slice(0, 10);
+            }
+            else {
+                filteredSuggestion = dataSuggestions.slice(0, 10);
+            }
+            setActiveSuggestion(-1);
+            setFilteredSuggestions(filteredSuggestion);
+            setShowSuggestions(true);
+        }
+    };
+    const onKeyDownSuggestion = (e) => {
+        if (dataSuggestions?.length) {
+            if (e.keyCode === 13) {
+                const resultValue = filteredSuggestions?.at(activeSuggestion);
+                setActiveSuggestion(-1);
+                setFilteredSuggestions([]);
+                setShowSuggestions(false);
+                inputHandler.setValue(resultValue ? resultValue : inputHandler.value);
+                if (onChange) {
+                    onChange(resultValue ? resultValue : inputHandler.value);
+                }
+                e.preventDefault();
+            }
+            else if (e.keyCode === 38) {
+                if (activeSuggestion === 0) {
+                    return;
+                }
+                setActiveSuggestion(activeSuggestion - 1);
+            }
+            else if (e.keyCode === 40) {
+                if (activeSuggestion + 1 >= (filteredSuggestions?.length || 0)) {
+                    return;
+                }
+                setActiveSuggestion(activeSuggestion + 1);
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex flex-col gap-y-0.5", 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.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { ...props, ref: ref, id: randomId, placeholder: !multiple || (multiple && !inputHandler.value?.length) ? props.placeholder : "", className: (0, _utils_1.cn)("input", props.type == "file" && "input-file", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", !!invalidMessage && "input-error", (0, _utils_1.pcn)(className, "base"), !!invalidMessage && (0, _utils_1.pcn)(className, "base", "error")), value: !multiple ? inputHandler.value : undefined, onChange: (e) => {
+                                if (!multiple) {
+                                    inputHandler.setValue(e.target.value);
+                                    inputHandler.setIdle(false);
+                                    onChange?.(props.type == "file" ? e.target?.files && e.target?.files[0] : e.target.value);
+                                    dataSuggestions?.length && filterSuggestion(e);
+                                }
+                            }, onFocus: (e) => {
+                                props.onFocus?.(e);
+                                inputHandler.setFocus(true);
+                                dataSuggestions?.length && filterSuggestion(e);
+                            }, onBlur: (e) => {
+                                props.onBlur?.(e);
+                                setTimeout(() => inputHandler.setFocus(false), 100);
+                            }, onKeyDown: (e) => {
+                                dataSuggestions?.length && onKeyDownSuggestion(e);
+                                if (multiple && e.key === "Enter" || e.key === ",") {
+                                    e.preventDefault();
+                                    const currentValue = e.currentTarget.value.trim();
+                                    if (!currentValue)
+                                        return;
+                                    const currentValues = Array.isArray(inputHandler.value) ? [...inputHandler.value] : [];
+                                    if (!currentValues.includes(currentValue)) {
+                                        const newValues = [...currentValues, currentValue];
+                                        onChange?.(newValues);
+                                        inputHandler.setValue(newValues);
+                                        e.currentTarget.value = "";
+                                    }
+                                }
+                            }, autoComplete: props.autoComplete || dataSuggestions?.length ? "off" : "" }), (multiple) && ((0, jsx_runtime_1.jsx)(InputValues_component_1.InputValues, { value: inputHandler.value || [], isFocus: inputHandler.focus, onFocus: () => setTimeout(() => inputHandler.setFocus(true), 110), onDelete: (_, index) => {
+                                const values = Array().concat(inputHandler.value);
+                                const newValues = values.filter((_, val) => val != index);
+                                inputHandler.setValue(newValues);
+                                onChange?.(newValues);
+                            }, className: `${!inputHandler.focus && (leftIcon ? "ml-[2.5rem]" : "ml-[1rem]")}`, style: { maxWidth: `calc(100% - ${leftIcon ? "5.2rem" : "2rem"})` } })), 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 }))] }), !!dataSuggestions?.length && showSuggestions && !!filteredSuggestions?.length && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("ul", { className: (0, _utils_1.cn)("input-suggest-container", inputHandler.focus && "input-suggest-container-active", (0, _utils_1.pcn)(className, "suggest")), children: filteredSuggestions.map((suggestion, key) => {
+                            return ((0, jsx_runtime_1.jsx)("li", { className: (0, _utils_1.cn)("input-suggest", inputHandler.value == suggestion && "input-suggest-active", (0, _utils_1.pcn)(className, "suggest-item"), inputHandler.value == suggestion && (0, _utils_1.pcn)(className, "suggest-item", "active")), onMouseDown: () => {
+                                    setTimeout(() => inputHandler.setFocus(true), 110);
+                                }, onMouseUp: () => {
+                                    setActiveSuggestion(key);
+                                    setFilteredSuggestions([]);
+                                    setShowSuggestions(false);
+                                    inputHandler.setValue(filteredSuggestions[key] || inputHandler.value);
+                                    onChange?.(filteredSuggestions[key] || inputHandler.value);
+                                    setTimeout(() => inputHandler.setFocus(false), 120);
+                                }, children: suggestion }, suggestion));
+                        }) }) })), 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/InputCheckbox.component.d.ts

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

package/dist/input/InputCheckbox.component.js

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

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

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

package/dist/input/InputCurrency.component.js

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

@@ -0,0 +1,24 @@
+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/input/InputDate.component.js

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

@@ -0,0 +1,17 @@
+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/input/InputDatetime.component.js

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

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