@muraldevkit/ui-toolkit 2.17.2 → 2.18.1

package/dist/components/loader/MrlProgressBar/MrlProgressBar.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ProgressBarComponent } from '../constants';
+import '../../../styles/shared/a11y-helpers/a11y.global.scss';
+/**
+ * MrlProgressBar React component.
+ *
+ * @param props - component props
+ * @returns a MrlProgressBar React component.
+ */
+export declare function MrlProgressBar({ children, className, indeterminate, percent, showText, text, time }: ProgressBarComponent): JSX.Element;

package/dist/components/loader/MrlProgressBar/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlProgressBar';

package/dist/components/loader/constants.d.ts

@@ -1,3 +1,51 @@
+/// <reference types="react" />
+type CreateArrayWithLengthX<LENGTH extends number, ACC extends unknown[] = []> = ACC['length'] extends LENGTH ? ACC : CreateArrayWithLengthX<LENGTH, [...ACC, 1]>;
+type NumericRange<START_ARR extends number[], END extends number, ACC extends number = never> = START_ARR['length'] extends END ? ACC | END : NumericRange<[...START_ARR, 1], END, ACC | START_ARR['length']>;
+export type ProgressRange = NumericRange<CreateArrayWithLengthX<0>, 100>;
+/**
+ * Default values for props on the MrlProgressBar component;
+ * Shared between the component and Storybook
+ */
+export declare const progressBarDefaults: ProgressBarComponent;
+export interface ProgressBarComponent {
+    /**
+     * Custom content that lives below the progress bar.
+     *
+     * Note: This should be limited to descriptive text regarding
+     * what is in progress.
+     */
+    children?: React.ReactNode;
+    /**
+     * Custom class to be applied to the component.
+     */
+    className?: string;
+    /**
+     * Display an infinite loading indicator until completion
+     *
+     * Note: do not use with `time`.
+     */
+    indeterminate?: boolean;
+    /**
+     * The percent complete.
+     *
+     * Note: This should be a whole number between 0 and 100.
+     */
+    percent?: ProgressRange;
+    /**
+     * Display the percent complete text
+     */
+    showText?: boolean;
+    /**
+     * Custom text to use under the progress bar.
+     */
+    text?: string;
+    /**
+     * The length of time to reach 100% in milliseconds.
+     *
+     * Note: do not use with `indeterminate`.
+     */
+    time?: number;
+}
 export type SpinnerSize = 'large' | 'medium' | 'small';
 export type SpinnerStyle = 'default' | 'inverse';
 /**
@@ -29,3 +77,4 @@ export interface SpinnerComponent {
      */
     text?: string;
 }
+export {};

package/dist/components/loader/index.d.ts

@@ -1 +1,2 @@
+export * from './MrlProgressBar';
 export * from './MrlSpinner';

package/dist/components/svg/config.d.ts

@@ -115,7 +115,7 @@ export declare const colorPictoStoryData: {
 export declare const animateStoryData: {
     args: {
         delay: number;
-        state: "stop" | "play";
+        state: "play" | "stop";
     };
     argTypes: {
         delay: {