import { o as V } from "./rolldown-runtime.js";
import { i as Z, n as J, t as H } from "./vendor/react.js";
import { t as U } from "./createLucideIcon.js";
import { t as W } from "./trash-2.js";
import { t as u } from "./utils.js";
import { t as X } from "./FieldTooltip.js";
import { n as G, t as K } from "./field-props.js";
import { a as Q, c as Y, d as ee, i as te, l as re, n as oe, o as se, r as ie, s as ne, t as ae } from "./Field.js";
var le = [
  ["path", {
    d: "M12 13v8",
    key: "1l5pq0"
  }],
  ["path", {
    d: "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242",
    key: "1pljnt"
  }],
  ["path", {
    d: "m8 17 4-4 4 4",
    key: "1quai1"
  }]
], de = U("cloud-upload", le), m = /* @__PURE__ */ V(Z(), 1), r = H(), ce = {
  xs: "h-[26px]",
  sm: "h-8",
  md: "h-9",
  lg: "h-10"
}, T = {
  xs: "rounded-[10px] px-2 text-xs gap-1.5",
  sm: "rounded-[10px] px-2 text-xs gap-1.5",
  md: "rounded-lg px-2 text-xs gap-1.5",
  lg: "rounded-lg px-2 text-xs gap-1.5"
}, I = "relative flex items-center justify-center h-full font-medium disabled:cursor-not-allowed before:absolute before:-inset-y-1.5 before:inset-x-0 before:min-h-11 transition-[background-color,transform,box-shadow] duration-150 motion-reduce:transition-none not-disabled:hover:-translate-y-px not-disabled:hover:shadow-sm not-disabled:active:scale-[0.97] motion-reduce:hover:translate-y-0 motion-reduce:hover:shadow-none motion-reduce:active:scale-100", N = m.forwardRef(({ className: e, size: t = "md", success: o = !1, disabled: a, value: s, onChange: f, defaultValue: C, accept: b, placeholder: l = "Choose a file", browseLabel: c = "Browse", browseIcon: p, deleteLabel: i = "Delete", deleteIcon: j, ...x }, v) => {
  const d = ee(), n = a ?? d.disabled, F = d["aria-invalid"], B = d["aria-describedby"], O = d.id, [z, k] = m.useState(C ?? null), w = s !== void 0, g = w ? s : z, _ = g !== null, y = m.useRef(null), q = () => {
    n || y.current?.click();
  }, D = (M) => {
    const E = M.target.files?.[0] ?? null;
    w || k(E), f?.(E);
  }, S = () => {
    w || k(null), f?.(null), y.current && (y.current.value = "");
  }, L = p ?? /* @__PURE__ */ (0, r.jsx)(de, { className: "size-4 transition-transform duration-150 group-hover/browse:-translate-y-px motion-reduce:group-hover/browse:translate-y-0" }), $ = j ?? /* @__PURE__ */ (0, r.jsx)(W, { className: "size-4 transition-transform duration-150 group-hover/delete:translate-y-px motion-reduce:group-hover/delete:translate-y-0" });
  return /* @__PURE__ */ (0, r.jsxs)("div", {
    ref: v,
    id: O,
    "data-slot": "file-input",
    className: u("flex flex-col w-full", n && "opacity-50", e),
    ...x,
    children: [/* @__PURE__ */ (0, r.jsx)("input", {
      ref: y,
      type: "file",
      accept: b,
      disabled: n,
      onChange: D,
      className: "sr-only",
      tabIndex: -1,
      "aria-label": l
    }), /* @__PURE__ */ (0, r.jsxs)("div", {
      "data-slot": "file-input-control",
      "aria-invalid": F || void 0,
      "aria-describedby": B,
      className: u("flex items-center gap-0.5 rounded-xl border bg-background/50 transition-[colors,box-shadow] duration-150 motion-reduce:transition-none", "pl-0.5 pr-3 py-0.5", ce[t], F ? "border-destructive" : o ? "border-success" : "border-input", "focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50", !n && "hover:border-ring/30 hover:shadow-[0_0_0_3px_var(--ring)/0.08]", n && "cursor-not-allowed"),
      children: [_ ? /* @__PURE__ */ (0, r.jsxs)("button", {
        type: "button",
        onClick: S,
        disabled: n,
        "aria-label": `${i} ${g?.name}`,
        className: u("group/delete", I, "bg-destructive/10 text-destructive hover:bg-destructive/15", T[t]),
        children: [$, /* @__PURE__ */ (0, r.jsx)("span", { children: i })]
      }) : /* @__PURE__ */ (0, r.jsxs)("button", {
        type: "button",
        onClick: q,
        disabled: n,
        className: u("group/browse", I, "bg-primary/10 text-primary hover:bg-primary/15", T[t]),
        children: [L, /* @__PURE__ */ (0, r.jsx)("span", { children: c })]
      }), /* @__PURE__ */ (0, r.jsx)("span", {
        className: u("flex-1 truncate text-sm", _ ? "text-foreground" : "text-muted-foreground"),
        title: _ ? g.name : void 0,
        children: _ ? g.name : l
      })]
    })]
  });
});
N.displayName = "FileInputControl";
var R = m.forwardRef((e, t) => {
  const [o, a] = G(e);
  if (!K(o)) return /* @__PURE__ */ (0, r.jsx)(N, {
    ref: t,
    ...a
  });
  const { label: s, required: f, labelIcon: C, tooltip: b, topRight: l, description: c, bottomRight: p, error: i, fieldClassName: j } = o, x = a, v = s || l, d = c || p || i;
  return /* @__PURE__ */ (0, r.jsxs)(ae, {
    state: i ? "destructive" : void 0,
    disabled: x.disabled,
    className: j,
    children: [
      v && /* @__PURE__ */ (0, r.jsxs)(Y, { children: [s && /* @__PURE__ */ (0, r.jsxs)(ne, {
        required: f,
        labelIcon: C,
        children: [s, b && /* @__PURE__ */ (0, r.jsx)(X, { content: b })]
      }), l && /* @__PURE__ */ (0, r.jsx)(re, { children: l })] }),
      /* @__PURE__ */ (0, r.jsx)(te, { children: () => /* @__PURE__ */ (0, r.jsx)(N, {
        ref: t,
        ...x
      }) }),
      d && /* @__PURE__ */ (0, r.jsxs)(oe, { children: [
        i && /* @__PURE__ */ (0, r.jsx)(se, { children: i }),
        !i && c && /* @__PURE__ */ (0, r.jsx)(Q, { children: c }),
        p && /* @__PURE__ */ (0, r.jsx)(ie, {
          className: "ms-auto",
          children: p
        })
      ] })
    ]
  });
});
R.displayName = "FileInput";
var pe = J(), h = {};
function P(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 A = 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 o of Array.from(this.childNodes))
      o.nodeType === Node.TEXT_NODE && !o.textContent?.trim() || e.push(o);
    const t = document.createElement("div");
    for (t.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((o) => this._childrenContainer.appendChild(o)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(t), this._root = (0, pe.createRoot)(t), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, t, o) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(h).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, t) {
    const o = h[e] || "string";
    this._props[e] = this._parseValue(t, o), 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(), o = h[e] || "string";
    return P(this.getAttribute(t), o);
  }
  _render() {
    if (!this._root) return;
    const e = {};
    for (const [o, a] of Object.entries(h)) if (o in this._props) e[o] = this._props[o];
    else {
      const s = o.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[o] = P(this.getAttribute(s), a);
    }
    const t = m.createElement(R, {
      ...e,
      _hostElement: this
    });
    this._root.render(t);
  }
};
for (const e of Object.keys(h)) Object.defineProperty(A.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(t) {
    this._setProp(e, t);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-file-input") && customElements.define("hf-file-input", A);
export {
  A as FileInputWC,
  A as default
};

//# sourceMappingURL=hf-file-input.js.map