@asteby/storefront-react 0.1.2 → 0.3.0

package/README.md

@@ -158,6 +158,176 @@ metacore-ui components pick it up), fonts as `--font-<role>` and `--radius`.
 Unsafe values (`;`, `{}`, `<`, `url(`) are dropped. `<ThemeStyle theme />`
 renders it as a `<style>`; `themeFontsHref(theme)` gives a Google Fonts URL.
 
+## Sucursales (headless)
+
+Primitivos sin estilos ni clases (render props), accesibles y SSR-safe. Con cero
+sucursales todos renderizan `null`. Leen `shop.branches` del `StorefrontProvider`
+si no recibes `locations`.
+
+```tsx
+const [origin, setOrigin] = useState<GeoPoint | null>(null)
+const cp = new URLSearchParams(search).get('cp')
+const { locations } = useNearestLocations({ origin, postalCode: cp, limit: 3 })
+const mine = useSelectedLocation({ initialId: urlSucursal }) // ?sucursal= + localStorage, nunca cookie
+
+<NearestLocationForm action="/sucursales" onLocate={setOrigin} /> {/* GET ?cp=06000 sin JS */}
+<LocationList locations={locations}>
+  {(l, { selected }) => (
+    <>
+      <strong>{l.name}</strong> <OpenStatus location={l} /> <DirectionsLink location={l} />
+      <PickupOption location={l} />
+      <button onClick={() => mine.select(l.id)} aria-pressed={selected}>Mi sucursal</button>
+    </>
+  )}
+</LocationList>
+```
+
+- `useGeolocation()`: solo pide la ubicación al llamar `request()` desde un gesto
+  del usuario; expone `supported`, `permission`, `status`, `position` y un error
+  tipado (`denied | unavailable | timeout | unsupported | insecure`). La posición
+  no se guarda ni se envía.
+- `useNearestLocations({ origin, postalCode, locations, limit, radiusKm, remote })`:
+  con `origin` ordena en el navegador (haversine; las coordenadas no salen). Con
+  `postalCode` (o `remote`) pregunta al servidor (`client.locations`).
+- `useSelectedLocation()`: "Mi sucursal" en `?sucursal=` y `localStorage`
+  (`sf_sucursal`); valida contra las sucursales y olvida ids obsoletos. Pasa
+  `initialId` desde el loader para que SSR e hidratación coincidan.
+- `LocationList`, `LocationPicker` (radios nativos, `name="sucursal"`),
+  `OpenStatus` (calcula tras montar; `now` fija el instante), `DirectionsLink`,
+  `PickupOption` (muestra lo que manda OPS: costo y días), `NearestLocationForm`.
+
+## Mockups de respaldo (`@asteby/storefront-react/mockups`)
+
+Cuando un producto de OPS no trae imagen, `ProductImage` dibuja una ilustración
+SVG según el tipo de producto en lugar de un hueco: **llanta** (medida en cifras,
+marca, modelo, índice de carga/velocidad, LT, run flat), **refacción** (ficha con
+número de parte, OEM, compatibilidad y posición), **suplemento** (bote, frasco o
+bolsa con nombre, sabor y presentación) y **genérico** (caja con monograma).
+SSR, sin JavaScript en el cliente, sin red, sin `id`s; ~1–2 KB gzip por mockup.
+
+```tsx
+import { ProductImage } from '@asteby/storefront-react/mockups'
+
+// Sustituye el `product.featured_image ? <Image …/> : null` de las tarjetas:
+<ProductImage
+  product={product}
+  variant={selectedVariant}            // opcional: su imagen gana; su sabor/presentación alimenta el mockup
+  widths={[240, 360, 480, 720]}
+  sizes="(min-width: 1024px) 25vw, 50vw"
+  priority={index < 4}                  // LCP (solo aplica a la imagen real)
+  className="h-full w-full object-cover"
+/>
+```
+
+- **Con imagen** renderiza `<Image>` (srcset, `width`/`height`, `priority`); el
+  `alt` es el de OPS, o el título del producto si viene vacío.
+- **Sin imagen** renderiza `<svg role="img" aria-label="Ilustración de referencia: …">`
+  con `<title>`: nunca se anuncia como foto. `alt=""` lo vuelve decorativo
+  (`aria-hidden`), útil cuando el nombre ya está junto a la imagen.
+- **Nunca inventa ni muestra precios**: solo pinta lo que trae el producto
+  (atributos, `vendor`, título, opciones, variante). Sin medida no hay medida;
+  el sabor solo aparece con variante elegida o si la opción tiene un único valor.
+  Todo texto se limpia (controles/bidi), se recorta con `…` y React lo escapa.
+- `image={null}` fuerza el mockup (p. ej. en una galería); `kind="tire"` fuerza el tipo.
+
+### Qué tipo se dibuja
+
+`kind` → `resolveKind` (prop o `MockupProvider`) → `resolveMockupKind(product)`:
+
+1. Atributo `mockup_kind` (o `mockup`) en OPS, si ese tipo está registrado: el
+   dueño puede elegirlo sin tocar código.
+2. Atributos: `size_key`, `section_width_mm`, `rim_diameter_in`, `speed_rating`… → `tire`;
+   `part_number`, `oem_number`, `mpn` → `part`.
+3. Palabras en `product_type`, categoría y etiquetas (no en el título): llanta,
+   neumático, refacción, autoparte, proteína, creatina, colágeno, suplemento…
+4. `generic`.
+
+Atributos que lee cada uno (los del pack del giro, más alias comunes):
+llanta `size_key|size`, `section_width_mm|width`, `aspect_ratio|aspect`,
+`rim_diameter_in|rim`, `load_index`/`load_service`, `speed_rating`, `model`,
+`light_truck`, `runflat`; refacción `part_number|mpn`, `oem_number`,
+`fitment|compatibility|compatibilidad`, `position`; suplemento opción
+`Sabor`/`Presentación` o atributos `flavor|sabor`, `presentation|net_content`,
+`servings` (número) y `form|envase` (`cápsulas` → frasco, `bolsa` → bolsa).
+
+### Personalizar sin tocar el SDK
+
+**Colores y tipografía** con variables CSS. Por defecto toman el tema de la tienda
+(`--color-muted`, `--color-foreground`, `--color-background`, `--color-primary`,
+`--color-primary-foreground`, `--font-heading`/`--font-sans`, los que emite
+`ThemeStyle`) y si no hay, grises neutros con `light-dark()` (modo oscuro cuando
+la página declara `color-scheme: dark` o `light dark`).
+
+```css
+/* app/app.css de la tienda */
+:root {
+  --mockup-bg: var(--color-muted);        /* fondo del cuadro */
+  --mockup-ink: var(--color-foreground);  /* texto sobre el fondo */
+  --mockup-muted: #6b7280;                /* texto secundario sobre el fondo */
+  --mockup-surface: #001963;              /* hule, envase, caja */
+  --mockup-surface-ink: #ffffff;          /* texto sobre el envase */
+  --mockup-label: #ffffff;                /* etiqueta / ficha */
+  --mockup-label-ink: #000c3c;            /* texto sobre la etiqueta */
+  --mockup-accent: #f66123;               /* acento: R16, banda de la ficha, tapa */
+  --mockup-accent-ink: #ffffff;
+  --mockup-font: "Archivo", sans-serif;
+  --mockup-font-mono: ui-monospace, monospace;  /* números de parte */
+  --mockup-text-transform: uppercase;     /* p. ej. nombres en MAYÚSCULAS */
+}
+.dark { --mockup-surface: #0b1440; }
+```
+
+**Tipo por tienda** (sin recompilar el SDK) y textos de la interfaz:
+
+```tsx
+// app/root.tsx
+import { MockupProvider } from '@asteby/storefront-react/mockups'
+
+<MockupProvider
+  resolveKind={(product, guess) => (product.category?.handle === 'shakers' ? 'generic' : guess)}
+  labels={{ illustration: 'Imagen ilustrativa', servings: 'servicios' }}
+>
+  <Outlet />
+</MockupProvider>
+```
+
+**Un mockup propio** (o reemplazar uno base). `MockupFrame` da el `<svg>`, el
+fondo, las variables y la accesibilidad; `MockupText`, `wrapMockupText` y
+`fitMockupFontSize` acomodan el texto sin medir el DOM.
+
+```tsx
+import {
+  BUILTIN_MOCKUPS, MockupFrame, MockupText, MockupProvider, createMockupRegistry,
+  cleanMockupText, tone, wrapMockupText, type MockupComponentProps,
+} from '@asteby/storefront-react/mockups'
+
+type Helmet = { title: string; shell: string | null }
+
+function HelmetMockup({ data, label, labels, ...svg }: MockupComponentProps<Helmet>) {
+  return (
+    <MockupFrame kind="helmet" label={label} {...svg}>
+      <path d="M90 230a110 110 0 0 1 220 0v40H90z" style={tone('surface')} />
+      <MockupText lines={wrapMockupText(data.title, 24, 2)} x={200} y={330} size={22} />
+      {data.shell ? <MockupText lines={[data.shell]} x={200} y={372} size={14} tone="muted" /> : null}
+    </MockupFrame>
+  )
+}
+
+const registry = createMockupRegistry(BUILTIN_MOCKUPS).register('helmet', {
+  component: HelmetMockup,
+  fromProduct: (p) => ({ title: cleanMockupText(p.title) ?? '', shell: cleanMockupText(p.attributes?.shell, 24) }),
+  // describe: (d, labels) => `${labels.illustration}: ${d.title}`  (opcional)
+})
+
+<MockupProvider registry={registry} resolveKind={(p, guess) => (p.product_type === 'Casco' ? 'helmet' : guess)}>…</MockupProvider>
+```
+
+`registerMockup(kind, renderer)` hace lo mismo sobre el registro por defecto
+(llámalo una vez a nivel de módulo). Si registras solo un componente para un
+tipo base (`registerMockup('tire', MiLlanta)`), recibe los datos del extractor
+base (`TireMockupData`). Para dibujar sin producto completo:
+`<ProductMockup kind="part" data={partMockupData(product)} />`.
+
 ## API
 
 | Export | |
@@ -171,3 +341,4 @@ renders it as a `<style>`; `themeFontsHref(theme)` gives a Google Fonts URL.
 | `productJsonLd`, `organizationJsonLd`, `localBusinessJsonLd`, `breadcrumbJsonLd`, `faqJsonLd`, `collectionJsonLd`, `JsonLd`, `serializeJsonLd` | schema.org JSON-LD |
 | `defineSection`, `SectionRegistry`, `createSectionRegistry`, `Sections`, `resolveSectionProps`, `sectionJsonSchema` | Content sections |
 | `themeToCss`, `themeToCssVariables`, `ThemeStyle`, `themeFontsHref`, `tokenName` | SSR theme |
+| `ProductImage`, `ProductMockup`, `MockupProvider`, `createMockupRegistry`, `registerMockup`, `BUILTIN_MOCKUPS`, `MockupFrame`, `MockupText`, `TireMockup`, `PartMockup`, `SupplementMockup`, `GenericMockup` | Mockups de respaldo (subpath `/mockups`) |

package/dist/chunk-C6QZNKRE.js

@@ -0,0 +1,162 @@
+import { createContext, useMemo, useContext, createElement } from 'react';
+import { createStorefrontClient, formatMoney, parseMoney } from '@asteby/storefront';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/context.tsx
+var StorefrontContext = createContext(null);
+function StorefrontProvider({ client, config, shop = null, locale, currency, children }) {
+  const configKey = config ? `${config.baseUrl}|${config.token}|${config.locale ?? ""}|${config.customerToken ?? ""}` : "";
+  const resolvedClient = useMemo(
+    () => client ?? (config ? createStorefrontClient(config) : null),
+    [client, configKey]
+  );
+  const value = useMemo(
+    () => ({
+      client: resolvedClient,
+      shop,
+      locale: locale ?? config?.locale ?? shop?.locale ?? "es-MX",
+      currency: currency ?? shop?.currency_code ?? "MXN"
+    }),
+    [resolvedClient, shop, locale, currency, config?.locale]
+  );
+  return /* @__PURE__ */ jsx(StorefrontContext.Provider, { value, children });
+}
+function useStorefront() {
+  const ctx = useContext(StorefrontContext);
+  if (!ctx) throw new Error("useStorefront must be used inside <StorefrontProvider>");
+  return ctx;
+}
+function useOptionalStorefront() {
+  return useContext(StorefrontContext);
+}
+function useStorefrontClient() {
+  const { client } = useStorefront();
+  if (!client) throw new Error("<StorefrontProvider> needs a `client` or `config` for browser-side calls");
+  return client;
+}
+function Money({
+  data,
+  as,
+  locale,
+  withoutTrailingZeros,
+  withoutCurrency,
+  currencyDisplay,
+  ...rest
+}) {
+  const sf = useOptionalStorefront();
+  const text = formatMoney(data, locale ?? sf?.locale, {
+    ...withoutTrailingZeros !== void 0 ? { withoutTrailingZeros } : {},
+    ...withoutCurrency !== void 0 ? { withoutCurrency } : {},
+    ...currencyDisplay !== void 0 ? { currencyDisplay } : {}
+  });
+  return createElement(as ?? "span", rest, text);
+}
+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__ */ 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
+    }
+  );
+}
+var VISUALLY_HIDDEN = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+function ProductPrice({
+  product,
+  variant,
+  fromLabel = "Desde",
+  compareAtLabel = "Precio anterior",
+  locale,
+  withoutTrailingZeros,
+  ...rest
+}) {
+  let price = null;
+  let compareAt = null;
+  let isRange = false;
+  if (variant) {
+    price = variant.price;
+    compareAt = variant.compare_at_price;
+  } else if (product) {
+    price = product.price_range.min;
+    compareAt = product.compare_at_price_range?.min ?? null;
+    isRange = product.price_range.min.amount !== product.price_range.max.amount;
+  }
+  if (!price) return null;
+  const onSale = compareAt !== null && parseMoney(compareAt) > parseMoney(price);
+  const opts = { ...locale ? { locale } : {}, ...withoutTrailingZeros !== void 0 ? { withoutTrailingZeros } : {} };
+  return /* @__PURE__ */ jsxs("div", { "data-on-sale": onSale || void 0, ...rest, children: [
+    isRange ? /* @__PURE__ */ jsxs("span", { "data-price-prefix": "", children: [
+      fromLabel,
+      " "
+    ] }) : null,
+    /* @__PURE__ */ jsx(Money, { data: price, "data-price": "", ...opts }),
+    onSale && compareAt ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      " ",
+      /* @__PURE__ */ jsxs("s", { "data-compare-at-price": "", children: [
+        /* @__PURE__ */ jsxs("span", { style: VISUALLY_HIDDEN, children: [
+          compareAtLabel,
+          ": "
+        ] }),
+        /* @__PURE__ */ jsx(Money, { data: compareAt, ...opts })
+      ] })
+    ] }) : null
+  ] });
+}
+
+export { DEFAULT_IMAGE_WIDTHS, Image, Money, ProductPrice, StorefrontProvider, defaultImageLoader, useOptionalStorefront, useStorefront, useStorefrontClient };
+//# sourceMappingURL=chunk-C6QZNKRE.js.map
+//# sourceMappingURL=chunk-C6QZNKRE.js.map

package/dist/chunk-C6QZNKRE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context.tsx","../src/components.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-C6QZNKRE.js","sourcesContent":["import { createContext, useContext, useMemo, type ReactNode } from 'react'\nimport { createStorefrontClient, type Shop, type StorefrontClient, type StorefrontClientOptions } from '@asteby/storefront'\n\nexport type StorefrontContextValue = {\n  /** Client for browser-side calls (use a public `pk_` token). */\n  client: StorefrontClient | null\n  shop: Shop | null\n  /** BCP 47 locale used for formatting (defaults to `shop.locale`, then `es-MX`). */\n  locale: string\n  /** ISO 4217 currency (defaults to `shop.currency_code`, then `MXN`). */\n  currency: string\n}\n\nconst StorefrontContext = createContext<StorefrontContextValue | null>(null)\n\nexport type StorefrontProviderProps = {\n  /** A ready client. Takes precedence over `config`. */\n  client?: StorefrontClient\n  /** Options to create the browser client (use a `pk_` token). */\n  config?: StorefrontClientOptions\n  /** Shop info loaded on the server (root loader). */\n  shop?: Shop | null\n  locale?: string\n  currency?: string\n  children?: ReactNode\n}\n\n/**\n * Makes the storefront client, shop, locale and currency available to the\n * tree. SSR-safe: creating the client does not touch `window`.\n */\nexport function StorefrontProvider({ client, config, shop = null, locale, currency, children }: StorefrontProviderProps) {\n  const configKey = config ? `${config.baseUrl}|${config.token}|${config.locale ?? ''}|${config.customerToken ?? ''}` : ''\n  const resolvedClient = useMemo(\n    () => client ?? (config ? createStorefrontClient(config) : null),\n    [client, configKey],\n  )\n  const value = useMemo<StorefrontContextValue>(\n    () => ({\n      client: resolvedClient,\n      shop,\n      locale: locale ?? config?.locale ?? shop?.locale ?? 'es-MX',\n      currency: currency ?? shop?.currency_code ?? 'MXN',\n    }),\n    [resolvedClient, shop, locale, currency, config?.locale],\n  )\n  return <StorefrontContext.Provider value={value}>{children}</StorefrontContext.Provider>\n}\n\n/** Storefront context. Throws outside `<StorefrontProvider>`. */\nexport function useStorefront(): StorefrontContextValue {\n  const ctx = useContext(StorefrontContext)\n  if (!ctx) throw new Error('useStorefront must be used inside <StorefrontProvider>')\n  return ctx\n}\n\n/** Storefront context or `null` outside a provider (for components that work standalone). */\nexport function useOptionalStorefront(): StorefrontContextValue | null {\n  return useContext(StorefrontContext)\n}\n\n/** The client from context; throws when the provider has none. */\nexport function useStorefrontClient(): StorefrontClient {\n  const { client } = useStorefront()\n  if (!client) throw new Error('<StorefrontProvider> needs a `client` or `config` for browser-side calls')\n  return client\n}\n","import { createElement, type ComponentPropsWithoutRef, type ElementType, type ReactNode } from 'react'\nimport { formatMoney, parseMoney, type FormatMoneyOptions, type Image as ImageData, type Money as MoneyData, type Product, type ProductVariant } from '@asteby/storefront'\nimport { useOptionalStorefront } from './context.js'\n\n// ---------------------------------------------------------------------------\n// Money\n// ---------------------------------------------------------------------------\n\nexport type MoneyProps<As extends ElementType = 'span'> = FormatMoneyOptions & {\n  data: MoneyData\n  /** Element to render (default `span`). */\n  as?: As\n  /** Overrides the provider locale. */\n  locale?: string\n} & Omit<ComponentPropsWithoutRef<As>, 'children' | 'as'>\n\n/** Formats `Money` with the provider locale (or `locale`). */\nexport function Money<As extends ElementType = 'span'>({\n  data,\n  as,\n  locale,\n  withoutTrailingZeros,\n  withoutCurrency,\n  currencyDisplay,\n  ...rest\n}: MoneyProps<As>) {\n  const sf = useOptionalStorefront()\n  const text = formatMoney(data, locale ?? sf?.locale, {\n    ...(withoutTrailingZeros !== undefined ? { withoutTrailingZeros } : {}),\n    ...(withoutCurrency !== undefined ? { withoutCurrency } : {}),\n    ...(currencyDisplay !== undefined ? { currencyDisplay } : {}),\n  })\n  return createElement(as ?? 'span', rest, text)\n}\n\n// ---------------------------------------------------------------------------\n// Image\n// ---------------------------------------------------------------------------\n\nexport const DEFAULT_IMAGE_WIDTHS = [320, 480, 640, 768, 1024, 1280, 1600] as const\n\n/** Builds the URL for one srcset width. */\nexport type ImageLoader = (src: string, width: number, height?: number) => string\n\n/**\n * Default loader: adds `?width=<w>` (the convention of most image CDNs and of\n * the OPS image proxy). URLs that cannot be parsed are returned unchanged.\n */\nexport const defaultImageLoader: ImageLoader = (src, width, height) => {\n  try {\n    const isAbsolute = /^[a-z][a-z0-9+.-]*:/i.test(src)\n    const url = new URL(src, 'http://relative.invalid')\n    url.searchParams.set('width', String(width))\n    if (height) url.searchParams.set('height', String(height))\n    return isAbsolute ? url.toString() : url.pathname + url.search + url.hash\n  } catch {\n    return src\n  }\n}\n\nexport type ImageProps = Omit<ComponentPropsWithoutRef<'img'>, 'src' | 'srcSet' | 'width' | 'height'> & {\n  data: ImageData\n  /** `sizes` attribute (default `100vw`). */\n  sizes?: string\n  /** Candidate widths for `srcset` (capped at the intrinsic width when known). */\n  widths?: readonly number[]\n  /** URL builder per width (default adds `?width=`). Pass `null` to disable srcset. */\n  loader?: ImageLoader | null\n  /** Above-the-fold image: eager loading and `fetchpriority=\"high\"`. */\n  priority?: boolean\n  /** Forces an aspect ratio, e.g. `1/1` or `4/3`, used for width/height and srcset heights. */\n  aspectRatio?: string\n}\n\nfunction parseRatio(ratio: string | undefined): number | null {\n  if (!ratio) return null\n  const [w, h] = ratio.split(/[/:]/).map((n) => Number.parseFloat(n))\n  return w && h ? w / h : null\n}\n\n/** Responsive `<img>` with `srcset`, lazy by default, intrinsic size to avoid layout shift. */\nexport function Image({\n  data,\n  sizes = '100vw',\n  widths = DEFAULT_IMAGE_WIDTHS,\n  loader = defaultImageLoader,\n  priority = false,\n  aspectRatio,\n  alt,\n  loading,\n  decoding,\n  ...rest\n}: ImageProps) {\n  const ratio = parseRatio(aspectRatio) ?? (data.width && data.height ? data.width / data.height : null)\n  let candidates = [...widths].sort((a, b) => a - b)\n  if (data.width) {\n    const capped = candidates.filter((w) => w <= data.width!)\n    candidates = capped.length ? capped : [data.width]\n  }\n  const srcSet = loader\n    ? candidates.map((w) => `${loader(data.url, w, ratio ? Math.round(w / ratio) : undefined)} ${w}w`).join(', ')\n    : undefined\n  const width = data.width ?? candidates[candidates.length - 1]\n  const height = data.height ?? (ratio && width ? Math.round(width / ratio) : undefined)\n  return (\n    <img\n      src={data.url}\n      alt={alt ?? data.alt ?? ''}\n      {...(srcSet ? { srcSet, sizes } : {})}\n      {...(width ? { width } : {})}\n      {...(height ? { height } : {})}\n      loading={loading ?? (priority ? 'eager' : 'lazy')}\n      decoding={decoding ?? (priority ? 'auto' : 'async')}\n      {...(priority ? { fetchPriority: 'high' as const } : {})}\n      {...rest}\n    />\n  )\n}\n\n// ---------------------------------------------------------------------------\n// ProductPrice\n// ---------------------------------------------------------------------------\n\nconst VISUALLY_HIDDEN = {\n  position: 'absolute',\n  width: 1,\n  height: 1,\n  padding: 0,\n  margin: -1,\n  overflow: 'hidden',\n  clip: 'rect(0, 0, 0, 0)',\n  whiteSpace: 'nowrap',\n  border: 0,\n} as const\n\nexport type ProductPriceProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {\n  product?: Pick<Product, 'price_range' | 'compare_at_price_range'> | null\n  variant?: Pick<ProductVariant, 'price' | 'compare_at_price'> | null\n  /** Prefix shown when the product has a price range and no variant is selected (default `Desde`). */\n  fromLabel?: ReactNode\n  /** Accessible label for the compare-at price (default `Precio anterior`). */\n  compareAtLabel?: string\n  locale?: string\n  withoutTrailingZeros?: boolean\n}\n\n/**\n * Price with optional compare-at (strikethrough). With a `variant` it shows\n * that variant; otherwise the product's minimum price (prefixed with\n * `fromLabel` when prices vary).\n */\nexport function ProductPrice({\n  product,\n  variant,\n  fromLabel = 'Desde',\n  compareAtLabel = 'Precio anterior',\n  locale,\n  withoutTrailingZeros,\n  ...rest\n}: ProductPriceProps) {\n  let price: MoneyData | null = null\n  let compareAt: MoneyData | null = null\n  let isRange = false\n  if (variant) {\n    price = variant.price\n    compareAt = variant.compare_at_price\n  } else if (product) {\n    price = product.price_range.min\n    compareAt = product.compare_at_price_range?.min ?? null\n    isRange = product.price_range.min.amount !== product.price_range.max.amount\n  }\n  if (!price) return null\n  const onSale = compareAt !== null && parseMoney(compareAt) > parseMoney(price)\n  const opts = { ...(locale ? { locale } : {}), ...(withoutTrailingZeros !== undefined ? { withoutTrailingZeros } : {}) }\n  return (\n    <div data-on-sale={onSale || undefined} {...rest}>\n      {isRange ? <span data-price-prefix=\"\">{fromLabel} </span> : null}\n      <Money data={price} data-price=\"\" {...opts} />\n      {onSale && compareAt ? (\n        <>\n          {' '}\n          <s data-compare-at-price=\"\">\n            <span style={VISUALLY_HIDDEN}>{compareAtLabel}: </span>\n            <Money data={compareAt} {...opts} />\n          </s>\n        </>\n      ) : null}\n    </div>\n  )\n}\n"]}

package/dist/components-B5XhSH-m.d.cts

@@ -0,0 +1,54 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+import { Image as Image$1, FormatMoneyOptions, Money as Money$1, Product, ProductVariant } from '@asteby/storefront';
+
+type MoneyProps<As extends ElementType = 'span'> = FormatMoneyOptions & {
+    data: Money$1;
+    /** Element to render (default `span`). */
+    as?: As;
+    /** Overrides the provider locale. */
+    locale?: string;
+} & Omit<ComponentPropsWithoutRef<As>, 'children' | 'as'>;
+/** Formats `Money` with the provider locale (or `locale`). */
+declare function Money<As extends ElementType = 'span'>({ data, as, locale, withoutTrailingZeros, withoutCurrency, currencyDisplay, ...rest }: MoneyProps<As>): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+declare const DEFAULT_IMAGE_WIDTHS: readonly [320, 480, 640, 768, 1024, 1280, 1600];
+/** Builds the URL for one srcset width. */
+type ImageLoader = (src: string, width: number, height?: number) => string;
+/**
+ * Default loader: adds `?width=<w>` (the convention of most image CDNs and of
+ * the OPS image proxy). URLs that cannot be parsed are returned unchanged.
+ */
+declare const defaultImageLoader: ImageLoader;
+type ImageProps = Omit<ComponentPropsWithoutRef<'img'>, 'src' | 'srcSet' | 'width' | 'height'> & {
+    data: Image$1;
+    /** `sizes` attribute (default `100vw`). */
+    sizes?: string;
+    /** Candidate widths for `srcset` (capped at the intrinsic width when known). */
+    widths?: readonly number[];
+    /** URL builder per width (default adds `?width=`). Pass `null` to disable srcset. */
+    loader?: ImageLoader | null;
+    /** Above-the-fold image: eager loading and `fetchpriority="high"`. */
+    priority?: boolean;
+    /** Forces an aspect ratio, e.g. `1/1` or `4/3`, used for width/height and srcset heights. */
+    aspectRatio?: string;
+};
+/** Responsive `<img>` with `srcset`, lazy by default, intrinsic size to avoid layout shift. */
+declare function Image({ data, sizes, widths, loader, priority, aspectRatio, alt, loading, decoding, ...rest }: ImageProps): react.JSX.Element;
+type ProductPriceProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
+    product?: Pick<Product, 'price_range' | 'compare_at_price_range'> | null;
+    variant?: Pick<ProductVariant, 'price' | 'compare_at_price'> | null;
+    /** Prefix shown when the product has a price range and no variant is selected (default `Desde`). */
+    fromLabel?: ReactNode;
+    /** Accessible label for the compare-at price (default `Precio anterior`). */
+    compareAtLabel?: string;
+    locale?: string;
+    withoutTrailingZeros?: boolean;
+};
+/**
+ * Price with optional compare-at (strikethrough). With a `variant` it shows
+ * that variant; otherwise the product's minimum price (prefixed with
+ * `fromLabel` when prices vary).
+ */
+declare function ProductPrice({ product, variant, fromLabel, compareAtLabel, locale, withoutTrailingZeros, ...rest }: ProductPriceProps): react.JSX.Element | null;
+
+export { DEFAULT_IMAGE_WIDTHS as D, Image as I, Money as M, ProductPrice as P, type ImageLoader as a, type ImageProps as b, type MoneyProps as c, type ProductPriceProps as d, defaultImageLoader as e };

package/dist/components-B5XhSH-m.d.ts

@@ -0,0 +1,54 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+import { Image as Image$1, FormatMoneyOptions, Money as Money$1, Product, ProductVariant } from '@asteby/storefront';
+
+type MoneyProps<As extends ElementType = 'span'> = FormatMoneyOptions & {
+    data: Money$1;
+    /** Element to render (default `span`). */
+    as?: As;
+    /** Overrides the provider locale. */
+    locale?: string;
+} & Omit<ComponentPropsWithoutRef<As>, 'children' | 'as'>;
+/** Formats `Money` with the provider locale (or `locale`). */
+declare function Money<As extends ElementType = 'span'>({ data, as, locale, withoutTrailingZeros, withoutCurrency, currencyDisplay, ...rest }: MoneyProps<As>): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+declare const DEFAULT_IMAGE_WIDTHS: readonly [320, 480, 640, 768, 1024, 1280, 1600];
+/** Builds the URL for one srcset width. */
+type ImageLoader = (src: string, width: number, height?: number) => string;
+/**
+ * Default loader: adds `?width=<w>` (the convention of most image CDNs and of
+ * the OPS image proxy). URLs that cannot be parsed are returned unchanged.
+ */
+declare const defaultImageLoader: ImageLoader;
+type ImageProps = Omit<ComponentPropsWithoutRef<'img'>, 'src' | 'srcSet' | 'width' | 'height'> & {
+    data: Image$1;
+    /** `sizes` attribute (default `100vw`). */
+    sizes?: string;
+    /** Candidate widths for `srcset` (capped at the intrinsic width when known). */
+    widths?: readonly number[];
+    /** URL builder per width (default adds `?width=`). Pass `null` to disable srcset. */
+    loader?: ImageLoader | null;
+    /** Above-the-fold image: eager loading and `fetchpriority="high"`. */
+    priority?: boolean;
+    /** Forces an aspect ratio, e.g. `1/1` or `4/3`, used for width/height and srcset heights. */
+    aspectRatio?: string;
+};
+/** Responsive `<img>` with `srcset`, lazy by default, intrinsic size to avoid layout shift. */
+declare function Image({ data, sizes, widths, loader, priority, aspectRatio, alt, loading, decoding, ...rest }: ImageProps): react.JSX.Element;
+type ProductPriceProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
+    product?: Pick<Product, 'price_range' | 'compare_at_price_range'> | null;
+    variant?: Pick<ProductVariant, 'price' | 'compare_at_price'> | null;
+    /** Prefix shown when the product has a price range and no variant is selected (default `Desde`). */
+    fromLabel?: ReactNode;
+    /** Accessible label for the compare-at price (default `Precio anterior`). */
+    compareAtLabel?: string;
+    locale?: string;
+    withoutTrailingZeros?: boolean;
+};
+/**
+ * Price with optional compare-at (strikethrough). With a `variant` it shows
+ * that variant; otherwise the product's minimum price (prefixed with
+ * `fromLabel` when prices vary).
+ */
+declare function ProductPrice({ product, variant, fromLabel, compareAtLabel, locale, withoutTrailingZeros, ...rest }: ProductPriceProps): react.JSX.Element | null;
+
+export { DEFAULT_IMAGE_WIDTHS as D, Image as I, Money as M, ProductPrice as P, type ImageLoader as a, type ImageProps as b, type MoneyProps as c, type ProductPriceProps as d, defaultImageLoader as e };