@ledgerhq/lumen-ui-rnative 0.1.36 → 0.1.37

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

@@ -1,6 +1,6 @@
 "use strict";
 
-import { StyleSheet } from 'react-native';
+import { DisabledProvider, useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import { useStyleSheet } from "../../../styles/index.js";
 import { Box } from "../Utility/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -49,13 +49,20 @@ const useStyles = ({
   size,
   shape,
   pin,
-  appearance
+  appearance,
+  disabled
 }) => {
   return useStyleSheet(t => {
     const sizeValue = t.sizes[`s${size}`];
     const radius = shape === 'circle' ? t.borderRadius.full : dotSquareRadiusMap[size];
     const pinOffset = getPinOffset(pin);
     return {
+      root: {
+        position: 'relative',
+        ...(disabled && {
+          opacity: 0.3
+        })
+      },
       dot: {
         position: 'absolute',
         zIndex: 10,
@@ -74,7 +81,7 @@ const useStyles = ({
         color: t.colors.text.onInteractive
       }
     };
-  }, [size, shape, pin, appearance]);
+  }, [size, shape, pin, appearance, disabled]);
 };
 
 /**
@@ -96,37 +103,51 @@ export const DotIcon = ({
   pin = 'bottom-end',
   size = 20,
   shape = 'circle',
+  disabled: disabledProp = false,
   lx = {},
   style,
   ref,
   ...rest
 }) => {
+  const disabled = useDisabledContext({
+    consumerName: 'DotIcon',
+    mergeWith: {
+      disabled: disabledProp
+    }
+  });
   const styles = useStyles({
     size,
     shape,
     pin,
-    appearance
+    appearance,
+    disabled
   });
-  return /*#__PURE__*/_jsx(Box, {
-    ref: ref,
-    lx: lx,
-    style: StyleSheet.flatten([{
-      position: 'relative'
-    }, style]),
-    ...rest,
-    children: /*#__PURE__*/_jsxs(Box, {
-      style: {
-        alignSelf: 'flex-start',
-        position: 'relative'
+  return /*#__PURE__*/_jsx(DisabledProvider, {
+    value: {
+      disabled: false
+    },
+    children: /*#__PURE__*/_jsx(Box, {
+      ref: ref,
+      lx: lx,
+      style: [styles.root, style],
+      accessibilityState: {
+        disabled
       },
-      children: [children, /*#__PURE__*/_jsx(Box, {
-        testID: "dot-icon-dot",
-        style: styles.dot,
-        children: /*#__PURE__*/_jsx(Icon, {
-          size: dotIconSizeMap[size],
-          style: styles.icon
-        })
-      })]
+      ...rest,
+      children: /*#__PURE__*/_jsxs(Box, {
+        style: {
+          alignSelf: 'flex-start',
+          position: 'relative'
+        },
+        children: [children, /*#__PURE__*/_jsx(Box, {
+          testID: "dot-icon-dot",
+          style: styles.dot,
+          children: /*#__PURE__*/_jsx(Icon, {
+            size: dotIconSizeMap[size],
+            style: styles.icon
+          })
+        })]
+      })
     })
   });
 };

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

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","useStyleSheet","Box","jsx","_jsx","jsxs","_jsxs","dotIconSizeMap","dotSquareRadiusMap","mediaImageDotIconSizeMap","spotDotIconSizeMap","pinAxisMap","DOT_OFFSET","getPinOffset","pin","v","h","appearanceBgMap","success","muted","error","useStyles","size","shape","appearance","t","sizeValue","sizes","radius","borderRadius","full","pinOffset","dot","position","zIndex","width","height","borderWidth","backgroundColor","colors","bg","borderColor","border","baseInverted","overflow","alignItems","justifyContent","icon","color","text","onInteractive","DotIcon","children","Icon","lx","style","ref","rest","styles","flatten","alignSelf","testID","displayName"],"sourceRoot":"../../../../../src","sources":["lib/Components/DotIcon/DotIcon.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["DisabledProvider","useDisabledContext","useStyleSheet","Box","jsx","_jsx","jsxs","_jsxs","dotIconSizeMap","dotSquareRadiusMap","mediaImageDotIconSizeMap","spotDotIconSizeMap","pinAxisMap","DOT_OFFSET","getPinOffset","pin","v","h","appearanceBgMap","success","muted","error","useStyles","size","shape","appearance","disabled","t","sizeValue","sizes","radius","borderRadius","full","pinOffset","root","position","opacity","dot","zIndex","width","height","borderWidth","backgroundColor","colors","bg","borderColor","border","baseInverted","overflow","alignItems","justifyContent","icon","color","text","onInteractive","DotIcon","children","Icon","disabledProp","lx","style","ref","rest","consumerName","mergeWith","styles","value","accessibilityState","alignSelf","testID","displayName"],"sourceRoot":"../../../../../src","sources":["lib/Components/DotIcon/DotIcon.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -1,13 +1,18 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as DotIconStories from './DotIcon.stories';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
 
 <Meta title='Communication/DotIcon' of={DotIconStories} />
 
 # DotIcon
 
+<CustomTabs>
+  <Tab label="Overview">
+
 ## Introduction
 
 DotIcon positions a small icon indicator at a configurable corner of a child element such as MediaImage or Spot. The dot background uses a semantic color (`success`, `muted`, or `error`) to convey meaning at a glance.
+
 > View in [Figma](https://www.figma.com/design/zSkvGGiqcnhywp2l3HTHxA/1.-Symbol-Library?node-id=6159-1866).
 
 ## Anatomy
@@ -50,7 +55,94 @@ The dot size is driven by the parent MediaImage or Spot size via the mapping hel
 
 <Canvas of={DotIconStories.SizeShowcase} />
 
+### Disabled
+
+Only set `disabled` on `DotIcon`. The state is propagated to the child via context. Passing it to both stacks the opacity overlay.
+
+<Canvas of={DotIconStories.DisabledShowcase} />
+
 ## Accessibility
 
 - The icon is purely decorative; the child element should carry its own accessibility label.
 - Pair semantic appearances with meaningful icons so the state can be understood without relying on color alone.
+
+</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 { DotIcon, MediaImage } from '@ledgerhq/lumen-ui-rnative';
+import { ArrowDown } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function MyComponent() {
+  return (
+    <DotIcon appearance='success' icon={ArrowDown}>
+      <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+    </DotIcon>
+  );
+}
+```
+
+### Pin Placement
+
+Position the dot at any of the four corners of the child:
+
+```tsx
+<DotIcon appearance='success' icon={ArrowDown} pin='top-end'>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+</DotIcon>
+```
+
+### Shapes
+
+Use `shape='square'` to match a square child element:
+
+```tsx
+<DotIcon appearance='muted' icon={ArrowDown} shape='square'>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} shape='square' />
+</DotIcon>
+```
+
+### Appearances
+
+Pick a semantic color via `appearance`:
+
+```tsx
+<DotIcon appearance='success' icon={ArrowDown}>...</DotIcon>
+<DotIcon appearance='muted' icon={ArrowUp}>...</DotIcon>
+<DotIcon appearance='error' icon={Close}>...</DotIcon>
+```
+
+### Sizing
+
+The dot size is driven by the parent's size via the mapping helpers:
+
+```tsx
+import { DotIcon, mediaImageDotIconSizeMap, MediaImage } from '@ledgerhq/lumen-ui-rnative';
+
+<DotIcon
+  appearance='success'
+  icon={ArrowDown}
+  size={mediaImageDotIconSizeMap[48]}
+>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+</DotIcon>;
+```
+
+### Disabled State
+
+Only set `disabled` on `DotIcon`. The state is propagated to the child via context. Passing it to both stacks the opacity overlay.
+
+```tsx
+<DotIcon appearance='success' icon={ArrowDown} disabled>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+</DotIcon>
+```
+
+</Tab>
+</CustomTabs>

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

@@ -160,6 +160,53 @@ export const AppearanceShowcase = {
     })]
   })
 };
+export const DisabledShowcase = {
+  args: {
+    appearance: 'success',
+    icon: ArrowDown
+  },
+  render: () => /*#__PURE__*/_jsxs(Box, {
+    lx: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 's32'
+    },
+    children: [/*#__PURE__*/_jsx(DotIcon, {
+      appearance: "success",
+      icon: ArrowDown,
+      size: mediaImageDotIconSizeMap[48],
+      pin: "bottom-end",
+      disabled: true,
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: parentSrc,
+        size: 48,
+        shape: "circle"
+      })
+    }), /*#__PURE__*/_jsx(DotIcon, {
+      appearance: "muted",
+      icon: ArrowUp,
+      size: mediaImageDotIconSizeMap[48],
+      pin: "bottom-end",
+      disabled: true,
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: parentSrc,
+        size: 48,
+        shape: "circle"
+      })
+    }), /*#__PURE__*/_jsx(DotIcon, {
+      appearance: "error",
+      icon: Close,
+      size: mediaImageDotIconSizeMap[48],
+      pin: "bottom-end",
+      disabled: true,
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: parentSrc,
+        size: 48,
+        shape: "circle"
+      })
+    })]
+  })
+};
 export const SizeShowcase = {
   args: {
     appearance: 'muted',

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

@@ -1 +1 @@
-{"version":3,"names":["ArrowDown","ArrowUp","Close","Link","Star","MediaImage","Spinner","Box","DotIcon","mediaImageDotIconSizeMap","jsx","_jsx","jsxs","_jsxs","meta","component","title","parameters","docs","source","language","format","type","parentSrc","Base","args","appearance","icon","pin","size","shape","children","src","alt","PinShowcase","render","lx","flexDirection","alignItems","gap","ShapeShowcase","AppearanceShowcase","SizeShowcase"],"sourceRoot":"../../../../../src","sources":["lib/Components/DotIcon/DotIcon.stories.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["ArrowDown","ArrowUp","Close","Link","Star","MediaImage","Spinner","Box","DotIcon","mediaImageDotIconSizeMap","jsx","_jsx","jsxs","_jsxs","meta","component","title","parameters","docs","source","language","format","type","parentSrc","Base","args","appearance","icon","pin","size","shape","children","src","alt","PinShowcase","render","lx","flexDirection","alignItems","gap","ShapeShowcase","AppearanceShowcase","DisabledShowcase","disabled","SizeShowcase"],"sourceRoot":"../../../../../src","sources":["lib/Components/DotIcon/DotIcon.stories.tsx"],"mappings":";;AACA,SAASA,SAAS,EAAEC,OAAO,EAAEC,KAAK,EAAEC,IAAI,EAAEC,IAAI,QAAQ,wBAAe;AACrE,SAASC,UAAU,QAAQ,wBAAe;AAC1C,SAASC,OAAO,QAAQ,qBAAY;AACpC,SAASC,GAAG,QAAQ,qBAAY;AAChC,SAASC,OAAO,EAAEC,wBAAwB,QAAQ,cAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE9D,MAAMC,IAAI,GAAG;EACXC,SAAS,EAAEP,OAAO;EAClBQ,KAAK,EAAE,uBAAuB;EAC9BC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,MAAM,EAAE;QACNC,QAAQ,EAAE,KAAK;QACfC,MAAM,EAAE,IAAI;QACZC,IAAI,EAAE;MACR;IACF;EACF;AACF,CAAgC;AAEhC,eAAeR,IAAI;AAGnB,MAAMS,SAAS,GAAG,yCAAyC;AAE3D,OAAO,MAAMC,IAAW,GAAG;EACzBC,IAAI,EAAE;IACJC,UAAU,EAAE,SAAS;IACrBC,IAAI,EAAE3B,SAAS;IACf4B,GAAG,EAAE,YAAY;IACjBC,IAAI,EAAEpB,wBAAwB,CAAC,EAAE,CAAC;IAClCqB,KAAK,EAAE,QAAQ;IACfC,QAAQ,eACNpB,IAAA,CAACN,UAAU;MAAC2B,GAAG,EAAET,SAAU;MAACU,GAAG,EAAC,SAAS;MAACJ,IAAI,EAAE,EAAG;MAACC,KAAK,EAAC;IAAQ,CAAE;EAExE;AACF,CAAC;AAED,OAAO,MAAMI,WAAkB,GAAG;EAChCT,IAAI,EAAE;IAAEC,UAAU,EAAE,SAAS;IAAEC,IAAI,EAAE3B;EAAU,CAAC;EAChDmC,MAAM,EAAEA,CAAA,kBACNtB,KAAA,CAACN,GAAG;IAAC6B,EAAE,EAAE;MAAEC,aAAa,EAAE,KAAK;MAAEC,UAAU,EAAE,QAAQ;MAAEC,GAAG,EAAE;IAAM,CAAE;IAAAR,QAAA,gBAClEpB,IAAA,CAACH,OAAO;MAACkB,UAAU,EAAC,SAAS;MAACC,IAAI,EAAE3B,SAAU;MAAC4B,GAAG,EAAC,YAAY;MAAAG,QAAA,eAC7DpB,IAAA,CAACN,UAAU;QAAC2B,GAAG,EAAET,SAAU;QAACO,KAAK,EAAC;MAAQ,CAAE;IAAC,CACtC,CAAC,eACVnB,IAAA,CAACH,OAAO;MAACkB,UAAU,EAAC,SAAS;MAACC,IAAI,EAAE3B,SAAU;MAAC4B,GAAG,EAAC,SAAS;MAAAG,QAAA,eAC1DpB,IAAA,CAACN,UAAU;QAAC2B,GAAG,EAAET,SAAU;QAACO,KAAK,EAAC;MAAQ,CAAE;IAAC,CACtC,CAAC,eACVnB,IAAA,CAACH,OAAO;MAACkB,UAAU,EAAC,SAAS;MAACC,IAAI,EAAE3B,SAAU;MAAC4B,GAAG,EAAC,cAAc;MAAAG,QAAA,eAC/DpB,IAAA,CAACN,UAAU;QAAC2B,GAAG,EAAET,SAAU;QAACO,KAAK,EAAC;MAAQ,CAAE;IAAC,CACtC,CAAC,eACVnB,IAAA,CAACH,OAAO;MAACkB,UAAU,EAAC,SAAS;MAACC,IAAI,EAAE3B,SAAU;MAAC4B,GAAG,EAAC,WAAW;MAAAG,QAAA,eAC5DpB,IAAA,CAACN,UAAU;QAAC2B,GAAG,EAAET,SAAU;QAACO,KAAK,EAAC;MAAQ,CAAE;IAAC,CACtC,CAAC;EAAA,CACP;AAET,CAAC;AAED,OAAO,MAAMU,aAAoB,GAAG;EAClCf,IAAI,EAAE;IAAEC,UAAU,EAAE,OAAO;IAAEC,IAAI,EAAE3B;EAAU,CAAC;EAC9CmC,MAAM,EAAEA,CAAA,kBACNtB,KAAA,CAACN,GAAG;IAAC6B,EAAE,EAAE;MAAEC,aAAa,EAAE,KAAK;MAAEC,UAAU,EAAE,QAAQ;MAAEC,GAAG,EAAE;IAAM,CAAE;IAAAR,QAAA,gBAClEpB,IAAA,CAACH,OAAO;MACNkB,UAAU,EAAC,OAAO;MAClBC,IAAI,EAAE3B,SAAU;MAChB8B,KAAK,EAAC,QAAQ;MACdF,GAAG,EAAC,YAAY;MAAAG,QAAA,eAEhBpB,IAAA,CAACN,UAAU;QAAC2B,GAAG,EAAET,SAAU;QAACM,IAAI,EAAE,EAAG;QAACC,KAAK,EAAC;MAAQ,CAAE;IAAC,CAChD,CAAC,eACVnB,IAAA,CAACH,OAAO;MACNkB,UAAU,EAAC,OAAO;MAClBC,IAAI,EAAE3B,SAAU;MAChB8B,KAAK,EAAC,QAAQ;MACdF,GAAG,EAAC,YAAY;MAAAG,QAAA,eAEhBpB,IAAA,CAACN,UAAU;QAAC2B,GAAG,EAAET,SAAU;QAACM,IAAI,EAAE,EAAG;QAACC,KAAK,EAAC;MAAQ,CAAE;IAAC,CAChD,CAAC;EAAA,CACP;AAET,CAAC;AAED,OAAO,MAAMW,kBAAyB,GAAG;EACvChB,IAAI,EAAE;IAAEC,UAAU,EAAE,SAAS;IAAEC,IAAI,EAAE3B;EAAU,CAAC;EAChDmC,MAAM,EAAEA,CAAA,kBACNtB,KAAA,CAACN,GAAG;IAAC6B,EAAE,EAAE;MAAEC,aAAa,EAAE,KAAK;MAAEC,UAAU,EAAE,QAAQ;MAAEC,GAAG,EAAE;IAAM,CAAE;IAAAR,QAAA,gBAClEpB,IAAA,CAACH,OAAO;MACNkB,UAAU,EAAC,SAAS;MACpBC,IAAI,EAAE3B,SAAU;MAChB6B,IAAI,EAAEpB,wBAAwB,CAAC,EAAE,CAAE;MACnCmB,GAAG,EAAC,YAAY;MAAAG,QAAA,eAEhBpB,IAAA,CAACN,UAAU;QAAC2B,GAAG,EAAET,SAAU;QAACM,IAAI,EAAE,EAAG;QAACC,KAAK,EAAC;MAAQ,CAAE;IAAC,CAChD,CAAC,eACVnB,IAAA,CAACH,OAAO;MACNkB,UAAU,EAAC,OAAO;MAClBC,IAAI,EAAE1B,OAAQ;MACd4B,IAAI,EAAEpB,wBAAwB,CAAC,EAAE,CAAE;MACnCmB,GAAG,EAAC,YAAY;MAAAG,QAAA,eAEhBpB,IAAA,CAACN,UAAU;QAAC2B,GAAG,EAAET,SAAU;QAACM,IAAI,EAAE,EAAG;QAACC,KAAK,EAAC;MAAQ,CAAE;IAAC,CAChD,CAAC,eACVnB,IAAA,CAACH,OAAO;MACNkB,UAAU,EAAC,OAAO;MAClBC,IAAI,EAAEzB,KAAM;MACZ2B,IAAI,EAAEpB,wBAAwB,CAAC,EAAE,CAAE;MACnCmB,GAAG,EAAC,YAAY;MAAAG,QAAA,eAEhBpB,IAAA,CAACN,UAAU;QAAC2B,GAAG,EAAET,SAAU;QAACM,IAAI,EAAE,EAAG;QAACC,KAAK,EAAC;MAAQ,CAAE;IAAC,CAChD,CAAC;EAAA,CACP;AAET,CAAC;AAED,OAAO,MAAMY,gBAAuB,GAAG;EACrCjB,IAAI,EAAE;IAAEC,UAAU,EAAE,SAAS;IAAEC,IAAI,EAAE3B;EAAU,CAAC;EAChDmC,MAAM,EAAEA,CAAA,kBACNtB,KAAA,CAACN,GAAG;IAAC6B,EAAE,EAAE;MAAEC,aAAa,EAAE,KAAK;MAAEC,UAAU,EAAE,QAAQ;MAAEC,GAAG,EAAE;IAAM,CAAE;IAAAR,QAAA,gBAClEpB,IAAA,CAACH,OAAO;MACNkB,UAAU,EAAC,SAAS;MACpBC,IAAI,EAAE3B,SAAU;MAChB6B,IAAI,EAAEpB,wBAAwB,CAAC,EAAE,CAAE;MACnCmB,GAAG,EAAC,YAAY;MAChBe,QAAQ;MAAAZ,QAAA,eAERpB,IAAA,CAACN,UAAU;QAAC2B,GAAG,EAAET,SAAU;QAACM,IAAI,EAAE,EAAG;QAACC,KAAK,EAAC;MAAQ,CAAE;IAAC,CAChD,CAAC,eACVnB,IAAA,CAACH,OAAO;MACNkB,UAAU,EAAC,OAAO;MAClBC,IAAI,EAAE1B,OAAQ;MACd4B,IAAI,EAAEpB,wBAAwB,CAAC,EAAE,CAAE;MACnCmB,GAAG,EAAC,YAAY;MAChBe,QAAQ;MAAAZ,QAAA,eAERpB,IAAA,CAACN,UAAU;QAAC2B,GAAG,EAAET,SAAU;QAACM,IAAI,EAAE,EAAG;QAACC,KAAK,EAAC;MAAQ,CAAE;IAAC,CAChD,CAAC,eACVnB,IAAA,CAACH,OAAO;MACNkB,UAAU,EAAC,OAAO;MAClBC,IAAI,EAAEzB,KAAM;MACZ2B,IAAI,EAAEpB,wBAAwB,CAAC,EAAE,CAAE;MACnCmB,GAAG,EAAC,YAAY;MAChBe,QAAQ;MAAAZ,QAAA,eAERpB,IAAA,CAACN,UAAU;QAAC2B,GAAG,EAAET,SAAU;QAACM,IAAI,EAAE,EAAG;QAACC,KAAK,EAAC;MAAQ,CAAE;IAAC,CAChD,CAAC;EAAA,CACP;AAET,CAAC;AAED,OAAO,MAAMc,YAAmB,GAAG;EACjCnB,IAAI,EAAE;IAAEC,UAAU,EAAE,OAAO;IAAEC,IAAI,EAAExB;EAAK,CAAC;EACzCgC,MAAM,EAAEA,CAAA,kBACNtB,KAAA,CAACN,GAAG;IAAC6B,EAAE,EAAE;MAAEC,aAAa,EAAE,KAAK;MAAEC,UAAU,EAAE,UAAU;MAAEC,GAAG,EAAE;IAAM,CAAE;IAAAR,QAAA,gBACpEpB,IAAA,CAACH,OAAO;MACNkB,UAAU,EAAC,OAAO;MAClBC,IAAI,EAAExB,IAAK;MACX0B,IAAI,EAAEpB,wBAAwB,CAAC,EAAE,CAAE;MACnCmB,GAAG,EAAC,YAAY;MAAAG,QAAA,eAEhBpB,IAAA,CAACN,UAAU;QAAC2B,GAAG,EAAET,SAAU;QAACM,IAAI,EAAE,EAAG;QAACC,KAAK,EAAC;MAAQ,CAAE;IAAC,CAChD,CAAC,eACVnB,IAAA,CAACH,OAAO;MACNkB,UAAU,EAAC,SAAS;MACpBC,IAAI,EAAEvB,IAAK;MACXyB,IAAI,EAAEpB,wBAAwB,CAAC,EAAE,CAAE;MACnCmB,GAAG,EAAC,YAAY;MAAAG,QAAA,eAEhBpB,IAAA,CAACN,UAAU;QAAC2B,GAAG,EAAET,SAAU;QAACM,IAAI,EAAE,EAAG;QAACC,KAAK,EAAC;MAAQ,CAAE;IAAC,CAChD,CAAC,eACVnB,IAAA,CAACH,OAAO;MACNkB,UAAU,EAAC,SAAS;MACpBC,IAAI,EAAE3B,SAAU;MAChB6B,IAAI,EAAEpB,wBAAwB,CAAC,EAAE,CAAE;MACnCmB,GAAG,EAAC,YAAY;MAAAG,QAAA,eAEhBpB,IAAA,CAACN,UAAU;QAAC2B,GAAG,EAAET,SAAU;QAACM,IAAI,EAAE,EAAG;QAACC,KAAK,EAAC;MAAQ,CAAE;IAAC,CAChD,CAAC,eACVnB,IAAA,CAACH,OAAO;MACNkB,UAAU,EAAC,OAAO;MAClBC,IAAI,EAAErB,OAAQ;MACduB,IAAI,EAAEpB,wBAAwB,CAAC,EAAE,CAAE;MACnCmB,GAAG,EAAC,YAAY;MAAAG,QAAA,eAEhBpB,IAAA,CAACN,UAAU;QAAC2B,GAAG,EAAET,SAAU;QAACM,IAAI,EAAE,EAAG;QAACC,KAAK,EAAC;MAAQ,CAAE;IAAC,CAChD,CAAC;EAAA,CACP;AAET,CAAC","ignoreList":[]}

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

@@ -1,7 +1,8 @@
 "use strict";
 
+import { DisabledProvider, useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import { useEffect, useState } from 'react';
-import { Image, StyleSheet } from 'react-native';
+import { Image } from 'react-native';
 import { useStyleSheet } from "../../../styles/index.js";
 import { Box } from "../Utility/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -56,13 +57,20 @@ const getPinOffset = (pin, size) => {
 const useStyles = ({
   size,
   shape,
-  pin
+  pin,
+  disabled
 }) => {
   return useStyleSheet(t => {
     const sizeValue = t.sizes[`s${size}`];
     const radius = shape === 'circle' ? t.borderRadius.full : dotSquareRadiusMap[size];
     const pinOffset = getPinOffset(pin, size);
     return {
+      root: {
+        position: 'relative',
+        ...(disabled && {
+          opacity: 0.3
+        })
+      },
       dot: {
         position: 'absolute',
         zIndex: 10,
@@ -80,7 +88,7 @@ const useStyles = ({
         height: '100%'
       }
     };
-  }, [size, shape, pin]);
+  }, [size, shape, pin, disabled]);
 };
 
 /**
@@ -101,46 +109,60 @@ export const DotSymbol = ({
   pin = 'bottom-end',
   size = 20,
   shape = 'circle',
+  disabled: disabledProp = false,
   lx = {},
   style,
   ref,
   ...rest
 }) => {
+  const [error, setError] = useState(false);
+  const disabled = useDisabledContext({
+    consumerName: 'DotSymbol',
+    mergeWith: {
+      disabled: disabledProp
+    }
+  });
   const styles = useStyles({
     size,
     shape,
-    pin
+    pin,
+    disabled
   });
-  const [error, setError] = useState(false);
   useEffect(() => {
     setError(false);
   }, [src]);
-  return /*#__PURE__*/_jsx(Box, {
-    ref: ref,
-    lx: lx,
-    style: StyleSheet.flatten([{
-      position: 'relative'
-    }, style]),
-    accessibilityRole: "image",
-    accessibilityLabel: alt,
-    ...rest,
-    children: /*#__PURE__*/_jsxs(Box, {
-      style: {
-        alignSelf: 'flex-start',
-        position: 'relative'
+  return /*#__PURE__*/_jsx(DisabledProvider, {
+    value: {
+      disabled: false
+    },
+    children: /*#__PURE__*/_jsx(Box, {
+      ref: ref,
+      lx: lx,
+      style: [styles.root, style],
+      accessibilityRole: "image",
+      accessibilityLabel: alt,
+      accessibilityState: {
+        disabled
       },
-      children: [children, /*#__PURE__*/_jsx(Box, {
-        style: styles.dot,
-        children: !error && /*#__PURE__*/_jsx(Image, {
-          source: {
-            uri: src
-          },
-          style: styles.image,
-          accessible: false,
-          onError: () => setError(true),
-          testID: "dot-symbol-img"
-        })
-      })]
+      ...rest,
+      children: /*#__PURE__*/_jsxs(Box, {
+        style: {
+          alignSelf: 'flex-start',
+          position: 'relative'
+        },
+        children: [children, /*#__PURE__*/_jsx(Box, {
+          style: styles.dot,
+          children: !error && /*#__PURE__*/_jsx(Image, {
+            source: {
+              uri: src
+            },
+            style: styles.image,
+            accessible: false,
+            onError: () => setError(true),
+            testID: "dot-symbol-img"
+          })
+        })]
+      })
     })
   });
 };

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

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useState","Image","StyleSheet","useStyleSheet","Box","jsx","_jsx","jsxs","_jsxs","dotSquareRadiusMap","offsetBySize","mediaImageDotSizeMap","spotDotSizeMap","pinAxisMap","getPinOffset","pin","size","v","h","offset","useStyles","shape","t","sizeValue","sizes","radius","borderRadius","full","pinOffset","dot","position","zIndex","width","height","borderWidth","backgroundColor","colors","bg","muted","borderColor","border","baseInverted","overflow","image","DotSymbol","children","src","alt","lx","style","ref","rest","styles","error","setError","flatten","accessibilityRole","accessibilityLabel","alignSelf","source","uri","accessible","onError","testID","displayName"],"sourceRoot":"../../../../../src","sources":["lib/Components/DotSymbol/DotSymbol.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["DisabledProvider","useDisabledContext","useEffect","useState","Image","useStyleSheet","Box","jsx","_jsx","jsxs","_jsxs","dotSquareRadiusMap","offsetBySize","mediaImageDotSizeMap","spotDotSizeMap","pinAxisMap","getPinOffset","pin","size","v","h","offset","useStyles","shape","disabled","t","sizeValue","sizes","radius","borderRadius","full","pinOffset","root","position","opacity","dot","zIndex","width","height","borderWidth","backgroundColor","colors","bg","muted","borderColor","border","baseInverted","overflow","image","DotSymbol","children","src","alt","disabledProp","lx","style","ref","rest","error","setError","consumerName","mergeWith","styles","value","accessibilityRole","accessibilityLabel","accessibilityState","alignSelf","source","uri","accessible","onError","testID","displayName"],"sourceRoot":"../../../../../src","sources":["lib/Components/DotSymbol/DotSymbol.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -4,14 +4,17 @@ import { CustomTabs, Tab } from '../../../../.storybook/components';
 
 <Meta title='Communication/DotSymbol' of={DotSymbolStories} />
 
+# DotSymbol
+
 <CustomTabs>
   <Tab label="Overview">
-# DotSymbol
 
 ## Introduction
 
 DotSymbol positions a small image indicator at a configurable corner of a child element such as MediaImage or Spot. It is commonly used to show a network badge or secondary icon overlapping a primary symbol.
 
+> View in [Figma](https://www.figma.com/design/zSkvGGiqcnhywp2l3HTHxA/1.-Symbol-Library?node-id=8602-380&m=dev).
+
 ## Anatomy
 
 <Canvas of={DotSymbolStories.Base} />
@@ -46,9 +49,83 @@ The dot size is driven by the parent MediaImage or Spot size via the mapping hel
 
 <Canvas of={DotSymbolStories.SizeShowcase} />
 
+### Disabled
+
+Only set `disabled` on `DotSymbol`. The state is propagated to the child via context. Passing it to both stacks the opacity overlay.
+
+<Canvas of={DotSymbolStories.DisabledShowcase} />
+
 ## Accessibility
 
 - Always provide a meaningful `alt` prop on the DotSymbol so the indicator image is announced by screen readers.
 - The child element should carry its own accessibility label independently.
+
+</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 { DotSymbol, MediaImage } from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return (
+    <DotSymbol src='https://example.com/btc.png' alt='Bitcoin network'>
+      <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+    </DotSymbol>
+  );
+}
+```
+
+### Pin Placement
+
+Position the dot at any of the four corners of the child:
+
+```tsx
+<DotSymbol src='https://example.com/btc.png' alt='Bitcoin' pin='top-end'>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+</DotSymbol>
+```
+
+### Shapes
+
+Use `shape='square'` to match a square child element:
+
+```tsx
+<DotSymbol src='https://example.com/btc.png' alt='Bitcoin' shape='square'>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} shape='square' />
+</DotSymbol>
+```
+
+### Sizing
+
+The dot size is driven by the parent's size via the mapping helpers:
+
+```tsx
+import { DotSymbol, mediaImageDotSizeMap, MediaImage } from '@ledgerhq/lumen-ui-rnative';
+
+<DotSymbol
+  src='https://example.com/btc.png'
+  alt='Bitcoin'
+  size={mediaImageDotSizeMap[48]}
+>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+</DotSymbol>;
+```
+
+### Disabled State
+
+Only set `disabled` on `DotSymbol`. The state is propagated to the child via context. Passing it to both stacks the opacity overlay.
+
+```tsx
+<DotSymbol src='https://example.com/btc.png' alt='Bitcoin' disabled>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+</DotSymbol>
+```
+
 </Tab>
-</CustomTabs>
+</CustomTabs>

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

@@ -160,6 +160,47 @@ export const ShapeShowcase = {
     })
   })
 };
+export const DisabledShowcase = {
+  args: {
+    src: dotSrc,
+    alt: 'Disabled showcase'
+  },
+  render: () => /*#__PURE__*/_jsxs(Box, {
+    lx: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 's32'
+    },
+    children: [/*#__PURE__*/_jsx(DotSymbol, {
+      src: dotSrc,
+      pin: "bottom-end",
+      disabled: true,
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: parentSrc,
+        size: 48,
+        shape: "circle"
+      })
+    }), /*#__PURE__*/_jsx(DotSymbol, {
+      src: dotSrc,
+      pin: "bottom-end",
+      shape: "square",
+      disabled: true,
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: parentSrc,
+        size: 48,
+        shape: "square"
+      })
+    }), /*#__PURE__*/_jsx(DotSymbol, {
+      src: dotSrc,
+      pin: "bottom-end",
+      disabled: true,
+      children: /*#__PURE__*/_jsx(Spot, {
+        appearance: "icon",
+        icon: CoinAlert
+      })
+    })]
+  })
+};
 export const SizeShowcase = {
   args: {
     src: dotSrc,