@onlynative/components 0.0.0-alpha.0

package/llms.txt

@@ -0,0 +1,458 @@
+# @onlynative/components — MD3 UI Components for React Native
+
+> Version: 0.1.1-alpha.3
+> Peer deps: @onlynative/core >=0.1.1-alpha.3, react >=18, react-native >=0.72, react-native-safe-area-context >=4
+> Optional: @expo/vector-icons >=14 (only needed for icon props)
+
+## Usage
+
+Import via subpath (preferred): `import { X } from '@onlynative/components/x'`
+Import via root: `import { X } from '@onlynative/components'`
+
+### Component override pattern
+
+All interactive components follow a 3-tier override system. Merge order: theme defaults → variant → semantic props → style props (last wins).
+
+Standard override props on interactive components:
+- `containerColor?: string` — Root container background. Hover/press state-layer colors auto-derived.
+- `contentColor?: string` — Content (label + icons) color. State-layer colors auto-derived.
+- `labelStyle?: StyleProp<TextStyle>` — Text-specific overrides (does not affect icons).
+- `style` — Root container style.
+
+Disabled state always uses standard MD3 disabled treatment (38% onSurface) regardless of overrides.
+
+---
+
+### Typography
+
+```tsx
+import { Typography } from '@onlynative/components/typography'
+
+<Typography variant="headlineMedium" color="#333">Hello</Typography>
+```
+
+Props:
+- `children: ReactNode` — Content to display. Accepts strings, numbers, or nested elements.
+- `variant?: 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'labelLarge' | 'labelMedium' | 'labelSmall'` — Default: `'bodyMedium'`. MD3 type scale role. Controls font size, weight, line height, and letter spacing.
+- `color?: string` — Override the text color. Takes priority over `style.color`. Defaults to the theme's `onSurface` color.
+- `style?: StyleProp<TextStyle>` — Additional text styles. Can override the default theme color via `style.color` when no `color` prop is set.
+- `as?: ComponentType<TextProps>` — Default: `Text`. Override the underlying text component (e.g. Animated.Text).
+- Inherits `TextProps` (except `children`, `style`)
+
+---
+
+### Button
+
+```tsx
+import { Button } from '@onlynative/components/button'
+
+<Button variant="filled" leadingIcon="plus" onPress={handlePress}>Create</Button>
+<Button variant="outlined">Cancel</Button>
+<Button variant="tonal" containerColor="#E8DEF8" contentColor="#1D192B">Custom</Button>
+```
+
+Props:
+- `children: string` — Text label rendered inside the button.
+- `variant?: 'filled' | 'elevated' | 'outlined' | 'text' | 'tonal'` — Default: `'filled'`. Visual variant. Controls background, border, and text color.
+- `leadingIcon?: string` — Name of a MaterialCommunityIcons icon to show before the label.
+- `trailingIcon?: string` — Name of a MaterialCommunityIcons icon to show after the label.
+- `iconSize?: number` — Default: `18`. Size of leading and trailing icons in dp.
+- `containerColor?: string` — Override the container (background) color. State-layer colors (hover, press) are derived automatically.
+- `contentColor?: string` — Override the content (label and icon) color. State-layer colors are derived automatically when no containerColor is set.
+- `labelStyle?: StyleProp<TextStyle>` — Additional style applied to the label text.
+- Inherits `PressableProps` (except `children`)
+
+---
+
+### IconButton
+
+```tsx
+import { IconButton } from '@onlynative/components/icon-button'
+
+<IconButton icon="heart" variant="filled" accessibilityLabel="Like" onPress={handleLike} />
+<IconButton icon="heart-outline" selectedIcon="heart" selected={liked} variant="tonal" accessibilityLabel="Like" onPress={toggle} />
+```
+
+Props:
+- `icon: string` — MaterialCommunityIcons icon name to display.
+- `selectedIcon?: string` — Icon to display when `selected` is `true` (toggle mode).
+- `iconColor?: string` — Overrides the automatic icon color derived from the variant and state.
+- `contentColor?: string` — Override the content (icon) color. Takes precedence over `iconColor` when both are provided.
+- `containerColor?: string` — Override the container (background) color. State-layer colors (hover, press) are derived automatically.
+- `style?: PressableProps['style']` — Custom style applied to the root container.
+- `onPress?: () => void` — Called when the button is pressed.
+- `disabled?: boolean` — Default: `false`. Disables the button.
+- `variant?: 'filled' | 'tonal' | 'outlined' | 'standard'` — Default: `'filled'`. Visual style variant.
+- `selected?: boolean` — Enables toggle mode. The button changes appearance based on selected/unselected state.
+- `size?: 'small' | 'medium' | 'large'` — Default: `'medium'`. Physical size of the touch target and icon container.
+- `accessibilityLabel: string` — Required — icon-only buttons must have a label for screen readers.
+
+---
+
+### AppBar
+
+```tsx
+import { AppBar } from '@onlynative/components/appbar'
+
+<AppBar title="Home" variant="small" />
+<AppBar title="Details" canGoBack onBackPress={router.back} insetTop />
+<AppBar title="Settings" variant="center-aligned" actions={[
+  { icon: 'magnify', accessibilityLabel: 'Search', onPress: onSearch },
+  { icon: 'dots-vertical', accessibilityLabel: 'More', onPress: onMore },
+]} />
+```
+
+Props:
+- `title: string` — Title text displayed in the bar.
+- `variant?: 'small' | 'center-aligned' | 'medium' | 'large'` — Default: `'small'`. Layout variant.
+- `colorScheme?: 'surface' | 'surfaceContainerLowest' | 'surfaceContainerLow' | 'surfaceContainer' | 'surfaceContainerHigh' | 'surfaceContainerHighest' | 'primary' | 'primaryContainer'` — Default: `'surface'`. Color scheme that determines the default container and content colors. `containerColor` and `contentColor` props override these defaults.
+- `canGoBack?: boolean` — Default: `false`. When `true`, renders a back button in the leading slot.
+- `onBackPress?: () => void` — Called when the auto-rendered back button is pressed.
+- `insetTop?: boolean` — Default: `false`. When `true`, wraps the bar in a SafeAreaView that handles the top inset.
+- `elevated?: boolean` — Default: `false`. When `true`, adds shadow/elevation to indicate the bar is scrolled.
+- `leading?: ReactNode` — Custom leading content. When provided, overrides `canGoBack`.
+- `trailing?: ReactNode` — Custom trailing content. When provided, overrides `actions`.
+- `actions?: AppBarAction[]` — Array of icon-button actions rendered in the trailing slot.
+- `containerColor?: string` — Override the container (background) color. Applied to both normal and elevated states.
+- `contentColor?: string` — Override the content (title and icon) color.
+- `titleStyle?: StyleProp<TextStyle>` — Additional style applied to the title text.
+- `style?: StyleProp<ViewStyle>` — Custom style applied to the root container.
+
+AppBarAction:
+- `icon: string` — MaterialCommunityIcons icon name to render.
+- `accessibilityLabel: string` — Accessibility label for screen readers (required).
+- `onPress?: () => void` — Called when the action icon is pressed.
+- `disabled?: boolean` — Default: `false`. Disables the action icon.
+
+---
+
+### Card
+
+```tsx
+import { Card } from '@onlynative/components/card'
+
+<Card variant="elevated">{children}</Card>
+<Card variant="outlined" onPress={handlePress}>{children}</Card>
+```
+
+Props:
+- `children: ReactNode` — Content rendered inside the card surface.
+- `variant?: 'elevated' | 'filled' | 'outlined'` — Default: `'elevated'`. Surface style variant.
+- `onPress?: () => void` — When provided, the card becomes interactive (Pressable). Omit to render as a plain View.
+- `disabled?: boolean` — Default: `false`. Disables the press interaction and reduces opacity. Only effective when `onPress` is provided.
+- `containerColor?: string` — Override the container (background) color. State-layer colors (hover, press) are derived automatically.
+- Inherits `ViewProps`
+
+---
+
+### Chip
+
+```tsx
+import { Chip } from '@onlynative/components/chip'
+
+<Chip variant="assist" leadingIcon="calendar">Today</Chip>
+<Chip variant="filter" selected={isSelected} onPress={toggle}>Active</Chip>
+<Chip variant="input" avatar={<Avatar />} onClose={handleRemove}>John</Chip>
+<Chip variant="suggestion" onPress={handleSuggest}>Try this</Chip>
+```
+
+Props:
+- `children: string` — Text label rendered inside the chip.
+- `variant?: 'assist' | 'filter' | 'input' | 'suggestion'` — Default: `'assist'`. Chip type variant. Controls appearance, allowed interactions, and icon behavior.
+- `elevated?: boolean` — Default: `false`. Whether the chip uses an elevated surface instead of an outline border. Available on `assist`, `filter`, and `suggestion` variants. Ignored on `input` variant (always outlined).
+- `selected?: boolean` — Whether the chip is in a selected (toggled-on) state. Only meaningful for the `filter` variant. Ignored by other variants.
+- `leadingIcon?: string` — Name of a MaterialCommunityIcons icon to show before the label.
+- `iconSize?: number` — Default: `18`. Size of the leading icon in dp.
+- `avatar?: ReactNode` — Custom avatar content (e.g. a small Image or View) to render before the label. Only applicable to the `input` variant. Takes precedence over `leadingIcon`.
+- `onClose?: () => void` — Callback fired when the close/remove icon is pressed. When provided, renders a trailing close icon. Only renders on `input` and `filter` (when selected) variants.
+- `containerColor?: string` — Override the container (background) color. State-layer colors (hover, press) are derived automatically.
+- `contentColor?: string` — Override the content (label and icon) color. State-layer colors are derived automatically when no containerColor is set.
+- `labelStyle?: StyleProp<TextStyle>` — Additional style applied to the label text.
+- Inherits `PressableProps` (except `children`)
+
+---
+
+### Checkbox
+
+```tsx
+import { Checkbox } from '@onlynative/components/checkbox'
+
+<Checkbox value={checked} onValueChange={setChecked} />
+```
+
+Props:
+- `value?: boolean` — Default: `false`. Whether the checkbox is checked.
+- `onValueChange?: (value: boolean) => void` — Callback fired when the checkbox is toggled. Receives the new value.
+- `containerColor?: string` — Override the container (box) color when checked. State-layer colors (hover, press) are derived automatically.
+- `contentColor?: string` — Override the checkmark icon color.
+- Inherits `PressableProps` (except `children`)
+
+---
+
+### Radio
+
+```tsx
+import { Radio } from '@onlynative/components/radio'
+
+<Radio value={selected} onValueChange={setSelected} />
+```
+
+Props:
+- `value?: boolean` — Default: `false`. Whether the radio button is selected.
+- `onValueChange?: (value: boolean) => void` — Callback fired when the radio is pressed. Receives the new value.
+- `containerColor?: string` — Override the outer ring and inner dot color when selected. State-layer colors (hover, press) are derived automatically.
+- `contentColor?: string` — Override the outer ring color when unselected.
+- Inherits `PressableProps` (except `children`)
+
+---
+
+### Switch
+
+```tsx
+import { Switch } from '@onlynative/components/switch'
+
+<Switch value={on} onValueChange={setOn} />
+<Switch value={on} onValueChange={setOn} selectedIcon="check" unselectedIcon="close" />
+```
+
+Props:
+- `value?: boolean` — Default: `false`. Whether the switch is toggled on.
+- `onValueChange?: (value: boolean) => void` — Callback fired when the switch is toggled. Receives the new value.
+- `selectedIcon?: string` — Default: `'check'`. Name of a MaterialCommunityIcons icon to show on the thumb when selected.
+- `unselectedIcon?: string` — Name of a MaterialCommunityIcons icon to show on the thumb when unselected. When provided, the thumb renders at the larger selected size.
+- `containerColor?: string` — Override the track color. State-layer colors (hover, press) are derived automatically.
+- `contentColor?: string` — Override the thumb and icon color.
+- Inherits `PressableProps` (except `children`)
+
+---
+
+### TextField
+
+```tsx
+import { TextField } from '@onlynative/components/text-field'
+
+<TextField label="Email" variant="outlined" value={email} onChangeText={setEmail} />
+<TextField label="Password" variant="filled" error errorText="Required" />
+<TextField label="Search" leadingIcon="magnify" trailingIcon="close" onTrailingIconPress={clear} />
+```
+
+Props:
+- `label?: string` — Floating label text. Animates above the input when focused or filled.
+- `variant?: 'filled' | 'outlined'` — Default: `'filled'`. Container style.
+- `supportingText?: string` — Helper text displayed below the field. Hidden when `error` or `errorText` is active.
+- `errorText?: string` — Error message. When provided, implicitly sets `error` to `true` and replaces `supportingText`.
+- `error?: boolean` — Default: `false`. When `true`, renders the field in error state with error colors.
+- `disabled?: boolean` — Default: `false`. Disables text input and reduces opacity.
+- `leadingIcon?: string` — MaterialCommunityIcons icon name rendered at the start of the field.
+- `trailingIcon?: string` — MaterialCommunityIcons icon name rendered at the end of the field.
+- `onTrailingIconPress?: () => void` — Called when the trailing icon is pressed.
+- `containerColor?: string` — Override the container (background) color. Disabled state still uses the standard disabled appearance.
+- `contentColor?: string` — Override the content (input text and icon) color. Error and disabled states take precedence.
+- `inputStyle?: StyleProp<TextStyle>` — Additional style applied to the text input element.
+- Inherits `TextInputProps` (except `placeholderTextColor`, `editable`)
+
+---
+
+### Layout Components
+
+#### Layout
+
+Full-screen safe area wrapper.
+
+```tsx
+import { Layout } from '@onlynative/components/layout'
+
+<Layout>{children}</Layout>
+<Layout immersive>{/* No safe area insets */}</Layout>
+<Layout edges={['top', 'bottom']}>{children}</Layout>
+```
+
+Props:
+- `immersive?: boolean` — Default: `false`. When `true`, removes all safe area insets for full-screen layout.
+- `edges?: Edge[]` — Explicit set of safe-area edges to apply. Overrides `immersive` when provided.
+- `style?: StyleProp<ViewStyle>` — Additional styles applied to the SafeAreaView container.
+- Inherits `PropsWithChildren`
+
+#### Box
+
+Base layout primitive with spacing shorthand props.
+
+```tsx
+import { Box } from '@onlynative/components/layout'
+
+<Box p="md" bg={theme.colors.surface}>{children}</Box>
+<Box px="lg" py="sm" gap="md">{children}</Box>
+```
+
+Props:
+- `p?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number` — Padding on all sides
+- `px?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number` — Horizontal padding (paddingStart + paddingEnd)
+- `py?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number` — Vertical padding (paddingTop + paddingBottom)
+- `pt?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number` — Padding top
+- `pb?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number` — Padding bottom
+- `ps?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number` — Padding start (left in LTR, right in RTL)
+- `pe?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number` — Padding end (right in LTR, left in RTL)
+- `m?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number` — Margin on all sides
+- `mx?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number` — Horizontal margin (marginStart + marginEnd)
+- `my?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number` — Vertical margin (marginTop + marginBottom)
+- `mt?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number` — Margin top
+- `mb?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number` — Margin bottom
+- `ms?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number` — Margin start
+- `me?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number` — Margin end
+- `gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number` — Gap between children
+- `rowGap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number` — Row gap between children
+- `columnGap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number` — Column gap between children
+- `flex?: number` — Flex value
+- `align?: FlexAlignType` — Align items along the cross axis
+- `bg?: string` — Background color
+- Inherits `ViewProps`
+
+#### Row
+
+Horizontal flex container (extends Box).
+
+```tsx
+import { Row } from '@onlynative/components/layout'
+
+<Row gap="sm" align="center">{children}</Row>
+<Row wrap>{/* Wraps to next line */}</Row>
+```
+
+Props:
+- `wrap?: boolean` — Default: `false`. Whether children should wrap to the next line when they overflow.
+- `inverted?: boolean` — Default: `false`. Reverses the layout direction (`row-reverse`).
+
+#### Column
+
+Vertical flex container (extends Box).
+
+```tsx
+import { Column } from '@onlynative/components/layout'
+
+<Column gap="md">{children}</Column>
+```
+
+Props:
+- `inverted?: boolean` — Default: `false`. Reverses the layout direction (`column-reverse`).
+
+#### Grid
+
+Equal-width column grid (extends Row).
+
+```tsx
+import { Grid } from '@onlynative/components/layout'
+
+<Grid columns={3} gap="sm">{children}</Grid>
+```
+
+Props:
+- `columns: number` — Number of equal-width columns.
+
+
+---
+
+### List
+
+```tsx
+import { List, ListItem, ListDivider } from '@onlynative/components/list'
+
+<List>
+  <ListItem headlineText="Title" supportingText="Subtitle" onPress={handlePress} />
+  <ListDivider />
+  <ListItem
+    headlineText="With Icon"
+    leadingContent={<Icon name="star" />}
+    trailingContent={<Switch value={on} onValueChange={setOn} />}
+  />
+</List>
+```
+
+#### List
+
+Container for list items.
+
+Props:
+- `children: ReactNode` — Content rendered inside the list container.
+- `style?: StyleProp<ViewStyle>`
+- Inherits `ViewProps`
+
+#### ListItem
+
+Props:
+- `headlineText: string` — Primary text displayed on the list item.
+- `supportingText?: string` — Secondary text displayed below the headline.
+- `overlineText?: string` — Text displayed above the headline (e.g. category label).
+- `trailingSupportingText?: string` — Short text displayed at the trailing edge (e.g. "100+", timestamp).
+- `leadingContent?: ReactNode` — Content rendered before the text block (icon, avatar, image, checkbox).
+- `trailingContent?: ReactNode` — Content rendered after the text block (icon, switch, checkbox).
+- `onPress?: () => void` — When provided, the item becomes interactive (Pressable). Omit to render as a plain View.
+- `disabled?: boolean` — Default: `false`. Disables the press interaction and reduces opacity. Only effective when `onPress` is provided.
+- `containerColor?: string` — Override the container (background) color. State-layer colors (hover, press) are derived automatically.
+- `supportingTextNumberOfLines?: number` — Default: `1`. Maximum number of lines for supportingText before truncating.
+- `style?: StyleProp<ViewStyle>`
+- Inherits `ViewProps`
+
+#### ListDivider
+
+Props:
+- `inset?: boolean` — Default: `false`. When true, adds a leading inset so the divider aligns with text that follows a leading icon (56dp from the start edge).
+- `style?: StyleProp<ViewStyle>`
+- Inherits `ViewProps`
+
+---
+
+### KeyboardAvoidingWrapper
+
+```tsx
+import { KeyboardAvoidingWrapper } from '@onlynative/components/keyboard-avoiding-wrapper'
+
+<KeyboardAvoidingWrapper>
+  <TextField label="Name" />
+  <TextField label="Email" />
+</KeyboardAvoidingWrapper>
+```
+
+Props:
+- `behavior?: 'padding' | 'height' | 'position'` — Default: `'padding'`. Keyboard avoidance strategy.
+- `keyboardVerticalOffset?: number` — Default: `0`. Extra offset added to the keyboard height calculation. Useful for accounting for headers or tab bars.
+- `enabled?: boolean` — Default: `true`. Enable or disable the keyboard avoiding behavior.
+- `scrollViewProps?: ScrollViewProps` — Props forwarded to the inner `ScrollView`.
+- `onKeyboardShow?: (event: KeyboardEvent) => void` — Called when the keyboard is about to show (iOS) or has shown (Android).
+- `onKeyboardHide?: (event: KeyboardEvent) => void` — Called when the keyboard is about to hide (iOS) or has hidden (Android).
+- `style?: StyleProp<ViewStyle>` — Style applied to the outer `KeyboardAvoidingView`.
+- `contentContainerStyle?: StyleProp<ViewStyle>` — Style applied to the inner `ScrollView` contentContainerStyle.
+- Inherits `PropsWithChildren`
+
+---
+
+### Avatar
+
+```tsx
+import { Avatar } from '@onlynative/components/avatar'
+
+<Avatar imageUri="https://example.com/photo.jpg" size="large" />
+<Avatar icon="account" size="medium" containerColor="#E8DEF8" />
+<Avatar label="JD" size="small" />
+<Avatar icon="plus" onPress={handleAdd} accessibilityLabel="Add user" />
+```
+
+Props:
+- `imageUri?: string` — URI of the image to display. Takes priority over `icon` and `label`.
+- `icon?: string` — MaterialCommunityIcons icon name. Takes priority over `label` when `imageUri` is not set.
+- `label?: string` — Text initials to display (1–2 characters recommended). Shown when `imageUri` and `icon` are not set.
+- `size?: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge'` — Default: `'medium'`. Size of the avatar.
+- `containerColor?: string` — Override the container (background) color. State-layer colors (hover, press) are derived automatically when `onPress` is set.
+- `contentColor?: string` — Override the content (icon / initials) color.
+- `style?: StyleProp<ViewStyle>` — Custom style applied to the root container.
+- `onPress?: () => void` — When provided, the avatar becomes interactive (Pressable).
+- `accessibilityLabel?: string` — Required when `onPress` is provided — labels the button for screen readers.
+- Inherits `ViewProps` (except `style`)
+
+
+---
+
+## Icons
+
+All icon props accept `MaterialCommunityIcons` names from `@expo/vector-icons`. Browse available icons at https://pictogrammers.com/library/mdi/.
+
+`@expo/vector-icons` is an optional peer dependency — only install it if you use icon props (`leadingIcon`, `trailingIcon`, `icon`).

package/package.json

@@ -0,0 +1,202 @@
+{
+  "name": "@onlynative/components",
+  "version": "0.0.0-alpha.0",
+  "description": "Material Design 3 UI components for React Native — Button, Card, Chip, TextField, and more.",
+  "private": false,
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "react-native": "./src/index.ts",
+      "browser": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./typography": {
+      "types": "./dist/typography/index.d.ts",
+      "react-native": "./src/typography/index.ts",
+      "browser": "./src/typography/index.ts",
+      "default": "./dist/typography/index.js"
+    },
+    "./layout": {
+      "types": "./dist/layout/index.d.ts",
+      "react-native": "./src/layout/index.ts",
+      "browser": "./src/layout/index.ts",
+      "default": "./dist/layout/index.js"
+    },
+    "./button": {
+      "types": "./dist/button/index.d.ts",
+      "react-native": "./src/button/index.ts",
+      "browser": "./src/button/index.ts",
+      "default": "./dist/button/index.js"
+    },
+    "./icon-button": {
+      "types": "./dist/icon-button/index.d.ts",
+      "react-native": "./src/icon-button/index.ts",
+      "browser": "./src/icon-button/index.ts",
+      "default": "./dist/icon-button/index.js"
+    },
+    "./appbar": {
+      "types": "./dist/appbar/index.d.ts",
+      "react-native": "./src/appbar/index.ts",
+      "browser": "./src/appbar/index.ts",
+      "default": "./dist/appbar/index.js"
+    },
+    "./card": {
+      "types": "./dist/card/index.d.ts",
+      "react-native": "./src/card/index.ts",
+      "browser": "./src/card/index.ts",
+      "default": "./dist/card/index.js"
+    },
+    "./chip": {
+      "types": "./dist/chip/index.d.ts",
+      "react-native": "./src/chip/index.ts",
+      "browser": "./src/chip/index.ts",
+      "default": "./dist/chip/index.js"
+    },
+    "./checkbox": {
+      "types": "./dist/checkbox/index.d.ts",
+      "react-native": "./src/checkbox/index.ts",
+      "browser": "./src/checkbox/index.ts",
+      "default": "./dist/checkbox/index.js"
+    },
+    "./radio": {
+      "types": "./dist/radio/index.d.ts",
+      "react-native": "./src/radio/index.ts",
+      "browser": "./src/radio/index.ts",
+      "default": "./dist/radio/index.js"
+    },
+    "./switch": {
+      "types": "./dist/switch/index.d.ts",
+      "react-native": "./src/switch/index.ts",
+      "browser": "./src/switch/index.ts",
+      "default": "./dist/switch/index.js"
+    },
+    "./text-field": {
+      "types": "./dist/text-field/index.d.ts",
+      "react-native": "./src/text-field/index.ts",
+      "browser": "./src/text-field/index.ts",
+      "default": "./dist/text-field/index.js"
+    },
+    "./list": {
+      "types": "./dist/list/index.d.ts",
+      "react-native": "./src/list/index.ts",
+      "browser": "./src/list/index.ts",
+      "default": "./dist/list/index.js"
+    },
+    "./keyboard-avoiding-wrapper": {
+      "types": "./dist/keyboard-avoiding-wrapper/index.d.ts",
+      "react-native": "./src/keyboard-avoiding-wrapper/index.ts",
+      "browser": "./src/keyboard-avoiding-wrapper/index.ts",
+      "default": "./dist/keyboard-avoiding-wrapper/index.js"
+    },
+    "./avatar": {
+      "types": "./dist/avatar/index.d.ts",
+      "react-native": "./src/avatar/index.ts",
+      "browser": "./src/avatar/index.ts",
+      "default": "./dist/avatar/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "typography": [
+        "dist/typography/index.d.ts"
+      ],
+      "layout": [
+        "dist/layout/index.d.ts"
+      ],
+      "button": [
+        "dist/button/index.d.ts"
+      ],
+      "icon-button": [
+        "dist/icon-button/index.d.ts"
+      ],
+      "appbar": [
+        "dist/appbar/index.d.ts"
+      ],
+      "card": [
+        "dist/card/index.d.ts"
+      ],
+      "chip": [
+        "dist/chip/index.d.ts"
+      ],
+      "checkbox": [
+        "dist/checkbox/index.d.ts"
+      ],
+      "radio": [
+        "dist/radio/index.d.ts"
+      ],
+      "switch": [
+        "dist/switch/index.d.ts"
+      ],
+      "text-field": [
+        "dist/text-field/index.d.ts"
+      ],
+      "list": [
+        "dist/list/index.d.ts"
+      ],
+      "keyboard-avoiding-wrapper": [
+        "dist/keyboard-avoiding-wrapper/index.d.ts"
+      ],
+      "avatar": [
+        "dist/avatar/index.d.ts"
+      ]
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "llms.txt"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/onlynative/ui.git",
+    "directory": "packages/components"
+  },
+  "homepage": "https://github.com/onlynative/ui",
+  "keywords": [
+    "react-native",
+    "material-design-3",
+    "ui-components",
+    "md3",
+    "material-you"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "jest --passWithNoTests"
+  },
+  "peerDependencies": {
+    "@expo/vector-icons": ">=14.0.0",
+    "@onlynative/core": ">=0.0.0-alpha.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.72.0",
+    "react-native-safe-area-context": ">=4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@expo/vector-icons": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@react-native/babel-preset": "^0.81.5",
+    "@onlynative/core": "workspace:*",
+    "@onlynative/utils": "workspace:*",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.0.0",
+    "jest": "^29.7.0",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-test-renderer": "19.1.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  }
+}