@ledgerhq/lumen-ui-rnative 0.0.46 → 0.0.48

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

@@ -1,122 +1,273 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createSafeContext, isTextChildren, } from '@ledgerhq/lumen-utils-shared';
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { useStyleSheet } from '../../../styles';
-import { Pressable } from '../Utility';
-const useStyles = ({ disabled, pressed, }) => {
-    return useStyleSheet((t) => {
-        return {
-            container: StyleSheet.flatten([
-                {
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    height: t.sizes.s64,
-                    width: t.sizes.full,
-                    gap: t.spacings.s16,
-                    borderRadius: t.borderRadius.md,
-                    backgroundColor: 'transparent',
-                    paddingHorizontal: t.spacings.s8,
-                    paddingVertical: t.spacings.s12,
-                },
-                pressed && {
-                    backgroundColor: t.colors.bg.baseTransparentPressed,
-                },
-                disabled && {
-                    backgroundColor: 'transparent',
-                },
-            ]),
-            contentWrapper: {
-                flex: 1,
-                minWidth: 0,
+import { StyleSheet, View } from 'react-native';
+import { useStyleSheet, useTheme } from '../../../styles';
+import { Spot } from '../Spot';
+import { Box, Pressable, Text } from '../Utility';
+const [ListItemProvider, useListItemContext] = createSafeContext('ListItem', {});
+const [ListItemTrailingProvider, useListItemTrailingContext] = createSafeContext('ListItemTrailing', {
+    isInTrailing: false,
+});
+const useRootStyles = ({ pressed }) => {
+    return useStyleSheet((t) => ({
+        container: StyleSheet.flatten([
+            {
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: t.spacings.s12,
+                height: t.sizes.s64,
+                width: t.sizes.full,
+                gap: t.spacings.s16,
+                borderRadius: t.borderRadius.md,
+                backgroundColor: 'transparent',
+                paddingHorizontal: t.spacings.s8,
+                paddingVertical: t.spacings.s12,
             },
-            textWrapper: {
-                flex: 1,
-                minWidth: 0,
-                flexDirection: 'column',
+            pressed && {
+                backgroundColor: t.colors.bg.baseTransparentPressed,
+            },
+        ]),
+    }), [pressed]);
+};
+/**
+ * A flexible list item component that provides a composable structure for displaying
+ * interactive list items with leading content, title, description, and trailing content.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/react-native_containment-listitem--docs Storybook}
+ * @see {@link https://ldls.vercel.app/?path=/docs/react-native_containment-listitem--docs#dos-and-donts Guidelines}
+ *
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
+ * Do not use it to modify the list item's core appearance (colors, padding, etc).
+ *
+ * @example
+ * import {
+ *   ListItem,
+ *   ListItemLeading,
+ *   ListItemSpot,
+ *   ListItemContent,
+ *   ListItemTitle,
+ *   ListItemDescription,
+ *   ListItemTrailing,
+ * } from '@ledgerhq/lumen-ui-rnative';
+ * import { Wallet, ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <ListItem onPress={() => console.log('Clicked!')}>
+ *   <ListItemLeading>
+ *     <ListItemSpot appearance="icon" icon={Wallet} />
+ *     <ListItemContent>
+ *       <ListItemTitle>Balance</ListItemTitle>
+ *       <ListItemDescription>Optional description</ListItemDescription>
+ *     </ListItemContent>
+ *   </ListItemLeading>
+ *   <ListItemTrailing>
+ *     <ChevronRight size={24} />
+ *   </ListItemTrailing>
+ * </ListItem>
+ */
+export const ListItem = React.forwardRef(({ children, lx = {}, style, disabled = false, ...pressableProps }, ref) => {
+    return (_jsx(ListItemProvider, { value: { disabled }, children: _jsx(Pressable, { ref: ref, lx: lx, style: style, disabled: disabled, accessibilityRole: 'button', accessibilityState: { disabled }, ...pressableProps, children: ({ pressed }) => (_jsx(ListItemInner, { pressed: pressed, children: children })) }) }));
+});
+ListItem.displayName = 'ListItem';
+/**
+ * Internal component to handle pressed state styling
+ */
+const ListItemInner = ({ pressed, children, }) => {
+    const styles = useRootStyles({ pressed });
+    return (_jsx(View, { style: styles.container, testID: 'list-item-content', children: children }));
+};
+/**
+ * Container for the leading (left) part of the list item.
+ * Contains the visual element (ListItemSpot, Avatar, Icon) and the content (title + description).
+ */
+export const ListItemLeading = React.forwardRef(({ children, lx = {}, style, ...viewProps }, ref) => {
+    const styles = useStyleSheet((t) => ({
+        leading: {
+            flex: 1,
+            minWidth: 0,
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: t.spacings.s12,
+        },
+    }), []);
+    return (_jsx(Box, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.leading, style]), ...viewProps, children: children }));
+});
+ListItemLeading.displayName = 'ListItemLeading';
+/**
+ * Container for the text content (title and description) within the leading area.
+ */
+export const ListItemContent = React.forwardRef(({ children, lx = {}, style, ...viewProps }, ref) => {
+    const { isInTrailing } = useListItemTrailingContext({
+        consumerName: 'ListItemContent',
+        contextRequired: false,
+    });
+    const styles = useStyleSheet((t) => ({
+        content: {
+            flex: isInTrailing ? 0 : 1,
+            minWidth: 0,
+            flexDirection: 'column',
+            gap: t.spacings.s4,
+        },
+    }), [isInTrailing]);
+    return (_jsx(Box, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.content, style]), ...viewProps, children: children }));
+});
+ListItemContent.displayName = 'ListItemContent';
+/**
+ * The main title of the list item. Can contain text directly or
+ * ListItemTruncate + Tag for more complex layouts.
+ */
+export const ListItemTitle = React.forwardRef(({ children, lx = {}, style, ...viewProps }, ref) => {
+    const { disabled } = useListItemContext({
+        consumerName: 'ListItemTitle',
+        contextRequired: true,
+    });
+    const { isInTrailing } = useListItemTrailingContext({
+        consumerName: 'ListItemTitle',
+        contextRequired: false,
+    });
+    const styles = useStyleSheet((t) => {
+        const { boxStyle } = StyleSheet.create({
+            boxStyle: {
+                flexDirection: 'row',
+                alignItems: 'center',
                 gap: t.spacings.s4,
+                width: '100%',
+                textAlign: isInTrailing ? 'right' : 'left',
+                justifyContent: isInTrailing ? 'flex-end' : 'flex-start',
             },
-            title: StyleSheet.flatten([
+        });
+        return {
+            asBox: boxStyle,
+            asText: StyleSheet.flatten([
                 t.typographies.body2SemiBold,
                 {
+                    ...boxStyle,
                     color: disabled ? t.colors.text.disabled : t.colors.text.base,
                 },
             ]),
-            descriptionRow: {
+        };
+    }, [disabled]);
+    // If children is a string, render it directly as Text with truncation
+    if (isTextChildren(children)) {
+        return (_jsx(Text, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.asText, style]), numberOfLines: 1, ellipsizeMode: 'tail', children: children }));
+    }
+    // Otherwise, render as a row container for ListItemTruncate + Tag
+    return (_jsx(Box, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.asBox, style]), ...viewProps, children: children }));
+});
+ListItemTitle.displayName = 'ListItemTitle';
+/**
+ * Optional description below the title. Can contain text directly or
+ * ListItemTruncate + Tag for more complex layouts.
+ * Automatically applies disabled styling when the parent ListItem is disabled.
+ */
+export const ListItemDescription = React.forwardRef(({ children, lx = {}, style, ...viewProps }, ref) => {
+    const { disabled } = useListItemContext({
+        consumerName: 'ListItemDescription',
+        contextRequired: true,
+    });
+    const { isInTrailing } = useListItemTrailingContext({
+        consumerName: 'ListItemDescription',
+        contextRequired: false,
+    });
+    const styles = useStyleSheet((t) => {
+        const { boxStyle } = StyleSheet.create({
+            boxStyle: {
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: t.spacings.s4,
+                width: '100%',
+                textAlign: isInTrailing ? 'right' : 'left',
+                justifyContent: isInTrailing ? 'flex-end' : 'flex-start',
             },
-            descriptionTextWrapper: {
-                minWidth: 0,
-                flexShrink: 1,
-            },
-            description: StyleSheet.flatten([
+        });
+        return {
+            asBox: boxStyle,
+            asText: StyleSheet.flatten([
                 t.typographies.body3,
                 {
+                    ...boxStyle,
                     color: disabled ? t.colors.text.disabled : t.colors.text.muted,
-                    minWidth: 0,
-                    flexShrink: 1,
                 },
             ]),
-            descriptionTagWrapper: {
-                height: t.sizes.s16,
-                flexShrink: 0,
-                flexDirection: 'row',
-                alignItems: 'center',
-            },
-            trailingWrapper: {
-                flexShrink: 0,
-            },
         };
-    }, [disabled, pressed]);
-};
+    }, [disabled, isInTrailing]);
+    // If children is a string, render it directly as Text with truncation
+    if (isTextChildren(children)) {
+        return (_jsx(Text, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.asText, style]), numberOfLines: 1, ellipsizeMode: 'tail', children: children }));
+    }
+    // Otherwise, render as a row container for ListItemTruncate + Tag
+    return (_jsx(Box, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.asBox, style]), ...viewProps, children: children }));
+});
+ListItemDescription.displayName = 'ListItemDescription';
 /**
- * A flexible list item component that displays a required title and optional description (with possible tag), leading and trailing content.
- * It functions as a clickable button with hover and active states.
- *
- * @see {@link https://ldls.vercel.app/?path=/docs/react-native_containment-listitem--docs Storybook}
- * @see {@link https://ldls.vercel.app/?path=/docs/react-native_containment-listitem--docs#dos-and-donts Guidelines}
- *
- * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
- * Do not use it to modify the list item's core appearance (colors, padding, etc).
- *
- * @example
- * // Basic item
- * import { ListItem } from '@ledgerhq/lumen-ui-rnative';
- *
- * <ListItem
- *   title="Basic Item"
- *   description="Optional description"
- *   onPress={() => console.log('Clicked!')}
- * />
- *
- * // Icon trailing content with leading Spot
- * import { ListItem, Spot } from '@ledgerhq/lumen-ui-rnative';
- * import { Wallet, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
- *
- * <ListItem
- *   title="Balance"
- *   leadingContent={<Spot appearance="icon" icon={Wallet} />}
- *   trailingContent={<Settings />}
- * />
- *
- * // Chevron trailing content
- * import { ListItem } from '@ledgerhq/lumen-ui-rnative';
- * import { ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols';
- *
- * <ListItem
- *   title="Settings"
- *   trailingContent={<ChevronRight size={24} />}
- * />
+ * Container for the trailing (right) content of the list item.
+ * Used for icons, switches, values, tags, chevrons, etc.
  */
-export const ListItem = React.forwardRef(({ title, description, leadingContent, descriptionTag, trailingContent, lx = {}, style, disabled = false, ...touchableProps }, ref) => {
-    return (_jsx(Pressable, { ref: ref, lx: lx, style: style, disabled: disabled, accessibilityRole: 'button', accessibilityState: { disabled }, ...touchableProps, children: ({ pressed }) => (_jsx(ListItemContent, { disabled: disabled, pressed: pressed, title: title, description: description, leadingContent: leadingContent, descriptionTag: descriptionTag, trailingContent: trailingContent })) }));
+export const ListItemTrailing = React.forwardRef(({ children, lx = {}, style, ...viewProps }, ref) => {
+    const styles = useStyleSheet(() => ({
+        trailing: {
+            flexShrink: 0,
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+    }), []);
+    return (_jsx(ListItemTrailingProvider, { value: { isInTrailing: true }, children: _jsx(Box, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.trailing, style]), ...viewProps, children: children }) }));
 });
-const ListItemContent = ({ disabled, pressed, title, description, leadingContent, descriptionTag, trailingContent, }) => {
-    const styles = useStyles({ disabled, pressed });
-    return (_jsxs(View, { style: styles.container, testID: 'list-item-content', children: [_jsxs(View, { style: styles.contentWrapper, children: [leadingContent, _jsxs(View, { style: styles.textWrapper, children: [_jsx(Text, { style: styles.title, numberOfLines: 1, ellipsizeMode: 'tail', children: title }), description && (_jsxs(View, { style: styles.descriptionRow, children: [_jsx(View, { style: styles.descriptionTextWrapper, children: _jsx(Text, { numberOfLines: 1, ellipsizeMode: 'tail', style: styles.description, children: description }) }), descriptionTag && (_jsx(View, { style: styles.descriptionTagWrapper, children: descriptionTag }))] }))] })] }), trailingContent && (_jsx(View, { style: styles.trailingWrapper, children: trailingContent }))] }));
+ListItemTrailing.displayName = 'ListItemTrailing';
+/**
+ * Spot adapter for ListItem. Automatically inherits disabled state from parent ListItem.
+ * Fixed at size 48 for consistent list item appearance.
+ */
+export const ListItemSpot = (props) => {
+    const { disabled } = useListItemContext({
+        consumerName: 'ListItemSpot',
+        contextRequired: true,
+    });
+    return _jsx(Spot, { ...props, size: 48, disabled: disabled });
 };
-ListItem.displayName = 'ListItem';
+ListItemSpot.displayName = 'ListItemSpot';
+/**
+ * Icon adapter for ListItem. Automatically inherits disabled state from parent ListItem.
+ * Fixed at size 24 for consistent list item appearance.
+ */
+export const ListItemIcon = ({ icon: Icon, color, lx = {}, style, ...viewProps }) => {
+    const { theme } = useTheme();
+    const { disabled } = useListItemContext({
+        consumerName: 'ListItemIcon',
+        contextRequired: true,
+    });
+    return (_jsx(Box, { lx: lx, style: StyleSheet.flatten([{ flexShrink: 0 }, style]), ...viewProps, children: _jsx(Icon, { size: 24, style: {
+                color: disabled
+                    ? theme.colors.text.disabled
+                    : (color ?? theme.colors.text.base),
+            } }) }));
+};
+ListItemIcon.displayName = 'ListItemIcon';
+/**
+ * Text wrapper that truncates when space is limited.
+ * Use inside ListItemTitle or ListItemDescription when combining text with a Tag.
+ * Set variant='title' for title styling or variant='description' (default) for description styling.
+ */
+export const ListItemTruncate = React.forwardRef(({ children, variant = 'description', lx = {}, style, ...textProps }, ref) => {
+    const { disabled } = useListItemContext({
+        consumerName: 'ListItemTruncate',
+        contextRequired: true,
+    });
+    const styles = useStyleSheet((t) => ({
+        truncate: StyleSheet.flatten([
+            variant === 'title'
+                ? t.typographies.body2SemiBold
+                : t.typographies.body3,
+            {
+                color: disabled
+                    ? t.colors.text.disabled
+                    : variant === 'title'
+                        ? t.colors.text.base
+                        : t.colors.text.muted,
+                minWidth: 0,
+                flexShrink: 1,
+            },
+        ]),
+    }), [disabled, variant]);
+    return (_jsx(Text, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.truncate, style]), numberOfLines: 1, ellipsizeMode: 'tail', ...textProps, children: children }));
+});
+ListItemTruncate.displayName = 'ListItemTruncate';

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

@@ -4,8 +4,7 @@ declare const meta: Meta<typeof ListItem>;
 export default meta;
 type Story = StoryObj<typeof ListItem>;
 export declare const Base: Story;
-export declare const WithDescriptionTag: Story;
-export declare const TrailingContentVariantsShowcase: Story;
-export declare const StateShowcase: Story;
+export declare const VariantsShowcase: Story;
+export declare const DisabledState: Story;
 export declare const ResponsiveLayout: Story;
 //# sourceMappingURL=ListItem.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/ListItem/ListItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAevE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAkBtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAwD/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,IAAI,EAAE,KAoBlB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAchC,CAAC;AAEF,eAAO,MAAM,+BAA+B,EAAE,KAoC7C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAqE3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAwC9B,CAAC"}
+{"version":3,"file":"ListItem.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/ListItem/ListItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAMvE,OAAO,EACL,QAAQ,EAST,MAAM,YAAY,CAAC;AAEpB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAkC/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,IAAI,EAAE,KAgClB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAqK9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA+E3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAuE9B,CAAC"}

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

@@ -1,16 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Settings, Plus, User, PenEdit, Cart, Apps, Chart1, Bolt, ChevronRight, } from '../../Symbols';
-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 { Box, Text } from '../Utility';
-import { ListItem } from './ListItem';
-const Balance = ({ disabled }) => {
-    return (_jsxs(Box, { lx: { alignItems: 'flex-end' }, children: [_jsx(Text, { typography: 'body2SemiBold', lx: { color: disabled ? 'disabled' : 'base' }, children: "42.00" }), _jsx(Text, { typography: 'body3', lx: { color: disabled ? 'disabled' : 'muted' }, 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',
@@ -20,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',
@@ -67,50 +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',
         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(Box, { lx: { maxWidth: 's320' }, children: _jsx(ListItem, { ...args }) })),
-};
-export const TrailingContentVariantsShowcase = {
+export const VariantsShowcase = {
     render: () => {
-        return (_jsxs(Box, { lx: { flexDirection: 'column', maxWidth: 's256' }, 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(Box, { lx: { flexDirection: 'row', gap: 's32' }, children: [_jsxs(Box, { lx: { flexDirection: 'column', maxWidth: 's256' }, children: [_jsx(ListItem, { title: 'Caret Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: User }), trailingContent: _jsx(ChevronRight, { size: 24, lx: { color: '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(Box, { lx: { flexDirection: 'column', maxWidth: 's256' }, 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, lx: { color: 'disabled' } }) }), _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', disabled: true }) }), _jsx(ListItem, { title: 'Icon Variant', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings, disabled: true }), disabled: true, trailingContent: _jsx(PenEdit, { size: 24, lx: { color: '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: () => {
-        return (_jsxs(Box, { lx: {
-                width: 's320',
-                backgroundColor: 'mutedPressed',
-                padding: 's16',
-            }, children: [_jsx(Text, { typography: 'body4SemiBold', lx: { marginBottom: 's16', color: 'muted' }, children: "Container: 320px wide" }), _jsxs(Box, { lx: { flexDirection: 'column', gap: 's0' }, children: [_jsx(ListItem, { title: 'Short Title', description: 'Short description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Plus }), trailingContent: _jsx(ChevronRight, { size: 24, lx: { color: '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, lx: { color: '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, lx: { color: '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';