fiboui 1.0.0

package/src/theme/cupertino.ts

@@ -0,0 +1,85 @@
+import { FiboTheme } from './types';
+
+export const cupertinoTheme: FiboTheme = {
+  name: 'cupertino',
+  colors: {
+    primary: '#007AFF',
+    secondary: '#AF52DE',
+    background: '#FFFFFF',
+    surface: '#F2F2F7',
+    error: '#FF3B30',
+    success: '#34C759',
+    warning: '#FF9500',
+    info: '#5AC8FA',
+    onPrimary: '#FFFFFF',
+    onSecondary: '#FFFFFF',
+    onBackground: '#000000',
+    onSurface: '#000000',
+    onError: '#FFFFFF',
+  },
+  typography: {
+    h1: {
+      fontSize: '34px',
+      fontWeight: 700,
+      letterSpacing: '0.37px',
+    },
+    h2: {
+      fontSize: '28px',
+      fontWeight: 700,
+      letterSpacing: '0.36px',
+    },
+    h3: {
+      fontSize: '22px',
+      fontWeight: 600,
+      letterSpacing: '0.35px',
+    },
+    h4: {
+      fontSize: '20px',
+      fontWeight: 600,
+    },
+    h5: {
+      fontSize: '17px',
+      fontWeight: 600,
+      letterSpacing: '-0.41px',
+    },
+    h6: {
+      fontSize: '15px',
+      fontWeight: 600,
+      letterSpacing: '-0.24px',
+    },
+    body: {
+      fontSize: '17px',
+      fontWeight: 400,
+      letterSpacing: '-0.41px',
+    },
+    caption: {
+      fontSize: '13px',
+      fontWeight: 400,
+      letterSpacing: '-0.08px',
+    },
+    label: {
+      fontSize: '15px',
+      fontWeight: 500,
+      letterSpacing: '-0.24px',
+    },
+  },
+  spacing: {
+    xs: '4px',
+    sm: '8px',
+    md: '12px',
+    lg: '20px',
+    xl: '32px',
+  },
+  borderRadius: {
+    sm: '8px',
+    md: '12px',
+    lg: '20px',
+    full: '9999px',
+  },
+  shadows: {
+    sm: '0 1px 3px rgba(0,0,0,0.08)',
+    md: '0 2px 8px rgba(0,0,0,0.1)',
+    lg: '0 4px 16px rgba(0,0,0,0.12)',
+  },
+  fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif',
+};

package/src/theme/index.ts

@@ -0,0 +1,5 @@
+export * from './types';
+export * from './material';
+export * from './cupertino';
+export * from './web';
+export * from './provider';

package/src/theme/material.ts

@@ -0,0 +1,86 @@
+import { FiboTheme } from './types';
+
+export const materialTheme: FiboTheme = {
+  name: 'material',
+  colors: {
+    primary: '#6200EE',
+    primaryVariant: '#3700B3',
+    secondary: '#03DAC6',
+    secondaryVariant: '#018786',
+    background: '#FFFFFF',
+    surface: '#FFFFFF',
+    error: '#B00020',
+    success: '#4CAF50',
+    warning: '#FF9800',
+    info: '#2196F3',
+    onPrimary: '#FFFFFF',
+    onSecondary: '#000000',
+    onBackground: '#000000',
+    onSurface: '#000000',
+    onError: '#FFFFFF',
+  },
+  typography: {
+    h1: {
+      fontSize: '96px',
+      fontWeight: 300,
+      letterSpacing: '-1.5px',
+    },
+    h2: {
+      fontSize: '60px',
+      fontWeight: 300,
+      letterSpacing: '-0.5px',
+    },
+    h3: {
+      fontSize: '48px',
+      fontWeight: 400,
+    },
+    h4: {
+      fontSize: '34px',
+      fontWeight: 400,
+      letterSpacing: '0.25px',
+    },
+    h5: {
+      fontSize: '24px',
+      fontWeight: 400,
+    },
+    h6: {
+      fontSize: '20px',
+      fontWeight: 500,
+      letterSpacing: '0.15px',
+    },
+    body: {
+      fontSize: '16px',
+      fontWeight: 400,
+      letterSpacing: '0.5px',
+    },
+    caption: {
+      fontSize: '12px',
+      fontWeight: 400,
+      letterSpacing: '0.4px',
+    },
+    label: {
+      fontSize: '14px',
+      fontWeight: 500,
+      letterSpacing: '1.25px',
+    },
+  },
+  spacing: {
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '24px',
+    xl: '32px',
+  },
+  borderRadius: {
+    sm: '4px',
+    md: '8px',
+    lg: '16px',
+    full: '9999px',
+  },
+  shadows: {
+    sm: '0 2px 4px rgba(0,0,0,0.1)',
+    md: '0 4px 8px rgba(0,0,0,0.12)',
+    lg: '0 8px 16px rgba(0,0,0,0.14)',
+  },
+  fontFamily: 'Roboto, sans-serif',
+};

package/src/theme/provider.tsx

@@ -0,0 +1,76 @@
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { FiboTheme } from './types';
+import { FiboThemeName } from '../core/types';
+import { materialTheme } from './material';
+import { cupertinoTheme } from './cupertino';
+import { webTheme } from './web';
+
+interface FiboThemeContextValue {
+  theme: FiboTheme;
+  themeName: FiboThemeName;
+  setTheme: (name: FiboThemeName) => void;
+}
+
+const FiboThemeContext = createContext<FiboThemeContextValue | undefined>(undefined);
+
+const themes: Record<FiboThemeName, FiboTheme> = {
+  material: materialTheme,
+  cupertino: cupertinoTheme,
+  web: webTheme,
+};
+
+interface FiboThemeProviderProps {
+  theme?: FiboThemeName;
+  children: ReactNode;
+}
+
+export function FiboThemeProvider({ 
+  theme: initialTheme = 'material', 
+  children 
+}: FiboThemeProviderProps) {
+  const [themeName, setThemeName] = useState<FiboThemeName>(initialTheme);
+  const [theme, setThemeObject] = useState<FiboTheme>(themes[initialTheme]);
+
+  useEffect(() => {
+    const newTheme = themes[themeName];
+    setThemeObject(newTheme);
+    
+    if (typeof document !== 'undefined') {
+      const root = document.documentElement;
+      
+      
+      root.classList.remove('fibo-theme-material', 'fibo-theme-cupertino', 'fibo-theme-web');
+      
+      
+      root.classList.add(`fibo-theme-${themeName}`);
+      
+      
+      root.style.setProperty('--fibo-primary', newTheme.colors.primary);
+      root.style.setProperty('--fibo-secondary', newTheme.colors.secondary);
+      root.style.setProperty('--fibo-background', newTheme.colors.background);
+      root.style.setProperty('--fibo-surface', newTheme.colors.surface);
+      root.style.setProperty('--fibo-error', newTheme.colors.error);
+      root.style.setProperty('--fibo-font-family', newTheme.fontFamily);
+    }
+  }, [themeName]);
+
+  const value: FiboThemeContextValue = {
+    theme,
+    themeName,
+    setTheme: setThemeName,
+  };
+
+  return (
+    <FiboThemeContext.Provider value={value}>
+      {children}
+    </FiboThemeContext.Provider>
+  );
+}
+
+export function useFiboTheme(): FiboThemeContextValue {
+  const context = useContext(FiboThemeContext);
+  if (!context) {
+    throw new Error('useFiboTheme must be used within a FiboThemeProvider');
+  }
+  return context;
+}

package/src/theme/types.ts

@@ -0,0 +1,62 @@
+import { FiboThemeName, TextStyle } from '../core/types';
+
+export interface ThemeColors {
+  primary: string;
+  primaryVariant?: string;
+  secondary: string;
+  secondaryVariant?: string;
+  background: string;
+  surface: string;
+  error: string;
+  success?: string;
+  warning?: string;
+  info?: string;
+  onPrimary: string;
+  onSecondary: string;
+  onBackground: string;
+  onSurface: string;
+  onError: string;
+}
+
+export interface ThemeTypography {
+  h1: TextStyle;
+  h2: TextStyle;
+  h3: TextStyle;
+  h4: TextStyle;
+  h5: TextStyle;
+  h6: TextStyle;
+  body: TextStyle;
+  caption: TextStyle;
+  label: TextStyle;
+}
+
+export interface ThemeSpacing {
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+}
+
+export interface ThemeBorderRadius {
+  sm: string;
+  md: string;
+  lg: string;
+  full: string;
+}
+
+export interface ThemeShadows {
+  sm: string;
+  md: string;
+  lg: string;
+}
+
+export interface FiboTheme {
+  name: FiboThemeName;
+  colors: ThemeColors;
+  typography: ThemeTypography;
+  spacing: ThemeSpacing;
+  borderRadius: ThemeBorderRadius;
+  shadows: ThemeShadows;
+  fontFamily: string;
+}

package/src/theme/web.ts

@@ -0,0 +1,82 @@
+import { FiboTheme } from './types';
+
+export const webTheme: FiboTheme = {
+  name: 'web',
+  colors: {
+    primary: '#3B82F6',
+    secondary: '#8B5CF6',
+    background: '#FFFFFF',
+    surface: '#F9FAFB',
+    error: '#EF4444',
+    success: '#10B981',
+    warning: '#F59E0B',
+    info: '#06B6D4',
+    onPrimary: '#FFFFFF',
+    onSecondary: '#FFFFFF',
+    onBackground: '#111827',
+    onSurface: '#374151',
+    onError: '#FFFFFF',
+  },
+  typography: {
+    h1: {
+      fontSize: '60px',
+      fontWeight: 800,
+      letterSpacing: '-0.02em',
+    },
+    h2: {
+      fontSize: '48px',
+      fontWeight: 700,
+      letterSpacing: '-0.01em',
+    },
+    h3: {
+      fontSize: '36px',
+      fontWeight: 700,
+    },
+    h4: {
+      fontSize: '30px',
+      fontWeight: 600,
+    },
+    h5: {
+      fontSize: '24px',
+      fontWeight: 600,
+    },
+    h6: {
+      fontSize: '20px',
+      fontWeight: 600,
+    },
+    body: {
+      fontSize: '16px',
+      fontWeight: 400,
+      lineHeight: '1.5',
+    },
+    caption: {
+      fontSize: '14px',
+      fontWeight: 400,
+      lineHeight: '1.4',
+    },
+    label: {
+      fontSize: '14px',
+      fontWeight: 500,
+      letterSpacing: '0.01em',
+    },
+  },
+  spacing: {
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '24px',
+    xl: '32px',
+  },
+  borderRadius: {
+    sm: '6px',
+    md: '8px',
+    lg: '12px',
+    full: '9999px',
+  },
+  shadows: {
+    sm: '0 1px 2px rgba(0,0,0,0.05)',
+    md: '0 4px 6px rgba(0,0,0,0.07)',
+    lg: '0 10px 15px rgba(0,0,0,0.1)',
+  },
+  fontFamily: 'Inter, system-ui, sans-serif',
+};