@yamada-ui/loading
Version:
Yamada UI loading components
1,118 lines (1,107 loc) • 38.2 kB
JavaScript
"use client"
;
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);
// src/loading-provider.tsx
var loading_provider_exports = {};
__export(loading_provider_exports, {
LoadingProvider: () => LoadingProvider,
useLoading: () => useLoading
});
module.exports = __toCommonJS(loading_provider_exports);
var import_core9 = require("@yamada-ui/core");
var import_motion = require("@yamada-ui/motion");
var import_portal = require("@yamada-ui/portal");
var import_use_timeout = require("@yamada-ui/use-timeout");
var import_utils2 = require("@yamada-ui/utils");
var import_react2 = require("react");
var import_react_remove_scroll = require("react-remove-scroll");
// src/loading.tsx
var import_core8 = require("@yamada-ui/core");
var import_utils = require("@yamada-ui/utils");
var import_react = require("react");
// src/audio.tsx
var import_core = require("@yamada-ui/core");
var import_icon = require("@yamada-ui/icon");
var import_jsx_runtime = require("react/jsx-runtime");
var Audio = (0, import_core.forwardRef)(
({ color, duration = "1.4s", ...rest }, ref) => {
const dur = typeof duration === "string" ? parseFloat(duration) : duration;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { ref, fill: color, viewBox: "0 0 55 80", ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: "matrix(1 0 0 -1 0 80)", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { height: "20", rx: "3", width: "10", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"animate",
{
attributeName: "height",
begin: "0s",
calcMode: "linear",
dur: `${dur * 3}s`,
repeatCount: "indefinite",
values: "20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { height: "80", rx: "3", width: "10", x: "15", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"animate",
{
attributeName: "height",
begin: "0s",
calcMode: "linear",
dur: `${dur * 1.4}s`,
repeatCount: "indefinite",
values: "80;55;33;5;75;23;73;33;12;14;60;80"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { height: "50", rx: "3", width: "10", x: "30", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"animate",
{
attributeName: "height",
begin: "0s",
calcMode: "linear",
dur: `${dur}s`,
repeatCount: "indefinite",
values: "50;34;78;23;56;23;34;76;80;54;21;50"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { height: "30", rx: "3", width: "10", x: "45", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"animate",
{
attributeName: "height",
begin: "0s",
calcMode: "linear",
dur: `${dur * 1.4}s`,
repeatCount: "indefinite",
values: "30;45;13;80;56;72;45;76;34;23;67;30"
}
) })
] }) });
}
);
Audio.displayName = "Audio";
Audio.__ui__ = "Audio";
// src/circles.tsx
var import_core2 = require("@yamada-ui/core");
var import_icon2 = require("@yamada-ui/icon");
var import_jsx_runtime2 = require("react/jsx-runtime");
var Circles = (0, import_core2.forwardRef)(
({ color, duration = "3s", ...rest }, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icon2.Icon, { ref, stroke: color, viewBox: "0 0 58 58", ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { stroke: color, strokeWidth: "1.5", transform: "translate(2 1)", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_core2.ui.circle,
{
cx: "42.601",
cy: "11.462",
fill: color,
fillOpacity: "1",
r: "5",
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "1;0;0;0;0;0;0;0"
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_core2.ui.circle,
{
cx: "49.063",
cy: "27.063",
fill: color,
fillOpacity: "0",
r: "5",
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "0;1;0;0;0;0;0;0"
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_core2.ui.circle,
{
cx: "42.601",
cy: "42.663",
fill: color,
fillOpacity: "0",
r: "5",
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "0;0;1;0;0;0;0;0"
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.circle, { cx: "27", cy: "49.125", fill: color, fillOpacity: "0", r: "5", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "0;0;0;1;0;0;0;0"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_core2.ui.circle,
{
cx: "11.399",
cy: "42.663",
fill: color,
fillOpacity: "0",
r: "5",
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "0;0;0;0;1;0;0;0"
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_core2.ui.circle,
{
cx: "4.938",
cy: "27.063",
fill: color,
fillOpacity: "0",
r: "5",
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "0;0;0;0;0;1;0;0"
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_core2.ui.circle,
{
cx: "11.399",
cy: "11.462",
fill: color,
fillOpacity: "0",
r: "5",
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "0;0;0;0;0;0;1;0"
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.circle, { cx: "27", cy: "5", fill: color, fillOpacity: "0", r: "5", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "0;0;0;0;0;0;0;1"
}
) })
] }) }) });
}
);
Circles.displayName = "Circles";
Circles.__ui__ = "Circles";
// src/dots.tsx
var import_core3 = require("@yamada-ui/core");
var import_icon3 = require("@yamada-ui/icon");
var import_jsx_runtime3 = require("react/jsx-runtime");
var Dots = (0, import_core3.forwardRef)(
({ color, duration = "1s", ...rest }, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_icon3.Icon, { ref, fill: color, viewBox: "0 0 120 30", ...rest, children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("circle", { cx: "15", cy: "15", r: "15", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"animate",
{
attributeName: "r",
begin: "0s",
calcMode: "linear",
dur: duration,
from: "15",
repeatCount: "indefinite",
to: "15",
values: "15;9;15"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
from: "1",
repeatCount: "indefinite",
to: "1",
values: "1;.5;1"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("circle", { cx: "60", cy: "15", fillOpacity: "0.3", r: "9", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"animate",
{
attributeName: "r",
begin: "0s",
calcMode: "linear",
dur: duration,
from: "9",
repeatCount: "indefinite",
to: "9",
values: "9;15;9"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
from: "0.5",
repeatCount: "indefinite",
to: "0.5",
values: ".5;1;.5"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("circle", { cx: "105", cy: "15", r: "15", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"animate",
{
attributeName: "r",
begin: "0s",
calcMode: "linear",
dur: duration,
from: "15",
repeatCount: "indefinite",
to: "15",
values: "15;9;15"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
from: "1",
repeatCount: "indefinite",
to: "1",
values: "1;.5;1"
}
)
] })
] });
}
);
Dots.displayName = "Dots";
Dots.__ui__ = "Dots";
// src/grid.tsx
var import_core4 = require("@yamada-ui/core");
var import_icon4 = require("@yamada-ui/icon");
var import_jsx_runtime4 = require("react/jsx-runtime");
var Grid = (0, import_core4.forwardRef)(
({ color, duration = "1s", ...rest }, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_icon4.Icon, { ref, fill: color, viewBox: "0 0 105 105", ...rest, children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12.5", cy: "12.5", r: "12.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "1;.2;1"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12.5", cy: "52.5", fillOpacity: ".5", r: "12.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "100ms",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "1;.2;1"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "52.5", cy: "12.5", r: "12.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "300ms",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "1;.2;1"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "52.5", cy: "52.5", r: "12.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "600ms",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "1;.2;1"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "92.5", cy: "12.5", r: "12.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "800ms",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "1;.2;1"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "92.5", cy: "52.5", r: "12.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "400ms",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "1;.2;1"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12.5", cy: "92.5", r: "12.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "700ms",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "1;.2;1"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "52.5", cy: "92.5", r: "12.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "500ms",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "1;.2;1"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "92.5", cy: "92.5", r: "12.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "200ms",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "1;.2;1"
}
) })
] });
}
);
Grid.displayName = "Grid";
Grid.__ui__ = "Grid";
// src/oval.tsx
var import_core5 = require("@yamada-ui/core");
var import_icon5 = require("@yamada-ui/icon");
var import_jsx_runtime5 = require("react/jsx-runtime");
var Oval = (0, import_core5.forwardRef)(
({ color, duration = "1s", secondaryColor, ...rest }, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icon5.Icon, { ref, stroke: color, viewBox: "0 0 38 38", ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { strokeWidth: "2", transform: "translate(1 1)", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"circle",
{
...secondaryColor ? { stroke: secondaryColor } : { strokeOpacity: ".5" },
cx: "18",
cy: "18",
r: "18"
}
),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animateTransform",
{
type: "rotate",
attributeName: "transform",
dur: duration,
from: "0 18 18",
repeatCount: "indefinite",
to: "360 18 18"
}
) })
] }) }) });
}
);
Oval.displayName = "Oval";
Oval.__ui__ = "Oval";
// src/puff.tsx
var import_core6 = require("@yamada-ui/core");
var import_icon6 = require("@yamada-ui/icon");
var import_jsx_runtime6 = require("react/jsx-runtime");
var Puff = (0, import_core6.forwardRef)(
({ color, duration = "1.8s", ...rest }, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icon6.Icon, { ref, stroke: color, viewBox: "0 0 44 44", ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { fill: "none", fillRule: "evenodd", strokeWidth: "2", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("circle", { cx: "22", cy: "22", r: "1", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"animate",
{
attributeName: "r",
begin: "0s",
calcMode: "spline",
dur: duration,
keySplines: "0.165, 0.84, 0.44, 1",
keyTimes: "0; 1",
repeatCount: "indefinite",
values: "1; 20"
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"animate",
{
attributeName: "stroke-opacity",
begin: "0s",
calcMode: "spline",
dur: duration,
keySplines: "0.3, 0.61, 0.355, 1",
keyTimes: "0; 1",
repeatCount: "indefinite",
values: "1; 0"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("circle", { cx: "22", cy: "22", r: "1", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"animate",
{
attributeName: "r",
begin: "-0.9s",
calcMode: "spline",
dur: duration,
keySplines: "0.165, 0.84, 0.44, 1",
keyTimes: "0; 1",
repeatCount: "indefinite",
values: "1; 20"
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"animate",
{
attributeName: "stroke-opacity",
begin: "-0.9s",
calcMode: "spline",
dur: duration,
keySplines: "0.3, 0.61, 0.355, 1",
keyTimes: "0; 1",
repeatCount: "indefinite",
values: "1; 0"
}
)
] })
] }) });
}
);
Puff.displayName = "Puff";
Puff.__ui__ = "Puff";
// src/rings.tsx
var import_core7 = require("@yamada-ui/core");
var import_icon7 = require("@yamada-ui/icon");
var import_jsx_runtime7 = require("react/jsx-runtime");
var Rings = (0, import_core7.forwardRef)(
({ color, duration = "3s", ...rest }, ref) => {
const dur = typeof duration === "string" ? parseFloat(duration) : duration;
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icon7.Icon, { ref, stroke: color, viewBox: "0 0 45 45", ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
"g",
{
fill: "none",
fillRule: "evenodd",
strokeWidth: "2",
transform: "translate(1 1)",
children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("circle", { cx: "22", cy: "22", r: "6", strokeOpacity: "0", children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"animate",
{
attributeName: "r",
begin: "1.5s",
calcMode: "linear",
dur: `${dur}s`,
repeatCount: "indefinite",
values: "6;22"
}
),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"animate",
{
attributeName: "stroke-opacity",
begin: "1.5s",
calcMode: "linear",
dur: `${dur}s`,
repeatCount: "indefinite",
values: "1;0"
}
),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"animate",
{
attributeName: "stroke-width",
begin: "1.5s",
calcMode: "linear",
dur: `${dur}s`,
repeatCount: "indefinite",
values: "2;0"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("circle", { cx: "22", cy: "22", r: "6", strokeOpacity: "0", children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"animate",
{
attributeName: "r",
begin: "3s",
calcMode: "linear",
dur: `${dur}s`,
repeatCount: "indefinite",
values: "6;22"
}
),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"animate",
{
attributeName: "stroke-opacity",
begin: "3s",
calcMode: "linear",
dur: `${dur}s`,
repeatCount: "indefinite",
values: "1;0"
}
),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"animate",
{
attributeName: "stroke-width",
begin: "3s",
calcMode: "linear",
dur: `${dur}s`,
repeatCount: "indefinite",
values: "2;0"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "22", cy: "22", r: "8", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"animate",
{
attributeName: "r",
begin: "0s",
calcMode: "linear",
dur: `${dur / 2}s`,
repeatCount: "indefinite",
values: "6;1;2;3;4;5;6"
}
) })
]
}
) });
}
);
Rings.displayName = "Rings";
Rings.__ui__ = "Rings";
// src/loading.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
var Loading = (0, import_core8.forwardRef)((props, ref) => {
const [
{ color, ...styles },
{ colorScheme, size = "1em", variant = "oval", ...mergedProps }
] = (0, import_core8.useComponentStyle)("Loading", props);
const {
className,
color: colorProp,
dur,
duration,
secondaryColor,
...rest
} = (0, import_core8.omitThemeProps)(mergedProps);
const computedProps = (0, import_react.useMemo)(
() => {
var _a;
return {
className: (0, import_utils.cx)("ui-loading", className),
size,
color: "$color",
...secondaryColor ? { secondaryColor: "$secondary-color" } : {},
duration: duration != null ? duration : dur,
__css: {
...styles,
vars: (0, import_core8.mergeVars)(styles.vars, [
{
name: "color",
token: "colors",
value: (_a = colorProp != null ? colorProp : color) != null ? _a : `${colorScheme}.500`
},
{
name: "secondary-color",
token: "colors",
value: secondaryColor
}
])
},
...rest
};
},
[
className,
size,
secondaryColor,
duration,
dur,
styles,
colorProp,
color,
colorScheme,
rest
]
);
switch (variant) {
case "grid":
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Grid, { ref, ...computedProps });
case "audio":
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Audio, { ref, ...computedProps });
case "dots":
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Dots, { ref, ...computedProps });
case "puff":
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Puff, { ref, ...computedProps });
case "rings":
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Rings, { ref, ...computedProps });
case "circles":
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Circles, { ref, ...computedProps });
default:
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Oval, { ref, ...computedProps });
}
});
Loading.displayName = "Loading";
Loading.__ui__ = "Loading";
// src/loading-provider.tsx
var import_jsx_runtime9 = require("react/jsx-runtime");
var LoadingContext = (0, import_react2.createContext)({});
var createLoadingRefs = () => ({
finish: (0, import_react2.createRef)(),
force: (0, import_react2.createRef)(),
isLoading: (0, import_react2.createRef)(),
start: (0, import_react2.createRef)(),
update: (0, import_react2.createRef)()
});
var createLoadingFunc = (refs) => ({
finish: () => {
var _a, _b;
return (_b = (_a = refs.current.finish).current) == null ? void 0 : _b.call(_a);
},
force: (state) => {
var _a, _b;
return (_b = (_a = refs.current.force).current) == null ? void 0 : _b.call(_a, state);
},
isLoading: () => {
var _a, _b, _c;
return (_c = (_b = (_a = refs.current.isLoading).current) == null ? void 0 : _b.call(_a)) != null ? _c : false;
},
start: (props) => {
var _a, _b;
return (_b = (_a = refs.current.start).current) == null ? void 0 : _b.call(_a, props);
},
update: (props) => {
var _a, _b;
return (_b = (_a = refs.current.update).current) == null ? void 0 : _b.call(_a, props);
}
});
var incrementCount = (prev) => prev + 1;
var decrementCount = (prev) => prev === 0 ? prev : prev - 1;
var LoadingProvider = ({
background,
children,
custom,
page,
screen
}) => {
var _a, _b, _c, _d, _e;
const screenRefs = (0, import_react2.useRef)(createLoadingRefs());
const pageRefs = (0, import_react2.useRef)(createLoadingRefs());
const backgroundRefs = (0, import_react2.useRef)(createLoadingRefs());
const customRefs = (0, import_react2.useRef)(createLoadingRefs());
const screenLoadingFunc = createLoadingFunc(screenRefs);
const pageLoadingFunc = createLoadingFunc(pageRefs);
const backgroundLoadingFunc = createLoadingFunc(backgroundRefs);
const customLoadingFunc = createLoadingFunc(customRefs);
const value = {
background: backgroundLoadingFunc,
custom: customLoadingFunc,
page: pageLoadingFunc,
screen: screenLoadingFunc
};
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(LoadingContext.Provider, { value, children: [
children,
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Controller,
{
controlRefs: screenRefs,
...screen,
component: (_a = screen == null ? void 0 : screen.component) != null ? _a : (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ScreenComponent, { ref, ...props })
}
),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Controller,
{
controlRefs: pageRefs,
...page,
component: (_b = page == null ? void 0 : page.component) != null ? _b : (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PageComponent, { ref, ...props })
}
),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Controller,
{
controlRefs: backgroundRefs,
...background,
blockScrollOnMount: (_c = background == null ? void 0 : background.blockScrollOnMount) != null ? _c : false,
component: (_d = background == null ? void 0 : background.component) != null ? _d : (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(BackgroundComponent, { ref, ...props })
}
),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Controller,
{
blockScrollOnMount: (_e = background == null ? void 0 : background.blockScrollOnMount) != null ? _e : false,
controlRefs: customRefs,
...custom,
component: custom == null ? void 0 : custom.component
}
)
] });
};
LoadingProvider.__ui__ = "LoadingProvider";
var Controller = ({
allowPinchZoom = false,
appendToParentPortal,
blockScrollOnMount = true,
component,
containerRef,
controlRefs,
duration: durationProps = null,
icon,
initialState,
text
}) => {
const isLoadingRef = (0, import_react2.useRef)(false);
const [{ duration, loadingCount, message }, setState] = (0, import_react2.useState)({
duration: durationProps,
loadingCount: initialState ? 1 : 0,
message: void 0
});
const { finish, force, isLoading, start, update } = (0, import_react2.useMemo)(
() => ({
finish: () => {
isLoadingRef.current = false;
setState(({ loadingCount: loadingCount2 }) => ({
duration: durationProps,
loadingCount: decrementCount(loadingCount2),
message: void 0
}));
},
force: ({ duration: duration2 = durationProps, loadingCount: loadingCount2 = 0, message: message2 }) => {
isLoadingRef.current = !!loadingCount2;
setState({
duration: duration2,
loadingCount: loadingCount2,
message: message2
});
},
isLoading: () => isLoadingRef.current,
start: ({ duration: duration2 = durationProps, message: message2 } = {}) => {
isLoadingRef.current = true;
setState(({ loadingCount: loadingCount2 }) => ({
duration: duration2,
loadingCount: incrementCount(loadingCount2),
message: message2
}));
},
update: (next) => setState((prev) => ({ ...prev, ...next }))
}),
[durationProps]
);
(0, import_utils2.assignRef)(controlRefs.current.isLoading, isLoading);
(0, import_utils2.assignRef)(controlRefs.current.start, start);
(0, import_utils2.assignRef)(controlRefs.current.finish, finish);
(0, import_utils2.assignRef)(controlRefs.current.update, update);
(0, import_utils2.assignRef)(controlRefs.current.force, force);
const props = {
duration,
icon,
initialState,
message,
text,
onFinish: finish
};
(0, import_utils2.useUpdateEffect)(() => {
if (initialState || (0, import_utils2.isNumber)(durationProps))
setState({
duration: durationProps,
loadingCount: initialState ? 1 : 0,
message: void 0
});
}, [initialState, durationProps]);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_motion.AnimatePresence, { initial: false, children: loadingCount ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
import_portal.Portal,
{
appendToParentPortal,
containerRef,
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
import_react_remove_scroll.RemoveScroll,
{
allowPinchZoom,
enabled: blockScrollOnMount,
forwardProps: true,
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Render, { component, ...props })
}
)
}
) : null });
};
Controller.__ui__ = "Controller";
var Render = (0, import_core9.forwardRef)(
({ component, ...props }, ref) => {
if (typeof component === "function") {
return component(props, ref);
} else {
return null;
}
}
);
Render.displayName = "Render";
Render.__ui__ = "Render";
var Message = ({ message, ...rest }) => {
return message ? (0, import_utils2.isValidElement)(message) ? message : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.ui.p, { ...rest, children: message }) : null;
};
var getVariants = (type = "fade") => ({
animate: {
opacity: 1,
scale: type === "scaleFade" ? 1 : void 0,
transition: {
duration: 0.4,
ease: [0.4, 0, 0.2, 1]
}
},
exit: {
opacity: 0,
scale: type === "scaleFade" ? 0.95 : void 0,
transition: {
duration: 0.4,
ease: [0.4, 0, 1, 1]
}
},
initial: {
opacity: 0,
scale: type === "scaleFade" ? 0.95 : void 0
}
});
var getOverlayStyle = (type = "fill") => ({
alignItems: "center",
bg: type === "fill" ? ["fallback(white, #fbfbfb)", "fallback(black, #141414)"] : "fallback(blackAlpha.600, rgba(0, 0, 0, 0.48))",
bottom: 0,
display: "flex",
h: "100dvh",
justifyContent: "center",
left: 0,
p: "fallback(4, 1rem)",
position: "fixed",
right: 0,
top: 0,
w: "100vw",
zIndex: "fallback(beerus, 9999)"
});
var getMotionProps = (initialState, type = "fade") => ({
animate: "animate",
exit: "exit",
initial: initialState ? false : "initial",
variants: getVariants(type)
});
var ScreenComponent = (0, import_core9.memo)(
(0, import_core9.forwardRef)(
({ duration, icon, initialState, message, text, onFinish }, ref) => {
const css = {
alignItems: "center",
display: "flex",
flexDirection: "column",
gap: "fallback(2, 0.5rem)",
justifyContent: "center",
maxW: "24rem"
};
(0, import_use_timeout.useTimeout)(onFinish, duration);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
import_motion.motion.div,
{
ref,
className: "ui-loading-screen",
...getMotionProps(initialState),
__css: getOverlayStyle(),
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.ui.div, { __css: css, children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Loading, { fontSize: "6xl", ...icon }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Message, { lineClamp: 3, message, ...text })
] })
}
);
}
)
);
ScreenComponent.displayName = "ScreenComponent";
ScreenComponent.__ui__ = "ScreenComponent";
var PageComponent = (0, import_core9.memo)(
(0, import_core9.forwardRef)(
({ duration, icon, initialState, message, text, onFinish }, ref) => {
const css = {
alignItems: "center",
bg: ["fallback(white, #fbfbfb)", "fallback(black, #141414)"],
boxShadow: [
"fallback(lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05))",
"fallback(dark-lg, 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 5px 10px rgba(0, 0, 0, 0.2), 0px 15px 40px rgba(0, 0, 0, 0.4))"
],
display: "flex",
flexDirection: "column",
gap: "fallback(2, 0.5rem)",
justifyContent: "center",
maxW: "24rem",
p: "fallback(4, 1rem)",
rounded: "fallback(md, 0.375rem)"
};
(0, import_use_timeout.useTimeout)(onFinish, duration);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
import_motion.motion.div,
{
ref,
className: "ui-loading-page",
...getMotionProps(initialState),
__css: getOverlayStyle("transparent"),
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
import_motion.motion.div,
{
className: "ui-loading-page__inner",
...getMotionProps(initialState, "scaleFade"),
__css: css,
children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Loading, { fontSize: "6xl", ...icon }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Message, { lineClamp: 3, message, ...text })
]
}
)
}
);
}
)
);
PageComponent.displayName = "PageComponent";
PageComponent.__ui__ = "PageComponent";
var BackgroundComponent = (0, import_core9.memo)(
(0, import_core9.forwardRef)(
({ duration, icon, initialState, message, text, onFinish }, ref) => {
const css = {
alignItems: "center",
bg: ["fallback(white, #fbfbfb)", "fallback(black, #141414)"],
bottom: "fallback(4, 1rem)",
boxShadow: [
"fallback(3xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 -25px 50px -12px rgba(0, 0, 0, 0.25))",
"fallback(dark-lg, 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 5px 10px rgba(0, 0, 0, 0.2), 0px 15px 40px rgba(0, 0, 0, 0.4))"
],
display: "flex",
gap: "fallback(2, 0.5rem)",
justifyContent: "center",
maxW: "20rem",
p: "fallback(2, 0.5rem)",
position: "fixed",
right: "fallback(4, 1rem)",
rounded: "fallback(md, 0.375rem)",
zIndex: "fallback(beerus, 9999)"
};
(0, import_use_timeout.useTimeout)(onFinish, duration);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
import_motion.motion.div,
{
ref,
className: "ui-loading-background",
...getMotionProps(initialState, "scaleFade"),
__css: css,
children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Loading, { fontSize: "xl", ...icon }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Message, { fontSize: "sm", lineClamp: 1, message, ...text })
]
}
);
}
)
);
BackgroundComponent.displayName = "BackgroundComponent";
BackgroundComponent.__ui__ = "BackgroundComponent";
var useLoading = () => {
const { background, custom, page, screen } = (0, import_react2.useContext)(LoadingContext);
const context = (0, import_react2.useMemo)(
() => ({ background, custom, page, screen }),
[background, custom, page, screen]
);
return context;
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
LoadingProvider,
useLoading
});
//# sourceMappingURL=loading-provider.js.map