@ledgerhq/native-ui 0.7.2 → 0.7.4-monorepo.1

package/README.md

@@ -86,10 +86,10 @@ import { useFonts } from "expo-font";
 */
 function FontProvider({ children }) {
   const [fontsLoaded] = useFonts({
-    "HMAlphaMono-Medium": require("@ledgerhq/native-ui/assets/fonts/alpha/HMAlphaMono-Medium.otf"),
-    "Inter-Medium": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-Medium.otf"),
-    "Inter-SemiBold": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-SemiBold.otf"),
-    "Inter-Bold": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-Bold.otf"),
+    "HMAlphaMono-Medium": require("@ledgerhq/native-ui/lib/assets/fonts/alpha/HMAlphaMono-Medium.otf"),
+    "Inter-Medium": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Medium.otf"),
+    "Inter-SemiBold": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-SemiBold.otf"),
+    "Inter-Bold": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Bold.otf"),
   });
 
   if (!fontsLoaded) {
@@ -107,8 +107,8 @@ Add the paths in the `react-native.config.js` file:
 ```js
 module.exports = {
   assets: [
-    "node_modules/@ledgerhq/native-ui/assets/fonts/alpha",
-    "node_modules/@ledgerhq/native-ui/assets/fonts/inter",
+    "node_modules/@ledgerhq/native-ui/lib/assets/fonts/alpha",
+    "node_modules/@ledgerhq/native-ui/lib/assets/fonts/inter",
   ],
 };
 ```
@@ -138,10 +138,10 @@ function Logo() {
 
 function FontProvider({ children }) {
   const [fontsLoaded] = useFonts({
-    "HMAlphaMono-Medium": require("@ledgerhq/native-ui/assets/fonts/alpha/HMAlphaMono-Medium.otf"),
-    "Inter-Medium": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-Medium.otf"),
-    "Inter-SemiBold": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-SemiBold.otf"),
-    "Inter-Bold": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-Bold.otf"),
+    "HMAlphaMono-Medium": require("@ledgerhq/native-ui/lib/assets/fonts/alpha/HMAlphaMono-Medium.otf"),
+    "Inter-Medium": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Medium.otf"),
+    "Inter-SemiBold": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-SemiBold.otf"),
+    "Inter-Bold": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Bold.otf"),
   });
 
   if (!fontsLoaded) {

package/{assets → lib/assets}/logos/LedgerLiveAltRegular.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare type Props = {
     width?: number | string;
     height?: number | string;

package/{assets → lib/assets}/logos/LedgerLiveRegular.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare type Props = {
     width?: number | string;
     height?: number | string;

package/{components → lib/components}/Form/Checkbox/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { BaseTextProps } from "../../Text";
 declare type CheckboxProps = {
     checked: boolean;

package/{components → lib/components}/Form/Input/BaseInput/index.d.ts

@@ -47,7 +47,7 @@ export declare type InputProps<T = string> = Omit<CommonProps, "value" | "onChan
      */
     containerStyle?: StyleProp<ViewStyle>;
 };
-export declare const InputRenderLeftContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & {
+export declare const InputRenderLeftContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Background<import("styled-system").TLengthStyledSystem>> & {
     columnGap?: string | number | undefined;
     rowGap?: string | number | undefined;
     color?: string | undefined;
@@ -58,8 +58,8 @@ export declare const InputRenderLeftContainer: import("styled-components").Style
     alignItems: string;
     flexDirection: string;
     pl: string;
-}, "pl" | "alignItems" | "flexDirection">;
-export declare const InputRenderRightContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & {
+}, "alignItems" | "flexDirection" | "pl">;
+export declare const InputRenderRightContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Background<import("styled-system").TLengthStyledSystem>> & {
     columnGap?: string | number | undefined;
     rowGap?: string | number | undefined;
     color?: string | undefined;
@@ -70,7 +70,7 @@ export declare const InputRenderRightContainer: import("styled-components").Styl
     alignItems: string;
     flexDirection: string;
     pr: string;
-}, "pr" | "alignItems" | "flexDirection">;
+}, "alignItems" | "flexDirection" | "pr">;
 declare function Input<T = string>(props: InputProps<T>, ref?: any): JSX.Element;
 declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
     /**

package/{components → lib/components}/Form/Slider/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { SliderProps } from "./index.native";
 declare const SliderScreen: (_props: SliderProps) => JSX.Element;
 export default SliderScreen;

package/{components → lib/components}/Form/Slider/index.native.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type SliderProps = {
     step: number;
     min: number;

package/{components → lib/components}/Form/Switch/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare type SwitchProps = {
     checked: boolean;
     onChange?: (value: boolean) => void;

package/{components → lib/components}/Form/Toggle/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ButtonProps } from "../../cta/Button";
 declare type ToggleProps = {
     active?: boolean;

package/{components → lib/components}/Icon/BoxedIcon.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IconOrElementType, IconType } from "./type";
 export declare const DEFAULT_BOX_SIZE = 40;
 export declare const DEFAULT_ICON_SIZE = 16;

package/{components → lib/components}/Icon/Icon.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type Props = {
     name: string;
     size?: number;

package/{components → lib/components}/Layout/Box/index.d.ts

@@ -1,6 +1,6 @@
 import { BaseStyledProps } from "../../styled";
 export declare type BoxProps = BaseStyledProps;
-declare const Box: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & {
+declare const Box: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Background<import("styled-system").TLengthStyledSystem>> & {
     columnGap?: string | number | undefined;
     rowGap?: string | number | undefined;
     color?: string | undefined;

package/{components → lib/components}/Layout/Collapse/Accordion/index.js

@@ -11,6 +11,7 @@ const Accordion = ({ collapsed = false, children, title, onPress, }) => {
     };
     const style = useAnimatedStyle(() => {
         return {
+            // @ts-expect-error https://github.com/software-mansion/react-native-reanimated/issues/2971
             maxHeight: withTiming(animationHeight.value, config),
         };
     });

package/{components → lib/components}/Layout/Flex/index.d.ts

@@ -1,7 +1,7 @@
 import { BaseStyledProps } from "../../styled";
 export declare type FlexBoxProps = BaseStyledProps;
 export declare type Props = FlexBoxProps;
-declare const FlexBox: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & {
+declare const FlexBox: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Background<import("styled-system").TLengthStyledSystem>> & {
     columnGap?: string | number | undefined;
     rowGap?: string | number | undefined;
     color?: string | undefined;

package/{components → lib/components}/Layout/Modals/BaseModal/index.d.ts

@@ -14,5 +14,7 @@ export declare type BaseModalProps = {
     description?: string;
     subtitle?: string;
     children?: React.ReactNode;
+    noCloseButton?: boolean;
 } & Partial<ModalProps>;
-export default function BaseModal({ isOpen, onClose, containerStyle, modalStyle, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, ...rest }: BaseModalProps): React.ReactElement;
+export declare function ModalHeader({ Icon, iconColor, title, description, subtitle, }: Pick<BaseModalProps, "Icon" | "iconColor" | "title" | "description" | "subtitle">): React.ReactElement | null;
+export default function BaseModal({ isOpen, onClose, noCloseButton, containerStyle, modalStyle, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, ...rest }: BaseModalProps): React.ReactElement;

package/{components → lib/components}/Layout/Modals/BaseModal/index.js

@@ -29,11 +29,6 @@ const ContentContainer = styled.View `
   flex-shrink: 1;
   flex-grow: 1;
 `;
-const HeaderContainer = styled.View `
-  display: flex;
-  align-items: center;
-  margin-bottom: ${(p) => p.theme.space[7]}px;
-`;
 const CloseContainer = styled.View `
   display: flex;
   align-items: flex-end;
@@ -54,8 +49,17 @@ const defaultModalStyle = {
     flex: 1,
     margin: 16,
 };
+export function ModalHeader({ Icon, iconColor, title, description, subtitle, }) {
+    if (!(Icon || subtitle || title || description))
+        return null;
+    return (React.createElement(Flex, { alignItems: "center", mb: 7 },
+        Icon && (React.createElement(Flex, { mb: 7 }, React.isValidElement(Icon) ? (Icon) : (React.createElement(BoxedIcon, { size: 64, Icon: Icon, iconSize: 24, iconColor: iconColor })))),
+        subtitle && React.createElement(StyledSubtitle, { textAlign: "center" }, subtitle),
+        title && React.createElement(StyledTitle, { textAlign: "center" }, title),
+        description && (React.createElement(Text, { variant: "body", color: "neutral.c70", textAlign: "center", mt: 6 }, description))));
+}
 export default function BaseModal(_a) {
-    var { isOpen, onClose = () => { }, containerStyle = {}, modalStyle = {}, preventBackdropClick, Icon, iconColor, title, description, subtitle, children } = _a, rest = __rest(_a, ["isOpen", "onClose", "containerStyle", "modalStyle", "preventBackdropClick", "Icon", "iconColor", "title", "description", "subtitle", "children"]);
+    var { isOpen, onClose = () => { }, noCloseButton, containerStyle = {}, modalStyle = {}, preventBackdropClick, Icon, iconColor, title, description, subtitle, children } = _a, rest = __rest(_a, ["isOpen", "onClose", "noCloseButton", "containerStyle", "modalStyle", "preventBackdropClick", "Icon", "iconColor", "title", "description", "subtitle", "children"]);
     const backDropProps = preventBackdropClick
         ? {}
         : {
@@ -65,12 +69,8 @@ export default function BaseModal(_a) {
         };
     return (React.createElement(ReactNativeModal, Object.assign({}, rest, backDropProps, { isVisible: isOpen, deviceWidth: width, deviceHeight: height, useNativeDriver: true, useNativeDriverForBackdrop: true, hideModalContentWhileAnimating: true, onModalHide: onClose, style: [defaultModalStyle, modalStyle] }),
         React.createElement(Container, { style: containerStyle },
-            React.createElement(CloseContainer, null,
-                React.createElement(Link, { Icon: CloseMedium, onPress: onClose })),
-            React.createElement(HeaderContainer, null,
-                Icon && (React.createElement(Flex, { mb: 7 }, React.isValidElement(Icon) ? (Icon) : (React.createElement(BoxedIcon, { size: 64, Icon: Icon, iconSize: 24, iconColor: iconColor })))),
-                subtitle && React.createElement(StyledSubtitle, { textAlign: "center" }, subtitle),
-                title && React.createElement(StyledTitle, { textAlign: "center" }, title),
-                description && (React.createElement(Text, { variant: "body", color: "neutral.c70", textAlign: "center", mt: 6 }, description))),
+            !noCloseButton && (React.createElement(CloseContainer, null,
+                React.createElement(Link, { Icon: CloseMedium, onPress: onClose }))),
+            React.createElement(ModalHeader, { Icon: Icon, iconColor: iconColor, title: title, description: description, subtitle: subtitle }),
             React.createElement(ContentContainer, null, children))));
 }

package/{components → lib/components}/Layout/ScrollContainerHeader/Header.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import Animated from "react-native-reanimated";
 export declare type HeaderProps = {
     TopLeftSection?: JSX.Element;

package/{components → lib/components}/Loader/InfiniteLoader/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="styled-components-react-native" />
 import React from "react";
 import { SizeProps } from "styled-system";
-declare const Loader: import("styled-components").StyledComponent<import("react").ComponentClass<import("react-native-svg").SvgProps, any>, import("styled-components").DefaultTheme, SizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>>, never>;
+declare const Loader: import("styled-components").StyledComponent<React.ComponentClass<import("react-native-svg").SvgProps, any>, import("styled-components").DefaultTheme, SizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Height<import("styled-system").TLengthStyledSystem>>, never>;
 export declare type Props = React.ComponentProps<typeof Loader> & {
     color?: string;
 };

package/lib/components/Loader/ProgressLoader/index.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+declare type Props = {
+    /**
+     * float number between 0 and 1
+     */
+    progress?: number;
+    infinite?: boolean;
+    onPress?: () => void;
+    mainColor?: string;
+    secondaryColor?: string;
+    radius?: number;
+    strokeWidth?: number;
+    children?: React.ReactNode;
+    frontStrokeLinecap?: "butt" | "round";
+};
+declare const ProgressLoader: ({ progress, infinite, mainColor, secondaryColor, onPress, radius, strokeWidth, frontStrokeLinecap, children, }: Props) => React.ReactElement;
+export default ProgressLoader;

package/{components → lib/components}/Loader/ProgressLoader/index.js

@@ -4,13 +4,13 @@ import { useTheme } from "styled-components/native";
 import { TouchableOpacity } from "react-native";
 import { Flex } from "../../Layout";
 import Animated, { useAnimatedStyle, useSharedValue, withRepeat, withTiming, cancelAnimation, Easing, } from "react-native-reanimated";
-const ProgressLoader = ({ progress = 0, infinite, mainColor, secondaryColor, onPress, radius = 48, strokeWidth = 4, children, }) => {
+const ProgressLoader = ({ progress = 0, infinite, mainColor, secondaryColor, onPress, radius = 48, strokeWidth = 4, frontStrokeLinecap = "butt", children, }) => {
     const { colors } = useTheme();
-    const backgroundColor = secondaryColor || colors.neutral.c40;
+    const backgroundColor = secondaryColor || colors.primary.c30;
     const progressColor = mainColor || colors.primary.c80;
     const normalizedRadius = radius - strokeWidth / 2;
     const circumference = normalizedRadius * 2 * Math.PI;
-    const strokeDashoffset = circumference - progress * circumference;
+    const strokeDashoffset = circumference * (1 - progress);
     const rotation = useSharedValue(0);
     const animatedStyles = useAnimatedStyle(() => ({
         transform: [
@@ -32,16 +32,16 @@ const ProgressLoader = ({ progress = 0, infinite, mainColor, secondaryColor, onP
             React.createElement(Flex, { alignItems: "center", justifyContent: "center" },
                 React.createElement(Animated.View, { style: animatedStyles },
                     React.createElement(Svg, { width: radius * 2, height: radius * 2 },
-                        React.createElement(Circle, { cx: radius, cy: radius, fill: "transparent", r: radius * 0.92, stroke: backgroundColor, strokeWidth: strokeWidth }),
-                        React.createElement(Circle, { cx: radius, cy: radius, fill: "transparent", r: radius * 0.92, stroke: mainColor, strokeWidth: strokeWidth, strokeDasharray: `${circumference / 4}, ${circumference}`, strokeDashoffset: "500", strokeLinecap: "round" }))),
+                        React.createElement(Circle, { cx: radius, cy: radius, fill: "transparent", r: normalizedRadius, stroke: backgroundColor, strokeWidth: strokeWidth }),
+                        React.createElement(Circle, { cx: radius, cy: radius, fill: "transparent", r: normalizedRadius, stroke: progressColor, strokeWidth: strokeWidth, strokeDasharray: `${circumference / 4}, ${circumference}`, strokeDashoffset: "500", strokeLinecap: frontStrokeLinecap }))),
                 React.createElement(Flex, { position: "absolute" }, children))));
     }
     return (React.createElement(TouchableOpacity, { disabled: !onPress, onPress: onPress, activeOpacity: 1 },
         React.createElement(Flex, { alignItems: "center", justifyContent: "center" },
             React.createElement(Svg, { width: radius * 2, height: radius * 2 },
-                React.createElement(Circle, { cx: radius, cy: radius, r: radius * 0.92, fill: "transparent", stroke: backgroundColor, strokeDashoffset: 0, strokeWidth: strokeWidth }),
+                React.createElement(Circle, { cx: radius, cy: radius, r: normalizedRadius, fill: "transparent", stroke: backgroundColor, strokeDashoffset: 0, strokeWidth: strokeWidth }),
                 React.createElement(G, { transform: `rotate(-90) translate(-${radius * 2}, 0)` },
-                    React.createElement(Circle, { cx: radius, cy: radius, r: radius * 0.92, fill: "transparent", stroke: progressColor, strokeWidth: strokeWidth, strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: strokeDashoffset }))),
+                    React.createElement(Circle, { cx: radius, cy: radius, r: normalizedRadius, fill: "transparent", stroke: progressColor, strokeWidth: strokeWidth, strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: strokeDashoffset, strokeLinecap: frontStrokeLinecap }))),
             React.createElement(Flex, { position: "absolute" }, children))));
 };
 export default ProgressLoader;

package/{components → lib/components}/Navigation/SlideIndicator/index.js

@@ -37,6 +37,7 @@ function SlideIndicator({ slidesLength, activeIndex = 0, onChange }) {
         return size;
     }, [activeIndex, slidesLength]);
     const animatedStyles = useAnimatedStyle(() => ({
+        // @ts-expect-error https://github.com/software-mansion/react-native-reanimated/issues/2971
         width: withTiming(activeSize.value, config),
     }));
     return (React.createElement(Container, null,

package/{components → lib/components}/Tabs/TemplateTabs/index.d.ts

@@ -22,7 +22,7 @@ export declare type TabsProps = BaseTabsProps & {
     activeColor?: string;
     activeBg?: string;
 };
-export declare const TabsContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & {
+export declare const TabsContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Background<import("styled-system").TLengthStyledSystem>> & {
     columnGap?: string | number | undefined;
     rowGap?: string | number | undefined;
     color?: string | undefined;