@vkzstudio/muza-ui 1.6.0 → 1.8.0

package/dist/components/VoucherCard/VoucherCard.js

@@ -1,17 +1,18 @@
-import { jsxs as o, Fragment as S, jsx as e } from "react/jsx-runtime";
+import { jsxs as t, Fragment as z, jsx as e } from "react/jsx-runtime";
 import * as s from "react";
-import { Slot as j } from "@radix-ui/react-slot";
-import { cva as d } from "class-variance-authority";
-import { cn as c } from "../../utils/cn.js";
-import { disabledLinkProps as z } from "../../utils/disabledLinkProps.js";
+import { Slot as I } from "@radix-ui/react-slot";
+import { cva as c } from "class-variance-authority";
+import { cn as h } from "../../utils/cn.js";
+import { disabledLinkProps as j } from "../../utils/disabledLinkProps.js";
 import { Flex as v } from "../Flex/Flex.js";
 import { Skeleton as l } from "../Skeleton/Skeleton.js";
-import { Typography as h } from "../Typography/Typography.js";
-const A = d(
+import { Typography as u } from "../Typography/Typography.js";
+import { CardImageSlot as A } from "../internal/CardImageSlot.js";
+const E = c(
   "group relative flex w-full flex-row items-start gap-comp-voucher-listview-gap border border-solid border-transparent transition-colors outline-none focus-visible:outline-none data-[disabled=true]:pointer-events-none"
-), E = d(
+), F = c(
   "line-clamp-3 text-text-dark-primary-def group-hover:text-text-brand-hover group-focus-visible:text-text-brand-focused group-data-[disabled=true]:text-text-dark-disabled"
-), F = d("line-clamp-3 min-w-0", {
+), R = c("line-clamp-3 min-w-0", {
   variants: {
     disabled: {
       true: "text-text-state-error-def",
@@ -20,34 +21,34 @@ const A = d(
   },
   defaultVariants: { disabled: !1 }
 }), f = ({
-  color: a = "default",
-  className: t,
-  ...i
-}) => /* @__PURE__ */ o(
+  color: r = "default",
+  className: i,
+  ...o
+}) => /* @__PURE__ */ t(
   "div",
   {
-    className: c(
+    className: h(
       "inline-flex w-full flex-row items-center gap-comp-voucher-listview-gap",
-      t
+      i
     ),
-    ...i,
+    ...o,
     children: [
       /* @__PURE__ */ e(
         l,
         {
-          color: a,
+          color: r,
           className: "h-comp-voucher-listview-h-img w-comp-voucher-listview-w-img shrink-0 rounded-comp-voucher-listview-radius-img"
         }
       ),
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ t(
         v,
         {
           direction: "column",
           flex: 1,
           className: "my-auto min-w-0 gap-sm py-comp-voucher-listview-p",
           children: [
-            /* @__PURE__ */ e(l, { color: a, className: "h-5 w-full max-w-60" }),
-            /* @__PURE__ */ e(l, { color: a, className: "h-4 w-40" })
+            /* @__PURE__ */ e(l, { color: r, className: "h-5 w-full max-w-60" }),
+            /* @__PURE__ */ e(l, { color: r, className: "h-4 w-40" })
           ]
         }
       )
@@ -55,45 +56,36 @@ const A = d(
   }
 );
 f.displayName = "VoucherCard.Skeleton";
-const g = ({ image: a, alt: t, wrapperClassName: i }) => /* @__PURE__ */ e("div", { className: i, children: /* @__PURE__ */ e(
-  "div",
-  {
-    className: c(
-      "absolute inset-0 overflow-hidden",
-      "[&>img]:size-full [&>img]:object-cover",
-      "transition-transform duration-300 ease-out group-hover:scale-110 group-focus-visible:scale-110",
-      "group-data-[disabled=true]:opacity-50",
-      "group-data-[disabled=true]:grayscale",
-      "group-data-[disabled=true]:group-hover:scale-100",
-      "group-data-[disabled=true]:group-focus-visible:scale-100"
-    ),
-    children: typeof a == "string" ? /* @__PURE__ */ e("img", { src: a, alt: t }) : a
-  }
-) });
-g.displayName = "VoucherCard.ImageSlot";
-const b = s.forwardRef(
-  (a, t) => {
+const T = "group-focus-visible:scale-110 group-data-[disabled=true]:group-focus-visible:scale-100", g = s.forwardRef(
+  (r, i) => {
     const {
-      title: i,
+      title: o,
       description: w,
       image: x,
-      imageAlt: N,
-      disabled: r = !1,
+      imageAlt: b,
+      placeholderIcon: N,
+      placeholderColor: C,
+      disabled: a = !1,
       asChild: y = !1,
-      href: C,
-      className: V,
-      children: n,
-      ...m
-    } = a, k = N ?? i, u = c(A(), V), p = /* @__PURE__ */ o(S, { children: [
+      href: V,
+      className: k,
+      children: d,
+      ...n
+    } = r, S = b ?? o, m = h(E(), k), p = /* @__PURE__ */ t(z, { children: [
       /* @__PURE__ */ e(
-        g,
+        A,
         {
           image: x,
-          alt: k,
+          alt: S,
+          placeholderIcon: N,
+          placeholderColor: C,
+          componentName: "VoucherCard",
+          placeholderIconClassName: "[&>svg]:size-comp-voucher-listview-icon-size",
+          innerClassName: T,
           wrapperClassName: "relative shrink-0 overflow-hidden h-comp-voucher-listview-h-img w-comp-voucher-listview-w-img rounded-comp-voucher-listview-radius-img"
         }
       ),
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ t(
         v,
         {
           direction: "column",
@@ -102,25 +94,25 @@ const b = s.forwardRef(
           className: "my-auto min-w-0 gap-sm py-comp-voucher-listview-p",
           children: [
             /* @__PURE__ */ e(
-              h,
+              u,
               {
                 component: "h3",
                 variant: "title",
                 size: "base",
                 weight: "medium",
-                className: E(),
-                children: i
+                className: F(),
+                children: o
               }
             ),
             /* @__PURE__ */ e(
-              h,
+              u,
               {
                 component: "span",
                 variant: "body",
                 size: "sm",
                 weight: "regular",
                 fixY: !0,
-                className: F({ disabled: r }),
+                className: R({ disabled: a }),
                 children: w
               }
             )
@@ -128,40 +120,40 @@ const b = s.forwardRef(
         }
       )
     ] });
-    return y && s.isValidElement(n) ? /* @__PURE__ */ e(
-      j,
+    return y && s.isValidElement(d) ? /* @__PURE__ */ e(
+      I,
       {
-        ref: t,
-        className: u,
-        "data-disabled": r || void 0,
-        "aria-disabled": r || void 0,
-        ...m,
+        ref: i,
+        className: m,
+        "data-disabled": a || void 0,
+        "aria-disabled": a || void 0,
+        ...n,
         children: s.cloneElement(
-          n,
-          r ? z : void 0,
+          d,
+          a ? j : void 0,
           p
         )
       }
     ) : /* @__PURE__ */ e(
       "a",
       {
-        ref: t,
-        href: r ? void 0 : C,
-        className: u,
-        "data-disabled": r || void 0,
-        "aria-disabled": r || void 0,
-        ...m,
+        ref: i,
+        href: a ? void 0 : V,
+        className: m,
+        "data-disabled": a || void 0,
+        "aria-disabled": a || void 0,
+        ...n,
         children: p
       }
     );
   }
 );
-b.displayName = "VoucherCard";
-const I = b;
-I.Skeleton = f;
+g.displayName = "VoucherCard";
+const D = g;
+D.Skeleton = f;
 export {
-  I as VoucherCard,
-  F as voucherCardDescriptionVariants,
-  E as voucherCardTitleVariants,
-  A as voucherCardVariants
+  D as VoucherCard,
+  R as voucherCardDescriptionVariants,
+  F as voucherCardTitleVariants,
+  E as voucherCardVariants
 };

package/dist/components/VoucherCard/VoucherCard.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof VoucherCard>;
 export default meta;
 type Story = StoryObj<typeof VoucherCard>;
 export declare const ListView: Story;
+export declare const ListViewPlaceholder: Story;
 export declare const ListViewSkeleton: Story;
 export declare const AsChildLink: Story;
 //# sourceMappingURL=VoucherCard.stories.d.ts.map

package/dist/components/VoucherCard/VoucherCard.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VoucherCard.stories.d.ts","sourceRoot":"","sources":["../../../src/components/VoucherCard/VoucherCard.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AA4D3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CA+BlC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEzC,eAAO,MAAM,QAAQ,EAAE,KAoBtB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAgB9B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAwBzB,CAAA"}
+{"version":3,"file":"VoucherCard.stories.d.ts","sourceRoot":"","sources":["../../../src/components/VoucherCard/VoucherCard.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AA4D3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAiClC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEzC,eAAO,MAAM,QAAQ,EAAE,KAoBtB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAgDjC,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAgB9B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAwBzB,CAAA"}

package/dist/components/index.d.ts

@@ -42,6 +42,7 @@ export * from './PasswordInput';
 export * from './PhoneInput';
 export * from './PinIndicator';
 export * from './Popover';
+export * from './PriceTag';
 export * from './Progress';
 export * from './Radio';
 export * from './Rating';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,iBAAiB,CAAA;AAG/B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,sBAAsB,CAAA;AACpC,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,SAAS,CAAA;AACvB,cAAc,wBAAwB,CAAA;AACtC,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,wBAAwB,CAAA;AACtC,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,yBAAyB,CAAA;AACvC,cAAc,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,iBAAiB,CAAA;AAG/B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,sBAAsB,CAAA;AACpC,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,SAAS,CAAA;AACvB,cAAc,wBAAwB,CAAA;AACtC,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,wBAAwB,CAAA;AACtC,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,yBAAyB,CAAA;AACvC,cAAc,YAAY,CAAA"}

package/dist/components/internal/CardCompactShell.d.ts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+/**
+ * Layout + stroke classes for a compact grid card. Shared verbatim by
+ * `OfferCard` and `PartnerCard` so the two never drift apart — the homepage
+ * grid mixes offers and partners in a single row, where any divergence in
+ * radius, border or hover ramp would read as a bug.
+ *
+ * Tokens stay under the `comp-offer-card-compact-*` namespace: there is one
+ * compact shell in the design system, and `OfferCard` is where it was first
+ * specified. Both cards resolve to the same Figma variables this way.
+ */
+export declare const cardCompactContainerClass = "flex-col overflow-hidden rounded-comp-offer-card-compact-radius border-comp-offer-card-stroke-default has-[a:focus-visible]:border-comp-offer-card-stroke-focused has-[a:hover]:border-comp-offer-card-stroke-hover data-[disabled=true]:border-comp-offer-card-stroke-disabled";
+/**
+ * Fill ramps for the compact shell, keyed by the `isTinted` boolean. The
+ * untinted card is transparent; the tinted one sits on
+ * `--color-surface-base-secondary` so promoted entries stand out in a grid.
+ */
+export declare const cardCompactFillClass: {
+    readonly default: "bg-comp-offer-card-fill-def-default has-[a:focus-visible]:bg-comp-offer-card-fill-def-focused has-[a:hover]:bg-comp-offer-card-fill-def-hover data-[disabled=true]:bg-comp-offer-card-fill-def-disabled";
+    readonly tinted: "bg-comp-offer-card-fill-promo-default has-[a:focus-visible]:bg-comp-offer-card-fill-promo-focused has-[a:hover]:bg-comp-offer-card-fill-promo-hover data-[disabled=true]:bg-comp-offer-card-fill-promo-disabled";
+};
+export interface CardCompactShellProps {
+    /** Image source — a URL string or a custom React node. Omit for placeholder mode. */
+    image?: string | React.ReactNode;
+    /** Alt text for the built-in `<img>`. Ignored in placeholder mode. */
+    imageAlt: string;
+    /** Icon rendered centred in the placeholder when `image` is absent. */
+    placeholderIcon?: React.ReactNode;
+    /** Any CSS color string driving the placeholder tint and icon color. */
+    placeholderColor?: string;
+    /** Owning component name, used to prefix development warnings. */
+    componentName: string;
+    /** Label for the chip pinned to the top-left of the image. Omit to hide it. */
+    category?: string;
+    /** Favorite toggle pinned to the top-right of the image. */
+    heartButton?: React.ReactNode;
+    /** Partner / merchant logo badge anchored bottom-left, half-overlapping the text. */
+    logo?: string | React.ReactNode;
+    /** Alt text for the built-in logo `<img>`. Ignored when `logo` is a React node. */
+    logoAlt: string;
+    /** Whether the owning card is disabled — drops the category chip's tint. */
+    disabled?: boolean;
+    /** Text-column content: the title link, and whatever rows sit under it. */
+    children: React.ReactNode;
+}
+/**
+ * Image block + text column of a compact grid card, shared by `OfferCard` and
+ * `PartnerCard`.
+ *
+ * Renders the 288:162 image area (photo or placeholder), the glass category
+ * chip and heart pinned over it, the optional circular logo badge, and the
+ * padded text column below. Only the text column's contents differ between
+ * the two cards — everything above the fold is identical by construction.
+ *
+ * Internal helper. Not part of the public API.
+ */
+declare const CardCompactShell: {
+    ({ image, imageAlt, placeholderIcon, placeholderColor, componentName, category, heartButton, logo, logoAlt, disabled, children, }: CardCompactShellProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface CardCompactSkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Skeleton color, forwarded to every inner `Skeleton` block. */
+    color?: 'default' | 'light';
+    /** Mirrors the card's `isTinted` so the skeleton reserves the same fill. */
+    isTinted?: boolean;
+}
+/**
+ * Loading placeholder for the compact shell, shared by `OfferCard.Skeleton`
+ * and `PartnerCard.Skeleton` for the same reason the shell itself is shared —
+ * mixed grids would otherwise show two different loading footprints side by
+ * side.
+ *
+ * Internal helper. Not part of the public API.
+ */
+declare const CardCompactSkeleton: {
+    ({ color, isTinted, className, ...props }: CardCompactSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { CardCompactShell, CardCompactSkeleton };
+//# sourceMappingURL=CardCompactShell.d.ts.map

package/dist/components/internal/CardCompactShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardCompactShell.d.ts","sourceRoot":"","sources":["../../../src/components/internal/CardCompactShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B;;;;;;;;;GASG;AACH,eAAO,MAAM,yBAAyB,oRAC6O,CAAA;AAEnR;;;;GAIG;AACH,eAAO,MAAM,oBAAoB;;;CAKvB,CAAA;AAMV,MAAM,WAAW,qBAAqB;IACpC,qFAAqF;IACrF,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAChC,sEAAsE;IACtE,QAAQ,EAAE,MAAM,CAAA;IAChB,uEAAuE;IACvE,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,kEAAkE;IAClE,aAAa,EAAE,MAAM,CAAA;IACrB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,qFAAqF;IACrF,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAC/B,mFAAmF;IACnF,OAAO,EAAE,MAAM,CAAA;IACf,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2EAA2E;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED;;;;;;;;;;GAUG;AACH,QAAA,MAAM,gBAAgB;uIAYnB,qBAAqB;;CAkEvB,CAAA;AAGD,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D,iEAAiE;IACjE,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC3B,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,mBAAmB;+CAKtB,wBAAwB;;CAuC1B,CAAA;AAGD,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/components/internal/CardCompactShell.js

@@ -0,0 +1,148 @@
+import { jsxs as a, Fragment as v, jsx as e } from "react/jsx-runtime";
+import "react";
+import { cn as m } from "../../utils/cn.js";
+import { Flex as i } from "../Flex/Flex.js";
+import { Skeleton as r } from "../Skeleton/Skeleton.js";
+import { Tag as x } from "../Tag/Tag.js";
+import { CardImageSlot as N, hasImageContent as w } from "./CardImageSlot.js";
+const q = "flex-col overflow-hidden rounded-comp-offer-card-compact-radius border-comp-offer-card-stroke-default has-[a:focus-visible]:border-comp-offer-card-stroke-focused has-[a:hover]:border-comp-offer-card-stroke-hover data-[disabled=true]:border-comp-offer-card-stroke-disabled", A = {
+  default: "bg-comp-offer-card-fill-def-default has-[a:focus-visible]:bg-comp-offer-card-fill-def-focused has-[a:hover]:bg-comp-offer-card-fill-def-hover data-[disabled=true]:bg-comp-offer-card-fill-def-disabled",
+  tinted: "bg-comp-offer-card-fill-promo-default has-[a:focus-visible]:bg-comp-offer-card-fill-promo-focused has-[a:hover]:bg-comp-offer-card-fill-promo-hover data-[disabled=true]:bg-comp-offer-card-fill-promo-disabled"
+}, p = "px-comp-offer-card-compact-p pt-comp-offer-card-compact-p-top pb-comp-offer-card-compact-p", C = ({
+  image: o,
+  imageAlt: l,
+  placeholderIcon: f,
+  placeholderColor: c,
+  componentName: n,
+  category: t,
+  heartButton: u,
+  logo: d,
+  logoAlt: b,
+  disabled: h,
+  children: g
+}) => {
+  const s = w(o);
+  return /* @__PURE__ */ a(v, { children: [
+    /* @__PURE__ */ a("div", { className: "relative w-full shrink-0", children: [
+      /* @__PURE__ */ a(
+        N,
+        {
+          image: o,
+          alt: l,
+          placeholderIcon: f,
+          placeholderColor: c,
+          componentName: n,
+          wrapperClassName: "relative aspect-[288/162] w-full overflow-hidden",
+          children: [
+            s && /* @__PURE__ */ e(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: "absolute inset-0 bg-gradient-to-t from-black/0 from-50% to-black/70"
+              }
+            ),
+            /* @__PURE__ */ a("div", { className: "absolute top-comp-offer-card-compact-p-img right-comp-offer-card-compact-p-img left-comp-offer-card-compact-p-img flex items-start justify-between gap-sm", children: [
+              t ? /* @__PURE__ */ e(
+                x,
+                {
+                  variant: s ? "invert" : void 0,
+                  color: s || h ? void 0 : c,
+                  className: "min-w-[50px] shrink overflow-hidden",
+                  children: t
+                }
+              ) : /* @__PURE__ */ e("span", {}),
+              u
+            ] })
+          ]
+        }
+      ),
+      d && /* @__PURE__ */ e(
+        "div",
+        {
+          className: m(
+            "pointer-events-none absolute bottom-comp-offer-card-compact-logo-y left-comp-offer-card-compact-logo-x z-10 size-comp-offer-card-compact-logo-size overflow-hidden rounded-full border-2 border-stroke-base-secondary bg-comp-offer-card-fill-def-default",
+            "[&>img]:size-full [&>img]:object-cover",
+            "group-data-[disabled=true]:grayscale"
+          ),
+          children: typeof d == "string" ? /* @__PURE__ */ e("img", { src: d, alt: b }) : d
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(
+      i,
+      {
+        direction: "column",
+        flex: 1,
+        gap: "2xs",
+        className: p,
+        children: g
+      }
+    )
+  ] });
+};
+C.displayName = "CardCompactShell";
+const k = ({
+  color: o = "default",
+  isTinted: l = !1,
+  className: f,
+  ...c
+}) => /* @__PURE__ */ a(
+  "div",
+  {
+    className: m(
+      "inline-flex flex-col overflow-hidden rounded-comp-offer-card-compact-radius border border-solid border-comp-offer-card-stroke-default",
+      l ? "bg-comp-offer-card-fill-promo-default" : "bg-comp-offer-card-fill-def-default",
+      f
+    ),
+    ...c,
+    children: [
+      /* @__PURE__ */ a("div", { className: "relative aspect-[288/162] w-full shrink-0 overflow-hidden", children: [
+        /* @__PURE__ */ e(
+          r,
+          {
+            color: o,
+            className: "absolute inset-0 size-full rounded-none"
+          }
+        ),
+        /* @__PURE__ */ a("div", { className: "absolute top-comp-offer-card-compact-p-img right-comp-offer-card-compact-p-img left-comp-offer-card-compact-p-img flex items-center justify-between", children: [
+          /* @__PURE__ */ e(
+            r,
+            {
+              color: o,
+              className: "h-comp-tag-h-def w-16 rounded-full"
+            }
+          ),
+          /* @__PURE__ */ e(
+            r,
+            {
+              color: o,
+              className: "size-comp-button-h-xs rounded-full"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ a(
+        i,
+        {
+          direction: "column",
+          flex: 1,
+          gap: "2xs",
+          className: p,
+          children: [
+            /* @__PURE__ */ e(r, { color: o, className: "h-5 w-full" }),
+            /* @__PURE__ */ e(r, { color: o, className: "h-5 w-3/4" }),
+            /* @__PURE__ */ e(r, { color: o, className: "mt-2xs h-4 w-32" }),
+            /* @__PURE__ */ e(r, { color: o, className: "mt-2xs h-4 w-24" })
+          ]
+        }
+      )
+    ]
+  }
+);
+k.displayName = "CardCompactSkeleton";
+export {
+  C as CardCompactShell,
+  k as CardCompactSkeleton,
+  q as cardCompactContainerClass,
+  A as cardCompactFillClass
+};

package/dist/components/internal/CardImageSlot.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+/**
+ * Whether an `image` prop carries something renderable. Cards use this to
+ * decide whether their image-overlay chrome (gradients, glass chips, inverted
+ * icon buttons) should render in photo mode or placeholder mode.
+ */
+export declare const hasImageContent: (image?: string | React.ReactNode) => boolean;
+export interface CardImageSlotProps {
+    /** Image source — a URL string (rendered as a plain `<img>`) or a custom React node. */
+    image?: string | React.ReactNode;
+    /** Alt text for the built-in `<img>`. Ignored in placeholder mode. */
+    alt: string;
+    /** Classes applied to the wrapper `<div>` — sizing, rounded corners, overflow. */
+    wrapperClassName: string;
+    /** Extra classes merged into the inner image layer (hover/focus zoom tweaks). */
+    innerClassName?: string;
+    /** Icon rendered centred in the placeholder when `image` is absent. */
+    placeholderIcon?: React.ReactNode;
+    /** Any CSS color string driving the placeholder tint and icon color. */
+    placeholderColor?: string;
+    /**
+     * Classes applied to the placeholder layer — used to size the icon. Defaults to
+     * the large market-category icon token.
+     */
+    placeholderIconClassName?: string;
+    /** Owning component name, used to prefix development warnings. */
+    componentName: string;
+    /** Overlays rendered on top of the image (gradient, tag chips). */
+    children?: React.ReactNode;
+}
+/**
+ * Renders a card image inside a wrapper that handles sizing and rounded
+ * corners. When `image` is a string we render a plain `<img>`; when it's a
+ * React node (e.g. Next.js `<Image>`) we render it as-is. The image sits in
+ * its own absolutely-positioned inner layer that carries the hover zoom and
+ * the disabled dim (opacity + grayscale), so the dim reaches any image node —
+ * including a `<picture>` or nested-`<img>` custom node — without fading the
+ * overlaid gradient/tag chips rendered as `children`. A direct `<img>` is
+ * auto-stretched to fill the layer, so consumers don't need sizing classes.
+ *
+ * When `image` is absent the same layer renders a decorative placeholder
+ * instead: a flat tint derived from `placeholderColor` at 20% alpha with
+ * `placeholderIcon` centred in the full color. Without a `placeholderColor`
+ * it falls back to the brand-tertiary tint with a tertiary icon. It carries
+ * the same hover zoom as the image path, so the icon grows on hover exactly
+ * like a photo would; disabled swaps both tint and icon for the neutral
+ * disabled surface instead of dimming the colored one.
+ *
+ * Internal helper shared by the card components. Not part of the public API.
+ */
+declare const CardImageSlot: {
+    ({ image, alt, wrapperClassName, innerClassName, placeholderIcon, placeholderColor, placeholderIconClassName, componentName, children, }: CardImageSlotProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { CardImageSlot };
+//# sourceMappingURL=CardImageSlot.d.ts.map

package/dist/components/internal/CardImageSlot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardImageSlot.d.ts","sourceRoot":"","sources":["../../../src/components/internal/CardImageSlot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAoB9B;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM,GAAG,KAAK,CAAC,SAAS,KAAG,OACjB,CAAA;AAElD,MAAM,WAAW,kBAAkB;IACjC,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAChC,sEAAsE;IACtE,GAAG,EAAE,MAAM,CAAA;IACX,kFAAkF;IAClF,gBAAgB,EAAE,MAAM,CAAA;IACxB,iFAAiF;IACjF,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,uEAAuE;IACvE,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;OAGG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC,kEAAkE;IAClE,aAAa,EAAE,MAAM,CAAA;IACrB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,aAAa;8IAUhB,kBAAkB;;CA2EpB,CAAA;AAGD,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/internal/CardImageSlot.js

@@ -0,0 +1,85 @@
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import "react";
+import b from "color";
+import { cn as u } from "../../utils/cn.js";
+const m = (r) => {
+  try {
+    return b(r);
+  } catch {
+    return null;
+  }
+}, g = /* @__PURE__ */ new Set(), p = (r, o) => {
+  process.env.NODE_ENV === "production" || g.has(r) || (g.add(r), console.warn(o));
+}, h = (r) => r != null && r !== !1 && r !== "", v = ({
+  image: r,
+  alt: o,
+  wrapperClassName: i,
+  innerClassName: d,
+  placeholderIcon: l,
+  placeholderColor: e,
+  placeholderIconClassName: f = "[&>svg]:size-comp-market-category-ico-ico-size-lg",
+  componentName: t,
+  children: n
+}) => {
+  if (h(r))
+    return /* @__PURE__ */ c("div", { className: i, children: [
+      /* @__PURE__ */ s(
+        "div",
+        {
+          className: u(
+            "absolute inset-0 overflow-hidden",
+            "[&>img]:size-full [&>img]:object-cover",
+            "transition-transform duration-300 ease-out group-hover:scale-110",
+            "group-data-[disabled=true]:opacity-50",
+            "group-data-[disabled=true]:grayscale",
+            "group-data-[disabled=true]:group-hover:scale-100",
+            d
+          ),
+          children: typeof r == "string" ? /* @__PURE__ */ s("img", { src: r, alt: o }) : r
+        }
+      ),
+      n
+    ] });
+  l || p(
+    `${t}:no-placeholder-icon`,
+    `[${t}] \`image\` was omitted without a \`placeholderIcon\` — rendering an empty image slot.`
+  );
+  const a = e ? m(e) : null;
+  return e && !a && p(
+    `${t}:invalid-color:${e}`,
+    `[${t}] Invalid \`placeholderColor\` "${e}". Falling back to neutral styling.`
+  ), /* @__PURE__ */ c("div", { className: i, children: [
+    /* @__PURE__ */ s(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: u(
+          "absolute inset-0 flex items-center justify-center overflow-hidden",
+          a ? "bg-(--card-image-slot-placeholder-bg) text-(--card-image-slot-placeholder-fg)" : "bg-surface-brand-brand-tertiary text-icon-dark-tertiary",
+          // Disabled swaps the tint outright rather than dimming it — the
+          // design system gives the placeholder its own disabled ramp. Both
+          // layers use the same translucent token, so the icon reads as a
+          // slightly darker grey where it stacks over the fill.
+          "group-data-[disabled=true]:bg-surface-dark-secondary-disabled group-data-[disabled=true]:text-surface-dark-secondary-disabled",
+          // Same zoom the image path uses — the flat tint already covers the
+          // slot, so what visibly grows is the icon.
+          "transition-transform duration-300 ease-out group-hover:scale-110",
+          "group-data-[disabled=true]:group-hover:scale-100",
+          d,
+          f
+        ),
+        style: a ? {
+          "--card-image-slot-placeholder-bg": a.alpha(0.2).toString(),
+          "--card-image-slot-placeholder-fg": a.toString()
+        } : void 0,
+        children: l
+      }
+    ),
+    n
+  ] });
+};
+v.displayName = "CardImageSlot";
+export {
+  v as CardImageSlot,
+  h as hasImageContent
+};