funuicss 2.7.16 → 3.0.0

package/ui/carousel/Carousel.tsx

@@ -1,148 +0,0 @@
-'use client';
-import React, { useRef, ReactNode, useState, useEffect } from 'react';
-import { PiCaretLeft, PiCaretRight } from 'react-icons/pi';
-import Circle from '../specials/Circle';
-import RowFlex from '../specials/RowFlex';
-import { isTouchDevice } from '../../utils/Functions';
-
-interface CarouselProps {
-  scrollNumber?: number;
-  gap?: number;
-  funcss?: string;
-  children: ReactNode;
-  showDashes?: boolean;
-}
-
-const Carousel: React.FC<CarouselProps> = ({
-  scrollNumber = 320,
-  gap = 0.5,
-  funcss = '',
-  showDashes = true,
-  children,
-}) => {
-  const scrollRef = useRef<HTMLDivElement | null>(null);
-  const [scrollPosition, setScrollPosition] = useState<'start' | 'middle' | 'end'>('start');
-  const [isPhone, setIsPhone] = useState(false);
-
-  useEffect(() => {
-    if (isTouchDevice()) {
-      setIsPhone(true);
-    } else {
-      setIsPhone(false);
-    }
-  }, []);
-
-  // Track scroll position
-  const handleScroll = () => {
-    const container = scrollRef.current;
-    if (!container) return;
-
-    const { scrollLeft, scrollWidth, clientWidth } = container;
-    const maxScrollLeft = scrollWidth - clientWidth;
-
-    if (scrollLeft === 0) {
-      setScrollPosition('start');
-    } else if (scrollLeft >= maxScrollLeft - 10) {
-      setScrollPosition('end');
-    } else {
-      setScrollPosition('middle');
-    }
-  };
-
-  const scroll = (direction: 'left' | 'right') => {
-    const container = scrollRef.current;
-    if (!container) return;
-
-    container.scrollBy({
-      left: direction === 'left' ? -scrollNumber : scrollNumber,
-      behavior: 'smooth',
-    });
-  };
-
-  useEffect(() => {
-    const container = scrollRef.current;
-    if (container) {
-      container.addEventListener('scroll', handleScroll);
-      return () => container.removeEventListener('scroll', handleScroll);
-    }
-  }, []);
-
-  return (
-    <div className={`carousel-wrapper ${funcss}`}>
-      <RowFlex gap={1} wrap="nowrap" alignItems="center">
-        {!isPhone && (
-          <div>
-            <Circle onClick={() => scroll('left')}>
-              <PiCaretLeft size={24} />
-            </Circle>
-          </div>
-        )}
-
-        <div
-          ref={scrollRef}
-          className={`carousel-container scrollbar-hide w-full`}
-          style={{
-            width: '100%',
-            gap: gap + 'rem',
-            overflowX: 'auto',
-            display: 'flex',
-            scrollSnapType: 'x mandatory',
-            scrollBehavior: 'smooth',
-          }}
-        >
-          {React.Children.map(children, (child) => (
-            <div className="carousel-item" style={{ flexShrink: 0 }}>
-              <div className="carousel-card">{child}</div>
-            </div>
-          ))}
-        </div>
-
-        {!isPhone && (
-          <div>
-            <Circle onClick={() => scroll('right')}>
-              <PiCaretRight size={24} />
-            </Circle>
-          </div>
-        )}
-      </RowFlex>
-
-      {/* Dashes below the carousel */}
-      {
-        showDashes && (
-          <div className="center padding-top-10">
-          <RowFlex gap={0.5} justify="center">
-            {['start', 'middle', 'end'].map((pos) => (
-              <div
-              className={'pointer '}
-                key={pos}
-                onClick={() => {
-                  if(pos === 'start') {
-                   scroll('left')
-                  } else if(pos === 'middle') {
-                    scrollRef.current?.scrollTo({
-                      left: scrollRef.current?.scrollWidth / 2,
-                      behavior: 'smooth',
-                    });
-                  } else if(pos === 'end') {
-                    scroll('right')
-                  }
-                }}
-                style={{
-                  width: '10px',
-                  height: '10px',
-                  background: scrollPosition === pos ? 'var(--primary)' : 'var(--borderColor)',
-                  borderRadius: '50%',
-                  transform: scrollPosition === pos ? 'scale(1.3)' : 'scale(0.9)',
-                  transition: 'transform 0.3s ease, background 0.3s ease',
-                }}
-              />
-            ))}
-          </RowFlex>
-        </div> 
-        )
-      }
-    </div>
-  );
-};
-
-export default Carousel;

package/ui/chart/Bar.tsx

@@ -1,121 +0,0 @@
-'use client';
-
-import React from 'react';
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  Tooltip,
-  Legend,
-  CartesianGrid,
-  ResponsiveContainer,
-} from 'recharts';
-
-type DataItem = {
-  label: string;
-  [key: string]: any;
-};
-
-type ChartSeries = {
-  dataKey: string;
-  label?: string;
-  color?: string; // CSS variable name (e.g. 'primary') or hex
-};
-
-interface BarsProps {
-  data: DataItem[];
-  series: ChartSeries[];
-
-  // Style and behavior
-  showGrid?: boolean;
-  showLegend?: boolean;
-  showXAxis?: boolean;
-  showYAxis?: boolean;
-  funcss?: string;
-  barRadius?: number;
-  barSize?: number;
-  width?: number | string;
-  height?: number | string;
-  margin?: { top?: number; right?: number; left?: number; bottom?: number };
-
-  // Axis custom props
-  xAxisProps?: any;
-  yAxisProps?: any;
-
-  // Tooltip and legend customization
-  tooltipFormatter?: (value: any, name: string, props: any) => React.ReactNode;
-  legendProps?: any;
-}
-
-// Resolve CSS variables
-const getCssVar = (varName: string): string => {
-  if (typeof window === 'undefined') return '';
-  return getComputedStyle(document.documentElement).getPropertyValue(varName)?.trim() || '';
-};
-
-const resolveColor = (color?: string): string => {
-  if (!color) return getCssVar('--primary') || '#8884d8';
-  if (color.startsWith('#')) return color;
-  return getCssVar(`--${color}`) || color;
-};
-
-// Custom Tooltip
-const CustomTooltip = ({ active, payload, label }: any) => {
-  if (active && payload && payload.length) {
-    return (
-      <div className="dark raised round-edge p-2 text-sm">
-        <div className="text-bold">{label}</div>
-        {payload.map((entry: any, index: number) => (
-          <div key={index} style={{ lineHeight: 1 }}>
-            {entry.name}: <span className="font-semibold">{entry.value}</span>
-          </div>
-        ))}
-      </div>
-    );
-  }
-  return null;
-};
-
-const Bars: React.FC<BarsProps> = ({
-  data,
-  series,
-  showGrid = true,
-  showLegend = true,
-  showXAxis = true,
-  showYAxis = false,
-  barRadius = 6,
-  funcss,
-  barSize = 30,
-  width = '100%',
-  height = "100%",
-  margin = { top: 10, right: 30, left: 0, bottom: 20 },
-  xAxisProps = {},
-  yAxisProps = {},
-  tooltipFormatter,
-  legendProps = {},
-}) => {
-  return (
-    <ResponsiveContainer className={funcss || ``} width={width} height={height}>
-      <BarChart data={data} margin={margin}>
-        {showGrid && <CartesianGrid strokeDasharray="3 3" />}
-        {showXAxis && <XAxis dataKey="label" {...xAxisProps} />}
-        {showYAxis && <YAxis {...yAxisProps} />}
-        <Tooltip content={<CustomTooltip />} formatter={tooltipFormatter} />
-        {showLegend && <Legend {...legendProps} />}
-        {series.map((s) => (
-          <Bar
-            key={s.dataKey}
-            dataKey={s.dataKey}
-            name={s.label || s.dataKey}
-            fill={resolveColor(s.color)}
-            radius={[barRadius, barRadius, 0, 0]}
-            barSize={barSize}
-          />
-        ))}
-      </BarChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default Bars;

package/ui/chart/Line.tsx

@@ -1,186 +0,0 @@
-'use client';
-
-import React from 'react';
-import {
-  AreaChart,
-  Area,
-  XAxis,
-  YAxis,
-  Tooltip,
-  Legend,
-  CartesianGrid,
-  ResponsiveContainer,
-} from 'recharts';
-
-type DataItem = {
-  label: string;
-  [key: string]: any;
-};
-
-type ChartSeries = {
-  dataKey: string;
-  label?: string;
-  color?: string;
-  strokeWidth?: number;
-  dot?: boolean;
-  fromColor?: string;
-  toColor?: string;
-};
-
-interface AreaChartProps {
-  data: DataItem[];
-  series: ChartSeries[];
-  fromColor?: string;
-  toColor?: string;
-  id?: string;
-
-  // Display controls
-  showGrid?: boolean;
-  horizontalLines?: boolean;
-  showLegend?: boolean;
-  showXAxis?: boolean;
-  showYAxis?: boolean;
-
-  // Appearance controls
-  funcss?: string;
-  curveType?: 'linear' | 'monotone' | 'step' | 'basis';
-  height?: number | string;
-  width?: number | string;
-  margin?: { top?: number; right?: number; left?: number; bottom?: number };
-
-  // Axis controls
-  dy?: number;
-  xAxisProps?: any;
-  yAxisProps?: any;
-
-  // Tooltip / Legend
-  tooltipFormatter?: (value: any, name: string, props: any) => React.ReactNode;
-  legendProps?: any;
-}
-
-// CSS var resolver
-const getCssVar = (varName: string): string => {
-  if (typeof window === 'undefined') return '';
-  return getComputedStyle(document.documentElement).getPropertyValue(`--${varName}`)?.trim() || '';
-};
-
-// Color resolver
-const resolveStrokeColor = (color?: string): string => {
-  if (!color) return getCssVar('primary') || '#8884d8';
-  if (color.startsWith('#')) return color;
-  return getCssVar(color) || color;
-};
-
-// Tooltip
-const CustomTooltip = ({ active, payload, label }: any) => {
-  if (active && payload && payload.length) {
-    return (
-      <div className="dark raised round-edge p-2 text-sm">
-        <div className="text-bold">{label}</div>
-        {payload.map((entry: any, index: number) => (
-          <div key={index} style={{ lineHeight: 1 }}>
-            {entry.name}: <span className="font-semibold">{entry.value}</span>
-          </div>
-        ))}
-      </div>
-    );
-  }
-  return null;
-};
-
-const Lines: React.FC<AreaChartProps> = ({
-  data,
-  id,
-  series,
-  fromColor,
-  toColor,
-  dy,
-  showGrid = true,
-  horizontalLines = false,
-  showLegend = true,
-  showXAxis = true,
-  showYAxis = false,
-  funcss,
-  curveType = 'monotone',
-  height = "100%",
-  width = '100%',
-  margin = { top: 10, right: 30, left: 0, bottom: 20 },
-  xAxisProps = {},
-  yAxisProps = {},
-  tooltipFormatter,
-  legendProps = {},
-}) => {
-  const gradientId = id || 'colorUv';
-
-  return (
-    <ResponsiveContainer width={width} height={height} className={funcss}>
-      <AreaChart data={data} margin={margin}>
-        {/* Gradient Fill */}
-        <defs>
-          <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
-            <stop
-              offset="5%"
-              stopColor={getCssVar(fromColor || 'primary')}
-              stopOpacity={0.8}
-            />
-            <stop
-              offset="95%"
-              stopColor={getCssVar(toColor || 'primary200')}
-              stopOpacity={0}
-            />
-          </linearGradient>
-        </defs>
-
-        {/* Grid */}
-        {showGrid && <CartesianGrid strokeDasharray="3 3" />}
-        {!showGrid && horizontalLines && (
-          <CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} />
-        )}
-
-        {/* Axes */}
-        {showXAxis && (
-          <XAxis
-            interval={0}
-            padding={{ left: 10, right: 10 }}
-            fontSize="0.8rem"
-            strokeWidth={horizontalLines ? 0 : 0.2}
-            dataKey="label"
-            angle={-35}
-            dy={dy ?? 10}
-            {...xAxisProps}
-          />
-        )}
-        {showYAxis && (
-          <YAxis
-            interval={0}
-            strokeWidth={horizontalLines ? 0 : 0.2}
-            fontSize="0.8rem"
-            {...yAxisProps}
-          />
-        )}
-
-        {/* Tooltip & Legend */}
-        <Tooltip content={<CustomTooltip />} formatter={tooltipFormatter} />
-        {showLegend && <Legend {...legendProps} />}
-
-        {/* Area series */}
-        {series.map((s, index) => (
-          <Area
-            key={s.dataKey}
-            type={curveType}
-            dataKey={s.dataKey}
-            name={s.label || s.dataKey}
-            stroke={resolveStrokeColor(s.color)}
-            fill={`url(#${gradientId})`}
-            fillOpacity={1}
-            strokeWidth={s.strokeWidth || 2}
-            dot={s.dot !== false ? { r: 4 } : false}
-            activeDot={{ r: 8 }}
-          />
-        ))}
-      </AreaChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default Lines;

package/ui/chart/Pie.tsx

@@ -1,127 +0,0 @@
-'use client';
-
-import React from 'react';
-import {
-  PieChart as RePieChart,
-  Pie,
-  Cell,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
-} from 'recharts';
-
-type PieDataItem = {
-  label: string;
-  value: number;
-  color?: string;
-};
-
-interface PieChartProps {
-  data: PieDataItem[];
-  donut?: boolean;
-  showLegend?: boolean;
-  funcss?: string;
-  width?: number | string;
-  height?: number | string;
-  outerRadius?: number;
-  innerRadius?: number;
-  tooltipFormatter?: (value: any, name: string, props: any) => React.ReactNode;
-  legendProps?: any;
-}
-
-// Get CSS variable value from :root
-const getCssVar = (varName: string): string => {
-  if (typeof window === 'undefined') return '';
-  return (
-    getComputedStyle(document.documentElement)
-      .getPropertyValue(`--${varName}`)
-      ?.trim() || ''
-  );
-};
-
-// Resolve color from CSS var or fallback
-const resolveColor = (input?: string, fallback = '#8884d8') => {
-  if (!input) return getCssVar('primary') || fallback;
-  if (input.startsWith('#')) return input;
-  return getCssVar(input) || input;
-};
-
-// Custom Tooltip
-const CustomTooltip = ({ active, payload, label }: any) => {
-  if (active && payload && payload.length) {
-    return (
-      <div className="dark raised round-edge p-2 text-sm">
-        <div className="text-bold">{payload[0].name}</div>
-        <div style={{ lineHeight: 1 }}>
-          Count: <span className="font-semibold">{payload[0].value}</span>
-        </div>
-      </div>
-    );
-  }
-  return null;
-};
-
-const ChartPie: React.FC<PieChartProps> = ({
-  data,
-  donut = false,
-  showLegend = true,
-  funcss = '',
-  width,
-  height,
-  outerRadius = 100,
-  innerRadius,
-  tooltipFormatter,
-  legendProps = {},
-}) => {
-  const chart = (
-    <RePieChart
-      width={typeof width === 'number' ? width : undefined}
-      height={typeof height === 'number' ? height : undefined}
-    >
-      <Tooltip content={<CustomTooltip />} formatter={tooltipFormatter} />
-      {showLegend && <Legend {...legendProps} />}
-      <Pie
-        data={data}
-        dataKey="value"
-        nameKey="label"
-        cx="50%"
-        cy="50%"
-        outerRadius={outerRadius}
-        innerRadius={donut ? innerRadius ?? outerRadius * 0.6 : 0}
-        label={false} // <-- Hide slice value labels
-        labelLine={false} // <-- Remove line pointers
-      >
-        {data.map((entry, index) => (
-          <Cell
-            key={`cell-${index}`}
-            fill={resolveColor(entry.color)}
-            stroke="#ffffff"
-            strokeWidth={1}
-          />
-        ))}
-      </Pie>
-    </RePieChart>
-  );
-
-  if (!width && !height) {
-    return (
-      <ResponsiveContainer width="100%" height={300} className={funcss}>
-        {chart}
-      </ResponsiveContainer>
-    );
-  }
-
-  return (
-    <div
-      className={funcss}
-      style={{
-        width: typeof width === 'number' ? `${width}px` : width || '100%',
-        height: typeof height === 'number' ? `${height}px` : height || '300px',
-      }}
-    >
-      {chart}
-    </div>
-  );
-};
-
-export default ChartPie;

package/ui/container/Container.tsx

@@ -1,38 +0,0 @@
-'use client'; 
-import { ReactNode, CSSProperties, HTMLProps } from 'react';
-import * as React from 'react';
-
-interface ContainerProps extends HTMLProps<HTMLDivElement> {
-  children?: ReactNode;
-  funcss?: string;
-  margin?: string;
-  padding?: string;
-  customStyle?: CSSProperties;
-}
-
-const Container: React.FC<ContainerProps> = ({
-  children,
-  funcss,
-  margin,
-  padding,
-  customStyle,
-  id,
-  ...rest
-}) => {
-  return (
-    <div
-      id={id}
-      className={`container ${funcss}`}
-      style={{
-        margin: margin || "",
-        padding: padding || "",
-        ...customStyle
-      }}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default Container;