@tachui/primitives 0.8.15 → 0.8.17

package/dist/ScrollView-D9G6WDwr.js

@@ -0,0 +1,833 @@
+import { withModifiers as f, ComponentWithCSSClasses as V, processElementOverride as D, createSignal as E, useLifecycle as F, registerComponentWithLifecycleHooks as k, h as v, createEffect as y, ConcatenatedComponent as A, sanitizeSVG as N, text as Y, isSignal as b } from "@tachui/core";
+import { isSignal as x, isComputed as z } from "@tachui/core/reactive";
+import { aspectRatio as $ } from "@tachui/modifiers";
+var B = Object.defineProperty, j = (e, t, s) => t in e ? B(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, m = (e, t, s) => j(e, typeof t != "symbol" ? t + "" : t, s);
+const M = /* @__PURE__ */ new Map(), L = /* @__PURE__ */ new Map();
+function H(e) {
+  return typeof e == "object" && e !== null && typeof e.resolve == "function";
+}
+function G(e) {
+  return e && (H(e) ? e.resolve() : e);
+}
+function R(e) {
+  if (e !== void 0)
+    return x(e) || z(e) ? e() : e;
+}
+function X(e) {
+  if (e)
+    return H(e) ? e.resolve() : x(e) || z(e) ? e() : e;
+}
+function q(e) {
+  if (process.env.NODE_ENV === "production") return;
+  const t = [];
+  e.loadingStrategy !== void 0 && t.push("loadingStrategy"), e.decoding !== void 0 && t.push("decoding"), e.fetchPriority !== void 0 && t.push("fetchPriority"), e.crossOrigin !== void 0 && t.push("crossOrigin"), e.contentMode !== void 0 && t.push("contentMode"), e.resizeMode !== void 0 && t.push("resizeMode"), t.length > 0 && console.warn(
+    `Image(template): unsupported props ignored: ${t.join(", ")}`
+  );
+}
+async function U(e, t) {
+  if (M.has(e))
+    return M.get(e);
+  if (L.has(e))
+    return L.get(e);
+  const s = fetch(e).then(async (o) => {
+    if (!o.ok)
+      throw new Error(`Failed to load SVG: ${o.status}`);
+    const i = await o.text(), r = t ? t(i) : N(i);
+    if (!r || !/<svg[\s>]/i.test(r))
+      throw new Error("Sanitized SVG missing root <svg>");
+    return M.set(e, r), r;
+  }).finally(() => {
+    L.delete(e);
+  });
+  return L.set(e, s), s;
+}
+class J extends V {
+  constructor(t) {
+    super(), this.props = t, m(this, "type", "component"), m(this, "id"), m(this, "mounted", !1), m(this, "cleanup", []), m(this, "effectiveTag"), m(this, "validationResult"), m(this, "loadingStateSignal"), m(this, "setLoadingState"), this.id = `image-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const s = D("Image", "img", this.props.element);
+    if (this.effectiveTag = s.tag, this.validationResult = s.validation, this.props.loadingState)
+      this.loadingStateSignal = this.props.loadingState, this.setLoadingState = (o) => {
+      };
+    else {
+      const o = this.props.src ? "idle" : "error", [i, r] = E(o);
+      this.loadingStateSignal = i, this.setLoadingState = r;
+    }
+    F(this, {
+      onDOMReady: (o, i) => {
+        if ((this.props.renderingMode ?? "original") === "template" && i instanceof HTMLSpanElement) {
+          this.setupTemplateModeReactivityForDOMElement(i);
+          return;
+        }
+        i instanceof HTMLImageElement && this.setupLoadingStateReactivityForDOMElement(i);
+      }
+    }), k(this);
+  }
+  /**
+   * Set loading state and notify callback
+   */
+  setLoadingStateWithCallback(t) {
+    this.props.loadingState || (this.setLoadingState(t), this.props.onLoadingStateChange && this.props.onLoadingStateChange(t));
+  }
+  /**
+   * Render the image component with reactive content handling
+   */
+  render() {
+    const t = this.loadingStateSignal();
+    if (t === "loading" && this.props.placeholder) {
+      if (typeof this.props.placeholder == "string")
+        return [v("img", {
+          class: "tachui-image-placeholder",
+          src: this.props.placeholder,
+          alt: "Loading..."
+        })];
+      if (this.props.placeholder && typeof this.props.placeholder == "object")
+        return this.props.placeholder.render();
+    }
+    if (t === "error" && this.props.errorPlaceholder) {
+      if (typeof this.props.errorPlaceholder == "string")
+        return [v("img", {
+          class: "tachui-image-error",
+          src: this.props.errorPlaceholder,
+          alt: "Error loading image"
+        })];
+      if (this.props.errorPlaceholder && typeof this.props.errorPlaceholder == "object")
+        return this.props.errorPlaceholder.render();
+    }
+    const s = ["tachui-image"], o = this.createClassString(this.props, s), i = this.props.renderingMode ?? "original";
+    let r;
+    if (i === "template") {
+      q(this.props);
+      const n = R(this.props.alt), p = !!R(this.props.decorative) || n === "";
+      r = v("span", {
+        className: `${o} tachui-image-template`,
+        role: "img",
+        ...p ? { "aria-hidden": "true" } : { "aria-label": n || this.props.accessibilityLabel || "Image" }
+      });
+    } else {
+      const n = G(this.props.src);
+      r = v(this.effectiveTag, {
+        className: o,
+        src: n,
+        // Pass resolved src for initial render
+        alt: this.props.alt,
+        // Pass reactive alt directly
+        loading: this.props.loadingStrategy || "lazy",
+        crossorigin: this.props.crossOrigin,
+        decoding: this.props.decoding || "async",
+        fetchpriority: this.props.fetchPriority
+      });
+    }
+    return r.componentMetadata = {
+      id: this.id,
+      type: "Image",
+      originalType: "Image",
+      overriddenTo: this.effectiveTag !== "img" ? this.effectiveTag : void 0,
+      validationResult: this.validationResult
+    }, [r];
+  }
+  /**
+   * Set up ImageAsset reactivity for a real DOM element (called from onDOMReady)
+   */
+  setupImageAssetReactivityForDOMElement(t, s) {
+    const o = y(() => {
+      const i = t.resolve();
+      this.props.onLoadStart?.(), this.setLoadingStateWithCallback("loading"), s.src = i;
+    });
+    this.cleanup.push(() => o.dispose());
+  }
+  setupTemplateModeReactivityForDOMElement(t) {
+    let s = 0;
+    const o = y(() => {
+      const r = R(this.props.alt) ?? this.props.accessibilityLabel, n = !!R(this.props.decorative) || r === "";
+      t.setAttribute("role", "img"), n ? (t.setAttribute("aria-hidden", "true"), t.removeAttribute("aria-label")) : (t.removeAttribute("aria-hidden"), t.setAttribute("aria-label", r || "Image"));
+    });
+    this.cleanup.push(() => o.dispose());
+    const i = y(() => {
+      const r = X(this.props.src), n = ++s;
+      if (!r) {
+        t.innerHTML = "", this.setLoadingStateWithCallback("error"), this.props.onError?.(new Event("error"));
+        return;
+      }
+      this.props.onLoadStart?.(), this.setLoadingStateWithCallback("loading"), U(r, this.props.customSanitizer).then((p) => {
+        if (n !== s)
+          return;
+        t.innerHTML = p;
+        const u = t.querySelector("svg");
+        if (!(u instanceof SVGElement))
+          throw new Error("No <svg> root after template injection");
+        u.setAttribute("aria-hidden", "true"), u.setAttribute("focusable", "false"), u.setAttribute("width", "100%"), u.setAttribute("height", "100%"), this.setLoadingStateWithCallback("loaded"), this.props.onLoad?.(new Event("load"));
+      }).catch((p) => {
+        n === s && (this.setLoadingStateWithCallback("error"), this.props.onError?.(new Event("error")));
+      });
+    });
+    this.cleanup.push(() => {
+      i.dispose(), s = Number.POSITIVE_INFINITY;
+    });
+  }
+  setupLoadingStateReactivityForDOMElement(t) {
+    const s = (n) => {
+      this.setLoadingStateWithCallback("loaded"), this.props.onLoad?.(n);
+    }, o = (n) => {
+      this.setLoadingStateWithCallback("error"), this.props.onError?.(n);
+    };
+    t.addEventListener("load", s), t.addEventListener("error", o), this.cleanup.push(() => {
+      t.removeEventListener("load", s), t.removeEventListener("error", o);
+    });
+    const i = (n) => {
+      if (!n) {
+        t.src = "", this.setLoadingStateWithCallback("error");
+        return;
+      }
+      this.props.onLoadStart?.(), this.setLoadingStateWithCallback("loading"), t.src = n;
+    };
+    if (H(this.props.src)) {
+      this.setupImageAssetReactivityForDOMElement(this.props.src, t);
+      return;
+    }
+    const r = this.props.src;
+    if (x(r) || z(r)) {
+      const n = y(() => {
+        i(r());
+      });
+      this.cleanup.push(() => n.dispose());
+      return;
+    }
+    i(
+      typeof this.props.src == "string" ? this.props.src : void 0
+    );
+  }
+  // ============================================================================
+  // Concatenation Support (Phase 3.1)
+  // ============================================================================
+  /**
+   * Concatenate this image with another concatenatable component
+   */
+  concat(t) {
+    const s = this.toSegment(), o = t.toSegment(), i = {
+      totalSegments: t instanceof A ? t.segments.length + 1 : 2,
+      accessibilityRole: t instanceof A ? this.mergeAccessibilityRoles(
+        "group",
+        t.metadata.accessibilityRole
+      ) : this.determineAccessibilityRole(t),
+      semanticStructure: "inline"
+      // Images are typically inline in concatenation
+    };
+    return new A([s, o], i);
+  }
+  /**
+   * Convert this image to a segment for concatenation
+   */
+  toSegment() {
+    return {
+      id: this.id,
+      component: this,
+      modifiers: [],
+      // Images don't typically have concatenation-specific modifiers
+      render: () => {
+        const t = this.render();
+        return Array.isArray(t) ? t[0] : t;
+      }
+    };
+  }
+  /**
+   * Check if this component supports concatenation
+   */
+  isConcatenatable() {
+    return !0;
+  }
+  /**
+   * Determine accessibility role for concatenation
+   */
+  determineAccessibilityRole(t) {
+    switch (t.constructor.name) {
+      case "EnhancedText":
+        return "group";
+      // Image + Text = group
+      case "EnhancedImage":
+        return "group";
+      // Image + Image = group
+      case "EnhancedButton":
+      case "EnhancedLink":
+        return "composite";
+      // Image + Interactive = composite
+      default:
+        return "composite";
+    }
+  }
+  /**
+   * Merge accessibility roles when combining components
+   */
+  mergeAccessibilityRoles(t, s) {
+    return t === "composite" || s === "composite" ? "composite" : "group";
+  }
+}
+function P(e, t = {}) {
+  const s = { ...t, src: e }, o = new J(s), i = f(o), r = (n) => {
+    if (n && Array.isArray(n.modifiers))
+      return n;
+    if (n?._modifiableComponent && Array.isArray(n._modifiableComponent.modifiers))
+      return n._modifiableComponent;
+    if (Array.isArray(i?.modifiers))
+      return i;
+    if (i?._modifiableComponent && Array.isArray(i._modifiableComponent.modifiers))
+      return i._modifiableComponent;
+    throw new Error("Image shorthand target is not modifiable");
+  };
+  return i.scaledToFit = function() {
+    return r(this).modifiers.push($(void 0, "fit")), i;
+  }, i.scaledToFill = function() {
+    return r(this).modifiers.push($(void 0, "fill")), i;
+  }, i;
+}
+const nt = {
+  idle: "idle",
+  loading: "loading",
+  loaded: "loaded",
+  error: "error"
+}, lt = {
+  fit: "fit",
+  fill: "fill",
+  stretch: "stretch",
+  center: "center",
+  scaleDown: "scaleDown"
+}, at = {
+  /**
+   * Create a responsive image with multiple sources
+   */
+  responsive(e, t, s = {}) {
+    const o = e.map((i) => {
+      const r = [i.src];
+      return i.width && r.push(`${i.width}w`), r.join(" ");
+    }).join(", ");
+    return P(t, { ...s, srcSet: o });
+  },
+  /**
+   * Create an image with progressive loading
+   */
+  progressive(e, t, s = {}) {
+    return P(e, {
+      ...s,
+      lowQualitySrc: e,
+      highQualitySrc: t
+    });
+  },
+  /**
+   * Create an image with loading placeholder
+   */
+  withPlaceholder(e, t, s = {}) {
+    return P(e, {
+      ...s,
+      placeholder: t
+    });
+  }
+};
+var K = Object.defineProperty, Z = (e, t, s) => t in e ? K(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, I = (e, t, s) => Z(e, typeof t != "symbol" ? t + "" : t, s);
+class S {
+  constructor(t, s, o, i = {}) {
+    this.props = t, this.tag = s, this.content = o, this.attributes = i, I(this, "type", "component"), I(this, "id"), I(this, "mounted", !1), I(this, "cleanup", []), this.id = `element-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
+  render() {
+    return [
+      v(this.tag, this.attributes, this.content ? Y(this.content) : "")
+    ];
+  }
+}
+const w = {
+  /**
+   * Create a div element with modifier support
+   */
+  div: (e = {}) => {
+    const t = new S(
+      e,
+      "div",
+      e.children ? String(e.children) : void 0
+    );
+    return f(t);
+  },
+  /**
+   * Create a span element with modifier support
+   */
+  span: (e = {}) => {
+    const t = new S(
+      e,
+      "span",
+      e.children ? String(e.children) : void 0
+    );
+    return f(t);
+  },
+  /**
+   * Create an anchor element with modifier support
+   */
+  a: (e = {}) => {
+    const t = new S(
+      e,
+      "a",
+      e.children ? String(e.children) : void 0,
+      {
+        href: e.href,
+        onclick: e.onClick
+      }
+    );
+    return f(t);
+  },
+  /**
+   * Create a paragraph element with modifier support
+   */
+  p: (e = {}) => {
+    const t = new S(
+      e,
+      "p",
+      e.children ? String(e.children) : void 0
+    );
+    return f(t);
+  },
+  /**
+   * Create a button element with modifier support
+   *
+   * Note: For enhanced button features (press states, variants, accessibility),
+   * use the main Button component instead.
+   */
+  button: (e = {}) => {
+    const t = new S(
+      e,
+      "button",
+      e.children ? String(e.children) : void 0,
+      {
+        onclick: e.onClick
+      }
+    );
+    return process.env.NODE_ENV === "test" && (t.props || (t.props = {}), t.props.tabIndex = 0), f(t);
+  },
+  /**
+   * Create an input element with modifier support
+   */
+  input: (e = {}) => {
+    const t = new S(e, "input", void 0, {
+      type: e.type || "text",
+      value: e.value || "",
+      placeholder: e.placeholder || "",
+      oninput: (s) => {
+        const o = s.target;
+        e.onChange?.(o.value);
+      }
+    });
+    return f(t);
+  },
+  /**
+   * Create an image element with modifier support
+   *
+   * Note: For enhanced image features (loading states, content modes, progressive loading),
+   * use the main Image component instead.
+   */
+  img: (e) => {
+    const t = new S(e, "img", void 0, {
+      src: e.src,
+      alt: e.alt || "",
+      width: e.width,
+      height: e.height
+    });
+    return f(t);
+  },
+  /**
+   * Create a heading element with modifier support
+   */
+  heading: (e) => (t = {}) => {
+    const s = new S(
+      t,
+      `h${e}`,
+      t.children ? String(t.children) : void 0
+    );
+    return f(s);
+  }
+}, ct = w.heading(1), ht = w.heading(2), dt = w.heading(3), pt = w.heading(4), ft = w.heading(5), ut = w.heading(6);
+var Q = Object.defineProperty, tt = (e, t, s) => t in e ? Q(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, l = (e, t, s) => tt(e, typeof t != "symbol" ? t + "" : t, s);
+class et {
+  constructor(t) {
+    this.props = t, l(this, "type", "component"), l(this, "id"), l(this, "mounted", !1), l(this, "cleanup", []), l(this, "scrollElement", null), l(this, "contentOffsetSignal"), l(this, "setContentOffset"), l(this, "contentSizeSignal"), l(this, "setContentSize"), l(this, "setIsScrolling"), l(this, "pullToRefreshStateSignal"), l(this, "setPullToRefreshState"), l(this, "scrollEventThrottle"), l(this, "lastScrollTime", 0), l(this, "scrollVelocity", { x: 0, y: 0 }), l(this, "lastScrollOffset", { x: 0, y: 0 }), l(this, "pullStartY", 0), l(this, "isPulling", !1), l(this, "handleScroll", (h) => {
+      if (!this.scrollElement) return;
+      const g = performance.now(), a = g - this.lastScrollTime;
+      if (a < this.scrollEventThrottle) return;
+      const d = {
+        x: this.scrollElement.scrollLeft,
+        y: this.scrollElement.scrollTop
+      };
+      this.scrollVelocity = this.calculateVelocity(d, a), this.setContentOffset(d), this.setContentSize({
+        width: this.scrollElement.scrollWidth,
+        height: this.scrollElement.scrollHeight
+      });
+      const c = this.detectScrollEdges(), T = {
+        offset: d,
+        velocity: this.scrollVelocity,
+        contentSize: {
+          width: this.scrollElement.scrollWidth,
+          height: this.scrollElement.scrollHeight
+        },
+        containerSize: {
+          width: this.scrollElement.clientWidth,
+          height: this.scrollElement.clientHeight
+        },
+        edges: c
+      };
+      this.props.onScroll && this.props.onScroll(T), c.top && this.props.onReachTop && this.props.onReachTop(), c.bottom && this.props.onReachBottom && this.props.onReachBottom(), c.left && this.props.onReachLeft && this.props.onReachLeft(), c.right && this.props.onReachRight && this.props.onReachRight(), this.lastScrollOffset = d, this.lastScrollTime = g;
+    }), l(this, "handleScrollStart", () => {
+      this.setIsScrolling(!0), this.props.onScrollBegin && this.props.onScrollBegin();
+    }), l(this, "handleScrollEnd", () => {
+      this.setIsScrolling(!1), this.props.onScrollEnd && this.props.onScrollEnd();
+    }), l(this, "handleTouchStart", (h) => {
+      this.props.refreshControl?.enabled && (this.pullStartY = h.touches[0].clientY, this.isPulling = !1);
+    }), l(this, "handleTouchMove", (h) => {
+      if (!this.props.refreshControl?.enabled || !this.scrollElement) return;
+      const a = h.touches[0].clientY - this.pullStartY, d = this.props.refreshControl.threshold || 80;
+      this.scrollElement.scrollTop <= 0 && a > 0 && (this.isPulling = !0, a > d ? this.setPullToRefreshState("ready") : this.setPullToRefreshState("pulling"));
+    }), l(this, "handleTouchEnd", async () => {
+      if (!this.props.refreshControl?.enabled || !this.isPulling) return;
+      if (this.pullToRefreshStateSignal() === "ready") {
+        this.setPullToRefreshState("refreshing");
+        try {
+          await this.props.refreshControl.onRefresh();
+        } catch (g) {
+          console.error("Pull to refresh error:", g);
+        } finally {
+          this.setPullToRefreshState("idle");
+        }
+      } else
+        this.setPullToRefreshState("idle");
+      this.isPulling = !1;
+    }), this.id = `scrollview-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, this.scrollEventThrottle = t.scrollEventThrottle || 16;
+    const [s, o] = E(
+      { x: 0, y: 0 }
+    );
+    this.contentOffsetSignal = s, this.setContentOffset = o;
+    const [i, r] = E({
+      width: 0,
+      height: 0
+    });
+    this.contentSizeSignal = i, this.setContentSize = r;
+    const [, n] = E(!1);
+    this.setIsScrolling = n;
+    const [p, u] = E("idle");
+    if (this.pullToRefreshStateSignal = p, this.setPullToRefreshState = u, t.contentOffset && b(t.contentOffset)) {
+      this.setContentOffset(t.contentOffset());
+      const h = y(() => {
+        t.contentOffset && b(t.contentOffset) && this.setContentOffset(t.contentOffset());
+      });
+      this.cleanup.push(() => h.dispose());
+    }
+    if (t.contentSize && b(t.contentSize)) {
+      this.setContentSize(t.contentSize());
+      const h = y(() => {
+        t.contentSize && b(t.contentSize) && this.setContentSize(t.contentSize());
+      });
+      this.cleanup.push(() => h.dispose());
+    }
+  }
+  /**
+   * Calculate scroll velocity
+   */
+  calculateVelocity(t, s) {
+    const o = t.x - this.lastScrollOffset.x, i = t.y - this.lastScrollOffset.y;
+    return {
+      x: s > 0 ? o / s : 0,
+      y: s > 0 ? i / s : 0
+    };
+  }
+  /**
+   * Detect scroll edges
+   */
+  detectScrollEdges() {
+    if (!this.scrollElement)
+      return { top: !1, bottom: !1, left: !1, right: !1 };
+    const {
+      scrollTop: t,
+      scrollLeft: s,
+      scrollHeight: o,
+      scrollWidth: i,
+      clientHeight: r,
+      clientWidth: n
+    } = this.scrollElement;
+    return {
+      top: t <= 0,
+      bottom: t + r >= o - 1,
+      left: s <= 0,
+      right: s + n >= i - 1
+    };
+  }
+  /**
+   * Set up scroll event handlers
+   */
+  setupScrollHandlers(t) {
+    let s;
+    const o = () => {
+      clearTimeout(s), this.handleScrollStart();
+    }, i = () => {
+      clearTimeout(s), s = setTimeout(() => {
+        this.handleScrollEnd();
+      }, 150);
+    }, r = (n) => {
+      o(), this.handleScroll(n), i();
+    };
+    t.addEventListener("scroll", r, { passive: !0 }), t.addEventListener("touchstart", this.handleTouchStart, {
+      passive: !0
+    }), t.addEventListener("touchmove", this.handleTouchMove, {
+      passive: !1
+    }), t.addEventListener("touchend", this.handleTouchEnd, { passive: !0 }), this.cleanup.push(() => {
+      t.removeEventListener("scroll", r), t.removeEventListener("touchstart", this.handleTouchStart), t.removeEventListener("touchmove", this.handleTouchMove), t.removeEventListener("touchend", this.handleTouchEnd), clearTimeout(s);
+    });
+  }
+  /**
+   * Get overflow styles based on direction
+   */
+  getOverflowStyles(t) {
+    switch (t) {
+      case "vertical":
+        return {
+          overflowX: "hidden",
+          overflowY: "auto"
+        };
+      case "horizontal":
+        return {
+          overflowX: "auto",
+          overflowY: "hidden"
+        };
+      case "both":
+        return {
+          overflow: "auto"
+        };
+      default:
+        return {
+          overflowX: "hidden",
+          overflowY: "auto"
+        };
+    }
+  }
+  /**
+   * Apply additional scroll view styling (position and overflow already set in initial render)
+   */
+  applyScrollViewStyles(t) {
+    const { showsScrollIndicator: s = !0, bounces: o = !0 } = this.props;
+    if (!s) {
+      t.style.scrollbarWidth = "none", t.style.msOverflowStyle = "none";
+      const i = document.createElement("style");
+      i.textContent = `
+        #${t.id}::-webkit-scrollbar {
+          display: none;
+        }
+      `, document.head.appendChild(i), this.cleanup.push(() => {
+        document.head.removeChild(i);
+      });
+    }
+    o ? t.style.webkitOverflowScrolling = "touch" : t.style.overscrollBehavior = "none", t.style.scrollBehavior = "smooth";
+  }
+  /**
+   * Apply content insets
+   */
+  applyContentInsets(t) {
+    const { contentInset: s } = this.props;
+    if (s) {
+      const { top: o = 0, bottom: i = 0, left: r = 0, right: n = 0 } = s;
+      t.style.padding = `${o}px ${n}px ${i}px ${r}px`;
+    }
+  }
+  /**
+   * Create pull to refresh indicator
+   */
+  createPullToRefreshIndicator() {
+    if (!this.props.refreshControl?.enabled) return null;
+    const t = this.pullToRefreshStateSignal(), s = this.props.refreshControl.tintColor || "#007AFF";
+    let o = "";
+    switch (t) {
+      case "pulling":
+        o = "↓ Pull to refresh";
+        break;
+      case "ready":
+        o = "↑ Release to refresh";
+        break;
+      case "refreshing":
+        o = "⟳ Refreshing...";
+        break;
+      default:
+        o = "";
+    }
+    return o ? {
+      type: "component",
+      id: `${this.id}-refresh`,
+      mounted: !1,
+      cleanup: [],
+      props: {},
+      render: () => [
+        v(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "-60px",
+              left: "50%",
+              transform: "translateX(-50%)",
+              padding: "10px 20px",
+              backgroundColor: "#f8f9fa",
+              borderRadius: "20px",
+              color: s,
+              fontSize: "14px",
+              fontWeight: "500",
+              textAlign: "center",
+              zIndex: 1e3,
+              transition: "all 0.3s ease",
+              opacity: t === "idle" ? 0 : 1
+            }
+          },
+          o
+        )
+      ]
+    } : null;
+  }
+  /**
+   * Scroll to specific position
+   */
+  scrollTo(t, s = "smooth") {
+    if (!this.scrollElement) return;
+    const o = { behavior: s };
+    t.x !== void 0 && (o.left = t.x), t.y !== void 0 && (o.top = t.y), this.scrollElement.scrollTo(o);
+  }
+  /**
+   * Scroll to top
+   */
+  scrollToTop(t = "smooth") {
+    this.scrollTo({ x: 0, y: 0 }, t);
+  }
+  /**
+   * Scroll to bottom
+   */
+  scrollToBottom(t = "smooth") {
+    this.scrollElement && this.scrollTo(
+      {
+        x: 0,
+        y: this.scrollElement.scrollHeight - this.scrollElement.clientHeight
+      },
+      t
+    );
+  }
+  /**
+   * Render the scroll view component
+   */
+  render() {
+    const { children: t = [], scrollEnabled: s = !0 } = this.props;
+    let o = [];
+    const i = t;
+    if (typeof i == "function") {
+      const a = i();
+      o = Array.isArray(a) ? a : [];
+    } else Array.isArray(t) && (o = t);
+    const r = v(
+      "div",
+      {
+        class: "tachui-scrollview-content",
+        style: {
+          minHeight: "100%",
+          minWidth: "100%"
+        }
+      },
+      ...o.flatMap((a) => a.render())
+    ), n = this.createPullToRefreshIndicator(), p = [];
+    if (n) {
+      const a = n.render(), d = Array.isArray(a) ? a : [a];
+      p.push(...d.filter((c) => c));
+    }
+    p.push(r);
+    const { direction: u = "vertical" } = this.props, h = this.getOverflowStyles(u), g = v(
+      "div",
+      {
+        id: this.id,
+        class: "tachui-scrollview",
+        style: {
+          height: "100%",
+          width: "100%",
+          position: "relative",
+          ...h
+        }
+      },
+      ...p
+    );
+    if (g.element) {
+      const a = g.element;
+      this.scrollElement = a, this.applyScrollViewStyles(a), this.setupScrollHandlers(a), r.element && this.applyContentInsets(r.element);
+      const d = () => {
+        const c = b(s) ? s() : s;
+        a.style.overflow = c ? "auto" : "hidden", a.style.pointerEvents = c ? "auto" : "none";
+      };
+      if (b(s)) {
+        const c = y(d);
+        this.cleanup.push(() => c.dispose());
+      } else
+        d();
+      if (typeof i == "function") {
+        const c = y(() => {
+          const T = i(), W = (Array.isArray(T) ? T : []).flatMap((C) => C.render());
+          if (r.element) {
+            const C = r.element;
+            C.innerHTML = "", W.forEach((O) => {
+              O && O.element && C.appendChild(O.element);
+            });
+          }
+        });
+        this.cleanup.push(() => c.dispose());
+      }
+    }
+    return [g];
+  }
+}
+function _(e = {}) {
+  const t = new et(e);
+  return f(t);
+}
+const gt = {
+  /**
+   * Create a scroll view with pull to refresh
+   */
+  withRefresh(e, t, s = {}) {
+    return _({
+      children: e,
+      refreshControl: {
+        enabled: !0,
+        onRefresh: t,
+        ...s
+      }
+    });
+  },
+  /**
+   * Create a horizontal scroll view
+   */
+  horizontal(e, t = {}) {
+    return _({
+      ...t,
+      children: e,
+      direction: "horizontal"
+    });
+  },
+  /**
+   * Create a paged scroll view
+   */
+  paged(e, t = {}) {
+    return _({
+      ...t,
+      children: e,
+      pagingEnabled: !0
+    });
+  }
+};
+export {
+  J as E,
+  w as H,
+  P as I,
+  _ as S,
+  nt as a,
+  lt as b,
+  at as c,
+  ct as d,
+  ht as e,
+  dt as f,
+  pt as g,
+  ft as h,
+  ut as i,
+  et as j,
+  gt as k
+};