@skalfa/skalfa-component 1.0.0

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

@@ -0,0 +1,47 @@
+import { ReactNode } from "react";
+import { ApiType, ValidationRules } from "@utils";
+export interface SelectOptionProps {
+    label: string | ReactNode;
+    value: string | number;
+    searchable?: string[];
+    customLabel?: ReactNode;
+}
+export interface SelectProps {
+    name: string;
+    label?: string;
+    placeholder?: string;
+    tip?: string | ReactNode;
+    leftIcon?: any;
+    rightIcon?: any;
+    value?: string | number | (string | number)[];
+    invalid?: string;
+    disabled?: boolean;
+    validations?: ValidationRules;
+    multiple?: boolean;
+    autoFocus?: boolean;
+    clearable?: boolean;
+    options?: SelectOptionProps[];
+    searchable?: boolean;
+    serverOptionControl?: ApiType & {
+        cacheName?: string | false;
+    };
+    idbOptionControl?: {
+        store: string;
+        labelKey: string;
+        valueKey: string;
+    };
+    serverSearchable?: boolean;
+    includedOptions?: SelectOptionProps[];
+    exceptOptions?: (string | number)[];
+    tempOptions?: SelectOptionProps[];
+    newOption?: SelectOptionProps;
+    maxShowOption?: number;
+    onChange?: (value: string | number | (string | number)[], data?: any) => any;
+    register?: (name: string, validations?: ValidationRules) => void;
+    unregister?: (name: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
+    className?: string;
+}
+export declare function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, value, invalid, disabled, validations, multiple, autoFocus, clearable, options, searchable, serverOptionControl, idbOptionControl, serverSearchable, includedOptions, exceptOptions, tempOptions, newOption, maxShowOption, register, unregister, onChange, onFocus, onBlur, className, }: SelectProps): import("react").JSX.Element;

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

@@ -0,0 +1,275 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectComponent = SelectComponent;
+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 SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, value, invalid, disabled, validations, multiple, autoFocus, clearable, options = [], searchable, serverOptionControl, idbOptionControl, serverSearchable, includedOptions = [], exceptOptions = [], tempOptions, newOption, maxShowOption = 10, register, unregister, onChange, onFocus, onBlur, className = "", }) {
+    const [inputShowValue, setInputShowValue] = (0, react_1.useState)("");
+    const [keydown, setKeydown] = (0, react_1.useState)(false);
+    const [useTemp, setUseTemp] = (0, react_1.useState)(true);
+    const [dataOptions, setDataOptions] = (0, react_1.useState)([]);
+    const [filteredOptions, setFilteredOptions] = (0, react_1.useState)([]);
+    const [loadingOption, setLoadingOption] = (0, react_1.useState)(false);
+    const [activeOption, setActiveOption] = (0, react_1.useState)(0);
+    const [showOption, setShowOption] = (0, react_1.useState)(false);
+    const [keyword, setKeyword] = (0, react_1.useState)("");
+    const [keywordSearch] = (0, _utils_1.useLazySearch)(keyword);
+    // =========================>
+    // ## Initial
+    // =========================>
+    const inputHandler = (0, _utils_1.useInputHandler)(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)(() => {
+        if (value) {
+            inputHandler.setValue(value);
+            Array.isArray(dataOptions) && setInputShowValue((newOption ? [newOption, ...dataOptions] : dataOptions)?.find((option) => option.value == value)?.label || "");
+            inputHandler.setIdle(false);
+        }
+        else {
+            inputHandler.setValue("");
+            setInputShowValue("");
+        }
+    }, [value, dataOptions]);
+    // =========================>
+    // ## options handler
+    // =========================>
+    (0, react_1.useEffect)(() => {
+        options?.length && setDataOptions([...options, ...includedOptions].filter((op) => !exceptOptions?.includes(op.value)));
+    }, [options]);
+    const filterOption = (e) => {
+        if (dataOptions?.length) {
+            let newFilteredOptions = [];
+            if (searchable && !serverSearchable) {
+                if (e.target.value) {
+                    newFilteredOptions = dataOptions.filter((Option) => Option.label?.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1).slice(0, maxShowOption);
+                }
+                else {
+                    newFilteredOptions = dataOptions.slice(0, maxShowOption);
+                }
+            }
+            else {
+                newFilteredOptions = dataOptions;
+            }
+            setActiveOption(-1);
+            setFilteredOptions(newFilteredOptions);
+            setShowOption(true);
+        }
+    };
+    const onKeyDownOption = (e) => {
+        if (dataOptions?.length) {
+            if (e.keyCode === 13) {
+                const resultValue = filteredOptions?.at(activeOption);
+                setActiveOption(-1);
+                setFilteredOptions([]);
+                setShowOption(false);
+                if (!multiple) {
+                    setInputShowValue(resultValue?.label || inputShowValue);
+                    inputHandler.setValue(resultValue?.value || inputShowValue);
+                    serverSearchable && setKeyword(resultValue?.label || keyword);
+                }
+                else {
+                    if (resultValue?.value) {
+                        searchable ? setInputShowValue(resultValue.label) : searchable && setInputShowValue("");
+                        serverSearchable && setKeyword(resultValue.label);
+                        const values = Array.isArray(inputHandler.value) ? Array().concat(inputHandler.value)?.filter((val) => val != resultValue?.value) : [];
+                        if (values.find((val) => val == resultValue?.value)) {
+                            inputHandler.setValue(values);
+                        }
+                        else {
+                            inputHandler.setValue([...Array().concat(values), resultValue.value]);
+                        }
+                    }
+                }
+                e.preventDefault();
+            }
+            else if (e.keyCode === 38) {
+                if (activeOption === 0)
+                    return;
+                setActiveOption(activeOption - 1);
+            }
+            else if (e.keyCode === 40) {
+                if (activeOption + 1 >= (filteredOptions?.length || 0))
+                    return;
+                setActiveOption(activeOption + 1);
+            }
+        }
+    };
+    const fetchOptions = async () => {
+        setLoadingOption(true);
+        const serverControl = {
+            ...serverOptionControl,
+            params: serverSearchable ? { search: keywordSearch, ...(serverOptionControl?.params || {}) } : (serverOptionControl?.params || {}),
+            headers: { "X-Option": 1 }
+        };
+        const getCacheOptions = await _utils_1.cavity.get(serverOptionControl?.cacheName || `option_${serverOptionControl?.path}`);
+        const cacheOptions = (getCacheOptions?.data || []);
+        if (cacheOptions?.length) {
+            setDataOptions([...cacheOptions, ...includedOptions].filter((op) => !exceptOptions?.includes(op.value)));
+            setLoadingOption(false);
+        }
+        else {
+            const mutateOptions = await (0, _utils_1.api)(serverControl || {});
+            setDataOptions([...(mutateOptions?.data?.data || []), ...(includedOptions || [])].filter((op) => !exceptOptions?.includes(op.value)));
+            setShowOption(true);
+            if (serverOptionControl?.cacheName != false) {
+                _utils_1.cavity.set({
+                    key: serverOptionControl?.cacheName || `option_${serverOptionControl?.path}`,
+                    data: mutateOptions?.data,
+                    expired: 5,
+                });
+            }
+            setLoadingOption(false);
+        }
+    };
+    const fetchIdbOptions = async () => {
+        setLoadingOption(true);
+        if (idbOptionControl?.store) {
+            const idb = _utils_1.registry.get("idb");
+            if (!idb) {
+                throw new Error("IndexedDB (IDB) extension is not installed.");
+            }
+            const getIdbOptions = await (await idb.query(idbOptionControl?.store)).get();
+            const rows = getIdbOptions.map((row) => {
+                const value = row[idbOptionControl.valueKey] || row["id"];
+                const label = row[idbOptionControl.labelKey] || row["id"];
+                return {
+                    label,
+                    value,
+                    ...row,
+                };
+            });
+            setDataOptions(rows);
+            setLoadingOption(false);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (!serverSearchable) {
+            if (serverOptionControl?.path || serverOptionControl?.url) {
+                fetchOptions();
+            }
+            else if (idbOptionControl?.store) {
+                fetchIdbOptions();
+            }
+            else {
+                !options && setDataOptions([]);
+            }
+        }
+    }, [serverOptionControl?.path, serverOptionControl?.url]);
+    (0, react_1.useEffect)(() => {
+        if (serverSearchable) {
+            if (serverOptionControl?.path || serverOptionControl?.url) {
+                fetchOptions();
+            }
+            else {
+                !options && setDataOptions([]);
+            }
+        }
+    }, [keywordSearch, serverOptionControl?.path, serverOptionControl?.url]);
+    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", disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label"), 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", 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: "relative", children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", value: !multiple ? String(inputHandler.value) : Array().concat(inputHandler.value).map((val) => String(val)), name: name }), (0, jsx_runtime_1.jsx)("input", { type: "text", readOnly: !searchable, id: randomId, placeholder: !inputHandler.value || (Array.isArray(inputHandler.value) && !inputHandler.value.length) ? placeholder : "", disabled: disabled, className: (0, _utils_1.cn)("input cursor-pointer", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", invalidMessage && "input-error", (0, _utils_1.pcn)(className, "input"), invalidMessage && (0, _utils_1.pcn)(className, "input", "error")), value: (useTemp && tempOptions ? tempOptions.at(0)?.label : serverSearchable ? keyword : inputShowValue), onChange: (e) => {
+                                setUseTemp(false);
+                                searchable && setInputShowValue(e.target.value);
+                                serverSearchable && setKeyword(e.target.value);
+                                inputHandler.setIdle(false);
+                                dataOptions?.length && filterOption(e);
+                            }, onFocus: (e) => {
+                                setUseTemp(false);
+                                inputHandler.setFocus(true);
+                                onFocus?.();
+                                dataOptions?.length && filterOption(e);
+                                searchable && e.target.select();
+                            }, onBlur: (e) => {
+                                setUseTemp(false);
+                                const value = e.target.value;
+                                const valueOption = dataOptions?.find((option) => option.label?.toLowerCase() == value?.toLowerCase());
+                                if (!keydown) {
+                                    if (!multiple) {
+                                        setTimeout(() => {
+                                            if (valueOption?.value) {
+                                                setInputShowValue(valueOption.label);
+                                                inputHandler.setValue(valueOption.value);
+                                                serverSearchable && setKeyword(valueOption.label);
+                                                onChange?.(valueOption.value, valueOption);
+                                            }
+                                            else {
+                                                setInputShowValue("");
+                                                serverSearchable && setKeyword("");
+                                                inputHandler.setValue("");
+                                                onChange?.("");
+                                            }
+                                        }, 140);
+                                    }
+                                    else {
+                                        setInputShowValue("");
+                                        serverSearchable && setKeyword("");
+                                        onChange?.("");
+                                    }
+                                }
+                                setTimeout(() => {
+                                    inputHandler.setFocus(false);
+                                }, 100);
+                                onBlur?.();
+                            }, onKeyDown: (e) => {
+                                dataOptions?.length && onKeyDownOption(e);
+                            }, autoComplete: "off", autoFocus: autoFocus }), (multiple && !searchable || (searchable && !inputHandler.focus)) && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("select-multiple-values", leftIcon ? "select-multiple-values-left-icon" : "select-multiple-values-no-icon"), style: { maxWidth: `calc(100% - ${leftIcon ? "5.2rem" : "3.2rem"})` }, children: (0, jsx_runtime_1.jsx)("div", { className: "input-values-container", children: multiple && typeof inputHandler.value != "string" && Array().concat(inputHandler.value)?.map((item, key) => {
+                                    return ((0, jsx_runtime_1.jsxs)("div", { className: "input-values-item", children: [(0, jsx_runtime_1.jsx)("span", { children: dataOptions?.find((option) => option.value == item)?.label }), (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faTimes, className: "input-values-delete", onClick: () => {
+                                                    const values = Array().concat(inputHandler.value);
+                                                    const index = values.findIndex((val) => val == item);
+                                                    inputHandler.setValue(values.filter((_, val) => val != index));
+                                                    if (!values.filter((_, val) => val != index)?.length) {
+                                                        setInputShowValue("");
+                                                        serverSearchable && setKeyword("");
+                                                        onChange?.("");
+                                                    }
+                                                } })] }, key));
+                                }) }) })), leftIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: leftIcon })), !multiple && clearable && inputHandler.value && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("input-icon", "input-icon-clear", disabled && "input-icon-disabled", (0, _utils_1.pcn)(className, "icon"), disabled && (0, _utils_1.pcn)(className, "icon", "disabled")), onClick: () => {
+                                setInputShowValue("");
+                                inputHandler.setValue("");
+                                onChange?.("");
+                            }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faTimes }) })), (0, jsx_runtime_1.jsx)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-icon", "input-icon-right", "select-icon-dropdown", disabled && "input-icon-disabled", (0, _utils_1.pcn)(className, "icon"), disabled && (0, _utils_1.pcn)(className, "icon", "disabled")), children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronDown }) })] }), !!dataOptions?.length && showOption && !loadingOption && !!filteredOptions?.length && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("ul", { className: (0, _utils_1.cn)("input-suggest-container scroll-sm", inputHandler.focus && "input-suggest-container-active", (0, _utils_1.pcn)(className, "suggest")), children: (newOption ? [newOption, ...filteredOptions] : filteredOptions).map((option, key) => {
+                            const selected = !!((typeof inputHandler.value == "string" || typeof inputHandler.value == "number") && inputHandler.value == option.value) ||
+                                (Array.isArray(inputHandler.value) && Array().concat(inputHandler.value).find((val) => val == option.value));
+                            return ((0, jsx_runtime_1.jsxs)("li", { className: (0, _utils_1.cn)("input-suggest", (key == activeOption || selected) && "input-suggest-active", (0, _utils_1.pcn)(className, "suggest-item"), (key == activeOption || selected) && (0, _utils_1.pcn)(className, "suggest-item", "active")), onMouseDown: () => {
+                                    setKeydown(true);
+                                    setTimeout(() => inputHandler.setFocus(true), 110);
+                                }, onMouseUp: () => {
+                                    setKeydown(false);
+                                    setActiveOption(key);
+                                    setFilteredOptions([]);
+                                    setShowOption(false);
+                                    if (!multiple) {
+                                        setInputShowValue(option.label);
+                                        serverSearchable && setKeyword(option.label);
+                                        inputHandler.setValue(option.value);
+                                        onChange?.(option.value, option);
+                                    }
+                                    else {
+                                        const values = Array.isArray(inputHandler.value)
+                                            ? Array().concat(inputHandler.value).filter((val) => val != option.value)
+                                            : [];
+                                        setInputShowValue("");
+                                        serverSearchable && setKeyword("");
+                                        if (Array.isArray(inputHandler.value) && Array().concat(inputHandler.value).find((val) => val == option.value)) {
+                                            inputHandler.setValue(values);
+                                            onChange?.(values);
+                                        }
+                                        else {
+                                            inputHandler.setValue([...Array().concat(values), option.value]);
+                                            onChange?.([...Array().concat(values), option.value]);
+                                        }
+                                    }
+                                    setTimeout(() => inputHandler.setFocus(false), 120);
+                                }, children: [selected && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faCheck, className: "select-suggest-check" })), option.label] }, key));
+                        }) }) })), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }) }));
+}

package/dist/src/modal/BottomSheet.component.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+export type BottomSheetProps = {
+    show: boolean;
+    children: ReactNode;
+    onClose: () => void;
+    size?: string | number;
+    maxSize?: string | number;
+    footer?: ReactNode;
+    /** Use custom class with: "backdrop::", "footer::". */
+    className?: string;
+};
+export declare const BottomSheetComponent: import("react").ComponentType<BottomSheetProps>;

package/dist/src/modal/BottomSheet.component.js

@@ -0,0 +1,161 @@
+"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.BottomSheetComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const dynamic_1 = __importDefault(require("next/dynamic"));
+const _utils_1 = require("@utils");
+function sizeToPx(value) {
+    if (typeof window === "undefined")
+        return 0;
+    if (value === undefined || value === null)
+        return 0;
+    if (typeof value === "number")
+        return value;
+    const v = value.trim();
+    if (v.endsWith("vh")) {
+        const n = parseFloat(v.replace("vh", ""));
+        return (n / 100) * window.innerHeight;
+    }
+    if (v.endsWith("px")) {
+        return parseFloat(v.replace("px", ""));
+    }
+    return parseFloat(v) || 0;
+}
+const BottomSheet = ({ show, children, onClose, size = 500, maxSize, footer, className = "", }) => {
+    const scrollRef = (0, react_1.useRef)(null);
+    const sheetRef = (0, react_1.useRef)(null);
+    const startY = (0, react_1.useRef)(0);
+    const lastY = (0, react_1.useRef)(0);
+    const dragging = (0, react_1.useRef)(false);
+    const [offset, setOffset] = (0, react_1.useState)(0);
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
+    const [scrollLocked, setScrollLocked] = (0, react_1.useState)(false);
+    const [contentScrollable, setContentScrollable] = (0, react_1.useState)(false);
+    const realMaxSize = maxSize ?? size;
+    const clamp = (v) => {
+        const max = window.innerHeight;
+        return Math.max(-200, Math.min(v, max));
+    };
+    const animateTo = (target, onFinish) => {
+        lastY.current = target;
+        setOffset(clamp(target));
+        onFinish?.();
+    };
+    (0, react_1.useEffect)(() => {
+        if (show) {
+            lastY.current = 0;
+            setOffset(0);
+            setIsExpanded(false);
+        }
+        else {
+            const t = setTimeout(() => {
+                lastY.current = 0;
+                setOffset(0);
+                setIsExpanded(false);
+            }, 250);
+            return () => clearTimeout(t);
+        }
+    }, [show]);
+    const onStart = (clientY) => {
+        const sc = scrollRef.current;
+        if (sc && sc.scrollTop < 0) {
+            setScrollLocked(true);
+            return;
+        }
+        setScrollLocked(false);
+        dragging.current = true;
+        startY.current = clientY;
+        lastY.current = offset;
+    };
+    const onMove = (clientY) => {
+        if (scrollLocked)
+            return;
+        if (!dragging.current)
+            return;
+        const diff = clientY - startY.current;
+        setOffset(clamp(lastY.current + diff));
+    };
+    const onEnd = () => {
+        if (scrollLocked) {
+            setScrollLocked(false);
+            return;
+        }
+        if (!dragging.current)
+            return;
+        dragging.current = false;
+        const current = offset;
+        const thresholdDown = 120;
+        const thresholdUp = -40;
+        if (!isExpanded && current < thresholdUp && maxSize !== undefined) {
+            setIsExpanded(true);
+            animateTo(0);
+            return;
+        }
+        if (isExpanded && current > thresholdDown) {
+            setIsExpanded(false);
+            animateTo(0);
+            return;
+        }
+        if (!isExpanded && current > thresholdDown) {
+            animateTo(window.innerHeight, () => {
+                onClose();
+                lastY.current = 0;
+                setOffset(0);
+            });
+            return;
+        }
+        animateTo(0);
+    };
+    const collapsedPx = sizeToPx(size);
+    const expandedPx = sizeToPx(realMaxSize);
+    const topPx = isExpanded ? window.innerHeight - expandedPx : window.innerHeight - collapsedPx;
+    const bindTouch = {
+        onTouchStart: (e) => onStart(e.touches[0].clientY),
+        onTouchMove: (e) => onMove(e.touches[0].clientY),
+        onTouchEnd: () => onEnd(),
+    };
+    const bindMouse = {
+        onMouseDown: (e) => onStart(e.clientY),
+        onMouseMove: (e) => dragging.current && onMove(e.clientY),
+        onMouseUp: () => onEnd(),
+        onMouseLeave: () => onEnd(),
+    };
+    (0, react_1.useEffect)(() => {
+        const sc = scrollRef.current;
+        if (!sc)
+            return;
+        const canScroll = sc.scrollHeight > sc.clientHeight;
+        setContentScrollable(canScroll);
+    }, [show, size, maxSize]);
+    (0, react_1.useEffect)(() => {
+        if (show) {
+            history.pushState({ bottomsheet: true }, "");
+        }
+    }, [show]);
+    (0, react_1.useEffect)(() => {
+        const onPopState = (event) => {
+            if (show) {
+                event.preventDefault();
+                onClose();
+                history.pushState({}, "");
+            }
+        };
+        window.addEventListener("popstate", onPopState);
+        return () => window.removeEventListener("popstate", onPopState);
+    }, [show, onClose]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-backdrop", !show && "translate-y-full", (0, _utils_1.pcn)(className, "backdrop")), onClick: onClose }), (0, jsx_runtime_1.jsx)("div", { ref: sheetRef, className: "bottom-sheet", style: {
+                    top: show ? `${topPx}px` : "150vh",
+                    transform: `translateY(${offset}px)`,
+                    touchAction: "none",
+                }, ...bindTouch, ...bindMouse, children: (0, jsx_runtime_1.jsxs)("div", { className: "bottom-sheet-container", children: [(0, jsx_runtime_1.jsx)("div", { className: "bottom-sheet-handle-wrapper", children: (0, jsx_runtime_1.jsx)("div", { className: "bottom-sheet-handle" }) }), (0, jsx_runtime_1.jsx)("div", { ref: scrollRef, className: "overflow-y-auto", style: {
+                                height: isExpanded ? realMaxSize : size,
+                                touchAction: contentScrollable ? "auto" : "none",
+                                overscrollBehaviorY: "contain",
+                            }, children: children })] }) }), show && footer && ((0, jsx_runtime_1.jsx)("div", { className: "bottom-sheet-footer", children: footer }))] }));
+};
+exports.BottomSheetComponent = (0, dynamic_1.default)(() => Promise.resolve(BottomSheet), { ssr: false });

package/dist/src/modal/FloatingPage.component.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+export interface FloatingPageProps {
+    show: boolean;
+    onClose: () => void;
+    title?: string | ReactNode;
+    children?: any;
+    tip?: string | ReactNode;
+    footer?: string | ReactNode;
+    /** Use custom class with: "backdrop::", "header::", "footer::". */
+    className?: string;
+}
+export declare function FloatingPageComponent({ show, onClose, title, children, tip, footer, className, }: FloatingPageProps): import("react").JSX.Element;

package/dist/src/modal/FloatingPage.component.js

@@ -0,0 +1,27 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingPageComponent = FloatingPageComponent;
+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 _components_1 = require("@components");
+const _utils_1 = require("@utils");
+;
+function FloatingPageComponent({ show, onClose, title, children, tip, footer, className = "", }) {
+    (0, react_1.useEffect)(() => {
+        if (show) {
+            document.getElementsByTagName("body")[0].style.overflow = "hidden";
+            _utils_1.shortcut.register("escape", () => {
+                onClose?.();
+            }, "Kembali");
+        }
+        else {
+            document.getElementsByTagName("body")[0].style.removeProperty("overflow");
+        }
+        return () => {
+            _utils_1.shortcut.unregister("escape");
+        };
+    }, [show]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-backdrop", !show && "opacity-0 scale-0 -translate-y-full", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => onClose() }), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("floating-page", !show && "top-[200vh] md:top-0 md:-right-[200vw]", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("modal-header", (0, _utils_1.pcn)(className, "header")), children: [title && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h6", { className: "modal-title", children: title }), tip && (0, jsx_runtime_1.jsx)("p", { className: "modal-tip", children: tip })] })), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, variant: "simple", paint: "danger", onClick: () => onClose() })] }), show && children, footer && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-footer absolute bottom-0 w-full", (0, _utils_1.pcn)(className, "footer")), children: show && footer }))] })] }));
+}

package/dist/src/modal/Modal.component.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+export interface ModalProps {
+    show: boolean;
+    onClose: () => void;
+    title?: string | ReactNode;
+    children?: any;
+    tip?: string | ReactNode;
+    footer?: string | ReactNode;
+    /** Use custom class with: "backdrop::", "header::", "footer::". */
+    className?: string;
+}
+export declare function ModalComponent({ show, onClose, title, children, tip, footer, className, }: ModalProps): import("react").JSX.Element;

package/dist/src/modal/Modal.component.js

@@ -0,0 +1,27 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalComponent = ModalComponent;
+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 _utils_1 = require("@utils");
+const _components_1 = require("@components");
+;
+function ModalComponent({ show, onClose, title, children, tip, footer, className = "", }) {
+    (0, react_1.useEffect)(() => {
+        if (show) {
+            document.getElementsByTagName("body")[0].style.overflow = "hidden";
+            _utils_1.shortcut.register("escape", () => {
+                onClose?.();
+            }, "Kembali");
+        }
+        else {
+            document.getElementsByTagName("body")[0].style.removeProperty("overflow");
+        }
+        return () => {
+            _utils_1.shortcut.unregister("escape");
+        };
+    }, [show]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-backdrop", !show && "opacity-0 scale-0 -translate-y-full", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => onClose() }), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("modal", !show && "-translate-y-full opacity-0 scale-y-0", (0, _utils_1.pcn)(className, "base")), children: [title && ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("modal-header", (0, _utils_1.pcn)(className, "header")), children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h6", { className: "modal-title", children: title }), tip && (0, jsx_runtime_1.jsx)("p", { className: "modal-tip", children: tip })] }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, variant: "simple", paint: "danger", onClick: () => onClose() })] })), show && children, footer && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-footer", (0, _utils_1.pcn)(className, "footer")), children: show && footer }))] })] }));
+}

package/dist/src/modal/ModalConfirm.component.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+import { ApiType } from "@utils";
+import { ButtonProps } from "@components";
+type SubmitIDB = {
+    idb: {
+        store: string;
+        id: string | number;
+    };
+};
+export interface ModalConfirmProps {
+    show: boolean;
+    onClose: () => void;
+    title?: string | ReactNode;
+    children?: any;
+    icon?: any;
+    footer?: string | ReactNode;
+    submitControl?: ButtonProps & {
+        onSubmit?: ApiType | SubmitIDB | (() => void);
+        onSuccess?: () => void;
+        onError?: () => void;
+    };
+    /** Use custom class with: "backdrop::", "header::", "footer::". */
+    className?: string;
+}
+export declare function ModalConfirmComponent({ show, title, children, icon, footer, submitControl, onClose, className, }: ModalConfirmProps): import("react").JSX.Element;
+export {};