import { jsxs, jsx } from "react/jsx-runtime";
import * as React from "react";
import { cn } from "../../lib/utils.js";
import { Avatar } from "../Avatar/avatar.js";
import { useRowSize } from "../../patterns/element-anatomy/item-anatomy.js";
const Empty = React.forwardRef(
  ({ icon, title, description, action, disabled = false, className, ...props }, ref) => {
    const rowSize = useRowSize("md");
    const descFont = rowSize === "lg" ? "text-body-lg" : "text-body";
    let iconElement = null;
    if (icon) {
      if (React.isValidElement(icon)) {
        iconElement = icon;
      } else {
        const Icon = icon;
        iconElement = /* @__PURE__ */ jsx(Avatar, { icon: Icon, size: 48, color: "neutral", className: disabled ? "[&_svg]:!text-fg-disabled" : void 0 });
      }
    }
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        className: cn("flex flex-col items-center text-center", className),
        ...props,
        children: [
          iconElement && /* @__PURE__ */ jsx("div", { className: "mb-4", children: iconElement }),
          title && /* @__PURE__ */ jsx("span", { className: cn("text-body-lg font-medium", disabled ? "text-fg-disabled" : "text-foreground"), children: title }),
          description && /* @__PURE__ */ jsx(
            "span",
            {
              className: cn(
                // 字體跟 RowSizeContext 對齊:sm/md = text-body (14px),lg = text-body-lg (16px)
                // 在 menu 內自動對齊 menu items;standalone 時 fallback text-body
                descFont,
                disabled ? "text-fg-disabled" : title || action ? "text-fg-secondary" : "text-fg-muted",
                // Empty title 永遠 body-lg(16)→ 用 reading-lg token(label tier 決定)
                title && "mt-[var(--item-gap-label-desc-reading-lg)]"
              ),
              children: description
            }
          ),
          action && /* @__PURE__ */ jsx("div", { className: "mt-6", children: action })
        ]
      }
    );
  }
);
Empty.displayName = "Empty";
const emptyMeta = {
  component: "Empty",
  family: null,
  // non-family composite / overlay / layout
  variants: {},
  sizes: {},
  states: ["default", "disabled"],
  tokens: {
    bg: [],
    fg: ["text-fg-muted", "text-fg-secondary", "text-foreground", "text-fg-disabled"],
    ring: []
  }
};
export {
  Empty,
  emptyMeta
};
//# sourceMappingURL=empty.js.map
