@tachui/core 0.7.0-alpha1 → 0.8.0-alpha

package/src/modifiers/size.ts

@@ -1,208 +0,0 @@
-/**
- * Size Modifier - width, height, min/max dimensions
- *
- * Provides a unified interface for setting element dimensions
- * with support for SwiftUI-style infinity constants.
- */
-
-import type { DOMNode } from '../runtime/types'
-import type { Dimension } from '../constants/layout'
-import { dimensionToCSS, isInfinity, shouldExpandForInfinity } from '../constants/layout'
-import { BaseModifier } from './base'
-import type { ModifierContext, ReactiveModifierProps } from './types'
-
-export interface SizeOptions {
-  width?: Dimension
-  height?: Dimension
-  minWidth?: Dimension
-  maxWidth?: Dimension
-  minHeight?: Dimension
-  maxHeight?: Dimension
-}
-
-export type ReactiveSizeOptions = ReactiveModifierProps<SizeOptions>
-
-export class SizeModifier extends BaseModifier<SizeOptions> {
-  readonly type = 'size'
-  readonly priority = 80 // Priority 80 for layout
-
-  constructor(options: ReactiveSizeOptions) {
-    // Preserve reactive values; BaseModifier.applyStyles will create effects
-    super(options as unknown as SizeOptions)
-  }
-
-  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {
-    if (!context.element) return
-
-    const styles = this.computeSizeStyles(this.properties)
-    this.applyStyles(context.element, styles)
-    
-    return undefined
-  }
-
-  private computeSizeStyles(props: SizeOptions) {
-    const styles: Record<string, any> = {}
-
-    // Check for infinity constraints and apply appropriate flex/size styles
-    const infinityResult = shouldExpandForInfinity(props)
-    Object.assign(styles, infinityResult.cssProps)
-
-    // Convert dimensions to CSS, handling infinity appropriately
-    if (props.width !== undefined) {
-      const cssValue = dimensionToCSS(props.width)
-      if (cssValue !== undefined && !isInfinity(props.width)) {
-        styles.width = cssValue
-      }
-    }
-    
-    if (props.height !== undefined) {
-      const cssValue = dimensionToCSS(props.height)
-      if (cssValue !== undefined && !isInfinity(props.height)) {
-        styles.height = cssValue
-      }
-    }
-    
-    if (props.minWidth !== undefined) {
-      const cssValue = dimensionToCSS(props.minWidth)
-      if (cssValue !== undefined) {
-        styles.minWidth = cssValue
-      }
-    }
-    
-    if (props.maxWidth !== undefined && !isInfinity(props.maxWidth)) {
-      const cssValue = dimensionToCSS(props.maxWidth)
-      if (cssValue !== undefined) {
-        styles.maxWidth = cssValue
-      }
-    } else if (isInfinity(props.maxWidth)) {
-      // Remove maxWidth constraint for infinity
-      styles.maxWidth = 'none'
-    }
-    
-    if (props.minHeight !== undefined) {
-      const cssValue = dimensionToCSS(props.minHeight)
-      if (cssValue !== undefined) {
-        styles.minHeight = cssValue
-      }
-    }
-    
-    if (props.maxHeight !== undefined && !isInfinity(props.maxHeight)) {
-      const cssValue = dimensionToCSS(props.maxHeight)
-      if (cssValue !== undefined) {
-        styles.maxHeight = cssValue
-      }
-    } else if (isInfinity(props.maxHeight)) {
-      // Remove maxHeight constraint for infinity
-      styles.maxHeight = 'none'
-    }
-
-    return styles
-  }
-}
-
-/**
- * Create a size modifier with multiple dimension properties
- * Now supports SwiftUI-style infinity for responsive layouts
- *
- * @example
- * ```typescript
- * // Set both width and height
- * .size({ width: 200, height: 100 })
- *
- * // Set responsive width with constraints
- * .size({ width: '100%', maxWidth: 800, minWidth: 320 })
- *
- * // SwiftUI-style infinity support
- * .size({ width: infinity, height: 200 })
- * .size({ maxWidth: infinity, maxHeight: infinity })
- * ```
- */
-export function size(options: ReactiveSizeOptions): SizeModifier {
-  return new SizeModifier(options)
-}
-
-/**
- * Convenience function for setting width only
- * Supports infinity for fill-available behavior
- *
- * @example
- * ```typescript
- * .width('100%')
- * .width(280)
- * .width(infinity) // Fill available space
- * ```
- */
-export function width(value: Dimension): SizeModifier {
-  return new SizeModifier({ width: value })
-}
-
-/**
- * Convenience function for setting height only
- * Supports infinity for fill-available behavior
- *
- * @example
- * ```typescript
- * .height('100vh')
- * .height(64)
- * .height(infinity) // Fill available space
- * ```
- */
-export function height(value: Dimension): SizeModifier {
-  return new SizeModifier({ height: value })
-}
-
-/**
- * Convenience function for setting max-width only
- * Supports infinity to remove width constraints
- *
- * @example
- * ```typescript
- * .maxWidth(800)
- * .maxWidth('100%')
- * .maxWidth(infinity) // Remove width constraints
- * ```
- */
-export function maxWidth(value: Dimension): SizeModifier {
-  return new SizeModifier({ maxWidth: value })
-}
-
-/**
- * Convenience function for setting min-width only
- *
- * @example
- * ```typescript
- * .minWidth(320)
- * .minWidth('50%')
- * ```
- */
-export function minWidth(value: Dimension): SizeModifier {
-  return new SizeModifier({ minWidth: value })
-}
-
-/**
- * Convenience function for setting max-height only
- * Supports infinity to remove height constraints
- *
- * @example
- * ```typescript
- * .maxHeight(600)
- * .maxHeight('80vh')
- * .maxHeight(infinity) // Remove height constraints
- * ```
- */
-export function maxHeight(value: Dimension): SizeModifier {
-  return new SizeModifier({ maxHeight: value })
-}
-
-/**
- * Convenience function for setting min-height only
- *
- * @example
- * ```typescript
- * .minHeight(200)
- * .minHeight('30vh')
- * ```
- */
-export function minHeight(value: Dimension): SizeModifier {
-  return new SizeModifier({ minHeight: value })
-}

package/src/modifiers/text.ts

@@ -1,416 +0,0 @@
-/**
- * Text Modifiers Implementation
- *
- * Specialized text handling modifiers including line clamping, word breaking,
- * overflow wrapping, and hyphenation control for enhanced typography.
- */
-
-import type { DOMNode } from '../runtime/types'
-import { BaseModifier } from './base'
-import type { ModifierContext, ReactiveModifierProps } from './types'
-import { ModifierPriority } from './types'
-
-// ============================================================================
-// Line Clamp Modifier - Multi-line Text Truncation
-// ============================================================================
-
-export interface LineClampOptions {
-  lines: number
-}
-
-export type ReactiveLineClampOptions = ReactiveModifierProps<LineClampOptions>
-
-export class LineClampModifier extends BaseModifier<LineClampOptions> {
-  readonly type = 'lineClamp'
-  readonly priority = ModifierPriority.APPEARANCE + 15
-
-  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {
-    if (!context.element) return
-
-    const { lines } = this.properties
-
-    // Validate lines in development mode
-    if (process.env.NODE_ENV === 'development') {
-      this.validateLines(lines)
-    }
-
-    // Apply line clamp styles
-    const styles = this.generateLineClampStyles(lines)
-    this.applyStyles(context.element, styles)
-    
-    return undefined
-  }
-
-  private generateLineClampStyles(lines: number): Record<string, string> {
-    const styles: Record<string, string> = {}
-
-    // Modern browsers: Use -webkit-line-clamp
-    styles.display = '-webkit-box'
-    styles.webkitLineClamp = String(lines)
-    styles.webkitBoxOrient = 'vertical'
-    styles.overflow = 'hidden'
-
-    // Additional properties for better cross-browser support
-    styles.textOverflow = 'ellipsis'
-    styles.wordWrap = 'break-word'
-
-    return styles
-  }
-
-  private validateLines(lines: number): void {
-    if (typeof lines !== 'number' || !Number.isInteger(lines) || lines < 1) {
-      console.warn('TachUI LineClamp Modifier: lines must be a positive integer')
-      return
-    }
-
-    if (lines > 10) {
-      console.info('TachUI LineClamp Modifier: Large line clamp values (>10) may impact readability. Consider if this is intentional.')
-    }
-  }
-}
-
-/**
- * Line clamp modifier function - SwiftUI .lineLimit() equivalent
- */
-export function lineClamp(lines: number): LineClampModifier {
-  return new LineClampModifier({ lines })
-}
-
-// ============================================================================
-// Word Break Modifier - Word Breaking Behavior
-// ============================================================================
-
-export type WordBreakValue = 'normal' | 'break-all' | 'keep-all' | 'break-word'
-
-export interface WordBreakOptions {
-  wordBreak: WordBreakValue
-}
-
-export type ReactiveWordBreakOptions = ReactiveModifierProps<WordBreakOptions>
-
-export class WordBreakModifier extends BaseModifier<WordBreakOptions> {
-  readonly type = 'wordBreak'
-  readonly priority = ModifierPriority.APPEARANCE + 8
-
-  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {
-    if (!context.element) return
-
-    const { wordBreak } = this.properties
-
-    // Validate word break value in development mode
-    if (process.env.NODE_ENV === 'development') {
-      this.validateWordBreak(wordBreak)
-    }
-
-    this.applyStyles(context.element, { wordBreak })
-    
-    return undefined
-  }
-
-  private validateWordBreak(value: string): void {
-    const validValues: WordBreakValue[] = ['normal', 'break-all', 'keep-all', 'break-word']
-    
-    if (!validValues.includes(value as WordBreakValue)) {
-      console.warn(`TachUI WordBreak Modifier: Invalid word-break value "${value}". Valid values are: ${validValues.join(', ')}`)
-    }
-
-    if (value === 'break-word') {
-      console.info('TachUI WordBreak Modifier: "break-word" is deprecated. Consider using overflowWrap("break-word") instead.')
-    }
-  }
-}
-
-/**
- * Word break modifier function
- */
-export function wordBreak(value: WordBreakValue): WordBreakModifier {
-  return new WordBreakModifier({ wordBreak: value })
-}
-
-// ============================================================================
-// Overflow Wrap Modifier - Word Wrapping
-// ============================================================================
-
-export type OverflowWrapValue = 'normal' | 'break-word' | 'anywhere'
-
-export interface OverflowWrapOptions {
-  overflowWrap: OverflowWrapValue
-}
-
-export type ReactiveOverflowWrapOptions = ReactiveModifierProps<OverflowWrapOptions>
-
-export class OverflowWrapModifier extends BaseModifier<OverflowWrapOptions> {
-  readonly type = 'overflowWrap'
-  readonly priority = ModifierPriority.APPEARANCE + 9
-
-  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {
-    if (!context.element) return
-
-    const { overflowWrap } = this.properties
-
-    // Validate overflow wrap value in development mode
-    if (process.env.NODE_ENV === 'development') {
-      this.validateOverflowWrap(overflowWrap)
-    }
-
-    this.applyStyles(context.element, { overflowWrap })
-    
-    return undefined
-  }
-
-  private validateOverflowWrap(value: string): void {
-    const validValues: OverflowWrapValue[] = ['normal', 'break-word', 'anywhere']
-    
-    if (!validValues.includes(value as OverflowWrapValue)) {
-      console.warn(`TachUI OverflowWrap Modifier: Invalid overflow-wrap value "${value}". Valid values are: ${validValues.join(', ')}`)
-    }
-  }
-}
-
-/**
- * Overflow wrap modifier function
- */
-export function overflowWrap(value: OverflowWrapValue): OverflowWrapModifier {
-  return new OverflowWrapModifier({ overflowWrap: value })
-}
-
-// ============================================================================
-// Hyphens Modifier - Hyphenation Control
-// ============================================================================
-
-export type HyphensValue = 'none' | 'manual' | 'auto'
-
-export interface HyphensOptions {
-  hyphens: HyphensValue
-}
-
-export type ReactiveHyphensOptions = ReactiveModifierProps<HyphensOptions>
-
-export class HyphensModifier extends BaseModifier<HyphensOptions> {
-  readonly type = 'hyphens'
-  readonly priority = ModifierPriority.APPEARANCE + 10
-
-  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {
-    if (!context.element) return
-
-    const { hyphens } = this.properties
-
-    // Validate hyphens value in development mode
-    if (process.env.NODE_ENV === 'development') {
-      this.validateHyphens(hyphens)
-    }
-
-    this.applyStyles(context.element, { 
-      hyphens,
-      // Add vendor prefixes for better browser support
-      webkitHyphens: hyphens,
-      msHyphens: hyphens
-    })
-    
-    return undefined
-  }
-
-  private validateHyphens(value: string): void {
-    const validValues: HyphensValue[] = ['none', 'manual', 'auto']
-    
-    if (!validValues.includes(value as HyphensValue)) {
-      console.warn(`TachUI Hyphens Modifier: Invalid hyphens value "${value}". Valid values are: ${validValues.join(', ')}`)
-    }
-
-    if (value === 'auto') {
-      console.info('TachUI Hyphens Modifier: Automatic hyphenation requires proper lang attribute on the document or element for best results.')
-    }
-  }
-}
-
-/**
- * Hyphens modifier function
- */
-export function hyphens(value: HyphensValue): HyphensModifier {
-  return new HyphensModifier({ hyphens: value })
-}
-
-// ============================================================================
-// Background Clip Modifier (Moved from css-features.ts)
-// ============================================================================
-
-export interface BackgroundClipOptions {
-  backgroundImage?: string
-  backgroundClip?: 'text' | 'border-box' | 'padding-box' | 'content-box'
-  color?: string
-  webkitBackgroundClip?: string
-  webkitTextFillColor?: string
-}
-
-export type ReactiveBackgroundClipOptions = ReactiveModifierProps<BackgroundClipOptions>
-
-export class BackgroundClipModifier extends BaseModifier<BackgroundClipOptions> {
-  readonly type = 'backgroundClip'
-  readonly priority = 40
-
-  constructor(options: ReactiveBackgroundClipOptions) {
-    const resolvedOptions: BackgroundClipOptions = {}
-    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.computeBackgroundClipStyles(this.properties)
-    this.applyStyles(context.element, styles)
-    
-    return undefined
-  }
-
-  private computeBackgroundClipStyles(props: BackgroundClipOptions) {
-    const styles: Record<string, string> = {}
-
-    if (props.backgroundImage) {
-      styles.backgroundImage = props.backgroundImage
-    }
-
-    if (props.backgroundClip) {
-      styles.backgroundClip = props.backgroundClip
-      // Add webkit prefix for better browser support
-      styles.webkitBackgroundClip = props.backgroundClip
-    }
-
-    if (props.color) {
-      styles.color = props.color
-      // For text clipping, often need webkit-text-fill-color
-      if (props.backgroundClip === 'text') {
-        styles.webkitTextFillColor = props.color
-      }
-    }
-
-    // Add webkit-specific properties if provided
-    if (props.webkitBackgroundClip) {
-      styles.webkitBackgroundClip = props.webkitBackgroundClip
-    }
-
-    if (props.webkitTextFillColor) {
-      styles.webkitTextFillColor = props.webkitTextFillColor
-    }
-
-    return styles
-  }
-}
-
-/**
- * Background clip modifier for advanced text effects
- *
- * @example
- * ```typescript
- * .backgroundClip(
- *   'linear-gradient(45deg, #007AFF, #34C759)',
- *   'text',
- *   'transparent'
- * )
- * ```
- */
-export function backgroundClip(
-  backgroundImage: string,
-  clip: 'text' | 'border-box' | 'padding-box' | 'content-box' = 'text',
-  color: string = 'transparent'
-): BackgroundClipModifier {
-  return new BackgroundClipModifier({
-    backgroundImage,
-    backgroundClip: clip,
-    color,
-    webkitBackgroundClip: clip,
-    webkitTextFillColor: color
-  })
-}
-
-/**
- * Gradient text modifier - creates text with gradient colors
- *
- * @example
- * ```typescript
- * .gradientText('linear-gradient(45deg, #007AFF, #34C759)')
- * .gradientText('radial-gradient(circle, #ff6b6b, #4ecdc4)')
- * .gradientText('linear-gradient(90deg, #667eea 0%, #764ba2 100%)')
- * ```
- */
-export function gradientText(gradient: string): BackgroundClipModifier {
-  return new BackgroundClipModifier({
-    backgroundImage: gradient,
-    backgroundClip: 'text',
-    color: 'transparent',
-    webkitBackgroundClip: 'text',
-    webkitTextFillColor: 'transparent'
-  })
-}
-
-/**
- * Background image modifier for text styling
- *
- * @example
- * ```typescript
- * .backgroundImage('url(texture.jpg)')
- * .backgroundImage('linear-gradient(to right, #667eea, #764ba2)')
- * ```
- */
-export function backgroundImage(image: string): BackgroundClipModifier {
-  return new BackgroundClipModifier({ backgroundImage: image })
-}
-
-// ============================================================================
-// Common Gradient Text Presets
-// ============================================================================
-
-/**
- * Blue to purple gradient text
- */
-export function blueGradientText(): BackgroundClipModifier {
-  return gradientText('linear-gradient(45deg, #007AFF, #5856D6)')
-}
-
-/**
- * Rainbow gradient text
- */
-export function rainbowGradientText(): BackgroundClipModifier {
-  return gradientText('linear-gradient(90deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff80, #0080ff, #8000ff)')
-}
-
-/**
- * Warm sunset gradient text
- */
-export function sunsetGradientText(): BackgroundClipModifier {
-  return gradientText('linear-gradient(45deg, #ff6b6b, #feca57, #ff9ff3)')
-}
-
-/**
- * Cool ocean gradient text
- */
-export function oceanGradientText(): BackgroundClipModifier {
-  return gradientText('linear-gradient(45deg, #667eea, #764ba2)')
-}
-
-/**
- * Green nature gradient text
- */
-export function natureGradientText(): BackgroundClipModifier {
-  return gradientText('linear-gradient(45deg, #56ab2f, #a8e6cf)')
-}
-
-/**
- * Gold metallic gradient text
- */
-export function goldGradientText(): BackgroundClipModifier {
-  return gradientText('linear-gradient(45deg, #f7971e, #ffd200)')
-}
-
-/**
- * Silver metallic gradient text  
- */
-export function silverGradientText(): BackgroundClipModifier {
-  return gradientText('linear-gradient(45deg, #bdc3c7, #2c3e50)')
-}