@ledgerhq/lumen-ui-rnative 0.1.11 → 0.1.12

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

@@ -0,0 +1,228 @@
+import { PropsWithChildren } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+import { ChevronDown } from '../../Symbols';
+import { Pressable } from '../Utility';
+import type { TriggerButtonProps } from './types';
+
+type Appearance = NonNullable<TriggerButtonProps['appearance']>;
+type Size = NonNullable<TriggerButtonProps['size']>;
+type IconType = 'flat' | 'rounded' | 'none';
+
+const useStyles = ({
+  appearance,
+  size,
+  disabled,
+  pressed,
+  iconType,
+}: {
+  appearance: Appearance;
+  size: Size;
+  disabled: boolean;
+  pressed: boolean;
+  iconType: IconType;
+}) => {
+  return useStyleSheet(
+    (t) => {
+      const bgColors: Record<Appearance, string> = {
+        gray: t.colors.bg.muted,
+        transparent: t.colors.bg.mutedTransparent,
+        'no-background': 'transparent',
+      };
+
+      const pressedBgColors: Record<Appearance, string> = {
+        gray: t.colors.bg.mutedPressed,
+        transparent: t.colors.bg.mutedTransparentPressed,
+        'no-background': t.colors.bg.baseTransparentPressed,
+      };
+
+      const textColor = disabled ? t.colors.text.disabled : t.colors.text.base;
+
+      type PaddingStyle = {
+        paddingTop: number;
+        paddingBottom: number;
+        paddingLeft: number;
+        paddingRight: number;
+      };
+
+      const paddingMap: Record<Size, Record<IconType, PaddingStyle>> = {
+        md: {
+          flat: {
+            paddingTop: t.spacings.s12,
+            paddingBottom: t.spacings.s12,
+            paddingLeft: t.spacings.s16,
+            paddingRight: t.spacings.s16,
+          },
+          rounded: {
+            paddingTop: t.spacings.s8,
+            paddingBottom: t.spacings.s8,
+            paddingLeft: t.spacings.s8,
+            paddingRight: t.spacings.s16,
+          },
+          none: {
+            paddingTop: t.spacings.s14,
+            paddingBottom: t.spacings.s14,
+            paddingLeft: t.spacings.s16,
+            paddingRight: t.spacings.s16,
+          },
+        },
+        sm: {
+          flat: {
+            paddingTop: t.spacings.s10,
+            paddingBottom: t.spacings.s10,
+            paddingLeft: t.spacings.s12,
+            paddingRight: t.spacings.s12,
+          },
+          rounded: {
+            paddingTop: t.spacings.s8,
+            paddingBottom: t.spacings.s8,
+            paddingLeft: t.spacings.s8,
+            paddingRight: t.spacings.s10,
+          },
+          none: {
+            paddingTop: t.spacings.s10,
+            paddingBottom: t.spacings.s10,
+            paddingLeft: t.spacings.s12,
+            paddingRight: t.spacings.s12,
+          },
+        },
+      };
+
+      return {
+        container: StyleSheet.flatten([
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+            borderRadius: t.borderRadius.full,
+            backgroundColor: bgColors[appearance],
+            gap: t.spacings.s8,
+          },
+          paddingMap[size][iconType],
+          pressed && { backgroundColor: pressedBgColors[appearance] },
+          disabled && { backgroundColor: t.colors.bg.disabled },
+          appearance === 'no-background' &&
+            disabled && { backgroundColor: 'transparent' },
+        ]),
+        label: StyleSheet.flatten([
+          t.typographies.body2SemiBold,
+          {
+            color: textColor,
+            textAlign: 'left',
+          },
+        ]),
+        labelWrapper: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: t.spacings.s2,
+        },
+        icon: {
+          flexShrink: 0,
+        },
+        chevron: {
+          flexShrink: 0,
+          color: textColor,
+        },
+      };
+    },
+    [appearance, size, disabled, pressed, iconType],
+  );
+};
+
+/**
+ * Trigger button for select/dropdown components. Displays a label with an optional
+ * leading icon and a trailing chevron indicator.
+ *
+ * This component is intended to be used exclusively as the trigger inside a Select or
+ * dropdown pattern. It should not be used as a standalone action button — use `Button`
+ * or `IconButton` instead.
+ *
+ * @see {@link https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=6389-45680 Figma}
+ *
+ * @example
+ * import { TriggerButton } from '@ledgerhq/lumen-ui-rnative';
+ * import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <TriggerButton icon={<Settings size={20} />} iconType="flat">
+ *   Network
+ * </TriggerButton>
+ *
+ * <TriggerButton>All accounts</TriggerButton>
+ */
+export const TriggerButton = ({
+  lx,
+  style,
+  appearance = 'gray',
+  size = 'md',
+  disabled = false,
+  icon,
+  iconType = 'flat',
+  children: label,
+  ref,
+  ...props
+}: TriggerButtonProps) => {
+  const effectiveIconType: IconType = icon ? iconType : 'none';
+
+  return (
+    <Pressable
+      ref={ref}
+      lx={lx}
+      style={style}
+      disabled={disabled}
+      accessibilityRole='button'
+      accessibilityState={{ disabled }}
+      {...props}
+    >
+      {({ pressed }) => (
+        <TriggerButtonContent
+          appearance={appearance}
+          size={size}
+          disabled={disabled}
+          pressed={pressed}
+          iconType={effectiveIconType}
+          icon={icon}
+        >
+          {label}
+        </TriggerButtonContent>
+      )}
+    </Pressable>
+  );
+};
+
+type TriggerButtonContentProps = PropsWithChildren<{
+  appearance: Appearance;
+  size: Size;
+  disabled: boolean;
+  pressed: boolean;
+  iconType: IconType;
+  icon?: TriggerButtonProps['icon'];
+}>;
+
+const TriggerButtonContent = ({
+  appearance,
+  size,
+  disabled,
+  pressed,
+  iconType,
+  icon,
+  children,
+}: TriggerButtonContentProps) => {
+  const styles = useStyles({ appearance, size, disabled, pressed, iconType });
+
+  return (
+    <View style={styles.container} testID='button-trigger-content'>
+      {icon && <View style={styles.icon}>{icon}</View>}
+      <View style={styles.labelWrapper}>
+        <Text style={styles.label} numberOfLines={1} ellipsizeMode='tail'>
+          {children}
+        </Text>
+        <ChevronDown
+          size={20}
+          style={styles.chevron}
+          testID='button-trigger-chevron'
+        />
+      </View>
+    </View>
+  );
+};
+
+TriggerButton.displayName = 'TriggerButton';

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

@@ -0,0 +1,2 @@
+export { TriggerButton } from './TriggerButton';
+export * from './types';

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

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import { StyledPressableProps } from '../../../styles';
+
+export type TriggerButtonProps = {
+  /**
+   * The visual style of the trigger button.
+   * @default 'gray'
+   */
+  appearance?: 'gray' | 'transparent' | 'no-background';
+  /**
+   * The size variant of the trigger button.
+   * @default 'md'
+   */
+  size?: 'sm' | 'md';
+  /**
+   * An optional pre-rendered icon element to display as leading content.
+   * Consumer is responsible for sizing the icon.
+   */
+  icon?: ReactNode;
+  /**
+   * Determines the padding scheme when an icon is present.
+   * - `'flat'`: Standard padding for line/interface icons.
+   * - `'rounded'`: Tighter left padding for circular icons with their own background (e.g., crypto icons).
+   *
+   * Only relevant when `icon` is provided.
+   * @default 'flat'
+   */
+  iconType?: 'flat' | 'rounded';
+  /**
+   * Whether the trigger button is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The label content of the trigger button.
+   */
+  children: ReactNode;
+} & Omit<StyledPressableProps, 'children'>;

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

@@ -64,7 +64,7 @@ export const CenterPositionShowcase: Story = {
           { center: { x: 0.8, y: 0.2 }, label: '{x: 0.8, y: 0.2}' },
         ],
       },
-    ] as const;
+    ];
 
     return (
       <Box lx={{ flexDirection: 'column', gap: 's40' }}>

package/src/lib/Components/index.ts

@@ -5,6 +5,7 @@ export * from './Avatar';
 export * from './Banner';
 export * from './BottomSheet';
 export * from './Button';
+export * from './TriggerButton';
 export * from './Card';
 export * from './CardButton';
 export * from './ContentBanner';
@@ -15,6 +16,7 @@ export * from './IconButton';
 export * from './InteractiveIcon';
 export * from './Link';
 export * from './ListItem';
+export * from './MediaCard';
 export * from './NavBar';
 export * from './PageIndicator';
 export * from './SearchInput';

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

@@ -0,0 +1,44 @@
+import Svg, { Path } from 'react-native-svg';
+import createIcon from '../../Components/Icon/createIcon';
+
+/**
+ * NanoGen5 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 { NanoGen5 } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <NanoGen5 />
+ *
+ * @example
+ * // With custom size and style
+ * <NanoGen5 size={40} color="warning" lx={{ marginTop: 's4' }} />
+ *
+ * @example
+ * // Used within a Button component
+ * import { Button } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <Button icon={NanoGen5} size="md">
+ *   Click me
+ * </Button>
+ */
+export const NanoGen5 = createIcon(
+  'NanoGen5',
+  <Svg width={24} height={24} fill='currentColor' viewBox='0 0 16 16'>
+    <Path
+      fill='currentColor'
+      fillRule='evenodd'
+      d='M11 1.333c.92 0 1.667.747 1.667 1.667v.333c.184 0 .333.15.333.334v1.666a.334.334 0 0 1-.266.327l-.067.007V13c0 .92-.746 1.667-1.667 1.667H5c-.92 0-1.667-.746-1.667-1.667V3c0-.92.747-1.667 1.667-1.667zM9.667 12.667a.667.667 0 0 0 0 1.333H11a.667.667 0 0 0 0-1.333zM5 2.333A.667.667 0 0 0 4.333 3v8c0 .368.299.667.667.667h6a.667.667 0 0 0 .667-.667V3A.667.667 0 0 0 11 2.333z'
+      clipRule='evenodd'
+    />
+  </Svg>,
+);

package/src/lib/Symbols/index.ts

@@ -164,6 +164,7 @@ export { Moon } from './Icons/Moon';
 export { MoreHorizontal } from './Icons/MoreHorizontal';
 export { MoreVertical } from './Icons/MoreVertical';
 export { Nano } from './Icons/Nano';
+export { NanoGen5 } from './Icons/NanoGen5';
 export { NetworkWarning } from './Icons/NetworkWarning';
 export { Nfc } from './Icons/Nfc';
 export { Nft } from './Icons/Nft';