@ledgerhq/lumen-ui-rnative 0.1.13 → 0.1.15

package/src/lib/Components/Tile/Tile.test.tsx

@@ -1,7 +1,6 @@
 import { describe, it, expect, jest } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, fireEvent } from '@testing-library/react-native';
-import React from 'react';
 
 import { Settings } from '../../Symbols';
 import { Tag } from '../Tag';

package/src/lib/Components/TileButton/TileButton.test.tsx

@@ -1,7 +1,6 @@
 import { describe, it, expect, jest } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, screen, fireEvent } from '@testing-library/react-native';
-import React from 'react';
 import { ViewStyle } from 'react-native';
 
 import { Settings } from '../../Symbols';

package/src/lib/Components/Tooltip/GlobalTooltipBottomSheet.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import {
   BottomSheet,
   BottomSheetHeader,

package/src/lib/Components/Tooltip/GlobalTooltipContext.tsx

@@ -1,11 +1,5 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
-import React, {
-  useState,
-  useCallback,
-  useRef,
-  useMemo,
-  ReactNode,
-} from 'react';
+import { useState, useCallback, useRef, useMemo, ReactNode } from 'react';
 
 export type TooltipData = {
   id: string;

package/src/lib/Components/Tooltip/Tooltip.test.tsx

@@ -1,7 +1,6 @@
 import { describe, it, expect, jest } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, fireEvent } from '@testing-library/react-native';
-import React from 'react';
 import { Text, View } from 'react-native';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { GlobalTooltipBottomSheet } from './GlobalTooltipBottomSheet';

package/src/lib/Components/TriggerButton/TriggerButton.test.tsx

@@ -1,7 +1,7 @@
 import { describe, it, expect, jest } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, screen, fireEvent } from '@testing-library/react-native';
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 import { View, ViewStyle } from 'react-native';
 
 import { Settings } from '../../Symbols';

package/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.tsx

@@ -158,7 +158,7 @@ export const CryptoGradients: Story = {
                   borderRadius: 'md',
                 }}
                 stops={gradient}
-              ></LinearGradient>
+              />
               <Text typography='body4' lx={{ color: 'base' }}>
                 {key}
               </Text>

package/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.test.tsx

@@ -1,7 +1,7 @@
 import { describe, it, expect } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, screen } from '@testing-library/react-native';
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 import { Text, View } from 'react-native';
 
 import { ThemeProvider } from '../../../ThemeProvider/ThemeProvider';

package/src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.test.tsx

@@ -1,7 +1,7 @@
 import { describe, it, expect } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, screen } from '@testing-library/react-native';
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 import { Text, View } from 'react-native';
 
 import { ThemeProvider } from '../../../ThemeProvider/ThemeProvider';

package/src/lib/Components/Utility/Pressable/Pressable.test.tsx

@@ -1,7 +1,7 @@
 import { describe, it, expect, jest } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, screen, fireEvent } from '@testing-library/react-native';
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 import { Text, View, ViewStyle } from 'react-native';
 
 import { ThemeProvider } from '../../ThemeProvider/ThemeProvider';

package/src/lib/Symbols/Icons/Csv.tsx

@@ -43,7 +43,7 @@ export const Csv = createIcon(
     />
     <Path
       fill='currentColor'
-      d='M1.86 13.656a.467.467 0 0 1 .641.156.13.13 0 0 0 .043.044q.015.01.04.01h.426a.08.08 0 0 0 .079-.078.08.08 0 0 0-.062-.078l-.728-.183a1.012 1.012 0 0 1 .247-1.994h.426c.39 0 .704.217.878.502a.467.467 0 0 1-.797.486.13.13 0 0 0-.042-.044.1.1 0 0 0-.039-.01h-.426a.079.079 0 0 0-.02.155l.73.183A1.012 1.012 0 0 1 3.01 14.8h-.426c-.391 0-.705-.217-.879-.503a.467.467 0 0 1 .156-.64m2.34.01v-1c0-.625.507-1.133 1.133-1.133H6a.467.467 0 0 1 0 .934h-.667a.2.2 0 0 0-.2.2v1c0 .11.09.2.2.2H6a.467.467 0 0 1 0 .933h-.667A1.134 1.134 0 0 1 4.2 13.667m5.01-2.115c.248.07.392.327.323.575l-.656 2.334a.47.47 0 0 1-.45.34H7.99a.47.47 0 0 1-.45-.34l-.656-2.334a.467.467 0 0 1 .899-.252l.425 1.514.426-1.514a.467.467 0 0 1 .576-.323'
+      d='M4.483 13.656a.467.467 0 0 1 .641.156q.022.034.043.044.015.01.04.01h.426a.08.08 0 0 0 .079-.078.08.08 0 0 0-.062-.078l-.728-.183a1.013 1.013 0 0 1 .247-1.994h.426c.39 0 .704.217.878.502a.467.467 0 0 1-.797.486.13.13 0 0 0-.042-.044.1.1 0 0 0-.039-.01H5.17a.079.079 0 0 0-.02.155l.73.183a1.012 1.012 0 0 1-.246 1.995h-.427c-.39 0-.705-.217-.878-.503a.467.467 0 0 1 .155-.64m4.727-2.105c.248.07.392.327.323.575l-.656 2.334a.47.47 0 0 1-.45.34H7.99a.47.47 0 0 1-.45-.34l-.656-2.334a.467.467 0 0 1 .899-.252l.425 1.514.426-1.514a.467.467 0 0 1 .576-.323M1.538 12.667v1c0 .626.508 1.133 1.134 1.133h.666a.467.467 0 0 0 0-.934h-.666a.2.2 0 0 1-.2-.2v-1c0-.11.09-.2.2-.2h.666a.467.467 0 0 0 0-.933h-.666c-.626 0-1.134.508-1.134 1.134'
     />
   </Svg>,
 );

package/src/lib/Symbols/Icons/TriangleDown.tsx

@@ -0,0 +1,42 @@
+import Svg, { Path } from 'react-native-svg';
+import createIcon from '../../Components/Icon/createIcon';
+
+/**
+ * TriangleDown icon component for React Native.
+ *
+ * This icon component is automatically generated from SVG files and uses the createIcon utility
+ * to create a consistent icon interface. It supports all standard SVG props (from react-native-svg)
+ * and additional size variants defined in the Icon component.
+ *
+ * @component
+ * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
+ * @param {string} [color] - The color of the icon.
+ * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
+ *
+ * @example
+ * // Basic usage with default size (24px)
+ * import { TriangleDown } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <TriangleDown />
+ *
+ * @example
+ * // With custom size and style
+ * <TriangleDown size={40} color="warning" lx={{ marginTop: 's4' }} />
+ *
+ * @example
+ * // Used within a Button component
+ * import { Button } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <Button icon={TriangleDown} size="md">
+ *   Click me
+ * </Button>
+ */
+export const TriangleDown = createIcon(
+  'TriangleDown',
+  <Svg width={24} height={24} fill='currentColor' viewBox='0 0 16 16'>
+    <Path
+      fill='currentColor'
+      d='M13.038 5.347 8.82 12.06a1 1 0 0 1-1.696-.004L2.95 5.343a1 1 0 0 1 .85-1.528h8.39a1 1 0 0 1 .848 1.532'
+    />
+  </Svg>,
+);

package/src/lib/Symbols/Icons/TriangleUp.tsx

@@ -0,0 +1,42 @@
+import Svg, { Path } from 'react-native-svg';
+import createIcon from '../../Components/Icon/createIcon';
+
+/**
+ * TriangleUp icon component for React Native.
+ *
+ * This icon component is automatically generated from SVG files and uses the createIcon utility
+ * to create a consistent icon interface. It supports all standard SVG props (from react-native-svg)
+ * and additional size variants defined in the Icon component.
+ *
+ * @component
+ * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
+ * @param {string} [color] - The color of the icon.
+ * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
+ *
+ * @example
+ * // Basic usage with default size (24px)
+ * import { TriangleUp } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <TriangleUp />
+ *
+ * @example
+ * // With custom size and style
+ * <TriangleUp size={40} color="warning" lx={{ marginTop: 's4' }} />
+ *
+ * @example
+ * // Used within a Button component
+ * import { Button } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <Button icon={TriangleUp} size="md">
+ *   Click me
+ * </Button>
+ */
+export const TriangleUp = createIcon(
+  'TriangleUp',
+  <Svg width={24} height={24} fill='currentColor' viewBox='0 0 16 16'>
+    <Path
+      fill='currentColor'
+      d='M13.038 11.512 8.82 4.798a1 1 0 0 0-1.696.004L2.95 11.516a1 1 0 0 0 .85 1.528h8.39a1 1 0 0 0 .848-1.532'
+    />
+  </Svg>,
+);

package/src/lib/Symbols/index.ts

@@ -238,6 +238,8 @@ export { Tools } from './Icons/Tools';
 export { TransferHorizontal } from './Icons/TransferHorizontal';
 export { TransferVertical } from './Icons/TransferVertical';
 export { Trash } from './Icons/Trash';
+export { TriangleDown } from './Icons/TriangleDown';
+export { TriangleUp } from './Icons/TriangleUp';
 export { Truck } from './Icons/Truck';
 export { Twitter } from './Icons/Twitter';
 export { Unlink } from './Icons/Unlink';

package/src/lib/types/index.ts

@@ -1,22 +1,22 @@
-import React from 'react';
+import { ElementType, ComponentPropsWithRef, ElementRef } from 'react';
 import type { Pressable, View } from 'react-native';
 
-type ComponentPropsWithAsChild<T extends React.ElementType<any>> =
-  React.ComponentPropsWithRef<T> & { asChild?: boolean };
+type ComponentPropsWithAsChild<T extends ElementType<any>> =
+  ComponentPropsWithRef<T> & { asChild?: boolean };
 
 type SlottableViewProps = ComponentPropsWithAsChild<typeof View>;
-type ViewRef = React.ElementRef<typeof View>;
-type PressableRef = React.ElementRef<typeof Pressable>;
+type ViewRef = ElementRef<typeof View>;
+type PressableRef = ElementRef<typeof Pressable>;
 
 type SlottablePressableProps = ComponentPropsWithAsChild<typeof Pressable> & {
   /**
    * Platform: WEB ONLY
    */
-  onKeyDown?: (ev: React.KeyboardEvent) => void;
+  onKeyDown?: (ev: KeyboardEvent) => void;
   /**
    * Platform: WEB ONLY
    */
-  onKeyUp?: (ev: React.KeyboardEvent) => void;
+  onKeyUp?: (ev: KeyboardEvent) => void;
 };
 
 type ForceMountable = {

package/src/lib/utils/react/extractTextFromChildren.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { Children, ComponentType, isValidElement, ReactNode } from 'react';
 
 /**
  * Recursively extracts text content from React children.
@@ -7,14 +7,14 @@ import React, { ReactNode } from 'react';
  */
 export function extractTextFromChildren(
   children: ReactNode,
-  textComponentType?: React.ComponentType<any>,
+  textComponentType?: ComponentType<any>,
 ): string {
   let text = '';
 
-  React.Children.forEach(children, (child) => {
+  Children.forEach(children, (child) => {
     if (typeof child === 'string' || typeof child === 'number') {
       text += child;
-    } else if (React.isValidElement(child)) {
+    } else if (isValidElement(child)) {
       if (
         (textComponentType && child.type === textComponentType) ||
         (child.props as { children?: ReactNode })?.children

package/src/lib/utils/useControllableState/useControllableState.ts

@@ -1,13 +1,11 @@
-import * as React from 'react';
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
 import { startTransition } from '../startTransition';
 import { useEvent } from '../useEvent';
 
 // can configure to allow most-recent-wins or prop-wins
 // defaults to prop-wins
 
-type ChangeCb<T> =
-  | ((next: T) => void)
-  | React.Dispatch<React.SetStateAction<T>>;
+type ChangeCb<T> = ((next: T) => void) | Dispatch<SetStateAction<T>>;
 
 const emptyCallbackFn = (_: any) => _();
 
@@ -27,16 +25,16 @@ export function useControllableState<T>({
   onChange?: ChangeCb<T>;
   strategy?: 'prop-wins' | 'most-recent-wins';
   transition?: boolean;
-}): [T, React.Dispatch<React.SetStateAction<T>>] {
-  const [state, setState] = React.useState(prop ?? defaultProp);
-  const previous = React.useRef<any>(state);
+}): [T, Dispatch<SetStateAction<T>>] {
+  const [state, setState] = useState(prop ?? defaultProp);
+  const previous = useRef<any>(state);
   const propWins = strategy === 'prop-wins' && prop !== undefined;
   const value = propWins ? prop : state;
   const onChangeCb = useEvent(onChange || idFn);
 
   const transitionFn = transition ? startTransition : emptyCallbackFn;
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (prop === undefined) return;
     previous.current = prop;
     transitionFn(() => {
@@ -44,7 +42,7 @@ export function useControllableState<T>({
     });
   }, [prop]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (propWins) return;
     if (state !== previous.current) {
       previous.current = state;

package/src/lib/utils/useEvent/useGet.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useRef, useCallback } from 'react';
 import { useIsomorphicLayoutEffect } from '../constants';
 
 /**
@@ -9,12 +9,12 @@ export function useGet<A>(
   initialValue?: any,
   forwardToFunction?: boolean,
 ): () => A {
-  const curRef = React.useRef<any>(initialValue ?? currentValue);
+  const curRef = useRef<any>(initialValue ?? currentValue);
   useIsomorphicLayoutEffect(() => {
     curRef.current = currentValue;
   });
 
-  return React.useCallback(
+  return useCallback(
     forwardToFunction
       ? (...args) => curRef.current?.apply(null, args)
       : () => curRef.current,

package/src/styles/hooks/useStyleSheet.test.tsx

@@ -5,7 +5,7 @@ import {
   userEvent,
   waitFor,
 } from '@testing-library/react-native';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { ColorSchemeName, Pressable, Text, View } from 'react-native';
 import { LumenStyleSheetProvider } from '../provider/LumenStyleSheetProvider';
 import { useStyleSheet } from './useStyleSheet';

package/src/styles/lx/createStyledPressable.test.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it, jest } from '@jest/globals';
 import { fireEvent, render, screen } from '@testing-library/react-native';
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 import {
   Pressable,
   PressableProps,

package/src/styles/lx/createStyledText.test.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it, jest } from '@jest/globals';
 import { render, screen } from '@testing-library/react-native';
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 import { Text, TextProps } from 'react-native';
 import { LumenStyleSheetProvider } from '../provider/LumenStyleSheetProvider';
 import { createStyledText } from './createStyledText';

package/src/styles/lx/createStyledView.test.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it, jest } from '@jest/globals';
 import { render, screen } from '@testing-library/react-native';
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 import { View, ViewProps } from 'react-native';
 import { LumenStyleSheetProvider } from '../provider/LumenStyleSheetProvider';
 import { createStyledView } from './createStyledView';

package/src/styles/lx/resolveStyle.test.tsx

@@ -1,7 +1,6 @@
 import { describe, expect, it } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { renderHook } from '@testing-library/react-native';
-import React from 'react';
 import type { BoxShadowValue } from 'react-native';
 import { LumenStyleSheetProvider } from '../provider/LumenStyleSheetProvider';
 import { useResolveViewStyle, useResolveTextStyle } from './resolveStyle';

package/src/styles/provider/LumenStyleSheetProvider.test.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it, jest } from '@jest/globals';
 import { render, userEvent } from '@testing-library/react-native';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { ColorSchemeName, Pressable, Text, View } from 'react-native';
 import { useTheme } from '../hooks/useTheme';
 import { LumenStyleSheetProvider } from './LumenStyleSheetProvider';
@@ -110,7 +110,7 @@ describe('LumenStyleSheetProvider', () => {
     // Suppress console.error for this test
     const consoleErrorSpy = jest
       .spyOn(console, 'error')
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
+
       .mockImplementation(() => {});
 
     expect(() => {

package/src/utils/icon-template.ts

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable import/no-default-export */
 import { Template } from '@svgr/babel-plugin-transform-svg-component';
 
 const template: Template = (variables, { tpl }) => {

package/dist/module/lib/Patterns/index.js

@@ -1,4 +0,0 @@
-"use strict";
-
-export default {};
-//# sourceMappingURL=index.js.map

package/dist/module/lib/Patterns/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["lib/Patterns/index.ts"],"mappings":";;AAAA,eAAe,CAAC,CAAC","ignoreList":[]}

package/dist/typescript/src/lib/Patterns/index.d.ts

@@ -1,3 +0,0 @@
-declare const _default: {};
-export default _default;
-//# sourceMappingURL=index.d.ts.map

package/dist/typescript/src/lib/Patterns/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Patterns/index.ts"],"names":[],"mappings":";AAAA,wBAAkB"}

package/src/lib/Patterns/index.ts

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