@tachui/core 0.7.0-alpha1 → 0.7.1-alpha

package/src/components/Divider.ts

@@ -1,341 +0,0 @@
-/**
- * Divider Component
- *
- * SwiftUI-inspired Divider component for visual separation between content.
- * Simple, clean line separator with customizable styling.
- */
-
-import type { ModifiableComponent, ModifierBuilder } from '../modifiers/types'
-import { createEffect, isSignal } from '../reactive'
-import type { Signal } from '../reactive/types'
-import { h } from '../runtime'
-import type { ComponentInstance, ComponentProps, DOMNode } from '../runtime/types'
-import { withModifiers } from './wrapper'
-
-/**
- * Divider component properties
- */
-export interface DividerProps extends ComponentProps {
-  // Appearance
-  color?: string | Signal<string>
-  thickness?: number | Signal<number>
-  length?: number | string | Signal<number | string>
-
-  // Orientation
-  orientation?: 'horizontal' | 'vertical'
-
-  // Spacing
-  margin?: number | Signal<number>
-
-  // Style
-  style?: 'solid' | 'dashed' | 'dotted'
-  opacity?: number | Signal<number>
-}
-
-/**
- * Default divider theme
- */
-export interface DividerTheme {
-  colors: {
-    default: string
-    light: string
-    medium: string
-    heavy: string
-  }
-  thickness: {
-    thin: number
-    medium: number
-    thick: number
-  }
-  spacing: {
-    small: number
-    medium: number
-    large: number
-  }
-}
-
-export const defaultDividerTheme: DividerTheme = {
-  colors: {
-    default: '#E5E5E5',
-    light: '#F0F0F0',
-    medium: '#D1D1D1',
-    heavy: '#A0A0A0',
-  },
-  thickness: {
-    thin: 1,
-    medium: 2,
-    thick: 3,
-  },
-  spacing: {
-    small: 8,
-    medium: 16,
-    large: 24,
-  },
-}
-
-/**
- * Divider component implementation
- */
-export class DividerComponent implements ComponentInstance<DividerProps> {
-  public readonly type = 'component' as const
-  public readonly id: string
-  public readonly props: DividerProps
-  private theme: DividerTheme = defaultDividerTheme
-
-  constructor(props: DividerProps) {
-    this.props = props
-    this.id = `divider-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
-  }
-
-  private resolveValue<T>(value: T | Signal<T>): T {
-    return isSignal(value) ? value() : value
-  }
-
-  private getBaseStyles(): Record<string, string> {
-    const isVertical = this.props.orientation === 'vertical'
-    const thickness = this.resolveValue(this.props.thickness ?? this.theme.thickness.thin)
-    const color = this.resolveValue(this.props.color ?? this.theme.colors.default)
-    const style = this.props.style ?? 'solid'
-    const opacity = this.resolveValue(this.props.opacity ?? 1)
-    const margin = this.resolveValue(this.props.margin ?? this.theme.spacing.medium)
-    const length = this.resolveValue(this.props.length)
-
-    const baseStyles: Record<string, string> = {
-      border: 'none',
-      margin: '0',
-      padding: '0',
-      backgroundColor: color,
-      opacity: String(opacity),
-      flexShrink: '0',
-    }
-
-    if (isVertical) {
-      // Vertical divider
-      baseStyles.width = `${thickness}px`
-      baseStyles.height = length ? (typeof length === 'string' ? length : `${length}px`) : '100%'
-      baseStyles.marginLeft = `${margin}px`
-      baseStyles.marginRight = `${margin}px`
-      baseStyles.alignSelf = 'stretch'
-    } else {
-      // Horizontal divider (default)
-      baseStyles.height = `${thickness}px`
-      baseStyles.width = length ? (typeof length === 'string' ? length : `${length}px`) : '100%'
-      baseStyles.marginTop = `${margin}px`
-      baseStyles.marginBottom = `${margin}px`
-    }
-
-    // Handle dashed/dotted styles differently
-    if (style === 'dashed' || style === 'dotted') {
-      baseStyles.backgroundColor = 'transparent'
-      if (isVertical) {
-        baseStyles.borderRight = `${thickness}px ${style} ${color}`
-      } else {
-        baseStyles.borderTop = `${thickness}px ${style} ${color}`
-      }
-    }
-
-    return baseStyles
-  }
-
-  render(): DOMNode {
-    const element = h('div', {
-      role: 'separator',
-      'aria-orientation': this.props.orientation ?? 'horizontal',
-      style: this.getBaseStyles(),
-    })
-
-    // Set up reactive updates for dynamic properties
-    const reactiveProps = ['color', 'thickness', 'length', 'margin', 'opacity'] as const
-
-    reactiveProps.forEach((prop) => {
-      const value = this.props[prop]
-      if (isSignal(value)) {
-        createEffect(() => {
-          // Recalculate and apply styles when reactive values change
-          const newStyles = this.getBaseStyles()
-          const elementDOM = element.element as HTMLElement
-          if (elementDOM) {
-            Object.assign(elementDOM.style, newStyles)
-          }
-        })
-      }
-    })
-
-    // For tests that call getAttribute directly on returned DOMNode,
-    // expose minimal helpers mapping to props
-    // biome-ignore lint/suspicious/noExplicitAny: DOM compatibility requires any for dynamic property access
-    ;(element as any).getAttribute = (name: string) => {
-      // biome-ignore lint/suspicious/noExplicitAny: Dynamic props access for DOM compatibility
-      const value = (element.props as any)?.[name]
-      return value == null ? null : String(value)
-    }
-    // biome-ignore lint/suspicious/noExplicitAny: Test utility requires DOM-like interface
-    ;(element as any).setAttribute = (name: string, value: any) => {
-      if (!element.props)
-        element.props = {}
-        // biome-ignore lint/suspicious/noExplicitAny: Dynamic props access
-      ;(element.props as any)[name] = value
-    }
-
-    return element
-  }
-}
-
-/**
- * Create a Divider component
- */
-export function Divider(props?: DividerProps): ModifiableComponent<DividerProps> & {
-  modifier: ModifierBuilder<ModifiableComponent<DividerProps>>
-}
-export function Divider(): ModifiableComponent<DividerProps> & {
-  modifier: ModifierBuilder<ModifiableComponent<DividerProps>>
-}
-export function Divider(props: DividerProps = {}): ModifiableComponent<DividerProps> & {
-  modifier: ModifierBuilder<ModifiableComponent<DividerProps>>
-} {
-  return withModifiers(new DividerComponent(props))
-}
-
-/**
- * Divider utility functions and presets
- */
-export const DividerUtils = {
-  /**
-   * Create a thin horizontal divider
-   */
-  thin(color?: string): ModifiableComponent<DividerProps> & {
-    modifier: ModifierBuilder<ModifiableComponent<DividerProps>>
-  } {
-    return Divider({
-      thickness: defaultDividerTheme.thickness.thin,
-      color,
-    })
-  },
-
-  /**
-   * Create a medium horizontal divider
-   */
-  medium(color?: string): ModifiableComponent<DividerProps> & {
-    modifier: ModifierBuilder<ModifiableComponent<DividerProps>>
-  } {
-    return Divider({
-      thickness: defaultDividerTheme.thickness.medium,
-      color,
-    })
-  },
-
-  /**
-   * Create a thick horizontal divider
-   */
-  thick(color?: string): ModifiableComponent<DividerProps> & {
-    modifier: ModifierBuilder<ModifiableComponent<DividerProps>>
-  } {
-    return Divider({
-      thickness: defaultDividerTheme.thickness.thick,
-      color,
-    })
-  },
-
-  /**
-   * Create a vertical divider
-   */
-  vertical(
-    height?: number | string,
-    thickness?: number
-  ): ModifiableComponent<DividerProps> & {
-    modifier: ModifierBuilder<ModifiableComponent<DividerProps>>
-  } {
-    return Divider({
-      orientation: 'vertical',
-      length: height,
-      thickness,
-    })
-  },
-
-  /**
-   * Create a dashed divider
-   */
-  dashed(
-    color?: string,
-    thickness?: number
-  ): ModifiableComponent<DividerProps> & {
-    modifier: ModifierBuilder<ModifiableComponent<DividerProps>>
-  } {
-    return Divider({
-      style: 'dashed',
-      color,
-      thickness,
-    })
-  },
-
-  /**
-   * Create a dotted divider
-   */
-  dotted(
-    color?: string,
-    thickness?: number
-  ): ModifiableComponent<DividerProps> & {
-    modifier: ModifierBuilder<ModifiableComponent<DividerProps>>
-  } {
-    return Divider({
-      style: 'dotted',
-      color,
-      thickness,
-    })
-  },
-
-  /**
-   * Create a subtle divider with light color
-   */
-  subtle(): ModifiableComponent<DividerProps> & {
-    modifier: ModifierBuilder<ModifiableComponent<DividerProps>>
-  } {
-    return Divider({
-      color: defaultDividerTheme.colors.light,
-      opacity: 0.6,
-    })
-  },
-
-  /**
-   * Create a prominent divider with heavier color
-   */
-  prominent(): ModifiableComponent<DividerProps> & {
-    modifier: ModifierBuilder<ModifiableComponent<DividerProps>>
-  } {
-    return Divider({
-      color: defaultDividerTheme.colors.heavy,
-      thickness: defaultDividerTheme.thickness.medium,
-    })
-  },
-}
-
-/**
- * Divider styles and theming
- */
-export const DividerStyles = {
-  theme: defaultDividerTheme,
-
-  /**
-   * Create a custom divider theme
-   */
-  createTheme(overrides: Partial<DividerTheme>): DividerTheme {
-    return {
-      colors: { ...defaultDividerTheme.colors, ...overrides.colors },
-      thickness: { ...defaultDividerTheme.thickness, ...overrides.thickness },
-      spacing: { ...defaultDividerTheme.spacing, ...overrides.spacing },
-    }
-  },
-
-  /**
-   * Preset color schemes
-   */
-  colors: {
-    light: defaultDividerTheme.colors.light,
-    medium: defaultDividerTheme.colors.medium,
-    heavy: defaultDividerTheme.colors.heavy,
-    primary: '#007AFF',
-    success: '#34C759',
-    warning: '#FF9500',
-    danger: '#FF3B30',
-  },
-}