@skalfa/skalfa-component 1.0.2 → 1.0.3

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

@@ -1,161 +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.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

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

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

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

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

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

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

@@ -1,68 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalConfirmComponent = ModalConfirmComponent;
-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");
-;
-function ModalConfirmComponent({ show, title, children, icon, footer, submitControl, onClose, className = "", }) {
-    const { isSm } = (0, _utils_1.useResponsive)();
-    const [toast, setToast] = (0, react_1.useState)(false);
-    const [loading, setLoading] = (0, react_1.useState)(false);
-    (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]);
-    const renderChildren = (0, react_1.useMemo)(() => {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex flex-col gap-2 items-center text-primary", (0, _utils_1.pcn)(className, "header")), children: [(0, jsx_runtime_1.jsx)("div", { className: "mt-6", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: icon || free_solid_svg_icons_1.faQuestion, className: `text-xl` }) }), (0, jsx_runtime_1.jsx)("h6", { className: "font-semibold text-lg", children: title })] })), children, footer && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-footer", (0, _utils_1.pcn)(className, "footer")), children: footer }))] }));
-    }, [title, footer, children]);
-    const renderAction = (size = 'md') => {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center pt-6", children: [(0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Batal", variant: "simple", onClick: () => onClose(), className: "text-foreground bg-background rounded-none", block: true, size: size }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Konfirmasi", loading: loading, onClick: async () => {
-                        if (!submitControl?.onSubmit)
-                            return;
-                        setLoading(true);
-                        if (typeof submitControl?.onSubmit == "function") {
-                            submitControl?.onSubmit?.();
-                        }
-                        else {
-                            let response = null;
-                            if ("path" in submitControl?.onSubmit || "url" in submitControl?.onSubmit) {
-                                response = await (0, _utils_1.api)(submitControl?.onSubmit);
-                            }
-                            if ("idb" in submitControl?.onSubmit) {
-                                const idb = _utils_1.registry.get("idb");
-                                if (!idb) {
-                                    throw new Error("IndexedDB (IDB) extension is not installed.");
-                                }
-                                await idb.delete((submitControl?.onSubmit).idb.store, (submitControl?.onSubmit).idb.id);
-                                response = { status: 200 };
-                            }
-                            if (response?.status == 200 || response?.status == 201) {
-                                setToast("success");
-                                submitControl?.onSuccess?.();
-                                setLoading(false);
-                            }
-                            else {
-                                setToast("failed");
-                                submitControl?.onError?.();
-                                setLoading(false);
-                            }
-                        }
-                    }, className: "rounded-none", block: true, size: size, ...submitControl })] }));
-    };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isSm ? ((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 modal-confirm", !show && "-translate-y-full opacity-0 scale-y-0", (0, _utils_1.pcn)(className, "base")), children: [renderChildren, renderAction()] })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(_components_1.BottomSheetComponent, { show: show, onClose: onClose, size: 220, footer: renderAction('lg'), children: renderChildren }) })), (0, jsx_runtime_1.jsx)(_components_1.ToastComponent, { show: toast == "failed", onClose: () => setToast(false), title: "Gagal", className: "!border-danger header::text-danger", children: (0, jsx_runtime_1.jsxs)("p", { className: "px-3 pb-2 text-sm", children: ["Gagal ", title || "", "! cek data dan koneksi internet dan coba kembali!"] }) }), (0, jsx_runtime_1.jsx)(_components_1.ToastComponent, { show: toast == "success", onClose: () => setToast(false), title: "Berhasil", className: "!border-success header::text-success", children: (0, jsx_runtime_1.jsxs)("p", { className: "px-3 pb-2 text-sm", children: ["Berhasil ", title || "", "!"] }) })] }));
-}

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

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

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

@@ -1,58 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToastComponent = ToastComponent;
-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 ToastComponent({ show, onClose, title, children, footer, className = "", }) {
-    const [countdown, setCountdown] = (0, react_1.useState)(5);
-    const [timerId, setTimerId] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        if (show) {
-            setCountdown(5); // Reset countdown saat toast muncul
-            const id = setInterval(() => {
-                setCountdown((prev) => {
-                    if (prev <= 1) {
-                        clearInterval(id);
-                        onClose();
-                        return 0;
-                    }
-                    return prev - 1;
-                });
-            }, 1000);
-            setTimerId(id);
-        }
-        return () => {
-            if (timerId) {
-                clearInterval(timerId);
-            }
-        };
-    }, [show]);
-    const handleMouseEnter = () => {
-        if (timerId) {
-            clearInterval(timerId);
-            setTimerId(null);
-        }
-    };
-    const handleMouseLeave = () => {
-        const id = setInterval(() => {
-            setCountdown((prev) => {
-                if (prev <= 1) {
-                    clearInterval(id);
-                    onClose();
-                    return 0;
-                }
-                return prev - 1;
-            });
-        }, 1000);
-        setTimerId(id);
-    };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("toast", !show && "translate-y-full opacity-0 scale-y-0", (0, _utils_1.pcn)(className, "base")), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [title && ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("pt-2 px-3 flex justify-between items-center text-foreground", (0, _utils_1.pcn)(className, "header")), children: [(0, jsx_runtime_1.jsx)("h6", { className: "font-semibold", children: title }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs text-foreground/50", children: countdown }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, variant: "simple", paint: "danger", onClick: () => {
-                                        clearInterval(timerId || "");
-                                        onClose();
-                                    }, size: "sm" })] })] })), 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/nav/Bottombar.component.d.ts

@@ -1,12 +0,0 @@
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-export interface BottombarItemProps {
-    icon: IconDefinition;
-    path: string;
-    activeKey?: string;
-}
-export interface BottombarProps {
-    active?: string;
-    items?: BottombarItemProps[];
-    className?: string;
-}
-export declare function BottombarComponent({ className, active, items, }: BottombarProps): import("react").JSX.Element;

package/dist/src/nav/Bottombar.component.js

@@ -1,32 +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.BottombarComponent = BottombarComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const link_1 = __importDefault(require("next/link"));
-const navigation_1 = require("next/navigation");
-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 defaultItems = [
-    { icon: free_solid_svg_icons_1.faHome, path: "/_example/bottombar", activeKey: "home" },
-    { icon: free_solid_svg_icons_1.faClipboard, path: "/", activeKey: "clipboard" },
-    { icon: free_solid_svg_icons_1.faCrosshairs, path: "/", activeKey: "crosshairs" },
-    { icon: free_solid_svg_icons_1.faSackDollar, path: "/", activeKey: "sack-dollar" },
-    { icon: free_solid_svg_icons_1.faUserCircle, path: "/", activeKey: "profile" },
-];
-function BottombarComponent({ className = "", active, items = defaultItems, }) {
-    const pathname = (0, navigation_1.usePathname)();
-    const isKeyboardOpen = (0, _utils_1.useKeyboardOpen)();
-    const styles = {
-        base: (0, _utils_1.cn)("bottombar-base", isKeyboardOpen ? "-bottom-60" : "bottom-3", (0, _utils_1.pcn)(className, "base")),
-        item: "bottombar-item",
-    };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: styles.base, children: (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-5 gap-2 items-center", style: { gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` }, children: items.map((item, key) => {
-                    const isActive = pathname === item.path || active === item.activeKey;
-                    return ((0, jsx_runtime_1.jsx)(link_1.default, { href: item.path, children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)(styles.item, isActive && "bottombar-item-active", (0, _utils_1.pcn)(className, "item"), isActive && (0, _utils_1.pcn)(className, "active")), children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: item.icon }) }) }, key));
-                }) }) }) }));
-}

package/dist/src/nav/Footer.component.d.ts

@@ -1,37 +0,0 @@
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-export interface FooterLinkProps {
-    label: string;
-    path: string;
-}
-export interface FooterColumnProps {
-    title: string;
-    items: FooterLinkProps[];
-}
-export interface FooterSocialProps {
-    icon: IconDefinition;
-    path: string;
-}
-export interface FooterProps {
-    brandTitle?: string;
-    brandSubtitle?: string;
-    address?: {
-        label: string;
-        path: string;
-    };
-    phone?: {
-        label: string;
-        path: string;
-    };
-    email?: {
-        label: string;
-        path: string;
-    };
-    supportHours?: string;
-    socials?: FooterSocialProps[];
-    columns?: FooterColumnProps[];
-    copyrightLink?: {
-        label: string;
-        path: string;
-    };
-}
-export declare function FooterComponent({ brandTitle, brandSubtitle, address, phone, email, supportHours, socials, columns, copyrightLink, }: FooterProps): import("react").JSX.Element;

package/dist/src/nav/Footer.component.js

@@ -1,49 +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.FooterComponent = FooterComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const link_1 = __importDefault(require("next/link"));
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const free_brands_svg_icons_1 = require("@fortawesome/free-brands-svg-icons");
-const defaultSocials = [
-    { icon: free_brands_svg_icons_1.faFacebook, path: "" },
-    { icon: free_brands_svg_icons_1.faLinkedin, path: "" },
-    { icon: free_brands_svg_icons_1.faGithub, path: "https://github.com/SE-JE" },
-    { icon: free_brands_svg_icons_1.faInstagram, path: "https://www.instagram.com/seje.digital/" },
-];
-const defaultColumns = [
-    {
-        title: "Link Menu",
-        items: [
-            { label: "Klik Link Menu 1", path: "" },
-            { label: "Klik Link Menu 1", path: "" },
-            { label: "Klik Link Menu 1", path: "" },
-            { label: "Klik Link Menu 1", path: "" },
-        ],
-    },
-    {
-        title: "Link Menu",
-        items: [
-            { label: "Klik Link Menu 1", path: "" },
-            { label: "Klik Link Menu 1", path: "" },
-            { label: "Klik Link Menu 1", path: "" },
-            { label: "Klik Link Menu 1", path: "" },
-        ],
-    },
-    {
-        title: "Link Menu",
-        items: [
-            { label: "Klik Link Menu 1", path: "" },
-            { label: "Klik Link Menu 1", path: "" },
-            { label: "Klik Link Menu 1", path: "" },
-            { label: "Klik Link Menu 1", path: "" },
-        ],
-    },
-];
-function FooterComponent({ brandTitle = "Next Light v.3", brandSubtitle = "The Magic Starter Template", address = { label: "Soekarno Hatta No 27 C, Ponorogo, Jawa Timur, Indonesia", path: "https://maps.app.goo.gl/TY2QDjFPm3RfwjUq6" }, phone = { label: "+62 888888888888", path: "https://wa.me/6281456140392" }, email = { label: "example@gmail.com", path: "mailto:sejedigital@gmail.com" }, supportHours = "24 / 7 Online Suport | Senin - Sabtu ( 09.00 s/d 17.00 )", socials = defaultSocials, columns = defaultColumns, copyrightLink = { label: "sejedigital.com 2020 - 2025", path: "https://sejedigital.com/" }, }) {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "footer-base", children: [(0, jsx_runtime_1.jsxs)("div", { className: "footer-brand-container", children: [(0, jsx_runtime_1.jsx)("h1", { className: "footer-brand-title", children: brandTitle }), brandSubtitle && ((0, jsx_runtime_1.jsx)("p", { className: "footer-brand-subtitle", children: brandSubtitle }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "footer-contact-container", children: [address && ((0, jsx_runtime_1.jsx)("a", { href: address.path, className: "footer-contact-link", target: "_blank", rel: "noopener noreferrer", children: address.label })), phone && ((0, jsx_runtime_1.jsx)("a", { href: phone.path, className: "footer-contact-link", children: phone.label })), email && ((0, jsx_runtime_1.jsx)("a", { href: email.path, className: "footer-contact-link", children: email.label })), supportHours && ((0, jsx_runtime_1.jsx)("p", { className: "footer-support-hours", children: supportHours })), socials && socials.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "footer-socials-container", children: socials.map((social, key) => ((0, jsx_runtime_1.jsx)("a", { href: social.path, target: "_blank", rel: "noopener noreferrer", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: social.icon, className: "footer-social-icon" }) }, key))) }))] }), columns && columns.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "footer-links-container", children: (0, jsx_runtime_1.jsx)("div", { className: "footer-links-grid", children: columns.map((column, colKey) => ((0, jsx_runtime_1.jsxs)("nav", { "aria-label": `Footer navigation ${column.title}`, children: [(0, jsx_runtime_1.jsx)("h6", { className: "footer-menu-title", children: column.title }), (0, jsx_runtime_1.jsx)("div", { className: "footer-menu-list", children: column.items.map((item, itemKey) => ((0, jsx_runtime_1.jsx)(link_1.default, { href: item.path, className: "footer-menu-link", children: item.label }, itemKey))) })] }, colKey))) }) })), copyrightLink && ((0, jsx_runtime_1.jsxs)("p", { className: "footer-copyright", children: ["Copyright \u00A9", (0, jsx_runtime_1.jsx)("a", { href: copyrightLink.path, className: "ml-1", target: "_blank", rel: "noopener noreferrer", children: copyrightLink.label })] }))] }) }));
-}

package/dist/src/nav/Headbar.component.d.ts

@@ -1,14 +0,0 @@
-import { ReactNode } from "react";
-export interface HeadbarUserProps {
-    name: string;
-    role: string;
-    avatar?: any;
-}
-export interface HeadbarProps {
-    children?: ReactNode;
-    user?: HeadbarUserProps;
-    onLogout?: () => void;
-    onEditProfile?: () => void;
-    className?: string;
-}
-export declare function HeadbarComponent({ children, user, onLogout, onEditProfile, className, }: HeadbarProps): import("react").JSX.Element;

package/dist/src/nav/Headbar.component.js

@@ -1,32 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeadbarComponent = HeadbarComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const navigation_1 = require("next/navigation");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const _components_1 = require("@components");
-const _utils_1 = require("@utils");
-const defaultUser = {
-    name: "Jhon Duck",
-    role: "Admin",
-};
-function HeadbarComponent({ children, user = defaultUser, onLogout, onEditProfile, className = "", }) {
-    const router = (0, navigation_1.useRouter)();
-    const [profile, setProfile] = (0, react_1.useState)(false);
-    const handleLogout = () => {
-        if (onLogout) {
-            onLogout();
-        }
-        else {
-            _utils_1.auth.deleteAccessToken();
-            router.push("/");
-        }
-    };
-    const styles = {
-        base: (0, _utils_1.cn)("headbar-base", className),
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles.base, children: [(0, jsx_runtime_1.jsx)("div", { className: "w-full ", children: children }), (0, jsx_runtime_1.jsxs)("div", { className: "headbar-right-controls", children: [(0, jsx_runtime_1.jsx)("div", { className: "headbar-icon-button", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faHistory }) }), (0, jsx_runtime_1.jsx)("div", { className: "headbar-icon-button", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faBell }) }), (0, jsx_runtime_1.jsx)("div", { className: "headbar-divider" }), (0, jsx_runtime_1.jsxs)("div", { className: "headbar-user-profile-trigger", onClick: () => setProfile(!profile), children: [(0, jsx_runtime_1.jsx)("div", { className: "headbar-user-avatar-wrapper", children: user.avatar ? ((0, jsx_runtime_1.jsx)(_components_1.ImageComponent, { src: user.avatar, alt: user.name, className: "w-full h-full object-cover" })) : ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faUser })) }), (0, jsx_runtime_1.jsxs)("div", { className: "headbar-user-info", children: [(0, jsx_runtime_1.jsx)("h6", { className: "headbar-user-name", children: user.name }), (0, jsx_runtime_1.jsx)("h6", { className: "headbar-user-role", children: user.role })] })] })] }), (0, jsx_runtime_1.jsx)(_components_1.OutsideClickComponent, { onOutsideClick: () => setProfile(false), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("headbar-dropdown", profile ? "scale-y-100" : "scale-y-0"), children: [(0, jsx_runtime_1.jsxs)("div", { className: "headbar-dropdown-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "headbar-dropdown-avatar-wrapper", children: user.avatar ? ((0, jsx_runtime_1.jsx)(_components_1.ImageComponent, { src: user.avatar, alt: user.name, className: "w-full h-full object-cover" })) : ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faUser, className: "text-2xl text-light-foreground" })) }), (0, jsx_runtime_1.jsxs)("div", { className: "headbar-dropdown-user-info", children: [(0, jsx_runtime_1.jsx)("h6", { className: "text-lg font-bold line-clamp-1", children: user.name }), (0, jsx_runtime_1.jsx)("h6", { className: "text-xs -mt-1 font-semibold line-clamp-1", children: user.role })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "headbar-dropdown-body", children: [(0, jsx_runtime_1.jsxs)("div", { className: "headbar-dropdown-item", onClick: onEditProfile, children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faUserCog }), (0, jsx_runtime_1.jsx)("label", { className: "cursor-pointer font-semibold", children: "Edit Profile" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "headbar-dropdown-item-danger", onClick: handleLogout, children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faPowerOff }), (0, jsx_runtime_1.jsx)("label", { className: "cursor-pointer font-semibold", children: "Keluar" })] })] })] }) })] }));
-}

package/dist/src/nav/Navbar.component.d.ts

@@ -1,22 +0,0 @@
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-export interface NavbarItemProps {
-    label: string;
-    path: string;
-}
-export interface NavbarProps {
-    logoTitle?: string;
-    logoSubtitle?: string;
-    logoPath?: string;
-    specialLink?: {
-        label: string;
-        path: string;
-        icon?: IconDefinition;
-    };
-    items?: NavbarItemProps[];
-    isLoggedIn?: boolean;
-    onLogin?: () => void;
-    onRegister?: () => void;
-    onProfile?: () => void;
-    className?: string;
-}
-export declare function NavbarComponent({ logoTitle, logoSubtitle, logoPath, specialLink, items, isLoggedIn, onLogin, onRegister, onProfile, className, }: NavbarProps): import("react").JSX.Element;