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

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://molecules.taylordb.ai">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

@@ -1,25 +1,17 @@
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import {
-    type ActivityIndicatorProps,
-    Animated,
-    Easing,
-    Platform,
-    View,
-    type ViewStyle,
-} from 'react-native';
+import { type ActivityIndicatorProps, Animated, Easing, Platform, View } 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 & {
+export type Props = Omit<ActivityIndicatorProps, 'color'> & {
     /**
      * Whether to show the indicator or hide it.
      */
     animating?: boolean;
     /**
      * The color of the spinner.
-     */
     color?: string;
     /**
      * Size of the indicator.
@@ -29,7 +21,7 @@ export type Props = ActivityIndicatorProps & {
      * Whether the indicator should hide when not animating.
      */
     hidesWhenStopped?: boolean;
-    style?: ViewStyle;
+    color?: string;
 };
 
 const DURATION = 2400;
@@ -63,7 +55,7 @@ const mapIndicatorSize = (indicatorSize: 'small' | 'large' | number | undefined)
  */
 const ActivityIndicator = ({
     animating = true,
-    color: indicatorColorProp,
+    color,
     hidesWhenStopped = true,
     size: indicatorSize = 'small',
     style: styleProp,
@@ -83,13 +75,12 @@ const ActivityIndicator = ({
 
     const size = mapIndicatorSize(indicatorSize);
 
-    const { color, viewStyle, animatedViewStyle } = useMemo(() => {
+    const { viewStyle, animatedViewStyle } = useMemo(() => {
         return {
-            color: indicatorColorProp,
             viewStyle: [componentStyles.container, styleProp],
             animatedViewStyle: [{ width: size, height: size, opacity: fade }],
         };
-    }, [componentStyles.container, fade, indicatorColorProp, size, styleProp]);
+    }, [componentStyles.container, fade, size, styleProp]);
 
     const startRotation = useCallback(() => {
         // Show indicator
@@ -161,7 +152,7 @@ const ActivityIndicator = ({
                     return (
                         <AnimatedSpinner
                             key={index}
-                            style={componentStyles.root}
+                            style={componentStyles.layer}
                             index={index}
                             size={size}
                             color={color}
@@ -193,8 +184,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);