@vkzstudio/muza-ui 1.8.0 → 1.9.1

package/dist/components/internal/CardCompactShell.js

@@ -1,40 +1,45 @@
-import { jsxs as a, Fragment as v, jsx as e } from "react/jsx-runtime";
+import { jsxs as a, Fragment as w, 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 { cn as p } from "../../utils/cn.js";
+import { warnOnce as x } from "../../utils/warnOnce.js";
+import { Flex as n } 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 = {
+import { Tag as N } from "../Tag/Tag.js";
+import { CardImageSlot as C, hasImageContent as k } from "./CardImageSlot.js";
+const A = "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", B = {
   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 = ({
+}, h = "px-comp-offer-card-compact-p pt-comp-offer-card-compact-p-top pb-comp-offer-card-compact-p", y = ({
   image: o,
-  imageAlt: l,
-  placeholderIcon: f,
-  placeholderColor: c,
-  componentName: n,
-  category: t,
+  imageAlt: f,
+  placeholderIcon: l,
+  placeholderColor: d,
+  componentName: s,
+  category: i,
   heartButton: u,
-  logo: d,
+  logo: c,
   logoAlt: b,
-  disabled: h,
-  children: g
+  priceTag: t,
+  disabled: g,
+  children: v
 }) => {
-  const s = w(o);
-  return /* @__PURE__ */ a(v, { children: [
+  const m = k(o);
+  return t && c && x(
+    `${s}:price-and-logo`,
+    `[${s}] \`price\` and \`logo\` both target the bottom-left of the image on the compact variant — rendering the price only. Use the linked \`vendor\` name instead of a logo when showing a price.`
+  ), /* @__PURE__ */ a(w, { children: [
     /* @__PURE__ */ a("div", { className: "relative w-full shrink-0", children: [
       /* @__PURE__ */ a(
-        N,
+        C,
         {
           image: o,
-          alt: l,
-          placeholderIcon: f,
-          placeholderColor: c,
-          componentName: n,
+          alt: f,
+          placeholderIcon: l,
+          placeholderColor: d,
+          componentName: s,
           wrapperClassName: "relative aspect-[288/162] w-full overflow-hidden",
           children: [
-            s && /* @__PURE__ */ e(
+            m && /* @__PURE__ */ e(
               "div",
               {
                 "aria-hidden": "true",
@@ -42,59 +47,60 @@ const q = "flex-col overflow-hidden rounded-comp-offer-card-compact-radius borde
               }
             ),
             /* @__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,
+              i ? /* @__PURE__ */ e(
+                N,
                 {
-                  variant: s ? "invert" : void 0,
-                  color: s || h ? void 0 : c,
+                  variant: m ? "invert" : void 0,
+                  color: m || g ? void 0 : d,
                   className: "min-w-[50px] shrink overflow-hidden",
-                  children: t
+                  children: i
                 }
               ) : /* @__PURE__ */ e("span", {}),
               u
-            ] })
+            ] }),
+            t && /* @__PURE__ */ e("div", { className: "absolute bottom-comp-offer-card-compact-p-img left-comp-offer-card-compact-p-img z-10 max-w-[calc(100%-2*var(--spacing-comp-offer-card-compact-p-img))]", children: t })
           ]
         }
       ),
-      d && /* @__PURE__ */ e(
+      c && !t && /* @__PURE__ */ e(
         "div",
         {
-          className: m(
+          className: p(
             "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
+          children: typeof c == "string" ? /* @__PURE__ */ e("img", { src: c, alt: b }) : c
         }
       )
     ] }),
     /* @__PURE__ */ e(
-      i,
+      n,
       {
         direction: "column",
         flex: 1,
         gap: "2xs",
-        className: p,
-        children: g
+        className: h,
+        children: v
       }
     )
   ] });
 };
-C.displayName = "CardCompactShell";
-const k = ({
+y.displayName = "CardCompactShell";
+const z = ({
   color: o = "default",
-  isTinted: l = !1,
-  className: f,
-  ...c
+  isTinted: f = !1,
+  className: l,
+  ...d
 }) => /* @__PURE__ */ a(
   "div",
   {
-    className: m(
+    className: p(
       "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
+      f ? "bg-comp-offer-card-fill-promo-default" : "bg-comp-offer-card-fill-def-default",
+      l
     ),
-    ...c,
+    ...d,
     children: [
       /* @__PURE__ */ a("div", { className: "relative aspect-[288/162] w-full shrink-0 overflow-hidden", children: [
         /* @__PURE__ */ e(
@@ -122,12 +128,12 @@ const k = ({
         ] })
       ] }),
       /* @__PURE__ */ a(
-        i,
+        n,
         {
           direction: "column",
           flex: 1,
           gap: "2xs",
-          className: p,
+          className: h,
           children: [
             /* @__PURE__ */ e(r, { color: o, className: "h-5 w-full" }),
             /* @__PURE__ */ e(r, { color: o, className: "h-5 w-3/4" }),
@@ -139,10 +145,10 @@ const k = ({
     ]
   }
 );
-k.displayName = "CardCompactSkeleton";
+z.displayName = "CardCompactSkeleton";
 export {
-  C as CardCompactShell,
-  k as CardCompactSkeleton,
-  q as cardCompactContainerClass,
-  A as cardCompactFillClass
+  y as CardCompactShell,
+  z as CardCompactSkeleton,
+  A as cardCompactContainerClass,
+  B as cardCompactFillClass
 };

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

@@ -1 +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"}
+{"version":3,"file":"CardImageSlot.d.ts","sourceRoot":"","sources":["../../../src/components/internal/CardImageSlot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B;;;;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

@@ -1,61 +1,60 @@
-import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
 import "react";
-import b from "color";
-import { cn as u } from "../../utils/cn.js";
+import p from "color";
+import { cn as c } from "../../utils/cn.js";
+import { warnOnce as u } from "../../utils/warnOnce.js";
 const m = (r) => {
   try {
-    return b(r);
+    return p(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 = ({
+}, b = (r) => r != null && r !== !1 && r !== "", h = ({
   image: r,
-  alt: o,
+  alt: g,
   wrapperClassName: i,
-  innerClassName: d,
-  placeholderIcon: l,
-  placeholderColor: e,
+  innerClassName: s,
+  placeholderIcon: d,
+  placeholderColor: a,
   placeholderIconClassName: f = "[&>svg]:size-comp-market-category-ico-ico-size-lg",
   componentName: t,
-  children: n
+  children: l
 }) => {
-  if (h(r))
-    return /* @__PURE__ */ c("div", { className: i, children: [
-      /* @__PURE__ */ s(
+  if (b(r))
+    return /* @__PURE__ */ n("div", { className: i, children: [
+      /* @__PURE__ */ o(
         "div",
         {
-          className: u(
+          className: c(
             "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
+            s
           ),
-          children: typeof r == "string" ? /* @__PURE__ */ s("img", { src: r, alt: o }) : r
+          children: typeof r == "string" ? /* @__PURE__ */ o("img", { src: r, alt: g }) : r
         }
       ),
-      n
+      l
     ] });
-  l || p(
+  d || u(
     `${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(
+  const e = a ? m(a) : null;
+  return a && !e && u(
+    `${t}:invalid-color:${a}`,
+    `[${t}] Invalid \`placeholderColor\` "${a}". Falling back to neutral styling.`
+  ), /* @__PURE__ */ n("div", { className: i, children: [
+    /* @__PURE__ */ o(
       "div",
       {
         "aria-hidden": "true",
-        className: u(
+        className: c(
           "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",
+          e ? "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
@@ -65,21 +64,21 @@ const m = (r) => {
           // 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,
+          s,
           f
         ),
-        style: a ? {
-          "--card-image-slot-placeholder-bg": a.alpha(0.2).toString(),
-          "--card-image-slot-placeholder-fg": a.toString()
+        style: e ? {
+          "--card-image-slot-placeholder-bg": e.alpha(0.2).toString(),
+          "--card-image-slot-placeholder-fg": e.toString()
         } : void 0,
-        children: l
+        children: d
       }
     ),
-    n
+    l
   ] });
 };
-v.displayName = "CardImageSlot";
+h.displayName = "CardImageSlot";
 export {
-  v as CardImageSlot,
-  h as hasImageContent
+  h as CardImageSlot,
+  b as hasImageContent
 };

package/dist/hooks/use-is-breakpoint.d.ts

@@ -1,3 +1,4 @@
+import { ResponsiveBreakpoint } from '../utils/breakpoints';
 export declare const useIsMinXs: () => boolean;
 export declare const useIsMaxXs: () => boolean;
 export declare const useIsMinSm: () => boolean;
@@ -12,10 +13,6 @@ export declare const useIsMin2xl: () => boolean;
 export declare const useIsMax2xl: () => boolean;
 export declare const useIsMin3xl: () => boolean;
 export declare const useIsMax3xl: () => boolean;
-/**
- * Named breakpoint matching the project's Tailwind breakpoint scale.
- */
-export type ResponsiveBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
 /**
  * Returns the current match state of all named breakpoints.
  * Each key is `true` when the viewport is at or above that breakpoint.

package/dist/hooks/use-is-breakpoint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-is-breakpoint.d.ts","sourceRoot":"","sources":["../../src/hooks/use-is-breakpoint.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,UAAU,eAEtB,CAAA;AAED,eAAO,MAAM,UAAU,eAEtB,CAAA;AAED,eAAO,MAAM,UAAU,eAEtB,CAAA;AAED,eAAO,MAAM,UAAU,eAEtB,CAAA;AAED,eAAO,MAAM,UAAU,eAEtB,CAAA;AAED,eAAO,MAAM,UAAU,eAEtB,CAAA;AAED,eAAO,MAAM,UAAU,eAEtB,CAAA;AAED,eAAO,MAAM,UAAU,eAEtB,CAAA;AAED,eAAO,MAAM,UAAU,eAEtB,CAAA;AAED,eAAO,MAAM,UAAU,eAEtB,CAAA;AAED,eAAO,MAAM,WAAW,eAEvB,CAAA;AAED,eAAO,MAAM,WAAW,eAEvB,CAAA;AAED,eAAO,MAAM,WAAW,eAEvB,CAAA;AAED,eAAO,MAAM,WAAW,eAEvB,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAC5B,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,CAAA;AAET;;;GAGG;AACH,eAAO,MAAM,cAAc,QAAO,MAAM,CAAC,oBAAoB,EAAE,OAAO,CAQpE,CAAA"}
+{"version":3,"file":"use-is-breakpoint.d.ts","sourceRoot":"","sources":["../../src/hooks/use-is-breakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAW/D,eAAO,MAAM,UAAU,eAEtB,CAAA;AAED,eAAO,MAAM,UAAU,eAEtB,CAAA;AAED,eAAO,MAAM,UAAU,eAEtB,CAAA;AAED,eAAO,MAAM,UAAU,eAEtB,CAAA;AAED,eAAO,MAAM,UAAU,eAEtB,CAAA;AAED,eAAO,MAAM,UAAU,eAEtB,CAAA;AAED,eAAO,MAAM,UAAU,eAEtB,CAAA;AAED,eAAO,MAAM,UAAU,eAEtB,CAAA;AAED,eAAO,MAAM,UAAU,eAEtB,CAAA;AAED,eAAO,MAAM,UAAU,eAEtB,CAAA;AAED,eAAO,MAAM,WAAW,eAEvB,CAAA;AAED,eAAO,MAAM,WAAW,eAEvB,CAAA;AAED,eAAO,MAAM,WAAW,eAEvB,CAAA;AAED,eAAO,MAAM,WAAW,eAEvB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,QAAO,MAAM,CAAC,oBAAoB,EAAE,OAAO,CAQpE,CAAA"}