fiboui 1.0.0

package/src/layout/Sidebar/index.ts

@@ -0,0 +1,56 @@
+import React, { ReactElement } from 'react';
+import { FiboBuilder, createBuilder } from '../../core/builder';
+
+
+
+
+
+const SidebarInner = React.memo((props: any) => {
+    const { width = 260, collapsed, className, style, children, ...rest } = props;
+
+    
+    const currentWidth = collapsed ? 80 : width;
+
+    return React.createElement(
+        'aside',
+        {
+            className: `flex flex-col border-r border-gray-200 bg-white transition-all duration-300 h-full ${className || ''}`,
+            style: { width: currentWidth, minWidth: currentWidth, ...style },
+            ...rest
+        },
+        children
+    );
+});
+
+class SidebarBuilder extends FiboBuilder {
+    private _width: number | string = 260;
+    private _collapsed: boolean = false;
+
+    width(width: number | string): this {
+        this._width = width;
+        return this;
+    }
+
+    collapsible(collapsed: boolean = false): this {
+        this._collapsed = collapsed;
+        return this;
+    }
+
+    build(): ReactElement {
+        const props = {
+            width: this._width,
+            collapsed: this._collapsed,
+            className: this.getClassName(),
+            style: this.getStyle(),
+            children: this.processChildren(),
+            ...this._props
+        };
+        return React.createElement(SidebarInner, props);
+    }
+}
+
+
+export const Sidebar = createBuilder(SidebarBuilder);
+
+
+

package/src/layout/Spacer/index.ts

@@ -0,0 +1,46 @@
+import React, { ReactElement } from 'react';
+import { FiboBuilder, createBuilder } from '../../core/builder';
+import { BaseProps } from '../../core/types';
+
+class SpacerBuilder extends FiboBuilder {
+  private _height?: string | number;
+  private _width?: string | number;
+
+  height(value: string | number): this {
+    this._height = value;
+    return this;
+  }
+
+  width(value: string | number): this {
+    this._width = value;
+    return this;
+  }
+
+  build(): ReactElement {
+    const style = this.getStyle();
+    
+    if (this._height) {
+      style.height = typeof this._height === 'number' ? `${this._height}px` : this._height;
+    }
+    
+    if (this._width) {
+      style.width = typeof this._width === 'number' ? `${this._width}px` : this._width;
+    }
+
+    const className = this.getClassName();
+
+    return React.createElement('div', {
+      className: `fibo-spacer ${className}`,
+      style,
+      ...this._props,
+    });
+  }
+}
+
+
+export const Spacer = createBuilder(SpacerBuilder);
+
+export interface SpacerProps extends BaseProps {
+  height?: string | number;
+  width?: string | number;
+}

package/src/layout/StakentComponents.tsx

@@ -0,0 +1,57 @@
+import { Box } from '../structure/Box';
+import { Button } from '../interactive/Button';
+
+export const StakentCard = ({ className = "", style = {} }: any): any => {
+    return Box()
+        .className(`bg-[#0B0C15] border border-white/5 rounded-[32px] overflow-hidden relative ${className}`)
+        .style({ backgroundColor: '#0B0C15', ...style });
+};
+
+export const StakentButton = ({ text, icon, variant = 'primary', className = "", onClick }: any): React.ReactElement => {
+    let baseClass = "rounded-xl font-bold transition-all duration-200 flex items-center justify-center gap-2";
+    
+    if (variant === 'primary') {
+        baseClass += " bg-[#6366f1] text-white shadow-[0_0_20px_rgba(99,102,241,0.4)] hover:shadow-[0_0_25px_rgba(99,102,241,0.6)] hover:-translate-y-0.5";
+    } else if (variant === 'secondary') {
+        baseClass += " bg-white/5 border border-white/10 text-white hover:bg-white/10";
+    } else if (variant === 'outline') {
+        baseClass += " border border-white/10 text-gray-400 hover:text-white hover:border-white/20";
+    } else if (variant === 'ghost') {
+        baseClass += " text-gray-400 hover:text-white hover:bg-white/5";
+    } else if (variant === 'gradient') {
+        baseClass += " bg-gradient-to-r from-[#818CF8] to-[#6366f1] text-white shadow-lg shadow-indigo-500/30 border-none";
+    }
+
+    return Button(text)
+        .icon(icon)
+        .className(`${baseClass} ${className}`)
+        .onPress(onClick)
+        .variant("text") 
+        .build();
+};
+
+export const StakentSidebarItem = ({ label, icon, active = false }: any): React.ReactElement => {
+    if (active) {
+        return Button(label)
+            .icon(icon ? Box().className(`${icon} w-5 h-5 text-white`).build() : null)
+            .className("w-full justify-start text-sm font-bold text-white bg-[#6366f1] shadow-[0_4px_20px_rgba(99,102,241,0.4)] rounded-xl mb-1 py-3 px-4")
+            .build();
+    }
+    return Button(label)
+        .icon(icon ? Box().className(`${icon} w-5 h-5 text-gray-400 group-hover:text-white transition-colors`).build() : null)
+        .variant("ghost")
+        .className("w-full justify-start text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5 rounded-xl group py-3 px-4")
+        .build();
+};
+
+export const StakentBadge = ({ text, type = 'default' }: any): React.ReactElement => {
+    let style = "text-[10px] px-2 py-0.5 rounded border font-bold uppercase tracking-wider";
+    if (type === 'hot') {
+        style = "bg-[#FF3B30] text-white border-none text-[9px] px-1.5 py-0.5 rounded-md shadow-lg shadow-red-500/20";
+    } else if (type === 'beta') {
+         style = "bg-[#6366f1]/10 text-[#818CF8] border-[#6366f1]/20";
+    } else if (type === 'new') {
+        style = "bg-white text-black border-none";
+    }
+    return Box().className(style).children(text).build();
+}

package/src/layout/index.ts

@@ -0,0 +1,11 @@
+export * from './Container';
+export * from './Row';
+export * from './Column';
+export * from './Spacer';
+export * from './Line';
+export * from './Center';
+export * from './ScrollView';
+export * from './Header';
+export * from './Sidebar';
+export * from './DashboardLayout';
+export * from './Scaffold';

package/src/structure/Banner/index.ts

@@ -0,0 +1,92 @@
+import React, { ReactElement } from 'react';
+import { FiboBuilder, createBuilder } from '../../core/builder';
+import { BaseProps, StatusType } from '../../core/types';
+
+const BannerInner = React.memo((props: any) => {
+    const { status, title, subtitle, className, style, ...rest } = props;
+    
+    return React.createElement(
+      'div',
+      {
+        className,
+        style,
+        ...rest,
+      },
+      React.createElement(
+        'div',
+        { className: 'flex flex-col gap-1' },
+        title &&
+          React.createElement(
+            'h4',
+            {
+              className: 'font-semibold text-sm uppercase tracking-wide opacity-90',
+            },
+            title
+          ),
+        subtitle &&
+          React.createElement(
+            'p',
+            {
+              className: 'opacity-80 text-sm',
+            },
+            subtitle
+          )
+      )
+    );
+});
+
+class BannerBuilder extends FiboBuilder {
+  private _status: StatusType = 'info';
+  private _title: string = '';
+  private _subtitle?: string;
+
+  constructor(title: string = '') {
+    super();
+    this._title = title;
+  }
+
+  status(value: StatusType): this {
+    this._status = value;
+    return this;
+  }
+
+  title(value: string): this {
+    this._title = value;
+    return this;
+  }
+
+  subtitle(value: string): this {
+    this._subtitle = value;
+    return this;
+  }
+
+  build(): ReactElement {
+    const classes = [
+      'fibo-banner',
+      `fibo-banner-${this._status}`,
+      ...this._classNames,
+    ];
+
+    const className = classes.filter(Boolean).join(' ');
+    
+    const props = {
+        status: this._status,
+        title: this._title,
+        subtitle: this._subtitle,
+        className: className,
+        style: this.getStyle(),
+        ...this._props
+    };
+
+    return React.createElement(BannerInner, props);
+  }
+}
+
+
+export const Banner = createBuilder(BannerBuilder);
+
+export interface BannerProps extends BaseProps {
+  status: StatusType;
+  title: string;
+  subtitle?: string;
+}

package/src/structure/Box/index.ts

@@ -0,0 +1,45 @@
+import React, { ReactElement } from 'react';
+import { FiboBuilder, createBuilder } from '../../core/builder';
+import { ChildrenProps } from '../../core/types';
+
+const BoxInner = React.memo((props: any) => {
+    const { className, style, children, ...rest } = props;
+    return React.createElement(
+      'div',
+      {
+        className,
+        style,
+        ...rest,
+      },
+      ...children
+    );
+});
+
+class BoxBuilder extends FiboBuilder {
+
+  build(): ReactElement {
+    const classes = [
+      'fibo-box',
+      ...this._classNames,
+    ];
+
+    const className = classes.filter(Boolean).join(' ');
+    const style = this.getStyle();
+    const children = this.processChildren();
+    
+    
+    const props = {
+        className,
+        style: style,
+        children: children,
+        ...this._props
+    };
+
+    return React.createElement(BoxInner, props);
+  }
+}
+
+
+export const Box = createBuilder(BoxBuilder);
+
+export interface BoxProps extends ChildrenProps {}

package/src/structure/Card/index.ts

@@ -0,0 +1,113 @@
+import React, { ReactElement } from 'react';
+import { FiboBuilder, createBuilder } from '../../core/builder';
+import { BaseProps } from '../../core/types';
+
+const CardInner = React.memo((props: any) => {
+    const { text, subtitle, number, color, className, style, children, ...rest } = props;
+    
+    return React.createElement(
+      'div',
+      {
+        className: `rounded-[24px] shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_8px_30px_rgb(0,0,0,0.08)] transition-shadow duration-300 border-none p-4 ${className || ''}`,
+        style: { backgroundColor: '#ffffff', ...style },
+        ...rest,
+      },
+      React.createElement(
+        'div',
+        { className: 'flex flex-col gap-2' },
+        text &&
+          React.createElement(
+            'h3',
+            {
+              className: 'font-semibold text-[var(--fibo-on-surface-variant)] text-sm uppercase tracking-wide',
+            },
+            text
+          ),
+        number &&
+          React.createElement(
+            'p',
+            {
+              className: 'font-bold text-[var(--fibo-on-surface)] text-3xl',
+            },
+            number
+          ),
+        subtitle &&
+          React.createElement(
+            'p',
+            {
+              className: 'text-[var(--fibo-on-surface-variant)] text-xs',
+            },
+            subtitle
+          ),
+        ...children
+      )
+    );
+});
+
+class CardBuilder extends FiboBuilder {
+  private _text: string = '';
+  private _subtitle?: string;
+  private _number?: string;
+  private _color?: string;
+
+  text(value: string): this {
+    this._text = value;
+    return this;
+  }
+
+  subtitle(value: string): this {
+    this._subtitle = value;
+    return this;
+  }
+
+  number(value: string): this {
+    this._number = value;
+    return this;
+  }
+
+  color(value: string): this {
+    this._color = value;
+    return this;
+  }
+
+  build(): ReactElement {
+    const colorClasses: Record<string, string> = {
+      green: 'border-l-green-500',
+      orange: 'border-l-orange-500',
+      red: 'border-l-red-500',
+      blue: 'border-l-blue-500',
+      purple: 'border-l-purple-500',
+    };
+
+    const className = [
+      'fibo-card',
+      this._color ? `border-l-4 ${colorClasses[this._color]}` : '',
+      ...this._classNames,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    const props = {
+        text: this._text,
+        subtitle: this._subtitle,
+        number: this._number,
+        color: this._color,
+        className: className,
+        style: this.getStyle(),
+        children: this.processChildren(),
+        ...this._props
+    };
+
+    return React.createElement(CardInner, props);
+  }
+}
+
+
+export const Card = createBuilder(CardBuilder);
+
+export interface CardProps extends BaseProps {
+  text: string;
+  subtitle?: string;
+  number?: string;
+  color?: string;
+}

package/src/structure/Collapse/index.ts

@@ -0,0 +1,122 @@
+import React, { ReactElement, ReactNode, useState } from 'react';
+import { FiboBuilder, createBuilder } from '../../core/builder';
+import { BaseProps } from '../../core/types';
+import { Box } from '../Box';
+import { Row } from '../../layout/Row';
+import { Text } from '../../content/Text';
+
+
+class CollapseBuilder extends FiboBuilder {
+  public _title: ReactNode | string = '';
+  public _content: ReactNode = null;
+  public _defaultExpanded: boolean = false;
+  public _expanded?: boolean; 
+  public _onToggle?: (isOpen: boolean) => void;
+
+  title(value: ReactNode | string): this {
+    this._title = value;
+    return this;
+  }
+
+  content(value: ReactNode): this {
+    this._content = value;
+    return this;
+  }
+
+  isOpen(value: boolean): this {
+    this._expanded = value;
+    return this;
+  }
+
+  defaultOpen(value: boolean): this {
+    this._defaultExpanded = value;
+    return this;
+  }
+
+  onToggle(handler: (isOpen: boolean) => void): this {
+    this._onToggle = handler;
+    return this;
+  }
+
+  build(): ReactElement {
+    return React.createElement(CollapseBase, {
+       builder: this,
+       ...this._props 
+    });
+  }
+}
+
+
+const CollapseBase = React.memo(({ builder }: { builder: CollapseBuilder }) => {
+    
+    
+    const b = builder as any; 
+    
+    
+    const isControlled = b._expanded !== undefined;
+    const [internalOpen, setInternalOpen] = useState(b._defaultExpanded);
+    
+    const isOpen = isControlled ? b._expanded : internalOpen;
+
+    const toggle = () => {
+        if (!isControlled) {
+            setInternalOpen(!isOpen);
+        }
+        if (b._onToggle) {
+            b._onToggle(!isOpen);
+        }
+    };
+
+    return Box()
+        .classNames(['w-full', 'border', 'border-gray-200', 'rounded-xl', 'overflow-hidden', 'bg-white', 'transition-all', 'duration-300'])
+        .className(b.getClassName())
+        .style(b.getStyle())
+        .children([
+            
+            Row()
+                .justifyContent("between")
+                .alignItems("center")
+                .classNames(['p-4', 'cursor-pointer', 'hover:bg-gray-50', 'transition-colors', 'select-none'])
+                .props({ onClick: toggle })
+                .children([
+                     typeof b._title === 'string' 
+                        ? Text(b._title).fontWeight(600).fontSize(15).color("#1F2937").build()
+                        : b._title,
+                     
+                     
+                     Box()
+                        .classNames(['transition-transform', 'duration-300'])
+                        .style({ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' })
+                        .children(
+                           
+                           React.createElement('svg', {
+                               width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round",
+                               className: "text-gray-400"
+                           }, React.createElement('polyline', { points: "6 9 12 15 18 9" }))
+                        ).build()
+                ]).build(),
+            
+            
+            Box()
+                .classNames(['transition-all', 'duration-300', 'ease-in-out', 'overflow-hidden'])
+                .style({ 
+                    maxHeight: isOpen ? '500px' : '0px', 
+                    opacity: isOpen ? 1 : 0, 
+                })
+                .children(
+                    Box().classNames(['p-4', 'pt-0', 'text-gray-600', 'text-sm']).children(b._content).build()
+                ).build()
+        ])
+        .build();
+});
+
+
+export const Collapse = createBuilder(CollapseBuilder);
+
+export interface CollapseProps extends BaseProps {
+  title: ReactNode | string;
+  content: ReactNode;
+  isOpen?: boolean;
+  defaultOpen?: boolean;
+  onToggle?: (isOpen: boolean) => void;
+}