fiboui 1.0.2 → 2.1.0

package/src/structure/cards/variants/index.ts

@@ -1,301 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../../core/builder';
-import { Card } from '../../Card';
-import { Text } from '../../../content/Text';
-import { Box } from '../../Box';
-import { Button } from '../../../interactive/Button';
-import { Switch } from '../../../interactive/Switch';
-import { TextField } from '../../../interactive/TextField';
-import { Badge } from '../../../content/Badge';
-
-
-
-
-const InfoCardInner = React.memo((props: any) => {
-    const { title, description, icon, footer, className, style } = props;
-
-    return Card()
-        .className(className)
-        .style(style)
-        .children([
-            Box().className("flex items-start gap-4").children([
-               icon ? Box().className("mt-1 text-gray-400").children(icon).build() : null,
-               Box().className("flex-1").children([
-                   title ? Text(title).fontSize(16).fontWeight(600).color("#111827").build() : null,
-                   description ? Text(description).fontSize(14).color("#6B7280").className("mt-1").build() : null,
-                   footer ? Box().className("mt-4").children(footer).build() : null
-               ]).build()
-            ]).build()
-        ]).build();
-});
-
-class InfoCardBuilder extends FiboBuilder {
-  private _title?: string;
-  private _description?: string;
-  private _icon?: ReactElement;
-  private _footer?: ReactElement;
-
-  title(text: string): this {
-    this._title = text;
-    return this;
-  }
-
-  description(text: string): this {
-    this._description = text;
-    return this;
-  }
-
-  icon(element: ReactElement): this {
-      this._icon = element;
-      return this;
-  }
-
-  footer(element: ReactElement): this {
-      this._footer = element;
-      return this;
-  }
-
-  build(): ReactElement {
-    const props = {
-        title: this._title,
-        description: this._description,
-        icon: this._icon,
-        footer: this._footer,
-        className: this.getClassName(),
-        style: this.getStyle(),
-        ...this._props
-    };
-    return React.createElement(InfoCardInner, props);
-  }
-}
-
-
-
-
-const ActionCardInner = React.memo((props: any) => {
-    const { title, description, action, actionType, onAction, actionLabel, className, style } = props;
-
-    let ActionElement = action;
-
-    if (!ActionElement) {
-        if (actionType === 'button') {
-            ActionElement = Button(actionLabel || 'Action').variant("soft").size("sm").onPress(onAction).build();
-        } else if (actionType === 'switch') {
-             
-            ActionElement = Switch().onChange(onAction).build();
-        }
-    }
-
-    return Card()
-        .className(`flex items-center justify-between gap-4 ${className || ''}`)
-        .style(style)
-        .children([
-           Box().className("flex-1").children([
-               title ? Text(title).fontSize(16).fontWeight(600).color("#111827").build() : null,
-               description ? Text(description).fontSize(14).color("#6B7280").className("mt-1").build() : null,
-           ]).build(),
-           ActionElement ? Box().className("flex-shrink-0").children(ActionElement).build() : null
-        ]).build();
-});
-
-class ActionCardBuilder extends FiboBuilder {
-    private _title?: string;
-    private _description?: string;
-    private _action?: ReactElement;
-    private _actionType?: 'button' | 'switch';
-    private _actionLabel?: string;
-    private _onAction?: (val?: any) => void;
-  
-    title(text: string): this {
-      this._title = text;
-      return this;
-    }
-  
-    description(text: string): this {
-      this._description = text;
-      return this;
-    }
-  
-    action(element: ReactElement): this {
-        this._action = element;
-        return this;
-    }
-
-    withButton(label: string, onPress?: () => void): this {
-        this._actionType = 'button';
-        this._actionLabel = label;
-        this._onAction = onPress;
-        return this;
-    }
-
-    withSwitch(onChange?: (val: boolean) => void): this {
-        this._actionType = 'switch';
-        this._onAction = onChange;
-        return this;
-    }
-  
-    build(): ReactElement {
-      const props = {
-          title: this._title,
-          description: this._description,
-          action: this._action,
-          actionType: this._actionType,
-          actionLabel: this._actionLabel,
-          onAction: this._onAction,
-          className: this.getClassName(),
-          style: this.getStyle(),
-          ...this._props
-      };
-      return React.createElement(ActionCardInner, props);
-    }
-}
-
-
-export const InfoCard = createBuilder(InfoCardBuilder);
-
-export const ActionCard = createBuilder(ActionCardBuilder);
-
-
-
-
-const InputCardInner = React.memo((props: any) => {
-    const { title, description, placeholder, value, onChange, type, className, style } = props;
-
-    return Card()
-        .className(className)
-        .style(style)
-        .children([
-            title ? Text(title).fontSize(14).fontWeight(600).color("#374151").className("mb-1").build() : null,
-            description ? Text(description).fontSize(12).color("#6B7280").className("mb-3").build() : null,
-            TextField()
-                .placeholder(placeholder)
-                .value(value)
-                .type(type)
-                .onChange(onChange)
-                .className("w-full")
-                .build()
-        ]).build();
-});
-
-class InputCardBuilder extends FiboBuilder {
-    private _title?: string;
-    private _description?: string;
-    private _placeholder?: string;
-    private _value?: string;
-    private _type: string = 'text';
-    private _onChange?: (val: string) => void;
-
-    title(text: string): this {
-        this._title = text;
-        return this;
-    }
-
-    description(text: string): this {
-        this._description = text;
-        return this;
-    }
-
-    placeholder(text: string): this {
-        this._placeholder = text;
-        return this;
-    }
-
-    value(text: string): this {
-        this._value = text;
-        return this;
-    }
-
-    type(t: string): this {
-        this._type = t;
-        return this;
-    }
-
-    onChange(cb: (val: string) => void): this {
-        this._onChange = cb;
-        return this;
-    }
-
-    build(): ReactElement {
-        const props = {
-            title: this._title,
-            description: this._description,
-            placeholder: this._placeholder,
-            value: this._value,
-            type: this._type,
-            onChange: this._onChange,
-            className: this.getClassName(),
-            style: this.getStyle(),
-            ...this._props
-        };
-        return React.createElement(InputCardInner, props);
-    }
-}
-
-
-export const InputCard = createBuilder(InputCardBuilder);
-
-
-
-
-
-const MetricCardInner = React.memo((props: any) => {
-    const { title, value, trend, trendDirection, className, style } = props;
-
-    const trendColor = trendDirection === 'up' ? 'success' : trendDirection === 'down' ? 'error' : 'none';
-    const trendIcon = trendDirection === 'up' ? '↑' : trendDirection === 'down' ? '↓' : '•';
-
-    return Card()
-        .className(className)
-        .style(style)
-        .children([
-            Text(title).fontSize(14).fontWeight(600).color("#6B7280").build(),
-            Box().className("flex items-end justify-between mt-2").children([
-                Text(value).fontSize(32).fontWeight(800).color("#111827").build(),
-                trend ? Badge()
-                    .text(`${trendIcon} ${trend}`)
-                    .intent(trendColor)
-                    .variant("accent")
-                    .build() : null
-            ]).build()
-        ]).build();
-});
-
-class MetricCardBuilder extends FiboBuilder {
-    private _title: string = '';
-    private _value: string = '';
-    private _trend?: string;
-    private _trendDirection: 'up' | 'down' | 'neutral' = 'neutral';
-
-    title(text: string): this {
-        this._title = text;
-        return this;
-    }
-
-    value(text: string): this {
-        this._value = text;
-        return this;
-    }
-
-    trend(text: string, direction: 'up' | 'down' | 'neutral' = 'neutral'): this {
-        this._trend = text;
-        this._trendDirection = direction;
-        return this;
-    }
-
-    build(): ReactElement {
-        const props = {
-            title: this._title,
-            value: this._value,
-            trend: this._trend,
-            trendDirection: this._trendDirection,
-            className: this.getClassName(),
-            style: this.getStyle(),
-            ...this._props
-        };
-        return React.createElement(MetricCardInner, props);
-    }
-}
-
-
-export const MetricCard = createBuilder(MetricCardBuilder);
-

package/src/structure/index.ts

@@ -1,10 +0,0 @@
-export * from './Box';
-export * from './Card';
-export * from './List';
-export * from './Table';
-export * from './Tags';
-export * from './Banner';
-export * from './cards';
-export * from './Collapse';
-
-export * from './Grid';

package/src/styles/base.css

@@ -1,186 +0,0 @@
-@import './core.css';
-@import './themes/material.css';
-@import './themes/cupertino.css';
-@import './themes/web.css';
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --fibo-theme: 'material';
-}
-
-
-.fibo-theme-material {
-  
-  --fibo-primary: #1976d2; 
-  --fibo-on-primary: #FFFFFF;
-  --fibo-primary-container: #bbdefb;
-  --fibo-on-primary-container: #1976d2;
-  
-  --fibo-secondary: #9c27b0;
-  --fibo-on-secondary: #FFFFFF;
-  
-  --fibo-tertiary: #7D5260;
-  --fibo-on-tertiary: #FFFFFF;
-
-  --fibo-error: #d32f2f;
-  --fibo-on-error: #FFFFFF;
-  
-  --fibo-background: #FFFFFF;
-  --fibo-on-background: rgba(0, 0, 0, 0.87);
-  
-  --fibo-surface: #FFFFFF;
-  --fibo-on-surface: rgba(0, 0, 0, 0.87);
-  --fibo-surface-variant: #f5f5f5;
-  --fibo-on-surface-variant: rgba(0, 0, 0, 0.6);
-  
-  --fibo-outline: rgba(0, 0, 0, 0.12);
-
-  
-  --fibo-font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  
-  
-  --fibo-spacing-xs: 4px;
-  --fibo-spacing-sm: 8px;
-  --fibo-spacing-md: 16px;
-  --fibo-spacing-lg: 24px;
-  --fibo-spacing-xl: 32px;
-  
-  
-  --fibo-radius-none: 0px;
-  --fibo-radius-xs: 2px;
-  --fibo-radius-sm: 4px; 
-  --fibo-radius-md: 8px;
-  --fibo-radius-lg: 12px;
-  --fibo-radius-xl: 16px;
-  --fibo-radius-full: 9999px;
-  
-  
-  --fibo-elevation-0: none;
-  --fibo-elevation-1: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
-  --fibo-elevation-2: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
-  --fibo-elevation-3: 0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12);
-  --fibo-elevation-4: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
-  
-  --fibo-border-width: 1px;
-  --fibo-border-color: rgba(0, 0, 0, 0.12);
-  
-  --fibo-transition-fast: 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  --fibo-transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-
-.fibo-theme-cupertino {
-  
-  --fibo-primary: #007AFF;
-  --fibo-on-primary: #FFFFFF;
-  --fibo-primary-container: rgba(0, 122, 255, 0.15);
-  --fibo-on-primary-container: #007AFF;
-  
-  --fibo-secondary: #5856D6;
-  --fibo-on-secondary: #FFFFFF;
-  
-  --fibo-background: #F2F2F7; 
-  --fibo-on-background: #000000;
-  
-  --fibo-surface: #FFFFFF;
-  --fibo-on-surface: #000000;
-  --fibo-surface-variant: #E5E5EA; 
-  --fibo-on-surface-variant: #8E8E93; 
-  
-  --fibo-error: #FF3B30;
-  --fibo-on-error: #FFFFFF;
-  
-  --fibo-outline: #C7C7CC; 
-
-  
-  --fibo-font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', sans-serif;
-  
-  
-  --fibo-spacing-xs: 4px;
-  --fibo-spacing-sm: 8px;
-  --fibo-spacing-md: 16px; 
-  --fibo-spacing-lg: 20px;
-  --fibo-spacing-xl: 32px;
-  
-  
-  --fibo-radius-none: 0px;
-  --fibo-radius-xs: 4px;
-  --fibo-radius-sm: 8px;
-  --fibo-radius-md: 10px; 
-  --fibo-radius-lg: 16px;
-  --fibo-radius-xl: 20px;
-  --fibo-radius-full: 9999px;
-  
-  
-  --fibo-elevation-0: none;
-  --fibo-elevation-1: 0 1px 2px rgba(0,0,0,0.05);
-  --fibo-elevation-2: 0 4px 12px rgba(0,0,0,0.08);
-  --fibo-elevation-3: 0 8px 24px rgba(0,0,0,0.12);
-  --fibo-elevation-4: 0 12px 32px rgba(0,0,0,0.14);
-  
-  --fibo-border-width: 0.5px; 
-  --fibo-border-color: rgba(60, 60, 67, 0.29); 
-  
-  --fibo-transition-fast: 250ms cubic-bezier(0.25, 0.1, 0.25, 1);
-  --fibo-transition-normal: 400ms cubic-bezier(0.25, 0.1, 0.25, 1);
-}
-
-
-.fibo-theme-web {
-  
-  --fibo-primary: #3B82F6;
-  --fibo-on-primary: #FFFFFF;
-  --fibo-primary-container: #DBEAFE;
-  --fibo-on-primary-container: #1E40AF;
-  
-  --fibo-secondary: #64748B;
-  --fibo-on-secondary: #FFFFFF;
-  
-  --fibo-background: #F8FAFC;
-  --fibo-on-background: #0F172A;
-  
-  --fibo-surface: #FFFFFF;
-  --fibo-on-surface: #0F172A;
-  --fibo-surface-variant: #F1F5F9;
-  --fibo-on-surface-variant: #64748B;
-  
-  --fibo-error: #EF4444;
-  --fibo-on-error: #FFFFFF;
-  
-  --fibo-outline: #E2E8F0;
-
-  
-  --fibo-font-family: 'Inter', system-ui, sans-serif;
-  
-  
-  --fibo-radius-none: 0px;
-  --fibo-radius-xs: 2px;
-  --fibo-radius-sm: 4px;
-  --fibo-radius-md: 6px;
-  --fibo-radius-lg: 8px;
-  --fibo-radius-xl: 12px;
-  --fibo-radius-full: 9999px;
-  
-  
-  --fibo-elevation-0: none;
-  --fibo-elevation-1: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --fibo-elevation-2: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --fibo-elevation-3: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --fibo-elevation-4: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  
-  --fibo-border-width: 1px;
-  --fibo-border-color: #E2E8F0;
-  
-  --fibo-transition-fast: 150ms ease-out;
-  --fibo-transition-normal: 300ms ease-out;
-}
-
-body {
-  font-family: var(--fibo-font-family);
-  background-color: var(--fibo-background);
-  color: var(--fibo-on-background);
-  transition: background-color var(--fibo-transition-normal), color var(--fibo-transition-normal);
-}

package/src/styles/core.css

@@ -1,52 +0,0 @@
-
-
-
-*, *::before, *::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  margin: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  line-height: 1.5;
-}
-
-
-.fibo-clickable {
-  cursor: pointer;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.fibo-flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.fibo-full-width {
-  width: 100%;
-}
-
-
-@keyframes fibo-ripple-anim {
-  to {
-    transform: scale(4);
-    opacity: 0;
-  }
-}
-
-.fibo-ripple-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  border-radius: inherit;
-  pointer-events: none;
-  z-index: 0;
-}