import { o as w } from "./rolldown-runtime.js";
import { i as V, t as N } from "./vendor/react.js";
import { t } from "./dist.js";
import { t as n } from "./utils.js";
import { n as z } from "./close-button.js";
var _ = /* @__PURE__ */ w(V(), 1), s = N(), C = t("inline-flex items-center justify-center gap-[3px] rounded-[6px] border border-border bg-background font-medium text-secondary-foreground transition-colors duration-200 ease-smooth motion-reduce:transition-none dark:border-border dark:bg-foreground dark:text-quaternary-foreground", {
  variants: { size: {
    sm: "px-2 py-[3px] text-xs leading-[18px]",
    md: "px-[9px] py-0.5 text-sm leading-5",
    lg: "px-2.5 py-1 text-sm leading-5"
  } },
  defaultVariants: { size: "md" }
}), q = t("shrink-0 rounded-full", {
  variants: {
    size: {
      sm: "size-1.5",
      md: "size-1.5",
      lg: "size-2"
    },
    color: {
      gray: "bg-muted",
      success: "bg-success/10",
      error: "bg-destructive/10",
      warning: "bg-warning/10",
      brand: "bg-primary/10"
    }
  },
  defaultVariants: {
    size: "md",
    color: "success"
  }
}), L = t("flex items-center justify-center rounded-[3px] bg-surface-1 font-medium text-secondary-foreground dark:text-quaternary-foreground", {
  variants: { size: {
    sm: "h-4 min-w-[16px] px-1 text-xs",
    md: "h-5 min-w-[20px] px-1 text-xs",
    lg: "h-5 min-w-[20px] px-1.5 text-sm"
  } },
  defaultVariants: { size: "md" }
}), T = t("shrink-0 rounded border border-border bg-background dark:border-border dark:bg-foreground", {
  variants: { size: {
    sm: "size-3.5",
    md: "size-4",
    lg: "size-[18px]"
  } },
  defaultVariants: { size: "md" }
}), B = {
  sm: "sm",
  md: "sm",
  lg: "md"
}, M = t("shrink-0", {
  variants: { size: {
    sm: "size-4 [&>svg]:size-4",
    md: "size-4 [&>svg]:size-4",
    lg: "size-5 [&>svg]:size-5"
  } },
  defaultVariants: { size: "md" }
}), R = t("shrink-0 overflow-hidden rounded-full ring-1 ring-fg-primary/8 dark:ring-fg-white/10", {
  variants: { size: {
    sm: "size-3.5",
    md: "size-4",
    lg: "size-5"
  } },
  defaultVariants: { size: "md" }
}), S = _.forwardRef(({ className: u, size: r = "md", children: m, icon: a, dot: i, dotColor: c = "success", avatar: e, avatarAlt: x, checkbox: o, checked: d, onCheckedChange: f, removable: g, onRemove: b, count: l, rtl: v, ...h }, y) => {
  const p = g || l !== void 0, j = n(o && r === "sm" && "ps-[5px]", o && r === "md" && "ps-1.5", o && r === "lg" && "ps-1.5", i && r === "sm" && "ps-1.5", i && r === "md" && "ps-[7px]", i && r === "lg" && "ps-2", (a || e) && r === "sm" && "ps-1", (a || e) && r === "md" && "ps-1", (a || e) && r === "lg" && "ps-1.5", p && r === "sm" && "pe-1", p && r === "md" && "pe-1", p && r === "lg" && "pe-1.5"), k = n(r === "sm" && "gap-1", r === "md" && "gap-[5px]", r === "lg" && "gap-1.5");
  return /* @__PURE__ */ (0, s.jsxs)("span", {
    ref: y,
    dir: v ? "rtl" : void 0,
    className: n(C({ size: r }), j, u),
    ...h,
    children: [/* @__PURE__ */ (0, s.jsxs)("span", {
      className: n("flex items-center", k),
      children: [
        o && /* @__PURE__ */ (0, s.jsx)("button", {
          type: "button",
          role: "checkbox",
          "aria-checked": d,
          "aria-label": `Toggle ${typeof m == "string" ? m : "tag"}`,
          onClick: () => f?.(!d),
          className: n(T({ size: r }), "transition-all duration-200 ease-smooth motion-reduce:transition-none", "hover:border-primary/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", d && "flex items-center justify-center bg-primary/10 border-primary"),
          children: d && /* @__PURE__ */ (0, s.jsx)("svg", {
            className: n("text-white transition-transform duration-200 ease-smooth motion-reduce:transition-none", r === "sm" && "size-2.5", r === "md" && "size-3", r === "lg" && "size-3.5"),
            viewBox: "0 0 12 12",
            fill: "none",
            stroke: "currentColor",
            strokeWidth: "2",
            strokeLinecap: "round",
            strokeLinejoin: "round",
            children: /* @__PURE__ */ (0, s.jsx)("path", { d: "M2.5 6L5 8.5L9.5 3.5" })
          })
        }),
        i && !a && !e && /* @__PURE__ */ (0, s.jsx)("span", { className: q({
          size: r,
          color: c
        }) }),
        e && /* @__PURE__ */ (0, s.jsx)("span", {
          className: R({ size: r }),
          children: typeof e == "string" ? /* @__PURE__ */ (0, s.jsx)("img", {
            src: e,
            alt: x || "",
            className: "size-full object-cover"
          }) : e
        }),
        a && !e && /* @__PURE__ */ (0, s.jsx)("span", {
          className: M({ size: r }),
          children: a
        }),
        /* @__PURE__ */ (0, s.jsx)("span", {
          className: "whitespace-nowrap",
          children: m
        }),
        l !== void 0 && /* @__PURE__ */ (0, s.jsx)("span", {
          className: L({ size: r }),
          children: l
        })
      ]
    }), g && /* @__PURE__ */ (0, s.jsx)(z, {
      size: B[r ?? "md"],
      onClick: b,
      "aria-label": "Remove tag"
    })]
  });
});
S.displayName = "Tag";
export {
  S as t
};

//# sourceMappingURL=Tag.js.map