@skalfa/skalfa-component 1.0.0

package/dist/modal/Toast.component.js

@@ -0,0 +1,58 @@
+"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/nav/Bottombar.component.d.ts

@@ -0,0 +1,12 @@
+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/nav/Bottombar.component.js

@@ -0,0 +1,32 @@
+"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/nav/Footer.component.d.ts

@@ -0,0 +1,37 @@
+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/nav/Footer.component.js

@@ -0,0 +1,49 @@
+"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/nav/Headbar.component.d.ts

@@ -0,0 +1,14 @@
+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/nav/Headbar.component.js

@@ -0,0 +1,32 @@
+"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/nav/Navbar.component.d.ts

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

package/dist/nav/Navbar.component.js

@@ -0,0 +1,26 @@
+"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.NavbarComponent = NavbarComponent;
+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_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+const _components_1 = require("@components");
+const _utils_1 = require("@utils");
+const defaultItems = [
+    { label: "Tentang", path: "" },
+    { label: "Artikel", path: "" },
+    { label: "Bantuan", path: "" },
+];
+const defaultSpecialLink = {
+    label: "Special Link",
+    path: "",
+    icon: free_solid_svg_icons_1.faStore,
+};
+function NavbarComponent({ logoTitle = "Next Light v.3", logoSubtitle = "The Magic Starter Template", logoPath = "/", specialLink = defaultSpecialLink, items = defaultItems, isLoggedIn = false, onLogin, onRegister, onProfile, className = "", }) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("navbar-topbar", className), children: (0, jsx_runtime_1.jsxs)("div", { className: "navbar-container", children: [(0, jsx_runtime_1.jsxs)("h2", { className: "text-base", children: ["Ini untuk", (0, jsx_runtime_1.jsxs)(link_1.default, { href: specialLink.path, className: "navbar-special-link", children: [specialLink.icon && (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: specialLink.icon, className: "mr-1" }), specialLink.label] })] }), (0, jsx_runtime_1.jsx)("div", { className: "navbar-menu", children: items.map((item, key) => ((0, jsx_runtime_1.jsx)(link_1.default, { href: item.path, children: (0, jsx_runtime_1.jsx)("div", { className: "navbar-menu-item-sm", children: item.label }) }, key))) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "navbar-main", children: (0, jsx_runtime_1.jsxs)("div", { className: "navbar-main-container", children: [(0, jsx_runtime_1.jsx)(link_1.default, { href: logoPath, children: (0, jsx_runtime_1.jsxs)("div", { className: "w-max", children: [(0, jsx_runtime_1.jsx)("h1", { className: "navbar-logo-title", children: logoTitle }), logoSubtitle && ((0, jsx_runtime_1.jsx)("p", { className: "navbar-logo-subtitle", children: logoSubtitle }))] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-12 items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "navbar-menu", children: items.map((item, key) => ((0, jsx_runtime_1.jsx)(link_1.default, { href: item.path, children: (0, jsx_runtime_1.jsx)("div", { className: "navbar-menu-item-base", children: item.label }) }, key))) }), (0, jsx_runtime_1.jsx)("div", { className: "w-full flex items-center gap-8", children: !isLoggedIn ? ((0, jsx_runtime_1.jsxs)("div", { className: "navbar-auth-buttons", children: [(0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Masuk", size: "sm", onClick: onLogin }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Daftar", size: "sm", variant: "light", onClick: onRegister })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 w-max items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "p-2 text-light-foreground hover:text-foreground cursor-pointer", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faHistory }) }), (0, jsx_runtime_1.jsx)("div", { className: "p-2 text-light-foreground hover:text-foreground cursor-pointer", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faBell }) }), (0, jsx_runtime_1.jsx)("div", { className: "h-5 w-[1px] bg-foreground mx-2.5" }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2.5 px-4 cursor-pointer -ml-2 text-light-foreground hover:text-foreground", onClick: onProfile, children: (0, jsx_runtime_1.jsx)("div", { className: "h-10 bg-background rounded-full aspect-square overflow-hidden flex justify-center items-center", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faUser }) }) })] })) })] })] }) })] }));
+}

package/dist/nav/Sidebar.component.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+export interface SidebarItemProps {
+    label: string;
+    key?: number;
+    leftContent?: any;
+    rightContent?: any;
+    path?: string;
+    items?: SidebarItemProps[];
+    className?: string;
+}
+export interface SidebarHeadItemProps {
+    label: string;
+    collapse?: boolean;
+    items?: SidebarItemProps[];
+    className?: string;
+}
+export interface sidebarProps {
+    head?: any;
+    items?: SidebarHeadItemProps[];
+    basePath?: string;
+    show?: boolean;
+    toggle?: boolean;
+    onToggleChange?: () => void;
+    children?: any;
+    hasAccess?: number[];
+    onChange?: () => void;
+    /** Use custom class with: "backdrop::", "head-item::", "item::", "child-item::". */
+    className?: string;
+}
+export declare function SidebarComponent({ head, items, basePath, toggle, onToggleChange, className, }: sidebarProps): import("react").JSX.Element;
+export declare function SidebarContentComponent({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/nav/Sidebar.component.js

@@ -0,0 +1,87 @@
+"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.SidebarComponent = SidebarComponent;
+exports.SidebarContentComponent = SidebarContentComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const navigation_1 = require("next/navigation");
+const link_1 = __importDefault(require("next/link"));
+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 SidebarWrapper({ path, children, onClick, }) {
+    if (path) {
+        return (0, jsx_runtime_1.jsx)(link_1.default, { href: path, children: children });
+    }
+    else {
+        return (0, jsx_runtime_1.jsx)("div", { onClick: () => onClick?.(), children: children });
+    }
+}
+function SidebarComponent({ head, items, basePath, toggle, onToggleChange, 
+// onChange,
+// hasAccess,
+className = "", }) {
+    const pathName = (0, navigation_1.usePathname)();
+    const [shows, setShows] = (0, react_1.useState)([]);
+    const setShow = (key) => {
+        setShows((prevShows) => prevShows?.find((pk) => pk === key)
+            ? prevShows.filter((pk) => pk !== key)
+            : [...prevShows, key]);
+    };
+    const checkShow = (key) => {
+        if (shows?.includes(key)) {
+            return true;
+        }
+        return false;
+    };
+    const cekActive = (path) => {
+        const activePath = pathName?.split("?")[0]?.replace(`${basePath || ""}`, "") || "/";
+        const currentPath = `${path ? `${path}` : ""}`;
+        const isPrefix = (longer, shorter) => {
+            return (longer.startsWith(shorter) &&
+                (longer === shorter || longer[shorter.length] === "/"));
+        };
+        return (isPrefix(activePath, currentPath) || isPrefix(currentPath, activePath));
+    };
+    (0, react_1.useEffect)(() => {
+        items?.map((head, head_key) => {
+            head?.items?.map((menu, key) => {
+                if (menu?.path && cekActive(menu?.path || "")) {
+                    setShow(`${head_key}`);
+                }
+                menu?.items?.map((child) => {
+                    if (child?.path && cekActive(child?.path || "")) {
+                        setShow(`${head_key}`);
+                        setShow(`${head_key}.${key}`);
+                    }
+                });
+            });
+        });
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("sidebar-backdrop", toggle ? "scale-100 md:scale-0" : "scale-0", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => onToggleChange?.() }), (0, jsx_runtime_1.jsxs)("aside", { className: (0, _utils_1.cn)("sidebar-base scroll-sm", toggle ? "scale-x-100 md:scale-x-0" : "scale-x-0 md:scale-x-100", (0, _utils_1.pcn)(className, "base")), children: [head, (0, jsx_runtime_1.jsx)("nav", { className: "flex flex-col flex-1 mt-3", children: items?.map((menu_head, menu_head_key) => {
+                            return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "px-2 pt-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("sidebar-head-item", menu_head?.collapse && "cursor-pointer", (0, _utils_1.pcn)(className, "head-item"), menu_head?.className), onClick: () => setShow(String(menu_head_key)), children: [menu_head?.label, menu_head.collapse && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronDown, className: (0, _utils_1.cn)("text-xs", checkShow(String(menu_head_key)) && "rotate-180") }))] }), (!menu_head?.collapse || checkShow(String(menu_head_key))) &&
+                                            menu_head?.items?.map((menu, menu_key) => {
+                                                return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SidebarWrapper, { path: menu?.path ? `${basePath || ""}${menu?.path}` : "", onClick: () => setShow(`${menu_head_key}.${menu_key}`), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("sidebar-item", menu?.path &&
+                                                                    cekActive(menu?.path || "") &&
+                                                                    "sidebar-item-active", (0, _utils_1.pcn)(className, "item"), menu?.className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [menu?.leftContent, (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: menu?.label })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [menu?.rightContent, menu?.items?.length && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronUp, className: `text-sm ${checkShow(`${menu_head_key}.${menu_key}`) || "rotate-180"}` }))] })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "px-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col", children: menu?.items?.length &&
+                                                                    checkShow(`${menu_head_key}.${menu_key}`) &&
+                                                                    menu?.items?.map((child, menu_child_key) => {
+                                                                        return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(SidebarWrapper, { path: child?.path
+                                                                                    ? `${basePath || ""}${child?.path}`
+                                                                                    : "", onClick: () => setShow(`${menu_head_key}.${menu_key}.${menu_child_key}`), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("sidebar-child-item", child?.path &&
+                                                                                        cekActive(child?.path || "") &&
+                                                                                        "sidebar-child-item-active", (0, _utils_1.pcn)(className, "child-item"), child?.className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [child?.leftContent, (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: child?.label })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [child?.rightContent, child?.items?.length && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronUp, className: `block text-sm ${checkShow(`${menu_head_key}.${menu_key}`) || "rotate-180"}` }))] })] }) }) }, `${menu_head_key}.${menu_key}.${menu_child_key}`));
+                                                                    }) }) })] }, `${menu_head_key}.${menu_key}`));
+                                            })] }) }, menu_head_key));
+                        }) })] })] }));
+}
+function SidebarContentComponent({ children }) {
+    return ((0, jsx_runtime_1.jsx)("main", { className: "sidebar-main-content", children: children }));
+}

package/dist/nav/Tabbar.component.d.ts

@@ -0,0 +1,13 @@
+export interface TabbarItemProps {
+    label: string;
+    value: string | number;
+}
+export interface TabbarProps {
+    items: string[] | TabbarItemProps[];
+    onChange?: (item: string | number) => void;
+    active?: string | number;
+    className?: string;
+}
+export declare function TabbarComponent({ items, onChange, active, 
+/** Use custom class with: "item::", "active::". */
+className, }: TabbarProps): import("react").JSX.Element;

package/dist/nav/Tabbar.component.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabbarComponent = TabbarComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const _utils_1 = require("@utils");
+;
+;
+function TabbarComponent({ items, onChange, active, 
+/** Use custom class with: "item::", "active::". */
+className = "", }) {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("tabbar-base", (0, _utils_1.pcn)(className, "base")), children: items?.map((item, i) => {
+                const isItemActive = active == (typeof item != "string" ? item?.value : item);
+                return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("tabbar-item", isItemActive
+                        ? "tabbar-item-active"
+                        : "tabbar-item-inactive", (0, _utils_1.pcn)(className, "item"), (0, _utils_1.pcn)(className, "active")), onClick: () => onChange?.(typeof item != "string" ? item?.value : item), children: typeof item != "string" ? item?.label : item }, i));
+            }) }) }));
+}

package/dist/nav/Wizard.component.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+export interface WizardProps {
+    items: {
+        label: string;
+        circle_content: ReactNode;
+    }[];
+    active: number;
+}
+export declare function WizardComponent({ items, active }: WizardProps): import("react").JSX.Element;

package/dist/nav/Wizard.component.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WizardComponent = WizardComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const _utils_1 = require("@utils");
+;
+function WizardComponent({ items, active }) {
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: "w-full py-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex", children: items.map((item, key) => {
+                    const isStepActive = key <= active;
+                    const isLineActive = key <= active + 1;
+                    const isLineGradient = key == active + 1;
+                    return ((0, jsx_runtime_1.jsxs)("div", { style: { width: `calc(100% * 1 / ${items.length})` }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "wizard-step-header", children: [key > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "wizard-progress-bar-wrapper", style: {
+                                            width: "calc(100% - 2.5rem - 1rem)",
+                                            top: "50%",
+                                            transform: "translate(-50%, -50%)",
+                                        }, children: (0, jsx_runtime_1.jsx)("div", { className: "wizard-progress-bar-bg", children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("wizard-progress-bar-fill", isLineGradient
+                                                    ? "wizard-progress-bar-fill-gradient"
+                                                    : isLineActive
+                                                        ? "wizard-progress-bar-fill-active"
+                                                        : "") }) }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("wizard-circle", isStepActive
+                                            ? "wizard-circle-active"
+                                            : "wizard-circle-inactive"), children: (0, jsx_runtime_1.jsx)("span", { className: "text-center w-full", children: item.circle_content }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "wizard-label", children: item.label })] }, key));
+                }) }) }) }));
+}

package/dist/src/accordion/Accordion.component.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+export interface AccordionProps {
+    setActive?: number | null;
+    items: {
+        head: ReactNode;
+        content: ReactNode;
+    }[];
+    horizontal?: boolean;
+    className?: string;
+}
+export declare function AccordionComponent({ items, setActive, horizontal, 
+/** Use custom class with: "container::", "head::", "active::". */
+className, }: AccordionProps): import("react").JSX.Element;

package/dist/src/accordion/Accordion.component.js

@@ -0,0 +1,25 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionComponent = AccordionComponent;
+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");
+;
+function AccordionComponent({ items, setActive = null, horizontal = false, 
+/** Use custom class with: "container::", "head::", "active::". */
+className = "", }) {
+    const [isActive, setIsActive] = (0, react_1.useState)(setActive);
+    (0, react_1.useEffect)(() => {
+        setIsActive(setActive);
+    }, [setActive]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("accordion", horizontal ? "accordion-horizontal" : "accordion-vertical", (0, _utils_1.pcn)(className, "container")), children: items.map(({ head, content }, key) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("accordion-item", horizontal ? "accordion-item-horizontal" : "accordion-item-vertical"), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("accordion-head", horizontal ? "accordion-head-horizontal" : "accordion-head-vertical", (0, _utils_1.pcn)(className, "head")), onClick: () => setIsActive(isActive === key ? null : key), children: [(0, jsx_runtime_1.jsx)("div", { children: head }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("w-min transition-transform", isActive !== key && "rotate-180"), children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: horizontal ? free_solid_svg_icons_1.faChevronLeft : free_solid_svg_icons_1.faChevronDown }) })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("accordion-content", horizontal
+                        ? isActive === key
+                            ? "accordion-content-horizontal-active"
+                            : "accordion-content-horizontal-inactive"
+                        : isActive === key
+                            ? "accordion-content-vertical-active"
+                            : "accordion-content-vertical-inactive", (0, _utils_1.pcn)(className, "base"), isActive === key && (0, _utils_1.pcn)(className, "active")), children: content })] }, key))) }));
+}

package/dist/src/breadcrumb/Breadcrumb.component.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+export interface BreadcrumbItemProps {
+    path: string;
+    label: string;
+    className?: string;
+}
+export interface BreadcrumbProps {
+    items: BreadcrumbItemProps[];
+    square?: boolean;
+    separatorContent?: string | ReactNode;
+    /** Use custom class with: "container::", "active::". */
+    className?: string;
+}
+export declare function BreadcrumbComponent({ items, className, square, separatorContent, }: BreadcrumbProps): import("react").JSX.Element;

package/dist/src/breadcrumb/Breadcrumb.component.js

@@ -0,0 +1,21 @@
+"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.BreadcrumbComponent = BreadcrumbComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const link_1 = __importDefault(require("next/link"));
+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");
+;
+;
+function BreadcrumbComponent({ items, className = "", square = false, separatorContent, }) {
+    return ((0, jsx_runtime_1.jsx)("nav", { className: (0, _utils_1.cn)("breadcrumb", (0, _utils_1.pcn)(className, "container")), children: (0, jsx_runtime_1.jsx)("ol", { className: "breadcrumb-list", children: items.map((item, index) => {
+                const isActive = index === items.length - 1;
+                return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(link_1.default, { href: item.path, className: (0, _utils_1.cn)("breadcrumb-link", square && "breadcrumb-link-square", isActive && !square && "breadcrumb-link-active", isActive && square && "breadcrumb-link-square-active", (0, _utils_1.pcn)(className, "base"), isActive && (0, _utils_1.pcn)(className, "active")), children: item.label }) }), !isActive && ((0, jsx_runtime_1.jsx)("li", { className: "breadcrumb-separator", children: separatorContent || ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronRight })) }))] }, item.path));
+            }) }) }));
+}

package/dist/src/button/Button.component.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+export interface ButtonProps {
+    type?: "submit" | "button";
+    label?: string | ReactNode;
+    variant?: "solid" | "outline" | "light" | "simple";
+    paint?: "primary" | "secondary" | "success" | "danger" | "warning";
+    rounded?: boolean | string;
+    block?: boolean;
+    disabled?: boolean;
+    size?: "xs" | "sm" | "md" | "lg";
+    onClick?: any;
+    href?: string;
+    icon?: any;
+    loading?: boolean;
+    hover?: boolean;
+    tips?: string;
+    title?: string;
+    /** Use custom class with: "icon::", "loading::". */
+    className?: string;
+}
+export declare function ButtonComponent({ type, label, variant, paint, rounded, block, disabled, size, onClick, href, icon, loading, tips, title, className, }: ButtonProps): import("react").JSX.Element;

package/dist/src/button/Button.component.js

@@ -0,0 +1,19 @@
+"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.ButtonComponent = ButtonComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const link_1 = __importDefault(require("next/link"));
+const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+const _utils_1 = require("@utils");
+;
+function ButtonComponent({ type = "button", label, variant = "solid", paint = "primary", rounded, block, disabled, size = "md", onClick, href, icon, loading, tips, title, className = "", }) {
+    const isIconButton = icon && !label;
+    return ((0, jsx_runtime_1.jsxs)(ButtonComponentWrapper, { type: type, className: (0, _utils_1.cn)("button", `button-${variant}-${paint}`, isIconButton ? `icon-button-${size}` : `button-${size}`, rounded && "rounded-full", !isIconButton && block && "w-full justify-center", (0, _utils_1.pcn)(className, "base")), disabled: disabled || loading, onClick: onClick, href: href, title: tips || title, children: [loading ? ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("button-loading", (0, _utils_1.pcn)(className, "loading")) })) : (icon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: icon, className: (0, _utils_1.cn)("button-icon", (0, _utils_1.pcn)(className, "icon")) }))), !isIconButton && label] }));
+}
+const ButtonComponentWrapper = ({ children, href, ...props }) => {
+    return !href ? ((0, jsx_runtime_1.jsx)("button", { ...props, children: children })) : ((0, jsx_runtime_1.jsx)(link_1.default, { href: href, ...props, children: children }));
+};