@hero-design/rn 8.105.4 → 8.106.0

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

@@ -21,8 +21,9 @@ 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
      */
-    intent?: 'primary' | 'secondary' | 'danger' | 'white';
+    intent?: 'primary' | 'secondary' | 'danger' | 'white' | 'inverted';
     /**
      * Loading state of button.
      */
@@ -46,14 +47,14 @@ export interface ButtonProps {
     /**
      * Button label.
      */
-    text: ReactChild;
+    text?: ReactChild;
     /**
      * Button type.
      *
      * variant['filled-secondary' | 'filled-danger' | 'outlined-secondary' | 'outlined-danger'] - @deprecated
      */
-    variant?: 'filled' | 'outlined' | 'text' | 'inline-text' | 'filled-compact' | 'outlined-compact' | 'text-compact' | 'inline-text-compact';
+    variant?: 'filled' | 'outlined' | 'text' | 'inline-text' | 'filled-medium' | 'outlined-medium' | 'text-medium' | 'filled-compact' | 'outlined-compact' | 'text-compact' | 'inline-text-compact';
 }
-export declare const getThemeVariant: (variant: "filled" | "outlined" | "text" | "filled-compact" | "outlined-compact" | "text-compact", intent: Intent) => ThemeVariant;
+export declare const getThemeVariant: (variant: "filled" | "outlined" | "text" | "filled-medium" | "outlined-medium" | "text-medium" | "filled-compact" | "outlined-compact" | "text-compact", intent: Intent) => ThemeVariant;
 declare const Button: ({ accessibilityHint, accessibilityLabel, disabled, icon, intent, loading, onPress, rightIcon, style, testID, text, variant, }: ButtonProps) => JSX.Element;
 export default Button;

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

@@ -1,15 +1,14 @@
-import type { Theme } from '@emotion/react';
 import type { ViewProps } from 'react-native';
 import { View } from 'react-native';
-type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'filled-white' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'outlined-white' | 'text-primary' | 'text-secondary' | 'text-danger' | 'text-white';
+type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'filled-white' | 'filled-inverted' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'outlined-white' | 'outlined-inverted' | 'text-primary' | 'text-secondary' | 'text-danger' | 'text-white' | 'text-inverted';
 declare const StyledLoadingIndicatorWrapper: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: Theme;
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledLoadingDot: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: Theme;
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     size?: number;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
-type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'filled-white' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'outlined-white' | 'text-primary' | 'text-secondary' | 'text-danger' | 'text-white';
+type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'filled-white' | 'filled-inverted' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'outlined-white' | 'outlined-inverted' | 'text-primary' | 'text-secondary' | 'text-danger' | 'text-white' | 'text-inverted';
 interface LoadingIndicatorProps extends ViewProps {
     /**
      * Size of the loading dot.

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

@@ -1,7 +1,8 @@
 import type { Theme } from '@emotion/react';
 import { View } from 'react-native';
-type Intent = 'primary' | 'secondary' | 'danger' | 'white';
-type ThemeVariant = 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'filled-white' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'outlined-white' | 'text-primary' | 'text-secondary' | 'text-danger' | 'text-white';
+import { type CamelCase } from '../../utils/helpers';
+type Intent = 'primary' | 'secondary' | 'danger' | 'white' | 'inverted';
+type ThemeVariant = 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'filled-white' | 'filled-inverted' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'outlined-white' | 'outlined-inverted' | 'text-primary' | 'text-secondary' | 'text-danger' | 'text-white' | 'text-inverted';
 declare const StyledButtonContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableHighlightProps & import("react").RefAttributes<View> & {
     theme?: Theme;
     as?: React.ElementType;
@@ -11,6 +12,8 @@ declare const StyledButtonContainer: import("@emotion/native").StyledComponent<i
     loading?: boolean;
     themeInlineText?: boolean;
     themeIsCompact?: boolean;
+    themeIsMedium?: boolean;
+    themeIsIconOnly?: boolean;
 }, {}, {}>;
 declare const StyledButtonText: import("@emotion/native").StyledComponent<import("../..").TitleProps & {
     theme?: Theme;
@@ -31,7 +34,7 @@ declare const StyledButtonTitleOfVariantText: import("@emotion/native").StyledCo
     as?: React.ElementType;
 } & {
     disabled?: boolean;
-    themeButtonVariant: "text-primary" | "text-secondary" | "text-danger" | "text-white";
+    themeButtonVariant: "text-primary" | "text-secondary" | "text-danger" | "text-white" | "text-inverted";
     themeIsPressed?: boolean;
     themeIsCompact: boolean;
 }, {}, {}>;
@@ -41,6 +44,7 @@ declare const StyledButtonIconWrapper: import("@emotion/native").StyledComponent
 } & {
     themePosition: "left" | "right";
     themeIsCompact?: boolean;
+    themeIsIconOnly?: boolean;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
@@ -54,4 +58,4 @@ declare const StyledButtonIcon: import("@emotion/native").StyledComponent<import
     themeIsCompact?: boolean;
 }, {}, {}>;
 export { StyledButtonContainer, StyledButtonIcon, StyledButtonIconWrapper, StyledButtonText, StyledButtonTitleOfVariantText, StyledSmallButtonText, };
-export type { Intent, ThemeVariant };
+export type { Intent, ThemeVariant, CamelCase };

package/types/components/Checkbox/DefaultCheckBox.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface DefaultCheckboxProps {
+    /**
+     * Control whether the switch is checked
+     */
+    checked?: boolean;
+    /**
+     * Checkbox's description.
+     */
+    description?: string;
+    /**
+     * @deprecated `withBorder` prop will be removed in the next major release, all checkboxes will have border by default. Please remove it.
+     *
+     * Whether the border is shown.
+     */
+    withBorder?: boolean;
+    /**
+     * Whether the switch is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Event handler.
+     */
+    onPress?: () => void;
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Readonly of the checkbox.
+     */
+    readonly?: boolean;
+}
+declare const DefaultCheckbox: ({ checked, description, withBorder, disabled, onPress, style, testID, readonly, }: DefaultCheckboxProps) => React.JSX.Element;
+export default DefaultCheckbox;

package/types/components/Checkbox/InlineCheckBox.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export interface InlineCheckboxProps {
+    /**
+     * Control whether the checkbox is checked
+     */
+    checked?: boolean;
+    /**
+     * Checkbox's description.
+     */
+    description?: string;
+    /**
+     * Whether the checkbox is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Event handler.
+     */
+    onPress?: () => void;
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Readonly of the checkbox.
+     */
+    readonly?: boolean;
+    /**
+     * Size of the checkbox. Can be 'medium' or 'large'.
+     */
+    size?: 'medium' | 'large';
+}
+declare const InlineCheckbox: ({ checked, description, disabled, onPress, style, testID, readonly, size, }: InlineCheckboxProps) => React.JSX.Element;
+export default InlineCheckbox;

package/types/components/Checkbox/StyledInlineCheckBox.d.ts

@@ -0,0 +1,45 @@
+import { View } from 'react-native';
+type CheckboxThemeState = 'default' | 'checked' | 'disabled' | 'readonly';
+export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & import("react").RefAttributes<View> & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeState: CheckboxThemeState;
+}, {}, {}>;
+export declare const StyledDescription: import("@emotion/native").StyledComponent<import("../..").BodyProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {}>;
+export declare const StyledCheckboxContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeSize?: "medium" | "large";
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledCheckbox: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeState: CheckboxThemeState;
+    themeSize?: "medium" | "large";
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledCheckMark: import("@emotion/native").StyledComponent<import("react-native-vector-icons/Icon").IconProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeSize: "small" | "xsmall" | "medium" | "large" | "xlarge" | "xxxsmall";
+    themeIntent: "secondary" | "primary" | "text" | "warning" | "info" | "danger" | "success" | "disabled-text" | "text-inverted" | "muted" | "inactive";
+} & {
+    ref?: import("react").Ref<import("react-native-vector-icons/Icon").Icon> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeState: CheckboxThemeState;
+    themeSize?: "medium" | "large";
+}, {}, {}>;
+export {};

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

@@ -1,46 +1,6 @@
-import React from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
-export interface CheckboxProps {
-    /**
-     * Control whether the switch is checked
-     */
-    checked?: boolean;
-    /**
-     * Checkbox's description.
-     */
-    description?: string;
-    /**
-     * @deprecated `withBorder` prop will be removed in the next major release, all checkboxes will have border by default. Please remove it.
-     *
-     * Whether the border is shown.
-     */
-    withBorder?: boolean;
-    /**
-     * Whether the switch is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Event handler.
-     */
-    onPress?: () => void;
-    /**
-     * Additional style.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Testing id of the component.
-     */
-    testID?: string;
-    /**
-     * Readonly of the checkbox.
-     */
-    readonly?: boolean;
-}
-type getStateType = {
-    disabled: boolean;
-    readonly: boolean;
-    checked?: boolean;
+import type { DefaultCheckboxProps } from './DefaultCheckBox';
+export type { DefaultCheckboxProps as CheckboxProps };
+declare const _default: (({ checked, description, withBorder, disabled, onPress, style, testID, readonly, }: DefaultCheckboxProps) => import("react").JSX.Element) & {
+    Inline: ({ checked, description, disabled, onPress, style, testID, readonly, size, }: import("./InlineCheckBox").InlineCheckboxProps) => import("react").JSX.Element;
 };
-export declare const getThemeState: ({ disabled, readonly, checked, }: getStateType) => "disabled" | "default" | "readonly" | "checked";
-declare const Checkbox: ({ checked, description, withBorder, disabled, onPress, style, testID, readonly, }: CheckboxProps) => React.JSX.Element;
-export default Checkbox;
+export default _default;

package/types/components/Checkbox/utils.d.ts

@@ -0,0 +1,6 @@
+export type getStateType = {
+    disabled: boolean;
+    readonly: boolean;
+    checked?: boolean;
+};
+export declare const getThemeState: ({ disabled, readonly, checked, }: getStateType) => "disabled" | "default" | "readonly" | "checked";

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

@@ -29,40 +29,67 @@ declare const getButtonTheme: (theme: GlobalTheme) => {
     };
     radii: {
         default: number;
+        rounded: number;
         utilityRadii: number;
         text: number;
     };
     colors: {
-        primary: string;
-        secondary: string;
-        danger: string;
-        white: string;
-        defaultText: string;
-        disabledText: string;
-        disabledBorder: string;
-        disabledBackground: string;
         invertedText: string;
         utilityBackground: string;
-        textLoadingBackground: string;
+        background: {
+            filledPrimary: string;
+            filledSecondary: string;
+            filledDanger: string;
+            filledWhite: string;
+            filledInverted: string;
+        };
+        text: {
+            filledPrimary: string;
+            filledSecondary: string;
+            filledDanger: string | undefined;
+            filledWhite: string;
+            filledInverted: string;
+            outlinedPrimary: string;
+            outlinedSecondary: string;
+            outlinedDanger: string;
+            outlinedWhite: string;
+            outlinedInverted: string;
+            textPrimary: string;
+            textSecondary: string;
+            textDanger: string;
+            textWhite: string;
+            textInverted: string;
+        };
+        border: {
+            outlinedPrimary: string;
+            outlinedSecondary: string;
+            outlinedDanger: string;
+            outlinedWhite: string;
+            outlinedInverted: string;
+        };
         pressedBackground: {
             filledPrimary: string;
             filledSecondary: string;
             filledDanger: string;
             filledWhite: string;
+            filledInverted: string;
             outlinedPrimary: string;
             outlinedSecondary: string;
-            outlineDanger: string;
-            outlineWhite: string;
+            outlinedDanger: string;
+            outlinedWhite: string;
+            outlinedInverted: string;
             textPrimary: string;
             textSecondary: string;
             textDanger: string;
             textWhite: string;
+            textInverted: string;
         };
         pressedText: {
-            primary: string;
-            secondary: string;
-            danger: string;
-            white: string;
+            inlineTextPrimary: string;
+            inlineTextSecondary: string;
+            inlineTextDanger: string;
+            inlineTextWhite: string;
+            inlineTextInverted: string;
         };
     };
     space: {
@@ -76,6 +103,13 @@ declare const getButtonTheme: (theme: GlobalTheme) => {
             buttonPaddingHorizontal: number;
             iconPadding: number;
         };
+        medium: {
+            buttonPaddingVertical: number;
+            buttonPaddingHorizontal: number;
+            iconPadding: number;
+            buttonPadding: number;
+            textButtonPadding: number;
+        };
         utilityPadding: number;
     };
 };

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

@@ -18,9 +18,15 @@ declare const getCheckboxTheme: (theme: GlobalTheme) => {
         iconTop: number;
         wrapperPadding: number;
         iconDescriptionPadding: number;
+        inlineCheckboxGap: number;
+        inlineCheckboxMargin: number;
     };
     sizes: {
         icon: number;
+        inlineCheckbox: {
+            medium: number;
+            large: number;
+        };
     };
     radii: {
         wrapper: number;

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

@@ -3,7 +3,7 @@ declare const getDrawerTheme: (theme: GlobalTheme) => {
     colors: {
         shadow: string;
         background: string;
-        backdrop: string;
+        backdrop: string | undefined;
         handler: string;
     };
     radii: {

package/types/utils/helpers.d.ts

@@ -8,3 +8,5 @@ export declare const useKeyboard: () => {
     isKeyboardVisible: boolean;
     keyboardHeight: number;
 };
+export type CamelCase<S extends string> = S extends `${infer F}-${infer R}` ? R extends `${string}-${string}` ? `${F}${Capitalize<CamelCase<R>>}` : `${F}${Capitalize<R>}` : never;
+export declare const transformKebabCaseToCamelCase: <T extends string>(string: T) => CamelCase<T>;