✨ add Label typographic component

Storybook/.ondevice/storybook.requires.js

@@ -66,6 +66,7 @@ const getStories = () => {
     "./components/TopAppBar/TopAppBar.stories.tsx": require("../components/TopAppBar/TopAppBar.stories.tsx"),
     "./components/Typography/Body.stories.tsx": require("../components/Typography/Body.stories.tsx"),
     "./components/Typography/Headline.stories.tsx": require("../components/Typography/Headline.stories.tsx"),
+    "./components/Typography/Label.stories.tsx": require("../components/Typography/Label.stories.tsx"),
   };
 };
 

Storybook/components/Typography/Label.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-native';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { Label } from 'smartway-react-native-ui';
+
+const textInside = `
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quisquam, nulla
+earum ut porro distinctio autem deleniti laborum nisi ex ipsum nihil beatae
+facilis. Vel unde molestias quibusdam dolorem libero.
+`;
+
+export default {
+    title: 'typography/Label',
+    component: Label,
+    argTypes: {
+        token: {
+            control: { type: 'radio' },
+            options: ['n1', 'n2'],
+        },
+    },
+    decorators: [
+        (Story) => {
+            const styles = StyleSheet.create({
+                container: {
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flex: 1,
+                },
+            });
+            return (
+                <View style={styles.container}>
+                    <Story />
+                </View>
+            );
+        },
+    ],
+} as Meta<typeof Label>;
+
+type Story = StoryObj<typeof Label>;
+
+export const Default: Story = {
+    args: {
+        children: textInside,
+    },
+};
+Default.parameters = { noSafeArea: false };

src/components/index.tsx

@@ -15,6 +15,7 @@ import { LineChart } from './charts/LineChart';
 import { Badge } from './badge/Badge';
 import { DateField } from './dateSelector/DateField';
 import { DateSelector } from './dateSelector/DateSelector';
+import { Label } from './typography/Label';
 
 export { default as Snackbar, useSnackbar } from './alert/Snackbar';
 export { default as Banner, useBanner } from './alert/Banner';
@@ -27,6 +28,7 @@ export {
     Headline,
     Icon,
     Logo,
+    Label,
     Screen,
     TextField,
     TopAppBar,

src/components/typography/Label.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { StyleProp, Text, TextStyle } from 'react-native';
+import type { TextProps } from 'react-native-paper';
+import { useTheme } from '../../styles/themes';
+import { tokens } from '@zerogachis/smartway-design-token';
+import { getFont } from './utils';
+
+type LabelTypography = keyof typeof tokens.typography.label;
+
+export interface LabelProps extends TextProps<Text> {
+    typography?: LabelTypography;
+}
+
+export const Label = ({ typography = 'n1', children, style, ...props }: LabelProps) => {
+    const theme = useTheme();
+
+    const bodyStyle: StyleProp<TextStyle> = {
+        color: theme.sw.color.neutral[800],
+        fontSize: tokens.typography.label[typography]?.fontSize,
+        fontFamily: getFont(tokens.typography.label[typography]),
+    };
+
+    return (
+        <Text {...props} style={[bodyStyle, style]}>
+            {children}
+        </Text>
+    );
+};

src/index.tsx

@@ -17,6 +17,7 @@ export {
     Tag,
     Divider,
     LineChart,
+    Label,
     Badge,
     DateField,
     DateSelector,