@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.47

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

@@ -1,17 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { View, Text } from 'react-native';
-import { Settings, Plus, User, PenEdit, Cart, Apps, Chart1, Bolt, ChevronRight, } from '../../Symbols';
-import { cn } from '../../utils';
-import { Spot } from '../Spot/Spot';
+import { useState } from 'react';
+import { Settings, ChevronRight, Wallet } from '../../Symbols';
+import { Switch } from '../Switch/Switch';
 import { Tag } from '../Tag/Tag';
-import { ListItem } from './ListItem';
-const Balance = ({ disabled }) => {
-    return (_jsxs(View, { className: 'items-end', children: [_jsx(Text, { className: cn('body-2-semi-bold', disabled && 'text-disabled'), children: "42.00" }), _jsx(Text, { className: cn('text-muted body-3', disabled && 'text-disabled'), children: "USD" })] }));
-};
+import { Box } from '../Utility';
+import { ListItem, ListItemLeading, ListItemContent, ListItemTitle, ListItemDescription, ListItemTrailing, ListItemSpot, ListItemIcon, ListItemTruncate, } from './ListItem';
 const meta = {
     component: ListItem,
     title: 'Containment/ListItem',
+    subcomponents: {
+        ListItemLeading,
+        ListItemContent,
+        ListItemTitle,
+        ListItemDescription,
+        ListItemTrailing,
+        ListItemSpot,
+        ListItemIcon,
+        ListItemTruncate,
+    },
     parameters: {
+        layout: 'padded',
+        backgrounds: { default: 'light' },
         docs: {
             source: {
                 language: 'tsx',
@@ -21,43 +30,9 @@ const meta = {
         },
     },
     argTypes: {
-        title: {
-            control: 'text',
-            description: 'The main title of the list item',
-        },
-        description: {
-            control: 'text',
-            description: 'Optional description',
-        },
-        descriptionTag: {
-            control: 'select',
-            options: ['None', 'Tag'],
-            mapping: {
-                None: undefined,
-                Tag: _jsx(Tag, { label: 'New', appearance: 'accent', icon: Bolt, size: 'sm' }),
-            },
-            if: { arg: 'description', exists: true },
-        },
-        leadingContent: {
-            control: 'select',
-            options: ['None', 'Settings', 'Plus'],
-            mapping: {
-                None: undefined,
-                Settings: _jsx(Spot, { appearance: 'icon', icon: Settings }),
-                Plus: _jsx(Spot, { appearance: 'icon', icon: Plus }),
-            },
-            description: 'Optional leading content',
-        },
-        trailingContent: {
-            control: 'select',
-            description: 'Optional trailing content to display on the right side',
-            options: ['icon', 'value', 'tag', 'none'],
-            mapping: {
-                icon: _jsx(PenEdit, { size: 24 }),
-                value: _jsx(Balance, {}),
-                tag: _jsx(Tag, { label: 'New', appearance: 'accent' }),
-                none: undefined,
-            },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the list item is disabled',
         },
         onPress: {
             action: 'pressed',
@@ -68,44 +43,64 @@ const meta = {
 export default meta;
 export const Base = {
     args: {
-        title: 'Item with Icon and Description',
-        leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings }),
-        description: 'Additional information',
-        className: 'max-w-320',
+        lx: { maxWidth: 's320' },
     },
+    render: (args) => (_jsx(ListItem, { ...args, children: _jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Item with Icon and Description" }), _jsx(ListItemDescription, { children: "Additional information" })] })] }) })),
     parameters: {
         docs: {
             source: {
                 code: `
-<ListItem
-  title="Item with Icon and Description"
-  leadingContent={<Spot appearance="icon" icon={Settings} />}
-  description="Additional information"
-/>
+<ListItem>
+  <ListItemLeading>
+    <ListItemSpot appearance="icon" icon={Settings} />
+    <ListItemContent>
+      <ListItemTitle>Item with Icon and Description</ListItemTitle>
+      <ListItemDescription>Additional information</ListItemDescription>
+    </ListItemContent>
+  </ListItemLeading>
+</ListItem>
 `,
             },
         },
     },
 };
-export const WithDescriptionTag = {
-    args: {
-        title: 'Item with Description Tag',
-        leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings }),
-        description: 'Additional information',
-        descriptionTag: (_jsx(Tag, { label: 'New', appearance: 'accent', icon: Bolt, size: 'sm' })),
-    },
-    render: (args) => (_jsx(View, { className: 'max-w-320', children: _jsx(ListItem, { ...args }) })),
-};
-export const TrailingContentVariantsShowcase = {
+export const VariantsShowcase = {
     render: () => {
-        return (_jsxs(View, { className: 'flex max-w-256 flex-col', children: [_jsx(ListItem, { title: 'Caret Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: User }), trailingContent: _jsx(ChevronRight, { size: 24 }) }), _jsx(ListItem, { title: 'Value Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Cart }), trailingContent: _jsx(Balance, {}) }), _jsx(ListItem, { title: 'Tag Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }), trailingContent: _jsx(Tag, { label: 'New', appearance: 'accent' }) }), _jsx(ListItem, { title: 'Icon Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings }), trailingContent: _jsx(PenEdit, { size: 24 }) }), _jsx(ListItem, { title: 'None Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Chart1 }) })] }));
+        const [selected, setSelected] = useState(false);
+        return (_jsxs(Box, { lx: { flexDirection: 'column', maxWidth: 's320', gap: 's8' }, children: [_jsx(ListItem, { children: _jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Simple composition" }), _jsx(ListItemDescription, { children: "With description" })] })] }) }), _jsxs(ListItem, { onPress: () => setSelected(!selected), children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Switch Variant" }), _jsx(ListItemDescription, { children: "With description" })] })] }), _jsx(ListItemTrailing, { children: _jsx(Switch, { checked: selected, onCheckedChange: setSelected }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Content Variant" }), _jsx(ListItemDescription, { children: "With description" })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "42.10" }), _jsx(ListItemDescription, { children: "USD" })] }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Content Variant" }), _jsx(ListItemDescription, { children: "Custom style" })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "USD" }), _jsx(ListItemDescription, { lx: { color: 'error' }, children: "-7.53%" })] }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Content Variant" }), _jsx(ListItemDescription, { children: "Custom style" })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "USD" }), _jsx(ListItemDescription, { lx: { color: 'success' }, children: "+7.53%" })] }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Tag Variant" }), _jsx(ListItemDescription, { children: "Custom style" })] })] }), _jsx(ListItemTrailing, { children: _jsx(Tag, { size: 'sm', label: 'New', appearance: 'accent' }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Icon Variant" }), _jsx(ListItemDescription, { children: "With description" })] })] }), _jsx(ListItemTrailing, { children: _jsx(ListItemIcon, { icon: ChevronRight }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemIcon, { icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Icon without Spot" }), _jsx(ListItemDescription, { children: "Using ListItemIcon" })] })] }), _jsx(ListItemTrailing, { children: _jsx(ListItemIcon, { icon: ChevronRight }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsxs(ListItemTitle, { children: [_jsx(ListItemTruncate, { variant: 'title', children: "Complex 1" }), _jsx(Tag, { size: 'sm', label: 'New', appearance: 'base' })] }), _jsxs(ListItemDescription, { children: [_jsx(ListItemTruncate, { children: "With description" }), _jsx(Tag, { size: 'sm', label: 'Custom Tag', appearance: 'gray' })] })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "42.10" }), _jsx(ListItemDescription, { children: "USD" })] }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Complex 2" }), _jsx(ListItemDescription, { children: "With description" })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsxs(ListItemTitle, { children: [_jsx(Tag, { size: 'sm', label: 'New', appearance: 'base' }), _jsx(ListItemTruncate, { variant: 'title', children: "1200.12" })] }), _jsx(ListItemDescription, { children: _jsx(Tag, { size: 'sm', label: 'BTC', appearance: 'gray' }) })] }) })] })] }));
     },
 };
-export const StateShowcase = {
-    render: () => {
-        return (_jsxs(View, { className: 'flex flex-row gap-32', children: [_jsxs(View, { className: 'flex max-w-256 flex-col', children: [_jsx(ListItem, { title: 'Caret Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: User }), trailingContent: _jsx(ChevronRight, { size: 24, className: 'text-muted' }) }), _jsx(ListItem, { title: 'Value Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Cart }), trailingContent: _jsx(Balance, {}) }), _jsx(ListItem, { title: 'Tag Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }), trailingContent: _jsx(Tag, { label: 'New', appearance: 'accent' }) }), _jsx(ListItem, { title: 'Icon Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings }), trailingContent: _jsx(PenEdit, { size: 24 }) }), _jsx(ListItem, { title: 'None Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Chart1 }) })] }), _jsxs(View, { className: 'flex max-w-256 flex-col', children: [_jsx(ListItem, { title: 'Caret Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: User, disabled: true }), disabled: true, trailingContent: _jsx(ChevronRight, { size: 24, className: 'text-disabled' }) }), _jsx(ListItem, { title: 'Value Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Cart, disabled: true }), disabled: true, trailingContent: _jsx(Balance, { disabled: true }) }), _jsx(ListItem, { title: 'Tag Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps, disabled: true }), disabled: true, trailingContent: _jsx(Tag, { label: 'New', appearance: 'accent', className: '!bg-muted-transparent !text-disabled' }) }), _jsx(ListItem, { title: 'Icon Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings, disabled: true }), disabled: true, trailingContent: _jsx(PenEdit, { size: 24, className: 'text-disabled' }) }), _jsx(ListItem, { title: 'None Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Chart1, disabled: true }), disabled: true })] })] }));
+export const DisabledState = {
+    args: {
+        disabled: true,
+    },
+    render: (args) => (_jsxs(Box, { lx: { flexDirection: 'column', width: 's320' }, children: [_jsxs(ListItem, { ...args, children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Disabled Item" }), _jsx(ListItemDescription, { children: "This item is disabled" })] })] }), _jsx(ListItemTrailing, { children: _jsx(Switch, { checked: false, disabled: args.disabled }) })] }), _jsxs(ListItem, { ...args, children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Disabled Item" }), _jsx(ListItemDescription, { children: "This item is disabled" })] })] }), _jsx(ListItemTrailing, { children: _jsx(ListItemIcon, { icon: ChevronRight }) })] }), _jsxs(ListItem, { ...args, children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Content Variant" }), _jsx(ListItemDescription, { children: "With description" })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "42.10" }), _jsx(ListItemDescription, { children: "USD" })] }) })] }), _jsx(ListItem, { ...args, children: _jsxs(ListItemLeading, { children: [_jsx(ListItemIcon, { icon: Wallet }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Icon without Spot" }), _jsx(ListItemDescription, { children: "Using ListItemIcon" })] })] }) })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `
+<ListItem disabled>
+  <ListItemLeading>
+    <ListItemSpot appearance="icon" icon={Settings} />
+    <ListItemContent>
+      <ListItemTitle>Disabled Item</ListItemTitle>
+      <ListItemDescription>This item is disabled</ListItemDescription>
+    </ListItemContent>
+  </ListItemLeading>
+  <ListItemTrailing>
+    <ChevronRight size={24} />
+  </ListItemTrailing>
+</ListItem>
+`,
+            },
+        },
     },
 };
 export const ResponsiveLayout = {
-    render: () => (_jsxs(View, { className: 'w-320 bg-muted-pressed p-16', children: [_jsx(Text, { className: 'mb-16 text-muted body-4-semi-bold', children: "Container: 320px wide" }), _jsxs(View, { className: 'flex flex-col gap-0', children: [_jsx(ListItem, { title: 'Short Title', description: 'Short description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Plus }), trailingContent: _jsx(ChevronRight, { size: 24, className: 'text-muted' }) }), _jsx(ListItem, { title: 'Long Title that should truncate appropriately', description: 'Long description that should truncate appropriately', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Plus }), trailingContent: _jsx(ChevronRight, { size: 24, className: 'text-muted' }) }), _jsx(ListItem, { title: 'Long Title that should truncate appropriately', description: 'Long description that should truncate appropriately', descriptionTag: _jsx(Tag, { label: 'New', appearance: 'accent', size: 'sm' }), leadingContent: _jsx(Spot, { appearance: 'icon', icon: Plus }), trailingContent: _jsx(ChevronRight, { size: 24, className: 'text-muted' }) })] })] })),
+    render: () => (_jsx(Box, { lx: {
+            width: 's400',
+            borderWidth: 's1',
+            borderColor: 'mutedSubtle',
+            padding: 's16',
+        }, children: _jsxs(Box, { lx: { flexDirection: 'column' }, children: [_jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Short Title" }), _jsx(ListItemDescription, { children: "Short description" })] })] }), _jsx(ListItemTrailing, { children: _jsx(ListItemIcon, { icon: ChevronRight }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Settings }), _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Long Title that should truncate appropriately" }), _jsx(ListItemDescription, { children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos." })] })] }), _jsx(ListItemTrailing, { children: _jsx(ListItemIcon, { icon: ChevronRight }) })] }), _jsxs(ListItem, { children: [_jsxs(ListItemLeading, { children: [_jsx(ListItemSpot, { appearance: 'icon', icon: Wallet }), _jsxs(ListItemContent, { children: [_jsxs(ListItemTitle, { children: [_jsx(ListItemTruncate, { variant: 'title', children: "Long Title that should truncate appropriately" }), _jsx(Tag, { size: 'sm', label: 'New', appearance: 'base' })] }), _jsxs(ListItemDescription, { children: [_jsx(ListItemTruncate, { children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos." }), _jsx(Tag, { size: 'sm', label: 'Custom Tag', appearance: 'gray' })] })] })] }), _jsx(ListItemTrailing, { children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "42.10" }), _jsx(ListItemDescription, { children: "USD" })] }) })] })] }) })),
 };

package/dist/src/lib/Components/ListItem/index.d.ts

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

package/dist/src/lib/Components/ListItem/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/ListItem/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/ListItem/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}

package/dist/src/lib/Components/ListItem/index.js

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

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

@@ -0,0 +1,106 @@
+import React from 'react';
+import { LumenTextStyle, StyledPressableProps, StyledTextProps, StyledViewProps } from '../../../styles';
+import { DiscriminatedSpotProps } from '../Spot';
+/**
+ * Context value for passing state to sub-components
+ */
+export type ListItemContextValue = {
+    disabled?: boolean;
+};
+/**
+ * Props for the ListItem root component
+ */
+export type ListItemProps = {
+    /**
+     * The content of the list item (ListItemLeading, ListItemTrailing)
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the list item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Callback function when the list item is pressed.
+     */
+    onPress?: StyledPressableProps['onPress'];
+} & Omit<StyledPressableProps, 'disabled' | 'children'>;
+/**
+ * Props for the ListItemLeading component
+ */
+export type ListItemLeadingProps = {
+    /**
+     * The content of the leading area (visual element + ListItemContent)
+     */
+    children: React.ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+/**
+ * Props for the ListItemContent component
+ */
+export type ListItemContentProps = {
+    /**
+     * The content (ListItemTitle, ListItemDescription)
+     */
+    children: React.ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+/**
+ * Props for the ListItemTitle component
+ */
+export type ListItemTitleProps = {
+    /**
+     * The title text or custom content
+     */
+    children: React.ReactNode;
+} & Omit<StyledTextProps, 'children'>;
+/**
+ * Props for the ListItemDescription component
+ */
+export type ListItemDescriptionProps = {
+    /**
+     * The description text or custom content
+     */
+    children: React.ReactNode;
+} & Omit<StyledTextProps, 'children'>;
+/**
+ * Props for the ListItemTrailing component
+ */
+export type ListItemTrailingProps = {
+    /**
+     * The trailing content (icons, switches, values, etc.)
+     */
+    children: React.ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+/**
+ * Props for the ListItemTruncate component
+ * Used to truncate text that should when ListItemDescription or ListItemTitle contain custom content
+ */
+export type ListItemTruncateProps = {
+    /**
+     * The text content to truncate
+     */
+    children: string;
+    /**
+     * The variant determines typography and color styling.
+     * Use 'title' inside ListItemTitle and 'description' inside ListItemDescription.
+     * @default 'description'
+     */
+    variant?: 'title' | 'description';
+} & Omit<StyledTextProps, 'children'>;
+/**
+ * Props for the ListItemSpot component
+ * Spot adapter that inherits disabled state from parent ListItem
+ */
+export type ListItemSpotProps = DiscriminatedSpotProps & Omit<StyledViewProps, 'children'>;
+/**
+ * Props for the ListItemIcon component
+ */
+export type ListItemIconProps = {
+    /**
+     * The icon component to render
+     */
+    icon: React.ComponentType<any>;
+    /**
+     * Optional color override. If not provided, uses theme color with disabled state handling.
+     */
+    color?: LumenTextStyle['color'];
+} & Omit<StyledViewProps, 'children'>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/ListItem/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,eAAe,EAChB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEjD;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;CAC3C,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;AAExD;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;CACnC,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,sBAAsB,GACpD,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEpC;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CACjC,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TextInput } from 'react-native';
+export declare const SearchInput: React.ForwardRefExoticComponent<Omit<import("../BaseInput").BaseInputProps, "label" | "prefix"> & {
+    lx?: import("../../../styles").LumenViewStyle;
+} & import("react-native").ViewProps & React.RefAttributes<TextInput>>;
+//# sourceMappingURL=SearchInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKzC,eAAO,MAAM,WAAW;;sEAWtB,CAAC"}

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Search as SearchIcon } from '../../Symbols';
+import { BaseInput } from '../BaseInput';
+export const SearchInput = React.forwardRef((props, ref) => {
+    return (_jsx(BaseInput, { ref: ref, prefix: _jsx(SearchIcon, { size: 20, color: 'muted', accessible: false }), ...props }));
+});
+SearchInput.displayName = 'SearchInput';

package/dist/src/lib/Components/{Search/Search.stories.d.ts → SearchInput/SearchInput.stories.d.ts}

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import { Search } from './Search';
-declare const meta: Meta<typeof Search>;
+import { SearchInput } from './SearchInput';
+declare const meta: Meta<typeof SearchInput>;
 export default meta;
-type Story = StoryObj<typeof Search>;
+type Story = StoryObj<typeof SearchInput>;
 export declare const Base: Story;
 export declare const WithContent: Story;
 export declare const WithError: Story;
-export declare const DisabledSearch: Story;
+export declare const DisabledSearchInput: Story;
 export declare const WithHiddenClearButton: Story;
 export declare const WithClearCallback: Story;
-//# sourceMappingURL=Search.stories.d.ts.map
+//# sourceMappingURL=SearchInput.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CA8BlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AA6B1C,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KASjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAOnC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAa/B,CAAC"}

package/dist/src/lib/Components/{Search/Search.stories.js → SearchInput/SearchInput.stories.js}

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { View } from 'react-native';
-import { Search } from './Search';
+import { SearchInput } from './SearchInput';
 const meta = {
-    component: Search,
-    title: 'Input/Search',
+    component: SearchInput,
+    title: 'Input/SearchInput',
     parameters: {
         docs: {
             source: {
@@ -34,12 +34,18 @@ const meta = {
     },
 };
 export default meta;
-const SearchStory = (args) => {
+const SearchInputStory = (args) => {
     const [query, setQuery] = useState(args.initialValue ?? '');
-    return (_jsx(View, { className: 'flex min-h-400 items-center justify-center p-24', children: _jsx(View, { className: 'w-full max-w-320', children: _jsx(Search, { ...args, value: query, onChangeText: setQuery, onClear: args.onClear }) }) }));
+    return (_jsx(View, { style: {
+            flex: 1,
+            minHeight: 96,
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 24,
+        }, children: _jsx(View, { style: { width: '100%', maxWidth: 400 }, children: _jsx(SearchInput, { ...args, value: query, onChangeText: setQuery, onClear: args.onClear }) }) }));
 };
 export const Base = {
-    render: (args) => _jsx(SearchStory, { ...args }),
+    render: (args) => _jsx(SearchInputStory, { ...args }),
     args: {
         placeholder: 'Search products',
         editable: true,
@@ -47,7 +53,7 @@ export const Base = {
     },
 };
 export const WithContent = {
-    render: (args) => _jsx(SearchStory, { ...args, initialValue: 'Search text' }),
+    render: (args) => _jsx(SearchInputStory, { ...args, initialValue: 'Search text' }),
     args: {
         placeholder: 'Search products',
         editable: true,
@@ -55,7 +61,7 @@ export const WithContent = {
     },
 };
 export const WithError = {
-    render: (args) => _jsx(SearchStory, { ...args, initialValue: 'Invalid search' }),
+    render: (args) => (_jsx(SearchInputStory, { ...args, initialValue: 'Invalid search' })),
     args: {
         placeholder: 'Search products',
         errorMessage: 'Search term is invalid',
@@ -63,8 +69,8 @@ export const WithError = {
         hideClearButton: false,
     },
 };
-export const DisabledSearch = {
-    render: (args) => _jsx(SearchStory, { ...args, initialValue: 'Disabled search' }),
+export const DisabledSearchInput = {
+    render: (args) => (_jsx(SearchInputStory, { ...args, initialValue: 'Disabled search' })),
     args: {
         placeholder: 'Search products',
         editable: false,
@@ -72,7 +78,7 @@ export const DisabledSearch = {
     },
 };
 export const WithHiddenClearButton = {
-    render: (args) => _jsx(SearchStory, { ...args, initialValue: 'Search text' }),
+    render: (args) => _jsx(SearchInputStory, { ...args, initialValue: 'Search text' }),
     args: {
         placeholder: 'Search products',
         editable: true,
@@ -80,7 +86,7 @@ export const WithHiddenClearButton = {
     },
 };
 export const WithClearCallback = {
-    render: (args) => (_jsx(SearchStory, { ...args, initialValue: 'Click clear to see callback', onClear: () => alert('Search cleared!') })),
+    render: (args) => (_jsx(SearchInputStory, { ...args, initialValue: 'Click clear to see callback', onClear: () => alert('Search cleared!') })),
     args: {
         placeholder: 'Search products',
         editable: true,

package/dist/src/lib/Components/SearchInput/index.d.ts

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

package/dist/src/lib/Components/SearchInput/index.d.ts.map

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

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

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

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

@@ -0,0 +1,4 @@
+import { BaseInputProps } from '../BaseInput';
+import { BoxProps } from '../Utility';
+export type SearchInputProps = Omit<BaseInputProps, 'prefix' | 'label'> & BoxProps;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SearchInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,OAAO,CAAC,GACrE,QAAQ,CAAC"}

package/dist/src/lib/Components/Select/GlobalSelectBottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalSelectBottomSheet.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Select/GlobalSelectBottomSheet.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAWtD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAkH3C,CAAC"}
+{"version":3,"file":"GlobalSelectBottomSheet.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Select/GlobalSelectBottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAC;AA0DtD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAyG3C,CAAC"}

package/dist/src/lib/Components/Select/GlobalSelectBottomSheet.js

@@ -1,10 +1,52 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { cn } from '@ledgerhq/lumen-utils-shared';
 import { useCallback, useEffect } from 'react';
-import { View, Text, Pressable } from 'react-native';
+import { Pressable } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import { Check } from '../../Symbols';
 import { BottomSheet, BottomSheetHeader, BottomSheetView, useBottomSheetRef, } from '../BottomSheet';
+import { Box, Text } from '../Utility';
 import { useGlobalSelectSafeContext } from './GlobalSelectContext';
+const useStyles = () => {
+    return useStyleSheet((t) => ({
+        bottomSheetView: {
+            paddingHorizontal: t.spacings.s8,
+        },
+        separator: {
+            marginVertical: t.spacings.s4,
+            marginHorizontal: t.spacings.s8,
+            height: 1,
+            backgroundColor: t.colors.bg.muted,
+        },
+        groupLabel: {
+            marginBottom: t.spacings.s4,
+            paddingHorizontal: t.spacings.s8,
+            paddingTop: t.spacings.s8,
+            color: t.colors.text.muted,
+            ...t.typographies.body3SemiBold,
+        },
+        item: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            borderRadius: t.borderRadius.sm,
+            padding: t.spacings.s8,
+            backgroundColor: t.colors.bg.baseTransparent,
+        },
+        itemPressed: {
+            backgroundColor: t.colors.bg.baseTransparentPressed,
+        },
+        itemDisabled: {
+            opacity: 0.5,
+        },
+        itemLabel: {
+            flex: 1,
+            color: t.colors.text.base,
+            ...t.typographies.body2,
+        },
+        itemLabelDisabled: {
+            color: t.colors.text.disabled,
+        },
+    }), []);
+};
 /**
  * BottomSheet component that displays select options.
  * This should be placed at the root level inside GestureHandlerRootView.
@@ -25,6 +67,7 @@ import { useGlobalSelectSafeContext } from './GlobalSelectContext';
  */
 export const GlobalSelectBottomSheet = () => {
     const bottomSheetRef = useBottomSheetRef();
+    const styles = useStyles();
     /**
      * This is the only component that subscribes to currentSelect
      * All other components use refs to avoid re-renders
@@ -52,14 +95,21 @@ export const GlobalSelectBottomSheet = () => {
             hideSelectRef.current();
         }
     }, [currentSelect, hideSelectRef]);
-    return (_jsx(BottomSheet, { ref: bottomSheetRef, snapPoints: null, backdropPressBehavior: 'close', onClose: handleClose, maxDynamicContentSize: 'fullWithOffset', enableDynamicSizing: true, enablePanDownToClose: true, children: _jsx(BottomSheetView, { className: '!px-8', children: currentSelect && (_jsxs(_Fragment, { children: [currentSelect.label && (_jsx(BottomSheetHeader, { title: currentSelect.label, appearance: 'compact' })), _jsx(View, { className: 'gap-4', children: currentSelect.items.map((item, index) => {
+    return (_jsx(BottomSheet, { ref: bottomSheetRef, snapPoints: null, backdropPressBehavior: 'close', onClose: handleClose, maxDynamicContentSize: 'fullWithOffset', enableDynamicSizing: true, enablePanDownToClose: true, children: _jsx(BottomSheetView, { style: styles.bottomSheetView, children: currentSelect && (_jsxs(_Fragment, { children: [currentSelect.label && (_jsx(BottomSheetHeader, { title: currentSelect.label, appearance: 'compact' })), _jsx(Box, { lx: { gap: 's4' }, children: currentSelect.items.map((item, index) => {
                             if (item.type === 'separator') {
-                                return (_jsx(View, { className: cn('my-4 mx-8 h-1 bg-muted') }, `separator-${index}`));
+                                return (_jsx(Box, { style: styles.separator }, `separator-${index}`));
                             }
                             if (item.type === 'group-label') {
-                                return (_jsx(Text, { className: cn('mb-4 px-8 pt-8 pb-0 text-muted body-3-semi-bold'), children: item.label }, `label-${index}`));
+                                return (_jsx(Text, { style: styles.groupLabel, children: item.label }, `label-${index}`));
                             }
                             const isSelected = currentSelect.selectedValue === item.value;
-                            return (_jsx(Pressable, { disabled: item.disabled, onPress: () => handleSelectItem(item.value), children: ({ pressed }) => (_jsxs(View, { className: cn('flex-row items-center rounded-sm p-8 bg-base-transparent', pressed && 'bg-base-transparent-pressed', item.disabled && 'opacity-50'), children: [_jsx(Text, { className: cn('flex-1 text-base body-2', item.disabled && 'text-disabled'), numberOfLines: 1, children: item.label }), isSelected && (_jsx(Check, { size: 24, className: 'text-active' }))] })) }, item.value));
+                            return (_jsx(Pressable, { disabled: item.disabled, onPress: () => handleSelectItem(item.value), children: ({ pressed }) => (_jsxs(Box, { style: [
+                                        styles.item,
+                                        pressed && styles.itemPressed,
+                                        item.disabled && styles.itemDisabled,
+                                    ], children: [_jsx(Text, { style: [
+                                                styles.itemLabel,
+                                                item.disabled && styles.itemLabelDisabled,
+                                            ], numberOfLines: 1, children: item.label }), isSelected && _jsx(Check, { size: 24, color: 'active' })] })) }, item.value));
                         }) })] })) }) }));
 };

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

@@ -35,9 +35,7 @@ export declare const SelectTrigger: React.FC<SelectTriggerProps>;
 /**
  * Displays the current selected value
  */
-export declare const SelectValue: React.FC<{
-    className?: string;
-}>;
+export declare const SelectValue: React.FC;
 /**
  * Container for select items. This component collects all items
  * and makes them available to the bottom sheet.

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAOvE,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAMjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA8DxC,CAAC;AAGF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAyFtD,CAAC;AAGF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAsBA,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkDtD,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAUlD,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgBlD,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAIhD,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAUxD,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAU1D,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AASvE,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAEjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA8DxC,CAAC;AAGF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2EtD,CAAC;AAmFF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAgC/B,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkDtD,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqBlD,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2BlD,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAIhD,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAuBxD,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkB1D,CAAC"}