@tachui/core 0.7.1-alpha → 0.8.0-alpha

package/dist/ScrollView-h-6wYMAm.js

@@ -1,515 +0,0 @@
-import { i as m, a as v } from "./scheduler-7SvC3a21.js";
-import { c as E } from "./effect-CytAc9em.js";
-import { aa as w } from "./Spacer-BbteDQ9I.js";
-import "./context--zQFIImS.js";
-import "./dom-bridge-Cx-s6Ihx.js";
-import { dR as T } from "./concatenated-component-DPcl2TEO.js";
-var C = Object.defineProperty, R = (s, t, e) => t in s ? C(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e, y = (s, t, e) => R(s, typeof t != "symbol" ? t + "" : t, e);
-const a = {
-  colors: {
-    default: "#E5E5E5",
-    light: "#F0F0F0",
-    medium: "#D1D1D1",
-    heavy: "#A0A0A0"
-  },
-  thickness: {
-    thin: 1,
-    medium: 2,
-    thick: 3
-  },
-  spacing: {
-    small: 8,
-    medium: 16,
-    large: 24
-  }
-};
-class O {
-  constructor(t) {
-    y(this, "type", "component"), y(this, "id"), y(this, "props"), y(this, "theme", a), this.props = t, this.id = `divider-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-  }
-  resolveValue(t) {
-    return m(t) ? t() : t;
-  }
-  getBaseStyles() {
-    const t = this.props.orientation === "vertical", e = this.resolveValue(this.props.thickness ?? this.theme.thickness.thin), o = this.resolveValue(this.props.color ?? this.theme.colors.default), l = this.props.style ?? "solid", c = this.resolveValue(this.props.opacity ?? 1), h = this.resolveValue(this.props.margin ?? this.theme.spacing.medium), p = this.resolveValue(this.props.length), n = {
-      border: "none",
-      margin: "0",
-      padding: "0",
-      backgroundColor: o,
-      opacity: String(c),
-      flexShrink: "0"
-    };
-    return t ? (n.width = `${e}px`, n.height = p ? typeof p == "string" ? p : `${p}px` : "100%", n.marginLeft = `${h}px`, n.marginRight = `${h}px`, n.alignSelf = "stretch") : (n.height = `${e}px`, n.width = p ? typeof p == "string" ? p : `${p}px` : "100%", n.marginTop = `${h}px`, n.marginBottom = `${h}px`), (l === "dashed" || l === "dotted") && (n.backgroundColor = "transparent", t ? n.borderRight = `${e}px ${l} ${o}` : n.borderTop = `${e}px ${l} ${o}`), n;
-  }
-  render() {
-    const t = T("div", {
-      role: "separator",
-      "aria-orientation": this.props.orientation ?? "horizontal",
-      style: this.getBaseStyles()
-    });
-    return ["color", "thickness", "length", "margin", "opacity"].forEach((o) => {
-      const l = this.props[o];
-      m(l) && E(() => {
-        const c = this.getBaseStyles(), h = t.element;
-        h && Object.assign(h.style, c);
-      });
-    }), t.getAttribute = (o) => {
-      const l = t.props?.[o];
-      return l == null ? null : String(l);
-    }, t.setAttribute = (o, l) => {
-      t.props || (t.props = {}), t.props[o] = l;
-    }, t;
-  }
-}
-function u(s = {}) {
-  return w(new O(s));
-}
-const B = {
-  /**
-   * Create a thin horizontal divider
-   */
-  thin(s) {
-    return u({
-      thickness: a.thickness.thin,
-      color: s
-    });
-  },
-  /**
-   * Create a medium horizontal divider
-   */
-  medium(s) {
-    return u({
-      thickness: a.thickness.medium,
-      color: s
-    });
-  },
-  /**
-   * Create a thick horizontal divider
-   */
-  thick(s) {
-    return u({
-      thickness: a.thickness.thick,
-      color: s
-    });
-  },
-  /**
-   * Create a vertical divider
-   */
-  vertical(s, t) {
-    return u({
-      orientation: "vertical",
-      length: s,
-      thickness: t
-    });
-  },
-  /**
-   * Create a dashed divider
-   */
-  dashed(s, t) {
-    return u({
-      style: "dashed",
-      color: s,
-      thickness: t
-    });
-  },
-  /**
-   * Create a dotted divider
-   */
-  dotted(s, t) {
-    return u({
-      style: "dotted",
-      color: s,
-      thickness: t
-    });
-  },
-  /**
-   * Create a subtle divider with light color
-   */
-  subtle() {
-    return u({
-      color: a.colors.light,
-      opacity: 0.6
-    });
-  },
-  /**
-   * Create a prominent divider with heavier color
-   */
-  prominent() {
-    return u({
-      color: a.colors.heavy,
-      thickness: a.thickness.medium
-    });
-  }
-}, D = {
-  theme: a,
-  /**
-   * Create a custom divider theme
-   */
-  createTheme(s) {
-    return {
-      colors: { ...a.colors, ...s.colors },
-      thickness: { ...a.thickness, ...s.thickness },
-      spacing: { ...a.spacing, ...s.spacing }
-    };
-  },
-  /**
-   * Preset color schemes
-   */
-  colors: {
-    light: a.colors.light,
-    medium: a.colors.medium,
-    heavy: a.colors.heavy,
-    primary: "#007AFF",
-    success: "#34C759",
-    warning: "#FF9500",
-    danger: "#FF3B30"
-  }
-};
-var $ = Object.defineProperty, P = (s, t, e) => t in s ? $(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e, i = (s, t, e) => P(s, typeof t != "symbol" ? t + "" : t, e);
-class z {
-  constructor(t) {
-    this.props = t, i(this, "type", "component"), i(this, "id"), i(this, "mounted", !1), i(this, "cleanup", []), i(this, "scrollElement", null), i(this, "contentOffsetSignal"), i(this, "setContentOffset"), i(this, "contentSizeSignal"), i(this, "setContentSize"), i(this, "setIsScrolling"), i(this, "pullToRefreshStateSignal"), i(this, "setPullToRefreshState"), i(this, "scrollEventThrottle"), i(this, "lastScrollTime", 0), i(this, "scrollVelocity", { x: 0, y: 0 }), i(this, "lastScrollOffset", { x: 0, y: 0 }), i(this, "pullStartY", 0), i(this, "isPulling", !1), i(this, "handleScroll", (r) => {
-      if (!this.scrollElement) return;
-      const f = performance.now(), d = f - this.lastScrollTime;
-      if (d < this.scrollEventThrottle) return;
-      const S = {
-        x: this.scrollElement.scrollLeft,
-        y: this.scrollElement.scrollTop
-      };
-      this.scrollVelocity = this.calculateVelocity(S, d), this.setContentOffset(S), this.setContentSize({
-        width: this.scrollElement.scrollWidth,
-        height: this.scrollElement.scrollHeight
-      });
-      const g = this.detectScrollEdges(), x = {
-        offset: S,
-        velocity: this.scrollVelocity,
-        contentSize: {
-          width: this.scrollElement.scrollWidth,
-          height: this.scrollElement.scrollHeight
-        },
-        containerSize: {
-          width: this.scrollElement.clientWidth,
-          height: this.scrollElement.clientHeight
-        },
-        edges: g
-      };
-      this.props.onScroll && this.props.onScroll(x), g.top && this.props.onReachTop && this.props.onReachTop(), g.bottom && this.props.onReachBottom && this.props.onReachBottom(), g.left && this.props.onReachLeft && this.props.onReachLeft(), g.right && this.props.onReachRight && this.props.onReachRight(), this.lastScrollOffset = S, this.lastScrollTime = f;
-    }), i(this, "handleScrollStart", () => {
-      this.setIsScrolling(!0), this.props.onScrollBegin && this.props.onScrollBegin();
-    }), i(this, "handleScrollEnd", () => {
-      this.setIsScrolling(!1), this.props.onScrollEnd && this.props.onScrollEnd();
-    }), i(this, "handleTouchStart", (r) => {
-      this.props.refreshControl?.enabled && (this.pullStartY = r.touches[0].clientY, this.isPulling = !1);
-    }), i(this, "handleTouchMove", (r) => {
-      if (!this.props.refreshControl?.enabled || !this.scrollElement) return;
-      const d = r.touches[0].clientY - this.pullStartY, S = this.props.refreshControl.threshold || 80;
-      this.scrollElement.scrollTop <= 0 && d > 0 && (this.isPulling = !0, d > S ? this.setPullToRefreshState("ready") : this.setPullToRefreshState("pulling"));
-    }), i(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 (f) {
-          console.error("Pull to refresh error:", f);
-        } 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 [e, o] = v({ x: 0, y: 0 });
-    this.contentOffsetSignal = e, this.setContentOffset = o;
-    const [l, c] = v({ width: 0, height: 0 });
-    this.contentSizeSignal = l, this.setContentSize = c;
-    const [, h] = v(!1);
-    this.setIsScrolling = h;
-    const [p, n] = v("idle");
-    if (this.pullToRefreshStateSignal = p, this.setPullToRefreshState = n, t.contentOffset && m(t.contentOffset)) {
-      this.setContentOffset(t.contentOffset());
-      const r = E(() => {
-        t.contentOffset && m(t.contentOffset) && this.setContentOffset(t.contentOffset());
-      });
-      this.cleanup.push(() => r.dispose());
-    }
-    if (t.contentSize && m(t.contentSize)) {
-      this.setContentSize(t.contentSize());
-      const r = E(() => {
-        t.contentSize && m(t.contentSize) && this.setContentSize(t.contentSize());
-      });
-      this.cleanup.push(() => r.dispose());
-    }
-  }
-  /**
-   * Calculate scroll velocity
-   */
-  calculateVelocity(t, e) {
-    const o = t.x - this.lastScrollOffset.x, l = t.y - this.lastScrollOffset.y;
-    return {
-      x: e > 0 ? o / e : 0,
-      y: e > 0 ? l / e : 0
-    };
-  }
-  /**
-   * Detect scroll edges
-   */
-  detectScrollEdges() {
-    if (!this.scrollElement)
-      return { top: !1, bottom: !1, left: !1, right: !1 };
-    const { scrollTop: t, scrollLeft: e, scrollHeight: o, scrollWidth: l, clientHeight: c, clientWidth: h } = this.scrollElement;
-    return {
-      top: t <= 0,
-      bottom: t + c >= o - 1,
-      left: e <= 0,
-      right: e + h >= l - 1
-    };
-  }
-  /**
-   * Set up scroll event handlers
-   */
-  setupScrollHandlers(t) {
-    let e;
-    const o = () => {
-      clearTimeout(e), this.handleScrollStart();
-    }, l = () => {
-      clearTimeout(e), e = setTimeout(() => {
-        this.handleScrollEnd();
-      }, 150);
-    }, c = (h) => {
-      o(), this.handleScroll(h), l();
-    };
-    t.addEventListener("scroll", c, { 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", c), t.removeEventListener("touchstart", this.handleTouchStart), t.removeEventListener("touchmove", this.handleTouchMove), t.removeEventListener("touchend", this.handleTouchEnd), clearTimeout(e);
-    });
-  }
-  /**
-   * 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: e = !0, bounces: o = !0 } = this.props;
-    if (!e) {
-      t.style.scrollbarWidth = "none", t.style.msOverflowStyle = "none";
-      const l = document.createElement("style");
-      l.textContent = `
-        #${t.id}::-webkit-scrollbar {
-          display: none;
-        }
-      `, document.head.appendChild(l), this.cleanup.push(() => {
-        document.head.removeChild(l);
-      });
-    }
-    o ? t.style.webkitOverflowScrolling = "touch" : t.style.overscrollBehavior = "none", t.style.scrollBehavior = "smooth";
-  }
-  /**
-   * Apply content insets
-   */
-  applyContentInsets(t) {
-    const { contentInset: e } = this.props;
-    if (e) {
-      const { top: o = 0, bottom: l = 0, left: c = 0, right: h = 0 } = e;
-      t.style.padding = `${o}px ${h}px ${l}px ${c}px`;
-    }
-  }
-  /**
-   * Create pull to refresh indicator
-   */
-  createPullToRefreshIndicator() {
-    if (!this.props.refreshControl?.enabled) return null;
-    const t = this.pullToRefreshStateSignal(), e = 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: () => [
-        T(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              top: "-60px",
-              left: "50%",
-              transform: "translateX(-50%)",
-              padding: "10px 20px",
-              backgroundColor: "#f8f9fa",
-              borderRadius: "20px",
-              color: e,
-              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, e = "smooth") {
-    if (!this.scrollElement) return;
-    const o = { behavior: e };
-    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: e = !0 } = this.props, o = T(
-      "div",
-      {
-        class: "tachui-scrollview-content",
-        style: {
-          minHeight: "100%",
-          minWidth: "100%"
-        }
-      },
-      ...t.flatMap((r) => r.render())
-    ), l = this.createPullToRefreshIndicator(), c = [];
-    if (l) {
-      const r = l.render(), f = Array.isArray(r) ? r : [r];
-      c.push(...f.filter((d) => d));
-    }
-    c.push(o);
-    const { direction: h = "vertical" } = this.props, p = this.getOverflowStyles(h), n = T(
-      "div",
-      {
-        id: this.id,
-        class: "tachui-scrollview",
-        style: {
-          height: "100%",
-          width: "100%",
-          position: "relative",
-          ...p
-        }
-      },
-      ...c
-    );
-    if (n.element) {
-      const r = n.element;
-      this.scrollElement = r, this.applyScrollViewStyles(r), this.setupScrollHandlers(r), o.element && this.applyContentInsets(o.element);
-      const f = () => {
-        const d = m(e) ? e() : e;
-        r.style.overflow = d ? "auto" : "hidden", r.style.pointerEvents = d ? "auto" : "none";
-      };
-      if (m(e)) {
-        const d = E(f);
-        this.cleanup.push(() => d.dispose());
-      } else
-        f();
-    }
-    return [n];
-  }
-}
-function b(s = {}) {
-  const t = new z(s);
-  return w(t);
-}
-const Y = {
-  /**
-   * Create a scroll view with pull to refresh
-   */
-  withRefresh(s, t, e = {}) {
-    return b({
-      children: s,
-      refreshControl: {
-        enabled: !0,
-        onRefresh: t,
-        ...e
-      }
-    });
-  },
-  /**
-   * Create a horizontal scroll view
-   */
-  horizontal(s, t = {}) {
-    return b({
-      ...t,
-      children: s,
-      direction: "horizontal"
-    });
-  },
-  /**
-   * Create a paged scroll view
-   */
-  paged(s, t = {}) {
-    return b({
-      ...t,
-      children: s,
-      pagingEnabled: !0
-    });
-  }
-};
-export {
-  u as D,
-  z as E,
-  b as S,
-  D as a,
-  B as b,
-  Y as c,
-  a as d
-};