import { o as T } from "./rolldown-runtime.js";
import { i as P, n as V, t as L } from "./vendor/react.js";
import { t as O } from "./file-text.js";
import { t as x } from "./search.js";
import { t as u } from "./Button.js";
import { t as A } from "./dist.js";
import { t as i } from "./utils.js";
import { t as G } from "./FeaturedIcon.js";
import { t as Z } from "./PageBackground.js";
var p = /* @__PURE__ */ T(P(), 1), t = L(), h = {
  first: {
    insetInlineStart: "10%",
    top: "12%",
    "--delight-duration": "3s"
  },
  second: {
    insetInlineEnd: "5%",
    top: "24%",
    "--delight-duration": "3.5s",
    "--delight-delay": "0.5s"
  },
  third: {
    insetInlineEnd: "12%",
    top: "3%",
    "--delight-duration": "4s",
    "--delight-delay": "1s"
  }
}, m = {
  title: { "--delight-delay": "100ms" },
  description: { "--delight-delay": "200ms" },
  actions: { "--delight-delay": "300ms" }
}, B = A("relative flex w-full items-center justify-center", {
  variants: { size: {
    sm: "",
    md: "",
    lg: ""
  } },
  defaultVariants: { size: "sm" }
});
function F(e) {
  return /* @__PURE__ */ (0, t.jsx)("div", {
    className: "flex items-start rounded-[200px] bg-gradient-to-b from-secondary to-muted p-8",
    children: /* @__PURE__ */ (0, t.jsxs)("div", {
      className: "relative size-10 rounded-sm bg-background shadow-sm",
      children: [/* @__PURE__ */ (0, t.jsxs)("svg", {
        viewBox: "0 0 40 40",
        fill: "none",
        className: "size-full",
        "aria-hidden": "true",
        children: [/* @__PURE__ */ (0, t.jsx)("path", {
          d: "M4 4C4 1.79086 5.79086 0 8 0H24L36 12V36C36 38.2091 34.2091 40 32 40H8C5.79086 40 4 38.2091 4 36V4Z",
          className: "fill-background"
        }), /* @__PURE__ */ (0, t.jsx)("path", {
          d: "M24 0L36 12H28C25.7909 12 24 10.2091 24 8V0Z",
          className: "fill-border"
        })]
      }), /* @__PURE__ */ (0, t.jsx)("div", {
        className: "absolute inset-0 flex items-center justify-center pt-3",
        children: /* @__PURE__ */ (0, t.jsx)(O, {
          width: 16,
          height: 16,
          className: "text-primary"
        })
      })]
    })
  });
}
function H({ size: e, color: r = "gray" }) {
  const s = {
    sm: {
      width: 152,
      height: 118,
      circle: 104,
      searchIcon: 48
    },
    md: {
      width: 172,
      height: 128,
      circle: 128,
      searchIcon: 56
    },
    lg: {
      width: 220,
      height: 160,
      circle: 160,
      searchIcon: 56
    }
  }[e], o = r === "primary", c = o ? "bg-primary/20" : "bg-surface-2", n = o ? "bg-primary/20" : "bg-accent", l = o ? "bg-primary/90/40" : "bg-muted/40";
  return /* @__PURE__ */ (0, t.jsxs)("div", {
    className: "relative",
    style: {
      width: s.width,
      height: s.height
    },
    children: [
      /* @__PURE__ */ (0, t.jsx)("div", {
        className: i("absolute rounded-full", c),
        style: {
          width: s.circle,
          height: s.circle,
          insetInlineStart: "50%",
          top: 0,
          transform: "translateX(-50%)"
        }
      }),
      /* @__PURE__ */ (0, t.jsx)("div", {
        className: i("absolute size-2.5 rounded-full delight-float", n),
        style: h.first
      }),
      /* @__PURE__ */ (0, t.jsx)("div", {
        className: i("absolute size-3.5 rounded-full delight-float", n),
        style: h.second
      }),
      /* @__PURE__ */ (0, t.jsx)("div", {
        className: i("absolute size-2 rounded-full delight-float", n),
        style: h.third
      }),
      /* @__PURE__ */ (0, t.jsx)("div", {
        className: i("absolute flex items-center justify-center rounded-full supports-backdrop-filter:backdrop-blur-sm", l),
        style: {
          width: s.searchIcon,
          height: s.searchIcon,
          insetInlineStart: "50%",
          bottom: 0,
          transform: "translateX(-50%)"
        },
        children: /* @__PURE__ */ (0, t.jsx)(x, {
          width: s.searchIcon * 0.43,
          height: s.searchIcon * 0.43,
          className: "text-primary-foreground"
        })
      })
    ]
  });
}
var _ = p.forwardRef(({ title: e, description: r, iconType: s = "featured", icon: o = x, size: c, primaryAction: n, secondaryAction: l, children: g, className: y, illustrationColor: j = "gray" }, C) => {
  const a = c ?? "sm", N = {
    sm: "text-md font-semibold leading-6",
    md: "text-lg font-semibold leading-7",
    lg: "text-xl font-semibold leading-[30px]"
  }, w = {
    sm: "text-sm leading-5 max-w-prose",
    md: "text-sm leading-5 max-w-prose",
    lg: "text-md leading-6 max-w-prose"
  }, v = {
    sm: "gap-4",
    md: "gap-5",
    lg: s === "illustration" ? "gap-6" : "gap-5"
  }, z = {
    sm: "gap-1",
    md: "gap-2",
    lg: "gap-2"
  }, E = {
    sm: "gap-6",
    md: "gap-8",
    lg: "gap-8"
  }, I = () => {
    const S = o;
    switch (s) {
      case "illustration":
        return /* @__PURE__ */ (0, t.jsx)(H, {
          size: a,
          color: j
        });
      case "file":
        return /* @__PURE__ */ (0, t.jsx)(F, { size: a });
      default:
        return /* @__PURE__ */ (0, t.jsx)(G, {
          icon: /* @__PURE__ */ (0, t.jsx)(S, {}),
          size: "lg"
        });
    }
  }, k = n || l || g;
  return /* @__PURE__ */ (0, t.jsx)("div", {
    ref: C,
    "data-slot": "empty-state-page",
    className: i(B({ size: a }), y),
    children: /* @__PURE__ */ (0, t.jsxs)("div", {
      className: i("flex min-h-px min-w-px flex-1 flex-col items-center", E[a]),
      children: [/* @__PURE__ */ (0, t.jsxs)("div", {
        className: i("flex w-full flex-col items-center", v[a]),
        children: [/* @__PURE__ */ (0, t.jsxs)("div", {
          className: "relative delight-stagger",
          "aria-hidden": "true",
          children: [/* @__PURE__ */ (0, t.jsx)(Z, {
            pattern: s === "illustration" ? "grid" : "circular",
            offset: "icon-center"
          }), /* @__PURE__ */ (0, t.jsx)("div", {
            className: "relative z-10",
            children: I()
          })]
        }), /* @__PURE__ */ (0, t.jsxs)("div", {
          className: i("relative z-10 flex w-full max-w-[352px] flex-col items-center text-center", z[a]),
          children: [/* @__PURE__ */ (0, t.jsx)("h2", {
            className: i("text-foreground delight-stagger", N[a]),
            style: m.title,
            children: e
          }), r && /* @__PURE__ */ (0, t.jsx)("p", {
            className: i("text-muted-foreground delight-stagger", w[a]),
            style: m.description,
            children: r
          })]
        })]
      }), k && /* @__PURE__ */ (0, t.jsx)("div", {
        className: "relative z-10 flex shrink-0 items-start gap-3 delight-stagger",
        style: m.actions,
        children: g || /* @__PURE__ */ (0, t.jsxs)(t.Fragment, { children: [l && /* @__PURE__ */ (0, t.jsx)(u, {
          variant: "secondary",
          size: "default",
          onClick: l.onClick,
          children: l.label
        }), n && /* @__PURE__ */ (0, t.jsx)(u, {
          variant: "primary",
          size: "default",
          onClick: n.onClick,
          startIcon: n.icon ? /* @__PURE__ */ (0, t.jsx)(n.icon, {
            width: 20,
            height: 20
          }) : void 0,
          children: n.label
        })] })
      })]
    })
  });
});
_.displayName = "EmptyStatePage";
var M = V(), d = {
  variant: "string",
  size: "string",
  title: "string",
  description: "string",
  iconType: "string",
  icon: "string",
  primaryAction: "json",
  secondaryAction: "json",
  className: "string",
  illustrationColor: "string"
};
function f(e, r) {
  if (e !== null)
    switch (r) {
      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 s of Array.from(this.childNodes))
      s.nodeType === Node.TEXT_NODE && !s.textContent?.trim() || e.push(s);
    const r = document.createElement("div");
    for (r.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((s) => this._childrenContainer.appendChild(s)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(r), this._root = (0, M.createRoot)(r), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, r, s) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(d).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, r) {
    const s = d[e] || "string";
    this._props[e] = this._parseValue(r, s), this._render();
  }
  _parseValue(e, r) {
    if (r === "boolean" && typeof e == "boolean" || r === "number" && typeof e == "number" || r === "string" && typeof e == "string") return e;
    if (typeof e == "string") switch (r) {
      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 r = e.replace(/([A-Z])/g, "-$1").toLowerCase(), s = d[e] || "string";
    return f(this.getAttribute(r), s);
  }
  _render() {
    if (!this._root || !this._childrenContainer) return;
    const e = {};
    for (const [s, o] of Object.entries(d)) if (s in this._props) e[s] = this._props[s];
    else {
      const c = s.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[s] = f(this.getAttribute(c), o);
    }
    const r = p.createElement(_, {
      ...e,
      _hostElement: this
    }, p.createElement("span", {
      ref: (s) => {
        s && this._childrenContainer && s.replaceWith(this._childrenContainer);
      },
      style: { display: "contents" }
    }));
    this._root.render(r);
  }
};
for (const e of Object.keys(d)) Object.defineProperty(b.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(r) {
    this._setProp(e, r);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-empty-state-page") && customElements.define("hf-empty-state-page", b);
export {
  b as EmptyStatePageWC,
  b as default
};

//# sourceMappingURL=hf-empty-state-page.js.map