@razorpay/blade 5.2.1 → 5.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @razorpay/blade
 
+## 5.4.0
+
+### Minor Changes
+
+- 5c8005f: feat: add `ProgressBar` component
+
+## 5.3.0
+
+### Minor Changes
+
+- 26baa81: feat(blade): added Card component
+
 ## 5.2.1
 
 ### Patch Changes

package/build/components/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import * as React$1 from 'react';
-import React__default, { ReactChild, ReactElement, ReactNode, KeyboardEvent, SyntheticEvent } from 'react';
+import React__default, { ReactChild, ReactElement, ReactNode, SyntheticEvent, KeyboardEvent } from 'react';
 import { AccessibilityRole, GestureResponderEvent } from 'react-native';
 import { CSSObject } from 'styled-components';
 
@@ -240,6 +240,16 @@ type DotNotationColorStringToken<TokenType> = {
     : DotNotationColorStringToken<TokenType[K]>}`;
 }[keyof TokenType];
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+
+/**
+ * A type defining React component with additional static prop `componentId`
+ */
+type WithComponentId<Props> = ((props: Props) => React__default.ReactElement) & {
+  componentId: string;
+};
+
 // All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions
 type AriaRoles =
   | Exclude<AccessibilityRole, 'header' | 'adjustable' | 'image' | 'none' | 'summary'>
@@ -280,6 +290,7 @@ type AriaRoles =
   | 'menuitem'
   | 'menuitemcheckbox'
   | 'menuitemradio'
+  | 'meter'
   | 'navigation'
   | 'none'
   | 'note'
@@ -1039,6 +1050,75 @@ declare type Theme = {
     typography: Typography;
 };
 
+declare type CardProps = {
+    /**
+     * Card contents
+     */
+    children: React__default.ReactNode;
+    /**
+     * Sets the background color of the Card according to the surface level tokens
+     *
+     * eg: `theme.colors.surface.background.level1`
+     *
+     * **Description:**
+     *
+     * - 2: Used in layouts which are on top of the main background
+     * - 3: Used over the cards template or as a text input backgrounds.
+     *
+     * **Links:**
+     * - Docs: https://blade.razorpay.com/?path=/docs/tokens-colors--page#-theme-tokens
+     * - Figma: https://shorturl.at/fsvwK
+     */
+    surfaceLevel: 2 | 3;
+};
+declare const Card: ({ children, surfaceLevel }: CardProps) => React__default.ReactElement;
+declare type CardBodyProps = {
+    children: React__default.ReactNode;
+};
+declare const CardBody: ({ children }: CardBodyProps) => React__default.ReactElement;
+
+declare type LinkCommonProps = {
+    variant?: 'anchor' | 'button';
+    icon?: IconComponent$1;
+    iconPosition?: 'left' | 'right';
+    isDisabled?: boolean;
+    onClick?: (event: SyntheticEvent) => void;
+    href?: string;
+    target?: string;
+    accessibilityLabel?: string;
+    /**
+     * Sets the size of the link
+     *
+     * @default medium
+     */
+    size?: 'small' | 'medium';
+};
+declare type LinkWithoutIconProps = LinkCommonProps & {
+    icon?: undefined;
+    children: string;
+};
+declare type LinkWithIconProps = LinkCommonProps & {
+    icon: IconComponent$1;
+    children?: string;
+};
+declare type LinkPropsWithOrWithoutIcon = LinkWithIconProps | LinkWithoutIconProps;
+declare type LinkAnchorVariantProps = LinkPropsWithOrWithoutIcon & {
+    variant?: 'anchor';
+    href?: string;
+    target?: string;
+    rel?: string;
+    isDisabled?: undefined;
+};
+declare type LinkButtonVariantProps = LinkPropsWithOrWithoutIcon & {
+    variant?: 'button';
+    isDisabled?: boolean;
+    href?: undefined;
+    target?: undefined;
+    rel?: undefined;
+};
+declare type LinkProps = LinkAnchorVariantProps | LinkButtonVariantProps;
+declare const Link: ({ children, icon, iconPosition, isDisabled, onClick, variant, href, target, rel, accessibilityLabel, size, }: LinkProps) => ReactElement;
+
 declare type ButtonCommonProps = {
     variant?: 'primary' | 'secondary' | 'tertiary';
     size?: 'xsmall' | 'small' | 'medium' | 'large';
@@ -1064,6 +1144,181 @@ declare type ButtonWithIconProps = ButtonCommonProps & {
 declare type ButtonProps = ButtonWithoutIconProps | ButtonWithIconProps;
 declare const Button: ({ children, icon, iconPosition, isDisabled, isFullWidth, isLoading, onClick, size, type, variant, accessibilityLabel, }: ButtonProps) => React.ReactElement;
 
+type FeedbackColors$1 = `feedback.text.${DotNotationColorStringToken<
+  Theme$1['colors']['feedback']['text']
+>}`;
+type FeedbackActionColors$1 = `feedback.${Feedback}.action.text.${DotNotationColorStringToken<
+  Theme$1['colors']['feedback'][Feedback]['action']['text']
+>}`;
+type SurfaceColors$1 = `surface.text.${DotNotationColorStringToken<
+  Theme$1['colors']['surface']['text']
+>}`;
+type ActionColors$1 = `action.text.${DotNotationColorStringToken<Theme$1['colors']['action']['text']>}`;
+type BadgeTextColors$1 = `badge.text.${DotNotationColorStringToken<
+  Theme$1['colors']['badge']['text']
+>}`;
+
+type BaseTextProps$1 = {
+  id?: string;
+  color?: ActionColors$1 | FeedbackColors$1 | SurfaceColors$1 | FeedbackActionColors$1 | BadgeTextColors$1;
+  fontFamily?: keyof Theme$1['typography']['fonts']['family'];
+  fontSize?: keyof Theme$1['typography']['fonts']['size'];
+  fontWeight?: keyof Theme$1['typography']['fonts']['weight'];
+  fontStyle?: 'italic' | 'normal';
+  textDecorationLine?: 'line-through' | 'none' | 'underline';
+  lineHeight?: keyof Theme$1['typography']['lineHeights'];
+  /**
+   * Web only
+   */
+  as?: 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+  textAlign?: 'center' | 'justify' | 'left' | 'right';
+  truncateAfterLines?: number;
+  className?: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+  accessibilityProps?: Partial<AccessibilityProps>;
+  /**
+   * React Native only
+   */
+  numberOfLines?: number;
+  componentName?: 'text' | 'title' | 'heading' | 'code';
+};
+
+/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
+
+
+type TextCommonProps$1 = {
+  type?: TextTypes;
+  contrast?: ColorContrastTypes;
+  truncateAfterLines?: number;
+  children: React.ReactNode;
+  weight?: keyof Theme$1['typography']['fonts']['weight'];
+  /**
+   * **For Internal use only**:  Sets the color of the Text component
+   */
+  color?: BaseTextProps$1['color'];
+};
+
+type TextVariant$1 = 'body' | 'caption';
+
+type TextBodyVariant$1 = TextCommonProps$1 & {
+  variant?: Extract<TextVariant$1, 'body'>;
+  size?: 'small' | 'medium';
+};
+
+type TextCaptionVariant$1 = TextCommonProps$1 & {
+  variant?: Extract<TextVariant$1, 'caption'>;
+  size?: 'medium';
+};
+
+/**
+ * Conditionally changing props based on variant.
+ * Overloads or union gives wrong intellisense.
+ */
+type TextProps$1<T> = T extends {
+  variant: infer Variant;
+}
+  ? Variant extends 'caption'
+    ? TextCaptionVariant$1
+    : Variant extends 'body'
+    ? TextBodyVariant$1
+    : T
+  : T;
+
+type CounterProps$1 = {
+  /**
+   * Sets the value for the counter.
+   */
+  value: number;
+  /**
+   * Sets the max value for the counter.
+   * If value exceedes `max` it will render `value+`
+   */
+  max?: number;
+  /**
+   * Sets the intent of the counter.
+   *
+   * @default 'neutral'
+   */
+  intent?: Feedback;
+  /**
+   * Sets the contrast of the counter.
+   *
+   * @default 'low'
+   */
+  contrast?: 'high' | 'low';
+  /**
+   * Sets the size of the counter.
+   *
+   * @default 'medium'
+   */
+  size?: 'small' | 'medium' | 'large';
+};
+
+declare const CardHeaderIcon: WithComponentId<{
+    icon: IconComponent$1;
+}>;
+declare const CardHeaderCounter: WithComponentId<CounterProps$1>;
+declare const CardHeaderBadge: WithComponentId<BadgeProps>;
+declare const CardHeaderText: WithComponentId<TextProps$1<{
+    variant: TextVariant$1;
+}>>;
+declare const CardHeaderLink: WithComponentId<LinkProps>;
+declare type CardHeaderIconButtonProps = Omit<ButtonProps, 'variant' | 'size' | 'iconPosition' | 'isFullWidth' | 'children'> & {
+    icon: IconComponent$1;
+};
+declare const CardHeaderIconButton: WithComponentId<CardHeaderIconButtonProps>;
+declare type CardHeaderProps = {
+    children?: React__default.ReactNode;
+};
+declare const CardHeader: ({ children }: CardHeaderProps) => React__default.ReactElement;
+declare type CardHeaderLeadingProps = {
+    title: string;
+    subtitle?: string;
+    /**
+     * prefix element of Card
+     *
+     * Accepts: `CardHeaderIcon` component
+     */
+    prefix?: React__default.ReactNode;
+    /**
+     * suffix element of Card
+     *
+     * Accepts: `CardHeaderCounter` component
+     */
+    suffix?: React__default.ReactNode;
+};
+declare const CardHeaderLeading: ({ title, subtitle, prefix, suffix, }: CardHeaderLeadingProps) => React__default.ReactElement;
+declare type CardHeaderTrailingProps = {
+    /**
+     * Renders a visual ornament in card header trailing section
+     *
+     * Accepts: `CardHeaderLink`, `CardHeaderText`, `CardHeaderIconButton`, `CardHeaderBadge`
+     */
+    visual?: React__default.ReactNode;
+};
+declare const CardHeaderTrailing: ({ visual }: CardHeaderTrailingProps) => React__default.ReactElement;
+
+declare type CardFooterAction = Pick<ButtonProps, 'type' | 'accessibilityLabel' | 'isLoading' | 'isDisabled' | 'icon' | 'iconPosition' | 'onClick'> & {
+    text: ButtonProps['children'];
+};
+declare type CardFooterProps = {
+    children?: React.ReactNode;
+};
+declare const CardFooter: ({ children }: CardFooterProps) => React.ReactElement;
+declare type CardFooterLeadingProps = {
+    title?: string;
+    subtitle?: string;
+};
+declare const CardFooterLeading: ({ title, subtitle }: CardFooterLeadingProps) => React.ReactElement;
+declare type CardFooterTrailingProps = {
+    actions?: {
+        primary?: CardFooterAction;
+        secondary?: CardFooterAction;
+    };
+};
+declare const CardFooterTrailing: ({ actions }: CardFooterTrailingProps) => React.ReactElement;
+
 declare type IconButtonProps = {
     /**
      * Icon component to be rendered, eg. `CloseIcon`
@@ -1740,48 +1995,6 @@ declare type IndicatorWithA11yLabel = {
 declare type IndicatorProps = IndicatorCommonProps & (IndicatorWithA11yLabel | IndicatorWithoutA11yLabel);
 declare const Indicator: ({ accessibilityLabel, children, size, intent, }: IndicatorProps) => ReactElement;
 
-declare type LinkCommonProps = {
-    variant?: 'anchor' | 'button';
-    icon?: IconComponent$1;
-    iconPosition?: 'left' | 'right';
-    isDisabled?: boolean;
-    onClick?: (event: SyntheticEvent) => void;
-    href?: string;
-    target?: string;
-    accessibilityLabel?: string;
-    /**
-     * Sets the size of the link
-     *
-     * @default medium
-     */
-    size?: 'small' | 'medium';
-};
-declare type LinkWithoutIconProps = LinkCommonProps & {
-    icon?: undefined;
-    children: string;
-};
-declare type LinkWithIconProps = LinkCommonProps & {
-    icon: IconComponent$1;
-    children?: string;
-};
-declare type LinkPropsWithOrWithoutIcon = LinkWithIconProps | LinkWithoutIconProps;
-declare type LinkAnchorVariantProps = LinkPropsWithOrWithoutIcon & {
-    variant?: 'anchor';
-    href?: string;
-    target?: string;
-    rel?: string;
-    isDisabled?: undefined;
-};
-declare type LinkButtonVariantProps = LinkPropsWithOrWithoutIcon & {
-    variant?: 'button';
-    isDisabled?: boolean;
-    href?: undefined;
-    target?: undefined;
-    rel?: undefined;
-};
-declare type LinkProps = LinkAnchorVariantProps | LinkButtonVariantProps;
-declare const Link: ({ children, icon, iconPosition, isDisabled, onClick, variant, href, target, rel, accessibilityLabel, size, }: LinkProps) => ReactElement;
-
 declare type Assertiveness = AriaAttributes['liveRegion'];
 
 /**
@@ -1797,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
@@ -2103,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, 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 };