next-helios-fe 1.8.46 → 1.8.48

package/package.json

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

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

@@ -109,7 +109,7 @@ export const File: React.FC<FileProps> = ({
             <input
               ref={inputRef}
               type="file"
-              className={`peer/file w-full px-4 border-default border rounded-md bg-secondary-bg text-transparent file:hidden focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
+              className={`peer/file w-full px-4 border-default border rounded-md bg-secondary-bg text-transparent file:hidden focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light ${height}`}
               onChange={(e) => {
                 if (rest.onChange) {
                   rest.onChange({
@@ -125,7 +125,7 @@ export const File: React.FC<FileProps> = ({
               className={`absolute px-4 pointer-events-none ${
                 tempFile.length === 0 &&
                 "text-silent duration-300 translate-x-0 peer-focus/file:translate-x-1"
-              }`}
+              } ${rest.disabled && "text-disabled"}`}
             >
               {tempFile[0]?.name ?? rest.placeholder}
             </span>
@@ -134,7 +134,7 @@ export const File: React.FC<FileProps> = ({
           <div className="relative flex-1 flex items-center h-full">
             <input
               type="file"
-              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 ${
+              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 disabled:cursor-default ${
                 options?.height === "full" ? "min-h-60 h-full" : "h-60"
               }`}
               onChange={(e) => {
@@ -194,7 +194,11 @@ 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">
+            <div
+              className={`absolute flex flex-col gap-8 justify-center items-center w-full h-full px-4 pointer-events-none ${
+                rest.disabled && "text-disabled"
+              }`}
+            >
               <div>
                 <Icon
                   icon={
@@ -238,8 +242,8 @@ export const File: React.FC<FileProps> = ({
             type="button"
             className={
               options?.buttonVariant === "button"
-                ? "hover:text-primary"
-                : "p-2 rounded-full hover:bg-secondary-light"
+                ? `hover:text-primary disabled:text-disabled`
+                : `p-2 rounded-full hover:bg-secondary-light disabled:bg-secondary-light disabled:text-disabled`
             }
             tabIndex={-1}
             disabled={rest.disabled}