import { o as I } from "./rolldown-runtime.js";
import { i as w, n as z, t as A } from "./vendor/react.js";
import { t as E } from "./Avatar.js";
import { l as T } from "./useRenderElement.js";
import { t as c } from "./dist.js";
import { t as l } from "./utils.js";
import { t as k } from "./useRender.js";
var a = /* @__PURE__ */ I(w(), 1), i = A(), u = a.createContext(!1), O = c("group/item flex items-center gap-4 rounded-xl motion-safe:transition-[background-color,transform] motion-safe:duration-150 hover:bg-accent/50 focus-visible:outline-2 focus-visible:outline-ring/50 focus-visible:outline-offset-2", {
  variants: {
    variant: {
      default: "",
      outline: "border border-border",
      muted: "bg-muted"
    },
    size: {
      default: "p-4",
      sm: "px-4 py-3"
    }
  },
  defaultVariants: {
    variant: "default",
    size: "default"
  }
}), f = a.forwardRef(({ title: e, description: t, leading: r, trailing: s, variant: n, size: d, className: x, render: v, ...y }, N) => {
  const j = a.useContext(u), C = /* @__PURE__ */ (0, i.jsxs)(i.Fragment, { children: [
    r && /* @__PURE__ */ (0, i.jsx)("div", {
      "data-slot": "item-leading",
      className: "shrink-0",
      children: r
    }),
    /* @__PURE__ */ (0, i.jsxs)("div", {
      "data-slot": "item-content",
      className: "flex flex-1 flex-col gap-1 min-w-0",
      children: [/* @__PURE__ */ (0, i.jsx)("span", {
        className: "text-sm font-medium text-foreground",
        children: e
      }), t && d !== "sm" && /* @__PURE__ */ (0, i.jsx)("span", {
        className: "text-sm text-muted-foreground",
        children: t
      })]
    }),
    s && /* @__PURE__ */ (0, i.jsx)("div", {
      "data-slot": "item-trailing",
      className: "shrink-0 motion-safe:transition-transform motion-safe:duration-150 group-hover/item:translate-x-0.5",
      children: s
    })
  ] });
  return k({
    defaultTagName: "div",
    render: v,
    ref: N,
    props: T({
      className: l(O({
        variant: n,
        size: d
      }), x),
      children: C,
      role: j ? "listitem" : void 0
    }, y),
    state: { slot: "item" }
  });
});
f.displayName = "Item";
function p({ src: e, fallback: t, size: r = "md" }) {
  return /* @__PURE__ */ (0, i.jsx)("div", {
    "data-slot": "item-avatar",
    children: /* @__PURE__ */ (0, i.jsx)(E, {
      src: e,
      fallback: t,
      size: r
    })
  });
}
p.displayName = "Item.Avatar";
var V = {
  default: "bg-muted text-muted-foreground",
  primary: "bg-primary/10 text-primary",
  success: "bg-success/10 text-success",
  warning: "bg-warning/10 text-warning",
  error: "bg-destructive/10 text-destructive"
};
function h({ icon: e, color: t = "default" }) {
  return /* @__PURE__ */ (0, i.jsx)("div", {
    "data-slot": "item-icon",
    "aria-hidden": "true",
    className: l("flex items-center justify-center size-10 rounded-xl motion-safe:transition-transform motion-safe:duration-150 group-hover/item:scale-105", V[t]),
    children: /* @__PURE__ */ (0, i.jsx)("div", {
      className: "[&>svg]:size-5",
      children: e
    })
  });
}
h.displayName = "Item.Icon";
function g({ src: e, alt: t }) {
  return /* @__PURE__ */ (0, i.jsx)("div", {
    "data-slot": "item-image",
    className: "size-10 overflow-hidden rounded-lg shrink-0",
    children: /* @__PURE__ */ (0, i.jsx)("img", {
      src: e,
      alt: t,
      loading: "lazy",
      className: "size-full object-cover motion-safe:transition-transform motion-safe:duration-200 group-hover/item:scale-110"
    })
  });
}
g.displayName = "Item.Image";
var P = c("flex flex-col", {
  variants: {
    variant: {
      default: "",
      outline: "border border-border rounded-xl overflow-hidden"
    },
    divider: {
      none: "",
      line: "divide-y divide-border"
    }
  },
  defaultVariants: {
    variant: "default",
    divider: "none"
  }
}), _ = a.forwardRef(({ children: e, variant: t, divider: r, className: s, ...n }, d) => /* @__PURE__ */ (0, i.jsx)(u.Provider, {
  value: !0,
  children: /* @__PURE__ */ (0, i.jsx)("div", {
    ref: d,
    role: "list",
    "data-slot": "item-group",
    className: l(P({
      variant: t,
      divider: r
    }), s),
    ...n,
    children: e
  })
}));
_.displayName = "Item.Group";
var G = Object.assign(f, {
  Avatar: p,
  Icon: h,
  Image: g,
  Group: _
}), R = z(), o = {
  variant: "string",
  size: "string",
  title: "string",
  description: "string",
  leading: "json",
  trailing: "json",
  render: "json",
  className: "string"
};
function m(e, t) {
  if (e !== null)
    switch (t) {
      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 b = 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 t = document.createElement("div");
    for (t.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(t), this._root = (0, R.createRoot)(t), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, t, r) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(o).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, t) {
    const r = o[e] || "string";
    this._props[e] = this._parseValue(t, r), this._render();
  }
  _parseValue(e, t) {
    if (t === "boolean" && typeof e == "boolean" || t === "number" && typeof e == "number" || t === "string" && typeof e == "string") return e;
    if (typeof e == "string") switch (t) {
      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 t = e.replace(/([A-Z])/g, "-$1").toLowerCase(), r = o[e] || "string";
    return m(this.getAttribute(t), r);
  }
  _render() {
    if (!this._root) return;
    const e = {};
    for (const [r, s] of Object.entries(o)) if (r in this._props) e[r] = this._props[r];
    else {
      const n = r.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[r] = m(this.getAttribute(n), s);
    }
    const t = a.createElement(G, {
      ...e,
      _hostElement: this
    });
    this._root.render(t);
  }
};
for (const e of Object.keys(o)) Object.defineProperty(b.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(t) {
    this._setProp(e, t);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-item") && customElements.define("hf-item", b);
export {
  b as ItemWC,
  b as default
};

//# sourceMappingURL=hf-item.js.map