@ledgerhq/lumen-ui-rnative 0.1.35 → 0.1.37

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

@@ -0,0 +1,184 @@
+"use strict";
+
+import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
+import { StyleSheet } from 'react-native';
+import { useStyleSheet } from "../../../styles/index.js";
+import { Box, Text } from "../Utility/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const [DescriptionItemSizeProvider, useDescriptionItemSizeContext] = createSafeContext('DescriptionItemSize', {
+  size: 'md'
+});
+
+/**
+ * A compound component for displaying a key-value description row.
+ * Composed with DescriptionItemLeading / DescriptionItemLabel (key side)
+ * and DescriptionItemTrailing / DescriptionItemValue (value side).
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/containment-descriptionitem--docs Storybook}
+ *
+ * @example
+ * <DescriptionItem size="md">
+ *   <DescriptionItemLeading>
+ *     <DescriptionItemLabel>Fees</DescriptionItemLabel>
+ *   </DescriptionItemLeading>
+ *   <DescriptionItemTrailing>
+ *     <DescriptionItemValue>0.001 BTC</DescriptionItemValue>
+ *   </DescriptionItemTrailing>
+ * </DescriptionItem>
+ */
+export const DescriptionItem = ({
+  children,
+  lx = {},
+  style,
+  size = 'md',
+  ...props
+}) => {
+  const styles = useStyleSheet(t => ({
+    root: {
+      width: '100%',
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      gap: t.spacings.s12
+    }
+  }), []);
+  return /*#__PURE__*/_jsx(DescriptionItemSizeProvider, {
+    value: {
+      size
+    },
+    children: /*#__PURE__*/_jsx(Box, {
+      lx: lx,
+      style: StyleSheet.flatten([styles.root, style]),
+      ...props,
+      children: children
+    })
+  });
+};
+
+/**
+ * Layout container for the leading (left) side of the description item.
+ * Contains DescriptionItemLabel and an optional info icon sibling.
+ */
+export const DescriptionItemLeading = ({
+  children,
+  lx = {},
+  style,
+  ...props
+}) => {
+  const styles = useStyleSheet(t => ({
+    leading: {
+      flex: 1,
+      minWidth: 0,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: t.spacings.s4
+    }
+  }), []);
+  return /*#__PURE__*/_jsx(Box, {
+    lx: lx,
+    style: StyleSheet.flatten([styles.leading, style]),
+    ...props,
+    children: children
+  });
+};
+
+/**
+ * Typography-bearing label for the leading side.
+ * Reads size from DescriptionItemSizeContext to apply the correct typography
+ * based on the size of the parent `DescriptionItem`.
+ */
+export const DescriptionItemLabel = ({
+  children,
+  lx = {},
+  style,
+  numberOfLines = 2,
+  ellipsizeMode = 'tail',
+  ...props
+}) => {
+  const {
+    size
+  } = useDescriptionItemSizeContext({
+    consumerName: 'DescriptionItemLabel',
+    contextRequired: false
+  });
+  const styles = useStyleSheet(t => ({
+    label: StyleSheet.flatten([size === 'md' ? t.typographies.body2 : t.typographies.body3, {
+      flexShrink: 1,
+      minWidth: 0,
+      color: t.colors.text.muted
+    }])
+  }), [size]);
+  return /*#__PURE__*/_jsx(Text, {
+    lx: lx,
+    style: StyleSheet.flatten([styles.label, style]),
+    numberOfLines: numberOfLines,
+    ellipsizeMode: ellipsizeMode,
+    allowFontScaling: false,
+    ...props,
+    children: children
+  });
+};
+
+/**
+ * Layout container for the trailing (right) side of the description item.
+ * Accepts DescriptionItemValue, Tag, Link, or any custom content.
+ */
+export const DescriptionItemTrailing = ({
+  children,
+  lx = {},
+  style,
+  ...props
+}) => {
+  const styles = useStyleSheet(t => ({
+    trailing: {
+      flexShrink: 0,
+      maxWidth: '80%',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: t.spacings.s4
+    }
+  }), []);
+  return /*#__PURE__*/_jsx(Box, {
+    lx: lx,
+    style: StyleSheet.flatten([styles.trailing, style]),
+    ...props,
+    children: children
+  });
+};
+
+/**
+ * Typography-bearing value for the trailing side.
+ * Reads size from DescriptionItemSizeContext to apply the correct typography
+ * based on the size of the parent `DescriptionItem`.
+ */
+export const DescriptionItemValue = ({
+  children,
+  lx = {},
+  style,
+  numberOfLines = 1,
+  ellipsizeMode = 'tail',
+  ...props
+}) => {
+  const {
+    size
+  } = useDescriptionItemSizeContext({
+    consumerName: 'DescriptionItemValue',
+    contextRequired: false
+  });
+  const styles = useStyleSheet(t => ({
+    value: StyleSheet.flatten([size === 'md' ? t.typographies.body2SemiBold : t.typographies.body3SemiBold, {
+      flexShrink: 1,
+      minWidth: 0,
+      color: t.colors.text.base
+    }])
+  }), [size]);
+  return /*#__PURE__*/_jsx(Text, {
+    lx: lx,
+    style: StyleSheet.flatten([styles.value, style]),
+    numberOfLines: numberOfLines,
+    ellipsizeMode: ellipsizeMode,
+    allowFontScaling: false,
+    ...props,
+    children: children
+  });
+};
+//# sourceMappingURL=DescriptionItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createSafeContext","StyleSheet","useStyleSheet","Box","Text","jsx","_jsx","DescriptionItemSizeProvider","useDescriptionItemSizeContext","size","DescriptionItem","children","lx","style","props","styles","t","root","width","flexDirection","alignItems","gap","spacings","s12","value","flatten","DescriptionItemLeading","leading","flex","minWidth","s4","DescriptionItemLabel","numberOfLines","ellipsizeMode","consumerName","contextRequired","label","typographies","body2","body3","flexShrink","color","colors","text","muted","allowFontScaling","DescriptionItemTrailing","trailing","maxWidth","DescriptionItemValue","body2SemiBold","body3SemiBold","base"],"sourceRoot":"../../../../../src","sources":["lib/Components/DescriptionItem/DescriptionItem.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,139 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as DescriptionItemStories from './DescriptionItem.stories';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+
+<Meta title='Containment/DescriptionItem' of={DescriptionItemStories} />
+
+# DescriptionItem
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=10311-11837&m=dev).
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+DescriptionItem is a compound component for displaying key-value rows — typically used inside a summary panel, transaction detail, or settings screen. It composes a leading label side and a trailing value side, with the trailing always taking priority over the leading when space is constrained.
+
+## Anatomy
+
+<Canvas of={DescriptionItemStories.Base} />
+
+- **DescriptionItem**: Root row container. Accepts an optional `size` prop (`md` | `sm`).
+- **DescriptionItemLeading**: Left section holding the label and any optional sibling (e.g. a tooltip icon).
+- **DescriptionItemLabel**: Muted text label. Wraps to a second line before truncating (`numberOfLines={2}`).
+- **DescriptionItemTrailing**: Right section holding the value or any inline element (Tag, Link, etc.). Never shrinks — always has layout priority.
+- **DescriptionItemValue**: Semi-bold value text. Truncates to a single line (`numberOfLines={1}`).
+
+## Properties
+
+<Canvas of={DescriptionItemStories.Base} />
+<Controls of={DescriptionItemStories.Base} />
+
+### Trailing variants
+
+The trailing section accepts any content — a plain value, a `Tag`, multiple `Tag`s, or a custom element. Use `DescriptionItemValue` for plain text; place other components directly in `DescriptionItemTrailing`.
+
+<Canvas of={DescriptionItemStories.TrailingVariants} />
+
+### Size
+
+Two sizes are available — `md` (default) and `sm`.
+
+- The size of `DescriptionItemValue` is inherited from the parent `DescriptionItem`.
+- The size of additional trailing content (e.g. `Tag`) needs to be set explicitly.
+
+<Canvas of={DescriptionItemStories.SizeShowcase} />
+
+### With info tooltip
+
+Pair a `Tooltip` with an info icon inside `DescriptionItemLeading` to surface additional context without cluttering the label.
+
+<Canvas of={DescriptionItemStories.WithInfoIcon} />
+
+### Truncation
+
+The label can wrap to two lines before truncating. The trailing value truncates after one line. When both sides have long content, the trailing always gets layout priority.
+
+<Canvas of={DescriptionItemStories.TruncationBehavior} />
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+## Basic Usage
+
+```tsx
+import {
+  DescriptionItem,
+  DescriptionItemLabel,
+  DescriptionItemLeading,
+  DescriptionItemTrailing,
+  DescriptionItemValue,
+} from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return (
+    <DescriptionItem size='md'>
+      <DescriptionItemLeading>
+        <DescriptionItemLabel>Fees</DescriptionItemLabel>
+      </DescriptionItemLeading>
+      <DescriptionItemTrailing>
+        <DescriptionItemValue>0.001 BTC</DescriptionItemValue>
+      </DescriptionItemTrailing>
+    </DescriptionItem>
+  );
+}
+```
+
+### With info tooltip
+
+Use a `Tooltip` alongside the label to add contextual information:
+
+```tsx
+import {
+  DescriptionItem,
+  DescriptionItemLabel,
+  DescriptionItemLeading,
+  DescriptionItemTrailing,
+  DescriptionItemValue,
+  InteractiveIcon,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from '@ledgerhq/lumen-ui-rnative';
+import { Information } from '@ledgerhq/lumen-ui-rnative/symbols';
+import { Text } from 'react-native';
+
+function MyComponent() {
+  return (
+    <DescriptionItem>
+      <DescriptionItemLeading>
+        <DescriptionItemLabel>Fees</DescriptionItemLabel>
+        <Tooltip>
+          <TooltipTrigger>
+            <InteractiveIcon
+              icon={Information}
+              size={16}
+              iconType='stroked'
+              accessibilityLabel='More information'
+            />
+          </TooltipTrigger>
+          <TooltipContent
+            content={<Text>Network fee paid to miners</Text>}
+          />
+        </Tooltip>
+      </DescriptionItemLeading>
+      <DescriptionItemTrailing>
+        <DescriptionItemValue>0.001 BTC</DescriptionItemValue>
+      </DescriptionItemTrailing>
+    </DescriptionItem>
+  );
+}
+```
+
+</Tab>
+</CustomTabs>

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

@@ -0,0 +1,258 @@
+"use strict";
+
+import { Text, View } from 'react-native';
+import { Information } from "../../Symbols/index.js";
+import { InteractiveIcon } from "../InteractiveIcon/index.js";
+import { Tag } from "../Tag/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
+import { DescriptionItem, DescriptionItemLabel, DescriptionItemLeading, DescriptionItemTrailing, DescriptionItemValue } from "./DescriptionItem.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Container = ({
+  children
+}) => /*#__PURE__*/_jsx(View, {
+  style: {
+    padding: 8,
+    backgroundColor: '#ffffff',
+    width: 320
+  },
+  children: children
+});
+const meta = {
+  component: DescriptionItem,
+  title: 'Containment/DescriptionItem',
+  subcomponents: {
+    DescriptionItemLeading,
+    DescriptionItemLabel,
+    DescriptionItemTrailing,
+    DescriptionItemValue
+  },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code'
+      }
+    }
+  },
+  decorators: [Story => /*#__PURE__*/_jsx(Container, {
+    children: /*#__PURE__*/_jsx(Story, {})
+  })]
+};
+export default meta;
+export const Base = {
+  args: {
+    size: 'md'
+  },
+  render: args => /*#__PURE__*/_jsxs(DescriptionItem, {
+    ...args,
+    children: [/*#__PURE__*/_jsx(DescriptionItemLeading, {
+      children: /*#__PURE__*/_jsx(DescriptionItemLabel, {
+        children: "Fees"
+      })
+    }), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
+      children: /*#__PURE__*/_jsx(DescriptionItemValue, {
+        children: "0.001 BTC"
+      })
+    })]
+  })
+};
+export const SizeShowcase = {
+  args: {
+    size: 'md'
+  },
+  render: () => /*#__PURE__*/_jsxs(View, {
+    style: {
+      gap: 16
+    },
+    children: [/*#__PURE__*/_jsxs(DescriptionItem, {
+      size: "md",
+      children: [/*#__PURE__*/_jsx(DescriptionItemLeading, {
+        children: /*#__PURE__*/_jsx(DescriptionItemLabel, {
+          children: "Network"
+        })
+      }), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
+        children: /*#__PURE__*/_jsx(DescriptionItemValue, {
+          children: "Ethereum"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(DescriptionItem, {
+      size: "md",
+      children: [/*#__PURE__*/_jsx(DescriptionItemLeading, {
+        children: /*#__PURE__*/_jsx(DescriptionItemLabel, {
+          children: "Network"
+        })
+      }), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
+        children: /*#__PURE__*/_jsx(Tag, {
+          size: "md",
+          label: "Ethereum",
+          appearance: "base"
+        })
+      })]
+    }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsxs(DescriptionItem, {
+      size: "sm",
+      children: [/*#__PURE__*/_jsx(DescriptionItemLeading, {
+        children: /*#__PURE__*/_jsx(DescriptionItemLabel, {
+          children: "Network"
+        })
+      }), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
+        children: /*#__PURE__*/_jsx(DescriptionItemValue, {
+          children: "Ethereum"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(DescriptionItem, {
+      size: "sm",
+      children: [/*#__PURE__*/_jsx(DescriptionItemLeading, {
+        children: /*#__PURE__*/_jsx(DescriptionItemLabel, {
+          children: "Network"
+        })
+      }), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
+        children: /*#__PURE__*/_jsx(Tag, {
+          size: "sm",
+          label: "Ethereum",
+          appearance: "base"
+        })
+      })]
+    })]
+  })
+};
+export const TrailingVariants = {
+  render: () => /*#__PURE__*/_jsxs(View, {
+    style: {
+      gap: 16
+    },
+    children: [/*#__PURE__*/_jsxs(DescriptionItem, {
+      children: [/*#__PURE__*/_jsx(DescriptionItemLeading, {
+        children: /*#__PURE__*/_jsx(DescriptionItemLabel, {
+          children: "Plain value"
+        })
+      }), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
+        children: /*#__PURE__*/_jsx(DescriptionItemValue, {
+          children: "Ethereum"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(DescriptionItem, {
+      children: [/*#__PURE__*/_jsx(DescriptionItemLeading, {
+        children: /*#__PURE__*/_jsx(DescriptionItemLabel, {
+          children: "Tag"
+        })
+      }), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
+        children: /*#__PURE__*/_jsx(Tag, {
+          size: "md",
+          label: "Confirmed",
+          appearance: "success"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(DescriptionItem, {
+      children: [/*#__PURE__*/_jsx(DescriptionItemLeading, {
+        children: /*#__PURE__*/_jsx(DescriptionItemLabel, {
+          children: "Multiple tags"
+        })
+      }), /*#__PURE__*/_jsxs(DescriptionItemTrailing, {
+        children: [/*#__PURE__*/_jsx(Tag, {
+          size: "md",
+          label: "ERC-20",
+          appearance: "base"
+        }), /*#__PURE__*/_jsx(Tag, {
+          size: "md",
+          label: "New",
+          appearance: "accent"
+        })]
+      })]
+    })]
+  })
+};
+export const WithInfoIcon = {
+  render: () => /*#__PURE__*/_jsxs(View, {
+    style: {
+      gap: 16
+    },
+    children: [/*#__PURE__*/_jsxs(DescriptionItem, {
+      children: [/*#__PURE__*/_jsxs(DescriptionItemLeading, {
+        children: [/*#__PURE__*/_jsx(DescriptionItemLabel, {
+          children: "Fees"
+        }), /*#__PURE__*/_jsxs(Tooltip, {
+          children: [/*#__PURE__*/_jsx(TooltipTrigger, {
+            children: /*#__PURE__*/_jsx(InteractiveIcon, {
+              icon: Information,
+              size: 16,
+              iconType: "stroked",
+              accessibilityLabel: "More information"
+            })
+          }), /*#__PURE__*/_jsx(TooltipContent, {
+            content: /*#__PURE__*/_jsx(Text, {
+              children: "Network fee paid to miners"
+            })
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
+        children: /*#__PURE__*/_jsx(DescriptionItemValue, {
+          children: "0.001 BTC"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(DescriptionItem, {
+      children: [/*#__PURE__*/_jsxs(DescriptionItemLeading, {
+        children: [/*#__PURE__*/_jsx(DescriptionItemLabel, {
+          children: "Estimated time"
+        }), /*#__PURE__*/_jsxs(Tooltip, {
+          children: [/*#__PURE__*/_jsx(TooltipTrigger, {
+            children: /*#__PURE__*/_jsx(InteractiveIcon, {
+              icon: Information,
+              size: 16,
+              iconType: "stroked",
+              accessibilityLabel: "More information"
+            })
+          }), /*#__PURE__*/_jsx(TooltipContent, {
+            content: /*#__PURE__*/_jsx(Text, {
+              children: "Time may vary based on network congestion"
+            })
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
+        children: /*#__PURE__*/_jsx(DescriptionItemValue, {
+          children: "~30 min"
+        })
+      })]
+    })]
+  })
+};
+export const TruncationBehavior = {
+  render: () => /*#__PURE__*/_jsxs(View, {
+    style: {
+      gap: 16
+    },
+    children: [/*#__PURE__*/_jsxs(DescriptionItem, {
+      children: [/*#__PURE__*/_jsx(DescriptionItemLeading, {
+        children: /*#__PURE__*/_jsx(DescriptionItemLabel, {
+          children: "This is a very long label that should go to a second line."
+        })
+      }), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
+        children: /*#__PURE__*/_jsx(DescriptionItemValue, {
+          children: "0.001 BTC"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(DescriptionItem, {
+      children: [/*#__PURE__*/_jsx(DescriptionItemLeading, {
+        children: /*#__PURE__*/_jsx(DescriptionItemLabel, {
+          children: "Label"
+        })
+      }), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
+        children: /*#__PURE__*/_jsx(DescriptionItemValue, {
+          children: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(DescriptionItem, {
+      children: [/*#__PURE__*/_jsx(DescriptionItemLeading, {
+        children: /*#__PURE__*/_jsx(DescriptionItemLabel, {
+          children: "Destination address on network"
+        })
+      }), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
+        children: /*#__PURE__*/_jsx(DescriptionItemValue, {
+          children: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
+        })
+      })]
+    })]
+  })
+};
+//# sourceMappingURL=DescriptionItem.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Text","View","Information","InteractiveIcon","Tag","Tooltip","TooltipContent","TooltipTrigger","DescriptionItem","DescriptionItemLabel","DescriptionItemLeading","DescriptionItemTrailing","DescriptionItemValue","jsx","_jsx","jsxs","_jsxs","Container","children","style","padding","backgroundColor","width","meta","component","title","subcomponents","parameters","layout","docs","source","language","format","type","decorators","Story","Base","args","size","render","SizeShowcase","gap","label","appearance","TrailingVariants","WithInfoIcon","icon","iconType","accessibilityLabel","content","TruncationBehavior"],"sourceRoot":"../../../../../src","sources":["lib/Components/DescriptionItem/DescriptionItem.stories.tsx"],"mappings":"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","ignoreList":[]}