@propeller-commerce/propeller-v2-react-ui 0.4.6 → 0.4.7

package/dist/index.js

@@ -4004,8 +4004,8 @@ function AddToCart(rawProps) {
       className: `propeller-add-to-cart ${props.className || ""}`,
       "data-loading": loading ? "true" : "false",
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "propeller-add-to-cart__controls flex items-center gap-2 w-full", children: [
-          props.allowIncrDecr !== false ? /* @__PURE__ */ jsxs("div", { className: "propeller-add-to-cart__stepper flex items-center border border-input rounded-control bg-card h-10", children: [
+        /* @__PURE__ */ jsxs("div", { className: "propeller-add-to-cart__controls flex flex-wrap items-center gap-2 w-full md:flex-nowrap", children: [
+          props.allowIncrDecr !== false ? /* @__PURE__ */ jsxs("div", { className: "propeller-add-to-cart__stepper flex items-center border border-input rounded-control bg-card h-10 w-full md:w-auto", children: [
             /* @__PURE__ */ jsxs(
               "button",
               {
@@ -4024,7 +4024,7 @@ function AddToCart(rawProps) {
               "input",
               {
                 type: "number",
-                className: "propeller-add-to-cart__quantity w-12 text-center text-sm bg-transparent border-none focus:ring-0 focus:outline-none h-full [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+                className: "propeller-add-to-cart__quantity flex-1 md:flex-none md:w-12 text-center text-sm bg-transparent border-none focus:ring-0 focus:outline-none h-full [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
                 min: getMinQuantity(props.product),
                 step: getStep(props.product),
                 value: quantity,
@@ -4057,7 +4057,7 @@ function AddToCart(rawProps) {
             "input",
             {
               type: "number",
-              className: "propeller-add-to-cart__quantity w-16 h-10 text-center text-sm border border-input rounded-control focus:ring-2 focus:ring-secondary focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+              className: "propeller-add-to-cart__quantity w-full md:w-16 h-10 text-center text-sm border border-input rounded-control focus:ring-2 focus:ring-secondary focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
               min: getMinQuantity(props.product),
               step: getStep(props.product),
               value: quantity,
@@ -4075,10 +4075,28 @@ function AddToCart(rawProps) {
             "button",
             {
               type: "button",
-              className: "propeller-add-to-cart__submit flex-1 inline-flex justify-center items-center h-10 px-6 border border-transparent text-sm font-medium rounded-control text-secondary-foreground bg-secondary hover:bg-secondary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+              className: "propeller-add-to-cart__submit flex-1 basis-full md:basis-auto inline-flex justify-center items-center gap-2 h-10 px-6 border border-transparent text-sm font-medium rounded-control text-secondary-foreground bg-secondary hover:bg-secondary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
               onClick: () => handleAddToCart(),
               disabled: loading,
               children: [
+                /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    className: "propeller-add-to-cart__icon w-[1.1em] h-[1.1em] flex-shrink-0",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    "aria-hidden": "true",
+                    children: [
+                      /* @__PURE__ */ jsx("circle", { cx: "8", cy: "21", r: "1" }),
+                      /* @__PURE__ */ jsx("circle", { cx: "19", cy: "21", r: "1" }),
+                      /* @__PURE__ */ jsx("path", { d: "M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" })
+                    ]
+                  }
+                ),
                 loading ? /* @__PURE__ */ jsx(Fragment, { children: getLabel(props.labels, "adding", "Adding...") }) : null,
                 !loading ? /* @__PURE__ */ jsx(Fragment, { children: getLabel(props.labels, "add", "Add") }) : null
               ]
@@ -13242,22 +13260,28 @@ function ProductCardRoot(rawProps) {
             props.showManufacturer && manufacturer ? /* @__PURE__ */ jsx(ProductCardManufacturer, {}) : null,
             props.showShortDescription && shortDescription ? /* @__PURE__ */ jsx(ProductCardShortDescription, {}) : null
           ] }) }),
-          /* @__PURE__ */ jsxs("div", { className: "propeller-product-card__footer w-full md:w-auto flex items-center gap-3 px-4 py-2 md:py-0 border-t md:border-t-0 border-border-subtle", children: [
-            props.showStock && !!product.inventory ? /* @__PURE__ */ jsx(ProductCardStock, {}) : null,
-            props.showPrice !== false && !!product?.price ? /* @__PURE__ */ jsx(ProductCardPrice, { priceSize: "text-sm" }) : null,
-            props.allowAddToCart !== false ? /* @__PURE__ */ jsx("div", { className: "propeller-product-card__cta flex-shrink-0 ml-auto", children: /* @__PURE__ */ jsx(ProductCardAddToCart, {}) }) : null
+          /* @__PURE__ */ jsxs("div", { className: "propeller-product-card__footer w-full md:w-auto flex flex-col gap-2 md:flex-row md:items-center md:gap-3 px-4 py-2 md:py-0 border-t md:border-t-0 border-border-subtle", children: [
+            /* @__PURE__ */ jsxs("div", { className: "propeller-product-card__footer-meta flex items-center justify-between gap-3 md:contents", children: [
+              props.showStock && !!product.inventory ? /* @__PURE__ */ jsx(ProductCardStock, {}) : null,
+              props.showPrice !== false && !!product?.price ? /* @__PURE__ */ jsx(ProductCardPrice, { priceSize: "text-sm" }) : null
+            ] }),
+            props.allowAddToCart !== false ? /* @__PURE__ */ jsx("div", { className: "propeller-product-card__cta w-full md:w-auto md:flex-shrink-0 md:ml-auto", children: /* @__PURE__ */ jsx(ProductCardAddToCart, {}) }) : null
           ] })
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs("div", { className: "propeller-product-card__body flex flex-1 flex-col gap-1.5 p-3 sm:gap-2 sm:p-4", children: [
             props.showSku !== false && sku ? /* @__PURE__ */ jsx(ProductCardSku, {}) : null,
             props.showName !== false ? /* @__PURE__ */ jsx(ProductCardName, { linkable: true }) : null,
             textLabelValues.length > 0 ? /* @__PURE__ */ jsx(ProductCardTextLabels, {}) : null,
-            props.showStock && !!product.inventory ? /* @__PURE__ */ jsx(ProductCardStock, {}) : null,
+            props.showStock && !!product.inventory ? /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx(ProductCardStock, {}) }) : null,
             props.showManufacturer && manufacturer ? /* @__PURE__ */ jsx(ProductCardManufacturer, {}) : null,
             props.showShortDescription && shortDescription ? /* @__PURE__ */ jsx(ProductCardShortDescription, {}) : null,
-            props.showPrice !== false && !!product?.price ? /* @__PURE__ */ jsx("div", { className: "propeller-product-card__price mt-auto pt-1", children: /* @__PURE__ */ jsx(ProductCardPrice, { priceSize: "text-base sm:text-lg" }) }) : null
+            props.showPrice !== false && !!product?.price ? /* @__PURE__ */ jsx("div", { className: "propeller-product-card__price mt-auto pt-1 hidden md:block", children: /* @__PURE__ */ jsx(ProductCardPrice, { priceSize: "text-base sm:text-lg" }) }) : null
           ] }),
-          props.allowAddToCart !== false ? /* @__PURE__ */ jsx("div", { className: "propeller-product-card__cta px-3 pb-3 sm:px-4 sm:pb-4", children: /* @__PURE__ */ jsx(ProductCardAddToCart, {}) }) : null
+          props.showStock && !!product.inventory || props.showPrice !== false && !!product?.price ? /* @__PURE__ */ jsxs("div", { className: "propeller-product-card__footer-meta flex items-center justify-between gap-2 px-3 pt-1 sm:px-4 md:hidden", children: [
+            props.showStock && !!product.inventory ? /* @__PURE__ */ jsx(ProductCardStock, {}) : null,
+            props.showPrice !== false && !!product?.price ? /* @__PURE__ */ jsx(ProductCardPrice, { priceSize: "text-base" }) : null
+          ] }) : null,
+          props.allowAddToCart !== false ? /* @__PURE__ */ jsx("div", { className: "propeller-product-card__cta px-3 pb-3 pt-2 sm:px-4 sm:pb-4", children: /* @__PURE__ */ jsx(ProductCardAddToCart, {}) }) : null
         ] })
       ]
     }