@ledgerhq/lumen-ui-rnative 0.0.55 → 0.0.57-0

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

@@ -0,0 +1,154 @@
+import { isTextChildren } from '@ledgerhq/lumen-utils-shared';
+import React, { FC, PropsWithChildren } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+import { IconSize } from '../Icon';
+import { Pressable, Text } from '../Utility';
+import { TileButtonProps } from './types';
+
+const ICON_SIZE: IconSize = 20;
+
+const useRootStyles = ({ isFull }: { isFull: boolean }) => {
+  return useStyleSheet(
+    (t) => ({
+      root: {
+        width: isFull ? t.sizes.full : 'auto',
+      },
+    }),
+    [isFull],
+  );
+};
+
+const useStyles = ({
+  disabled,
+  pressed,
+  isFull,
+}: {
+  disabled: boolean;
+  pressed: boolean;
+  isFull: boolean;
+}) => {
+  return useStyleSheet(
+    (t) => ({
+      container: StyleSheet.flatten([
+        {
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: t.spacings.s8,
+          padding: t.spacings.s12,
+          borderRadius: t.borderRadius.md,
+          backgroundColor: t.colors.bg.muted,
+        },
+        isFull && { width: t.sizes.full },
+        pressed && !disabled && { backgroundColor: t.colors.bg.mutedPressed },
+        disabled && { backgroundColor: t.colors.bg.disabled },
+      ]),
+      label: StyleSheet.flatten([
+        t.typographies.body2SemiBold,
+        {
+          textAlign: 'center',
+          color: disabled ? t.colors.text.disabled : t.colors.text.base,
+        },
+      ]),
+      icon: {
+        flexShrink: 0,
+        color: disabled ? t.colors.text.disabled : t.colors.text.base,
+      },
+    }),
+    [disabled, pressed, isFull],
+  );
+};
+
+/**
+ * A compact button component displaying an icon above a label in a vertical layout.
+ * Ideal for grids, toolbars, or quick action menus.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/react-native_action-tilebutton--docs Storybook}
+ *
+ * @example
+ * import { TileButton } from '@ledgerhq/lumen-ui-rnative';
+ * import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <TileButton icon={Settings} onPress={() => console.log('pressed')}>
+ *   Settings
+ * </TileButton>
+ */
+export const TileButton = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  TileButtonProps
+>(
+  (
+    {
+      lx,
+      style,
+      icon: IconProp,
+      children,
+      disabled = false,
+      isFull = false,
+      numberOfLines = 2,
+      ...props
+    },
+    ref,
+  ) => {
+    const rootStyles = useRootStyles({ isFull });
+
+    return (
+      <Pressable
+        ref={ref}
+        lx={lx}
+        style={StyleSheet.flatten([style, rootStyles.root])}
+        disabled={disabled}
+        accessibilityRole='button'
+        accessibilityState={{ disabled }}
+        {...props}
+      >
+        {({ pressed }) => (
+          <TileButtonContent
+            disabled={disabled}
+            pressed={pressed}
+            isFull={isFull}
+            IconProp={IconProp}
+            numberOfLines={numberOfLines}
+          >
+            {children}
+          </TileButtonContent>
+        )}
+      </Pressable>
+    );
+  },
+);
+
+type TileButtonContentProps = PropsWithChildren<{
+  disabled: boolean;
+  pressed: boolean;
+  isFull: boolean;
+  IconProp: TileButtonProps['icon'];
+  numberOfLines?: number;
+}>;
+
+const TileButtonContent: FC<TileButtonContentProps> = ({
+  disabled,
+  pressed,
+  isFull,
+  IconProp,
+  numberOfLines,
+  children,
+}) => {
+  const styles = useStyles({ disabled, pressed, isFull });
+
+  return (
+    <View style={styles.container} testID='tile-button-content'>
+      <IconProp size={ICON_SIZE} style={styles.icon} />
+      {isTextChildren(children) ? (
+        <Text style={styles.label} numberOfLines={numberOfLines}>
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+};
+
+TileButton.displayName = 'TileButton';

package/src/lib/Components/TileButton/index.ts

@@ -0,0 +1,2 @@
+export * from './TileButton';
+export * from './types';

package/src/lib/Components/TileButton/types.ts

@@ -0,0 +1,32 @@
+import { ComponentType, ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { StyledPressableProps } from '../../../styles';
+import { IconSize } from '../Icon';
+
+export type TileButtonProps = {
+  /**
+   * The icon component to render above the label.
+   * Will be rendered at 20px size.
+   */
+  icon: ComponentType<{ size?: IconSize; style?: StyleProp<ViewStyle> }>;
+  /**
+   * The content of the button (label text).
+   */
+  children: ReactNode;
+  /**
+   * Whether the button is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If true, the button expands to full width of its container.
+   * @default false
+   */
+  isFull?: boolean;
+  /**
+   * Maximum number of lines for the label text.
+   * Text will be truncated with ellipsis if it exceeds this limit.
+   * @default 2
+   */
+  numberOfLines?: number;
+} & Omit<StyledPressableProps, 'children'>;

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

@@ -74,9 +74,9 @@ type GlobalTooltipProviderProps = {
  *   );
  * }
  */
-export const GlobalTooltipProvider: React.FC<GlobalTooltipProviderProps> = ({
+export const GlobalTooltipProvider = ({
   children,
-}) => {
+}: GlobalTooltipProviderProps) => {
   const [currentTooltip, setCurrentTooltip] = useState<TooltipData | null>(
     null,
   );

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

@@ -8,7 +8,7 @@ import { GlobalTooltipBottomSheet } from './GlobalTooltipBottomSheet';
 import { GlobalTooltipProvider } from './GlobalTooltipContext';
 import { Tooltip, TooltipTrigger, TooltipContent } from './Tooltip';
 
-const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
   <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
     <GlobalTooltipProvider>
       {children}

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useId } from 'react';
+import { useState, useEffect, useCallback, useId } from 'react';
 import { Pressable } from 'react-native';
 import { useControllableState } from '../../utils';
 import { SlotPressable } from '../Slot';
@@ -39,7 +39,7 @@ import type {
  *   );
  * }
  */
-export const Tooltip: React.FC<TooltipProps> = ({ children, onOpenChange }) => {
+export const Tooltip = ({ children, onOpenChange }: TooltipProps) => {
   const tooltipId = useId();
   const [internalOpen, setInternalOpen] = useControllableState({
     defaultProp: false,
@@ -78,12 +78,12 @@ Tooltip.displayName = 'Tooltip';
  *   <Button>Help</Button>
  * </TooltipTrigger>
  */
-export const TooltipTrigger: React.FC<TooltipTriggerProps> = ({
+export const TooltipTrigger = ({
   children,
   asChild = false,
   style,
   ...props
-}) => {
+}: TooltipTriggerProps) => {
   const { tooltipId, setOpen, contentData } = useTooltipSafeContext({
     consumerName: 'TooltipTrigger',
     contextRequired: true,
@@ -116,10 +116,7 @@ export const TooltipTrigger: React.FC<TooltipTriggerProps> = ({
 };
 TooltipTrigger.displayName = 'TooltipTrigger';
 
-export const TooltipContent: React.FC<TooltipContentProps> = ({
-  title,
-  content,
-}) => {
+export const TooltipContent = ({ title, content }: TooltipContentProps) => {
   const { setContentData } = useTooltipSafeContext({
     consumerName: 'TooltipContent',
     contextRequired: true,

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

@@ -1,5 +1,5 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 export type TooltipContentData = {
   title?: string;
@@ -32,14 +32,14 @@ type TooltipContextProviderProps = {
  * Internal context provider for an individual Tooltip component.
  * This is used automatically by the Tooltip component.
  */
-export const TooltipContextProvider: React.FC<TooltipContextProviderProps> = ({
+export const TooltipContextProvider = ({
   tooltipId,
   open,
   setOpen,
   contentData,
   setContentData,
   children,
-}) => {
+}: TooltipContextProviderProps) => {
   return (
     <TooltipProvider
       value={{

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

@@ -1,6 +1,5 @@
-import { forwardRef, memo, useId, useMemo } from 'react';
+import { memo, useId, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
-import type { View } from 'react-native';
 import Svg, {
   Defs,
   LinearGradient as SvgLinearGradient,
@@ -77,51 +76,56 @@ const styles = StyleSheet.create({
  * />
  */
 export const LinearGradient = memo(
-  forwardRef<View, LinearGradientProps>(
-    ({ direction = 'to-bottom', stops, children, lx = {}, ...props }, ref) => {
-      const gradientId = useId();
-      const { theme } = useTheme();
+  ({
+    direction = 'to-bottom',
+    stops,
+    children,
+    lx = {},
+    ref,
+    ...props
+  }: LinearGradientProps) => {
+    const gradientId = useId();
+    const { theme } = useTheme();
 
-      const coordinates = useMemo(() => {
-        const isCustomAngle = typeof direction === 'number';
-        return isCustomAngle
-          ? angleToCoordinates(direction)
-          : DIRECTION_MAP[direction];
-      }, [direction]);
+    const coordinates = useMemo(() => {
+      const isCustomAngle = typeof direction === 'number';
+      return isCustomAngle
+        ? angleToCoordinates(direction)
+        : DIRECTION_MAP[direction];
+    }, [direction]);
 
-      const processedStops = useMemo(
-        () => processGradientStops(stops, theme.colors.bg),
-        [stops, theme.colors.bg],
-      );
+    const processedStops = useMemo(
+      () => processGradientStops(stops, theme.colors.bg),
+      [stops, theme.colors.bg],
+    );
 
-      return (
-        <Box ref={ref} lx={{ overflow: 'hidden', ...lx }} {...props}>
-          <Svg style={styles.gradient} preserveAspectRatio='none'>
-            <Defs>
-              <SvgLinearGradient id={gradientId} {...coordinates}>
-                {processedStops.map((stop, index) => (
-                  <Stop
-                    key={index}
-                    offset={`${stop.offset * 100}%`}
-                    stopColor={stop.color}
-                    stopOpacity={stop.opacity}
-                  />
-                ))}
-              </SvgLinearGradient>
-            </Defs>
-            <Rect
-              x='0'
-              y='0'
-              width='100%'
-              height='100%'
-              fill={`url(#${gradientId})`}
-            />
-          </Svg>
-          {children}
-        </Box>
-      );
-    },
-  ),
+    return (
+      <Box ref={ref} lx={{ overflow: 'hidden', ...lx }} {...props}>
+        <Svg style={styles.gradient} preserveAspectRatio='none'>
+          <Defs>
+            <SvgLinearGradient id={gradientId} {...coordinates}>
+              {processedStops.map((stop, index) => (
+                <Stop
+                  key={index}
+                  offset={`${stop.offset * 100}%`}
+                  stopColor={stop.color}
+                  stopOpacity={stop.opacity}
+                />
+              ))}
+            </SvgLinearGradient>
+          </Defs>
+          <Rect
+            x='0'
+            y='0'
+            width='100%'
+            height='100%'
+            fill={`url(#${gradientId})`}
+          />
+        </Svg>
+        {children}
+      </Box>
+    );
+  },
 );
 
 LinearGradient.displayName = 'LinearGradient';

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

@@ -1,6 +1,5 @@
-import { forwardRef, memo, useId, useMemo } from 'react';
+import { memo, useId, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
-import type { View } from 'react-native';
 import Svg, {
   Defs,
   RadialGradient as SvgRadialGradient,
@@ -45,58 +44,63 @@ const styles = StyleSheet.create({
  * ```
  */
 export const RadialGradient = memo(
-  forwardRef<View, RadialGradientProps>(
-    ({ center = DEFAULT_CENTER, stops, children, lx = {}, ...props }, ref) => {
-      const gradientId = useId();
-      const { theme } = useTheme();
+  ({
+    center = DEFAULT_CENTER,
+    stops,
+    children,
+    lx = {},
+    ref,
+    ...props
+  }: RadialGradientProps) => {
+    const gradientId = useId();
+    const { theme } = useTheme();
 
-      const processedStops = useMemo(() => {
-        return processGradientStops(stops, theme.colors.bg);
-      }, [stops, theme.colors.bg]);
+    const processedStops = useMemo(() => {
+      return processGradientStops(stops, theme.colors.bg);
+    }, [stops, theme.colors.bg]);
 
-      const centerCoordinates = useMemo(() => {
-        return {
-          cx: `${center.x * 100}%`,
-          cy: `${center.y * 100}%`,
-        };
-      }, [center]);
+    const centerCoordinates = useMemo(() => {
+      return {
+        cx: `${center.x * 100}%`,
+        cy: `${center.y * 100}%`,
+      };
+    }, [center]);
 
-      return (
-        <Box ref={ref} lx={{ overflow: 'hidden', ...lx }} {...props}>
-          <Svg style={styles.gradient} preserveAspectRatio='none'>
-            <Defs>
-              <SvgRadialGradient
-                id={gradientId}
-                cx={centerCoordinates.cx}
-                cy={centerCoordinates.cy}
-                rx='50%'
-                ry='50%'
-                fx={centerCoordinates.cx}
-                fy={centerCoordinates.cy}
-              >
-                {processedStops.map((stop, index) => (
-                  <Stop
-                    key={index}
-                    offset={`${stop.offset * 100}%`}
-                    stopColor={stop.color}
-                    stopOpacity={stop.opacity}
-                  />
-                ))}
-              </SvgRadialGradient>
-            </Defs>
-            <Rect
-              x='0'
-              y='0'
-              width='100%'
-              height='100%'
-              fill={`url(#${gradientId})`}
-            />
-          </Svg>
-          {children}
-        </Box>
-      );
-    },
-  ),
+    return (
+      <Box ref={ref} lx={{ overflow: 'hidden', ...lx }} {...props}>
+        <Svg style={styles.gradient} preserveAspectRatio='none'>
+          <Defs>
+            <SvgRadialGradient
+              id={gradientId}
+              cx={centerCoordinates.cx}
+              cy={centerCoordinates.cy}
+              rx='50%'
+              ry='50%'
+              fx={centerCoordinates.cx}
+              fy={centerCoordinates.cy}
+            >
+              {processedStops.map((stop, index) => (
+                <Stop
+                  key={index}
+                  offset={`${stop.offset * 100}%`}
+                  stopColor={stop.color}
+                  stopOpacity={stop.opacity}
+                />
+              ))}
+            </SvgRadialGradient>
+          </Defs>
+          <Rect
+            x='0'
+            y='0'
+            width='100%'
+            height='100%'
+            fill={`url(#${gradientId})`}
+          />
+        </Svg>
+        {children}
+      </Box>
+    );
+  },
 );
 
 RadialGradient.displayName = 'RadialGradient';

package/src/lib/Components/Utility/Text/Text.stories.tsx

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { Text } from './Text';
+import { TextProps } from './types';
 
-const meta: Meta<typeof Text> = {
+const meta: Meta<TextProps> = {
   component: Text,
   title: 'Utility/Text',
   parameters: {
@@ -16,7 +17,7 @@ const meta: Meta<typeof Text> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof Text>;
+type Story = StoryObj<TextProps>;
 
 export const Base: Story = {
   args: {

package/src/lib/Components/Wrap/Wrap.tsx

@@ -1,10 +1,5 @@
-import { FC } from 'react';
 import { WrapProps } from './types';
 
-export const Wrap: FC<WrapProps> = ({
-  if: condition,
-  with: wrapper,
-  children,
-}) => {
+export const Wrap = ({ if: condition, with: wrapper, children }: WrapProps) => {
   return condition ? wrapper(children) : children;
 };

package/src/lib/Components/Wrap/types.ts

@@ -1,6 +1,6 @@
-import { PropsWithChildren, ReactNode } from 'react';
+import { PropsWithChildren, ReactNode, ReactElement } from 'react';
 
 export type WrapProps = PropsWithChildren & {
   if: boolean;
-  with: (children: ReactNode) => JSX.Element;
+  with: (children: ReactNode) => ReactElement;
 };

package/src/lib/Components/index.ts

@@ -20,4 +20,5 @@ export * from './Utility';
 export * from './TextInput';
 export * from './ThemeProvider';
 export * from './Tile';
+export * from './TileButton';
 export * from './Tooltip';

package/src/lib/StyleSystem/index.ts

@@ -0,0 +1 @@
+export * from './lx';

package/src/lib/StyleSystem/lx/BorderRadius/BorderRadius.mdx

@@ -0,0 +1,15 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { BorderRadiusTable } from './BorderRadiusTable';
+
+<Meta title='Style System/Theme/Border Radius' />
+
+# 🔘 Border Radius
+
+Our border radius system provides consistent corner rounding values for UI elements.
+
+## Border Radius Values
+
+Border radius values are accessed through `theme.borderRadius.*` and can be used for rounded corners on boxes, cards, buttons, and other UI elements.
+
+<BorderRadiusTable />
+

package/src/lib/StyleSystem/lx/BorderRadius/BorderRadiusTable.tsx

@@ -0,0 +1,52 @@
+import { View } from 'react-native';
+import { resolveTheme, getSampleAccentColor } from '../';
+
+export const BorderRadiusTable = () => {
+  const borderRadius = resolveTheme().borderRadius;
+  const cells = Object.entries(borderRadius);
+  const accentColor = getSampleAccentColor();
+
+  const formatCSSToken = (key: string): string => {
+    return `--border-radius-${key}`;
+  };
+
+  return (
+    <table style={{ width: '100%' }}>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Theme object</th>
+          <th>Value</th>
+          <th>Sample</th>
+        </tr>
+      </thead>
+      <tbody>
+        {cells.map(([key, value], i) => (
+          <tr key={i}>
+            <td>
+              <code>{formatCSSToken(key)}</code>
+            </td>
+            <td>
+              <code>{`theme.borderRadius.${key}`}</code>
+            </td>
+            <td>
+              <code>{`${value}px`}</code>
+            </td>
+            <td>
+              <View style={{ paddingVertical: 12 }}>
+                <View
+                  style={{
+                    width: 64,
+                    height: 64,
+                    backgroundColor: accentColor,
+                    borderRadius: value,
+                  }}
+                />
+              </View>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};

package/src/lib/StyleSystem/lx/BorderRadius/index.ts

@@ -0,0 +1 @@
+export { BorderRadiusTable } from './BorderRadiusTable';

package/src/lib/StyleSystem/lx/BorderWidth/BorderWidth.mdx

@@ -0,0 +1,22 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { BorderWidthTable } from './BorderWidthTable';
+
+<Meta title='Style System/Theme/Border Width' />
+
+# 🖼️ Border Width
+
+Border width tokens control the thickness of borders applied to elements.
+
+## Available Border Widths
+
+Border width tokens are accessed through border width props in the `lx` style object:
+- `borderWidth`
+- `borderTopWidth`
+- `borderBottomWidth`
+- `borderLeftWidth`
+- `borderRightWidth`
+- `borderStartWidth`
+- `borderEndWidth`
+
+<BorderWidthTable />
+