@tachui/core 0.7.0-alpha1

package/dist/components/Toggle.js

@@ -0,0 +1,477 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,2 @@
+"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

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

package/dist/components/index.d.ts

@@ -0,0 +1,45 @@
+/**
+ * TachUI Component System
+ *
+ * High-level component wrappers and utilities that integrate
+ * the modifier system with the runtime system.
+ */
+export type { ModifiableComponent, ModifierBuilder, } from '../modifiers/types';
+export type { ComponentInstance, ComponentProps, DOMNode, } from '../runtime/types';
+export type { BasicInputProps, BasicInputTheme, BasicInputType, } from './BasicInput';
+export { BasicInput, BasicInputStyles, BasicInputUtils, } from './BasicInput';
+export type { BaseGridProps, GridAlignment, GridItemConfig, GridProps, GridRowProps, LazyHGridProps, LazyVGridProps, ResponsiveGridItemConfig, } from './Grid';
+export { BaseGridComponent, EnhancedGrid, EnhancedGridRow, EnhancedLazyHGrid, EnhancedLazyVGrid, Grid, GridCSSGenerator, GridItem, GridRow, LazyHGrid, LazyVGrid, } from './Grid';
+export type { ButtonProps, ButtonRole, ButtonSize, ButtonState, ButtonTheme, ButtonVariant, } from './Button';
+export { Button, ButtonStyles, defaultButtonTheme, EnhancedButton, } from './Button';
+export type { DividerProps, DividerTheme, } from './Divider';
+export { Divider, DividerStyles, DividerUtils, defaultDividerTheme, } from './Divider';
+export type { FormData, BasicFormProps, ValidationError, } from './Form';
+export { BasicFormImplementation, BasicForm, BasicFormStyles, BasicFormValidation, } from './Form';
+export type { ImageContentMode, ImageLoadingState, ImageLoadingStrategy, ImageProps, ImageResizeMode, } from './Image';
+export { EnhancedImage, Image, ImageContentModes, ImageStates, ImageUtils, } from './Image';
+export type { EnhancedLinkProps, OpenURLAction, } from './EnhancedLink';
+export { Link, LinkUtils, } from './EnhancedLink';
+export type { ForEachProps, ForProps, ListProps, ListSection, ListStyle, SelectionMode, SwipeAction, VirtualScrollConfig, } from './List';
+export { EnhancedList, For, ForEach, ForEachComponent, List, ListUtils, } from './List';
+export type { MenuItem, MenuPlacement, MenuProps, MenuTheme, } from './Menu';
+export { defaultMenuTheme, Menu, MenuStyles, MenuUtils, } from './Menu';
+export type { PickerOption, PickerProps, } from './Picker';
+export { EnhancedPicker, Picker, PickerStyles, PickerUtils, } from './Picker';
+export type { ContentOffset, PullToRefreshState, ScrollBehavior, ScrollDirection, ScrollEdges, ScrollEventInfo, ScrollViewProps, } from './ScrollView';
+export { EnhancedScrollView, ScrollView, ScrollViewUtils, } from './ScrollView';
+export type { SectionProps } from './Section';
+export { EnhancedSection, Section, SectionStyles, SectionWithHeader, SectionWithHeaderFooter, } from './Section';
+export type { ShowProps } from './Show';
+export { Show, Unless, When, } from './Show';
+export type { SpacerProps } from './Spacer';
+export { Spacer } from './Spacer';
+export type { TextFormatting, TextProps, } from './Text';
+export { Text, // Enhanced Text is now the primary Text export
+TextFormat, TextStyles, Typography, } from './Text';
+export type { ToggleProps } from './Toggle';
+export { EnhancedToggle, Toggle, ToggleStyles, ToggleUtils, ToggleWithLabel, } from './Toggle';
+export type { WrapperOptions } from './wrapper';
+export { createModifiableComponentFactory, createReactiveWrapper, H1, H2, H3, H4, H5, H6, HStack, HTML, // Simple HTML element wrappers
+Layout, VStack, withModifierSupport, withModifiers, wrapComponent, ZStack, } from './wrapper';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,YAAY,EACV,mBAAmB,EACnB,eAAe,GAChB,MAAM,oBAAoB,CAAA;AAC3B,YAAY,EACV,iBAAiB,EACjB,cAAc,EACd,OAAO,GACR,MAAM,kBAAkB,CAAA;AAGzB,YAAY,EACV,eAAe,EACf,eAAe,EACf,cAAc,GACf,MAAM,cAAc,CAAA;AACrB,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,eAAe,GAChB,MAAM,cAAc,CAAA;AAErB,YAAY,EACV,aAAa,EACb,aAAa,EACb,cAAc,EACd,SAAS,EACT,YAAY,EACZ,cAAc,EACd,cAAc,EACd,wBAAwB,GACzB,MAAM,QAAQ,CAAA;AACf,OAAO,EACL,iBAAiB,EACjB,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,IAAI,EACJ,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,SAAS,GACV,MAAM,QAAQ,CAAA;AACf,YAAY,EACV,WAAW,EACX,UAAU,EACV,UAAU,EACV,WAAW,EACX,WAAW,EACX,aAAa,GACd,MAAM,UAAU,CAAA;AACjB,OAAO,EACL,MAAM,EACN,YAAY,EACZ,kBAAkB,EAClB,cAAc,GACf,MAAM,UAAU,CAAA;AAGjB,YAAY,EACV,YAAY,EACZ,YAAY,GACb,MAAM,WAAW,CAAA;AAClB,OAAO,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,mBAAmB,GACpB,MAAM,WAAW,CAAA;AAElB,YAAY,EACV,QAAQ,EACR,cAAc,EACd,eAAe,GAChB,MAAM,QAAQ,CAAA;AAEf,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,eAAe,EACf,mBAAmB,GACpB,MAAM,QAAQ,CAAA;AACf,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EACpB,UAAU,EACV,eAAe,GAChB,MAAM,SAAS,CAAA;AAChB,OAAO,EACL,aAAa,EACb,KAAK,EACL,iBAAiB,EACjB,WAAW,EACX,UAAU,GACX,MAAM,SAAS,CAAA;AAEhB,YAAY,EACV,iBAAiB,EACjB,aAAa,GACd,MAAM,gBAAgB,CAAA;AACvB,OAAO,EACL,IAAI,EACJ,SAAS,GACV,MAAM,gBAAgB,CAAA;AACvB,YAAY,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EACT,aAAa,EACb,WAAW,EACX,mBAAmB,GACpB,MAAM,QAAQ,CAAA;AACf,OAAO,EACL,YAAY,EACZ,GAAG,EACH,OAAO,EACP,gBAAgB,EAChB,IAAI,EACJ,SAAS,GACV,MAAM,QAAQ,CAAA;AACf,YAAY,EACV,QAAQ,EACR,aAAa,EACb,SAAS,EACT,SAAS,GACV,MAAM,QAAQ,CAAA;AACf,OAAO,EACL,gBAAgB,EAChB,IAAI,EACJ,UAAU,EACV,SAAS,GACV,MAAM,QAAQ,CAAA;AACf,YAAY,EACV,YAAY,EACZ,WAAW,GACZ,MAAM,UAAU,CAAA;AACjB,OAAO,EACL,cAAc,EACd,MAAM,EACN,YAAY,EACZ,WAAW,GACZ,MAAM,UAAU,CAAA;AACjB,YAAY,EACV,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,eAAe,EACf,WAAW,EACX,eAAe,EACf,eAAe,GAChB,MAAM,cAAc,CAAA;AACrB,OAAO,EACL,kBAAkB,EAClB,UAAU,EACV,eAAe,GAChB,MAAM,cAAc,CAAA;AACrB,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,EACL,eAAe,EACf,OAAO,EACP,aAAa,EACb,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,WAAW,CAAA;AAClB,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,GACL,MAAM,QAAQ,CAAA;AAIf,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAIjC,YAAY,EACV,cAAc,EACd,SAAS,GACV,MAAM,QAAQ,CAAA;AAEf,OAAO,EACL,IAAI,EAAE,+CAA+C;AACrD,UAAU,EACV,UAAU,EACV,UAAU,GACX,MAAM,QAAQ,CAAA;AACf,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAC3C,OAAO,EACL,cAAc,EACd,MAAM,EACN,YAAY,EACZ,WAAW,EACX,eAAe,GAChB,MAAM,UAAU,CAAA;AACjB,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAE/C,OAAO,EACL,gCAAgC,EAChC,qBAAqB,EACrB,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,MAAM,EACN,IAAI,EAAE,+BAA+B;AACrC,MAAM,EACN,MAAM,EACN,mBAAmB,EACnB,aAAa,EAEb,aAAa,EACb,MAAM,GACP,MAAM,WAAW,CAAA"}