@tachui/core 0.7.0-alpha1

package/dist/components/Button.js

@@ -0,0 +1,408 @@
+import "../reactive/cleanup.js";
+import "../reactive/unified-scheduler.js";
+import { createEffect as _ } from "../reactive/effect.js";
+import { createSignal as $, isSignal as g } from "../reactive/signal.js";
+import "../reactive/scheduler.js";
+import "../reactive/theme.js";
+import { h as P, text as R } from "../runtime/renderer.js";
+import { withModifiers as V } from "./wrapper.js";
+import { useLifecycle as H } from "../lifecycle/hooks.js";
+import { ColorAsset as L } from "../assets/ColorAsset.js";
+import { ConcatenatedComponent as M } from "../concatenation/concatenated-component.js";
+import "../css-classes/css-class-manager.js";
+import { ComponentWithCSSClasses as I } from "../css-classes/component-base.js";
+var O = Object.defineProperty, W = (i, e, t) => e in i ? O(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, h = (i, e, t) => W(i, typeof e != "symbol" ? e + "" : e, t);
+const K = {
+  colors: {
+    primary: "#007AFF",
+    secondary: "#5856D6",
+    destructive: "#FF3B30",
+    background: "#F2F2F7",
+    surface: "#FFFFFF",
+    onPrimary: "#FFFFFF",
+    onSecondary: "#FFFFFF",
+    onSurface: "#000000",
+    border: "#C7C7CC",
+    disabled: "#8E8E93"
+  },
+  spacing: {
+    small: 8,
+    medium: 12,
+    large: 16
+  },
+  borderRadius: {
+    small: 6,
+    medium: 8,
+    large: 12
+  },
+  typography: {
+    small: { size: 14, weight: "500" },
+    medium: { size: 16, weight: "500" },
+    large: { size: 18, weight: "600" }
+  }
+};
+class U extends I {
+  constructor(e, t = K) {
+    super(), this.props = e, h(this, "type", "component"), h(this, "id"), h(this, "mounted", !1), h(this, "cleanup", []), h(this, "stateSignal"), h(this, "setState"), h(this, "theme"), this.id = `button-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, this.theme = t;
+    const [s, o] = $("normal");
+    this.stateSignal = s, this.setState = o, this.setupDOMEventListeners();
+  }
+  /**
+   * Set up DOM event listeners for button interactions
+   */
+  setupDOMEventListeners() {
+    H(this, {
+      onDOMReady: (e, t) => {
+        t instanceof HTMLButtonElement && (this.attachInteractionEvents(t), this.setupReactiveStyles(t));
+      }
+    });
+  }
+  /**
+   * Set up reactive style updates based on state changes
+   */
+  setupReactiveStyles(e) {
+    const t = _(() => {
+      this.stateSignal(), this.isEnabled(), this.isLoading();
+      const { tint: s, backgroundColor: o, foregroundColor: r } = this.props;
+      s && g(s) ? s() : s instanceof L && s.resolve(), o && g(o) ? o() : o instanceof L && o.resolve(), r && g(r) ? r() : r instanceof L && r.resolve();
+      const n = this.getButtonStyles();
+      this.applyStylesToElement(e, n);
+    });
+    this.cleanup.push(() => {
+      t && typeof t.dispose == "function" && t.dispose();
+    });
+  }
+  /**
+   * Apply computed styles to the button element, respecting modifier-applied styles
+   */
+  applyStylesToElement(e, t) {
+    Object.entries(t).forEach(([s, o]) => {
+      const r = this.camelToKebabCase(s);
+      if (typeof o == "string" || typeof o == "number") {
+        const n = e.style.getPropertyValue(r);
+        r === "transform" ? e.style.setProperty(r, String(o)) : n && n !== "" && n !== "inherit" || e.style.setProperty(r, String(o));
+      }
+    });
+  }
+  /**
+   * Convert camelCase to kebab-case for CSS properties
+   */
+  camelToKebabCase(e) {
+    return e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+  }
+  /**
+   * Resolve color value from string, signal, or asset
+   */
+  resolveColorValue(e) {
+    if (e) {
+      if (typeof e == "string")
+        return e;
+      if (g(e))
+        return e();
+      if (e instanceof L)
+        return e.resolve();
+    }
+  }
+  /**
+   * Attach interaction event listeners to the button element
+   */
+  attachInteractionEvents(e) {
+    const t = () => {
+      const a = this.isEnabled();
+      return typeof a == "boolean" ? a : a();
+    };
+    let s = null;
+    const o = (a) => {
+      t() && a.button === 0 && (this.setState("pressed"), s = () => {
+        this.stateSignal() === "pressed" && this.setState("normal"), s && (document.removeEventListener("mouseup", s), s = null);
+      }, document.addEventListener("mouseup", s));
+    }, r = () => {
+      t() && this.stateSignal() === "pressed" && (this.setState("normal"), s && (document.removeEventListener("mouseup", s), s = null));
+    }, n = () => {
+      t() && (this.setState("normal"), s && (document.removeEventListener("mouseup", s), s = null));
+    }, d = () => {
+      t() && this.stateSignal() !== "pressed" && this.setState("focused");
+    }, v = () => {
+      t() && this.stateSignal() === "focused" && this.setState("normal");
+    }, b = (a) => {
+      t() && (a.key === " " || a.key === "Enter") && (a.preventDefault(), this.setState("pressed"));
+    }, S = (a) => {
+      t() && (a.key === " " || a.key === "Enter") && (a.preventDefault(), this.setState("normal"), this.props.action?.());
+    };
+    e.addEventListener("mousedown", o), e.addEventListener("mouseup", r), e.addEventListener("mouseleave", n), e.addEventListener("focus", d), e.addEventListener("blur", v), e.addEventListener("keydown", b), e.addEventListener("keyup", S), this.cleanup.push(() => {
+      e.removeEventListener("mousedown", o), e.removeEventListener("mouseup", r), e.removeEventListener("mouseleave", n), e.removeEventListener("focus", d), e.removeEventListener("blur", v), e.removeEventListener("keydown", b), e.removeEventListener("keyup", S), s && (document.removeEventListener("mouseup", s), s = null);
+    });
+  }
+  /**
+   * Check if button is enabled
+   */
+  isEnabled() {
+    const { isEnabled: e } = this.props;
+    return e === void 0 ? !0 : typeof e == "boolean" || g(e) ? e : !0;
+  }
+  /**
+   * Render the button component
+   */
+  render() {
+    const e = this.isEnabled(), t = [];
+    this.props.systemImage && t.push(P("span", {
+      class: "button-icon",
+      style: {
+        marginRight: "8px",
+        fontSize: "1.2em"
+      }
+    }, R(this.props.systemImage))), t.push(P("span", {
+      class: "button-title"
+    }, R(this.props.title || "")));
+    const s = ["tachui-button"];
+    return [{
+      type: "element",
+      tag: "button",
+      props: {
+        className: this.createClassString(this.props, s),
+        type: "button",
+        disabled: typeof e == "boolean" ? !e : () => !e(),
+        // Invert enabled to disabled
+        onClick: this.props.action ? () => {
+          try {
+            this.props.action?.();
+          } catch (n) {
+            console.error("Button action error:", n);
+          }
+        } : void 0,
+        // Pass through debug label for debug system
+        ...this.props.debugLabel && { debugLabel: this.props.debugLabel }
+      },
+      children: t,
+      // Attach component metadata for modifier processing
+      componentMetadata: {
+        id: this.id,
+        type: "Button"
+        // Note: modifiers are attached automatically by the modifier system
+      }
+    }];
+  }
+  /**
+   * Check if button is in loading state
+   */
+  isLoading() {
+    const { isLoading: e } = this.props;
+    return e === void 0 ? !1 : typeof e == "boolean" ? e : g(e) ? e() : !1;
+  }
+  /**
+   * Check if the button has color-related modifiers applied
+   */
+  hasColorModifiers() {
+    let e = this.modifiers;
+    return !e && this.modifierBuilder && (e = this.modifierBuilder.modifiers), !e && this.modifiableComponent && (e = this.modifiableComponent.modifiers), !e || !Array.isArray(e) ? !1 : e.some((t) => t.type === "appearance" || t.constructor?.name === "AppearanceModifier" ? t.properties && (t.properties.foregroundColor !== void 0 || t.properties.color !== void 0) : t.properties ? ["foregroundColor", "color", "textColor"].some((o) => t.properties[o] !== void 0) : !1);
+  }
+  /**
+   * Check if the button has typography-related modifiers applied
+   */
+  hasTypographyModifiers() {
+    let e = this.modifiers;
+    return !e && this.modifierBuilder && (e = this.modifierBuilder.modifiers), !e && this.modifiableComponent && (e = this.modifiableComponent.modifiers), !e || !Array.isArray(e) ? !1 : e.some((s) => s.type === "typography" || s.constructor?.name === "TypographyModifier" ? s.properties && (s.properties.transform !== void 0 || s.properties.textTransform !== void 0) : !1);
+  }
+  /**
+   * Get computed button styles based on variant, size, role, and state
+   */
+  // biome-ignore lint/suspicious/noExplicitAny: CSS styles require flexible property types
+  getButtonStyles() {
+    const { variant: e, size: t, role: s = "none", tint: o, backgroundColor: r, foregroundColor: n } = this.props, d = this.stateSignal(), v = this.isLoading(), b = this.isEnabled(), S = this.hasColorModifiers(), a = this.hasTypographyModifiers(), u = {
+      // Only set color property if no modifiers will handle it
+      // This prevents conflicts between Button styles and AppearanceModifier
+      ...!S && !n && !e && { color: "inherit" },
+      // Only set text-related properties if no typography modifiers will handle them
+      // This prevents conflicts between Button styles and TypographyModifier
+      ...!a && {
+        fontStyle: "inherit",
+        lineHeight: "inherit",
+        textTransform: "inherit",
+        textDecoration: "inherit",
+        textIndent: "inherit",
+        textShadow: "inherit",
+        wordSpacing: "inherit",
+        textOrientation: "inherit",
+        writingMode: "inherit",
+        direction: "inherit"
+      }
+      // Let modifiers control: fontFamily, fontSize, fontWeight, letterSpacing, textAlign
+    };
+    if (t) {
+      const f = this.theme.spacing[t] || this.theme.spacing.medium, D = this.theme.borderRadius[t] || this.theme.borderRadius.medium, T = this.theme.typography[t] || this.theme.typography.medium, z = {
+        small: "32px",
+        medium: "40px",
+        large: "48px"
+      };
+      u.padding = `${f}px ${f * 2}px`, u.borderRadius = `${D}px`, u.fontSize = `${T.size}px`, u.fontWeight = T.weight, u.minHeight = z[t];
+    }
+    let c = "transparent", p = "transparent", k = "1px", m;
+    const A = this.resolveColorValue(o), C = this.resolveColorValue(r), E = this.resolveColorValue(n);
+    if (e) {
+      const f = A || this.theme.colors.primary;
+      switch (e) {
+        case "filled":
+          s === "destructive" ? c = this.theme.colors.destructive : s === "cancel" ? c = this.theme.colors.secondary : c = f, m = this.theme.colors.onPrimary;
+          break;
+        case "outlined":
+          p = s === "destructive" ? this.theme.colors.destructive : f, m = s === "destructive" ? this.theme.colors.destructive : f;
+          break;
+        case "bordered":
+          c = this.theme.colors.background, p = this.theme.colors.border;
+          break;
+        case "borderedProminent":
+          c = this.theme.colors.surface, p = this.theme.colors.primary, k = "2px";
+          break;
+      }
+    }
+    C && (c = C), E && (m = E);
+    let F = "1", w = "auto", x, B = "none";
+    b ? v ? (F = "0.6", w = "none") : d === "pressed" ? (c = this.darkenColor(c, 0.1), p = this.darkenColor(p, 0.1), x = "scale(0.95)") : d === "focused" && (B = "0 0 0 3px #007AFF40") : (c = this.theme.colors.disabled, p = this.theme.colors.disabled, m = this.theme.colors.disabled, F = "0.6", w = "none");
+    const l = {
+      ...u
+      // Size-based styles (only if size provided)
+    };
+    return e && (l.backgroundColor = c, l.borderColor = p, l.borderWidth = k, m !== void 0 && (l.color = m)), C && (l.backgroundColor = C), E && (l.color = E), l.cursor = b ? "pointer" : "not-allowed", l.opacity = F, l.pointerEvents = w, l.transform = x !== void 0 ? x : "none", l.boxShadow = B, l.transition = "all 0.2s ease", l;
+  }
+  /**
+   * Handle button press with proper state management
+   */
+  async handlePress() {
+    if (!(!this.isEnabled() || this.isLoading()) && (this.triggerHapticFeedback(), this.setState("pressed"), setTimeout(() => {
+      this.isEnabled() && this.setState("normal");
+    }, 150), this.props.action))
+      try {
+        const e = this.props.action();
+        e && typeof e.then == "function" && await e;
+      } catch (e) {
+        console.error("Button action failed:", e);
+      }
+  }
+  /**
+   * Trigger haptic feedback (mobile Safari support)
+   */
+  triggerHapticFeedback() {
+    if (this.props.hapticFeedback !== !1 && typeof window < "u" && "navigator" in window) {
+      const e = window.navigator;
+      e.vibrate && e.vibrate(10);
+    }
+  }
+  /**
+   * Helper to darken a color for pressed states
+   */
+  darkenColor(e, t) {
+    if (e === "transparent") return e;
+    if (e.startsWith("#")) {
+      const s = e.slice(1), o = parseInt(s, 16), r = Math.max(0, Math.floor((o >> 16) * (1 - t))), n = Math.max(0, Math.floor((o >> 8 & 255) * (1 - t))), d = Math.max(0, Math.floor((o & 255) * (1 - t)));
+      return `#${(r << 16 | n << 8 | d).toString(16).padStart(6, "0")}`;
+    }
+    return e;
+  }
+  // ============================================================================
+  // Concatenation Support (Phase 3.1)
+  // ============================================================================
+  /**
+   * Concatenate this button with another concatenatable component
+   */
+  concat(e) {
+    const t = this.toSegment(), s = e.toSegment(), o = {
+      totalSegments: e instanceof M ? e.segments.length + 1 : 2,
+      accessibilityRole: e instanceof M ? this.mergeAccessibilityRoles("composite", e.metadata.accessibilityRole) : this.determineAccessibilityRole(e),
+      semanticStructure: "inline"
+      // Buttons are typically inline in concatenation
+    };
+    return new M([t, s], o);
+  }
+  /**
+   * Convert this button to a segment for concatenation
+   */
+  toSegment() {
+    return {
+      id: this.id,
+      component: this,
+      modifiers: [],
+      // Buttons don't typically have concatenation-specific modifiers
+      render: () => {
+        const e = this.render();
+        return Array.isArray(e) ? e[0] : e;
+      }
+    };
+  }
+  /**
+   * Check if this component supports concatenation
+   */
+  isConcatenatable() {
+    return !0;
+  }
+  /**
+   * Determine accessibility role for concatenation
+   */
+  determineAccessibilityRole(e) {
+    switch (e.constructor.name) {
+      case "EnhancedText":
+        return "composite";
+      // Button + Text = composite (interactive content)
+      case "EnhancedImage":
+        return "composite";
+      // Button + Image = composite (interactive content)
+      case "EnhancedButton":
+      case "EnhancedLink":
+        return "composite";
+      // Button + Interactive = composite
+      default:
+        return "composite";
+    }
+  }
+  /**
+   * Merge accessibility roles when combining components
+   */
+  mergeAccessibilityRoles(e, t) {
+    return "composite";
+  }
+}
+function y(i, e, t = {}) {
+  const s = { ...t, title: i, ...e && { action: e } }, o = new U(s);
+  return V(o);
+}
+const re = {
+  /**
+   * Filled button (primary)
+   */
+  Filled: (i, e, t = {}) => y(i, e, { ...t, variant: "filled" }),
+  /**
+   * Outlined button
+   */
+  Outlined: (i, e, t = {}) => y(i, e, { ...t, variant: "outlined" }),
+  /**
+   * Plain button (text only)
+   */
+  Plain: (i, e, t = {}) => y(i, e, { ...t, variant: "plain" }),
+  /**
+   * Bordered button
+   */
+  Bordered: (i, e, t = {}) => y(i, e, { ...t, variant: "bordered" }),
+  /**
+   * Destructive button
+   */
+  Destructive: (i, e, t = {}) => y(i, e, { ...t, role: "destructive" }),
+  /**
+   * Cancel button
+   */
+  Cancel: (i, e, t = {}) => y(i, e, { ...t, role: "cancel" })
+}, N = `
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+`;
+if (typeof document < "u") {
+  const i = document.createElement("style");
+  i.textContent = N, document.head.appendChild(i);
+}
+export {
+  y as Button,
+  re as ButtonStyles,
+  U as EnhancedButton,
+  K as defaultButtonTheme
+};
+//# sourceMappingURL=Button.js.map

package/dist/components/Button.js.map

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

package/dist/components/Divider.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../reactive/cleanup.cjs");require("../reactive/unified-scheduler.cjs");const m=require("../reactive/effect.cjs"),u=require("../reactive/signal.cjs");require("../reactive/scheduler.cjs");require("../reactive/theme.cjs");require("../runtime/component.cjs");require("../runtime/context.cjs");require("../runtime/dev-tools.cjs");require("../runtime/dom-bridge.cjs");require("../runtime/error-boundary.cjs");require("../runtime/error-reporting.cjs");require("../runtime/performance.cjs");const g=require("../runtime/renderer.cjs");require("../runtime/element-override.cjs");require("../runtime/semantic-role-manager.cjs");require("../runtime/development-warnings.cjs");const f=require("./wrapper.cjs");var v=Object.defineProperty,y=(t,e,o)=>e in t?v(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,a=(t,e,o)=>y(t,typeof e!="symbol"?e+"":e,o);const r={colors:{default:"#E5E5E5",light:"#F0F0F0",medium:"#D1D1D1",heavy:"#A0A0A0"},thickness:{thin:1,medium:2,thick:3},spacing:{small:8,medium:16,large:24}};class d{constructor(e){a(this,"type","component"),a(this,"id"),a(this,"props"),a(this,"theme",r),this.props=e,this.id=`divider-${Date.now()}-${Math.random().toString(36).substr(2,9)}`}resolveValue(e){return u.isSignal(e)?e():e}getBaseStyles(){const e=this.props.orientation==="vertical",o=this.resolveValue(this.props.thickness??this.theme.thickness.thin),n=this.resolveValue(this.props.color??this.theme.colors.default),s=this.props.style??"solid",p=this.resolveValue(this.props.opacity??1),h=this.resolveValue(this.props.margin??this.theme.spacing.medium),l=this.resolveValue(this.props.length),i={border:"none",margin:"0",padding:"0",backgroundColor:n,opacity:String(p),flexShrink:"0"};return e?(i.width=`${o}px`,i.height=l?typeof l=="string"?l:`${l}px`:"100%",i.marginLeft=`${h}px`,i.marginRight=`${h}px`,i.alignSelf="stretch"):(i.height=`${o}px`,i.width=l?typeof l=="string"?l:`${l}px`:"100%",i.marginTop=`${h}px`,i.marginBottom=`${h}px`),(s==="dashed"||s==="dotted")&&(i.backgroundColor="transparent",e?i.borderRight=`${o}px ${s} ${n}`:i.borderTop=`${o}px ${s} ${n}`),i}render(){const e=g.h("div",{role:"separator","aria-orientation":this.props.orientation??"horizontal",style:this.getBaseStyles()});return["color","thickness","length","margin","opacity"].forEach(n=>{const s=this.props[n];u.isSignal(s)&&m.createEffect(()=>{const p=this.getBaseStyles(),h=e.element;h&&Object.assign(h.style,p)})}),e.getAttribute=n=>{const s=e.props?.[n];return s==null?null:String(s)},e.setAttribute=(n,s)=>{e.props||(e.props={}),e.props[n]=s},e}}function c(t={}){return f.withModifiers(new d(t))}const k={thin(t){return c({thickness:r.thickness.thin,color:t})},medium(t){return c({thickness:r.thickness.medium,color:t})},thick(t){return c({thickness:r.thickness.thick,color:t})},vertical(t,e){return c({orientation:"vertical",length:t,thickness:e})},dashed(t,e){return c({style:"dashed",color:t,thickness:e})},dotted(t,e){return c({style:"dotted",color:t,thickness:e})},subtle(){return c({color:r.colors.light,opacity:.6})},prominent(){return c({color:r.colors.heavy,thickness:r.thickness.medium})}},q={theme:r,createTheme(t){return{colors:{...r.colors,...t.colors},thickness:{...r.thickness,...t.thickness},spacing:{...r.spacing,...t.spacing}}},colors:{light:r.colors.light,medium:r.colors.medium,heavy:r.colors.heavy,primary:"#007AFF",success:"#34C759",warning:"#FF9500",danger:"#FF3B30"}};exports.Divider=c;exports.DividerComponent=d;exports.DividerStyles=q;exports.DividerUtils=k;exports.defaultDividerTheme=r;
+//# sourceMappingURL=Divider.cjs.map

package/dist/components/Divider.cjs.map

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