@vkzstudio/muza-ui 1.2.0 → 1.3.0

package/dist/components/OfferCard/OfferCard.js

@@ -0,0 +1,423 @@
+import { jsx as e, jsxs as r, Fragment as D } from "react/jsx-runtime";
+import * as w from "react";
+import { cva as z } from "class-variance-authority";
+import { HeartButton as Q } from "../HeartButton/HeartButton.js";
+import { Rating as U } from "../Rating/Rating.js";
+import { cn as s } from "../../utils/cn.js";
+import { Typography as n } from "../Typography/Typography.js";
+import { disabledLinkProps as X } from "../../utils/disabledLinkProps.js";
+import { Tag as Z } from "../Tag/Tag.js";
+import { Flex as f } from "../Flex/Flex.js";
+import { DotDivider as ee } from "../DotDivider/DotDivider.js";
+import { Skeleton as o } from "../Skeleton/Skeleton.js";
+const ae = z(
+  "group relative inline-flex border border-solid transition-colors focus-visible:outline-none data-[disabled=true]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        compact: "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",
+        search: "flex-row gap-comp-offer-card-search-gap border-transparent"
+      },
+      type: {
+        default: "",
+        promo: ""
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "compact",
+        type: "default",
+        class: "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"
+      },
+      {
+        variant: "compact",
+        type: "promo",
+        class: "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"
+      }
+    ],
+    defaultVariants: { variant: "compact", type: "default" }
+  }
+), re = z("", {
+  variants: {
+    variant: {
+      compact: "text-text-dark-primary-def group-has-[a:focus-visible]:text-text-brand-focused group-has-[a:hover]:text-text-brand-hover group-data-[disabled=true]:text-text-dark-disabled",
+      search: "text-text-dark-primary-def group-has-[a:focus-visible]:text-text-brand-focused group-has-[a:hover]:text-text-brand-hover group-data-[disabled=true]:text-text-dark-disabled"
+    }
+  },
+  defaultVariants: { variant: "compact" }
+}), oe = z("", {
+  variants: {
+    variant: {
+      compact: "mt-auto line-clamp-1 text-text-dark-secondary group-has-[a:focus-visible]:text-text-brand-focused group-data-[disabled=true]:text-text-dark-disabled",
+      search: "line-clamp-1 text-text-dark-secondary group-has-[a:focus-visible]:text-text-brand-focused group-data-[disabled=true]:text-text-dark-disabled"
+    }
+  },
+  defaultVariants: { variant: "compact" }
+}), k = ({ rating: c, ratingCount: a, disabled: t }) => /* @__PURE__ */ r(f, { align: "center", gap: "2xs", children: [
+  /* @__PURE__ */ e(U, { value: c, allowHalf: !0, disabled: t }),
+  a != null && /* @__PURE__ */ r(
+    n,
+    {
+      component: "span",
+      variant: "body",
+      size: "sm",
+      weight: "regular",
+      fixY: !0,
+      className: s(
+        t ? "text-text-dark-disabled" : "text-text-dark-primary-def"
+      ),
+      children: [
+        "(",
+        a,
+        ")"
+      ]
+    }
+  )
+] });
+k.displayName = "OfferCard.RatingRow";
+const E = ({
+  variant: c = "compact",
+  color: a = "default",
+  type: t = "default",
+  className: l,
+  ...m
+}) => c === "compact" ? /* @__PURE__ */ r(
+  "div",
+  {
+    className: s(
+      "inline-flex flex-col overflow-hidden rounded-comp-offer-card-compact-radius border border-solid border-comp-offer-card-stroke-default",
+      t === "promo" ? "bg-comp-offer-card-fill-promo-default" : "bg-comp-offer-card-fill-def-default",
+      l
+    ),
+    ...m,
+    children: [
+      /* @__PURE__ */ r("div", { className: "relative aspect-[288/162] w-full shrink-0 overflow-hidden", children: [
+        /* @__PURE__ */ e(
+          o,
+          {
+            color: a,
+            className: "absolute inset-0 size-full rounded-none"
+          }
+        ),
+        /* @__PURE__ */ r("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(
+            o,
+            {
+              color: a,
+              className: "h-comp-tag-h-def w-16 rounded-full"
+            }
+          ),
+          /* @__PURE__ */ e(
+            o,
+            {
+              color: a,
+              className: "size-comp-button-h-xs rounded-full"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ r(
+        f,
+        {
+          direction: "column",
+          flex: 1,
+          gap: "2xs",
+          className: "px-comp-offer-card-compact-p pt-comp-offer-card-compact-p-top pb-comp-offer-card-compact-p",
+          children: [
+            /* @__PURE__ */ e(o, { color: a, className: "h-5 w-full" }),
+            /* @__PURE__ */ e(o, { color: a, className: "h-5 w-3/4" }),
+            /* @__PURE__ */ e(o, { color: a, className: "mt-2xs h-4 w-32" }),
+            /* @__PURE__ */ e(o, { color: a, className: "mt-2xs h-4 w-24" })
+          ]
+        }
+      )
+    ]
+  }
+) : /* @__PURE__ */ r(
+  "div",
+  {
+    className: s(
+      "inline-flex flex-row gap-comp-offer-card-search-gap",
+      l
+    ),
+    ...m,
+    children: [
+      /* @__PURE__ */ r("div", { className: "relative h-comp-offer-card-search-h-img w-comp-offer-card-search-w-img shrink-0 overflow-hidden rounded-comp-offer-card-search-radius-img", children: [
+        /* @__PURE__ */ e(
+          o,
+          {
+            color: a,
+            className: "absolute inset-0 size-full rounded-none"
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "absolute top-comp-offer-card-search-p-img left-comp-offer-card-search-p-img", children: /* @__PURE__ */ e(
+          o,
+          {
+            color: a,
+            className: "size-comp-button-h-xs rounded-full"
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ r(
+        f,
+        {
+          direction: "column",
+          flex: 1,
+          gap: "sm",
+          className: "min-w-0 gap-comp-offer-card-search-gap-text pt-comp-offer-card-search-p-top-text",
+          children: [
+            /* @__PURE__ */ e(o, { color: a, className: "h-5 w-full" }),
+            /* @__PURE__ */ e(o, { color: a, className: "h-4 w-40" }),
+            /* @__PURE__ */ e(o, { color: a, className: "h-4 w-32" })
+          ]
+        }
+      )
+    ]
+  }
+);
+E.displayName = "OfferCard.Skeleton";
+const y = ({
+  image: c,
+  alt: a,
+  wrapperClassName: t,
+  children: l
+}) => /* @__PURE__ */ r("div", { className: t, children: [
+  /* @__PURE__ */ e(
+    "div",
+    {
+      className: s(
+        "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"
+      ),
+      children: typeof c == "string" ? /* @__PURE__ */ e("img", { src: c, alt: a }) : c
+    }
+  ),
+  l
+] });
+y.displayName = "OfferCard.ImageSlot";
+const L = w.forwardRef(
+  (c, a) => {
+    const {
+      name: t,
+      image: l,
+      imageAlt: m,
+      logo: i,
+      logoAlt: T,
+      category: C,
+      description: p,
+      vendor: u,
+      rating: b,
+      ratingCount: j,
+      favorite: B,
+      defaultFavorite: O,
+      onFavoriteChange: h,
+      favoriteAriaLabel: H,
+      showFavorite: P = !0,
+      variant: g = "compact",
+      type: W = "default",
+      disabled: d = !1,
+      asChild: _ = !1,
+      href: $,
+      className: q,
+      children: v,
+      ...G
+    } = c, R = m ?? t, V = T ?? `${u ?? t} logo`, J = re({ variant: g }), S = oe({ variant: g }), x = b != null, K = s(
+      ae({ variant: g, type: W }),
+      q
+    ), A = 'outline-none after:absolute after:inset-0 after:rounded-[inherit] after:content-[""] focus-visible:outline-none', F = /* @__PURE__ */ e(
+      n,
+      {
+        component: "h3",
+        variant: "title",
+        size: "base",
+        weight: "medium",
+        className: s("line-clamp-2", J),
+        children: t
+      }
+    ), I = _ && w.isValidElement(v) ? w.cloneElement(
+      v,
+      {
+        className: s(A, v.props.className),
+        ...d ? X : null
+      },
+      F
+    ) : /* @__PURE__ */ e("a", { href: d ? void 0 : $, className: A, children: F }), Y = P && /* @__PURE__ */ e(
+      Q,
+      {
+        active: B,
+        defaultActive: O,
+        onClick: h !== void 0 || O !== void 0 ? (se, M) => h == null ? void 0 : h(M) : void 0,
+        "aria-label": H,
+        disabled: d,
+        className: "relative z-10"
+      }
+    );
+    let N = null;
+    return g === "compact" ? N = /* @__PURE__ */ r(D, { children: [
+      /* @__PURE__ */ r("div", { className: "relative w-full shrink-0", children: [
+        /* @__PURE__ */ r(
+          y,
+          {
+            image: l,
+            alt: R,
+            wrapperClassName: "relative aspect-[288/162] w-full overflow-hidden",
+            children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  className: "absolute inset-0 bg-gradient-to-t from-black/0 from-50% to-black/70"
+                }
+              ),
+              /* @__PURE__ */ r("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: [
+                C ? /* @__PURE__ */ e(
+                  Z,
+                  {
+                    variant: "invert",
+                    className: "min-w-[50px] shrink overflow-hidden",
+                    children: C
+                  }
+                ) : /* @__PURE__ */ e("span", {}),
+                Y
+              ] })
+            ]
+          }
+        ),
+        i && /* @__PURE__ */ e(
+          "div",
+          {
+            className: s(
+              "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 i == "string" ? /* @__PURE__ */ e("img", { src: i, alt: V }) : i
+          }
+        )
+      ] }),
+      /* @__PURE__ */ r(
+        f,
+        {
+          direction: "column",
+          flex: 1,
+          gap: "2xs",
+          className: "px-comp-offer-card-compact-p pt-comp-offer-card-compact-p-top pb-comp-offer-card-compact-p",
+          children: [
+            I,
+            x && /* @__PURE__ */ e(
+              k,
+              {
+                rating: b,
+                ratingCount: j,
+                disabled: d
+              }
+            ),
+            p && /* @__PURE__ */ e(
+              n,
+              {
+                component: "span",
+                variant: "body",
+                size: "sm",
+                weight: "regular",
+                fixY: !0,
+                className: S,
+                children: p
+              }
+            )
+          ]
+        }
+      )
+    ] }) : N = /* @__PURE__ */ r(D, { children: [
+      /* @__PURE__ */ r(
+        y,
+        {
+          image: l,
+          alt: R,
+          wrapperClassName: "relative shrink-0 overflow-hidden rounded-comp-offer-card-search-radius-img h-comp-offer-card-search-h-img w-comp-offer-card-search-w-img",
+          children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: "absolute inset-0 bg-gradient-to-b from-black/50 to-black/0 to-50%"
+              }
+            ),
+            i && /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-surface-base-overlay", children: /* @__PURE__ */ e("div", { className: "size-comp-offer-card-search-logo-size overflow-hidden rounded-full border-(length:--spacing-comp-offer-card-search-logo-stroke) border-solid border-stroke-base-secondary group-data-[disabled=true]:grayscale [&>img]:size-full [&>img]:object-cover", children: typeof i == "string" ? /* @__PURE__ */ e("img", { src: i, alt: V }) : i }) }),
+            /* @__PURE__ */ e("div", { className: "absolute top-comp-offer-card-search-p-img left-comp-offer-card-search-p-img", children: Y })
+          ]
+        }
+      ),
+      /* @__PURE__ */ r(
+        f,
+        {
+          direction: "column",
+          flex: 1,
+          className: "min-w-0 gap-comp-offer-card-search-gap-text pt-comp-offer-card-search-p-top-text",
+          children: [
+            I,
+            /* @__PURE__ */ r(f, { align: "center", gap: "sm", wrap: "wrap", children: [
+              u && /* @__PURE__ */ e(
+                n,
+                {
+                  component: "span",
+                  variant: "body",
+                  size: "base",
+                  weight: "regular",
+                  fixY: !0,
+                  className: s(
+                    d ? "text-text-dark-disabled" : "text-text-dark-primary-def"
+                  ),
+                  children: u
+                }
+              ),
+              u && x && /* @__PURE__ */ e(ee, {}),
+              x && /* @__PURE__ */ e(
+                k,
+                {
+                  rating: b,
+                  ratingCount: j,
+                  disabled: d
+                }
+              )
+            ] }),
+            p && /* @__PURE__ */ e(
+              n,
+              {
+                component: "span",
+                variant: "body",
+                size: "sm",
+                weight: "regular",
+                fixY: !0,
+                className: S,
+                children: p
+              }
+            )
+          ]
+        }
+      )
+    ] }), /* @__PURE__ */ e(
+      "div",
+      {
+        ref: a,
+        className: K,
+        "data-disabled": d || void 0,
+        "aria-disabled": d || void 0,
+        ...G,
+        children: N
+      }
+    );
+  }
+);
+L.displayName = "OfferCard";
+const te = L;
+te.Skeleton = E;
+export {
+  te as OfferCard,
+  oe as offerCardDescriptionVariants,
+  re as offerCardTitleVariants,
+  ae as offerCardVariants
+};

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

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { OfferCard } from './OfferCard';
+declare const meta: Meta<typeof OfferCard>;
+export default meta;
+type Story = StoryObj<typeof OfferCard>;
+export declare const Compact: Story;
+export declare const CompactSkeleton: Story;
+export declare const CompactPromo: Story;
+export declare const CompactPromoSkeleton: Story;
+export declare const Search: Story;
+export declare const SearchSkeleton: Story;
+export declare const WithFavoriteControlled: Story;
+export declare const WithFavoriteNonInteractive: Story;
+export declare const AsChildLink: Story;
+//# sourceMappingURL=OfferCard.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OfferCard.stories.d.ts","sourceRoot":"","sources":["../../../src/components/OfferCard/OfferCard.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAyIvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAiDhC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAA;AAEvC,eAAO,MAAM,OAAO,EAAE,KA0BrB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAgB7B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAgBlC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KA4BpB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAgB5B,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,KAyBpC,CAAA;AAED,eAAO,MAAM,0BAA0B,EAAE,KAmBxC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAuBzB,CAAA"}

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

@@ -0,0 +1,2 @@
+export * from './OfferCard';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/OfferCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/dist/components/PartnerCard/PartnerCard.d.ts

@@ -0,0 +1,234 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const partnerCardVariants: (props?: ({
+    variant?: "search" | "heroLarge" | "heroSmall" | "listView" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const partnerCardTitleVariants: (props?: ({
+    variant?: "search" | "heroLarge" | "heroSmall" | "listView" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type PartnerCardVariant = 'search' | 'heroLarge' | 'heroSmall' | 'listView';
+/** Props for the `PartnerCard.Skeleton` subcomponent. */
+export interface PartnerCardSkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * Visual layout variant — mirrors `PartnerCard.variant` so the skeleton
+     * reserves the same footprint as the card it stands in for.
+     *
+     * @default 'search'
+     */
+    variant?: PartnerCardVariant;
+    /**
+     * Skeleton color, forwarded to every inner `Skeleton` block. Use `'light'`
+     * when the skeleton sits on a tinted surface.
+     *
+     * @default 'default'
+     */
+    color?: 'default' | 'light';
+}
+declare const PartnerCardSkeleton: {
+    ({ variant, color, className, ...props }: PartnerCardSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Content props shared between the default-anchor and `asChild` shapes of
+ * PartnerCard.
+ */
+export interface PartnerCardBaseProps extends Omit<VariantProps<typeof partnerCardVariants>, 'variant'> {
+    /** Partner / venue title — rendered inside the clickable link. */
+    name: string;
+    /**
+     * Image source — either a URL string (rendered as a plain `<img>`) or a
+     * custom React node such as a Next.js `<Image>` element. The wrapper
+     * handles sizing, rounded corners, overflow, and the disabled dim; any
+     * direct `<img>` child is auto-stretched to fill the wrapper.
+     */
+    image: string | React.ReactNode;
+    /**
+     * Alt text for the built-in `<img>` (used when `image` is a string).
+     *
+     * - `search` — defaults to `name`.
+     * - `heroLarge` / `heroSmall` — defaults to `""` (the image is decorative;
+     *   the title already conveys the meaning).
+     *
+     * Ignored when `image` is a custom React node.
+     */
+    imageAlt?: string;
+    /**
+     * Address line rendered under the title on the `search` variant. Ignored
+     * on the hero variants.
+     */
+    address?: string;
+    /**
+     * Pre-formatted distance string (e.g. `"20 km"`) rendered next to the map
+     * button on the `search` variant. Format the value on the consumer side.
+     * Ignored on the hero variants.
+     */
+    distance?: string;
+    /**
+     * Display-only rating (0–5). Renders the existing `Rating` component with
+     * `allowHalf` and `disabled` (display mode). Omit to hide the rating row.
+     */
+    rating?: number;
+    /** Review count shown as `(N)` next to the rating. Only shown when `rating` is set. */
+    ratingCount?: number;
+    /**
+     * Single category label rendered as a glass-style chip on the hero
+     * variants (`heroLarge`, `heroSmall`). When `tags` is also provided on a
+     * hero variant, `category` renders first followed by the entries of
+     * `tags`, capped together by `maxNumberOfVisibleTags` with a `+N`
+     * overflow chip. Ignored on `search` — use `categoryIcon` + `tags` for
+     * the search row instead.
+     */
+    category?: string;
+    /**
+     * Icon node rendered inside the colored `CategoryIcon` badge (search
+     * variant). Pair with `categoryColor`. Omit both to hide the badge.
+     */
+    categoryIcon?: React.ReactNode;
+    /**
+     * Color used for the `CategoryIcon` badge background tint and icon
+     * foreground (search variant). Required when `categoryIcon` is set.
+     */
+    categoryColor?: string;
+    /**
+     * Additional category / partner-type chips. On the `search` variant they
+     * render next to the `CategoryIcon`; on the hero variants they render
+     * after `category` in the glass-style chip row. Overflow collapses into a
+     * `+N` counter chip (mirrors the `MultiSelect`/`ArticleCard` pattern). On
+     * `search`, the visible count is forced to 1 below the mobile breakpoint
+     * (≤768px) — same behavior as `ArticleCard`.
+     */
+    tags?: string[];
+    /**
+     * Maximum number of chips rendered before overflow collapses into a `+N`
+     * counter chip. On the hero variants this caps the combined total of
+     * `category` (if set) and `tags`.
+     *
+     * @default 3
+     */
+    maxNumberOfVisibleTags?: number;
+    /**
+     * Optional partner / merchant logo rendered centered on a dark overlay on
+     * top of the `search` image. Either a URL string (rendered as a plain
+     * `<img>`) or a custom React node such as a Next.js `<Image>`.
+     */
+    logo?: string | React.ReactNode;
+    /**
+     * Alt text for the built-in logo `<img>` (used when `logo` is a string).
+     * Defaults to `${name} logo`. Ignored when `logo` is a custom React node.
+     */
+    logoAlt?: string;
+    /**
+     * Controlled favorite state for the embedded `HeartButton`. When provided,
+     * the heart does not manage its own state.
+     */
+    favorite?: boolean;
+    /** Initial favorite state for uncontrolled usage. @default false */
+    defaultFavorite?: boolean;
+    /** Fires when the favorite is toggled. Receives the new active value. */
+    onFavoriteChange?: (active: boolean) => void;
+    /**
+     * Accessible label for the embedded `HeartButton`. Defaults to the
+     * localized `translations.heartButton.toggleFavorite`.
+     */
+    favoriteAriaLabel?: string;
+    /**
+     * Whether to render the embedded `HeartButton` on the `search` variant.
+     * Has no effect on the hero variants (hero cards never render a heart).
+     *
+     * @default true
+     */
+    showFavorite?: boolean;
+    /**
+     * Fires when the "Map" button is clicked on the `search` variant. Pass
+     * this handler to render the map button; omit to hide it. Ignored on
+     * the hero variants.
+     */
+    onMapClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Override for the map-button label.
+     *
+     * @default translations.partnerCard.mapButton
+     */
+    mapLabel?: string;
+    /**
+     * Visual layout variant.
+     *
+     * - `search` — horizontal image-left card for partner result lists.
+     *   Reflows to a narrower image-left layout on mobile.
+     * - `heroLarge` — large image-as-background card with a glass-style
+     *   category tag and overlaid title. Renders `h-full w-full` and fills
+     *   whatever cell its parent grid hands it.
+     * - `heroSmall` — same archetype as `heroLarge` (image background, glass
+     *   category tag, overlaid title) with tighter padding, smaller gap, and
+     *   a smaller title — sized for the secondary tiles in a bento layout.
+     *   Also renders `h-full w-full`, so the consumer's grid cell decides
+     *   the dimensions.
+     * - `listView` — compact card with a square thumbnail on the left for
+     *   tightly-packed result lists. The text column reflows at the `md`
+     *   breakpoint (768px): on desktop, distance and address sit on a single
+     *   inline row separated by a `DotDivider`; on mobile they split onto
+     *   their own lines and the rating row moves directly under the title.
+     *   `onMapClick` and `logo` are ignored on this variant — the design has
+     *   no slot for them.
+     *
+     * @default 'search'
+     */
+    variant?: PartnerCardVariant;
+    /**
+     * Disabled visual state. Dims the image and grays the text. The anchor's
+     * `href` is also stripped so the card is non-navigable; the embedded
+     * `HeartButton` and map `Button` disable alongside the card.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * Default shape — PartnerCard renders an `<a href>` (stretched-link) as the
+ * primary clickable surface and the structured content as siblings.
+ */
+export interface PartnerCardLinkProps extends PartnerCardBaseProps, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'title' | 'children' | 'href' | 'type'> {
+    /**
+     * URL the card navigates to when activated. Required unless `asChild` is
+     * used. Stripped from the rendered DOM when `disabled` is true so the
+     * anchor becomes non-navigable while keeping its visual state.
+     */
+    href: string;
+    /** Discriminant: omit (or set to `false`) for the built-in `<a>` shape. Set to `true` to switch to the `asChild` shape. */
+    asChild?: false;
+    /** Not accepted in the default `<a>` shape — the card composes its own structured content. Use `asChild` to swap the inner link element. */
+    children?: never;
+}
+/**
+ * Escape-hatch shape — hand the clickable anchor off to a consumer-provided
+ * `<Link>` (Next.js, React Router, …) via Radix `Slot`. The card's
+ * structured content stays in the wrapping `<div>`; only the inner link
+ * element is swapped.
+ */
+export interface PartnerCardAsChildProps extends PartnerCardBaseProps, Omit<React.HTMLAttributes<HTMLElement>, 'title' | 'children'> {
+    /**
+     * Replaces the built-in `<a>` link element with the consumer's child via
+     * Radix `Slot`, so the click target can be a router `<Link>` (Next.js,
+     * React Router, …). Pass a self-closing element; the card injects the
+     * title as its child.
+     */
+    asChild: true;
+    /** Self-closing link element to use as the click target. Its children are replaced with the card title. */
+    children: React.ReactElement;
+    /** Not accepted in the `asChild` shape — set `href` on the consumer-provided child instead. */
+    href?: never;
+}
+/**
+ * Props for the PartnerCard component.
+ *
+ * The card is a link by default. Pass `href` for the built-in `<a>`, or
+ * `asChild` with a self-closing child to swap in a router `<Link>`.
+ */
+export type PartnerCardProps = PartnerCardLinkProps | PartnerCardAsChildProps;
+declare const PartnerCard: React.ForwardRefExoticComponent<PartnerCardProps & React.RefAttributes<HTMLDivElement>>;
+declare const PartnerCardWithSkeleton: typeof PartnerCard & {
+    Skeleton: typeof PartnerCardSkeleton;
+};
+export { PartnerCardWithSkeleton as PartnerCard, partnerCardVariants, partnerCardTitleVariants, };
+export type { PartnerCardVariant };
+//# sourceMappingURL=PartnerCard.d.ts.map