@vkzstudio/muza-ui 1.5.2 → 1.7.0

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
+};