funuicss 2.0.25 → 2.5.1

package/ui/alert/Alert.tsx

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
-import * as React from 'react'
-import { TfiCheck, TfiInfoAlt } from "react-icons/tfi";
+'use client'
 import { PiInfo , PiCheckCircleDuotone , PiWarning , PiX , PiSpinner } from "react-icons/pi";
+import React, { ReactNode, useEffect, useState } from 'react';
+
 interface AlertProps {
   message?: string;
   funcss?: string;
@@ -11,14 +11,17 @@ interface AlertProps {
   fullWidth?: boolean;
   isLoading?: boolean;
   children?: ReactNode;
-  animation?:string ;
-  duration?:string
-  raised?:boolean  ,
-  card?:boolean,
-  variant?:string, 
-  flat?:boolean, 
-  standard?:boolean,
-  style?:React.CSSProperties
+  animation?: string;
+  duration?: string;
+  raised?: boolean;
+  card?: boolean;
+  variant?: string;
+  flat?: boolean;
+  standard?: boolean;
+  style?: React.CSSProperties;
+  autoHide?: boolean;
+  autoHideDuration?: number;
+  onClose?: () => void;
 }
 
 export default function Alert({
@@ -30,92 +33,74 @@ export default function Alert({
   raised,
   fullWidth,
   isLoading,
-  children, 
+  children,
   animation,
-  duration ,
+  duration,
   variant,
   flat,
   standard,
   card,
   style,
+  autoHide = false,
+  autoHideDuration = 3000,
+  onClose,
   ...rest
 }: AlertProps) {
-  return (
-    <div className={
-      `
-      ${fixed ? 'alert-container ' : ''}
-       ${fixed === "top-left" ? "top-left" : ""}
-      ${fixed === "top-right" ? "top-right" : ""}
-      ${fixed === "bottom-left" ? "bottom-left" : ""}
-      ${fixed === "bottom-right" ? "bottom-right" : ""}
-      ${fixed === "middle" ? "middle-alert" : ""}
-      ${fixed === "top-middle" ? "top-middle" : ""}
-      ${fixed === "bottom-middle" ? "bottom-middle" : ""}`
-    }>
-      {outlined ? (
-        <div
-          style={{
-            animation: `${duration ? duration : "0.3"}s ${animation ? animation : "ScaleUp"}`,
-            ...style
-          }}
-          className={`alert  ${card ? "card" : ""} ${flat ? "flat" : ""} ${raised ? 'raised' : ''} ${type}-outline
+  const [visible, setVisible] = useState(true);
 
- ${fullWidth ? "width-100-p" : ""}
- `}
- {...rest}
-        >
-          <div className="alert-icon">
-            {!isLoading ? (
-              <div className={`text-${type}`}>
-                {type === "success" && <PiCheckCircleDuotone />}
-                {type === "info" && <PiInfo />}
-                {type === "warning" && <PiWarning />}
-                {type === "danger" && <PiX />}
-              </div>
-            ) : (
-             <span className='rotate'> <PiSpinner /> </span> 
-            )}
-          </div>
-          <div className="alert-text">
-            {message ? message : children ? children : ""}
-          </div>
-        </div>
-      ) : (
-        ""
-      )}
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
+    if (autoHide) {
+      timeout = setTimeout(() => {
+        setVisible(false);
+        onClose?.();
+      }, autoHideDuration);
+    }
+    return () => clearTimeout(timeout);
+  }, [autoHide, autoHideDuration, onClose]);
 
-      {!outlined ? (
-        <div
-          style={{
-            animation: `${duration ? duration : "0.3"}s ${animation ? animation : "ScaleUp"}`,
-            ...style
-          }}
-          className={`alert  ${card ? "card" : ""} ${flat ? "flat" : ""} ${raised ? 'raised' : ''} 
-           ${variant ? variant : standard ? "" : type}
-           ${standard ? "top-" + type : ""}
-            ${funcss || ""}
- ${fullWidth ? "width-100-p" : ""}
-`}
-        >
-          <div className="alert-icon">
-            {!isLoading ? (
-              <div className={`text-${type}`}>
-                  {type === "success" && <PiCheckCircleDuotone />}
-                {type === "info" && <PiInfo />}
-                {type === "warning" && <PiWarning />}
-                {type === "danger" && <PiX />}
-              </div>
-            ) : (
-             <span className='rotate'> <PiSpinner /> </span> 
-            )}
-          </div>
-          <div className="alert-text">
-            {message ? message : children ? children : ""}
-          </div>
+  if (!visible) return null;
+
+  return (
+    <div
+      className={`${
+        fixed ? 'alert-container ' : ''
+      } ${fixed === 'top-left' ? 'top-left' : ''}
+        ${fixed === 'top-right' ? 'top-right' : ''}
+        ${fixed === 'bottom-left' ? 'bottom-left' : ''}
+        ${fixed === 'bottom-right' ? 'bottom-right' : ''}
+        ${fixed === 'middle' ? 'middle-alert' : ''}
+        ${fixed === 'top-middle' ? 'top-middle' : ''}
+        ${fixed === 'bottom-middle' ? 'bottom-middle' : ''}`}
+    >
+      <div
+        style={{
+          animation: `${duration || '0.3'}s ${animation || 'ScaleUp'}`,
+          ...style,
+        }}
+        className={`alert ${card ? 'card' : ''} ${flat ? 'flat' : ''} ${raised ? 'raised' : ''} ${
+          outlined
+            ? `${type}-outline`
+            : `${variant || (standard ? `top-${type}` : type)}`
+        } ${funcss || ''} ${fullWidth ? 'width-100-p' : ''}`}
+        {...rest}
+      >
+        <div className="alert-icon">
+          {!isLoading ? (
+            <div className={`text-${type}`}>
+              {type === 'success' && <PiCheckCircleDuotone />}
+              {type === 'info' && <PiInfo />}
+              {type === 'warning' && <PiWarning />}
+              {type === 'danger' && <PiX />}
+            </div>
+          ) : (
+            <span className="rotate">
+              <PiSpinner />
+            </span>
+          )}
         </div>
-      ) : (
-        ""
-      )}
+        <div className="alert-text">{message || children}</div>
+      </div>
     </div>
   );
 }

package/ui/aos/AOS.d.ts

@@ -5,5 +5,5 @@ interface ListItemProps {
     animation?: string;
     anchorPlacement?: string;
 }
-export default function Animation({ children, funcss, animation, anchorPlacement, ...rest }: ListItemProps): any;
+export default function Animation({ children, funcss, animation, anchorPlacement, ...rest }: ListItemProps): React.JSX.Element;
 export {};

package/ui/appbar/AppBar.d.ts

@@ -15,5 +15,5 @@ interface NavbarProps {
     sideBar?: number;
     width?: string;
 }
-export default function AppBar({ fixedTop, funcss, padding, fixedBottom, justify, children, left, center, right, sideBar, width, visibleLinks, sidebarTrigger, transparent }: NavbarProps): any;
+export default function AppBar({ fixedTop, funcss, padding, fixedBottom, justify, children, left, center, right, sideBar, width, visibleLinks, sidebarTrigger, transparent }: NavbarProps): React.JSX.Element;
 export {};

package/ui/avatar/Avatar.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import * as React from 'react';
 interface AvatarProps {
     funcss?: string;
     children?: ReactNode;
@@ -6,5 +7,5 @@ interface AvatarProps {
     bg?: string;
     content?: ReactNode;
 }
-export default function Avatar({ funcss, children, size, bg, content, }: AvatarProps): any;
+export default function Avatar({ funcss, children, size, bg, content, }: AvatarProps): React.JSX.Element;
 export {};

package/ui/breadcrumb/BreadCrumb.d.ts

@@ -1,7 +1,8 @@
+import * as React from 'react';
 interface BreadCrumbProps {
     type?: 'slash' | 'greater' | 'less' | 'straight';
     funcss?: string;
     color?: string;
 }
-export default function BreadCrumb({ type, funcss, color }: BreadCrumbProps): any;
+export default function BreadCrumb({ type, funcss, color }: BreadCrumbProps): React.JSX.Element;
 export {};

package/ui/button/Button.d.ts

@@ -381,5 +381,5 @@ interface ButtonProps {
     style?: React.CSSProperties;
     onClick?: () => void;
 }
-export default function Button({ color, bg, funcss, startIcon, endIcon, text, rounded, raised, height, width, float, hoverUp, fullWidth, outlined, small, hoverless, smaller, big, bigger, jumbo, flat, hoverNone, fillAnimation, fillDirection, fillTextColor, outlineSize, isLoading, status, children, bold, style, onClick, ...rest }: ButtonProps): any;
+export default function Button({ color, bg, funcss, startIcon, endIcon, text, rounded, raised, height, width, float, hoverUp, fullWidth, outlined, small, hoverless, smaller, big, bigger, jumbo, flat, hoverNone, fillAnimation, fillDirection, fillTextColor, outlineSize, isLoading, status, children, bold, style, onClick, ...rest }: ButtonProps): React.JSX.Element;
 export {};

package/ui/card/Card.d.ts

@@ -28,5 +28,5 @@ interface CardProps {
     xl?: boolean;
     style?: React.CSSProperties;
 }
-export default function Card({ color, bg, width, height, minHeight, minWidth, margin, padding, funcss, children, roundEdge, maxHeight, maxWidth, horizontal, id, header, body, footer, noGap, fab, image, shadowless, flat, responsiveMedium, xl, responsiveSmall, style, ...rest }: CardProps): any;
+export default function Card({ color, bg, width, height, minHeight, minWidth, margin, padding, funcss, children, roundEdge, maxHeight, maxWidth, horizontal, id, header, body, footer, noGap, fab, image, shadowless, flat, responsiveMedium, xl, responsiveSmall, style, ...rest }: CardProps): React.JSX.Element;
 export {};

package/ui/card/CardBody.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode, HTMLProps } from 'react';
+import React, { ReactNode, HTMLProps } from 'react';
 interface CardBodyProps extends HTMLProps<HTMLDivElement> {
     funcss?: string;
     children?: ReactNode;
 }
-export default function CardBody({ funcss, children, ...rest }: CardBodyProps): any;
+export default function CardBody({ funcss, children, ...rest }: CardBodyProps): React.JSX.Element;
 export {};

package/ui/card/CardFab.d.ts

@@ -1,8 +1,8 @@
-import { ReactNode, HTMLProps } from 'react';
+import React, { ReactNode, HTMLProps } from 'react';
 interface CardFabProps extends HTMLProps<HTMLDivElement> {
     funcss?: string;
     position?: string;
     children?: ReactNode;
 }
-export default function CardFab({ funcss, position, children, ...rest }: CardFabProps): any;
+export default function CardFab({ funcss, position, children, ...rest }: CardFabProps): React.JSX.Element;
 export {};

package/ui/card/CardFooter.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode, HTMLProps } from 'react';
+import React, { ReactNode, HTMLProps } from 'react';
 interface CardFooterProps extends HTMLProps<HTMLDivElement> {
     funcss?: string;
     children?: ReactNode;
 }
-export default function CardFooter({ funcss, children, ...rest }: CardFooterProps): any;
+export default function CardFooter({ funcss, children, ...rest }: CardFooterProps): React.JSX.Element;
 export {};

package/ui/card/CardHeader.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode, HTMLProps } from 'react';
+import React, { ReactNode, HTMLProps } from 'react';
 interface CardHeaderProps extends HTMLProps<HTMLDivElement> {
     funcss?: string;
     children?: ReactNode;
 }
-export default function CardHeader({ funcss, children, ...rest }: CardHeaderProps): any;
+export default function CardHeader({ funcss, children, ...rest }: CardHeaderProps): React.JSX.Element;
 export {};

package/ui/div/Div.d.ts

@@ -15,5 +15,5 @@ type DivProps = {
     customStyle?: React.CSSProperties;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
 };
-declare const Div: ({ children, funcss, content, minHeight, maxHeight, maxWidth, minWidth, height, width, padding, margin, fit, customStyle, ...rest }: DivProps) => any;
+declare const Div: ({ children, funcss, content, minHeight, maxHeight, maxWidth, minWidth, height, width, padding, margin, fit, customStyle, ...rest }: DivProps) => React.JSX.Element;
 export default Div;

package/ui/drop/Action.d.ts

@@ -3,5 +3,5 @@ type DropActionProps = {
     children: React.ReactNode;
     funcss?: string;
 };
-declare const DropAction: ({ children, funcss }: DropActionProps) => any;
+declare const DropAction: ({ children, funcss }: DropActionProps) => React.JSX.Element;
 export default DropAction;

package/ui/drop/Down.d.ts

@@ -5,5 +5,5 @@ type DropDownProps = {
     id?: string;
     side?: string;
 };
-declare const DropDown: ({ funcss, children, id, side, }: DropDownProps) => any;
+declare const DropDown: ({ funcss, children, id, side, }: DropDownProps) => React.JSX.Element;
 export default DropDown;

package/ui/drop/Item.d.ts

@@ -4,5 +4,5 @@ type DropItemProps = {
     funcss?: string;
     onClick?: () => void;
 };
-export default function DropItem({ children, funcss, onClick }: DropItemProps): any;
+export default function DropItem({ children, funcss, onClick }: DropItemProps): React.JSX.Element;
 export {};

package/ui/drop/Menu.d.ts

@@ -8,5 +8,5 @@ type DropMenuProps = {
     id?: string;
     width?: string;
 };
-export default function DropMenu({ children, funcss, hoverable, duration, animation, id, width, }: DropMenuProps): any;
+export default function DropMenu({ children, funcss, hoverable, duration, animation, id, width, }: DropMenuProps): React.JSX.Element;
 export {};

package/ui/drop/Up.d.ts

@@ -5,5 +5,5 @@ type DropUpProps = {
     id?: string;
     side?: string;
 };
-declare const DropUp: ({ funcss, children, id, side, }: DropUpProps) => any;
+declare const DropUp: ({ funcss, children, id, side, }: DropUpProps) => React.JSX.Element;
 export default DropUp;

package/ui/grid/Col.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode, HTMLProps } from 'react';
+import * as React from 'react';
 interface ColProps extends HTMLProps<HTMLDivElement> {
     sm?: number;
     md?: number;
@@ -10,5 +11,5 @@ interface ColProps extends HTMLProps<HTMLDivElement> {
     mdOrder?: number;
     lgOrder?: number;
 }
-export default function Col({ sm, md, lg, children, funcss, id, smOrder, mdOrder, lgOrder, ...rest }: ColProps): any;
+export default function Col({ sm, md, lg, children, funcss, id, smOrder, mdOrder, lgOrder, ...rest }: ColProps): React.JSX.Element;
 export {};

package/ui/grid/Grid.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode, CSSProperties, HTMLProps } from 'react';
+import * as React from 'react';
 interface GridProps extends HTMLProps<HTMLDivElement> {
     children?: ReactNode;
     funcss?: string;
@@ -8,5 +9,5 @@ interface GridProps extends HTMLProps<HTMLDivElement> {
     id?: string;
     direction?: CSSProperties['flexDirection'];
 }
-export default function Grid({ children, funcss, justify, align, id, direction, ...rest }: GridProps): any;
+export default function Grid({ children, funcss, justify, align, id, direction, ...rest }: GridProps): React.JSX.Element;
 export {};

package/ui/input/Iconic.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 interface IconicInputProps {
     funcss?: string;
     children?: ReactNode;
@@ -7,5 +7,5 @@ interface IconicInputProps {
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
 }
-export default function IconicInput({ funcss, children, leftIcon, rightIcon, input, iconicBg, }: IconicInputProps): any;
+export default function IconicInput({ funcss, children, leftIcon, rightIcon, input, iconicBg, }: IconicInputProps): React.JSX.Element;
 export {};

package/ui/input/Input.d.ts

@@ -7,6 +7,7 @@ interface InputProps {
     file?: boolean;
     noBorder?: boolean;
     icon?: React.ReactNode;
+    extra?: React.ReactNode;
     button?: React.ReactNode;
     id?: string;
     status?: 'success' | 'warning' | 'danger' | '';
@@ -16,6 +17,7 @@ interface InputProps {
     rightRounded?: boolean;
     rounded?: boolean;
     fullWidth?: boolean;
+    btn?: boolean;
     type?: string;
     label?: string;
     name?: string;

package/ui/input/Input.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -10,6 +11,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -25,11 +49,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var pi_1 = require("react-icons/pi");
 var Button_1 = __importDefault(require("../button/Button"));
 var Input = function (_a) {
-    var select = _a.select, bordered = _a.bordered, borderless = _a.borderless, multiline = _a.multiline, file = _a.file, noBorder = _a.noBorder, icon = _a.icon, button = _a.button, id = _a.id, status = _a.status, funcss = _a.funcss, flat = _a.flat, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, rounded = _a.rounded, fullWidth = _a.fullWidth, type = _a.type, label = _a.label, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, options = _a.options, rows = _a.rows, bg = _a.bg, rest = __rest(_a, ["select", "bordered", "borderless", "multiline", "file", "noBorder", "icon", "button", "id", "status", "funcss", "flat", "leftRounded", "rightRounded", "rounded", "fullWidth", "type", "label", "name", "value", "defaultValue", "onChange", "options", "rows", "bg"]);
+    var select = _a.select, bordered = _a.bordered, borderless = _a.borderless, multiline = _a.multiline, file = _a.file, extra = _a.extra, noBorder = _a.noBorder, icon = _a.icon, btn = _a.btn, button = _a.button, id = _a.id, status = _a.status, funcss = _a.funcss, flat = _a.flat, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, rounded = _a.rounded, fullWidth = _a.fullWidth, type = _a.type, label = _a.label, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, options = _a.options, rows = _a.rows, bg = _a.bg, rest = __rest(_a, ["select", "bordered", "borderless", "multiline", "file", "extra", "noBorder", "icon", "btn", "button", "id", "status", "funcss", "flat", "leftRounded", "rightRounded", "rounded", "fullWidth", "type", "label", "name", "value", "defaultValue", "onChange", "options", "rows", "bg"]);
+    var _b = (0, react_1.useState)(''), fileName = _b[0], setFileName = _b[1];
+    var handleChange = function (e) {
+        var _a;
+        var file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (file) {
+            setFileName(file.name);
+        }
+        if (onChange)
+            onChange(e);
+    };
     if (select) {
         if (bordered) {
             return (react_1.default.createElement("select", __assign({}, rest, { id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n            borderedInput\n          "), onChange: onChange, defaultValue: defaultValue, name: name, style: {
@@ -39,14 +73,14 @@ var Input = function (_a) {
                 : ''));
         }
         else if (borderless) {
-            return (react_1.default.createElement("select", __assign({}, rest, { id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n            borderless\n          "), onChange: onChange, defaultValue: defaultValue, placeholder: label, name: name, value: value, style: {
+            return (react_1.default.createElement("select", __assign({}, rest, { id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n            borderless\n          "), onChange: onChange, defaultValue: defaultValue, name: name, value: value, style: {
                     width: "".concat(fullWidth ? '100%' : '')
                 } }), options
                 ? options.map(function (doc) { return (react_1.default.createElement("option", { value: doc.value, key: doc.value }, doc.text)); })
                 : ''));
         }
         else {
-            return (react_1.default.createElement("select", __assign({}, rest, { id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n          "), onChange: onChange, defaultValue: defaultValue, placeholder: label, name: name, value: value, style: {
+            return (react_1.default.createElement("select", __assign({}, rest, { id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n          "), onChange: onChange, defaultValue: defaultValue, name: name, value: value, style: {
                     width: "".concat(fullWidth ? '100%' : '')
                 } }), options
                 ? options.map(function (doc) { return (react_1.default.createElement("option", { value: doc.value, key: doc.value }, doc.text)); })
@@ -71,11 +105,18 @@ var Input = function (_a) {
         }
     }
     else if (file) {
-        return (react_1.default.createElement("div", { className: "fileInput" },
-            button ? (button) : (react_1.default.createElement(Button_1.default, { funcss: " ".concat(funcss, " "), startIcon: icon ? icon : react_1.default.createElement(pi_1.PiCloudArrowUp, null), bg: "primary", fullWidth: true, raised: true }, label ? label : 'Upload File')),
-            react_1.default.createElement("input", __assign({ name: name, id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n            borderedInput\n            filedInput\n          "), onChange: onChange, type: 'file', style: {
-                    width: "".concat(fullWidth ? '100%' : '')
-                }, value: value }, rest))));
+        if (btn)
+            return (react_1.default.createElement("div", { className: "fileInput" },
+                button ? (button) : (react_1.default.createElement(Button_1.default, { funcss: " ".concat(funcss, " "), startIcon: icon ? icon : react_1.default.createElement(pi_1.PiCloudArrowUp, null), bg: "primary", fullWidth: true, raised: true }, fileName || label || 'Upload File')),
+                react_1.default.createElement("input", __assign({ name: name, id: id, className: "\n            ".concat(status === 'success' ? 'success-input' : '', "\n            ").concat(status === 'warning' ? 'warning-input' : '', "\n            ").concat(status === 'danger' ? 'danger-input' : '', "\n            input \n            ").concat(rounded ? "rounded" : '', "\n            ").concat(bg ? bg : '', "\n            ").concat(funcss, " ").concat(flat ? 'flat' : '', "\n            ").concat(leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '', "\n            borderedInput\n            filedInput\n          "), onChange: handleChange, type: 'file', style: {
+                        width: "".concat(fullWidth ? '100%' : '')
+                    }, value: value }, rest))));
+        return (react_1.default.createElement("div", { className: "_upload_container" },
+            react_1.default.createElement("label", { htmlFor: id || "fileInput", className: "_upload_label" },
+                react_1.default.createElement("div", { className: "_upload_icon" }, icon || react_1.default.createElement(react_1.default.Fragment, null, "\u21EA")),
+                react_1.default.createElement("div", { className: "_upload_text" }, fileName || label || "Upload File"),
+                react_1.default.createElement("div", { className: "text-small opacity-3" }, extra || '')),
+            react_1.default.createElement("input", __assign({ onChange: handleChange, type: "file", id: id || "fileInput", className: "_upload_input" }, rest))));
     }
     else {
         if (bordered) {

package/ui/input/Input.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+'use client'
+import React, { useState } from 'react';
 import { PiCheck, PiCloudArrowUp } from 'react-icons/pi';
 import Button from '../button/Button';
 
@@ -10,6 +11,7 @@ interface InputProps {
   file?: boolean;
   noBorder?: boolean;
   icon?: React.ReactNode;
+  extra?: React.ReactNode;
   button?: React.ReactNode;
   id?: string;
   status?: 'success' | 'warning' | 'danger' | '';
@@ -19,6 +21,7 @@ interface InputProps {
   rightRounded?: boolean;
   rounded?: boolean;
   fullWidth?: boolean;
+  btn?: boolean;
   type?: string;
   label?: string;
   name?: string;
@@ -32,14 +35,17 @@ interface InputProps {
   bg?: string;
 }
 
+
 const Input: React.FC<InputProps> = ({
   select,
   bordered,
   borderless,
   multiline,
   file,
+  extra,
   noBorder,
   icon,
+  btn,
   button,
   id,
   status,
@@ -60,6 +66,17 @@ const Input: React.FC<InputProps> = ({
   bg,
   ...rest
 }) => {
+    const [fileName, setFileName] = useState('');
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setFileName(file.name);
+    }
+    if (onChange) onChange(e);
+  };
+
+
   if (select) {
     if (bordered) {
       return (
@@ -112,7 +129,6 @@ const Input: React.FC<InputProps> = ({
           `}
           onChange={onChange}
           defaultValue={defaultValue}
-          placeholder={label}
           name={name}
           value={value}
           style={{
@@ -145,7 +161,6 @@ const Input: React.FC<InputProps> = ({
           `}
           onChange={onChange}
           defaultValue={defaultValue}
-          placeholder={label}
           name={name}
           value={value}
           style={{
@@ -245,7 +260,8 @@ const Input: React.FC<InputProps> = ({
       );
     }
   } else if (file) {
-    return (
+    if(btn)
+      return (
       <div className="fileInput">
         {button ? (
           button
@@ -257,7 +273,7 @@ const Input: React.FC<InputProps> = ({
             fullWidth
             raised
           >
-            {label ? label : 'Upload File'}
+            {fileName || label || 'Upload File'}
           </Button>
         )}
         <input
@@ -275,16 +291,27 @@ const Input: React.FC<InputProps> = ({
             borderedInput
             filedInput
           `}
-          onChange={onChange}
+          onChange={handleChange}
           type={'file'}
           style={{
             width: `${fullWidth ? '100%' : ''}`
           }}
+          
           value={value}
         {...rest}
         />
       </div>
-    );
+    )
+    return (
+          <div className="_upload_container">
+          <label htmlFor={id || "fileInput"} className="_upload_label">
+            <div className="_upload_icon">{ icon || <>&#8682;</>}</div> 
+            <div className="_upload_text">{fileName || label || `Upload File`}</div>
+            <div className="text-small opacity-3">{extra || ''}</div>
+          </label>
+          <input onChange={handleChange} type="file" id={id || "fileInput"} className="_upload_input" {...rest} />
+        </div>
+    )
   } else {
     if (bordered) {
       return (

package/ui/list/Item.d.ts

@@ -3,5 +3,5 @@ interface ListItemProps {
     children?: React.ReactNode;
     funcss?: string;
 }
-export default function ListItem({ children, funcss, ...rest }: ListItemProps): any;
+export default function ListItem({ children, funcss, ...rest }: ListItemProps): React.JSX.Element;
 export {};