@helpwave/hightide/dist/components/layout-and-navigation/Chip.mjs

helpwave's component and theming library

// src/components/layout-and-navigation/Chip.tsx
import clsx from "clsx";
import { jsx, jsxs } from "react/jsx-runtime";
var chipColors = ["default", "dark", "red", "yellow", "green", "blue", "pink"];
var ChipUtil = {
  colors: chipColors
};
var Chip = ({
  children,
  trailingIcon,
  color = "default",
  variant = "normal",
  className = "",
  ...restProps
}) => {
  const colorMapping = {
    default: "text-tag-default-text bg-tag-default-background",
    dark: "text-tag-dark-text bg-tag-dark-background",
    red: "text-tag-red-text bg-tag-red-background",
    yellow: "text-tag-yellow-text bg-tag-yellow-background",
    green: "text-tag-green-text bg-tag-green-background",
    blue: "text-tag-blue-text bg-tag-blue-background",
    pink: "text-tag-pink-text bg-tag-pink-background"
  }[color];
  const colorMappingIcon = {
    default: "text-tag-default-icon",
    dark: "text-tag-dark-icon",
    red: "text-tag-red-icon",
    yellow: "text-tag-yellow-icon",
    green: "text-tag-green-icon",
    blue: "text-tag-blue-icon",
    pink: "text-tag-pink-icon"
  }[color];
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ...restProps,
      className: clsx(
        `row w-fit px-2 py-1 font-semibold`,
        colorMapping,
        {
          "rounded-md": variant === "normal",
          "rounded-full": variant === "fullyRounded"
        },
        className
      ),
      children: [
        children,
        trailingIcon && /* @__PURE__ */ jsx("span", { className: colorMappingIcon, children: trailingIcon })
      ]
    }
  );
};
var ChipList = ({
  list,
  className = ""
}) => {
  return /* @__PURE__ */ jsx("div", { className: clsx("flex flex-wrap gap-x-2 gap-y-2", className), children: list.map((value, index) => /* @__PURE__ */ jsx(
    Chip,
    {
      ...value,
      color: value.color ?? "default",
      variant: value.variant ?? "normal",
      children: value.children
    },
    index
  )) });
};
export {
  Chip,
  ChipList,
  ChipUtil
};
//# sourceMappingURL=Chip.mjs.map