@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
132 lines (128 loc) • 2.67 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_icon = require('../icon/icon.cjs');
const require_loading = require('./loading.cjs');
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
//#region src/components/loading/audio.tsx
/**
* `Loading` is a component displayed during waiting times, such as when data is being loaded.
*
* @see https://yamada-ui.com/docs/components/feedback/loading
*/
const Audio = require_loading.withContext(({ dur = "1.4s",...rest }) => {
dur = (0, require_utils_index.utils_exports.isString)(dur) ? parseFloat(dur) : dur;
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon.Icon, {
fill: "currentColor",
viewBox: "0 0 55 80",
...rest,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
transform: "matrix(1 0 0 -1 0 80)",
children: [
{
factor: 3,
values: [
20,
45,
57,
80,
64,
32,
66,
45,
64,
23,
66,
13,
64,
56,
34,
34,
2,
23,
76,
79,
20
],
x: "0px"
},
{
factor: 1.4,
values: [
80,
55,
33,
5,
75,
23,
73,
33,
12,
14,
60,
80
],
x: "15px"
},
{
factor: 1,
values: [
50,
34,
78,
23,
56,
23,
34,
76,
80,
54,
21,
50
],
x: "30px"
},
{
factor: 1.4,
values: [
30,
45,
13,
80,
56,
72,
45,
76,
34,
23,
67,
30
],
x: "45px"
}
].map(({ factor, values,...props }, index) => {
const length = values.length;
const keyframes = values.reduce((acc, value, index$1) => {
const percent = `${Math.round(index$1 / (length - 1) * 100)}%`;
acc[percent] = { transform: `scaleY(${value / 80})` };
return acc;
}, {});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.rect, {
...props,
animationDuration: `${dur * factor}s`,
animationIterationCount: "infinite",
animationTimingFunction: "linear",
h: "80px",
rx: "3px",
w: "10px",
_keyframes: keyframes
}, index);
})
})
});
})(require_loading.initialProps, require_loading.superProps);
//#endregion
exports.Audio = Audio;
//# sourceMappingURL=audio.cjs.map