fiboui 1.0.0

package/src/interactive/Select/index.ts

@@ -0,0 +1,227 @@
+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

@@ -0,0 +1,123 @@
+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

@@ -0,0 +1,200 @@
+import React, { ReactElement, ChangeEvent } from 'react';
+import { FiboBuilder, createBuilder } from '../../core/builder';
+import { BaseProps } from '../../core/types';
+
+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,
+        onChange,
+        ...inputRest 
+    } = props;
+
+    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>;
+            
+            onChange?.(syntheticEvent);
+        } else {
+            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,
+              ...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 = '';
+  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): 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;
+  label?: string;
+  placeholder?: string;
+  onChange?: (value: string) => void;
+  type?: 'text' | 'password' | 'email' | 'number' | 'tel';
+  mask?: string;
+}

package/src/interactive/Textarea/index.ts

@@ -0,0 +1,129 @@
+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

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