next-helios-fe 1.8.9 → 1.8.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.8.9",
+  "version": "1.8.11",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/form/input/file.tsx

@@ -11,7 +11,7 @@ export interface FileProps extends React.InputHTMLAttributes<HTMLInputElement> {
     maxSizeInMb?: number;
     buttonOnly?: boolean;
     width?: "full" | "fit";
-    height?: "short" | "medium" | "high";
+    height?: "short" | "medium" | "high" | "full";
     hideInputDetail?: boolean;
   };
   defaultValue?: any[];
@@ -56,7 +56,11 @@ export const File: React.FC<FileProps> = ({
   }, [value, defaultValue]);
 
   return (
-    <label className={`grid gap-2 ${width}`}>
+    <label
+      className={`grid gap-2 ${width} ${
+        options?.height === "full" && "h-full"
+      }`}
+    >
       {!options?.buttonOnly &&
         (label ||
           (!options?.hideInputDetail &&
@@ -93,8 +97,8 @@ export const File: React.FC<FileProps> = ({
         )}
       <div
         className={`flex items-center gap-4 ${
-          !options?.buttonOnly && "flex-row-reverse"
-        }`}
+          options?.height === "full" && "h-full"
+        } ${!options?.buttonOnly && "flex-row-reverse"}`}
       >
         {options?.variant !== "drag&drop" ? (
           <div
@@ -127,10 +131,12 @@ export const File: React.FC<FileProps> = ({
             </span>
           </div>
         ) : (
-          <div className="relative flex-1 flex items-center">
+          <div className="relative flex-1 flex items-center h-full">
             <input
               type="file"
-              className={`w-full h-60 px-4 border-default border border-dashed rounded-md bg-secondary-bg text-transparent cursor-pointer file:hidden focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light`}
+              className={`w-full px-4 border-default border border-dashed rounded-md bg-secondary-bg text-transparent cursor-pointer file:hidden focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light ${
+                options?.height === "full" ? "min-h-60 h-full" : "h-60"
+              }`}
               onChange={(e) => {
                 if (rest.onChange) {
                   rest.onChange({
@@ -189,14 +195,16 @@ export const File: React.FC<FileProps> = ({
               {...rest}
             />
             <div className="absolute flex flex-col gap-8 justify-center items-center w-full h-full px-4 pointer-events-none">
-              <Icon
-                icon={
-                  tempFile.length !== 0 ? "mdi:file-outline" : "mynaui:upload"
-                }
-                className={`text-5xl ${
-                  tempFile.length !== 0 ? "" : "text-disabled"
-                }`}
-              />
+              <div>
+                <Icon
+                  icon={
+                    tempFile.length !== 0 ? "mdi:file-outline" : "mynaui:upload"
+                  }
+                  className={`text-5xl ${
+                    tempFile.length !== 0 ? "" : "text-disabled"
+                  }`}
+                />
+              </div>
               <div className="flex flex-col gap-2 items-center">
                 {tempFile.length !== 0 ? (
                   <span>{tempFile[0]?.name}</span>

package/src/styles/calendar.scss

@@ -114,14 +114,14 @@
   }
   
   .react-calendar__tile:disabled {
-    background-color: #f0f0f0;
-    color: #ababab;
+    background-color: var(--color-secondary-light);
+    color: var(--color-disabled);
   }
   
   .react-calendar__month-view__days__day--neighboringMonth:disabled,
   .react-calendar__decade-view__years__year--neighboringDecade:disabled,
   .react-calendar__century-view__decades__decade--neighboringCentury:disabled {
-    color: #cdcdcd;
+    color: var(--color-silent);
   }
   
   .react-calendar__tile:enabled:hover,