react-native-molecules 0.5.0-beta.0 → 0.5.0-beta.2

package/README.md

@@ -0,0 +1,87 @@
+React Native Molecules
+================
+
+
+<h3 align="center">
+  Material 3-powered primitives for React Native + Web.<br/>
+  <a href="https://github.com/webbeetechnologies/react-native-molecules/tree/main/docs">Explore the docs</a>
+</h3>
+
+---
+
+[![Version][version-badge]][package] [![MIT License][license-badge]][license]
+
+<p align="center"><i>React Native Molecules ships a comprehensive library of React Native + Web components powered by Material 3 tokens. Every component includes production-ready props, sensible defaults, and playground docs in the `/docs` site.</i></p>
+
+Why React Native Molecules?
+---------------------
+
+-   High performance – built on top of `react-native-unistyles`, with CSS variables on the web.
+-   Modular & lightweight – no barrel files, self-registerable components, and optional peer deps.
+-   Fully customizable – swap internal implementations or override styles using your own tokens.
+-   Unified design – ships with Material 3 light/dark themes out-of-the-box.
+
+Quick start
+-----------
+
+```tsx
+import { Button } from 'react-native-molecules/components/Button';
+
+export function MyComponent() {
+    return <Button onPress={() => console.log('Pressed!')}>Click me</Button>;
+}
+```
+
+Installation overview
+---------------------
+
+> Refer to `docs/docs/getting-started/installation.mdx` for the full walkthrough.
+
+1. **Prerequisites**  
+   - React Native New Architecture (Fabric)  
+   - React 19 or higher
+2. **Install the package**  
+   ```bash
+   pnpm add react-native-molecules
+   ```  
+   (npm and yarn examples are in the docs; pnpm is recommended for the monorepo.)
+3. **Add peer dependencies**  
+   Required:  
+   ```bash
+   pnpm add react-native-unistyles
+   ```  
+   Optional per-component deps, e.g. `FilePicker` requires `@react-native-documents/picker`.
+4. **Configure fonts & icons (web)**  
+   - Copy `MaterialDesignIcons.ttf` from `@react-native-vector-icons/material-design-icons/Fonts/` into your public assets.  
+   - Register the font via `@font-face`.
+5. **Register Unistyles themes**  
+   Set up `StyleSheet.configure` with provided MD3 light/dark themes and your breakpoints for typed theme access.
+6. **Wrap with `PortalProvider` (optional)**  
+   Needed for components that render inside portals (e.g., `Popover`, `Tooltip`, `Menu`, `Modal`).
+
+Next steps
+----------
+
+1. Read `docs/docs/getting-started/introduction.mdx` for an overview of the component catalog, hooks, and customization guides.
+2. Follow the Installation guide above to wire up peer dependencies, fonts, and theming.
+3. Explore the rest of the docs to dive into components, hooks, and utilities. Each entry includes prop tables, behavior notes, and playground examples.
+
+Contributing
+------------
+
+We welcome issues and pull requests. Please ensure any new component stories and docs accompany your changes so they appear in the React Native Molecules docs site.
+
+[build-badge]: https://github.com/webbeetechnologies/react-native-molecules/actions/workflows/lint.yml/badge.svg
+[build]: https://github.com/webbeetechnologies/react-native-molecules/actions/workflows/lint.yml
+[version-badge]: https://img.shields.io/npm/v/react-native-molecules.svg
+[package]: https://www.npmjs.com/package/react-native-molecules
+[license-badge]: https://img.shields.io/badge/license-MIT-green.svg
+[license]: https://github.com/webbeetechnologies/react-native-molecules/blob/main/LICENSE
+[all-contributors-badge]: https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square
+[all-contributors]: #contributors
+[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg
+[prs-welcome]: https://github.com/webbeetechnologies/react-native-molecules/issues
+[chat-badge]: https://img.shields.io/badge/chat-Discussions-5865F2.svg
+[chat]: https://github.com/webbeetechnologies/react-native-molecules/discussions
+[taylordb-badge]: https://img.shields.io/badge/sponsored%20by-TaylorDB-000000.svg
+[taylordb]: https://taylordb.com/

package/components/Accordion/AccordionItem.tsx

@@ -2,13 +2,14 @@ import {
     createContext,
     forwardRef,
     memo,
-    ReactElement,
-    ReactNode,
+    type ReactElement,
+    type ReactNode,
     useContext,
     useEffect,
     useMemo,
 } from 'react';
 import { View, type ViewProps } from 'react-native';
+
 import { useControlledValue, useSubcomponents } from '../../hooks';
 import type { WithElements } from '../../types';
 import { AccordionContext } from './Accordion';

package/components/Accordion/AccordionItemContent.tsx

@@ -1,5 +1,6 @@
 import { memo } from 'react';
 import { View, type ViewProps } from 'react-native';
+
 import { accordionItemContentStyles } from './utils';
 
 export type Props = ViewProps & {};

package/components/Accordion/AccordionItemHeader.tsx

@@ -1,12 +1,13 @@
-import { forwardRef, memo, ReactNode, useCallback, useContext, useMemo } from 'react';
+import { forwardRef, memo, type ReactNode, useCallback, useContext, useMemo } from 'react';
+import { type GestureResponderEvent, type TextStyle, View, type ViewStyle } from 'react-native';
+
+import { useActionState } from '../../hooks';
 import type { WithElements } from '../../types';
+import { resolveStateVariant } from '../../utils';
+import { Text } from '../Text';
 import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
 import { AccordionItemContext } from './AccordionItem';
-import { View, type GestureResponderEvent, type TextStyle, type ViewStyle } from 'react-native';
-import { Text } from '../Text';
 import { accordionItemHeaderStyles } from './utils';
-import { resolveStateVariant } from '../../utils';
-import { useActionState } from '../../hooks';
 
 export type AccordionHeaderElementProps = {
     color: string;

package/components/Accordion/index.tsx

@@ -1,19 +1,14 @@
+import { getRegisteredComponentWithFallback } from '../../core';
+import AccordionDefault from './Accordion';
 import AccordionItemComponent from './AccordionItem';
-import AccordionItemHeader from './AccordionItemHeader';
 import AccordionItemContent from './AccordionItemContent';
-import AccordionDefault from './Accordion';
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import AccordionItemHeader from './AccordionItemHeader';
 
 const AccordionItemDefault = Object.assign(AccordionItemComponent, {
     Header: AccordionItemHeader,
     Content: AccordionItemContent,
 });
 
-registerMoleculesComponents({
-    Accordion: AccordionDefault,
-    AccordionItem: AccordionItemDefault,
-});
-
 export const Accordion = getRegisteredComponentWithFallback('Accordion', AccordionDefault);
 export const AccordionItem = getRegisteredComponentWithFallback(
     'AccordionItem',
@@ -22,15 +17,14 @@ export const AccordionItem = getRegisteredComponentWithFallback(
 
 export type { Props as AccordionProps } from './Accordion';
 export type { Props as AccordionItemProps } from './AccordionItem';
+export type { Props as AccordionItemContentProps } from './AccordionItemContent';
 export type {
-    Props as AccordionItemHeaderProps,
     AccordionHeaderElementProps,
+    Props as AccordionItemHeaderProps,
 } from './AccordionItemHeader';
-export type { Props as AccordionItemContentProps } from './AccordionItemContent';
-
 export {
-    accordionStyles,
-    accordionItemStyles,
-    accordionItemHeaderStyles,
     accordionItemContentStyles,
+    accordionItemHeaderStyles,
+    accordionItemStyles,
+    accordionStyles,
 } from './utils';

package/components/Accordion/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const accordionStylesDefault = StyleSheet.create({
     root: {},
@@ -47,16 +47,19 @@ const accordionItemContentStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    Accordion: accordionStylesDefault,
-    AccordionItem: accordionItemStylesDefault,
-    AccordionItem_Header: accordionItemHeaderStylesDefault,
-    AccordionItem_Content: accordionItemContentStylesDefault,
-});
-
-export const accordionStyles = getRegisteredMoleculesComponentStyles('Accordion');
-export const accordionItemStyles = getRegisteredMoleculesComponentStyles('AccordionItem');
-export const accordionItemHeaderStyles =
-    getRegisteredMoleculesComponentStyles('AccordionItem_Header');
-export const accordionItemContentStyles =
-    getRegisteredMoleculesComponentStyles('AccordionItem_Content');
+export const accordionStyles = getRegisteredComponentStylesWithFallback(
+    'Accordion',
+    accordionStylesDefault,
+);
+export const accordionItemStyles = getRegisteredComponentStylesWithFallback(
+    'AccordionItem',
+    accordionItemStylesDefault,
+);
+export const accordionItemHeaderStyles = getRegisteredComponentStylesWithFallback(
+    'AccordionItem_Header',
+    accordionItemHeaderStylesDefault,
+);
+export const accordionItemContentStyles = getRegisteredComponentStylesWithFallback(
+    'AccordionItem_Content',
+    accordionItemContentStylesDefault,
+);

package/components/ActivityIndicator/ActivityIndicator.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 import AnimatedSpinner from './AnimatedSpinner';
 
 export type Props = ActivityIndicatorProps & {
@@ -161,7 +161,7 @@ const ActivityIndicator = ({
                     return (
                         <AnimatedSpinner
                             key={index}
-                            style={componentStyles.root}
+                            style={componentStyles.layer}
                             index={index}
                             size={size}
                             color={color}
@@ -193,8 +193,9 @@ export const activityIndicatorStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('ActivityIndicator', activityIndicatorStylesDefault);
-
-export const activityIndicatorStyles = getRegisteredMoleculesComponentStyles('ActivityIndicator');
+export const activityIndicatorStyles = getRegisteredComponentStylesWithFallback(
+    'ActivityIndicator',
+    activityIndicatorStylesDefault,
+);
 
 export default memo(ActivityIndicator);

package/components/ActivityIndicator/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import ActivityIndicatorDefault from './ActivityIndicator';
 
-registerMoleculesComponents({
-    ActivityIndicator: ActivityIndicatorDefault,
-});
-
 export const ActivityIndicator = getRegisteredComponentWithFallback(
     'ActivityIndicator',
     ActivityIndicatorDefault,

package/components/Appbar/index.tsx

@@ -1,6 +1,6 @@
 import type { ComponentType } from 'react';
 
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import AppbarActions from './AppbarActions';
 import AppbarBase from './AppbarBase';
 import AppbarCenterAligned from './AppbarCenterAligned';
@@ -23,9 +23,6 @@ export const AppbarDefault = Object.assign(AppbarBase as ComponentType<AppbarPro
     Title: AppbarTitle,
     Actions: AppbarActions,
 });
-registerMoleculesComponents({
-    Appbar: AppbarDefault,
-});
 
 export const Appbar = getRegisteredComponentWithFallback('Appbar', AppbarDefault);
 

package/components/Appbar/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const appbarBaseStylesDefault = StyleSheet.create(theme => ({
     root: {
@@ -105,23 +105,35 @@ const appbarLeftDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    Appbar: appbarBaseStylesDefault,
-    Appbar_CenterAligned: appbarCenterAlignedStylesDefault,
-    Appbar_Small: appbarSmallStylesDefault,
-    Appbar_Medium: appbarMediumStylesDefault,
-    Appbar_Large: appbarLargeStylesDefault,
-    Appbar_Left: appbarLeftDefault,
-    Appbar_Right: appbarRightDefault,
-    Appbar_Title: appbarTitleDefault,
-});
-
-export const appbarBaseStyles = getRegisteredMoleculesComponentStyles('Appbar');
-export const appbarCenterAlignedStyles =
-    getRegisteredMoleculesComponentStyles('Appbar_CenterAligned');
-export const appbarSmallStyles = getRegisteredMoleculesComponentStyles('Appbar_Small');
-export const appbarMediumStyles = getRegisteredMoleculesComponentStyles('Appbar_Medium');
-export const appbarLargeStyles = getRegisteredMoleculesComponentStyles('Appbar_Large');
-export const appbarTitle = getRegisteredMoleculesComponentStyles('Appbar_Title');
-export const appbarRight = getRegisteredMoleculesComponentStyles('Appbar_Right');
-export const appbarLeft = getRegisteredMoleculesComponentStyles('Appbar_Left');
+export const appbarBaseStyles = getRegisteredComponentStylesWithFallback(
+    'Appbar',
+    appbarBaseStylesDefault,
+);
+export const appbarCenterAlignedStyles = getRegisteredComponentStylesWithFallback(
+    'Appbar_CenterAligned',
+    appbarCenterAlignedStylesDefault,
+);
+export const appbarSmallStyles = getRegisteredComponentStylesWithFallback(
+    'Appbar_Small',
+    appbarSmallStylesDefault,
+);
+export const appbarMediumStyles = getRegisteredComponentStylesWithFallback(
+    'Appbar_Medium',
+    appbarMediumStylesDefault,
+);
+export const appbarLargeStyles = getRegisteredComponentStylesWithFallback(
+    'Appbar_Large',
+    appbarLargeStylesDefault,
+);
+export const appbarTitle = getRegisteredComponentStylesWithFallback(
+    'Appbar_Title',
+    appbarTitleDefault,
+);
+export const appbarRight = getRegisteredComponentStylesWithFallback(
+    'Appbar_Right',
+    appbarRightDefault,
+);
+export const appbarLeft = getRegisteredComponentStylesWithFallback(
+    'Appbar_Left',
+    appbarLeftDefault,
+);

package/components/Avatar/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import AvatarDefault from './Avatar';
 
-registerMoleculesComponents({
-    Avatar: AvatarDefault,
-});
-
 export const Avatar = getRegisteredComponentWithFallback('Avatar', AvatarDefault);
 
 export type { Props as AvatarProps } from './Avatar';

package/components/Avatar/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const avatarStylesDefault = StyleSheet.create(theme => ({
     root: {
@@ -28,8 +28,4 @@ const avatarStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    Avatar: avatarStylesDefault,
-});
-
-export const avatarStyles = getRegisteredMoleculesComponentStyles('Avatar');
+export const avatarStyles = getRegisteredComponentStylesWithFallback('Avatar', avatarStylesDefault);

package/components/Backdrop/Backdrop.tsx

@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import { Pressable } from 'react-native';
+import { Pressable, type ViewStyle } from 'react-native';
 
 import type { BackdropProps } from './types';
 import { backdropStyles } from './utils';
@@ -10,7 +10,7 @@ const Backdrop = ({ style, ...rest }: BackdropProps) => {
             accessible={false}
             importantForAccessibility="no"
             {...rest}
-            style={[backdropStyles.root, style]}
+            style={[backdropStyles.root, style as ViewStyle]}
         />
     );
 };

package/components/Backdrop/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import BackdropDefault from './Backdrop';
 
-registerMoleculesComponents({
-    Backdrop: BackdropDefault,
-});
-
 export const Backdrop = getRegisteredComponentWithFallback('Backdrop', BackdropDefault);
 
 export type { BackdropProps } from './types';

package/components/Backdrop/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const backdropStylesDefault = StyleSheet.create({
     root: {
@@ -14,8 +14,7 @@ const backdropStylesDefault = StyleSheet.create({
     },
 });
 
-registerComponentsStyles({
-    Backdrop: backdropStylesDefault,
-});
-
-export const backdropStyles = getRegisteredMoleculesComponentStyles('Backdrop');
+export const backdropStyles = getRegisteredComponentStylesWithFallback(
+    'Backdrop',
+    backdropStylesDefault,
+);

package/components/Badge/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import BadgeDefault from './Badge';
 
-registerMoleculesComponents({
-    Badge: BadgeDefault,
-});
-
 export const Badge = getRegisteredComponentWithFallback('Badge', BadgeDefault);
 
 export type { Props as BadgeProps } from './Badge';

package/components/Badge/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const badgeStylesDefault = StyleSheet.create(theme => ({
     root: {
@@ -31,8 +31,4 @@ const badgeStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    Badge: badgeStylesDefault,
-});
-
-export const badgeStyles = getRegisteredMoleculesComponentStyles('Badge');
+export const badgeStyles = getRegisteredComponentStylesWithFallback('Badge', badgeStylesDefault);

package/components/Button/Button.tsx

@@ -166,7 +166,8 @@ const Button = (
 
     defaultStyles.useVariants({
         variant,
-        state,
+        // @ts-ignore // TODO - fix this
+        state: state as any,
         size,
     });
 
@@ -248,6 +249,7 @@ const Button = (
             ],
             iconContainerStyle: [defaultStyles.iconContainer, iconContainerStyleProp],
             textStyle: [
+                // @ts-ignore // TODO - fix this
                 isVariant('text') ? (iconName || loading ? labelTextAddons : labelText) : label,
                 textRelatedStyle,
                 labelStyle,

package/components/Button/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import ButtonDefault from './Button';
 
-registerMoleculesComponents({
-    Button: ButtonDefault,
-});
-
 export const Button = getRegisteredComponentWithFallback('Button', ButtonDefault);
 
 export type { Props as ButtonProps } from './Button';

package/components/Button/utils.ts

@@ -1,7 +1,7 @@
 import { Platform } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 export const sizeToIconSizeMap = {
     xs: 18,
@@ -13,8 +13,6 @@ export const sizeToIconSizeMap = {
 const defaultStylesDefault = StyleSheet.create(theme => {
     return {
         root: {
-            flexGrow: 1,
-
             variants: {
                 size: {
                     sm: {
@@ -409,8 +407,7 @@ const defaultStylesDefault = StyleSheet.create(theme => {
     };
 });
 
-registerComponentsStyles({
-    Button: defaultStylesDefault,
-});
-
-export const defaultStyles = getRegisteredMoleculesComponentStyles('Button');
+export const defaultStyles = getRegisteredComponentStylesWithFallback(
+    'Button',
+    defaultStylesDefault,
+);

package/components/Card/Card.tsx

@@ -2,7 +2,7 @@ import { forwardRef, memo, useMemo } from 'react';
 import type { ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { useActionState } from '../../hooks';
 import type { MD3Elevation } from '../../types/theme';
 import { resolveStateVariant } from '../../utils';
@@ -41,7 +41,7 @@ const Card = (
 
     cardStyles.useVariants({
         variant,
-        state,
+        state: state as 'disabled' | 'hovered' | 'pressed',
     });
 
     const elevationLevel = variant === 'elevated' ? (hovered ? 2 : 1) : hovered ? 1 : 0;
@@ -84,6 +84,11 @@ const cardStylesDefault = StyleSheet.create(theme => ({
                 outlined: {},
                 undefined: {},
             },
+            state: {
+                disabled: {},
+                hovered: {},
+                pressed: {},
+            },
         },
         compoundVariants: [
             {
@@ -154,7 +159,6 @@ const cardStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('Card', cardStylesDefault);
-export const cardStyles = getRegisteredMoleculesComponentStyles('Card');
+export const cardStyles = getRegisteredComponentStylesWithFallback('Card', cardStylesDefault);
 
 export default memo(forwardRef(Card));

package/components/Card/CardContent.tsx

@@ -2,7 +2,7 @@ import { forwardRef, memo, type ReactNode } from 'react';
 import { View, type ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 export type Props = ViewProps & {
     children: ReactNode | ReactNode[];
@@ -22,8 +22,9 @@ const cardContentStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('Card_Content', cardContentStylesDefault);
-
-export const cardContentStyles = getRegisteredMoleculesComponentStyles('Card_Content');
+export const cardContentStyles = getRegisteredComponentStylesWithFallback(
+    'Card_Content',
+    cardContentStylesDefault,
+);
 
 export default CardContent;

package/components/Card/CardHeader.tsx

@@ -2,7 +2,7 @@ import { forwardRef, memo, type ReactNode } from 'react';
 import { View, type ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 export type Props = ViewProps & {
     children: ReactNode | ReactNode[];
@@ -25,7 +25,9 @@ const cardHeaderStylesDefault = StyleSheet.create(theme => ({
         justifyContent: 'space-between',
     },
 }));
-registerComponentStyles('Card_Header', cardHeaderStylesDefault);
-export const cardHeaderStyles = getRegisteredMoleculesComponentStyles('Card_Header');
+export const cardHeaderStyles = getRegisteredComponentStylesWithFallback(
+    'Card_Header',
+    cardHeaderStylesDefault,
+);
 
 export default CardHeader;

package/components/Card/CardMedia.tsx

@@ -2,7 +2,7 @@ import { forwardRef, memo, type ReactNode } from 'react';
 import { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 export type Props = ViewProps & {
     style?: StyleProp<ViewStyle>;
@@ -28,8 +28,10 @@ const cardMediaStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('Card_Media', cardMediaStylesDefault);
-export const cardMediaStyles = getRegisteredMoleculesComponentStyles('Card_Media');
+export const cardMediaStyles = getRegisteredComponentStylesWithFallback(
+    'Card_Media',
+    cardMediaStylesDefault,
+);
 
 CardMedia.displayName = 'Card_Media';
 

package/components/Card/CardTypography.tsx

@@ -2,7 +2,7 @@ import { forwardRef, memo } from 'react';
 import { type TextProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { Text } from '../Text';
 
 export type Props = TextProps & {
@@ -107,7 +107,9 @@ const cardTypograhyStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('Card_Typography', cardTypograhyStylesDefault);
-export const cardTypograhyStyles = getRegisteredMoleculesComponentStyles('Card_Typography');
+export const cardTypograhyStyles = getRegisteredComponentStylesWithFallback(
+    'Card_Typography',
+    cardTypograhyStylesDefault,
+);
 
 export default memo(forwardRef(CardTypography));