@tachui/primitives/dist/Text-DYyFBJ6i.js

Basic UI components for tachUI framework

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
};