funuicss 2.7.16 → 3.0.0

package/types/react-easy-export.d.ts

@@ -1,4 +0,0 @@
-declare module 'react-easy-export' {
-  export function exportToCSV(data: any, filename?: string): void;
-  // add more exports here if needed, or use `any` as fallback
-}

package/ui/ScrollInView/ScrollInView.tsx

@@ -1,69 +0,0 @@
-'use client';
-
-import React, { ReactNode, useEffect } from 'react';
-import { motion, useAnimation } from 'framer-motion';
-import { useInView } from 'react-intersection-observer';
-
-const animationVariants = {
-  'fade-up': { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } },
-  'fade-down': { hidden: { opacity: 0, y: -20 }, visible: { opacity: 1, y: 0 } },
-  'fade-in': { hidden: { opacity: 0 }, visible: { opacity: 1 } },
-  'zoom-in': { hidden: { scale: 0.95, opacity: 0 }, visible: { scale: 1, opacity: 1 } },
-  'slide-left': { hidden: { x: 20, opacity: 0 }, visible: { x: 0, opacity: 1 } },
-  'slide-right': { hidden: { x: -20, opacity: 0 }, visible: { x: 0, opacity: 1 } },
-};
-
-interface ScrollInViewProps {
-  children: ReactNode;
-  animationType?: keyof typeof animationVariants;
-  delay?: number;
-  duration?: number;
-  threshold?: number;
-  once?: boolean;
-  className?: string;
-}
-
-const ScrollInView: React.FC<ScrollInViewProps> = ({
-  children,
-  animationType = 'fade-up',
-  delay = 0,
-  duration = 0.6,
-  threshold = 0.2,
-  once = true,
-  className = '',
-}) => {
-  const controls = useAnimation();
-  const [ref, inView] = useInView({
-    threshold,
-    triggerOnce: once,
-  });
-
-  useEffect(() => {
-    if (inView) {
-      controls.start('visible');
-    } else if (!once) {
-      controls.start('hidden');
-    }
-  }, [inView, once, controls]);
-
-  const variants = animationVariants[animationType] || animationVariants['fade-up'];
-
-  return (
-    <motion.div
-      ref={ref}
-      variants={variants}
-      initial="hidden"
-      animate={controls}
-      transition={{
-        delay,
-        duration,
-        ease: 'linear', // SMOOTH and STRAIGHT
-      }}
-      className={className}
-    >
-      {children}
-    </motion.div>
-  );
-};
-
-export default ScrollInView;

package/ui/accordion/Accordion.tsx

@@ -1,125 +0,0 @@
-'use client';
-import React, { useState } from 'react';
-import { PiCaretDown } from 'react-icons/pi';
-import RowFlex from '../specials/RowFlex';
-
-export type AccordionItemProps = {
-  title: string;
-  content: React.ReactNode;
-  isOpen?: boolean;
-  onToggle?: () => void;
-  index?: number;
-  icon?: React.ReactNode;
-
-  // Customization
-  itemClass?: string;
-  titleClass?: string;
-  iconClass?: string;
-  contentClass?: string;
-  activeClass?: string;
-};
-
-export const AccordionItem: React.FC<AccordionItemProps> = ({
-  icon,
-  title,
-  content,
-  isOpen,
-  onToggle,
-  itemClass = '',
-  titleClass = '',
-  iconClass = '',
-  contentClass = '',
-  activeClass = '',
-}) => {
-  return (
-    <div className={`accordion-item ${itemClass} ${isOpen ? activeClass : ''}`}>
-      <div
-        className={`accordion-header ${titleClass}`}
-        onClick={onToggle}
-        role="button"
-        aria-expanded={isOpen}
-      >
-        <RowFlex alignItems="center" gap={0.6}>
-          {icon && <div style={{ lineHeight: 0 }}>{icon}</div>}
-          <div className="col fit">{title}</div>
-        </RowFlex>
-        <div
-          style={{ lineHeight: 0 }}
-          className={`${iconClass} ${isOpen ? 'accordion-rotated' : ''}`}
-        >
-          <PiCaretDown />
-        </div>
-      </div>
-      <div className={`accordion-content ${contentClass} ${isOpen ? 'open' : ''}`}>
-        <div className="accordion-inner">{content}</div>
-      </div>
-    </div>
-  );
-};
-
-export type AccordionProps = {
-  items: {
-    title: string;
-    content: React.ReactNode;
-    icon?: React.ReactNode;
-  }[];
-  allowMultiple?: boolean;
-  defaultOpenIndexes?: number[];
-
-  // Custom styles
-  itemClass?: string;
-  titleClass?: string;
-  iconClass?: string;
-  contentClass?: string;
-  activeClass?: string;
-};
-
-const Accordion: React.FC<AccordionProps> = ({
-  items,
-  allowMultiple = false,
-  defaultOpenIndexes = [],
-  itemClass,
-  titleClass,
-  iconClass,
-  contentClass,
-  activeClass,
-}) => {
-  const [openIndexes, setOpenIndexes] = useState<number[]>(
-    allowMultiple ? defaultOpenIndexes : [defaultOpenIndexes[0] ?? -1]
-  );
-
-  const toggleIndex = (index: number) => {
-    if (allowMultiple) {
-      if (openIndexes.includes(index)) {
-        setOpenIndexes(openIndexes.filter((i) => i !== index));
-      } else {
-        setOpenIndexes([...openIndexes, index]);
-      }
-    } else {
-      setOpenIndexes(openIndexes.includes(index) ? [] : [index]);
-    }
-  };
-
-  return (
-    <div className="accordion">
-      {items.map((item, index) => (
-        <AccordionItem
-          key={index}
-          index={index}
-          icon={item.icon}
-          title={item.title}
-          content={item.content}
-          isOpen={openIndexes.includes(index)}
-          onToggle={() => toggleIndex(index)}
-          itemClass={itemClass}
-          titleClass={titleClass}
-          iconClass={iconClass}
-          contentClass={contentClass}
-          activeClass={activeClass}
-        />
-      ))}
-    </div>
-  );
-};
-
-export default Accordion;

package/ui/alert/Alert.tsx

@@ -1,106 +0,0 @@
-'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;
-  type?: 'success' | 'info' | 'warning' | 'error';
-  outlined?: boolean;
-  fixed?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-middle' | 'bottom-middle' | 'middle';
-  fullWidth?: boolean;
-  isLoading?: boolean;
-  children?: ReactNode;
-  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({
-  message,
-  funcss,
-  type,
-  outlined,
-  fixed,
-  raised,
-  fullWidth,
-  isLoading,
-  children,
-  animation,
-  duration,
-  variant,
-  flat,
-  standard,
-  card,
-  style,
-  autoHide = false,
-  autoHideDuration = 3000,
-  onClose,
-  ...rest
-}: AlertProps) {
-  const [visible, setVisible] = useState(true);
-
-  useEffect(() => {
-    let timeout: NodeJS.Timeout;
-    if (autoHide) {
-      timeout = setTimeout(() => {
-        setVisible(false);
-        onClose?.();
-      }, autoHideDuration);
-    }
-    return () => clearTimeout(timeout);
-  }, [autoHide, autoHideDuration, onClose]);
-
-  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={`text-${type}800 alert ${card ? 'card' : ''} ${flat ? 'flat' : ''} ${raised ? 'raised' : ''} ${
-          outlined
-            ? `outline-${type}500`
-            : `${variant || (standard ? `top-${type}` : `${type}200`  + ` outline-${type}300 `)}`
-        } ${funcss || ''} ${fullWidth ? 'width-100-p' : ''}`}
-        {...rest}
-      >
-        <div className="alert-icon">
-          {!isLoading ? (
-            <div className={`text-${type}900`} style={{lineHeight:"0"}}>
-              {type === 'success' && <PiCheckCircleDuotone />}
-              {type === 'info' && <PiInfo />}
-              {type === 'warning' && <PiWarning />}
-              {type === 'error' && <PiX />}
-            </div>
-          ) : (
-            <div className="rotate"  style={{lineHeight:"0"}}>
-              <PiSpinner />
-            </div>
-          )}
-        </div>
-        <div className="alert-text">{message || children}</div>
-      </div>
-    </div>
-  );
-}

package/ui/aos/AOS.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react';
-interface ListItemProps {
-  children?: React.ReactNode;
-  funcss?: string; 
-  animation?: string
-  anchorPlacement? : string
-}
-
-
-export default function Animation({
-  children,
-  funcss,
-  animation , 
-  anchorPlacement,
-  ...rest
-}: ListItemProps) {
-
-    return (
-        <div  data-aos-anchor-placement={anchorPlacement || ""} className={`list ${funcss ? funcss : ''}`} {...rest} data-aos={animation ? animation : "fade-up"}>
-        {children}
- </div>
-    )
-
-}

package/ui/appbar/AppBar.tsx

@@ -1,115 +0,0 @@
-'use client';
-import * as React from 'react';
-import { useState, useEffect } from 'react';
-import { usePathname } from 'next/navigation'; // <-- Updated import
-import Hamburger from './Hamburger';
-
-interface NavbarProps {
-  fixedTop?: boolean;
-  funcss?: string;
-  padding?: string;
-  fixedBottom?: boolean;
-  justify?: string;
-  children?: React.ReactNode;
-  left?: React.ReactNode;
-  center?: React.ReactNode;
-  right?: React.ReactNode;
-  sidebarTrigger?: React.ReactNode;
-  transparent?: boolean;
-  sideBar?: number;
-  hasSidebar?: boolean;
-  sidebarOpen?: boolean;
-  openSidebar?: () => void;
-}
-
-export default function AppBar({
-  fixedTop,
-  funcss,
-  padding,
-  fixedBottom,
-  justify,
-  left,
-  center,
-  right,
-  sideBar,
-  sidebarTrigger,
-  transparent,
-  hasSidebar,
-  openSidebar,
-  sidebarOpen = false
-}: NavbarProps) {
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  const [isMobileScreen, setIsMobileScreen] = useState(false);
-  const pathname = usePathname(); // <-- New hook to detect path changes
-
-  const toggleMenu = () => setIsMobileMenuOpen((prev) => !prev);
-  const closeMenu = () => setIsMobileMenuOpen(false);
-
-  useEffect(() => {
-    const handleResize = () => {
-      const isMobile = window.innerWidth < 992;
-      setIsMobileScreen(isMobile);
-      if (!isMobile) {
-        closeMenu(); // close on larger screens
-      }
-    };
-
-    handleResize(); // initial check
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  // Automatically close menu on route (pathname) change
-  useEffect(() => {
-    closeMenu();
-  }, [pathname]);
-
-  const Trigger = ({ isOpen }: { isOpen: boolean }) => {
-    return <Hamburger isOpen={isOpen} />;
-  };
-
-  return (
-    <nav
-    // the id will be used to get the height for the sidebar in the sidebar file
-    id='appBar'
-      className={`navigation-bar
-        ${isMobileMenuOpen ? 'navbar-mobile-open' : ''}
-        ${funcss || ''}
-        ${fixedTop ? 'fixed_top_navbar' : ''}
-        ${sideBar ? 'there_is_sidebar' : ''}
-        ${transparent ? 'transparent' : ''}
-        ${fixedBottom ? 'fixedBottom' : ''}
-      `}
-      style={{
-        padding: `${padding || ''}`,
-        justifyContent: `${justify || ''}`,
-      }}
-    >
-      <div className="logoWrapper">
-        {left}
-        {isMobileScreen && isMobileMenuOpen && (
-          <div className="hover-text-error pointer _closeNav" onClick={closeMenu}>
-            <Trigger isOpen={isMobileMenuOpen} />
-          </div>
-        )}
-      </div>
-
-      <div className="linkWrapper">{center}</div>
-      <div className="linkWrapper">{right}</div>
-
-      {isMobileScreen && !isMobileMenuOpen && (
-       <>
-       {
-        hasSidebar ? 
-         <span className="sidebar-trigger pointer hover-text-primary" onClick={openSidebar}>
-          {sidebarTrigger  || <Trigger isOpen={sidebarOpen} />}
-        </span>
-        :  <span className="sidebar-trigger pointer hover-text-primary" onClick={toggleMenu}>
-          {sidebarTrigger || <Trigger isOpen={isMobileMenuOpen} />}
-        </span>
-       }
-       </>
-      )}
-    </nav>
-  );
-}

package/ui/appbar/Hamburger.tsx

@@ -1,30 +0,0 @@
-'use client';
-import React, { useState } from 'react';
-
-interface HamburgerProps {
-  isOpen?: boolean;
-  toggle?: () => void;
-}
-
-const Hamburger: React.FC<HamburgerProps> = ({ isOpen: controlledOpen, toggle }) => {
-  const [internalOpen, setInternalOpen] = useState(false);
-  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
-
-  const handleClick = () => {
-    if (toggle) {
-      toggle();
-    } else {
-      setInternalOpen(!isOpen);
-    }
-  };
-
-  return (
-    <div className={`navhamburger ${isOpen ? 'navopen' : ''}`} onClick={handleClick}>
-      <span className="navline navtop"></span>
-      <span className="navline navmiddle"></span>
-      <span className="navline navbottom"></span>
-    </div>
-  );
-};
-
-export default Hamburger;

package/ui/avatar/Avatar.tsx

@@ -1,52 +0,0 @@
-'use client';
-
-import { ReactNode, MouseEventHandler } from 'react';
-import * as React from 'react';
-
-interface AvatarProps {
-  funcss?: string;
-  children?: ReactNode;
-  size?: number;
-  bg?: string;
-  bordered?: boolean;
-  color?: string;
-  content?: ReactNode;
-  onClick?: MouseEventHandler<HTMLDivElement>;
-}
-
-export default function Avatar({
-  funcss,
-  children,
-  size = 2,
-  bordered = true,
-  bg,
-  content,
-  color,
-  onClick,
-  ...rest
-}: AvatarProps) {
-  return (
-   <div>
-     <div
-      className={`
-        animated 
-        pointer
-        fade-in 
-        avatar 
-        ${funcss || ''} 
-        ${bg || 'lighter'} 
-        ${bordered ? 'border' : ''}
-        ${color ? `text-${color}` : ''}
-      `}
-      style={{
-        width: `${size}rem`,
-        height: `${size}rem`,
-      }}
-      onClick={onClick}
-      {...rest}
-    >
-      {content || children}
-    </div>
-   </div>
-  );
-}

package/ui/blob/Blob.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-
-interface BlobProps {
-  height?: string;
-  width?: string;
-  background?: string;
-  funcss?: string;
-  shape?: string;
-}
-
-const Blob: React.FC<BlobProps> = ({
-  height = '',
-  width = '',
-  background = '',
-  funcss = '',
-  shape = '',
-}) => {
-  return (
-    <div
-      className={`${funcss}`}
-      style={{
-        height,
-        width,
-        background: background ? `url(${background})` : '',
-        backgroundSize: 'cover',
-        backgroundRepeat: 'no-repeat',
-        borderRadius: shape,
-        transition: '0.3s linear',
-      }}
-    ></div>
-  );
-};
-
-export default Blob;

package/ui/breadcrumb/BreadCrumb.tsx

@@ -1,48 +0,0 @@
-'use client'; 
-import * as React from 'react';
-import { PiCaretLeft, PiCaretRight } from 'react-icons/pi';
-interface BreadCrumbProps {
-  type?: 'slash' | 'greater' | 'less' | 'straight';
-  funcss?: string;
-  color?: string;
-}
-
-export default function BreadCrumb({ type, funcss, color }: BreadCrumbProps) {
-  return (
-    <span >
-      {type === 'slash' && (
-        <span
-        style={{lineHeight:"0"}}
-          className={` ${funcss ? funcss : ''} ${color ? 'text-' + color : ''}`}
-        >
-          {' / '}
-        </span>
-      )}
-      {type === 'greater' && (
-        <span
-          className={` ${funcss ? funcss : ''} ${color ? 'text-' + color : ''}`}
-        >
-          <span    style={{lineHeight:"0"}} className={`${color ?  `text-${color}` : ''}`}>
-         <PiCaretRight  />
-         </span>
-        </span>
-      )}
-      {type === 'less' && (
-        <span
-          className={` ${funcss ? funcss : ''} ${color ? 'text-' + color : ''}`}
-        > <span     style={{lineHeight:"0"}} className={`${color ?  `text-${color}` : ''}`}>
-          <PiCaretLeft  />
-          </span>
-        </span>
-      )}
-      {type === 'straight' && (
-        <span
-        style={{lineHeight:"0"}}
-          className={` ${funcss ? funcss : ''} ${color ? 'text-' + color : ''}`}
-        >
-          {' | '}
-        </span>
-      )}
-    </span>
-  );
-}