@tachui/core 0.7.0-alpha1

package/dist/components/Button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.cjs","sources":["../../src/components/Button.ts"],"sourcesContent":["/**\n * Enhanced Button Component (Phase 5.2)\n *\n * SwiftUI-inspired Button component with press states, variants,\n * and advanced interaction handling.\n */\n\nimport type { ModifiableComponent, ModifierBuilder } from '../modifiers/types'\nimport { createSignal, isSignal, createEffect } from '../reactive'\nimport type { Signal } from '../reactive/types'\nimport type { ComponentInstance, ComponentProps } from '../runtime/types'\nimport { text, h } from '../runtime/renderer'\nimport { withModifiers } from './wrapper'\nimport { useLifecycle } from '../lifecycle/hooks'\nimport { ColorAsset } from '../assets/ColorAsset'\nimport type { Concatenatable, ComponentSegment, ConcatenationMetadata } from '../concatenation/types'\nimport { ConcatenatedComponent } from '../concatenation/concatenated-component'\nimport {\n  ComponentWithCSSClasses,\n  type CSSClassesProps\n} from '../css-classes'\n\n/**\n * Button role types following SwiftUI patterns\n */\nexport type ButtonRole = 'destructive' | 'cancel' | 'none'\n\n/**\n * Button variants\n */\nexport type ButtonVariant =\n  | 'filled' // Solid background (primary)\n  | 'outlined' // Border with transparent background\n  | 'plain' // No background or border\n  | 'bordered' // Subtle border with light background\n  | 'borderedProminent' // Prominent border style\n\n/**\n * Button size presets\n */\nexport type ButtonSize = 'small' | 'medium' | 'large'\n\n/**\n * Button state\n */\nexport type ButtonState = 'normal' | 'pressed' | 'disabled' | 'focused'\n\n/**\n * Button component properties with CSS classes support\n */\nexport interface ButtonProps extends ComponentProps, CSSClassesProps {\n  // Content\n  title?: string | (() => string) | Signal<string>\n  systemImage?: string\n\n  // Behavior\n  action?: () => void | Promise<void>\n  role?: ButtonRole\n  isEnabled?: boolean | Signal<boolean>\n\n  // Appearance\n  variant?: ButtonVariant\n  size?: ButtonSize\n  tint?: string | Signal<string> | ColorAsset\n  backgroundColor?: string | Signal<string> | ColorAsset\n  foregroundColor?: string | Signal<string> | ColorAsset\n\n  // State management\n  isPressed?: Signal<boolean>\n  isLoading?: boolean | Signal<boolean>\n\n  // Accessibility\n  accessibilityLabel?: string\n  accessibilityHint?: string\n\n  // Advanced\n  controlSize?: ButtonSize\n  hapticFeedback?: boolean\n}\n\n/**\n * Button theme configuration\n */\nexport interface ButtonTheme {\n  colors: {\n    primary: string\n    secondary: string\n    destructive: string\n    background: string\n    surface: string\n    onPrimary: string\n    onSecondary: string\n    onSurface: string\n    border: string\n    disabled: string\n  }\n  spacing: {\n    small: number\n    medium: number\n    large: number\n  }\n  borderRadius: {\n    small: number\n    medium: number\n    large: number\n  }\n  typography: {\n    small: { size: number; weight: string }\n    medium: { size: number; weight: string }\n    large: { size: number; weight: string }\n  }\n}\n\n/**\n * Default button theme\n */\nexport const defaultButtonTheme: ButtonTheme = {\n  colors: {\n    primary: '#007AFF',\n    secondary: '#5856D6',\n    destructive: '#FF3B30',\n    background: '#F2F2F7',\n    surface: '#FFFFFF',\n    onPrimary: '#FFFFFF',\n    onSecondary: '#FFFFFF',\n    onSurface: '#000000',\n    border: '#C7C7CC',\n    disabled: '#8E8E93',\n  },\n  spacing: {\n    small: 8,\n    medium: 12,\n    large: 16,\n  },\n  borderRadius: {\n    small: 6,\n    medium: 8,\n    large: 12,\n  },\n  typography: {\n    small: { size: 14, weight: '500' },\n    medium: { size: 16, weight: '500' },\n    large: { size: 18, weight: '600' },\n  },\n}\n\n/**\n * Enhanced Button component class with CSS classes support\n */\nexport class EnhancedButton extends ComponentWithCSSClasses implements ComponentInstance<ButtonProps>, Concatenatable<ButtonProps> {\n  public readonly type = 'component' as const\n  public readonly id: string\n  public mounted = false\n  public cleanup: (() => void)[] = []\n  public stateSignal: () => ButtonState\n  private setState: (value: ButtonState) => void\n  public theme: ButtonTheme\n\n  constructor(\n    public props: ButtonProps,\n    theme: ButtonTheme = defaultButtonTheme\n  ) {\n    super()\n    this.id = `button-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`\n    this.theme = theme\n\n    // Create reactive state signals\n    const [stateSignal, setState] = createSignal<ButtonState>('normal')\n    this.stateSignal = stateSignal\n    this.setState = setState\n\n    // Set up DOM event listeners when component is ready\n    this.setupDOMEventListeners()\n  }\n\n  /**\n   * Set up DOM event listeners for button interactions\n   */\n  private setupDOMEventListeners(): void {\n    useLifecycle(this, {\n      onDOMReady: (_elements, primaryElement) => {\n        if (primaryElement instanceof HTMLButtonElement) {\n          this.attachInteractionEvents(primaryElement)\n          this.setupReactiveStyles(primaryElement)\n        }\n      }\n    })\n  }\n\n  /**\n   * Set up reactive style updates based on state changes\n   */\n  private setupReactiveStyles(button: HTMLButtonElement): void {\n    // Create a reactive effect that updates styles when state changes\n    const effect = createEffect(() => {\n      // Reading the state signal makes this effect reactive to state changes\n      this.stateSignal()\n\n      // Also watch for changes in enabled/loading states if they're reactive\n      this.isEnabled()\n      this.isLoading()\n\n      // Watch color properties for reactivity\n      const { tint, backgroundColor, foregroundColor } = this.props\n\n      // Make reactive to tint changes\n      if (tint && isSignal(tint)) {\n        (tint as () => string)() // Read the signal to make effect reactive to it\n      } else if (tint instanceof ColorAsset) {\n        tint.resolve() // Make effect reactive to theme changes\n      }\n\n      // Make reactive to backgroundColor changes\n      if (backgroundColor && isSignal(backgroundColor)) {\n        (backgroundColor as () => string)()\n      } else if (backgroundColor instanceof ColorAsset) {\n        backgroundColor.resolve()\n      }\n\n      // Make reactive to foregroundColor changes\n      if (foregroundColor && isSignal(foregroundColor)) {\n        (foregroundColor as () => string)()\n      } else if (foregroundColor instanceof ColorAsset) {\n        foregroundColor.resolve()\n      }\n\n      // Trigger style update whenever any dependency changes\n      const styles = this.getButtonStyles()\n      this.applyStylesToElement(button, styles)\n    })\n\n    // Store the effect cleanup function\n    this.cleanup.push(() => {\n      // Clean up the reactive effect when component unmounts\n      if (effect && typeof effect.dispose === 'function') {\n        effect.dispose()\n      }\n    })\n  }\n\n  /**\n   * Apply computed styles to the button element, respecting modifier-applied styles\n   */\n  private applyStylesToElement(element: HTMLButtonElement, styles: Record<string, any>): void {\n    // Apply each style property to the element, but only if not already set by modifiers\n    Object.entries(styles).forEach(([property, value]) => {\n      const cssProperty = this.camelToKebabCase(property)\n      if (typeof value === 'string' || typeof value === 'number') {\n        // Check if this property is already set by a modifier\n        const currentValue = element.style.getPropertyValue(cssProperty)\n        const hasModifierValue = currentValue && currentValue !== '' && currentValue !== 'inherit'\n        \n        // Special handling for transform: Button state transforms should override modifier transforms\n        if (cssProperty === 'transform') {\n          element.style.setProperty(cssProperty, String(value))\n        } else if (!hasModifierValue) {\n          // For other properties, only apply Button styles if no modifier has set this property\n          element.style.setProperty(cssProperty, String(value))\n        }\n      }\n    })\n  }\n\n  /**\n   * Convert camelCase to kebab-case for CSS properties\n   */\n  private camelToKebabCase(str: string): string {\n    return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()\n  }\n\n  /**\n   * Resolve color value from string, signal, or asset\n   */\n  private resolveColorValue(color: string | Signal<string> | ColorAsset | undefined): string | undefined {\n    if (!color) return undefined\n\n    if (typeof color === 'string') {\n      return color\n    } else if (isSignal(color)) {\n      return (color as () => string)()\n    } else if (color instanceof ColorAsset) {\n      return color.resolve()\n    }\n\n    return undefined\n  }\n\n  /**\n   * Attach interaction event listeners to the button element\n   */\n  private attachInteractionEvents(button: HTMLButtonElement): void {\n    // Helper to check if button is currently enabled\n    const isCurrentlyEnabled = (): boolean => {\n      const enabled = this.isEnabled()\n      return typeof enabled === 'boolean' ? enabled : enabled()\n    }\n\n    // Store global mouseup handler reference for cleanup\n    let globalMouseUpHandler: ((event: MouseEvent) => void) | null = null\n\n    // Mouse/pointer events for press states\n    const handleMouseDown = (event: MouseEvent) => {\n      if (isCurrentlyEnabled() && event.button === 0) { // Only left click\n        this.setState('pressed')\n        \n        // Add global mouseup listener to handle mouseup outside the button\n        globalMouseUpHandler = () => {\n          if (this.stateSignal() === 'pressed') {\n            this.setState('normal')\n          }\n          // Remove the global listener after handling\n          if (globalMouseUpHandler) {\n            document.removeEventListener('mouseup', globalMouseUpHandler)\n            globalMouseUpHandler = null\n          }\n        }\n        document.addEventListener('mouseup', globalMouseUpHandler)\n      }\n    }\n\n    const handleMouseUp = () => {\n      if (isCurrentlyEnabled() && this.stateSignal() === 'pressed') {\n        this.setState('normal')\n        // Clean up global listener if it exists\n        if (globalMouseUpHandler) {\n          document.removeEventListener('mouseup', globalMouseUpHandler)\n          globalMouseUpHandler = null\n        }\n      }\n    }\n\n    const handleMouseLeave = () => {\n      if (isCurrentlyEnabled()) {\n        this.setState('normal')\n        // Clean up global listener if it exists\n        if (globalMouseUpHandler) {\n          document.removeEventListener('mouseup', globalMouseUpHandler)\n          globalMouseUpHandler = null\n        }\n      }\n    }\n\n    // Focus events\n    const handleFocus = () => {\n      if (isCurrentlyEnabled() && this.stateSignal() !== 'pressed') {\n        this.setState('focused')\n      }\n    }\n\n    const handleBlur = () => {\n      if (isCurrentlyEnabled() && this.stateSignal() === 'focused') {\n        this.setState('normal')\n      }\n    }\n\n    // Keyboard events\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (isCurrentlyEnabled() && (event.key === ' ' || event.key === 'Enter')) {\n        event.preventDefault()\n        this.setState('pressed')\n      }\n    }\n\n    const handleKeyUp = (event: KeyboardEvent) => {\n      if (isCurrentlyEnabled() && (event.key === ' ' || event.key === 'Enter')) {\n        event.preventDefault()\n        this.setState('normal')\n        // Trigger the action for keyboard activation\n        this.props.action?.()\n      }\n    }\n\n    // Add event listeners\n    button.addEventListener('mousedown', handleMouseDown)\n    button.addEventListener('mouseup', handleMouseUp)\n    button.addEventListener('mouseleave', handleMouseLeave)\n    button.addEventListener('focus', handleFocus)\n    button.addEventListener('blur', handleBlur)\n    button.addEventListener('keydown', handleKeyDown)\n    button.addEventListener('keyup', handleKeyUp)\n\n    // Store cleanup functions\n    this.cleanup.push(() => {\n      button.removeEventListener('mousedown', handleMouseDown)\n      button.removeEventListener('mouseup', handleMouseUp)\n      button.removeEventListener('mouseleave', handleMouseLeave)\n      button.removeEventListener('focus', handleFocus)\n      button.removeEventListener('blur', handleBlur)\n      button.removeEventListener('keydown', handleKeyDown)\n      button.removeEventListener('keyup', handleKeyUp)\n      \n      // Clean up global mouseup listener if it exists\n      if (globalMouseUpHandler) {\n        document.removeEventListener('mouseup', globalMouseUpHandler)\n        globalMouseUpHandler = null\n      }\n    })\n  }\n\n  /**\n   * Check if button is enabled\n   */\n  isEnabled(): boolean | (() => boolean) {\n    const { isEnabled } = this.props\n\n    if (isEnabled === undefined) return true\n    if (typeof isEnabled === 'boolean') return isEnabled\n    if (isSignal(isEnabled)) return isEnabled as () => boolean\n    return true\n  }\n\n\n  /**\n   * Render the button component\n   */\n  render() {\n    // Use reactive pattern - pass signals/functions directly to runtime\n    const enabled = this.isEnabled() // Get signal/value for enabled state\n\n    // Create button content - always include title\n    const children = []\n\n    // System image (icon) - only if specified\n    if (this.props.systemImage) {\n      children.push(h('span', {\n        class: 'button-icon',\n        style: {\n          marginRight: '8px',\n          fontSize: '1.2em',\n        },\n      }, text(this.props.systemImage)))\n    }\n\n    // Button title - use h() helper for proper text node handling\n    children.push(h('span', {\n      class: 'button-title'\n    }, text(this.props.title || '')))\n\n    // Process CSS classes for this component\n    const baseClasses = ['tachui-button']\n    const classString = this.createClassString(this.props, baseClasses)\n\n    // Create button element as DOMNode object with modifier metadata\n    const buttonElement = {\n      type: 'element' as const,\n      tag: 'button',\n      props: {\n        className: classString,\n        type: 'button',\n        disabled: typeof enabled === 'boolean' ? !enabled : () => !enabled(), // Invert enabled to disabled\n        onClick: this.props.action\n          ? () => {\n              try {\n                this.props.action?.()\n              } catch (error) {\n                console.error('Button action error:', error)\n              }\n            }\n          : undefined,\n        // Pass through debug label for debug system\n        ...(this.props.debugLabel && { debugLabel: this.props.debugLabel }),\n      },\n      children,\n      // Attach component metadata for modifier processing\n      componentMetadata: {\n        id: this.id,\n        type: 'Button',\n        // Note: modifiers are attached automatically by the modifier system\n      },\n    }\n\n    return [buttonElement]\n  }\n\n  /**\n   * Check if button is in loading state\n   */\n  isLoading(): boolean {\n    const { isLoading } = this.props\n\n    if (isLoading === undefined) return false\n    if (typeof isLoading === 'boolean') return isLoading\n    if (isSignal(isLoading)) return (isLoading as () => boolean)()\n    return false\n  }\n\n  /**\n   * Check if the button has color-related modifiers applied\n   */\n  private hasColorModifiers(): boolean {\n    // Try to get modifiers from the wrapper component first\n    let modifiers = (this as any).modifiers\n\n    // If not found on this component, check if we're wrapped and get from wrapper\n    if (!modifiers && (this as any).modifierBuilder) {\n      modifiers = (this as any).modifierBuilder.modifiers\n    }\n\n    // Also check if we're part of a modifiable component structure\n    if (!modifiers && (this as any).modifiableComponent) {\n      modifiers = (this as any).modifiableComponent.modifiers\n    }\n\n    if (!modifiers || !Array.isArray(modifiers)) {\n      return false\n    }\n\n    // Check for any modifier that affects color\n    return modifiers.some((modifier: any) => {\n      // Check AppearanceModifier\n      if (modifier.type === 'appearance' || modifier.constructor?.name === 'AppearanceModifier') {\n        return modifier.properties &&\n               (modifier.properties.foregroundColor !== undefined ||\n                modifier.properties.color !== undefined)\n      }\n\n      // Check for any other modifiers that might affect color\n      if (modifier.properties) {\n        const colorProps = ['foregroundColor', 'color', 'textColor']\n        return colorProps.some(prop => modifier.properties[prop] !== undefined)\n      }\n\n      return false\n    })\n  }\n\n  /**\n   * Check if the button has typography-related modifiers applied\n   */\n  private hasTypographyModifiers(): boolean {\n    // Try to get modifiers from the wrapper component first\n    let modifiers = (this as any).modifiers\n\n    // If not found on this component, check if we're wrapped and get from wrapper\n    if (!modifiers && (this as any).modifierBuilder) {\n      modifiers = (this as any).modifierBuilder.modifiers\n    }\n\n    // Also check if we're part of a modifiable component structure\n    if (!modifiers && (this as any).modifiableComponent) {\n      modifiers = (this as any).modifiableComponent.modifiers\n    }\n\n    if (!modifiers || !Array.isArray(modifiers)) {\n      return false\n    }\n\n    // Check for any modifier that affects text transformation\n    const hasTypography = modifiers.some((modifier: any) => {\n      // Check TypographyModifier\n      if (modifier.type === 'typography' || modifier.constructor?.name === 'TypographyModifier') {\n        return modifier.properties &&\n               (modifier.properties.transform !== undefined ||\n                modifier.properties.textTransform !== undefined)\n      }\n\n      return false\n    })\n\n    return hasTypography\n  }\n\n  /**\n   * Get computed button styles based on variant, size, role, and state\n   */\n  // biome-ignore lint/suspicious/noExplicitAny: CSS styles require flexible property types\n  getButtonStyles(): Record<string, any> {\n    const { variant, size, role = 'none', tint, backgroundColor: bgColorProp, foregroundColor: fgColorProp } = this.props\n    const state = this.stateSignal()\n    const isLoading = this.isLoading()\n    const isEnabled = this.isEnabled()\n\n    // Check if the component has color-related or typography modifiers applied\n    const hasColorModifiers = this.hasColorModifiers()\n    const hasTypographyModifiers = this.hasTypographyModifiers()\n\n    // Base styles - minimal defaults, inherit from parent but allow modifiers to override\n    const baseStyles: Record<string, any> = {\n      // Only set color property if no modifiers will handle it\n      // This prevents conflicts between Button styles and AppearanceModifier\n      ...((!hasColorModifiers && !fgColorProp && !variant) && { color: 'inherit' }),\n      // Only set text-related properties if no typography modifiers will handle them\n      // This prevents conflicts between Button styles and TypographyModifier\n      ...(!hasTypographyModifiers && {\n        fontStyle: 'inherit',\n        lineHeight: 'inherit',\n        textTransform: 'inherit',\n        textDecoration: 'inherit',\n        textIndent: 'inherit',\n        textShadow: 'inherit',\n        wordSpacing: 'inherit',\n        textOrientation: 'inherit',\n        writingMode: 'inherit',\n        direction: 'inherit',\n      }),\n      // Let modifiers control: fontFamily, fontSize, fontWeight, letterSpacing, textAlign\n    }\n\n    // Only apply size-based styles if size is explicitly provided\n    if (size) {\n      const sizeConfig = this.theme.spacing[size] || this.theme.spacing.medium\n      const borderRadius = this.theme.borderRadius[size] || this.theme.borderRadius.medium\n      const typography = this.theme.typography[size] || this.theme.typography.medium\n\n      const minHeights = {\n        small: '32px',\n        medium: '40px',\n        large: '48px',\n      }\n\n      baseStyles.padding = `${sizeConfig}px ${sizeConfig * 2}px`\n      baseStyles.borderRadius = `${borderRadius}px`\n      baseStyles.fontSize = `${typography.size}px`\n      baseStyles.fontWeight = typography.weight\n      baseStyles.minHeight = minHeights[size]\n    }\n\n    let backgroundColor = 'transparent'\n    let borderColor = 'transparent'\n    let borderWidth = '1px'\n    let color = undefined // Will be set by variant or remain undefined to use baseStyles.color\n\n    // Resolve color values using helper method\n    const tintColor = this.resolveColorValue(tint)\n    const customBackgroundColor = this.resolveColorValue(bgColorProp)\n    const customForegroundColor = this.resolveColorValue(fgColorProp)\n\n    // Apply variant styles ONLY if variant is explicitly provided\n    if (variant) {\n      const fallbackTintColor = tintColor || this.theme.colors.primary\n\n      switch (variant) {\n        case 'filled':\n          if (role === 'destructive') {\n            backgroundColor = this.theme.colors.destructive\n          } else if (role === 'cancel') {\n            backgroundColor = this.theme.colors.secondary\n          } else {\n            backgroundColor = fallbackTintColor\n          }\n          color = this.theme.colors.onPrimary\n          break\n        case 'outlined':\n          borderColor = role === 'destructive' ? this.theme.colors.destructive : fallbackTintColor\n          color = role === 'destructive' ? this.theme.colors.destructive : fallbackTintColor\n          break\n        case 'bordered':\n          backgroundColor = this.theme.colors.background\n          borderColor = this.theme.colors.border\n          break\n        case 'borderedProminent':\n          backgroundColor = this.theme.colors.surface\n          borderColor = this.theme.colors.primary\n          borderWidth = '2px'\n          break\n        case 'plain':\n          // Keep defaults (transparent)\n          break\n      }\n    }\n\n    // Apply custom colors if provided (override variant defaults)\n    if (customBackgroundColor) {\n      backgroundColor = customBackgroundColor\n    }\n    if (customForegroundColor) {\n      color = customForegroundColor\n    }\n\n    // Apply state modifications\n    let opacity = '1'\n    let pointerEvents = 'auto'\n    let transform = undefined // Only set when needed\n    let boxShadow = 'none'\n\n    if (!isEnabled) {\n      backgroundColor = this.theme.colors.disabled\n      borderColor = this.theme.colors.disabled\n      color = this.theme.colors.disabled\n      opacity = '0.6'\n      pointerEvents = 'none'\n    } else if (isLoading) {\n      opacity = '0.6'\n      pointerEvents = 'none'\n    } else if (state === 'pressed') {\n      // Darken colors for pressed state\n      backgroundColor = this.darkenColor(backgroundColor, 0.1)\n      borderColor = this.darkenColor(borderColor, 0.1)\n      transform = 'scale(0.95)'\n    } else if (state === 'focused') {\n      boxShadow = '0 0 0 3px #007AFF40'\n    }\n\n    // Build final styles object - only include styles when explicitly needed\n    const finalStyles: Record<string, any> = {\n      ...baseStyles, // Size-based styles (only if size provided)\n    }\n\n    // Only apply variant/color styles if variant is provided\n    if (variant) {\n      finalStyles.backgroundColor = backgroundColor\n      finalStyles.borderColor = borderColor\n      finalStyles.borderWidth = borderWidth\n      if (color !== undefined) {\n        finalStyles.color = color\n      }\n    }\n\n    // Apply custom color overrides even without variant\n    if (customBackgroundColor) {\n      finalStyles.backgroundColor = customBackgroundColor\n    }\n    if (customForegroundColor) {\n      finalStyles.color = customForegroundColor\n    }\n\n    // Always apply interaction and state styles\n    finalStyles.cursor = isEnabled ? 'pointer' : 'not-allowed'\n    finalStyles.opacity = opacity\n    finalStyles.pointerEvents = pointerEvents\n\n    // Always apply transform - use 'none' when not needed to properly clear previous values\n    finalStyles.transform = transform !== undefined ? transform : 'none'\n    finalStyles.boxShadow = boxShadow\n\n    finalStyles.transition = 'all 0.2s ease'\n\n    return finalStyles\n  }\n\n  /**\n   * Handle button press with proper state management\n   */\n  async handlePress(): Promise<void> {\n    if (!this.isEnabled() || this.isLoading()) return\n\n    // Trigger haptic feedback (if available)\n    this.triggerHapticFeedback()\n\n    this.setState('pressed')\n\n    // Reset state after animation\n    setTimeout(() => {\n      if (this.isEnabled()) {\n        this.setState('normal')\n      }\n    }, 150)\n\n    // Execute action if provided\n    if (this.props.action) {\n      try {\n        const result = this.props.action()\n        // Handle if action returns a Promise\n        if (result && typeof result.then === 'function') {\n          await result\n        }\n      } catch (error) {\n        console.error('Button action failed:', error)\n      }\n    }\n  }\n\n  /**\n   * Trigger haptic feedback (mobile Safari support)\n   */\n  private triggerHapticFeedback(): void {\n    // Check if haptic feedback is disabled\n    if (this.props.hapticFeedback === false) return\n\n    if (typeof window !== 'undefined' && 'navigator' in window) {\n      // biome-ignore lint/suspicious/noExplicitAny: Navigator API requires dynamic access\n      const navigator = window.navigator as any\n      if (navigator.vibrate) {\n        navigator.vibrate(10) // Short vibration\n      }\n    }\n  }\n\n  /**\n   * Helper to darken a color for pressed states\n   */\n  private darkenColor(color: string, amount: number): string {\n    if (color === 'transparent') return color\n\n    // Simple darkening for hex colors\n    if (color.startsWith('#')) {\n      const hex = color.slice(1)\n      const num = parseInt(hex, 16)\n      const r = Math.max(0, Math.floor((num >> 16) * (1 - amount)))\n      const g = Math.max(0, Math.floor(((num >> 8) & 0x00ff) * (1 - amount)))\n      const b = Math.max(0, Math.floor((num & 0x0000ff) * (1 - amount)))\n      return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`\n    }\n\n    return color\n  }\n\n  // ============================================================================\n  // Concatenation Support (Phase 3.1)\n  // ============================================================================\n\n  /**\n   * Concatenate this button with another concatenatable component\n   */\n  concat<U extends Concatenatable<any>>(other: U): ConcatenatedComponent<ButtonProps | U> {\n    const thisSegment = this.toSegment()\n    const otherSegment = other.toSegment()\n\n    const metadata: ConcatenationMetadata = {\n      totalSegments: other instanceof ConcatenatedComponent ? other.segments.length + 1 : 2,\n      accessibilityRole: other instanceof ConcatenatedComponent\n        ? this.mergeAccessibilityRoles('composite', other.metadata.accessibilityRole)\n        : this.determineAccessibilityRole(other),\n      semanticStructure: 'inline' // Buttons are typically inline in concatenation\n    }\n\n    return new ConcatenatedComponent([thisSegment, otherSegment], metadata)\n  }\n\n  /**\n   * Convert this button to a segment for concatenation\n   */\n  toSegment(): ComponentSegment {\n    return {\n      id: this.id,\n      component: this,\n      modifiers: [], // Buttons don't typically have concatenation-specific modifiers\n      render: () => {\n        const rendered = this.render()\n        return Array.isArray(rendered) ? rendered[0] : rendered\n      }\n    }\n  }\n\n  /**\n   * Check if this component supports concatenation\n   */\n  isConcatenatable(): boolean {\n    return true\n  }\n\n  /**\n   * Determine accessibility role for concatenation\n   */\n  private determineAccessibilityRole(other: Concatenatable): 'text' | 'group' | 'composite' {\n    const componentType = (other as any).constructor.name\n\n    switch (componentType) {\n      case 'EnhancedText':\n        return 'composite' // Button + Text = composite (interactive content)\n      case 'EnhancedImage':\n        return 'composite' // Button + Image = composite (interactive content)\n      case 'EnhancedButton':\n      case 'EnhancedLink':\n        return 'composite' // Button + Interactive = composite\n      default:\n        return 'composite'\n    }\n  }\n\n  /**\n   * Merge accessibility roles when combining components\n   */\n  private mergeAccessibilityRoles(\n    _thisRole: 'text' | 'group' | 'composite',\n    _existingRole: 'text' | 'group' | 'composite'\n  ): 'text' | 'group' | 'composite' {\n    // Buttons always contribute as 'composite' (interactive), so result is always composite\n    return 'composite'\n  }\n}\n\n/**\n * Create enhanced Button component with modifier support\n */\nexport function Button(\n  title: string | (() => string) | Signal<string>,\n  action?: () => void | Promise<void>,\n  props: Omit<ButtonProps, 'title' | 'action'> = {}\n): ModifiableComponent<ButtonProps> & {\n  modifier: ModifierBuilder<ModifiableComponent<ButtonProps>>\n} {\n  const buttonProps: ButtonProps = { ...props, title, ...(action && { action }) }\n  const component = new EnhancedButton(buttonProps)\n  return withModifiers(component)\n}\n\n\n/**\n * Button variant shortcuts\n */\nexport const ButtonStyles = {\n  /**\n   * Filled button (primary)\n   */\n  Filled: (\n    title: string | (() => string) | Signal<string>,\n    action?: () => void | Promise<void>,\n    props: Omit<ButtonProps, 'title' | 'action' | 'variant'> = {}\n  ) => Button(title, action, { ...props, variant: 'filled' }),\n\n  /**\n   * Outlined button\n   */\n  Outlined: (\n    title: string | (() => string) | Signal<string>,\n    action?: () => void | Promise<void>,\n    props: Omit<ButtonProps, 'title' | 'action' | 'variant'> = {}\n  ) => Button(title, action, { ...props, variant: 'outlined' }),\n\n  /**\n   * Plain button (text only)\n   */\n  Plain: (\n    title: string | (() => string) | Signal<string>,\n    action?: () => void | Promise<void>,\n    props: Omit<ButtonProps, 'title' | 'action' | 'variant'> = {}\n  ) => Button(title, action, { ...props, variant: 'plain' }),\n\n  /**\n   * Bordered button\n   */\n  Bordered: (\n    title: string | (() => string) | Signal<string>,\n    action?: () => void | Promise<void>,\n    props: Omit<ButtonProps, 'title' | 'action' | 'variant'> = {}\n  ) => Button(title, action, { ...props, variant: 'bordered' }),\n\n  /**\n   * Destructive button\n   */\n  Destructive: (\n    title: string | (() => string) | Signal<string>,\n    action?: () => void | Promise<void>,\n    props: Omit<ButtonProps, 'title' | 'action' | 'role'> = {}\n  ) => Button(title, action, { ...props, role: 'destructive' }),\n\n  /**\n   * Cancel button\n   */\n  Cancel: (\n    title: string | (() => string) | Signal<string>,\n    action?: () => void | Promise<void>,\n    props: Omit<ButtonProps, 'title' | 'action' | 'role'> = {}\n  ) => Button(title, action, { ...props, role: 'cancel' }),\n}\n\n/**\n * CSS animations for button loading spinner\n */\nconst buttonAnimations = `\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n`\n\n// Inject animations into document head\nif (typeof document !== 'undefined') {\n  const style = document.createElement('style')\n  style.textContent = buttonAnimations\n  document.head.appendChild(style)\n}\n"],"names":["defaultButtonTheme","EnhancedButton","ComponentWithCSSClasses","props","theme","__publicField","stateSignal","setState","createSignal","useLifecycle","_elements","primaryElement","button","effect","createEffect","tint","backgroundColor","foregroundColor","isSignal","ColorAsset","styles","element","property","value","cssProperty","currentValue","str","color","isCurrentlyEnabled","enabled","globalMouseUpHandler","handleMouseDown","event","handleMouseUp","handleMouseLeave","handleFocus","handleBlur","handleKeyDown","handleKeyUp","isEnabled","children","h","text","baseClasses","error","isLoading","modifiers","modifier","prop","variant","size","role","bgColorProp","fgColorProp","state","hasColorModifiers","hasTypographyModifiers","baseStyles","sizeConfig","borderRadius","typography","minHeights","borderColor","borderWidth","tintColor","customBackgroundColor","customForegroundColor","fallbackTintColor","opacity","pointerEvents","transform","boxShadow","finalStyles","result","navigator","amount","hex","num","g","b","other","thisSegment","otherSegment","metadata","ConcatenatedComponent","rendered","_thisRole","_existingRole","Button","title","action","buttonProps","component","withModifiers","ButtonStyles","buttonAnimations","style"],"mappings":"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"}

package/dist/components/Button.d.ts

@@ -0,0 +1,252 @@
+/**
+ * Enhanced Button Component (Phase 5.2)
+ *
+ * SwiftUI-inspired Button component with press states, variants,
+ * and advanced interaction handling.
+ */
+import type { ModifiableComponent, ModifierBuilder } from '../modifiers/types';
+import type { Signal } from '../reactive/types';
+import type { ComponentInstance, ComponentProps } from '../runtime/types';
+import { ColorAsset } from '../assets/ColorAsset';
+import type { Concatenatable, ComponentSegment } from '../concatenation/types';
+import { ConcatenatedComponent } from '../concatenation/concatenated-component';
+import { ComponentWithCSSClasses, type CSSClassesProps } from '../css-classes';
+/**
+ * Button role types following SwiftUI patterns
+ */
+export type ButtonRole = 'destructive' | 'cancel' | 'none';
+/**
+ * Button variants
+ */
+export type ButtonVariant = 'filled' | 'outlined' | 'plain' | 'bordered' | 'borderedProminent';
+/**
+ * Button size presets
+ */
+export type ButtonSize = 'small' | 'medium' | 'large';
+/**
+ * Button state
+ */
+export type ButtonState = 'normal' | 'pressed' | 'disabled' | 'focused';
+/**
+ * Button component properties with CSS classes support
+ */
+export interface ButtonProps extends ComponentProps, CSSClassesProps {
+    title?: string | (() => string) | Signal<string>;
+    systemImage?: string;
+    action?: () => void | Promise<void>;
+    role?: ButtonRole;
+    isEnabled?: boolean | Signal<boolean>;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    tint?: string | Signal<string> | ColorAsset;
+    backgroundColor?: string | Signal<string> | ColorAsset;
+    foregroundColor?: string | Signal<string> | ColorAsset;
+    isPressed?: Signal<boolean>;
+    isLoading?: boolean | Signal<boolean>;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    controlSize?: ButtonSize;
+    hapticFeedback?: boolean;
+}
+/**
+ * Button theme configuration
+ */
+export interface ButtonTheme {
+    colors: {
+        primary: string;
+        secondary: string;
+        destructive: string;
+        background: string;
+        surface: string;
+        onPrimary: string;
+        onSecondary: string;
+        onSurface: string;
+        border: string;
+        disabled: string;
+    };
+    spacing: {
+        small: number;
+        medium: number;
+        large: number;
+    };
+    borderRadius: {
+        small: number;
+        medium: number;
+        large: number;
+    };
+    typography: {
+        small: {
+            size: number;
+            weight: string;
+        };
+        medium: {
+            size: number;
+            weight: string;
+        };
+        large: {
+            size: number;
+            weight: string;
+        };
+    };
+}
+/**
+ * Default button theme
+ */
+export declare const defaultButtonTheme: ButtonTheme;
+/**
+ * Enhanced Button component class with CSS classes support
+ */
+export declare class EnhancedButton extends ComponentWithCSSClasses implements ComponentInstance<ButtonProps>, Concatenatable<ButtonProps> {
+    props: ButtonProps;
+    readonly type: "component";
+    readonly id: string;
+    mounted: boolean;
+    cleanup: (() => void)[];
+    stateSignal: () => ButtonState;
+    private setState;
+    theme: ButtonTheme;
+    constructor(props: ButtonProps, theme?: ButtonTheme);
+    /**
+     * Set up DOM event listeners for button interactions
+     */
+    private setupDOMEventListeners;
+    /**
+     * Set up reactive style updates based on state changes
+     */
+    private setupReactiveStyles;
+    /**
+     * Apply computed styles to the button element, respecting modifier-applied styles
+     */
+    private applyStylesToElement;
+    /**
+     * Convert camelCase to kebab-case for CSS properties
+     */
+    private camelToKebabCase;
+    /**
+     * Resolve color value from string, signal, or asset
+     */
+    private resolveColorValue;
+    /**
+     * Attach interaction event listeners to the button element
+     */
+    private attachInteractionEvents;
+    /**
+     * Check if button is enabled
+     */
+    isEnabled(): boolean | (() => boolean);
+    /**
+     * Render the button component
+     */
+    render(): {
+        type: "element";
+        tag: string;
+        props: {
+            debugLabel?: string | undefined;
+            className: string | Signal<string>;
+            type: string;
+            disabled: boolean | (() => boolean);
+            onClick: (() => void) | undefined;
+        };
+        children: import("../runtime/types").DOMNode[];
+        componentMetadata: {
+            id: string;
+            type: string;
+        };
+    }[];
+    /**
+     * Check if button is in loading state
+     */
+    isLoading(): boolean;
+    /**
+     * Check if the button has color-related modifiers applied
+     */
+    private hasColorModifiers;
+    /**
+     * Check if the button has typography-related modifiers applied
+     */
+    private hasTypographyModifiers;
+    /**
+     * Get computed button styles based on variant, size, role, and state
+     */
+    getButtonStyles(): Record<string, any>;
+    /**
+     * Handle button press with proper state management
+     */
+    handlePress(): Promise<void>;
+    /**
+     * Trigger haptic feedback (mobile Safari support)
+     */
+    private triggerHapticFeedback;
+    /**
+     * Helper to darken a color for pressed states
+     */
+    private darkenColor;
+    /**
+     * Concatenate this button with another concatenatable component
+     */
+    concat<U extends Concatenatable<any>>(other: U): ConcatenatedComponent<ButtonProps | U>;
+    /**
+     * Convert this button to a segment for concatenation
+     */
+    toSegment(): ComponentSegment;
+    /**
+     * Check if this component supports concatenation
+     */
+    isConcatenatable(): boolean;
+    /**
+     * Determine accessibility role for concatenation
+     */
+    private determineAccessibilityRole;
+    /**
+     * Merge accessibility roles when combining components
+     */
+    private mergeAccessibilityRoles;
+}
+/**
+ * Create enhanced Button component with modifier support
+ */
+export declare function Button(title: string | (() => string) | Signal<string>, action?: () => void | Promise<void>, props?: Omit<ButtonProps, 'title' | 'action'>): ModifiableComponent<ButtonProps> & {
+    modifier: ModifierBuilder<ModifiableComponent<ButtonProps>>;
+};
+/**
+ * Button variant shortcuts
+ */
+export declare const ButtonStyles: {
+    /**
+     * Filled button (primary)
+     */
+    Filled: (title: string | (() => string) | Signal<string>, action?: () => void | Promise<void>, props?: Omit<ButtonProps, "title" | "action" | "variant">) => ModifiableComponent<ButtonProps> & {
+        modifier: ModifierBuilder<ModifiableComponent<ButtonProps>>;
+    };
+    /**
+     * Outlined button
+     */
+    Outlined: (title: string | (() => string) | Signal<string>, action?: () => void | Promise<void>, props?: Omit<ButtonProps, "title" | "action" | "variant">) => ModifiableComponent<ButtonProps> & {
+        modifier: ModifierBuilder<ModifiableComponent<ButtonProps>>;
+    };
+    /**
+     * Plain button (text only)
+     */
+    Plain: (title: string | (() => string) | Signal<string>, action?: () => void | Promise<void>, props?: Omit<ButtonProps, "title" | "action" | "variant">) => ModifiableComponent<ButtonProps> & {
+        modifier: ModifierBuilder<ModifiableComponent<ButtonProps>>;
+    };
+    /**
+     * Bordered button
+     */
+    Bordered: (title: string | (() => string) | Signal<string>, action?: () => void | Promise<void>, props?: Omit<ButtonProps, "title" | "action" | "variant">) => ModifiableComponent<ButtonProps> & {
+        modifier: ModifierBuilder<ModifiableComponent<ButtonProps>>;
+    };
+    /**
+     * Destructive button
+     */
+    Destructive: (title: string | (() => string) | Signal<string>, action?: () => void | Promise<void>, props?: Omit<ButtonProps, "title" | "action" | "role">) => ModifiableComponent<ButtonProps> & {
+        modifier: ModifierBuilder<ModifiableComponent<ButtonProps>>;
+    };
+    /**
+     * Cancel button
+     */
+    Cancel: (title: string | (() => string) | Signal<string>, action?: () => void | Promise<void>, props?: Omit<ButtonProps, "title" | "action" | "role">) => ModifiableComponent<ButtonProps> & {
+        modifier: ModifierBuilder<ModifiableComponent<ButtonProps>>;
+    };
+};
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.ts"],"names":[],"mappings":"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"}