@skalfa/skalfa-component 1.0.0 → 1.0.3

package/dist/input/InputImage.component.js

@@ -7,7 +7,9 @@ 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");
-const _components_1 = require("@components");
+const BottomSheet_component_1 = require("../modal/BottomSheet.component");
+const Button_component_1 = require("../button/Button.component");
+const Modal_component_1 = require("../modal/Modal.component");
 const InputImageComponent = ({ name, label, tip, value, disabled, aspect = "1/1", invalid, validations, onChange, register, unregister, className = "", }) => {
     const { isSm } = (0, _utils_1.useResponsive)();
     const randomId = (0, _utils_1.useInputRandomId)();
@@ -78,7 +80,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)(_components_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)(_components_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)(_components_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)(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 }) })) }))] }));
 };
 exports.InputImageComponent = InputImageComponent;
 const CanvasCropper = ({ src, aspect, onDone, }) => {
@@ -255,6 +257,6 @@ const CanvasCropper = ({ src, aspect, onDone, }) => {
         setDragging(false);
         pinchDistRef.current = 0;
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { touchAction: "none" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-image-cropper-wrapper", style: { width: CROP_W, height: CROP_SIZE }, onMouseMove: handleMove, onMouseUp: handleUp, onMouseLeave: handleUp, onWheel: handleWheel, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, children: [(0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, width: CROP_W, height: CROP_SIZE, onMouseDown: handleDown, className: "cursor-move" }), (0, jsx_runtime_1.jsxs)("div", { className: "input-image-cropper-grid-container", style: { width: CROP_W, height: CROP_SIZE }, children: [(0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-border" }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-h input-image-cropper-grid-line-h-1" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-h input-image-cropper-grid-line-h-2" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-v input-image-cropper-grid-line-v-1" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-v input-image-cropper-grid-line-v-2" })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "p-4 pb-2", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: performCrop, block: true }) }), (0, jsx_runtime_1.jsx)("canvas", { ref: previewRef, className: "hidden" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { touchAction: "none" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-image-cropper-wrapper", style: { width: CROP_W, height: CROP_SIZE }, onMouseMove: handleMove, onMouseUp: handleUp, onMouseLeave: handleUp, onWheel: handleWheel, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, children: [(0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, width: CROP_W, height: CROP_SIZE, onMouseDown: handleDown, className: "cursor-move" }), (0, jsx_runtime_1.jsxs)("div", { className: "input-image-cropper-grid-container", style: { width: CROP_W, height: CROP_SIZE }, children: [(0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-border" }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-h input-image-cropper-grid-line-h-1" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-h input-image-cropper-grid-line-h-2" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-v input-image-cropper-grid-line-v-1" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-v input-image-cropper-grid-line-v-2" })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "p-4 pb-2", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: performCrop, block: true }) }), (0, jsx_runtime_1.jsx)("canvas", { ref: previewRef, className: "hidden" })] }));
 };
 exports.CanvasCropper = CanvasCropper;

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

@@ -17,7 +17,7 @@ export interface InputMapProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     unregister?: (name: string) => void;
     className?: string;
 }
-export declare function InputMapComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className, ...props }: InputMapProps): import("react").JSX.Element;
+export declare function InputMapComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className, ...props }: InputMapProps): import("@types/react").JSX.Element;
 export interface MapPickerProps {
     value?: any;
     onChange?: (value: any) => any;

package/dist/input/InputMap.component.js

@@ -15,7 +15,9 @@ const api_1 = require("@react-google-maps/api");
 const LoadScriptComponent = api_1.LoadScript;
 const GoogleMapComponent = api_1.GoogleMap;
 const _utils_1 = require("@utils");
-const _components_1 = require("@components");
+const BottomSheet_component_1 = require("../modal/BottomSheet.component");
+const Button_component_1 = require("../button/Button.component");
+const OutsideClick_component_1 = require("../wrap/OutsideClick.component");
 function InputMapComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className = "", ...props }) {
     const { isSm } = (0, _utils_1.useResponsive)();
     // =========================>
@@ -27,14 +29,14 @@ function InputMapComponent({ label, tip, leftIcon, rightIcon, value, invalid, va
     // ## Invalid handler
     // =========================>
     const [invalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-container", children: [label && ((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)(_components_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, 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?.address || "", readOnly: true, onFocus: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-container", children: [label && ((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, 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?.address || "", readOnly: true, onFocus: (e) => {
                                         props.onFocus?.(e);
                                         inputHandler.setFocus(true);
                                         inputHandler.setIdle(false);
                                     }, 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")), 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-map-suggest-container", style: { height: 300 }, children: (0, jsx_runtime_1.jsx)(exports.InputMapPickerComponent, { value: inputHandler.value, 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)(_components_1.BottomSheetComponent, { show: inputHandler.focus, onClose: () => inputHandler.setFocus(false), size: 450, footer: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(_components_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.InputMapPickerComponent, { 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: 450, 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.InputMapPickerComponent, { onChange: (e) => {
                             inputHandler.setValue(e);
                             onChange?.(e);
                         } }) }) }))] }));

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

@@ -16,4 +16,4 @@ export interface InputNumberProps extends Omit<InputHTMLAttributes<HTMLInputElem
     /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
     className?: string;
 }
-export declare function InputNumberComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, min, max, onChange, register, unregister, className, ...props }: InputNumberProps): import("react").JSX.Element;
+export declare function InputNumberComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, min, max, onChange, register, unregister, className, ...props }: InputNumberProps): import("@types/react").JSX.Element;

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

@@ -14,4 +14,4 @@ export interface InputPasswordProps extends Omit<InputHTMLAttributes<HTMLInputEl
     /** Use custom class with: "label::", "tip::", "error::", "icon::". */
     className?: string;
 }
-export declare function InputPasswordComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className, ...props }: InputPasswordProps): import("react").JSX.Element;
+export declare function InputPasswordComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className, ...props }: InputPasswordProps): import("@types/react").JSX.Element;

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

@@ -24,4 +24,4 @@ export type InputRadioProps = {
     /** Use custom class with: "label::", "checked::", "error::". */
     classNameCheckbox?: string;
 };
-export declare function InputRadioComponent({ name, label, tip, vertical, value, disabled, invalid, options, serverOptionControl, customOptions, validations, onChange, register, unregister, className, classNameCheckbox, }: InputRadioProps): import("react").JSX.Element;
+export declare function InputRadioComponent({ name, label, tip, vertical, value, disabled, invalid, options, serverOptionControl, customOptions, validations, onChange, register, unregister, className, classNameCheckbox, }: InputRadioProps): import("@types/react").JSX.Element;

package/dist/input/InputRadio.component.js

@@ -5,7 +5,7 @@ exports.InputRadioComponent = InputRadioComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const _utils_1 = require("@utils");
-const _components_1 = require("@components");
+const Radio_component_1 = require("./Radio.component");
 function InputRadioComponent({ name, label, tip, vertical, value, disabled, invalid, options, serverOptionControl, customOptions, validations, onChange, register, unregister, className = "", classNameCheckbox = "", }) {
     const [dataOptions, setDataOptions] = (0, react_1.useState)([]);
     const [loading, setLoading] = (0, react_1.useState)(false);
@@ -42,7 +42,7 @@ function InputRadioComponent({ name, label, tip, vertical, value, disabled, inva
                             return (0, jsx_runtime_1.jsx)("div", { className: "w-1/3 h-6 rounded-lg" }, key);
                         }), (options || dataOptions) &&
                             (options || dataOptions)?.map((option, key) => {
-                                return ((0, jsx_runtime_1.jsx)(_components_1.RadioComponent, { label: option.label, name: `option[${option.value}]#${name}`, checked: inputHandler.value == option.value, disabled: disabled, className: classNameCheckbox, onChange: () => {
+                                return ((0, jsx_runtime_1.jsx)(Radio_component_1.RadioComponent, { label: option.label, name: `option[${option.value}]#${name}`, checked: inputHandler.value == option.value, disabled: disabled, className: classNameCheckbox, onChange: () => {
                                         if (inputHandler.value == option.value) {
                                             inputHandler.setValue("");
                                             onChange?.("");

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

@@ -14,7 +14,7 @@ export interface InputTimeProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     /** Use custom class with: "label::", "tip::", "error::", "icon::". */
     className?: string;
 }
-export declare function InputTimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className, ...props }: InputTimeProps): import("react").JSX.Element;
+export declare function InputTimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className, ...props }: InputTimeProps): import("@types/react").JSX.Element;
 interface InputTimePickerProps {
     onChange?: (time: string) => void;
     rightElement?: ReactNode;

package/dist/input/InputTime.component.js

@@ -7,7 +7,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
 const _utils_1 = require("@utils");
-const _components_1 = require("@components");
+const BottomSheet_component_1 = require("../modal/BottomSheet.component");
+const Button_component_1 = require("../button/Button.component");
+const OutsideClick_component_1 = require("../wrap/OutsideClick.component");
 function InputTimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className = "", ...props }) {
     const { isSm } = (0, _utils_1.useResponsive)();
     // =========================>
@@ -19,7 +21,7 @@ function InputTimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, v
     // ## Invalid handler
     // =========================>
     const [invalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
-    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)(_components_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, 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, onChange: (e) => {
+    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, 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, onChange: (e) => {
                                         inputHandler.setValue(e.target.value);
                                         inputHandler.setIdle(false);
                                         onChange?.(e.target.value);
@@ -29,7 +31,7 @@ function InputTimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, v
                                     }, 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) => {
                                             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)(_components_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)(_components_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) => {
+                                        } }) }))] }) }), 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) => {
                             inputHandler.setValue(time);
                             onChange?.(time);
                         } }) }) }))] }));

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

@@ -6,4 +6,4 @@ export declare function InputValues({ value, className, onDelete, isFocus, onFoc
     isFocus?: boolean;
     onFocus?: () => void;
     style?: CSSProperties;
-}): import("react").JSX.Element;
+}): import("@types/react").JSX.Element;

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

@@ -9,4 +9,4 @@ export interface RadioProps {
     /** Use custom class with: "label::", "checked::", "error::". */
     className?: string;
 }
-export declare function RadioComponent({ name, label, value, disabled, checked, invalid, onChange, className, }: RadioProps): import("react").JSX.Element;
+export declare function RadioComponent({ name, label, value, disabled, checked, invalid, onChange, className, }: RadioProps): import("@types/react").JSX.Element;

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

@@ -44,4 +44,4 @@ export interface SelectProps {
     /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
     className?: string;
 }
-export declare function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, value, invalid, disabled, validations, multiple, autoFocus, clearable, options, searchable, serverOptionControl, idbOptionControl, serverSearchable, includedOptions, exceptOptions, tempOptions, newOption, maxShowOption, register, unregister, onChange, onFocus, onBlur, className, }: SelectProps): import("react").JSX.Element;
+export declare function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, value, invalid, disabled, validations, multiple, autoFocus, clearable, options, searchable, serverOptionControl, idbOptionControl, serverSearchable, includedOptions, exceptOptions, tempOptions, newOption, maxShowOption, register, unregister, onChange, onFocus, onBlur, className, }: SelectProps): import("@types/react").JSX.Element;

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

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

package/dist/modal/FloatingPage.component.js

@@ -5,7 +5,7 @@ exports.FloatingPageComponent = FloatingPageComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const _components_1 = require("@components");
+const Button_component_1 = require("../button/Button.component");
 const _utils_1 = require("@utils");
 ;
 function FloatingPageComponent({ show, onClose, title, children, tip, footer, className = "", }) {
@@ -23,5 +23,5 @@ 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)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, variant: "simple", paint: "danger", onClick: () => onClose() })] }), show && children, footer && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-footer absolute bottom-0 w-full", (0, _utils_1.pcn)(className, "footer")), children: show && footer }))] })] }));
+    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 }))] })] }));
 }

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

@@ -9,4 +9,4 @@ export interface ModalProps {
     /** Use custom class with: "backdrop::", "header::", "footer::". */
     className?: string;
 }
-export declare function ModalComponent({ show, onClose, title, children, tip, footer, className, }: ModalProps): import("react").JSX.Element;
+export declare function ModalComponent({ show, onClose, title, children, tip, footer, className, }: ModalProps): import("@types/react").JSX.Element;

package/dist/modal/Modal.component.js

@@ -6,7 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
 const _utils_1 = require("@utils");
-const _components_1 = require("@components");
+const Button_component_1 = require("../button/Button.component");
 ;
 function ModalComponent({ show, onClose, title, children, tip, footer, className = "", }) {
     (0, react_1.useEffect)(() => {
@@ -23,5 +23,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)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, variant: "simple", paint: "danger", onClick: () => onClose() })] })), show && children, footer && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-footer", (0, _utils_1.pcn)(className, "footer")), children: show && footer }))] })] }));
+    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 }))] })] }));
 }

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

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { ApiType } from "@utils";
-import { ButtonProps } from "@components";
+import { ButtonProps } from "../button/Button.component";
 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("react").JSX.Element;
+export declare function ModalConfirmComponent({ show, title, children, icon, footer, submitControl, onClose, className, }: ModalConfirmProps): import("@types/react").JSX.Element;
 export {};

package/dist/modal/ModalConfirm.component.js

@@ -7,7 +7,9 @@ const react_1 = require("react");
 const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
 const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
 const _utils_1 = require("@utils");
-const _components_1 = require("@components");
+const Toast_component_1 = require("./Toast.component");
+const Button_component_1 = require("../button/Button.component");
+const BottomSheet_component_1 = require("./BottomSheet.component");
 ;
 function ModalConfirmComponent({ show, title, children, icon, footer, submitControl, onClose, className = "", }) {
     const { isSm } = (0, _utils_1.useResponsive)();
@@ -31,7 +33,7 @@ function ModalConfirmComponent({ show, title, children, icon, footer, submitCont
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex flex-col gap-2 items-center text-primary", (0, _utils_1.pcn)(className, "header")), children: [(0, jsx_runtime_1.jsx)("div", { className: "mt-6", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: icon || free_solid_svg_icons_1.faQuestion, className: `text-xl` }) }), (0, jsx_runtime_1.jsx)("h6", { className: "font-semibold text-lg", children: title })] })), children, footer && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-footer", (0, _utils_1.pcn)(className, "footer")), children: footer }))] }));
     }, [title, footer, children]);
     const renderAction = (size = 'md') => {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center pt-6", children: [(0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Batal", variant: "simple", onClick: () => onClose(), className: "text-foreground bg-background rounded-none", block: true, size: size }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Konfirmasi", loading: loading, onClick: async () => {
+        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 () => {
                         if (!submitControl?.onSubmit)
                             return;
                         setLoading(true);
@@ -64,5 +66,5 @@ function ModalConfirmComponent({ show, title, children, icon, footer, submitCont
                         }
                     }, className: "rounded-none", block: true, size: size, ...submitControl })] }));
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isSm ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-backdrop", !show && "opacity-0 scale-0 -translate-y-full", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => onClose() }), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("modal modal-confirm", !show && "-translate-y-full opacity-0 scale-y-0", (0, _utils_1.pcn)(className, "base")), children: [renderChildren, renderAction()] })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(_components_1.BottomSheetComponent, { show: show, onClose: onClose, size: 220, footer: renderAction('lg'), children: renderChildren }) })), (0, jsx_runtime_1.jsx)(_components_1.ToastComponent, { show: toast == "failed", onClose: () => setToast(false), title: "Gagal", className: "!border-danger header::text-danger", children: (0, jsx_runtime_1.jsxs)("p", { className: "px-3 pb-2 text-sm", children: ["Gagal ", title || "", "! cek data dan koneksi internet dan coba kembali!"] }) }), (0, jsx_runtime_1.jsx)(_components_1.ToastComponent, { show: toast == "success", onClose: () => setToast(false), title: "Berhasil", className: "!border-success header::text-success", children: (0, jsx_runtime_1.jsxs)("p", { className: "px-3 pb-2 text-sm", children: ["Berhasil ", title || "", "!"] }) })] }));
+    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 || "", "!"] }) })] }));
 }

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

@@ -8,4 +8,4 @@ export interface ToastProps {
     /** Use custom class with: "backdrop::", "header::", "footer::". */
     className?: string;
 }
-export declare function ToastComponent({ show, onClose, title, children, footer, className, }: ToastProps): import("react").JSX.Element;
+export declare function ToastComponent({ show, onClose, title, children, footer, className, }: ToastProps): import("@types/react").JSX.Element;

package/dist/modal/Toast.component.js

@@ -6,7 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
 const _utils_1 = require("@utils");
-const _components_1 = require("@components");
+const Button_component_1 = require("../button/Button.component");
 ;
 function ToastComponent({ show, onClose, title, children, footer, className = "", }) {
     const [countdown, setCountdown] = (0, react_1.useState)(5);
@@ -51,7 +51,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)(_components_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: free_solid_svg_icons_1.faTimes, variant: "simple", paint: "danger", onClick: () => {
                                         clearInterval(timerId || "");
                                         onClose();
                                     }, size: "sm" })] })] })), show && children, footer && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-footer", (0, _utils_1.pcn)(className, "footer")), children: show && footer }))] }) }));

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

@@ -9,4 +9,4 @@ export interface BottombarProps {
     items?: BottombarItemProps[];
     className?: string;
 }
-export declare function BottombarComponent({ className, active, items, }: BottombarProps): import("react").JSX.Element;
+export declare function BottombarComponent({ className, active, items, }: BottombarProps): import("@types/react").JSX.Element;

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

@@ -34,4 +34,4 @@ export interface FooterProps {
         path: string;
     };
 }
-export declare function FooterComponent({ brandTitle, brandSubtitle, address, phone, email, supportHours, socials, columns, copyrightLink, }: FooterProps): import("react").JSX.Element;
+export declare function FooterComponent({ brandTitle, brandSubtitle, address, phone, email, supportHours, socials, columns, copyrightLink, }: FooterProps): import("@types/react").JSX.Element;

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

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

package/dist/nav/Headbar.component.js

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

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

@@ -19,4 +19,4 @@ export interface NavbarProps {
     onProfile?: () => void;
     className?: string;
 }
-export declare function NavbarComponent({ logoTitle, logoSubtitle, logoPath, specialLink, items, isLoggedIn, onLogin, onRegister, onProfile, className, }: NavbarProps): import("react").JSX.Element;
+export declare function NavbarComponent({ logoTitle, logoSubtitle, logoPath, specialLink, items, isLoggedIn, onLogin, onRegister, onProfile, className, }: NavbarProps): import("@types/react").JSX.Element;

package/dist/nav/Navbar.component.js

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

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

@@ -27,7 +27,7 @@ export interface sidebarProps {
     /** Use custom class with: "backdrop::", "head-item::", "item::", "child-item::". */
     className?: string;
 }
-export declare function SidebarComponent({ head, items, basePath, toggle, onToggleChange, className, }: sidebarProps): import("react").JSX.Element;
+export declare function SidebarComponent({ head, items, basePath, toggle, onToggleChange, className, }: sidebarProps): import("@types/react").JSX.Element;
 export declare function SidebarContentComponent({ children }: {
     children: ReactNode;
-}): import("react").JSX.Element;
+}): import("@types/react").JSX.Element;

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

@@ -10,4 +10,4 @@ export interface TabbarProps {
 }
 export declare function TabbarComponent({ items, onChange, active, 
 /** Use custom class with: "item::", "active::". */
-className, }: TabbarProps): import("react").JSX.Element;
+className, }: TabbarProps): import("@types/react").JSX.Element;

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

@@ -6,4 +6,4 @@ export interface WizardProps {
     }[];
     active: number;
 }
-export declare function WizardComponent({ items, active }: WizardProps): import("react").JSX.Element;
+export declare function WizardComponent({ items, active }: WizardProps): import("@types/react").JSX.Element;

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

@@ -1,6 +1,18 @@
 import { ReactNode } from "react";
 import { ApiType, FormErrorType, FormRegisterType, FormValueType, ValidationRules, DBSchema } from "@utils";
-import { InputProps, InputCheckboxProps, InputCurrencyProps, InputDateProps, InputNumberProps, InputRadioProps, SelectProps, InputPasswordProps, InputOtpProps, InputTimeProps, InputImageProps, InputDateTimeProps, InputMapProps } from "@components";
+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 { InputMapProps } from "../input/InputMap.component";
 type formCustomConstructionProps = ({ formControl, values, setValues, setRegister, errors, setErrors, }: {
     formControl: (name: string) => {
         register: (regName: string, regValidations?: ValidationRules | undefined) => void;
@@ -89,5 +101,5 @@ export interface formSupervisionProps {
     onError?: (code: number) => void;
     className?: string;
 }
-export declare function FormSupervisionComponent({ title, fields, submitControl, confirmation, defaultValue, onSuccess, onError, footerControl, payload, className, }: formSupervisionProps): import("react").JSX.Element;
+export declare function FormSupervisionComponent({ title, fields, submitControl, confirmation, defaultValue, onSuccess, onError, footerControl, payload, className, }: formSupervisionProps): import("@types/react").JSX.Element;
 export {};