@yamada-ui/react/dist/types/components/progress/progress.d.ts

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { ComponentSlotStyle, ThemeProps, WithoutThemeProps } from "../../core/system/index.types.js";
import { CSSProps } from "../../core/css/index.types.js";
import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
import "../../core/index.js";
import { ProgressStyle } from "./progress.style.js";
import { UseProgressProps } from "./use-progress.js";
import "../../index.js";
import * as react_jsx_runtime4 from "react/jsx-runtime";
import * as react803 from "react";

//#region src/components/progress/progress.d.ts
interface ProgressProps extends HTMLStyledProps, UseProgressProps, ThemeProps<ProgressStyle> {
  /**
   * The animation duration in seconds.
   */
  duration?: number | string;
  /**
   * The color of the progress range.
   */
  rangeColor?: CSSProps["color"];
  /**
   * The color of the progress track.
   */
  trackColor?: CSSProps["color"];
  /**
   * Props for the progress range element.
   */
  rangeProps?: ProgressRangeProps;
}
declare const ProgressPropsContext: react803.Context<Partial<ProgressProps> | undefined>, useProgressPropsContext: () => Partial<ProgressProps> | undefined;
/**
 * `Progress` is a component for visually indicating progress.
 *
 * @see https://yamada-ui.com/docs/components/progress
 */
declare const Progress: Component<({
  css,
  max,
  min,
  rangeColor,
  trackColor,
  value,
  rangeProps,
  ...rest
}: WithoutThemeProps<ProgressProps, ComponentSlotStyle<"range" | "root", {
  animated: {
    true: {
      range: {
        "--animation-from": "{stripe-size}";
        animationDuration: "{duration, 1s}";
        animationIterationCount: "infinite";
        animationName: "bg-position";
        animationTimingFunction: "linear";
      };
    };
  };
  shape: {
    circle: {
      root: {
        rounded: "full";
      };
    };
    rounded: {
      root: {
        rounded: "l1";
      };
    };
    square: {
      root: {
        rounded: "0";
      };
    };
  };
  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"];
    };
  };
}>, keyof ProgressProps>) => react_jsx_runtime4.JSX.Element, ProgressProps>;
interface ProgressRangeProps extends HTMLStyledProps {}
//#endregion
export { Progress, ProgressProps, ProgressPropsContext, useProgressPropsContext };
//# sourceMappingURL=progress.d.ts.map