@ledgerhq/native-ui 0.32.0-nightly.1 → 0.33.0-next.0

package/lib/components/Form/TabSelector/index.d.ts

@@ -6,7 +6,8 @@ type TabSelectorProps<T extends string> = {
     }[];
     initialTab?: T extends infer K ? K : never;
     onToggle: (value: T) => void;
+    filledVariant?: boolean;
 };
-export default function TabSelector<T extends string>({ labels, initialTab, onToggle, }: TabSelectorProps<T>): JSX.Element;
+export default function TabSelector<T extends string>({ labels, initialTab, onToggle, filledVariant, }: TabSelectorProps<T>): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Form/TabSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/TabSelector/index.tsx"],"names":[],"mappings":";AA8BA,KAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAAI;IACxC,MAAM,EAAE;QAAE,EAAE,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC9B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,EACpD,MAAM,EACN,UAAU,EACV,QAAQ,GACT,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA4DnC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/TabSelector/index.tsx"],"names":[],"mappings":";AA8BA,KAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAAI;IACxC,MAAM,EAAE;QAAE,EAAE,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,EACpD,MAAM,EACN,UAAU,EACV,QAAQ,EACR,aAAqB,GACtB,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAuEnC"}

package/lib/components/Form/TabSelector/index.js

@@ -24,7 +24,7 @@ const Tab = styled(Flex) `
   align-items: center;
   justify-content: center;
 `;
-export default function TabSelector({ labels, initialTab, onToggle, }) {
+export default function TabSelector({ labels, initialTab, onToggle, filledVariant = false, }) {
     const [containerWidth, setContainerWidth] = useState(0);
     const initialIndex = initialTab ? labels.findIndex((l) => l.id === initialTab) : 0;
     const translateX = useSharedValue(0);
@@ -50,7 +50,16 @@ export default function TabSelector({ labels, initialTab, onToggle, }) {
             width: containerWidth / labels.length,
         };
     });
-    return (React.createElement(Box, { height: "100%", width: "100%", borderRadius: 12, border: 1, borderColor: "opacityDefault.c10", p: 2 },
+    const boxStyles = filledVariant
+        ? {
+            bg: "neutral.c30",
+        }
+        : {
+            p: 2,
+            border: 1,
+            borderColor: "opacityDefault.c10",
+        };
+    return (React.createElement(Box, { height: "100%", width: "100%", borderRadius: 12, bg: boxStyles.bg, p: boxStyles.p, border: boxStyles.border, borderColor: boxStyles.borderColor },
         React.createElement(Container, { onLayout: handleLayout },
             React.createElement(AnimatedBackground, { style: animatedStyle }),
             labels.map((label, index) => (React.createElement(Pressable, { hitSlop: 6, key: label.id, onPress: () => handlePress(label.id, index), style: ({ pressed }) => [

package/lib/components/cta/QuickAction/QuickActionButton/index.d.ts

@@ -10,12 +10,14 @@ export type QuickActionButtonProps = TouchableOpacityProps & BaseStyledProps & {
     onPressWhenDisabled?: TouchableOpacityProps["onPress"];
     textVariant?: TextVariants;
     variant?: Variant;
+    isActive?: boolean;
 };
 export declare const StyledText: import("styled-components").StyledComponent<({ children, bracket, textAlign, testID, ...props }: import("../../../Text").BaseTextProps) => React.JSX.Element, import("styled-components").DefaultTheme, {}, never>;
 export declare const Base: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<TouchableOpacityProps & React.RefAttributes<import("react-native").View>>, import("styled-components").DefaultTheme, TouchableOpacityProps & {
     visuallyDisabled?: boolean | undefined;
     variant: Variant;
+    isActive?: boolean | undefined;
 }, never>;
-declare const QuickActionButton: ({ Icon, children, disabled, onPress, onPressWhenDisabled, textVariant, variant, testID, ...otherProps }: QuickActionButtonProps) => React.ReactElement;
+declare const QuickActionButton: ({ Icon, children, disabled, onPress, onPressWhenDisabled, textVariant, variant, testID, isActive, ...otherProps }: QuickActionButtonProps) => React.ReactElement;
 export default QuickActionButton;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/cta/QuickAction/QuickActionButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/cta/QuickAction/QuickActionButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAEvE,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAmB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,KAAK,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAEjC,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,GACxD,eAAe,GAAG;IAChB,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;IACvD,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,eAAO,MAAM,UAAU,oNAGtB,CAAC;AAEF,eAAO,MAAM,IAAI;;aACgD,OAAO;SAcvE,CAAC;AAEF,QAAA,MAAM,iBAAiB,4GAUpB,sBAAsB,KAAG,MAAM,YA6BjC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/cta/QuickAction/QuickActionButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAEvE,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAmB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,KAAK,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAEjC,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,GACxD,eAAe,GAAG;IAChB,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;IACvD,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEJ,eAAO,MAAM,UAAU,oNAGtB,CAAC;AAEF,eAAO,MAAM,IAAI;;aACgD,OAAO;;SAmBvE,CAAC;AAEF,QAAA,MAAM,iBAAiB,sHAWpB,sBAAsB,KAAG,MAAM,YA8BjC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/cta/QuickAction/QuickActionButton/index.js

@@ -12,18 +12,26 @@ export const Base = baseStyled(TouchableOpacity) `
   text-align: center;
   align-items: center;
   justify-content: center;
-  border-radius: ${(p) => p.theme.radii[2]}px;
+  border-radius: ${({ isActive, theme }) => (isActive ? 14 : theme.radii[2])}px;
   padding: ${({ theme, variant }) => variant === "small" ? `${theme.space[3]}px ${theme.space[2]}px` : `0 ${theme.space[6]}px`};
-  ${({ visuallyDisabled, theme }) => visuallyDisabled
-    ? `border: 1px solid ${theme.colors.neutral.c30};`
-    : `background-color: ${theme.colors.neutral.c20};`}
+  ${({ visuallyDisabled, isActive, theme }) => {
+    if (visuallyDisabled) {
+        return `border: 1px solid ${theme.colors.neutral.c30};`;
+    }
+    else if (isActive) {
+        return `background-color: ${theme.colors.neutral.c30};`;
+    }
+    else {
+        return `background-color: ${theme.colors.neutral.c20};`;
+    }
+}}
 `;
-const QuickActionButton = ({ Icon, children, disabled, onPress, onPressWhenDisabled, textVariant = "body", variant = "large", testID, ...otherProps }) => {
+const QuickActionButton = ({ Icon, children, disabled, onPress, onPressWhenDisabled, textVariant = "body", variant = "large", testID, isActive = true, ...otherProps }) => {
     const text = // Extract the text to use it as a testID
      React.isValidElement(children) && children.props?.i18nKey
         ? children.props.i18nKey.split(".").pop() // Extract the last part of the key
         : children?.toString().toLowerCase();
-    return (React.createElement(Base, { disabled: onPressWhenDisabled ? false : disabled, onPress: disabled ? onPressWhenDisabled : onPress, visuallyDisabled: disabled, variant: variant, ...otherProps, testID: `${testID}-${text}` },
+    return (React.createElement(Base, { disabled: onPressWhenDisabled ? false : disabled, onPress: disabled ? onPressWhenDisabled : onPress, visuallyDisabled: disabled, variant: variant, isActive: !disabled && isActive, ...otherProps, testID: `${testID}-${text}` },
         React.createElement(Icon, { size: variant === "small" ? 20 : 24, color: disabled ? "neutral.c50" : "neutral.c100" }),
         React.createElement(StyledText, { numberOfLines: 1, variant: textVariant, fontWeight: "semiBold", color: disabled ? "neutral.c50" : "neutral.c100", mt: 2 }, children)));
 };

package/lib/components/cta/QuickAction/QuickActionList/index.d.ts

@@ -4,7 +4,8 @@ import { QuickActionButtonProps } from "../QuickActionButton";
 export type QuickActionListProps = Omit<FlatListProps<QuickActionButtonProps>, "renderItem"> & {
     id: string;
     testID?: string;
+    isActive?: boolean;
 };
-declare const QuickActionList: ({ numColumns, data, id, testID, ...otherProps }: QuickActionListProps) => React.ReactElement;
+declare const QuickActionList: ({ numColumns, data, id, testID, isActive, ...otherProps }: QuickActionListProps) => React.ReactElement;
 export default QuickActionList;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/cta/QuickAction/QuickActionList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/cta/QuickAction/QuickActionList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAY,aAAa,EAAE,MAAM,cAAc,CAAC;AAEvD,OAA0B,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEjF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,EAAE,YAAY,CAAC,GAAG;IAC7F,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,QAAA,MAAM,eAAe,oDAMlB,oBAAoB,KAAG,MAAM,YA0B/B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/cta/QuickAction/QuickActionList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAY,aAAa,EAAE,MAAM,cAAc,CAAC;AAEvD,OAA0B,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEjF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,EAAE,YAAY,CAAC,GAAG;IAC7F,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,eAAe,8DAOlB,oBAAoB,KAAG,MAAM,YA2B/B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/cta/QuickAction/QuickActionList/index.js

@@ -1,9 +1,9 @@
 import React, { useCallback } from "react";
 import { FlatList } from "react-native";
 import QuickActionButton from "../QuickActionButton";
-const QuickActionList = ({ numColumns = 3, data, id, testID, ...otherProps }) => {
+const QuickActionList = ({ numColumns = 3, data, id, testID, isActive = false, ...otherProps }) => {
     const renderItem = useCallback(({ item, index }) => {
-        return (React.createElement(QuickActionButton, { ...item, flex: 1, mr: (index + 1) % numColumns > 0 && data && index !== data.length - 1 ? 4 : 0, mb: data?.length && index + numColumns < data.length ? 4 : 0, testID: testID }));
+        return (React.createElement(QuickActionButton, { ...item, isActive: isActive, flex: 1, mr: (index + 1) % numColumns > 0 && data && index !== data.length - 1 ? 4 : 0, mb: data?.length && index + numColumns < data.length ? 4 : 0, testID: testID }));
     }, []);
     return (React.createElement(FlatList, { ...otherProps, data: data, keyExtractor: (_item, index) => `${id}${index}`, horizontal: false, renderItem: renderItem, numColumns: numColumns }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.32.0-nightly.1",
+  "version": "0.33.0-next.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -39,9 +39,9 @@
     "react-native-modal": "^13.0.0",
     "rn-range-slider": "2.1.1",
     "styled-system": "^5.1.5",
-    "@ledgerhq/crypto-icons-ui": "^1.12.0-nightly.0",
-    "@ledgerhq/ui-shared": "^0.3.0",
-    "@ledgerhq/icons-ui": "^0.9.0"
+    "@ledgerhq/crypto-icons-ui": "^1.12.0",
+    "@ledgerhq/icons-ui": "^0.9.0",
+    "@ledgerhq/ui-shared": "^0.3.0"
   },
   "peerDependencies": {
     "react": ">=17",