@skalfa/skalfa-component 1.0.8 → 1.0.9

package/dist/accordion/Accordion.component.js

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccordionComponent = AccordionComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 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, 
@@ -15,7 +14,7 @@ className = "", }) {
     (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
+    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)(skalfa_icon_1.Icon, { icon: horizontal ? "solid/chevron-left" : "solid/chevron-down" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("accordion-content", horizontal
                         ? isActive === key
                             ? "accordion-content-horizontal-active"
                             : "accordion-content-horizontal-inactive"

package/dist/breadcrumb/Breadcrumb.component.js

@@ -6,16 +6,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BreadcrumbComponent = BreadcrumbComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 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));
+                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)(skalfa_icon_1.Icon, { icon: "solid/chevron-right" })) }))] }, item.path));
             }) }) }));
 }

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

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import { type IconName } from "@skalfa/skalfa-icon";
 export interface ButtonProps {
     type?: "submit" | "button";
     label?: string | ReactNode;
@@ -10,7 +11,7 @@ export interface ButtonProps {
     size?: "xs" | "sm" | "md" | "lg";
     onClick?: any;
     href?: string;
-    icon?: any;
+    icon?: IconName;
     loading?: boolean;
     hover?: boolean;
     tips?: string;

package/dist/button/Button.component.js

@@ -7,12 +7,12 @@ 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 skalfa_icon_1 = require("@skalfa/skalfa-icon");
 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] }));
+    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)(skalfa_icon_1.Icon, { 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 }));

package/dist/carousel/Carousel.component.js

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CarouselComponent = CarouselComponent;
 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 CarouselComponent({ items, className = "", noButton, noNavigation, }) {
     const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
@@ -33,5 +32,5 @@ function CarouselComponent({ items, className = "", noButton, noNavigation, }) {
                 clearInterval(intervalRef.current);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("carousel", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsx)("div", { className: "carousel-inner", style: { transform: `translateX(-${currentIndex * 100}%)` }, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("carousel-item", (0, _utils_1.pcn)(className, "item")), style: { backgroundImage: `url(${item.background})` }, children: item.content }, index))) }), !noNavigation && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("carousel-navigation", (0, _utils_1.pcn)(className, "navigation")), children: items.map((_, index) => ((0, jsx_runtime_1.jsx)("button", { className: `carousel-indicator ${currentIndex === index ? "carousel-indicator-active" : ""}`, onClick: () => setCurrentIndex(index) }, index))) })), !noButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { className: (0, _utils_1.cn)("carousel-btn carousel-prev-btn", (0, _utils_1.pcn)(className, "prev-button")), onClick: handlePrev, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronLeft }) }), (0, jsx_runtime_1.jsx)("button", { className: (0, _utils_1.cn)("carousel-btn carousel-next-btn", (0, _utils_1.pcn)(className, "next-button")), onClick: handleNext, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronRight }) })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("carousel", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsx)("div", { className: "carousel-inner", style: { transform: `translateX(-${currentIndex * 100}%)` }, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("carousel-item", (0, _utils_1.pcn)(className, "item")), style: { backgroundImage: `url(${item.background})` }, children: item.content }, index))) }), !noNavigation && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("carousel-navigation", (0, _utils_1.pcn)(className, "navigation")), children: items.map((_, index) => ((0, jsx_runtime_1.jsx)("button", { className: `carousel-indicator ${currentIndex === index ? "carousel-indicator-active" : ""}`, onClick: () => setCurrentIndex(index) }, index))) })), !noButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { className: (0, _utils_1.cn)("carousel-btn carousel-prev-btn", (0, _utils_1.pcn)(className, "prev-button")), onClick: handlePrev, children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-left" }) }), (0, jsx_runtime_1.jsx)("button", { className: (0, _utils_1.cn)("carousel-btn carousel-next-btn", (0, _utils_1.pcn)(className, "next-button")), onClick: handleNext, children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-right" }) })] }))] }));
 }

package/dist/chip/Chip.component.js

@@ -2,11 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChipComponent = ChipComponent;
 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 ChipComponent({ items, onClick, onDelete, className, }) {
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("chip-group", className), children: items?.map((item, key) => {
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "chip", onClick: () => onClick?.(item, key), children: [(0, jsx_runtime_1.jsx)("span", { children: item }), onDelete && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faTimes, className: "chip-delete", onClick: () => onDelete?.(item, key) }))] }, key));
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "chip", onClick: () => onClick?.(item, key), children: [(0, jsx_runtime_1.jsx)("span", { children: item }), onDelete && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/times", className: "chip-delete", onClick: () => onDelete?.(item, key) }))] }, key));
         }) }));
 }

package/dist/contexts-mock.d.ts

@@ -0,0 +1,2 @@
+export declare function useToggleContext(): any;
+export declare function useAuthContext(): any;

package/dist/contexts-mock.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToggleContext = useToggleContext;
+exports.useAuthContext = useAuthContext;
+function useToggleContext() {
+    return { toggle: {}, setToggle: () => { } };
+}
+function useAuthContext() {
+    return { setUser: () => { }, setAccessToken: () => { } };
+}

package/dist/input/Checkbox.component.js

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxComponent = CheckboxComponent;
 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 CheckboxComponent({ name, label, value, disabled = false, checked = false, invalid, onChange, className = "", }) {
     // =========================>
@@ -19,5 +18,5 @@ function CheckboxComponent({ name, label, value, disabled = false, checked = fal
     (0, react_1.useEffect)(() => {
         setInvalidMessage(invalid || "");
     }, [invalid]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "checkbox-container", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "hidden", id: randomId, name: name, onChange: onChange, defaultChecked: checked, value: value, disabled: disabled }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("checkbox-wrapper", disabled && "checkbox-wrapper-disabled"), children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("checkbox-input", checked && "checkbox-input-checked", checked && (0, _utils_1.pcn)(className, "checked"), (0, _utils_1.pcn)(className, "base")), children: checked && (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faCheck, className: "text-sm" }) }) }), (0, jsx_runtime_1.jsx)("span", { className: (0, _utils_1.cn)("checkbox-label", checked && "checkbox-label-checked", (0, _utils_1.pcn)(className, "label"), checked && (0, _utils_1.pcn)(className, "label", "checked"), disabled && (0, _utils_1.pcn)(className, "label", "disabled")), children: label })] }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "checkbox-container", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "hidden", id: randomId, name: name, onChange: onChange, defaultChecked: checked, value: value, disabled: disabled }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("checkbox-wrapper", disabled && "checkbox-wrapper-disabled"), children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("checkbox-input", checked && "checkbox-input-checked", checked && (0, _utils_1.pcn)(className, "checked"), (0, _utils_1.pcn)(className, "base")), children: checked && (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/check", className: "text-sm" }) }) }), (0, jsx_runtime_1.jsx)("span", { className: (0, _utils_1.cn)("checkbox-label", checked && "checkbox-label-checked", (0, _utils_1.pcn)(className, "label"), checked && (0, _utils_1.pcn)(className, "label", "checked"), disabled && (0, _utils_1.pcn)(className, "label", "disabled")), children: label })] }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }));
 }

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

@@ -1,10 +1,11 @@
 import { InputHTMLAttributes, ReactNode, Ref } from "react";
+import { type IconName } from "@skalfa/skalfa-icon";
 import { ValidationRules } from "@utils";
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
     label?: string;
     tip?: string | ReactNode;
-    leftIcon?: any;
-    rightIcon?: any;
+    leftIcon?: IconName;
+    rightIcon?: IconName;
     value?: any;
     invalid?: string;
     suggestions?: string[];

package/dist/input/Input.component.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputComponent = InputComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 const _utils_1 = require("@utils");
 const InputValues_component_1 = require("./InputValues.component");
 function InputComponent({ label, tip, leftIcon, rightIcon, className = "", value, invalid, suggestions, validations, onlyAlphabet, uppercase, lowercase, multiple, register, unregister, onChange, ref, ...props }) {
@@ -15,7 +15,7 @@ function InputComponent({ label, tip, leftIcon, rightIcon, className = "", value
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, unregister, props.type == "file");
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, props.type == "file");
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler
@@ -119,7 +119,7 @@ function InputComponent({ label, tip, leftIcon, rightIcon, className = "", value
                                 const newValues = values.filter((_, val) => val != index);
                                 inputHandler.setValue(newValues);
                                 onChange?.(newValues);
-                            }, className: `${!inputHandler.focus && (leftIcon ? "ml-[2.5rem]" : "ml-[1rem]")}`, style: { maxWidth: `calc(100% - ${leftIcon ? "5.2rem" : "2rem"})` } })), leftIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: rightIcon }))] }), !!dataSuggestions?.length && showSuggestions && !!filteredSuggestions?.length && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("ul", { className: (0, _utils_1.cn)("input-suggest-container", inputHandler.focus && "input-suggest-container-active", (0, _utils_1.pcn)(className, "suggest")), children: filteredSuggestions.map((suggestion, key) => {
+                            }, className: `${!inputHandler.focus && (leftIcon ? "ml-[2.5rem]" : "ml-[1rem]")}`, style: { maxWidth: `calc(100% - ${leftIcon ? "5.2rem" : "2rem"})` } })), leftIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: rightIcon }))] }), !!dataSuggestions?.length && showSuggestions && !!filteredSuggestions?.length && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("ul", { className: (0, _utils_1.cn)("input-suggest-container", inputHandler.focus && "input-suggest-container-active", (0, _utils_1.pcn)(className, "suggest")), children: filteredSuggestions.map((suggestion, key) => {
                             return ((0, jsx_runtime_1.jsx)("li", { className: (0, _utils_1.cn)("input-suggest", inputHandler.value == suggestion && "input-suggest-active", (0, _utils_1.pcn)(className, "suggest-item"), inputHandler.value == suggestion && (0, _utils_1.pcn)(className, "suggest-item", "active")), onMouseDown: () => {
                                     setTimeout(() => inputHandler.setFocus(true), 110);
                                 }, onMouseUp: () => {

package/dist/input/InputCheckbox.component.js

@@ -14,7 +14,7 @@ function InputCheckboxComponent({ name, label, tip, vertical, className = "", cl
     // =========================>
     // ## initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, unregister, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, false);
     // =========================>
     // ## Invalid handler
     // =========================>

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

@@ -1,10 +1,11 @@
 import { InputHTMLAttributes, ReactNode } from "react";
+import { type IconName } from "@skalfa/skalfa-icon";
 import { ValidationRules } from "@utils";
 export interface InputCurrencyProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
     label?: string;
     tip?: string | ReactNode;
-    leftIcon?: any;
-    rightIcon?: any;
+    leftIcon?: IconName;
+    rightIcon?: IconName;
     value?: number;
     invalid?: string;
     validations?: ValidationRules;

package/dist/input/InputCurrency.component.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputCurrencyComponent = InputCurrencyComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 const _utils_1 = require("@utils");
 function InputCurrencyComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, format, register, unregister, onChange, className = "", ...props }) {
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, unregister, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false);
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler
@@ -26,5 +26,5 @@ function InputCurrencyComponent({ label, tip, leftIcon, rightIcon, value, invali
                         }, onBlur: (e) => {
                             props.onBlur?.(e);
                             setTimeout(() => inputHandler.setFocus(false), 100);
-                        }, autoComplete: "off" }), leftIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: rightIcon }))] }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }));
+                        }, autoComplete: "off" }), leftIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: rightIcon }))] }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }));
 }

package/dist/input/InputDate.component.js

@@ -9,8 +9,7 @@ exports.InputDateComponent = InputDateComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const moment_1 = __importDefault(require("moment"));
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 const _utils_1 = require("@utils");
 const BottomSheet_component_1 = require("../modal/BottomSheet.component");
 const Button_component_1 = require("../button/Button.component");
@@ -20,7 +19,7 @@ function InputDateComponent({ label, tip, leftIcon, rightIcon, value, invalid, v
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, unregister, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false);
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler
@@ -35,7 +34,7 @@ function InputDateComponent({ label, tip, leftIcon, rightIcon, value, invalid, v
                                         inputHandler.setFocus(true);
                                     }, onBlur: (e) => {
                                         props.onBlur?.(e);
-                                    }, autoComplete: "off", inputMode: isSm ? "none" : undefined }), leftIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: rightIcon })), !isSm && inputHandler.focus && ((0, jsx_runtime_1.jsx)("div", { className: "input-date-picker-popover", children: (0, jsx_runtime_1.jsx)(exports.InputDatePickerComponent, { onChange: (e) => {
+                                    }, autoComplete: "off", inputMode: isSm ? "none" : undefined }), leftIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: rightIcon })), !isSm && inputHandler.focus && ((0, jsx_runtime_1.jsx)("div", { className: "input-date-picker-popover", children: (0, jsx_runtime_1.jsx)(exports.InputDatePickerComponent, { onChange: (e) => {
                                             inputHandler.setValue(e);
                                             onChange?.(e);
                                         } }) }))] }) }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }), isSm && ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: inputHandler.focus, onClose: () => inputHandler.setFocus(false), size: 380, footer: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: () => inputHandler.setFocus(false), block: true }) }), children: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.InputDatePickerComponent, { onChange: (e) => {
@@ -104,6 +103,6 @@ const InputDatePickerComponent = ({ onChange, minDate, maxDate, rightElement, })
     return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full flex gap-2 max-h-[260]", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-1/5 overflow-y-auto input-scroll pr-1", ref: containerYearRef, children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col", children: years?.map((item) => {
                         const isActive = currentDate?.year() === item;
                         return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { ref: isActive ? activeYearRef : null, className: `py-1 px-2 font-semibold rounded-[6px] cursor-pointer ${isActive && "bg-light-primary"}`, onClick: () => setCurrentDate((0, moment_1.default)().set("year", item)), children: item }, item) }));
-                    }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "w-4/5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center mb-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: handlePrevMonth, className: "w-8 text-sm aspect-square rounded-full cursor-pointer", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronLeft }) }), (0, jsx_runtime_1.jsx)("h2", { className: "font-semibold", children: currentDate.format("MMMM") }), (0, jsx_runtime_1.jsx)("button", { onClick: handleNextMonth, className: "w-8 text-sm aspect-square rounded-full cursor-pointer", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronRight }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: renderDays() }), (0, jsx_runtime_1.jsx)("div", { children: renderCells() })] }), rightElement && (0, jsx_runtime_1.jsx)("div", { children: rightElement })] }));
+                    }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "w-4/5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center mb-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: handlePrevMonth, className: "w-8 text-sm aspect-square rounded-full cursor-pointer", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-left" }) }), (0, jsx_runtime_1.jsx)("h2", { className: "font-semibold", children: currentDate.format("MMMM") }), (0, jsx_runtime_1.jsx)("button", { onClick: handleNextMonth, className: "w-8 text-sm aspect-square rounded-full cursor-pointer", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-right" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: renderDays() }), (0, jsx_runtime_1.jsx)("div", { children: renderCells() })] }), rightElement && (0, jsx_runtime_1.jsx)("div", { children: rightElement })] }));
 };
 exports.InputDatePickerComponent = InputDatePickerComponent;

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

@@ -1,10 +1,11 @@
 import { InputHTMLAttributes, ReactNode } from "react";
+import { type IconName } from "@skalfa/skalfa-icon";
 import { ValidationRules } from "@utils";
 export interface InputDateTimeProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
     label?: string;
     tip?: string | ReactNode;
-    leftIcon?: any;
-    rightIcon?: any;
+    leftIcon?: IconName;
+    rightIcon?: IconName;
     value?: string;
     invalid?: string;
     validations?: ValidationRules;

package/dist/input/InputDatetime.component.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputDatetimeComponent = InputDatetimeComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 const _utils_1 = require("@utils");
 const OutsideClick_component_1 = require("../wrap/OutsideClick.component");
 const InputDate_component_1 = require("./InputDate.component");
@@ -20,7 +20,7 @@ function InputDatetimeComponent({ label, tip, leftIcon, rightIcon, value, invali
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, unregister, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false);
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler
@@ -46,7 +46,7 @@ function InputDatetimeComponent({ label, tip, leftIcon, rightIcon, value, invali
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-container", children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", props.disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", !!invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] }), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", props.disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip")), children: tip })), (0, jsx_runtime_1.jsx)(OutsideClick_component_1.OutsideClickComponent, { onOutsideClick: !isSm ? () => inputHandler.setFocus(false) : undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { ...props, id: randomId, readOnly: true, className: (0, _utils_1.cn)("input", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", (0, _utils_1.pcn)(className, "input"), !!invalidMessage && "input-error"), value: inputHandler.value, onFocus: (e) => {
                                         props.onFocus?.(e);
                                         inputHandler.setFocus(true);
-                                    }, autoComplete: "off", inputMode: isSm ? "none" : undefined }), leftIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: rightIcon })), !isSm && inputHandler.focus && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "input-datetime-picker-popover", children: [(0, jsx_runtime_1.jsx)(Tabbar_component_1.TabbarComponent, { items: [
+                                    }, autoComplete: "off", inputMode: isSm ? "none" : undefined }), leftIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: rightIcon })), !isSm && inputHandler.focus && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "input-datetime-picker-popover", children: [(0, jsx_runtime_1.jsx)(Tabbar_component_1.TabbarComponent, { items: [
                                                     {
                                                         label: "Tanggal",
                                                         value: 'date'

package/dist/input/InputDocument.component.js

@@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputDocumentPicker = void 0;
 exports.InputDocumentComponent = InputDocumentComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 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 Button_component_1 = require("../button/Button.component");
 const FloatingPage_component_1 = require("../modal/FloatingPage.component");
@@ -24,7 +23,7 @@ function InputDocumentComponent({ label, tip, leftIcon, rightIcon, className = "
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, unregister, props.type == "file");
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, props.type == "file");
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler
@@ -36,8 +35,8 @@ function InputDocumentComponent({ label, tip, leftIcon, rightIcon, className = "
                                 }, inputMode: "none" }), (inputHandler.value) && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("input-document-values", leftIcon ? "input-document-values-left-icon" : "input-document-values-no-icon"), style: { maxWidth: `calc(100% - ${leftIcon ? "5.2rem" : "2rem"})` }, onClick: () => {
                                     inputHandler.setFocus(true);
                                 }, children: (Array.isArray(inputHandler.value) ? inputHandler.value : []).map((f) => {
-                                    return ((0, jsx_runtime_1.jsxs)("span", { className: "input-document-value-item", children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: DocumentViewerIcon(f.file.name.split(".").pop()?.toLowerCase()), className: "text-light-foreground" }), (0, jsx_runtime_1.jsx)("span", { className: "line-clamp-1", children: f.file.name })] }, f.id));
-                                }) })), leftIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: rightIcon }))] }), invalidMessage && (0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage })] }), !isSm ? ((0, jsx_runtime_1.jsx)(FloatingPage_component_1.FloatingPageComponent, { show: inputHandler.focus, onClose: () => inputHandler.setFocus(false), title: label, footer: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: () => inputHandler.setFocus(false), block: true }), children: (0, jsx_runtime_1.jsx)(exports.InputDocumentPicker, { value: inputHandler.value, onChange: (e) => {
+                                    return ((0, jsx_runtime_1.jsxs)("span", { className: "input-document-value-item", children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: DocumentViewerIcon(f.file.name.split(".").pop()?.toLowerCase()), className: "text-light-foreground" }), (0, jsx_runtime_1.jsx)("span", { className: "line-clamp-1", children: f.file.name })] }, f.id));
+                                }) })), leftIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: rightIcon }))] }), invalidMessage && (0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage })] }), !isSm ? ((0, jsx_runtime_1.jsx)(FloatingPage_component_1.FloatingPageComponent, { show: inputHandler.focus, onClose: () => inputHandler.setFocus(false), title: label, footer: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: () => inputHandler.setFocus(false), block: true }), children: (0, jsx_runtime_1.jsx)(exports.InputDocumentPicker, { value: inputHandler.value, onChange: (e) => {
                         inputHandler.setValue(e);
                         if (inputHandler.idle)
                             inputHandler.setIdle(false);
@@ -83,8 +82,8 @@ const InputDocumentPicker = ({ value, onChange }) => {
             setPreviewActive(next[0]?.id || null);
         }
     }
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "p-4 flex flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "input-document-dropzone", children: files.find((x) => x.id === previewActive)?.file ? ((0, jsx_runtime_1.jsx)(DocumentViewerComponent, { file: files.find((x) => x.id === previewActive)?.file })) : ((0, jsx_runtime_1.jsxs)("div", { className: "input-document-empty-box", onClick: () => fileInputRef.current?.click(), children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faPlus, className: "text-3xl" }), (0, jsx_runtime_1.jsx)("p", { className: "text-lg", children: "Tambah Dokumen" })] })) }), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", multiple: true, className: "hidden", onChange: handleFilePick }), (0, jsx_runtime_1.jsx)("div", { className: "input-document-thumbs-container", children: (0, jsx_runtime_1.jsxs)("div", { className: "input-document-thumbs-grid", children: [files.map((f) => {
-                                return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("input-document-thumb-wrapper", previewActive === f.id && "input-document-thumb-wrapper-active"), onClick: () => setPreviewActive(f.id), children: [(0, jsx_runtime_1.jsx)(DocumentViewerComponent, { file: f.file, mode: "thumb" }), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, onClick: () => removeFile(f.id), variant: "light", paint: "danger", className: "absolute top-2 right-2", size: isSm ? "xs" : "sm" })] }, f.id));
-                            }), (0, jsx_runtime_1.jsxs)("div", { className: "input-document-upload-box", onClick: () => fileInputRef.current?.click(), children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faPlus }), (0, jsx_runtime_1.jsx)("p", { className: "text-[10px] text-center", children: "Tambah Dokumen" })] })] }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "p-4 flex flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "input-document-dropzone", children: files.find((x) => x.id === previewActive)?.file ? ((0, jsx_runtime_1.jsx)(DocumentViewerComponent, { file: files.find((x) => x.id === previewActive)?.file })) : ((0, jsx_runtime_1.jsxs)("div", { className: "input-document-empty-box", onClick: () => fileInputRef.current?.click(), children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/plus", className: "text-3xl" }), (0, jsx_runtime_1.jsx)("p", { className: "text-lg", children: "Tambah Dokumen" })] })) }), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", multiple: true, className: "hidden", onChange: handleFilePick }), (0, jsx_runtime_1.jsx)("div", { className: "input-document-thumbs-container", children: (0, jsx_runtime_1.jsxs)("div", { className: "input-document-thumbs-grid", children: [files.map((f) => {
+                                return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("input-document-thumb-wrapper", previewActive === f.id && "input-document-thumb-wrapper-active"), onClick: () => setPreviewActive(f.id), children: [(0, jsx_runtime_1.jsx)(DocumentViewerComponent, { file: f.file, mode: "thumb" }), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/times", onClick: () => removeFile(f.id), variant: "light", paint: "danger", className: "absolute top-2 right-2", size: isSm ? "xs" : "sm" })] }, f.id));
+                            }), (0, jsx_runtime_1.jsxs)("div", { className: "input-document-upload-box", onClick: () => fileInputRef.current?.click(), children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/plus" }), (0, jsx_runtime_1.jsx)("p", { className: "text-[10px] text-center", children: "Tambah Dokumen" })] })] }) })] }) }));
 };
 exports.InputDocumentPicker = InputDocumentPicker;

package/dist/input/InputImage.component.js

@@ -4,8 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CanvasCropper = exports.InputImageComponent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 const _utils_1 = require("@utils");
 const BottomSheet_component_1 = require("../modal/BottomSheet.component");
 const Button_component_1 = require("../button/Button.component");
@@ -18,7 +17,7 @@ const InputImageComponent = ({ name, label, tip, value, disabled, aspect = "1/1"
     const [drag, setDrag] = (0, react_1.useState)(false);
     const [cropSrc, setCropSrc] = (0, react_1.useState)(null);
     const [openCrop, setOpenCrop] = (0, react_1.useState)(false);
-    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, unregister, true);
+    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, true);
     const [invalidMessage, setInvalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
     (0, react_1.useEffect)(() => {
         if (value) {
@@ -80,7 +79,7 @@ const InputImageComponent = ({ name, label, tip, value, disabled, aspect = "1/1"
                     }, onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => {
                         e.preventDefault();
                         setDrag(true);
-                    }, onDragLeave: () => setDrag(false), onDrop: onDropFile, children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-image-dropzone-content", children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: drag ? free_solid_svg_icons_1.faHandHolding : free_solid_svg_icons_1.faImages, className: "text-3xl" }), (0, jsx_runtime_1.jsx)("p", { className: "input-image-dropzone-text", children: drag ? "Letakkan di sini" : preview ? "Klik atau seret untuk ganti Gambar" : "Klik atau seret gambar" })] }), (0, jsx_runtime_1.jsx)("input", { id: randomId, ref: inputRef, type: "file", accept: "image/*", className: "hidden", disabled: disabled, onChange: onUpload })] }) }), preview && !disabled && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, paint: "danger", size: "sm", className: "absolute top-10 right-4", onClick: remove })), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage })), !isSm ? ((0, jsx_runtime_1.jsx)(Modal_component_1.ModalComponent, { show: openCrop, onClose: onCropCancel, title: "Sesuaikan Gambar", className: "w-max max-w-[350px]", children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(aspect.replace(":", "/")), onDone: onCropDone }) })) })) : ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: openCrop, onClose: onCropCancel, size: 400, children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(aspect.replace(":", "/")), onDone: onCropDone }) })) }))] }));
+                    }, onDragLeave: () => setDrag(false), onDrop: onDropFile, children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-image-dropzone-content", children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: drag ? "solid/hand-holding" : "solid/images", className: "text-3xl" }), (0, jsx_runtime_1.jsx)("p", { className: "input-image-dropzone-text", children: drag ? "Letakkan di sini" : preview ? "Klik atau seret untuk ganti Gambar" : "Klik atau seret gambar" })] }), (0, jsx_runtime_1.jsx)("input", { id: randomId, ref: inputRef, type: "file", accept: "image/*", className: "hidden", disabled: disabled, onChange: onUpload })] }) }), preview && !disabled && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/times", paint: "danger", size: "sm", className: "absolute top-10 right-4", onClick: remove })), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage })), !isSm ? ((0, jsx_runtime_1.jsx)(Modal_component_1.ModalComponent, { show: openCrop, onClose: onCropCancel, title: "Sesuaikan Gambar", className: "w-max max-w-[350px]", children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(aspect.replace(":", "/")), onDone: onCropDone }) })) })) : ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: openCrop, onClose: onCropCancel, size: 400, children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(aspect.replace(":", "/")), onDone: onCropDone }) })) }))] }));
 };
 exports.InputImageComponent = InputImageComponent;
 const CanvasCropper = ({ src, aspect, onDone, }) => {

package/dist/input/InputNumber.component.js

@@ -3,14 +3,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputNumberComponent = InputNumberComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 const _utils_1 = require("@utils");
 function InputNumberComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, min, max, onChange, register, unregister, className = "", ...props }) {
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, unregister, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false);
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler
@@ -36,5 +35,5 @@ function InputNumberComponent({ label, tip, leftIcon, rightIcon, value, invalid,
         props.onFocus?.(e);
         inputHandler.setFocus(true);
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "input-container", children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", props.disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", !!invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label"), props.disabled && (0, _utils_1.pcn)(className, "label", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "label", "focus"), !!invalidMessage && (0, _utils_1.pcn)(className, "label", "focus")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] }), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", props.disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip"), props.disabled && (0, _utils_1.pcn)(className, "tip", "disabled")), children: tip })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { ...props, id: randomId, className: (0, _utils_1.cn)("input", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", (0, _utils_1.pcn)(className, "input"), !!invalidMessage && "input-error", !!invalidMessage && (0, _utils_1.pcn)(className, "input", "error")), value: inputHandler.value, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, autoComplete: "off", min: min, max: max }), leftIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: leftIcon })), (0, jsx_runtime_1.jsx)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), children: (0, jsx_runtime_1.jsxs)("div", { className: "input-number-sort-container", children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: "input-number-sort-up", icon: free_solid_svg_icons_1.faSortUp, onClick: () => inputHandler.setValue(String(Number(inputHandler.value) + 1)) }), (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: "input-number-sort-down", icon: free_solid_svg_icons_1.faSortDown, onClick: () => inputHandler.setValue(String(Number(inputHandler.value) - 1)) })] }) })] }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "input-container", children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", props.disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", !!invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label"), props.disabled && (0, _utils_1.pcn)(className, "label", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "label", "focus"), !!invalidMessage && (0, _utils_1.pcn)(className, "label", "focus")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] }), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", props.disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip"), props.disabled && (0, _utils_1.pcn)(className, "tip", "disabled")), children: tip })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { ...props, id: randomId, className: (0, _utils_1.cn)("input", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", (0, _utils_1.pcn)(className, "input"), !!invalidMessage && "input-error", !!invalidMessage && (0, _utils_1.pcn)(className, "input", "error")), value: inputHandler.value, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, autoComplete: "off", min: min, max: max }), leftIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: leftIcon })), (0, jsx_runtime_1.jsx)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), children: (0, jsx_runtime_1.jsxs)("div", { className: "input-number-sort-container", children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: "input-number-sort-up", icon: "solid/chevron-up", onClick: () => inputHandler.setValue(String(Number(inputHandler.value) + 1)) }), (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: "input-number-sort-down", icon: "solid/chevron-down", onClick: () => inputHandler.setValue(String(Number(inputHandler.value) - 1)) })] }) })] }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }) }));
 }

package/dist/input/InputPassword.component.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputPasswordComponent = InputPasswordComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 const _utils_1 = require("@utils");
 function InputPasswordComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className = "", ...props }) {
     const [password, setPassword] = (0, react_1.useState)("");
@@ -13,7 +13,7 @@ function InputPasswordComponent({ label, tip, leftIcon, rightIcon, value, invali
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, unregister, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false);
     const randomId = (0, _utils_1.useInputRandomId)();
     const randomConfirmId = (0, _utils_1.useInputRandomId)();
     // =========================>
@@ -52,7 +52,7 @@ function InputPasswordComponent({ label, tip, leftIcon, rightIcon, value, invali
                         }, onBlur: (e) => {
                             props.onBlur?.(e);
                             setTimeout(() => inputHandler.setFocus(false), 100);
-                        }, autoComplete: "off" }), leftIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", (0, _utils_1.pcn)(className, "icon")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", (0, _utils_1.pcn)(className, "icon")), icon: rightIcon }))] }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: "input-error-message", children: invalidMessage })), strength && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mt-1", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("password-strength-bar", strength === "weak" && "password-strength-bar-weak", strength === "strong" && "password-strength-bar-strong", strength === "excellent" && "password-strength-bar-excellent") }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("password-strength-bar", strength === "weak" && "password-strength-bar-empty", strength === "strong" && "password-strength-bar-strong", strength === "excellent" && "password-strength-bar-excellent") }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("password-strength-bar", (strength === "weak" || strength === "strong") && "password-strength-bar-empty", strength === "excellent" && "password-strength-bar-excellent") }), (0, jsx_runtime_1.jsx)("span", { className: (0, _utils_1.cn)("password-strength-text", strength === "weak" && "password-strength-text-weak", strength === "strong" && "password-strength-text-strong", strength === "excellent" && "password-strength-text-excellent"), children: strength === "weak" ? "Weak" : strength === "strong" ? "Strong" : "Excellent" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "input-password-confirm-wrapper", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: randomConfirmId, className: (0, _utils_1.cn)("input-label", (0, _utils_1.pcn)(className, "label")), children: "Password Confirm" }), (0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("input", { ...props, id: randomConfirmId, type: "password", className: (0, _utils_1.cn)("input", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", (0, _utils_1.pcn)(className, "base"), isConfirmMismatch && "input-error"), value: confirmPassword, onChange: (e) => {
+                        }, autoComplete: "off" }), leftIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", (0, _utils_1.pcn)(className, "icon")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", (0, _utils_1.pcn)(className, "icon")), icon: rightIcon }))] }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: "input-error-message", children: invalidMessage })), strength && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mt-1", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("password-strength-bar", strength === "weak" && "password-strength-bar-weak", strength === "strong" && "password-strength-bar-strong", strength === "excellent" && "password-strength-bar-excellent") }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("password-strength-bar", strength === "weak" && "password-strength-bar-empty", strength === "strong" && "password-strength-bar-strong", strength === "excellent" && "password-strength-bar-excellent") }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("password-strength-bar", (strength === "weak" || strength === "strong") && "password-strength-bar-empty", strength === "excellent" && "password-strength-bar-excellent") }), (0, jsx_runtime_1.jsx)("span", { className: (0, _utils_1.cn)("password-strength-text", strength === "weak" && "password-strength-text-weak", strength === "strong" && "password-strength-text-strong", strength === "excellent" && "password-strength-text-excellent"), children: strength === "weak" ? "Weak" : strength === "strong" ? "Strong" : "Excellent" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "input-password-confirm-wrapper", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: randomConfirmId, className: (0, _utils_1.cn)("input-label", (0, _utils_1.pcn)(className, "label")), children: "Password Confirm" }), (0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("input", { ...props, id: randomConfirmId, type: "password", className: (0, _utils_1.cn)("input", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", (0, _utils_1.pcn)(className, "base"), isConfirmMismatch && "input-error"), value: confirmPassword, onChange: (e) => {
                                 setConfirmPassword(e.target.value);
                                 onChange?.(password, e.target.value);
                             }, autoComplete: "off" }) })] }), isConfirmMismatch && ((0, jsx_runtime_1.jsx)("small", { className: "input-error-message", children: "Password confirmation not match" }))] }));

package/dist/input/InputRadio.component.js

@@ -12,7 +12,7 @@ function InputRadioComponent({ name, label, tip, vertical, value, disabled, inva
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, unregister, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, false);
     // =========================>
     // ## Invalid handler
     // =========================>

package/dist/input/InputTime.component.js

@@ -5,7 +5,7 @@ exports.InputTimePickerComponent = void 0;
 exports.InputTimeComponent = InputTimeComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 const _utils_1 = require("@utils");
 const BottomSheet_component_1 = require("../modal/BottomSheet.component");
 const Button_component_1 = require("../button/Button.component");
@@ -15,7 +15,7 @@ function InputTimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, v
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, unregister, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false);
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler
@@ -28,7 +28,7 @@ function InputTimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, v
                                     }, onFocus: (e) => {
                                         props.onFocus?.(e);
                                         inputHandler.setFocus(true);
-                                    }, autoComplete: "off", inputMode: isSm ? "none" : undefined }), leftIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: rightIcon })), !isSm && inputHandler.focus && ((0, jsx_runtime_1.jsx)("div", { className: "input-time-picker-popover", children: (0, jsx_runtime_1.jsx)(exports.InputTimePickerComponent, { onChange: (time) => {
+                                    }, autoComplete: "off", inputMode: isSm ? "none" : undefined }), leftIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: rightIcon })), !isSm && inputHandler.focus && ((0, jsx_runtime_1.jsx)("div", { className: "input-time-picker-popover", children: (0, jsx_runtime_1.jsx)(exports.InputTimePickerComponent, { onChange: (time) => {
                                             inputHandler.setValue(time);
                                             onChange?.(time);
                                         } }) }))] }) }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }), isSm && ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: inputHandler.focus, onClose: () => inputHandler.setFocus(false), size: 380, footer: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: () => inputHandler.setFocus(false), block: true }) }), children: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.InputTimePickerComponent, { onChange: (time) => {