@tachui/primitives 0.8.0-alpha → 0.8.5-alpha

package/dist/HTML-aWcvQ0VC.js

@@ -1,321 +0,0 @@
-import { withModifiers as a, ComponentWithCSSClasses as b, processElementOverride as w, createSignal as y, useLifecycle as C, ImageAsset as v, registerComponentWithLifecycleHooks as T, h as p, createEffect as E, ConcatenatedComponent as g, text as R } from "@tachui/core";
-import { aspectRatio as S } from "@tachui/modifiers";
-var I = Object.defineProperty, P = (t, e, i) => e in t ? I(t, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[e] = i, c = (t, e, i) => P(t, typeof e != "symbol" ? e + "" : e, i);
-class m extends b {
-  constructor(e) {
-    super(), this.props = e, c(this, "type", "component"), c(this, "id"), c(this, "mounted", !1), c(this, "cleanup", []), c(this, "effectiveTag"), c(this, "validationResult"), c(this, "loadingStateSignal"), c(this, "setLoadingState"), this.id = `image-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    const i = w("Image", "img", this.props.element);
-    this.effectiveTag = i.tag, this.validationResult = i.validation;
-    const o = this.props.src ? "idle" : "error", [n, r] = y(o);
-    this.loadingStateSignal = n, this.setLoadingState = r, C(this, {
-      onDOMReady: (s, f) => {
-        this.props.src instanceof v && f instanceof HTMLImageElement && this.setupImageAssetReactivityForDOMElement(
-          this.props.src,
-          f
-        );
-      }
-    }), T(this);
-  }
-  /**
-   * Set loading state and notify callback
-   */
-  setLoadingStateWithCallback(e) {
-    this.setLoadingState(e), this.props.onLoadingStateChange && this.props.onLoadingStateChange(e);
-  }
-  /**
-   * Render the image component with reactive content handling
-   */
-  render() {
-    const e = this.loadingStateSignal();
-    if (e === "loading" && this.props.placeholder) {
-      if (typeof this.props.placeholder == "string")
-        return [p("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 (e === "error" && this.props.errorPlaceholder) {
-      if (typeof this.props.errorPlaceholder == "string")
-        return [p("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 i = this.props.src instanceof v ? this.props.src.resolve() : this.props.src, o = ["tachui-image"], n = this.createClassString(this.props, o), r = p(this.effectiveTag, {
-      className: n,
-      src: i,
-      // 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(e, i) {
-    const o = E(() => {
-      const n = e.resolve();
-      i.src = n, this.setLoadingStateWithCallback("loading");
-    });
-    this.cleanup.push(() => o.dispose());
-  }
-  // ============================================================================
-  // Concatenation Support (Phase 3.1)
-  // ============================================================================
-  /**
-   * Concatenate this image with another concatenatable component
-   */
-  concat(e) {
-    const i = this.toSegment(), o = e.toSegment(), n = {
-      totalSegments: e instanceof g ? e.segments.length + 1 : 2,
-      accessibilityRole: e instanceof g ? this.mergeAccessibilityRoles(
-        "group",
-        e.metadata.accessibilityRole
-      ) : this.determineAccessibilityRole(e),
-      semanticStructure: "inline"
-      // Images are typically inline in concatenation
-    };
-    return new g([i, o], n);
-  }
-  /**
-   * 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 e = this.render();
-        return Array.isArray(e) ? e[0] : e;
-      }
-    };
-  }
-  /**
-   * Check if this component supports concatenation
-   */
-  isConcatenatable() {
-    return !0;
-  }
-  /**
-   * Determine accessibility role for concatenation
-   */
-  determineAccessibilityRole(e) {
-    switch (e.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(e, i) {
-    return e === "composite" || i === "composite" ? "composite" : "group";
-  }
-}
-function u(t, e = {}) {
-  const i = { ...e, src: t }, o = new m(i), n = a(o);
-  return n.scaledToFit = function() {
-    const r = new m({
-      ...i,
-      aspectRatio: void 0,
-      contentMode: "fit"
-    }), s = a(r);
-    return s.scaledToFit = n.scaledToFit, s.scaledToFill = n.scaledToFill, s.modifiers.push(S(void 0, "fit")), s;
-  }, n.scaledToFill = function() {
-    const r = new m({
-      ...i,
-      aspectRatio: void 0,
-      contentMode: "fill"
-    }), s = a(r);
-    return s.scaledToFit = n.scaledToFit, s.scaledToFill = n.scaledToFill, s.modifiers.push(S(void 0, "fill")), s;
-  }, n;
-}
-const H = {
-  idle: "idle",
-  loading: "loading",
-  loaded: "loaded",
-  error: "error"
-}, A = {
-  fit: "fit",
-  fill: "fill",
-  stretch: "stretch",
-  center: "center",
-  scaleDown: "scaleDown"
-}, $ = {
-  /**
-   * Create a responsive image with multiple sources
-   */
-  responsive(t, e, i = {}) {
-    const o = t.map((n) => {
-      const r = [n.src];
-      return n.width && r.push(`${n.width}w`), r.join(" ");
-    }).join(", ");
-    return u(e, { ...i, srcSet: o });
-  },
-  /**
-   * Create an image with progressive loading
-   */
-  progressive(t, e, i = {}) {
-    return u(t, {
-      ...i,
-      lowQualitySrc: t,
-      highQualitySrc: e
-    });
-  },
-  /**
-   * Create an image with loading placeholder
-   */
-  withPlaceholder(t, e, i = {}) {
-    return u(t, {
-      ...i,
-      placeholder: e
-    });
-  }
-};
-var F = Object.defineProperty, L = (t, e, i) => e in t ? F(t, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[e] = i, h = (t, e, i) => L(t, typeof e != "symbol" ? e + "" : e, i);
-class l {
-  constructor(e, i, o, n = {}) {
-    this.props = e, this.tag = i, this.content = o, this.attributes = n, h(this, "type", "component"), h(this, "id"), h(this, "mounted", !1), h(this, "cleanup", []), this.id = `element-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-  }
-  render() {
-    return [
-      p(this.tag, this.attributes, this.content ? R(this.content) : "")
-    ];
-  }
-}
-const d = {
-  /**
-   * Create a div element with modifier support
-   */
-  div: (t = {}) => {
-    const e = new l(
-      t,
-      "div",
-      t.children ? String(t.children) : void 0
-    );
-    return a(e);
-  },
-  /**
-   * Create a span element with modifier support
-   */
-  span: (t = {}) => {
-    const e = new l(
-      t,
-      "span",
-      t.children ? String(t.children) : void 0
-    );
-    return a(e);
-  },
-  /**
-   * Create a paragraph element with modifier support
-   */
-  p: (t = {}) => {
-    const e = new l(
-      t,
-      "p",
-      t.children ? String(t.children) : void 0
-    );
-    return a(e);
-  },
-  /**
-   * Create a button element with modifier support
-   *
-   * Note: For enhanced button features (press states, variants, accessibility),
-   * use the main Button component instead.
-   */
-  button: (t = {}) => {
-    const e = new l(
-      t,
-      "button",
-      t.children ? String(t.children) : void 0,
-      {
-        onclick: t.onClick
-      }
-    );
-    return process.env.NODE_ENV === "test" && (e.props || (e.props = {}), e.props.tabIndex = 0), a(e);
-  },
-  /**
-   * Create an input element with modifier support
-   */
-  input: (t = {}) => {
-    const e = new l(t, "input", void 0, {
-      type: t.type || "text",
-      value: t.value || "",
-      placeholder: t.placeholder || "",
-      oninput: (i) => {
-        const o = i.target;
-        t.onChange?.(o.value);
-      }
-    });
-    return a(e);
-  },
-  /**
-   * 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: (t) => {
-    const e = new l(t, "img", void 0, {
-      src: t.src,
-      alt: t.alt || "",
-      width: t.width,
-      height: t.height
-    });
-    return a(e);
-  },
-  /**
-   * Create a heading element with modifier support
-   */
-  heading: (t) => (e = {}) => {
-    const i = new l(
-      e,
-      `h${t}`,
-      e.children ? String(e.children) : void 0
-    );
-    return a(i);
-  }
-}, D = d.heading(1), O = d.heading(2), x = d.heading(3), N = d.heading(4), W = d.heading(5), j = d.heading(6);
-export {
-  m as E,
-  d as H,
-  u as I,
-  H as a,
-  A as b,
-  $ as c,
-  D as d,
-  O as e,
-  x as f,
-  N as g,
-  W as h,
-  j as i
-};

package/dist/Text-DYyFBJ6i.js

@@ -1,165 +0,0 @@
-import { ComponentWithCSSClasses as l, processElementOverride as c, h, text as f, createModifiableComponent as d, createModifierBuilder as u } from "@tachui/core";
-var p = Object.defineProperty, g = (e, t, i) => t in e ? p(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, s = (e, t, i) => g(e, typeof t != "symbol" ? t + "" : t, i);
-const a = {
-  largeTitle: { size: 34, weight: "400", lineHeight: 1.2 },
-  title: { size: 28, weight: "400", lineHeight: 1.3 },
-  title2: { size: 22, weight: "400", lineHeight: 1.3 },
-  title3: { size: 20, weight: "400", lineHeight: 1.4 },
-  headline: { size: 17, weight: "600", lineHeight: 1.4 },
-  body: { size: 17, weight: "400", lineHeight: 1.5 },
-  callout: { size: 16, weight: "400", lineHeight: 1.4 },
-  subheadline: { size: 15, weight: "400", lineHeight: 1.4 },
-  footnote: { size: 13, weight: "400", lineHeight: 1.3 },
-  caption: { size: 12, weight: "400", lineHeight: 1.2 },
-  caption2: { size: 11, weight: "400", lineHeight: 1.1 }
-};
-function b(e) {
-  const t = d(e), i = u(t), n = {
-    ...t,
-    modifier: i,
-    modifierBuilder: i
-  };
-  return e && typeof e.concat == "function" && (n.concat = function(r) {
-    return e.concat(r);
-  }, n.toSegment = function() {
-    return e.toSegment();
-  }, n.isConcatenatable = function() {
-    return e.isConcatenatable();
-  }), n;
-}
-class m extends l {
-  constructor(t) {
-    super(), this.props = t, s(this, "type", "component"), s(this, "id"), s(this, "mounted", !1), s(this, "cleanup", []), s(this, "effectiveTag"), s(this, "validationResult"), this.id = `text-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    const i = c("Text", "span", this.props.element);
-    this.effectiveTag = i.tag, this.validationResult = i.validation;
-  }
-  /**
-   * Render the text component with reactive content handling, element override support, and CSS classes
-   */
-  render() {
-    const t = ["tachui-text"], i = this.createClassString(this.props, t);
-    return [h(
-      this.effectiveTag,
-      {
-        className: i,
-        // Pass through debug label for debug system
-        ...this.props.debugLabel && { debugLabel: this.props.debugLabel },
-        // Add component metadata for semantic role processing
-        componentMetadata: {
-          originalType: "Text",
-          overriddenTo: this.effectiveTag !== "span" ? this.effectiveTag : void 0,
-          validationResult: this.validationResult
-        }
-      },
-      f(this.props.content || "")
-    )];
-  }
-  // Concatenation support - simplified for now
-  concat(t) {
-    return this;
-  }
-  toSegment() {
-    return this;
-  }
-  isConcatenatable() {
-    return !0;
-  }
-  /**
-   * Cleanup resources
-   */
-  dispose() {
-    this.cleanup.forEach((t) => {
-      try {
-        t();
-      } catch (i) {
-        console.error("Text component cleanup error:", i);
-      }
-    }), this.cleanup = [];
-  }
-}
-function o(e, t) {
-  const i = new m({ content: e, ...t });
-  return b(i);
-}
-const y = {
-  /**
-   * Create formatted text with multiple styling options
-   */
-  formatted(e, t, i) {
-    const n = { ...i };
-    return t.bold && (n.font = { ...n.font, weight: "bold" }), t.italic && (n.font = { ...n.font, style: "italic" }), t.underline && (n.textDecoration = "underline"), t.strikethrough && (n.textDecoration = "line-through"), t.monospace && (n.font = { ...n.font, family: "monospace" }), t.smallCaps && (n.font = { ...n.font, variant: "small-caps" }), o(e, n);
-  },
-  /**
-   * Create bold text
-   */
-  bold(e, t) {
-    return o(e, {
-      font: { weight: "bold" },
-      ...t
-    });
-  },
-  /**
-   * Create italic text
-   */
-  italic(e, t) {
-    return o(e, {
-      font: { style: "italic" },
-      ...t
-    });
-  },
-  /**
-   * Create underlined text
-   */
-  underline(e, t) {
-    return o(e, {
-      textDecoration: "underline",
-      ...t
-    });
-  },
-  /**
-   * Create monospace text
-   */
-  monospace(e, t) {
-    return o(e, {
-      font: { family: "monospace" },
-      ...t
-    });
-  }
-}, w = {
-  heading: (e = 1) => ({
-    font: a[e === 1 ? "largeTitle" : e === 2 ? "title" : e === 3 ? "title2" : e === 4 ? "title3" : e === 5 ? "headline" : "body"],
-    accessibilityRole: "heading",
-    accessibilityLevel: e
-  }),
-  body: () => ({
-    font: a.body,
-    accessibilityRole: "text"
-  }),
-  caption: () => ({
-    font: a.caption,
-    color: "#666666"
-  }),
-  footnote: () => ({
-    font: a.footnote,
-    color: "#888888"
-  }),
-  // Typography preset functions
-  LargeTitle: (e, t) => o(e, { font: a.largeTitle, ...t }),
-  Title: (e, t) => o(e, { font: a.title, ...t }),
-  Title2: (e, t) => o(e, { font: a.title2, ...t }),
-  Title3: (e, t) => o(e, { font: a.title3, ...t }),
-  Headline: (e, t) => o(e, { font: a.headline, ...t }),
-  Body: (e, t) => o(e, { font: a.body, ...t }),
-  Callout: (e, t) => o(e, { font: a.callout, ...t }),
-  Subheadline: (e, t) => o(e, { font: a.subheadline, ...t }),
-  Footnote: (e, t) => o(e, { font: a.footnote, ...t }),
-  Caption: (e, t) => o(e, { font: a.caption, ...t }),
-  Caption2: (e, t) => o(e, { font: a.caption2, ...t })
-};
-export {
-  m as E,
-  o as T,
-  y as a,
-  w as b,
-  a as c
-};