funuicss 2.7.16 → 3.0.0

package/ui/input/Iconic.tsx

@@ -1,43 +0,0 @@
-import React, { ReactNode } from 'react';
-
-interface IconicInputProps {
-  funcss?: string;
-  children?: ReactNode;
-  input?: ReactNode;
-  iconicBg?: string;
-  leftIcon?:ReactNode;
-  rightIcon?:ReactNode
-}
-
-export default function IconicInput({
-  funcss,
-  children,
-  leftIcon,
-  rightIcon,
-  input,
-  iconicBg,
-}: IconicInputProps) {
-  return (
-    <div className={`icon-container ${funcss}`}>
-      {leftIcon ? 
-        <div
-          className="leftIcon"
-          style={{
-            backgroundColor: iconicBg || '',
-            border: iconicBg ? `0.1rem ${iconicBg} solid` : '',
-          }}
-        >
-          {leftIcon ? leftIcon : ''}
-        </div>
-     : ''}
-     <div className={
-      `icon_input_wrapper  ${leftIcon ? 'lefticon' : ''} ${rightIcon ? 'righticon' : ''}`
-     }> {input}</div>
-      {rightIcon ? 
-        <div className="rightIcon" style={{ backgroundColor: iconicBg || '' }}>
-          {rightIcon ? rightIcon : ''}
-        </div>
-       : ''}
-    </div>
-  );
-}

package/ui/input/Input.tsx

@@ -1,409 +0,0 @@
-'use client'
-import React, { useState } from 'react';
-import { PiCheck, PiCloudArrowUp } from 'react-icons/pi';
-import Button from '../button/Button';
-
-interface InputProps {
-  select?: boolean;
-  bordered?: boolean;
-  borderless?: boolean;
-  multiline?: boolean;
-  file?: boolean;
-  noBorder?: boolean;
-  icon?: React.ReactNode;
-  extra?: React.ReactNode;
-  button?: React.ReactNode;
-  id?: string;
-  status?: 'success' | 'warning' | 'danger' | '';
-  funcss?: string;
-  flat?: boolean;
-  leftRounded?: boolean;
-  rightRounded?: boolean;
-  rounded?: boolean;
-  fullWidth?: boolean;
-  btn?: boolean;
-  type?: string;
-  label?: string;
-  name?: string;
-  value?: any;
-  defaultValue?: string;
-  onChange?: (
-    event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>
-  ) => void;
-  options?: { value: string; text: string }[];
-  rows?: number;
-  bg?: string;
-}
-
-
-const Input: React.FC<InputProps> = ({
-  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,
-  ...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 (
-        <select
-        {...rest}
-          id={id}
-          className={`
-            ${status === 'success' ? 'success-input' : ''}
-            ${status === 'warning' ? 'warning-input' : ''}
-            ${status === 'danger' ? 'danger-input' : ''}
-            input 
-            ${rounded ? "rounded" : ''}
-            ${bg ? bg : ''}
-            ${funcss} ${flat ? 'flat' : ''}
-            ${leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : ''}
-            borderedInput
-          `}
-          onChange={onChange}
-          defaultValue={defaultValue}
-          name={name}
-          style={{
-            width: `${fullWidth ? '100%' : ''}`
-          }}
-          value={value}
-        >
-          {options
-            ? options.map((doc) => (
-                <option value={doc.value} key={doc.value}>
-                  {doc.text}
-                </option>
-              ))
-            : ''}
-        </select>
-      );
-    } else if (borderless) {
-      return (
-        <select
-        {...rest}
-          id={id}
-          className={`
-            ${status === 'success' ? 'success-input' : ''}
-            ${status === 'warning' ? 'warning-input' : ''}
-            ${status === 'danger' ? 'danger-input' : ''}
-            input 
-            ${rounded ? "rounded" : ''}
-            ${bg ? bg : ''}
-            ${funcss} ${flat ? 'flat' : ''}
-            ${leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : ''}
-            borderless
-          `}
-          onChange={onChange}
-          defaultValue={defaultValue}
-          name={name}
-          value={value}
-          style={{
-            width: `${fullWidth ? '100%' : ''}`
-          }}
-        >
-          {options
-            ? options.map((doc) => (
-                <option value={doc.value} key={doc.value}>
-                  {doc.text}
-                </option>
-              ))
-            : ''}
-        </select>
-      );
-    } else {
-      return (
-        <select
-        {...rest}
-          id={id}
-          className={`
-            ${status === 'success' ? 'success-input' : ''}
-            ${status === 'warning' ? 'warning-input' : ''}
-            ${status === 'danger' ? 'danger-input' : ''}
-            input 
-            ${rounded ? "rounded" : ''}
-            ${bg ? bg : ''}
-            ${funcss} ${flat ? 'flat' : ''}
-            ${leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : ''}
-          `}
-          onChange={onChange}
-          defaultValue={defaultValue}
-          name={name}
-          value={value}
-          style={{
-            width: `${fullWidth ? '100%' : ''}`
-          }}
-        >
-          {options
-            ? options.map((doc) => (
-                <option value={doc.value} key={doc.value}>
-                  {doc.text}
-                </option>
-              ))
-            : ''}
-        </select>
-      );
-    }
-  } else if (multiline) {
-    if (bordered) {
-      return (
-        <textarea
-        {...rest}
-          id={id}
-          className={`
-            ${status === 'success' ? 'success-input' : ''}
-            ${status === 'warning' ? 'warning-input' : ''}
-            ${status === 'danger' ? 'danger-input' : ''}
-            input 
-            ${rounded ? "rounded" : ''}
-            ${bg ? bg : ''}
-            ${funcss} ${flat ? 'flat' : ''}
-            ${leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : ''}
-            borderedInput
-          `}
-          onChange={onChange}
-          defaultValue={defaultValue}
-          placeholder={label}
-          name={name}
-          style={{
-            width: `${fullWidth ? '100%' : ''}`
-          }}
-          value={value}
-          rows={rows ? rows : 2}
-        />
-      );
-    } else if (borderless) {
-      return (
-        <textarea
-        {...rest}
-          id={id}
-          className={`
-            ${status === 'success' ? 'success-input' : ''}
-            ${status === 'warning' ? 'warning-input' : ''}
-            ${status === 'danger' ? 'danger-input' : ''}
-            input 
-            ${rounded ? "rounded" : ''}
-            ${bg ? bg : ''}
-            ${funcss} ${flat ? 'flat' : ''}
-            ${leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : ''}
-            borderless
-          `}
-          onChange={onChange}
-          defaultValue={defaultValue}
-          placeholder={label}
-          name={name}
-          value={value}
-          style={{
-            width: `${fullWidth ? '100%' : ''}`
-          }}
-          rows={rows ? rows : 2}
-        />
-      );
-    } else {
-      return (
-        <textarea
-        {...rest}
-          id={id}
-          className={`
-            ${status === 'success' ? 'success-input' : ''}
-            ${status === 'warning' ? 'warning-input' : ''}
-            ${status === 'danger' ? 'danger-input' : ''}
-            input 
-            ${rounded ? "rounded" : ''}
-            ${bg ? bg : ''}
-            ${funcss} ${flat ? 'flat' : ''}
-            ${leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : ''}
-          `}
-          onChange={onChange}
-          defaultValue={defaultValue}
-          placeholder={label}
-          name={name}
-          value={value}
-          style={{
-            width: `${fullWidth ? '100%' : ''}`
-          }}
-          rows={rows ? rows : 2}
-        />
-      );
-    }
-  } else if (file) {
-    if(btn)
-      return (
-      <div className="fileInput">
-        {button ? (
-          button
-        ) : (
-     <Button
-  funcss={` ${funcss} `}
-  startIcon={icon ? icon : <PiCloudArrowUp />}
-  bg="primary"
-  fullWidth
-  raised
->
-    {fileName || label || 'Upload File'}
-</Button>
-
-        )}
-        <input
-            name={name}
-          id={id}
-          className={`
-            ${status === 'success' ? 'success-input' : ''}
-            ${status === 'warning' ? 'warning-input' : ''}
-            ${status === 'danger' ? 'danger-input' : ''}
-            input 
-            ${rounded ? "rounded" : ''}
-            ${bg ? bg : ''}
-            ${funcss} ${flat ? 'flat' : ''}
-            ${leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : ''}
-            borderedInput
-            filedInput
-          `}
-          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 || <><PiCloudArrowUp /></>}</div> 
-            <div className="_upload_text"    style={{
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            display: 'inline-block',
-            width: '100%',
-          }}>{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 (
-        <input
-  
-            name={name}
-          id={id}
-          className={`
-            ${status === 'success' ? 'success-input' : ''}
-            ${status === 'warning' ? 'warning-input' : ''}
-            ${status === 'danger' ? 'danger-input' : ''}
-            input 
-            ${rounded ? "rounded" : ''}
-            ${bg ? bg : ''}
-            ${funcss} ${flat ? 'flat' : ''}
-            ${leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : ''}
-            borderedInput
-          `}
-          onChange={onChange}
-          defaultValue={defaultValue}
-          type={type}
-          placeholder={label}
-          style={{
-            width: `${fullWidth ? '100%' : ''}`
-          }}
-          value={value}
-          {...rest}
-        />
-      );
-    } else if (borderless) {
-      return (
-        <input
-            name={name}
-          id={id}
-          className={`
-            ${status === 'success' ? 'success-input' : ''}
-            ${status === 'warning' ? 'warning-input' : ''}
-            ${status === 'danger' ? 'danger-input' : ''}
-            input 
-            ${rounded ? "rounded" : ''}
-            ${bg ? bg : ''}
-            ${funcss} ${flat ? 'flat' : ''}
-            ${leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : ''}
-            borderless
-          `}
-          onChange={onChange}
-          defaultValue={defaultValue}
-          type={type}
-          placeholder={label}
-          value={value}
-          style={{
-            width: `${fullWidth ? '100%' : ''}`
-          }}
-        {...rest}
-
-        />
-      );
-    } else {
-      return (
-        <input
-            name={name}
-          id={id}
-          className={`
-            ${status === 'success' ? 'success-input' : ''}
-            ${status === 'warning' ? 'warning-input' : ''}
-            ${status === 'danger' ? 'danger-input' : ''}
-            input 
-            ${rounded ? "rounded" : ''}
-            ${bg ? bg : ''}
-            ${funcss} ${flat ? 'flat' : ''}
-            ${leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : ''}
-          `}
-          onChange={onChange}
-          defaultValue={defaultValue}
-          type={type}
-          placeholder={label}
-          value={value}
-          style={{
-            width: `${fullWidth ? '100%' : ''}`
-          }}
-        {...rest}
-        />
-      );
-    }
-  }
-};
-
-export default Input;

package/ui/list/Item.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-interface ListItemProps {
-  children?: React.ReactNode;
-  funcss?: string;
-}
-
-export default function ListItem({
-  children,
-  funcss,
-  ...rest
-}: ListItemProps) {
-  return (
-    <li className={`list ${funcss ? funcss : ''}`} {...rest}>
-      {children}
-    </li>
-  );
-}

package/ui/list/List.tsx

@@ -1,45 +0,0 @@
-import * as React from 'react';
-
-interface ListProps {
-  children?: React.ReactNode;
-  funcss?: string;
-  dark?: boolean;
-  light?: boolean;
-  stripped?: boolean;
-  bordered?: boolean;
-  hoverable?: boolean;
-  roundItems?: boolean;
-  gap?:number
-}
-
-export default function List({
-  children,
-  funcss,
-  dark,
-  light,
-  stripped,
-  bordered,
-  hoverable,
-  roundItems,
-  gap,
-  ...rest
-}: ListProps) {
-  return (
-    <ul
-      className={`list
-        ${funcss ? funcss : ''}
-        ${dark ? 'dark' : ''}
-        ${light ? 'light' : ''}
-        ${hoverable ? 'hoverableList' : ''}
-        ${stripped ? 'stripped' : ''}
-        ${bordered ? 'bordered' : ''}
-        ${roundItems ? 'roundItems' : ''}
-      `}
-      style={{gap:gap ? gap + "rem" : ''}}
-      {...rest}
-    
-    >
-      {children}
-    </ul>
-  );
-}

package/ui/loader/Loader.tsx

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import {  PiSpinner , PiSpinnerDuotone , PiCircleNotch } from "react-icons/pi";
-
-interface FunLoaderProps {
-  funcss?: string;
-  size?: number;
-  fixed?: boolean;
-  backdrop?: boolean;
-  color?: string;
-  variant?: 'simple' | 'duotone'  | "circle"
-}
-
-export default function FunLoader({
-  funcss,
-  size,
-  fixed,
-  backdrop,
-  color,
-  variant ,
-  ...rest
-}: FunLoaderProps) {
-  return (
-    <div style={{lineHeight:"0"}} className={`${fixed ? 'fixedLoader' : ''} ${backdrop && fixed ? 'backdropLoader' : ''}`} {...rest}>
-      
-     {
-        variant === 'simple'?
-        <span className={`rotate ${funcss ? funcss : ''}  text-${color ? color : ''}`}>
-            <PiSpinnerDuotone  style={{fontSize:size + "px" , display:'block'}}  />
-          </span>
-        : variant === 'duotone'?
-        <span   className={`rotate ${funcss ? funcss : ''}  text-${color ? color : ''}`}>
-        <PiSpinnerDuotone   
-      
-        style={{fontSize:size + "px" , display:'block'}}
-        />     </span>
-        : variant === 'circle'?
-        <span  className={`rotate ${funcss ? funcss : ''}  text-${color ? color : ''}`}>
-        <PiCircleNotch />
-             </span>
-        : <span  className={`rotate ${funcss ? funcss : ''}  text-${color ? color : ''}`}>
-          <PiSpinner style={{fontSize:size + "px" , display:'block'}} />
-          </span>
-     }
-
-    </div>
-  );
-}

package/ui/modal/Action.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-interface ModalActionProps extends React.HTMLProps<HTMLDivElement> {
-  funcss?: string;
-  children?: React.ReactNode;
-}
-
-export default function ModalAction({ funcss, children, ...rest }: ModalActionProps) {
-  return (
-    <div className={`${funcss} modal-action`} {...rest}>
-      {children}
-    </div>
-  );
-}

package/ui/modal/Close.tsx

@@ -1,14 +0,0 @@
-import { HTMLProps } from 'react';
-import * as React from 'react';
-import { PiX } from 'react-icons/pi';
-interface CloseModalProps extends HTMLProps<HTMLDivElement> {
-  funcss?: string;
-}
-
-export default function CloseModal({ funcss, ...rest }: CloseModalProps) {
-  return (
-    <div className={`${funcss || ''} closeModal`} {...rest}>
-     <PiX />
-    </div>
-  );
-}

package/ui/modal/Content.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-interface ModalContentProps {
-  funcss?: string;
-  children?: React.ReactNode;
-
-
-}
-
-export default function ModalContent({ funcss, children , }: ModalContentProps) {
-  return (
-    <div className={`modal-body ${funcss}`}  >
-      {children}
-    </div>
-  );
-}

package/ui/modal/Header.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react';
-
-interface ModalHeaderProps {
-  funcss?: string;
-  children?: React.ReactNode;
-  close?: React.ReactNode | '';
-  title?:React.ReactNode
-}
-
-export default function ModalHeader({ funcss, children, close , title, ...rest }: ModalHeaderProps) {
-  return (
-    <div className={`${funcss} modal-title`} {...rest}>
-        <div className="fit">{title ? title : children}</div> 
-        {
-          close ? <div> {close || ''}</div> : <></>
-        }
-    </div>
-  );
-}