Merge branch 'main' into app-bars

Author: computools-anastasiia-nahaiska

README.md

@@ -338,6 +338,17 @@ export const MyComponent: React.FC = () => {
 
 </details>
 </details>
+<details><summary>Badge</summary>
+</br>
+
+**Properties**
+| name | description | type | default |
+| ------ | ------ | ------ | ----|
+| value | required | string | - |
+| valueStyle | - | TextStyle | - |
+
+![badge light theme](https://ik.imagekit.io/Computools/rn-material-components/badge_light.png?updatedAt=1733926687727)
+![badge dark theme](https://ik.imagekit.io/Computools/rn-material-components/badge_dark.png?updatedAt=1733926687741)
 </details>
 <details><summary>Buttons</summary>
 <br />

src/badge/Badge.component.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {View, Text, type ViewProps, type StyleProp, type TextStyle} from 'react-native';
+
+import {styles} from './badge.styles';
+import {useTheme} from '../theme/useTheme.hook';
+import {useTypography} from '../typography/useTypography.component';
+
+export interface BadgeProps extends ViewProps {
+  value: string;
+
+  valueStyle?: StyleProp<TextStyle>;
+}
+
+export const Badge: React.FC<BadgeProps> = ({value, style, valueStyle, ...props}) => {
+  const {error} = useTheme();
+  const {labelSmall} = useTypography();
+
+  return (
+    <View style={[styles.container, {backgroundColor: error.background}, style]} {...props}>
+      <Text style={[labelSmall, {color: error.text}, valueStyle]}>{value}</Text>
+    </View>
+  );
+};

src/badge/badge.styles.ts

@@ -0,0 +1,13 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+
+    paddingHorizontal: 4,
+    minWidth: 16,
+    height: 16,
+    borderRadius: 100,
+  },
+});

src/index.tsx

@@ -1,5 +1,7 @@
 export * from './icons';
 
+export {Badge, type BadgeProps} from './badge/Badge.component';
+
 export {Divider, type DividerProps} from './divider/Divider.component';
 
 export {