@ledgerhq/native-ui 0.4.0 → 0.6.2

package/components/Form/index.js

@@ -2,4 +2,5 @@ export { default as Checkbox } from "./Checkbox";
 export * from "./Input";
 export { default as Slider } from "./Slider";
 export { default as Switch } from "./Switch";
+export { default as Toggle } from "./Toggle";
 export { default as SelectableList } from "./SelectableList";

package/components/Icon/BoxedIcon.d.ts

@@ -0,0 +1,49 @@
+import { IconOrElementType, IconType } from "./type";
+export declare const DEFAULT_BOX_SIZE = 40;
+export declare const DEFAULT_ICON_SIZE = 16;
+export declare const DEFAULT_BADGE_SIZE = 20;
+export declare type Variant = "square" | "circle";
+export declare type IconBoxProps = {
+    /**
+     * Component that takes `{size?: number; color?: string}` as props. Will be rendered at the top right with the size provided in `badgeSize` or a default size.
+     */
+    Badge?: IconType;
+    /**
+     * Color of the border
+     */
+    borderColor?: string;
+    /**
+     * Badge color, will be applied to the component provided in the `Badge` prop
+     */
+    badgeColor?: string;
+    /**
+     * Badge size, will be applied to the component provided in the `Badge` prop
+     */
+    badgeSize?: number;
+    children?: JSX.Element;
+    /**
+     * Box size for preview
+     */
+    size?: number;
+    /**
+     * Box variant (box or circled)
+     */
+    variant?: Variant;
+};
+export declare type BoxedIconProps = IconBoxProps & {
+    /**
+     * Component that takes `{size?: number; color?: string}` as props. Will be rendered at the top right with the size provided in `iconSize` or a default size.
+     */
+    Icon: IconOrElementType;
+    /**
+     * Icon size, will be applied to the component provided in the `Icon` prop
+     */
+    iconSize?: number;
+    /**
+     * Icon color, will be applied to the component provided in the `Icon` prop
+     */
+    iconColor?: string;
+};
+export declare const IconBox: ({ Badge, size, children, borderColor, badgeColor, badgeSize, variant, }: IconBoxProps) => JSX.Element;
+declare const BoxedIcon: ({ Icon, iconSize, iconColor, ...iconBoxProps }: BoxedIconProps) => JSX.Element;
+export default BoxedIcon;

package/components/Icon/BoxedIcon.js

@@ -0,0 +1,85 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import styled, { useTheme } from "styled-components/native";
+import { PixelRatio } from "react-native";
+import { Rect, ClipPath, Svg, Defs } from "react-native-svg";
+import Flex from "../Layout/Flex";
+import Box from "../Layout/Box";
+export const DEFAULT_BOX_SIZE = 40;
+export const DEFAULT_ICON_SIZE = 16;
+export const DEFAULT_BADGE_SIZE = 20;
+const BORDER_RADIUS = 2;
+function getClipRectangleSize(badgeSize) {
+    return (3 / 4) * badgeSize;
+}
+const Container = styled(Flex).attrs((p) => ({
+    heigth: p.size,
+    width: p.size,
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    overflow: "visible",
+})) ``;
+const IconBoxBackground = styled(Flex) `
+  position: absolute;
+  height: ${(p) => p.size}px;
+  width: ${(p) => p.size}px;
+  border-radius: ${(p) => (p.variant === "circle" ? p.size : p.theme.radii[BORDER_RADIUS])}px;
+`;
+const BadgeContainer = styled.View `
+  position: absolute;
+  overflow: visible;
+  ${(p) => `
+    top: -${p.badgeSize / 2 - 2}px;
+    right: -${p.badgeSize / 2 - 2}px;
+    height: ${p.badgeSize}px;
+    width: ${p.badgeSize}px;`}
+`;
+/** This component is needed to draw a border that is clipped behind the badge icon */
+const IconBoxBackgroundSVG = ({ size, borderColor, badgeSize, variant = "square", }) => {
+    const { colors, radii } = useTheme();
+    const borderRadius = radii[BORDER_RADIUS];
+    const borderWidth = 1;
+    const paletteStr = borderColor.split(".")[0];
+    // @ts-expect-error idk how to handle this properly pls help
+    const palette = colors[paletteStr];
+    const strokeColor = (palette ? palette[borderColor.split(".")[1]] : borderColor) || colors.neutral.c40;
+    const squareSize = getClipRectangleSize(badgeSize);
+    /**
+     * The following adjustments are necessary to have visual consistency
+     *  between RN (native) Views with border and this component
+     */
+    const svgSize = size + borderWidth;
+    const rectSize = size - borderWidth;
+    const rectRadius = variant === "circle" ? size : borderRadius - borderWidth / 2;
+    return (React.createElement(Box, { position: "absolute", overflow: "hidden" },
+        React.createElement(Svg, { height: svgSize, width: svgSize },
+            React.createElement(Defs, null,
+                React.createElement(ClipPath, { id: "clip" },
+                    React.createElement(Rect, { x: "0", y: "0", width: svgSize - squareSize, height: squareSize }),
+                    React.createElement(Rect, { x: "0", y: squareSize, width: "100%", height: svgSize - squareSize }))),
+            React.createElement(Rect, { strokeWidth: PixelRatio.roundToNearestPixel(borderWidth), stroke: strokeColor, x: borderWidth, y: borderWidth, rx: rectRadius, ry: rectRadius, width: rectSize, height: rectSize, fill: "transparent", clipPath: "url(#clip)" }))));
+};
+export const IconBox = ({ Badge, size = DEFAULT_BOX_SIZE, children, borderColor = "neutral.c40", badgeColor, badgeSize = DEFAULT_BADGE_SIZE, variant = "square", }) => {
+    const hasBadge = !!Badge;
+    return (React.createElement(Container, { size: size },
+        hasBadge ? (React.createElement(IconBoxBackgroundSVG, { size: size, badgeSize: badgeSize, borderColor: borderColor, variant: variant })) : (React.createElement(IconBoxBackground, { border: "1px solid", size: size, borderColor: borderColor, variant: variant })),
+        children,
+        hasBadge && (React.createElement(BadgeContainer, { badgeSize: badgeSize },
+            React.createElement(Badge, { size: badgeSize, color: badgeColor })))));
+};
+const BoxedIcon = (_a) => {
+    var { Icon, iconSize = DEFAULT_ICON_SIZE, iconColor } = _a, iconBoxProps = __rest(_a, ["Icon", "iconSize", "iconColor"]);
+    return (React.createElement(IconBox, Object.assign({}, iconBoxProps), React.isValidElement(Icon) ? (Icon) : (React.createElement(Icon, { size: iconSize || DEFAULT_ICON_SIZE, color: iconColor }))));
+};
+export default BoxedIcon;

package/components/Icon/Icon.d.ts

@@ -0,0 +1,9 @@
+export declare type Props = {
+    name: string;
+    size?: number;
+    weight?: "Regular" | "Thin" | "Light" | "Medium" | "UltraLight";
+    color?: string;
+};
+export declare const iconNames: string[];
+declare const Icon: ({ name, size, color, weight, }: Props) => JSX.Element | null;
+export default Icon;

package/components/Icon/Icon.js

@@ -0,0 +1,20 @@
+import * as icons from "@ledgerhq/icons-ui/native";
+import React from "react";
+export const iconNames = Array.from(Object.keys(icons).reduce((set, rawKey) => {
+    const key = rawKey
+        .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, "$1")
+        .replace(/(.+)(Ultra)+$/g, "$1");
+    if (!set.has(key))
+        set.add(key);
+    return set;
+}, new Set()));
+const Icon = ({ name, size = 16, color = "currentColor", weight = "Medium", }) => {
+    const maybeIconName = `${name}${weight}`;
+    if (maybeIconName in icons) {
+        // @ts-expect-error FIXME I don't know how to make you happy ts
+        const Component = icons[maybeIconName];
+        return React.createElement(Component, { size: size, color: color });
+    }
+    return null;
+};
+export default Icon;

package/components/Icon/IconBox/index.d.ts

@@ -1,9 +1,7 @@
 import React from "react";
+import { IconOrElementType } from "../type";
 declare type Props = {
-    Icon: (props: {
-        size?: number;
-        color?: string;
-    }) => React.ReactElement;
+    Icon: IconOrElementType;
     color?: string;
     boxSize?: number;
     iconSize?: number;

package/components/Icon/IconBox/index.js

@@ -14,6 +14,5 @@ const IconContainer = styled.View `
 `;
 export default function IconBox({ Icon, color, boxSize = DEFAULT_BOX_SIZE, iconSize = DEFAULT_ICON_SIZE, }) {
     const { colors } = useTheme();
-    return (React.createElement(IconContainer, { size: boxSize },
-        React.createElement(Icon, { size: iconSize, color: color || colors.neutral.c100 })));
+    return (React.createElement(IconContainer, { size: boxSize }, React.isValidElement(Icon) ? (Icon) : (React.createElement(Icon, { size: iconSize, color: color || colors.neutral.c100 }))));
 }

package/components/Icon/index.d.ts

@@ -1 +1,3 @@
 export { default as IconBox } from "./IconBox";
+export { default as BoxedIcon } from "./BoxedIcon";
+export { default as Icon } from "./Icon";

package/components/Icon/index.js

@@ -1 +1,3 @@
 export { default as IconBox } from "./IconBox";
+export { default as BoxedIcon } from "./BoxedIcon";
+export { default as Icon } from "./Icon";

package/components/Icon/type.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export declare type IconProps = {
+    size?: number;
+    color?: string;
+};
+export declare type IconType = React.ComponentType<IconProps>;
+export declare type IconOrElementType = IconType | React.ReactElement;

package/components/Icon/type.js

@@ -0,0 +1 @@
+export {};

package/components/Layout/Box/index.d.ts

@@ -0,0 +1,11 @@
+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>> & {
+    columnGap?: string | number | undefined;
+    rowGap?: string | number | undefined;
+    color?: string | undefined;
+    display?: string | undefined;
+    position?: string | undefined;
+    maxHeight?: number | undefined;
+}, never>;
+export default Box;

package/components/Layout/Box/index.js

@@ -0,0 +1,3 @@
+import baseStyled from "../../styled";
+const Box = baseStyled.View ``;
+export default Box;

package/components/Layout/Collapse/Accordion/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import Animated, { useSharedValue, withTiming, useAnimatedStyle, Easing, } from "react-native-reanimated";
 import Link from "../../../cta/Link";
-import { ChevronBottomMedium, ChevronTopMedium, } from "@ledgerhq/icons-ui/native";
+import { ChevronBottomMedium, ChevronTopMedium } from "@ledgerhq/icons-ui/native";
 import { View } from "react-native";
 const Accordion = ({ collapsed = false, children, title, onPress, }) => {
     const animationHeight = useSharedValue(collapsed ? "0%" : "100%");

package/components/Layout/Flex/index.d.ts

@@ -1,13 +1,12 @@
-/// <reference types="styled-components-react-native" />
-import React from "react";
-import { BackgroundProps, ColorProps, FlexboxProps, LayoutProps, SpaceProps } from "styled-system";
-export interface Props extends ColorProps, BackgroundProps, LayoutProps, FlexboxProps, SpaceProps {
-    alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
-    flexBasis?: string;
-    flexDirection?: "row" | "row-reverse" | "column" | "column-reverse";
-    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
-    children?: React.ReactNode;
-    style?: Record<string, unknown>;
-}
-declare const FlexBox: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, Props, never>;
+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>> & {
+    columnGap?: string | number | undefined;
+    rowGap?: string | number | undefined;
+    color?: string | undefined;
+    display?: string | undefined;
+    position?: string | undefined;
+    maxHeight?: number | undefined;
+}, never>;
 export default FlexBox;

package/components/Layout/Flex/index.js

@@ -1,11 +1,5 @@
-import styled from "styled-components/native";
-import { background, color, flexbox, layout, space, } from "styled-system";
-const FlexBox = styled.View `
+import baseStyled from "../../styled";
+const FlexBox = baseStyled.View `
   display: flex;
-  ${flexbox};
-  ${space};
-  ${background};
-  ${color};
-  ${layout};
 `;
 export default FlexBox;

package/components/Layout/List/IconBoxList/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { BaseListItemProps, BaseListProps } from "../List";
+import { IconType } from "../../../Icon/type";
+export declare type IconBoxListItemProps = Omit<BaseListItemProps, "bullet"> & {
+    Icon: IconType;
+};
+export declare type IconBoxListProps = Omit<BaseListProps, "items"> & {
+    items: IconBoxListItemProps[];
+};
+export default function IconBoxList({ items, ...props }: IconBoxListProps): React.ReactElement;

package/components/Layout/List/IconBoxList/index.js

@@ -0,0 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useMemo } from "react";
+import List from "../List";
+import { IconBox } from "../../../Icon";
+export default function IconBoxList(_a) {
+    var { items } = _a, props = __rest(_a, ["items"]);
+    const iconBoxItems = useMemo(() => items.map((item) => (Object.assign(Object.assign({}, item), { bullet: React.createElement(IconBox, { Icon: item.Icon, boxSize: 48, iconSize: 20 }) }))), [items]);
+    return React.createElement(List, Object.assign({ items: iconBoxItems }, props));
+}

package/components/Layout/List/List/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { BaseStyledProps } from "../../../styled";
+export declare type BaseListItemProps = {
+    title?: string;
+    description?: string;
+    bullet?: React.ReactNode;
+};
+export declare type BaseListProps = {
+    items: BaseListItemProps[];
+    itemContainerProps?: BaseStyledProps;
+};
+export declare const ListItem: ({ title, description, bullet, ...props }: BaseStyledProps & BaseListItemProps) => React.ReactElement;
+export default function List({ items, itemContainerProps, ...props }: BaseListProps): React.ReactElement;

package/components/Layout/List/List/index.js

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useCallback } from "react";
+import Text from "../../../Text";
+import { Box, Flex } from "../../index";
+import { FlatList } from "react-native";
+export const ListItem = (_a) => {
+    var { title, description, bullet = null } = _a, props = __rest(_a, ["title", "description", "bullet"]);
+    return (React.createElement(Flex, Object.assign({ flexDirection: "row", alignItems: "center" }, props),
+        bullet && (React.createElement(Box, { mr: 7, flexShrink: 0 }, bullet)),
+        React.createElement(Flex, { flexDirection: "column", flexShrink: 1, flexWrap: "nowrap" },
+            title && (React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: "neutral.c100", flexShrink: 1, mb: description ? 2 : null }, title)),
+            description && (React.createElement(Text, { variant: "body", fontWeight: "medium", color: "neutral.c80", flexShrink: 1 }, description)))));
+};
+export default function List(_a) {
+    var { items, itemContainerProps } = _a, props = __rest(_a, ["items", "itemContainerProps"]);
+    const renderItem = useCallback(({ item }) => (React.createElement(ListItem, Object.assign({}, item, { mb: 6, pb: 2 }, itemContainerProps))), [itemContainerProps]);
+    return (React.createElement(Flex, Object.assign({ flexDirection: "column" }, props),
+        React.createElement(FlatList, { data: items, renderItem: renderItem })));
+}

package/components/Layout/List/NumberedList/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { BaseListItemProps, BaseListProps } from "../List";
+export declare type NumberedListItemProps = Omit<BaseListItemProps, "bullet"> & {
+    number?: number;
+};
+export declare type NumberedListProps = Omit<BaseListProps, "items"> & {
+    items: NumberedListItemProps[];
+};
+export default function NumberedList({ items, ...props }: NumberedListProps): React.ReactElement;

package/components/Layout/List/NumberedList/index.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useMemo } from "react";
+import List from "../List";
+import { IconBox } from "../../../Icon";
+import Text from "../../../Text";
+export default function NumberedList(_a) {
+    var { items } = _a, props = __rest(_a, ["items"]);
+    const numberedItems = useMemo(() => items.map((item, index) => (Object.assign(Object.assign({}, item), { bullet: (React.createElement(IconBox, { Icon: React.createElement(Text, { variant: "body", fontWeight: "medium", color: "neutral.c100" }, item.number ? item.number : index), boxSize: 36 })) }))), [items]);
+    return React.createElement(List, Object.assign({ items: numberedItems }, props));
+}

package/components/Layout/List/TipList/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { BaseListItemProps, BaseListProps } from "../List";
+export declare type TipListItemProps = Omit<BaseListItemProps, "bullet"> & {
+    isPositive: boolean;
+};
+export declare type TipListProps = Omit<BaseListProps, "items"> & {
+    items: TipListItemProps[];
+};
+export default function TipList({ items, ...props }: TipListProps): React.ReactElement;

package/components/Layout/List/TipList/index.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useMemo } from "react";
+import List from "../List";
+import Check from "@ledgerhq/icons-ui/native/CheckAloneMedium";
+import Close from "@ledgerhq/icons-ui/native/CloseMedium";
+export default function TipList(_a) {
+    var { items } = _a, props = __rest(_a, ["items"]);
+    const tipItems = useMemo(() => items.map((item) => (Object.assign(Object.assign({}, item), { bullet: item.isPositive ? (React.createElement(Check, { size: 20, color: "success.c100" })) : (React.createElement(Close, { size: 20, color: "error.c100" })) }))), [items]);
+    return React.createElement(List, Object.assign({ items: tipItems }, props));
+}

package/components/Layout/List/index.d.ts

@@ -0,0 +1,4 @@
+export { default as List } from "./List";
+export { default as IconBoxList } from "./IconBoxList";
+export { default as TipList } from "./TipList";
+export { default as NumberedList } from "./NumberedList";

package/components/Layout/List/index.js

@@ -0,0 +1,4 @@
+export { default as List } from "./List";
+export { default as IconBoxList } from "./IconBoxList";
+export { default as TipList } from "./TipList";
+export { default as NumberedList } from "./NumberedList";

package/components/Layout/ScrollContainer/index.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
+import { BaseStyledProps } from "../../styled";
 import type { NativeSyntheticEvent, NativeScrollEvent, ScrollViewProps } from "react-native";
-declare type ScrollContainerProps = ScrollViewProps & SpaceProps & {
+declare type ScrollContainerProps = BaseStyledProps & ScrollViewProps & SpaceProps & {
     children: React.ReactNode;
     onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
     horizontal?: boolean;

package/components/Layout/ScrollContainer/index.js

@@ -11,9 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from "react";
 import { space } from "styled-system";
-import styled from "styled-components/native";
+import baseStyled from "../../styled";
 import Animated from "react-native-reanimated";
-const ScrollView = styled(Animated.ScrollView) `
+const ScrollView = baseStyled(Animated.ScrollView) `
   ${space};
 `;
 const ScrollContainer = (_a) => {

package/components/Layout/ScrollContainerHeader/Header.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import Animated from "react-native-reanimated";
 export declare type HeaderProps = {
     TopLeftSection?: JSX.Element;
@@ -8,5 +7,5 @@ export declare type HeaderProps = {
     BottomSection?: JSX.Element;
     currentPositionY: Animated.SharedValue<number>;
 };
-declare const Header: ({ TopLeftSection, TopRightSection, MiddleSection, BottomSection, currentPositionY, }: HeaderProps) => JSX.Element;
+declare const Header: ({ TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, currentPositionY, }: HeaderProps) => JSX.Element;
 export default Header;

package/components/Layout/ScrollContainerHeader/Header.js

@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from "react";
-import { View } from "react-native";
 import styled from "styled-components/native";
-import Animated, { useAnimatedStyle, interpolate, Extrapolate, } from "react-native-reanimated";
+import Animated, { useAnimatedStyle, interpolate, Extrapolate } from "react-native-reanimated";
 import Flex from "../Flex";
 const Container = styled(Flex).attrs({
     paddingHorizontal: 16,
@@ -10,7 +9,7 @@ const Container = styled(Flex).attrs({
   width: 100%;
 `;
 const SCROLL_BREAKPOINT = 80;
-const Header = ({ TopLeftSection, TopRightSection, MiddleSection, BottomSection, currentPositionY, }) => {
+const Header = ({ TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, currentPositionY, }) => {
     const [topSectionHeight, setTopSectionHeight] = useState(0);
     const [topSectionWidth, setTopSectionWidth] = useState(0);
     const [topMiddleWidth, setTopMiddleWidth] = useState(0);
@@ -29,34 +28,42 @@ const Header = ({ TopLeftSection, TopRightSection, MiddleSection, BottomSection,
     const onLayoutMiddle = useCallback(({ nativeEvent: { layout } }) => {
         setMiddleWidth(layout.width);
     }, []);
+    const TopMiddleStyle = useAnimatedStyle(() => {
+        const scaleRatio = middleWidth ? Math.min(topMiddleWidth / middleWidth, 0.9) : 0.7;
+        /** scale the animated content to fit in the available space on the top header section */
+        const scale = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [1, scaleRatio], Extrapolate.CLAMP);
+        /** offset horizontaly given the scale transformation and potential top left header section */
+        const translateX = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [0, -(topMiddleWidth - topMiddleWidth * scaleRatio) / 2], Extrapolate.CLAMP);
+        const opacity = interpolate(currentPositionY.value, [SCROLL_BREAKPOINT - 1, SCROLL_BREAKPOINT + 40], [0, 1], Extrapolate.CLAMP);
+        return {
+            transform: [{ translateX }, { scale }],
+            flex: 1,
+            opacity,
+            justifyContent: "center", // needed to ensure vertical centering of animated content
+        };
+    }, [topLeftWidth, topSectionHeight, middleWidth, topMiddleWidth, topSectionWidth]);
     const MiddleStyle = useAnimatedStyle(() => {
-        const scaleRatio = middleWidth
-            ? Math.min(topMiddleWidth / middleWidth, 0.9)
-            : 0.7;
+        const scaleRatio = middleWidth ? Math.min(topMiddleWidth / middleWidth, 0.9) : 0.7;
         /** scale the animated content to fit in the available space on the top header section */
         const scale = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [1, scaleRatio], Extrapolate.CLAMP);
         /** translate verticaly to the middle of the top header section */
         const translateY = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [0, -topSectionHeight + topSectionHeight / 2], Extrapolate.CLAMP);
         /** offset horizontaly given the scale transformation and potential top left header section */
-        const translateX = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [0, -(topSectionWidth - topMiddleWidth) / 2 + topLeftWidth], Extrapolate.CLAMP);
+        const translateX = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [0, -(topSectionWidth - topSectionWidth * scaleRatio) / 2 + topLeftWidth], Extrapolate.CLAMP);
         /** allow for content to move upward as animation is taking place */
         const maxHeight = interpolate(currentPositionY.value, [0, SCROLL_BREAKPOINT], [70, 0], Extrapolate.CLAMP);
+        const opacity = interpolate(currentPositionY.value, [SCROLL_BREAKPOINT - 1, SCROLL_BREAKPOINT + 40], [1, 0], Extrapolate.CLAMP);
         return {
             maxHeight,
             transform: [{ translateY }, { translateX }, { scale }],
+            opacity,
             justifyContent: "center", // needed to ensure vertical centering of animated content
         };
-    }, [
-        topLeftWidth,
-        topSectionHeight,
-        middleWidth,
-        topMiddleWidth,
-        topSectionWidth,
-    ]);
+    }, [topLeftWidth, topSectionHeight, middleWidth, topMiddleWidth, topSectionWidth]);
     return (React.createElement(Container, null,
         React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", onLayout: onLayout },
-            React.createElement(View, { onLayout: onLayoutTopLeft }, TopLeftSection),
-            React.createElement(Flex, { flex: 1, onLayout: onLayoutTopMiddle }),
+            React.createElement(Flex, { onLayout: onLayoutTopLeft }, TopLeftSection),
+            React.createElement(Animated.View, { style: [TopMiddleStyle], onLayout: topMiddleWidth ? () => { } : onLayoutTopMiddle }, TopMiddleSection || MiddleSection),
             TopRightSection),
         React.createElement(Animated.View, { onLayout: middleWidth ? () => { } : onLayoutMiddle, style: MiddleStyle }, MiddleSection),
         BottomSection ? React.createElement(Flex, null, BottomSection) : null));

package/components/Layout/ScrollContainerHeader/index.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
-import type { ScrollViewProps } from "react-native";
+import { FlatListProps } from "react-native";
 import type { HeaderProps } from "./Header";
-declare type ScrollContainerHeaderProps = Omit<HeaderProps, "currentPositionY"> & Omit<ScrollViewProps, "onScroll"> & {
+import { BaseStyledProps } from "../../styled";
+declare type ScrollContainerHeaderProps = BaseStyledProps & Omit<HeaderProps, "currentPositionY"> & Omit<FlatListProps<any>, "onScroll" | "data" | "renderItem" | "stickyHeaderIndices"> & {
     children?: React.ReactNode;
     onScroll?: (y: number) => void;
 };

package/components/Layout/ScrollContainerHeader/index.js

@@ -10,8 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from "react";
-import Animated, { useAnimatedScrollHandler, useSharedValue, } from "react-native-reanimated";
+import { View } from "react-native";
+import Animated, { useAnimatedScrollHandler, useSharedValue } from "react-native-reanimated";
 import Header from "./Header";
+import baseStyled from "../../styled";
+const StyledFlatList = baseStyled.FlatList ``;
+const AnimatedFlatList = Animated.createAnimatedComponent(StyledFlatList);
 const ScrollContainerHeader = (_a) => {
     var { TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, children, onScroll } = _a, props = __rest(_a, ["TopLeftSection", "TopRightSection", "TopMiddleSection", "MiddleSection", "BottomSection", "children", "onScroll"]);
     const currentPositionY = useSharedValue(0);
@@ -20,8 +24,9 @@ const ScrollContainerHeader = (_a) => {
         if (onScroll)
             onScroll(event.contentOffset.y);
     });
-    return (React.createElement(Animated.ScrollView, Object.assign({}, props, { onScroll: handleScroll, scrollEventThrottle: 16, stickyHeaderIndices: [0] }),
-        React.createElement(Header, { TopLeftSection: TopLeftSection, TopRightSection: TopRightSection, TopMiddleSection: TopMiddleSection, MiddleSection: MiddleSection, BottomSection: BottomSection, currentPositionY: currentPositionY }),
-        children));
+    return (React.createElement(AnimatedFlatList, Object.assign({}, props, { onScroll: handleScroll, scrollEventThrottle: 16, stickyHeaderIndices: [0], data: [
+            React.createElement(Header, { TopLeftSection: TopLeftSection, TopRightSection: TopRightSection, TopMiddleSection: TopMiddleSection, MiddleSection: MiddleSection, BottomSection: BottomSection, currentPositionY: currentPositionY }),
+            children,
+        ], renderItem: ({ item, index }) => (React.createElement(View, { key: index }, item)) })));
 };
 export default ScrollContainerHeader;

package/components/Layout/index.d.ts

@@ -1,6 +1,8 @@
 export { default as Accordion } from "./Collapse/Accordion";
 export { default as Flex } from "./Flex";
+export { default as Box } from "./Box";
 export * from "./Modals";
 export { default as ScrollContainer } from "./ScrollContainer";
 export { default as ScrollContainerHeader } from "./ScrollContainerHeader";
 export { default as Row } from "./Table/Row";
+export * from "./List";

package/components/Layout/index.js

@@ -1,6 +1,8 @@
 export { default as Accordion } from "./Collapse/Accordion";
 export { default as Flex } from "./Flex";
+export { default as Box } from "./Box";
 export * from "./Modals";
 export { default as ScrollContainer } from "./ScrollContainer";
 export { default as ScrollContainerHeader } from "./ScrollContainerHeader";
 export { default as Row } from "./Table/Row";
+export * from "./List";