@vkzstudio/muza-ui 1.6.0 → 1.8.0

package/dist/components/Dialog/Dialog.d.ts

@@ -20,11 +20,28 @@ export interface DialogContentProps extends ComponentPropsWithoutRef<typeof Dial
     /**
      * Shrinks the content region's top and bottom padding to
      * `--spacing-comp-dialog-p-hor-sm` for a more compact dialog. Header and
-     * footer keep their own padding and stay flush to the edges.
+     * footer keep their own padding and stay flush to the edges. Combined with
+     * `isFullscreenOnMobile`, a bare-content dialog keeps this compact bottom
+     * padding at fullscreen too.
      *
      * @default false
      */
     smallerContentYpadding?: boolean;
+    /**
+     * Below the `md` breakpoint (768px), renders the dialog edge-to-edge over
+     * the whole viewport: the overlay gutter, the `max-w-*` cap and the corner
+     * radius all come off. Above `md` the dialog is unchanged.
+     *
+     * A bare-content dialog moves its close button in-flow to the top right and
+     * scrolls as a whole. A dialog with a `DialogHeader` / `DialogFooter` is
+     * pinned to the full screen height with the content region scrolling
+     * between them. Without a `DialogHeader` a close button is rendered at the
+     * top of the content region, because at fullscreen there is no overlay to
+     * tap; with `DialogHeader hideCloseButton` provide your own `DialogClose`.
+     *
+     * @default false
+     */
+    isFullscreenOnMobile?: boolean;
 }
 declare const Dialog: React.FC<DialogProps>;
 declare const DialogTitle: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
@@ -48,10 +65,6 @@ declare const DialogTrigger: import('react').ForwardRefExoticComponent<DialogPri
 declare const DialogPortal: import('react').FC<DialogPrimitive.DialogPortalProps>;
 declare const DialogClose: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
 declare const DialogOverlay: import('react').ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const DialogContent: import('react').ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
-    size?: "small" | "medium" | "large";
-    closeAriaLabel?: string;
-    smallerContentYpadding?: boolean;
-} & import('react').RefAttributes<HTMLDivElement>>;
+declare const DialogContent: import('react').ForwardRefExoticComponent<DialogContentProps & import('react').RefAttributes<HTMLDivElement>>;
 export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
 //# sourceMappingURL=Dialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,wBAAwB,EAE7B,KAAK,SAAS,EAGf,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAMzD,6EAA6E;AAC7E,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IACzD,2CAA2C;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,qCAAqC;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,4FAA4F;IAC5F,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,kHAAkH;AAClH,MAAM,WAAW,kBACf,SAAQ,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC;IAChE,sEAAsE;IACtE,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;;;OAMG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;CACjC;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAwB,CAAA;AAC1D,QAAA,MAAM,WAAW,iIAAwB,CAAA;AACzC,QAAA,MAAM,iBAAiB,yIAA8B,CAAA;AAsBrD,iHAAiH;AACjH,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACtD,wDAAwD;IACxD,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,2DAA2D;IAC3D,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,sEAAsE;IACtE,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,QAAA,MAAM,YAAY,8GAyDjB,CAAA;AAGD,6IAA6I;AAC7I,MAAM,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAE/D,QAAA,MAAM,YAAY,2MAejB,CAAA;AAGD,QAAA,MAAM,aAAa,kIAA0B,CAAA;AAC7C,QAAA,MAAM,YAAY,uDAAyB,CAAA;AAC3C,QAAA,MAAM,WAAW,gIAAwB,CAAA;AAEzC,QAAA,MAAM,aAAa,4LAYjB,CAAA;AAGF,QAAA,MAAM,aAAa;WAGR,OAAO,GAAG,QAAQ,GAAG,OAAO;qBAClB,MAAM;6BACE,OAAO;kDA4FnC,CAAA;AAGD,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAA"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,wBAAwB,EAE7B,KAAK,SAAS,EAGf,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAMzD,6EAA6E;AAC7E,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IACzD,2CAA2C;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,qCAAqC;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,4FAA4F;IAC5F,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,kHAAkH;AAClH,MAAM,WAAW,kBACf,SAAQ,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC;IAChE,sEAAsE;IACtE,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;;;;;OAQG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC;;;;;;;;;;;;;OAaG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAwB,CAAA;AAC1D,QAAA,MAAM,WAAW,iIAAwB,CAAA;AACzC,QAAA,MAAM,iBAAiB,yIAA8B,CAAA;AAsBrD,iHAAiH;AACjH,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACtD,wDAAwD;IACxD,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,2DAA2D;IAC3D,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,sEAAsE;IACtE,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,QAAA,MAAM,YAAY,8GAyDjB,CAAA;AAGD,6IAA6I;AAC7I,MAAM,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAE/D,QAAA,MAAM,YAAY,2MAejB,CAAA;AAGD,QAAA,MAAM,aAAa,kIAA0B,CAAA;AAC7C,QAAA,MAAM,YAAY,uDAAyB,CAAA;AAC3C,QAAA,MAAM,WAAW,gIAAwB,CAAA;AAEzC,QAAA,MAAM,aAAa,4LAYjB,CAAA;AAGF,QAAA,MAAM,aAAa,+GA+HlB,CAAA;AAGD,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAA"}

package/dist/components/Dialog/Dialog.js

@@ -1,68 +1,68 @@
-import { jsx as a, jsxs as p, Fragment as N } from "react/jsx-runtime";
-import { forwardRef as n, Children as L, isValidElement as w } from "react";
+import { jsx as a, jsxs as n, Fragment as D } from "react/jsx-runtime";
+import { forwardRef as b, Children as T, isValidElement as k } from "react";
 import * as e from "@radix-ui/react-dialog";
-import { useMuzaTranslations as D } from "../../translations/TranslationContext.js";
-import { cn as r } from "../../utils/cn.js";
+import { useMuzaTranslations as C } from "../../translations/TranslationContext.js";
+import { cn as i } from "../../utils/cn.js";
 import "@solar-icons/react-perf";
-import { XClose as T } from "../Icons/CustomIcons.js";
-import { typographyVariants as z } from "../Typography/Typography.js";
-const q = e.Root, G = e.Title, I = e.Description, k = ({
-  className: i,
+import { XClose as z } from "../Icons/CustomIcons.js";
+import { typographyVariants as H } from "../Typography/Typography.js";
+const J = e.Root, K = e.Title, Q = e.Description, w = ({
+  className: t,
   ariaLabel: o
 }) => /* @__PURE__ */ a(
   e.Close,
   {
-    className: r(
+    className: i(
       "cursor-pointer text-icon-dark-primary-def focus-visible-default transition-opacity disabled:pointer-events-none",
-      i
+      t
     ),
     "aria-label": o,
-    children: /* @__PURE__ */ a(T, { className: "size-icon-medium" })
+    children: /* @__PURE__ */ a(z, { className: "size-icon-medium" })
   }
-), F = n(
+), j = b(
   ({
-    className: i,
+    className: t,
     icon: o,
-    children: t,
-    title: s,
-    hideCloseButton: m = !1,
-    closeAriaLabel: g,
-    ...b
-  }, f) => {
-    const y = D(), c = g ?? y.dialog.closeAriaLabel;
+    children: r,
+    title: m,
+    hideCloseButton: d = !1,
+    closeAriaLabel: s,
+    ...f
+  }, h) => {
+    const y = C(), g = s ?? y.dialog.closeAriaLabel;
     return /* @__PURE__ */ a(
       "div",
       {
-        ref: f,
-        className: r(
+        ref: h,
+        className: i(
           "-mx-comp-dialog-p -mt-comp-dialog-p border-b border-stroke-base-primary px-comp-dialog-p py-comp-dialog-p-hor-def",
-          i
+          t
         ),
-        ...b,
-        children: /* @__PURE__ */ p("div", { className: "flex items-center gap-comp-dialog-gap", children: [
-          /* @__PURE__ */ p("div", { className: "flex min-w-0 flex-1 items-center gap-sm", children: [
+        ...f,
+        children: /* @__PURE__ */ n("div", { className: "flex items-center gap-comp-dialog-gap", children: [
+          /* @__PURE__ */ n("div", { className: "flex min-w-0 flex-1 items-center gap-sm", children: [
             o && /* @__PURE__ */ a("span", { className: "text-icon-brand-def [&>svg]:size-icon-medium", children: o }),
             /* @__PURE__ */ a(
               e.Title,
               {
-                className: r(
+                className: i(
                   "min-w-0 flex-1 text-text-dark-primary-def",
-                  z({
+                  H({
                     variant: "title",
                     size: "md",
                     weight: "medium",
                     fixY: !0
                   })
                 ),
-                children: s ?? t
+                children: m ?? r
               }
             )
           ] }),
-          !m && /* @__PURE__ */ a(
-            k,
+          !d && /* @__PURE__ */ a(
+            w,
             {
               className: "shrink-0",
-              ariaLabel: c
+              ariaLabel: g
             }
           )
         ] })
@@ -70,112 +70,148 @@ const q = e.Root, G = e.Title, I = e.Description, k = ({
     );
   }
 );
-F.displayName = "DialogHeader";
-const H = n(
-  ({ className: i, children: o, ...t }, s) => /* @__PURE__ */ a(
+j.displayName = "DialogHeader";
+const P = b(
+  ({ className: t, children: o, ...r }, m) => /* @__PURE__ */ a(
     "div",
     {
-      ref: s,
-      className: r(
+      ref: m,
+      className: i(
         "-mx-comp-dialog-p -mb-comp-dialog-p flex items-center justify-end gap-sm border-t border-stroke-base-primary px-comp-dialog-p py-comp-dialog-p-hor-sm",
-        i
+        t
       ),
-      ...t,
+      ...r,
       children: o
     }
   )
 );
-H.displayName = "DialogFooter";
-const J = e.Trigger, j = e.Portal, K = e.Close, C = n(({ className: i, ...o }, t) => /* @__PURE__ */ a(
+P.displayName = "DialogFooter";
+const S = e.Trigger, R = e.Portal, U = e.Close, L = b(({ className: t, ...o }, r) => /* @__PURE__ */ a(
   e.Overlay,
   {
-    ref: t,
-    className: r(
+    ref: r,
+    className: i(
       "fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-surface-base-overlay px-layout-p-standard py-comp-dialog-p-hor-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
-      i
+      t
     ),
     ...o
   }
 ));
-C.displayName = e.Overlay.displayName;
-const O = n(
+L.displayName = e.Overlay.displayName;
+const V = b(
   ({
-    className: i,
+    className: t,
     children: o,
-    size: t = "medium",
-    closeAriaLabel: s,
-    smallerContentYpadding: m = !1,
-    ...g
-  }, b) => {
-    const f = D(), y = s ?? f.dialog.closeAriaLabel, c = L.toArray(o), u = c.find(
+    size: r = "medium",
+    closeAriaLabel: m,
+    smallerContentYpadding: d = !1,
+    isFullscreenOnMobile: s = !1,
+    ...f
+  }, h) => {
+    const y = C(), g = m ?? y.dialog.closeAriaLabel, u = T.toArray(o), v = u.find(
       (l) => {
-        var d;
-        return w(l) && ((d = l.type) == null ? void 0 : d.displayName) === "DialogHeader";
+        var p;
+        return k(l) && ((p = l.type) == null ? void 0 : p.displayName) === "DialogHeader";
       }
-    ), h = c.find(
+    ), N = u.find(
       (l) => {
-        var d;
-        return w(l) && ((d = l.type) == null ? void 0 : d.displayName) === "DialogFooter";
+        var p;
+        return k(l) && ((p = l.type) == null ? void 0 : p.displayName) === "DialogFooter";
       }
-    ), A = c.filter(
-      (l) => l !== u && l !== h
-    ), x = !!u, v = !!h;
-    return /* @__PURE__ */ a(j, { children: /* @__PURE__ */ a(C, { children: /* @__PURE__ */ a(
-      e.Content,
+    ), A = u.filter(
+      (l) => l !== v && l !== N
+    ), c = !!v, x = !!N;
+    return /* @__PURE__ */ a(R, { children: /* @__PURE__ */ a(
+      L,
       {
-        ref: b,
-        className: r(
-          "relative flex w-full flex-col rounded-comp-dialog-radius bg-surface-base-secondary px-comp-dialog-p duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          {
-            "max-w-comp-dialog-w-sm": t === "small",
-            "max-w-comp-dialog-w-md": t === "medium",
-            "max-w-comp-dialog-w-lg": t === "large",
-            "max-h-[calc(100vh-var(--spacing-comp-dialog-p-hor-overlay)*2)]": v || x
-          },
-          // Header/footer bleed to the edges via negative margins that cancel
-          // the root vertical padding, so it stays standard when either is
-          // present. A bare content dialog is padded directly by the root.
-          x || v ? "py-comp-dialog-p" : m ? "py-comp-dialog-p-hor-sm" : "pt-5xl pb-comp-dialog-p",
-          i
+        className: i(
+          s && "max-md:place-items-stretch max-md:px-0 max-md:py-0"
         ),
-        ...g,
-        children: x || v ? /* @__PURE__ */ p(N, { children: [
-          u,
-          /* @__PURE__ */ a(
-            "div",
-            {
-              className: r(
-                "-mr-[calc(var(--spacing-comp-dialog-p)-8px)] min-h-0 flex-1 overflow-y-auto pr-[calc(var(--spacing-comp-dialog-p)-8px-5px)] [&::-webkit-scrollbar]:w-[5px] [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-stroke-base-secondary hover:[&::-webkit-scrollbar-thumb]:bg-stroke-base-primary [&::-webkit-scrollbar-track]:bg-transparent",
-                m ? "py-comp-dialog-p-hor-sm" : "py-comp-dialog-p"
+        children: /* @__PURE__ */ a(
+          e.Content,
+          {
+            ref: h,
+            className: i(
+              "relative flex w-full flex-col rounded-comp-dialog-radius bg-surface-base-secondary px-comp-dialog-p duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+              {
+                "max-w-comp-dialog-w-sm": r === "small",
+                "max-w-comp-dialog-w-md": r === "medium",
+                "max-w-comp-dialog-w-lg": r === "large",
+                "max-h-[calc(100vh-var(--spacing-comp-dialog-p-hor-overlay)*2)]": x || c
+              },
+              // Header/footer bleed to the edges via negative margins that cancel
+              // the root vertical padding, so it stays standard when either is
+              // present. A bare content dialog is padded directly by the root.
+              c || x ? "py-comp-dialog-p" : d ? "py-comp-dialog-p-hor-sm" : "pt-5xl pb-comp-dialog-p",
+              // `max-w-none` is unusable: the design system defines
+              // `--spacing-none`, so Tailwind resolves it to `0px`.
+              s && "max-md:max-w-[none] max-md:rounded-none",
+              s && (c || x ? (
+                // The overlay's grid row is auto-sized, so the column needs
+                // a definite height for the `flex-1` middle to scroll in.
+                "max-md:h-dvh max-md:max-h-dvh"
+              ) : (
+                // Tokens follow the design's fullscreen frame, which binds
+                // the primitives rather than the dialog tokens.
+                [
+                  "max-md:px-layout-p-standard max-md:pt-xl",
+                  !d && "max-md:pb-3xl"
+                ]
+              )),
+              t
+            ),
+            ...f,
+            children: c || x ? /* @__PURE__ */ n(D, { children: [
+              v,
+              /* @__PURE__ */ n(
+                "div",
+                {
+                  className: i(
+                    "-mr-[calc(var(--spacing-comp-dialog-p)-8px)] min-h-0 flex-1 overflow-y-auto pr-[calc(var(--spacing-comp-dialog-p)-8px-5px)] [&::-webkit-scrollbar]:w-[5px] [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-stroke-base-secondary hover:[&::-webkit-scrollbar-thumb]:bg-stroke-base-primary [&::-webkit-scrollbar-track]:bg-transparent",
+                    d ? "py-comp-dialog-p-hor-sm" : "py-comp-dialog-p"
+                  ),
+                  children: [
+                    s && !c && /* @__PURE__ */ a(
+                      w,
+                      {
+                        className: "mb-xl ml-auto block md:hidden",
+                        ariaLabel: g
+                      }
+                    ),
+                    /* @__PURE__ */ a("div", { children: A })
+                  ]
+                }
               ),
-              children: /* @__PURE__ */ a("div", { children: A })
-            }
-          ),
-          h
-        ] }) : /* @__PURE__ */ p(N, { children: [
-          o,
-          /* @__PURE__ */ a(
-            k,
-            {
-              className: "absolute top-4 right-4",
-              ariaLabel: y
-            }
-          )
-        ] })
+              N
+            ] }) : /* @__PURE__ */ n(D, { children: [
+              o,
+              /* @__PURE__ */ a(
+                w,
+                {
+                  className: i(
+                    "absolute top-4 right-4",
+                    s && "max-md:static max-md:order-first max-md:mb-xl max-md:self-end"
+                  ),
+                  ariaLabel: g
+                }
+              )
+            ] })
+          }
+        )
       }
-    ) }) });
+    ) });
   }
 );
-O.displayName = e.Content.displayName;
+V.displayName = e.Content.displayName;
 export {
-  q as Dialog,
-  K as DialogClose,
-  O as DialogContent,
-  I as DialogDescription,
-  H as DialogFooter,
-  F as DialogHeader,
-  C as DialogOverlay,
-  j as DialogPortal,
-  G as DialogTitle,
-  J as DialogTrigger
+  J as Dialog,
+  U as DialogClose,
+  V as DialogContent,
+  Q as DialogDescription,
+  P as DialogFooter,
+  j as DialogHeader,
+  L as DialogOverlay,
+  R as DialogPortal,
+  K as DialogTitle,
+  S as DialogTrigger
 };

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

@@ -17,4 +17,7 @@ export declare const OverflowContent: Story;
 export declare const WithHeaderAndFooter: Story;
 export declare const SmallerContentYPadding: Story;
 export declare const WithHeaderAndFooterLongContent: Story;
+export declare const FullscreenOnMobile: Story;
+export declare const FullscreenOnMobileWithHeaderAndFooter: Story;
+export declare const FullscreenOnMobileFooterOnly: Story;
 //# sourceMappingURL=Dialog.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,OAAO,EACL,MAAM,EAOP,MAAM,UAAU,CAAA;AAEjB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAiD7B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;AAEtC,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAoDnB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KA+BvB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAkBpB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAkBnB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAkB7B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KA2CjC,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,KAuCpC,CAAA;AAED,eAAO,MAAM,8BAA8B,EAAE,KAiK5C,CAAA"}
+{"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,OAAO,EACL,MAAM,EAOP,MAAM,UAAU,CAAA;AAEjB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAiD7B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;AAEtC,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAoDnB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KA+BvB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAkBpB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAkBnB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAkB7B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KA2CjC,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,KAuCpC,CAAA;AAED,eAAO,MAAM,8BAA8B,EAAE,KAiK5C,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA6HhC,CAAA;AAED,eAAO,MAAM,qCAAqC,EAAE,KAwCnD,CAAA;AAED,eAAO,MAAM,4BAA4B,EAAE,KAiD1C,CAAA"}

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

@@ -2,7 +2,7 @@ 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;
+    isTinted?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const offerCardTitleVariants: (props?: ({
     variant?: "search" | "compact" | null | undefined;
@@ -11,7 +11,6 @@ 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'> {
     /**
@@ -29,16 +28,16 @@ export interface OfferCardSkeletonProps extends Omit<React.HTMLAttributes<HTMLDi
      */
     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.
+     * Mirrors `OfferCard.isTinted` so the skeleton reserves the same tinted
+     * background when standing in for a tinted compact card. Has no effect on
+     * the `'search'` variant.
      *
-     * @default 'default'
+     * @default false
      */
-    type?: OfferCardType;
+    isTinted?: boolean;
 }
 declare const OfferCardSkeleton: {
-    ({ variant, color, type, className, ...props }: OfferCardSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    ({ variant, color, isTinted, className, ...props }: OfferCardSkeletonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 /**
@@ -47,7 +46,7 @@ declare const OfferCardSkeleton: {
  * children/asChild axis are split into the two members of the discriminated
  * union below.
  */
-export interface OfferCardBaseProps extends Omit<VariantProps<typeof offerCardVariants>, 'variant' | 'type'> {
+export interface OfferCardBaseProps extends Omit<VariantProps<typeof offerCardVariants>, 'variant' | 'isTinted'> {
     /** Offer title — primary heading rendered inside the clickable link. */
     name: string;
     /**
@@ -55,13 +54,37 @@ export interface OfferCardBaseProps extends Omit<VariantProps<typeof offerCardVa
      * 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.
+     *
+     * Omit it (or pass `undefined`) to render the placeholder instead — pair
+     * that with `placeholderIcon` and `placeholderColor`.
      */
-    image: string | React.ReactNode;
+    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;
+    /**
+     * Decorative icon rendered centred in the image area when `image` is
+     * absent — typically the market-category icon for the offer. Sized by the
+     * card (56px on desktop, 40px below `md` on `compact`) and coloured via
+     * `currentColor`, so pass a bare Solar icon element.
+     *
+     * @example
+     * <OfferCard
+     *   name="Concert"
+     *   placeholderIcon={<MusicNoteBold />}
+     *   placeholderColor="#e4329c"
+     * />
+     */
+    placeholderIcon?: React.ReactNode;
+    /**
+     * Any CSS color string driving the placeholder. The image area is filled
+     * with the color at 20% alpha, the icon and the category `Tag` take the
+     * full color. Omit to fall back to the brand-tertiary tint with a
+     * tertiary-grey icon.
+     */
+    placeholderColor?: 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>`.
@@ -104,6 +127,12 @@ export interface OfferCardBaseProps extends Omit<VariantProps<typeof offerCardVa
     rating?: number;
     /** Review count shown as `(N)` next to the rating. Only shown when `rating` is set. */
     ratingCount?: number;
+    /**
+     * Formatted price rendered as a `PriceTag` pill below the vendor/rating
+     * row — e.g. `"100 Kč"`. Formatting is the consumer's responsibility.
+     * Only rendered on the `search` variant; omit to hide the pill.
+     */
+    price?: React.ReactNode;
     /**
      * Controlled favorite state for the embedded `HeartButton`. When provided,
      * the heart does not manage its own state.
@@ -138,14 +167,14 @@ export interface OfferCardBaseProps extends Omit<VariantProps<typeof offerCardVa
      */
     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.
+     * Swaps the `compact` card's transparent fill for a tinted
+     * `--color-surface-base-secondary` background, used to highlight promoted
+     * entries in a grid. `PartnerCard` takes the same prop, so a mixed promo
+     * band tints uniformly. Has no effect on the `search` variant.
      *
-     * @default 'default'
+     * @default false
      */
-    type?: OfferCardType;
+    isTinted?: boolean;
     /**
      * 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
@@ -202,5 +231,4 @@ 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

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