fiboui 1.0.2 → 2.1.0

package/src/interactive/RadioGroup/index.ts

@@ -1,124 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { BaseProps } from '../../core/types';
-
-interface RadioOption {
-    label: string;
-    value: string;
-    disabled?: boolean;
-}
-
-const RadioGroupInner = React.memo((props: any) => {
-    const {
-        value,
-        options,
-        onChange,
-        name,
-        direction,
-        className,
-        style
-    } = props;
-    
-    return React.createElement(
-        'div',
-        {
-            className: `fibo-radio-group flex ${direction === 'vertical' ? 'flex-col gap-2' : 'flex-row gap-4'} ${className}`,
-            style: style
-        },
-        options.map((option: any) => {
-            const isSelected = value === option.value;
-            const isDisabled = option.disabled;
-
-            return React.createElement(
-                'label',
-                {
-                    key: option.value,
-                    className: `flex items-center gap-2 cursor-pointer ${isDisabled ? 'opacity-50 cursor-not-allowed' : ''}`
-                },
-                React.createElement(
-                    'div',
-                    {
-                        className: 'relative flex items-center justify-center',
-                        style: {
-                            width: '18px',
-                            height: '18px',
-                            borderRadius: '50%',
-                            border: isSelected ? '5px solid var(--fibo-primary, #3B82F6)' : '2px solid #D1D5DB',
-                            transition: 'all 0.2s',
-                        }
-                    },
-                    React.createElement('input', {
-                        type: 'radio',
-                        name: name,
-                        value: option.value,
-                        checked: isSelected,
-                        disabled: isDisabled,
-                        className: 'sr-only',
-                        onChange: () => !isDisabled && onChange?.(option.value)
-                    })
-                ),
-                React.createElement(
-                    'span',
-                    { className: 'text-sm text-gray-700' },
-                    option.label
-                )
-            );
-        })
-    );
-});
-
-class RadioGroupBuilder extends FiboBuilder {
-  private _value: string = '';
-  private _options: RadioOption[] = [];
-  private _onChange?: (value: string) => void;
-  private _name: string = `radio-group-${Math.random().toString(36).substr(2, 9)}`;
-  private _direction: 'vertical' | 'horizontal' = 'vertical';
-
-  value(val: string): this {
-    this._value = val;
-    return this;
-  }
-
-  options(opts: RadioOption[]): this {
-    this._options = opts;
-    return this;
-  }
-
-  onChange(handler: (val: string) => void): this {
-    this._onChange = handler;
-    return this;
-  }
-
-  direction(dir: 'vertical' | 'horizontal'): this {
-    this._direction = dir;
-    return this;
-  }
-
-  name(val: string): this {
-    this._name = val;
-    return this;
-  }
-
-  build(): ReactElement {
-    const props = {
-        value: this._value,
-        options: this._options,
-        onChange: this._onChange,
-        name: this._name,
-        direction: this._direction,
-        className: this.getClassName(),
-        style: this.getStyle()
-    };
-    return React.createElement(RadioGroupInner, props);
-  }
-}
-
-
-export const RadioGroup = createBuilder(RadioGroupBuilder);
-
-export interface RadioGroupProps extends BaseProps {
-  value: string;
-  options: RadioOption[];
-  onChange?: (value: string) => void;
-  direction?: 'vertical' | 'horizontal';
-}

package/src/interactive/Select/index.ts

@@ -1,227 +0,0 @@
-import React, { ReactElement, useState, useRef, useEffect } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { BaseProps } from '../../core/types';
-
-interface Option {
-  label: string;
-  value: string;
-}
-
-const SelectInner = React.memo((props: any) => {
-    const uniqueId = React.useId();
-    const inputId = props.id || uniqueId;
-    const [isOpen, setIsOpen] = useState(false);
-    const containerRef = useRef<HTMLDivElement>(null);
-    
-    const { 
-        containerClass, 
-        containerStyle, 
-        label, 
-        error, 
-        value,
-        options = [],
-        placeholder,
-        onChange,
-        disabled,
-        multiple,
-        ...rest 
-    } = props;
-
-    useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
-                setIsOpen(false);
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
-    }, []);
-
-    const isSelected = (val: string) => {
-        if (multiple) {
-            return Array.isArray(value) && value.includes(val);
-        }
-        return value === val;
-    };
-
-    let displayText = '';
-    if (multiple) {
-        if (Array.isArray(value) && value.length > 0) {
-           displayText = options
-               .filter((opt: Option) => value.includes(opt.value))
-               .map((opt: Option) => opt.label)
-               .join(', ');
-        }
-    } else {
-        const selectedOption = options.find((opt: Option) => opt.value === value);
-        displayText = selectedOption ? selectedOption.label : '';
-    }
-
-    const handleSelect = (val: string) => {
-        if (disabled) return;
-
-        if (multiple) {
-            const currentValues = Array.isArray(value) ? [...value] : [];
-            const index = currentValues.indexOf(val);
-            if (index > -1) {
-                currentValues.splice(index, 1);
-            } else {
-                currentValues.push(val);
-            }
-            onChange?.(currentValues);
-        } else {
-            onChange?.(val);
-            setIsOpen(false);
-        }
-    };
-
-    return React.createElement(
-      'div',
-      { 
-          ref: containerRef,
-          className: containerClass, 
-          style: containerStyle 
-      },
-      React.createElement('div', { className: 'relative w-full' }, [
-          React.createElement('button', {
-              key: 'trigger',
-              id: inputId,
-              type: 'button',
-              disabled: disabled,
-              className: `fibo-textfield-input text-left w-full flex items-center justify-between ${!displayText ? 'text-gray-400' : ''}`,
-              onClick: () => !disabled && setIsOpen(!isOpen),
-              ...rest
-          }, [
-              React.createElement('span', { key: 'text', className: 'truncate' }, displayText || placeholder || ' '),
-              React.createElement('svg', { 
-                  key: 'icon', 
-                  className: `w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : ''}`, 
-                  fill: "none", 
-                  stroke: "currentColor", 
-                  viewBox: "0 0 24 24" 
-              }, React.createElement('path', { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))
-          ]),
-          
-          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'
-          }, options.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)] flex items-center justify-between ${selected ? 'bg-[var(--fibo-primary-container)] text-[var(--fibo-on-primary-container)] font-medium' : 'text-[var(--fibo-on-surface)]'}`,
-                   onClick: () => handleSelect(opt.value)
-               }, [
-                   React.createElement('span', { key: 'label' }, opt.label),
-                   selected && React.createElement('svg', { 
-                       key: 'check',
-                       className: "w-4 h-4 text-[var(--fibo-primary)]",
-                       viewBox: "0 0 20 20",
-                       fill: "currentColor"
-                   }, React.createElement('path', { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }))
-               ])
-          }))
-      ]),
-      
-      error && React.createElement(
-        'span',
-        { className: 'text-[var(--fibo-error)] text-xs mt-1 ml-1' },
-        error
-      )
-    );
-});
-
-class SelectBuilder 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;
-
-  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;
-  }
-
-  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,
-        ...this._props
-    };
-
-    return React.createElement(SelectInner, props);
-  }
-}
-
-
-export const Select = createBuilder(SelectBuilder);
-
-export interface SelectProps extends BaseProps {
-  value: string | string[];
-  label?: string;
-  placeholder?: string;
-  multiple?: boolean;
-  options: Option[];
-  onChange?: (value: string | string[]) => void;
-}

package/src/interactive/Switch/index.ts

@@ -1,123 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { BaseProps } from '../../core/types';
-
-const SwitchInner = React.memo((props: any) => {
-    const { 
-        checked, 
-        onChange, 
-        label, 
-        disabled, 
-        className, 
-        style 
-    } = props;
-
-    
-    const trackBaseStyle: React.CSSProperties = {
-        width: '44px',
-        height: '24px',
-        borderRadius: '9999px',
-        position: 'relative',
-        transition: 'background-color 0.2s ease-in-out',
-        cursor: disabled ? 'not-allowed' : 'pointer',
-        opacity: disabled ? 0.5 : 1,
-        backgroundColor: checked ? 'var(--fibo-primary, #3B82F6)' : '#E5E7EB',
-        ...style
-    };
-
-    const thumbStyle: React.CSSProperties = {
-        width: '20px',
-        height: '20px',
-        borderRadius: '50%',
-        backgroundColor: 'white',
-        position: 'absolute',
-        top: '2px',
-        left: '2px',
-        transition: 'transform 0.2s ease-in-out',
-        transform: checked ? 'translateX(20px)' : 'translateX(0)',
-        boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
-    };
-
-    return React.createElement(
-        'label',
-        { 
-            className: `fibo-switch flex items-center gap-3 ${className}`
-        },
-        React.createElement(
-            'div',
-            {
-                className: 'fibo-switch-track',
-                style: trackBaseStyle,
-                onClick: (e: React.MouseEvent) => {
-                    e.preventDefault();
-                    if (!disabled && onChange) {
-                        onChange(!checked);
-                    }
-                }
-            },
-            React.createElement('div', { style: thumbStyle })
-        ),
-        label && React.createElement(
-            'span',
-            { className: 'text-sm font-medium 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 SwitchBuilder extends FiboBuilder {
-  private _checked: boolean = false;
-  private _onChange?: (checked: boolean) => void;
-  private _label?: string;
-  private _disabled: boolean = false;
-
-  checked(value: boolean): this {
-    this._checked = 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,
-        className: this.getClassName(),
-        style: this.getStyle()
-    };
-    return React.createElement(SwitchInner, props);
-  }
-}
-
-
-export const Switch = createBuilder(SwitchBuilder);
-
-export interface SwitchProps extends BaseProps {
-  checked: boolean;
-  onChange?: (checked: boolean) => void;
-  label?: string;
-  disabled?: boolean;
-}

package/src/interactive/TextField/index.ts

@@ -1,223 +0,0 @@
-import React, { ReactElement, ChangeEvent, useEffect, useState } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { BaseProps } from '../../core/types';
-import { Signal } from '../../core/state';
-
-const applyMask = (value: string, mask: string) => {
-    let i = 0;
-    const valueChars = value.replace(/\D/g, '').split('');
-    let output = '';
-    
-    for (let m = 0; m < mask.length; m++) {
-        if (i >= valueChars.length) break;
-        
-        if (mask[m] === '9') {
-            output += valueChars[i++];
-        } else {
-            output += mask[m];
-        }
-    }
-    return output;
-};
-
-const TextFieldInner = React.memo((props: any) => {
-    const uniqueId = React.useId();
-    const inputId = props.id || uniqueId;
-    const [showPassword, setShowPassword] = React.useState(false);
-    
-    const { 
-        containerClass, 
-        containerStyle, 
-        label, 
-        error, 
-        mask,
-        type,
-        value, // Can be string or Signal
-        onChange,
-        ...inputRest 
-    } = props;
-
-    // Handle Signal or primitive value
-    const isSignal = value instanceof Signal;
-    const [localValue, setLocalValue] = useState(isSignal ? value.value : value);
-
-    // Sync with Signal updates
-    useEffect(() => {
-        if (isSignal) {
-            const unsubscribe = value.subscribe((val: string) => {
-                setLocalValue(val);
-            });
-            return unsubscribe;
-        } else {
-            setLocalValue(value);
-        }
-    }, [value, isSignal]);
-
-    const isPassword = type === 'password';
-    const effectiveType = isPassword && showPassword ? 'text' : type;
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        let newValue = e.target.value;
-        if (mask) {
-            newValue = applyMask(newValue, mask);
-            
-            const syntheticEvent = {
-                ...e,
-                target: {
-                    ...e.target,
-                    value: newValue
-                }
-            } as React.ChangeEvent<HTMLInputElement>;
-            
-            if (isSignal) {
-                value.value = newValue; // Update signal
-            }
-            onChange?.(syntheticEvent);
-        } else {
-            if (isSignal) {
-                value.value = newValue; // Update signal
-            }
-            onChange?.(e);
-        }
-    };
-
-    return React.createElement(
-      'div',
-      { className: containerClass, style: containerStyle },
-      React.createElement('div', { className: 'relative w-full' }, [
-          React.createElement('input', {
-              key: 'input',
-              id: inputId,
-              className: 'fibo-textfield-input',
-              type: effectiveType,
-              onChange: handleChange,
-              value: localValue,
-              ...inputRest
-          }),
-          label && React.createElement(
-            'label',
-            { 
-                key: 'label',
-                htmlFor: inputId,
-                className: 'fibo-textfield-label' 
-            },
-            label
-          ),
-          isPassword && React.createElement(
-              'button',
-              {
-                  key: 'toggle',
-                  type: 'button',
-                  className: 'absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none',
-                  onClick: () => setShowPassword(!showPassword),
-                  tabIndex: -1
-              },
-              showPassword ? 
-                React.createElement('svg', { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" },
-                    React.createElement('path', { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
-                    React.createElement('line', { x1: 1, y1: 1, x2: 23, y2: 23 })
-                ) :
-                React.createElement('svg', { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" },
-                    React.createElement('path', { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
-                    React.createElement('circle', { cx: 12, cy: 12, r: 3 })
-                )
-          )
-      ]),
-      error && React.createElement(
-        'span',
-        { className: 'text-[var(--fibo-error)] text-xs mt-1 ml-1' },
-        error
-      )
-    );
-});
-
-class TextFieldBuilder extends FiboBuilder {
-  private _value: string | Signal<string> = '';
-  private _label: string = '';
-  private _placeholder: string = '';
-  private _type: string = 'text';
-  private _disabled: boolean = false;
-  private _error?: string;
-  private _mask?: string;
-  private _onChange?: (value: string) => void;
-
-  constructor(value: string = '') {
-    super();
-    this._value = value;
-  }
-
-  value(val: string | Signal<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;
-  }
-
-  type(val: 'text' | 'password' | 'email' | 'number' | 'tel'): this {
-    this._type = val;
-    return this;
-  }
-
-  mask(format: string): this {
-      this._mask = format;
-      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) => void): this {
-    this._onChange = handler;
-    return this;
-  }
-
-  build(): ReactElement {
-    const containerClass = ['fibo-textfield-container', ...this._classNames]
-      .filter(Boolean)
-      .join(' ');
-
-    const props = {
-        containerClass,
-        containerStyle: this.getStyle(),
-        label: this._label,
-        error: this._error,
-        value: this._value,
-        placeholder: this._placeholder || ' ',
-        type: this._type,
-        mask: this._mask,
-        disabled: this._disabled,
-        onChange: (e: ChangeEvent<HTMLInputElement>) => {
-            this._onChange?.(e.target.value);
-        },
-        ...this._props
-    };
-
-    return React.createElement(TextFieldInner, props);
-  }
-}
-
-export const TextField = createBuilder(TextFieldBuilder);
-
-export interface TextFieldProps extends BaseProps {
-  value: string | Signal<string>;
-  label?: string;
-  placeholder?: string;
-  onChange?: (value: string) => void;
-  type?: 'text' | 'password' | 'email' | 'number' | 'tel';
-  mask?: string;
-}