@asteby/storefront-react 0.6.0 → 0.8.0

package/dist/cart.d.cts

@@ -0,0 +1,144 @@
+import * as react from 'react';
+import { ElementType, ReactNode } from 'react';
+import { Cart, CartLine, Money } from '@asteby/storefront';
+
+type CartDrawerLabels = {
+    /** Título; el cajón agrega " (N)" con la cantidad de unidades. */
+    title: string;
+    /** Texto accesible del botón de cierre. */
+    close: string;
+    empty: string;
+    emptyHint?: string;
+    /** Texto del enlace "seguir comprando" del estado vacío (se muestra con `paths.browse`). */
+    browse?: string;
+    subtotal: string;
+    /** Nota bajo el subtotal. */
+    note?: string;
+    checkout: string;
+    viewCart: string;
+    remove: string;
+    increase: string;
+    decrease: string;
+};
+type CartDrawerPaths = {
+    /** Página del carrito: acción de las mutaciones y destino de "ver carrito". */
+    cart: string;
+    checkout: string;
+    browse?: string;
+    /** Enlace de la línea al producto; sin esto el título no es enlace. */
+    product?: (handle: string, variantId: string) => string;
+};
+/** Contrato de la acción de ruta del carrito de la tienda (nombres de campo e intenciones). */
+type CartDrawerFormContract = {
+    intentField?: string;
+    lineField?: string;
+    quantityField?: string;
+    updateIntent?: string;
+    removeIntent?: string;
+};
+type CartDrawerShipping = {
+    /** Mensaje ya calculado por la tienda con lo que manda OPS. */
+    message: ReactNode;
+    /** 0..100 */
+    percent: number;
+    reached?: boolean;
+    progressLabel: string;
+};
+type CartDrawerLineForm = {
+    /** Componente de formulario (`'form'`, o `fetcher.Form` del router para mejorar sin recargar). */
+    Form: ElementType;
+    /** Datos en vuelo del formulario, para pintar la cantidad de forma optimista. */
+    formData?: FormData | null | undefined;
+};
+type CartDrawerLinkProps = {
+    href: string;
+    className?: string | undefined;
+    children: ReactNode;
+    onClick?: () => void;
+};
+type CartDrawerSlot = 'dialog' | 'panel' | 'header' | 'title' | 'close' | 'empty' | 'body' | 'shipping' | 'bar' | 'barFill' | 'lines' | 'line' | 'image' | 'lineTitle' | 'variant' | 'price' | 'qty' | 'qtyButton' | 'qtyValue' | 'remove' | 'upsell' | 'footer' | 'subtotal' | 'note' | 'actions' | 'checkout' | 'viewCart' | 'browse' | 'emptyTitle' | 'emptyHint' | 'shippingMessage' | 'lineMain' | 'lineHead' | 'lineText' | 'controls' | 'upsellTitle' | 'subtotalLabel' | 'subtotalValue';
+type CartDrawerIcons = {
+    close?: ReactNode;
+    decrease?: ReactNode;
+    increase?: ReactNode;
+    shipping?: ReactNode;
+    shippingReached?: ReactNode;
+};
+type CartDrawerProps = {
+    /** `cart.cost` y cada línea vienen de OPS; el cajón no calcula nada. */
+    cart: Cart | null | undefined;
+    labels: CartDrawerLabels;
+    paths: CartDrawerPaths;
+    form?: CartDrawerFormContract;
+    /** Hook que da el formulario de cada línea. Por omisión `<form method="post">` (funciona sin JavaScript). */
+    useLineForm?: () => CartDrawerLineForm;
+    shipping?: CartDrawerShipping | null;
+    /** Aviso fijo cuando no hay barra de envío (p. ej. "Envío gratis"). */
+    notice?: ReactNode;
+    /** Sección "podría interesarte" (la tienda decide qué mostrar). */
+    upsell?: ReactNode;
+    upsellTitle?: string;
+    renderLine?: (line: CartLine, defaults: {
+        controls: ReactNode;
+        price: ReactNode;
+        image: ReactNode;
+    }) => ReactNode;
+    renderImage?: (line: CartLine) => ReactNode;
+    renderMoney?: (money: Money) => ReactNode;
+    renderLink?: (props: CartDrawerLinkProps) => ReactNode;
+    /** Omite el variante cuando es el valor por defecto de OPS ("Default Title"). */
+    isDefaultVariantTitle?: (title: string) => boolean;
+    icons?: CartDrawerIcons;
+    /** Clases por pieza (además de los `data-sf-cart-*`), para tiendas con Tailwind. */
+    classNames?: Partial<Record<CartDrawerSlot, string>>;
+    locale?: string;
+    /** Se llama al abrir/cerrar por cualquier vía. */
+    onOpenChange?: (open: boolean) => void;
+};
+/**
+ * Cajón lateral del carrito ("Tu carrito (N)"). Sin textos ni marca: todo llega por props.
+ * Se monta una vez (en la raíz) y se abre con `openCartDrawer()` / `useCartDrawer()`.
+ * `<dialog>` modal: `role="dialog"`, `aria-modal`, foco atrapado y devuelto al abridor, Esc y clic fuera cierran,
+ * el fondo no hace scroll. Las mutaciones usan la acción de ruta de la tienda (formularios nativos que
+ * funcionan sin JavaScript, o el `Form` de un fetcher con `useLineForm`). Estilos: `@asteby/storefront-react/cart.css`
+ * (tokens de la tienda) y/o `classNames`.
+ */
+declare function CartDrawer(props: CartDrawerProps): react.JSX.Element | null;
+
+/** Abre el cajón del carrito desde cualquier parte. */
+declare function openCartDrawer(): void;
+/** Cierra el cajón del carrito. */
+declare function closeCartDrawer(): void;
+declare function toggleCartDrawer(): void;
+declare function isCartDrawerOpen(): boolean;
+/** Estado y acciones del cajón. `open` es `false` en el servidor y en la primera pintura. */
+declare function useCartDrawer(): {
+    open: boolean;
+    openDrawer: typeof openCartDrawer;
+    closeDrawer: typeof closeCartDrawer;
+    toggle: () => void;
+};
+/**
+ * Abre el cajón cuando termina un "agregar al carrito". `busy` es verdadero mientras hay un agregado en vuelo
+ * (en React Router: algún fetcher con la acción del carrito e intención de agregar). Con `skip` verdadero al
+ * terminar (error, agregado silencioso) no se abre.
+ */
+declare function useOpenCartDrawerWhenDone(busy: boolean, options?: {
+    skip?: boolean;
+}): void;
+type ClickLike = {
+    defaultPrevented: boolean;
+    button: number;
+    metaKey: boolean;
+    ctrlKey: boolean;
+    shiftKey: boolean;
+    altKey: boolean;
+    preventDefault: () => void;
+};
+/**
+ * `onClick` para el enlace "Mi carrito" de la cabecera: con un clic normal abre el cajón; con clic con
+ * modificador, clic central o sin JavaScript el `href` (la página del carrito) sigue funcionando.
+ */
+declare function handleCartLinkClick(e: ClickLike): void;
+
+export { CartDrawer, type CartDrawerFormContract, type CartDrawerIcons, type CartDrawerLabels, type CartDrawerLineForm, type CartDrawerLinkProps, type CartDrawerPaths, type CartDrawerProps, type CartDrawerShipping, type CartDrawerSlot, closeCartDrawer, handleCartLinkClick, isCartDrawerOpen, openCartDrawer, toggleCartDrawer, useCartDrawer, useOpenCartDrawerWhenDone };

package/dist/cart.d.ts

@@ -0,0 +1,144 @@
+import * as react from 'react';
+import { ElementType, ReactNode } from 'react';
+import { Cart, CartLine, Money } from '@asteby/storefront';
+
+type CartDrawerLabels = {
+    /** Título; el cajón agrega " (N)" con la cantidad de unidades. */
+    title: string;
+    /** Texto accesible del botón de cierre. */
+    close: string;
+    empty: string;
+    emptyHint?: string;
+    /** Texto del enlace "seguir comprando" del estado vacío (se muestra con `paths.browse`). */
+    browse?: string;
+    subtotal: string;
+    /** Nota bajo el subtotal. */
+    note?: string;
+    checkout: string;
+    viewCart: string;
+    remove: string;
+    increase: string;
+    decrease: string;
+};
+type CartDrawerPaths = {
+    /** Página del carrito: acción de las mutaciones y destino de "ver carrito". */
+    cart: string;
+    checkout: string;
+    browse?: string;
+    /** Enlace de la línea al producto; sin esto el título no es enlace. */
+    product?: (handle: string, variantId: string) => string;
+};
+/** Contrato de la acción de ruta del carrito de la tienda (nombres de campo e intenciones). */
+type CartDrawerFormContract = {
+    intentField?: string;
+    lineField?: string;
+    quantityField?: string;
+    updateIntent?: string;
+    removeIntent?: string;
+};
+type CartDrawerShipping = {
+    /** Mensaje ya calculado por la tienda con lo que manda OPS. */
+    message: ReactNode;
+    /** 0..100 */
+    percent: number;
+    reached?: boolean;
+    progressLabel: string;
+};
+type CartDrawerLineForm = {
+    /** Componente de formulario (`'form'`, o `fetcher.Form` del router para mejorar sin recargar). */
+    Form: ElementType;
+    /** Datos en vuelo del formulario, para pintar la cantidad de forma optimista. */
+    formData?: FormData | null | undefined;
+};
+type CartDrawerLinkProps = {
+    href: string;
+    className?: string | undefined;
+    children: ReactNode;
+    onClick?: () => void;
+};
+type CartDrawerSlot = 'dialog' | 'panel' | 'header' | 'title' | 'close' | 'empty' | 'body' | 'shipping' | 'bar' | 'barFill' | 'lines' | 'line' | 'image' | 'lineTitle' | 'variant' | 'price' | 'qty' | 'qtyButton' | 'qtyValue' | 'remove' | 'upsell' | 'footer' | 'subtotal' | 'note' | 'actions' | 'checkout' | 'viewCart' | 'browse' | 'emptyTitle' | 'emptyHint' | 'shippingMessage' | 'lineMain' | 'lineHead' | 'lineText' | 'controls' | 'upsellTitle' | 'subtotalLabel' | 'subtotalValue';
+type CartDrawerIcons = {
+    close?: ReactNode;
+    decrease?: ReactNode;
+    increase?: ReactNode;
+    shipping?: ReactNode;
+    shippingReached?: ReactNode;
+};
+type CartDrawerProps = {
+    /** `cart.cost` y cada línea vienen de OPS; el cajón no calcula nada. */
+    cart: Cart | null | undefined;
+    labels: CartDrawerLabels;
+    paths: CartDrawerPaths;
+    form?: CartDrawerFormContract;
+    /** Hook que da el formulario de cada línea. Por omisión `<form method="post">` (funciona sin JavaScript). */
+    useLineForm?: () => CartDrawerLineForm;
+    shipping?: CartDrawerShipping | null;
+    /** Aviso fijo cuando no hay barra de envío (p. ej. "Envío gratis"). */
+    notice?: ReactNode;
+    /** Sección "podría interesarte" (la tienda decide qué mostrar). */
+    upsell?: ReactNode;
+    upsellTitle?: string;
+    renderLine?: (line: CartLine, defaults: {
+        controls: ReactNode;
+        price: ReactNode;
+        image: ReactNode;
+    }) => ReactNode;
+    renderImage?: (line: CartLine) => ReactNode;
+    renderMoney?: (money: Money) => ReactNode;
+    renderLink?: (props: CartDrawerLinkProps) => ReactNode;
+    /** Omite el variante cuando es el valor por defecto de OPS ("Default Title"). */
+    isDefaultVariantTitle?: (title: string) => boolean;
+    icons?: CartDrawerIcons;
+    /** Clases por pieza (además de los `data-sf-cart-*`), para tiendas con Tailwind. */
+    classNames?: Partial<Record<CartDrawerSlot, string>>;
+    locale?: string;
+    /** Se llama al abrir/cerrar por cualquier vía. */
+    onOpenChange?: (open: boolean) => void;
+};
+/**
+ * Cajón lateral del carrito ("Tu carrito (N)"). Sin textos ni marca: todo llega por props.
+ * Se monta una vez (en la raíz) y se abre con `openCartDrawer()` / `useCartDrawer()`.
+ * `<dialog>` modal: `role="dialog"`, `aria-modal`, foco atrapado y devuelto al abridor, Esc y clic fuera cierran,
+ * el fondo no hace scroll. Las mutaciones usan la acción de ruta de la tienda (formularios nativos que
+ * funcionan sin JavaScript, o el `Form` de un fetcher con `useLineForm`). Estilos: `@asteby/storefront-react/cart.css`
+ * (tokens de la tienda) y/o `classNames`.
+ */
+declare function CartDrawer(props: CartDrawerProps): react.JSX.Element | null;
+
+/** Abre el cajón del carrito desde cualquier parte. */
+declare function openCartDrawer(): void;
+/** Cierra el cajón del carrito. */
+declare function closeCartDrawer(): void;
+declare function toggleCartDrawer(): void;
+declare function isCartDrawerOpen(): boolean;
+/** Estado y acciones del cajón. `open` es `false` en el servidor y en la primera pintura. */
+declare function useCartDrawer(): {
+    open: boolean;
+    openDrawer: typeof openCartDrawer;
+    closeDrawer: typeof closeCartDrawer;
+    toggle: () => void;
+};
+/**
+ * Abre el cajón cuando termina un "agregar al carrito". `busy` es verdadero mientras hay un agregado en vuelo
+ * (en React Router: algún fetcher con la acción del carrito e intención de agregar). Con `skip` verdadero al
+ * terminar (error, agregado silencioso) no se abre.
+ */
+declare function useOpenCartDrawerWhenDone(busy: boolean, options?: {
+    skip?: boolean;
+}): void;
+type ClickLike = {
+    defaultPrevented: boolean;
+    button: number;
+    metaKey: boolean;
+    ctrlKey: boolean;
+    shiftKey: boolean;
+    altKey: boolean;
+    preventDefault: () => void;
+};
+/**
+ * `onClick` para el enlace "Mi carrito" de la cabecera: con un clic normal abre el cajón; con clic con
+ * modificador, clic central o sin JavaScript el `href` (la página del carrito) sigue funcionando.
+ */
+declare function handleCartLinkClick(e: ClickLike): void;
+
+export { CartDrawer, type CartDrawerFormContract, type CartDrawerIcons, type CartDrawerLabels, type CartDrawerLineForm, type CartDrawerLinkProps, type CartDrawerPaths, type CartDrawerProps, type CartDrawerShipping, type CartDrawerSlot, closeCartDrawer, handleCartLinkClick, isCartDrawerOpen, openCartDrawer, toggleCartDrawer, useCartDrawer, useOpenCartDrawerWhenDone };

package/dist/cart.js

@@ -0,0 +1,210 @@
+import { useResolvedLocale, useModalDialog } from './chunk-2WZIWIBW.js';
+import './chunk-DQBL2DFJ.js';
+import { useSyncExternalStore, useCallback, useRef, useEffect, useId } from 'react';
+import { formatMoney } from '@asteby/storefront';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var isOpen = false;
+var listeners = /* @__PURE__ */ new Set();
+function set(next) {
+  if (isOpen === next) return;
+  isOpen = next;
+  for (const l of [...listeners]) l();
+}
+var subscribe = (l) => {
+  listeners.add(l);
+  return () => {
+    listeners.delete(l);
+  };
+};
+function openCartDrawer() {
+  set(true);
+}
+function closeCartDrawer() {
+  set(false);
+}
+function toggleCartDrawer() {
+  set(!isOpen);
+}
+function isCartDrawerOpen() {
+  return isOpen;
+}
+function useCartDrawer() {
+  const open = useSyncExternalStore(subscribe, () => isOpen, () => false);
+  const toggle = useCallback(() => toggleCartDrawer(), []);
+  return { open, openDrawer: openCartDrawer, closeDrawer: closeCartDrawer, toggle };
+}
+function useOpenCartDrawerWhenDone(busy, options = {}) {
+  const was = useRef(false);
+  const skip = useRef(false);
+  skip.current = !!options.skip;
+  useEffect(() => {
+    if (was.current && !busy && !skip.current) openCartDrawer();
+    was.current = busy;
+  }, [busy]);
+}
+function handleCartLinkClick(e) {
+  if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+  e.preventDefault();
+  openCartDrawer();
+}
+var DEFAULT_FORM = {
+  intentField: "intent",
+  lineField: "line_id",
+  quantityField: "quantity",
+  updateIntent: "update",
+  removeIntent: "remove"
+};
+var useNativeForm = () => ({ Form: "form" });
+var defaultIsDefaultVariant = (t) => /^default title$/i.test(t.trim());
+function useBodyScrollLock(locked) {
+  useEffect(() => {
+    if (!locked || typeof document === "undefined") return;
+    const el = document.documentElement;
+    const prev = el.style.overflow;
+    el.style.overflow = "hidden";
+    return () => {
+      el.style.overflow = prev;
+    };
+  }, [locked]);
+}
+function CartDrawer(props) {
+  const { cart, labels, paths, shipping, notice, upsell, upsellTitle, icons, classNames: cx = {}, onOpenChange } = props;
+  const locale = useResolvedLocale(props.locale);
+  const { open } = useCartDrawer();
+  const titleId = useId();
+  const upsellId = useId();
+  const { ref, onBackdropClick } = useModalDialog({ open, onClose: () => closeCartDrawer() });
+  useBodyScrollLock(open);
+  useEffect(() => {
+    onOpenChange?.(open);
+  }, [open]);
+  if (!open) return null;
+  const money = props.renderMoney ?? ((m) => formatMoney(m, locale));
+  const link = props.renderLink ?? (({ href, className, children, onClick }) => /* @__PURE__ */ jsx("a", { href, className, onClick, children }));
+  const count = cart?.total_quantity ?? 0;
+  const lines = cart?.lines ?? [];
+  const empty = !cart || lines.length === 0;
+  const close = () => closeCartDrawer();
+  return /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      ref,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": titleId,
+      onClick: onBackdropClick,
+      onClose: close,
+      className: cx.dialog,
+      "data-sf-cart-drawer": "",
+      children: /* @__PURE__ */ jsxs("div", { className: cx.panel, "data-sf-cart-panel": "", children: [
+        /* @__PURE__ */ jsxs("div", { className: cx.header, "data-sf-cart-header": "", children: [
+          /* @__PURE__ */ jsxs("h2", { id: titleId, tabIndex: -1, className: cx.title, "data-sf-cart-title": "", children: [
+            labels.title,
+            count > 0 ? ` (${count})` : ""
+          ] }),
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: close, "aria-label": labels.close, className: cx.close, "data-sf-cart-close": "", "data-sf-autofocus": "", children: icons?.close ?? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2715" }) })
+        ] }),
+        empty ? /* @__PURE__ */ jsxs("div", { className: cx.empty, "data-sf-cart-empty": "", children: [
+          /* @__PURE__ */ jsx("p", { className: cx.emptyTitle, "data-sf-cart-empty-title": "", children: labels.empty }),
+          labels.emptyHint ? /* @__PURE__ */ jsx("p", { className: cx.emptyHint, "data-sf-cart-empty-hint": "", children: labels.emptyHint }) : null,
+          paths.browse && labels.browse ? link({ href: paths.browse, className: cx.browse, children: labels.browse, onClick: close }) : null
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: cx.body, "data-sf-cart-body": "", children: [
+            shipping ? /* @__PURE__ */ jsxs("div", { className: cx.shipping, "data-sf-cart-shipping": "", "data-reached": shipping.reached || void 0, children: [
+              /* @__PURE__ */ jsxs("p", { className: cx.shippingMessage, children: [
+                shipping.reached ? icons?.shippingReached : icons?.shipping,
+                shipping.message
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "progressbar",
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 100,
+                  "aria-valuenow": Math.round(shipping.percent),
+                  "aria-label": shipping.progressLabel,
+                  className: cx.bar,
+                  "data-sf-cart-bar": "",
+                  children: /* @__PURE__ */ jsx("div", { className: cx.barFill, "data-sf-cart-bar-fill": "", style: { width: `${Math.max(0, Math.min(100, shipping.percent))}%` } })
+                }
+              )
+            ] }) : notice ? /* @__PURE__ */ jsxs("p", { className: [cx.shipping, cx.shippingMessage].filter(Boolean).join(" ") || void 0, "data-sf-cart-shipping": "", "data-notice": "", children: [
+              icons?.shippingReached,
+              notice
+            ] }) : null,
+            /* @__PURE__ */ jsx("ul", { className: cx.lines, "data-sf-cart-lines": "", children: lines.map((line) => /* @__PURE__ */ jsx(DrawerLine, { line, props, money, link, close }, line.id)) }),
+            upsell ? /* @__PURE__ */ jsxs("section", { className: cx.upsell, "data-sf-cart-upsell": "", "aria-labelledby": upsellTitle ? upsellId : void 0, children: [
+              upsellTitle ? /* @__PURE__ */ jsx("h3", { id: upsellId, className: cx.upsellTitle, children: upsellTitle }) : null,
+              upsell
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: cx.footer, "data-sf-cart-footer": "", children: [
+            /* @__PURE__ */ jsxs("div", { className: cx.subtotal, "data-sf-cart-subtotal": "", children: [
+              /* @__PURE__ */ jsx("span", { className: cx.subtotalLabel, children: labels.subtotal }),
+              /* @__PURE__ */ jsx("span", { className: cx.subtotalValue, "data-sf-cart-subtotal-value": "", children: cart ? money(cart.cost.subtotal) : null })
+            ] }),
+            labels.note ? /* @__PURE__ */ jsx("p", { className: cx.note, "data-sf-cart-note": "", children: labels.note }) : null,
+            /* @__PURE__ */ jsxs("div", { className: cx.actions, "data-sf-cart-actions": "", children: [
+              link({ href: paths.checkout, className: cx.checkout, children: labels.checkout, onClick: close }),
+              link({ href: paths.cart, className: cx.viewCart, children: labels.viewCart, onClick: close })
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function DrawerLine({
+  line,
+  props,
+  money,
+  link,
+  close
+}) {
+  const { labels, paths, icons, classNames: cx = {} } = props;
+  const f = { ...DEFAULT_FORM, ...props.form };
+  const { Form, formData } = (props.useLineForm ?? useNativeForm)();
+  const quantity = formData ? Number(formData.get(f.quantityField) ?? 0) : line.quantity;
+  if (formData && (formData.get(f.intentField) === f.removeIntent || quantity === 0)) return null;
+  const merch = line.merchandise;
+  const isDefault = props.isDefaultVariantTitle ?? defaultIsDefaultVariant;
+  const title = merch.product.title;
+  const href = paths.product?.(merch.product.handle, merch.id);
+  const img = merch.image ?? merch.product.featured_image;
+  const image = props.renderImage ? props.renderImage(line) : img ? /* @__PURE__ */ jsx("img", { src: img.url, alt: img.alt ?? "", width: 80, height: 80, loading: "lazy", decoding: "async" }) : null;
+  const imageNode = /* @__PURE__ */ jsx("span", { className: cx.image, "data-sf-cart-image": "", children: image });
+  const price = /* @__PURE__ */ jsx("span", { className: cx.price, "data-sf-cart-price": "", children: money(line.cost.total) });
+  const controls = /* @__PURE__ */ jsxs("div", { className: cx.controls, "data-sf-cart-controls": "", children: [
+    /* @__PURE__ */ jsxs(Form, { method: "post", action: paths.cart, className: cx.qty, "data-sf-cart-qty": "", children: [
+      /* @__PURE__ */ jsx("input", { type: "hidden", name: f.intentField, value: f.updateIntent }),
+      /* @__PURE__ */ jsx("input", { type: "hidden", name: f.lineField, value: line.id }),
+      /* @__PURE__ */ jsx("button", { type: "submit", name: f.quantityField, value: quantity - 1, "aria-label": labels.decrease, className: cx.qtyButton, "data-sf-cart-qty-button": "", children: icons?.decrease ?? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2212" }) }),
+      /* @__PURE__ */ jsx("span", { className: cx.qtyValue, "aria-live": "polite", "data-sf-cart-qty-value": "", children: quantity }),
+      /* @__PURE__ */ jsx("button", { type: "submit", name: f.quantityField, value: quantity + 1, "aria-label": labels.increase, className: cx.qtyButton, "data-sf-cart-qty-button": "", children: icons?.increase ?? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "+" }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Form, { method: "post", action: paths.cart, "data-sf-cart-remove-form": "", children: [
+      /* @__PURE__ */ jsx("input", { type: "hidden", name: f.intentField, value: f.removeIntent }),
+      /* @__PURE__ */ jsx("input", { type: "hidden", name: f.lineField, value: line.id }),
+      /* @__PURE__ */ jsx("button", { type: "submit", className: cx.remove, "data-sf-cart-remove": "", children: labels.remove })
+    ] })
+  ] });
+  if (props.renderLine) return /* @__PURE__ */ jsx("li", { className: cx.line, "data-sf-cart-line": "", children: props.renderLine(line, { controls, price, image: imageNode }) }, line.id);
+  return /* @__PURE__ */ jsxs("li", { className: cx.line, "data-sf-cart-line": "", children: [
+    imageNode,
+    /* @__PURE__ */ jsxs("div", { className: cx.lineMain, "data-sf-cart-line-main": "", children: [
+      /* @__PURE__ */ jsxs("div", { className: cx.lineHead, "data-sf-cart-line-head": "", children: [
+        /* @__PURE__ */ jsxs("div", { className: cx.lineText, "data-sf-cart-line-text": "", children: [
+          href ? link({ href, className: cx.lineTitle, children: title, onClick: close }) : /* @__PURE__ */ jsx("span", { className: cx.lineTitle, "data-sf-cart-line-title": "", children: title }),
+          !isDefault(merch.title) ? /* @__PURE__ */ jsx("p", { className: cx.variant, "data-sf-cart-variant": "", children: merch.title }) : null
+        ] }),
+        price
+      ] }),
+      controls
+    ] })
+  ] });
+}
+
+export { CartDrawer, closeCartDrawer, handleCartLinkClick, isCartDrawerOpen, openCartDrawer, toggleCartDrawer, useCartDrawer, useOpenCartDrawerWhenDone };
+//# sourceMappingURL=cart.js.map
+//# sourceMappingURL=cart.js.map

package/dist/cart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/cart-drawer/store.ts","../src/cart-drawer/cart-drawer.tsx"],"names":["useEffect"],"mappings":"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","file":"cart.js","sourcesContent":["import { useCallback, useEffect, useRef, useSyncExternalStore } from 'react'\n\n// Estado mínimo del cajón del carrito, fuera de React: cualquier parte de la tienda (cabecera, tarjeta, ficha)\n// lo abre sin pasar props. Es del navegador; en el servidor siempre está cerrado.\n\nlet isOpen = false\nconst listeners = new Set<() => void>()\n\nfunction set(next: boolean) {\n  if (isOpen === next) return\n  isOpen = next\n  for (const l of [...listeners]) l()\n}\n\nconst subscribe = (l: () => void) => {\n  listeners.add(l)\n  return () => {\n    listeners.delete(l)\n  }\n}\n\n/** Abre el cajón del carrito desde cualquier parte. */\nexport function openCartDrawer() {\n  set(true)\n}\n\n/** Cierra el cajón del carrito. */\nexport function closeCartDrawer() {\n  set(false)\n}\n\nexport function toggleCartDrawer() {\n  set(!isOpen)\n}\n\nexport function isCartDrawerOpen() {\n  return isOpen\n}\n\n/** Estado y acciones del cajón. `open` es `false` en el servidor y en la primera pintura. */\nexport function useCartDrawer() {\n  const open = useSyncExternalStore(subscribe, () => isOpen, () => false)\n  const toggle = useCallback(() => toggleCartDrawer(), [])\n  return { open, openDrawer: openCartDrawer, closeDrawer: closeCartDrawer, toggle }\n}\n\n/**\n * Abre el cajón cuando termina un \"agregar al carrito\". `busy` es verdadero mientras hay un agregado en vuelo\n * (en React Router: algún fetcher con la acción del carrito e intención de agregar). Con `skip` verdadero al\n * terminar (error, agregado silencioso) no se abre.\n */\nexport function useOpenCartDrawerWhenDone(busy: boolean, options: { skip?: boolean } = {}) {\n  const was = useRef(false)\n  const skip = useRef(false)\n  skip.current = !!options.skip\n  useEffect(() => {\n    if (was.current && !busy && !skip.current) openCartDrawer()\n    was.current = busy\n  }, [busy])\n}\n\ntype ClickLike = {\n  defaultPrevented: boolean\n  button: number\n  metaKey: boolean\n  ctrlKey: boolean\n  shiftKey: boolean\n  altKey: boolean\n  preventDefault: () => void\n}\n\n/**\n * `onClick` para el enlace \"Mi carrito\" de la cabecera: con un clic normal abre el cajón; con clic con\n * modificador, clic central o sin JavaScript el `href` (la página del carrito) sigue funcionando.\n */\nexport function handleCartLinkClick(e: ClickLike) {\n  if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return\n  e.preventDefault()\n  openCartDrawer()\n}\n","import { useEffect, useId, type ElementType, type ReactNode } from 'react'\nimport { formatMoney, type Cart, type CartLine, type Money } from '@asteby/storefront'\nimport { useModalDialog } from '../dialog.js'\nimport { useResolvedLocale } from '../locale.js'\nimport { closeCartDrawer, useCartDrawer } from './store.js'\n\nexport type CartDrawerLabels = {\n  /** Título; el cajón agrega \" (N)\" con la cantidad de unidades. */\n  title: string\n  /** Texto accesible del botón de cierre. */\n  close: string\n  empty: string\n  emptyHint?: string\n  /** Texto del enlace \"seguir comprando\" del estado vacío (se muestra con `paths.browse`). */\n  browse?: string\n  subtotal: string\n  /** Nota bajo el subtotal. */\n  note?: string\n  checkout: string\n  viewCart: string\n  remove: string\n  increase: string\n  decrease: string\n}\n\nexport type CartDrawerPaths = {\n  /** Página del carrito: acción de las mutaciones y destino de \"ver carrito\". */\n  cart: string\n  checkout: string\n  browse?: string\n  /** Enlace de la línea al producto; sin esto el título no es enlace. */\n  product?: (handle: string, variantId: string) => string\n}\n\n/** Contrato de la acción de ruta del carrito de la tienda (nombres de campo e intenciones). */\nexport type CartDrawerFormContract = {\n  intentField?: string\n  lineField?: string\n  quantityField?: string\n  updateIntent?: string\n  removeIntent?: string\n}\n\nexport type CartDrawerShipping = {\n  /** Mensaje ya calculado por la tienda con lo que manda OPS. */\n  message: ReactNode\n  /** 0..100 */\n  percent: number\n  reached?: boolean\n  progressLabel: string\n}\n\nexport type CartDrawerLineForm = {\n  /** Componente de formulario (`'form'`, o `fetcher.Form` del router para mejorar sin recargar). */\n  Form: ElementType\n  /** Datos en vuelo del formulario, para pintar la cantidad de forma optimista. */\n  formData?: FormData | null | undefined\n}\n\nexport type CartDrawerLinkProps = { href: string; className?: string | undefined; children: ReactNode; onClick?: () => void }\n\nexport type CartDrawerSlot =\n  | 'dialog' | 'panel' | 'header' | 'title' | 'close' | 'empty' | 'body' | 'shipping' | 'bar' | 'barFill' | 'lines' | 'line'\n  | 'image' | 'lineTitle' | 'variant' | 'price' | 'qty' | 'qtyButton' | 'qtyValue' | 'remove' | 'upsell' | 'footer' | 'subtotal'\n  | 'note' | 'actions' | 'checkout' | 'viewCart' | 'browse' | 'emptyTitle' | 'emptyHint' | 'shippingMessage' | 'lineMain'\n  | 'lineHead' | 'lineText' | 'controls' | 'upsellTitle' | 'subtotalLabel' | 'subtotalValue'\n\nexport type CartDrawerIcons = { close?: ReactNode; decrease?: ReactNode; increase?: ReactNode; shipping?: ReactNode; shippingReached?: ReactNode }\n\nexport type CartDrawerProps = {\n  /** `cart.cost` y cada línea vienen de OPS; el cajón no calcula nada. */\n  cart: Cart | null | undefined\n  labels: CartDrawerLabels\n  paths: CartDrawerPaths\n  form?: CartDrawerFormContract\n  /** Hook que da el formulario de cada línea. Por omisión `<form method=\"post\">` (funciona sin JavaScript). */\n  useLineForm?: () => CartDrawerLineForm\n  shipping?: CartDrawerShipping | null\n  /** Aviso fijo cuando no hay barra de envío (p. ej. \"Envío gratis\"). */\n  notice?: ReactNode\n  /** Sección \"podría interesarte\" (la tienda decide qué mostrar). */\n  upsell?: ReactNode\n  upsellTitle?: string\n  renderLine?: (line: CartLine, defaults: { controls: ReactNode; price: ReactNode; image: ReactNode }) => ReactNode\n  renderImage?: (line: CartLine) => ReactNode\n  renderMoney?: (money: Money) => ReactNode\n  renderLink?: (props: CartDrawerLinkProps) => ReactNode\n  /** Omite el variante cuando es el valor por defecto de OPS (\"Default Title\"). */\n  isDefaultVariantTitle?: (title: string) => boolean\n  icons?: CartDrawerIcons\n  /** Clases por pieza (además de los `data-sf-cart-*`), para tiendas con Tailwind. */\n  classNames?: Partial<Record<CartDrawerSlot, string>>\n  locale?: string\n  /** Se llama al abrir/cerrar por cualquier vía. */\n  onOpenChange?: (open: boolean) => void\n}\n\nconst DEFAULT_FORM: Required<CartDrawerFormContract> = {\n  intentField: 'intent',\n  lineField: 'line_id',\n  quantityField: 'quantity',\n  updateIntent: 'update',\n  removeIntent: 'remove',\n}\n\nconst useNativeForm = (): CartDrawerLineForm => ({ Form: 'form' })\n\nconst defaultIsDefaultVariant = (t: string) => /^default title$/i.test(t.trim())\n\nfunction useBodyScrollLock(locked: boolean) {\n  useEffect(() => {\n    if (!locked || typeof document === 'undefined') return\n    const el = document.documentElement\n    const prev = el.style.overflow\n    el.style.overflow = 'hidden'\n    return () => {\n      el.style.overflow = prev\n    }\n  }, [locked])\n}\n\n/**\n * Cajón lateral del carrito (\"Tu carrito (N)\"). Sin textos ni marca: todo llega por props.\n * Se monta una vez (en la raíz) y se abre con `openCartDrawer()` / `useCartDrawer()`.\n * `<dialog>` modal: `role=\"dialog\"`, `aria-modal`, foco atrapado y devuelto al abridor, Esc y clic fuera cierran,\n * el fondo no hace scroll. Las mutaciones usan la acción de ruta de la tienda (formularios nativos que\n * funcionan sin JavaScript, o el `Form` de un fetcher con `useLineForm`). Estilos: `@asteby/storefront-react/cart.css`\n * (tokens de la tienda) y/o `classNames`.\n */\nexport function CartDrawer(props: CartDrawerProps) {\n  const { cart, labels, paths, shipping, notice, upsell, upsellTitle, icons, classNames: cx = {}, onOpenChange } = props\n  const locale = useResolvedLocale(props.locale)\n  const { open } = useCartDrawer()\n  const titleId = useId()\n  const upsellId = useId()\n  const { ref, onBackdropClick } = useModalDialog({ open, onClose: () => closeCartDrawer() })\n  useBodyScrollLock(open)\n  useEffect(() => {\n    onOpenChange?.(open)\n  }, [open]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  if (!open) return null\n\n  const money = props.renderMoney ?? ((m: Money) => formatMoney(m, locale))\n  const link = props.renderLink ?? (({ href, className, children, onClick }: CartDrawerLinkProps) => (\n    <a href={href} className={className} onClick={onClick}>{children}</a>\n  ))\n  const count = cart?.total_quantity ?? 0\n  const lines = cart?.lines ?? []\n  const empty = !cart || lines.length === 0\n  const close = () => closeCartDrawer()\n\n  return (\n    <dialog\n      ref={ref}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={titleId}\n      onClick={onBackdropClick}\n      onClose={close}\n      className={cx.dialog}\n      data-sf-cart-drawer=\"\"\n    >\n      <div className={cx.panel} data-sf-cart-panel=\"\">\n        <div className={cx.header} data-sf-cart-header=\"\">\n          <h2 id={titleId} tabIndex={-1} className={cx.title} data-sf-cart-title=\"\">\n            {labels.title}{count > 0 ? ` (${count})` : ''}\n          </h2>\n          <button type=\"button\" onClick={close} aria-label={labels.close} className={cx.close} data-sf-cart-close=\"\" data-sf-autofocus=\"\">\n            {icons?.close ?? <span aria-hidden=\"true\">✕</span>}\n          </button>\n        </div>\n\n        {empty ? (\n          <div className={cx.empty} data-sf-cart-empty=\"\">\n            <p className={cx.emptyTitle} data-sf-cart-empty-title=\"\">{labels.empty}</p>\n            {labels.emptyHint ? <p className={cx.emptyHint} data-sf-cart-empty-hint=\"\">{labels.emptyHint}</p> : null}\n            {paths.browse && labels.browse ? link({ href: paths.browse, className: cx.browse, children: labels.browse, onClick: close }) : null}\n          </div>\n        ) : (\n          <>\n            <div className={cx.body} data-sf-cart-body=\"\">\n              {shipping ? (\n                <div className={cx.shipping} data-sf-cart-shipping=\"\" data-reached={shipping.reached || undefined}>\n                  <p className={cx.shippingMessage}>\n                    {shipping.reached ? icons?.shippingReached : icons?.shipping}\n                    {shipping.message}\n                  </p>\n                  <div\n                    role=\"progressbar\"\n                    aria-valuemin={0}\n                    aria-valuemax={100}\n                    aria-valuenow={Math.round(shipping.percent)}\n                    aria-label={shipping.progressLabel}\n                    className={cx.bar}\n                    data-sf-cart-bar=\"\"\n                  >\n                    <div className={cx.barFill} data-sf-cart-bar-fill=\"\" style={{ width: `${Math.max(0, Math.min(100, shipping.percent))}%` }} />\n                  </div>\n                </div>\n              ) : notice ? (\n                <p className={[cx.shipping, cx.shippingMessage].filter(Boolean).join(\" \") || undefined} data-sf-cart-shipping=\"\" data-notice=\"\">{icons?.shippingReached}{notice}</p>\n              ) : null}\n\n              <ul className={cx.lines} data-sf-cart-lines=\"\">\n                {lines.map((line) => (\n                  <DrawerLine key={line.id} line={line} props={props} money={money} link={link} close={close} />\n                ))}\n              </ul>\n\n              {upsell ? (\n                <section className={cx.upsell} data-sf-cart-upsell=\"\" aria-labelledby={upsellTitle ? upsellId : undefined}>\n                  {upsellTitle ? <h3 id={upsellId} className={cx.upsellTitle}>{upsellTitle}</h3> : null}\n                  {upsell}\n                </section>\n              ) : null}\n            </div>\n\n            <div className={cx.footer} data-sf-cart-footer=\"\">\n              <div className={cx.subtotal} data-sf-cart-subtotal=\"\">\n                <span className={cx.subtotalLabel}>{labels.subtotal}</span>\n                <span className={cx.subtotalValue} data-sf-cart-subtotal-value=\"\">{cart ? money(cart.cost.subtotal) : null}</span>\n              </div>\n              {labels.note ? <p className={cx.note} data-sf-cart-note=\"\">{labels.note}</p> : null}\n              <div className={cx.actions} data-sf-cart-actions=\"\">\n                {link({ href: paths.checkout, className: cx.checkout, children: labels.checkout, onClick: close })}\n                {link({ href: paths.cart, className: cx.viewCart, children: labels.viewCart, onClick: close })}\n              </div>\n            </div>\n          </>\n        )}\n      </div>\n    </dialog>\n  )\n}\n\nfunction DrawerLine({\n  line,\n  props,\n  money,\n  link,\n  close,\n}: {\n  line: CartLine\n  props: CartDrawerProps\n  money: (m: Money) => ReactNode\n  link: (p: CartDrawerLinkProps) => ReactNode\n  close: () => void\n}) {\n  const { labels, paths, icons, classNames: cx = {} } = props\n  const f = { ...DEFAULT_FORM, ...props.form }\n  const { Form, formData } = (props.useLineForm ?? useNativeForm)()\n  const quantity = formData ? Number(formData.get(f.quantityField) ?? 0) : line.quantity\n  if (formData && (formData.get(f.intentField) === f.removeIntent || quantity === 0)) return null\n\n  const merch = line.merchandise\n  const isDefault = props.isDefaultVariantTitle ?? defaultIsDefaultVariant\n  const title = merch.product.title\n  const href = paths.product?.(merch.product.handle, merch.id)\n  const img = merch.image ?? merch.product.featured_image\n  const image = props.renderImage ? props.renderImage(line) : img ? (\n    <img src={img.url} alt={img.alt ?? ''} width={80} height={80} loading=\"lazy\" decoding=\"async\" />\n  ) : null\n\n  const imageNode = <span className={cx.image} data-sf-cart-image=\"\">{image}</span>\n  const price = <span className={cx.price} data-sf-cart-price=\"\">{money(line.cost.total)}</span>\n  const controls = (\n    <div className={cx.controls} data-sf-cart-controls=\"\">\n      <Form method=\"post\" action={paths.cart} className={cx.qty} data-sf-cart-qty=\"\">\n        <input type=\"hidden\" name={f.intentField} value={f.updateIntent} />\n        <input type=\"hidden\" name={f.lineField} value={line.id} />\n        <button type=\"submit\" name={f.quantityField} value={quantity - 1} aria-label={labels.decrease} className={cx.qtyButton} data-sf-cart-qty-button=\"\">\n          {icons?.decrease ?? <span aria-hidden=\"true\">−</span>}\n        </button>\n        <span className={cx.qtyValue} aria-live=\"polite\" data-sf-cart-qty-value=\"\">{quantity}</span>\n        <button type=\"submit\" name={f.quantityField} value={quantity + 1} aria-label={labels.increase} className={cx.qtyButton} data-sf-cart-qty-button=\"\">\n          {icons?.increase ?? <span aria-hidden=\"true\">+</span>}\n        </button>\n      </Form>\n      <Form method=\"post\" action={paths.cart} data-sf-cart-remove-form=\"\">\n        <input type=\"hidden\" name={f.intentField} value={f.removeIntent} />\n        <input type=\"hidden\" name={f.lineField} value={line.id} />\n        <button type=\"submit\" className={cx.remove} data-sf-cart-remove=\"\">{labels.remove}</button>\n      </Form>\n    </div>\n  )\n\n  if (props.renderLine) return <li key={line.id} className={cx.line} data-sf-cart-line=\"\">{props.renderLine(line, { controls, price, image: imageNode })}</li>\n\n  return (\n    <li className={cx.line} data-sf-cart-line=\"\">\n      {imageNode}\n      <div className={cx.lineMain} data-sf-cart-line-main=\"\">\n        <div className={cx.lineHead} data-sf-cart-line-head=\"\">\n          <div className={cx.lineText} data-sf-cart-line-text=\"\">\n            {href ? link({ href, className: cx.lineTitle, children: title, onClick: close }) : <span className={cx.lineTitle} data-sf-cart-line-title=\"\">{title}</span>}\n            {!isDefault(merch.title) ? <p className={cx.variant} data-sf-cart-variant=\"\">{merch.title}</p> : null}\n          </div>\n          {price}\n        </div>\n        {controls}\n      </div>\n    </li>\n  )\n}\n"]}