@shopify/shop-minis-react
Version:
React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)
84 lines (83 loc) • 2.86 kB
JavaScript
import { jsx as r } from "react/jsx-runtime";
import { forwardRef as x, useState as y, useEffect as h } from "react";
import { cn as o } from "../../lib/utils.js";
const b = x(({ pullDistance: l, threshold: i, isRefreshing: t, canRefresh: n, className: m }, c) => {
const [a, s] = y(!1), e = Math.min(l / i, 1), p = 0.54 + e * (1 - 0.54), u = t ? 1 : 0.5 + e * 0.5, d = t ? 1 : Math.min(e * 1.5, 1), f = t ? 0 : e * 3;
return h(() => {
if (t && !a) {
s(!0);
const w = setTimeout(() => s(!1), 360);
return () => clearTimeout(w);
}
}, [t, a]), /* @__PURE__ */ r(
"div",
{
ref: c,
className: o(
"flex items-center justify-center w-full h-full",
"transition-all duration-200 ease-out",
m
),
style: {
transform: `translateY(${f}px)`
},
children: /* @__PURE__ */ r(
"div",
{
className: o(
"flex flex-col items-center space-y-2 rounded-full px-4 py-2 backdrop-blur-sm transition-all duration-200",
n || t ? "bg-primary/20 border-2 border-primary/40" : "bg-background/90"
),
style: {
opacity: d,
transform: `scale(${u})`
},
children: /* @__PURE__ */ r(
"div",
{
className: o(
"h-8 w-8 transition-all duration-200",
a && "animate-bump"
),
children: /* @__PURE__ */ r(
"svg",
{
viewBox: "0 0 52 58",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
className: o(
"h-full w-full transition-colors duration-200",
n || t ? "text-primary" : "text-muted-foreground"
),
children: /* @__PURE__ */ r(
"path",
{
className: o(
"shop-spinner-path",
!t && "shop-spinner-progress",
t && "animate-shop-spin"
),
d: "M3 13C5 11.75 10.4968 6.92307 21.5 6.4999C34.5 5.99993 42 13 45 23C48.3 34 42.9211 48.1335 30.5 51C17.5 54 6.6 46 6 37C5.46667 29 10.5 25 14 23",
stroke: "currentColor",
strokeWidth: "8",
strokeLinecap: "square",
strokeLinejoin: "miter",
style: {
"--spinner-progress": t ? "1" : p
}
}
)
}
)
}
)
}
)
}
);
});
b.displayName = "RefreshIndicator";
export {
b as RefreshIndicator
};
//# sourceMappingURL=refresh-indicator.js.map