@propeller-commerce/propeller-v2-react-ui 0.4.16 → 0.4.17

package/CHANGELOG.md

@@ -8,6 +8,18 @@ once it reaches 1.0. Until then (the `0.x` line) the public API may change
 between minor versions; breaking changes are called out below and in
 [MIGRATION.md](./MIGRATION.md).
 
+## [0.4.17] - 2026-07-09
+
+### Added
+
+- `ProductCard` / `ProductGrid`: new `belowName?: (product: Product) => ReactNode`
+  render prop. Renders arbitrary host-supplied content directly below the
+  product name (and above the short description / price) in both the grid and
+  row layouts, without forking the card — e.g. package descriptions or custom
+  badges. On `ProductGrid` it cascades to every card via `ProductGridConfig`;
+  on `ProductCard` it can also be set per-card (explicit prop wins over grid
+  context). Also exposed as the `<ProductCard.BelowName>` compound subcomponent.
+
 ## [0.4.16] - 2026-07-09
 
 ### Added

package/dist/index.cjs

@@ -13322,7 +13322,8 @@ var RESOLVE_SPEC2 = {
   addToCartComponent: { grid: "addToCartComponent" },
   imageComponent: { grid: "imageComponent" },
   badgesComponent: { grid: "badgesComponent" },
-  favoriteComponent: { grid: "favoriteComponent" }
+  favoriteComponent: { grid: "favoriteComponent" },
+  belowName: { grid: "belowName" }
 };
 var ProductCardContext = React6.createContext(null);
 function useProductCard() {
@@ -13403,6 +13404,7 @@ function ProductCardRoot(rawProps) {
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-card__body flex flex-1 flex-row items-center gap-4 px-4 py-2 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [
             props.showSku !== false && sku ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardSku, {}) : null,
             props.showName !== false ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardName, { linkable: true }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(ProductCardBelowName, {}),
             textLabelValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardTextLabels, {}) : null,
             props.showManufacturer && manufacturer ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardManufacturer, {}) : null,
             props.showShortDescription && shortDescription ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardShortDescription, {}) : null
@@ -13418,6 +13420,7 @@ function ProductCardRoot(rawProps) {
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-card__body flex flex-1 flex-col gap-1.5 p-3 sm:gap-2 sm:p-4", children: [
             props.showSku !== false && sku ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardSku, {}) : null,
             props.showName !== false ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardName, { linkable: true }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(ProductCardBelowName, {}),
             textLabelValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardTextLabels, {}) : null,
             props.showStock && !!product.inventory ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardStock, {}) }) : null,
             props.showManufacturer && manufacturer ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardManufacturer, {}) : null,
@@ -13600,6 +13603,13 @@ function ProductCardStock(props) {
     }
   );
 }
+function ProductCardBelowName() {
+  const { product, resolved } = useProductCard();
+  if (!resolved.belowName) return null;
+  const content = resolved.belowName(product);
+  if (content == null || content === false) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-card__below-name", children: content });
+}
 function ProductCardPrice(props) {
   const { product, derived, resolved } = useProductCard();
   if (!product?.price) return null;
@@ -13678,6 +13688,7 @@ ProductCard.Badges = ProductCardBadges;
 ProductCard.Favorite = ProductCardFavorite;
 ProductCard.Name = ProductCardName;
 ProductCard.Sku = ProductCardSku;
+ProductCard.BelowName = ProductCardBelowName;
 ProductCard.ShortDescription = ProductCardShortDescription;
 ProductCard.Manufacturer = ProductCardManufacturer;
 ProductCard.TextLabels = ProductCardTextLabels;
@@ -14060,7 +14071,8 @@ function ProductGrid(rawProps) {
     badgesComponent: props.badgesComponent,
     favoriteComponent: props.favoriteComponent,
     productCardComponent: props.productCardComponent,
-    clusterCardComponent: props.clusterCardComponent
+    clusterCardComponent: props.clusterCardComponent,
+    belowName: props.belowName
   };
   if (rawProps.children !== void 0) {
     const compoundCtx = {