@razorpay/blade 5.3.0 → 5.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @razorpay/blade
 
+## 5.4.0
+
+### Minor Changes
+
+- 5c8005f: feat: add `ProgressBar` component
+
 ## 5.3.0
 
 ### Minor Changes

package/build/components/index.d.ts

@@ -290,6 +290,7 @@ type AriaRoles =
   | 'menuitem'
   | 'menuitemcheckbox'
   | 'menuitemradio'
+  | 'meter'
   | 'navigation'
   | 'none'
   | 'note'
@@ -2009,6 +2010,83 @@ declare function clearAnnouncer(assertiveness: Assertiveness): void;
  */
 declare function destroyAnnouncer(): void;
 
+declare type ProgressBarCommonProps = {
+    /**
+     * Sets aria-label to help users know what the progress bar is for. Default value is the same as the `label` passed.
+     */
+    accessibilityLabel?: string;
+    /**
+     * Sets the contrast for the progress bar
+     * @default 'low'
+     */
+    contrast?: ColorContrastTypes;
+    /**
+     * Sets the intent of the progress bar which changes the feedback color.
+     */
+    intent?: Feedback;
+    /**
+     * Sets the label to be rendered for the progress bar. This value will also be used as default for `accessibilityLabel`.
+     */
+    label?: string;
+    /**
+     * Sets the size of the progress bar.
+     * @default 'small'
+     */
+    size?: 'small' | 'medium';
+    /**
+     * Sets the progress value of the progress bar.
+     * @default 'small'
+     */
+    value?: number;
+    /**
+     * Sets the minimum value for the progress bar.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Sets the maximum value for the progress bar.
+     * @default 100
+     */
+    max?: number;
+};
+declare type ProgressBarVariant = 'progress' | 'meter';
+declare type ProgressBarProgressProps = ProgressBarCommonProps & {
+    /**
+     * Sets the variant to be rendered for the progress bar.
+     * @default 'progress'
+     */
+    variant?: Extract<ProgressBarVariant, 'progress'>;
+    /**
+     * Sets whether the progress bar is in an indeterminate state.
+     * @default false
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.
+     * @default true
+     */
+    showPercentage?: boolean;
+};
+declare type ProgressBarMeterProps = ProgressBarCommonProps & {
+    /**
+     * Sets the variant to be rendered for thr progress bar.
+     * @default 'progress'
+     */
+    variant?: Extract<ProgressBarVariant, 'meter'>;
+    /**
+     * Sets whether the progress bar is in an indeterminate state.
+     * @default false
+     */
+    isIndeterminate?: undefined;
+    /**
+     * Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.
+     * @default false
+     */
+    showPercentage?: undefined;
+};
+declare type ProgressBarProps = ProgressBarProgressProps | ProgressBarMeterProps;
+declare const ProgressBar: ({ accessibilityLabel, contrast, intent, isIndeterminate, label, showPercentage, size, value, variant, min, max, }: ProgressBarProps) => ReactElement;
+
 declare type RadioProps = {
     /**
      * Sets the label text of the Radio
@@ -2315,4 +2393,4 @@ declare const VisuallyHidden: ({ children }: VisuallyHiddenProps) => JSX.Element
 
 declare const screenReaderStyles: CSSObject;
 
-export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BadgeProps, BladeProvider, BladeProviderProps, Button, ButtonProps, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, CodeProps, Counter, CounterProps, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileTextIcon, Heading, HeadingProps, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, Indicator, IndicatorProps, InfoIcon, Link, LinkIcon, LinkProps, LockIcon, MailIcon, MinusIcon, OTPInput, OTPInputProps, PasswordInput, PasswordInputProps, PauseIcon, PlusIcon, Radio, RadioGroup, RadioGroupProps, RadioProps, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SettingsIcon, SkipNavContent, SkipNavLink, SlashIcon, Spinner, SpinnerProps, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, Title, TitleProps, TrashIcon, TrendingDownIcon, TrendingUpIcon, UsersIcon, VisuallyHidden, VisuallyHiddenProps, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
+export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BadgeProps, BladeProvider, BladeProviderProps, Button, ButtonProps, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, CodeProps, Counter, CounterProps, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileTextIcon, Heading, HeadingProps, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, Indicator, IndicatorProps, InfoIcon, Link, LinkIcon, LinkProps, LockIcon, MailIcon, MinusIcon, OTPInput, OTPInputProps, PasswordInput, PasswordInputProps, PauseIcon, PlusIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, Radio, RadioGroup, RadioGroupProps, RadioProps, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SettingsIcon, SkipNavContent, SkipNavLink, SlashIcon, Spinner, SpinnerProps, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, Title, TitleProps, TrashIcon, TrendingDownIcon, TrendingUpIcon, UsersIcon, VisuallyHidden, VisuallyHiddenProps, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };

package/build/components/index.native.d.ts

@@ -290,6 +290,7 @@ type AriaRoles =
   | 'menuitem'
   | 'menuitemcheckbox'
   | 'menuitemradio'
+  | 'meter'
   | 'navigation'
   | 'none'
   | 'note'
@@ -2000,6 +2001,83 @@ declare function announce(message: string, _assertiveness?: Assertiveness): void
 declare function clearAnnouncer(_assertiveness: Assertiveness): void;
 declare function destroyAnnouncer(): void;
 
+declare type ProgressBarCommonProps = {
+    /**
+     * Sets aria-label to help users know what the progress bar is for. Default value is the same as the `label` passed.
+     */
+    accessibilityLabel?: string;
+    /**
+     * Sets the contrast for the progress bar
+     * @default 'low'
+     */
+    contrast?: ColorContrastTypes;
+    /**
+     * Sets the intent of the progress bar which changes the feedback color.
+     */
+    intent?: Feedback;
+    /**
+     * Sets the label to be rendered for the progress bar. This value will also be used as default for `accessibilityLabel`.
+     */
+    label?: string;
+    /**
+     * Sets the size of the progress bar.
+     * @default 'small'
+     */
+    size?: 'small' | 'medium';
+    /**
+     * Sets the progress value of the progress bar.
+     * @default 'small'
+     */
+    value?: number;
+    /**
+     * Sets the minimum value for the progress bar.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Sets the maximum value for the progress bar.
+     * @default 100
+     */
+    max?: number;
+};
+declare type ProgressBarVariant = 'progress' | 'meter';
+declare type ProgressBarProgressProps = ProgressBarCommonProps & {
+    /**
+     * Sets the variant to be rendered for the progress bar.
+     * @default 'progress'
+     */
+    variant?: Extract<ProgressBarVariant, 'progress'>;
+    /**
+     * Sets whether the progress bar is in an indeterminate state.
+     * @default false
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.
+     * @default true
+     */
+    showPercentage?: boolean;
+};
+declare type ProgressBarMeterProps = ProgressBarCommonProps & {
+    /**
+     * Sets the variant to be rendered for thr progress bar.
+     * @default 'progress'
+     */
+    variant?: Extract<ProgressBarVariant, 'meter'>;
+    /**
+     * Sets whether the progress bar is in an indeterminate state.
+     * @default false
+     */
+    isIndeterminate?: undefined;
+    /**
+     * Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.
+     * @default false
+     */
+    showPercentage?: undefined;
+};
+declare type ProgressBarProps = ProgressBarProgressProps | ProgressBarMeterProps;
+declare const ProgressBar: ({ accessibilityLabel, contrast, intent, isIndeterminate, label, showPercentage, size, value, variant, min, max, }: ProgressBarProps) => ReactElement;
+
 declare type RadioProps = {
     /**
      * Sets the label text of the Radio
@@ -2303,4 +2381,4 @@ declare const VisuallyHidden: ({ children }: VisuallyHiddenProps) => JSX.Element
 
 declare const screenReaderStyles: CSSObject;
 
-export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BadgeProps, BladeProvider, BladeProviderProps, Button, ButtonProps, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, CodeProps, Counter, CounterProps, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileTextIcon, Heading, HeadingProps, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, Indicator, IndicatorProps, InfoIcon, Link, LinkIcon, LinkProps, LockIcon, MailIcon, MinusIcon, OTPInput, OTPInputProps, PasswordInput, PasswordInputProps, PauseIcon, PlusIcon, Radio, RadioGroup, RadioGroupProps, RadioProps, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SettingsIcon, SkipNavContent, SkipNavLink, SlashIcon, Spinner, SpinnerProps, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, Title, TitleProps, TrashIcon, TrendingDownIcon, TrendingUpIcon, UsersIcon, VisuallyHidden, VisuallyHiddenProps, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
+export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BadgeProps, BladeProvider, BladeProviderProps, Button, ButtonProps, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, CodeProps, Counter, CounterProps, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileTextIcon, Heading, HeadingProps, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, Indicator, IndicatorProps, InfoIcon, Link, LinkIcon, LinkProps, LockIcon, MailIcon, MinusIcon, OTPInput, OTPInputProps, PasswordInput, PasswordInputProps, PauseIcon, PlusIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, Radio, RadioGroup, RadioGroupProps, RadioProps, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SettingsIcon, SkipNavContent, SkipNavLink, SlashIcon, Spinner, SpinnerProps, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, Title, TitleProps, TrashIcon, TrendingDownIcon, TrendingUpIcon, UsersIcon, VisuallyHidden, VisuallyHiddenProps, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };