@tachui/core 0.7.0-alpha1 → 0.8.0-alpha

package/dist/components/Toggle.js

@@ -1,477 +0,0 @@
-import "../reactive/cleanup.js";
-import "../reactive/unified-scheduler.js";
-import { createEffect as m } from "../reactive/effect.js";
-import { createSignal as y, isSignal as d } from "../reactive/signal.js";
-import "../reactive/scheduler.js";
-import "../reactive/theme.js";
-import "../runtime/component.js";
-import "../runtime/context.js";
-import "../runtime/dev-tools.js";
-import "../runtime/dom-bridge.js";
-import "../runtime/error-boundary.js";
-import "../runtime/error-reporting.js";
-import "../runtime/performance.js";
-import { h as o, text as c } from "../runtime/renderer.js";
-import "../runtime/element-override.js";
-import "../runtime/semantic-role-manager.js";
-import "../runtime/development-warnings.js";
-import { withModifiers as x } from "./wrapper.js";
-var S = Object.defineProperty, v = (i, t, e) => t in i ? S(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e, h = (i, t, e) => v(i, typeof t != "symbol" ? t + "" : t, e);
-class w {
-  constructor(t) {
-    this.props = t, h(this, "type", "component"), h(this, "id"), h(this, "mounted", !1), h(this, "cleanup", []), h(this, "toggleElement", null), h(this, "setIsAnimating"), h(this, "handleToggle", async (s) => {
-      if (s.preventDefault(), this.isDisabled()) return;
-      const r = !this.getIsOn();
-      this.props.animated !== !1 && (this.setIsAnimating(!0), setTimeout(() => {
-        this.setIsAnimating(!1);
-      }, 200)), this.props.onToggle && this.props.onToggle(r);
-    }), this.id = `toggle-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    const [, e] = y(!1);
-    this.setIsAnimating = e, m(() => {
-      const s = this.getIsOn();
-      this.toggleElement && this.toggleElement.checked !== s && (this.toggleElement.checked = s);
-    });
-  }
-  /**
-   * Get current toggle state
-   */
-  getIsOn() {
-    const { isOn: t } = this.props;
-    return d(t) ? t() : t;
-  }
-  // /**
-  //  * Get toggle state as signal or static value for DOM renderer
-  //  */
-  // private getIsOnForDOM(): boolean | (() => boolean) {
-  //   const { isOn } = this.props
-  //   if (isSignal(isOn)) {
-  //     return isOn as () => boolean
-  //   }
-  //   return isOn as boolean
-  // }
-  /**
-   * Check if toggle is disabled
-   */
-  isDisabled() {
-    const { disabled: t } = this.props;
-    return typeof t == "boolean" ? t : d(t) ? t() : !1;
-  }
-  // /**
-  //  * Get disabled state as signal or static value for DOM renderer
-  //  */
-  // private getDisabledForDOM(): boolean | (() => boolean) {
-  //   const { disabled } = this.props
-  //   if (typeof disabled === 'boolean') return disabled
-  //   if (isSignal(disabled)) return disabled as () => boolean
-  //   return false
-  // }
-  /**
-   * Resolve label content
-   */
-  resolveLabel() {
-    const { label: t } = this.props;
-    return t ? typeof t == "string" ? t : typeof t == "function" || d(t) ? t() : t : null;
-  }
-  /**
-   * Helper to render component content safely
-   */
-  renderComponentContent(t) {
-    const e = t.render();
-    return Array.isArray(e) ? e : [e];
-  }
-  /**
-   * Get toggle size styles
-   */
-  getSizeStyles() {
-    const { size: t = "medium" } = this.props;
-    switch (t) {
-      case "small":
-        return {
-          width: "36px",
-          height: "20px",
-          thumbSize: "16px",
-          fontSize: "14px"
-        };
-      case "large":
-        return {
-          width: "56px",
-          height: "32px",
-          thumbSize: "28px",
-          fontSize: "18px"
-        };
-      default:
-        return {
-          width: "46px",
-          height: "26px",
-          thumbSize: "22px",
-          fontSize: "16px"
-        };
-    }
-  }
-  /**
-   * Render switch variant
-   */
-  renderSwitch() {
-    const t = this.getIsOn(), e = this.isDisabled(), s = this.getSizeStyles(), {
-      color: r = "#007AFF",
-      offColor: n = "#e2e8f0",
-      thumbColor: l = "#ffffff",
-      animated: g = !0
-    } = this.props, b = t ? r : n, f = t ? `translateX(${parseInt(s.width) - parseInt(s.thumbSize) - 2}px)` : "translateX(2px)";
-    return o(
-      "div",
-      {
-        style: {
-          position: "relative",
-          display: "inline-block"
-        }
-      },
-      // Hidden input for form integration
-      o("input", {
-        ref: (p) => {
-          this.toggleElement = p, p && !this.mounted && (p.addEventListener("change", this.handleToggle), this.cleanup.push(() => {
-            p.removeEventListener("change", this.handleToggle);
-          }));
-        },
-        type: "checkbox",
-        checked: t,
-        disabled: e,
-        style: {
-          position: "absolute",
-          opacity: 0,
-          width: "100%",
-          height: "100%",
-          margin: 0,
-          cursor: e ? "not-allowed" : "pointer"
-        },
-        "aria-label": this.props.accessibilityLabel,
-        "aria-describedby": this.props.accessibilityHint ? `${this.id}-hint` : void 0
-      }),
-      // Switch track
-      o(
-        "div",
-        {
-          style: {
-            width: s.width,
-            height: s.height,
-            backgroundColor: b,
-            borderRadius: s.height,
-            position: "relative",
-            cursor: e ? "not-allowed" : "pointer",
-            opacity: e ? 0.5 : 1,
-            transition: g ? "background-color 0.2s ease" : "none",
-            border: "1px solid rgba(0,0,0,0.1)",
-            boxShadow: "inset 0 1px 2px rgba(0,0,0,0.1)"
-          },
-          onClick: this.handleToggle
-        },
-        // Switch thumb
-        o("div", {
-          style: {
-            width: s.thumbSize,
-            height: s.thumbSize,
-            backgroundColor: l,
-            borderRadius: "50%",
-            position: "absolute",
-            top: "50%",
-            transform: `translateY(-50%) ${f}`,
-            transition: g ? "transform 0.2s ease" : "none",
-            boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
-            border: "1px solid rgba(0,0,0,0.1)"
-          }
-        })
-      )
-    );
-  }
-  /**
-   * Render checkbox variant
-   */
-  renderCheckbox() {
-    const t = this.getIsOn(), e = this.isDisabled(), s = this.getSizeStyles(), { color: r = "#007AFF" } = this.props;
-    return o(
-      "div",
-      {
-        style: {
-          position: "relative",
-          display: "inline-block"
-        }
-      },
-      // Hidden input
-      o("input", {
-        ref: (n) => {
-          this.toggleElement = n, n && !this.mounted && (n.addEventListener("change", this.handleToggle), this.cleanup.push(() => {
-            n.removeEventListener("change", this.handleToggle);
-          }));
-        },
-        type: "checkbox",
-        checked: t,
-        disabled: e,
-        style: {
-          position: "absolute",
-          opacity: 0,
-          width: "100%",
-          height: "100%",
-          margin: 0,
-          cursor: e ? "not-allowed" : "pointer"
-        }
-      }),
-      // Checkbox visual
-      o(
-        "div",
-        {
-          style: {
-            width: s.thumbSize,
-            height: s.thumbSize,
-            border: `2px solid ${t ? r : "#d1d5db"}`,
-            borderRadius: "4px",
-            backgroundColor: t ? r : "#ffffff",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            cursor: e ? "not-allowed" : "pointer",
-            opacity: e ? 0.5 : 1,
-            transition: "all 0.2s ease"
-          },
-          onClick: this.handleToggle
-        },
-        ...t ? [
-          // Checkmark
-          o("div", {
-            style: {
-              width: "6px",
-              height: "10px",
-              border: "2px solid white",
-              borderTop: "none",
-              borderLeft: "none",
-              transform: "rotate(45deg) translateY(-1px)",
-              opacity: t ? 1 : 0,
-              transition: "opacity 0.1s ease"
-            }
-          })
-        ] : []
-      )
-    );
-  }
-  /**
-   * Render button variant
-   */
-  renderButton() {
-    const t = this.getIsOn(), e = this.isDisabled(), s = this.getSizeStyles(), { color: r = "#007AFF", offColor: n = "#f3f4f6" } = this.props;
-    return o(
-      "button",
-      {
-        ref: (l) => {
-          l && !this.mounted && (l.addEventListener("click", this.handleToggle), this.cleanup.push(() => {
-            l.removeEventListener("click", this.handleToggle);
-          }));
-        },
-        type: "button",
-        disabled: e,
-        style: {
-          padding: "8px 16px",
-          backgroundColor: t ? r : n,
-          color: t ? "#ffffff" : "#374151",
-          border: `1px solid ${t ? r : "#d1d5db"}`,
-          borderRadius: "6px",
-          fontSize: s.fontSize,
-          fontWeight: "500",
-          cursor: e ? "not-allowed" : "pointer",
-          opacity: e ? 0.5 : 1,
-          transition: "all 0.2s ease",
-          outline: "none"
-        },
-        "aria-pressed": t,
-        "aria-label": this.props.accessibilityLabel
-      },
-      c(t ? "ON" : "OFF")
-    );
-  }
-  /**
-   * Render toggle control based on variant
-   */
-  renderToggleControl() {
-    const { variant: t = "switch" } = this.props;
-    switch (t) {
-      case "checkbox":
-        return this.renderCheckbox();
-      case "button":
-        return this.renderButton();
-      default:
-        return this.renderSwitch();
-    }
-  }
-  /**
-   * Render label content
-   */
-  renderLabel() {
-    const t = this.resolveLabel();
-    if (!t) return null;
-    const e = this.getSizeStyles();
-    return o(
-      "span",
-      {
-        style: {
-          fontSize: e.fontSize,
-          color: this.isDisabled() ? "#9ca3af" : "#374151",
-          cursor: this.isDisabled() ? "not-allowed" : "pointer"
-        },
-        onClick: this.isDisabled() ? void 0 : this.handleToggle
-      },
-      ...typeof t == "string" ? [c(t)] : this.renderComponentContent(t)
-    );
-  }
-  render() {
-    const { labelPosition: t = "trailing", spacing: e = 8, accessibilityHint: s } = this.props, r = this.renderLabel(), n = this.renderToggleControl(), l = t === "leading" && r ? [r, n] : r ? [n, r] : [n];
-    return o(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: r ? `${e}px` : "0",
-          cursor: this.isDisabled() ? "not-allowed" : "pointer"
-        },
-        "aria-describedby": s ? `${this.id}-hint` : void 0
-      },
-      ...l,
-      ...s ? [
-        o(
-          "div",
-          {
-            id: `${this.id}-hint`,
-            style: {
-              fontSize: "12px",
-              color: "#6b7280",
-              marginTop: "4px",
-              display: "block",
-              width: "100%"
-            }
-          },
-          c(s)
-        )
-      ] : []
-    );
-  }
-}
-function a(i, t = {}) {
-  const e = { ...t, isOn: i }, s = new w(e);
-  return x(s);
-}
-function u(i, t, e = {}) {
-  return a(t, { ...e, label: i });
-}
-const H = {
-  /**
-   * Switch toggle (default)
-   */
-  Switch(i, t = {}) {
-    return a(i, { ...t, variant: "switch" });
-  },
-  /**
-   * Checkbox toggle
-   */
-  Checkbox(i, t = {}) {
-    return a(i, { ...t, variant: "checkbox" });
-  },
-  /**
-   * Button toggle
-   */
-  Button(i, t = {}) {
-    return a(i, { ...t, variant: "button" });
-  },
-  /**
-   * Small toggle
-   */
-  Small(i, t = {}) {
-    return a(i, { ...t, size: "small" });
-  },
-  /**
-   * Large toggle
-   */
-  Large(i, t = {}) {
-    return a(i, { ...t, size: "large" });
-  },
-  /**
-   * Custom color toggle
-   */
-  CustomColor(i, t, e = {}) {
-    return a(i, { ...e, color: t });
-  },
-  /**
-   * Toggle with leading label
-   */
-  WithLeadingLabel(i, t, e = {}) {
-    return a(t, { ...e, label: i, labelPosition: "leading" });
-  },
-  /**
-   * Toggle with trailing label (default)
-   */
-  WithTrailingLabel(i, t, e = {}) {
-    return a(t, { ...e, label: i, labelPosition: "trailing" });
-  }
-}, M = {
-  /**
-   * Create a toggle group with multiple options
-   */
-  createGroup(i, t = {}) {
-    return i.map(
-      (e) => u(e.label, e.isOn, {
-        ...t,
-        onToggle: e.onToggle
-      })
-    );
-  },
-  /**
-   * Create exclusive toggle group (radio-like behavior)
-   */
-  createExclusiveGroup(i, t, e, s = {}) {
-    const r = () => d(t) ? t() : t;
-    return i.map(
-      (n) => u(n.label, r() === n.key, {
-        ...s,
-        onToggle: (l) => {
-          l && e && e(n.key);
-        }
-      })
-    );
-  },
-  /**
-   * Batch toggle operations
-   */
-  batch: {
-    /**
-     * Toggle all items in a group
-     */
-    toggleAll(i, t) {
-      i.forEach((e) => {
-        e.onToggle && e.onToggle(t);
-      });
-    },
-    /**
-     * Get state of all toggles in a group
-     */
-    getStates(i) {
-      return i.map((t) => d(t.isOn) ? t.isOn() : t.isOn);
-    },
-    /**
-     * Check if all toggles are on
-     */
-    allOn(i) {
-      return this.getStates(i).every((t) => t);
-    },
-    /**
-     * Check if any toggle is on
-     */
-    anyOn(i) {
-      return this.getStates(i).some((t) => t);
-    }
-  }
-};
-export {
-  w as EnhancedToggle,
-  a as Toggle,
-  H as ToggleStyles,
-  M as ToggleUtils,
-  u as ToggleWithLabel
-};
-//# sourceMappingURL=Toggle.js.map

package/dist/components/Toggle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Toggle.js","sources":["../../src/components/Toggle.ts"],"sourcesContent":["/**\n * Enhanced Toggle Component (Phase 6.4.5)\n *\n * SwiftUI-inspired Toggle component with switch-style boolean controls,\n * smooth animations, and multiple style variants.\n */\n\nimport type { ModifiableComponent, ModifierBuilder } from '../modifiers/types'\nimport { createEffect, createSignal, isSignal } from '../reactive'\nimport type { Signal } from '../reactive/types'\nimport { h, text } from '../runtime'\nimport type { ComponentInstance, ComponentProps, DOMNode } from '../runtime/types'\nimport { withModifiers } from './wrapper'\n\n/**\n * Toggle component properties\n */\nexport interface ToggleProps extends ComponentProps {\n  // Value binding\n  isOn: boolean | Signal<boolean>\n  onToggle?: (isOn: boolean) => void\n\n  // Content\n  label?: string | (() => string) | Signal<string> | ComponentInstance\n\n  // Appearance\n  variant?: 'switch' | 'checkbox' | 'button'\n  size?: 'small' | 'medium' | 'large'\n  color?: string\n  offColor?: string\n  thumbColor?: string\n\n  // Behavior\n  disabled?: boolean | Signal<boolean>\n  animated?: boolean\n\n  // Styling\n  labelPosition?: 'leading' | 'trailing'\n  spacing?: number\n\n  // Accessibility\n  accessibilityLabel?: string\n  accessibilityHint?: string\n}\n\n/**\n * Enhanced Toggle component class\n */\nexport class EnhancedToggle implements ComponentInstance<ToggleProps> {\n  public readonly type = 'component' as const\n  public readonly id: string\n  public mounted = false\n  public cleanup: (() => void)[] = []\n  private toggleElement: HTMLInputElement | null = null\n  // isAnimating state removed - not used in current implementation\n  private setIsAnimating: (animating: boolean) => boolean\n\n  constructor(public props: ToggleProps) {\n    this.id = `toggle-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`\n\n    // Initialize internal state\n    const [, setAnimating] = createSignal(false)\n    // this.isAnimating = animating - removed unused accessor\n    this.setIsAnimating = setAnimating\n\n    // Handle value changes reactively\n    createEffect(() => {\n      const currentValue = this.getIsOn()\n      if (this.toggleElement && this.toggleElement.checked !== currentValue) {\n        this.toggleElement.checked = currentValue\n      }\n    })\n  }\n\n  /**\n   * Get current toggle state\n   */\n  private getIsOn(): boolean {\n    const { isOn } = this.props\n    if (isSignal(isOn)) {\n      return (isOn as () => boolean)()\n    }\n    return isOn as boolean\n  }\n\n  // /**\n  //  * Get toggle state as signal or static value for DOM renderer\n  //  */\n  // private getIsOnForDOM(): boolean | (() => boolean) {\n  //   const { isOn } = this.props\n  //   if (isSignal(isOn)) {\n  //     return isOn as () => boolean\n  //   }\n  //   return isOn as boolean\n  // }\n\n  /**\n   * Check if toggle is disabled\n   */\n  private isDisabled(): boolean {\n    const { disabled } = this.props\n    if (typeof disabled === 'boolean') return disabled\n    if (isSignal(disabled)) return (disabled as () => boolean)()\n    return false\n  }\n\n  // /**\n  //  * Get disabled state as signal or static value for DOM renderer\n  //  */\n  // private getDisabledForDOM(): boolean | (() => boolean) {\n  //   const { disabled } = this.props\n  //   if (typeof disabled === 'boolean') return disabled\n  //   if (isSignal(disabled)) return disabled as () => boolean\n  //   return false\n  // }\n\n  /**\n   * Resolve label content\n   */\n  private resolveLabel(): string | ComponentInstance | null {\n    const { label } = this.props\n    if (!label) return null\n\n    if (typeof label === 'string') {\n      return label\n    } else if (typeof label === 'function') {\n      return label()\n    } else if (isSignal(label)) {\n      return (label as () => string)()\n    } else {\n      return label as ComponentInstance\n    }\n  }\n\n  /**\n   * Helper to render component content safely\n   */\n  private renderComponentContent(content: ComponentInstance): DOMNode[] {\n    const rendered = content.render()\n    return Array.isArray(rendered) ? rendered : [rendered]\n  }\n\n  /**\n   * Handle toggle change\n   */\n  private handleToggle = async (event: Event) => {\n    event.preventDefault()\n\n    if (this.isDisabled()) return\n\n    const newValue = !this.getIsOn()\n\n    if (this.props.animated !== false) {\n      this.setIsAnimating(true)\n\n      // Brief animation delay\n      setTimeout(() => {\n        this.setIsAnimating(false)\n      }, 200)\n    }\n\n    if (this.props.onToggle) {\n      this.props.onToggle(newValue)\n    }\n  }\n\n  /**\n   * Get toggle size styles\n   */\n  private getSizeStyles() {\n    const { size = 'medium' } = this.props\n\n    switch (size) {\n      case 'small':\n        return {\n          width: '36px',\n          height: '20px',\n          thumbSize: '16px',\n          fontSize: '14px',\n        }\n      case 'large':\n        return {\n          width: '56px',\n          height: '32px',\n          thumbSize: '28px',\n          fontSize: '18px',\n        }\n      default:\n        return {\n          width: '46px',\n          height: '26px',\n          thumbSize: '22px',\n          fontSize: '16px',\n        }\n    }\n  }\n\n  /**\n   * Render switch variant\n   */\n  private renderSwitch() {\n    const isOn = this.getIsOn()\n    const isDisabled = this.isDisabled()\n    const sizeStyles = this.getSizeStyles()\n    const {\n      color = '#007AFF',\n      offColor = '#e2e8f0',\n      thumbColor = '#ffffff',\n      animated = true,\n    } = this.props\n\n    const trackColor = isOn ? color : offColor\n    const thumbTransform = isOn\n      ? `translateX(${parseInt(sizeStyles.width) - parseInt(sizeStyles.thumbSize) - 2}px)`\n      : 'translateX(2px)'\n\n    return h(\n      'div',\n      {\n        style: {\n          position: 'relative',\n          display: 'inline-block',\n        },\n      },\n      // Hidden input for form integration\n      h('input', {\n        ref: (el: HTMLInputElement) => {\n          this.toggleElement = el\n\n          if (el && !this.mounted) {\n            el.addEventListener('change', this.handleToggle)\n\n            this.cleanup.push(() => {\n              el.removeEventListener('change', this.handleToggle)\n            })\n          }\n        },\n        type: 'checkbox',\n        checked: isOn,\n        disabled: isDisabled,\n        style: {\n          position: 'absolute',\n          opacity: 0,\n          width: '100%',\n          height: '100%',\n          margin: 0,\n          cursor: isDisabled ? 'not-allowed' : 'pointer',\n        },\n        'aria-label': this.props.accessibilityLabel,\n        'aria-describedby': this.props.accessibilityHint ? `${this.id}-hint` : undefined,\n      }),\n\n      // Switch track\n      h(\n        'div',\n        {\n          style: {\n            width: sizeStyles.width,\n            height: sizeStyles.height,\n            backgroundColor: trackColor,\n            borderRadius: sizeStyles.height,\n            position: 'relative',\n            cursor: isDisabled ? 'not-allowed' : 'pointer',\n            opacity: isDisabled ? 0.5 : 1,\n            transition: animated ? 'background-color 0.2s ease' : 'none',\n            border: '1px solid rgba(0,0,0,0.1)',\n            boxShadow: 'inset 0 1px 2px rgba(0,0,0,0.1)',\n          },\n          onClick: this.handleToggle,\n        },\n        // Switch thumb\n        h('div', {\n          style: {\n            width: sizeStyles.thumbSize,\n            height: sizeStyles.thumbSize,\n            backgroundColor: thumbColor,\n            borderRadius: '50%',\n            position: 'absolute',\n            top: '50%',\n            transform: `translateY(-50%) ${thumbTransform}`,\n            transition: animated ? 'transform 0.2s ease' : 'none',\n            boxShadow: '0 2px 4px rgba(0,0,0,0.2)',\n            border: '1px solid rgba(0,0,0,0.1)',\n          },\n        })\n      )\n    )\n  }\n\n  /**\n   * Render checkbox variant\n   */\n  private renderCheckbox() {\n    const isOn = this.getIsOn()\n    const isDisabled = this.isDisabled()\n    const sizeStyles = this.getSizeStyles()\n    const { color = '#007AFF' } = this.props\n\n    return h(\n      'div',\n      {\n        style: {\n          position: 'relative',\n          display: 'inline-block',\n        },\n      },\n      // Hidden input\n      h('input', {\n        ref: (el: HTMLInputElement) => {\n          this.toggleElement = el\n\n          if (el && !this.mounted) {\n            el.addEventListener('change', this.handleToggle)\n\n            this.cleanup.push(() => {\n              el.removeEventListener('change', this.handleToggle)\n            })\n          }\n        },\n        type: 'checkbox',\n        checked: isOn,\n        disabled: isDisabled,\n        style: {\n          position: 'absolute',\n          opacity: 0,\n          width: '100%',\n          height: '100%',\n          margin: 0,\n          cursor: isDisabled ? 'not-allowed' : 'pointer',\n        },\n      }),\n\n      // Checkbox visual\n      h(\n        'div',\n        {\n          style: {\n            width: sizeStyles.thumbSize,\n            height: sizeStyles.thumbSize,\n            border: `2px solid ${isOn ? color : '#d1d5db'}`,\n            borderRadius: '4px',\n            backgroundColor: isOn ? color : '#ffffff',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            cursor: isDisabled ? 'not-allowed' : 'pointer',\n            opacity: isDisabled ? 0.5 : 1,\n            transition: 'all 0.2s ease',\n          },\n          onClick: this.handleToggle,\n        },\n        ...(isOn\n          ? [\n              // Checkmark\n              h('div', {\n                style: {\n                  width: '6px',\n                  height: '10px',\n                  border: '2px solid white',\n                  borderTop: 'none',\n                  borderLeft: 'none',\n                  transform: 'rotate(45deg) translateY(-1px)',\n                  opacity: isOn ? 1 : 0,\n                  transition: 'opacity 0.1s ease',\n                },\n              }),\n            ]\n          : [])\n      )\n    )\n  }\n\n  /**\n   * Render button variant\n   */\n  private renderButton() {\n    const isOn = this.getIsOn()\n    const isDisabled = this.isDisabled()\n    const sizeStyles = this.getSizeStyles()\n    const { color = '#007AFF', offColor = '#f3f4f6' } = this.props\n\n    return h(\n      'button',\n      {\n        ref: (el: HTMLButtonElement) => {\n          if (el && !this.mounted) {\n            el.addEventListener('click', this.handleToggle)\n\n            this.cleanup.push(() => {\n              el.removeEventListener('click', this.handleToggle)\n            })\n          }\n        },\n        type: 'button',\n        disabled: isDisabled,\n        style: {\n          padding: '8px 16px',\n          backgroundColor: isOn ? color : offColor,\n          color: isOn ? '#ffffff' : '#374151',\n          border: `1px solid ${isOn ? color : '#d1d5db'}`,\n          borderRadius: '6px',\n          fontSize: sizeStyles.fontSize,\n          fontWeight: '500',\n          cursor: isDisabled ? 'not-allowed' : 'pointer',\n          opacity: isDisabled ? 0.5 : 1,\n          transition: 'all 0.2s ease',\n          outline: 'none',\n        },\n        'aria-pressed': isOn,\n        'aria-label': this.props.accessibilityLabel,\n      },\n      text(isOn ? 'ON' : 'OFF')\n    )\n  }\n\n  /**\n   * Render toggle control based on variant\n   */\n  private renderToggleControl() {\n    const { variant = 'switch' } = this.props\n\n    switch (variant) {\n      case 'checkbox':\n        return this.renderCheckbox()\n      case 'button':\n        return this.renderButton()\n      default:\n        return this.renderSwitch()\n    }\n  }\n\n  /**\n   * Render label content\n   */\n  private renderLabel() {\n    const labelContent = this.resolveLabel()\n    if (!labelContent) return null\n\n    const sizeStyles = this.getSizeStyles()\n\n    return h(\n      'span',\n      {\n        style: {\n          fontSize: sizeStyles.fontSize,\n          color: this.isDisabled() ? '#9ca3af' : '#374151',\n          cursor: this.isDisabled() ? 'not-allowed' : 'pointer',\n        },\n        onClick: this.isDisabled() ? undefined : this.handleToggle,\n      },\n      ...(typeof labelContent === 'string'\n        ? [text(labelContent)]\n        : this.renderComponentContent(labelContent as ComponentInstance))\n    )\n  }\n\n  render() {\n    const { labelPosition = 'trailing', spacing = 8, accessibilityHint } = this.props\n\n    const label = this.renderLabel()\n    const control = this.renderToggleControl()\n\n    // Arrange label and control based on position\n    const children =\n      labelPosition === 'leading' && label ? [label, control] : label ? [control, label] : [control]\n\n    return h(\n      'div',\n      {\n        style: {\n          display: 'flex',\n          alignItems: 'center',\n          gap: label ? `${spacing}px` : '0',\n          cursor: this.isDisabled() ? 'not-allowed' : 'pointer',\n        },\n        'aria-describedby': accessibilityHint ? `${this.id}-hint` : undefined,\n      },\n      ...children,\n\n      // Accessibility hint\n      ...(accessibilityHint\n        ? [\n            h(\n              'div',\n              {\n                id: `${this.id}-hint`,\n                style: {\n                  fontSize: '12px',\n                  color: '#6b7280',\n                  marginTop: '4px',\n                  display: 'block',\n                  width: '100%',\n                },\n              },\n              text(accessibilityHint)\n            ),\n          ]\n        : [])\n    )\n  }\n}\n\n/**\n * Toggle component function\n */\nexport function Toggle(\n  isOn: boolean | Signal<boolean>,\n  props: Omit<ToggleProps, 'isOn'> = {}\n): ModifiableComponent<ToggleProps> & {\n  modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>\n} {\n  const toggleProps: ToggleProps = { ...props, isOn }\n  const component = new EnhancedToggle(toggleProps)\n  return withModifiers(component)\n}\n\n/**\n * Toggle with label\n */\nexport function ToggleWithLabel(\n  label: string | (() => string) | Signal<string> | ComponentInstance,\n  isOn: boolean | Signal<boolean>,\n  props: Omit<ToggleProps, 'isOn' | 'label'> = {}\n) {\n  return Toggle(isOn, { ...props, label })\n}\n\n/**\n * Toggle style variants\n */\nexport const ToggleStyles = {\n  /**\n   * Switch toggle (default)\n   */\n  Switch(isOn: boolean | Signal<boolean>, props: Omit<ToggleProps, 'isOn' | 'variant'> = {}) {\n    return Toggle(isOn, { ...props, variant: 'switch' })\n  },\n\n  /**\n   * Checkbox toggle\n   */\n  Checkbox(isOn: boolean | Signal<boolean>, props: Omit<ToggleProps, 'isOn' | 'variant'> = {}) {\n    return Toggle(isOn, { ...props, variant: 'checkbox' })\n  },\n\n  /**\n   * Button toggle\n   */\n  Button(isOn: boolean | Signal<boolean>, props: Omit<ToggleProps, 'isOn' | 'variant'> = {}) {\n    return Toggle(isOn, { ...props, variant: 'button' })\n  },\n\n  /**\n   * Small toggle\n   */\n  Small(isOn: boolean | Signal<boolean>, props: Omit<ToggleProps, 'isOn' | 'size'> = {}) {\n    return Toggle(isOn, { ...props, size: 'small' })\n  },\n\n  /**\n   * Large toggle\n   */\n  Large(isOn: boolean | Signal<boolean>, props: Omit<ToggleProps, 'isOn' | 'size'> = {}) {\n    return Toggle(isOn, { ...props, size: 'large' })\n  },\n\n  /**\n   * Custom color toggle\n   */\n  CustomColor(\n    isOn: boolean | Signal<boolean>,\n    color: string,\n    props: Omit<ToggleProps, 'isOn' | 'color'> = {}\n  ) {\n    return Toggle(isOn, { ...props, color })\n  },\n\n  /**\n   * Toggle with leading label\n   */\n  WithLeadingLabel(\n    label: string | (() => string) | Signal<string> | ComponentInstance,\n    isOn: boolean | Signal<boolean>,\n    props: Omit<ToggleProps, 'isOn' | 'label' | 'labelPosition'> = {}\n  ) {\n    return Toggle(isOn, { ...props, label, labelPosition: 'leading' })\n  },\n\n  /**\n   * Toggle with trailing label (default)\n   */\n  WithTrailingLabel(\n    label: string | (() => string) | Signal<string> | ComponentInstance,\n    isOn: boolean | Signal<boolean>,\n    props: Omit<ToggleProps, 'isOn' | 'label' | 'labelPosition'> = {}\n  ) {\n    return Toggle(isOn, { ...props, label, labelPosition: 'trailing' })\n  },\n}\n\n/**\n * Toggle utilities\n */\nexport const ToggleUtils = {\n  /**\n   * Create a toggle group with multiple options\n   */\n  createGroup(\n    options: Array<{\n      key: string\n      label: string\n      isOn: boolean | Signal<boolean>\n      onToggle?: (isOn: boolean) => void\n    }>,\n    props: Omit<ToggleProps, 'isOn' | 'label' | 'onToggle'> = {}\n  ) {\n    return options.map((option) =>\n      ToggleWithLabel(option.label, option.isOn, {\n        ...props,\n        onToggle: option.onToggle,\n      })\n    )\n  },\n\n  /**\n   * Create exclusive toggle group (radio-like behavior)\n   */\n  createExclusiveGroup(\n    options: Array<{\n      key: string\n      label: string\n    }>,\n    selectedKey: string | Signal<string>,\n    onSelectionChange?: (key: string) => void,\n    props: Omit<ToggleProps, 'isOn' | 'label' | 'onToggle'> = {}\n  ) {\n    const getSelectedKey = () => {\n      if (isSignal(selectedKey)) {\n        return (selectedKey as () => string)()\n      }\n      return selectedKey as string\n    }\n\n    return options.map((option) =>\n      ToggleWithLabel(option.label, getSelectedKey() === option.key, {\n        ...props,\n        onToggle: (isOn: boolean) => {\n          if (isOn && onSelectionChange) {\n            onSelectionChange(option.key)\n          }\n        },\n      })\n    )\n  },\n\n  /**\n   * Batch toggle operations\n   */\n  batch: {\n    /**\n     * Toggle all items in a group\n     */\n    toggleAll(\n      toggles: Array<{ isOn: boolean | Signal<boolean>; onToggle?: (isOn: boolean) => void }>,\n      newState: boolean\n    ) {\n      toggles.forEach((toggle) => {\n        if (toggle.onToggle) {\n          toggle.onToggle(newState)\n        }\n      })\n    },\n\n    /**\n     * Get state of all toggles in a group\n     */\n    getStates(toggles: Array<{ isOn: boolean | Signal<boolean> }>): boolean[] {\n      return toggles.map((toggle) => {\n        if (isSignal(toggle.isOn)) {\n          return (toggle.isOn as () => boolean)()\n        }\n        return toggle.isOn as boolean\n      })\n    },\n\n    /**\n     * Check if all toggles are on\n     */\n    allOn(toggles: Array<{ isOn: boolean | Signal<boolean> }>): boolean {\n      return this.getStates(toggles).every((state) => state)\n    },\n\n    /**\n     * Check if any toggle is on\n     */\n    anyOn(toggles: Array<{ isOn: boolean | Signal<boolean> }>): boolean {\n      return this.getStates(toggles).some((state) => state)\n    },\n  },\n}\n"],"names":["EnhancedToggle","props","__publicField","event","newValue","setAnimating","createSignal","createEffect","currentValue","isOn","isSignal","disabled","label","content","rendered","size","isDisabled","sizeStyles","color","offColor","thumbColor","animated","trackColor","thumbTransform","h","el","text","variant","labelContent","labelPosition","spacing","accessibilityHint","control","children","Toggle","toggleProps","component","withModifiers","ToggleWithLabel","ToggleStyles","ToggleUtils","options","option","selectedKey","onSelectionChange","getSelectedKey","toggles","newState","toggle","state"],"mappings":"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"}

package/dist/components/index.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./BasicInput.cjs"),t=require("./Grid.cjs"),a=require("./Button.cjs"),c=require("./Divider.cjs"),s=require("./Form.cjs"),n=require("./Image.cjs"),g=require("./EnhancedLink.cjs"),i=require("./List.cjs"),l=require("./Menu.cjs"),d=require("./Picker.cjs"),h=require("./ScrollView.cjs"),r=require("./Section.cjs"),m=require("./Show.cjs"),p=require("./Spacer.cjs"),S=require("./Text.cjs"),o=require("./Toggle.cjs"),e=require("./wrapper.cjs");exports.BasicInput=u.BasicInput;exports.BasicInputStyles=u.BasicInputStyles;exports.BasicInputUtils=u.BasicInputUtils;exports.BaseGridComponent=t.BaseGridComponent;exports.EnhancedGrid=t.EnhancedGrid;exports.EnhancedGridRow=t.EnhancedGridRow;exports.EnhancedLazyHGrid=t.EnhancedLazyHGrid;exports.EnhancedLazyVGrid=t.EnhancedLazyVGrid;exports.Grid=t.Grid;exports.GridCSSGenerator=t.GridCSSGenerator;exports.GridItem=t.GridItem;exports.GridRow=t.GridRow;exports.LazyHGrid=t.LazyHGrid;exports.LazyVGrid=t.LazyVGrid;exports.Button=a.Button;exports.ButtonStyles=a.ButtonStyles;exports.EnhancedButton=a.EnhancedButton;exports.defaultButtonTheme=a.defaultButtonTheme;exports.Divider=c.Divider;exports.DividerStyles=c.DividerStyles;exports.DividerUtils=c.DividerUtils;exports.defaultDividerTheme=c.defaultDividerTheme;exports.BasicForm=s.BasicForm;exports.BasicFormImplementation=s.BasicFormImplementation;exports.BasicFormStyles=s.BasicFormStyles;exports.BasicFormValidation=s.BasicFormValidation;exports.EnhancedImage=n.EnhancedImage;exports.Image=n.Image;exports.ImageContentModes=n.ImageContentModes;exports.ImageStates=n.ImageStates;exports.ImageUtils=n.ImageUtils;exports.Link=g.Link;exports.LinkUtils=g.LinkUtils;exports.EnhancedList=i.EnhancedList;exports.For=i.For;exports.ForEach=i.ForEach;exports.ForEachComponent=i.ForEachComponent;exports.List=i.List;exports.ListUtils=i.ListUtils;exports.Menu=l.Menu;exports.MenuStyles=l.MenuStyles;exports.MenuUtils=l.MenuUtils;exports.defaultMenuTheme=l.defaultMenuTheme;exports.EnhancedPicker=d.EnhancedPicker;exports.Picker=d.Picker;exports.PickerStyles=d.PickerStyles;exports.PickerUtils=d.PickerUtils;exports.EnhancedScrollView=h.EnhancedScrollView;exports.ScrollView=h.ScrollView;exports.ScrollViewUtils=h.ScrollViewUtils;exports.EnhancedSection=r.EnhancedSection;exports.Section=r.Section;exports.SectionStyles=r.SectionStyles;exports.SectionWithHeader=r.SectionWithHeader;exports.SectionWithHeaderFooter=r.SectionWithHeaderFooter;exports.Show=m.Show;exports.Unless=m.Unless;exports.When=m.When;exports.Spacer=p.Spacer;exports.Text=S.Text;exports.TextFormat=S.TextFormat;exports.TextStyles=S.TextStyles;exports.Typography=S.Typography;exports.EnhancedToggle=o.EnhancedToggle;exports.Toggle=o.Toggle;exports.ToggleStyles=o.ToggleStyles;exports.ToggleUtils=o.ToggleUtils;exports.ToggleWithLabel=o.ToggleWithLabel;exports.H1=e.H1;exports.H2=e.H2;exports.H3=e.H3;exports.H4=e.H4;exports.H5=e.H5;exports.H6=e.H6;exports.HStack=e.HStack;exports.HTML=e.HTML;exports.Layout=e.Layout;exports.VStack=e.VStack;exports.ZStack=e.ZStack;exports.createModifiableComponentFactory=e.createModifiableComponentFactory;exports.createReactiveWrapper=e.createReactiveWrapper;exports.withModifierSupport=e.withModifierSupport;exports.withModifiers=e.withModifiers;exports.wrapComponent=e.wrapComponent;
-//# sourceMappingURL=index.cjs.map

package/dist/components/index.cjs.map

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

package/dist/components/index.js.map

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

package/dist/components/wrapper.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../reactive/cleanup.cjs");require("../reactive/unified-scheduler.cjs");require("../reactive/signal.cjs");require("../reactive/scheduler.cjs");require("../reactive/theme.cjs");const w=require("../modifiers/builder.cjs");require("../modifiers/core.cjs");const T=require("../modifiers/registry.cjs");require("../modifiers/responsive/breakpoints.cjs");require("../modifiers/responsive/css-generator.cjs");require("../modifiers/responsive/performance.cjs");require("../modifiers/responsive/dev-tools.cjs");require("../modifiers/effects.cjs");require("../modifiers/elements.cjs");require("../modifiers/basic-sanitizer.cjs");require("../modifiers/as-html-validator.cjs");require("../runtime/component.cjs");require("../runtime/context.cjs");require("../runtime/dev-tools.cjs");const A=require("../runtime/dom-bridge.cjs");require("../runtime/error-boundary.cjs");require("../runtime/error-reporting.cjs");require("../runtime/performance.cjs");const q=require("../runtime/renderer.cjs"),H=require("../runtime/element-override.cjs");require("../runtime/semantic-role-manager.cjs");require("../runtime/development-warnings.cjs");const R=require("../lifecycle/hooks.cjs");require("../css-classes/css-class-manager.cjs");const E=require("../css-classes/component-base.cjs");var x=Object.defineProperty,P=(e,t,r)=>t in e?x(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,f=(e,t,r)=>P(e,typeof t!="symbol"?t+"":t,r);let M=null;const _=()=>{if(!M)try{M=require("../debug").debugManager}catch{M={isEnabled:()=>!1,logComponent:()=>{}}}return M};function $(e){return e&&typeof e.concat=="function"&&typeof e.toSegment=="function"&&typeof e.isConcatenatable=="function"}function c(e){const t=T.createModifiableComponent(e),r=w.createModifierBuilder(t),n={...t,modifier:r,modifierBuilder:r};return $(e)&&(n.concat=function(i){return e.concat(i)},n.toSegment=function(){return e.toSegment()},n.isConcatenatable=function(){return e.isConcatenatable()}),n}function L(e,t={}){const{enableModifiers:r=!0}=t;return n=>{const i={type:"component",id:`wrapper-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,props:n,mounted:!1,cleanup:[],render(){const a=e(n);return Array.isArray(a)?a:[a]}};return c(i)}}class g{constructor(t,r,n,i={}){this.props=t,this.tag=r,this.content=n,this.attributes=i,f(this,"type","component"),f(this,"id"),f(this,"mounted",!1),f(this,"cleanup",[]),this.id=`element-${Date.now()}-${Math.random().toString(36).substr(2,9)}`}render(){return[q.h(this.tag,this.attributes,this.content?q.text(this.content):"")]}}const v={div:(e={})=>{const t=new g(e,"div",e.children?String(e.children):void 0);return c(t)},span:(e={})=>{const t=new g(e,"span",e.children?String(e.children):void 0);return c(t)},p:(e={})=>{const t=new g(e,"p",e.children?String(e.children):void 0);return c(t)},button:(e={})=>{const t=new g(e,"button",e.children?String(e.children):void 0,{onclick:e.onClick});return c(t)},input:(e={})=>{const t=new g(e,"input",void 0,{type:e.type||"text",value:e.value||"",placeholder:e.placeholder||"",oninput:r=>{const n=r.target;e.onChange?.(n.value)}});return c(t)},img:e=>{const t=new g(e,"img",void 0,{src:e.src,alt:e.alt||"",width:e.width,height:e.height});return c(t)},heading:e=>(t={})=>{const r=new g(t,`h${e}`,t.children?String(t.children):void 0);return c(r)}},D=v.heading(1),O=v.heading(2),W=v.heading(3),N=v.heading(4),V=v.heading(5),Z=v.heading(6);class b extends E.ComponentWithCSSClasses{constructor(t,r,n=[],i={}){super(),this.props=t,this.layoutType=r,this.children=n,this.layoutProps=i,f(this,"type","component"),f(this,"id"),f(this,"mounted",!1),f(this,"cleanup",[]),f(this,"effectiveTag"),f(this,"validationResult"),this.id=`layout-${Date.now()}-${Math.random().toString(36).substr(2,9)}`;const a=this.layoutType==="hstack"?"HStack":this.layoutType==="vstack"?"VStack":"ZStack",p=H.processElementOverride(a,"div",this.props.element);this.effectiveTag=p.tag,this.validationResult=p.validation,R.useLifecycle(this,{onDOMReady:(S,h)=>{this.children.forEach((s,y)=>{const o=s._enhancedLifecycle;if(o&&o.onDOMReady&&!s.domReady)try{if(h){const u=this.findChildDOMElements(s,h,y);if(u.length>0){s.domElements=new Map,u.forEach((m,C)=>{const d=m.id||`element-${C}`;s.domElements.set(d,m),s.primaryElement||(s.primaryElement=m)}),s.domReady=!0;const l=o.onDOMReady(s.domElements,s.primaryElement);if(typeof l=="function"&&(s.cleanup=s.cleanup||[],s.cleanup.push(l)),o.onMount){const m=o.onMount();typeof m=="function"&&(s.cleanup=s.cleanup||[],s.cleanup.push(m))}}}}catch(u){console.error(`Error processing lifecycle hooks for child ${s.id}:`,u)}})}}),A.registerComponentWithLifecycleHooks(this)}findChildDOMElements(t,r,n){if(t.id.startsWith("image-")){const a=r.querySelectorAll("img.tachui-image");return a[n]?[a[n]]:Array.from(a)}if(t.id.startsWith("button-")){const a=r.querySelectorAll("button.tachui-button");return a[n]?[a[n]]:Array.from(a)}if(t.id.startsWith("text-")){const a=r.querySelectorAll("span.tachui-text, .tachui-text");return a[n]?[a[n]]:Array.from(a)}const i=Array.from(r.children);return i[n]?[i[n]]:i}render(){const{spacing:t=0,debugLabel:r}=this.layoutProps,n=this.layoutProps.alignment!==void 0?this.layoutProps.alignment:"center",i=_();i.logComponent(this.layoutType.toUpperCase(),r);const a=[`tachui-${this.layoutType}`,...i.isEnabled()?["tachui-debug"]:[]],p=this.createClassString(this.props,a);switch(this.layoutType){case"vstack":{const h=this.children.map(y=>{const o=y.render();return Array.isArray(o)?o:[o]}).flat();return[{type:"element",tag:this.effectiveTag,props:{className:p,style:{display:"flex",flexDirection:"column",gap:t?`${t}px`:"0",alignItems:n==="leading"?"flex-start":n==="trailing"?"flex-end":"center"},...i.isEnabled()&&{"data-tachui-component":"VStack",...r&&{"data-tachui-label":r}}},children:h,componentMetadata:{originalType:"VStack",overriddenTo:this.effectiveTag!=="div"?this.effectiveTag:void 0,validationResult:this.validationResult}}]}case"hstack":{const h=this.children.map(y=>{const o=y.render();return Array.isArray(o)?o:[o]}).flat();return[{type:"element",tag:this.effectiveTag,props:{className:p,style:{display:"flex",flexDirection:"row",gap:t?`${t}px`:"0",alignItems:n==="top"?"flex-start":n==="bottom"?"flex-end":"center"},...i.isEnabled()&&{"data-tachui-component":"HStack",...r&&{"data-tachui-label":r}}},children:h,componentMetadata:{originalType:"HStack",overriddenTo:this.effectiveTag!=="div"?this.effectiveTag:void 0,validationResult:this.validationResult}}]}case"zstack":{let S=-1/0,h=null;this.children.forEach(o=>{if("modifiers"in o&&Array.isArray(o.modifiers)){const u=o.modifiers.find(l=>l.type==="layout"&&l.properties&&"layoutPriority"in l.properties&&typeof l.properties.layoutPriority=="number");if(u){const l=u.properties.layoutPriority;l>S&&(S=l,h=o)}}});const s=q.h("div",{className:p,style:{position:"relative",display:"flex",justifyContent:n.includes("Leading")?"flex-start":n.includes("Trailing")?"flex-end":"center",alignItems:n.includes("top")?"flex-start":n.includes("bottom")?"flex-end":"center",...h?{minWidth:"fit-content",minHeight:"fit-content"}:{}},...i.isEnabled()&&{"data-tachui-component":"ZStack",...r&&{"data-tachui-label":r}}}),y=this.children.flatMap((o,u)=>{const l=o.render(),m=Array.isArray(l)?l:[l];let C=u;if("modifiers"in o&&Array.isArray(o.modifiers)){const d=o.modifiers.find(k=>k.type==="layout"&&k.properties&&"layoutPriority"in k.properties);d&&typeof d.properties.layoutPriority=="number"&&(C=d.properties.layoutPriority)}return m.map(d=>{if(d.type==="element"){const k=o===h;return{...d,props:{...d.props,style:{...d.props?.style,...k?{position:"relative",zIndex:C}:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:C}}}}}return d})});return[{type:"element",tag:this.effectiveTag,props:{...s.props,className:p},children:y,componentMetadata:{originalType:"ZStack",overriddenTo:this.effectiveTag!=="div"?this.effectiveTag:void 0,validationResult:this.validationResult}}]}default:return[{type:"element",tag:"div",props:{},children:[]}]}}}const z={VStack:(e={})=>{const{children:t=[],spacing:r=0,alignment:n="center"}=e,i=new b(e,"vstack",t,{spacing:r,alignment:n});return c(i)},HStack:(e={})=>{const{children:t=[],spacing:r=0,alignment:n="center"}=e,i=new b(e,"hstack",t,{spacing:r,alignment:n});return c(i)},ZStack:(e={})=>{const{children:t=[],alignment:r="center"}=e,n=new b(e,"zstack",t,{alignment:r});return c(n)}};function B(e={}){const{children:t=[],spacing:r=0,debugLabel:n}=e,i=e.alignment!==void 0?e.alignment:"center",a=new b(e,"vstack",t,{spacing:r,alignment:i,debugLabel:n});return c(a)}function F(e={}){const{children:t=[],spacing:r=0,debugLabel:n}=e,i=e.alignment!==void 0?e.alignment:"center",a=new b(e,"hstack",t,{spacing:r,alignment:i,debugLabel:n});return c(a)}function j(e={}){const{children:t=[],alignment:r="center"}=e,n=new b(e,"zstack",t,{alignment:r});return c(n)}function U(e){return c(e)}function G(e){return class extends e{constructor(t){super(t),f(this,"_modifiableComponent"),this._modifiableComponent=c(this)}get modifier(){return w.createModifierBuilder(this._modifiableComponent)}get modifiers(){return this._modifiableComponent.modifiers}}}function J(e){return t=>{const r={type:"component",id:`factory-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,props:t,mounted:!1,cleanup:[],render(){const n=e(t);return Array.isArray(n)?n:[n]}};return c(r)}}exports.H1=D;exports.H2=O;exports.H3=W;exports.H4=N;exports.H5=V;exports.H6=Z;exports.HStack=F;exports.HTML=v;exports.Layout=z;exports.VStack=B;exports.ZStack=j;exports.createModifiableComponentFactory=J;exports.createReactiveWrapper=L;exports.withModifierSupport=G;exports.withModifiers=c;exports.wrapComponent=U;
-//# sourceMappingURL=wrapper.cjs.map