fix: add ItemLayout for native, closes leather-io/issues#263

packages/ui/src/components/box/hstack.native.tsx

@@ -0,0 +1,11 @@
+import { createBox } from '@shopify/restyle';
+
+import { type Theme } from '../../theme-native';
+
+export const HStack = createBox<Theme>();
+
+HStack.defaultProps = {
+  flex: 1,
+  flexDirection: 'row',
+  alignItems: 'center',
+};

packages/ui/src/components/box/stack.native.tsx

@@ -0,0 +1,11 @@
+import { createBox } from '@shopify/restyle';
+
+import { type Theme } from '../../theme-native';
+
+export const Stack = createBox<Theme>();
+
+Stack.defaultProps = {
+  flex: 1,
+  flexDirection: 'column',
+  alignItems: 'center',
+};

packages/ui/src/components/item-layout/item-layout.native.stories.tsx

@@ -0,0 +1,35 @@
+import { View } from 'react-native';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Box } from '../box/box.native';
+import { ItemLayout } from './item-layout.native';
+
+const meta: Meta<typeof ItemLayout> = {
+  title: 'Layout/ItemLayout',
+  component: ItemLayout,
+  tags: ['autodocs'],
+  argTypes: {},
+  parameters: {},
+  decorators: [
+    Story => (
+      <View style={{ height: 40 }}>
+        <Story />
+      </View>
+    ),
+  ],
+};
+
+export default meta;
+
+export const ItemLayoutStory = {
+  args: {
+    captionLeft: 'Hello',
+    captionRight: 'World',
+    flagImg: <Box style={{ flex: 1, backgroundColor: 'green' }} />,
+    showChevron: true,
+    titleRight: 'Goodbye',
+    titleLeft: 'World',
+  },
+  argTypes: {},
+} satisfies StoryObj<typeof ItemLayout>;

packages/ui/src/components/item-layout/item-layout.native.tsx

@@ -0,0 +1,70 @@
+import { ReactNode, isValidElement } from 'react';
+
+import { Flag } from '../../components/flag/flag.native';
+import { Text } from '../../components/text/text.native';
+import { ChevronUpIcon } from '../../icons/chevron-up-icon.native';
+import { Box } from '../box/box.native';
+import { HStack } from '../box/hstack.native';
+import { Stack } from '../box/stack.native';
+
+export interface ItemLayoutProps {
+  captionLeft: ReactNode;
+  captionRight?: ReactNode;
+  flagImg: ReactNode;
+  isDisabled?: boolean;
+  isSelected?: boolean;
+  showChevron?: boolean;
+  titleLeft: ReactNode;
+  titleRight: ReactNode;
+}
+
+export function ItemLayout({
+  captionLeft,
+  captionRight,
+  flagImg,
+  showChevron,
+  titleLeft,
+  titleRight,
+}: ItemLayoutProps) {
+  return (
+    <Flag img={flagImg} spacing="3">
+      <Box flex={1} alignItems="center" justifyContent="space-between">
+        <Stack
+          alignItems="flex-start"
+          justifyContent="space-between"
+          flexGrow={2}
+          overflow="hidden"
+        >
+          <HStack>{isValidElement(titleLeft) ? titleLeft : <Text>{titleLeft}</Text>}</HStack>
+          {isValidElement(captionLeft) ? (
+            captionLeft
+          ) : (
+            <Text variant="caption01" color="ink.text-subdued">
+              {captionLeft}
+            </Text>
+          )}
+        </Stack>
+
+        <HStack gap="3">
+          <Stack alignItems="flex-end" gap="2" height={42}>
+            {isValidElement(titleRight) ? titleRight : <Text variant="label02">{titleRight}</Text>}
+            {isValidElement(captionRight) ? (
+              captionRight
+            ) : (
+              <Text variant="caption01" color="ink.text-subdued">
+                {captionRight}
+              </Text>
+            )}
+          </Stack>
+          {showChevron && (
+            <ChevronUpIcon
+              color="ink.action-primary-default"
+              transform="rotate(90deg)"
+              variant="small"
+            />
+          )}
+        </HStack>
+      </Box>
+    </Flag>
+  );
+}