@skalfa/skalfa-component 1.0.8 → 1.0.9

package/dist/input/InputValues.component.js

@@ -2,18 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputValues = InputValues;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 const _utils_1 = require("@utils");
 function InputValues({ value, className, onDelete, isFocus, onFocus, style, }) {
     if (isFocus) {
         return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !!value?.length && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("input-values-dropdown", className), onClick: () => onFocus?.(), children: value?.map((item, key) => {
-                    return ((0, jsx_runtime_1.jsxs)("div", { className: "input-values-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "", children: item }), (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faTimes, className: "input-values-delete", onClick: () => onDelete?.(item, key) })] }, key));
+                    return ((0, jsx_runtime_1.jsxs)("div", { className: "input-values-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "", children: item }), (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/times", className: "input-values-delete", onClick: () => onDelete?.(item, key) })] }, key));
                 }) })) }));
     }
     else {
         return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("input-values-preview", className), style: style, onClick: () => onFocus?.(), children: (0, jsx_runtime_1.jsx)("div", { className: "input-values-container", children: value?.map((item, key) => {
-                        return ((0, jsx_runtime_1.jsxs)("div", { className: "input-values-item", children: [(0, jsx_runtime_1.jsx)("span", { children: item }), (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faTimes, className: "input-values-delete", onClick: () => onDelete?.(item, key) })] }, key));
+                        return ((0, jsx_runtime_1.jsxs)("div", { className: "input-values-item", children: [(0, jsx_runtime_1.jsx)("span", { children: item }), (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/times", className: "input-values-delete", onClick: () => onDelete?.(item, key) })] }, key));
                     }) }) }) }));
     }
 }

package/dist/input/Select.component.js

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectComponent = SelectComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 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 = "", }) {
@@ -22,7 +21,7 @@ function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, v
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, unregister, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, false);
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler
@@ -223,7 +222,7 @@ function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, v
                             }, 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: () => {
+                                    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)(skalfa_icon_1.Icon, { icon: "solid/times", 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));
@@ -233,11 +232,11 @@ function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, v
                                                         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: () => {
+                                }) }) })), leftIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { 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) => {
+                            }, children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/times" }) })), (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)(skalfa_icon_1.Icon, { icon: "solid/chevron-down" }) })] }), !!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: () => {
@@ -270,6 +269,6 @@ function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, v
                                         }
                                     }
                                     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));
+                                }, children: [selected && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/check", 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/modal/FloatingPage.component.d.ts

@@ -6,7 +6,9 @@ export interface FloatingPageProps {
     children?: any;
     tip?: string | ReactNode;
     footer?: string | ReactNode;
+    size?: string | number;
+    maxSize?: string | number;
     /** Use custom class with: "backdrop::", "header::", "footer::". */
     className?: string;
 }
-export declare function FloatingPageComponent({ show, onClose, title, children, tip, footer, className, }: FloatingPageProps): import("@types/react").JSX.Element;
+export declare function FloatingPageComponent({ show, onClose, title, children, tip, footer, className, size, maxSize, }: FloatingPageProps): import("@types/react").JSX.Element;

package/dist/modal/FloatingPage.component.js

@@ -4,11 +4,12 @@ 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 Button_component_1 = require("../button/Button.component");
 const _utils_1 = require("@utils");
+const BottomSheet_component_1 = require("./BottomSheet.component");
 ;
-function FloatingPageComponent({ show, onClose, title, children, tip, footer, className = "", }) {
+function FloatingPageComponent({ show, onClose, title, children, tip, footer, className = "", size, maxSize, }) {
+    const { isSm } = (0, _utils_1.useResponsive)();
     (0, react_1.useEffect)(() => {
         if (show) {
             document.getElementsByTagName("body")[0].style.overflow = "hidden";
@@ -23,5 +24,8 @@ function FloatingPageComponent({ show, onClose, title, children, tip, footer, cl
             _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)(Button_component_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 }))] })] }));
+    if (isSm) {
+        return ((0, jsx_runtime_1.jsxs)(BottomSheet_component_1.BottomSheetComponent, { show: show, onClose: onClose, size: size, maxSize: maxSize, footer: footer, className: className, children: [(0, jsx_runtime_1.jsx)("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 })] })) }), show && children] }));
+    }
+    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)(Button_component_1.ButtonComponent, { icon: "solid/times", 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/modal/Modal.component.js

@@ -4,7 +4,6 @@ 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 Button_component_1 = require("../button/Button.component");
 ;
@@ -23,5 +22,5 @@ function ModalComponent({ show, onClose, title, children, tip, footer, className
             _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)(Button_component_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 }))] })] }));
+    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)(Button_component_1.ButtonComponent, { icon: "solid/times", 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/modal/ModalConfirm.component.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { ApiType } from "@utils";
-import { ButtonProps } from "../button/Button.component";
+import { ButtonProps } from "@components";
 type SubmitIDB = {
     idb: {
         store: string;
@@ -22,5 +22,5 @@ export interface ModalConfirmProps {
     /** Use custom class with: "backdrop::", "header::", "footer::". */
     className?: string;
 }
-export declare function ModalConfirmComponent({ show, title, children, icon, footer, submitControl, onClose, className, }: ModalConfirmProps): import("@types/react").JSX.Element;
+export declare function ModalConfirmComponent({ show, title, children, footer, submitControl, onClose, className, }: ModalConfirmProps): import("@types/react").JSX.Element;
 export {};

package/dist/modal/ModalConfirm.component.js

@@ -4,14 +4,11 @@ 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 Toast_component_1 = require("./Toast.component");
-const Button_component_1 = require("../button/Button.component");
-const BottomSheet_component_1 = require("./BottomSheet.component");
+const _components_1 = require("@components");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 ;
-function ModalConfirmComponent({ show, title, children, icon, footer, submitControl, onClose, className = "", }) {
+function ModalConfirmComponent({ show, title, children, 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);
@@ -29,11 +26,14 @@ function ModalConfirmComponent({ show, title, children, icon, footer, submitCont
             _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 renderChildren = (actionSize = 'md') => {
+        if (toast == "success") {
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center h-full py-6 transition-all duration-300 animate-intro-down", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/check", className: "text-primary text-2xl" }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-primary text-lg font-semibold mt-4", children: "Berhasil!" })] }));
+        }
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("flex flex-col gap-2 p-6", (0, _utils_1.pcn)(className, "header")), children: (0, jsx_runtime_1.jsx)("h6", { className: "font-semibold text-lg", children: title }) })), children, toast == "failed" && ((0, jsx_runtime_1.jsx)("div", { className: "px-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-4 w-full p-4 rounded-sm border border-danger bg-light-danger flex gap-4 items-center", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: "w-10 h-10 rounded-full bg-danger/20 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/exclamation-triangle", className: "text-danger text-lg" }) }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-danger text-sm font-semibold", children: "Terjadi Masalah, Coba ulangi lagi!" })] }) })), renderAction(actionSize)] }));
+    };
     const renderAction = (size = 'md') => {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center pt-6", children: [(0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Batal", variant: "simple", onClick: () => onClose(), className: "text-foreground bg-background rounded-none", block: true, size: size }), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Konfirmasi", loading: loading, onClick: async () => {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center gap-4 p-6 pt-2", children: [(0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Batal", variant: "outline", onClick: () => onClose(), block: true, size: size }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Konfirmasi", loading: loading, onClick: async () => {
                         if (!submitControl?.onSubmit)
                             return;
                         setLoading(true);
@@ -55,16 +55,18 @@ function ModalConfirmComponent({ show, title, children, icon, footer, submitCont
                             }
                             if (response?.status == 200 || response?.status == 201) {
                                 setToast("success");
+                                setTimeout(() => setToast(false), 1000);
                                 submitControl?.onSuccess?.();
                                 setLoading(false);
                             }
                             else {
                                 setToast("failed");
+                                setTimeout(() => setToast(false), 5000);
                                 submitControl?.onError?.();
                                 setLoading(false);
                             }
                         }
-                    }, className: "rounded-none", block: true, size: size, ...submitControl })] }));
+                    }, 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)(BottomSheet_component_1.BottomSheetComponent, { show: show, onClose: onClose, size: 220, footer: renderAction('lg'), children: renderChildren }) })), (0, jsx_runtime_1.jsx)(Toast_component_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)(Toast_component_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 || "", "!"] }) })] }));
+    return ((0, jsx_runtime_1.jsx)(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.jsx)("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() })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(_components_1.BottomSheetComponent, { show: show, onClose: onClose, size: 220, children: renderChildren('lg') }) })) }));
 }

package/dist/modal/Toast.component.js

@@ -4,7 +4,6 @@ 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 Button_component_1 = require("../button/Button.component");
 ;
@@ -51,7 +50,7 @@ function ToastComponent({ show, onClose, title, children, footer, className = ""
         }, 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)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, variant: "simple", paint: "danger", onClick: () => {
+    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)(Button_component_1.ButtonComponent, { icon: "solid/times", 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

@@ -1,6 +1,6 @@
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { type IconName } from "@skalfa/skalfa-icon";
 export interface BottombarItemProps {
-    icon: IconDefinition;
+    icon: IconName;
     path: string;
     activeKey?: string;
 }

package/dist/nav/Bottombar.component.js

@@ -6,17 +6,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BottombarComponent = BottombarComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 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" },
+    { icon: "solid/home", path: "/_example/bottombar", activeKey: "home" },
+    { icon: "solid/clipboard", path: "/", activeKey: "clipboard" },
+    { icon: "solid/crosshairs", path: "/", activeKey: "crosshairs" },
+    { icon: "solid/sack-dollar", path: "/", activeKey: "sack-dollar" },
+    { icon: "solid/user-circle", path: "/", activeKey: "profile" },
 ];
 function BottombarComponent({ className = "", active, items = defaultItems, }) {
     const pathname = (0, navigation_1.usePathname)();
@@ -27,6 +26,6 @@ function BottombarComponent({ className = "", active, items = defaultItems, }) {
     };
     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));
+                    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)(skalfa_icon_1.Icon, { icon: item.icon }) }) }, key));
                 }) }) }) }));
 }

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

@@ -1,4 +1,4 @@
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { type IconName } from "@skalfa/skalfa-icon";
 export interface FooterLinkProps {
     label: string;
     path: string;
@@ -8,7 +8,7 @@ export interface FooterColumnProps {
     items: FooterLinkProps[];
 }
 export interface FooterSocialProps {
-    icon: IconDefinition;
+    icon: IconName;
     path: string;
 }
 export interface FooterProps {

package/dist/nav/Footer.component.js

@@ -6,14 +6,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FooterComponent = FooterComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 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/" },
+    { icon: "brands/facebook", path: "" },
+    { icon: "brands/linkedin", path: "" },
+    { icon: "brands/github", path: "https://github.com/SE-JE" },
+    { icon: "brands/instagram", path: "https://www.instagram.com/seje.digital/" },
 ];
 const defaultColumns = [
     {
@@ -45,5 +44,5 @@ const defaultColumns = [
     },
 ];
 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 })] }))] }) }));
+    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)(skalfa_icon_1.Icon, { 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.js

@@ -3,11 +3,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeadbarComponent = HeadbarComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 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");
 ;
 function HeadbarComponent({ title, backHref, rightContent }) {
     const router = (0, navigation_1.useRouter)();
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between w-full items-center mt-2 mb-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [backHref && ((0, jsx_runtime_1.jsx)("div", { className: "w-8 aspect-square flex justify-center items-center cursor-pointer", onClick: () => typeof backHref != "boolean" ? router.push(backHref) : router.back(), children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronLeft, className: "text-secondary text-xl" }) })), (0, jsx_runtime_1.jsx)("p", { className: "text-lg font-bold px-2", children: title })] }), rightContent && (0, jsx_runtime_1.jsx)("div", { children: rightContent })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between w-full items-center mt-2 mb-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [backHref && ((0, jsx_runtime_1.jsx)("div", { className: "w-8 aspect-square flex justify-center items-center cursor-pointer", onClick: () => typeof backHref != "boolean" ? router.push(backHref) : router.back(), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-left", className: "text-secondary text-xl" }) })), (0, jsx_runtime_1.jsx)("p", { className: "text-lg font-bold px-2", children: title })] }), rightContent && (0, jsx_runtime_1.jsx)("div", { children: rightContent })] }));
 }

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

@@ -1,4 +1,4 @@
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { type IconName } from "@skalfa/skalfa-icon";
 export interface NavbarItemProps {
     label: string;
     path: string;
@@ -10,7 +10,7 @@ export interface NavbarProps {
     specialLink?: {
         label: string;
         path: string;
-        icon?: IconDefinition;
+        icon?: IconName;
     };
     items?: NavbarItemProps[];
     isLoggedIn?: boolean;

package/dist/nav/Navbar.component.js

@@ -6,9 +6,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavbarComponent = NavbarComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 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 Button_component_1 = require("../button/Button.component");
 const _utils_1 = require("@utils");
 const defaultItems = [
@@ -19,8 +18,8 @@ const defaultItems = [
 const defaultSpecialLink = {
     label: "Special Link",
     path: "",
-    icon: free_solid_svg_icons_1.faStore,
+    icon: "solid/store",
 };
 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)(Button_component_1.ButtonComponent, { label: "Masuk", size: "sm", onClick: onLogin }), (0, jsx_runtime_1.jsx)(Button_component_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 }) }) })] })) })] })] }) })] }));
+    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)(skalfa_icon_1.Icon, { 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)(Button_component_1.ButtonComponent, { label: "Masuk", size: "sm", onClick: onLogin }), (0, jsx_runtime_1.jsx)(Button_component_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)(skalfa_icon_1.Icon, { icon: "solid/history" }) }), (0, jsx_runtime_1.jsx)("div", { className: "p-2 text-light-foreground hover:text-foreground cursor-pointer", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/bell" }) }), (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)(skalfa_icon_1.Icon, { icon: "solid/user" }) }) })] })) })] })] }) })] }));
 }

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

@@ -15,19 +15,15 @@ export interface SidebarHeadItemProps {
     className?: string;
 }
 export interface sidebarProps {
+    id?: string;
     head?: any;
+    footer?: 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("@types/react").JSX.Element;
+export declare function SidebarComponent({ id, head, footer, items, basePath, className, }: sidebarProps): import("@types/react").JSX.Element;
 export declare function SidebarContentComponent({ children }: {
     children: ReactNode;
 }): import("@types/react").JSX.Element;

package/dist/nav/Sidebar.component.js

@@ -10,9 +10,9 @@ 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");
+const _contexts_1 = require("@contexts");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 ;
 ;
 ;
@@ -24,16 +24,12 @@ function SidebarWrapper({ path, children, onClick, }) {
         return (0, jsx_runtime_1.jsx)("div", { onClick: () => onClick?.(), children: children });
     }
 }
-function SidebarComponent({ head, items, basePath, toggle, onToggleChange, 
-// onChange,
-// hasAccess,
-className = "", }) {
+function SidebarComponent({ id, head, footer, items, basePath, className = "", }) {
     const pathName = (0, navigation_1.usePathname)();
+    const { toggle, setToggle } = (0, _contexts_1.useToggleContext)();
     const [shows, setShows] = (0, react_1.useState)([]);
     const setShow = (key) => {
-        setShows((prevShows) => prevShows?.find((pk) => pk === key)
-            ? prevShows.filter((pk) => pk !== key)
-            : [...prevShows, key]);
+        setShows((prevShows) => prevShows?.find((pk) => pk === key) ? prevShows.filter((pk) => pk !== key) : [...prevShows, key]);
     };
     const checkShow = (key) => {
         if (shows?.includes(key)) {
@@ -65,23 +61,24 @@ className = "", }) {
             });
         });
     }, []);
-    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))) &&
+    (0, react_1.useEffect)(() => {
+        setToggle(`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`, false);
+    }, [pathName]);
+    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[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "scale-100 lg:scale-0" : "scale-0", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => setToggle(`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`) }), (0, jsx_runtime_1.jsxs)("aside", { className: (0, _utils_1.cn)("sidebar-base scroll-sm", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "w-full sm:w-[280px]" : "w-0 sm:w-14 lg:w-[280px]", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsx)("div", { className: toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "block" : "hidden lg:block", children: head }), (0, jsx_runtime_1.jsx)("div", { className: toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "hidden" : "flex justify-center pt-4 h-full lg:hidden", onClick: () => setToggle(`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/bars" }) }), (0, jsx_runtime_1.jsx)("nav", { className: (0, _utils_1.cn)("flex flex-col flex-1 overflow-hidden", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "w-full" : "w-0 lg:w-full"), 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: "", 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)(skalfa_icon_1.Icon, { icon: "solid/chevron-down", className: (0, _utils_1.cn)(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 &&
+                                                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: "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)(skalfa_icon_1.Icon, { icon: "solid/chevron-up", className: `text-[10px] ${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}`));
+                                                                                        "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-[10px] 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)(skalfa_icon_1.Icon, { icon: "solid/chevron-up", className: `block text-[10px] ${checkShow(`${menu_head_key}.${menu_key}`) || "rotate-180"}` }))] })] }) }) }, `${menu_head_key}.${menu_key}.${menu_child_key}`));
                                                                     }) }) })] }, `${menu_head_key}.${menu_key}`));
                                             })] }) }, menu_head_key));
-                        }) })] })] }));
+                        }) }), (0, jsx_runtime_1.jsx)("div", { className: toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "block" : "hidden lg:block", children: footer })] })] }));
 }
 function SidebarContentComponent({ children }) {
-    return ((0, jsx_runtime_1.jsx)("main", { className: "sidebar-main-content", children: children }));
+    return ((0, jsx_runtime_1.jsx)("main", { className: "w-full sm:ml-14 sm:w-[calc(100vw-56px)] lg:ml-[280px] lg:w-[calc(100vw-280px)] min-h-screen overflow-x-hidden", children: children }));
 }

package/dist/supervision/FormSupervision.component.d.ts

@@ -1,21 +1,9 @@
 import { ReactNode } from "react";
 import { ApiType, FormErrorType, FormRegisterType, FormValueType, ValidationRules, DBSchema } from "@utils";
-import { InputCheckboxProps } from "../input/InputCheckbox.component";
-import { InputProps } from "../input/Input.component";
-import { InputCurrencyProps } from "../input/InputCurrency.component";
-import { InputDateProps } from "../input/InputDate.component";
-import { InputNumberProps } from "../input/InputNumber.component";
-import { InputOtpProps } from "../input/InputOtp.component";
-import { InputPasswordProps } from "../input/InputPassword.component";
-import { InputRadioProps } from "../input/InputRadio.component";
-import { SelectProps } from "../input/Select.component";
-import { InputTimeProps } from "../input/InputTime.component";
-import { InputImageProps } from "../input/InputImage.component";
-import { InputDateTimeProps } from "../input/InputDatetime.component";
+import { InputProps, InputCheckboxProps, InputCurrencyProps, InputDateProps, InputNumberProps, InputRadioProps, SelectProps, InputPasswordProps, InputOtpProps, InputTimeProps, InputImageProps, InputDateTimeProps } from "../";
 type formCustomConstructionProps = ({ formControl, values, setValues, setRegister, errors, setErrors, }: {
     formControl: (name: string) => {
         register: (regName: string, regValidations?: ValidationRules | undefined) => void;
-        unregister: (regName: string) => void;
         onChange: (e: any) => void;
         value: any;
         invalid: any;
@@ -36,7 +24,6 @@ type ClusterConstruction = {
     tip: string;
     fields: FormType[];
     wrap: boolean;
-    min?: number;
     /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
     className: string;
 };
@@ -57,26 +44,12 @@ type ConstructionMap = {
     custom: formCustomConstructionProps;
 };
 type TypeKeys = keyof ConstructionMap;
-export type WatchContext = {
-    values: Record<string, any>;
-    self: string;
-    prev: WatchAction;
-};
-export type WatchAction = {
-    disabled?: boolean;
-    hidden?: boolean;
-    value?: any;
-    required?: boolean;
-    readonly?: boolean;
-    reset?: boolean;
-};
 export interface FormType<T extends TypeKeys = keyof ConstructionMap> {
     col?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | string;
     className?: string;
     construction?: ConstructionMap[T];
     type?: T;
     onHide?: (values: any) => boolean;
-    watch?: (ctx: WatchContext) => WatchAction | undefined;
 }
 export interface formSupervisionProps {
     title?: string;
@@ -97,7 +70,9 @@ export interface formSupervisionProps {
     }) => ReactNode;
     onSuccess?: (data: any) => void;
     onError?: (code: number) => void;
+    successMessage?: string;
     className?: string;
+    id?: string;
 }
-export declare function FormSupervisionComponent({ title, fields, submitControl, confirmation, defaultValue, onSuccess, onError, footerControl, payload, className, }: formSupervisionProps): import("@types/react").JSX.Element;
+export declare function FormSupervisionComponent({ title, fields, submitControl, confirmation, defaultValue, onSuccess, onError, footerControl, payload, className, successMessage, id, }: formSupervisionProps): import("@types/react").JSX.Element;
 export {};