@thorprovider/blocks 2.0.0 → 3.0.0

package/dist/blocks/e-commerce/navigation/storefront-navbar-cart-sheet.mjs

@@ -0,0 +1,263 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { Minus, Plus, ShoppingBag } from "lucide-react";
+import { Button } from "../../../ui/button.mjs";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle
+} from "../../../ui/empty.mjs";
+import { Separator } from "../../../ui/separator.mjs";
+import { SheetClose } from "../../../ui/sheet.mjs";
+import { formatMoney } from "../../../lib/money.mjs";
+const usdFormatter = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
+const smokyExit = {
+  opacity: 0,
+  y: 10,
+  scale: 0.96,
+  filter: "blur(8px)",
+  transition: { duration: 0.35, ease: [0.4, 0, 0.2, 1] }
+};
+const revealEase = [0.22, 1, 0.36, 1];
+const revealHidden = { opacity: 0, y: 12, filter: "blur(3px)" };
+const revealShown = { opacity: 1, y: 0, filter: "blur(0px)" };
+const revealExit = { opacity: 0, y: 0, filter: "blur(0px)", transition: { duration: 0.2, ease: "easeOut" } };
+function StorefrontNavbarCartSheet({
+  items,
+  onQtyChange,
+  onRemove,
+  subtotal: subtotalProp,
+  subtotalUnavailableLabel = "\u2014",
+  formatMoney: formatMoneyProp,
+  formatPrice,
+  onCheckout,
+  onViewCart,
+  canonical = false,
+  lineUnavailableLabel = "\u2014",
+  state = "idle",
+  errorLabel = "No se pudo actualizar el carrito.",
+  retryLabel = "Reintentar",
+  onRetry,
+  pendingLabel = "Actualizando el carrito\u2026",
+  checkoutUnavailable = false,
+  checkoutDisabled = false,
+  viewCartUnavailable = false
+}) {
+  const reduceMotion = useReducedMotion();
+  const format = formatPrice ?? ((value) => usdFormatter.format(value));
+  const localSubtotal = items.reduce((total, item) => total + item.price * item.qty, 0);
+  const authoritativeSubtotal = subtotalProp !== void 0 ? formatMoney(subtotalProp, formatMoneyProp) : null;
+  const isEmpty = items.length === 0;
+  const isPending = state === "pending";
+  const isError = state === "error";
+  const [showEmpty, setShowEmpty] = useState(isEmpty);
+  useEffect(() => {
+    if (!isEmpty) {
+      setShowEmpty(false);
+    }
+  }, [isEmpty]);
+  const lineAmount = (item) => {
+    if (canonical) {
+      if (item.lineTotal === void 0) {
+        return lineUnavailableLabel;
+      }
+      return formatMoney(item.lineTotal, formatMoneyProp) ?? lineUnavailableLabel;
+    }
+    return format(item.price * item.qty);
+  };
+  const showConfirmedEmpty = showEmpty && !isPending && !isError;
+  const mutationsDisabled = isPending;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col overflow-hidden", children: [
+      isPending ? /* @__PURE__ */ jsx(
+        "p",
+        {
+          role: "status",
+          "aria-live": "polite",
+          className: "border-border text-muted-foreground border-b px-4 py-2 text-sm",
+          children: pendingLabel
+        }
+      ) : null,
+      isError ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "alert",
+          className: "border-border flex items-center justify-between gap-2 border-b px-4 py-2 text-sm",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-destructive", children: errorLabel }),
+            onRetry ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onRetry, children: retryLabel }) : null
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ jsx("ul", { className: "flex-1 overflow-y-auto px-4", children: /* @__PURE__ */ jsx(
+        AnimatePresence,
+        {
+          initial: false,
+          mode: "popLayout",
+          onExitComplete: () => {
+            if (items.length === 0) {
+              setShowEmpty(true);
+            }
+          },
+          children: items.map((item) => /* @__PURE__ */ jsxs(
+            motion.li,
+            {
+              layout: !reduceMotion,
+              initial: reduceMotion ? false : { opacity: 0, y: 8, filter: "blur(4px)" },
+              animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+              exit: reduceMotion ? { opacity: 0 } : smokyExit,
+              transition: { duration: 0.28, ease: [0.22, 1, 0.36, 1] },
+              className: "border-border flex gap-4 border-b py-4 last:border-b-0",
+              style: { willChange: "transform, opacity, filter" },
+              children: [
+                item.image ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: item.image || void 0,
+                    alt: "",
+                    width: 80,
+                    height: 96,
+                    className: "bg-muted size-20 shrink-0 rounded-md object-cover"
+                  }
+                ) : /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "bg-muted size-20 shrink-0 rounded-md" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                      /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: item.name }),
+                      item.variant ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: item.variant }) : null
+                    ] }),
+                    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: lineAmount(item) })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "mt-auto flex items-center justify-between pt-2", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "border-border flex items-center rounded-md border", children: [
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          variant: "ghost",
+                          size: "icon",
+                          className: "size-8 rounded-r-none",
+                          "aria-label": `Decrease quantity, ${item.name}`,
+                          disabled: mutationsDisabled,
+                          onClick: () => onQtyChange(item.id, -1),
+                          children: /* @__PURE__ */ jsx(Minus, {})
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "w-8 text-center text-sm tabular-nums", children: item.qty }),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          variant: "ghost",
+                          size: "icon",
+                          className: "size-8 rounded-l-none",
+                          "aria-label": `Increase quantity, ${item.name}`,
+                          disabled: mutationsDisabled,
+                          onClick: () => onQtyChange(item.id, 1),
+                          children: /* @__PURE__ */ jsx(Plus, {})
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "sm",
+                        className: "text-muted-foreground hover:text-foreground",
+                        "aria-label": `Remove ${item.name} from cart`,
+                        disabled: mutationsDisabled,
+                        onClick: () => onRemove(item.id),
+                        children: "Remove"
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            },
+            item.id
+          ))
+        }
+      ) }),
+      /* @__PURE__ */ jsx(AnimatePresence, { children: showConfirmedEmpty ? /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: false,
+          exit: reduceMotion ? { opacity: 0 } : revealExit,
+          className: "absolute inset-0",
+          children: /* @__PURE__ */ jsxs(Empty, { className: "h-full border-0", children: [
+            /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+              /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  initial: reduceMotion ? false : revealHidden,
+                  animate: revealShown,
+                  transition: reduceMotion ? { duration: 0 } : { duration: 0.5, ease: revealEase, delay: 0 },
+                  style: { willChange: "transform, opacity, filter" },
+                  children: /* @__PURE__ */ jsx(EmptyMedia, { variant: "icon", children: /* @__PURE__ */ jsx(ShoppingBag, { "aria-hidden": "true" }) })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  initial: reduceMotion ? false : revealHidden,
+                  animate: revealShown,
+                  transition: reduceMotion ? { duration: 0 } : { duration: 0.5, ease: revealEase, delay: 0.04 },
+                  style: { willChange: "transform, opacity, filter" },
+                  children: /* @__PURE__ */ jsx(EmptyTitle, { children: "Your cart is empty" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  initial: reduceMotion ? false : revealHidden,
+                  animate: revealShown,
+                  transition: reduceMotion ? { duration: 0 } : { duration: 0.5, ease: revealEase, delay: 0.08 },
+                  style: { willChange: "transform, opacity, filter" },
+                  children: /* @__PURE__ */ jsx(EmptyDescription, { children: "Once you add something it will show up here." })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: reduceMotion ? false : revealHidden,
+                animate: revealShown,
+                transition: reduceMotion ? { duration: 0 } : { duration: 0.5, ease: revealEase, delay: 0.12 },
+                style: { willChange: "transform, opacity, filter" },
+                children: /* @__PURE__ */ jsx(EmptyContent, { children: /* @__PURE__ */ jsx(SheetClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: "Continue shopping" }) }) })
+              }
+            )
+          ] })
+        },
+        "empty"
+      ) : null })
+    ] }),
+    !isEmpty ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4", children: [
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Subtotal" }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium tabular-nums", children: canonical || subtotalProp !== void 0 ? authoritativeSubtotal ?? subtotalUnavailableLabel : format(localSubtotal) })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: "Shipping and taxes are calculated at checkout." }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        checkoutUnavailable ? null : /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "w-full",
+            disabled: checkoutDisabled || isPending,
+            onClick: onCheckout,
+            children: "Checkout"
+          }
+        ),
+        viewCartUnavailable ? null : /* @__PURE__ */ jsx(Button, { variant: "ghost", className: "w-full", onClick: onViewCart, children: "View cart" })
+      ] })
+    ] }) : null
+  ] });
+}
+export {
+  StorefrontNavbarCartSheet
+};
+//# sourceMappingURL=storefront-navbar-cart-sheet.mjs.map

package/dist/blocks/e-commerce/navigation/storefront-navbar-cart-sheet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/navigation/storefront-navbar-cart-sheet.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react'\nimport { Minus, Plus, ShoppingBag } from 'lucide-react'\n\nimport { Button } from '../../../ui/button'\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from '../../../ui/empty'\nimport { Separator } from '../../../ui/separator'\nimport { SheetClose } from '../../../ui/sheet'\nimport type { Money } from '@thorprovider/types'\nimport { formatMoney } from '../../../lib/money'\n\nexport interface CartItem {\n  /** Backend cart line-item id — the stable identity for update/removal. */\n  id: string\n  name: string\n  variant?: string\n  price: number\n  qty: number\n  /** Optional; an absent image is omitted rather than serialized as `\"\"`. */\n  image?: string\n  /**\n   * Canonical backend line amount. Required for truthful rendering in\n   * `canonical` mode; when absent/invalid the line shows the unavailable\n   * label rather than a numeric fallback.\n   */\n  lineTotal?: Money\n}\n\nexport type CartSheetState = 'idle' | 'pending' | 'error'\n\nexport interface StorefrontNavbarCartSheetProps {\n  items: CartItem[]\n  /**\n   * Quantity DELTA for a backend cart line-item id. The boundary converts the\n   * delta into an absolute quantity against the authoritative current line\n   * quantity before mutating the cart.\n   */\n  onQtyChange: (id: string, delta: number) => void\n  /** Remove the backend cart line-item id. */\n  onRemove: (id: string) => void\n  /** Authoritative backend subtotal. Preferred over any local line math. */\n  subtotal?: Money\n  /** Shown when an authoritative subtotal is supplied but absent/malformed. */\n  subtotalUnavailableLabel?: string\n  /** Override money formatting (locale, currency). Defaults to `Money.currencyCode`. */\n  formatMoney?: (money: Money) => string\n  /** @deprecated legacy numeric formatter; ignored when `subtotal` is supplied. */\n  formatPrice?: (value: number) => string\n  onCheckout?: () => void\n  onViewCart?: () => void\n  /**\n   * Backend-authoritative rendering. When `true`, each line amount comes from\n   * the item's canonical `lineTotal` Money and the sheet never recomputes\n   * `price * qty`. When omitted/false, legacy numeric rendering is preserved\n   * for standalone consumers.\n   */\n  canonical?: boolean\n  /** Shown in `canonical` mode when a line amount is missing or malformed. */\n  lineUnavailableLabel?: string\n  /** Cart read/mutation lifecycle. Pending retains confirmed lines; error is recoverable. */\n  state?: CartSheetState\n  /** Message shown when `state` is `error`. */\n  errorLabel?: string\n  /** Label for the recovery action in the error state. */\n  retryLabel?: string\n  /** Recovery action invoked from the error state. */\n  onRetry?: () => void\n  /** Label shown while `state` is `pending`. */\n  pendingLabel?: string\n  /** When `true`, the checkout action is suppressed (checkout not installed). */\n  checkoutUnavailable?: boolean\n  /** When `true`, the checkout action is disabled (cart not ready / invalid amounts). */\n  checkoutDisabled?: boolean\n  /** When `true`, the review action is suppressed (cart view not installed). */\n  viewCartUnavailable?: boolean\n}\n\nconst usdFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })\n\n/** Approximate Transitions.dev `delete-with-smoky-dissolve` for list rows (Pro effect). */\nconst smokyExit = {\n  opacity: 0,\n  y: 10,\n  scale: 0.96,\n  filter: 'blur(8px)',\n  transition: { duration: 0.35, ease: [0.4, 0, 0.2, 1] as const },\n}\n\n/**\n * Transitions.dev `texts-reveal`: lines rise from below with blur, staggered.\n * Exit is a quiet in-place fade — no Y return, no reverse stagger.\n */\nconst revealEase = [0.22, 1, 0.36, 1] as const\nconst revealHidden = { opacity: 0, y: 12, filter: 'blur(3px)' }\nconst revealShown = { opacity: 1, y: 0, filter: 'blur(0px)' }\nconst revealExit = { opacity: 0, y: 0, filter: 'blur(0px)', transition: { duration: 0.2, ease: 'easeOut' as const } }\n\nexport function StorefrontNavbarCartSheet({\n  items,\n  onQtyChange,\n  onRemove,\n  subtotal: subtotalProp,\n  subtotalUnavailableLabel = '—',\n  formatMoney: formatMoneyProp,\n  formatPrice,\n  onCheckout,\n  onViewCart,\n  canonical = false,\n  lineUnavailableLabel = '—',\n  state = 'idle',\n  errorLabel = 'No se pudo actualizar el carrito.',\n  retryLabel = 'Reintentar',\n  onRetry,\n  pendingLabel = 'Actualizando el carrito…',\n  checkoutUnavailable = false,\n  checkoutDisabled = false,\n  viewCartUnavailable = false,\n}: StorefrontNavbarCartSheetProps) {\n  const reduceMotion = useReducedMotion()\n  const format = formatPrice ?? (value => usdFormatter.format(value))\n  const localSubtotal = items.reduce((total, item) => total + item.price * item.qty, 0)\n  const authoritativeSubtotal = subtotalProp !== undefined ? formatMoney(subtotalProp, formatMoneyProp) : null\n  const isEmpty = items.length === 0\n  const isPending = state === 'pending'\n  const isError = state === 'error'\n  /** Wait for the last cart row's exit before revealing empty copy. */\n  const [showEmpty, setShowEmpty] = useState(isEmpty)\n\n  useEffect(() => {\n    if (!isEmpty) {\n      setShowEmpty(false)\n    }\n  }, [isEmpty])\n\n  const lineAmount = (item: CartItem): string => {\n    if (canonical) {\n      if (item.lineTotal === undefined) {\n        return lineUnavailableLabel\n      }\n      return formatMoney(item.lineTotal, formatMoneyProp) ?? lineUnavailableLabel\n    }\n    return format(item.price * item.qty)\n  }\n\n  // A confirmed empty cart is only claimed when no read/mutation is in flight\n  // and no read error is outstanding; otherwise the sheet shows loading/error.\n  const showConfirmedEmpty = showEmpty && !isPending && !isError\n  const mutationsDisabled = isPending\n\n  return (\n    <>\n      <div className='relative flex min-h-0 flex-1 flex-col overflow-hidden'>\n        {isPending ? (\n          <p\n            role='status'\n            aria-live='polite'\n            className='border-border text-muted-foreground border-b px-4 py-2 text-sm'\n          >\n            {pendingLabel}\n          </p>\n        ) : null}\n        {isError ? (\n          <div\n            role='alert'\n            className='border-border flex items-center justify-between gap-2 border-b px-4 py-2 text-sm'\n          >\n            <span className='text-destructive'>{errorLabel}</span>\n            {onRetry ? (\n              <Button variant='ghost' size='sm' onClick={onRetry}>\n                {retryLabel}\n              </Button>\n            ) : null}\n          </div>\n        ) : null}\n        <ul className='flex-1 overflow-y-auto px-4'>\n          <AnimatePresence\n            initial={false}\n            mode='popLayout'\n            onExitComplete={() => {\n              if (items.length === 0) {\n                setShowEmpty(true)\n              }\n            }}\n          >\n            {items.map(item => (\n              <motion.li\n                key={item.id}\n                layout={!reduceMotion}\n                initial={reduceMotion ? false : { opacity: 0, y: 8, filter: 'blur(4px)' }}\n                animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}\n                exit={reduceMotion ? { opacity: 0 } : smokyExit}\n                transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }}\n                className='border-border flex gap-4 border-b py-4 last:border-b-0'\n                style={{ willChange: 'transform, opacity, filter' }}\n              >\n                {item.image ? (\n                  <img\n                    src={item.image || undefined}\n                    alt=''\n                    width={80}\n                    height={96}\n                    className='bg-muted size-20 shrink-0 rounded-md object-cover'\n                  />\n                ) : (\n                  <div aria-hidden='true' className='bg-muted size-20 shrink-0 rounded-md' />\n                )}\n                <div className='flex min-w-0 flex-1 flex-col'>\n                  <div className='flex items-start justify-between gap-2'>\n                    <div className='min-w-0'>\n                      <p className='truncate text-sm font-medium'>{item.name}</p>\n                      {item.variant ? (\n                        <p className='text-muted-foreground text-sm'>{item.variant}</p>\n                      ) : null}\n                    </div>\n                    <p className='text-sm font-medium'>{lineAmount(item)}</p>\n                  </div>\n\n                  <div className='mt-auto flex items-center justify-between pt-2'>\n                    <div className='border-border flex items-center rounded-md border'>\n                      <Button\n                        variant='ghost'\n                        size='icon'\n                        className='size-8 rounded-r-none'\n                        aria-label={`Decrease quantity, ${item.name}`}\n                        disabled={mutationsDisabled}\n                        onClick={() => onQtyChange(item.id, -1)}\n                      >\n                        <Minus />\n                      </Button>\n                      <span className='w-8 text-center text-sm tabular-nums'>{item.qty}</span>\n                      <Button\n                        variant='ghost'\n                        size='icon'\n                        className='size-8 rounded-l-none'\n                        aria-label={`Increase quantity, ${item.name}`}\n                        disabled={mutationsDisabled}\n                        onClick={() => onQtyChange(item.id, 1)}\n                      >\n                        <Plus />\n                      </Button>\n                    </div>\n                    <Button\n                      variant='ghost'\n                      size='sm'\n                      className='text-muted-foreground hover:text-foreground'\n                      aria-label={`Remove ${item.name} from cart`}\n                      disabled={mutationsDisabled}\n                      onClick={() => onRemove(item.id)}\n                    >\n                      Remove\n                    </Button>\n                  </div>\n                </div>\n              </motion.li>\n            ))}\n          </AnimatePresence>\n        </ul>\n\n        <AnimatePresence>\n          {showConfirmedEmpty ? (\n            <motion.div\n              key='empty'\n              initial={false}\n              exit={reduceMotion ? { opacity: 0 } : revealExit}\n              className='absolute inset-0'\n            >\n              <Empty className='h-full border-0'>\n                <EmptyHeader>\n                  <motion.div\n                    initial={reduceMotion ? false : revealHidden}\n                    animate={revealShown}\n                    transition={\n                      reduceMotion\n                        ? { duration: 0 }\n                        : { duration: 0.5, ease: revealEase, delay: 0 }\n                    }\n                    style={{ willChange: 'transform, opacity, filter' }}\n                  >\n                    <EmptyMedia variant='icon'>\n                      <ShoppingBag aria-hidden='true' />\n                    </EmptyMedia>\n                  </motion.div>\n                  <motion.div\n                    initial={reduceMotion ? false : revealHidden}\n                    animate={revealShown}\n                    transition={\n                      reduceMotion\n                        ? { duration: 0 }\n                        : { duration: 0.5, ease: revealEase, delay: 0.04 }\n                    }\n                    style={{ willChange: 'transform, opacity, filter' }}\n                  >\n                    <EmptyTitle>Your cart is empty</EmptyTitle>\n                  </motion.div>\n                  <motion.div\n                    initial={reduceMotion ? false : revealHidden}\n                    animate={revealShown}\n                    transition={\n                      reduceMotion\n                        ? { duration: 0 }\n                        : { duration: 0.5, ease: revealEase, delay: 0.08 }\n                    }\n                    style={{ willChange: 'transform, opacity, filter' }}\n                  >\n                    <EmptyDescription>Once you add something it will show up here.</EmptyDescription>\n                  </motion.div>\n                </EmptyHeader>\n                <motion.div\n                  initial={reduceMotion ? false : revealHidden}\n                  animate={revealShown}\n                  transition={\n                    reduceMotion\n                      ? { duration: 0 }\n                      : { duration: 0.5, ease: revealEase, delay: 0.12 }\n                  }\n                  style={{ willChange: 'transform, opacity, filter' }}\n                >\n                  <EmptyContent>\n                    <SheetClose asChild>\n                      <Button>Continue shopping</Button>\n                    </SheetClose>\n                  </EmptyContent>\n                </motion.div>\n              </Empty>\n            </motion.div>\n          ) : null}\n        </AnimatePresence>\n      </div>\n\n      {!isEmpty ? (\n        <div className='flex flex-col gap-4 p-4'>\n          <Separator />\n          <div className='flex items-center justify-between text-sm'>\n            <span className='text-muted-foreground'>Subtotal</span>\n            <span className='font-medium tabular-nums'>\n              {canonical || subtotalProp !== undefined\n                ? authoritativeSubtotal ?? subtotalUnavailableLabel\n                : format(localSubtotal)}\n            </span>\n          </div>\n          <p className='text-muted-foreground text-xs'>Shipping and taxes are calculated at checkout.</p>\n          <div className='flex flex-col gap-2'>\n            {checkoutUnavailable ? null : (\n              <Button\n                className='w-full'\n                disabled={checkoutDisabled || isPending}\n                onClick={onCheckout}\n              >\n                Checkout\n              </Button>\n            )}\n            {viewCartUnavailable ? null : (\n              <Button variant='ghost' className='w-full' onClick={onViewCart}>\n                View cart\n              </Button>\n            )}\n          </div>\n        </div>\n      ) : null}\n    </>\n  )\n}"],"mappings":"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","names":[]}

package/dist/blocks/e-commerce/navigation/storefront-navbar-mobile-nav.d.ts

@@ -0,0 +1,13 @@
+import type { StoreCategory } from '../../../lib/contracts';
+export interface UtilityLink {
+    label: string;
+    href: string;
+}
+export interface StorefrontNavbarMobileNavProps {
+    storeCategories: StoreCategory[];
+    utilityLinks: UtilityLink[];
+    /** When provided, an extra "Account" link is appended after the utility links. */
+    accountHref?: string;
+}
+export declare function StorefrontNavbarMobileNav({ storeCategories, utilityLinks, accountHref, }: StorefrontNavbarMobileNavProps): import("react").JSX.Element;
+//# sourceMappingURL=storefront-navbar-mobile-nav.d.ts.map

package/dist/blocks/e-commerce/navigation/storefront-navbar-mobile-nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storefront-navbar-mobile-nav.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/navigation/storefront-navbar-mobile-nav.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAE3D,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,8BAA8B;IAC7C,eAAe,EAAE,aAAa,EAAE,CAAA;IAChC,YAAY,EAAE,WAAW,EAAE,CAAA;IAC3B,kFAAkF;IAClF,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,yBAAyB,CAAC,EACxC,eAAe,EACf,YAAY,EACZ,WAAW,GACZ,EAAE,8BAA8B,+BAyEhC"}

package/dist/blocks/e-commerce/navigation/storefront-navbar-mobile-nav.js

@@ -0,0 +1,83 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var storefront_navbar_mobile_nav_exports = {};
+__export(storefront_navbar_mobile_nav_exports, {
+  StorefrontNavbarMobileNav: () => StorefrontNavbarMobileNav
+});
+module.exports = __toCommonJS(storefront_navbar_mobile_nav_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_accordion = require("../../../ui/accordion.js");
+var import_separator = require("../../../ui/separator.js");
+var import_sheet = require("../../../ui/sheet.js");
+var import_utils = require("../../../lib/utils.js");
+function StorefrontNavbarMobileNav({
+  storeCategories,
+  utilityLinks,
+  accountHref
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("nav", { "aria-label": "Store", className: "px-2 py-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_accordion.Accordion, { type: "multiple", children: storeCategories.map(
+      (category) => category.children ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_accordion.AccordionItem, { value: category.href, className: "border-none", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_accordion.AccordionTrigger, { className: "px-3 py-3 text-base font-medium hover:no-underline", children: category.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_accordion.AccordionContent, { className: "pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "flex flex-col", children: category.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sheet.SheetClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "a",
+          {
+            href: child.href,
+            className: "text-muted-foreground hover:bg-accent hover:text-accent-foreground block rounded-md px-3 py-3 text-sm transition-colors duration-150",
+            children: child.label
+          }
+        ) }) }, child.href)) }) })
+      ] }, category.href) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sheet.SheetClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "a",
+        {
+          href: category.href,
+          className: (0, import_utils.cn)(
+            "hover:bg-accent block rounded-md px-3 py-3 text-base font-medium transition-colors duration-150",
+            category.emphasis && "text-destructive"
+          ),
+          children: category.label
+        }
+      ) }, category.href)
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_separator.Separator, { className: "my-2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", { className: "flex flex-col", children: [
+      utilityLinks.map((link) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sheet.SheetClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "a",
+        {
+          href: link.href,
+          className: "text-muted-foreground hover:bg-accent hover:text-accent-foreground block rounded-md px-3 py-3 text-sm transition-colors duration-150",
+          children: link.label
+        }
+      ) }) }, link.href)),
+      accountHref ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sheet.SheetClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "a",
+        {
+          href: accountHref,
+          className: "text-muted-foreground hover:bg-accent hover:text-accent-foreground block rounded-md px-3 py-3 text-sm transition-colors duration-150",
+          children: "Account"
+        }
+      ) }) }) : null
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StorefrontNavbarMobileNav
+});
+//# sourceMappingURL=storefront-navbar-mobile-nav.js.map

package/dist/blocks/e-commerce/navigation/storefront-navbar-mobile-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/navigation/storefront-navbar-mobile-nav.tsx"],"sourcesContent":["import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../../../ui/accordion'\nimport { Separator } from '../../../ui/separator'\nimport { SheetClose } from '../../../ui/sheet'\nimport { cn } from '../../../lib/utils'\nimport type { StoreCategory } from '../../../lib/contracts'\n\nexport interface UtilityLink {\n  label: string\n  href: string\n}\n\nexport interface StorefrontNavbarMobileNavProps {\n  storeCategories: StoreCategory[]\n  utilityLinks: UtilityLink[]\n  /** When provided, an extra \"Account\" link is appended after the utility links. */\n  accountHref?: string\n}\n\nexport function StorefrontNavbarMobileNav({\n  storeCategories,\n  utilityLinks,\n  accountHref,\n}: StorefrontNavbarMobileNavProps) {\n  return (\n    <nav aria-label='Store' className='px-2 py-2'>\n      <Accordion type='multiple'>\n        {storeCategories.map(category =>\n          category.children ? (\n            <AccordionItem key={category.href} value={category.href} className='border-none'>\n              <AccordionTrigger className='px-3 py-3 text-base font-medium hover:no-underline'>\n                {category.label}\n              </AccordionTrigger>\n              <AccordionContent className='pb-1'>\n                <ul className='flex flex-col'>\n                  {category.children.map(child => (\n                    <li key={child.href}>\n                      <SheetClose asChild>\n                        <a\n                          href={child.href}\n                          className='text-muted-foreground hover:bg-accent hover:text-accent-foreground block rounded-md px-3 py-3 text-sm transition-colors duration-150'\n                        >\n                          {child.label}\n                        </a>\n                      </SheetClose>\n                    </li>\n                  ))}\n                </ul>\n              </AccordionContent>\n            </AccordionItem>\n          ) : (\n            <SheetClose key={category.href} asChild>\n              <a\n                href={category.href}\n                className={cn(\n                  'hover:bg-accent block rounded-md px-3 py-3 text-base font-medium transition-colors duration-150',\n                  category.emphasis && 'text-destructive',\n                )}\n              >\n                {category.label}\n              </a>\n            </SheetClose>\n          ),\n        )}\n      </Accordion>\n\n      <Separator className='my-2' />\n\n      <ul className='flex flex-col'>\n        {utilityLinks.map(link => (\n          <li key={link.href}>\n            <SheetClose asChild>\n              <a\n                href={link.href}\n                className='text-muted-foreground hover:bg-accent hover:text-accent-foreground block rounded-md px-3 py-3 text-sm transition-colors duration-150'\n              >\n                {link.label}\n              </a>\n            </SheetClose>\n          </li>\n        ))}\n        {accountHref ? (\n          <li>\n            <SheetClose asChild>\n              <a\n                href={accountHref}\n                className='text-muted-foreground hover:bg-accent hover:text-accent-foreground block rounded-md px-3 py-3 text-sm transition-colors duration-150'\n              >\n                Account\n              </a>\n            </SheetClose>\n          </li>\n        ) : null}\n      </ul>\n    </nav>\n  )\n}"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BY;AA5BZ,uBAA6E;AAC7E,uBAA0B;AAC1B,mBAA2B;AAC3B,mBAAmB;AAeZ,SAAS,0BAA0B;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AACF,GAAmC;AACjC,SACE,6CAAC,SAAI,cAAW,SAAQ,WAAU,aAChC;AAAA,gDAAC,8BAAU,MAAK,YACb,0BAAgB;AAAA,MAAI,cACnB,SAAS,WACP,6CAAC,kCAAkC,OAAO,SAAS,MAAM,WAAU,eACjE;AAAA,oDAAC,qCAAiB,WAAU,sDACzB,mBAAS,OACZ;AAAA,QACA,4CAAC,qCAAiB,WAAU,QAC1B,sDAAC,QAAG,WAAU,iBACX,mBAAS,SAAS,IAAI,WACrB,4CAAC,QACC,sDAAC,2BAAW,SAAO,MACjB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,MAAM;AAAA,YACZ,WAAU;AAAA,YAET,gBAAM;AAAA;AAAA,QACT,GACF,KARO,MAAM,IASf,CACD,GACH,GACF;AAAA,WAnBkB,SAAS,IAoB7B,IAEA,4CAAC,2BAA+B,SAAO,MACrC;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,SAAS;AAAA,UACf,eAAW;AAAA,YACT;AAAA,YACA,SAAS,YAAY;AAAA,UACvB;AAAA,UAEC,mBAAS;AAAA;AAAA,MACZ,KATe,SAAS,IAU1B;AAAA,IAEJ,GACF;AAAA,IAEA,4CAAC,8BAAU,WAAU,QAAO;AAAA,IAE5B,6CAAC,QAAG,WAAU,iBACX;AAAA,mBAAa,IAAI,UAChB,4CAAC,QACC,sDAAC,2BAAW,SAAO,MACjB;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,WAAU;AAAA,UAET,eAAK;AAAA;AAAA,MACR,GACF,KARO,KAAK,IASd,CACD;AAAA,MACA,cACC,4CAAC,QACC,sDAAC,2BAAW,SAAO,MACjB;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACX;AAAA;AAAA,MAED,GACF,GACF,IACE;AAAA,OACN;AAAA,KACF;AAEJ;","names":[]}

package/dist/blocks/e-commerce/navigation/storefront-navbar-mobile-nav.mjs

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../../ui/accordion.mjs";
+import { Separator } from "../../../ui/separator.mjs";
+import { SheetClose } from "../../../ui/sheet.mjs";
+import { cn } from "../../../lib/utils.mjs";
+function StorefrontNavbarMobileNav({
+  storeCategories,
+  utilityLinks,
+  accountHref
+}) {
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": "Store", className: "px-2 py-2", children: [
+    /* @__PURE__ */ jsx(Accordion, { type: "multiple", children: storeCategories.map(
+      (category) => category.children ? /* @__PURE__ */ jsxs(AccordionItem, { value: category.href, className: "border-none", children: [
+        /* @__PURE__ */ jsx(AccordionTrigger, { className: "px-3 py-3 text-base font-medium hover:no-underline", children: category.label }),
+        /* @__PURE__ */ jsx(AccordionContent, { className: "pb-1", children: /* @__PURE__ */ jsx("ul", { className: "flex flex-col", children: category.children.map((child) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(SheetClose, { asChild: true, children: /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: child.href,
+            className: "text-muted-foreground hover:bg-accent hover:text-accent-foreground block rounded-md px-3 py-3 text-sm transition-colors duration-150",
+            children: child.label
+          }
+        ) }) }, child.href)) }) })
+      ] }, category.href) : /* @__PURE__ */ jsx(SheetClose, { asChild: true, children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: category.href,
+          className: cn(
+            "hover:bg-accent block rounded-md px-3 py-3 text-base font-medium transition-colors duration-150",
+            category.emphasis && "text-destructive"
+          ),
+          children: category.label
+        }
+      ) }, category.href)
+    ) }),
+    /* @__PURE__ */ jsx(Separator, { className: "my-2" }),
+    /* @__PURE__ */ jsxs("ul", { className: "flex flex-col", children: [
+      utilityLinks.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(SheetClose, { asChild: true, children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: link.href,
+          className: "text-muted-foreground hover:bg-accent hover:text-accent-foreground block rounded-md px-3 py-3 text-sm transition-colors duration-150",
+          children: link.label
+        }
+      ) }) }, link.href)),
+      accountHref ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(SheetClose, { asChild: true, children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: accountHref,
+          className: "text-muted-foreground hover:bg-accent hover:text-accent-foreground block rounded-md px-3 py-3 text-sm transition-colors duration-150",
+          children: "Account"
+        }
+      ) }) }) : null
+    ] })
+  ] });
+}
+export {
+  StorefrontNavbarMobileNav
+};
+//# sourceMappingURL=storefront-navbar-mobile-nav.mjs.map

package/dist/blocks/e-commerce/navigation/storefront-navbar-mobile-nav.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/navigation/storefront-navbar-mobile-nav.tsx"],"sourcesContent":["import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../../../ui/accordion'\nimport { Separator } from '../../../ui/separator'\nimport { SheetClose } from '../../../ui/sheet'\nimport { cn } from '../../../lib/utils'\nimport type { StoreCategory } from '../../../lib/contracts'\n\nexport interface UtilityLink {\n  label: string\n  href: string\n}\n\nexport interface StorefrontNavbarMobileNavProps {\n  storeCategories: StoreCategory[]\n  utilityLinks: UtilityLink[]\n  /** When provided, an extra \"Account\" link is appended after the utility links. */\n  accountHref?: string\n}\n\nexport function StorefrontNavbarMobileNav({\n  storeCategories,\n  utilityLinks,\n  accountHref,\n}: StorefrontNavbarMobileNavProps) {\n  return (\n    <nav aria-label='Store' className='px-2 py-2'>\n      <Accordion type='multiple'>\n        {storeCategories.map(category =>\n          category.children ? (\n            <AccordionItem key={category.href} value={category.href} className='border-none'>\n              <AccordionTrigger className='px-3 py-3 text-base font-medium hover:no-underline'>\n                {category.label}\n              </AccordionTrigger>\n              <AccordionContent className='pb-1'>\n                <ul className='flex flex-col'>\n                  {category.children.map(child => (\n                    <li key={child.href}>\n                      <SheetClose asChild>\n                        <a\n                          href={child.href}\n                          className='text-muted-foreground hover:bg-accent hover:text-accent-foreground block rounded-md px-3 py-3 text-sm transition-colors duration-150'\n                        >\n                          {child.label}\n                        </a>\n                      </SheetClose>\n                    </li>\n                  ))}\n                </ul>\n              </AccordionContent>\n            </AccordionItem>\n          ) : (\n            <SheetClose key={category.href} asChild>\n              <a\n                href={category.href}\n                className={cn(\n                  'hover:bg-accent block rounded-md px-3 py-3 text-base font-medium transition-colors duration-150',\n                  category.emphasis && 'text-destructive',\n                )}\n              >\n                {category.label}\n              </a>\n            </SheetClose>\n          ),\n        )}\n      </Accordion>\n\n      <Separator className='my-2' />\n\n      <ul className='flex flex-col'>\n        {utilityLinks.map(link => (\n          <li key={link.href}>\n            <SheetClose asChild>\n              <a\n                href={link.href}\n                className='text-muted-foreground hover:bg-accent hover:text-accent-foreground block rounded-md px-3 py-3 text-sm transition-colors duration-150'\n              >\n                {link.label}\n              </a>\n            </SheetClose>\n          </li>\n        ))}\n        {accountHref ? (\n          <li>\n            <SheetClose asChild>\n              <a\n                href={accountHref}\n                className='text-muted-foreground hover:bg-accent hover:text-accent-foreground block rounded-md px-3 py-3 text-sm transition-colors duration-150'\n              >\n                Account\n              </a>\n            </SheetClose>\n          </li>\n        ) : null}\n      </ul>\n    </nav>\n  )\n}"],"mappings":"AA4BY,SACE,KADF;AA5BZ,SAAS,WAAW,kBAAkB,eAAe,wBAAwB;AAC7E,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AAeZ,SAAS,0BAA0B;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AACF,GAAmC;AACjC,SACE,qBAAC,SAAI,cAAW,SAAQ,WAAU,aAChC;AAAA,wBAAC,aAAU,MAAK,YACb,0BAAgB;AAAA,MAAI,cACnB,SAAS,WACP,qBAAC,iBAAkC,OAAO,SAAS,MAAM,WAAU,eACjE;AAAA,4BAAC,oBAAiB,WAAU,sDACzB,mBAAS,OACZ;AAAA,QACA,oBAAC,oBAAiB,WAAU,QAC1B,8BAAC,QAAG,WAAU,iBACX,mBAAS,SAAS,IAAI,WACrB,oBAAC,QACC,8BAAC,cAAW,SAAO,MACjB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,MAAM;AAAA,YACZ,WAAU;AAAA,YAET,gBAAM;AAAA;AAAA,QACT,GACF,KARO,MAAM,IASf,CACD,GACH,GACF;AAAA,WAnBkB,SAAS,IAoB7B,IAEA,oBAAC,cAA+B,SAAO,MACrC;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,SAAS;AAAA,UACf,WAAW;AAAA,YACT;AAAA,YACA,SAAS,YAAY;AAAA,UACvB;AAAA,UAEC,mBAAS;AAAA;AAAA,MACZ,KATe,SAAS,IAU1B;AAAA,IAEJ,GACF;AAAA,IAEA,oBAAC,aAAU,WAAU,QAAO;AAAA,IAE5B,qBAAC,QAAG,WAAU,iBACX;AAAA,mBAAa,IAAI,UAChB,oBAAC,QACC,8BAAC,cAAW,SAAO,MACjB;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,WAAU;AAAA,UAET,eAAK;AAAA;AAAA,MACR,GACF,KARO,KAAK,IASd,CACD;AAAA,MACA,cACC,oBAAC,QACC,8BAAC,cAAW,SAAO,MACjB;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACX;AAAA;AAAA,MAED,GACF,GACF,IACE;AAAA,OACN;AAAA,KACF;AAEJ;","names":[]}

package/dist/blocks/e-commerce/navigation/storefront-navbar-search-bar.d.ts

@@ -0,0 +1,8 @@
+export interface StorefrontNavbarSearchBarProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    onDismiss?: () => void;
+    id?: string;
+}
+export declare function StorefrontNavbarSearchBar({ value, onValueChange, onDismiss, id, }: StorefrontNavbarSearchBarProps): import("react").JSX.Element;
+//# sourceMappingURL=storefront-navbar-search-bar.d.ts.map

package/dist/blocks/e-commerce/navigation/storefront-navbar-search-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storefront-navbar-search-bar.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/navigation/storefront-navbar-search-bar.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,8BAA8B;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AAED,wBAAgB,yBAAyB,CAAC,EACxC,KAAK,EACL,aAAa,EACb,SAAS,EACT,EAAmB,GACpB,EAAE,8BAA8B,+BAmChC"}

package/dist/blocks/e-commerce/navigation/storefront-navbar-search-bar.js

@@ -0,0 +1,73 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var storefront_navbar_search_bar_exports = {};
+__export(storefront_navbar_search_bar_exports, {
+  StorefrontNavbarSearchBar: () => StorefrontNavbarSearchBar
+});
+module.exports = __toCommonJS(storefront_navbar_search_bar_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_react = require("lucide-react");
+var import_input_group = require("../../../ui/input-group.js");
+function StorefrontNavbarSearchBar({
+  value,
+  onValueChange,
+  onDismiss,
+  id = "store-search"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "form",
+    {
+      role: "search",
+      onSubmit: (event) => event.preventDefault(),
+      className: "w-full",
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          if (value) {
+            onValueChange("");
+            return;
+          }
+          onDismiss?.();
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: id, className: "sr-only", children: "Search products" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_input_group.InputGroup, { className: "bg-muted/40 h-9 w-full rounded-full border-transparent shadow-none has-[[data-slot=input-group-control]:focus-visible]:bg-background", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_group.InputGroupAddon, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Search, { "aria-hidden": "true", className: "text-muted-foreground size-4" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_input_group.InputGroupInput,
+            {
+              id,
+              type: "search",
+              autoComplete: "off",
+              placeholder: "Search products",
+              value,
+              onChange: (event) => onValueChange(event.target.value),
+              className: "rounded-full"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StorefrontNavbarSearchBar
+});
+//# sourceMappingURL=storefront-navbar-search-bar.js.map

package/dist/blocks/e-commerce/navigation/storefront-navbar-search-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/navigation/storefront-navbar-search-bar.tsx"],"sourcesContent":["import { Search } from 'lucide-react'\n\nimport { InputGroup, InputGroupAddon, InputGroupInput } from '../../../ui/input-group'\n\nexport interface StorefrontNavbarSearchBarProps {\n  value: string\n  onValueChange: (value: string) => void\n  onDismiss?: () => void\n  id?: string\n}\n\nexport function StorefrontNavbarSearchBar({\n  value,\n  onValueChange,\n  onDismiss,\n  id = 'store-search',\n}: StorefrontNavbarSearchBarProps) {\n  return (\n    <form\n      role='search'\n      onSubmit={event => event.preventDefault()}\n      className='w-full'\n      onKeyDown={event => {\n        if (event.key === 'Escape') {\n          if (value) {\n            onValueChange('')\n            return\n          }\n          onDismiss?.()\n        }\n      }}\n    >\n      <label htmlFor={id} className='sr-only'>\n        Search products\n      </label>\n      <InputGroup className='bg-muted/40 h-9 w-full rounded-full border-transparent shadow-none has-[[data-slot=input-group-control]:focus-visible]:bg-background'>\n        <InputGroupAddon>\n          <Search aria-hidden='true' className='text-muted-foreground size-4' />\n        </InputGroupAddon>\n        <InputGroupInput\n          id={id}\n          type='search'\n          autoComplete='off'\n          placeholder='Search products'\n          value={value}\n          onChange={event => onValueChange(event.target.value)}\n          className='rounded-full'\n        />\n      </InputGroup>\n    </form>\n  )\n}"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCM;AAhCN,0BAAuB;AAEvB,yBAA6D;AAStD,SAAS,0BAA0B;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,KAAK;AACP,GAAmC;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAU,WAAS,MAAM,eAAe;AAAA,MACxC,WAAU;AAAA,MACV,WAAW,WAAS;AAClB,YAAI,MAAM,QAAQ,UAAU;AAC1B,cAAI,OAAO;AACT,0BAAc,EAAE;AAChB;AAAA,UACF;AACA,sBAAY;AAAA,QACd;AAAA,MACF;AAAA,MAEA;AAAA,oDAAC,WAAM,SAAS,IAAI,WAAU,WAAU,6BAExC;AAAA,QACA,6CAAC,iCAAW,WAAU,wIACpB;AAAA,sDAAC,sCACC,sDAAC,8BAAO,eAAY,QAAO,WAAU,gCAA+B,GACtE;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,MAAK;AAAA,cACL,cAAa;AAAA,cACb,aAAY;AAAA,cACZ;AAAA,cACA,UAAU,WAAS,cAAc,MAAM,OAAO,KAAK;AAAA,cACnD,WAAU;AAAA;AAAA,UACZ;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}