fiboui 1.0.0 → 1.0.1

package/README.md

@@ -1,101 +1,172 @@
-# FiboUI
+# 🏗️ FiboUI v1.0.0
 
-A Flutter/SwiftUI-inspired React UI framework with builder pattern and theme system.
+**A Flutter & SwiftUI-inspired React UI framework featuring a powerful Assembly Pattern and high-fidelity reactivity.**
 
-## Installation
+FiboUI brings the expressive, chainable syntax of modern mobile frameworks to React. Build complex, beautiful, and highly-performant UIs with **zero boilerplate** and **maximum readability**.
+
+---
+
+## ✨ Features
+
+- 🏗️ **The Assembly Pattern** - Components return builders for endless chaining.
+- ⚡ **Zero-Build Children** - Pass builders directly to `.children()`; they build implicitly.
+- 🔬 **Fine-Grained Reactivity** - Native support for Signals, Computed, and Observables.
+- 🎭 **Dynamic Multi-Theme** - Material, Cupertino, and Web themes with instant global switching.
+- 🎨 **Premium Aesthetics** - Built-in glassmorphism, micro-animations, and sleek dark modes.
+- 🔷 **100% Type-Safe** - Built with TypeScript for the best developer experience.
+
+---
+
+## 🚀 Installation
 
 ```bash
 npm install fiboui
 ```
 
-## Quick Start
+Import the styles in your main entry file:
 
 ```tsx
-import { FiboThemeProvider, Container, Text, Button, Row } from 'fiboui';
 import 'fiboui/dist/style.css';
+```
 
-function App() {
-  return (
-    <FiboThemeProvider theme="material">
-      {Container()
-        .padding("8")
-        .children([
-          Text("Hello FiboUI!")
-            .type("h1")
-            .fontSize(32)
-            .fontWeight("bold"),
-          
-          Row()
-            .spacing("4")
-            .children([
-              Button("Click me")
-                .variant("elevated")
-                .onPress(() => console.log("Clicked!")),
-              
-              Button("Outlined")
-                .variant("outlined")
-            ])
-        ])
-        .build()}
-    </FiboThemeProvider>
-  );
-}
+---
+
+## 🏗️ The Assembly Pattern
+
+### 1. Components as Builders
+Components return builder instances, allowing customization before rendering.
+
+```tsx
+StakentCard()
+  .className("p-8 hover:border-indigo-500/50")
+  .style({ backgroundColor: '#111' })
+  .children([ ... ])
+  .build()
 ```
 
-## Features
+### 2. Implicit Construction
+Builders in `.children()` are automatically finalized.
 
-- 🎨 **SwiftUI-Style Builder Pattern** - Chainable, expressive component composition
-- 🎭 **Multi-Theme System** - Material, Cupertino, and Web themes with dynamic switching
-- ⚡ **Tailwind CSS Integration** - Native Tailwind support with theme consistency
-- 📱 **Responsive Design** - Built-in responsive styling system
-- 🔷 **TypeScript-First** - Full type safety and IntelliSense support
+```tsx
+Column().children([
+  Text("Title").variant("h1"), 
+  Button("Action").onClick(handlePress)
+]).build()
+```
 
-## Themes
+---
 
-Switch between themes dynamically:
+## ⚡ Reactivity & State
 
+### Signals (Primitives)
 ```tsx
-import { useFiboTheme } from 'fiboui';
+const count = signal(0);
+
+Box()
+  .bindSignal(count)
+  .children([
+    Text(`Count: ${count.value}`),
+    Button("+").onPress(() => count.value++)
+  ])
+  .build()
+```
 
-function ThemeSwitcher() {
-  const { theme, setTheme } = useFiboTheme();
-  
-  return Row()
-    .spacing("md")
-    .children([
-      Button("Material").onPress(() => setTheme('material')),
-      Button("Cupertino").onPress(() => setTheme('cupertino')),
-      Button("Web").onPress(() => setTheme('web'))
+### Global Store
+```tsx
+const store = createStore({ theme: 'dark', user: 'John' });
+
+Box().observer().children([
+  Text(store.getState().user)
+])
+```
+
+---
+
+## 📱 Scaffold & Layout Shells
+
+The `Scaffold` and `DashboardLayout` components provide professional-grade app structures.
+
+```tsx
+import { Scaffold, Sidebar, Header, Text, StakentButton } from 'fiboui';
+
+Scaffold()
+  .header(
+    Header().height(80).className("px-6 bg-white shadow-sm").children([
+      Text("App Title").variant("h2"),
+      StakentButton({ text: "Profile", variant: "outline" })
     ])
-    .build();
-}
+  )
+  .sidebar(
+    Sidebar().width(240).children([
+       StakentSidebarItem({ label: "Home", active: true, icon: "home" }),
+       StakentSidebarItem({ label: "Settings", icon: "settings" })
+    ])
+  )
+  .fab(
+    Button("+").variant("fab").onPress(() => console.log("Added!"))
+  )
+  .children([
+    Text("Welcome to the main content area.")
+  ])
+  .build()
 ```
 
-## Components
+---
 
-### Layout
-- `Container` - Flexible container
-- `Row` - Horizontal layout
-- `Column` - Vertical layout
-- `Spacer` - Spacing element
-- `Center` - Centering wrapper
-- `Line` - Custom horizontal container
+## 🛒 Full Example: E-commerce Store
 
-### Content
-- `Text` - Text with typography styles
-- `Image` - Image with SwiftUI-like methods
+Combine **Signals**, **Store**, and **Builders** for a complete reactive application.
 
-### Interactive
-- `Button` - Button with variants
+```tsx
+import { signal, computed, createStore, Scaffold, Box, Text, Button, Badge, Row } from 'fiboui';
+
+// 1. Global Store
+const appStore = createStore({
+  cart: [],
+  products: [
+    { id: '1', name: 'MacBook Pro', price: 2499, image: '💻' },
+    { id: '2', name: 'iPhone 15', price: 999, image: '📱' }
+  ]
+});
+
+// 2. Reactive Computed Values
+const cartTotal = computed(() => {
+  const cart = appStore.getState().cart;
+  return cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
+});
+
+// 3. UI Component
+export function EcommerceApp() {
+  return Scaffold()
+    .header(
+      Header().children([
+        Text('🛒 FiboShop').variant("h2"),
+        Row().children([
+          Text(`Total: $${cartTotal.value.toFixed(2)}`).bindSignal(cartTotal),
+          Badge().text(appStore.getState().cart.length.toString()).observer()
+        ])
+      ])
+    )
+    .children([
+      Grid().columns(2).gap("md").children(
+        appStore.getState().products.map(product => 
+          Card().children([
+            Text(product.image).fontSize(40),
+            Text(product.name).fontWeight("bold"),
+            Button(`Add $${product.price}`).onPress(() => {
+              // Update Store & Watch UI React!
+              appStore.setState(s => ({ cart: [...s.cart, { ...product, quantity: 1 }] }));
+            })
+          ])
+        )
+      )
+    ])
+    .build();
+}
+```
 
-### Structure
-- `Card` - Information card
-- `Banner` - Status banner
-- `List` - Icon-title-subtitle list
-- `Tags` - Badge tags
-- `Box` - Container wrapper
-- `Table` - Data table
+---
 
-## License
+## 📄 License
 
-MIT
+MIT © 2025 FiboUI

package/dist/core/StateWrapper.d.ts

@@ -1,6 +1,9 @@
 import { ReactNode } from 'react';
 import { Observable, Signal } from './state';
 
+export declare function Observer({ children }: {
+    children: () => ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
 export declare const StateContext: import('react').Context<Map<string, any>>;
 export declare function useStateContext(): Map<string, any>;
 interface StateWrapperProps {

package/dist/core/builder.d.ts

@@ -15,6 +15,7 @@ export declare abstract class FiboBuilder {
     protected _signals: Set<Signal<any>>;
     protected _isObserver: boolean;
     id(value: string): this;
+    key(value: string | number): this;
     paddingHorizontal(value: string | number): this;
     paddingVertical(value: string | number): this;
     marginHorizontal(value: string | number): this;
@@ -37,10 +38,12 @@ export declare abstract class FiboBuilder {
     css(styles: CSSProperties): this;
     style(style: CSSProperties): this;
     props(props: Record<string, any>): this;
-    children(children: ReactNode | ReactNode[]): this;
+    protected _childFunction?: () => ReactNode;
+    children(children: ReactNode | ReactNode[] | (() => ReactNode)): this;
     protected getClassName(): string;
     protected getStyle(): CSSProperties;
     protected processChildren(): ReactNode[];
+    protected getChildFunction(): (() => ReactNode) | undefined;
     abstract build(): ReactElement;
 }
 type StyleBuilder<T> = T & {

package/dist/core/effects.d.ts

@@ -1,3 +1,4 @@
-import { MouseEvent } from 'react';
-
-export declare const createRipple: (event: MouseEvent<HTMLElement>, color?: string) => void;
+export declare const createRipple: (event: {
+    clientX: number;
+    clientY: number;
+}, button: HTMLElement, color?: string) => void;

package/dist/core/hooks.d.ts

@@ -0,0 +1,5 @@
+import { Signal, ComputedSignal, Store, Observable } from './state';
+
+export declare function useSignal<T>(signal: Signal<T> | ComputedSignal<T>): T;
+export declare function useStore<T>(store: Store<T>): T;
+export declare function useObservable<T>(obs: Observable<T>): T;

package/dist/core/index.d.ts

@@ -3,3 +3,4 @@ export * from './builder';
 export * from './component';
 export * from './state';
 export * from './StateWrapper';
+export * from './hooks';

package/dist/core/state.d.ts

@@ -1,37 +1,86 @@
-export type StateGetter<T> = () => T;
-export type StateSetter<T> = (value: T | ((prev: T) => T)) => void;
-export type StateHook<T> = [T, StateSetter<T>];
-export interface Signal<T> {
-    value: T;
-    subscribe(callback: (value: T) => void): () => void;
+export type Listener<T> = (value: T) => void;
+export type Unsubscribe = () => void;
+export interface Subscribable<T> {
+    subscribe(listener: Listener<T>): Unsubscribe;
+    subscribeEffect(effect: Effect): void;
+    unsubscribeEffect(effect: Effect): void;
 }
-export interface ComputedSignal<T> extends Omit<Signal<T>, 'value'> {
-    readonly value: T;
+export declare class Effect {
+    private fn;
+    private dependencies;
+    private _onDispose?;
+    constructor(fn: () => void);
+    run(): void;
+    track(dep: Subscribable<any>): void;
+    trigger(): void;
+    cleanup(): void;
+    dispose(): void;
+}
+export declare class Tracker {
+    private _onInvalidate;
+    private dependencies;
+    constructor(_onInvalidate: () => void);
+    execute<T>(fn: () => T): T;
+    track(dep: Subscribable<any>): void;
+    trigger(): void;
+    cleanup(): void;
+    dispose(): void;
+}
+export declare class Signal<T> implements Subscribable<T> {
+    private _value;
+    private listeners;
+    private effects;
+    constructor(_value: T);
+    get value(): T;
+    set value(newValue: T);
+    subscribe(listener: Listener<T>): Unsubscribe;
+    subscribeEffect(effect: Effect): void;
+    unsubscribeEffect(effect: Effect): void;
+    private notify;
 }
-type EffectCleanup = void | (() => void);
 export declare function signal<T>(initialValue: T): Signal<T>;
+export declare class ComputedSignal<T> implements Subscribable<T> {
+    private fn;
+    private listeners;
+    private effects;
+    private _value;
+    private _dirty;
+    private internalEffect;
+    constructor(fn: () => T);
+    get value(): T;
+    subscribe(listener: Listener<T>): Unsubscribe;
+    subscribeEffect(effect: Effect): void;
+    unsubscribeEffect(effect: Effect): void;
+    private notify;
+}
 export declare function computed<T>(fn: () => T): ComputedSignal<T>;
-export declare function effect(fn: () => EffectCleanup): () => void;
-export interface Observable<T> {
+export declare class Observable<T> implements Subscribable<T> {
+    private _value;
+    private listeners;
+    private effects;
+    constructor(_value: T);
     get(): T;
-    set(value: T): void;
-    subscribe(listener: (value: T) => void): () => void;
+    set(newValue: T): void;
+    subscribe(listener: Listener<T>): Unsubscribe;
+    subscribeEffect(effect: Effect): void;
+    unsubscribeEffect(effect: Effect): void;
+    private notify;
 }
 export declare function observable<T>(initialValue: T): Observable<T>;
-export interface Store<T> {
+export interface Store<T> extends Subscribable<T> {
     getState(): T;
-    setState(updater: Partial<T> | ((state: T) => Partial<T>)): void;
-    subscribe(listener: (state: T) => void): () => void;
+    setState(fn: Partial<T> | ((state: T) => Partial<T>)): void;
 }
-export declare function createStore<T extends object>(initialState: T): Store<T>;
-export interface ProviderConfig<T = any> {
-    key: string;
-    value: T;
-}
-export interface ConsumerConfig {
-    key: string;
+export declare class StoreImpl<T> implements Store<T> {
+    private state;
+    private listeners;
+    private effects;
+    constructor(state: T);
+    getState(): T;
+    setState(partial: Partial<T> | ((state: T) => Partial<T>)): void;
+    subscribe(listener: Listener<T>): Unsubscribe;
+    subscribeEffect(effect: Effect): void;
+    unsubscribeEffect(effect: Effect): void;
+    private notify;
 }
-export declare function registerProvider<T>(key: string, value: T): void;
-export declare function getProvider<T>(key: string): T | undefined;
-export declare function clearProviders(): void;
-export {};
+export declare function createStore<T>(initialState: T): Store<T>;

package/dist/effects-D16XdB_d.mjs

@@ -0,0 +1,10 @@
+const c = (i, t, s = "rgba(255, 255, 255, 0.3)") => {
+  if (!t) return;
+  const e = document.createElement("span"), l = Math.max(t.clientWidth, t.clientHeight), n = l / 2, r = t.getBoundingClientRect();
+  e.style.width = e.style.height = `${l}px`, e.style.left = `${i.clientX - r.left - n}px`, e.style.top = `${i.clientY - r.top - n}px`, e.style.position = "absolute", e.style.borderRadius = "50%", e.style.transform = "scale(0)", e.style.animation = "fibo-ripple 600ms linear", e.style.backgroundColor = s, e.style.pointerEvents = "none", (t.querySelector(".fibo-ripple-container") || t).appendChild(e), setTimeout(() => {
+    e.remove();
+  }, 600);
+};
+export {
+  c as createRipple
+};