@vkzstudio/muza-ui 1.2.0 → 1.4.0

package/dist/components/LanguageSwitcher/LanguageSwitcher.js

@@ -1,12 +1,12 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { useState as w, useEffect as b } from "react";
-import { cva as g } from "class-variance-authority";
-import { DropdownMenu as y, DropdownMenuTrigger as D, DropdownMenuContent as z, DropdownMenuRadioGroup as M, DropdownMenuRadioItem as N } from "../DropdownMenu/DropdownMenu.js";
-import { Button as S } from "../Button/Button.js";
+import { jsxs as i, jsx as e, Fragment as b } from "react/jsx-runtime";
+import { useState as y, useEffect as z } from "react";
+import { cva as f } from "class-variance-authority";
+import { DropdownMenu as D, DropdownMenuTrigger as M, DropdownMenuContent as N, DropdownMenuRadioGroup as S, DropdownMenuRadioItem as A } from "../DropdownMenu/DropdownMenu.js";
+import { Button as I } from "../Button/Button.js";
 import { cn as v } from "../../utils/cn.js";
-import { Typography as A } from "../Typography/Typography.js";
-import { AltArrowDownOutline as I } from "@solar-icons/react-perf";
-const T = g(
+import { Typography as g } from "../Typography/Typography.js";
+import { AltArrowDownOutline as T } from "@solar-icons/react-perf";
+const j = f(
   "group flex cursor-pointer items-center gap-sm focus-visible:focus-default disabled:pointer-events-none",
   {
     variants: {
@@ -29,7 +29,7 @@ const T = g(
     },
     defaultVariants: { variant: "default" }
   }
-), j = g(
+), k = f(
   "size-[12px] transition-transform duration-300 group-data-[state=open]:rotate-180",
   {
     variants: {
@@ -47,79 +47,89 @@ const T = g(
     defaultVariants: { variant: "default" }
   }
 ), Y = ({
-  languages: i,
+  languages: a,
   onValueChange: o,
-  defaultValue: f,
-  value: s,
-  isIconButton: h,
-  buttonProps: x,
-  disabled: n,
+  defaultValue: h,
+  value: n,
+  isIconButton: x,
+  buttonProps: w,
+  disabled: s,
   variant: c
 }) => {
   var p;
-  const [l, d] = w(
-    f || ((p = i[0]) == null ? void 0 : p.value) || ""
+  const [d, m] = y(
+    h || ((p = a[0]) == null ? void 0 : p.value) || ""
   );
-  b(() => {
-    s && d(s);
-  }, [s]);
-  const e = i.find(({ value: r }) => r === l);
-  return /* @__PURE__ */ a(y, { children: [
-    /* @__PURE__ */ t(D, { asChild: !0, children: h ? /* @__PURE__ */ t(
-      S,
+  z(() => {
+    n && m(n);
+  }, [n]);
+  const t = a.find(({ value: r }) => r === d);
+  return /* @__PURE__ */ i(D, { children: [
+    /* @__PURE__ */ e(M, { asChild: !0, children: x ? /* @__PURE__ */ e(
+      I,
       {
         variant: "tertiary",
         size: "sm",
-        disabled: n,
-        ...x,
-        icon: e == null ? void 0 : e.icon
+        disabled: s,
+        ...w,
+        icon: t == null ? void 0 : t.icon
       }
-    ) : /* @__PURE__ */ a(
+    ) : /* @__PURE__ */ i(
       "button",
       {
-        disabled: n,
-        className: v(T({ variant: c })),
+        disabled: s,
+        className: v(j({ variant: c })),
         children: [
-          /* @__PURE__ */ t(
-            A,
-            {
-              component: "span",
-              size: "sm",
-              weight: "medium",
-              variant: "body",
-              fixY: !0,
-              children: e ? /* @__PURE__ */ a("span", { className: "flex items-center gap-sm [&>svg]:size-icon-small group-disabled:[&>svg]:opacity-50", children: [
-                e.icon && e.icon,
-                e.name
-              ] }) : null
-            }
-          ),
-          /* @__PURE__ */ t(
-            I,
+          t && /* @__PURE__ */ i(b, { children: [
+            /* @__PURE__ */ e(
+              g,
+              {
+                component: "span",
+                size: "sm",
+                weight: "medium",
+                variant: "body",
+                className: "pb-[0.1em] group-disabled:opacity-50 [&>svg]:size-icon-small",
+                children: t.icon && t.icon
+              }
+            ),
+            /* @__PURE__ */ e(
+              g,
+              {
+                component: "span",
+                size: "sm",
+                weight: "medium",
+                variant: "body",
+                fixY: !0,
+                children: t.name
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(
+            T,
             {
-              className: v(j({ variant: c }))
+              className: v(k({ variant: c }))
             }
           )
         ]
       }
     ) }),
-    /* @__PURE__ */ t(z, { className: "w-50", side: "top", align: "start", children: /* @__PURE__ */ t(
-      M,
+    /* @__PURE__ */ e(N, { className: "w-50", side: "top", align: "start", children: /* @__PURE__ */ e(
+      S,
       {
-        value: l,
+        value: d,
         onValueChange: (r) => {
-          d(r), o == null || o(r);
+          m(r), o == null || o(r);
         },
-        children: i.map(({ name: r, value: m, icon: u }) => /* @__PURE__ */ t(N, { value: m, children: /* @__PURE__ */ a("span", { className: "flex items-center gap-sm [&>svg]:size-icon-small", children: [
+        children: a.map(({ name: r, value: l, icon: u }) => /* @__PURE__ */ e(A, { value: l, children: /* @__PURE__ */ i("span", { className: "flex items-center gap-sm [&>svg]:size-icon-small", children: [
           u && u,
           r
-        ] }) }, m))
+        ] }) }, l))
       }
     ) })
   ] });
 };
 export {
   Y as LanguageSwitcher,
-  j as languageSwitcherChevronVariants,
-  T as languageSwitcherTriggerVariants
+  k as languageSwitcherChevronVariants,
+  j as languageSwitcherTriggerVariants
 };

package/dist/components/LoginScreen/LoginScreen.d.ts

@@ -28,6 +28,15 @@ export interface LoginScreenProps {
     languages?: LanguageOption[];
     /** Fires when the selected language changes. Receives the new language value. */
     onLanguageChange?: (value: string) => void;
+    /**
+     * Initial selected language value for uncontrolled usage of the switcher.
+     * @default languages[0].value
+     */
+    defaultLanguage?: string;
+    /** Controlled selected language value. Use with `onLanguageChange` for controlled behavior. */
+    language?: string;
+    /** Prevents interaction with the language switcher and applies disabled styling. @default false */
+    languageSwitcherDisabled?: boolean;
     /**
      * Path to a .glb 3D model file for the right panel.
      * Falls back to the bundled Login3D.glb when not specified.
@@ -35,6 +44,6 @@ export interface LoginScreenProps {
      */
     modelPath?: string;
 }
-declare const LoginScreen: ({ children, className, logo, languages, onLanguageChange, modelPath, }: LoginScreenProps) => import("react/jsx-runtime").JSX.Element;
+declare const LoginScreen: ({ children, className, logo, languages, onLanguageChange, defaultLanguage, language, languageSwitcherDisabled, modelPath, }: LoginScreenProps) => import("react/jsx-runtime").JSX.Element;
 export { LoginScreen };
 //# sourceMappingURL=LoginScreen.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LoginScreen.d.ts","sourceRoot":"","sources":["../../../src/components/LoginScreen/LoginScreen.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAoB,MAAM,qBAAqB,CAAA;AAG3E;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,yHAAyH;IACzH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,cAAc,EAAE,CAAA;IAC5B,iFAAiF;IACjF,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,WAAW,GAAI,wEAOlB,gBAAgB,4CAkClB,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"LoginScreen.d.ts","sourceRoot":"","sources":["../../../src/components/LoginScreen/LoginScreen.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAoB,MAAM,qBAAqB,CAAA;AAG3E;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,yHAAyH;IACzH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,cAAc,EAAE,CAAA;IAC5B,iFAAiF;IACjF,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mGAAmG;IACnG,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,WAAW,GAAI,6HAUlB,gBAAgB,4CAqClB,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/LoginScreen/LoginScreen.js

@@ -1,45 +1,51 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { AnimatePresence as o } from "framer-motion";
-import { useIsDesktop as d } from "../../hooks/use-is-desktop.js";
-import { LoginScreen3D as f } from "./LoginScreen3D/LoginScreen3D.js";
-import { LanguageSwitcher as h } from "../LanguageSwitcher/LanguageSwitcher.js";
-import { cn as a } from "../../utils/cn.js";
-const j = ({
+import { AnimatePresence as f } from "framer-motion";
+import { useIsDesktop as h } from "../../hooks/use-is-desktop.js";
+import { LoginScreen3D as x } from "./LoginScreen3D/LoginScreen3D.js";
+import { LanguageSwitcher as p } from "../LanguageSwitcher/LanguageSwitcher.js";
+import { cn as v } from "../../utils/cn.js";
+const _ = ({
   children: t,
-  className: m,
+  className: l,
   logo: s,
   languages: i = [],
-  onLanguageChange: c,
-  modelPath: l
+  onLanguageChange: m,
+  defaultLanguage: c,
+  language: n,
+  languageSwitcherDisabled: o,
+  modelPath: d
 }) => {
-  const n = d();
+  const a = h();
   return /* @__PURE__ */ r(
     "div",
     {
-      className: a(
+      className: v(
         "grid size-full min-h-[100svh] grid-cols-2 bg-surface-base-tertiary",
         "max-lg:grid-cols-1",
-        m
+        l
       ),
       children: [
         /* @__PURE__ */ r("div", { className: "flex flex-col p-2xl", children: [
           /* @__PURE__ */ r("div", { className: "flex items-center justify-between", children: [
             s && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center [&_img]:h-xl [&_img]:w-auto [&_svg]:h-xl [&_svg]:w-auto", children: s }),
             (i == null ? void 0 : i.length) > 1 && /* @__PURE__ */ e(
-              h,
+              p,
               {
                 languages: i,
-                onValueChange: c
+                onValueChange: m,
+                defaultValue: c,
+                value: n,
+                disabled: o
               }
             )
           ] }),
-          /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ e(o, { children: t }) })
+          /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ e(f, { children: t }) })
         ] }),
-        /* @__PURE__ */ e("div", { className: "p-md max-lg:hidden", children: n && /* @__PURE__ */ e(f, { modelPath: l }) })
+        /* @__PURE__ */ e("div", { className: "p-md max-lg:hidden", children: a && /* @__PURE__ */ e(x, { modelPath: d }) })
       ]
     }
   );
 };
 export {
-  j as LoginScreen
+  _ as LoginScreen
 };

package/dist/components/MarketNav/MarketNav.examples.d.ts

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+/** A single category link shown in the category bar, dropdowns and mobile menu. */
+export interface CategoryItem {
+    /** Stable identifier used for the active-item comparison. */
+    value: string;
+    /** Visible category label. */
+    label: string;
+    /** Leading icon (rendered at 20px). */
+    icon: ReactNode;
+    /** Disables the category link. */
+    disabled?: boolean;
+}
+/** A single wallet balance — label + pre-formatted amount, optionally interactive. */
+export interface Balance {
+    /** Balance label, e.g. "Benefity". */
+    label: string;
+    /** Pre-formatted balance amount, e.g. "1 200,00 Kč". */
+    value: string;
+    /**
+     * Optional handler — when provided the balance becomes an interactive
+     * "credits" link (Figma `State=Hover`); otherwise it renders as static text.
+     */
+    onSelect?: () => void;
+}
+/** A single account-menu action, shared by the desktop/tablet dropdown and the phone drawer. */
+export interface AccountAction {
+    /** Stable identifier. */
+    key: string;
+    /** Visible label. */
+    label: string;
+    /** Optional leading icon. */
+    icon?: ReactNode;
+    /** Greys out the item and blocks interaction. */
+    disabled?: boolean;
+    /**
+     * Invoked when the action is selected. Defined once here so the desktop /
+     * tablet dropdown and the phone drawer stay in sync — both call this.
+     */
+    onSelect?: () => void;
+}
+/** Props for the MarketNav example composition. */
+export interface MarketNavProps {
+    /** Category links rendered in the secondary bar / mobile menu. */
+    categories: CategoryItem[];
+    /** One or more wallet balances shown next to the user controls. */
+    balances: Balance[];
+    /** Logged-in user's name shown on the account trigger. */
+    userName: string;
+    /** Number shown on the favourites badge / account menu. Hidden when `0`/omitted. */
+    favouritesCount?: number;
+    /** Hide the secondary category bar (e.g. on a checkout page). @default true */
+    showCategories?: boolean;
+    /** Start with the balances masked. @default false */
+    defaultBalancesHidden?: boolean;
+}
+export declare const categories: CategoryItem[];
+export declare const balances: Balance[];
+export declare const userName = "Anna Novotn\u00E1";
+export declare const MarketNav: ({ categories, balances, userName, favouritesCount, showCategories, defaultBalancesHidden, }: MarketNavProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MarketNav.examples.d.ts.map

package/dist/components/MarketNav/MarketNav.examples.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarketNav.examples.d.ts","sourceRoot":"","sources":["../../../src/components/MarketNav/MarketNav.examples.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAA;AAiD3D,mFAAmF;AACnF,MAAM,WAAW,YAAY;IAC3B,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,uCAAuC;IACvC,IAAI,EAAE,SAAS,CAAA;IACf,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,sFAAsF;AACtF,MAAM,WAAW,OAAO;IACtB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,gGAAgG;AAChG,MAAM,WAAW,aAAa;IAC5B,yBAAyB;IACzB,GAAG,EAAE,MAAM,CAAA;IACX,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,mDAAmD;AACnD,MAAM,WAAW,cAAc;IAC7B,kEAAkE;IAClE,UAAU,EAAE,YAAY,EAAE,CAAA;IAC1B,mEAAmE;IACnE,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAA;IAChB,oFAAoF;IACpF,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,qDAAqD;IACrD,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AAID,eAAO,MAAM,UAAU,EAAE,YAAY,EAcpC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,OAAO,EAAkD,CAAA;AAEhF,eAAO,MAAM,QAAQ,sBAAiB,CAAA;AAwUtC,eAAO,MAAM,SAAS,GAAI,6FAOvB,cAAc,4CA4fhB,CAAA"}

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { MarketNavProps } from './MarketNav.examples';
+declare const meta: Meta<MarketNavProps>;
+export default meta;
+type Story = StoryObj<MarketNavProps>;
+export declare const Responsive: Story;
+export declare const BenefitsHidden: Story;
+export declare const NoCategories: Story;
+//# sourceMappingURL=MarketNav.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarketNav.stories.d.ts","sourceRoot":"","sources":["../../../src/components/MarketNav/MarketNav.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAEL,KAAK,cAAc,EAIpB,MAAM,sBAAsB,CAAA;AAG7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,cAAc,CA6C9B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAA;AAErC,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAc5B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAA"}

package/dist/components/MultiSelect/MultiSelect.js

@@ -2,11 +2,11 @@ import { jsx as t, jsxs as p } from "react/jsx-runtime";
 import u, { forwardRef as L, useId as U, useMemo as k, useRef as G, useEffect as H } from "react";
 import { triggerWrapperVariants as J } from "../Select/utils.js";
 import { useMuzaTranslations as K } from "../../translations/TranslationContext.js";
-import { Tag as f } from "../Tag/Tag.js";
 import { FormField as Q } from "../FormField/FormField.js";
 import { DropdownMenu as X, DropdownMenuTrigger as Y, DropdownMenuContent as Z, DropdownMenuCheckboxItem as ee } from "../DropdownMenu/DropdownMenu.js";
 import { Typography as I } from "../Typography/Typography.js";
 import { Flex as z } from "../Flex/Flex.js";
+import { Tag as f } from "../Tag/Tag.js";
 import { AltArrowUpOutline as te } from "@solar-icons/react-perf";
 import { cn as re } from "../../utils/cn.js";
 const ne = L(

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

@@ -0,0 +1,206 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const offerCardVariants: (props?: ({
+    variant?: "search" | "compact" | null | undefined;
+    type?: "default" | "promo" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const offerCardTitleVariants: (props?: ({
+    variant?: "search" | "compact" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const offerCardDescriptionVariants: (props?: ({
+    variant?: "search" | "compact" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type OfferCardVariant = 'compact' | 'search';
+type OfferCardType = 'default' | 'promo';
+/** Props for the `OfferCard.Skeleton` subcomponent. */
+export interface OfferCardSkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * Visual layout variant — mirrors `OfferCard.variant` so the skeleton
+     * reserves the same footprint as the card it stands in for.
+     *
+     * @default 'compact'
+     */
+    variant?: OfferCardVariant;
+    /**
+     * Skeleton color, forwarded to every inner `Skeleton` block. Use `'light'`
+     * when the skeleton sits on a tinted surface.
+     *
+     * @default 'default'
+     */
+    color?: 'default' | 'light';
+    /**
+     * Mirrors `OfferCard.type` so the skeleton reserves the same tinted
+     * background when standing in for a `'promo'` compact card. Has no effect
+     * on the `'search'` variant.
+     *
+     * @default 'default'
+     */
+    type?: OfferCardType;
+}
+declare const OfferCardSkeleton: {
+    ({ variant, color, type, className, ...props }: OfferCardSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Content props shared between the default-anchor and `asChild` shapes of
+ * OfferCard. Variant/size/styling lives here; the link target and the
+ * children/asChild axis are split into the two members of the discriminated
+ * union below.
+ */
+export interface OfferCardBaseProps extends Omit<VariantProps<typeof offerCardVariants>, 'variant' | 'type'> {
+    /** Offer title — primary heading 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).
+     * Defaults to `name`. Ignored when `image` is a custom React node.
+     */
+    imageAlt?: string;
+    /**
+     * Optional partner / merchant logo — either a URL string (rendered as a
+     * plain `<img>`) or a custom React node such as a Next.js `<Image>`.
+     *
+     * - `compact`: rendered as a 72px circular badge with a 2px secondary-stroke
+     *   ring, anchored at the bottom-left of the image and half-overlapping the
+     *   text area.
+     * - `search`: rendered as a centered square (96px desktop, 40px mobile) on
+     *   top of a dark overlay that fills the image area.
+     *
+     * Omit to hide the logo.
+     */
+    logo?: string | React.ReactNode;
+    /**
+     * Alt text for the built-in logo `<img>` (used when `logo` is a string).
+     * Defaults to `${vendor ?? name} logo`. Ignored when `logo` is a custom
+     * React node.
+     */
+    logoAlt?: string;
+    /**
+     * Optional category label rendered as a single glass-style tag chip in the
+     * top-left corner of the image. Resolve the category ID to a display label
+     * before passing it in.
+     */
+    category?: string;
+    /**
+     * Optional secondary description rendered below the title — typically a
+     * short qualifier such as `"Online purchase"`.
+     */
+    description?: string;
+    /**
+     * Vendor or partner name. Rendered next to the rating (separated by a
+     * `DotDivider`) on the `search` variant; ignored on `compact`.
+     */
+    vendor?: 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;
+    /**
+     * 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`. Set to `false` for cards
+     * that should never expose a favorite affordance. @default true
+     */
+    showFavorite?: boolean;
+    /**
+     * Visual layout variant.
+     *
+     * - `compact` — grid card with image on top; fills the parent grid cell.
+     * - `search` — horizontal image-left card for search result lists; reflows
+     *   to a narrower image-left layout on mobile.
+     *
+     * @default 'compact'
+     */
+    variant?: OfferCardVariant;
+    /**
+     * Fill style for the `compact` variant. `'promo'` swaps the card's
+     * transparent fill for a tinted `--color-surface-base-secondary`
+     * background, visually highlighting promoted offers in a grid. Has no
+     * effect on the `search` variant.
+     *
+     * @default 'default'
+     */
+    type?: OfferCardType;
+    /**
+     * Disabled visual state. Adds the disabled border, dims the image, and
+     * grays the text. The anchor's `href` is also stripped so the card is
+     * non-navigable; the embedded `HeartButton` disables alongside the card.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * Default shape — OfferCard renders an `<a href>` (stretched-link) as the
+ * primary clickable surface and the structured content as siblings.
+ */
+export interface OfferCardLinkProps extends OfferCardBaseProps, 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 OfferCardAsChildProps extends OfferCardBaseProps, 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 OfferCard 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 OfferCardProps = OfferCardLinkProps | OfferCardAsChildProps;
+declare const OfferCard: React.ForwardRefExoticComponent<OfferCardProps & React.RefAttributes<HTMLDivElement>>;
+declare const OfferCardWithSkeleton: typeof OfferCard & {
+    Skeleton: typeof OfferCardSkeleton;
+};
+export { OfferCardWithSkeleton as OfferCard, offerCardVariants, offerCardTitleVariants, offerCardDescriptionVariants, };
+export type { OfferCardType };
+//# sourceMappingURL=OfferCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OfferCard.d.ts","sourceRoot":"","sources":["../../../src/components/OfferCard/OfferCard.tsx"],"names":[],"mappings":"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"}