@asteby/storefront-react 0.19.0 → 0.21.0

package/dist/payments.css

@@ -89,16 +89,20 @@
 }
 
 /*
- * 3DS challenge (`<PaymentChallenge>`): a near full-screen modal. Colors are fixed on purpose: the bank page inside
+ * 3DS challenge (`<PaymentChallenge>`): a square-ish centered modal (36rem wide, max min(90dvh, 40rem) tall). Colors are fixed on purpose: the bank page inside
  * the iframe is always white, and the dialog often lives in a themed (dark) panel. Override with a more specific rule.
  */
 dialog[data-sf-challenge] {
   margin: auto;
   box-sizing: border-box;
-  width: min(60rem, calc(100% - 2rem));
+  inset: 0;
+  width: min(36rem, 100% - 2rem);
   max-width: none;
-  max-height: 94dvh;
-  overflow: auto;
+  max-height: min(90dvh, 40rem);
+  display: flex;
+  flex-direction: column;
+  /* Solo el cuerpo (el iframe) scrollea; el diálogo no. */
+  overflow: hidden;
   border: 1px solid #c9d2ee;
   border-radius: 0.75rem;
   background: #ffffff;
@@ -120,7 +124,10 @@ dialog[data-sf-challenge] h2:focus {
 }
 dialog[data-sf-challenge] [data-sf-challenge-frame] {
   display: block;
-  height: min(70dvh, 40rem);
+  flex: 1 1 auto;
+  min-height: 16rem;
+  width: 100%;
+  overflow: auto;
   background: #ffffff;
 }
 dialog[data-sf-challenge] [data-sf-challenge-escape] {
@@ -139,16 +146,10 @@ dialog[data-sf-challenge] [data-sf-challenge-escape] button {
   border-radius: 0.5rem;
   font-weight: 600;
 }
-@media (max-width: 40rem) {
+@media (max-width: 30rem) {
   dialog[data-sf-challenge] {
-    width: 100%;
-    height: 100dvh;
-    max-height: 100dvh;
-    border-radius: 0;
-    border: 0;
+    width: calc(100% - 2rem);
+    max-height: calc(100dvh - 2rem);
     padding: 1rem;
   }
-  dialog[data-sf-challenge] [data-sf-challenge-frame] {
-    height: calc(100dvh - 8rem);
-  }
 }

package/dist/payments.js

@@ -1,10 +1,10 @@
 import { isSafeCssValue } from './chunk-672OTUM2.js';
 import { useModalDialog } from './chunk-ZBH7JYU4.js';
 import { findBrand, BrandMark } from './chunk-JNUJGPJC.js';
-import { useResolvedLocale } from './chunk-T52H5HL3.js';
-import './chunk-DQBL2DFJ.js';
 import { paymentRecoveryMessages } from './chunk-MNLROALF.js';
 export { buildPayChoices, cashProviderData, checkoutToAttempt, choiceValue, parseChoice, payErrorResponse, paymentCsp, paymentCspHeaderName, paymentCspHeaders, paymentCspMode, paymentNonce, paymentNonceFromHeaders, paymentRecoveryMessages, safeHttpStatus, voucherRows } from './chunk-MNLROALF.js';
+import { useResolvedLocale } from './chunk-T52H5HL3.js';
+import './chunk-DQBL2DFJ.js';
 import { forwardRef, useImperativeHandle, useRef, useEffect, useMemo, useId, useState, useCallback, useSyncExternalStore } from 'react';
 import { paymentMessages, formatMoney, generateIdempotencyKey, paymentOutcome, paymentErrorView, formatVoucherExpiry, classifyPaymentError } from '@asteby/storefront';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/product-preview-DRtLWGLS.d.cts

@@ -0,0 +1,85 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { a as ImageLoader } from './components-B5XhSH-m.cjs';
+
+/** First letter(s) of the name for the fallback: two initials from two words, one otherwise. Empty when nothing usable. */
+declare function productInitials(name: string | null | undefined): string;
+type ProductThumbClassNames = Partial<Record<'root' | 'img' | 'fallback' | 'badge', string>>;
+type ProductThumbImage = {
+    url: string;
+    alt?: string | null;
+    width?: number;
+    height?: number;
+};
+type ProductThumbProps = {
+    /** Picture of the product or variant. `null`/missing: shows the fallback. */
+    image?: ProductThumbImage | null;
+    /** Name of the product: alt of the picture (unless `decorative`) and source of the fallback initial. */
+    name?: string | null;
+    /** Side in px. Default 56. */
+    size?: number;
+    /** Aspect ratio of the box, `w/h`. Default `1/1`. */
+    ratio?: string;
+    /** `contain` (default) never crops; `cover` fills the box. */
+    fit?: 'contain' | 'cover';
+    /** Quantity badge, shown when greater than 1. */
+    quantity?: number;
+    /** The name sits next to it as text: the picture has `alt=""` and the fallback is hidden from screen readers. Default false. */
+    decorative?: boolean;
+    /** Slight zoom on hover (honours `prefers-reduced-motion`). Default true. */
+    zoom?: boolean;
+    /** Above the fold: eager load. */
+    priority?: boolean;
+    sizes?: string;
+    loader?: ImageLoader | null;
+    className?: string;
+    classNames?: ProductThumbClassNames;
+};
+/** The picture of a product with fixed ratio, shimmer, lazy loading and a fallback that always looks designed. */
+declare function ProductThumb({ image, name, size, ratio, fit, quantity, decorative, zoom, priority, sizes, loader, className, classNames: cx, }: ProductThumbProps): react.JSX.Element;
+type ProductPreviewClassNames = Partial<Record<'root' | 'media' | 'body' | 'name' | 'variant' | 'meta' | 'sku' | 'qty' | 'price' | 'total' | 'unit', string>> & {
+    thumb?: ProductThumbClassNames;
+};
+type ProductPreviewProps = Pick<ProductThumbProps, 'image' | 'size' | 'ratio' | 'fit' | 'zoom' | 'priority' | 'sizes' | 'loader'> & {
+    name: string;
+    /** "Rojo / L". Omit for default variants. */
+    variant?: string | null;
+    sku?: string | null;
+    /** Quantity: a badge on the picture (> 1) and "Cantidad N" under the name. */
+    quantity?: number;
+    /** Unit price, already formatted. Shown next to the quantity when it is greater than 1. */
+    unitPrice?: ReactNode;
+    /** Line total, already formatted: aligned right, the strongest number. */
+    total?: ReactNode;
+    /** Link on the name (product page). */
+    href?: string | null;
+    /** Rendered under the text (status, note, actions). */
+    children?: ReactNode;
+    /** Text of the quantity for screen readers and the meta line. Default `Cantidad {n}`. */
+    quantityLabel?: string;
+    /** Name shown when the line has none (product deleted). Default `Producto no disponible`. */
+    unavailableLabel?: string;
+    className?: string;
+    classNames?: ProductPreviewClassNames;
+};
+/**
+ * A product line: picture, name (2 lines), variant, SKU, quantity and prices with a clear hierarchy. Degrades to a
+ * designed placeholder when the product has no image or no longer exists (empty name).
+ */
+declare function ProductPreview({ image, name, variant, sku, quantity, unitPrice, total, href, children, size, ratio, fit, zoom, priority, sizes, loader, quantityLabel, unavailableLabel, className, classNames: cx, }: ProductPreviewProps): react.JSX.Element;
+type ProductThumbStackProps = {
+    items: ReadonlyArray<{
+        image?: ProductThumbImage | null;
+        name?: string | null;
+    }>;
+    /** Thumbs shown before "+N". Default 4. */
+    max?: number;
+    size?: number;
+    /** Screen reader text for the hidden remainder, `{n}` = how many. Default `y {n} más`. */
+    moreLabel?: string;
+    className?: string;
+};
+/** Overlapped thumbs with a "+N" counter: the products of an order at a glance. */
+declare function ProductThumbStack({ items, max, size, moreLabel, className }: ProductThumbStackProps): react.JSX.Element | null;
+
+export { ProductPreview as P, type ProductPreviewClassNames as a, type ProductPreviewProps as b, ProductThumb as c, type ProductThumbClassNames as d, type ProductThumbImage as e, type ProductThumbProps as f, ProductThumbStack as g, type ProductThumbStackProps as h, productInitials as p };

package/dist/product-preview-DaICr4f2.d.ts

@@ -0,0 +1,85 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { a as ImageLoader } from './components-B5XhSH-m.js';
+
+/** First letter(s) of the name for the fallback: two initials from two words, one otherwise. Empty when nothing usable. */
+declare function productInitials(name: string | null | undefined): string;
+type ProductThumbClassNames = Partial<Record<'root' | 'img' | 'fallback' | 'badge', string>>;
+type ProductThumbImage = {
+    url: string;
+    alt?: string | null;
+    width?: number;
+    height?: number;
+};
+type ProductThumbProps = {
+    /** Picture of the product or variant. `null`/missing: shows the fallback. */
+    image?: ProductThumbImage | null;
+    /** Name of the product: alt of the picture (unless `decorative`) and source of the fallback initial. */
+    name?: string | null;
+    /** Side in px. Default 56. */
+    size?: number;
+    /** Aspect ratio of the box, `w/h`. Default `1/1`. */
+    ratio?: string;
+    /** `contain` (default) never crops; `cover` fills the box. */
+    fit?: 'contain' | 'cover';
+    /** Quantity badge, shown when greater than 1. */
+    quantity?: number;
+    /** The name sits next to it as text: the picture has `alt=""` and the fallback is hidden from screen readers. Default false. */
+    decorative?: boolean;
+    /** Slight zoom on hover (honours `prefers-reduced-motion`). Default true. */
+    zoom?: boolean;
+    /** Above the fold: eager load. */
+    priority?: boolean;
+    sizes?: string;
+    loader?: ImageLoader | null;
+    className?: string;
+    classNames?: ProductThumbClassNames;
+};
+/** The picture of a product with fixed ratio, shimmer, lazy loading and a fallback that always looks designed. */
+declare function ProductThumb({ image, name, size, ratio, fit, quantity, decorative, zoom, priority, sizes, loader, className, classNames: cx, }: ProductThumbProps): react.JSX.Element;
+type ProductPreviewClassNames = Partial<Record<'root' | 'media' | 'body' | 'name' | 'variant' | 'meta' | 'sku' | 'qty' | 'price' | 'total' | 'unit', string>> & {
+    thumb?: ProductThumbClassNames;
+};
+type ProductPreviewProps = Pick<ProductThumbProps, 'image' | 'size' | 'ratio' | 'fit' | 'zoom' | 'priority' | 'sizes' | 'loader'> & {
+    name: string;
+    /** "Rojo / L". Omit for default variants. */
+    variant?: string | null;
+    sku?: string | null;
+    /** Quantity: a badge on the picture (> 1) and "Cantidad N" under the name. */
+    quantity?: number;
+    /** Unit price, already formatted. Shown next to the quantity when it is greater than 1. */
+    unitPrice?: ReactNode;
+    /** Line total, already formatted: aligned right, the strongest number. */
+    total?: ReactNode;
+    /** Link on the name (product page). */
+    href?: string | null;
+    /** Rendered under the text (status, note, actions). */
+    children?: ReactNode;
+    /** Text of the quantity for screen readers and the meta line. Default `Cantidad {n}`. */
+    quantityLabel?: string;
+    /** Name shown when the line has none (product deleted). Default `Producto no disponible`. */
+    unavailableLabel?: string;
+    className?: string;
+    classNames?: ProductPreviewClassNames;
+};
+/**
+ * A product line: picture, name (2 lines), variant, SKU, quantity and prices with a clear hierarchy. Degrades to a
+ * designed placeholder when the product has no image or no longer exists (empty name).
+ */
+declare function ProductPreview({ image, name, variant, sku, quantity, unitPrice, total, href, children, size, ratio, fit, zoom, priority, sizes, loader, quantityLabel, unavailableLabel, className, classNames: cx, }: ProductPreviewProps): react.JSX.Element;
+type ProductThumbStackProps = {
+    items: ReadonlyArray<{
+        image?: ProductThumbImage | null;
+        name?: string | null;
+    }>;
+    /** Thumbs shown before "+N". Default 4. */
+    max?: number;
+    size?: number;
+    /** Screen reader text for the hidden remainder, `{n}` = how many. Default `y {n} más`. */
+    moreLabel?: string;
+    className?: string;
+};
+/** Overlapped thumbs with a "+N" counter: the products of an order at a glance. */
+declare function ProductThumbStack({ items, max, size, moreLabel, className }: ProductThumbStackProps): react.JSX.Element | null;
+
+export { ProductPreview as P, type ProductPreviewClassNames as a, type ProductPreviewProps as b, ProductThumb as c, type ProductThumbClassNames as d, type ProductThumbImage as e, type ProductThumbProps as f, ProductThumbStack as g, type ProductThumbStackProps as h, productInitials as p };

package/dist/ui.cjs

@@ -2,6 +2,7 @@
 
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+require('@asteby/storefront');
 
 // src/ui/select.tsx
 var Chevron = ({ open = false, floating = false }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", "data-select-chevron": floating ? "floating" : "", "data-open": open || void 0, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" }) });
@@ -371,8 +372,208 @@ function InstallApp({ className = "", label = "Instalar app", iosHint = "Para in
   }
   return ios ? /* @__PURE__ */ jsxRuntime.jsx("p", { className, children: iosHint }) : null;
 }
+var DEFAULT_IMAGE_WIDTHS = [320, 480, 640, 768, 1024, 1280, 1600];
+var defaultImageLoader = (src, width, height) => {
+  try {
+    const isAbsolute = /^[a-z][a-z0-9+.-]*:/i.test(src);
+    const url = new URL(src, "http://relative.invalid");
+    url.searchParams.set("width", String(width));
+    if (height) url.searchParams.set("height", String(height));
+    return isAbsolute ? url.toString() : url.pathname + url.search + url.hash;
+  } catch {
+    return src;
+  }
+};
+function parseRatio(ratio) {
+  if (!ratio) return null;
+  const [w, h] = ratio.split(/[/:]/).map((n) => Number.parseFloat(n));
+  return w && h ? w / h : null;
+}
+function Image({
+  data,
+  sizes = "100vw",
+  widths = DEFAULT_IMAGE_WIDTHS,
+  loader = defaultImageLoader,
+  priority = false,
+  aspectRatio,
+  alt,
+  loading,
+  decoding,
+  ...rest
+}) {
+  const ratio = parseRatio(aspectRatio) ?? (data.width && data.height ? data.width / data.height : null);
+  let candidates = [...widths].sort((a, b) => a - b);
+  if (data.width) {
+    const capped = candidates.filter((w) => w <= data.width);
+    candidates = capped.length ? capped : [data.width];
+  }
+  const srcSet = loader ? candidates.map((w) => `${loader(data.url, w, ratio ? Math.round(w / ratio) : void 0)} ${w}w`).join(", ") : void 0;
+  const width = data.width ?? candidates[candidates.length - 1];
+  const height = data.height ?? (ratio && width ? Math.round(width / ratio) : void 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: data.url,
+      alt: alt ?? data.alt ?? "",
+      ...srcSet ? { srcSet, sizes } : {},
+      ...width ? { width } : {},
+      ...height ? { height } : {},
+      loading: loading ?? (priority ? "eager" : "lazy"),
+      decoding: decoding ?? (priority ? "auto" : "async"),
+      ...priority ? { fetchPriority: "high" } : {},
+      ...rest
+    }
+  );
+}
+function productInitials(name) {
+  const words = (name ?? "").normalize("NFKC").split(/[\s\-_/.,()]+/).map((w) => Array.from(w).find((c) => /\p{L}|\p{N}/u.test(c)) ?? "").filter(Boolean);
+  if (words.length === 0) return "";
+  return (words.length > 1 ? words[0] + words[1] : words[0]).toLocaleUpperCase();
+}
+function ProductThumb({
+  image,
+  name,
+  size = 56,
+  ratio = "1/1",
+  fit = "contain",
+  quantity,
+  decorative = false,
+  zoom = true,
+  priority = false,
+  sizes,
+  loader,
+  className,
+  classNames: cx = {}
+}) {
+  const url = image?.url || null;
+  const [state, setState] = react.useState(url ? "loading" : "fallback");
+  const box = react.useRef(null);
+  react.useEffect(() => {
+    const img = box.current?.querySelector("img");
+    setState(!url ? "fallback" : img?.complete ? img.naturalWidth > 0 ? "loaded" : "fallback" : "loading");
+  }, [url]);
+  const label = name?.trim() || "";
+  const initials = productInitials(label);
+  const showBadge = typeof quantity === "number" && quantity > 1;
+  const a11y = state === "fallback" && !decorative && label ? { role: "img", "aria-label": label } : { "aria-hidden": decorative || state === "fallback" ? true : void 0 };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ref: box,
+      className: [cx.root, className].filter(Boolean).join(" ") || void 0,
+      style: { ["--sf-preview-size"]: `${size}px`, ["--sf-preview-ratio"]: ratio.replace(":", "/") },
+      "data-sf-thumb": "",
+      "data-state": state,
+      "data-fit": fit,
+      "data-zoom": zoom || void 0,
+      ...a11y,
+      children: [
+        url && state !== "fallback" ? /* @__PURE__ */ jsxRuntime.jsx(
+          Image,
+          {
+            data: { url, alt: image?.alt ?? null, ...image?.width ? { width: image.width } : {}, ...image?.height ? { height: image.height } : {} },
+            alt: decorative ? "" : image?.alt ?? label,
+            aspectRatio: ratio,
+            sizes: sizes ?? `${size * 2}px`,
+            widths: [Math.round(size), Math.round(size * 2), Math.round(size * 3)],
+            ...loader !== void 0 ? { loader } : {},
+            priority,
+            className: cx.img,
+            onLoad: () => setState("loaded"),
+            onError: () => setState("fallback")
+          }
+        ) : null,
+        state === "fallback" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.fallback, "data-sf-thumb-fallback": "", "aria-hidden": "true", children: initials ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-sf-thumb-initial": "", children: initials }) : /* @__PURE__ */ jsxRuntime.jsx(PackageGlyph, {}) }) : null,
+        showBadge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.badge, "data-sf-thumb-qty": "", "aria-hidden": "true", children: quantity }) : null
+      ]
+    }
+  );
+}
+function PackageGlyph() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", width: "45%", height: "45%", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", focusable: "false", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 8 12 3 3 8v8l9 5 9-5V8Z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m3 8 9 5 9-5M12 13v8" })
+  ] });
+}
+function ProductPreview({
+  image,
+  name,
+  variant,
+  sku,
+  quantity,
+  unitPrice,
+  total,
+  href,
+  children,
+  size = 64,
+  ratio,
+  fit,
+  zoom,
+  priority,
+  sizes,
+  loader,
+  quantityLabel,
+  unavailableLabel = "Producto no disponible",
+  className,
+  classNames: cx = {}
+}) {
+  const missing = !name.trim();
+  const title = missing ? unavailableLabel : name;
+  const hasQty = typeof quantity === "number" && Number.isFinite(quantity);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [cx.root, className].filter(Boolean).join(" ") || void 0, "data-sf-preview": "", "data-missing": missing || void 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.media, "data-sf-preview-media": "", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ProductThumb,
+      {
+        image,
+        name: missing ? null : name,
+        size,
+        decorative: true,
+        ...ratio ? { ratio } : {},
+        ...fit ? { fit } : {},
+        ...zoom !== void 0 ? { zoom } : {},
+        ...priority ? { priority } : {},
+        ...sizes ? { sizes } : {},
+        ...loader !== void 0 ? { loader } : {},
+        ...hasQty ? { quantity } : {},
+        ...cx.thumb ? { classNames: cx.thumb } : {}
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx.body, "data-sf-preview-body": "", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.name, "data-sf-preview-name": "", children: href && !missing ? /* @__PURE__ */ jsxRuntime.jsx("a", { href, children: title }) : title }),
+      variant ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.variant, "data-sf-preview-variant": "", children: variant }) : null,
+      sku ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx.sku, "data-sf-preview-sku": "", children: [
+        "SKU ",
+        sku
+      ] }) : null,
+      hasQty ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx.meta, "data-sf-preview-meta": "", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.qty, "data-sf-preview-qty": "", children: (quantityLabel ?? "Cantidad {n}").replace("{n}", String(quantity)) }),
+        unitPrice != null && quantity > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx.unit, "data-sf-preview-unit": "", children: [
+          " \xB7 ",
+          unitPrice
+        ] }) : null
+      ] }) : null,
+      children
+    ] }),
+    total != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.total, "data-sf-preview-total": "", children: total }) : unitPrice != null && !(hasQty && quantity > 1) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.price, "data-sf-preview-total": "", children: unitPrice }) : null
+  ] });
+}
+function ProductThumbStack({ items, max = 4, size = 44, moreLabel = "y {n} m\xE1s", className }) {
+  if (items.length === 0) return null;
+  const shown = items.length > max ? items.slice(0, max - 1) : items;
+  const rest = items.length - shown.length;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className, "data-sf-thumb-stack": "", style: { ["--sf-preview-size"]: `${size}px` }, children: [
+    shown.map((it, i) => /* @__PURE__ */ jsxRuntime.jsx(ProductThumb, { image: it.image ?? null, name: it.name ?? null, size, zoom: false }, i)),
+    rest > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-sf-thumb-more": "", role: "img", "aria-label": moreLabel.replace("{n}", String(rest)), children: [
+      "+",
+      rest
+    ] }) : null
+  ] });
+}
 
 exports.InstallApp = InstallApp;
+exports.ProductPreview = ProductPreview;
+exports.ProductThumb = ProductThumb;
+exports.ProductThumbStack = ProductThumbStack;
 exports.Select = Select;
 exports.Swatch = Swatch;
 exports.THEME_INIT_SCRIPT = THEME_INIT_SCRIPT;
@@ -384,6 +585,7 @@ exports.normalizeSwatchName = normalize;
 exports.optionHasSwatches = optionHasSwatches;
 exports.parseSwatchAttribute = parseSwatchAttribute;
 exports.pastelBackground = pastelBackground;
+exports.productInitials = productInitials;
 exports.resolveSwatch = resolveSwatch;
 exports.resolveSwatchSpec = resolveSwatchSpec;
 exports.swatchBackground = swatchBackground;