@chakra-ui/progress
Version:
Progress bar component for Chakra UI
102 lines (101 loc) • 2.77 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/progress.utils.tsx
var progress_utils_exports = {};
__export(progress_utils_exports, {
getProgressProps: () => getProgressProps,
progress: () => progress,
rotate: () => rotate,
spin: () => spin,
stripe: () => stripe
});
module.exports = __toCommonJS(progress_utils_exports);
var import_system = require("@chakra-ui/system");
function valueToPercent(value, min, max) {
return (value - min) * 100 / (max - min);
}
var spin = (0, import_system.keyframes)({
"0%": {
strokeDasharray: "1, 400",
strokeDashoffset: "0"
},
"50%": {
strokeDasharray: "400, 400",
strokeDashoffset: "-100"
},
"100%": {
strokeDasharray: "400, 400",
strokeDashoffset: "-260"
}
});
var rotate = (0, import_system.keyframes)({
"0%": {
transform: "rotate(0deg)"
},
"100%": {
transform: "rotate(360deg)"
}
});
var progress = (0, import_system.keyframes)({
"0%": { left: "-40%" },
"100%": { left: "100%" }
});
var stripe = (0, import_system.keyframes)({
from: { backgroundPosition: "1rem 0" },
to: { backgroundPosition: "0 0" }
});
function getProgressProps(options) {
const {
value = 0,
min,
max,
valueText,
getValueText,
isIndeterminate,
role = "progressbar"
} = options;
const percent = valueToPercent(value, min, max);
const getAriaValueText = () => {
if (value == null)
return void 0;
return typeof getValueText === "function" ? getValueText(value, percent) : valueText;
};
return {
bind: {
"data-indeterminate": isIndeterminate ? "" : void 0,
"aria-valuemax": max,
"aria-valuemin": min,
"aria-valuenow": isIndeterminate ? void 0 : value,
"aria-valuetext": getAriaValueText(),
role
},
percent,
value
};
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
getProgressProps,
progress,
rotate,
spin,
stripe
});
//# sourceMappingURL=progress.utils.js.map