@tachui/core 0.7.0-alpha1

package/src/modifiers/index.ts

@@ -0,0 +1,481 @@
+/**
+ * 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

@@ -0,0 +1,218 @@
+/**
+ * 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 })
+}