@skalfa/skalfa-component 1.0.8 → 1.0.9

package/src/input/InputDate.component.tsx

@@ -2,8 +2,7 @@
 
 import { InputHTMLAttributes, ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import moment from "moment";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { Icon } from "@skalfa/skalfa-icon";
 import { cn, pcn, useInputHandler, useInputRandomId, useResponsive, useValidation, validation, ValidationRules } from "@utils";
 import { BottomSheetComponent } from "../modal/BottomSheet.component";
 import { ButtonComponent } from "../button/Button.component";
@@ -55,7 +54,7 @@ export function InputDateComponent({
   // =========================>
   // ## Initial
   // =========================>
-  const inputHandler = useInputHandler(props.name, value, validations, register, unregister, false)
+  const inputHandler = useInputHandler(props.name, value, validations, register, false)
   const randomId = useInputRandomId()
 
 
@@ -127,7 +126,7 @@ export function InputDateComponent({
             />
 
             {leftIcon && (
-              <FontAwesomeIcon
+              <Icon
                 className={cn(
                   "input-icon",
                   "input-icon-left",
@@ -142,7 +141,7 @@ export function InputDateComponent({
             )}
 
             {rightIcon && (
-              <FontAwesomeIcon
+              <Icon
                 className={cn(
                   "input-icon",
                   "input-icon-right",
@@ -336,14 +335,14 @@ export const InputDatePickerComponent: React.FC<InputDatePickerProps> = ({
             onClick={handlePrevMonth}
             className="w-8 text-sm aspect-square rounded-full cursor-pointer"
           >
-            <FontAwesomeIcon icon={faChevronLeft} />
+            <Icon icon="solid/chevron-left" />
           </button>
           <h2 className="font-semibold">{currentDate.format("MMMM")}</h2>
           <button
             onClick={handleNextMonth}
             className="w-8 text-sm aspect-square rounded-full cursor-pointer"
           >
-            <FontAwesomeIcon icon={faChevronRight} />
+            <Icon icon="solid/chevron-right" />
           </button>
         </div>
         <div className="grid grid-cols-7 gap-1 mb-2">{renderDays()}</div>

package/src/input/InputDatetime.component.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { InputHTMLAttributes, ReactNode, useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
 import { cn, pcn, useInputHandler, useInputRandomId, useResponsive, useValidation, validation, ValidationRules } from "@utils";
 import { OutsideClickComponent } from "../wrap/OutsideClick.component";
 import { InputDatePickerComponent } from "./InputDate.component";
@@ -17,8 +17,8 @@ type CT = "label" | "tip" | "error" | "input" | "icon";
 export interface InputDateTimeProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
   label      ?:  string;
   tip        ?:  string | ReactNode;
-  leftIcon   ?:  any;
-  rightIcon  ?:  any;
+  leftIcon   ?:  IconName;
+  rightIcon  ?:  IconName;
 
   value        ?:  string;
   invalid      ?:  string;
@@ -61,7 +61,7 @@ export function InputDatetimeComponent({
   // =========================>
   // ## Initial
   // =========================>
-  const inputHandler  =  useInputHandler(props.name, value, validations, register, unregister, false)
+  const inputHandler  =  useInputHandler(props.name, value, validations, register, false)
   const randomId      =  useInputRandomId()
 
 
@@ -143,7 +143,7 @@ export function InputDatetimeComponent({
             />
 
             {leftIcon && (
-              <FontAwesomeIcon
+              <Icon
                 className={cn(
                   "input-icon",
                   "input-icon-left",
@@ -156,7 +156,7 @@ export function InputDatetimeComponent({
             )}
 
             {rightIcon && (
-              <FontAwesomeIcon
+              <Icon
                 className={cn(
                   "input-icon",
                   "input-icon-right",

package/src/input/InputDocument.component.tsx

@@ -1,8 +1,8 @@
 "use client"
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+
 
 import { useState, useRef, InputHTMLAttributes, ReactNode } from "react";
-import { faPlus, faTimes } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { cn, pcn, registry, useInputHandler, useInputRandomId, useResponsive, useValidation, validation, ValidationRules } from "@utils";
 import { ButtonComponent } from "../button/Button.component";
 import { FloatingPageComponent } from "../modal/FloatingPage.component";
@@ -73,7 +73,7 @@ export function InputDocumentComponent({
   // =========================>
   // ## Initial
   // =========================>
-  const inputHandler      =  useInputHandler(props.name, value, validations, register, unregister, props.type == "file")
+  const inputHandler      =  useInputHandler(props.name, value, validations, register, props.type == "file")
   const randomId          =  useInputRandomId()
 
   // =========================>
@@ -152,7 +152,7 @@ export function InputDocumentComponent({
                     key={f.id}
                     className="input-document-value-item"
                   >
-                    <FontAwesomeIcon icon={DocumentViewerIcon(f.file.name.split(".").pop()?.toLowerCase())} className="text-light-foreground" />
+                    <Icon icon={DocumentViewerIcon(f.file.name.split(".").pop()?.toLowerCase())} className="text-light-foreground" />
                     <span className="line-clamp-1">{f.file.name}</span>
                   </span>
                 )
@@ -161,7 +161,7 @@ export function InputDocumentComponent({
           )}
 
           {leftIcon && (
-            <FontAwesomeIcon
+            <Icon
               className={cn(
                 "input-icon",
                 "input-icon-left",
@@ -176,7 +176,7 @@ export function InputDocumentComponent({
           )}
 
           {rightIcon && (
-            <FontAwesomeIcon
+            <Icon
               className={cn(
                 "input-icon",
                 "input-icon-right",
@@ -306,7 +306,7 @@ export const InputDocumentPicker: React.FC<InputDocumentPickerProps> = ({ value,
           />
         ) : (
           <div className="input-document-empty-box" onClick={() => fileInputRef.current?.click()}>
-            <FontAwesomeIcon icon={faPlus} className="text-3xl" />
+            <Icon icon="solid/plus" className="text-3xl" />
             <p className="text-lg">Tambah Dokumen</p>
           </div>
         )}
@@ -338,7 +338,7 @@ export const InputDocumentPicker: React.FC<InputDocumentPickerProps> = ({ value,
                 />
 
                 <ButtonComponent
-                  icon={faTimes}
+                  icon="solid/times"
                   onClick={() => removeFile(f.id)}
                   variant="light"
                   paint="danger"
@@ -350,7 +350,7 @@ export const InputDocumentPicker: React.FC<InputDocumentPickerProps> = ({ value,
           })}
 
           <div className="input-document-upload-box" onClick={() => fileInputRef.current?.click()}>
-            <FontAwesomeIcon icon={faPlus} />
+            <Icon icon="solid/plus" />
             <p className="text-[10px] text-center">Tambah Dokumen</p>
           </div>
         </div>

package/src/input/InputImage.component.tsx

@@ -1,8 +1,7 @@
 "use client"
 
 import { useEffect, useRef, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faHandHolding, faImages, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { Icon } from "@skalfa/skalfa-icon";
 import { cn, pcn, useInputHandler, useInputRandomId, useResponsive, useValidation, validation, ValidationRules } from "@utils";
 import { BottomSheetComponent } from "../modal/BottomSheet.component";
 import { ButtonComponent } from "../button/Button.component";
@@ -57,7 +56,7 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
   const [cropSrc, setCropSrc]    =  useState<string | null>(null);
   const [openCrop, setOpenCrop]  =  useState(false);
 
-  const inputHandler                         =  useInputHandler(name, value, validations, register, unregister, true);
+  const inputHandler                         =  useInputHandler(name, value, validations, register, true);
   const [invalidMessage, setInvalidMessage]  =  useValidation(inputHandler.value, validations, invalid, inputHandler.idle);
 
   useEffect(() => {
@@ -172,7 +171,7 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
           onDrop={onDropFile}
         >
           <div className="input-image-dropzone-content">
-            <FontAwesomeIcon icon={drag ? faHandHolding : faImages} className="text-3xl" />
+            <Icon icon={drag ? "solid/hand-holding" : "solid/images"} className="text-3xl" />
             <p className="input-image-dropzone-text">{drag ? "Letakkan di sini" : preview  ? "Klik atau seret untuk ganti Gambar" : "Klik atau seret gambar"}</p>
           </div>
 
@@ -190,7 +189,7 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
 
       {preview && !disabled && (
         <ButtonComponent
-          icon={faTimes}
+          icon="solid/times"
           paint="danger"
           size="sm"
           className="absolute top-10 right-4"

package/src/input/InputNumber.component.tsx

@@ -1,8 +1,7 @@
 "use client"
 
 import React, { InputHTMLAttributes, ReactNode } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSortDown, faSortUp } from "@fortawesome/free-solid-svg-icons";
+import { Icon } from "@skalfa/skalfa-icon";
 import { cn, pcn, useInputHandler, useInputRandomId, useValidation, validation, ValidationRules } from "@utils";
 
 
@@ -54,7 +53,7 @@ export function InputNumberComponent({
   // =========================>
   // ## Initial
   // =========================>
-  const inputHandler  =  useInputHandler(props.name, value, validations, register, unregister, false)
+  const inputHandler  =  useInputHandler(props.name, value, validations, register, false)
   const randomId      =  useInputRandomId()
 
 
@@ -144,7 +143,7 @@ export function InputNumberComponent({
           />
 
           {leftIcon && (
-            <FontAwesomeIcon
+            <Icon
               className={cn(
                 "input-icon",
                 "input-icon-left",
@@ -171,14 +170,14 @@ export function InputNumberComponent({
             )}
           >
             <div className="input-number-sort-container">
-              <FontAwesomeIcon
+              <Icon
                 className="input-number-sort-up"
-                icon={faSortUp}
+                icon="solid/chevron-up"
                 onClick={() => inputHandler.setValue(String(Number(inputHandler.value) + 1))}
               />
-              <FontAwesomeIcon
+              <Icon
                 className="input-number-sort-down"
-                icon={faSortDown}
+                icon="solid/chevron-down"
                 onClick={() => inputHandler.setValue(String(Number(inputHandler.value) - 1))}
               />
             </div>

package/src/input/InputPassword.component.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { InputHTMLAttributes, ReactNode, useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Icon } from "@skalfa/skalfa-icon";
 import { cn, pcn, useInputHandler, useInputRandomId, useValidation, validation, ValidationRules } from "@utils";
 
 
@@ -53,7 +53,7 @@ export function InputPasswordComponent({
   // =========================>
   // ## Initial
   // =========================>
-  const inputHandler     =  useInputHandler(props.name, value, validations, register, unregister, false)
+  const inputHandler     =  useInputHandler(props.name, value, validations, register, false)
   const randomId         =  useInputRandomId()
   const randomConfirmId  =  useInputRandomId()
 
@@ -145,7 +145,7 @@ export function InputPasswordComponent({
         />
 
         {leftIcon && (
-          <FontAwesomeIcon
+          <Icon
             className={cn(
               "input-icon",
               "input-icon-left",
@@ -155,7 +155,7 @@ export function InputPasswordComponent({
           />
         )}
         {rightIcon && (
-          <FontAwesomeIcon
+          <Icon
             className={cn(
               "input-icon",
               "input-icon-right",

package/src/input/InputRadio.component.tsx

@@ -68,7 +68,7 @@ export function InputRadioComponent({
   // =========================>
   // ## Initial
   // =========================>
-  const inputHandler  =  useInputHandler(name, value, validations, register, unregister, false)
+  const inputHandler  =  useInputHandler(name, value, validations, register, false)
 
 
   // =========================>

package/src/input/InputTime.component.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { FC, InputHTMLAttributes, ReactNode, useEffect, useMemo, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Icon } from "@skalfa/skalfa-icon";
 import { cn, pcn, useInputHandler, useInputRandomId, useResponsive, useValidation, validation, ValidationRules } from "@utils";
 import { BottomSheetComponent } from "../modal/BottomSheet.component";
 import { ButtonComponent } from "../button/Button.component";
@@ -53,7 +53,7 @@ export function InputTimeComponent({
   // =========================>
   // ## Initial
   // =========================>
-  const inputHandler  =  useInputHandler(props.name, value, validations, register, unregister, false)
+  const inputHandler  =  useInputHandler(props.name, value, validations, register, false)
   const randomId      =  useInputRandomId()
   
   
@@ -117,7 +117,7 @@ export function InputTimeComponent({
             />
 
             {leftIcon && (
-              <FontAwesomeIcon
+              <Icon
                 className={cn(
                   "input-icon",
                   "input-icon-left",
@@ -130,7 +130,7 @@ export function InputTimeComponent({
             )}
 
             {rightIcon && (
-              <FontAwesomeIcon
+              <Icon
                 className={cn(
                   "input-icon",
                   "input-icon-right",

package/src/input/InputValues.component.tsx

@@ -1,6 +1,5 @@
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
 import { CSSProperties } from 'react';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { cn } from '@utils';
 
 export function InputValues({
@@ -30,8 +29,8 @@ export function InputValues({
               return (
                 <div key={key} className="input-values-item">
                   <span className="">{item}</span>
-                  <FontAwesomeIcon
-                    icon={faTimes}
+                  <Icon
+                    icon="solid/times"
                     className="input-values-delete"
                     onClick={() =>  onDelete?.(item, key)}
                   />
@@ -55,8 +54,8 @@ export function InputValues({
               return (
                 <div key={key} className="input-values-item">
                   <span>{item}</span>
-                  <FontAwesomeIcon
-                    icon={faTimes}
+                  <Icon
+                    icon="solid/times"
                     className="input-values-delete"
                     onClick={() =>  onDelete?.(item, key)}
                   />

package/src/input/Select.component.tsx

@@ -1,8 +1,8 @@
 "use client"
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+
 
 import { ReactNode, useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCheck, faChevronDown, faTimes,} from "@fortawesome/free-solid-svg-icons";
 import { api, ApiType, cavity, cn, pcn, registry, useInputHandler, useInputRandomId, useLazySearch, useValidation, validation, ValidationRules,} from "@utils";
 
 
@@ -105,7 +105,7 @@ export function SelectComponent({
   // =========================>
   // ## Initial
   // =========================>
-  const inputHandler  =  useInputHandler(name, value, validations, register, unregister, false)
+  const inputHandler  =  useInputHandler(name, value, validations, register, false)
   const randomId      =  useInputRandomId()
 
 
@@ -403,8 +403,8 @@ export function SelectComponent({
                   return (
                     <div key={key} className="input-values-item">
                       <span>{dataOptions?.find((option) => option.value == item)?.label}</span>
-                      <FontAwesomeIcon
-                        icon={faTimes}
+                      <Icon
+                        icon="solid/times"
                         className="input-values-delete"
                         onClick={() => {
                           const values = Array().concat(inputHandler.value);
@@ -428,7 +428,7 @@ export function SelectComponent({
 
 
           {leftIcon && (
-            <FontAwesomeIcon
+            <Icon
               className={cn(
                 "input-icon",
                 "input-icon-left",
@@ -457,7 +457,7 @@ export function SelectComponent({
                 onChange?.("");
               }}
             >
-              <FontAwesomeIcon icon={faTimes} />
+              <Icon icon="solid/times" />
             </div>
           )}
 
@@ -472,7 +472,7 @@ export function SelectComponent({
               disabled && pcn<CT>(className, "icon", "disabled")
             )}
           >
-            <FontAwesomeIcon icon={faChevronDown} />
+            <Icon icon="solid/chevron-down" />
           </label>
         </div>
 
@@ -535,8 +535,8 @@ export function SelectComponent({
                       }}
                     >
                       {selected && (
-                        <FontAwesomeIcon
-                          icon={faCheck}
+                        <Icon
+                          icon="solid/check"
                           className="select-suggest-check"
                         />
                       )}

package/src/modal/FloatingPage.component.tsx

@@ -1,9 +1,9 @@
 "use client"
 
 import { ReactNode, useEffect } from "react";
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { ButtonComponent } from "../button/Button.component";
-import { cn, pcn, shortcut } from "@utils";
+import { cn, pcn, shortcut, useResponsive } from "@utils";
+import { BottomSheetComponent } from "./BottomSheet.component";
 
 
 
@@ -16,9 +16,12 @@ export interface FloatingPageProps {
   children  ?:  any;
   tip       ?:  string | ReactNode;
   footer    ?:  string | ReactNode;
+  size      ?:  string | number;
+  maxSize   ?:  string | number;
 
   /** Use custom class with: "backdrop::", "header::", "footer::". */
   className  ?:  string;
+
 };
 
 
@@ -31,7 +34,10 @@ export function FloatingPageComponent({
   tip,
   footer,
   className = "",
+  size,
+  maxSize,
 }: FloatingPageProps) {
+  const { isSm } = useResponsive();
 
   useEffect(() => {
     if (show) {
@@ -50,6 +56,30 @@ export function FloatingPageComponent({
     }
   }, [show]);
 
+  if (isSm) {
+    return (
+      <BottomSheetComponent
+        show={show}
+        onClose={onClose}
+        size={size}
+        maxSize={maxSize}
+        footer={footer}
+        className={className}
+      >
+        <div className={cn("modal-header", pcn<CT>(className, "header"))}>
+          {title && (
+            <div>
+              <h6 className="modal-title">{title}</h6>
+              {tip && <p className="modal-tip">{tip}</p>}
+            </div>
+          )}
+        </div>
+
+        {show && children}
+      </BottomSheetComponent>
+    );
+  }
+
   return (
     <>
       <div
@@ -77,7 +107,7 @@ export function FloatingPageComponent({
           )}
 
           <ButtonComponent
-            icon={faTimes}
+            icon="solid/times"
             variant="simple"
             paint="danger"
             onClick={() => onClose()}

package/src/modal/Modal.component.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import { ReactNode, useEffect } from "react";
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { cn, pcn, shortcut } from "@utils";
 import { ButtonComponent } from "../button/Button.component";
 
@@ -74,7 +73,7 @@ export function ModalComponent({
             </div>
 
             <ButtonComponent
-              icon={faTimes}
+              icon="solid/times"
               variant="simple"
               paint="danger"
               onClick={() => onClose()}