fiboui 1.0.2 → 2.0.0

package/src/structure/Tags/index.ts

@@ -1,69 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { BaseProps } from '../../core/types';
-
-interface TagItem {
-  title: string;
-}
-
-const TagsInner = React.memo((props: any) => {
-    const { items, className, style, ...rest } = props;
-
-    const tags = items.map((item: TagItem, index: number) =>
-      React.createElement(
-        'span',
-        {
-          key: index,
-          className: 'fibo-tag',
-        },
-        item.title
-      )
-    );
-
-    return React.createElement(
-      'div',
-      {
-        className,
-        style,
-        ...rest,
-      },
-      ...tags
-    );
-});
-
-class TagsBuilder extends FiboBuilder {
-  private _items: TagItem[] = [];
-
-  constructor(items: TagItem[] = []) {
-    super();
-    this._items = items;
-  }
-
-  items(items: TagItem[]): this {
-    this._items = items;
-    return this;
-  }
-
-  build(): ReactElement {
-    const className = ['fibo-tags', 'flex', 'gap-2', 'flex-wrap', ...this._classNames]
-      .filter(Boolean)
-      .join(' ');
-      
-    const props = {
-        items: this._items,
-        className: className,
-        style: this.getStyle(),
-        ...this._props
-    };
-    return React.createElement(TagsInner, props);
-  }
-}
-
-
-export const Tags = createBuilder(TagsBuilder);
-
-export interface TagsProps extends BaseProps {
-  items: TagItem[];
-}
-
-export type { TagItem };

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

@@ -1,158 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../../core/builder';
-import { BaseProps } from '../../../core/types';
-import { Box } from '../../Box';
-import { Text } from '../../../content/Text';
-import { Row } from '../../../layout/Row';
-import { Column } from '../../../layout/Column';
-import { Spacer } from '../../../layout/Spacer';
-import { Button } from '../../../interactive/Button';
-import { Card } from '../../Card';
-import { Badge } from '../../../content/Badge';
-import { Icons } from '../../../core/icons';
-
-const AssetCardInner = React.memo((props: any) => {
-    const { image, title, price, likes, timeLeft, className, style, ...rest } = props;
-
-    return Card()
-      .classNames(['group', 'transition-all', 'duration-300', 'hover:-translate-y-1'])
-      .style({
-        width: '100%',
-        borderRadius: '24px',
-        border: 'none',
-        boxShadow: '0 10px 40px -10px rgba(0,0,0,0.05)',
-        padding: '16px',
-        background: '#fff',
-        ...style
-      })
-      .className(className)
-      .props(rest)
-      .children([
-        
-        Box().classNames(['relative', 'aspect-square', 'overflow-hidden', 'rounded-[20px]']).children([
-           Box()
-             .classNames(['w-full', 'h-full', 'bg-gray-200', 'bg-cover', 'bg-center'])
-             .style({ backgroundImage: `url(${image})` })
-             .build(),
-           
-           
-           Box()
-             .classNames(['absolute', 'top-3', 'right-3'])
-             .children(
-                Badge().variant("glass").shape("pill")
-                .icon(Box().classNames(['text-gray-400', 'hover:text-red-500']).children(Icons.Heart).build())
-                .text(`${likes}`)
-                .build()
-             ).build()
-        ]).build(),
-        
-        Spacer().height(16).build(),
-        
-        
-        Row().justifyContent("between").alignItems("start").children([
-           Column().gap(4).children([
-              Text(title).fontWeight(700).fontSize(18).color("#111827").build(), 
-              Badge().variant("neutral").text("Not for sale x1").build()
-           ]).build(),
-           Box().classNames(['text-gray-300']).children(Icons.More).build()
-        ]).build(),
-        
-        Spacer().height(16).build(),
-        
-        
-        Row().justifyContent("between").alignItems("center").children([
-           Column().gap(4).children([
-               Text("Current Bid").fontSize(11).fontWeight(600).color("#6B7280").build(),
-               Row().gap(4).alignItems("center").children([
-                   Box().classNames(['text-blue-500']).children(Icons.Eth).build(),
-                   Text(`${price} ETH`).fontSize(15).fontWeight(700).color("#111827").build(),
-               ]).build()
-           ]).build(),
-           
-           Button("Place a bid")
-             .variant("filled")
-             .shape("pill")
-             .shadow("soft")
-             .style({
-                backgroundColor: '#111827',
-                color: '#fff',
-                padding: '10px 20px',
-                fontSize: '13px',
-                fontWeight: 600
-             })
-             .build()
-        ]).build(),
-        
-         Spacer().height(12).build(),
-         
-         
-         timeLeft ? 
-           Badge()
-             .variant("accent")
-             .shape("rounded")
-             .icon(Box().children(Icons.Clock).build())
-             .text(timeLeft)
-             .style({ width: '100%' }) 
-             .build() 
-           : null
-  
-      ]).build();
-});
-
-class AssetCardBuilder extends FiboBuilder {
-  private _image: string = '';
-  private _title: string = '';
-  private _price: string | number = '';
-  private _likes: string | number = '';
-  private _timeLeft?: string;
-
-  image(url: string): this {
-    this._image = url;
-    return this;
-  }
-
-  title(text: string): this {
-    this._title = text;
-    return this;
-  }
-
-  price(value: string | number): this {
-    this._price = value;
-    return this;
-  }
-
-  likes(count: string | number): this {
-    this._likes = count;
-    return this;
-  }
-
-  timeLeft(time: string): this {
-    this._timeLeft = time;
-    return this;
-  }
-
-  build(): ReactElement {
-    const props = {
-        image: this._image,
-        title: this._title,
-        price: this._price,
-        likes: this._likes,
-        timeLeft: this._timeLeft,
-        className: this.getClassName(),
-        style: this.getStyle(),
-        ...this._props
-    };
-    return React.createElement(AssetCardInner, props);
-  }
-}
-
-
-export const AssetCard = createBuilder(AssetCardBuilder);
-
-export interface AssetCardProps extends BaseProps {
-  image: string;
-  title: string;
-  price: string | number;
-  likes: string | number;
-  timeLeft?: string;
-}

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

@@ -1,95 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../../core/builder';
-import { BaseProps } from '../../../core/types';
-import { Box } from '../../Box';
-import { Text } from '../../../content/Text';
-import { Row } from '../../../layout/Row';
-import { Column } from '../../../layout/Column';
-import { Card } from '../../Card';
-import { Icons } from '../../../core/icons';
-
-const CollectionCardInner = React.memo((props: any) => {
-    const { image, title, author, items, className, style, ...rest } = props;
-
-    return Card()
-        .classNames(['group', 'cursor-pointer'])
-        .style({
-           width: '100%',
-           borderRadius: '24px',
-           height: '320px',
-           position: 'relative',
-           overflow: 'hidden',
-           border: 'none',
-           ...style
-        })
-        .className(className)
-        .props(rest)
-        .children([
-            
-            Box().classNames(['absolute', 'inset-0', 'bg-cover', 'bg-center', 'transition-transform', 'duration-500'])
-                 .style({ backgroundImage: `url(${image})` }).build(),
-            
-            
-            Box().classNames(['absolute', 'inset-0', 'bg-gradient-to-t', 'from-black/80', 'via-black/20', 'to-transparent']).build(),
-            
-            
-             Column().classNames(['absolute', 'bottom-0', 'left-0', 'p-6']).gap(4).children([
-                Text(items).color("white").fontSize(12).classNames(['opacity-90', 'mb-1', 'uppercase', 'tracking-wider']).fontWeight(600).build(),
-                Text(title).color("white").fontSize(22).fontWeight(700).build(),
-                 Row().gap(6).alignItems("center").children([
-                    Text("Created by").color("white").fontSize(13).classNames(['opacity-80']).build(),
-                    Text(author).color("white").fontSize(13).fontWeight(600).build(),
-                    Icons.Verify
-                 ]).build()
-            ]).build()
-        ]).build();
-});
-
-class CollectionCardBuilder extends FiboBuilder {
-  private _image: string = '';
-  private _title: string = '';
-  private _author: string = '';
-  private _items: string = '';
-
-  image(url: string): this {
-    this._image = url;
-    return this;
-  }
-
-  title(text: string): this {
-    this._title = text;
-    return this;
-  }
-
-  author(text: string): this {
-    this._author = text;
-    return this;
-  }
-
-  items(text: string): this {
-    this._items = text;
-    return this;
-  }
-
-  build(): ReactElement {
-    const props = {
-        image: this._image,
-        title: this._title,
-        author: this._author,
-        items: this._items,
-        className: this.getClassName(),
-        style: this.getStyle(),
-        ...this._props
-    };
-    return React.createElement(CollectionCardInner, props);
-  }
-}
-
-
-export const CollectionCard = createBuilder(CollectionCardBuilder);
-
-export interface CollectionCardProps extends BaseProps {
-  image: string;
-  title: string;
-  author: string;
-}

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

@@ -1,127 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../../core/builder';
-import { BaseProps } from '../../../core/types';
-import { Card } from '../../Card';
-import { Image } from '../../../content/Image';
-import { Text } from '../../../content/Text';
-import { Box } from '../../Box';
-
-const ContentCardInner = React.memo((props: any) => {
-    const { 
-        image, 
-        title, 
-        description, 
-        date, 
-        source, 
-        className, 
-        style 
-    } = props;
-
-    return Card()
-        .className(`overflow-hidden hover:shadow-lg transition-shadow duration-300 ${className}`)
-        .style(style)
-        .children([
-            
-            image ? Image()
-                .src(image)
-                .className("w-full object-cover rounded-[20px] mb-4") 
-                .style({ height: '200px' })
-                .build() : null,
-
-            
-            Box()
-                .className("flex flex-col gap-2")
-                .children([
-                    
-                    title ? Text(title)
-                        .fontSize(18)
-                        .fontWeight(700)
-                        .color("#111827")
-                        .lineHeight(1.25)
-                        .build() : null,
-                    
-                    
-                    description ? Text(description)
-                         .fontSize(14)
-                         .color("#4B5563")
-                         .lineHeight(1.5)
-                         .className("line-clamp-2")
-                         .build() : null,
-
-                    
-                    (source || date) ? Box()
-                        .className("flex items-center gap-2 mt-2")
-                        .children([
-                           Text(`${source ? source : ''}${source && date ? ' • ' : ''}${date ? date : ''}`)
-                                .fontSize(11)
-                                .fontWeight(600)
-                                .color("#9CA3AF")
-                                .textTransform("uppercase")
-                                .letterSpacing("0.05em")
-                                .build()
-                        ])
-                        .build() : null
-                ])
-                .build()
-        ])
-        .build();
-});
-
-class ContentCardBuilder extends FiboBuilder {
-  private _image?: string;
-  private _title?: string;
-  private _description?: string;
-  private _date?: string;
-  private _source?: string;
-
-  image(url: string): this {
-    this._image = url;
-    return this;
-  }
-
-  title(text: string): this {
-    this._title = text;
-    return this;
-  }
-
-  description(text: string): this {
-    this._description = text;
-    return this;
-  }
-
-  date(text: string): this {
-    this._date = text;
-    return this;
-  }
-
-  source(text: string): this {
-    this._source = text;
-    return this;
-  }
-
-  build(): ReactElement {
-    const props = {
-        image: this._image,
-        title: this._title,
-        description: this._description,
-        date: this._date,
-        source: this._source,
-        className: this.getClassName(),
-        style: this.getStyle(),
-        ...this._props
-    };
-    
-    return React.createElement(ContentCardInner, props);
-  }
-}
-
-
-export const ContentCard = createBuilder(ContentCardBuilder);
-
-export interface ContentCardProps extends BaseProps {
-  image?: string;
-  title?: string;
-  description?: string;
-  date?: string;
-  source?: string;
-}

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

@@ -1,152 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FiboBuilder, createBuilder } from '../../../core/builder';
-import { BaseProps } from '../../../core/types';
-import { Box } from '../../Box';
-import { Text } from '../../../content/Text';
-import { Row } from '../../../layout/Row';
-import { Column } from '../../../layout/Column';
-import { Spacer } from '../../../layout/Spacer';
-import { Button } from '../../../interactive/Button';
-import { Card } from '../../Card';
-import { Avatar } from '../../../content/Avatar';
-import { Icons } from '../../../core/icons';
-
-const ProfileCardInner = React.memo((props: any) => {
-    const { banner, avatar, name, handle, stats, className, style, ...rest } = props;
-
-    return Card()
-        .style({
-          width: '100%',
-          borderRadius: '24px',
-          border: 'none',
-          boxShadow: '0 10px 40px -10px rgba(0,0,0,0.05)',
-          padding: '0',
-          overflow: 'hidden',
-          background: '#fff',
-          ...style
-        })
-        .className(className)
-        .props(rest)
-        .children([
-            
-            Box()
-              .style({ height: '100px', backgroundImage: `url(${banner})`, backgroundSize: 'cover', backgroundPosition: 'center' })
-              .build(),
-              
-            
-            Column().padding(20).alignItems("center").style({ marginTop: '-50px' }).children([
-                
-                Avatar()
-                   .image(avatar)
-                   .size(80)
-                   .border('4px solid #fff')
-                   .build(),
-                   
-                Spacer().height(12).build(),
-                
-                
-                Row().gap(6).alignItems("center").children([
-                    Text(name).fontWeight(700).fontSize(18).color("#111827").build(),
-                    Icons.Verify
-                ]).build(),
-                
-                Text(handle).fontSize(13).color("#6B7280").style({ marginTop: '4px' }).build(),
-                
-                Spacer().height(16).build(),
-                
-                
-                Button("+ Follow")
-                   .variant("filled")
-                   .shape("pill")
-                   .shadow("soft")
-                   .style({
-                       backgroundColor: '#3B82F6',
-                       color: '#fff',
-                       padding: '8px 24px',
-                       fontSize: '13px',
-                       fontWeight: 600
-                   })
-                   .build(),
-    
-                Spacer().height(24).build(),
-                
-                
-                Row().classNames(['w-full', 'border-t', 'border-gray-100', 'pt-4']).justifyContent("between").children([
-                    Column().alignItems("center").gap(4).children([
-                        Text(stats.items).fontWeight(700).fontSize(14).build(),
-                        Text("Items").fontSize(11).color("#9CA3AF").build()
-                    ]).build(),
-                    Column().alignItems("center").gap(4).children([
-                        Text(stats.owners).fontWeight(700).fontSize(14).build(),
-                        Text("Owners").fontSize(11).color("#9CA3AF").build()
-                    ]).build(),
-                     Column().alignItems("center").gap(4).children([
-                        Row().alignItems("center").gap(2).children([
-                            Box().width(8).children(Icons.Eth).build(),
-                            Text(stats.floor).fontWeight(700).fontSize(14).build(),
-                        ]).build(),
-                        Text("Floor").fontSize(11).color("#9CA3AF").build()
-                    ]).build(),
-                ]).build()
-    
-            ]).build()
-        ]).build();
-});
-
-class ProfileCardBuilder extends FiboBuilder {
-  private _banner: string = '';
-  private _avatar: string = '';
-  private _name: string = '';
-  private _handle: string = '';
-  private _stats: { items: string, owners: string, floor: string } = { items: '0', owners: '0', floor: '0' };
-
-  banner(url: string): this {
-    this._banner = url;
-    return this;
-  }
-
-  avatar(url: string): this {
-    this._avatar = url;
-    return this;
-  }
-
-  name(text: string): this {
-    this._name = text;
-    return this;
-  }
-
-  handle(text: string): this {
-    this._handle = text;
-    return this;
-  }
-
-  stats(stats: { items: string, owners: string, floor: string }): this {
-    this._stats = stats;
-    return this;
-  }
-
-  build(): ReactElement {
-    const props = {
-        banner: this._banner,
-        avatar: this._avatar,
-        name: this._name,
-        handle: this._handle,
-        stats: this._stats,
-        className: this.getClassName(),
-        style: this.getStyle(),
-        ...this._props
-    };
-    return React.createElement(ProfileCardInner, props);
-  }
-}
-
-
-export const ProfileCard = createBuilder(ProfileCardBuilder);
-
-export interface ProfileCardProps extends BaseProps {
-  banner: string;
-  avatar: string;
-  name: string;
-  handle: string;
-  stats: { items: string, owners: string, floor: string };
-}

package/src/structure/cards/index.ts

@@ -1,5 +0,0 @@
-export * from './AssetCard';
-export * from './ProfileCard';
-export * from './CollectionCard';
-export * from './ContentCard';
-export * from './variants';