@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

package/dist/src/lib/Components/Tile/Tile.stories.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { View } from 'react-native';
 import { Settings, Plus, User, Wallet, Cart, Apps, Chart1, } from '../../Symbols';
 import { Spot } from '../Spot/Spot';
 import { Tag } from '../Tag/Tag';
+import { Box } from '../Utility';
 import { Tile } from './Tile';
 const meta = {
     component: Tile,
@@ -43,7 +43,7 @@ export const Base = {
         title: 'Item with Spot and Description',
         description: 'Additional information',
         leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings }),
-        className: 'max-w-256',
+        lx: { maxWidth: 's256' },
     },
     parameters: {
         docs: {
@@ -55,7 +55,7 @@ export const Base = {
   leadingContent={<Spot appearance="icon" icon={Settings} />}
   onLongPress={() => console.log('Secondary action')}
   onPress={() => console.log('Primary action')}
-  className="max-w-256"
+  lx={{ maxWidth: 's256' }}
 />
 `,
             },
@@ -68,7 +68,7 @@ export const WithTrailingContent = {
         description: 'Additional information',
         leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings }),
         trailingContent: _jsx(Tag, { label: 'New', appearance: 'base' }),
-        className: 'max-w-256',
+        lx: { maxWidth: 's256' },
     },
     parameters: {
         docs: {
@@ -80,7 +80,7 @@ export const WithTrailingContent = {
   leadingContent={<Spot appearance="icon" icon={Settings} />}
   trailingContent={<Tag label="New" appearance="base" />}
   onLongPress={() => console.log('Long press - secondary action')}
-  className="max-w-256"
+  lx={{ maxWidth: 's256' }}
 />
 `,
             },
@@ -93,7 +93,7 @@ export const WithSecondaryAction = {
         description: 'LongPress to trigger secondary action',
         leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings }),
         onLongPress: () => alert('Long press - secondary action'),
-        className: 'max-w-256',
+        lx: { maxWidth: 's256' },
     },
     parameters: {
         docs: {
@@ -104,7 +104,7 @@ export const WithSecondaryAction = {
   description="Additional information"
   onLongPress={() => // do stuff}
   leadingContent={<Spot appearance="icon" icon={Settings} />}
-  className="max-w-256"
+  lx={{ maxWidth: 's256' }}
 />
 `,
             },
@@ -112,11 +112,21 @@ export const WithSecondaryAction = {
     },
 };
 export const LeadingContentVariantsShowcase = {
-    render: () => (_jsxs(View, { className: 'flex flex-row', children: [_jsx(Tile, { title: 'User', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: User }), className: 'max-w-128' }), _jsx(Tile, { title: 'Wallet', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Wallet }), className: 'max-w-128' }), _jsx(Tile, { title: 'Cart', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Cart }), className: 'max-w-128' }), _jsx(Tile, { title: 'Apps', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }), className: 'max-w-128' }), _jsx(Tile, { title: 'Chart', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Chart1 }), className: 'max-w-128' })] })),
+    render: () => (_jsxs(Box, { lx: { flexDirection: 'row' }, children: [_jsx(Tile, { title: 'User', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: User }), lx: { maxWidth: 's128' } }), _jsx(Tile, { title: 'Wallet', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Wallet }), lx: { maxWidth: 's128' } }), _jsx(Tile, { title: 'Cart', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Cart }), lx: { maxWidth: 's128' } }), _jsx(Tile, { title: 'Apps', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }), lx: { maxWidth: 's128' } }), _jsx(Tile, { title: 'Chart', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Chart1 }), lx: { maxWidth: 's128' } })] })),
 };
 export const HorizontalList = {
-    render: () => (_jsxs(View, { className: 'flex flex-col gap-16', children: [_jsx(View, { className: 'flex w-480 flex-row bg-base', children: Array.from({ length: 5 }).map((_, i) => (_jsx(Tile, { title: `Item ${i + 1}`, description: `Description ${i + 1}`, leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }) }, `list-1-${i}`))) }), _jsx(View, { className: 'flex w-480 flex-row overflow-x-auto bg-base', children: Array.from({ length: 5 }).map((_, i) => (_jsx(Tile, { title: 'Long Title that should truncate appropriately', description: 'Long description that should truncate appropriately', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }), className: 'w-208 shrink-0' }, `list-2-${i}`))) })] })),
+    render: () => (_jsxs(Box, { lx: { flexDirection: 'column', gap: 's16' }, children: [_jsx(Box, { lx: {
+                    position: 'relative',
+                    flexDirection: 'row',
+                    width: 's480',
+                    backgroundColor: 'base',
+                }, children: Array.from({ length: 12 }).map((_, i) => (_jsx(Tile, { title: `Item ${i + 1}`, description: `Description ${i + 1}`, leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }) }, `list-1-${i}`))) }), _jsx(Box, { lx: {
+                    flexDirection: 'row',
+                    width: 's480',
+                    position: 'relative',
+                    backgroundColor: 'base',
+                }, children: Array.from({ length: 8 }).map((_, i) => (_jsx(Tile, { title: 'Long Title that should truncate appropriately', description: 'Long description that should truncate appropriately', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }), lx: { width: 's176', flexShrink: 0 } }, `list-2-${i}`))) })] })),
 };
 export const ResponsiveLayout = {
-    render: () => (_jsxs(View, { className: 'flex w-full flex-col gap-16', children: [_jsx(View, { children: _jsx(Tile, { title: 'Item fill width', description: 'Description fill width', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }) }) }), _jsx(View, { className: 'flex items-center justify-center', children: _jsx(Tile, { className: 'w-224', title: 'Long Item with fixed width', description: 'lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Plus }) }) })] })),
+    render: () => (_jsxs(Box, { lx: { width: 'full', flexDirection: 'column', gap: 's16' }, children: [_jsx(Box, { children: _jsx(Tile, { title: 'Item fill width', description: 'Description fill width', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }) }) }), _jsx(Box, { lx: { alignItems: 'center', justifyContent: 'center' }, children: _jsx(Tile, { lx: { width: 's224' }, title: 'Long Item with fixed width', description: 'lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Plus }) }) })] })),
 };

package/dist/src/lib/Components/Tile/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { PressableProps } from 'react-native';
+import { StyledPressableProps } from '../../../styles';
 export type TileProps = {
     /**
      * Custom content to display at the top (leading area) of the tile.
@@ -35,11 +35,11 @@ export type TileProps = {
     /**
      * Callback function when the tile is pressed.
      */
-    onPress?: PressableProps['onPress'];
+    onPress?: StyledPressableProps['onPress'];
     /**
      * Callback function when the tile is long pressed.
      * Can be used to perform secondary actions.
      */
-    onLongPress?: PressableProps['onLongPress'];
-} & Omit<PressableProps, 'onPress' | 'onLongPress' | 'disabled'>;
+    onLongPress?: StyledPressableProps['onLongPress'];
+} & Omit<StyledPressableProps, 'onPress' | 'onLongPress' | 'disabled'>;
 //# sourceMappingURL=types.d.ts.map

package/dist/src/lib/Components/Tile/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,SAAS,GAAG;IACtB;;;OAGG;IACH,cAAc,EAAE,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IACtC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;CAC7C,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,MAAM,SAAS,GAAG;IACtB;;;OAGG;IACH,cAAc,EAAE,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IACtC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;IAC1C;;;OAGG;IACH,WAAW,CAAC,EAAE,oBAAoB,CAAC,aAAa,CAAC,CAAC;CACnD,GAAG,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC,CAAC"}

package/dist/src/lib/Components/Tooltip/Tooltip.d.ts

@@ -26,6 +26,14 @@ import type { TooltipProps, TooltipTriggerProps, TooltipContentProps } from './t
  * }
  */
 export declare const Tooltip: React.FC<TooltipProps>;
+/**
+ * The trigger element that opens the tooltip when pressed.
+ *
+ * @example
+ * <TooltipTrigger asChild>
+ *   <Button>Help</Button>
+ * </TooltipTrigger>
+ */
 export declare const TooltipTrigger: React.FC<TooltipTriggerProps>;
 export declare const TooltipContent: React.FC<TooltipContentProps>;
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/src/lib/Components/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAUvE,OAAO,KAAK,EACV,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAEjB;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA4B1C,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAkCxD,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAiBxD,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAUvE,OAAO,KAAK,EACV,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAEjB;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA4B1C,CAAC;AAGF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAmCxD,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAiBxD,CAAC"}

package/dist/src/lib/Components/Tooltip/Tooltip.js

@@ -43,7 +43,15 @@ export const Tooltip = ({ children, onOpenChange }) => {
     return (_jsx(TooltipContextProvider, { tooltipId: tooltipId, open: internalOpen, setOpen: setOpen, contentData: contentData, setContentData: setContentData, children: children }));
 };
 Tooltip.displayName = 'Tooltip';
-export const TooltipTrigger = ({ children, asChild = false, ...props }) => {
+/**
+ * The trigger element that opens the tooltip when pressed.
+ *
+ * @example
+ * <TooltipTrigger asChild>
+ *   <Button>Help</Button>
+ * </TooltipTrigger>
+ */
+export const TooltipTrigger = ({ children, asChild = false, style, ...props }) => {
     const { tooltipId, setOpen, contentData } = useTooltipSafeContext({
         consumerName: 'TooltipTrigger',
         contextRequired: true,
@@ -65,7 +73,7 @@ export const TooltipTrigger = ({ children, asChild = false, ...props }) => {
         }
     };
     const Comp = asChild ? SlotPressable : Pressable;
-    return (_jsx(Comp, { ...props, onPress: handlePress, children: children }));
+    return (_jsx(Comp, { ...props, style: style, onPress: handlePress, children: children }));
 };
 TooltipTrigger.displayName = 'TooltipTrigger';
 export const TooltipContent = ({ title, content, }) => {

package/dist/src/lib/Components/Tooltip/Tooltip.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAMvE,OAAO,EAAE,OAAO,EAAkC,MAAM,WAAW,CAAC;AAEpE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAI9B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,IAAI,EAAE,KAiBlB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA6B/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAuClC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAqBhC,CAAC"}
+{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAOvE,OAAO,EAAE,OAAO,EAAkC,MAAM,WAAW,CAAC;AAEpE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAI9B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,IAAI,EAAE,KAwBlB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAoC/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAgDlC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KA8BhC,CAAC"}

package/dist/src/lib/Components/Tooltip/Tooltip.stories.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Text, View } from 'react-native';
 import { Information } from '../../Symbols';
 import { Button } from '../Button';
 import { InteractiveIcon } from '../InteractiveIcon';
+import { Box } from '../Utility/Box';
+import { Text } from '../Utility/Text';
 import { GlobalTooltipBottomSheet } from './GlobalTooltipBottomSheet';
 import { Tooltip, TooltipTrigger, TooltipContent } from './Tooltip';
 const meta = {
@@ -12,16 +13,38 @@ const meta = {
 };
 export default meta;
 export const Base = {
-    render: () => (_jsxs(_Fragment, { children: [_jsx(View, { className: 'flex min-h-400 items-center justify-center p-24', children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Press me" }) }), _jsx(TooltipContent, { title: 'My tooltip title', content: _jsx(Text, { children: "This is a helpful tooltip" }) })] }) }), _jsx(GlobalTooltipBottomSheet, {})] })),
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Box, { lx: {
+                    minHeight: 's400',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    padding: 's24',
+                }, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Press me" }) }), _jsx(TooltipContent, { title: 'My tooltip title', content: _jsx(Text, { typography: 'body2', children: "This is a helpful tooltip" }) })] }) }), _jsx(GlobalTooltipBottomSheet, {})] })),
 };
 export const WithCustomContent = {
-    render: () => (_jsxs(_Fragment, { children: [_jsx(View, { className: 'flex min-h-400 items-center justify-center p-24', children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Press me" }) }), _jsx(TooltipContent, { title: 'My tooltip title', content: _jsxs(View, { className: 'flex items-start gap-12', children: [_jsx(Text, { className: 'text-muted', children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }), _jsx(Button, { size: 'xs', appearance: 'accent', children: "Custom tooltip action" })] }) })] }) }), _jsx(GlobalTooltipBottomSheet, {})] })),
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Box, { lx: {
+                    minHeight: 's400',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    padding: 's24',
+                }, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Press me" }) }), _jsx(TooltipContent, { title: 'My tooltip title', content: _jsxs(Box, { lx: { alignItems: 'flex-start', gap: 's12' }, children: [_jsx(Text, { typography: 'body2', lx: { color: 'muted' }, children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }), _jsx(Button, { size: 'sm', appearance: 'accent', children: "Custom tooltip action" })] }) })] }) }), _jsx(GlobalTooltipBottomSheet, {})] })),
 };
 export const WithMultipleTooltips = {
-    render: () => (_jsxs(_Fragment, { children: [_jsxs(View, { className: 'flex min-h-400 flex-row items-center justify-center gap-16 p-24', children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Tooltip 1" }) }), _jsx(TooltipContent, { title: 'First', content: _jsx(Text, { children: "First tooltip content" }) })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Tooltip 2" }) }), _jsx(TooltipContent, { title: 'Second', content: _jsx(Text, { children: "Second tooltip content" }) })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(InteractiveIcon, { iconType: 'filled', "aria-label": 'Info', children: _jsx(Information, {}) }) }), _jsx(TooltipContent, { title: 'Third', content: _jsx(Text, { children: "Third tooltip content" }) })] })] }), _jsx(GlobalTooltipBottomSheet, {})] })),
+    render: () => (_jsxs(_Fragment, { children: [_jsxs(Box, { lx: {
+                    minHeight: 's400',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: 's16',
+                    padding: 's24',
+                }, children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Tooltip 1" }) }), _jsx(TooltipContent, { title: 'First', content: _jsx(Text, { typography: 'body2', children: "First tooltip content" }) })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Tooltip 2" }) }), _jsx(TooltipContent, { title: 'Second', content: _jsx(Text, { typography: 'body2', children: "Second tooltip content" }) })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(InteractiveIcon, { iconType: 'filled', accessibilityLabel: 'Info', children: _jsx(Information, {}) }) }), _jsx(TooltipContent, { title: 'Third', content: _jsx(Text, { typography: 'body2', children: "Third tooltip content" }) })] })] }), _jsx(GlobalTooltipBottomSheet, {})] })),
 };
 export const WithChangeCallback = {
     render: () => {
-        return (_jsxs(_Fragment, { children: [_jsx(View, { className: 'flex min-h-400 items-center justify-center p-24', children: _jsxs(Tooltip, { onOpenChange: (newOpen) => alert(`Opened changes to: ${newOpen}`), children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Press me" }) }), _jsx(TooltipContent, { title: 'My tooltip title', content: _jsx(Text, { children: "This is a helpful tooltip" }) })] }) }), _jsx(GlobalTooltipBottomSheet, {})] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Box, { lx: {
+                        minHeight: 's400',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        padding: 's24',
+                    }, children: _jsxs(Tooltip, { onOpenChange: (newOpen) => alert(`Opened changes to: ${newOpen}`), children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Press me" }) }), _jsx(TooltipContent, { title: 'My tooltip title', content: _jsx(Text, { typography: 'body2', children: "This is a helpful tooltip" }) })] }) }), _jsx(GlobalTooltipBottomSheet, {})] }));
     },
 };

package/dist/src/lib/Components/Utility/Box/Box.d.ts

@@ -0,0 +1,39 @@
+import { View } from 'react-native';
+/**
+ * Box - A layout primitive component with token-constrained style props.
+ *
+ * Box is a View wrapper that accepts design token-based style props directly,
+ * providing type-safe styling with autocomplete for spacing, sizes, colors, etc.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/layout-box--docs Storybook}
+ *
+ * @example
+ * ```tsx
+ * import { Box } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // Basic usage with token props
+ * <Box lx={{ width: 's400', marginTop: 's4', gap: 's12', alignItems: 'center' }}>
+ *   <Text>Content</Text>
+ * </Box>
+ *
+ * // With background and border
+ * <Box
+ *   lx={{
+ *    padding: 's16',
+ *    backgroundColor: 'surface',
+ *    borderRadius: 'md',
+ *    borderColor: 'muted',
+ *    borderWidth: 1
+ *   }}
+ * >
+ *   <Text>Card content</Text>
+ * </Box>
+ *
+ * // style prop for complete override
+ * <Box lx={{ marginTop: 's4' }} style={{ width: 127 }} />
+ * ```
+ */
+export declare const Box: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
+    lx?: import("../../../../styles").LumenViewStyle;
+} & import("react-native").ViewProps & import("react").RefAttributes<View>>>;
+//# sourceMappingURL=Box.d.ts.map

package/dist/src/lib/Components/Utility/Box/Box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,GAAG;;4EAAyB,CAAC"}

package/dist/src/lib/Components/{Box → Utility/Box}/Box.js

@@ -1,5 +1,5 @@
 import { View } from 'react-native';
-import { createStyledView } from '../../../styles';
+import { createStyledView } from '../../../../styles';
 /**
  * Box - A layout primitive component with token-constrained style props.
  *
@@ -13,26 +13,25 @@ import { createStyledView } from '../../../styles';
  * import { Box } from '@ledgerhq/lumen-ui-rnative';
  *
  * // Basic usage with token props
- * <Box width='s400' marginTop='s4' gap='s12' alignItems='center'>
+ * <Box lx={{ width: 's400', marginTop: 's4', gap: 's12', alignItems: 'center' }}>
  *   <Text>Content</Text>
  * </Box>
  *
  * // With background and border
  * <Box
- *   padding='s16'
- *   backgroundColor='surface'
- *   borderRadius='md'
- *   borderColor='muted'
- *   borderWidth={1}
+ *   lx={{
+ *    padding: 's16',
+ *    backgroundColor: 'surface',
+ *    borderRadius: 'md',
+ *    borderColor: 'muted',
+ *    borderWidth: 1
+ *   }}
  * >
  *   <Text>Card content</Text>
  * </Box>
  *
- * // Raw numbers allowed as escape hatch
- * <Box width={127} marginTop='s4' />
- *
  * // style prop for complete override
- * <Box marginTop='s4' style={{ width: 127 }} />
+ * <Box lx={{ marginTop: 's4' }} style={{ width: 127 }} />
  * ```
  */
 export const Box = createStyledView(View);

package/dist/src/lib/Components/Utility/Box/Box.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Box/Box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAY1B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAC;AAElC,eAAO,MAAM,IAAI,EAAE,KA0BlB,CAAC"}

package/dist/src/lib/Components/{Box → Utility/Box}/Box.stories.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from './Box';
 const meta = {
     component: Box,
@@ -16,23 +15,25 @@ const meta = {
 export default meta;
 export const Base = {
     args: {
-        height: 's48',
-        width: 's48',
-        backgroundColor: 'accent',
-        borderRadius: 'md',
-        alignSelf: 'center',
+        lx: {
+            height: 's48',
+            width: 's48',
+            backgroundColor: 'accent',
+            borderRadius: 'md',
+        },
     },
-    render: (args) => _jsx(Box, { ...args }),
     parameters: {
         docs: {
             source: {
                 code: `
 <Box
-  height='s48'
-  width='s48'
-  backgroundColor='accent'
-  borderRadius='md'
-  alignSelf='center'
+  lx={{
+    height: 's48',
+    width: 's48',
+    backgroundColor: 'accent',
+    borderRadius: 'md',
+    alignSelf: 'center',
+  }}
 />
 `,
             },

package/dist/src/lib/Components/Utility/Box/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Box';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/lib/Components/Utility/Box/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Box/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC"}

package/dist/src/lib/Components/Utility/Box/index.js

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

package/dist/src/lib/Components/Utility/Box/types.d.ts

@@ -0,0 +1,3 @@
+import { StyledViewProps } from '../../../../styles';
+export type BoxProps = StyledViewProps;
+//# sourceMappingURL=types.d.ts.map

package/dist/src/lib/Components/Utility/Box/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Box/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,MAAM,QAAQ,GAAG,eAAe,CAAC"}

package/dist/src/lib/Components/Utility/Box/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/Components/Utility/Pressable/Pressable.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Pressable - An interactive layout primitive with token-constrained style props.
+ *
+ * Pressable is a wrapper around React Native's Pressable that accepts design
+ * token-based style props directly, providing type-safe styling with autocomplete
+ * for spacing, sizes, colors, etc. Use the `style` prop for pressed-state styling.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/utility-pressable--docs Storybook}
+ *
+ * @example
+ * ```tsx
+ * import { Pressable } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // Basic usage with token props
+ * <Pressable
+ *   lx={{ width: 's400', marginTop: 's4', gap: 's12', alignItems: 'center' }}
+ *   onPress={handlePress}
+ * >
+ *   <Text>Content</Text>
+ * </Pressable>
+ *
+ * // With function-based style for pressed state
+ * <Pressable
+ *   lx={{ padding: 's16', backgroundColor: 'surface' }}
+ *   style={({ pressed }) => ({ opacity: pressed ? 0.8 : 1 })}
+ * >
+ *   <Text>Press me</Text>
+ * </Pressable>
+ * ```
+ */
+export declare const Pressable: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
+    lx?: import("../../../../styles").LumenViewStyle;
+} & Omit<import("react-native").PressableProps, "style"> & {
+    style?: import("../../../../styles").PressableStyleItem;
+} & import("react").RefAttributes<import("react-native").View>>>;
+//# sourceMappingURL=Pressable.d.ts.map

package/dist/src/lib/Components/Utility/Pressable/Pressable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pressable.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Pressable/Pressable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,SAAS;;;;gEAAqC,CAAC"}

package/dist/src/lib/Components/Utility/Pressable/Pressable.js

@@ -0,0 +1,33 @@
+import { Pressable as RNPressable } from 'react-native';
+import { createStyledPressable } from '../../../../styles';
+/**
+ * Pressable - An interactive layout primitive with token-constrained style props.
+ *
+ * Pressable is a wrapper around React Native's Pressable that accepts design
+ * token-based style props directly, providing type-safe styling with autocomplete
+ * for spacing, sizes, colors, etc. Use the `style` prop for pressed-state styling.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/utility-pressable--docs Storybook}
+ *
+ * @example
+ * ```tsx
+ * import { Pressable } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // Basic usage with token props
+ * <Pressable
+ *   lx={{ width: 's400', marginTop: 's4', gap: 's12', alignItems: 'center' }}
+ *   onPress={handlePress}
+ * >
+ *   <Text>Content</Text>
+ * </Pressable>
+ *
+ * // With function-based style for pressed state
+ * <Pressable
+ *   lx={{ padding: 's16', backgroundColor: 'surface' }}
+ *   style={({ pressed }) => ({ opacity: pressed ? 0.8 : 1 })}
+ * >
+ *   <Text>Press me</Text>
+ * </Pressable>
+ * ```
+ */
+export const Pressable = createStyledPressable(RNPressable);

package/dist/src/lib/Components/Utility/Pressable/Pressable.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { Pressable } from './Pressable';
+declare const meta: Meta<typeof Pressable>;
+export default meta;
+type Story = StoryObj<typeof Pressable>;
+export declare const Base: Story;
+//# sourceMappingURL=Pressable.stories.d.ts.map

package/dist/src/lib/Components/Utility/Pressable/Pressable.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pressable.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Pressable/Pressable.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAYhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,IAAI,EAAE,KA8BlB,CAAC"}

package/dist/src/lib/Components/Utility/Pressable/Pressable.stories.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pressable } from './Pressable';
+const meta = {
+    component: Pressable,
+    title: 'Utility/Pressable',
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                format: true,
+                type: 'code',
+            },
+        },
+    },
+};
+export default meta;
+export const Base = {
+    args: {
+        lx: {
+            height: 's48',
+            width: 's48',
+            backgroundColor: 'accent',
+            borderRadius: 'md',
+            alignSelf: 'center',
+        },
+        style: ({ pressed }) => ({ opacity: pressed ? 0.5 : 1 }),
+    },
+    render: (args) => _jsx(Pressable, { ...args }),
+    parameters: {
+        docs: {
+            source: {
+                code: `
+<Pressable
+  style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}
+  lx={{
+    height: 's48',
+    width: 's48',
+    backgroundColor: 'accent',
+    borderRadius: 'md',
+    alignSelf: 'center',
+  }}
+/>
+`,
+            },
+        },
+    },
+};

package/dist/src/lib/Components/Utility/Pressable/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Pressable';
+export type { PressableProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/lib/Components/Utility/Pressable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Pressable/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC"}

package/dist/src/lib/Components/Utility/Pressable/index.js

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

package/dist/src/lib/Components/Utility/Pressable/types.d.ts

@@ -0,0 +1,3 @@
+import { StyledViewProps } from '../../../../styles';
+export type PressableProps = StyledViewProps;
+//# sourceMappingURL=types.d.ts.map

package/dist/src/lib/Components/Utility/Pressable/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Pressable/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,MAAM,cAAc,GAAG,eAAe,CAAC"}

package/dist/src/lib/Components/Utility/Pressable/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/Components/Utility/Text/Text.d.ts

@@ -0,0 +1,39 @@
+import { Text as RNText } from 'react-native';
+/**
+ * Text - A typography component with typography support and token-constrained style props.
+ *
+ * Text is a wrapper around React Native's Text that accepts a `typography` prop for
+ * typography presets, plus design token-based style props for colors, spacing, etc.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/typography-text--docs Storybook}
+ *
+ * @example
+ * ```tsx
+ * import { Text } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // Basic usage with typography typography
+ * <Text typography='body1'>Hello World</Text>
+ *
+ * // With custom color
+ * <Text typography='heading2SemiBold' lx={{ color: 'muted' }}>
+ *   Subtitle
+ * </Text>
+ *
+ * // With spacing
+ * <Text typography='body2' lx={{ marginTop: 's8', color: 'base' }}>
+ *   Description text
+ * </Text>
+ *
+ * // Style prop for complete override
+ * <Text
+ *  typography='body1'
+ *  lx={{ marginTop: 's8' }}
+ *  style={{ letterSpacing: 127 }}
+ * />
+ * ```
+ */
+export declare const Text: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
+    lx?: import("../../../../styles").LumenTextStyle;
+    typography?: keyof import("../../../../styles").LumenStyleSheetTheme["typographies"];
+} & import("react-native").TextProps & import("react").RefAttributes<RNText>>>;
+//# sourceMappingURL=Text.d.ts.map

package/dist/src/lib/Components/Utility/Text/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAG9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,IAAI;;uBAJW,iEAIf;8EAA+B,CAAC"}