@tachui/core 0.7.0-alpha1 → 0.7.1-alpha

package/src/modifiers/core.ts

@@ -1,521 +0,0 @@
-/**
- * Core SwiftUI Modifiers
- *
- * Implementation of the most commonly used SwiftUI modifiers
- * for layout, appearance, and interaction.
- */
-
-import type { Asset } from '../assets/Asset'
-import type { Signal } from '../reactive/types'
-import type { Dimension } from '../constants/layout'
-import type { GradientDefinition } from '../gradients/types'
-import {
-  AnimationModifier,
-  AppearanceModifier,
-  InteractionModifier,
-  LayoutModifier,
-  LifecycleModifier,
-} from './base'
-import { BackgroundModifier } from './background'
-import type {
-  AnimationModifierProps,
-  AppearanceModifierProps,
-  LayoutModifierProps,
-  Modifier,
-} from './types'
-
-/**
- * Layout Modifiers
- */
-export const layoutModifiers = {
-  /**
-   * Set foreground (text) color
-   */
-  foregroundColor(color: string | Signal<string> | any): Modifier {
-    return new AppearanceModifier({ foregroundColor: color })
-  },
-
-  /**
-   * Set frame dimensions with support for infinity
-   */
-  frame(
-    width?: Dimension,
-    height?: Dimension,
-    options?: Omit<LayoutModifierProps['frame'], 'width' | 'height'>
-  ): Modifier {
-    return new LayoutModifier({
-      frame: {
-        width,
-        height,
-        ...options,
-      },
-    })
-  },
-
-  /**
-   * Set padding on all sides
-   */
-  padding(value: number): Modifier {
-    return new LayoutModifier({ padding: value })
-  },
-
-  /**
-   * Set padding with detailed control
-   */
-  paddingDetailed(options: LayoutModifierProps['padding']): Modifier {
-    return new LayoutModifier({ padding: options })
-  },
-
-  /**
-   * Set horizontal and vertical padding
-   */
-  paddingSymmetric(horizontal?: number, vertical?: number): Modifier {
-    return new LayoutModifier({
-      padding: {
-        left: horizontal,
-        right: horizontal,
-        top: vertical,
-        bottom: vertical,
-      },
-    })
-  },
-
-  /**
-   * Set margin on all sides
-   */
-  margin(value: number): Modifier {
-    return new LayoutModifier({ margin: value })
-  },
-
-  /**
-   * Set margin with detailed control
-   */
-  marginDetailed(options: LayoutModifierProps['margin']): Modifier {
-    return new LayoutModifier({ margin: options })
-  },
-
-  /**
-   * Set content alignment
-   */
-  alignment(value: LayoutModifierProps['alignment']): Modifier {
-    return new LayoutModifier({ alignment: value })
-  },
-
-  /**
-   * Set layout priority for ZStack container sizing and flexible layout
-   * Higher priority views determine container size in ZStack
-   */
-  layoutPriority(priority: number | Signal<number>): Modifier {
-    return new LayoutModifier({ layoutPriority: priority })
-  },
-}
-
-/**
- * Appearance Modifiers
- */
-export const appearanceModifiers = {
-  /**
-   * Set foreground (text) color
-   */
-  foregroundColor(color: string | Asset | Signal<string>): Modifier {
-    return new AppearanceModifier({ foregroundColor: color })
-  },
-
-  /**
-   * Set background color
-   */
-  backgroundColor(color: string | Asset | Signal<string>): Modifier {
-    return new AppearanceModifier({ backgroundColor: color })
-  },
-
-  /**
-   * Set background (supports gradients)
-   */
-  background(value: string | GradientDefinition | Asset): Modifier {
-    return new BackgroundModifier({ background: value })
-  },
-
-  /**
-   * Set font properties
-   */
-  font(options: AppearanceModifierProps['font']): Modifier {
-    return new AppearanceModifier({ font: options })
-  },
-
-  /**
-   * Set font size
-   */
-  fontSize(size: number | string): Modifier {
-    return new AppearanceModifier({ font: { size } })
-  },
-
-  /**
-   * Set font weight
-   */
-  fontWeight(weight: NonNullable<AppearanceModifierProps['font']>['weight']): Modifier {
-    return new AppearanceModifier({ font: { weight } })
-  },
-
-  /**
-   * Set font family
-   */
-  fontFamily(family: string): Modifier {
-    return new AppearanceModifier({ font: { family } })
-  },
-
-  /**
-   * Set opacity
-   */
-  opacity(value: number | Signal<number>): Modifier {
-    return new AppearanceModifier({ opacity: value })
-  },
-
-  /**
-   * Set corner radius (enhanced)
-   */
-  cornerRadius(radius: number | Signal<number>): Modifier {
-    return new AppearanceModifier({ cornerRadius: radius })
-  },
-
-  /**
-   * Set border
-   */
-  border(
-    width: number,
-    color: string | Asset = '#000000',
-    style: 'solid' | 'dashed' | 'dotted' = 'solid'
-  ): Modifier {
-    return new AppearanceModifier({
-      border: { width, color, style },
-    })
-  },
-
-  /**
-   * Set detailed border properties
-   */
-  borderDetailed(options: AppearanceModifierProps['border']): Modifier {
-    return new AppearanceModifier({ border: options })
-  },
-
-  /**
-   * Add shadow
-   */
-  shadow(options: AppearanceModifierProps['shadow']): Modifier {
-    return new AppearanceModifier({ shadow: options })
-  },
-
-  /**
-   * Add drop shadow with common settings
-   */
-  dropShadow(
-    x: number = 0,
-    y: number = 2,
-    radius: number = 4,
-    color: string = 'rgba(0,0,0,0.25)'
-  ): Modifier {
-    return new AppearanceModifier({
-      shadow: { x, y, radius, color },
-    })
-  },
-}
-
-/**
- * Interaction Modifiers
- */
-export const interactionModifiers = {
-  /**
-   * Add tap handler
-   */
-  onTap(handler: (event: MouseEvent) => void): Modifier {
-    return new InteractionModifier({ onTap: handler })
-  },
-
-  /**
-   * Add hover handler
-   */
-  onHover(handler: (isHovered: boolean) => void): Modifier {
-    return new InteractionModifier({ onHover: handler })
-  },
-
-  /**
-   * Add focus handler
-   */
-  onFocus(handler: (isFocused: boolean) => void): Modifier {
-    return new InteractionModifier({ onFocus: handler })
-  },
-
-  /**
-   * Set disabled state
-   */
-  disabled(isDisabled: boolean | Signal<boolean> = true): Modifier {
-    return new InteractionModifier({ disabled: isDisabled })
-  },
-
-  /**
-   * Set accessibility label
-   */
-  accessibilityLabel(label: string): Modifier {
-    return new InteractionModifier({ accessibilityLabel: label })
-  },
-
-  /**
-   * Set accessibility hint
-   */
-  accessibilityHint(hint: string): Modifier {
-    return new InteractionModifier({ accessibilityHint: hint })
-  },
-}
-
-/**
- * Animation Modifiers
- */
-export const animationModifiers = {
-  /**
-   * Add transition
-   */
-  transition(
-    property: string = 'all',
-    duration: number = 300,
-    easing: string = 'ease',
-    delay: number = 0
-  ): Modifier {
-    return new AnimationModifier({
-      transition: { property, duration, easing, delay },
-    })
-  },
-
-  /**
-   * Add detailed transition
-   */
-  transitionDetailed(options: AnimationModifierProps['transition']): Modifier {
-    return new AnimationModifier({ transition: options })
-  },
-
-  /**
-   * Add animation
-   */
-  animation(options: AnimationModifierProps['animation']): Modifier {
-    return new AnimationModifier({ animation: options })
-  },
-
-  /**
-   * Add fade in animation
-   */
-  fadeIn(duration: number = 300): Modifier {
-    return new AnimationModifier({
-      animation: {
-        keyframes: {
-          '0%': { opacity: '0' },
-          '100%': { opacity: '1' },
-        },
-        duration,
-        easing: 'ease-out',
-      },
-    })
-  },
-
-  /**
-   * Add fade out animation
-   */
-  fadeOut(duration: number = 300): Modifier {
-    return new AnimationModifier({
-      animation: {
-        keyframes: {
-          '0%': { opacity: '1' },
-          '100%': { opacity: '0' },
-        },
-        duration,
-        easing: 'ease-in',
-      },
-    })
-  },
-
-  /**
-   * Add slide in animation
-   */
-  slideIn(
-    direction: 'up' | 'down' | 'left' | 'right' = 'up',
-    duration: number = 300,
-    distance: number = 20
-  ): Modifier {
-    const transforms = {
-      up: [`translateY(${distance}px)`, 'translateY(0)'],
-      down: [`translateY(-${distance}px)`, 'translateY(0)'],
-      left: [`translateX(${distance}px)`, 'translateX(0)'],
-      right: [`translateX(-${distance}px)`, 'translateX(0)'],
-    }
-
-    const [from, to] = transforms[direction]
-
-    return new AnimationModifier({
-      animation: {
-        keyframes: {
-          '0%': { transform: from, opacity: '0' },
-          '100%': { transform: to, opacity: '1' },
-        },
-        duration,
-        easing: 'ease-out',
-      },
-    })
-  },
-
-  /**
-   * Add scale animation
-   */
-  scaleAnimation(from: number = 0.8, to: number = 1, duration: number = 300): Modifier {
-    return new AnimationModifier({
-      animation: {
-        keyframes: {
-          '0%': { transform: `scale(${from})`, opacity: '0' },
-          '100%': { transform: `scale(${to})`, opacity: '1' },
-        },
-        duration,
-        easing: 'ease-out',
-      },
-    })
-  },
-}
-
-/**
- * Lifecycle Modifiers
- */
-export const lifecycleModifiers = {
-  /**
-   * Execute handler when component appears in viewport
-   */
-  onAppear(handler: () => void): Modifier {
-    return new LifecycleModifier({ onAppear: handler })
-  },
-
-  /**
-   * Execute handler when component disappears from viewport
-   */
-  onDisappear(handler: () => void): Modifier {
-    return new LifecycleModifier({ onDisappear: handler })
-  },
-
-  /**
-   * Execute async task with automatic cancellation on component unmount
-   */
-  task(
-    operation: () => Promise<void> | void,
-    options?: {
-      id?: string
-      priority?: 'background' | 'userInitiated' | 'utility' | 'default'
-    }
-  ): Modifier {
-    return new LifecycleModifier({
-      task: {
-        operation,
-        id: options?.id,
-        priority: options?.priority || 'default',
-      },
-    })
-  },
-
-  /**
-   * Add pull-to-refresh functionality
-   */
-  refreshable(onRefresh: () => Promise<void>, isRefreshing?: boolean | Signal<boolean>): Modifier {
-    return new LifecycleModifier({
-      refreshable: {
-        onRefresh,
-        isRefreshing,
-      },
-    })
-  },
-}
-
-/**
- * Preset Modifiers - Common combinations
- */
-export const presetModifiers = {
-  /**
-   * Card-like appearance
-   */
-  card(padding: number = 16): Modifier[] {
-    return [
-      appearanceModifiers.backgroundColor('#ffffff'),
-      appearanceModifiers.cornerRadius(8),
-      appearanceModifiers.shadow({
-        x: 0,
-        y: 2,
-        radius: 8,
-        color: 'rgba(0,0,0,0.1)',
-      }),
-      layoutModifiers.padding(padding),
-    ]
-  },
-
-  /**
-   * Button-like appearance
-   */
-  button(
-    backgroundColor: string | Asset = '#007AFF',
-    textColor: string | Asset = '#ffffff'
-  ): Modifier[] {
-    return [
-      appearanceModifiers.backgroundColor(backgroundColor),
-      appearanceModifiers.foregroundColor(textColor),
-      appearanceModifiers.cornerRadius(6),
-      layoutModifiers.paddingSymmetric(16, 8),
-      interactionModifiers.onHover((_hovered) => {
-        // This would need a more sophisticated hover state system
-      }),
-      animationModifiers.transition('all', 150),
-    ]
-  },
-
-  /**
-   * Input field appearance
-   */
-  input(): Modifier[] {
-    return [
-      appearanceModifiers.border(1, '#d1d5db'),
-      appearanceModifiers.cornerRadius(4),
-      layoutModifiers.padding(8),
-      animationModifiers.transition('border-color', 150),
-      interactionModifiers.onFocus((_focused) => {
-        // Focus state would need more sophisticated handling
-      }),
-    ]
-  },
-
-  /**
-   * Typography presets
-   */
-  typography: {
-    title: (): Modifier[] => [
-      appearanceModifiers.fontSize(24),
-      appearanceModifiers.fontWeight('bold'),
-    ],
-
-    heading: (): Modifier[] => [
-      appearanceModifiers.fontSize(20),
-      appearanceModifiers.fontWeight('600'),
-    ],
-
-    body: (): Modifier[] => [
-      appearanceModifiers.fontSize(16),
-      appearanceModifiers.fontWeight('normal'),
-    ],
-
-    caption: (): Modifier[] => [
-      appearanceModifiers.fontSize(12),
-      appearanceModifiers.fontWeight('normal'),
-      appearanceModifiers.opacity(0.7),
-    ],
-  },
-}
-
-/**
- * Export all core modifiers
- */
-export const coreModifiers = {
-  ...layoutModifiers,
-  ...appearanceModifiers,
-  ...interactionModifiers,
-  ...animationModifiers,
-  ...lifecycleModifiers,
-  presets: presetModifiers,
-}

package/src/modifiers/css.ts

@@ -1,148 +0,0 @@
-/**
- * CSS Modifier - raw CSS properties
- *
- * Provides an escape hatch for applying raw CSS properties
- * that may not have dedicated modifiers yet, or for experimental
- * CSS features.
- */
-
-import type { DOMNode } from '../runtime/types'
-import { BaseModifier } from './base'
-import type { ModifierContext, ReactiveModifierProps } from './types'
-
-export interface CSSOptions {
-  [property: string]: string | number | undefined
-}
-
-export type ReactiveCSSOptions = ReactiveModifierProps<CSSOptions>
-
-export class CSSModifier extends BaseModifier<CSSOptions> {
-  readonly type = 'css'
-  readonly priority = 5 // Very low priority so raw CSS doesn't override specific modifiers
-
-  constructor(options: ReactiveCSSOptions) {
-    // Convert reactive options to regular options for immediate use
-    const resolvedOptions: CSSOptions = {}
-    for (const [key, value] of Object.entries(options)) {
-      if (typeof value === 'function' && 'peek' in value) {
-        ;(resolvedOptions as any)[key] = (value as any).peek()
-      } else {
-        ;(resolvedOptions as any)[key] = value
-      }
-    }
-    super(resolvedOptions)
-  }
-
-  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {
-    if (!context.element) return
-
-    const styles = this.computeCSSStyles(this.properties)
-    this.applyStyles(context.element, styles)
-    
-    return undefined
-  }
-
-  private computeCSSStyles(props: CSSOptions) {
-    const styles: Record<string, string> = {}
-
-    for (const [property, value] of Object.entries(props)) {
-      if (value !== undefined) {
-        // Convert camelCase to kebab-case for CSS properties
-        const cssProperty = this.toCSSProperty(property)
-        styles[cssProperty] = this.toCSSValue(value)
-      }
-    }
-
-    return styles
-  }
-}
-
-/**
- * Create a CSS modifier with raw CSS properties
- *
- * @example
- * ```typescript
- * // Apply raw CSS properties
- * .css({
- *   backdropFilter: 'blur(10px)',
- *   maskImage: 'linear-gradient(to bottom, black, transparent)',
- *   scrollBehavior: 'smooth',
- *   containerType: 'inline-size'
- * })
- *
- * // Mix camelCase and kebab-case (both work)
- * .css({
- *   backgroundColor: 'red',        // camelCase (recommended)
- *   'background-color': 'red',     // kebab-case (also works)
- *   WebkitTransform: 'scale(1.1)', // vendor prefixes
- *   '--custom-property': '42px'    // CSS custom properties
- * })
- *
- * // Experimental CSS features
- * .css({
- *   aspectRatio: '16/9',
- *   scrollSnapType: 'y mandatory',
- *   containIntrinsicSize: '300px',
- *   accentColor: '#007AFF'
- * })
- * ```
- */
-export function css(properties: ReactiveCSSOptions): CSSModifier {
-  return new CSSModifier(properties)
-}
-
-/**
- * Convenience function for setting a single CSS property
- *
- * @example
- * ```typescript
- * .cssProperty('backdrop-filter', 'blur(10px)')
- * .cssProperty('scrollBehavior', 'smooth')
- * .cssProperty('aspectRatio', '16/9')
- * ```
- */
-export function cssProperty(property: string, value: string | number): CSSModifier {
-  return new CSSModifier({ [property]: value })
-}
-
-/**
- * Convenience function for CSS custom properties (CSS variables)
- *
- * @example
- * ```typescript
- * .cssVariable('primary-color', '#007AFF')
- * .cssVariable('spacing-unit', '8px')
- * .cssVariable('border-radius', '12px')
- * ```
- */
-export function cssVariable(name: string, value: string | number): CSSModifier {
-  // Ensure the property starts with --
-  const propertyName = name.startsWith('--') ? name : `--${name}`
-  return new CSSModifier({ [propertyName]: value })
-}
-
-/**
- * Convenience function for vendor-prefixed properties
- *
- * @example
- * ```typescript
- * .cssVendor('webkit', 'transform', 'scale(1.1)')
- * .cssVendor('moz', 'user-select', 'none')
- * .cssVendor('ms', 'filter', 'blur(5px)')
- * ```
- */
-export function cssVendor(
-  prefix: 'webkit' | 'moz' | 'ms' | 'o',
-  property: string,
-  value: string | number
-): CSSModifier {
-  // Convert to proper vendor prefix format
-  const capitalizedPrefix = prefix.charAt(0).toUpperCase() + prefix.slice(1)
-  const vendorProperty = `-${prefix.toLowerCase()}-${property}`
-  const camelCaseProperty = capitalizedPrefix + property.charAt(0).toUpperCase() + property.slice(1)
-
-  return new CSSModifier({
-    [vendorProperty]: value,
-    [camelCaseProperty]: value,
-  })
-}