fiboui 1.0.2 → 2.0.0

package/src/index.ts

@@ -1,8 +0,0 @@
-export * from './core';
-export * from './theme';
-export * from './layout';
-export * from './content';
-export * from './interactive';
-export * from './structure';
-
-import './styles/base.css';

package/src/interactive/Button/index.ts

@@ -1,219 +0,0 @@
-import React, { ReactElement, ReactNode } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { BaseProps, ButtonVariant } from '../../core/types';
-
-
-type ExtendedButtonVariant = ButtonVariant | 'ghost' | 'soft' | 'outline' | 'text';
-type ButtonSize = 'sm' | 'md' | 'lg';
-type ButtonShape = 'default' | 'pill' | 'square';
-
-const ButtonInner = React.memo((props: any) => {
-    const { 
-        text, 
-        variant, 
-        size, 
-        onPress, 
-        disabled, 
-        icon, 
-        shape, 
-        shadow, 
-        className, 
-        style, 
-        ...rest 
-    } = props;
-    
-    
-    const finalStyle = { ...style };
-    
-    
-    const sizeStyles: Record<ButtonSize, any> = {
-        sm: { padding: '6px 14px', fontSize: '13px', gap: '6px', height: '32px' },
-        md: { padding: '10px 22px', fontSize: '15px', gap: '8px', height: '44px' }, 
-        lg: { padding: '16px 32px', fontSize: '17px', gap: '10px', height: '56px' }
-    };
-    Object.assign(finalStyle, sizeStyles[size as ButtonSize]);
-
-    
-    if (shape === 'pill') {
-        finalStyle.borderRadius = '9999px';
-    } else if (shape === 'square') {
-        finalStyle.borderRadius = '12px'; 
-    } else {
-        finalStyle.borderRadius = '14px'; 
-    }
-
-    
-    if (shadow === 'soft') {
-        
-        finalStyle.boxShadow = '0 8px 20px -6px rgba(59, 130, 246, 0.4)';
-    }
-
-    
-    if (variant === 'ghost') {
-        finalStyle.backgroundColor = 'transparent';
-        finalStyle.color = '#4B5563';
-        finalStyle.boxShadow = 'none';
-        finalStyle.border = '1px solid transparent';
-    } 
-    else if (variant === 'text') {
-        finalStyle.backgroundColor = 'transparent';
-        finalStyle.color = '#4B5563';
-        finalStyle.boxShadow = 'none';
-        finalStyle.border = 'none';
-        finalStyle.paddingLeft = '8px';
-        finalStyle.paddingRight = '8px';
-    }
-    else if (variant === 'soft') {
-        
-        finalStyle.backgroundColor = '#EEF2FF'; 
-        finalStyle.color = '#4F46E5'; 
-        finalStyle.boxShadow = 'none';
-        finalStyle.border = 'none';
-    } else if (variant === 'outline') {
-        finalStyle.backgroundColor = 'transparent';
-        finalStyle.border = '1.5px solid #E5E7EB'; 
-        finalStyle.color = '#374151';
-        finalStyle.boxShadow = 'none';
-    }
-
-    const children = [];
-    if (icon) {
-      children.push(icon);
-    }
-    if (text) {
-      children.push(text);
-    }
-
-    return React.createElement(
-      'button',
-      {
-        className,
-        style: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            cursor: disabled ? 'not-allowed' : 'pointer',
-            opacity: disabled ? 0.6 : 1,
-            fontWeight: 600,
-            whiteSpace: 'nowrap',
-            ...finalStyle
-        },
-        onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
-          if (!disabled) {
-            
-            if (document.documentElement.classList.contains('fibo-theme-material')) {
-              const target = e.currentTarget;
-              import('../../core/effects').then(({ createRipple }) => {
-                createRipple(e, target);
-              });
-            }
-            onPress?.();
-          }
-        },
-        disabled: disabled,
-        ...rest,
-      },
-      ...children
-    );
-});
-
-class ButtonBuilder extends FiboBuilder {
-  private _text: string = '';
-  private _variant: ExtendedButtonVariant = 'elevated';
-  private _size: ButtonSize = 'md';
-  private _onPress?: () => void;
-  private _disabled: boolean = false;
-  private _icon?: ReactNode;
-  private _shape: ButtonShape = 'default';
-  private _shadow: 'none' | 'soft' = 'none';
-
-  constructor(text: string = '') {
-    super();
-    this._text = text;
-  }
-
-  text(value: string): this {
-    this._text = value;
-    return this;
-  }
-
-  variant(variant: ExtendedButtonVariant): this {
-    this._variant = variant;
-    return this;
-  }
-
-  size(size: ButtonSize): this {
-    this._size = size;
-    return this;
-  }
-
-  onPress(handler: () => void): this {
-    this._onPress = handler;
-    return this;
-  }
-
-  disabled(value: boolean = true): this {
-    this._disabled = value;
-    return this;
-  }
-
-  icon(icon: ReactNode): this {
-    this._icon = icon;
-    return this;
-  }
-
-  shape(value: ButtonShape): this {
-    this._shape = value;
-    return this;
-  }
-
-  shadow(value: 'none' | 'soft'): this {
-    this._shadow = value;
-    return this;
-  }
-
-  build(): ReactElement {
-    const className = [
-      'fibo-button',
-      `fibo-button-${this._variant}`,
-      'active:scale-[0.96]', 
-      'transform',
-      'transition-all',
-      'duration-200',
-      'ease-out',
-      ...this._classNames,
-    ]
-      .filter(Boolean)
-      .join(' ');
-
-    const props = {
-        text: this._text,
-        variant: this._variant,
-        size: this._size,
-        onPress: this._onPress,
-        disabled: this._disabled,
-        icon: this._icon,
-        shape: this._shape,
-        shadow: this._shadow,
-        className: className,
-        style: this.getStyle(),
-        ...this._props
-    };
-
-    return React.createElement(ButtonInner, props);
-  }
-}
-
-
-export const Button = createBuilder(ButtonBuilder);
-
-export interface ButtonProps extends BaseProps {
-  text: string;
-  variant?: ExtendedButtonVariant;
-  size?: ButtonSize;
-  onPress?: () => void;
-  disabled?: boolean;
-  icon?: ReactNode;
-  shape?: ButtonShape;
-  shadow?: 'none' | 'soft';
-}

package/src/interactive/Checkbox/index.ts

@@ -1,145 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { BaseProps } from '../../core/types';
-
-const CheckboxInner = React.memo((props: any) => {
-    const { 
-        checked, 
-        onChange, 
-        label, 
-        disabled, 
-        indeterminate,
-        className,
-        style
-    } = props;
-    
-    const isCheckedOrIndeterminate = checked || indeterminate;
-    
-    const baseStyle: React.CSSProperties = {
-        width: '20px',
-        height: '20px',
-        borderRadius: '6px',
-        border: isCheckedOrIndeterminate ? 'none' : '2px solid #D1D5DB',
-        backgroundColor: isCheckedOrIndeterminate ? 'var(--fibo-primary, #3B82F6)' : 'transparent',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        transition: 'all 0.2s',
-        cursor: disabled ? 'not-allowed' : 'pointer',
-        opacity: disabled ? 0.5 : 1,
-        ...style
-    };
-
-    
-    let icon = null;
-    if (indeterminate) {
-        
-        icon = React.createElement('div', { style: { width: '10px', height: '2px', backgroundColor: 'white', borderRadius: '1px' } });
-    } else if (checked) {
-        
-        icon = React.createElement('svg', { 
-            width: '12', 
-            height: '12', 
-            viewBox: '0 0 12 12', 
-            fill: 'none', 
-            xmlns: 'http://www.w3.org/2000/svg' 
-        }, 
-        React.createElement('path', { 
-            d: 'M10 3L4.5 8.5L2 6', 
-            stroke: 'white', 
-            strokeWidth: '2', 
-            strokeLinecap: 'round', 
-            strokeLinejoin: 'round' 
-        }));
-    }
-
-    return React.createElement(
-        'label',
-        { 
-            className: `fibo-checkbox flex items-center gap-2 ${className}`
-        },
-        React.createElement(
-            'div',
-            {
-                className: 'fibo-checkbox-box',
-                style: baseStyle,
-                onClick: (e: React.MouseEvent) => {
-                    e.preventDefault();
-                    if (!disabled && onChange) {
-                        onChange(!checked);
-                    }
-                }
-            },
-            icon
-        ),
-        label && React.createElement(
-            'span',
-            { className: 'text-sm text-gray-700 select-none' },
-            label
-        ),
-        React.createElement('input', {
-            type: 'checkbox',
-            checked: checked,
-            disabled: disabled,
-            className: 'sr-only',
-            onChange: (e: React.ChangeEvent<HTMLInputElement>) => !disabled && onChange?.(e.target.checked)
-        })
-    );
-});
-
-class CheckboxBuilder extends FiboBuilder {
-  private _checked: boolean = false;
-  private _onChange?: (checked: boolean) => void;
-  private _label?: string;
-  private _disabled: boolean = false;
-  private _indeterminate: boolean = false;
-
-  checked(value: boolean): this {
-    this._checked = value;
-    return this;
-  }
-
-  indeterminate(value: boolean): this {
-    this._indeterminate = value;
-    return this;
-  }
-
-  onChange(handler: (checked: boolean) => void): this {
-    this._onChange = handler;
-    return this;
-  }
-
-  label(text: string): this {
-    this._label = text;
-    return this;
-  }
-
-  disabled(value: boolean = true): this {
-    this._disabled = value;
-    return this;
-  }
-
-  build(): ReactElement {
-    const props = {
-        checked: this._checked,
-        onChange: this._onChange,
-        label: this._label,
-        disabled: this._disabled,
-        indeterminate: this._indeterminate,
-        className: this.getClassName(),
-        style: this.getStyle()
-    };
-    return React.createElement(CheckboxInner, props);
-  }
-}
-
-
-export const Checkbox = createBuilder(CheckboxBuilder);
-
-export interface CheckboxProps extends BaseProps {
-  checked: boolean;
-  onChange?: (checked: boolean) => void;
-  label?: string;
-  disabled?: boolean;
-  indeterminate?: boolean;
-}

package/src/interactive/Combobox/index.ts

@@ -1,278 +0,0 @@
-import React, { ReactElement, useState, useRef, useEffect, ChangeEvent } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { BaseProps } from '../../core/types';
-
-interface Option {
-  label: string;
-  value: string;
-}
-
-const ComboboxInner = React.memo((props: any) => {
-    const uniqueId = React.useId();
-    const inputId = props.id || uniqueId;
-    const [isOpen, setIsOpen] = useState(false);
-    const [searchTerm, setSearchTerm] = useState('');
-    const containerRef = useRef<HTMLDivElement>(null);
-    
-    const { 
-        containerClass, 
-        containerStyle, 
-        label, 
-        error, 
-        value,
-        options = [],
-        placeholder,
-        onChange,
-        onAdd,
-        disabled,
-        multiple,
-        ...rest 
-    } = props;
-
-    useEffect(() => {
-        if (!multiple) {
-            const selected = props.options.find((o: Option) => o.value === props.value);
-            if (selected && !isOpen && searchTerm !== selected.label) {
-                setSearchTerm(selected.label);
-            }
-        }
-    }, [props.value, props.options, isOpen, multiple]);
-
-    const filteredOptions = options.filter((opt: Option) => 
-        opt.label.toLowerCase().includes(searchTerm.toLowerCase())
-    );
-
-    useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
-                setIsOpen(false);
-                if (!multiple) {
-                    const selected = options.find((o: Option) => o.value === value);
-                    setSearchTerm(selected ? selected.label : '');
-                } else {
-                    setSearchTerm('');
-                }
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
-    }, [value, options, multiple]);
-
-    const handleSelect = (opt: Option) => {
-        if (multiple) {
-             const currentValues = Array.isArray(value) ? [...value] : [];
-             if (!currentValues.includes(opt.value)) {
-                 currentValues.push(opt.value);
-                 onChange?.(currentValues);
-             }
-             setSearchTerm(''); 
-        } else {
-            setSearchTerm(opt.label);
-            onChange?.(opt.value);
-            setIsOpen(false);
-        }
-    };
-
-    const handleRemoveTag = (valToRemove: string) => {
-        if (multiple && Array.isArray(value)) {
-            const newValues = value.filter(v => v !== valToRemove);
-            onChange?.(newValues);
-        }
-    };
-
-    const handleAdd = () => {
-        onAdd?.(searchTerm);
-        if (multiple) {
-             setSearchTerm('');
-        } else {
-             setIsOpen(false);
-        }
-    };
-
-    const isSelected = (val: string) => {
-        if (multiple) {
-            return Array.isArray(value) && value.includes(val);
-        }
-        return value === val;
-    };
-
-    return React.createElement(
-      'div',
-      { 
-          ref: containerRef,
-          className: containerClass,
-          style: containerStyle 
-      },
-      React.createElement('div', { className: 'relative w-full' }, [
-          React.createElement('div', {
-              className: `fibo-textfield-input flex flex-wrap items-center gap-1 ${isOpen ? 'ring-2 ring-[var(--fibo-primary-container)] border-[var(--fibo-primary)]' : ''}`,
-              style: { minHeight: '42px', padding: '4px 8px' }
-          }, [
-              multiple && Array.isArray(value) && value.map((val: string) => {
-                  const opt = options.find((o: Option) => o.value === val);
-                  const labelStr = opt ? opt.label : val;
-                  return React.createElement('span', {
-                      key: val,
-                      className: 'bg-[var(--fibo-primary-container)] text-[var(--fibo-on-primary-container)] text-xs font-medium px-2 py-1 rounded-md flex items-center'
-                  }, [
-                      labelStr,
-                      React.createElement('button', {
-                          type: 'button',
-                          className: 'ml-1 hover:text-[var(--fibo-primary)] focus:outline-none',
-                          onClick: (e: any) => { e.stopPropagation(); handleRemoveTag(val); }
-                      }, '×')
-                  ]);
-              }),
-
-              React.createElement('input', {
-                  key: 'input',
-                  id: inputId,
-                  className: 'bg-transparent outline-none flex-1 min-w-[60px] text-sm h-8',
-                  value: searchTerm,
-                  placeholder: (multiple && Array.isArray(value) && value.length > 0) ? '' : (placeholder || ' '),
-                  disabled: disabled,
-                  onChange: (e: ChangeEvent<HTMLInputElement>) => {
-                      setSearchTerm(e.target.value);
-                      if (!isOpen) setIsOpen(true);
-                  },
-                  onFocus: () => setIsOpen(true),
-                  ...rest
-              })
-          ]),
-          
-           label && React.createElement(
-            'label',
-            { 
-                key: 'label',
-                htmlFor: inputId,
-                className: 'fibo-textfield-label' 
-            },
-            label
-          ),
-          
-          isOpen && React.createElement('div', {
-              key: 'dropdown',
-              className: 'absolute z-50 w-full mt-1 bg-[var(--fibo-surface)] border border-[var(--fibo-outline)] rounded-md shadow-lg max-h-60 overflow-auto focus:outline-none left-0'
-          }, [
-              filteredOptions.length > 0 ? 
-                filteredOptions.map((opt: Option) => {
-                   const selected = isSelected(opt.value);
-                   return React.createElement('div', {
-                       key: opt.value,
-                       className: `px-4 py-2 cursor-pointer text-sm hover:bg-[var(--fibo-primary-container)] hover:text-[var(--fibo-on-primary-container)] ${selected ? 'bg-[var(--fibo-primary-container)] text-[var(--fibo-on-primary-container)] font-medium opacity-50' : 'text-[var(--fibo-on-surface)]'}`,
-                       onClick: () => !selected && handleSelect(opt) 
-                   }, opt.label);
-                }) :
-                React.createElement('div', { className: 'px-4 py-2 text-sm text-gray-500' }, 'No results found.'),
-              
-              searchTerm && !filteredOptions.some((o: Option) => o.label.toLowerCase() === searchTerm.toLowerCase()) && onAdd && React.createElement('div', {
-                   key: 'add-new',
-                   className: 'border-t border-[var(--fibo-outline)] px-4 py-2 cursor-pointer text-sm text-[var(--fibo-primary)] hover:bg-[var(--fibo-primary-container)] font-medium flex items-center',
-                   onClick: handleAdd
-              }, [
-                  React.createElement('span', { className: 'mr-1' }, '+'),
-                  `Add "${searchTerm}"`
-              ])
-          ])
-      ]),
-      
-      error && React.createElement(
-        'span',
-        { className: 'text-[var(--fibo-error)] text-xs mt-1 ml-1' },
-        error
-      )
-    );
-});
-
-class ComboboxBuilder extends FiboBuilder {
-  private _value: string | string[] = '';
-  private _label: string = '';
-  private _placeholder: string = '';
-  private _disabled: boolean = false;
-  private _error?: string;
-  private _multiple: boolean = false;
-  private _options: Option[] = [];
-  private _onChange?: (value: string | string[]) => void;
-  private _onAdd?: (newLabel: string) => void;
-
-  value(val: string | 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;
-  }
-
-  options(opts: Option[]): this {
-      this._options = opts;
-      return this;
-  }
-  
-  multiple(val: boolean = true): this {
-       this._multiple = val;
-       return this;
-  }
-
-  disabled(val: boolean = true): this {
-    this._disabled = val;
-    return this;
-  }
-
-  error(val: string): this {
-    this._error = val;
-    return this;
-  }
-
-  onChange(handler: (value: string | string[]) => void): this {
-    this._onChange = handler;
-    return this;
-  }
-
-  onAdd(handler: (newLabel: string) => void): this {
-      this._onAdd = handler;
-      return this;
-  }
-
-  build(): ReactElement {
-    const containerClass = ['fibo-textfield-container relative', ...this._classNames]
-      .filter(Boolean)
-      .join(' ');
-
-    const props = {
-        containerClass,
-        containerStyle: this.getStyle(),
-        label: this._label,
-        error: this._error,
-        value: this._value,
-        placeholder: this._placeholder,
-        options: this._options,
-        disabled: this._disabled,
-        multiple: this._multiple,
-        onChange: this._onChange,
-        onAdd: this._onAdd,
-        ...this._props
-    };
-
-    return React.createElement(ComboboxInner, props);
-  }
-}
-
-
-export const Combobox = createBuilder(ComboboxBuilder);
-
-export interface ComboboxProps extends BaseProps {
-  value: string | string[];
-  label?: string;
-  placeholder?: string;
-  multiple?: boolean;
-  options: Option[];
-  onChange?: (value: string | string[]) => void;
-  onAdd?: (newLabel: string) => void;
-}