@tachui/modifiers 0.8.0-alpha

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../src/types.ts"],"sourcesContent":["/**\n * SwiftUI Modifier System Types\n *\n * Core type definitions for the SwiftUI-inspired modifier system.\n * Enables chaining modifiers on components similar to SwiftUI.\n */\n\nimport type { Signal } from '@tachui/core/reactive/types'\nimport type {\n  ComponentInstance,\n  ComponentProps,\n  DOMNode,\n} from '@tachui/core/runtime/types'\n\n// Re-export for convenience\nexport type { DOMNode } from '@tachui/core/runtime/types'\n// Temporary type definitions until we migrate all types\nexport type Dimension = number | string | 'infinity'\nexport interface StatefulBackgroundValue {\n  default: any\n  hover?: any\n  active?: any\n  focus?: any\n  disabled?: any\n}\n\n// Basic asset interfaces - simplified for now\nexport interface Asset {\n  resolve(): any\n}\nexport interface ColorAssetProxy extends Asset {}\nexport interface ImageAssetProxy extends Asset {}\nexport interface FontAssetProxy extends Asset {}\n\n/**\n * Valid color value types for modifiers\n */\nexport type ColorValue = string | Asset | ColorAssetProxy | Signal<string>\n\n/**\n * Valid asset types for modifiers\n */\nexport type AssetValue =\n  | Asset\n  | ColorAssetProxy\n  | ImageAssetProxy\n  | FontAssetProxy\n\n/**\n * Text component interface for type safety with asHTML modifier\n */\nexport interface TextComponent extends ComponentInstance {\n  readonly __tachui_component_type: 'Text'\n  content: string\n}\n\n/**\n * Base modifier interface that all modifiers must implement\n */\nexport interface Modifier<TProps = {}> {\n  readonly type: string\n  readonly priority: number\n  readonly properties: TProps\n  apply(node: DOMNode, context: ModifierContext): DOMNode | undefined\n}\n\n/**\n * Context passed to modifiers during application\n */\nexport interface ModifierContext {\n  componentId: string\n  componentInstance?: ComponentInstance\n  element?: Element\n  parentElement?: Element\n  phase: 'creation' | 'update' | 'cleanup'\n  previousModifiers?: Modifier[]\n}\n\n/**\n * Modifier application result\n */\nexport interface ModifierResult {\n  node: DOMNode\n  effects?: (() => void)[]\n  cleanup?: (() => void)[]\n}\n\n/**\n * Reactive modifier properties that can contain signals\n */\nexport type ReactiveModifierProps<T> = {\n  [K in keyof T]: T[K] | Signal<T[K]>\n}\n\n/**\n * Strict TextShadow configuration interface\n * Prevents common mistakes like using 'radius' instead of 'blur'\n */\nexport interface TextShadowConfig {\n  readonly x: number\n  readonly y: number\n  readonly blur: number\n  readonly color: string\n}\n\n/**\n * Layout modifier properties\n */\nexport interface LayoutModifierProps {\n  frame?: {\n    width?: Dimension\n    height?: Dimension\n    minWidth?: Dimension\n    maxWidth?: Dimension\n    minHeight?: Dimension\n    maxHeight?: Dimension\n  }\n  padding?:\n    | {\n        top?: number\n        right?: number\n        bottom?: number\n        left?: number\n      }\n    | number\n  margin?:\n    | {\n        top?: number | string\n        right?: number | string\n        bottom?: number | string\n        left?: number | string\n      }\n    | number\n    | string\n  alignment?: 'leading' | 'center' | 'trailing' | 'top' | 'bottom'\n  layoutPriority?: number\n  offset?: {\n    x?: number\n    y?: number\n  }\n  aspectRatio?: {\n    ratio?: number\n    contentMode?: 'fit' | 'fill'\n  }\n  fixedSize?: {\n    horizontal?: boolean\n    vertical?: boolean\n  }\n  // Transform Properties (Phase 3 - Epic: Butternut)\n  scaleEffect?: {\n    x?: number\n    y?: number\n    anchor?:\n      | 'center'\n      | 'top'\n      | 'topLeading'\n      | 'topTrailing'\n      | 'bottom'\n      | 'bottomLeading'\n      | 'bottomTrailing'\n      | 'leading'\n      | 'trailing'\n  }\n  position?: {\n    x?: number\n    y?: number\n  }\n  zIndex?: number\n}\n\n/**\n * Appearance modifier properties\n */\nexport interface AppearanceModifierProps {\n  foregroundColor?: ColorValue\n  backgroundColor?: ColorValue\n  background?: StatefulBackgroundValue\n  opacity?: number\n  font?: {\n    family?: string\n    size?: number | string | Signal<number> | Signal<string>\n    weight?:\n      | 'normal'\n      | 'bold'\n      | '100'\n      | '200'\n      | '300'\n      | '400'\n      | '500'\n      | '600'\n      | '700'\n      | '800'\n      | '900'\n    style?: 'normal' | 'italic' | 'oblique'\n  }\n  cornerRadius?: number\n  border?: {\n    width?: number | Signal<number>\n    color?: ColorValue\n    style?: 'solid' | 'dashed' | 'dotted'\n  }\n  shadow?: {\n    color?: string\n    radius?: number\n    x?: number\n    y?: number\n  }\n  clipped?: boolean\n  clipShape?: {\n    shape: 'circle' | 'ellipse' | 'rect' | 'polygon'\n    parameters?: Record<string, any>\n  }\n  // Visual Effects (Phase 2 - Epic: Butternut)\n  blur?: number // CSS filter: blur(Npx)\n  brightness?: number // CSS filter: brightness(N) - 1.0 is normal\n  contrast?: number // CSS filter: contrast(N) - 1.0 is normal\n  saturation?: number // CSS filter: saturate(N) - 1.0 is normal\n  hueRotation?: number // CSS filter: hue-rotate(Ndeg)\n  grayscale?: number // CSS filter: grayscale(N) - 0.0 to 1.0\n  colorInvert?: number // CSS filter: invert(N) - 0.0 to 1.0\n}\n\n/**\n * Interaction modifier properties\n */\nexport interface InteractionModifierProps {\n  // Existing mouse events\n  onTap?: (event: MouseEvent) => void\n  onHover?: (isHovered: boolean) => void\n  onMouseEnter?: (event: MouseEvent) => void\n  onMouseLeave?: (event: MouseEvent) => void\n  onMouseDown?: (event: MouseEvent) => void\n  onMouseUp?: (event: MouseEvent) => void\n  onDoubleClick?: (event: MouseEvent) => void\n  onContextMenu?: (event: MouseEvent) => void\n\n  // Existing drag events\n  onDragStart?: (event: DragEvent) => void\n  onDragOver?: (event: DragEvent) => void\n  onDragLeave?: (event: DragEvent) => void\n  onDrop?: (event: DragEvent) => void\n\n  // Focus events (onFocus exists, adding onBlur)\n  onFocus?: (isFocused: boolean) => void\n  onBlur?: (isFocused: boolean) => void\n\n  // Keyboard events\n  onKeyPress?: (event: KeyboardEvent) => void\n  onKeyDown?: (event: KeyboardEvent) => void\n  onKeyUp?: (event: KeyboardEvent) => void\n\n  // Scroll and wheel events\n  onScroll?: (event: Event) => void\n  onWheel?: (event: WheelEvent) => void\n\n  // Input events\n  onInput?: (event: InputEvent) => void\n  onChange?: (value: any, event?: Event) => void\n\n  // Clipboard events\n  onCopy?: (event: ClipboardEvent) => void\n  onCut?: (event: ClipboardEvent) => void\n  onPaste?: (event: ClipboardEvent) => void\n\n  // Touch events\n  onTouchStart?: (event: TouchEvent) => void\n  onTouchMove?: (event: TouchEvent) => void\n  onTouchEnd?: (event: TouchEvent) => void\n  onTouchCancel?: (event: TouchEvent) => void\n\n  // Other events\n  onSelect?: (event: Event) => void\n\n  // Advanced Gesture Modifiers (Phase 4 - Epic: Butternut)\n  onLongPressGesture?: {\n    minimumDuration?: number // ms, default 500\n    maximumDistance?: number // px, default 10\n    perform: () => void\n    onPressingChanged?: (isPressing: boolean) => void\n  }\n\n  // Keyboard Shortcuts (Phase 4 - Epic: Butternut)\n  keyboardShortcut?: {\n    key: string\n    modifiers?: ('cmd' | 'ctrl' | 'shift' | 'alt' | 'meta')[]\n    action: () => void\n  }\n\n  // Focus Management (Phase 4 - Epic: Butternut)\n  focused?: boolean | Signal<boolean>\n  focusable?: {\n    isFocusable?: boolean\n    interactions?: ('activate' | 'edit')[]\n  }\n\n  // Enhanced Hover Tracking (Phase 4 - Epic: Butternut)\n  onContinuousHover?: {\n    coordinateSpace?: 'local' | 'global'\n    perform: (location: { x: number; y: number } | null) => void\n  }\n\n  // Gesture Priority System (Phase 4 - Epic: Butternut)\n  highPriorityGesture?: {\n    gesture: any // Will define gesture types later\n    including?: ('all' | 'subviews' | 'none')[]\n  }\n  simultaneousGesture?: {\n    gesture: any\n    including?: ('all' | 'subviews' | 'none')[]\n  }\n\n  // Hit Testing Control (Phase 4 - Epic: Butternut)\n  allowsHitTesting?: boolean\n\n  // Existing state properties\n  disabled?: boolean\n  draggable?: boolean\n  accessibilityLabel?: string\n  accessibilityHint?: string\n}\n\n/**\n * Animation modifier properties\n */\nexport interface AnimationModifierProps {\n  transition?: {\n    property?: string\n    duration?: number\n    easing?: string\n    delay?: number\n  }\n  animation?: {\n    keyframes?: Record<string, Record<string, string>>\n    duration?: number\n    easing?: string\n    iterations?: number | 'infinite'\n    direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse'\n  }\n  transform?: string | Signal<string>\n  rotationEffect?: {\n    angle: number\n    anchor?:\n      | 'center'\n      | 'top'\n      | 'topLeading'\n      | 'topTrailing'\n      | 'bottom'\n      | 'bottomLeading'\n      | 'bottomTrailing'\n      | 'leading'\n      | 'trailing'\n  }\n  overlay?: {\n    content: any // ComponentInstance or function that returns ComponentInstance\n    alignment?:\n      | 'center'\n      | 'top'\n      | 'bottom'\n      | 'leading'\n      | 'trailing'\n      | 'topLeading'\n      | 'topTrailing'\n      | 'bottomLeading'\n      | 'bottomTrailing'\n  }\n}\n\n/**\n * Lifecycle modifier properties\n */\nexport interface LifecycleModifierProps {\n  onAppear?: () => void\n  onDisappear?: () => void\n  task?: {\n    operation: () => Promise<void> | void\n    id?: string\n    priority?: 'background' | 'userInitiated' | 'utility' | 'default'\n  }\n  refreshable?: {\n    onRefresh: () => Promise<void>\n    isRefreshing?: boolean | Signal<boolean>\n  }\n}\n\n/**\n * Modifier factory function type\n */\nexport type ModifierFactory<TProps = {}> = (\n  props: ReactiveModifierProps<TProps>\n) => Modifier<TProps>\n\n/**\n * Modifier builder interface for creating chainable modifiers\n */\nexport interface ModifierBuilder<\n  T extends ComponentInstance = ComponentInstance,\n> {\n  // Layout modifiers\n  frame(width?: Dimension, height?: Dimension): ModifierBuilder<T>\n  frame(options: LayoutModifierProps['frame']): ModifierBuilder<T>\n  padding(value: number): ModifierBuilder<T>\n  padding(options: LayoutModifierProps['padding']): ModifierBuilder<T>\n  margin(value: number | string): ModifierBuilder<T>\n  margin(options: LayoutModifierProps['margin']): ModifierBuilder<T>\n\n  // New multi-property modifiers\n  size(options: {\n    width?: Dimension\n    height?: Dimension\n    minWidth?: Dimension\n    maxWidth?: Dimension\n    minHeight?: Dimension\n    maxHeight?: Dimension\n  }): ModifierBuilder<T>\n  width(value: Dimension): ModifierBuilder<T>\n  height(value: Dimension): ModifierBuilder<T>\n  maxWidth(value: Dimension): ModifierBuilder<T>\n  minWidth(value: Dimension): ModifierBuilder<T>\n  maxHeight(value: Dimension): ModifierBuilder<T>\n  minHeight(value: Dimension): ModifierBuilder<T>\n  marginTop(value: number | string): ModifierBuilder<T>\n  marginBottom(value: number | string): ModifierBuilder<T>\n  marginHorizontal(value: number | string): ModifierBuilder<T>\n  marginVertical(value: number | string): ModifierBuilder<T>\n\n  // Typography modifiers\n  typography(options: {\n    size?: number | string\n    weight?: string | number\n    family?: string\n    lineHeight?: number | string\n    letterSpacing?: number | string\n    align?: string\n    transform?: string\n    decoration?: string\n    variant?: string\n    style?: string\n    color?: string\n  }): ModifierBuilder<T>\n  textAlign(\n    value: 'left' | 'center' | 'right' | 'justify' | 'start' | 'end'\n  ): ModifierBuilder<T>\n  textTransform(\n    value: 'none' | 'uppercase' | 'lowercase' | 'capitalize'\n  ): ModifierBuilder<T>\n  letterSpacing(value: number | string): ModifierBuilder<T>\n  lineHeight(value: number | string): ModifierBuilder<T>\n  gradientText(gradient: string): ModifierBuilder<T>\n\n  // Border modifiers\n  borderTop(\n    width: number | Signal<number>,\n    color: ColorValue,\n    style?:\n      | 'solid'\n      | 'dashed'\n      | 'dotted'\n      | 'double'\n      | 'groove'\n      | 'ridge'\n      | 'inset'\n      | 'outset'\n  ): ModifierBuilder<T>\n  borderRight(\n    width: number | Signal<number>,\n    color: ColorValue,\n    style?:\n      | 'solid'\n      | 'dashed'\n      | 'dotted'\n      | 'double'\n      | 'groove'\n      | 'ridge'\n      | 'inset'\n      | 'outset'\n  ): ModifierBuilder<T>\n  borderBottom(\n    width: number | Signal<number>,\n    color: ColorValue,\n    style?:\n      | 'solid'\n      | 'dashed'\n      | 'dotted'\n      | 'double'\n      | 'groove'\n      | 'ridge'\n      | 'inset'\n      | 'outset'\n  ): ModifierBuilder<T>\n  borderLeft(\n    width: number | Signal<number>,\n    color: ColorValue,\n    style?:\n      | 'solid'\n      | 'dashed'\n      | 'dotted'\n      | 'double'\n      | 'groove'\n      | 'ridge'\n      | 'inset'\n      | 'outset'\n  ): ModifierBuilder<T>\n\n  // Flexbox modifiers\n  flexGrow(value: number): ModifierBuilder<T>\n  flexShrink(value: number): ModifierBuilder<T>\n  justifyContent(\n    value:\n      | 'flex-start'\n      | 'flex-end'\n      | 'center'\n      | 'space-between'\n      | 'space-around'\n      | 'space-evenly'\n  ): ModifierBuilder<T>\n  alignItems(\n    value: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'\n  ): ModifierBuilder<T>\n  gap(value: number | string): ModifierBuilder<T>\n  flexDirection(\n    value: 'row' | 'row-reverse' | 'column' | 'column-reverse'\n  ): ModifierBuilder<T>\n  flexWrap(value: 'nowrap' | 'wrap' | 'wrap-reverse'): ModifierBuilder<T>\n\n  // Utility modifiers\n  cursor(\n    value:\n      | 'auto'\n      | 'default'\n      | 'pointer'\n      | 'text'\n      | 'wait'\n      | 'help'\n      | 'not-allowed'\n      | 'grab'\n      | 'grabbing'\n  ): ModifierBuilder<T>\n  overflowY(value: 'visible' | 'hidden' | 'scroll' | 'auto'): ModifierBuilder<T>\n  overflowX(value: 'visible' | 'hidden' | 'scroll' | 'auto'): ModifierBuilder<T>\n  position(\n    value: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'\n  ): ModifierBuilder<T>\n  zIndex(value: number): ModifierBuilder<T>\n  display(\n    value:\n      | 'block'\n      | 'inline'\n      | 'inline-block'\n      | 'flex'\n      | 'inline-flex'\n      | 'grid'\n      | 'none'\n  ): ModifierBuilder<T>\n  transform(value: string | Signal<string>): ModifierBuilder<T>\n\n  // Raw CSS modifiers\n  css(properties: {\n    [property: string]: string | number | undefined\n  }): ModifierBuilder<T>\n  cssProperty(property: string, value: string | number): ModifierBuilder<T>\n  cssVariable(name: string, value: string | number): ModifierBuilder<T>\n\n  // Phase 1 SwiftUI modifiers\n  offset(\n    x: number | Signal<number>,\n    y?: number | Signal<number>\n  ): ModifierBuilder<T>\n  clipped(): ModifierBuilder<T>\n  rotationEffect(\n    angle: number | Signal<number>,\n    anchor?:\n      | 'center'\n      | 'top'\n      | 'topLeading'\n      | 'topTrailing'\n      | 'bottom'\n      | 'bottomLeading'\n      | 'bottomTrailing'\n      | 'leading'\n      | 'trailing'\n  ): ModifierBuilder<T>\n\n  // Phase 2 SwiftUI modifiers\n  aspectRatio(\n    ratio?: number | Signal<number>,\n    contentMode?: 'fit' | 'fill'\n  ): ModifierBuilder<T>\n  fixedSize(horizontal?: boolean, vertical?: boolean): ModifierBuilder<T>\n  clipShape(\n    shape: 'circle' | 'ellipse' | 'rect' | 'polygon',\n    parameters?: Record<string, any>\n  ): ModifierBuilder<T>\n  overlay(\n    content: any,\n    alignment?:\n      | 'center'\n      | 'top'\n      | 'bottom'\n      | 'leading'\n      | 'trailing'\n      | 'topLeading'\n      | 'topTrailing'\n      | 'bottomLeading'\n      | 'bottomTrailing'\n  ): ModifierBuilder<T>\n\n  // Phase 3 SwiftUI modifiers - Critical Transform Modifiers\n  scaleEffect(\n    x: number | Signal<number>,\n    y?: number | Signal<number>,\n    anchor?:\n      | 'center'\n      | 'top'\n      | 'topLeading'\n      | 'topTrailing'\n      | 'bottom'\n      | 'bottomLeading'\n      | 'bottomTrailing'\n      | 'leading'\n      | 'trailing'\n  ): ModifierBuilder<T>\n\n  // Note: SwiftUI-style position for absolute positioning (different from CSS position)\n  absolutePosition(\n    x: number | Signal<number>,\n    y: number | Signal<number>\n  ): ModifierBuilder<T>\n\n  // Appearance modifiers\n  foregroundColor(color: ColorValue): ModifierBuilder<T>\n  backgroundColor(color: ColorValue): ModifierBuilder<T>\n  background(\n    value: StatefulBackgroundValue | Signal<string>\n  ): ModifierBuilder<T>\n  font(options: AppearanceModifierProps['font']): ModifierBuilder<T>\n  font(size: number | string): ModifierBuilder<T>\n  fontWeight(\n    weight: NonNullable<AppearanceModifierProps['font']>['weight']\n  ): ModifierBuilder<T>\n  fontSize(\n    size: number | string | Signal<number> | Signal<string>\n  ): ModifierBuilder<T>\n  opacity(value: number | Signal<number>): ModifierBuilder<T>\n  cornerRadius(radius: number | Signal<number>): ModifierBuilder<T>\n  border(width: number | Signal<number>, color?: ColorValue): ModifierBuilder<T>\n  border(options: AppearanceModifierProps['border']): ModifierBuilder<T>\n  borderWidth(width: number | Signal<number>): ModifierBuilder<T>\n  shadow(options: AppearanceModifierProps['shadow']): ModifierBuilder<T>\n  shadow(config: {\n    x: number\n    y: number\n    blur: number\n    color: string\n    spread?: number\n    inset?: boolean\n  }): ModifierBuilder<T>\n  shadows(\n    configs: Array<{\n      x: number\n      y: number\n      blur: number\n      color: string\n      spread?: number\n      inset?: boolean\n    }>\n  ): ModifierBuilder<T>\n  textShadow(config: TextShadowConfig): ModifierBuilder<T>\n  shadowPreset(presetName: string): ModifierBuilder<T>\n\n  // Visual Effects Modifiers (Phase 2 - Epic: Butternut)\n\n  // ============================================================================\n  // VISUAL EFFECTS METHODS MOVED TO @tachui/effects\n  // ============================================================================\n  // Visual effects methods (filters, transforms, backdrop, hover) have been\n  // moved to @tachui/effects package. Import and use with .apply():\n  //\n  //   import { blur, scale, glassmorphism, hoverEffect } from '@tachui/effects'\n  //   VStack().apply(blur(5)).apply(scale(1.1))\n  //\n  // This provides better tree-shaking and cleaner plugin boundaries.\n  // ============================================================================\n\n  // Advanced Gesture Modifiers (Phase 4 - Epic: Butternut)\n  onLongPressGesture(options: {\n    minimumDuration?: number\n    maximumDistance?: number\n    perform: () => void\n    onPressingChanged?: (isPressing: boolean) => void\n  }): ModifierBuilder<T>\n\n  // Keyboard Shortcuts (Phase 4 - Epic: Butternut)\n  keyboardShortcut(\n    key: string,\n    modifiers: ('cmd' | 'ctrl' | 'shift' | 'alt' | 'meta')[],\n    action: () => void\n  ): ModifierBuilder<T>\n\n  // Focus Management (Phase 4 - Epic: Butternut)\n  focused(binding: boolean | Signal<boolean>): ModifierBuilder<T>\n  focusable(\n    isFocusable?: boolean,\n    interactions?: ('activate' | 'edit')[]\n  ): ModifierBuilder<T>\n\n  // Enhanced Hover Tracking (Phase 4 - Epic: Butternut)\n  onContinuousHover(\n    coordinateSpace: 'local' | 'global',\n    perform: (location: { x: number; y: number } | null) => void\n  ): ModifierBuilder<T>\n\n  // Gesture Priority System (Phase 4 - Epic: Butternut)\n  highPriorityGesture(\n    gesture: any,\n    including?: ('all' | 'subviews' | 'none')[]\n  ): ModifierBuilder<T>\n  simultaneousGesture(\n    gesture: any,\n    including?: ('all' | 'subviews' | 'none')[]\n  ): ModifierBuilder<T>\n\n  // Hit Testing Control (Phase 4 - Epic: Butternut)\n  allowsHitTesting(enabled: boolean): ModifierBuilder<T>\n\n  // HTML and ARIA Attributes\n  id(value: string): ModifierBuilder<T>\n  data(attributes: {\n    [key: string]: string | number | boolean\n  }): ModifierBuilder<T>\n  aria(attributes: {\n    [key: string]: string | number | boolean | undefined\n  }): ModifierBuilder<T>\n  tabIndex(value: number): ModifierBuilder<T>\n\n  // Text Modifiers\n  lineClamp(lines: number): ModifierBuilder<T>\n  wordBreak(\n    value: 'normal' | 'break-all' | 'keep-all' | 'break-word'\n  ): ModifierBuilder<T>\n  overflowWrap(value: 'normal' | 'break-word' | 'anywhere'): ModifierBuilder<T>\n  hyphens(value: 'none' | 'manual' | 'auto'): ModifierBuilder<T>\n\n  // Backdrop Filter Modifiers (Unified Implementation)\n  backdropFilter(\n    config: {\n      blur?: number\n      brightness?: number\n      contrast?: number\n      saturate?: number\n      [key: string]: any\n    },\n    fallbackColor?: ColorValue\n  ): ModifierBuilder<T>\n  backdropFilter(\n    cssValue: string,\n    fallbackColor?: ColorValue\n  ): ModifierBuilder<T>\n  glassmorphism(\n    intensity?: 'subtle' | 'light' | 'medium' | 'heavy',\n    customFallback?: ColorValue\n  ): ModifierBuilder<T>\n\n  // Pseudo-element modifiers\n  before(styles: {\n    content: string\n    color?: string\n    [key: string]: any\n  }): ModifierBuilder<T>\n  after(styles: {\n    content: string\n    color?: string\n    [key: string]: any\n  }): ModifierBuilder<T>\n\n  // State modifiers\n  disabled(isDisabled?: boolean | Signal<boolean>): ModifierBuilder<T>\n\n  // Animation modifiers\n  transition(\n    property?: string,\n    duration?: number,\n    easing?: string,\n    delay?: number\n  ): ModifierBuilder<T>\n  transitions(config: any): ModifierBuilder<T>\n  animation(options: AnimationModifierProps['animation']): ModifierBuilder<T>\n\n  // Transition presets\n  fadeTransition(duration?: number): ModifierBuilder<T>\n  transformTransition(duration?: number): ModifierBuilder<T>\n  colorTransition(duration?: number): ModifierBuilder<T>\n  layoutTransition(duration?: number): ModifierBuilder<T>\n  buttonTransition(): ModifierBuilder<T>\n  cardTransition(): ModifierBuilder<T>\n  modalTransition(): ModifierBuilder<T>\n  smoothTransition(duration?: number): ModifierBuilder<T>\n  quickTransition(duration?: number): ModifierBuilder<T>\n  slowTransition(duration?: number): ModifierBuilder<T>\n\n  // Scroll modifiers\n  scroll(config: any): ModifierBuilder<T>\n  scrollBehavior(value: 'auto' | 'smooth'): ModifierBuilder<T>\n  overscrollBehavior(value: 'auto' | 'contain' | 'none'): ModifierBuilder<T>\n  overscrollBehaviorX(value: 'auto' | 'contain' | 'none'): ModifierBuilder<T>\n  overscrollBehaviorY(value: 'auto' | 'contain' | 'none'): ModifierBuilder<T>\n  scrollMargin(\n    margin:\n      | number\n      | string\n      | {\n          top?: number | string\n          right?: number | string\n          bottom?: number | string\n          left?: number | string\n        }\n  ): ModifierBuilder<T>\n  scrollPadding(\n    padding:\n      | number\n      | string\n      | {\n          top?: number | string\n          right?: number | string\n          bottom?: number | string\n          left?: number | string\n        }\n  ): ModifierBuilder<T>\n  scrollSnap(\n    type:\n      | 'none'\n      | 'x mandatory'\n      | 'y mandatory'\n      | 'x proximity'\n      | 'y proximity'\n      | 'both mandatory'\n      | 'both proximity',\n    align?: 'start' | 'end' | 'center',\n    stop?: 'normal' | 'always'\n  ): ModifierBuilder<T>\n\n  // Lifecycle modifiers\n  onAppear(handler: () => void): ModifierBuilder<T>\n  onDisappear(handler: () => void): ModifierBuilder<T>\n  task(\n    operation: () => Promise<void> | void,\n    options?: {\n      id?: string\n      priority?: 'background' | 'userInitiated' | 'utility' | 'default'\n    }\n  ): ModifierBuilder<T>\n  refreshable(\n    onRefresh: () => Promise<void>,\n    isRefreshing?: boolean | Signal<boolean>\n  ): ModifierBuilder<T>\n\n  // Custom modifier application\n  modifier(modifier: Modifier): ModifierBuilder<T>\n\n  // Text case alias for textTransform\n  textCase(\n    value: 'none' | 'uppercase' | 'lowercase' | 'capitalize'\n  ): ModifierBuilder<T>\n\n  // HTML Content Rendering (Text components only)\n  /**\n   * Render component content as HTML instead of plain text\n   *\n   * ⚠️ **RESTRICTION**: Only available on Text components for security\n   * ⚠️ **SECURITY NOTICE**: This modifier treats content as HTML.\n   * - Default: Basic sanitization removes common XSS vectors\n   * - Use skipSanitizer: true only with fully trusted content\n   * - Consider DOMPurify for comprehensive sanitization\n   * - Non-reactive for performance (content is processed once)\n   *\n   * @param options - Configuration options\n   *\n   * @example\n   * ```typescript\n   * // ✅ Allowed: Text components only\n   * Text('<p>Hello <strong>world</strong></p>').modifier.asHTML().build()\n   *\n   * // ❌ Compile Error: Not a Text component\n   * VStack({}).modifier.asHTML() // TypeScript error\n   *\n   * // ✅ Dangerous: Skip sanitization\n   * Text(serverTemplate).modifier.asHTML({ skipSanitizer: true }).build()\n   * ```\n   */\n  asHTML(options?: { skipSanitizer?: boolean }): ModifierBuilder<T>\n\n  // Responsive functionality moved to @tachui/responsive package\n\n  // Interaction modifiers\n  onTap(handler: (event: MouseEvent) => void): ModifierBuilder<T>\n  onFocus(handler: (isFocused: boolean) => void): ModifierBuilder<T>\n  onBlur(handler: (isFocused: boolean) => void): ModifierBuilder<T>\n  onKeyDown(handler: (event: KeyboardEvent) => void): ModifierBuilder<T>\n  onScroll(handler: (event: Event) => void): ModifierBuilder<T>\n  onKeyPress(handler: (event: KeyboardEvent) => void): ModifierBuilder<T>\n  onKeyUp(handler: (event: KeyboardEvent) => void): ModifierBuilder<T>\n  onDoubleClick(handler: (event: MouseEvent) => void): ModifierBuilder<T>\n  onContextMenu(handler: (event: MouseEvent) => void): ModifierBuilder<T>\n  onWheel(handler: (event: WheelEvent) => void): ModifierBuilder<T>\n  onInput(handler: (event: InputEvent) => void): ModifierBuilder<T>\n  onChange(handler: (value: any, event?: Event) => void): ModifierBuilder<T>\n  onCopy(handler: (event: ClipboardEvent) => void): ModifierBuilder<T>\n  onCut(handler: (event: ClipboardEvent) => void): ModifierBuilder<T>\n  onPaste(handler: (event: ClipboardEvent) => void): ModifierBuilder<T>\n  onSelect(handler: (event: Event) => void): ModifierBuilder<T>\n\n  // Transition modifiers\n  transition(\n    property?: string,\n    duration?: number,\n    easing?: string,\n    delay?: number\n  ): ModifierBuilder<T>\n\n  addModifier(modifier: Modifier): void\n\n  // Build the final component with all modifiers applied\n  build(): T\n}\n\n/**\n * Modifiable component - components that can have modifiers applied\n */\nexport interface ModifiableComponent<P extends ComponentProps = ComponentProps>\n  extends ComponentInstance<P> {\n  modifiers: Modifier[]\n  modifierBuilder?: ModifierBuilder<ModifiableComponent<P>>\n}\n\n/**\n * CSS style properties that can be generated by modifiers\n */\nexport interface CSSStyleProperties {\n  [property: string]:\n    | string\n    | number\n    | Signal<string>\n    | Signal<number>\n    | undefined\n}\n\n/**\n * CSS class names that can be applied by modifiers\n */\nexport interface CSSClassNames {\n  base?: string[]\n  state?: Record<string, string[]>\n  responsive?: Record<string, string[]>\n}\n\n/**\n * Modifier registry for registering custom modifiers\n */\nexport interface ModifierRegistry {\n  register<TProps>(name: string, factory: ModifierFactory<TProps>): void\n  get<TProps>(name: string): ModifierFactory<TProps> | undefined\n  has(name: string): boolean\n  list(): string[]\n}\n\n/**\n * Modifier application options\n */\nexport interface ModifierApplicationOptions {\n  immediate?: boolean\n  batch?: boolean\n  suppressEffects?: boolean\n  enableAnimations?: boolean\n}\n\n/**\n * Modifier priority levels for ordering\n */\nexport enum ModifierPriority {\n  LAYOUT = 100,\n  APPEARANCE = 200,\n  INTERACTION = 300,\n  ANIMATION = 400,\n  CUSTOM = 500,\n}\n\n/**\n * Modifier application strategy\n */\nexport type ModifierApplicationStrategy =\n  | 'sequential' // Apply modifiers one by one in order\n  | 'batch' // Batch all style changes and apply at once\n  | 'immediate' // Apply each modifier immediately\n\n/**\n * Style computation context for reactive styles\n */\nexport interface StyleComputationContext {\n  componentId: string\n  element: Element\n  modifiers: Modifier[]\n  signals: Set<Signal<any>>\n  cleanup: (() => void)[]\n}\n"],"names":["ModifierPriority"],"mappings":"AAi9BO,IAAKA,sBAAAA,OACVA,EAAAA,EAAA,SAAS,GAAA,IAAT,UACAA,EAAAA,EAAA,aAAa,GAAA,IAAb,cACAA,EAAAA,EAAA,cAAc,GAAA,IAAd,eACAA,EAAAA,EAAA,YAAY,GAAA,IAAZ,aACAA,EAAAA,EAAA,SAAS,GAAA,IAAT,UALUA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/typography/font.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Font Modifiers
+ *
+ * SwiftUI-style font configuration modifiers
+ */
+import { TypographyModifier, type FontStyle, type FontWeight } from './typography';
+export interface FontOptions {
+    family?: string | any;
+    size?: number | string;
+    weight?: FontWeight | any;
+    style?: FontStyle;
+}
+export declare function font(options: FontOptions | string): TypographyModifier;
+export declare function system(options: {
+    size?: number | string;
+    weight?: FontWeight | any;
+    design?: 'default' | 'serif' | 'rounded' | 'monospaced';
+}): TypographyModifier;
+export declare function custom(family: string | any, options?: {
+    size?: number | string;
+    weight?: FontWeight | any;
+    style?: FontStyle;
+}): TypographyModifier;
+//# sourceMappingURL=font.d.ts.map

package/dist/typography/font.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font.d.ts","sourceRoot":"","sources":["../../src/typography/font.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EACL,kBAAkB,EAClB,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,cAAc,CAAA;AAErB,MAAM,WAAW,WAAW;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,MAAM,CAAC,EAAE,UAAU,GAAG,GAAG,CAAA;IACzB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,wBAAgB,IAAI,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,GAAG,kBAAkB,CAWtE;AAyBD,wBAAgB,MAAM,CAAC,OAAO,EAAE;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,MAAM,CAAC,EAAE,UAAU,GAAG,GAAG,CAAA;IACzB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,CAAA;CACxD,GAAG,kBAAkB,CAsBrB;AAED,wBAAgB,MAAM,CACpB,MAAM,EAAE,MAAM,GAAG,GAAG,EACpB,OAAO,CAAC,EAAE;IACR,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,MAAM,CAAC,EAAE,UAAU,GAAG,GAAG,CAAA;IACzB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,GACA,kBAAkB,CAOpB"}

package/dist/typography/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Typography Modifiers
+ *
+ * Text styling and font modifiers
+ */
+export * from './typography';
+export * from './font';
+export * from './text';
+//# sourceMappingURL=index.d.ts.map

package/dist/typography/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/typography/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA"}

package/dist/typography/index.js

@@ -0,0 +1,30 @@
+import { T as o, k as t, j as r, i as s, f as i, d as f, e as p, l as n, o as l, s as h, a as d, h as m, c as y, g, b as w, t as x, w as c } from "../font-3qM2Z97N.js";
+import { HyphensModifier as v, LineClampModifier as W, OverflowWrapModifier as k, WordBreakModifier as C, hyphens as S, lineClamp as T, overflowWrap as B, wordBreak as H } from "./text.js";
+export {
+  v as HyphensModifier,
+  W as LineClampModifier,
+  k as OverflowWrapModifier,
+  o as TypographyModifier,
+  C as WordBreakModifier,
+  t as custom,
+  r as font,
+  s as fontFamily,
+  i as fontSize,
+  f as fontWeight,
+  S as hyphens,
+  p as letterSpacing,
+  T as lineClamp,
+  n as lineHeight,
+  l as overflow,
+  B as overflowWrap,
+  h as system,
+  d as textAlign,
+  m as textCase,
+  y as textDecoration,
+  g as textOverflow,
+  w as textTransform,
+  x as typography,
+  c as whiteSpace,
+  H as wordBreak
+};
+//# sourceMappingURL=index.js.map

package/dist/typography/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/typography/text.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Text Modifiers Implementation
+ *
+ * Specialized text handling modifiers including line clamping, word breaking,
+ * overflow wrapping, and hyphenation control for enhanced typography.
+ */
+import type { DOMNode } from '@tachui/core/runtime/types';
+import { BaseModifier } from '../basic/base';
+import type { ModifierContext, ReactiveModifierProps } from '@tachui/core/modifiers/types';
+export interface LineClampOptions {
+    lines: number;
+}
+export type ReactiveLineClampOptions = ReactiveModifierProps<LineClampOptions>;
+export declare class LineClampModifier extends BaseModifier<LineClampOptions> {
+    readonly type = "lineClamp";
+    readonly priority: number;
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private generateLineClampStyles;
+    private validateLines;
+}
+/**
+ * Line clamp modifier function - SwiftUI .lineLimit() equivalent
+ */
+export declare function lineClamp(lines: number): LineClampModifier;
+export type WordBreakValue = 'normal' | 'break-all' | 'keep-all' | 'break-word';
+export interface WordBreakOptions {
+    wordBreak: WordBreakValue;
+}
+export type ReactiveWordBreakOptions = ReactiveModifierProps<WordBreakOptions>;
+export declare class WordBreakModifier extends BaseModifier<WordBreakOptions> {
+    readonly type = "wordBreak";
+    readonly priority: number;
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private validateWordBreak;
+}
+/**
+ * Word break modifier function
+ */
+export declare function wordBreak(value: WordBreakValue): WordBreakModifier;
+export type OverflowWrapValue = 'normal' | 'break-word' | 'anywhere';
+export interface OverflowWrapOptions {
+    overflowWrap: OverflowWrapValue;
+}
+export type ReactiveOverflowWrapOptions = ReactiveModifierProps<OverflowWrapOptions>;
+export declare class OverflowWrapModifier extends BaseModifier<OverflowWrapOptions> {
+    readonly type = "overflowWrap";
+    readonly priority: number;
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private validateOverflowWrap;
+}
+/**
+ * Overflow wrap modifier function
+ */
+export declare function overflowWrap(value: OverflowWrapValue): OverflowWrapModifier;
+export type HyphensValue = 'none' | 'manual' | 'auto';
+export interface HyphensOptions {
+    hyphens: HyphensValue;
+}
+export type ReactiveHyphensOptions = ReactiveModifierProps<HyphensOptions>;
+export declare class HyphensModifier extends BaseModifier<HyphensOptions> {
+    readonly type = "hyphens";
+    readonly priority: number;
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private validateHyphens;
+}
+/**
+ * Hyphens modifier function
+ */
+export declare function hyphens(value: HyphensValue): HyphensModifier;
+//# sourceMappingURL=text.d.ts.map

package/dist/typography/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/typography/text.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,KAAK,EACV,eAAe,EACf,qBAAqB,EACtB,MAAM,8BAA8B,CAAA;AAOrC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,MAAM,wBAAwB,GAAG,qBAAqB,CAAC,gBAAgB,CAAC,CAAA;AAE9E,qBAAa,iBAAkB,SAAQ,YAAY,CAAC,gBAAgB,CAAC;IACnE,QAAQ,CAAC,IAAI,eAAc;IAC3B,QAAQ,CAAC,QAAQ,SAAmC;IAEpD,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,SAAS;IAiBpE,OAAO,CAAC,uBAAuB;IAgB/B,OAAO,CAAC,aAAa;CActB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,iBAAiB,CAE1D;AAMD,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,CAAA;AAE/E,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,cAAc,CAAA;CAC1B;AAED,MAAM,MAAM,wBAAwB,GAAG,qBAAqB,CAAC,gBAAgB,CAAC,CAAA;AAE9E,qBAAa,iBAAkB,SAAQ,YAAY,CAAC,gBAAgB,CAAC;IACnE,QAAQ,CAAC,IAAI,eAAc;IAC3B,QAAQ,CAAC,QAAQ,SAAkC;IAEnD,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,SAAS;IAepE,OAAO,CAAC,iBAAiB;CAoB1B;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,iBAAiB,CAElE;AAMD,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,YAAY,GAAG,UAAU,CAAA;AAEpE,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,iBAAiB,CAAA;CAChC;AAED,MAAM,MAAM,2BAA2B,GACrC,qBAAqB,CAAC,mBAAmB,CAAC,CAAA;AAE5C,qBAAa,oBAAqB,SAAQ,YAAY,CAAC,mBAAmB,CAAC;IACzE,QAAQ,CAAC,IAAI,kBAAiB;IAC9B,QAAQ,CAAC,QAAQ,SAAkC;IAEnD,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,SAAS;IAepE,OAAO,CAAC,oBAAoB;CAa7B;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,oBAAoB,CAE3E;AAMD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;AAErD,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,YAAY,CAAA;CACtB;AAED,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,CAAC,cAAc,CAAC,CAAA;AAE1E,qBAAa,eAAgB,SAAQ,YAAY,CAAC,cAAc,CAAC;IAC/D,QAAQ,CAAC,IAAI,aAAY;IACzB,QAAQ,CAAC,QAAQ,SAAmC;IAEpD,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,SAAS;IAoBpE,OAAO,CAAC,eAAe;CAexB;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,eAAe,CAE5D"}

package/dist/typography/text.js

@@ -0,0 +1,129 @@
+var p = Object.defineProperty;
+var d = (i, n, r) => n in i ? p(i, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : i[n] = r;
+var a = (i, n, r) => d(i, typeof n != "symbol" ? n + "" : n, r);
+import { B as t } from "../base-CkGf4b9G.js";
+import { ModifierPriority as s } from "@tachui/core/modifiers/types";
+class f extends t {
+  constructor() {
+    super(...arguments);
+    a(this, "type", "lineClamp");
+    a(this, "priority", s.APPEARANCE + 15);
+  }
+  apply(r, e) {
+    if (!e.element) return;
+    const { lines: o } = this.properties;
+    process.env.NODE_ENV === "development" && this.validateLines(o);
+    const l = this.generateLineClampStyles(o);
+    this.applyStyles(e.element, l);
+  }
+  generateLineClampStyles(r) {
+    const e = {};
+    return e.display = "-webkit-box", e.webkitLineClamp = String(r), e.webkitBoxOrient = "vertical", e.overflow = "hidden", e.textOverflow = "ellipsis", e.wordWrap = "break-word", e;
+  }
+  validateLines(r) {
+    if (typeof r != "number" || !Number.isInteger(r) || r < 1) {
+      console.warn(
+        "TachUI LineClamp Modifier: lines must be a positive integer"
+      );
+      return;
+    }
+    r > 10 && console.info(
+      "TachUI LineClamp Modifier: Large line clamp values (>10) may impact readability. Consider if this is intentional."
+    );
+  }
+}
+function m(i) {
+  return new f({ lines: i });
+}
+class h extends t {
+  constructor() {
+    super(...arguments);
+    a(this, "type", "wordBreak");
+    a(this, "priority", s.APPEARANCE + 8);
+  }
+  apply(r, e) {
+    if (!e.element) return;
+    const { wordBreak: o } = this.properties;
+    process.env.NODE_ENV === "development" && this.validateWordBreak(o), this.applyStyles(e.element, { wordBreak: o });
+  }
+  validateWordBreak(r) {
+    const e = [
+      "normal",
+      "break-all",
+      "keep-all",
+      "break-word"
+    ];
+    e.includes(r) || console.warn(
+      `TachUI WordBreak Modifier: Invalid word-break value "${r}". Valid values are: ${e.join(", ")}`
+    ), r === "break-word" && console.info(
+      'TachUI WordBreak Modifier: "break-word" is deprecated. Consider using overflowWrap("break-word") instead.'
+    );
+  }
+}
+function k(i) {
+  return new h({ wordBreak: i });
+}
+class y extends t {
+  constructor() {
+    super(...arguments);
+    a(this, "type", "overflowWrap");
+    a(this, "priority", s.APPEARANCE + 9);
+  }
+  apply(r, e) {
+    if (!e.element) return;
+    const { overflowWrap: o } = this.properties;
+    process.env.NODE_ENV === "development" && this.validateOverflowWrap(o), this.applyStyles(e.element, { overflowWrap: o });
+  }
+  validateOverflowWrap(r) {
+    const e = [
+      "normal",
+      "break-word",
+      "anywhere"
+    ];
+    e.includes(r) || console.warn(
+      `TachUI OverflowWrap Modifier: Invalid overflow-wrap value "${r}". Valid values are: ${e.join(", ")}`
+    );
+  }
+}
+function b(i) {
+  return new y({ overflowWrap: i });
+}
+class v extends t {
+  constructor() {
+    super(...arguments);
+    a(this, "type", "hyphens");
+    a(this, "priority", s.APPEARANCE + 10);
+  }
+  apply(r, e) {
+    if (!e.element) return;
+    const { hyphens: o } = this.properties;
+    process.env.NODE_ENV === "development" && this.validateHyphens(o), this.applyStyles(e.element, {
+      hyphens: o,
+      // Add vendor prefixes for better browser support
+      webkitHyphens: o,
+      msHyphens: o
+    });
+  }
+  validateHyphens(r) {
+    const e = ["none", "manual", "auto"];
+    e.includes(r) || console.warn(
+      `TachUI Hyphens Modifier: Invalid hyphens value "${r}". Valid values are: ${e.join(", ")}`
+    ), r === "auto" && console.info(
+      "TachUI Hyphens Modifier: Automatic hyphenation requires proper lang attribute on the document or element for best results."
+    );
+  }
+}
+function W(i) {
+  return new v({ hyphens: i });
+}
+export {
+  v as HyphensModifier,
+  f as LineClampModifier,
+  y as OverflowWrapModifier,
+  h as WordBreakModifier,
+  W as hyphens,
+  m as lineClamp,
+  b as overflowWrap,
+  k as wordBreak
+};
+//# sourceMappingURL=text.js.map

package/dist/typography/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sources":["../../src/typography/text.ts"],"sourcesContent":["/**\n * Text Modifiers Implementation\n *\n * Specialized text handling modifiers including line clamping, word breaking,\n * overflow wrapping, and hyphenation control for enhanced typography.\n */\n\nimport type { DOMNode } from '@tachui/core/runtime/types'\nimport { BaseModifier } from '../basic/base'\nimport type {\n  ModifierContext,\n  ReactiveModifierProps,\n} from '@tachui/core/modifiers/types'\nimport { ModifierPriority } from '@tachui/core/modifiers/types'\n\n// ============================================================================\n// Line Clamp Modifier - Multi-line Text Truncation\n// ============================================================================\n\nexport interface LineClampOptions {\n  lines: number\n}\n\nexport type ReactiveLineClampOptions = ReactiveModifierProps<LineClampOptions>\n\nexport class LineClampModifier extends BaseModifier<LineClampOptions> {\n  readonly type = 'lineClamp'\n  readonly priority = ModifierPriority.APPEARANCE + 15\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const { lines } = this.properties\n\n    // Validate lines in development mode\n    if (process.env.NODE_ENV === 'development') {\n      this.validateLines(lines)\n    }\n\n    // Apply line clamp styles\n    const styles = this.generateLineClampStyles(lines)\n    this.applyStyles(context.element, styles)\n\n    return undefined\n  }\n\n  private generateLineClampStyles(lines: number): Record<string, string> {\n    const styles: Record<string, string> = {}\n\n    // Modern browsers: Use -webkit-line-clamp\n    styles.display = '-webkit-box'\n    styles.webkitLineClamp = String(lines)\n    styles.webkitBoxOrient = 'vertical'\n    styles.overflow = 'hidden'\n\n    // Additional properties for better cross-browser support\n    styles.textOverflow = 'ellipsis'\n    styles.wordWrap = 'break-word'\n\n    return styles\n  }\n\n  private validateLines(lines: number): void {\n    if (typeof lines !== 'number' || !Number.isInteger(lines) || lines < 1) {\n      console.warn(\n        'TachUI LineClamp Modifier: lines must be a positive integer'\n      )\n      return\n    }\n\n    if (lines > 10) {\n      console.info(\n        'TachUI LineClamp Modifier: Large line clamp values (>10) may impact readability. Consider if this is intentional.'\n      )\n    }\n  }\n}\n\n/**\n * Line clamp modifier function - SwiftUI .lineLimit() equivalent\n */\nexport function lineClamp(lines: number): LineClampModifier {\n  return new LineClampModifier({ lines })\n}\n\n// ============================================================================\n// Word Break Modifier - Word Breaking Behavior\n// ============================================================================\n\nexport type WordBreakValue = 'normal' | 'break-all' | 'keep-all' | 'break-word'\n\nexport interface WordBreakOptions {\n  wordBreak: WordBreakValue\n}\n\nexport type ReactiveWordBreakOptions = ReactiveModifierProps<WordBreakOptions>\n\nexport class WordBreakModifier extends BaseModifier<WordBreakOptions> {\n  readonly type = 'wordBreak'\n  readonly priority = ModifierPriority.APPEARANCE + 8\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const { wordBreak } = this.properties\n\n    // Validate word break value in development mode\n    if (process.env.NODE_ENV === 'development') {\n      this.validateWordBreak(wordBreak)\n    }\n\n    this.applyStyles(context.element, { wordBreak })\n\n    return undefined\n  }\n\n  private validateWordBreak(value: string): void {\n    const validValues: WordBreakValue[] = [\n      'normal',\n      'break-all',\n      'keep-all',\n      'break-word',\n    ]\n\n    if (!validValues.includes(value as WordBreakValue)) {\n      console.warn(\n        `TachUI WordBreak Modifier: Invalid word-break value \"${value}\". Valid values are: ${validValues.join(', ')}`\n      )\n    }\n\n    if (value === 'break-word') {\n      console.info(\n        'TachUI WordBreak Modifier: \"break-word\" is deprecated. Consider using overflowWrap(\"break-word\") instead.'\n      )\n    }\n  }\n}\n\n/**\n * Word break modifier function\n */\nexport function wordBreak(value: WordBreakValue): WordBreakModifier {\n  return new WordBreakModifier({ wordBreak: value })\n}\n\n// ============================================================================\n// Overflow Wrap Modifier - Word Wrapping\n// ============================================================================\n\nexport type OverflowWrapValue = 'normal' | 'break-word' | 'anywhere'\n\nexport interface OverflowWrapOptions {\n  overflowWrap: OverflowWrapValue\n}\n\nexport type ReactiveOverflowWrapOptions =\n  ReactiveModifierProps<OverflowWrapOptions>\n\nexport class OverflowWrapModifier extends BaseModifier<OverflowWrapOptions> {\n  readonly type = 'overflowWrap'\n  readonly priority = ModifierPriority.APPEARANCE + 9\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const { overflowWrap } = this.properties\n\n    // Validate overflow wrap value in development mode\n    if (process.env.NODE_ENV === 'development') {\n      this.validateOverflowWrap(overflowWrap)\n    }\n\n    this.applyStyles(context.element, { overflowWrap })\n\n    return undefined\n  }\n\n  private validateOverflowWrap(value: string): void {\n    const validValues: OverflowWrapValue[] = [\n      'normal',\n      'break-word',\n      'anywhere',\n    ]\n\n    if (!validValues.includes(value as OverflowWrapValue)) {\n      console.warn(\n        `TachUI OverflowWrap Modifier: Invalid overflow-wrap value \"${value}\". Valid values are: ${validValues.join(', ')}`\n      )\n    }\n  }\n}\n\n/**\n * Overflow wrap modifier function\n */\nexport function overflowWrap(value: OverflowWrapValue): OverflowWrapModifier {\n  return new OverflowWrapModifier({ overflowWrap: value })\n}\n\n// ============================================================================\n// Hyphens Modifier - Hyphenation Control\n// ============================================================================\n\nexport type HyphensValue = 'none' | 'manual' | 'auto'\n\nexport interface HyphensOptions {\n  hyphens: HyphensValue\n}\n\nexport type ReactiveHyphensOptions = ReactiveModifierProps<HyphensOptions>\n\nexport class HyphensModifier extends BaseModifier<HyphensOptions> {\n  readonly type = 'hyphens'\n  readonly priority = ModifierPriority.APPEARANCE + 10\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const { hyphens } = this.properties\n\n    // Validate hyphens value in development mode\n    if (process.env.NODE_ENV === 'development') {\n      this.validateHyphens(hyphens)\n    }\n\n    this.applyStyles(context.element, {\n      hyphens,\n      // Add vendor prefixes for better browser support\n      webkitHyphens: hyphens,\n      msHyphens: hyphens,\n    })\n\n    return undefined\n  }\n\n  private validateHyphens(value: string): void {\n    const validValues: HyphensValue[] = ['none', 'manual', 'auto']\n\n    if (!validValues.includes(value as HyphensValue)) {\n      console.warn(\n        `TachUI Hyphens Modifier: Invalid hyphens value \"${value}\". Valid values are: ${validValues.join(', ')}`\n      )\n    }\n\n    if (value === 'auto') {\n      console.info(\n        'TachUI Hyphens Modifier: Automatic hyphenation requires proper lang attribute on the document or element for best results.'\n      )\n    }\n  }\n}\n\n/**\n * Hyphens modifier function\n */\nexport function hyphens(value: HyphensValue): HyphensModifier {\n  return new HyphensModifier({ hyphens: value })\n}\n\n// Note: Background clip modifiers are already available in the appearance package\n// Import them from @tachui/modifiers/appearance for gradient text effects\n"],"names":["LineClampModifier","BaseModifier","__publicField","ModifierPriority","_node","context","lines","styles","lineClamp","WordBreakModifier","wordBreak","value","validValues","OverflowWrapModifier","overflowWrap","HyphensModifier","hyphens"],"mappings":"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"}

package/dist/typography/typography.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Typography Modifiers
+ *
+ * Comprehensive text styling modifiers
+ */
+import { BaseModifier } from '../basic/base';
+import type { ModifierContext, FontWeight } from '@tachui/core/modifiers/types';
+import type { DOMNode } from '@tachui/core/runtime/types';
+export type { FontWeight };
+export type TextAlign = 'left' | 'center' | 'right' | 'justify' | 'start' | 'end';
+export type TextTransform = 'none' | 'uppercase' | 'lowercase' | 'capitalize';
+export type TextDecoration = 'none' | 'underline' | 'overline' | 'line-through';
+export type FontVariant = 'normal' | 'small-caps';
+export type FontStyle = 'normal' | 'italic' | 'oblique';
+export interface TypographyOptions {
+    size?: number | string;
+    weight?: FontWeight | number;
+    family?: string | any;
+    lineHeight?: number | string;
+    letterSpacing?: number | string;
+    wordSpacing?: number | string;
+    align?: TextAlign;
+    transform?: TextTransform;
+    decoration?: TextDecoration;
+    variant?: FontVariant;
+    style?: FontStyle;
+    color?: string;
+    textOverflow?: 'clip' | 'ellipsis' | 'fade' | string;
+    whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces';
+    overflow?: 'visible' | 'hidden' | 'scroll' | 'auto';
+}
+export declare class TypographyModifier extends BaseModifier<TypographyOptions> {
+    readonly type = "typography";
+    readonly priority = 30;
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private computeTypographyStyles;
+    protected toCSSValue(value: number | string): string;
+}
+export declare function typography(options: TypographyOptions): TypographyModifier;
+export declare function textAlign(value: TextAlign): TypographyModifier;
+export declare function textTransform(value: TextTransform): TypographyModifier;
+export declare function textDecoration(value: TextDecoration): TypographyModifier;
+export declare function fontSize(value: number | string): TypographyModifier;
+export declare function fontWeight(value: FontWeight | number): TypographyModifier;
+export declare function lineHeight(value: number | string): TypographyModifier;
+export declare function letterSpacing(value: number | string): TypographyModifier;
+export declare function textOverflow(value: 'clip' | 'ellipsis' | 'fade' | string): TypographyModifier;
+export declare function whiteSpace(value: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces'): TypographyModifier;
+export declare function overflow(value: 'visible' | 'hidden' | 'scroll' | 'auto'): TypographyModifier;
+export declare function textCase(value: TextTransform): TypographyModifier;
+export declare function fontFamily(value: string | any): TypographyModifier;
+//# sourceMappingURL=typography.d.ts.map

package/dist/typography/typography.d.ts.map

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

package/dist/utility/css.d.ts

@@ -0,0 +1,86 @@
+/**
+ * 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 '@tachui/core/runtime/types';
+import { BaseModifier } from '../basic/base';
+import type { ModifierContext, ReactiveModifierProps } from '@tachui/core/modifiers/types';
+export interface CSSOptions {
+    [property: string]: string | number | undefined;
+}
+export type ReactiveCSSOptions = ReactiveModifierProps<CSSOptions>;
+export declare class CSSModifier extends BaseModifier<CSSOptions> {
+    readonly type = "css";
+    readonly priority = 5;
+    constructor(options: ReactiveCSSOptions);
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private computeCSSStyles;
+}
+/**
+ * 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 declare function css(properties: ReactiveCSSOptions): CSSModifier;
+/**
+ * Convenience function for setting a single CSS property
+ *
+ * @example
+ * ```typescript
+ * .cssProperty('backdrop-filter', 'blur(10px)')
+ * .cssProperty('scrollBehavior', 'smooth')
+ * .cssProperty('aspectRatio', '16/9')
+ * ```
+ */
+export declare function cssProperty(property: string, value: string | number): CSSModifier;
+/**
+ * Convenience function for CSS custom properties (CSS variables)
+ *
+ * @example
+ * ```typescript
+ * .cssVariable('primary-color', '#007AFF')
+ * .cssVariable('spacing-unit', '8px')
+ * .cssVariable('border-radius', '12px')
+ * ```
+ */
+export declare function cssVariable(name: string, value: string | number): CSSModifier;
+/**
+ * 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 declare function cssVendor(prefix: 'webkit' | 'moz' | 'ms' | 'o', property: string, value: string | number): CSSModifier;
+//# sourceMappingURL=css.d.ts.map

package/dist/utility/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/utility/css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,KAAK,EACV,eAAe,EACf,qBAAqB,EACtB,MAAM,8BAA8B,CAAA;AAErC,MAAM,WAAW,UAAU;IACzB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;CAChD;AAED,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAA;AAElE,qBAAa,WAAY,SAAQ,YAAY,CAAC,UAAU,CAAC;IACvD,QAAQ,CAAC,IAAI,SAAQ;IACrB,QAAQ,CAAC,QAAQ,KAAI;gBAET,OAAO,EAAE,kBAAkB;IAavC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,SAAS;IASpE,OAAO,CAAC,gBAAgB;CAazB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,GAAG,CAAC,UAAU,EAAE,kBAAkB,GAAG,WAAW,CAE/D;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CACzB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,GAAG,MAAM,GACrB,WAAW,CAEb;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,WAAW,CAI7E;AAED;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CACvB,MAAM,EAAE,QAAQ,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,EACrC,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,GAAG,MAAM,GACrB,WAAW,CAWb"}

package/dist/utility/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Utility Modifiers
+ */
+export * from './utility';
+export * from './css';
+//# sourceMappingURL=index.d.ts.map

package/dist/utility/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utility/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA"}

package/dist/utility/index.js

@@ -0,0 +1,17 @@
+import { C as o, U as i, f as e, g as r, h as t, i as f, c as l, d as c, b as d, e as u, a as y, o as n, u as p } from "../css-CJEXRr6H.js";
+export {
+  o as CSSModifier,
+  i as UtilityModifier,
+  e as css,
+  r as cssProperty,
+  t as cssVariable,
+  f as cssVendor,
+  l as cursor,
+  c as display,
+  d as outline,
+  u as outlineOffset,
+  y as overflowX,
+  n as overflowY,
+  p as utility
+};
+//# sourceMappingURL=index.js.map

package/dist/utility/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/utility/utility.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Utility Modifier - miscellaneous CSS properties
+ *
+ * Provides access to various CSS properties that don't fit
+ * into other specific modifier categories.
+ */
+import type { DOMNode } from '@tachui/core/runtime/types';
+import { BaseModifier } from '../basic/base';
+import type { ModifierContext, ReactiveModifierProps } from '@tachui/core/modifiers/types';
+export interface UtilityOptions {
+    cursor?: 'auto' | 'default' | 'pointer' | 'text' | 'wait' | 'help' | 'not-allowed' | 'none' | 'grab' | 'grabbing' | 'zoom-in' | 'zoom-out' | 'alias' | 'cell' | 'copy' | string;
+    overflow?: 'visible' | 'hidden' | 'scroll' | 'auto';
+    overflowX?: 'visible' | 'hidden' | 'scroll' | 'auto';
+    overflowY?: 'visible' | 'hidden' | 'scroll' | 'auto';
+    position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+    top?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+    left?: number | string;
+    zIndex?: number;
+    display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none';
+    visibility?: 'visible' | 'hidden' | 'collapse';
+    pointerEvents?: 'auto' | 'none';
+    userSelect?: 'auto' | 'none' | 'text' | 'all';
+    boxSizing?: 'content-box' | 'border-box';
+    objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    objectPosition?: string;
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+    outline?: string;
+    outlineOffset?: number | string;
+}
+export type ReactiveUtilityOptions = ReactiveModifierProps<UtilityOptions>;
+export declare class UtilityModifier extends BaseModifier<UtilityOptions> {
+    readonly type = "utility";
+    readonly priority = 10;
+    constructor(options: ReactiveUtilityOptions);
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private computeUtilityStyles;
+    private validateCursorValue;
+}
+/**
+ * Create a utility modifier with miscellaneous CSS properties
+ */
+export declare function utility(options: ReactiveUtilityOptions): UtilityModifier;
+/**
+ * Convenience function for cursor
+ */
+export declare function cursor(value: UtilityOptions['cursor']): UtilityModifier;
+/**
+ * Convenience function for overflow-y
+ */
+export declare function overflowY(value: UtilityOptions['overflowY']): UtilityModifier;
+/**
+ * Convenience function for overflow-x
+ */
+export declare function overflowX(value: UtilityOptions['overflowX']): UtilityModifier;
+/**
+ * Convenience function for display
+ */
+export declare function display(value: UtilityOptions['display']): UtilityModifier;
+/**
+ * Convenience function for outline
+ */
+export declare function outline(value: string): UtilityModifier;
+/**
+ * Convenience function for outline-offset
+ */
+export declare function outlineOffset(value: number | string): UtilityModifier;
+//# sourceMappingURL=utility.d.ts.map