funuicss 2.7.16 → 3.0.0

package/ui/sidebar/SideBar.tsx

@@ -1,202 +0,0 @@
-'use client';
-import React, {
-  useEffect,
-  useRef,
-  useState,
-  ReactNode,
-  useCallback,
-} from 'react';
-import RowFlex from '../specials/RowFlex';
-import Text from '../text/Text';
-import { usePathname } from 'next/navigation';
-import { PiX } from 'react-icons/pi';
-import Link from 'next/link';
-
-interface SideBarLink {
-  uri: string;
-  icon: React.ReactNode;
-  text: string;
-  section: string;
-}
-
-interface SideBarProps {
-  funcss?: string;
-  position?: 'left' | 'right';
-  open?: boolean;
-  header?: ReactNode;
-  content?: ReactNode;
-  footer?: ReactNode;
-  top?: number;
-  sidebarWidth?: number;
-  sidebarCss?: string;
-  activeCss?: string;
-  iconCSS?: string;
-  bodyCss?: string;
-  popIcon?:boolean;
-  dividers?:boolean;
-  links?: SideBarLink[];
-  children?: ReactNode;
-  onClose?: () => void;
-}
-
-export default function SideBar({
-  funcss = '',
-  position = 'left',
-  open = false,
-  header,
-  content,
-  footer,
-  top = 0,
-  sidebarWidth = 250,
-  iconCSS = '',
-  sidebarCss = '',
-  activeCss,
-  bodyCss = '',
-  popIcon = false,
-  dividers = false,
-  links = [],
-  children,
-  onClose,
-}: SideBarProps) {
-  const [isMobile, setIsMobile] = useState(false);
-  const [internalOpen, setInternalOpen] = useState(open);
-  const [appBarHeight, setAppBarHeight] = useState('0px');
-  const pathname = usePathname();
-  const sidebarRef = useRef<HTMLDivElement>(null);
-
-  const updateIsMobile = useCallback(() => {
-    setIsMobile(window.innerWidth <= 992);
-    
-  }, []);
-
-  useEffect(() => {
-    updateIsMobile();
-    window.addEventListener('resize', updateIsMobile);
-    return () => window.removeEventListener('resize', updateIsMobile);
-  }, [updateIsMobile]);
-
-  // Sync internal state with prop changes
-  useEffect(() => {
-    setInternalOpen(open);
-  }, [open]);
-
-  useEffect(() => {
-    const appBar = document.querySelector('#appBar') as HTMLElement;
-    if (appBar) {
-      setAppBarHeight(`${appBar.offsetHeight}px`);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!isMobile || !internalOpen) return;
-
-    const handleOutsideClick = (e: MouseEvent | TouchEvent) => {
-      if (sidebarRef.current && !sidebarRef.current.contains(e.target as Node)) {
-        handleClose();
-      }
-    };
-
-    document.addEventListener('mousedown', handleOutsideClick);
-    document.addEventListener('touchstart', handleOutsideClick);
-
-    return () => {
-      document.removeEventListener('mousedown', handleOutsideClick);
-      document.removeEventListener('touchstart', handleOutsideClick);
-    };
-  }, [isMobile, internalOpen]);
-
-  const handleClose = () => {
-    setInternalOpen(false);
-    onClose?.();
-  };
-
-  const groupedLinks = links.reduce<Record<string, SideBarLink[]>>((acc, link) => {
-    acc[link.section] = acc[link.section] || [];
-    acc[link.section].push(link);
-    return acc;
-  }, {});
-
-  const isOverlay = isMobile;
-
-  return (
-    <div className={`sidebar-container ${isOverlay ? '' : 'with-content'}`}>
-      {internalOpen && (
-        <aside
-          role="complementary"
-          ref={sidebarRef}
-          className={`sidebar ${funcss} ${sidebarCss}  ${isOverlay ? 'nav_overlay' : ''}`}
-          style={{
-            width: isOverlay ? '100%' : `${sidebarWidth}px`,
-            height: `calc(100vh - ${appBarHeight || top || '0px'})`,
-            position: 'fixed',
-            top: appBarHeight || top,
-            [position]: 0,
-            padding: '1rem',
-          }}
-        >
-              {/* {isMobile && (
-              <div
-                className="hover-text-error pointer"
-                onClick={handleClose}
-                style={{ cursor: 'pointer' }}
-              >
-                {close || <PiX size={25}/>}
-              </div>
-            )} */}
-
-          <RowFlex justify="space-between" funcss="pl-2 pr-2">
-            {header && <div>{header}</div>}
-        
-          </RowFlex>
-
-          <section className="sidebar-body mt-3">
-            {links.length > 0 && (
-              <nav className="sidebar-links">
-                {Object.entries(groupedLinks).map(([section, sectionLinks]) => (
-                  <div key={section} className={`sidebar-section ${dividers ? "bt" : ""} pt-2 pb-2`}>
-                    <Text size="sm" funcss="opacity-6 p-1 pl-2 pr-2">{section}</Text>
-                    {sectionLinks.map(link => {
-                      const isActive = pathname === link.uri;
-                      return (
-                        <Link onClick={() => {
-                          if(isMobile){
-                            handleClose()
-                          }
-                        }} key={link.uri} href={link.uri}>
-                          <div   className={`p-1 pl-2 pr-2 sidebar-link  ${
-                            isActive ? `primary50 outline-primary200 ${activeCss || ''}` : 'hoverable'
-                          }`}>
-                            <span className={`${iconCSS || '' } ${popIcon ? `p-1 border lighter central` : ""}`} style={{ lineHeight: 0  , borderRadius:"0.4rem"}}>{link.icon}</span>
-                            <Text text={link.text} size="sm" weight={400} />
-                          </div>
-                        </Link>
-                      );
-                    })}
-                  </div>
-                ))}
-              </nav>
-            )}
-            {content}
-          </section>
-
-          {footer && <footer className="sidebar-footer mt-2">{footer}</footer>}
-        </aside>
-      )}
-
-      <main
-        className={`main-content ${bodyCss}`}
-        style={{
-          flex: 1,
-          marginLeft: position === 'left' && !isOverlay && internalOpen ? `${sidebarWidth}px` : 0,
-          marginRight: position === 'right' && !isOverlay && internalOpen ? `${sidebarWidth}px` : 0,
-          overflowY: 'auto',
-          height: '100vh',
-          paddingTop: appBarHeight || top,
-          transition: 'margin 0.3s ease',
-        }}
-      >
-        {children}
-      </main>
-    </div>
-  );
-}

package/ui/sidebar/SideContent.tsx

@@ -1,16 +0,0 @@
-import React from 'react'
-interface NotFoundProps {
-    content?:React.ReactNode 
-}
-
-export default function SideContent(
-    {
-        content ,
-    }:NotFoundProps
-) {
-  return (
-    <main className="fun_main_content">
-      {content && <div>{content}</div>} 
-    </main>
-  );
-}

package/ui/slider/Slider.tsx

@@ -1,75 +0,0 @@
-'use client';
-import React, { useState, useRef } from 'react';
-import { getCssVariableValue } from '../../utils/getCssVariable';
-
-
-type RangeSliderProps = {
-  min?: number;
-  max?: number;
-  step?: number;
-  value: number;
-  height?: number;
-  onChange: (value: number) => void;
-  label?: string;
-  showTooltip?: boolean;
-  funcss?: string;
-};
-
-const Slider: React.FC<RangeSliderProps> = ({
-  min = 0,
-  max = 100,
-  step = 1,
-  value,
-  onChange,
-  height = 6,
-  label,
-  showTooltip = true,
-  funcss = '',
-}) => {
-  const [isDragging, setIsDragging] = useState(false);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    onChange(Number(e.target.value));
-  };
-
-  const percent = ((value - min) / (max - min)) * 100;
-  let pColor = getCssVariableValue("primary")
-
-  return (
-    <div className={`range-slider-container ${funcss}`}>
-
-      <div className="range-wrapper">
-        {showTooltip && (
-          <div
-            className={`range-tooltip ${isDragging ? 'visible' : ''}`}
-            style={{ left: `calc(${percent}% - 20px)` }}
-          >
-            {value}%
-          </div>
-        )}
-
-<input
-  type="range"
-  min={min}
-  max={max}
-  step={step}
-  value={value}
-  onChange={handleChange}
-  onMouseDown={() => setIsDragging(true)}
-  onMouseUp={() => setIsDragging(false)}
-  onTouchStart={() => setIsDragging(true)}
-  onTouchEnd={() => setIsDragging(false)}
-  className="range-slider"
-  style={{
-    background: `linear-gradient(to right, ${pColor} 0%, ${pColor} ${percent}%, var(--lighter) ${percent}%, var(--lighter) 100%)`,
-    height: `${height}px`,
-  }}
-/>
-
-      </div>
-
-    </div>
-  );
-};
-
-export default Slider;

package/ui/snackbar/SnackBar.tsx

@@ -1,56 +0,0 @@
-'use client';
-import * as React from 'react';
-
-interface SnackbarProps {
-  message: string;
-  close?: React.ReactNode;
-  open: boolean;
-  setOpen: (val: boolean) => void;
-  position: string;
-  funcss?: string;
-  animation?: string;
-  duration?: number; // animation duration (in seconds)
-  autoHide?: boolean; // 👈 NEW
-  autoHideDuration?: number; // 👈 NEW in milliseconds
-  flat?: boolean;
-}
-
-const SnackBar: React.FC<SnackbarProps> = ({
-  message,
-  close,
-  open,
-  setOpen,
-  position,
-  funcss,
-  animation,
-  duration = 0.3,
-  autoHide = false,
-  autoHideDuration = 3000,
-  flat,
-}) => {
-  React.useEffect(() => {
-    if (open && autoHide) {
-      const timer = setTimeout(() => {
-        setOpen(false);
-      }, autoHideDuration);
-      return () => clearTimeout(timer);
-    }
-  }, [open, autoHide, autoHideDuration, setOpen]);
-
-  if (!open) return null;
-
-  return (
-    <div className={`snackbar ${position} ${funcss || ''} ${flat ? 'flat' : ''}`} style={{ animation: `${duration}s ${animation || 'SlideUp'}` }}>
-      <div className="snackbar-content">
-        <div className="snackbar-body">{message}</div>
-        {close && (
-          <div className="close-snackbar pointer" onClick={() =>setOpen ? setOpen(false) : null}>
-            {close}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default SnackBar;

package/ui/specials/Circle.tsx

@@ -1,49 +0,0 @@
-'use client'
-import { ReactNode, HTMLProps } from 'react';
-import * as React from 'react'
-
-
-interface Circle_Props extends HTMLProps<HTMLDivElement> {
-    size?: number;
-    funcss?: string;
-    bg?: string;
-    color?: string;
-    children?: ReactNode;
-    hoverable?: boolean;
-    raised?:boolean 
-    bordered?:boolean 
-    key?:React.Key
-    onClick?: ()=> void
-  }
-  
-
-export default function Circle({
-  size = 2,
-  funcss,
-  bg,
-  color,
-  children,
-  hoverable,
-  raised ,
-  key , 
-  onClick ,
-  bordered,
-  ...rest
-}: Circle_Props) {
-  return (
-      <div
-        className={` animated fade-in ${bordered ? "border" : ""} pointer avatar ${funcss || ''} ${`text-` + color?.trim() || ''} ${raised ? "raised" : ''} ${bg || 'lighter'} ${
-          hoverable ? 'hoverable' : ''
-        }`}
-        style={{
-          width: `${size + "rem" || '2.3rem'}`,
-          height: `${size + "rem" || '2.3rem'}`,
-        }}
-        key={key}
-        onClick={onClick}
-        {...rest}
-      >
-        <>{ children}</>
-      </div>
-  );
-}

package/ui/specials/CircleGroup.tsx

@@ -1,49 +0,0 @@
-'use client';
-import React from 'react';
-
-interface AvatarGroupProps {
-  avatars: React.ReactElement[]; // Or you can accept props data instead
-  size?: number;
-  overlap?: number; // how much they overlap in rem
-  maxVisible?: number; // optional limit
-}
-
-export default function CircleGroup({
-  avatars,
-  size = 2,
-  overlap = 0.8,
-  maxVisible = avatars.length,
-}: AvatarGroupProps) {
-  const displayed = avatars.slice(0, maxVisible);
-  const extra = avatars.length - maxVisible;
-
-  return (
-    <div className="flex" style={{ direction: 'ltr' }}>
-      {displayed.map((avatar, i) => (
-        <div
-          key={i}
-          style={{
-            marginLeft: i === 0 ? '0' : `-${overlap}rem`,
-            zIndex: avatars.length - i,
-          }}
-        >
-          {React.cloneElement(avatar, { size })}
-        </div>
-      ))}
-      {extra > 0 && (
-        <div
-          className="avatar lighter text-small flex "
-          style={{
-            width: `${size}rem`,
-            height: `${size}rem`,
-            marginLeft: `-${overlap}rem`,
-            zIndex: 0,
-
-          }}
-        >
-          +{extra}
-        </div>
-      )}
-    </div>
-  );
-}

package/ui/specials/FullCenteredPage.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react';
-
-type HrProps = {
-  children: React.ReactNode;
-  funcss?: string;
-  style?: object
-};
-
-const FullCenteredPage = ({ children, funcss , style , ...rest }: HrProps) => {
-  return (
-    <div className={`flex central ${funcss}`} style={{
-        minHeight:"100vh" ,
-        minWidth:"100%" ,
-        maxWidth:"100%",
-        overflow:"auto",
-        ...style
-    }}
-    {...rest}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default FullCenteredPage;

package/ui/specials/Hr.tsx

@@ -1,16 +0,0 @@
-import * as React from 'react';
-
-type HrProps = {
-  children: React.ReactNode;
-  funcss?: string;
-};
-
-const Hr = ({ children, funcss }: HrProps) => {
-  return (
-    <div className={`hr ${funcss}`}>
-      {children}
-    </div>
-  );
-};
-
-export default Hr;

package/ui/specials/RowFlex.tsx

@@ -1,56 +0,0 @@
-import * as React from 'react';
-
-interface RowFlexProps {
-  className?: string;
-  funcss?: string;
-  content?: React.ReactNode;
-  justify?: string;
-  wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
-  gap?: number;
-  alignItems?: string;
-  align?: string;
-  responsiveSmall?: boolean;
-  responsiveMedium?: boolean;
-  id?: string;
-  children?: React.ReactNode;
-  style?: React.CSSProperties;
-}
-
-export default function RowFlex({
-  className,
-  funcss,
-  content,
-  justify,
-  gap,
-  alignItems,
-  align,
-  responsiveSmall,
-  responsiveMedium,
-  wrap = 'wrap',
-  id,
-  children,
-  style,
-  ...rest
-}: RowFlexProps) {
-  return (
-    <div
-      id={id ? id : ''}
-      className={`
-        row-flex ${className ? className : ''}
-        ${funcss ? funcss : ''}
-        ${responsiveSmall ? 'responsiveSmall' : responsiveMedium ? 'responsiveMedium' : ''}
-      `}
-      style={{
-        justifyContent: justify ? justify : '',
-        gap: gap ? gap + "rem": '',
-        alignItems: alignItems ? alignItems : '',
-        flexWrap:  wrap,
-        ...style,
-      }}
-      {...rest}
-    >
-      {children} {content}
-    </div>
-  );
-}
-

package/ui/specials/Section.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-type SectionProps = {
-  children?: React.ReactNode;
-  funcss?: string;
-  gap?: number
-};
-
-const Section = ({ children, funcss , gap , ...rest}: SectionProps) => {
-  return (
-    <div className={`${funcss}`} 
-    style={{marginTop:gap ? gap  + "rem" : "0.5rem" , marginBottom:gap ? gap  + "rem" : "0.5rem" }} {...rest}>
-      {children}
-    </div>
-  );
-};
-
-export default Section;

package/ui/step/Container.tsx

@@ -1,27 +0,0 @@
-import React, { ReactNode } from 'react';
-
-interface StepContainerProps {
-  children?: ReactNode;
-  funcss?: string;
-  responsiveMedium?: boolean;
-  responsiveSmall?: boolean;
-}
-
-const StepContainer: React.FC<StepContainerProps> = ({
-  children,
-  funcss,
-  responsiveMedium,
-  responsiveSmall,
-}) => {
-  return (
-    <div
-      className={`${
-        funcss ? funcss : ''
-      } stepContainer ${responsiveMedium ? 'stepResponsiveMedium' : responsiveSmall ? 'stepResponsiveSmall' : ''}`}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default StepContainer;

package/ui/step/Header.tsx

@@ -1,16 +0,0 @@
-import React, { ReactNode } from 'react';
-
-interface StepTitleProps {
-  children?: ReactNode;
-  funcss?: string;
-}
-
-const StepTitle: React.FC<StepTitleProps> = ({ children, funcss }) => {
-  return (
-    <div className={`stepHeader ${funcss ? funcss : ''}`}>
-      {children}
-    </div>
-  );
-};
-
-export default StepTitle;

package/ui/step/Line.tsx

@@ -1,17 +0,0 @@
-'use client'; 
-import React, { ReactNode } from 'react';
-
-interface StepLinedProps {
-  children?: ReactNode;
-  funcss?: string;
-}
-
-const StepLine: React.FC<StepLinedProps> = ({ children, funcss }) => {
-  return (
-    <div className={`stepLined ${funcss ? funcss : ''}`}>
-      {children}
-    </div>
-  );
-};
-
-export default StepLine;

package/ui/step/Step.tsx

@@ -1,17 +0,0 @@
-'use client'; 
-import React, { ReactNode } from 'react';
-
-interface StepProps {
-  children?: ReactNode;
-  funcss?: string;
-}
-
-const Step: React.FC<StepProps> = ({ children, funcss  }) => {
-  return (
-    <div className={`step ${funcss ? funcss : ''}`}>
-      {children}
-    </div>
-  );
-};
-
-export default Step;

package/ui/table/Body.tsx

@@ -1,10 +0,0 @@
-import * as React from 'react';
-
-type TableBodyProps = {
-  children?: React.ReactNode;
-  funcss?: string;
-};
-
-export default function TableBody({ children, funcss }: TableBodyProps) {
-  return <tbody className={`${funcss ? funcss : ''}`}>{children ? children : ''}</tbody>;
-}

package/ui/table/Data.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-
-interface TableDataProps {
-  children?: React.ReactNode;
-  funcss?: string;
-  key?: any;
-}
-
-export default function TableData({ children, funcss, key }: TableDataProps) {
-  return (
-    <td className={`${funcss}`} key={key}>
-      {children}
-    </td>
-  );
-}

package/ui/table/Head.tsx

@@ -1,10 +0,0 @@
-import * as React from 'react';
-
-type TableHeadProps = {
-  children?: React.ReactNode;
-  funcss?: string;
-};
-
-export default function TableHead({ children, funcss }: TableHeadProps) {
-  return <thead className={`${funcss ? funcss : ''}`}>{children}</thead>;
-}