@tachui/core 0.7.0-alpha1 → 0.8.0-alpha

package/src/modifiers/index.ts

@@ -1,481 +0,0 @@
-/**
- * SwiftUI Modifier System
- *
- * A comprehensive modifier system inspired by SwiftUI that enables
- * declarative styling and behavior modification of components.
- */
-
-// Base classes
-// Export ResizableModifier
-export {
-  AnimationModifier,
-  AppearanceModifier,
-  BaseModifier,
-  InteractionModifier,
-  LayoutModifier,
-  ResizableModifier,
-} from './base'
-export { BackgroundModifier } from './background'
-export type { 
-  BorderOptions, 
-  BorderSide, 
-  BorderStyle, 
-  ReactiveBorderOptions,
-  CornerRadiusValue,
-  CornerRadiusConfig,
-  CornerRadiusOptions,
-  ReactiveCornerRadiusOptions
-} from './border'
-export {
-  BorderModifier,
-  CornerRadiusModifier,
-  border,
-  borderTop,
-  borderRight,
-  borderBottom,
-  borderLeft,
-  borderLeading,
-  borderTrailing,
-  borderHorizontal,
-  borderVertical,
-  cornerRadius,
-} from './border'
-// Builder system
-export {
-  applyModifiers,
-  createModifierBuilder,
-  ModifierBuilderImpl,
-  modifierUtils,
-} from './builder'
-// Core modifiers
-export {
-  animationModifiers,
-  appearanceModifiers,
-  coreModifiers,
-  interactionModifiers,
-  layoutModifiers,
-  presetModifiers,
-} from './core'
-export type { CSSOptions, ReactiveCSSOptions } from './css'
-export {
-  CSSModifier,
-  css,
-  cssProperty,
-  cssVariable,
-  cssVendor,
-} from './css'
-export type { FlexboxOptions, ReactiveFlexboxOptions } from './flexbox'
-export {
-  alignItems,
-  FlexboxModifier,
-  flexbox,
-  flexGrow,
-  flexShrink,
-  gap,
-  justifyContent,
-} from './flexbox'
-export type { MarginOptions, ReactiveMarginOptions } from './margin'
-export {
-  MarginModifier,
-  margin,
-  marginBottom,
-  marginHorizontal,
-  marginTop,
-  marginVertical,
-} from './margin'
-export type { PaddingOptions, ReactivePaddingOptions } from './padding'
-export {
-  PaddingModifier,
-  padding,
-  paddingBottom,
-  paddingHorizontal,
-  paddingLeading,
-  paddingLeft,
-  paddingPresets,
-  paddingRight,
-  paddingTop,
-  paddingTrailing,
-  paddingVertical,
-} from './padding'
-// Registry and application
-export {
-  applyModifiersToNode,
-  createModifiableComponent,
-  createModifierRegistry,
-  globalModifierRegistry,
-} from './registry'
-
-// Re-export types for the new modifiers
-export type { ReactiveSizeOptions, SizeOptions } from './size'
-// New multi-property modifiers
-export {
-  height,
-  maxHeight,
-  maxWidth,
-  minHeight,
-  minWidth,
-  SizeModifier,
-  size,
-  width,
-} from './size'
-// Types
-export type {
-  AnimationModifierProps,
-  AppearanceModifierProps,
-  AssetValue,
-  ColorValue,
-  CSSClassNames,
-  CSSStyleProperties,
-  InteractionModifierProps,
-  LayoutModifierProps,
-  ModifiableComponent,
-  Modifier,
-  ModifierApplicationOptions,
-  ModifierBuilder,
-  ModifierContext,
-  ModifierRegistry,
-  ModifierResult,
-  ReactiveModifierProps,
-  StyleComputationContext,
-} from './types'
-export { ModifierPriority } from './types'
-export type {
-  FontWeight,
-  ReactiveTypographyOptions,
-  TextAlign,
-  TextTransform,
-  TypographyOptions,
-} from './typography'
-// Export textCase alias
-export {
-  fontSize,
-  fontWeight,
-  letterSpacing,
-  lineHeight,
-  TypographyModifier,
-  textAlign,
-  textCase,
-  textTransform,
-  typography,
-  fontFamily,
-} from './typography'
-
-// Font modifiers
-export type { FontOptions } from './font'
-export { font, system, custom } from './font'
-export type { ReactiveUtilityOptions, UtilityOptions } from './utility'
-export {
-  display,
-  overflowX,
-  overflowY,
-  position,
-  UtilityModifier,
-  utility,
-  zIndex,
-} from './utility'
-// Responsive Design System
-export * from './responsive'
-
-// Shadow System
-export type {
-  ShadowConfig,
-  ShadowPreset,
-  ShadowOptions,
-  ReactiveShadowOptions,
-} from './shadows'
-export {
-  ShadowModifier,
-  shadow,
-  shadows,
-  textShadow,
-  shadowPreset,
-  createShadowPreset,
-  getShadowPresets,
-  getShadowPreset,
-} from './shadows'
-
-// Scroll System
-export type {
-  ScrollConfig,
-  OverscrollBehaviorValue,
-  ScrollOptions,
-  ReactiveScrollOptions,
-} from './scroll'
-export {
-  ScrollModifier,
-  scroll,
-  scrollBehavior,
-  overscrollBehavior,
-  overscrollBehaviorX,
-  overscrollBehaviorY,
-  scrollMargin,
-  scrollPadding,
-  scrollSnap,
-} from './scroll'
-
-// Effects System (Hover & Cursor)
-export type {
-  CSSCursorValue,
-  CursorOptions,
-  ReactiveCursorOptions,
-  SwiftUIHoverEffect,
-  HoverStyles,
-  HoverOptions,
-  ReactiveHoverOptions,
-} from './effects'
-export {
-  CursorModifier,
-  HoverModifier,
-  cursor,
-  hoverEffect,
-  hover,
-  hoverWithTransition,
-  conditionalHover,
-  interactiveCursor,
-  draggableCursor,
-  textCursor,
-  disabledCursor,
-  loadingCursor,
-  helpCursor,
-  zoomCursor,
-  buttonHover,
-  cardHover,
-  linkHover,
-  imageHover,
-} from './effects'
-
-// Transform System
-export type {
-  TransformConfig,
-  Transform3DConfig,
-  ModifierTransformOptions,
-  ReactiveTransformOptions,
-  MatrixTransformConfig,
-  Advanced3DTransformConfig,
-  ModifierAdvancedTransformOptions,
-  ReactiveAdvancedTransformOptions,
-} from './transformations'
-export {
-  TransformModifier,
-  AdvancedTransformModifier,
-  transform,
-  scale,
-  rotate,
-  translate,
-  skew,
-  rotateX,
-  rotateY,
-  rotateZ,
-  perspective,
-  advancedTransform,
-  matrix,
-  matrix3d,
-  rotate3d,
-  scale3d,
-  translate3d,
-  scaleX,
-  scaleY,
-  scaleZ,
-  translateX,
-  translateY,
-  translateZ,
-  perspectiveOrigin,
-  transformStyle,
-  backfaceVisibility,
-  scaleEffect,
-  offset,
-} from './transformations'
-
-// Transition System
-export type {
-  TransitionConfig,
-  TransitionsConfig,
-  ModifierTransitionOptions,
-  ReactiveTransitionOptions,
-} from './transitions'
-export {
-  TransitionModifier,
-  transition,
-  transitions,
-  fadeTransition,
-  transformTransition,
-  colorTransition,
-  layoutTransition,
-  buttonTransition,
-  cardTransition,
-  modalTransition,
-  smoothTransition,
-  quickTransition,
-  slowTransition,
-} from './transitions'
-
-// Filter System
-export type {
-  FilterConfig,
-  FilterOptions,
-  ReactiveFilterOptions,
-} from './filters'
-export {
-  FilterModifier,
-  filter,
-  blur,
-  brightness,
-  contrast,
-  saturate,
-  grayscale,
-  sepia,
-  hueRotate,
-  invert,
-  dropShadow,
-  vintagePhoto,
-  blackAndWhite,
-  vibrant,
-  warmTone,
-  coolTone,
-  faded,
-  highKey,
-  lowKey,
-  softFocus,
-  highContrastMode,
-  subtleBlur,
-  darkModeInvert,
-  colorInvert,
-  saturation,
-  hueRotation,
-} from './filters'
-
-// Pseudo-element System
-export type {
-  PseudoElementStyles,
-  PseudoElementOptions,
-  ReactivePseudoElementOptions,
-} from './elements'
-export {
-  PseudoElementModifier,
-  before,
-  after,
-  pseudoElements,
-  iconBefore,
-  iconAfter,
-  lineBefore,
-  lineAfter,
-  quotes,
-  underline,
-  badge,
-  tooltip,
-  cornerRibbon,
-  spinner,
-} from './elements'
-
-// HTML and ARIA Attributes
-export type {
-  IdOptions,
-  DataAttributes,
-  DataOptions,
-  AriaAttributes,
-  AriaOptions,
-  TabIndexOptions,
-  CSSCustomPropertiesConfig,
-  CustomPropertiesOptions,
-  ReactiveCustomPropertiesOptions,
-} from './attributes'
-export {
-  IdModifier,
-  DataModifier,
-  AriaModifier,
-  TabIndexModifier,
-  CustomPropertiesModifier,
-  id,
-  data,
-  aria,
-  tabIndex,
-  customProperties,
-  customProperty,
-  cssVariables,
-  themeColors,
-  designTokens,
-} from './attributes'
-
-// Text Modifiers
-export type {
-  LineClampOptions,
-  WordBreakValue,
-  WordBreakOptions,
-  OverflowWrapValue,
-  OverflowWrapOptions,
-  HyphensValue,
-  HyphensOptions,
-  BackgroundClipOptions,
-  ReactiveBackgroundClipOptions,
-} from './text'
-export {
-  LineClampModifier,
-  WordBreakModifier,
-  OverflowWrapModifier,
-  HyphensModifier,
-  BackgroundClipModifier,
-  lineClamp,
-  wordBreak,
-  overflowWrap,
-  hyphens,
-  backgroundClip,
-  gradientText,
-  backgroundImage,
-  blueGradientText,
-  rainbowGradientText,
-  sunsetGradientText,
-  oceanGradientText,
-  natureGradientText,
-  goldGradientText,
-  silverGradientText,
-} from './text'
-
-// Backdrop Filter Modifiers (Unified Implementation)
-export type {
-  BackdropFilterConfig,
-  BackdropFilterOptions,
-  GlassmorphismIntensity,
-} from './backdrop'
-export {
-  BackdropFilterModifier,
-  backdropFilter,
-  glassmorphism,
-  customGlassmorphism,
-} from './backdrop'
-
-// Grid Layout Modifiers (Phase 3)
-export type {
-  GridSpanConfig,
-} from '../components/Grid'
-export {
-  GridColumnSpanModifier,
-  GridRowSpanModifier,
-  GridAreaModifier,
-  GridCellAlignmentModifier,
-  GridItemConfigModifier,
-  gridColumnSpan,
-  gridRowSpan,
-  gridArea,
-  gridCellAlignment,
-  gridItemConfig,
-  gridCellColumns,
-  gridCellRows,
-  gridCellAnchor,
-} from './grid'
-
-// HTML Rendering Modifiers
-export type { AsHTMLOptions, TextComponent } from './as-html'
-export { AsHTMLModifier, asHTML } from './as-html'
-
-// Utilities
-export {
-  classModifier,
-  combineModifiers,
-  conditionalModifier,
-  createCustomModifier,
-  eventModifier,
-  modifierHelpers,
-  responsiveModifier,
-  stateModifier,
-  styleModifier,
-} from './utils'

package/src/modifiers/margin.ts

@@ -1,218 +0,0 @@
-/**
- * Margin Modifier - spacing around elements
- *
- * Provides a unified interface for setting element margins
- * with support for shorthand and directional properties.
- */
-
-import type { DOMNode } from '../runtime/types'
-import { BaseModifier } from './base'
-import type { ModifierContext, ReactiveModifierProps } from './types'
-
-// CSS-compatible margin values
-export type MarginValue = number | string
-
-// Type-safe options with conflict prevention
-export type MarginOptions =
-  | {
-      all: MarginValue
-      vertical?: never
-      horizontal?: never
-      top?: never
-      right?: never
-      bottom?: never
-      left?: never
-    }
-  | {
-      all?: never
-      vertical: MarginValue
-      horizontal: MarginValue
-      top?: never
-      right?: never
-      bottom?: never
-      left?: never
-    }
-  | {
-      all?: never
-      vertical?: MarginValue
-      horizontal?: MarginValue
-      top?: MarginValue
-      right?: MarginValue
-      bottom?: MarginValue
-      left?: MarginValue
-    }
-
-export type ReactiveMarginOptions = ReactiveModifierProps<MarginOptions>
-
-// Helper function to format margin values - moved to outer scope
-function formatMarginValue(value: MarginValue): string {
-  if (typeof value === 'number') {
-    return `${value}px`
-  }
-  return value // Already a string (e.g., 'auto', '1rem', '50%')
-}
-
-export class MarginModifier extends BaseModifier<MarginOptions> {
-  readonly type = 'margin'
-  readonly priority = 50 // Priority 50 for spacing
-
-  constructor(options: ReactiveMarginOptions) {
-    // Preserve reactive values; BaseModifier.applyStyles will create effects
-    super(options as unknown as MarginOptions)
-  }
-
-  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {
-    if (!context.element) return
-
-    const styles = this.computeMarginStyles(this.properties)
-    this.applyStyles(context.element, styles)
-    
-    return undefined
-  }
-
-  private computeMarginStyles(props: MarginOptions) {
-    const styles: Record<string, any> = {}
-
-    if ('all' in props && props.all !== undefined) {
-      // All sides - highest priority
-      styles.margin = formatMarginValue(props.all)
-    } else {
-      // Handle shorthand properties first
-      if ('vertical' in props && props.vertical !== undefined) {
-        const value = formatMarginValue(props.vertical)
-        styles.marginTop = value
-        styles.marginBottom = value
-      }
-      if ('horizontal' in props && props.horizontal !== undefined) {
-        const value = formatMarginValue(props.horizontal)
-        styles.marginLeft = value
-        styles.marginRight = value
-      }
-
-      // Handle specific sides (override shorthand if specified)
-      if ('top' in props && props.top !== undefined) {
-        styles.marginTop = formatMarginValue(props.top)
-      }
-      if ('right' in props && props.right !== undefined) {
-        styles.marginRight = formatMarginValue(props.right)
-      }
-      if ('bottom' in props && props.bottom !== undefined) {
-        styles.marginBottom = formatMarginValue(props.bottom)
-      }
-      if ('left' in props && props.left !== undefined) {
-        styles.marginLeft = formatMarginValue(props.left)
-      }
-    }
-
-    return styles
-  }
-}
-
-/**
- * Create a margin modifier with flexible options
- *
- * @example
- * ```typescript
- * // All sides equal
- * .margin({ all: 16 })
- * .margin({ all: 'auto' })
- *
- * // Symmetric spacing
- * .margin({ vertical: 12, horizontal: 8 })
- * .margin({ vertical: 30, horizontal: 'auto' })
- *
- * // Specific sides
- * .margin({ top: 8, bottom: 16, left: 12, right: 12 })
- * .margin({ top: 8, bottom: 16, left: 'auto', right: 'auto' })
- *
- * // Mixed approach
- * .margin({ horizontal: 16, top: 8, bottom: 24 })
- * .margin({ horizontal: 'auto', top: '1rem', bottom: '2rem' })
- * ```
- */
-export function margin(options: ReactiveMarginOptions): MarginModifier
-export function margin(all: MarginValue): MarginModifier
-export function margin(optionsOrAll: ReactiveMarginOptions | MarginValue): MarginModifier {
-  if (typeof optionsOrAll === 'number' || typeof optionsOrAll === 'string') {
-    return new MarginModifier({ all: optionsOrAll })
-  }
-  return new MarginModifier(optionsOrAll)
-}
-
-/**
- * Convenience function for top margin only
- *
- * @example
- * ```typescript
- * .marginTop(16)
- * .marginTop('auto')
- * ```
- */
-export function marginTop(value: MarginValue): MarginModifier {
-  return new MarginModifier({ top: value })
-}
-
-/**
- * Convenience function for bottom margin only
- *
- * @example
- * ```typescript
- * .marginBottom(24)
- * .marginBottom('auto')
- * ```
- */
-export function marginBottom(value: MarginValue): MarginModifier {
-  return new MarginModifier({ bottom: value })
-}
-
-/**
- * Convenience function for left and right margins
- *
- * @example
- * ```typescript
- * .marginHorizontal(20)
- * .marginHorizontal('auto')
- * ```
- */
-export function marginHorizontal(value: MarginValue): MarginModifier {
-  return new MarginModifier({ horizontal: value })
-}
-
-/**
- * Convenience function for top and bottom margins
- *
- * @example
- * ```typescript
- * .marginVertical(16)
- * .marginVertical('auto')
- * ```
- */
-export function marginVertical(value: MarginValue): MarginModifier {
-  return new MarginModifier({ vertical: value })
-}
-
-/**
- * Convenience function for left margin only
- *
- * @example
- * ```typescript
- * .marginLeft(12)
- * .marginLeft('auto')
- * ```
- */
-export function marginLeft(value: MarginValue): MarginModifier {
-  return new MarginModifier({ left: value })
-}
-
-/**
- * Convenience function for right margin only
- *
- * @example
- * ```typescript
- * .marginRight(12)
- * .marginRight('auto')
- * ```
- */
-export function marginRight(value: MarginValue): MarginModifier {
-  return new MarginModifier({ right: value })
-}