@hero-design/rn 8.110.0 → 8.111.0

package/types/components/Accordion/index.d.ts

@@ -34,6 +34,10 @@ export interface AccordionProps<K extends Key> {
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * If true, indicates that the Accordion is accessible to screen readers.
+     */
+    accessible?: boolean;
 }
-declare const Accordion: <K extends Key>({ items, activeItemKey, onItemPress, variant, style, testID, }: AccordionProps<K>) => React.JSX.Element;
+declare const Accordion: <K extends Key>({ items, activeItemKey, onItemPress, variant, style, testID, accessible, }: AccordionProps<K>) => React.JSX.Element;
 export default Accordion;

package/types/components/Alert/index.d.ts

@@ -1,6 +1,11 @@
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
+/**
+ * @deprecated Use 'success' | 'info' | 'warning' | 'error' instead.
+ */
+type DeprecatedIntent = 'notification';
+type ValidIntent = 'success' | 'info' | 'warning' | 'error';
 interface BasicAlertProps {
     /**
      * Alert title.
@@ -20,9 +25,10 @@ interface BasicAlertProps {
     /**
      * Visual intent color to apply to alert.
      *
-     * intent['notification'] - @deprecated Will be removed in the next major release. Please use other intents instead.
+     *
+     * ⚠️ 'notification' intent is deprecated and will be removed in the next major release. Please use other intents instead.
      */
-    intent?: 'success' | 'info' | 'warning' | 'error' | 'notification';
+    intent?: ValidIntent | DeprecatedIntent;
     /**
      * Closing callback. When onClose is available, an X button will be rendered on the right side of alert. The callback will be called when user clicks on X button.
      * - undefined: no action button.

package/types/components/Button/Button.d.ts

@@ -2,6 +2,11 @@ import type { ReactChild, ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
 import type { Intent, ThemeVariant } from './StyledButton';
+/**
+ * @deprecated Use 'primary' | 'secondary' | 'danger' | 'inverted' instead.
+ */
+type DeprecatedIntent = 'white';
+type ValidIntent = 'primary' | 'secondary' | 'danger' | 'inverted';
 export interface ButtonProps {
     /**
      * Helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
@@ -21,9 +26,10 @@ export interface ButtonProps {
     icon?: IconName | ReactNode;
     /**
      * Visual intent color to apply to button. It is required for `filled`, `outlined` and `text` variants.
-     *  intent['white'] - @deprecated
+     *
+     * ⚠️ 'white' intent is deprecated and will be removed in the next major release. Please use 'primary' | 'secondary' | 'danger' | 'inverted' instead.
      */
-    intent?: 'primary' | 'secondary' | 'danger' | 'white' | 'inverted';
+    intent?: ValidIntent | DeprecatedIntent;
     /**
      * Loading state of button.
      */
@@ -50,8 +56,6 @@ export interface ButtonProps {
     text?: ReactChild;
     /**
      * Button type.
-     *
-     * variant['filled-secondary' | 'filled-danger' | 'outlined-secondary' | 'outlined-danger'] - @deprecated
      */
     variant?: 'filled' | 'outlined' | 'text' | 'inline-text' | 'filled-medium' | 'outlined-medium' | 'text-medium' | 'filled-compact' | 'outlined-compact' | 'text-compact' | 'inline-text-compact';
 }

package/types/components/Chip/index.d.ts

@@ -2,6 +2,11 @@ import type { ReactNode } from 'react';
 import React from 'react';
 import type { ViewProps } from 'react-native';
 import type { IconName } from '../Icon';
+/**
+ * @deprecated Use 'selection' | 'filter' | 'compact' | 'compact-outlined' instead.
+ */
+type DeprecatedVariant = 'outlined' | 'filled';
+type ValidVariant = 'selection' | 'filter' | 'compact' | 'compact-outlined';
 export interface ChipProps extends ViewProps {
     /**
      * The label of the chip.
@@ -10,9 +15,9 @@ export interface ChipProps extends ViewProps {
     /**
      * Variant of the chip.
      *
-     * variant['outlined' | 'filled'] - @deprecated
+     * ⚠️ 'outlined' | 'filled' variants are deprecated and will be removed in the next major release. Please use 'selection' | 'filter' | 'compact' | 'compact-outlined' instead.
      */
-    variant?: 'selection' | 'filter' | 'compact' | 'compact-outlined' | 'outlined' | 'filled';
+    variant?: ValidVariant | DeprecatedVariant;
     /**
      * Whether the chip is selected.
      */
@@ -29,6 +34,10 @@ export interface ChipProps extends ViewProps {
      * Whether to show the selected icon when using outlined variant.
      */
     showSelectedIcon?: boolean;
+    /**
+     * If true, indicates that the Chip is accessible to screen readers.
+     */
+    accessible?: boolean;
 }
-declare const Chip: ({ label, variant, selected, icon, onPress, showSelectedIcon, ...otherProps }: ChipProps) => React.JSX.Element;
+declare const Chip: ({ label, variant, selected, icon, onPress, showSelectedIcon, accessible, ...otherProps }: ChipProps) => React.JSX.Element;
 export default Chip;

package/types/components/PinInput/index.d.ts

@@ -49,6 +49,10 @@ interface PinInputProps {
      * The autofill type of the input.
      */
     autoComplete?: ComponentProps<typeof TextInput>['autoComplete'];
+    /**
+     * If true, indicates that the PinInput is accessible to screen readers.
+     */
+    accessible?: boolean;
 }
 export declare function getState({ disabled, error, }: {
     disabled?: boolean;

package/types/components/Radio/RadioGroup.d.ts

@@ -27,10 +27,14 @@ export interface RadioGroupProps<T> {
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * Overrides the text that's read by the screen reader when the user interacts with the element.
+     */
+    accessible?: boolean;
     /**
      * Idle background color of the Radio.
      */
     inactiveIntent?: 'light' | 'dark';
 }
-declare const RadioGroup: <T>({ value, onPress, options, keyExtractor, style, testID, inactiveIntent, }: RadioGroupProps<T>) => ReactElement;
+declare const RadioGroup: <T>({ value, onPress, options, keyExtractor, style, testID, accessible, inactiveIntent, }: RadioGroupProps<T>) => ReactElement;
 export default RadioGroup;

package/types/components/Radio/index.d.ts

@@ -1,4 +1,4 @@
 declare const CompoundRadio: {
-    readonly Group: <T>({ value, onPress, options, keyExtractor, style, testID, inactiveIntent, }: import("./RadioGroup").RadioGroupProps<T>) => import("react").ReactElement;
+    readonly Group: <T>({ value, onPress, options, keyExtractor, style, testID, accessible, inactiveIntent, }: import("./RadioGroup").RadioGroupProps<T>) => import("react").ReactElement;
 };
 export default CompoundRadio;

package/types/components/Search/SearchOneLine.d.ts

@@ -58,6 +58,10 @@ interface SearchOneLineProps extends NativeTextInputProps {
      * Clearable input.
      */
     clearable?: boolean;
+    /**
+     * If true, indicates that the SearchOneLine is accessible to screen readers.
+     */
+    accessible?: boolean;
 }
 export declare const getState: ({ disabled, editable, isEmptyValue, }: {
     disabled?: boolean;

package/types/components/Search/SearchTwoLine.d.ts

@@ -31,6 +31,10 @@ interface SearchTwoLineProps {
      * @default 'basic'
      */
     variant?: 'basic' | 'reversed';
+    /**
+     * If true, indicates that the SearchTwoLine is accessible to screen readers.
+     */
+    accessible?: boolean;
 }
 declare const SearchTwoLine: (props: SearchTwoLineProps) => React.JSX.Element;
 export default SearchTwoLine;

package/types/components/TextInput/StyledTextInput.d.ts

@@ -44,7 +44,7 @@ declare const StyledMaxLengthMessage: import("@emotion/native").StyledComponent<
 } & {
     themeState: State;
 }, {}, {}>;
-declare const StyledHelperText: ({ children, fontWeight, intent, allowFontScaling, ...nativeProps }: import("../..").CaptionProps) => import("react").JSX.Element;
+declare const StyledHelperText: ({ children, fontWeight, intent, allowFontScaling, fontStyle, ...nativeProps }: import("../..").CaptionProps) => import("react").JSX.Element;
 declare const StyledTextInput: import("@emotion/native").StyledComponent<import("react-native").TextInputProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/types/components/Toolbar/ToolbarGroup.d.ts

@@ -1,5 +1,10 @@
 import React from 'react';
 import type { ToolbarItemProps } from './ToolbarItem';
+/**
+ * @deprecated Use 'right' instead.
+ */
+type DeprecatedAlign = 'left' | 'center';
+type ValidAlign = 'right';
 export interface ToolbarGroupProps {
     /**
      * List of action items in the toolbar group.
@@ -7,11 +12,14 @@ export interface ToolbarGroupProps {
     items?: ToolbarItemProps[];
     /**
      * Alignment of the items in the group.
+     *
+     * ⚠️ 'left' | 'center' alignments are deprecated and will be removed in the next major release. Please use 'right' instead.
      */
+    align: ValidAlign | DeprecatedAlign;
     /**
-     * align['left' | 'center'] - @deprecated Use align['right'] instead.
+     * If true, indicates that the ToolbarGroup is accessible to screen readers.
      */
-    align: 'left' | 'center' | 'right';
+    accessible?: boolean;
 }
-declare const ToolbarGroup: ({ align, items }: ToolbarGroupProps) => React.JSX.Element;
+declare const ToolbarGroup: ({ align, items, accessible, }: ToolbarGroupProps) => React.JSX.Element;
 export default ToolbarGroup;

package/types/components/Toolbar/index.d.ts

@@ -8,7 +8,7 @@ export interface ToolbarProps extends Omit<ViewProps, 'style'> {
     children?: ReactNode;
 }
 declare const _default: (({ children, ...rest }: ToolbarProps) => React.JSX.Element) & {
-    Group: ({ align, items }: import("./ToolbarGroup").ToolbarGroupProps) => React.JSX.Element;
+    Group: ({ align, items, accessible, }: import("./ToolbarGroup").ToolbarGroupProps) => React.JSX.Element;
     Message: React.ForwardRefExoticComponent<Omit<import("./ToolbarMessage").ToolbarMessageProps, "ref"> & React.RefAttributes<import("./ToolbarMessage").ToolbarMessageHandles>>;
 };
 export default _default;

package/types/components/Typography/Body/StyledBody.d.ts

@@ -8,6 +8,7 @@ declare const StyledBody: import("@emotion/native").StyledComponent<import("reac
     themeIntent: TypographyIntent;
     themeTypeface: "neutral" | "playful";
     themeVariant: ThemeVariant;
+    themeIsItalic?: boolean;
 }, {}, {
     ref?: import("react").Ref<Text> | undefined;
 }>;

package/types/components/Typography/Body/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { ReactNode } from 'react';
+import React from 'react';
 import type { TextProps as NativeTextProps, StyleProp, TextStyle } from 'react-native';
 import type { TypographyIntent } from '../types';
 export interface BodyProps extends NativeTextProps {
@@ -29,6 +29,10 @@ export interface BodyProps extends NativeTextProps {
      * size variant of the text.
      * */
     variant?: 'regular' | 'regular-bold' | 'small' | 'small-bold';
+    /**
+     * Font style to apply to the text.
+     */
+    fontStyle?: 'normal' | 'italic';
 }
-declare const Body: ({ children, intent, allowFontScaling, typeface, variant, ...nativeProps }: BodyProps) => React.JSX.Element;
+declare const Body: ({ children, intent, allowFontScaling, typeface, variant, fontStyle, ...nativeProps }: BodyProps) => React.JSX.Element;
 export default Body;

package/types/components/Typography/Caption/StyledCaption.d.ts

@@ -6,6 +6,7 @@ declare const StyledCaption: import("@emotion/native").StyledComponent<import("r
 } & {
     themeFontWeight: "regular" | "semi-bold";
     themeIntent: TypographyIntent;
+    themeIsItalic?: boolean;
 }, {}, {
     ref?: import("react").Ref<Text> | undefined;
 }>;

package/types/components/Typography/Caption/index.d.ts

@@ -23,6 +23,10 @@ export interface CaptionProps extends NativeTextProps {
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * Font style to apply to the text.
+     */
+    fontStyle?: 'normal' | 'italic';
 }
-declare const Caption: ({ children, fontWeight, intent, allowFontScaling, ...nativeProps }: CaptionProps) => React.JSX.Element;
+declare const Caption: ({ children, fontWeight, intent, allowFontScaling, fontStyle, ...nativeProps }: CaptionProps) => React.JSX.Element;
 export default Caption;

package/types/components/Typography/Label/StyledLabel.d.ts

@@ -5,6 +5,7 @@ declare const StyledLabel: import("@emotion/native").StyledComponent<import("rea
     as?: React.ElementType;
 } & {
     themeIntent: TypographyIntent;
+    themeIsItalic?: boolean;
 }, {}, {
     ref?: import("react").Ref<Text> | undefined;
 }>;

package/types/components/Typography/Label/index.d.ts

@@ -19,6 +19,10 @@ export interface LabelProps extends NativeTextProps {
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * Font style to apply to the text.
+     */
+    fontStyle?: 'normal' | 'italic';
 }
-declare const Label: ({ children, intent, allowFontScaling, ...nativeProps }: LabelProps) => React.JSX.Element;
+declare const Label: ({ children, intent, allowFontScaling, fontStyle, ...nativeProps }: LabelProps) => React.JSX.Element;
 export default Label;

package/types/components/Typography/Title/StyledTitle.d.ts

@@ -8,6 +8,7 @@ declare const StyledTitle: import("@emotion/native").StyledComponent<import("rea
     themeIntent: TypographyIntent;
     themeLevel: ThemeLevel;
     themeTypeface: "neutral" | "playful";
+    themeIsItalic?: boolean;
 }, {}, {
     ref?: import("react").Ref<Text> | undefined;
 }>;

package/types/components/Typography/Title/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { ReactNode } from 'react';
+import React from 'react';
 import type { TextProps as NativeTextProps, StyleProp, TextStyle } from 'react-native';
 import type { TypographyIntent } from '../types';
 export interface TitleProps extends NativeTextProps {
@@ -29,6 +29,10 @@ export interface TitleProps extends NativeTextProps {
      * The level of Title including h1, h2, h3, h4, h5 and h6.
      */
     level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * Font style to apply to the text.
+     */
+    fontStyle?: 'normal' | 'italic';
 }
-declare const Title: ({ children, intent, allowFontScaling, level, typeface, ...nativeProps }: TitleProps) => React.JSX.Element;
+declare const Title: ({ children, intent, allowFontScaling, level, typeface, fontStyle, ...nativeProps }: TitleProps) => React.JSX.Element;
 export default Title;

package/types/theme/components/typography.d.ts

@@ -136,29 +136,31 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         titles: {
             neutral: {
                 h1: string;
+                h1Italic: string;
                 h2: string;
+                h2Italic: string;
                 h3: string;
+                h3Italic: string;
                 h4: string;
+                h4Italic: string;
                 h5: string;
+                h5Italic: string;
                 h6: string;
+                h6Italic: string;
             };
             playful: {
                 h1: string;
+                h1Italic: string;
                 h2: string;
+                h2Italic: string;
                 h3: string;
+                h3Italic: string;
                 h4: string;
+                h4Italic: string;
                 h5: string;
+                h5Italic: string;
                 h6: string;
-            };
-        };
-        body: {
-            neutral: {
-                semiBold: string;
-                regular: string;
-            };
-            playful: {
-                semiBold: string;
-                regular: string;
+                h6Italic: string;
             };
         };
     };

package/types/theme/global/typography.d.ts

@@ -2,6 +2,9 @@ interface FontWeights {
     light: string;
     regular: string;
     semiBold: string;
+    lightItalic: string;
+    regularItalic: string;
+    semiBoldItalic: string;
 }
 interface Fonts {
     neutral: FontWeights;