@helpwave/hightide-native 0.0.2 → 0.0.6

package/package.json

@@ -10,7 +10,7 @@
     "access": "public"
   },
   "license": "AGPL-3.0-only",
-  "version": "0.0.2",
+  "version": "0.0.6",
   "type": "module",
   "files": [
     "src"
@@ -43,8 +43,8 @@
   },
   "dependencies": {
     "lucide-react-native": "0.561.0",
-    "@helpwave/hightide-utils": "0.0.1",
-    "@helpwave/hightide-design": "0.0.1"
+    "@helpwave/hightide-design": "0.0.4",
+    "@helpwave/hightide-utils": "0.0.4"
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=2.0.0",
@@ -61,6 +61,7 @@
     "@types/react": "19.2.3",
     "@types/react-dom": "19.2.3",
     "eslint": "9.31.0",
+    "eslint-plugin-import": "2.32.0",
     "eslint-plugin-storybook": "10.4.5",
     "react": "19.2.3",
     "react-dom": "19.2.3",

package/src/components/chat/ChatAttachmentCard.tsx

@@ -1,16 +1,29 @@
-import { useMemo, type ReactNode } from 'react'
-import { Text, View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native'
-import { Download, FileText } from 'lucide-react-native'
-import { useTheme } from '../../global-contexts/theme'
+import {
+  useMemo,
+  type ReactNode
+} from 'react'
+import {
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle
+} from 'react-native'
+import {
+  Download,
+  FileText
+} from 'lucide-react-native'
+
+import { IconButton } from '../user-interaction/IconButton'
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
   ChatAttachmentCardMetadataStyle,
   ChatAttachmentCardNameStyle,
   ChatAttachmentCardState,
   ChatAttachmentCardStyle,
-  ChatMessageDirection,
-  StyleOverwrite
-} from '../../theme'
-import { IconButton } from '../user-interaction'
+  ChatMessageDirection
+} from '../../theme/types/components/chat'
+import type { StyleOverwrite } from '../../theme/types/resolver'
 
 export type ChatAttachmentCardProps = Omit<ViewProps, 'style'> & {
   name: ReactNode,
@@ -43,23 +56,23 @@ export const ChatAttachmentCard = ({
   const staticState = useMemo(() => ({}), [])
 
   const resolvedCardStyle = useMemo(
-    () => theme.components.chat.attachmentCard(state, cardStyle),
+    () => theme.components.chat.attachmentCard.container(state, cardStyle),
     [theme, state, cardStyle]
   )
   const resolvedIconStyle = useMemo(
-    () => theme.components.chat.attachmentCardIcon(staticState),
+    () => theme.components.chat.attachmentCard.icon(staticState),
     [theme, staticState]
   )
   const resolvedIconColor = useMemo(
-    () => theme.components.chat.attachmentCardIconColor(staticState),
+    () => theme.components.chat.attachmentCard.iconColor(staticState),
     [theme, staticState]
   )
   const resolvedNameStyle = useMemo(
-    () => theme.components.chat.attachmentCardName(staticState, nameStyle),
+    () => theme.components.chat.attachmentCard.name(staticState, nameStyle),
     [theme, staticState, nameStyle]
   )
   const resolvedMetadataStyle = useMemo(
-    () => theme.components.chat.attachmentCardMetadata(staticState, metadataStyle),
+    () => theme.components.chat.attachmentCard.metadata(staticState, metadataStyle),
     [theme, staticState, metadataStyle]
   )
 

package/src/components/chat/ChatConversationList.tsx

@@ -1,4 +1,7 @@
-import { useMemo, type ReactNode } from 'react'
+import {
+  useMemo,
+  type ReactNode
+} from 'react'
 import {
   ScrollView,
   View,
@@ -6,13 +9,14 @@ import {
   type ViewProps,
   type ViewStyle
 } from 'react-native'
-import { useTheme } from '../../global-contexts/theme'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
   ChatConversationListFooterStyle,
   ChatConversationListHeaderStyle,
-  ChatConversationListStyle,
-  StyleOverwrite
-} from '../../theme'
+  ChatConversationListStyle
+} from '../../theme/types/components/chat'
+import type { StyleOverwrite } from '../../theme/types/resolver'
 
 export type ChatConversationListProps = Omit<ViewProps, 'children' | 'style'> & {
   header?: ReactNode,
@@ -40,15 +44,15 @@ export const ChatConversationList = ({
   const state = useMemo(() => ({}), [])
 
   const resolvedListStyle = useMemo(
-    () => theme.components.chat.conversationList(state, listStyle),
+    () => theme.components.chat.conversationList.container(state, listStyle),
     [theme, state, listStyle]
   )
   const resolvedHeaderStyle = useMemo(
-    () => theme.components.chat.conversationListHeader(state, headerStyle),
+    () => theme.components.chat.conversationList.header(state, headerStyle),
     [theme, state, headerStyle]
   )
   const resolvedFooterStyle = useMemo(
-    () => theme.components.chat.conversationListFooter(state, footerStyle),
+    () => theme.components.chat.conversationList.footer(state, footerStyle),
     [theme, state, footerStyle]
   )
 

package/src/components/chat/ChatConversationRow.tsx

@@ -1,4 +1,8 @@
-import { Fragment, useMemo, type ReactNode } from 'react'
+import {
+  Fragment,
+  useMemo,
+  type ReactNode
+} from 'react'
 import {
   Pressable,
   Text,
@@ -7,16 +11,20 @@ import {
   type StyleProp,
   type ViewStyle
 } from 'react-native'
-import { Check, CheckCheck } from 'lucide-react-native'
-import { useTheme } from '../../global-contexts/theme'
+import {
+  Check,
+  CheckCheck
+} from 'lucide-react-native'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
   ChatConversationRowPreviewStyle,
   ChatConversationRowState,
   ChatConversationRowStyle,
   ChatConversationRowTimestampStyle,
-  ChatConversationRowTitleStyle,
-  StyleOverwrite
-} from '../../theme'
+  ChatConversationRowTitleStyle
+} from '../../theme/types/components/chat'
+import type { StyleOverwrite } from '../../theme/types/resolver'
 
 export type ChatConversationSentIndicator = 'sent' | 'sentAndReceived'
 
@@ -72,15 +80,15 @@ export const ChatConversationRow = ({
 
   const staticState = useMemo(() => ({}), [])
   const unreadBadge = useMemo(
-    () => theme.components.chat.conversationRowUnreadBadge(staticState),
+    () => theme.components.chat.conversationRow.unreadBadge(staticState),
     [theme, staticState]
   )
   const unreadBadgeText = useMemo(
-    () => theme.components.chat.conversationRowUnreadBadgeText(staticState),
+    () => theme.components.chat.conversationRow.unreadBadgeText(staticState),
     [theme, staticState]
   )
   const sentIndicatorColor = useMemo(
-    () => theme.components.chat.conversationRowSentIndicator(staticState).color,
+    () => theme.components.chat.conversationRow.sentIndicator(staticState).color,
     [theme, staticState]
   )
 
@@ -90,14 +98,14 @@ export const ChatConversationRow = ({
       disabled={disabled}
       style={(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
-        return [theme.components.chat.conversationRow(state, rowStyle), style]
+        return [theme.components.chat.conversationRow.container(state, rowStyle), style]
       }}
     >
       {(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
-        const resolvedTitle = theme.components.chat.conversationRowTitle(state, titleStyle)
-        const resolvedTimestamp = theme.components.chat.conversationRowTimestamp(state, timestampStyle)
-        const resolvedPreview = theme.components.chat.conversationRowPreview(state, previewStyle)
+        const resolvedTitle = theme.components.chat.conversationRow.title(state, titleStyle)
+        const resolvedTimestamp = theme.components.chat.conversationRow.timestamp(state, timestampStyle)
+        const resolvedPreview = theme.components.chat.conversationRow.preview(state, previewStyle)
 
         return (
           <Fragment>

package/src/components/chat/ChatDateDivider.tsx

@@ -1,11 +1,21 @@
-import { useMemo, type ReactNode } from 'react'
-import { Text, View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native'
-import { useTheme } from '../../global-contexts/theme'
+import {
+  useMemo,
+  type ReactNode
+} from 'react'
+import {
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle
+} from 'react-native'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
   ChatDateDividerStyle,
-  ChatDateDividerTextStyle,
-  StyleOverwrite
-} from '../../theme'
+  ChatDateDividerTextStyle
+} from '../../theme/types/components/chat'
+import type { StyleOverwrite } from '../../theme/types/resolver'
 
 export type ChatDateDividerProps = Omit<ViewProps, 'children' | 'style'> & {
   children?: ReactNode,
@@ -25,11 +35,11 @@ export const ChatDateDivider = ({
   const state = useMemo(() => ({}), [])
 
   const resolvedDividerStyle = useMemo(
-    () => theme.components.chat.dateDivider(state, dividerStyle),
+    () => theme.components.chat.dateDivider.container(state, dividerStyle),
     [theme, state, dividerStyle]
   )
   const resolvedTextStyle = useMemo(
-    () => theme.components.chat.dateDividerText(state, textStyle),
+    () => theme.components.chat.dateDivider.text(state, textStyle),
     [theme, state, textStyle]
   )
 

package/src/components/chat/ChatMessageBubble.tsx

@@ -1,16 +1,26 @@
-import { useMemo, type ReactNode } from 'react'
-import { Text, View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native'
+import {
+  useMemo,
+  type ReactNode
+} from 'react'
+import {
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle
+} from 'react-native'
 import { CheckCheck } from 'lucide-react-native'
-import { useTheme } from '../../global-contexts/theme'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
   ChatMessageBubbleContainerStyle,
   ChatMessageBubbleContentStyle,
   ChatMessageBubbleState,
   ChatMessageBubbleStyle,
   ChatMessageBubbleTimestampStyle,
-  ChatMessageDirection,
-  StyleOverwrite
-} from '../../theme'
+  ChatMessageDirection
+} from '../../theme/types/components/chat'
+import type { StyleOverwrite } from '../../theme/types/resolver'
 
 export type { ChatMessageDirection }
 
@@ -43,31 +53,31 @@ export const ChatMessageBubble = ({
   const staticState = useMemo(() => ({}), [])
 
   const resolvedContainerStyle = useMemo(
-    () => theme.components.chat.messageBubbleContainer(state, containerStyle),
+    () => theme.components.chat.messageBubble.container(state, containerStyle),
     [theme, state, containerStyle]
   )
   const resolvedBubbleStyle = useMemo(
-    () => theme.components.chat.messageBubble(state, bubbleStyle),
+    () => theme.components.chat.messageBubble.bubble(state, bubbleStyle),
     [theme, state, bubbleStyle]
   )
   const resolvedContentStyle = useMemo(
-    () => theme.components.chat.messageBubbleContent(state, contentStyle),
+    () => theme.components.chat.messageBubble.content(state, contentStyle),
     [theme, state, contentStyle]
   )
   const resolvedTimestampStyle = useMemo(
-    () => theme.components.chat.messageBubbleTimestamp(state, timestampStyle),
+    () => theme.components.chat.messageBubble.timestamp(state, timestampStyle),
     [theme, state, timestampStyle]
   )
   const resolvedReceiptStyle = useMemo(
-    () => theme.components.chat.messageBubbleReceipt(staticState),
+    () => theme.components.chat.messageBubble.receipt(staticState),
     [theme, staticState]
   )
   const resolvedReceiptTextStyle = useMemo(
-    () => theme.components.chat.messageBubbleReceiptText(staticState),
+    () => theme.components.chat.messageBubble.receiptText(staticState),
     [theme, staticState]
   )
   const resolvedReceiptIcon = useMemo(
-    () => theme.components.chat.messageBubbleReceiptIcon(staticState),
+    () => theme.components.chat.messageBubble.receiptIcon(staticState),
     [theme, staticState]
   )
 

package/src/components/chat/ChatMessageCard.tsx

@@ -1,15 +1,26 @@
-import { useMemo, type ReactNode } from 'react'
-import { Text, View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native'
-import type { ColoringType } from '@helpwave/hightide-design'
-import { useTheme } from '../../global-contexts/theme'
+import {
+  useMemo,
+  type ReactNode
+} from 'react'
+import {
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle
+} from 'react-native'
+
+import type { ColoringType } from '@helpwave/hightide-design/helpers'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
   ChatMessageCardState,
   ChatMessageCardStyle,
   ChatMessageCardSubtitleStyle,
   ChatMessageCardTitleStyle,
-  ChatMessageDirection,
-  StyleOverwrite
-} from '../../theme'
+  ChatMessageDirection
+} from '../../theme/types/components/chat'
+import type { StyleOverwrite } from '../../theme/types/resolver'
 
 export type ChatMessageCardProps = Omit<ViewProps, 'children' | 'style'> & {
   icon?: ReactNode,
@@ -46,31 +57,31 @@ export const ChatMessageCard = ({
   const staticState = useMemo(() => ({}), [])
 
   const resolvedCardStyle = useMemo(
-    () => theme.components.chat.messageCard(state, cardStyle),
+    () => theme.components.chat.messageCard.container(state, cardStyle),
     [theme, state, cardStyle]
   )
   const resolvedHeaderStyle = useMemo(
-    () => theme.components.chat.messageCardHeader(staticState),
+    () => theme.components.chat.messageCard.header(staticState),
     [theme, staticState]
   )
   const resolvedIconStyle = useMemo(
-    () => theme.components.chat.messageCardIcon(state),
+    () => theme.components.chat.messageCard.icon(state),
     [theme, state]
   )
   const resolvedTitleStyle = useMemo(
-    () => theme.components.chat.messageCardTitle(state, titleStyle),
+    () => theme.components.chat.messageCard.title(state, titleStyle),
     [theme, state, titleStyle]
   )
   const resolvedSubtitleStyle = useMemo(
-    () => theme.components.chat.messageCardSubtitle(staticState, subtitleStyle),
+    () => theme.components.chat.messageCard.subtitle(staticState, subtitleStyle),
     [theme, staticState, subtitleStyle]
   )
   const resolvedBodyStyle = useMemo(
-    () => theme.components.chat.messageCardBody(staticState),
+    () => theme.components.chat.messageCard.body(staticState),
     [theme, staticState]
   )
   const resolvedActionsStyle = useMemo(
-    () => theme.components.chat.messageCardActions(staticState),
+    () => theme.components.chat.messageCard.actions(staticState),
     [theme, staticState]
   )
 

package/src/components/chat/ChatMessageComposer.tsx

@@ -1,4 +1,7 @@
-import { useMemo, type ReactNode } from 'react'
+import {
+  useMemo,
+  type ReactNode
+} from 'react'
 import {
   TextInput,
   View,
@@ -7,14 +10,16 @@ import {
   type ViewStyle
 } from 'react-native'
 import { SendHorizontal } from 'lucide-react-native'
+
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
+
 import { IconButton } from '../user-interaction/IconButton'
-import { useTheme } from '../../global-contexts/theme'
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
   ChatMessageComposerInputStyle,
-  ChatMessageComposerStyle,
-  StyleOverwrite
-} from '../../theme'
+  ChatMessageComposerStyle
+} from '../../theme/types/components/chat'
+import type { StyleOverwrite } from '../../theme/types/resolver'
 
 export type ChatMessageComposerProps = Omit<ViewProps, 'style'> & {
   value?: string,
@@ -55,15 +60,15 @@ export const ChatMessageComposer = ({
   const state = useMemo(() => ({}), [])
 
   const resolvedComposerStyle = useMemo(
-    () => theme.components.chat.messageComposer(state, composerStyle),
+    () => theme.components.chat.messageComposer.container(state, composerStyle),
     [theme, state, composerStyle]
   )
   const resolvedInputStyle = useMemo(
-    () => theme.components.chat.messageComposerInput(state, inputStyle),
+    () => theme.components.chat.messageComposer.input(state, inputStyle),
     [theme, state, inputStyle]
   )
   const placeholderColor = useMemo(
-    () => theme.components.chat.messageComposerPlaceholderColor(state),
+    () => theme.components.chat.messageComposer.placeholderColor(state),
     [theme, state]
   )
 
@@ -103,7 +108,7 @@ export const ChatMessageComposer = ({
         size="md"
         onPress={send}
         icon={SendHorizontal}
-        buttonStyle={(prev) => [prev, { borderRadius: 999 }]}
+        buttonStyle={(prev) => ({ ...prev, borderRadius: 999 })}
       />
     </View>
   )

package/src/components/chat/ChatMessageList.tsx

@@ -1,4 +1,9 @@
-import { useEffect, useMemo, useRef, type ReactNode } from 'react'
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  type ReactNode
+} from 'react'
 import {
   ScrollView,
   type NativeScrollEvent,
@@ -6,8 +11,10 @@ import {
   type StyleProp,
   type ViewStyle
 } from 'react-native'
-import { useTheme } from '../../global-contexts/theme'
-import type { ChatMessageListStyle, StyleOverwrite } from '../../theme'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import type { ChatMessageListStyle } from '../../theme/types/components/chat'
+import type { StyleOverwrite } from '../../theme/types/resolver'
 
 export type ChatMessageListProps = {
   autoScroll?: boolean,
@@ -31,11 +38,11 @@ export const ChatMessageList = ({
   const state = useMemo(() => ({}), [])
 
   const resolvedListStyle = useMemo(
-    () => theme.components.chat.messageList(state, listStyle),
+    () => theme.components.chat.messageList.container(state, listStyle),
     [theme, state, listStyle]
   )
   const listGap = useMemo(
-    () => (theme.components.chat.messageList(state) as ViewStyle).gap,
+    () => (theme.components.chat.messageList.container(state) as ViewStyle).gap,
     [theme, state]
   )
 

package/src/components/chat/ChatQuickReplyChip.tsx

@@ -6,13 +6,14 @@ import {
   type StyleProp,
   type ViewStyle
 } from 'react-native'
-import { useTheme } from '../../global-contexts/theme'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
   ChatQuickReplyChipState,
   ChatQuickReplyChipStyle,
-  ChatQuickReplyChipTextStyle,
-  StyleOverwrite
-} from '../../theme'
+  ChatQuickReplyChipTextStyle
+} from '../../theme/types/components/chat'
+import type { StyleOverwrite } from '../../theme/types/resolver'
 
 export type ChatQuickReplyChipProps = Omit<PressableProps, 'children' | 'style'> & {
   isActive?: boolean,
@@ -53,12 +54,12 @@ export const ChatQuickReplyChip = ({
       disabled={disabled}
       style={(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
-        return [theme.components.chat.quickReplyChip(state, chipStyle), style]
+        return [theme.components.chat.quickReplyChip.container(state, chipStyle), style]
       }}
     >
       {(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
-        const resolvedText = theme.components.chat.quickReplyChipText(state, textStyle)
+        const resolvedText = theme.components.chat.quickReplyChip.text(state, textStyle)
 
         if (typeof children === 'string' || typeof children === 'number') {
           return <Text style={resolvedText}>{children}</Text>

package/src/components/chat/ChatSystemLine.tsx

@@ -1,14 +1,25 @@
-import { useMemo, type ReactNode } from 'react'
-import { Text, View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native'
+import {
+  useMemo,
+  type ReactNode
+} from 'react'
+import {
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle
+} from 'react-native'
 import { CheckCheck } from 'lucide-react-native'
-import type { ColoringType } from '@helpwave/hightide-design'
-import { useTheme } from '../../global-contexts/theme'
+
+import type { ColoringType } from '@helpwave/hightide-design/helpers'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
   ChatSystemLineState,
   ChatSystemLineStyle,
-  ChatSystemLineTextStyle,
-  StyleOverwrite
-} from '../../theme'
+  ChatSystemLineTextStyle
+} from '../../theme/types/components/chat'
+import type { StyleOverwrite } from '../../theme/types/resolver'
 
 export type ChatSystemLineProps = Omit<ViewProps, 'children' | 'style'> & {
   icon?: ReactNode,
@@ -32,15 +43,15 @@ export const ChatSystemLine = ({
   const state = useMemo(() => ({ color }), [color])
 
   const resolvedLineStyle = useMemo(
-    () => theme.components.chat.systemLine(state, lineStyle),
+    () => theme.components.chat.systemLine.container(state, lineStyle),
     [theme, state, lineStyle]
   )
   const resolvedTextStyle = useMemo(
-    () => theme.components.chat.systemLineText(state, textStyle),
+    () => theme.components.chat.systemLine.text(state, textStyle),
     [theme, state, textStyle]
   )
   const resolvedIcon = useMemo(
-    () => theme.components.chat.systemLineIcon(state),
+    () => theme.components.chat.systemLine.icon(state),
     [theme, state]
   )
 

package/src/components/chat/ChatThreadHeader.tsx

@@ -1,12 +1,22 @@
-import { useMemo, type ReactNode } from 'react'
-import { Text, View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native'
-import { useTheme } from '../../global-contexts/theme'
+import {
+  useMemo,
+  type ReactNode
+} from 'react'
+import {
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle
+} from 'react-native'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
   ChatThreadHeaderStyle,
   ChatThreadHeaderSubtitleStyle,
-  ChatThreadHeaderTitleStyle,
-  StyleOverwrite
-} from '../../theme'
+  ChatThreadHeaderTitleStyle
+} from '../../theme/types/components/chat'
+import type { StyleOverwrite } from '../../theme/types/resolver'
 
 export type ChatThreadHeaderProps = Omit<ViewProps, 'style'> & {
   avatar?: ReactNode,
@@ -36,15 +46,15 @@ export const ChatThreadHeader = ({
   const state = useMemo(() => ({}), [])
 
   const resolvedHeaderStyle = useMemo(
-    () => theme.components.chat.threadHeader(state, headerStyle),
+    () => theme.components.chat.threadHeader.container(state, headerStyle),
     [theme, state, headerStyle]
   )
   const resolvedTitleStyle = useMemo(
-    () => theme.components.chat.threadHeaderTitle(state, titleStyle),
+    () => theme.components.chat.threadHeader.title(state, titleStyle),
     [theme, state, titleStyle]
   )
   const resolvedSubtitleStyle = useMemo(
-    () => theme.components.chat.threadHeaderSubtitle(state, subtitleStyle),
+    () => theme.components.chat.threadHeader.subtitle(state, subtitleStyle),
     [theme, state, subtitleStyle]
   )
 

package/src/components/menu/Menu.tsx

@@ -1,12 +1,22 @@
-import { useMemo, type ReactNode } from 'react'
-import { Text, View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native'
-import { useTheme } from '../../global-contexts/theme'
+import {
+  useMemo,
+  type ReactNode
+} from 'react'
+import {
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle
+} from 'react-native'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
   MenuCardStyle,
   MenuSectionStyle,
-  MenuSectionTitleStyle,
-  StyleOverwrite
-} from '../../theme'
+  MenuSectionTitleStyle
+} from '../../theme/types/components/menu'
+import type { StyleOverwrite } from '../../theme/types/resolver'
 
 export type MenuProps = Omit<ViewProps, 'children' | 'style'> & {
   title: string,