@ledgerhq/lumen-ui-rnative 0.1.8 → 0.1.10

package/dist/module/lib/Components/SearchInput/SearchInput.stories.js

@@ -0,0 +1,133 @@
+"use strict";
+
+import { useState } from 'react';
+import { View } from 'react-native';
+import { SearchInput } from "./SearchInput.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: SearchInput,
+  title: 'Input/SearchInput',
+  args: {
+    appearance: 'plain'
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text when input is empty'
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Error message to display below input'
+    },
+    editable: {
+      control: 'boolean',
+      description: 'Whether the input is editable'
+    },
+    hideClearButton: {
+      control: 'boolean',
+      description: 'Hide the clear button'
+    }
+  }
+};
+export default meta;
+const SearchInputStory = args => {
+  const [query, setQuery] = useState(args.initialValue ?? '');
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      flex: 1,
+      minHeight: 96,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 24
+    },
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        width: '100%',
+        maxWidth: 400
+      },
+      children: /*#__PURE__*/_jsx(SearchInput, {
+        ...args,
+        value: query,
+        onChangeText: setQuery,
+        onClear: args.onClear
+      })
+    })
+  });
+};
+export const Base = {
+  render: args => /*#__PURE__*/_jsx(SearchInputStory, {
+    ...args
+  }),
+  args: {
+    placeholder: 'Search products',
+    editable: true,
+    hideClearButton: false
+  }
+};
+export const WithContent = {
+  render: args => /*#__PURE__*/_jsx(SearchInputStory, {
+    ...args,
+    initialValue: "Search text"
+  }),
+  args: {
+    placeholder: 'Search products',
+    editable: true,
+    hideClearButton: false
+  }
+};
+export const WithError = {
+  render: args => /*#__PURE__*/_jsx(SearchInputStory, {
+    ...args,
+    initialValue: "Invalid search"
+  }),
+  args: {
+    placeholder: 'Search products',
+    errorMessage: 'Search term is invalid',
+    editable: true,
+    hideClearButton: false
+  }
+};
+export const DisabledSearchInput = {
+  render: args => /*#__PURE__*/_jsx(SearchInputStory, {
+    ...args,
+    initialValue: "Disabled search"
+  }),
+  args: {
+    placeholder: 'Search products',
+    editable: false,
+    hideClearButton: false
+  }
+};
+export const WithHiddenClearButton = {
+  render: args => /*#__PURE__*/_jsx(SearchInputStory, {
+    ...args,
+    initialValue: "Search text"
+  }),
+  args: {
+    placeholder: 'Search products',
+    editable: true,
+    hideClearButton: true
+  }
+};
+export const WithClearCallback = {
+  render: args => /*#__PURE__*/_jsx(SearchInputStory, {
+    ...args,
+    initialValue: "Click clear to see callback",
+    onClear: () => alert('Search cleared!')
+  }),
+  args: {
+    placeholder: 'Search products',
+    editable: true,
+    hideClearButton: false
+  }
+};
+//# sourceMappingURL=SearchInput.stories.js.map

package/dist/module/lib/Components/SearchInput/SearchInput.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","View","SearchInput","jsx","_jsx","meta","component","title","args","appearance","parameters","docs","source","language","format","type","argTypes","placeholder","control","description","errorMessage","editable","hideClearButton","SearchInputStory","query","setQuery","initialValue","style","flex","minHeight","alignItems","justifyContent","padding","children","width","maxWidth","value","onChangeText","onClear","Base","render","WithContent","WithError","DisabledSearchInput","WithHiddenClearButton","WithClearCallback","alert"],"sourceRoot":"../../../../../src","sources":["lib/Components/SearchInput/SearchInput.stories.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Components/SearchInput/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export * from "./SearchInput.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/module/lib/Components/SearchInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Components/SearchInput/index.ts"],"mappings":";;AAAA,cAAc,kBAAe;AAC7B,cAAc,YAAS","ignoreList":[]}

package/dist/module/lib/Components/SearchInput/types.js

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

package/dist/module/lib/Components/SearchInput/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Components/SearchInput/types.ts"],"mappings":"","ignoreList":[]}

package/dist/module/lib/Components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,166 @@
+"use strict";
+
+import Animated from 'react-native-reanimated';
+import { useStyleSheet } from "../../../styles/index.js";
+import { Box, Pressable, Text } from "../Utility/index.js";
+import { SegmentedControlContextProvider, useSegmentedControlContext } from "./SegmentedControlContext.js";
+import { usePillLayout, useSegmentedControlSelectedIndex } from "./usePillLayout.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function SegmentedControlButton({
+  value,
+  children,
+  icon: Icon,
+  onPress,
+  ...props
+}) {
+  const {
+    selectedValue,
+    onSelectedChange,
+    disabled
+  } = useSegmentedControlContext();
+  const selected = selectedValue === value;
+  const styles = useButtonStyles({
+    selected,
+    disabled
+  });
+  function handlePress() {
+    if (!disabled) {
+      onSelectedChange(value);
+      onPress?.();
+    }
+  }
+  return /*#__PURE__*/_jsx(Pressable, {
+    onPress: handlePress,
+    disabled: disabled,
+    accessibilityState: {
+      selected,
+      disabled
+    },
+    style: styles.button,
+    ...props,
+    children: /*#__PURE__*/_jsxs(Box, {
+      style: styles.content,
+      children: [Icon && /*#__PURE__*/_jsx(Box, {
+        style: styles.iconWrap,
+        children: /*#__PURE__*/_jsx(Icon, {
+          size: 16,
+          color: styles.textColor
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        typography: styles.typography,
+        lx: {
+          color: styles.textColor
+        },
+        style: styles.label,
+        children: children
+      })]
+    })
+  });
+}
+SegmentedControlButton.displayName = 'SegmentedControlButton';
+function useButtonStyles({
+  selected,
+  disabled
+}) {
+  const styles = useStyleSheet(t => ({
+    button: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: t.spacings.s16,
+      paddingVertical: t.spacings.s8,
+      borderRadius: t.borderRadius.full,
+      zIndex: 1
+    },
+    content: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: t.spacings.s8
+    },
+    label: {
+      textAlign: 'center',
+      includeFontPadding: false
+    },
+    iconWrap: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  }), []);
+  const typography = selected ? 'body2SemiBold' : 'body2';
+  const textColor = selected && !disabled ? 'base' : 'muted';
+  return {
+    ...styles,
+    typography,
+    textColor
+  };
+}
+export function SegmentedControl({
+  selectedValue,
+  onSelectedChange,
+  accessibilityLabel,
+  children,
+  disabled,
+  appearance = 'background',
+  ...props
+}) {
+  const styles = useRootStyles({
+    disabled: Boolean(disabled),
+    appearance
+  });
+  const selectedIndex = useSegmentedControlSelectedIndex(selectedValue, children);
+  const {
+    onLayout,
+    animatedPillStyle
+  } = usePillLayout({
+    selectedIndex,
+    children
+  });
+  return /*#__PURE__*/_jsx(SegmentedControlContextProvider, {
+    value: {
+      selectedValue,
+      onSelectedChange,
+      disabled
+    },
+    children: /*#__PURE__*/_jsxs(Box, {
+      accessibilityRole: "radiogroup",
+      accessibilityLabel: accessibilityLabel,
+      accessibilityState: {
+        disabled
+      },
+      onLayout: onLayout,
+      style: styles.container,
+      ...props,
+      children: [children, /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.pill, animatedPillStyle],
+        pointerEvents: "none"
+      })]
+    })
+  });
+}
+SegmentedControl.displayName = 'SegmentedControl';
+function useRootStyles({
+  disabled,
+  appearance
+}) {
+  return useStyleSheet(t => ({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      position: 'relative',
+      width: '100%',
+      borderRadius: t.borderRadius.md,
+      backgroundColor: appearance === 'background' ? t.colors.bg.surface : 'transparent'
+    },
+    pill: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      borderRadius: t.borderRadius.sm,
+      backgroundColor: disabled ? t.colors.bg.baseTransparentPressed : t.colors.bg.mutedTransparent,
+      zIndex: 0
+    }
+  }), [disabled, appearance]);
+}
+//# sourceMappingURL=SegmentedControl.js.map

package/dist/module/lib/Components/SegmentedControl/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Animated","useStyleSheet","Box","Pressable","Text","SegmentedControlContextProvider","useSegmentedControlContext","usePillLayout","useSegmentedControlSelectedIndex","jsx","_jsx","jsxs","_jsxs","SegmentedControlButton","value","children","icon","Icon","onPress","props","selectedValue","onSelectedChange","disabled","selected","styles","useButtonStyles","handlePress","accessibilityState","style","button","content","iconWrap","size","color","textColor","typography","lx","label","displayName","t","flex","flexDirection","alignItems","justifyContent","paddingHorizontal","spacings","s16","paddingVertical","s8","borderRadius","full","zIndex","gap","textAlign","includeFontPadding","SegmentedControl","accessibilityLabel","appearance","useRootStyles","Boolean","selectedIndex","onLayout","animatedPillStyle","accessibilityRole","container","View","pill","pointerEvents","position","width","md","backgroundColor","colors","bg","surface","top","left","sm","baseTransparentPressed","mutedTransparent"],"sourceRoot":"../../../../../src","sources":["lib/Components/SegmentedControl/SegmentedControl.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Components/SegmentedControl/SegmentedControl.mdx

@@ -0,0 +1,122 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as SegmentedControlStories from './SegmentedControl.stories';
+import { SegmentedControl } from './SegmentedControl';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+import { Box } from '../Utility';
+
+<Meta title='Navigation/SegmentedControl' of={SegmentedControlStories} />
+
+# 📑 SegmentedControl
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+SegmentedControl is a tab bar–style component for switching between mutually exclusive options. Use it when the user needs to choose one of a small set of choices (e.g. transaction type, asset section).
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=1170-2345&m=dev).
+
+## Anatomy
+
+<Canvas of={SegmentedControlStories.Base} />
+
+- **Segments**: Individual options the user can select.
+- **Selected state**: The active segment (sliding pill + semi-bold label).
+- **Optional icon**: Icon to the left of the label (from Symbols).
+- **Appearance**: Use `appearance="background"` (default) for a surface background, or `appearance="no-background"` for a transparent container.
+
+## Properties
+
+<Canvas of={SegmentedControlStories.Base} />
+<Controls of={SegmentedControlStories.Base} />
+
+### Labels only vs with icons
+
+You can use segments with text only (Base), or add an icon to each button (WithIcons). Use one approach consistently for all segments in a single control.
+
+<Canvas of={SegmentedControlStories.Base} />
+
+<Canvas of={SegmentedControlStories.WithIcons} />
+
+## Responsive Layout
+
+SegmentedControl lays out segments in a horizontal row with equal width per segment. The sliding pill animates to the selected segment.
+
+## Accessibility
+
+- Use accessibilityLabel on SegmentedControl to describe the control (e.g. "Transaction type", "Asset section").
+- Each segment exposes accessibilityState with a selected value for screen readers.
+
+</Tab>
+  <Tab label="Implementation">
+
+## Installation
+
+Use the library as part of `@ledgerhq/lumen-ui-rnative`. See the [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+## Basic Usage
+
+Control selected value in state at the top level and pass it to SegmentedControl. Buttons use value to identify themselves; selected state is derived from context.
+
+```tsx
+import React from 'react';
+import { SegmentedControl, SegmentedControlButton } from '@ledgerhq/lumen-ui-rnative';
+
+export default function Example() {
+  const [state, setState] = React.useState('send');
+
+  return (
+    <SegmentedControl
+      selectedValue={state}
+      onSelectedChange={setState}
+      accessibilityLabel='Transaction type'
+    >
+      <SegmentedControlButton value='send'>Send</SegmentedControlButton>
+      <SegmentedControlButton value='receive'>Receive</SegmentedControlButton>
+      <SegmentedControlButton value='buy'>Buy</SegmentedControlButton>
+    </SegmentedControl>
+  );
+}
+```
+
+## With icons
+
+Pass an icon from symbols to each button for a left-positioned icon. Use icons on all segments or none for consistency.
+
+```tsx
+import { SegmentedControl, SegmentedControlButton } from '@ledgerhq/lumen-ui-rnative';
+import { Coins, Nft, TransferHorizontal, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function Example() {
+  const [state, setState] = React.useState('tokens');
+  return (
+    <SegmentedControl
+      selectedValue={state}
+      onSelectedChange={setState}
+      accessibilityLabel='Asset section'
+    >
+      <SegmentedControlButton value='tokens' icon={Coins}>
+        Tokens
+      </SegmentedControlButton>
+      <SegmentedControlButton value='nfts' icon={Nft}>
+        NFTs
+      </SegmentedControlButton>
+      <SegmentedControlButton value='activity' icon={TransferHorizontal}>
+        Activity
+      </SegmentedControlButton>
+      <SegmentedControlButton value='settings' icon={Settings}>
+        Settings
+      </SegmentedControlButton>
+    </SegmentedControl>
+  );
+}
+```
+
+<Box lx={{ flexDirection: 'column', gap: 's24' }}>
+  <CommonRulesDoAndDont />
+</Box>
+
+</Tab>
+</CustomTabs>

package/dist/module/lib/Components/SegmentedControl/SegmentedControl.stories.js

@@ -0,0 +1,129 @@
+"use strict";
+
+import React, { useState } from 'react';
+import { Coins, Nft, TransferHorizontal, Settings } from "../../Symbols/index.js";
+import { Box } from "../Utility/index.js";
+import { SegmentedControl, SegmentedControlButton } from "./SegmentedControl.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  title: 'Navigation/SegmentedControl',
+  component: SegmentedControl,
+  subcomponents: {
+    SegmentedControlButton
+  },
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'light'
+    }
+  },
+  argTypes: {
+    onSelectedChange: {
+      action: 'change'
+    },
+    disabled: {
+      control: 'boolean'
+    },
+    appearance: {
+      options: ['background', 'no-background'],
+      control: 'radio'
+    },
+    accessibilityLabel: {
+      control: 'text'
+    },
+    selectedValue: {
+      control: 'text'
+    },
+    children: {
+      control: false
+    }
+  },
+  args: {
+    appearance: 'background'
+  }
+};
+export default meta;
+export const Base = {
+  args: {},
+  render: args => {
+    const [state, setState] = useState('send');
+    return /*#__PURE__*/_jsx(Box, {
+      lx: {
+        width: 's256'
+      },
+      children: /*#__PURE__*/_jsxs(SegmentedControl, {
+        ...args,
+        selectedValue: state,
+        onSelectedChange: setState,
+        accessibilityLabel: "Transaction type",
+        children: [/*#__PURE__*/_jsx(SegmentedControlButton, {
+          value: "send",
+          children: "Send"
+        }), /*#__PURE__*/_jsx(SegmentedControlButton, {
+          value: "receive",
+          children: "Receive"
+        }), /*#__PURE__*/_jsx(SegmentedControlButton, {
+          value: "buy",
+          children: "Buy"
+        })]
+      })
+    });
+  }
+};
+export const WithIcons = {
+  args: {},
+  render: args => {
+    const [state, setState] = useState('tokens');
+    return /*#__PURE__*/_jsxs(SegmentedControl, {
+      ...args,
+      selectedValue: state,
+      onSelectedChange: setState,
+      accessibilityLabel: "Asset section",
+      children: [/*#__PURE__*/_jsx(SegmentedControlButton, {
+        value: "tokens",
+        icon: Coins,
+        children: "Tokens"
+      }), /*#__PURE__*/_jsx(SegmentedControlButton, {
+        value: "nfts",
+        icon: Nft,
+        children: "NFTs"
+      }), /*#__PURE__*/_jsx(SegmentedControlButton, {
+        value: "activity",
+        icon: TransferHorizontal,
+        children: "Activity"
+      }), /*#__PURE__*/_jsx(SegmentedControlButton, {
+        value: "settings",
+        icon: Settings,
+        children: "Settings"
+      })]
+    });
+  }
+};
+export const Disabled = {
+  args: {},
+  render: args => /*#__PURE__*/_jsx(Box, {
+    lx: {
+      width: 's256'
+    },
+    children: /*#__PURE__*/_jsxs(SegmentedControl, {
+      ...args,
+      selectedValue: "receive",
+      onSelectedChange: () => {
+        /* empty */
+      },
+      accessibilityLabel: "Transaction type (disabled)",
+      disabled: true,
+      children: [/*#__PURE__*/_jsx(SegmentedControlButton, {
+        value: "send",
+        children: "Send"
+      }), /*#__PURE__*/_jsx(SegmentedControlButton, {
+        value: "receive",
+        children: "Receive"
+      }), /*#__PURE__*/_jsx(SegmentedControlButton, {
+        value: "buy",
+        children: "Buy"
+      })]
+    })
+  })
+};
+//# sourceMappingURL=SegmentedControl.stories.js.map

package/dist/module/lib/Components/SegmentedControl/SegmentedControl.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","Coins","Nft","TransferHorizontal","Settings","Box","SegmentedControl","SegmentedControlButton","jsx","_jsx","jsxs","_jsxs","meta","title","component","subcomponents","parameters","layout","backgrounds","default","argTypes","onSelectedChange","action","disabled","control","appearance","options","accessibilityLabel","selectedValue","children","args","Base","render","state","setState","lx","width","value","WithIcons","icon","Disabled"],"sourceRoot":"../../../../../src","sources":["lib/Components/SegmentedControl/SegmentedControl.stories.tsx"],"mappings":";;AACA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,KAAK,EAAEC,GAAG,EAAEC,kBAAkB,EAAEC,QAAQ,QAAQ,wBAAe;AACxE,SAASC,GAAG,QAAQ,qBAAY;AAChC,SAASC,gBAAgB,EAAEC,sBAAsB,QAAQ,uBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE9E,MAAMC,IAAI,GAAG;EACXC,KAAK,EAAE,6BAA6B;EACpCC,SAAS,EAAER,gBAAgB;EAC3BS,aAAa,EAAE;IACbR;EACF,CAAC;EACDS,UAAU,EAAE;IACVC,MAAM,EAAE,UAAU;IAClBC,WAAW,EAAE;MAAEC,OAAO,EAAE;IAAQ;EAClC,CAAC;EACDC,QAAQ,EAAE;IACRC,gBAAgB,EAAE;MAChBC,MAAM,EAAE;IACV,CAAC;IACDC,QAAQ,EAAE;MACRC,OAAO,EAAE;IACX,CAAC;IACDC,UAAU,EAAE;MACVC,OAAO,EAAE,CAAC,YAAY,EAAE,eAAe,CAAC;MACxCF,OAAO,EAAE;IACX,CAAC;IACDG,kBAAkB,EAAE;MAClBH,OAAO,EAAE;IACX,CAAC;IACDI,aAAa,EAAE;MACbJ,OAAO,EAAE;IACX,CAAC;IACDK,QAAQ,EAAE;MACRL,OAAO,EAAE;IACX;EACF,CAAC;EACDM,IAAI,EAAE;IACJL,UAAU,EAAE;EACd;AACF,CAAyC;AAEzC,eAAeb,IAAI;AAGnB,OAAO,MAAMmB,IAAW,GAAG;EACzBD,IAAI,EAAE,CAAC,CAAkD;EACzDE,MAAM,EAAGF,IAAI,IAAK;IAChB,MAAM,CAACG,KAAK,EAAEC,QAAQ,CAAC,GAAGlC,QAAQ,CAAC,MAAM,CAAC;IAE1C,oBACES,IAAA,CAACJ,GAAG;MAAC8B,EAAE,EAAE;QAAEC,KAAK,EAAE;MAAO,CAAE;MAAAP,QAAA,eACzBlB,KAAA,CAACL,gBAAgB;QAAA,GACXwB,IAAI;QACRF,aAAa,EAAEK,KAAM;QACrBZ,gBAAgB,EAAEa,QAAS;QAC3BP,kBAAkB,EAAC,kBAAkB;QAAAE,QAAA,gBAErCpB,IAAA,CAACF,sBAAsB;UAAC8B,KAAK,EAAC,MAAM;UAAAR,QAAA,EAAC;QAAI,CAAwB,CAAC,eAClEpB,IAAA,CAACF,sBAAsB;UAAC8B,KAAK,EAAC,SAAS;UAAAR,QAAA,EAAC;QAExC,CAAwB,CAAC,eACzBpB,IAAA,CAACF,sBAAsB;UAAC8B,KAAK,EAAC,KAAK;UAAAR,QAAA,EAAC;QAAG,CAAwB,CAAC;MAAA,CAChD;IAAC,CAChB,CAAC;EAEV;AACF,CAAC;AAED,OAAO,MAAMS,SAAgB,GAAG;EAC9BR,IAAI,EAAE,CAAC,CAAkD;EACzDE,MAAM,EAAGF,IAAI,IAAK;IAChB,MAAM,CAACG,KAAK,EAAEC,QAAQ,CAAC,GAAGlC,QAAQ,CAAC,QAAQ,CAAC;IAE5C,oBACEW,KAAA,CAACL,gBAAgB;MAAA,GACXwB,IAAI;MACRF,aAAa,EAAEK,KAAM;MACrBZ,gBAAgB,EAAEa,QAAS;MAC3BP,kBAAkB,EAAC,eAAe;MAAAE,QAAA,gBAElCpB,IAAA,CAACF,sBAAsB;QAAC8B,KAAK,EAAC,QAAQ;QAACE,IAAI,EAAEtC,KAAM;QAAA4B,QAAA,EAAC;MAEpD,CAAwB,CAAC,eACzBpB,IAAA,CAACF,sBAAsB;QAAC8B,KAAK,EAAC,MAAM;QAACE,IAAI,EAAErC,GAAI;QAAA2B,QAAA,EAAC;MAEhD,CAAwB,CAAC,eACzBpB,IAAA,CAACF,sBAAsB;QAAC8B,KAAK,EAAC,UAAU;QAACE,IAAI,EAAEpC,kBAAmB;QAAA0B,QAAA,EAAC;MAEnE,CAAwB,CAAC,eACzBpB,IAAA,CAACF,sBAAsB;QAAC8B,KAAK,EAAC,UAAU;QAACE,IAAI,EAAEnC,QAAS;QAAAyB,QAAA,EAAC;MAEzD,CAAwB,CAAC;IAAA,CACT,CAAC;EAEvB;AACF,CAAC;AAED,OAAO,MAAMW,QAAe,GAAG;EAC7BV,IAAI,EAAE,CAAC,CAAkD;EACzDE,MAAM,EAAGF,IAAI,iBACXrB,IAAA,CAACJ,GAAG;IAAC8B,EAAE,EAAE;MAAEC,KAAK,EAAE;IAAO,CAAE;IAAAP,QAAA,eACzBlB,KAAA,CAACL,gBAAgB;MAAA,GACXwB,IAAI;MACRF,aAAa,EAAC,SAAS;MACvBP,gBAAgB,EAAEA,CAAA,KAAM;QACtB;MAAA,CACA;MACFM,kBAAkB,EAAC,6BAA6B;MAChDJ,QAAQ;MAAAM,QAAA,gBAERpB,IAAA,CAACF,sBAAsB;QAAC8B,KAAK,EAAC,MAAM;QAAAR,QAAA,EAAC;MAAI,CAAwB,CAAC,eAClEpB,IAAA,CAACF,sBAAsB;QAAC8B,KAAK,EAAC,SAAS;QAAAR,QAAA,EAAC;MAAO,CAAwB,CAAC,eACxEpB,IAAA,CAACF,sBAAsB;QAAC8B,KAAK,EAAC,KAAK;QAAAR,QAAA,EAAC;MAAG,CAAwB,CAAC;IAAA,CAChD;EAAC,CAChB;AAET,CAAC","ignoreList":[]}

package/dist/module/lib/Components/SegmentedControl/SegmentedControl.test.js

@@ -0,0 +1,63 @@
+"use strict";
+
+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 { ThemeProvider } from "../ThemeProvider/ThemeProvider.js";
+import { SegmentedControl, SegmentedControlButton } from "./SegmentedControl.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TestWrapper = ({
+  children
+}) => /*#__PURE__*/_jsx(ThemeProvider, {
+  themes: ledgerLiveThemes,
+  colorScheme: "dark",
+  locale: "en",
+  children: children
+});
+describe('SegmentedControl', () => {
+  it('renders segments with labels', () => {
+    const {
+      getByText
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsxs(SegmentedControl, {
+        selectedValue: "send",
+        onSelectedChange: () => {
+          /* empty */
+        },
+        accessibilityLabel: "Transaction type",
+        children: [/*#__PURE__*/_jsx(SegmentedControlButton, {
+          value: "send",
+          children: "Send"
+        }), /*#__PURE__*/_jsx(SegmentedControlButton, {
+          value: "receive",
+          children: "Receive"
+        })]
+      })
+    }));
+    expect(getByText('Send')).toBeTruthy();
+    expect(getByText('Receive')).toBeTruthy();
+  });
+  it('calls onSelectedChange with segment value when a segment is pressed', () => {
+    const onSelectedChange = jest.fn();
+    const {
+      getByText
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsxs(SegmentedControl, {
+        selectedValue: "send",
+        onSelectedChange: onSelectedChange,
+        accessibilityLabel: "Transaction type",
+        children: [/*#__PURE__*/_jsx(SegmentedControlButton, {
+          value: "send",
+          children: "Send"
+        }), /*#__PURE__*/_jsx(SegmentedControlButton, {
+          value: "receive",
+          children: "Receive"
+        })]
+      })
+    }));
+    fireEvent.press(getByText('Receive'));
+    expect(onSelectedChange).toHaveBeenCalledWith('receive');
+  });
+});
+//# sourceMappingURL=SegmentedControl.test.js.map

package/dist/module/lib/Components/SegmentedControl/SegmentedControl.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["describe","it","expect","jest","ledgerLiveThemes","render","fireEvent","React","ThemeProvider","SegmentedControl","SegmentedControlButton","jsx","_jsx","jsxs","_jsxs","TestWrapper","children","themes","colorScheme","locale","getByText","selectedValue","onSelectedChange","accessibilityLabel","value","toBeTruthy","fn","press","toHaveBeenCalledWith"],"sourceRoot":"../../../../../src","sources":["lib/Components/SegmentedControl/SegmentedControl.test.tsx"],"mappings":";;AAAA,SAASA,QAAQ,EAAEC,EAAE,EAAEC,MAAM,EAAEC,IAAI,QAAQ,eAAe;AAC1D,SAASC,gBAAgB,QAAQ,6BAA6B;AAC9D,SAASC,MAAM,EAAEC,SAAS,QAAQ,+BAA+B;AACjE,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,aAAa,QAAQ,mCAAgC;AAC9D,SAASC,gBAAgB,EAAEC,sBAAsB,QAAQ,uBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE9E,MAAMC,WAAW,GAAGA,CAAC;EAAEC;AAAwC,CAAC,kBAC9DJ,IAAA,CAACJ,aAAa;EAACS,MAAM,EAAEb,gBAAiB;EAACc,WAAW,EAAC,MAAM;EAACC,MAAM,EAAC,IAAI;EAAAH,QAAA,EACpEA;AAAQ,CACI,CAChB;AAEDhB,QAAQ,CAAC,kBAAkB,EAAE,MAAM;EACjCC,EAAE,CAAC,8BAA8B,EAAE,MAAM;IACvC,MAAM;MAAEmB;IAAU,CAAC,GAAGf,MAAM,cAC1BO,IAAA,CAACG,WAAW;MAAAC,QAAA,eACVF,KAAA,CAACL,gBAAgB;QACfY,aAAa,EAAC,MAAM;QACpBC,gBAAgB,EAAEA,CAAA,KAAM;UACtB;QAAA,CACA;QACFC,kBAAkB,EAAC,kBAAkB;QAAAP,QAAA,gBAErCJ,IAAA,CAACF,sBAAsB;UAACc,KAAK,EAAC,MAAM;UAAAR,QAAA,EAAC;QAAI,CAAwB,CAAC,eAClEJ,IAAA,CAACF,sBAAsB;UAACc,KAAK,EAAC,SAAS;UAAAR,QAAA,EAAC;QAExC,CAAwB,CAAC;MAAA,CACT;IAAC,CACR,CACf,CAAC;IACDd,MAAM,CAACkB,SAAS,CAAC,MAAM,CAAC,CAAC,CAACK,UAAU,CAAC,CAAC;IACtCvB,MAAM,CAACkB,SAAS,CAAC,SAAS,CAAC,CAAC,CAACK,UAAU,CAAC,CAAC;EAC3C,CAAC,CAAC;EAEFxB,EAAE,CAAC,qEAAqE,EAAE,MAAM;IAC9E,MAAMqB,gBAAgB,GAAGnB,IAAI,CAACuB,EAAE,CAAC,CAAC;IAClC,MAAM;MAAEN;IAAU,CAAC,GAAGf,MAAM,cAC1BO,IAAA,CAACG,WAAW;MAAAC,QAAA,eACVF,KAAA,CAACL,gBAAgB;QACfY,aAAa,EAAC,MAAM;QACpBC,gBAAgB,EAAEA,gBAAiB;QACnCC,kBAAkB,EAAC,kBAAkB;QAAAP,QAAA,gBAErCJ,IAAA,CAACF,sBAAsB;UAACc,KAAK,EAAC,MAAM;UAAAR,QAAA,EAAC;QAAI,CAAwB,CAAC,eAClEJ,IAAA,CAACF,sBAAsB;UAACc,KAAK,EAAC,SAAS;UAAAR,QAAA,EAAC;QAExC,CAAwB,CAAC;MAAA,CACT;IAAC,CACR,CACf,CAAC;IAEDV,SAAS,CAACqB,KAAK,CAACP,SAAS,CAAC,SAAS,CAAC,CAAC;IAErClB,MAAM,CAACoB,gBAAgB,CAAC,CAACM,oBAAoB,CAAC,SAAS,CAAC;EAC1D,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}

package/dist/module/lib/Components/SegmentedControl/SegmentedControlContext.js

@@ -0,0 +1,10 @@
+"use strict";
+
+import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
+const [SegmentedControlContextProvider, _useSegmentedControlSafeContext] = createSafeContext('SegmentedControl');
+export const useSegmentedControlContext = () => _useSegmentedControlSafeContext({
+  consumerName: 'SegmentedControlButton',
+  contextRequired: true
+});
+export { SegmentedControlContextProvider };
+//# sourceMappingURL=SegmentedControlContext.js.map