fiboui 1.0.1 → 2.0.0

package/src/interactive/Textarea/index.ts

@@ -1,129 +0,0 @@
-import React, { ReactElement, ChangeEvent } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { BaseProps } from '../../core/types';
-
-
-const TextareaInner = React.memo((props: any) => {
-    const uniqueId = React.useId();
-    const inputId = props.id || uniqueId;
-    
-    const { 
-        containerClass, 
-        containerStyle, 
-        label, 
-        error, 
-        ...inputRest 
-    } = props;
-
-    
-    
-    
-    return React.createElement(
-      'div',
-      { className: containerClass, style: containerStyle },
-      React.createElement('textarea', {
-          id: inputId,
-          className: 'fibo-textarea-input',
-          ...inputRest
-      }),
-      label && React.createElement(
-        'label',
-        { 
-            htmlFor: inputId,
-            className: 'fibo-textarea-label' 
-        },
-        label
-      ),
-      error && React.createElement(
-        'span',
-        { className: 'text-[var(--fibo-error)] text-xs mt-1 ml-1' },
-        error
-      )
-    );
-});
-
-class TextareaBuilder extends FiboBuilder {
-  private _value: string = '';
-  private _label: string = '';
-  private _placeholder: string = '';
-  private _disabled: boolean = false;
-  private _rows: number = 4;
-  private _error?: string;
-  private _resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical';
-  private _onChange?: (value: string) => void;
-
-  value(val: string): this {
-    this._value = val;
-    return this;
-  }
-
-  label(val: string): this {
-    this._label = val;
-    return this;
-  }
-
-  placeholder(val: string): this {
-    this._placeholder = val;
-    return this;
-  }
-
-  disabled(val: boolean = true): this {
-    this._disabled = val;
-    return this;
-  }
-
-  rows(val: number): this {
-    this._rows = val;
-    return this;
-  }
-
-  resize(val: 'none' | 'vertical' | 'horizontal' | 'both'): this {
-    this._resize = val;
-    return this;
-  }
-
-  error(val: string): this {
-    this._error = val;
-    return this;
-  }
-
-  onChange(handler: (value: string) => void): this {
-    this._onChange = handler;
-    return this;
-  }
-
-  build(): ReactElement {
-    const containerClass = ['fibo-textarea-container', ...this._classNames]
-      .filter(Boolean)
-      .join(' ');
-
-    const props = {
-        containerClass,
-        containerStyle: { width: '100%', ...this.getStyle() },
-        label: this._label,
-        error: this._error,
-        rows: this._rows,
-        value: this._value,
-        placeholder: this._placeholder || ' ', 
-        disabled: this._disabled,
-        style: { resize: this._resize },
-        onChange: (e: ChangeEvent<HTMLTextAreaElement>) => {
-            this._onChange?.(e.target.value);
-        },
-        ...this._props
-    };
-
-    return React.createElement(TextareaInner, props);
-  }
-}
-
-
-export const Textarea = createBuilder(TextareaBuilder);
-
-export interface TextareaProps extends BaseProps {
-  value: string;
-  label?: string;
-  placeholder?: string;
-  onChange?: (value: string) => void;
-  rows?: number;
-}

package/src/interactive/index.ts

@@ -1,8 +0,0 @@
-export * from './Button';
-export * from './TextField';
-export * from './Switch';
-export * from './Checkbox';
-export * from './RadioGroup';
-export * from './Textarea';
-export * from './Select';
-export * from './Combobox';

package/src/layout/Center/index.ts

@@ -1,34 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { ChildrenProps } from '../../core/types';
-
-class CenterBuilder extends FiboBuilder {
-  build(): ReactElement {
-    const classes = [
-      'fibo-center',
-      'flex',
-      'items-center',
-      'justify-center',
-      ...this._classNames,
-    ];
-
-    const className = classes.filter(Boolean).join(' ');
-    const style = this.getStyle();
-    const children = this.processChildren();
-
-    return React.createElement(
-      'div',
-      {
-        className,
-        style,
-        ...this._props,
-      },
-      ...children
-    );
-  }
-}
-
-
-export const Center = createBuilder(CenterBuilder);
-
-export interface CenterProps extends ChildrenProps {}

package/src/layout/Column/index.ts

@@ -1,101 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { ChildrenProps, MainAxisAlignment, CrossAxisAlignment } from '../../core/types';
-
-class ColumnBuilder extends FiboBuilder {
-  private _mainAxisAlignment: MainAxisAlignment = 'start';
-  private _crossAxisAlignment: CrossAxisAlignment = 'start';
-  private _spacing?: string | number;
-  private _size?: 'small' | 'medium' | 'large';
-
-  mainAxisAlignment(alignment: MainAxisAlignment): this {
-    this._mainAxisAlignment = alignment;
-    return this;
-  }
-
-  crossAxisAlignment(alignment: CrossAxisAlignment): this {
-    this._crossAxisAlignment = alignment;
-    return this;
-  }
-
-  spacing(value: string | number): this {
-    this._spacing = value;
-    return this;
-  }
-
-  size(size: 'small' | 'medium' | 'large'): this {
-    this._size = size;
-    return this;
-  }
-
-  build(): ReactElement {
-    const alignmentMap: Record<MainAxisAlignment, string> = {
-      start: 'justify-start',
-      center: 'justify-center',
-      end: 'justify-end',
-      spaceBetween: 'justify-between',
-      spaceAround: 'justify-around',
-      spaceEvenly: 'justify-evenly',
-    };
-
-    const crossAlignmentMap: Record<CrossAxisAlignment, string> = {
-      start: 'items-start',
-      center: 'items-center',
-      end: 'items-end',
-      stretch: 'items-stretch',
-    };
-
-    const sizeMap = {
-      small: 'flex-[0.3]',
-      medium: 'flex-1',
-      large: 'flex-[1.5]',
-    };
-
-    const classes = [
-      'fibo-column',
-      'flex',
-      'flex-col',
-      alignmentMap[this._mainAxisAlignment],
-      crossAlignmentMap[this._crossAxisAlignment],
-      this._size ? sizeMap[this._size] : '',
-      ...this._classNames,
-    ];
-
-    const style = this.getStyle();
-
-    if (this._spacing) {
-      if (typeof this._spacing === 'number') {
-        style.gap = `${this._spacing}px`;
-      } else {
-        if (!isNaN(Number(this._spacing))) {
-             style.gap = `${Number(this._spacing) * 4}px`;
-        } else {
-             style.gap = this._spacing;
-        }
-      }
-    }
-
-    const className = classes.filter(Boolean).join(' ');
-    const children = this.processChildren();
-
-    return React.createElement(
-      'div',
-      {
-        className,
-        style,
-        ...this._props,
-      },
-      ...children
-    );
-  }
-}
-
-
-export const Column = createBuilder(ColumnBuilder);
-
-export interface ColumnProps extends ChildrenProps {
-  mainAxisAlignment?: MainAxisAlignment;
-  crossAxisAlignment?: CrossAxisAlignment;
-  spacing?: string | number;
-  size?: 'small' | 'medium' | 'large';
-}

package/src/layout/Container/index.ts

@@ -1,28 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { ChildrenProps } from '../../core/types';
-
-class ContainerBuilder extends FiboBuilder {
-  build(): ReactElement {
-    const className = this.getClassName();
-    const style = this.getStyle();
-    const children = this.processChildren();
-
-    return React.createElement(
-      'div',
-      {
-        className: `fibo-container ${className}`,
-        style,
-        ...this._props,
-      },
-      ...children
-    );
-  }
-}
-
-
-export const Container = createBuilder(ContainerBuilder);
-
-export interface ContainerProps extends ChildrenProps {
-  maxWidth?: string | number;
-}

package/src/layout/DashboardLayout/index.ts

@@ -1,106 +0,0 @@
-import React, { ReactElement, ReactNode, useState } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-
-
-
-
-
-
-
-
-
-const DashboardLayoutInner = React.memo((props: any) => {
-    const { sidebar, header, children, className, style, ...rest } = props;
-    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-
-    return React.createElement(
-        'div',
-        {
-            className: `h-full w-full bg-[#0B0C15] overflow-hidden relative ${className || ''}`,
-            style,
-            ...rest
-        },
-        
-        isMobileMenuOpen && React.createElement('div', {
-            className: 'fixed inset-0 z-40 bg-black/50 backdrop-blur-sm transition-opacity lg:hidden',
-            onClick: () => setIsMobileMenuOpen(false)
-        }),
-
-        
-        
-        React.createElement('button', {
-            className: 'lg:hidden fixed top-4 right-4 z-50 p-2 rounded-lg bg-[#1A1B23] border border-white/10 text-white shadow-lg',
-            onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen)
-        }, 
-            React.createElement('div', { className: isMobileMenuOpen ? 'i-heroicons-x-mark w-6 h-6' : 'i-heroicons-bars-3 w-6 h-6' })
-        ),
-
-        
-        React.createElement(
-            'div',
-            {
-                className: 'grid h-full w-full lg:grid-cols-[260px_1fr] transition-all duration-300' 
-            },
-
-            
-            React.createElement(
-                'aside',
-                {
-                    className: `
-                        fixed inset-y-0 left-0 z-50 w-[260px] bg-[#0B0C15] border-r border-white/5 transition-transform duration-300 transform
-                        lg:relative lg:translate-x-0 
-                        ${isMobileMenuOpen ? 'translate-x-0 shadow-2xl' : '-translate-x-full'}
-                    `
-                },
-                sidebar
-            ),
-
-            
-            React.createElement(
-                'main',
-                {
-                    className: 'flex flex-col min-w-0 h-full overflow-hidden relative'
-                },
-                
-                header && React.createElement('div', { className: 'flex-shrink-0' }, header),
-                
-                
-                React.createElement(
-                    'div',
-                    { className: 'flex-1 overflow-y-auto scrollbar-hide p-4 lg:p-0' },
-                    children
-                )
-            )
-        )
-    );
-});
-
-class DashboardLayoutBuilder extends FiboBuilder {
-    private _sidebar?: ReactNode;
-    private _header?: ReactNode;
-
-    sidebar(component: ReactNode): this {
-        this._sidebar = component;
-        return this;
-    }
-
-    header(component: ReactNode): this {
-        this._header = component;
-        return this;
-    }
-
-    build(): ReactElement {
-        const props = {
-            sidebar: this._sidebar,
-            header: this._header,
-            className: this.getClassName(),
-            style: this.getStyle(),
-            children: this.processChildren(),
-            ...this._props
-        };
-        return React.createElement(DashboardLayoutInner, props);
-    }
-}
-
-
-export const DashboardLayout = createBuilder(DashboardLayoutBuilder);

package/src/layout/Header/index.ts

@@ -1,50 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-
-
-
-
-
-const HeaderInner = React.memo((props: any) => {
-    const { height = 64, sticky, className, style, children, ...rest } = props;
-
-    return React.createElement(
-        'header',
-        {
-            className: `flex items-center px-6 border-b border-gray-200 bg-white/80 backdrop-blur-md z-10 w-full ${sticky ? 'sticky top-0' : ''} ${className || ''}`,
-            style: { height, minHeight: height, ...style },
-            ...rest
-        },
-        children
-    );
-});
-
-class HeaderBuilder extends FiboBuilder {
-    private _height: number | string = 64;
-    private _sticky: boolean = false;
-
-    height(height: number | string): this {
-        this._height = height;
-        return this;
-    }
-
-    sticky(enable: boolean = true): this {
-        this._sticky = enable;
-        return this;
-    }
-
-    build(): ReactElement {
-        const props = {
-            height: this._height,
-            sticky: this._sticky,
-            className: this.getClassName(),
-            style: this.getStyle(),
-            children: this.processChildren(),
-            ...this._props
-        };
-        return React.createElement(HeaderInner, props);
-    }
-}
-
-
-export const Header = createBuilder(HeaderBuilder);

package/src/layout/Line/index.ts

@@ -1,41 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { ChildrenProps } from '../../core/types';
-
-class LineBuilder extends FiboBuilder {
-  private _sizeHeight?: string;
-
-  sizeHeight(value: string): this {
-    this._sizeHeight = value;
-    return this;
-  }
-
-  build(): ReactElement {
-    const classes = ['fibo-line', 'flex', 'flex-row', ...this._classNames];
-    const className = classes.filter(Boolean).join(' ');
-    const style = this.getStyle();
-    
-    if (this._sizeHeight) {
-      style.height = this._sizeHeight;
-    }
-
-    const children = this.processChildren();
-
-    return React.createElement(
-      'div',
-      {
-        className,
-        style,
-        ...this._props,
-      },
-      ...children
-    );
-  }
-}
-
-
-export const Line = createBuilder(LineBuilder);
-
-export interface LineProps extends ChildrenProps {
-  sizeHeight?: string;
-}

package/src/layout/Row/index.ts

@@ -1,93 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { ChildrenProps, MainAxisAlignment, CrossAxisAlignment } from '../../core/types';
-
-class RowBuilder extends FiboBuilder {
-  private _mainAxisAlignment: MainAxisAlignment = 'start';
-  private _crossAxisAlignment: CrossAxisAlignment = 'start';
-  private _spacing?: string | number;
-
-  mainAxisAlignment(alignment: MainAxisAlignment): this {
-    this._mainAxisAlignment = alignment;
-    return this;
-  }
-
-  crossAxisAlignment(alignment: CrossAxisAlignment): this {
-    this._crossAxisAlignment = alignment;
-    return this;
-  }
-
-  spacing(value: string | number): this {
-    this._spacing = value;
-    return this;
-  }
-
-  items(children: ReactElement[]): this {
-    this.children(children);
-    return this;
-  }
-
-  build(): ReactElement {
-    const alignmentMap: Record<MainAxisAlignment, string> = {
-      start: 'justify-start',
-      center: 'justify-center',
-      end: 'justify-end',
-      spaceBetween: 'justify-between',
-      spaceAround: 'justify-around',
-      spaceEvenly: 'justify-evenly',
-    };
-
-    const crossAlignmentMap: Record<CrossAxisAlignment, string> = {
-      start: 'items-start',
-      center: 'items-center',
-      end: 'items-end',
-      stretch: 'items-stretch',
-    };
-
-    const classes = [
-      'fibo-row',
-      'flex',
-      'flex-row',
-      alignmentMap[this._mainAxisAlignment],
-      crossAlignmentMap[this._crossAxisAlignment],
-      ...this._classNames,
-    ];
-
-    const style = this.getStyle();
-
-    if (this._spacing) {
-      if (typeof this._spacing === 'number') {
-        style.gap = `${this._spacing}px`;
-      } else {
-        
-        if (!isNaN(Number(this._spacing))) {
-             style.gap = `${Number(this._spacing) * 4}px`; 
-        } else {
-             style.gap = this._spacing; 
-        }
-      }
-    }
-
-    const className = classes.filter(Boolean).join(' ');
-    const children = this.processChildren();
-
-    return React.createElement(
-      'div',
-      {
-        className,
-        style,
-        ...this._props,
-      },
-      ...children
-    );
-  }
-}
-
-
-export const Row = createBuilder(RowBuilder);
-
-export interface RowProps extends ChildrenProps {
-  mainAxisAlignment?: MainAxisAlignment;
-  crossAxisAlignment?: CrossAxisAlignment;
-  spacing?: string | number;
-}