@tachui/primitives 0.8.15 → 0.8.17

package/dist/ScrollView-CC8g8Lq2.js

@@ -1,719 +0,0 @@
-import { withModifiers as f, ComponentWithCSSClasses as z, processElementOverride as H, createSignal as E, useLifecycle as $, registerComponentWithLifecycleHooks as M, h as S, createEffect as b, ConcatenatedComponent as O, text as W, isSignal as v } from "@tachui/core";
-import { aspectRatio as x } from "@tachui/modifiers";
-var Y = Object.defineProperty, V = (e, t, s) => t in e ? Y(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, g = (e, t, s) => V(e, typeof t != "symbol" ? t + "" : t, s);
-function L(e) {
-  return typeof e == "object" && e !== null && typeof e.resolve == "function";
-}
-function D(e) {
-  return e && (L(e) ? e.resolve() : e);
-}
-class F extends z {
-  constructor(t) {
-    super(), this.props = t, g(this, "type", "component"), g(this, "id"), g(this, "mounted", !1), g(this, "cleanup", []), g(this, "effectiveTag"), g(this, "validationResult"), g(this, "loadingStateSignal"), g(this, "setLoadingState"), this.id = `image-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    const s = H("Image", "img", this.props.element);
-    this.effectiveTag = s.tag, this.validationResult = s.validation;
-    const n = this.props.src ? "idle" : "error", [o, i] = E(n);
-    this.loadingStateSignal = o, this.setLoadingState = i, $(this, {
-      onDOMReady: (l, u) => {
-        L(this.props.src) && u instanceof HTMLImageElement && this.setupImageAssetReactivityForDOMElement(
-          this.props.src,
-          u
-        );
-      }
-    }), M(this);
-  }
-  /**
-   * Set loading state and notify callback
-   */
-  setLoadingStateWithCallback(t) {
-    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 [S("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 [S("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 = D(this.props.src), n = ["tachui-image"], o = this.createClassString(this.props, n), i = S(this.effectiveTag, {
-      className: o,
-      src: s,
-      // 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 i.componentMetadata = {
-      id: this.id,
-      type: "Image",
-      originalType: "Image",
-      overriddenTo: this.effectiveTag !== "img" ? this.effectiveTag : void 0,
-      validationResult: this.validationResult
-    }, [i];
-  }
-  /**
-   * Set up ImageAsset reactivity for a real DOM element (called from onDOMReady)
-   */
-  setupImageAssetReactivityForDOMElement(t, s) {
-    const n = b(() => {
-      const o = t.resolve();
-      s.src = o, this.setLoadingStateWithCallback("loading");
-    });
-    this.cleanup.push(() => n.dispose());
-  }
-  // ============================================================================
-  // Concatenation Support (Phase 3.1)
-  // ============================================================================
-  /**
-   * Concatenate this image with another concatenatable component
-   */
-  concat(t) {
-    const s = this.toSegment(), n = t.toSegment(), o = {
-      totalSegments: t instanceof O ? t.segments.length + 1 : 2,
-      accessibilityRole: t instanceof O ? this.mergeAccessibilityRoles(
-        "group",
-        t.metadata.accessibilityRole
-      ) : this.determineAccessibilityRole(t),
-      semanticStructure: "inline"
-      // Images are typically inline in concatenation
-    };
-    return new O([s, n], o);
-  }
-  /**
-   * 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 I(e, t = {}) {
-  const s = { ...t, src: e }, n = new F(s), o = f(n), i = (l) => {
-    if (l && Array.isArray(l.modifiers))
-      return l;
-    if (l?._modifiableComponent && Array.isArray(l._modifiableComponent.modifiers))
-      return l._modifiableComponent;
-    if (Array.isArray(o?.modifiers))
-      return o;
-    if (o?._modifiableComponent && Array.isArray(o._modifiableComponent.modifiers))
-      return o._modifiableComponent;
-    throw new Error("Image shorthand target is not modifiable");
-  };
-  return o.scaledToFit = function() {
-    return i(this).modifiers.push(x(void 0, "fit")), o;
-  }, o.scaledToFill = function() {
-    return i(this).modifiers.push(x(void 0, "fill")), o;
-  }, o;
-}
-const J = {
-  idle: "idle",
-  loading: "loading",
-  loaded: "loaded",
-  error: "error"
-}, K = {
-  fit: "fit",
-  fill: "fill",
-  stretch: "stretch",
-  center: "center",
-  scaleDown: "scaleDown"
-}, Z = {
-  /**
-   * Create a responsive image with multiple sources
-   */
-  responsive(e, t, s = {}) {
-    const n = e.map((o) => {
-      const i = [o.src];
-      return o.width && i.push(`${o.width}w`), i.join(" ");
-    }).join(", ");
-    return I(t, { ...s, srcSet: n });
-  },
-  /**
-   * Create an image with progressive loading
-   */
-  progressive(e, t, s = {}) {
-    return I(e, {
-      ...s,
-      lowQualitySrc: e,
-      highQualitySrc: t
-    });
-  },
-  /**
-   * Create an image with loading placeholder
-   */
-  withPlaceholder(e, t, s = {}) {
-    return I(e, {
-      ...s,
-      placeholder: t
-    });
-  }
-};
-var B = Object.defineProperty, N = (e, t, s) => t in e ? B(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, C = (e, t, s) => N(e, typeof t != "symbol" ? t + "" : t, s);
-class m {
-  constructor(t, s, n, o = {}) {
-    this.props = t, this.tag = s, this.content = n, this.attributes = o, C(this, "type", "component"), C(this, "id"), C(this, "mounted", !1), C(this, "cleanup", []), this.id = `element-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-  }
-  render() {
-    return [
-      S(this.tag, this.attributes, this.content ? W(this.content) : "")
-    ];
-  }
-}
-const y = {
-  /**
-   * Create a div element with modifier support
-   */
-  div: (e = {}) => {
-    const t = new m(
-      e,
-      "div",
-      e.children ? String(e.children) : void 0
-    );
-    return f(t);
-  },
-  /**
-   * Create a span element with modifier support
-   */
-  span: (e = {}) => {
-    const t = new m(
-      e,
-      "span",
-      e.children ? String(e.children) : void 0
-    );
-    return f(t);
-  },
-  /**
-   * Create an anchor element with modifier support
-   */
-  a: (e = {}) => {
-    const t = new m(
-      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 m(
-      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 m(
-      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 m(e, "input", void 0, {
-      type: e.type || "text",
-      value: e.value || "",
-      placeholder: e.placeholder || "",
-      oninput: (s) => {
-        const n = s.target;
-        e.onChange?.(n.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 m(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 m(
-      t,
-      `h${e}`,
-      t.children ? String(t.children) : void 0
-    );
-    return f(s);
-  }
-}, Q = y.heading(1), tt = y.heading(2), et = y.heading(3), st = y.heading(4), ot = y.heading(5), nt = y.heading(6);
-var X = Object.defineProperty, k = (e, t, s) => t in e ? X(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, r = (e, t, s) => k(e, typeof t != "symbol" ? t + "" : t, s);
-class j {
-  constructor(t) {
-    this.props = t, r(this, "type", "component"), r(this, "id"), r(this, "mounted", !1), r(this, "cleanup", []), r(this, "scrollElement", null), r(this, "contentOffsetSignal"), r(this, "setContentOffset"), r(this, "contentSizeSignal"), r(this, "setContentSize"), r(this, "setIsScrolling"), r(this, "pullToRefreshStateSignal"), r(this, "setPullToRefreshState"), r(this, "scrollEventThrottle"), r(this, "lastScrollTime", 0), r(this, "scrollVelocity", { x: 0, y: 0 }), r(this, "lastScrollOffset", { x: 0, y: 0 }), r(this, "pullStartY", 0), r(this, "isPulling", !1), r(this, "handleScroll", (h) => {
-      if (!this.scrollElement) return;
-      const p = performance.now(), c = p - this.lastScrollTime;
-      if (c < this.scrollEventThrottle) return;
-      const d = {
-        x: this.scrollElement.scrollLeft,
-        y: this.scrollElement.scrollTop
-      };
-      this.scrollVelocity = this.calculateVelocity(d, c), this.setContentOffset(d), this.setContentSize({
-        width: this.scrollElement.scrollWidth,
-        height: this.scrollElement.scrollHeight
-      });
-      const a = this.detectScrollEdges(), w = {
-        offset: d,
-        velocity: this.scrollVelocity,
-        contentSize: {
-          width: this.scrollElement.scrollWidth,
-          height: this.scrollElement.scrollHeight
-        },
-        containerSize: {
-          width: this.scrollElement.clientWidth,
-          height: this.scrollElement.clientHeight
-        },
-        edges: a
-      };
-      this.props.onScroll && this.props.onScroll(w), a.top && this.props.onReachTop && this.props.onReachTop(), a.bottom && this.props.onReachBottom && this.props.onReachBottom(), a.left && this.props.onReachLeft && this.props.onReachLeft(), a.right && this.props.onReachRight && this.props.onReachRight(), this.lastScrollOffset = d, this.lastScrollTime = p;
-    }), r(this, "handleScrollStart", () => {
-      this.setIsScrolling(!0), this.props.onScrollBegin && this.props.onScrollBegin();
-    }), r(this, "handleScrollEnd", () => {
-      this.setIsScrolling(!1), this.props.onScrollEnd && this.props.onScrollEnd();
-    }), r(this, "handleTouchStart", (h) => {
-      this.props.refreshControl?.enabled && (this.pullStartY = h.touches[0].clientY, this.isPulling = !1);
-    }), r(this, "handleTouchMove", (h) => {
-      if (!this.props.refreshControl?.enabled || !this.scrollElement) return;
-      const c = h.touches[0].clientY - this.pullStartY, d = this.props.refreshControl.threshold || 80;
-      this.scrollElement.scrollTop <= 0 && c > 0 && (this.isPulling = !0, c > d ? this.setPullToRefreshState("ready") : this.setPullToRefreshState("pulling"));
-    }), r(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 (p) {
-          console.error("Pull to refresh error:", p);
-        } 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, n] = E(
-      { x: 0, y: 0 }
-    );
-    this.contentOffsetSignal = s, this.setContentOffset = n;
-    const [o, i] = E({
-      width: 0,
-      height: 0
-    });
-    this.contentSizeSignal = o, this.setContentSize = i;
-    const [, l] = E(!1);
-    this.setIsScrolling = l;
-    const [u, R] = E("idle");
-    if (this.pullToRefreshStateSignal = u, this.setPullToRefreshState = R, t.contentOffset && v(t.contentOffset)) {
-      this.setContentOffset(t.contentOffset());
-      const h = b(() => {
-        t.contentOffset && v(t.contentOffset) && this.setContentOffset(t.contentOffset());
-      });
-      this.cleanup.push(() => h.dispose());
-    }
-    if (t.contentSize && v(t.contentSize)) {
-      this.setContentSize(t.contentSize());
-      const h = b(() => {
-        t.contentSize && v(t.contentSize) && this.setContentSize(t.contentSize());
-      });
-      this.cleanup.push(() => h.dispose());
-    }
-  }
-  /**
-   * Calculate scroll velocity
-   */
-  calculateVelocity(t, s) {
-    const n = t.x - this.lastScrollOffset.x, o = t.y - this.lastScrollOffset.y;
-    return {
-      x: s > 0 ? n / s : 0,
-      y: s > 0 ? o / s : 0
-    };
-  }
-  /**
-   * Detect scroll edges
-   */
-  detectScrollEdges() {
-    if (!this.scrollElement)
-      return { top: !1, bottom: !1, left: !1, right: !1 };
-    const {
-      scrollTop: t,
-      scrollLeft: s,
-      scrollHeight: n,
-      scrollWidth: o,
-      clientHeight: i,
-      clientWidth: l
-    } = this.scrollElement;
-    return {
-      top: t <= 0,
-      bottom: t + i >= n - 1,
-      left: s <= 0,
-      right: s + l >= o - 1
-    };
-  }
-  /**
-   * Set up scroll event handlers
-   */
-  setupScrollHandlers(t) {
-    let s;
-    const n = () => {
-      clearTimeout(s), this.handleScrollStart();
-    }, o = () => {
-      clearTimeout(s), s = setTimeout(() => {
-        this.handleScrollEnd();
-      }, 150);
-    }, i = (l) => {
-      n(), this.handleScroll(l), o();
-    };
-    t.addEventListener("scroll", i, { 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", i), 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: n = !0 } = this.props;
-    if (!s) {
-      t.style.scrollbarWidth = "none", t.style.msOverflowStyle = "none";
-      const o = document.createElement("style");
-      o.textContent = `
-        #${t.id}::-webkit-scrollbar {
-          display: none;
-        }
-      `, document.head.appendChild(o), this.cleanup.push(() => {
-        document.head.removeChild(o);
-      });
-    }
-    n ? 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: n = 0, bottom: o = 0, left: i = 0, right: l = 0 } = s;
-      t.style.padding = `${n}px ${l}px ${o}px ${i}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 n = "";
-    switch (t) {
-      case "pulling":
-        n = "↓ Pull to refresh";
-        break;
-      case "ready":
-        n = "↑ Release to refresh";
-        break;
-      case "refreshing":
-        n = "⟳ Refreshing...";
-        break;
-      default:
-        n = "";
-    }
-    return n ? {
-      type: "component",
-      id: `${this.id}-refresh`,
-      mounted: !1,
-      cleanup: [],
-      props: {},
-      render: () => [
-        S(
-          "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
-            }
-          },
-          n
-        )
-      ]
-    } : null;
-  }
-  /**
-   * Scroll to specific position
-   */
-  scrollTo(t, s = "smooth") {
-    if (!this.scrollElement) return;
-    const n = { behavior: s };
-    t.x !== void 0 && (n.left = t.x), t.y !== void 0 && (n.top = t.y), this.scrollElement.scrollTo(n);
-  }
-  /**
-   * 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 n = [];
-    const o = t;
-    if (typeof o == "function") {
-      const c = o();
-      n = Array.isArray(c) ? c : [];
-    } else Array.isArray(t) && (n = t);
-    const i = S(
-      "div",
-      {
-        class: "tachui-scrollview-content",
-        style: {
-          minHeight: "100%",
-          minWidth: "100%"
-        }
-      },
-      ...n.flatMap((c) => c.render())
-    ), l = this.createPullToRefreshIndicator(), u = [];
-    if (l) {
-      const c = l.render(), d = Array.isArray(c) ? c : [c];
-      u.push(...d.filter((a) => a));
-    }
-    u.push(i);
-    const { direction: R = "vertical" } = this.props, h = this.getOverflowStyles(R), p = S(
-      "div",
-      {
-        id: this.id,
-        class: "tachui-scrollview",
-        style: {
-          height: "100%",
-          width: "100%",
-          position: "relative",
-          ...h
-        }
-      },
-      ...u
-    );
-    if (p.element) {
-      const c = p.element;
-      this.scrollElement = c, this.applyScrollViewStyles(c), this.setupScrollHandlers(c), i.element && this.applyContentInsets(i.element);
-      const d = () => {
-        const a = v(s) ? s() : s;
-        c.style.overflow = a ? "auto" : "hidden", c.style.pointerEvents = a ? "auto" : "none";
-      };
-      if (v(s)) {
-        const a = b(d);
-        this.cleanup.push(() => a.dispose());
-      } else
-        d();
-      if (typeof o == "function") {
-        const a = b(() => {
-          const w = o(), _ = (Array.isArray(w) ? w : []).flatMap((T) => T.render());
-          if (i.element) {
-            const T = i.element;
-            T.innerHTML = "", _.forEach((P) => {
-              P && P.element && T.appendChild(P.element);
-            });
-          }
-        });
-        this.cleanup.push(() => a.dispose());
-      }
-    }
-    return [p];
-  }
-}
-function A(e = {}) {
-  const t = new j(e);
-  return f(t);
-}
-const it = {
-  /**
-   * Create a scroll view with pull to refresh
-   */
-  withRefresh(e, t, s = {}) {
-    return A({
-      children: e,
-      refreshControl: {
-        enabled: !0,
-        onRefresh: t,
-        ...s
-      }
-    });
-  },
-  /**
-   * Create a horizontal scroll view
-   */
-  horizontal(e, t = {}) {
-    return A({
-      ...t,
-      children: e,
-      direction: "horizontal"
-    });
-  },
-  /**
-   * Create a paged scroll view
-   */
-  paged(e, t = {}) {
-    return A({
-      ...t,
-      children: e,
-      pagingEnabled: !0
-    });
-  }
-};
-export {
-  F as E,
-  y as H,
-  I,
-  A as S,
-  J as a,
-  K as b,
-  Z as c,
-  Q as d,
-  tt as e,
-  et as f,
-  st as g,
-  ot as h,
-  nt as i,
-  j,
-  it as k
-};