@tachui/core 0.7.0-alpha1 → 0.8.0-alpha

package/src/gradients/presets.ts

@@ -1,422 +0,0 @@
-/**
- * Gradient Presets for TachUI
- * 
- * Common gradient patterns and presets for quick development.
- * Includes popular design system gradients and utility patterns.
- */
-
-import { LinearGradient, RadialGradient, AngularGradient } from './index'
-import type { 
-  GradientDefinition, 
-  StateGradientOptions,
-  LinearGradientOptions
-} from './types'
-
-/**
- * Common color schemes for gradients
- */
-export const GradientColors = {
-  // iOS-style colors
-  ios: {
-    blue: ['#007AFF', '#0051D2'] as const,
-    green: ['#30D158', '#248A3D'] as const,
-    orange: ['#FF9500', '#CC7700'] as const,
-    red: ['#FF3B30', '#CC2E26'] as const,
-    purple: ['#AF52DE', '#8C42B8'] as const,
-    pink: ['#FF2D92', '#CC2475'] as const,
-    teal: ['#5AC8FA', '#48A3C8'] as const,
-    indigo: ['#5856D6', '#4644AB'] as const
-  },
-
-  // Material Design colors
-  material: {
-    blue: ['#2196F3', '#1976D2'] as const,
-    green: ['#4CAF50', '#388E3C'] as const,
-    orange: ['#FF9800', '#F57C00'] as const,
-    red: ['#F44336', '#D32F2F'] as const,
-    purple: ['#9C27B0', '#7B1FA2'] as const,
-    pink: ['#E91E63', '#C2185B'] as const,
-    teal: ['#009688', '#00695C'] as const,
-    indigo: ['#3F51B5', '#303F9F'] as const
-  },
-
-  // Modern web gradients
-  modern: {
-    ocean: ['#667eea', '#764ba2'] as const,
-    sunset: ['#ff7e5f', '#feb47b'] as const,
-    forest: ['#134e5e', '#71b280'],
-    lavender: ['#a8edea', '#fed6e3'],
-    fire: ['#ff416c', '#ff4b2b'],
-    aurora: ['#4facfe', '#00f2fe'],
-    cosmic: ['#c471ed', '#f64f59'],
-    emerald: ['#11998e', '#38ef7d']
-  },
-
-  // Neutral gradients
-  neutral: {
-    lightGray: ['#f8f9fa', '#e9ecef'],
-    darkGray: ['#495057', '#212529'],
-    warmGray: ['#f5f5f4', '#e7e5e4'],
-    coolGray: ['#f1f5f9', '#e2e8f0'],
-    slate: ['#f8fafc', '#f1f5f9'],
-    stone: ['#fafaf9', '#f5f5f4']
-  }
-} as const
-
-/**
- * Predefined linear gradient presets
- */
-export const LinearGradientPresets = {
-  // Direction-based presets
-  vertical: (colors: [string, string]) => LinearGradient({
-    colors,
-    startPoint: 'top',
-    endPoint: 'bottom'
-  }),
-
-  horizontal: (colors: [string, string]) => LinearGradient({
-    colors,
-    startPoint: 'leading',
-    endPoint: 'trailing'
-  }),
-
-  diagonal: (colors: [string, string]) => LinearGradient({
-    colors,
-    startPoint: 'topLeading',
-    endPoint: 'bottomTrailing'
-  }),
-
-  diagonalReverse: (colors: [string, string]) => LinearGradient({
-    colors,
-    startPoint: 'topTrailing',
-    endPoint: 'bottomLeading'
-  }),
-
-  // Popular gradient patterns
-  iosBlue: () => LinearGradient({
-    colors: [...GradientColors.ios.blue],
-    startPoint: 'top',
-    endPoint: 'bottom'
-  }),
-
-  materialBlue: () => LinearGradient({
-    colors: [...GradientColors.material.blue],
-    startPoint: 'top',
-    endPoint: 'bottom'
-  }),
-
-  ocean: () => LinearGradient({
-    colors: [...GradientColors.modern.ocean],
-    startPoint: 'topLeading',
-    endPoint: 'bottomTrailing'
-  }),
-
-  sunset: () => LinearGradient({
-    colors: [...GradientColors.modern.sunset],
-    startPoint: 'leading',
-    endPoint: 'trailing'
-  }),
-
-  aurora: () => LinearGradient({
-    colors: [...GradientColors.modern.aurora],
-    startPoint: 'top',
-    endPoint: 'bottom'
-  }),
-
-  // Multi-color gradients
-  rainbow: () => LinearGradient({
-    colors: ['#ff0000', '#ff7f00', '#ffff00', '#00ff00', '#0000ff', '#8f00ff'],
-    startPoint: 'leading',
-    endPoint: 'trailing',
-    stops: [0, 16.66, 33.33, 50, 66.66, 83.33, 100]
-  }),
-
-  prism: () => LinearGradient({
-    colors: ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57'],
-    startPoint: 'topLeading',
-    endPoint: 'bottomTrailing'
-  }),
-
-  // Card and surface gradients
-  cardLight: () => LinearGradient({
-    colors: [...GradientColors.neutral.lightGray],
-    startPoint: 'top',
-    endPoint: 'bottom'
-  }),
-
-  cardDark: () => LinearGradient({
-    colors: [...GradientColors.neutral.darkGray],
-    startPoint: 'top',
-    endPoint: 'bottom'
-  }),
-
-  glass: () => LinearGradient({
-    colors: ['rgba(255, 255, 255, 0.25)', 'rgba(255, 255, 255, 0.05)'],
-    startPoint: 'top',
-    endPoint: 'bottom'
-  }),
-
-  frosted: () => LinearGradient({
-    colors: ['rgba(255, 255, 255, 0.1)', 'rgba(255, 255, 255, 0.3)'],
-    startPoint: 'topLeading',
-    endPoint: 'bottomTrailing'
-  })
-} as const
-
-/**
- * Predefined radial gradient presets
- */
-export const RadialGradientPresets = {
-  spotlight: (colors: [string, string]) => RadialGradient({
-    colors,
-    center: 'center',
-    startRadius: 0,
-    endRadius: 100
-  }),
-
-  vignette: (colors: [string, string]) => RadialGradient({
-    colors,
-    center: 'center',
-    startRadius: 50,
-    endRadius: 200
-  }),
-
-  buttonGlow: () => RadialGradient({
-    colors: ['rgba(255, 255, 255, 0.3)', 'rgba(255, 255, 255, 0)'],
-    center: 'center',
-    startRadius: 0,
-    endRadius: 50
-  }),
-
-  halo: () => RadialGradient({
-    colors: ['rgba(74, 172, 254, 0.4)', 'rgba(74, 172, 254, 0)'],
-    center: 'center',
-    startRadius: 20,
-    endRadius: 80
-  })
-} as const
-
-/**
- * Predefined angular/conic gradient presets
- */
-export const AngularGradientPresets = {
-  rainbow: () => AngularGradient({
-    colors: ['#ff0000', '#ff7f00', '#ffff00', '#00ff00', '#0000ff', '#8f00ff', '#ff0000'],
-    center: 'center',
-    startAngle: 0,
-    endAngle: 360
-  }),
-
-  loading: () => AngularGradient({
-    colors: ['#007AFF', 'rgba(0, 122, 255, 0.3)', '#007AFF'],
-    center: 'center',
-    startAngle: 0,
-    endAngle: 360
-  }),
-
-  progress: () => AngularGradient({
-    colors: ['#30D158', 'rgba(48, 209, 88, 0.3)', 'rgba(48, 209, 88, 0)'],
-    center: 'center',
-    startAngle: -90,
-    endAngle: 270
-  })
-} as const
-
-/**
- * Interactive gradient presets with state support
- */
-export const InteractiveGradientPresets = {
-  primaryButton: (): StateGradientOptions => ({
-    default: LinearGradientPresets.iosBlue(),
-    hover: LinearGradient({
-      colors: ['#1A8FFF', '#0062E3'],
-      startPoint: 'top',
-      endPoint: 'bottom'
-    }),
-    active: LinearGradient({
-      colors: ['#0066CC', '#004499'],
-      startPoint: 'top',
-      endPoint: 'bottom'
-    }),
-    disabled: '#CCCCCC',
-    animation: {
-      duration: 150,
-      easing: 'ease-out'
-    }
-  }),
-
-  secondaryButton: (): StateGradientOptions => ({
-    default: LinearGradientPresets.cardLight(),
-    hover: LinearGradient({
-      colors: ['#e9ecef', '#dee2e6'],
-      startPoint: 'top',
-      endPoint: 'bottom'
-    }),
-    active: LinearGradient({
-      colors: ['#dee2e6', '#ced4da'],
-      startPoint: 'top',
-      endPoint: 'bottom'
-    }),
-    animation: {
-      duration: 100,
-      easing: 'ease-out'
-    }
-  }),
-
-  dangerButton: (): StateGradientOptions => ({
-    default: LinearGradient({
-      colors: [...GradientColors.ios.red],
-      startPoint: 'top',
-      endPoint: 'bottom'
-    }),
-    hover: LinearGradient({
-      colors: ['#FF5A52', '#D13029'],
-      startPoint: 'top',
-      endPoint: 'bottom'
-    }),
-    active: LinearGradient({
-      colors: ['#E6342C', '#B32821'],
-      startPoint: 'top',
-      endPoint: 'bottom'
-    }),
-    disabled: '#CCCCCC',
-    animation: {
-      duration: 120,
-      easing: 'ease-out'
-    }
-  }),
-
-  successButton: (): StateGradientOptions => ({
-    default: LinearGradient({
-      colors: [...GradientColors.ios.green],
-      startPoint: 'top',
-      endPoint: 'bottom'
-    }),
-    hover: LinearGradient({
-      colors: ['#40D866', '#2C8F45'],
-      startPoint: 'top',
-      endPoint: 'bottom'
-    }),
-    active: LinearGradient({
-      colors: ['#28B946', '#1F7A35'],
-      startPoint: 'top',
-      endPoint: 'bottom'
-    }),
-    disabled: '#CCCCCC',
-    animation: {
-      duration: 120,
-      easing: 'ease-out'
-    }
-  }),
-
-  hoverCard: (): StateGradientOptions => ({
-    default: '#FFFFFF',
-    hover: LinearGradientPresets.glass(),
-    animation: {
-      duration: 200,
-      easing: 'ease'
-    }
-  }),
-
-  focusInput: (): StateGradientOptions => ({
-    default: '#FFFFFF',
-    focus: LinearGradient({
-      colors: ['#F0F8FF', '#E6F3FF'],
-      startPoint: 'top',
-      endPoint: 'bottom'
-    }),
-    disabled: '#F5F5F5',
-    animation: {
-      duration: 100,
-      easing: 'ease-in-out'
-    }
-  })
-} as const
-
-/**
- * Theme-aware gradient utilities
- */
-export const ThemeGradients = {
-  /**
-   * Create a theme-responsive gradient that switches between light and dark variants
-   */
-  createThemeGradient: (
-    lightGradient: GradientDefinition,
-    _darkGradient: GradientDefinition
-  ) => {
-    // This would integrate with the Asset system for theme reactivity
-    // Implementation depends on the current theme detection system
-    return lightGradient // Placeholder - would be enhanced with actual theme system
-  },
-
-  /**
-   * Auto-generate dark mode variant of a gradient
-   */
-  createDarkVariant: (gradient: GradientDefinition): GradientDefinition => {
-    // Placeholder for auto-generating dark variants
-    // Would analyze colors and create appropriate dark theme equivalents
-    return gradient
-  }
-} as const
-
-/**
- * Gradient composition utilities
- */
-export const GradientUtils = {
-  /**
-   * Reverse the colors in a gradient
-   */
-  reverse: (gradient: GradientDefinition): GradientDefinition => {
-    const newGradient = { ...gradient }
-    if ('colors' in newGradient.options) {
-      newGradient.options = {
-        ...newGradient.options,
-        colors: [...newGradient.options.colors].reverse()
-      }
-    }
-    return newGradient
-  },
-
-  /**
-   * Rotate a linear gradient by swapping start and end points
-   */
-  rotate: (gradient: LinearGradientOptions): LinearGradientOptions => {
-    return {
-      ...gradient,
-      startPoint: gradient.endPoint,
-      endPoint: gradient.startPoint
-    }
-  },
-
-  /**
-   * Add transparency to gradient colors
-   */
-  withOpacity: (gradient: GradientDefinition, _opacity: number): GradientDefinition => {
-    // Implementation would modify colors to add alpha values
-    // This is a placeholder for the concept
-    return gradient
-  },
-
-  /**
-   * Blend two gradients together
-   */
-  blend: (
-    gradient1: GradientDefinition, 
-    _gradient2: GradientDefinition, 
-    _ratio: number = 0.5
-  ): GradientDefinition => {
-    // Implementation would blend the colors mathematically
-    // This is a placeholder for the concept
-    return gradient1
-  }
-} as const
-
-/**
- * Export commonly used presets as default exports
- */
-export const CommonGradients = {
-  ...LinearGradientPresets,
-  ...RadialGradientPresets,
-  ...AngularGradientPresets,
-  ...InteractiveGradientPresets
-} as const