@shopify/shop-minis-react 0.0.22 → 0.0.23

package/dist/_virtual/index4.js

@@ -1,5 +1,5 @@
-var e = { exports: {} };
+var r = {};
 export {
-  e as __module
+  r as __exports
 };
 //# sourceMappingURL=index4.js.map

package/dist/_virtual/index5.js

@@ -1,6 +1,5 @@
-import { __require as r } from "../shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/index.js";
-var i = r();
+var e = { exports: {} };
 export {
-  i as l
+  e as __module
 };
 //# sourceMappingURL=index5.js.map

package/dist/_virtual/index5.js.map

@@ -1 +1 @@
-{"version":3,"file":"index5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/index6.js

@@ -1,6 +1,6 @@
-import { __require as r } from "../shop-minis-react/node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/shim/index.js";
+import { __require as r } from "../shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/index.js";
 var i = r();
 export {
-  i as s
+  i as l
 };
 //# sourceMappingURL=index6.js.map

package/dist/_virtual/index7.js

@@ -1,5 +1,6 @@
-var r = {};
+import { __require as r } from "../shop-minis-react/node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/shim/index.js";
+var i = r();
 export {
-  r as __exports
+  i as s
 };
 //# sourceMappingURL=index7.js.map

package/dist/_virtual/index7.js.map

@@ -1 +1 @@
-{"version":3,"file":"index7.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index7.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/commerce/quantity-selector.js

@@ -0,0 +1,80 @@
+import { jsx as t, Fragment as y, jsxs as g } from "react/jsx-runtime";
+import { useState as h, useEffect as u, useCallback as m } from "react";
+import { cn as n } from "../../lib/utils.js";
+import { IconButton as p } from "../atoms/icon-button.js";
+import k from "../../shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/minus.js";
+import w from "../../shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/plus.js";
+const C = ({
+  quantity: r,
+  onQuantityChange: d,
+  maxQuantity: s,
+  minQuantity: o = 1,
+  disabled: f = !1
+}) => {
+  const [e, c] = h(r);
+  u(() => {
+    c(r);
+  }, [r]), u(() => {
+    d(e);
+  }, [e, d]);
+  const i = f || e >= s, l = f || e <= o, x = m(() => {
+    if (i) return;
+    const a = e + 1 > s ? e : e + 1;
+    c(a);
+  }, [i, e, s]), b = m(() => {
+    if (l) return;
+    const a = e - 1 < o ? e : e - 1;
+    c(a);
+  }, [l, e, o]);
+  return /* @__PURE__ */ t(y, { children: /* @__PURE__ */ t(
+    "div",
+    {
+      "data-testid": "QuantitySelector",
+      className: n("inline-flex w-auto bg-tertiary rounded-[8px]"),
+      children: /* @__PURE__ */ g(
+        "div",
+        {
+          className: n(
+            "flex h-space-32 items-center self-center overflow-hidden rounded-radius-8 bg-bg-fill-secondary",
+            "p-space-8"
+          ),
+          children: [
+            /* @__PURE__ */ t(
+              p,
+              {
+                Icon: k,
+                onClick: b,
+                buttonStyles: "transition bg-transparent",
+                filled: !1,
+                size: "sm",
+                iconStyles: n(
+                  l ? "text-background" : "text-foreground",
+                  "stroke-3"
+                )
+              }
+            ),
+            /* @__PURE__ */ t("div", { className: n("grow", "w-[20px]"), children: /* @__PURE__ */ t("span", { className: "flex items-center justify-center w-full h-full font-medium text-[10px]", children: e }) }),
+            /* @__PURE__ */ t(
+              p,
+              {
+                Icon: w,
+                onClick: x,
+                buttonStyles: "transition bg-transparent",
+                filled: !1,
+                size: "sm",
+                iconStyles: n(
+                  i ? "text-background" : "text-secondary",
+                  "stroke-3"
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+};
+export {
+  C as QuantitySelector
+};
+//# sourceMappingURL=quantity-selector.js.map

package/dist/components/commerce/quantity-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"quantity-selector.js","sources":["../../../src/components/commerce/quantity-selector.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react'\n\nimport {Minus, Plus} from 'lucide-react'\n\nimport {cn} from '../../lib/utils'\nimport {IconButton} from '../atoms/icon-button'\n\ninterface QuantitySelectorProps {\n  quantity: number\n  onQuantityChange: (quantity: number) => void\n  maxQuantity: number\n  minQuantity?: number\n  disabled?: boolean\n}\n\nexport const QuantitySelector = ({\n  quantity: _quantity,\n  onQuantityChange,\n  maxQuantity,\n  minQuantity = 1,\n  disabled = false,\n}: QuantitySelectorProps) => {\n  const [quantity, setQuantity] = useState(_quantity)\n\n  useEffect(() => {\n    setQuantity(_quantity)\n  }, [_quantity])\n\n  useEffect(() => {\n    onQuantityChange(quantity)\n  }, [quantity, onQuantityChange])\n\n  const incrementDisabled = disabled || quantity >= maxQuantity\n  const decrementDisabled = disabled || quantity <= minQuantity\n\n  const incrementQuantity = useCallback(() => {\n    if (incrementDisabled) return\n    const newQuantity = quantity + 1 > maxQuantity ? quantity : quantity + 1\n    setQuantity(newQuantity)\n  }, [incrementDisabled, quantity, maxQuantity])\n\n  const decrementQuantity = useCallback(() => {\n    if (decrementDisabled) return\n    const newQuantity = quantity - 1 < minQuantity ? quantity : quantity - 1\n    setQuantity(newQuantity)\n  }, [decrementDisabled, quantity, minQuantity])\n\n  return (\n    <>\n      <div\n        data-testid=\"QuantitySelector\"\n        className={cn('inline-flex w-auto bg-tertiary rounded-[8px]')}\n      >\n        <div\n          className={cn(\n            'flex h-space-32 items-center self-center overflow-hidden rounded-radius-8 bg-bg-fill-secondary',\n            `p-space-8`\n          )}\n        >\n          <IconButton\n            Icon={Minus}\n            onClick={decrementQuantity}\n            buttonStyles=\"transition bg-transparent\"\n            filled={false}\n            size=\"sm\"\n            iconStyles={cn(\n              decrementDisabled ? 'text-background' : 'text-foreground',\n              'stroke-3'\n            )}\n          />\n\n          <div className={cn('grow', `w-[20px]`)}>\n            <span className=\"flex items-center justify-center w-full h-full font-medium text-[10px]\">\n              {quantity}\n            </span>\n          </div>\n          <IconButton\n            Icon={Plus}\n            onClick={incrementQuantity}\n            buttonStyles=\"transition bg-transparent\"\n            filled={false}\n            size=\"sm\"\n            iconStyles={cn(\n              incrementDisabled ? 'text-background' : 'text-secondary',\n              'stroke-3'\n            )}\n          />\n        </div>\n      </div>\n    </>\n  )\n}\n"],"names":["QuantitySelector","_quantity","onQuantityChange","maxQuantity","minQuantity","disabled","quantity","setQuantity","useState","useEffect","incrementDisabled","decrementDisabled","incrementQuantity","useCallback","newQuantity","decrementQuantity","jsx","Fragment","cn","jsxs","IconButton","Minus","Plus"],"mappings":";;;;;;AAeO,MAAMA,IAAmB,CAAC;AAAA,EAC/B,UAAUC;AAAA,EACV,kBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AACb,MAA6B;AAC3B,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAASP,CAAS;AAElD,EAAAQ,EAAU,MAAM;AACd,IAAAF,EAAYN,CAAS;AAAA,EAAA,GACpB,CAACA,CAAS,CAAC,GAEdQ,EAAU,MAAM;AACd,IAAAP,EAAiBI,CAAQ;AAAA,EAAA,GACxB,CAACA,GAAUJ,CAAgB,CAAC;AAEzB,QAAAQ,IAAoBL,KAAYC,KAAYH,GAC5CQ,IAAoBN,KAAYC,KAAYF,GAE5CQ,IAAoBC,EAAY,MAAM;AAC1C,QAAIH,EAAmB;AACvB,UAAMI,IAAcR,IAAW,IAAIH,IAAcG,IAAWA,IAAW;AACvE,IAAAC,EAAYO,CAAW;AAAA,EACtB,GAAA,CAACJ,GAAmBJ,GAAUH,CAAW,CAAC,GAEvCY,IAAoBF,EAAY,MAAM;AAC1C,QAAIF,EAAmB;AACvB,UAAMG,IAAcR,IAAW,IAAIF,IAAcE,IAAWA,IAAW;AACvE,IAAAC,EAAYO,CAAW;AAAA,EACtB,GAAA,CAACH,GAAmBL,GAAUF,CAAW,CAAC;AAE7C,SAEI,gBAAAY,EAAAC,GAAA,EAAA,UAAA,gBAAAD;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAWE,EAAG,8CAA8C;AAAA,MAE5D,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWD;AAAA,YACT;AAAA,YACA;AAAA,UACF;AAAA,UAEA,UAAA;AAAA,YAAA,gBAAAF;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,MAAMC;AAAA,gBACN,SAASN;AAAA,gBACT,cAAa;AAAA,gBACb,QAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,YAAYG;AAAA,kBACVP,IAAoB,oBAAoB;AAAA,kBACxC;AAAA,gBAAA;AAAA,cACF;AAAA,YACF;AAAA,YAEC,gBAAAK,EAAA,OAAA,EAAI,WAAWE,EAAG,QAAQ,UAAU,GACnC,UAAA,gBAAAF,EAAC,QAAK,EAAA,WAAU,0EACb,UAAAV,EACH,CAAA,GACF;AAAA,YACA,gBAAAU;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,MAAME;AAAA,gBACN,SAASV;AAAA,gBACT,cAAa;AAAA,gBACb,QAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,YAAYM;AAAA,kBACVR,IAAoB,oBAAoB;AAAA,kBACxC;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/index.js

@@ -5,226 +5,228 @@ import { ProductLink as s } from "./components/commerce/product-link.js";
 import { MerchantCard as u, MerchantCardPrimitive as x } from "./components/commerce/merchant-card.js";
 import { ProductCardSkeleton as c } from "./components/commerce/product-card-skeleton.js";
 import { MerchantCardSkeleton as g } from "./components/commerce/merchant-card-skeleton.js";
-import { TransitionContainer as D } from "./components/navigation/transition-container.js";
-import { TransitionLink as C } from "./components/navigation/transition-link.js";
-import { Button as T } from "./components/atoms/button.js";
-import { FavoriteButton as I } from "./components/atoms/favorite-button.js";
-import { IconButton as v } from "./components/atoms/icon-button.js";
-import { ThumbhashImage as b } from "./components/atoms/thumbhash-image.js";
-import { Touchable as k } from "./components/atoms/touchable.js";
-import { AlertDialogAtom as E } from "./components/atoms/alert-dialog.js";
-import { List as N } from "./components/atoms/list.js";
-import { VideoPlayer as y } from "./components/atoms/video-player.js";
-import { Accordion as H, AccordionContent as O, AccordionItem as V, AccordionTrigger as U } from "./components/ui/accordion.js";
-import { Alert as _, AlertDescription as Y, AlertTitle as W } from "./components/ui/alert.js";
-import { AlertDialog as q, AlertDialogAction as J, AlertDialogCancel as K, AlertDialogContent as Q, AlertDialogDescription as X, AlertDialogFooter as Z, AlertDialogHeader as $, AlertDialogOverlay as rr, AlertDialogPortal as er, AlertDialogTitle as or, AlertDialogTrigger as tr } from "./components/ui/alert-dialog.js";
-import { Avatar as ir, AvatarFallback as lr, AvatarImage as pr } from "./components/ui/avatar.js";
-import { Badge as sr, badgeVariants as nr } from "./components/ui/badge.js";
-import { Card as xr, CardAction as fr, CardContent as cr, CardDescription as dr, CardFooter as gr, CardHeader as Sr, CardTitle as Dr } from "./components/ui/card.js";
-import { Carousel as Cr, CarouselContent as Pr, CarouselItem as Tr, CarouselNext as hr, CarouselPrevious as Ir } from "./components/ui/carousel.js";
-import { Checkbox as vr } from "./components/ui/checkbox.js";
-import { Dialog as br, DialogClose as Fr, DialogContent as kr, DialogDescription as Br, DialogFooter as Er, DialogHeader as Mr, DialogOverlay as Nr, DialogPortal as Lr, DialogTitle as yr, DialogTrigger as Gr } from "./components/ui/dialog.js";
-import { Drawer as Or, DrawerClose as Vr, DrawerContent as Ur, DrawerDescription as zr, DrawerFooter as _r, DrawerHeader as Yr, DrawerOverlay as Wr, DrawerPortal as jr, DrawerTitle as qr, DrawerTrigger as Jr } from "./components/ui/drawer.js";
-import { Input as Qr } from "./components/ui/input.js";
-import { Label as Zr } from "./components/ui/label.js";
-import { Progress as re } from "./components/ui/progress.js";
-import { RadioGroup as oe, RadioGroupItem as te } from "./components/ui/radio-group.js";
-import { ResizableHandle as ie, ResizablePanel as le, ResizablePanelGroup as pe } from "./components/ui/resizable.js";
-import { ScrollArea as se, ScrollBar as ne } from "./components/ui/scroll-area.js";
-import { Select as xe, SelectContent as fe, SelectGroup as ce, SelectItem as de, SelectLabel as ge, SelectScrollDownButton as Se, SelectScrollUpButton as De, SelectSeparator as Ae, SelectTrigger as Ce, SelectValue as Pe } from "./components/ui/select.js";
-import { Separator as he } from "./components/ui/separator.js";
-import { Sheet as we, SheetClose as ve, SheetContent as Re, SheetDescription as be, SheetFooter as Fe, SheetHeader as ke, SheetTitle as Be, SheetTrigger as Ee } from "./components/ui/sheet.js";
-import { Toaster as Ne } from "./components/ui/sonner.js";
-import { Skeleton as ye } from "./components/ui/skeleton.js";
-import { useRecentProducts as He } from "./hooks/user/useRecentProducts.js";
-import { useRecentShops as Ve } from "./hooks/user/useRecentShops.js";
-import { useSavedProducts as ze } from "./hooks/user/useSavedProducts.js";
-import { useSavedProductsActions as Ye } from "./hooks/user/useSavedProductsActions.js";
-import { useFollowedShops as je } from "./hooks/user/useFollowedShops.js";
-import { useFollowedShopsActions as Je } from "./hooks/user/useFollowedShopsActions.js";
-import { useCurrentUser as Qe } from "./hooks/user/useCurrentUser.js";
-import { useOrders as Ze } from "./hooks/user/useOrders.js";
-import { useBuyerAttributes as ro } from "./hooks/user/useBuyerAttributes.js";
-import { useProductListActions as oo } from "./hooks/product/useProductListActions.js";
-import { useProductLists as ao } from "./hooks/product/useProductLists.js";
-import { useProductList as lo } from "./hooks/product/useProductList.js";
-import { useProduct as mo } from "./hooks/product/useProduct.js";
-import { useProducts as no } from "./hooks/product/useProducts.js";
-import { useProductVariants as xo } from "./hooks/product/useProductVariants.js";
-import { useProductMedia as co } from "./hooks/product/useProductMedia.js";
-import { useProductSearch as So } from "./hooks/product/useProductSearch.js";
-import { useRecommendedProducts as Ao } from "./hooks/product/useRecommendedProducts.js";
-import { usePopularProducts as Po } from "./hooks/product/usePopularProducts.js";
-import { useCuratedProducts as ho } from "./hooks/product/useCuratedProducts.js";
-import { useAsyncStorage as wo } from "./hooks/storage/useAsyncStorage.js";
-import { useSecureStorage as Ro } from "./hooks/storage/useSecureStorage.js";
-import { useImageUpload as Fo } from "./hooks/storage/useImageUpload.js";
-import { useShopNavigation as Bo } from "./hooks/navigation/useShopNavigation.js";
-import { useCloseMini as Mo } from "./hooks/navigation/useCloseMini.js";
-import { useDeeplink as Lo } from "./hooks/navigation/useDeeplink.js";
-import { useNavigateWithTransition as Go } from "./hooks/navigation/useNavigateWithTransition.js";
-import { useShop as Oo } from "./hooks/shop/useShop.js";
-import { useShopCartActions as Uo } from "./hooks/shop/useShopCartActions.js";
-import { useRecommendedShops as _o } from "./hooks/shop/useRecommendedShops.js";
-import { useErrorToast as Wo } from "./hooks/util/useErrorToast.js";
-import { useErrorScreen as qo } from "./hooks/util/useErrorScreen.js";
-import { useShare as Ko } from "./hooks/util/useShare.js";
-import { useImagePicker as Xo } from "./hooks/util/useImagePicker.js";
-import { MiniEntityNotFoundError as $o, MiniError as rt, MiniNetworkError as et, formatError as ot } from "./utils/errors.js";
-import { extractBrandTheme as at, formatReviewCount as it, getFeaturedImages as lt, normalizeRating as pt } from "./utils/merchant-card.js";
-import { parseUrl as st } from "./utils/parseUrl.js";
-import { Consent as ut, ConsentStatus as xt } from "./shop-minis-platform/src/types/permissions.js";
+import { QuantitySelector as D } from "./components/commerce/quantity-selector.js";
+import { TransitionContainer as C } from "./components/navigation/transition-container.js";
+import { TransitionLink as T } from "./components/navigation/transition-link.js";
+import { Button as I } from "./components/atoms/button.js";
+import { FavoriteButton as v } from "./components/atoms/favorite-button.js";
+import { IconButton as b } from "./components/atoms/icon-button.js";
+import { ThumbhashImage as k } from "./components/atoms/thumbhash-image.js";
+import { Touchable as E } from "./components/atoms/touchable.js";
+import { AlertDialogAtom as N } from "./components/atoms/alert-dialog.js";
+import { List as L } from "./components/atoms/list.js";
+import { VideoPlayer as H } from "./components/atoms/video-player.js";
+import { Accordion as V, AccordionContent as U, AccordionItem as z, AccordionTrigger as _ } from "./components/ui/accordion.js";
+import { Alert as Q, AlertDescription as W, AlertTitle as j } from "./components/ui/alert.js";
+import { AlertDialog as J, AlertDialogAction as K, AlertDialogCancel as X, AlertDialogContent as Z, AlertDialogDescription as $, AlertDialogFooter as rr, AlertDialogHeader as er, AlertDialogOverlay as or, AlertDialogPortal as tr, AlertDialogTitle as ar, AlertDialogTrigger as ir } from "./components/ui/alert-dialog.js";
+import { Avatar as pr, AvatarFallback as mr, AvatarImage as sr } from "./components/ui/avatar.js";
+import { Badge as ur, badgeVariants as xr } from "./components/ui/badge.js";
+import { Card as cr, CardAction as dr, CardContent as gr, CardDescription as Sr, CardFooter as Dr, CardHeader as Ar, CardTitle as Cr } from "./components/ui/card.js";
+import { Carousel as Tr, CarouselContent as hr, CarouselItem as Ir, CarouselNext as wr, CarouselPrevious as vr } from "./components/ui/carousel.js";
+import { Checkbox as br } from "./components/ui/checkbox.js";
+import { Dialog as kr, DialogClose as Br, DialogContent as Er, DialogDescription as Mr, DialogFooter as Nr, DialogHeader as yr, DialogOverlay as Lr, DialogPortal as Gr, DialogTitle as Hr, DialogTrigger as Or } from "./components/ui/dialog.js";
+import { Drawer as Ur, DrawerClose as zr, DrawerContent as _r, DrawerDescription as Yr, DrawerFooter as Qr, DrawerHeader as Wr, DrawerOverlay as jr, DrawerPortal as qr, DrawerTitle as Jr, DrawerTrigger as Kr } from "./components/ui/drawer.js";
+import { Input as Zr } from "./components/ui/input.js";
+import { Label as re } from "./components/ui/label.js";
+import { Progress as oe } from "./components/ui/progress.js";
+import { RadioGroup as ae, RadioGroupItem as ie } from "./components/ui/radio-group.js";
+import { ResizableHandle as pe, ResizablePanel as me, ResizablePanelGroup as se } from "./components/ui/resizable.js";
+import { ScrollArea as ue, ScrollBar as xe } from "./components/ui/scroll-area.js";
+import { Select as ce, SelectContent as de, SelectGroup as ge, SelectItem as Se, SelectLabel as De, SelectScrollDownButton as Ae, SelectScrollUpButton as Ce, SelectSeparator as Pe, SelectTrigger as Te, SelectValue as he } from "./components/ui/select.js";
+import { Separator as we } from "./components/ui/separator.js";
+import { Sheet as Re, SheetClose as be, SheetContent as Fe, SheetDescription as ke, SheetFooter as Be, SheetHeader as Ee, SheetTitle as Me, SheetTrigger as Ne } from "./components/ui/sheet.js";
+import { Toaster as Le } from "./components/ui/sonner.js";
+import { Skeleton as He } from "./components/ui/skeleton.js";
+import { useRecentProducts as Ve } from "./hooks/user/useRecentProducts.js";
+import { useRecentShops as ze } from "./hooks/user/useRecentShops.js";
+import { useSavedProducts as Ye } from "./hooks/user/useSavedProducts.js";
+import { useSavedProductsActions as We } from "./hooks/user/useSavedProductsActions.js";
+import { useFollowedShops as qe } from "./hooks/user/useFollowedShops.js";
+import { useFollowedShopsActions as Ke } from "./hooks/user/useFollowedShopsActions.js";
+import { useCurrentUser as Ze } from "./hooks/user/useCurrentUser.js";
+import { useOrders as ro } from "./hooks/user/useOrders.js";
+import { useBuyerAttributes as oo } from "./hooks/user/useBuyerAttributes.js";
+import { useProductListActions as ao } from "./hooks/product/useProductListActions.js";
+import { useProductLists as lo } from "./hooks/product/useProductLists.js";
+import { useProductList as mo } from "./hooks/product/useProductList.js";
+import { useProduct as no } from "./hooks/product/useProduct.js";
+import { useProducts as xo } from "./hooks/product/useProducts.js";
+import { useProductVariants as co } from "./hooks/product/useProductVariants.js";
+import { useProductMedia as So } from "./hooks/product/useProductMedia.js";
+import { useProductSearch as Ao } from "./hooks/product/useProductSearch.js";
+import { useRecommendedProducts as Po } from "./hooks/product/useRecommendedProducts.js";
+import { usePopularProducts as ho } from "./hooks/product/usePopularProducts.js";
+import { useCuratedProducts as wo } from "./hooks/product/useCuratedProducts.js";
+import { useAsyncStorage as Ro } from "./hooks/storage/useAsyncStorage.js";
+import { useSecureStorage as Fo } from "./hooks/storage/useSecureStorage.js";
+import { useImageUpload as Bo } from "./hooks/storage/useImageUpload.js";
+import { useShopNavigation as Mo } from "./hooks/navigation/useShopNavigation.js";
+import { useCloseMini as yo } from "./hooks/navigation/useCloseMini.js";
+import { useDeeplink as Go } from "./hooks/navigation/useDeeplink.js";
+import { useNavigateWithTransition as Oo } from "./hooks/navigation/useNavigateWithTransition.js";
+import { useShop as Uo } from "./hooks/shop/useShop.js";
+import { useShopCartActions as _o } from "./hooks/shop/useShopCartActions.js";
+import { useRecommendedShops as Qo } from "./hooks/shop/useRecommendedShops.js";
+import { useErrorToast as jo } from "./hooks/util/useErrorToast.js";
+import { useErrorScreen as Jo } from "./hooks/util/useErrorScreen.js";
+import { useShare as Xo } from "./hooks/util/useShare.js";
+import { useImagePicker as $o } from "./hooks/util/useImagePicker.js";
+import { MiniEntityNotFoundError as et, MiniError as ot, MiniNetworkError as tt, formatError as at } from "./utils/errors.js";
+import { extractBrandTheme as lt, formatReviewCount as pt, getFeaturedImages as mt, normalizeRating as st } from "./utils/merchant-card.js";
+import { parseUrl as ut } from "./utils/parseUrl.js";
+import { Consent as ft, ConsentStatus as ct } from "./shop-minis-platform/src/types/permissions.js";
 export {
-  H as Accordion,
-  O as AccordionContent,
-  V as AccordionItem,
-  U as AccordionTrigger,
-  _ as Alert,
-  Y as AlertDescription,
-  q as AlertDialog,
-  J as AlertDialogAction,
-  E as AlertDialogAtom,
-  K as AlertDialogCancel,
-  Q as AlertDialogContent,
-  X as AlertDialogDescription,
-  Z as AlertDialogFooter,
-  $ as AlertDialogHeader,
-  rr as AlertDialogOverlay,
-  er as AlertDialogPortal,
-  or as AlertDialogTitle,
-  tr as AlertDialogTrigger,
-  W as AlertTitle,
-  ir as Avatar,
-  lr as AvatarFallback,
-  pr as AvatarImage,
-  sr as Badge,
-  T as Button,
-  xr as Card,
-  fr as CardAction,
-  cr as CardContent,
-  dr as CardDescription,
-  gr as CardFooter,
-  Sr as CardHeader,
-  Dr as CardTitle,
-  Cr as Carousel,
-  Pr as CarouselContent,
-  Tr as CarouselItem,
-  hr as CarouselNext,
-  Ir as CarouselPrevious,
-  vr as Checkbox,
-  ut as Consent,
-  xt as ConsentStatus,
+  V as Accordion,
+  U as AccordionContent,
+  z as AccordionItem,
+  _ as AccordionTrigger,
+  Q as Alert,
+  W as AlertDescription,
+  J as AlertDialog,
+  K as AlertDialogAction,
+  N as AlertDialogAtom,
+  X as AlertDialogCancel,
+  Z as AlertDialogContent,
+  $ as AlertDialogDescription,
+  rr as AlertDialogFooter,
+  er as AlertDialogHeader,
+  or as AlertDialogOverlay,
+  tr as AlertDialogPortal,
+  ar as AlertDialogTitle,
+  ir as AlertDialogTrigger,
+  j as AlertTitle,
+  pr as Avatar,
+  mr as AvatarFallback,
+  sr as AvatarImage,
+  ur as Badge,
+  I as Button,
+  cr as Card,
+  dr as CardAction,
+  gr as CardContent,
+  Sr as CardDescription,
+  Dr as CardFooter,
+  Ar as CardHeader,
+  Cr as CardTitle,
+  Tr as Carousel,
+  hr as CarouselContent,
+  Ir as CarouselItem,
+  wr as CarouselNext,
+  vr as CarouselPrevious,
+  br as Checkbox,
+  ft as Consent,
+  ct as ConsentStatus,
   o as DATA_NAVIGATION_TYPE_ATTRIBUTE,
-  br as Dialog,
-  Fr as DialogClose,
-  kr as DialogContent,
-  Br as DialogDescription,
-  Er as DialogFooter,
-  Mr as DialogHeader,
-  Nr as DialogOverlay,
-  Lr as DialogPortal,
-  yr as DialogTitle,
-  Gr as DialogTrigger,
-  Or as Drawer,
-  Vr as DrawerClose,
-  Ur as DrawerContent,
-  zr as DrawerDescription,
-  _r as DrawerFooter,
-  Yr as DrawerHeader,
-  Wr as DrawerOverlay,
-  jr as DrawerPortal,
-  qr as DrawerTitle,
-  Jr as DrawerTrigger,
-  I as FavoriteButton,
-  v as IconButton,
-  Qr as Input,
-  Zr as Label,
-  N as List,
+  kr as Dialog,
+  Br as DialogClose,
+  Er as DialogContent,
+  Mr as DialogDescription,
+  Nr as DialogFooter,
+  yr as DialogHeader,
+  Lr as DialogOverlay,
+  Gr as DialogPortal,
+  Hr as DialogTitle,
+  Or as DialogTrigger,
+  Ur as Drawer,
+  zr as DrawerClose,
+  _r as DrawerContent,
+  Yr as DrawerDescription,
+  Qr as DrawerFooter,
+  Wr as DrawerHeader,
+  jr as DrawerOverlay,
+  qr as DrawerPortal,
+  Jr as DrawerTitle,
+  Kr as DrawerTrigger,
+  v as FavoriteButton,
+  b as IconButton,
+  Zr as Input,
+  re as Label,
+  L as List,
   u as MerchantCard,
   x as MerchantCardPrimitive,
   g as MerchantCardSkeleton,
-  $o as MiniEntityNotFoundError,
-  rt as MiniError,
-  et as MiniNetworkError,
+  et as MiniEntityNotFoundError,
+  ot as MiniError,
+  tt as MiniNetworkError,
   i as MinisContainer,
   t as NAVIGATION_TYPES,
   p as ProductCard,
   c as ProductCardSkeleton,
   s as ProductLink,
-  re as Progress,
-  oe as RadioGroup,
-  te as RadioGroupItem,
-  ie as ResizableHandle,
-  le as ResizablePanel,
-  pe as ResizablePanelGroup,
-  se as ScrollArea,
-  ne as ScrollBar,
-  xe as Select,
-  fe as SelectContent,
-  ce as SelectGroup,
-  de as SelectItem,
-  ge as SelectLabel,
-  Se as SelectScrollDownButton,
-  De as SelectScrollUpButton,
-  Ae as SelectSeparator,
-  Ce as SelectTrigger,
-  Pe as SelectValue,
-  he as Separator,
-  we as Sheet,
-  ve as SheetClose,
-  Re as SheetContent,
-  be as SheetDescription,
-  Fe as SheetFooter,
-  ke as SheetHeader,
-  Be as SheetTitle,
-  Ee as SheetTrigger,
-  ye as Skeleton,
-  b as ThumbhashImage,
-  Ne as Toaster,
-  k as Touchable,
-  D as TransitionContainer,
-  C as TransitionLink,
-  y as VideoPlayer,
-  nr as badgeVariants,
-  at as extractBrandTheme,
-  ot as formatError,
-  it as formatReviewCount,
-  lt as getFeaturedImages,
-  pt as normalizeRating,
-  st as parseUrl,
-  wo as useAsyncStorage,
-  ro as useBuyerAttributes,
-  Mo as useCloseMini,
-  ho as useCuratedProducts,
-  Qe as useCurrentUser,
-  Lo as useDeeplink,
-  qo as useErrorScreen,
-  Wo as useErrorToast,
-  je as useFollowedShops,
-  Je as useFollowedShopsActions,
-  Xo as useImagePicker,
-  Fo as useImageUpload,
-  Go as useNavigateWithTransition,
-  Ze as useOrders,
-  Po as usePopularProducts,
-  mo as useProduct,
-  lo as useProductList,
-  oo as useProductListActions,
-  ao as useProductLists,
-  co as useProductMedia,
-  So as useProductSearch,
-  xo as useProductVariants,
-  no as useProducts,
-  He as useRecentProducts,
-  Ve as useRecentShops,
-  Ao as useRecommendedProducts,
-  _o as useRecommendedShops,
-  ze as useSavedProducts,
-  Ye as useSavedProductsActions,
-  Ro as useSecureStorage,
-  Ko as useShare,
-  Oo as useShop,
-  Uo as useShopCartActions,
-  Bo as useShopNavigation
+  oe as Progress,
+  D as QuantitySelector,
+  ae as RadioGroup,
+  ie as RadioGroupItem,
+  pe as ResizableHandle,
+  me as ResizablePanel,
+  se as ResizablePanelGroup,
+  ue as ScrollArea,
+  xe as ScrollBar,
+  ce as Select,
+  de as SelectContent,
+  ge as SelectGroup,
+  Se as SelectItem,
+  De as SelectLabel,
+  Ae as SelectScrollDownButton,
+  Ce as SelectScrollUpButton,
+  Pe as SelectSeparator,
+  Te as SelectTrigger,
+  he as SelectValue,
+  we as Separator,
+  Re as Sheet,
+  be as SheetClose,
+  Fe as SheetContent,
+  ke as SheetDescription,
+  Be as SheetFooter,
+  Ee as SheetHeader,
+  Me as SheetTitle,
+  Ne as SheetTrigger,
+  He as Skeleton,
+  k as ThumbhashImage,
+  Le as Toaster,
+  E as Touchable,
+  C as TransitionContainer,
+  T as TransitionLink,
+  H as VideoPlayer,
+  xr as badgeVariants,
+  lt as extractBrandTheme,
+  at as formatError,
+  pt as formatReviewCount,
+  mt as getFeaturedImages,
+  st as normalizeRating,
+  ut as parseUrl,
+  Ro as useAsyncStorage,
+  oo as useBuyerAttributes,
+  yo as useCloseMini,
+  wo as useCuratedProducts,
+  Ze as useCurrentUser,
+  Go as useDeeplink,
+  Jo as useErrorScreen,
+  jo as useErrorToast,
+  qe as useFollowedShops,
+  Ke as useFollowedShopsActions,
+  $o as useImagePicker,
+  Bo as useImageUpload,
+  Oo as useNavigateWithTransition,
+  ro as useOrders,
+  ho as usePopularProducts,
+  no as useProduct,
+  mo as useProductList,
+  ao as useProductListActions,
+  lo as useProductLists,
+  So as useProductMedia,
+  Ao as useProductSearch,
+  co as useProductVariants,
+  xo as useProducts,
+  Ve as useRecentProducts,
+  ze as useRecentShops,
+  Po as useRecommendedProducts,
+  Qo as useRecommendedShops,
+  Ye as useSavedProducts,
+  We as useSavedProductsActions,
+  Fo as useSecureStorage,
+  Xo as useShare,
+  Uo as useShop,
+  _o as useShopCartActions,
+  Mo as useShopNavigation
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/shop-minis-react/node_modules/.pnpm/@radix-ui_react-use-is-hydrated@0.1.0_@types_react@19.1.6_react@19.1.0/node_modules/@radix-ui/react-use-is-hydrated/dist/index.js

@@ -1,4 +1,4 @@
-import { s as r } from "../../../../../../../../_virtual/index6.js";
+import { s as r } from "../../../../../../../../_virtual/index7.js";
 function s() {
   return r.useSyncExternalStore(
     e,

package/dist/shop-minis-react/node_modules/.pnpm/@videojs_xhr@2.7.0/node_modules/@videojs/xhr/lib/index.js

@@ -1,4 +1,4 @@
-import { __module as q } from "../../../../../../../../_virtual/index4.js";
+import { __module as q } from "../../../../../../../../_virtual/index5.js";
 import { __require as F } from "../../../../../global@4.4.0/node_modules/global/window.js";
 import { __require as N } from "../../../../../@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/extends.js";
 import { __require as J } from "../../../../../is-function@1.0.2/node_modules/is-function/index.js";

package/dist/shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/minus.js

@@ -0,0 +1,13 @@
+import o from "../createLucideIcon.js";
+/**
+ * @license lucide-react v0.513.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const e = [["path", { d: "M5 12h14", key: "1ays0h" }]], c = o("minus", e);
+export {
+  e as __iconNode,
+  c as default
+};
+//# sourceMappingURL=minus.js.map

package/dist/shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/minus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"minus.js","sources":["../../../../../../../../../../node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/minus.js"],"sourcesContent":["/**\n * @license lucide-react v0.513.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [[\"path\", { d: \"M5 12h14\", key: \"1ays0h\" }]];\nconst Minus = createLucideIcon(\"minus\", __iconNode);\n\nexport { __iconNode, Minus as default };\n//# sourceMappingURL=minus.js.map\n"],"names":["__iconNode","Minus","createLucideIcon"],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASK,MAACA,IAAa,CAAC,CAAC,QAAQ,EAAE,GAAG,YAAY,KAAK,UAAU,CAAC,GACxDC,IAAQC,EAAiB,SAASF,CAAU;","x_google_ignoreList":[0]}

package/dist/shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/plus.js

@@ -0,0 +1,16 @@
+import e from "../createLucideIcon.js";
+/**
+ * @license lucide-react v0.513.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const o = [
+  ["path", { d: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "M12 5v14", key: "s699le" }]
+], s = e("plus", o);
+export {
+  o as __iconNode,
+  s as default
+};
+//# sourceMappingURL=plus.js.map

package/dist/shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/plus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plus.js","sources":["../../../../../../../../../../node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/plus.js"],"sourcesContent":["/**\n * @license lucide-react v0.513.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\"path\", { d: \"M5 12h14\", key: \"1ays0h\" }],\n  [\"path\", { d: \"M12 5v14\", key: \"s699le\" }]\n];\nconst Plus = createLucideIcon(\"plus\", __iconNode);\n\nexport { __iconNode, Plus as default };\n//# sourceMappingURL=plus.js.map\n"],"names":["__iconNode","Plus","createLucideIcon"],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASK,MAACA,IAAa;AAAA,EACjB,CAAC,QAAQ,EAAE,GAAG,YAAY,KAAK,SAAQ,CAAE;AAAA,EACzC,CAAC,QAAQ,EAAE,GAAG,YAAY,KAAK,SAAU,CAAA;AAC3C,GACMC,IAAOC,EAAiB,QAAQF,CAAU;","x_google_ignoreList":[0]}

package/dist/shop-minis-react/node_modules/.pnpm/mpd-parser@1.3.1/node_modules/mpd-parser/dist/mpd-parser.es.js

@@ -2,7 +2,7 @@ import L from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-ut
 import T from "../../../../../../../_virtual/window.js";
 import { forEachMediaGroup as Z } from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/media-groups.js";
 import J from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/decode-b64-to-uint8-array.js";
-import { l as Q } from "../../../../../../../_virtual/index5.js";
+import { l as Q } from "../../../../../../../_virtual/index6.js";
 /*! @name mpd-parser @version 1.3.1 @license Apache-2.0 */
 const w = (e) => !!e && typeof e == "object", E = (...e) => e.reduce((n, t) => (typeof t != "object" || Object.keys(t).forEach((r) => {
   Array.isArray(n[r]) && Array.isArray(t[r]) ? n[r] = n[r].concat(t[r]) : w(n[r]) && w(t[r]) ? n[r] = E(n[r], t[r]) : n[r] = t[r];

package/dist/shop-minis-react/node_modules/.pnpm/querystringify@2.2.0/node_modules/querystringify/index.js

@@ -1,4 +1,4 @@
-import { __exports as i } from "../../../../../../_virtual/index7.js";
+import { __exports as i } from "../../../../../../_virtual/index4.js";
 var c;
 function d() {
   if (c) return i;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "sideEffects": false,
   "type": "module",
   "engines": {

package/src/components/commerce/quantity-selector.tsx

@@ -0,0 +1,92 @@
+import {useCallback, useEffect, useState} from 'react'
+
+import {Minus, Plus} from 'lucide-react'
+
+import {cn} from '../../lib/utils'
+import {IconButton} from '../atoms/icon-button'
+
+interface QuantitySelectorProps {
+  quantity: number
+  onQuantityChange: (quantity: number) => void
+  maxQuantity: number
+  minQuantity?: number
+  disabled?: boolean
+}
+
+export const QuantitySelector = ({
+  quantity: _quantity,
+  onQuantityChange,
+  maxQuantity,
+  minQuantity = 1,
+  disabled = false,
+}: QuantitySelectorProps) => {
+  const [quantity, setQuantity] = useState(_quantity)
+
+  useEffect(() => {
+    setQuantity(_quantity)
+  }, [_quantity])
+
+  useEffect(() => {
+    onQuantityChange(quantity)
+  }, [quantity, onQuantityChange])
+
+  const incrementDisabled = disabled || quantity >= maxQuantity
+  const decrementDisabled = disabled || quantity <= minQuantity
+
+  const incrementQuantity = useCallback(() => {
+    if (incrementDisabled) return
+    const newQuantity = quantity + 1 > maxQuantity ? quantity : quantity + 1
+    setQuantity(newQuantity)
+  }, [incrementDisabled, quantity, maxQuantity])
+
+  const decrementQuantity = useCallback(() => {
+    if (decrementDisabled) return
+    const newQuantity = quantity - 1 < minQuantity ? quantity : quantity - 1
+    setQuantity(newQuantity)
+  }, [decrementDisabled, quantity, minQuantity])
+
+  return (
+    <>
+      <div
+        data-testid="QuantitySelector"
+        className={cn('inline-flex w-auto bg-tertiary rounded-[8px]')}
+      >
+        <div
+          className={cn(
+            'flex h-space-32 items-center self-center overflow-hidden rounded-radius-8 bg-bg-fill-secondary',
+            `p-space-8`
+          )}
+        >
+          <IconButton
+            Icon={Minus}
+            onClick={decrementQuantity}
+            buttonStyles="transition bg-transparent"
+            filled={false}
+            size="sm"
+            iconStyles={cn(
+              decrementDisabled ? 'text-background' : 'text-foreground',
+              'stroke-3'
+            )}
+          />
+
+          <div className={cn('grow', `w-[20px]`)}>
+            <span className="flex items-center justify-center w-full h-full font-medium text-[10px]">
+              {quantity}
+            </span>
+          </div>
+          <IconButton
+            Icon={Plus}
+            onClick={incrementQuantity}
+            buttonStyles="transition bg-transparent"
+            filled={false}
+            size="sm"
+            iconStyles={cn(
+              incrementDisabled ? 'text-background' : 'text-secondary',
+              'stroke-3'
+            )}
+          />
+        </div>
+      </div>
+    </>
+  )
+}

package/src/components/index.ts

@@ -5,6 +5,7 @@ export * from './commerce/product-link'
 export * from './commerce/merchant-card'
 export * from './commerce/product-card-skeleton'
 export * from './commerce/merchant-card-skeleton'
+export * from './commerce/quantity-selector'
 
 export * from './navigation/transition-container'
 export * from './navigation/transition-link'