add divider label component

packages/components/src/divider-label/divider-label.stories.tsx

@@ -0,0 +1,25 @@
+import { DividerLabel } from './divider-label'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof DividerLabel> = {
+  component: DividerLabel,
+  argTypes: {},
+  parameters: {
+    design: {
+      type: 'figma',
+      url: '',
+    },
+  },
+}
+
+type Story = StoryObj<typeof DividerLabel>
+
+export const Default: Story = {
+  args: {
+    label: 'Messages',
+  },
+}
+
+export default meta

packages/components/src/divider-label/divider-label.tsx

@@ -0,0 +1,29 @@
+import { Stack } from '@tamagui/core'
+
+import { Paragraph } from '../typography'
+
+type Props = {
+  label: string
+  tight?: boolean
+}
+
+const DividerLabel = (props: Props) => {
+  const { label, tight = true } = props
+
+  return (
+    <Stack
+      paddingHorizontal={16}
+      paddingTop={tight ? 8 : 16}
+      paddingBottom={8}
+      borderColor="$neutral-10"
+      borderTopWidth={1}
+    >
+      <Paragraph color="$neutral-50" weight="medium" variant="smaller">
+        {label}
+      </Paragraph>
+    </Stack>
+  )
+}
+
+export { DividerLabel }
+export type { Props as DividerLabelProps }

packages/components/src/divider-label/index.tsx

@@ -0,0 +1 @@
+export * from './divider-label'