fiboui 1.0.2 → 2.0.0

package/dist/structure/index.d.ts

@@ -1,9 +0,0 @@
-export * from './Box';
-export * from './Card';
-export * from './List';
-export * from './Table';
-export * from './Tags';
-export * from './Banner';
-export * from './cards';
-export * from './Collapse';
-export * from './Grid';

package/dist/theme/cupertino.d.ts

@@ -1,3 +0,0 @@
-import { FiboTheme } from './types';
-
-export declare const cupertinoTheme: FiboTheme;

package/dist/theme/index.d.ts

@@ -1,5 +0,0 @@
-export * from './types';
-export * from './material';
-export * from './cupertino';
-export * from './web';
-export * from './provider';

package/dist/theme/material.d.ts

@@ -1,3 +0,0 @@
-import { FiboTheme } from './types';
-
-export declare const materialTheme: FiboTheme;

package/dist/theme/provider.d.ts

@@ -1,16 +0,0 @@
-import { ReactNode } from 'react';
-import { FiboTheme } from './types';
-import { FiboThemeName } from '../core/types';
-
-interface FiboThemeContextValue {
-    theme: FiboTheme;
-    themeName: FiboThemeName;
-    setTheme: (name: FiboThemeName) => void;
-}
-interface FiboThemeProviderProps {
-    theme?: FiboThemeName;
-    children: ReactNode;
-}
-export declare function FiboThemeProvider({ theme: initialTheme, children }: FiboThemeProviderProps): import("react/jsx-runtime").JSX.Element;
-export declare function useFiboTheme(): FiboThemeContextValue;
-export {};

package/dist/theme/types.d.ts

@@ -1,57 +0,0 @@
-import { FiboThemeName, TextStyle } from '../core/types';
-
-export interface ThemeColors {
-    primary: string;
-    primaryVariant?: string;
-    secondary: string;
-    secondaryVariant?: string;
-    background: string;
-    surface: string;
-    error: string;
-    success?: string;
-    warning?: string;
-    info?: string;
-    onPrimary: string;
-    onSecondary: string;
-    onBackground: string;
-    onSurface: string;
-    onError: string;
-}
-export interface ThemeTypography {
-    h1: TextStyle;
-    h2: TextStyle;
-    h3: TextStyle;
-    h4: TextStyle;
-    h5: TextStyle;
-    h6: TextStyle;
-    body: TextStyle;
-    caption: TextStyle;
-    label: TextStyle;
-}
-export interface ThemeSpacing {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-}
-export interface ThemeBorderRadius {
-    sm: string;
-    md: string;
-    lg: string;
-    full: string;
-}
-export interface ThemeShadows {
-    sm: string;
-    md: string;
-    lg: string;
-}
-export interface FiboTheme {
-    name: FiboThemeName;
-    colors: ThemeColors;
-    typography: ThemeTypography;
-    spacing: ThemeSpacing;
-    borderRadius: ThemeBorderRadius;
-    shadows: ThemeShadows;
-    fontFamily: string;
-}

package/dist/theme/web.d.ts

@@ -1,3 +0,0 @@
-import { FiboTheme } from './types';
-
-export declare const webTheme: FiboTheme;

package/src/content/Alert/index.ts

@@ -1,110 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { BaseProps, StatusType } from '../../core/types';
-
-import { Icons } from '../../core/icons';
-
-const AlertInner = React.memo((props: any) => {
-    const { title, description, intent = 'info', className, style, ...rest } = props;
-    const currentIntent = intent as StatusType;
-
-    
-    const intentStyles: Record<StatusType, string> = {
-        info: 'bg-blue-500 text-white',
-        success: 'bg-emerald-500 text-white',
-        warning: 'bg-orange-400 text-white', 
-        error: 'bg-rose-500 text-white'
-    };
-    
-    
-    const iconBgStyles: Record<StatusType, string> = {
-        info: 'bg-blue-600',
-        success: 'bg-emerald-600',
-        warning: 'bg-orange-500',
-        error: 'bg-rose-600'
-    };
-
-    const iconMap: Record<StatusType, ReactElement> = {
-        info: Icons.Info || React.createElement('span', {}, '?'),
-        success: Icons.Check || React.createElement('span', {}, '✔'),
-        warning: Icons.Search || React.createElement('span', {}, '!'), 
-        error: Icons.Close || React.createElement('span', {}, 'x')
-    };
-
-    const baseClass = `relative overflow-hidden flex items-start gap-4 p-5 rounded-3xl shadow-lg border-none ${intentStyles[currentIntent]}`;
-
-    return React.createElement('div', {
-        className: `${baseClass} ${className}`,
-        style,
-        ...rest
-    }, [
-        
-        React.createElement('div', { 
-            key: 'blob1', 
-            className: 'absolute -top-6 -right-6 w-24 h-24 rounded-full bg-white opacity-10 pointer-events-none' 
-        }),
-        React.createElement('div', { 
-            key: 'blob2', 
-            className: 'absolute bottom-[-10px] left-10 w-12 h-12 rounded-full bg-black opacity-5 pointer-events-none' 
-        }),
-        React.createElement('div', { 
-            key: 'blob3', 
-            className: 'absolute top-10 right-20 w-8 h-8 rounded-full bg-white opacity-10 pointer-events-none' 
-        }),
-
-        
-        React.createElement('div', { 
-            key: 'icon-wrapper', 
-            className: `relative z-10 shrink-0 w-10 h-10 rounded-full flex items-center justify-center shadow-sm ${iconBgStyles[currentIntent]}` 
-        }, React.cloneElement(iconMap[currentIntent] as ReactElement, { width: 20, height: 20, strokeWidth: 3 })),
-
-        
-        React.createElement('div', { key: 'content', className: 'relative z-10 flex flex-col gap-1.5 pt-0.5' }, [
-            title && React.createElement('h5', { key: 'title', className: 'font-bold text-lg leading-none tracking-tight' }, title),
-            description && React.createElement('p', { key: 'desc', className: 'text-sm font-medium opacity-90 leading-relaxed' }, description)
-        ])
-    ]);
-});
-
-class AlertBuilder extends FiboBuilder {
-  private _title: string = '';
-  private _description?: string;
-  private _intent: StatusType = 'info';
-
-  title(value: string): this {
-    this._title = value;
-    return this;
-  }
-
-  description(value: string): this {
-    this._description = value;
-    return this;
-  }
-
-  intent(value: StatusType): this {
-    this._intent = value;
-    return this;
-  }
-
-  build(): ReactElement {
-    const props = {
-        title: this._title,
-        description: this._description,
-        intent: this._intent,
-        className: this.getClassName(),
-        style: this.getStyle(),
-        ...this._props
-    };
-    
-    return React.createElement(AlertInner, props);
-  }
-}
-
-
-export const Alert = createBuilder(AlertBuilder);
-
-export interface AlertProps extends BaseProps {
-  title: string;
-  description?: string;
-  intent?: StatusType;
-}

package/src/content/Avatar/index.ts

@@ -1,116 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { BaseProps } from '../../core/types';
-import { Box } from '../../structure/Box';
-
-type AvatarShape = 'circle' | 'rounded' | 'square';
-type AvatarStatus = 'none' | 'online' | 'offline' | 'busy';
-
-const AvatarInner = React.memo((props: any) => {
-    const { image, size, border, shape, status, className, style } = props;
-
-    const sizeValue = typeof size === 'number' ? `${size}px` : size;
-
-    const borderRadiusMap: Record<AvatarShape, string> = {
-        circle: '50%',
-        rounded: '24%', 
-        square: '0'
-    };
-
-    const statusColors: Record<AvatarStatus, string> = {
-        none: 'transparent',
-        online: '#10B981', 
-        offline: '#9CA3AF', 
-        busy: '#EF4444'     
-    };
-
-    return Box()
-      .className(className)
-      .style({
-        position: 'relative',
-        width: sizeValue,
-        height: sizeValue,
-        borderRadius: borderRadiusMap[shape as AvatarShape],
-        backgroundImage: `url(${image})`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        border: border,
-        boxShadow: border !== 'none' ? '0 2px 8px rgba(0,0,0,0.05)' : 'none', 
-        ...style
-      })
-      .children(
-          status !== 'none' ? 
-            Box().style({
-                position: 'absolute',
-                bottom: '-2%', 
-                right: '-2%',
-                width: '28%', 
-                height: '28%',
-                minWidth: '10px',
-                minHeight: '10px',
-                backgroundColor: statusColors[status as AvatarStatus],
-                borderRadius: '50%',
-                border: '3px solid #ffffff', 
-                boxSizing: 'content-box' 
-            }).build()
-            : null
-      )
-      .build();
-});
-
-class AvatarBuilder extends FiboBuilder {
-  private _image: string = '';
-  private _size: string | number = 40;
-  private _border: string = 'none';
-  private _shape: AvatarShape = 'circle';
-  private _status: AvatarStatus = 'none';
-
-  image(url: string): this {
-    this._image = url;
-    return this;
-  }
-
-  size(value: string | number): this {
-    this._size = value;
-    return this;
-  }
-
-  border(value: string): this {
-    this._border = value;
-    return this;
-  }
-
-  shape(value: AvatarShape): this {
-    this._shape = value;
-    return this;
-  }
-
-  status(value: AvatarStatus): this {
-    this._status = value;
-    return this;
-  }
-
-  build(): ReactElement {
-    const props = {
-        image: this._image,
-        size: this._size,
-        border: this._border,
-        shape: this._shape,
-        status: this._status,
-        className: this.getClassName(),
-        style: this.getStyle()
-    };
-    return React.createElement(AvatarInner, props);
-  }
-}
-
-
-export const Avatar = createBuilder(AvatarBuilder);
-
-export interface AvatarProps extends BaseProps {
-  image: string;
-  size?: string | number;
-  border?: string;
-  shape?: AvatarShape;
-  status?: AvatarStatus;
-}

package/src/content/Badge/index.ts

@@ -1,162 +0,0 @@
-import React, { ReactElement, ReactNode } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { BaseProps } from '../../core/types';
-import { Box } from '../../structure/Box';
-import { Text } from '../Text';
-import { Row } from '../../layout/Row';
-
-
-type BadgeVariant = 'neutral' | 'accent' | 'outline' | 'glass' | 'solid' | 'dot';
-type BadgeIntent = 'none' | 'success' | 'warning' | 'error' | 'info';
-type BadgeShape = 'pill' | 'rounded';
-
-const BadgeInner = React.memo((props: any) => {
-    const { text, icon, variant, intent, shape, className, style } = props;
-
-    
-    const intentColors: Record<BadgeIntent, { bg: string, text: string, border?: string }> = {
-        none: { bg: '#F9FAFB', text: '#6B7280', border: '#E5E7EB' }, 
-        success: { bg: '#ECFDF5', text: '#059669', border: 'transparent' }, 
-        warning: { bg: '#FFFBEB', text: '#D97706', border: 'transparent' }, 
-        error: { bg: '#FFF1F2', text: '#E11D48', border: 'transparent' },   
-        info: { bg: '#EFF6FF', text: '#2563EB', border: 'transparent' }      
-    };
-
-    
-    const variantStyles: Record<BadgeVariant, any> = {
-      neutral: { backgroundColor: '#F9FAFB', color: '#6B7280', border: '1px solid #E5E7EB' },
-      accent: { backgroundColor: '#EFF6FF', color: '#3B82F6', border: 'none' }, 
-      outline: { backgroundColor: 'transparent', color: '#FFFFFF', border: '1px solid rgba(255,255,255,0.3)' },
-      
-      glass: { 
-          backgroundColor: 'rgba(255, 255, 255, 0.85)', 
-          backdropFilter: 'blur(12px)', 
-          color: '#111827',
-          border: '1px solid rgba(255, 255, 255, 0.4)' 
-      },
-      
-      
-      solid: { backgroundColor: '#111827', color: '#FFFFFF', border: 'none' }, 
-      dot: { backgroundColor: 'transparent', color: '#6B7280', border: '1px solid #E5E7EB', padding: '4px 10px' } 
-    };
-
-    let finalStyle = { ...variantStyles[variant as BadgeVariant] };
-
-    
-    if (intent !== 'none') {
-        const colors = intentColors[intent as BadgeIntent];
-        
-        if (variant === 'solid') {
-             
-             const solidIntentMap: Record<BadgeIntent, string> = {
-                 none: '#111827', success: '#059669', warning: '#D97706', error: '#E11D48', info: '#2563EB'
-             };
-             finalStyle.backgroundColor = solidIntentMap[intent as BadgeIntent];
-             finalStyle.color = '#FFFFFF';
-        } else if (variant === 'dot') {
-             finalStyle.color = '#374151'; 
-             finalStyle.borderColor = '#E5E7EB';
-        } else {
-             
-             finalStyle.backgroundColor = colors.bg;
-             finalStyle.color = colors.text;
-             if (colors.border) finalStyle.border = `1px solid ${colors.border}`;
-             else finalStyle.border = 'none';
-        }
-    }
-
-    const shapeRadius: Record<BadgeShape, string> = {
-      pill: '9999px',
-      rounded: '8px'
-    };
-
-    return Box()
-      .className(className)
-      .style({
-        ...finalStyle,
-        borderRadius: shapeRadius[shape as BadgeShape],
-        padding: variant === 'dot' ? '4px 8px' : '4px 10px',
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: 'fit-content',
-        fontSize: '11px',
-        lineHeight: '1',
-        fontWeight: 600,
-        ...style
-      })
-      .children(
-        Row().gap(6).alignItems("center").children([
-          
-          variant === 'dot' && intent !== 'none' ? 
-              Box().style({ 
-                  width: '6px', 
-                  height: '6px', 
-                  borderRadius: '50%',
-                  backgroundColor: intentColors[intent as BadgeIntent].text,
-                  boxShadow: `0 0 6px ${intentColors[intent as BadgeIntent].text}66` 
-              }).build() : null,
-              
-          icon ? Box().classNames(['flex', 'items-center']).children(icon).build() : null,
-          Text(text).fontSize(12).fontWeight(600).style({ color: 'inherit' }).build()
-        ]).build()
-      )
-      .build();
-});
-
-class BadgeBuilder extends FiboBuilder {
-  private _text: string = '';
-  private _icon?: ReactNode;
-  private _variant: BadgeVariant = 'neutral';
-  private _intent: BadgeIntent = 'none';
-  private _shape: BadgeShape = 'rounded';
-
-  text(value: string): this {
-    this._text = value;
-    return this;
-  }
-
-  icon(icon: ReactNode): this {
-    this._icon = icon;
-    return this;
-  }
-
-  variant(variant: BadgeVariant): this {
-    this._variant = variant;
-    return this;
-  }
-
-  intent(intent: BadgeIntent): this {
-    this._intent = intent;
-    return this;
-  }
-
-  shape(shape: BadgeShape): this {
-    this._shape = shape;
-    return this;
-  }
-
-  build(): ReactElement {
-     const props = {
-         text: this._text,
-         icon: this._icon,
-         variant: this._variant,
-         intent: this._intent,
-         shape: this._shape,
-         className: this.getClassName(),
-         style: this.getStyle()
-     };
-     return React.createElement(BadgeInner, props);
-  }
-}
-
-
-export const Badge = createBuilder(BadgeBuilder);
-
-export interface BadgeProps extends BaseProps {
-  text: string;
-  icon?: ReactNode;
-  variant?: BadgeVariant;
-  intent?: BadgeIntent;
-  shape?: BadgeShape;
-}

package/src/content/Image/index.ts

@@ -1,137 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { BaseProps } from '../../core/types';
-
-type ImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
-type ClipShape = 'circle' | 'rounded' | 'square';
-
-const ImageInner = React.memo((props: any) => {
-    const { 
-        src, 
-        alt, 
-        fit, 
-        resizable, 
-        clipShape, 
-        frameWidth, 
-        frameHeight, 
-        className,
-        style,
-        ...rest
-    } = props;
-    
-    const finalStyle = { ...style };
-
-    finalStyle.objectFit = fit;
-
-    if (frameWidth) {
-      finalStyle.width = `${frameWidth}px`;
-    }
-
-    if (frameHeight) {
-      finalStyle.height = `${frameHeight}px`;
-    }
-
-    if (resizable) {
-      finalStyle.maxWidth = '100%';
-      finalStyle.height = 'auto';
-    }
-    
-    return React.createElement('img', {
-      src: src,
-      alt: alt,
-      className,
-      style: finalStyle,
-      ...rest,
-    });
-});
-
-class ImageBuilder extends FiboBuilder {
-  private _src: string = '';
-  private _alt: string = '';
-  private _fit: ImageFit = 'cover';
-  private _resizable: boolean = false;
-  private _clipShape?: ClipShape;
-  private _frameWidth?: number;
-  private _frameHeight?: number;
-
-  constructor(src: string = '') {
-    super();
-    this._src = src;
-  }
-
-  src(value: string): this {
-    this._src = value;
-    return this;
-  }
-
-  alt(value: string): this {
-    this._alt = value;
-    return this;
-  }
-
-  resizable(): this {
-    this._resizable = true;
-    return this;
-  }
-
-  scaledToFit(): this {
-    this._fit = 'contain';
-    return this;
-  }
-
-  scaledToFill(): this {
-    this._fit = 'cover';
-    return this;
-  }
-
-  frame(dimensions: { width: number; height: number }): this {
-    this._frameWidth = dimensions.width;
-    this._frameHeight = dimensions.height;
-    return this;
-  }
-
-  clipShape(shape: ClipShape): this {
-    this._clipShape = shape;
-    return this;
-  }
-
-  foregroundStyle(_style: string): this {
-    return this;
-  }
-
-  build(): ReactElement {
-    const classes = ['fibo-image', ...this._classNames];
-
-    if (this._clipShape === 'circle') {
-      classes.push('rounded-full');
-    } else if (this._clipShape === 'rounded') {
-      classes.push('rounded-lg');
-    }
-
-    const className = classes.filter(Boolean).join(' ');
-    
-    const props = {
-        src: this._src,
-        alt: this._alt,
-        fit: this._fit,
-        resizable: this._resizable,
-        clipShape: this._clipShape,
-        frameWidth: this._frameWidth,
-        frameHeight: this._frameHeight,
-        className: className,
-        style: this.getStyle(),
-        ...this._props
-    };
-
-    return React.createElement(ImageInner, props);
-  }
-}
-
-
-export const Image = createBuilder(ImageBuilder);
-
-export interface ImageProps extends BaseProps {
-  src: string;
-  alt?: string;
-  fit?: ImageFit;
-}

package/src/content/Label/index.ts

@@ -1,66 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { BaseProps } from '../../core/types';
-
-const LabelInner = React.memo((props: any) => {
-    const { text, htmlFor, required, className, style, ...rest } = props;
-    
-    return React.createElement(
-      'label',
-      {
-        className: `fibo-label text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${className}`,
-        htmlFor: htmlFor,
-        style: style,
-        ...rest,
-      },
-      text,
-      required && React.createElement('span', { className: 'text-red-500 ml-0.5' }, '*')
-    );
-});
-
-class LabelBuilder extends FiboBuilder {
-  private _text: string = '';
-  private _htmlFor?: string;
-  private _required: boolean = false;
-
-  constructor(text: string = '') {
-    super();
-    this._text = text;
-  }
-
-  text(value: string): this {
-    this._text = value;
-    return this;
-  }
-
-  htmlFor(id: string): this {
-    this._htmlFor = id;
-    return this;
-  }
-
-  required(val: boolean = true): this {
-    this._required = val;
-    return this;
-  }
-
-  build(): ReactElement {
-    const props = {
-        text: this._text,
-        htmlFor: this._htmlFor,
-        required: this._required,
-        className: this.getClassName(),
-        style: this.getStyle(),
-        ...this._props
-    };
-    return React.createElement(LabelInner, props);
-  }
-}
-
-
-export const Label = createBuilder(LabelBuilder);
-
-export interface LabelProps extends BaseProps {
-  text: string;
-  htmlFor?: string;
-  required?: boolean;
-}