@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
107 lines (106 loc) • 2.15 kB
TypeScript
import { ComponentSlotStyle } from "../../core/system/index.types.js";
import "../../index.js";
//#region src/components/progress/progress.style.d.ts
declare const progressStyle: ComponentSlotStyle<"range" | "root", {
/**
* If `true`, the progress bar will animate.
*
* @default false
*/
animated: {
true: {
range: {
"--animation-from": "{stripe-size}";
animationDuration: "{duration, 1s}";
animationIterationCount: "infinite";
animationName: "bg-position";
animationTimingFunction: "linear";
};
};
};
/**
* The shape of the progress bar.
*
* @default 'rounded'
*/
shape: {
circle: {
root: {
rounded: "full";
};
};
rounded: {
root: {
rounded: "l1";
};
};
square: {
root: {
rounded: "0";
};
};
};
/**
* If `true`, the progress bar will show stripe.
*
* @default false
*/
striped: {
true: {
range: {
"--stripe-angle": "45deg";
"--stripe-color": ["rgba(255, 255, 255, 0.3)", "rgba(0, 0, 0, 0.3)"];
"--stripe-size": "1rem";
bgImage: "linear-gradient(\n {stripe-angle},\n {stripe-color} 25%,\n transparent 25%,\n transparent 50%,\n {stripe-color} 50%,\n {stripe-color} 75%,\n transparent 75%,\n transparent\n )";
bgSize: "{stripe-size} {stripe-size}";
};
};
};
}, {
xs: {
root: {
h: "1";
};
};
sm: {
root: {
h: "2";
};
};
md: {
root: {
h: "3";
};
};
lg: {
root: {
h: "4";
};
};
xl: {
root: {
h: "5";
};
};
}, {
outline: {
range: {
bg: "colorScheme.solid";
};
root: {
bg: "bg.subtle";
};
};
subtle: {
range: {
bg: "colorScheme.solid/80";
};
root: {
bg: ["colorScheme.muted", "colorScheme.subtle"];
};
};
}>;
type ProgressStyle = typeof progressStyle;
//#endregion
export { ProgressStyle, progressStyle };
//# sourceMappingURL=progress.style.d.ts.map