fiboui 1.0.2 → 2.0.0

package/src/layout/Scaffold/index.ts

@@ -1,133 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { ProviderWrapper } from '../../core/StateWrapper';
-
-
-
-interface ScaffoldConfig {
-  theme?: any;
-  locale?: string;
-  providers?: Record<string, any>;
-  className?: string;
-  style?: React.CSSProperties;
-  children?: React.ReactNode;
-}
-
-const ScaffoldInner = React.memo((props: ScaffoldConfig) => {
-  const {
-    theme,
-    locale,
-    providers = {},
-    className,
-    style,
-    children,
-  } = props;
-
-  
-  const allProviders = new Map<string, any>();
-
-  
-  if (theme) {
-    allProviders.set('theme', theme);
-  }
-
-  
-  if (locale) {
-    allProviders.set('locale', locale);
-  }
-
-  
-  Object.entries(providers).forEach(([key, value]) => {
-    allProviders.set(key, value);
-  });
-
-  
-  if (allProviders.size > 0) {
-    return React.createElement(
-      ProviderWrapper,
-      { 
-        providers: allProviders,
-        children: React.createElement(
-          'div',
-          {
-            className: `fibo-scaffold ${className || ''}`,
-            style: {
-              minHeight: '100vh',
-              display: 'flex',
-              flexDirection: 'column',
-              ...style,
-            },
-          },
-          children
-        )
-      }
-    );
-  }
-
-  
-  return React.createElement(
-    'div',
-    {
-      className: `fibo-scaffold ${className || ''}`,
-      style: {
-        minHeight: '100vh',
-        display: 'flex',
-        flexDirection: 'column',
-        ...style,
-      },
-    },
-    children
-  );
-});
-
-class ScaffoldBuilder extends FiboBuilder {
-  private _theme?: any;
-  private _locale?: string;
-  private _customProviders: Record<string, any> = {};
-
-  
-  theme(theme: any): this {
-    this._theme = theme;
-    return this;
-  }
-
-  
-  locale(locale: string): this {
-    this._locale = locale;
-    return this;
-  }
-
-  
-  providers(providers: Record<string, any>): this {
-    this._customProviders = { ...this._customProviders, ...providers };
-    return this;
-  }
-
-  
-  provider(key: string, value: any): this {
-    this._customProviders[key] = value;
-    return this;
-  }
-
-  build(): ReactElement {
-    const props: ScaffoldConfig = {
-      theme: this._theme,
-      locale: this._locale,
-      providers: this._customProviders,
-      className: this.getClassName(),
-      style: this.getStyle(),
-      children: this.processChildren(),
-    };
-
-    return React.createElement(ScaffoldInner, props);
-  }
-}
-
-
-export const Scaffold = createBuilder(ScaffoldBuilder);
-
-export interface ScaffoldProps {
-  theme?: any;
-  locale?: string;
-  providers?: Record<string, any>;
-}

package/src/layout/ScrollView/index.ts

@@ -1,67 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { BaseProps } from '../../core/types';
-
-
-type ScrollDirection = 'vertical' | 'horizontal' | 'both';
-type ScrollbarVisibility = 'hidden' | 'visible' | 'auto';
-
-class ScrollViewBuilder extends FiboBuilder {
-  private _direction: ScrollDirection = 'vertical';
-  private _scrollbar: ScrollbarVisibility = 'auto';
-
-  direction(direction: ScrollDirection): this {
-    this._direction = direction;
-    return this;
-  }
-
-  horizontal(): this {
-    this._direction = 'horizontal';
-    return this;
-  }
-
-  vertical(): this {
-    this._direction = 'vertical';
-    return this;
-  }
-
-  scrollbar(visibility: ScrollbarVisibility): this {
-    this._scrollbar = visibility;
-    return this;
-  }
-
-  build(): ReactElement {
-    const scrollStyles: React.CSSProperties = {
-        overflowX: this._direction === 'horizontal' || this._direction === 'both' ? 'auto' : 'hidden',
-        overflowY: this._direction === 'vertical' || this._direction === 'both' ? 'auto' : 'hidden',
-        WebkitOverflowScrolling: 'touch', 
-        display: 'flex',
-        flexDirection: this._direction === 'horizontal' ? 'row' : 'column',
-        ...this.getStyle()
-    };
-
-    const classNames = [...this.getClassName().split(' ')];
-    
-    if (this._scrollbar === 'hidden') {
-        classNames.push('scrollbar-hide'); 
-        
-        scrollStyles.scrollbarWidth = 'none'; 
-        
-        scrollStyles['msOverflowStyle'] = 'none'; 
-    }
-
-    return React.createElement('div', {
-        className: classNames.join(' '),
-        style: scrollStyles,
-        ...this._props
-    }, ...this._children);
-  }
-}
-
-
-export const ScrollView = createBuilder(ScrollViewBuilder);
-
-export interface ScrollViewProps extends BaseProps {
-  direction?: ScrollDirection;
-  scrollbar?: ScrollbarVisibility;
-}

package/src/layout/Sidebar/index.ts

@@ -1,56 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-
-
-
-
-
-const SidebarInner = React.memo((props: any) => {
-    const { width = 260, collapsed, className, style, children, ...rest } = props;
-
-    
-    const currentWidth = collapsed ? 80 : width;
-
-    return React.createElement(
-        'aside',
-        {
-            className: `flex flex-col border-r border-gray-200 bg-white transition-all duration-300 h-full ${className || ''}`,
-            style: { width: currentWidth, minWidth: currentWidth, ...style },
-            ...rest
-        },
-        children
-    );
-});
-
-class SidebarBuilder extends FiboBuilder {
-    private _width: number | string = 260;
-    private _collapsed: boolean = false;
-
-    width(width: number | string): this {
-        this._width = width;
-        return this;
-    }
-
-    collapsible(collapsed: boolean = false): this {
-        this._collapsed = collapsed;
-        return this;
-    }
-
-    build(): ReactElement {
-        const props = {
-            width: this._width,
-            collapsed: this._collapsed,
-            className: this.getClassName(),
-            style: this.getStyle(),
-            children: this.processChildren(),
-            ...this._props
-        };
-        return React.createElement(SidebarInner, props);
-    }
-}
-
-
-export const Sidebar = createBuilder(SidebarBuilder);
-
-
-

package/src/layout/Spacer/index.ts

@@ -1,46 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { BaseProps } from '../../core/types';
-
-class SpacerBuilder extends FiboBuilder {
-  private _height?: string | number;
-  private _width?: string | number;
-
-  height(value: string | number): this {
-    this._height = value;
-    return this;
-  }
-
-  width(value: string | number): this {
-    this._width = value;
-    return this;
-  }
-
-  build(): ReactElement {
-    const style = this.getStyle();
-    
-    if (this._height) {
-      style.height = typeof this._height === 'number' ? `${this._height}px` : this._height;
-    }
-    
-    if (this._width) {
-      style.width = typeof this._width === 'number' ? `${this._width}px` : this._width;
-    }
-
-    const className = this.getClassName();
-
-    return React.createElement('div', {
-      className: `fibo-spacer ${className}`,
-      style,
-      ...this._props,
-    });
-  }
-}
-
-
-export const Spacer = createBuilder(SpacerBuilder);
-
-export interface SpacerProps extends BaseProps {
-  height?: string | number;
-  width?: string | number;
-}

package/src/layout/StakentComponents.tsx

@@ -1,57 +0,0 @@
-import { Box } from '../structure/Box';
-import { Button } from '../interactive/Button';
-
-export const StakentCard = ({ className = "", style = {} }: any): any => {
-    return Box()
-        .className(`bg-[#0B0C15] border border-white/5 rounded-[32px] overflow-hidden relative ${className}`)
-        .style({ backgroundColor: '#0B0C15', ...style });
-};
-
-export const StakentButton = ({ text, icon, variant = 'primary', className = "", onClick }: any): React.ReactElement => {
-    let baseClass = "rounded-xl font-bold transition-all duration-200 flex items-center justify-center gap-2";
-    
-    if (variant === 'primary') {
-        baseClass += " bg-[#6366f1] text-white shadow-[0_0_20px_rgba(99,102,241,0.4)] hover:shadow-[0_0_25px_rgba(99,102,241,0.6)] hover:-translate-y-0.5";
-    } else if (variant === 'secondary') {
-        baseClass += " bg-white/5 border border-white/10 text-white hover:bg-white/10";
-    } else if (variant === 'outline') {
-        baseClass += " border border-white/10 text-gray-400 hover:text-white hover:border-white/20";
-    } else if (variant === 'ghost') {
-        baseClass += " text-gray-400 hover:text-white hover:bg-white/5";
-    } else if (variant === 'gradient') {
-        baseClass += " bg-gradient-to-r from-[#818CF8] to-[#6366f1] text-white shadow-lg shadow-indigo-500/30 border-none";
-    }
-
-    return Button(text)
-        .icon(icon)
-        .className(`${baseClass} ${className}`)
-        .onPress(onClick)
-        .variant("text") 
-        .build();
-};
-
-export const StakentSidebarItem = ({ label, icon, active = false }: any): React.ReactElement => {
-    if (active) {
-        return Button(label)
-            .icon(icon ? Box().className(`${icon} w-5 h-5 text-white`).build() : null)
-            .className("w-full justify-start text-sm font-bold text-white bg-[#6366f1] shadow-[0_4px_20px_rgba(99,102,241,0.4)] rounded-xl mb-1 py-3 px-4")
-            .build();
-    }
-    return Button(label)
-        .icon(icon ? Box().className(`${icon} w-5 h-5 text-gray-400 group-hover:text-white transition-colors`).build() : null)
-        .variant("ghost")
-        .className("w-full justify-start text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5 rounded-xl group py-3 px-4")
-        .build();
-};
-
-export const StakentBadge = ({ text, type = 'default' }: any): React.ReactElement => {
-    let style = "text-[10px] px-2 py-0.5 rounded border font-bold uppercase tracking-wider";
-    if (type === 'hot') {
-        style = "bg-[#FF3B30] text-white border-none text-[9px] px-1.5 py-0.5 rounded-md shadow-lg shadow-red-500/20";
-    } else if (type === 'beta') {
-         style = "bg-[#6366f1]/10 text-[#818CF8] border-[#6366f1]/20";
-    } else if (type === 'new') {
-        style = "bg-white text-black border-none";
-    }
-    return Box().className(style).children(text).build();
-}

package/src/layout/index.ts

@@ -1,11 +0,0 @@
-export * from './Container';
-export * from './Row';
-export * from './Column';
-export * from './Spacer';
-export * from './Line';
-export * from './Center';
-export * from './ScrollView';
-export * from './Header';
-export * from './Sidebar';
-export * from './DashboardLayout';
-export * from './Scaffold';

package/src/structure/Banner/index.ts

@@ -1,92 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { BaseProps, StatusType } from '../../core/types';
-
-const BannerInner = React.memo((props: any) => {
-    const { status, title, subtitle, className, style, ...rest } = props;
-    
-    return React.createElement(
-      'div',
-      {
-        className,
-        style,
-        ...rest,
-      },
-      React.createElement(
-        'div',
-        { className: 'flex flex-col gap-1' },
-        title &&
-          React.createElement(
-            'h4',
-            {
-              className: 'font-semibold text-sm uppercase tracking-wide opacity-90',
-            },
-            title
-          ),
-        subtitle &&
-          React.createElement(
-            'p',
-            {
-              className: 'opacity-80 text-sm',
-            },
-            subtitle
-          )
-      )
-    );
-});
-
-class BannerBuilder extends FiboBuilder {
-  private _status: StatusType = 'info';
-  private _title: string = '';
-  private _subtitle?: string;
-
-  constructor(title: string = '') {
-    super();
-    this._title = title;
-  }
-
-  status(value: StatusType): this {
-    this._status = value;
-    return this;
-  }
-
-  title(value: string): this {
-    this._title = value;
-    return this;
-  }
-
-  subtitle(value: string): this {
-    this._subtitle = value;
-    return this;
-  }
-
-  build(): ReactElement {
-    const classes = [
-      'fibo-banner',
-      `fibo-banner-${this._status}`,
-      ...this._classNames,
-    ];
-
-    const className = classes.filter(Boolean).join(' ');
-    
-    const props = {
-        status: this._status,
-        title: this._title,
-        subtitle: this._subtitle,
-        className: className,
-        style: this.getStyle(),
-        ...this._props
-    };
-
-    return React.createElement(BannerInner, props);
-  }
-}
-
-
-export const Banner = createBuilder(BannerBuilder);
-
-export interface BannerProps extends BaseProps {
-  status: StatusType;
-  title: string;
-  subtitle?: string;
-}

package/src/structure/Box/index.ts

@@ -1,46 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { ChildrenProps } from '../../core/types';
-
-const BoxInner = React.memo((props: any) => {
-    const { className, style, children, ...rest } = props;
-    return React.createElement(
-      'div',
-      {
-        className,
-        style,
-        ...rest,
-      },
-      ...children
-    );
-});
-
-class BoxBuilder extends FiboBuilder {
-
-  build(): ReactElement {
-    const classes = [
-      'fibo-box',
-      ...this._classNames,
-    ];
-
-    const className = classes.filter(Boolean).join(' ');
-    const style = this.getStyle();
-    
-    // Universal builder handles observer logic now.
-    // processChildren handles function execution if present.
-    const children = this.processChildren();
-    
-    const props = {
-        className,
-        style: style,
-        children: children,
-        ...this._props
-    };
-
-    return React.createElement(BoxInner, props);
-  }
-}
-
-export const Box = createBuilder(BoxBuilder);
-
-export interface BoxProps extends ChildrenProps {}

package/src/structure/Card/index.ts

@@ -1,113 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { BaseProps } from '../../core/types';
-
-const CardInner = React.memo((props: any) => {
-    const { text, subtitle, number, color, className, style, children, ...rest } = props;
-    
-    return React.createElement(
-      'div',
-      {
-        className: `rounded-[24px] shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_8px_30px_rgb(0,0,0,0.08)] transition-shadow duration-300 border-none p-4 ${className || ''}`,
-        style: { backgroundColor: '#ffffff', ...style },
-        ...rest,
-      },
-      React.createElement(
-        'div',
-        { className: 'flex flex-col gap-2' },
-        text &&
-          React.createElement(
-            'h3',
-            {
-              className: 'font-semibold text-[var(--fibo-on-surface-variant)] text-sm uppercase tracking-wide',
-            },
-            text
-          ),
-        number &&
-          React.createElement(
-            'p',
-            {
-              className: 'font-bold text-[var(--fibo-on-surface)] text-3xl',
-            },
-            number
-          ),
-        subtitle &&
-          React.createElement(
-            'p',
-            {
-              className: 'text-[var(--fibo-on-surface-variant)] text-xs',
-            },
-            subtitle
-          ),
-        ...children
-      )
-    );
-});
-
-class CardBuilder extends FiboBuilder {
-  private _text: string = '';
-  private _subtitle?: string;
-  private _number?: string;
-  private _color?: string;
-
-  text(value: string): this {
-    this._text = value;
-    return this;
-  }
-
-  subtitle(value: string): this {
-    this._subtitle = value;
-    return this;
-  }
-
-  number(value: string): this {
-    this._number = value;
-    return this;
-  }
-
-  color(value: string): this {
-    this._color = value;
-    return this;
-  }
-
-  build(): ReactElement {
-    const colorClasses: Record<string, string> = {
-      green: 'border-l-green-500',
-      orange: 'border-l-orange-500',
-      red: 'border-l-red-500',
-      blue: 'border-l-blue-500',
-      purple: 'border-l-purple-500',
-    };
-
-    const className = [
-      'fibo-card',
-      this._color ? `border-l-4 ${colorClasses[this._color]}` : '',
-      ...this._classNames,
-    ]
-      .filter(Boolean)
-      .join(' ');
-
-    const props = {
-        text: this._text,
-        subtitle: this._subtitle,
-        number: this._number,
-        color: this._color,
-        className: className,
-        style: this.getStyle(),
-        children: this.processChildren(),
-        ...this._props
-    };
-
-    return React.createElement(CardInner, props);
-  }
-}
-
-
-export const Card = createBuilder(CardBuilder);
-
-export interface CardProps extends BaseProps {
-  text: string;
-  subtitle?: string;
-  number?: string;
-  color?: string;
-}