funuicss 2.7.16 → 3.0.0

package/ui/datepicker/DatePicker.tsx

@@ -1,148 +0,0 @@
-'use client';
-import React, { useState } from 'react';
-import dayjs from 'dayjs';
-import Avatar from '../avatar/Avatar';
-import { PiCaretLeft, PiCaretRight, PiX, PiXCircle } from 'react-icons/pi';
-
-interface DatePickerProps {
-  mode?: 'single' | 'interval';
-  funcss?: string;
-  onSelect?: (value: Date | [Date, Date]) => void;
-  value?: Date | [Date, Date];
-  className?: string;
-}
-
-type Selection = Date | [Date, Date | null] | null;
-
-const DatePicker: React.FC<DatePickerProps> = ({
-  mode = 'single',
-  onSelect,
-  value,
-  funcss,
-  className = '',
-}) => {
-  const [currentMonth, setCurrentMonth] = useState(dayjs());
-  const [selected, setSelected] = useState<Selection>(value || null);
-
-  const daysInMonth = currentMonth.daysInMonth();
-  const firstDay = currentMonth.startOf('month').day(); // 0 = Sunday
-
-  const days: (Date | null)[] = [];
-  for (let i = 0; i < firstDay; i++) {
-    days.push(null); // padding
-  }
-  for (let i = 1; i <= daysInMonth; i++) {
-    days.push(currentMonth.date(i).toDate());
-  }
-
-  const handleSelect = (date: Date) => {
-    if (mode === 'single') {
-      setSelected(date);
-      onSelect?.(date);
-    } else if (mode === 'interval') {
-      if (!selected || !Array.isArray(selected)) {
-        setSelected([date, null]);
-      } else {
-        const [start, end] = selected;
-        if (!end) {
-          const range: [Date, Date] =
-            dayjs(date).isBefore(dayjs(start)) ? [date, start] : [start, date];
-          setSelected(range);
-          onSelect?.(range);
-        } else {
-          setSelected([date, null]); // restart
-        }
-      }
-    }
-  };
-
-  const isSelected = (date: Date) => {
-    if (!selected) return false;
-    if (mode === 'single' && selected instanceof Date) {
-      return dayjs(selected).isSame(date, 'day');
-    }
-    if (Array.isArray(selected)) {
-      const [start, end] = selected;
-      if (start && end) {
-        return (
-          dayjs(date).isSame(start, 'day') ||
-          dayjs(date).isSame(end, 'day') ||
-          (dayjs(date).isAfter(start) && dayjs(date).isBefore(end))
-        );
-      }
-      return dayjs(date).isSame(start, 'day');
-    }
-    return false;
-  };
-
-  const nextMonth = () => setCurrentMonth(currentMonth.add(1, 'month'));
-  const prevMonth = () => setCurrentMonth(currentMonth.subtract(1, 'month'));
-
-  const handleClear = () => {
-    setSelected(null);
-    onSelect?.(mode === 'single' ? null as unknown as Date : null as unknown as [Date, Date]);
-  };
-
-  const formatDate = (date: Date | null | undefined) =>
-    date ? dayjs(date).format('MMM D, YYYY') : '...';
-
-  return (
-    <div className={`datepicker ${funcss} ${className}`}>
-      <div className="datepicker-header">
-        <Avatar onClick={prevMonth}><PiCaretLeft /></Avatar>
-        <span>{currentMonth.format('MMMM YYYY')}</span>
-        <Avatar onClick={nextMonth}><PiCaretRight /></Avatar>
-      </div>
-
-      {selected && (
-        <div className="datepicker-selected">
-          <span className="interval-display">
-            {mode === 'single' && selected instanceof Date && (
-              <>Selected: {formatDate(selected)}</>
-            )}
-            {mode === 'interval' && Array.isArray(selected) && (
-              <div className='text-sm'>
-                {selected[1]
-                  ? `${formatDate(selected[0])} to ${formatDate(selected[1])}`
-                  : ` ${formatDate(selected[0])} - End date`}
-              </div>
-            )}
-          </span>
-          <div style={{lineHeight:"0"}}>
-          <PiX className="clear-icon" onClick={handleClear} style={{ cursor: 'pointer' }} />
-          </div>
-        </div>
-      )}
-
-      <div className="datepicker-weekdays">
-        {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map((d) => (
-          <div key={d}>{d}</div>
-        ))}
-      </div>
-
-      <div className="datepicker-grid">
-        {days.map((date, idx) => {
-          const isSelectedClass = date && isSelected(date) ? 'selected' : '';
-          const isInRangeClass =
-            date && isSelected(date) && Array.isArray(selected) ? 'in-range' : '';
-          return (
-            <div
-              key={idx}
-              onClick={() => date && handleSelect(date)}
-          
-            >
-             {
-              date && 
-              <Avatar funcss={`borderless datepicker-day ${!date ? 'empty' : ''} ${isSelectedClass} ${isInRangeClass}`}>
-              {date ? dayjs(date).date() : ''}
-              </Avatar>
-             }
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-
-export default DatePicker;

package/ui/div/Div.tsx

@@ -1,61 +0,0 @@
-'use client'; 
-import * as React from 'react';
-
-type DivProps = {
-  children?: React.ReactNode;
-  funcss?: string;
-  content?: React.ReactNode;
-  minHeight?: string;
-  maxHeight?: string;
-  maxWidth?: string;
-  minWidth?: string;
-  height?: string;
-  width?: string;
-  padding?: string;
-  margin?: string;
-  fit?: boolean;
-  customStyle?: React.CSSProperties;
-  onClick?: React.MouseEventHandler<HTMLDivElement>;
-};
-
-const Div = ({
-  children,
-  funcss,
-  content,
-  minHeight,
-  maxHeight,
-  maxWidth,
-  minWidth,
-  height,
-  width,
-  padding,
-  margin,
-  fit,
-  customStyle,
-  ...rest
-}: DivProps) => {
-  return (
-    <div>
-
-        <div
-          className={`${fit ? 'width-100-p height-100-p' : ''} ${funcss}`}
-          style={{
-            height: height || '',
-            maxHeight: maxHeight || '',
-            minHeight: minHeight || '',
-            maxWidth: maxWidth || '',
-            minWidth: minWidth || '',
-            width: width || '',
-            padding: padding || '',
-            margin: margin || '',
-            ...customStyle
-          }}
-          {...rest}
-        >
-          {content || children}
-        </div>
-    </div>
-  );
-};
-
-export default Div;

package/ui/drop/Action.tsx

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

package/ui/drop/Down.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-type DropDownProps = {
-  funcss?: string;
-  children: React.ReactNode;
-  id?: string;
-  side?: string;
-};
-
-const DropDown = ({ funcss, children, id, side,  }: DropDownProps) => {
-  return (
-    <div className={`dropdown ${side ? side : 'left'} ${funcss}`} id={id}>
-      {children}
-    </div>
-  );
-};
-
-export default DropDown; 

package/ui/drop/Dropdown.tsx

@@ -1,117 +0,0 @@
-'use client'; 
-import React, { useState, useRef, useEffect } from 'react';
-
-type Position = 'left' | 'right';
-type Direction = 'dropdown' | 'dropup';
-
-interface DropdownItem {
-  label: React.ReactNode;
-  onClick?: () => void;
-}
-
-interface DropdownProps {
-  direction?: Direction;
-  position?: Position;
-  button: React.ReactNode;
-  items: DropdownItem[];
-  hoverable?: boolean;
-  openOnHover?: boolean;
-  closableOnlyOutside?: boolean;
-  className?: string;
-  width?: string;
-  minWidth?: string;
-  maxWidth?: string;
-  height?: string;
-  minHeight?: string;
-  maxHeight?: string;
-
-}
-
-const Dropdown: React.FC<DropdownProps> = ({
-  direction = 'dropdown',
-  position = 'left',
-  button,
-  items,
-  hoverable = true,
-  openOnHover = true,
-  closableOnlyOutside = false,
-  className = '',
-  width,
-  minWidth,
-  maxWidth,
-  height,
-  minHeight,
-  maxHeight,
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [open, setOpen] = useState(false);
-
-  const containerClass = `${direction} ${position} ${className}`.trim();
-  const menuClass = `drop-menu ${hoverable ? ' item-hoverable' : ''}`;
-
-  useEffect(() => {
-    if (openOnHover) return;
-
-    const handleClickOutside = (event: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
-        setOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [openOnHover]);
-
-  const showMenu = openOnHover || open;
-
-  return (
-    <div
-      ref={containerRef}
-      className={containerClass}
-      onMouseEnter={() => openOnHover && setOpen(true)}
-      onMouseLeave={() => openOnHover && setOpen(false)}
-    >
-      <div
-        className="drop-button"
-        onClick={() => !openOnHover && setOpen(!open)}
-        style={{ cursor: !openOnHover ? 'pointer' : undefined }}
-      >
-        {button}
-      </div>
-      {
-        showMenu && 
-        
-      <div
-      className={menuClass}
-      style={{
-        width,
-        minWidth,
-        maxWidth,
-        height,
-        minHeight,
-        maxHeight,
-      }}
-    >
-      {items.map((item, index) => (
-        <div
-          key={index}
-          className="drop-item hoverable"
-          onClick={() => {
-        if(!closableOnlyOutside){
-       item.onClick?.();
-            if (!openOnHover) setOpen(false);
-        }
-   
-          }}
-        >
-          {item.label}
-        </div>
-      ))}
-    </div>
-      }
-    </div>
-  );
-};
-
-export default Dropdown;
-

package/ui/drop/Item.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-
-type DropItemProps = {
-  children: React.ReactNode;
-  funcss?: string;
-  onClick?: () => void;
-};
- 
-export default function DropItem({ children, funcss, onClick }: DropItemProps) {
-  return (
-    <div className={`${funcss} drop-item`} onClick={onClick}>
-      {children}
-    </div>
-  );
-}

package/ui/drop/Menu.tsx

@@ -1,40 +0,0 @@
-import * as React from 'react';
-import { useState, useEffect } from 'react';
-
-type DropMenuProps = {
-  children: React.ReactNode;
-  funcss?: string;
-  hoverable?: string;
-  duration?: number;
-  animation?: string;
-  id?: string;
-  width?: string;
-};
-
-export default function DropMenu({
-  children,
-  funcss,
-  hoverable,
-  duration,
-  animation,
-  id,
-  width,
-}: DropMenuProps) {
-
-  return (
-    <div>
-
-        <div
-          id={id}
-          className={`drop-menu ${funcss} item-${hoverable ? hoverable : ''}`}
-          style={{
-            animation: ` ${duration ? duration : 0.2}s ${animation ? animation : 'ScaleUp'}`,
-            width: width ? width : '100%',
-          }}
-        >
-          {children}
-        </div>
-     
-    </div>
-  );
-}

package/ui/drop/Up.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-type DropUpProps = {
-  funcss?: string;
-  children: React.ReactNode;
-  id?: string;
-  side?: string;
-};
-
-const DropUp = ({ funcss, children, id, side,  }: DropUpProps) => {
-  return (
-    <div className={`dropup ${side ? side : 'left'} ${funcss}`} id={id}>
-      {children}
-    </div>
-  );
-};
-
-export default DropUp; 

package/ui/flex/Flex.tsx

@@ -1,97 +0,0 @@
-'use client';
-import React from 'react';
-
-interface FlexProps {
-  className?: string;
-  funcss?: string;
-  id?: string;
-  children?: React.ReactNode;
-  style?: React.CSSProperties;
-
-  // Flex container properties
-  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
-  wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
-  justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
-  alignItems?: 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline';
-  alignContent?: 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around';
-
-  // Gap utilities
-  gap?: number;
-  gapX?: number;
-  gapY?: number;
-  gapUnit?: 'rem' | 'px' | 'em';
-
-  // Responsive helpers
-  responsiveSmall?: boolean;
-  responsiveMedium?: boolean;
-  responsiveLarge?: boolean;
-
-  // Stretch helpers
-  fullWidth?: boolean;
-  fullHeight?: boolean;
-}
-
-export default function Flex({
-  className,
-  funcss,
-  id,
-  children,
-  style = {},
-
-  // Flex container
-  direction = 'row',
-  wrap = 'wrap',
-  justify,
-  alignItems,
-  alignContent,
-
-  // Gap
-  gap,
-  gapX,
-  gapY,
-  gapUnit = 'rem',
-
-  // Responsive
-  responsiveSmall,
-  responsiveMedium,
-  responsiveLarge,
-
-  // Size
-  fullWidth,
-  fullHeight,
-  ...rest
-}: FlexProps) {
-  const combinedClassName = [
-    className,
-    funcss,
-    responsiveSmall && 'responsiveSmall',
-    responsiveMedium && 'responsiveMedium',
-    responsiveLarge && 'responsiveLarge',
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <div
-      id={id}
-      className={combinedClassName}
-      style={{
-        display: 'flex',
-        flexDirection: direction,
-        flexWrap: wrap,
-        justifyContent: justify,
-        alignItems: alignItems,
-        alignContent: alignContent,
-        gap: gap !== undefined ? `${gap}${gapUnit}` : undefined,
-        columnGap: gapX !== undefined ? `${gapX}${gapUnit}` : undefined,
-        rowGap: gapY !== undefined ? `${gapY}${gapUnit}` : undefined,
-        width: fullWidth ? '100%' : undefined,
-        height: fullHeight ? '100%' : undefined,
-        ...style,
-      }}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-}

package/ui/flex/FlexItem.tsx

@@ -1,64 +0,0 @@
-'use client';
-import React from 'react';
-
-interface FlexItemProps {
-  className?: string;
-  funcss?: string;
-  id?: string;
-  children?: React.ReactNode;
-  style?: React.CSSProperties;
-
-  // Flex item behaviors
-  flex?: string;
-  grow?: number;
-  shrink?: number;
-  basis?: string;
-  alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
-
-  // Size helpers
-  fullWidth?: boolean;
-  fullHeight?: boolean;
-}
-
-export default function FlexItem({
-  className,
-  funcss,
-  id,
-  children,
-  style = {},
-
-  // Flex item
-  flex,
-  grow,
-  shrink,
-  basis,
-  alignSelf,
-
-  // Size
-  fullWidth,
-  fullHeight,
-
-  ...rest
-}: FlexItemProps) {
-  const combinedClassName = [className, funcss].filter(Boolean).join(' ');
-
-  return (
-    <div
-      id={id}
-      className={combinedClassName}
-      style={{
-        flex,
-        flexGrow: flex ? undefined : grow,
-        flexShrink: flex ? undefined : shrink,
-        flexBasis: flex ? undefined : basis,
-        alignSelf,
-        width: fullWidth ? '100%' : undefined,
-        height: fullHeight ? '100%' : undefined,
-        ...style,
-      }}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-}

package/ui/grid/Col.tsx

@@ -1,43 +0,0 @@
-import  { ReactNode, HTMLProps } from 'react';
-import * as React from 'react';
-interface ColProps extends HTMLProps<HTMLDivElement> {
-  sm?: number;
-  md?: number;
-  lg?: number;
-  children?: ReactNode;
-  funcss?: string;
-  id?: string; 
-  smOrder?:number;
-  mdOrder?:number;
-  lgOrder?:number
-}
-
-export default function Col({
-  sm,
-  md,
-  lg,
-  children,
-  funcss,
-  id,
-  smOrder,
-  mdOrder,
-  lgOrder,
-  ...rest
-}: ColProps) {
-  const classNames = [
-    'col',
-    sm ? `sm-${sm}` : '',
-    md ? `md-${md}` : '',
-    lg ? `lg-${lg}` : '',
-    smOrder ? `sm-order-${smOrder}` : '',
-    mdOrder ? `md-order-${mdOrder}` : '',
-    lgOrder ? `lg-order-${lgOrder}` : '',
-    funcss || '',
-  ].join(' ');
-
-  return (
-    <div id={id || ''} className={classNames} {...rest}>
-      {children}
-    </div>
-  );
-}

package/ui/grid/Grid.tsx

@@ -1,37 +0,0 @@
-import { ReactNode, CSSProperties, HTMLProps } from 'react';
-import * as React from 'react';
-
-interface GridProps extends HTMLProps<HTMLDivElement> {
-  children?: ReactNode;
-  funcss?: string;
-  gap?: number;
-  justify?: CSSProperties['justifyContent'];
-  align?: CSSProperties['alignItems'];
-  id?: string;
-  direction?: CSSProperties['flexDirection'];
-}
-
-export default  function Grid({
-  children,
-  funcss,
-  justify,
-  align,
-  id,
-  direction,
-  ...rest
-}: GridProps) {
-  return (
-    <div
-      id={id || ''}
-      className={`row ${funcss || ''}`}
-      style={{
-        justifyContent: justify || '',
-        alignItems: align || '',
-        flexDirection: direction || 'row'
-      }}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-}