@shopify/shop-minis-react
Version:
React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)
81 lines (80 loc) • 2.56 kB
JavaScript
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