import { o as V } from "./rolldown-runtime.js";
import { i as D, n as $, t as M } from "./vendor/react.js";
import { t as R } from "./circle-question-mark.js";
import { t as S } from "./Avatar.js";
import { t as i } from "./utils.js";
import { t as Z } from "./Badge.js";
import { t as H } from "./Tooltip.js";
import { t as J } from "./Tag.js";
var p = /* @__PURE__ */ V(D(), 1), t = M(), N = p.forwardRef(({ className: e, label: n, value: r, hint: d, helpIcon: c = !1, helpTooltip: u, icon: x, size: w = "sm", type: a = "default", rtl: C = !1, leadingText: g, trailingText: h, linkHref: m, avatarProps: _, avatarSupportingText: j, badgeProps: k, badgeLabel: v, tags: E, children: s, ...T }, z) => {
  const q = C, o = w === "md" ? "py-2.5" : "py-2", A = () => n ? /* @__PURE__ */ (0, t.jsxs)("div", {
    className: "flex items-center gap-0.5",
    children: [/* @__PURE__ */ (0, t.jsx)("span", {
      className: "text-sm font-medium leading-5 text-secondary-foreground dark:text-quaternary-foreground",
      children: n
    }), c && /* @__PURE__ */ (0, t.jsx)(H, {
      trigger: /* @__PURE__ */ (0, t.jsx)("button", {
        type: "button",
        className: "text-muted-foreground hover:text-quaternary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-full transition-colors duration-200 ease-smooth motion-reduce:transition-none",
        "aria-label": u || `Help for ${n}`,
        children: /* @__PURE__ */ (0, t.jsx)(R, { className: "size-4" })
      }),
      content: u || n
    })]
  }) : null, L = () => d ? /* @__PURE__ */ (0, t.jsx)("p", {
    className: "text-sm font-normal leading-5 text-muted-foreground dark:text-muted-foreground w-full",
    children: d
  }) : null, O = () => {
    switch (a) {
      case "icon-leading":
        return /* @__PURE__ */ (0, t.jsxs)("div", {
          className: "flex items-center gap-2 flex-1 min-w-0",
          children: [x && /* @__PURE__ */ (0, t.jsx)("span", {
            className: "shrink-0 text-quaternary-foreground [&>svg]:size-5",
            children: x
          }), /* @__PURE__ */ (0, t.jsx)("span", {
            className: "text-base font-normal leading-6 text-foreground dark:text-foreground truncate",
            children: r ?? s
          })]
        });
      case "leading-text":
        return /* @__PURE__ */ (0, t.jsxs)("div", {
          className: "flex items-start w-full",
          children: [g && /* @__PURE__ */ (0, t.jsx)("div", {
            className: i("flex items-center gap-1 overflow-hidden", o),
            children: /* @__PURE__ */ (0, t.jsx)("span", {
              className: "text-base font-normal leading-6 text-secondary-foreground dark:text-quaternary-foreground whitespace-nowrap",
              children: g
            })
          }), /* @__PURE__ */ (0, t.jsx)("div", {
            className: i("flex-1 flex items-center gap-2 min-w-0", o, "ps-3"),
            children: /* @__PURE__ */ (0, t.jsx)("span", {
              className: "text-base font-normal leading-6 text-foreground dark:text-foreground truncate",
              children: r ?? s
            })
          })]
        });
      case "trailing-text":
        return /* @__PURE__ */ (0, t.jsxs)("div", {
          className: "flex items-start w-full",
          children: [/* @__PURE__ */ (0, t.jsx)("div", {
            className: i("flex-1 flex items-center gap-2 min-w-0", o),
            children: /* @__PURE__ */ (0, t.jsx)("span", {
              className: "text-base font-normal leading-6 text-foreground dark:text-foreground truncate",
              children: r ?? s
            })
          }), h && /* @__PURE__ */ (0, t.jsx)("div", {
            className: i("flex items-center gap-1 overflow-hidden px-3", o),
            children: /* @__PURE__ */ (0, t.jsx)("span", {
              className: "text-base font-normal leading-6 text-secondary-foreground dark:text-quaternary-foreground whitespace-nowrap",
              children: h
            })
          })]
        });
      case "link":
        return /* @__PURE__ */ (0, t.jsx)("div", {
          className: "flex items-center gap-2 flex-1 min-w-0",
          children: m ? /* @__PURE__ */ (0, t.jsx)("a", {
            href: m,
            className: "text-sm font-normal leading-5 text-primary hover:text-primary dark:text-primary dark:hover:text-primary truncate transition-colors duration-200 ease-smooth motion-reduce:transition-none hover:underline",
            target: "_blank",
            rel: "noopener noreferrer",
            children: r ?? s ?? m
          }) : /* @__PURE__ */ (0, t.jsx)("span", {
            className: "text-sm font-normal leading-5 text-primary dark:text-primary truncate",
            children: r ?? s
          })
        });
      case "tags":
        return /* @__PURE__ */ (0, t.jsxs)("div", {
          className: "flex items-center gap-1.5 flex-wrap",
          children: [E?.map((f, P) => /* @__PURE__ */ (0, t.jsx)(J, {
            size: "md",
            avatar: f.avatar,
            ...f,
            children: f.label
          }, P)), s]
        });
      case "avatar":
        return /* @__PURE__ */ (0, t.jsxs)("div", {
          className: "flex items-center gap-2",
          children: [/* @__PURE__ */ (0, t.jsx)(S, {
            size: "lg",
            ..._
          }), /* @__PURE__ */ (0, t.jsxs)("div", {
            className: "flex flex-col",
            children: [/* @__PURE__ */ (0, t.jsx)("span", {
              className: "text-sm font-semibold leading-5 text-foreground dark:text-foreground",
              children: r ?? s ?? _?.fallback
            }), j && /* @__PURE__ */ (0, t.jsx)("span", {
              className: "text-sm font-normal leading-5 text-muted-foreground dark:text-muted-foreground",
              children: j
            })]
          })]
        });
      case "badge":
        return /* @__PURE__ */ (0, t.jsx)("div", {
          className: "flex items-center gap-2 flex-1 min-w-0",
          children: /* @__PURE__ */ (0, t.jsx)(Z, {
            variant: "dot",
            color: "success",
            ...k,
            children: v ?? r ?? s
          })
        });
      default:
        return /* @__PURE__ */ (0, t.jsx)("div", {
          className: "flex items-center gap-2 flex-1 min-w-0",
          children: /* @__PURE__ */ (0, t.jsx)("span", {
            className: "text-base font-normal leading-6 text-foreground dark:text-foreground truncate",
            children: r ?? s ?? /* @__PURE__ */ (0, t.jsx)("span", {
              className: "text-muted-foreground dark:text-quaternary-foreground italic",
              children: "—"
            })
          })
        });
    }
  };
  return /* @__PURE__ */ (0, t.jsxs)("div", {
    ref: z,
    dir: q ? "rtl" : void 0,
    className: i("flex flex-col gap-1.5", a === "tags" || a === "avatar" || a === "badge" ? "w-[400px]" : "w-[320px]", e),
    ...T,
    children: [
      A(),
      /* @__PURE__ */ (0, t.jsx)("div", {
        className: i("flex items-center gap-2 w-full rounded-md", a !== "leading-text" && a !== "trailing-text" && o),
        children: O()
      }),
      L()
    ]
  });
});
N.displayName = "DisplayValue";
var W = $(), l = {
  label: "string",
  value: "json",
  hint: "string",
  helpIcon: "boolean",
  helpTooltip: "string",
  icon: "json",
  size: "string",
  type: "string",
  rtl: "boolean",
  leadingText: "string",
  trailingText: "string",
  linkHref: "string",
  avatarProps: "string",
  avatarSupportingText: "string",
  badgeProps: "string",
  badgeLabel: "string",
  tags: "json"
};
function b(e, n) {
  if (e !== null)
    switch (n) {
      case "number":
        return Number(e);
      case "boolean":
        return e !== "false" && e !== "0";
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
}
var y = class extends HTMLElement {
  _root = null;
  _childrenContainer = null;
  _props = {};
  _initialized = !1;
  connectedCallback() {
    setTimeout(() => this._initialize(), 0);
  }
  _initialize() {
    if (this._initialized) return;
    this._initialized = !0;
    const e = [];
    for (const r of Array.from(this.childNodes))
      r.nodeType === Node.TEXT_NODE && !r.textContent?.trim() || e.push(r);
    const n = document.createElement("div");
    for (n.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((r) => this._childrenContainer.appendChild(r)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(n), this._root = (0, W.createRoot)(n), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, n, r) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(l).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, n) {
    const r = l[e] || "string";
    this._props[e] = this._parseValue(n, r), this._render();
  }
  _parseValue(e, n) {
    if (n === "boolean" && typeof e == "boolean" || n === "number" && typeof e == "number" || n === "string" && typeof e == "string") return e;
    if (typeof e == "string") switch (n) {
      case "boolean":
        return e !== "false" && e !== "0" && e !== "";
      case "number":
        return Number(e);
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
    return e;
  }
  _getProp(e) {
    if (e in this._props) return this._props[e];
    const n = e.replace(/([A-Z])/g, "-$1").toLowerCase(), r = l[e] || "string";
    return b(this.getAttribute(n), r);
  }
  _render() {
    if (!this._root || !this._childrenContainer) return;
    const e = {};
    for (const [r, d] of Object.entries(l)) if (r in this._props) e[r] = this._props[r];
    else {
      const c = r.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[r] = b(this.getAttribute(c), d);
    }
    const n = p.createElement(N, {
      ...e,
      _hostElement: this
    }, p.createElement("span", {
      ref: (r) => {
        r && this._childrenContainer && r.replaceWith(this._childrenContainer);
      },
      style: { display: "contents" }
    }));
    this._root.render(n);
  }
};
for (const e of Object.keys(l)) Object.defineProperty(y.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(n) {
    this._setProp(e, n);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-display-value") && customElements.define("hf-display-value", y);
export {
  y as DisplayValueWC,
  y as default
};

//# sourceMappingURL=hf-display-value.js.map