@skalfa/skalfa-component 1.0.0 → 1.0.3

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

@@ -10,4 +10,4 @@ export interface AccordionProps {
 }
 export declare function AccordionComponent({ items, setActive, horizontal, 
 /** Use custom class with: "container::", "head::", "active::". */
-className, }: AccordionProps): import("react").JSX.Element;
+className, }: AccordionProps): import("@types/react").JSX.Element;

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

@@ -11,4 +11,4 @@ export interface BreadcrumbProps {
     /** Use custom class with: "container::", "active::". */
     className?: string;
 }
-export declare function BreadcrumbComponent({ items, className, square, separatorContent, }: BreadcrumbProps): import("react").JSX.Element;
+export declare function BreadcrumbComponent({ items, className, square, separatorContent, }: BreadcrumbProps): import("@types/react").JSX.Element;

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

@@ -18,4 +18,4 @@ export interface ButtonProps {
     /** Use custom class with: "icon::", "loading::". */
     className?: string;
 }
-export declare function ButtonComponent({ type, label, variant, paint, rounded, block, disabled, size, onClick, href, icon, loading, tips, title, className, }: ButtonProps): import("react").JSX.Element;
+export declare function ButtonComponent({ type, label, variant, paint, rounded, block, disabled, size, onClick, href, icon, loading, tips, title, className, }: ButtonProps): import("@types/react").JSX.Element;

package/dist/card/AlertCard.component.d.ts

@@ -8,4 +8,4 @@ export interface AlertCardProps {
     /** Use custom class with: "badge::", "title::". */
     className?: string;
 }
-export declare function AlertCardComponent({ title, leftContent, badge, content, footer, className, }: AlertCardProps): import("react").JSX.Element;
+export declare function AlertCardComponent({ title, leftContent, badge, content, footer, className, }: AlertCardProps): import("@types/react").JSX.Element;

package/dist/card/Card.component.d.ts

@@ -2,4 +2,4 @@ export interface CardProps {
     children: React.ReactNode;
     className?: string;
 }
-export declare function CardComponent({ children, className, }: CardProps): import("react").JSX.Element;
+export declare function CardComponent({ children, className, }: CardProps): import("@types/react").JSX.Element;

package/dist/card/DashboardCard.component.d.ts

@@ -6,4 +6,4 @@ export interface DashboardCardProps {
     path?: string;
     className?: string;
 }
-export declare function DashboardCardComponent({ content, title, rightContent, path, className, }: DashboardCardProps): import("react").JSX.Element;
+export declare function DashboardCardComponent({ content, title, rightContent, path, className, }: DashboardCardProps): import("@types/react").JSX.Element;

package/dist/card/GalleryCard.component.d.ts

@@ -4,4 +4,4 @@ export interface GalleryCardProps {
     /** Use custom class with: "label::", "image::". */
     className?: string;
 }
-export declare function GalleryCardComponent({ src, alt, className, }: GalleryCardProps): import("react").JSX.Element;
+export declare function GalleryCardComponent({ src, alt, className, }: GalleryCardProps): import("@types/react").JSX.Element;

package/dist/card/ProductCard.component.d.ts

@@ -6,4 +6,4 @@ export interface ProductCardProps {
     /** Use custom class with: "image::", "content::". */
     className?: string;
 }
-export declare function ProductCardComponent({ image, name, price, description, className, }: ProductCardProps): import("react").JSX.Element;
+export declare function ProductCardComponent({ image, name, price, description, className, }: ProductCardProps): import("@types/react").JSX.Element;

package/dist/card/ProfileCard.component.d.ts

@@ -7,4 +7,4 @@ export interface ProfileCardProps {
     /** Use custom class with: "image::", "content::". */
     className?: string;
 }
-export declare function ProfileCardComponent({ image, name, short, description, footer, className, }: ProfileCardProps): import("react").JSX.Element;
+export declare function ProfileCardComponent({ image, name, short, description, footer, className, }: ProfileCardProps): import("@types/react").JSX.Element;

package/dist/carousel/Carousel.component.d.ts

@@ -9,5 +9,5 @@ interface CarouselProps {
     /** Use custom class with: "item::", "prev-button::", "next-button::", "navigation::". */
     className?: string;
 }
-export declare function CarouselComponent({ items, className, noButton, noNavigation, }: CarouselProps): import("react").JSX.Element;
+export declare function CarouselComponent({ items, className, noButton, noNavigation, }: CarouselProps): import("@types/react").JSX.Element;
 export {};

package/dist/chip/Chip.component.d.ts

@@ -3,4 +3,4 @@ export declare function ChipComponent({ items, onClick, onDelete, className, }:
     onClick?: (item: any, index: number) => void;
     onDelete?: (item: any, index: number) => void;
     className?: string;
-}): import("react").JSX.Element;
+}): import("@types/react").JSX.Element;

package/dist/index.js

@@ -14,62 +14,181 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./accordion/Accordion.component"), exports);
-__exportStar(require("./breadcrumb/Breadcrumb.component"), exports);
-__exportStar(require("./button/Button.component"), exports);
-__exportStar(require("./card/AlertCard.component"), exports);
-__exportStar(require("./card/Card.component"), exports);
-__exportStar(require("./card/DashboardCard.component"), exports);
-__exportStar(require("./card/GalleryCard.component"), exports);
-__exportStar(require("./card/ProductCard.component"), exports);
-__exportStar(require("./card/ProfileCard.component"), exports);
-__exportStar(require("./carousel/Carousel.component"), exports);
-__exportStar(require("./chip/Chip.component"), exports);
-__exportStar(require("./input/Checkbox.component"), exports);
-__exportStar(require("./input/Input.component"), exports);
-__exportStar(require("./input/InputCheckbox.component"), exports);
-__exportStar(require("./input/InputCurrency.component"), exports);
-__exportStar(require("./input/InputDate.component"), exports);
-__exportStar(require("./input/InputDatetime.component"), exports);
-__exportStar(require("./input/InputDocument.component"), exports);
-__exportStar(require("./input/InputImage.component"), exports);
-__exportStar(require("./input/InputMap.component"), exports);
-__exportStar(require("./input/InputNumber.component"), exports);
-__exportStar(require("./input/InputOtp.component"), exports);
-__exportStar(require("./input/InputPassword.component"), exports);
-__exportStar(require("./input/InputRadio.component"), exports);
-__exportStar(require("./input/InputTime.component"), exports);
-__exportStar(require("./input/InputValues.component"), exports);
-__exportStar(require("./input/Radio.component"), exports);
-__exportStar(require("./input/Select.component"), exports);
-__exportStar(require("./modal/BottomSheet.component"), exports);
-__exportStar(require("./modal/FloatingPage.component"), exports);
-__exportStar(require("./modal/Modal.component"), exports);
-__exportStar(require("./modal/ModalConfirm.component"), exports);
-__exportStar(require("./modal/Toast.component"), exports);
-__exportStar(require("./nav/Bottombar.component"), exports);
-__exportStar(require("./nav/Footer.component"), exports);
-__exportStar(require("./nav/Headbar.component"), exports);
-__exportStar(require("./nav/Navbar.component"), exports);
-__exportStar(require("./nav/Sidebar.component"), exports);
-__exportStar(require("./nav/Tabbar.component"), exports);
-__exportStar(require("./nav/Wizard.component"), exports);
-__exportStar(require("./supervision/FormSupervision.component"), exports);
-__exportStar(require("./supervision/TableSupervision.component"), exports);
-__exportStar(require("./table/ControlBar.component"), exports);
-__exportStar(require("./table/FilterComponent"), exports);
-__exportStar(require("./table/Pagination.component"), exports);
-__exportStar(require("./table/Table.component"), exports);
-__exportStar(require("./typography/TypographyArticle.component"), exports);
-__exportStar(require("./typography/TypographyColumn.component"), exports);
-__exportStar(require("./typography/TypographyContent.component"), exports);
-__exportStar(require("./typography/TypographyTips.component"), exports);
-__exportStar(require("./wrap/Draggable.component"), exports);
-__exportStar(require("./wrap/Image.component"), exports);
-__exportStar(require("./wrap/OutsideClick.component"), exports);
-__exportStar(require("./wrap/ScrollContainer.component"), exports);
-__exportStar(require("./wrap/ShortcutProvider"), exports);
-__exportStar(require("./wrap/Swipe.component"), exports);
+// Static export for ./accordion/Accordion.component
+exports.AccordionComponent = require("./accordion/Accordion.component").AccordionComponent;
+
+// Static export for ./breadcrumb/Breadcrumb.component
+exports.BreadcrumbComponent = require("./breadcrumb/Breadcrumb.component").BreadcrumbComponent;
+
+// Static export for ./button/Button.component
+exports.ButtonComponent = require("./button/Button.component").ButtonComponent;
+
+// Static export for ./card/AlertCard.component
+exports.AlertCardComponent = require("./card/AlertCard.component").AlertCardComponent;
+
+// Static export for ./card/Card.component
+exports.CardComponent = require("./card/Card.component").CardComponent;
+
+// Static export for ./card/DashboardCard.component
+exports.DashboardCardComponent = require("./card/DashboardCard.component").DashboardCardComponent;
+
+// Static export for ./card/GalleryCard.component
+exports.GalleryCardComponent = require("./card/GalleryCard.component").GalleryCardComponent;
+
+// Static export for ./card/ProductCard.component
+exports.ProductCardComponent = require("./card/ProductCard.component").ProductCardComponent;
+
+// Static export for ./card/ProfileCard.component
+exports.ProfileCardComponent = require("./card/ProfileCard.component").ProfileCardComponent;
+
+// Static export for ./carousel/Carousel.component
+exports.CarouselComponent = require("./carousel/Carousel.component").CarouselComponent;
+
+// Static export for ./chip/Chip.component
+exports.ChipComponent = require("./chip/Chip.component").ChipComponent;
+
+// Static export for ./input/Checkbox.component
+exports.CheckboxComponent = require("./input/Checkbox.component").CheckboxComponent;
+
+// Static export for ./input/Input.component
+exports.InputComponent = require("./input/Input.component").InputComponent;
+
+// Static export for ./input/InputCheckbox.component
+exports.InputCheckboxComponent = require("./input/InputCheckbox.component").InputCheckboxComponent;
+
+// Static export for ./input/InputCurrency.component
+exports.InputCurrencyComponent = require("./input/InputCurrency.component").InputCurrencyComponent;
+
+// Static export for ./input/InputDate.component
+exports.InputDatePickerComponent = require("./input/InputDate.component").InputDatePickerComponent;
+exports.InputDateComponent = require("./input/InputDate.component").InputDateComponent;
+
+// Static export for ./input/InputDatetime.component
+exports.InputDatetimeComponent = require("./input/InputDatetime.component").InputDatetimeComponent;
+
+// Static export for ./input/InputDocument.component
+exports.InputDocumentPicker = require("./input/InputDocument.component").InputDocumentPicker;
+exports.InputDocumentComponent = require("./input/InputDocument.component").InputDocumentComponent;
+
+// Static export for ./input/InputImage.component
+exports.InputImageComponent = require("./input/InputImage.component").InputImageComponent;
+exports.CanvasCropper = require("./input/InputImage.component").CanvasCropper;
+
+// Static export for ./input/InputMap.component
+exports.InputMapPickerComponent = require("./input/InputMap.component").InputMapPickerComponent;
+exports.InputMapComponent = require("./input/InputMap.component").InputMapComponent;
+
+// Static export for ./input/InputNumber.component
+exports.InputNumberComponent = require("./input/InputNumber.component").InputNumberComponent;
+
+// Static export for ./input/InputOtp.component
+exports.InputOtpComponent = require("./input/InputOtp.component").InputOtpComponent;
+
+// Static export for ./input/InputPassword.component
+exports.InputPasswordComponent = require("./input/InputPassword.component").InputPasswordComponent;
+
+// Static export for ./input/InputRadio.component
+exports.InputRadioComponent = require("./input/InputRadio.component").InputRadioComponent;
+
+// Static export for ./input/InputTime.component
+exports.InputTimePickerComponent = require("./input/InputTime.component").InputTimePickerComponent;
+exports.InputTimeComponent = require("./input/InputTime.component").InputTimeComponent;
+
+// Static export for ./input/InputValues.component
+exports.InputValues = require("./input/InputValues.component").InputValues;
+
+// Static export for ./input/Radio.component
+exports.RadioComponent = require("./input/Radio.component").RadioComponent;
+
+// Static export for ./input/Select.component
+exports.SelectComponent = require("./input/Select.component").SelectComponent;
+
+// Static export for ./modal/BottomSheet.component
+exports.BottomSheetComponent = require("./modal/BottomSheet.component").BottomSheetComponent;
+
+// Static export for ./modal/FloatingPage.component
+exports.FloatingPageComponent = require("./modal/FloatingPage.component").FloatingPageComponent;
+
+// Static export for ./modal/Modal.component
+exports.ModalComponent = require("./modal/Modal.component").ModalComponent;
+
+// Static export for ./modal/ModalConfirm.component
+exports.ModalConfirmComponent = require("./modal/ModalConfirm.component").ModalConfirmComponent;
+
+// Static export for ./modal/Toast.component
+exports.ToastComponent = require("./modal/Toast.component").ToastComponent;
+
+// Static export for ./nav/Bottombar.component
+exports.BottombarComponent = require("./nav/Bottombar.component").BottombarComponent;
+
+// Static export for ./nav/Footer.component
+exports.FooterComponent = require("./nav/Footer.component").FooterComponent;
+
+// Static export for ./nav/Headbar.component
+exports.HeadbarComponent = require("./nav/Headbar.component").HeadbarComponent;
+
+// Static export for ./nav/Navbar.component
+exports.NavbarComponent = require("./nav/Navbar.component").NavbarComponent;
+
+// Static export for ./nav/Sidebar.component
+exports.SidebarComponent = require("./nav/Sidebar.component").SidebarComponent;
+exports.SidebarContentComponent = require("./nav/Sidebar.component").SidebarContentComponent;
+
+// Static export for ./nav/Tabbar.component
+exports.TabbarComponent = require("./nav/Tabbar.component").TabbarComponent;
+
+// Static export for ./nav/Wizard.component
+exports.WizardComponent = require("./nav/Wizard.component").WizardComponent;
+
+// Static export for ./supervision/FormSupervision.component
+exports.FormSupervisionComponent = require("./supervision/FormSupervision.component").FormSupervisionComponent;
+
+// Static export for ./supervision/TableSupervision.component
+exports.TableSupervisionComponent = require("./supervision/TableSupervision.component").TableSupervisionComponent;
+
+// Static export for ./table/ControlBar.component
+exports.ControlBarComponent = require("./table/ControlBar.component").ControlBarComponent;
+
+// Static export for ./table/FilterComponent
+exports.FilterComponent = require("./table/FilterComponent").FilterComponent;
+exports.InputFilterValueComponent = require("./table/FilterComponent").InputFilterValueComponent;
+
+// Static export for ./table/Pagination.component
+exports.PaginationComponent = require("./table/Pagination.component").PaginationComponent;
+
+// Static export for ./table/Table.component
+exports.TableComponent = require("./table/Table.component").TableComponent;
+
+// Static export for ./typography/TypographyArticle.component
+exports.TypographyArticleComponent = require("./typography/TypographyArticle.component").TypographyArticleComponent;
+
+// Static export for ./typography/TypographyColumn.component
+exports.TypographyColumnComponent = require("./typography/TypographyColumn.component").TypographyColumnComponent;
+
+// Static export for ./typography/TypographyContent.component
+exports.TypographyContentComponent = require("./typography/TypographyContent.component").TypographyContentComponent;
+
+// Static export for ./typography/TypographyTips.component
+exports.TypographyTipsComponent = require("./typography/TypographyTips.component").TypographyTipsComponent;
+
+// Static export for ./wrap/Draggable.component
+exports.DraggableComponent = require("./wrap/Draggable.component").DraggableComponent;
+
+// Static export for ./wrap/Image.component
+exports.ImageComponent = require("./wrap/Image.component").ImageComponent;
+
+// Static export for ./wrap/OutsideClick.component
+exports.OutsideClickComponent = require("./wrap/OutsideClick.component").OutsideClickComponent;
+
+// Static export for ./wrap/ScrollContainer.component
+exports.ScrollContainerComponent = require("./wrap/ScrollContainer.component").ScrollContainerComponent;
+
+// Static export for ./wrap/ShortcutProvider
+exports.ShortcutProvider = require("./wrap/ShortcutProvider").ShortcutProvider;
+
+// Static export for ./wrap/Swipe.component
+exports.SwipeComponent = require("./wrap/Swipe.component").SwipeComponent;
+
 const _utils_1 = require("@utils");
 const Table_component_js_1 = require("./table/Table.component.js");
 const Button_component_js_1 = require("./button/Button.component.js");

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

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

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

@@ -20,4 +20,4 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
     className?: string;
 }
-export declare function InputComponent({ label, tip, leftIcon, rightIcon, className, value, invalid, suggestions, validations, onlyAlphabet, uppercase, lowercase, multiple, register, unregister, onChange, ref, ...props }: InputProps): import("react").JSX.Element;
+export declare function InputComponent({ label, tip, leftIcon, rightIcon, className, value, invalid, suggestions, validations, onlyAlphabet, uppercase, lowercase, multiple, register, unregister, onChange, ref, ...props }: InputProps): import("@types/react").JSX.Element;

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

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

package/dist/input/InputCheckbox.component.js

@@ -5,7 +5,7 @@ exports.InputCheckboxComponent = InputCheckboxComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const _utils_1 = require("@utils");
-const _components_1 = require("@components");
+const Checkbox_component_1 = require("./Checkbox.component");
 ;
 ;
 function InputCheckboxComponent({ name, label, tip, vertical, className = "", classNameCheckbox = "", value, disabled, invalid, options, serverOptionControl, customOptions, validations, register, unregister, onChange, }) {
@@ -42,7 +42,7 @@ function InputCheckboxComponent({ name, label, tip, vertical, className = "", cl
                             return (0, jsx_runtime_1.jsx)("div", { className: "w-1/3 h-6 rounded-lg" }, key);
                         }), (options || dataOptions) && (options || dataOptions)?.map((option, key) => {
                             const checked = Array().concat(inputHandler.value).find((val) => val == option.value);
-                            return ((0, jsx_runtime_1.jsx)(_components_1.CheckboxComponent, { label: option.label, name: `option[${option.value}]#${name}`, checked: !!checked, disabled: disabled, className: classNameCheckbox, onChange: () => {
+                            return ((0, jsx_runtime_1.jsx)(Checkbox_component_1.CheckboxComponent, { label: option.label, name: `option[${option.value}]#${name}`, checked: !!checked, disabled: disabled, className: classNameCheckbox, onChange: () => {
                                     const newVal = (Array.isArray(inputHandler.value) ? inputHandler.value : [])
                                         .filter((val) => val !== option.value)
                                         .concat(checked ? [] : [option.value]);

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

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

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

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

package/dist/input/InputDate.component.js

@@ -12,7 +12,9 @@ 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 _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 InputDateComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className = "", ...props }) {
     const { isSm } = (0, _utils_1.useResponsive)();
     // =========================>
@@ -24,7 +26,7 @@ function InputDateComponent({ 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"), 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", "error")), 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.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", !!invalidMessage && (0, _utils_1.pcn)(className, "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"), 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", "error")), 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.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", !!invalidMessage && (0, _utils_1.pcn)(className, "input", "error")), value: inputHandler.value, onChange: (e) => {
                                         inputHandler.setValue(e.target.value);
                                         inputHandler.setValue(false);
                                         onChange?.(e.target.value);
@@ -36,7 +38,7 @@ function InputDateComponent({ 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"), 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) => {
                                             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: 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.InputDatePickerComponent, { 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) => {
                             inputHandler.setValue(e);
                             onChange?.(e);
                         } }) }) }))] }));
@@ -73,10 +75,10 @@ const InputDatePickerComponent = ({ onChange, minDate, maxDate, rightElement, })
         while (day.isBefore(endDate) || day.isSame(endDate, "day")) {
             for (let i = 0; i < 7; i++) {
                 const cloneDay = (0, moment_1.default)(day);
-                days.push((0, jsx_runtime_1.jsx)("div", { className: `w-8 aspect-square flex items-center justify-center text-center rounded-lg transition-all 
-              ${day.isSame(currentDate, "month") ? "text-foreground" : "text-light-foreground"} 
-              ${day.isSame(selectedDate, "day") ? "bg-primary text-background" : "hover:bg-light-primary"}
-              ${day.isSame((0, moment_1.default)(), "day") ? "border !border-primary" : "hover:bg-light-primary"} 
+                days.push((0, jsx_runtime_1.jsx)("div", { className: `w-8 aspect-square flex items-center justify-center text-center rounded-lg transition-all 
+              ${day.isSame(currentDate, "month") ? "text-foreground" : "text-light-foreground"} 
+              ${day.isSame(selectedDate, "day") ? "bg-primary text-background" : "hover:bg-light-primary"}
+              ${day.isSame((0, moment_1.default)(), "day") ? "border !border-primary" : "hover:bg-light-primary"} 
               ${(minDate && day.isBefore((0, moment_1.default)(minDate))) || (maxDate && day.isAfter((0, moment_1.default)(maxDate))) ? "opacity-10 cursor-not-allowed" : "cursor-pointer"}`, onClick: () => handleDateClick(cloneDay), children: day.format("D") }, day.toString()));
                 day.add(1, "day");
             }

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

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

package/dist/input/InputDatetime.component.js

@@ -6,7 +6,12 @@ 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 OutsideClick_component_1 = require("../wrap/OutsideClick.component");
+const InputDate_component_1 = require("./InputDate.component");
+const InputTime_component_1 = require("./InputTime.component");
+const BottomSheet_component_1 = require("../modal/BottomSheet.component");
+const Button_component_1 = require("../button/Button.component");
+const Tabbar_component_1 = require("../nav/Tabbar.component");
 function InputDatetimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className = "", ...props }) {
     const { isSm } = (0, _utils_1.useResponsive)();
     const [pickerType, setPickerType] = (0, react_1.useState)("date");
@@ -38,10 +43,10 @@ function InputDatetimeComponent({ label, tip, leftIcon, rightIcon, value, invali
         inputHandler.setValue(newVal.trim());
         onChange?.(newVal.trim());
     };
-    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, 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) => {
+    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)(_components_1.TabbarComponent, { items: [
+                                    }, 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: [
                                                     {
                                                         label: "Tanggal",
                                                         value: 'date'
@@ -50,13 +55,13 @@ function InputDatetimeComponent({ label, tip, leftIcon, rightIcon, value, invali
                                                         label: "Jam",
                                                         value: 'time'
                                                     },
-                                                ], active: pickerType, onChange: (e) => setPickerType(e), className: "mb-4" }), pickerType === "date" ? ((0, jsx_runtime_1.jsx)(_components_1.InputDatePickerComponent, { onChange: (e) => {
+                                                ], active: pickerType, onChange: (e) => setPickerType(e), className: "mb-4" }), pickerType === "date" ? ((0, jsx_runtime_1.jsx)(InputDate_component_1.InputDatePickerComponent, { onChange: (e) => {
                                                     setDateValue(e);
                                                     handleChange(e, timeValue);
-                                                } })) : ((0, jsx_runtime_1.jsx)(_components_1.InputTimePickerComponent, { onChange: (e) => {
+                                                } })) : ((0, jsx_runtime_1.jsx)(InputTime_component_1.InputTimePickerComponent, { onChange: (e) => {
                                                     setTimeValue(e);
                                                     handleChange(dateValue, 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: 430, 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.jsxs)("div", { className: "p-4", children: [(0, jsx_runtime_1.jsx)(_components_1.TabbarComponent, { items: [
+                                                } }))] }) }))] }) }), 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: 430, 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.jsxs)("div", { className: "p-4", children: [(0, jsx_runtime_1.jsx)(Tabbar_component_1.TabbarComponent, { items: [
                                 {
                                     label: "Tanggal",
                                     value: 'date'
@@ -65,10 +70,10 @@ function InputDatetimeComponent({ label, tip, leftIcon, rightIcon, value, invali
                                     label: "Jam",
                                     value: 'time'
                                 },
-                            ], active: pickerType, onChange: (e) => setPickerType(e), className: "mb-4" }), pickerType === "date" ? ((0, jsx_runtime_1.jsx)(_components_1.InputDatePickerComponent, { onChange: (e) => {
+                            ], active: pickerType, onChange: (e) => setPickerType(e), className: "mb-4" }), pickerType === "date" ? ((0, jsx_runtime_1.jsx)(InputDate_component_1.InputDatePickerComponent, { onChange: (e) => {
                                 setDateValue(e);
                                 handleChange(e, timeValue);
-                            } })) : ((0, jsx_runtime_1.jsx)(_components_1.InputTimePickerComponent, { onChange: (e) => {
+                            } })) : ((0, jsx_runtime_1.jsx)(InputTime_component_1.InputTimePickerComponent, { onChange: (e) => {
                                 setTimeValue(e);
                                 handleChange(dateValue, e);
                             } }))] }) }))] }));

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

@@ -14,7 +14,7 @@ export interface InputDocumentProps extends Omit<InputHTMLAttributes<HTMLInputEl
     /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
     className?: string;
 }
-export declare function InputDocumentComponent({ label, tip, leftIcon, rightIcon, className, value, invalid, validations, register, unregister, onChange, ...props }: InputDocumentProps): import("react").JSX.Element;
+export declare function InputDocumentComponent({ label, tip, leftIcon, rightIcon, className, value, invalid, validations, register, unregister, onChange, ...props }: InputDocumentProps): import("@types/react").JSX.Element;
 export interface InputDocumentPickerProps {
     value?: any[];
     onChange?: (value: any[]) => void;

package/dist/input/InputDocument.component.js

@@ -8,7 +8,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 Button_component_1 = require("../button/Button.component");
+const FloatingPage_component_1 = require("../modal/FloatingPage.component");
+const BottomSheet_component_1 = require("../modal/BottomSheet.component");
 const DocumentViewerComponent = (props) => {
     const Comp = _utils_1.registry.get("DocumentViewerComponent");
     return Comp ? (0, jsx_runtime_1.jsx)(Comp, { ...props }) : null;
@@ -35,12 +37,12 @@ function InputDocumentComponent({ label, tip, leftIcon, rightIcon, className = "
                                     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)(_components_1.FloatingPageComponent, { show: inputHandler.focus, onClose: () => inputHandler.setFocus(false), title: label, footer: (0, jsx_runtime_1.jsx)(_components_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) => {
+                                }) })), 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) => {
                         inputHandler.setValue(e);
                         if (inputHandler.idle)
                             inputHandler.setIdle(false);
                         onChange?.(e);
-                    } }) })) : ((0, jsx_runtime_1.jsx)(_components_1.BottomSheetComponent, { show: inputHandler.focus, onClose: () => inputHandler.setFocus(false), size: '98vh', footer: (0, jsx_runtime_1.jsx)(_components_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) => {
+                    } }) })) : ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: inputHandler.focus, onClose: () => inputHandler.setFocus(false), size: '98vh', 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);
@@ -82,7 +84,7 @@ const InputDocumentPicker = ({ value, onChange }) => {
         }
     }
     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)(_components_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));
+                                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" })] })] }) })] }) }));
 };
 exports.InputDocumentPicker = InputDocumentPicker;