@onlynative/components 0.1.0-alpha.0

package/README.md

@@ -0,0 +1,99 @@
+# @onlynative/components
+
+Material Design 3 UI components for React Native, part of [OnlyNative UI](https://github.com/onlynative/ui).
+
+## Install
+
+```bash
+pnpm add @onlynative/core @onlynative/components @expo/vector-icons react-native-safe-area-context
+```
+
+Wrap your app with `MaterialProvider` from `@onlynative/core` (see [@onlynative/core](https://www.npmjs.com/package/@onlynative/core)).
+
+## Import
+
+Subpath imports (preferred for tree-shaking):
+
+```tsx
+import { Button } from '@onlynative/components/button'
+import { Card } from '@onlynative/components/card'
+```
+
+Root import:
+
+```tsx
+import { Button, Card } from '@onlynative/components'
+```
+
+## Components
+
+| Component | Subpath | Variants |
+|-----------|---------|----------|
+| Typography | `./typography` | displayLarge..labelSmall (15 MD3 type scale roles) |
+| Button | `./button` | filled, elevated, outlined, text, tonal |
+| IconButton | `./icon-button` | filled, tonal, outlined, standard |
+| AppBar | `./appbar` | small, center-aligned, medium, large |
+| Card | `./card` | elevated, filled, outlined |
+| Chip | `./chip` | assist, filter, input, suggestion |
+| Checkbox | `./checkbox` | — |
+| Radio | `./radio` | — |
+| Switch | `./switch` | — |
+| TextField | `./text-field` | filled, outlined |
+| Layout | `./layout` | Layout, Box, Row, Column, Grid |
+| List | `./list` | List, ListItem, ListDivider |
+
+## Quick examples
+
+```tsx
+import { Button } from '@onlynative/components/button'
+import { TextField } from '@onlynative/components/text-field'
+import { Card } from '@onlynative/components/card'
+import { Typography } from '@onlynative/components/typography'
+import { Row, Column } from '@onlynative/components/layout'
+
+// Button with icon
+<Button variant="filled" leadingIcon="plus" onPress={handleCreate}>Create</Button>
+
+// Text field
+<TextField label="Email" variant="outlined" value={email} onChangeText={setEmail} />
+
+// Card
+<Card variant="elevated" onPress={handlePress}>
+  <Typography variant="titleMedium">Card Title</Typography>
+</Card>
+
+// Layout
+<Column gap="md">
+  <Row gap="sm" align="center">
+    <Button variant="filled">Save</Button>
+    <Button variant="outlined">Cancel</Button>
+  </Row>
+</Column>
+```
+
+## Override pattern
+
+All interactive components support a 3-tier override system (theme → variant → props):
+
+- `containerColor` — Background color (state-layer colors auto-derived)
+- `contentColor` — Content (label + icons) color
+- `labelStyle` — Text-specific style (does not affect icons)
+- `style` — Root container style
+
+```tsx
+<Button containerColor="#006A6A" contentColor="#FFFFFF">Custom</Button>
+```
+
+## Icons
+
+All icon props accept [MaterialCommunityIcons](https://pictogrammers.com/library/mdi/) names from `@expo/vector-icons`.
+
+## Docs
+
+Full API reference: https://onlynative.github.io/ui/
+
+LLM-optimized reference: https://onlynative.github.io/ui/llms-full.txt
+
+## License
+
+MIT

package/dist/appbar/index.d.ts

@@ -0,0 +1,71 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { I as IconButtonProps } from '../types-D3hlyvz-.js';
+import '@expo/vector-icons/MaterialCommunityIcons';
+
+/** Size/layout variant of the AppBar. */
+type AppBarVariant = 'small' | 'center-aligned' | 'medium' | 'large';
+/** A single action item rendered in the AppBar trailing slot. */
+interface AppBarAction {
+    /** MaterialCommunityIcons icon name to render. */
+    icon: IconButtonProps['icon'];
+    /** Accessibility label for screen readers (required). */
+    accessibilityLabel: string;
+    /** Called when the action icon is pressed. */
+    onPress?: () => void;
+    /**
+     * Disables the action icon.
+     * @default false
+     */
+    disabled?: boolean;
+}
+interface AppBarProps {
+    /** Title text displayed in the bar. */
+    title: string;
+    /**
+     * Layout variant.
+     * @default 'small'
+     */
+    variant?: AppBarVariant;
+    /**
+     * When `true`, renders a back button in the leading slot.
+     * @default false
+     */
+    canGoBack?: boolean;
+    /** Called when the auto-rendered back button is pressed. */
+    onBackPress?: () => void;
+    /**
+     * When `true`, wraps the bar in a SafeAreaView that handles the top inset.
+     * @default false
+     */
+    insetTop?: boolean;
+    /**
+     * When `true`, adds shadow/elevation to indicate the bar is scrolled.
+     * @default false
+     */
+    elevated?: boolean;
+    /** Custom leading content. When provided, overrides `canGoBack`. */
+    leading?: ReactNode;
+    /** Custom trailing content. When provided, overrides `actions`. */
+    trailing?: ReactNode;
+    /** Array of icon-button actions rendered in the trailing slot. */
+    actions?: AppBarAction[];
+    /**
+     * Override the container (background) color.
+     * Applied to both normal and elevated states.
+     */
+    containerColor?: string;
+    /**
+     * Override the content (title and icon) color.
+     */
+    contentColor?: string;
+    /** Additional style applied to the title text. */
+    titleStyle?: StyleProp<TextStyle>;
+    /** Custom style applied to the root container. */
+    style?: StyleProp<ViewStyle>;
+}
+
+declare function AppBar({ title, variant, canGoBack, onBackPress, insetTop, elevated, leading, trailing, actions, containerColor, contentColor, titleStyle, style, }: AppBarProps): react_jsx_runtime.JSX.Element;
+
+export { AppBar, type AppBarAction, type AppBarProps, type AppBarVariant };