@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
59 lines (55 loc) • 2.18 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_var = require('../../core/system/var.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/oval.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 Oval = require_loading.withContext(({ dur = "1s", secondaryColor,...rest }) => {
dur = (0, require_utils_index.utils_exports.isString)(dur) ? parseFloat(dur) : dur;
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon.Icon, {
stroke: "currentColor",
viewBox: "0 0 38 38",
...rest,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
fill: "none",
fillRule: "evenodd",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
strokeWidth: "2",
transform: "translate(1 1)",
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.circle, {
...secondaryColor ? { stroke: "{secondary-color}" } : { strokeOpacity: ".5" },
cx: "18px",
cy: "18px",
r: "18px"
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.path, {
animationDuration: `${dur}s`,
animationIterationCount: "infinite",
animationName: "spin",
animationTimingFunction: "linear",
asChild: true,
transformOrigin: "18px 18px",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M36 18c0-9.94-8.06-18-18-18" })
})]
})
})
});
})(require_loading.initialProps, ({ secondaryColor,...props }) => {
const rest = require_loading.superProps(props);
return {
"--secondary-color": require_var.varAttr(secondaryColor, "colors"),
secondaryColor,
...rest
};
});
//#endregion
exports.Oval = Oval;
//# sourceMappingURL=oval.cjs.map