@onlynative/components 0.1.1-alpha.1 → 0.1.1-alpha.3

package/README.md

@@ -5,7 +5,13 @@ Material Design 3 UI components for React Native, part of [OnlyNative UI](https:
 ## Install
 
 ```bash
-pnpm add @onlynative/core @onlynative/components @expo/vector-icons react-native-safe-area-context
+pnpm add @onlynative/core @onlynative/components react-native-safe-area-context
+```
+
+**Optional** — only needed if you plan to use icons in your app:
+
+```bash
+pnpm add @expo/vector-icons
 ```
 
 Wrap your app with `ThemeProvider` from `@onlynative/core` (see [@onlynative/core](https://www.npmjs.com/package/@onlynative/core)).

package/dist/appbar/index.d.ts

@@ -6,6 +6,19 @@ import '@expo/vector-icons/MaterialCommunityIcons';
 
 /** Size/layout variant of the AppBar. */
 type AppBarVariant = 'small' | 'center-aligned' | 'medium' | 'large';
+/**
+ * Color scheme that determines the default container and content colors.
+ *
+ * - `'surface'` — `surface` / `onSurface` (default, elevated uses `surfaceContainer`)
+ * - `'surfaceContainerLowest'` — `surfaceContainerLowest` / `onSurface`
+ * - `'surfaceContainerLow'` — `surfaceContainerLow` / `onSurface`
+ * - `'surfaceContainer'` — `surfaceContainer` / `onSurface`
+ * - `'surfaceContainerHigh'` — `surfaceContainerHigh` / `onSurface`
+ * - `'surfaceContainerHighest'` — `surfaceContainerHighest` / `onSurface`
+ * - `'primary'` — `primary` / `onPrimary`
+ * - `'primaryContainer'` — `primaryContainer` / `onPrimaryContainer`
+ */
+type AppBarColorScheme = 'surface' | 'surfaceContainerLowest' | 'surfaceContainerLow' | 'surfaceContainer' | 'surfaceContainerHigh' | 'surfaceContainerHighest' | 'primary' | 'primaryContainer';
 /** A single action item rendered in the AppBar trailing slot. */
 interface AppBarAction {
     /** MaterialCommunityIcons icon name to render. */
@@ -28,6 +41,12 @@ interface AppBarProps {
      * @default 'small'
      */
     variant?: AppBarVariant;
+    /**
+     * Color scheme that determines the default container and content colors.
+     * `containerColor` and `contentColor` props override these defaults.
+     * @default 'surface'
+     */
+    colorScheme?: AppBarColorScheme;
     /**
      * When `true`, renders a back button in the leading slot.
      * @default false
@@ -66,6 +85,6 @@ interface AppBarProps {
     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;
+declare function AppBar({ title, variant, colorScheme, 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 };
+export { AppBar, type AppBarAction, type AppBarColorScheme, type AppBarProps, type AppBarVariant };

package/dist/appbar/index.js

@@ -648,21 +648,74 @@ function Typography({
 // src/appbar/styles.ts
 var import_react_native6 = require("react-native");
 var import_core3 = require("@onlynative/core");
-function createStyles2(theme) {
+function getColorSchemeColors(theme, colorScheme) {
+  switch (colorScheme) {
+    case "surfaceContainerLowest":
+      return {
+        containerColor: theme.colors.surfaceContainerLowest,
+        elevatedContainerColor: theme.colors.surfaceContainerLowest,
+        contentColor: theme.colors.onSurface
+      };
+    case "surfaceContainerLow":
+      return {
+        containerColor: theme.colors.surfaceContainerLow,
+        elevatedContainerColor: theme.colors.surfaceContainerLow,
+        contentColor: theme.colors.onSurface
+      };
+    case "surfaceContainer":
+      return {
+        containerColor: theme.colors.surfaceContainer,
+        elevatedContainerColor: theme.colors.surfaceContainer,
+        contentColor: theme.colors.onSurface
+      };
+    case "surfaceContainerHigh":
+      return {
+        containerColor: theme.colors.surfaceContainerHigh,
+        elevatedContainerColor: theme.colors.surfaceContainerHigh,
+        contentColor: theme.colors.onSurface
+      };
+    case "surfaceContainerHighest":
+      return {
+        containerColor: theme.colors.surfaceContainerHighest,
+        elevatedContainerColor: theme.colors.surfaceContainerHighest,
+        contentColor: theme.colors.onSurface
+      };
+    case "primary":
+      return {
+        containerColor: theme.colors.primary,
+        elevatedContainerColor: theme.colors.primary,
+        contentColor: theme.colors.onPrimary
+      };
+    case "primaryContainer":
+      return {
+        containerColor: theme.colors.primaryContainer,
+        elevatedContainerColor: theme.colors.primaryContainer,
+        contentColor: theme.colors.onPrimaryContainer
+      };
+    case "surface":
+    default:
+      return {
+        containerColor: theme.colors.surface,
+        elevatedContainerColor: theme.colors.surfaceContainer,
+        contentColor: theme.colors.onSurface
+      };
+  }
+}
+function createStyles2(theme, schemeColors) {
   var _a;
   const topAppBar = (_a = theme.topAppBar) != null ? _a : import_core3.defaultTopAppBarTokens;
   return import_react_native6.StyleSheet.create({
     root: {
-      backgroundColor: theme.colors.surface
+      backgroundColor: schemeColors.containerColor
     },
     safeArea: {
-      backgroundColor: theme.colors.surface
+      backgroundColor: schemeColors.containerColor
     },
     elevatedRoot: {
-      backgroundColor: theme.colors.surfaceContainer
+      backgroundColor: schemeColors.elevatedContainerColor
     },
     elevatedSafeArea: {
-      backgroundColor: theme.colors.surfaceContainer
+      backgroundColor: schemeColors.elevatedContainerColor
     },
     smallContainer: {
       height: topAppBar.smallContainerHeight,
@@ -779,6 +832,7 @@ function measureWidth(event) {
 function AppBar({
   title,
   variant = "small",
+  colorScheme = "surface",
   canGoBack = false,
   onBackPress,
   insetTop = false,
@@ -794,12 +848,20 @@ function AppBar({
   var _a;
   const theme = (0, import_core4.useTheme)();
   const topAppBar = (_a = theme.topAppBar) != null ? _a : import_core4.defaultTopAppBarTokens;
-  const styles = (0, import_react3.useMemo)(() => createStyles2(theme), [theme]);
+  const schemeColors = (0, import_react3.useMemo)(
+    () => getColorSchemeColors(theme, colorScheme),
+    [theme, colorScheme]
+  );
+  const resolvedContentColor = contentColor != null ? contentColor : schemeColors.contentColor;
+  const styles = (0, import_react3.useMemo)(
+    () => createStyles2(theme, schemeColors),
+    [theme, schemeColors]
+  );
   const [leadingWidth, setLeadingWidth] = (0, import_react3.useState)(0);
   const [actionsWidth, setActionsWidth] = (0, import_react3.useState)(0);
   const titleColorStyle = (0, import_react3.useMemo)(
-    () => ({ color: contentColor != null ? contentColor : theme.colors.onSurface }),
-    [contentColor, theme.colors.onSurface]
+    () => ({ color: resolvedContentColor }),
+    [resolvedContentColor]
   );
   const size = resolveSize(variant);
   const titleVariant = titleVariantBySize[size];
@@ -829,19 +891,12 @@ function AppBar({
         icon: getBackIcon(),
         size: "medium",
         variant: "standard",
-        iconColor: contentColor != null ? contentColor : theme.colors.onSurface,
+        iconColor: resolvedContentColor,
         accessibilityLabel: "Go back",
         onPress: onBackPress
       }
     ) });
-  }, [
-    canGoBack,
-    contentColor,
-    leading,
-    onBackPress,
-    styles.iconFrame,
-    theme.colors.onSurface
-  ]);
+  }, [canGoBack, resolvedContentColor, leading, onBackPress, styles.iconFrame]);
   const actionsContent = (0, import_react3.useMemo)(() => {
     if (trailing) {
       return trailing;
@@ -859,7 +914,7 @@ function AppBar({
             icon: action.icon,
             size: "medium",
             variant: "standard",
-            iconColor: contentColor,
+            iconColor: resolvedContentColor,
             accessibilityLabel: action.accessibilityLabel,
             onPress: action.onPress,
             disabled: action.disabled
@@ -868,7 +923,7 @@ function AppBar({
       },
       `${String(action.icon)}-${index}`
     )) });
-  }, [actions, contentColor, styles.actionsRow, styles.iconFrame, trailing]);
+  }, [actions, resolvedContentColor, styles.actionsRow, styles.iconFrame, trailing]);
   const onLeadingLayout = (0, import_react3.useCallback)((event) => {
     const nextWidth = measureWidth(event);
     setLeadingWidth((currentWidth) => {

package/dist/index.d.ts

@@ -3,7 +3,7 @@ export { Box, BoxProps, Column, ColumnProps, Grid, GridProps, Layout, LayoutProp
 export { Button, ButtonProps, ButtonVariant } from './button/index.js';
 export { IconButton } from './icon-button/index.js';
 export { I as IconButtonProps, a as IconButtonSize, b as IconButtonVariant } from './types-D3hlyvz-.js';
-export { AppBar, AppBarAction, AppBarProps, AppBarVariant } from './appbar/index.js';
+export { AppBar, AppBarAction, AppBarColorScheme, AppBarProps, AppBarVariant } from './appbar/index.js';
 export { Card, CardProps, CardVariant } from './card/index.js';
 export { Chip, ChipProps, ChipVariant } from './chip/index.js';
 export { Checkbox, CheckboxProps } from './checkbox/index.js';

package/dist/index.js

@@ -1280,21 +1280,74 @@ var import_core8 = require("@onlynative/core");
 // src/appbar/styles.ts
 var import_react_native13 = require("react-native");
 var import_core7 = require("@onlynative/core");
-function createStyles3(theme) {
+function getColorSchemeColors(theme, colorScheme) {
+  switch (colorScheme) {
+    case "surfaceContainerLowest":
+      return {
+        containerColor: theme.colors.surfaceContainerLowest,
+        elevatedContainerColor: theme.colors.surfaceContainerLowest,
+        contentColor: theme.colors.onSurface
+      };
+    case "surfaceContainerLow":
+      return {
+        containerColor: theme.colors.surfaceContainerLow,
+        elevatedContainerColor: theme.colors.surfaceContainerLow,
+        contentColor: theme.colors.onSurface
+      };
+    case "surfaceContainer":
+      return {
+        containerColor: theme.colors.surfaceContainer,
+        elevatedContainerColor: theme.colors.surfaceContainer,
+        contentColor: theme.colors.onSurface
+      };
+    case "surfaceContainerHigh":
+      return {
+        containerColor: theme.colors.surfaceContainerHigh,
+        elevatedContainerColor: theme.colors.surfaceContainerHigh,
+        contentColor: theme.colors.onSurface
+      };
+    case "surfaceContainerHighest":
+      return {
+        containerColor: theme.colors.surfaceContainerHighest,
+        elevatedContainerColor: theme.colors.surfaceContainerHighest,
+        contentColor: theme.colors.onSurface
+      };
+    case "primary":
+      return {
+        containerColor: theme.colors.primary,
+        elevatedContainerColor: theme.colors.primary,
+        contentColor: theme.colors.onPrimary
+      };
+    case "primaryContainer":
+      return {
+        containerColor: theme.colors.primaryContainer,
+        elevatedContainerColor: theme.colors.primaryContainer,
+        contentColor: theme.colors.onPrimaryContainer
+      };
+    case "surface":
+    default:
+      return {
+        containerColor: theme.colors.surface,
+        elevatedContainerColor: theme.colors.surfaceContainer,
+        contentColor: theme.colors.onSurface
+      };
+  }
+}
+function createStyles3(theme, schemeColors) {
   var _a;
   const topAppBar = (_a = theme.topAppBar) != null ? _a : import_core7.defaultTopAppBarTokens;
   return import_react_native13.StyleSheet.create({
     root: {
-      backgroundColor: theme.colors.surface
+      backgroundColor: schemeColors.containerColor
     },
     safeArea: {
-      backgroundColor: theme.colors.surface
+      backgroundColor: schemeColors.containerColor
     },
     elevatedRoot: {
-      backgroundColor: theme.colors.surfaceContainer
+      backgroundColor: schemeColors.elevatedContainerColor
     },
     elevatedSafeArea: {
-      backgroundColor: theme.colors.surfaceContainer
+      backgroundColor: schemeColors.elevatedContainerColor
     },
     smallContainer: {
       height: topAppBar.smallContainerHeight,
@@ -1411,6 +1464,7 @@ function measureWidth(event) {
 function AppBar({
   title,
   variant = "small",
+  colorScheme = "surface",
   canGoBack = false,
   onBackPress,
   insetTop = false,
@@ -1426,12 +1480,20 @@ function AppBar({
   var _a;
   const theme = (0, import_core8.useTheme)();
   const topAppBar = (_a = theme.topAppBar) != null ? _a : import_core8.defaultTopAppBarTokens;
-  const styles3 = (0, import_react9.useMemo)(() => createStyles3(theme), [theme]);
+  const schemeColors = (0, import_react9.useMemo)(
+    () => getColorSchemeColors(theme, colorScheme),
+    [theme, colorScheme]
+  );
+  const resolvedContentColor = contentColor != null ? contentColor : schemeColors.contentColor;
+  const styles3 = (0, import_react9.useMemo)(
+    () => createStyles3(theme, schemeColors),
+    [theme, schemeColors]
+  );
   const [leadingWidth, setLeadingWidth] = (0, import_react9.useState)(0);
   const [actionsWidth, setActionsWidth] = (0, import_react9.useState)(0);
   const titleColorStyle = (0, import_react9.useMemo)(
-    () => ({ color: contentColor != null ? contentColor : theme.colors.onSurface }),
-    [contentColor, theme.colors.onSurface]
+    () => ({ color: resolvedContentColor }),
+    [resolvedContentColor]
   );
   const size = resolveSize(variant);
   const titleVariant = titleVariantBySize[size];
@@ -1461,19 +1523,12 @@ function AppBar({
         icon: getBackIcon(),
         size: "medium",
         variant: "standard",
-        iconColor: contentColor != null ? contentColor : theme.colors.onSurface,
+        iconColor: resolvedContentColor,
         accessibilityLabel: "Go back",
         onPress: onBackPress
       }
     ) });
-  }, [
-    canGoBack,
-    contentColor,
-    leading,
-    onBackPress,
-    styles3.iconFrame,
-    theme.colors.onSurface
-  ]);
+  }, [canGoBack, resolvedContentColor, leading, onBackPress, styles3.iconFrame]);
   const actionsContent = (0, import_react9.useMemo)(() => {
     if (trailing) {
       return trailing;
@@ -1491,7 +1546,7 @@ function AppBar({
             icon: action.icon,
             size: "medium",
             variant: "standard",
-            iconColor: contentColor,
+            iconColor: resolvedContentColor,
             accessibilityLabel: action.accessibilityLabel,
             onPress: action.onPress,
             disabled: action.disabled
@@ -1500,7 +1555,7 @@ function AppBar({
       },
       `${String(action.icon)}-${index}`
     )) });
-  }, [actions, contentColor, styles3.actionsRow, styles3.iconFrame, trailing]);
+  }, [actions, resolvedContentColor, styles3.actionsRow, styles3.iconFrame, trailing]);
   const onLeadingLayout = (0, import_react9.useCallback)((event) => {
     const nextWidth = measureWidth(event);
     setLeadingWidth((currentWidth) => {

package/package.json

@@ -1,67 +1,97 @@
 {
   "name": "@onlynative/components",
-  "version": "0.1.1-alpha.1",
+  "version": "0.1.1-alpha.3",
   "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"
     }
   },
@@ -109,8 +139,7 @@
     }
   },
   "publishConfig": {
-    "access": "public",
-    "provenance": true
+    "access": "public"
   },
   "files": [
     "dist"
@@ -136,7 +165,7 @@
   },
   "peerDependencies": {
     "@expo/vector-icons": ">=14.0.0",
-    "@onlynative/core": ">=0.1.1-alpha.1",
+    "@onlynative/core": ">=0.1.1-alpha.3",
     "react": ">=18.0.0",
     "react-native": ">=0.72.0",
     "react-native-safe-area-context": ">=4.0.0"