fiboui 1.0.0

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

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

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

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

@@ -0,0 +1,52 @@
+
+
+
+*, *::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;
+}