fiboui 1.0.2 → 2.1.0

package/src/content/Progress/index.ts

@@ -1,378 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { BaseProps } from '../../core/types';
-
-type ProgressVariant = 'default' | 'striped' | 'labeled' | 'circular' | 'segments' | 'knob' | 'steps' | 'chevron' | 'floating' | 'pagination' | 'timeline';
-
-interface ProgressItem {
-    title?: string;
-    description?: string;
-    date?: string;
-}
-
-const ProgressInner = React.memo((props: any) => {
-    const { 
-        value, max, color, height, variant = 'default', 
-        label, subLabel, items = [],
-        className, style, ...rest 
-    } = props;
-
-    const percentage = Math.min(100, Math.max(0, (value / max) * 100));
-    const mainColor = color || '#3B82F6';
-
-    if (variant === 'circular') {
-        const size = typeof height === 'number' ? height : 64; 
-        const strokeWidth = 8;
-        const radius = (size - strokeWidth) / 2;
-        const circumference = radius * 2 * Math.PI;
-        const offset = circumference - (percentage / 100) * circumference;
-
-        return React.createElement('div', {
-            className: `relative inline-flex items-center justify-center ${className}`,
-            style: { width: size, height: size, ...style },
-            ...rest
-        }, [
-            React.createElement('svg', {
-                key: 'svg',
-                className: 'transform -rotate-90',
-                width: size,
-                height: size
-            }, [
-                React.createElement('circle', {
-                    key: 'track',
-                    className: 'text-gray-100',
-                    stroke: 'currentColor',
-                    strokeWidth: strokeWidth,
-                    fill: 'transparent',
-                    r: radius,
-                    cx: size / 2,
-                    cy: size / 2
-                }),
-                React.createElement('circle', {
-                    key: 'prog',
-                    stroke: mainColor,
-                    strokeWidth: strokeWidth,
-                    strokeDasharray: circumference,
-                    strokeDashoffset: offset,
-                    strokeLinecap: 'round',
-                    fill: 'transparent',
-                    r: radius,
-                    cx: size / 2,
-                    cy: size / 2,
-                    className: 'transition-all duration-1000 ease-out'
-                })
-            ]),
-            React.createElement('span', {
-                key: 'label',
-                className: 'absolute text-sm font-bold text-gray-700'
-            }, label || `${Math.round(percentage)}%`)
-        ]);
-    }
-
-    if (variant === 'pagination') {
-        const count = 5;
-        const activeIndex = Math.floor((percentage / 100) * count); 
-        
-        return React.createElement('div', {
-            className: `flex items-center gap-2 ${className}`,
-            style,
-            ...rest
-        }, Array.from({ length: count }).map((_, i) => {
-            const isActive = i === activeIndex;
-            return React.createElement('div', {
-                key: i,
-                className: `h-3 rounded-full transition-all duration-300 ${isActive ? 'w-8' : 'w-3'}`,
-                style: { backgroundColor: i <= activeIndex ? mainColor : '#E5E7EB' }
-            });
-        }));
-    }
-
-    if (variant === 'timeline') {
-        const timelineItems = items.length ? items : [
-            { title: 'Order components', date: 'Done' },
-            { title: 'Draft implementation', date: 'In Progress' },
-            { title: 'Verify functionality', date: 'Pending' }
-        ];
-        const activeIndex = Math.floor((percentage / 100) * timelineItems.length);
-
-        return React.createElement('div', {
-            className: `flex flex-col relative ${className}`,
-            style,
-            ...rest
-        }, timelineItems.map((item: ProgressItem, i: number) => {
-            const isCompleted = i < activeIndex;
-            const isCurrent = i === activeIndex;
-            const isLast = i === timelineItems.length - 1;
-            
-            const statusColor = isCompleted || isCurrent ? mainColor : '#E5E7EB';
-            const iconContent = isCompleted ? React.createElement('span', {}, '✓') : (i + 1);
-
-            return React.createElement('div', {
-                key: i,
-                className: `relative flex items-start gap-4 pb-8 last:pb-0`
-            }, [
-                !isLast && React.createElement('div', {
-                    key: 'tail',
-                    className: 'absolute left-[19px] top-10 bottom-0 w-0.5 transition-colors duration-500',
-                    style: { backgroundColor: isCompleted ? mainColor : '#E5E7EB' }
-                }),
-                
-                React.createElement('div', {
-                    key: 'dot',
-                    className: `relative z-10 w-10 h-10 rounded-full flex items-center justify-center border-2 bg-white transition-all duration-300 shrink-0 text-sm font-bold shadow-sm`,
-                    style: { 
-                        borderColor: statusColor,
-                        color: isCompleted ? '#fff' : (isCurrent ? statusColor : '#9CA3AF'),
-                        backgroundColor: isCompleted ? statusColor : '#fff'
-                    }
-                }, iconContent),
-                
-                React.createElement('div', { key: 'content', className: 'pt-2' }, [
-                    React.createElement('div', { className: 'text-sm font-bold text-gray-900 leading-none' }, item.title),
-                    item.description && React.createElement('div', { className: 'text-xs text-gray-500 mt-1.5' }, item.description),
-                    item.date && React.createElement('div', { className: 'text-xs font-mono text-gray-400 mt-1' }, item.date)
-                ])
-            ]);
-        }));
-    }
-
-    if (variant === 'floating') {
-        return React.createElement('div', {
-            className: `w-full bg-white rounded-xl shadow-sm border border-gray-100 p-4 relative overflow-hidden ${className}`,
-            style,
-            ...rest
-        }, [
-            React.createElement('div', { key: 'info', className: 'flex justify-between items-center mb-3 px-1' }, [
-                React.createElement('span', { key: 'l', className: 'text-sm font-semibold text-gray-700' }, 
-                    label ? React.createElement('span', { className: 'text-blue-600 mr-2' }, `${Math.round(percentage)}%`) : null,
-                    label || 'Update in progress...'
-                ),
-                subLabel && React.createElement('span', { key: 'r', className: 'text-xs font-medium text-gray-400' }, subLabel)
-            ]),
-            React.createElement('div', {
-                key: 'track',
-                className: 'w-full bg-blue-50 h-1.5 rounded-full overflow-hidden'
-            }, React.createElement('div', {
-                className: 'h-full rounded-full transition-all duration-1000 ease-out',
-                style: { width: `${percentage}%`, backgroundColor: mainColor }
-            }))
-        ]);
-    }
-
-    if (variant === 'chevron') {
-        const steps = 3; 
-        const activeIndex = Math.floor((percentage / 100) * steps); 
-
-        return React.createElement('div', {
-            className: `flex w-full rounded-lg overflow-hidden ${className}`,
-            style,
-            ...rest
-        }, Array.from({ length: steps }).map((_, i) => {
-             const isActive = i <= activeIndex;
-             
-             return React.createElement('div', {
-                 key: i,
-                 className: `flex-1 h-10 flex items-center justify-center text-sm font-bold text-white transition-colors duration-300`,
-                 style: { 
-                     backgroundColor: isActive ? (i === activeIndex ? mainColor : '#60A5FA') : '#E5E7EB',
-                     clipPath: i === 0 
-                        ? 'polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%)' 
-                        : i === steps - 1
-                            ? 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 15% 50%)'
-                            : 'polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%)',
-                     marginLeft: i === 0 ? 0 : '-10px',
-                     paddingLeft: i === 0 ? 0 : '10px',
-                     zIndex: steps - i
-                 }
-             }, `Step ${i + 1}`);
-        }));
-    }
-
-    if (variant === 'steps') {
-        const steps = 3;
-        const activeStep = Math.ceil((percentage / 100) * steps);
-
-        return React.createElement('div', {
-            className: `w-full flex items-center justify-between relative ${className}`,
-            style: { 
-                marginTop: '1rem', 
-                ...style 
-            },
-            ...rest
-        }, [
-            React.createElement('div', {
-                key: 'line-bg',
-                className: 'absolute top-1/2 left-0 w-full h-1.5 bg-gray-200 z-0 transform -translate-y-1/2 rounded-full'
-            }),
-             React.createElement('div', {
-                key: 'line-active',
-                className: 'absolute top-1/2 left-0 h-1.5 z-0 transform -translate-y-1/2 transition-all duration-500 rounded-full',
-                style: { width: `${percentage}%`, backgroundColor: mainColor }
-            }),
-            ...Array.from({ length: steps }).map((_, i) => {
-                const stepNum = i + 1;
-                const isActive = stepNum <= activeStep;
-                const isCompleted = stepNum < activeStep;
-                
-                return React.createElement('div', {
-                    key: i,
-                    className: `relative z-10 w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold transition-all duration-300 border-4 ${isActive ? 'text-white border-white shadow-md' : 'bg-gray-100 text-gray-400 border-gray-50'}`,
-                    style: { backgroundColor: isActive ? mainColor : undefined }
-                }, isCompleted ? React.createElement('span', {}, '✔') : stepNum);
-            })
-        ]);
-    }
-
-    const heightVal = height || ((variant === 'labeled' || variant === 'knob') ? 12 : 12);
-    
-    if (variant === 'segments') {
-        const segCount = 10;
-        const activeSegs = Math.round((percentage / 100) * segCount);
-        
-        return React.createElement('div', {
-            className: `flex gap-1.5 w-full ${className}`,
-            style,
-            ...rest
-        }, 
-            Array.from({ length: segCount }).map((_, i) => React.createElement('div', {
-                key: i,
-                className: `h-3 flex-1 rounded-sm transition-all duration-300 first:rounded-l-full last:rounded-r-full`,
-                style: { 
-                    height: height || 12,
-                    backgroundColor: i < activeSegs ? mainColor : '#E5E7EB' 
-                }
-            }))
-        );
-    }
-
-    let innerContent: ReactElement | null = null;
-    
-    if (variant === 'striped') {
-        innerContent = React.createElement('div', {
-            className: 'w-full h-full opacity-30 animate-[stripes_1s_linear_infinite]', 
-            style: {
-                backgroundImage: 'linear-gradient(45deg,rgba(255,255,255,.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.25) 75%,transparent 75%,transparent)',
-                backgroundSize: '20px 20px'
-            }
-        });
-    }
-
-    const labelElement = variant === 'labeled' ? React.createElement('div', {
-        className: 'absolute -top-12 transform -translate-x-1/2 bg-slate-800 text-white text-xs font-bold py-1.5 px-3 rounded-lg shadow-xl whitespace-nowrap',
-        style: { left: `${percentage}%` }
-    }, [
-        label || `${Math.round(percentage)}%`,
-        React.createElement('div', { key: 'arrow', className: 'absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-2 h-2 bg-slate-800 rotate-45' })
-    ]) : null;
-
-    const knobElement = variant === 'knob' ? React.createElement('div', {
-        className: 'absolute top-1/2 right-0 w-7 h-7 bg-white rounded-full shadow-lg border-4 transform translate-x-1/2 -translate-y-1/2 flex items-center justify-center',
-        style: { borderColor: mainColor }
-    }, React.createElement('div', { className: 'w-1.5 h-1.5 rounded-full', style: { backgroundColor: mainColor } })) : null;
-
-    return React.createElement('div', {
-        className: `relative w-full ${variant === 'labeled' ? 'mt-8' : ''}`, 
-        ...rest
-    }, [
-        labelElement,
-        React.createElement('div', {
-            key: 'track',
-            className: `w-full bg-slate-100 rounded-full ${className}`, 
-            style: {
-                width: '100%',
-                height: heightVal,
-                ...style
-            }
-        }, 
-            React.createElement('div', {
-                className: `h-full transition-all duration-1000 ease-out rounded-full flex items-center justify-center relative`,
-                style: {
-                    width: `${percentage}%`,
-                    backgroundColor: mainColor
-                }
-            }, [innerContent, knobElement])
-        )
-    ]);
-});
-
-class ProgressBuilder extends FiboBuilder {
-  private _value: number = 0;
-  private _max: number = 100;
-  private _color?: string;
-  private _height?: number | string;
-  private _variant: ProgressVariant = 'default';
-  private _label?: string;
-  private _subLabel?: string;
-  private _items?: ProgressItem[];
-
-  value(current: number): this {
-    this._value = current;
-    return this;
-  }
-
-  max(total: number): this {
-    this._max = total;
-    return this;
-  }
-
-  color(hex: string): this {
-    this._color = hex;
-    return this;
-  }
-
-  height(val: number | string): this {
-    this._height = val;
-    return this;
-  }
-
-  variant(val: ProgressVariant): this {
-    this._variant = val;
-    return this;
-  }
-
-  label(text: string): this {
-    this._label = text;
-    return this;
-  }
-
-  subLabel(text: string): this {
-    this._subLabel = text;
-    return this;
-  }
-
-  items(list: ProgressItem[]): this {
-    this._items = list;
-    return this;
-  }
-
-  build(): ReactElement {
-    const props = {
-        value: this._value,
-        max: this._max,
-        color: this._color,
-        height: this._height,
-        variant: this._variant,
-        label: this._label,
-        subLabel: this._subLabel,
-        items: this._items,
-        className: this.getClassName(),
-        style: this.getStyle(),
-        ...this._props
-    };
-    
-    return React.createElement(ProgressInner, props);
-  }
-}
-
-
-export const Progress = createBuilder(ProgressBuilder);
-
-export interface ProgressProps extends BaseProps {
-  value: number;
-  max?: number;
-  color?: string;
-  variant?: ProgressVariant;
-  label?: string;
-  subLabel?: string;
-  items?: ProgressItem[];
-}

package/src/content/Skeleton/index.ts

@@ -1,71 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { BaseProps } from '../../core/types';
-
-const SkeletonInner = React.memo((props: any) => {
-    const { width, height, shape, className, style, ...rest } = props;
-
-    const baseClasses = ['animate-pulse', 'bg-gray-200', 'loading-skeleton'];
-    
-    if (shape === 'circle') baseClasses.push('rounded-full');
-    else if (shape === 'rounded-sm') baseClasses.push('rounded-sm');
-    else if (shape === 'rounded-md') baseClasses.push('rounded-md');
-    else if (shape === 'rounded-lg') baseClasses.push('rounded-lg');
-    else if (shape === 'square') baseClasses.push('rounded-none');
-    else baseClasses.push('rounded'); 
-
-    return React.createElement('div', {
-        className: [...baseClasses, className].filter(Boolean).join(' '),
-        style: {
-            width: width,
-            height: height,
-            ...style
-        },
-        ...rest
-    });
-});
-
-type SkeletonShape = 'circle' | 'square' | 'rounded' | 'rounded-sm' | 'rounded-md' | 'rounded-lg';
-
-class SkeletonBuilder extends FiboBuilder {
-  private _width: string | number = '100%';
-  private _height: string | number = '20px';
-  private _shape: SkeletonShape = 'rounded';
-
-  width(value: string | number): this {
-    this._width = value;
-    return this;
-  }
-
-  height(value: string | number): this {
-    this._height = value;
-    return this;
-  }
-
-  shape(value: SkeletonShape): this {
-    this._shape = value;
-    return this;
-  }
-
-  build(): ReactElement {
-    const props = {
-        width: this._width,
-        height: this._height,
-        shape: this._shape,
-        className: this.getClassName(),
-        style: this.getStyle(),
-        ...this._props
-    };
-    
-    return React.createElement(SkeletonInner, props);
-  }
-}
-
-
-export const Skeleton = createBuilder(SkeletonBuilder);
-
-export interface SkeletonProps extends BaseProps {
-  width?: string | number;
-  height?: string | number;
-  shape?: SkeletonShape;
-}

package/src/content/Spinner/index.ts

@@ -1,139 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { BaseProps } from '../../core/types';
-
-type SpinnerVariant = 'circle' | 'dots' | 'pulse' | 'blocks';
-type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl' | number;
-
-const SpinnerInner = React.memo((props: any) => {
-    const { size, color, variant = 'circle', className, style, ...rest } = props;
-    
-    const sizeMap: Record<string, number> = {
-        sm: 16,
-        md: 24,
-        lg: 32,
-        xl: 48
-    };
-    
-    const pixelSize = typeof size === 'number' ? size : (sizeMap[size] || 24);
-    const mainColor = color || "currentColor";
-
-    
-    const containerProps = {
-        className: `fibo-spinner ${className}`,
-        style: { width: pixelSize, height: pixelSize, ...style },
-        ...rest
-    };
-
-    if (variant === 'dots') {
-        return React.createElement('div', { ...containerProps, className: `${containerProps.className} flex items-center justify-between` },
-            [0, 1, 2].map(i => React.createElement('div', {
-                key: i,
-                className: 'w-[25%] h-[25%] rounded-full animate-bounce',
-                style: { 
-                    backgroundColor: mainColor,
-                    animationDelay: `${i * 0.1}s`
-                }
-            }))
-        );
-    }
-
-    if (variant === 'pulse') {
-        return React.createElement('div', { ...containerProps, className: `${containerProps.className} relative flex items-center justify-center` },
-            [
-                React.createElement('div', { 
-                    key: 'ring',
-                    className: 'absolute inset-0 rounded-full opacity-75 animate-ping',
-                    style: { backgroundColor: mainColor }
-                }),
-                React.createElement('div', { 
-                    key: 'dot',
-                    className: 'relative rounded-full h-[75%] w-[75%]',
-                    style: { backgroundColor: mainColor }
-                })
-            ]
-        );
-    }
-
-    if (variant === 'blocks') {
-        return React.createElement('div', { ...containerProps, className: `${containerProps.className} grid grid-cols-2 gap-[10%] p-[10%]` },
-            [0, 1, 2, 3].map(i => React.createElement('div', {
-                key: i,
-                className: 'w-full h-full bg-current animate-pulse',
-                style: { 
-                    backgroundColor: mainColor,
-                    animationDelay: `${i * 0.15}s`,
-                    opacity: 0.6
-                }
-            }))
-        );
-    }
-
-    
-    return React.createElement(
-        'div',
-        { ...containerProps, className: `${containerProps.className} animate-spin` },
-        React.createElement("svg", {
-            xmlns: "http://www.w3.org/2000/svg",
-            fill: "none",
-            viewBox: "0 0 24 24",
-            style: { width: '100%', height: '100%' }
-        }, 
-        React.createElement("circle", {
-            className: "opacity-20",
-            cx: "12",
-            cy: "12",
-            r: "10",
-            stroke: mainColor,
-            strokeWidth: "4"
-        }),
-        React.createElement("path", {
-            className: "",
-            fill: mainColor,
-            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-        }))
-    );
-});
-
-class SpinnerBuilder extends FiboBuilder {
-  private _size: SpinnerSize = 'md';
-  private _color?: string;
-  private _variant: SpinnerVariant = 'circle';
-
-  size(value: SpinnerSize): this {
-    this._size = value;
-    return this;
-  }
-
-  color(value: string): this {
-    this._color = value;
-    return this;
-  }
-
-  variant(value: SpinnerVariant): this {
-    this._variant = value;
-    return this;
-  }
-
-  build(): ReactElement {
-    const props = {
-        size: this._size,
-        color: this._color,
-        variant: this._variant,
-        className: this.getClassName(),
-        style: this.getStyle(),
-        ...this._props
-    };
-    
-    return React.createElement(SpinnerInner, props);
-  }
-}
-
-
-export const Spinner = createBuilder(SpinnerBuilder);
-
-export interface SpinnerProps extends BaseProps {
-  size?: SpinnerSize;
-  color?: string;
-  variant?: SpinnerVariant;
-}

package/src/content/Text/index.ts

@@ -1,74 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { BaseProps, TextType } from '../../core/types';
-
-const TextInner = React.memo((props: any) => {
-    const { text, type, className, style, ...rest } = props;
-    
-    const elementMap: Record<TextType, string> = {
-      h1: 'h1',
-      h2: 'h2',
-      h3: 'h3',
-      h4: 'h4',
-      h5: 'h5',
-      h6: 'h6',
-      body: 'p',
-      caption: 'span',
-      label: 'label',
-    };
-
-    return React.createElement(
-      elementMap[type as TextType],
-      {
-        className: `fibo-text fibo-text-${type} ${className}`,
-        style,
-        ...rest,
-      },
-      text
-    );
-});
-
-class TextBuilder extends FiboBuilder {
-  private _text: string = '';
-  private _type: TextType = 'body';
-
-  constructor(text: string = '') {
-    super();
-    this._text = text;
-  }
-
-  text(value: string): this {
-    this._text = value;
-    return this;
-  }
-
-  type(type: TextType): this {
-    this._type = type;
-    return this;
-  }
-
-  variant(variant: TextType): this {
-    this._type = variant;
-    return this;
-  }
-
-  build(): ReactElement {
-     const props = {
-         text: this._text,
-         type: this._type,
-         className: this.getClassName(),
-         style: this.getStyle(),
-         ...this._props
-     };
-     return React.createElement(TextInner, props);
-  }
-}
-
-
-export const Text = createBuilder(TextBuilder);
-
-export interface TextProps extends BaseProps {
-  text: string;
-  type?: TextType;
-  variant?: TextType;
-}

package/src/content/index.ts

@@ -1,9 +0,0 @@
-export * from './Avatar';
-export * from './Badge';
-export * from './Text';
-export * from './Label';
-export * from './Image';
-export * from './Spinner';
-export * from './Skeleton';
-export * from './Alert';
-export * from './Progress';