@flanksource/clicky-ui/dist/data/TabButton.js

Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.

import { jsxs, jsx } from "react/jsx-runtime";
import { cn } from "../lib/utils.js";
import { Icon } from "./Icon.js";
function TabButton({
  active,
  onClick,
  label,
  icon,
  count,
  countColor = "bg-muted-foreground",
  className
}) {
  return /* @__PURE__ */ jsxs(
    "button",
    {
      type: "button",
      role: "tab",
      "aria-selected": active,
      onClick,
      className: cn(
        "inline-flex items-center gap-1.5 px-density-3 py-density-1.5 text-sm rounded-md transition-colors",
        active ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-accent hover:text-foreground",
        className
      ),
      children: [
        icon && /* @__PURE__ */ jsx(Icon, { name: icon }),
        /* @__PURE__ */ jsx("span", { children: label }),
        count !== void 0 && count > 0 && /* @__PURE__ */ jsx(
          "span",
          {
            className: cn(
              "inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-bold text-white",
              countColor
            ),
            children: count
          }
        )
      ]
    }
  );
}
export {
  TabButton
};
//# sourceMappingURL=TabButton.js.map